chore: 新增是否开启首选项导航栏（外观、布局、快捷键、通用）吸顶效果，优化部分样式更细腻 #6804
Conversation
zouawen
requested review from
anncwb,
jinmao88,
mynetfan and
vince292007
as code owners
|
WalkthroughAdds a new boolean preference enableStickyPreferencesNavigationBar, wires it into the preferences drawer via a model and UI controls (Pin/PinOff), applies sticky behavior to the segmented tabs header, updates segmented/tab styles, and introduces related i18n strings. Minor presentational tweaks in theme preview and tabs indicator. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant Drawer as PreferencesDrawer
participant Model as Model: appEnableStickyPreferencesNavigationBar
participant UI as Segmented Tabs Header
participant CSS as Sticky Styles
User->>Drawer: Click Pin/PinOff toggle
Drawer->>Model: update(value)
Note right of Model: boolean flag reflects user choice
Model-->>Drawer: v-model change
Drawer->>UI: Apply sticky class conditionally
UI->>CSS: Sticky positioning activated
CSS-->>User: Header stays fixed during scroll
alt Enabled
Note over UI,CSS: Sticky header active
else Disabled
Note over UI,CSS: Normal, non-sticky header
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![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/ui-kit/shadcn-ui/src/components/segmented/segmented.vue (1)
39-41: Consider adding explicit return type annotation.The
activeClasshelper correctly returns active styling classes. For improved type safety, consider adding an explicit return type annotation.Apply this diff:
-function activeClass(tab: string): string[] { +function activeClass(tab: string): string[] { return tab === activeTab.value ? ['!font-bold', 'text-primary'] : []; }Note: The suggested diff shows the same signature, but emphasizes that the return type
string[]is already present. If it's missing in the actual code, add it.packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue (1)
482-488: Clarify the magic number offset value.The sticky positioning uses
top: -12px, which appears to be a magic number. Consider documenting why this specific offset is needed or using a CSS variable for maintainability.If the offset compensates for specific padding/margin, consider adding a comment:
<style scoped> :deep(.sticky-tabs-header [role='tablist']) { position: sticky; + /* Offset to account for drawer content padding */ top: -12px; z-index: 10; } </style>Additionally, verify that
z-index: 10doesn't conflict with other elements in the drawer (e.g., the reset button badge uses z-index: 10 on line 259).
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
packages/@core/preferences/src/config.ts(1 hunks)packages/@core/preferences/src/types.ts(1 hunks)packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue(1 hunks)packages/@core/ui-kit/shadcn-ui/src/components/segmented/tabs-indicator.vue(1 hunks)packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue(1 hunks)packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue(4 hunks)packages/locales/src/langs/en-US/preferences.json(1 hunks)packages/locales/src/langs/zh-CN/preferences.json(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Check (windows-latest)
- GitHub Check: Check (ubuntu-latest)
- GitHub Check: post-update (windows-latest)
- GitHub Check: post-update (ubuntu-latest)
🔇 Additional comments (13)
packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue (2)
137-137: LGTM! Spacing refinement looks good.The margin and padding adjustments from
mx-10/px-10tomx-9/px-9subtly refine the spacing for the theme preview blocks.Also applies to: 141-141
144-144: Verify z-index reduction in built-in theme preview
The UserRoundPen icon’s z-index was changed fromz-10to non-standardz-1; confirm this doesn’t cause the icon to be hidden behind other elements in the preview.packages/@core/preferences/src/types.ts (1)
62-65: LGTM! New property added correctly.The
enableStickyPreferencesNavigationBarboolean property is properly defined with a descriptive JSDoc comment and positioned logically afterenableRefreshToken.packages/locales/src/langs/zh-CN/preferences.json (1)
4-5: LGTM! Localization keys added correctly.The new Chinese translations for enabling/disabling the sticky preferences navigation bar are clear and appropriately positioned.
packages/@core/ui-kit/shadcn-ui/src/components/segmented/tabs-indicator.vue (1)
26-26: LGTM! Padding refinement looks good.The adjustment from
pr-1topr-0.5subtly refines the right padding for the tabs indicator, aligning with the overall styling improvements in this PR.packages/@core/preferences/src/config.ts (1)
25-25: LGTM! Default value set appropriately.The new
enableStickyPreferencesNavigationBarproperty defaults totrue, enabling the sticky navigation bar by default. This provides the enhanced navigation experience out of the box while remaining user-configurable via the preferences UI.packages/locales/src/langs/en-US/preferences.json (1)
4-5: LGTM! English translations added correctly.The new locale keys for enabling/disabling the sticky preferences navigation bar are clear and properly formatted, matching the structure of the Chinese translations.
packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue (1)
46-49: LGTM! Active tab styling enhancement looks good.The addition of the
activeClasshelper and its binding toTabsTriggereffectively provides visual feedback for the active tab. The outline classes onTabsListenhance the overall segmented control appearance.Also applies to: 52-56
packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue (5)
19-19: LGTM! Icon imports added correctly.The
PinandPinOfficons are properly imported for the sticky navigation bar toggle feature.
72-74: LGTM! Model declaration is correct.The
appEnableStickyPreferencesNavigationBarmodel is properly defined usingdefineModel<boolean>, maintaining consistency with other preference models in the component.
247-247: LGTM! Border removal improves visual consistency.Removing the border (
!border-0) from the Drawer header creates a cleaner appearance for the compact layout.
255-281: LGTM! Toggle UI implementation is intuitive.The sticky navigation bar toggle with icon swap (PinOff when enabled, Pin when disabled) and dynamic tooltip text provides clear user feedback. The implementation correctly binds to the model and updates the state on click.
285-292: LGTM! Conditional sticky class binding is correct.The
sticky-tabs-headerclass is conditionally applied toVbenSegmentedbased on theappEnableStickyPreferencesNavigationBarstate, enabling the sticky behavior when the feature is enabled.
2 participants
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
UI/Style
Localization