执行计划树 <QueryPlan />

EXPLAIN 风格的计划树，自上而下画节点和连线；可选在上方放 SQL，一个节点可用强调色标出。

版型與風格的說明目前僅提供簡體中文。

在範例簡報中查看 →

分組: 技术 · 解释一条查询怎么执行
元件: QueryPlan · #query-plan
互動: SlideDef.build = 'reveal' 时每按一次 → 展开下一层

適合

讲数据库查询计划、编译器语法树、调用树这类层级结构
想让观众从根往下一层层读

不適合

节点超过 7 个或超过 4 层：拆页或改用 IssueTree
节点之间不是父子关系：用 NodeGraph

內容上限

1	sql 1–3 行，每行 ≤ 56 个字符
2	plan ≤ 4 层、≤ 7 个节点、≤ 3 个叶子
3	op ≤ 18 个字符；detail ≤ 24 个字符；meta ≤ 16 个字符
4	note ≤ 50 字

欄位

欄位	型別
`kicker` · 必填	`string`	标题上方的小节名，2–8 字
`title` · 必填	`string \| string[]`	页面标题；传数组可手动断行，每项一行
`lead`	`string`	一到两句导语，≤ 60 字
`source`	`string`	事实出处；页面上有任何数据或事实时必填
`hint`	`ReactNode`	页眉中间的操作提示，可用 <kbd>
`sql`	`string[]`	上方的查询语句，每项一行
`plan` · 必填	`PlanNode { op, detail?, meta?, hot?, children? }`	计划树的根
`note`	`string`	树下方的一句解读

範例程式碼

<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' }] }] }} />