## 实施计划

### 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`