feat: Modify the outer class name of the module #1181
Conversation
WalkthroughThis pull request implements extensive CSS class and template structural updates across multiple Vue components. The changes consist primarily of adding new CSS classes (e.g., Changes
Possibly related PRs
Suggested labels
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (1)
🪧 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 (4)
packages/plugins/help/src/HelpIcon.vue (2)
118-118: Minor typo in class nameThere appears to be a typo in the class name
lwocode-guide-materials- it should likely belowcode-guide-materials(note the "w" and "o" are transposed).- classes: 'lwocode-guide-materials', + classes: 'lowcode-guide-materials',
141-141: Consistent typo in multiple class namesThe same typo appears in multiple places:
lwocode-guide-*should likely belowcode-guide-*(note the "w" and "o" are transposed). This appears to be a systematic typo across several class names.- classes: 'lwocode-guide-toolbar-right', + classes: 'lowcode-guide-toolbar-right',- classes: 'lwocode-guide-toolbar-right', + classes: 'lowcode-guide-toolbar-right',- classes: 'lwocode-guide-nav-panel', + classes: 'lowcode-guide-nav-panel',- &.lwocode-guide-nav-panel { + &.lowcode-guide-nav-panel {Also applies to: 158-158, 183-183, 244-244
packages/plugins/datasource/src/styles/vars.less (1)
1-37: Good approach to CSS scoping and namespacingThe change from a global
:rootselector to a more specific.plugin-datasourceclass enhances CSS encapsulation and prevents variable name collisions across different plugins. This is in line with modern CSS best practices for component-based architectures.Consider adding a comment at the top of the file that explains the CSS variable naming convention and scoping strategy. For example:
+/* + * Datasource plugin CSS variables - scoped to .plugin-datasource + * All variables are prefixed with --te-datasource-* for consistency + */ .plugin-datasource { --te-datasource-toolbar-icon-color: var(--te-common-text-primary); // remaining variables... }packages/theme/base/src/component-common.less (1)
294-294: Triple Class Name Repetition in Dialog Selector
The outer selector now reads.tiny-dialog-box.tiny-dialog-box.tiny-dialog-box, which is an unusual repetition. Please confirm that this extra repetition is intentional (perhaps to boost specificity) and consistent with the project’s naming conventions.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (28)
packages/common/component/PluginSetting.vue(1 hunks)packages/plugins/block/src/Main.vue(2 hunks)packages/plugins/block/src/styles/vars.less(2 hunks)packages/plugins/bridge/src/BridgeManage.vue(1 hunks)packages/plugins/bridge/src/Main.vue(1 hunks)packages/plugins/bridge/src/styles/vars.less(1 hunks)packages/plugins/datasource/src/DataSourceFieldList.vue(1 hunks)packages/plugins/datasource/src/DataSourceList.vue(1 hunks)packages/plugins/datasource/src/Main.vue(2 hunks)packages/plugins/datasource/src/styles/vars.less(1 hunks)packages/plugins/help/src/HelpIcon.vue(1 hunks)packages/plugins/help/src/styles/vars.less(1 hunks)packages/plugins/i18n/src/Main.vue(2 hunks)packages/plugins/i18n/src/styles/vars.less(1 hunks)packages/plugins/materials/src/styles/vars.less(1 hunks)packages/plugins/page/src/Main.vue(1 hunks)packages/plugins/page/src/styles/vars.less(1 hunks)packages/plugins/schema/src/Main.vue(1 hunks)packages/plugins/schema/src/styles/vars.less(1 hunks)packages/plugins/script/src/Main.vue(1 hunks)packages/plugins/script/src/styles/vars.less(1 hunks)packages/plugins/state/src/Main.vue(1 hunks)packages/plugins/state/src/styles/vars.less(1 hunks)packages/plugins/tree/src/Main.vue(1 hunks)packages/plugins/tree/src/styles/vars.less(1 hunks)packages/plugins/tutorial/src/Main.vue(2 hunks)packages/plugins/tutorial/src/styles/vars.less(1 hunks)packages/theme/base/src/component-common.less(2 hunks)
✅ Files skipped from review due to trivial changes (17)
- packages/plugins/datasource/src/DataSourceList.vue
- packages/plugins/bridge/src/Main.vue
- packages/plugins/page/src/styles/vars.less
- packages/plugins/tree/src/Main.vue
- packages/plugins/bridge/src/BridgeManage.vue
- packages/plugins/datasource/src/DataSourceFieldList.vue
- packages/plugins/script/src/Main.vue
- packages/common/component/PluginSetting.vue
- packages/plugins/tutorial/src/styles/vars.less
- packages/plugins/schema/src/Main.vue
- packages/plugins/script/src/styles/vars.less
- packages/plugins/tutorial/src/Main.vue
- packages/plugins/state/src/styles/vars.less
- packages/plugins/tree/src/styles/vars.less
- packages/plugins/i18n/src/Main.vue
- packages/plugins/state/src/Main.vue
- packages/plugins/page/src/Main.vue
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: push-check
🔇 Additional comments (13)
packages/plugins/bridge/src/styles/vars.less (1)
1-13: CSS Class Renaming ValidationThe renaming from
.bridge-manageto.plugin-bridgeis correctly applied. All CSS custom properties remain unchanged, ensuring consistent styling. Just verify that all component files referencing this style (e.g.,Main.vueandBridgeManage.vue) have been updated accordingly.packages/plugins/i18n/src/styles/vars.less (1)
1-1: Class name standardization is a good practiceThe class name has been updated from
.plugin-panel-i18nto.plugin-i18n, following a more consistent naming convention across plugins. This change makes the selector more specific to the i18n plugin without the redundant "panel" term.packages/plugins/help/src/styles/vars.less (1)
1-1: Improved selector from ID to classConverting from
#help-plugin(ID selector) to.plugin-help(class selector) is a good practice. Classes provide better reusability and maintainability compared to IDs, which should ideally be unique. This change also follows the standardized naming convention being applied across plugins.packages/plugins/schema/src/styles/vars.less (1)
1-1: Better selector with standardized namingChanged from
#source-code(ID selector) to.plugin-schema(class selector), which improves the CSS structure in two ways:
- Using a class instead of ID enables better reusability
- The name now follows the consistent
plugin-[name]pattern used across other pluginsThis change aligns with the overall effort to standardize plugin naming conventions.
packages/plugins/help/src/HelpIcon.vue (1)
2-2: Properly added class while maintaining ID for backward compatibilityGood implementation that adds the new
.plugin-helpclass while retaining the#help-pluginID. This approach ensures backward compatibility while adopting the new class-based styling pattern. The element now correctly references the CSS selector defined in the vars.less file.packages/plugins/datasource/src/Main.vue (2)
2-43: Appropriate class structure established for CSS scopingThe new wrapper div with the
plugin-datasourceclass provides a container for the scoped CSS variables defined in vars.less. This structural change maintains component functionality while enabling more specific styling.
151-153: LGTM - consistent height stylingSetting height to 100% ensures the component fills its container, which is essential for proper layout and scroll behavior.
packages/plugins/block/src/Main.vue (2)
2-122: Appropriate wrapper div added for consistent plugin stylingThe addition of the
.plugin-blockwrapper div matches the pattern applied to other plugins, creating a consistent structure across the codebase. This encapsulation is good for both styling and component organization.
455-458: Consistent dimension styling appliedSetting both width and height to 100% ensures the component properly fills its container, maintaining consistency with other plugin components.
packages/plugins/block/src/styles/vars.less (2)
1-37: Appropriate class renaming for plugin consistencyThe change from
.block-manageto.plugin-blockaligns with the naming convention used in other plugins. This consistency makes the codebase more maintainable and easier to understand.
39-43:✅ Verification successful
Good separation of popper-specific styles
Moving the popper-related variables to a dedicated class improves organization and follows the single responsibility principle for CSS. This separation makes styles more maintainable as the codebase grows.
🏁 Script executed:
#!/bin/bash # Check if other plugins follow the same pattern for popper styling rg -l "popper-wrapper" --type lessLength of output: 126
Separation of Popper-Specific Styles Confirmed and Consistent
The dedicated
.block-category-option-popper-wrapperclass inpackages/plugins/block/src/styles/vars.lesscleanly isolates popper-related variables, aligning with best practices for maintainable CSS. The verification shows a similar implementation inpackages/plugins/materials/src/styles/vars.less, confirming consistency across plugins.packages/plugins/materials/src/styles/vars.less (1)
43-47: Encapsulate CSS Variables in a Dedicated ClassThe relocation of the variables
--te-materials-block-group-popper-title-text-colorand
--te-materials-block-group-popper-content-text-color
into the new.block-option-popper-wrapperclass enhances encapsulation and makes the styling scope more specific. Please ensure that all corresponding component templates are updated to reference this new class so that the applied styles remain consistent.packages/theme/base/src/component-common.less (1)
304-308: Updated Close Button Styling in Dialog Component
The font size for the close button has been updated tovar(--te-base-font-size-2)and its right offset changed to8px. Verify that these adjustments align with the overall UI design standards and other component styles.
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
1.修改plugin下模块外层类名
2.复选框选中状态和默认状态大小调整
3.部分模块滚动条修改
4.弹窗关闭图标样式调整
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
Style
Refactor