Feat v16 noticebar simple#3491
Conversation
- 主文本颜色改为 $color-title，字号改为 $font-size-base(14px) - 容器高度 36px → 40px，修复单行图标上下 8DP 间距 - 新增 $noticebar-icon-color($color-primary) 用于图标色 - 新增 $noticebar-close-color($color-text-help) 用于关闭按钮和倒计时圆环 - 新增 $noticebar-left-icon-wrap-width(32px) 双行模式图标放大 - 新增 $noticebar-action-font-size($font-size-xs) 操作按钮字号 - action 区域默认 color: $color-primary - 新增商品图修饰类 .nut-noticebar-box-left-icon--product - right prop 标记 deprecated - 新增 demo14（自定义配图），同步 taro 端 demo12/13/14 - 4 份多语言文档同步更新 Props 表和 CSS 变量表 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- 倒计时圆环改用 conic-gradient + CSS变量实现，兼容H5和小程序 - 修复 onClose 回调参数不一致问题 - 修复 autoClose useEffect 闭包引用过时问题 - 移除 handleClickIcon 死代码 - 统一 setShowNoticeBar 命名规范 - 精简 vertical 模式重复 SCSS - 添加 right prop 废弃警告 - 移除 demo console.log - 移除 .claude 工具文件误提交
github-actions
Bot
added
the
action:review
概述为 变更内容NoticeBar 功能扩展与设计对齐
时序图sequenceDiagram
participant 用户
participant NoticeBar
participant setInterval定时器
participant onCloseRef
Note over NoticeBar: autoClose>0 且 showNoticeBar=true
NoticeBar->>setInterval定时器: 启动倒计时 interval
loop 每 100ms
setInterval定时器->>NoticeBar: 更新 autoCloseProgress (100→0)
NoticeBar->>NoticeBar: renderAutoCloseIcon 通过 CSS --progress 驱动圆环动画
end
setInterval定时器->>NoticeBar: 到期 → setShowNoticeBar(false)
NoticeBar->>onCloseRef: 调用 onCloseRef.current?.()
onCloseRef->>用户: 触发 onClose 回调
用户->>NoticeBar: 手动点击关闭图标 (onClickIcon)
NoticeBar->>NoticeBar: setShowNoticeBar(false)
NoticeBar->>setInterval定时器: clearInterval + clearTimeout
NoticeBar->>onCloseRef: 调用 close() 与 onClose()
代码审查难度评估🎯 4 (Complex) | ⏱️ ~60 minutes 相关 PR
建议审查人
小诗
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 markdownlint-cli2 (0.22.1)src/packages/noticebar/doc.mdmarkdownlint-cli2 v0.22.1 (markdownlint v0.40.0) src/packages/noticebar/doc.en-US.mdmarkdownlint-cli2 v0.22.1 (markdownlint v0.40.0) src/packages/noticebar/doc.zh-TW.mdmarkdownlint-cli2 v0.22.1 (markdownlint v0.40.0)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## feat_v4.x #3491 +/- ##
=============================================
+ Coverage 88.33% 88.53% +0.20%
=============================================
Files 295 296 +1
Lines 19747 19877 +130
Branches 3117 3149 +32
=============================================
+ Hits 17443 17598 +155
+ Misses 2298 2273 -25
Partials 6 6 ☔ View full report in Codecov by Harness. 🚀 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: 12
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
.claude/nutui-analysis.json (1)
1-136: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win此文件应从 PR 中删除，不应被追踪
该文件是 AI 工具生成的分析元数据产物。根据 .gitignore 中新增的规则（第 64 行），
.claude/nutui-*.json应被忽略，说明这类文件不应被提交到版本控制中。此外，PR 目标中明确提到 "no unrelated files are included in the changes" — 这些工具生成的中间产物属于应排除的文件范畴。建议操作：删除本文件，仅保留 .gitignore 中的忽略规则。
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.claude/nutui-analysis.json around lines 1 - 136, This file is an AI tool-generated analysis metadata artifact that should not be committed to version control. Remove the `.claude/nutui-analysis.json` file from the PR since it is explicitly listed in the .gitignore rules (patterns like `.claude/nutui-*.json` on line 64) and contradicts the PR requirement of excluding unrelated tool-generated intermediate products. Delete this file entirely to keep the repository clean and focused only on the actual code changes..claude/nutui-plan.json (1)
1-110: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win此文件应从 PR 中删除，不应被追踪
该文件是 AI 工具生成的计划元数据产物。根据 .gitignore 新增规则，
.claude/nutui-*.json应被忽略。这类文件是工具的临时产物，不应被提交到仓库。建议操作：删除本文件。如需保留计划/执行记录，应使用项目内的正式文档或 PR 描述，而非工具元数据。
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.claude/nutui-plan.json around lines 1 - 110, Remove the file `.claude/nutui-plan.json` from the PR entirely as it is a temporary AI tool-generated metadata artifact that should be ignored per the .gitignore configuration pattern for `.claude/nutui-*.json` files. Delete this file from version control and ensure it is not committed to the repository.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.claude/nutui-execution-report.json:
- Around line 1-17: Remove the `.claude/nutui-execution-report.json` file from
the PR as it is a temporary metadata artifact generated by the AI execution tool
and should not be committed to the repository. This file matches the exclusion
pattern in .gitignore rules and should not be tracked in version control.
In `@src/packages/noticebar/__test__/noticebar.spec.tsx`:
- Around line 409-430: The autoClose test function uses vi.useFakeTimers() at
the start and vi.useRealTimers() at the end, but if any assertion fails,
vi.useRealTimers() will not execute, causing fake timers to persist and pollute
subsequent tests. Wrap the test logic between vi.useFakeTimers() and
vi.useRealTimers() in a try/finally block, placing vi.useRealTimers() in the
finally clause to ensure it always executes regardless of whether assertions
pass or fail.
In `@src/packages/noticebar/demos/taro/demo12.tsx`:
- Around line 19-32: The `<br />` HTML tags at the beginning (line 19) and end
(line 32) of the NoticeBar demo are not supported in Taro JSX without the
`@tarojs/plugin-html` plugin, causing rendering issues on mini-program platforms.
Replace both `<br />` instances with `<View>` components and add styling (such
as `style={{ height: '8px' }}` or margin/padding) to maintain proper spacing
between demo sections. This ensures cross-platform compatibility for the
mini-program environment.
In `@src/packages/noticebar/demos/taro/demo13.tsx`:
- Line 28: The `<br />` element on line 28 is not supported in Taro
mini-programs and will be ignored during compilation, causing unstable
rendering. Replace the `<br />` tag with either a `<Space style={{ marginTop:
'10px' }} />` component or a `<View style={{ height: '8px' }} />` element to
provide proper spacing. Ensure consistency with other Taro demos in the project
(such as demo10) by using whichever spacing approach is already established in
similar demo files.
In `@src/packages/noticebar/demos/taro/demo14.tsx`:
- Line 26: The `<br />` HTML element used in the demo file creates compatibility
issues on Taro mini-program platforms. Replace the `<br />` tag with a Taro
cross-platform `<View />` component configured with appropriate styling (such as
margin or padding properties) to achieve the same vertical spacing effect
between components while ensuring compatibility across all supported platforms.
In `@src/packages/noticebar/doc.en-US.md`:
- Around line 174-198: The CSS variables documentation table in the noticebar
documentation has two issues that need to be fixed. First, the
`\--nutui-noticebar-description-color` entry (line 194) currently shows `#666`
as the default value but should be corrected to `$color-text` to match the
actual implementation in variables.scss. Second, the table is missing
documentation for two CSS variables that are defined in the actual
implementation: `\--nutui-noticebar-close-ring-color` and
`\--nutui-noticebar-close-ring-shadow-color`. Add these two missing variable
entries after the `\--nutui-noticebar-close-icon-size` row to complete the
documentation.
In `@src/packages/noticebar/doc.md`:
- Around line 176-200: The CSS variable documentation table for noticebar in
doc.md has two issues that need fixing. First, on line 196, correct the value
for `--nutui-noticebar-description-color` from `#666` to `$color-text` to match
the actual definition in variables.scss. Second, add two missing CSS variable
entries after line 200 to document `--nutui-noticebar-close-ring-color` and
`--nutui-noticebar-close-ring-shadow-color`, which are defined in variables.scss
lines 1849-1856 and declared in the NutCSSVariables type but currently missing
from the documentation table.
In `@src/packages/noticebar/doc.taro.md`:
- Around line 174-198: In the CSS variables documentation table for the
noticebar component, update the \--nutui-noticebar-description-color entry to
use the correct SCSS variable value of $color-text instead of the hardcoded hex
value `#666` on line 194 to maintain consistency with the actual style definitions
in doc.md and doc.en-US.md. Additionally, add two missing CSS variable
documentation rows after the \--nutui-noticebar-close-icon-size entry: one for
\--nutui-noticebar-close-ring-color and one for
\--nutui-noticebar-close-ring-shadow-color to document the close button ring
styling variables.
In `@src/packages/noticebar/doc.zh-TW.md`:
- Around line 174-198: In the noticebar CSS variables documentation table,
correct the value for the \--nutui-noticebar-description-color variable from
`#666` to `$color-text` to match the SCSS variable definition and align with
other language versions. Additionally, add two missing CSS variable
documentation entries after the existing table entries:
\--nutui-noticebar-close-ring-color for the close button ring color and
\--nutui-noticebar-close-ring-shadow-color for the close button ring shadow
color, with their corresponding default values.
In `@src/packages/noticebar/noticebar.taro.tsx`:
- Around line 223-231: The onClickIcon callback has inconsistent close behavior
because setShowNoticeBar(!closeable) only considers the closeable prop, but the
notice bar can also be closed through rightIcon or autoClose conditions (checked
around lines 527-538). When closeable is false but a close icon is shown due to
rightIcon or autoClose, clicking triggers the close and onClose callbacks but
fails to actually close the notice bar. Fix this by making the close logic
consistent: instead of setShowNoticeBar(!closeable), determine whether any close
method is available (check if closeable is true OR rightIcon exists OR autoClose
is greater than 0) and explicitly set setShowNoticeBar(false) when the icon is
clicked, ensuring the visibility state matches the callback execution.
In `@src/packages/noticebar/noticebar.tsx`:
- Around line 210-215: The onClickIcon handler in the noticebar component has a
logic issue with the autoClose feature. When closeable is false and autoClose is
enabled, the setShowNoticeBar(!closeable) line keeps the notice bar visible
instead of hiding it, and clicking the icon triggers onClose while the autoClose
timer later triggers it again causing duplication. Fix this by checking if
autoClose is active, and when the icon is clicked in that scenario, directly set
the notice bar to hidden with setShowNoticeBar(false), clear any active
autoClose timer to prevent duplicate callbacks, and properly invoke the close
and onClose callbacks. Apply the same fix to the similar code block around lines
510-519.
- Line 23: The default height value in the noticebar component is set to 36,
which conflicts with the 16.0 design specification that requires the container
height to be 40. This inconsistency between the hardcoded height property and
the design goal will cause discrepancies in JS height calculations, particularly
affecting vertical mode and scrolling behavior. Update the height property value
in the noticebar.tsx file from 36 to 40 to align with the design specification.
---
Outside diff comments:
In @.claude/nutui-analysis.json:
- Around line 1-136: This file is an AI tool-generated analysis metadata
artifact that should not be committed to version control. Remove the
`.claude/nutui-analysis.json` file from the PR since it is explicitly listed in
the .gitignore rules (patterns like `.claude/nutui-*.json` on line 64) and
contradicts the PR requirement of excluding unrelated tool-generated
intermediate products. Delete this file entirely to keep the repository clean
and focused only on the actual code changes.
In @.claude/nutui-plan.json:
- Around line 1-110: Remove the file `.claude/nutui-plan.json` from the PR
entirely as it is a temporary AI tool-generated metadata artifact that should be
ignored per the .gitignore configuration pattern for `.claude/nutui-*.json`
files. Delete this file from version control and ensure it is not committed to
the repository.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 06d77abb-b328-43d5-b433-c16c2aa0dddc
⛔ Files ignored due to path filters (1)
src/packages/noticebar/__test__/__snapshots__/noticebar.spec.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (23)
.claude/nutui-analysis.json.claude/nutui-execution-report.json.claude/nutui-plan.json.gitignoresrc/packages/configprovider/types.tssrc/packages/noticebar/__test__/noticebar.spec.tsxsrc/packages/noticebar/demo.taro.tsxsrc/packages/noticebar/demo.tsxsrc/packages/noticebar/demos/h5/demo12.tsxsrc/packages/noticebar/demos/h5/demo13.tsxsrc/packages/noticebar/demos/h5/demo14.tsxsrc/packages/noticebar/demos/taro/demo12.tsxsrc/packages/noticebar/demos/taro/demo13.tsxsrc/packages/noticebar/demos/taro/demo14.tsxsrc/packages/noticebar/doc.en-US.mdsrc/packages/noticebar/doc.mdsrc/packages/noticebar/doc.taro.mdsrc/packages/noticebar/doc.zh-TW.mdsrc/packages/noticebar/noticebar.scsssrc/packages/noticebar/noticebar.taro.tsxsrc/packages/noticebar/noticebar.tsxsrc/styles/variables.scsssrc/types/spec/noticebar/base.ts
| test('autoClose renders countdown ring and closes after delay', async () => { | ||
| vi.useFakeTimers() | ||
| const handleClose = vi.fn() | ||
| const { container } = render( | ||
| <NoticeBar content="自动关闭" autoClose={3000} onClose={handleClose} /> | ||
| ) | ||
|
|
||
| expect(container.querySelector('.nut-noticebar-box')).toBeTruthy() | ||
| expect( | ||
| container.querySelector('.nut-noticebar-box-close-countdown') | ||
| ).toBeTruthy() | ||
| expect(container.querySelector('.nut-noticebar-box-close-icon')).toBeTruthy() | ||
|
|
||
| act(() => { | ||
| vi.advanceTimersByTime(3000) | ||
| }) | ||
|
|
||
| expect(container.querySelector('.nut-noticebar-box')).toBeFalsy() | ||
| expect(handleClose).toHaveBeenCalled() | ||
|
|
||
| vi.useRealTimers() | ||
| }) |
There was a problem hiding this comment.
🩺 Stability & Availability | 🟡 Minor | ⚡ Quick win
Fake timer 恢复应放入 finally，避免测试污染。
Line 409-430 里若任一断言抛错，vi.useRealTimers() 不会执行，后续用例会被 fake timer 污染。建议用 try/finally 包裹。
🔧 建议修复
test('autoClose renders countdown ring and closes after delay', async () => {
- vi.useFakeTimers()
- const handleClose = vi.fn()
- const { container } = render(
- <NoticeBar content="自动关闭" autoClose={3000} onClose={handleClose} />
- )
-
- expect(container.querySelector('.nut-noticebar-box')).toBeTruthy()
- expect(
- container.querySelector('.nut-noticebar-box-close-countdown')
- ).toBeTruthy()
- expect(container.querySelector('.nut-noticebar-box-close-icon')).toBeTruthy()
-
- act(() => {
- vi.advanceTimersByTime(3000)
- })
-
- expect(container.querySelector('.nut-noticebar-box')).toBeFalsy()
- expect(handleClose).toHaveBeenCalled()
-
- vi.useRealTimers()
+ vi.useFakeTimers()
+ try {
+ const handleClose = vi.fn()
+ const { container } = render(
+ <NoticeBar content="自动关闭" autoClose={3000} onClose={handleClose} />
+ )
+
+ expect(container.querySelector('.nut-noticebar-box')).toBeTruthy()
+ expect(
+ container.querySelector('.nut-noticebar-box-close-countdown')
+ ).toBeTruthy()
+ expect(container.querySelector('.nut-noticebar-box-close-icon')).toBeTruthy()
+
+ act(() => {
+ vi.advanceTimersByTime(3000)
+ })
+
+ expect(container.querySelector('.nut-noticebar-box')).toBeFalsy()
+ expect(handleClose).toHaveBeenCalled()
+ } finally {
+ vi.useRealTimers()
+ }
})🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/packages/noticebar/__test__/noticebar.spec.tsx` around lines 409 - 430,
The autoClose test function uses vi.useFakeTimers() at the start and
vi.useRealTimers() at the end, but if any assertion fails, vi.useRealTimers()
will not execute, causing fake timers to persist and pollute subsequent tests.
Wrap the test logic between vi.useFakeTimers() and vi.useRealTimers() in a
try/finally block, placing vi.useRealTimers() in the finally clause to ensure it
always executes regardless of whether assertions pass or fail.
- Taro demo 中 <br /> 替换为 <View> 组件兼容小程序 - 文档 description-color 值修正为 $color-text - 补充 close-ring-color/close-ring-shadow-color CSS 变量文档 - 关闭图标点击统一为显式关闭，清理 autoClose 定时器防止重复回调 - 移除 .claude 工具文件 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/packages/noticebar/noticebar.tsx (1)
527-533: 🚀 Performance & Scalability | 🟡 Minor | ⚡ Quick win将弃用告警移出高频渲染路径。
renderRight每次渲染都会触发console.warn。在autoClose场景下，Line 142 的进度更新会导致高频重渲染，从而重复刷同一条弃用告警并带来不必要的性能开销。💡 建议修复
+ const warnedRightDeprecatedRef = useRef(false) const renderRight = () => { if (!right) return null - if (process.env.NODE_ENV !== 'production') { + if ( + process.env.NODE_ENV !== 'production' && + !warnedRightDeprecatedRef.current + ) { + warnedRightDeprecatedRef.current = true console.warn( '[NutUI] NoticeBar: `right` prop is deprecated, use `action` instead.' ) } return <div className={`${classPrefix}-box-right`}>{right}</div> }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/packages/noticebar/noticebar.tsx` around lines 527 - 533, The deprecation warning for the `right` prop is being logged on every render inside the `renderRight` function, causing unnecessary performance overhead especially when the component re-renders frequently such as during autoClose progress updates. Move the deprecation warning check out of the `renderRight` function and place it in a useEffect hook with appropriate dependencies so that the warning is only triggered once when the `right` prop is provided, rather than on every render cycle.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@src/packages/noticebar/noticebar.tsx`:
- Around line 527-533: The deprecation warning for the `right` prop is being
logged on every render inside the `renderRight` function, causing unnecessary
performance overhead especially when the component re-renders frequently such as
during autoClose progress updates. Move the deprecation warning check out of the
`renderRight` function and place it in a useEffect hook with appropriate
dependencies so that the warning is only triggered once when the `right` prop is
provided, rather than on every render cycle.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 57e170fa-efbb-460b-9425-ea8af88bae47
📒 Files selected for processing (14)
src/packages/noticebar/demos/taro/demo1.tsxsrc/packages/noticebar/demos/taro/demo12.tsxsrc/packages/noticebar/demos/taro/demo13.tsxsrc/packages/noticebar/demos/taro/demo14.tsxsrc/packages/noticebar/demos/taro/demo2.tsxsrc/packages/noticebar/demos/taro/demo3.tsxsrc/packages/noticebar/demos/taro/demo4.tsxsrc/packages/noticebar/demos/taro/demo6.tsxsrc/packages/noticebar/doc.en-US.mdsrc/packages/noticebar/doc.mdsrc/packages/noticebar/doc.taro.mdsrc/packages/noticebar/doc.zh-TW.mdsrc/packages/noticebar/noticebar.taro.tsxsrc/packages/noticebar/noticebar.tsx
✅ Files skipped from review due to trivial changes (2)
- src/packages/noticebar/doc.zh-TW.md
- src/packages/noticebar/doc.md
🚧 Files skipped from review as they are similar to previous changes (6)
- src/packages/noticebar/demos/taro/demo14.tsx
- src/packages/noticebar/demos/taro/demo12.tsx
- src/packages/noticebar/demos/taro/demo13.tsx
- src/packages/noticebar/doc.en-US.md
- src/packages/noticebar/doc.taro.md
- src/packages/noticebar/noticebar.taro.tsx
|
|
2 participants
🤔 这个变动的性质是？
☑️ 请求合并前的自查清单
Summary by CodeRabbit
Release Notes
New Features
Documentation
Style