From b6ac3106ce5ccd10a3a9708b654fd421002061c0 Mon Sep 17 00:00:00 2001
From: Azir <2075125282@qq.com>
Date: Fri, 4 Jul 2025 02:59:22 +0800
Subject: [PATCH] feat(projects)!: optimize layout mode, split horizontal mix
 component into two layouts, and rename the component.

---
 .../materials/src/libs/admin-layout/index.vue |  1 -
 packages/materials/src/types/index.ts         |  6 ---
 src/constants/app.ts                          |  3 +-
 src/layouts/base-layout/index.vue             | 25 ++++++++-----
 src/layouts/modules/global-menu/index.vue     |  7 ++--
 ...x-menu.vue => top-hybrid-header-first.vue} |  0
 ...-menu.vue => top-hybrid-sidebar-first.vue} |  0
 src/layouts/modules/global-sider/index.vue    | 12 ++++--
 .../components/layout-mode-card.vue           | 28 +++++++-------
 .../theme-drawer/modules/layout/index.vue     |  6 ++-
 .../layout/modules/footer-settings.vue        |  5 ++-
 .../modules/layout/modules/layout-mode.vue    | 37 ++++++++-----------
 .../modules/layout/modules/sider-settings.vue |  2 +-
 src/locales/langs/en-us.ts                    | 18 ++++++---
 src/locales/langs/zh-cn.ts                    |  9 ++++-
 src/store/modules/theme/index.ts              |  9 -----
 src/theme/settings.ts                         |  3 +-
 src/typings/app.d.ts                          | 24 ++++++------
 src/typings/components.d.ts                   | 20 ----------
 src/typings/union-key.d.ts                    | 10 ++++-
 20 files changed, 113 insertions(+), 112 deletions(-)
 rename src/layouts/modules/global-menu/modules/{reversed-horizontal-mix-menu.vue => top-hybrid-header-first.vue} (100%)
 rename src/layouts/modules/global-menu/modules/{horizontal-mix-menu.vue => top-hybrid-sidebar-first.vue} (100%)

diff --git a/packages/materials/src/libs/admin-layout/index.vue b/packages/materials/src/libs/admin-layout/index.vue
index 543f7dc0..8bbc5526 100644
--- a/packages/materials/src/libs/admin-layout/index.vue
+++ b/packages/materials/src/libs/admin-layout/index.vue
@@ -127,7 +127,6 @@ function handleClickMask() {
           :class="[
             style['layout-header'],
             commonClass,
-            headerClass,
             headerLeftGapClass,
             { 'absolute top-0 left-0 w-full': fixedHeaderAndTab }
           ]"
