# 注册验证码流程 UX 优化设计

**日期**: 2026-02-26
**状态**: 已确认

## 背景

当前注册流程存在问题：
1. 点击"下一步"后界面卡住，等待邮件发送完成才跳转
2. 重发验证码按钮没有倒计时
3. 重发按钮样式不美观，文字挤在一起

## 目标

1. 优化界面响应速度，点击"下一步"立即跳转
2. 添加 60 秒倒计时，倒计时期间禁用重发按钮
3. 优化重发按钮样式

## 设计方案

### 1. 乐观跳转策略

**改动文件**: `apps/lib/features/auth/ui/screens/register_screen.dart`

- 点击"下一步"后，不等待 `submitStep1()` 完成，立即跳转到验证码界面
- `submitStep1()` 在后台执行
- 验证码界面监听发送结果，失败时用 Toast 提示

### 2. 倒计时状态管理

**改动文件**: `apps/lib/features/auth/ui/screens/register_verification_screen.dart`

- 添加 `Timer` 管理倒计时状态
- 初始进入界面时启动 60 秒倒计时
- 重发成功后重置 60 秒倒计时
- 离开界面时取消 Timer

**状态**:
- `countdown`: 当前剩余秒数 (60 → 0)
- `canResend`: 是否可重发 (countdown == 0)

### 3. 重发按钮样式

**改动文件**: `apps/lib/features/auth/ui/screens/register_verification_screen.dart`

**视觉规格**:
- 宽度: 90px
- 高度: 40px
- 圆角: 8px
- 边框: 1px

**两种状态**:

| 状态 | 文字 | 边框颜色 | 文字颜色 | 可点击 |
|------|------|----------|----------|--------|
| 倒计时中 | `"60 s"` / `"59 s"` ... | `AppColors.slate300` | `AppColors.slate400` | 否 |
| 可重发 | `"重新发送"` | `AppColors.primary` | `AppColors.primary` | 是 |

### 4. 错误提示

**改动文件**: `apps/lib/features/auth/ui/screens/register_verification_screen.dart`

- 发送/重发验证码失败时，使用 `Toast.show()` 显示错误提示
- 不阻塞用户操作，用户可再次点击重发

## 实现范围

| 文件 | 改动内容 |
|------|----------|
| `register_screen.dart` | 乐观跳转，后台发送验证码 |
| `register_verification_screen.dart` | Timer 倒计时、按钮样式、Toast 错误提示 |
| `register_cubit.dart` | 添加 `isSending` 状态（可选） |

## 验收标准

1. 点击"下一步"后立即跳转到验证码界面，无卡顿
2. 验证码界面显示 60 秒倒计时按钮
3. 倒计时期间按钮禁用，显示秒数
4. 倒计时结束后按钮可点击，显示"重新发送"
5. 点击重发后重新开始 60 秒倒计时
6. 发送失败时 Toast 提示错误信息