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

Co-authored-by: 王泳超 <wangyongchao@testor.com.cn>
This commit is contained in:
wyc001122 2025-04-05 11:04:59 +08:00 committed by GitHub
parent b0ad08dbbc
commit 384c5d7dbb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 31 additions and 15 deletions

View File

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

View File

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

View File

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

View File

@ -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 }; export { useNavigation };