feat: autoActivateChild support more layout mode
#5148
Conversation
|
|
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
packages/effects/layouts/src/basic/layout.vueOops! Something went wrong! :( ESLint: 9.16.0 Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/node_modules/@vben/eslint-config/dist/index.mjs' imported from /eslint.config.mjs WalkthroughThis pull request introduces enhancements to the menu interaction and navigation system across multiple files in the layouts package. The changes focus on improving menu functionality by adding a new Changes
Sequence DiagramsequenceDiagram
participant User
participant Menu
participant Layout
participant Navigation
User->>Menu: Open menu item
Menu->>Layout: Emit 'open' event
Layout->>Navigation: Handle menu open
Navigation->>Navigation: Update active submenu
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
packages/effects/layouts/src/basic/menu/use-mixed-menu.ts (2)
18-19: Add JSDoc comment for defaultSubMapWhile the Chinese comment explains the purpose, adding a JSDoc comment would improve documentation consistency and maintainability.
+/** Map to track the last activated submenu under each top-level menu */ const defaultSubMap = new Map<string, string>();
99-108: Add parameter validation to handleMenuOpenThe function should validate its parameters to ensure robust operation.
const handleMenuOpen = (key: string, parentsPath: string[]) => { + if (!key || !Array.isArray(parentsPath)) { + return; + } if (parentsPath.length <= 1 && preferences.sidebar.autoActivateChild) { navigation( defaultSubMap.has(key) ? (defaultSubMap.get(key) as string) : key, ); } };packages/effects/layouts/src/basic/menu/menu.vue (1)
25-27: Add tests for the new menu open functionality.Consider adding unit tests to verify:
- The
handleMenuOpenfunction correctly emits events with the expected payload- The menu path tracking works correctly in different layout modes
Would you like me to help create a test suite for this new functionality?
Also applies to: 40-41
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
packages/effects/layouts/src/basic/layout.vue(2 hunks)packages/effects/layouts/src/basic/menu/menu.vue(2 hunks)packages/effects/layouts/src/basic/menu/use-mixed-menu.ts(4 hunks)packages/effects/layouts/src/widgets/preferences/blocks/layout/sidebar.vue(1 hunks)
🔇 Additional comments (7)
packages/effects/layouts/src/widgets/preferences/blocks/layout/sidebar.vue (1)
46-50: LGTM: Enhanced layout support for autoActivateChild
The disabled condition has been expanded to support additional layout modes ('sidebar-mixed-nav', 'mixed-nav', 'sidebar-nav'), making the autoActivateChild feature more versatile across different navigation configurations.
packages/effects/layouts/src/basic/menu/use-mixed-menu.ts (2)
90-96: LGTM: Enhanced menu selection logic
The updated logic properly handles submenu activation when autoActivateChild is enabled, using defaultSubMap to restore the last active submenu state.
130-131: LGTM: Route change handling
The watch logic correctly updates the defaultSubMap when the route changes, maintaining the submenu state.
packages/effects/layouts/src/basic/layout.vue (1)
106-106: LGTM: Clean integration of menu open functionality
The handleMenuOpen function is properly integrated with the LayoutMenu component through the @OPEN event, maintaining consistent menu behavior across the application.
Also applies to: 264-264
packages/effects/layouts/src/basic/menu/menu.vue (3)
17-17: LGTM! Well-typed event emission declaration.
The new open event with [string, string[]] signature provides type safety and clear contract for menu path hierarchy tracking.
25-27: LGTM! Clean and focused event handler implementation.
The handleMenuOpen function follows single responsibility principle by simply forwarding the menu state to parent components.
40-41: Verify Menu component contract for the open event.
The event binding looks correct, but we should verify that the underlying Menu component from @vben-core/menu-ui properly emits this event with the expected payload structure.
✅ Verification successful
Event contract for Menu component is properly implemented
The verification shows that the open event is correctly defined in the Menu component (packages/@core/ui-kit/menu-ui/src/components/menu.vue). The component explicitly declares the event contract in its emits:
const emit = defineEmits<{
close: [string, string[]];
open: [string, string[]];
select: [string, string[]];
}>();The event is emitted with the expected payload structure (path and parent paths) in the openMenu method:
emit('open', path, parentPaths);🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify the Menu component's open event implementation
# Check the Menu component's implementation
ast-grep --pattern 'defineEmits<{
$$$
open: [$$$]
$$$
}>'
# Look for existing usages of the open event
rg -l "emit\(['\"](open)['\"]" --type ts
Length of output: 112
Script:
#!/bin/bash
# Let's try different approaches to verify the Menu component's events
# Search for Menu component definition and its emits
ast-grep --pattern 'const emit = defineEmits<{$$$}>'
# Look for direct emit calls for 'open' event
rg "emit('open'" -A 2
# Look for event definitions in the Menu component
rg "emits.*open" -A 2
# Search for Menu component props and setup
ast-grep --pattern 'defineComponent({
$$$
emits: [$$$],
$$$
})'
# Check for any documentation or type definitions related to Menu events
fd "menu" --type f --exec rg "open.*event" -A 2 {}
Length of output: 551
Script:
#!/bin/bash
# Let's try to find the Menu component implementation and its event handling
# Look for Menu component file
fd -t f "menu.vue|Menu.vue"
# Search for emit patterns with proper escaping
rg "emit\([\'\"]open" -A 2
# Look for event definitions in menu-related files
fd -t f "menu|Menu" --exec rg "emits.*=.*\[.*open" {}
# Check TypeScript interfaces or types related to menu events
fd -t f -e ts "menu|Menu" --exec rg "interface.*Menu.*Props|type.*Menu.*Props" -A 5 {}
# Look for documentation of menu events
fd -t f "README|readme" --exec rg -i "menu.*events?|events?.*menu" -A 3 {}
Length of output: 1305
Script:
#!/bin/bash
# Let's examine the menu component from @core/ui-kit/menu-ui since it's likely the base component
# Check the content of the main menu component
cat packages/@core/ui-kit/menu-ui/src/components/menu.vue
# Also check the normal-menu component as it might contain the event definitions
cat packages/@core/ui-kit/menu-ui/src/components/normal-menu/normal-menu.vue
# Look for any event-related type definitions in the menu-ui package
fd -t f -e ts . packages/@core/ui-kit/menu-ui/src --exec rg "type.*Events|interface.*Events" -A 5 {}
# Search for emit statements with correct escaping
rg -l "emit\\(['\"](open)" packages/@core/ui-kit/menu-ui/src
Length of output: 25167
Description
点击菜单时自动激活子菜单支持更多的页面布局（除顶部菜单布局以外）。
Type of change
Please delete options that are not relevant.
pnpm-lock.yamlunless you introduce a new test example.Checklist
pnpm run docs:devcommand.pnpm test.feat:,fix:,perf:,docs:, orchore:.Summary by CodeRabbit
New Features
Bug Fixes
Documentation