# AuthMethods 子组件

这个目录包含了 AuthMethods 设置抽屉中使用的所有子组件。每个组件都是独立的、可复用的模块。

## 📁 组件结构

```
components/
├── LoginMethodsList.tsx          # 可复用的登录方法列表组件（带拖拽）
├── EmailSettingsContent.tsx      # Email 认证方法设置内容
├── PhoneSettingsContent.tsx      # Phone 认证方法设置内容
├── DefaultSettingsContent.tsx    # 默认认证方法设置内容
└── index.ts                      # 统一导出
```

## 🧩 组件说明

### 1. LoginMethodsList

可复用的登录方法列表组件，支持拖拽排序和启用/禁用。

**功能：**
- ✅ 拖拽排序登录方法
- ✅ 启用/禁用每个登录方法
- ✅ 实时回调更新

**使用示例：**
```tsx
import { LoginMethodsList, LoginMethod } from './components';

const methods: LoginMethod[] = [
  {
    id: 'password',
    title: 'Password Login',
    description: 'User inputs their password',
    enabled: true,
  },
];

<LoginMethodsList
  methods={methods}
  onMethodsChange={(newMethods) => console.log(newMethods)}
/>
```

**Props：**
- `methods: LoginMethod[]` - 登录方法列表
- `onMethodsChange?: (methods: LoginMethod[]) => void` - 方法变化回调

### 2. EmailSettingsContent

Email 认证方法的设置内容组件。

**功能：**
- ✅ 启用/禁用邮箱注册
- ✅ 选择注册验证方式（验证链接 / 验证码）
- ✅ 管理登录验证方法列表
- ✅ Kiosk 设备提示信息

**使用示例：**
```tsx
import { EmailSettingsContent, EmailSettings } from './components';

<EmailSettingsContent
  onSettingsChange={(settings: EmailSettings) => {
    console.log('Email settings:', settings);
  }}
/>
```

**Props：**
- `onSettingsChange?: (settings: EmailSettings) => void` - 设置变化回调

**返回的设置对象：**
```typescript
interface EmailSettings {
  enableRegistration: boolean;
  verificationType: 'link' | 'code';
  loginMethods: LoginMethod[];
}
```

### 3. PhoneSettingsContent

Phone 认证方法的设置内容组件。

**功能：**
- ✅ 启用/禁用手机号注册
- ✅ SMS 验证说明
- ✅ 配置提示信息

**使用示例：**
```tsx
import { PhoneSettingsContent, PhoneSettings } from './components';

<PhoneSettingsContent
  onSettingsChange={(settings: PhoneSettings) => {
    console.log('Phone settings:', settings);
  }}
/>
```

**Props：**
- `onSettingsChange?: (settings: PhoneSettings) => void` - 设置变化回调

**返回的设置对象：**
```typescript
interface PhoneSettings {
  enableRegistration: boolean;
}
```

### 4. DefaultSettingsContent

默认认证方法的设置内容组件，用于没有特殊配置的认证方法。

**功能：**
- ✅ 启用/禁用认证方法

**使用示例：**
```tsx
import { DefaultSettingsContent, DefaultSettings } from './components';

<DefaultSettingsContent
  method={authMethod}
  onSettingsChange={(settings: DefaultSettings) => {
    console.log('Default settings:', settings);
  }}
/>
```

**Props：**
- `method: AuthMethod` - 当前认证方法对象
- `onSettingsChange?: (settings: DefaultSettings) => void` - 设置变化回调

**返回的设置对象：**
```typescript
interface DefaultSettings {
  enabled: boolean;
}
```

## 🔄 组件交互流程

```
SettingsDrawer (主容器)
    │
    ├─ 根据 method.type 选择内容组件
    │
    ├─ EmailSettingsContent
    │   ├─ 邮箱注册开关
    │   ├─ 验证方式选择
    │   └─ LoginMethodsList (登录方法列表)
    │
    ├─ PhoneSettingsContent
    │   ├─ 手机号注册开关
    │   └─ SMS 验证说明
    │
    └─ DefaultSettingsContent
        └─ 通用启用/禁用开关
```

## 🎨 样式复用

所有子组件都使用父级的 CSS 类名（在 `SettingsDrawer.css` 中定义），确保样式一致性：

- `.settings-section` - 设置区块
- `.settings-section-title` - 区块标题
- `.settings-section-description` - 区块描述
- `.settings-item` - 设置项
- `.settings-item-main` - 设置项主体
- `.settings-item-content` - 设置项内容
- `.settings-item-title` - 设置项标题
- `.settings-item-description` - 设置项描述
- `.verification-radio-group` - 验证方式单选组
- `.verification-option` - 验证方式选项
- `.verification-note` - 验证提示信息
- `.login-methods-list` - 登录方法列表
- `.login-method-item` - 登录方法项
- `.login-method-drag` - 拖拽手柄
- `.login-method-content` - 登录方法内容
- `.login-method-title` - 登录方法标题
- `.login-method-description` - 登录方法描述

## 📦 导出说明

所有组件都通过 `index.ts` 统一导出，方便导入使用：

```tsx
import {
  LoginMethodsList,
  EmailSettingsContent,
  PhoneSettingsContent,
  DefaultSettingsContent,
  // 类型
  LoginMethod,
  EmailSettings,
  PhoneSettings,
  DefaultSettings,
} from './components';
```

## 🔧 扩展指南

### 添加新的认证方法设置

1. **创建新的设置内容组件**
```tsx
// components/CustomSettingsContent.tsx
import React, { useState } from 'react';
import { Switch } from 'antd';

export interface CustomSettings {
  // 定义您的设置结构
  customOption: boolean;
}

const CustomSettingsContent: React.FC<{
  onSettingsChange?: (settings: CustomSettings) => void;
}> = ({ onSettingsChange }) => {
  const [customOption, setCustomOption] = useState(false);

  const handleChange = (checked: boolean) => {
    setCustomOption(checked);
    onSettingsChange?.({ customOption: checked });
  };

  return (
    <div className="settings-section">
      <h3 className="settings-section-title">Custom Settings</h3>
      <div className="settings-item">
        <div className="settings-item-main">
          <Switch checked={customOption} onChange={handleChange} />
          <div className="settings-item-content">
            <div className="settings-item-title">Custom Option</div>
            <div className="settings-item-description">
              Description of custom option
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CustomSettingsContent;
```

2. **在 index.ts 中导出**
```tsx
export { default as CustomSettingsContent } from './CustomSettingsContent';
export type { CustomSettings } from './CustomSettingsContent';
```

3. **在 SettingsDrawer.tsx 中使用**
```tsx
import { CustomSettingsContent } from './components';

// 在 renderContent 方法中添加新的 case
case AuthMethodType.CUSTOM:
  return (
    <CustomSettingsContent
      onSettingsChange={(settings) => {
        handleSettingsChange(settings);
        onSave?.(settings);
      }}
    />
  );
```

## ✨ 优势

1. **模块化** - 每个设置内容都是独立的组件
2. **可复用** - LoginMethodsList 可以在多个地方使用
3. **易维护** - 每个文件职责单一，易于修改和测试
4. **类型安全** - 完整的 TypeScript 类型定义
5. **扩展性** - 轻松添加新的认证方法设置

## 📝 注意事项

1. 所有子组件都依赖父级的样式文件 `SettingsDrawer.css`
2. 设置变化通过回调函数实时传递
3. LoginMethodsList 内部管理自己的状态，但会通过回调通知父组件
4. 每个设置内容组件都是独立的，不依赖其他设置组件

