feat(Tabbar): harmony adaptation #2783
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 (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## V3.0 #2783 +/- ##
=======================================
Coverage 83.98% 83.98%
=======================================
Files 220 220
Lines 17881 17881
Branches 2676 2676
=======================================
Hits 15018 15018
Misses 2858 2858
Partials 5 5 ☔ View full report in Codecov by Sentry. 🚨 Try these New Features:
|
![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
🧹 Outside diff range and nitpick comments (4)
src/utils/add-color-for-harmony.ts (1)
14-14: 参数类型更改正确，但需要更新文档将
color参数设置为可选是一个很好的改进，增加了函数的灵活性。不过建议更新 JSDoc 文档以反映这个变化。建议按如下方式更新文档：
/** * 为支持 Harmony 的 React 元素添加颜色属性 * @param maybeElement - 要处理的 React 节点 - * @param color - 要添加的颜色值（如：'#ff0000'） + * @param color - [可选] 要添加的颜色值（如：'#ff0000'） * @returns 处理后的 React 节点 */src/packages/tabbaritem/tabbaritem.scss (1)
53-58: 建议优化条件样式复用图标的颜色设置逻辑与容器完全相同，建议考虑将重复的条件样式抽取为混入(mixin)以提高代码复用性。
建议添加以下混入：
@mixin harmony-color($color) { /* #ifdef harmony*/ color: $color; /* #endif*/ /* #ifndef harmony*/ color: inherit; /* #endif*/ }然后这样使用：
.nut-tabbar-item-icon-box { - /* #ifdef harmony*/ - color: $tabbar-active-color; - /* #endif*/ - /* #ifndef harmony*/ - color: inherit; - /* #endif*/ + @include harmony-color($tabbar-active-color); .nut-icon { - /* #ifdef harmony*/ - color: $tabbar-active-color; - /* #endif*/ - /* #ifndef harmony*/ - color: inherit; - /* #endif*/ + @include harmony-color($tabbar-active-color); } }src/packages/tabbaritem/tabbaritem.taro.tsx (1)
94-112: 建议重构重复的样式代码标题样式对象在有图标和无图标的情况下都重复定义了。建议提取共用样式以提高代码复用性。
建议应用以下改进：
+ const titleStyle = { + color: active ? ctx?.activeColor : ctx?.inactiveColor, + } return ( // ... {icon ? ( <> <Badge {...badgeProps}> <View className={boxPrefix}> {addColorForHarmony( icon, active ? ctx?.activeColor : ctx?.inactiveColor )} </View> </Badge> <View className={titleClass} - style={{ - color: active ? ctx?.activeColor : ctx?.inactiveColor, - }} + style={titleStyle} > {title} </View> </> ) : ( <Badge {...badgeProps}> <View className={titleClass} - style={{ - color: active ? ctx?.activeColor : ctx?.inactiveColor, - }} + style={titleStyle} > {title} </View> </Badge> )}src/config.json (1)
Line range hint
356-367: 注意 Tabbar 与 TabbarItem 组件版本不一致的问题父组件 Tabbar 升级到了 3.0.0 版本，但子组件 TabbarItem 仍然保持在 2.0.0 版本。这种版本不一致可能会导致兼容性问题。建议同步更新 TabbarItem 的版本。
{ "version": "3.0.0", "name": "Tabbar", ... }, { - "version": "2.0.0", + "version": "3.0.0", "name": "TabbarItem", ... },
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (4)
src/config.json(1 hunks)src/packages/tabbaritem/tabbaritem.scss(1 hunks)src/packages/tabbaritem/tabbaritem.taro.tsx(2 hunks)src/utils/add-color-for-harmony.ts(1 hunks)
🔇 Additional comments (5)
src/utils/add-color-for-harmony.ts (1)
Line range hint 14-20: 验证函数使用情况
由于 color 参数类型发生变化，建议验证所有调用此函数的地方是否需要适配。
运行以下脚本来检查函数的使用情况：
✅ Verification successful
Let me analyze the usage patterns more deeply by checking the type information of the parameters being passed:
函数类型变更验证完成，现有使用方式符合新类型定义
经过验证，addColorForHarmony 函数在代码库中有3处调用，均位于组件库中：
src/packages/tabbaritem/tabbaritem.taro.tsx中传递icon和条件颜色src/packages/pagination/pagination.taro.tsx中有两处调用，传递分页按钮内容和条件颜色
所有调用都符合新的类型定义：第一个参数为 ReactNode，第二个参数为可选的颜色字符串。现有代码不需要做任何适配修改。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：检查 addColorForHarmony 函数的所有调用位置
# 搜索所有调用 addColorForHarmony 的地方
rg -A 2 "addColorForHarmony\("
# 检查是否有直接导入
rg "import.*addColorForHarmony.*from"
Length of output: 1395
Script:
#!/bin/bash
# Check the implementation of TabBarItem and Pagination components
ast-grep --pattern 'interface $_ {
$$$
}' src/packages/tabbaritem/tabbaritem.taro.tsx src/packages/pagination/pagination.taro.tsx
# Check the actual implementation context of addColorForHarmony calls
rg -B 5 -A 5 "addColorForHarmony\(" src/packages/tabbaritem/tabbaritem.taro.tsx src/packages/pagination/pagination.taro.tsx
Length of output: 2823
src/packages/tabbaritem/tabbaritem.scss (1)
45-50: 条件样式实现正确
图标容器的颜色根据harmony平台进行了合理的条件判断，实现了在不同平台下的差异化样式控制。
src/packages/tabbaritem/tabbaritem.taro.tsx (2)
7-7: 导入语句正确添加
新增的 addColorForHarmony 工具函数导入位置恰当，使用了 @/ 别名路径。
87-92: 建议验证颜色和谐性适配的实现
图标渲染逻辑已更新为使用 addColorForHarmony，请确认：
- 颜色适配是否符合鸿蒙设计规范
- 在不同状态下的颜色过渡是否平滑
✅ Verification successful
Let me check the implementation of addColorForHarmony function to better understand the color harmony logic.
Let me check the actual implementation of the addColorForHarmony function to understand its color handling logic.
Let me check the platform-specific harmony detection implementation.
颜色和谐性适配实现已验证完成
addColorForHarmony 函数实现符合预期：
- 正确检测鸿蒙环境
- 为鸿蒙设备上的图标组件添加适当的颜色属性
- 在 TabBarItem 和 Pagination 等组件中得到一致应用
- 保持了与其他平台的兼容性
颜色状态切换逻辑合理：
- TabBarItem 在激活/未激活状态下使用上下文提供的对应颜色
- Pagination 在可用/禁用状态下使用恰当的颜色对比
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查其他组件是否也使用了相同的颜色处理方式
ast-grep --pattern 'addColorForHarmony($_, $_)'
Length of output: 1065
Script:
#!/bin/bash
# Search for addColorForHarmony function implementation
ast-grep --pattern 'function addColorForHarmony($$$)'
# Also check for any color-related utility functions
ast-grep --pattern 'function $name($$$) {
$$$
color
$$$
}'
# Search for color-related constants or configurations
rg -g '!*.{test,spec}.*' -i 'harmony.*color|color.*harmony'
Length of output: 2006
Script:
#!/bin/bash
# Get the content of add-color-for-harmony.ts
cat src/utils/add-color-for-harmony.ts
# Check for harmony detection utility
ast-grep --pattern 'function harmony($$$)'
Length of output: 655
Script:
#!/bin/bash
# Check the platform detection implementation
cat src/utils/platform-taro.ts
# Look for any harmony-related tests
rg -g '*.{test,spec}.*' 'harmony'
Length of output: 552
src/config.json (1)
Line range hint 356-367: 验证 Harmony 适配相关改动
根据 PR 的目标，这次改动是为了适配 Harmony。需要确保相关的样式和功能改动已经完全覆盖。
✅ Verification successful
Let me gather more specific information about the Harmony adaptations in the Tabbar component.
Harmony 适配已完成且实现正确
TabbarItem 组件已经完成了 Harmony 平台的适配：
- 样式文件中包含了 Harmony 平台特定的条件样式处理
- 使用了专门的
addColorForHarmony工具函数来处理图标颜色 - Taro 版本的实现中正确引用了 Harmony 相关的工具和适配逻辑
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：检查 Tabbar 相关文件中的 Harmony 适配改动
# 搜索 Tabbar 相关文件中的 Harmony 适配代码
rg -l "harmony" --glob "src/packages/tabbar*"
# 检查样式文件中的条件样式
rg -l "harmony" --glob "*.scss"
Length of output: 482
Script:
#!/bin/bash
# 检查 Tabbar 组件相关文件的具体内容
rg -p "harmony" src/packages/tabbaritem/tabbaritem.scss
# 检查 Tabbar 组件的主要实现文件
fd "tabbar" src/packages -t f -E "*.test.*" -E "*.md" --exec cat {}
# 检查是否有 Harmony 相关的条件判断
rg -p "@supports\s+\(\s*-harmony" src/packages/tabbaritem/
Length of output: 18278
Script:
#!/bin/bash
# 检查 Harmony 相关的工具函数
cat src/utils/add-color-for-harmony.ts
# 检查其他可能的 Harmony 相关适配代码
rg -p "harmony" src/packages/tabbar/
Length of output: 647
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
样式
harmony功能标志，条件性地调整了TabbarItem的样式。文档
addColorForHarmony函数的参数更新为可选，允许在不提供颜色值的情况下调用。