技术栈

PHP 8.2 + MySQL 8.0 + Vue 3 + GSAP

📖 项目简介

幸福小厨是一个为家庭场景设计的点单系统。不同于外卖平台的复杂流程，它专注于家庭内部的温馨点餐体验：

• 🏠 家人打开页面就能看到今日菜单，点点手机就能下单
• 👨‍👩‍👧‍👦 支持多个家庭成员（爸爸、妈妈、爷爷、奶奶、宝贝）
• 🕐 区分早餐、午餐、晚餐、加餐
• 📋 首页实时展示今日订单，一目了然
• 🔐 管理模式可锁定，管理员密码保护

整体设计采用温暖的橙色调、玻璃拟态卡片和 GSAP 动效，营造"家的味道"。

✨ 功能全景

🏠 首页

🍳 点单页

• 左侧分类导航（早餐/午餐/晚餐/甜品/饮品等）
• 右侧菜品网格，推荐菜品带 ⭐ 标记
• 选择家庭成员 → 选择餐别 → 挑选菜品加入购物车
• 购物车实时汇总，支持增减数量、删除
• 提交订单后自动发送邮件通知（需配置 SMTP）

📋 菜单管理

• 分类管理：新增、编辑、删除（带 emoji 选择器）
• 菜品管理：新增、编辑、删除（名称、价格、描述、推荐、上架）
• 管理模式：密码锁定/解锁（动画弹跳反馈）
• 批量导入：一键导入数十道预设菜品
• 空状态彩蛋：双击触发五彩纸屑 🎊

📅 历史订单

• 按日期筛选订单
• 查看每单详情（点餐人、菜品、数量、总价、备注）

🔐 后台管理面板

独立管理后台 admin/：

• 仪表盘：今日订单数、本月订单数、总菜品数、总分类数、近 7 日趋势
• 订单管理：按日期/状态/成员筛选，确认完成，删除
• 菜品管理：完整 CRUD，推荐标记
• 分类管理：完整 CRUD
• 系统设置：修改密码、SMTP 邮件配置、测试邮件

🎬 动效特色

🧱 技术架构

┌─────────────────────────────────────────────┐
│             浏览器 (Vue 3 SPA)               │
│  index.php + app.js + style.css + GSAP 3.12 │
└──────────────┬──────────────────────────────┘
               │ RESTful JSON API
┌──────────────▼──────────────────────────────┐
│              PHP 8.2 (PDO)                   │
│  api/categories.php  api/items.php           │
│  api/orders.php      api/admin.php           │
│  api/license.php     api/seed.php            │
└──────────────┬──────────────────────────────┘
               │ utf8mb4
┌──────────────▼──────────────────────────────┐
│              MySQL 8.0                       │
│  happy_kitchen 数据库                        │
│  categories / menu_items / orders / order_items│
└─────────────────────────────────────────────┘

前端

• 框架: Vue 3 (CDN 全局构建) — createApp + setup() API
• 动画: GSAP 3.12.5 (CDN) — Timeline, stagger, back.out 缓动
• 样式: 原生 CSS — 玻璃拟态、CSS 变量、emojis 字体栈
• 路由: 无 vue-router，手动 currentView ref 控制视图切换
• HTTP: fetch + AbortController (15 秒超时)

后端

• 语言: PHP 8.2
• 数据库: PDO (MySQL 8.0) — 预处理语句、utf8mb4
• 认证: Session 基础管理员认证、bcrypt 密码哈希
• 邮件: 原生 PHP Socket SMTP 发送（可配置）

安全

• 管理员密码 bcrypt 哈希存储
• 写操作 API 要求管理员 session
• PDO 预处理语句防注入
• Nginx 配置屏蔽 config/ 和 sql/ 目录
• .htaccess 限制直接目录访问

🚀 部署指南

环境要求

方案 A：PHP 内置服务器（开发测试）

# 克隆项目
git clone https://github.com/your-username/happy-order.git
cd happy-order

# 启动开发服务器
php -S 0.0.0.0:8080 -t .

浏览器访问 http://localhost:8080/，自动进入安装向导。

方案 B：Nginx + PHP-FPM（生产推荐）

1. 部署文件

将项目文件上传到服务器目录（如 /var/www/happy-order）。

2. 配置 Nginx

# 复制配置
sudo cp happy-order.nginx.conf /etc/nginx/sites-available/happy-order

# 编辑配置，修改 root 路径
sudo vim /etc/nginx/sites-available/happy-order

# 启用站点
sudo ln -s /etc/nginx/sites-available/happy-order /etc/nginx/sites-enabled/

# 检查并重载
sudo nginx -t && sudo systemctl reload nginx

3. 设置目录权限

