feat(Dialog): harmony adaptation #2790
Conversation
Walkthrough本次更改涉及多个组件的版本更新，主要集中在 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Dialog
User->>Dialog: 点击确认按钮
Dialog->>User: 显示确认文本
User->>Dialog: 点击取消按钮
Dialog->>User: 关闭对话框
Possibly related PRs
Suggested reviewers
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 (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## V3.0 #2790 +/- ##
=======================================
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 (5)
src/packages/dialog/demos/taro/demo7.tsx (1)
22-38: 建议优化样式处理方式当前实现基本正确，但有以下几点建议改进：
- 建议将内联样式抽离到单独的样式文件中，提高代码可维护性
- 样式单位建议使用 Taro 的尺寸单位转换工具，以确保多端适配
建议参考以下改进方式：
+ import styles from './demo7.scss' - <View - style={{ - height: '96px', - borderRadius: '8px', - marginTop: '13px', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - backgroundColor: '#F7F8FC', - color: '#C2C4CC', - }} - > + <View className={styles.customContent}>同时在
demo7.scss中定义样式：.customContent { height: 96px; border-radius: 8px; margin-top: 13px; display: flex; align-items: center; justify-content: center; background-color: #F7F8FC; color: #C2C4CC; }src/packages/dialog/demos/h5/demo6.tsx (2)
39-40: 建议考虑国际化支持按钮文本直接使用中文硬编码可能会影响组件的国际化使用。建议：
- 使用 i18n 配置来管理按钮文本
- 在示例中展示如何配置多语言支持
示例改进建议：
- confirmText="决策1" - cancelText="决策2" + confirmText={t('dialog.demo.confirm')} + cancelText={t('dialog.demo.cancel')}
39-40: 建议统一示例中的命名风格为了保持示例代码的一致性，建议按钮文本使用更具描述性的命名，以便更好地展示组件的实际使用场景。
建议修改为：
- confirmText="决策1" - cancelText="决策2" + confirmText="确认" + cancelText="取消"src/packages/dialog/demos/taro/demo6.tsx (1)
39-40: 建议使用更具描述性的按钮文本实现正确，但建议使用更具描述性的按钮文本来提高示例的实用性和可理解性。例如：
- confirmText="决策1" - cancelText="决策2" + confirmText="确认操作" + cancelText="取消操作"这样的文本更能体现按钮的实际用途，对开发者更有参考价值。
src/packages/dialog/dialog.scss (1)
65-68: 建议：优化底部关闭按钮的样式处理
- 将
transform从translate(-50%)改为translateY(-50%)可能会影响水平居中，请确认这是否是预期行为。- 建议将颜色相关的样式提取到独立的主题变量中，以支持深色模式。
建议如下修改：
.nut-dialog { &-close { &-bottom { bottom: -56px; left: 50%; - transform: translateY(-50%); + transform: translate(-50%, -50%); .nut-icon { - color: $dialog-close-color; + color: var(--nutui-dialog-close-color, $dialog-close-color); } } } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (5)
src/config.json(1 hunks)src/packages/dialog/demos/h5/demo6.tsx(1 hunks)src/packages/dialog/demos/taro/demo6.tsx(1 hunks)src/packages/dialog/demos/taro/demo7.tsx(2 hunks)src/packages/dialog/dialog.scss(2 hunks)
🔇 Additional comments (5)
src/packages/dialog/demos/taro/demo7.tsx (1)
3-3: 导入语句正确添加！
正确引入了 Taro 的 View 组件，符合 Taro 开发规范。
src/packages/dialog/dialog.scss (3)
10-10: 注意：移除最大高度限制可能影响对话框布局
注释掉 max-height 属性可能会导致对话框在内容较多时占据过多屏幕空间。建议重新评估这个改动的必要性，或考虑使用其他方式来控制对话框的最大高度。
47-49: 优化：使用变量统一图标尺寸
将固定像素值替换为变量是个好的改进，这样可以更好地维护样式的一致性和可配置性。
53-53: 改进：统一关闭按钮的定位
使用变量 $dialog-close-top 统一控制顶部关闭按钮的位置是个很好的做法，这样可以保持左右两侧按钮的对齐。
Also applies to: 58-58
src/config.json (1)
Line range hint 730-738: 需要验证版本升级的文档更新
Dialog 组件从 2.0.0 升级到 3.0.0 是一个主版本升级，这通常意味着有破坏性更改。建议确保：
- 更新了迁移指南，帮助用户从 v2 升级到 v3
- 在 Changelog 中详细说明了破坏性变更
✅ Verification successful
Let's verify the content of these files to check if they document the Dialog component's breaking changes.
版本升级文档已完备，可以继续推进
从检查结果来看：
migrate-from-v2.md中已详细记录了 Dialog 组件的所有破坏性变更，包括属性重命名和行为变更CHANGELOG.md中包含了最近的 Dialog 组件相关更新记录，特别是针对鸿蒙适配的改动
这些文档足以帮助用户从 v2 平稳升级到 v3 版本。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：检查是否存在迁移指南和更新日志
# 检查迁移指南
fd -t f "migrate.*md|migration.*md|upgrade.*md"
# 检查 Changelog
fd -t f "CHANGELOG.md|changelog.md"
Length of output: 138
Script:
#!/bin/bash
# Check migration guides and changelog for Dialog-related changes
echo "=== Migration Guide v2 Content ==="
cat migrate-from-v2.md | grep -A 5 -i "dialog"
echo -e "\n=== Changelog Content ==="
cat CHANGELOG.md | grep -A 5 -i "dialog"
Length of output: 6591
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (4)
src/packages/dialog/demos/taro/demo7.tsx (2)
22-24: 建议优化文本内容的展示方式当前的文本内容过长且没有适当的换行或格式化，可能影响用户体验。
建议按照以下方式优化：
- <View> - 文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容 - </View> + <View style={{ lineHeight: '24px', padding: '0 16px' }}> + <View>第一段说明文字</View> + <View style={{ marginTop: '8px' }}>第二段说明文字</View> + </View>
25-38: 建议将样式抽离到独立的样式文件当前的内联样式会导致代码可维护性降低，建议将样式迁移到专门的样式文件中。
建议创建
demo7.scss文件并使用以下方式重构：- <View - style={{ - height: '96px', - borderRadius: '8px', - marginTop: '13px', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - backgroundColor: '#F7F8FC', - color: '#C2C4CC', - }} - > + <View className="custom-content-area"> 自定义内容区域 </View>对应的 SCSS 文件内容：
.custom-content-area { height: 96px; border-radius: 8px; margin-top: 13px; display: flex; align-items: center; justify-content: center; background-color: #F7F8FC; color: #C2C4CC; }src/packages/dialog/demos/h5/demo6.tsx (1)
39-40: 按钮文本自定义实现正确，建议优化用户体验代码实现正确，但建议考虑以下几点改进：
- 为了保持一致性，建议在第一个对话框也添加自定义按钮文本
- 当前的按钮文本"决策1"和"决策2"不够直观，建议使用更符合用户预期的文本
建议按如下方式修改：
<Dialog className="test-dialog" title="顶部带关闭按钮" visible={visible1} closeIcon closeIconPosition="top-right" style={{ '--nutui-dialog-close-color': '#888B94', }} + confirmText="确认" + cancelText="取消" onConfirm={() => setVisible1(false)} onCancel={() => setVisible1(false)} > <Dialog className="test-dialog" title="底部带关闭按钮" visible={visible2} - confirmText="决策1" - cancelText="决策2" + confirmText="确认" + cancelText="取消" onConfirm={() => setVisible2(false)} onCancel={() => setVisible2(false)} closeIcon >src/packages/dialog/dialog.scss (1)
47-49: 优化：使用变量提高可维护性将图标的尺寸属性改为使用变量是个很好的改进，这样可以统一管理并且便于主题定制。
建议考虑添加以下改进：
.nut-icon { font-size: $dialog-close-width; width: $dialog-close-width; height: $dialog-close-height; + transition: all 0.3s; // 添加过渡效果使图标大小变化更平滑 }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (5)
src/config.json(1 hunks)src/packages/dialog/demos/h5/demo6.tsx(1 hunks)src/packages/dialog/demos/taro/demo6.tsx(1 hunks)src/packages/dialog/demos/taro/demo7.tsx(2 hunks)src/packages/dialog/dialog.scss(2 hunks)
🔇 Additional comments (7)
src/packages/dialog/demos/taro/demo7.tsx (2)
3-3: 导入语句符合 Taro 规范
正确引入了 Taro 的 View 组件，这是从 HTML div 元素迁移到 Taro 框架的必要步骤。
Line range hint 1-43: 验证 Dialog 组件在 Taro 环境下的兼容性
需要确保 Dialog 组件在不同尺寸的移动设备上都能正常显示。
✅ Verification successful
Dialog 组件在 Taro 环境下的兼容性已得到验证
通过代码分析，Dialog 组件在 Taro 环境下具有良好的兼容性：
- Dialog 组件使用了 Taro 的原生组件（如
@tarojs/components中的View） - 样式方面采用了弹性布局（flex）和百分比单位，确保了在不同尺寸设备上的自适应
- 实现了以下移动端适配特性：
- 居中定位使用 transform 实现
- 内容区域支持溢出滚动
- 提供了触摸滚动优化（-webkit-overflow-scrolling: touch）
- 动画过渡效果适配移动端性能
组件的实现完全符合移动端适配要求，可以安全使用。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查 Dialog 组件是否正确处理了 Taro 环境下的样式适配
# 搜索相关的样式文件
rg -t scss "dialog" src/packages/dialog/
# 检查是否存在 Taro 特定的样式处理
rg -t scss "@include .+taro" src/packages/dialog/
Length of output: 150
Script:
#!/bin/bash
# 检查 Dialog 组件的样式文件
fd -e scss -e css . src/packages/dialog/
# 检查 Dialog 组件在 Taro 环境下的适配代码
rg "taro" src/packages/dialog/
# 检查 Dialog 组件的响应式处理
ast-grep --pattern 'style={$_}'
Length of output: 3770
Script:
#!/bin/bash
# 检查 Dialog 组件的样式定义
cat src/packages/dialog/dialog.scss
# 检查 Taro 版本的 Dialog 组件实现
cat src/packages/dialog/dialog.taro.tsx
# 检查是否有特定的移动设备适配代码
rg "media" src/packages/dialog/dialog.scss
Length of output: 9663
src/packages/dialog/demos/taro/demo6.tsx (1)
39-40: 按钮文本自定义功能实现正确
代码实现符合预期，通过 confirmText 和 cancelText 属性成功实现了按钮文本的自定义。建议在组件文档中详细说明这个新增的自定义功能。
执行以下脚本以验证其他演示文件中的一致性：
✅ Verification successful
按钮文本自定义功能实现一致性已确认
代码检查显示 confirmText 和 cancelText 属性在所有相关演示文件中都得到了一致的实现：
- H5 和 Taro 版本的 demo6.tsx 中使用了相同的"决策1"和"决策2"文本
- H5 demo1.tsx 中展示了多种常见场景下的按钮文本自定义用法
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：检查其他演示文件中是否一致地实现了按钮文本自定义功能
# 搜索所有包含 Dialog 组件的演示文件
rg -l "Dialog.*confirmText|cancelText" "src/packages/dialog/demos"
Length of output: 185
Script:
#!/bin/bash
# 检查找到的文件中的具体实现
echo "=== src/packages/dialog/demos/h5/demo1.tsx ==="
rg "confirmText|cancelText" "src/packages/dialog/demos/h5/demo1.tsx" -B 2 -A 2
echo -e "\n=== src/packages/dialog/demos/h5/demo6.tsx ==="
rg "confirmText|cancelText" "src/packages/dialog/demos/h5/demo6.tsx" -B 2 -A 2
echo -e "\n=== src/packages/dialog/demos/taro/demo6.tsx ==="
rg "confirmText|cancelText" "src/packages/dialog/demos/taro/demo6.tsx" -B 2 -A 2
Length of output: 1598
src/packages/dialog/dialog.scss (3)
10-10: 注意对话框高度限制的移除
注释掉 max-height 属性可能会导致对话框在内容较多时占据过多屏幕空间。建议确认是否需要设置一个合理的最大高度限制，以确保良好的用户体验。
53-53: 确认关闭按钮位置的一致性
使用 $dialog-close-top 变量统一设置顶部位置是个好做法，确保了左右两侧关闭按钮的对齐。
Also applies to: 58-58
65-68: 底部关闭按钮样式优化
将 transform 属性改为只处理垂直方向的位移更加精确。同时，使用变量控制图标颜色提高了主题定制的灵活性。
✅ Verification successful
底部关闭按钮样式变更验证完成
代码检查显示：
$dialog-close-color变量已在全局变量文件中定义，用于控制对话框关闭按钮的颜色- 该变量在 dialog 组件中被正确使用，特别是在底部关闭按钮样式中
- transform 属性的修改仅影响垂直方向的位移，不会影响其他布局属性
这些变更是安全且合理的，可以提高样式的精确性和主题定制的灵活性。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查其他组件是否也在使用这个颜色变量
rg "\$dialog-close-color" --type scss
Length of output: 67
Script:
#!/bin/bash
# Search for dialog-close-color variable in all files
rg "\$dialog-close-color"
# Search for scss/css files that might contain color variables
fd -e scss -e css --exec cat {}
Length of output: 100961
Script:
#!/bin/bash
# Search for dialog-close-color variable definition
fd -e scss -e css --exec grep -l "dialog-close-color" {}
# Search for dialog component styles
fd -e scss -e css --exec grep -l "dialog" {}
Length of output: 363
Script:
#!/bin/bash
# Check the content of variables files and dialog scss to understand the variable usage
cat ./src/styles/variables.scss | grep -A 2 "dialog-close-color"
cat ./src/packages/dialog/dialog.scss
Length of output: 3796
src/config.json (1)
Line range hint 730-738: 请确保版本升级的破坏性变更已被妥善记录
Dialog 组件从 v2 升级到 v3 是一个主版本升级，建议：
- 确保在升级指南中详细说明了破坏性变更
- 验证新版本是否向后兼容
✅ Verification successful
Let's check the content of these migration guides to verify if they document the Dialog component's breaking changes.
让我们检查一下 Dialog 组件的具体变更内容：
Dialog组件的破坏性变更已在迁移指南中详细说明
从迁移指南中可以看到，Dialog组件的v3版本主要包含以下破坏性变更：
- API命名规范化：如
okText改为confirmText，mask改为overlay等 - 移除样式相关属性：如
textAlign改用CSS变量控制 - 行为变更：
cancelAutoClose改为beforeCancel和beforeClose钩子函数 - 功能优化：新增了
overlayStyle、overlayClassName、onOverlayClick等属性
这些变更都已在迁移指南中有清晰的说明和升级建议。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：检查是否存在版本升级指南文档
# 查找可能包含迁移指南的文件
fd -t f -e md migrate
Length of output: 61
Script:
#!/bin/bash
# 检查迁移指南中是否包含 Dialog 相关的变更说明
echo "=== migrate-from-v2.md 内容 ==="
cat migrate-from-v2.md
echo -e "\n=== migrate-from-v1.md 内容 ==="
cat migrate-from-v1.md
# 同时搜索其他可能包含 Dialog 组件文档的位置
echo -e "\n=== 查找 Dialog 相关文档 ==="
fd -t f "dialog" -i
Length of output: 51345
Script:
#!/bin/bash
# 检查 Dialog 组件的变更
echo "=== Dialog 组件变更说明 ==="
rg -A 10 "#### Dialog" migrate-from-v2.md
echo -e "\n=== Dialog 组件源码 ==="
cat src/packages/dialog/dialog.tsx
Length of output: 5048
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新特性
Dialog、Badge、Avatar等。Dialog组件新增confirmText和cancelText属性，允许自定义确认和取消按钮文本。样式
Dialog组件的样式，增强灵活性和可维护性，优化关闭按钮的位置和样式。修复
View组件替代div，改善了Demo7组件的结构。