解剖卡 <AnatomyCard />
左边一张大卡被切成 2–4 条（等宽字体写示例值），右边是对应的说明；每按一次 → 点亮一条和它的说明。
Template and style descriptions are currently available in Chinese only.
- Group
- 结构 · 一个东西由几部分组成
- Component
AnatomyCard·#anatomy-card- Interaction
- build: reveal 时每步点亮一条；完整状态全部点亮
Good for
- 拆解一个对象、请求、报文、记录的组成
- 每一部分都有一个具体的示例值
Avoid when
- 部分之间是上下层依赖：用 LayerStack 或 ArchLayers
- 没有示例值：用 NumberedColumns
Content limits
| 1 | label ≤ 24 个拉丁字符 |
| 2 | parts 2–4 条 |
| 3 | name ≤ 8 字；sample ≤ 3 行 × 36 个拉丁字符；note ≤ 40 字 |
| 4 | weight 1–3 |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | 标题上方的小节名，2–8 字 |
title · required | string | string[] | 页面标题；传数组可手动断行，每项一行 |
lead | string | 一到两句导语，≤ 60 字 |
source | string | 事实出处；页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示，可用 <kbd> |
label · required | string | 卡片左上角标签 |
parts · required | { name, sample: string[], note, weight? }[] | 从上到下 |
Example
<AnatomyCard kicker="拆开一个对象" title="…" label="my-bucket" parts={[{ name: '键', sample: ['photos/puppy.jpg'], note: '…' }, …]} source="…" />