Feat：toolbar style improvement #755
Conversation
WalkthroughThe changes involve enhancements to layout and toolbar functionalities across multiple modules. Key additions include the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Toolbar
participant LockComponent
participant LayoutState
User->>Toolbar: Interacts with toolbar
Toolbar->>LockComponent: Triggers lock action
LockComponent->>LayoutState: Updates state
LayoutState-->>Toolbar: Reflects updated state
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 as PR comments)
Additionally, you can add 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
Outside diff range, codebase verification and nitpick comments (7)
packages/theme/light/toolbar.less (1)
9-9: Consider using consistent color formats.The variable
--ti-lowcode-toolbar-view-active-bghas been changed to an RGB format. Ensure that all color definitions in the file use the same format for consistency.packages/layout/src/composable/Layout.md (1)
43-43: Use fenced code blocks for code snippets.The document contains indented code blocks, which markdownlint flags as an issue. Use fenced code blocks (```) for better readability and compliance with markdown standards.
Apply this change to all code blocks in the document.
Also applies to: 45-45, 51-51, 53-53, 60-60, 62-62, 69-69, 71-71, 73-73, 79-79, 81-81, 85-85, 90-90, 93-93, 98-98, 110-110, 112-112, 114-114, 124-124, 126-126, 149-149
Tools
Markdownlint
43-43: Expected: fenced; Actual: indented
Code block style(MD046, code-block-style)
packages/toolbars/lock/src/Main.vue (1)
Line range hint
51-78: Consider improving error handling inlockPage.The
lockPagefunction handles errors by notifying the user. Ensure that the error messages are user-friendly and consider logging errors for debugging purposes.packages/toolbars/breadcrumb/src/Main.vue (2)
94-95: Ensure consistent margin and cursor styles.The addition of
margin-rightandcursorstyles should be consistent with other elements to maintain a cohesive design.
106-108: Enhance hover state styling.The hover state for the breadcrumb title has been added. Ensure that this styling is consistent with other hover states in the application.
packages/layout/src/DesignToolbars.vue (2)
Line range hint
99-116: Review CSS for icon elements.The CSS changes for
.iconelements should be reviewed to ensure they enhance the user interface without causing layout issues.
Line range hint
132-147: Check alignment and margin adjustments.The alignment and margin changes in
.toolbar-rightshould be consistent with the overall design and not disrupt the layout.
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (2)
packages/design-core/assets/locked.svgis excluded by!**/*.svgpackages/design-core/assets/unlocked.svgis excluded by!**/*.svg
Files selected for processing (19)
- designer-demo/registry.js (3 hunks)
- packages/design-core/index.js (1 hunks)
- packages/layout/index.js (1 hunks)
- packages/layout/src/DesignPlugins.vue (7 hunks)
- packages/layout/src/DesignToolbars.vue (6 hunks)
- packages/layout/src/Main.vue (2 hunks)
- packages/layout/src/ToolbarCollapse.vue (2 hunks)
- packages/layout/src/composable/Layout.md (1 hunks)
- packages/layout/src/composable/useLayout.js (5 hunks)
- packages/plugins/help/src/HelpIcon.vue (3 hunks)
- packages/theme/common/base.less (1 hunks)
- packages/theme/dark/toolbar.less (1 hunks)
- packages/theme/light/toolbar.less (1 hunks)
- packages/theme/light/variable.less (1 hunks)
- packages/toolbars/breadcrumb/src/Main.vue (7 hunks)
- packages/toolbars/generate-vue/src/Main.vue (2 hunks)
- packages/toolbars/lock/meta.js (1 hunks)
- packages/toolbars/lock/src/Main.vue (1 hunks)
- packages/toolbars/save/src/Main.vue (1 hunks)
Files skipped from review due to trivial changes (2)
- packages/layout/src/ToolbarCollapse.vue
- packages/theme/common/base.less
Additional context used
Markdownlint
packages/layout/src/composable/Layout.md
43-43: Expected: fenced; Actual: indented
Code block style(MD046, code-block-style)
45-45: Expected: fenced; Actual: indented
Code block style(MD046, code-block-style)
51-51: Expected: fenced; Actual: indented
Code block style(MD046, code-block-style)
53-53: Expected: fenced; Actual: indented
Code block style(MD046, code-block-style)
60-60: Expected: fenced; Actual: indented
Code block style(MD046, code-block-style)
62-62: Expected: fenced; Actual: indented
Code block style(MD046, code-block-style)
69-69: Expected: fenced; Actual: indented
Code block style(MD046, code-block-style)
71-71: Expected: fenced; Actual: indented
Code block style(MD046, code-block-style)
73-73: Expected: fenced; Actual: indented
Code block style(MD046, code-block-style)
79-79: Expected: fenced; Actual: indented
Code block style(MD046, code-block-style)
81-81: Expected: fenced; Actual: indented
Code block style(MD046, code-block-style)
85-85: Expected: fenced; Actual: indented
Code block style(MD046, code-block-style)
90-90: Expected: fenced; Actual: indented
Code block style(MD046, code-block-style)
93-93: Expected: fenced; Actual: indented
Code block style(MD046, code-block-style)
98-98: Expected: fenced; Actual: indented
Code block style(MD046, code-block-style)
110-110: Expected: fenced; Actual: indented
Code block style(MD046, code-block-style)
112-112: Expected: fenced; Actual: indented
Code block style(MD046, code-block-style)
114-114: Expected: fenced; Actual: indented
Code block style(MD046, code-block-style)
124-124: Expected: fenced; Actual: indented
Code block style(MD046, code-block-style)
126-126: Expected: fenced; Actual: indented
Code block style(MD046, code-block-style)
149-149: Expected: fenced; Actual: indented
Code block style(MD046, code-block-style)
Additional comments not posted (34)
packages/toolbars/lock/meta.js (1)
6-6: Verify the impact of removing thecollapsedproperty.The removal of the
collapsedproperty might affect the toolbar's default state. Ensure that this change doesn't introduce any unintended behavior in the UI.Run the following script to check for any references to the
collapsedproperty in the codebase:Verification successful
No impact from removing the
collapsedproperty.The search did not find any references to the
collapsedproperty in the codebase, indicating that its removal does not affect the toolbar's default state or introduce unintended behavior in the UI.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify references to the `collapsed` property. # Test: Search for the `collapsed` property usage. Expect: No critical dependencies on the `collapsed` property. rg --type javascript --type vue --type json 'collapsed'Length of output: 90
Script:
#!/bin/bash # Description: Verify references to the `collapsed` property using ast-grep. # Test: Search for the `collapsed` property usage in JavaScript and Vue files. ast-grep --lang javascript --pattern 'collapsed' # Test: Search for the `collapsed` property usage in JSON files. rg --type json 'collapsed'Length of output: 75
packages/layout/index.js (1)
13-15: Verify the usage of new properties in the codebase.The properties
isShowLine,isShowCollapse, andtoolbarshave been added. Ensure they are being utilized correctly and do not cause any issues.Run the following script to check for the usage of these properties in the codebase:
packages/theme/dark/toolbar.less (1)
10-15: Verify the usage of new CSS properties in the codebase.The new CSS properties
--ti-lowcode-toolbar-left-icon-bg-hoverand--ti-lowcode-toolbar-right-linehave been added. Ensure they are applied correctly in the toolbar components.Run the following script to check for the usage of these CSS properties in the codebase:
Verification successful
CSS Properties Verified in Toolbar Components
The new CSS properties
--ti-lowcode-toolbar-left-icon-bg-hoverand--ti-lowcode-toolbar-right-lineare correctly applied in theDesignToolbars.vuecomponent.
- Found in
packages/layout/src/DesignToolbars.vueScripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of new CSS properties in the codebase. # Test: Search for the usage of `--ti-lowcode-toolbar-left-icon-bg-hover` and `--ti-lowcode-toolbar-right-line`. Expect: Proper application in relevant stylesheets or components. rg --type css --type less '--ti-lowcode-toolbar-left-icon-bg-hover|--ti-lowcode-toolbar-right-line'Length of output: 575
Script:
#!/bin/bash # Description: Verify the usage of new CSS properties in the codebase. # Test: Search for the usage of `--ti-lowcode-toolbar-left-icon-bg-hover` and `--ti-lowcode-toolbar-right-line`. Expect: Proper application in relevant stylesheets or components. rg --type css --type less -e '--ti-lowcode-toolbar-left-icon-bg-hover' -e '--ti-lowcode-toolbar-right-line'Length of output: 453
Script:
#!/bin/bash # Description: Search for the usage of the CSS properties in the codebase. # Test: Look for any references to `--ti-lowcode-toolbar-left-icon-bg-hover` and `--ti-lowcode-toolbar-right-line` outside their declarations. rg '--ti-lowcode-toolbar-left-icon-bg-hover|--ti-lowcode-toolbar-right-line' --glob '!packages/theme/**'Length of output: 580
Script:
#!/bin/bash # Description: Search for the usage of the CSS properties in the codebase. # Test: Look for any references to `--ti-lowcode-toolbar-left-icon-bg-hover` and `--ti-lowcode-toolbar-right-line` outside their declarations. rg -e '--ti-lowcode-toolbar-left-icon-bg-hover' -e '--ti-lowcode-toolbar-right-line' --glob '!packages/theme/**'Length of output: 305
packages/theme/light/toolbar.less (2)
10-10: Good addition for hover effect.The new variable
--ti-lowcode-toolbar-left-icon-bg-hoverenhances the hover state for left icons, improving user interaction.
16-16: Ensure consistent border styling.The new variable
--ti-lowcode-toolbar-right-lineis added for styling a right border or line element. Make sure this aligns with other border styles in the project.designer-demo/registry.js (3)
18-18: Ensure theLockcomponent is used correctly.The
Lockcomponent has been added to the imports. Verify that it is correctly implemented and utilized within the application.
56-64: Enhance layout customization.The layout object has been restructured to include new options. This change allows for greater flexibility in the user interface, which is a positive enhancement.
76-76: Expanded toolbar functionality.The addition of multiple components to the
toolbarsarray, includingLock,Media,Redoundo, andCollaboration, enhances the toolbar's capabilities.packages/layout/src/composable/useLayout.js (2)
30-31: Streamline plugin state management.The
pluginEventproperty has been integrated intolayoutState.plugins, simplifying the state structure. This is a positive refactor for maintainability.
47-53: Position change for utility functions.The functions
getPluginState,getDimension, andsetDimensionhave been repositioned. Ensure that their new positions do not affect their functionality or usage.packages/layout/src/Main.vue (2)
4-4: Ensure thelayoutRegistryis correctly utilized.The addition of the
:layoutRegistryprop to thedesign-toolbarscomponent enhances its functionality. Verify that thelayoutRegistryis being used correctly within the component.
66-66: LGTM! Verify the integration oflayoutRegistry.The inclusion of
layoutRegistryin the return object is approved. Ensure that its integration with other parts of the component is functioning as expected.packages/design-core/index.js (1)
9-9: LGTM! TheLockcomponent export is a valuable addition.The new export statement for the
Lockcomponent enhances the module's functionality by making it available for import.packages/toolbars/lock/src/Main.vue (1)
11-11: Ensure consistency with icon class changes.The class name of the
<span>element has been changed fromicon-hidestoicon. Verify that this change is consistent with the CSS and doesn't affect the intended styling or functionality.packages/toolbars/breadcrumb/src/Main.vue (1)
15-15: Verify the impact of button text change.The button text has been changed from "发布区块" to "区块". Ensure that this change aligns with the intended functionality and doesn't affect user understanding.
packages/layout/src/DesignToolbars.vue (1)
53-58: Verify plugin API registration logic.The registration of plugin APIs for 'lock' and 'save' actions should be verified to ensure it functions as intended and doesn't introduce side effects.
packages/toolbars/save/src/Main.vue (1)
180-186: Enhance button styling with flexbox and hover effects.The use of
display: flexandalign-items: centerensures that the button contents are well-aligned. The hover effect provides visual feedback, improving user interaction. Ensure that the background color variable is correctly defined in your theme settings.packages/layout/src/DesignPlugins.vue (8)
58-65: Update state management withpluginState.The transition from
pluginsStatetopluginStateimproves consistency in state management. Ensure that all references topluginsStatehave been updated to avoid any runtime errors.
77-77: IncludeMETA_APPfor enhanced plugin management.The addition of
META_APPimproves the management of plugin identifiers, enhancing clarity and maintainability. Ensure that this change is reflected in all relevant parts of the codebase.
101-101: Refactor to usepluginStatefromuseLayout().This refactor improves the readability and maintainability of the code by centralizing state management. Verify that other parts of the codebase are compatible with this change.
111-111: Streamline navigation list management.The use of
pluginStateensures consistent state management across navigation lists. This change enhances the maintainability of the code.
115-115: UseMETA_APPfor conditional checks.The use of
META_APPin conditional checks improves code clarity and consistency. Ensure that all related conditions are updated accordingly.
140-141: Enhance page management withMETA_APP.The use of
META_APPfor page management ensures consistency and improves code readability. Verify that all related logic is updated to reflect this change.
154-156: Optimize fixed panel management withpluginState.The logic for managing fixed panels is streamlined with
pluginState, improving code clarity and maintainability. Ensure that this logic is consistently applied across the codebase.
165-167: Ensure consistent use ofpluginStateand components.The consistent use of
pluginStateand component references enhances code readability and maintainability. Verify that all component references are correctly defined.packages/toolbars/generate-vue/src/Main.vue (3)
4-4: Enhance toolbar button layout with flexbox.The addition of
toolbar-generate-btnclass withdisplay: flexandalign-items: centerensures proper alignment of the icon and title. This change improves the visual presentation of the toolbar button.
264-268: Improve toolbar styling with margin and alignment.The
margin-rightproperty and flexbox alignment enhance the layout and separation of toolbar elements. This change contributes to a more polished user interface.
276-278: Maintain button appearance with hover effects.The hover effect ensures consistent button appearance and provides visual feedback during interaction. Verify that the background color variable is correctly defined in your theme settings.
packages/plugins/help/src/HelpIcon.vue (3)
51-51: Import change approved.The addition of
META_APPin the import statement is appropriate for the changes in the component.
62-64: Setup function change approved.The introduction of
getPluginStateand removal ofPLUGIN_NAMEaligns with the new state management approach.
138-138: beforeShow method change approved.The change from
PLUGIN_NAME.MaterialstoMETA_APP.Materialsis consistent with the updated import structure.packages/theme/light/variable.less (3)
300-300: CSS variable--ti-lowcode-toolbar-breadcrumb-bgaddition approved.The background color for the breadcrumb is defined correctly and enhances the toolbar styling.
302-302: CSS variable--ti-lowcode-toolbar-breadcrumb-left-coloraddition approved.The font color for the left side of the breadcrumb is defined correctly and enhances the toolbar styling.
304-304: CSS variable--ti-lowcode-toolbar-breadcrumb-bg-hoveraddition approved.The hover background color for the breadcrumb is defined correctly and enhances the toolbar styling.
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- packages/layout/src/DesignToolbars.vue (4 hunks)
Files skipped from review as they are similar to previous changes (1)
- packages/layout/src/DesignToolbars.vue
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- designer-demo/registry.js (3 hunks)
Files skipped from review as they are similar to previous changes (1)
- designer-demo/registry.js
* feat: add grouping to toolbar * feat:sort out the status and API of the layout * fix:remove unused bags * feat: 工具栏左侧调整 * feat: 间距调整 * fix: remove methods that do not exist * fix: 去掉多余配置
English | 简体中文
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
Background and solution
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
New Features
Lockcomponent to enhance the toolbar functionality.Bug Fixes
Style
Documentation