截图标注 <Screenshot />

左侧一张带浏览器外框的截图，图上 3–5 个编号圆点；右侧按同样编号列出说明。悬停圆点或说明会同时高亮两边。

Template and style descriptions are currently available in Chinese only.

Group: 讲解 · 产品界面
Component: Screenshot · #screenshot
Interaction: 圆点依次弹出并有呼吸光圈；悬停圆点或右侧说明时两边一起高亮。逐条展开时圆点和说明同步出现。

Good for

介绍产品界面、网站结构、报表怎么读
要让听众看着真实界面找到具体位置

Avoid when

没有真实截图：不要用示意图冒充
要比较两种状态：用 BeforeAfter
要点超过 5 个：拆成两页

Content limits

1	callouts 3–5 个；x、y 为百分比，点与点至少相隔 8
2	title ≤ 10 字；body ≤ 36 字
3	图片放在 deck 目录下用 import 引入，WebP 优先，单张 ≤ 200 KB
4	ratio 填真实宽高比；url 可选，填了才显示浏览器地址栏

Fields

Field	Type
`kicker` · required	`string`	标题上方的小节名，2–8 字
`title` · required	`string \| string[]`	页面标题；传数组可手动断行，每项一行
`lead`	`string`	一到两句导语，≤ 60 字
`source`	`string`	事实出处；页面上有任何数据或事实时必填
`hint`	`ReactNode`	页眉中间的操作提示，可用 <kbd>
`src` · required	`string`	import 进来的图片
`alt` · required	`string`	图片描述
`ratio`	`number`	宽高比，默认 16/10
`url`	`string`	浏览器地址栏文字
`callouts` · required	`{ x, y, title, body }[]`	编号标注

Example

import entryShot from './assets/shot-kit-entry.webp'

<Screenshot
  kicker="查证"
  title="查一个模板，先看这五处"
  src={entryShot}
  alt="组件库条目页面截图"
  ratio={1600 / 1000}
  url="#/kit"
  callouts={[
    { x: 14, y: 12, title: '切换器', body: '图标、强调色和风格都能切换。' },
    { x: 31, y: 14, title: '模板名称', body: '中文名和组件名并列。' },
    { x: 60, y: 60, title: '实时预览', body: '预览就是真实的一页。' },
  ]}
  source="本项目截图"
/>