# 登录页面测试指南

## 🎯 测试账号（模拟模式）

当前登录页面支持以下测试账号（当 `VITE_USE_MOCK=true` 时）：

| 账号 | 密码 | 角色 | 描述 |
|------|------|------|------|
| `admin@erp.com` | `password123` | `admin` | 系统管理员，拥有所有权限 |
| `user@erp.com` | `user123456` | `user` | 普通用户，基础权限 |
| `test@erp.com` | `test123456` | `test` | 测试用户，受限权限 |

## 🚀 如何使用

### 1. 启动开发服务器
```bash
npm run dev
# 或
yarn dev
```

### 2. 访问登录页面
打开浏览器访问：`http://localhost:5173/login`

### 3. 识别模拟模式
- **页面右上角**显示黄色"模拟模式"标签
- **页脚**显示可用的模拟账号
- **登录过程**为模拟延迟（800ms）

### 4. 登录测试
1. 选择"密码登录"方式
2. 输入任一测试账号和密码
3. 点击"登录"按钮
4. 成功后将跳转到首页 (`/`)

## ⚙️ 环境配置

### 启用/禁用模拟模式
在 `.env.development` 文件中：
```env
# 启用模拟登录（默认）
VITE_USE_MOCK=true

# 禁用模拟登录，使用真实API
VITE_USE_MOCK=false
```

### API配置
```env
# 后端API地址
VITE_API_BASE_URL=http://localhost:8080/api
```

## 🔧 模拟登录实现细节

### 前端模拟逻辑
- **位置**: `src/views/Auth/LoginEnhanced.vue` 中的 `mockLogin()` 函数
- **验证**: 检查账号密码是否匹配预设测试账号
- **用户数据**: 生成模拟用户信息（ID、角色、权限等）
- **状态存储**: 使用 Pinia store + localStorage（模拟记住我）

### 模拟用户权限
| 角色 | 权限 |
|------|------|
| `admin` | `['dashboard', 'goods', 'order', 'system']` |
| `user` | `['dashboard', 'goods']` |
| `test` | `['dashboard']` |

## 🎨 页面功能

### 登录方式
1. **密码登录** - 使用邮箱和密码
2. **短信登录** - 界面已完成，API待实现

### 特色功能
- ✅ 明/暗色主题切换（自动记忆）
- ✅ 响应式设计（支持移动端）
- ✅ 表单实时验证
- ✅ 社交登录（微信、企业微信、钉钉）
- ✅ 记住我功能
- ✅ 协议声明

## 🐛 故障排除

### 常见问题
1. **登录失败**：检查是否输入了正确的测试账号密码
2. **页面样式异常**：确保安装了所有依赖 `npm install`
3. **路由问题**：检查 `src/router/complete-fixed.ts` 和 `complete.ts` 中的路由配置

### 开发建议
- 模拟模式仅用于前端开发和测试
- 对接真实API时，设置 `VITE_USE_MOCK=false`
- 正式环境应使用 `.env.production` 配置文件

## 📁 相关文件
- `src/views/Auth/LoginEnhanced.vue` - 登录页面主文件
- `src/stores/user.ts` - 用户状态管理
- `src/api/auth.ts` - 登录相关API
- `.env.development` - 开发环境配置

---
*最后更新: 2026-03-24*