下一步拼格 <StepGrid />
上排一大块强调色标题和一块图案块，下排三块步骤（时间、标题、说明、小注），最后一块用深色。为荧光格风格设计，其他风格也能用。配 build: 'reveal' 逐块亮起。
- 分组
- 收尾 · 大标题块加三块步骤
- 组件
StepGrid·#step-grid- 交互
- 按 → 逐块亮起
适合
- 结尾的下一步、行动计划
- 三件事有先后
不适合
- 步骤超过 3 个：用 Roadmap
- 只是总结要点：用 Closing
内容上限
| 1 | steps 正好 3 个 |
| 2 | when ≤ 8 字，title ≤ 10 字，body ≤ 40 字，meta ≤ 16 字符 |
| 3 | title ≤ 2 行 × 8 字 |
字段
| 字段 | 类型 | |
|---|---|---|
kicker · 必填 | string | 小节名 |
title · 必填 | string | string[] | 标题 |
lead | string | 导语 |
steps · 必填 | { when, title, body, meta? }[] | 三个步骤 |
source | string | 出处 |
示例代码
<StepGrid
kicker="下一步"
title="三步做一份"
steps={[{ when: '今天', title: '建一个项目', body: '…', meta: 'pcafe init' }, …]}
/>