fix: 1、fix mock-data.ts; 2、Add custom watermark content; 3、Add hover animation to the header toolbar; 4、Fix the uncheck bug of the tree component; 5、The segmented component of the preference-drawer has added a fixed tabs header style; 6、input-item component has added the clear function and placeholder. #6155
Conversation
1、fix mock-data.ts; 2、Add custom watermark content; 3、Add hover animation to the header toolbar; 4、Fix the uncheck bug of the tree component; 5、The segmented component of the preference-drawer has added a fixed tabs header style; 6、input-item component has added the clear function and placeholder.
ghost
requested review from
anncwb,
vince292007,
mynetfan,
jinmao88 and
a team
as code owners
|
WalkthroughThis update introduces support for customizable watermark content in user preferences across multiple frontends, adds related localization strings, and updates the UI to allow users to input watermark text. Several UI components receive animation enhancements for better interactivity. The permissions tree logic is improved to dynamically expand based on its depth, and some mock data is corrected. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant PreferencesDrawer
participant GeneralTab
participant PreferencesStore
participant Layout
User->>PreferencesDrawer: Open preferences
PreferencesDrawer->>GeneralTab: Render general settings
User->>GeneralTab: Enable watermark
User->>GeneralTab: Enter watermark content
GeneralTab->>PreferencesStore: Update watermark enable & content
PreferencesStore->>Layout: Emit updated preferences
Layout->>Layout: Watch for changes (enable, content)
alt Watermark enabled
Layout->>Layout: Update watermark (use custom content or fallback)
else Watermark disabled
Layout->>Layout: Destroy watermark
end
Suggested reviewers
Poem
Tip ⚡️ Faster reviews with caching
Enjoy the performance boost—your workflow just got faster. ✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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/effects/layouts/src/widgets/preferences/preferences-button.vue (1)
22-40: Rotate settings icon on hover.The
:deep(.setting-button)selector correctly penetrates the scoped style boundary, and thesetting-rotatekeyframes animate the nested SVG as intended. Consider addinganimation-fill-mode: forwards;if you want the icon to maintain its rotated state after the animation completes.packages/effects/layouts/src/widgets/language-toggle.vue (1)
41-59: Add scale animation for language toggle on hover.The
language-expandkeyframes deliver a smooth scaling effect. For consistency with other components (e.g., the settings button), you might choose to standardize on using the:deepcombinator or adjust selector specificity across all icon-button animations.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (20)
apps/backend-mock/utils/mock-data.ts(3 hunks)apps/web-antd/src/layouts/basic.vue(1 hunks)apps/web-ele/src/layouts/basic.vue(1 hunks)apps/web-naive/src/layouts/basic.vue(1 hunks)packages/@core/preferences/src/config.ts(1 hunks)packages/@core/preferences/src/types.ts(1 hunks)packages/@core/ui-kit/shadcn-ui/src/components/full-screen/full-screen.vue(1 hunks)packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue(2 hunks)packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue(4 hunks)packages/effects/layouts/src/widgets/language-toggle.vue(1 hunks)packages/effects/layouts/src/widgets/preferences/blocks/general/general.vue(3 hunks)packages/effects/layouts/src/widgets/preferences/blocks/input-item.vue(2 hunks)packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue(1 hunks)packages/effects/layouts/src/widgets/preferences/preferences-button.vue(1 hunks)packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue(2 hunks)packages/effects/layouts/src/widgets/theme-toggle/theme-button.vue(3 hunks)packages/locales/src/langs/en-US/preferences.json(1 hunks)packages/locales/src/langs/zh-CN/preferences.json(1 hunks)playground/src/layouts/basic.vue(1 hunks)playground/src/views/system/role/modules/form.vue(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: post-update (ubuntu-latest)
- GitHub Check: post-update (windows-latest)
🔇 Additional comments (47)
apps/backend-mock/utils/mock-data.ts (1)
279-279: Correct parent-child relationship fixThe changes correctly align the parent IDs (
pid) of the SystemDept button actions with their actual parent menu ID (202 for SystemDept), fixing what was likely an incorrect assignment to SystemMenu (201). This ensures proper menu hierarchy and permission inheritance.Also applies to: 288-288, 297-297
playground/src/views/system/role/modules/form.vue (4)
31-31: Good addition of a reactive reference for tree depthAdding the
maxLevelreference to track permission tree depth will help dynamically adjust tree expansion.
75-75: Approve setting the max level calculationGood implementation of calculating the maximum depth level after loading permissions data, which will make the tree expansion adapt to the actual data structure.
81-93: Well-implemented recursive depth calculation functionThe
getMaxLevelfunction correctly implements a recursive tree traversal algorithm to determine the maximum depth of the permission tree structure. The implementation handles all edge cases properly.
122-122: Dynamic tree expansion based on actual data structureReplacing the likely hardcoded expansion level with the dynamically calculated
maxLevelensures the tree expands to show all relevant permissions without requiring users to manually expand deeper levels.packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue (1)
142-142: Z-index reduced from z-10 to z-1This change reduces the stacking order of the pen icon in the custom theme color selector. Ensure this doesn't cause any unintended overlap issues with other elements, though the change appears intentional to fix a potential stacking issue.
packages/@core/preferences/src/types.ts (1)
66-69: Good addition of watermarkContent propertyThis properly implements support for custom watermark content as mentioned in the PR objectives. The property is well-documented with appropriate JSDocs comments, consistent with the existing codebase style.
packages/@core/ui-kit/shadcn-ui/src/components/full-screen/full-screen.vue (2)
24-33: Nice enhancement with conditional class bindingAdding conditional classes based on the fullscreen state improves code organization and makes styling more maintainable.
36-72: Good addition of hover animationsThe hover animations provide helpful visual feedback to users. The implementation is clean with well-defined keyframes that match the actions they represent (shrink for minimize, expand for maximize).
packages/effects/layouts/src/widgets/theme-toggle/theme-button.vue (3)
164-169: Good enhancement with light theme hover animationThe sun rotation animation adds a nice interactive touch to the light theme toggle button.
183-187: Good enhancement with dark theme hover animationThe moon expansion animation provides consistent interactive feedback for the dark theme toggle.
198-220: Well-implemented animation keyframesThe keyframe definitions are clean and appropriate for their respective animations. Good choice of animation timing (0.6s) that's noticeable but not distracting.
packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue (6)
13-13: Good addition of fixedTabsHeader propThis new prop enables the sticky header functionality mentioned in the PR objectives.
19-19: Appropriate default value for fixedTabsHeaderSetting the default to
falsemaintains backward compatibility with existing usage.
41-43: Well-implemented activeClass helper functionThis helper function improves code readability by encapsulating the active tab styling logic.
45-51: Good use of computed property for conditional classesThe
fixedTabsHeaderClasscomputed property cleanly implements the conditional sticky positioning.
56-60: Good implementation of fixed tabs headerThe conditional class binding for sticky positioning is properly applied to the TabsList element.
63-67: Enhanced tab trigger stylingAdding hover effects and dynamic active classes improves the user experience with better visual feedback.
packages/locales/src/langs/en-US/preferences.json (1)
39-41: Add watermarkContent localization key.The new key
"watermarkContent"is correctly inserted after"watermark", and the JSON syntax (commas, braces) remains valid.packages/@core/preferences/src/config.ts (1)
25-27: IntroducewatermarkContentdefault preference.The new property
watermarkContent: ''aligns with the updatedAppPreferencesinterface. This default value ensures that downstream logic handling watermark content won't encounterundefined.packages/effects/layouts/src/widgets/preferences/preferences-button.vue (1)
16-18: Enable hover animation on settings button.Adding
class="setting-button"to the<VbenIconButton>provides the hook for the scoped CSS animation defined below.packages/locales/src/langs/zh-CN/preferences.json (1)
39-41: Add Chinese translation for watermark content.The
"watermarkContent": "水印文案"entry is properly added and the JSON remains syntactically correct.packages/effects/layouts/src/widgets/language-toggle.vue (1)
34-37: Hook uplanguage-buttonclass for animation.The
class="language-button"on<VbenIconButton>aligns with the CSS hover animation defined in the scoped style block below.packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue (3)
70-70: Good addition of the watermark content modelThe introduction of
appWatermarkContentmodel properly extends the preferences system to support custom watermark text, aligning with the PR objectives.
262-263: Excellent enhancement to the segmented component UIThe addition of the
fixed-tabs-headerprop to the VbenSegmented component improves the user experience by creating a sticky tabs header. This is a good implementation of the segmented component enhancement mentioned in the PR objectives.
271-271: Properly wired watermark content bindingThe
v-model:app-watermark-contentbinding correctly connects the new watermark content model with the General component, ensuring the user preference is properly synchronized.packages/effects/layouts/src/widgets/preferences/blocks/input-item.vue (2)
6-6: Good icon import for clear functionalityThe addition of the CircleX icon is necessary for the new clear functionality and is properly imported alongside the existing CircleHelp icon.
50-61: Well-implemented input enhancement with clear functionalityThe input component has been effectively enhanced with:
- A placeholder binding that improves user guidance
- A clear button that appears conditionally when text is present
- Proper positioning and styling of the clear button
This implementation aligns perfectly with the PR objective to add clear functionality and placeholder support to the input-item component.
apps/web-naive/src/layouts/basic.vue (2)
110-114: Good watermark reactivity implementationThe watcher has been appropriately enhanced to track both the watermark enable state and its content. This approach efficiently responds to changes in either property without requiring multiple watchers.
114-120: Well-designed watermark content logicThe implementation correctly:
- Uses custom content when provided by the user
- Falls back to a sensible default (username and real name) when no custom content is specified
- Maintains the existing watermark behavior
This change fully supports the custom watermark content feature mentioned in the PR objectives.
playground/src/layouts/basic.vue (2)
125-129: Consistent watermark reactivity implementationThe watcher implementation matches the approach used in other layout files, ensuring consistent behavior across different UIs. This is a good practice for maintainability.
129-135: Well-designed watermark content handlingThe implementation maintains consistency with other layouts by:
- Using custom content when provided
- Falling back to username and real name when no custom content exists
- Preserving the existing watermark toggle behavior
This consistency across layouts demonstrates a well-coordinated approach to the feature implementation.
packages/effects/layouts/src/widgets/preferences/blocks/general/general.vue (4)
5-5: Good addition of InputItem component importThis import appropriately supports the new watermark content input functionality.
16-16: Well-defined model for watermark contentThe
appWatermarkContentmodel is correctly typed as a string and uses Vue's defineModel API for two-way binding.
27-36: Good UI behavior implementation for watermark toggleThe event handler that clears watermark content when the toggle is turned off provides a good user experience by ensuring users don't have stale content when re-enabling the feature.
37-43: Well-implemented conditional watermark content inputThe conditional rendering with
v-if="appWatermark"correctly shows the input field only when needed. The component properly uses localization for both label and placeholder.apps/web-antd/src/layouts/basic.vue (2)
109-113: Efficient watch implementation for watermark propertiesWatching an object with both properties is more efficient than watching two separate values. The destructuring in the callback function makes the code clean and readable.
116-119: Good fallback mechanism for watermark contentThe implementation correctly prioritizes user-configured content while maintaining backward compatibility with a sensible default. This ensures the watermark always displays meaningful content.
apps/web-ele/src/layouts/basic.vue (2)
109-113: Consistent implementation across UI frameworksThis watch implementation matches the one in the Ant Design version, ensuring consistent behavior across different UI frameworks.
116-119: Proper watermark content handling with fallbackThe implementation follows the same pattern as in the Ant Design version, correctly prioritizing user content with a fallback to username and real name when needed.
packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue (7)
43-45: Interface enhancement improves type safetyThe addition of
idandparentIdproperties to theInnerFlattenIteminterface provides better type safety and enables more robust parent-child relationship tracking in the tree structure.
54-54: Function signature updated for parent-child trackingThe
flattenfunction now accepts aparentIdparameter which properly supports the parent-child relationship tracking.
60-68: Enhanced tree node flattening implementationThe
flattenfunction now properly captures the relationship between tree nodes by storing both the node's ID and its parent's ID, which enables more sophisticated tree operations.
72-72: Improved recursion with parent-child relationship preservationThe recursive call now correctly passes the current node's ID as the parent ID for child nodes, maintaining the hierarchical relationship throughout the tree structure.
243-243: Improved container stylingThe container styling is now more consistent with the design system, using the appropriate text color and removing padding to allow for more flexible layout control.
249-249: Enhanced header with proper visual separationAdding a border and padding to the header container creates proper visual separation when the header slot is used, improving the UI/UX of the component.
177-213:❓ Verification inconclusive
Implemented upward propagation for unchecking nodes
This new logic correctly handles the scenario where a node is unchecked by checking if it affects parent nodes. When a child is unchecked, it verifies if any siblings remain selected before deselecting the parent, which implements the expected cascading behavior for tree selections.
One potential concern is the use of
item._idat line 195, which might be a property from theFlattenedItemtype from radix-vue, but it would be good to ensure this property exists.
🏁 Script executed:
#!/bin/bash # Verify if the _id property exists in FlattenedItem type from radix-vue # Look for the definition of FlattenedItem in the codebase or node_modules rg -t ts "interface FlattenedItem" --include "*.d.ts" -A 10 -g "!node_modules" # If not found in project files, look in node_modules rg -t ts "interface FlattenedItem" --include "*.d.ts" -A 10 node_modules/radix-vueLength of output: 1049
🏁 Script executed:
#!/bin/bash # Search for FlattenedItem definition in TypeScript definition files across the repo rg -e 'interface FlattenedItem' -e 'type FlattenedItem' -g '*.d.ts' -A 10 .Length of output: 77
Verify
item._idexists on flattened nodesThe upward‐propagation logic looks correct: when unchecking a child, it ascends the parent chain and only deselects a parent if no other selected siblings remain.
One remaining concern is the use of
item._idat line 195. Please confirm that each entry inflattenData.valueactually has an_idproperty and that it corresponds to the node’s identifier. If your data usesid(or another field) instead, update this reference accordingly.
|
建议把不同的功能分开成几个pr提交 |
|
Caution No docstrings were generated. |
|
@846027729 分开提PR吧 |
1、fix mock-data.ts;
2、Add custom watermark content;
3、Add hover animation to the header toolbar;
4、Fix the uncheck bug of the tree component;
5、The segmented component of the preference-drawer has added a fixed tabs header style; 6、input-item component has added the clear function and placeholder.
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
Enhancements
UI Improvements
Bug Fixes
Localization