定位四象限 <Quadrant />

左侧一个 2 × 2 平面，两条轴各有两端标签，四个象限可命名；3–7 个点，焦点（通常是自己）带脉冲光圈；右侧 2–3 段解读。

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

分組: 定位 · 二维竞争地图
元件: Quadrant · #quadrant
互動: 点依次弹出，焦点持续发出脉冲；悬停一个点时标签反白。

適合

竞品定位、产品组合、优先级（影响 × 投入）
想让听众看到“哪块位置是空的”

不適合

点的坐标没有依据又不标示意
只有一个维度在比较：用 MetricBars 或 RangeBars

內容上限

1	points 3–7 个，坐标 0–100，相邻点至少相距 8，避免标签重叠
2	point.label ≤ 8 字
3	x / y 每端 ≤ 6 字；zones 每个 ≤ 8 字
4	notes 2–3 段：title ≤ 10 字，body ≤ 40 字

欄位

欄位	型別
`kicker` · 必填	`string`	标题上方的小节名，2–8 字
`title` · 必填	`string \| string[]`	页面标题；传数组可手动断行，每项一行
`lead`	`string`	一到两句导语，≤ 60 字
`source`	`string`	事实出处；页面上有任何数据或事实时必填
`hint`	`ReactNode`	页眉中间的操作提示，可用 <kbd>
`x` · 必填	`[string, string]`	横轴两端
`y` · 必填	`[string, string]`	纵轴两端（低、高）
`zones`	`[string, string, string, string]`	象限名：左上、右上、左下、右下
`points` · 必填	`{ label, x, y, focus? }[]`	点
`notes` · 必填	`{ title, body }[]`	右栏解读

範例程式碼

<Quadrant
  kicker="竞争地图"
  title="找一块别人没占的位置"
  x={['上手难', '上手快']}
  y={['只看报表', '能做归因']}
  points={[
    { label: '通用 BI', x: 22, y: 58 },
    { label: '示例产品', x: 74, y: 76, focus: true },
  ]}
  notes={[{ title: '轴要来自客户', body: '…' }]}
  source="示意"
/>