erp-frontend/LOGIN_TESTING.md

登录页面测试指南

🎯 测试账号（模拟模式）

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

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

🚀 如何使用

1. 启动开发服务器

npm run dev
# 或
yarn dev

2. 访问登录页面

打开浏览器访问：http://localhost:5173/login

3. 识别模拟模式

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

4. 登录测试

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

⚙️ 环境配置

启用/禁用模拟模式

在 .env.development 文件中：

# 启用模拟登录（默认）
VITE_USE_MOCK=true

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

API配置

# 后端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