From c7b880280bde2f93fdd2788e4ee395bb298704cf Mon Sep 17 00:00:00 2001
From: wang <1509326266@qq.com>
Date: Sun, 8 Sep 2024 14:20:58 +0800
Subject: [PATCH] refactor(projects): refactor global menu & support
 reversed-horizontal-mix-menu

---
 src/constants/app.ts                          |   4 +
 src/hooks/common/router.ts                    |  18 ++-
 src/layouts/base-layout/index.vue             |  73 +++++----
 src/layouts/context/index.ts                  |  60 +++++--
 src/layouts/modules/global-header/index.vue   |  23 +--
 src/layouts/modules/global-menu/base-menu.vue | 149 ------------------
 .../{ => components}/first-level-menu.vue     |  37 +++--
 .../global-menu/horizontal-mix-menu.vue       |  28 ----
 src/layouts/modules/global-menu/index.vue     |  35 ++++
 .../global-menu/modules/horizontal-menu.vue   |  39 +++++
 .../modules/horizontal-mix-menu.vue           |  64 ++++++++
 .../modules/reversed-horizontal-mix-menu.vue  |  67 ++++++++
 .../global-menu/modules/vertical-menu.vue     |  47 ++++++
 .../global-menu/modules/vertical-mix-menu.vue | 115 ++++++++++++++
 .../modules/global-menu/vertical-mix-menu.vue |  72 ---------
 src/layouts/modules/global-sider/index.vue    |  13 +-
 .../theme-drawer/modules/layout-mode.vue      |   8 +
 src/locales/langs/en-us.ts                    |   3 +-
 src/locales/langs/zh-cn.ts                    |   3 +-
 src/theme/settings.ts                         |   3 +-
 src/typings/app.d.ts                          |   8 +-
 21 files changed, 530 insertions(+), 339 deletions(-)
 delete mode 100644 src/layouts/modules/global-menu/base-menu.vue
 rename src/layouts/modules/global-menu/{ => components}/first-level-menu.vue (79%)
 delete mode 100644 src/layouts/modules/global-menu/horizontal-mix-menu.vue
 create mode 100644 src/layouts/modules/global-menu/index.vue
 create mode 100644 src/layouts/modules/global-menu/modules/horizontal-menu.vue
 create mode 100644 src/layouts/modules/global-menu/modules/horizontal-mix-menu.vue
 create mode 100644 src/layouts/modules/global-menu/modules/reversed-horizontal-mix-menu.vue
 create mode 100644 src/layouts/modules/global-menu/modules/vertical-menu.vue
 create mode 100644 src/layouts/modules/global-menu/modules/vertical-mix-menu.vue
 delete mode 100644 src/layouts/modules/global-menu/vertical-mix-menu.vue

diff --git a/src/constants/app.ts b/src/constants/app.ts
index ca4f927..4948a15 100644
--- a/src/constants/app.ts
+++ b/src/constants/app.ts
@@ -1,5 +1,9 @@
 import { transformRecordToOption } from '@/utils/common';
 
