- 分组
- 机制 · 一次请求经过哪里
- 组件
RequestJourney·#request-journey- 交互
- 每按一次 → 数据包前进一站,线路随之点亮
适合
- 请求、数据或订单依次经过几层
- 讲解系统的处理顺序
不适合
- 有分支或回路:用 FlowDiagram
- 超过 6 站:拆页或用 StepTrack
内容上限
| 1 | hops 3–6 站:name ≤ 6 字,note ≤ 30 字,tag ≤ 10 个字符 |
| 2 | 图标只用 icon-set 里的名称,同一页不要重复 |
字段
| 字段 | 类型 | |
|---|---|---|
kicker · 必填 | string | 标题上方的小节名,2–8 字 |
title · 必填 | string | string[] | 页面标题;传数组可手动断行,每项一行 |
lead | string | 一到两句导语,≤ 60 字 |
source | string | 事实出处;页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示,可用 <kbd> |
hops · 必填 | { icon, name, note, tag? }[] | 各站,每站一步 |
示例代码
<RequestJourney kicker="怎么工作" title="一个请求经过哪几站" hops={[{ icon: 'routing', tag: 'DNS', name: 'DNS 解析', note: '…' }, …]} />