what-to-eat

🍳 一饭封神

🚀 Vibe Coding
通过 Kiro 编辑器，实现了从需求分析、架构设计到代码实现的全流程开发。

一个基于 AI 的智能菜谱生成平台，支持中华八大菜系 + 国际料理，提供营养分析、酒水推荐、菜谱效果图生成等全方位烹饪指导。

✨ 核心功能

🥬 智能食材管理

• 支持任意食材组合（最多 10 种）
• 快速选择器 + 手动输入双模式
• 一键添加/删除食材标签

👨‍🍳 多元化料理大师

中华八大菜系：

• 🦐 苏菜 - 江南精致，刀工精细
• 🐟 鲁菜 - 齐鲁豪放，火候精准
• 🌶️ 川菜 - 巴蜀麻辣，变化多端
• 🦆 粤菜 - 岭南鲜美，原汁原味
• 🐠 浙菜 - 江南清雅，鲜嫩爽滑
• 🔥 湘菜 - 湖湘火辣，口味厚重
• 🦀 闽菜 - 八闽海鲜，汤鲜味美
• 🐷 徽菜 - 徽州醇香，重油重色

国际料理：

• � 日式料理 - 和食美学，季节本味
• 🥢 韩式料理 - 发酵智慧，营养均衡
• 🍝 意式料理 - 地中海阳光，简约精致
• 🥖 法式料理 - 高卢优雅，酱汁丰富
• 🍛 印度料理 - 香料王国，层次复杂
• 🌶️ 泰式料理 - 酸甜平衡，香草丰富
• 🌮 墨西哥料理 - 阿兹特克传承，辣椒文化

🎨 双模式生成

• 菜系模式： 选择 1-15 个菜系，每个大师创作独特菜谱
• 自定义模式： 输入个性化需求（如"清淡汤品，适合老人，少盐低脂"）
• 智能随机： 不选择时自动随机选择菜系

🥗 营养分析系统

• 详细营养成分表（卡路里、蛋白质、碳水、脂肪等）
• 1-10 分健康评分系统
• 自动标注饮食特点（高蛋白、低脂、素食等）
• 个性化营养建议和改进方案
• 科学的建议食用份量

� ️ AI 效果图生成

• 一键生成精美菜品效果图
• 基于菜谱内容智能绘制
• 高质量视觉呈现

🍷 酒水搭配推荐

• 专业侍酒师推荐
• 基于菜品特色的完美搭配
• 详细的搭配理由和饮用建议

🍽️ 今天吃什么？

• 每日智能推荐菜谱
• 根据季节和时令食材推荐
• 支持个性化偏好设置
• 一键生成今日菜单

🎨 一桌菜设计

• 智能搭配完整一桌菜
• 包含主菜、配菜、汤品和甜点
• 营养均衡搭配
• 支持多人份量调整

🚀 技术栈

• 前端框架： Vue 3.4 + Composition API
• 开发语言： TypeScript 5.3+
• 样式方案： Tailwind CSS 3.4+
• 构建工具： Vite 5.0+
• AI 服务： DeepSeek Chat API + 智谱 AI GLM-4-Flash
• 部署平台： Netlify 自动化部署

🎯 快速开始

环境要求

• Node.js 18+
• 现代浏览器支持

本地运行

# 克隆项目
git clone https://github.com/liu-ziting/what-to-eat.git
cd what-to-eat

# 安装依赖
npm install

# 配置环境变量
cp .env.example .env
# 编辑 .env 文件，添加你的 AI API 密钥

# 启动开发服务器
npm run dev

访问 http://localhost:5173

环境变量配置

# DeepSeek API 菜谱生成配置
VITE_TEXT_GENERATION_API_KEY=your_deepseek_api_key_here

# Bigmodel API 图像生成配置
VITE_IMAGE_GENERATION_API_KEY=your_image_api_key_here

� 使用指南始

基础流程

1. 添加食材 - 输入你现有的食材（支持快速选择）
2. 选择菜系 - 选择喜欢的菜系大师，或输入自定义要求
3. 交给大师 - 点击生成按钮，AI 开始创作
4. 查看结果 - 浏览专业菜谱，展开查看详细步骤

高级功能

• 营养分析 - 点击获取详细营养信息和健康建议
• 酒水搭配 - 获取专业的酒水搭配推荐
• 效果图生成 - 一键生成精美的菜品效果图
• 时间格式化 - 自动将长时间转换为天+小时+分钟格式

🎨 设计特色

视觉设计

• 配色方案： 明亮黄色主题 + 多彩步骤标签
• 设计语言： 扁平化 + 2px 黑色边框
• 交互动效： 悬停动画 + 展开收起过渡

用户体验

• 响应式布局： 完美适配手机/平板/桌面
• 分步引导： 4 步完成菜谱生成
• 智能提示： 实时显示当前配置状态
• 折叠设计： 自定义要求默认折叠，界面更简洁

📦 项目结构

src/
├── components/           # 组件目录
│   ├── RecipeCard.vue   # 菜谱卡片（含时间格式化）
│   ├── NutritionAnalysis.vue # 营养分析组件
│   └── WinePairing.vue  # 酒水搭配组件
├── config/              # 配置文件
│   ├── cuisines.ts      # 菜系大师配置
│   └── ingredients.ts   # 食材分类配置
├── services/            # 服务层
│   ├── aiService.ts     # AI菜谱生成服务
│   └── imageService.ts  # AI图像生成服务
├── types/               # 类型定义
│   └── index.ts        # 通用类型定义
├── views/               # 页面组件
│   └── Home.vue        # 主页面（左右布局）
└── App.vue             # 根组件

🌟 核心亮点

AI Prompt 工程

• 每个菜系大师都有独特的专业提示词
• 国际菜系强制中文输出，确保用户理解
• 自定义模式支持复杂需求理解

用户体验优化

• 菜系选择支持 3 列网格布局
• 步骤 2 和 3 在 PC 端采用左右布局
• 自定义要求默认折叠，减少界面复杂度
• 移除菜系悬浮弹窗，界面更简洁

功能完整性

• 完整的营养分析系统
• 专业的酒水搭配推荐
• 全方位的菜谱展示（食材、步骤、技巧、营养）

🙏 致谢

• Vue.js - 渐进式 JavaScript 框架
• Tailwind CSS - 实用优先的 CSS 框架
• DeepSeek - 菜谱生成 API 服务支持
• 智谱 AI - 菜品图片生成 API 服务支持

---

🍽️ 让 AI 厨艺大师为你的食材注入灵魂，创造属于你的美味传奇！

一饭封神 - 不只是菜谱，更是烹饪的艺术与科学 ✨