diff --git a/packages/effects/layouts/src/basic/layout.vue b/packages/effects/layouts/src/basic/layout.vue index 5361177cf79..329508a1a40 100644 --- a/packages/effects/layouts/src/basic/layout.vue +++ b/packages/effects/layouts/src/basic/layout.vue @@ -103,6 +103,7 @@ const { const { handleMenuSelect, + handleMenuOpen, headerActive, headerMenus, sidebarActive, @@ -260,6 +261,7 @@ const headerSlots = computed(() => { :rounded="isMenuRounded" :theme="sidebarTheme" mode="vertical" + @open="handleMenuOpen" @select="handleMenuSelect" /> diff --git a/packages/effects/layouts/src/basic/menu/menu.vue b/packages/effects/layouts/src/basic/menu/menu.vue index 11c34e19856..812813a6c2e 100644 --- a/packages/effects/layouts/src/basic/menu/menu.vue +++ b/packages/effects/layouts/src/basic/menu/menu.vue @@ -14,12 +14,17 @@ const props = withDefaults(defineProps(), { }); const emit = defineEmits<{ + open: [string, string[]]; select: [string, string?]; }>(); function handleMenuSelect(key: string) { emit('select', key, props.mode); } + +function handleMenuOpen(key: string, path: string[]) { + emit('open', key, path); +} diff --git a/packages/effects/layouts/src/basic/menu/use-mixed-menu.ts b/packages/effects/layouts/src/basic/menu/use-mixed-menu.ts index ca78fc0dce1..57a4df0a1c9 100644 --- a/packages/effects/layouts/src/basic/menu/use-mixed-menu.ts +++ b/packages/effects/layouts/src/basic/menu/use-mixed-menu.ts @@ -15,7 +15,8 @@ function useMixedMenu() { const route = useRoute(); const splitSideMenus = ref([]); const rootMenuPath = ref(''); - + /** 记录当前顶级菜单下哪个子菜单最后激活 */ + const defaultSubMap = new Map(); const { isMixedNav } = usePreferences(); const needSplit = computed( @@ -86,6 +87,25 @@ function useMixedMenu() { splitSideMenus.value = rootMenu?.children ?? []; if (splitSideMenus.value.length === 0) { navigation(key); + } else if (rootMenu && preferences.sidebar.autoActivateChild) { + navigation( + defaultSubMap.has(rootMenu.path) + ? (defaultSubMap.get(rootMenu.path) as string) + : rootMenu.path, + ); + } + }; + + /** + * 侧边菜单展开事件 + * @param key 路由路径 + * @param parentsPath 父级路径 + */ + const handleMenuOpen = (key: string, parentsPath: string[]) => { + if (parentsPath.length <= 1 && preferences.sidebar.autoActivateChild) { + navigation( + defaultSubMap.has(key) ? (defaultSubMap.get(key) as string) : key, + ); } }; @@ -107,6 +127,8 @@ function useMixedMenu() { (path) => { const currentPath = (route?.meta?.activePath as string) ?? path; calcSideMenus(currentPath); + if (rootMenuPath.value) + defaultSubMap.set(rootMenuPath.value, currentPath); }, { immediate: true }, ); @@ -118,6 +140,7 @@ function useMixedMenu() { return { handleMenuSelect, + handleMenuOpen, headerActive, headerMenus, sidebarActive, diff --git a/packages/effects/layouts/src/widgets/preferences/blocks/layout/sidebar.vue b/packages/effects/layouts/src/widgets/preferences/blocks/layout/sidebar.vue index e2eafbf5e04..dfb63229d05 100644 --- a/packages/effects/layouts/src/widgets/preferences/blocks/layout/sidebar.vue +++ b/packages/effects/layouts/src/widgets/preferences/blocks/layout/sidebar.vue @@ -43,7 +43,11 @@ const sidebarExpandOnHover = defineModel('sidebarExpandOnHover');