empty 5c5d0ad85c feat: 优化100人并发投票支持 + 修复奖项名称硬编码问题
服务端优化:
- Socket.IO 配置优化,支持高并发 WebSocket 连接
- 添加 connectTimeout、perMessageDeflate 等参数

压测脚本:
- 新增 vote-real-scenario.yaml 真实场景压测配置
- 支持 100人瞬间爆发、每人7票、不同投票速度模拟
- 添加随机延迟函数模拟真实用户行为
- 强制 WebSocket 传输避免 HTTP 连接限制

前端修复:
- 修复 PostcardItem、PostcardDisplay 奖项名称硬编码问题
- 组件现在从后端 awards 配置动态获取奖项名称
- 修复 LiveVotingView、AdminControl 传递 awards 数据
- 新增 gala 压测命令到 package.json

测试验证:
- 100人并发压测通过,成功率 100%
- P95 延迟 0.7ms,远低于 500ms 阈值
- 系统可稳定支持 3.3 倍现场负载
2026-01-29 00:09:03 +08:00
2026-01-25 21:47:44 +08:00
2026-01-26 01:13:29 +08:00

年会互动大屏系统

公司年会互动投票与抽奖系统,采用国潮赤金主题设计,支持 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

访问地址

端点 开发环境 生产环境
移动端 http://localhost:5174 https://your-domain.com/
大屏端 http://localhost:5173 https://your-domain.com/screen
导演控制台 http://localhost:5173/admin/director-console https://your-domain.com/screen/admin/director-console

部署

项目支持 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 - 仅供内部使用

Description
No description provided
Readme 17 MiB
Languages
TypeScript 55.8%
Vue 40.2%
Lua 1.4%
SCSS 1.2%
JavaScript 0.9%
Other 0.5%