议题树 <IssueTree />

左侧深色卡写要回答的问题，右侧 2–4 个分支，每个分支后面一排 2–3 个待查原因；焦点分支用强调色浅底。

Template and style descriptions are currently available in Chinese only.

Group: 分析 · 把问题拆开
Component: IssueTree · #issue-tree
Interaction: 分支依次出现，原因标签随后弹出；悬停分支时卡片变为强调色浅底。

Good for

复盘或诊断：指标为什么变了
咨询式分析的第一页：先把问题拆成互不重叠的几块

Avoid when

分支之间有先后顺序：用 FlowDiagram
已经有答案：直接用 BigStat 或 NumberedColumns 给结论

Content limits

1	branches 2–4 个；每个 leaves 2–3 个
2	root.title ≤ 12 字；note ≤ 16 字
3	branch.title ≤ 10 字；note ≤ 16 字；leaf ≤ 14 字（4 个分支时 ≤ 10 字）
4	分支要互不重叠、合起来覆盖整个问题

Fields

Field	Type
`kicker` · required	`string`	标题上方的小节名，2–8 字
`title` · required	`string \| string[]`	页面标题；传数组可手动断行，每项一行
`lead`	`string`	一到两句导语，≤ 60 字
`source`	`string`	事实出处；页面上有任何数据或事实时必填
`hint`	`ReactNode`	页眉中间的操作提示，可用 <kbd>
`root` · required	`{ title, note? }`	要回答的问题
`branches` · required	`{ title, note?, leaves }[]`	分支
`focus`	`number`	强调的分支

Example

<IssueTree
  kicker="问题拆解"
  title="先拆问题，再找原因"
  root={{ title: '新客户增长为什么放缓？' }}
  branches={[
    { title: '线索变少', note: '看各渠道的线索量', leaves: ['付费渠道预算下调', '内容更新变慢'] },
    { title: '转化变低', note: '看漏斗每一级', leaves: ['首次响应变慢', '试用没有上手'] },
    { title: '成交变慢', leaves: ['参与决策的人变多', '安全评审排队'] },
  ]}
  focus={1}
  source="示意"
/>