🔀 Steps · 流程图标 / 步骤条

来源：Figma 「流程图标 (52)」+「流程Icon (23)」+「流程组件 (9)」共 84 次实例抽取
3 个 view · ① 横排步骤条 ② 竖排时间线 ③ 流程图节点
适用：购车 / 贷款 / 注册 / 上架 / 订单状态 / 审批等线性流程

① Horizontal · 横排步骤条

顶部步骤条，节点 40px / 连线 2px / 间距 8px。完成态=黄底+深字；当前态=白底+黄边+外发光。

紧凑型 · 6 步

② Vertical Timeline · 竖排时间线

订单 / 审批 / 物流等"有明确时间点"的流程。每个节点 18px，连线 2px 居左。

③ Process Flow · 流程图节点

复杂流程的图形化展示（开始 → 决策 → 分支 → 结束），适合 PM 评审和用户引导。

A. 简单线性流程

B. 含决策分支的流程

🎨 对应 Design Tokens

元素	用 Token
Step node 默认	--grey-100 背景 + --grey-400 文字
Step done	--yellow-500 背景 + --grey-900 文字
Step active	--white 背景 + --yellow-500 边框 + --yellow-50 光晕
Step 连接线	--grey-100 默认 / --yellow-500 完成
Timeline dot	18px 圆，3px 边，--yellow-500 完成 / --grey-200 默认
Flow start node	--yellow-50 背景 + --yellow-500 边框
Flow end node	--green-500 实心
Decision node	--white 背景 + --yellow-500 边框