feat(progress): 兼容并支持taro components的progressProps & v15适配 #3202
Conversation
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
|
Caution Review failedThe pull request is closed. Suggested reviewers
Poem
|
github-actions
bot
added
action:review
Miles-hxy
changed the title
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #3202 +/- ##
=============================================
+ Coverage 86.54% 86.79% +0.25%
=============================================
Files 289 291 +2
Lines 18739 19148 +409
Branches 2822 2906 +84
=============================================
+ Hits 16217 16619 +402
- Misses 2517 2524 +7
Partials 5 5 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (2)
src/packages/progress/progress.taro.tsx (2)
56-61: 合并逻辑可读性略低，建议抽取工具函数并补充类型注释
目前针对showText / showInfo、color / activeColor等多对属性使用??链式合并，看起来紧凑但难以在出现'' | 0 | false等“假值”时第一时间判断优先级。将合并逻辑封装为独立 util（或使用useMemo）并为每个分支补充类型说明，可提高可读性与维护性。
218-218: 避免输出空aria-label，影响可访问性
当ariaLabel未传入时仍会渲染空属性，建议按需展开：- aria-label={ariaLabel} + {...(ariaLabel ? { 'aria-label': ariaLabel } : {})}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/packages/progress/progress.taro.tsx(6 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
Collaborator
|
新增属性，需要添加 demo 、文档 等。 |
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
src/packages/progress/demo.taro.tsx (1)
30-37: zh-TW 语言部分使用了简体中文当前 zh-TW 部分的翻译（基础用法到动态改变）使用的是简体中文，应当使用繁体中文以保持一致性。
建议将 30-37 行的文本修改为繁体中文版本：
- basic: '基础用法', - customStyle: '设置颜色与宽度', - noShowPercentage: '显示百分比', - customContent: '自定义显示内容', - customSize: '自定义尺寸', - statusDisplay: '状态显示', - dynamicChange: '动态改变', + basic: '基礎用法', + customStyle: '設置顏色與寬度', + noShowPercentage: '顯示百分比', + customContent: '自定義顯示內容', + customSize: '自定義尺寸', + statusDisplay: '狀態顯示', + dynamicChange: '動態改變',
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/packages/progress/demo.taro.tsx(4 hunks)src/packages/progress/demos/taro/demo9.tsx(1 hunks)src/packages/progress/doc.taro.md(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- src/packages/progress/doc.taro.md
🔇 Additional comments (8)
src/packages/progress/demo.taro.tsx (5)
14-14: 引入了新的示例组件 Demo9新组件的引入符合项目的导入规范，该组件将用于展示 Progress 组件的动画相关新特性。
27-27: 新增多语言支持项 'activeMode'新增 'activeMode' 多语言标签用于新功能的展示，翻译内容清晰表达了该功能的用途。
38-38: 正确使用繁体中文翻译 'activeMode'新增的 'activeMode' 多语言标签正确使用了繁体中文，保持了语言一致性。
49-49: 英文翻译清晰表达功能特点英文翻译 "Duration And Animation Mode" 清晰表达了该功能特点，符合英文表达习惯。
78-79: 正确添加新示例到页面中新的示例组件和标题添加位置合理，保持了与其他示例一致的布局结构。
src/packages/progress/demos/taro/demo9.tsx (3)
9-15: 使用新的 Progress 组件属性展示动画效果代码很好地演示了 Progress 组件的新属性
activeMode和duration，展示了向前和向后两种动画模式的不同效果。
18-35: 控制按钮实现合理的值范围限制增加和减少按钮的实现包含适当的边界检查（0-100），确保进度值在有效范围内。代码简洁清晰。
1-3: 引入项已按照项目规范排序引入项排序符合项目规范：React 相关引入在前，组件库引入在后。
Collaborator
|
两端需要对齐~~ |
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (2)
src/types/spec/progress/base.ts (1)
12-17: 增加新的接口属性很好，但可以考虑添加类型注释这些新增属性的类型定义很棒，扩展了Progress组件的功能。建议给这些属性添加JSDoc文档注释，以便开发者更好地理解每个属性的用途和期望值。
例如：
/** * 边框圆角值，支持像素值或百分比 */ borderRadius: stringsrc/packages/progress/demos/h5/demo9.tsx (1)
25-26: 按钮文本应使用国际化支持按钮上的文本"减少"和"增加"是硬编码的中文，建议使用翻译机制以支持多语言。
import React, { useState } from 'react' -import { Cell, Button, Progress } from '@nutui/nutui-react' +import { Cell, Button, Progress } from '@nutui/nutui-react' +import { useTranslate } from '@/sites/assets/locale' const Demo9 = () => { const [value, setValue] = useState(0) + const [translated] = useTranslate({ + 'zh-CN': { + decrease: '减少', + increase: '增加', + }, + 'zh-TW': { + decrease: '減少', + increase: '增加', + }, + 'en-US': { + decrease: 'Decrease', + increase: 'Increase', + }, + }) return ( <Cell.Group> {/* Progress组件部分保持不变 */} <Cell align="center"> <Button type="default" style={{ marginRight: 16 }} onClick={() => { setValue(Math.max(0, value - 10)) }} > - 减少 + {translated.decrease} </Button> <Button type="primary" onClick={() => { setValue(Math.min(100, value + 10)) }} > - 增加 + {translated.increase} </Button> </Cell> </Cell.Group> ) }Also applies to: 33-34
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
src/packages/progress/demo.taro.tsx(4 hunks)src/packages/progress/demo.tsx(4 hunks)src/packages/progress/demos/h5/demo9.tsx(1 hunks)src/packages/progress/doc.en-US.md(1 hunks)src/packages/progress/doc.md(1 hunks)src/packages/progress/doc.zh-TW.md(1 hunks)src/packages/progress/progress.tsx(5 hunks)src/types/spec/progress/base.ts(1 hunks)
✅ Files skipped from review due to trivial changes (3)
- src/packages/progress/doc.zh-TW.md
- src/packages/progress/doc.md
- src/packages/progress/doc.en-US.md
🚧 Files skipped from review as they are similar to previous changes (1)
- src/packages/progress/demo.taro.tsx
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/packages/progress/demos/h5/demo9.tsx (1)
src/packages/progress/progress.tsx (1)
Progress(16-175)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: test
- GitHub Check: build
🔇 Additional comments (9)
src/packages/progress/demo.tsx (4)
11-11: 正确导入新的演示组件新增Demo9组件的导入正确地扩展了组件展示范围。
24-24: 多语言支持完善为新增功能添加了中文、繁体中文和英文的翻译，保证了国际化支持的完整性。
Also applies to: 35-35, 46-46
28-28: 修正了繁体中文翻译将"寛度"修正为"寬度"，提高了文本准确性。
69-70: 正确添加新演示组件到页面Demo9组件被正确添加到演示页面中，并使用了相应的翻译标题，结构清晰。
src/packages/progress/demos/h5/demo9.tsx (1)
9-15: 展示了新属性的良好示例此演示很好地展示了新增的
duration和activeMode属性，通过对比展示了前向和后向动画模式的不同效果，有助于用户理解这些新特性。src/packages/progress/progress.tsx (4)
32-37: 正确添加新的组件属性新增的属性与BaseProgress接口的定义一致，并保持了解构赋值的整洁结构。
67-82: 动画模式实现良好
activeMode的实现很好地支持了前向和后向两种动画模式，并且添加了适当的清理函数以防止内存泄漏。
138-138: 提升了无障碍访问支持添加
aria-label属性增强了组件的可访问性，符合现代Web应用的无障碍要求。
145-147: 添加过渡结束回调
onTransitionEnd事件处理程序与onActiveEnd回调的结合为用户提供了更多控制动画完成后行为的能力。
oasis-cloud
requested changes
May 15, 2025
|
|
||
| export const Progress: FunctionComponent< | ||
| Partial<TaroProgressProps> & React.HTMLAttributes<HTMLDivElement> | ||
| Partial<TaroProgressProps & ProgressProps> & |
Collaborator
There was a problem hiding this comment.
TaroProgressProps 用这个
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
src/packages/progress/progress.taro.tsx (1)
209-211: 🛠️ Refactor suggestion字体大小处理可能存在兼容性问题
当前的字体大小处理方式对于带有单位的字符串（如'16px'）可能会有问题。
建议改进fontSize的处理方式，增加类型检查和更安全的解析：
- fontSize: fontSize && pxTransform(parseInt(fontSize.toString())), + fontSize: + fontSize !== undefined + ? pxTransform(typeof fontSize === 'number' ? fontSize : parseInt(fontSize, 10)) + : undefined,这样对于各种类型的fontSize输入都能正确处理。
🧹 Nitpick comments (1)
src/packages/progress/progress.taro.tsx (1)
66-90: 样式计算函数化，提高代码复用性将样式计算抽取为
getStyles函数是个好的实践，提高了代码的可读性和维护性。但是可以进一步优化动画相关的代码。建议仅在需要时才添加过渡动画样式，避免无谓的性能开销：
- const transitionStyle = { - transition: `width ${duration || 300}ms ease-in-out`, - } + const transitionStyle = + effectiveAnimated || duration + ? { transition: `width ${duration || 300}ms ease-in-out` } + : {}这样在静态进度条场景不会产生多余的CSS动画计算。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/packages/progress/progress.taro.tsx(4 hunks)src/types/spec/progress/taro.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/types/spec/progress/taro.ts (1)
src/types/spec/progress/base.ts (1)
BaseProgress(3-18)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (7)
src/types/spec/progress/taro.ts (1)
3-8: 接口扩展增强了组件属性接口扩展了4个新属性，使Progress组件更加灵活和可配置，符合Taro组件的规范要求。新增属性与BaseProgress中已有的属性形成了良好的补充，提高了组件的可用性。
src/packages/progress/progress.taro.tsx (6)
37-47: 新增属性支持Taro组件的进度条自定义能力增加了多个重要属性来支持Taro组件的progressProps，这些属性允许更灵活地自定义进度条的外观和行为。
55-59: 良好的属性优先级处理通过创建effective变量处理属性优先级，逻辑清晰且考虑周全。优先使用props直接提供的值，其次使用Taro特有属性，最后使用默认值，保证了API的一致性和兼容性。
108-124: 修复动画模式和清理计时器的问题添加了对
activeMode的处理，并正确清理了setTimeout，这解决了之前可能存在的内存泄漏问题。同时也正确地添加了duration到依赖数组中。
225-226: 提升了组件的可访问性添加aria-label属性提高了组件的可访问性，这是一个很好的改进。
232-233: 新增动画结束回调支持添加了onTransitionEnd事件处理，支持动画结束后的回调，增强了组件的交互能力。
234-235: 使用改进的显示文本判断使用effectiveShowText替代直接的showText判断，统一了API行为，增强了组件的一致性。
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (2)
src/packages/progress/progress.taro.tsx (2)
109-124: 定时器清理已正确实现定时器清理的问题已按之前的审阅意见修复，包括添加 duration 依赖，确保在组件卸载或依赖变化时清理定时器。这可以有效防止内存泄漏和意外行为。
209-211: 🛠️ Refactor suggestion字体大小处理可能导致 NaN
当前的 fontSize 处理方式可能在传入非数字格式时导致问题。
建议实现更健壮的 fontSize 处理：
- fontSize: fontSize && pxTransform(parseInt(fontSize.toString())), + fontSize: + fontSize !== undefined + ? pxTransform(typeof fontSize === 'number' ? fontSize : parseInt(fontSize.toString(), 10)) + : undefined,这样可以避免在 fontSize 为无效值时出现 NaN，并正确处理不同的输入格式。
🧹 Nitpick comments (2)
src/packages/progress/progress.taro.tsx (2)
37-47: 新增的 Taro Progress 属性扩展了组件的功能这些新增属性使组件与 Taro 原生 Progress 组件保持了更好的兼容性，同时增强了样式和交互定制能力。
建议考虑在组件文档中详细说明这些新属性的用途和使用方法，特别是
activeMode、duration和onActiveEnd这些与动画相关的属性。
66-90: 样式计算函数可进一步优化当前的
getStyles函数在某些情况下可能会导致不必要的性能开销。建议按照之前审阅意见优化过渡动画样式的应用：
const transitionStyle = { transition: `width ${duration || 300}ms ease-in-out`, } + const transitionStyle = + effectiveAnimated || duration + ? { transition: `width ${duration || 300}ms ease-in-out` } + : {}另外，borderRadius 和 fontSize 的处理也需要注意：
- borderRadius && pxTransform(parseInt(borderRadius.toString())), + borderRadius !== undefined + ? pxTransform(typeof borderRadius === 'number' + ? borderRadius + : parseInt(borderRadius.toString(), 10)) + : undefined,这样可以避免在 borderRadius 为无效值时出现 NaN。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
src/packages/progress/demos/h5/demo4.tsx(1 hunks)src/packages/progress/demos/taro/demo4.tsx(1 hunks)src/packages/progress/doc.en-US.md(2 hunks)src/packages/progress/doc.md(2 hunks)src/packages/progress/doc.taro.md(2 hunks)src/packages/progress/doc.zh-TW.md(2 hunks)src/packages/progress/progress.scss(2 hunks)src/packages/progress/progress.taro.tsx(4 hunks)src/packages/progress/progress.tsx(4 hunks)src/styles/variables.scss(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (5)
- src/packages/progress/doc.taro.md
- src/packages/progress/doc.zh-TW.md
- src/packages/progress/doc.en-US.md
- src/packages/progress/doc.md
- src/packages/progress/progress.tsx
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: test
- GitHub Check: build
🔇 Additional comments (11)
src/styles/variables.scss (2)
1668-1669: 修改进度文本颜色为辅助文本颜色将进度条文本颜色从主要文本颜色(
$color-primary-text)更改为辅助文本颜色($color-text-help)，这样文本显示更加柔和，提高整体视觉协调性。
1675-1675: 增大进度文本字体大小将进度条文本大小从9px增加到13px，提高了文本的可读性，特别是在移动设备上查看时更加清晰。
src/packages/progress/progress.scss (2)
8-8: 更改外部容器弹性属性将
.nut-progress-outer的弹性属性从flex: auto改为flex: 1，这将使进度条在容器中更好地占据可用空间，特别是在不同宽度的容器中表现更加一致。
38-41: 简化文本样式结构重构了文本样式，移除了绝对定位和内部包装元素，改用左边距、直接颜色和字体设置，使样式更加简洁且易于维护。新的实现也与变量文件中更新的样式设置保持一致。
src/packages/progress/demos/taro/demo4.tsx (1)
6-21: 增强示例展示不同文本样式优化了Taro环境下的演示示例，现在展示两种不同的场景：
- 带有文本内容的进度条
- 带有图片的进度条
这种结构更清晰地展示了组件的多样性和灵活性，有助于用户理解如何定制进度条内容。
src/packages/progress/demos/h5/demo4.tsx (2)
6-21: 优化H5演示示例结构改进了H5环境下的演示示例，使其与Taro版本保持一致，便于开发者理解组件在不同环境下的使用方式。示例现在更加全面地展示了进度条组件的文本和图片展示能力。
15-17: 注意图片属性类型H5版本中的Image组件width和height属性使用字符串类型，而Taro版本使用数字类型。确保这是有意为之的差异，以适应不同环境的需求。
请确认H5和Taro环境下Image组件的属性类型差异是否符合各自平台的规范要求。
src/packages/progress/progress.taro.tsx (4)
55-59: 有效属性计算逻辑满足了兼容性需求这里的实现很好地处理了新旧属性的兼容性，通过使用双问号运算符（??）创建属性优先级链。确保了在使用 Taro 原生 Progress 属性时也能正确工作。
225-225: accessibility 支持的良好实践添加 aria-label 属性是一个很好的无障碍性改进，这使得屏幕阅读器可以为视障用户正确读出进度条信息。
232-233: 动画结束回调增强了组件交互能力添加
onTransitionEnd事件处理器来触发onActiveEnd回调是一个很好的功能增强，使得开发者可以在动画完成后执行自定义逻辑。不过建议测试一下这个回调在不同浏览器和 Taro 环境中的兼容性，确保在所有目标平台上都能正常工作。
235-239: 文本显示逻辑优化通过使用
effectiveShowText变量简化了显示逻辑，代码更加清晰。这个改动使组件在使用 Taro 原生的showInfo属性时也能保持一致的行为。
Miles-hxy
changed the title
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (5)
src/packages/progress/progress.tsx (3)
53-53: 样式属性处理需优化通过
parseInt(borderRadius.toString())处理样式值可能存在问题，如果borderRadius是带单位的值（如'10px'或'50%'），parseInt会丢失单位信息。应直接使用原始值或进行更精确的处理。- borderRadius: borderRadius && parseInt(borderRadius.toString()), + borderRadius: borderRadius || undefined,
150-157: 🛠️ Refactor suggestion文本显示逻辑优化与样式问题
文本显示逻辑被改进和简化，现在将文本放在进度条外部而不是内部。
然而，存在与之前相同的样式处理问题：
- style={{ fontSize: fontSize && parseInt(fontSize.toString()) }} + style={{ fontSize: fontSize || undefined }}这种使用
parseInt处理fontSize的方式会丢失单位信息，应当进行修复。
62-63: 🛠️ Refactor suggestion两处样式问题需要修复
- 同样的borderRadius处理问题出现在这里
- transition属性的设置是正确的，使用了duration参数并提供了默认值
- borderRadius: borderRadius && parseInt(borderRadius.toString()), + borderRadius: borderRadius || undefined,src/packages/progress/progress.taro.tsx (2)
66-90: 🛠️ Refactor suggestion样式计算重构需要优化
将样式计算重构为
getStyles函数是一个好的改进，但有几个问题需要修复：
borderRadius的处理仍然使用parseInt(borderRadius.toString())，会丢失单位信息- 无条件应用
transition样式，即使在非动画场景下也会触发不必要的重绘- borderRadius: - borderRadius && pxTransform(parseInt(borderRadius.toString())), + borderRadius: + borderRadius ? pxTransform(Number(borderRadius)) : undefined, - const transitionStyle = { - transition: `width ${duration || 300}ms ease-in-out`, - } + const transitionStyle = + effectiveAnimated || duration + ? { transition: `width ${duration || 300}ms ease-in-out` } + : {}这些修改可以提高性能和样式处理的准确性。
235-242: 🛠️ Refactor suggestion文本显示逻辑优化与样式问题
文本显示逻辑使用了
effectiveShowText变量，兼容Taro的showInfo属性和通用的showText属性。但仍存在与Web版本相同的fontSize解析问题：
- style={{ fontSize: fontSize && parseInt(fontSize.toString()) }} + style={{ fontSize: fontSize ? pxTransform(Number(fontSize)) : undefined }}修复此问题将确保样式单位信息不会丢失。
🧹 Nitpick comments (1)
src/packages/progress/progress.taro.tsx (1)
232-233: 动画结束回调实现与Web版本不同，这里没有使用可选链运算符调用
onActiveEnd回调。虽然功能相同，但建议保持一致性：- onTransitionEnd={onActiveEnd} + onTransitionEnd={() => { + onActiveEnd?.() + }}这样可以避免在
onActiveEnd为undefined时可能出现的问题。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/packages/progress/__tests__/progress.spec.tsx(1 hunks)src/packages/progress/progress.taro.tsx(4 hunks)src/packages/progress/progress.tsx(4 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/packages/progress/tests/progress.spec.tsx
🧰 Additional context used
🪛 GitHub Check: codecov/patch
src/packages/progress/progress.tsx
[warning] 71-71: src/packages/progress/progress.tsx#L71
Added line #L71 was not covered by tests
[warning] 146-147: src/packages/progress/progress.tsx#L146-L147
Added lines #L146 - L147 were not covered by tests
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: build
- GitHub Check: test
🔇 Additional comments (7)
src/packages/progress/progress.tsx (3)
32-37: 新增的属性增强了组件的灵活性这些新增的属性很好地扩展了Progress组件的功能：
borderRadius：允许自定义进度条圆角fontSize：控制文本大小activeMode：控制动画模式duration：控制动画持续时间ariaLabel：提高可访问性onActiveEnd：提供动画结束回调这些改进使组件更加灵活和可配置。
138-138: 提高可访问性的良好实践添加
aria-label属性提高了组件的可访问性，这是一个很好的改进。用户可以通过这个属性为进度条提供更明确的描述，帮助屏幕阅读器用户理解组件功能。
142-148:✅ Verification successful
添加动画结束回调功能
添加
onTransitionEnd事件处理器来触发onActiveEnd回调是一个很好的功能增强。用户现在可以在进度条动画完成时执行自定义逻辑。使用可选链操作符确保了回调不存在时不会出错。注意：根据代码覆盖率分析，146-147行未被测试覆盖，建议添加相关测试用例。
🏁 Script executed:
#!/bin/bash # 检查是否有针对onActiveEnd回调的测试 rg -A 10 "onActiveEnd" --type ts src/packages/progress/__tests__/Length of output: 2454
无需新增测试用例：动画结束回调已覆盖
在
src/packages/progress/__tests__/progress.spec.tsx中已对onActiveEnd回调进行了测试（使用setTimeout验证回调调用），因此无需额外新增测试。🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 146-147: src/packages/progress/progress.tsx#L146-L147
Added lines #L146 - L147 were not covered by testssrc/packages/progress/progress.taro.tsx (4)
37-47: 全面支持Taro组件所需的属性全面新增了Taro组件所需的多个属性：
showInfo：控制是否显示信息borderRadius、fontSize：样式自定义activeColor、backgroundColor：颜色自定义active：替代animated的Taro命名activeMode、duration：动画控制ariaLabel：可访问性支持onActiveEnd：动画结束回调这些属性的添加使组件与Taro规范保持一致，提高了组件在Taro环境中的可用性。
55-59: 良好的属性兼容性处理通过创建
effectiveShowText、effectiveColor、effectiveBgColor和effectiveAnimated变量，实现了对新旧属性名的兼容支持。这种处理方式可以确保：
- 优先使用新的属性名（如
activeColor）- 兼容旧的属性名（如
color）- 最后使用默认值
这种兼容性处理方式有助于平滑过渡，减少API变更对用户的影响。
109-124: 动画模式处理与定时器清理与Web版本类似，这里实现了动画模式并正确处理了定时器：
- 支持
activeMode='backwards'反向动画模式- 使用了
duration参数并提供默认值- 正确清理了定时器，避免内存泄漏
- 依赖数组包含所有使用的变量
这部分代码逻辑清晰，避免了可能的内存泄漏问题。
225-225: 提高可访问性的良好实践添加
aria-label属性提高了组件的可访问性，确保屏幕阅读器可以正确描述进度条功能。这种改进符合可访问性最佳实践。
Comment on lines
+67
to
+82
| let timer: any = null | ||
| if (activeMode === 'backwards') { | ||
| setDispalyPercent(0) | ||
| timer = setTimeout(() => { | ||
| setDispalyPercent(percent) | ||
| }, duration || 300) | ||
| } else { | ||
| setDispalyPercent(percent) | ||
| } | ||
|
|
||
| return () => { | ||
| if (timer) { | ||
| clearTimeout(timer) | ||
| } | ||
| } | ||
| }, [percent, activeMode, duration]) |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
优化动画模式处理并正确清理定时器
动画模式的实现很好，关键点：
- 添加了
activeMode='backwards'支持，提供反向动画效果 - 正确使用了
duration参数并提供默认值 - 在组件卸载时正确清理了定时器，避免内存泄漏
- 依赖数组中包含了所有使用的变量
这部分代码逻辑清晰，避免了内存泄漏问题。
提示：根据代码覆盖率分析，第71行未被测试覆盖，建议添加相关测试用例。
🏁 Script executed:
#!/bin/bash
# 检查是否有针对activeMode='backwards'的测试
rg -A 10 "activeMode.*backwards" --type ts src/packages/progress/__tests__/Length of output: 1663
🏁 Script executed:
#!/bin/bash
# 显示进度组件测试文件前200行内容以核实覆盖情况
sed -n '1,200p' src/packages/progress/__tests__/progress.spec.tsxLength of output: 2334
优化动画模式处理并完善测试覆盖
文件：src/packages/progress/progress.tsx（L67–82）
关键点：
- 已支持
activeMode='backwards'，实现先将进度重置为 0 再过渡到目标值 - 正确使用了
duration参数并提供默认值 - 在组件卸载时清理了定时器，避免内存泄漏
- 依赖数组中包含了所有使用的变量
测试覆盖情况：
- 已有用例验证了
transition: width 500ms ease-in-out样式 - 已有用例验证了动画结束时的
onActiveEnd回调
建议：
- 添加针对
activeMode='backwards'时初始宽度被重置为0%的测试用例，以覆盖setDisplayPercent(0)逻辑
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 71-71: src/packages/progress/progress.tsx#L71
Added line #L71 was not covered by tests
🤖 Prompt for AI Agents
In src/packages/progress/progress.tsx around lines 67 to 82, the code correctly
handles the 'backwards' activeMode by resetting the display percent to 0 before
transitioning to the target percent and cleans up the timer properly. However,
there is no test coverage for the case when activeMode is 'backwards' and the
initial width is reset to 0. To fix this, add a test case in
src/packages/progress/__tests__/progress.spec.tsx that renders the component
with activeMode set to 'backwards' and verifies that the initial display percent
is 0 before transitioning to the target percent, ensuring this branch is covered
by tests.
oasis-cloud
approved these changes
May 17, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 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.
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
优化