social-app/docs/plans/2026-02-26-register-verification-ux-design.md

注册验证码流程 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 提示错误信息