feat: 新增statistic 数值显示#489
Conversation
✅ Deploy Preview for wot-design-uni ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough此次更新为文档和组件引入了新的统计功能。新增的 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant StatisticComponent
participant AnimationHandler
User->>StatisticComponent: 初始化组件
StatisticComponent-->>User: 显示默认统计值
User->>StatisticComponent: 修改统计值
StatisticComponent->>AnimationHandler: 启动动画
AnimationHandler-->>StatisticComponent: 动画完成
StatisticComponent-->>User: 显示更新后的统计值
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 as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Outside diff range, codebase verification and nitpick comments (6)
docs/component/statistic.md (3)
10-12: 确保示例代码的正确性建议在示例代码中添加一个描述，以便用户更好地理解代码的功能。
+```vue +<!-- 显示2024年的统计数值 --> <wd-statistic :endVal="2024" suffix="年" color="#16baaa"></wd-statistic>--- `17-21`: **确保示例代码的正确性** 建议在示例代码中添加描述，以便用户更好地理解代码的功能。 ```diff +```vue +<!-- 使用插槽自定义前缀和后缀 --> <wd-statistic prefix="￥" :startVal="0" :decimals="2" :endVal="186.321" :fontSize="32" suffix="%" color="#1e9fff"></wd-statistic> <wd-statistic prefix="￥" :startVal="0" :decimals="2" :endVal="21286.321" :fontSize="32" suffix="%" color="#ff5722"></wd-statistic> <wd-statistic prefix="￥" :startVal="0" :decimals="2" :endVal="21286.321" :fontSize="32" suffix="%" color="#ffb800" :duration="2000"></wd-statistic>--- `27-29`: **确保示例代码的正确性** 建议在示例代码中添加描述，以便用户更好地理解代码的功能。 ```diff +```html +<!-- 自定义字体颜色 --> <wd-statistic :endVal="2024" color="#16baaa"></wd-statistic></blockquote></details> <details> <summary>src/uni_modules/wot-design-uni/components/wd-statistic/wd-statistic.vue (3)</summary><blockquote> `1-16`: **确保插槽的正确性** 建议为每个插槽添加默认内容，以便在没有提供插槽内容时显示默认值。 ```diff <slot name="prefix"> <wd-text :color="props.color" :size="`${props.fontSize * 0.7}px`" :text="props.prefix"></wd-text> </slot> <slot name="default"> <wd-text :color="props.color" :size="`${props.fontSize}px`" :text="displayValue"></wd-text> </slot> <slot name="suffix"> <wd-text :color="props.color" :size="`${props.fontSize * 0.7}px`" :text="props.suffix"></wd-text> </slot>
18-26: 确保组件选项的正确性建议为组件添加更多选项说明，以便用户更好地理解组件的功能。
export default { name: 'wd-statistic', options: { virtualHost: true, addGlobalClass: true, styleIsolation: 'shared' // 共享样式隔离 } }
214-216: 确保样式的正确性建议在样式中添加注释，以便用户更好地理解样式的作用。
@import './index.scss'; // 导入组件样式
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (9)
- docs/.vitepress/config.mts (1 hunks)
- docs/component/statistic.md (1 hunks)
- src/pages.json (1 hunks)
- src/pages/index/Index.vue (1 hunks)
- src/pages/statistic/Index.vue (1 hunks)
- src/uni_modules/wot-design-uni/components/wd-statistic/index.scss (1 hunks)
- src/uni_modules/wot-design-uni/components/wd-statistic/requestAnimationFrame.ts (1 hunks)
- src/uni_modules/wot-design-uni/components/wd-statistic/types.ts (1 hunks)
- src/uni_modules/wot-design-uni/components/wd-statistic/wd-statistic.vue (1 hunks)
Files skipped from review due to trivial changes (1)
- src/uni_modules/wot-design-uni/components/wd-statistic/index.scss
Additional context used
Markdownlint
docs/component/statistic.md
37-37: Column: 14
Hard tabs(MD010, no-hard-tabs)
37-37: Column: 22
Hard tabs(MD010, no-hard-tabs)
37-37: Column: 25
Hard tabs(MD010, no-hard-tabs)
37-37: Column: 30
Hard tabs(MD010, no-hard-tabs)
Additional comments not posted (15)
src/uni_modules/wot-design-uni/components/wd-statistic/requestAnimationFrame.ts (4)
1-6: 变量声明和初始化正确这些变量和常量的声明和初始化是正确的。
7-23: 浏览器前缀处理逻辑正确代码正确处理了不同浏览器的前缀，并尝试获取兼容的
requestAnimationFrame和cancelAnimationFrame实现。
24-41: 回退实现正确如果浏览器不支持
requestAnimationFrame，代码提供了使用setTimeout的回退实现，这是正确的。
43-43: 导出语句正确导出
requestAnimationFrame和cancelAnimationFrame函数的语句是正确的。src/pages/statistic/Index.vue (4)
1-6: 模板语法正确模板语法正确，
wd-statistic组件的使用方式也很恰当。
7-20: 插槽使用正确模板语法正确，
wd-statistic组件的插槽使用方式也很恰当。
22-46: ref 方法使用正确模板语法正确，
wd-statistic组件的 ref 方法使用方式也很恰当。
47-57: 脚本逻辑正确脚本语法正确，组件逻辑也很恰当。
src/uni_modules/wot-design-uni/components/wd-statistic/types.ts (4)
1-6: 导入和基础属性定义正确导入语句和基础属性的定义是正确的。
7-54: 属性定义正确各个属性的定义是正确的，并且遵循了最佳实践。
56-107: 附加属性定义和导出语句正确附加属性的定义和导出语句是正确的。
109-109: 导出语句正确导出
TextProps类型的语句是正确的。docs/.vitepress/config.mts (1)
369-370: 确保导航链接的正确性建议检查新添加的导航链接是否正确，并确保其与现有结构一致。
src/pages.json (1)
746-754: 新增的统计页面配置项新增的统计页面配置项格式正确，路径、名称和样式属性都与其他页面保持一致。
src/pages/index/Index.vue (1)
290-292: 新增的统计组件项新增的统计组件项格式正确，ID和名称属性都与其他组件保持一致。
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
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)
- docs/component/statistic.md (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- docs/component/statistic.md
…atistic # Conflicts: # docs/component/statistic.md
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (3)
- docs/component/statistic.md (1 hunks)
- src/pages/statistic/Index.vue (1 hunks)
- src/uni_modules/wot-design-uni/components/wd-statistic/wd-statistic.vue (1 hunks)
Files skipped from review as they are similar to previous changes (3)
- docs/component/statistic.md
- src/pages/statistic/Index.vue
- src/uni_modules/wot-design-uni/components/wd-statistic/wd-statistic.vue
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)
- docs/component/statistic.md (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- docs/component/statistic.md
2 participants
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
wd-statistic组件，以动态方式展示统计值，支持自定义属性和动画。样式
wd-statistic组件引入新的SCSS样式，确保一致的视觉效果。文档