feat(badge): v15适配 #2826
feat(badge): v15适配 #2826
Conversation
Walkthrough该拉取请求主要涉及NutUI React从版本2.x升级到3.x的过程，涵盖了多个重要的功能和结构变化。更新包括安装说明、处理不兼容性、主题变量重命名、组件样式处理、类型导出增强、组件分类调整、图标组件重设计、API更改，以及组件特定的功能改进和新特性的引入。 Changes
Possibly related PRs
Suggested labels
Suggested reviewers
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (5)
🚧 Files skipped from review as they are similar to previous changes (3)
🔇 Additional comments (4)src/styles/variables.scss (4)
背景色直接使用主色调变量
Also applies to: 1614-1617
新增了三个尺寸的圆点变量：
这样的设计提供了更灵活的圆点大小选择。
新增了轮廓样式相关的变量，使用主色调定义边框颜色，增强了徽标的视觉效果和使用场景。 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 (
|
![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 (11)
src/packages/badge/demos/h5/demo1.tsx (1)
6-16: 建议优化 renderText 函数的实现建议将样式抽取为常量或使用 CSS 类，以提高代码的可维护性。
+const TEXT_STYLE = { + lineHeight: '16px', +} const renderText = () => { return ( <span - style={{ - lineHeight: '16px', - }} + style={TEXT_STYLE} > 文字内容 </span> ) }src/packages/badge/__test__/badge.spec.tsx (2)
31-34: 建议增强类型检查的测试用例当前测试用例仅验证了字符串类型的 top 值，建议添加数字类型的测试用例以确保类型兼容性。
test('should match top、right: number type', () => { const { container } = render(<Badge value={10} top={10} right={0} />) const badgeContent = container.querySelectorAll('.nut-badge-sup')[0] expect(badgeContent).toHaveStyle({ top: '10px' }) })
57-62: 建议完善自定义样式的测试覆盖fill="outline" 模式下的测试用例可以增加对边框样式的验证。
test('should match custom color when fill = outline', () => { const { container } = render( <Badge value={200} color="orange" fill="outline" /> ) const badgeContent = container.querySelectorAll('.nut-badge-outline')[0] expect(badgeContent).toHaveStyle({ color: 'orange', background: '#FFFFFF', }) // 建议添加边框样式的验证 expect(window.getComputedStyle(badgeContent, '::after').border).toBe('1px solid orange') })src/packages/badge/badge.scss (2)
22-36: 优化边框实现方式使用 transform scale 实现细边框的方案虽然可行，但可能在某些场景下造成模糊。建议考虑使用 CSS 变量来控制边框宽度，以提供更好的自定义性。
.nut-badge { --nut-badge-border-width: 1px; &-sup, &-icon { border-radius: $badge-border-radius; - &::after { - content: ''; - position: absolute; - top: -50%; - bottom: -50%; - left: -50%; - right: -50%; - transform: scale(0.5); - border: $badge-border; - border-radius: $badge-border-radius; - } + border: var(--nut-badge-border-width) solid $badge-border-color; } }
82-96: 徽标尺寸变体实现合理通过添加 normal、small、large 三种尺寸变体，提供了更灵活的样式选择。建议考虑使用 CSS 变量来统一管理这些尺寸值。
.nut-badge { + --nut-badge-dot-size-small: 8px; + --nut-badge-dot-size-normal: 16px; + --nut-badge-dot-size-large: 24px; &-dot { &-normal { - min-width: $badge-dot-width; - width: $badge-dot-width; - height: $badge-dot-width; + min-width: var(--nut-badge-dot-size-normal); + width: var(--nut-badge-dot-size-normal); + height: var(--nut-badge-dot-size-normal); } // 同样更新 small 和 large 的实现 } }src/packages/badge/doc.md (2)
86-88: Props 部分需要补充说明建议对
size属性的说明做以下改进：
- 补充各个尺寸的具体像素大小说明
- 建议添加示例代码展示不同尺寸的效果
112-116: 建议完善 dot 尺寸相关的文档为了更好地指导开发者使用新增的 dot 尺寸功能，建议：
- 在基础用法部分添加 dot 尺寸的演示示例
- 补充说明各个尺寸的使用场景
src/packages/badge/doc.zh-TW.md (1)
86-88: Props 部分需要與簡體中文文檔保持一致為保持文檔的一致性，建議：
- 補充各個尺寸的具體像素大小說明
- 添加示例代碼展示不同尺寸的效果
src/packages/badge/doc.taro.md (1)
112-116: 建议补充 Taro 环境下的特殊说明为了更好地指导开发者在 Taro 环境下使用新增的 dot 尺寸功能，建议：
- 说明在小程序环境下的兼容性情况
- 补充在 Taro 环境下的使用注意事项
src/packages/badge/badge.taro.tsx (1)
89-93: 位置计算逻辑需要优化建议优化位置计算的处理方式：
- 考虑添加类型检查确保 top 和 right 的值合法
- 统一处理单位转换逻辑
- style.top = pxTransform(Number(top) || 0) - const dir = rtl ? 'left' : 'right' - style[dir] = isHarmony - ? pxTransform(Number(right)) - : `${Number(right) || 0}px` + const topValue = Number(top) || 0 + const rightValue = Number(right) || 0 + style.top = isHarmony ? pxTransform(topValue) : `${topValue}px` + const dir = rtl ? 'left' : 'right' + style[dir] = isHarmony ? pxTransform(rightValue) : `${rightValue}px`src/styles/variables.scss (1)
1609-1612: 新增轮廓边框变量新增了
$badge-outline-border变量，用于定义轮廓样式徽标的边框。建议补充相关使用示例到文档中。是否需要我帮助更新组件文档，添加轮廓样式的使用示例？
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (2)
src/packages/badge/__test__/__snapshots__/badge.spec.tsx.snapis excluded by!**/*.snapsrc/packages/tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (30)
migrate-from-v2.md(1 hunks)src/config.json(2 hunks)src/packages/badge/__test__/badge.spec.tsx(3 hunks)src/packages/badge/badge.scss(2 hunks)src/packages/badge/badge.taro.tsx(5 hunks)src/packages/badge/badge.tsx(4 hunks)src/packages/badge/demos/h5/demo1.tsx(1 hunks)src/packages/badge/demos/h5/demo2.tsx(1 hunks)src/packages/badge/demos/h5/demo3.tsx(1 hunks)src/packages/badge/demos/h5/demo4.tsx(1 hunks)src/packages/badge/demos/h5/demo5.tsx(1 hunks)src/packages/badge/demos/h5/demo6.tsx(1 hunks)src/packages/badge/demos/h5/demo7.tsx(1 hunks)src/packages/badge/demos/h5/demo8.tsx(1 hunks)src/packages/badge/demos/taro/demo1.tsx(1 hunks)src/packages/badge/demos/taro/demo2.tsx(1 hunks)src/packages/badge/demos/taro/demo3.tsx(1 hunks)src/packages/badge/demos/taro/demo4.tsx(1 hunks)src/packages/badge/demos/taro/demo5.tsx(1 hunks)src/packages/badge/demos/taro/demo6.tsx(1 hunks)src/packages/badge/demos/taro/demo7.tsx(1 hunks)src/packages/badge/demos/taro/demo8.tsx(1 hunks)src/packages/badge/doc.en-US.md(2 hunks)src/packages/badge/doc.md(2 hunks)src/packages/badge/doc.taro.md(2 hunks)src/packages/badge/doc.zh-TW.md(2 hunks)src/packages/badge/index.taro.ts(1 hunks)src/packages/badge/index.ts(1 hunks)src/packages/badge/types.ts(1 hunks)src/styles/variables.scss(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (20)
- src/packages/badge/index.taro.ts
- src/packages/badge/demos/h5/demo7.tsx
- src/packages/badge/demos/taro/demo3.tsx
- src/config.json
- src/packages/badge/demos/h5/demo2.tsx
- src/packages/badge/demos/taro/demo8.tsx
- src/packages/badge/demos/h5/demo4.tsx
- src/packages/badge/demos/h5/demo3.tsx
- src/packages/badge/demos/h5/demo5.tsx
- src/packages/badge/index.ts
- src/packages/badge/demos/taro/demo6.tsx
- src/packages/badge/demos/taro/demo5.tsx
- src/packages/badge/demos/taro/demo7.tsx
- src/packages/badge/demos/taro/demo2.tsx
- src/packages/badge/types.ts
- src/packages/badge/demos/taro/demo1.tsx
- src/packages/badge/demos/h5/demo8.tsx
- src/packages/badge/demos/taro/demo4.tsx
- src/packages/badge/demos/h5/demo6.tsx
- src/packages/badge/badge.tsx
🧰 Additional context used
🪛 Biome (1.9.4)
src/packages/badge/badge.taro.tsx
[error] 103-103: The assignment should not be in an expression.
The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.
(lint/suspicious/noAssignInExpressions)
[error] 104-104: The assignment should not be in an expression.
The use of assignments in expressions is confusing.
Expressions are often considered as side-effect free.
(lint/suspicious/noAssignInExpressions)
🔇 Additional comments (9)
src/packages/badge/demos/h5/demo1.tsx (1)
19-27: 布局结构清晰，展示了徽标组件的多种用法
代码结构合理，通过三个 Cell 组件分别展示了不同类型的徽标（圆点、数字、文本），并且每组都包含了纯文本、图标和头像三种场景。
Also applies to: 28-36, 37-47
src/packages/badge/doc.en-US.md (2)
86-89: 属性定义更新合理且清晰
属性定义的更新符合组件库的规范：
- 新增
size属性用于自定义徽标点大小 - 更新了
top和right的默认值为 0，使其更符合直觉
101-117: CSS 变量命名规范且语义清晰
CSS 变量的命名和默认值更新合理：
- 统一使用
--nutui-badge-前缀 - 新增了不同尺寸点的宽度变量
- 完善了描述信息
src/packages/badge/badge.taro.tsx (2)
21-25: 默认属性定义合理
defaultProps 的更新符合预期：
top和right默认值设为 0- 新增
size属性默认值为 'large'
71-79: 类名处理逻辑优化
contentClasses 的处理更加完善：
- 新增了 size 相关的类名处理
- 保持了与现有类名的一致性
migrate-from-v2.md (1)
673-673: 迁移文档清晰完整
Badge 组件的迁移说明详尽且准确：
- 清晰说明了新增的 size 属性及其用途
- 完整记录了属性变更和删除的信息
src/styles/variables.scss (3)
1587-1589: 徽标背景和文字颜色变量的调整
背景色从渐变色改为纯色，文字颜色改用主题文本色，这样的改动使徽标样式更加简洁统一。
1596-1599: 徽标尺寸和内边距的优化
最小宽度从5px调整到6px，内边距从0 4px改为1px 4px，图标内边距从3px减小到2px，图标尺寸从12px减小到10px。这些微调有助于提升徽标的视觉表现。
1605-1608: 新增点状徽标尺寸变量
新增了小号(4px)和大号(8px)两个点状徽标尺寸，并将默认点状徽标尺寸调整为6px。这种分级设计能更好地适应不同场景需求。
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #2826 +/- ##
=============================================
+ Coverage 83.98% 84.53% +0.54%
=============================================
Files 220 273 +53
Lines 17882 18606 +724
Branches 2676 2688 +12
=============================================
+ Hits 15019 15729 +710
- Misses 2858 2872 +14
Partials 5 5 ☔ View full report in Codecov by Sentry. |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (2)
src/packages/badge/badge.scss (2)
5-5: 建议删除多余的空行为保持代码整洁，建议删除第5行的空行。
39-51: 建议优化行高设置当前使用固定的
line-height: 12px可能会在某些字体或语言环境下导致文本对齐问题。建议考虑使用相对单位。- line-height: 12px; + line-height: 1.2;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
src/packages/badge/badge.scss(2 hunks)
🔇 Additional comments (3)
src/packages/badge/badge.scss (3)
22-36: 优秀的1px边框实现方案
使用 transform: scale(0.5) 和伪元素实现细边框的方案值得肯定，这是移动端开发中处理1px边框的最佳实践之一。
102-104: 边框样式实现保持一致性
描边样式的实现与其他边框保持一致，使用伪元素方案，这种统一性值得肯定。
82-96: 良好的尺寸变体实现
徽标点的尺寸变体实现非常规范，使用了统一的命名规则和清晰的样式结构。建议在文档中明确说明各个尺寸的具体使用场景。
✅ Verification successful
徽标点尺寸变体已有完整文档说明
徽标点的尺寸变体实现规范，且在文档中已经清晰说明了各个尺寸的具体使用场景和尺寸值：
- small: 4px
- normal: 6px
- large: 8px
所有尺寸变体都有对应的CSS变量支持自定义配置，文档完整。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查文档中是否包含尺寸说明
rg -l "badge-dot-(normal|small|large)" docs/
Length of output: 92
Script:
#!/bin/bash
# Search for documentation files in the repository
fd -e md -e mdx
# Search for badge dot size documentation in any file
rg -i "badge.*dot.*(size|small|normal|large)"
Length of output: 13992
| &-number { | ||
| font-family: 'JD'; | ||
| /* #ifdef harmony */ | ||
| line-height: 12px; | ||
| /* #endif */ | ||
| /* #ifndef harmony */ | ||
| line-height: 13px; | ||
| /* #endif */ | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议重新考虑字体设置
直接使用 font-family: 'JD' 可能存在兼容性问题：
- 如果 JD 字体未能成功加载，可能会影响数字显示
- 建议添加降级字体方案
- font-family: 'JD';
+ font-family: 'JD', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;📝 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.
| &-number { | |
| font-family: 'JD'; | |
| /* #ifdef harmony */ | |
| line-height: 12px; | |
| /* #endif */ | |
| /* #ifndef harmony */ | |
| line-height: 13px; | |
| /* #endif */ | |
| } | |
| &-number { | |
| font-family: 'JD', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; | |
| /* #ifdef harmony */ | |
| line-height: 12px; | |
| /* #endif */ | |
| /* #ifndef harmony */ | |
| line-height: 13px; | |
| /* #endif */ | |
| } |
src/packages/badge/badge.tsx
Outdated
|
|
||
| const getCustomStyle = () => { |
There was a problem hiding this comment.
这次的适配可以把这里改成 class 方式实现吗？
There was a problem hiding this comment.
这里实现自定义颜色的话。在当前适配的情况下普通模式和反白模式都有变量可以设置颜色而且是可同时设置字体颜色和背景颜色。而color 只能设置字体颜色，不能同时控制两个颜色。
建议吧设置 color 的逻辑去掉 @irisSong @xiaoyatong
| @@ -670,6 +670,7 @@ plugins: [ | |||
| - 修改 `max` 的最大值为99（之前为10000），比较贴合实际场景。 | |||
| - 主题定制的 `css` 变量中，去掉和 `dot` 有关的其他值，只保留 `width`。其他值由 `width` 计算而来. | |||
| - 主题定制，增加包含 icon 情况下的样式变量。 | |||
| - 新增 `size` 属性，dot 尺寸，当 dot 等于 `true` 时生效 | |||
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (5)
src/packages/badge/badge.scss (1)
22-36: 建议优化边框实现方式当前使用
transform: scale(0.5)实现细边框的方案可能会导致以下问题：
- 创建新的合成层，影响性能
- 在某些浏览器中可能导致文字模糊
建议使用更现代的实现方式：
- &::after { - content: ''; - position: absolute; - top: -50%; - bottom: -50%; - left: -50%; - right: -50%; - transform: scale(0.5); - border: $badge-border; - border-radius: $badge-border-radius; - } + border: 0.5px solid $badge-border-color;src/packages/badge/badge.tsx (2)
Line range hint
75-87: 修复未定义的 color 属性代码中使用了未定义的
color属性，这会导致编译错误。需要在BadgeProps接口中添加该属性的定义。建议添加以下代码：
export interface BadgeProps { + color?: string; // ... 其他属性 }🧰 Tools
🪛 GitHub Check: build
[failure] 77-77:
Cannot find name 'color'.
[failure] 79-79:
Cannot find name 'color'.
[failure] 83-83:
Cannot find name 'color'.
57-66: 建议优化类名组合逻辑当前的类名组合逻辑较为复杂，可以通过提取常用判断为变量来提高可读性和可维护性。
建议重构为：
+ const hasContent = isNumber() || isString() || dot; + const isSingleDigit = typeof content() === 'string' && `${content()}`?.length === 1; const contentClasses = classNames({ - [`${classPrefix}-sup`]: isNumber() || isString() || dot, + [`${classPrefix}-sup`]: hasContent, [`${classPrefix}-number`]: isNumber(), - [`${classPrefix}-one`]: typeof content() === 'string' && `${content()}`?.length === 1, + [`${classPrefix}-one`]: isSingleDigit, [`${classPrefix}-dot`]: dot, [`${classPrefix}-dot-${size}`]: dot, [`${classPrefix}-${fill}`]: fill === 'outline', [`${classPrefix}-content`]: children, })src/styles/variables.scss (2)
1605-1608: 新增点状徽标尺寸变量增加了小、中、大三种尺寸的点状徽标变量，提供了更灵活的样式选择。建议在文档中说明这些尺寸的具体使用场景。
1609-1613: 新增轮廓样式相关变量新增了轮廓样式的颜色和边框变量，建议补充以下内容：
- 在组件文档中添加轮廓样式的使用示例
- 确保轮廓样式在不同背景色下都有足够的对比度
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (14)
migrate-from-v2.md(1 hunks)src/packages/badge/badge.scss(2 hunks)src/packages/badge/badge.taro.tsx(5 hunks)src/packages/badge/badge.tsx(4 hunks)src/packages/badge/demos/h5/demo3.tsx(1 hunks)src/packages/badge/demos/h5/demo8.tsx(1 hunks)src/packages/badge/demos/taro/demo3.tsx(1 hunks)src/packages/badge/demos/taro/demo8.tsx(1 hunks)src/packages/badge/doc.en-US.md(2 hunks)src/packages/badge/doc.md(2 hunks)src/packages/badge/doc.taro.md(2 hunks)src/packages/badge/doc.zh-TW.md(2 hunks)src/packages/badge/types.ts(1 hunks)src/styles/variables.scss(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (9)
- src/packages/badge/demos/h5/demo3.tsx
- src/packages/badge/demos/taro/demo3.tsx
- src/packages/badge/demos/taro/demo8.tsx
- src/packages/badge/demos/h5/demo8.tsx
- src/packages/badge/badge.taro.tsx
- src/packages/badge/types.ts
- src/packages/badge/doc.en-US.md
- src/packages/badge/doc.md
- src/packages/badge/doc.taro.md
🧰 Additional context used
🪛 GitHub Check: build
src/packages/badge/badge.tsx
[failure] 77-77:
Cannot find name 'color'.
[failure] 79-79:
Cannot find name 'color'.
🔇 Additional comments (7)
migrate-from-v2.md (1)
668-669: Badge 组件的属性更新看起来不错！
这些更改符合最佳实践：
- 新增
size属性增强了自定义能力 - 使用 CSS 变量控制背景色提高了样式的灵活性和可维护性
src/packages/badge/badge.scss (2)
55-63: 建议重新考虑字体设置
直接使用 font-family: 'JD' 可能存在兼容性问题：
- 如果 JD 字体未能成功加载，可能会影响数字显示
- 建议添加降级字体方案
82-96: 实现良好！
圆点尺寸的实现采用了合理的CSS变量，保持了良好的一致性和可维护性。
src/packages/badge/doc.zh-TW.md (1)
100-103: CSS 变量的默认值存在格式问题
在 --nutui-badge-color 的默认值中存在多余的右括号：$color-primary-text)，需要移除。
src/styles/variables.scss (3)
1587-1589: 徽标背景色和文字颜色变量更新
背景色和文字颜色现在分别使用了主题色 $color-primary 和 $color-primary-text，这样可以更好地与整体设计系统保持一致。
1593-1594: 徽标边框和尺寸调整
边框样式更新为使用 $color-primary-text，并设置了合适的圆角。最小宽度和内边距的调整提升了视觉表现。
Also applies to: 1596-1597
1598-1599: 图标相关样式优化
图标内边距和尺寸的调整使得图标在徽标中的展示更加协调。
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新特性
size属性，允许用户选择徽章的点大小（小、正常、大），默认为大。文档
修复