feat(actionsheet): harmony cpp adaption #2796
Conversation
Walkthrough此次更改主要集中在多个组件的版本升级和样式调整上。 Changes
Possibly related PRs
Suggested labels
Suggested reviewers
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: 1
🧹 Outside diff range and nitpick comments (14)
src/packages/actionsheet/demos/taro/demo4.tsx (1)
20-20: 组件替换实现恰当！将 span 替换为 View 组件：
- 符合 Taro 框架的最佳实践
- 与其他 demo 文件保持一致
- 有助于提高组件在不同平台的兼容性
src/packages/actionsheet/demos/taro/demo6.tsx (1)
25-25: 组件替换优化得当！将 span 替换为 View 组件是很好的改进：
- 符合 Taro 的跨平台组件规范
- 与其他 demo 文件保持一致
- 提升了组件在不同平台上的兼容性
src/packages/actionsheet/demos/taro/demo5.tsx (3)
1-1: 导入声明优化建议引入
pxTransform工具函数有助于实现响应式布局，这是一个很好的改进。建议考虑将所有工具函数的导入统一放在第三方库导入之后，以保持代码组织的一致性。import React, { CSSProperties, useState } from 'react' import { ActionSheet, Cell } from '@nutui/nutui-react-taro' import { View } from '@tarojs/components' + import pxTransform from '@/utils/px-transform'Also applies to: 4-4
8-12: 样式集中管理的改进将样式对象集中定义是一个很好的实践，提高了代码的可维护性。建议考虑以下优化：
- 使用更具描述性的变量名，如
contentStyle替代viewStyle- 考虑将这些样式提取到单独的样式文件中，特别是如果这些样式会在其他组件中复用
-const viewStyle: CSSProperties = { +const contentStyle: CSSProperties = { textAlign: 'left', paddingLeft: pxTransform(20), paddingTop: pxTransform(10), }
16-16: 组件结构优化将
span替换为View组件，并统一使用样式对象是正确的改进方向。不过建议添加适当的注释来解释这些选项的用途。-<View>自定义内容</View> +<View> + {/* 点击展示自定义内容面板 */} + 自定义内容 +</View> -<View style={viewStyle}>新建表格</View> -<View style={viewStyle}>新建文档</View> +{/* 自定义面板选项 */} +<View style={contentStyle}>新建表格</View> +<View style={contentStyle}>新建文档</View>Also applies to: 26-27
src/packages/actionsheet/demos/taro/demo1.tsx (1)
29-32: 建议统一使用 Taro 的样式单位代码结构清晰，使用 View 组件替换 span 是正确的做法。不过建议将内联样式抽离为独立的样式类，以提高代码的可维护性。
建议改为：
+import styles from './demo1.module.scss' // ... -<View style={{ marginLeft: pxTransform(10), color: '#999' }}> +<View className={styles.valueText}> {val} </View>然后在
demo1.module.scss中：.valueText { margin-left: 10px; color: #999; }src/packages/actionsheet/demos/taro/demo2.tsx (2)
27-27: 建议添加语义化的类名为了提高代码的可维护性和样式的重用性，建议为 View 组件添加具有语义的类名。
-<View>展示取消按钮</View> +<View className="demo-label">展示取消按钮</View>
28-30: 建议将内联样式迁移到样式文件中当前的内联样式可以移至独立的样式文件中，以提高代码的可维护性和重用性。
建议创建样式文件并应用如下更改：
-<View style={{ marginLeft: pxTransform(10), color: '#999' }}> +<View className="demo-value"> {val} </View>创建对应的样式文件
demo2.scss：.demo-value { margin-left: pxTransform(10); color: #999; }src/packages/actionsheet/demos/taro/demo3.tsx (1)
28-31: 优化视图结构和样式处理将 span 元素替换为 View 组件，并使用 pxTransform 处理边距，这些改动都符合 Taro 框架的最佳实践。建议考虑以下优化：
- 可以将样式抽取到独立的样式文件中
- 考虑使用 Taro 的主题变量来处理颜色值
建议这样重构：
- <View style={{ marginLeft: pxTransform(10), color: '#999' }}> + <View className='demo3-value'>然后在样式文件中添加：
.demo3-value { margin-left: var(--nutui-margin-xs); color: var(--nutui-gray-6); }src/packages/actionsheet/actionsheet.scss (2)
32-37: 建议优化样式继承结构当前
item-name类中的样式属性与父级完全相同。建议移除重复的样式定义，直接继承父级样式。建议修改如下：
&-name { - text-align: $actionsheet-item-text-align; - line-height: $actionsheet-item-line-height; - font-size: $font-size-base; - color: $actionsheet-item-color; }
46-52: 类名修改符合 BEM 规范将状态类从
&.danger和&.disabled改为&-danger和&-disabled的修改符合 BEM 命名规范，提高了代码的可维护性。不过建议考虑添加注释说明这些状态类的具体用途：
+ // 危险状态，用于展示删除等危险操作 &-danger { color: $actionsheet-item-danger; } + // 禁用状态，用于无法点击的选项 &-disabled { color: $color-text-disabled !important; cursor: not-allowed; }src/packages/actionsheet/actionsheet.tsx (1)
85-90: 建议优化类名的层级结构目前
statusClass被重复应用到了父元素和子元素上，这可能会导致：
- CSS 选择器的重复
- 样式继承的混乱
- 不必要的 DOM 属性
建议将状态类名只应用于父元素，然后通过 CSS 选择器控制子元素样式：
-<div className={`${classPrefix}-item-name ${statusClass}`}> +<div className={`${classPrefix}-item-name`}> {item[optionKey.name]} </div> -<div className={`${classPrefix}-item-description ${statusClass}`}> +<div className={`${classPrefix}-item-description`}> {item[optionKey.description]} </div>然后在 SCSS 中使用嵌套选择器：
.nut-actionsheet-item { &.nut-actionsheet-item-disabled { .nut-actionsheet-item-name, .nut-actionsheet-item-description { // disabled styles } } &.nut-actionsheet-item-danger { .nut-actionsheet-item-name, .nut-actionsheet-item-description { // danger styles } } }src/packages/actionsheet/actionsheet.taro.tsx (1)
82-82: 建议使用 classnames 库来处理类名组合当前的类名组合方式虽然可行，但使用
classnames库可以让代码更加简洁和健壮。建议这样重构：
- className={`${classPrefix}-item ${statusClass}`} + className={classNames(`${classPrefix}-item`, statusClass)}需要先引入：
import classNames from 'classnames';src/config.json (1)
Line range hint
1-1199: 建议完善组件文档配置文件中的多个组件进行了版本升级，建议：
- 更新每个升级组件的使用文档
- 补充新版本的示例代码
- 确保文档中的版本号与配置文件保持一致
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (11)
src/config.json(11 hunks)src/packages/actionsheet/actionsheet.scss(1 hunks)src/packages/actionsheet/actionsheet.taro.tsx(1 hunks)src/packages/actionsheet/actionsheet.tsx(1 hunks)src/packages/actionsheet/demos/taro/demo1.tsx(2 hunks)src/packages/actionsheet/demos/taro/demo2.tsx(2 hunks)src/packages/actionsheet/demos/taro/demo3.tsx(2 hunks)src/packages/actionsheet/demos/taro/demo4.tsx(2 hunks)src/packages/actionsheet/demos/taro/demo5.tsx(2 hunks)src/packages/actionsheet/demos/taro/demo6.tsx(2 hunks)src/packages/popup/popup.scss(0 hunks)
💤 Files with no reviewable changes (1)
- src/packages/popup/popup.scss
🔇 Additional comments (10)
src/packages/actionsheet/demos/taro/demo4.tsx (1)
3-3: 导入语句添加正确！
从 @tarojs/components 导入 View 组件符合 Taro 开发规范。
src/packages/actionsheet/demos/taro/demo6.tsx (1)
3-3: 导入变更符合 Taro 最佳实践！
从 @tarojs/components 导入 View 组件是符合 Taro 跨平台开发规范的做法。
src/packages/actionsheet/demos/taro/demo1.tsx (1)
4-4: 导入 pxTransform 工具函数符合 Taro 开发规范
引入 pxTransform 用于像素值转换是符合 Taro 最佳实践的做法，可以确保在不同设备上具有一致的显示效果。
src/packages/actionsheet/demos/taro/demo2.tsx (1)
4-4: 导入 pxTransform 工具函数符合最佳实践！
引入 pxTransform 工具函数有助于确保在不同设备上保持一致的像素单位转换。
src/packages/actionsheet/demos/taro/demo3.tsx (1)
4-4: 导入 pxTransform 工具函数以统一像素处理
引入 pxTransform 工具函数有助于在不同设备上保持一致的像素单位转换，这是一个很好的改进。
src/packages/actionsheet/actionsheet.scss (1)
42-43: 样式对齐优化符合预期
为描述文本添加的文本对齐和行高属性有助于保持组件的视觉一致性，这是个不错的改进。
src/packages/actionsheet/actionsheet.tsx (1)
78-78: 代码重构提高了可读性！
将状态类名的逻辑抽取到 statusClass 变量中是个很好的改进，这样可以：
- 减少代码重复
- 提高可维护性
- 使状态类名的应用更加统一
Also applies to: 81-81
src/packages/actionsheet/actionsheet.taro.tsx (1)
79-79: 代码重构改进了可读性！
将状态类名的逻辑整合到 statusClass 变量中是个很好的改进，使代码更加清晰和易于维护。
src/config.json (2)
108-108: 请验证组件版本升级的兼容性
多个组件从 2.0.0 升级到 3.0.0 版本，这是一个重大版本升级。建议：
- 确保所有升级组件的 breaking changes 已在迁移指南中说明
- 验证依赖这些组件的上层组件是否需要适配
Also applies to: 356-356, 367-367, 462-462, 473-473, 624-624, 708-708, 730-730, 905-905, 1005-1005
✅ Verification successful
Let me analyze the migration guide to understand the breaking changes. Let me generate a script to check the content.
根据迁移指南的内容，我可以生成最终的响应了。
组件版本升级已有明确的迁移指南
迁移指南中已详细说明了从 2.x 到 3.0.0 版本的所有变更：
- 所有组件的 breaking changes 都有清晰的文档说明
- 提供了 codemod 工具 @nutui/nutui-react-codemod 协助自动化升级
- 主题变量命名规范化，如 primary-color 更名为 color-primary
建议：
- 使用 codemod 工具进行自动化升级
- 对照迁移指南检查每个组件的变更
- 特别注意配置文件中涉及的组件属性名变更
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查是否存在迁移指南文档
fd -t f "migrate.*md|upgrade.*md|migration.*md"
# 搜索这些组件的使用情况
rg -l "Icon|Tabbar|TabbarItem|Checkbox|CheckboxGroup|Rate|ActionSheet|Dialog|AnimatingNumbers|ImagePreview"
Length of output: 20418
Script:
#!/bin/bash
# Check migration guide content for version 3.0.0 changes
cat migrate-from-v2.md
Length of output: 25470
990-991: 验证 CountDown 组件的 v14 标记
CountDown 组件新增了 "v14": true 属性，需要确认：
- v14 版本的功能特性是否已完整实现
- 是否需要在文档中说明 v14 版本的使用注意事项
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #2796 +/- ##
==========================================
Coverage 83.99% 83.99%
==========================================
Files 220 220
Lines 17885 17887 +2
Branches 2679 2678 -1
==========================================
+ Hits 15023 15025 +2
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 (2)
src/packages/actionsheet/__test__/actionsheet.spec.tsx (2)
66-68: 类名断言更新符合新的命名规范类名断言的更新与组件样式重构保持一致，采用了更规范的 BEM 命名方式。建议同时添加一个测试用例，验证当
danger属性为false时不应该包含nut-actionsheet-item-danger类。
106-108: 禁用状态类名断言更新合理类名更新保持了与危险状态相同的命名模式，有助于保持一致性。建议补充测试用例验证：
- 多个状态同时存在时的类名组合（如同时禁用且危险）
- 状态切换时类名的变化
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
"v14": true，可能引入特定功能。样式
测试