Steps
表示流程阶段与当前进度。中文惯用名：步骤条。
稳定本期新增已接入
元信息
| 字段 | 值 |
|---|---|
| 规范 ID | component.steps |
| 名称 | Steps |
| 二级分类 | 导航（navigation） |
| 用途 | 表示流程阶段与当前进度 |
| 描述 | 中文惯用名：步骤条。 |
预览
静态结构：<ol data-slot="steps">；每步 li（data-slot="steps-item"，data-status 四态）= 圆形序号 / 状态图标（data-slot="steps-icon"，finish → border-primary + √，process → bg-primary 实心，wait → border-border 灰字，error → border-destructive + ×）+ 标题 / 描述；步骤间连接线（data-slot="steps-connector"，水平为自适应 h-px，垂直为 w-px h-6）。状态按 current 推导，item.status 可覆盖；item.icon 优先于状态图标与序号。
DSL 结构
{
"type": "Steps",
"props": {
"items": [
{
"title": "提交申请"
},
{
"title": "审核中"
},
{
"title": "完成"
}
],
"current": 1
}
}何时用
何时使用
- 表示流程阶段与当前进度：注册向导、下单流程、审批流转。
- 步骤状态需要显式呈现：完成（√）/ 进行中 / 等待 / 失败（×）。
- 空间受限时的纵向流程：direction: vertical。
何时不用
- 同层内容视图切换：使用 Tabs。
- 时间顺序的事件记录：使用 Timeline（Steps 面向「流程推进」）。
- 仅表示百分比进度：使用 Progress。
变体
| 变体 | 视觉形态 | 适用场景 |
|---|---|---|
| 水平 | 横向步骤 + 自适应连接线 | 顶部向导、页面级流程 |
| 垂直 | 纵向步骤 + 竖线 | 侧栏流程、窄空间 |
| 错误态 | 当前步 × 图标 + 红色标题 | 流程失败定位 |
API 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
items | StepItemData[] | [] | 步骤列表：{ title, description?, status?, icon? } |
current | number | 0 | 当前步骤下标（从 0 开始） |
direction | `'horizontal' | 'vertical'` | 'horizontal' |
className / style | string / CSSProperties | — | 通用：根节点 class 合并 / 内联样式 |
使用规范
- 步骤数控制在 2~6 步，超出拆分子流程或改纵向。
- 标题用动宾短语（「提交订单」），描述补充状态或耗时。
- 失败必须落在具体步骤（status: error）并给出恢复路径，不整页报错。
- current 与步骤内容区联动：切换步骤只更新中间内容区。
正例
- ✓ 下单流程：填写地址 → 确认订单 → 支付完成，current 随提交动作推进。
- ✓ 审批流：某节点驳回时该步 status: error，描述展示驳回原因。
反例
- ✕ 用 Steps 做标签页切换（应使用 Tabs）。
- ✕ 步骤可乱序完成时仍用线性 Steps（应改用 List / Tree 表达）。
Design Token 映射
不适用：组件 tokenRefs 为空：样式 Token 数据尚未接入，三层映射（Primitive → Semantic → Component）待样式 Token 接入后回填。