Update README.md

README.md

@@ -1,31 +1,62 @@
 # 一饭封神 🍳
 
-一个基于 AI 的智能菜谱生成平台，让不同菜系的厨艺大师为您量身定制美味佳肴。
+> **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  # 菜谱卡片组件
+│   ├── RecipeCard.vue  # 菜谱卡片组件
+│   └── CookingLoader.vue # 加载动画组件
 ├── config/             # 配置文件
-│   └── cuisines.ts     # 菜系配置
+│   ├── cuisines.ts     # 菜系配置
+│   └── ai.ts          # AI配置
 ├── services/           # 服务层
 │   └── aiService.ts    # AI接口服务
 ├── types/              # 类型定义
@@ -37,7 +68,12 @@ src/
 └── style.css           # 全局样式
 ```
 
-## 快速开始
+## 🛠️ 快速开始
+
+### 环境要求
+
+-   Node.js 18+
+-   npm 或 yarn
 
 ### 安装依赖
 
@@ -57,84 +93,128 @@ npm run dev
 npm run build
 ```
 
-## AI 接口配置
+### 类型检查
+
+```bash
+npm run type-check
+```
+
+## 🤖 AI 配置
 
-项目已配置智谱 AI 接口，开箱即用：
+项目已集成智谱 AI 接口，开箱即用：
 
 ```typescript
 const AI_CONFIG = {
     baseURL: 'https://open.bigmodel.cn/api/paas/v4/',
-    apiKey: 'a835b9f6866d48ec956d341418df8a50.NuhlKYn58EkCb5iP',
+    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 自动部署：
 
-## 使用说明
+```toml
+[build]
+  command = "npm install && npx vite build --config vite.config.prod.ts"
+  publish = "dist"
+
+[build.environment]
+  NODE_VERSION = "18"
+```
 
-1. **输入食材**: 在食材输入框中添加您现有的食材
-2. **选择大师**: 点击选择一个或多个菜系大师
-3. **生成菜谱**: 点击"开始创作美味佳肴"按钮
-4. **查看结果**: 浏览不同大师为您定制的菜谱
+### 手动部署
+
+```bash
+npm run build
+# 将 dist 目录部署到您的服务器
+```
 
-## 开发计划
+## 🚧 开发计划
 
--   [ ] 集成真实 AI 接口
 -   [ ] 添加菜谱收藏功能
--   [ ] 支持菜谱分享
--   [ ] 添加营养分析
+-   [ ] 支持菜谱分享到社交媒体
+-   [ ] 添加营养成分分析
 -   [ ] 支持语音输入食材
--   [ ] 添加购物清单功能
+-   [ ] 添加购物清单生成
+-   [ ] 多语言支持
+-   [ ] 用户账户系统
+-   [ ] 菜谱评分和评论
 
-## 贡献指南
+## 🤝 贡献指南
 
 欢迎提交 Issue 和 Pull Request 来帮助改进项目！
 
-## 许可证
+### 开发规范
+
+-   使用 TypeScript 进行类型安全开发
+-   遵循 Vue 3 Composition API 最佳实践
+-   使用 Tailwind CSS 进行样式开发
+-   保持代码简洁和可读性
+
+## 📄 许可证
 
 MIT License
+
+## 🙏 致谢
+
+-   [Vue.js](https://vuejs.org/) - 渐进式 JavaScript 框架
+-   [Tailwind CSS](https://tailwindcss.com/) - 实用优先的 CSS 框架
+-   [智谱 AI](https://open.bigmodel.cn/) - 提供强大的 AI 能力
+-   [Vite](https://vitejs.dev/) - 下一代前端构建工具
+
+---
+
+**让 AI 厨艺大师为您的食材注入灵魂，创造属于您的美味传奇！** 🍽️✨