fix: 🐛 修复 Progress 无法设置进度为 0 的问题 #748
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough此拉取请求包含对 Changes
Assessment against linked issues
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 (
|
✅ Deploy Preview for wot-design-uni ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Deploying wot-design-uni with
|
| Latest commit: |
6148867
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://92e87b9a.wot-design-uni.pages.dev |
| Branch Preview URL: | https://fix-progress-set-zero.wot-design-uni.pages.dev |
![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 and nitpick comments (9)
src/uni_modules/wot-design-uni/components/wd-progress/types.ts (2)
15-18: 建议补充属性值范围说明类型定义结构清晰，但建议在注释中补充：
- percentage 的有效值范围（0-100）
- color 支持的格式（如：HEX、RGB等）
34-34: 类型定义更新恰当，建议补充示例代码类型扩展保持了向后兼容性，同时支持了新的渐变色功能。建议在组件文档中添加
ProgressColor[]的使用示例，以帮助开发者更好地理解。src/pages/progress/Index.vue (1)
Line range hint
34-50: 颜色对象数组的类型定义完善颜色对象数组使用
ProgressColor类型进行了明确的类型约束，这样的改动提高了代码的类型安全性。建议考虑以下优化：
- 颜色值建议使用标准的十六进制格式
- 百分比值应该按照递增顺序排列
建议按照如下方式优化代码：
const colorObject = ref<ProgressColor[]>([ { - color: 'yellow', + color: '#FFD700', percentage: 30 }, { - color: 'red', + color: '#FF0000', percentage: 60 }, { - color: 'blue', + color: '#0000FF', percentage: 80 }, { - color: 'black', + color: '#000000', percentage: 90 } ])docs/component/progress.md (3)
Line range hint
8-11: 建议添加设置进度为 0 的示例考虑到此 PR 修复了进度条无法设置为 0 的问题，建议添加一个展示此功能的示例代码：
```html <wd-progress :percentage="30" /> +<wd-progress :percentage="0" />同时建议添加说明文字：「支持将进度设置为 0」。 --- Line range hint `53-77`: **建议优化 TypeScript 示例代码的可读性** 当前的示例代码展示了复杂的颜色对象配置，建议： 1. 添加注释说明每个颜色区间的作用 2. 使用更具语义化的变量名，如 `progressColorStops` 3. 添加示例运行效果的说明 ```diff import type { ProgressColor } from '@/uni_modules/wot-design-uni/components/wd-progress/types' -const colorObject = ref<ProgressColor>([ +// 定义进度条在不同区间的颜色 +const progressColorStops = ref<ProgressColor>([ { color: 'yellow', percentage: 30 }, { color: 'red', percentage: 60 }, { color: 'blue', percentage: 80 }, { color: 'black', percentage: 90 } ])
88-91: ProgressColor 类型表格需要修正表格中存在重复的"说明"列标题，建议修正：
-| 字段 | 说明 | 说明 | 最低版本 | +| 字段 | 类型 | 说明 | 最低版本 |src/uni_modules/wot-design-uni/components/wd-progress/wd-progress.vue (3)
4-4: 建议在模板中使用数组形式的类绑定在 Vue 模板中，建议使用数组形式的
:class绑定而不是模板字符串，这样可以提高代码的可读性，避免潜在的错误。可以考虑如下修改：
- <view :class="`wd-progress__inner ${innerClass}`" :style="rootStyle"></view> + <view :class="['wd-progress__inner', innerClass]" :style="rootStyle"></view>
9-9: 建议在模板中使用数组形式的类绑定同样，
wd-icon组件的:custom-class属性也可以使用数组形式的绑定，以提高代码可读性。修改如下：
- :custom-class="`wd-progress__label wd-progress__icon ${innerClass}`" + :custom-class="['wd-progress__label', 'wd-progress__icon', innerClass]"
76-80: 建议在 'validatePercentage' 函数中处理无效的百分比值当前函数仅在控制台输出错误信息，未对无效的百分比值进行处理。建议抛出错误或对值进行校正，以确保组件的稳定性。
示例修改：
function validatePercentage(value: number) { if (Number.isNaN(value) || value < 0 || value > 100) { - console.error('The value of percentage must be between 0 and 100') + throw new Error('The value of percentage must be between 0 and 100') } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (6)
docs/component/progress.md(5 hunks)src/pages/progress/Index.vue(3 hunks)src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss(1 hunks)src/uni_modules/wot-design-uni/components/wd-progress/index.scss(2 hunks)src/uni_modules/wot-design-uni/components/wd-progress/types.ts(2 hunks)src/uni_modules/wot-design-uni/components/wd-progress/wd-progress.vue(2 hunks)
🔇 Additional comments (11)
src/uni_modules/wot-design-uni/components/wd-progress/types.ts (2)
13-13: 类型定义扩展合理！
新增的 'warning' 状态丰富了进度条的展示能力，与常见的UI设计模式保持一致。注释清晰地说明了类型用途。
Line range hint 22-25: 请确认类型定义是否需要约束 percentage 属性
考虑到此PR修复了进度值为0的问题，建议验证 percentage 属性的类型定义是否需要明确指定允许值为0。
src/pages/progress/Index.vue (3)
4-4: 验证进度条组件的零值处理
基于 PR 的目标，这个改动是为了测试进度条能否正确处理 0 值。建议添加一个按钮来动态测试将 percentageZero 设置为 0 的情况。
建议添加以下代码来测试零值情况：
<demo-block title="基本用法">
<wd-progress :percentage="percentageZero" />
+ <wd-button @click="percentageZero = 0">设置为 0</wd-button>
+ <wd-button @click="percentageZero = 30">设置为 30</wd-button>
</demo-block>14-14: 新增警告状态示例代码正确
新增的警告状态示例完善了组件文档，使用方式正确。
28-28: 类型定义和响应式变量声明合理
导入的类型定义和响应式变量的声明都符合 TypeScript 的最佳实践。
Also applies to: 31-32
src/uni_modules/wot-design-uni/components/wd-progress/index.scss (2)
40-40: 样式变量更新符合规范
更新后的颜色变量命名更加统一和简洁，有利于维护。
验证新的颜色变量是否已定义：
Also applies to: 43-44
✅ Verification successful
颜色变量已正确定义，样式更新合理
颜色变量 $-progress-danger-color 和 $-progress-success-color 已在 variable.scss 中正确定义，并且使用了合适的默认值和CSS变量。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查颜色变量是否在variable.scss中定义
rg '\$-progress-(danger|success)-color' src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss
Length of output: 319
45-47: 新增warning状态样式实现完整
warning状态的样式实现遵循了组件现有的设计模式，同时确保了进度条和图标的样式保持一致。
验证warning状态的颜色变量：
Also applies to: 64-66
✅ Verification successful
Let me verify if the warning color variable is properly defined and used consistently.
Let me check if the warning color is properly inherited from the base color variable.
warning状态的样式实现正确且完整
warning状态的颜色变量$-progress-warning-color已正确定义在变量文件中，它继承自基础警告色$-color-warning，并支持CSS变量自定义。在进度条组件中的使用也符合设计规范，包括背景色和文字颜色的统一处理。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查warning颜色变量是否在variable.scss中定义
rg '\$-progress-warning-color' src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss
Length of output: 211
Script:
#!/bin/bash
# Check if the warning color variable is defined in CSS variables
rg --type css 'wot-progress-warning-color' src/
# Check if there are any other usages of the warning color variable
rg '\$-progress-warning-color' src/
Length of output: 656
Script:
#!/bin/bash
# Check the definition of $-color-warning
rg '\$-color-warning' src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss
# Check if there are any CSS custom properties related to warning colors
rg 'warning-color' src/uni_modules/wot-design-uni/components/common/theme
Length of output: 1061
docs/component/progress.md (1)
95-97: 外部样式类文档结构清晰
文档结构完整，表格格式规范。
src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss (2)
489-490: 新增警告状态颜色变量，符合设计规范
新增的警告状态颜色变量使用了系统预设的警告色，保持了视觉一致性。
491-491: 优化默认进度条颜色，提升视觉层级
将默认进度条颜色设置为成功色，使其更符合用户体验预期。
src/uni_modules/wot-design-uni/components/wd-progress/wd-progress.vue (1)
30-30: 请确认 'pause' 函数已在 '../common/util' 中正确导出
确保 'pause' 函数在 '../common/util' 模块中已正确定义和导出，以避免运行时错误。
您可以运行以下脚本来验证：
✅ Verification successful
'pause' 函数已在 '../common/util' 中正确导出和实现
pause 函数已在 src/uni_modules/wot-design-uni/components/common/util.ts 文件中正确定义和导出。该函数实现了一个基于 AbortablePromise 的延时功能，可以安全使用。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查 '../common/util' 中是否导出了 'pause' 函数
rg "export function pause" src/uni_modules/wot-design-uni/components/common/util.ts
Length of output: 85
Script:
#!/bin/bash
# 检查 util.ts 文件中的所有导出内容
cat src/uni_modules/wot-design-uni/components/common/util.ts
# 同时检查是否有其他文件导出了 pause 函数
rg "export.*pause" --type ts
Length of output: 17838
docs/component/progress.md
Outdated
| | percentage | 进度数值，最大值 100 | `number` | - | 0 | - | | ||
| | hide-text | 隐藏进度文字 | `boolean` | - | false | - | | ||
| | color | 进度条颜色 | `string \| ProgressColor[] \| string[]` | - | - | - | | ||
| | status | 进度条状态 | `string` | success / danger | - | - | |
There was a problem hiding this comment.
status 属性文档需要更新
根据代码实现，status 属性支持 warning 状态，但在文档中未列出。建议更新文档：
-| status | 进度条状态 | `string` | success / danger | - | - |
+| status | 进度条状态 | `string` | success / danger / warning | - | - |📝 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.
| | status | 进度条状态 | `string` | success / danger | - | - | | |
| | status | 进度条状态 | `string` | success / danger / warning | - | - | |
| // eslint-disable-next-line no-prototype-builtins | ||
| const isObjArray = colorArray.every((color) => color.hasOwnProperty('color') && color.hasOwnProperty('percentage')) |
There was a problem hiding this comment.
避免直接使用对象实例的 'hasOwnProperty' 方法
直接调用对象实例的 'hasOwnProperty' 方法可能会导致继承属性的问题，建议使用 Object.prototype.hasOwnProperty.call()。
修改如下：
- const isObjArray = colorArray.every((color) => color.hasOwnProperty('color') && color.hasOwnProperty('percentage'))
+ const isObjArray = colorArray.every((color) => Object.prototype.hasOwnProperty.call(color, 'color') && Object.prototype.hasOwnProperty.call(color, 'percentage'))📝 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.
| // eslint-disable-next-line no-prototype-builtins | |
| const isObjArray = colorArray.every((color) => color.hasOwnProperty('color') && color.hasOwnProperty('percentage')) | |
| // eslint-disable-next-line no-prototype-builtins | |
| const isObjArray = colorArray.every((color) => Object.prototype.hasOwnProperty.call(color, 'color') && Object.prototype.hasOwnProperty.call(color, 'percentage')) |
Moonofweisheng
force-pushed
the
fix/progress-set-zero
branch
from
9f9e202 to
9fe86e7
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (2)
src/uni_modules/wot-design-uni/components/wd-progress/wd-progress.vue (2)
49-65: 建议优化图标名称的计算逻辑当前的 switch 语句可以使用对象映射来简化，提高代码的可维护性。
建议如下重构：
-const iconName = computed(() => { - let icon: string = '' - switch (props.status) { - case 'danger': - icon = 'close-outline' - break - case 'success': - icon = 'check-outline' - break - case 'warning': - icon = 'warn-bold' - break - default: - break - } - return icon -}) +const statusIconMap = { + danger: 'close-outline', + success: 'check-outline', + warning: 'warn-bold' +} +const iconName = computed(() => statusIconMap[props.status] || '')
155-155: 简化定时器清理逻辑
clearTimeout本身对无效的定时器 ID 是安全的，不需要额外的条件检查。建议修改如下：
-timer && clearTimeout(timer) +clearTimeout(timer)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (6)
docs/component/progress.md(5 hunks)src/pages/progress/Index.vue(3 hunks)src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss(1 hunks)src/uni_modules/wot-design-uni/components/wd-progress/index.scss(2 hunks)src/uni_modules/wot-design-uni/components/wd-progress/types.ts(2 hunks)src/uni_modules/wot-design-uni/components/wd-progress/wd-progress.vue(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- docs/component/progress.md
- src/pages/progress/Index.vue
- src/uni_modules/wot-design-uni/components/wd-progress/index.scss
- src/uni_modules/wot-design-uni/components/wd-progress/types.ts
🔇 Additional comments (6)
src/uni_modules/wot-design-uni/components/wd-progress/wd-progress.vue (4)
4-4: 模板结构优化得当！
使用计算属性替代内联逻辑，提高了代码的可维护性和可读性。
Also applies to: 9-10
30-31: 导入声明完善！
新增的工具函数和类型定义有助于提高代码的类型安全性和功能完整性。
82-113: 进度控制逻辑修复完善
新的实现正确处理了进度值为 0 的情况，完全符合 PR 的目标。代码结构清晰，逻辑完整。
127-128:
避免直接使用对象实例的 'hasOwnProperty' 方法
直接调用对象实例的 'hasOwnProperty' 方法可能会导致继承属性的问题，建议使用 Object.prototype.hasOwnProperty.call()。
建议修改如下：
-const isObjArray = colorArray.every((color) => color.hasOwnProperty('color') && color.hasOwnProperty('percentage'))
+const isObjArray = colorArray.every((color) => Object.prototype.hasOwnProperty.call(color, 'color') && Object.prototype.hasOwnProperty.call(color, 'percentage'))src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss (2)
489-490: 新增警告状态颜色变量
新增的警告状态颜色变量与组件现有的成功和危险状态保持一致，增强了进度条组件的视觉反馈能力。
491-491: 更新进度条基础颜色变量
移除了渐变色定义，改用纯色变量，简化了样式系统，使其更加清晰和易于维护。
| function validatePercentage(value: number) { | ||
| if (Number.isNaN(value) || value < 0 || value > 100) { | ||
| console.error('The value of percentage must be between 0 and 100') | ||
| } | ||
| ) | ||
| } |
There was a problem hiding this comment.
建议加强数值验证的错误处理
当前的验证函数只打印错误信息，但继续执行可能导致意外行为。建议抛出错误以便上层组件捕获和处理。
建议修改如下：
function validatePercentage(value: number) {
if (Number.isNaN(value) || value < 0 || value > 100) {
- console.error('The value of percentage must be between 0 and 100')
+ throw new Error('进度值必须在 0 到 100 之间')
}
}📝 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.
| function validatePercentage(value: number) { | |
| if (Number.isNaN(value) || value < 0 || value > 100) { | |
| console.error('The value of percentage must be between 0 and 100') | |
| } | |
| ) | |
| } | |
| function validatePercentage(value: number) { | |
| if (Number.isNaN(value) || value < 0 || value > 100) { | |
| throw new Error('进度值必须在 0 到 100 之间') | |
| } | |
| } |
Moonofweisheng
force-pushed
the
fix/progress-set-zero
branch
from
9fe86e7 to
89e402b
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (4)
src/pages/progress/Index.vue (2)
28-28: 类型定义的改进建议代码的类型安全性有了提升，但还可以进一步改进：
- 建议为
colorObject数组中的百分比值添加范围约束- 考虑将颜色对象的结构提取为独立的接口
建议如下重构：
+interface ColorStop { + color: string; + percentage: number; +} -const colorObject = ref<ProgressColor[]>([ +const colorObject = ref<ColorStop[]>([Also applies to: 31-34
Line range hint
34-49: 优化颜色配置对象颜色配置对象中的百分比值应该是递增的，建议添加注释说明这一约束。同时，建议使用更有意义的颜色值来替代当前的基础颜色名称。
建议如下修改：
const colorObject = ref<ProgressColor[]>([ { - color: 'yellow', + color: '#FFB300', // 警告色 percentage: 30 }, { - color: 'red', + color: '#E2231A', // 错误色 percentage: 60 }, { - color: 'blue', + color: '#0083FF', // 主色 percentage: 80 }, { - color: 'black', + color: '#464646', // 完成色 percentage: 90 } ])src/uni_modules/wot-design-uni/components/wd-progress/wd-progress.vue (2)
30-31: 建议改进计时器类型定义当前使用
NodeJS.Timeout作为计时器类型，建议使用更具体的类型定义。建议修改为：
-let timer: NodeJS.Timeout | null = null +let timer: ReturnType<typeof setTimeout> | null = nullAlso applies to: 37-37
49-65: 建议优化图标名称的计算逻辑当前使用 switch 语句来确定图标名称，建议使用对象映射来简化代码。
建议修改为：
-const iconName = computed(() => { - let icon: string = '' - switch (props.status) { - case 'danger': - icon = 'close-outline' - break - case 'success': - icon = 'check-outline' - break - case 'warning': - icon = 'warn-bold' - break - default: - break - } - return icon -}) +const statusIconMap = { + danger: 'close-outline', + success: 'check-outline', + warning: 'warn-bold' +} as const + +const iconName = computed(() => statusIconMap[props.status as keyof typeof statusIconMap] || '')
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (6)
docs/component/progress.md(5 hunks)src/pages/progress/Index.vue(3 hunks)src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss(1 hunks)src/uni_modules/wot-design-uni/components/wd-progress/index.scss(2 hunks)src/uni_modules/wot-design-uni/components/wd-progress/types.ts(2 hunks)src/uni_modules/wot-design-uni/components/wd-progress/wd-progress.vue(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- src/uni_modules/wot-design-uni/components/wd-progress/index.scss
- docs/component/progress.md
- src/uni_modules/wot-design-uni/components/wd-progress/types.ts
🔇 Additional comments (6)
src/pages/progress/Index.vue (1)
4-4: 模板更改看起来不错，但建议验证零值场景
模板的修改符合需求，新增了警告状态并改用动态进度值。建议添加一个按钮来测试将进度设置为 0 的场景，以验证 #747 问题是否已解决。
建议添加以下代码来测试零值场景：
<demo-block title="基本用法">
<wd-progress :percentage="percentageZero" />
+ <wd-button @click="percentageZero = 0">设置为0</wd-button>
+ <wd-button @click="percentageZero = 30">设置为30</wd-button>
</demo-block>Also applies to: 14-14
src/uni_modules/wot-design-uni/components/wd-progress/wd-progress.vue (3)
4-4: 代码结构优化得当！
模板中的更改提高了代码的可维护性：
- 将
progressClass重命名为更语义化的innerClass - 将图标名称逻辑抽离到计算属性中
Also applies to: 9-10
76-80: 建议加强数值验证的错误处理
当前的验证函数只打印错误信息，但继续执行可能导致意外行为。建议抛出错误以便上层组件捕获和处理。
127-128: 避免直接使用对象实例的 'hasOwnProperty' 方法
直接调用对象实例的 'hasOwnProperty' 方法可能会导致继承属性的问题。
src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss (2)
489-490: 新增警告状态颜色变量，符合设计规范
新增的警告状态颜色变量使用了全局警告色，保持了与其他状态颜色（如成功、危险）的一致性。
491-491: 简化进度条颜色变量定义
将进度条颜色直接关联到主题色，移除了之前的渐变色定义，使样式更加简洁统一。
| async function controlProgress() { | ||
| const { percentage, color } = props | ||
| if (!isDef(color)) { | ||
| changeCount.value = Math.abs(percentage - showPercent.value) | ||
| await pause(1000 / 30) | ||
| showPercent.value = percentage | ||
| return | ||
| } | ||
| ) | ||
| if (showPercent.value === percentage) return | ||
|
|
||
| const colorArray = isArray(color) ? color : [color] | ||
| validateColorArray(colorArray) | ||
|
|
||
| function computeProgressClass() { | ||
| const { status } = props | ||
| let progressClasses: string[] = [] | ||
| status && progressClasses.push(`is-${status}`) | ||
| progressClass.value = progressClasses.join(' ') | ||
| const partList = createPartList(colorArray) | ||
|
|
||
| if (showPercent.value > percentage) { | ||
| partList.some((part) => { | ||
| if (percentage <= part.percentage) { | ||
| update(percentage, part.color) | ||
| return true | ||
| } | ||
| }) | ||
| } else { | ||
| partList.some((part, index) => { | ||
| if (showPercent.value < part.percentage && part.percentage <= percentage) { | ||
| update(part.percentage, part.color) | ||
| return true | ||
| } else if (index === partList.length - 1) { | ||
| update(percentage, part.color) | ||
| } | ||
| }) | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议重构进度控制逻辑以提高可维护性
当前的 controlProgress 函数较为复杂，包含多层嵌套条件。建议将其拆分为更小的函数以提高可读性和可维护性。
建议将进度更新逻辑拆分如下：
+function updateProgressForward(partList: ProgressColor[], percentage: number) {
+ return partList.some((part, index) => {
+ if (showPercent.value < part.percentage && part.percentage <= percentage) {
+ update(part.percentage, part.color)
+ return true
+ } else if (index === partList.length - 1) {
+ update(percentage, part.color)
+ }
+ })
+}
+
+function updateProgressBackward(partList: ProgressColor[], percentage: number) {
+ return partList.some((part) => {
+ if (percentage <= part.percentage) {
+ update(percentage, part.color)
+ return true
+ }
+ })
+}
+
async function controlProgress() {
const { percentage, color } = props
if (!isDef(color)) {
changeCount.value = Math.abs(percentage - showPercent.value)
await pause(1000 / 30)
showPercent.value = percentage
return
}
if (showPercent.value === percentage) return
const colorArray = isArray(color) ? color : [color]
validateColorArray(colorArray)
const partList = createPartList(colorArray)
- if (showPercent.value > percentage) {
- partList.some((part) => {
- if (percentage <= part.percentage) {
- update(percentage, part.color)
- return true
- }
- })
- } else {
- partList.some((part, index) => {
- if (showPercent.value < part.percentage && part.percentage <= percentage) {
- update(part.percentage, part.color)
- return true
- } else if (index === partList.length - 1) {
- update(percentage, part.color)
- }
- })
- }
+ showPercent.value > percentage
+ ? updateProgressBackward(partList, percentage)
+ : updateProgressForward(partList, percentage)
}📝 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.
| async function controlProgress() { | |
| const { percentage, color } = props | |
| if (!isDef(color)) { | |
| changeCount.value = Math.abs(percentage - showPercent.value) | |
| await pause(1000 / 30) | |
| showPercent.value = percentage | |
| return | |
| } | |
| ) | |
| if (showPercent.value === percentage) return | |
| const colorArray = isArray(color) ? color : [color] | |
| validateColorArray(colorArray) | |
| function computeProgressClass() { | |
| const { status } = props | |
| let progressClasses: string[] = [] | |
| status && progressClasses.push(`is-${status}`) | |
| progressClass.value = progressClasses.join(' ') | |
| const partList = createPartList(colorArray) | |
| if (showPercent.value > percentage) { | |
| partList.some((part) => { | |
| if (percentage <= part.percentage) { | |
| update(percentage, part.color) | |
| return true | |
| } | |
| }) | |
| } else { | |
| partList.some((part, index) => { | |
| if (showPercent.value < part.percentage && part.percentage <= percentage) { | |
| update(part.percentage, part.color) | |
| return true | |
| } else if (index === partList.length - 1) { | |
| update(percentage, part.color) | |
| } | |
| }) | |
| } | |
| async function controlProgress() { | |
| const { percentage, color } = props | |
| if (!isDef(color)) { | |
| changeCount.value = Math.abs(percentage - showPercent.value) | |
| await pause(1000 / 30) | |
| showPercent.value = percentage | |
| return | |
| } | |
| if (showPercent.value === percentage) return | |
| const colorArray = isArray(color) ? color : [color] | |
| validateColorArray(colorArray) | |
| const partList = createPartList(colorArray) | |
| showPercent.value > percentage | |
| ? updateProgressBackward(partList, percentage) | |
| : updateProgressForward(partList, percentage) | |
| } | |
| function updateProgressForward(partList: ProgressColor[], percentage: number) { | |
| return partList.some((part, index) => { | |
| if (showPercent.value < part.percentage && part.percentage <= percentage) { | |
| update(part.percentage, part.color) | |
| return true | |
| } else if (index === partList.length - 1) { | |
| update(percentage, part.color) | |
| } | |
| }) | |
| } | |
| function updateProgressBackward(partList: ProgressColor[], percentage: number) { | |
| return partList.some((part) => { | |
| if (percentage <= part.percentage) { | |
| update(percentage, part.color) | |
| return true | |
| } | |
| }) | |
| } |
Moonofweisheng
force-pushed
the
fix/progress-set-zero
branch
from
89e402b to
c79727c
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (3)
src/pages/progress/Index.vue (3)
34-34: 建议使用 const 类型断言提升类型推导可以考虑使用
as const来确保更严格的类型推导：-const percentageZero = ref<number>(30) +const percentageZero = ref(30 as const)这样可以让类型系统提供更精确的类型信息。
Also applies to: 37-41
43-51: 建议提取常量值建议将进度条的最大值和最小值提取为常量，提高代码的可维护性：
+const MIN_PERCENTAGE = 0 +const MAX_PERCENTAGE = 100 +const STEP = 10 const add = () => { - percentageDynamic.value = Math.min(percentageDynamic.value + 10, 100) + percentageDynamic.value = Math.min(percentageDynamic.value + STEP, MAX_PERCENTAGE) } const reduce = () => { - percentageDynamic.value = Math.max(percentageDynamic.value - 10, 0) + percentageDynamic.value = Math.max(percentageDynamic.value - STEP, MIN_PERCENTAGE) }
Line range hint
53-69: 建议增强颜色值的类型定义颜色值的类型可以更具体，建议使用联合类型或者预定义的颜色常量：
type ValidColor = 'yellow' | 'red' | 'blue' | 'black' | string interface ProgressColor { color: ValidColor percentage: number }这样可以在开发时提供更好的类型提示。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (6)
docs/component/progress.md(5 hunks)src/pages/progress/Index.vue(3 hunks)src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss(1 hunks)src/uni_modules/wot-design-uni/components/wd-progress/index.scss(2 hunks)src/uni_modules/wot-design-uni/components/wd-progress/types.ts(2 hunks)src/uni_modules/wot-design-uni/components/wd-progress/wd-progress.vue(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- src/uni_modules/wot-design-uni/components/wd-progress/index.scss
- docs/component/progress.md
- src/uni_modules/wot-design-uni/components/wd-progress/types.ts
- src/uni_modules/wot-design-uni/components/wd-progress/wd-progress.vue
🔇 Additional comments (3)
src/pages/progress/Index.vue (1)
4-4: 代码结构清晰，示例完整！
新增的动态进度条示例和警告状态展示对组件的功能演示很有帮助，同时也验证了进度条可以正确设置为0的修复。
Also applies to: 14-14, 26-30
src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss (2)
489-490: 新增警告状态颜色变量，符合设计规范
新增的警告状态颜色变量使用全局警告色作为默认值，与其他状态（如成功、危险）的命名和使用方式保持一致。
491-491: 简化进度条颜色变量定义
将进度条颜色变量简化为直接使用主题色，移除了之前的渐变色定义，使组件样式更加统一和可维护。
✅ Closes: #747
Moonofweisheng
force-pushed
the
fix/progress-set-zero
branch
from
c79727c to
6148867
Compare
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Outside diff range and nitpick comments (5)
src/pages/progress/Index.vue (3)
37-41: 建议修改percentageZero的初始值变量名为
percentageZero但初始值设置为 30，这可能会造成混淆。建议：
- 如果此变量用于测试设置为 0 的情况，建议将初始值改为 0
- 如果不是用于测试该场景，建议重命名为更贴切的名称，如
percentageBase
43-51: 动态进度方法实现得很好！代码使用
Math.min/max确保了值在有效范围内，逻辑清晰。建议考虑添加以下增强：
- 可以考虑添加步进值的参数化，而不是固定为 10
- 在值达到边界时，可以考虑添加用户提示
-const add = () => { +const add = (step: number = 10) => { percentageDynamic.value = Math.min(percentageDynamic.value + 10, 100) + if (percentageDynamic.value === 100) { + uni.showToast({ title: '已达到最大值', icon: 'none' }) + } } -const reduce = () => { +const reduce = (step: number = 10) => { percentageDynamic.value = Math.max(percentageDynamic.value - 10, 0) + if (percentageDynamic.value === 0) { + uni.showToast({ title: '已达到最小值', icon: 'none' }) + } }
Line range hint
53-69: 建议使用主题变量代替硬编码的颜色值当前颜色值是硬编码的，建议使用主题系统中定义的变量以保持一致性和可维护性。
const colorObject = ref<ProgressColor[]>([ { - color: 'yellow', + color: 'var(--wot-warning-color)', percentage: 30 }, { - color: 'red', + color: 'var(--wot-danger-color)', percentage: 60 }, { - color: 'blue', + color: 'var(--wot-primary-color)', percentage: 80 }, { - color: 'black', + color: 'var(--wot-text-color)', percentage: 90 } ])src/uni_modules/wot-design-uni/components/wd-progress/wd-progress.vue (2)
37-44: 建议优化定时器类型定义当前使用
NodeJS.Timeout作为定时器类型，建议改用更通用的类型定义。建议修改如下：
-let timer: NodeJS.Timeout | null = null +let timer: ReturnType<typeof setTimeout> | null = null
47-65: 建议优化图标映射逻辑当前的 switch 语句可以简化为对象映射，提高代码可维护性。
建议修改如下：
-const iconName = computed(() => { - let icon: string = '' - switch (props.status) { - case 'danger': - icon = 'close-outline' - break - case 'success': - icon = 'check-outline' - break - case 'warning': - icon = 'warn-bold' - break - default: - break - } - return icon -}) +const statusIconMap = { + danger: 'close-outline', + success: 'check-outline', + warning: 'warn-bold' +} as const + +const iconName = computed(() => statusIconMap[props.status as keyof typeof statusIconMap] || '')
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (6)
docs/component/progress.md(5 hunks)src/pages/progress/Index.vue(3 hunks)src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss(1 hunks)src/uni_modules/wot-design-uni/components/wd-progress/index.scss(2 hunks)src/uni_modules/wot-design-uni/components/wd-progress/types.ts(2 hunks)src/uni_modules/wot-design-uni/components/wd-progress/wd-progress.vue(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- src/uni_modules/wot-design-uni/components/wd-progress/index.scss
- docs/component/progress.md
- src/uni_modules/wot-design-uni/components/wd-progress/types.ts
🔇 Additional comments (5)
src/pages/progress/Index.vue (1)
4-4: 模板更改看起来不错！
新增的动态进度条示例和警告状态示例有助于展示组件的完整功能。布局结构清晰，代码组织合理。
Also applies to: 14-14, 26-30
src/uni_modules/wot-design-uni/components/wd-progress/wd-progress.vue (2)
4-4: 模板结构优化得当！
通过使用计算属性替代内联逻辑，提高了代码的可维护性和可读性。类名的重构也使得样式结构更加清晰。
Also applies to: 9-10
76-80: 🛠️ Refactor suggestion
建议加强验证函数的错误处理
当前的验证函数只是打印错误信息，建议抛出错误以便上层组件可以捕获和处理。
建议修改如下：
function validatePercentage(value: number) {
if (Number.isNaN(value) || value < 0 || value > 100) {
- console.error('The value of percentage must be between 0 and 100')
+ throw new Error('进度值必须在 0 到 100 之间')
}
}Likely invalid or redundant comment.
src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss (2)
489-490: 新增警告状态颜色变量，代码规范
新增的警告状态颜色变量遵循了现有的变量命名规范，并且正确引用了主题警告色。
491-491: 进度条颜色变量更新合理
将进度条颜色直接关联到主题色是一个好的改进，这样可以确保进度条的显示与整体主题保持一致。
| timer && clearTimeout(timer) | ||
| timer = null | ||
| controlProgress() | ||
| updateProgress() |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议优化定时器清理逻辑
当前的定时器清理可能存在竞态条件，建议在组件卸载时确保清理所有定时器。
建议添加以下代码：
+import { onBeforeUnmount } from 'vue'
+
+onBeforeUnmount(() => {
+ if (timer) {
+ clearTimeout(timer)
+ timer = null
+ }
+})Committable suggestion skipped: line range outside the PR's diff.
| function updateProgressForward(partList: ProgressColor[], percentage: number) { | ||
| return partList.some((part, index) => { | ||
| if (showPercent.value < part.percentage && part.percentage <= percentage) { | ||
| update(part.percentage, part.color) | ||
| return true | ||
| } else if (index === partList.length - 1) { | ||
| update(percentage, part.color) | ||
| } | ||
| }) | ||
| } | ||
|
|
||
| /** | ||
| * 进度条后退 | ||
| * @param partList 颜色数组 | ||
| * @param percentage 进度值 | ||
| */ | ||
| function updateProgressBackward(partList: ProgressColor[], percentage: number) { | ||
| return partList.some((part) => { | ||
| if (percentage <= part.percentage) { | ||
| update(percentage, part.color) | ||
| return true | ||
| } | ||
| }) | ||
| } | ||
|
|
||
| /** | ||
| * 更新进度条 | ||
| */ | ||
| async function updateProgress() { | ||
| const { percentage, color } = props | ||
| if (!isDef(color) || (isArray(color) && color.length === 0)) { | ||
| changeCount.value = Math.abs(percentage - showPercent.value) | ||
| await pause() | ||
| showPercent.value = percentage | ||
| return | ||
| } | ||
| ) | ||
| if (showPercent.value === percentage) return | ||
|
|
||
| function computeProgressClass() { | ||
| const { status } = props | ||
| let progressClasses: string[] = [] | ||
| status && progressClasses.push(`is-${status}`) | ||
| progressClass.value = progressClasses.join(' ') | ||
| const colorArray = isArray(color) ? color : [color] | ||
| validateColorArray(colorArray) | ||
| const partList = createPartList(colorArray) | ||
| showPercent.value > percentage ? updateProgressBackward(partList, percentage) : updateProgressForward(partList, percentage) |
There was a problem hiding this comment.
建议增加进度更新的边界检查
当前的进度更新逻辑缺少对 percentage 为 0 的特殊处理，这可能是导致原始问题的根本原因。
建议在 updateProgress 函数中添加如下处理：
async function updateProgress() {
const { percentage, color } = props
+ // 特殊处理 percentage 为 0 的情况
+ if (percentage === 0) {
+ changeCount.value = showPercent.value
+ await pause()
+ showPercent.value = 0
+ showColor.value = ''
+ return
+ }
if (!isDef(color) || (isArray(color) && color.length === 0)) {
// ... 其余代码保持不变📝 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.
| function updateProgressForward(partList: ProgressColor[], percentage: number) { | |
| return partList.some((part, index) => { | |
| if (showPercent.value < part.percentage && part.percentage <= percentage) { | |
| update(part.percentage, part.color) | |
| return true | |
| } else if (index === partList.length - 1) { | |
| update(percentage, part.color) | |
| } | |
| }) | |
| } | |
| /** | |
| * 进度条后退 | |
| * @param partList 颜色数组 | |
| * @param percentage 进度值 | |
| */ | |
| function updateProgressBackward(partList: ProgressColor[], percentage: number) { | |
| return partList.some((part) => { | |
| if (percentage <= part.percentage) { | |
| update(percentage, part.color) | |
| return true | |
| } | |
| }) | |
| } | |
| /** | |
| * 更新进度条 | |
| */ | |
| async function updateProgress() { | |
| const { percentage, color } = props | |
| if (!isDef(color) || (isArray(color) && color.length === 0)) { | |
| changeCount.value = Math.abs(percentage - showPercent.value) | |
| await pause() | |
| showPercent.value = percentage | |
| return | |
| } | |
| ) | |
| if (showPercent.value === percentage) return | |
| function computeProgressClass() { | |
| const { status } = props | |
| let progressClasses: string[] = [] | |
| status && progressClasses.push(`is-${status}`) | |
| progressClass.value = progressClasses.join(' ') | |
| const colorArray = isArray(color) ? color : [color] | |
| validateColorArray(colorArray) | |
| const partList = createPartList(colorArray) | |
| showPercent.value > percentage ? updateProgressBackward(partList, percentage) : updateProgressForward(partList, percentage) | |
| function updateProgressForward(partList: ProgressColor[], percentage: number) { | |
| return partList.some((part, index) => { | |
| if (showPercent.value < part.percentage && part.percentage <= percentage) { | |
| update(part.percentage, part.color) | |
| return true | |
| } else if (index === partList.length - 1) { | |
| update(percentage, part.color) | |
| } | |
| }) | |
| } | |
| /** | |
| * 进度条后退 | |
| * @param partList 颜色数组 | |
| * @param percentage 进度值 | |
| */ | |
| function updateProgressBackward(partList: ProgressColor[], percentage: number) { | |
| return partList.some((part) => { | |
| if (percentage <= part.percentage) { | |
| update(percentage, part.color) | |
| return true | |
| } | |
| }) | |
| } | |
| /** | |
| * 更新进度条 | |
| */ | |
| async function updateProgress() { | |
| const { percentage, color } = props | |
| // 特殊处理 percentage 为 0 的情况 | |
| if (percentage === 0) { | |
| changeCount.value = showPercent.value | |
| await pause() | |
| showPercent.value = 0 | |
| showColor.value = '' | |
| return | |
| } | |
| if (!isDef(color) || (isArray(color) && color.length === 0)) { | |
| changeCount.value = Math.abs(percentage - showPercent.value) | |
| await pause() | |
| showPercent.value = percentage | |
| return | |
| } | |
| if (showPercent.value === percentage) return | |
| const colorArray = isArray(color) ? color : [color] | |
| validateColorArray(colorArray) | |
| const partList = createPartList(colorArray) | |
| showPercent.value > percentage ? updateProgressBackward(partList, percentage) : updateProgressForward(partList, percentage) |
There was a problem hiding this comment.
percentage为0时也走update逻辑就行了
There was a problem hiding this comment.
@Moonofweisheng 好的，明白了。您认为当 percentage 为 0 时，也应该通过 update 函数处理，而无需在 updateProgress 函数中进行特殊处理。感谢您的解释。
✏️ Learnings added
Learnt from: Moonofweisheng
PR: Moonofweisheng/wot-design-uni#748
File: src/uni_modules/wot-design-uni/components/wd-progress/wd-progress.vue:87-128
Timestamp: 2024-11-30T06:44:18.046Z
Learning: 在 `src/uni_modules/wot-design-uni/components/wd-progress/wd-progress.vue` 文件中，当 `percentage` 为 0 时，应通过 `update` 函数处理 `percentage` 为 0 的情况，而不需要在 `updateProgress` 函数中进行特殊处理。
Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.
✅ Closes: #747
🤔 这个 PR 的性质是？(至少选择一个)
🔗 相关 Issue
#747
💡 需求背景和解决方案
修复 Progress 无法设置进度为 0 的问题
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
ProgressColor类型，增强了颜色属性的灵活性。percentageZero和percentageDynamic反应式引用，提升了进度指示器的动态行为。wd-progress组件，优化了内部结构和错误处理。文档
wd-progress组件的文档，改善了可读性和准确性。样式
修复
percentage属性的验证逻辑，确保其值在 0 到 100 之间。