diff --git a/README.md b/README.md new file mode 100644 index 0000000..0bf6f20 --- /dev/null +++ b/README.md @@ -0,0 +1,141 @@ +# 年会互动大屏系统 + +公司年会互动投票与抽奖系统,采用国潮赤金主题设计,支持 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+ + +### 安装依赖 + +```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 +``` + +详细部署说明请参考 [DEPLOY.md](./DEPLOY.md)。 + +## 测试 + +```bash +# 运行单元测试 +pnpm test + +# 压力测试 +pnpm --filter @gala/server test:load +``` + +## 设计规范 + +### 配色方案 + +| 名称 | 色值 | 用途 | +|------|------|------| +| 丹砂红 | `#C21F30` | 主色调、背景 | +| 香槟金 | `#F0C239` | 强调色、印章、描边 | + +### 视觉风格 + +- 国潮·赤金 (Guochao Red & Gold) +- 红色磨砂玻璃质感 (Red Glassmorphism) +- 金色极细描边 + 粒子流光 + +## License + +Private - 仅供内部使用