159 lines
3.1 KiB
Markdown
159 lines
3.1 KiB
Markdown
# 登录系统重构总结
|
||
|
||
## 重构内容
|
||
|
||
已完全舍弃小程序登录逻辑，使用新的手机号登录/注册系统。
|
||
|
||
## 新增的 API 接口
|
||
|
||
### 1. 发送短信验证码
|
||
```typescript
|
||
userApi.sendSmsCode(mobile: string)
|
||
```
|
||
|
||
### 2. 手机号密码注册
|
||
```typescript
|
||
userApi.mobileRegister({
|
||
mobile: string,
|
||
password: string,
|
||
repassword: string,
|
||
verification_code: string,
|
||
inviter_id?: number
|
||
})
|
||
```
|
||
|
||
### 3. 手机号密码登录
|
||
```typescript
|
||
userApi.mobileLogin({
|
||
mobile: string,
|
||
password: string,
|
||
inviter_id?: number
|
||
})
|
||
```
|
||
|
||
### 4. 忘记密码（重置密码）
|
||
```typescript
|
||
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 状态
|