what-to-eat

一饭封神 🍳

UPLOAD YOUR INGREDIENTS | SPIT OUT RECIPES!

一个基于 AI 的智能菜谱生成平台，采用现代扁平化设计风格，让不同菜系的厨艺大师为您的食材创造美味传奇。支持营养分析、效果图生成等全方位烹饪指导。

✨ 功能特色

🥬 智能食材识别

• 支持任意食材组合输入
• 最多可添加 10 种食材
• 一键添加/删除食材标签
• 智能食材搭配建议

👨‍🍳 八大菜系大师

支持中华传统八大菜系的专业厨艺大师：

• 苏菜大师 - 江南水乡的精致美味，清淡鲜美，刀工精细
• 鲁菜大师 - 齐鲁大地的豪放风味，咸鲜为主，火候精准
• 川菜大师 - 巴蜀之地的麻辣传奇，麻辣鲜香，变化多端
• 粤菜大师 - 岭南文化的鲜美诠释，清淡鲜美，原汁原味
• 浙菜大师 - 江南水乡的清雅之味，清香淡雅，鲜嫩爽滑
• 湘菜大师 - 湖湘文化的辣味人生，香辣浓郁，口味厚重
• 闽菜大师 - 八闽大地的海鲜盛宴，鲜香清淡，汤鲜味美
• 徽菜大师 - 徽州文化的朴实醇香，重油重色，醇厚朴实

🎨 双模式生成

• 菜系模式: 选择 1-8 个菜系，每个大师创作独特菜谱
• 自定义模式: 输入个性化需求，AI 智能理解并生成
• 智能随机: 不选择时自动随机选择 2 个菜系

🥗 营养分析功能 ⭐ NEW

• 营养成分: 详细的卡路里、蛋白质、碳水化合物等数据
• 健康评分: 1-10 分的营养健康评分系统
• 饮食标签: 自动识别"高蛋白"、"低脂"、"素食"等特点
• 营养建议: 个性化的营养均衡建议
• 份量指导: 科学的建议食用份量

🖼️ AI 效果图生成

• 一键生成精美菜品效果图
• 基于菜谱内容智能绘制
• 高质量视觉呈现
• 支持图片保存和分享

📱 现代化界面

• 采用鲜明的黄色系配色方案
• 扁平化设计风格，简洁直观
• 响应式布局，完美适配各种设备
• 分步骤引导，用户体验友好
• 卡片式菜谱展示，信息层次清晰

🚀 技术栈

前端技术

• 框架: Vue 3.4+ (Composition API)
• 语言: TypeScript 5.3+
• 样式: Tailwind CSS 3.4+
• 构建: Vite 5.0+
• 路由: Vue Router 4.2+
• 工具: @vueuse/core 10.7+

AI 服务

• 主要: DeepSeek Chat API
• 备用: 智谱 AI GLM-4-Flash
• 图像: AI 图像生成服务
• 营养: 智能营养分析算法

开发工具

• 类型检查: vue-tsc
• 代码质量: ESLint + Prettier
• 包管理: npm/yarn
• 部署: Netlify 自动化部署

📦 项目结构

src/
├── components/              # 组件目录
│   ├── RecipeCard.vue      # 菜谱卡片组件
│   ├── NutritionAnalysis.vue # 营养分析组件 ⭐ NEW
│   └── CookingLoader.vue   # 加载动画组件
├── config/                 # 配置文件
│   └── cuisines.ts         # 八大菜系配置
├── services/               # 服务层
│   ├── aiService.ts        # AI菜谱生成服务
│   └── imageService.ts     # AI图像生成服务
├── types/                  # 类型定义
│   └── index.ts           # 通用类型（含营养分析类型）
├── views/                  # 页面组件
│   └── Home.vue           # 主页面
├── App.vue                # 根组件
├── main.ts               # 入口文件
└── style.css             # 全局样式

🛠️ 快速开始

环境要求

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

安装依赖

npm install

启动开发服务器

npm run dev

访问 http://localhost:5173

构建生产版本

npm run build

类型检查

npm run type-check

预览构建结果

npm run preview

🤖 AI 配置

DeepSeek API 配置

const AI_CONFIG = {
    baseURL: 'https://api.deepseek.com/v1/',
    apiKey: 'sk-your_api_key_here',
    model: 'deepseek-chat',
    temperature: 0.7,
    timeout: 30000
}

