docs: ✏️ 调整文档结构增加文档内容可用宽度#765
Merged
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough此次变更涉及多个组件的文档更新和功能增强，包括对 VitePress 配置的修改、Vue 组件的新增和改进，以及现有组件文档的重写和扩展。主要更新包括添加新属性、事件和插槽，改善用户交互和组件可定制性，提升文档的清晰度和可读性。整体结构保持一致，但内容更加详尽，便于开发者理解和使用。 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant App
participant Component
User->>App: Interact with components
App->>Component: Render updated component
Component-->>App: Return rendered output
App-->>User: Display updated UI
Possibly related PRs
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 (
|
Deploying wot-design-uni with
|
| Latest commit: |
3890355
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://a26fee78.wot-design-uni.pages.dev |
| Branch Preview URL: | https://docs-vitepress-improve.wot-design-uni.pages.dev |
✅ Deploy Preview for wot-design-uni ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![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
🧹 Outside diff range and nitpick comments (12)
docs/.vitepress/theme/index.ts (2)
Line range hint
1-8: 建议完善文件头部注释内容文件头部的注释缺少对文件功能的具体描述，建议补充说明该文件的主要用途和职责。
建议按照以下方式修改：
/* * @Author: weisheng * @Date: 2024-10-12 22:09:33 * @LastEditTime: 2024-12-07 17:06:42 * @LastEditors: weisheng - * @Description: + * @Description: VitePress主题配置文件，用于自定义文档站点的布局和组件 * @FilePath: /wot-design-uni/docs/.vitepress/theme/index.ts * 记得注释 */
Line range hint
9-22: 建议对导入语句进行分组整理当前的导入语句混合了Vue核心、VitePress主题、自定义组件和第三方库，建议按类别分组以提高可读性。
建议按照以下结构重新组织：
+ // Vue 核心 import { h } from 'vue' + + // VitePress 主题 import Theme from 'vitepress/theme' import './styles/vars.css' import './styles/custom.css' import './styles/scrollbar.scss' + // 自定义组件 import HomeFriendly from './components/HomeFriendly.vue' import NavBarTitleAfter from './components/NavBarTitleAfter.vue' import CustomFooter from './components/CustomFooter.vue' import SvgImage from './components/SvgImage.vue' import HomeStar from './components/HomeStar.vue' import ExternalLink from './components/ExternalLink.vue' + + // 第三方库 import ElementPlus from 'element-plus' import 'element-plus/dist/index.css'docs/.vitepress/theme/components/VPIframe.vue (1)
2-3: 建议移除已废弃的属性frameborder和scrolling
iframe标签中的frameborder和scrolling属性在 HTML5 中已被废弃，建议使用 CSS 来替代这些样式。您可以应用以下修改：
- <iframe v-if="href" ref="iframe" id="demo" class="iframe demo-model" scrolling="auto" frameborder="0" + <iframe v-if="href" ref="iframe" id="demo" class="iframe demo-model" :src="href"></iframe>docs/.vitepress/theme/components/VPSidebar.vue (2)
18-27: 优化对props的监听建议在
watch中直接监听props.open，提高监听的准确性，避免不必要的触发。您可以修改为：
- watch( - [props, navEl], + watch( + [() => props.open, navEl],
31-37: 注意深度监听sidebarGroups的性能影响对
sidebarGroups进行深度监听可能会带来性能开销，尤其是当数据量较大时。建议评估是否需要深度监听，或使用更精确的监听策略。docs/.vitepress/theme/components/VPNavBar.vue (1)
1-9: 移除文件头部不必要的注释文件头部的注释包含多余信息，如文件路径和提醒性注释“记得注释”。建议在提交前删除或更新这些注释，以保持代码整洁。
您可以删除这些注释，或根据需要添加有意义的说明性注释。
docs/.vitepress/theme/styles/vars.css (2)
Line range hint
98-109: 优化暗色模式下的链接样式选择器选择器的格式调整更加规范，但建议为复杂的选择器添加注释说明用途。
+/* 处理暗色模式下各类链接的悬停状态 */ .dark .vp-doc a, .dark .vp-doc a>code, .dark .VPNavBarMenuLink.VPNavBarMenuLink:hover,
127-130: 侧边栏变量定义新增的侧边栏宽度和背景色变量有助于统一管理布局样式，符合文档结构优化的目标。建议考虑添加暗色模式下的背景色变量。
:root { --vp-sidebar-width: 338px; --vp-sidebar-bg-color: #ffffff; } +.dark { + --vp-sidebar-bg-color: var(--vp-c-bg); +}docs/.vitepress/theme/components/VPContent.vue (2)
3-3: 建议简化导入路径导入路径可以简化，避免使用过长的相对路径。
-import NotFound from 'vitepress/dist/client/theme-default//NotFound.vue' +import NotFound from 'vitepress/theme/NotFound.vue'
9-9: 建议使用更精确的类型定义使用
:any类型断言可能会掩盖潜在的类型错误。建议使用 VitePress 提供的类型定义。-const { page, frontmatter }:any = useData() +const { page, frontmatter } = useData()docs/.vitepress/config.mts (2)
30-63: 建议优化组件别名配置当前的别名配置方式较为冗长，可以使用更简洁的方式。
resolve: { - alias: [ - { - find: /^.*\/VPSidebar\.vue$/, - replacement: fileURLToPath( - new URL('./theme/components/VPSidebar.vue', import.meta.url) - ) - }, - // ... other aliases - ] + alias: { + '@theme': fileURLToPath(new URL('./theme', import.meta.url)) + } }然后在组件中使用
@theme/components/VPSidebar.vue的方式导入。
29-29: 建议将 SSR 配置移至专门的配置文件为了更好的配置管理，建议将 SSR 相关的配置移至独立的配置文件。
建议创建
ssr.config.ts文件来管理所有 SSR 相关的配置。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (82)
docs/.vitepress/config.mts(2 hunks)docs/.vitepress/plugins/markdown-transform.ts(2 hunks)docs/.vitepress/theme/components/CustomFooter.vue(1 hunks)docs/.vitepress/theme/components/VPContent.vue(1 hunks)docs/.vitepress/theme/components/VPDoc.vue(1 hunks)docs/.vitepress/theme/components/VPIframe.vue(4 hunks)docs/.vitepress/theme/components/VPLocalNav.vue(1 hunks)docs/.vitepress/theme/components/VPNavBar.vue(1 hunks)docs/.vitepress/theme/components/VPSidebar.vue(1 hunks)docs/.vitepress/theme/index.ts(1 hunks)docs/.vitepress/theme/styles/vars.css(4 hunks)docs/component/action-sheet.md(0 hunks)docs/component/backtop.md(0 hunks)docs/component/badge.md(0 hunks)docs/component/button.md(0 hunks)docs/component/calendar-view.md(0 hunks)docs/component/calendar.md(0 hunks)docs/component/card.md(0 hunks)docs/component/cell.md(0 hunks)docs/component/checkbox.md(0 hunks)docs/component/circle.md(0 hunks)docs/component/col-picker.md(0 hunks)docs/component/collapse.md(0 hunks)docs/component/config-provider.md(0 hunks)docs/component/count-down.md(0 hunks)docs/component/count-to.md(0 hunks)docs/component/curtain.md(0 hunks)docs/component/datetime-picker-view.md(0 hunks)docs/component/datetime-picker.md(0 hunks)docs/component/divider.md(0 hunks)docs/component/drop-menu.md(0 hunks)docs/component/fab.md(0 hunks)docs/component/form.md(0 hunks)docs/component/gap.md(0 hunks)docs/component/grid.md(0 hunks)docs/component/icon.md(0 hunks)docs/component/img-cropper.md(0 hunks)docs/component/img.md(0 hunks)docs/component/index-bar.md(1 hunks)docs/component/input-number.md(0 hunks)docs/component/input.md(0 hunks)docs/component/keyboard.md(0 hunks)docs/component/layout.md(0 hunks)docs/component/loading.md(0 hunks)docs/component/loadmore.md(0 hunks)docs/component/message-box.md(0 hunks)docs/component/navbar.md(0 hunks)docs/component/notice-bar.md(0 hunks)docs/component/notify.md(0 hunks)docs/component/number-keyboard.md(0 hunks)docs/component/overlay.md(0 hunks)docs/component/pagination.md(0 hunks)docs/component/password-input.md(0 hunks)docs/component/picker-view.md(0 hunks)docs/component/picker.md(0 hunks)docs/component/popover.md(0 hunks)docs/component/popup.md(0 hunks)docs/component/progress.md(0 hunks)docs/component/radio.md(0 hunks)docs/component/rate.md(0 hunks)docs/component/resize.md(0 hunks)docs/component/search.md(0 hunks)docs/component/segmented.md(0 hunks)docs/component/select-picker.md(0 hunks)docs/component/sidebar.md(0 hunks)docs/component/skeleton.md(0 hunks)docs/component/slider.md(0 hunks)docs/component/sort-button.md(0 hunks)docs/component/status-tip.md(0 hunks)docs/component/steps.md(0 hunks)docs/component/sticky.md(0 hunks)docs/component/swipe-action.md(0 hunks)docs/component/swiper.md(0 hunks)docs/component/switch.md(0 hunks)docs/component/tabbar.md(0 hunks)docs/component/table.md(0 hunks)docs/component/tabs.md(0 hunks)docs/component/tag.md(0 hunks)docs/component/text.md(0 hunks)docs/component/textarea.md(0 hunks)docs/component/toast.md(0 hunks)docs/component/tooltip.md(0 hunks)
⛔ Files not processed due to max files limit (6)
- docs/component/transition.md
- docs/component/upload.md
- docs/component/watermark.md
- package.json
- src/pages/radio/Index.vue
- src/uni_modules/wot-design-uni/components/wd-radio/types.ts
💤 Files with no reviewable changes (70)
- docs/component/backtop.md
- docs/component/switch.md
- docs/component/count-to.md
- docs/component/resize.md
- docs/component/gap.md
- docs/component/button.md
- docs/component/img.md
- docs/component/input-number.md
- docs/component/divider.md
- docs/component/layout.md
- docs/component/card.md
- docs/component/drop-menu.md
- docs/component/progress.md
- docs/component/count-down.md
- docs/component/config-provider.md
- docs/component/icon.md
- docs/component/navbar.md
- docs/component/slider.md
- docs/component/circle.md
- docs/component/search.md
- docs/component/skeleton.md
- docs/component/fab.md
- docs/component/popup.md
- docs/component/loading.md
- docs/component/segmented.md
- docs/component/sticky.md
- docs/component/tabs.md
- docs/component/datetime-picker.md
- docs/component/calendar-view.md
- docs/component/swipe-action.md
- docs/component/toast.md
- docs/component/number-keyboard.md
- docs/component/textarea.md
- docs/component/rate.md
- docs/component/checkbox.md
- docs/component/tabbar.md
- docs/component/curtain.md
- docs/component/notify.md
- docs/component/keyboard.md
- docs/component/password-input.md
- docs/component/datetime-picker-view.md
- docs/component/swiper.md
- docs/component/col-picker.md
- docs/component/message-box.md
- docs/component/cell.md
- docs/component/sort-button.md
- docs/component/loadmore.md
- docs/component/input.md
- docs/component/calendar.md
- docs/component/tooltip.md
- docs/component/select-picker.md
- docs/component/collapse.md
- docs/component/picker-view.md
- docs/component/pagination.md
- docs/component/radio.md
- docs/component/grid.md
- docs/component/table.md
- docs/component/text.md
- docs/component/popover.md
- docs/component/tag.md
- docs/component/steps.md
- docs/component/action-sheet.md
- docs/component/sidebar.md
- docs/component/status-tip.md
- docs/component/form.md
- docs/component/img-cropper.md
- docs/component/badge.md
- docs/component/picker.md
- docs/component/overlay.md
- docs/component/notice-bar.md
✅ Files skipped from review due to trivial changes (1)
- docs/component/index-bar.md
🔇 Additional comments (15)
docs/.vitepress/theme/index.ts (2)
Line range hint 25-34: 布局配置结构清晰，符合最佳实践
主题布局配置采用了VitePress推荐的插槽注入方式，结构清晰。
Line range hint 35-40: 建议增加类型安全性
在enhanceApp函数中，建议添加TypeScript类型定义以增强代码的可维护性。
建议按照以下方式改进：
- enhanceApp({ app }) {
+ enhanceApp({ app }: { app: any }) {
app.component('SvgImage', SvgImage)
app.component('ExternalLink',ExternalLink)
app.use(ElementPlus)
},另外，建议验证ElementPlus的集成是否真的必要，因为这会增加文档站点的体积。
✅ Verification successful
Let me check the actual usage of Element Plus components in these files.
Element Plus 组件确实在文档中被使用，建议保留但优化类型定义
根据验证，Element Plus 组件在文档中有实际使用场景：
- 在 changelog.md 中使用 ElTag 显示组件版本信息
- 在 join-group.md 中使用 ElMessage 和 ElMessageBox 实现交互功能
建议采用以下改进：
- enhanceApp({ app }) {
+ enhanceApp({ app }: { app: import('vue').App }) {
app.component('SvgImage', SvgImage)
app.component('ExternalLink',ExternalLink)
app.use(ElementPlus)
},🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查ElementPlus组件的使用情况
rg -l "ElButton|ElInput|El[A-Z]" docs/
Length of output: 133
Script:
#!/bin/bash
# Check the actual usage of Element Plus components in the identified files
echo "=== changelog.md ==="
rg "ElButton|ElInput|El[A-Z]" docs/guide/changelog.md -A 2
echo -e "\n=== join-group.md ==="
rg "ElButton|ElInput|El[A-Z]" docs/guide/join-group.md -A 2
Length of output: 892
docs/.vitepress/theme/components/VPIframe.vue (7)
9-9: 将 baseUrl 变量转换为响应式引用
将 baseUrl 从普通变量转换为 ref，以适应在生命周期钩子中动态更新的需求，这是符合 Vue 3 最佳实践的做法。
17-19: 更新 href 计算属性以适应响应式的 baseUrl
在计算属性中使用 baseUrl.value，确保正确获取最新的 baseUrl 值。
29-29: 在 onMounted 中设置 baseUrl.value
根据运行环境动态设置 baseUrl.value，确保在生产和开发环境中 iframe 能够正确加载。
67-68: 调整 .demo-model 的定位属性
更新了 .demo-model 的 right 和 top 属性，优化了组件在页面中的位置布局。
85-89: 为大屏幕调整 .demo-model 的位置
在屏幕宽度不小于 1280px 时，调整了 .demo-model 的 right 属性，改善了大屏幕下的显示效果。
96-98: 为更大屏幕调整 .demo-model 的尺寸和位置
在屏幕宽度不小于 1440px 时，更新了 .demo-model 的 width、height 和 right 属性，提供了更好的用户体验。
104-106: 在小屏幕上隐藏 .demo-model
在屏幕宽度小于 1280px 时，将 .demo-model 设置为 display: none，以提高移动设备上的内容可读性。
docs/.vitepress/theme/components/VPLocalNav.vue (1)
1-166: 组件实现良好，符合最佳实践
代码结构清晰，逻辑合理，样式定义规范，符合 Vue 3 和 VitePress 的最佳实践。
docs/.vitepress/plugins/markdown-transform.ts (2)
2-2: 导入语句的改进
从类型导入改为常规导入更符合最佳实践，因为 Plugin 不仅仅是类型定义。
11-11: 验证组件文档的转换逻辑
将检查条件从 <frame/> 更改为 /component 使转换更加明确，但需要确保所有组件文档都位于正确的路径下。
✅ Verification successful
组件文档路径验证已完成
根据检查结果，所有组件的文档都已正确放置在 /component 目录下，包括 action-sheet、backtop、badge 等所有组件。修改检查条件从 <frame/> 到 /component 是安全的，不会遗漏任何组件文档。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：验证组件文档的位置是否符合新的路径要求
# 检查是否有组件文档不在 /component 目录下
fd -e md | rg -v '/component' | rg -l 'wd-'
Length of output: 41
Script:
#!/bin/bash
# 检查组件文档的位置分布
fd -e md -d 3 .
# 检查包含 wd- 前缀的文件
rg -l "wd-" .
Length of output: 21510
docs/.vitepress/theme/components/CustomFooter.vue (1)
12-13: 优化 VitePress 导入路径
从具体路径改为使用官方推荐的导入路径，这样可以更好地适应 VitePress 的版本更新。
docs/.vitepress/theme/styles/vars.css (1)
42-48: 改进渐变色定义的格式
渐变色定义的格式调整提高了代码的可读性，便于维护。
docs/.vitepress/theme/components/VPContent.vue (1)
41-44: 建议增加动态组件的错误处理
使用动态组件时，应该添加错误处理以防止未知布局导致的运行时错误。
| <template> | ||
| <div | ||
| class="VPDoc" | ||
| :class="{ 'has-sidebar': hasSidebar, 'has-aside': hasAside ,' is-component': isComponent }" |
There was a problem hiding this comment.
修正类名绑定中的多余空格
在绑定类名时，' is-component' 前多了一个空格，可能导致类名错误或样式无法正确应用。
建议修改为：
- :class="{ 'has-sidebar': hasSidebar, 'has-aside': hasAside ,' is-component': isComponent }"
+ :class="{ 'has-sidebar': hasSidebar, 'has-aside': hasAside, 'is-component': isComponent }"📝 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.
Suggested change
| :class="{ 'has-sidebar': hasSidebar, 'has-aside': hasAside ,' is-component': isComponent }" | |
| :class="{ 'has-sidebar': hasSidebar, 'has-aside': hasAside, 'is-component': isComponent }" |
| import { useRoute } from 'vitepress' | ||
| import { computed } from 'vue' | ||
| import VPDocAside from 'vitepress/dist/client/theme-default/components/VPDocAside.vue' | ||
| import VPDocFooter from 'vitepress/dist/client/theme-default/components//VPDocFooter.vue' |
There was a problem hiding this comment.
修正多余斜杠导致的导入路径错误
在导入 VPDocFooter 时，路径中多了一个斜杠，可能导致模块无法正确加载。
建议修改为：
- import VPDocFooter from 'vitepress/dist/client/theme-default/components//VPDocFooter.vue'
+ import VPDocFooter from 'vitepress/dist/client/theme-default/components/VPDocFooter.vue'📝 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.
Suggested change
| import VPDocFooter from 'vitepress/dist/client/theme-default/components//VPDocFooter.vue' | |
| import VPDocFooter from 'vitepress/dist/client/theme-default/components/VPDocFooter.vue' |
|
|
||
|
|
||
| const { theme } = useData() | ||
| const { theme }:any = useData() |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议改进类型定义
使用 any 类型断言可能会降低类型安全性。建议使用 VitePress 提供的类型定义。
-const { theme }:any = useData()
+import type { DefaultTheme } from 'vitepress/theme'
+const { theme } = useData<DefaultTheme>()📝 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.
Suggested change
| const { theme }:any = useData() | |
| import type { DefaultTheme } from 'vitepress/theme' | |
| const { theme } = useData<DefaultTheme>() |
Comment on lines
+81
to
+93
| .VPNavBar.container{ | ||
| max-width: auto; | ||
| } |
There was a problem hiding this comment.
修复 CSS 属性值错误
max-width: auto 是无效的 CSS 属性值。
-.VPNavBar.container{
- max-width: auto;
-}
+.VPNavBar.container{
+ max-width: none;
+}📝 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.
Suggested change
| .VPNavBar.container{ | |
| max-width: auto; | |
| } | |
| .VPNavBar.container{ | |
| max-width: none; | |
| } |
Moonofweisheng
force-pushed
the
docs/vitepress-improve
branch
from
fd540f2 to
9cf6f44
Compare
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Outside diff range and nitpick comments (1)
docs/.vitepress/theme/components/VPLocalNav.vue (1)
26-31: 建议在 parseInt 中指定 radix 参数在第27行的
parseInt()函数中，建议指定 radix 参数为 10，以确保在所有环境下正确解析数值。可以应用以下修改：
navHeight.value = parseInt( getComputedStyle(document.documentElement).getPropertyValue( '--vp-nav-height' - ) + ), 10 )
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (82)
docs/.vitepress/config.mts(2 hunks)docs/.vitepress/plugins/markdown-transform.ts(2 hunks)docs/.vitepress/theme/components/CustomFooter.vue(1 hunks)docs/.vitepress/theme/components/VPContent.vue(1 hunks)docs/.vitepress/theme/components/VPDoc.vue(1 hunks)docs/.vitepress/theme/components/VPIframe.vue(1 hunks)docs/.vitepress/theme/components/VPLocalNav.vue(1 hunks)docs/.vitepress/theme/components/VPNavBar.vue(1 hunks)docs/.vitepress/theme/components/VPSidebar.vue(1 hunks)docs/.vitepress/theme/components/frame.vue(0 hunks)docs/.vitepress/theme/index.ts(1 hunks)docs/.vitepress/theme/styles/vars.css(4 hunks)docs/component/action-sheet.md(0 hunks)docs/component/backtop.md(0 hunks)docs/component/badge.md(0 hunks)docs/component/button.md(0 hunks)docs/component/calendar-view.md(0 hunks)docs/component/calendar.md(0 hunks)docs/component/card.md(0 hunks)docs/component/cell.md(0 hunks)docs/component/checkbox.md(0 hunks)docs/component/circle.md(0 hunks)docs/component/col-picker.md(0 hunks)docs/component/collapse.md(0 hunks)docs/component/config-provider.md(0 hunks)docs/component/count-down.md(0 hunks)docs/component/count-to.md(0 hunks)docs/component/curtain.md(0 hunks)docs/component/datetime-picker-view.md(0 hunks)docs/component/datetime-picker.md(0 hunks)docs/component/divider.md(0 hunks)docs/component/drop-menu.md(0 hunks)docs/component/fab.md(0 hunks)docs/component/form.md(0 hunks)docs/component/gap.md(0 hunks)docs/component/grid.md(0 hunks)docs/component/icon.md(0 hunks)docs/component/img-cropper.md(0 hunks)docs/component/img.md(0 hunks)docs/component/index-bar.md(1 hunks)docs/component/input-number.md(0 hunks)docs/component/input.md(0 hunks)docs/component/keyboard.md(0 hunks)docs/component/layout.md(0 hunks)docs/component/loading.md(0 hunks)docs/component/loadmore.md(0 hunks)docs/component/message-box.md(0 hunks)docs/component/navbar.md(0 hunks)docs/component/notice-bar.md(0 hunks)docs/component/notify.md(0 hunks)docs/component/number-keyboard.md(0 hunks)docs/component/overlay.md(0 hunks)docs/component/pagination.md(0 hunks)docs/component/password-input.md(0 hunks)docs/component/picker-view.md(0 hunks)docs/component/picker.md(0 hunks)docs/component/popover.md(0 hunks)docs/component/popup.md(0 hunks)docs/component/progress.md(0 hunks)docs/component/radio.md(0 hunks)docs/component/rate.md(0 hunks)docs/component/resize.md(0 hunks)docs/component/search.md(0 hunks)docs/component/segmented.md(0 hunks)docs/component/select-picker.md(0 hunks)docs/component/sidebar.md(0 hunks)docs/component/skeleton.md(0 hunks)docs/component/slider.md(0 hunks)docs/component/sort-button.md(0 hunks)docs/component/status-tip.md(0 hunks)docs/component/steps.md(0 hunks)docs/component/sticky.md(0 hunks)docs/component/swipe-action.md(0 hunks)docs/component/swiper.md(0 hunks)docs/component/switch.md(0 hunks)docs/component/tabbar.md(0 hunks)docs/component/table.md(0 hunks)docs/component/tabs.md(0 hunks)docs/component/tag.md(0 hunks)docs/component/text.md(0 hunks)docs/component/textarea.md(0 hunks)docs/component/toast.md(0 hunks)
⛔ Files not processed due to max files limit (7)
- docs/component/tooltip.md
- docs/component/transition.md
- docs/component/upload.md
- docs/component/watermark.md
- package.json
- src/pages/radio/Index.vue
- src/uni_modules/wot-design-uni/components/wd-radio/types.ts
💤 Files with no reviewable changes (70)
- docs/component/count-to.md
- docs/component/backtop.md
- docs/component/layout.md
- docs/component/gap.md
- docs/component/button.md
- docs/component/img.md
- docs/component/icon.md
- docs/component/switch.md
- docs/component/search.md
- docs/.vitepress/theme/components/frame.vue
- docs/component/count-down.md
- docs/component/overlay.md
- docs/component/pagination.md
- docs/component/curtain.md
- docs/component/sticky.md
- docs/component/resize.md
- docs/component/divider.md
- docs/component/skeleton.md
- docs/component/datetime-picker-view.md
- docs/component/sort-button.md
- docs/component/segmented.md
- docs/component/config-provider.md
- docs/component/password-input.md
- docs/component/swipe-action.md
- docs/component/form.md
- docs/component/fab.md
- docs/component/tabbar.md
- docs/component/slider.md
- docs/component/circle.md
- docs/component/card.md
- docs/component/popup.md
- docs/component/toast.md
- docs/component/input-number.md
- docs/component/input.md
- docs/component/rate.md
- docs/component/action-sheet.md
- docs/component/drop-menu.md
- docs/component/textarea.md
- docs/component/navbar.md
- docs/component/datetime-picker.md
- docs/component/swiper.md
- docs/component/keyboard.md
- docs/component/tabs.md
- docs/component/collapse.md
- docs/component/table.md
- docs/component/sidebar.md
- docs/component/badge.md
- docs/component/grid.md
- docs/component/calendar-view.md
- docs/component/select-picker.md
- docs/component/col-picker.md
- docs/component/message-box.md
- docs/component/number-keyboard.md
- docs/component/progress.md
- docs/component/notify.md
- docs/component/status-tip.md
- docs/component/text.md
- docs/component/picker.md
- docs/component/radio.md
- docs/component/popover.md
- docs/component/calendar.md
- docs/component/loading.md
- docs/component/steps.md
- docs/component/loadmore.md
- docs/component/tag.md
- docs/component/img-cropper.md
- docs/component/picker-view.md
- docs/component/cell.md
- docs/component/checkbox.md
- docs/component/notice-bar.md
🚧 Files skipped from review as they are similar to previous changes (6)
- docs/.vitepress/theme/index.ts
- docs/component/index-bar.md
- docs/.vitepress/theme/components/VPContent.vue
- docs/.vitepress/plugins/markdown-transform.ts
- docs/.vitepress/theme/styles/vars.css
- docs/.vitepress/theme/components/CustomFooter.vue
🔇 Additional comments (6)
docs/.vitepress/theme/components/VPIframe.vue (1)
95-100:
确保在 onTransitionEnd 中使用正确的状态检查
在 onTransitionEnd 函数中，直接使用 props.expanded 可能不会反映最新的状态。由于 props.expanded 的更新可能是异步的，建议使用 transitionEnd 或在触发条件中使用与状态变化同步的变量。
应用以下差异以修复此问题：
function onTransitionEnd() {
- if (!props.expanded) {
+ if (!transitionEnd.value) {
transitionEnd.value = true
}
}Likely invalid or redundant comment.
docs/.vitepress/theme/components/VPNavBar.vue (1)
1-266: 代码良好，组件实现正确
整个导航栏组件实现了预期的功能，代码清晰，结构合理，没有发现明显问题。
docs/.vitepress/theme/components/VPSidebar.vue (1)
1-130: 代码良好，组件实现正确
侧边栏组件的实现符合预期，代码结构清晰，逻辑正确，没有发现明显问题。
docs/.vitepress/theme/components/VPDoc.vue (2)
5-5:
修正导入路径中的多余斜杠
在第5行，导入 VPDocFooter 时，路径中有多余的斜杠，可能导致模块无法正确加载。
建议修改为：
- import VPDocFooter from 'vitepress/dist/client/theme-default/components//VPDocFooter.vue'
+ import VPDocFooter from 'vitepress/dist/client/theme-default/components/VPDocFooter.vue'25-25:
修正类名绑定中的多余空格
在第25行，绑定类名时，' is-component' 前多了一个空格，可能导致类名错误或样式无法正确应用。
建议修改为：
- :class="{ 'has-sidebar': hasSidebar, 'has-aside': hasAside ,' is-component': isComponent, 'is-expanded': expanded }"
+ :class="{ 'has-sidebar': hasSidebar, 'has-aside': hasAside, 'is-component': isComponent, 'is-expanded': expanded }"docs/.vitepress/config.mts (1)
Line range hint 12-63: Alias 配置正确，便于组件引用
在 Vite 配置中添加了组件的别名设置，路径解析正确，有助于在项目中方便地引用新组件。
Comment on lines
+84
to
+81
| function toggleExpand() { | ||
| // 触发事件通知父组件 | ||
| emit('update:expanded', !props.expanded) | ||
| emit('state-change', !props.expanded) | ||
|
|
||
| if (props.expanded) { | ||
| transitionEnd.value = false | ||
| } | ||
| } |
There was a problem hiding this comment.
修复 toggleExpand 函数中的状态更新逻辑
在 toggleExpand 函数中，您在更新 expanded 状态后立即使用 props.expanded，这可能导致逻辑错误。由于 props.expanded 的更新是异步的，立即读取它可能不会得到最新的值。建议使用一个局部变量存储更新后的状态。
应用以下差异以修复此问题：
function toggleExpand() {
+ const newExpanded = !props.expanded
// 触发事件通知父组件
- emit('update:expanded', !props.expanded)
- emit('state-change', !props.expanded)
+ emit('update:expanded', newExpanded)
+ emit('state-change', newExpanded)
- if (props.expanded) {
+ if (newExpanded) {
transitionEnd.value = false
}
}📝 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.
Suggested change
| function toggleExpand() { | |
| // 触发事件通知父组件 | |
| emit('update:expanded', !props.expanded) | |
| emit('state-change', !props.expanded) | |
| if (props.expanded) { | |
| transitionEnd.value = false | |
| } | |
| } | |
| function toggleExpand() { | |
| const newExpanded = !props.expanded | |
| // 触发事件通知父组件 | |
| emit('update:expanded', newExpanded) | |
| emit('state-change', newExpanded) | |
| if (newExpanded) { | |
| transitionEnd.value = false | |
| } | |
| } |
Comment on lines
+108
to
+104
| onMounted(() => { | ||
| baseUrl.value = process.env.NODE_ENV === 'production' | ||
| ? `${location.origin}/demo/?timestamp=${new Date().getTime()}#/` | ||
| : 'http://localhost:5173/demo/#/' | ||
|
|
||
| // 监听 iframe 加载完成事件 | ||
| iframe.value?.addEventListener('load', sendMessage) | ||
| }) |
There was a problem hiding this comment.
防止在组件未渲染完成前访问 iframe
在 onMounted 生命周期钩子中，您试图为 iframe 添加事件监听器，但此时 iframe 可能尚未渲染，导致 iframe.value 为 null。建议使用 nextTick 确保 DOM 已更新，或者使用 watch 监听 iframe 的变化。
应用以下差异以修复此问题：
onMounted(() => {
baseUrl.value = process.env.NODE_ENV === 'production'
? `${location.origin}/demo/?timestamp=${new Date().getTime()}#/`
: 'http://localhost:5173/demo/#/'
- iframe.value?.addEventListener('load', sendMessage)
+ nextTick(() => {
+ iframe.value?.addEventListener('load', sendMessage)
+ })
})或者使用 watch：
+ watch(iframe, (newIframe) => {
+ newIframe?.addEventListener('load', sendMessage)
+ })📝 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.
Suggested change
| onMounted(() => { | |
| baseUrl.value = process.env.NODE_ENV === 'production' | |
| ? `${location.origin}/demo/?timestamp=${new Date().getTime()}#/` | |
| : 'http://localhost:5173/demo/#/' | |
| // 监听 iframe 加载完成事件 | |
| iframe.value?.addEventListener('load', sendMessage) | |
| }) | |
| onMounted(() => { | |
| baseUrl.value = process.env.NODE_ENV === 'production' | |
| ? `${location.origin}/demo/?timestamp=${new Date().getTime()}#/` | |
| : 'http://localhost:5173/demo/#/' | |
| nextTick(() => { | |
| iframe.value?.addEventListener('load', sendMessage) | |
| }) | |
| }) |
Suggested change
| onMounted(() => { | |
| baseUrl.value = process.env.NODE_ENV === 'production' | |
| ? `${location.origin}/demo/?timestamp=${new Date().getTime()}#/` | |
| : 'http://localhost:5173/demo/#/' | |
| // 监听 iframe 加载完成事件 | |
| iframe.value?.addEventListener('load', sendMessage) | |
| }) | |
| onMounted(() => { | |
| baseUrl.value = process.env.NODE_ENV === 'production' | |
| ? `${location.origin}/demo/?timestamp=${new Date().getTime()}#/` | |
| : 'http://localhost:5173/demo/#/' | |
| }) | |
| watch(iframe, (newIframe) => { | |
| newIframe?.addEventListener('load', sendMessage) | |
| }) |
Comment on lines
+114
to
+104
| iframe.value?.addEventListener('load', sendMessage) | ||
| }) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
在组件卸载时移除事件监听器以防止内存泄漏
当组件卸载时，应移除在 iframe 上添加的事件监听器，防止内存泄漏。
添加以下代码：
import { onMounted, onUnmounted, ref, watch, nextTick } from 'vue'
...
onMounted(() => {
// 现有代码
})
+ onUnmounted(() => {
+ iframe.value?.removeEventListener('load', sendMessage)
+ })Committable suggestion skipped: line range outside the PR's diff.
Comment on lines
+105
to
+95
| } | ||
| } |
There was a problem hiding this comment.
确保 postMessage 的安全性
在使用 postMessage 时，应指定目标源 targetOrigin，以确保消息只发送到可信任的域，防止潜在的安全风险。
应用以下差异以修复此问题：
function sendMessage() {
if (iframe.value?.contentWindow) {
- iframe.value.contentWindow.postMessage(vitepressData.isDark.value, href.value)
+ iframe.value.contentWindow.postMessage(vitepressData.isDark.value, baseUrl.value)
}
}请确保 baseUrl.value 是可信任的源。
Committable suggestion skipped: line range outside the PR's diff.
Comment on lines
+206
to
+208
| .VPDoc.is-component:not(.is-expanded) .container { | ||
| padding-right: 48px; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
消除重复的 CSS 规则
在第206-208行和第216-218行，发现重复的 CSS 规则，可能导致样式冲突或混淆。
建议合并重复的样式定义，以提高代码的可维护性和清晰度。
Also applies to: 216-218
Moonofweisheng
force-pushed
the
docs/vitepress-improve
branch
from
9cf6f44 to
2983114
Compare
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Outside diff range and nitpick comments (2)
docs/.vitepress/theme/components/VPIframe.vue (2)
26-29: 建议完善 Props 接口定义当前的 Props 接口定义较为简单，建议添加更多的类型约束和验证规则。
建议修改为：
interface Props { - /** 是否展开状态 */ - expanded?: boolean + /** + * 是否展开状态 + * @default true + * @description 控制演示面板的展开/折叠状态 + */ + expanded?: boolean + /** + * 自动折叠阈值 + * @default 1279 + * @description 当视窗宽度小于该值时自动折叠 + */ + autoCollapseWidth?: number }
118-130: 建议使用 CSS 自定义属性优化样式维护性当前的样式定义中有许多魔术数字，建议使用 CSS 自定义属性来提高可维护性。
建议修改为：
+<style> +:root { + --demo-model-width-default: 330px; + --demo-model-spacing: 32px; + --demo-model-header-height: 48px; + --demo-model-border-radius: 12px; + --demo-model-transition-duration: 0.3s; +} +</style> + <style scoped> .demo-model { position: fixed; z-index: 10; - right: 32px; - top: calc(var(--vp-nav-height) + 32px); - width: 330px; + right: var(--demo-model-spacing); + top: calc(var(--vp-nav-height) + var(--demo-model-spacing)); + width: var(--demo-model-width-default); font-size: 16px; background: var(--vp-c-bg-alt); - border-radius: 12px; + border-radius: var(--demo-model-border-radius); box-shadow: var(--vp-shadow-4); overflow: hidden; - transition: all 0.3s ease-in-out; + transition: all var(--demo-model-transition-duration) ease-in-out; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (82)
docs/.vitepress/config.mts(2 hunks)docs/.vitepress/plugins/markdown-transform.ts(2 hunks)docs/.vitepress/theme/components/CustomFooter.vue(1 hunks)docs/.vitepress/theme/components/VPContent.vue(1 hunks)docs/.vitepress/theme/components/VPDoc.vue(1 hunks)docs/.vitepress/theme/components/VPIframe.vue(1 hunks)docs/.vitepress/theme/components/VPLocalNav.vue(1 hunks)docs/.vitepress/theme/components/VPNavBar.vue(1 hunks)docs/.vitepress/theme/components/VPSidebar.vue(1 hunks)docs/.vitepress/theme/components/frame.vue(0 hunks)docs/.vitepress/theme/index.ts(1 hunks)docs/.vitepress/theme/styles/vars.css(4 hunks)docs/component/action-sheet.md(0 hunks)docs/component/backtop.md(0 hunks)docs/component/badge.md(0 hunks)docs/component/button.md(0 hunks)docs/component/calendar-view.md(0 hunks)docs/component/calendar.md(0 hunks)docs/component/card.md(0 hunks)docs/component/cell.md(0 hunks)docs/component/checkbox.md(0 hunks)docs/component/circle.md(0 hunks)docs/component/col-picker.md(0 hunks)docs/component/collapse.md(0 hunks)docs/component/config-provider.md(0 hunks)docs/component/count-down.md(0 hunks)docs/component/count-to.md(0 hunks)docs/component/curtain.md(0 hunks)docs/component/datetime-picker-view.md(0 hunks)docs/component/datetime-picker.md(0 hunks)docs/component/divider.md(0 hunks)docs/component/drop-menu.md(0 hunks)docs/component/fab.md(0 hunks)docs/component/form.md(0 hunks)docs/component/gap.md(0 hunks)docs/component/grid.md(0 hunks)docs/component/icon.md(0 hunks)docs/component/img-cropper.md(0 hunks)docs/component/img.md(0 hunks)docs/component/index-bar.md(1 hunks)docs/component/input-number.md(0 hunks)docs/component/input.md(0 hunks)docs/component/keyboard.md(0 hunks)docs/component/layout.md(0 hunks)docs/component/loading.md(0 hunks)docs/component/loadmore.md(0 hunks)docs/component/message-box.md(0 hunks)docs/component/navbar.md(0 hunks)docs/component/notice-bar.md(0 hunks)docs/component/notify.md(0 hunks)docs/component/number-keyboard.md(0 hunks)docs/component/overlay.md(0 hunks)docs/component/pagination.md(0 hunks)docs/component/password-input.md(0 hunks)docs/component/picker-view.md(0 hunks)docs/component/picker.md(0 hunks)docs/component/popover.md(0 hunks)docs/component/popup.md(0 hunks)docs/component/progress.md(0 hunks)docs/component/radio.md(0 hunks)docs/component/rate.md(0 hunks)docs/component/resize.md(0 hunks)docs/component/search.md(0 hunks)docs/component/segmented.md(0 hunks)docs/component/select-picker.md(0 hunks)docs/component/sidebar.md(0 hunks)docs/component/skeleton.md(0 hunks)docs/component/slider.md(0 hunks)docs/component/sort-button.md(0 hunks)docs/component/status-tip.md(0 hunks)docs/component/steps.md(0 hunks)docs/component/sticky.md(0 hunks)docs/component/swipe-action.md(0 hunks)docs/component/swiper.md(0 hunks)docs/component/switch.md(0 hunks)docs/component/tabbar.md(0 hunks)docs/component/table.md(0 hunks)docs/component/tabs.md(0 hunks)docs/component/tag.md(0 hunks)docs/component/text.md(0 hunks)docs/component/textarea.md(0 hunks)docs/component/toast.md(0 hunks)
⛔ Files not processed due to max files limit (7)
- docs/component/tooltip.md
- docs/component/transition.md
- docs/component/upload.md
- docs/component/watermark.md
- package.json
- src/pages/radio/Index.vue
- src/uni_modules/wot-design-uni/components/wd-radio/types.ts
💤 Files with no reviewable changes (70)
- docs/component/count-to.md
- docs/component/gap.md
- docs/component/switch.md
- docs/component/overlay.md
- docs/component/backtop.md
- docs/component/input-number.md
- docs/component/img.md
- docs/component/layout.md
- docs/component/popup.md
- docs/component/icon.md
- docs/component/button.md
- docs/component/resize.md
- docs/component/sticky.md
- docs/.vitepress/theme/components/frame.vue
- docs/component/count-down.md
- docs/component/loading.md
- docs/component/pagination.md
- docs/component/search.md
- docs/component/skeleton.md
- docs/component/progress.md
- docs/component/divider.md
- docs/component/sort-button.md
- docs/component/slider.md
- docs/component/form.md
- docs/component/notify.md
- docs/component/drop-menu.md
- docs/component/steps.md
- docs/component/swipe-action.md
- docs/component/card.md
- docs/component/toast.md
- docs/component/password-input.md
- docs/component/number-keyboard.md
- docs/component/segmented.md
- docs/component/curtain.md
- docs/component/badge.md
- docs/component/swiper.md
- docs/component/datetime-picker-view.md
- docs/component/tag.md
- docs/component/tabs.md
- docs/component/input.md
- docs/component/datetime-picker.md
- docs/component/select-picker.md
- docs/component/config-provider.md
- docs/component/circle.md
- docs/component/calendar-view.md
- docs/component/popover.md
- docs/component/radio.md
- docs/component/action-sheet.md
- docs/component/picker-view.md
- docs/component/checkbox.md
- docs/component/status-tip.md
- docs/component/text.md
- docs/component/tabbar.md
- docs/component/navbar.md
- docs/component/img-cropper.md
- docs/component/calendar.md
- docs/component/notice-bar.md
- docs/component/sidebar.md
- docs/component/cell.md
- docs/component/fab.md
- docs/component/col-picker.md
- docs/component/table.md
- docs/component/keyboard.md
- docs/component/collapse.md
- docs/component/rate.md
- docs/component/textarea.md
- docs/component/loadmore.md
- docs/component/picker.md
- docs/component/message-box.md
- docs/component/grid.md
🚧 Files skipped from review as they are similar to previous changes (11)
- docs/.vitepress/theme/index.ts
- docs/.vitepress/plugins/markdown-transform.ts
- docs/.vitepress/config.mts
- docs/component/index-bar.md
- docs/.vitepress/theme/components/VPSidebar.vue
- docs/.vitepress/theme/styles/vars.css
- docs/.vitepress/theme/components/VPLocalNav.vue
- docs/.vitepress/theme/components/CustomFooter.vue
- docs/.vitepress/theme/components/VPContent.vue
- docs/.vitepress/theme/components/VPDoc.vue
- docs/.vitepress/theme/components/VPNavBar.vue
🔇 Additional comments (2)
docs/.vitepress/theme/components/VPIframe.vue (2)
73-81: 🛠️ Refactor suggestion
优化状态切换逻辑
toggleExpand 函数中的状态更新可能存在竞态条件。
建议修改为：
function toggleExpand() {
+ const newExpanded = !props.expanded
// 触发事件通知父组件
- emit('update:expanded', !props.expanded)
- emit('state-change', !props.expanded)
+ emit('update:expanded', newExpanded)
+ emit('state-change', newExpanded)
- if (props.expanded) {
+ if (newExpanded) {
transitionEnd.value = false
}
}Likely invalid or redundant comment.
97-104:
需要处理组件卸载时的清理工作
组件在卸载时需要移除事件监听器，以防止内存泄漏。
建议添加：
+import { onMounted, onUnmounted } from 'vue'
+
onMounted(() => {
baseUrl.value = process.env.NODE_ENV === 'production'
? `${location.origin}/demo/?timestamp=${new Date().getTime()}#/`
: 'http://localhost:5173/demo/#/'
iframe.value?.addEventListener('load', sendMessage)
})
+
+onUnmounted(() => {
+ iframe.value?.removeEventListener('load', sendMessage)
+})Likely invalid or redundant comment.
Comment on lines
+11
to
+13
| <el-icon class="expand-icon" style="cursor: pointer;" @click="toggleExpand"> | ||
| <component :is="expanded ? Fold : Expand" /> | ||
| </el-icon> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
需要增加无障碍访问支持
展开/折叠按钮缺少必要的无障碍访问属性，这可能会影响使用屏幕阅读器的用户。
建议添加以下属性：
- <el-icon class="expand-icon" style="cursor: pointer;" @click="toggleExpand">
+ <el-icon
+ class="expand-icon"
+ style="cursor: pointer;"
+ @click="toggleExpand"
+ role="button"
+ :aria-label="expanded ? '折叠演示' : '展开演示'"
+ :aria-expanded="expanded">📝 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.
Suggested change
| <el-icon class="expand-icon" style="cursor: pointer;" @click="toggleExpand"> | |
| <component :is="expanded ? Fold : Expand" /> | |
| </el-icon> | |
| <el-icon | |
| class="expand-icon" | |
| style="cursor: pointer;" | |
| @click="toggleExpand" | |
| role="button" | |
| :aria-label="expanded ? '折叠演示' : '展开演示'" | |
| :aria-expanded="expanded"> | |
| <component :is="expanded ? Fold : Expand" /> | |
| </el-icon> |
Comment on lines
+48
to
+55
| const href = computed(() => { | ||
| const path = route.path | ||
| const paths = path ? path.split('.')[0].split('/') : [] | ||
|
|
||
| if (!paths.length) return baseUrl.value | ||
|
|
||
| return baseUrl.value + `pages/${kebabToCamel(paths[paths.length - 1])}/Index` | ||
| }) |
There was a problem hiding this comment.
需要加强 URL 构建的安全性
当前的 URL 构建逻辑缺少必要的输入验证和清理，可能存在安全风险。
建议添加以下安全措施：
const href = computed(() => {
const path = route.path
const paths = path ? path.split('.')[0].split('/') : []
if (!paths.length) return baseUrl.value
+ // 验证路径合法性
+ const lastPath = paths[paths.length - 1]
+ if (!lastPath || /[^a-zA-Z0-9-]/.test(lastPath)) {
+ console.warn('Invalid path detected:', lastPath)
+ return baseUrl.value
+ }
return baseUrl.value + `pages/${kebabToCamel(paths[paths.length - 1])}/Index`
})📝 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.
Suggested change
| const href = computed(() => { | |
| const path = route.path | |
| const paths = path ? path.split('.')[0].split('/') : [] | |
| if (!paths.length) return baseUrl.value | |
| return baseUrl.value + `pages/${kebabToCamel(paths[paths.length - 1])}/Index` | |
| }) | |
| const href = computed(() => { | |
| const path = route.path | |
| const paths = path ? path.split('.')[0].split('/') : [] | |
| if (!paths.length) return baseUrl.value | |
| // 验证路径合法性 | |
| const lastPath = paths[paths.length - 1] | |
| if (!lastPath || /[^a-zA-Z0-9-]/.test(lastPath)) { | |
| console.warn('Invalid path detected:', lastPath) | |
| return baseUrl.value | |
| } | |
| return baseUrl.value + `pages/${kebabToCamel(paths[paths.length - 1])}/Index` | |
| }) |
Moonofweisheng
force-pushed
the
docs/vitepress-improve
branch
from
2983114 to
95c9fe1
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
docs/.vitepress/theme/components/VPIframe.vue (1)
129-129: 优化过渡动画性能多个元素使用
all属性进行过渡可能影响性能。建议只对必要的属性应用过渡：
- transition: all 0.3s ease-in-out; + transition: width 0.3s ease-in-out, + height 0.3s ease-in-out, + opacity 0.3s ease-in-out;Also applies to: 135-135, 175-175
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (82)
docs/.vitepress/config.mts(2 hunks)docs/.vitepress/plugins/markdown-transform.ts(2 hunks)docs/.vitepress/theme/components/CustomFooter.vue(1 hunks)docs/.vitepress/theme/components/VPContent.vue(1 hunks)docs/.vitepress/theme/components/VPDoc.vue(1 hunks)docs/.vitepress/theme/components/VPIframe.vue(1 hunks)docs/.vitepress/theme/components/VPLocalNav.vue(1 hunks)docs/.vitepress/theme/components/VPNavBar.vue(1 hunks)docs/.vitepress/theme/components/VPSidebar.vue(1 hunks)docs/.vitepress/theme/components/frame.vue(0 hunks)docs/.vitepress/theme/index.ts(1 hunks)docs/.vitepress/theme/styles/vars.css(4 hunks)docs/component/action-sheet.md(0 hunks)docs/component/backtop.md(0 hunks)docs/component/badge.md(0 hunks)docs/component/button.md(0 hunks)docs/component/calendar-view.md(0 hunks)docs/component/calendar.md(0 hunks)docs/component/card.md(0 hunks)docs/component/cell.md(0 hunks)docs/component/checkbox.md(0 hunks)docs/component/circle.md(0 hunks)docs/component/col-picker.md(0 hunks)docs/component/collapse.md(0 hunks)docs/component/config-provider.md(0 hunks)docs/component/count-down.md(0 hunks)docs/component/count-to.md(0 hunks)docs/component/curtain.md(0 hunks)docs/component/datetime-picker-view.md(0 hunks)docs/component/datetime-picker.md(0 hunks)docs/component/divider.md(0 hunks)docs/component/drop-menu.md(0 hunks)docs/component/fab.md(0 hunks)docs/component/form.md(0 hunks)docs/component/gap.md(0 hunks)docs/component/grid.md(0 hunks)docs/component/icon.md(0 hunks)docs/component/img-cropper.md(0 hunks)docs/component/img.md(0 hunks)docs/component/index-bar.md(1 hunks)docs/component/input-number.md(0 hunks)docs/component/input.md(0 hunks)docs/component/keyboard.md(0 hunks)docs/component/layout.md(0 hunks)docs/component/loading.md(0 hunks)docs/component/loadmore.md(0 hunks)docs/component/message-box.md(0 hunks)docs/component/navbar.md(0 hunks)docs/component/notice-bar.md(0 hunks)docs/component/notify.md(0 hunks)docs/component/number-keyboard.md(0 hunks)docs/component/overlay.md(0 hunks)docs/component/pagination.md(0 hunks)docs/component/password-input.md(0 hunks)docs/component/picker-view.md(0 hunks)docs/component/picker.md(0 hunks)docs/component/popover.md(0 hunks)docs/component/popup.md(0 hunks)docs/component/progress.md(0 hunks)docs/component/radio.md(0 hunks)docs/component/rate.md(0 hunks)docs/component/resize.md(0 hunks)docs/component/search.md(0 hunks)docs/component/segmented.md(0 hunks)docs/component/select-picker.md(0 hunks)docs/component/sidebar.md(0 hunks)docs/component/skeleton.md(0 hunks)docs/component/slider.md(0 hunks)docs/component/sort-button.md(0 hunks)docs/component/status-tip.md(0 hunks)docs/component/steps.md(0 hunks)docs/component/sticky.md(0 hunks)docs/component/swipe-action.md(0 hunks)docs/component/swiper.md(0 hunks)docs/component/switch.md(0 hunks)docs/component/tabbar.md(0 hunks)docs/component/table.md(0 hunks)docs/component/tabs.md(0 hunks)docs/component/tag.md(0 hunks)docs/component/text.md(0 hunks)docs/component/textarea.md(0 hunks)docs/component/toast.md(0 hunks)
⛔ Files not processed due to max files limit (7)
- docs/component/tooltip.md
- docs/component/transition.md
- docs/component/upload.md
- docs/component/watermark.md
- package.json
- src/pages/radio/Index.vue
- src/uni_modules/wot-design-uni/components/wd-radio/types.ts
💤 Files with no reviewable changes (70)
- docs/component/gap.md
- docs/component/layout.md
- docs/component/button.md
- docs/component/count-to.md
- docs/component/input-number.md
- docs/component/resize.md
- docs/component/icon.md
- docs/component/img.md
- docs/component/backtop.md
- docs/component/switch.md
- docs/.vitepress/theme/components/frame.vue
- docs/component/overlay.md
- docs/component/count-down.md
- docs/component/pagination.md
- docs/component/divider.md
- docs/component/datetime-picker-view.md
- docs/component/config-provider.md
- docs/component/skeleton.md
- docs/component/popup.md
- docs/component/search.md
- docs/component/drop-menu.md
- docs/component/loading.md
- docs/component/curtain.md
- docs/component/card.md
- docs/component/input.md
- docs/component/form.md
- docs/component/progress.md
- docs/component/sticky.md
- docs/component/sort-button.md
- docs/component/slider.md
- docs/component/action-sheet.md
- docs/component/password-input.md
- docs/component/circle.md
- docs/component/fab.md
- docs/component/notify.md
- docs/component/loadmore.md
- docs/component/toast.md
- docs/component/keyboard.md
- docs/component/navbar.md
- docs/component/text.md
- docs/component/message-box.md
- docs/component/collapse.md
- docs/component/select-picker.md
- docs/component/table.md
- docs/component/col-picker.md
- docs/component/swipe-action.md
- docs/component/status-tip.md
- docs/component/popover.md
- docs/component/tabbar.md
- docs/component/swiper.md
- docs/component/datetime-picker.md
- docs/component/img-cropper.md
- docs/component/tabs.md
- docs/component/number-keyboard.md
- docs/component/steps.md
- docs/component/calendar-view.md
- docs/component/tag.md
- docs/component/checkbox.md
- docs/component/radio.md
- docs/component/rate.md
- docs/component/segmented.md
- docs/component/badge.md
- docs/component/sidebar.md
- docs/component/picker-view.md
- docs/component/grid.md
- docs/component/textarea.md
- docs/component/calendar.md
- docs/component/notice-bar.md
- docs/component/cell.md
- docs/component/picker.md
🚧 Files skipped from review as they are similar to previous changes (11)
- docs/.vitepress/theme/index.ts
- docs/component/index-bar.md
- docs/.vitepress/plugins/markdown-transform.ts
- docs/.vitepress/theme/components/VPLocalNav.vue
- docs/.vitepress/theme/components/VPSidebar.vue
- docs/.vitepress/theme/components/VPContent.vue
- docs/.vitepress/theme/styles/vars.css
- docs/.vitepress/theme/components/VPDoc.vue
- docs/.vitepress/config.mts
- docs/.vitepress/theme/components/CustomFooter.vue
- docs/.vitepress/theme/components/VPNavBar.vue
🔇 Additional comments (4)
docs/.vitepress/theme/components/VPIframe.vue (4)
73-81: 🛠️ Refactor suggestion
优化状态更新逻辑
在 toggleExpand 函数中，直接使用 props.expanded 可能导致状态不同步的问题。
建议使用局部变量来管理状态更新：
function toggleExpand() {
+ const newExpanded = !props.expanded
// 触发事件通知父组件
- emit('update:expanded', !props.expanded)
- emit('state-change', !props.expanded)
+ emit('update:expanded', newExpanded)
+ emit('state-change', newExpanded)
- if (props.expanded) {
+ if (newExpanded) {
transitionEnd.value = false
}
}Likely invalid or redundant comment.
97-104:
添加事件监听器清理和安全性增强
组件缺少必要的清理操作，且 iframe 事件监听可能在 DOM 更新前执行。
建议进行以下改进：
+ import { onMounted, onUnmounted, nextTick } from 'vue'
onMounted(() => {
baseUrl.value = process.env.NODE_ENV === 'production'
? `${location.origin}/demo/?timestamp=${new Date().getTime()}#/`
: 'http://localhost:5173/demo/#/'
- iframe.value?.addEventListener('load', sendMessage)
+ nextTick(() => {
+ iframe.value?.addEventListener('load', sendMessage)
+ })
})
+ onUnmounted(() => {
+ iframe.value?.removeEventListener('load', sendMessage)
+ })Likely invalid or redundant comment.
91-95:
增强 postMessage 安全性
使用 postMessage 时需要指定目标源，以防止潜在的安全风险。
建议修改如下：
function sendMessage() {
if (iframe.value?.contentWindow) {
- iframe.value.contentWindow.postMessage(vitepressData.isDark.value, href.value)
+ const targetOrigin = process.env.NODE_ENV === 'production'
+ ? location.origin
+ : 'http://localhost:5173'
+ iframe.value.contentWindow.postMessage(
+ vitepressData.isDark.value,
+ targetOrigin
+ )
}
}Likely invalid or redundant comment.
11-13: 🛠️ Refactor suggestion
需要增加无障碍访问支持
展开/折叠按钮缺少必要的无障碍访问属性，这会影响使用屏幕阅读器的用户体验。
建议添加以下属性：
- <el-icon class="expand-icon" style="cursor: pointer;" @click="toggleExpand">
+ <el-icon
+ class="expand-icon"
+ style="cursor: pointer;"
+ @click="toggleExpand"
+ role="button"
+ :aria-label="expanded ? '折叠演示' : '展开演示'"
+ :aria-expanded="expanded"
+ tabindex="0"
+ @keydown.enter="toggleExpand"
+ @keydown.space.prevent="toggleExpand">Likely invalid or redundant comment.
Moonofweisheng
force-pushed
the
docs/vitepress-improve
branch
from
95c9fe1 to
f8f9f65
Compare
Moonofweisheng
force-pushed
the
docs/vitepress-improve
branch
from
f8f9f65 to
3890355
Compare
|
本地文档无法预览，404 |
Repository owner
locked as resolved and limited conversation to collaborators
Dec 21, 2024
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
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
2 participants
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.
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
无
💡 需求背景和解决方案
自定义Vitepress组件，调整Vitepress的布局，增加组件文档内容的可见范围。
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新特性
VPContent、VPDoc、VPLocalNav、VPNavBar、VPSidebar，以及其他组件的更新和功能增强。CountDown、DatetimePicker、SelectPicker、SwipeAction、Swiper等，增强了用户交互体验。文档
ActionSheet、Badge、Calendar、Checkbox、Cell、Collapse、ConfigProvider、CountDown、DatetimePicker、Input、Picker、Table、Tabs、Toast等，改善了可读性和结构。Backtop、Button、Gap、InputNumber、Layout、Switch等，表示这些组件可能已被移除或不再支持。Tooltip、Toast、Text、Textarea、Tag、StatusTip等组件的文档，提供了更详细的使用示例和属性说明。修复
样式