docs: add register verification UX optimization design
This commit is contained in:
@@ -0,0 +1,81 @@
|
||||
# 注册验证码流程 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 提示错误信息
|
||||
Reference in New Issue
Block a user