家庭菜谱与食材管理应用

这是一个旨在解决家庭烹饪中"吃什么、怎么做、缺什么、买什么"等一系列痛点的智能助手。它通过整合菜谱管理、采购待办和冰箱库存三大核心模块，形成一个流畅的烹饪闭环。

功能特性

🍽️ 菜谱库

• 首页/发现页：搜索、分类筛选、菜谱卡片展示
• 菜谱详情页：完整食材清单、烹饪步骤、库存状态联动
• 智能提示：自动检测食材是否齐全，显示缺失数量

📝 待办清单

• 今日菜单：管理计划制作的菜谱，支持完成标记和"开饭"操作
• 采购清单：根据今日菜单自动生成，支持手动添加其他物品
• 库存消耗确认：烹饪完成后智能扣减库存

🧊 冰箱库存

• 库存总览：按分类展示所有食材，实时显示库存数量
• 库存管理：支持添加、编辑、删除食材，标记常备物品和补货提醒
• 一键入库：从采购清单批量添加食材到库存

技术栈

• React 18 - UI框架
• TypeScript - 类型安全
• Vite - 构建工具
• React Router - 路由管理
• Lucide React - 图标库
• LocalStorage - 数据持久化

快速开始

安装依赖

cd food-app
npm install

启动开发服务器

npm run dev

应用将在 http://localhost:5173 启动

构建生产版本

npm run build

构建产物将在 dist 目录中

预览生产构建

npm run preview

项目结构

food-app/
├── src/
│   ├── components/       # 组件
│   │   ├── Layout.tsx    # 布局组件
│   │   └── ConsumptionModal.tsx  # 消耗确认弹窗
│   ├── pages/            # 页面
│   │   ├── RecipeHome.tsx      # 菜谱首页
│   │   ├── RecipeDetail.tsx    # 菜谱详情
│   │   ├── TodoList.tsx        # 待办清单
│   │   └── Inventory.tsx       # 冰箱库存
│   ├── types/            # 类型定义
│   │   └── index.ts
│   ├── utils/            # 工具函数
│   │   ├── storage.ts    # 本地存储管理
│   │   └── helpers.ts    # 业务逻辑辅助函数
│   ├── App.tsx           # 应用入口
│   ├── main.tsx          # 应用启动
│   └── index.css         # 全局样式
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts

核心工作流程

1. 计划：在菜谱库浏览，将想吃的菜加入菜单
2. 采购：在待办模块查看自动生成的采购清单，使用记一笔补充其他物品，然后去购物
3. 入库：购物回来后，将采购的物品通过"一键入库"功能添加到冰箱库存
4. 烹饪：库存充足后，按照菜谱步骤制作
5. 更新：烹饪完成后，通过确认消耗功能，智能扣减冰箱库存

数据存储

所有数据存储在浏览器的 LocalStorage 中，包括：

• 菜谱数据 (family_recipes)
• 食材库存 (family_ingredients)
• 今日菜单 (family_today_menu)
• 采购清单 (family_shopping_list)

示例数据

应用首次运行时会自动初始化示例数据，包括：

• 3个示例菜谱（鸡内金蒸蛋、炒菜饭、干煸杏鲍菇）
• 6种示例食材（生菜、口菇、鸡蛋等）

浏览器支持

支持所有现代浏览器（Chrome、Firefox、Safari、Edge）

开发说明

• 所有数据操作都会自动保存到 LocalStorage
• 模块间通过共享存储实现联动
• 响应式设计，支持移动端和桌面端

许可证

MIT