refactor: Support semantic structure #371
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough本次更新对步骤条组件的样式和核心实现进行了大幅重构。主要包括：精简和重命名样式类，移除尾部装饰和悬浮效果，引入基于 flexbox 的新布局，统一样式和渲染自定义接口，重写 Step 和 Steps 组件为数据驱动和 render-prop 结构，并添加了新的 Rail 组件。测试文件也同步适配了结构和接口的变化。 Changes
Sequence Diagram(s)sequenceDiagram
participant 用户
participant Steps
participant Step
participant Rail
用户->>Steps: 传入 items、classNames、styles、render-prop 等
Steps->>Step: 遍历 items，传递数据及渲染回调
Step->>Rail: 如果不是最后一步，渲染 Rail 组件
Step-->>Steps: 渲染自定义节点（iconRender/itemRender/itemWrapperRender）
Steps-->>用户: 渲染完整步骤条
Poem
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. 🔧 ESLint
src/Step.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the config "prettier" to extend from. Please check that the name of the config is correct. The config "prettier" was referenced from the config file in "/.eslintrc.js". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. Tip ⚡️ Faster reviews with caching
Enjoy the performance boost—your workflow just got faster. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #371 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 2 3 +1
Lines 99 73 -26
Branches 48 31 -17
=========================================
- Hits 99 73 -26 ☔ 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: 3
🧹 Nitpick comments (5)
src/Rail.tsx (1)
12-23: Rail 组件实现简洁高效这个新的
Rail组件实现很好地体现了关注点分离原则，将之前在 CSS 中处理的步骤连接线逻辑移到了组件中。这样使得自定义和状态管理更加直观和灵活。建议为
classNames和styles添加空值检查，以避免可能的运行时错误。- return ( - <div - className={cls(railCls, `${railCls}-${status}`, classNames.itemRail)} - style={styles.itemRail} - /> - ); + return ( + <div + className={cls(railCls, `${railCls}-${status}`, classNames?.itemRail)} + style={styles?.itemRail} + /> + );src/Step.tsx (2)
130-139: 自定义icon未被渲染，功能回退虽然
classString中根据icon加了-custom修饰符，但真正的 DOM 中仅调用iconRender。当用户只在items里传icon而未实现iconRender时，图标不会显示。可以在
iconRender缺省时回退到item.icon：-{iconRender?.(renderInfo)} +{iconRender ? iconRender(renderInfo) : icon}
170-181: 缺少React.memo/useMemo，列表较长时可能触发不必要的重渲染
Step中组装stepNode的逻辑纯粹由 props 决定，可通过React.memo包装整个组件或用useMemo缓存，减少Steps更新时的层层重渲染。src/Steps.tsx (2)
140-145:onStepClick未传递原生事件，无法阻止冒泡等操作已有场景可能需要在
onChange外再做防抖、阻止默认等处理。建议让Step把原生事件一起带回来：-const onStepClick = (next: number) => { +const onStepClick = (next: number, e?: React.MouseEvent<HTMLDivElement>) => { if (onChange && current !== next) { - onChange(next); + onChange(next, e); } };同时在
Step里调用onClick?.(index, e)。这样既向后兼容，又提供更大的扩展空间。
181-190: 根节点内联样式覆盖顺序易出错目前写法先展开
style再覆盖styles.root，当两处都定义同名属性时优先采用styles.root。如想保持外层style的最高优先级，应调整顺序：-style={{ - ...style, - ...styles?.root, -}} +style={{ + ...styles?.root, + ...style, +}}请根据设计系统要求确认优先级。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
tests/__snapshots__/index.test.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (15)
assets/index.less(4 hunks)assets/inline.less(1 hunks)assets/label-placement.less(1 hunks)assets/nav.less(0 hunks)assets/progress-dot.less(0 hunks)assets/small.less(1 hunks)assets/vertical.less(1 hunks)package.json(2 hunks)src/Rail.tsx(1 hunks)src/Step.tsx(1 hunks)src/Steps.tsx(1 hunks)src/index.ts(1 hunks)src/interface.ts(0 hunks)tests/index.test.tsx(6 hunks)tests/semantic.test.tsx(1 hunks)
💤 Files with no reviewable changes (3)
- src/interface.ts
- assets/nav.less
- assets/progress-dot.less
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/Rail.tsx (1)
src/Steps.tsx (2)
StepsProps(47-71)Status(6-6)
🔇 Additional comments (17)
package.json (2)
3-3: 检查版本号变更
将版本从0.0.0提升到0.0.0-alpha.5符合预发布语义，请确认 CI/CD 和发布流程已配置为正确处理alpha标签版本，且在 CHANGELOG 中注明了这一 Breaking Change。
83-84: 确认 React 版本兼容性
将react和react-dom从^19.0.0降级到^18.0.0，请验证以下内容：
- 代码库中所有用到 React 19 特性的逻辑已移除或降级；
- 单元测试与示例在 React 18 环境下通过；
- README/CHANGELOG 明确标注了对最低 React 版本的要求。
src/index.ts (1)
1-2: 类型导出优化
在入口文件中显式添加export type { StepsProps }，提升了类型可用性，符合最佳实践。请确认打包产物中已正确包含该类型声明，且不会影响 tree-shaking。assets/label-placement.less (1)
6-11: 样式命名调整
将原有&-content重命名为&-section并新增相关样式，需确认所有组件渲染时的类名引用已同步更新，避免遗留旧类名导致样式失效。assets/small.less (1)
19-21: 小尺寸样式更新
新增.item-section替代原.item-content并设置margin-top: 0，请验证在小尺寸模式下内容区位置和间距符合设计规范，确保移除 tail 后布局没有异常。assets/vertical.less (1)
14-18: 垂直模式样式调整
在垂直布局下新增&-section以替换旧的&-content，并定义min-height、overflow和display属性，请验证垂直模式下各步骤内容区域的高度和溢出处理符合预期。assets/inline.less (1)
23-23: 类名更改提供了更好的语义结构将
&-content重命名为&-section使得类名更符合 HTML5 语义化标准，这有助于提高代码的可读性和维护性。这种命名方式更清晰地表达了该元素在结构中的作用。tests/semantic.test.tsx (1)
6-76: 测试覆盖了语义结构的所有关键部分这个测试文件很好地验证了步骤组件的语义结构和样式自定义能力。测试检查了所有关键的语义名称（
SemanticName）是否都能正确应用自定义类名和样式，确保了组件结构的一致性和灵活性。建议考虑添加一些边缘情况测试，比如当只提供部分自定义类名或样式时的行为。
src/Rail.tsx (1)
5-10: 接口定义清晰
RailProps接口定义清晰，引用了StepsProps中的classNames和styles，保持了类型一致性。tests/index.test.tsx (6)
7-7: 将 let 改为 const 增强了代码质量将
description变量从let更改为const是一个好的实践，因为该变量不需要被重新赋值，使用const可以防止意外修改。
213-213: 类选择器更新选择器从
.rc-steps-item-container更新为.rc-steps-item-wrapper，这与组件的语义重构保持一致。确保所有相关的测试都已更新这个选择器。
236-236: 类选择器更新与上面相同，选择器已正确更新为使用新的类名
.rc-steps-item-wrapper。
268-268: 类选择器更新与前面相同，选择器已正确更新为使用新的类名
.rc-steps-item-wrapper。
279-279: 类选择器更新与前面相同，选择器已正确更新为使用新的类名
.rc-steps-item-wrapper。
309-346: 新增测试验证渲染属性功能增加了两个新测试
itemRender和itemWrapperRender，验证了组件支持自定义渲染的能力。这些测试确保了自定义元素能够正确包装步骤项，并且原始步骤项结构保持完整。这些测试很好地补充了语义结构的支持，确保了组件在重构后保持了预期的自定义能力。
assets/index.less (1)
129-136: 大面积注释掉原有 mixin 可能导致回归
small、vertical、label-placement等子样式全部被注释掉后，使用这些 size / 布局的场景会直接丢失样式。若确实要整体迁移，也应在注释处留下迁移说明，或在运行时发出警告，避免用户升级后出现“空白”组件。src/Steps.tsx (1)
120-137:statuses计算未考虑current越界与负值当传入
current < initial或current >= initial + items.length时，现有逻辑仍可能把某些步骤标成finish/process，与真实状态不符。建议：
- 对
current做边界裁剪：const safeCurrent = Math.max(initial, Math.min(current, lastIndex));- 计算
stepNumber时使用safeCurrent。这样可避免在异常输入下渲染出误导性的视觉状态。
| .step-item-status(@status) { | ||
| @icon-color: "@{status}-icon-color"; | ||
| @title-color: "@{status}-title-color"; | ||
| @description-color: "@{status}-description-color"; | ||
| @tail-color: "@{status}-tail-color"; | ||
| @icon-color: '@{status}-icon-color'; | ||
| @title-color: '@{status}-title-color'; | ||
| @description-color: '@{status}-description-color'; | ||
| @tail-color: '@{status}-tail-color'; | ||
| &-@{status} &-icon { |
There was a problem hiding this comment.
变量插值语法有误，lessc 将无法解析 @@icon-color 变量
在 Less 中想用字符串构造另一个变量名时，需要使用 ~"@{var}" 才能触发插值。目前：
@icon-color: '@{status}-icon-color';'@{status}-icon-color' 会被当成普通字符串，因此 @@icon-color 指向一个实际不存在的变量名，编译阶段就会报错。
建议改为：
-@icon-color: '@{status}-icon-color';
+@icon-color: ~"@{status}-icon-color";或直接省略中间变量，直接写 @@{status}-icon-color。
🤖 Prompt for AI Agents (early access)
In assets/index.less around lines 106 to 111, the variable interpolation syntax
is incorrect because '@{status}-icon-color' is treated as a plain string,
causing lessc to fail resolving @@icon-color. To fix this, replace the string
with proper interpolation using ~"@{status}-icon-color" so Less can evaluate it
as a variable name, or alternatively, remove the intermediate variable and
directly use @@{status}-icon-color where needed.
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| white-space: nowrap; | ||
| } | ||
| } | ||
| } | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
CSS 选择器缺失导致内容区域无样式
Step.tsx 仍然渲染 className={${itemCls}-content}（见第 160-163 行），但在新的样式中已将 “content” 分离为 “section”，对应的 &-content 选择器在文件中已经全部移除，这会导致描述区丢失原有的字号、颜色等样式。
如需保留描述区，请补回样式或同步修改组件类名。
🤖 Prompt for AI Agents (early access)
In assets/index.less around lines 160 to 166, the CSS selector for the content
area is missing because the original &-content selector was removed while
Step.tsx still uses className={`${itemCls}-content`}. To fix this, either
restore the &-content CSS selector with the appropriate styles for font size,
color, and other properties, or update the component's className to match the
new selector (e.g., change it to use the section class) so the styles apply
correctly.
| const clickable = !!(onClick || onItemClick) && !disabled; | ||
|
|
||
| const accessibilityProps: { | ||
| role?: string; | ||
| tabIndex?: number; | ||
| onClick?: React.MouseEventHandler<HTMLDivElement>; | ||
| onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>; | ||
| } = {}; | ||
|
|
||
| if (clickable) { | ||
| accessibilityProps.role = 'button'; | ||
| accessibilityProps.tabIndex = 0; | ||
| accessibilityProps.onClick = (e) => { | ||
| onClick?.(e); | ||
| onStepClick(stepIndex); | ||
| onItemClick?.(e); | ||
| onClick(index); | ||
| }; | ||
|
|
||
| accessibilityProps.onKeyDown = (e) => { | ||
| const { which } = e; | ||
| if (which === KeyCode.ENTER || which === KeyCode.SPACE) { | ||
| onStepClick(stepIndex); | ||
| onClick(index); | ||
| } | ||
| }; |
There was a problem hiding this comment.
onClick 为空时仍被调用，运行时会抛 TypeError
clickable 只要 data.onClick 存在就可能为 true，但回调中依旧无条件执行 onClick(index)：
onItemClick?.(e);
onClick(index); // <-- 当 props.onClick 未传时为 undefined导致用户只传 item.onClick 而未传 Steps.onChange 时点击直接报错。建议改为：
-onClick(index);
+onClick?.(index);onKeyDown 中同理。
🤖 Prompt for AI Agents (early access)
In src/Step.tsx around lines 90 to 112, the onClick handler calls onClick(index)
without checking if onClick is defined, causing a TypeError when onClick is
undefined. To fix this, add a conditional check before calling onClick(index) in
both the onClick and onKeyDown handlers, ensuring onClick is only called if it
exists.
1 participant
Summary by CodeRabbit
新功能
重构
样式
测试
其他