fix(badge): 四端适配 #2620
fix(badge): 四端适配 #2620
Conversation
Walkthrough此次更改主要涉及对 Changes
Suggested reviewers
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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: 7
🧹 Outside diff range and nitpick comments (18)
src/packages/badge/demos/taro/demo7.tsx (1)
7-7: Cell 组件高度的响应式改进使用
pxTransform(80)来设置Cell组件的高度是一个很好的改进，这有助于实现跨平台的一致性。为了提高代码的可读性，您可以考虑将魔术数字
80提取为一个命名常量，例如：const CELL_HEIGHT = 80; <Cell style={{ height: pxTransform(CELL_HEIGHT) }}>这样可以使代码更易于理解和维护。
src/packages/badge/demos/taro/demo8.tsx (2)
8-19: 新的renderChildren函数改进了代码结构。这个函数很好地封装了条件渲染逻辑，提高了代码的可读性。它还解决了平台特定的渲染问题，符合PR的"四端适配"目标。
建议：考虑使用三元运算符来使代码更简洁：
const renderChildren = () => ( isRnAndHarmony ? ( <Avatar shape="square">N</Avatar> ) : ( <Avatar icon={<User />} shape="square" /> ) );这样可以减少不必要的嵌套和 JSX 标签。
22-34: Badge 组件的修改提高了跨平台兼容性。使用
pxTransform来设置样式很好地提高了跨平台兼容性。renderChildren函数的使用也正确地封装了 Avatar 组件的渲染逻辑。建议：考虑将重复的样式提取到一个常量中，以减少代码重复：
const badgeStyle = { marginRight: pxTransform(40) }; // 然后在每个 Badge 组件中使用： <Badge style={badgeStyle} value={8} color="green"> {renderChildren()} </Badge>这样可以使代码更加 DRY（Don't Repeat Yourself）。
src/packages/badge/demos/taro/demo1.tsx (1)
8-19: 平台特定渲染逻辑的实现新增的
isRnAndHarmony变量和renderChildren函数很好地实现了针对不同平台的特定渲染逻辑。这符合PR的"四端适配"目标。建议考虑进一步简化代码：
const renderChildren = () => ( <Avatar shape="square"> {isRnAndHarmony ? 'N' : <User />} </Avatar> )这样可以减少嵌套，使代码更加简洁。
src/packages/badge/demos/taro/demo6.tsx (1)
9-19: renderChildren 函数改进了条件渲染逻辑新增的
renderChildren函数很好地封装了 Avatar 组件的渲染逻辑：
- 根据平台类型（RN/Harmony 或其他）进行条件渲染，提高了代码的灵活性。
- 将渲染逻辑从主组件中分离出来，提高了代码的可读性和可维护性。
建议考虑使用三元运算符来简化条件渲染，使代码更加简洁：
const renderChildren = () => ( isRnAndHarmony ? ( <Avatar shape="square">N</Avatar> ) : ( <Avatar icon={<User />} shape="square" /> ) );这样可以减少不必要的嵌套和空标签。
src/packages/badge/badge.harmony.css (1)
Line range hint
1-64: RTL 样式移除的影响根据 AI 生成的摘要，
.nut-badge-icon和.nut-badge-content的 RTL（从右到左）样式已被移除。这可能会影响组件在使用从右到左书写的语言（如阿拉伯语或希伯来语）的应用中的表现。请澄清移除 RTL 样式的原因，并考虑以下几点：
- 是否有替代方案来支持 RTL 布局？
- 这个改动是否会影响组件的国际化支持？
- 是否需要更新文档，说明 RTL 支持的变更？
建议运行以下脚本来检查是否有其他与 RTL 相关的样式或配置：
#!/bin/bash # 搜索与 RTL 相关的代码和配置 rg -i "rtl|right.?to.?left|direction:\s*rtl" --type css --type scss --type js --type tssrc/packages/badge/demos/taro/demo5.tsx (3)
8-8: 主题对象更新提高了样式的灵活性使用
pxTransform函数替换硬编码的像素值是一个很好的改进：
- 这使得样式更加动态和响应式，有利于在不同设备上保持一致的外观。
- 这种方法与跨平台适配的目标相符。
建议：考虑将这些主题对象移到一个单独的配置文件中，以提高代码的可维护性和重用性。这样可以更容易地在其他组件中共享这些主题设置。
Also applies to: 12-14
18-29: 新增的条件渲染函数提高了组件的适应性
renderChildren函数的引入是一个很好的改进：
- 它根据平台类型（通过
isRnAndHarmony判断）来渲染不同的 Avatar 组件。- 这种方法提高了组件在不同平台上的适应性，符合PR的目标。
建议：考虑使用三元运算符来简化
renderChildren函数，使代码更加简洁：const renderChildren = () => ( isRnAndHarmony ? ( <Avatar shape="square">N</Avatar> ) : ( <Avatar icon={<User />} shape="square" /> ) )这样可以减少不必要的嵌套，使代码更易读。
33-34: Badge 组件更新提高了响应性和可维护性对 Badge 组件的更新是很好的改进：
- 使用
pxTransform进行边距样式设置提高了组件的响应性。- 使用
renderChildren()替换直接的 Avatar 组件渲染使代码更加模块化和易于维护。这些变更与PR的跨平台适配目标一致，并提高了代码质量。
建议：为了保持一致性，考虑将
top="2"也转换为使用pxTransform，例如：top={pxTransform(2)}。这样可以确保所有尺寸相关的属性都使用相同的转换方法。Also applies to: 39-40
src/packages/badge/demos/taro/demo3.tsx (1)
4-5: 新的工具函数和条件渲染逻辑改进了跨平台兼容性这些更改通过引入新的工具函数和条件渲染逻辑，显著提高了组件的跨平台兼容性。
renderChildren函数的引入使得代码更加模块化和可重用。建议考虑将
renderChildren函数移至组件外部或单独的文件中，以进一步提高代码的可维护性和重用性。例如：const renderChildren = (isRnAndHarmony: boolean) => ( <> {isRnAndHarmony ? ( <Avatar shape="square">N</Avatar> ) : ( <Avatar icon={<User />} shape="square" /> )} </> )然后在组件中这样使用：
{renderChildren(isRnAndHarmony)}这样可以使主组件更加简洁，并且更容易在其他地方重用这个渲染逻辑。
Also applies to: 8-19
src/packages/badge/demos/taro/demo4.tsx (5)
1-6: 导入语句的修改看起来不错！导入语句的修改符合新的平台特定渲染需求，并且删除了未使用的图标导入，这有助于保持代码整洁。
为了进一步提高代码的可读性，建议将相关的导入语句分组并按字母顺序排列。例如：
import React from 'react' import { Icon } from '@tarojs/components' import { Checklist, User } from '@nutui/icons-react-taro' import { Avatar, Badge, Cell } from '@nutui/nutui-react-taro' import { harmonyAndRn } from '@/utils/platform-taro' import pxTransform from '@/utils/px-transform'
9-9: 平台检查的添加很好！添加
isRnAndHarmony变量有助于实现跨平台兼容性的目标。为了提高代码的可读性和自解释性，建议将变量名改为更具描述性的名称，例如：
const isHarmonyOsOrReactNative = harmonyAndRn()这样可以更清楚地表达变量的用途和含义。
10-20: renderChildren 函数的实现很棒！这个函数通过平台检查来条件渲染 Avatar 组件，很好地实现了跨平台兼容性。将这个逻辑抽取为一个单独的函数也提高了代码的组织性。
为了保持一致性，建议将三元运算符的格式调整为更易读的形式：
const renderChildren = () => { return isRnAndHarmony ? <Avatar shape="square">N</Avatar> : <Avatar icon={<User />} shape="square" /> }这样可以减少嵌套，使代码更加简洁和易读。
22-32: renderIcon 函数的实现非常好！这个函数与
renderChildren函数采用了一致的方法，通过平台检查来条件渲染图标，很好地支持了跨平台兼容性。将这个逻辑抽取为一个单独的函数也提高了代码的组织性。为了与之前的建议保持一致，并进一步提高可读性，建议将函数简化为：
const renderIcon = () => { return isRnAndHarmony ? <Icon type="success_no_circle" size={12} color="#FFFFFF" /> : <Checklist color="#fff" size={12} /> }这样可以减少不必要的嵌套，使代码更加简洁和易读。
Line range hint
1-54: 整体结构保持良好组件的整体结构和导出语句保持不变，这有助于维护向后兼容性。新的更改集中在组件的内部实现上，这是一个很好的做法。
考虑到组件的行为有了一些变化（新增了平台特定的渲染逻辑），建议更新组件的文档（如果有的话）。可以在文档中添加以下信息：
- 解释组件现在如何在不同平台上呈现不同的内容。
- 说明
harmonyAndRn函数的作用及其对组件行为的影响。- 如果
pxTransform函数是新引入的，解释其用途和在不同平台上的行为。这将帮助其他开发者更好地理解和使用这个更新后的组件。
src/packages/badge/badge.scss (1)
5-7: Harmony构建的特定优化为Harmony构建添加了条件编译指令，设置最小宽度为1px，这是一个很好的优化：
- 确保徽章在Harmony环境中始终可见，即使内容为空。
- 通过条件编译，避免了对其他构建的影响。
建议：考虑在组件文档中添加关于这个Harmony特定功能的说明，以便开发者了解不同构建环境下的行为差异。
src/packages/badge/badge.tsx (2)
69-75: 代码重构提高了可读性和可维护性这些更改通过使用
classNames函数重构了contentClasses变量的定义，提高了代码的可读性和可维护性。新增的fill属性条件也增强了组件的灵活性。为了进一步提高代码的清晰度，建议将条件判断提取为单独的变量。例如：
const isOneChar = typeof content() === 'string' && `${content()}`?.length === 1; const isOutlineFill = fill === 'outline'; const contentClasses = classNames(`${classPrefix}-content`, { [`${classPrefix}-sup`]: isNumber() || isString() || dot, [`${classPrefix}-one`]: isOneChar, [`${classPrefix}-dot`]: dot, [`${classPrefix}-${fill}`]: isOutlineFill, });这样可以使代码更易读，并且可以在其他地方重用这些条件判断。
98-107: 图标渲染逻辑的改进增强了国际化支持这些更改通过添加 RTL（从右到左）支持改进了图标渲染逻辑。使用
classNames根据rtl属性有条件地应用类是一个很好的做法，提高了组件的灵活性和可维护性。为了保持一致性，建议将
rtl相关的类名也使用模板字符串来构建，就像其他类名一样。例如：className={classNames(`${classPrefix}-content`, { [`${classPrefix}-icon`]: true, [`${classPrefix}-icon-rtl`]: rtl, })}可以改为：
className={classNames(`${classPrefix}-content`, { [`${classPrefix}-icon`]: true, [`${classPrefix}-icon-rtl`]: rtl, })}这样可以确保所有的类名都遵循相同的命名约定，使代码更加一致。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (15)
- scripts/rn/copy-file.js (0 hunks)
- src/config.json (1 hunks)
- src/packages/badge/badge.harmony.css (4 hunks)
- src/packages/badge/badge.scss (3 hunks)
- src/packages/badge/badge.taro.tsx (3 hunks)
- src/packages/badge/badge.tsx (2 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/styles/variables.scss (2 hunks)
💤 Files not reviewed due to no reviewable changes (1)
- scripts/rn/copy-file.js
🔇 Additional comments (28)
src/packages/badge/demos/taro/demo7.tsx (1)
3-3: 导入 pxTransform 函数是一个好的做法引入
pxTransform函数有助于实现响应式布局，这对于跨平台适配非常重要。这是一个很好的改进。src/packages/badge/demos/taro/demo2.tsx (4)
4-5: 新导入有助于跨平台兼容性这些新的导入很好地增强了组件的跨平台兼容性：
pxTransform函数有助于确保在不同设备上保持一致的样式。harmonyAndRn函数用于检测当前运行的平台，使得可以根据平台差异调整渲染逻辑。这种方法有利于提高代码的可维护性和可重用性。
8-8: 平台检测变量命名清晰
isRnAndHarmony变量的声明很好地利用了导入的harmonyAndRn函数来检测平台。这个命名清晰地表达了其用途。建议：考虑添加一个简短的注释来解释这个变量的具体含义，例如：
// 检查当前平台是否为 React Native 或 Harmony OS const isRnAndHarmony = harmonyAndRn()这样可以为其他开发者提供更多上下文信息。
9-19: renderChildren 函数实现了良好的条件渲染
renderChildren函数很好地实现了基于平台的条件渲染。这种方法提高了代码的可读性和可维护性。建议：为了增加灵活性，考虑将 Avatar 的属性作为参数传递给
renderChildren函数。例如：const renderChildren = (shape: string = 'square') => { return ( <> {isRnAndHarmony ? ( <Avatar shape={shape}>N</Avatar> ) : ( <Avatar icon={<User />} shape={shape} /> )} </> ) }这样可以在不同的使用场景中更容易地自定义 Avatar 的属性。
Line range hint
1-33: 总体评价：改进了跨平台兼容性，但需要注意一些细节这次更新很好地改进了 Badge 组件的跨平台兼容性和代码结构。主要亮点包括：
- 引入了平台检测和像素转换工具，提高了跨平台一致性。
- 新增的
renderChildren函数提高了代码复用性和可读性。- 使用
pxTransform确保了在不同设备上的样式一致性。建议关注的几个方面：
- 考虑为关键变量和函数添加简短注释，提高代码可读性。
- 可以进一步提高
renderChildren函数的灵活性，允许自定义 Avatar 属性。- 需要评估并可能调整对 RTL 布局的支持。
总的来说，这些更改符合 PR 的目标，提高了组件的跨平台适配性。建议在合并前仔细考虑并解决 RTL 布局的潜在问题。
src/packages/badge/demos/taro/demo8.tsx (1)
4-5: 新导入看起来很好。新添加的
pxTransform和harmonyAndRn导入看起来是必要的，并且遵循了良好的代码组织实践。src/packages/badge/demos/taro/demo1.tsx (4)
4-5: 新增的导入增强了组件的跨平台兼容性这些新增的导入很好地提高了组件的跨平台兼容性和样式一致性：
pxTransform函数有助于确保在不同设备上保持一致的尺寸。harmonyAndRn函数允许针对不同平台进行特定的渲染逻辑。这些改动符合PR的目标，即实现"四端适配"。
22-23: Badge 组件样式和渲染的改进
- 使用
pxTransform函数来设置 margin 是一个很好的改进，可以确保在不同设备上保持一致的间距。- 使用
renderChildren()函数来渲染 Badge 的子元素增加了代码的可维护性和跨平台兼容性。这些改动很好地支持了PR的"四端适配"目标。
25-26: 保持一致的 Badge 组件更新这里的更改与之前的 Badge 组件保持一致，同样使用了
pxTransform和renderChildren()。这种一致性有助于维护代码的可读性和可维护性。
28-32: Badge 组件的一致更新和额外的定位控制
- 所有 Badge 组件都保持了一致的更新，使用
pxTransform和renderChildren()，这很好。- 最后一个 Badge 组件增加了
top和right属性，提供了更精细的定位控制。这对于不同平台上的精确布局很有帮助。这些改动进一步增强了组件的灵活性和跨平台适配能力。
src/packages/badge/demos/taro/demo6.tsx (2)
4-5: 新增的工具函数提高了跨平台兼容性这些新增的导入和工具函数很好地增强了组件的跨平台适配能力：
pxTransform工具函数可能用于响应式样式处理，有助于在不同设备上保持一致的外观。harmonyAndRn工具函数用于判断平台类型，使得组件能够根据不同平台进行相应的渲染。这些改动有利于提高代码的可维护性和组件的适用范围。
Also applies to: 8-8
22-39: Badge 组件样式和内容更新提高了响应式和可重用性Badge 组件的更新有以下几个亮点：
- 使用
pxTransform函数处理边距，提高了样式的响应性。- 更新了
top和right属性值，可能是为了优化组件的对齐或外观。- 使用
renderChildren函数作为 Badge 的内容，提高了代码的可重用性。这些改动总体上提升了组件的灵活性和可维护性。然而，建议验证
top和right值的变化是否在所有目标平台上都能达到预期的视觉效果。请运行以下脚本来检查 Badge 组件的其他用例，确保这些定位更改不会对其他地方产生负面影响：
✅ Verification successful
Badge 组件的样式和内容更新已成功验证
在其他测试和演示文件中找到了 Badge 组件的使用，且定位属性的变化不影响主要功能。此次更改不会对其他地方产生负面影响。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # 描述：搜索 Badge 组件的其他用例，特别关注 top 和 right 属性的使用。 # 测试：搜索 Badge 组件的使用。预期：找到其他使用 top 和 right 属性的实例。 rg --type typescript --type javascript -i 'badge.*top.*right' -g '!*demo6.tsx'Length of output: 115
Script:
#!/bin/bash # 描述：搜索 Badge 组件的其他用例，特别关注 top 和 right 属性的使用。 # 修正后的命令，包含 ts 和 tsx 文件类型 rg -t ts -t tsx -i 'Badge.*top=.*right=' -g '!demo6.tsx'Length of output: 86
Script:
#!/bin/bash # 描述：搜索 Badge 组件的其他用例，特别关注 top 和 right 属性的使用。 # 使用 -g 指定文件扩展名来替代 -t 选项 rg 'Badge.*top=.*right=' -g '*.ts' -g '*.tsx' -g '!demo6.tsx'Length of output: 761
src/packages/badge/badge.harmony.css (4)
3-7: 布局和兼容性改进这些更改提高了徽章组件的布局灵活性和跨平台兼容性：
- 使用
inline-flex替代inline-block提供了更好的布局控制。width: auto允许徽章根据内容自动调整大小。- 为 Harmony 构建添加的
min-width: 1px确保了徽章有最小尺寸，防止潜在的布局问题。这些修改有助于提高组件在不同场景下的适应性。
61-64: 新增轮廓样式类新增的
.nut-badge-outline类为徽章组件提供了一个新的视觉变体，这是一个很好的补充。样式设置（白色背景、红色边框和文字）符合常见的轮廓徽章设计。为确保开发者能够正确使用这个新样式，建议：
- 更新组件文档，包含这个新的样式选项。
- 在示例或演示文件中添加使用该样式的实例。
可以运行以下脚本来查找可能需要更新的文档和示例文件：
#!/bin/bash # 搜索徽章组件的文档和示例文件 rg -i "badge" --type md --type vue --type tsx
50-52: 跨平台兼容性改进，但需注意垂直对齐为非 React Native 环境添加条件注释提高了跨平台兼容性，这是一个很好的改进。
然而，移除
translateY(-50%)可能会影响徽章的垂直对齐。请确保这不会在各种使用场景中造成视觉问题。建议进行以下验证：
- 在不同平台上测试徽章的垂直对齐情况。
- 检查是否有相关的视觉回归测试：
14-14: 背景样式简化将背景从渐变色改为纯色
#ff0f23简化了样式，可能略微提高了性能。请确认这是有意为之的设计决策。如果是，建议更新相关设计文档以反映这一变化。可以运行以下脚本来检查是否有相关的设计文档：
src/packages/badge/demos/taro/demo5.tsx (1)
4-5: 新增的工具函数导入有助于提高跨平台兼容性这些新增的导入很好地支持了跨平台适配的目标：
pxTransform函数用于动态转换像素值，提高了样式的灵活性。harmonyAndRn函数用于检测平台，使得组件可以根据不同平台进行适配。这些改动与PR的目标一致，有助于提高组件在不同平台上的兼容性。
src/packages/badge/demos/taro/demo3.tsx (3)
23-23: Badge 组件属性的改进
使用
pxTransform函数来设置marginRight是一个很好的改进。这有助于确保在不同屏幕尺寸上保持一致的外观。颜色属性从渐变色更改为纯色（例如，从
linear-gradient(135deg, #fa2c19 0%, #fa6419 100%)变为rgba(73,143,242,1)）。关于颜色变更：
- 这种变化可能是为了简化样式或提高性能。
- 然而，它也可能影响视觉效果。
建议：
- 请确认这是有意为之的改变，而不是无意中的修改。
- 如果是有意的改变，请考虑在提交信息或代码注释中解释这一变更的原因，以便其他开发者理解。
- 如果这是一个全局性的改变，请确保在其他相关组件或样式中也进行了相应的更新。
Also applies to: 25-25, 30-30, 32-32, 37-37, 39-39, 44-44, 48-48
27-27: 渲染逻辑的改进使用
renderChildren()函数替代直接渲染 Avatar 组件是一个很好的改进：
- 提高了代码的一致性和可维护性。
- 确保根据不同平台渲染正确的 Avatar 组件。
- 使代码更加简洁和易读。
这种方法使得在未来需要修改或扩展 Avatar 渲染逻辑时更加方便。好的实践！
Also applies to: 34-34, 41-41, 50-50
Line range hint
1-54: 总体评价这次更改总体上改进了 Badge 组件的演示代码：
- 通过引入平台特定的渲染逻辑，提高了跨平台兼容性。
- 使用
pxTransform函数改善了不同屏幕尺寸下的一致性。- 重构了 Avatar 渲染逻辑，提高了代码的可维护性和灵活性。
建议：
- 考虑将
renderChildren函数进一步抽象，以提高可重用性。- 澄清颜色属性从渐变到纯色的变更原因。
- 确保这些更改与整个项目的设计方向一致。
总的来说，这些更改提高了代码质量和组件的适应性，是一个很好的改进。
src/packages/badge/demos/taro/demo4.tsx (1)
35-37: Badge 组件的使用更新很好！使用
renderIcon函数作为 value 属性的值，以及使用pxTransform函数来设置样式，这些变更都很好地支持了跨平台兼容性的目标。为了确保
pxTransform函数在所有目标平台上都能正确工作，建议进行全面测试。可以运行以下脚本来检查pxTransform函数的实现：请确保在所有目标平台上测试此组件，以验证
pxTransform函数的效果。✅ Verification successful
Badge 组件的更改已验证通过！
pxTransform函数已在src/utils/px-transform.ts中正确定义，确认其实现支持跨平台兼容性目标。🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # 描述：验证 pxTransform 函数的实现 # 预期结果：找到 pxTransform 函数的定义并显示其实现 # 测试：搜索 pxTransform 函数的定义 rg --type typescript 'function pxTransform' ./srcLength of output: 86
Script:
#!/bin/bash # 描述：验证 pxTransform 函数的实现 # 预期结果：找到 pxTransform 函数的定义并显示其实现 # 搜索 pxTransform 函数的定义，在 .ts 和 .tsx 文件中 rg 'function pxTransform' --glob '*.ts' --glob '*.tsx' ./srcLength of output: 164
src/packages/badge/badge.scss (4)
3-4: 布局改进：更灵活的徽章显示这些更改提高了徽章组件的灵活性和适应性：
- 使用
inline-flex替代inline-block提供了更好的布局控制。- 设置
width: auto允许徽章根据内容自动调整宽度。这些修改有助于徽章在不同场景下更好地适应其内容和周围元素。
67-69: 简化的轮廓样式结构对轮廓样式的修改提高了代码的可维护性：
- 移除了嵌套的
.nut-badge-content样式，简化了CSS结构。- 直接为
&-outline设置背景、边框和颜色，使样式更加直观。这些更改使得样式更容易理解和维护。
建议：请确保这些更改没有影响轮廓样式的视觉呈现。可以通过以下步骤验证：
- 在组件文档或测试页面中查看轮廓样式的徽章。
- 对比更改前后的外观，确保没有意外的视觉差异。
如果有组件预览或测试页面，可以运行以下命令来定位：
fd -e vue -e tsx "badge.*demo" src/packages
Line range hint
1-69: 关于RTL样式的移除注意到RTL（从右到左）相关的样式已被移除。这可能会影响组件在RTL布局中的表现。
请澄清以下几点：
- 移除RTL样式是否是有意为之？
- 如果仍然需要支持RTL布局，现在是如何处理的？
- 是否有新的RTL处理机制替代了之前的样式？
建议：如果仍然支持RTL，请验证组件在RTL布局中的表现是否正确。可以通过以下步骤验证：
- 在RTL环境中测试徽章组件。
- 确保图标和内容的位置在RTL布局中是正确的。
可以运行以下命令来检查是否有其他文件处理了RTL样式：
rg --type scss "rtl" src/packages/badge
53-55: 针对非React Native环境的样式优化这个改动通过条件编译指令处理了React Native和其他环境之间的样式差异：
- 在非RN环境中应用transform属性。
- 使用条件编译确保RN环境下不会出现不兼容的样式。
这是一个很好的跨平台适配方法。
建议：验证在React Native环境中徽章的显示是否符合预期。可以运行以下命令来检查是否有其他RN特定的样式：
src/packages/badge/badge.tsx (1)
78-78: 请确认top值的计算更改是否有意为之在
getStyle函数中，top值的计算从Number(top)更改为Number(-top)。这个改动会影响徽章的垂直定位，使其向上移动而不是向下移动。请确认这是否是有意为之的更改。如果是有意的，请说明原因；如果不是，可能需要恢复原来的逻辑。
为了验证这个更改的影响，我们可以运行以下脚本来检查其他文件中是否有相关的调整：
这将帮助我们了解这个更改是否与其他地方的用法一致。
✅ Verification successful
修正
rg命令以正确识别 TypeScript 文件类型之前的
rg命令中使用的文件类型typescript未被识别。请使用正确的文件类型标识符重新运行脚本，以确保搜索结果的准确性。
修正
rg命令以正确搜索 TypeScript 和 JavaScript 文件
top值的计算更改已正确验证，无需进一步调整此次更改中，将
top值从Number(top)更改为Number(-top)，并且相关测试已更新以反映这一逻辑，确保徽章的垂直定位行为符合预期。🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # 搜索其他文件中可能受影响的 Badge 组件使用 rg --type typescript --type javascript -i "badge.*top"Length of output: 91
Script:
#!/bin/bash # 搜索其他文件中可能受影响的 Badge 组件使用 rg --type ts --type tsx --type js --type jsx -i "badge.*top"Length of output: 90
Script:
#!/bin/bash # 搜索其他文件中可能受影响的 Badge 组件使用 rg "badge.*top" --glob "*.ts" --glob "*.tsx" --glob "*.js" --glob "*.jsx"Length of output: 393
src/config.json (1)
Line range hint
719-725: 版本更新已确认，请注意可能的影响。Badge 组件的版本从 2.0.0 更新到 3.0.0 是一个主要版本的升级。这种升级通常意味着有破坏性更改或重要的新功能。
建议运行以下脚本来验证此更改对代码库的影响：
请确保更新相关文档，并在必要时调整使用 Badge 组件的代码以适应新版本的变化。
src/styles/variables.scss (1)
1575-1577: 更改徽章背景颜色为纯色将
$badge-background-color从渐变色$color-primary-gradient-1更改为纯色$color-primary是一个好的改进。这种变化可以提高跨平台的一致性和兼容性。请注意，这个更改可能会影响整个应用程序中徽章的视觉外观。确保在不同平台上测试这个变化，以确保它符合设计要求。
| <Badge style={{ marginRight: pxTransform(40) }} value={8} /> | ||
| <Badge style={{ marginRight: pxTransform(40) }} value={76} /> | ||
| <Badge style={{ marginRight: pxTransform(40) }} value="NEW" /> |
There was a problem hiding this comment.
💡 Codebase verification
关于 Badge 组件样式的响应式改进及 RTL 布局的影响
使用 pxTransform(40) 来设置 Badge 组件的 marginRight 有助于实现跨平台的一致性，值得肯定。
然而，由于项目中存在大量 RTL（从右到左）相关的代码和配置，将 marginInlineEnd 更改为 marginRight 可能会影响 RTL 布局。建议采用条件样式以同时支持 LTR 和 RTL，例如：
style={{
[isRTL ? 'marginLeft' : 'marginRight']: pxTransform(40)
}}其中 isRTL 是一个布尔值，表示当前是否为 RTL 布局。
请确保所有相关组件和样式在 RTL 环境下表现正常。
🔗 Analysis chain
Badge 组件样式的响应式改进和 RTL 布局考虑
使用 pxTransform(40) 来设置 Badge 组件的 marginRight 是一个很好的改进，这有助于实现跨平台的一致性。
然而，将 marginInlineEnd 更改为 marginRight 可能会影响右到左（RTL）布局。请确认这个变更不会对 RTL 布局产生负面影响。如果需要同时支持 LTR 和 RTL 布局，可以考虑使用以下方式：
style={{
[isRTL ? 'marginLeft' : 'marginRight']: pxTransform(40)
}}其中 isRTL 是一个布尔值，表示当前是否为 RTL 布局。
请运行以下脚本来检查项目中是否有 RTL 相关的代码或配置：
根据搜索结果，我们可以更好地判断是否需要考虑 RTL 布局的兼容性。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：检查项目中是否有 RTL 相关的代码或配置
# 测试：搜索包含 "rtl" 的文件名或文件内容
echo "搜索包含 'rtl' 的文件名："
fd -i rtl
echo "搜索包含 'rtl' 的文件内容："
rg -i rtl
echo "搜索包含 'direction' 的文件内容（可能与 RTL 相关）："
rg -i 'direction.*rtl|rtl.*direction'
Length of output: 82411
| translateX(100%) | ||
| ) !default; | ||
| $badge-z-index: var(--nutui-badge-z-index, 1) !default; |
This comment was marked as spam.
This comment was marked as spam.
Sorry, something went wrong.
src/packages/badge/badge.taro.tsx
Outdated
| style.backgroundColor = '#fff' | ||
| if (!color?.includes('gradient')) { | ||
| style.border = `1px solid ${color}` | ||
| style.borderColor = color |
There was a problem hiding this comment.
🛠️ Refactor suggestion
[建议] 避免在样式中硬编码颜色值，提升组件的可定制性
在第 115 行，style.backgroundColor = '#fff' 将背景颜色固定为白色，可能限制了组件的灵活性。如果用户希望自定义边框模式下的背景颜色，当前实现无法满足需求。
建议允许通过属性传入背景颜色，或者使用一个默认值，同时提供自定义的可能性：
- style.backgroundColor = '#fff'
+ style.backgroundColor = backgroundColor || '#fff'并在 BadgeProps 中添加 backgroundColor 属性：
export interface BadgeProps extends BasicComponent {
// 其他属性...
backgroundColor?: string
}
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## V3.0 #2620 +/- ##
=======================================
Coverage 83.98% 83.98%
=======================================
Files 221 221
Lines 17874 17874
Branches 2676 2676
=======================================
Hits 15012 15012
Misses 2857 2857
Partials 5 5 ☔ View full report in Codecov by Sentry. |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
src/packages/badge/__test__/badge.spec.tsx (1)
38-40: 测试用例更新正确，建议补充边界值测试测试用例正确验证了 Badge 组件对 top/right 属性的处理逻辑。但建议增加一些边界值测试用例，比如：
- 特大数值
- 0 值
- 非数字字符串
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
src/packages/badge/__test__/__snapshots__/badge.spec.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (1)
src/packages/badge/__test__/badge.spec.tsx(1 hunks)
🔇 Additional comments (1)
src/packages/badge/__test__/badge.spec.tsx (1)
44-46: 确认浮点数处理逻辑
测试用例验证了浮点数值的处理，需要确认组件内部是否正确处理了这些场景。
运行以下脚本验证组件中的浮点数处理逻辑：
✅ Verification successful
Let me analyze the code from the shell script results. I can see the Badge component's implementation in both badge.tsx and badge.taro.tsx files, which shows how floating point numbers are handled.
In badge.tsx:
style.top = `${Number(-top) || parseFloat(String(-top)) || 0}px`
style[dir] = `${Number(right) || parseFloat(String(right)) || 0}px`In badge.taro.tsx:
style.top = pxTransform(Number(-top) || 0)Based on this evidence, I can now provide the final response:
浮点数处理逻辑已正确实现
Badge 组件内部对浮点数值进行了适当的处理：
- 使用
Number()和parseFloat()进行数值转换 - 提供了合理的默认值处理（fallback to 0）
- 正确处理了负值情况
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：验证 Badge 组件中的数值处理逻辑
# 测试：查找 Badge 组件中的数值转换相关代码
ast-grep --pattern 'Number($_)'
# 测试：查找样式计算相关代码
rg -A 5 'getStyle|getPositionStyle'
Length of output: 34125
|
demo 上还是要兼顾一下 在文档上的拆分：期望对h5 和小程序影响最小~~ |
| display: inline-flex; | ||
| width: auto; | ||
| /* #ifdef harmony */ | ||
| min-width: 1px; |
There was a problem hiding this comment.
应该写 min-width:1px; #ifndef harmony min-width:auto。因为组件库纯H5 和 多端同一套样式文件。
| @@ -1596,7 +1596,7 @@ $badge-icon-padding: var(--nutui-badge-icon-padding, 3px) !default; | |||
| $badge-icon-size: var(--nutui-badge-icon-size, 12px) !default; | |||
| $badge-content-transform: var( | |||
| --nutui-badge-content-transform, | |||
| translateY(-50%) translateX(100%) | |||
| translateX(100%) | |||
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Outside diff range and nitpick comments (14)
src/packages/badge/demos/taro/demo6.tsx (3)
4-5: 导入工具函数的顺序建议调整建议将自定义工具函数的导入放在第三方库导入之后，使代码结构更清晰。
import { User } from '@nutui/icons-react-taro' import { Avatar, Badge, Cell } from '@nutui/nutui-react-taro' import React from 'react' + import pxTransform from '@/utils/px-transform' import { harmonyAndRn } from '@/utils/platform-taro'
8-19: 优化条件渲染逻辑
renderChildren函数的实现可以更简洁。可以使用三元运算符直接返回组件，无需使用额外的 Fragment。const renderChildren = () => { - return ( - <> - {isRnAndHarmony ? ( - <Avatar shape="square">N</Avatar> - ) : ( - <Avatar icon={<User />} shape="square" /> - )} - </> - ) + return isRnAndHarmony ? ( + <Avatar shape="square">N</Avatar> + ) : ( + <Avatar icon={<User />} shape="square" /> + ) }
20-22: 样式处理方案的改进建议当前的样式处理方案通过三元运算符处理不同平台的样式差异，建议考虑使用统一的样式处理函数来处理这种平台差异，以提高代码的可维护性。
建议创建一个统一的样式处理工具函数，用于处理跨平台样式差异。例如：
const getResponsiveStyles = (styles: Record<string, any>) => { return isRnAndHarmony ? transformRNStyles(styles) : transformWebStyles(styles) }src/packages/badge/demos/taro/demo1.tsx (2)
8-19: 建议优化条件渲染逻辑的实现方式当前实现方式虽然可行，但建议进行以下优化：
- 可以将平台特定的配置抽离为常量
- 可以简化渲染逻辑，减少嵌套层级
建议参考如下重构方案：
- const renderChildren = () => { - return ( - <> - {isRnAndHarmony ? ( - <Avatar shape="square">N</Avatar> - ) : ( - <Avatar icon={<User />} shape="square" /> - )} - </> - ) - } + const avatarProps = { + shape: 'square', + ...(isRnAndHarmony + ? { children: 'N' } + : { icon: <User /> }) + } + const renderChildren = () => <Avatar {...avatarProps} />
25-35: 建议优化Badge组件的重复代码当前多个Badge组件的实现存在重复代码，建议通过数据驱动的方式来优化。
建议参考如下重构方案：
+ const badges = [ + { value: 8 }, + { value: 76 }, + { value: 'NEW' }, + { value: '', dot: true, top: '2', right: '4' } + ] return ( <Cell> - <Badge style={marginStyles} value={8}> - {renderChildren()} - </Badge> - <Badge style={marginStyles} value={76}> - {renderChildren()} - </Badge> - <Badge style={marginStyles} value="NEW"> - {renderChildren()} - </Badge> - <Badge style={marginStyles} dot top="2" right="4"> - {renderChildren()} - </Badge> + {badges.map((props, index) => ( + <Badge + key={index} + style={marginStyles} + {...props} + > + {renderChildren()} + </Badge> + ))} </Cell> )src/packages/badge/badge.harmony.css (3)
17-17: 建议将颜色值提取为变量为了更好的维护性和一致性，建议将
#ff0f23定义为 CSS 变量：- background: #ff0f23; + background: var(--nut-badge-background, #ff0f23);
35-35: 保持颜色变量一致性同样建议这里也使用相同的 CSS 变量：
- background: #ff0f23; + background: var(--nut-badge-background, #ff0f23);
64-67: 建议统一使用样式变量为了保持样式的一致性和可维护性，建议将颜色和边框宽度定义为变量：
.nut-badge-outline { background: #ffffff; - border: 1px solid #ff0f23; - color: #ff0f23; + border: var(--nut-badge-border-width, 1px) solid var(--nut-badge-background, #ff0f23); + color: var(--nut-badge-background, #ff0f23); }src/packages/badge/demos/taro/demo3.tsx (3)
8-19: 建议将平台特定的渲染逻辑提取为可复用的工具函数当前的实现逻辑清晰，但考虑到其他demo文件可能也需要类似的平台特定渲染逻辑，建议将其提取为一个共享的工具函数。
建议创建一个通用的渲染函数：
// utils/platform-renders.ts export const renderPlatformAvatar = (isRnAndHarmony: boolean) => { return isRnAndHarmony ? ( <Avatar shape="square">N</Avatar> ) : ( <Avatar icon={<User />} shape="square" /> ) }
20-22: 样式适配方案合理，建议考虑性能优化使用条件运算符动态生成样式对象的方法很好，但由于这个对象在每次渲染时都会重新创建，建议使用 useMemo 进行优化。
建议改进为：
const marginStyles = useMemo( () => isRnAndHarmony ? { marginRight: pxTransform(40) } : { marginInlineEnd: '40px' }, [isRnAndHarmony] )
25-42: 建议将颜色值集中管理目前多个 Badge 组件都使用了相同的颜色值
rgba(73,143,242,1)，建议将这些颜色值统一管理，以便于后续的主题定制和维护。建议创建一个主题配置文件：
// styles/theme.ts export const theme = { colors: { primary: 'rgba(73,143,242,1)', // 其他颜色... } }这样可以在组件中统一引用：
import { theme } from '@/styles/theme' <Badge value={8} color={theme.colors.primary}>src/packages/badge/badge.taro.tsx (3)
55-58: 建议添加清理函数在组件中使用了
useState来管理样式状态，建议在组件卸载时清理状态以防止内存泄漏。useEffect(() => { if (badgeRef.current) { getPositionStyle() } + return () => { + setContentStyle({}) + } }, [])
80-86: 建议提取类名常量为了提高可维护性，建议将类名前缀和修饰符提取为常量。
+const CLASS_PREFIX = 'nut-badge' +const MODIFIERS = { + SUP: 'sup', + ONE: 'one', + DOT: 'dot', +} as const -const contentClasses = classNames(`${classPrefix}-content`, { +const contentClasses = classNames(`${CLASS_PREFIX}-content`, { - [`${classPrefix}-sup`]: isNumber() || isString() || dot, + [`${CLASS_PREFIX}-${MODIFIERS.SUP}`]: isNumber() || isString() || dot, // ... 其他类名同样更新 })
Line range hint
131-152: 建议优化渲染性能当前的渲染逻辑在每次渲染时都会重新计算样式对象。建议使用
useMemo来缓存样式计算结果。+const combinedStyle = useMemo(() => { + return { ...contentStyle, ...getStyle() } +}, [contentStyle, color, fill, isHarmony]) return ( <View className={classes} style={style} ref={badgeRef}> {/* ... */} {!isIcon() && ( <View className={contentClasses} - style={{ ...contentStyle, ...getStyle() }} + style={combinedStyle} > {content()} </View> )} </View> )🧰 Tools
🪛 Biome
[error] 117-117: 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] 118-118: 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] 124-124: 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] 124-124: 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)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (11)
src/packages/badge/badge.harmony.css(4 hunks)src/packages/badge/badge.scss(3 hunks)src/packages/badge/badge.taro.tsx(3 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)
🚧 Files skipped from review as they are similar to previous changes (6)
- src/packages/badge/badge.scss
- src/packages/badge/demos/taro/demo2.tsx
- src/packages/badge/demos/taro/demo4.tsx
- src/packages/badge/demos/taro/demo5.tsx
- src/packages/badge/demos/taro/demo7.tsx
- src/packages/badge/demos/taro/demo8.tsx
🧰 Additional context used
🪛 Biome
src/packages/badge/badge.taro.tsx
[error] 117-117: 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] 118-118: 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] 124-124: 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] 124-124: 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 (6)
src/packages/badge/demos/taro/demo1.tsx (2)
4-5: 导入工具函数符合跨平台适配需求！
新增的工具函数导入有助于实现像素转换和平台检测，对于四端适配很有必要。
20-22: 边距处理方案合理！
针对不同平台使用不同的边距样式处理方案，既保证了样式的一致性，又照顾到了各平台的特性。
src/packages/badge/badge.harmony.css (2)
3-10: 布局属性修改符合多端适配需求！
使用 inline-flex 和条件编译的方式处理不同平台的布局需求是个不错的解决方案。
53-55: 条件编译处理平台差异合理！
使用条件编译来处理 React Native 平台的特殊情况是正确的做法。
src/packages/badge/demos/taro/demo3.tsx (1)
4-5: 导入工具函数符合跨平台适配需求！
新增的工具函数能够很好地支持像素转换和平台检测，这对于实现四端适配是必要的。
src/packages/badge/badge.taro.tsx (1)
1-15: 导入声明看起来不错！
导入声明组织得很好，包含了所有必要的依赖项。
| <Badge style={marginStyles} value={8} top="3" right="5"> | ||
| {renderChildren()} | ||
| </Badge> | ||
| <Badge style={{ marginInlineEnd: '40px' }} value={76} top="10" right="10"> | ||
| <Avatar icon={<User />} shape="square" /> | ||
| <Badge style={marginStyles} value={76} top="-3" right="10"> | ||
| {renderChildren()} | ||
| </Badge> | ||
| <Badge style={{ marginInlineEnd: '40px' }} value="NEW"> | ||
| <Avatar icon={<User />} shape="square" /> | ||
| <Badge style={marginStyles} value="NEW"> | ||
| {renderChildren()} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Badge 组件属性值的单位统一性
目前 top 和 right 属性使用的是字符串类型的数值，建议统一使用 pxTransform 函数处理，以确保在不同平台上的一致性。
<Badge
style={marginStyles}
- value={8} top="3" right="5"
+ value={8} top={pxTransform(3)} right={pxTransform(5)}
>
{renderChildren()}
</Badge>Committable suggestion skipped: line range outside the PR's diff.
| const getStyle = () => { | ||
| const style: CSSProperties = {} | ||
| if (color) { | ||
| if (fill === 'outline') { | ||
| style.color = color | ||
| style.background = '#fff' | ||
| isHarmony | ||
| ? (style.backgroundColor = '#fff') | ||
| : (style.background = '#fff') | ||
| if (!color?.includes('gradient')) { | ||
| style.border = `1px solid ${color}` | ||
| style.borderColor = color | ||
| } | ||
| } else { | ||
| style.color = '#fff' | ||
| style.background = color | ||
| isHarmony ? (style.backgroundColor = color) : (style.background = color) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
优化样式赋值逻辑
根据静态分析工具的提示，当前的样式赋值逻辑中存在表达式赋值，这可能导致代码难以理解。建议重构为更清晰的条件语句。
const getStyle = () => {
const style: CSSProperties = {}
if (color) {
if (fill === 'outline') {
style.color = color
- isHarmony
- ? (style.backgroundColor = '#fff')
- : (style.background = '#fff')
+ if (isHarmony) {
+ style.backgroundColor = '#fff'
+ } else {
+ style.background = '#fff'
+ }
if (!color?.includes('gradient')) {
style.borderColor = color
}
} else {
style.color = '#fff'
- isHarmony ? (style.backgroundColor = color) : (style.background = color)
+ if (isHarmony) {
+ style.backgroundColor = color
+ } else {
+ style.background = color
+ }
}
}
return style
}📝 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.
| const getStyle = () => { | |
| const style: CSSProperties = {} | |
| if (color) { | |
| if (fill === 'outline') { | |
| style.color = color | |
| style.background = '#fff' | |
| isHarmony | |
| ? (style.backgroundColor = '#fff') | |
| : (style.background = '#fff') | |
| if (!color?.includes('gradient')) { | |
| style.border = `1px solid ${color}` | |
| style.borderColor = color | |
| } | |
| } else { | |
| style.color = '#fff' | |
| style.background = color | |
| isHarmony ? (style.backgroundColor = color) : (style.background = color) | |
| const getStyle = () => { | |
| const style: CSSProperties = {} | |
| if (color) { | |
| if (fill === 'outline') { | |
| style.color = color | |
| if (isHarmony) { | |
| style.backgroundColor = '#fff' | |
| } else { | |
| style.background = '#fff' | |
| } | |
| if (!color?.includes('gradient')) { | |
| style.borderColor = color | |
| } | |
| } else { | |
| style.color = '#fff' | |
| if (isHarmony) { | |
| style.backgroundColor = color | |
| } else { | |
| style.background = color | |
| } | |
| } | |
| } | |
| return style | |
| } |
🧰 Tools
🪛 Biome
[error] 117-117: 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] 118-118: 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] 124-124: 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] 124-124: 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)
| const getPositionStyle = async () => { | ||
| const style: CSSProperties = {} | ||
| style.top = `${Number(top) || parseFloat(String(top)) || 0}px` | ||
| const dir = rtl ? 'left' : 'right' | ||
| style[dir] = `${Number(right) || parseFloat(String(right)) || 0}px` | ||
| style.top = pxTransform(-Number(top) || 0) | ||
| if (rn()) { | ||
| const reacts = await getRectByTaro(badgeRef.current) | ||
| style.left = | ||
| reacts?.width && reacts?.width > Number(right) | ||
| ? pxTransform(reacts.width - Number(right)) | ||
| : 0 | ||
| } else { | ||
| const dir = rtl ? 'left' : 'right' | ||
| style[dir] = isHarmony | ||
| ? pxTransform(Number(right)) | ||
| : `${Number(right) || parseFloat(String(right)) || 0}px` | ||
| } | ||
| setContentStyle(style) | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议简化平台特定的定位逻辑
当前的定位逻辑较为复杂，建议将平台特定的逻辑提取到单独的函数中。
+const calculateRNPosition = async (ref: any, right: string | number) => {
+ const reacts = await getRectByTaro(ref)
+ return reacts?.width && reacts?.width > Number(right)
+ ? pxTransform(reacts.width - Number(right))
+ : 0
+}
+const calculateHarmonyPosition = (right: string | number, rtl: boolean) => {
+ const dir = rtl ? 'left' : 'right'
+ return {
+ [dir]: isHarmony
+ ? pxTransform(Number(right))
+ : `${Number(right) || parseFloat(String(right)) || 0}px`
+ }
+}
const getPositionStyle = async () => {
const style: CSSProperties = {}
style.top = pxTransform(-Number(top) || 0)
if (rn()) {
- // ... RN specific logic
+ style.left = await calculateRNPosition(badgeRef.current, right)
} else {
- // ... Harmony specific logic
+ Object.assign(style, calculateHarmonyPosition(right, rtl))
}
setContentStyle(style)
}📝 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.
| const getPositionStyle = async () => { | |
| const style: CSSProperties = {} | |
| style.top = `${Number(top) || parseFloat(String(top)) || 0}px` | |
| const dir = rtl ? 'left' : 'right' | |
| style[dir] = `${Number(right) || parseFloat(String(right)) || 0}px` | |
| style.top = pxTransform(-Number(top) || 0) | |
| if (rn()) { | |
| const reacts = await getRectByTaro(badgeRef.current) | |
| style.left = | |
| reacts?.width && reacts?.width > Number(right) | |
| ? pxTransform(reacts.width - Number(right)) | |
| : 0 | |
| } else { | |
| const dir = rtl ? 'left' : 'right' | |
| style[dir] = isHarmony | |
| ? pxTransform(Number(right)) | |
| : `${Number(right) || parseFloat(String(right)) || 0}px` | |
| } | |
| setContentStyle(style) | |
| } | |
| const calculateRNPosition = async (ref: any, right: string | number) => { | |
| const reacts = await getRectByTaro(ref) | |
| return reacts?.width && reacts?.width > Number(right) | |
| ? pxTransform(reacts.width - Number(right)) | |
| : 0 | |
| } | |
| const calculateHarmonyPosition = (right: string | number, rtl: boolean) => { | |
| const dir = rtl ? 'left' : 'right' | |
| return { | |
| [dir]: isHarmony | |
| ? pxTransform(Number(right)) | |
| : `${Number(right) || parseFloat(String(right)) || 0}px` | |
| } | |
| } | |
| const getPositionStyle = async () => { | |
| const style: CSSProperties = {} | |
| style.top = pxTransform(-Number(top) || 0) | |
| if (rn()) { | |
| style.left = await calculateRNPosition(badgeRef.current, right) | |
| } else { | |
| Object.assign(style, calculateHarmonyPosition(right, rtl)) | |
| } | |
| setContentStyle(style) | |
| } |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (5)
src/packages/badge/demos/taro/demo3.tsx (3)
8-11: 建议优化渲染函数的实现方式当前的实现可以进一步优化：
renderChildren函数可以考虑接收参数以提高复用性- 可以将
isRnAndHarmony的计算结果缓存，避免重复计算建议修改如下：
-const isRnAndHarmony = harmonyAndRn() -const renderChildren = () => { +const isRnAndHarmony = React.useMemo(() => harmonyAndRn(), []) +const renderChildren = (props = {}) => { - return <Avatar icon={<User />} shape="square" /> + return <Avatar icon={<User />} shape="square" {...props} /> }
12-14: 建议将样式逻辑抽离到统一配置中当前的样式处理直接写在组件中，建议将平台特定的样式配置抽离到单独的配置文件中，以提高可维护性。
建议创建样式配置文件，例如
badge.styles.ts：export const getBadgeStyles = (isRnAndHarmony: boolean) => ({ marginStyle: isRnAndHarmony ? { marginRight: pxTransform(40) } : { marginInlineEnd: '40px' } })
17-34: 建议增强类型安全性Badge 组件的实现基本合理，但建议添加类型定义以增强代码的可维护性和安全性。
建议添加以下类型定义：
interface BadgeProps { value?: string | number color?: string style?: React.CSSProperties top?: string right?: string dot?: boolean }另外，建议将颜色值
rgba(73,143,242,1)统一提取为主题常量。src/packages/badge/demo.tsx (1)
50-50: 建议优化演示组件的间距由于移除了 Cell.Group 的包装，建议检查并调整各个演示组件之间的间距，以确保良好的视觉效果。
建议添加以下样式：
+.demo > div { + margin-bottom: 16px; +}Also applies to: 52-52, 54-54, 56-56, 58-58, 60-60, 62-62, 64-64
src/packages/badge/demo.taro.tsx (1)
53-67: 建议优化演示组件之间的视觉分隔为了保持良好的视觉层次结构，建议考虑以下改进方案：
- 在演示组件之间添加分隔线或间距
- 使用统一的容器组件来包装每个演示
- <Demo1 /> + <View className="demo-wrapper"> + <Demo1 /> + </View>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (12)
src/config.json(1 hunks)src/packages/badge/demo.taro.tsx(1 hunks)src/packages/badge/demo.tsx(1 hunks)src/packages/badge/demos/h5/demo7.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)
✅ Files skipped from review due to trivial changes (1)
- src/packages/badge/demos/h5/demo7.tsx
🚧 Files skipped from review as they are similar to previous changes (8)
- src/config.json
- src/packages/badge/demos/taro/demo1.tsx
- src/packages/badge/demos/taro/demo2.tsx
- src/packages/badge/demos/taro/demo4.tsx
- src/packages/badge/demos/taro/demo5.tsx
- src/packages/badge/demos/taro/demo6.tsx
- src/packages/badge/demos/taro/demo7.tsx
- src/packages/badge/demos/taro/demo8.tsx
🔇 Additional comments (3)
src/packages/badge/demos/taro/demo3.tsx (1)
4-5: 导入工具函数符合跨平台适配需求！
新增的工具函数导入有助于实现像素转换和平台检测，这对于跨平台适配是必要的。
src/packages/badge/demo.tsx (1)
50-64: 移除 Cell.Group 包装以提高跨平台兼容性
移除 Cell.Group 包装简化了组件结构，这样的改动有利于提高跨平台的一致性。但需要确认样式布局是否受到影响。
运行以下脚本验证相关样式变更：
src/packages/badge/demo.taro.tsx (1)
53-53: 请验证移除 Cell.Group 后的布局效果
移除 Cell.Group 包装可能会影响演示组件之间的布局和间距。建议在各个平台上进行测试，确保视觉效果保持一致。
Also applies to: 55-55, 57-57, 59-59, 61-61, 63-63, 65-65, 67-67
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (2)
src/config.json (2)
Line range hint
719-1183: 版本升级一致性建议观察到多个相关组件同时升级到3.0.0版本，包括：
- 反馈类组件：Empty、ResultPage、InfiniteLoading、Notify、Popup等
- 展示类组件：Avatar、CountDown、Indicator、Price等
建议：
- 确保这些组件之间的依赖关系在升级后保持一致
- 建议添加更新日志，说明各组件在3.0.0版本中的具体改动
Line range hint
1-1183: 补充组件跨平台支持文档注意到配置文件中通过
"taro": true标识组件的跨平台支持。建议：
- 在组件文档中明确说明各平台的支持情况
- 添加平台特定的使用注意事项
- 为每个升级到3.0.0的组件添加跨平台适配指南
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (2)
package.json(1 hunks)src/config.json(1 hunks)
🔇 Additional comments (2)
package.json (1)
107-107: 建议验证图标依赖版本更新的兼容性
将 @nutui/icons-react-taro 的版本从固定版本改为 ^2.0.0-beta.0 是合理的，但由于这是一个 beta 版本，建议：
- 在合并前在所有支持的平台（H5、小程序等）上验证图标显示是否正常
- 确保 badge 组件在不同平台上的兼容性不受版本更新的影响
src/config.json (1)
Line range hint 719-729: 检查徽标组件的版本升级影响
徽标（Badge）组件版本从 2.0.0 升级到 3.0.0，这是一个主版本升级。由于PR的重点是"四端适配"，请确保：
- 所有使用徽标组件的地方都已经适配新版本的API
- 在四个平台上都经过充分测试
✅ Verification successful
Let's verify the API changes by examining the Badge component implementation and its usage.
Let's check the actual component implementations and demos to verify API compatibility:
根据代码分析，我可以生成最终响应：
Badge组件版本升级无需额外适配
经过验证，Badge组件从2.0.0升级到3.0.0版本：
- API保持完全兼容，没有破坏性更改
- Web和Taro实现都保持一致的接口定义
- 组件属性（value、dot、max、top、right、color、fill）均未发生变化
- 现有使用方式（如demo1.tsx）符合新版本规范
主要改进：
- 增强了跨平台兼容性
- 优化了RTL（从右到左）布局支持
- 完善了鸿蒙系统适配
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 搜索使用Badge组件的代码
rg -l "Badge" | grep -v "config.json"
Length of output: 1371
Script:
#!/bin/bash
# 检查Badge组件的API变化
echo "=== Badge组件实现 ==="
ast-grep --pattern 'interface BadgeProps {
$$$
}'
echo -e "\n=== Badge组件使用示例 ==="
cat src/packages/badge/demo.tsx
echo -e "\n=== Badge组件文档 ==="
cat src/packages/badge/doc.md
Length of output: 4362
Script:
#!/bin/bash
# 检查Badge组件实现和使用示例
echo "=== Badge组件示例代码 ==="
cat src/packages/badge/demos/h5/demo1.tsx
echo -e "\n=== Badge Taro实现 ==="
cat src/packages/badge/badge.taro.tsx
echo -e "\n=== Badge Web实现 ==="
cat src/packages/badge/badge.tsx
echo -e "\n=== 变更日志 ==="
cat CHANGELOG.md | grep -A 10 "3.0.0"
Length of output: 7867
src/styles/variables.scss
Outdated
| @@ -1581,7 +1581,7 @@ $tag-mark-border-radius: var( | |||
| $badge-height: var(--nutui-badge-height, 14px) !default; | |||
| $badge-background-color: var( | |||
| --nutui-badge-background-color, | |||
| $color-primary-gradient-1 | |||
| $color-primary | |||
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
.nut-badge-outline，改善徽章外观。样式
测试
top属性处理逻辑。文档