30cd29d45d
Admin Control Panel: - Add full AdminControl.vue with 3 sections (Voting, Lottery, Global) - Add AdminLogin.vue with access code gate (20268888) - Add admin.ts store with state persistence - Add admin.types.ts with state machine types - Add router guards for /admin/director-console Voting System Fixes: - Add voting status check before accepting votes (VOTING_CLOSED error) - Fix client to display server error messages - Fix button disabled logic to prevent ambiguity in paused state - Auto-generate userId on connect to fix UNAUTHORIZED error Big Screen Enhancements: - Add LiveVotingView.vue with particle system - Add LotteryMachine.ts with 3-stage animation (Galaxy/Storm/Reveal) - Add useSocketClient.ts composable - Fix MainDisplay.vue SCSS syntax error - Add admin state sync listener in display store Server Updates: - Add admin.service.ts for state management - Add isVotingOpen() and getVotingStatus() methods - Add admin socket event handlers Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
105 lines
5.7 KiB
Markdown
105 lines
5.7 KiB
Markdown
# 年会互动大屏系统需求规格说明书 (PRD)
|
||
|
||
| 项目名称 | 年会互动大屏系统 (马年国潮版) | 版本号 | **V2.0 (修正版)** |
|
||
| :--- | :--- | :--- | :--- |
|
||
| 文档状态 | **正式执行** | 优先级 | P0 (最高) |
|
||
| 核心目标 | 解决移动端开发偏差，统一视觉与交互逻辑，确保150人并发稳定性 |
|
||
| 适用端 | 移动端 H5 (员工)、大屏端 Web (展示)、后台管理 (Admin) |
|
||
|
||
---
|
||
|
||
## 1. 项目概况与核心约束
|
||
本项目旨在为公司年会提供一套高互动性的投票与抽奖系统。系统需在**弱网环境**下，支持 **150人** 的脉冲式并发操作。
|
||
|
||
### 1.1 核心风格定义 (Visual Identity)
|
||
**严禁使用通用蓝色科技风或深黑赛博风。**
|
||
* **主题：** **国潮·赤金 (Guochao Red & Gold)** —— 寓意马到成功。
|
||
* **主色调：** 丹砂红 (`#C21F30`)、香槟金 (`#F0C239`)。
|
||
* **质感：** 红色磨砂玻璃 (Red Glassmorphism) + 金色极细描边 + 粒子流光。
|
||
|
||
### 1.2 技术性能红线
|
||
1. **并发要求：** 必须支撑 **150人** 在 5秒内同时提交投票（QPS > 1000）。
|
||
2. **网络策略：** 移动端必须实现 **乐观UI (Optimistic UI)**。点击投票**立即**反馈成功动画，后台静默请求。严禁出现“点击 -> loading转圈 -> 成功”的滞后体验。
|
||
3. **兼容性：** 移动端 H5 禁用 WebGL/Three.js，仅使用 CSS3/Canvas 2D，确保千元机流畅。
|
||
|
||
---
|
||
|
||
## 2. 功能模块 A：节目投票系统 (Voting)
|
||
|
||
### 2.1 业务逻辑规则
|
||
* **票权机制：** 每位用户拥有 **7张** 属性不同的选票（如：最佳创意、最佳视觉、最强气氛等）。
|
||
* **互斥逻辑：**
|
||
* **单人单票：** 针对同一个节目，每人只能投出 **1张** 票。
|
||
* **票种唯一：** 每张属性票仅有一张（投了A节目“最佳创意”，就不能投B节目“最佳创意”，除非撤回）。
|
||
* **获胜判定：** 系统独立统计 7 个奖项的得票，各奖项得票最高者获奖。
|
||
|
||
### 2.2 移动端 UI/UX 规范 (修正重点)
|
||
**此处为开发偏差高发区，请严格执行：**
|
||
|
||
* **布局结构：**
|
||
* **顶部：** 极简标题 + 剩余票数进度环。
|
||
* **中部：** 节目卡片流（垂直滚动）。
|
||
* **底部 (关键)：** **常驻悬浮 Dock 栏 (Sticky Footer)**。
|
||
* **底部 Dock 栏设计：**
|
||
* 设计为“多宝阁”或“印泥盒”样式。
|
||
* 横向排列 7 枚 **金色印章图标** (SVG)。
|
||
* *状态：* 未使用时高亮（金色）；已使用时置灰（空缺感）。
|
||
* **交互动作 —— "盖章" (Stamping)：**
|
||
* **操作流：** 用户点击底部 Dock 中的某一枚印章 -> 选中的印章轻微放大 -> 用户点击目标节目卡片。
|
||
* **瞬间反馈：**
|
||
1. **视觉：** 节目卡片上瞬间出现该印章的金色印记，并伴有 CSS 缩放动画 (`scale(1.5) -> scale(1)`) 和金粉飞溅粒子效果。
|
||
2. **触觉：** 触发 `navigator.vibrate(50)` 震动。
|
||
3. **数据：** 此时才向后端发送请求。若网络失败，Toast 提示并自动撤销印记。
|
||
|
||
### 2.3 大屏端反馈
|
||
* **状态：** 投票进行时不显示具体数字，仅展示“热度”。
|
||
* **可视化：** 每个节目对应一匹赛马（或龙舟）。热度越高，马匹光效越强、身位越靠前。
|
||
|
||
---
|
||
|
||
## 3. 功能模块 B：幸运抽奖系统 (Lucky Draw)
|
||
|
||
### 3.1 抽奖轮次与人群过滤
|
||
系统需支持 Excel 导入名单（含 `birth_date`），并自动计算标签。
|
||
|
||
| 轮次 | 预计时间 | 抽奖池规则 (筛选条件) | 预计基数 | 中奖名额 |
|
||
| :--- | :--- | :--- | :--- | :--- |
|
||
| **第一轮** | 13:30 | **60后 - 70后** (1960 $\le$ Year $\le$ 1979) | 49人 | **7 人** |
|
||
| **第二轮** | 14:00 | **80后** (1980 $\le$ Year $\le$ 1989) | 21人 | **3 人** |
|
||
| **第三轮** | 14:30 | **90后** (Year $\ge$ 1990) | 26人 | **4 人** |
|
||
| **第四轮** | 15:00 | **属马人员** (生肖特供) | 9人 | **1 人** |
|
||
|
||
* **生肖算法：** `(Year - 1906) % 12 === 0` (覆盖 1966, 1978, 1990, 2002...)。
|
||
* **去重规则：** 默认 **“单人单奖”**。前三轮已中奖者，自动从第四轮属马池中剔除。
|
||
|
||
### 3.2 大屏动效规范
|
||
* **技术栈：** Vue 3 + **Pixi.js** (必须使用 Canvas/WebGL 渲染粒子，DOM 操作会卡顿)。
|
||
* **动效流程：**
|
||
1. **待机 (Idle)：** 金色文字构成的 3D 旋转灯笼/球体。
|
||
2. **滚动 (Rolling)：** 灯笼炸裂，化作红色与金色的粒子风暴，名字高速模糊飞掠。
|
||
3. **揭晓 (Reveal)：** 粒子急速汇聚中心，展开一副 **红色卷轴**，中奖者头像与姓名配合“锣鼓”音效弹出。
|
||
|
||
---
|
||
|
||
## 4. 后端数据与架构要求
|
||
|
||
### 4.1 数据一致性 (Redis)
|
||
针对高并发投票，严禁直接读写数据库。
|
||
* **存储结构：** 使用 Redis Hash 存储票数。
|
||
* **原子操作：** 必须使用 **Lua 脚本** 或 `HINCRBY` 确保计数的原子性，防止超卖或票数丢失。
|
||
|
||
### 4.2 接口与通信
|
||
* **WebSocket：** 用于大屏实时控制（开始/停止/刷新）。需实现心跳检测与断线自动重连。
|
||
* **HTTP API：** 移动端投票接口需做去重校验（Token + Timestamp）。
|
||
|
||
### 4.3 管理后台
|
||
* **名单导入：** 支持 Excel 上传，需校验 `姓名`、`手机号`、`出生日期` 三个字段。
|
||
* **流程控制：** 管理员可手动重置某一轮次的抽奖结果（以防误操作）。
|
||
|
||
---
|
||
|
||
## 5. 验收标准 (Acceptance Criteria)
|
||
|
||
1. **视觉验收：** 必须符合“国潮赤金”配色，无任何默认蓝色组件。
|
||
2. **手感验收：** 移动端断开网络（飞行模式）点击投票，界面应仍能立即显示盖章动画，并在网络恢复后自动同步。
|
||
3. **压力测试：** 模拟 200 个并发连接，在 5 秒内持续发送投票请求，Redis 数据计数准确无误。 |