FRONTEND_TEST_GUIDE.md

VibeLife 前端功能测试指南

测试准备

测试账号

• 用户名: test_user
• 密码: test123
• 用户ID: u_test_001

启动前端

cd frontend
npm run dev

访问: http://localhost:5173

---

测试检查清单

1. 用户认证

1.1 登录功能

• 访问首页，自动跳转到登录页
• 输入用户名 test_user
• 输入密码 test123
• 点击"登录"按钮
• 成功跳转到Dashboard（首页）

1.2 登出功能

• 点击右上角用户菜单
• 点击"登出"
• 成功返回登录页
• Token被清除（无法直接访问需要认证的页面）

1.3 无效凭证测试

• 输入错误的用户名/密码
• 看到错误提示信息
• 不会跳转

---

2. Dashboard（主页）

2.1 统计卡片

• 看到欢迎卡片（问候语、时钟）
• 看到今日统计数据：
  • 学习时长
  • 完成题目数
  • 新增笔记数
  • 复习错题数
  • 记忆卡复习数

2.2 学习热力图

• 看到GitHub风格热力图
• 悬停显示具体日期的学习时长
• 统计总学习时长和活跃天数

2.3 番茄钟

• 看到番茄钟卡片
• 点击"开始专注"，开始计时（秒表模式）
• 看到"预计休息时间"提示
• 点击"完成"，弹出确认对话框
• 确认后进入休息倒计时
• 点击"结束休息"完成休息
• 看到今日完成次数统计

2.4 音乐播放器

• 看到音乐播放器卡片
• 点击播放按钮开始播放
• 调节音量滑块
• 切换曲目
• 展开曲目列表

2.5 刷题四件套

• 看到4个功能卡片：
  • 智能刷题
  • 错题本
  • 笔记
  • 记忆卡（Anki）
• 点击卡片能正确跳转到对应页面

2.6 继续学习

• 点击"继续学习"按钮
• 跳转到上次学习的位置
• 看到学习内容提示

---

3. 智能刷题

3.1 题目列表

• 进入刷题页面
• 看到题目卡片列表
• 每张卡片显示：
  • 学科标签
  • 题型标签
  • 难度标签
  • 题目内容（题干）
  • 选项（如果是选择题）

3.2 答题功能

• 选择答案（单选/多选）
• 输入答案（填空题）
• 点击"提交答案"
• 看到正确/错误反馈
• 做错时自动提示添加到错题本

3.3 筛选功能

• 按学科筛选（物理/数学/英语）
• 按题型筛选（单选/多选/填空等）
• 按难度筛选（简单/中等/困难）
• 组合筛选

3.4 收藏功能

• 点击"收藏"按钮
• 按钮状态改变（已收藏）
• 再次点击取消收藏

---

4. 错题本

4.1 错题列表

• 进入错题本页面
• 看到所有错题
• 每张卡片显示：
  • 题目内容
  • 你的答案
  • 正确答案
  • 熟练度（0-100）
  • 错误次数
  • 最后错误时间

4.2 错题重做

• 点击"重做"按钮
• 输入新答案
• 提交后看到对错反馈
• 熟练度自动更新

4.3 查看解析

• 点击"查看解析"
• 看到题目解析
• AI生成错误诊断

4.4 添加笔记

• 在错题右侧点击"添加笔记"
• 创建或关联笔记
• 保存后看到关联的笔记

4.5 筛选和搜索

• 按学科筛选错题
• 按熟练度筛选
• 搜索题目内容

---

5. 笔记系统

5.1 文件浏览

• 进入笔记页面
• 看到文件夹树形结构
• 点击文件夹展开/收起
• 看到面包屑导航

5.2 创建笔记

• 点击"新建笔记"
• 输入笔记标题
• 使用Markdown编辑器
• 预览Markdown渲染效果
• 保存笔记
• 看到新建的笔记出现在列表中

5.3 创建文件夹

• 点击"新建文件夹"
• 输入文件夹名称
• 保存后看到新文件夹

5.4 编辑笔记

• 打开已有笔记
• 修改内容
• 保存更改
• 内容更新成功

5.5 标签系统

• 为笔记添加标签
• 按标签筛选笔记
• 点击标签查看所有带该标签的笔记

5.6 双向链接

• 在笔记中输入 [[笔记名]] 创建链接
• 保存后链接自动识别
• 点击链接跳转到对应笔记
• 查看反向链接（谁引用了这篇笔记）

