Feat router page embedded view toggle #1010
Conversation
… switcher, support embedded and standalone mode in canvas
…e next view mode label error
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. 🗂️ Base branches to auto review (3)
Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThis pull request introduces a new Changes
Sequence DiagramsequenceDiagram
participant User
participant Toolbar
participant BroadcastChannel
participant LocalStorage
User->>Toolbar: Click View Mode Toggle
Toolbar->>LocalStorage: Update View Mode
Toolbar->>BroadcastChannel: Broadcast View Mode Change
BroadcastChannel->>Toolbar: Confirm Mode Change
Toolbar->>User: Update UI to Reflect New Mode
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
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 using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
packages/canvas/render/src/canvas-function/router-view-setting.ts
Outdated
Show resolved
Hide resolved
…add fallback for cache value getter in toolbar, fix typo mistake
packages/canvas/render/src/canvas-function/router-view-setting.ts
Outdated
Show resolved
Hide resolved
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (3)
packages/toolbars/view-setting/meta.js (1)
1-12: Consider adding i18n support for the title.The configuration looks good and follows the toolbar component structure. However, consider internationalizing the 'viewSetting' title to support multiple languages.
packages/canvas/render/src/canvas-function/router-view-setting.ts (1)
15-21: Add error logging for invalid view mode values.While the validation logic is correct, consider logging invalid values to help with debugging.
function getCacheValue() { const value = localStorage.getItem(CANVAS_ROUTER_VIEW_SETTING_VIEW_MODE_KEY) if (!(Object.values(ViewMode) as string[]).includes(value)) { + console.warn(`Invalid view mode value: ${value}, defaulting to EMBEDDED`) return ViewMode.EMBEDDED } return value as ViewMode }packages/toolbars/view-setting/src/Main.vue (1)
20-29: Consider enhancing type safety and reusability.The cache utility functions work correctly but could benefit from:
- Type safety using TypeScript or JSDoc type annotations
- Reusability by exporting them for use in other components
Example enhancement:
+/** @typedef {'embedded' | 'standalone'} ViewMode */ +/** + * @returns {ViewMode} + */ function getCacheValue() { const value = localStorage.getItem(CANVAS_ROUTER_VIEW_SETTING_VIEW_MODE_KEY) if (!['embedded', 'standalone'].includes(value)) { return 'embedded' } return value } +/** + * @param {ViewMode} value + */ function setCacheValue(value) { localStorage.setItem(CANVAS_ROUTER_VIEW_SETTING_VIEW_MODE_KEY, value) } +export { getCacheValue, setCacheValue }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (17)
designer-demo/registry.js(3 hunks)jsconfig.json(2 hunks)packages/build/vite-config/src/vite-plugins/devAliasPlugin.js(1 hunks)packages/canvas/DesignCanvas/src/DesignCanvas.vue(2 hunks)packages/canvas/render/src/RenderMain.ts(4 hunks)packages/canvas/render/src/canvas-function/index.ts(1 hunks)packages/canvas/render/src/canvas-function/router-view-setting.ts(1 hunks)packages/design-core/index.js(1 hunks)packages/design-core/package.json(1 hunks)packages/engine-cli/template/designer/registry.js(3 hunks)packages/layout/index.js(1 hunks)packages/toolbars/view-setting/index.js(1 hunks)packages/toolbars/view-setting/meta.js(1 hunks)packages/toolbars/view-setting/package.json(1 hunks)packages/toolbars/view-setting/src/Main.vue(1 hunks)packages/toolbars/view-setting/vite.config.js(1 hunks)packages/utils/src/constants/index.js(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- packages/canvas/render/src/canvas-function/index.ts
- packages/toolbars/view-setting/index.js
🔇 Additional comments (17)
packages/layout/index.js (1)
26-27: LGTM! Appropriate placement in the collapse section.The viewSetting toolbar is correctly integrated into the collapse section, following the established pattern and positioned logically after the language selector.
packages/canvas/render/src/canvas-function/router-view-setting.ts (1)
7-13: LGTM! Well-structured type definitions.The ViewMode enum and IRouterViewSetting interface provide good type safety and follow TypeScript best practices.
packages/toolbars/view-setting/vite.config.js (1)
20-38: LGTM! Well-configured Vite setup.The Vite configuration is properly set up with:
- Appropriate plugins for Vue and JSX
- Correct library build configuration
- Proper external dependency handling
packages/toolbars/view-setting/src/Main.vue (2)
1-9: LGTM! Clean template implementation with proper fallback.The template effectively uses the ToolbarBase component with dynamic content and proper icon fallback handling.
11-18: LGTM! Well-organized imports and constants.The imports are properly structured and the constants are appropriately destructured from the utils package.
packages/engine-cli/template/designer/registry.js (1)
17-17: LGTM! Proper integration of ViewSetting toolbar.The ViewSetting component is correctly imported and integrated into both the toolbars array and collapse section, following the existing pattern.
Also applies to: 74-75, 101-102
designer-demo/registry.js (1)
17-17: LGTM! Consistent toolbar configuration.The ViewSetting integration matches the configuration in packages/engine-cli/template/designer/registry.js, maintaining consistency across registry files.
Also applies to: 74-75, 101-102
packages/design-core/index.js (1)
7-7: LGTM! Proper export configuration.The ViewSetting component is correctly exported following the existing pattern of on-demand exports.
packages/utils/src/constants/index.js (1)
96-97: LGTM! Constants follow the established patterns.The new constants are well-structured and maintain consistency with existing patterns by using
CHANNEL_UIDfor uniqueness.Also applies to: 101-101
packages/build/vite-config/src/vite-plugins/devAliasPlugin.js (1)
39-39: LGTM! Alias follows the established pattern.The new alias is properly structured and maintains alphabetical order among other toolbar aliases.
packages/canvas/DesignCanvas/src/DesignCanvas.vue (2)
15-16: LGTM! Template structure improved.The addition of the proper closing tag enhances template readability and structure.
213-222: Consider moving URL change handling to getBaseInfo.The URL change handling logic is well-implemented with proper lifecycle management, but as noted in the TODO comment, it should be moved to
getBaseInfo.Let's verify if
getBaseInfois the appropriate location:✅ Verification successful
Moving URL change handling to getBaseInfo is the right approach
The review comment is correct. The URL change handling should be moved to
getBaseInfoinpackages/common/composable/defaultGlobalService.jsbecause:
getBaseInfois already the central place for URL parameter management- Other components rely on
getBaseInfofor accessing URL parameters- Moving the logic there would ensure consistent URL handling across the application
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for getBaseInfo implementation and related URL handling ast-grep --pattern 'function getBaseInfo() { $$$ }' # Check for similar URL handling patterns rg -A 5 'postLocationHistoryChanged'Length of output: 3883
Script:
#!/bin/bash # Search for baseInfo related files and implementations fd -t f baseInfo rg -i "baseinfo|base.info" --type vue --type js -A 5 # Look for similar URL parameter handling rg "URLSearchParams|location.search" --type vue --type jsLength of output: 189
Script:
#!/bin/bash # Search for baseInfo related files and implementations fd baseInfo rg -i "baseinfo|base.info" -A 5 # Look for similar URL parameter handling rg "URLSearchParams|location.search"Length of output: 22771
packages/canvas/render/src/RenderMain.ts (2)
14-22: LGTM! Enhanced routing and localization capabilities.The addition of
useRouterViewSettinganduseLocaleimproves the component's functionality, and the renderer variable rename enhances code clarity.Also applies to: 90-91
137-145: Well-structured page ancestor handling with view mode support.The
updatePageAncestorfunction properly handles the standalone mode case, and the watcher ensures updates when the view mode changes.Let's verify the view mode handling:
Also applies to: 158-163
✅ Verification successful
View mode and ancestor handling implementation verified
The implementation correctly handles standalone mode and properly manages page ancestors with appropriate error handling and type safety.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Check for other view mode dependencies rg -A 5 'viewMode.*standalone' # Search for related ancestor handling ast-grep --pattern 'function getPageAncestors($$$) { $$$ }'Length of output: 1582
packages/toolbars/view-setting/package.json (1)
27-31: LGTM! Dependencies are well-structuredThe dependencies are properly organized with workspace references for internal packages and specific versions for external ones. The peer dependencies correctly specify the required Vue version.
Also applies to: 38-41
jsconfig.json (1)
26-26: LGTM! Path mappings are correctly configuredThe new path mappings for the view-setting toolbar follow the established pattern and are properly placed in alphabetical order among other toolbar mappings.
Also applies to: 55-55
packages/design-core/package.json (1)
79-79: LGTM! Dependency correctly addedThe view-setting toolbar dependency is properly added using workspace reference and maintains the established ordering pattern.
| export function useRouterViewSetting() { | ||
| const routerViewSetting = reactive<IRouterViewSetting>({ | ||
| viewMode: getCacheValue() | ||
| }) | ||
|
|
||
| const { data } = useBroadcastChannel<IRouterViewSetting, IRouterViewSetting>({ | ||
| name: BROADCAST_CHANNEL.CanvasRouterViewSetting | ||
| }) | ||
|
|
||
| watch(data, () => { | ||
| routerViewSetting.viewMode = data.value.viewMode | ||
| }) | ||
|
|
||
| return { | ||
| routerViewSetting | ||
| } | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider adding cleanup for broadcast channel subscription.
The implementation looks good, but the broadcast channel subscription should be cleaned up when the component is unmounted.
export function useRouterViewSetting() {
const routerViewSetting = reactive<IRouterViewSetting>({
viewMode: getCacheValue()
})
const { data, cleanup } = useBroadcastChannel<IRouterViewSetting, IRouterViewSetting>({
name: BROADCAST_CHANNEL.CanvasRouterViewSetting
})
watch(data, () => {
routerViewSetting.viewMode = data.value.viewMode
})
return {
routerViewSetting,
+ cleanup
}
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export function useRouterViewSetting() { | |
| const routerViewSetting = reactive<IRouterViewSetting>({ | |
| viewMode: getCacheValue() | |
| }) | |
| const { data } = useBroadcastChannel<IRouterViewSetting, IRouterViewSetting>({ | |
| name: BROADCAST_CHANNEL.CanvasRouterViewSetting | |
| }) | |
| watch(data, () => { | |
| routerViewSetting.viewMode = data.value.viewMode | |
| }) | |
| return { | |
| routerViewSetting | |
| } | |
| } | |
| export function useRouterViewSetting() { | |
| const routerViewSetting = reactive<IRouterViewSetting>({ | |
| viewMode: getCacheValue() | |
| }) | |
| const { data, cleanup } = useBroadcastChannel<IRouterViewSetting, IRouterViewSetting>({ | |
| name: BROADCAST_CHANNEL.CanvasRouterViewSetting | |
| }) | |
| watch(data, () => { | |
| routerViewSetting.viewMode = data.value.viewMode | |
| }) | |
| return { | |
| routerViewSetting, | |
| cleanup | |
| } | |
| } |
| const viewMode = ref(getCacheValue()) | ||
| const { post, data } = useBroadcastChannel({ name: BROADCAST_CHANNEL.CanvasRouterViewSetting }) | ||
| watch(data, () => { | ||
| viewMode.value = data.value | ||
| }) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add cleanup for broadcast channel subscription.
The broadcast channel subscription should be cleaned up when the component is unmounted to prevent memory leaks.
setup() {
const viewMode = ref(getCacheValue())
const { post, data } = useBroadcastChannel({ name: BROADCAST_CHANNEL.CanvasRouterViewSetting })
- watch(data, () => {
+ const stopWatch = watch(data, () => {
viewMode.value = data.value
})
+
+ onUnmounted(() => {
+ stopWatch()
+ })Committable suggestion skipped: line range outside the PR's diff.
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/opentiny/tiny-engine", | ||
| "directory": "packages/toolbars/lang" |
There was a problem hiding this comment.
Fix incorrect repository directory path
The directory field in the repository configuration points to packages/toolbars/lang instead of packages/toolbars/view-setting.
- "directory": "packages/toolbars/lang"
+ "directory": "packages/toolbars/view-setting"📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "directory": "packages/toolbars/lang" | |
| "directory": "packages/toolbars/view-setting" |
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?
没有这个入口 ，需要父页面提供router-view组件才能编辑
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
New Features
Improvements
Technical Updates