@ozo/react-jazz/src/layouts/BasicLayout/index.js

React 桌面端开发脚手架，基于CRA3，通用、开箱即用。

import React, { useState } from 'react';
import { Shell, ConfigProvider } from '@alifd/next';
import PageNav from './components/PageNav';
import GlobalSearch from './components/GlobalSearch';
import Notice from './components/Notice';
import SolutionLink from './components/SolutionLink';
import HeaderAvatar from './components/HeaderAvatar';
import Logo from './components/Logo';
import Footer from './components/Footer';
import MainRoutes from './MainRoutes';

(function () {
    const throttle = function (type, name, obj = window) {
        let running = false;

        const func = () => {
            if (running) {
                return;
            }

            running = true;
            requestAnimationFrame(() => {
                obj.dispatchEvent(new CustomEvent(name));
                running = false;
            });
        };

        obj.addEventListener(type, func);
    };

    throttle('resize', 'optimizedResize');
})();

export default function BasicLayout({ children }) {
    const getDevice = (width) => {
        const isPhone = typeof navigator !== 'undefined' && navigator && navigator.userAgent.match(/phone/gi);

        if (width < 680 || isPhone) {
            return 'phone';
        }
        if (width < 1280 && width > 680) {
            return 'tablet';
        }
        return 'desktop';
    };

    const [device, setDevice] = useState(getDevice(NaN));
    window.addEventListener('optimizedResize', (e) => {
        setDevice(getDevice(e && e.target && e.target.innerWidth));
    });
    return (
        <ConfigProvider device={device}>
            <Shell
                type="brand"
                style={{
                    minHeight: '100vh',
                }}
            >
                <Shell.Branding>
                    <Logo image="https://img.alicdn.com/tfs/TB1.ZBecq67gK0jSZFHXXa9jVXa-904-826.png" text="Logo" />
                </Shell.Branding>
                <Shell.Navigation
                    direction="hoz"
                    style={{
                        marginRight: 10,
                    }}
                >
                    <GlobalSearch />
                </Shell.Navigation>
                <Shell.Action>
                    <Notice />
                    <SolutionLink />
                    <HeaderAvatar />
                </Shell.Action>
                <Shell.Navigation>
                    <PageNav />
                </Shell.Navigation>

                <Shell.Content>
                    <MainRoutes routerData />
                </Shell.Content>
                <Shell.Footer>
                    <Footer />
                </Shell.Footer>
            </Shell>
        </ConfigProvider>
    );
}