+export const GLOBAL_HEADER_MENU_ID = '__GLOBAL_HEADER_MENU__';
+
+export const GLOBAL_SIDER_MENU_ID = '__GLOBAL_SIDER_MENU__';
+
 export const themeSchemaRecord: Record<UnionKey.ThemeScheme, App.I18n.I18nKey> = {
   light: 'theme.themeSchema.light',
   dark: 'theme.themeSchema.dark',
diff --git a/src/hooks/common/router.ts b/src/hooks/common/router.ts
index 645b0a5..4a43342 100644
--- a/src/hooks/common/router.ts
+++ b/src/hooks/common/router.ts
@@ -30,17 +30,30 @@ export function useRouterPush(inSetup = true) {
       name: key
     };
 
-    if (query) {
+    if (Object.keys(query || {}).length) {
       routeLocation.query = query;
     }
 
-    if (params) {
+    if (Object.keys(params || {}).length) {
       routeLocation.params = params;
     }
 
     return routerPush(routeLocation);
   }
 
+  function routerPushByKeyWithMetaQuery(key: RouteKey) {
+    const allRoutes = router.getRoutes();
+    const meta = allRoutes.find(item => item.name === key)?.meta || null;
+
+    const query: Record<string, string> = {};
+
+    meta?.query?.forEach(item => {
+      query[item.key] = item.value;
+    });
+
+    return routerPushByKey(key, { query });
+  }
+
   async function toHome() {
     return routerPushByKey('root');
   }
@@ -99,6 +112,7 @@ export function useRouterPush(inSetup = true) {
     routerPush,
     routerBack,
     routerPushByKey,
+    routerPushByKeyWithMetaQuery,
     toLogin,
     toggleLoginModule,
     redirectFromLogin
diff --git a/src/layouts/base-layout/index.vue b/src/layouts/base-layout/index.vue
index 948638b..7debe5d 100644
--- a/src/layouts/base-layout/index.vue
+++ b/src/layouts/base-layout/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, defineAsyncComponent } from 'vue';
 import { AdminLayout, LAYOUT_SCROLL_EL_ID } from '@sa/materials';
 import type { LayoutMode } from '@sa/materials';
 import { useAppStore } from '@/store/modules/app';
@@ -18,7 +18,9 @@ defineOptions({
 
 const appStore = useAppStore();
 const themeStore = useThemeStore();
-const { menus } = setupMixMenuContext();
+const { childLevelMenus, isActiveFirstLevelMenuHasChildren } = setupMixMenuContext();
+
+const GlobalMenu = defineAsyncComponent(() => import('../modules/global-menu/index.vue'));
 
 const layoutMode = computed(() => {
   const vertical: LayoutMode = 'vertical';
@@ -26,30 +28,34 @@ const layoutMode = computed(() => {
   return themeStore.layout.mode.includes(vertical) ? vertical : horizontal;
 });
 
-const headerPropsConfig: Record<UnionKey.ThemeLayoutMode, App.Global.HeaderProps> = {
-  vertical: {
-    showLogo: false,
-    showMenu: false,
-    showMenuToggler: true
-  },
-  'vertical-mix': {
-    showLogo: false,
-    showMenu: false,
-    showMenuToggler: false
-  },
-  horizontal: {
-    showLogo: true,
-    showMenu: true,
-    showMenuToggler: false
-  },
-  'horizontal-mix': {
-    showLogo: true,
-    showMenu: true,
-    showMenuToggler: false
-  }
-};
-
-const headerProps = computed(() => headerPropsConfig[themeStore.layout.mode]);
+const headerProps = computed(() => {
+  const { mode, reverseHorizontalMix } = themeStore.layout;
+
+  const headerPropsConfig: Record<UnionKey.ThemeLayoutMode, App.Global.HeaderProps> = {
+    vertical: {
+      showLogo: false,
+      showMenu: false,
+      showMenuToggler: true
+    },
+    'vertical-mix': {
+      showLogo: false,
+      showMenu: false,
+      showMenuToggler: false
+    },
+    horizontal: {
+      showLogo: true,
+      showMenu: true,
+      showMenuToggler: false
+    },
+    'horizontal-mix': {
+      showLogo: true,
+      showMenu: true,
+      showMenuToggler: reverseHorizontalMix && isActiveFirstLevelMenuHasChildren.value
+    }
+  };
+
+  return headerPropsConfig[mode];
+});
 
 const siderVisible = computed(() => themeStore.layout.mode !== 'horizontal');
 
@@ -62,11 +68,16 @@ const siderWidth = computed(() => getSiderWidth());
 const siderCollapsedWidth = computed(() => getSiderCollapsedWidth());
 
 function getSiderWidth() {
+  const { reverseHorizontalMix } = themeStore.layout;
   const { width, mixWidth, mixChildMenuWidth } = themeStore.sider;
 
+  if (isHorizontalMix.value && reverseHorizontalMix) {
+    return isActiveFirstLevelMenuHasChildren.value ? width : 0;
+  }
+
   let w = isVerticalMix.value || isHorizontalMix.value ? mixWidth : width;
 
-  if (isVerticalMix.value && appStore.mixSiderFixed && menus.value.length) {
+  if (isVerticalMix.value && appStore.mixSiderFixed && childLevelMenus.value.length) {
     w += mixChildMenuWidth;
   }
 
@@ -74,11 +85,16 @@ function getSiderWidth() {
 }
 
 function getSiderCollapsedWidth() {
+  const { reverseHorizontalMix } = themeStore.layout;
   const { collapsedWidth, mixCollapsedWidth, mixChildMenuWidth } = themeStore.sider;
 
+  if (isHorizontalMix.value && reverseHorizontalMix) {
+    return isActiveFirstLevelMenuHasChildren.value ? collapsedWidth : 0;
+  }
+
   let w = isVerticalMix.value || isHorizontalMix.value ? mixCollapsedWidth : collapsedWidth;
 
-  if (isVerticalMix.value && appStore.mixSiderFixed && menus.value.length) {
+  if (isVerticalMix.value && appStore.mixSiderFixed && childLevelMenus.value.length) {
     w += mixChildMenuWidth;
   }
 
@@ -116,6 +132,7 @@ function getSiderCollapsedWidth() {
     <template #sider>
       <GlobalSider />
     </template>
+    <GlobalMenu />
     <GlobalContent />
     <ThemeDrawer />
     <template #footer>
diff --git a/src/layouts/context/index.ts b/src/layouts/context/index.ts
index 631f675..856d0a4 100644
--- a/src/layouts/context/index.ts
+++ b/src/layouts/context/index.ts
@@ -8,6 +8,7 @@ export const { setupStore: setupMixMenuContext, useStore: useMixMenuContext } =
 function useMixMenu() {
   const route = useRoute();
   const routeStore = useRouteStore();
+  const { selectedKeys } = useMenu();
 
   const activeFirstLevelMenuKey = ref('');
 
@@ -16,20 +17,35 @@ function useMixMenu() {
   }
 
   function getActiveFirstLevelMenuKey() {
-    const { hideInMenu, activeMenu } = route.meta;
-    const name = route.name as string;
-
-    const routeName = (hideInMenu ? activeMenu : name) || name;
-
-    const [firstLevelRouteName] = routeName.split('_');
+    const [firstLevelRouteName] = selectedKeys.value[0].split('_');
 
     setActiveFirstLevelMenuKey(firstLevelRouteName);
   }
 
-  const menus = computed(
+  const allMenus = computed<App.Global.Menu[]>(() => routeStore.menus);
+
+  const firstLevelMenus = computed<App.Global.Menu[]>(() =>
+    routeStore.menus.map(menu => {
+      const { children: _, ...rest } = menu;
+
+      return rest;
+    })
+  );
+
+  const childLevelMenus = computed<App.Global.Menu[]>(
     () => routeStore.menus.find(menu => menu.key === activeFirstLevelMenuKey.value)?.children || []
   );
 
+  const isActiveFirstLevelMenuHasChildren = computed(() => {
+    if (!activeFirstLevelMenuKey.value) {
+      return false;
+    }
+
+    const findItem = allMenus.value.find(item => item.key === activeFirstLevelMenuKey.value);
+
+    return Boolean(findItem?.children?.length);
+  });
+
   watch(
     () => route.name,
     () => {
@@ -39,9 +55,35 @@ function useMixMenu() {
   );
 
   return {
+    allMenus,
+    firstLevelMenus,
+    childLevelMenus,
+    isActiveFirstLevelMenuHasChildren,
     activeFirstLevelMenuKey,
     setActiveFirstLevelMenuKey,
-    getActiveFirstLevelMenuKey,
-    menus
+    getActiveFirstLevelMenuKey
+  };
+}
+
+export function useMenu() {
+  const route = useRoute();
+  const routeStore = useRouteStore();
+
+  const selectedKeys = computed(() => {
+    const { hideInMenu, activeMenu } = route.meta;
+    const name = route.name as string;
+
+    const routeName = (hideInMenu ? activeMenu : name) || name;
+
+    return [routeName];
+  });
+
+  const openKeys = computed(() => {
+    return routeStore.getSelectedMenuKeyPath(selectedKeys.value[0]);
+  });
+
+  return {
+    selectedKeys,
+    openKeys
   };
 }
diff --git a/src/layouts/modules/global-header/index.vue b/src/layouts/modules/global-header/index.vue
index ec71d7c..ffeb980 100644
--- a/src/layouts/modules/global-header/index.vue
+++ b/src/layouts/modules/global-header/index.vue
@@ -1,13 +1,10 @@
 <script setup lang="ts">
-import { computed } from 'vue';
 import { useFullscreen } from '@vueuse/core';
 import { useAppStore } from '@/store/modules/app';
 import { useThemeStore } from '@/store/modules/theme';
-import { useRouteStore } from '@/store/modules/route';
-import HorizontalMenu from '../global-menu/base-menu.vue';
+import { GLOBAL_HEADER_MENU_ID } from '@/constants/app';
 import GlobalLogo from '../global-logo/index.vue';
 import GlobalBreadcrumb from '../global-breadcrumb/index.vue';
-import { useMixMenuContext } from '../../context';
 import ThemeButton from './components/theme-button.vue';
 import UserAvatar from './components/user-avatar.vue';
 
@@ -28,29 +25,15 @@ defineProps<Props>();
 
 const appStore = useAppStore();
 const themeStore = useThemeStore();
-const routeStore = useRouteStore();
 const { isFullscreen, toggle } = useFullscreen();
-const { menus } = useMixMenuContext();
-
-const headerMenus = computed(() => {
-  if (themeStore.layout.mode === 'horizontal') {
-    return routeStore.menus;
-  }
-
-  if (themeStore.layout.mode === 'horizontal-mix') {
-    return menus.value;
-  }
-
-  return [];
-});
 </script>
 
 <template>
   <DarkModeContainer class="h-full flex-y-center px-12px shadow-header">
     <GlobalLogo v-if="showLogo" class="h-full" :style="{ width: themeStore.sider.width + 'px' }" />
-    <HorizontalMenu v-if="showMenu" mode="horizontal" :menus="headerMenus" class="px-12px" />
+    <MenuToggler v-if="showMenuToggler" :collapsed="appStore.siderCollapse" @click="appStore.toggleSiderCollapse" />
+    <div v-if="showMenu" :id="GLOBAL_HEADER_MENU_ID" class="h-full flex-y-center flex-1-hidden"></div>
     <div v-else class="h-full flex-y-center flex-1-hidden">
-      <MenuToggler v-if="showMenuToggler" :collapsed="appStore.siderCollapse" @click="appStore.toggleSiderCollapse" />
       <GlobalBreadcrumb v-if="!appStore.isMobile" class="ml-12px" />
     </div>
     <div class="h-full flex-y-center justify-end">
diff --git a/src/layouts/modules/global-menu/base-menu.vue b/src/layouts/modules/global-menu/base-menu.vue
deleted file mode 100644
index 9040b5f..0000000
--- a/src/layouts/modules/global-menu/base-menu.vue
+++ /dev/null
@@ -1,149 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import { useRoute } from 'vue-router';
-import type { MenuInfo, MenuMode } from 'ant-design-vue/es/menu/src/interface';
-import { SimpleScrollbar } from '@sa/materials';
-import { transformColorWithOpacity } from '@sa/utils';
-import type { RouteKey } from '@elegant-router/types';
-import { useAppStore } from '@/store/modules/app';
-import { useThemeStore } from '@/store/modules/theme';
-import { useRouteStore } from '@/store/modules/route';
-import { useRouterPush } from '@/hooks/common/router';
-
-defineOptions({
-  name: 'BaseMenu'
-});
-
-interface Props {
-  darkTheme?: boolean;
-  mode?: MenuMode;
-  menus: App.Global.Menu[];
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  mode: 'inline'
-});
-
-const route = useRoute();
-const appStore = useAppStore();
-const themeStore = useThemeStore();
-const routeStore = useRouteStore();
-const { routerPushByKey } = useRouterPush();
-
-const menuTheme = computed(() => (props.darkTheme ? 'dark' : 'light'));
-
-const isHorizontal = computed(() => props.mode === 'horizontal');
-
-const siderCollapse = computed(() => themeStore.layout.mode === 'vertical' && appStore.siderCollapse);
-
-const inlineCollapsed = computed(() => (props.mode === 'inline' ? siderCollapse.value : undefined));
-
-const selectedKeys = computed(() => {
-  const { hideInMenu, activeMenu } = route.meta;
-  const name = route.name as string;
-
-  const routeName = (hideInMenu ? activeMenu : name) || name;
-
-  return [routeName];
-});
-
-const openKeys = computed(() => {
-  if (isHorizontal.value || inlineCollapsed.value) return [];
-
-  const [selectedKey] = selectedKeys.value;
-
-  if (!selectedKey) return [];
-
-  return routeStore.getSelectedMenuKeyPath(selectedKey);
-});
-
-const headerHeight = computed(() => `${themeStore.header.height}px`);
-
-const selectedBgColor = computed(() => {
-  const { darkMode, themeColor } = themeStore;
-
-  const light = transformColorWithOpacity(themeColor, 0.1, '#ffffff');
-  const dark = transformColorWithOpacity(themeColor, 0.3, '#000000');
-
-  return darkMode ? dark : light;
-});
-
-function handleClickMenu(menuInfo: MenuInfo) {
-  const key = menuInfo.key as RouteKey;
-
-  const query = routeStore.getRouteQueryOfMetaByKey(key);
-
-  routerPushByKey(key, { query });
-}
-</script>
-
-<template>
-  <SimpleScrollbar class="menu-wrapper" :class="{ 'select-menu': !darkTheme }">
-    <AMenu
-      :mode="mode"
-      :theme="menuTheme"
-      :items="menus"
-      :selected-keys="selectedKeys"
-      :open-keys="openKeys"
-      :inline-collapsed="inlineCollapsed"
-      :inline-indent="18"
-      class="size-full transition-300 border-0!"
-      :class="{ 'bg-container!': !darkTheme, 'horizontal-menu': isHorizontal }"
-      @click="handleClickMenu"
-    />
-  </SimpleScrollbar>
-</template>
-
-<style lang="scss" scoped>
-.menu-wrapper {
-  :deep(.ant-menu-inline) {
-    .ant-menu-item {
-      width: calc(100% - 16px);
-      margin-inline: 8px;
-    }
-  }
-
-  :deep(.ant-menu-submenu-title) {
-    width: calc(100% - 16px);
-    margin-inline: 8px;
-  }
-
-  :deep(.ant-menu-inline-collapsed) {
-    > .ant-menu-item {
-      padding-inline: calc(50% - 14px);
-    }
-
-    .ant-menu-item-icon {
-      vertical-align: -0.25em;
-    }
-
-    .ant-menu-submenu-title {
-      padding-inline: calc(50% - 18px);
-    }
-  }
-
-  :deep(.ant-menu-horizontal) {
-    .ant-menu-item {
-      display: flex;
-      align-items: center;
-    }
-
-    .ant-menu-submenu-title {
-      display: flex;
-      align-items: center;
-    }
-  }
-}
-
-.select-menu {
-  :deep(.ant-menu-inline) {
-    .ant-menu-item-selected {
-      background-color: v-bind(selectedBgColor);
-    }
-  }
-}
-
-.horizontal-menu {
-  line-height: v-bind(headerHeight);
-}
-</style>
diff --git a/src/layouts/modules/global-menu/first-level-menu.vue b/src/layouts/modules/global-menu/components/first-level-menu.vue
similarity index 79%
rename from src/layouts/modules/global-menu/first-level-menu.vue
rename to src/layouts/modules/global-menu/components/first-level-menu.vue
index 298bf00..b9c895a 100644
--- a/src/layouts/modules/global-menu/first-level-menu.vue
+++ b/src/layouts/modules/global-menu/components/first-level-menu.vue
@@ -2,31 +2,29 @@
 import { computed } from 'vue';
 import { createReusableTemplate } from '@vueuse/core';
 import { SimpleScrollbar } from '@sa/materials';
-import { transformColorWithOpacity } from '@sa/utils';
-import { useAppStore } from '@/store/modules/app';
-import { useRouteStore } from '@/store/modules/route';
-import { useThemeStore } from '@/store/modules/theme';
+import { transformColorWithOpacity } from '@sa/color';
 
 defineOptions({
   name: 'FirstLevelMenu'
 });
 
 interface Props {
+  menus: App.Global.Menu[];
   activeMenuKey?: string;
   inverted?: boolean;
+  siderCollapse?: boolean;
+  darkMode?: boolean;
+  themeColor: string;
 }
 
-defineProps<Props>();
-
-const emit = defineEmits<Emits>();
+const props = defineProps<Props>();
 
 interface Emits {
   (e: 'select', menu: App.Global.Menu): boolean;
+  (e: 'toggleSiderCollapse'): void;
 }
 
-const appStore = useAppStore();
-const themeStore = useThemeStore();
-const routeStore = useRouteStore();
+const emit = defineEmits<Emits>();
 
 interface MixMenuItemProps {
   /** Menu item label */
@@ -36,12 +34,12 @@ interface MixMenuItemProps {
   /** Active menu item */
   active: boolean;
   /** Mini size */
-  isMini: boolean;
+  isMini?: boolean;
 }
 const [DefineMixMenuItem, MixMenuItem] = createReusableTemplate<MixMenuItemProps>();
 
 const selectedBgColor = computed(() => {
-  const { darkMode, themeColor } = themeStore;
+  const { darkMode, themeColor } = props;
 
   const light = transformColorWithOpacity(themeColor, 0.1, '#ffffff');
   const dark = transformColorWithOpacity(themeColor, 0.3, '#000000');
@@ -52,6 +50,10 @@ const selectedBgColor = computed(() => {
 function handleClickMixMenu(menu: App.Global.Menu) {
   emit('select', menu);
 }
+
+function toggleSiderCollapse() {
+  emit('toggleSiderCollapse');
+}
 </script>
 
 <template>
@@ -74,26 +76,27 @@ function handleClickMixMenu(menu: App.Global.Menu) {
       </p>
     </div>
   </DefineMixMenuItem>
+  <!-- define component end: MixMenuItem -->
 
-  <!-- template -->
   <div class="h-full flex-col-stretch flex-1-hidden">
     <slot></slot>
     <SimpleScrollbar>
       <MixMenuItem
-        v-for="menu in routeStore.menus"
+        v-for="menu in menus"
         :key="menu.key"
         :label="menu.label"
         :icon="menu.icon"
         :active="menu.key === activeMenuKey"
-        :is-mini="appStore.siderCollapse"
+        :is-mini="siderCollapse"
         @click="handleClickMixMenu(menu)"
       />
     </SimpleScrollbar>
     <MenuToggler
       arrow-icon
-      :collapsed="appStore.siderCollapse"
+      :collapsed="siderCollapse"
+      :z-index="99"
       :class="{ 'text-white:88 !hover:text-white': inverted }"
-      @click="appStore.toggleSiderCollapse"
+      @click="toggleSiderCollapse"
     />
   </div>
 </template>
diff --git a/src/layouts/modules/global-menu/horizontal-mix-menu.vue b/src/layouts/modules/global-menu/horizontal-mix-menu.vue
deleted file mode 100644
index 1a57b2d..0000000
--- a/src/layouts/modules/global-menu/horizontal-mix-menu.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import { useRouterPush } from '@/hooks/common/router';
-import { useMixMenuContext } from '../../context';
-import FirstLevelMenu from './first-level-menu.vue';
-
-defineOptions({
-  name: 'HorizontalMixMenu'
-});
-
-const { activeFirstLevelMenuKey, setActiveFirstLevelMenuKey } = useMixMenuContext();
-const { routerPushByKey } = useRouterPush();
-
-function handleSelectMixMenu(menu: App.Global.Menu) {
-  setActiveFirstLevelMenuKey(menu.key);
-
-  if (!menu.children?.length) {
-    routerPushByKey(menu.routeKey);
-  }
-}
-</script>
-
-<template>
-  <FirstLevelMenu :active-menu-key="activeFirstLevelMenuKey" @select="handleSelectMixMenu">
-    <slot></slot>
-  </FirstLevelMenu>
-</template>
-
-<style scoped></style>
diff --git a/src/layouts/modules/global-menu/index.vue b/src/layouts/modules/global-menu/index.vue
new file mode 100644
index 0000000..3366a40
--- /dev/null
+++ b/src/layouts/modules/global-menu/index.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { Component } from 'vue';
+import { useAppStore } from '@/store/modules/app';
+import { useThemeStore } from '@/store/modules/theme';
+import VerticalMenu from './modules/vertical-menu.vue';
+import VerticalMixMenu from './modules/vertical-mix-menu.vue';
+import HorizontalMenu from './modules/horizontal-menu.vue';
+import HorizontalMixMenu from './modules/horizontal-mix-menu.vue';
+import ReversedHorizontalMixMenu from './modules/reversed-horizontal-mix-menu.vue';
+
+defineOptions({
+  name: 'GlobalMenu'
+});
+
+const appStore = useAppStore();
+const themeStore = useThemeStore();
+
+const activeMenu = computed(() => {
+  const menuMap: Record<UnionKey.ThemeLayoutMode, Component> = {
+    vertical: VerticalMenu,
+    'vertical-mix': VerticalMixMenu,
+    horizontal: HorizontalMenu,
+    'horizontal-mix': themeStore.layout.reverseHorizontalMix ? ReversedHorizontalMixMenu : HorizontalMixMenu
+  };
+
+  return menuMap[themeStore.layout.mode];
+});
+
+const reRenderVertical = computed(() => themeStore.layout.mode === 'vertical' && appStore.isMobile);
+</script>
+
+<template>
+  <component :is="activeMenu" :key="reRenderVertical" />
+</template>
diff --git a/src/layouts/modules/global-menu/modules/horizontal-menu.vue b/src/layouts/modules/global-menu/modules/horizontal-menu.vue
new file mode 100644
index 0000000..2a41fd9
--- /dev/null
+++ b/src/layouts/modules/global-menu/modules/horizontal-menu.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import type { RouteKey } from '@elegant-router/types';
+import { GLOBAL_HEADER_MENU_ID } from '@/constants/app';
+import { useRouterPush } from '@/hooks/common/router';
+import { useRouteStore } from '@/store/modules/route';
+import { useMenu } from '../../../context';
+
+defineOptions({
+  name: 'HorizontalMenu'
+});
+
+const { selectedKeys } = useMenu();
+
+const routeStore = useRouteStore();
+
+const { routerPushByKeyWithMetaQuery } = useRouterPush();
+
+function handleClickMenu(menuInfo: MenuInfo) {
+  const key = menuInfo.key as RouteKey;
+
+  routerPushByKeyWithMetaQuery(key);
+}
+</script>
+
+<template>
+  <Teleport :to="`#${GLOBAL_HEADER_MENU_ID}`">
+    <AMenu
+      mode="horizontal"
+      :selected-keys="selectedKeys"
+      :items="routeStore.menus"
+      :inline-indent="18"
+      class="horizontal-menu size-full transition-300 border-0!"
+      @click="handleClickMenu"
+    />
+  </Teleport>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/src/layouts/modules/global-menu/modules/horizontal-mix-menu.vue b/src/layouts/modules/global-menu/modules/horizontal-mix-menu.vue
new file mode 100644
index 0000000..e549d8f
--- /dev/null
+++ b/src/layouts/modules/global-menu/modules/horizontal-mix-menu.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import type { RouteKey } from '@elegant-router/types';
+import { GLOBAL_HEADER_MENU_ID, GLOBAL_SIDER_MENU_ID } from '@/constants/app';
+import { useAppStore } from '@/store/modules/app';
+import { useThemeStore } from '@/store/modules/theme';
+import { useRouterPush } from '@/hooks/common/router';
+import FirstLevelMenu from '../components/first-level-menu.vue';
+import { useMenu, useMixMenuContext } from '../../../context';
+
+defineOptions({
+  name: 'HorizontalMixMenu'
+});
+
+const appStore = useAppStore();
+
+const themeStore = useThemeStore();
+
+const { allMenus, childLevelMenus, activeFirstLevelMenuKey, setActiveFirstLevelMenuKey } = useMixMenuContext();
+
+const { selectedKeys } = useMenu();
+
+const { routerPushByKeyWithMetaQuery } = useRouterPush();
+
+function handleClickMenu(menuInfo: MenuInfo) {
+  const key = menuInfo.key as RouteKey;
+
+  routerPushByKeyWithMetaQuery(key);
+}
+
+function handleSelectMixMenu(menu: App.Global.Menu) {
+  setActiveFirstLevelMenuKey(menu.key);
+
+  if (!menu.children?.length) {
+    routerPushByKeyWithMetaQuery(menu.routeKey);
+  }
+}
+</script>
+
+<template>
+  <Teleport :to="`#${GLOBAL_HEADER_MENU_ID}`">
+    <AMenu
+      mode="horizontal"
+      :selected-keys="selectedKeys"
+      :items="childLevelMenus"
+      :inline-indent="18"
+      class="horizontal-menu size-full transition-300 border-0!"
+      @click="handleClickMenu"
+    />
+  </Teleport>
+  <Teleport :to="`#${GLOBAL_SIDER_MENU_ID}`">
+    <FirstLevelMenu
+      :menus="allMenus"
+      :active-menu-key="activeFirstLevelMenuKey"
+      :sider-collapse="appStore.siderCollapse"
+      :dark-mode="themeStore.darkMode"
+      :theme-color="themeStore.themeColor"
+      @select="handleSelectMixMenu"
+      @toggle-sider-collapse="appStore.toggleSiderCollapse"
+    />
+  </Teleport>
+</template>
+
+<style scoped></style>
diff --git a/src/layouts/modules/global-menu/modules/reversed-horizontal-mix-menu.vue b/src/layouts/modules/global-menu/modules/reversed-horizontal-mix-menu.vue
new file mode 100644
index 0000000..bf81940
--- /dev/null
+++ b/src/layouts/modules/global-menu/modules/reversed-horizontal-mix-menu.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { RouteKey } from '@elegant-router/types';
+import type { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import { SimpleScrollbar } from '@sa/materials';
+import { GLOBAL_HEADER_MENU_ID, GLOBAL_SIDER_MENU_ID } from '@/constants/app';
+import { useAppStore } from '@/store/modules/app';
+import { useRouterPush } from '@/hooks/common/router';
+import { useMenu, useMixMenuContext } from '../../../context';
+
+defineOptions({
+  name: 'ReversedHorizontalMixMenu'
+});
+
+const appStore = useAppStore();
+
+const { firstLevelMenus, childLevelMenus, setActiveFirstLevelMenuKey, isActiveFirstLevelMenuHasChildren } =
+  useMixMenuContext();
+
+const { selectedKeys, openKeys } = useMenu();
+
+const { routerPushByKeyWithMetaQuery } = useRouterPush();
+
+function handleSelectMixMenu(menuInfo: MenuInfo) {
+  const key = menuInfo.key as RouteKey;
+
+  setActiveFirstLevelMenuKey(key);
+
+  if (!isActiveFirstLevelMenuHasChildren.value) {
+    routerPushByKeyWithMetaQuery(key);
+  }
+}
+
+function handleClickMenu(menuInfo: MenuInfo) {
+  const key = menuInfo.key as RouteKey;
+
+  routerPushByKeyWithMetaQuery(key);
+}
+</script>
+
+<template>
+  <Teleport :to="`#${GLOBAL_HEADER_MENU_ID}`">
+    <AMenu
+      mode="horizontal"
+      :selected-keys="selectedKeys"
+      :items="firstLevelMenus"
+      :inline-indent="18"
+      class="horizontal-menu size-full transition-300 border-0!"
+      @click="handleSelectMixMenu"
+    />
+  </Teleport>
+  <Teleport :to="`#${GLOBAL_SIDER_MENU_ID}`">
+    <SimpleScrollbar>
+      <AMenu
+        mode="inline"
+        :items="childLevelMenus"
+        :inline-collapsed="appStore.siderCollapse"
+        :selected-keys="selectedKeys"
+        :inline-indent="18"
+        :open-keys="openKeys"
+        class="size-full bg-container transition-300 border-0!"
+        @click="handleClickMenu"
+      />
+    </SimpleScrollbar>
+  </Teleport>
+</template>
+
+<style scoped></style>
diff --git a/src/layouts/modules/global-menu/modules/vertical-menu.vue b/src/layouts/modules/global-menu/modules/vertical-menu.vue
new file mode 100644
index 0000000..fab4376
--- /dev/null
+++ b/src/layouts/modules/global-menu/modules/vertical-menu.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { SimpleScrollbar } from '@sa/materials';
+import type { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import type { RouteKey } from '@elegant-router/types';
+import { useAppStore } from '@/store/modules/app';
+import { useRouterPush } from '@/hooks/common/router';
+import { GLOBAL_SIDER_MENU_ID } from '@/constants/app';
+import { useRouteStore } from '@/store/modules/route';
+import { useMenu } from '../../../context';
+
+defineOptions({
+  name: 'VerticalMenu'
+});
+
+const appStore = useAppStore();
+
+const { routerPushByKeyWithMetaQuery } = useRouterPush();
+
+const routeStore = useRouteStore();
+
+const { selectedKeys, openKeys } = useMenu();
+
+function handleClickMenu(menuInfo: MenuInfo) {
+  const key = menuInfo.key as RouteKey;
+
+  routerPushByKeyWithMetaQuery(key);
+}
+</script>
+
+<template>
+  <Teleport :to="`#${GLOBAL_SIDER_MENU_ID}`">
+    <SimpleScrollbar>
+      <AMenu
+        mode="inline"
+        :items="routeStore.menus"
+        :inline-collapsed="appStore.siderCollapse"
+        :selected-keys="selectedKeys"
+        :inline-indent="18"
+        :open-keys="openKeys"
+        class="size-full bg-container transition-300 border-0!"
+        @click="handleClickMenu"
+      />
+    </SimpleScrollbar>
+  </Teleport>
+</template>
+
+<style scoped></style>
diff --git a/src/layouts/modules/global-menu/modules/vertical-mix-menu.vue b/src/layouts/modules/global-menu/modules/vertical-mix-menu.vue
new file mode 100644
index 0000000..2899221
--- /dev/null
+++ b/src/layouts/modules/global-menu/modules/vertical-mix-menu.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { SimpleScrollbar } from '@sa/materials';
+import { useBoolean } from '@sa/hooks';
+import type { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import type { RouteKey } from '@elegant-router/types';
+import { useAppStore } from '@/store/modules/app';
+import { useThemeStore } from '@/store/modules/theme';
+import { useRouterPush } from '@/hooks/common/router';
+import { $t } from '@/locales';
+import { GLOBAL_SIDER_MENU_ID } from '@/constants/app';
+import { useMenu, useMixMenuContext } from '../../../context';
+import FirstLevelMenu from '../components/first-level-menu.vue';
+import GlobalLogo from '../../global-logo/index.vue';
+
+defineOptions({
+  name: 'VerticalMenuMix'
+});
+
+const appStore = useAppStore();
+const themeStore = useThemeStore();
+
+const { routerPushByKeyWithMetaQuery } = useRouterPush();
+const { bool: drawerVisible, setBool: setDrawerVisible } = useBoolean();
+const {
+  allMenus,
+  childLevelMenus,
+  activeFirstLevelMenuKey,
+  setActiveFirstLevelMenuKey,
+  getActiveFirstLevelMenuKey
+  //
+} = useMixMenuContext();
+const { selectedKeys, openKeys } = useMenu();
+
+const inverted = computed(() => !themeStore.darkMode && themeStore.sider.inverted);
+
+const hasChildMenus = computed(() => childLevelMenus.value.length > 0);
+
+const showDrawer = computed(() => hasChildMenus.value && (drawerVisible.value || appStore.mixSiderFixed));
+
+function handleSelectMixMenu(menu: App.Global.Menu) {
+  setActiveFirstLevelMenuKey(menu.key);
+
+  if (menu.children?.length) {
+    setDrawerVisible(true);
+  } else {
+    routerPushByKeyWithMetaQuery(menu.routeKey);
+  }
+}
+
+function handleResetActiveMenu() {
+  setDrawerVisible(false);
+
+  if (!appStore.mixSiderFixed) {
+    getActiveFirstLevelMenuKey();
+  }
+}
+
+function handleClickMenu(menuInfo: MenuInfo) {
+  const key = menuInfo.key as RouteKey;
+
+  routerPushByKeyWithMetaQuery(key);
+}
+</script>
+
+<template>
+  <Teleport :to="`#${GLOBAL_SIDER_MENU_ID}`">
+    <div class="h-full flex" @mouseleave="handleResetActiveMenu">
+      <FirstLevelMenu
+        :menus="allMenus"
+        :active-menu-key="activeFirstLevelMenuKey"
+        :inverted="inverted"
+        :sider-collapse="appStore.siderCollapse"
+        :dark-mode="themeStore.darkMode"
+        :theme-color="themeStore.themeColor"
+        @select="handleSelectMixMenu"
+        @toggle-sider-collapse="appStore.toggleSiderCollapse"
+      >
+        <GlobalLogo :show-title="false" :style="{ height: themeStore.header.height + 'px' }" />
+      </FirstLevelMenu>
+      <div
+        class="relative h-full transition-width-300"
+        :style="{ width: appStore.mixSiderFixed && hasChildMenus ? themeStore.sider.mixChildMenuWidth + 'px' : '0px' }"
+      >
+        <DarkModeContainer
+          class="absolute-lt h-full flex-col-stretch nowrap-hidden shadow-sm transition-all-300"
+          :inverted="inverted"
+          :style="{ width: showDrawer ? themeStore.sider.mixChildMenuWidth + 'px' : '0px' }"
+        >
+          <header class="flex-y-center justify-between px-12px" :style="{ height: themeStore.header.height + 'px' }">
+            <h2 class="text-16px text-primary font-bold">{{ $t('system.title') }}</h2>
+            <PinToggler
+              :pin="appStore.mixSiderFixed"
+              :class="{ 'text-white:88 !hover:text-white': inverted }"
+              @click="appStore.toggleMixSiderFixed"
+            />
+          </header>
+          <SimpleScrollbar>
+            <AMenu
+              mode="inline"
+              :items="childLevelMenus"
+              :selected-keys="selectedKeys"
+              :inline-indent="18"
+              :open-keys="openKeys"
+              class="size-full bg-container transition-300 border-0!"
+              @click="handleClickMenu"
+            />
+          </SimpleScrollbar>
+        </DarkModeContainer>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped></style>
diff --git a/src/layouts/modules/global-menu/vertical-mix-menu.vue b/src/layouts/modules/global-menu/vertical-mix-menu.vue
deleted file mode 100644
index eeec4e9..0000000
--- a/src/layouts/modules/global-menu/vertical-mix-menu.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import { useBoolean } from '@sa/hooks';
-import { $t } from '@/locales';
-import { useAppStore } from '@/store/modules/app';
-import { useThemeStore } from '@/store/modules/theme';
-import { useRouterPush } from '@/hooks/common/router';
-import { useMixMenuContext } from '../../context';
-import FirstLevelMenu from './first-level-menu.vue';
-import BaseMenu from './base-menu.vue';
-
-defineOptions({
-  name: 'VerticalMixMenu'
-});
-
-const appStore = useAppStore();
-const themeStore = useThemeStore();
-const { routerPushByKey } = useRouterPush();
-const { bool: drawerVisible, setBool: setDrawerVisible } = useBoolean();
-const { menus, activeFirstLevelMenuKey, setActiveFirstLevelMenuKey, getActiveFirstLevelMenuKey } = useMixMenuContext();
-
-const siderInverted = computed(() => !themeStore.darkMode && themeStore.sider.inverted);
-
-const hasMenus = computed(() => menus.value.length > 0);
-
-const showDrawer = computed(() => hasMenus.value && (drawerVisible.value || appStore.mixSiderFixed));
-
-function handleSelectMixMenu(menu: App.Global.Menu) {
-  setActiveFirstLevelMenuKey(menu.key);
-
-  if (menu.children?.length) {
-    setDrawerVisible(true);
-  } else {
-    routerPushByKey(menu.routeKey);
-  }
-}
-
-function handleResetActiveMenu() {
-  getActiveFirstLevelMenuKey();
-  setDrawerVisible(false);
-}
-</script>
-
-<template>
-  <div class="h-full flex" @mouseleave="handleResetActiveMenu">
-    <FirstLevelMenu :active-menu-key="activeFirstLevelMenuKey" :inverted="siderInverted" @select="handleSelectMixMenu">
-      <slot></slot>
-    </FirstLevelMenu>
-    <div
-      class="relative h-full transition-width-300"
-      :style="{ width: appStore.mixSiderFixed && hasMenus ? themeStore.sider.mixChildMenuWidth + 'px' : '0px' }"
-    >
-      <DarkModeContainer
-        class="absolute-lt h-full flex-col-stretch nowrap-hidden shadow-sm transition-all-300"
-        :inverted="siderInverted"
-        :style="{ width: showDrawer ? themeStore.sider.mixChildMenuWidth + 'px' : '0px' }"
-      >
-        <header class="flex-y-center justify-between px-12px" :style="{ height: themeStore.header.height + 'px' }">
-          <h2 class="text-16px text-primary font-bold">{{ $t('system.title') }}</h2>
-          <PinToggler
-            :pin="appStore.mixSiderFixed"
-            :class="{ 'text-white:88 !hover:text-white': siderInverted }"
-            @click="appStore.toggleMixSiderFixed"
-          />
-        </header>
-        <BaseMenu :dark-theme="siderInverted" :menus="menus" />
-      </DarkModeContainer>
-    </div>
-  </div>
-</template>
-
-<style scoped></style>
diff --git a/src/layouts/modules/global-sider/index.vue b/src/layouts/modules/global-sider/index.vue
index d843a76..2a5b8fe 100644
--- a/src/layouts/modules/global-sider/index.vue
+++ b/src/layouts/modules/global-sider/index.vue
@@ -2,11 +2,8 @@
 import { computed } from 'vue';
 import { useAppStore } from '@/store/modules/app';
 import { useThemeStore } from '@/store/modules/theme';
-import { useRouteStore } from '@/store/modules/route';
+import { GLOBAL_SIDER_MENU_ID } from '@/constants/app';
 import GlobalLogo from '../global-logo/index.vue';
-import VerticalMenu from '../global-menu/base-menu.vue';
-import VerticalMixMenu from '../global-menu/vertical-mix-menu.vue';
-import HorizontalMixMenu from '../global-menu/horizontal-mix-menu.vue';
 
 defineOptions({
   name: 'GlobalSider'
@@ -14,12 +11,12 @@ defineOptions({
 
 const appStore = useAppStore();
 const themeStore = useThemeStore();
-const routeStore = useRouteStore();
 
 const isVerticalMix = computed(() => themeStore.layout.mode === 'vertical-mix');
 const isHorizontalMix = computed(() => themeStore.layout.mode === 'horizontal-mix');
 const darkMenu = computed(() => !themeStore.darkMode && !isHorizontalMix.value && themeStore.sider.inverted);
 const showLogo = computed(() => !isVerticalMix.value && !isHorizontalMix.value);
+const menuWrapperClass = computed(() => (showLogo.value ? 'flex-1-hidden' : 'h-full'));
 </script>
 
 <template>
@@ -29,11 +26,7 @@ const showLogo = computed(() => !isVerticalMix.value && !isHorizontalMix.value);
       :show-title="!appStore.siderCollapse"
       :style="{ height: themeStore.header.height + 'px' }"
     />
-    <VerticalMixMenu v-if="isVerticalMix">
-      <GlobalLogo :show-title="false" :style="{ height: themeStore.header.height + 'px' }" />
-    </VerticalMixMenu>
-    <HorizontalMixMenu v-else-if="isHorizontalMix" />
-    <VerticalMenu v-else :dark-theme="darkMenu" :menus="routeStore.menus" />
+    <div :id="GLOBAL_SIDER_MENU_ID" :class="menuWrapperClass"></div>
   </DarkModeContainer>
 </template>
 
diff --git a/src/layouts/modules/theme-drawer/modules/layout-mode.vue b/src/layouts/modules/theme-drawer/modules/layout-mode.vue
index 53379a9..afc7a74 100644
--- a/src/layouts/modules/theme-drawer/modules/layout-mode.vue
+++ b/src/layouts/modules/theme-drawer/modules/layout-mode.vue
@@ -3,6 +3,7 @@ import { useAppStore } from '@/store/modules/app';
 import { useThemeStore } from '@/store/modules/theme';
 import { $t } from '@/locales';
 import LayoutModeCard from '../components/layout-mode-card.vue';
+import SettingItem from '../components/setting-item.vue';
 
 defineOptions({
   name: 'LayoutMode'
@@ -44,6 +45,13 @@ const themeStore = useThemeStore();
       </div>
     </template>
   </LayoutModeCard>
+  <SettingItem
+    v-if="themeStore.layout.mode === 'horizontal-mix'"
+    :label="$t('theme.layoutMode.reverseHorizontalMix')"
+    class="mt-16px"
+  >
+    <ASwitch v-model:checked="themeStore.layout.reverseHorizontalMix" />
+  </SettingItem>
 </template>
 
 <style scoped>
diff --git a/src/locales/langs/en-us.ts b/src/locales/langs/en-us.ts
index 747323a..6b552e8 100644
--- a/src/locales/langs/en-us.ts
+++ b/src/locales/langs/en-us.ts
@@ -68,7 +68,8 @@ const local: App.I18n.Schema = {
       vertical: 'Vertical Menu Mode',
       horizontal: 'Horizontal Menu Mode',
       'vertical-mix': 'Vertical Mix Menu Mode',
-      'horizontal-mix': 'Horizontal Mix menu Mode'
+      'horizontal-mix': 'Horizontal Mix menu Mode',
+      reverseHorizontalMix: 'Reverse first level menus and child level menus position'
     },
     recommendColor: 'Apply Recommended Color Algorithm',
     recommendColorDesc: 'The recommended color algorithm refers to',
diff --git a/src/locales/langs/zh-cn.ts b/src/locales/langs/zh-cn.ts
index 98bbc7f..e38cbc7 100644
--- a/src/locales/langs/zh-cn.ts
+++ b/src/locales/langs/zh-cn.ts
@@ -68,7 +68,8 @@ const local: App.I18n.Schema = {
       vertical: '左侧菜单模式',
       'vertical-mix': '左侧菜单混合模式',
       horizontal: '顶部菜单模式',
-      'horizontal-mix': '顶部菜单混合模式'
+      'horizontal-mix': '顶部菜单混合模式',
+      reverseHorizontalMix: '一级菜单与子级菜单位置反转'
     },
     recommendColor: '应用推荐算法的颜色',
     recommendColorDesc: '推荐颜色的算法参照',
diff --git a/src/theme/settings.ts b/src/theme/settings.ts
index 42e94fc..a5ad31c 100644
--- a/src/theme/settings.ts
+++ b/src/theme/settings.ts
@@ -13,7 +13,8 @@ export const themeSettings: App.Theme.ThemeSetting = {
   isInfoFollowPrimary: true,
   layout: {
     mode: 'vertical',
-    scrollMode: 'content'
+    scrollMode: 'content',
+    reverseHorizontalMix: false
   },
   page: {
     animate: true,
diff --git a/src/typings/app.d.ts b/src/typings/app.d.ts
index a35b206..74ccef4 100644
--- a/src/typings/app.d.ts
+++ b/src/typings/app.d.ts
@@ -34,6 +34,12 @@ declare namespace App {
         mode: UnionKey.ThemeLayoutMode;
         /** Scroll mode */
         scrollMode: UnionKey.ThemeScrollMode;
+        /**
+         * Whether to reverse the horizontal mix
+         *
+         * if true, the vertical child level menus in left and horizontal first level menus in top
+         */
+        reverseHorizontalMix?: boolean;
       };
       /** Page */
       page: {
@@ -306,7 +312,7 @@ declare namespace App {
       theme: {
         themeSchema: { title: string } & Record<UnionKey.ThemeScheme, string>;
         grayscale: string;
-        layoutMode: { title: string } & Record<UnionKey.ThemeLayoutMode, string>;
+        layoutMode: { title: string; reverseHorizontalMix: string } & Record<UnionKey.ThemeLayoutMode, string>;
         recommendColor: string;
         recommendColorDesc: string;
         themeColor: {