# 实现手机号登录功能

## 需求分析
- 在现有登录系统中添加手机号登录功能
- 支持两种登录方式：
  1. 手机号+验证码直接登录
  2. 手机号+验证码+密码注册密码登录

## 实现方案

### 1. 创建手机号登录页面组件
- 创建 `PhoneLogin.vue` 页面组件，位于 `apps/frontend/src/views/Login/`
- 实现手机号登录表单，包括：
  - 手机号输入框
  - 验证码输入框和获取验证码按钮
  - 密码输入框（可选，用于注册密码登录）
  - 登录/注册按钮

### 2. 配置路由
- 在 `apps/frontend/src/router/index.js` 中添加手机号登录路由
- 路径：`/login/phone`
- 名称：`phone-login`

### 3. 修改主登录页面
- 在 `Login.vue` 中添加跳转到手机号登录的链接
- 位置：在忘记密码和注册链接附近

### 4. 实现手机号登录表单组件
- 创建 `PhoneLoginForm.vue` 组件，位于 `apps/frontend/src/components/auth/`
- 实现表单验证逻辑：
  - 手机号格式验证
  - 验证码格式验证
  - 密码格式验证（当选择注册密码登录时）
- 实现获取验证码功能：
  - 倒计时功能
  - 防重复发送机制

### 5. 实现登录逻辑
- 在 `login.js` 中添加手机号登录相关方法
- 实现验证码发送API调用
- 实现手机号+验证码登录API调用
- 实现手机号+验证码+密码注册密码登录API调用

### 6. 国际化支持
- 在国际化文件中添加手机号登录相关的文本
- 支持中英文切换

### 7. 样式适配
- 确保手机号登录页面与现有登录页面样式保持一致
- 支持响应式设计
- 支持暗色主题

## 实现步骤

1. 创建 `PhoneLogin.vue` 页面组件
2. 创建 `PhoneLoginForm.vue` 表单组件
3. 配置手机号登录路由
4. 修改主登录页面添加跳转链接
5. 实现表单验证和获取验证码功能
6. 实现登录逻辑
7. 添加国际化支持
8. 测试功能完整性

## 预期效果
- 用户可以在登录页面选择手机号登录方式
- 手机号登录页面支持两种登录模式
- 表单验证逻辑完整
- 界面样式与现有系统保持一致
- 支持国际化和暗色主题

## 技术要点
- Vue 3 Composition API
- Vue Router 4
- Element Plus UI组件库
- Vue I18n国际化
- 表单验证（使用Vuelidate）
- 响应式设计
- 暗色主题支持