- 分组
- 机制 · 纵深防御
- 组件
ShieldLayers·#shield-layers- 交互
- 每按一次 → 点亮一道环和对应说明
适合
- 安全、过滤、审核类的多层机制
- 强调“外层先拦，里层兜底”的顺序
不适合
- 层之间没有内外顺序：用 LayerStack
- 要讲每层的细节步骤：用 RequestJourney
内容上限
| 1 | layers 2–5 层（外层在前）：name ≤ 10 字，note ≤ 34 字，tag ≤ 10 个字符 |
| 2 | core ≤ 4 字 |
字段
| 字段 | 类型 | |
|---|---|---|
kicker · 必填 | string | 标题上方的小节名，2–8 字 |
title · 必填 | string | string[] | 页面标题；传数组可手动断行，每项一行 |
lead | string | 一到两句导语，≤ 60 字 |
source | string | 事实出处；页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示，可用 <kbd> |
layers · 必填 | { name, note, tag? }[] | 从外到内，每层一步 |
core · 必填 | string | 被保护的对象 |
示例代码
<ShieldLayers kicker="安全" title="从外到内的几层过滤" core="源站" layers={[{ name: '网络层 DDoS 防护', tag: 'L3/4', note: '…' }, …]} />