feat(projects): hybrid layout mode auto select first deepest child menu #862
Conversation
There was a problem hiding this comment.
Pull request overview
This PR implements an auto-select feature for hybrid layout modes that automatically navigates to the deepest child menu when a first-level menu is clicked. The feature supports three hybrid layout modes: vertical-hybrid-header-first, top-hybrid-sidebar-first, and top-hybrid-header-first. Additionally, it fixes an issue where tabs in the vertical-hybrid-header-first layout were not properly activating the left sidebar menu.
Key Changes:
- Added new
autoSelectFirstMenuboolean setting with localization support in English and Chinese - Implemented deepest menu selection logic that recursively finds and navigates to the first child at the deepest level
- Updated layout components to use the new auto-selection behavior with appropriate fallbacks when disabled
Reviewed changes
Copilot reviewed 8 out of 9 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/typings/app.d.ts | Added type definitions for the new autoSelectFirstMenu setting and its localization keys |
| src/theme/settings.ts | Added default value (false) for the new autoSelectFirstMenu setting |
| src/locales/langs/zh-cn.ts | Added Chinese translations for the auto-select menu feature |
| src/locales/langs/en-us.ts | Added English translations for the auto-select menu feature |
| src/layouts/modules/theme-drawer/modules/layout/modules/sider-settings.vue | Added UI toggle for the auto-select setting, visible only in hybrid layout modes |
| src/layouts/modules/global-menu/modules/vertical-hybrid-header-first.vue | Implemented conditional logic to handle menu selection based on the auto-select setting |
| src/layouts/modules/global-menu/modules/top-hybrid-sidebar-first.vue | Integrated auto-select functionality for sidebar-first hybrid layout |
| src/layouts/modules/global-menu/modules/top-hybrid-header-first.vue | Integrated auto-select functionality for header-first hybrid layout |
| src/layouts/modules/global-menu/context/index.ts | Core implementation of deepest menu detection and navigation logic, plus watch handler fix for child menu activation |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| () => { | ||
| getActiveFirstLevelMenuKey(); | ||
| // if there are child level menus, get the active second level menu key | ||
| if (hasChildLevelMenus) { |
There was a problem hiding this comment.
hasChildLevelMenus is a computed ref but is being used without .value. This should be hasChildLevelMenus.value to properly access the boolean value.
| if (hasChildLevelMenus) { | |
| if (hasChildLevelMenus.value) { |
| mixChildMenuWidth: 'Mix Child Menu Width', | ||
| autoSelectFirstMenu: 'Auto Select First Submenu', | ||
| autoSelectFirstMenuTip: | ||
| 'When the first level menu is clicked, the first submenu is automatically selected and navigated to the deepest level' |
There was a problem hiding this comment.
Grammar issue: "the first level menu is clicked" should be "a first-level menu is clicked" for better clarity and consistency with naming conventions.
| 'When the first level menu is clicked, the first submenu is automatically selected and navigated to the deepest level' | |
| 'When a first-level menu is clicked, the first submenu is automatically selected and navigated to the deepest level' |
1 participant
左侧混合-顶部优先,顶部混合-侧边优先,顶部混合-顶部优先左侧混合-顶部优先布局，tab 选中后无法激活左侧菜单#855