feat(toast): v14 #2795
feat(toast): v14 #2795
Conversation
Walkthrough本次变更主要集中在 Changes
Possibly related PRs
Suggested labels
Suggested reviewers
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial 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 ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #2795 +/- ##
==========================================
Coverage 83.99% 83.99%
==========================================
Files 220 220
Lines 17885 17893 +8
Branches 2679 2679
==========================================
+ Hits 15023 15030 +7
- Misses 2857 2858 +1
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: 2
🧹 Outside diff range and nitpick comments (5)
src/packages/toast/demos/h5/demo1.tsx (2)
11-18: 建议优化标题提示的实现方式为了保持代码风格的一致性，建议考虑以下优化：
- 可以将回调函数提取为独立的函数，提高代码可读性
- 考虑添加类型注解，增强代码的可维护性
建议按照以下方式重构：
+const handleTitleToast = () => { + Toast.show({ + title: '成功提示', + }) +} <Cell title="标题提示" - onClick={() => - Toast.show({ - title: '成功提示', - }) - } + onClick={handleTitleToast} />
Line range hint
1-58: 建议补充使用说明文档作为示例代码，建议：
- 添加必要的代码注释，说明每种 Toast 类型的使用场景
- 补充 TypeScript 类型定义的示例
- 添加不同配置参数的说明
需要我帮您生成详细的示例文档吗？
src/packages/toast/demos/taro/demo1.tsx (1)
Line range hint
46-91: 建议提取重复的状态更新逻辑所有的 Cell 组件都重复调用
setShowToast(true)，建议将这个逻辑封装到openToast函数中。const openToast = ( type: string, title?: string, duration?: number, icon?: string, content?: string ) => { const changeState = Object.assign(state, { type, content, duration, icon, title, }) setState(changeState) + setShowToast(true) } return ( <> <Cell title="文字提示" onClick={() => { - openToast('text', '网络失败，请稍后再试~') - setShowToast(true) + openToast('text', '网络失败，请稍后再试~') }} />src/packages/toast/toast.scss (2)
66-69: 注意：description类的宽度设置需要考虑兼容性新增的
nut-toast-inner-descrption类使用了具体的百分比值（68.2%）。虽然注释显示之前考虑过使用固定像素值，但建议：
- 确保这个百分比值在各种设备上都能正常显示
- 考虑添加响应式断点
建议参考以下实现：
&-descrption { - max-width: 68.2%; + max-width: min(68.2%, 256px); }
Line range hint
121-132: 图标样式调整建议关于图标包装器的margin调整（3px 0 5px），建议：
- 使用设计系统中定义的间距变量
- 考虑使用rem单位以提高可访问性
建议修改为：
margin: 3px 0 5px; +/* 使用变量确保一致性 */ +margin: var(--nut-toast-icon-margin, 3px 0 5px);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (10)
src/packages/toast/Notification.tsx(2 hunks)src/packages/toast/demos/h5/demo1.tsx(4 hunks)src/packages/toast/demos/taro/demo1.tsx(2 hunks)src/packages/toast/doc.en-US.md(1 hunks)src/packages/toast/doc.md(1 hunks)src/packages/toast/doc.taro.md(1 hunks)src/packages/toast/doc.zh-TW.md(1 hunks)src/packages/toast/toast.scss(4 hunks)src/packages/toast/toast.taro.tsx(3 hunks)src/styles/variables.scss(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- src/packages/toast/doc.zh-TW.md
🧰 Additional context used
🪛 GitHub Check: codecov/patch
src/packages/toast/Notification.tsx
[warning] 161-161: src/packages/toast/Notification.tsx#L161
Added line #L161 was not covered by tests
🔇 Additional comments (14)
src/packages/toast/demos/h5/demo1.tsx (1)
33-33: 统一使用 title 属性的更改符合预期
将 content 替换为 title 的修改符合组件 API 的规范化要求，这样的改动有助于：
- 保持 API 的一致性
- 简化组件的使用方式
- 提高代码的可维护性
Also applies to: 42-42, 51-51
src/packages/toast/demos/taro/demo1.tsx (1)
16-19: 请确认此 API 变更是否已在文档中更新
函数签名的变更可能会影响现有的集成。建议：
- 确保在 CHANGELOG 中记录此破坏性变更
- 考虑添加参数类型注释以提高代码可读性
const openToast = (
type: string,
- title?: string,
+ title?: string, // Toast 显示的标题文本
duration?: number,
icon?: string,
- content?: string
+ content?: string // Toast 显示的内容文本
) => {src/packages/toast/doc.md (1)
101-101: CSS 变量更新需要验证一致性
CSS 变量的更新涉及到内边距和圆角的调整，这些改动可能会影响组件的视觉呈现。建议确认这些更改是否与设计规范一致，并验证在不同场景下的显示效果。
Also applies to: 103-103
✅ Verification successful
CSS 变量更新已验证一致
经过验证，Toast 组件的 CSS 变量更新在整个代码库中保持一致：
- 所有文档文件（中文、英文、繁体中文）中的变量定义都已更新为新值：
--nutui-toast-inner-padding: 13px 16px--nutui-toast-inner-border-radius: $radius-xl
- 样式变量文件（variables.scss）中正确引用了这些变量
- Toast 组件样式文件中正确使用了这些变量
这些变更是统一且完整的，无需进一步调整。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：验证 Toast 相关的样式变量在其他文件中是否保持一致
# 检查其他文档文件中的变量定义
echo "检查文档文件中的变量定义..."
rg --type md "nutui-toast-inner-(padding|border-radius)"
# 检查样式文件中的变量使用
echo "检查样式文件中的变量使用..."
rg --type scss "toast-inner-(padding|border-radius)"
Length of output: 1327
Script:
#!/bin/bash
# 检查样式文件中的变量使用（使用更通用的搜索）
echo "检查样式文件..."
rg "\-\-nutui-toast-inner-(padding|border-radius)" -g "*.{less,css,scss,sass}"
# 检查主题配置文件
echo "检查主题配置文件..."
rg "toast-inner-(padding|border-radius)" -g "*theme*"
rg "toast-inner-(padding|border-radius)" -g "*style*"
rg "toast-inner-(padding|border-radius)" -g "*var*"
# 检查 Toast 组件的样式文件
echo "检查 Toast 组件样式..."
fd "toast" --type f -e less -e scss -e css --exec cat {}
Length of output: 4762
src/packages/toast/doc.taro.md (1)
97-97: 样式变量更新优化了设计一致性
这些变更通过以下方式改进了组件设计：
- 调整了内边距使组件更加紧凑，更适合移动端显示
- 使用设计系统变量
$radius-xl替代固定值，提高了组件间的视觉一致性
建议在不同设备上验证新的尺寸是否达到预期的视觉效果。
Also applies to: 99-99
✅ Verification successful
内边距值设置合理且保持一致性
搜索结果显示：
- 内边距值
13px 16px在 Cell 和 Toast 组件中统一使用，体现了设计系统的一致性 - 这些值已在全局变量文件
src/styles/variables.scss中正确定义 - 相关文档（中文、英文、繁体）都已同步更新
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查其他组件是否使用了相同的设计变量
# 搜索其他使用 $radius-xl 的组件
rg "\$radius-xl" --type scss
# 检查其他组件的内边距值是否一致
rg "13px 16px" --type scss
Length of output: 116
Script:
#!/bin/bash
# 搜索其他使用 $radius-xl 的组件
rg "\$radius-xl"
# 检查其他组件的内边距值是否一致
rg "13px 16px"
# 查找所有样式相关文件
fd "\.(scss|css|less)$"
# 检查 Toast 组件的其他样式文件
fd "toast.*\.(scss|css|less)$"
Length of output: 7221
src/packages/toast/doc.en-US.md (2)
105-105: 使用设计令牌（Design Token）是个很好的改进！
将固定值 12px 替换为 $radius-xl 设计令牌可以提高样式的一致性和可维护性。这种做法符合最佳实践。
103-105: 请验证文档的一致性
确保这些 CSS 变量的新值在所有相关文档中保持一致：
- doc.md
- doc.taro.md
- doc.zh-TW.md
✅ Verification successful
CSS 变量值在所有文档中保持一致
经过验证，以下 CSS 变量在所有相关文档（doc.md、doc.taro.md、doc.zh-TW.md 和 doc.en-US.md）中的值完全一致：
--nutui-toast-inner-padding:13px 16px--nutui-toast-inner-bg-color:$color-mask--nutui-toast-inner-border-radius:$radius-xl
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 描述：验证所有文档文件中的 CSS 变量值是否一致
# 检查所有文档文件中的变量值
echo "检查 --nutui-toast-inner-padding 变量："
rg --type md "toast-inner-padding.*13px 16px" src/packages/toast/
echo "检查 --nutui-toast-inner-border-radius 变量："
rg --type md "toast-inner-border-radius.*\$radius-xl" src/packages/toast/
Length of output: 721
Script:
#!/bin/bash
# 检查所有文档文件中的 border-radius 变量值
echo "检查所有文档中的 toast-inner-border-radius 变量："
rg --type md "toast-inner-border-radius.*\|" src/packages/toast/
# 检查所有文档文件中的 bg-color 变量值
echo "检查所有文档中的 toast-inner-bg-color 变量："
rg --type md "toast-inner-bg-color.*\|" src/packages/toast/
Length of output: 1129
src/packages/toast/toast.scss (2)
110-110: 行高调整符合设计规范
文本行高的调整（正文20px，标题22px）遵循了常见的设计规范，有助于提高可读性。
Also applies to: 118-118
55-56: 建议重新评估最大宽度的设置
将最大宽度设置为60%可能在某些极端情况下（如横屏模式或较长的提示文本）导致显示不完整。建议：
- 考虑使用媒体查询来适配不同屏幕尺寸
- 进行多种设备和方向的测试验证
✅ Verification successful
The previous command failed because the file type flag wasn't supported. Let's try a broader search to understand the width constraints across the codebase and any responsive design patterns.
Toast组件的最大宽度设置是合理的
根据代码库分析，60%的最大宽度设置是合适的：
- Toast组件的宽度设置（60%）与描述文本的宽度设置（68.2%）形成了合理的层次关系
- 其他组件如NoticeBar、Menu等都采用了百分比的自适应布局
- 没有发现其他组件出现因类似宽度限制导致的问题
建议保持当前的宽度设置，无需额外的媒体查询适配。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查其他组件是否使用了类似的宽度限制
rg "max-width: 60%" --type scss
Length of output: 62
Script:
#!/bin/bash
# Search for max-width patterns in all files
rg "max-width:" -A 1 -B 1
# Also search for responsive design patterns
rg "@media.*max-width"
Length of output: 2409
src/packages/toast/Notification.tsx (2)
141-150: 类名处理优化得当！
使用 classNames 工具函数来处理条件类名的方式非常清晰，特别是对于 ${classPrefix}-inner-descrption 的条件判断处理。
159-161: 🛠️ Refactor suggestion
建议添加内容渲染的测试用例
内容的条件渲染逻辑已优化，但缺少测试覆盖。建议添加以下测试场景：
- 有 content 时的渲染测试
- 无 content 时的渲染测试
- content 为不同类型（字符串/ReactNode）时的渲染测试
运行以下脚本查找现有的测试文件：
需要我帮您生成相关的测试代码吗？
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 161-161: src/packages/toast/Notification.tsx#L161
Added line #L161 was not covered by tests
src/packages/toast/toast.taro.tsx (2)
196-205: 类名处理优化得当
使用classNames工具函数重构类名处理的方式值得肯定：
- 提高了代码的可维护性
- 条件类名的处理更加清晰
- 符合React组件开发的最佳实践
165-168: 验证图标尺寸是否符合设计规范
由于移除了iconSize属性，请确认默认图标尺寸是否满足以下要求：
- 在不同设备尺寸下的可见性
- 与其他组件的视觉一致性
- 触摸区域的可访问性
✅ Verification successful
Let me gather more information about the icon components and their default sizes.
移除 iconSize 属性是合理的设计决策
Toast 组件已经在样式文件中定义了统一的图标尺寸（24x24），这符合以下设计原则：
- 组件内置了合适的默认尺寸，确保了视觉一致性
.nut-icon类设置了固定的宽高，保证了良好的可见性- 图标尺寸与文字大小配比合理，符合移动端交互规范
不需要对默认图标尺寸进行调整。如果特殊场景需要自定义图标，可以通过 icon 属性传入自定义组件实现。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查其他组件中的图标尺寸使用情况
rg -A 2 '<(Success|Failure|Tips|Loading)\s+size='
Length of output: 798
Script:
#!/bin/bash
# 检查 Success, Failure, Tips, Loading 组件的定义和默认属性
ast-grep --pattern 'const $_ = ({ size = $_ }) => {'
# 检查 toast 组件中的样式定义
rg -l "\.icon" src/packages/toast/
Length of output: 211
Script:
#!/bin/bash
# 检查 toast 组件中的样式定义具体内容
rg -A 3 "\.icon" src/packages/toast/demos/taro/demo*.tsx
# 检查 toast 组件的样式文件
fd -e scss -e css . src/packages/toast/ --exec cat {}
Length of output: 4041
src/styles/variables.scss (2)
904-904: 优化 Toast 组件内边距
内边距从 16px 24px 调整为 13px 16px，使组件更加紧凑，提升空间利用率。
908-908: 统一 Toast 组件圆角样式
使用设计系统变量 $radius-xl 替代固定值，提高样式一致性和可维护性。
| openToast( | ||
| 'text', | ||
| undefined, | ||
| undefined, | ||
| undefined, | ||
| '网络失败，请稍后再试~' | ||
| ) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议简化参数传递逻辑
当前实现中传递了多个 undefined 参数，这降低了代码的可读性。建议简化为：
- openToast(
- 'text',
- undefined,
- undefined,
- undefined,
- '网络失败，请稍后再试~'
- )
+ openToast('text', '网络失败，请稍后再试~')Committable suggestion skipped: line range outside the PR's diff.
| @@ -43,27 +43,27 @@ const Demo1 = () => { | |||
| <Cell | |||
| title="文字提示" | |||
| onClick={() => { | |||
| openToast('text', '网络失败，请稍后再试~') | |||
| openToast( | |||
| 'text', | |||
| min-width: 30%; | ||
| max-width: 95.7%; | ||
| min-width: 96px; | ||
| max-width: 60%; |
There was a problem hiding this comment.
根据什么换算为百分比？视觉规范区分了带Icon 和不带 Icon 的最大宽度。
There was a problem hiding this comment.
根据视觉给的宽度除以375计算的 带描述的有设置最大宽度
| `${classPrefix}-inner-${size}`, | ||
| `${classPrefix}-inner-${wordBreak}`, | ||
| { | ||
| [`${classPrefix}-inner-descrption`]: content || msg, |
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
title属性。openToast函数的参数结构，提高了可读性。样式
.nut-toast组件的样式，优化了布局和文本行高。文档