# 前端功能点测试覆盖表 > 基于 Vue 3 重构后的前端,对照原始 vanilla JS 实现的所有功能点。 ## 测试类型说明 - **unit** = Vitest 单元测试 (纯逻辑,无 DOM) - **e2e** = Cypress E2E 测试 (真实浏览器 + 后端) - **none** = 尚未覆盖 --- ## 1. 配方查询 (RecipeSearch) | 功能点 | 测试 | 文件 | |--------|------|------| | 配方卡片列表渲染 | e2e | recipe-search.cy.js | | 按名称搜索过滤 | e2e | recipe-search.cy.js, search-advanced.cy.js | | 按精油名搜索 | e2e | search-advanced.cy.js | | 清除搜索恢复列表 | e2e | recipe-search.cy.js, search-advanced.cy.js | | 特殊字符搜索不崩溃 | e2e | search-advanced.cy.js | | 快速输入不崩溃 | e2e | search-advanced.cy.js | | 分类轮播 (carousel) | none | — | | 个人配方预览 (登录后) | none | — | | 收藏配方预览 (登录后) | none | — | | 症状搜索 / fuzzy results | none | — | ## 2. 配方详情 (RecipeDetailOverlay) | 功能点 | 测试 | 文件 | |--------|------|------| | 点击卡片弹出详情 | e2e | recipe-detail.cy.js | | 显示配方名称 | e2e | recipe-detail.cy.js | | 显示精油成分和滴数 | e2e | recipe-detail.cy.js | | 显示总成本 (¥) | e2e | recipe-detail.cy.js | | 关闭详情弹层 | e2e | recipe-detail.cy.js | | 收藏星标按钮 | e2e | recipe-detail.cy.js | | 编辑模式切换 (admin) | e2e | recipe-detail.cy.js | | 编辑器显示成分表 | e2e | recipe-detail.cy.js | | 保存按钮 | e2e | recipe-detail.cy.js | | 容量选择 (单次/5ml/10ml/30ml) | none | — | | 稀释比例换算 | none | — | | 应用容量到配方 | none | — | | 标签编辑 | none | — | | 备注编辑 | none | — | | 配方卡片图片生成 (html2canvas) | none | — | | 中英双语卡片 | none | — | | 分享 overlay | none | — | | 品牌水印 | none | — | ## 3. 精油价目 (OilReference) | 功能点 | 测试 | 文件 | |--------|------|------| | 精油列表渲染 | e2e | oil-reference.cy.js | | 按名称搜索 | e2e | oil-reference.cy.js | | 瓶价/滴价切换 | e2e | oil-reference.cy.js | | 精油数据完整性 (价格有效) | e2e | oil-data-integrity.cy.js | | 标准容量验证 | e2e | oil-data-integrity.cy.js | | 稀释比例知识卡 | none | — | | 使用禁忌知识卡 | none | — | | 新增精油 (admin) | e2e | api-crud.cy.js (API层) | | 编辑精油 (admin) | none | — | | 删除精油 (admin) | e2e | api-crud.cy.js (API层) | | 导出 PDF | none | — | ## 4. 管理配方 (RecipeManager) | 功能点 | 测试 | 文件 | |--------|------|------| | 页面加载配方列表 | e2e | manage-recipes.cy.js | | 搜索过滤 | e2e | manage-recipes.cy.js | | 标签筛选 | e2e | manage-recipes.cy.js | | 点击编辑配方 | e2e | manage-recipes.cy.js | | 新增配方 (API) | e2e | api-crud.cy.js | | 更新配方 (API) | e2e | api-crud.cy.js | | 删除配方 (API) | e2e | api-crud.cy.js | | 批量选择 | none | — | | 批量打标签 | none | — | | 批量删除 | none | — | | 批量导出卡片 (zip) | none | — | | Excel 导出 | none | — | | 待审核配方 (admin) | none | — | | 批量采纳配方 (admin) | none | — | | 智能粘贴 → 新增配方 | unit | smartPaste.test.js (解析逻辑) | ## 5. 个人库存 (Inventory) | 功能点 | 测试 | 文件 | |--------|------|------| | 添加精油到库存 (API) | e2e | api-crud.cy.js, inventory-flow.cy.js | | 读取库存 (API) | e2e | api-crud.cy.js, inventory-flow.cy.js | | 删除库存精油 | e2e | inventory-flow.cy.js | | 搜索精油 picker | e2e | inventory-flow.cy.js | | 可做配方推荐 | e2e | inventory-flow.cy.js | ## 6. 商业核算 (Projects) | 功能点 | 测试 | 文件 | |--------|------|------| | 项目列表 | none | — | | 创建/编辑/删除项目 | none | — | | 成分编辑 | none | — | | 定价利润分析 | none | — | | 从配方导入 | none | — | ## 7. 我的 (MyDiary) | 功能点 | 测试 | 文件 | |--------|------|------| | 创建个人配方 (API) | e2e | api-crud.cy.js, diary-flow.cy.js | | 更新个人配方 (API) | e2e | diary-flow.cy.js | | 删除个人配方 (API) | e2e | api-crud.cy.js, diary-flow.cy.js | | 添加使用日记 (API) | e2e | diary-flow.cy.js | | 删除使用日记 (API) | e2e | diary-flow.cy.js | | 日记配方列表 UI | e2e | diary-flow.cy.js | | 智能粘贴到日记 | unit | smartPaste.test.js (解析逻辑) | | 品牌设置 (QR/Logo/背景) | none | — | | 账号设置 (昵称/密码) | none | — | | 商业认证申请 | none | — | ## 8. 操作日志 (AuditLog) | 功能点 | 测试 | 文件 | |--------|------|------| | 读取日志 (API) | e2e | api-crud.cy.js | | 页面渲染 | e2e | admin-flow.cy.js | | 类型筛选 | none | — | | 用户筛选 | none | — | | 撤销操作 | none | — | | 加载更多 | none | — | ## 9. Bug 追踪 (BugTracker) | 功能点 | 测试 | 文件 | |--------|------|------| | 提交 Bug (API) | e2e | api-crud.cy.js, bug-tracker-flow.cy.js | | Bug 列表 (API) | e2e | api-crud.cy.js, bug-tracker-flow.cy.js | | 更新状态 (API) | e2e | bug-tracker-flow.cy.js | | 添加评论 (API) | e2e | bug-tracker-flow.cy.js | | 删除 Bug (API) | e2e | api-crud.cy.js, bug-tracker-flow.cy.js | | 页面渲染 | e2e | admin-flow.cy.js | | 优先级排序 | none | — | | 指派测试人 | none | — | ## 10. 用户管理 (UserManagement) | 功能点 | 测试 | 文件 | |--------|------|------| | 用户列表 (API) | e2e | api-crud.cy.js, user-management-flow.cy.js | | 创建用户 (API) | e2e | user-management-flow.cy.js | | 修改角色 (API) | e2e | user-management-flow.cy.js | | 删除用户 (API) | e2e | user-management-flow.cy.js | | 页面渲染 | e2e | admin-flow.cy.js | | 权限不足拦截 | e2e | api-crud.cy.js | | 翻译建议审核 | none | — | | 商业认证审批 | none | — | ## 11. 认证与权限 | 功能点 | 测试 | 文件 | |--------|------|------| | 未登录显示登录按钮 | e2e | auth-flow.cy.js | | 登录 modal 弹出 | e2e | auth-flow.cy.js | | 登录表单字段 | e2e | auth-flow.cy.js | | 无效登录错误提示 | e2e | auth-flow.cy.js | | Token 认证 | e2e | auth-flow.cy.js, api-health.cy.js | | URL token 自动登录 | e2e | auth-flow.cy.js | | 登出清除状态 | e2e | auth-flow.cy.js | | Admin tab 权限控制 | e2e | admin-flow.cy.js, navigation.cy.js | | 受保护 tab 登录拦截 | e2e | app-load.cy.js | | 注册 | none | — | ## 12. 收藏系统 | 功能点 | 测试 | 文件 | |--------|------|------| | 添加收藏 (API) | e2e | api-crud.cy.js, favorites.cy.js | | 移除收藏 (API) | e2e | api-crud.cy.js, favorites.cy.js | | 卡片星标切换 | e2e | favorites.cy.js | ## 13. 智能粘贴 (Smart Paste) | 功能点 | 测试 | 文件 | |--------|------|------| | 编辑距离计算 | unit | smartPaste.test.js | | 精确匹配精油名 | unit | smartPaste.test.js | | 同音字纠错 (12 组) | unit | smartPaste.test.js | | 子串匹配 | unit | smartPaste.test.js | | 缺字匹配 | unit | smartPaste.test.js | | 编辑距离模糊匹配 | unit | smartPaste.test.js | | 贪心最长匹配 | unit | smartPaste.test.js | | 连写解析 "芳香调理8永久花10" | unit | smartPaste.test.js | | ml → 滴数换算 | unit | smartPaste.test.js | | 单配方解析 | unit | smartPaste.test.js | | 多配方拆分 | unit | smartPaste.test.js | | 去重合并 | unit | smartPaste.test.js | ## 14. 成本计算 | 功能点 | 测试 | 文件 | |--------|------|------| | 单滴价格计算 | unit | oilCalculations.test.js | | 配方成本求和 | unit | oilCalculations.test.js | | 零售价计算 | unit | oilCalculations.test.js | | 前端成本 vs 预期值对比 | e2e | recipe-cost-parity.cy.js | | 价格格式化 (¥ X.XX) | unit | oilCalculations.test.js | | 137 种精油价格有效性 | unit+e2e | oilCalculations.test.js, oil-data-integrity.cy.js | ## 15. 精油翻译 | 功能点 | 测试 | 文件 | |--------|------|------| | 常用精油中→英 | unit | oilTranslation.test.js | | 复方名中→英 | unit | oilTranslation.test.js | | 未知精油返回空 | unit | oilTranslation.test.js | ## 16. 对话框系统 | 功能点 | 测试 | 文件 | |--------|------|------| | Alert 弹出和关闭 | unit | dialog.test.js | | Confirm 返回 true/false | unit | dialog.test.js | | Prompt 返回输入值/null | unit | dialog.test.js | ## 17. 通用 UI | 功能点 | 测试 | 文件 | |--------|------|------| | 首页加载 | e2e | app-load.cy.js | | Header 渲染 | e2e | app-load.cy.js | | 导航 tab 切换 | e2e | navigation.cy.js | | 后退按钮 | e2e | navigation.cy.js | | Tab active 状态 | e2e | navigation.cy.js | | 直接 URL 访问 | e2e | navigation.cy.js | | 手机端渲染 (375px) | e2e | responsive.cy.js | | 平板端渲染 (768px) | e2e | responsive.cy.js | | 宽屏渲染 (1920px) | e2e | responsive.cy.js | | 页面加载 < 5s | e2e | performance.cy.js | | API 响应 < 1s | e2e | performance.cy.js | | 250+ 配方不崩溃 | e2e | performance.cy.js | | Toast 提示 | none | — | | 离线队列 | none | — | | 版本检查 | e2e | api-health.cy.js | ## 18. 通知系统 | 功能点 | 测试 | 文件 | |--------|------|------| | 读取通知 (API) | e2e | api-crud.cy.js | | 全部已读 | none | — | | 通知弹窗 | none | — | --- ## 覆盖统计 | 类型 | 数量 | |------|------| | **功能点总数** | ~120 | | **Vitest unit tests** | 105 | | **Cypress E2E tests** | 167 | | **总测试数** | **272** | | **功能点覆盖率** | **~79%** | ### 未覆盖的高风险功能 以下功能未测试且回归风险较高(按优先级排序): | 优先级 | 功能 | 风险 | 说明 | |--------|------|------|------| | P0 | 容量/稀释换算 | HIGH | 核心数学计算,剂量错误有安全风险 | | P0 | 配方卡片图片生成 | HIGH | html2canvas 外部依赖,异步渲染 | | P0 | 批量操作 | HIGH | 多配方变更,破坏性操作 | | P1 | Excel 导出 | HIGH | ExcelJS 依赖,文件格式兼容性 | | P1 | 品牌图片上传压缩 | HIGH | 文件 I/O,Base64 编码 | | P1 | 商业核算模块 | MED | 整个 Projects 模块 (~15 functions) | | P2 | 分类轮播 | MED | 触摸/滑动事件,动画状态 | | P2 | 审计日志撤销 | MED | 逆向 API 操作,数据一致性 | | P2 | 通知系统 | MED | 状态同步(未读计数) | | P2 | 商业认证审批 | MED | 权限门控功能 | | P3 | 症状搜索 | MED-LOW | 模糊匹配逻辑 | | P3 | 账号设置 | MED-LOW | 密码验证逻辑 | | P3 | 离线队列 | LOW | 数据保护 | ### 覆盖最充分的功能 1. 智能粘贴解析 (unit: 全覆盖,37 tests) 2. 成本计算 (unit + e2e: 全覆盖,21 + 6 tests) 3. API CRUD (e2e: 全覆盖,27 tests) 4. 认证/权限 (e2e: 基本全覆盖,8 tests) 5. 搜索/过滤 (e2e: 充分覆盖,12 tests) 6. 数据完整性 (e2e: 137 oils + 293 recipes 验证) 7. 响应式布局 (e2e: 3 种视口,9 tests) ### 已发现的后端 Bug - `backend/main.py:246-247`: `@app.post("/api/bug-reports/{bug_id}/comment")` 装饰器叠在 `delete_bug` 函数上,导致 POST comment 实际执行删除操作。