what-to-eat

一饭封神 🍳

UPLOAD YOUR INGREDIENTS | SPIT OUT RECIPES!

一个基于 AI 的智能菜谱生成平台，采用现代扁平化设计风格，让不同菜系的厨艺大师为您的食材创造美味传奇。

✨ 功能特色

🥬 智能食材识别

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

👨‍🍳 多菜系大师

支持 8 大传统菜系的专业厨艺大师：

• 苏菜 - 清淡鲜美，刀工精细
• 鲁菜 - 咸鲜为主，火候精准
• 川菜 - 麻辣鲜香，变化多端
• 粤菜 - 清淡鲜美，原汁原味
• 浙菜 - 清香淡雅，鲜嫩爽滑
• 湘菜 - 香辣浓郁，口味厚重
• 闽菜 - 鲜香清淡，汤鲜味美
• 徽菜 - 重油重色，醇厚朴实

🎨 自定义要求

• 支持个性化烹饪需求
• 智能理解用户特殊要求
• 如：清淡汤品、减肥餐、儿童营养餐等

📱 现代化界面

• 采用鲜明的黄色系配色方案
• 扁平化设计风格，简洁直观
• 响应式布局，完美适配各种设备
• 分步骤引导，用户体验友好

🚀 技术栈

• 前端框架: Vue 3 + TypeScript
• 样式框架: Tailwind CSS
• 构建工具: Vite
• 路由管理: Vue Router
• HTTP 客户端: Axios
• AI 服务: 智谱 AI GLM-4-Flash

📦 项目结构

src/
├── components/          # 组件目录
│   ├── RecipeCard.vue  # 菜谱卡片组件
│   └── CookingLoader.vue # 加载动画组件
├── config/             # 配置文件
│   ├── cuisines.ts     # 菜系配置
│   └── ai.ts          # AI配置
├── services/           # 服务层
│   └── aiService.ts    # AI接口服务
├── types/              # 类型定义
│   └── index.ts        # 通用类型
├── views/              # 页面组件
│   └── Home.vue        # 主页面
├── App.vue             # 根组件
├── main.ts             # 入口文件
└── style.css           # 全局样式

🛠️ 快速开始

环境要求

• Node.js 18+
• npm 或 yarn

安装依赖

npm install

启动开发服务器

npm run dev

构建生产版本

npm run build

类型检查

npm run type-check

🤖 AI 配置

项目已集成智谱 AI 接口，开箱即用：

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

自定义 AI 服务

如需更换其他 AI 服务，请修改 src/services/aiService.ts 中的配置。

🎯 使用指南

基础使用流程

1. 输入食材 - 在输入框中添加您现有的食材
2. 选择方式 - 选择菜系大师或输入自定义要求
3. 生成菜谱 - 点击"交给大师"或"按要求生成"
4. 查看结果 - 浏览 AI 大师为您定制的菜谱

菜系选择模式

• 可选择一个或多个菜系
• 每个菜系都有独特的烹饪风格和技法
• 支持随机选择菜系

自定义要求模式

• 输入具体的烹饪需求
• 如："做一道清淡的汤，适合老人食用"
• AI 会根据要求生成个性化菜谱

🎨 设计特色

配色方案

• 主背景: 明亮黄色 (#fbbf24)
• 头部区域: 粉色 (#f472b6)
• 步骤标签: 多彩分类（粉色、绿色、蓝色、黑色）
• 卡片区域: 白色背景配黑色边框

交互设计

• 扁平化按钮和卡片
• 2px 黑色边框设计语言
• 悬停和点击动画效果
• 清晰的视觉层次

📱 响应式设计

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

🔧 部署

Netlify 部署

项目已配置 Netlify 自动部署：

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

[build.environment]
  NODE_VERSION = "18"

手动部署

npm run build
# 将 dist 目录部署到您的服务器

🚧 开发计划

• 添加菜谱收藏功能
• 支持菜谱分享到社交媒体
• 添加营养成分分析
• 支持语音输入食材
• 添加购物清单生成
• 多语言支持
• 用户账户系统
• 菜谱评分和评论

🤝 贡献指南

欢迎提交 Issue 和 Pull Request 来帮助改进项目！

开发规范

• 使用 TypeScript 进行类型安全开发
• 遵循 Vue 3 Composition API 最佳实践
• 使用 Tailwind CSS 进行样式开发
• 保持代码简洁和可读性

📄 许可证

MIT License

🙏 致谢

• Vue.js - 渐进式 JavaScript 框架
• Tailwind CSS - 实用优先的 CSS 框架
• 智谱 AI - 提供强大的 AI 能力
• Vite - 下一代前端构建工具

---

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