otp-code-component/readme.md

Google Authenticator 验证组件

# OTP Code Component

Google Authenticator 验证组件，基于 Web Components 实现。

## 安装

```bash
npm install otp-code-component
```

## 使用方法

### React

```typescript
import { defineCustomElements } from 'otp-code-component/loader';

// 注册组件
defineCustomElements();

// 在组件中使用
const AuthPage = () => {
  return (
    <google-auth
      access-token="your-access-token"
      get-qrcode-url="your-qrcode-url"
      verify-code-url="your-verify-code-url"
    />
  );
};
```

### Vue

```typescript
import { defineCustomElements } from 'otp-code-component/loader';

// 注册组件
defineCustomElements();

// 在组件中使用
<template>
  <google-auth
    :access-token="accessToken"
    get-qrcode-url="your-qrcode-url"
    verify-code-url="your-verify-code-url"
  />
</template>
```

## API

### 属性

| 属性名 | 类型 | 必填 | 说明 |
|--------|------|------|------|
| access-token | string | 是 | 访问令牌 |
| get-arcode-url | string | 是 | 获取绑定二维码接口路径 |
| verify-code-url | string | 是 | 校验 code 接口路径 |

### 事件

| 事件名 | 参数 | 说明 |
|--------|------|------|
| authSuccess | { code: number, message: string, data: { is_pass: boolean } } | 验证成功回调 |
| authError | { code: number, message: string } | 验证失败回调 |

## 自定义样式

```css
google-auth {
  --ga-primary-color: #007bff;
  --ga-background-color: #ffffff;
  --ga-text-color: #333333;
  --ga-border-color: #dddddd;
  --ga-error-color: #dc3545;
}
```