数字滚动对比 <CountCompare />

左右两张卡片各一个大数字，进入时从 0 滚动到目标值；中间箭头和变化量胶囊。右边那张反色，代表现在。

Template and style descriptions are currently available in Chinese only.

Group: 数据 · 前后两个数字
Component: CountCompare · #count-compare

Good for

一个指标的前后变化，变化本身就是结论
发布、复盘、季度对比

Avoid when

超过两个数字：用 MetricBars
需要过程：用 LineChart

Content limits

1	before / after：label ≤ 8 字，note ≤ 20 字，unit ≤ 4 字
2	change ≤ 8 字符

Fields

Field	Type
`kicker` · required	`string`	小节名，2–8 字
`title` · required	`string \| string[]`	标题；数组手动断行
`lead`	`string`	一两句导语，≤ 60 字
`source`	`string`	事实出处
`before` · required	`{ label, value, decimals?, unit?, note? }`	之前
`after` · required	`{ label, value, decimals?, unit?, note? }`	之后
`change` · required	`string`	变化量，例如 +19 个

Example

<CountCompare
  kicker="这一期"
  title="模板从 67 个增加到 86 个"
  before={{ label: '第 1 期结束', value: 67, unit: '个' }}
  after={{ label: '第 2 期结束', value: 86, unit: '个' }}
  change="+19 个"
  source="src/kit/catalog.ts"
/>