feat(Toast): 鸿蒙 适配 #2299
feat(Toast): 鸿蒙 适配 #2299
Conversation
|
鸿蒙和rn的换行截断demo未适配成功，函数调用demo需要修改一下demo样式，rn弹出样式居中偏下， |
1）鸿蒙和rn的换行不支持，已屏蔽； |
|
RN 下的展示换行了 |
|
鸿蒙下太宽了 |
src/packages/toast/demo.taro.tsx
Outdated
| <Demo5 /> | ||
| </div> | ||
| {/* rn和 鸿蒙不支持 break-all */} | ||
| {Taro.getEnv() === Taro.ENV_TYPE.HARMONYHYBRID || |
There was a problem hiding this comment.
需要合并下 dev- harmony 的代码，环境判断使用 harmonyAndRn() .
Walkthrough此次更改主要集中在 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ToastComponent
User->>ToastComponent: 请求显示 Toast 通知
activate ToastComponent
ToastComponent-->>User: 显示通知
deactivate ToastComponent
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: 0
🧹 Outside diff range and nitpick comments (2)
src/config.json (2)
Line range hint
876-887: 补充组件文档说明由于 Toast 组件版本升级到 3.0.0 并新增了平台支持，建议在
desc字段中补充关于多平台支持的说明。建议应用以下修改：
{ "version": "3.0.0", "name": "Toast", "type": "component", "tarodoc": true, "cName": "吐司", - "desc": "轻提示", + "desc": "轻提示，支持 React Native 和鸿蒙系统", "sort": 1, "show": true, "taro": true, "author": "VickyYe" }
平台支持标记需要更新
根据检查结果，目前配置文件中：
- 只有 Popup（弹出层）组件明确标记了
"rn": true- 没有发现任何组件标记了鸿蒙系统支持（
harmony或hos）- Toast 组件虽然版本升级到了 3.0.0，但缺少 React Native 和鸿蒙系统的支持标记
建议：
- 为 Toast 组件添加
"rn": true标记- 如果已支持鸿蒙系统，添加
"harmony": true标记- 确保其他需要跨平台支持的组件也添加相应的平台标记
🔗 Analysis chain
Line range hint
876-887: 确认 Toast 组件的跨平台兼容性根据 PR 目标，Toast 组件需要支持 React Native 和鸿蒙系统。但在配置中没有看到相关的平台支持标记（如
rn: true）。建议添加相应的平台支持标识。建议应用以下修改：
{ "version": "3.0.0", "name": "Toast", "type": "component", "tarodoc": true, "cName": "吐司", "desc": "轻提示", "sort": 1, "show": true, "taro": true, + "rn": true, "author": "VickyYe" }运行以下脚本验证其他组件的平台支持配置：
Let me gather more information about platform support configurations in the codebase.
Let me check one more aspect about platform support patterns in the configuration.
Let me check one final aspect about platform support patterns in the configuration.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # 描述：检查其他组件的平台支持配置 # 预期：查找所有带有 rn 标记的组件配置 rg '"rn":\s*true' -A 5Length of output: 277
Script:
#!/bin/bash # 检查 Toast 相关的配置和实现 rg -A 10 '"name":\s*"Toast"' src/config.json # 检查是否有其他平台相关的标记 rg -g 'config.json' '("harmonyos"|"harmony"|"hos")\s*[:=]'Length of output: 357
Script:
#!/bin/bash # 检查所有组件的平台支持标记模式 rg -g 'config.json' '"type":\s*"component"' -B 2 -A 8 # 特别关注版本 3.0.0 的组件配置 rg -g 'config.json' '"version":\s*"3\.0\.0"' -B 2 -A 8Length of output: 64285
Script:
#!/bin/bash # 检查所有带有平台支持标记的组件配置 rg -g 'config.json' '("rn"|"harmony"|"hos")\s*:\s*true' -B 5 -A 5Length of output: 524
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (5)
src/packages/overlay/overlay.harmony.css (1)
2-7: 建议添加注释说明不同定位策略的原因为了提高代码可维护性，建议添加注释解释为什么 RN 使用 absolute 而其他平台使用 fixed 定位。
建议添加如下注释：
.nut-overlay { /* #ifdef rn */ + /* React Native 环境下使用 absolute 定位以确保正确的布局行为 */ position: absolute; /* #endif */ /* #ifndef rn */ + /* 非 RN 环境使用 fixed 定位以实现全屏遮罩效果 */ position: fixed; /* #endif */src/packages/toast/toast.scss (4)
12-23: 建议优化弹性布局的实现方式当前的实现方式虽然解决了 React Native 中的定位问题，但建议考虑以下几点：
- 使用
flex: 1替代固定的width: 100%和height: 100%，可以提供更好的弹性布局支持- 考虑使用
margin: auto配合position: absolute实现更稳定的居中效果.nut-toast { /* #ifdef rn */ position: absolute; /* #endif */ /* #ifndef rn */ position: fixed; /* #endif */ left: 0; top: 0; - width: 100%; - height: 100%; + flex: 1; display: flex; flex-direction: row; justify-content: center; align-items: center; pointer-events: none; z-index: 1300; }
Line range hint
35-66: 建议优化文本换行和尺寸控制当前实现存在以下问题：
- 最大宽度设置为95.7%可能导致鸿蒙系统上显示过宽的问题
- 文本换行的控制类需要考虑多语言场景
建议进行如下修改：
&-inner { position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 30%; - max-width: 95.7%; + max-width: 80%; font-size: $toast-text-font-size; text-align: $toast-inner-text-align; padding: $toast-inner-padding; - word-break: break-all; + word-break: normal; background: $toast-inner-bg-color; border-radius: $toast-inner-border-radius; color: $toast-font-color;
Line range hint
87-119: 建议优化图标和文本的样式设置当前实现中的颜色值和尺寸值可以进一步优化：
- 建议将硬编码的颜色值改为CSS变量
- 图标尺寸应该考虑不同设备的适配
:root { + --nutui-toast-text-color: #ffffff; + --nutui-toast-icon-size: 24px; } .nut-toast { &-text { - color: #ffffff; + color: var(--nutui-toast-text-color); text-align: $toast-inner-text-align; } &-icon { - width: 24px; - height: 24px; + width: var(--nutui-toast-icon-size); + height: var(--nutui-toast-icon-size); - color: #ffffff; + color: var(--nutui-toast-text-color); } }
121-129: 建议使用逻辑属性优化RTL支持建议使用CSS逻辑属性来简化RTL支持的实现：
&-rtl { - left: auto; - right: 0; + inset-inline-start: auto; + inset-inline-end: 0; &-inner { - left: auto; - right: 50%; + inset-inline-start: auto; + inset-inline-end: 50%; } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (3)
src/packages/overlay/overlay.harmony.css(1 hunks)src/packages/toast/toast.scss(4 hunks)src/styles/variables-jrkf.scss(19 hunks)
🔇 Additional comments (4)
src/packages/overlay/overlay.harmony.css (1)
2-7: 平台特定定位实现正确！
条件编译指令的使用恰当，为不同平台（React Native 和 非RN平台）提供了合适的定位策略。
src/packages/toast/toast.scss (1)
30-31: 遮罩层样式设置合理
透明背景和z-index的设置符合Toast组件的使用场景。
src/styles/variables-jrkf.scss (2)
195-197: 基础字体大小变量命名优化
变量命名更改遵循了更简洁的命名约定，从描述性命名改为使用简写：
font-size-small→font-size-sfont-size-base保持不变（作为基准）font-size-large→font-size-l
这种改变提高了代码的一致性和可维护性。
283-283: 🛠️ Refactor suggestion
组件字体大小变量更新
各个组件中的字体大小变量已更新为使用新的基础字体大小变量。这些更改涉及：
- Button 组件
- Cell 组件
- Divider 组件
- NoticeBar 组件
- Grid 组件
- Elevator 组件
- Loading 组件
等多个组件。
建议：
- 确保所有使用这些变量的组件样式都能正确渲染
- 在组件文档中更新相关的变量引用说明
Also applies to: 315-315, 411-411, 464-464, 481-481, 805-805, 1014-1014, 1236-1236, 1258-1258, 1395-1395, 1427-1427, 1466-1466, 1551-1551, 2148-2148, 2239-2239, 2406-2406, 2461-2461, 2463-2463
✅ Verification successful
字体大小变量更新已完成且使用正确
基于代码分析结果，所有相关组件都已正确使用了新的字体大小变量系统：
- 变量定义文件（variables-jrkf.scss）中已定义了完整的字体大小变量体系：$font-size-xxs 到 $font-size-xxxl
- Button、Cell、Divider、NoticeBar、Grid、Elevator、Loading 等组件的样式文件中均使用了新的字体大小变量
- 没有发现使用旧的字体大小变量名称
- 所有组件样式中的字体大小变量引用都遵循了新的命名规范
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查是否有遗漏的旧字体大小变量名称
echo "检查是否存在未更新的旧变量名..."
rg -l "font-size-(small|large)" --type scss
# 检查组件样式文件中的变量使用情况
echo "检查组件样式文件中的变量引用..."
rg -l "\$font-size-(s|l)" --type scss
Length of output: 542
Script:
#!/bin/bash
# 使用 rg 直接搜索 scss 文件中的旧字体大小变量名称
echo "检查是否存在未更新的旧变量名..."
fd -e scss -x rg -l "font-size-(small|large)" {}
# 检查组件样式文件中的新变量使用情况
echo "检查组件样式文件中的变量引用..."
fd -e scss -x rg -l "\$font-size-(s|l)" {}
# 列出所有 scss 文件以确认文件存在
echo "列出所有 scss 文件..."
fd -e scss
Length of output: 6111
Script:
#!/bin/bash
# 检查具体的组件样式文件中的字体大小变量使用情况
echo "检查 Button 组件样式..."
rg -A 2 "\$font-size" src/packages/button/button.scss
echo "检查 Cell 组件样式..."
rg -A 2 "\$font-size" src/packages/cell/cell.scss
echo "检查 Divider 组件样式..."
rg -A 2 "\$font-size" src/packages/divider/divider.scss
echo "检查 NoticeBar 组件样式..."
rg -A 2 "\$font-size" src/packages/noticebar/noticebar.scss
echo "检查 Grid 组件样式..."
rg -A 2 "\$font-size" src/packages/grid/grid.scss
echo "检查 Elevator 组件样式..."
rg -A 2 "\$font-size" src/packages/elevator/elevator.scss
echo "检查 Loading 组件样式..."
rg -A 2 "\$font-size" src/packages/loading/loading.scss
# 检查变量定义文件
echo "检查变量定义文件..."
rg "\$font-size" src/styles/variables-jrkf.scss
Length of output: 882
Script:
#!/bin/bash
# 使用 cat 直接查看变量定义文件的内容
echo "查看字体大小变量定义..."
cat src/styles/variables-jrkf.scss | grep -A 5 -B 5 "font-size"
# 使用 find 和 xargs 组合来查找和检查组件样式文件
echo "检查组件样式文件中的字体大小变量使用..."
find src/packages -name "*.scss" -type f -exec sh -c 'echo "=== {} ==="; cat "{}" | grep -A 2 "\$font-size"' \;
# 检查是否有其他变量文件定义了字体大小
echo "检查其他变量定义文件..."
find src/styles -name "variables*.scss" -type f -exec sh -c 'echo "=== {} ==="; cat "{}" | grep -A 2 "\$font-size"' \;
Length of output: 54409
| /* #ifdef rn */ | ||
| top: var(--nutui-toast-inner-top, 38%); | ||
| /* #endif */ | ||
| /* #ifndef rn */ | ||
| top: var(--nutui-toast-inner-top, 48%); | ||
| /* #endif */ |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议使用CSS变量优化位置控制
目前的实现方式虽然解决了React Native中位置偏低的问题，但建议将具体数值抽取为CSS变量，便于统一管理和调整。
:root {
+ --nutui-toast-rn-top: 38%;
+ --nutui-toast-default-top: 48%;
}
.nut-toast {
&-center {
/* #ifdef rn */
- top: var(--nutui-toast-inner-top, 38%);
+ top: var(--nutui-toast-inner-top, var(--nutui-toast-rn-top));
/* #endif */
/* #ifndef rn */
- top: var(--nutui-toast-inner-top, 48%);
+ top: var(--nutui-toast-inner-top, var(--nutui-toast-default-top));
/* #endif */
}
}Committable suggestion skipped: line range outside the PR's diff.
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Outside diff range and nitpick comments (2)
src/packages/toast/demos/taro/demo1.tsx (2)
87-87: 建议优化加载状态的处理方式加载提示建议考虑以下几点：
- 是否需要禁用加载状态下的用户交互
- 考虑添加超时处理机制
建议参考以下实现：
-openToast('loading', '加载提示') +openToast('loading', '加载提示') +// 禁用用户交互 +setUserInteractionEnabled(false) +// 添加超时处理 +setTimeout(() => { + setShowToast(false) + setUserInteractionEnabled(true) +}, 10000)
Line range hint
44-89: 建议增加平台特定的样式处理考虑到React Native和鸿蒙系统的差异，建议：
- 为不同平台添加特定的样式配置
- 处理不同平台的位置偏移问题
建议添加平台特定的样式配置：
const platformStyles = { rn: { container: { // RN特定样式 position: 'absolute', top: '50%', transform: [{ translateY: -50 }], } }, harmony: { container: { // 鸿蒙特定样式 maxWidth: '80%', } } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (3)
src/packages/toast/__test__/toast.spec.tsx(2 hunks)src/packages/toast/demos/taro/demo1.tsx(2 hunks)src/packages/toast/toast.taro.tsx(8 hunks)
🔇 Additional comments (5)
src/packages/toast/demos/taro/demo1.tsx (1)
66-66:
需要验证文本换行的展示效果
根据PR反馈，当前在React Native和鸿蒙系统上存在文本换行的兼容性问题。这里将成功提示的内容修改为较长文本，建议：
- 确保在两个平台上测试长文本的展示效果
- 考虑添加最大宽度限制
src/packages/toast/__test__/toast.spec.tsx (1)
65-67: 请确认类名更改是否适用于所有平台
类名从 .nut-toast 更改为 .nut-toast-inner 以及从 nut-toast-small 更改为 nut-toast-inner-small 表明组件结构发生了变化。建议：
- 确保这些类名在 React Native 和鸿蒙系统上都能正常工作
- 在文档中更新相应的样式覆盖说明
✅ Verification successful
Let me gather more information about the Toast component's structure and class names across different platforms.
Let me check the Taro implementation and Notification component to get a complete picture.
类名更改是合理且一致的
根据代码分析，.nut-toast-inner 和 .nut-toast-inner-small 的类名更改是完全正确的：
- 在 Toast 组件的 SCSS 文件中，明确定义了
.nut-toast-inner作为内容容器类名 - 在 Taro 和 Web 版本中都统一使用了这些类名
- 这些类名支持跨平台（React Native 和鸿蒙）使用，通过条件编译和样式适配
测试用例的修改与组件实现完全匹配，无需额外更改。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查其他平台特定文件中是否使用了相同的类名结构
rg -g '*.{tsx,scss}' 'nut-toast-inner'
Length of output: 222
Script:
#!/bin/bash
# Check Toast component implementation and styles
echo "=== Toast Component Files ==="
fd -e tsx -e scss "toast" src/packages/toast
echo -e "\n=== Toast Styles ==="
fd -e scss "toast" src/packages/toast -x cat {}
echo -e "\n=== Toast Component Implementation ==="
fd "toast.tsx" src/packages/toast -x cat {}
Length of output: 5270
Script:
#!/bin/bash
# Check Taro implementation and Notification component
echo "=== Toast Taro Implementation ==="
cat src/packages/toast/toast.taro.tsx
echo -e "\n=== Notification Component ==="
fd "Notification" src/packages/toast -x cat {}
Length of output: 11228
src/packages/toast/toast.taro.tsx (3)
3-3: 新增的导入确保了更好的跨平台兼容性
引入的更改增强了组件的适应性：
Text组件的引入改善了文本渲染的跨平台一致性- RTL支持增强了国际化能力
- 平台特定工具函数的引入有助于处理平台差异
Also applies to: 14-15
210-211: 建议验证样式在不同平台的一致性
当前样式实现可能导致以下问题：
- 鸿蒙端显示过宽
- RN端位置偏低
#!/bin/bash
# 搜索相关的样式文件以验证平台特定的样式实现
rg -t scss -t css "${classPrefix}-(inner|position)"191-193: 验证鸿蒙平台的居中定位实现
根据PR反馈，RN端的弹窗位置偏低。当前的居中实现可能需要针对不同平台进行调整。
✅ Verification successful
鸿蒙平台的居中定位实现已验证正确
代码中使用 transform: translate(-50%, -50%) 配合 left: 50% 的方式实现居中定位是标准且有效的CSS居中方案。通过检查代码实现发现:
- 该样式仅在鸿蒙平台(harmony)下启用
- 其他平台保持原有样式不变,不会受到影响
- 这种居中方案在各大平台都得到良好支持
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 搜索相关的样式文件以验证平台特定的定位逻辑
rg -t scss -t css "transform.*translate"
Length of output: 444
Script:
#!/bin/bash
# 搜索所有涉及transform和translate的样式定义
rg "transform.*translate"
# 搜索toast相关的样式定义
rg -A 5 "toast" --type css --type scss --type tsx
# 查找harmony相关的平台适配代码
ast-grep --pattern 'harmony() { $$$ }'
Length of output: 34280
Script:
#!/bin/bash
# 搜索toast相关的样式和定位实现
rg -t css -t tsx "toast.*transform|transform.*toast"
# 查找harmony()函数的定义和使用
ast-grep --pattern 'function harmony() { $$$ }'
# 检查toast组件在不同平台的实现差异
rg -A 5 "toast.*harmony|harmony.*toast"
Length of output: 174
Script:
#!/bin/bash
# 查找harmony相关的实现
rg "harmony\(\)"
# 查找toast组件中的transform样式
rg "transform" src/packages/toast/
# 检查toast组件在不同平台的实现文件
fd "toast" src/packages/
Length of output: 2389
| expect(document.querySelector('.nut-icon')).toHaveClass( | ||
| 'nut-icon nut-icon-Success' | ||
| ) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
图标类名规范化调整
图标类名添加了基础类 nut-icon，使其更符合组件库的命名规范。建议：
- 检查其他图标类型（fail、warn、loading）是否也需要类似的更新
- 确保这个改动在跨平台场景下的样式表现一致
建议统一更新其他图标的测试断言，例如：
-expect(document.querySelector('.nut-icon')).toHaveClass('nut-icon-Failure')
+expect(document.querySelector('.nut-icon')).toHaveClass('nut-icon nut-icon-Failure')
-expect(document.querySelector('.nut-icon')).toHaveClass('nut-icon-Tips')
+expect(document.querySelector('.nut-icon')).toHaveClass('nut-icon nut-icon-Tips')
-expect(document.querySelector('.nut-icon')).toHaveClass('nut-icon-loading')
+expect(document.querySelector('.nut-icon')).toHaveClass('nut-icon nut-icon-loading')Committable suggestion skipped: line range outside the PR's diff.
src/packages/toast/toast.taro.tsx
Outdated
| if (harmonyAndRn()) { | ||
| return { | ||
| success: <Text>success</Text>, | ||
| fail: <Text>fail</Text>, | ||
| warn: <Text>warn</Text>, | ||
| loading: <Text>loading</Text>, | ||
| }[type] | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议优化鸿蒙系统的图标处理方式
当前实现直接使用 Text 组件显示图标文本，这可能影响用户体验。建议：
- 使用鸿蒙系统原生图标组件
- 考虑添加图标资源文件
建议重构为：
if (harmonyAndRn()) {
return {
success: <HMIcon name="success" size={iconSize} />,
fail: <HMIcon name="fail" size={iconSize} />,
warn: <HMIcon name="warn" size={iconSize} />,
loading: <HMIcon name="loading" size={iconSize} />,
}[type]
}| <Text | ||
| className={`${classPrefix}-text ${content ? '' : `${classPrefix}-text-empty`}`} | ||
| > | ||
| {content || msg} | ||
| </Text> |
There was a problem hiding this comment.
文本换行问题需要优化
根据PR反馈，RN端存在不当的文本换行问题，建议：
- 检查
wordBreak属性在RN端的实际效果 - 考虑使用 RN 的
numberOfLines属性控制文本展示
建议修改为：
<Text
className={`${classPrefix}-text ${content ? '' : `${classPrefix}-text-empty`}`}
+ numberOfLines={harmony() ? undefined : 3}
+ style={harmony() ? undefined : { flexShrink: 1 }}
>
{content || msg}
</Text>📝 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.
| <Text | |
| className={`${classPrefix}-text ${content ? '' : `${classPrefix}-text-empty`}`} | |
| > | |
| {content || msg} | |
| </Text> | |
| <Text | |
| className={`${classPrefix}-text ${content ? '' : `${classPrefix}-text-empty`}`} | |
| numberOfLines={harmony() ? undefined : 3} | |
| style={harmony() ? undefined : { flexShrink: 1 }} | |
| > | |
| {content || msg} | |
| </Text> |
多了一层 overlay
|
|
加载状态透明遮罩 在H5没生效 |
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Outside diff range and nitpick comments (5)
src/packages/toast/toast.harmony.css (3)
10-24: 建议优化 React Native 环境下的定位逻辑当前实现使用预处理指令区分 RN 和其他环境的定位方式，但这可能导致以下问题：
- RN 环境下使用
position: absolute可能在某些场景下出现定位偏差- 统一使用
height: 100%在不同设备上可能表现不一致建议考虑以下优化：
- 使用 RN 的
DimensionsAPI 动态计算高度- 考虑增加安全区域（Safe Area）的处理
Line range hint
36-64: 建议优化文本样式的自适应处理当前实现存在以下问题：
min-width: 30%在不同设备上可能表现不一致max-width: 95.7%数值过于具体，建议使用更规范的值- 字体大小的三个等级（12px、14px、16px）需要考虑系统字体大小设置
建议进行如下调整：
.nut-toast-inner { - min-width: 30%; + min-width: 120px; - max-width: 95.7%; + max-width: 96%; font-size: 14px; }
83-103: 优化图标包装器的实现当前的图标样式实现存在以下问题：
- 固定的图标尺寸（24px）可能不适合所有场景
- 图标与文本的间距（margin-bottom: 8px）需要考虑不同字号的情况
建议进行如下优化：
.nut-toast-icon { - width: 24px; - height: 24px; + width: 1.5em; + height: 1.5em; } .nut-toast-icon-wrapper { - margin-bottom: 8px; + margin-bottom: 0.5em; }src/packages/toast/toast.scss (2)
113-120: 建议增强图标容器的RTL支持图标包装器的实现需要考虑RTL布局支持，建议添加相应的RTL样式规则。
&-icon-wrapper { width: 100%; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; + [dir='rtl'] & { + margin-left: 0; + margin-right: 8px; + } }
127-134: 完善RTL模式下的定位当前RTL实现可以通过添加transform属性来优化定位效果。
&-rtl { &-inner { left: auto; right: 50%; + transform: translateX(50%); } }
📜 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 (4)
package.json(1 hunks)src/packages/toast/toast.harmony.css(2 hunks)src/packages/toast/toast.scss(4 hunks)src/packages/toast/toast.taro.tsx(8 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/packages/toast/toast.taro.tsx
🔇 Additional comments (4)
src/packages/toast/toast.harmony.css (2)
66-71:
验证 RN 环境下的垂直位置适配
根据之前的反馈："RN popup style was centered incorrectly, appearing too low"，当前的调整：
- RN:
top: 38% - 其他:
top: 48%
需要验证在不同设备和系统设置下的表现。
建议：
- 考虑使用 flexbox 居中而不是固定百分比
- 增加不同设备尺寸下的测试用例
27-33: 鸿蒙环境下遮罩层样式需要验证
当前鸿蒙环境下遮罩层背景色设置为完全透明：
background-color: rgba(0, 0, 0, 0);这可能导致用户无法感知 Toast 的层级关系。
✅ Verification successful
Let me analyze the results. I can see that overlay-related components like popup and overlay use background-color: rgba(0, 0, 0, 0.7) for their backdrop, while the toast component uses completely transparent background rgba(0, 0, 0, 0). Let me verify if this is consistent with the design system by checking for any documentation.
Toast 组件遮罩层透明设置是符合预期的
根据代码分析发现：
- Toast 组件默认使用透明遮罩层是设计使然，在 demo4 中也展示了如何通过自定义样式将遮罩层设置为半透明（rgba(0, 0, 0, 0.7)）
- 与 Popup、Overlay 等组件不同，Toast 作为轻提示组件，使用透明遮罩层更符合其交互特性
- 开发者可以根据具体需求通过 CSS 变量自定义遮罩层样式
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查其他平台的遮罩层实现
rg -A 2 "background-color.*rgba" --type css
Length of output: 3471
Script:
#!/bin/bash
# Check for design documentation
fd -e md | xargs rg -i "toast.*overlay|overlay.*toast"
# Check toast implementation in other files
fd -g "*toast*" | xargs rg -A 2 "overlay"
Length of output: 3201
src/packages/toast/toast.scss (1)
76-81: 复用之前审核建议的CSS变量优化
之前的代码审核中已经建议使用CSS变量来优化位置控制，该建议仍然有效。建议采纳之前的修改建议。
package.json (1)
107-107: 依赖版本更新需要谨慎评估
将 @nutui/icons-react-taro 从稳定版本 ^1.0.5 更新到测试版本 2.0.0-beta.0 存在以下风险：
-
beta 版本可能存在不稳定性，建议在升级前：
- 确认此版本是否已经过充分测试
- 验证是否与 Toast 组件在 RN 和鸿蒙平台上的适配需求兼容
-
由于是主版本升级（1.x → 2.x），可能包含破坏性更改，建议：
- 仔细阅读更新日志了解变更内容
- 在测试环境中充分验证
- 特别关注 Toast 组件中使用到的图标是否正常显示
| .nut-toast-rtl { | ||
| left: auto; | ||
| right: 0; | ||
| } | ||
|
|
||
| .nut-toast-loading .nut-toast-icon-wrapper .nut-icon { | ||
| width: 24px; | ||
| height: 24px; | ||
| .nut-toast-rtl-inner { | ||
| left: auto; | ||
| right: 50%; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
RTL 支持实现需要完善
当前的 RTL 支持实现看起来是重复的：
- 使用独立的 class（.nut-toast-rtl）
- 使用属性选择器（[dir=rtl]）
- 使用工具类（.nut-rtl）
建议统一使用一种方式实现 RTL 支持，避免维护成本。
| /* #ifdef rn */ | ||
| position: absolute; | ||
| /* #endif */ | ||
| /* #ifndef rn */ | ||
| position: fixed; | ||
| /* #endif */ | ||
| left: 0; | ||
| top: 0; | ||
| display: flex; | ||
| flex-direction: row; | ||
| justify-content: center; | ||
| align-items: center; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议优化鸿蒙系统的布局适配
当前实现使用了 flex 布局来居中显示，但根据PR反馈，在鸿蒙系统上显示过宽。建议为鸿蒙平台添加特定的宽度限制。
.nut-toast {
/* #ifdef harmony */
+ max-width: 80%;
/* #endif */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}Committable suggestion skipped: line range outside the PR's diff.
| &-normal { | ||
| word-break: normal; | ||
| word-wrap: normal; | ||
| } | ||
|
|
||
| &.break-word { | ||
| &-break-word { | ||
| word-break: normal; | ||
| word-wrap: break-word; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
优化文本换行逻辑
根据PR反馈中提到的RN文本换行不当的问题，当前的word-break实现可能需要进一步优化。建议根据不同平台特性调整换行策略。
&-normal {
+ /* #ifdef rn */
+ white-space: pre-wrap;
+ /* #endif */
word-break: normal;
word-wrap: normal;
}Committable suggestion skipped: line range outside the PR's diff.
src/packages/toast/toast.scss
Outdated
| /* #ifndef harmony */ | ||
| --nutui-overlay-bg-color: rgba(0, 0, 0, 0); | ||
| --nutui-overlay-zIndex: 1300; | ||
| } | ||
|
|
||
| &-small { | ||
| .nut-toast-inner { | ||
| font-size: $font-size-s; | ||
| } | ||
| } | ||
|
|
||
| &-large { | ||
| .nut-toast-inner { | ||
| font-size: $font-size-l; | ||
| } | ||
| /* #endif */ | ||
| /* #ifdef harmony */ | ||
| background-color: rgba(0, 0, 0, 0); | ||
| z-index: 1300; | ||
| /* #endif */ |
There was a problem hiding this comment.
解决加载状态下透明遮罩层问题
根据PR反馈中提到的H5环境下loading状态透明遮罩层问题，建议添加条件判断来处理不同环境的遮罩层样式。
&-overlay-default {
/* #ifndef harmony */
- --nutui-overlay-bg-color: rgba(0, 0, 0, 0);
+ --nutui-overlay-bg-color: var(--nutui-overlay-loading-bg-color, rgba(0, 0, 0, 0));
/* #endif */
}Committable suggestion skipped: line range outside the PR's diff.
|
all fixed |
|
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (1)
src/packages/toast/toast.harmony.css (1)
94-105: 建议增加图标的无障碍支持当前图标实现缺少无障碍支持：
- 需要为图标添加
role="img"属性- 建议添加
aria-label属性以支持屏幕阅读器.nut-toast-icon { width: 24px; height: 24px; color: #ffffff; + role: img; + aria-label: "提示图标"; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (3)
src/packages/toast/toast.harmony.css(2 hunks)src/packages/toast/toast.scss(5 hunks)src/packages/toast/toast.taro.tsx(8 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/packages/toast/toast.scss
- src/packages/toast/toast.taro.tsx
🔇 Additional comments (2)
src/packages/toast/toast.harmony.css (2)
68-73: 请说明 RN 和其他平台位置差异的原因
React Native 平台上的垂直位置（38%）与其他平台（48%）存在显著差异：
- 这种差异可能会导致不一致的用户体验
- 需要明确说明这种差异的必要性
建议：
- 添加注释说明差异的原因
- 考虑是否可以统一处理
10-24: 需要验证 flex-direction 的更改是否影响布局
将 flex-direction 从 column 改为 row 可能会影响内容的垂直堆叠布局。建议：
- 验证此更改对所有平台上的内容布局是否有影响
- 确保图标和文本的垂直排列不受影响
| .nut-toast-overlay-default-taro { | ||
| /* #ifdef harmony */ | ||
| background-color: rgba(0, 0, 0, 0); | ||
| z-index: 1300; | ||
| /* #endif */ | ||
| /* #ifndef harmony */ | ||
| /* #endif */ | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议重新考虑鸿蒙平台的背景透明度设置
当前实现在鸿蒙平台上将背景色设置为完全透明（rgba(0, 0, 0, 0)），这可能会：
- 降低 Toast 内容的可见性
- 影响用户体验，特别是在复杂背景上
建议添加适当的背景透明度，如 rgba(0, 0, 0, 0.1)。
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
Toast组件的版本，从2.0.0升级到3.0.0，可能带来了功能上的增强或修改。样式
.nut-toast组件的样式，增强了响应性和适应性，支持不同平台。测试
Toast组件的测试用例，以反映新的类名和样式变化。