聚焦列表 <SpotlightList />

右栏是名称与超大数值的列表，第一项用强调色和更大字号聚焦。左栏可附一个 KeyValue 细节表。

Template and style descriptions are currently available in Chinese only.

Group: 数据 · 名称 + 数值
Component: SpotlightList · #spotlight-list

Good for

一组“名称 → 版本 / 分数 / 数量”，其中一项是重点
排行榜、组件版本、地区数据

Avoid when

需要展示前后变化：用 CompareTable
数值是可加总的数量：用 MetricBars
没有明确的重点项

Content limits

1	items 3–6 项；第一项为聚焦项
2	value ≤ 6 个字符
3	name ≤ 14 个字符；tag ≤ 8 字，只给第一项
4	KeyValue 2–4 行

Fields

Field	Type
`kicker` · required	`string`	标题上方的小节名，2–8 字
`title` · required	`string \| string[]`	页面标题；传数组可手动断行，每项一行
`lead`	`string`	一到两句导语，≤ 60 字
`source`	`string`	事实出处；页面上有任何数据或事实时必填
`hint`	`ReactNode`	页眉中间的操作提示，可用 <kbd>
`items` · required	`{ name, value, tag? }[]`	第一项会被放大并着强调色
`extra`	`string`	列表下方的灰色补充行
`detail`	`ReactNode`	左栏底部的补充块，通常是 <KeyValue rows={…} />

Example

<SpotlightList
  kicker="桌面"
  title={['KDE Plasma 6', '首次进入 Lumen']}
  items={[
    { name: 'KDE Plasma', value: '6.3', tag: '全新大版本' },
    { name: 'GNOME', value: '48' },
    { name: 'Xfce', value: '4.20' },
  ]}
  detail={<KeyValue rows={[{ key: 'Qt 6', value: { from: '6.4.2', to: '6.8.2' } }]} />}
  source="aurora 发行说明 §2"
/>