refactor(steps): v15 #3216
refactor(steps): v15 #3216
Conversation
## Walkthrough
本次更新对步骤条（Steps）组件进行了大规模重构，涵盖了样式（SCSS）、类型定义、组件实现、文档和演示示例。样式部分重写并细化了水平与垂直布局、不同状态与类型（文本、点、图标）的样式变量与结构。类型定义引入了更严格的字符串字面量类型和属性约束。组件实现移除了旧的 `dot` 属性，新增了 `status`、`type`、`layout`、`icon` 等属性，类名生成也更加细致。文档和演示同步更新，展示了更多布局、状态和类型的组合用法，并详细列举了新的属性和主题变量。
## Changes
| 文件/分组 | 变更摘要 |
|-------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| src/packages/step/step.scss<br>src/packages/steps/steps.scss | 步骤条样式重构，细化水平/垂直布局、状态、类型的样式，移除旧的 `.dot`、RTL 等遗留样式，统一命名和结构。 |
| src/packages/step/step.tsx<br>src/packages/step/step.taro.tsx | Step 组件重构，使用 hooks 优化状态、类名、渲染逻辑，支持 type/status/layout 等新属性，移除 dot 相关逻辑。 |
| src/packages/steps/steps.tsx<br>src/packages/steps/steps.taro.tsx | Steps 组件默认属性新增 layout/type/status/icon，类名生成更细致，移除 dot 相关逻辑和类名。 |
| src/types/spec/steps/base.ts | 新增并细化类型别名（如 StepStatus、StepType、StepLayout 等），BaseStep/BaseSteps 接口属性调整，移除 dot，direction 改为字面量类型。 |
| src/packages/steps/__tests__/steps.spec.tsx | 测试用例重构，覆盖更多属性组合和行为，结构更清晰，增加多类型/状态/布局的测试。 |
| src/packages/steps/demo.*.ts(x) <br>src/packages/steps/demos/** | 演示组件重构，支持多种状态、类型、布局的组合，采用数据驱动，增加交互和多组展示，移除旧的 dot 示例。 |
| src/packages/steps/doc*.md | 文档重写，属性表和主题变量全面更新，移除 dot，新增 status/type/layout/icon/onStepClick 等属性，CSS 变量大幅扩展和细化。 |
| src/styles/variables.scss<br>src/styles/variables-jmapp.scss | 步骤条相关 SCSS 变量重组，移除旧变量，新增并细化多种状态、类型、布局的样式变量。 |
## Sequence Diagram(s)
```mermaid
sequenceDiagram
participant User
participant Steps
participant Step
User->>Steps: 传入 props（status, type, layout, icon, count, value, onStepClick 等）
Steps->>Step: 传递 context（type, status, value, icon, onStepClick）
Step->>Step: 计算 currentStatus/useMemo 渲染 head/content
User-->>Step: 点击 Step
Step->>Steps: 触发 onStepClick（带当前 step value）Suggested reviewers
Poem
|
github-actions
bot
added
3.x
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #3216 +/- ##
=============================================
+ Coverage 86.70% 86.84% +0.13%
=============================================
Files 291 291
Lines 19062 19205 +143
Branches 2891 2918 +27
=============================================
+ Hits 16528 16678 +150
+ Misses 2529 2522 -7
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: 14
🧹 Nitpick comments (14)
src/packages/steps/demos/h5/demo8.tsx (2)
5-26: 数据定义中存在描述文本重复和错别字问题数据数组中第二项和第三项的描述文本都是"购买下单"，这可能会使用户混淆。另外，第四项"服务屡约"疑似存在错别字，应该是"服务履约"。
建议修改如下：
{ value: 3, - description: '购买下单', + description: '支付成功', }, { value: 4, - description: '服务屡约', + description: '服务履约', },
69-71: 建议优化用户体验按钮交互良好，但建议考虑添加当前状态指示，让用户知道当前处于哪一步，尤其是当步骤较多时。
- <Button type="primary" size="small" onClick={handleStep}> + <Button type="primary" size="small" onClick={handleStep}> + 下一步 ({val}/5) </Button>src/packages/steps/demos/taro/demo3.tsx (1)
111-113: 考虑添加按钮状态指示按钮实现功能正确，但建议添加当前步骤指示，以提高用户体验。
- <Button size="small" type="danger" onClick={() => handleStep()}> + <Button size="small" type="danger" onClick={() => handleStep()}> + 下一步 ({val}/3) </Button>src/packages/steps/demos/taro/demo9.tsx (1)
83-85: 按钮功能实现良好下一步按钮正确实现了步骤值的循环更新，代码逻辑清晰。建议考虑添加当前步骤指示。
- <Button type="primary" size="small" onClick={handleStep}> + <Button type="primary" size="small" onClick={handleStep}> + 下一步 ({value}/3) </Button>src/packages/steps/demos/taro/demo1.tsx (2)
25-27: 建议优化步骤切换逻辑当前步骤切换逻辑是硬编码的数字4，建议使用
data.length替代，以便更灵活地适应数据变化。- const newVal = (val % 4) + 1 + const newVal = (val % data.length) + 1
30-91: 考虑重构相似代码块在三个Cell中，Steps组件的结构和用法非常相似，只是状态和数据切片不同。可以考虑将这些相似代码块提取为一个函数或组件，减少重复代码。
+ const renderStepsGroup = (dataSlice, useValue = false) => { + const value = useValue ? val : 2; + return ( + <Space direction="vertical"> + <Steps value={value} status="default"> + {dataSlice.map((item, index) => ( + <Step key={index} value={item.value} title={item.title} /> + ))} + </Steps> + <Steps value={value} status="business"> + {dataSlice.map((item, index) => ( + <Step key={index} value={item.value} title={item.title} /> + ))} + </Steps> + <Steps value={value} status="dynamic"> + {dataSlice.map((item, index) => ( + <Step key={index} value={item.value} title={item.title} /> + ))} + </Steps> + {useValue && ( + <Steps value={value} status="enhanced"> + {dataSlice.map((item, index) => ( + <Step key={index} value={item.value} title={item.title} /> + ))} + </Steps> + )} + </Space> + ); + }; return ( <> <Cell> - <Space direction="vertical"> - <Steps value={2} status="default"> - {data.slice(0, 2).map((item, index) => ( - <Step key={index} value={item.value} title={item.title} /> - ))} - </Steps> - <Steps value={2} status="business"> - {data.slice(0, 2).map((item, index) => ( - <Step key={index} value={item.value} title={item.title} /> - ))} - </Steps> - <Steps value={2} status="dynamic"> - {data.slice(0, 2).map((item, index) => ( - <Step key={index} value={item.value} title={item.title} /> - ))} - </Steps> - </Space> + {renderStepsGroup(data.slice(0, 2))} </Cell> <Cell> - <Space direction="vertical"> - <Steps value={2} status="default"> - {data.slice(0, 3).map((item, index) => ( - <Step key={index} value={item.value} title={item.title} /> - ))} - </Steps> - <Steps value={2} status="business"> - {data.slice(0, 3).map((item, index) => ( - <Step key={index} value={item.value} title={item.title} /> - ))} - </Steps> - <Steps value={2} status="dynamic"> - {data.slice(0, 3).map((item, index) => ( - <Step key={index} value={item.value} title={item.title} /> - ))} - </Steps> - </Space> + {renderStepsGroup(data.slice(0, 3))} </Cell> <Cell> - <Space direction="vertical"> - <Steps value={val} status="default"> - {data.map((item, index) => ( - <Step key={index} value={item.value} title={item.title} /> - ))} - </Steps> - <Steps value={val} status="business"> - {data.map((item, index) => ( - <Step key={index} value={item.value} title={item.title} /> - ))} - </Steps> - <Steps value={val} status="dynamic"> - {data.map((item, index) => ( - <Step key={index} value={item.value} title={item.title} /> - ))} - </Steps> - <Steps value={val} status="enhanced"> - {data.map((item, index) => ( - <Step key={index} value={item.value} title={item.title} /> - ))} - </Steps> - </Space> + {renderStepsGroup(data, true)} </Cell>src/packages/steps/steps.tsx (1)
14-14: 未使用的属性
icon属性在默认值中定义，但在当前组件实现中未被直接使用。如果该属性仅用于子组件，建议添加相关注释说明。value: 0, -icon: null, +// icon: 传递给Step子组件使用的图标 +icon: null,src/packages/steps/demos/taro/demo2.tsx (3)
29-32: 建议优化步骤切换逻辑当前步骤切换逻辑是硬编码的数字5，建议使用
data.length替代，以便更灵活地适应数据变化。- const newVal = (val % 5) + 1 + const newVal = (val % data.length) + 1
54-90: 图标类型Steps的多种实现方式此部分展示了两种设置图标的方式：
- 在Steps组件上设置通用图标（56-77行）
- 在每个Step组件上单独设置图标（79-88行）
这两种实现方式都是有效的，但在同一个示例中使用不同方式可能会造成一些混淆。
为保持一致性，建议统一使用一种方式设置图标，或者添加注释说明两种方式的区别和应用场景。
36-109: 考虑重构相似代码块在三个Cell中，Steps组件的结构和用法非常相似，只是类型和数据切片不同。可以考虑将这些相似代码块提取为一个函数或组件，减少重复代码。
+ const renderStepsGroup = ( + type = undefined, + icon = undefined, + stepIcon = false + ) => { + return ( + <Space direction="vertical" style={{ width: '100%' }}> + <Steps + value={2} + status="business" + type={type} + layout="double" + icon={!stepIcon ? icon : undefined} + > + {data.slice(0, 3).map((item, index) => ( + <Step + key={index} + value={item.value} + title={item.title} + icon={stepIcon ? icon : undefined} + /> + ))} + </Steps> + <Steps + value={2} + status="dynamic" + type={type} + layout="double" + icon={!stepIcon ? icon : undefined} + > + {data.slice(0, 4).map((item, index) => ( + <Step + key={index} + value={item.value} + title={item.title} + icon={stepIcon ? icon : undefined} + /> + ))} + </Steps> + <Steps + value={val} + status="enhanced" + type={type} + layout="double" + icon={!stepIcon ? icon : undefined} + > + {data.map((item, index) => ( + <Step + key={index} + value={item.value} + title={item.title} + icon={stepIcon ? icon : undefined} + /> + ))} + </Steps> + </Space> + ) + } return ( <Space direction="vertical"> <Cell> - <Space direction="vertical" style={{ width: '100%' }}> - <Steps value={2} status="business" type="dot" layout="double"> - {data.slice(0, 3).map((item, index) => ( - <Step key={index} value={item.value} title={item.title} /> - ))} - </Steps> - <Steps value={2} status="dynamic" type="dot" layout="double"> - {data.slice(0, 4).map((item, index) => ( - <Step key={index} value={item.value} title={item.title} /> - ))} - </Steps> - <Steps value={val} status="enhanced" type="dot" layout="double"> - {data.map((item, index) => ( - <Step key={index} value={item.value} title={item.title} /> - ))} - </Steps> - </Space> + {renderStepsGroup("dot")} </Cell> <Cell> - <Space direction="vertical" style={{ width: '100%' }}> - <Steps - value={2} - status="business" - type="icon" - layout="double" - icon={<Check />} - > - {data.slice(0, 3).map((item, index) => ( - <Step key={index} value={item.value} title={item.title} /> - ))} - </Steps> - <Steps - value={2} - status="dynamic" - type="icon" - layout="double" - icon={<Check />} - > - {data.slice(0, 4).map((item, index) => ( - <Step key={index} value={item.value} title={item.title} /> - ))} - </Steps> - - <Steps value={val} status="enhanced" type="icon" layout="double"> - {data.map((item, index) => ( - <Step - key={index} - value={item.value} - title={item.title} - icon={<Check />} - /> - ))} - </Steps> - </Space> + {renderStepsGroup("icon", <Check />, true)} </Cell> <Cell> - <Space direction="vertical" style={{ width: '100%' }}> - <Steps value={2} status="business" layout="double"> - {data.slice(0, 3).map((item, index) => ( - <Step key={index} value={item.value} title={item.title} /> - ))} - </Steps> - <Steps value={2} status="dynamic" layout="double"> - {data.slice(0, 4).map((item, index) => ( - <Step key={index} value={item.value} title={item.title} /> - ))} - </Steps> - <Steps value={val} status="enhanced" layout="double"> - {data.map((item, index) => ( - <Step key={index} value={item.value} title={item.title} /> - ))} - </Steps> - </Space> + {renderStepsGroup()} </Cell>src/packages/steps/demos/h5/demo9.tsx (2)
8-9: 建议优化步骤切换逻辑当前步骤切换逻辑是硬编码的数字3，建议使用更灵活的方式，如获取Steps子组件的数量。
- const newVal = (value % 3) + 1 + // 假设存在一个方式获取步骤总数 + const stepsCount = 3 // 理想情况下应动态获取 + const newVal = (value % stepsCount) + 1
26-31: 描述中使用JSX片段的优化方案多处使用JSX片段作为描述，特别是包含时间信息的部分。这种方式虽然有效，但考虑到多处重复使用相似结构，可以提取为一个工具函数或组件以减少重复代码。
+ // 在组件外部或文件顶部定义 + const StepDescription = ({ content, time }) => ( + <> + <p>{content}</p> + {time && <p className="description-time">{time}</p>} + </> + ) // 使用示例 <Step type="icon" value={2} title="待取件" description={ - <> - <p> - 你的订单已由【深圳市福田区福华路京东快递自 - 提点】上架完成，请上门自提 - </p> - <p className="description-time">2025-01-20 07:12:30</p> - </> + <StepDescription + content="你的订单已由【深圳市福田区福华路京东快递自提点】上架完成，请上门自提" + time="2025-01-20 07:12:30" + /> } icon={<WaitReceive />} />Also applies to: 41-43, 56-59, 68-71
src/packages/steps/doc.zh-TW.md (1)
93-99: 文档示例缺少 “dynamic” 与 “enhanced” 说明新增的
status="dynamic" | "enhanced"在 Props 表格中已有列出，但示例与描述部分未给出对应 demo，可能导致使用者不清楚两者区别，建议补充示例代码或文字说明。src/packages/step/step.scss (1)
11-17: 头部样式存在重复定位声明在第12行和第16行都声明了
position: relative;，建议删除其中一个以避免冗余。&-head { position: relative; display: flex; align-items: center; height: $steps-base-head-height; - position: relative; z-index: 1;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (34)
src/packages/step/step.scss(1 hunks)src/packages/step/step.taro.tsx(1 hunks)src/packages/step/step.tsx(2 hunks)src/packages/steps/__tests__/steps.spec.tsx(1 hunks)src/packages/steps/demo.taro.tsx(1 hunks)src/packages/steps/demo.tsx(1 hunks)src/packages/steps/demos/h5/demo1.tsx(1 hunks)src/packages/steps/demos/h5/demo2.tsx(1 hunks)src/packages/steps/demos/h5/demo3.tsx(1 hunks)src/packages/steps/demos/h5/demo4.tsx(2 hunks)src/packages/steps/demos/h5/demo5.tsx(1 hunks)src/packages/steps/demos/h5/demo6.tsx(1 hunks)src/packages/steps/demos/h5/demo7.tsx(1 hunks)src/packages/steps/demos/h5/demo8.tsx(1 hunks)src/packages/steps/demos/h5/demo9.tsx(1 hunks)src/packages/steps/demos/taro/demo1.tsx(1 hunks)src/packages/steps/demos/taro/demo2.tsx(1 hunks)src/packages/steps/demos/taro/demo3.tsx(1 hunks)src/packages/steps/demos/taro/demo4.tsx(2 hunks)src/packages/steps/demos/taro/demo5.tsx(1 hunks)src/packages/steps/demos/taro/demo6.tsx(1 hunks)src/packages/steps/demos/taro/demo7.tsx(1 hunks)src/packages/steps/demos/taro/demo8.tsx(1 hunks)src/packages/steps/demos/taro/demo9.tsx(1 hunks)src/packages/steps/doc.en-US.md(3 hunks)src/packages/steps/doc.md(3 hunks)src/packages/steps/doc.taro.md(3 hunks)src/packages/steps/doc.zh-TW.md(3 hunks)src/packages/steps/steps.scss(1 hunks)src/packages/steps/steps.taro.tsx(2 hunks)src/packages/steps/steps.tsx(2 hunks)src/styles/variables-jmapp.scss(1 hunks)src/styles/variables.scss(2 hunks)src/types/spec/steps/base.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (4)
src/packages/steps/demos/taro/demo4.tsx (2)
src/packages/steps/steps.taro.tsx (1)
Steps(17-58)src/packages/step/step.taro.tsx (1)
Step(20-120)
src/packages/steps/demos/taro/demo6.tsx (2)
src/packages/steps/steps.taro.tsx (1)
Steps(17-58)src/packages/step/step.taro.tsx (1)
Step(20-120)
src/packages/steps/steps.tsx (1)
src/types/spec/steps/h5.ts (1)
WebStepsProps(4-4)
src/packages/step/step.tsx (2)
src/packages/step/step.taro.tsx (1)
Step(20-120)src/types/spec/steps/base.ts (1)
StepStatus(4-4)
🪛 GitHub Check: codecov/patch
src/packages/step/step.tsx
[warning] 89-89: src/packages/step/step.tsx#L89
Added line #L89 was not covered by tests
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (125)
src/styles/variables-jmapp.scss (1)
1302-1305: 变量命名与使用方式符合规范添加的SCSS变量
$steps-base-head-size使用了合适的CSS变量作为值，并使用了!default标记，这符合项目的样式变量定义模式。此变量将用于Steps组件的头部大小设置，是Steps组件重构的一部分。src/packages/steps/demos/h5/demo4.tsx (3)
2-2: 正确引入Cell组件Cell组件的引入符合组件嵌套的结构需求，有助于统一布局展示。
25-31: 使用Cell组件包装Steps结构提升了布局一致性使用Cell组件包装Steps结构是一个很好的改进，使演示更加规范化，与其他演示例子保持一致的布局结构。
33-36: 按钮样式简化与统一按钮直接使用
size="small"属性，移除了多余的包装容器，使代码更简洁清晰。src/packages/steps/demos/taro/demo4.tsx (3)
2-8: 导入结构优化导入结构更有组织性，Cell组件的添加符合新的布局结构要求。
31-37: 使用Cell组件优化结构布局使用Cell组件包装Steps结构，保持了H5和Taro示例的一致性，提升了代码的可维护性。
40-42: 按钮样式简化按钮样式简化，直接使用size属性，移除了冗余的包装容器，与H5示例保持一致。
src/packages/steps/demos/h5/demo6.tsx (2)
2-2: 导入简化，移除不必要的依赖移除了ConfigProvider，简化了导入，只保留了必要的组件。
7-13: 使用新的API重构Steps组件代码更新反映了Steps组件API的重大改变：
- 使用
type="icon"代替了原来的dot属性- 添加了新的
layout="double"和status="enhanced"属性- 第一个Step明确使用
type="dot"- 图标实现简化，直接使用Transit组件
- 更新了步骤标题为更符合业务逻辑的文案
这些变更与整体重构方向一致，更好地展示了组件的新特性。
src/packages/steps/demos/taro/demo6.tsx (2)
2-2: 导入改为更聚焦的组件引用导入更新以包含Cell组件，同时保持了必要的Steps和Step导入，提高了代码的组织性。
7-13: 良好地使用了新的Steps组件API这个演示很好地展示了Steps组件的新特性:
- 使用了
type="icon"替代了旧的dot属性- 添加了
layout="double"和status="enhanced"属性来增强视觉效果- 第一个Step特别指定了
type="dot"，而其他Step使用了图标- 使用Cell组件作为容器，提供了更一致的布局
这些变更符合Steps组件的整体重构方向，展示了更灵活的配置选项。
src/packages/steps/demos/taro/demo8.tsx (5)
1-2: 增强了导入以支持更复杂的交互导入了useState以支持状态管理，同时添加了Button、Space和Cell组件以支持更丰富的布局和交互功能。
5-26: 结构化数据模型优化了Steps的渲染创建了一个包含步骤信息的数据数组，每个步骤包含值和描述，这种方法:
- 提高了代码的可维护性
- 简化了Steps的动态渲染
- 使添加或修改步骤变得更加容易
数据结构清晰，命名规范。
27-31: 添加了状态管理和步骤控制逻辑使用useState管理当前步骤值，并实现了循环增加步骤的处理函数，使演示更具交互性。
34-68: 优雅地展示了三种不同状态类型的Steps使用Space组件创建了并排布局，展示三种不同状态类型的Steps:
status="business"status="dynamic"status="enhanced"这种并排比较方式有效地展示了不同状态的视觉差异，同时所有Steps共享相同的数据和当前值，便于对比。
69-71: 添加了交互控制按钮添加了一个按钮来控制步骤切换，增强了演示的交互性，使用户可以直观地看到不同步骤状态下各种样式的变化。
src/packages/steps/demos/taro/demo5.tsx (4)
1-2: 更新了组件导入以支持新的布局导入了Image、Cell和Space组件，以支持更丰富的布局和内容展示。
4-17: 创建了结构化的数据模型使用数组对象结构定义了步骤数据，包含标题和图标URL，这种方式:
- 使代码更具可维护性
- 简化了步骤的动态渲染
- 清晰地分离了数据和展示逻辑
数据结构清晰，包含城市/地点名称和相应的图标。
21-37: 展示了带居中布局的图标步骤条使用Space和Cell组件创建了垂直布局，第一个Cell通过样式设置了居中对齐，展示了带有自定义图标的Steps，很好地展示了
type="icon"的功能。
38-49: 展示了双层布局的图标步骤条第二个Cell展示了使用
layout="double"属性的Steps，与上面的默认布局形成对比，清晰地演示了不同布局选项的视觉效果。src/packages/steps/demos/h5/demo5.tsx (4)
1-2: 更新了组件导入以支持新的布局导入了Image、Cell和Space组件，以支持更丰富的布局和内容展示，与Taro版本保持一致。
4-17: 创建了结构化的数据模型使用数组对象结构定义了步骤数据，包含标题和图标URL，与Taro版本保持了一致的数据结构和命名。
21-37: 展示了带居中布局的图标步骤条使用Space和Cell组件创建了垂直布局，第一个Cell通过样式设置了居中对齐，展示了带有自定义图标的Steps，与Taro版本保持一致的实现方式。
38-49: 展示了双层布局的图标步骤条第二个Cell展示了使用
layout="double"属性的Steps，与上面的默认布局形成对比，清晰地演示了不同布局选项的视觉效果，与Taro版本保持一致。src/packages/steps/demos/h5/demo8.tsx (1)
36-66: 完善垂直状态步骤条示例这个示例很好地展示了不同状态的垂直步骤条，但可以考虑增加更多交互说明来帮助用户理解各种状态的区别和适用场景。
src/packages/steps/demos/taro/demo3.tsx (3)
27-29: 良好的步骤点击事件处理步骤点击事件处理函数实现正确，能够正确记录用户点击的步骤值。
33-65: 良好的状态对比展示这个部分很好地展示了不同状态（default、business、dynamic）的步骤条样式，并且使用了相同的数据源，便于直观比较差异。
98-107: 交互式增强步骤条实现良好增强状态的步骤条添加了点击事件处理，提供了更好的交互体验。代码实现完善。
src/packages/steps/demo.tsx (2)
16-24: 翻译键名更新更具描述性更新后的翻译键名（如'horizontalTwoLine'、'horizontalIcon'等）比原来的更具描述性，更清晰地表达了每个演示的布局和特点。
51-69: 演示顺序优化合理演示布局顺序的调整很合理，从基础的左右布局到复杂的混合布局，再到自定义和垂直布局，形成了清晰的学习路径。CSS类的简化也使代码更加整洁。
src/packages/steps/demos/h5/demo1.tsx (6)
2-2: 数据驱动结构重构得很好将步骤数据抽象为数组结构，使组件更具可复用性和可维护性。数据与UI分离的模式符合React最佳实践。
Also applies to: 5-22
23-27: 状态管理实现合理使用useState钩子管理步骤状态，并通过取模运算实现步骤循环，实现方式简洁明了。
30-48: 布局结构清晰，展示完整使用Cell和Space组件进行垂直布局，并通过slice方法展示不同数量的步骤，形成了良好的演示层次。展示了status="default"、"business"和"dynamic"的效果，帮助用户直观理解各种状态的视觉差异。
49-67: 不同步骤数量的展示案例通过slice(0, 3)展示了3步骤的情况，与2步骤形成对比，帮助用户了解不同步骤数量的展示效果。这种渐进式的示例结构非常有助于用户理解组件的适用场景。
68-91: 动态步骤展示实现完善将val状态绑定到Steps的value属性，实现了动态步骤变化。同时展示了所有四种status类型，包括新增的"enhanced"状态，全面覆盖了组件的功能特性。
92-94: 交互控件设计合理按钮大小设置为small并使用danger类型，视觉上更加突出，能够清晰地指示用户交互位置。通过简洁的onClick处理函数实现步骤切换。
src/packages/steps/demos/taro/demo7.tsx (5)
1-3: 导入结构清晰完整正确导入了所需组件，包括Steps、Step核心组件和辅助布局组件Cell、Space。同时引入了Location图标组件用于步骤标识，符合Taro项目的引入规范。
6-27: 数据结构设计合理数据对象包含value、title和icon属性，结构完整且统一。每个步骤使用相同的Location图标保持了视觉一致性，是图标类型步骤条的良好实践。
28-32: 状态管理实现简洁使用React useState管理当前步骤，初始值设为2。handleStep函数通过取模运算实现1-4的循环切换，逻辑清晰简洁。
35-78: 组件结构层次分明使用Cell和Space组件构建垂直布局，展示了四种不同配置的Steps：
- 默认状态的2步骤
- 商业状态的3步骤
- 动态状态的全部步骤（绑定val状态）
- 增强状态的全部步骤（绑定val状态）
通过type="icon"属性统一设置图标类型，结构清晰，覆盖了多种使用场景。
80-82: 交互控件位置合理按钮位于Steps组展示区域下方，size="small"和type="danger"属性使其在视觉上更加突出。功能明确，点击后通过handleStep函数更新当前步骤值。
src/packages/steps/demos/h5/demo3.tsx (6)
2-2: 导入结构完整正确导入了所需的组件，包括Steps、Step核心组件和辅助布局组件Space、Cell，符合组件库的使用规范。
5-21: 数据结构设计合理数据对象包含value、title和description属性，结构完整且统一。description属性的加入展示了Steps组件支持详细描述的能力，增强了信息展示的完整性。
22-29: 状态管理和事件处理完善使用React useState钩子管理当前步骤状态，初始值为2。
- handleStep函数实现步骤循环切换
- 新增handleClickStep函数处理步骤点击事件，展示了组件的交互能力
32-65: 第一组Steps展示结构清晰第一个Cell中展示了2步骤的三种状态类型：
- default状态
- business状态
- dynamic状态
通过统一的数据切片方式（slice(0, 2)）保持了结构的一致性，便于用户对比不同状态的视觉效果。
66-109: 第二组Steps展示功能完整第二个Cell中展示了完整步骤的四种状态类型：
- default状态
- business状态
- dynamic状态
- enhanced状态
所有Steps绑定val状态实现动态变化，最后一个Steps添加了onStepClick事件处理，展示了组件的交互能力。结构层次清晰，功能展示完整。
111-113: 交互控件设计合理按钮位置独立于内容区域，使用size="small"和type="danger"属性使其在视觉上更加突出。功能明确，点击后通过handleStep函数更新当前步骤值。
src/packages/steps/demos/h5/demo7.tsx (5)
1-3: 导入结构清晰完整正确导入了所需组件，包括Steps、Step核心组件和辅助布局组件Cell、Space。同时引入了Location图标组件用于步骤标识，符合H5项目的引入规范。
6-27: 数据结构设计合理数据对象包含value、title和icon属性，结构完整且统一。每个步骤使用相同的Location图标保持了视觉一致性，是图标类型步骤条的良好实践。地点名称的选择很好地匹配了Location图标的语义。
28-32: 状态管理实现简洁使用React useState钩子管理当前步骤，初始值设为2。handleStep函数通过(val % 4) + 1的计算方式实现1-4的循环切换，逻辑清晰简洁。
35-78: 组件结构层次分明使用Cell和Space组件构建垂直布局，展示了四种不同配置的Steps：
- 默认状态的2步骤
- 商业状态的3步骤
- 动态状态的全部步骤（绑定val状态）
- 增强状态的全部步骤（绑定val状态）
通过type="icon"属性统一设置图标类型，多种status属性展示了不同的视觉效果，结构清晰，覆盖了多种使用场景。
80-82: 交互控件位置合理按钮位于Steps组展示区域下方，size="small"和type="danger"属性使其在视觉上更加突出。功能明确，点击后通过handleStep函数更新当前步骤值，实现了动态演示效果。
src/packages/steps/demos/taro/demo1.tsx (5)
5-22: 数据结构定义清晰且完整数据结构设计合理，每个步骤包含了值和标题，为组件提供了良好的数据支持。
30-48: 组件结构清晰，展示了多种状态使用Cell和Space进行布局结构清晰，展示了Steps组件的多种状态变化（default、business、dynamic），代码组织良好。
49-67: 展示了不同步骤数量的应用场景此部分展示了3步流程的多种状态，继续保持了良好的代码组织结构。
68-91: 完整展示了所有状态类型此部分完整展示了所有4个步骤和全部状态类型，包括额外的"enhanced"状态，结构完善。
92-94: 按钮样式和功能合理按钮样式和功能设计合理，提供了良好的交互体验。
src/packages/steps/steps.tsx (3)
7-15: 默认属性定义完善新增了
layout、type、status和icon的默认值，使组件配置更加灵活和完整。默认值选择合理，符合组件使用场景。
21-32: 属性解构顺序合理属性解构的顺序经过重新调整，包含了新增的属性，使得代码结构更加清晰。
38-50: 类名生成逻辑优化类名生成逻辑得到了显著扩展，现在动态包含了基于方向、子元素数量、布局、类型和状态的修饰符，替代了之前仅有的单个条件类。这种改进支持了更详细的样式变体，增强了组件的灵活性。
src/packages/steps/demos/taro/demo2.tsx (3)
6-27: 数据结构定义清晰数据结构设计合理，每个步骤包含了值和标题，为组件提供了良好的数据支持，步骤数量适当增加到5个。
34-53: 展示了不同类型和布局的Steps组件此部分展示了带有点状标记(dot)和双列布局(double)的Steps组件，展示了多种状态(business, dynamic, enhanced)，结构清晰。
91-109: 未指定类型的Steps组件展示此部分展示了未指定类型（默认为text类型）的Steps组件，与前面的示例形成对比，有助于用户理解不同类型的视觉效果差异。
src/packages/steps/demos/h5/demo9.tsx (3)
1-10: 状态管理和交互逻辑清晰使用
useState跟踪当前步骤值，并通过handleStep函数在步骤之间循环切换，交互逻辑清晰。
13-48: 垂直布局Steps的丰富展示使用垂直布局展示不同类型的步骤，结合丰富的图标和复杂的描述内容，很好地展示了组件的灵活性。
使用了适当的类型组合，包括dot和icon类型，并有动态状态。
49-82: 不同状态的Steps展示展示了enhanced状态的Steps，并使用了丰富的图标和描述，呈现了良好的视觉层次结构。
时间信息的展示使用了专门的类名，有助于统一样式。src/packages/steps/demos/h5/demo2.tsx (6)
6-27: 数据结构清晰且易于扩展数据数组的结构设计得当，每个步骤包含 value 和 title 属性，便于动态渲染不同数量的步骤。这种数据驱动的方式使组件更加灵活，适应性更强。
28-32: 状态管理实现良好使用 useState 来管理当前步骤值，并通过 handleStep 函数实现步骤的循环切换，逻辑清晰。
34-53: 组件布局结构清晰使用 Space 和 Cell 组件嵌套创建了良好的布局结构，同时展示了 business/dynamic/enhanced 三种不同状态下的 dot 类型步骤条，代码组织有序。
54-90: 图标类型示例实现完整此代码段展示了带图标的步骤条，同时演示了两种不同的图标传递方式：全局传递图标和单独为每个步骤设置图标。这对于用户理解图标使用方式非常有帮助。
91-109: 默认类型示例清晰展示了默认文本类型的步骤条在不同状态下的表现，保持了与前两个示例的一致性和完整性，使整个演示更加系统。
111-113: 交互控制按钮设计合理添加了类型为 danger 的小型按钮用于控制步骤切换，并清晰地标明了"下一步"功能，增强了演示的交互性。
src/packages/steps/steps.taro.tsx (3)
8-14: 默认属性配置合理为组件添加了新的默认属性（layout, type, status, icon），并移除了旧的 dot 属性，使API更加清晰和一致。默认值设置合理，符合常见使用场景。
22-32: 属性解构得当属性解构顺序调整合理，新增加的属性（count, layout, status, type）位置适当，保持了代码的可读性。
42-47: 类名生成逻辑优化类名生成逻辑得到了增强，动态包含基于方向、子元素数量、布局、类型和状态的修饰符，替换了之前的静态 dot 类。这样的设计提供了更细粒度的样式控制能力。
src/packages/steps/steps.scss (5)
6-56: 水平布局基础样式结构完善水平布局样式结构清晰，包含了头部、图标、标题等元素的样式定义，并针对不同流程状态（process、wait、finish）设置了对应的样式变量。样式嵌套合理，便于维护。
58-99: 单行布局样式设计合理单行布局（single）样式定义完整，包括内边距、线条位置和特殊情况处理。针对不同数量的步骤（如三步）提供了特殊处理，增强了布局的灵活性。
101-179: 双行布局样式实现全面双行布局（double）样式实现全面，使用了 flex 布局实现步骤间的均匀分布，并对头部、线条、图标等元素进行了精细调整。同时针对不同类型（icon、dot、text）提供了对应的高度调整，确保视觉一致性。
182-311: 垂直布局样式结构完善垂直布局样式设计全面，包括内边距、线条、头部等元素的样式定义。针对不同类型（icon、dot、text）提供了对应的宽度和线条位置调整，保证了垂直方向的视觉协调性。
313-333: 增强状态样式定义明确增强状态（enhanced）下的样式定义清晰，针对已完成步骤提供了特殊的背景色和图标颜色定义，增强了视觉区分度。
src/packages/steps/demo.taro.tsx (5)
19-28: 翻译键名优化中文翻译键名更新为更具描述性的命名，如"横版左右布局1行文案"、"横版上下布局点状、icon、文案"等，使键名更直观地反映了组件的实际展示效果。
30-39: 繁体中文翻译同步更新繁体中文翻译也相应进行了更新，保持了与简体中文的一致性，确保多语言支持的完整性。
41-50: 英文翻译更新得当英文翻译也进行了相应更新，内容清晰表达了各个演示的特点，如"Horizontal 1-line text layout"、"Horizontal dot, icon, text layout"等。
55-69: 演示布局结构优化ScrollView 的类名简化了，并根据环境添加条件类名。演示的顺序和分组更加合理，使用户更容易理解各种布局方式的区别。
77-81: 垂直布局演示组织合理垂直布局的演示部分组织合理，清晰区分了普通垂直点状和混合点状+图标的两种情况。
src/packages/steps/__tests__/steps.spec.tsx (1)
151-170:vi.fn()在 Jest 环境下不可用，请显式区分测试框架当前仓库既引入了
@testing-library/jest-dom又使用vi.fn()。如果测试框架切换为 Jest，vi不存在将导致用例崩溃。建议：- const handleClickStep = vi.fn() + // 兼容 vitest / jest + const handleClickStep = (typeof vi !== 'undefined' ? vi.fn() : jest.fn())或者在文件顶部统一按框架导入/声明。
src/types/spec/steps/base.ts (3)
4-9: 类型定义完善，提高类型安全性引入了多个类型别名来约束步骤条相关属性的值范围，这有助于提高代码的类型安全性和开发效率。使用字符串字面量类型代替泛型字符串类型是一个很好的实践。
15-15: 为BaseStep增加了必要的type属性将type属性添加到BaseStep接口中，与组件重构方向一致，使类型定义更加完整。
19-25: BaseSteps接口属性扩展合理用新的强类型属性替换了旧的dot布尔属性，增加了status、count、type、layout、icon等属性，使组件更加灵活和可定制。这些变更与整体重构方向一致，提供了更丰富的配置选项。
src/packages/step/step.tsx (9)
1-6: 引入React hooks优化组件性能引入useMemo和useCallback钩子函数可以避免不必要的重新计算和函数重建，优化了组件性能。
10-10: 更新导入以使用严格类型定义从类型定义文件中导入StepStatus类型，增强了代码的类型安全性。
23-35: 属性解构和默认值设置更加清晰使用对象解构和默认值合并的方式处理组件属性，代码结构清晰易读。将type作为第一个解构的属性也体现了它在新API中的重要性。
38-44: 从上下文获取父组件属性正确使用了Context API获取父组件传递的数据，简化了组件间通信。
46-52: 使用useMemo优化状态计算逻辑通过useMemo缓存状态计算结果，避免不必要的重复计算。状态逻辑清晰，考虑了特殊状态和默认状态处理。
54-56: 使用useCallback优化事件处理函数通过useCallback缓存点击事件处理函数，只有当依赖项变化时才会重新创建，提高了性能。
60-73: 类名生成逻辑优化使用useMemo缓存类名计算结果，根据当前状态、类型和是否有描述动态生成类名，实现了更精细的样式控制。
93-105: 内容渲染逻辑模块化将内容渲染逻辑提取为独立的useMemo函数，只有在有标题或描述时才渲染内容，避免了不必要的DOM节点创建。
108-118: 渲染结构优化使用缓存的类名和渲染函数构建组件DOM结构，代码结构清晰。点击事件绑定正确，样式类名命名规范。
src/packages/step/step.scss (13)
1-9: 布局结构优化使用relative定位和flex布局优化了步骤条的结构，并正确处理了最后一个步骤的线条隐藏逻辑。
19-35: 头部文本和图标样式规范化为文本和图标元素设置了一致的尺寸、背景色和文字颜色，使用了变量提高了可定制性。图标样式设置合理，使用白色作为默认文字颜色。
37-41: 点状头部样式优化为点状头部设置了合适的尺寸和背景色，使用变量便于主题定制。
43-52: 统一头部元素样式将点状、图标和文本头部的共同样式提取出来，统一设置为flex布局并居中对齐，添加了圆角和边框样式。这种做法减少了代码重复，提高了维护性。
55-67: 线条样式重构将线条改为绝对定位的flex容器，增加了inner元素用于实际显示线条，提高了布局的灵活性和可控性。
70-76: 主体内容布局优化简化了主体内容的样式，使用flex布局和最小高度确保了内容的一致性和灵活性。
78-82: 设置背景色提高可读性为线条、标题和描述设置白色背景，确保它们在不同背景下都有良好的可读性。
84-96: 标题样式规范化为标题设置了固定高度、行高和字体大小，添加了溢出处理逻辑，确保长文本能够正确显示。
98-105: 描述样式规范化为描述文本设置了高度、行高、边距和字体样式，添加了溢出处理，确保长文本能够正确显示。
107-118: 进行中状态样式优化为进行中状态的头部元素设置了特定的背景色和文字颜色，样式结构清晰。
120-127: 等待状态样式优化为等待状态的图标设置了特定的颜色，保持了样式的一致性。
129-136: 完成状态样式优化为完成状态的图标设置了特定的颜色，保持了样式的一致性。
138-166: 业务状态样式完善为业务状态添加了全面的样式覆盖，包括文本颜色、标题颜色、描述颜色和头部样式等，使业务状态有明显的视觉差异。
src/packages/steps/doc.md (7)
13-43: 示例分类更加明确将示例代码按照布局方式和内容类型重新组织，命名更加清晰，帮助用户更好地理解和使用组件。示例引用文件也相应更新。
45-59: 补充混合布局示例添加了横向上下布局混合使用点状和图标的示例，以及自定义图标的示例，展示了组件的灵活性。
61-67: 自定义步骤条示例添加了自定义步骤条的示例，展示了组件的高度可定制性。
69-83: 竖向布局示例完善新增了竖向点状和竖向混合两种布局示例，使文档更加完整。
93-98: 属性文档更新，反映API变更移除了已废弃的dot属性，新增了status、count、type、layout和icon属性的说明，使文档与代码实现保持一致。
106-110: Step组件属性文档更新更新了title和description属性的类型为ReactNode，增加了type属性的说明，使文档与代码实现保持一致。
120-169: 主题变量文档全面更新大幅扩展了CSS变量列表，详细说明了各种状态、布局和元素的样式变量，方便用户进行主题定制。变量命名规范，描述清晰。
src/packages/steps/doc.en-US.md (4)
89-98: Props 部分更新正确
Steps组件属性已从current重命名为value，并新增了status、count、type、layout、icon、onStepClick等字段，文档已同步更新。
104-111: Step 子组件 Props 正确
Step子组件的title与description类型已升级为ReactNode，并引入了统一的type，文档同步。
118-170: Theming 部分完整
CSS 变量列表已全面覆盖所有新的样式变量，名称、默认值与更新后的 SCSS 对应一致。
13-81:✅ Verification successful
检查 Demo 引用一致性
请确认所有 Demo 标题和<CodeBlock src='h5/demoX.tsx'>路径与实际文件结构一致，确保 h5 目录下存在对应的 demo 文件。
🏁 Script executed:
#!/bin/bash # 验证所有 demo 源文件路径是否存在 for file in demo{1,3,7,2,6,5,4,8,9}.tsx; do if [ ! -f src/packages/steps/demos/h5/$file ]; then echo "Missing demo file: src/packages/steps/demos/h5/$file" fi doneLength of output: 872
验证通过：Demo 文件引用一致
已在src/packages/steps/demos/h5目录下确认存在 demo1.tsx、demo3.tsx、demo7.tsx、demo2.tsx、demo6.tsx、demo5.tsx、demo4.tsx、demo8.tsx、demo9.tsx，与文档中<CodeBlock src='h5/demoX.tsx'>的引用保持一致，无需修改。src/packages/steps/doc.taro.md (3)
89-98: Props 部分更新正确
Steps组件属性与 EN 版保持一致，文档已同步，Taro 和 H5 行为一致。
104-111: Step 子组件 Props 正确
与 EN 版一致，类型与默认值描述齐全。
118-170: Theming 部分完整
CSS 变量列表与 EN 版保持一致，已覆盖所有主题定制。
| /> | ||
| <Step | ||
| type="icon" | ||
| value={2} | ||
| title="待取件" | ||
| description={ | ||
| <> | ||
| <p> | ||
| 你的订单已由【深圳市福田区福华路京东快递自 | ||
| 提点】上架完成，请上门自提 | ||
| </p> | ||
| <p className="description-time">2025-01-20 07:12:30</p> | ||
| </> | ||
| } | ||
| icon={<WaitReceive />} | ||
| /> | ||
| <Step | ||
| type="icon" | ||
| value={3} | ||
| title="运输中" | ||
| description={ | ||
| <> | ||
| <p>订单在【淮安分拣中心】完成分拣</p> | ||
| <p className="description-time">2025-01-20 07:12:30</p> | ||
| </> | ||
| } | ||
| icon={<PickedUp />} | ||
| /> | ||
| </Steps> | ||
| </Cell> | ||
| <Cell> | ||
| <Steps direction="vertical" value={value} type="icon" status="enhanced"> | ||
| <Step | ||
| type="icon" | ||
| value={3} | ||
| title="待安装 工程师已接单" | ||
| description={ | ||
| <> | ||
| <p>已分配工程师 XXX 为您服务，联系电话 15112786087</p> | ||
| <p className="description-time">2025-01-20 07:12:30</p> | ||
| </> | ||
| } | ||
| icon={<Service />} | ||
| /> | ||
| <Step | ||
| type="icon" | ||
| value={2} | ||
| title="已签收" | ||
| description={ | ||
| <> | ||
| <p>京东快递 · 您的订单派送完成，已由家人签收</p> | ||
| <p className="description-time">2025-01-20 07:12:30</p> | ||
| </> | ||
| } | ||
| icon={<Check />} | ||
| /> | ||
| <Step | ||
| type="dot" | ||
| value={1} | ||
| title="京东总部大厦B座" | ||
| description="京小东 136 **** 8618" | ||
| /> |
There was a problem hiding this comment.
步骤值顺序与状态更新逻辑不一致
在第二个Steps组件中，步骤值按3、2、1的顺序定义，但状态更新逻辑是按1、2、3循环。这可能导致用户点击"下一步"时，状态变化与展示顺序不一致，造成混淆。
建议保持一致的步骤值顺序，修改第二个Steps组件的顺序，或者调整状态更新逻辑：
<Steps direction="vertical" value={value} type="icon" status="enhanced">
<Step
type="icon"
- value={3}
+ value={1}
title="待安装 工程师已接单"
description={
<>
<p>已分配工程师 XXX 为您服务，联系电话 15112786087</p>
<p className="description-time">2025-01-20 07:12:30</p>
</>
}
icon={<Service />}
/>
<Step
type="icon"
- value={2}
+ value={2}
title="已签收"
description={
<>
<p>京东快递 · 您的订单派送完成，已由家人签收</p>
<p className="description-time">2025-01-20 07:12:30</p>
</>
}
icon={<Check />}
/>
<Step
type="dot"
- value={1}
+ value={3}
title="京东总部大厦B座"
description="京小东 136 **** 8618"
/>
</Steps>📝 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.
| /> | |
| <Step | |
| type="icon" | |
| value={2} | |
| title="待取件" | |
| description={ | |
| <> | |
| <p> | |
| 你的订单已由【深圳市福田区福华路京东快递自 | |
| 提点】上架完成，请上门自提 | |
| </p> | |
| <p className="description-time">2025-01-20 07:12:30</p> | |
| </> | |
| } | |
| icon={<WaitReceive />} | |
| /> | |
| <Step | |
| type="icon" | |
| value={3} | |
| title="运输中" | |
| description={ | |
| <> | |
| <p>订单在【淮安分拣中心】完成分拣</p> | |
| <p className="description-time">2025-01-20 07:12:30</p> | |
| </> | |
| } | |
| icon={<PickedUp />} | |
| /> | |
| </Steps> | |
| </Cell> | |
| <Cell> | |
| <Steps direction="vertical" value={value} type="icon" status="enhanced"> | |
| <Step | |
| type="icon" | |
| value={3} | |
| title="待安装 工程师已接单" | |
| description={ | |
| <> | |
| <p>已分配工程师 XXX 为您服务，联系电话 15112786087</p> | |
| <p className="description-time">2025-01-20 07:12:30</p> | |
| </> | |
| } | |
| icon={<Service />} | |
| /> | |
| <Step | |
| type="icon" | |
| value={2} | |
| title="已签收" | |
| description={ | |
| <> | |
| <p>京东快递 · 您的订单派送完成，已由家人签收</p> | |
| <p className="description-time">2025-01-20 07:12:30</p> | |
| </> | |
| } | |
| icon={<Check />} | |
| /> | |
| <Step | |
| type="dot" | |
| value={1} | |
| title="京东总部大厦B座" | |
| description="京小东 136 **** 8618" | |
| /> | |
| <Cell> | |
| <Steps direction="vertical" value={value} type="icon" status="enhanced"> | |
| <Step | |
| type="icon" | |
| value={1} | |
| title="待安装 工程师已接单" | |
| description={ | |
| <> | |
| <p>已分配工程师 XXX 为您服务，联系电话 15112786087</p> | |
| <p className="description-time">2025-01-20 07:12:30</p> | |
| </> | |
| } | |
| icon={<Service />} | |
| /> | |
| <Step | |
| type="icon" | |
| value={2} | |
| title="已签收" | |
| description={ | |
| <> | |
| <p>京东快递 · 您的订单派送完成，已由家人签收</p> | |
| <p className="description-time">2025-01-20 07:12:30</p> | |
| </> | |
| } | |
| icon={<Check />} | |
| /> | |
| <Step | |
| type="dot" | |
| value={3} | |
| title="京东总部大厦B座" | |
| description="京小东 136 **** 8618" | |
| /> | |
| </Steps> | |
| </Cell> |
| <View className="h2">{translated.customIcon}</View> | ||
| <Demo7 /> | ||
| <Demo5 /> | ||
|
|
||
| <View className="h2">{translated.customIcon}</View> | ||
| <Demo4 /> |
There was a problem hiding this comment.
发现重复的标题
在第71行和第74行都使用了相同的翻译键 customIcon，导致页面上会出现两个相同的标题但展示不同的 Demo 组件（Demo5 和 Demo4）。这会让用户感到困惑。
建议修改第74行的翻译键，使用一个新的唯一键名：
-<View className="h2">{translated.customIcon}</View>
+<View className="h2">{translated.horizontalDouble}</View>同时，确保在翻译对象中有对应的键值对。
📝 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.
| <View className="h2">{translated.customIcon}</View> | |
| <Demo7 /> | |
| <Demo5 /> | |
| <View className="h2">{translated.customIcon}</View> | |
| <Demo4 /> | |
| <View className="h2">{translated.customIcon}</View> | |
| <Demo5 /> | |
| <View className="h2">{translated.horizontalDouble}</View> | |
| <Demo4 /> |
| // 头部渲染 | ||
| const renderHeadType = useMemo(() => { | ||
| switch (type || parentType) { | ||
| case 'text': | ||
| return <View className={`${classPrefix}-head-text`}>{value}</View> | ||
| case 'dot': | ||
| return <View className={`${classPrefix}-head-dot`} /> | ||
| case 'icon': | ||
| return ( | ||
| <View className={`${classPrefix}-head-icon`}> | ||
| {icon || parentIcon} | ||
| </View> | ||
| ) | ||
| default: | ||
| return null | ||
| } | ||
| if (!dot && !icon) { | ||
| return `${classPrefix}-icon is-text` | ||
| } | ||
| return `${classPrefix}-icon` | ||
| } | ||
| }, [type, value, icon]) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
renderHeadType 依赖不完整，父级变更无法反映
该 useMemo 只依赖 type | value | icon，但实际渲染还用到了 parentType 与 parentIcon。当父组件动态修改这两个属性时，子组件无法及时更新，出现“旧头像”或“旧类型”的问题。
- }, [type, value, icon])
+ }, [type, parentType, value, icon, parentIcon])📝 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.
| // 头部渲染 | |
| const renderHeadType = useMemo(() => { | |
| switch (type || parentType) { | |
| case 'text': | |
| return <View className={`${classPrefix}-head-text`}>{value}</View> | |
| case 'dot': | |
| return <View className={`${classPrefix}-head-dot`} /> | |
| case 'icon': | |
| return ( | |
| <View className={`${classPrefix}-head-icon`}> | |
| {icon || parentIcon} | |
| </View> | |
| ) | |
| default: | |
| return null | |
| } | |
| if (!dot && !icon) { | |
| return `${classPrefix}-icon is-text` | |
| } | |
| return `${classPrefix}-icon` | |
| } | |
| }, [type, value, icon]) | |
| // 头部渲染 | |
| const renderHeadType = useMemo(() => { | |
| switch (type || parentType) { | |
| case 'text': | |
| return <View className={`${classPrefix}-head-text`}>{value}</View> | |
| case 'dot': | |
| return <View className={`${classPrefix}-head-dot`} /> | |
| case 'icon': | |
| return ( | |
| <View className={`${classPrefix}-head-icon`}> | |
| {icon || parentIcon} | |
| </View> | |
| ) | |
| default: | |
| return null | |
| } | |
| }, [type, parentType, value, icon, parentIcon]) |
| $steps-process-head-border-color: var( | ||
| --nutui-steps-base-head-border-color, | ||
| $color-border | ||
| ) !default; | ||
| $steps-process-head-border-color: var( | ||
| --nutui-steps-base-head-border-color, | ||
| $color-border | ||
| ) !default; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
移除重复：Process 边框颜色
$steps-process-head-border-color 重复定义了两次，建议删除冗余的第二处，保持一处声明。
- $steps-process-head-border-color: var(
- --nutui-steps-base-head-border-color,
- $color-border
- ) !default;📝 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.
| $steps-process-head-border-color: var( | |
| --nutui-steps-base-head-border-color, | |
| $color-border | |
| ) !default; | |
| $steps-process-head-border-color: var( | |
| --nutui-steps-base-head-border-color, | |
| $color-border | |
| ) !default; | |
| $steps-process-head-border-color: var( | |
| --nutui-steps-base-head-border-color, | |
| $color-border | |
| ) !default; |
| $steps-base-head-size: var( | ||
| --nutui-steps-base-icon-size, | ||
| $font-size-xxs | ||
| ) !default; |
There was a problem hiding this comment.
修复变量名：基础头部尺寸
使用了错误的 CSS 变量 --nutui-steps-base-icon-size，应为 --nutui-steps-base-head-size。
-$steps-base-head-size: var(
- --nutui-steps-base-icon-size,
- $font-size-xxs
-) !default;
+$steps-base-head-size: var(
+ --nutui-steps-base-head-size,
+ $font-size-xxs
+) !default;📝 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.
| $steps-base-head-size: var( | |
| --nutui-steps-base-icon-size, | |
| $font-size-xxs | |
| ) !default; | |
| $steps-base-head-size: var( | |
| --nutui-steps-base-head-size, | |
| $font-size-xxs | |
| ) !default; |
| $steps-vertical-head-icon-size: var( | ||
| --nutui-steps-vertical-item-icon-size, | ||
| 20px | ||
| ) !default; |
There was a problem hiding this comment.
修复变量名：垂直布局图标尺寸
引用了错误的 --nutui-steps-vertical-item-icon-size，文档应使用 --nutui-steps-vertical-head-icon-size。
-$steps-vertical-head-icon-size: var(
- --nutui-steps-vertical-item-icon-size,
- 20px
-) !default;
+$steps-vertical-head-icon-size: var(
+ --nutui-steps-vertical-head-icon-size,
+ 20px
+) !default;📝 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.
| $steps-vertical-head-icon-size: var( | |
| --nutui-steps-vertical-item-icon-size, | |
| 20px | |
| ) !default; | |
| $steps-vertical-head-icon-size: var( | |
| --nutui-steps-vertical-head-icon-size, | |
| 20px | |
| ) !default; |
| $steps-base-description-margin-top: var( | ||
| --nutui-steps-base-title-margin-bottom, | ||
| 10px | ||
| 2px | ||
| ) !default; |
There was a problem hiding this comment.
修复变量名：描述上边距
当前引用 --nutui-steps-base-title-margin-bottom 不正确，应为 --nutui-steps-base-description-margin-top。
-$steps-base-description-margin-top: var(
- --nutui-steps-base-title-margin-bottom,
- 2px
-) !default;
+$steps-base-description-margin-top: var(
+ --nutui-steps-base-description-margin-top,
+ 2px
+) !default;
There was a problem hiding this comment.
Actionable comments posted: 4
♻️ Duplicate comments (4)
src/packages/step/step.taro.tsx (1)
66-82: 🛠️ Refactor suggestion头部渲染逻辑依赖数组不完整
虽然逻辑本身是良好的，但依赖数组仍然缺少
parentType和parentIcon，当父组件这些属性变化时，组件不会重新渲染。- }, [type, value, icon]) + }, [type, parentType, value, icon, parentIcon, classPrefix])src/packages/step/step.tsx (3)
46-52: 🛠️ Refactor suggestion当前状态计算逻辑优化，但依赖数组不完整
使用
useMemo优化状态计算，但缺少对status的依赖，可能导致当父组件状态更改时未重新计算。- }, [value, parentValue]) + }, [value, parentValue, status])
60-72: 🛠️ Refactor suggestion使用
useMemo计算className，但依赖数组不完整虽然使用
useMemo优化了类名计算，但依赖数组缺少description，可能导致描述文本变化时未重新计算类名。- [currentStatus, type, className] + [currentStatus, type, description, className, classPrefix]
75-91: 🛠️ Refactor suggestion头部渲染逻辑优化，但测试覆盖不完整
使用
useMemo优化了头部渲染，但依赖数组不完整，且默认分支（第89行）缺少测试覆盖。建议：
- 完善依赖数组
- 添加测试用例覆盖默认分支
- }, [type, value, icon]) + }, [type, parentType, value, icon, parentIcon, classPrefix])🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 89-89: src/packages/step/step.tsx#L89
Added line #L89 was not covered by tests
🧹 Nitpick comments (9)
src/packages/step/step.scss (9)
11-16: 移除重复的定位声明
&-head中在行 13 已声明position: relative，第 16 行又重复声明一次，建议删去多余那行，以减少冗余。
19-24: 统一文本头部尺寸与样式
.nut-step-head-text通过变量定义了高度、宽度、背景色、文字色和字体大小，风格一致。可考虑为这些值增加主题覆盖变量，以便在多种主题下灵活调整。
27-34: 图标头部样式可扩展性
.nut-step-head-icon使用基础尺寸和默认背景，内部.nut-icon强制白色。若将来需要图标反色，建议允许通过外部类或变量覆盖.nut-icon color。
43-52: 复用头部元素公共样式
将&-dot, &-icon, &-text的弹性居中、圆角、边框等属性抽取到一处，提升了样式复用性。建议将border-radius: 50%提取为变量以增强主题可配置性。
62-66: 连线内层伸展与背景
&-inner使用flex: 1、固定高度和背景色变量，有效撑满父容器。建议补充width: 100%以防父容器未定义宽度时出现水平收缩。
89-94: 标题文本溢出处理
通过固定高度、overflow:hidden与white-space:nowrap避免溢出，但未加省略号提示。建议补充text-overflow: ellipsis;以改善用户体验。
97-103: 描述文本溢出与多行支持
.nut-step-description限高并隐藏溢出，符合文本长度可控场景；若需多行省略，可考虑使用-webkit-line-clamp等方案提升灵活性。
119-124: 等待状态配色是否完整
.nut-step-wait仅修改了图标颜色，若需要同样对.nut-step-head-text或.nut-step-head-dot等元素做灰度或等待提示，应同步处理。
137-163: 业务模式样式可精简
.nut-step-business针对文本、标题、描述、点、图标等均做了单独配置，建议将共用背景色$steps-business-head-background-color上提到根级.nut-step-business，减少重复并提升可读性：&.nut-step-business { + background-color: $steps-business-head-background-color; .nut-step-head-icon, .nut-step-head-text { - background-color: $steps-business-head-background-color; } // ... }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
src/packages/step/step.scss(1 hunks)src/packages/step/step.taro.tsx(1 hunks)src/packages/step/step.tsx(2 hunks)src/packages/steps/demos/h5/demo3.tsx(1 hunks)src/packages/steps/demos/taro/demo3.tsx(1 hunks)src/packages/steps/steps.scss(1 hunks)src/packages/steps/steps.taro.tsx(2 hunks)src/packages/steps/steps.tsx(2 hunks)src/types/spec/steps/base.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- src/packages/steps/demos/taro/demo3.tsx
- src/packages/steps/steps.scss
- src/types/spec/steps/base.ts
- src/packages/steps/demos/h5/demo3.tsx
🧰 Additional context used
🧬 Code Graph Analysis (4)
src/packages/steps/steps.tsx (1)
src/packages/steps/steps.taro.tsx (1)
Steps(17-67)
src/packages/steps/steps.taro.tsx (2)
src/types/spec/steps/taro.ts (1)
TaroStepsProps(4-4)src/packages/steps/steps.tsx (1)
Steps(17-67)
src/packages/step/step.taro.tsx (3)
src/types/spec/steps/taro.ts (1)
TaroStepProps(3-3)src/packages/step/step.tsx (1)
Step(20-120)src/types/spec/steps/base.ts (1)
StepStatus(4-4)
src/packages/step/step.tsx (2)
src/packages/step/step.taro.tsx (1)
Step(20-111)src/types/spec/steps/base.ts (1)
StepStatus(4-4)
🪛 GitHub Check: codecov/patch
src/packages/steps/steps.tsx
[warning] 62-62: src/packages/steps/steps.tsx#L62
Added line #L62 was not covered by tests
src/packages/step/step.tsx
[warning] 89-89: src/packages/step/step.tsx#L89
Added line #L89 was not covered by tests
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (26)
src/packages/steps/steps.tsx (3)
10-14: 新增了更丰富的默认配置属性添加了更多默认属性配置，包括
layout、type、status和icon，丰富了组件的可配置性。
22-30: 更新了属性解构，支持了更多的配置项属性解构顺序更符合逻辑，将
value属性放在新增的布局属性之前。
41-46: 增强了className生成逻辑新增了基于子元素数量、布局类型、显示类型和状态的动态类名生成，使样式更加灵活和可定制。
src/packages/steps/steps.taro.tsx (4)
10-14: 新增了更丰富的默认配置属性添加了更多默认属性配置，包括
layout、type、status和icon，与Web版本保持一致，确保了跨平台一致性。
22-30: 更新了属性解构，支持了更多的配置项与Web版本保持一致的属性解构顺序，确保了代码的一致性和可维护性。
41-46: 增强了className生成逻辑新增了基于子元素数量、布局类型、显示类型和状态的动态类名生成，与Web版本保持一致的类名生成逻辑。
53-63: 优化了子组件渲染逻辑使用
React.Children.map迭代子组件，并为最后一个子组件添加特殊类名，与Web版本实现一致的子组件处理机制。src/packages/step/step.taro.tsx (6)
1-6: 优化导入结构，增加React Hooks支持更新了导入结构，增加了对React Hooks的支持，包括
useCallback、useMemo等，提高了组件性能。
11-11: 更新了类型定义引用从使用通用类型转换为使用Taro专用类型
TaroStepProps，改善了类型安全性。
22-26: 优化了属性解构解构了更多属性，提高了代码可读性和结构性。
37-43: 当前状态计算逻辑优化使用
useMemo优化状态计算，考虑父组件的status值，判断逻辑更加完整。注意：虽然将
status添加到依赖数组是好的改进，但在parentStatus变化时依然应该重新计算状态。
51-64: 使用useMemo计算className，但依赖数组较为完整添加了
description和classPrefix到依赖数组，这是对先前审查意见的良好修复。
98-109: 更新了JSX结构和样式引用优化了组件结构，使用了计算好的类名和内容渲染函数，提高了代码的可读性和性能。
src/packages/step/step.tsx (5)
1-6: 优化导入结构，增加React Hooks支持更新了导入结构，增加了对React Hooks的支持，包括
useCallback、useMemo等，提高了组件性能。
10-10: 更新了类型定义引用从基本类型引用扩展为引入
StepStatus和WebStepProps类型，改善了类型安全性。
23-35: 优化了属性解构与组合清晰地解构了更多属性，提高了代码可读性和结构性。
38-44: 父组件属性解构更明确解构出父组件中的相关属性，使用描述性变量名，提高了代码的可读性。
109-116: 更新了JSX结构和样式引用优化了组件结构，使用了计算好的类名和内容渲染函数，提高了代码的可读性和性能。
src/packages/step/step.scss (8)
2-3: 父容器定位与弹性布局
在.nut-step根选择器中添加了position: relative和display: flex，使其既可作为定位容器又可进行子元素的弹性布局。
5-8: 隐藏最后一步的连接线
在&-last .nut-step-line上应用display: none，能有效移除末尾的横线，使 UI 更加符合预期。
37-40: 点样式配置正确
.nut-step-head-dot通过变量控制尺寸和背景色，与其他头部变体保持一致。
55-60: 连线容器布局
&-line设置为绝对定位并通过 flex 居中内容，搭配 z-index 0 实现层级分离。结构清晰，符合预期。
71-76: 主内容区最小高度
&-main指定min-height: $steps-base-head-height，确保内容区至少与头部一样高，提升视觉一致性。
83-86: 标题层级控制
第一处&-title为标题添加了position: relative和z-index: 1，保证其在连线之上渲染，逻辑正确。
106-116: 当前步骤状态样式优先级
&.nut-step-process分别设置了 head 图标、文本、点的背景色及文本色，风格统一。请确认该状态类样式在基础样式之后引入，以避免被通用规则覆盖。
128-133: 完成状态样式正确
.nut-step-finish下仅变更图标颜色，其它元素继承基础样式即可满足需求，保持简洁。
| {React.Children.map(children, (child, index) => { | ||
| if (React.isValidElement(child)) { | ||
| return React.cloneElement(child, { | ||
| // @ts-ignore | ||
| className: classNames(child.props.className, { | ||
| 'nut-step-last': index === React.Children.count(children) - 1, | ||
| }), | ||
| }) | ||
| } | ||
| return child | ||
| })} |
There was a problem hiding this comment.
💡 Verification agent
❓ Verification inconclusive
优化了子组件渲染逻辑
使用React.Children.map迭代子组件，并为最后一个子组件添加特殊类名以支持差异化样式。
注意：第62行的代码路径缺少测试覆盖，建议添加非有效React元素作为子组件的测试用例。
🏁 Script executed:
#!/bin/bash
# 检查是否有测试用例覆盖非有效React元素作为子组件的情况
rg -A 5 -B 5 "非React元素|非有效元素|not a valid React element|invalid child" --type=tsx src/packages/steps/__tests__/Length of output: 140
🏁 Script executed:
#!/bin/bash
# 使用 glob 模式查找测试文件中是否验证了非有效 React 元素子组件的情况
rg -A5 -B5 "React.isValidElement" src/packages/steps/__tests__ -g "*.test.tsx" -g "*.spec.tsx" -g "*.test.ts" -g "*.spec.ts"Length of output: 124
请补充非 React 元素子组件的测试覆盖
我们在 src/packages/steps/__tests__ 目录中未发现针对以下场景的用例，建议新增对应测试，确保组件对“无效”子元素的鲁棒性：
- 传入字符串、数字、
null、undefined等非 React 元素时，组件应正常渲染且不抛出异常 - 验证
React.cloneElement仅对有效元素生效，其它类型原样返回
定位：
- 测试目录：
src/packages/steps/__tests__/ - 建议新增文件：
steps.invalid-child.test.tsx或在现有测试中添加用例
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 62-62: src/packages/steps/steps.tsx#L62
Added line #L62 was not covered by tests
src/packages/step/step.taro.tsx
Outdated
| // 内容渲染 | ||
| const renderContent = useMemo(() => { | ||
| if (!title && !description) return null | ||
|
|
||
| return ( | ||
| <div className={`${classPrefix}-main`}> | ||
| {title && <span className={`${classPrefix}-title`}>{title}</span>} | ||
| {description && ( | ||
| <span className={`${classPrefix}-description`}>{description}</span> | ||
| )} | ||
| </div> | ||
| ) | ||
| }, [title, description]) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
内容渲染逻辑优化
使用useMemo优化内容渲染，避免不必要的重新渲染。
注意：依赖数组中应添加classPrefix以确保当类名前缀变化时重新计算。
- }, [title, description])
+ }, [title, description, classPrefix])📝 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.
| // 内容渲染 | |
| const renderContent = useMemo(() => { | |
| if (!title && !description) return null | |
| return ( | |
| <div className={`${classPrefix}-main`}> | |
| {title && <span className={`${classPrefix}-title`}>{title}</span>} | |
| {description && ( | |
| <span className={`${classPrefix}-description`}>{description}</span> | |
| )} | |
| </div> | |
| ) | |
| }, [title, description]) | |
| // 内容渲染 | |
| const renderContent = useMemo(() => { | |
| if (!title && !description) return null | |
| return ( | |
| <div className={`${classPrefix}-main`}> | |
| {title && <span className={`${classPrefix}-title`}>{title}</span>} | |
| {description && ( | |
| <span className={`${classPrefix}-description`}>{description}</span> | |
| )} | |
| </div> | |
| ) | |
| }, [title, description, classPrefix]) |
| // 内容渲染 | ||
| const renderContent = useMemo(() => { | ||
| if (!title && !description) return null | ||
|
|
||
| return ( | ||
| <div className={`${classPrefix}-main`}> | ||
| {title && <span className={`${classPrefix}-title`}>{title}</span>} | ||
| {description && ( | ||
| <span className={`${classPrefix}-description`}>{description}</span> | ||
| )} | ||
| </div> | ||
| ) | ||
| }, [title, description]) |
There was a problem hiding this comment.
🛠️ Refactor suggestion
内容渲染逻辑优化
使用useMemo优化内容渲染，避免不必要的重新渲染。
注意：依赖数组中应添加classPrefix以确保当类名前缀变化时重新计算。
- }, [title, description])
+ }, [title, description, classPrefix])📝 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.
| // 内容渲染 | |
| const renderContent = useMemo(() => { | |
| if (!title && !description) return null | |
| return ( | |
| <div className={`${classPrefix}-main`}> | |
| {title && <span className={`${classPrefix}-title`}>{title}</span>} | |
| {description && ( | |
| <span className={`${classPrefix}-description`}>{description}</span> | |
| )} | |
| </div> | |
| ) | |
| }, [title, description]) | |
| // 内容渲染 | |
| const renderContent = useMemo(() => { | |
| if (!title && !description) return null | |
| return ( | |
| <div className={`${classPrefix}-main`}> | |
| {title && <span className={`${classPrefix}-title`}>{title}</span>} | |
| {description && ( | |
| <span className={`${classPrefix}-description`}>{description}</span> | |
| )} | |
| </div> | |
| ) | |
| }, [title, description, classPrefix]) |
| &-line, | ||
| &-title { | ||
| background-color: #ffffff; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
避免背景色硬编码
在 &-line, &-title 中直接写死 #ffffff，建议用主题或变量替代，以便后续亮暗主题或品牌色切换。
There was a problem hiding this comment.
Actionable comments posted: 9
🧹 Nitpick comments (1)
src/styles/variables-jrkf.scss (1)
1509-1524: 建议：将 business 相关颜色抽象为变量或主题令牌
$steps-business-*系列变量直接使用了硬编码的#994d00和#fff4e8，若项目后续需统一品牌色或深色模式下切换，建议改用已有$color-warning系列或新增主题令牌进行引用，以提高维护性。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/config.json(2 hunks)src/styles/variables-jmapp.scss(1 hunks)src/styles/variables-jrkf.scss(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- src/config.json
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: test
- GitHub Check: build
🔇 Additional comments (19)
src/styles/variables-jmapp.scss (10)
1302-1312: 基础样式变量定义无误
这些变量声明与 CSS 自定义属性命名一致，提供了步骤条组件的基础背景、头部高度、背景色、边框和文字大小。
1375-1399: process 和 wait 状态变量声明良好
process和wait相关的背景、文字和图标颜色变量均与命名预期一致。
1400-1403: finish 状态图标颜色变量合理
$steps-finish-icon-color与--nutui-steps-finish-icon-color保持一致，默认值符合设计规范。
1404-1419: business 状态相关变量定义无误
business状态下标题、描述、圆点、图标与背景色变量命名及默认值合理。
1428-1443: enhanced finish 状态变量声明良好
$steps-enhanced-finish-head-*系列 SCSS 变量与对应 CSS 变量命名及默认值对齐。
1444-1451: 横向布局间距变量合理
$steps-horizontal-item-padding-right和--nutui-steps-horizontal-item-padding-right对应正确。
1452-1459: 特殊横向间距变量定义符合预期
$steps-horizontal-item-special-*-padding-right变量系列声明清晰。
1460-1467: 垂直布局项目底部间距正确
$steps-vertical-item-padding-bottom命名与默认值合理。
1468-1475: 垂直布局标题相关变量无误
$steps-vertical-title-font-size和--nutui-steps-vertical-title-margin-bottom对应正确。
1476-1495: 垂直布局描述及时间样式变量合理
描述字体大小、间距及时间样式变量声明一致。src/styles/variables-jrkf.scss (9)
1407-1417: 批准：Steps 基础布局参数
这部分定义了 Steps 组件的整体背景及基础头部尺寸、背景色、边框和字体大小，符合设计预期并与其他组件保持一致。
1422-1431: 批准：Steps 基础头部颜色与点样式
基础头部文字和点的默认颜色、大小以及禁用态背景色定义合理。保持了对设计系统的兼容。
1443-1455: 批准：Steps 基础连线及标题样式
base-line、base-title等变量定义清晰，连线高度、背景、标题字体大小和颜色均合理，对应不同布局无冲突。
1460-1471: 批准：Steps 基础描述与边框颜色
描述文本大小、颜色以及头部默认边框色定义准确，保持了视觉一致性。
1480-1488: 批准：Steps 进行中（process）状态配色
process-head-background-color、文字与图标颜色配合主品牌色，符合设计语言，建议继续沿用。
1489-1504: 批准：Steps 等待（wait）状态配色
等待状态图标、标题和描述色定义清晰，使用辅助色加强状态区分度。
1505-1508: 批准：Steps 完成（finish）状态图标色
$steps-finish-icon-color默认使用辅助文本色，符合完成态视觉反馈。
1533-1548: 批准：Steps 加强完成（enhanced finish）状态样式
背景、点、图标和文本颜色均已精细化，满足增强完成态的可视化需求。
1549-1596: 批准：Steps 各布局间距和尺寸
横向和纵向的 item padding、行间距、特殊状态间距等均按照设计稿设置，逻辑清晰且易于维护。
| $steps-base-head-border-color: var( | ||
| --nutui-steps-base-head-border-color, | ||
| $color-border | ||
| ) !default; | ||
| $steps-process-head-border-color: var( | ||
| --nutui-steps-base-head-border-color, | ||
| $color-border | ||
| ) !default; | ||
| $steps-process-head-border-color: var( | ||
| --nutui-steps-base-head-border-color, | ||
| $color-border | ||
| ) !default; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
移除重复声明并修正 process 边框变量
$steps-process-head-border-color 出现两次且引用的是 --nutui-steps-base-head-border-color，应删除冗余声明，并新增 --nutui-steps-process-head-border-color 以覆盖默认边框色。
| $steps-base-description-margin-top: var( | ||
| --nutui-steps-base-title-margin-bottom, | ||
| 0 | ||
| 2px | ||
| ) !default; | ||
| $steps-base-description-font-size: var( | ||
| --nutui-steps-base-description-font-size, | ||
| $font-size-s | ||
| $font-size-xxs | ||
| ) !default; | ||
| $steps-base-description-color: var( | ||
| --nutui-steps-base-description-color, | ||
| $color-text | ||
| $color-text-help | ||
| ) !default; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
修复描述间距变量的 CSS 属性名
$steps-base-description-margin-top 使用了 --nutui-steps-base-title-margin-bottom，建议新增或使用 --nutui-steps-base-description-margin-top，保持意图和命名一致。
| --nutui-steps-base-head-icon-size-right, | ||
| 20px | ||
| ) !default; | ||
| $steps-vertical-head-icon-size: var( | ||
| --nutui-steps-vertical-item-icon-size, | ||
| 20px | ||
| ) !default; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
调整垂直模式图标尺寸变量名称
$steps-vertical-head-icon-size 对应的 CSS 变量 --nutui-steps-vertical-item-icon-size 与变量名不匹配，建议改为 --nutui-steps-vertical-head-icon-size。
| $steps-base-head-size: var( | ||
| --nutui-steps-base-icon-size, | ||
| $font-size-xxs | ||
| ) !default; | ||
| $steps-base-head-color: var( | ||
| --nutui-steps-base-head-color, | ||
| $color-text | ||
| ) !default; | ||
| $steps-base-head-dot-size: var(--nutui-steps-base-head-dot-size, 6px) !default; | ||
| $steps-base-head-dot-background-color: var( | ||
| --nutui-steps-base-head-dot-background-color, | ||
| $color-text-disabled | ||
| ) !default; | ||
| $steps-base-head-icon-size: var( | ||
| --nutui-steps-base-head-icon-size, | ||
| 16px | ||
| ) !default; | ||
| $steps-double-head-icon-size: var( |
There was a problem hiding this comment.
🛠️ Refactor suggestion
修正变量命名不一致问题
$steps-base-head-size 使用了 --nutui-steps-base-icon-size，应与 SCSS 变量名 steps-base-head-size 对应，比如 --nutui-steps-base-head-size；
同样 $steps-double-head-icon-size 应使用 --nutui-steps-double-head-icon-size 而非 --nutui-steps-base-head-icon-size-right。
| $steps-base-description-margin-top: var( | ||
| --nutui-steps-base-title-margin-bottom, | ||
| 0 | ||
| 2px | ||
| ) !default; |
There was a problem hiding this comment.
关键问题：$steps-base-description-margin-top 引用的 CSS 变量名错误
当前使用 --nutui-steps-base-title-margin-bottom，但应对应描述文本与标题的间距，应为 --nutui-steps-base-description-margin-top。
请修复为：
- $steps-base-description-margin-top: var(--nutui-steps-base-title-margin-bottom, 2px) !default;
+ $steps-base-description-margin-top: var(--nutui-steps-base-description-margin-top, 2px) !default;Committable suggestion skipped: line range outside the PR's diff.
| $steps-process-head-border-color: var( | ||
| --nutui-steps-base-head-border-color, | ||
| $color-border | ||
| ) !default; | ||
| $steps-process-head-border-color: var( | ||
| --nutui-steps-base-head-border-color, | ||
| $color-border | ||
| ) !default; |
There was a problem hiding this comment.
关键问题：重复定义并引用错误的 CSS 变量
$steps-process-head-border-color 被定义两次，且引用的 CSS 变量同为 --nutui-steps-base-head-border-color，应分别引用 --nutui-steps-process-head-border-color 并保留一条定义。
建议合并并修复引用：
- $steps-process-head-border-color: var(--nutui-steps-base-head-border-color, $color-border) !default;
- $steps-process-head-border-color: var(--nutui-steps-base-head-border-color, $color-border) !default;
+ $steps-process-head-border-color: var(--nutui-steps-process-head-border-color, $color-border) !default;Committable suggestion skipped: line range outside the PR's diff.
| $steps-base-head-size: var( | ||
| --nutui-steps-base-icon-size, | ||
| $font-size-xxs | ||
| ) !default; |
There was a problem hiding this comment.
关键问题：$steps-base-head-size 引用的 CSS 变量名错误
当前写法使用了 var(--nutui-steps-base-icon-size, $font-size-xxs)，但应该引用 --nutui-steps-base-head-size。
请应用以下修复：
- $steps-base-head-size: var(--nutui-steps-base-icon-size, $font-size-xxs) !default;
+ $steps-base-head-size: var(--nutui-steps-base-head-size, $font-size-xxs) !default;Committable suggestion skipped: line range outside the PR's diff.
| $steps-double-head-icon-size: var( | ||
| --nutui-steps-base-head-icon-size-right, | ||
| 20px | ||
| ) !default; |
There was a problem hiding this comment.
关键问题：$steps-double-head-icon-size 引用的 CSS 变量名不一致
SCSS 变量名为 double-head-icon-size，但引用的 CSS 变量 --nutui-steps-base-head-icon-size-right 与其命名不匹配，应为 --nutui-steps-double-head-icon-size。
建议修复：
- $steps-double-head-icon-size: var(--nutui-steps-base-head-icon-size-right, 20px) !default;
+ $steps-double-head-icon-size: var(--nutui-steps-double-head-icon-size, 20px) !default;📝 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.
| $steps-double-head-icon-size: var( | |
| --nutui-steps-base-head-icon-size-right, | |
| 20px | |
| ) !default; | |
| $steps-double-head-icon-size: var( | |
| --nutui-steps-double-head-icon-size, | |
| 20px | |
| ) !default; |
| $steps-vertical-head-icon-size: var( | ||
| --nutui-steps-vertical-item-icon-size, | ||
| 20px | ||
| ) !default; |
There was a problem hiding this comment.
关键问题：$steps-vertical-head-icon-size CSS 变量名与 SCSS 变量不匹配
引用了 --nutui-steps-vertical-item-icon-size，但 SCSS 变量名为 vertical-head-icon-size，应统一为 --nutui-steps-vertical-head-icon-size。
建议修复：
- $steps-vertical-head-icon-size: var(--nutui-steps-vertical-item-icon-size, 20px) !default;
+ $steps-vertical-head-icon-size: var(--nutui-steps-vertical-head-icon-size, 20px) !default;Committable suggestion skipped: line range outside the PR's diff.
src/styles/variables.scss
Outdated
| $color-primary-stop-2 | ||
| $steps-business-title-color: var( | ||
| --nutui-steps-business-title-color, | ||
| #994d00 |
There was a problem hiding this comment.
这个可以使用 theme-default 里的golden 颜色~
src/styles/variables.scss
Outdated
| $color-text | ||
| $steps-business-head-background-color: var( | ||
| --nutui-steps-business-head-background-color, | ||
| #fff4e8 |
There was a problem hiding this comment.
这个值 目前 theme-default 中没有对应的值，需要跟设计对一下，是不是和定义的规范有出入~
There was a problem hiding this comment.
暴露的变量太多了，可以靠拢规范，比如 dot 、 title 可以用一个，根据step的StepStatus 来区分就可以了？
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (12)
src/packages/steps/demos/taro/demo9.tsx (1)
58-89: 步骤值顺序与状态更新逻辑不一致在第二个Steps组件中，步骤值按3、2、1的顺序定义，但状态更新逻辑是按1、2、3循环。这可能导致用户点击"下一步"时，状态变化与展示顺序不一致，造成混淆。
建议保持一致的步骤值顺序，修改第二个Steps组件的顺序，或者调整状态更新逻辑：
<Steps direction="vertical" value={value} type="icon" status="enhanced"> <Step type="icon" - value={3} + value={1} title="待安装 工程师已接单" description={ <> <p>已分配工程师 XXX 为您服务，联系电话 136 **** 8618</p> <p style={timeCustomStyle}>2025-01-20 07:12:30</p> </> } icon={<Service />} /> <Step type="icon" - value={2} + value={2} title="已签收" description={ <> <p>京东快递 · 您的订单派送完成，已由家人签收</p> <p style={timeCustomStyle}>2025-01-20 07:12:30</p> </> } icon={<Check />} /> <Step type="dot" - value={1} + value={3} title="京东总部大厦B座" description="京小东 136 **** 8618" /> </Steps>src/packages/steps/doc.taro.md (1)
17-81:⚠️ Potential issueTaro 文档中 Demo 路径应指向 Taro 示例目录
当前所有<CodeBlock src='h5/demoX.tsx'>均应更新为taro/demoX.tsx，以引用 Taro 专用示例，保持与实际文件结构一致。例如：- <CodeBlock src='h5/demo1.tsx'></CodeBlock> + <CodeBlock src='taro/demo1.tsx'></CodeBlock>src/styles/variables-jmapp.scss (5)
1335-1338: 🛠️ Refactor suggestion
⚠️ Potential issue修正垂直模式头部图标尺寸变量
$steps-vertical-head-icon-size应引用--nutui-steps-vertical-head-icon-size而非--nutui-steps-vertical-item-icon-size。- $steps-vertical-head-icon-size: var(--nutui-steps-vertical-item-icon-size, 20px) !default; + $steps-vertical-head-icon-size: var(--nutui-steps-vertical-head-icon-size, 20px) !default;
1314-1317: 🛠️ Refactor suggestion
⚠️ Potential issue修正
steps-base-head-size对应的 CSS 变量名
当前引用--nutui-steps-base-icon-size与变量名不匹配，应使用--nutui-steps-base-head-size。- $steps-base-head-size: var(--nutui-steps-base-icon-size, $font-size-xxs) !default; + $steps-base-head-size: var(--nutui-steps-base-head-size, $font-size-xxs) !default;
1352-1355: 🛠️ Refactor suggestion
⚠️ Potential issue修正描述文字上边距变量名
$steps-base-description-margin-top引用了--nutui-steps-base-title-margin-bottom，应使用--nutui-steps-base-description-margin-top。- $steps-base-description-margin-top: var(--nutui-steps-base-title-margin-bottom, 2px) !default; + $steps-base-description-margin-top: var(--nutui-steps-base-description-margin-top, 2px) !default;
1327-1334: 🛠️ Refactor suggestion
⚠️ Potential issue修正双行标题图标尺寸变量
$steps-double-head-icon-size引用了--nutui-steps-base-head-icon-size-right，应替换为新变量--nutui-steps-double-head-icon-size。- $steps-double-head-icon-size: var(--nutui-steps-base-head-icon-size-right, 20px) !default; + $steps-double-head-icon-size: var(--nutui-steps-double-head-icon-size, 20px) !default;
1368-1375: 🛠️ Refactor suggestion
⚠️ Potential issue移除重复声明并修正处理状态边框变量
$steps-process-head-border-color出现两次且引用了--nutui-steps-base-head-border-color，需保留一次并使用专用 CSS 变量--nutui-steps-process-head-border-color。- $steps-process-head-border-color: var(--nutui-steps-base-head-border-color, $color-border) !default; - $steps-process-head-border-color: var(--nutui-steps-base-head-border-color, $color-border) !default; + $steps-process-head-border-color: var(--nutui-steps-process-head-border-color, $color-border) !default;src/styles/variables.scss (5)
1213-1216: 修复变量名：基础头部尺寸当前
$steps-base-head-size引用了错误的 CSS 变量--nutui-steps-base-icon-size，应使用--nutui-steps-base-head-size，保持与变量命名一致。-$steps-base-head-size: var( - --nutui-steps-base-icon-size, - $font-size-xxs -) !default; +$steps-base-head-size: var( + --nutui-steps-base-head-size, + $font-size-xxs +) !default;
1230-1233: 修复变量名：双行图标尺寸
$steps-double-head-icon-size正在引用--nutui-steps-base-head-icon-size-right，应改为--nutui-steps-double-head-icon-size。-$steps-double-head-icon-size: var( - --nutui-steps-base-head-icon-size-right, - 20px -) !default; +$steps-double-head-icon-size: var( + --nutui-steps-double-head-icon-size, + 20px +) !default;
1234-1237: 修复变量名：垂直布局图标尺寸
$steps-vertical-head-icon-size正在引用--nutui-steps-vertical-item-icon-size，建议使用--nutui-steps-vertical-head-icon-size。-$steps-vertical-head-icon-size: var( - --nutui-steps-vertical-item-icon-size, - 20px -) !default; +$steps-vertical-head-icon-size: var( + --nutui-steps-vertical-head-icon-size, + 20px +) !default;
1251-1254: 修复变量名：描述上边距
$steps-base-description-margin-top引用了错误的 CSS 变量--nutui-steps-base-title-margin-bottom，应使用--nutui-steps-base-description-margin-top。-$steps-base-description-margin-top: var( - --nutui-steps-base-title-margin-bottom, - 2px -) !default; +$steps-base-description-margin-top: var( + --nutui-steps-base-description-margin-top, + 2px +) !default;
1271-1274: 移除重复定义：流程头部边框颜色出现了两处
$steps-process-head-border-color重复定义，应删除多余的一处。- $steps-process-head-border-color: var( - --nutui-steps-base-head-border-color, - $color-border - ) !default;
🧹 Nitpick comments (2)
src/packages/steps/demos/taro/demo9.tsx (2)
12-17: 建议使用常量管理样式对象对于会重复使用的样式对象，建议提取为组件顶层的常量，而不是在渲染函数内部创建。这样可以避免在每次渲染时重新创建对象，提高性能。
+const TIME_CUSTOM_STYLE = { + marginTop: pxTransform(2), + color: '#808080', + fontSize: pxTransform(12), + lineHeight: pxTransform(18), +}; const Demo9 = () => { const [value, setValue] = useState(2) const handleStep = () => { const newVal = (value % 3) + 1 setValue(newVal) } - const timeCustomStyle = { - marginTop: pxTransform(2), - color: '#808080', - fontSize: pxTransform(12), - lineHeight: pxTransform(18), - }
91-93: 建议添加空间间隔组件按钮与上方Cell组件之间没有间距，在视觉上可能显得拥挤。建议使用Space组件添加适当间距：
+ <Space style={{ margin: '12px 0' }}> <Button type="primary" size="small" onClick={handleStep}> 下一步 </Button> + </Space>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
src/packages/steps/demos/h5/demo9.tsx(1 hunks)src/packages/steps/demos/taro/demo9.tsx(1 hunks)src/packages/steps/doc.en-US.md(3 hunks)src/packages/steps/doc.md(3 hunks)src/packages/steps/doc.taro.md(3 hunks)src/packages/steps/doc.zh-TW.md(3 hunks)src/packages/steps/steps.scss(1 hunks)src/styles/variables-jmapp.scss(1 hunks)src/styles/variables-jrkf.scss(1 hunks)src/styles/variables.scss(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/packages/steps/demos/h5/demo9.tsx
- src/styles/variables-jrkf.scss
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/packages/steps/demos/taro/demo9.tsx (2)
src/packages/steps/steps.taro.tsx (1)
Steps(17-67)src/packages/step/step.taro.tsx (1)
Step(20-111)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (19)
src/packages/steps/demos/taro/demo9.tsx (1)
22-55: 代码结构良好，组件示例清晰展示了垂直步骤条的动态状态第一个步骤条示例展示了混合使用点状和图标类型的步骤，并正确实现了动态状态切换。时间戳格式统一，描述内容丰富，对于展示组件的使用方式非常有效。
src/packages/steps/steps.scss (3)
6-180: 横向布局样式结构完善，对不同显示类型的支持全面横向步骤条的样式结构层次清晰，覆盖了单行和双行两种布局类型，以及点状、图标、文本三种显示方式。特别是对不同状态（进行中、等待、完成）的样式处理恰当，使用CSS变量保证了样式的一致性和可定制性。
对于图标尺寸的处理考虑到了不同场景下的视觉平衡，增强了组件的视觉体验。
183-310: 纵向布局样式结构优化，兼容性处理完善纵向步骤条样式结构清晰，特别是对Harmony环境的特殊处理和对不同类型步骤头部的精细调整值得肯定。步骤项间距、线条位置计算准确，确保了视觉效果的一致性。
标题和描述文本的样式处理也很合理，尤其是对多行文本的支持使组件更加灵活。
312-332: 增强状态样式设计出色，视觉层次分明为enhanced状态设计的特殊样式处理很出色，通过背景色和图标色的差异化，让用户能够直观区分不同的完成状态。这种设计既保持了视觉一致性，又提供了足够的状态区分度。
src/packages/steps/doc.zh-TW.md (4)
13-83: 文档示例组织结构清晰，分类详细文档中的示例部分按照横版和竖向两大类，并进一步细分为不同布局和类型的组合，这种组织结构非常有助于用户理解组件的多样性和适用场景。示例标题描述准确，便于用户快速找到所需的实现方式。
93-98: API文档更新全面，新增属性说明清晰Steps组件新增的status、count、type、layout、icon和onStepClick属性描述准确，类型定义明确，有助于用户正确使用这些新特性。特别是status和type属性的可选值列举完整，便于用户理解各种状态和类型的区别。
106-110: Step子组件属性类型更新合理将title和description属性从string类型更新为ReactNode，大大增强了步骤内容的灵活性，允许用户插入更丰富的内容。新增type属性也使子步骤能够独立定制显示方式，增强了组件的可配置性。
120-167: 主题变量全面丰富，支持细粒度样式定制CSS变量系统非常完善，涵盖了步骤条的各种视觉元素和状态。特别是对不同状态（进行中、等待、完成、业务、增强完成）的颜色定制变量很全面，支持用户根据品牌需求进行细致的样式调整。
布局相关的变量（如内边距、行高等）也定义得很详细，使得组件在不同场景下都能保持良好的视觉效果。
src/packages/steps/doc.md (4)
13-83: 文档示例结构清晰，分类详细文档的示例部分按照横版和竖向两大类，并进一步细分为不同布局和类型的组合，这种结构清晰的组织方式非常有助于用户理解组件的多样性和适用场景。每个示例标题描述准确，便于用户快速找到所需的实现方式。
93-98: API文档更新全面，新增属性说明清晰Steps组件新增的status、count、type、layout、icon和onStepClick属性描述准确，类型定义明确，有助于用户正确使用这些新特性。特别是status和type属性的可选值列举完整，便于用户理解各种状态和类型的区别。
106-110: Step子组件属性类型更新合理将title和description属性从string类型更新为ReactNode，大大增强了步骤内容的灵活性，允许用户插入更丰富的内容。新增type属性也使子步骤能够独立定制显示方式，增强了组件的可配置性。
120-167: 主题变量全面丰富，支持细粒度样式定制CSS变量系统非常完善，涵盖了步骤条的各种视觉元素和状态。特别是对不同状态（进行中、等待、完成、业务、增强完成）的颜色定制变量很全面，支持用户根据品牌需求进行细致的样式调整。
布局相关的变量（如内边距、行高等）也定义得很详细，使得组件在不同场景下都能保持良好的视觉效果。
src/packages/steps/doc.en-US.md (4)
13-83: 检查示例演示部分更新
Demo 标题和对应的 CodeBlock 引用已更新为新的布局、文本行数和图标用法，且 src 路径指向h5/demoX.tsx。请确认src/packages/steps/demos/h5/目录下存在相应的示例文件，以避免示例渲染异常。
91-98: 验证 Props 表格更新
已移除current属性并新增value、status、count、type、layout、icon、onStepClick，表格格式与描述一致。
106-111: 验证 Step 子组件 Props
title、description类型变更为ReactNode，新增type属性；表格格式无误。
120-168: 核对主题定制区域
新列表覆盖了所有步骤状态、类型和布局下的 CSS 变量，名称与组件实现保持一致。src/packages/steps/doc.taro.md (3)
91-98: 校验 Props 表格更新
dot属性已移除，新增status、count、type、layout、icon、onStepClick，内容准确。
106-111: 校验 Step Props 表格更新
title、description类型修改为ReactNode，新增type属性；表格条目齐全。
120-168: 核对主题定制 CSS 变量
Taro 文档 CSS 变量段落与英文版保持一致，涵盖新设计 Token，命名格式正确。
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
src/packages/steps/demos/taro/demo9.tsx (1)
60-89: 步骤值顺序与状态更新逻辑不一致在第二个Steps组件中，步骤值按3、2、1的顺序定义，但状态更新逻辑是按1、2、3循环。这可能导致用户点击"下一步"时，状态变化与展示顺序不一致，造成混淆。
建议保持一致的步骤值顺序，修改第二个Steps组件的顺序，或者调整状态更新逻辑：
<Steps direction="vertical" value={value} type="icon" status="enhanced"> <Step type="icon" - value={3} + value={1} title="待安装 工程师已接单" description={ <> <View>已分配工程师 XXX 为您服务，联系电话 136 **** 8618</View> <View style={timeCustomStyle}>2025-01-20 07:12:30</View> </> } icon={<Service />} /> <Step type="icon" - value={2} + value={2} title="已签收" description={ <> <View>京东快递 · 您的订单派送完成，已由家人签收</View> <View style={timeCustomStyle}>2025-01-20 07:12:30</View> </> } icon={<Check />} /> <Step type="dot" - value={1} + value={3} title="京东总部大厦B座" description="京小东 136 **** 8618" /> </Steps>
🧹 Nitpick comments (2)
src/packages/steps/demos/taro/demo9.tsx (1)
13-18: 建议将样式抽离到独立的样式文件中当前的
timeCustomStyle对象直接在组件内定义，如果在多个地方需要相同的时间样式，会导致代码重复。建议将这些通用样式抽离到一个独立的样式文件中。+ // 在单独的样式文件中定义 + // src/packages/steps/demos/taro/demo.scss + .time-custom { + margin-top: 2px; + color: #808080; + font-size: 12px; + line-height: 1.5; + } - const timeCustomStyle = { - marginTop: pxTransform(2), - color: '#808080', - fontSize: pxTransform(12), - lineHeight: 1.5, - } // 然后在JSX中使用类名 - <View style={timeCustomStyle}>2025-01-20 07:12:30</View> + <View className="time-custom">2025-01-20 07:12:30</View>src/packages/steps/steps.scss (1)
313-333: 增强状态样式定义精确增强状态（enhanced）的样式定义针对完成步骤提供了特殊的视觉效果，包括背景色、图标颜色和文本颜色的定制。这种差异化的视觉处理有助于用户更清晰地识别步骤状态。
建议考虑：
- 为其他状态（如process、wait）也提供enhanced模式下的特殊样式，保持样式的一致性和完整性
- 考虑添加适当的过渡效果（transition），使状态变化更加平滑
// 示例：为process状态添加enhanced模式下的特殊样式 .nut-step-process { .nut-step-head-icon, .nut-step-head-text { transition: background-color 0.3s, color 0.3s; // enhanced模式下的特殊样式 .nut-steps-horizontal-enhanced &, .nut-steps-vertical-enhanced & { background-color: $steps-enhanced-process-head-background-color; .nut-icon { color: $steps-enhanced-process-head-icon-color; } } } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/packages/step/step.taro.tsx(1 hunks)src/packages/steps/demos/taro/demo9.tsx(1 hunks)src/packages/steps/steps.scss(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/packages/step/step.taro.tsx
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (8)
src/packages/steps/demos/taro/demo9.tsx (4)
1-3: 良好的导入实践代码从不同包中导入了所需的组件和图标，组织清晰。使用命名导入而不是默认导入有助于提高代码可读性和维护性。
7-11: 状态管理实现得当使用React的useState钩子来管理步骤值状态，并通过handleStep函数实现了循环切换步骤的功能。这是一个简洁有效的实现。
21-57: 第一个Steps组件结构良好第一个Steps组件使用了"dynamic"状态和垂直方向布局，组合了dot和icon类型的步骤，展示了不同的步骤样式和内容格式。组件结构清晰，内容丰富，是一个很好的示例。
92-94: 交互控制实现恰当添加了一个按钮用于切换步骤状态，并通过handleStep函数实现了状态的更新。这种交互方式简单明了，能够很好地展示Steps组件的动态特性。
src/packages/steps/steps.scss (4)
6-180: 横向步骤条样式结构完善横向步骤条的样式结构清晰，针对不同状态（process、wait、finish）和不同布局（single、double）提供了详细的样式定义。特别是在处理图标、点和文本类型时的差异化处理，以及对步骤连接线的精确定位控制都非常出色。
建议考虑以下优化点：
- 在某些嵌套较深的选择器中，可以考虑使用SCSS的父选择器引用（&）简化结构
- 对于重复出现的数值（如padding、margin），可以考虑抽取为变量
这些样式的模块化组织方式使得组件能够支持多种布局和状态组合，非常灵活。
182-311: 纵向步骤条样式实现完善纵向步骤条样式定义详尽，针对不同类型（icon、dot、text）提供了差异化的样式处理。特别是在处理步骤连接线和内容对齐方面的细节处理非常到位。
以下几点特别出色：
- 使用了计算属性（calc）动态计算尺寸和位置，增强了样式的灵活性
- 对于图标、点和文本的包装元素提供了一致的基础样式，同时保留了类型特定的差异
- 考虑了不同设备环境的兼容性（如Harmony环境）
这些样式定义使得纵向步骤条在各种场景下都能保持一致的视觉效果和良好的用户体验。
6-311: 变量使用规范代码中大量使用了SCSS变量（如
$steps-background-color、$steps-process-title-color等）来定义颜色、尺寸和间距，这是一个很好的实践，使得主题定制和样式维护变得更加容易。特别是像
$steps-vertical-head-icon-size、$steps-base-head-dot-size这样的专用变量，确保了不同类型步骤之间的视觉一致性，同时允许对特定类型进行单独定制。这种变量命名和使用方式也非常符合组件库的最佳实践，有助于保持整个库的风格一致性。
1-334: 整体结构清晰，模块化程度高整个SCSS文件的结构组织得非常清晰，通过嵌套选择器创建了逻辑清晰的样式层次。主要分为横向和纵向两大布局模式，每种模式下又细分为不同的类型和状态。
特别值得称赞的是：
- 类名命名遵循了BEM方法论的思想，如
.nut-steps-horizontal、.nut-step-head-icon等- 公共样式和特定样式的分离，减少了代码重复
- 状态样式（process、wait、finish）和类型样式（icon、dot、text）的清晰分离
这种结构使得样式代码易于维护和扩展，也便于其他开发者理解和使用。
已修改 |
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (1)
src/packages/steps/doc.md (1)
17-82: 💡 Verification agent🧩 Analysis chain
请校验引用的 demo 文件路径
文档中所有<CodeBlock src='h5/demoX.tsx'>均指向h5目录下的示例文件，需要与实际项目目录结构保持一致，否则页面渲染时会找不到对应示例。建议在合并前执行如下脚本，确认所有引用文件都存在：
🏁 Script executed:
#!/usr/bin/env bash # 验证 Steps 组件文档引用的 h5 下示例文件是否存在 demos=(demo1.tsx demo3.tsx demo7.tsx demo2.tsx demo6.tsx demo5.tsx demo4.tsx demo8.tsx demo9.tsx) missing=0 for f in "${demos[@]}"; do if [ ! -f src/packages/steps/h5/"$f" ]; then echo "❌ 缺失示例文件: src/packages/steps/h5/$f" missing=1 fi done [ $missing -eq 0 ] && echo "✅ 所有示例文件均存在"Length of output: 1740
修正文档中的示例文件路径引用
根据验证脚本的结果，
src/packages/steps/doc.md中引用的以下示例文件在src/packages/steps/h5/目录下均不存在，渲染时会导致示例无法加载，请检查并修复路径或补充相应文件：
- src/packages/steps/h5/demo1.tsx
- src/packages/steps/h5/demo2.tsx
- src/packages/steps/h5/demo3.tsx
- src/packages/steps/h5/demo4.tsx
- src/packages/steps/h5/demo5.tsx
- src/packages/steps/h5/demo6.tsx
- src/packages/steps/h5/demo7.tsx
- src/packages/steps/h5/demo8.tsx
- src/packages/steps/h5/demo9.tsx
建议在合并前：
- 确认上述文件已创建并位于
src/packages/steps/h5/下，或- 修改
doc.md中<CodeBlock src='h5/demoX.tsx'>的路径，使之与实际目录结构一致。
♻️ Duplicate comments (1)
src/packages/steps/doc.taro.md (1)
13-81: Taro 文档中的 Demo 路径需修正
当前所有<CodeBlock src='h5/demoX.tsx'>应引用 Taro 专用示例（taro/demoX.tsx），否则与示例目录不符。- <CodeBlock src='h5/demo1.tsx'></CodeBlock> + <CodeBlock src='taro/demo1.tsx'></CodeBlock>
🧹 Nitpick comments (4)
src/packages/steps/doc.en-US.md (1)
119-167: 优化主题变量分组与说明
新增了一大批 CSS 变量，命名规范良好。建议将变量按功能（如通用、水平布局、垂直布局、不同状态）进行分组，并在文档中加上小标题或注释，提升可读性和查找效率。src/packages/steps/doc.taro.md (1)
119-167: 优化 Taro 文档的样式变量分组
新增大量 CSS 变量，建议按通用、水平、垂直、状态等维度分组并添加小标题，增强文档的可读性和维护性。src/packages/steps/doc.zh-TW.md (1)
119-167: 优化样式变量分组
大量新增 CSS 变量，建议按功能或状态分块展示，并附小标题或注释，提升阅读体验。src/packages/steps/doc.md (1)
13-77: 示例标题命名不一致
当前示例区块的标题同时使用了“横版”与“横向”两种前缀，并且不同标题中对逗号、顿号与“+”的使用也无统一风格，例如：“横版上下布局点状、icon、文案” vs “横向上下布局混合：点状 + icon”。建议统一术语（“横向”或“水平”）及标点风格，提升文档可读性。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
src/packages/steps/doc.en-US.md(3 hunks)src/packages/steps/doc.md(3 hunks)src/packages/steps/doc.taro.md(3 hunks)src/packages/steps/doc.zh-TW.md(3 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)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: test
- GitHub Check: build
🔇 Additional comments (12)
src/packages/steps/doc.en-US.md (3)
91-97: 校对 Steps 组件属性表
direction、value、status、type、layout、icon、onStepClick的默认值和类型是否与steps.tsx中的默认属性及类型定义文件保持一致，请逐项确认。
105-110: 校对 Step 子组件属性表
已将title和description类型修改为ReactNode，新增type属性并移除dot，请对照step.tsx中的接口定义验证文档与实现保持同步。
13-82:✅ Verification successful
验证 Demo 引用路径是否正确
文档中新增了多个h5/demoX.tsx示例引用，请确认这些示例文件是否存在且路径无误，否则会导致运行示例失败。建议运行以下脚本检查文件是否齐全：
🏁 Script executed:
#!/bin/bash # 验证 h5 目录下的 demo 文件 for i in {1..9}; do if [ ! -f src/packages/steps/demos/h5/demo${i}.tsx ]; then echo "Missing demo file: src/packages/steps/demos/h5/demo${i}.tsx" fi doneLength of output: 656
示例文件路径验证通过
已执行脚本验证，src/packages/steps/demos/h5/demo1.tsx至demo9.tsx文件均存在，文档中引用路径正确，无需进一步修改。src/packages/steps/doc.taro.md (2)
91-98: 校对 Taro 文档的 Steps 属性表
direction、value、status、type、layout、icon、onStepClick的类型及默认值是否与steps.taro.tsx中的实现和类型定义保持一致，请逐项确认。
105-110: 校对 Taro 文档的 Step 子组件属性
title、description已修改为ReactNode，新增type属性并移除dot，请对照step.taro.tsx中的接口定义验证一致性。src/sites/sites-react/doc/docs/react/migrate-from-v2.md (1)
311-319: 迁移指南已更新 Steps 及 Step API
文档中新增status、layout、type、icon、onStepClick，并移除dot；同时更新 Step 的title、description类型及type属性，完整覆盖了版本差异。src/sites/sites-react/doc/docs/taro/migrate-from-v2.md (1)
311-319: 迁移指南已同步 Taro 版 Steps API 变更
与 H5 版一致，新增status、layout、type、icon、onStepClick，删除dot，Step 的类型更新完备。src/packages/steps/doc.zh-TW.md (3)
13-77: 验证示例引用路径
文档中所有h5/demoX.tsx示例，请确认src/packages/steps/demos/h5/目录下对应文件存在，防止示例无法加载。
91-97: 校对 Steps 属性表（中文）
请检查direction、value、status、type、layout、icon、onStepClick的默认值与代码一致。
105-110: 校对 Step 子组件属性表（中文）
已将title、description类型调整为ReactNode，新增type，删除dot属性，请对照代码确认文档一致。src/packages/steps/doc.md (2)
91-97: Props 表格需与组件实现保持一致
当前文档列出了direction、value、status、type、layout、icon、onStepClick共 7 个属性，符合重构后新增的 API。请一并确认：
- 默认值正确无误；
layout与实际代码中使用的属性名保持一致（如是否需同步更新）；- 是否需要补充对
direction: vertical场景新增样式或示例的说明。
105-109: Step 子组件 Props 检查
title、description已升级为ReactNode；type也与父组件保持一致；value默认0无误，文档描述准确。
| | \--nutui-steps-background-color | 步骤条背景色 | `$white` | | ||
| | \--nutui-steps-base-head-height | 头部高度 | `14px` | | ||
| | \--nutui-steps-base-head-background-color | 头部背景色 | `$color-background` | | ||
| | \--nutui-steps-base-head-border | 头部边框 | `none` | | ||
| | \--nutui-steps-base-head-text-size | 头部文字大小 | `12px` | | ||
| | \--nutui-steps-base-head-size | 头部图标大小 | `$font-size-xxs` | | ||
| | \--nutui-steps-base-head-color | 头部颜色 | `$color-text` | | ||
| | \--nutui-steps-base-head-dot-size | 头部点状大小 | `6px` | | ||
| | \--nutui-steps-base-head-dot-background-color | 头部点状背景色 | `$color-text-disabled` | | ||
| | \--nutui-steps-base-head-icon-size | 头部图标大小 | `16px` | | ||
| | \--nutui-steps-double-head-icon-size | 双行头部图标大小 | `20px` | | ||
| | \--nutui-steps-vertical-head-icon-size | 垂直头部图标大小 | `20px` | | ||
| | \--nutui-steps-base-line-height | 分割线高度 | `1px` | | ||
| | \--nutui-steps-base-line-background | 分割线背景色 | `$color-border` | | ||
| | \--nutui-steps-base-title-font-size | 标题字号 | `$font-size-s` | | ||
| | \--nutui-steps-base-title-color | 标题颜色 | `$color-title` | | ||
| | \--nutui-steps-base-description-margin-top | 描述上边距 | `2px` | | ||
| | \--nutui-steps-base-description-font-size | 描述字号 | `$font-size-xxs` | | ||
| | \--nutui-steps-base-description-color | 描述颜色 | `$color-text-help` | | ||
| | \--nutui-steps-base-head-border-color | 头部边框颜色 | `$color-border` | | ||
| | \--nutui-steps-process-head-background-color | 进行中头部背景色 | `$color-primary` | | ||
| | \--nutui-steps-process-color | 进行中颜色 | `$white` | | ||
| | \--nutui-steps-process-title-color | 进行中标题颜色 | `$color-primary` | | ||
| | \--nutui-steps-process-description-color | 进行中描述颜色 | `$color-primary` | | ||
| | \--nutui-steps-wait-icon-color | 等待状态图标颜色 | `$color-text-help` | | ||
| | \--nutui-steps-wait-title-color | 等待状态标题颜色 | `$color-title` | | ||
| | \--nutui-steps-wait-description-color | 等待状态描述颜色 | `$color-text` | | ||
| | \--nutui-steps-finish-icon-color | 完成状态图标颜色 | `$color-text-help` | | ||
| | \--nutui-steps-business-title-color | 业务状态标题颜色 | `var(--nutui-color-service-pressed)` | | ||
| | \--nutui-steps-business-description-color | 业务状态描述颜色 | `var(--nutui-color-service-pressed)` | | ||
| | \--nutui-steps-business-head-text-color | 业务状态头部文字颜色 | `var(--nutui-color-service-pressed)` | | ||
| | \--nutui-steps-business-head-dot-background-color | 业务状态头部点状背景色 | `var(--nutui-color-service-pressed)` | | ||
| | \--nutui-steps-business-head-icon-color | 业务状态头部图标颜色 | `var(--nutui-color-service-pressed)` | | ||
| | \--nutui-steps-business-head-background-color | 业务状态头部背景色 | `var(--nutui-color-service)` | | ||
| | \--nutui-steps-enhanced-finish-head-background-color | 增强完成状态头部背景色 | `$color-primary-light-pressed` | | ||
| | \--nutui-steps-enhanced-finish-head-dot-background-color | 增强完成状态头部点状背景色 | `$color-primary-disabled-special` | | ||
| | \--nutui-steps-enhanced-finish-head-icon-color | 增强完成状态头部图标颜色 | `$color-primary-stop-1` | | ||
| | \--nutui-steps-enhanced-finish-head-text-color | 增强完成状态头部文字颜色 | `$color-primary-stop-1` | | ||
| | \--nutui-steps-horizontal-item-padding-right | 水平项右内边距 | `28px` | | ||
| | \--nutui-steps-horizontal-item-line-padding | 水平项分割线内边距 | `0 8px` | | ||
| | \--nutui-steps-horizontal-item-special-padding-right | 特殊水平项右内边距 | `22px` | | ||
| | \--nutui-steps-horizontal-item-special-3-padding-right | 3项特殊水平项右内边距 | `9px` | | ||
| | \--nutui-steps-vertical-item-padding-bottom | 垂直项下内边距 | `13px` | | ||
| | \--nutui-steps-vertical-title-font-size | 垂直标题字号 | `$font-size-l` | | ||
| | \--nutui-steps-vertical-title-margin-bottom | 垂直标题下边距 | `4px` | | ||
| | \--nutui-steps-vertical-line-height | 垂直行高 | `18px` | | ||
| | \--nutui-steps-vertical-description-font-size | 垂直描述字号 | `$font-size-base` | | ||
| | \--nutui-steps-vertical-description-margin | 垂直描述边距 | `0 0 1px` | | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
CSS 变量存在命名与重复风险
--nutui-steps-base-head-size与--nutui-steps-base-head-icon-size都描述“头部图标大小”，建议与 SCSS 源文件对齐，避免同义或重复变量；- 建议按“Base / Process / Wait / Finish / Business / Enhanced / 布局”分组，并在表格中加入小节标题，提升可读性；
- 请与
src/packages/steps/steps.scss、src/packages/step/step.scss中实际定义的变量逐一核对，确保名称与默认值保持一致，避免主题定制失效。
🤖 Prompt for AI Agents
In src/packages/steps/doc.md between lines 119 and 167, the CSS variable
documentation has naming conflicts and lacks clear grouping. First, reconcile
the variables --nutui-steps-base-head-size and --nutui-steps-base-head-icon-size
by aligning their names and descriptions with those in the SCSS source files to
avoid duplication. Second, reorganize the table by grouping variables under
clear section headers such as Base, Process, Wait, Finish, Business, Enhanced,
and Layout to improve readability. Finally, cross-check each variable name and
default value against the actual definitions in src/packages/steps/steps.scss
and src/packages/step/step.scss to ensure consistency and prevent theme
customization issues.
…nto feat_v3.x
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
文档
样式
测试