----/前端源码/uni-app/LOGIN-REFACTOR.md

登录系统重构总结

重构内容

已完全舍弃小程序登录逻辑，使用新的手机号登录/注册系统。

新增的 API 接口

1. 发送短信验证码

userApi.sendSmsCode(mobile: string)

2. 手机号密码注册

userApi.mobileRegister({
  mobile: string,
  password: string,
  repassword: string,
  verification_code: string,
  inviter_id?: number
})

3. 手机号密码登录

userApi.mobileLogin({
  mobile: string,
  password: string,
  inviter_id?: number
})

4. 忘记密码（重置密码）

userApi.forgotPassword({
  mobile: string,
  password: string,
  repassword: string,
  verification_code: string
})

新登录页面功能

1. 三个标签页

• 登录：手机号 + 密码登录
• 注册：手机号 + 验证码 + 密码注册
• 忘记密码：手机号 + 验证码 + 新密码重置

2. 表单验证

• 手机号格式验证（1开头的11位数字）
• 密码长度验证（6-20位）
• 两次密码一致性验证
• 验证码长度验证（6位）

3. 验证码功能

• 60秒倒计时
• 防重复发送
• 自动禁用按钮

4. 密码显示/隐藏

• 点击眼睛图标切换密码可见性
• 支持所有密码输入框

5. 样式设计

• 与首页风格一致
• 使用宋体字体
• 古典中国风配色（#8b2323 主色调）
• 米纸纹理背景
• 圆润的卡片设计
• 流畅的动画效果

页面结构

pages/login/login.vue (容器页面)
  └── components/screens/Login.vue (登录组件)

使用流程

新用户注册

1. 点击"注册"标签
2. 输入手机号
3. 点击"获取验证码"
4. 输入收到的验证码
5. 设置密码并确认
6. 点击"注册"按钮
7. 自动登录并跳转

老用户登录

1. 默认在"登录"标签
2. 输入手机号和密码
3. 点击"登录"按钮
4. 自动跳转到首页

忘记密码

1. 点击"忘记密码？"
2. 输入手机号
3. 点击"获取验证码"
4. 输入验证码
5. 设置新密码并确认
6. 点击"重置密码"
7. 自动登录并跳转

技术特点

1. 响应式设计

• 最大宽度 500px
• 居中显示
• 适配各种屏幕尺寸

2. 用户体验

• 实时表单验证
• 按钮禁用状态
• 加载状态提示
• 错误提示
• 成功提示

3. 安全性

• 密码加密传输
• 验证码验证
• 防重复提交
• Token 认证

4. 代码质量

• TypeScript 类型安全
• 组件化设计
• 清晰的代码结构
• 完善的错误处理

样式特色

• 背景：米纸纹理 + 旋转渐变
• 主色：#8b2323（中国红）
• 字体：SimSun, Songti SC（宋体）
• 圆角：16px（卡片）、8px（输入框）、24px（按钮）
• 阴影：柔和的投影效果
• 动画：旋转背景、按钮点击效果

测试建议

1. 测试注册流程
2. 测试登录流程
3. 测试忘记密码流程
4. 测试表单验证
5. 测试验证码倒计时
6. 测试错误处理
7. 测试响应式布局

注意事项

1. 需要后端支持短信验证码发送
2. 验证码有效期由后端控制
3. 密码强度建议由后端验证
4. Token 过期处理已在 request.ts 中实现
5. 所有 API 调用都有 loading 状态