diff --git a/packages/materials/src/types/index.ts b/packages/materials/src/types/index.ts
index bbcfb9d6..583f0907 100644
--- a/packages/materials/src/types/index.ts
+++ b/packages/materials/src/types/index.ts
@@ -6,12 +6,6 @@ interface AdminLayoutHeaderConfig {
    * @default true
    */
   headerVisible?: boolean;
-  /**
-   * Header class
-   *
-   * @default ''
-   */
-  headerClass?: string;
   /**
    * Header height
    *
diff --git a/src/constants/app.ts b/src/constants/app.ts
index 0c8ba5ac..269ff960 100644
--- a/src/constants/app.ts
+++ b/src/constants/app.ts
@@ -24,7 +24,8 @@ export const themeLayoutModeRecord: Record<UnionKey.ThemeLayoutMode, App.I18n.I1
   vertical: 'theme.layout.layoutMode.vertical',
   'vertical-mix': 'theme.layout.layoutMode.vertical-mix',
   horizontal: 'theme.layout.layoutMode.horizontal',
-  'horizontal-mix': 'theme.layout.layoutMode.horizontal-mix'
+  'top-hybrid-sidebar-first': 'theme.layout.layoutMode.top-hybrid-sidebar-first',
+  'top-hybrid-header-first': 'theme.layout.layoutMode.top-hybrid-header-first'
 };
 
 export const themeLayoutModeOptions = transformRecordToOption(themeLayoutModeRecord);
diff --git a/src/layouts/base-layout/index.vue b/src/layouts/base-layout/index.vue
index 7debe5d1..9c9680d2 100644
--- a/src/layouts/base-layout/index.vue
+++ b/src/layouts/base-layout/index.vue
@@ -29,7 +29,7 @@ const layoutMode = computed(() => {
 });
 
 const headerProps = computed(() => {
-  const { mode, reverseHorizontalMix } = themeStore.layout;
+  const { mode } = themeStore.layout;
 
   const headerPropsConfig: Record<UnionKey.ThemeLayoutMode, App.Global.HeaderProps> = {
     vertical: {
@@ -47,10 +47,15 @@ const headerProps = computed(() => {
       showMenu: true,
       showMenuToggler: false
     },
-    'horizontal-mix': {
+    'top-hybrid-sidebar-first': {
       showLogo: true,
       showMenu: true,
-      showMenuToggler: reverseHorizontalMix && isActiveFirstLevelMenuHasChildren.value
+      showMenuToggler: false
+    },
+    'top-hybrid-header-first': {
+      showLogo: true,
+      showMenu: true,
+      showMenuToggler: isActiveFirstLevelMenuHasChildren.value
     }
   };
 
@@ -61,21 +66,22 @@ const siderVisible = computed(() => themeStore.layout.mode !== 'horizontal');
 
 const isVerticalMix = computed(() => themeStore.layout.mode === 'vertical-mix');
 
-const isHorizontalMix = computed(() => themeStore.layout.mode === 'horizontal-mix');
+const isTopHybridSidebarFirst = computed(() => themeStore.layout.mode === 'top-hybrid-sidebar-first');
+
+const isTopHybridHeaderFirst = computed(() => themeStore.layout.mode === 'top-hybrid-header-first');
 
 const siderWidth = computed(() => getSiderWidth());
 
 const siderCollapsedWidth = computed(() => getSiderCollapsedWidth());
 
 function getSiderWidth() {
-  const { reverseHorizontalMix } = themeStore.layout;
   const { width, mixWidth, mixChildMenuWidth } = themeStore.sider;
 
-  if (isHorizontalMix.value && reverseHorizontalMix) {
+  if (isTopHybridHeaderFirst.value) {
     return isActiveFirstLevelMenuHasChildren.value ? width : 0;
   }
 
-  let w = isVerticalMix.value || isHorizontalMix.value ? mixWidth : width;
+  let w = isVerticalMix.value || isTopHybridSidebarFirst.value ? mixWidth : width;
 
   if (isVerticalMix.value && appStore.mixSiderFixed && childLevelMenus.value.length) {
     w += mixChildMenuWidth;
@@ -85,14 +91,13 @@ function getSiderWidth() {
 }
 
 function getSiderCollapsedWidth() {
-  const { reverseHorizontalMix } = themeStore.layout;
   const { collapsedWidth, mixCollapsedWidth, mixChildMenuWidth } = themeStore.sider;
 
-  if (isHorizontalMix.value && reverseHorizontalMix) {
+  if (isTopHybridHeaderFirst.value) {
     return isActiveFirstLevelMenuHasChildren.value ? collapsedWidth : 0;
   }
 
-  let w = isVerticalMix.value || isHorizontalMix.value ? mixCollapsedWidth : collapsedWidth;
+  let w = isVerticalMix.value || isTopHybridSidebarFirst.value ? mixCollapsedWidth : collapsedWidth;
 
   if (isVerticalMix.value && appStore.mixSiderFixed && childLevelMenus.value.length) {
     w += mixChildMenuWidth;
diff --git a/src/layouts/modules/global-menu/index.vue b/src/layouts/modules/global-menu/index.vue
index 45434d92..cc3a0a32 100644
--- a/src/layouts/modules/global-menu/index.vue
+++ b/src/layouts/modules/global-menu/index.vue
@@ -6,8 +6,8 @@ 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';
+import TopHybridSidebarFirst from './modules/top-hybrid-sidebar-first.vue';
+import TopHybridHeaderFirst from './modules/top-hybrid-header-first.vue';
 
 defineOptions({
   name: 'GlobalMenu'
@@ -21,7 +21,8 @@ const activeMenu = computed(() => {
     vertical: VerticalMenu,
     'vertical-mix': VerticalMixMenu,
     horizontal: HorizontalMenu,
-    'horizontal-mix': themeStore.layout.reverseHorizontalMix ? ReversedHorizontalMixMenu : HorizontalMixMenu
+    'top-hybrid-sidebar-first': TopHybridSidebarFirst,
+    'top-hybrid-header-first': TopHybridHeaderFirst
   };
 
   return menuMap[themeStore.layout.mode];
diff --git a/src/layouts/modules/global-menu/modules/reversed-horizontal-mix-menu.vue b/src/layouts/modules/global-menu/modules/top-hybrid-header-first.vue
similarity index 100%
rename from src/layouts/modules/global-menu/modules/reversed-horizontal-mix-menu.vue
rename to src/layouts/modules/global-menu/modules/top-hybrid-header-first.vue
diff --git a/src/layouts/modules/global-menu/modules/horizontal-mix-menu.vue b/src/layouts/modules/global-menu/modules/top-hybrid-sidebar-first.vue
similarity index 100%
rename from src/layouts/modules/global-menu/modules/horizontal-mix-menu.vue
rename to src/layouts/modules/global-menu/modules/top-hybrid-sidebar-first.vue
diff --git a/src/layouts/modules/global-sider/index.vue b/src/layouts/modules/global-sider/index.vue
index bb62c185..2b5bfca2 100644
--- a/src/layouts/modules/global-sider/index.vue
+++ b/src/layouts/modules/global-sider/index.vue
@@ -13,9 +13,15 @@ const appStore = useAppStore();
 const themeStore = useThemeStore();
 
 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 isTopHybridSidebarFirst = computed(() => themeStore.layout.mode === 'top-hybrid-sidebar-first');
+const isTopHybridHeaderFirst = computed(() => themeStore.layout.mode === 'top-hybrid-header-first');
+const darkMenu = computed(
+  () =>
+    !themeStore.darkMode && !isTopHybridSidebarFirst.value && !isTopHybridHeaderFirst.value && themeStore.sider.inverted
+);
+const showLogo = computed(
+  () => !isVerticalMix.value && !isTopHybridSidebarFirst.value && !isTopHybridHeaderFirst.value
+);
 const menuWrapperClass = computed(() => (showLogo.value ? 'flex-1-hidden' : 'h-full'));
 </script>
 
diff --git a/src/layouts/modules/theme-drawer/components/layout-mode-card.vue b/src/layouts/modules/theme-drawer/components/layout-mode-card.vue
index b430fd01..c9cedc72 100644
--- a/src/layouts/modules/theme-drawer/components/layout-mode-card.vue
+++ b/src/layouts/modules/theme-drawer/components/layout-mode-card.vue
@@ -27,7 +27,6 @@ type LayoutConfig = Record<
   UnionKey.ThemeLayoutMode,
   {
     placement: PopoverPlacement;
-    headerClass: string;
     menuClass: string;
     mainClass: string;
   }
@@ -36,25 +35,26 @@ type LayoutConfig = Record<
 const layoutConfig: LayoutConfig = {
   vertical: {
     placement: 'bottom',
-    headerClass: '',
     menuClass: 'w-1/3 h-full',
     mainClass: 'w-2/3 h-3/4'
   },
   'vertical-mix': {
     placement: 'bottom',
-    headerClass: '',
     menuClass: 'w-1/4 h-full',
     mainClass: 'w-2/3 h-3/4'
   },
   horizontal: {
     placement: 'bottom',
-    headerClass: '',
     menuClass: 'w-full h-1/4',
     mainClass: 'w-full h-3/4'
   },
-  'horizontal-mix': {
+  'top-hybrid-sidebar-first': {
+    placement: 'bottom',
+    menuClass: 'w-full h-1/4',
+    mainClass: 'w-2/3 h-3/4'
+  },
+  'top-hybrid-header-first': {
     placement: 'bottom',
-    headerClass: '',
     menuClass: 'w-full h-1/4',
     mainClass: 'w-2/3 h-3/4'
   }
@@ -68,25 +68,27 @@ function handleChangeMode(mode: UnionKey.ThemeLayoutMode) {
 </script>
 
 <template>
-  <div class="grid grid-cols-3 gap-x-32px gap-y-16px">
+  <div class="grid grid-cols-2 gap-x-16px gap-y-12px md:grid-cols-3">
     <div
       v-for="(item, key) in layoutConfig"
       :key="key"
-      class="flex-center cursor-pointer border-2px rounded-6px hover:border-primary"
-      :class="[mode === key ? 'border-primary' : 'border-transparent']"
+      class="flex-col-center cursor-pointer"
       @click="handleChangeMode(key)"
     >
       <NTooltip :placement="item.placement">
         <template #trigger>
           <div
-            class="h-64px w-96px gap-6px rd-4px p-6px shadow dark:shadow-coolGray-5"
-            :class="[key.includes('vertical') ? 'flex' : 'flex-col']"
+            class="h-64px w-96px gap-6px rd-4px p-6px shadow ring-2 ring-transparent transition-all hover:ring-primary"
+            :class="{ '!ring-primary': mode === key }"
           >
-            <slot :name="key"></slot>
+            <div class="h-full w-full gap-1" :class="[key.includes('vertical') ? 'flex' : 'flex-col']">
+              <slot :name="key"></slot>
+            </div>
           </div>
         </template>
-        {{ $t(themeLayoutModeRecord[key]) }}
+        {{ $t(`theme.layout.layoutMode.${key}_detail`) }}
       </NTooltip>
+      <p class="mt-8px text-12px">{{ $t(themeLayoutModeRecord[key]) }}</p>
     </div>
   </div>
 </template>
diff --git a/src/layouts/modules/theme-drawer/modules/layout/index.vue b/src/layouts/modules/theme-drawer/modules/layout/index.vue
index f82a2dd3..c842af09 100644
--- a/src/layouts/modules/theme-drawer/modules/layout/index.vue
+++ b/src/layouts/modules/theme-drawer/modules/layout/index.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useThemeStore } from '@/store/modules/theme';
 import LayoutMode from './modules/layout-mode.vue';
 import TabSettings from './modules/tab-settings.vue';
 import HeaderSettings from './modules/header-settings.vue';
@@ -9,6 +10,8 @@ import ContentSettings from './modules/content-settings.vue';
 defineOptions({
   name: 'LayoutSettings'
 });
+
+const themeStore = useThemeStore();
 </script>
 
 <template>
@@ -16,7 +19,8 @@ defineOptions({
     <LayoutMode />
     <TabSettings />
     <HeaderSettings />
-    <SiderSettings />
+    <!-- The top menu mode does not have a sidebar -->
+    <SiderSettings v-if="themeStore.layout.mode !== 'horizontal'" />
     <FooterSettings />
     <ContentSettings />
   </div>
diff --git a/src/layouts/modules/theme-drawer/modules/layout/modules/footer-settings.vue b/src/layouts/modules/theme-drawer/modules/layout/modules/footer-settings.vue
index abc8f98e..2957eae2 100644
--- a/src/layouts/modules/theme-drawer/modules/layout/modules/footer-settings.vue
+++ b/src/layouts/modules/theme-drawer/modules/layout/modules/footer-settings.vue
@@ -12,6 +12,9 @@ const themeStore = useThemeStore();
 
 const layoutMode = computed(() => themeStore.layout.mode);
 const isWrapperScrollMode = computed(() => themeStore.layout.scrollMode === 'wrapper');
+const isMixHorizontalMode = computed(() =>
+  ['top-hybrid-sidebar-first', 'top-hybrid-header-first'].includes(layoutMode.value)
+);
 </script>
 
 <template>
@@ -31,7 +34,7 @@ const isWrapperScrollMode = computed(() => themeStore.layout.scrollMode === 'wra
       <NInputNumber v-model:value="themeStore.footer.height" size="small" :step="1" class="w-120px" />
     </SettingItem>
     <SettingItem
-      v-if="themeStore.footer.visible && layoutMode === 'horizontal-mix'"
+      v-if="themeStore.footer.visible && isMixHorizontalMode"
       key="4"
       :label="$t('theme.layout.footer.right')"
     >
diff --git a/src/layouts/modules/theme-drawer/modules/layout/modules/layout-mode.vue b/src/layouts/modules/theme-drawer/modules/layout/modules/layout-mode.vue
index 552e7624..64fb48c2 100644
--- a/src/layouts/modules/theme-drawer/modules/layout/modules/layout-mode.vue
+++ b/src/layouts/modules/theme-drawer/modules/layout/modules/layout-mode.vue
@@ -3,7 +3,6 @@ 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'
@@ -11,56 +10,52 @@ defineOptions({
 
 const appStore = useAppStore();
 const themeStore = useThemeStore();
-
-function handleReverseHorizontalMixChange(value: boolean) {
-  themeStore.setLayoutReverseHorizontalMix(value);
-}
 </script>
 
 <template>
   <NDivider>{{ $t('theme.layout.layoutMode.title') }}</NDivider>
   <LayoutModeCard v-model:mode="themeStore.layout.mode" :disabled="appStore.isMobile">
     <template #vertical>
-      <div class="layout-sider h-full w-18px"></div>
+      <div class="layout-sider h-full w-18px !bg-primary"></div>
       <div class="vertical-wrapper">
-        <div class="layout-header"></div>
+        <div class="layout-header bg-primary-200"></div>
         <div class="layout-main"></div>
       </div>
     </template>
     <template #vertical-mix>
-      <div class="layout-sider h-full w-8px"></div>
-      <div class="layout-sider h-full w-16px"></div>
+      <div class="layout-sider h-full w-8px !bg-primary"></div>
+      <div class="layout-sider h-full w-16px !bg-primary-300"></div>
       <div class="vertical-wrapper">
-        <div class="layout-header"></div>
+        <div class="layout-header bg-primary-200"></div>
         <div class="layout-main"></div>
       </div>
     </template>
     <template #horizontal>
-      <div class="layout-header"></div>
+      <div class="layout-header !bg-primary"></div>
       <div class="horizontal-wrapper">
         <div class="layout-main"></div>
       </div>
     </template>
-    <template #horizontal-mix>
-      <div class="layout-header"></div>
+    <template #top-hybrid-sidebar-first>
+      <div class="layout-header !bg-primary-300"></div>
+      <div class="horizontal-wrapper">
+        <div class="layout-sider w-18px !bg-primary"></div>
+        <div class="layout-main"></div>
+      </div>
+    </template>
+    <template #top-hybrid-header-first>
+      <div class="layout-header bg-primary"></div>
       <div class="horizontal-wrapper">
         <div class="layout-sider w-18px"></div>
         <div class="layout-main"></div>
       </div>
     </template>
   </LayoutModeCard>
-  <SettingItem
-    v-if="themeStore.layout.mode === 'horizontal-mix'"
-    :label="$t('theme.layout.layoutMode.reverseHorizontalMix')"
-    class="mt-16px"
-  >
-    <NSwitch :value="themeStore.layout.reverseHorizontalMix" @update:value="handleReverseHorizontalMixChange" />
-  </SettingItem>
 </template>
 
 <style scoped>
 .layout-header {
-  --uno: h-16px bg-primary rd-4px;
+  --uno: h-16px rd-4px;
 }
 
 .layout-sider {
diff --git a/src/layouts/modules/theme-drawer/modules/layout/modules/sider-settings.vue b/src/layouts/modules/theme-drawer/modules/layout/modules/sider-settings.vue
index 5d4b7718..eaea7108 100644
--- a/src/layouts/modules/theme-drawer/modules/layout/modules/sider-settings.vue
+++ b/src/layouts/modules/theme-drawer/modules/layout/modules/sider-settings.vue
@@ -11,7 +11,7 @@ defineOptions({
 const themeStore = useThemeStore();
 
 const layoutMode = computed(() => themeStore.layout.mode);
-const isMixLayoutMode = computed(() => layoutMode.value.includes('mix'));
+const isMixLayoutMode = computed(() => layoutMode.value.includes('mix') || layoutMode.value.includes('hybrid'));
 </script>
 
 <template>
diff --git a/src/locales/langs/en-us.ts b/src/locales/langs/en-us.ts
index 83b48833..d9be8cdc 100644
--- a/src/locales/langs/en-us.ts
+++ b/src/locales/langs/en-us.ts
@@ -88,11 +88,19 @@ const local: App.I18n.Schema = {
     layout: {
       layoutMode: {
         title: 'Layout Mode',
-        vertical: 'Vertical Menu Mode',
-        horizontal: 'Horizontal Menu Mode',
-        'vertical-mix': 'Vertical Mix Menu Mode',
-        'horizontal-mix': 'Horizontal Mix menu Mode',
-        reverseHorizontalMix: 'Reverse first level menus and child level menus position'
+        vertical: 'Vertical Mode',
+        horizontal: 'Horizontal Mode',
+        'vertical-mix': 'Vertical Mix Mode',
+        'top-hybrid-sidebar-first': 'Top-Hybrid Sidebar-First',
+        'top-hybrid-header-first': 'Top-Hybrid Header-First',
+        vertical_detail: 'Vertical menu layout, with the menu on the left and content on the right.',
+        'vertical-mix_detail':
+          'Vertical mix-menu layout, with the primary menu on the dark left side and the secondary menu on the lighter right side.',
+        horizontal_detail: 'Horizontal menu layout, with the menu at the top and content below.',
+        'top-hybrid-sidebar-first_detail':
+          'Top hybrid layout, with the primary menu on the left and the secondary menu at the top.',
+        'top-hybrid-header-first_detail':
+          'Top hybrid layout, with the primary menu at the top and the secondary menu on the left.'
       },
       tab: {
         title: 'Tab Settings',
diff --git a/src/locales/langs/zh-cn.ts b/src/locales/langs/zh-cn.ts
index 47c6e7c0..80a9d19e 100644
--- a/src/locales/langs/zh-cn.ts
+++ b/src/locales/langs/zh-cn.ts
@@ -91,8 +91,13 @@ const local: App.I18n.Schema = {
         vertical: '左侧菜单模式',
         'vertical-mix': '左侧菜单混合模式',
         horizontal: '顶部菜单模式',
-        'horizontal-mix': '顶部菜单混合模式',
-        reverseHorizontalMix: '一级菜单与子级菜单位置反转'
+        'top-hybrid-sidebar-first': '顶部混合-侧边优先',
+        'top-hybrid-header-first': '顶部混合-顶部优先',
+        vertical_detail: '左侧菜单布局，菜单在左，内容在右。',
+        'vertical-mix_detail': '左侧双菜单布局，一级菜单在左侧深色区域，二级菜单在右侧浅色区域。',
+        horizontal_detail: '顶部菜单布局，菜单在顶部，内容在下方。',
+        'top-hybrid-sidebar-first_detail': '顶部混合布局，一级菜单在左侧，二级菜单在顶部。',
+        'top-hybrid-header-first_detail': '顶部混合布局，一级菜单在顶部，二级菜单在左侧。'
       },
       tab: {
         title: '标签栏设置',
diff --git a/src/store/modules/theme/index.ts b/src/store/modules/theme/index.ts
index f5a7a51d..b0380471 100644
--- a/src/store/modules/theme/index.ts
+++ b/src/store/modules/theme/index.ts
@@ -171,14 +171,6 @@ 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;
-  }
 
   /**
    * Set watermark enable user name
@@ -291,7 +283,6 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
     toggleThemeScheme,
     updateThemeColors,
     setThemeLayout,
-    setLayoutReverseHorizontalMix,
     setWatermarkEnableUserName,
     setWatermarkEnableTime
   };
diff --git a/src/theme/settings.ts b/src/theme/settings.ts
index 1d83bd74..ad937c47 100644
--- a/src/theme/settings.ts
+++ b/src/theme/settings.ts
@@ -15,8 +15,7 @@ export const themeSettings: App.Theme.ThemeSetting = {
   resetCacheStrategy: 'close',
   layout: {
     mode: 'vertical',
-    scrollMode: 'content',
-    reverseHorizontalMix: false
+    scrollMode: 'content'
   },
   page: {
     animate: true,
diff --git a/src/typings/app.d.ts b/src/typings/app.d.ts
index 9c407c7a..dfa38fd8 100644
--- a/src/typings/app.d.ts
+++ b/src/typings/app.d.ts
@@ -28,12 +28,6 @@ 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: {
@@ -88,11 +82,14 @@ declare namespace App {
         width: number;
         /** Collapsed sider width */
         collapsedWidth: number;
-        /** Sider width when the layout is 'vertical-mix' or 'horizontal-mix' */
+        /** Sider width when the layout is 'vertical-mix', 'top-hybrid-sidebar-first', or 'top-hybrid-header-first' */
         mixWidth: number;
-        /** Collapsed sider width when the layout is 'vertical-mix' or 'horizontal-mix' */
+        /**
+         * Collapsed sider width when the layout is 'vertical-mix', 'top-hybrid-sidebar-first', or
+         * 'top-hybrid-header-first'
+         */
         mixCollapsedWidth: number;
-        /** Child menu width when the layout is 'vertical-mix' or 'horizontal-mix' */
+        /** Child menu width when the layout is 'vertical-mix', 'top-hybrid-sidebar-first', or 'top-hybrid-header-first' */
         mixChildMenuWidth: number;
       };
       /** Footer */
