步骤轨道 <StepTrack />

3–5 个节点串在一条轨道上，最后一步为强调色终点。每步可附一条命令（深色）或配置行（浅色），下方可接“之后”命令条。

Template and style descriptions are currently available in Chinese only.

Group: 操作 · 有序流程
Component: StepTrack · #step-track
Interaction: 轨道从左向右画出，节点依次出现，轨道止于最后一个节点。

Good for

必须按顺序执行的流程：升级、部署、入职
每步都有明确的动作

Avoid when

步骤无先后：用 NumberedColumns
超过 5 步：合并步骤或拆页

Content limits

1	steps 3–5 步
2	title ≤ 8 字；body ≤ 40 字（两行内）
3	cmd ≤ 30 个字符
4	after.cmds 2–5 条

Fields

Field	Type
`kicker` · required	`string`	标题上方的小节名，2–8 字
`title` · required	`string \| string[]`	页面标题；传数组可手动断行，每项一行
`lead`	`string`	一到两句导语，≤ 60 字
`source`	`string`	事实出处；页面上有任何数据或事实时必填
`hint`	`ReactNode`	页眉中间的操作提示，可用 <kbd>
`steps` · required	`{ title, body, cmd?, config? }[]`	config: true 时 cmd 显示为浅色配置行，没有 # 提示符
`after`	`{ label, cmds[] }`	流程后的收尾命令条

Example

<StepTrack
  kicker="升级步骤"
  title="四步完成升级"
  steps={[
    { title: '改写软件源', body: '把 birch 改为 aurora。', cmd: 'Suites: aurora aurora-updates', config: true },
    { title: '刷新索引', body: '确认没有旧源。', cmd: 'apt update' },
    { title: '完整升级', body: '完成后重启。', cmd: 'apt full-upgrade' },
  ]}
  after={{ label: '重启之后', cmds: ['apt autoremove'] }}
/>