# 登录系统重构总结

## 重构内容

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

## 新增的 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 状态