refactor(Rate): v16 适配#3487
Merged
Merged
Conversation
- 新增 layout 属性支持水平/垂直两种布局 - 新增 label 属性支持标签文字，支持 ReactNode | ReactNode[] 实现每颗星独立标签 - 水平布局适配 12DP/16DP/20DP 三种尺寸 - 垂直布局适配 20DP/28DP 尺寸，大尺寸支持 flex 均分布局 - 12DP 星间距调整为 2px - 星星外层新增 .nut-rate-list 容器 - 补充垂直布局、带标签 demo 及文档 - 新增 layout/label/array-label 相关单测 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- 点击星星选中时播放 scale bounce 动画（1 → 1.25 → 1） - 仅在图标尺寸≥20px时启用（水平large、垂直normal/large） - 仅在评分增加时触发，减少时不动画 - 动画持续300ms，自动清除状态 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
github-actions
Bot
added
the
action:review
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## feat_v4.x #3487 +/- ##
=============================================
+ Coverage 88.33% 88.44% +0.10%
=============================================
Files 295 296 +1
Lines 19747 19812 +65
Branches 3117 3134 +17
=============================================
+ Hits 17443 17522 +79
+ Misses 2298 2284 -14
Partials 6 6 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
Collaborator
Author
|
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
构建自动生成，新增 nutuiRateLabelColor 变量类型 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (16)
WalkthroughRate 组件新增 ChangesRate 组件方向、标签与动画功能扩展
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Warning Review ran into problems🔥 ProblemsStopped waiting for pipeline failures after 30000ms. One of your pipelines takes longer than our 30000ms fetch window to run, so review may not consider pipeline-failure results for inline comments if any failures occurred after the fetch window. Increase the timeout if you want to wait longer or run a 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🤖 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 `@src/packages/rate/__test__/rate.spec.tsx`:
- Around line 102-106: The 'layout vertical test' test case is missing an
assertion to verify that the `.nut-rate-list` element is rendered, which weakens
the test coverage. After the existing expect statement that checks for the
'nut-rate-vertical' class in the vertical layout test, add an additional
assertion to confirm that the `.nut-rate-list` element exists in the container.
This ensures the component's contract to always render the list is properly
verified, similar to what should be done for the horizontal layout tests
mentioned at lines 117/132.
- Around line 39-47: The test assertions in this block are wrapped inside an if
condition checking el and valueEl, which causes the test to silently pass if
these elements are not found rather than failing. Replace the conditional
wrapper with explicit assertions that verify el and valueEl exist before
proceeding. Use expect() statements to assert that el and valueEl are defined
and truthy, then remove the if condition wrapping and place all the subsequent
assertions (el.length, childNodes checks, click events, and innerHTML
validation) outside the conditional block so they execute unconditionally and
cause test failure if the selectors fail.
In `@src/packages/rate/doc.en-US.md`:
- Line 141: Update the type documentation for the label property in the Rate
component documentation table to reflect support for array labels. Find the
table row where the label property is documented and change its type from
ReactNode to ReactNode | ReactNode[] to accurately represent that the label can
now accept either a ReactNode or an array of ReactNodes.
In `@src/packages/rate/doc.md`:
- Line 141: The type definition for the label property on line 141 in the rate
component documentation is incomplete and does not reflect the actual supported
types. Update the type annotation from `ReactNode` to `ReactNode | ReactNode[]`
to accurately document that the label prop can accept either a single ReactNode
or an array of ReactNode elements, matching the actual component capabilities
demonstrated in the array label demo.
In `@src/packages/rate/doc.taro.md`:
- Line 141: In the documentation table for the rate component, the `label`
parameter type is currently documented as `ReactNode`, but the component
actually accepts `ReactNode | ReactNode[]`. Update the type specification in
line 141 from `ReactNode` to `ReactNode | ReactNode[]` to accurately reflect the
component's actual contract and prevent misleading callers.
In `@src/packages/rate/doc.zh-TW.md`:
- Line 141: The type definition for the label property in the documentation
table is incomplete. Update the type annotation for label from ReactNode to
ReactNode | ReactNode[] to accurately reflect the actual API support, ensuring
the documentation table row for label stays consistent with the implementation.
This change should be made in the properties table where label is defined.
🪄 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: 79eebb5a-5d42-4759-b08a-090695aef434
⛔ Files ignored due to path filters (1)
src/packages/rate/__test__/__snapshots__/rate.spec.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (28)
src/packages/configprovider/types.tssrc/packages/rate/__test__/rate.spec.tsxsrc/packages/rate/demo.taro.tsxsrc/packages/rate/demo.tsxsrc/packages/rate/demos/h5/demo1.tsxsrc/packages/rate/demos/h5/demo13.tsxsrc/packages/rate/demos/h5/demo14.tsxsrc/packages/rate/demos/h5/demo15.tsxsrc/packages/rate/demos/h5/demo9.tsxsrc/packages/rate/demos/taro/demo1.tsxsrc/packages/rate/demos/taro/demo13.tsxsrc/packages/rate/demos/taro/demo14.tsxsrc/packages/rate/demos/taro/demo15.tsxsrc/packages/rate/demos/taro/demo9.tsxsrc/packages/rate/doc.en-US.mdsrc/packages/rate/doc.mdsrc/packages/rate/doc.taro.mdsrc/packages/rate/doc.zh-TW.mdsrc/packages/rate/index.taro.tssrc/packages/rate/index.tssrc/packages/rate/rate.scsssrc/packages/rate/rate.taro.tsxsrc/packages/rate/rate.tsxsrc/styles/variables-daojia.scsssrc/styles/variables-jmapp.scsssrc/styles/variables-jrkf.scsssrc/styles/variables.scsssrc/types/spec/rate/base.ts
Comment on lines
39
to
47
| if (el && valueEl) { | ||
| expect(el.length).toBe(state.count) // count | ||
| expect(el[2].childNodes[0]).toHaveClass('nut-rate-item-icon') // active | ||
| expect(el.length).toBe(state.count) | ||
| expect(el[2].childNodes[0]).toHaveClass('nut-rate-item-icon') | ||
| expect(el[2].childNodes[0].childNodes[0]).toHaveClass('nut-icon-HeartFill') | ||
| expect(el[3].childNodes[0]).toHaveClass('nut-rate-item-icon-disabled') // disabled | ||
| expect(el[3].childNodes[0]).toHaveClass('nut-rate-item-icon-disabled') | ||
| expect(el[3].childNodes[0].childNodes[0]).toHaveClass('nut-icon-Heart') | ||
| fireEvent.click(el[1]) | ||
| expect(valueEl.innerHTML).toBe('2') // onChange | ||
| expect(valueEl.innerHTML).toBe('2') | ||
| } |
There was a problem hiding this comment.
避免在 Line 39 用条件分支包裹核心断言，防止测试静默通过。
这里把所有关键校验都放进 if (el && valueEl)，一旦选择器失效会直接跳过断言，测试会误通过。建议先显式断言节点存在，再执行后续行为断言。
建议修改
const valueEl = container.querySelector('.score')
const el = container.querySelectorAll('.nut-rate-item')
- if (el && valueEl) {
- expect(el.length).toBe(state.count)
- expect(el[2].childNodes[0]).toHaveClass('nut-rate-item-icon')
- expect(el[2].childNodes[0].childNodes[0]).toHaveClass('nut-icon-HeartFill')
- expect(el[3].childNodes[0]).toHaveClass('nut-rate-item-icon-disabled')
- expect(el[3].childNodes[0].childNodes[0]).toHaveClass('nut-icon-Heart')
- fireEvent.click(el[1])
- expect(valueEl.innerHTML).toBe('2')
- }
+ expect(valueEl).toBeTruthy()
+ expect(el.length).toBe(state.count)
+ expect(el[2].childNodes[0]).toHaveClass('nut-rate-item-icon')
+ expect(el[2].childNodes[0].childNodes[0]).toHaveClass('nut-icon-HeartFill')
+ expect(el[3].childNodes[0]).toHaveClass('nut-rate-item-icon-disabled')
+ expect(el[3].childNodes[0].childNodes[0]).toHaveClass('nut-icon-Heart')
+ fireEvent.click(el[1])
+ expect(valueEl!.innerHTML).toBe('2')🤖 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/rate/__test__/rate.spec.tsx` around lines 39 - 47, The test
assertions in this block are wrapped inside an if condition checking el and
valueEl, which causes the test to silently pass if these elements are not found
rather than failing. Replace the conditional wrapper with explicit assertions
that verify el and valueEl exist before proceeding. Use expect() statements to
assert that el and valueEl are defined and truthy, then remove the if condition
wrapping and place all the subsequent assertions (el.length, childNodes checks,
click events, and innerHTML validation) outside the conditional block so they
execute unconditionally and cause test failure if the selectors fail.
Comment on lines
+102
to
+106
| test('layout vertical test', () => { | ||
| const { container } = render(<Rate defaultValue={3} layout="vertical" />) | ||
| const root = container.querySelector('.nut-rate') | ||
| expect(root).toHaveClass('nut-rate-vertical') | ||
| }) |
There was a problem hiding this comment.
Line 117/132 的顺序断言同样会被条件分支吞掉，且 Line 102-106 建议补 .nut-rate-list 存在性断言。
当前写法在 root/list/label 缺失时会跳过顺序校验，造成用例弱化；vertical 用例也应与 horizontal 一样确认 list 已渲染（组件契约是始终渲染 list）。
建议修改
test('layout vertical test', () => {
const { container } = render(<Rate defaultValue={3} layout="vertical" />)
const root = container.querySelector('.nut-rate')
expect(root).toHaveClass('nut-rate-vertical')
+ expect(container.querySelector('.nut-rate-list')).toBeTruthy()
})
@@
const root = container.querySelector('.nut-rate')
const list = container.querySelector('.nut-rate-list')
- if (root && label && list) {
- const children = Array.from(root.children)
- expect(children.indexOf(label)).toBeLessThan(children.indexOf(list))
- }
+ expect(root).toBeTruthy()
+ expect(list).toBeTruthy()
+ const children = Array.from(root!.children)
+ expect(children.indexOf(label!)).toBeLessThan(children.indexOf(list!))
@@
const root = container.querySelector('.nut-rate')
const list = container.querySelector('.nut-rate-list')
- if (root && label && list) {
- const children = Array.from(root.children)
- expect(children.indexOf(label)).toBeGreaterThan(children.indexOf(list))
- }
+ expect(root).toBeTruthy()
+ expect(list).toBeTruthy()
+ const children = Array.from(root!.children)
+ expect(children.indexOf(label!)).toBeGreaterThan(children.indexOf(list!))Also applies to: 117-120, 132-135
🤖 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/rate/__test__/rate.spec.tsx` around lines 102 - 106, The 'layout
vertical test' test case is missing an assertion to verify that the
`.nut-rate-list` element is rendered, which weakens the test coverage. After the
existing expect statement that checks for the 'nut-rate-vertical' class in the
vertical layout test, add an additional assertion to confirm that the
`.nut-rate-list` element exists in the container. This ensures the component's
contract to always render the list is properly verified, similar to what should
be done for the horizontal layout tests mentioned at lines 117/132.
| | --- | --- | --- | --- | | ||
| | size | Score size | `large` \| `normal` \| `small` | `normal` | | ||
| | layout | Layout type | `horizontal` \| `vertical` | `horizontal` | | ||
| | label | Label text | `ReactNode` | `-` | |
There was a problem hiding this comment.
label 的类型文档需要与组件契约保持一致。
Line 141 当前写为 ReactNode，但本次功能已支持数组标签；建议改为 ReactNode \| ReactNode[]，避免误导使用方。
建议修改
-| label | Label text | `ReactNode` | `-` |
+| label | Label text | `ReactNode` \| `ReactNode[]` | `-` |📝 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.
Suggested change
| | label | Label text | `ReactNode` | `-` | | |
| | label | Label text | `ReactNode` \| `ReactNode[]` | `-` | |
🤖 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/rate/doc.en-US.md` at line 141, Update the type documentation
for the label property in the Rate component documentation table to reflect
support for array labels. Find the table row where the label property is
documented and change its type from ReactNode to ReactNode | ReactNode[] to
accurately represent that the label can now accept either a ReactNode or an
array of ReactNodes.
| | --- | --- | --- | --- | | ||
| | size | star 尺寸 | `large` \| `normal` \| `small` | `normal` | | ||
| | layout | 布局方式 | `horizontal` \| `vertical` | `horizontal` | | ||
| | label | 标签文字 | `ReactNode` | `-` | |
There was a problem hiding this comment.
label 类型描述建议补全数组支持。
Line 141 建议从 ReactNode 调整为 ReactNode \| ReactNode[]，与实际能力（如数组标签 demo）保持一致。
建议修改
-| label | 标签文字 | `ReactNode` | `-` |
+| label | 标签文字 | `ReactNode` \| `ReactNode[]` | `-` |📝 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.
Suggested change
| | label | 标签文字 | `ReactNode` | `-` | | |
| | label | 标签文字 | `ReactNode` \| `ReactNode[]` | `-` | |
🤖 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/rate/doc.md` at line 141, The type definition for the label
property on line 141 in the rate component documentation is incomplete and does
not reflect the actual supported types. Update the type annotation from
`ReactNode` to `ReactNode | ReactNode[]` to accurately document that the label
prop can accept either a single ReactNode or an array of ReactNode elements,
matching the actual component capabilities demonstrated in the array label demo.
| | --- | --- | --- | --- | | ||
| | size | star 尺寸 | `large` \| `normal` \| `small` | `normal` | | ||
| | layout | 布局方式 | `horizontal` \| `vertical` | `horizontal` | | ||
| | label | 标签文字 | `ReactNode` | `-` | |
There was a problem hiding this comment.
修正文档中 label 类型与组件契约不一致
Line 141 当前写为 ReactNode，但组件实际支持 ReactNode | ReactNode[]。建议同步为联合类型，避免误导调用方。
建议修改
-| label | 标签文字 | `ReactNode` | `-` |
+| label | 标签文字 | `ReactNode` \| `ReactNode[]` | `-` |📝 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.
Suggested change
| | label | 标签文字 | `ReactNode` | `-` | | |
| | label | 标签文字 | `ReactNode` \| `ReactNode[]` | `-` | |
🤖 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/rate/doc.taro.md` at line 141, In the documentation table for
the rate component, the `label` parameter type is currently documented as
`ReactNode`, but the component actually accepts `ReactNode | ReactNode[]`.
Update the type specification in line 141 from `ReactNode` to `ReactNode |
ReactNode[]` to accurately reflect the component's actual contract and prevent
misleading callers.
| | --- | --- | --- | --- | | ||
| | size | star 尺寸 | `large` \| `normal` \| `small` | `normal` | | ||
| | layout | 佈局方式 | `horizontal` \| `vertical` | `horizontal` | | ||
| | label | 標籤文字 | `ReactNode` | `-` | |
There was a problem hiding this comment.
修正文档中 label 類型定義不完整
Line 141 目前標註為 ReactNode，實際 API 支援 ReactNode | ReactNode[]。建議同步更新，避免文件與實作不一致。
建議修改
-| label | 標籤文字 | `ReactNode` | `-` |
+| label | 標籤文字 | `ReactNode` \| `ReactNode[]` | `-` |📝 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.
Suggested change
| | label | 標籤文字 | `ReactNode` | `-` | | |
| | label | 標籤文字 | `ReactNode` \| `ReactNode[]` | `-` | |
🤖 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/rate/doc.zh-TW.md` at line 141, The type definition for the
label property in the documentation table is incomplete. Update the type
annotation for label from ReactNode to ReactNode | ReactNode[] to accurately
reflect the actual API support, ensuring the documentation table row for label
stays consistent with the implementation. This change should be made in the
properties table where label is defined.
xiaoyatong
reviewed
Jun 18, 2026
| | 属性 | 说明 | 类型 | 默认值 | | ||
| | --- | --- | --- | --- | | ||
| | size | star 尺寸 | `large` \| `normal` \| `small` | `normal` | | ||
| | layout | 布局方式 | `horizontal` \| `vertical` | `horizontal` | |
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🤔 这个变动的性质是？
Summary by CodeRabbit
Release Notes
New Features
direction（horizontal/vertical）布局模式label支持单值/数组，展示自定义评分级别文案Bug Fixes & Improvements
--nutui-rate-label-color自定义标签颜色Documentation
Tests