一个完整的餐厅扫码点餐 Web 系统，支持多人同桌实时同步点餐、后厨实时接单、管理后台全流程管理。
| 功能 | 说明 |
|---|---|
| 扫码点餐 | 扫描桌台二维码进入点餐页面 |
| 多人同桌 | 同一桌多人可同时点餐，实时同步 |
| 购物车 | 支持增删改数量、添加备注 |
| 订单追踪 | 实时查看订单状态（待制作→制作中→已出餐→已结账） |
| 用户标识 | 随机昵称、颜色气泡，显示谁点了什么菜 |
- 📋 新订单自动推送，高亮提醒
- 🔄 一键切换订单状态
- 📱 支持 PC / 平板 / 手机多端访问
- 🍽️ 菜品管理（增删改、分类、上下架）
- 🪑 桌台管理（生成桌台二维码）
- 📋 订单管理（查看、改状态）
- 📊 今日统计（订单数、营业额、热门菜品）
| 层级 | 技术 |
|---|---|
| 前端框架 | Next.js 14 (App Router) + React 18 + TypeScript |
| 样式 | TailwindCSS |
| 状态管理 | Zustand |
| 实时通信 | Socket.IO |
| 后端框架 | NestJS |
| ORM | TypeORM |
| 数据库 | SQLite |
| 二维码 | qrcode |
webdemo3/
├── frontend/ # Next.js 前端 (端口 3001)
│ ├── src/
│ │ ├── app/ # 页面路由 (App Router)
│ │ │ ├── menu/ # 菜单点餐页
│ │ │ ├── cart/ # 购物车页
│ │ │ ├── order/ # 订单状态页
│ │ │ ├── kitchen/ # 后厨页
│ │ │ └── admin/ # 管理后台
│ │ └── lib/
│ │ ├── api.ts # REST API 客户端
│ │ ├── socket.ts # Socket.IO 客户端
│ │ ├── store.ts # Zustand 购物车状态
│ │ └── cookies.ts # Cookie 工具
│ └── public/ # 静态资源
│
├── backend/ # NestJS 后端 (端口 3000)
│ ├── src/
│ │ ├── entities/ # TypeORM 实体
│ │ │ ├── dish.entity.ts
│ │ │ ├── table.entity.ts
│ │ │ ├── order.entity.ts
│ │ │ └── order-item.entity.ts
│ │ ├── dishes/ # 菜品模块
│ │ ├── tables/ # 桌台模块
│ │ ├── orders/ # 订单模块
│ │ ├── websocket/ # Socket.IO 网关
│ │ └── seed.ts # 数据库初始化脚本
│ └── data/ # SQLite 数据库文件
│
├── package.json # npm workspaces 根配置
└── README.md
- Node.js >= 18
- npm >= 9
npm install（自动通过 workspaces 安装 frontend 和 backend 的依赖，共 ~565 个包）
npm run seed会创建 SQLite 数据库并插入 23 道示例菜品和 10 张桌台。
npm run dev同时启动前后端：
启动后默认监听 0.0.0.0，局域网 IP 可直接访问：
首次访问会分配随机昵称（通过 Cookie 持久化，同一设备再次访问保持相同昵称）
| 页面 | 路径 | 说明 |
|---|---|---|
| 首页 | / |
选择桌台进入 |
| 菜单 | /menu/{tableId} |
点餐页面，支持桌号参数如 /menu/A1 |
| 购物车 | /cart/{tableId} |
确认订单、提交下单 |
| 订单 | /order/{tableId} |
追踪订单状态 |
| 后厨 | /kitchen |
接收新订单、更新制作状态 |
| 管理后台 | /admin |
菜品/桌台/订单管理 |
| 方法 | 路径 | 说明 |
|---|---|---|
| GET | /api/dishes | 菜品列表 |
| POST | /api/dishes | 新增菜品 |
| PUT | /api/dishes/:id | 更新菜品 |
| DELETE | /api/dishes/:id | 删除菜品 |
| PUT | /api/dishes/:id/toggle | 切换上下架 |
| GET | /api/tables | 桌台列表（含二维码） |
| POST | /api/tables | 新增桌台 |
| GET | /api/orders | 订单列表 |
| POST | /api/orders | 创建订单 |
| PUT | /api/orders/:id/status | 更新订单状态 |
| GET | /api/orders/stats | 营业统计 |
| 事件 | 方向 | 说明 |
|---|---|---|
| user:join | 客户端→服务端 | 用户加入桌台 |
| user:left | 服务端→客户端 | 用户离开通知 |
| users:list | 服务端→客户端 | 在线用户列表 |
| cart:add | 双向 | 添加菜品到购物车 |
| cart:update | 双向 | 更新菜品数量 |
| cart:remove | 双向 | 删除购物车菜品 |
| cart:sync | 服务端→客户端 | 全量购物车同步 |
| order:new | 服务端→客户端 | 新订单通知 |
| order:updated | 服务端→客户端 | 订单状态更新 |
前端可选（.env.local）：
NEXT_PUBLIC_API_URL=http://localhost:3000后端端口和 CORS 在 backend/src/main.ts 中配置。
# 构建生产版本
npm run build
# 启动生产服务
npm run start
# 单独启动后端
cd backend && npm run start:prod
# 单独启动前端
cd frontend && npm run build && npm run startMIT