152 lines
3.6 KiB
Markdown
152 lines
3.6 KiB
Markdown
# 年会互动大屏系统
|
||
|
||
公司年会互动投票与抽奖系统，采用国潮赤金主题设计，支持 150+ 人高并发实时互动。
|
||
|
||
## 功能特性
|
||
|
||
### 🎯 节目投票系统
|
||
- 7 种奖项类别（最佳创意、最佳视觉、最强气氛等）
|
||
- 印章式投票交互，乐观 UI 即时反馈
|
||
- 大屏赛马动画实时展示投票热度
|
||
- 支持投票撤回与重投
|
||
|
||
### 🎰 幸运抽奖系统
|
||
- 多轮次抽奖，支持按年龄段/生肖筛选
|
||
- Excel 名单导入，自动计算标签
|
||
- Pixi.js 粒子动效（待机灯笼、滚动风暴、卷轴揭晓）
|
||
- 自动播放抽奖音乐与中奖音效
|
||
|
||
### 📱 微信扫码登录
|
||
- 大屏显示微信开放平台授权二维码
|
||
- 用户微信扫码授权，自动获取 openid 完成登录
|
||
- 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+
|
||
|
||
### 安装依赖
|
||
|
||
```bash
|
||
pnpm install
|
||
```
|
||
|
||
### 启动开发服务
|
||
|
||
```bash
|
||
# 启动所有服务（服务端 + 大屏端 + 移动端）
|
||
pnpm dev
|
||
|
||
# 或分别启动
|
||
pnpm dev:server # 后端服务 :3000
|
||
pnpm dev:screen # 大屏端 :5173
|
||
pnpm dev:mobile # 移动端 :5174
|
||
```
|
||
|
||
### 构建生产版本
|
||
|
||
```bash
|
||
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 证书。
|
||
|
||
```bash
|
||
# 配置域名
|
||
sed -i 's/your-domain.com/你的域名/g' deploy/Caddyfile
|
||
|
||
# 启动服务
|
||
docker-compose up -d --build
|
||
```
|
||
|
||
### 公众号网页授权配置（可选）
|
||
|
||
若启用微信内 H5 授权登录，请在环境变量中配置：
|
||
|
||
```env
|
||
WECHAT_MP_APP_ID=your-mp-app-id
|
||
WECHAT_MP_APP_SECRET=your-mp-app-secret
|
||
WECHAT_MP_REDIRECT_ALLOWLIST=your-domain.com,www.your-domain.com
|
||
```
|
||
|
||
详细部署说明请参考 [DEPLOY.md](./DEPLOY.md)。
|
||
|
||
## 测试
|
||
|
||
```bash
|
||
# 运行单元测试
|
||
pnpm test
|
||
|
||
# 压力测试
|
||
pnpm --filter @gala/server test:load
|
||
```
|
||
|
||
## 设计规范
|
||
|
||
### 配色方案
|
||
|
||
| 名称 | 色值 | 用途 |
|
||
|------|------|------|
|
||
| 丹砂红 | `#C21F30` | 主色调、背景 |
|
||
| 香槟金 | `#F0C239` | 强调色、印章、描边 |
|
||
|
||
### 视觉风格
|
||
|
||
- 国潮·赤金 (Guochao Red & Gold)
|
||
- 红色磨砂玻璃质感 (Red Glassmorphism)
|
||
- 金色极细描边 + 粒子流光
|
||
|
||
## License
|
||
|
||
Private - 仅供内部使用
|