msh-system/.cursor/plans/tool_module_test_plan_4894ed78.plan.md

---
name: Tool Module Test Plan
overview: Create a comprehensive frontend functional test plan for the WeChat mini-program tool module, covering the hub page (tool_main/index.vue) and all 18 sub-pages under pages/tool/.
todos:
  - id: test-hub
    content: "测试 Tool 首页 (tool_main/index.vue): 数据加载、四宫格导航、推荐内容、登录态"
    status: completed
  - id: test-calculator
    content: "测试食谱计算器流程: calculator.vue 表单校验提交 -> calculator-result.vue 结果展示与采纳"
    status: completed
  - id: test-ai
    content: "测试 AI 营养师: 文字对话、语音输入(ASR)、图片发送、Coze API 集成"
    status: completed
  - id: test-checkin
    content: "测试打卡流程: checkin.vue 积分/连续打卡 -> checkin-publish.vue 发布 -> checkin-detail.vue 详情 -> dietary-records.vue 列表 -> checkin-copy.vue 借鉴"
    status: completed
  - id: test-food
    content: "测试食物百科: food-encyclopedia.vue 搜索/分类/列表 -> food-detail.vue 详情"
    status: completed
  - id: test-knowledge
    content: "测试营养知识: nutrition-knowledge.vue Tab切换/列表 -> nutrient-detail.vue 详情"
    status: completed
  - id: test-community
    content: "测试社区帖子: post-detail.vue 展示/点赞/收藏/评论/关注"
    status: completed
  - id: test-profile
    content: "测试用户与积分: my-profile.vue / points-rules.vue / invite-rewards.vue / welcome-gift.vue"
    status: completed
  - id: test-common
    content: "通用测试: 登录态、网络异常、UI多机型适配、性能、页面标题与返回"
    status: completed
isProject: false
---

# Tool 模块前端功能测试计划

## 一、测试范围

本测试计划覆盖微信小程序 Tool 模块的全部 19 个页面：

- **入口首页**: [pages/tool_main/index.vue](msh_single_uniapp/pages/tool_main/index.vue)
- **子页面 (18个)**: [pages/tool/](msh_single_uniapp/pages/tool/) 目录下全部 `.vue` 文件

### 页面与路由清单


| 页面文件 | 路由路径 | 页面标题 | 分类  |
| ---- | ---- | ---- | --- |


> 注意：Markdown 表格不便渲染，以列表替代：

**食谱计算器**

- `calculator.vue` -> `/pages/tool/calculator` (食谱计算器)
- `calculator-result.vue` -> `/pages/tool/calculator-result` (营养计算结果)

**AI 营养师**

- `ai-nutritionist.vue` -> `/pages/tool/ai-nutritionist` (AI营养师)

**食物百科**

- `food-encyclopedia.vue` -> `/pages/tool/food-encyclopedia` (食物百科)
- `food-detail.vue` -> `/pages/tool/food-detail` (食物详情)

**营养知识**

- `nutrition-knowledge.vue` -> `/pages/tool/nutrition-knowledge` (营养知识)
- `nutrient-detail.vue` -> `/pages/tool/nutrient-detail` (营养素详情)

**饮食打卡**

- `checkin.vue` -> `/pages/tool/checkin` (打卡)
- `checkin-publish.vue` -> `/pages/tool/checkin-publish` (饮食打卡)
- `checkin-detail.vue` -> `/pages/tool/checkin-detail` (打卡详情)
- `checkin-copy.vue` -> `/pages/tool/checkin-copy` (一键借鉴打卡)
- `dietary-records.vue` -> `/pages/tool/dietary-records` (饮食记录)

**社区帖子**

- `post-detail.vue` -> `/pages/tool/post-detail` (帖子详情)

**食谱**

- `recipe-detail.vue` -> `/pages/tool/recipe-detail` (食谱详情)

**用户与积分**

- `my-profile.vue` -> `/pages/tool/my-profile` (我的)
- `points-rules.vue` -> `/pages/tool/points-rules` (积分规则)
- `invite-rewards.vue` -> `/pages/tool/invite-rewards` (邀请有礼)
- `welcome-gift.vue` -> `/pages/tool/welcome-gift` (会员福利)

---

## 二、测试环境与前置条件

- 测试平台：微信开发者工具 + 真机（iOS / Android）
- 网络环境：WiFi 正常网络 + 弱网 (3G) + 断网
- 账号准备：已登录账号 / 未登录访客
- 后端接口：已部署测试环境 API（`tool/*` 全部接口可用）
- 测试数据：至少 1 条已有计算结果、1 条打卡记录、1 条社区帖子

---

## 三、功能测试用例

### 3.1 Tool 首页 (tool_main/index.vue)

