manta/gofaster/app/TEST_LOGIN.md

GoFaster 登录功能测试指南

🚀 快速开始

1. 启动应用

# 在 app 目录下运行
npm run dev

2. 测试登录弹窗显示

方式一：顶部导航栏登录按钮

• 应用启动后，顶部导航栏右侧会显示"🔐 登录"按钮
• 点击按钮，登录弹窗应该优雅地滑入显示

方式二：首页登录按钮

• 在首页欢迎区域，未登录状态下会显示"立即登录"按钮
• 点击按钮，同样会显示登录弹窗

3. 测试登录弹窗功能

验证码获取

• 弹窗打开时应该自动获取验证码图片
• 如果验证码图片显示失败，会显示"点击获取验证码"的占位符
• 点击验证码区域可以刷新获取新的验证码

表单验证

• 尝试不填写任何信息直接点击登录按钮
• 应该显示"请填写完整的登录信息"错误提示
• 填写部分信息后，登录按钮应该保持禁用状态

登录流程测试

1. 输入测试账号：

   • 用户名：sysadmin
   • 密码：sysadmin@123
   • 验证码：输入图片中显示的4位数字

2. 点击登录按钮：

   • 按钮应该显示"登录中..."状态
   • 显示加载动画（旋转的圆圈）

3. 登录结果：

   • 如果后端服务正常运行，应该显示登录成功提示
   • 如果后端服务未运行，会显示网络连接失败错误

🔧 后端服务要求

必需的后端接口

1. 验证码接口

   GET /api/auth/captcha
   响应格式：
   {
     "captchaImage": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...",
     "captchaID": "abc123"
   }
   

2. 登录接口

   POST /api/auth/login
   请求格式：
   {
     "username": "sysadmin",
     "password": "sysadmin@123",
     "captcha": "1234",
     "captchaId": "abc123"
   }
   
   响应格式：
   {
     "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
     "user": {
       "username": "sysadmin",
       "email": "admin@gofaster.com",
       "avatar": null
     }
   }
   

启动后端服务

# 在 backend 目录下运行
.\gofaster.exe

🎯 测试检查点

✅ 功能检查

• 登录弹窗能正常显示
• 验证码能正常获取和显示
• 表单验证正常工作
• 登录按钮状态正确
• 错误提示信息正确显示
• 登录成功后弹窗关闭
• 用户信息正确更新
• Toast 消息提示正常显示

✅ 样式检查

• 弹窗动画流畅
• 响应式设计正常
• 主题适配正确
• 加载状态指示器正常
• 错误提示样式正确

✅ 交互检查

• 点击遮罩层可以关闭弹窗
• 点击关闭按钮可以关闭弹窗
• 验证码点击可以刷新
• 表单输入响应正常
• 键盘操作支持（Enter 提交）

🐛 常见问题排查

1. 登录弹窗不显示

可能原因：

• 组件导入错误
• 方法名冲突
• 事件绑定失败

排查步骤：

• 检查浏览器控制台是否有错误
• 确认 showLoginModal 方法是否正确注入
• 验证点击事件是否正确绑定

2. 验证码获取失败

可能原因：

• 后端服务未启动
• 网络连接问题
• API 接口路径错误

排查步骤：

• 确认后端服务是否正常运行
• 检查网络请求是否成功
• 验证 API 基础 URL 配置

3. 登录失败

可能原因：

• 用户名或密码错误
• 验证码输入错误
• 后端认证逻辑问题

排查步骤：

• 确认测试账号信息正确
• 检查验证码是否输入正确
• 查看后端日志获取详细错误信息

📱 响应式测试

桌面端测试

• 窗口大小调整时弹窗布局正常
• 不同分辨率下显示效果一致

移动端测试

• 在小屏幕设备上弹窗适配正常
• 触摸操作响应正常
• 虚拟键盘弹出时布局正常

🎨 主题测试

深色主题

• 弹窗在深色主题下显示正常
• 颜色对比度合适

浅色主题

• 弹窗在浅色主题下显示正常
• 文字清晰可读

📝 测试报告模板

测试日期：_________
测试环境：_________
测试人员：_________

## 功能测试结果
- [ ] 登录弹窗显示：□通过 □失败
- [ ] 验证码获取：□通过 □失败  
- [ ] 表单验证：□通过 □失败
- [ ] 登录流程：□通过 □失败
- [ ] 错误处理：□通过 □失败

## 样式测试结果
- [ ] 动画效果：□通过 □失败
- [ ] 响应式设计：□通过 □失败
- [ ] 主题适配：□通过 □失败

## 发现的问题
1. ________________
2. ________________

## 建议改进
1. ________________
2. ________________

## 总体评价
□优秀 □良好 □一般 □需要改进

🎉 成功标准

当您看到以下现象时，说明登录功能已经成功实现：

1. ✅ 点击登录按钮，弹窗优雅滑入
2. ✅ 验证码图片正常显示
3. ✅ 表单验证提示正确
4. ✅ 登录成功后显示欢迎消息
5. ✅ 顶部导航栏显示用户头像
6. ✅ 首页显示个性化欢迎信息
7. ✅ 可以使用所有功能模块

恭喜！您的 GoFaster 应用已经成功集成了完整的用户登录系统！🎊