@@ -103,7 +100,10 @@ declare namespace App {
         fixed: boolean;
         /** Footer height */
         height: number;
-        /** Whether float the footer to the right when the layout is 'horizontal-mix' */
+        /**
+         * Whether float the footer to the right when the layout is 'top-hybrid-sidebar-first' or
+         * 'top-hybrid-header-first'
+         */
         right: boolean;
       };
       /** Watermark */
@@ -380,7 +380,9 @@ declare namespace App {
           recommendColorDesc: string;
         };
         layout: {
-          layoutMode: { title: string; reverseHorizontalMix: string } & Record<UnionKey.ThemeLayoutMode, string>;
+          layoutMode: { title: string } & Record<UnionKey.ThemeLayoutMode, string> & {
+              [K in `${UnionKey.ThemeLayoutMode}_detail`]: string;
+            };
           tab: {
             title: string;
             visible: string;
diff --git a/src/typings/components.d.ts b/src/typings/components.d.ts
index a5ac8f51..33b5526f 100644
--- a/src/typings/components.d.ts
+++ b/src/typings/components.d.ts
@@ -17,23 +17,14 @@ declare module 'vue' {
     FullScreen: typeof import('./../components/common/full-screen.vue')['default']
     IconAntDesignEnterOutlined: typeof import('~icons/ant-design/enter-outlined')['default']
     IconAntDesignReloadOutlined: typeof import('~icons/ant-design/reload-outlined')['default']
-    IconAntDesignSettingOutlined: typeof import('~icons/ant-design/setting-outlined')['default']
     IconGridiconsFullscreen: typeof import('~icons/gridicons/fullscreen')['default']
     IconGridiconsFullscreenExit: typeof import('~icons/gridicons/fullscreen-exit')['default']
-    'IconIc:roundPlus': typeof import('~icons/ic/round-plus')['default']
-    IconIcRoundDelete: typeof import('~icons/ic/round-delete')['default']
-    IconIcRoundPlus: typeof import('~icons/ic/round-plus')['default']
-    IconIcRoundRefresh: typeof import('~icons/ic/round-refresh')['default']
-    IconIcRoundRemove: typeof import('~icons/ic/round-remove')['default']
-    IconIcRoundSearch: typeof import('~icons/ic/round-search')['default']
     IconLocalBanner: typeof import('~icons/local/banner')['default']
     IconLocalLogo: typeof import('~icons/local/logo')['default']
     IconMdiArrowDownThin: typeof import('~icons/mdi/arrow-down-thin')['default']
     IconMdiArrowUpThin: typeof import('~icons/mdi/arrow-up-thin')['default']
-    IconMdiDrag: typeof import('~icons/mdi/drag')['default']
     IconMdiKeyboardEsc: typeof import('~icons/mdi/keyboard-esc')['default']
     IconMdiKeyboardReturn: typeof import('~icons/mdi/keyboard-return')['default']
-    IconMdiRefresh: typeof import('~icons/mdi/refresh')['default']
     IconUilSearch: typeof import('~icons/uil/search')['default']
     LangSwitch: typeof import('./../components/common/lang-switch.vue')['default']
     LookForward: typeof import('./../components/custom/look-forward.vue')['default']
@@ -45,19 +36,14 @@ declare module 'vue' {
     NCard: typeof import('naive-ui')['NCard']
     NCheckbox: typeof import('naive-ui')['NCheckbox']
     NColorPicker: typeof import('naive-ui')['NColorPicker']
-    NDataTable: typeof import('naive-ui')['NDataTable']
-    NDescriptions: typeof import('naive-ui')['NDescriptions']
-    NDescriptionsItem: typeof import('naive-ui')['NDescriptionsItem']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
     NDivider: typeof import('naive-ui')['NDivider']
     NDrawer: typeof import('naive-ui')['NDrawer']
     NDrawerContent: typeof import('naive-ui')['NDrawerContent']
     NDropdown: typeof import('naive-ui')['NDropdown']
-    NDynamicInput: typeof import('naive-ui')['NDynamicInput']
     NEmpty: typeof import('naive-ui')['NEmpty']
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
-    NFormItemGi: typeof import('naive-ui')['NFormItemGi']
     NGi: typeof import('naive-ui')['NGi']
     NGrid: typeof import('naive-ui')['NGrid']
     NInput: typeof import('naive-ui')['NInput']
@@ -70,10 +56,6 @@ declare module 'vue' {
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
     NModal: typeof import('naive-ui')['NModal']
     NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
-    NPopconfirm: typeof import('naive-ui')['NPopconfirm']
-    NPopover: typeof import('naive-ui')['NPopover']
-    NRadio: typeof import('naive-ui')['NRadio']
-    NRadioGroup: typeof import('naive-ui')['NRadioGroup']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSelect: typeof import('naive-ui')['NSelect']
     NSpace: typeof import('naive-ui')['NSpace']
@@ -81,10 +63,8 @@ declare module 'vue' {
     NSwitch: typeof import('naive-ui')['NSwitch']
     NTab: typeof import('naive-ui')['NTab']
     NTabs: typeof import('naive-ui')['NTabs']
-    NTag: typeof import('naive-ui')['NTag']
     NThing: typeof import('naive-ui')['NThing']
     NTooltip: typeof import('naive-ui')['NTooltip']
-    NTree: typeof import('naive-ui')['NTree']
     NWatermark: typeof import('naive-ui')['NWatermark']
     PinToggler: typeof import('./../components/common/pin-toggler.vue')['default']
     ReloadButton: typeof import('./../components/common/reload-button.vue')['default']
diff --git a/src/typings/union-key.d.ts b/src/typings/union-key.d.ts
index a783294b..8ef31d42 100644
--- a/src/typings/union-key.d.ts
+++ b/src/typings/union-key.d.ts
@@ -28,9 +28,15 @@ 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 first level menus in left and horizontal child level menus in top
+   * - top-hybrid-sidebar-first: the vertical first level menus in left and horizontal child level menus in top
+   * - top-hybrid-header-first: the horizontal first level menus in top and vertical child level menus in left
    */
-  type ThemeLayoutMode = 'vertical' | 'horizontal' | 'vertical-mix' | 'horizontal-mix';
+  type ThemeLayoutMode =
+    | 'vertical'
+    | 'horizontal'
+    | 'vertical-mix'
+    | 'top-hybrid-sidebar-first'
+    | 'top-hybrid-header-first';
 
   /**
    * The scroll mode when content overflow