fix(countdown): update the v15 style

[irisSong]

🤔 这个变动的性质是？

• 新特性提交
• 日常 bug 修复
• 站点、文档改进
• 演示代码改进
• 组件样式/交互改进
• TypeScript 定义更新
• 包体积优化
• 性能优化
• 功能增强
• 国际化改进
• 重构
• 代码风格优化
• 测试用例
• 分支合并
• 其他改动（是关于什么的改动？）

🔗 相关 Issue

💡 需求背景和解决方案

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项。⚠️

• 文档已补充或无须补充
• 代码演示已提供或无须提供
• TypeScript 定义已补充或无须补充
• fork仓库代码是否为最新避免文件冲突
• Files changed 没有 package.json lock 等无关文件

Summary by CodeRabbit

• 新特性

  • 更新了倒计时组件的样式，增强了视觉效果和文本对齐。
  • 新增了用于品牌和危险色彩的 CSS 自定义属性，扩展了颜色调色板。

• Bug 修复

  • 调整了倒计时显示的条件渲染逻辑，优化了天数的显示方式。

• 文档

  • 代码中添加了注释，以增强样式表的可读性和理解性。

[coderabbitai]

Walkthrough

本次更改涉及多个文件，主要集中在倒计时组件的样式和功能上。在 countdown.scss 文件中，增加了多个 CSS 属性以改善 .nut-countdown 组件的布局和视觉效果。countdown.taro.tsx 文件中修改了时间显示的条件渲染逻辑，并明确了组件卸载时的处理方式。此外，theme-dark.scss、theme-default.scss 和 variables.scss 文件中新增了与品牌颜色和危险颜色相关的 CSS 自定义属性，以增强颜色管理系统。

Changes

文件路径	更改摘要
src/packages/countdown/countdown.scss	增加 box-sizing 和 line-height，定义 font-family，调整边框样式。
src/packages/countdown/countdown.taro.tsx	修改 renderTimeItem 函数的条件渲染，明确 componentWillUnmount 的逻辑。
src/styles/theme-dark.scss	新增变量 --nutui-color-primary-specialdisabled 和 --nutui-red-3。
src/styles/theme-default.scss	新增变量 --nutui-color-primary-specialdisabled 和 --nutui-red-3。
src/styles/variables.scss	新增变量 $color-primary-specialdisabled，更新 $countdown-number-border-color。

Possibly related PRs

• fix(countdown): 适配v14 && type增加text类型 #2701: 与 countdown.scss 文件的样式更改直接相关，涉及倒计时组件的样式更新。
• fix(AnimatingNumbers): 多端适配 #2700: 处理倒计时组件的 type 属性，相关于本次 PR 的样式和功能增强。
• fix(countdown): taro不区分四端实现方式 #2396: 涉及 countdown.taro.tsx 文件的渲染逻辑和属性管理，与本次 PR 的功能更新相关。
• fix(countdown): 修改实现逻辑适配v13和四端 #2316: 更新 countdown.scss 文件，相关于本次 PR 的样式更改。
• chore: update icons-react-taro version #2706: 更新倒计时组件的文档和属性，与本次 PR 的功能和样式增强相关。
• fix(empty): correct css margin and docs #2819: 反映了对组件文档的改进，与本次 PR 的倒计时组件增强相关。

Suggested labels

size/L, 3.x

Suggested reviewers

• xiaoyatong
• oasis-cloud

Poem

🐰 在倒计时的节奏中，
新样式如花绽放，
颜色鲜明如晨曦，
组件功能更流畅，
兔子欢跃舞翩翩，
让我们一起庆祝这变化！ 🎉

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

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)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 84.14%. Comparing base (f042dc2) to head (593b932).
Report is 8 commits behind head on feat_v3.x.

Additional details and impacted files

@@            Coverage Diff             @@
##           feat_v3.x    #2843   +/-   ##
==========================================
  Coverage      84.14%   84.14%           
