数字条 <MetricBars />

左栏论点，右栏 2–4 个大数字配比例条，可选一行强调色的合计。左栏底部可放一句衬线体结论。

Template and style descriptions are currently available in Chinese only.

Group: 数据 · 规模与占比
Component: MetricBars · #metric-bars
Interaction: 比例条依次生长；数字使用等宽数字并右对齐，便于纵向比较。

Good for

几个可加总或可比较的数量：新增 / 更新 / 删除，收入构成，用户分层
需要让听众记住一个比例

Avoid when

数字之间没有可比性（单位不同）：改用 SpotlightList
超过 4 个数：改用表格或拆页
数据随时间变化：改用 Timeline

Content limits

1	rows 2–4 行（含 total 最多 5 行）
2	数值 ≤ 6 位（92u 字号）
3	label ≤ 6 字
4	pull.figure ≤ 6 个字符，pull.text ≤ 24 字

Fields

Field	Type
`kicker` · required	`string`	标题上方的小节名，2–8 字
`title` · required	`string \| string[]`	页面标题；传数组可手动断行，每项一行
`lead`	`string`	一到两句导语，≤ 60 字
`source`	`string`	事实出处；页面上有任何数据或事实时必填
`hint`	`ReactNode`	页眉中间的操作提示，可用 <kbd>
`rows` · required	`{ label, value: number, suffix? }[]`	suffix 显示为灰色上标，如 “+” 表示“超过”
`total`	`MetricRow`	强调色合计行；比例以它为分母，否则以最大值为分母
`pull`	`{ figure, text }`	左栏底部的结论，例如 1 / 5
`shares`	`boolean`	是否显示 ≈% 列，默认 true；各行不是同一整体的部分时关掉

Example

<MetricBars
  kicker="软件包"
  title="数字里的 aurora"
  lead="与 Lumen 12 相比，超过 14,116 个新软件包进入仓库。"
  rows={[
    { label: '新增', value: 14116, suffix: '+' },
    { label: '更新', value: 44326, suffix: '+' },
  ]}
  total={{ label: '软件包总数', value: 69830, suffix: '+' }}
  pull={{ figure: '1 / 5', text: '每五个软件包里，约有一个是新增的。' }}
  source="Lumen 发布公告（示意） 2025-08-09"
/>