## 功能特性 - 🍳 **食谱管理**: 创建、查看、删除食谱，支持食材、份量、准备时间、烹饪步骤 - 🥕 **食材库管理**: 独立食材库，支持新建、编辑、删除；添加食谱时自动补全 - 🛒 **购物车**: 将需要的食谱加入购物车，一键规划膳食 - 📋 **智能购物清单**: 自动聚合所有购物车食谱的食材，相同食材合并数量（如 2 杯面粉 + 1 杯面粉 = 3 杯面粉） - 📦 **导入/导出**: 支持 JSON 格式备份和恢复食谱数据 ### 管理食材库 进入 **Ingredients** 页面，可提前创建常用食材，后续添加食谱时会自动补全。 | 1 | 点击顶部导航 **Ingredients** | — | 进入食材管理页面 | | 2 | 在输入框中输入食材名，点击 **Add** | 输入 `面粉` | 食材出现在下方网格列表中 | | 3 | 再添加几个食材 | `白砂糖`、`黄油`、`鸡蛋` | 列表显示 4 个食材卡片 | | 4 | 点击某食材卡片的 **Edit** 按钮 | 将 `面粉` 改为 `低筋面粉` | 点击 **Save** 后名称更新 | | 5 | 点击某食材卡片的 **Delete** 按钮并确认 | 删除 `白砂糖` | 食材从列表消失 | --- ### 创建食谱 点击顶部导航 **Add Recipe**，创建一道完整的食谱。 | 1 | 点击 **Add Recipe** | — | 进入食谱创建表单 | | 2 | 填写食谱名称 | `巧克力蛋糕` | 名称字段已填入 | | 3 | 填写份量和准备时间 | Servings: `8`, Prep Time: `45` | 可选字段已填入 | | 4 | 输入第一个食材名 | `低筋面粉` | 出现自动补全下拉，选择已有食材 | | 5 | 填写第一个食材数量和单位 | Qty: `2`, Unit: `杯` | 表格行完整 | | 6 | 点击 **+ Add Ingredient**，添加更多食材 | `黄油` / `0.5` / `杯`；`鸡蛋` / `3` / `个` | 共 3 行食材 | | 7 | 输入一个新食材名（不在库中） | `可可粉` | 下拉显示 **+ Add "可可粉"**，点击创建 | | 8 | 填写烹饪步骤（可选） | `将所有材料混合，175°C 烤 30 分钟` | 文本区域已填写 | | 9 | 点击 **Save Recipe** | — | 跳转至食谱列表，显示新创建的卡片 | > 💡 食材名输入时会出现自动补全下拉框，选择已有食材或输入新名称自动创建。 --- ### 创建第二道食谱（测试聚合功能） 重复上述流程，创建另一道使用相同食材的食谱。 | 1 | 点击 **Add Recipe** | — | 进入创建表单 | | 2 | 填写名称 | `香蕉面包` | — | | 3 | 添加食材 | `低筋面粉` / `1.5` / `杯` | 与巧克力蛋糕共用食材 | | 4 | 添加第二个食材 | `鸡蛋` / `2` / `个` | — | | 5 | 保存 | — | 列表显示 2 道食谱 | --- ### 购物车与智能购物清单 | 1 | 在食谱列表点击 **Add to Cart** | 点击 `巧克力蛋糕` 的按钮 | 顶部 Cart 按钮 badge 数字变为 `1` | | 2 | 再添加一道食谱到购物车 | 点击 `香蕉面包` 的按钮 | badge 数字变为 `2` | | 3 | 点击顶部 **Cart** 查看购物车 | — | 显示 2 道食谱卡片 | | 4 | 点击顶部 **Shopping List** | — | 显示聚合购物清单 | | 5 | 验证食材聚合 | — | `低筋面粉` 显示 `3.5 杯`（2 + 1.5），`鸡蛋` 显示 `5 个`（3 + 2） | | 6 | 勾选购买完成的食材 | 勾选 `低筋面粉` | 文字出现删除线效果 | > 💡 这是核心功能：相同食材（同名+同单位）会自动合并数量。 --- ### 查看食谱详情与删除 | 1 | 在食谱列表点击 **View** 按钮 | 点击 `巧克力蛋糕` | 弹窗显示食谱完整信息（名称、食材、步骤） | | 2 | 点击 **Delete** 按钮并确认 | 删除 `香蕉面包` | 食谱从列表消失 | --- ### 导入/导出功能 | 1 | 点击顶部 **Export/Import** | — | 进入导入导出页面 | | 2 | 点击 **Export Recipes** | — | 浏览器下载 `recipes-export-xxxx-xx-xx.json` 文件 | | 3 | 选择导入模式 **Add to existing** | — | 选中 Add 单选按钮 | | 4 | 上传刚导出的 JSON 文件 | 选择下载的文件 | **Import Recipes** 按钮变为可点击 | | 5 | 点击 **Import Recipes** | — | 显示 "Import completed" 提示，跳过重复项 |