🍳 厨艺 AI Agent - 智能烹饪助手

一个基于 SvelteKit 构建的现代化厨艺 AI 助手应用，帮助用户学习烹饪技巧、管理菜谱知识库，并提供个性化的烹饪建议。

✨ 特性

🤖 智能对话

• 实时 AI 对话界面，支持烹饪问题解答
• 智能菜谱推荐和食材搭配建议
• 语音输入和文件上传支持
• 对话历史记录管理

📚 知识库管理

• 个人烹饪知识库构建
• 支持文档上传（PDF、DOC、TXT、MD）
• 智能分类和标签系统
• 全文搜索和筛选功能

🍽️ 菜谱库

• 精美的菜谱卡片展示
• 按难度、菜系、时间筛选
• 收藏和评分系统
• 详细的制作步骤和食材清单

🎓 学习中心

• 结构化的烹饪课程
• 技能等级和进度追踪
• 成就系统和徽章奖励
• 个性化学习推荐

👤 个人中心

• 用户资料和统计数据
• 活动记录和学习历程
• 技能进度可视化
• 个人偏好设置

🎨 设计特色

现代化 UI

• 玻璃拟态设计：使用 backdrop-filter 和半透明效果
• 渐变色彩：温暖的橙色和粉色主题
• 流畅动画：基于 Anime.js 的丰富动画效果
• 响应式布局：完美适配各种屏幕尺寸

前卫视觉效果

• 浮动背景装饰元素
• 脉冲发光效果
• 悬浮和缩放动画
• 自定义滚动条样式

🛠️ 技术栈

前端框架

• SvelteKit - 现代化全栈框架
• TypeScript - 类型安全的 JavaScript
• Tailwind CSS - 原子化 CSS 框架
• Anime.js - 轻量级动画库

UI 组件

• Lucide Svelte - 现代图标库
• clsx - 条件类名处理
• @tailwindcss/typography - 文字排版插件

开发工具

• Vite - 快速构建工具
• Prettier - 代码格式化
• pnpm - 高效包管理器

🚀 快速开始

环境要求

• Node.js 18+
• pnpm 8+

安装依赖

pnpm install

启动开发服务器

pnpm dev

构建生产版本

pnpm build

预览生产版本

pnpm preview

📱 页面结构

主要页面

• / - 智能对话界面
• /knowledge - 知识库管理
• /recipes - 菜谱库浏览
• /learn - 学习中心
• /profile - 个人中心
• /settings - 设置页面

核心组件

• Sidebar - 侧边栏导航
• ChatInterface - 对话界面
• KnowledgeManager - 知识库管理
• RecipeCard - 菜谱卡片
• CourseCard - 课程卡片

🎯 功能规划

第一阶段 ✅ (已完成)

• 基础 UI 框架搭建
• 响应式布局设计
• 动画效果实现
• 页面路由配置

第二阶段 (计划中)

• 后端 API 集成
• 数据库设计实现
• 用户认证系统
• 文件上传功能

第三阶段 (计划中)

• AI 模型集成
• 向量数据库
• RAG 检索增强
• 实时对话功能

第四阶段 (计划中)

• 移动端优化
• PWA 支持
• 离线功能
• 数据同步

🎨 自定义样式

CSS 变量

:root {
  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.2);
}

自定义类

• .glass - 玻璃拟态效果
• .gradient-text - 渐变文字
• .floating - 浮动动画
• .pulse-glow - 脉冲发光
• .btn-primary - 主要按钮样式

📊 项目结构

sveltekit-pro/
├── src/
│   ├── routes/           # 页面路由
│   │   ├── +layout.svelte
│   │   ├── +page.svelte
│   │   ├── knowledge/
│   │   ├── recipes/
│   │   ├── learn/
│   │   ├── profile/
│   │   └── settings/
│   ├── lib/
│   │   └── components/   # 共享组件
│   │       └── Sidebar.svelte
│   ├── app.css          # 全局样式
│   └── app.html         # HTML 模板
├── static/              # 静态资源
├── package.json         # 项目配置
└── tailwind.config.js   # Tailwind 配置

🤝 贡献指南

欢迎提交 Issue 和 Pull Request！

开发规范

• 使用 TypeScript 编写代码
• 遵循 Prettier 代码格式
• 组件名使用 PascalCase
• 文件名使用 kebab-case

提交规范

• feat: 新功能
• fix: 修复问题
• docs: 文档更新
• style: 样式调整
• refactor: 代码重构

📄 许可证

MIT License - 详见 LICENSE 文件

🙏 致谢

• SvelteKit - 优秀的全栈框架
• Tailwind CSS - 强大的 CSS 框架
• Anime.js - 流畅的动画库
• Lucide - 精美的图标库
• Unsplash - 高质量图片资源

---

Made with ❤️ and 🍳