4a2f1e7c8a
高优先级优化: - 合并 REVEAL/COMPLETE 状态的重复代码模板 中优先级优化: - 添加防抖函数 (debounce/debounceLeading) 防止按钮重复点击 - 投票控制按钮添加 500ms 防抖 - 抽奖控制按钮添加 500ms 防抖 - 新增 Toast 通知系统替代 alert - 优化 API 错误反馈：loadPrizeConfig、loadParticipants、 importParticipants、savePrizeConfig 现在显示 Toast 错误提示 低优先级优化: - 新增实时奖项统计面板，显示各奖项投票 TOP3 - 添加奖项统计面板响应式样式 - 添加 Toast 动画和样式 其他: - 添加 getAwardDisplayName 辅助函数 - 优化移动端适配
年会互动大屏系统
公司年会互动投票与抽奖系统，采用国潮赤金主题设计，支持 150+ 人高并发实时互动。
功能特性
🎯 节目投票系统
- 7 种奖项类别（最佳创意、最佳视觉、最强气氛等）
- 印章式投票交互，乐观 UI 即时反馈
- 大屏赛马动画实时展示投票热度
- 支持投票撤回与重投
🎰 幸运抽奖系统
- 多轮次抽奖，支持按年龄段/生肖筛选
- Excel 名单导入，自动计算标签
- Pixi.js 粒子动效（待机灯笼、滚动风暴、卷轴揭晓）
- 自动播放抽奖音乐与中奖音效
📱 扫码登录
- PC 端显示二维码
- 手机微信扫码后填写信息
- WebSocket 实时状态同步
🎛️ 导演控制台
- 全流程控制（投票开关、抽奖控制、BGM 播放）
- 实时数据监控
- 抽奖名单导入与管理
- 响应式设计，支持 H5 操作
技术栈
| 层级 | 技术 |
|---|---|
| 前端框架 | Vue 3 + TypeScript + Vite |
| 状态管理 | Pinia |
| UI 组件 | Vant (移动端) |
| 动画引擎 | Pixi.js + GSAP |
| 实时通信 | Socket.io |
| 后端框架 | Express + TypeScript |
| 数据存储 | Redis |
| ORM | Prisma |
| 部署 | Docker + Caddy |
项目结构
company-celebration2/
├── packages/
│ ├── client-screen/ # 大屏端 (Vue 3 + Pixi.js)
│ ├── client-mobile/ # 移动端 H5 (Vue 3 + Vant)
│ ├── server/ # 后端服务 (Express + Socket.io)
│ └── shared/ # 共享类型与常量
├── deploy/ # 部署配置
│ ├── Caddyfile # Caddy 配置
│ └── Dockerfile.caddy # 前端 Docker 镜像
├── docker-compose.yml # Docker Compose 编排
└── DEPLOY.md # 部署指南
快速开始
环境要求
- Node.js >= 20.0.0
- pnpm >= 9.0.0
- Redis 7+
安装依赖
pnpm install
启动开发服务
# 启动所有服务（服务端 + 大屏端 + 移动端）
pnpm dev
# 或分别启动
pnpm dev:server # 后端服务 :3000
pnpm dev:screen # 大屏端 :5173
pnpm dev:mobile # 移动端 :5174
构建生产版本
pnpm build
访问地址
部署
项目支持 Docker 一键部署，使用 Caddy 自动管理 SSL 证书。
# 配置域名
sed -i 's/your-domain.com/你的域名/g' deploy/Caddyfile
# 启动服务
docker-compose up -d --build
详细部署说明请参考 DEPLOY.md。
测试
# 运行单元测试
pnpm test
# 压力测试
pnpm --filter @gala/server test:load
设计规范
配色方案
| 名称 | 色值 | 用途 |
|---|---|---|
| 丹砂红 | #C21F30 |
主色调、背景 |
| 香槟金 | #F0C239 |
强调色、印章、描边 |
视觉风格
- 国潮·赤金 (Guochao Red & Gold)
- 红色磨砂玻璃质感 (Red Glassmorphism)
- 金色极细描边 + 粒子流光
License
Private - 仅供内部使用