# Smart Captcha

一个功能强大、易于使用的前端验证码库，支持多种验证码类型，包括图形验证码、滑块验证码和拼图验证码。

## 功能特性

- 🎨 **图形验证码**：支持自定义字符集、干扰线条、干扰点、字体等
- 🎯 **滑块验证码**：简单直观的滑动验证，支持自定义样式和阈值
- 🧩 **拼图验证码**：多种形状的拼图验证，支持自定义背景图片
- 📱 **响应式设计**：适配不同屏幕尺寸
- 🎨 **高度可定制**：支持自定义颜色、尺寸、文字等
- 🔧 **易于集成**：简单的API，快速集成到现有项目
- 📦 **轻量级**：无外部依赖，体积小

## 安装

```bash
npm install smart-captcha
```

## 快速开始

### 引入库

```javascript
import { createCaptcha } from 'smart-captcha';
```

### 1. 图形验证码

创建图形验证码实例，支持自定义字符长度、干扰线条、干扰点等选项。通过调用 `verify()` 方法验证用户输入，`refresh()` 方法刷新验证码。

### 2. 滑块验证码

创建滑块验证码实例，用户通过滑动滑块完成验证。支持自定义滑块样式、轨道颜色和提示文字等选项。

### 3. 拼图验证码

创建拼图验证码实例，用户需要拖动滑块将拼图块移动到正确位置。支持自定义背景图片、拼图形状和尺寸等选项。

## API 文档

### createCaptcha(options)

创建验证码实例的工厂函数。

#### 参数

| 参数 | 类型 | 描述 |
|------|------|------|
| options | CaptchaOptions | 验证码配置选项 |

#### 返回值

验证码实例。

### CaptchaOptions

验证码配置选项的统一接口，根据 `mode` 不同，具体选项不同。

#### 通用事件

| 事件 | 类型 | 描述 |
|------|------|------|
| onSuccess | Function | 验证成功回调 |
| onFail | Function | 验证失败回调 |
| onRefresh | Function | 验证码刷新回调 |
| onTimeout | Function | 验证码超时回调 |

#### 图形验证码选项 (GraphicCaptchaOptions)

| 选项 | 类型 | 默认值 | 描述 |
|------|------|--------|------|
| container | HTMLElement | - | 验证码容器元素 |
| length | number | 4 | 验证码字符长度 |
| lineCount | number | 6 | 干扰线条数 |
| dotCount | number | 20 | 干扰点数 |
| fontSize | number | 20 | 字体大小 |
| chars | string | 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789' | 可选字符集 |
| strictCase | boolean | false | 是否严格校验大小写 |
| refreshOnFail | boolean | false | 验证失败时是否刷新 |
| fonts | string[] | - | 可选字体列表 |
| timeout | number | 60000 | 验证码过期时间（毫秒） |

#### 滑块验证码选项 (SliderCaptchaOptions)

| 选项 | 类型 | 默认值 | 描述 |
|------|------|--------|------|
| container | HTMLElement | - | 验证码容器元素 |
| threshold | number | 0.95 | 成功阈值（百分比） |
| resetOnFail | boolean | true | 验证失败后是否重置 |
| timeout | number | 60000 | 超时时间（毫秒） |
| sliderColor | string | '#409eff' | 滑块颜色 |
| trackColor | string | '#f5f7fa' | 空轨道颜色 |
| textColor | string | '#606266' | 文字颜色 |
| hintText | string | '向右滑动完成验证' | 默认提示文字 |
| successColor | string | '#67c23a' | 成功颜色 |
| failColor | string | '#f35445' | 失败颜色 |
| successText | string | '验证通过' | 成功文字 |
| failText | string | '验证失败，请重试' | 失败文字 |

#### 拼图验证码选项 (PuzzleCaptchaOptions)

| 选项 | 类型 | 默认值 | 描述 |
|------|------|--------|------|
| container | HTMLElement | - | 验证码容器元素 |
| width | number | 300 | 容器宽度 |
| height | number | 200 | 容器高度 |
| puzzleWidth | number | 50 | 拼图块宽度 |
| puzzleHeight | number | 50 | 拼图块高度 |
| backgroundImage | string | string[] | - | 背景图片（单个或数组） |
| shape | 'triangle' | 'square' | 'hexagon' | 'pentagon' | 'star' | 'triangle' | 拼图形状 |
| threshold | number | 5 | 成功阈值 |
| resetOnFail | boolean | true | 失败后是否重置 |
| showAsPopup | boolean | false | 是否作为弹窗显示 |
| textColor | string | '#606266' | 文字颜色 |
| successColor | string | '#67c23a' | 成功颜色 |
| sliderColor | string | '#409eff' | 滑块初始颜色 |
| mismatchColor | string | '#f35248' | 滑块不匹配时的颜色 |
| hintText | string | '拖动滑块完成拼图' | 默认提示文字 |
| failText | string | '验证失败，请重试' | 失败文字 |
| successText | string | '验证通过' | 成功文字 |

### 验证码实例方法

#### 图形验证码实例

| 方法 | 描述 |
|------|------|
| verify(input: string | number): Promise<boolean> | 验证用户输入 |
| refresh(): Promise<void> | 刷新验证码 |
| destroy(): void | 销毁验证码实例 |

#### 滑块验证码实例

| 方法 | 描述 |
|------|------|
| refresh(): void | 刷新验证码 |
| destroy(): void | 销毁验证码实例 |
| getVerified(): boolean | 获取验证状态 |

#### 拼图验证码实例

| 方法 | 描述 |
|------|------|
| refresh(): void | 刷新验证码 |
| destroy(): void | 销毁验证码实例 |

## 浏览器兼容性

- Chrome (推荐)
- Firefox
- Safari
- Edge

## 开发

### 安装依赖

```bash
npm install
```

### 构建

```bash
npm run build
```

### 运行示例

```bash
npm start
```

这将在浏览器中打开测试页面，展示各种验证码的使用示例。

## 示例

查看 `test` 目录下的示例文件：

- `graphic.html` - 图形验证码示例
- `slider.html` - 滑块验证码示例
- `puzzle.html` - 拼图验证码示例

## 许可证

MIT License

## 更新日志

### 1.0.0

- 初始版本
- 支持图形验证码、滑块验证码和拼图验证码
- 支持响应式设计
- 支持高度自定义

## 贡献

欢迎提交 Issue 和 Pull Request！