fix: header-mixed layout side-menu active

vbenjs · Dec 30, 2024 · 53a8d10 · 53a8d10
1 parent ff8d5ca
commit 53a8d10
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 49 deletions.
diff --git a/packages/@core/preferences/src/config.ts b/packages/@core/preferences/src/config.ts
@@ -71,7 +71,7 @@ const defaultPreferences: Preferences = {
     collapsedShowTitle: false,
     enable: true,
     expandOnHover: true,
-    extraCollapse: true,
+    extraCollapse: false,
     hidden: false,
     width: 224,
   },

diff --git a/packages/effects/layouts/src/basic/layout.vue b/packages/effects/layouts/src/basic/layout.vue
@@ -96,29 +96,28 @@ const showHeaderNav = computed(() => {
   );
 });
 
-// 侧边多列菜单
-const {
-  extraActiveMenu,
-  extraMenus,
-  handleDefaultSelect,
-  handleMenuMouseEnter,
-  handleMixedMenuSelect,
-  handleSideMouseLeave,
-  sidebarExtraVisible,
-} = useExtraMenu();
-
 const {
   handleMenuSelect,
   handleMenuOpen,
   headerActive,
   headerMenus,
   sidebarActive,
   sidebarMenus,
-  mixedSidebarActive,
   mixHeaderMenus,
   sidebarVisible,
 } = useMixedMenu();
 
+// 侧边多列菜单
+const {
+  extraActiveMenu,
+  extraMenus,
+  handleDefaultSelect,
+  handleMenuMouseEnter,
+  handleMixedMenuSelect,
+  handleSideMouseLeave,
+  sidebarExtraVisible,
+} = useExtraMenu(mixHeaderMenus);
+
 /**
  * 包装菜单，翻译菜单名称
  * @param menus 原始菜单数据
@@ -275,7 +274,7 @@ const headerSlots = computed(() => {
     </template>
     <template #mixed-menu>
       <LayoutMixedMenu
-        :active-path="isHeaderMixedNav ? mixedSidebarActive : extraActiveMenu"
+        :active-path="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, nextTick, ref, watch } from 'vue';
+import { computed, type ComputedRef, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 
 import { preferences } from '@vben/preferences';
@@ -9,11 +9,11 @@ import { findRootMenuByPath } from '@vben/utils';
 
 import { useNavigation } from './use-navigation';
 
-function useExtraMenu() {
+function useExtraMenu(useRootMenus?: ComputedRef<MenuRecordRaw[]>) {
   const accessStore = useAccessStore();
   const { navigation } = useNavigation();
 
-  const menus = computed(() => accessStore.accessMenus);
+  const menus = computed(() => useRootMenus?.value ?? accessStore.accessMenus);
 
   /** 记录当前顶级菜单下哪个子菜单最后激活 */
   const defaultSubMap = new Map<string, string>();
@@ -22,14 +22,17 @@ function useExtraMenu() {
   const extraMenus = ref<MenuRecordRaw[]>([]);
   const sidebarExtraVisible = ref<boolean>(false);
   const extraActiveMenu = ref('');
+  const parentLevel = computed(() =>
+    preferences.app.layout === 'header-mixed-nav' ? 1 : 0,
+  );
 
   /**
    * 选择混合菜单事件
    * @param menu
    */
   const handleMixedMenuSelect = async (menu: MenuRecordRaw) => {
     extraMenus.value = menu?.children ?? [];
-    extraActiveMenu.value = menu.parents?.[0] ?? menu.path;
+    extraActiveMenu.value = menu.parents?.[parentLevel.value] ?? menu.path;
     const hasChildren = extraMenus.value.length > 0;
 
     sidebarExtraVisible.value = hasChildren;
@@ -53,10 +56,8 @@ function useExtraMenu() {
     menu: MenuRecordRaw,
     rootMenu?: MenuRecordRaw,
   ) => {
-    await nextTick();
-
     extraMenus.value = rootMenu?.children ?? extraRootMenus.value ?? [];
-    extraActiveMenu.value = menu.parents?.[0] ?? menu.path;
+    extraActiveMenu.value = menu.parents?.[parentLevel.value] ?? menu.path;
 
     if (preferences.sidebar.expandOnHover) {
       sidebarExtraVisible.value = extraMenus.value.length > 0;
@@ -67,23 +68,23 @@ 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) => {
     if (!preferences.sidebar.expandOnHover) {
       const { findMenu } = findRootMenuByPath(menus.value, menu.path);
       extraMenus.value = findMenu?.children ?? [];
-      extraActiveMenu.value = menu.parents?.[0] ?? menu.path;
+      extraActiveMenu.value = menu.parents?.[parentLevel.value] ?? menu.path;
       sidebarExtraVisible.value = extraMenus.value.length > 0;
     }
   };
@@ -93,22 +94,12 @@ function useExtraMenu() {
     const { findMenu, rootMenu, rootMenuPath } = findRootMenuByPath(
       menus.value,
       currentPath,
+      parentLevel.value,
     );
-    if (preferences.app.layout === 'header-mixed-nav') {
-      const subExtra = findRootMenuByPath(
-        rootMenu?.children ?? [],
-        currentPath,
-        1,
-      );
-      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 ?? [];
-    }
+    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;
     }

diff --git a/packages/effects/layouts/src/basic/menu/use-mixed-menu.ts b/packages/effects/layouts/src/basic/menu/use-mixed-menu.ts
@@ -69,10 +69,6 @@ function useMixedMenu() {
     return (route?.meta?.activePath as string) ?? route.path;
   });
 
-  const mixedSidebarActive = computed(() => {
-    return mixedRootMenuPath.value || sidebarActive.value;
-  });
-
   /**
    * 头部菜单激活路径
    */
@@ -160,7 +156,6 @@ function useMixedMenu() {
     headerMenus,
     sidebarActive,
     sidebarMenus,
-    mixedSidebarActive,
     mixHeaderMenus,
     mixExtraMenus,
     sidebarVisible,