前后对比 <BeforeAfter />

两张同尺寸截图叠在一起，中间一条可拖动的分隔线；两角各一个标签，右栏写解读。入场时分隔线从右侧滑到起始位置。

分组: 实证 · 同一画面的两种状态
组件: BeforeAfter · #before-after
交互: 拖动或点击画面移动分隔线；手柄获得焦点后 ← → 微调，不会翻页。

适合

改版前后、优化前后
同一页面在两种条件下的样子：开关 JavaScript、桌面与移动、两个版本

不适合

两张图构图不同：分开放或用 Screenshot
差别要靠文字说明而不是看出来：用 CompareTable

内容上限

1	两张图尺寸和构图必须一致，ratio 填真实宽高比
2	label ≤ 10 字
3	notes 2–3 条：key ≤ 8 字，text ≤ 30 字
4	必须是真实截图，source 写明怎么截的

字段

字段	类型
`kicker` · 必填	`string`	标题上方的小节名，2–8 字
`title` · 必填	`string \| string[]`	页面标题；传数组可手动断行，每项一行
`lead`	`string`	一到两句导语，≤ 60 字
`source`	`string`	事实出处；页面上有任何数据或事实时必填
`hint`	`ReactNode`	页眉中间的操作提示，可用 <kbd>
`before` · 必填	`{ label, src }`	分隔线左侧
`after` · 必填	`{ label, src }`	分隔线右侧
`alt` · 必填	`string`	给读屏软件的描述
`ratio`	`number`	宽高比，默认 16/9
`start`	`number`	分隔线起始位置 0–100，默认 50
`notes`	`{ key, text }[]`	右栏解读

示例代码

import jsOn from './assets/deck-js-on.webp'
import jsOff from './assets/deck-js-off.webp'

<BeforeAfter
  kicker="实测"
  title="同一页，关掉 JavaScript 之后"
  before={{ label: '浏览器 · 执行 JS', src: jsOn }}
  after={{ label: '爬虫 · 不执行 JS', src: jsOff }}
  alt="启用与禁用 JavaScript 时的同一页面"
  source="实测：Playwright 分别启用和禁用 JavaScript 截图"
/>