FxCaptchaPuzzle 拼图滑块验证
背景画布随机位置抠出拼图缺口，拖动下方滑块把图块平移回缺口对齐。距离差在容差内通过，否则图块归零并提示失败；点击画布换一题。
图片跨域
组件用 canvas getImageData 取像，图片源必须返回 CORS 头（crossOrigin="anonymous"）——picsum 等主流图床可用，无 CORS 的图源会触发画布污染报错。
基础用法
vue
<script setup lang="ts">
import { FxCaptchaPuzzle } from "@fx/components"
const onSuccess = ({ time }) => console.log(`验证通过，用时 ${time}s`)
</script>Attributes
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 通过状态 | boolean | false |
| src | 图片地址（需 CORS） | string | — |
| canvasWidth | 画布宽度（px） | number | 320 |
| canvasHeight | 画布高度（px） | number | 200 |
| squareLength | 切块方形边长（px） | number | 42 |
| circleRadius | 切块圆形半径（px） | number | 10 |
| diffDistance | 通过的允许距离差（px） | number | 3 |
| answerX | 服务端下发的缺口横向坐标（提供时跳过本地随机，答案由服务端留存校验） | number | — |
| server-side | 服务端判定模式：src 为服务端合成缺口图（不本地抠图），松手上报 release 由外部校验驱动 | boolean | false |
| piece-url | 服务端合成的切片图地址（server-side 模式必传，替代本地 canvas 抠图；宽=缺口径、高=画布高，纵向已含缺口位置） | string | — |
| defaultTip | 画布底部默认提示 | string | '拖动滑块完成拼图' |
服务端校验
两种接法：① answer-x 下发答案留存的本地判定（组件内提示通过与否）；② server-side 模式——服务端把缺口直接合成进底图并单独出切片图（src/piece-url 指向动态出图端点），前端不见缺口坐标，松手经 release 事件上报横移距离由服务端复验。生产推荐 ②（答案不出服务端）。
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| success | 验证通过（本地判定模式） | ({ isPassing: boolean, time: string }) |
| release | 松手上报（server-side 模式）：value 为切片横移距离（px） | ({ value: number, time: string }) |
Slots
全部透传给内部滑块基座：text（内容文字）、actionIcon（滑块图标），作用域 { isPassing }。
Expose
| 方法 | 说明 |
|---|---|
| resume | 换一题并复位（重新随机缺口位置、清通过态） |