## 实施计划

### 1. 分析当前代码结构

- **PhoneLogin.vue**：手机号登录页面主组件，包含登录卡片和子组件调用
- **PhoneLoginForm.vue**：登录表单组件，包含登录方式切换和表单字段
- **login.js**：包含登录相关的API调用方法，如`sendPhoneCode`和`phoneLoginCode`

### 2. 修改PhoneLoginForm.vue组件

#### 模板部分修改
- **更新登录模式切换**：将现有的三种模式（密码登录、注册、重置密码）改为仅保留登录相关的模式
- **添加密码/验证码登录切换**：在登录模式下，添加一个新的切换开关，允许用户在密码登录和验证码登录之间切换
- **调整表单字段显示**：根据选择的登录方式显示相应的表单字段

#### 脚本部分修改
- **添加登录方式状态**：添加`loginMethod` ref，用于跟踪用户选择的是密码登录还是验证码登录
- **设置默认登录方式**：将默认登录方式设置为验证码登录
- **更新表单验证逻辑**：根据选择的登录方式调整验证规则
- **更新发送验证码逻辑**：发送登录验证码时传递`purpose: 'login'`
- **更新表单提交逻辑**：验证码登录时调用`phoneLoginCode`函数

### 3. 修改PhoneLogin.vue组件

- **更新handleLogin方法**：确保根据登录方式调用正确的登录函数

### 4. 实施细节

#### PhoneLoginForm.vue修改点
- **第155行**：将默认`loginMode`改为'code'
- **第38-70行**：添加密码/验证码登录切换按钮
- **第256-285行**：更新`handleSendCode`方法，确保发送验证码时传递正确的purpose
- **第288-316行**：更新`handleSubmit`方法，处理验证码登录逻辑

#### PhoneLogin.vue修改点
- **第79-81行**：更新`handleLogin`方法，根据登录方式调用正确的登录函数

### 5. 预期行为

- 用户默认看到验证码登录界面
- 用户可以在密码登录和验证码登录之间切换
- 发送登录验证码时，传递`purpose: 'login'`
- 验证码登录调用`phoneLoginCode`函数
- 密码登录保持原有功能不变

### 6. 需要修改的文件

- `d:\work\Aiproject\DeotalandAi\apps\frontend\src\components\auth\PhoneLoginForm.vue`
- `d:\work\Aiproject\DeotalandAi\apps\frontend\src\views\Login\PhoneLogin.vue`