指标看板 <KpiBoard />

左侧一张深色大卡放北极星指标（大数字和走势线），右侧 4 或 6 张小卡放输入指标，每张有数值、变化、可选走势线或口径说明。

Template and style descriptions are currently available in Chinese only.

Group: 衡量 · 北极星与输入指标
Component: KpiBoard · #kpi-board
Interaction: 卡片依次淡入，走势线从左向右擦出；悬停小卡时抬起。

Good for

周会、月报、复盘的核心指标
想表达“一个结果指标由几个输入指标推动”

Avoid when

只有 1–3 个数字：用 BigStat 或 MetricBars
要比较多个对象的同一指标：用 MetricBars

Content limits

1	star 1 个；items 4 或 6 个
2	label ≤ 10 字；value ≤ 7 个字符
3	delta ≤ 6 个字符，good 决定颜色（不写则中性）
4	trend 6–12 个点；没有走势就写 note（≤ 18 字），两者选一个

Fields

Field	Type
`kicker` · required	`string`	标题上方的小节名，2–8 字
`title` · required	`string \| string[]`	页面标题；传数组可手动断行，每项一行
`lead`	`string`	一到两句导语，≤ 60 字
`source`	`string`	事实出处；页面上有任何数据或事实时必填
`hint`	`ReactNode`	页眉中间的操作提示，可用 <kbd>
`star` · required	`Kpi`	北极星指标
`items` · required	`{ label, value, delta?, good?, trend?, note? }[]`	输入指标

Example

<KpiBoard
  kicker="指标看板"
  title="一个北极星，六个输入指标"
  star={{ label: '每周活跃看板数', value: '1,240', delta: '+18%', good: true, trend: [420, 560, 700, 910, 1240] }}
  items={[
    { label: 'CAC 回收期', value: '16 月', delta: '−2 月', good: true, note: '中型客户目标 < 18 个月' },
    …
  ]}
  source="示意"
/>