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>
5.7 KiB
5.7 KiB
年会互动大屏系统需求规格说明书 (PRD)
| 项目名称 | 年会互动大屏系统 (马年国潮版) | 版本号 | V2.0 (修正版) |
|---|---|---|---|
| 文档状态 | 正式执行 | 优先级 | P0 (最高) |
| 核心目标 | 解决移动端开发偏差，统一视觉与交互逻辑，确保150人并发稳定性 | ||
| 适用端 | 移动端 H5 (员工)、大屏端 Web (展示)、后台管理 (Admin) |
1. 项目概况与核心约束
本项目旨在为公司年会提供一套高互动性的投票与抽奖系统。系统需在弱网环境下，支持 150人 的脉冲式并发操作。
1.1 核心风格定义 (Visual Identity)
严禁使用通用蓝色科技风或深黑赛博风。
- 主题： 国潮·赤金 (Guochao Red & Gold) —— 寓意马到成功。
- 主色调： 丹砂红 (
#C21F30)、香槟金 (#F0C239)。 - 质感： 红色磨砂玻璃 (Red Glassmorphism) + 金色极细描边 + 粒子流光。
1.2 技术性能红线
- 并发要求： 必须支撑 150人 在 5秒内同时提交投票（QPS > 1000）。
- 网络策略： 移动端必须实现 乐观UI (Optimistic UI)。点击投票立即反馈成功动画，后台静默请求。严禁出现“点击 -> loading转圈 -> 成功”的滞后体验。
- 兼容性： 移动端 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 中的某一枚印章 -> 选中的印章轻微放大 -> 用户点击目标节目卡片。
- 瞬间反馈：
- 视觉： 节目卡片上瞬间出现该印章的金色印记，并伴有 CSS 缩放动画 (
scale(1.5) -> scale(1)) 和金粉飞溅粒子效果。 - 触觉： 触发
navigator.vibrate(50)震动。 - 数据： 此时才向后端发送请求。若网络失败，Toast 提示并自动撤销印记。
- 视觉： 节目卡片上瞬间出现该印章的金色印记，并伴有 CSS 缩放动画 (
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 操作会卡顿)。
- 动效流程：
- 待机 (Idle)： 金色文字构成的 3D 旋转灯笼/球体。
- 滚动 (Rolling)： 灯笼炸裂，化作红色与金色的粒子风暴，名字高速模糊飞掠。
- 揭晓 (Reveal)： 粒子急速汇聚中心，展开一副 红色卷轴，中奖者头像与姓名配合“锣鼓”音效弹出。
4. 后端数据与架构要求
4.1 数据一致性 (Redis)
针对高并发投票，严禁直接读写数据库。
- 存储结构： 使用 Redis Hash 存储票数。
- 原子操作： 必须使用 Lua 脚本 或
HINCRBY确保计数的原子性，防止超卖或票数丢失。
4.2 接口与通信
- WebSocket： 用于大屏实时控制（开始/停止/刷新）。需实现心跳检测与断线自动重连。
- HTTP API： 移动端投票接口需做去重校验（Token + Timestamp）。
4.3 管理后台
- 名单导入： 支持 Excel 上传，需校验
姓名、手机号、出生日期三个字段。 - 流程控制： 管理员可手动重置某一轮次的抽奖结果（以防误操作）。
5. 验收标准 (Acceptance Criteria)
- 视觉验收： 必须符合“国潮赤金”配色，无任何默认蓝色组件。
- 手感验收： 移动端断开网络（飞行模式）点击投票，界面应仍能立即显示盖章动画，并在网络恢复后自动同步。
- 压力测试： 模拟 200 个并发连接，在 5 秒内持续发送投票请求，Redis 数据计数准确无误。