面板卡片 <PanelCards />

浅灰大圆角卡片，上半是小标题，下半是一张白色小界面：列表、大数字、柱图、进度条、换算或标签。

分组: 产品 · 3–4 项能力各配一小块界面
组件: PanelCards · #panel-cards

适合

介绍产品的 3–4 项能力，每项都有能画出来的数据
把几组小数据并排展示

不适合

只有文字没有数据：用 IconGrid
超过 4 项：拆页

内容上限

1	cards 3 或 4 张
2	eyebrow ≤ 12 字，title ≤ 8 字，body ≤ 24 字
3	list 3–5 行；bars 3–12 根；progress 2–4 行；chips 3–6 个
4	迷你界面里的数字同样要在 source 写出处

字段

字段	类型
`kicker` · 必填	`string`	小节名，2–8 字
`title` · 必填	`string \| string[]`	标题；数组手动断行
`lead`	`string`	一两句导语，≤ 60 字
`source`	`string`	事实出处
`cards` · 必填	`{ eyebrow?, title, body?, ui }[]`	卡片；ui.kind = list / figure / bars / progress / convert / chips

示例代码

<PanelCards
  kicker="面板卡片"
  title="一张卡，一小块界面"
  cards={[
    { title: '打包体积', ui: { kind: 'figure', value: '5.9 MB', note: '单个 HTML 文件' } },
    { title: '参考演示', ui: { kind: 'bars', values: [25, 31, 30], value: '86 页' } },
    { title: '检查视口', ui: { kind: 'list', rows: [{ label: '1920 × 1080', value: '截图' }] } },
  ]}
  source="npm run check"
/>