- 分组
- 结构 · 一个东西由几部分组成
- 组件
AnatomyCard·#anatomy-card- 交互
- build: reveal 时每步点亮一条；完整状态全部点亮
适合
- 拆解一个对象、请求、报文、记录的组成
- 每一部分都有一个具体的示例值
不适合
- 部分之间是上下层依赖：用 LayerStack 或 ArchLayers
- 没有示例值：用 NumberedColumns
内容上限
| 1 | label ≤ 24 个拉丁字符 |
| 2 | parts 2–4 条 |
| 3 | name ≤ 8 字；sample ≤ 3 行 × 36 个拉丁字符；note ≤ 40 字 |
| 4 | weight 1–3 |
字段
| 字段 | 类型 | |
|---|---|---|
kicker · 必填 | string | 标题上方的小节名，2–8 字 |
title · 必填 | string | string[] | 页面标题；传数组可手动断行，每项一行 |
lead | string | 一到两句导语，≤ 60 字 |
source | string | 事实出处；页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示，可用 <kbd> |
label · 必填 | string | 卡片左上角标签 |
parts · 必填 | { name, sample: string[], note, weight? }[] | 从上到下 |
示例代码
<AnatomyCard kicker="拆开一个对象" title="…" label="my-bucket" parts={[{ name: '键', sample: ['photos/puppy.jpg'], note: '…' }, …]} source="…" />