Conversation
Walkthrough此次 PR 涉及多个文件的修改，主要包括：
Changes
Possibly related PRs
Suggested reviewers
Poem
✨ Finishing Touches
🪧 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 (
|
github-actions
bot
added
3.x
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #3082 +/- ##
=============================================
- Coverage 86.95% 86.94% -0.01%
=============================================
Files 280 280
Lines 18456 18475 +19
Branches 2785 2786 +1
=============================================
+ Hits 16049 16064 +15
- Misses 2402 2406 +4
Partials 5 5 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (1)
src/packages/notify/notify.tsx (1)
48-52: 🛠️ Refactor suggestion建议更新text方法中的type参数
text方法中仍然在传递type: 'base'参数，但根据接口变更，type属性已被移除。建议删除此无效参数。text(message: string | React.ReactNode, option = {}) { errorMsg(message) - return notice({ message, type: 'base', ...option }) + return notice({ message, ...option }) },
🧹 Nitpick comments (6)
src/packages/notify/notify.tsx (1)
48-59: 组件API简化，提高了使用便捷性移除了特定类型的通知方法（success、primary、danger、warn），保留了基础的
text和hide方法，简化了API。这种变更遵循了"少即是多"的设计原则，同时通过新增的图标和样式自定义属性，仍然可以实现相同的视觉效果。值得注意的是，此变更可能需要更新使用特定类型方法的现有代码，建议在文档中提供明确的迁移指南。
是否需要我帮助生成一个迁移指南，说明如何从旧API迁移到新API？
src/packages/notify/doc.taro.md (1)
37-37: 「自定义样式」标题与组件特性匹配，建议后续示例适度扩充说明。src/packages/notify/Notification.tsx (1)
46-46: 可考虑使用可选链以简化判断，也可增加测试覆盖此分支。可改为：
- this.props.onClose && this.props.onClose() + this.props.onClose?.()另外，测试覆盖率报告显示此处未被测试，建议补充用例。
🧰 Tools
🪛 Biome (1.9.4)
[error] 46-46: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🪛 GitHub Check: codecov/patch
[warning] 46-46: src/packages/notify/Notification.tsx#L46
Added line #L46 was not covered by testssrc/packages/notify/doc.en-US.md (3)
21-21: 更新标题 "Support Jump" 的确认
建议确认此标题能够准确传达该示例的意图（例如针对跳转功能的展示），确保用户能直观理解该 demo 的用途。
51-54: 新增属性文档更新的核查
文档中已新增属性：distance、closeable、leftIcon和rightIcon。其中：
- 对于
distance属性，建议补充说明其单位（如像素）以及定位效果；- 对于
closeable、leftIcon与rightIcon，确认描述与组件实际行为一致。
74-75: 细化 CSS 变量描述的语言表达
描述中使用 “notify” 作为名词可能显得不够正式，建议将 “The text color of notify” 修改为 “The text color of the notification”，同理，“The background color of notify” 也可调整为 “The background color of the notification”。这将使描述更加符合英语语言习惯。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (24)
packages/nutui-taro-demo/src/app.scss(1 hunks)src/packages/configprovider/types.ts(1 hunks)src/packages/drag/demo.taro.tsx(1 hunks)src/packages/notify/Notification.tsx(4 hunks)src/packages/notify/__test__/notify.spec.tsx(1 hunks)src/packages/notify/demo.taro.tsx(1 hunks)src/packages/notify/demo.tsx(1 hunks)src/packages/notify/demos/h5/demo1.tsx(2 hunks)src/packages/notify/demos/h5/demo2.tsx(1 hunks)src/packages/notify/demos/h5/demo3.tsx(1 hunks)src/packages/notify/demos/h5/demo4.tsx(1 hunks)src/packages/notify/demos/taro/demo1.tsx(1 hunks)src/packages/notify/demos/taro/demo2.tsx(1 hunks)src/packages/notify/demos/taro/demo3.tsx(1 hunks)src/packages/notify/demos/taro/demo4.tsx(1 hunks)src/packages/notify/doc.en-US.md(3 hunks)src/packages/notify/doc.md(3 hunks)src/packages/notify/doc.taro.md(3 hunks)src/packages/notify/doc.zh-TW.md(4 hunks)src/packages/notify/notify.scss(1 hunks)src/packages/notify/notify.taro.tsx(6 hunks)src/packages/notify/notify.tsx(1 hunks)src/styles/variables.scss(1 hunks)src/types/spec/notify/base.ts(1 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
src/packages/notify/Notification.tsx
[error] 46-46: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🪛 GitHub Check: codecov/patch
src/packages/notify/Notification.tsx
[warning] 46-46: src/packages/notify/Notification.tsx#L46
Added line #L46 was not covered by tests
[warning] 115-115: src/packages/notify/Notification.tsx#L115
Added line #L115 was not covered by tests
[warning] 127-129: src/packages/notify/Notification.tsx#L127-L129
Added lines #L127 - L129 were not covered by tests
🪛 LanguageTool
src/packages/notify/doc.en-US.md
[grammar] ~70-~70: The verb ‘notify’ does not usually follow articles like ‘the’. Check that ‘notify’ is spelled correctly; using ‘notify’ as a noun may be non-standard.
Context: ...-border-radius | The rounded corners of the notify | 8px | | --nutui-notify-box-shadow ...
(A_INFINITIVE)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: test
- GitHub Check: build
🔇 Additional comments (95)
src/packages/notify/demos/h5/demo1.tsx (3)
3-3: 图标导入增强用户体验引入 Reload 图标使通知消息的交互意图更加明确，与下方新增的 leftIcon 属性配合使用，增强了用户体验。
8-8: leftIcon 属性增强了通知的视觉效果添加左侧图标使通知组件更加直观，Reload 图标与"请求失败"的场景非常匹配，增强了用户体验。
22-22: 消息内容更加明确和实用将通知消息从"基础用法"更改为"请求失败，请重试刷新"，使示例更加贴近实际应用场景，提高了代码示例的实用性。
src/packages/drag/demo.taro.tsx (1)
39-41: 添加全屏背景样式增强移动端体验为非 Web 环境添加
demo-bg-full类，确保拖拽组件在移动设备上有更好的全屏显示效果，提升了用户体验。这与 app.scss 中新增的样式配合使用，保证了组件在不同环境下的一致性表现。packages/nutui-taro-demo/src/app.scss (1)
36-43: 新增全屏背景样式提升用户体验新增的
&-bg-full样式类通过设置min-height: 100vh确保内容至少填满整个视口，针对.jd-scroll-view的调整考虑了顶部导航的高度，这种处理方式可以避免页面出现不必要的滚动条或空白区域，提升了移动端的用户体验。此处的样式调整与 drag/demo.taro.tsx 和 notify/demo.taro.tsx 中的类名添加相互配合，保证了组件在移动端环境下的视觉表现。
src/packages/notify/demo.taro.tsx (4)
15-17: 翻译键优化反映了组件功能的扩展新增的
jump和close翻译键反映了通知组件功能的扩展，使文档和演示更加清晰地展示组件的新特性。
19-24: 完善繁体中文翻译保证国际化支持为繁体中文添加新的翻译键，保证了组件在不同语言环境下的一致性体验，这对于支持港澳台地区的用户非常重要。
27-29: 完善英文翻译确保国际化支持为英文版本添加对应的翻译键，确保了组件的国际化支持完整性，有利于海外开发者使用。
36-47: 演示结构优化提升了文档清晰度
- 添加
demo-bg-full类使得演示在移动端有更好的视觉效果- 重新组织的演示结构更加清晰地展示了通知组件的各个功能点
- 使用新增的翻译键作为标题，使演示内容与功能描述一一对应
这些变更使得组件文档更加直观和易于理解，提高了开发者体验。
src/packages/notify/demo.tsx (5)
10-15: 更新了翻译键以反映新功能翻译键的更改反映了通知组件功能的更新，从原来的t1和t3更改为更有描述性的jump和close，使得代码更加清晰明了。
16-21: 保持了繁体中文翻译的一致性适当更新了繁体中文翻译，确保与简体中文翻译的一致性，这有助于提供统一的用户体验。
23-26: 更新了英文翻译，提供了国际化支持英文翻译更新与中文保持一致，确保了组件的国际化支持完整性。
32-32: 简化了demo容器样式移除了内联样式，改为仅使用类名，遵循了更清晰的样式分离原则。
35-39: 标题引用与翻译键一致性更新修改标题引用以匹配新的翻译键，保持了代码与翻译资源的一致性。
src/packages/notify/__test__/notify.spec.tsx (3)
8-16: 简化了通知类型处理逻辑移除了不再需要的通知类型（如primary、success、danger等），只保留text类型，这与组件API的简化保持一致。这种变更反映了对通知组件的重构，使其更加简洁和专注。
50-55: 更新了测试断言以匹配新的DOM结构测试断言现在检查
.nut-notify-content元素的内容，而不是直接检查.nut-notify，这反映了组件DOM结构的变化，使测试与实际组件实现保持一致。
60-63: 更新了样式属性检查添加了对
bottom: 8px;样式属性的检查，确保通知位置设置正确。这与组件新的定位行为保持一致。src/packages/notify/demos/h5/demo4.tsx (3)
2-3: 引入图标组件用于通知添加了
Reload图标导入，这是新的通知功能增强的一部分，允许在通知中显示图标以提高可视化效果。
6-14: 实现了自定义样式通知功能新的
cusBgNotify函数替代了之前的时长和位置自定义函数，提供了自定义背景色和文本颜色的功能，并添加了图标支持。这种变更简化了API的同时增强了样式自定义能力。
17-22: 更新了Cell标题和点击处理函数Cell组件的标题从具体功能描述改为更通用的"自定义样式"，点击事件也相应更新为调用新的
cusBgNotify函数，消息内容更新为描述自定义背景色和字体颜色。src/packages/notify/demos/taro/demo3.tsx (4)
2-3: 引入Taro版本的图标组件添加了Taro环境下的
Reload图标导入，保持了与H5版本相似的功能，但使用了适用于Taro环境的组件库。
6-7: 改进状态管理方式将通知的显示控制改为使用React状态（useState）管理，更符合React的最佳实践。同时预设了通知内容，简化了组件实现。
10-16: 增强了通知组件功能为通知组件添加了图标和关闭按钮功能，使用
leftIcon属性添加图标，closeable属性启用关闭功能。同时实现了关闭回调以正确更新状态。这些增强使通知组件更加灵活和用户友好。
20-25: 简化了触发通知的方式更新了Cell标题为"支持关闭"，点击事件直接设置状态而不是调用函数，这种方式更直接且符合React的状态管理模式。
src/types/spec/notify/base.ts (1)
5-10: 通知组件接口更新合理，增强了自定义功能代码更新移除了
type属性，增加了distance、closeable、leftIcon和rightIcon属性，使通知组件更加灵活和可自定义。这些新属性可以让开发者控制通知的位置距离、关闭按钮以及两侧图标，符合现代UI组件的设计趋势。位置调整后的
duration属性保持了功能不变，同时提高了接口定义的整体一致性。src/packages/notify/demos/h5/demo3.tsx (4)
3-3: 导入图标组件用于功能展示引入
Reload图标组件以演示新增的leftIcon功能，增强了示例的实用性。
6-7: 方法名称修改更加语义化将
cusBgNotify改为baseNotify使函数名更符合实际功能，更加直观和易于理解。
8-15: 示例代码有效展示了新增特性此示例很好地展示了新增的
leftIcon和closeable属性，以及相关的事件处理。通过添加onClose和onClick回调，演示了完整的交互流程，对开发者理解组件用法很有帮助。
21-24: 标题和示例内容修改符合功能演示将标题从"自定义背景色和字体颜色"改为"支持关闭"，并更新了通知内容，这与示例展示的功能保持一致，使示例更加清晰明了。
src/packages/configprovider/types.ts (1)
365-373: CSS变量调整与组件功能变更保持一致CSS变量的调整与组件API的变更保持一致，这是一个良好的实践。具体变更包括：
- 添加了
nutuiNotifyHeight、nutuiNotifyBorderRadius、nutuiNotifyBoxShadow和nutuiNotifyZIndex变量，增强了样式自定义能力- 添加了
nutuiNotifyDistance变量，与新增的distance属性对应- 将多个类型特定的背景色变量合并为单一的
nutuiNotifyBackgroundColor变量，与移除type属性的变更保持一致这些变更使主题定制更加灵活，同时简化了样式变量结构。
src/packages/notify/notify.tsx (1)
12-16: 选项配置与接口定义保持一致在options中添加了
distance、closeable、leftIcon和rightIcon属性，并设置了合理的默认值，与接口定义保持一致。这确保了组件的一致性和可预测性。src/packages/notify/demos/taro/demo4.tsx (8)
3-3: 导入 Reload 图标组件以支持新功能添加 Reload 图标组件的导入，为通知提供左侧图标功能支持，这与组件新增的图标支持功能一致。
6-6: 状态管理简化将之前的复杂状态管理简化为单一的
customShow状态，使代码更加清晰易懂。这种实现方式更符合 React 推荐的最小状态原则。
10-15: 通知组件样式自定义优化通过 CSS 变量直接定制通知组件的文本颜色和背景颜色，提供了更灵活的自定义能力。这种实现方式符合现代 CSS 最佳实践。
15-15: 添加左侧图标为通知组件添加左侧图标，增强了组件的视觉表现力和信息传达能力。Reload 图标颜色设置为白色，与自定义的文本颜色保持一致。
17-17: 回调函数简化简化了关闭回调函数的实现，直接设置状态值，使代码更加简洁。
20-20: 静态通知内容将通知内容设置为静态文本"自定义样式"，与组件演示目的一致，清晰传达了此示例的重点是展示样式自定义能力。
23-23: Cell 标题更新更新 Cell 标题为"自定义样式"，与通知内容保持一致，提高了 UI 的一致性。
25-25: 点击事件处理优化简化了点击事件处理逻辑，直接设置状态值，使代码更加简洁。移除了之前可能存在的复杂状态更新逻辑。
src/packages/notify/notify.scss (7)
45-48: 优化通知组件定位方式将通知组件的定位方式更改为
fixed，并设置左右间距为 8px，通过变量控制 z-index。这种实现提供了更一致的用户体验，确保通知在视口中的正确位置显示。
53-56: 增强通知组件视觉效果添加了圆角边框、阴影和背景色设置，提升了组件的现代感和立体感。使用变量控制这些样式属性，便于主题定制。
58-66: 优化内容布局结构新增内容容器类，设置flex布局属性、文本对齐和溢出处理，确保文本内容在通知组件中的正确显示。这种结构化的样式管理提高了代码的可维护性。
68-70: 添加文本溢出处理增加文本溢出显示省略号的样式类，确保长文本在有限空间内的优雅展示。
72-74: 支持左对齐布局增加左对齐文本的样式类，为通知组件提供更灵活的文本对齐选项。
76-87: 左侧图标样式支持为左侧图标添加样式支持，包括边距和尺寸控制，确保图标与文本的协调展示。图标尺寸设置为16px，提供了清晰可见的视觉效果。
89-95: 右侧图标样式支持为右侧图标添加样式支持，设置左侧边距和尺寸控制。图标尺寸设置为12px，小于左侧图标，形成视觉层次感。
src/packages/notify/demos/taro/demo1.tsx (5)
3-3: 引入图标组件导入 Reload 图标组件，为基础用法示例添加视觉元素，增强用户体验。
7-7: 简化状态管理使用单一内容状态替代之前的复杂状态管理，简化代码结构。内容"请求失败，请重试刷新"与 Reload 图标语义匹配，提供了良好的用户提示。
12-12: 添加左侧图标为通知组件添加 Reload 图标作为左侧图标，视觉上强化了"请求失败，请重试刷新"的信息，提高了通知的信息传达效率。
17-17: 动态内容渲染使用状态变量渲染通知内容，使组件更具灵活性，能够适应不同的使用场景。
21-23: 简化点击处理逻辑将点击处理逻辑简化为直接设置状态值，移除了不必要的复杂逻辑，使代码更加清晰。
src/packages/notify/demos/taro/demo2.tsx (6)
2-4: 引入必要组件和功能更新了导入语句，引入了必要的组件和图标，以及Taro的导航功能。这些导入支持了通知组件的跳转功能展示。
8-8: 简化状态管理使用单一内容状态变量替代之前的复杂状态对象，简化状态管理。所提供的错误消息"网络请求失败，请检查您的网络设置"与 NetworkError 图标语义一致。
9-14: 添加导航功能实现了
onJumpclick函数处理页面跳转逻辑，支持常规导航和重定向两种方式。该功能增强了通知组件的交互能力，使其不仅能显示信息，还能引导用户进行后续操作。
19-23: 增强通知组件交互能力为通知组件添加左右图标并实现点击跳转功能：
- 左侧使用 NetworkError 图标，与错误信息语义匹配
- 右侧使用 ArrowRight 图标，暗示可点击跳转
- 点击通知时调用导航函数，增强了通知的交互性
这些改进使通知组件不仅作为信息展示工具，还成为引导用户操作的入口。
28-28: 动态内容渲染使用状态变量渲染通知内容，保持组件的灵活性。
30-35: 简化演示UI结构将之前可能存在的多个单元格或组合结构简化为单一的 Cell 组件，使示例更加聚焦于"支持跳转"这一功能点。点击处理逻辑也相应简化，直接设置状态值触发通知显示。
src/packages/notify/doc.taro.md (4)
21-21: 文档标题调整无问题，命名更直观。
29-29: 新增「支持关闭」标题无冲突，文档结构更清晰。
70-76: CSS 变量清单已更新，属性命名和使用更规范。
52-55:Details
❓ Verification inconclusive
属性说明已添加新参数，需确认与实际实现一致。
建议在代码中验证 default 值与文档声明的
8是否一致，用以下脚本查找默认值：
🏁 Script executed:
#!/bin/bash rg -A 5 'distance\s*=\s*8'Length of output: 28
请核实文档与代码中的默认值设置是否保持一致
当前通过命令查找
distance\s*=\s*8并未定位到相关默认赋值的代码，存在以下疑问：
- 是否在组件中（例如通过
defaultProps、构造函数赋值或其他初始化方式）明确地设置了distance的默认值为 8？- 如果默认值是在其他方式或位置赋值，请确认文档中说明的
8与实际实现一致。建议进一步验证代码库中关于
distance默认值的赋值逻辑，例如可以执行下列命令以扩大搜索范围：#!/bin/bash rg -n 'distance\s*[:=].*8'请开发者确认代码实现与文档说明的一致性，并根据验证结果更新实现或文档描述。
src/packages/notify/demos/h5/demo2.tsx (3)
3-3: 图标引入正确，使用语义清晰。
6-20: 封装单一baseNotify函数，逻辑简洁易于维护。
23-30: 「支持跳转」示例操作直观，符合产品需求。src/packages/notify/Notification.tsx (6)
4-4: 引入Close图标合理，增加可关闭能力。
6-6: 使用WebNotifyProps拓展声明方式完善。
8-9: 新增message: React.ReactNode定义更灵活，支持复杂内容。
79-87: 多属性解构清晰便捷，无显著问题。
110-116: 渲染 leftIcon 逻辑符合需求，可进一步完善测试。🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 115-115: src/packages/notify/Notification.tsx#L115
Added line #L115 was not covered by tests
127-129: rightIcon 与 closeable 并存，功能更灵活，测试覆盖可再增强。请考虑在测试用例中添加对点击关闭后的期望行为测试。
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 127-129: src/packages/notify/Notification.tsx#L127-L129
Added lines #L127 - L129 were not covered by testssrc/packages/notify/doc.zh-TW.md (6)
5-5: 文档标题层级调整合理。将"引入"调整为二级标题，使文档结构更加清晰和规范。
21-21: 标题更新为"支持跳转"更准确地描述了此功能。原来的"通知类型"更改为"支持跳转"，更清晰地表明了该部分演示的功能。
29-29: 新增"支持关闭"功能说明，提升了组件灵活性。这个新的功能标题清晰地表明组件现在支持关闭操作，增强了用户交互性。
37-37: 标题更改为"自定义样式"更准确。将"自定义时长"改为"自定义样式"，更准确地描述了该部分的内容。
51-54: 新增属性增强了组件的可配置性。新增了4个重要属性：
distance: 控制组件与页面顶部/底部的距离closeable: 启用关闭功能leftIcon: 自定义左侧图标rightIcon: 自定义右侧图标或关闭按钮这些属性增强了组件的灵活性和可定制性。
69-75: CSS变量更新优化了样式定制能力。CSS变量更新包括：
- 调整了内边距为
0 12px，提升视觉体验- 新增了圆角、阴影和层级变量，使组件更现代化
- 更新了文本颜色，并新增了背景颜色变量
这些变更使组件的外观更加灵活可定制，也更符合现代UI设计趋势。
src/packages/notify/notify.taro.tsx (10)
1-7: 导入模块优化和hooks更新。更新了React导入，添加了useMemo，为计算距离提供了更高效的实现。
11-13: 图标和工具函数导入优化。导入Close图标组件和平台检测工具，支持关闭功能和跨平台兼容性。
26-32: 扩展默认属性增强组件功能。添加了新的默认属性：
distance: 设置距离顶部/底部的默认值为8closeable: 默认不启用关闭模式leftIcon和rightIcon: 默认为null，允许用户定制图标- 移除了
type属性，简化了API设计这些变更使组件更加灵活，同时简化了API。
46-57: props解构优化，增强组件可配置性。更新了props解构，添加了：
children显式解构，更清晰地指明组件内容distance,closeable,leftIcon,rightIcon等新属性- 调整了属性顺序，提高可读性
这些变更使props使用更加清晰，降低了开发者的认知负担。
77-81: timer处理逻辑优化。添加了一个更安全的fallback值
999999999，确保当duration为falsy但不是0时，定时器能正常工作。
94-101: 使用useMemo优化距离计算。引入useMemo钩子计算位置样式，基于position和distance属性：
- 根据顶部/底部位置动态生成样式
- 在web环境添加额外57px偏移
- 依赖项正确设置为[distance, position]
这种实现提高了性能，避免不必要的重新计算。
103-108: 类名生成逻辑简化。简化了className逻辑，直接使用传入的className属性。
110-116: 事件处理函数优化。
- 将
clickHandle替换为更语义化的handleClick- 使用可选链调用onClick，提高代码健壮性
- 新增
handleClickIcon函数处理图标点击逻辑这些更改使事件处理更加清晰和可靠。
129-133: 容器渲染优化。更新了View元素的类名和样式应用方式：
- 直接使用classes变量，而非字符串拼接
- 使用对象展开语法合并style和动态计算的distance
- 绑定handleClick事件处理函数
这提高了代码可读性和维护性。
134-153: 内容渲染逻辑优化，增加图标支持。重构了内容渲染逻辑：
- 添加了左侧图标的条件渲染
- 优化了内容区域的样式类条件判断
- 增加了右侧图标/关闭按钮的条件渲染
- 使用三元表达式优雅处理默认关闭图标
这些变更大大提高了组件的灵活性和可定制性。
src/packages/notify/doc.md (5)
21-21: 标题更新为"支持跳转"更贴合功能。将"通知类型"标题改为"支持跳转"，更准确地描述了该示例的功能，提高了文档清晰度。
29-29: 新增"支持关闭"功能说明。新增的"支持关闭"部分清晰地展示了组件新增的关闭功能，增强了用户交互性。
37-37: 标题从"自定义时长"改为"自定义样式"更准确。此更改使标题更准确地反映该部分示例的内容和目的。
51-54: Props表格中新增属性提升了组件灵活性。新增四个重要属性：
distance: 控制与页面边缘的距离closeable: 启用关闭功能leftIcon: 自定义左侧图标rightIcon: 自定义右侧图标这些新属性大大增强了组件的可配置性和灵活性。
69-75: CSS变量更新优化了样式定制。CSS变量更新包括：
- 调整内边距为
0 12px- 新增圆角、阴影和层级相关变量
- 文本颜色更新为
$color-title- 新增背景颜色变量
$white这些变更使组件样式更加现代化且易于定制。
src/styles/variables.scss (1)
1102-1111: Notify组件样式变量重构，增强定制能力。重构了通知组件的样式变量：
- 更新内边距为
0px 12px，提升视觉体验- 新增圆角变量，默认值为
8px- 新增阴影效果，提升组件立体感
- 设置合理的z-index值
1000- 更新文本颜色为
$color-title，提高可读性- 新增背景颜色变量，默认为
$white这些变更使通知组件更现代、更灵活，且更符合设计系统规范。
src/packages/notify/doc.en-US.md (3)
29-29: 更新标题 "Support Close" 的确认
标题“Support Close”看起来表意清晰，建议检查示例代码内容是否与此描述完全一致，如有必要可在文档中补充详细说明。
37-37: 更新标题 "Custom Style" 的确认
请确认“Custom Style”标题与示例代码展示的自定义样式功能相符，并确保读者能够通过标题清晰理解示例的重点。
69-72: CSS 变量更新确认
更新了--nutui-notify-padding的默认值（由0 10px改为0 12px），并新增了--nutui-notify-border-radius、--nutui-notify-box-shadow与--nutui-notify-z-index变量。请确认这些变量的新默认值与整体设计要求和组件实现统一，并核对文档与源码中的变量名称一致。🧰 Tools
🪛 LanguageTool
[grammar] ~70-~70: The verb ‘notify’ does not usually follow articles like ‘the’. Check that ‘notify’ is spelled correctly; using ‘notify’ as a noun may be non-standard.
Context: ...-border-radius | The rounded corners of the notify |8px| | --nutui-notify-box-shadow ...(A_INFINITIVE)
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
src/packages/notify/Notification.tsx (1)
86-87:⚠️ Potential issue为
distance设置默认值当前组件中没有为
distance属性设置默认值，这可能导致在未传入该属性时计算出错误的定位值。根据文档说明，该属性应该默认为 8。请在组件中明确设置
distance的默认值：+ static defaultProps = { + distance: 8, + }
🧹 Nitpick comments (5)
src/packages/notify/Notification.tsx (3)
46-46: 应使用可选链操作符此处可以使用可选链操作符（?.）简化代码并提高其可读性。
- this.props.onClose && this.props.onClose() + this.props.onClose?.()🧰 Tools
🪛 Biome (1.9.4)
[error] 46-46: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🪛 GitHub Check: codecov/patch
[warning] 46-46: src/packages/notify/Notification.tsx#L46
Added line #L46 was not covered by tests
93-98: 考虑在getDistance方法中添加异常处理当
distance未定义或非数值类型时，当前实现可能导致样式计算出现问题。const getDistance = () => { + const safeDistance = typeof distance === 'number' ? distance : 8; if (position === 'top') { - return { top: `${distance + 57}px` } + return { top: `${safeDistance + 57}px` } } - return { bottom: `${distance}px` } + return { bottom: `${safeDistance}px` } }
118-125: 优化类名条件逻辑当前类名条件判断逻辑较为复杂，可以提取为单独的变量或方法使代码更加清晰。
+ const contentClassNames = classNames({ + [`${classPrefix}-content`]: true, + [`${classPrefix}-ellipsis`]: closeable || rightIcon, + [`${classPrefix}-layout-left`]: leftIcon || rightIcon, + }); <div - className={classNames({ - [`${classPrefix}-content`]: true, - [`${classPrefix}-ellipsis`]: closeable || rightIcon, - [`${classPrefix}-layout-left`]: leftIcon || rightIcon, - })} + className={contentClassNames} >src/packages/notify/notify.taro.tsx (2)
94-101: 优化平台特定代码的处理方式当前代码在计算
top距离时使用了平台特定的逻辑。考虑将这种平台差异处理抽象为一个更易维护的解决方案。const getDistance = useMemo(() => { + const topOffset = web() ? 57 : 0; if (position === 'top') { return { - top: pxTransform(web() ? Number(distance) + 57 : Number(distance)), + top: pxTransform(Number(distance) + topOffset), } } return { bottom: pxTransform(Number(distance)) } }, [distance, position])
114-116: 考虑为handleClickIcon添加事件参数当前的
handleClickIcon方法没有阻止事件冒泡，可能导致同时触发handleClick。-const handleClickIcon = () => { +const handleClickIcon = (e: React.MouseEvent) => { + e.stopPropagation(); hide() }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/packages/configprovider/types.ts(1 hunks)src/packages/notify/Notification.tsx(4 hunks)src/packages/notify/notify.taro.tsx(5 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/packages/configprovider/types.ts
🧰 Additional context used
🪛 Biome (1.9.4)
src/packages/notify/Notification.tsx
[error] 46-46: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🪛 GitHub Check: codecov/patch
src/packages/notify/Notification.tsx
[warning] 46-46: src/packages/notify/Notification.tsx#L46
Added line #L46 was not covered by tests
[warning] 115-115: src/packages/notify/Notification.tsx#L115
Added line #L115 was not covered by tests
[warning] 127-129: src/packages/notify/Notification.tsx#L127-L129
Added lines #L127 - L129 were not covered by tests
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (2)
src/packages/notify/notify.taro.tsx (2)
110-112: 使用可选链操作符简化代码可以使用可选链操作符简化代码。这样写既简洁又安全。
26-35: 为所有需要默认值的属性设置合理的默认值这里正确地为
distance属性设置了默认值 8，这是一个好的做法。确保在类组件Notification.tsx中也同样设置相应的默认值，以保持组件行为的一致性。
| <div className={`${classPrefix}-left-icon`}>{leftIcon}</div> | ||
| ) : null} |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
增加新增功能的单元测试覆盖
新增的图标功能（leftIcon、rightIcon 和 closeable）缺少单元测试覆盖。为确保这些功能的稳定性，建议添加相应的测试用例。
Also applies to: 127-130
🌐 Web query:
如何编写React组件的单元测试
💡 Result:
编写React组件单元测试主要使用Jest测试框架配合React Testing Library或Enzyme等工具。以下是关键实践步骤和技术要点：
基础配置
- 工具安装
npm install jest @testing-library/react @testing-library/jest-dom react-test-renderer --save-dev需配置Babel支持JSX语法，Create React App已内置Jest配置[12]
- 测试文件规范
测试文件通常命名为*.test.js或放在__tests__目录，Jest会自动识别[2][14]
核心测试模式
1. DOM交互测试（React Testing Library）
import { render, fireEvent } from '@testing-library/react';
test('按钮点击触发事件', () => {
const handleClick = jest.fn();
const { getByText } = render(<Button onClick={handleClick}>提交</Button>);
fireEvent.click(getByText('提交'));
expect(handleClick).toHaveBeenCalledTimes(1);
});通过fireEvent模拟用户操作，验证回调函数触发次数[3][11][16]
2. 状态与Props验证
test('显示加载状态', () => {
const { getByText } = render(<Button loading>提交</Button>);
expect(getByText('loading')).toBeInTheDocument();
});
test('接收props渲染内容', () => {
const { container } = render(<List data={['item1']} />);
expect(container.querySelectorAll('li').length).toBe(1);
});使用@testing-library/jest-dom扩展断言语法[13][15]
3. 快照测试
import renderer from 'react-test-renderer';
test('组件渲染快照', () => {
const tree = renderer.create(<Header title="主页" />).toJSON();
expect(tree).toMatchSnapshot();
});首次生成快照文件，后续测试对比DOM结构变化[10][12]
高阶场景处理
1. Hooks测试
import { renderHook } from '@testing-library/react-hooks';
test('useCounter增减值', () => {
const { result } = renderHook(() => useCounter());
act(() => result.current.increment());
expect(result.current.count).toBe(1);
});使用act包裹状态更新操作[3][11]
2. 异步操作测试
test('数据加载完成展示内容', async () => {
const { findByText } = render(<AsyncComponent />);
await waitFor(() => expect(findByText('加载完成')).toBeInTheDocument());
});配合waitFor处理异步渲染[4][16]
3. 路由/上下文测试
import { MemoryRouter } from 'react-router-dom';
test('路由跳转', () => {
const { getByText } = render(
<MemoryRouter initialEntries={['/users']}>
<App />
</MemoryRouter>
);
expect(getByText('用户列表')).toBeInTheDocument();
});通过Wrapper组件注入测试上下文[16]
最佳实践
-
测试用户视角
避免测试组件内部状态，聚焦用户可见的输入输出。例如用getByRole替代直接访问组件实例[1][4] -
测试隔离
使用beforeEach/afterEach清理环境：
let container;
beforeEach(() => {
container = document.createElement('div');
document.body.appendChild(container);
});
afterEach(() => {
unmountComponentAtNode(container);
container.remove();
});防止测试用例间状态污染[16]
- 覆盖率控制
结合Jest配置收集覆盖率：
// package.json
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx}",
"!**/node_modules/**"
]
}重点关注业务逻辑而非UI细节[13][15]
通过组合这些方法，可以构建健壮的React组件测试体系。Enzyme仍可用于类组件深度测试，但官方推荐React Testing Library作为现代React应用的首选方案[1][7][12]。
Citations:
- 1: https://blog.csdn.net/weixin_36919455/article/details/135976943
- 2: https://juejin.cn/post/7049536297584558087
- 3: https://juejin.cn/post/7338651990476390439
- 4: https://sinoui.github.io/sinoui-guide/docs/react-component-test-guide
- 5: https://juejin.cn/post/7170900268169560071
- 6: https://www.infoq.cn/article/1ypo54cmidb7pzrpxowd
- 7: https://zh-hans.legacy.reactjs.org/docs/testing.html
- 8: https://loveky.github.io/2018/06/05/unit-testing-react-component-with-jest/
- 9: http://zhenhua-lee.github.io/framework/react-test.html
- 10: https://jestjs.io/zh-Hans/docs/snapshot-testing
- 11: https://juejin.cn/post/6968821346088255525
- 12: https://jestjs.io/zh-Hans/docs/tutorial-react
- 13: https://juejin.cn/post/7199865975277649978
- 14: https://blog.csdn.net/2301_78843735/article/details/138717271
- 15: https://www.cnblogs.com/dtux/p/17119560.html
- 16: https://zh-hans.legacy.reactjs.org/docs/testing-recipes.html
- 17: https://cloud.tencent.com/developer/article/2318692
请为新增图标相关功能添加单元测试
在文件 src/packages/notify/Notification.tsx 中（涉及行 115-116 和 127-130），新增的图标功能（leftIcon、rightIcon 和 closeable）目前缺少测试覆盖。建议在对应的测试文件中增加以下测试用例，以确保组件在以下情形下的稳定性：
- 当传入
leftIcon或rightIcon时组件能正确渲染对应图标； - 当未传入图标时，相关部分不应渲染；
- 对于
closeable功能，建议测试点击关闭图标后是否触发预期的关闭行为。
可参考 Jest 与 React Testing Library 的最佳实践，例如：
import { render, fireEvent } from '@testing-library/react';
import Notification from 'src/packages/notify/Notification';
test('传入 leftIcon 时应正确渲染', () => {
const { container } = render(<Notification leftIcon={<svg data-testid="left-icon" />} />);
expect(container.querySelector('.notify-left-icon')).toBeInTheDocument();
});
test('未传入图标时不渲染图标容器', () => {
const { container } = render(<Notification />);
expect(container.querySelector('.notify-left-icon')).toBeNull();
});
test('closeable 模式下点击应触发关闭行为', () => {
const handleClose = jest.fn();
const { getByTestId } = render(<Notification closeable onClose={handleClose} />);
fireEvent.click(getByTestId('close-icon'));
expect(handleClose).toHaveBeenCalled();
});请根据项目的实际情况调整测试细节，这将有助于防止未来潜在的回归问题。
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 115-115: src/packages/notify/Notification.tsx#L115
Added line #L115 was not covered by tests
| className={`${classPrefix}-right-icon`} | ||
| onClick={handleClickIcon} | ||
| > | ||
| {rightIcon || (closeable ? <Close size={12} /> : null)} |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
确保图标尺寸在各组件间保持一致
与 Notification.tsx 中不同，这里明确设置了 Close 图标的尺寸为 12。请确保各组件间的图标尺寸保持一致，以维持 UI 的统一性。
🏁 Script executed:
#!/bin/bash
# 查找代码库中所有使用 Close 图标的地方
rg -i "Close[^a-zA-Z0-9]" -A 2 -B 2Length of output: 73738
统一 Close 图标尺寸设置
在 src/packages/notify/notify.taro.tsx 第 151 行中，代码使用了 <Close size={12} />，而在其他组件（例如 Notification.tsx）中使用 Close 图标时则没有显式设置尺寸，导致存在尺寸不一致的风险。请检查所有涉及 Close 图标的使用场景，确保图标尺寸统一。你可以考虑以下措施：
- 在所有组件中统一为
Close图标添加固定尺寸（例如统一使用size={12}），或将尺寸设置交由Close组件的默认值管理； - 核对
Notification.tsx、noticebar.taro.tsx等文件中对Close图标的引用，确认是否需要新增或移除size属性以保持 UI 风格一致。
src/types/spec/notify/base.ts
Outdated
| closeable: boolean | ||
| leftIcon: React.ReactNode | ||
| rightIcon: React.ReactNode | ||
| position: string |
There was a problem hiding this comment.
string 类型可以改为 PositionY 类型
There was a problem hiding this comment.
string 类型可以改为 PositionY 类型
已修改
| $notify-box-shadow: var( | ||
| --nutui-notify-box-shadow, | ||
| 0px 4px 12px 0px rgba(0, 0, 0, 0.06) | ||
| ) !default; |
There was a problem hiding this comment.
变量的修改需要同步到其他两个变量文件中，不然使用的时候报错
There was a problem hiding this comment.
变量的修改需要同步到其他两个变量文件中，不然使用的时候报错
已修改
oasis-cloud
left a comment
oasis-cloud
left a comment
There was a problem hiding this comment.
Taro H5 和 H5 的动效不一致
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/styles/variables-jrkf.scss (1)
1138-1145: 新增通知样式变量命名与默认值合理
这部分代码正确地添加了通知组件所需的样式变量，包括$notify-border-radius、$notify-box-shadow、$notify-z-index和$notify-background-color。命名与现有的变量规范保持一致，默认值设置合理，有助于提高组件的可定制性。请确保在通知组件中相应地引用这些变量，并与 TypeScript 类型定义保持一致。src/packages/notify/Notification.tsx (1)
46-46: 可优化回调函数调用当前代码使用
this.props.onClose && this.props.onClose()，建议使用可选链语法this.props.onClose?.()使代码更简洁。- this.props.onClose && this.props.onClose() + this.props.onClose?.()🧰 Tools
🪛 Biome (1.9.4)
[error] 46-46: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🪛 GitHub Check: codecov/patch
[warning] 46-46: src/packages/notify/Notification.tsx#L46
Added line #L46 was not covered by tests
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
src/packages/notify/Notification.tsx(4 hunks)src/packages/notify/notify.taro.tsx(5 hunks)src/styles/variables-jmapp.scss(1 hunks)src/styles/variables-jrkf.scss(1 hunks)src/types/spec/notify/base.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/packages/notify/notify.taro.tsx
🧰 Additional context used
🪛 Biome (1.9.4)
src/packages/notify/Notification.tsx
[error] 46-46: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🪛 GitHub Check: codecov/patch
src/packages/notify/Notification.tsx
[warning] 46-46: src/packages/notify/Notification.tsx#L46
Added line #L46 was not covered by tests
[warning] 117-117: src/packages/notify/Notification.tsx#L117
Added line #L117 was not covered by tests
[warning] 129-131: src/packages/notify/Notification.tsx#L129-L131
Added lines #L129 - L131 were not covered by tests
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (6)
src/styles/variables-jmapp.scss (1)
1119-1125: 样式变量添加明确了通知组件的视觉样式这些新增的变量很好地定义了通知组件的视觉属性（边框圆角、阴影、层级和背景色），使组件样式更加可定制，符合设计规范。
src/types/spec/notify/base.ts (2)
1-1: 导入类型定义更精确从使用通用的 string 类型改为使用专门的
PositionY类型，提高了类型安全性。
5-10: 扩展了通知组件的功能属性新增的属性提升了组件的功能性与灵活性：
distance: 控制组件与视口边缘的距离closeable: 支持手动关闭通知leftIcon/rightIcon: 支持在通知内容两侧添加图标请确保这些新增属性在文档中有充分的说明和使用示例。
src/packages/notify/Notification.tsx (3)
4-6: 图标库导入和类型引用更新导入 Close 图标和更新类型引用是合理的，与新功能相匹配。
8-9: 接口继承改为 WebNotifyProps将接口从 BasicComponent 改为继承 WebNotifyProps 简化了属性定义，避免了重复声明。
116-132: 新增图标和可关闭功能的渲染逻辑实现了左右图标和关闭按钮的条件渲染，增强了组件的灵活性。不过，这部分新增功能缺少单元测试覆盖，可能影响代码质量和稳定性。
建议添加相关测试用例：
- 测试左右图标的正确渲染
- 测试关闭按钮的功能
- 测试不同组合下的样式类应用是否正确
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 117-117: src/packages/notify/Notification.tsx#L117
Added line #L117 was not covered by tests
[warning] 129-131: src/packages/notify/Notification.tsx#L129-L131
Added lines #L129 - L131 were not covered by tests
已修改 |
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
src/packages/notify/Notification.tsx (1)
94-99:⚠️ Potential issue动态计算通知位置，但缺少默认值
getDistance函数能根据position属性计算通知的位置，但缺少对distance的默认值处理。当distance未定义时，可能导致样式计算错误。请添加
distance属性的默认值处理：const getDistance = () => { + const defaultDistance = 8; + const distanceValue = distance ?? defaultDistance; if (position === 'top') { - return { top: `${distance + 57}px` } + return { top: `${distanceValue + 57}px` } } - return { bottom: `${distance}px` } + return { bottom: `${distanceValue}px` } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
src/packages/configprovider/types.ts(1 hunks)src/packages/notify/Notification.tsx(4 hunks)src/styles/variables-jmapp.scss(1 hunks)src/styles/variables-jrkf.scss(1 hunks)src/styles/variables.scss(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- src/styles/variables-jmapp.scss
- src/packages/configprovider/types.ts
- src/styles/variables-jrkf.scss
🧰 Additional context used
🪛 Biome (1.9.4)
src/packages/notify/Notification.tsx
[error] 46-46: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (9)
src/packages/notify/Notification.tsx (8)
4-4: 添加了 Close 图标组件的引入在这行中，引入了
@nutui/icons-react中的Close图标组件，用于实现关闭按钮的功能。这是一个合理的改进，符合组件库的设计模式。
6-9: 接口类型变更更符合业务逻辑将
NotificationProps从原来的类型定义更改为继承WebNotifyProps，并且只额外要求message属性。这种方式简化了接口定义，更符合当前的组件设计。
78-88: 增强了组件可定制性解构添加了新的属性：
leftIcon、rightIcon、closeable和distance，增强了组件的可配置性，使通知组件能够更灵活地满足不同的界面需求。
92-92: 确保了适当的类名使用使用 true 确保 className 总是被应用到组件上，这是一个小细节但确保了样式一致性。
113-114: 合并样式对象的有效方法使用展开运算符合并
style和getDistance()的样式对象是一个很好的做法，保持了代码的简洁性和可读性。
119-127: 内容区域样式适配图标状态根据是否存在图标动态调整内容区域的样式类名，是一个灵活的设计。类名判断考虑了各种图标组合情况，确保布局正确。
128-132: 右侧图标和关闭按钮实现巧妙地合并了
rightIcon和closeable的渲染逻辑，通过条件渲染提供了两种自定义方式：
- 通过
rightIcon传入自定义图标- 通过
closeable属性启用默认关闭图标点击右侧区域时会触发关闭事件，这是一个很好的用户体验设计。
请为
closeable功能添加单元测试，验证点击关闭图标能正确触发onClose回调。
46-46:Details
✅ Verification successful
修复了可能的空值调用问题
使用可选链操作符
&&来安全调用onClose函数，防止在onClose未定义时引发错误。考虑使用可选链操作符来提高代码可读性：
-this.props.onClose && this.props.onClose() +this.props.onClose?.()
🏁 Script executed:
#!/bin/bash # 检查项目中是否使用了可选链操作符 rg "\\?\\." --type tsLength of output: 56318
建议在此处采用可选链调用
在文件
src/packages/notify/Notification.tsx第46行建议将下面的代码：-this.props.onClose && this.props.onClose() +this.props.onClose?.()替换为使用可选链调用的写法。这种写法不仅提高了代码的可读性，还能防止
onClose未定义时出现调用错误。通过rg的全局搜索结果可以看出，项目中其他部分已经大量使用了?.操作符，确保了风格的一致性与稳健性。🧰 Tools
🪛 Biome (1.9.4)
[error] 46-46: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
src/styles/variables.scss (1)
1103-1112:Details
❓ Verification inconclusive
重构通知组件样式变量
通知组件的样式变量进行了重构，移除了旧的类型相关变量（如 primary、success、danger 等背景色），转向更为统一的样式定义。新增了以下变量：
- 内边距
- 边框圆角
- 阴影效果
- z-index层级
- 文本颜色
- 背景颜色
这种变更简化了通知组件的样式定义，符合组件重构的方向。
请确保这些变量的修改已同步到其他相关的变量文件中，如之前评论所提到的，以避免在使用过程中报错。
🏁 Script executed:
#!/bin/bash # 查找其他可能包含通知组件变量的样式文件 rg "notify-.*(color|background|padding)" --type scss --glob "!src/styles/variables.scss"Length of output: 119
通知组件样式变量重构 — 请确认其他 SCSS 文件同步更新
- 在
src/styles/variables.scss的 1103-1112 行中，已将通知组件的样式变量重构，新定义了内边距、边框圆角、阴影效果、z-index 层级、文本颜色、背景颜色，同时移除了旧的类型相关变量（如 primary、success、danger 等背景色）。- 原来的验证命令因使用了不被识别的文件类型
scss而报错，建议改用如下命令检查其他 SCSS 文件中是否遗漏更新：rg "notify-.*(color|background|padding)" -g "*.scss" --glob "!src/styles/variables.scss"- 请手动运行或确认上述搜索结果，以确保所有相关文件中都同步更新了通知组件的样式变量，避免后续使用时出现错误。
xiaoyatong
left a comment
xiaoyatong
left a comment
There was a problem hiding this comment.
这个改动还挺大的~ 可以在 升级文档里 重点强调下~~
src/packages/notify/Notification.tsx
Outdated
| element && element.parentNode && element.parentNode.removeChild(element) | ||
| } | ||
| this.props.onClose() | ||
| this.props.onClose && this.props.onClose() |
src/packages/notify/Notification.tsx
Outdated
| [`${classPrefix}-popup-bottom`]: position === 'bottom', | ||
| [`${classPrefix}`]: true, | ||
| [`${classPrefix}-${type}`]: true, | ||
| [`${className}`]: true, |
There was a problem hiding this comment.
这个写法是不是直接简写就好了
已修改
src/packages/notify/Notification.tsx
Outdated
| }) | ||
| const getDistance = () => { | ||
| if (position === 'top') { | ||
| return { top: `${distance + 57}px` } |
There was a problem hiding this comment.
57 是什么~~ 是不是可以来个常量声明~
已修改
已修改 |
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (3)
src/packages/notify/notify.taro.tsx (1)
20-27: 默认属性设置新增的默认属性增强了组件的功能性，但需注意
navHeight: 57这样的硬编码值。考虑使用有意义的常量名称来增强代码可读性。+const DEFAULT_NAV_HEIGHT = 57; +const DEFAULT_DISTANCE = 8; const defaultProps = { ...ComponentDefaults, id: '', - distance: 8, - navHeight: 57, + distance: DEFAULT_DISTANCE, + navHeight: DEFAULT_NAV_HEIGHT, position: 'top', visible: false, closeable: false, leftIcon: null, rightIcon: null, duration: 3000, onClose: () => {}, onClick: () => {}, } as TaroNotifyPropssrc/packages/notify/doc.md (1)
21-37: 文档章节标题修改文档章节标题从功能描述变为了使用场景描述，可能会导致用户在升级时感到困惑。建议在章节开头添加简短说明，解释各个示例的具体功能。
src/packages/notify/doc.en-US.md (1)
71-73: 英文文档术语表述问题在英文文档中，"The rounded corners of the notify" 这种表述不太自然，应改为 "The rounded corners of the notification" 或简单地说 "Notification border radius"。
-| \--nutui-notify-border-radius | The rounded corners of the notify | `8px` | +| \--nutui-notify-border-radius | Notification border radius | `8px` | -| \--nutui-notify-box-shadow | Shadow of notify | `0px 4px 12px 0px rgba(0, 0, 0, 0.06)` | +| \--nutui-notify-box-shadow | Notification shadow | `0px 4px 12px 0px rgba(0, 0, 0, 0.06)` | -| \--nutui-notify-z-index | ZIndex of notify | `1000` | +| \--nutui-notify-z-index | Notification z-index | `1000` |🧰 Tools
🪛 LanguageTool
[grammar] ~71-~71: The verb ‘notify’ does not usually follow articles like ‘the’. Check that ‘notify’ is spelled correctly; using ‘notify’ as a noun may be non-standard.
Context: ...-border-radius | The rounded corners of the notify |8px| | --nutui-notify-box-shadow ...(A_INFINITIVE)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
src/packages/notify/Notification.tsx(4 hunks)src/packages/notify/doc.en-US.md(3 hunks)src/packages/notify/doc.md(3 hunks)src/packages/notify/doc.taro.md(3 hunks)src/packages/notify/doc.zh-TW.md(4 hunks)src/packages/notify/notify.taro.tsx(5 hunks)src/packages/notify/notify.tsx(1 hunks)src/sites/sites-react/doc/docs/react/migrate-from-v2.md(1 hunks)src/sites/sites-react/doc/docs/taro/migrate-from-v2.md(1 hunks)src/types/spec/notify/base.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/packages/notify/notify.tsx
- src/packages/notify/doc.zh-TW.md
🧰 Additional context used
🧬 Code Definitions (1)
src/packages/notify/notify.taro.tsx (3)
src/utils/px-transform.ts (1)
pxTransform(4-8)src/utils/platform-taro.ts (1)
web(8-10)src/packages/notify/notify.tsx (1)
hide(54-59)
🪛 GitHub Check: codecov/patch
src/packages/notify/Notification.tsx
[warning] 46-46: src/packages/notify/Notification.tsx#L46
Added line #L46 was not covered by tests
[warning] 115-115: src/packages/notify/Notification.tsx#L115
Added line #L115 was not covered by tests
[warning] 127-129: src/packages/notify/Notification.tsx#L127-L129
Added lines #L127 - L129 were not covered by tests
🪛 LanguageTool
src/packages/notify/doc.en-US.md
[grammar] ~71-~71: The verb ‘notify’ does not usually follow articles like ‘the’. Check that ‘notify’ is spelled correctly; using ‘notify’ as a noun may be non-standard.
Context: ...-border-radius | The rounded corners of the notify | 8px | | --nutui-notify-box-shadow ...
(A_INFINITIVE)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (15)
src/sites/sites-react/doc/docs/react/migrate-from-v2.md (1)
220-228: 升级文档中的 Notify 组件变更记录清晰明了文档更新准确反映了 Notify 组件的 API 变更，移除了
type属性并新增了 5 个属性（distance、closeable、leftIcon、rightIcon和navHeight）。这些变更增强了组件的灵活性和可定制性。src/sites/sites-react/doc/docs/taro/migrate-from-v2.md (1)
223-231: Taro 版本的 Notify 组件升级文档保持一致性Taro 版本的迁移文档与 React 版本保持一致，准确记录了 Notify 组件的 API 变更。这种一致性有助于开发者在不同平台间无缝切换。
src/types/spec/notify/base.ts (3)
1-1: 导入类型定义恰当正确导入
PositionY类型，用于替代原来的 string 类型，增强了类型安全性。
6-11: Notify 组件接口增强符合设计需求新增的属性（
distance、navHeight、closeable、leftIcon、rightIcon）丰富了组件的功能，使其更加灵活和可定制。这些改动与迁移文档中的描述保持一致。
11-11: position 类型优化将
position属性从 string 类型改为 PositionY 类型，提高了类型安全性和代码可读性。src/packages/notify/doc.taro.md (4)
21-21: 标题更新更符合功能描述将"通知类型"改为"支持跳转"，更准确地反映了该部分的功能，有助于用户理解组件的能力。
29-29: 新增"支持关闭"功能的文档说明文档标题从"自定义样式"更改为"支持关闭"，清晰地指出了新增的可关闭功能，这与新增的
closeable属性相对应。
52-56: 新属性文档完整清晰新增的五个属性（
distance、navHeight、closeable、leftIcon、rightIcon）文档描述清晰，提供了类型和默认值信息，方便开发者正确使用。
71-77: CSS 变量文档更新全面更新的 CSS 变量文档包含了新增的变量和默认值变更，特别是添加了圆角、阴影和层级等新变量，使开发者可以更全面地自定义组件样式。
src/packages/notify/Notification.tsx (1)
46-46: 使用可选链操作符改进代码健壮性使用可选链操作符是个好习惯，可以避免在
onClose未定义时的潜在错误。🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 46-46: src/packages/notify/Notification.tsx#L46
Added line #L46 was not covered by testssrc/packages/notify/notify.taro.tsx (2)
89-98: 位置计算逻辑优化
getDistance函数的使用useMemo优化了性能，避免不必要的重新计算。同时处理了 web 环境下的特殊情况。
105-107: 点击处理函数优化使用可选链操作符处理
onClick回调，简化了代码并增强了健壮性。src/packages/notify/doc.md (2)
51-55: 新增属性文档说明新增的属性（
distance、navHeight、closeable、leftIcon、rightIcon）有清晰的说明，这对用户理解组件的新功能很有帮助。
70-76: CSS变量更新CSS变量的更新使组件更加可定制化，特别是新增的边框圆角、阴影和层级变量。文本颜色从白色变为标题色，背景色也进行了调整，这表明通知组件的设计思路发生了变化。
src/packages/notify/doc.en-US.md (1)
75-76:Details
✅ Verification successful
文本和背景颜色属性更新
通知组件的设计风格发生了变化，文本颜色从白色变为标题色，背景色也做了调整。请确保这些变更与设计系统保持一致。
🌐 Web query:
React组件样式颜色从深色背景白色文字变为白色背景深色文字的最佳实践💡 Result:
在React中实现深色/浅色主题切换的最佳实践可通过以下方案实现：
状态管理与主题注入
使用React Context管理主题状态
创建全局主题上下文，存储当前主题色和切换函数：type ThemeContextType = { mode: 'light' | 'dark'; toggleTheme: () => void; }; const ThemeContext = createContext<ThemeContextType>({ mode: 'light', toggleTheme: () => {} }); export const ThemeProvider = ({ children }: { children: ReactNode }) => { const [mode, setMode] = useState<'light'|'dark'>('light'); const toggleTheme = () => setMode(prev => prev === 'light' ? 'dark' : 'light'); return ( <ThemeContext.Provider value={{ mode, toggleTheme }}> {children} </ThemeContext.Provider> ); };CSS变量动态切换
通过:root定义基础变量，配合主题类名切换：:root { --text-primary: #333; --bg-primary: white; } .dark { --text-primary: white; --bg-primary: #1a1a1a; }组件级样式应用
import { useContext } from 'react'; import { ThemeContext } from './ThemeContext'; const App = () => { const { mode } = useContext(ThemeContext); return ( <div className={mode}> <div style={{ backgroundColor: `var(--bg-primary)`, color: `var(--text-primary)` }} > Content </div> <button onClick={toggleTheme}>切换主题</button> </div> ); };进阶优化方案
1. 混合模式适配文字颜色
对于纯色背景场景，使用
mix-blend-mode: difference实现自动反转文字颜色：.text-container { background: var(--bg-color); } .adaptive-text { mix-blend-mode: difference; }2. 系统级主题适配
useEffect(() => { const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); setMode(mediaQuery.matches ? 'dark' : 'light'); mediaQuery.addEventListener('change', e => { setMode(e.matches ? 'dark' : 'light'); }); }, []);3. Tailwind集成方案
配置
tailwind.config.js后直接使用类名切换：// tailwind.config.js module.exports = { darkMode: 'class', } // 组件使用 <div className="bg-white dark:bg-gray-900 text-black dark:text-white">最佳实践对比表
方案 优点 缺点 适用场景 CSS变量+Context 高性能、易维护 需要预定义变量 大多数项目 CSS混合模式 自动适配背景 色彩选项受限 简单色彩方案 Tailwind集成 快速开发 学习曲线陡 使用Tailwind的项目 CSS-in-JS 动态样式生成 增加包体积 复杂主题系统 应优先选择CSS变量 + Context API的组合方案，既能满足动态切换需求，又能通过CSS变量保持样式层可维护性[1][6][15]。对于需要自动适配系统主题的场景，可结合
prefers-color-scheme媒体查询实现智能切换[5][6]。Citations:
- 1: https://juejin.cn/post/7167700979805061151
- 2: https://juejin.cn/post/7075576940416991245
- 3: https://juejin.cn/post/6861725116938747917
- 4: https://www.henghost.com/jishu/6638/
- 5: https://juejin.cn/post/7298997940019085366
- 6: https://juejin.cn/post/7160224704467304455
- 7: https://juejin.cn/post/7259195948772556856
- 8: https://www.cnblogs.com/nulixuexipython/p/16385861.html
- 9: https://sorrycc.com/full-stack-tao-styling
- 10: https://www.cnblogs.com/marsk6/p/15751116.html
- 11: http://www.runoob.com/tailwindcss/tailwindcss-darkmode.html
- 12: https://blog.csdn.net/qq_41581588/article/details/139283512
- 13: https://blog.csdn.net/jojo1001/article/details/121226800
- 14: https://blog.csdn.net/TianXuab/article/details/133195730
- 15: https://www.w3cplus.com/css/practice-the-dark-mode.html
- 16: https://blog.csdn.net/qiwoo_weekly/article/details/126046865
- 17: https://cloud.tencent.com.cn/developer/information/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8react%E5%92%8Cjavascript%E6%AF%8F%E7%A7%92%E6%9B%B4%E6%94%B9%E9%83%A8%E5%88%86%E6%96%87%E6%9C%AC%E7%9A%84%E5%AD%97%E4%BD%93%E9%A2%9C%E8%89%B2%EF%BC%9F-article
- 18: https://blog.csdn.net/weixin_26715991/article/details/108496135
- 19: https://learn.microsoft.com/zh-cn/shows/fluent-ui-insights/fluent-ui-react-trainings-styling-best-practices-and-icons
- 20: https://blog.csdn.net/weixin_41891519/article/details/107616246
通知组件颜色更新已验证通过
- 文件：
src/packages/notify/doc.en-US.md(行 75-76)- 变更说明：文本颜色已调整为
$color-title，背景颜色设定为$white，与更新后的设计风格一致。- 补充说明：根据最新的行业最佳实践（例如使用 CSS 变量结合全局主题管理实现深色/浅色主题切换），建议开发团队评估是否在未来增强组件的主题切换能力。不过，当前的调整已满足设计系统要求。
| export interface NotificationProps extends WebNotifyProps { | ||
| message: React.ReactNode | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
接口定义改动
接口定义从 BasicComponent 更改为 WebNotifyProps，并移除了多个属性。这个变更简化了接口，但请确保所有使用 NotificationProps 的地方都已更新。
-export interface NotificationProps extends WebNotifyProps {
- message: React.ReactNode
-}
+export interface NotificationProps extends WebNotifyProps {
+ message: React.ReactNode
+ // 为了类型安全，应该声明新增的属性
+ leftIcon?: React.ReactNode
+ rightIcon?: React.ReactNode
+ closeable?: boolean
+ distance?: number
+ navHeight?: number
+}📝 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.
| export interface NotificationProps extends WebNotifyProps { | |
| message: React.ReactNode | |
| } | |
| export interface NotificationProps extends WebNotifyProps { | |
| message: React.ReactNode | |
| // 为了类型安全，应该声明新增的属性 | |
| leftIcon?: React.ReactNode | |
| rightIcon?: React.ReactNode | |
| closeable?: boolean | |
| distance?: number | |
| navHeight?: number | |
| } |
| render() { | ||
| const { style, message, type, className, position } = this.props | ||
| const { | ||
| id, | ||
| style, | ||
| message, | ||
| leftIcon, | ||
| rightIcon, | ||
| closeable, | ||
| className, | ||
| position, | ||
| distance, | ||
| navHeight, | ||
| } = this.props | ||
| const { show } = this.state | ||
| const classes = classNames({ | ||
| [`${classPrefix}-popup-top`]: position === 'top', | ||
| [`${classPrefix}-popup-bottom`]: position === 'bottom', | ||
| [`${classPrefix}`]: true, | ||
| [`${classPrefix}-${type}`]: true, | ||
| }) | ||
| const classes = classNames(classPrefix, className) | ||
| const getDistance = () => { | ||
| if (position === 'top') { | ||
| return { top: `${distance + navHeight}px` } | ||
| } | ||
| return { bottom: `${distance}px` } | ||
| } |
There was a problem hiding this comment.
位置计算方法缺少默认值处理
getDistance 函数中的 distance 和 navHeight 参数没有设置默认值，可能导致计算错误。
const getDistance = () => {
if (position === 'top') {
- return { top: `${distance + navHeight}px` }
+ return { top: `${(distance || 8) + (navHeight || 57)}px` }
}
- return { bottom: `${distance}px` }
+ return { bottom: `${distance || 8}px` }
}📝 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.
| render() { | |
| const { style, message, type, className, position } = this.props | |
| const { | |
| id, | |
| style, | |
| message, | |
| leftIcon, | |
| rightIcon, | |
| closeable, | |
| className, | |
| position, | |
| distance, | |
| navHeight, | |
| } = this.props | |
| const { show } = this.state | |
| const classes = classNames({ | |
| [`${classPrefix}-popup-top`]: position === 'top', | |
| [`${classPrefix}-popup-bottom`]: position === 'bottom', | |
| [`${classPrefix}`]: true, | |
| [`${classPrefix}-${type}`]: true, | |
| }) | |
| const classes = classNames(classPrefix, className) | |
| const getDistance = () => { | |
| if (position === 'top') { | |
| return { top: `${distance + navHeight}px` } | |
| } | |
| return { bottom: `${distance}px` } | |
| } | |
| render() { | |
| const { | |
| id, | |
| style, | |
| message, | |
| leftIcon, | |
| rightIcon, | |
| closeable, | |
| className, | |
| position, | |
| distance, | |
| navHeight, | |
| } = this.props | |
| const { show } = this.state | |
| const classes = classNames(classPrefix, className) | |
| const getDistance = () => { | |
| if (position === 'top') { | |
| return { top: `${(distance || 8) + (navHeight || 57)}px` } | |
| } | |
| return { bottom: `${distance || 8}px` } | |
| } | |
| // ... rest of the render method | |
| } |
| {leftIcon ? ( | ||
| <div className={`${classPrefix}-left-icon`}>{leftIcon}</div> | ||
| ) : null} |
There was a problem hiding this comment.
❓ Verification inconclusive
左侧图标渲染实现
新增的左侧图标渲染功能增强了组件的灵活性，但目前缺少单元测试覆盖。
请为新增的图标功能添加单元测试，确保组件在传入 leftIcon 时能正确渲染。以下是一个简单的验证脚本：
🏁 Script executed:
#!/bin/bash
# 检查单元测试文件中是否包含leftIcon的测试
rg -l "leftIcon" --glob "src/packages/notify/__test__/*.tsx"Length of output: 60
请补充单元测试覆盖新增的左侧图标渲染功能
目前在测试目录中没有检测到关于 leftIcon 的相关测试用例。请您：
- 在
src/packages/notify/__test__目录下添加一个针对leftIcon功能的单元测试，验证在传入该属性时组件是否能正确渲染出<div className="{classPrefix}-left-icon">的结构； - 手动确认测试文件路径和用例是否符合预期，确保该功能得到充分验证；
附上用于检查测试用例的参考脚本：
#!/bin/bash
# 检查单元测试文件中是否包含 leftIcon 的测试
rg -l "leftIcon" --glob "src/packages/notify/__test__/*.tsx"🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 115-115: src/packages/notify/Notification.tsx#L115
Added line #L115 was not covered by tests
| {rightIcon || closeable ? ( | ||
| <div className={`${classPrefix}-right-icon`} onClick={this.close}> | ||
| {rightIcon || (closeable ? <Close /> : null)} | ||
| </div> | ||
| ) : null} |
There was a problem hiding this comment.
右侧图标与关闭按钮实现
新增的右侧图标和关闭按钮功能提供了更多交互选项，但与左侧图标一样，缺少单元测试覆盖。此外，与 notify.taro.tsx 中不同，这里的 Close 组件没有设置明确的尺寸。
-{rightIcon || (closeable ? <Close /> : null)}
+{rightIcon || (closeable ? <Close size={12} /> : null)}📝 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.
| {rightIcon || closeable ? ( | |
| <div className={`${classPrefix}-right-icon`} onClick={this.close}> | |
| {rightIcon || (closeable ? <Close /> : null)} | |
| </div> | |
| ) : null} | |
| {rightIcon || closeable ? ( | |
| <div className={`${classPrefix}-right-icon`} onClick={this.close}> | |
| - {rightIcon || (closeable ? <Close /> : null)} | |
| + {rightIcon || (closeable ? <Close size={12} /> : null)} | |
| </div> | |
| ) : null} |
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 127-129: src/packages/notify/Notification.tsx#L127-L129
Added lines #L127 - L129 were not covered by tests
| > | ||
| {rightIcon || (closeable ? <Close size={12} /> : null)} |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
图标尺寸统一设置
这里明确设置了 Close 图标的尺寸为 12，而在 Notification.tsx 中没有设置尺寸。建议统一所有组件中的图标尺寸设置。
🏁 Script executed:
#!/bin/bash
# 检查代码库中是否有其他地方使用了Close图标但没有设置尺寸
rg "Close[^a-zA-Z0-9]" --no-line-number | rg -v "size=" | head -n 10Length of output: 539
建议统一设置 Close 图标尺寸
在 src/packages/notify/notify.taro.tsx 中，Close 图标被显式设置为 size={12}，但在 Notification.tsx 中似乎没有对此图标进行尺寸设置，容易导致界面展示不统一。建议检查 Notification.tsx（以及其他可能使用 Close 图标的组件），确保在所有地方对 Close 图标采用相同的尺寸设置（例如统一使用 size={12}），以保持设计一致性。
- 请在
Notification.tsx中查找所有<Close>使用，并添加合适的size属性。 - 同时核查其他组件中对 Close 图标的使用，确保统一。
3 participants
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
distance、closeable、leftIcon和rightIcon，以提供更多自定义选项。