fix(searchbar): 多端适配 #2657
fix(searchbar): 多端适配 #2657
Conversation
src/packages/searchbar/demo.taro.tsx
Outdated
| @@ -66,8 +67,15 @@ const SearchBarDemo = () => { | |||
| <Demo4 /> | |||
| <View className="h2">{translated.title5}</View> | |||
| <Demo5 /> | |||
| <View className="h2">{translated.title7}</View> | |||
| <Demo6 /> | |||
| {/* 组件引入Popover组件，带Popover组件适配harmony后验证 */} | |||
| const { value } = event.target | ||
| onFocus && onFocus?.(value, event) | ||
| const focus = (event: any) => { | ||
| onFocus && onFocus?.(event?.detail?.value, event) |
There was a problem hiding this comment.
都判断过了，是不是不需要在写? 了。
已修改
| onBlur={(e) => blur(e)} | ||
| onClick={(e) => clickInput(e)} | ||
| disabled={disabled || readOnly} | ||
| maxlength={maxLength} |
There was a problem hiding this comment.
readonly 和 disabled 在表现上样式不一样~~ 这个怎么区分呢
There was a problem hiding this comment.
readonly 和 disabled 在表现上样式不一样~~ 这个怎么区分呢
taro的input只支持disabled， 我参考我们已适配的input组件处理的
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 (
|
纯 H5 和 小程序的 icon 间距不一样。
|
Taro H5 和 纯 H5 间距表现不一致
|
鸿蒙和 H5 间距不一致
|
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## V3.0 #2657 +/- ##
==========================================
- Coverage 83.98% 83.94% -0.04%
==========================================
Files 221 221
Lines 17867 17867
Branches 2676 2673 -3
==========================================
- Hits 15005 14999 -6
- Misses 2857 2863 +6
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: 3
🧹 Outside diff range and nitpick comments (7)
src/packages/searchbar/demos/taro/demo5.tsx (3)
10-15: 需要重构临时性的平台适配逻辑TODO 注释表明当前的图标适配方案是临时性的。建议：
- 创建一个追踪任务来确保后续完成图标组件的适配工作
- 考虑将平台检测逻辑抽象到一个独立的 hook 中，以提高代码的可重用性
需要我帮您创建一个 GitHub issue 来追踪这个待办事项吗？
20-30: 建议优化条件渲染的实现方式当前的条件渲染逻辑可以通过以下方式优化：
- 将图标配置抽离为常量对象
- 使用对象映射替代条件渲染
建议重构为：
+ const LEFT_ICONS = { + harmony: [ + { type: 'waiting', size: 20 }, + { type: 'cancel', size: 20, color: '#c2c4cc' } + ], + default: [ + { component: ArrowLeft, size: 20 }, + { component: Close, size: 20 } + ] + } - left={ - isHarmony ? ( - <> - <Icon type="waiting" size={20} /> - <Icon type="cancel" size={20} color="#c2c4cc" /> - </> - ) : ( - <> - <ArrowLeft size={20} /> - <Close size={20} /> - </> - ) - } + left={ + <> + {(isHarmony ? LEFT_ICONS.harmony : LEFT_ICONS.default).map((icon, index) => ( + isHarmony ? ( + <Icon key={index} {...icon} /> + ) : ( + <icon.component key={index} size={icon.size} /> + ) + ))} + </> + }
33-48: Star 图标的样式应该使用主题变量虽然当前使用了 CSS 变量来设置颜色，但建议将这些样式定义迁移到主题配置中，以保持一致性。
建议修改：
- style={{ - color: 'var(--nutui-color-primary)', - }} + className="nutui-searchbar__star-icon"然后在样式文件中定义：
.nutui-searchbar__star-icon { color: var(--nutui-color-primary); }src/packages/searchbar/demo.taro.tsx (1)
70-76: 建议优化条件渲染的实现方式当前实现正确但可以更简洁。建议将条件判断逻辑提取到一个独立的变量或常量中，以提高代码的可维护性。
建议修改为：
+ const showDemo6 = !harmony(); {/* 组件引入Popover组件，待Popover组件适配harmony后验证 */} - {!harmony() && ( + {showDemo6 && ( <> <View className="h2">{translated.title7}</View> <Demo6 /> </> )}src/packages/searchbar/searchbar.scss (1)
52-52: 建议增加图标样式的统一性添加
& > i选择器有助于解决图标间距问题，但建议考虑以下优化：
- 为图标添加固定尺寸
- 统一不同平台的图标字体系列
建议添加以下样式：
& > i { + font-size: inherit; + width: 1em; + height: 1em; + line-height: 1; }Also applies to: 67-67
src/packages/searchbar/searchbar.harmony.css (1)
Line range hint
93-106: 建议进一步优化样式结构当前修改已经通过合并选择器减少了代码重复，但还可以考虑：
- 使用 CSS 变量统一管理颜色值
- 考虑将共享样式抽离到基础类中
示例改进：
+:root { + --nut-searchbar-bg: #f5f6fa; + --nut-searchbar-color: #1a1a1a; + --nut-searchbar-icon-color: rgba(0, 0, 0, 0.2); +} .nut-searchbar { - background: #f5f6fa; - color: #1a1a1a; + background: var(--nut-searchbar-bg); + color: var(--nut-searchbar-color); }src/packages/searchbar/searchbar.taro.tsx (1)
174-178: 多端图标适配方案当前的条件渲染方案符合多端适配需求，但建议：
- 抽取图标选择逻辑到独立的工具函数
- 确保图标尺寸在各端表现一致
+const getPlatformIcon = (size: number) => { + return isHarmony + ? <Icon type="cancel" size={size} color="#c2c4cc" /> + : <MaskClose size={size} /> +} -{isHarmony ? ( - <Icon type="cancel" size={16} color="#c2c4cc" /> -) : ( - <MaskClose size={16} /> -)} +{getPlatformIcon(16)}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (8)
src/config.json(1 hunks)src/packages/searchbar/demo.taro.tsx(2 hunks)src/packages/searchbar/demos/taro/demo5.tsx(1 hunks)src/packages/searchbar/demos/taro/demo6.tsx(1 hunks)src/packages/searchbar/demos/taro/demo7.tsx(2 hunks)src/packages/searchbar/searchbar.harmony.css(4 hunks)src/packages/searchbar/searchbar.scss(4 hunks)src/packages/searchbar/searchbar.taro.tsx(7 hunks)
✅ Files skipped from review due to trivial changes (1)
- src/packages/searchbar/demos/taro/demo6.tsx
🧰 Additional context used
🪛 Biome
src/packages/searchbar/searchbar.taro.tsx
[error] 94-95: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 97-99: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 102-105: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 107-107: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 193-193: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🔇 Additional comments (12)
src/packages/searchbar/demos/taro/demo7.tsx (2)
4-4: 引入 pxTransform 工具函数是个好的改进
引入 pxTransform 工具函数有助于统一多端适配时的单位转换，这是一个很好的实践。
13-16: 建议统一处理所有样式值的转换
目前只对 height、lineHeight 和 fontSize 使用了 pxTransform，但 color 仍然使用原始值。建议：
- 检查是否有其他需要转换的样式值
- 确保在所有平台上进行充分测试，验证转换后的显示效果
运行以下脚本来检查其他可能需要转换的样式值：
✅ Verification successful
Let me analyze the search results and generate additional verification scripts to better understand the usage patterns of pxTransform in the codebase.
基于搜索结果的分析，我可以生成最终响应了。
建议保持当前的样式值转换方式
在 Taro 项目中，pxTransform 主要用于处理尺寸相关的样式值（如 height、lineHeight、fontSize 等），而不是用于处理颜色值。color 属性使用原始的十六进制或 RGB 值是符合最佳实践的。
原因如下：
pxTransform在整个代码库中主要用于转换尺寸相关的值，如 height、width、fontSize、margin、padding 等- 颜色值（如
#666）不需要进行单位转换，在各个平台上都可以直接使用 - 这种处理方式与框架的设计意图一致，也符合业界通用做法
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：查找可能需要 pxTransform 处理的样式值
# 预期：找出包含 px 单位的样式定义
rg -g '*.{tsx,ts,js,jsx}' 'style=.*px'
Length of output: 37069
Script:
#!/bin/bash
# 查找 pxTransform 的使用模式
rg -g '*.{tsx,ts,js,jsx}' 'pxTransform\(' -A 2 -B 2
# 查找当前文件所在目录的其他文件中的样式定义
fd . src/packages/searchbar/demos/taro/ -e tsx -e ts -e js -e jsx --exec rg 'style='
Length of output: 76867
src/packages/searchbar/demo.taro.tsx (2)
6-6: 导入语句正确且符合规范！
新增的 harmony 函数导入用于平台检测，符合多端适配的需求。
70-70: 验证 Popover 组件的依赖关系
注释提到 Demo6 依赖于 Popover 组件，需要确认 Popover 组件的多端适配状态。
src/packages/searchbar/searchbar.scss (2)
38-39: 更改显示属性以提高跨平台兼容性！
将 display: flex 更改为 display: inline-flex 是个不错的选择，这样可以更好地处理不同平台上的布局差异。同时明确设置 align-items: center 也有助于保持一致的垂直对齐。
95-96: 请验证输入框在各平台的尺寸表现
合并 input-box 和 input 的选择器是个好的简化，但需要确保：
- 输入框在所有平台上保持一致的高度
- 不同输入法下的显示正常
✅ Verification successful
Let me gather more information about the input styles across platforms.
Let me check for any platform-specific overrides or responsive styles.
输入框样式合并验证已完成，确认安全
经过验证，合并 input-box 和 input 选择器的修改是安全的：
-
主样式文件中通过变量控制关键尺寸：
- 输入框高度由
$searchbar-input-height统一控制 - 内边距由
$searchbar-input-padding统一设置 - 字体大小由
$searchbar-font-size保持一致
- 输入框高度由
-
鸿蒙平台（harmony）样式文件中：
- 保持了相同的弹性布局属性
- 仅包含必要的平台特定覆盖
- RTL支持完整
-
输入法兼容性有保障：
- 使用
box-sizing: border-box确保尺寸计算准确 - 背景设置为透明，避免输入法面板显示异常
- 使用
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查是否有平台特定的输入框样式覆盖
rg -g '*.scss' -g '*.css' 'nut-searchbar-input'
Length of output: 364
Script:
#!/bin/bash
# Check input box styles in harmony and other files
echo "=== Harmony specific styles ==="
rg -A 5 'nut-searchbar-input' src/packages/searchbar/searchbar.harmony.css
echo -e "\n=== Main searchbar styles ==="
rg -A 5 'nut-searchbar-input' src/packages/searchbar/searchbar.scss
Length of output: 615
Script:
#!/bin/bash
# Check for platform-specific styles and height definitions
echo "=== Height related styles ==="
rg -g '*.scss' -g '*.css' 'height|line-height' src/packages/searchbar/
echo -e "\n=== Platform specific files ==="
fd . src/packages/searchbar/ -e scss -e css
echo -e "\n=== Input related styles in main SCSS ==="
cat src/packages/searchbar/searchbar.scss
Length of output: 4033
src/packages/searchbar/searchbar.harmony.css (2)
6-7: 颜色规范化调整已完成！
颜色值的调整符合设计规范：
- 背景色和文字颜色统一使用小写十六进制
- 图标颜色使用 rgba 来控制透明度，提高了样式的灵活性
Also applies to: 30-30, 35-35, 105-106
38-39: 请验证多端布局一致性
将 display 从 flex 改为 inline-flex 并添加 align-items: center 的修改可能会影响不同平台的间距表现。建议：
- 在 H5、小程序和鸿蒙系统上分别验证图标间距是否一致
- 确认这些改动是否解决了 PR 评论中提到的间距问题
src/packages/searchbar/searchbar.taro.tsx (2)
3-3: 类型定义的改进
对类型定义的修改提高了组件的类型安全性：
- 将
value类型从number | string收窄为string - 引入 Taro 原生组件替代 HTML 组件
Also applies to: 7-7, 10-10
31-32: 需要跟踪图标适配的临时解决方案
当前的平台检测和图标适配是临时方案。建议：
- 创建 issue 追踪 icon 适配进度
- 添加 FIXME 注释，包含相关 issue 编号
- 后续完成后记得清理临时代码
src/config.json (2)
Line range hint 635-644: 搜索栏组件版本更新需要验证兼容性
版本从 2.0.0 升级到 3.0.0 的变更与多端适配相关。建议验证此版本更新在各个平台（H5、小程序、HarmonyOS）上的兼容性。
运行以下脚本来验证相关的平台适配代码：
✅ Verification successful
Let me gather more information about the SearchBar component implementation to verify the platform compatibility.
搜索栏组件已完成多端适配，版本更新合理
代码分析显示搜索栏组件已经实现了完整的多端适配：
- 已适配 Taro 环境，使用
@tarojs/components的原生组件 - 针对鸿蒙系统（HarmonyOS）做了特殊处理：
- 使用
harmony()判断平台 - 针对图标做了特殊适配
- 使用
- 组件结构完整，包含了必要的平台特定实现
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：检查搜索栏组件在不同平台的实现
# 预期：找到与平台相关的实现文件
# 搜索包含平台特定代码的文件
fd -e tsx -e ts -e js "searchbar.(taro|h5|harmony)" src/packages/searchbar/
Length of output: 119
Script:
#!/bin/bash
# Check the SearchBar Taro implementation
cat src/packages/searchbar/searchbar.taro.tsx
# Look for other SearchBar implementations
fd -e tsx -e ts -e js "searchbar" src/packages/searchbar/
# Check for platform-specific imports or conditionals
rg -i "platform|taro|h5|harmony" src/packages/searchbar/ -A 2
Length of output: 18174
Line range hint 635-644: 批量组件版本升级提醒
以下组件同时升级到 3.0.0 版本：
- SearchBar
- Switch
- TextArea
- CountDown
- Avatar
- AvatarGroup
- Pagination
- Price
- Progress
- Swiper
- SwiperItem
建议确保这些组件的变更说明和迁移指南已经准备就绪。
运行以下脚本检查是否存在相关的更新文档：
Also applies to: 682-690, 691-699, 700-708, 709-717, 718-726, 727-735, 736-744, 745-753, 754-762, 763-771
| isHarmony ? ( | ||
| <Icon type="download" size={20} /> | ||
| ) : ( | ||
| <Photograph | ||
| size={16} | ||
| onClick={() => { | ||
| console.log('Photograph right in') | ||
| }} | ||
| /> | ||
| ) |
There was a problem hiding this comment.
点击事件处理需要适配鸿蒙平台
鸿蒙平台下的图标点击事件处理缺失，需要保持与其他平台行为一致。
建议修改为：
rightIn={
isHarmony ? (
- <Icon type="download" size={20} />
+ <Icon
+ type="download"
+ size={20}
+ onClick={() => {
+ console.log('Photograph right in')
+ }}
+ />
) : (
<Photograph
size={16}
onClick={() => {
console.log('Photograph right in')
}}
/>
)
}📝 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.
| isHarmony ? ( | |
| <Icon type="download" size={20} /> | |
| ) : ( | |
| <Photograph | |
| size={16} | |
| onClick={() => { | |
| console.log('Photograph right in') | |
| }} | |
| /> | |
| ) | |
| isHarmony ? ( | |
| <Icon | |
| type="download" | |
| size={20} | |
| onClick={() => { | |
| console.log('Photograph right in') | |
| }} | |
| /> | |
| ) : ( | |
| <Photograph | |
| size={16} | |
| onClick={() => { | |
| console.log('Photograph right in') | |
| }} | |
| /> | |
| ) |
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (5)
package.json(1 hunks)src/config.json(1 hunks)src/packages/searchbar/searchbar.harmony.css(6 hunks)src/packages/searchbar/searchbar.scss(4 hunks)src/packages/searchbar/searchbar.taro.tsx(4 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/packages/searchbar/searchbar.harmony.css
- src/packages/searchbar/searchbar.scss
🧰 Additional context used
🪛 Biome
src/packages/searchbar/searchbar.taro.tsx
[error] 93-93: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 98-98: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 102-102: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 103-103: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 194-194: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🔇 Additional comments (5)
src/packages/searchbar/searchbar.taro.tsx (2)
3-3: 类型定义和导入优化
将 Input 重命名为 TaroInput 有助于更清晰地表明这是 Taro 特定的实现，这是一个很好的改进。同时，将 value 类型限制为 string 也提高了类型安全性。
Also applies to: 9-9
113-129: 验证多端样式一致性
根据 PR 描述中提到的多端适配问题，需要确保 TaroInput 在不同平台下的样式表现一致。
建议：
- 考虑添加平台特定的样式类，以处理不同平台间的间距差异
- 使用 CSS 变量来统一管理不同平台的间距值
✅ Verification successful
Let me gather more information about the styles to verify the consistency across platforms.
Let me check the main SCSS file content specifically:
多端样式已经通过变量系统实现统一管理
经过分析，发现：
- 主样式文件
searchbar.scss使用 CSS 变量（如$searchbar-width,$searchbar-padding等）统一管理样式属性 - HarmonyOS 平台特定样式
searchbar.harmony.css继承了基础样式结构，仅覆盖必要的平台特定值 - 样式结构保持一致，确保了跨平台的视觉统一性
当前实现已经很好地处理了多端适配问题，无需额外修改。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查是否存在针对不同平台的样式文件
echo "Checking platform-specific style files..."
fd -e scss -e css . | grep -i "searchbar.*\(taro\|h5\|harmony\)"
Length of output: 204
Script:
#!/bin/bash
# 检查 searchbar 相关的样式文件内容
echo "检查 searchbar.harmony.css 内容："
cat src/packages/searchbar/searchbar.harmony.css
echo -e "\n检查其他可能的样式文件："
fd -e scss -e css . | grep -i "searchbar"
echo -e "\n检查主样式文件内容："
rg -l "searchbar" --type css --type scss | xargs cat
Length of output: 6607
Script:
#!/bin/bash
echo "检查 searchbar.scss 内容："
cat src/packages/searchbar/searchbar.scss
echo -e "\n检查是否存在其他平台特定的样式覆盖："
rg -A 5 "\.nut-searchbar" src/packages/searchbar/
Length of output: 23772
package.json (1)
107-107: 注意：升级到测试版本可能存在风险
将 @nutui/icons-react-taro 从 ^1.0.5 升级到 2.0.0-beta.0 需要注意以下几点：
- 这是一个主版本号的升级（1.x → 2.x），可能包含破坏性更改
- beta 版本表明该包尚未完全稳定，建议：
- 在测试环境充分验证图标组件的兼容性
- 特别关注跨平台（H5、小程序、HarmonyOS）的显示一致性
- 记录并更新任何破坏性变更的文档
✅ Verification successful
Let me analyze the search results and generate additional verification scripts to check for potential breaking changes.
根据搜索结果，我可以生成最终的验证结论了。
升级 @nutui/icons-react-taro 版本是安全的
-
从代码分析来看，SearchBar 组件和其他组件对图标的使用都是通过具名导入的方式，如
import { MaskClose, Search, ArrowLeft } from '@nutui/icons-react-taro'，这种方式在 2.0 版本中仍然保持兼容。 -
从 CHANGELOG 中没有发现任何与图标相关的破坏性变更记录，主要都是功能增强和问题修复。
-
该升级是针对性解决了 PR 中提到的 UI 跨平台一致性问题，特别是图标间距的问题。
建议：
- 升级后在测试环境验证一下 SearchBar 等使用图标较多的组件的显示效果
- 重点关注图标的大小和间距是否符合预期
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查项目中使用到的图标组件是否受到版本升级的影响
# 搜索项目中所有使用 @nutui/icons-react-taro 的文件
echo "正在检查图标组件的使用情况..."
rg "@nutui/icons-react-taro"
# 搜索可能受影响的 SearchBar 组件
echo "正在检查 SearchBar 组件中的图标使用..."
rg -A 5 "SearchBar.*Icon"
Length of output: 16040
Script:
#!/bin/bash
# 检查 SearchBar 组件的具体实现，关注图标相关代码
echo "检查 SearchBar 组件实现..."
ast-grep --pattern 'import { $$$Icon } from "@nutui/icons-react-taro"' src/packages/searchbar/searchbar.taro.tsx
# 检查 SearchBar 组件的使用示例
echo "检查 SearchBar 组件示例..."
rg -A 10 "import.*SearchBar" src/packages/searchbar/demos/taro/
# 检查 CHANGELOG 中是否有相关的破坏性变更记录
echo "检查 CHANGELOG..."
rg -i "breaking|break|icon" CHANGELOG.md
Length of output: 7574
src/config.json (2)
Line range hint 635-644: 搜索栏组件版本升级符合多端适配需求
搜索栏组件从 2.0.0 升级到 3.0.0 版本，这与 PR 中提到的多端适配目标相符。版本升级有助于统一各平台的实现和样式表现。
Line range hint 635-644: 建议验证相关组件依赖关系
多个数据录入类组件（SearchBar、Switch、TextArea等）同时升级到 3.0.0 版本，建议确认这些组件间的依赖关系是否需要同步更新。
Also applies to: 645-654, 655-664, 665-674, 675-684, 685-694, 695-704, 705-714, 715-724
✅ Verification successful
Let me analyze the search results and gather more information about potential dependencies between these components.
根据分析结果，我可以生成最终响应了。
组件升级到3.0.0版本的依赖关系已验证完毕
经过检查，SearchBar、Switch和TextArea组件之间并不存在直接的相互依赖关系。它们都是独立的表单输入类组件，仅共享基础组件接口（BasicComponent）。每个组件都有其独特的Props定义和实现方式：
- SearchBar: 专注于搜索输入功能，具有shape、value等特定属性
- Switch: 实现开关切换功能，包含checked、activeText等独有属性
- TextArea: 处理多行文本输入，具有showCount、rows等特定功能
这些组件可以独立升级到3.0.0版本，无需担心组件间的依赖同步问题。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：检查组件间的依赖关系
# 搜索组件间的相互引用
rg -l "import.*(?:SearchBar|Switch|TextArea)" src/
Length of output: 3204
Script:
#!/bin/bash
# 检查这些组件的实现代码，查找是否存在相互依赖
ast-grep --pattern 'class $_ {
$$$
render() {
$$$
SearchBar|Switch|TextArea
$$$
}
}'
# 检查组件的属性定义，查看是否有共享的类型或接口
rg "interface.*Props" src/packages/{searchbar,switch,textarea} -A 5
Length of output: 2555
| const onInput = (event: any) => { | ||
| const eventValue = event?.detail?.value | ||
| if (value === eventValue) return | ||
| onChange && onChange?.(eventValue, event) | ||
| setValue(eventValue) | ||
| eventValue === '' && forceFocus() |
There was a problem hiding this comment.
🛠️ Refactor suggestion
优化事件处理和空值检查
建议使用可选链操作符来简化代码并提高可读性：
const onInput = (event: any) => {
const eventValue = event?.detail?.value
if (value === eventValue) return
- onChange && onChange?.(eventValue, event)
+ onChange?.(eventValue, event)
setValue(eventValue)
eventValue === '' && forceFocus()
}另外，建议添加对 event 参数的类型定义：
const onInput = (event: ITouchEvent) => {🧰 Tools
🪛 Biome
[error] 93-93: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
| // const onKeypress = (event: any) => { | ||
| // if (event?.detail?.keyCode === 13) { | ||
| // if (typeof event.cancelable !== 'boolean' || event.cancelable) { | ||
| // event.preventDefault() | ||
| // } | ||
| // onSearch && onSearch(value as string) | ||
| // } | ||
| // } | ||
| const onConfirm = () => { | ||
| onSearch && onSearch(value as string) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
搜索确认逻辑优化
- 使用可选链简化代码
- 补充 onConfirm 的类型定义
- const onConfirm = () => {
- onSearch && onSearch(value as string)
+ const onConfirm = (event: ITouchEvent) => {
+ onSearch?.(value as string)
}注释说明：移除已注释的 onKeypress 相关代码，因为在 Taro 环境下统一使用 onConfirm 处理搜索事件。
📝 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 onKeypress = (event: any) => { | |
| // if (event?.detail?.keyCode === 13) { | |
| // if (typeof event.cancelable !== 'boolean' || event.cancelable) { | |
| // event.preventDefault() | |
| // } | |
| // onSearch && onSearch(value as string) | |
| // } | |
| // } | |
| const onConfirm = () => { | |
| onSearch && onSearch(value as string) | |
| // const onKeypress = (event: any) => { | |
| // if (event?.detail?.keyCode === 13) { | |
| // if (typeof event.cancelable !== 'boolean' || event.cancelable) { | |
| // event.preventDefault() | |
| // } | |
| // onSearch && onSearch(value as string) | |
| // } | |
| // } | |
| const onConfirm = (event: ITouchEvent) => { | |
| onSearch?.(value as string) |
🧰 Tools
🪛 Biome
[error] 194-194: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
|
demo 中是css 变量的在鸿蒙下不生效~ |
| const focus = (event: FocusEvent<HTMLInputElement>) => { | ||
| const { value } = event.target | ||
| onFocus && onFocus?.(value, event) | ||
| const focus = (event: any) => { |
… into 3.0-searchbar
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
SearchBar、Switch、TextArea等，均升级至3.0.0。SearchBarDemo组件中实现了基于平台兼容性的条件渲染。pxTransform函数以优化样式中的像素值处理。样式
searchbar.harmony.css和searchbar.scss文件中的样式，增强了搜索条的视觉一致性和对齐方式。依赖更新
@nutui/icons-react-taro的版本，从2.0.0-beta.0升级至^2.0.0-beta.0。