面板卡片 <PanelCards />

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

Template and style descriptions are currently available in Chinese only.

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

Good for

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

Avoid when

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

Content limits

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 写出处

Fields

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

Example

<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"
/>