refactor(badge): 支持禁用模式 #3118
refactor(badge): 支持禁用模式 #3118
Conversation
Walkthrough该PR在Badge组件中引入了全新的disabled状态支持。主要改动包括：向SCSS中添加禁用样式类，并在React组件中新增disabled属性（默认值为false），以便根据状态条件渲染不同的CSS样式。同时，文档和示例也做了相应更新，新增演示禁用状态的示例和相关属性说明。此外，还在变量文件和类型声明中同步添加了对禁用状态的支持。 Changes
Sequence Diagram(s)sequenceDiagram
participant User as 用户
participant Badge as Badge组件
participant SCSS as 样式文件
User->>Badge: 提供props（可能包含disabled属性）
Badge->>Badge: 解构并检查disabled属性
alt disabled为true
Badge->>SCSS: 添加 "-disabled" CSS类
SCSS-->>Badge: 返回禁用样式
else
Badge->>Badge: 使用常规样式
end
Badge-->>User: 渲染最终Badge组件
Possibly related PRs
Suggested reviewers
Poem
✨ Finishing Touches
🪧 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 (
|
github-actions
bot
added
action:review
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #3118 +/- ##
==========================================
Coverage 86.95% 86.96%
==========================================
Files 280 280
Lines 18456 18459 +3
Branches 2786 2786
==========================================
+ Hits 16049 16052 +3
Misses 2402 2402
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: 0
🧹 Nitpick comments (3)
src/packages/badge/demos/taro/demo9.tsx (1)
1-20: 禁用模式示例实现完整示例代码展示了三种不同类型Badge的禁用状态（点状、数字和文本内容），覆盖了常见使用场景，便于用户理解禁用效果。代码结构简洁清晰，与其他demo文件风格保持一致。
建议为示例代码添加注释，帮助用户更好地理解不同类型的禁用状态。例如：
<Cell style={{ justifyContent: 'space-around' }}> + {/* 点状徽标禁用状态 */} <Badge dot disabled> <Avatar icon={<User />} shape="square" /> </Badge> + {/* 数字徽标禁用状态 */} <Badge value={8} disabled> <Avatar icon={<User />} shape="square" /> </Badge> + {/* 文本徽标禁用状态 */} <Badge value="内容" disabled> <Avatar icon={<User />} shape="square" /> </Badge> </Cell>src/packages/badge/doc.en-US.md (1)
111-111: 英文CSS变量说明存在语法错误英文描述"badge disables background color"存在语法问题，应修改为"badge disabled background color"，以保持语法正确性。
-| \--nutui-badge-background-disabled-color | badge disables background color | `$color-text-disabled` | +| \--nutui-badge-background-disabled-color | badge disabled background color | `$color-text-disabled` |src/packages/badge/demo.taro.tsx (1)
60-61: 禁用模式演示部分添加合理您已成功添加禁用模式的演示部分，并使用了翻译后的标题。不过，考虑一下禁用模式在演示顺序中的位置是否合适。通常，基本功能（如默认用法、最大值）应该排在前面，而禁用状态等变体可能更适合放在自定义功能之后。
建议考虑将禁用模式的演示放在更靠后的位置，比如在所有自定义功能之后，这样可能更符合用户对功能展示的直觉期望。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
src/packages/badge/demo.taro.tsx(5 hunks)src/packages/badge/demo.tsx(5 hunks)src/packages/badge/demos/h5/demo9.tsx(1 hunks)src/packages/badge/demos/taro/demo9.tsx(1 hunks)src/packages/badge/doc.en-US.md(3 hunks)src/packages/badge/doc.md(3 hunks)src/packages/badge/doc.taro.md(3 hunks)src/packages/badge/doc.zh-TW.md(3 hunks)
✅ Files skipped from review due to trivial changes (1)
- src/packages/badge/demos/h5/demo9.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
- src/packages/badge/doc.zh-TW.md
- src/packages/badge/doc.md
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (10)
src/packages/badge/demo.tsx (3)
11-11: 新增Demo9引入符合代码风格新增的导入语句与现有的导入结构保持一致，遵循了项目的导入模式。
24-24: 国际化文本添加合理在三种语言环境（简体中文、繁体中文和英文）中都添加了"禁用"/"Disabled"的翻译，确保了多语言支持的完整性。
Also applies to: 35-35, 46-46
55-56: 禁用模式演示位置放置得当将禁用模式的演示放在基础用法之后、最大值之前，符合功能展示的逻辑顺序，使用户能够循序渐进地了解组件功能。
src/packages/badge/doc.taro.md (3)
21-28: 文档中添加禁用章节合理在文档中添加禁用章节，并提供相应的演示代码示例，使开发者能够清晰了解如何使用禁用功能。章节放置在基础用法之后，符合文档的组织结构。
98-98: Props表格新增disabled属性定义清晰在Props表格中添加了disabled属性的说明，包括类型和默认值，使API文档更加完整。
110-110: 新增CSS变量说明完整添加了禁用状态的背景色CSS变量(
--nutui-badge-background-disabled-color)及其默认值，便于开发者进行主题定制，文档内容全面。src/packages/badge/doc.en-US.md (2)
21-28: 英文文档禁用章节添加合理英文文档中新增的Disabled章节与中文文档保持一致，保证了不同语言文档的同步性。
99-99: 英文Props表格新增disabled属性描述准确英文文档中对disabled属性的描述简洁明了，与中文文档内容对应，方便非中文用户理解使用。
src/packages/badge/demo.taro.tsx (2)
14-14: 正确引入了新的演示组件您成功地引入了演示禁用状态的Demo9组件，这符合现有的导入模式。
27-27: 多语言支持完善您已为"禁用"功能添加了所有必要的语言翻译（简体中文、繁体中文和英文），确保了国际化支持的完整性。
Also applies to: 38-38, 49-49
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
文档更新