🎁 一个充满节日氛围的“数字时间胶囊”。在这个下雪的冬夜，给圣诞树挂上你的祝福，静待圣诞节解锁。
Deco 是一个全栈互动的圣诞主题网页应用。用户可以选择精美的图标、上传照片并写下祝福挂在虚拟的圣诞树上。
最有意思的是它的 “时间胶囊” 机制：所有留言在 12月25日 之前都是“封印”状态（内容被加密隐藏），只有到了圣诞节当天，所有的祝福才会自动解封，供大家查阅。
- 🎄 互动圣诞树：点击树梢即可挂上礼物，支持动态增加新树（分页查看）。
- 🔒 时间封印 (Time Lock)：
- 圣诞节前：留言内容被 AES 加密，UI 显示为“封印中”。
- 圣诞节后：自动解密，展示完整祝福和图片。
- 📸 多媒体支持：支持上传图片（最多3张），带有预览和压缩功能。
- 🎨 沉浸式 UI：
- 全屏雪花特效 & 暖色调渐变背景。
- 精美的毛玻璃 (Glassmorphism) 卡片设计。
- 3D 翻转卡片交互（填写面/预览面）。
- 左上角圣诞倒计时（带入场动画）。
- 📱 完美移动端适配：
- 解决 iOS/Android 滚动回弹问题。
- 专注模式：移动端写信时自动隐藏干扰元素。
- 流式布局适配各种尺寸屏幕。
- 🥚 隐藏彩蛋：切换图标时有 2% 概率触发特殊发光图标。
- 前端：Vue 3 (Composition API), Vite, CSS3 (Animations, Grid/Flex)
- 后端：Node.js, Express, Multer (文件上传)
- 数据库：SQLite, Prisma ORM
- 部署：PM2, Caddy (自动 HTTPS), Cloudflare
git clone https://github.com/shmilyty/deco.git
cd deco需要分别安装根目录（前端）和 server 目录（后端）的依赖。
# 安装前端依赖
npm install
# 安装后端依赖
cd server
npm install确保在 server 目录下。
# 生成 Prisma Client
npx prisma generate
# 运行数据库迁移 (创建 dev.db)
npx prisma migrate dev --name init你需要打开两个终端窗口：
-
终端 1 (后端)：
cd server node index.js -
终端 2 (前端)：
# 回到根目录 npm run dev
访问 http://localhost:5173 即可看到效果。
本项目推荐使用 Ubuntu + PM2 + Caddy 进行部署。
确保服务器已安装 Node.js (v20+) 和 PM2。
# 安装 Node.js (Install Node.js)
# Add the NodeSource repository for Node.js 20.x
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
# Update package lists after adding the new repository
sudo apt update
# Install Node.js
sudo apt install -y nodejs
# 安装 PM2 (Install PM2)
sudo npm install -g pm2将代码上传至服务器 /root/deco（示例路径）。
cd /root/deco
npm install
cd server
npm install在 server 目录下创建 .env 文件：
nano .env代码段
# 数据库连接 (SQLite 文件路径)
DATABASE_URL="file:./dev.db"
# 加密密钥 (随便乱打一串复杂的字符，千万别告诉别人)
SECRET_KEY="这里填写一个复杂的随机字符串作为加密密钥"
初始化生产环境数据库：
npx prisma generate
npx prisma migrate deploy后端配置了静态托管 ../dist，所以需要先构建前端。
# 在项目根目录
npm run buildcd server
pm2 start index.js --name "decotree"
# 可选，设置服务器开机自启动
pm2 save
pm2 startup使用 Caddy 处理 HTTPS 和路径转发（假设挂载在 /tree/ 子路径）。
/etc/caddy/Caddyfile:
your-domain.com {
# 如果使用 Cloudflare 源服务器证书
tls /etc/caddy/cert.pem /etc/caddy/key.pem
# 将 /tree/ 路径转发给 Node.js 后端
handle_path /tree/* {
reverse_proxy localhost:3000
}
# 兜底重定向
handle {
redir [https://your-domain.com/tree/](https://your-domain.com/tree/) 301
}
}
重启 Caddy：sudo systemctl reload caddy
Plaintext
deco/
├── dist/ # 前端构建产物 (Vue打包后)
├── public/ # 静态资源 (图标、图片)
├── src/ # 前端源代码
│ ├── components/ # 组件 (ChristmasTree, Card, Countdown...)
│ ├── views/ # 页面 (Home, About)
│ └── ...
├── server/ # 后端源代码
│ ├── prisma/ # 数据库 Schema 和 SQLite 文件
│ ├── uploads/ # 用户上传的图片存储目录
│ ├── index.js # Express 入口文件
│ └── ...
├── vite.config.js # Vite 配置
└── ...
如果你有好的点子（比如UI美化，账号绑定等），欢迎提交 Pull Request！
也欢迎提 Issues！