admin/src/layouts/AuthLayout/index.jsx

import React, { useEffect, useRef, useMemo, useState } from 'react';
import { Layout, Spin } from 'antd';
import { useLocation, Outlet } from "react-router-dom";
import { useModel } from '@/store';
import { getItems } from '@/routes/menus';
import useRoute from '@/utils/hooks/useRoute';
import RequireLogin from './components/RequireLogin';
import SiderBar from './components/SiderBar';
import Header from './components/Header';
import Container from './components/Container';
import HtmlTitle from './components/HtmlTitle';

import './style.less';

export default (props) => {
  const { theme } = useModel('system');
  const { user } = useModel('user');

  const allMenus = useMemo(() => getItems(), []);
  const [siderMenus, setSiderMenus] = useState([]);

  const location = useLocation();
  const currentRoute = useRoute();

  const onSplitMenuChange = (key) => {
    const target = allMenus.filter(x => x.key === key)[0];
    if (target) {
      setSiderMenus(target.children || []);
    }
  }

  return (
    <Spin spinning={!user} size="large">
      <HtmlTitle />
      <RequireLogin>
        {
          currentRoute && currentRoute.meta && currentRoute.meta.noLayout
            ? <Outlet />
            : (
              <Layout style={{ minHeight: '100vh' }}>
                <Header theme={theme} menus={allMenus} location={location} onMenuChange={onSplitMenuChange} />
                <Layout>
                  <SiderBar theme={theme} menus={siderMenus} location={location} />
                  <Container location={location} />
                </Layout>
              </Layout>
            )
        }
      </RequireLogin>
    </Spin>
  );
}