**页面加载**

- 页面打开后，并发调用 `getRecommendedRecipes`、`getRecommendedKnowledge`、`getUserHealthStatus` 三个接口，数据正常展示
- 接口返回失败时（单个/全部），页面不白屏，其他模块正常展示
- 弱网环境下 loading 状态正常

**用户信息区域**

- 已登录：显示用户头像、昵称、健康档案状态
- 未登录：显示"请点击登录"，点击触发登录弹窗
- 点击头像跳转到 `/pages/tool/my-profile`
- 点击"打卡"按钮跳转到 `/pages/tool/checkin`

**四宫格工具入口**

- "食谱计算器" 跳转到 `/pages/tool/calculator`
- "AI营养师" 跳转到 `/pages/tool/ai-nutritionist`
- "食物百科" 跳转到 `/pages/tool/food-encyclopedia`
- "营养知识" 跳转到 `/pages/tool/nutrition-knowledge`

**推荐食谱区域**

- 展示 2 条推荐食谱（封面图、标题）
- 点击食谱卡片跳转 `/pages/tool/recipe-detail?id=xxx`
- 点击"更多"显示 toast "食谱列表功能开发中"
- 无数据时不展示该区域 / 展示空态

**健康知识区域**

- 展示 2 条推荐知识（标题、摘要）
- 点击知识条目跳转 `/pages/tool/nutrition-knowledge?id=xxx`
- 点击"更多"跳转 `/pages/tool/nutrition-knowledge`

**推广卡片**

- "慢生活营养专家" 卡片正常展示
- 点击跳转 `/pages/tool/welcome-gift`

---

### 3.2 食谱计算器 (calculator.vue)

**表单输入**

- 性别选择（男/女）单选正常
- 年龄、身高、干体重、血肌酐输入框：只允许数字，限制合理范围
- 透析状态切换（是/否），选"是"后透析类型选项出现
- 透析类型（血液透析/腹膜透析）单选正常
- 所有必填项为空时，点击"开始计算"给出校验提示

**计算提交**

- 填写完整后点击"开始计算"，调用 `calculateNutrition` 接口（`POST tool/calculator/calculate`）
- 接口返回成功后跳转到 `/pages/tool/calculator-result?id=xxx`
- 接口返回失败时 toast 提示错误信息
- 重复点击防抖（按钮 loading 状态）

---

### 3.3 营养计算结果 (calculator-result.vue)

**页面加载**

- 携带 `id` 参数进入，调用 `getCalculatorResult(id)` 获取数据
- Loading 状态展示正常
- 无结果 / id 无效时展示 error 状态

**健康概览 Tab**

- 展示 eGFR 值、体重、BMI、CKD 分期数据卡片
- 营养目标（蛋白质、热量、钠、钾、磷等）正确展示
- 食物份量列表正确展示

**膳食计划 Tab**

- Tab 切换正常（健康概览 / 膳食计划）
- 早餐、午餐、晚餐 三餐方案展示正确
- 每餐菜品名称、份量、图片展示
- 菜品图片加载（含 AI 生成图片、OSS 压缩图片）正常
- 温馨提示区域展示

**操作按钮**

- "采纳方案" 按钮调用 `adoptNutritionPlan(resultId)`（`POST tool/calculator/adopt`）
- 采纳成功后提示并更新状态
- "联系营养师" 按钮跳转 AI 营养师或显示联系方式

---

### 3.4 AI 营养师 (ai-nutritionist.vue)

**对话界面**

- 页面打开后展示推广 banner
- 快捷问题列表展示，点击快捷问题自动发送
- 消息列表（scroll-view）正常滚动，新消息自动滚到底部

**文字对话**

- 输入文字后点击发送按钮，消息气泡出现（用户侧）
- AI 回复消息气泡出现（AI 侧），打字指示器展示
- 使用 Coze API 流程：`cozeChat` -> `cozeRetrieveChat` -> `cozeMessageList`
- 空消息不允许发送

**语音输入**

- 点击麦克风按钮开始录音
- 录音完成后上传语音 (`uploadFile`) 并调用 ASR (`createAsrTask` -> `queryAsrStatus`)
- 语音识别结果转为文字并发送
- 录音授权拒绝时提示用户

**图片发送**

- 点击相机按钮选择/拍照图片
- 图片上传后通过 Coze 接口发送给 AI
- 图片预览功能正常

**异常处理**

- 网络断开时发送消息提示网络错误
- AI 回复超时处理
- 会话 ID 管理正常（多次对话保持上下文）

---

### 3.5 食物百科 (food-encyclopedia.vue)

