fix: check harmony adaptions #3005
Conversation
Walkthrough该 PR 主要涉及多个组件及示例的样式和结构调整。主要更改包括：在 config.json 中将 Skeleton 组件的 Changes
Sequence Diagram(s)sequenceDiagram
participant P as Progress 组件
participant H as harmony() 工具函数
P->>H: 调用 harmony()
H-->>P: 返回 true/false
alt harmony 返回 true
P->>P: 将宽度设置为 "95%"
else
P->>P: 将宽度设置为 "100%"
end
Possibly related PRs
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? 🪧 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 #3005 +/- ##
==========================================
Coverage 85.79% 85.79%
==========================================
Files 281 281
Lines 18527 18527
Branches 2810 2810
==========================================
Hits 15896 15896
Misses 2626 2626
Partials 5 5 ☔ View full report in Codecov by Sentry. |
![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 (11)
src/packages/avatar/demos/h5/demo2.tsx (1)
6-6: 建议统一样式值类型为了保持代码一致性，建议将 marginRight 的字符串值改为数字类型。
- const styles = { marginRight: '30px' } + const styles = { marginRight: 30 }Also applies to: 9-9
src/packages/icon/demos/taro/demo1.tsx (1)
8-10: 建议提取重复的样式对象当前实现中有多个重复的样式对象，建议提取为常量以减少代码重复。
const Demo1 = () => { + const iconStyle = { marginRight: 10 } return ( <Cell> - <Add color="red" style={{ marginRight: 10 }} /> - <UserAdd style={{ marginRight: 10 }} /> - <Dongdong style={{ marginRight: 10 }} /> + <Add color="red" style={iconStyle} /> + <UserAdd style={iconStyle} /> + <Dongdong style={iconStyle} /> <Minus /> </Cell> ) }src/packages/avatar/demos/h5/demo3.tsx (1)
6-6: 建议统一样式值类型为了保持代码一致性，建议将 marginRight 的字符串值改为数字类型。同时，Avatar 组件的属性格式建议保持一致。
- const styles = { marginRight: '30px' } + const styles = { marginRight: 30 } - <Avatar - src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png" - style={styles} - /> + <Avatar src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png" style={styles} />Also applies to: 9-14
src/packages/avatar/demos/taro/demo3.tsx (1)
6-14: 样式提取和应用符合最佳实践！将重复的样式提取到一个常量中是个好习惯，可以提高代码的可维护性。不过建议考虑以下优化：
- 可以将这个通用样式提升到一个共享的样式文件中，因为它在多个 demo 文件中都被使用。
src/packages/avatar/demos/taro/demo4.tsx (1)
7-15: 样式应用合理，但建议保持一致性！当前实现中只对第一个 Avatar 应用了 marginRight 样式。考虑到用户体验的一致性，建议：
- 对第二个 Avatar 也应用相同的间距样式，除非有特定的设计要求
src/packages/avatar/demos/taro/demo1.tsx (1)
5-12: 样式提取合理，但建议优化图片 URL 的使用！样式常量的提取和应用符合最佳实践。但是注意到：
- 相同的图片 URL 被重复使用，建议将其提取为常量
建议这样修改：
const Demo1 = () => { const styles = { marginRight: 30 } + const avatarUrl = 'https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png' return ( <Cell className="cell-avatar" align="flex-end"> <Avatar size="60" - src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png" + src={avatarUrl} style={styles} />src/packages/skeleton/demos/taro/demo1.tsx (1)
2-2: 结构优化：使用 Cell 组件统一布局代码实现清晰，使用 Cell 组件作为容器来统一布局是个不错的改进。不过建议考虑将内联样式抽离为统一的样式常量，以提高代码的可维护性。
建议将样式抽离为常量：
+const cellStyle = { display: 'block', paddingTop: '3px' } const Demo1 = () => { return ( - <Cell style={{ display: 'block', paddingTop: '3px' }}> + <Cell style={cellStyle}> <Skeleton animated /> </Cell> ) }Also applies to: 5-9
src/packages/skeleton/demos/h5/demo2.tsx (1)
2-2: 保持一致性：H5 版本实现与 Taro 版本保持一致代码结构清晰，与 Taro 版本保持了一致的实现方式。同样建议将内联样式抽离为常量。另外，
rows和title属性的使用恰当，展示了更复杂的骨架屏场景。建议将样式抽离为常量：
+const cellStyle = { display: 'block', paddingTop: '3px' } const Demo2 = () => { return ( - <Cell style={{ display: 'block', paddingTop: '3px' }}> + <Cell style={cellStyle}> <Skeleton rows={3} title animated /> </Cell> ) }Also applies to: 5-9
src/packages/skeleton/demos/h5/demo4.tsx (1)
2-2: 主题定制：通过 ConfigProvider 自定义样式代码展示了如何使用 ConfigProvider 进行主题定制，实现方式合理。建议将主题配置抽离为常量，以便于维护和复用。
建议将样式和主题配置抽离为常量：
+const cellStyle = { display: 'block' } +const customTheme = { + nutuiSkeletonLineBorderRadius: '10px', +} const Demo4 = () => { return ( - <Cell style={{ display: 'block' }}> + <Cell style={cellStyle}> - <ConfigProvider - theme={{ - nutuiSkeletonLineBorderRadius: '10px', - }} - > + <ConfigProvider theme={customTheme}> <Skeleton rows={3} animated /> </ConfigProvider> </Cell> ) }Also applies to: 6-14
src/packages/skeleton/demos/taro/demo4.tsx (1)
2-2: 跨平台一致性：Taro 版本与 H5 版本保持一致代码实现与 H5 版本完全一致，这种跨平台的一致性有助于降低维护成本。同样建议将样式和主题配置抽离为常量。
建议将样式和主题配置抽离为常量：
+const cellStyle = { display: 'block' } +const customTheme = { + nutuiSkeletonLineBorderRadius: '10px', +} const Demo4 = () => { return ( - <Cell style={{ display: 'block' }}> + <Cell style={cellStyle}> - <ConfigProvider - theme={{ - nutuiSkeletonLineBorderRadius: '10px', - }} - > + <ConfigProvider theme={customTheme}> <Skeleton rows={3} animated /> </ConfigProvider> </Cell> ) }Also applies to: 6-14
src/packages/skeleton/demos/taro/demo5.tsx (1)
29-50: 优化了骨架屏内容的结构和样式
- 使用 flex 布局优化了内容排列
- 通过 harmony() 函数适配不同平台的宽度
- 改进了文本内容的组织方式
建议考虑将重复的样式值提取为常量，以提高可维护性。
+ const AVATAR_SIZE = '50' + const CONTENT_MARGIN = 20 + const DESCRIPTION_MARGIN = 10 + const getDescriptionWidth = () => harmony() ? '80%' : '100%' <Avatar className="nut-skeleton-content-avatar" - style={{ marginRight: 20 }} + style={{ marginRight: CONTENT_MARGIN }} - size="50" + size={AVATAR_SIZE} src="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png" /> // ... <View - style={{ marginTop: 10, width: harmony() ? '80%' : '100%' }} + style={{ marginTop: DESCRIPTION_MARGIN, width: getDescriptionWidth() }} >
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (34)
src/config.json(1 hunks)src/packages/avatar/demo.scss(0 hunks)src/packages/avatar/demos/h5/demo1.tsx(1 hunks)src/packages/avatar/demos/h5/demo2.tsx(1 hunks)src/packages/avatar/demos/h5/demo3.tsx(1 hunks)src/packages/avatar/demos/h5/demo4.tsx(1 hunks)src/packages/avatar/demos/h5/demo5.tsx(1 hunks)src/packages/avatar/demos/taro/demo1.tsx(1 hunks)src/packages/avatar/demos/taro/demo2.tsx(1 hunks)src/packages/avatar/demos/taro/demo3.tsx(1 hunks)src/packages/avatar/demos/taro/demo4.tsx(1 hunks)src/packages/avatar/demos/taro/demo5.tsx(1 hunks)src/packages/hoverbutton/demos/taro/demo6.tsx(0 hunks)src/packages/icon/demo.taro.tsx(0 hunks)src/packages/icon/demos/taro/demo1.tsx(1 hunks)src/packages/icon/demos/taro/demo2.tsx(1 hunks)src/packages/icon/demos/taro/demo4.tsx(1 hunks)src/packages/icon/demos/taro/demo5.tsx(1 hunks)src/packages/icon/demos/taro/demo6.tsx(1 hunks)src/packages/icon/demos/taro/demo7.tsx(1 hunks)src/packages/progress/demos/taro/demo6.tsx(3 hunks)src/packages/skeleton/demo.taro.tsx(1 hunks)src/packages/skeleton/demo.tsx(1 hunks)src/packages/skeleton/demos/h5/demo1.tsx(1 hunks)src/packages/skeleton/demos/h5/demo2.tsx(1 hunks)src/packages/skeleton/demos/h5/demo3.tsx(1 hunks)src/packages/skeleton/demos/h5/demo4.tsx(1 hunks)src/packages/skeleton/demos/h5/demo5.tsx(2 hunks)src/packages/skeleton/demos/taro/demo1.tsx(1 hunks)src/packages/skeleton/demos/taro/demo2.tsx(1 hunks)src/packages/skeleton/demos/taro/demo3.tsx(1 hunks)src/packages/skeleton/demos/taro/demo4.tsx(1 hunks)src/packages/skeleton/demos/taro/demo5.tsx(2 hunks)src/packages/swiper/demos/taro/demo5.tsx(1 hunks)
💤 Files with no reviewable changes (3)
- src/packages/icon/demo.taro.tsx
- src/packages/avatar/demo.scss
- src/packages/hoverbutton/demos/taro/demo6.tsx
✅ Files skipped from review due to trivial changes (8)
- src/packages/avatar/demos/h5/demo4.tsx
- src/packages/icon/demos/taro/demo4.tsx
- src/packages/icon/demos/taro/demo2.tsx
- src/packages/icon/demos/taro/demo7.tsx
- src/packages/icon/demos/taro/demo6.tsx
- src/packages/avatar/demos/h5/demo1.tsx
- src/packages/avatar/demos/h5/demo5.tsx
- src/packages/icon/demos/taro/demo5.tsx
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (16)
src/packages/avatar/demos/taro/demo2.tsx (1)
6-6: 代码实现正确样式值使用数字类型是符合最佳实践的，实现方式恰当。
Also applies to: 9-9
src/packages/avatar/demos/taro/demo5.tsx (2)
2-3: 导入语句的修改正确！成功将注释掉的导入语句替换为实际的导入语句。
7-17: Badge 组件的使用和样式应用恰当！
- 使用 Fragment 包装多个 Badge 组件是正确的做法
- 样式应用保持了与其他 demo 的一致性
- Badge 组件的两种使用方式（value 和 dot）展示了良好的多样性
src/packages/swiper/demos/taro/demo5.tsx (2)
65-65: 箭头组件渲染逻辑优化移除了
harmony()条件检查，使箭头组件始终显示，这样简化了代码并提高了组件的一致性。Also applies to: 68-68
1-76: AI 摘要与实际代码不符AI 摘要提到了
Badge组件的导入和使用，但在实际代码中并未发现相关更改。这可能是由于摘要包含了其他文件的更改内容。Likely an incorrect or invalid review comment.
src/packages/skeleton/demos/h5/demo1.tsx (1)
2-2: 代码结构优化得当！使用 Cell 组件包装 Skeleton 组件的方式改善了布局结构，同时设置
display: 'block'确保了合适的间距。Also applies to: 5-9
src/packages/skeleton/demos/h5/demo3.tsx (1)
2-2: 请确认是否需要添加 display 样式其他 demo 文件中的 Cell 组件都设置了
display: 'block'样式，但此处没有设置。请确认是否需要保持一致性。- <Cell> + <Cell style={{ display: 'block' }}>Also applies to: 5-9
src/packages/skeleton/demos/taro/demo3.tsx (1)
2-2: 建议与 H5 版本保持一致此 Taro demo 的结构与对应的 H5 demo 相似，但也缺少了
display: 'block'样式设置。建议检查是否需要与 H5 版本保持一致的样式。- <Cell> + <Cell style={{ display: 'block' }}>Also applies to: 5-9
src/packages/skeleton/demos/taro/demo2.tsx (1)
2-2: 实现完整，结构合理！该 demo 完整实现了预期的改动：
- 正确引入了 Taro 版本的组件
- 使用 Cell 包装 Skeleton
- 设置了适当的 display 样式
Also applies to: 5-9
src/packages/progress/demos/taro/demo6.tsx (2)
4-4: 引入平台特定的样式处理通过
harmony()函数和progressStyle对象实现了进度条在不同平台上的宽度适配，这是一个很好的改进。Also applies to: 13-15
26-27: 统一使用 progressStyle在多个 Progress 组件中统一应用 progressStyle，提高了代码的一致性和可维护性。
Also applies to: 30-35
src/packages/skeleton/demos/h5/demo5.tsx (1)
1-1: 优化了骨架屏示例的布局结构使用 Cell 组件包装内容，并改进了内部结构：
- 添加了合适的样式和间距
- 优化了内容的层级结构
- 提升了示例的可读性
这些改变使示例更加规范和易于理解。
Also applies to: 14-41
src/packages/skeleton/demo.tsx (1)
39-47: 简化了主演示文件的结构移除了外层的 Cell 包装，使结构更加清晰。由于各个演示组件已经在其内部实现了 Cell 包装，这个改动避免了不必要的嵌套。
src/packages/skeleton/demos/taro/demo5.tsx (1)
1-1: 改进了布局结构和交互控件的位置
- 使用 Cell 组件提供了统一的容器
- 优化了 Switch 组件的布局位置
- 引入了平台适配功能
这些改进增强了组件的跨平台兼容性。
Also applies to: 4-4, 16-28
src/packages/skeleton/demo.taro.tsx (1)
44-44: 代码结构优化得当！移除了 Demo 组件外层的 Cell 包装，使代码结构更加简洁。这种改动不仅减少了不必要的嵌套层级，还能提高渲染性能。
Also applies to: 46-46, 48-48, 52-52, 56-56
src/config.json (1)
1015-1015: 配置更新合理！将 Skeleton 组件的
dd属性设置为true，表明该组件已准备好进行文档展示。这与其他成熟组件的配置保持一致。
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
src/packages/hoverbutton/demos/taro/demo5.tsx (1)
20-22: 建议优化重复的组件代码当前代码中重复使用了相同的
HoverButton组件。建议考虑以下优化方案：
- 使用数组 map 方法来渲染多个按钮
- 为每个按钮添加不同的功能或样式以区分它们
建议参考以下实现：
- <HoverButton icon={<Cart />} /> - <HoverButton icon={<Cart />} /> - <HoverButton icon={<Cart />} /> + {[1, 2, 3].map((index) => ( + <HoverButton + key={index} + icon={<Cart />} + onClick={() => console.log(`Button ${index} clicked`)} + /> + ))}src/packages/tabs/demos/taro/demo22.tsx (1)
5-5: 需要更新或移除 TODO 注释这个 TODO 注释提到鸿蒙系统对自定义变量的支持问题，建议：
- 明确说明具体的问题
- 提供临时解决方案
- 或者移除过时的注释
需要我帮助调研鸿蒙系统对自定义变量的最新支持情况吗？
src/packages/tabs/tabs.scss (1)
217-222: 鸿蒙平台样式适配的改进建议当前使用预处理器指令处理平台差异是可行的，但建议：
- 考虑使用 CSS 变量来处理平台差异，减少代码分支
- 添加注释说明不同平台下 padding 值差异的原因
- 确保这些值与设计规范保持一致
建议重构为：
.nut-tabs-ellipsis { // 使用 CSS 变量处理平台差异 padding-left: var(--nut-tabs-ellipsis-padding, 6px); /* #ifdef harmony */ --nut-tabs-ellipsis-padding: 12px; /* #endif */ }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
src/packages/avatar/demos/taro/demo5.tsx(1 hunks)src/packages/hoverbutton/demos/taro/demo3.tsx(1 hunks)src/packages/hoverbutton/demos/taro/demo5.tsx(1 hunks)src/packages/skeleton/demo.taro.tsx(1 hunks)src/packages/skeleton/demos/taro/demo4.tsx(1 hunks)src/packages/tabbar/demo.taro.tsx(1 hunks)src/packages/tabs/demos/taro/demo22.tsx(3 hunks)src/packages/tabs/tabs.scss(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- src/packages/tabbar/demo.taro.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
- src/packages/skeleton/demos/taro/demo4.tsx
- src/packages/avatar/demos/taro/demo5.tsx
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (5)
src/packages/hoverbutton/demos/taro/demo5.tsx (1)
7-9: 使用 pxTransform 进行单位转换是一个很好的改进！使用
pxTransform替代硬编码的像素值是一个很好的做法，这样可以确保在不同设备上有更好的适配性。src/packages/tabs/demos/taro/demo22.tsx (1)
3-3: 字体大小样式处理的优化使用
pxTransform统一处理像素值是个好的改进，这样可以：
- 确保在不同设备上的一致性
- 统一项目中的单位转换逻辑
- 更好地支持响应式设计
Also applies to: 15-15, 26-26
src/packages/hoverbutton/demos/taro/demo3.tsx (1)
13-19:❓ Verification inconclusive
验证移除 harmony() 检查的影响
移除了基于 harmony() 的条件渲染逻辑，这可能会影响在不同平台上的兼容性。建议确认此更改是否符合项目的跨平台支持策略。
此外，Tabbar 的实现看起来结构合理，所有图标保持了一致的大小（18）。
🏁 Script executed:
#!/bin/bash # 搜索项目中其他使用 harmony() 的示例 rg "harmony\(\)" -A 5Length of output: 35823
关于移除 harmony() 条件检查及 Tabbar 实现的审查
- 观察到在本文件中移除了基于
harmony()的条件渲染，导致 Tabbar 始终被渲染。在项目的其他部分，如多个 demo 文件中仍保留了该检查，用以调整平台特有的展示效果。- 请确认此改动是否符合项目整体的跨平台兼容性策略，尤其是在 harmony 系统上的展示是否保持预期效果。
- Tabbar 的结构与图标统一尺寸（18）目前没有问题，但建议开发者在所有目标平台上验证该更改是否会引起样式或交互上的异常。
src/packages/skeleton/demo.taro.tsx (2)
14-36: 翻译实现结构清晰！翻译实现采用了统一的命名规范，并为所有支持的语言提供了完整的翻译内容。
43-51:❓ Verification inconclusive
请验证移除 Cell 包装后的样式一致性
移除 Cell 包装组件简化了代码结构，但需要确保：
- Demo 组件之间的间距保持一致
- 组件布局没有发生意外改变
- 样式在不同设备上保持一致
请运行以下命令检查相关的样式文件，确保有适当的样式规则来维持布局：
🏁 Script executed:
#!/bin/bash # 检查相关样式文件中的间距和布局规则 rg -t scss "demo|skeleton" src/packages/skeleton/Length of output: 80
请重新验证移除 Cell 包装之后的样式一致性
目前我们需要确保：
- Demo 组件之间的间距保持一致
- 组件布局未出现非预期的改变
- 不同设备下样式稳定
请先运行上面的脚本以查看
src/packages/skeleton/目录下 scss 文件中是否存在与 demo 或 skeleton 相关的样式规则。如果该命令没有输出，请进行手动核查样式文件，确保上述条件满足，再进行后续确认。
🏁 Script executed:
[run_scripts] #!/bin/bash # 由于之前的命令未能识别 scss 文件类型，现添加自定义 scss 类型后重新搜索 demo 和 skeleton 相关样式规则 rg --type-add 'scss:*.scss' -t scss "demo|skeleton" src/packages/skeleton/Length of output: 1320
请手动确认 demo 组件的间距和布局保持一致
在移除 Cell 包装后，目前自动检索的 SCSS 样式主要显示在
src/packages/skeleton/skeleton.scss文件中与 skeleton 相关的规则，并未明确查找到针对 demo 组件的间距或布局控制。因此，请开发者重点手动核查以下几点：
- Demo 组件之间的间距是否一致；
- 组件整体布局（在 ScrollView 中展示时）是否未发生意外变化；
- 不同设备下页面的显示效果是否保持一致。
请在确认无异常后，更新相关文档或样式文件以确保最终视觉效果符合预期。
* perf: 删除无意义的调用 * fix: 走查鸿蒙问题修改 * fix: harmony adaptions * fix: check harmony adaption
2 participants
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
Style
New Features
Cell组件，改善了多个演示组件的布局。Refactor
pxTransform函数，动态调整了多个组件的样式设置。