From 2244f0c798444d5a83bfa2d82276799bb70339d9 Mon Sep 17 00:00:00 2001
From: Soybean <soybeanjs@outlook.com>
Date: Sun, 8 Sep 2024 17:34:14 +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             |  68 ++++----
 src/layouts/context/index.ts                  |  54 +++++--
 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.scss    |  49 ++++++
 src/layouts/modules/global-menu/index.vue     |  53 +++++++
 .../global-menu/modules/horizontal-menu.vue   |  40 +++++
 .../modules/horizontal-mix-menu.vue           |  67 ++++++++
 .../modules/reversed-horizontal-mix-menu.vue  |  84 ++++++++++
 .../global-menu/modules/vertical-menu.vue     |  61 +++++++
 .../global-menu/modules/vertical-mix-menu.vue | 127 +++++++++++++++
 .../modules/global-menu/vertical-mix-menu.vue |  72 ---------
 src/layouts/modules/global-sider/index.vue    |  13 +-
 .../theme-drawer/modules/layout-mode.vue      |  14 ++
 src/locales/langs/en-us.ts                    |   3 +-
 src/locales/langs/zh-cn.ts                    |   3 +-
 src/router/elegant/transform.ts               |  20 +--
 src/store/modules/route/index.ts              |  31 +---
 src/store/modules/theme/index.ts              |  12 +-
 src/theme/settings.ts                         |   3 +-
 src/typings/app.d.ts                          |  12 +-
 src/typings/elegant-router.d.ts               |   4 +-
 src/typings/union-key.d.ts                    |   2 +-
 27 files changed, 667 insertions(+), 384 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.scss
 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 89374b7..f95a25a 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');
   }
@@ -95,6 +108,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..7d00da2 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;
   }
 
@@ -78,7 +89,7 @@ function getSiderCollapsedWidth() {
 
   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 +127,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..8b54264 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 { selectedKey } = 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] = selectedKey.value.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,29 @@ function useMixMenu() {
   );
 
   return {
+    allMenus,
+    firstLevelMenus,
+    childLevelMenus,
+    isActiveFirstLevelMenuHasChildren,
     activeFirstLevelMenuKey,
     setActiveFirstLevelMenuKey,
-    getActiveFirstLevelMenuKey,
-    menus
+    getActiveFirstLevelMenuKey
+  };
+}
+
+export function useMenu() {
+  const route = useRoute();
+
+  const selectedKey = computed(() => {
+    const { hideInMenu, activeMenu } = route.meta;
+    const name = route.name as string;
+
+    const routeName = (hideInMenu ? activeMenu : name) || name;
+
+    return routeName;
+  });
+
+  return {
+    selectedKey
   };
 }
