feat(Dialog): v15 #2845
feat(Dialog): v15 #2845
Conversation
Walkthrough本次变更涉及多个组件的样式和功能更新，主要集中在按钮和对话框的样式调整。按钮的样式在 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Button
participant Dialog
User->>Button: 点击操作按钮
Button->>Dialog: 打开对话框
Dialog->>User: 显示对话框内容
User->>Dialog: 点击确认
Dialog->>User: 关闭对话框
Possibly related PRs
Suggested labels
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 @@
## feat_v3.x #2845 +/- ##
==========================================
Coverage 84.14% 84.15%
==========================================
Files 273 273
Lines 18103 18114 +11
Branches 2690 2694 +4
==========================================
+ Hits 15232 15243 +11
Misses 2866 2866
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 (1)
src/packages/dialog/dialog.tsx (1)
87-89: 代码优化建议：btnClass 逻辑可以简化建议使用模板字符串简化类名拼接逻辑。
- const btnClass = - hideCancelButton || hideConfirmButton ? `${classPrefix}-footer-block` : '' + const btnClass = classNames({ + [`${classPrefix}-footer-block`]: hideCancelButton || hideConfirmButton + })
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (7)
src/packages/button/button.scss(5 hunks)src/packages/button/demos/taro/demo8.tsx(1 hunks)src/packages/dialog/demos/taro/demo2.tsx(1 hunks)src/packages/dialog/dialog.scss(5 hunks)src/packages/dialog/dialog.taro.tsx(1 hunks)src/packages/dialog/dialog.tsx(2 hunks)src/styles/variables.scss(8 hunks)
🧰 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 (26)
src/styles/variables.scss (11)
210-211: 优化按钮的圆角和边框宽度变量
将按钮的圆角设置为 $radius-s，边框宽度设置为 0.5px，增强了按钮样式的一致性和可维护性。
234-234: 调整默认按钮的字体大小
将 $button-default-font-size 更新为 $font-size-base，提高了按钮文字的可读性。
247-250: 统一超大按钮的圆角设置变量
将 $button-xlarge-border-radius 设置为 $radius-base，确保了超大按钮的圆角样式一致。
256-256: 调整大按钮的字体大小
将 $button-large-font-size 更新为 $font-size-l，符合大按钮的视觉要求。
264-264: 统一大按钮的圆角设置变量
将 $button-large-border-radius 设置为 $radius-s，确保了大按钮的圆角样式一致。
275-275: 小按钮的圆角设置优化
将 $button-small-border-radius 设置为 $radius-xs，使小按钮的圆角更加符合设计规范。
286-286: 迷你按钮的圆角设置优化
将 $button-mini-border-radius 设置为 $radius-xs，使迷你按钮的圆角样式与整体风格一致。
1339-1344: 为对话框添加最小宽度和最大高度
新增了 $dialog-min-width 和 $dialog-max-height 变量，增强了对话框在不同屏幕尺寸下的响应式表现。
1351-1351: 调整对话框内容的内边距
更新 $dialog-content-margin 为 12px 0 16px 0，优化了内容与边界的间距，提升了视觉美观度。
1383-1383: 提高对话框标题的字体粗细
将 $dialog-header-font-weight 设置为 $font-weight-bold，使标题更加突出，提升用户注意力。
1387-1391: 调整对话框关闭按钮的样式
新增 $dialog-vertical-footer-ok-margin-top、$dialog-close-width 和 $dialog-close-height 等变量，优化了关闭按钮的位置和尺寸，改善了用户体验。
src/packages/dialog/demos/taro/demo2.tsx (1)
22-22: 更新对话框标题和按钮
将标题更新为“标题”，设置确认按钮文本为“确认”，并隐藏取消按钮，使对话框更加简洁明了。
src/packages/button/demos/taro/demo8.tsx (1)
41-44: 新增操作按钮并调整尺寸
添加了一个标签为“操作按钮”的按钮，并设置了大尺寸，丰富了按钮示例，提供了更多使用场景。
src/packages/dialog/dialog.scss (8)
9-9: 为对话框设置最小宽度
新增 min-width: $dialog-min-width;，确保对话框在小屏幕设备上也能保持良好的展示效果。
11-11: 限制对话框的最大高度
设置 max-height: 67%;，防止内容过多时对话框超出屏幕范围，提升用户体验。
92-92: 修改对话框内容的文字颜色
将 .nut-dialog-content 的文字颜色更新为 $color-title，提高了内容的可读性。
111-125: 优化垂直方向按钮的布局
调整垂直方向按钮的样式，确保按钮在垂直布局下能正确地填满宽度并排列。
135-135: 加强取消按钮的视觉强调
为取消按钮添加了 font-weight: $font-weight;，使其在视觉上更加突出，便于用户识别。
140-141: 加强确认按钮的视觉权重
为确认按钮设置 font-weight: $font-weight-bold;，强调主要操作，提高用户注意力。
143-146: 调整按钮块的布局
新增 .nut-dialog-footer-block 类，确保按钮在块级布局下能够填满父容器的宽度。
64-64: 调整关闭按钮的位置
将关闭按钮的 bottom 值从 -56px 修改为 -96px，需要确保在各种屏幕上显示正常，避免遮挡内容。
✅ Verification successful
Let me gather more information about the dialog styles to verify the positioning.
关闭按钮位置调整已验证安全
根据代码分析，此修改是安全的：
- 关闭按钮的位置变更是对
&-bottom类的样式调整，不会影响其他位置的关闭按钮（top-left 和 top-right） - 此修改是针对底部关闭按钮的特定样式，通过 CHANGELOG 可以看到这是一个新增的功能 (feat(dialog): support bottom close button #1978)
- 关闭按钮使用了相对定位和 transform，即使在不同屏幕尺寸下也能保持正确的位置关系
- 底部关闭按钮的颜色继承自变量
$dialog-close-color，确保了视觉上的一致性
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：检查关闭按钮在不同屏幕尺寸下的位置。
# 测试：搜索对 `.nut-dialog-close` 类的样式定义，预期结果：仅存在一个 `bottom: -96px` 的定义。
rg '\.nut-dialog-close' -A 5
Length of output: 949
Script:
#!/bin/bash
# 搜索所有与 dialog 相关的 SCSS/CSS 文件中的关闭按钮样式定义
fd -e scss -e css | xargs rg '\.nut-dialog.*close' -B 2 -A 5
# 检查是否有响应式样式定义
fd -e scss -e css | xargs rg '@media.*\.nut-dialog.*close' -B 2 -A 5
Length of output: 133
Script:
#!/bin/bash
# 直接查找 dialog.scss 文件中的关闭按钮样式
cat src/packages/dialog/dialog.scss
# 查找所有包含 dialog 和 close 的样式定义
rg -i 'dialog.*close' -B 2 -A 5
Length of output: 24259
src/packages/dialog/dialog.tsx (1)
114-115: 确认按钮样式更新
确认按钮添加 size="large" 属性符合设计规范。
src/packages/dialog/dialog.taro.tsx (1)
145-146: 按钮样式实现正确
Taro 版本的按钮样式实现与 React 版本保持一致，符合预期。
src/packages/button/button.scss (3)
104-107: 按钮圆角样式优化
新增了不同尺寸按钮的圆角变量定义，提高了样式的可维护性。
147-155: 大尺寸按钮字重设置合理
为大尺寸按钮设置统一的字重，保持了视觉一致性。
175-175: 验证被注释的 border-radius 样式
多处 border-radius 样式被注释掉，需要确认这些样式是否已经在变量中正确定义。
Also applies to: 200-200, 225-225, 242-242
✅ Verification successful
被注释的 border-radius 样式已被正确替换
从搜索结果可以看到，button 组件已经使用了更具体的 CSS 变量来定义圆角：
- 使用
$button-border-radius（默认 8px） - 使用
$button-large-border-radius（12px） - 使用
$button-small-border-radius（8px） - 使用
$button-mini-border-radius（6px）
被注释掉的 $radius-base 和 $radius-s 已被这些更明确的按钮专用变量所替代，不会造成样式不一致的问题。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查 variables.scss 中是否定义了相关的圆角变量
rg -A 1 "\$radius-(base|s)" src/styles/
Length of output: 40
Script:
#!/bin/bash
# 搜索整个代码库中的 radius 相关变量定义
rg -A 1 "\$radius"
# 搜索 button.scss 中所有的 border-radius 相关代码
rg -A 1 "border-radius" src/packages/button/
Length of output: 4567
| @@ -218,7 +218,7 @@ $button-default-background-color: var( | |||
| ) !default; | |||
| $button-default-border-color: var( | |||
| --nutui-button-default-border-color, | |||
| $color-text | |||
| $color-text-disabled | |||
There was a problem hiding this comment.
💡 Codebase verification
默认按钮边框颜色设置需要调整
从代码分析来看，确实存在不合理的颜色设置：
- 在主样式文件
variables.scss中使用了$color-text-disabled（#c2c4cc，禁用文本色）作为默认按钮边框颜色 - 而在其他主题文件（
variables-jrkf.scss和variables-jmapp.scss）中都使用了更合适的$color-default变量
建议：
- 将
variables.scss中的$button-default-border-color也修改为使用$color-default变量，以保持与其他主题一致的视觉效果 - 避免使用禁用状态的颜色作为正常状态按钮的边框色
🔗 Analysis chain
确认默认按钮边框颜色是否合适
将 $button-default-border-color 设置为 $color-text-disabled 可能会使默认按钮看起来像是禁用状态。建议确认此颜色选择是否符合设计规范。
Let me gather more information about the color variable usage and its definition.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：检查代码库中默认按钮的边框颜色设置。
# 测试：搜索使用 `$button-default-border-color` 的样式文件，预期结果：确认颜色是否正确应用。
rg '\$button-default-border-color'
Length of output: 310
Script:
#!/bin/bash
# 检查 $button-default-border-color 的具体定义和相关颜色变量
rg -A 3 '\$button-default-border-color:' src/styles/variables*.scss
# 检查 $color-text-disabled 的定义
rg '\$color-text-disabled:' src/styles/variables*.scss
# 查看按钮组件中的相关样式上下文
rg -A 5 -B 5 '\$button-default-border-color' src/packages/button/button.scss
Length of output: 1473
| {!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 事件处理器与 button 的事件处理器类型不匹配，这可能导致类型错误。
建议修改事件处理函数的类型定义：
- const handleCancel = (e: MouseEvent<HTMLButtonElement>) => {
+ const handleCancel = (e: MouseEvent<HTMLElement>) => {📝 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.
| {!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> | |
| ))} | |
| {!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> | |
| ))} |
🧰 Tools
🪛 GitHub Check: build
[failure] 97-97:
Argument of type 'MouseEvent<HTMLDivElement, MouseEvent>' is not assignable to parameter of type 'MouseEvent<HTMLButtonElement, MouseEvent>'.
| {!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.
修复 Taro View 组件事件类型问题
在 Taro 环境中，View 组件的事件类型与 React 的 MouseEvent 不兼容。
建议修改事件处理函数类型：
- const handleCancel = (e: MouseEvent<HTMLButtonElement>) => {
+ const handleCancel = (e: ITouchEvent) => {
e.stopPropagation()
if (!beforeCancel?.()) return
if (!beforeClose?.()) return
onClose?.()
onCancel?.()
}同时需要在文件顶部添加类型导入：
+import type { ITouchEvent } from '@tarojs/components'Committable suggestion skipped: line range outside the PR's diff.
🧰 Tools
🪛 GitHub Check: build
[failure] 128-128:
Argument of type 'ITouchEvent' is not assignable to parameter of type 'MouseEvent<HTMLButtonElement, MouseEvent>'.
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
样式
文档