102 lines
2.8 KiB
Markdown
102 lines
2.8 KiB
Markdown
# 登录页面测试指南
|
||
|
||
## 🎯 测试账号（模拟模式）
|
||
|
||
当前登录页面支持以下测试账号（当 `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* |