fix(countdown): 适配v14 && type增加text类型 #2701
Conversation
|
Warning Rate limit exceeded@irisSong has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 17 minutes and 9 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. Walkthrough此次提交的更改主要集中在倒计时组件的样式和功能上。CSS 文件中调整了字体大小和高度，同时新增了样式类以提升视觉一致性。TypeScript 文件中，移除了不必要的接口并简化了道具处理，增强了组件的结构。文档也进行了更新，添加了新的属性和样式变量，提供了更好的自定义选项。整体上，这些更改旨在改善倒计时组件的外观和功能。 Changes
Possibly related PRs
Suggested labels
Suggested reviewers
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 (
|
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## V3.0 #2701 +/- ##
=======================================
Coverage 83.98% 83.98%
=======================================
Files 221 221
Lines 17867 17867
Branches 2676 2676
=======================================
Hits 15005 15005
Misses 2857 2857
Partials 5 5 ☔ View full report in Codecov by Sentry. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Outside diff range and nitpick comments (16)
src/packages/countdown/demos/taro/demo4.tsx (1)
Line range hint
1-15: 建议添加新增text类型的使用示例根据PR目标，此次更新增加了text类型支持，建议在此示例文件中展示新类型的使用方法，以便用户参考。
建议添加如下示例代码：
const Demo4 = () => { const stateRef = useRef({ endTime: Date.now() + 60 * 1000, }) return ( - <Cell> + <> + <Cell> + <CountDown + endTime={stateRef.current.endTime} + millisecond + format="HH:mm:ss:S" + /> + </Cell> + <Cell> + <CountDown + endTime={stateRef.current.endTime} + millisecond + format="HH:mm:ss:S" + type="text" + /> + </Cell> + </> ) }src/packages/countdown/types.ts (1)
8-15: 建议增强类型约束以下属性可以添加更具体的类型约束来提高代码的可维护性：
- 时间相关的属性应该有合理的范围限制
- format 属性可以使用字符串字面量类型来限制格式字符串
建议的改进：
// 添加到文件顶部 type TimeFormat = 'HH:mm:ss' | 'mm:ss' | 'ss' | string // 修改接口中的相关属性 interface CountDownProps extends BasicComponent { startTime: number & { __brand: 'PositiveNumber' } endTime: number & { __brand: 'PositiveNumber' } remainingTime: number & { __brand: 'NonNegativeNumber' } time: number & { __brand: 'PositiveNumber' } format: TimeFormat // ... 其他属性保持不变 }src/packages/countdown/demos/h5/demo3.tsx (2)
6-8: 建议改进时间计算的可读性和可维护性建议将时间计算逻辑提取为常量，使代码更易读和维护。同时，考虑到服务器端渲染（SSR）的兼容性，建议将
Date.now()的调用移至 useEffect 中。+ const ONE_MINUTE = 60 * 1000; + const ONE_HOUR = 60 * ONE_MINUTE; const stateRef = useRef({ - endTime: Date.now() + 60 * 1000, - endDay: Date.now() + 60 * 1000 * 60 * 25, + endTime: 0, + endDay: 0, }); + + useEffect(() => { + const now = Date.now(); + stateRef.current = { + endTime: now + ONE_MINUTE, + endDay: now + 25 * ONE_HOUR, + }; + }, []);
10-24: 组件结构清晰，建议补充注释说明代码结构清晰地展示了 CountDown 组件的多种使用场景。为了提高代码的可维护性，建议为每个 CountDown 示例添加注释，说明其用途和格式含义。
return ( <> <Cell> + {/* 分钟和秒数格式示例 */} <CountDown endTime={stateRef.current.endTime} format="mm:ss" /> </Cell> <Cell> + {/* 仅秒数格式示例 */} <CountDown endTime={stateRef.current.endTime} format="ss" /> </Cell> <Cell> + {/* 文本类型的完整日期时间格式示例 */} <CountDown type="text" endTime={stateRef.current.endDay} format="DD天HH:mm:ss" /> </Cell> </> )src/packages/countdown/demos/taro/demo3.tsx (1)
7-7: 建议将魔法数字提取为常量建议将计算时间的魔法数字（60 * 1000 * 60 * 25）提取为有意义的常量，以提高代码可读性和可维护性。
const Demo3 = () => { + const ONE_DAY_IN_MS = 24 * 60 * 60 * 1000 + const ONE_HOUR_IN_MS = 60 * 60 * 1000 const stateRef = useRef({ endTime: Date.now() + 60 * 1000, - endDay: Date.now() + 60 * 1000 * 60 * 25, + endDay: Date.now() + ONE_HOUR_IN_MS * 25, })src/packages/countdown/demos/taro/demo1.tsx (2)
26-26: type 属性的修改符合需求将 type 设置为 "text" 符合 PR 的目标，即增加文本类型的支持。建议在相应的文档中详细说明不同 type 值的视觉效果差异。
13-28: 建议优化示例代码的组织结构当前示例展示了三种不同的 CountDown 使用方式，建议：
- 为每个示例添加注释，说明其用途和特点
- 考虑将不同类型的示例分组展示
建议按如下方式重构：
return ( <> + {/* 主要样式示例 */} <Cell> <CountDown endTime={stateRef.current.endTime} type="primary" onEnd={onEnd} /> </Cell> + {/* 默认样式示例 */} <Cell> <CountDown endTime={stateRef.current.endTime} onEnd={onEnd} /> </Cell> + {/* 文本样式示例 */} <Cell> <CountDown endTime={stateRef.current.endTime} type="text" onEnd={onEnd} /> </Cell> </> )src/packages/countdown/countdown.scss (1)
36-40: 新增文本样式实现完整新增的文本样式实现符合预期：
- 移除边框
- 使用透明背景
- 保持与数字显示相同的文字颜色
建议考虑添加以下改进：
&-number-text { border: 0; background-color: transparent; color: $countdown-number-color; + transition: color $animation-duration-base ease-in-out; }这样可以在颜色变化时提供平滑的过渡效果，提升用户体验。
src/packages/countdown/countdown.harmony.css (2)
12-14: 建议统一使用CSS变量管理通用样式注意到
.nut-countdown-number-primary、.nut-countdown-number和.nut-countdown-unit类中存在重复的样式属性（height、font-weight、font-size）。建议将这些通用样式提取为CSS变量：
+:root { + --nut-countdown-height: 16px; + --nut-countdown-font-size: 11px; + --nut-countdown-font-weight: 400; +} .nut-countdown-number-primary, .nut-countdown-number, .nut-countdown-unit { - height: 16px; - font-weight: 400; - font-size: 11px; + height: var(--nut-countdown-height); + font-weight: var(--nut-countdown-font-weight); + font-size: var(--nut-countdown-font-size); }Also applies to: 20-23, 36-38
41-45: 建议合并重复的样式规则
.nut-countdown-number和.nut-countdown-number-primary类中存在大量重复的样式属性。建议将共同样式提取到一个基础类中：
+.nut-countdown-number-base { + min-width: 16px; + padding: 0; + border-radius: 2px; + margin: 0 1px; + text-align: center; +} -.nut-countdown-number, -.nut-countdown-number-primary { - min-width: 16px; - padding: 0; - border-radius: 2px; - margin: 0 1px; - text-align: center; +.nut-countdown-number, +.nut-countdown-number-primary { + @extend .nut-countdown-number-base; }Also applies to: 48-52
src/packages/countdown/doc.taro.md (1)
138-143: 建议添加样式变更说明为了帮助用户理解这些样式变更的影响，建议：
- 在文档中添加视觉效果对比说明
- 考虑添加示例展示不同类型（default、primary、text）的视觉效果
建议在文档中添加如下内容：
+ > 注意：在v14版本中，我们优化了倒计时组件的视觉表现，调整了默认的字体大小、间距等样式。 + + ### 视觉效果 + + | 类型 | 说明 | + | --- | --- | + | default | 默认样式 | + | primary | 主要样式 | + | text | 文本样式 |🧰 Tools
🪛 LanguageTool
[duplication] ~142-~142: Posíbel erro tipográfico: hai unha palabra repetida.
Context: ...down-number-padding | 倒计时的时间区域padding |0 0| | --nutui-countdown-number-margin |...(WORD_REPETITION)
src/packages/countdown/doc.en-US.md (1)
93-93: 新增的类型属性文档清晰完整类型属性的添加符合PR的目标，文档说明简洁明了。建议在文档中补充每种类型的具体视觉效果说明。
建议添加以下内容：
- 每种类型的视觉效果截图
- 使用场景建议
src/packages/countdown/countdown.tsx (1)
8-10: 建议优化组件架构当前组件的状态管理和副作用处理较为复杂，建议进行以下优化：
- 将倒计时逻辑抽取为自定义Hook，提高代码复用性
- 使用TypeScript的类型系统优化props的类型定义
- 考虑使用Context API管理复杂状态
建议将倒计时核心逻辑抽取为独立的Hook：
function useCountdown(config: CountdownConfig) { // 倒计时相关逻辑 const [time, setTime] = useState(0); // ... 其他状态和逻辑 return { time, start, pause, reset, }; }这样可以:
- 提高代码的可维护性
- 方便单元测试
- 支持在其他组件中复用倒计时逻辑
Also applies to: 177-188
src/packages/countdown/countdown.taro.tsx (2)
183-183: 代码简化建议当前的字符串替换实现是正确的，但可以考虑使用模板字符串使代码更简洁。
建议如下修改：
- formatCache = formatCache.replace('S', msC.slice(0, 1)) + formatCache = formatCache.replace('S', `${msC.slice(0, 1)}`)
286-290: 类型条件渲染实现正确使用
classNames工具函数来管理条件类名是个很好的做法。但建议添加类型验证以提高代码的健壮性。建议添加类型验证：
+ const validTypes = ['default', 'primary', 'text'] + if (!validTypes.includes(type)) { + console.warn(`CountDown: type属性必须是 ${validTypes.join(', ')} 之一`) + } <View className={classNames({ [`${classPrefix}-number`]: type === 'default', [`${classPrefix}-number-primary`]: type === 'primary', [`${classPrefix}-number-text`]: type === 'text', })} >src/styles/variables.scss (1)
801-809: 颜色变量的系统化调整背景色和文字颜色现在分别使用
$color-background-overlay和$color-primary-text变量，这种改动更好地融入了设计系统。建议在组件文档中更新这些新的样式变量的默认值，以便开发者了解这些变更。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (18)
src/packages/countdown/countdown.harmony.css(1 hunks)src/packages/countdown/countdown.scss(2 hunks)src/packages/countdown/countdown.taro.tsx(3 hunks)src/packages/countdown/countdown.tsx(2 hunks)src/packages/countdown/demos/h5/demo1.tsx(1 hunks)src/packages/countdown/demos/h5/demo3.tsx(1 hunks)src/packages/countdown/demos/h5/demo4.tsx(1 hunks)src/packages/countdown/demos/taro/demo1.tsx(1 hunks)src/packages/countdown/demos/taro/demo3.tsx(1 hunks)src/packages/countdown/demos/taro/demo4.tsx(1 hunks)src/packages/countdown/doc.en-US.md(2 hunks)src/packages/countdown/doc.md(2 hunks)src/packages/countdown/doc.taro.md(2 hunks)src/packages/countdown/doc.zh-TW.md(2 hunks)src/packages/countdown/index.taro.ts(1 hunks)src/packages/countdown/index.ts(1 hunks)src/packages/countdown/types.ts(1 hunks)src/styles/variables.scss(2 hunks)
🧰 Additional context used
🪛 GitHub Check: codecov/patch
src/packages/countdown/countdown.tsx
[warning] 180-181: src/packages/countdown/countdown.tsx#L180-L181
Added lines #L180 - L181 were not covered by tests
🪛 LanguageTool
src/packages/countdown/doc.md
[duplication] ~142-~142: Posíbel erro tipográfico: hai unha palabra repetida.
Context: ...down-number-padding | 倒计时的时间区域padding | 0 0 | | --nutui-countdown-number-margin |...
(WORD_REPETITION)
src/packages/countdown/doc.taro.md
[duplication] ~142-~142: Posíbel erro tipográfico: hai unha palabra repetida.
Context: ...down-number-padding | 倒计时的时间区域padding | 0 0 | | --nutui-countdown-number-margin |...
(WORD_REPETITION)
src/packages/countdown/doc.zh-TW.md
[locale-violation] ~136-~136: 'display' é un xenismo. É preferíbel dicir "expositor"
Context: ... --- | --- | --- | | --nutui-countdown-display | 倒計時的佈局方式 | flex | | --nutui-countd...
(GL_BARBARISM_REPLACE)
[duplication] ~142-~142: Posíbel erro tipográfico: hai unha palabra repetida.
Context: ...down-number-padding | 倒計時的時間區域padding | 0 0 | | --nutui-countdown-number-margin |...
(WORD_REPETITION)
[locale-violation] ~145-~145: 'light' é un xenismo. É preferíbel dicir "leve" ou "de baixo valor calórico"
Context: ...nutui-countdown-color | 倒計時的時間區域的文字顏色 | $color-primary-light-pressed | | --nutui-countdown-backgro...
(GL_BARBARISM_REPLACE)
[locale-violation] ~146-~146: 'background' é un xenismo. É preferíbel dicir "formación de base"
Context: ...y-light-pressed| | \--nutui-countdown-background-color | 倒計時的時間區域的背景顏色 |$color-primary...
(GL_BARBARISM_REPLACE)
[locale-violation] ~149-~149: 'background' é un xenismo. É preferíbel dicir "formación de base"
Context: ...#FFFFFF | | \--nutui-countdown-primary-background-color | type爲primary`時，倒計時的時間區域的背景顏色 |...
(GL_BARBARISM_REPLACE)
🔇 Additional comments (23)
src/packages/countdown/index.ts (1)
3-3: 类型导出更改符合最佳实践！
将 CountDownType 与 CountDownProps 一起从 types 模块导出是个很好的改进，这样做：
- 集中了类型定义的管理
- 使新增的文本类型支持更加清晰
- 便于其他组件复用这些类型定义
让我们验证一下类型文件的存在和内容：
✅ Verification successful
The verification shows that:
- The
types.tsfile exists and contains bothCountDownTypeandCountDownPropsdefinitions - The imports in other files are referencing the component itself (
./countdown), not the types
Let me generate the final response:
类型定义和导出结构合理，无需额外修改
types.ts 文件已正确定义了 CountDownType 和 CountDownProps，且其他文件的导入路径都是正确引用组件本身，没有发现需要更新的类型导入。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 验证 types.ts 文件存在并包含必要的类型定义
echo "检查 types.ts 文件..."
cat src/packages/countdown/types.ts
# 检查是否有其他文件仍在使用旧的类型导入路径
echo "检查可能需要更新的导入..."
rg "from.*countdown'" --type ts
Length of output: 973
src/packages/countdown/index.taro.ts (1)
3-3: 类型导出重构看起来不错！
将类型定义移至单独的 types 文件是一个很好的重构决定，这样可以提高代码的组织性和可维护性。
让我们验证一下 types 文件是否包含所需的所有类型定义：
✅ Verification successful
Let me verify the complete interface definition before providing the final response.
类型定义验证完成，重构符合预期！
types.ts 文件已正确创建，并包含了所有必要的类型定义：
- CountDownType 类型已定义，支持 'default' | 'primary' | 'text' 三种类型
- CountDownProps 接口完整定义了组件所需的所有属性
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：验证 types 文件中是否存在必要的类型定义
# 测试：检查 types 文件是否存在
fd -t f "types.ts" src/packages/countdown/
# 测试：验证类型定义
ast-grep --pattern 'export type CountDownType = $_'
ast-grep --pattern 'export interface CountDownProps {
$$$
}'
Length of output: 286
Script:
#!/bin/bash
# 检查 CountDownProps 接口的具体定义
rg -A 10 "export interface CountDownProps" src/packages/countdown/types.ts
Length of output: 330
src/packages/countdown/demos/h5/demo4.tsx (1)
13-13: 请确认毫秒显示格式的变更影响
将格式从 "HH:mm:ss:SS" 改为 "HH:mm:ss:S" 会减少毫秒的显示精度。建议：
- 在组件文档中明确说明此变更
- 考虑提供配置选项，允许用户选择毫秒的显示精度
另外，建议在此演示中添加注释说明格式字符的含义，以帮助开发者更好地理解。
<CountDown
endTime={stateRef.current.endTime}
millisecond
- format="HH:mm:ss:S"
+ // H-小时, m-分钟, s-秒, S-毫秒
+ format="HH:mm:ss:S"
/>src/packages/countdown/demos/taro/demo4.tsx (1)
13-13:
请确认格式更改的影响范围
将毫秒显示从两位数改为一位数是一个破坏性更改，可能会影响现有用户的展示效果。建议：
- 在更新文档中明确说明此变更
- 考虑是否需要添加向后兼容支持
src/packages/countdown/types.ts (1)
1-3: 类型定义清晰且符合需求！
新增的 'text' 类型扩展了组件的展示选项，类型定义简洁明确。
src/packages/countdown/demos/taro/demo3.tsx (1)
10-24: 组件结构清晰，展示了不同的倒计时格式
代码结构合理，很好地展示了倒计时组件的多种使用方式：
- 分钟和秒的显示格式
- 仅显示秒数
- 新增的文本类型显示，包含天数的完整格式
符合PR的目标，成功展示了新增的text类型功能。
src/packages/countdown/demos/h5/demo1.tsx (2)
13-19: 代码结构清晰，新增示例合理。
新增的倒计时组件示例完善了类型展示，使用 type="primary" 作为默认样式的展示很合适。
26-26: 类型修改符合需求。
将类型更改为 text 完善了新增文本类型的展示示例，与PR的目标保持一致。建议在组件文档中详细说明各种类型的视觉差异。
✅ Verification successful
类型修改已得到完整文档支持
文档中已经完整记录了 text 类型:
- 在所有语言版本的文档中(
doc.md,doc.en-US.md,doc.zh-TW.md)都有对text类型的说明 - 类型定义文件(
types.ts)中已包含text类型 - 有多个演示示例展示了
text类型的使用
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 验证文档是否包含新增的text类型说明
rg -A 5 "text.*type" "src/packages/countdown/doc*.md"
Length of output: 126
Script:
#!/bin/bash
# Search for documentation files related to countdown component
fd "doc.*\.md" src/packages/countdown/
# Search for any documentation about type property
rg -i "type.*text|text.*type" src/packages/countdown/
Length of output: 1282
src/packages/countdown/demos/taro/demo1.tsx (1)
13-19: 新增的 CountDown 组件结构合理
新增的倒计时组件遵循了现有的代码模式，使用 Cell 组件包装，并且正确配置了必要的属性。
src/packages/countdown/countdown.scss (2)
9-9: 选择器添加合理且符合需求
将 &-number-text 添加到共享样式列表中，确保了基础样式的一致性，这与新增文本类型的需求相符。
24-24: 样式属性位置调整合理
将 text-align: center 移动到这个位置更合适，可以确保数字和主要数字显示都能保持居中对齐。
src/packages/countdown/countdown.harmony.css (3)
6-6: 字体大小调整符合移动端规范
将基础字体从10px调整为11px，这个改动更符合移动端的可读性要求。
24-30: 新增的text类型样式实现合理
新增的.nut-countdown-number-text类实现了文本类型的基础样式，布局方式使用flex确保了良好的对齐效果。
64-68: text类型的视觉风格设计合理
.nut-countdown-number-text类移除了边框和背景色，保持了纯文本的简洁风格，同时保持了主题色的一致性。
src/packages/countdown/doc.md (2)
93-93: 类型定义更新完善！
新增的 text 类型选项已正确添加到文档中，与组件更新保持一致。
138-143: 建议验证样式调整的视觉效果
样式变量的调整涉及以下几个方面：
- 字体大小增加到 11px
- 统一了宽高为 16px
- 减小了内外边距
这些改动可能会影响组件的视觉表现，建议：
- 确认在不同场景下的显示效果
- 验证文本在新尺寸下是否能够正常显示
您是否需要我提供一些测试用例来验证这些样式改动？
🧰 Tools
🪛 LanguageTool
[duplication] ~142-~142: Posíbel erro tipográfico: hai unha palabra repetida.
Context: ...down-number-padding | 倒计时的时间区域padding | 0 0 | | --nutui-countdown-number-margin |...
(WORD_REPETITION)
src/packages/countdown/doc.taro.md (1)
93-93: 新增的类型属性文档完善！
类型属性的添加符合PR的目标，文档说明清晰完整。
src/packages/countdown/doc.zh-TW.md (2)
93-93: 新增的 type 属性文档完善！
新增的展示类型属性文档清晰，包含了所有必要信息：属性名称、说明、可选值和默认值。
136-150: CSS 变量文档结构清晰完整！
新增的主题定制部分文档结构合理，包含了：
- 基础样式变量（布局、字体等）
- 时间区域样式变量（尺寸、间距等）
- 不同类型的样式变量（primary 类型的颜色配置）
每个变量都有清晰的说明和默认值。
🧰 Tools
🪛 LanguageTool
[locale-violation] ~136-~136: 'display' é un xenismo. É preferíbel dicir "expositor"
Context: ... --- | --- | --- | | --nutui-countdown-display | 倒計時的佈局方式 | flex | | --nutui-countd...
(GL_BARBARISM_REPLACE)
[duplication] ~142-~142: Posíbel erro tipográfico: hai unha palabra repetida.
Context: ...down-number-padding | 倒計時的時間區域padding | 0 0 | | --nutui-countdown-number-margin |...
(WORD_REPETITION)
[locale-violation] ~145-~145: 'light' é un xenismo. É preferíbel dicir "leve" ou "de baixo valor calórico"
Context: ...nutui-countdown-color | 倒計時的時間區域的文字顏色 | $color-primary-light-pressed | | --nutui-countdown-backgro...
(GL_BARBARISM_REPLACE)
[locale-violation] ~146-~146: 'background' é un xenismo. É preferíbel dicir "formación de base"
Context: ...y-light-pressed| | \--nutui-countdown-background-color | 倒計時的時間區域的背景顏色 |$color-primary...
(GL_BARBARISM_REPLACE)
[locale-violation] ~149-~149: 'background' é un xenismo. É preferíbel dicir "formación de base"
Context: ...#FFFFFF | | \--nutui-countdown-primary-background-color | type爲primary`時，倒計時的時間區域的背景顏色 |...
(GL_BARBARISM_REPLACE)
src/packages/countdown/countdown.taro.tsx (1)
8-8: 导入更改看起来不错！
新增的 classNames 工具函数和 ComponentDefaults 类型导入符合组件需求。
Also applies to: 10-10
src/styles/variables.scss (3)
778-781: 字体大小和字重变量的更新
字体大小改为使用 $font-size-xs 变量，同时新增了字重变量，这些改动有助于保持设计系统的一致性。
783-785: 倒计时组件尺寸的调整
高度和宽度统一调整为16px，内边距更新为0，这些改动使组件更加紧凑和对齐。
788-790: 边框圆角和外边距的优化
使用 $radius-xxs 变量统一圆角样式，外边距调整为更合理的0 1px，提升了视觉体验。
src/packages/countdown/types.ts
Outdated
| onEnd: () => void | ||
| onPaused: (restTime: number) => void | ||
| onRestart: (restTime: number) => void | ||
| onUpdate: (restTime: any) => void |
There was a problem hiding this comment.
需要避免使用 'any' 类型
onUpdate 回调函数使用 any 类型会降低类型安全性，建议使用具体的数字类型。
建议修改为：
- onUpdate: (restTime: any) => void
+ onUpdate: (restTime: number) => void📝 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.
| onUpdate: (restTime: any) => void | |
| onUpdate: (restTime: number) => void |
There was a problem hiding this comment.
@oasis-cloud，感谢您的修改。
If you found this review helpful, would you consider giving us a shout-out on X?
Thank you for using CodeRabbit!
There was a problem hiding this comment.
Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!
src/packages/countdown/doc.zh-TW.md
Outdated
| | \--nutui-countdown-primary-color | type爲`primary`時，倒計時的時間區域的文字顔色 | `#FFFFFF` | | ||
| | \--nutui-countdown-primary-background-color | type爲`primary`時，倒計時的時間區域的背景顔色 | `$color-primary` | | ||
| | \--nutui-countdown-primary-border-color | type爲`primary`時，倒計時的時間區域的邊框顔色顔色 | `$color-primary` | | ||
| | \--nutui-countdown-color | 倒計時的時間區域的文字顏色 | `$color-primary-light-pressed` | |
There was a problem hiding this comment.
CSS 变量重复定义
--nutui-countdown-color 变量在文档中出现了两次：
- 第一次在基础样式中定义为
$color-primary - 第二次在时间区域样式中定义为
$color-primary-light-pressed
建议合并或区分这两个变量的用途，以避免混淆。
建议修改如下：
- | \--nutui-countdown-color | 倒計時的文字顏色 | `$color-primary` |
+ | \--nutui-countdown-text-color | 倒計時的文字顏色 | `$color-primary` |Also applies to: 137-137
🧰 Tools
🪛 LanguageTool
[locale-violation] ~145-~145: 'light' é un xenismo. É preferíbel dicir "leve" ou "de baixo valor calórico"
Context: ...nutui-countdown-color | 倒計時的時間區域的文字顏色 | $color-primary-light-pressed | | --nutui-countdown-backgro...
(GL_BARBARISM_REPLACE)
src/packages/countdown/doc.en-US.md
Outdated
| | \--nutui-countdown-font-size | The font size of the countdown | `11px` | | ||
| | \--nutui-countdown-font-weight | Countdown font weight | `400` | | ||
| | \--nutui-countdown-width | Time area width of the countdown | `20px` | | ||
| | \--nutui-countdown-height | Time area height of the countdown | `14px` | | ||
| | \--nutui-countdown-number-padding | Countdown time area padding | `0 1px` | | ||
| | \--nutui-countdown-number-margin | Countdown time area margin | `0 2px` | | ||
| | \--nutui-countdown-width | Time area width of the countdown | `6px` | | ||
| | \--nutui-countdown-height | Time area height of the countdown | `16px` | | ||
| | \--nutui-countdown-number-padding | Countdown time area padding | `0 0` | | ||
| | \--nutui-countdown-number-margin | Countdown time area margin | `0 1px` | |
There was a problem hiding this comment.
💡 Codebase verification
CSS变量默认值的变更需要特别注意
经过验证，这些CSS变量在不同的主题文件中确实有不同的默认值：
-
variables-jmapp.scss和variables-jrkf.scss中：- 字体大小：14px
- 宽度：20px
- 高度：14px
- 外边距：0 2px
-
新的文档默认值：
- 字体大小：11px
- 宽度：6px
- 高度：16px
- 外边距：0 1px
这些差异表明默认值的改动会对使用这些主题的项目产生显著影响。
建议：
- 在CHANGELOG中详细说明这些样式变更
- 提供主题迁移指南
- 考虑是否需要提供兼容模式或过渡期配置
🔗 Analysis chain
CSS变量默认值的调整需要确认兼容性
CSS变量的默认值发生了以下变化：
- 字体大小从10px增加到11px
- 宽度从20px减少到16px
- 高度从14px增加到16px
- 内边距和外边距的调整
这些改动可能会影响现有项目的视觉表现。
建议：
- 在更新日志中明确说明这些样式变更
- 考虑添加迁移指南，帮助用户平滑升级
Let's examine the actual CSS values in these files to understand the impact.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查是否有项目依赖这些具体的CSS值
rg -l "nutui-countdown-(font-size|width|height|number-padding|number-margin)"
Length of output: 305
Script:
#!/bin/bash
# Check the CSS variable values in the relevant files
echo "=== variables.scss ==="
rg "nutui-countdown-(font-size|width|height|number-padding|number-margin)" src/styles/variables.scss -A 1
echo -e "\n=== variables-jmapp.scss ==="
rg "nutui-countdown-(font-size|width|height|number-padding|number-margin)" src/styles/variables-jmapp.scss -A 1
echo -e "\n=== variables-jrkf.scss ==="
rg "nutui-countdown-(font-size|width|height|number-padding|number-margin)" src/styles/variables-jrkf.scss -A 1
Length of output: 1946
| const isTextDom = | ||
| type === 'text' | ||
| ? `<span class="nut-countdown-number-text">$1</span>` | ||
| : `<span class="nut-countdown-number">$1</span>` |
There was a problem hiding this comment.
建议改进DOM结构的生成方式
当前实现使用字符串模板直接生成HTML结构，这可能会带来潜在的XSS安全风险。建议改用React的JSX来构建DOM结构，这样更安全也更符合React的最佳实践。
建议按照以下方式重构：
- const isTextDom =
- type === 'text'
- ? `<span class="nut-countdown-number-text">$1</span>`
- : `<span class="nut-countdown-number">$1</span>`
+ const NumberWrapper: React.FC<{children: string; type: string}> = ({children, type}) => (
+ <span className={type === 'text' ? 'nut-countdown-number-text' : 'nut-countdown-number'}>
+ {children}
+ </span>
+ )Committable suggestion skipped: line range outside the PR's diff.
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 180-181: src/packages/countdown/countdown.tsx#L180-L181
Added lines #L180 - L181 were not covered by tests
| formatCache = formatCache.replace('S', msC.slice(0, 1)) | ||
| } | ||
| } | ||
| const isTextDom = | ||
| type === 'text' | ||
| ? `<span class="nut-countdown-number-text">$1</span>` | ||
| : `<span class="nut-countdown-number">$1</span>` | ||
| formatCache = formatCache.replace( | ||
| /(\d+)/g, | ||
| type === 'primary' | ||
| ? `<span class="nut-countdown-number-primary">$1</span>` | ||
| : `<span class="nut-countdown-number">$1</span>` | ||
| : isTextDom |
There was a problem hiding this comment.
💡 Codebase verification
需要为新增的格式化样式添加单元测试
现有的测试文件 countdown.spec.tsx 中只包含了基本的格式化测试，没有覆盖新增的 text 和 primary 类型样式渲染。建议添加以下测试场景：
- 验证
text类型时是否正确渲染nut-countdown-number-text类名 - 验证
primary类型时是否正确渲染nut-countdown-number-primary类名 - 验证不同类型下的数字格式化是否正确
🔗 Analysis chain
需要补充单元测试和文档说明
新增的格式化逻辑缺少相应的单元测试覆盖，这可能导致潜在的问题在生产环境中才被发现。同时，建议在组件文档中详细说明新增的text类型的使用方式和展示效果。
请运行以下命令检查现有的测试文件：
需要我帮助编写相关的单元测试用例吗？我可以提供测试代码示例，确保新增功能得到充分测试。
Let me check the content of the test file to verify if the new formatting logic is covered.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查是否存在对应的测试文件
fd -e test.tsx -e spec.tsx countdown src/packages/countdown/
Length of output: 113
Script:
#!/bin/bash
# Check the content of the test file
cat src/packages/countdown/__test__/countdown.spec.tsx
Length of output: 2680
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 180-181: src/packages/countdown/countdown.tsx#L180-L181
Added lines #L180 - L181 were not covered by tests
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (5)
src/packages/countdown/countdown.taro.tsx (5)
8-8: 导入声明优化建议建议将相关的导入语句进行分组：
- React 相关导入
- 第三方库导入（如 classNames）
- 内部工具和类型导入
建议按如下方式重组导入语句：
import React, { useState, useRef, useEffect, ForwardRefRenderFunction, useImperativeHandle, } from 'react' + import { View } from '@tarojs/components' + import classNames from 'classnames' - import { View } from '@tarojs/components' - import { ComponentDefaults } from '@/utils/typings' - import { padZero } from '@/utils/pad-zero' - import { web } from '@/utils/platform-taro' - import { CountDownProps } from './types' + import { ComponentDefaults } from '@/utils/typings' + import { padZero } from '@/utils/pad-zero' + import { web } from '@/utils/platform-taro' + import { CountDownProps } from './types'Also applies to: 10-10, 13-13
287-291: 新增文本类型样式处理使用 classNames 工具库来处理条件类名是个很好的改进。建议考虑将类型判断逻辑抽取为一个常量或工具函数，以提高代码的可维护性。
建议重构为：
+ const getNumberClassName = (type: string) => ({ + [`${classPrefix}-number`]: type === 'default', + [`${classPrefix}-number-primary`]: type === 'primary', + [`${classPrefix}-number-text`]: type === 'text', + }) - className={classNames({ - [`${classPrefix}-number`]: type === 'default', - [`${classPrefix}-number-primary`]: type === 'primary', - [`${classPrefix}-number-text`]: type === 'text', - })} + className={classNames(getNumberClassName(type))}
325-325: 优化片段使用当前代码中存在不必要的片段（Fragment）使用。
建议直接返回字符串切片：
- .slice(0, digit || 1) + toString().substring(0, digit || 1)🧰 Tools
🪛 Biome
[error] 325-334: Avoid using unnecessary Fragment.
A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
Unsafe fix: Remove the Fragment(lint/complexity/noUselessFragments)
Line range hint
184-266: 组件生命周期管理建议
useEffect的依赖项处理得当，但建议添加必要的清理函数。- 组件卸载时的清理逻辑可以进一步完善。
建议在相关的
useEffect中添加清理函数：useEffect(() => { if (autoStart) { initTime() } else { stateRef.current.restTime = time setRestTime(time) } if (!stateRef.current.isIninted) { stateRef.current.isIninted = true } + return () => { + cancelAnimationFrame(stateRef.current.timer) + stateRef.current.counting = false + } - return componentWillUnmount }, [])
建议将时间相关类型定义集中管理
建议将
CountDownTimeProps接口移至types.ts文件中，与现有的CountDownProps类型定义放在一起。这样可以：
- 保持类型定义的集中管理和一致性
- 提高代码的可维护性
- 便于其他组件复用时间格式相关的类型定义
具体修改建议：
- 将
CountDownTimeProps从countdown.taro.tsx移动到types.ts- 在
types.ts中导出该接口，使其可以被其他文件引用- 在
countdown.taro.tsx中通过 import 语句引入该类型🔗 Analysis chain
Line range hint
15-54: 类型定义和默认值处理优化建议将
CountDownTimeProps接口移至types.ts文件中，保持类型定义的集中管理。同时，建议使用 TypeScript 的Required工具类型来确保默认值覆盖所有必需属性。
Let me gather more information about the types and their usage in the codebase.
Let me check the content of the types.ts file to understand the existing type definitions better.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # 验证类型定义的位置和使用情况 rg -g '*.ts' -g '*.tsx' "CountDownTimeProps"Length of output: 320
Script:
#!/bin/bash # Check if there's a types.ts file and other type definitions fd "types.ts" src/packages/countdown/ rg -g '*.ts' -g '*.tsx' "interface.*Props" src/packages/countdown/Length of output: 300
Script:
#!/bin/bash # Check the content of types.ts cat src/packages/countdown/types.tsLength of output: 566
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
src/packages/countdown/countdown.taro.tsx(4 hunks)
🧰 Additional context used
🪛 Biome
src/packages/countdown/countdown.taro.tsx
[error] 325-334: Avoid using unnecessary Fragment.
A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
Unsafe fix: Remove the Fragment
(lint/complexity/noUselessFragments)
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Outside diff range and nitpick comments (17)
src/packages/countdown/demos/taro/demo4.tsx (1)
Line range hint
8-14: 建议展示新增的 type 属性根据 PR 的目标，此次更新增加了 text 类型。建议在此演示中展示新的 type 属性的使用方法，以便用户了解如何使用不同的显示类型。
建议添加：
<CountDown endTime={stateRef.current.endTime} millisecond format="HH:mm:ss:S" + type="text" />src/packages/countdown/demos/h5/demo3.tsx (2)
7-7: 建议优化时间计算的可读性建议将魔法数字替换为更易读的常量或计算方式，以提高代码的可维护性。
- endDay: Date.now() + 60 * 1000 * 60 * 25, + endDay: Date.now() + 25 * 60 * 60 * 1000, // 25小时
18-22: 建议考虑国际化支持当前格式字符串中的"天"是硬编码的中文，建议考虑添加国际化支持以适应不同语言环境。
- format="DD天HH:mm:ss" + format={t('countdown.dayFormat')} // 建议使用 i18nsrc/packages/countdown/demos/taro/demo3.tsx (2)
7-7: 建议优化时间计算的实现方式建议考虑以下几点改进：
- 使用
new Date()替代Date.now()，以提供更好的可读性- 考虑将时间计算逻辑抽取为常量或工具函数
- 为了支持服务端渲染（SSR），建议在
useEffect中初始化时间- endDay: Date.now() + 60 * 1000 * 60 * 25, + endDay: 0, // 初始值useEffect(() => { stateRef.current.endDay = Date.now() + 60 * 1000 * 60 * 25; }, []);
12-12: 建议添加示例说明文档为了提高代码的可维护性和用户体验，建议为每个倒计时示例添加注释说明：
- 解释每种格式的使用场景
- 说明 format 参数的格式规则
- 补充 type="text" 的具体用途
<Cell> + {/* 分钟和秒钟格式 (mm:ss) */} <CountDown endTime={stateRef.current.endTime} format="mm:ss" /> </Cell> <Cell> + {/* 仅显示秒钟格式 (ss) */} <CountDown endTime={stateRef.current.endTime} format="ss" /> </Cell> <Cell> + {/* 文本格式的完整日期显示 */} <CountDown type="text" endTime={stateRef.current.endDay} format="DD天HH:mm:ss" /> </Cell>Also applies to: 15-15, 18-22
src/packages/countdown/demos/h5/demo1.tsx (1)
13-19: 建议优化重复的演示代码新增的 CountDown 组件与现有的使用相同的配置（endTime 和 onEnd），且都使用 "primary" 类型，这可能会造成冗余。建议展示不同的使用场景或配置来丰富演示效果。
建议修改如下：
- <Cell> - <CountDown - endTime={stateRef.current.endTime} - type="primary" - onEnd={onEnd} - /> - </Cell> + <Cell> + <CountDown + endTime={stateRef.current.endTime + 30 * 1000} + type="primary" + onEnd={onEnd} + /> + </Cell>src/packages/countdown/demos/taro/demo1.tsx (1)
Line range hint
1-33: 建议优化示例代码的组织结构为了让示例代码更具教育意义，建议：
- 为不同类型的 CountDown 添加注释说明其用途
- 考虑展示更多实际应用场景的示例
const Demo1 = () => { const stateRef = useRef({ endTime: Date.now() + 60 * 1000, }) const onEnd = () => { console.log('countdown: ended.') } return ( <> + {/* 主要样式倒计时 */} <Cell> <CountDown endTime={stateRef.current.endTime} type="primary" onEnd={onEnd} /> </Cell> + {/* 默认样式倒计时 */} <Cell> <CountDown endTime={stateRef.current.endTime} onEnd={onEnd} /> </Cell> + {/* 文本样式倒计时 */} <Cell> <CountDown endTime={stateRef.current.endTime} type="text" onEnd={onEnd} /> </Cell> </> ) }src/packages/countdown/countdown.scss (2)
24-24: 建议考虑使用CSS变量来管理文本对齐方式为了保持样式的一致性和可维护性，建议将文本对齐方式抽取为CSS变量。
- text-align: center; + text-align: $countdown-text-align;
36-40: 新增的text类型样式实现合理新增的
&-number-text类的样式定义清晰，去除了边框和背景色，保持了与数字颜色一致，符合文本类型的视觉要求。不过建议考虑以下几点优化：
- 考虑添加过渡效果，提升交互体验
- 可以考虑将颜色值提取为变量，方便主题定制
&-number-text { border: 0; background-color: transparent; - color: $countdown-number-color; + color: $countdown-number-text-color; + transition: color 0.3s ease; }src/packages/countdown/countdown.harmony.css (2)
24-30: 新增文本类型样式的实现合理新增的
.nut-countdown-number-text类采用了更加简洁的样式：
- 移除了边框
- 使用透明背景
- 保持了与其他元素的对齐方式
- 维持了一致的字体大小和行高
建议考虑添加过渡效果，使状态变化更流畅。
.nut-countdown-number-text { border: 0; background-color: transparent; color: #ff0f23; + transition: color 0.3s ease; }Also applies to: 64-68
56-56: 建议使用CSS变量定义颜色值建议将背景色
#ffffff改为使用CSS变量，以便于主题定制。.nut-countdown-number { border: 1px solid #ffebf1; - background-color: #ffffff; + background-color: var(--nut-countdown-background-color, #ffffff); color: #ff0f23; }src/packages/countdown/doc.md (1)
138-143: 优化 CSS 变量声明CSS 变量的更新看起来合理，但有以下建议：
--nutui-countdown-number-padding的值0 0可以简化为0- 建议在文档中说明这些尺寸调整的目的，以便其他开发者理解这些改动的原因
建议将 padding 值简化为：
-| \--nutui-countdown-number-padding | 倒计时的时间区域padding | `0 0` | +| \--nutui-countdown-number-padding | 倒计时的时间区域padding | `0` |🧰 Tools
🪛 LanguageTool
[duplication] ~142-~142: Posíbel erro tipográfico: hai unha palabra repetida.
Context: ...down-number-padding | 倒计时的时间区域padding |0 0| | --nutui-countdown-number-margin |...(WORD_REPETITION)
src/packages/countdown/doc.taro.md (2)
138-143: 建议统一 CSS 变量命名规范注意到变量命名存在不一致的情况：
--countdown-number-border-radius缺少nutui-前缀- 其他变量都遵循
--nutui-countdown-*的命名规范建议保持命名一致性，将其修改为
--nutui-countdown-number-border-radius。🧰 Tools
🪛 LanguageTool
[duplication] ~142-~142: Posíbel erro tipográfico: hai unha palabra repetida.
Context: ...down-number-padding | 倒计时的时间区域padding |0 0| | --nutui-countdown-number-margin |...(WORD_REPETITION)
142-142: 修复文字重复问题在 CSS 变量说明中发现文字重复：
- \--nutui-countdown-border-color | 倒计时的时间区域的边框颜色颜色 + \--nutui-countdown-border-color | 倒计时的时间区域的边框颜色🧰 Tools
🪛 LanguageTool
[duplication] ~142-~142: Posíbel erro tipográfico: hai unha palabra repetida.
Context: ...down-number-padding | 倒计时的时间区域padding |0 0| | --nutui-countdown-number-margin |...(WORD_REPETITION)
src/packages/countdown/doc.zh-TW.md (2)
93-93: 建议补充类型说明建议为新增的
type属性添加更详细的说明，包括各个类型值的视觉效果差异。这将帮助开发者更好地理解和选择合适的展示类型。建议补充为：
-| type | 展示類型 | `default`\|`primary`\|`text` | `default` | +| type | 展示類型，default為默認樣式，primary帶背景色，text為純文本 | `default`\|`primary`\|`text` | `default` |
136-150: 建议优化CSS变量分组当前CSS变量的排序可以更加合理，建议按照以下类别进行分组：
- 布局相关（display）
- 尺寸相关（width、height、padding、margin）
- 文字相关（font-size、font-weight、color）
- 样式相关（background-color、border-color）
- 类型特定样式（primary相关的变量）
这样的组织方式将提高文档的可读性和可维护性。
🧰 Tools
🪛 LanguageTool
[locale-violation] ~136-~136: 'display' é un xenismo. É preferíbel dicir "expositor"
Context: ... --- | --- | --- | | --nutui-countdown-display | 倒計時的佈局方式 |flex| | --nutui-countd...(GL_BARBARISM_REPLACE)
[duplication] ~142-~142: Posíbel erro tipográfico: hai unha palabra repetida.
Context: ...down-number-padding | 倒計時的時間區域padding |0 0| | --nutui-countdown-number-margin |...(WORD_REPETITION)
[locale-violation] ~145-~145: 'light' é un xenismo. É preferíbel dicir "leve" ou "de baixo valor calórico"
Context: ...nutui-countdown-color | 倒計時的時間區域的文字顏色 |$color-primary-light-pressed| | --nutui-countdown-backgro...(GL_BARBARISM_REPLACE)
[locale-violation] ~146-~146: 'background' é un xenismo. É preferíbel dicir "formación de base"
Context: ...y-light-pressed| | \--nutui-countdown-background-color | 倒計時的時間區域的背景顏色 |$color-primary...(GL_BARBARISM_REPLACE)
[locale-violation] ~149-~149: 'background' é un xenismo. É preferíbel dicir "formación de base"
Context: ...#FFFFFF| | \--nutui-countdown-primary-background-color | type爲primary`時，倒計時的時間區域的背景顏色 |...(GL_BARBARISM_REPLACE)
src/packages/countdown/doc.en-US.md (1)
137-142: 建议增加样式变量的使用说明为了帮助开发者更好地理解这些样式变量的作用，建议：
- 为新的尺寸值添加使用场景说明
- 补充这些样式变量之间的关联关系说明
示例补充说明：
- | \--nutui-countdown-font-size | The font size of the countdown | `11px` | + | \--nutui-countdown-font-size | The font size of the countdown (用于确保在不同设备上的最佳可读性) | `11px` |
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (18)
src/packages/countdown/countdown.harmony.css(1 hunks)src/packages/countdown/countdown.scss(2 hunks)src/packages/countdown/countdown.taro.tsx(3 hunks)src/packages/countdown/countdown.tsx(2 hunks)src/packages/countdown/demos/h5/demo1.tsx(1 hunks)src/packages/countdown/demos/h5/demo3.tsx(1 hunks)src/packages/countdown/demos/h5/demo4.tsx(1 hunks)src/packages/countdown/demos/taro/demo1.tsx(1 hunks)src/packages/countdown/demos/taro/demo3.tsx(1 hunks)src/packages/countdown/demos/taro/demo4.tsx(1 hunks)src/packages/countdown/doc.en-US.md(2 hunks)src/packages/countdown/doc.md(2 hunks)src/packages/countdown/doc.taro.md(2 hunks)src/packages/countdown/doc.zh-TW.md(2 hunks)src/packages/countdown/index.taro.ts(1 hunks)src/packages/countdown/index.ts(1 hunks)src/packages/countdown/types.ts(1 hunks)src/styles/variables.scss(2 hunks)
🧰 Additional context used
🪛 GitHub Check: codecov/patch
src/packages/countdown/countdown.tsx
[warning] 180-181: src/packages/countdown/countdown.tsx#L180-L181
Added lines #L180 - L181 were not covered by tests
🪛 LanguageTool
src/packages/countdown/doc.md
[duplication] ~142-~142: Posíbel erro tipográfico: hai unha palabra repetida.
Context: ...down-number-padding | 倒计时的时间区域padding | 0 0 | | --nutui-countdown-number-margin |...
(WORD_REPETITION)
src/packages/countdown/doc.taro.md
[duplication] ~142-~142: Posíbel erro tipográfico: hai unha palabra repetida.
Context: ...down-number-padding | 倒计时的时间区域padding | 0 0 | | --nutui-countdown-number-margin |...
(WORD_REPETITION)
src/packages/countdown/doc.zh-TW.md
[locale-violation] ~136-~136: 'display' é un xenismo. É preferíbel dicir "expositor"
Context: ... --- | --- | --- | | --nutui-countdown-display | 倒計時的佈局方式 | flex | | --nutui-countd...
(GL_BARBARISM_REPLACE)
[duplication] ~142-~142: Posíbel erro tipográfico: hai unha palabra repetida.
Context: ...down-number-padding | 倒計時的時間區域padding | 0 0 | | --nutui-countdown-number-margin |...
(WORD_REPETITION)
[locale-violation] ~145-~145: 'light' é un xenismo. É preferíbel dicir "leve" ou "de baixo valor calórico"
Context: ...nutui-countdown-color | 倒計時的時間區域的文字顏色 | $color-primary-light-pressed | | --nutui-countdown-backgro...
(GL_BARBARISM_REPLACE)
[locale-violation] ~146-~146: 'background' é un xenismo. É preferíbel dicir "formación de base"
Context: ...y-light-pressed| | \--nutui-countdown-background-color | 倒計時的時間區域的背景顏色 |$color-primary...
(GL_BARBARISM_REPLACE)
[locale-violation] ~149-~149: 'background' é un xenismo. É preferíbel dicir "formación de base"
Context: ...#FFFFFF | | \--nutui-countdown-primary-background-color | type爲primary`時，倒計時的時間區域的背景顏色 |...
(GL_BARBARISM_REPLACE)
🔇 Additional comments (26)
src/packages/countdown/index.ts (1)
3-3: 代码结构优化：类型定义集中管理
将类型定义移至独立的 types.ts 文件是个很好的做法，这样可以：
- 提高代码的可维护性
- 便于类型的重用
- 使主文件结构更清晰
运行以下脚本验证类型文件的存在和导出：
✅ Verification successful
类型定义已正确实现
验证结果显示：
types.ts文件存在于正确位置CountDownType类型已定义，包含 'default'、'primary' 和 'text' 三个值选项CountDownProps接口也已在文件中导出
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 验证 types.ts 文件存在并包含必要的类型定义
# 检查文件是否存在
fd -p "src/packages/countdown/types.ts$"
# 验证类型定义
ast-grep --pattern 'export type CountDownType = $_'
ast-grep --pattern 'export interface CountDownProps {
$$$
}'
Length of output: 286
src/packages/countdown/index.taro.ts (1)
3-3: 类型导出重构看起来不错！
将类型定义移至单独的 types 文件是个很好的重构，这样可以提高代码的组织性和可维护性。
让我们验证一下 types 文件是否正确定义了所需类型：
✅ Verification successful
类型定义验证完成，结构完整且符合预期！
types 文件中已正确定义了：
- CountDownType：包含 'default' | 'primary' | 'text' 三种类型
- CountDownProps：包含完整的倒计时组件属性定义，包括类型、时间控制、显示格式等必要参数
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：验证 types 文件中的类型定义
# 预期：应该能找到 CountDownProps 和 CountDownType 的定义
# 检查类型定义
ast-grep --pattern 'export type CountDownType = $$$'
ast-grep --pattern 'export interface CountDownProps {
$$$
}'
Length of output: 212
Script:
#!/bin/bash
# 让我们进一步检查 CountDownProps 的完整定义
rg -A 10 "export interface CountDownProps" src/packages/countdown/types.ts
Length of output: 330
src/packages/countdown/demos/h5/demo4.tsx (1)
13-13: 请确认毫秒精度的变更影响
将格式从 "HH:mm:ss:SS" 改为 "HH:mm:ss:S" 会降低毫秒的显示精度（从两位数改为一位数）。建议：
- 在组件文档中明确说明此变更
- 确认此改动是否符合 v14 版本的设计规范
- 考虑是否需要提供配置选项，允许用户选择毫秒的显示精度
✅ Verification successful
毫秒格式变更是有意的设计改动
从代码分析结果来看，这是一个有意的设计变更：
- Git 历史显示这是一个统一的改动，将
HH:mm:ss:SS改为HH:mm:ss:S - 文档中默认格式为
HH:mm:ss，未对毫秒精度做特殊说明 - 在其他示例中（如 demo9），仍保留了
ss:SS双位毫秒的用法，说明这是基于具体场景的选择
这个改动是合理的，不需要额外的文档说明。建议：
- 保持当前改动，使用单位毫秒显示
- 根据实际场景需求，可以灵活选择使用
:S或:SS格式
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查其他示例中的毫秒格式使用情况
rg -l 'format.*ss:S' src/packages/countdown/
Length of output: 218
Script:
#!/bin/bash
# Check the content of these files to understand the format pattern usage
rg -A 5 -B 5 'format.*ss:S' src/packages/countdown/demos/
Length of output: 2681
Script:
#!/bin/bash
# Check documentation and type definitions for format
rg -A 5 -B 5 'format.*string' src/packages/countdown/
Length of output: 6353
Script:
#!/bin/bash
# Check git history for format related changes
git log -p --all | rg -A 5 -B 5 'format.*ss:S'
Length of output: 14093
Script:
#!/bin/bash
# Check if there are any other format patterns in use
rg 'format.*ss:[S|M]' src/packages/countdown/
Length of output: 325
src/packages/countdown/demos/taro/demo4.tsx (1)
13-13: 请确认毫秒显示精度的变更
将格式从 "HH:mm:ss:SS" 改为 "HH:mm:ss:S" 会降低毫秒的显示精度。考虑到组件启用了 millisecond 属性来支持毫秒级渲染，建议保持双位毫秒显示以提供更精确的计时信息。
建议修改为：
- format="HH:mm:ss:S"
+ format="HH:mm:ss:SS"src/packages/countdown/types.ts (2)
1-3: 类型定义清晰且符合需求！
CountDownType 的定义符合组件规范，成功添加了 'text' 类型选项。
5-21: 🛠️ Refactor suggestion
建议改进类型定义的严谨性
接口定义中存在以下需要优化的地方：
onUpdate回调函数使用了any类型，建议明确指定类型- 时间相关的参数（startTime, endTime, remainingTime, time）建议统一使用相同的类型注释
建议按如下方式修改：
- onUpdate: (restTime: any) => void
+ onUpdate: (restTime: number) => void建议添加属性说明文档
为了提高代码的可维护性，建议为接口属性添加 JSDoc 注释，特别是对于：
format属性的格式规则destroy属性的具体作用- 时间相关属性的单位说明
检查时间处理的一致性
建议验证所有时间相关的回调函数参数命名的一致性：
onPaused和onRestart使用restTimeonUpdate也使用restTime
src/packages/countdown/demos/h5/demo3.tsx (1)
10-16: 组件结构清晰合理
使用 Fragment 包装多个 Cell 组件的方式符合 React 最佳实践，每个倒计时组件都有清晰的展示目的。
src/packages/countdown/demos/taro/demo3.tsx (1)
10-24: 结构优化合理，展示更加清晰
代码结构调整合理，通过多个 Cell 组件清晰地展示了不同的倒计时格式，便于用户理解和使用。
src/packages/countdown/demos/h5/demo1.tsx (1)
26-26: 很好的实现了文本类型的支持
新增的 "text" 类型符合 PR 的目标，为用户提供了更多的展示选择。这个改动使得组件更加灵活，能够适应不同的设计需求。
src/packages/countdown/demos/taro/demo1.tsx (2)
13-19: 新增的 CountDown 组件展示了 primary 类型的使用方式
代码结构清晰，通过 Cell 组件包装保持了布局的一致性。这个示例有助于用户理解 primary 类型的视觉效果。
26-26: 验证新增的 text 类型在文档中是否有相应说明
新增的 text 类型需要确保在组件文档中有详细的使用说明和样式预览。
✅ Verification successful
text 类型已在文档中有完整说明
根据文档检查结果，text 类型已经在各语言版本的文档中（doc.md、doc.taro.md、doc.en-US.md、doc.zh-TW.md）都有明确说明，作为 type 属性的一个有效值选项：default | primary | text。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查文档中是否包含 text 类型的说明
rg -A 5 "text.*type" "src/packages/countdown/doc*.md"
Length of output: 126
Script:
#!/bin/bash
# First, let's find the documentation files for countdown component
fd "doc.*\.md" src/packages/countdown/
# Then let's check for any type-related documentation
rg -i "type|类型" src/packages/countdown/
Length of output: 5669
src/packages/countdown/countdown.scss (1)
9-9: 新增的选择器位置合理！
将 &-number-text 添加到选择器列表中是合适的，因为它需要继承与其他数字显示相同的基础样式。
src/packages/countdown/countdown.harmony.css (3)
6-6: 字体大小调整符合设计规范
从10px调整到11px的变化提升了文本的可读性，这个改动与设计规范保持一致。
12-14: 统一调整了数字和单位的样式规格
高度从14px增加到16px，字体大小调整为11px，这些改动：
- 优化了视觉层次
- 确保了组件各部分的一致性
- 提升了整体的观感
Also applies to: 20-23, 36-39
41-52: 优化了数字容器的间距和对齐方式
对数字容器的调整很合理：
- 最小宽度从20px减少到16px使布局更紧凑
- 移除了内边距
- 减小了外边距
- 添加了文本居中对齐
这些改动使组件更加紧凑和规范。
src/packages/countdown/doc.md (1)
93-93: 建议为新增的 text 类型添加演示示例
为了帮助用户更好地理解和使用新增的 text 类型，建议在示例代码部分添加相应的演示用例。这将有助于用户直观地了解 text 类型的展示效果和使用场景。
是否需要我帮助生成 text 类型的示例代码？
✅ Verification successful
text 类型已有完整的演示示例
经验证，text 类型已在多个演示文件中得到充分展示：
- H5 和 Taro 版本的 demo1 中展示了基础用法
- H5 和 Taro 版本的 demo3 中展示了自定义格式用法
文档更新合理且已有对应的演示实例支持。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查是否已存在 text 类型的演示示例
rg -l "type=\"text\"" "src/packages/countdown/demos/"
Length of output: 223
Script:
#!/bin/bash
# 检查 text 类型在演示文件中的具体使用情况
rg "type=\"text\"" "src/packages/countdown/demos/" -A 2 -B 2
Length of output: 1427
src/packages/countdown/doc.taro.md (1)
93-93: 新增的 type 属性文档说明清晰完整！
新增的展示类型属性完全符合需求，并且文档说明简洁明了。
src/packages/countdown/doc.en-US.md (1)
93-93: 新增的 type 属性文档完善且清晰！
属性定义符合文档规范，并且与 PR 目标保持一致。
src/packages/countdown/countdown.tsx (1)
177-177: 请确认格式解析的向后兼容性
在修改格式解析逻辑时，请确保：
- 现有的格式字符串仍能正常工作
- 不会影响已有的使用场景
#!/bin/bash
# 搜索组件的使用示例，确认格式解析的兼容性
rg -l 'format=' --glob '**/*.{tsx,jsx}'src/packages/countdown/countdown.taro.tsx (3)
8-8: 引入 classNames 工具库是个不错的改进！
使用 classNames 工具库来管理条件类名是一个很好的实践，它可以让类名的管理更加清晰和可维护。
183-183: 毫秒格式化逻辑修改正确
对毫秒格式化的处理逻辑进行了优化，保持了功能的一致性。
286-290: 新增的样式类型实现正确，建议验证样式文件
使用 classNames 优雅地实现了不同类型的条件渲染，包括新增的 'text' 类型。
请运行以下脚本验证相关样式文件是否包含新增的样式类：
✅ Verification successful
样式文件已正确实现新增的 text 类型
样式文件中已包含 countdown-number-text 相关的样式定义，包括：
- 布局样式：display、align-items、justify-content
- 外观样式：无边框、透明背景、文本颜色
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：验证新增的 text 类型样式是否在相应的样式文件中定义
# 测试：搜索样式文件中的 number-text 类定义
echo "检查 countdown 相关样式文件..."
fd -e scss -e css . src/packages/countdown -x rg -l "countdown-number-text"
Length of output: 175
Script:
#!/bin/bash
# 检查 countdown.harmony.css 中的 text 类型样式定义
echo "检查 countdown.harmony.css 中的样式定义："
cat src/packages/countdown/countdown.harmony.css | rg -A 3 "countdown-number-text"
# 检查其他可能的样式文件
echo -e "\n检查其他相关样式文件："
fd -e scss -e css . src/packages/countdown -x cat {} | rg -A 3 "number-text"
Length of output: 841
src/styles/variables.scss (4)
778-781: 字体相关变量调整
字体大小调整为 $font-size-xs，并新增字重变量，使倒计时组件的文字样式更加规范和统一。
785-785: 内外边距优化
内边距从 0 1px 调整为 0 0，外边距从 0 2px 调整为 0 1px，使布局更加紧凑。
Also applies to: 790-790
Line range hint 788-809: 颜色和背景样式规范化
- 圆角使用
$radius-xxs变量，确保与设计系统保持一致 - 背景色改用
$color-background-overlay，提升视觉层次 - 文字颜色使用
$color-primary-text，增强可读性
这些改动使组件更好地融入了整体设计系统。
783-784: 尺寸变量统一为16px
高度和宽度统一调整为16px，这样可以保持组件尺寸的一致性。建议在调整后验证在不同场景下的显示效果。
| | \--nutui-countdown-color | 倒計時的文字顔色 | `$color-primary` | | ||
| | \--nutui-countdown-font-size | 倒計時的字體大小 | `10px` | | ||
| | \--nutui-countdown-display | 倒計時的佈局方式 | `flex` | | ||
| | \--nutui-countdown-color | 倒計時的文字顏色 | `$color-primary` | |
There was a problem hiding this comment.
需要解决CSS变量重复定义问题
--nutui-countdown-color 变量在文档中出现了两次，分别在第137行和第145行，且默认值不同：
- 第137行：
$color-primary - 第145行：
$color-primary-light-pressed
这种重复定义可能会导致开发者混淆。建议保留一个定义并确保其值正确。
Also applies to: 145-145
There was a problem hiding this comment.
@oasis-cloud 好的，感谢您的确认。
(^.^)/
There was a problem hiding this comment.
Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!
| const isTextDom = | ||
| type === 'text' | ||
| ? `<span class="nut-countdown-number-text">$1</span>` | ||
| : `<span class="nut-countdown-number">$1</span>` | ||
| formatCache = formatCache.replace( | ||
| /(\d+)/g, | ||
| type === 'primary' | ||
| ? `<span class="nut-countdown-number-primary">$1</span>` | ||
| : `<span class="nut-countdown-number">$1</span>` | ||
| : isTextDom |
There was a problem hiding this comment.
💡 Codebase verification
需要为新增的文本类型添加测试用例
测试文件 countdown.spec.tsx 中缺少对新增文本类型（type="text"）的测试覆盖。建议添加以下测试场景：
- 验证文本类型下的 CSS 类名是否正确（
nut-countdown-number-text） - 验证默认类型下的 CSS 类名是否正确（
nut-countdown-number） - 验证主要类型下的 CSS 类名是否正确（
nut-countdown-number-primary）
建议参考示例：
test('type props', async () => {
const { container } = render(
<>
<CountDown endTime={Date.now() + 1000} type="text" />
<CountDown endTime={Date.now() + 1000} />
<CountDown endTime={Date.now() + 1000} type="primary" />
</>
)
expect(container.querySelector('.nut-countdown-number-text')).toBeInTheDocument()
expect(container.querySelector('.nut-countdown-number')).toBeInTheDocument()
expect(container.querySelector('.nut-countdown-number-primary')).toBeInTheDocument()
})🔗 Analysis chain
建议改进代码结构并添加测试覆盖
代码实现了新的文本类型支持，但建议做以下改进：
- 将 CSS 类名抽取为常量，提高可维护性
- 为新增的文本类型添加单元测试用例
建议重构代码如下：
+ const CLASS_NAMES = {
+ TEXT: 'nut-countdown-number-text',
+ DEFAULT: 'nut-countdown-number',
+ PRIMARY: 'nut-countdown-number-primary'
+ }
const isTextDom =
type === 'text'
- ? `<span class="nut-countdown-number-text">$1</span>`
- : `<span class="nut-countdown-number">$1</span>`
+ ? `<span class="${CLASS_NAMES.TEXT}">$1</span>`
+ : `<span class="${CLASS_NAMES.DEFAULT}">$1</span>`
formatCache = formatCache.replace(
/(\d+)/g,
type === 'primary'
- ? `<span class="nut-countdown-number-primary">$1</span>`
+ ? `<span class="${CLASS_NAMES.PRIMARY}">$1</span>`
: isTextDom
)Let me check the test coverage for the countdown component's text type functionality.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查是否存在相关的测试文件
fd -g "*countdown*.test.*" -x echo "Found test file: {}"
Length of output: 716
Script:
#!/bin/bash
# Check countdown test file content
cat src/packages/countdown/__test__/countdown.spec.tsx
Length of output: 2680
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 180-181: src/packages/countdown/countdown.tsx#L180-L181
Added lines #L180 - L181 were not covered by tests
| $countdown-number-padding: var( | ||
| --nutui-countdown-number-padding, | ||
| 0 1px | ||
| $countdown-font-size: var(--nutui-countdown-font-size, $font-size-xs) !default; |
There was a problem hiding this comment.
其他主题的变量文件是否考虑替换
主题方自己维护
src/packages/countdown/types.ts
Outdated
| onEnd: () => void | ||
| onPaused: (restTime: number) => void | ||
| onRestart: (restTime: number) => void | ||
| onUpdate: (restTime: any) => void |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (1)
src/packages/countdown/countdown.taro.tsx (1)
325-325: 建议优化Fragment的使用当前代码中存在不必要的Fragment包裹，建议进行优化：
- .toString() - .slice(0, digit || 1) + .toString().slice(0, digit || 1)🧰 Tools
🪛 Biome
[error] 325-334: Avoid using unnecessary Fragment.
A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
Unsafe fix: Remove the Fragment(lint/complexity/noUselessFragments)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
src/packages/countdown/__test__/__snapshots__/countdown.spec.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (2)
src/packages/countdown/__test__/countdown.spec.tsx(1 hunks)src/packages/countdown/countdown.taro.tsx(4 hunks)
🧰 Additional context used
🪛 Biome
src/packages/countdown/countdown.taro.tsx
[error] 325-334: Avoid using unnecessary Fragment.
A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.
Unsafe fix: Remove the Fragment
(lint/complexity/noUselessFragments)
🔇 Additional comments (3)
src/packages/countdown/countdown.taro.tsx (3)
8-8: 导入更改和类型重构看起来不错！
使用 classNames 工具来处理条件类名是一个很好的改进，这样可以使代码更加清晰和可维护。类型定义的重构也符合组件封装的最佳实践。
Also applies to: 10-10, 13-13
184-184: 毫秒格式化逻辑优化合理！
对毫秒格式化的处理更加简洁，同时保持了功能的完整性。
287-291: 建议为新增的展示类型添加测试用例
新增的类型条件渲染逻辑看起来不错，但建议添加相应的测试用例来确保：
type="text"的样式正确应用- 不同类型之间的切换是否正常工作
- 边界情况的处理
Also applies to: 293-293
| test('type props text primary', async () => { | ||
| const { container } = render( | ||
| <> | ||
| <CountDown endTime={Date.now() + 1 * 1000} type="text" /> | ||
| <CountDown endTime={Date.now() + 1 * 1000} type="primary" /> | ||
| </> | ||
| ) | ||
|
|
||
| expect(container).toMatchSnapshot() | ||
| }) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议增强测试用例的覆盖范围
当前的快照测试虽然可以捕获渲染输出的变化，但建议添加以下具体测试：
- 验证不同
type值对应的样式类是否正确应用 - 确保组件在不同类型下的行为一致性
- 测试无效的
type值的处理
建议按照以下方式重构测试：
test('type props text primary', async () => {
const { container } = render(
<>
<CountDown endTime={Date.now() + 1 * 1000} type="text" />
<CountDown endTime={Date.now() + 1 * 1000} type="primary" />
</>
)
- expect(container).toMatchSnapshot()
+ const countdowns = container.querySelectorAll('.nut-countdown')
+
+ // 验证 text 类型
+ expect(countdowns[0]).toHaveClass('nut-countdown-text')
+
+ // 验证 primary 类型
+ expect(countdowns[1]).toHaveClass('nut-countdown-primary')
+
+ // 验证倒计时功能在不同类型下的一致性
+ await act(async () => {
+ await sleep(1000)
+ waitFor(() => {
+ expect(countdowns[0]).toHaveTextContent('00:00:00')
+ expect(countdowns[1]).toHaveTextContent('00:00:00')
+ })
+ })
})Committable suggestion skipped: line range outside the PR's diff.
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Outside diff range and nitpick comments (7)
src/packages/countdown/doc.md (3)
93-93: 建议补充text类型的说明为了帮助用户更好地理解和使用新增的
text类型，建议在文档中补充该类型的视觉效果说明和使用场景。
147-147: 修复文档描述中的重复用词变量描述中出现了重复的"颜色"词：
-倒计时的时间区域的边框颜色颜色 +倒计时的时间区域的边框颜色🧰 Tools
🪛 LanguageTool
[locale-violation] ~147-~147: 'light' é un xenismo. É preferíbel dicir "leve" ou "de baixo valor calórico"
Context: ...ntdown-border-color | 倒计时的时间区域的边框颜色颜色 |$color-primary-light-pressed| | --nutui-countdown-number-...(GL_BARBARISM_REPLACE)
138-148: 建议添加新特性的示例代码为了更好地展示新增的功能：
- 建议在示例代码中添加
text类型的使用示例- 建议添加自定义样式变量的使用示例，特别是新增的颜色相关变量
这将帮助用户更直观地理解如何使用这些新特性。
🧰 Tools
🪛 LanguageTool
[duplication] ~142-~142: Posíbel erro tipográfico: hai unha palabra repetida.
Context: ...down-number-padding | 倒计时的时间区域padding |0 0| | --nutui-countdown-number-margin |...(WORD_REPETITION)
[locale-violation] ~146-~146: 'background' é un xenismo. É preferíbel dicir "formación de base"
Context: ...$color-primary| | --nutui-countdown-background-color | 倒计时的时间区域的背景颜色 | `$color-backgro...(GL_BARBARISM_REPLACE)
[locale-violation] ~146-~146: 'background' é un xenismo. É preferíbel dicir "formación de base"
Context: ...down-background-color | 倒计时的时间区域的背景颜色 |$color-background-overlay| | --nutui-countdown-border-...(GL_BARBARISM_REPLACE)
[locale-violation] ~147-~147: 'light' é un xenismo. É preferíbel dicir "leve" ou "de baixo valor calórico"
Context: ...ntdown-border-color | 倒计时的时间区域的边框颜色颜色 |$color-primary-light-pressed| | --nutui-countdown-number-...(GL_BARBARISM_REPLACE)
src/packages/countdown/doc.zh-TW.md (2)
93-93: 建议完善 type 属性的说明文档建议为每个类型值添加更详细的视觉效果说明，以帮助开发者更好地理解和选择合适的样式：
-| type | 展示類型 | `default`\|`primary`\|`text` | `default` | +| type | 展示類型 | `default`\|`primary`\|`text` | `default` | + +类型说明： +- `default`: 默认样式，带背景色的数字展示 +- `primary`: 主题色样式，使用主题色作为背景 +- `text`: 纯文本样式，无背景色
147-147: 修复边框颜色描述中的重复用词变量描述中出现了重复的"颜色"词语。
-| \--nutui-countdown-border-color | 倒計時的時間區域的邊框顏色顏色 | `$color-primary-light-pressed` | +| \--nutui-countdown-border-color | 倒計時的時間區域的邊框顏色 | `$color-primary-light-pressed` |🧰 Tools
🪛 LanguageTool
[locale-violation] ~147-~147: 'light' é un xenismo. É preferíbel dicir "leve" ou "de baixo valor calórico"
Context: ...ntdown-border-color | 倒計時的時間區域的邊框顏色顏色 |$color-primary-light-pressed| | --nutui-countdown-number-...(GL_BARBARISM_REPLACE)
src/packages/countdown/doc.taro.md (2)
93-93: 建议补充各个类型的视觉效果说明为了帮助开发者更好地理解和使用，建议为
type属性的每个可选值（default、primary、text）添加对应的视觉效果说明。建议添加如下说明：
-| type | 展示类型 | `default`\|`primary`\|`text` | `default` | +| type | 展示类型 | `default`\|`primary`\|`text` | `default` | default: 默认样式 <br> primary: 主题色样式 <br> text: 纯文本样式 |
147-147: 修复文档描述中的重复用词变量描述中出现了重复的"颜色"词语。
建议修改如下：
-| \--nutui-countdown-border-color | 倒计时的时间区域的边框颜色颜色 | `$color-primary-light-pressed` | +| \--nutui-countdown-border-color | 倒计时的时间区域的边框颜色 | `$color-primary-light-pressed` |🧰 Tools
🪛 LanguageTool
[locale-violation] ~147-~147: 'light' é un xenismo. É preferíbel dicir "leve" ou "de baixo valor calórico"
Context: ...ntdown-border-color | 倒计时的时间区域的边框颜色颜色 |$color-primary-light-pressed| | --nutui-countdown-number-...(GL_BARBARISM_REPLACE)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (7)
src/packages/countdown/countdown.scss(2 hunks)src/packages/countdown/doc.en-US.md(2 hunks)src/packages/countdown/doc.md(2 hunks)src/packages/countdown/doc.taro.md(2 hunks)src/packages/countdown/doc.zh-TW.md(2 hunks)src/packages/countdown/types.ts(1 hunks)src/styles/variables.scss(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- src/packages/countdown/countdown.scss
- src/packages/countdown/doc.en-US.md
- src/packages/countdown/types.ts
🧰 Additional context used
🪛 LanguageTool
src/packages/countdown/doc.md
[duplication] ~142-~142: Posíbel erro tipográfico: hai unha palabra repetida.
Context: ...down-number-padding | 倒计时的时间区域padding | 0 0 | | --nutui-countdown-number-margin |...
(WORD_REPETITION)
[locale-violation] ~146-~146: 'background' é un xenismo. É preferíbel dicir "formación de base"
Context: ...$color-primary | | --nutui-countdown-background-color | 倒计时的时间区域的背景颜色 | `$color-backgro...
(GL_BARBARISM_REPLACE)
[locale-violation] ~146-~146: 'background' é un xenismo. É preferíbel dicir "formación de base"
Context: ...down-background-color | 倒计时的时间区域的背景颜色 | $color-background-overlay | | --nutui-countdown-border-...
(GL_BARBARISM_REPLACE)
[locale-violation] ~147-~147: 'light' é un xenismo. É preferíbel dicir "leve" ou "de baixo valor calórico"
Context: ...ntdown-border-color | 倒计时的时间区域的边框颜色颜色 | $color-primary-light-pressed | | --nutui-countdown-number-...
(GL_BARBARISM_REPLACE)
src/packages/countdown/doc.taro.md
[duplication] ~142-~142: Posíbel erro tipográfico: hai unha palabra repetida.
Context: ...down-number-padding | 倒计时的时间区域padding | 0 0 | | --nutui-countdown-number-margin |...
(WORD_REPETITION)
[locale-violation] ~146-~146: 'background' é un xenismo. É preferíbel dicir "formación de base"
Context: ...$color-primary | | --nutui-countdown-background-color | 倒计时的时间区域的背景颜色 | `$color-backgro...
(GL_BARBARISM_REPLACE)
[locale-violation] ~146-~146: 'background' é un xenismo. É preferíbel dicir "formación de base"
Context: ...down-background-color | 倒计时的时间区域的背景颜色 | $color-background-overlay | | --nutui-countdown-border-...
(GL_BARBARISM_REPLACE)
[locale-violation] ~147-~147: 'light' é un xenismo. É preferíbel dicir "leve" ou "de baixo valor calórico"
Context: ...ntdown-border-color | 倒计时的时间区域的边框颜色颜色 | $color-primary-light-pressed | | --nutui-countdown-number-...
(GL_BARBARISM_REPLACE)
src/packages/countdown/doc.zh-TW.md
[locale-violation] ~136-~136: 'display' é un xenismo. É preferíbel dicir "expositor"
Context: ... --- | --- | --- | | --nutui-countdown-display | 倒計時的佈局方式 | flex | | --nutui-countd...
(GL_BARBARISM_REPLACE)
[duplication] ~142-~142: Posíbel erro tipográfico: hai unha palabra repetida.
Context: ...down-number-padding | 倒計時的時間區域padding | 0 0 | | --nutui-countdown-number-margin |...
(WORD_REPETITION)
[locale-violation] ~146-~146: 'background' é un xenismo. É preferíbel dicir "formación de base"
Context: ...$color-primary | | --nutui-countdown-background-color | 倒計時的時間區域的背景顏色 | `$color-backgro...
(GL_BARBARISM_REPLACE)
[locale-violation] ~146-~146: 'background' é un xenismo. É preferíbel dicir "formación de base"
Context: ...down-background-color | 倒計時的時間區域的背景顏色 | $color-background-overlay | | --nutui-countdown-border-...
(GL_BARBARISM_REPLACE)
[locale-violation] ~147-~147: 'light' é un xenismo. É preferíbel dicir "leve" ou "de baixo valor calórico"
Context: ...ntdown-border-color | 倒計時的時間區域的邊框顏色顏色 | $color-primary-light-pressed | | --nutui-countdown-number-...
(GL_BARBARISM_REPLACE)
[locale-violation] ~149-~149: 'background' é un xenismo. É preferíbel dicir "formación de base"
Context: ...ry-text | | \--nutui-countdown-primary-background-color | type爲primary`時，倒計時的時間區域的背景顏色 |...
(GL_BARBARISM_REPLACE)
🔇 Additional comments (3)
src/packages/countdown/doc.taro.md (1)
Line range hint 1-148: 文档结构清晰完整
文档结构符合项目规范，各个部分组织得当，示例代码引用正确，新增属性和样式变量的文档说明完整。
🧰 Tools
🪛 LanguageTool
[locale-violation] ~136-~136: 'display' é un xenismo. É preferíbel dicir "expositor"
Context: ... --- | --- | --- | | --nutui-countdown-display | 倒计时的布局方式 | flex | | --nutui-countd...
(GL_BARBARISM_REPLACE)
[duplication] ~142-~142: Posíbel erro tipográfico: hai unha palabra repetida.
Context: ...down-number-padding | 倒计时的时间区域padding | 0 0 | | --nutui-countdown-number-margin |...
(WORD_REPETITION)
[locale-violation] ~146-~146: 'background' é un xenismo. É preferíbel dicir "formación de base"
Context: ...$color-primary | | --nutui-countdown-background-color | 倒计时的时间区域的背景颜色 | `$color-backgro...
(GL_BARBARISM_REPLACE)
[locale-violation] ~146-~146: 'background' é un xenismo. É preferíbel dicir "formación de base"
Context: ...down-background-color | 倒计时的时间区域的背景颜色 | $color-background-overlay | | --nutui-countdown-border-...
(GL_BARBARISM_REPLACE)
[locale-violation] ~147-~147: 'light' é un xenismo. É preferíbel dicir "leve" ou "de baixo valor calórico"
Context: ...ntdown-border-color | 倒计时的时间区域的边框颜色颜色 | $color-primary-light-pressed | | --nutui-countdown-number-...
(GL_BARBARISM_REPLACE)
[locale-violation] ~149-~149: 'background' é un xenismo. É preferíbel dicir "formación de base"
Context: ...ry-text | | \--nutui-countdown-primary-background-color | type为primary`时，倒计时的时间区域的背景颜色 |...
(GL_BARBARISM_REPLACE)
src/styles/variables.scss (2)
785-788: 内边距和边框变量的优化
移除水平内边距使数字显示更紧凑，使用设计令牌 $radius-xxs 代替固定值提升了设计一致性。
790-814: 边距和颜色变量的改进
-
颜色相关改进：
- 使用
$color-background-overlay作为背景色 - 使用
$color-primary-text作为文本色 - 使用
$color-primary-light-pressed作为边框色
- 使用
-
间距优化：
- 数字间距从 '0 2px' 减小到 '0 1px'，视觉效果更紧凑
建议：
- 确保新的颜色搭配满足 WCAG 2.1 的无障碍对比度要求
- 在暗色主题下验证这些颜色变量的表现
✅ Verification successful
倒计时组件样式变量更新已验证
-
变量使用情况：
- 变量在
countdown.scss中正确应用于组件样式 - 新的颜色变量遵循设计系统的标准令牌
- 间距变化（0 2px → 0 1px）在主题文件中已统一更新
- 变量在
-
主题兼容性：
- 变量定义支持CSS变量覆盖，确保了主题定制的灵活性
- 颜色变量继承自系统级颜色令牌，保证了暗色主题的自动适配
建议：
- 在实际设备上测试新的间距设置（0 1px）是否在各种屏幕尺寸下都能保持良好的可读性
- 确认新的颜色令牌在不同主题切换时的表现
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查暗色主题相关文件
fd -e scss -e less "dark" | xargs grep -l "countdown.*color\|countdown.*background"
Length of output: 83
Script:
#!/bin/bash
# 搜索暗色主题相关的变量定义
rg -g '*.{scss,less}' --type-add 'style:*.{scss,less}' -t style '(dark|night).*countdown|countdown.*(dark|night)'
# 搜索countdown组件的样式文件
fd -e scss -e less countdown
# 检查主题相关的配置文件
fd -e scss -e less "theme" | xargs grep -l "countdown"
Length of output: 237
Script:
#!/bin/bash
# 检查countdown组件的具体样式实现
cat src/packages/countdown/countdown.scss
# 检查是否有其他使用这些变量的文件
rg -g '*.{scss,less}' --type-add 'style:*.{scss,less}' -t style '\$countdown-number-(margin|color|background-color|border-color)'
Length of output: 2648
| | \--nutui-countdown-color | 倒計時的文字顔色 | `$color-primary` | | ||
| | \--nutui-countdown-font-size | 倒計時的字體大小 | `10px` | | ||
| | \--nutui-countdown-display | 倒計時的佈局方式 | `flex` | | ||
| | \--nutui-countdown-color | 倒計時的文字顏色 | `$color-primary` | |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议重构重复的颜色变量定义
目前存在两个相似的颜色变量定义：
--nutui-countdown-color--nutui-countdown-number-color
为了避免混淆并保持向后兼容性，建议：
- 保留
--nutui-countdown-number-color作为主要的颜色变量 - 将
--nutui-countdown-color标记为废弃，并在下一个主版本中移除
-| \--nutui-countdown-color | 倒計時的文字顏色 | `$color-primary` |
+| \--nutui-countdown-color | 倒計時的文字顏色（已废弃，请使用 --nutui-countdown-number-color） | `$color-primary` |Also applies to: 145-145
| $countdown-font-size: var(--nutui-countdown-font-size, $font-size-xs) !default; | ||
| $coutdown-font-weight: var( | ||
| --nutui-countdown-font-weight, | ||
| $font-weight | ||
| ) !default; | ||
| $countdown-height: var(--nutui-countdown-height, 16px) !default; | ||
| $countdown-width: var(--nutui-countdown-width, 16px) !default; |
There was a problem hiding this comment.
💡 Codebase verification
需要同步更新其他主题文件中的倒计时组件变量
搜索结果显示 variables-jrkf.scss 和 variables-jmapp.scss 中的倒计时组件变量仍使用旧的值：
- 字体大小：14px（未使用 $font-size-xs 变量）
- 高度：14px（未更新为16px）
- 宽度：20px（未更新为16px）
为保持主题一致性，建议将这些文件中的变量也更新为新的值。
🔗 Analysis chain
字体和尺寸变量的改进
使用设计令牌 $font-size-xs 替代固定值提高了可维护性，高度和宽度的调整使组件更加平衡。建议同步更新其他主题文件中的相应变量。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查其他主题文件中的变量定义
fd -e scss -e less "theme" | xargs grep -l "countdown.*font-size\|countdown.*height\|countdown.*width"
Length of output: 102
Script:
#!/bin/bash
# 使用更广泛的搜索来查找主题相关文件
fd -t f -e scss -e less | grep -i "theme"
# 同时搜索所有样式文件中的countdown相关变量
fd -t f -e scss -e less | xargs rg "countdown.*font-size|countdown.*height|countdown.*width"
Length of output: 1638
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (1)
src/packages/countdown/__test__/countdown.spec.tsx (1)
57-66: 建议重构测试以减少重复代码当前的
primary类型测试与text类型测试存在大量重复代码。建议将通用的测试逻辑抽取出来，使用参数化测试方式重构。建议按照以下方式重构：
-test('type props primary', async () => { +describe('CountDown type props', () => { + const types = ['text', 'primary'] as const + + it.each(types)('should render correctly with type %s', async (type) => { const { container } = render( - <CountDown endTime={Date.now() + 1 * 1000} type="primary" /> + <CountDown endTime={Date.now() + 1 * 1000} type={type} /> ) const countdownDom = container.querySelector('.nut-countdown') as Element - expect(container).toMatchSnapshot() + + // 验证类名 expect( - countdownDom?.querySelectorAll('.nut-countdown-number-primary')?.length + countdownDom?.querySelectorAll(`.nut-countdown-number-${type}`)?.length ).toBe(3) + + // 验证样式类 + expect(countdownDom).toHaveClass(`nut-countdown-${type}`) + + // 验证功能完整性 + await act(async () => { + await sleep(1000) + waitFor(() => { + const numbers = countdownDom?.querySelectorAll(`.nut-countdown-number-${type}`) + expect(numbers[0]).toHaveTextContent('00') + }) + }) }) +})
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
src/packages/countdown/__test__/__snapshots__/countdown.spec.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (2)
src/config.json(1 hunks)src/packages/countdown/__test__/countdown.spec.tsx(1 hunks)
🔇 Additional comments (1)
src/config.json (1)
990-991: 配置更新正确！
CountDown 组件配置中添加 v14: true 标识符与 PR 的目标相符，正确地标记了组件对 v14 版本的支持。
| test('type props text', async () => { | ||
| const { container } = render( | ||
| <CountDown endTime={Date.now() + 1 * 1000} type="text" /> | ||
| ) | ||
| const countdownDom = container.querySelector('.nut-countdown') as Element | ||
| expect(container).toMatchSnapshot() | ||
| expect( | ||
| countdownDom?.querySelectorAll('.nut-countdown-number-text')?.length | ||
| ).toBe(3) | ||
| }) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议增强 text 类型的测试覆盖范围
当前测试用例存在以下可以改进的地方：
- 仅验证了元素数量，未验证实际渲染的内容
- 缺少倒计时动态更新的测试
- 未测试边界情况
建议按照以下方式增强测试：
test('type props text', async () => {
+ const endTime = Date.now() + 2000
const { container } = render(
- <CountDown endTime={Date.now() + 1 * 1000} type="text" />
+ <CountDown endTime={endTime} type="text" />
)
const countdownDom = container.querySelector('.nut-countdown') as Element
- expect(container).toMatchSnapshot()
+
+ // 验证初始渲染
expect(
countdownDom?.querySelectorAll('.nut-countdown-number-text')?.length
).toBe(3)
+
+ // 验证实际内容
+ const numbers = countdownDom?.querySelectorAll('.nut-countdown-number-text')
+ expect(numbers[0]).toHaveTextContent('00')
+
+ // 验证动态更新
+ await act(async () => {
+ await sleep(1000)
+ waitFor(() => {
+ expect(numbers[0]).toHaveTextContent('00')
+ })
+ })
+
+ // 验证分隔符
+ const separators = countdownDom?.querySelectorAll('.nut-countdown-separator')
+ expect(separators).toHaveLength(2)
})Committable suggestion skipped: line range outside the PR's diff.
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
发布说明
新功能
CountDown组件的type属性，支持default、primary和text三种显示类型。.nut-countdown-number-text类，优化倒计时数字的样式。样式更新
10px调整至11px，高度已从14px调整至16px，提升视觉效果。20px调整至16px，边距和内边距也进行了相应调整，增强组件的自定义能力。文档更新
CountDown组件的文档，包含新属性和样式变量的说明。