- 分組
- 排查 · 从外到内逐层确认
- 元件
LayerStack·#layer-stack- 互動
- 悬停一层:该层变白、右移,其余层降到 45% 透明度。
適合
- 任何一层出问题都会挡住后面的链路:网络、权限、发布流程
- 排查清单需要按顺序从上往下查
不適合
- 各项之间没有先后或依赖:用 Checklist
- 每层需要命令行示例:用 Checklist 的 cmd
內容上限
| 1 | layers 4–6 层,最外层在最上面 |
| 2 | name ≤ 12 字;check 一行到两行,≤ 30 字 |
| 3 | outcome.text ≤ 16 字 |
欄位
| 欄位 | 型別 | |
|---|---|---|
kicker · 必填 | string | 标题上方的小节名,2–8 字 |
title · 必填 | string | string[] | 页面标题;传数组可手动断行,每项一行 |
lead | string | 一到两句导语,≤ 60 字 |
source | string | 事实出处;页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示,可用 <kbd> |
layers · 必填 | { icon, name, check }[] | 从外到内 |
outcome | { icon, text } | 全部通过后的结果 |
範例程式碼
<LayerStack
kicker="访问路径"
title={['每一层都可能', '挡住下一层']}
layers={[
{ icon: 'cpu', name: 'AI 爬虫发起请求', check: '在日志里核实真爬虫:反向 DNS 或官方 IP 段' },
{ icon: 'shield', name: 'CDN / WAF / 防火墙', check: '已验证的搜索爬虫没有被拦截或挑战' },
{ icon: 'document', name: 'robots.txt', check: '放行搜索类爬虫' },
]}
outcome={{ icon: 'chat-quote', text: '出现在 AI 回答中' }}
source="示例知识库 · 图示「访问路径」"
/>