fix: header-mixed layout update

vbenjs · Dec 30, 2024 · 43b71bb · 43b71bb
1 parent 2167a45
commit 43b71bb
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 25 deletions.
diff --git a/packages/effects/layouts/src/basic/layout.vue b/packages/effects/layouts/src/basic/layout.vue
@@ -114,6 +114,7 @@ const {
   headerMenus,
   sidebarActive,
   sidebarMenus,
+  mixedSidebarActive,
   mixHeaderMenus,
   sidebarVisible,
 } = useMixedMenu();
@@ -274,7 +275,7 @@ const headerSlots = computed(() => {
     </template>
     <template #mixed-menu>
       <LayoutMixedMenu
-        :active-path="extraActiveMenu"
+        :active-path="isHeaderMixedNav ? mixedSidebarActive : extraActiveMenu"
         :menus="wrapperMenus(mixHeaderMenus, false)"
         :rounded="isMenuRounded"
         :theme="sidebarTheme"

diff --git a/packages/effects/layouts/src/basic/menu/use-extra-menu.ts b/packages/effects/layouts/src/basic/menu/use-extra-menu.ts
@@ -1,6 +1,6 @@
 import type { MenuRecordRaw } from '@vben/types';
 
-import { computed, onBeforeMount, ref, watch } from 'vue';
+import { computed, nextTick, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 
 import { preferences } from '@vben/preferences';
@@ -17,7 +17,7 @@ function useExtraMenu() {
 
   /** 记录当前顶级菜单下哪个子菜单最后激活 */
   const defaultSubMap = new Map<string, string>();
-
+  const extraRootMenus = ref<MenuRecordRaw[]>([]);
   const route = useRoute();
   const extraMenus = ref<MenuRecordRaw[]>([]);
   const sidebarExtraVisible = ref<boolean>(false);
@@ -49,11 +49,13 @@ function useExtraMenu() {
    * @param menu
    * @param rootMenu
    */
-  const handleDefaultSelect = (
+  const handleDefaultSelect = async (
     menu: MenuRecordRaw,
     rootMenu?: MenuRecordRaw,
   ) => {
-    extraMenus.value = rootMenu?.children ?? [];
+    await nextTick();
+
+    extraMenus.value = rootMenu?.children ?? extraRootMenus.value ?? [];
     extraActiveMenu.value = menu.parents?.[0] ?? menu.path;
 
     if (preferences.sidebar.expandOnHover) {
@@ -65,17 +67,16 @@ function useExtraMenu() {
    * 侧边菜单鼠标移出事件
    */
   const handleSideMouseLeave = () => {
+    // const { findMenu, rootMenu, rootMenuPath } = findRootMenuByPath(
+    //   menus.value,
+    //   route.path,
+    // );
+    calcExtraMenus(route.path);
     if (preferences.sidebar.expandOnHover) {
+      sidebarExtraVisible.value = extraMenus.value.length > 0;
       return;
     }
     sidebarExtraVisible.value = false;
-
-    const { findMenu, rootMenu, rootMenuPath } = findRootMenuByPath(
-      menus.value,
-      route.path,
-    );
-    extraActiveMenu.value = rootMenuPath ?? findMenu?.path ?? '';
-    extraMenus.value = rootMenu?.children ?? [];
   };
 
   const handleMenuMouseEnter = (menu: MenuRecordRaw) => {
@@ -97,18 +98,20 @@ function useExtraMenu() {
       const subExtra = findRootMenuByPath(
         rootMenu?.children ?? [],
         currentPath,
+        1,
       );
-
-      extraActiveMenu.value =
-        subExtra.findMenu?.parents?.[1] ?? subExtra.findMenu?.path ?? '';
-      extraMenus.value =
-        (rootMenu?.children ?? []).find((m) => m.path === extraActiveMenu.value)
-          ?.children ?? [];
+      extraRootMenus.value = subExtra.rootMenu?.children ?? [];
+      extraActiveMenu.value = subExtra.rootMenuPath ?? '';
+      extraMenus.value = subExtra.rootMenu?.children ?? [];
     } else {
+      extraRootMenus.value = rootMenu?.children ?? [];
       if (rootMenuPath) defaultSubMap.set(rootMenuPath, currentPath);
       extraActiveMenu.value = rootMenuPath ?? findMenu?.path ?? '';
       extraMenus.value = rootMenu?.children ?? [];
     }
+    if (preferences.sidebar.expandOnHover) {
+      sidebarExtraVisible.value = extraMenus.value.length > 0;
+    }
   }
 
   watch(
@@ -119,11 +122,6 @@ function useExtraMenu() {
     { immediate: true },
   );
 
-  // 初始化计算侧边菜单
-  onBeforeMount(() => {
-    calcExtraMenus(route.meta?.activePath || route.path);
-  });
-
   return {
     extraActiveMenu,
     extraMenus,

diff --git a/packages/effects/layouts/src/basic/menu/use-mixed-menu.ts b/packages/effects/layouts/src/basic/menu/use-mixed-menu.ts
@@ -15,6 +15,8 @@ function useMixedMenu() {
   const route = useRoute();
   const splitSideMenus = ref<MenuRecordRaw[]>([]);
   const rootMenuPath = ref<string>('');
+  const mixedRootMenuPath = ref<string>('');
+  const mixExtraMenus = ref<MenuRecordRaw[]>([]);
   /** 记录当前顶级菜单下哪个子菜单最后激活 */
   const defaultSubMap = new Map<string, string>();
   const { isMixedNav, isHeaderMixedNav } = usePreferences();
@@ -67,6 +69,10 @@ function useMixedMenu() {
     return (route?.meta?.activePath as string) ?? route.path;
   });
 
+  const mixedSidebarActive = computed(() => {
+    return mixedRootMenuPath.value || sidebarActive.value;
+  });
+
   /**
    * 头部菜单激活路径
    */
@@ -124,6 +130,9 @@ function useMixedMenu() {
     if (!rootMenu) {
       rootMenu = menus.value.find((item) => item.path === path);
     }
+    const result = findRootMenuByPath(rootMenu?.children || [], path, 1);
+    mixedRootMenuPath.value = result.rootMenuPath ?? '';
+    mixExtraMenus.value = result.rootMenu?.children ?? [];
     rootMenuPath.value = rootMenu?.path ?? '';
     splitSideMenus.value = rootMenu?.children ?? [];
   }
@@ -151,7 +160,9 @@ function useMixedMenu() {
     headerMenus,
     sidebarActive,
     sidebarMenus,
+    mixedSidebarActive,
     mixHeaderMenus,
+    mixExtraMenus,
     sidebarVisible,
   };
 }

diff --git a/packages/utils/src/helpers/find-menu-by-path.ts b/packages/utils/src/helpers/find-menu-by-path.ts
@@ -21,9 +21,9 @@ function findMenuByPath(
  * @param menus
  * @param path
  */
-function findRootMenuByPath(menus: MenuRecordRaw[], path?: string) {
+function findRootMenuByPath(menus: MenuRecordRaw[], path?: string, level = 0) {
   const findMenu = findMenuByPath(menus, path);
-  const rootMenuPath = findMenu?.parents?.[0];
+  const rootMenuPath = findMenu?.parents?.[level];
   const rootMenu = rootMenuPath
     ? menus.find((item) => item.path === rootMenuPath)
     : undefined;