==========================================
  Files            273      273           
  Lines          18103    18103           
  Branches        2690     2690           
==========================================
  Hits           15232    15232           
  Misses          2866     2866           
  Partials           5        5           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[coderabbitai]

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (4)

src/packages/countdown/countdown.scss (1)

15-19: 样式属性的改进增强了组件的一致性

添加的 box-sizing 和 line-height 属性有助于确保组件在不同场景下的布局一致性。不过，建议重新考虑使用特定字体 'JD'，因为：

1. 可能不是所有环境都能访问这个字体
2. 应该提供降级字体选项

建议修改为：

  box-sizing: border-box;
  font-weight: $coutdown-font-weight;
  font-size: $countdown-font-size;
  line-height: calc($countdown-font-size + 2px);
- font-family: 'JD';
+ font-family: 'JD', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

src/styles/theme-default.scss (1)

36-36: 新增特殊禁用状态颜色变量

添加了新的颜色变量 --nutui-color-primary-specialdisabled 和 --nutui-red-3，这些变量增强了组件在特殊禁用状态下的视觉反馈。建议添加相关文档说明这些新变量的具体使用场景。

建议在代码注释中添加这些变量的使用说明：

+ // 用于特殊禁用状态下的主要颜色，例如倒计时组件中的特殊禁用状态
  --nutui-color-primary-specialdisabled: var(--nutui-red-3);
+ // 用于轻量级的红色背景或边框
  --nutui-red-3: #ffadbe;

Also applies to: 67-67

src/styles/theme-dark.scss (1)

37-37: 新增的颜色变量定义正确且位置恰当！

新增的两个颜色变量 --nutui-color-primary-specialdisabled 和 --nutui-red-3 遵循了命名规范，并且与现有的颜色系统保持一致。

建议在变量定义处添加注释，说明这些颜色变量的具体用途，例如：

- --nutui-color-primary-specialdisabled: var(--nutui-red-3);
+ // 特殊禁用状态下的主要颜色
+ --nutui-color-primary-specialdisabled: var(--nutui-red-3);

- --nutui-red-3: #ffadbe;
+ // 红色色阶 - 级别3
+ --nutui-red-3: #ffadbe;

Also applies to: 69-69

src/styles/variables.scss (1)

23-26: 新增的SCSS变量定义正确！

新增的 $color-primary-specialdisabled 变量定义合理，并提供了默认值作为降级方案。

建议添加变量说明注释：

+// 特殊禁用状态下的主要颜色
$color-primary-specialdisabled: var(
  --nutui-color-primary-specialdisabled,
  #ffadbe
) !default;

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Reviewing files that changed from the base of the PR and between f042dc2 and 593b932.

📒 Files selected for processing (5)

• src/packages/countdown/countdown.scss (1 hunks)
• src/packages/countdown/countdown.taro.tsx (1 hunks)
• src/styles/theme-dark.scss (2 hunks)
• src/styles/theme-default.scss (2 hunks)
• src/styles/variables.scss (2 hunks)

🔇 Additional comments (3)

src/packages/countdown/countdown.scss (1)

29-38: 使用伪元素优化边框实现方式

使用 ::after 伪元素和 transform: scale(0.5) 来实现细边框是一个好的实践，可以在高分辨率屏幕上呈现更清晰的边框。

src/packages/countdown/countdown.taro.tsx (1)

284-284: 优化了天数显示逻辑

通过添加 unit !== 'DD' 条件，确保天数显示不会被 padZero 函数处理，这是一个合理的改进。

src/styles/variables.scss (1)

810-810: 倒计时组件边框颜色更新需要验证视觉效果

$countdown-number-border-color 已更新为使用新的特殊禁用状态颜色。

请确认倒计时组件在各个状态下的视觉表现是否符合预期。建议：

1. 检查默认状态的边框显示
2. 验证禁用状态下的边框颜色
3. 确保与其他组件的视觉风格保持一致