sudo chown -R www-data:www-data /var/www/happy-order/config
sudo chmod -R 755 /var/www/happy-order

4. 访问安装向导

浏览器打开 http://your-domain/ 按步骤完成安装。

方案 C：Apache

确保已启用 mod_rewrite，项目自带的 .htaccess 会处理 URL 重写。

🔧 安装向导

首次访问自动跳转 install.php，全程可视化：

Step 1  🏠 环境检测    → PHP 版本、PDO 扩展、目录权限
Step 2  🔌 数据库配置   → 填写 MySQL 连接信息，测试连接
Step 3  ⚙️  自动安装    → 写入配置、建库建表、导入初始菜单
Step 4  🎉 安装完成     → 进入系统

全程无需手动编辑任何文件。

📡 API 文档

所有 API 端点返回 JSON，公共基础路径为 /api/。

通用格式

// 成功
{ "id": 1, "name": "早餐", ... }

// 错误
{ "error": "错误信息" }

菜品 API — api/items.php

订单 API — api/orders.php

创建订单成功后自动发送 SMTP 邮件通知（若已配置）。

管理 API — api/admin.php

通过 ?action= 参数分发：

数据导入 API — api/seed.php

🗄️ 数据库结构

categories — 菜品分类

menu_items — 菜品

orders — 订单

order_items — 订单明细

📁 目录结构

happy-order/
├── index.php                 # SPA 主入口（Vue 3 外壳）
├── install.php               # 安装向导（首次访问自动跳转）
├── diagnose.php              # 系统诊断工具
├── license.php               # 授权激活页面
│
├── config/
│   ├── database.php          # 数据库配置（安装向导生成）
│   ├── admin.php             # 管理员密码哈希（首次登录生成）
│   ├── email.php             # SMTP 邮件配置（后台保存）
│   └── license.php           # 授权信息（激活生成）
│
├── sql/
│   └── schema.sql            # 建表脚本 + 初始数据
│
├── lib/
│   ├── License.php           # 授权验证系统
│   └── Mailer.php            # SMTP 邮件发送
│
├── admin/
│   ├── index.php             # 管理后台仪表盘
│   ├── login.php             # 管理后台登录
│   └── logout.php            # 退出登录
│
├── api/
│   ├── categories.php        # 分类 CRUD
│   ├── items.php             # 菜品 CRUD
│   ├── orders.php            # 订单 CRUD + 邮件通知
│   ├── admin.php             # 管理后台 API
│   ├── license.php           # 授权 API
│   └── seed.php              # 批量导入
│
├── assets/
│   ├── css/
│   │   └── style.css         # 全部样式（玻璃拟态、暖色调）
│   └── js/
│       └── app.js            # Vue 3 + GSAP 动画
│
├── happy-order.nginx.conf    # Nginx 配置模板
├── .htaccess                 # Apache URL 重写
└── .gitignore

📦 依赖

项目无任何后端 Composer 依赖，零外部 PHP 包，开箱即用。

👨‍💻 开发者指南

本地开发

# 启动 PHP 内置服务器
php -S 0.0.0.0:8080 -t .

# 修改 assets/js/app.js 或 assets/css/style.css 后刷新即可
# 修改 API 文件后立即生效，无需编译

前端架构要点

• app.js 是 Vue 3 SPA 全部逻辑所在
• 视图切换通过 currentView ref + v-show 控制
• GSAP 动画统一在 runHomeAnim(), runOrderAnim(), runMenuAnim(), runHistoryAnim() 中
• 所有 API 调用通过 api() 函数封装（自动处理 401、超时、错误提示）
• 减少动效偏好通过 prefersMotion() 函数 + CSS @media (prefers-reduced-motion) 双重保障

后端架构要点

• 数据库连接统一通过 config/database.php 中的 getDB() 工具函数
• JSON 响应通过 jsonExit() 工具函数
• 管理员认证依赖 $_SESSION['admin_logged_in']
• API 层与表现层完全分离（无 HTML 混合输出）

❤️ 设计理念

• 温暖的橙色调 — 主色 #E8833A，搭配米白背景，营造家庭厨房的温馨感
• 玻璃拟态卡片 — backdrop-filter: blur(16px)，柔和通透
• Emoji 贯穿全程 — 分类、按钮、空状态都有对应 emoji，降低认知成本
• GSAP 动画 — 弹性缓动 (back.out) + 交错入场 (stagger)，让界面有"呼吸感"
• 无障碍 — :focus-visible 键盘焦点、aria-label 图标按钮、屏幕减少动效支持

🔐 授权

本项目采用自主授权系统。详细信息请查看 license.php 及 lib/License.php。

📄 说明

本项目发布于个人工作室，供学习交流使用。
感谢使用 ❤️