toco-react-template/template/src/layout/index.tsx

import { setCurrentMenu, setHeadMenus } from '@/app/common';
import { useAppDispatch } from '@/app/hooks';
import SuspenseLayout from '@/components/suspense-layout';
import {
  findFirstSubMenu,
  findHeadMenuByHeadKey,
  findHeadMenuBySideKey,
  menuItems,
} from '@/utils/menu';
import { MenuProps } from '@df/toco-ui';
import { useCallback, useEffect } from 'react';
import { Outlet, useLocation, useNavigate } from 'react-router-dom';
import Layout from './HeaderAndSider';
// import Layout from './HeaderAndFooter';

export type LayoutProps = {
  children?: React.ReactNode;
  onHeadMenuSelect?: MenuProps['onSelect'];
  onSideMenuSelect?: MenuProps['onSelect'];
};

const LayoutRoot = () => {
  const dispatch = useAppDispatch();
  const location = useLocation();
  const navigate = useNavigate();

  // 设置head菜单
  useEffect(() => {
    dispatch(setHeadMenus(menuItems));
  }, [dispatch]);

  // 监听路由变化
  useEffect(() => {
    const key = location.pathname.replace(/^\//, '').replace(/\/$/, '');
    const headMenu = findHeadMenuByHeadKey(key);
    if (headMenu) {
      // 一级页面
      dispatch(
        setCurrentMenu({
          headKey: headMenu.key,
        }),
      );
    } else {
      // 非一级页面
      const headMenu = findHeadMenuBySideKey(key);
      dispatch(
        setCurrentMenu({
          headKey: headMenu?.key ?? '',
          sideKey: key,
        }),
      );
    }
  }, [dispatch, location]);

  const handleHeadMenuSelect: MenuProps['onSelect'] = useCallback(
    ({ item, key, keyPath, domEvent }) => {
      const headMenu = findHeadMenuByHeadKey(key);

      if (!headMenu) {
        // 顶部嵌套的菜单（即实际点击的sideMenu）
        navigate(key);
        return;
      }

      if (!headMenu.children?.length) {
        // 一级页面
        navigate(key);
      } else {
        // 非一级页面点击一级菜单，主动跳转第一个子页面
        const subMenu = findFirstSubMenu(headMenu);
        if (subMenu) {
          navigate(subMenu.key);
        }
      }
    },
    [navigate],
  );
  const handleSideMenuSelect: MenuProps['onSelect'] = useCallback(
    ({ item, key, keyPath, domEvent }) => {
      navigate(key);
    },
    [navigate],
  );

  return (
    <Layout
      onHeadMenuSelect={handleHeadMenuSelect}
      onSideMenuSelect={handleSideMenuSelect}
    >
      <SuspenseLayout>
        <Outlet />
      </SuspenseLayout>
    </Layout>
  );
};
export default LayoutRoot;