refactor(projects): refactor the menu section code

Author: Ohh-889

src/layouts/base-layout/index.tsx

@@ -1,7 +1,6 @@
 import { AdminLayout, LAYOUT_SCROLL_EL_ID } from '@sa/materials';
 import type { LayoutMode } from '@sa/materials';
 import { configResponsive } from 'ahooks';
-import { Suspense } from 'react';
 import './index.scss';
 import {
   getContentXScrollable,
@@ -19,8 +18,7 @@ import GlobalHeader from '../modules/global-header';
 import GlobalSider from '../modules/global-sider';
 import ThemeDrawer from '../modules/theme-drawer';
 import GlobalTab from '../modules/global-tab';
-
-const GlobalMenu = lazy(() => import('../modules/global-menu'));
+import GlobalMenu from '../modules/global-menu';
 
 const LAYOUT_MODE_VERTICAL: LayoutMode = 'vertical';
 const LAYOUT_MODE_HORIZONTAL: LayoutMode = 'horizontal';
@@ -77,8 +75,6 @@ export function Component() {
     [activeFirstLevelMenuKey, menus]
   );
 
-  console.log(childrenMenu);
-
   function getSiderWidth() {
     const { width, mixWidth, mixChildMenuWidth } = themeSettings.sider;
 
@@ -150,13 +146,13 @@ export function Component() {
       Footer={<GlobalFooter />}
     >
       <GlobalContent />
-      <Suspense fallback={null}>
-        <GlobalMenu
-          childrenMenu={childrenMenu}
-          mode={themeSettings.layout.mode}
-          menus={menus}
-        />
-      </Suspense>
+
+      <GlobalMenu
+        childrenMenu={childrenMenu}
+        mode={themeSettings.layout.mode}
+        menus={menus}
+      />
+
       <ThemeDrawer />
     </AdminLayout>
   );

src/layouts/modules/global-menu/components/FirstLevelMenu.tsx

@@ -61,7 +61,7 @@ function MixMenuItem({ label, Icon, active, isMini, inverted, onClick }: MixMenu
   );
 }
 
-const FirstLevelMenu: FC<Props> = memo(({ children, inverted, onSelect }) => {
+const FirstLevelMenu = ({ children, inverted, onSelect }: Props) => {
   const menus = useMenu();
 
   const siderCollapse = useAppSelector(getSiderCollapse);
@@ -88,6 +88,6 @@ const FirstLevelMenu: FC<Props> = memo(({ children, inverted, onSelect }) => {
       />
     </div>
   );
-});
+};
 
 export default FirstLevelMenu;

src/layouts/modules/global-menu/components/HorizontalMenu.tsx

@@ -1,7 +1,12 @@
 import type { Route } from '@sa/simple-router';
 import type { MenuInfo } from 'rc-menu/lib/interface';
+import type { MenuProps } from 'antd';
 import { useRouterPush } from '@/hooks/common/routerPush';
 
+export interface Props {
+  menus: MenuProps['items'];
+}
+
 function getSelectKey(route: Route) {
   const { hideInMenu, activeMenu } = route.meta;
 
@@ -12,11 +17,9 @@ function getSelectKey(route: Route) {
   return [routeName];
 }
 
-const HorizontalMenu = () => {
+const HorizontalMenu: FC<Props> = memo(({ menus }) => {
   const route = useRoute();
 
-  const menus = useMenu();
-
   const router = useRouterPush();
 
   const selectKey = getSelectKey(route);
@@ -31,9 +34,10 @@ const HorizontalMenu = () => {
       items={menus}
       inlineIndent={18}
       onSelect={handleClickMenu}
+      className="size-full bg-container transition-300 border-0!"
       selectedKeys={selectKey}
     />
   );
-};
+});
 
 export default HorizontalMenu;

src/layouts/modules/global-menu/components/VerticalMenu.tsx

@@ -2,8 +2,10 @@ import { SimpleScrollbar } from '@sa/materials';
 import type { Route, RouteRecordNormalized } from '@sa/simple-router';
 import type { MenuInfo } from 'rc-menu/lib/interface';
 import type { MenuProps } from 'antd';
+import type { FC } from 'react';
 import { getSiderCollapse } from '@/store/slice/app';
 import { getThemeSettings } from '@/store/slice/theme';
+import type { Props } from './HorizontalMenu';
 
 interface LevelKeysProps {
   key?: string;
@@ -47,9 +49,7 @@ const getSelectedMenuKeyPath = (matches: RouteRecordNormalized[]) => {
   return result;
 };
 
-const VerticalMenu = memo(() => {
-  const menus = useMenu();
-
+const VerticalMenu: FC<Props> = memo(({ menus }) => {
   const route = useRoute();
   const levelKeys = getLevelKeys(menus as LevelKeysProps[]);
 

src/layouts/modules/global-menu/index.tsx

@@ -1,29 +1,43 @@
 import type { MenuProps } from 'antd';
-import { createPortal } from 'react-dom';
-import { GLOBAL_HEADER_MENU_ID, GLOBAL_SIDER_MENU_ID } from '@/constants/app';
+import type { SubMenuType } from 'antd/es/menu/interface';
+import { setActiveFirstLevelMenuKey } from '@/store/slice/tab';
 import VerticalMixMenu from './modules/VerticalMixMenu';
 import HorizontalMenu from './modules/HorizontalMenu';
-import HorizontalMixMenu from './modules/HorizontalMixMenu';
 import VerticalMenu from './modules/VerticalMenu';
+import FirstLevelMenu from './components/FirstLevelMenu';
 
 interface Props {
   mode: UnionKey.ThemeLayoutMode;
   menus: MenuProps['items'];
   childrenMenu: MenuProps['items'];
 }
 
-const headerContainer = document.getElementById(GLOBAL_HEADER_MENU_ID);
+const GlobalMenu: FC<Props> = memo(({ mode, menus, childrenMenu }) => {
+  const dispatch = useAppDispatch();
 
-const siderContainer = document.getElementById(GLOBAL_SIDER_MENU_ID);
+  const router = useRouterPush();
+  function handleSelectMixMenu(menu: SubMenuType) {
+    dispatch(setActiveFirstLevelMenuKey(menu.key));
 
-const GlobalMenu: FC<Props> = memo(({ mode, menus, childrenMenu }) => {
-  if (!headerContainer || !siderContainer) return null;
+    if (!menu.children?.length) {
+      router.routerPush({ name: menu.key });
+    }
+  }
 
   const componentsMap = {
-    vertical: createPortal(<VerticalMenu menus={menus} />, siderContainer),
-    'vertical-mix': createPortal(<VerticalMixMenu menus={childrenMenu} />, siderContainer),
-    horizontal: createPortal(<HorizontalMenu />, headerContainer),
-    'horizontal-mix': <HorizontalMixMenu />
+    vertical: <VerticalMenu menus={menus} />,
+    'vertical-mix': <VerticalMixMenu menus={childrenMenu} />,
+    horizontal: <HorizontalMenu menus={menus} />,
+    'horizontal-mix': [
+      <HorizontalMenu
+        key={1}
+        menus={childrenMenu}
+      />,
+      <FirstLevelMenu
+        key={2}
+        onSelect={handleSelectMixMenu}
+      />
+    ]
   };
 
   return componentsMap[mode];

src/layouts/modules/global-menu/modules/HorizontalMenu.tsx

@@ -1,42 +1,15 @@
-import type { Route } from '@sa/simple-router';
-import type { MenuInfo } from 'rc-menu/lib/interface';
-import { useRouterPush } from '@/hooks/common/routerPush';
-import { headerContainer } from './shared';
+import { createPortal } from 'react-dom';
+import { GLOBAL_HEADER_MENU_ID } from '@/constants/app';
+import HorizontalMenu from '../components/HorizontalMenu';
+import type { Props } from '../components/HorizontalMenu';
+import { useGetElementById } from './hook';
 
-function getSelectKey(route: Route) {
-  const { hideInMenu, activeMenu } = route.meta;
+const Horizontal = ({ menus }: Props) => {
+  const container = useGetElementById(GLOBAL_HEADER_MENU_ID);
 
-  const name = route.name as string;
+  if (!container) return null;
 
-  const routeName = (hideInMenu ? activeMenu : name) || name;
-
-  return [routeName];
-}
-
-const HorizontalMenu = () => {
-  const route = useRoute();
-
-  const menus = useMenu();
-
-  const router = useRouterPush();
-
-  const selectKey = getSelectKey(route);
-
-  function handleClickMenu(menuInfo: MenuInfo) {
-    router.menuPush(menuInfo.key);
-  }
-
-  if (!headerContainer) return null;
-
-  return (
-    <AMenu
-      mode="horizontal"
-      items={menus}
-      inlineIndent={18}
-      onSelect={handleClickMenu}
-      selectedKeys={selectKey}
-    />
-  );
+  return createPortal(<HorizontalMenu menus={menus} />, container);
 };
 
-export default HorizontalMenu;
+export default Horizontal;