执行计划树 <QueryPlan />
EXPLAIN 风格的计划树，自上而下画节点和连线；可选在上方放 SQL，一个节点可用强调色标出。
Template and style descriptions are currently available in Chinese only.
- Group
- 技术 · 解释一条查询怎么执行
- Component
QueryPlan·#query-plan- Interaction
- SlideDef.build = 'reveal' 时每按一次 → 展开下一层
Good for
- 讲数据库查询计划、编译器语法树、调用树这类层级结构
- 想让观众从根往下一层层读
Avoid when
- 节点超过 7 个或超过 4 层：拆页或改用 IssueTree
- 节点之间不是父子关系：用 NodeGraph
Content limits
| 1 | sql 1–3 行，每行 ≤ 56 个字符 |
| 2 | plan ≤ 4 层、≤ 7 个节点、≤ 3 个叶子 |
| 3 | op ≤ 18 个字符；detail ≤ 24 个字符；meta ≤ 16 个字符 |
| 4 | note ≤ 50 字 |
Fields
| Field | Type | |
|---|---|---|
kicker · required | string | 标题上方的小节名，2–8 字 |
title · required | string | string[] | 页面标题；传数组可手动断行，每项一行 |
lead | string | 一到两句导语，≤ 60 字 |
source | string | 事实出处；页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示，可用 <kbd> |
sql | string[] | 上方的查询语句，每项一行 |
plan · required | PlanNode { op, detail?, meta?, hot?, children? } | 计划树的根 |
note | string | 树下方的一句解读 |
Example
<QueryPlan kicker="EXPLAIN" title="…" sql={['EXPLAIN SELECT …']} plan={{ op: 'Hash Join', detail: 'o.customer_id = c.id', children: [{ op: 'Index Scan', hot: true }, { op: 'Hash', children: [{ op: 'Seq Scan' }] }] }} />