fix: 布局为双列菜单或者水平模式下， 一级菜单高亮问题 (vbenjs#5870)

Co-authored-by: 王泳超 <[email protected]>

Author: wyc001122

packages/@core/ui-kit/menu-ui/src/components/menu.vue

@@ -23,7 +23,6 @@ import {
 
 import { useNamespace } from '@vben-core/composables';
 import { Ellipsis } from '@vben-core/icons';
-import { isHttpUrl } from '@vben-core/shared/utils';
 
 import { useResizeObserver } from '@vueuse/core';
 
@@ -248,9 +247,6 @@ function handleMenuItemClick(data: MenuItemClicked) {
   if (!path || !parentPaths) {
     return;
   }
-  if (!isHttpUrl(path)) {
-    activePath.value = path;
-  }
 
   emit('select', path, parentPaths);
 }

packages/effects/layouts/src/basic/menu/use-extra-menu.ts

@@ -13,7 +13,7 @@ import { useNavigation } from './use-navigation';
 
 function useExtraMenu(useRootMenus?: ComputedRef<MenuRecordRaw[]>) {
   const accessStore = useAccessStore();
-  const { navigation } = useNavigation();
+  const { navigation, willOpenedByWindow } = useNavigation();
 
   const menus = computed(() => useRootMenus?.value ?? accessStore.accessMenus);
 
@@ -33,11 +33,15 @@ function useExtraMenu(useRootMenus?: ComputedRef<MenuRecordRaw[]>) {
    * @param menu
    */
   const handleMixedMenuSelect = async (menu: MenuRecordRaw) => {
-    extraMenus.value = menu?.children ?? [];
-    extraActiveMenu.value = menu.parents?.[parentLevel.value] ?? menu.path;
-    const hasChildren = extraMenus.value.length > 0;
+    const _extraMenus = menu?.children ?? [];
+    const hasChildren = _extraMenus.length > 0;
+
+    if (!willOpenedByWindow(menu.path)) {
+      extraMenus.value = _extraMenus ?? [];
+      extraActiveMenu.value = menu.parents?.[parentLevel.value] ?? menu.path;
+      sidebarExtraVisible.value = hasChildren;
+    }
 
-    sidebarExtraVisible.value = hasChildren;
     if (!hasChildren) {
       await navigation(menu.path);
     } else if (preferences.sidebar.autoActivateChild) {

packages/effects/layouts/src/basic/menu/use-mixed-menu.ts

@@ -10,7 +10,7 @@ import { findRootMenuByPath } from '@vben/utils';
 import { useNavigation } from './use-navigation';
 
 function useMixedMenu() {
-  const { navigation } = useNavigation();
+  const { navigation, willOpenedByWindow } = useNavigation();
   const accessStore = useAccessStore();
   const route = useRoute();
   const splitSideMenus = ref<MenuRecordRaw[]>([]);
@@ -89,11 +89,15 @@ function useMixedMenu() {
       navigation(key);
       return;
     }
-
     const rootMenu = menus.value.find((item) => item.path === key);
-    rootMenuPath.value = rootMenu?.path ?? '';
-    splitSideMenus.value = rootMenu?.children ?? [];
-    if (splitSideMenus.value.length === 0) {
+    const _splitSideMenus = rootMenu?.children ?? [];
+
+    if (!willOpenedByWindow(key)) {
+      rootMenuPath.value = rootMenu?.path ?? '';
+      splitSideMenus.value = _splitSideMenus;
+    }
+
+    if (_splitSideMenus.length === 0) {
       navigation(key);
     } else if (rootMenu && preferences.sidebar.autoActivateChild) {
       navigation(

packages/effects/layouts/src/basic/menu/use-navigation.ts

@@ -29,7 +29,19 @@ function useNavigation() {
     }
   };
 
-  return { navigation };
+  const willOpenedByWindow = (path: string) => {
+    const route = routeMetaMap.get(path);
+    const { openInNewWindow = false } = route?.meta ?? {};
+    if (isHttpUrl(path)) {
+      return true;
+    } else if (openInNewWindow) {
+      return true;
+    } else {
+      return false;
+    }
+  };
+
+  return { navigation, willOpenedByWindow };
 }
 
 export { useNavigation };