feat(projects)!: optimize layout mode, split horizontal mix component into two layouts, and rename the component.

Author: Azir-11

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 }
           ]"

packages/materials/src/types/index.ts

@@ -6,12 +6,6 @@ interface AdminLayoutHeaderConfig {
    * @default true
    */
   headerVisible?: boolean;
-  /**
-   * Header class
-   *
-   * @default ''
-   */
-  headerClass?: string;
   /**
    * Header height
    *

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);

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;

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];

src/layouts/modules/global-menu/modules/reversed-horizontal-mix-menu.vue renamed to src/layouts/modules/global-menu/modules/top-hybrid-header-first.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>
 

src/layouts/modules/global-menu/modules/horizontal-mix-menu.vue renamed to src/layouts/modules/global-menu/modules/top-hybrid-sidebar-first.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>

src/layouts/modules/global-sider/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,14 +10,17 @@ import ContentSettings from './modules/content-settings.vue';
 defineOptions({
   name: 'LayoutSettings'
 });
+
+const themeStore = useThemeStore();
 </script>
 
 <template>
   <div class="flex-col-stretch gap-16px">
     <LayoutMode />
     <TabSettings />
     <HeaderSettings />
-    <SiderSettings />
+    <!-- The top menu mode does not have a sidebar -->
+    <SiderSettings v-if="themeStore.layout.mode !== 'horizontal'" />
     <FooterSettings />
     <ContentSettings />
   </div>