5.7 全文搜索

• 在搜索框输入关键词
• 看到搜索结果
• 结果高亮显示匹配内容
• 按相关度排序

---

6. Anki记忆卡

6.1 记忆卡列表

• 进入记忆卡页面
• 看到所有记忆卡
• 每张卡片显示：
  • 正面（问题）
  • 背面（答案预览）
  • 标签
  • 所属牌组
  • 复习状态（新卡/学习中/已掌握）

6.2 创建记忆卡

• 点击"新建记忆卡"
• 输入正面（问题）
• 输入背面（答案）
• 添加标签
• 选择牌组
• 保存后看到新卡片

6.3 复习模式

• 点击"开始复习"
• 看到待复习的卡片（正面）
• 点击"显示答案"
• 看到背面
• 选择回忆评分：
  • 完全忘记（0）
  • 不记得（1）
  • 困难（2）
  • 一般（3）
  • 容易（4）
  • 非常容易（5）
• 卡片下次复习时间更新
• 继续下一张卡片

6.4 牌组管理

• 看到牌组列表
• 按牌组筛选卡片
• 创建新牌组
• 将卡片移动到不同牌组

6.5 统计数据

• 查看总卡片数
• 查看待复习卡片数
• 查看今日复习数
• 查看平均留存率

6.6 笔记和错题关联

• 从笔记创建记忆卡
• 从错题创建记忆卡
• 看到卡片的来源（笔记ID/错题ID）

---

7. 数据管理

7.1 数据统计

• 进入数据管理页面
• 看到统计数据：
  • 题目总数
  • 笔记数
  • 文件夹数
  • 错题数
  • 记忆卡数

7.2 数据导出

• 点击"导出题库"
• 下载JSON文件
• 点击"导出错题本"
• 点击"导出笔记"
• 点击"导出所有数据"
• 下载ZIP文件（包含所有数据）

7.3 数据导入

• 点击"导入题目"
• 选择JSON文件
• 看到导入进度
• 导入成功提示
• 点击"导入备份"
• 选择ZIP文件
• 所有数据恢复成功

---

8. 工作台

8.1 待办事项

• 进入工作台
• 看到待办列表
• 添加新待办
• 标记待办为完成
• 删除待办
• 设置优先级
• 设置截止日期

8.2 错题备忘录

• 看到错题备忘录区域
• 快速记录错题
• 输入题目ID或描述
• 选择学科
• 保存到备忘录

8.3 番茄钟会话

• 启动番茄钟
• 自动记录学习会话
• 完成任务数统计
• 收集错题数统计

---

9. 响应式设计

9.1 移动端（手机）

• 在手机上访问应用
• 布局自动适应小屏幕
• 导航菜单折叠
• 卡片单列显示
• 触摸操作流畅

9.2 平板（iPad等）

• 在平板上访问应用
• 布局适应中等屏幕
• 卡片可能双列显示
• 侧边栏可收起

9.3 桌面端（大屏）

• 在大屏幕上访问
• 充分利用屏幕空间
• 多列布局
• 悬停效果正常

---

10. 性能测试

10.1 加载速度

• 首屏加载时间 < 3秒
• 页面切换流畅
• 没有明显的卡顿

10.2 大数据量

• 100+题目时，刷题页面流畅
• 100+笔记时，笔记列表流畅
• 100+错题时，错题本流畅
• 100+记忆卡时，记忆卡列表流畅

10.3 并发操作

• 快速连续提交多个答案
• 快速创建多个笔记
• 没有请求丢失或错误

---

11. 错误处理

11.1 网络错误

• 断网情况下操作
• 看到友好的错误提示
• 应用不会崩溃

11.2 服务器错误

• 500错误时显示提示
• 提供重试选项

11.3 表单验证

• 空白表单提交失败
• 格式错误提示
• 必填项提示

---

12. 可访问性

12.1 键盘导航

• Tab键在表单中导航
• Enter键提交表单
• Esc键关闭模态框

12.2 屏幕阅读器

• 图片有alt文本
• 表单有label
• 错误提示可读

---

测试报告模板

测试信息

• 测试人员: ___________
• 测试日期: ___________
• 浏览器: ___________
• 设备: ___________

测试结果

• 总测试数: 124
• 通过: _____
• 失败: _____
• 跳过: _____
• 通过率: _____%

发现的问题

1. ---

2. ---

3. ---

建议和反馈

1. ---

2. ---