分层检查 <LayerStack />
4–6 层阶梯式叠放,每层有编号、图标、层名和要检查的事项,最底下是强调色的“结果”层。悬停一层时其余层变淡。
Template and style descriptions are currently available in Chinese only.
- Group
- 排查 · 从外到内逐层确认
- Component
LayerStack·#layer-stack- Interaction
- 悬停一层:该层变白、右移,其余层降到 45% 透明度。
Good for
- 任何一层出问题都会挡住后面的链路:网络、权限、发布流程
- 排查清单需要按顺序从上往下查
Avoid when
- 各项之间没有先后或依赖:用 Checklist
- 每层需要命令行示例:用 Checklist 的 cmd
Content limits
| 1 | layers 4–6 层,最外层在最上面 |
| 2 | name ≤ 12 字;check 一行到两行,≤ 30 字 |
| 3 | outcome.text ≤ 16 字 |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | 标题上方的小节名,2–8 字 |
title · required | string | string[] | 页面标题;传数组可手动断行,每项一行 |
lead | string | 一到两句导语,≤ 60 字 |
source | string | 事实出处;页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示,可用 <kbd> |
layers · required | { icon, name, check }[] | 从外到内 |
outcome | { icon, text } | 全部通过后的结果 |
Example
<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="示例知识库 · 图示「访问路径」"
/>