智谱 AI 备用配置

const AI_CONFIG_BACKUP = {
    baseURL: 'https://open.bigmodel.cn/api/paas/v4/',
    apiKey: 'your_zhipu_api_key',
    model: 'glm-4-flash-250414',
    temperature: 0.7,
    timeout: 30000
}

环境变量配置

创建 .env 文件：

VITE_AI_API_KEY=your_api_key_here
VITE_AI_BASE_URL=https://api.deepseek.com/v1/

🎯 使用指南

基础使用流程

1. 输入食材 - 在输入框中添加您现有的食材（最多 10 种）
2. 选择方式 - 选择菜系大师或输入自定义要求
3. 生成菜谱 - 点击"交给大师"或"按要求生成"
4. 查看结果 - 浏览 AI 大师为您定制的菜谱
5. 营养分析 - 展开查看详细营养信息和建议 ⭐ NEW
6. 生成效果图 - 点击生成按钮获取菜品效果图

菜系选择模式

• 可选择一个或多个菜系（最多 8 个）
• 每个菜系都有独特的烹饪风格和专业提示词
• 不选择时自动随机选择 2 个菜系
• 支持菜系组合创新

自定义要求模式

• 输入具体的烹饪需求和偏好
• 支持复杂需求：口味、营养、人群、场合等
• 示例："做一道清淡的汤，适合老人食用，少盐低脂"
• AI 智能理解并生成个性化菜谱

营养分析功能 ⭐ NEW

• 营养成分表: 卡路里、蛋白质、碳水、脂肪、纤维等
• 健康评分: 基于营养均衡的 1-10 分评分
• 饮食标签: 自动标注菜品特点（高蛋白、低脂、素食等）
• 营养建议: 个性化的搭配和改进建议
• 份量指导: 科学的建议食用份量

🎨 设计特色

配色方案

• 主背景: 明亮黄色 (#fbbf24) - 温暖食欲感
• 头部区域: 粉色 (#f472b6) - 活力品牌色
• 步骤标签: 多彩分类（粉色、绿色、蓝色、黑色）
• 卡片区域: 白色背景配 2px 黑色边框
• 营养区域: 绿色系 - 健康自然感 ⭐ NEW

交互设计

• 扁平化按钮和卡片设计
• 2px 黑色边框设计语言
• 悬停和点击动画效果
• 清晰的视觉层次和信息架构
• 展开/收起式详情查看

响应式设计

• 移动端: 单列布局，触摸友好的按钮尺寸
• 平板端: 双列菜谱展示，合理利用空间
• 桌面端: 多列布局，充分利用大屏幕空间

🔧 部署配置

Netlify 自动部署

项目已配置 Netlify 自动部署：

[build]
  command = "npm install && npx vite build --config vite.config.prod.ts"
  publish = "dist"

[build.environment]
  NODE_VERSION = "18"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

手动部署

# 构建项目
npm run build

# 部署 dist 目录到您的服务器
# 支持静态托管服务：Netlify、Vercel、GitHub Pages 等

Docker 部署

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "run", "preview"]

🚧 开发计划

已完成 ✅

• 八大菜系 AI 大师系统
• 智能食材输入和管理
• 双模式菜谱生成（菜系/自定义）
• 营养分析功能 ⭐ NEW
• AI 效果图生成
• 响应式现代化界面
• 随机菜系选择优化

开发中 🚧

• 菜谱收藏和历史记录
• 用户偏好学习系统
• 社交分享功能

计划中 📋

• 语音输入食材
• 购物清单自动生成
• 多语言支持（英文、日文）
• 用户账户系统
• 菜谱评分和评论
• 食材营养数据库
• 个性化推荐算法
• 移动端 APP 版本

📄 许可证

MIT License - 详见 LICENSE 文件

🙏 致谢

技术支持

• Vue.js - 渐进式 JavaScript 框架
• Tailwind CSS - 实用优先的 CSS 框架
• Vite - 下一代前端构建工具
• TypeScript - JavaScript 的超集

AI 服务

• DeepSeek - 提供强大的对话 AI 能力
• 智谱 AI - 备用 AI 服务支持

设计灵感

• 中华传统八大菜系文化
• 现代扁平化设计理念
• 用户体验最佳实践

---

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

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