feat: tabbar support max count limit #5490
Conversation
|
WalkthroughThis pull request introduces a new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant TabbarUI
participant Store
participant Preferences
User->>TabbarUI: Adjust max tab count setting
TabbarUI->>Preferences: Update maxCount preference
TabbarUI->>Store: Trigger addTab operation
Store->>Preferences: Retrieve current maxCount value
Store->>Store: Check if tab count exceeds maxCount
Store->>Store: Close the oldest non-affixed tab if needed
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
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/widgets/preferences/blocks/layout/tabbar.vueOops! Something went wrong! :( ESLint: 9.19.0 Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/node_modules/@vben/eslint-config/dist/index.mjs' imported from /eslint.config.mjs packages/effects/layouts/src/widgets/preferences/blocks/number-field-item.vueOops! Something went wrong! :( ESLint: 9.19.0 Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/node_modules/@vben/eslint-config/dist/index.mjs' imported from /eslint.config.mjs packages/@core/preferences/src/config.tsOops! Something went wrong! :( ESLint: 9.19.0 Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/node_modules/@vben/eslint-config/dist/index.mjs' imported from /eslint.config.mjs
Tip 🌐 Web search-backed reviews and chat
✨ Finishing Touches
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 (2)
packages/@core/preferences/src/types.ts (1)
171-172: Consider adding English translation to JSDoc comment.The JSDoc comment is currently only in Chinese. Consider adding an English translation for consistency with other comments in the codebase.
- /** 限制最大数量 */ + /** + * @zh_CN 限制最大数量 + * @en_US Maximum number of tabs allowed + */ maxCount: number;packages/stores/src/modules/tabbar.ts (1)
111-134: Consider refactoring the tab closing logic.While the implementation is functionally correct, the tab closing logic could be improved for better maintainability and reusability.
Consider extracting the tab closing logic into a separate method since it's used in multiple places:
+ private _closeFirstTab(predicate: (tab: TabDefinition) => boolean) { + const index = this.tabs.findIndex(predicate); + if (index !== -1) { + this.tabs.splice(index, 1); + } + } addTab(routeTab: TabDefinition) { // ... existing code ... if (maxNumOfOpenTab > 0 && this.tabs.filter((tab) => tab.name === routeTab.name).length >= maxNumOfOpenTab) { - const index = this.tabs.findIndex((item) => item.name === routeTab.name); - index !== -1 && this.tabs.splice(index, 1); + this._closeFirstTab((item) => item.name === routeTab.name); } else if (maxCount > 0 && this.tabs.length >= maxCount) { - const index = this.tabs.findIndex( - (item) => !Reflect.has(item.meta, 'affixTab') || !item.meta.affixTab - ); - index !== -1 && this.tabs.splice(index, 1); + this._closeFirstTab((item) => !Reflect.has(item.meta, 'affixTab') || !item.meta.affixTab); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snapis excluded by!**/*.snappnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (9)
packages/@core/preferences/src/config.ts(1 hunks)packages/@core/preferences/src/types.ts(1 hunks)packages/effects/layouts/src/widgets/preferences/blocks/layout/tabbar.vue(3 hunks)packages/effects/layouts/src/widgets/preferences/blocks/number-field-item.vue(2 hunks)packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue(2 hunks)packages/locales/src/langs/en-US/preferences.json(1 hunks)packages/locales/src/langs/zh-CN/preferences.json(1 hunks)packages/stores/package.json(1 hunks)packages/stores/src/modules/tabbar.ts(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: Check (windows-latest)
- GitHub Check: Check (ubuntu-latest)
- GitHub Check: Test (windows-latest)
- GitHub Check: Test (ubuntu-latest)
- GitHub Check: post-update (windows-latest)
- GitHub Check: Lint (windows-latest)
- GitHub Check: Lint (ubuntu-latest)
- GitHub Check: post-update (ubuntu-latest)
🔇 Additional comments (12)
packages/effects/layouts/src/widgets/preferences/blocks/number-field-item.vue (2)
26-26: LGTM! Props definition is well-structured.The new
tipprop is properly defined with correct typing and default value.Also applies to: 31-31
52-63: LGTM! Tooltip implementation is robust.The tooltip implementation elegantly handles both slot content and prop-based content, with proper support for multi-line text through line splitting.
packages/@core/preferences/src/config.ts (1)
83-83: Clarify the meaning of maxCount: 0.The default value of 0 for
maxCountshould be documented to clarify whether it means unlimited tabs or no tabs allowed. This is especially important since the UI enforces a range of 0-30.Please add a comment explaining the behavior when maxCount is 0. For example:
+ /** Maximum number of tabs allowed (0 means unlimited) */ maxCount: 0,packages/effects/layouts/src/widgets/preferences/blocks/layout/tabbar.vue (2)
8-8: LGTM! Component import and model definition are correct.The NumberFieldItem component is properly imported and the tabbarMaxCount model is correctly defined.
Also applies to: 26-26
59-68: LGTM! NumberFieldItem implementation is well-configured.The component is properly configured with:
- Appropriate min (0) and max (30) limits
- Sensible step value (5)
- Correct disable binding
- Proper translations for label and tooltip
packages/stores/src/modules/tabbar.ts (1)
7-7: LGTM: New dependency properly imported.The import of preferences from @vben-core/preferences is correctly added to support the new tab limit feature.
packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue (2)
119-119: LGTM: Model properly defined.The tabbarMaxCount model is correctly defined with the appropriate number type.
369-369: LGTM: Binding correctly implemented.The v-model binding for tabbar-max-count is properly added to the Tabbar component.
packages/stores/package.json (1)
23-23: LGTM: Dependency properly added.The @vben-core/preferences dependency is correctly added with workspace reference.
packages/locales/src/langs/zh-CN/preferences.json (1)
65-66: LGTM: Clear and comprehensive localization entries.The localization entries are well-written with:
- Clear label for the maximum tab count setting
- Comprehensive tooltip explaining the behavior when the limit is exceeded
packages/locales/src/langs/en-US/preferences.json (2)
65-65: New 'maxCount' Property Addition
The addition of the"maxCount": "Max Count of Tabs"key clearly labels the configurable maximum number of allowed tabs. This entry aligns with the PR objective to enforce a tab limit. Ensure that the corresponding default values and validations in the application logic and type definitions reflect its intended behavior.
66-66: Detailed Tooltip for Tab Count Limit
The"maxCountTip"entry provides a comprehensive explanation: it informs users that exceeding the tab limit will close the oldest tab and that setting the value to 0 disables count checking. The inclusion of escaped newline characters (\n) aids in rendering a multi-line tooltip, enhancing readability. Verify that the tooltip style and punctuation are consistent with other similar entries.
Description
标签栏允许设置最大标签数
close #5489
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