fix(countup): 分隔符文字颜色支持css变量修改 #2869
Conversation
概述遍历这个拉取请求主要针对动画数字组件的样式和文档进行了修改。更改包括在 SCSS 文件中更新分隔符颜色、在演示文件中添加自定义主题属性，并在多个语言版本的文档中添加新的 CSS 变量，以增强组件的定制化选项。 变更
可能相关的 PR
建议标签
建议审阅者
诗歌
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 ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## next #2869 +/- ##
=======================================
Coverage 84.02% 84.02%
=======================================
Files 220 220
Lines 17917 17917
Branches 2628 2628
=======================================
Hits 15055 15055
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: 2
🔭 Outside diff range comments (2)
src/packages/animatingnumbers/demos/h5/demo2.tsx (1)
Line range hint
13-20: 请注意处理定时器内存泄漏问题
useEffect中的setInterval在组件卸载时需要清理，建议添加清理函数。建议修改如下：
useEffect(() => { - setInterval(() => { + const timer = setInterval(() => { setEndNumer( `${Math.floor(Math.random() * 999999)}.${Math.floor( Math.random() * 89 + 10 )}` ) }, 3000) + return () => clearInterval(timer) }, [])src/packages/animatingnumbers/demos/taro/demo2.tsx (1)
Line range hint
13-20: 同样需要处理定时器内存泄漏问题此处存在与 H5 版本相同的内存泄漏隐患，需要在
useEffect中清理setInterval。建议修改如下：
useEffect(() => { - setInterval(() => { + const timer = setInterval(() => { setEndNumer( `${Math.floor(Math.random() * 999999)}.${Math.floor( Math.random() * 89 + 10 )}` ) }, 3000) + return () => clearInterval(timer) }, [])
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
src/packages/animatingnumbers/countup.scss(1 hunks)src/packages/animatingnumbers/demos/h5/demo2.tsx(1 hunks)src/packages/animatingnumbers/demos/taro/demo2.tsx(1 hunks)src/packages/animatingnumbers/doc.en-US.md(1 hunks)src/packages/animatingnumbers/doc.md(1 hunks)src/packages/animatingnumbers/doc.taro.md(1 hunks)src/packages/animatingnumbers/doc.zh-TW.md(1 hunks)src/styles/variables.scss(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- src/styles/variables.scss
🔇 Additional comments (5)
src/packages/animatingnumbers/countup.scss (1)
28-28: 分隔符颜色变量的使用符合预期！
将分隔符颜色从固定值改为使用 $countup-separator-color 变量是个很好的改进，这样能够通过 CSS 变量灵活地自定义颜色。
src/packages/animatingnumbers/demos/h5/demo2.tsx (1)
10-10: 主题配置更新正确！
新增的 nutuiCountupSeparatorColor 配置项正确使用了 CSS 变量 --nutui-color-primary，展示了分隔符颜色的自定义能力。
src/packages/animatingnumbers/demos/taro/demo2.tsx (1)
10-10: 主题配置与 H5 版本保持一致！
Taro 版本中新增的 nutuiCountupSeparatorColor 配置与 H5 版本保持一致，这很好。
src/packages/animatingnumbers/doc.md (1)
56-56: 文档更新清晰完整！
新增的CSS变量命名规范，默认值设置合理，与组件其他样式变量保持一致。
src/packages/animatingnumbers/doc.zh-TW.md (1)
56-56: 繁体中文文档同步更新正确！
新增的CSS变量在繁体中文文档中翻译准确，格式规范。
| @@ -53,3 +53,4 @@ import { AnimatingNumbers } from '@nutui/nutui-react-taro' | |||
| | \--nutui-countup-lr-margin | 每个数字的margin | `0` | | |||
| | \--nutui-countup-bg-color | 每个数字块的背景色 | `inherit` | | |||
| | \--nutui-countup-color | 每个数字块的字色 | `$color-title` | | |||
| | \--nutui-countup-separator-color | 分隔符的字体颜色 | `$color-title` | | |||
There was a problem hiding this comment.
💡 Codebase verification
需要更新样式实现以支持新的CSS变量
经过验证发现：
- 文档中已添加了
--nutui-countup-separator-color变量的说明 - Demo 文件中已经在使用该变量
- 但在 SCSS 实现中仍然使用的是
$countup-separator-color变量，需要更新为新的 CSS 变量
建议：
- 在 SCSS 文件中更新分隔符颜色的实现，使用
var(--nutui-countup-separator-color)替代$countup-separator-color
🔗 Analysis chain
Taro文档更新完整，建议验证实现！
新增的CSS变量文档更新正确。建议确认以下几点：
- Taro版本的样式实现是否已同步更新
- 相关demo是否已更新使用新变量
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查Taro版本的实现和demo
rg --type=scss "nutui-countup-separator-color" src/packages/animatingnumbers/
rg --type=typescript "nutuiCountupSeparatorColor" src/packages/animatingnumbers/demos/taro/
Length of output: 233
Script:
#!/bin/bash
# Check implementation and demo files
rg "nutui-countup-separator-color" src/packages/animatingnumbers/
rg "nutuiCountupSeparatorColor" src/packages/animatingnumbers/
Length of output: 800
Script:
#!/bin/bash
# Check the SCSS implementation
fd -e scss . src/packages/animatingnumbers/ -x cat {}
Length of output: 877
| @@ -53,3 +53,4 @@ The component provides the following CSS variables, which can be used to customi | |||
| | \--nutui-countup-lr-margin | margin of item | `0` | | |||
| | \--nutui-countup-bg-color | background color of item | `inherit` | | |||
| | \--nutui-countup-color | color of item | `$color-title` | | |||
| | \--nutui-countup-separator-color | The font color of the separator | `$color-title` | | |||
There was a problem hiding this comment.
💡 Codebase verification
需要同步更新中文文档
根据验证结果，分隔符颜色的 CSS 变量已在繁体中文（zh-TW）和 Taro 版本文档中更新，但中文（zh-CN）文档缺失。请添加相应的中文文档更新。
- 需要在
src/packages/animatingnumbers/doc.zh-CN.md文件中添加对应的 CSS 变量说明 - CSS 变量表格中应包含
nutui-countup-separator-color的中文说明
🔗 Analysis chain
文档更新正确且完整
新增的 CSS 变量文档符合组件的命名规范，描述清晰，默认值设置合理。
运行以下脚本验证其他语言版本的文档是否同步更新：
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：检查其他语言版本的文档是否包含相同的 CSS 变量定义
# 搜索所有语言版本的文档文件
fd "doc\.(zh-CN|zh-TW|taro)\.md$" src/packages/animatingnumbers/ --exec rg -l "nutui-countup-separator-color"
Length of output: 194
Script:
#!/bin/bash
# 检查中文文档是否存在
fd "doc\.zh-CN\.md$" src/packages/animatingnumbers/
# 如果存在，检查其内容中的 CSS 变量表格部分
fd "doc\.zh-CN\.md$" src/packages/animatingnumbers/ --exec cat
Length of output: 118
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新特性
--nutui-countup-separator-color，用于自定义计数动画中的分隔符颜色。customTheme对象中新增属性nutuiCountupSeparatorColor，允许用户更改分隔符的颜色。文档
AnimatingNumbers组件的文档，包含新的 CSS 变量以增强自定义选项。