diff --git a/src/layouts/modules/global-header/index.vue b/src/layouts/modules/global-header/index.vue
index ec71d7c..67e22ba 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 pb-1px"></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.scss b/src/layouts/modules/global-menu/index.scss
new file mode 100644
index 0000000..ed3a313
--- /dev/null
+++ b/src/layouts/modules/global-menu/index.scss
@@ -0,0 +1,49 @@
+.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);
+    }
+  }
+}
+
+.select-menu {
+  :deep(.ant-menu-inline) {
+    .ant-menu-item-selected {
+      background-color: var(--selected-bg-color);
+    }
+  }
+}
+
+.horizontal-menu {
+  :deep(.ant-menu-horizontal) {
+    .ant-menu-item {
+      display: flex;
+      align-items: center;
+    }
+
+    .ant-menu-submenu-title {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
diff --git a/src/layouts/modules/global-menu/index.vue b/src/layouts/modules/global-menu/index.vue
new file mode 100644
index 0000000..00d3a32
--- /dev/null
+++ b/src/layouts/modules/global-menu/index.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { Component } from 'vue';
+import { transformColorWithOpacity } from '@sa/utils';
+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);
+
+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;
+});
+</script>
+
+<template>
+  <component :is="activeMenu" :key="reRenderVertical" />
+</template>
+
+<style>
+@import './index.scss';
+
+.select-menu {
+  --selected-bg-color: v-bind(selectedBgColor);
+}
+</style>
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..362c353
--- /dev/null
+++ b/src/layouts/modules/global-menu/modules/horizontal-menu.vue
@@ -0,0 +1,40 @@
+<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 { useThemeStore } from '@/store/modules/theme';
+import { useRouteStore } from '@/store/modules/route';
+import { useRouterPush } from '@/hooks/common/router';
+import { useMenu } from '../../../context';
+
+defineOptions({
+  name: 'HorizontalMenu'
+});
+
+const themeStore = useThemeStore();
+const routeStore = useRouteStore();
+const { routerPushByKeyWithMetaQuery } = useRouterPush();
+const { selectedKey } = useMenu();
+
+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="[selectedKey]"
+      :items="routeStore.menus"
+      class="horizontal-menu size-full transition-300 border-0!"
+      :class="{ 'bg-container!': themeStore.darkMode }"
+      :style="{ lineHeight: themeStore.header.height + 'px' }"
+      @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..2c35f39
--- /dev/null
+++ b/src/layouts/modules/global-menu/modules/horizontal-mix-menu.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+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 { routerPushByKeyWithMetaQuery } = useRouterPush();
+const { allMenus, childLevelMenus, activeFirstLevelMenuKey, setActiveFirstLevelMenuKey } = useMixMenuContext();
+const { selectedKey } = useMenu();
+
+const inverted = computed(() => !themeStore.darkMode && themeStore.sider.inverted);
+
+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="[selectedKey]"
+      :items="childLevelMenus"
+      class="horizontal-menu size-full transition-300 border-0!"
+      :class="{ 'bg-container!': themeStore.darkMode }"
+      :style="{ lineHeight: themeStore.header.height + 'px' }"
+      @click="handleClickMenu"
+    />
+  </Teleport>
+  <Teleport :to="`#${GLOBAL_SIDER_MENU_ID}`">
+    <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"
+    >
+      <slot></slot>
+    </FirstLevelMenu>
+  </Teleport>
+</template>
+
+<style lang="scss" 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..465bd36
--- /dev/null
+++ b/src/layouts/modules/global-menu/modules/reversed-horizontal-mix-menu.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import type { RouteKey } from '@elegant-router/types';
+import { SimpleScrollbar } from '@sa/materials';
+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 { useRouteStore } from '@/store/modules/route';
+import { useRouterPush } from '@/hooks/common/router';
+import { useMenu, useMixMenuContext } from '../../../context';
+
+defineOptions({
+  name: 'ReversedHorizontalMixMenu'
+});
+
+const appStore = useAppStore();
+const themeStore = useThemeStore();
+const routeStore = useRouteStore();
+const { routerPushByKeyWithMetaQuery } = useRouterPush();
+const {
+  firstLevelMenus,
+  childLevelMenus,
+  activeFirstLevelMenuKey,
+  setActiveFirstLevelMenuKey,
+  isActiveFirstLevelMenuHasChildren
+} = useMixMenuContext();
+const { selectedKey } = useMenu();
+
+function handleSelectMixMenu(menuInfo: MenuInfo) {
+  const key = menuInfo.key as RouteKey;
+
+  setActiveFirstLevelMenuKey(key);
+
+  if (!isActiveFirstLevelMenuHasChildren.value) {
+    routerPushByKeyWithMetaQuery(key);
+  }
+}
+
+const openKeys = computed(() => {
+  if (appStore.siderCollapse || !selectedKey.value) return [];
+
+  if (!selectedKey.value) return [];
+
+  return routeStore.getSelectedMenuKeyPath(selectedKey.value);
+});
+
+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="[activeFirstLevelMenuKey]"
+      :items="firstLevelMenus"
+      class="horizontal-menu size-full transition-300 border-0!"
+      :class="{ 'bg-container!': themeStore.darkMode }"
+      :style="{ lineHeight: themeStore.header.height + 'px' }"
+      @click="handleSelectMixMenu"
+    />
+  </Teleport>
+  <Teleport :to="`#${GLOBAL_SIDER_MENU_ID}`">
+    <SimpleScrollbar>
+      <AMenu
+        mode="inline"
+        :items="childLevelMenus"
+        :selected-keys="[selectedKey]"
+        :open-keys="openKeys"
+        :inline-collapsed="appStore.siderCollapse"
+        :inline-indent="18"
+        class="size-full transition-300 border-0!"
+        :class="{ 'bg-container!': themeStore.darkMode }"
+        @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..8409751
--- /dev/null
+++ b/src/layouts/modules/global-menu/modules/vertical-menu.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import type { RouteKey } from '@elegant-router/types';
+import { SimpleScrollbar } from '@sa/materials';
+import { useAppStore } from '@/store/modules/app';
+import { useThemeStore } from '@/store/modules/theme';
+import { useRouteStore } from '@/store/modules/route';
+import { useRouterPush } from '@/hooks/common/router';
+import { GLOBAL_SIDER_MENU_ID } from '@/constants/app';
+import { useMenu } from '../../../context';
+
+defineOptions({
+  name: 'VerticalMenu'
+});
+
+const appStore = useAppStore();
+const themeStore = useThemeStore();
+const routeStore = useRouteStore();
+const { routerPushByKeyWithMetaQuery } = useRouterPush();
+const { selectedKey } = useMenu();
+
+const darkTheme = computed(() => !themeStore.darkMode && themeStore.sider.inverted);
+
+const menuTheme = computed(() => (darkTheme.value ? 'dark' : 'light'));
+
+const openKeys = computed(() => {
+  if (appStore.siderCollapse || !selectedKey.value) return [];
+
+  if (!selectedKey.value) return [];
+
+  return routeStore.getSelectedMenuKeyPath(selectedKey.value);
+});
+
+function handleClickMenu(menuInfo: MenuInfo) {
+  const key = menuInfo.key as RouteKey;
+
+  routerPushByKeyWithMetaQuery(key);
+}
+</script>
+
+<template>
+  <Teleport :to="`#${GLOBAL_SIDER_MENU_ID}`">
+    <SimpleScrollbar class="menu-wrapper" :class="{ 'select-menu': !darkTheme }">
+      <AMenu
+        mode="inline"
+        :theme="menuTheme"
+        :items="routeStore.menus"
+        :selected-keys="[selectedKey]"
+        :open-keys="openKeys"
+        :inline-collapsed="appStore.siderCollapse"
+        :inline-indent="18"
+        class="size-full transition-300 border-0!"
+        :class="{ 'bg-container!': !darkTheme }"
+        @click="handleClickMenu"
+      />
+    </SimpleScrollbar>
+  </Teleport>
+</template>
+
+<style lang="scss" 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..52ee392
--- /dev/null
+++ b/src/layouts/modules/global-menu/modules/vertical-mix-menu.vue
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { MenuInfo } from 'ant-design-vue/es/menu/src/interface';
+import type { RouteKey } from '@elegant-router/types';
+import { SimpleScrollbar } from '@sa/materials';
+import { useBoolean } from '@sa/hooks';
+import { useAppStore } from '@/store/modules/app';
+import { useThemeStore } from '@/store/modules/theme';
+import { useRouteStore } from '@/store/modules/route';
+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: 'VerticalMixMenu'
+});
+
+const appStore = useAppStore();
+const themeStore = useThemeStore();
+const routeStore = useRouteStore();
+const { routerPushByKeyWithMetaQuery } = useRouterPush();
+const { bool: drawerVisible, setBool: setDrawerVisible } = useBoolean();
+const {
+  allMenus,
+  childLevelMenus,
+  activeFirstLevelMenuKey,
+  setActiveFirstLevelMenuKey,
+  getActiveFirstLevelMenuKey
+  //
+} = useMixMenuContext();
+const { selectedKey } = useMenu();
+
+const inverted = computed(() => !themeStore.darkMode && themeStore.sider.inverted);
+
+const menuTheme = computed(() => (inverted.value ? 'dark' : 'light'));
+
+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();
+  }
+}
+
+const openKeys = computed(() => {
+  if (appStore.siderCollapse || !selectedKey.value) return [];
+
+  if (!selectedKey.value) return [];
+
+  return routeStore.getSelectedMenuKeyPath(selectedKey.value);
+});
+
+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 class="menu-wrapper" :class="{ 'select-menu': !inverted }">
+            <AMenu
+              mode="inline"
+              :theme="menuTheme"
+              :items="childLevelMenus"
+              :selected-keys="[selectedKey]"
+              :open-keys="openKeys"
+              class="size-full transition-300 border-0!"
+              :class="{ 'bg-container!': !inverted }"
+              @click="handleClickMenu"
+            />
+          </SimpleScrollbar>
+        </DarkModeContainer>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style lang="scss" 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..39ffc82 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'
@@ -10,6 +11,12 @@ defineOptions({
 
 const appStore = useAppStore();
 const themeStore = useThemeStore();
+
+type CheckedType = boolean | string | number;
+
+function handleReverseHorizontalMixChange(value: CheckedType) {
+  themeStore.setLayoutReverseHorizontalMix(value as boolean);
+}
 </script>
 
 <template>
@@ -44,6 +51,13 @@ const themeStore = useThemeStore();
       </div>
     </template>
   </LayoutModeCard>
+  <SettingItem
+    v-if="themeStore.layout.mode === 'horizontal-mix'"
+    :label="$t('theme.layoutMode.reverseHorizontalMix')"
+    class="mt-16px"
+  >
+    <ASwitch :checked="themeStore.layout.reverseHorizontalMix" @update:checked="handleReverseHorizontalMixChange" />
+  </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/router/elegant/transform.ts b/src/router/elegant/transform.ts
index e2af8aa..203239b 100644
--- a/src/router/elegant/transform.ts
+++ b/src/router/elegant/transform.ts
@@ -97,10 +97,13 @@ function transformElegantRouteToVueRoute(
     if (component) {
       if (isSingleLevelRoute(route)) {
         const { layout, view } = getSingleLevelRouteComponent(component);
-  
+
         const singleLevelRoute: RouteRecordRaw = {
           path,
           component: layouts[layout],
+          meta: {
+            title: route.meta?.title || ''
+          },
           children: [
             {
               name,
@@ -110,36 +113,35 @@ function transformElegantRouteToVueRoute(
             } as RouteRecordRaw
           ]
         };
-  
+
         return [singleLevelRoute];
       }
-  
+
       if (isLayout(component)) {
         const layoutName = getLayoutName(component);
-  
+
         vueRoute.component = layouts[layoutName];
       }
-  
+
       if (isView(component)) {
         const viewName = getViewName(component);
-  
+
         vueRoute.component = views[viewName];
       }
-  
+
     }
   } catch (error: any) {
     console.error(`Error transforming route "${route.name}": ${error.toString()}`);
     return [];
   }
 
-  
   // add redirect to child
   if (children?.length && !vueRoute.redirect) {
     vueRoute.redirect = {
       name: children[0].name
     };
   }
-  
+
   if (children?.length) {
     const childRoutes = children.flatMap(child => transformElegantRouteToVueRoute(child, layouts, views));
 
diff --git a/src/store/modules/route/index.ts b/src/store/modules/route/index.ts
index a65a026..d3feea5 100644
--- a/src/store/modules/route/index.ts
+++ b/src/store/modules/route/index.ts
@@ -354,34 +354,6 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
     return getSelectedMenuKeyPathByKey(selectedKey, menus.value);
   }
 
-  /**
-   * Get route meta by key
-   *
-   * @param key Route key
-   */
-  function getRouteMetaByKey(key: string) {
-    const allRoutes = router.getRoutes();
-
-    return allRoutes.find(route => route.name === key)?.meta || null;
-  }
-
-  /**
-   * Get route query of meta by key
-   *
-   * @param key
-   */
-  function getRouteQueryOfMetaByKey(key: string) {
-    const meta = getRouteMetaByKey(key);
-
-    const query: Record<string, string> = {};
-
-    meta?.query?.forEach(item => {
-      query[item.key] = item.value;
-    });
-
-    return query;
-  }
-
   return {
     resetStore,
     routeHome,
@@ -398,7 +370,6 @@ export const useRouteStore = defineStore(SetupStoreId.Route, () => {
     isInitAuthRoute,
     setIsInitAuthRoute,
     getIsAuthRouteExist,
-    getSelectedMenuKeyPath,
-    getRouteQueryOfMetaByKey
+    getSelectedMenuKeyPath
   };
 });
diff --git a/src/store/modules/theme/index.ts b/src/store/modules/theme/index.ts
index 501b56e..9f944c3 100644
--- a/src/store/modules/theme/index.ts
+++ b/src/store/modules/theme/index.ts
@@ -133,6 +133,15 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
     addThemeVarsToGlobal(themeTokens, darkThemeTokens);
   }
 
+  /**
+   * Set layout reverse horizontal mix
+   *
+   * @param reverse Reverse horizontal mix
+   */
+  function setLayoutReverseHorizontalMix(reverse: boolean) {
+    settings.value.layout.reverseHorizontalMix = reverse;
+  }
+
   /** Cache theme settings */
   function cacheThemeSettings() {
     const isProd = import.meta.env.PROD;
@@ -193,6 +202,7 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
     toggleThemeScheme,
     setThemeScheme,
     updateThemeColors,
-    setThemeLayout
+    setThemeLayout,
+    setLayoutReverseHorizontalMix
   };
 });
