feat(projects): add 'vertical-hybrid-header-first' layout mode

Author: wenyuanw

src/constants/app.ts

@@ -23,6 +23,7 @@ export const loginModuleRecord: Record<UnionKey.LoginModule, App.I18n.I18nKey> =
 export const themeLayoutModeRecord: Record<UnionKey.ThemeLayoutMode, App.I18n.I18nKey> = {
   vertical: 'theme.layout.layoutMode.vertical',
   'vertical-mix': 'theme.layout.layoutMode.vertical-mix',
+  'vertical-hybrid-header-first': 'theme.layout.layoutMode.vertical-hybrid-header-first',
   horizontal: 'theme.layout.layoutMode.horizontal',
   'top-hybrid-sidebar-first': 'theme.layout.layoutMode.top-hybrid-sidebar-first',
   'top-hybrid-header-first': 'theme.layout.layoutMode.top-hybrid-header-first'

src/layouts/base-layout/index.vue

@@ -42,6 +42,11 @@ const headerProps = computed(() => {
       showMenu: false,
       showMenuToggler: false
     },
+    'vertical-hybrid-header-first': {
+      showLogo: !isActiveFirstLevelMenuHasChildren.value,
+      showMenu: true,
+      showMenuToggler: false
+    },
     horizontal: {
       showLogo: true,
       showMenu: true,
@@ -66,6 +71,8 @@ const siderVisible = computed(() => themeStore.layout.mode !== 'horizontal');
 
 const isVerticalMix = computed(() => themeStore.layout.mode === 'vertical-mix');
 
+const isVerticalHybridHeaderFirst = computed(() => themeStore.layout.mode === 'vertical-hybrid-header-first');
+
 const isTopHybridSidebarFirst = computed(() => themeStore.layout.mode === 'top-hybrid-sidebar-first');
 
 const isTopHybridHeaderFirst = computed(() => themeStore.layout.mode === 'top-hybrid-header-first');
@@ -74,36 +81,46 @@ const siderWidth = computed(() => getSiderWidth());
 
 const siderCollapsedWidth = computed(() => getSiderCollapsedWidth());
 
-function getSiderWidth() {
-  const { width, mixWidth, mixChildMenuWidth } = themeStore.sider;
+function getSiderAndCollapsedWidth(isCollapsed: boolean) {
+  const {
+    mixChildMenuWidth,
+    collapsedWidth,
+    width: themeWidth,
+    mixCollapsedWidth,
+    mixWidth: themeMixWidth
+  } = themeStore.sider;
+
+  const width = isCollapsed ? collapsedWidth : themeWidth;
+  const mixWidth = isCollapsed ? mixCollapsedWidth : themeMixWidth;
 
   if (isTopHybridHeaderFirst.value) {
     return isActiveFirstLevelMenuHasChildren.value ? width : 0;
   }
 
-  let w = isVerticalMix.value || isTopHybridSidebarFirst.value ? mixWidth : width;
-
-  if (isVerticalMix.value && appStore.mixSiderFixed && childLevelMenus.value.length) {
-    w += mixChildMenuWidth;
+  if (isVerticalHybridHeaderFirst.value && !isActiveFirstLevelMenuHasChildren.value) {
+    return 0;
   }
 
-  return w;
-}
+  const isMixMode = isVerticalMix.value || isTopHybridSidebarFirst.value || isVerticalHybridHeaderFirst.value;
+  let finalWidth = isMixMode ? mixWidth : width;
 
-function getSiderCollapsedWidth() {
-  const { collapsedWidth, mixCollapsedWidth, mixChildMenuWidth } = themeStore.sider;
+  if (isVerticalMix.value && appStore.mixSiderFixed && childLevelMenus.value.length) {
+    finalWidth += mixChildMenuWidth;
+  }
 
-  if (isTopHybridHeaderFirst.value) {
-    return isActiveFirstLevelMenuHasChildren.value ? collapsedWidth : 0;
+  if (isVerticalHybridHeaderFirst.value && appStore.mixSiderFixed && childLevelMenus.value.length) {
+    finalWidth += mixChildMenuWidth;
   }
 
-  let w = isVerticalMix.value || isTopHybridSidebarFirst.value ? mixCollapsedWidth : collapsedWidth;
+  return finalWidth;
+}
 
-  if (isVerticalMix.value && appStore.mixSiderFixed && childLevelMenus.value.length) {
-    w += mixChildMenuWidth;
-  }
+function getSiderWidth() {
+  return getSiderAndCollapsedWidth(false);
+}
 
-  return w;
+function getSiderCollapsedWidth() {
+  return getSiderAndCollapsedWidth(true);
 }
 </script>
 

src/layouts/context/index.ts

@@ -1,14 +1,27 @@
 import { computed, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { useContext } from '@sa/hooks';
+import type { RouteKey } from '@elegant-router/types';
 import { useRouteStore } from '@/store/modules/route';
+import { useRouterPush } from '@/hooks/common/router';
 
 export const { setupStore: setupMixMenuContext, useStore: useMixMenuContext } = useContext('mix-menu', useMixMenu);
 
 function useMixMenu() {
   const route = useRoute();
   const routeStore = useRouteStore();
   const { selectedKey } = useMenu();
+  const { routerPushByKeyWithMetaQuery } = useRouterPush();
+
+  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 activeFirstLevelMenuKey = ref('');
 
@@ -22,30 +35,64 @@ function useMixMenu() {
     setActiveFirstLevelMenuKey(firstLevelRouteName);
   }
 
-  const allMenus = computed<App.Global.Menu[]>(() => routeStore.menus);
+  const isActiveFirstLevelMenuHasChildren = computed(() => {
+    if (!activeFirstLevelMenuKey.value) {
+      return false;
+    }
 
-  const firstLevelMenus = computed<App.Global.Menu[]>(() =>
-    routeStore.menus.map(menu => {
-      const { children: _, ...rest } = menu;
+    const findItem = allMenus.value.find(item => item.key === activeFirstLevelMenuKey.value);
 
-      return rest;
-    })
-  );
+    return Boolean(findItem?.children?.length);
+  });
 
-  const childLevelMenus = computed<App.Global.Menu[]>(
-    () => routeStore.menus.find(menu => menu.key === activeFirstLevelMenuKey.value)?.children || []
+  function handleSelectFirstLevelMenu(key: RouteKey) {
+    setActiveFirstLevelMenuKey(key);
+
+    if (!isActiveFirstLevelMenuHasChildren.value) {
+      routerPushByKeyWithMetaQuery(key);
+    }
+  }
+
+  const secondLevelMenus = computed<App.Global.Menu[]>(
+    () => allMenus.value.find(menu => menu.key === activeFirstLevelMenuKey.value)?.children || []
   );
 
-  const isActiveFirstLevelMenuHasChildren = computed(() => {
-    if (!activeFirstLevelMenuKey.value) {
+  const activeSecondLevelMenuKey = ref('');
+
+  function setActiveSecondLevelMenuKey(key: string) {
+    activeSecondLevelMenuKey.value = key;
+  }
+
+  function getActiveSecondLevelMenuKey() {
+    const [firstLevelRouteName, level2SuffixName] = selectedKey.value.split('_');
+
+    const secondLevelRouteName = `${firstLevelRouteName}_${level2SuffixName}`;
+
+    setActiveSecondLevelMenuKey(secondLevelRouteName);
+  }
+
+  const isActiveSecondLevelMenuHasChildren = computed(() => {
+    if (!activeSecondLevelMenuKey.value) {
       return false;
     }
 
-    const findItem = allMenus.value.find(item => item.key === activeFirstLevelMenuKey.value);
+    const findItem = secondLevelMenus.value.find(item => item.key === activeSecondLevelMenuKey.value);
 
     return Boolean(findItem?.children?.length);
   });
 
+  function handleSelectSecondLevelMenu(key: RouteKey) {
+    setActiveSecondLevelMenuKey(key);
+
+    if (!isActiveSecondLevelMenuHasChildren.value) {
+      routerPushByKeyWithMetaQuery(key);
+    }
+  }
+
+  const childLevelMenus = computed<App.Global.Menu[]>(
+    () => secondLevelMenus.value.find(menu => menu.key === activeSecondLevelMenuKey.value)?.children || []
+  );
+
   watch(
     () => route.name,
     () => {
@@ -55,13 +102,19 @@ function useMixMenu() {
   );
 
   return {
-    allMenus,
     firstLevelMenus,
-    childLevelMenus,
-    isActiveFirstLevelMenuHasChildren,
     activeFirstLevelMenuKey,
     setActiveFirstLevelMenuKey,
-    getActiveFirstLevelMenuKey
+    isActiveFirstLevelMenuHasChildren,
+    handleSelectFirstLevelMenu,
+    getActiveFirstLevelMenuKey,
+    secondLevelMenus,
+    activeSecondLevelMenuKey,
+    setActiveSecondLevelMenuKey,
+    isActiveSecondLevelMenuHasChildren,
+    handleSelectSecondLevelMenu,
+    getActiveSecondLevelMenuKey,
+    childLevelMenus
   };
 }
 

src/layouts/modules/global-menu/components/first-level-menu.vue

@@ -3,6 +3,7 @@ import { computed } from 'vue';
 import { createReusableTemplate } from '@vueuse/core';
 import { SimpleScrollbar } from '@sa/materials';
 import { transformColorWithOpacity } from '@sa/color';
+import type { RouteKey } from '@elegant-router/types';
 
 defineOptions({
   name: 'FirstLevelMenu'
@@ -20,7 +21,7 @@ interface Props {
 const props = defineProps<Props>();
 
 interface Emits {
-  (e: 'select', menu: App.Global.Menu): boolean;
+  (e: 'select', menuKey: RouteKey): boolean;
   (e: 'toggleSiderCollapse'): void;
 }
 
@@ -47,8 +48,8 @@ const selectedBgColor = computed(() => {
   return darkMode ? dark : light;
 });
 
-function handleClickMixMenu(menu: App.Global.Menu) {
-  emit('select', menu);
+function handleClickMixMenu(menuKey: RouteKey) {
+  emit('select', menuKey);
 }
 
 function toggleSiderCollapse() {
@@ -88,7 +89,7 @@ function toggleSiderCollapse() {
         :icon="menu.icon"
         :active="menu.key === activeMenuKey"
         :is-mini="siderCollapse"
-        @click="handleClickMixMenu(menu)"
+        @click="handleClickMixMenu(menu.routeKey)"
       />
     </SimpleScrollbar>
     <MenuToggler

src/layouts/modules/global-menu/index.vue

@@ -5,6 +5,7 @@ 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 VerticalHybridHeaderFirst from './modules/vertical-hybrid-header-first.vue';
 import HorizontalMenu from './modules/horizontal-menu.vue';
 import TopHybridSidebarFirst from './modules/top-hybrid-sidebar-first.vue';
 import TopHybridHeaderFirst from './modules/top-hybrid-header-first.vue';
@@ -20,6 +21,7 @@ const activeMenu = computed(() => {
   const menuMap: Record<UnionKey.ThemeLayoutMode, Component> = {
     vertical: VerticalMenu,
     'vertical-mix': VerticalMixMenu,
+    'vertical-hybrid-header-first': VerticalHybridHeaderFirst,
     horizontal: HorizontalMenu,
     'top-hybrid-sidebar-first': TopHybridSidebarFirst,
     'top-hybrid-header-first': TopHybridHeaderFirst

src/layouts/modules/global-menu/modules/top-hybrid-header-first.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
-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';
@@ -11,31 +10,17 @@ import { useRouterPush } from '@/hooks/common/router';
 import { useMenu, useMixMenuContext } from '../../../context';
 
 defineOptions({
-  name: 'ReversedHorizontalMixMenu'
+  name: 'TopHybridHeaderFirst'
 });
 
 const route = useRoute();
 const appStore = useAppStore();
 const themeStore = useThemeStore();
 const routeStore = useRouteStore();
 const { routerPushByKeyWithMetaQuery } = useRouterPush();
-const {
-  firstLevelMenus,
-  childLevelMenus,
-  activeFirstLevelMenuKey,
-  setActiveFirstLevelMenuKey,
-  isActiveFirstLevelMenuHasChildren
-} = useMixMenuContext();
+const { firstLevelMenus, secondLevelMenus, activeFirstLevelMenuKey, handleSelectFirstLevelMenu } = useMixMenuContext();
 const { selectedKey } = useMenu();
 
-function handleSelectMixMenu(key: RouteKey) {
-  setActiveFirstLevelMenuKey(key);
-
-  if (!isActiveFirstLevelMenuHasChildren.value) {
-    routerPushByKeyWithMetaQuery(key);
-  }
-}
-
 const expandedKeys = ref<string[]>([]);
 
 function updateExpandedKeys() {
@@ -63,7 +48,7 @@ watch(
       :options="firstLevelMenus"
       :indent="18"
       responsive
-      @update:value="handleSelectMixMenu"
+      @update:value="handleSelectFirstLevelMenu"
     />
   </Teleport>
   <Teleport :to="`#${GLOBAL_SIDER_MENU_ID}`">
@@ -75,7 +60,7 @@ watch(
         :collapsed="appStore.siderCollapse"
         :collapsed-width="themeStore.sider.collapsedWidth"
         :collapsed-icon-size="22"
-        :options="childLevelMenus"
+        :options="secondLevelMenus"
         :indent="18"
         @update:value="routerPushByKeyWithMetaQuery"
       />

src/layouts/modules/global-menu/modules/top-hybrid-sidebar-first.vue

@@ -7,43 +7,35 @@ import FirstLevelMenu from '../components/first-level-menu.vue';
 import { useMenu, useMixMenuContext } from '../../../context';
 
 defineOptions({
-  name: 'HorizontalMixMenu'
+  name: 'TopHybridSidebarFirst'
 });
 
 const appStore = useAppStore();
 const themeStore = useThemeStore();
 const { routerPushByKeyWithMetaQuery } = useRouterPush();
-const { allMenus, childLevelMenus, activeFirstLevelMenuKey, setActiveFirstLevelMenuKey } = useMixMenuContext();
+const { firstLevelMenus, secondLevelMenus, activeFirstLevelMenuKey, handleSelectFirstLevelMenu } = useMixMenuContext();
 const { selectedKey } = useMenu();
-
-function handleSelectMixMenu(menu: App.Global.Menu) {
-  setActiveFirstLevelMenuKey(menu.key);
-
-  if (!menu.children?.length) {
-    routerPushByKeyWithMetaQuery(menu.routeKey);
-  }
-}
 </script>
 
 <template>
   <Teleport :to="`#${GLOBAL_HEADER_MENU_ID}`">
     <NMenu
       mode="horizontal"
       :value="selectedKey"
-      :options="childLevelMenus"
+      :options="secondLevelMenus"
       :indent="18"
       responsive
       @update:value="routerPushByKeyWithMetaQuery"
     />
   </Teleport>
   <Teleport :to="`#${GLOBAL_SIDER_MENU_ID}`">
     <FirstLevelMenu
-      :menus="allMenus"
+      :menus="firstLevelMenus"
       :active-menu-key="activeFirstLevelMenuKey"
       :sider-collapse="appStore.siderCollapse"
       :dark-mode="themeStore.darkMode"
       :theme-color="themeStore.themeColor"
-      @select="handleSelectMixMenu"
+      @select="handleSelectFirstLevelMenu"
       @toggle-sider-collapse="appStore.toggleSiderCollapse"
     />
   </Teleport>