what-to-eat

🍳 一饭封神

English | 中文

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

🚀 核心功能

• 智能菜谱生成 - 基于食材和菜系偏好生成专业菜谱
• 营养分析 - 详细营养成分分析和健康评分
• AI 效果图 - 一键生成精美菜品图片
• 酒水搭配 - 专业侍酒师推荐
• 酱汁设计 - 定制化调料配方
• 收藏管理 - 保存和管理喜爱的菜谱
• 料理占卜 - 趣味性饮食运势

🛠️ 技术栈

• 前端框架： Vue 3.4 + Composition API + TypeScript 5.3+
• 样式方案： Tailwind CSS 3.4+
• 构建工具： Vite 5.0+
• AI 服务： 零一万物 Yi-Lightning + 智谱 AI CogView-3-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

构建部署

# 类型检查 + 构建
npm run build

# Netlify 构建
npm run build:netlify

# 预览构建结果
npm run preview

环境变量配置

# 文本生成 API（零一万物）
VITE_TEXT_GENERATION_BASE_URL=https://api.lingyiwanwu.com/v1/
VITE_TEXT_GENERATION_API_KEY=your_text_api_key_here
VITE_TEXT_GENERATION_MODEL=yi-lightning

# 图片生成 API（智谱 AI）
VITE_IMAGE_GENERATION_BASE_URL=https://open.bigmodel.cn/api/paas/v4/
VITE_IMAGE_GENERATION_API_KEY=your_image_api_key_here
VITE_IMAGE_GENERATION_MODEL=cogview-3-flash

📁 项目结构

src/
├── components/          # 通用组件
│   ├── ConfirmModal.vue      # 确认对话框
│   ├── CookingLoader.vue     # 烹饪加载动画
│   ├── FavoriteButton.vue    # 收藏按钮
│   ├── GlobalNavigation.vue  # 全局导航
│   ├── RecipeCard.vue        # 菜谱卡片
│   ├── NutritionAnalysis.vue # 营养分析
│   └── ...
├── config/              # 配置文件
│   ├── ai.ts                 # AI 模型配置
│   ├── cuisines.ts           # 菜系配置
│   ├── ingredients.ts        # 食材配置
│   └── ...
├── services/            # 服务层
│   ├── aiService.ts          # AI 接口服务
│   ├── favoriteService.ts    # 收藏服务
│   ├── imageService.ts       # 图片服务
│   └── ...
├── views/               # 页面组件
│   ├── Home.vue              # 首页
│   ├── Favorites.vue         # 收藏页
│   ├── SauceDesign.vue       # 酱汁设计
│   └── ...
├── types/               # TypeScript 类型定义
├── utils/               # 工具函数
└── router/              # 路由配置

🎯 开发指南

添加新菜系

1. 在 src/config/cuisines.ts 中添加菜系配置
2. 为菜系大师编写专业的 AI Prompt
3. 添加对应的图标和描述

扩展功能模块

1. 在 src/views/ 中创建新页面组件
2. 在 src/router/ 中添加路由配置
3. 在导航组件中添加入口

AI 服务集成

• 文本生成：src/services/aiService.ts
• 图片生成：src/services/imageService.ts
• 支持多个 AI 服务商切换

📈 Star History

🙏 致谢

• Vue.js - 渐进式 JavaScript 框架
• Tailwind CSS - 实用优先的 CSS 框架
• 零一万物 - 菜谱生成 API
• 智谱 AI - 图片生成 API