一个智能的周菜单生成和管理系统，帮助您轻松规划一周的饮食安排。
🤖 本项目完全由 AI 生成，展示了 AI 辅助开发的强大能力
- 智能生成：根据预设规则自动生成一周的午餐和晚餐菜单
- 规则配置：按照 2荤2素1汤的标准生成，确保营养均衡
- 灵活刷新：支持单个菜品刷新，快速替换同类型菜品
- 打印功能：一键打印周菜单，方便查看和分享
- 类型标识：使用 emoji 标识菜品类型（🥦素菜、🍖荤菜、🍲汤）
- CRUD 操作：完整的菜品增删改查功能
- 批量添加：支持批量导入菜品，提高录入效率
- 搜索筛选：支持按菜名搜索和类型筛选
- 分页显示：表格分页功能，轻松浏览大量菜品
- 状态管理：支持设置菜品状态（常规、最近想吃、最近不想吃）
- 导入导出：支持 JSON 格式的菜品数据导入导出
- 最近想吃的菜：快速添加和管理想吃的菜品
- 最近不想吃的菜：标记不想吃的菜品，避免重复生成
- 状态同步：菜品状态实时同步，影响菜单生成规则
- 现代化 UI：基于 shadcn/ui 组件库，界面美观易用
- 响应式设计：适配不同屏幕尺寸
- 交互优化：Tooltip 提示、搜索高亮、操作确认等细节优化
- 固定 Header：弹窗 Header 固定，内容区域滚动
立即体验：https://week-menu-generate.vercel.app/
无需安装，直接在浏览器中体验所有功能！
- Node.js 20+
- pnpm 10+ (推荐) 或 npm/yarn
- 克隆项目
git clone <repository-url>
cd week-menu- 安装依赖
pnpm install
# 或
npm install- 运行开发服务器
pnpm dev
# 或
npm run dev- 访问应用 打开浏览器访问 http://localhost:3000
pnpm build
pnpm startdocker build -t week-menu .docker run -p 3000:3000 week-menudocker run -p 3000:3000 -v $(pwd)/menu.db:/app/menu.db week-menu项目配置了 GitHub Actions，自动构建并推送到 GHCR：
docker pull ghcr.io/<username>/<repository-name>:latest- Next.js 14 - React 全栈框架
- React 18 - UI 库
- TypeScript - 类型安全
- shadcn/ui - 高质量组件库
- Radix UI - 无样式组件基座
- Tailwind CSS - 实用优先的 CSS 框架
- Lucide React - 图标库
- SQLite - 轻量级数据库
- better-sqlite3 - 高性能 SQLite 驱动
- ESLint - 代码检查
- PostCSS - CSS 处理
- pnpm - 快速包管理器
- 点击"生成周菜单"按钮
- 系统自动生成一周的午餐和晚餐菜单
- 菜单按照 2荤2素1汤的标准生成
- 点击"菜品管理"按钮打开管理弹窗
- 添加菜品：点击"添加菜品"按钮，填写菜品信息
- 批量添加：在批量添加文本框中，每行输入一个菜品，格式：
菜名 类型（素/荤/不宜/汤） - 搜索筛选：使用搜索框和类型筛选快速找到目标菜品
- 编辑删除：通过操作菜单编辑或删除菜品
- 导入导出：使用导入导出功能备份和恢复数据
- 添加想吃的菜：在"最近想吃的菜"列表中点击"添加"按钮
- 移除状态：点击菜品右侧的 X 按钮移除状态标记
- 生成周菜单后，点击右上角的"打印"按钮
- 打印时仅显示周菜单表格，自动适配页面
week-menu/
├── app/ # Next.js App Router
│ ├── api/ # API 路由
│ │ ├── dishes/ # 菜品相关 API
│ │ └── menu/ # 菜单相关 API
│ ├── globals.css # 全局样式
│ ├── layout.tsx # 根布局
│ └── page.tsx # 首页
├── components/ # React 组件
│ ├── ui/ # UI 基础组件
│ ├── DishManagement.tsx # 菜品管理组件
│ ├── FavoriteList.tsx # 偏好列表组件
│ └── WeeklyMenu.tsx # 周菜单组件
├── lib/ # 工具库
│ ├── constants.ts # 常量定义
│ ├── db.ts # 数据库配置
│ └── utils.ts # 工具函数
├── Dockerfile # Docker 配置
├── .github/ # GitHub 配置
│ └── workflows/ # GitHub Actions
└── menu.db # SQLite 数据库文件
本项目完全由 AI 辅助生成，展示了现代 AI 工具（如 Cursor、Claude、GPT 等）在软件开发中的强大能力。从项目架构设计到功能实现，从 UI 组件到 API 接口，均由 AI 根据自然语言描述自动生成。
- Cursor - AI 代码编辑器
- Claude/GPT - 代码生成和优化
以下是项目最初接收的 Prompt，展示了如何通过自然语言描述生成完整项目：
点击查看原始 Prompt
## 项目框架与库
使用：nextjs, shacdn components，tailwindcss
### 数据库
选用sqlite
数据库表：
菜表：
- 菜ID
- 菜名
- 类型：素菜，荤菜，不宜多吃，汤
- 状态：常规（默认），最近想吃，最近不想吃
## 布局大概如下
---------------------------
[生成周菜单] [菜品管理]
---------------------------
周菜单表格，菜名旁边有一个裂开的爱心，刷新2个按钮，裂开的爱心将标注这个菜最近不想吃，刷新则再从菜表中随机获取一个同类型的菜
---------------------------
显示最近爱的菜列表与不爱吃的菜列表
菜品管理弹窗布局
----------------------------
菜品管理 [添加][批量添加]
表格列为：菜名、类型、状态、操作
状态列显示为当前状态，支持dropdown修改状态
操作表格 支持编辑、删除
----------------------------
## 周菜单生成规则：
仅生成午餐与晚餐，不宜多吃等于荤菜，按2荤2素1汤标准生成，一周仅可出现一次不宜多吃的菜项目在开发过程中，通过以下 Prompt 逐步完善功能：
-
表格分页和搜索筛选
菜品管理增加下列功能： 表格增加分页 菜名搜索与类型筛选 -
偏好列表优化
最近爱的菜列表与不爱吃的菜列表一直显示 最近爱的菜列表上增加添加爱吃的菜 最近爱的菜列表项右侧添加移除此状态 不爱吃的菜列表项右侧添加移除此状态 -
搜索功能增强
添加最近想吃的菜select 支持输入框搜索 -
UI 优化
周菜单中每个菜项增加emoji代表菜的类型，不宜多吃同等于荤菜，菜名不换行，超出省略，移入弹出tooltip 将周菜单面板宽度设置为页宽 -
打印功能
生成周菜单后，header右侧显示打印按钮，打印时仅显示周菜单，并让表格适配页面，菜表中的菜项边框隐藏掉 -
导入导出
菜单管理增加导入和导出功能 -
UI 重构
菜品管理弹窗header固定，仅body滚动，将添加与编辑另外弹窗 -
容器化部署
写个dockerfile，用nextjs 相关的alpine镜像构建 写个github action将docker推到ghcr上
- ✅ 快速开发：从需求到实现，大幅缩短开发时间
- ✅ 代码质量：AI 生成的代码遵循最佳实践
- ✅ 功能完整：自动处理边界情况和错误处理
- ✅ 文档完善：自动生成注释和文档
- ✅ 持续迭代：通过自然语言快速添加新功能
- 支持多用户
- 菜单历史记录
- 营养信息统计
- 移动端适配优化
- 主题切换功能
本项目采用 MIT 许可证。
感谢以下开源项目的支持：
Made with ❤️ by AI
This project demonstrates the power of AI-assisted development