- 页面加载调用 `getFoodList` 接口，展示食物列表
- 顶部搜索框输入关键词，调用 `searchFood` 接口
- 搜索防抖正常（不会每个字符触发请求）
- 横向分类滑动切换（全部/谷物/蔬菜/水果/肉类/海鲜）
- 切换分类后列表刷新
- 食物卡片展示：图片、名称、安全标签、营养信息
- 点击食物卡片跳转 `/pages/tool/food-detail`
- 列表分页加载（上拉加载更多）
- 空搜索结果展示空态

---

### 3.6 食物详情 (food-detail.vue)

- 页面加载展示食物图片、分类、安全标签
- 关键营养素宫格展示
- 营养成分表完整展示
- "相似食物" 按钮功能
- 分享按钮功能正常

---

### 3.7 营养知识 (nutrition-knowledge.vue)

- Tab 切换：营养素 / 饮食指导 / 文章
- 各 Tab 调用 `getKnowledgeList` 接口（type 参数不同）
- 营养素列表展示，点击跳转 `/pages/tool/nutrient-detail`
- 饮食指导列表展示
- 文章列表展示
- 列表分页（上拉加载更多）
- 携带 `id` 参数进入时自动定位到对应内容

---

### 3.8 营养素详情 (nutrient-detail.vue)

- 页面通过本地营养素数据 map 渲染
- 展示：营养素头部信息、状态卡片、重要性、摄入建议、食物来源、风险提示、建议
- 底部免责声明展示
- 不存在的营养素名称进入时展示空态或提示

---

### 3.9 打卡首页 (checkin.vue)

- 积分展示区域，调用 `getUserPoints` 接口
- 7 日连续打卡圈展示，调用 `getCheckinStreak` 接口
- "积分规则"按钮跳转 `/pages/tool/points-rules`
- "立即打卡"按钮跳转 `/pages/tool/checkin-publish`
- 任务列表展示，调用 `getCheckinTasks` 接口
- 兑换列表展示
- 底部提示 banner 展示

---

### 3.10 饮食打卡发布 (checkin-publish.vue)

**图片上传**

- 点击添加照片，打开相册/相机
- 最多上传 6 张图片
- 图片预览和删除功能
- 图片上传调用 `uploadFile` 接口

**餐次选择**

- 早餐/午餐/晚餐/加餐 选择器正常

**语音备注**

- 录音功能正常（同 AI 营养师）
- 语音识别结果填入备注

**AI 功能开关**

- AI 视频生成开关切换
- 开启后提交时调用 `createImageToVideoTask` 或 `createTextToVideoTask`

**提交**

- 点击"发布"调用 `submitCheckin` 接口（`POST tool/checkin/submit`）
- 提交成功后跳转打卡详情或返回打卡首页
- 无图片时提示必须上传
- 防止重复提交

---

### 3.11 打卡详情 (checkin-detail.vue)

- 携带 `id` 参数进入，调用 `getCheckinDetail(id)`
- 图片轮播（swiper）正常，底部图片计数器
- 餐次标签展示
- 作者信息、积分徽章展示
- 描述文本展示
- AI 营养分析卡片展示
- "分享到社区"按钮功能

---

### 3.12 一键借鉴打卡 (checkin-copy.vue)

- 原始记录卡片展示
- 照片网格选择（可勾选/取消勾选）
- 备注文本编辑
- AI 视频开关
- 取消/确认按钮
- 注意：当前 `loadOriginalRecord` 为 TODO，需确认数据来源是否已接通

---

### 3.13 饮食记录 (dietary-records.vue)

- 自定义导航栏展示（`navigationStyle: "custom"`）
- Tab 切换：全部 / 早餐 / 午餐 / 晚餐
- 调用 `getCheckinList` 接口，切换 Tab 传不同 `mealType`
- 列表项展示：图片、餐次、备注、积分、AI 分析
- 上拉加载更多
- 空态展示（无记录时）
- 下拉刷新

---

### 3.14 社区帖子详情 (post-detail.vue)

**内容展示**

- 调用 `getCommunityDetail(id)` 获取帖子
- 图片轮播、餐次标签、标题、评分、描述、标签展示
- 作者信息区、关注按钮
- 营养统计数据展示
- AI 评论展示

**互动功能**

- 点赞：调用 `toggleLike`，状态切换正常
- 收藏：调用 `toggleCollect`，状态切换正常
- 关注：调用 `toggleFollow`，状态切换正常
- "一键借鉴打卡"按钮跳转 `/pages/tool/checkin-copy`

**评论功能**

- 调用 `getCommentList` 加载评论列表
- 底部输入框发表评论，调用 `addComment`
- 评论成功后列表刷新

**相关帖子**

- 调用 `getCommunityList` 展示相关帖子
- 点击相关帖子跳转对应详情

