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>
110 lines
6.3 KiB
Markdown
110 lines
6.3 KiB
Markdown
# 年会互动大屏系统 - 联调测试方案 (Integration Test Plan)
|
||
|
||
| 项目名称 | 年会互动大屏系统 (马年国潮版) | 版本号 | V1.0 |
|
||
| :--- | :--- | :--- | :--- |
|
||
| 文档状态 | **执行中** | 负责人 | 技术总监 |
|
||
| 涉及端 | 移动端 H5、大屏端 Web、导播台 Admin、服务端 Node | 更新日期 | 2026-01-15 |
|
||
|
||
---
|
||
|
||
## 1. 测试目标与范围
|
||
本次联调旨在验证各子系统间的**数据流转**、**实时通信**及**视觉同步**是否符合预期。重点关注 150 人并发场景下的稳定性及“操作-反馈”的延迟体验。
|
||
|
||
### 核心联调链路
|
||
1. **投票链路**：手机端盖戳 -> Socket 传输 -> Redis 原子计数 -> 大屏粒子特效生成。
|
||
2. **抽奖链路**：导播台控制 -> 状态机切换 -> 算法筛选 -> 大屏三阶段动效展示。
|
||
3. **管理链路**：名单导入 -> 数据清洗 -> 实时控制 -> 紧急重置。
|
||
|
||
---
|
||
|
||
## 2. 环境准备 (Pre-requisites)
|
||
|
||
### 2.1 硬件环境
|
||
* **大屏幕端**：高性能 PC (建议独立显卡)，连接 LED 大屏（或 1080P+ 显示器）。
|
||
* **导播台**：操作员笔记本电脑 (Chrome 浏览器)。
|
||
* **用户端**：准备至少 5 台不同型号的手机 (含 iOS/Android, 高端/低端机型)。
|
||
|
||
### 2.2 网络环境
|
||
* **局域网 (LAN)**：大屏 PC 必须连接有线网络。
|
||
* **Wi-Fi/4G**：手机端测试混合网络环境。
|
||
* **服务端**：Redis 与 Node.js 服务已启动，Socket 端口开放。
|
||
|
||
### 2.3 数据准备
|
||
* [ ] 导入测试用员工名单 Excel (含 1960-2005 不同年份出生，含 200 人以上数据)。
|
||
* [ ] 配置 7 个测试节目及对应的封面图。
|
||
* [ ] 配置 7 个奖项名称 (最佳创意、最佳视觉等)。
|
||
|
||
---
|
||
|
||
## 3. 详细测试用例 (Test Cases)
|
||
|
||
### 3.1 模块 A：身份验证与连接
|
||
| ID | 测试场景 | 操作步骤 | 预期结果 | 状态 |
|
||
| :--- | :--- | :--- | :--- | :--- |
|
||
| A01 | 员工扫码登录 | 微信扫码访问首页 | 1. 显示“请输入姓名”<br>2. 提交后进入首页，显示“已连接”绿灯 | ☐ |
|
||
| A02 | 导播台登录 | 访问 `/admin/director-console` | 1. 拦截跳转至登录页<br>2. 输入 `20268888` 后进入控制台 | ☐ |
|
||
| A03 | 大屏连接 | 访问 `/screen/display-mode` | 1. 全屏显示“马到成功”主视觉<br>2. 左下角“在线人数”实时更新 | ☐ |
|
||
|
||
### 3.2 模块 B：节目投票 (核心交互)
|
||
**前置条件**：导播台已开启某节目的“投票通道”。
|
||
|
||
| ID | 测试场景 | 操作步骤 | 预期结果 | 状态 |
|
||
| :--- | :--- | :--- | :--- | :--- |
|
||
| B01 | **明信片入场** | 导播开启投票通道 | 手机端节目卡片（明信片）**淡入并上滑**出现，伴随震动提示 | ☐ |
|
||
| B02 | **盖戳体验 (乐观UI)** | 拖动/点击底部“最佳创意”印章 | 1. **手机端**：印章手柄下压 -> 震动 -> 留下带有**用户昵称**的红色印迹 (Multiply模式)<br>2. **大屏端**：(<1s延迟) 底部飞出一颗金色粒子，击中对应节目，炸开金粉 | ☐ |
|
||
| B03 | 重复投票拦截 | 对同一节目投第二张票 | 手机端提示“该节目已评价”，无法盖第二个戳 | ☐ |
|
||
| B04 | 撤回/改票 | 点击卡片上已盖的印迹 | 1. 印迹消失，底部印章恢复高亮<br>2. 大屏端该节目热度值回落 (可选，或仅停止增长) | ☐ |
|
||
| B05 | **断网投票 (弱网)** | 手机开启飞行模式 -> 盖戳 -> 关闭飞行模式 | 1. 断网时：盖戳动画正常执行 (乐观UI)<br>2. 联网后：Socket 自动重连，大屏随后收到粒子动画 | ☐ |
|
||
|
||
### 3.3 模块 C：幸运抽奖 (全流程)
|
||
**前置条件**：已导入名单，导播台切换至“幸运抽奖”面板。
|
||
|
||
| ID | 测试场景 | 操作步骤 | 预期结果 | 状态 |
|
||
| :--- | :--- | :--- | :--- | :--- |
|
||
| C01 | 筛选逻辑验证 | 导播选择“第四轮 (属马)” | 导播台显示“当前奖池人数：X人” (需核对 X 是否等于 Excel 中属马人数 - 已中奖人数) | ☐ |
|
||
| C02 | **阶段 1：聚气** | 导播点击【准备】 | 大屏进入“星河旋转”状态，仅高亮显示属马员工的名字 | ☐ |
|
||
| C03 | **阶段 2：风暴** | 导播点击【开始】 | 大屏名字汇聚成“红色风暴”高速旋转，背景音效激昂 | ☐ |
|
||
| C04 | **阶段 3：揭晓** | 导播点击【停止】 | 1. 风暴炸裂<br>2. 红色卷轴展开<br>3. 弹出中奖者头像与姓名 (防抖动，只弹一次) | ☐ |
|
||
| C05 | 去重验证 | 第一轮中奖者张三，在第四轮再次被抽中 | **严重Bug**。系统应确保张三不在第四轮奖池中 (除非配置允许重复) | ☐ |
|
||
|
||
### 3.4 模块 D：全局控制与稳定性
|
||
| ID | 测试场景 | 操作步骤 | 预期结果 | 状态 |
|
||
| :--- | :--- | :--- | :--- | :--- |
|
||
| D01 | 紧急重置 | 导播点击【重置大屏】 | 大屏立即强制刷新，回到待机主页 (用于动效卡死时自救) | ☐ |
|
||
| D02 | **高并发压测** | 使用脚本或组织 20 人，每人每秒点击 5 次 | 1. Redis 票数统计准确 (无丢票)<br>2. 大屏 FPS 保持在 30 以上，无崩溃<br>3. Node 服务内存无溢出 | ☐ |
|
||
|
||
---
|
||
|
||
## 4. 视觉与体验验收标准 (Design QA)
|
||
|
||
* **色值检查**：
|
||
* 主红：`#C21F30` (丹砂红)
|
||
* 主金：`#F0C239` (香槟金)
|
||
* **明信片质感**：
|
||
* 背景是否有棉纸纹理噪点？
|
||
* "From/To" 是否为手写体且微微倾斜？
|
||
* **印章效果**：
|
||
* 印迹是否使用了 `mix-blend-mode: multiply` (正片叠底)？
|
||
* 印迹是否有随机旋转角度？
|
||
* 印迹中是否包含“当前用户昵称”？
|
||
* **大屏特效**：
|
||
* 粒子背景是否深邃且有层次感 (3D 景深)？
|
||
* 抽奖名字是否有动态模糊 (Motion Blur)？
|
||
|
||
---
|
||
|
||
## 5. 故障应急预案 (Emergency Plan)
|
||
|
||
如果在现场测试或实际活动中出现以下问题，按此方案执行：
|
||
|
||
1. **大屏白屏/卡死**：
|
||
* *动作*：导播台点击“重置大屏”；若无效，按 F5 刷新大屏 PC 浏览器。
|
||
* *话术*：主持人：“看来我们的系统也被大家的热情冲晕了头脑，正在重启能量场...”
|
||
2. **手机端无法投票**：
|
||
* *动作*：导播台广播“切换为备用通道” (实际上是重启 Socket 服务)。
|
||
* *降级*：如果网络彻底瘫痪，改用“分贝仪”App 测现场欢呼声大小来决定奖项。
|
||
3. **抽奖名单出错**：
|
||
* *动作*：导播台手动输入中奖者 (假装系统抽出)，或切换为“全员随机模式”。
|
||
|
||
---
|