refactor(projects): refactor global menu & support reversed-horizontal-mix-menu

Ohh-889 · Ohh-889 · commit 132fa6f8a68d · 2024-09-05T12:38:33.000+08:00
diff --git a/src/layouts/base-layout/BaseLayout.tsx b/src/layouts/base-layout/BaseLayout.tsx
@@ -23,8 +23,9 @@ const LAYOUT_MODE_VERTICAL: LayoutMode = 'vertical';
 const LAYOUT_MODE_HORIZONTAL: LayoutMode = 'horizontal';
 const LAYOUT_MODE_VERTICAL_MIX = 'vertical-mix';
 const LAYOUT_MODE_HORIZONTAL_MIX = 'horizontal-mix';
-// const breakpointsTailwind = { sm: 640, md: 768, lg: 1024, xl: 1280, '2xl': 1536 };
+
 configResponsive({ sm: 640 });
+
 const HEADER_PROPS_CONFIG: Record<UnionKey.ThemeLayoutMode, App.Global.HeaderProps> = {
   vertical: {
     showLogo: false,
@@ -54,7 +55,7 @@ const BaseLayout = () => {
   const fullContent = useAppSelector(getFullContent);
   const dispatch = useAppDispatch();
   const responsive = useResponsive();
-  const { childLevelMenus } = useMixMenuContext();
+  const { childLevelMenus, isActiveFirstLevelMenuHasChildren } = useMixMenuContext();
 
   const contentXScrollable = useAppSelector(getContentXScrollable);
   const mixSiderFixed = useAppSelector(getMixSiderFixed);
@@ -70,8 +71,14 @@ const BaseLayout = () => {
   const isHorizontalMix = themeSettings.layout.mode === LAYOUT_MODE_HORIZONTAL_MIX;
 
   function getSiderWidth() {
+    const { reverseHorizontalMix } = themeSettings.layout;
+
     const { width, mixWidth, mixChildMenuWidth } = themeSettings.sider;
 
+    if (isHorizontalMix && reverseHorizontalMix) {
+      return isActiveFirstLevelMenuHasChildren ? width : 0;
+    }
+
     let w = isVerticalMix || isHorizontalMix ? mixWidth : width;
 
     if (isVerticalMix && mixSiderFixed && childLevelMenus.length) {
@@ -82,8 +89,13 @@ const BaseLayout = () => {
   }
 
   function getSiderCollapsedWidth() {
+    const { reverseHorizontalMix } = themeSettings.layout;
     const { collapsedWidth, mixCollapsedWidth, mixChildMenuWidth } = themeSettings.sider;
 
+    if (isHorizontalMix && reverseHorizontalMix) {
+      return isActiveFirstLevelMenuHasChildren ? collapsedWidth : 0;
+    }
+
     let w = isVerticalMix || isHorizontalMix ? mixCollapsedWidth : collapsedWidth;
 
     if (isVerticalMix && mixSiderFixed && childLevelMenus.length) {
@@ -141,7 +153,10 @@ const BaseLayout = () => {
     >
       <GlobalContent />
 
-      <GlobalMenu mode={themeSettings.layout.mode} />
+      <GlobalMenu
+        reverse={themeSettings.layout.reverseHorizontalMix}
+        mode={themeSettings.layout.mode}
+      />
 
       <ThemeDrawer />
     </AdminLayout>
diff --git a/src/layouts/base-layout/MenuProvider.tsx b/src/layouts/base-layout/MenuProvider.tsx
@@ -37,7 +37,7 @@ const MenuProvider: FC<Props> = ({ children }) => {
     activeFirstLevelMenuKey,
     setActiveFirstLevelMenuKey: changeActiveFirstLevelMenuKey,
     firstLevelMenu,
-    isActiveFirstLevelMenuHasChildren: activeFirstLevelMenuKey ? Boolean(activeFirstLevelMenuKey) : false,
+    isActiveFirstLevelMenuHasChildren: activeFirstLevelMenuKey ? Boolean(childLevelMenus) : false,
     childLevelMenus: childLevelMenus || []
   };
 
diff --git a/src/layouts/modules/global-menu/components/FirstLevelMenu.tsx b/src/layouts/modules/global-menu/components/FirstLevelMenu.tsx
@@ -64,7 +64,7 @@ function MixMenuItem(menu: MixMenuItemProps) {
 }
 
 const FirstLevelMenu = ({ children, inverted, onSelect }: Props) => {
-  const { firstLevelMenu } = useMixMenuContext();
+  const { allMenus } = useMixMenuContext();
 
   const siderCollapse = useAppSelector(getSiderCollapse);
   const activeMenuKey = useAppSelector(selectActiveFirstLevelMenuKey);
@@ -73,7 +73,7 @@ const FirstLevelMenu = ({ children, inverted, onSelect }: Props) => {
     <div className="h-full flex-col-stretch flex-1-hidden">
       {children}
       <SimpleScrollbar>
-        {firstLevelMenu.map(item => (
+        {allMenus.map(item => (
           <MixMenuItem
             onClick={() => onSelect(item as any)}
             isMini={siderCollapse}
diff --git a/src/layouts/modules/global-menu/components/HorizontalMenu.tsx b/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 { FC } from 'react';
 import { useRouterPush } from '@/hooks/common/routerPush';
 
+interface Props {
+  mode: '1' | '2' | '3';
+}
+
 function getSelectKey(route: Route) {
   const { hideInMenu, activeMenu } = route.meta;
 
@@ -12,10 +17,16 @@ function getSelectKey(route: Route) {
   return [routeName];
 }
 
-const HorizontalMenu = memo(() => {
+const HorizontalMenu: FC<Props> = memo(({ mode }) => {
   const route = useRoute();
 
-  const { allMenus } = useMixMenuContext();
+  const { allMenus, childLevelMenus, firstLevelMenu } = useMixMenuContext();
+
+  const menus = new Map([
+    ['1', allMenus as any],
+    ['2', childLevelMenus],
+    ['3', firstLevelMenu]
+  ]);
 
   const router = useRouterPush();
 
@@ -28,7 +39,7 @@ const HorizontalMenu = memo(() => {
   return (
     <AMenu
       mode="horizontal"
-      items={allMenus}
+      items={menus.get(mode)}
       inlineIndent={18}
       onSelect={handleClickMenu}
       className="size-full bg-container transition-300 border-0!"
diff --git a/src/layouts/modules/global-menu/components/VerticalMenu.tsx b/src/layouts/modules/global-menu/components/VerticalMenu.tsx
@@ -50,7 +50,7 @@ const getSelectedMenuKeyPath = (matches: RouteRecordNormalized[]) => {
 const VerticalMenu = memo(() => {
   const route = useRoute();
 
-  const { allMenus } = useMixMenuContext();
+  const { allMenus, childLevelMenus } = useMixMenuContext();
 
   const levelKeys = getLevelKeys(allMenus as LevelKeysProps[]);
 
@@ -103,7 +103,7 @@ const VerticalMenu = memo(() => {
     <SimpleScrollbar>
       <AMenu
         mode="inline"
-        items={allMenus}
+        items={themeSettings.layout.mode.includes('mix') ? childLevelMenus : allMenus}
         inlineCollapsed={inlineCollapsed}
         openKeys={stateOpenKeys}
         onOpenChange={onOpenChange}
diff --git a/src/layouts/modules/global-menu/index.tsx b/src/layouts/modules/global-menu/index.tsx
@@ -1,38 +1,24 @@
-import type { SubMenuType } from 'antd/es/menu/interface';
-import { setActiveFirstLevelMenuKey } from '@/store/slice/tab';
-import VerticalMixMenu from './modules/VerticalMixMenu';
+import HorizontalMix from './modules/HorizontalMix';
+import VerticalMixMenu from './modules/VerticalMix';
 import HorizontalMenu from './modules/Horizontal';
 import VerticalMenu from './modules/Vertical';
-import FirstLevelMenu from './components/FirstLevelMenu';
+import ReversedHorizontalMix from './modules/ReversedHorizontalMix';
 
 interface Props {
   mode: UnionKey.ThemeLayoutMode;
+  reverse: boolean;
 }
 
-const GlobalMenu: FC<Props> = memo(({ mode }) => {
-  const dispatch = useAppDispatch();
-
-  const router = useRouterPush();
-  function handleSelectMixMenu(menu: SubMenuType) {
-    dispatch(setActiveFirstLevelMenuKey(menu.key));
-
-    if (!menu.children?.length) {
-      router.routerPush({ name: menu.key });
-    }
-  }
-
-  const componentsMap = {
-    vertical: <VerticalMenu />,
-    'vertical-mix': <VerticalMixMenu />,
-    horizontal: <HorizontalMenu />,
-    'horizontal-mix': [
-      <HorizontalMenu key={1} />,
-      <FirstLevelMenu
-        key={2}
-        onSelect={handleSelectMixMenu}
-      />
-    ]
-  };
+const GlobalMenu: FC<Props> = memo(({ mode, reverse }) => {
+  const componentsMap = useMemo(
+    () => ({
+      vertical: <VerticalMenu />,
+      'vertical-mix': <VerticalMixMenu />,
+      horizontal: <HorizontalMenu />,
+      'horizontal-mix': reverse ? <ReversedHorizontalMix /> : <HorizontalMix />
+    }),
+    [reverse]
+  );
 
   return componentsMap[mode];
 });
diff --git a/src/layouts/modules/global-menu/modules/Horizontal.tsx b/src/layouts/modules/global-menu/modules/Horizontal.tsx
@@ -3,12 +3,12 @@ import { GLOBAL_HEADER_MENU_ID } from '@/constants/app';
 import HorizontalMenu from '../components/HorizontalMenu';
 import { useGetElementById } from './hook';
 
-const Horizontal = () => {
+const Horizontal = ({ mode = '1' }: { mode?: '1' | '2' | '3' }) => {
   const container = useGetElementById(GLOBAL_HEADER_MENU_ID);
 
   if (!container) return null;
 
-  return createPortal(<HorizontalMenu />, container);
+  return createPortal(<HorizontalMenu mode={mode} />, container);
 };
 
 export default Horizontal;
diff --git a/src/layouts/modules/global-menu/modules/HorizontalMix.tsx b/src/layouts/modules/global-menu/modules/HorizontalMix.tsx
@@ -0,0 +1,41 @@
+import { createPortal } from 'react-dom';
+import type { SubMenuType } from 'antd/es/menu/interface';
+import { GLOBAL_SIDER_MENU_ID } from '@/constants/app';
+import { setActiveFirstLevelMenuKey } from '@/store/slice/tab';
+import FirstLevelMenu from '../components/FirstLevelMenu';
+import { useGetElementById } from './hook';
+import Horizontal from './Horizontal';
+
+const HorizontalMix = () => {
+  const container = useGetElementById(GLOBAL_SIDER_MENU_ID);
+
+  const dispatch = useAppDispatch();
+
+  const router = useRouterPush();
+
+  function handleSelectMixMenu(menu: SubMenuType) {
+    dispatch(setActiveFirstLevelMenuKey(menu.key));
+
+    if (!menu.children?.length) {
+      router.routerPush({ name: menu.key });
+    }
+  }
+
+  if (!container) return null;
+
+  return [
+    <Horizontal
+      mode="2"
+      key="horizontal"
+    />,
+    createPortal(
+      <FirstLevelMenu
+        key="first-level-menu"
+        onSelect={handleSelectMixMenu}
+      />,
+      container
+    )
+  ];
+};
+
+export default HorizontalMix;
diff --git a/src/layouts/modules/global-menu/modules/ReversedHorizontalMix.tsx b/src/layouts/modules/global-menu/modules/ReversedHorizontalMix.tsx
@@ -0,0 +1,14 @@
+import Vertical from './Vertical';
+import Horizontal from './Horizontal';
+
+const ReversedHorizontalMix = () => {
+  return [
+    <Vertical key="vertical" />,
+    <Horizontal
+      key="ReversedHorizontalMix "
+      mode="3"
+    />
+  ];
+};
+
+export default ReversedHorizontalMix;
diff --git a/src/layouts/modules/global-menu/modules/VerticalMix.tsx b/src/layouts/modules/global-menu/modules/VerticalMix.tsx
@@ -38,9 +38,9 @@ const VerticalMix = memo(() => {
     }
   }
   function handleResetActiveMenu() {
+    setDrawerVisible(false);
     const firstLevelRouteName = getActiveFirstLevelMenuKey(router.currentRoute);
     dispatch(setActiveFirstLevelMenuKey(firstLevelRouteName));
-    setDrawerVisible(false);
   }
 
   return (
diff --git a/src/layouts/modules/theme-drawer/components/LayoutModeCard.tsx b/src/layouts/modules/theme-drawer/components/LayoutModeCard.tsx
@@ -2,9 +2,9 @@ import type { TooltipProps } from 'antd';
 import ClassNames from 'classnames';
 import { Tooltip } from 'antd';
 import { themeLayoutModeRecord } from '@/constants/app';
-import { getThemeSettings, setLayoutMode } from '@/store/slice/theme';
-
+import { setLayoutMode } from '@/store/slice/theme';
 import { getIsMobile } from '@/store/slice/app';
+
 type LayoutConfig = Record<
   UnionKey.ThemeLayoutMode,
   {
@@ -42,12 +42,15 @@ const LAYOUT_CONFIG: LayoutConfig = {
   }
 };
 
-interface Props extends Record<UnionKey.ThemeLayoutMode, React.ReactNode> {}
+interface Props extends Record<UnionKey.ThemeLayoutMode, React.ReactNode> {
+  mode: UnionKey.ThemeLayoutMode;
+}
 
-const LayoutModeCard: FC<Props> = memo(props => {
-  const themeSettings = useAppSelector(getThemeSettings);
+const LayoutModeCard: FC<Props> = memo(({ mode, ...rest }) => {
   const isMobile = useAppSelector(getIsMobile);
+
   const dispatch = useAppDispatch();
+
   const { t } = useTranslation();
   function handleChangeMode(modeType: UnionKey.ThemeLayoutMode) {
     if (isMobile) return;
@@ -61,7 +64,7 @@ const LayoutModeCard: FC<Props> = memo(props => {
         <div
           key={key}
           className={ClassNames('flex cursor-pointer border-2px rounded-6px hover:border-primary', [
-            themeSettings.layout.mode === key ? 'border-primary' : 'border-transparent'
+            mode === key ? 'border-primary' : 'border-transparent'
           ])}
           onClick={() => handleChangeMode(key as UnionKey.ThemeLayoutMode)}
         >
@@ -74,7 +77,7 @@ const LayoutModeCard: FC<Props> = memo(props => {
                 key.includes('vertical') ? 'flex' : 'flex-col'
               ])}
             >
-              {props[key as UnionKey.ThemeLayoutMode]}
+              {rest[key as UnionKey.ThemeLayoutMode]}
             </div>
           </Tooltip>
         </div>
diff --git a/src/layouts/modules/theme-drawer/modules/LayoutMode.tsx b/src/layouts/modules/theme-drawer/modules/LayoutMode.tsx
@@ -1,5 +1,7 @@
 import ClassNames from 'classnames';
+import { changeReverseHorizontalMix, getThemeSettings } from '@/store/slice/theme';
 import LayoutModeCard from '../components/LayoutModeCard';
+import SettingItem from '../components/SettingItem';
 import style from './layoutMode.module.scss';
 
 const LAYOUTS_COMPONENTS: Record<UnionKey.ThemeLayoutMode, React.ReactNode> = {
@@ -42,7 +44,34 @@ const LAYOUTS_COMPONENTS: Record<UnionKey.ThemeLayoutMode, React.ReactNode> = {
 };
 
 const LayoutMode = memo(() => {
-  return <LayoutModeCard {...LAYOUTS_COMPONENTS} />;
+  const themeSettings = useAppSelector(getThemeSettings);
+
+  const { t } = useTranslation();
+
+  const dispatch = useAppDispatch();
+
+  function toggleReverseHorizontalMix(checked: boolean) {
+    dispatch(changeReverseHorizontalMix(checked));
+  }
+
+  return (
+    <>
+      <LayoutModeCard
+        mode={themeSettings.layout.mode}
+        {...LAYOUTS_COMPONENTS}
+      />
+      {themeSettings.layout.mode === 'horizontal-mix' && (
+        <div className="mt-16px">
+          <SettingItem label={t('theme.layoutMode.reverseHorizontalMix')}>
+            <ASwitch
+              defaultChecked={themeSettings.layout.reverseHorizontalMix}
+              onChange={toggleReverseHorizontalMix}
+            />
+          </SettingItem>
+        </div>
+      )}
+    </>
+  );
 });
 
 export default LayoutMode;
diff --git a/src/store/slice/theme/index.ts b/src/store/slice/theme/index.ts
@@ -121,6 +121,9 @@ export const themeSlice = createSlice({
     },
     setIsOnlyExpandCurrentParentMenu(state, { payload }: PayloadAction<boolean>) {
       state.settings.isOnlyExpandCurrentParentMenu = payload;
+    },
+    changeReverseHorizontalMix(state, { payload }: PayloadAction<boolean>) {
+      state.settings.layout.reverseHorizontalMix = payload;
     }
   },
   selectors: {
@@ -149,7 +152,8 @@ export const {
   setSider,
   setFooter,
   setIsOnlyExpandCurrentParentMenu,
-  setColourWeakness
+  setColourWeakness,
+  changeReverseHorizontalMix
 } = themeSlice.actions;
 
 // 计算属性选择器
diff --git a/src/theme/settings.ts b/src/theme/settings.ts
diff --git a/src/types/app.d.ts b/src/types/app.d.ts
diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts

Original file line number	Diff line number	Diff line change
`@@ -38,9 +38,9 @@ const VerticalMix = memo(() => {`
`38`	`38`	`}`
`39`	`39`	`}`
`40`	`40`	`function handleResetActiveMenu() {`
	`41`	`+ setDrawerVisible(false);`
`41`	`42`	`const firstLevelRouteName = getActiveFirstLevelMenuKey(router.currentRoute);`
`42`	`43`	`dispatch(setActiveFirstLevelMenuKey(firstLevelRouteName));`
`43`		`- setDrawerVisible(false);`
`44`	`44`	`}`
`45`	`45`
`46`	`46`	`return (`