diff --git a/src/theme/settings.ts b/src/theme/settings.ts
index bcec956..be92e1e 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 20c0736..d943e03 100644
--- a/src/typings/app.d.ts
+++ b/src/typings/app.d.ts
@@ -24,6 +24,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: {
@@ -164,7 +170,7 @@ declare namespace App {
     }
 
     /** The global menu */
-    interface Menu {
+    type Menu = {
       /**
        * The menu key
        *
@@ -185,7 +191,7 @@ declare namespace App {
       title?: string;
       /** The menu children */
       children?: Menu[];
-    }
+    };
 
     /** Tab route */
     type TabRoute = Pick<RouteLocationNormalizedLoaded, 'name' | 'path' | 'meta'> &
@@ -322,7 +328,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: {
diff --git a/src/typings/elegant-router.d.ts b/src/typings/elegant-router.d.ts
index ac91d1d..267270b 100644
--- a/src/typings/elegant-router.d.ts
+++ b/src/typings/elegant-router.d.ts
@@ -72,7 +72,7 @@ declare module "@elegant-router/types" {
 
   /**
    * custom route key
-   */ 
+   */
   export type CustomRouteKey = Extract<
     RouteKey,
     | "root"
@@ -93,7 +93,7 @@ declare module "@elegant-router/types" {
 
   /**
    * the generated route key
-   */ 
+   */
   export type GeneratedRouteKey = Exclude<RouteKey, CustomRouteKey>;
 
   /**
diff --git a/src/typings/union-key.d.ts b/src/typings/union-key.d.ts
index ff5020b..f0a18dc 100644
--- a/src/typings/union-key.d.ts
+++ b/src/typings/union-key.d.ts
@@ -20,7 +20,7 @@ declare namespace UnionKey {
    * - vertical: the vertical menu in left
    * - horizontal: the horizontal menu in top
    * - vertical-mix: two vertical mixed menus in left
-   * - horizontal-mix: the vertical menu in left and horizontal menu in top
+   * - horizontal-mix: the vertical first level menus in left and horizontal child level menus in top
    */
   type ThemeLayoutMode = 'vertical' | 'horizontal' | 'vertical-mix' | 'horizontal-mix';