---

### 3.15 食谱详情 (recipe-detail.vue)

- 封面图展示
- 食谱信息（名称、难度徽章）展示
- 营养团队卡片展示
- 简介文本展示
- 营养数据宫格展示
- 膳食方案（早/午/晚）展示
- 注意事项列表展示
- 温馨提示展示
- 底部操作栏：点赞、收藏、打卡按钮
- 注意：当前 `loadRecipeData` 为 TODO，需确认数据加载是否已接通

---

### 3.16 我的 (my-profile.vue)

- 用户头像、昵称展示
- 统计数据（打卡次数、积分、关注数）展示
- "我的健康" 区域展示
- "我的内容" 区域展示
- "工具与服务" 区域展示
- "设置" 区域展示
- 退出登录按钮功能
- 各导航项跳转正确

---

### 3.17 积分规则 (points-rules.vue)

- 页面为纯静态内容，scroll-view 滚动正常
- 展示区域：赚取规则、使用方式、温馨提示、注意事项
- 文字排版在不同机型上无溢出/截断

---

### 3.18 邀请有礼 (invite-rewards.vue)

- 邀请卡片展示
- 奖励盒子列表展示
- 邀请按钮功能（触发分享或复制链接）
- 海报按钮功能
- 权益说明列表展示
- 邀请步骤展示
- 注意：当前为静态占位数据，确认是否有接口接通

---

### 3.19 会员福利 (welcome-gift.vue)

- 礼品 banner 展示
- 礼品项列表展示
- 二维码展示
- 领取步骤说明
- "添加微信" 按钮功能（复制微信号或打开二维码）
- 免责声明展示

---

## 四、通用测试项（每页必测）

### 4.1 页面基础

- 页面标题正确（与 pages.json 配置一致）
- 返回按钮功能正常
- 页面下拉不出现橡皮筋效果（或符合预期）

### 4.2 登录态

- 未登录访问需登录页面时，弹出登录引导
- 登录后自动返回原页面并刷新数据

### 4.3 网络异常

- 断网时接口请求给出友好提示
- 弱网环境下 loading 态不丢失
- 恢复网络后可重试/刷新

### 4.4 UI 适配

- iPhone SE / iPhone 14 Pro Max / 小屏安卓 / 平板 屏幕适配
- 安全区域（底部 Home Indicator）适配
- 暗色模式适配（如支持）
- 长文本不溢出、不截断

### 4.5 性能

- 页面首屏加载时间 < 2s
- 列表页滚动流畅，无卡顿
- 图片懒加载正常

---

## 五、关键 API 接口清单

以下接口在前端测试中需确认可用：

**首页**

- `GET tool/home/recipes`
- `GET tool/home/knowledge`
- `GET tool/home/health-status`

**食谱计算器**

- `POST tool/calculator/calculate`
- `GET tool/calculator/result/{id}`
- `POST tool/calculator/adopt`

**AI 营养师** (通过 models-api.js)

- Coze 系列接口 (cozeChat / cozeRetrieveChat / cozeMessageList)
- ASR 接口 (createAsrTask / queryAsrStatus)
- 文件上传 (uploadFile)

**打卡**

- `POST tool/checkin/submit`
- `GET tool/checkin/list`
- `GET tool/checkin/detail/{id}`
- `GET tool/checkin/streak`
- `GET tool/checkin/tasks`
- `POST tool/checkin/copy`
- `POST tool/checkin/learn`

**食物百科**

- `GET tool/food/search`
- `GET tool/food/list`
- `GET tool/food/detail/{id}`
- `GET tool/food/similar/{id}`

**营养知识**

- `GET tool/knowledge/list`
- `GET tool/knowledge/detail/{id}`
- `GET tool/knowledge/nutrient/{name}`

**社区**

- `GET tool/community/detail/{id}`
- `GET tool/community/list`
- `POST tool/community/like`
- `POST tool/community/collect`
- `POST tool/community/follow`
- `POST tool/community/comment`
- `GET tool/community/comment/list/{postId}`

**积分**

- `GET tool/points/info`
- `GET tool/points/rules`

**文件上传**

- `POST tool/upload/image`
- `POST tool/upload/voice`

---

## 六、已知待完善项

以下页面有 TODO/未接通功能，测试时需标注为"受限测试"：

- `checkin-copy.vue`: `loadOriginalRecord` 为 TODO，数据加载待实现
- `food-detail.vue`: `loadFoodData` 为空实现，静态数据
- `recipe-detail.vue`: `loadRecipeData` 为 TODO，静态数据
- `tool_main/index.vue`: "食谱列表" 入口仅 toast 提示开发中
- `invite-rewards.vue`: 邀请统计为静态占位数据