feat: dialog v15 adaption #2900
Conversation
概述演练本次更新是 NutUI React 从 v2.x 到 v3.x 的重大升级。主要变更包括组件 API 重命名、主题变量调整、图标库分离以及组件分类重构。升级过程提供了 codemod CLI 工具辅助开发者迁移。变更涉及多个组件的属性、事件命名，并引入了更加一致和清晰的设计规范，旨在提升开发者体验。 变更
建议的审阅者
相关诗歌
可能相关的 PR
序列图sequenceDiagram
participant Dev as 开发者
participant Codemod as Codemod CLI 工具
participant NutUI as NutUI v3.x
Dev->>Codemod: 执行迁移命令
Codemod->>NutUI: 自动转换组件 API
Codemod-->>Dev: 提供迁移报告
Dev->>NutUI: 手动检查并微调
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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 @@
## feat_v3.x #2900 +/- ##
=============================================
+ Coverage 85.97% 85.98% +0.01%
=============================================
Files 273 273
Lines 18492 18506 +14
Branches 2736 2741 +5
=============================================
+ Hits 15898 15912 +14
Misses 2589 2589
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: 2
🧹 Nitpick comments (5)
src/packages/button/button.scss (2)
20-20: 字体粗细变量统一化调整将基础按钮的字体粗细从特定变量改为使用通用的
$font-weight变量，有助于保持设计系统的一致性。建议在设计文档中说明这个变更的原因，以便其他开发者理解这个统一化的决定。
Line range hint
315-317: 普通尺寸主按钮的字重设置为普通尺寸的主按钮单独设置粗体，这种做法可能导致样式维护困难。
建议将这个样式合并到上面的
&-primary-solid规则中，以减少代码重复：&-primary-solid { background: $button-primary-background-color; color: $button-primary-color; border-color: transparent; font-weight: $font-weight-bold; + &.nut-button-normal { + font-weight: $font-weight-bold; + } &.nut-button-small, &.nut-button-mini { font-weight: $font-weight; } } -&-primary.nut-button-solid.nut-button-normal { - font-weight: $font-weight-bold; -}src/packages/dialog/dialog.tsx (2)
87-89: btnClass 逻辑合理，但需注意可读性。当前判断仅在隐藏任一按钮时，才添加
${classPrefix}-footer-block。可读性虽无碍，但后期若新增逻辑需注意此处的扩展性。
142-142: 系统图标命名易混淆，可优化命名。变量名
systomIcon拼写易与 system 搞混，建议更改为更具语义化的命名，例如closeIconNode。src/packages/dialog/doc.taro.md (1)
144-148: 关闭按钮的样式优化提升了可用性关闭按钮尺寸的统一调整（16px）和颜色的更新（#FFFFFF），以及新增的底部关闭图标尺寸变量（24px），使交互更加清晰。建议考虑添加悬停状态的样式定义。
建议添加以下变量：
+| \--nutui-dialog-close-hover-color | 对话框关闭按钮悬停时的颜色 | `rgba(255, 255, 255, 0.8)` |
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (16)
migrate-from-v2.md(2 hunks)src/config.json(1 hunks)src/packages/button/button.scss(1 hunks)src/packages/button/doc.en-US.md(0 hunks)src/packages/button/doc.md(0 hunks)src/packages/button/doc.taro.md(0 hunks)src/packages/button/doc.zh-TW.md(0 hunks)src/packages/dialog/demos/taro/demo2.tsx(1 hunks)src/packages/dialog/dialog.scss(5 hunks)src/packages/dialog/dialog.taro.tsx(3 hunks)src/packages/dialog/dialog.tsx(4 hunks)src/packages/dialog/doc.en-US.md(1 hunks)src/packages/dialog/doc.md(1 hunks)src/packages/dialog/doc.taro.md(1 hunks)src/packages/dialog/doc.zh-TW.md(1 hunks)src/styles/variables.scss(4 hunks)
💤 Files with no reviewable changes (4)
- src/packages/button/doc.en-US.md
- src/packages/button/doc.zh-TW.md
- src/packages/button/doc.taro.md
- src/packages/button/doc.md
🧰 Additional context used
🪛 GitHub Check: build
src/packages/dialog/dialog.tsx
[failure] 97-97:
Argument of type 'MouseEvent<HTMLDivElement, MouseEvent>' is not assignable to parameter of type 'MouseEvent<HTMLButtonElement, MouseEvent>'.
src/packages/dialog/dialog.taro.tsx
[failure] 128-128:
Argument of type 'ITouchEvent' is not assignable to parameter of type 'MouseEvent<HTMLButtonElement, MouseEvent>'.
🔇 Additional comments (32)
src/packages/button/button.scss (1)
Line range hint 249-252: 主按钮字体粗细的差异化处理
对主按钮（Primary）的实心样式采用了粗体（$font-weight-bold），同时为小尺寸和迷你尺寸保留普通字重，这种差异化处理有助于突出主按钮的视觉层级。
请确认这种字重的差异化是否与设计规范一致。运行以下脚本检查相关的设计标记：
✅ Verification successful
字重差异化处理符合设计规范
根据代码库中的设计变量定义，主题文件（src/styles/theme-default.scss）中定义了三个标准字重：
- 轻量：300 (
--nutui-font-weight-light) - 常规：400 (
--nutui-font-weight) - 加粗：600 (
--nutui-font-weight-bold)
按钮组件中对主按钮使用加粗字重，而小尺寸和迷你尺寸使用常规字重的处理方式，完全符合这些预设的设计标准。这种差异化处理有助于在保持视觉层级的同时确保小尺寸按钮的可读性。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查设计标记中是否定义了这种差异化处理
rg -l "font-weight.*bold.*primary" "design-tokens" "style-guide"
Length of output: 168
Script:
#!/bin/bash
# 搜索设计相关的文件
fd -t f "design|theme|token|style" -E "*.test.*" -E "*.spec.*"
# 搜索字重相关的设计变量定义
rg -i "font.?weight|字重|粗细" --type scss
Length of output: 608
Script:
#!/bin/bash
# 检查主题文件中的字重定义
cat src/styles/theme-default.scss
# 检查其他可能包含字重变量定义的文件
cat src/sites/assets/styles/md-style.scss
# 使用ripgrep搜索字重相关定义，不指定文件类型
rg -i "font.?weight|字重|粗细"
Length of output: 35928
src/packages/dialog/demos/taro/demo2.tsx (1)
22-22: 更改弹窗标题，符合设计规范。
将“提示弹框”改为更具有通用性的“标题”是合理的调整，建议同步更新相应文档说明。
src/packages/dialog/dialog.tsx (4)
4-4: 引入新图标库，增强可拓展性。
新增 Failure 图标，有助于在不同场景下灵活使用。请确保与团队协商统一的图标设计规范。
53-53: 新增 footerDirection 属性，增强组件灵活性。
此属性可让弹窗按钮垂直或水平布局，建议在文档中详细说明默认值与使用场景。
114-115: 统一按钮大小，提升一致性。
设置 size="large" 能有效统一按钮尺寸，避免不同场景下出现布局差异。
145-145: 灵活使用自定义图标，增强可拓展性。
在此使用 React.isValidElement 判断自定义图标非常灵活，建议在文档或注释中明确以便团队理解和继续维护。
src/packages/dialog/dialog.taro.tsx (5)
6-6: 新增 Failure 图标，保持与主包一致。
与 dialog.tsx 文件中的更改保持一致，可避免跨平台差异导致的功能不一致。
118-120: 自定义样式类名，便于无额外样式冲突。
通过 btnClass 来控制按钮布局与显示，后续若添加更多布局模式时，请谨慎扩展以维持清晰度。
145-145: 保持统一按钮大小。
同样使用了 size="large"，在 Taro 环境下可确保视觉与交互的一致性。
174-174: 区分不同形式的关闭图标。
根据 closeIconPosition 切换图标，有利于实现多样化的交互体验，建议在文档中说明底部关闭图标的使用场景。
177-177: 灵活应用自定义节点，保持可拓展性。
与 dialog.tsx 中一致，支持 React.isValidElement。在 Taro 环境下此方式可行，但需确认编译差异不会影响实际渲染。
src/packages/dialog/dialog.scss (7)
10-10: 使用 min-width 提升适配能力。
新增 $dialog-min-width，能适应更宽的内容需求，建议与设计团队协商默认值。
64-66: 底部关闭图标尺寸、位置有较大改动。
将底部关闭图标的宽高改为 $dialog-bottom-close-icon-size 并调整 bottom 等，引入背景与圆角处理，这些改动会对现有场景产生明显样式影响，需仔细验证在小屏等特殊设备上的显示效果。
Also applies to: 68-74
98-98: 内容区文字颜色与标题保持一致。
由 $color-text 改为 $color-title，可让整体设计看起来更统一，注意不同场景下的对比度与可读性。
117-117: 按钮最小宽度在纵向布局下设置为 100%。
确保按钮在垂直方向上能有效填充宽度，建议留意小屏下的按钮堆叠问题。
Line range hint 119-141: 垂直布局下的取消按钮样式细化。
包括字体大小、边距与对齐方式等，能让多个按钮在纵向排布时更美观，建议在文档或 Demo 中提供示例以便开发者快速理解用法。
144-145: 加粗确认按钮文字，强化视觉权重。
font-weight 的增加能够突出确认按钮，适用于高优先级操作场景。
146-149: 新增 &-block，方便在特定场景下让按钮自适应父级宽度。
此类可让按钮占满父容器宽度，对于移动端的全屏表单等场景十分适用。
src/packages/dialog/doc.taro.md (2)
130-133: 新增的尺寸约束提升了组件的一致性
新增的最小宽度和最大高度约束，以及更新后的最小高度值，能够确保对话框在不同场景下保持一致的视觉表现。
135-140: 内容间距和标题样式的调整优化了视觉层级
内容边距从 5px 0 24px 0 调整为 12px 0 16px 0，标题字重增加到 600，这些改动有助于改善内容的视觉层级和可读性。
src/packages/dialog/doc.md (1)
150-153: CSS变量的修改保持了跨文档的一致性
各语言版本的文档中，CSS变量的更新保持了完全一致，这对于维护多语言文档的准确性非常重要。
Also applies to: 155-155, 160-160, 164-168
src/packages/dialog/doc.zh-TW.md (1)
150-153: CSS變量的修改保持了跨文檔的一致性
各語言版本的文檔中，CSS變量的更新保持了完全一致，這對於維護多語言文檔的準確性非常重要。
Also applies to: 155-155, 160-160, 164-168
src/packages/dialog/doc.en-US.md (3)
150-153: 新增的对话框尺寸变量定义合理
新增的最小宽度和最大高度变量有助于确保对话框在不同场景下保持一致的视觉效果。
155-160: 对话框内容间距和字体调整提升了可读性
- 内容边距从
5px 0 24px 0调整为12px 0 16px 0，使布局更加紧凑 - 标题字重从
normal调整为600，增强了视觉层次
164-168: 关闭按钮样式优化合理
- 按钮尺寸从 18px 调整为 16px，使其更加协调
- 新增底部关闭图标尺寸变量
- 关闭按钮颜色调整提升了可见性
migrate-from-v2.md (1)
548-550: 对话框操作按钮的样式优化合理
- 优化了操作按钮的上下布局样式
- 单个主操作按钮时采用撑开样式，提升视觉效果
- 底部图标大小通过样式变量统一管理，默认值 16px 适中
src/config.json (1)
763-763: Dialog 组件升级到 v15 版本
通过配置 "v15": true 标记 Dialog 组件已适配 v15 版本，确保与其他组件保持一致的升级节奏。
src/styles/variables.scss (5)
1300-1300: 对话框尺寸变量定义合理！
新增的最小宽度(240px)和最大高度(420px)的变量定义合理，这些值能确保对话框在各种内容长度下都能保持良好的可用性和视觉效果。
Also applies to: 1303-1303
1305-1305: 优化圆角使用系统变量！
将对话框圆角改为使用 $radius-xl 变量是个很好的改进，这样能确保与设计系统的其他组件保持视觉一致性。
1307-1309: 内容边距调整更加合理！
将内容边距从 "5px 0 24px 0" 调整为 "12px 0 16px 0"，上下间距更加均衡，视觉层次感更强。
1339-1341: 标题字重调整提升层级感！
将标题字重从 normal 调整为 $font-weight-bold，不仅提升了视觉层级感，而且通过使用系统变量保证了与其他组件的一致性。
1347-1352: 关闭按钮尺寸优化！
- 将关闭按钮尺寸从 18px 调整为 16px，视觉更加精致
- 新增底部关闭图标尺寸变量(24px)，增加了布局灵活性
这些改动使关闭按钮的样式更加合理和灵活。
| {!hideCancelButton && | ||
| (footerDirection === 'vertical' ? ( | ||
| <div | ||
| className={`${classPrefix}-footer-cancel ${btnClass}`} | ||
| onClick={(e) => handleCancel(e)} | ||
| > | ||
| {cancelText || locale.cancel} | ||
| </div> | ||
| ) : ( | ||
| <Button | ||
| type="default" | ||
| size="large" | ||
| className={`${classPrefix}-footer-cancel ${btnClass}`} | ||
| onClick={(e) => handleCancel(e)} | ||
| > | ||
| {cancelText || locale.cancel} | ||
| </Button> | ||
| ))} |
There was a problem hiding this comment.
使用 div 包裹取消按钮时的类型不一致警告。
静态分析提示指出 onClick 期望的是 MouseEvent<HTMLButtonElement>，但实际使用了 div 元素。可通过以下方式修复：
- 调整为
<button>或Button组件，并结合样式进行布局； - 若必须使用
<div>，需自行处理对应的事件类型声明以避免类型不匹配。
🧰 Tools
🪛 GitHub Check: build
[failure] 97-97:
Argument of type 'MouseEvent<HTMLDivElement, MouseEvent>' is not assignable to parameter of type 'MouseEvent<HTMLButtonElement, MouseEvent>'.
src/packages/dialog/dialog.taro.tsx
Outdated
| {!hideCancelButton && | ||
| (footerDirection === 'vertical' ? ( | ||
| <View | ||
| className={`${classPrefix}-footer-cancel ${btnClass}`} | ||
| onClick={(e) => handleCancel(e)} | ||
| > | ||
| {cancelText || locale.cancel} | ||
| </View> | ||
| ) : ( | ||
| <Button | ||
| type="default" | ||
| size="large" | ||
| className={`${classPrefix}-footer-cancel ${btnClass}`} | ||
| onClick={(e) => handleCancel(e)} | ||
| > | ||
| {cancelText || locale.cancel} | ||
| </Button> | ||
| ))} |
There was a problem hiding this comment.
垂直布局下的点击事件类型警告。
静态分析提示与前述问题相似，<View onClick> 的事件类型与预期 HTMLButtonElement 存在冲突。可考虑改为 <Button> 或封装事件类型。
🧰 Tools
🪛 GitHub Check: build
[failure] 128-128:
Argument of type 'ITouchEvent' is not assignable to parameter of type 'MouseEvent<HTMLButtonElement, MouseEvent>'.
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
src/packages/dialog/dialog.taro.tsx (1)
126-131:⚠️ Potential issue需要修复垂直布局下的事件类型问题
在垂直布局模式下，
View组件的onClick事件处理器存在类型不匹配的问题：
- 当前代码使用
as any来强制类型转换，这不是一个好的实践- 这可能会在运行时导致意外行为
建议采用以下解决方案：
-<View - className={`${classPrefix}-footer-cancel ${btnClass}`} - onClick={(e) => handleCancel(e as any)} -> +<Button + className={`${classPrefix}-footer-cancel ${btnClass}`} + onClick={handleCancel} +>
🧹 Nitpick comments (1)
src/packages/dialog/dialog.taro.tsx (1)
174-177: 建议修正变量命名中的拼写错误变量
systomIcon中存在拼写错误，应该是systemIcon。虽然不影响功能，但为了代码质量建议修正。-const systomIcon = closeIconPosition !== 'bottom' ? <Close /> : <Failure /> +const systemIcon = closeIconPosition !== 'bottom' ? <Close /> : <Failure /> -{React.isValidElement(closeIcon) ? closeIcon : systomIcon} +{React.isValidElement(closeIcon) ? closeIcon : systemIcon}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/packages/dialog/dialog.taro.tsx(3 hunks)src/packages/dialog/dialog.tsx(5 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/packages/dialog/dialog.tsx
🔇 Additional comments (3)
src/packages/dialog/dialog.taro.tsx (3)
6-6: 导入语句看起来没有问题！
新增的 Failure 图标导入正确，并且与现有的 Close 图标导入保持一致。
118-120: 按钮样式类的条件判断逻辑合理！
根据取消按钮和确认按钮的可见性来添加 block 样式类的实现方式清晰明了。
145-145: 按钮尺寸属性添加合理！
添加 size="large" 属性有助于保持按钮尺寸的一致性，这是一个很好的UI改进。
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
发行说明
新特性
重大变更
modelValue→valueprimary-color→color-primary样式更新
文档改进
兼容性