# 年会互动大屏系统需求规格说明书 (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 数据计数准确无误。