feat: Modify router select configurator and add tab-bar configurator #1538
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
add tab-bar configurator
WalkthroughA new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant TabBarConfigurator
participant Canvas
participant History
User->>TabBarConfigurator: Add/Delete/Reorder/Edit Tab Item
TabBarConfigurator->>Canvas: Update schema (add, delete, reorder, edit)
TabBarConfigurator->>History: Record action (for undo/redo)
Canvas-->>TabBarConfigurator: Confirm schema update
TabBarConfigurator-->>User: UI updates to reflect changes
Estimated code review effort3 (30–60 minutes) 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. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
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 (
|
xuanlid
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
packages/configurator/src/tab-bar-configurator/TabBarConfigurator.vue (2)
43-43: Avoid redundant schema retrieval.The schema is already retrieved at line 43. Consider passing it as a parameter to
updateChildrenToValidto avoid callinggetSchema()again.-const updateChildrenToValid = () => { - const schema = useProperties().getSchema() +const updateChildrenToValid = (schema) => { const schemaChildren = schema.children || []And update the call:
onMounted(() => { - updateChildrenToValid() + const schema = useProperties().getSchema() + updateChildrenToValid(schema) })Also applies to: 49-49
58-60: Consider extracting hardcoded values as constants.The default text and iconPath URL are hardcoded. Consider extracting them as constants for better maintainability.
+const DEFAULT_TAB_TEXT = '选项标题' +const DEFAULT_TAB_ICON = 'https://tinyengine-assets.obs.cn-north-4.myhuaweicloud.com/files/harmony/images/tabbar/home.svg' + const updateChildrenToValid = () => { // ... item.props = { - text: '选项标题', - iconPath: 'https://tinyengine-assets.obs.cn-north-4.myhuaweicloud.com/files/harmony/images/tabbar/home.svg' + text: DEFAULT_TAB_TEXT, + iconPath: DEFAULT_TAB_ICON }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
packages/configurator/src/index.ts(2 hunks)packages/configurator/src/router-select-configurator/RouterSelectConfigurator.vue(2 hunks)packages/configurator/src/styles/vars.less(1 hunks)packages/configurator/src/tab-bar-configurator/TabBarConfigurator.vue(1 hunks)
🧰 Additional context used
🧠 Learnings (5)
📓 Common learnings
Learnt from: gene9831
PR: opentiny/tiny-engine#1041
File: packages/plugins/datasource/src/DataSourceList.vue:138-138
Timestamp: 2025-01-14T10:06:25.508Z
Learning: PR #1041 in opentiny/tiny-engine is specifically for reverting Prettier v3 formatting to v2, without any logical code changes or syntax improvements.
Learnt from: rhlin
PR: opentiny/tiny-engine#1011
File: packages/canvas/render/src/RenderMain.ts:82-88
Timestamp: 2025-01-14T08:50:50.226Z
Learning: For PR #1011, the focus is on resolving conflicts and migrating code, with architectural improvements deferred for future PRs.
Learnt from: gene9831
PR: opentiny/tiny-engine#1226
File: packages/canvas/container/src/components/CanvasDivider.vue:184-185
Timestamp: 2025-03-19T03:13:51.520Z
Learning: The CSS bug in packages/canvas/container/src/components/CanvasDivider.vue where verLeft already includes "px" but is being appended again in the style object will be fixed in a future update, as confirmed by gene9831.
Learnt from: gene9831
PR: opentiny/tiny-engine#1011
File: packages/configurator/src/router-select-configurator/RouterSelectConfigurator.vue:20-38
Timestamp: 2025-01-14T06:52:01.277Z
Learning: In RouterSelectConfigurator.vue, the `modelValue` prop only supports String type, not Array.
Learnt from: yy-wow
PR: opentiny/tiny-engine#850
File: packages/toolbars/preview/src/Main.vue:16-16
Timestamp: 2024-10-10T02:47:46.239Z
Learning: In `packages/toolbars/preview/src/Main.vue`, within the `preview` function, the `getMergeMeta` method is used at lines 64 and 65 to retrieve `engine.config` configurations.
Learnt from: rhlin
PR: opentiny/tiny-engine#1011
File: packages/vue-generator/src/plugins/genRouterPlugin.js:122-125
Timestamp: 2025-01-14T11:09:32.013Z
Learning: The router configuration in Vue Generator should maintain the current structure without a catch-all route for 404 handling or modification to the root path prefix, as these are not required at this time.
Learnt from: yy-wow
PR: opentiny/tiny-engine#850
File: packages/toolbars/preview/src/Main.vue:0-0
Timestamp: 2024-10-10T02:48:10.881Z
Learning: 在 `packages/toolbars/preview/src/Main.vue` 文件中，使用 `useNotify` 而不是 `console` 来记录错误日志。
packages/configurator/src/index.ts (4)
Learnt from: yy-wow
PR: opentiny/tiny-engine#850
File: packages/toolbars/preview/src/Main.vue:16-16
Timestamp: 2024-10-10T02:47:46.239Z
Learning: In `packages/toolbars/preview/src/Main.vue`, within the `preview` function, the `getMergeMeta` method is used at lines 64 and 65 to retrieve `engine.config` configurations.
Learnt from: gene9831
PR: opentiny/tiny-engine#1011
File: packages/configurator/src/router-select-configurator/RouterSelectConfigurator.vue:63-73
Timestamp: 2025-01-14T06:49:00.797Z
Learning: In the tiny-engine project, the SvgIcon component is globally registered and available throughout Vue components without requiring explicit imports.
Learnt from: gene9831
PR: opentiny/tiny-engine#1011
File: packages/configurator/src/router-select-configurator/RouterSelectConfigurator.vue:63-73
Timestamp: 2025-01-14T06:49:00.797Z
Learning: In the tiny-engine project, the SvgIcon component is globally registered using `app.component('SvgIcon', SvgIcon)` in `packages/svgs/index.js`, making it available throughout Vue components without requiring explicit imports.
Learnt from: yy-wow
PR: opentiny/tiny-engine#850
File: packages/toolbars/preview/src/Main.vue:0-0
Timestamp: 2024-10-10T02:48:10.881Z
Learning: 在 `packages/toolbars/preview/src/Main.vue` 文件中，使用 `useNotify` 而不是 `console` 来记录错误日志。
packages/configurator/src/styles/vars.less (1)
Learnt from: gene9831
PR: opentiny/tiny-engine#1226
File: packages/canvas/container/src/components/CanvasDivider.vue:184-185
Timestamp: 2025-03-19T03:13:51.520Z
Learning: The CSS bug in packages/canvas/container/src/components/CanvasDivider.vue where verLeft already includes "px" but is being appended again in the style object will be fixed in a future update, as confirmed by gene9831.
packages/configurator/src/router-select-configurator/RouterSelectConfigurator.vue (9)
Learnt from: gene9831
PR: opentiny/tiny-engine#1011
File: packages/plugins/page/src/PageTree.vue:340-345
Timestamp: 2025-01-14T08:37:01.393Z
Learning: The code in PageTree.vue is based on template code copied from elsewhere and will be refactored later, so suggestions for improvements should be deferred until that refactoring occurs.
Learnt from: rhlin
PR: opentiny/tiny-engine#1011
File: packages/vue-generator/src/plugins/genRouterPlugin.js:122-125
Timestamp: 2025-01-14T11:09:32.013Z
Learning: The router configuration in Vue Generator should maintain the current structure without a catch-all route for 404 handling or modification to the root path prefix, as these are not required at this time.
Learnt from: lichunn
PR: opentiny/tiny-engine#1011
File: packages/vue-generator/src/plugins/genRouterPlugin.js:19-19
Timestamp: 2025-01-14T09:24:11.999Z
Learning: In Vue router path construction, when recursively flattening nested routes, starting with empty parentPath for child routes is correct as the parent's path is already captured in the parent route object. This avoids duplicate path segments.
Learnt from: gene9831
PR: opentiny/tiny-engine#1011
File: packages/plugins/page/src/PageGeneral.vue:166-178
Timestamp: 2025-01-14T06:40:18.223Z
Learning: The page structure data in PageGeneral.vue cannot have circular dependencies due to design constraints.
Learnt from: gene9831
PR: opentiny/tiny-engine#1069
File: packages/plugins/page/src/PageGeneral.vue:107-107
Timestamp: 2025-01-24T07:30:38.528Z
Learning: In PageGeneral.vue, `pageParentId.value` is only used to initialize the `oldParentId` ref. After initialization, `oldParentId` is kept in sync with `pageSettingState.oldParentId` through a watchEffect.
Learnt from: chilingling
PR: opentiny/tiny-engine#1440
File: packages/plugins/materials/src/composable/useResource.ts:82-84
Timestamp: 2025-05-28T03:58:31.212Z
Learning: In the TinyEngine codebase, there are two different data structures for page information:
1. App schema components tree (appSchemaState.pageTree) uses nested meta structure with page.meta?.id
2. API responses from pagePluginApi.getPageById() return flattened structure with pageInfo.id and pageInfo.occupier directly
The code should use page.meta?.id when working with pageTree data and pageInfo.id when working with API response data.
Learnt from: gene9831
PR: opentiny/tiny-engine#1011
File: packages/configurator/src/router-select-configurator/RouterSelectConfigurator.vue:20-38
Timestamp: 2025-01-14T06:52:01.277Z
Learning: In RouterSelectConfigurator.vue, the `modelValue` prop only supports String type, not Array.
Learnt from: gene9831
PR: opentiny/tiny-engine#1011
File: packages/plugins/page/src/PageTree.vue:311-346
Timestamp: 2025-01-14T08:27:13.559Z
Learning: In Vue drag-and-drop tree components, the handleMoveNode event handler doesn't need debouncing since the move event is only triggered once when the drop operation is completed, and the drag state is managed by the tree component internally.
Learnt from: gene9831
PR: opentiny/tiny-engine#1011
File: packages/configurator/src/router-select-configurator/RouterSelectConfigurator.vue:95-98
Timestamp: 2025-01-14T06:55:59.692Z
Learning: The tiny-select component from @opentiny/vue library ensures selected options are valid internally, requiring no additional validation in the change handler.
packages/configurator/src/tab-bar-configurator/TabBarConfigurator.vue (5)
Learnt from: yy-wow
PR: opentiny/tiny-engine#850
File: packages/toolbars/preview/src/Main.vue:16-16
Timestamp: 2024-10-10T02:47:46.239Z
Learning: In `packages/toolbars/preview/src/Main.vue`, within the `preview` function, the `getMergeMeta` method is used at lines 64 and 65 to retrieve `engine.config` configurations.
Learnt from: gene9831
PR: opentiny/tiny-engine#830
File: packages/common/component/MetaChildItem.vue:50-56
Timestamp: 2024-10-15T02:45:17.168Z
Learning: In `packages/common/component/MetaChildItem.vue`, when checking if `text` is an object in the computed property `title`, ensure that `text` is not `null` because `typeof null === 'object'` in JavaScript. Use checks like `text && typeof text === 'object'` to safely handle `null` values.
Learnt from: gene9831
PR: opentiny/tiny-engine#1011
File: packages/plugins/page/src/PageTree.vue:340-345
Timestamp: 2025-01-14T08:37:01.393Z
Learning: The code in PageTree.vue is based on template code copied from elsewhere and will be refactored later, so suggestions for improvements should be deferred until that refactoring occurs.
Learnt from: yy-wow
PR: opentiny/tiny-engine#850
File: packages/toolbars/preview/src/Main.vue:0-0
Timestamp: 2024-10-10T02:48:10.881Z
Learning: 在 `packages/toolbars/preview/src/Main.vue` 文件中，使用 `useNotify` 而不是 `console` 来记录错误日志。
Learnt from: gene9831
PR: opentiny/tiny-engine#1011
File: packages/configurator/src/router-select-configurator/RouterSelectConfigurator.vue:95-98
Timestamp: 2025-01-14T06:55:59.692Z
Learning: The tiny-select component from @opentiny/vue library ensures selected options are valid internally, requiring no additional validation in the change handler.
🔇 Additional comments (6)
packages/configurator/src/styles/vars.less (1)
47-48: LGTM! CSS variables follow the established pattern.The new CSS variables for the tab bar configurator correctly reference existing common variables and maintain consistency with the naming convention.
packages/configurator/src/index.ts (1)
32-32: LGTM! Component export follows the established pattern.The TabBarConfigurator is correctly imported and exported following the same pattern as other configurators in the package.
Also applies to: 69-69
packages/configurator/src/router-select-configurator/RouterSelectConfigurator.vue (2)
53-53: Good addition of route property to tree data.Including the
routeproperty in the tree node data enables downstream components to access routing information directly.Also applies to: 56-56
98-99: Enhanced event payload with path information.The addition of the
pathproperty to the emitted value provides more context to parent components. The fallback to an empty object is a good defensive programming practice.packages/configurator/src/tab-bar-configurator/TabBarConfigurator.vue (2)
77-77: Children ref is not reactive to schema changes.The
childrenref is always reset toschemaChildrenwhich doesn't update when the schema changes. Consider using a computed property or watching the schema for changes.-const children = ref(schemaChildren) +const children = computed(() => { + const schema = useProperties().getSchema() + return schema.children || [] +})Then remove the manual updates:
-children.value = [...schemaChildren]Also applies to: 92-92, 100-100, 129-129
⛔ Skipped due to learnings
Learnt from: gene9831 PR: opentiny/tiny-engine#1011 File: packages/plugins/page/src/PageTree.vue:340-345 Timestamp: 2025-01-14T08:37:01.393Z Learning: The code in PageTree.vue is based on template code copied from elsewhere and will be refactored later, so suggestions for improvements should be deferred until that refactoring occurs.Learnt from: rhlin PR: opentiny/tiny-engine#1011 File: packages/canvas/render/src/canvas-function/design-mode.ts:6-13 Timestamp: 2025-01-14T06:55:14.457Z Learning: The code in `packages/canvas/render/src/canvas-function/design-mode.ts` is migrated code that should be preserved in its current form during the migration process. Refactoring suggestions for type safety and state management improvements should be considered in future PRs.Learnt from: gene9831 PR: opentiny/tiny-engine#1011 File: packages/plugins/page/src/PageGeneral.vue:166-178 Timestamp: 2025-01-14T06:40:18.223Z Learning: The page structure data in PageGeneral.vue cannot have circular dependencies due to design constraints.Learnt from: gene9831 PR: opentiny/tiny-engine#1011 File: packages/plugins/page/src/PageTree.vue:311-346 Timestamp: 2025-01-14T08:27:13.559Z Learning: In Vue drag-and-drop tree components, the handleMoveNode event handler doesn't need debouncing since the move event is only triggered once when the drop operation is completed, and the drag state is managed by the tree component internally.Learnt from: gene9831 PR: opentiny/tiny-engine#830 File: packages/common/component/MetaChildItem.vue:50-56 Timestamp: 2024-10-15T02:45:17.168Z Learning: In `packages/common/component/MetaChildItem.vue`, when checking if `text` is an object in the computed property `title`, ensure that `text` is not `null` because `typeof null === 'object'` in JavaScript. Use checks like `text && typeof text === 'object'` to safely handle `null` values.
117-127: No unsupported ‘move’ operation—current delete/insert is correct.I confirmed that
NodeOperationonly includesinsert,delete,changeProps, andupdateAttributes. There’s no built-inmovetype, so using delete-then-insert for reordering is the only supported approach.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
add tab-bar configurator
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