perf: improve modal and drawer component documentation and fix known problems - #4264
Conversation
|
anncwb
added
documentation
WalkthroughThe changes involve the introduction of a new GitHub Actions labeling system, modifications to existing workflows, and enhancements to documentation components. New Vue components for dynamic drawers and modals were added, while existing ones were refined for improved functionality. Additionally, updates to the project's documentation provide clearer usage instructions and enhance accessibility for users. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Drawer
participant Modal
participant Documentation
User->>Drawer: Open drawer
Drawer->>User: Show content
User->>Drawer: Update content
Drawer->>User: Refresh display
User->>Modal: Open modal
Modal->>User: Show data
User->>Modal: Confirm actions
Modal->>User: Process confirmation
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 (
|
anncwb
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: 3
Outside diff range, codebase verification and nitpick comments (5)
docs/src/demos/vben-drawer/auto-height/index.vue (1)
1-14: Minor Improvement: Use arrow function foropen.Consider using an arrow function for
opento maintain consistency and improve readability.-function open() { - drawerApi.open(); -} +const open = () => { + drawerApi.open(); +}docs/src/demos/vben-drawer/extra/index.vue (1)
1-14: Minor Improvement: Use arrow function foropen.Consider using an arrow function for
opento maintain consistency and improve readability.-function open() { - drawerApi.open(); -} +const open = () => { + drawerApi.open(); +}docs/src/demos/vben-modal/auto-height/index.vue (1)
1-14: Minor Improvement: Use arrow function foropenModal.Consider using an arrow function for
openModalto maintain consistency and improve readability.-function openModal() { - modalApi.open(); -} +const openModal = () => { + modalApi.open(); +}docs/src/components/common-ui/vben-drawer.md (1)
41-41: Fix Typographical IssueThe phrase "对与参数的处理优先级" should be corrected to "对于参数的处理优先级".
Apply this diff to fix the typographical issue:
- `VbenDrawer` 组件对与参数的处理优先级是 `slot` > `props` > `state`(通过api更新的状态以及useVbenDrawer参数)。 + `VbenDrawer` 组件对于参数的处理优先级是 `slot` > `props` > `state`(通过api更新的状态以及useVbenDrawer参数)。Tools
LanguageTool
[uncategorized] ~41-~41: 您的意思是“对"于"”吗？
Context: ...ata" /> ::: info 注意 -VbenDrawer组件对与参数的处理优先级是slot>props>state(通过a...(YU7_YU8)
docs/src/components/common-ui/vben-modal.md (1)
47-47: Fix Typographical IssueThe phrase "对与参数的处理优先级" should be corrected to "对于参数的处理优先级".
Apply this diff to fix the typographical issue:
- `VbenModal` 组件对与参数的处理优先级是 `slot` > `props` > `state`(通过api更新的状态以及useVbenModal参数)。 + `VbenModal` 组件对于参数的处理优先级是 `slot` > `props` > `state`(通过api更新的状态以及useVbenModal参数)。Tools
LanguageTool
[uncategorized] ~47-~47: 您的意思是“对"于"”吗？
Context: ...data" /> ::: info 注意 -VbenModal组件对与参数的处理优先级是slot>props>state(通过a...(YU7_YU8)
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (54)
- .github/labeler.yml (1 hunks)
- .github/release-drafter.yml (1 hunks)
- .github/workflows/ci.yml (3 hunks)
- .github/workflows/deploy.yml (6 hunks)
- .github/workflows/labeler.yml (1 hunks)
- docs/.vitepress/config/zh.mts (1 hunks)
- docs/src/components/common-ui/vben-drawer.md (1 hunks)
- docs/src/components/common-ui/vben-modal.md (1 hunks)
- docs/src/components/introduction.md (1 hunks)
- docs/src/demos/vben-drawer/auto-height/drawer.vue (1 hunks)
- docs/src/demos/vben-drawer/auto-height/index.vue (1 hunks)
- docs/src/demos/vben-drawer/basic/index.vue (1 hunks)
- docs/src/demos/vben-drawer/dynamic/drawer.vue (1 hunks)
- docs/src/demos/vben-drawer/dynamic/index.vue (1 hunks)
- docs/src/demos/vben-drawer/extra/drawer.vue (1 hunks)
- docs/src/demos/vben-drawer/extra/index.vue (1 hunks)
- docs/src/demos/vben-drawer/shared-data/drawer.vue (1 hunks)
- docs/src/demos/vben-drawer/shared-data/index.vue (1 hunks)
- docs/src/demos/vben-modal/auto-height/index.vue (1 hunks)
- docs/src/demos/vben-modal/auto-height/modal.vue (1 hunks)
- docs/src/demos/vben-modal/basic/index.vue (1 hunks)
- docs/src/demos/vben-modal/draggable/index.vue (1 hunks)
- docs/src/demos/vben-modal/draggable/modal.vue (1 hunks)
- docs/src/demos/vben-modal/dynamic/index.vue (1 hunks)
- docs/src/demos/vben-modal/dynamic/modal.vue (1 hunks)
- docs/src/demos/vben-modal/extra/index.vue (2 hunks)
- docs/src/demos/vben-modal/extra/modal.vue (1 hunks)
- docs/src/demos/vben-modal/shared-data/index.vue (1 hunks)
- docs/src/demos/vben-modal/shared-data/modal.vue (1 hunks)
- docs/src/guide/introduction/quick-start.md (2 hunks)
- docs/src/guide/introduction/vben.md (2 hunks)
- docs/src/guide/introduction/why.md (1 hunks)
- internal/lint-configs/eslint-config/src/configs/vue.ts (1 hunks)
- packages/@core/base/design/src/design-tokens/default/index.css (1 hunks)
- packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts (2 hunks)
- packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue (4 hunks)
- packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts (1 hunks)
- packages/@core/ui-kit/popup-ui/src/modal/modal.ts (1 hunks)
- packages/@core/ui-kit/popup-ui/src/modal/modal.vue (9 hunks)
- packages/@core/ui-kit/popup-ui/src/modal/use-modal-draggable.ts (5 hunks)
- packages/@core/ui-kit/shadcn-ui/src/components/spinner/loading.vue (1 hunks)
- packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogContent.vue (1 hunks)
- packages/effects/common-ui/src/components/page/page.vue (1 hunks)
- packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue (1 hunks)
- packages/stores/shim-pinia.d.ts (1 hunks)
- packages/stores/src/modules/tabbar.ts (1 hunks)
- packages/utils/src/helpers/generate-routes-backend.ts (1 hunks)
- playground/src/views/examples/doc-button.vue (1 hunks)
- playground/src/views/examples/drawer/auto-height-demo.vue (3 hunks)
- playground/src/views/examples/drawer/base-demo.vue (1 hunks)
- playground/src/views/examples/drawer/index.vue (2 hunks)
- playground/src/views/examples/modal/auto-height-demo.vue (2 hunks)
- playground/src/views/examples/modal/base-demo.vue (1 hunks)
- playground/src/views/examples/modal/index.vue (2 hunks)
Files skipped from review due to trivial changes (13)
- .github/labeler.yml
- .github/workflows/ci.yml
- docs/src/components/introduction.md
- docs/src/demos/vben-modal/extra/index.vue
- docs/src/demos/vben-modal/extra/modal.vue
- docs/src/guide/introduction/vben.md
- internal/lint-configs/eslint-config/src/configs/vue.ts
- packages/@core/ui-kit/popup-ui/src/modal/use-modal-draggable.ts
- packages/@core/ui-kit/shadcn-ui/src/components/spinner/loading.vue
- packages/stores/shim-pinia.d.ts
- packages/stores/src/modules/tabbar.ts
- packages/utils/src/helpers/generate-routes-backend.ts
- playground/src/views/examples/drawer/base-demo.vue
Additional context used
LanguageTool
docs/src/components/common-ui/vben-drawer.md
[uncategorized] ~41-~41: 您的意思是“对"于"”吗？
Context: ...ata" /> ::: info 注意 -VbenDrawer组件对与参数的处理优先级是slot>props>state(通过a...(YU7_YU8)
docs/src/components/common-ui/vben-modal.md
[uncategorized] ~47-~47: 您的意思是“对"于"”吗？
Context: ...data" /> ::: info 注意 -VbenModal组件对与参数的处理优先级是slot>props>state(通过a...(YU7_YU8)
Additional comments not posted (96)
docs/src/demos/vben-drawer/extra/drawer.vue (2)
1-5: LGTM!The script setup block is correctly importing and initializing the
Drawercomponent.The code changes are approved.
6-8: LGTM!The template block is correctly using the
Drawercomponent.The code changes are approved.
docs/src/demos/vben-modal/draggable/modal.vue (2)
1-7: LGTM!The script setup block is correctly importing and initializing the
Modalcomponent with the draggable option.The code changes are approved.
8-10: LGTM!The template block is correctly using the
Modalcomponent.The code changes are approved.
docs/src/demos/vben-modal/basic/index.vue (2)
Line range hint
1-3: LGTM!The script setup block is correctly importing and initializing the
ModalandVbenButtoncomponents.The code changes are approved.
8-9: LGTM!The template block is correctly using the
VbenButtonandModalcomponents.The code changes are approved.
docs/src/demos/vben-drawer/basic/index.vue (2)
1-5: LGTM!The script setup block is correctly implemented.
The code changes are approved.
6-11: LGTM!The template block is correctly implemented.
The code changes are approved.
playground/src/views/examples/modal/base-demo.vue (2)
Line range hint
10-14: LGTM!The template block is correctly implemented.
The code changes are approved.
Line range hint
1-9: LGTM! But verify the modal's functionality.The script setup block is correctly implemented. However, ensure that the removal of
onOpenChangedoes not affect the modal's functionality.The code changes are approved.
Run the following script to verify the modal's functionality:
playground/src/views/examples/doc-button.vue (2)
1-12: LGTM!The script setup block is correctly implemented.
The code changes are approved.
13-16: LGTM!The template block is correctly implemented.
The code changes are approved.
docs/src/demos/vben-drawer/auto-height/index.vue (1)
16-21: LGTM!The template section is correctly implemented.
The code changes are approved.
docs/src/demos/vben-drawer/extra/index.vue (1)
16-21: LGTM!The template section is correctly implemented.
The code changes are approved.
docs/src/demos/vben-modal/auto-height/index.vue (1)
16-21: LGTM!The template section is correctly implemented.
The code changes are approved.
docs/src/demos/vben-modal/draggable/index.vue (4)
1-5: LGTM!The imports are correctly implemented and necessary for the functionality.
The code changes are approved.
6-9: LGTM!The modal setup using
useVbenModalis correctly implemented.The code changes are approved.
11-13: LGTM!The function
openModalis correctly implemented to open the modal.The code changes are approved.
16-21: LGTM!The template is correctly implemented with the modal and the button to open it.
The code changes are approved.
.github/workflows/labeler.yml (3)
1-6: LGTM!The workflow setup is correct and follows best practices.
The code changes are approved.
7-13: LGTM!The job setup is correct and follows best practices.
The code changes are approved.
14-21: LGTM!The steps are correctly implemented and follow best practices.
The code changes are approved.
docs/src/demos/vben-drawer/shared-data/index.vue (4)
1-5: LGTM!The imports are correctly implemented and necessary for the functionality.
The code changes are approved.
6-9: LGTM!The drawer setup using
useVbenDraweris correctly implemented.The code changes are approved.
11-17: LGTM!The function
openis correctly implemented to set data and open the drawer.The code changes are approved.
20-26: LGTM!The template is correctly implemented with the drawer and the button to open it.
The code changes are approved.
docs/src/demos/vben-modal/shared-data/index.vue (2)
2-5: LGTM!The imports are correct and necessary for the functionality of the component.
The code changes are approved.
20-25: LGTM!The template is correctly implemented and follows Vue best practices.
The code changes are approved.
docs/src/demos/vben-modal/shared-data/modal.vue (2)
2-7: LGTM!The imports and data setup are correct and necessary for the functionality of the component.
The code changes are approved.
22-25: LGTM!The template is correctly implemented and follows Vue best practices.
The code changes are approved.
docs/src/demos/vben-drawer/shared-data/drawer.vue (2)
2-7: LGTM!The imports and data setup are correct and necessary for the functionality of the component.
The code changes are approved.
22-25: LGTM!The template is correctly implemented and follows Vue best practices.
The code changes are approved.
docs/src/demos/vben-drawer/dynamic/drawer.vue (4)
1-3: LGTM!The import statements and initial setup are correct.
The code changes are approved.
4-12: LGTM!The drawer configuration and event handlers are correctly implemented.
The code changes are approved.
14-16: LGTM!The
handleUpdateTitlefunction is correctly implemented.The code changes are approved.
18-25: LGTM!The template section is correctly implemented.
The code changes are approved.
docs/src/demos/vben-modal/dynamic/index.vue (4)
1-4: LGTM!The import statements and initial setup are correct.
The code changes are approved.
6-9: LGTM!The modal configuration and event handlers are correctly implemented.
The code changes are approved.
11-18: LGTM!The
openModalandhandleUpdateTitlefunctions are correctly implemented.The code changes are approved.
21-29: LGTM!The template section is correctly implemented.
The code changes are approved.
docs/src/demos/vben-drawer/dynamic/index.vue (4)
1-4: LGTM!The import statements and initial setup are correct.
The code changes are approved.
6-9: LGTM!The drawer configuration and event handlers are correctly implemented.
The code changes are approved.
11-18: LGTM!The
openandhandleUpdateTitlefunctions are correctly implemented.The code changes are approved.
21-29: LGTM!The template section is correctly implemented.
The code changes are approved.
docs/src/guide/introduction/why.md (4)
3-7: LGTM!The section provides a clear and concise explanation of the framework's philosophy.
The content is approved.
9-16: LGTM!The section provides a detailed and informative explanation of the framework's history and evolution.
The content is approved.
17-20: LGTM!The section effectively emphasizes the importance of unit testing and provides relevant information about the use of
vitest.The content is approved.
21-23: LGTM!The section provides a comprehensive overview of the tools and practices used to ensure code quality.
The content is approved.
docs/src/demos/vben-modal/dynamic/modal.vue (4)
1-13: LGTM!The function is correctly implemented and follows best practices.
The code changes are approved.
17-19: LGTM!The function is correctly implemented and follows best practices.
The code changes are approved.
21-25: LGTM!The function is correctly implemented and follows best practices.
The code changes are approved.
27-38: LGTM!The template block is correctly implemented and follows best practices.
The code changes are approved.
playground/src/views/examples/modal/auto-height-demo.vue (3)
24-29: LGTM!The function is correctly implemented and enhances the flexibility of the modal component.
The code changes are approved.
17-20: LGTM!The function is correctly implemented and ensures that the list is populated with a specific set of values immediately upon opening the modal.
The code changes are approved.
Line range hint
32-43: LGTM!The template block is correctly implemented and follows best practices.
The code changes are approved.
playground/src/views/examples/drawer/auto-height-demo.vue (4)
8-8: LGTM!The reactive reference
listis correctly defined.The code changes are approved.
18-22: LGTM!The event handler correctly triggers the
handleUpdatefunction with the specified length when the drawer is opened.The code changes are approved.
25-30: LGTM!The function correctly generates an array of the specified length and updates the
listreactive reference. The use ofsetTimeoutsimulates an asynchronous operation.The code changes are approved.
44-44: LGTM!The button correctly calls the
handleUpdatefunction with the specified length.The code changes are approved.
docs/src/demos/vben-modal/auto-height/modal.vue (4)
1-7: LGTM!The imports and reactive reference
listare correctly defined.The code changes are approved.
8-20: LGTM!The modal instance and event handlers are correctly defined. The
onOpenChangehandler correctly triggers thehandleUpdatefunction with the specified length.The code changes are approved.
22-28: LGTM!The function correctly generates an array of the specified length and updates the
listreactive reference. The use ofsetTimeoutsimulates an asynchronous operation.The code changes are approved.
30-45: LGTM!The template correctly defines the modal, list of items, and button to update the list. The button correctly calls the
handleUpdatefunction with the specified length.The code changes are approved.
docs/src/demos/vben-drawer/auto-height/drawer.vue (4)
1-7: LGTM!The imports and reactive reference
listare correctly defined.The code changes are approved.
8-20: LGTM!The drawer instance and event handlers are correctly defined. The
onOpenChangehandler correctly triggers thehandleUpdatefunction with the specified length.The code changes are approved.
22-28: LGTM!The function correctly generates an array of the specified length and updates the
listreactive reference. The use ofsetTimeoutsimulates an asynchronous operation.The code changes are approved.
30-45: LGTM!The template correctly defines the drawer, list of items, and button to update the list. The button correctly calls the
handleUpdatefunction with the specified length.The code changes are approved.
packages/effects/common-ui/src/components/page/page.vue (1)
33-34: LGTM!The addition of the "extra" slot enhances the flexibility and reusability of the component.
The code changes are approved.
.github/release-drafter.yml (1)
22-22: LGTM!The re-categorization of the "enhancement" label clarifies the distinction between feature enhancements and performance-related updates.
The code changes are approved.
docs/src/guide/introduction/quick-start.md (2)
Line range hint
75-98: LGTM!The addition of the "选择项目" (Select Project) section enhances user experience by providing clearer instructions and visually distinguishing the selected application.
The code changes are approved.
99-109: LGTM!The addition of the "运行指定项目" (Run Specified Project) section enhances user experience by providing options for running specific applications directly.
The code changes are approved.
packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue (1)
50-50: LGTM!The
headerattribute is correctly set tofalse, effectively removing the header from the modal.The code changes are approved.
packages/@core/ui-kit/popup-ui/src/modal/modal.ts (1)
63-67: LGTM!The addition of the
headerproperty to theModalPropsinterface enhances the flexibility of the modal component.The code changes are approved.
packages/@core/ui-kit/shadcn-ui/src/components/ui/dialog/DialogContent.vue (1)
47-47: LGTM!The removal of the
backdrop-blur-smclass simplifies the class attribute and may impact the visual presentation of the dialog overlay.The code changes are approved.
playground/src/views/examples/drawer/index.vue (2)
6-6: LGTM!The import statement for
DocButtonis correctly added.The code changes are approved.
60-62: LGTM!The new template slot
#extrawithDocButtonis correctly added and enhances the user interface by providing direct access to documentation.The code changes are approved.
packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts (1)
95-99: LGTM!The changes to the
onCancelmethod enhance the clarity of the control flow by ensuring that theclosemethod is called only when there is noonCancelhandler defined.The code changes are approved.
playground/src/views/examples/modal/index.vue (3)
6-6: LGTM!The import statement for
DocButtonis correctly added.The code changes are approved.
66-66: LGTM!The updated description in the
<Page>component enhances the informational context provided to users.The code changes are approved.
69-71: LGTM!The new template slot
#extrawithDocButtonis correctly added and enhances the user interface by providing direct access to documentation.The code changes are approved.
packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts (1)
41-41: LGTM!The addition of the
headerproperty to the default configuration object enhances the modal's structure by ensuring a header is displayed.The code changes are approved.
.github/workflows/deploy.yml (5)
Line range hint
9-39: LGTM!The job
deploy-playground-ftpis well-structured and follows best practices for CI/CD workflows.The code changes are approved.
Line range hint
40-63: LGTM!The job
deploy-docs-ftpis well-structured and follows best practices for CI/CD workflows.The code changes are approved.
Line range hint
64-94: LGTM!The job
deploy-antd-ftpis well-structured and follows best practices for CI/CD workflows.The code changes are approved.
Line range hint
95-125: LGTM!The job
deploy-ele-ftpis well-structured and follows best practices for CI/CD workflows.The code changes are approved.
Line range hint
126-156: LGTM!The job
deploy-naive-ftpis well-structured and follows best practices for CI/CD workflows.The code changes are approved.
packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue (3)
4-5: LGTM!The import statements for
refandwatchare correct and necessary for the new functionality.The code changes are approved.
36-37: LGTM!The reactive reference
wrapperRefis correctly defined and will be useful for programmatic scrolling behavior.The code changes are approved.
54-64: LGTM!The
watchfunction is correctly implemented and enhances the user experience by ensuring that the content is visible when loading is active.The code changes are approved.
packages/@core/ui-kit/popup-ui/src/modal/modal.vue (5)
42-43: LGTM!The reactive reference
wrapperRefis correctly defined and will be useful for programmatic scrolling behavior.The code changes are approved.
68-70: LGTM!The adjusted logic for the
shouldFullscreencomputed property is correct and ensures that fullscreen mode is only activated under the specified conditions.The code changes are approved.
72-73: LGTM!The adjusted logic for the
shouldDraggablecomputed property is correct and ensures that the modal can only be dragged when a header is present.The code changes are approved.
87-95: LGTM!The streamlined watch function enhances performance and reduces unnecessary checks.
The code changes are approved.
97-104: LGTM!The
watchfunction is correctly implemented and enhances the user experience by ensuring that the content is visible when loading is active.The code changes are approved.
docs/.vitepress/config/zh.mts (1)
157-161: LGTM!The new sidebar items are added appropriately.
The code changes are approved.
packages/@core/base/design/src/design-tokens/default/index.css (1)
80-80: LGTM!The change to the
--overlayvariable is correct and aligns with the intended usage.The code changes are approved.
|
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)
- .github/labeler.yml (1 hunks)
Additional comments not posted (5)
.github/labeler.yml (5)
1-3: LGTM!The
featurelabel configuration is correctly implemented.The code changes are approved.
5-6: LGTM!The
buglabel configuration is correctly implemented.The code changes are approved.
8-9: LGTM!The
chorelabel configuration is correctly implemented.The code changes are approved.
11-12: LGTM!The
perflabel configuration is correctly implemented.The code changes are approved.
14-16: LGTM!The
documentationlabel configuration is correctly implemented.The code changes are approved.
1 participant
…problems
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
Improvements
Bug Fixes