提交测试用例

test_pro/test_case.md

@@ -0,0 +1,351 @@
+# 中国安全生产科学研究院实验室安全智慧化管控中心 数据可视化大屏测试用例
+
+---
+
+# 一、通用导航栏模块测试点
+
+## 正常场景
+- 打开页面，导航栏左侧是否正确显示项目标题「中国安全生产科学研究院实验室安全智慧化管控中心」
+- 导航栏标题文字是否呈现白色到科技蓝的渐变效果
+- 导航栏中间是否显示「实验室情况」和「视频监控」两个切换按钮
+- 默认加载时「实验室情况」按钮是否处于选中高亮状态
+- 导航栏右侧是否正确展示天气信息、星期、实时时钟
+- 实时时钟是否按 HH:MM:SS 格式显示并每秒更新
+- 导航栏整体高度是否为 72px
+
+## 交互场景
+- 点击「视频监控」按钮，页面是否切换到视频监控页，按钮高亮状态是否更新
+- 点击「实验室情况」按钮，页面是否切回实验室情况页，按钮高亮状态是否更新
+- 页面切回「实验室情况」时，ECharts 图表是否在约 100ms 延迟后重新初始化并正常渲染
+
+## 动效场景
+- 导航栏底部渐变分割线是否存在流光动画（navFlow，4s 周期）
+- 标题文字是否有 drop-shadow 脉冲动画（titleGlow，3s 周期）
+- 时钟文字是否有 text-shadow 脉冲动画（clockPulse，2s 周期）
+- 选中的 Tab 按钮是否有发光呼吸动画（tabGlow，2.5s 周期）
+
+## 边界场景
+- 时钟从 23:59:59 跨零点后，是否正确跳转到 00:00:00
+- 天气信息内容较长时，是否不影响导航栏布局
+
+---
+
+# 二、页面一：实验室情况 — 整体布局测试点
+
+## 正常场景
+- 页面是否呈现左（440px）、中（自适应）、右（440px）三栏布局
+- 三栏之间间距是否为 14px
+- 各栏内模块是否按上下排列且无遮挡重叠
+
+## 边界场景
+- 浏览器窗口缩小时，自适应缩放后三栏布局是否维持比例
+- 浏览器窗口放大时，三栏布局是否不出现多余空白或错位
+
+---
+
+# 三、1.1 实验室基本情况统计模块测试点
+
+## 正常场景
+- 模块固定高度是否为 260px
+- 环形图是否正确渲染，中心是否显示实验室总数字 + "实验室总数"文字
+- 环形图是否展示四个分级（I级红、II级橙、III级黄、IV级蓝）的占比扇区
+- 右侧图例是否纵向排列，并与四个分级颜色对应
+- 状态卡片区域是否并排显示「使用 XX 间」「异常 XX 间」「空闲 XX 间」三个卡片
+- 「使用 XX 间」数字是否为科技蓝色，「异常 XX 间」是否为红色，「空闲 XX 间」是否为绿色
+
+## 动效场景
+- 三个状态卡片是否有呼吸发光动画（cardBreathe，4s 周期）
+- 三个卡片动画是否存在 stagger 间隔（1.3s 依次错开）
+
+## 边界场景
+- 实验室总数为 0 时，环形图中心是否正确显示 0 且不报错
+- 某一等级实验室数量为 0 时，环形图是否不渲染该扇区或正确处理
+
+---
+
+# 四、1.2 实验室安全分级统计模块测试点
+
+## 正常场景
+- 模块是否采用 flex:1 自适应高度
+- 堆叠柱状图是否正确渲染，X 轴显示各二级单位名称
+- 单位名称是否支持换行显示，且名称下方显示该单位实验室总数
+- Y 轴是否正确显示实验室数量刻度
+- 四组堆叠数据（I级、II级、III级、IV级）是否按对应颜色堆叠显示
+- 图例是否显示在图表顶部
+
+## 交互场景
+- 自动滚动是否每 5 秒向右滚动一个单位
+- 初始是否显示前 6 个单位
+- 数据超出 6 个单位后，滚动是否循环回初始位置
+
+## 边界场景
+- 二级单位数量恰好为 6 时，是否不出现无意义的滚动
+- 二级单位数量少于 6 时，是否正常展示所有数据而不出现空白滚动
+- 某单位仅有单一等级实验室时，堆叠柱是否仅显示单色
+
+---
+
+# 五、1.3 实验室进入人数统计及走势模块测试点
+
+## 正常场景
+- 模块固定高度是否为 280px
+- 数字翻牌器是否正确渲染今日总进入人数（5 位数字）和当前实验人数（4 位数字）
+- 每个数字是否为独立方块（32×42px）
+- 数字方块是否有渐变背景 + 边框发光效果
+- 折线图是否渲染双折线（进入人数-科技蓝；实验人数-深蓝）
+- X 轴是否展示 0:00 ~ 24:00 共 9 个时段
+- 折线是否有面积填充渐变效果
+- 折线是否为平滑曲线（smooth）
+
+## 动效场景
+- 数字翻牌器方块是否有发光动画（digitGlow，2s 周期）
+
+## 边界场景
+- 今日总进入人数为 0 时，翻牌器是否正确显示 00000
+- 今日总进入人数达到最大 5 位数（99999）时，是否正常显示不溢出
+- 某时段无人进入时，折线图对应点是否正确显示为 0
+
+---
+
+# 六、1.4 实验环境安全智能感知模块测试点
+
+## 正常场景
+- 列表是否正确展示每条数据的实验室名称（房号）和所属二级单位
+- 每条数据是否显示 5 个传感器值：温度、湿度、TVOC、CO₂、O₂
+- 列表是否持续自动向上滚动（约 40s 一轮）
+
+## 异常场景
+- 温度值 > 30°C 时，该值是否红色高亮 + ⚠ 报警图标 + 脉冲 box-shadow 动画
+- TVOC 值 > 1.5 mg/m³ 时，该值是否红色高亮 + ⚠ 报警图标 + 脉冲 box-shadow 动画
+- CO₂ 值 > 900 ppm 时，该值是否红色高亮 + ⚠ 报警图标 + 脉冲 box-shadow 动画
+- O₂ 值 < 19.5% 时，该值是否红色高亮 + ⚠ 报警图标 + 脉冲 box-shadow 动画
+- 同一条目多个传感器同时异常时，所有异常值是否均高亮显示
+
+## 动效场景
+- 传感器条目入场是否有淡入动画（sensorFadeIn，0.5s）
+- 报警图标是否有摇晃动画（alarmIconShake，0.5s）
+- 列表是否通过 CSS translateY(-50%) + 数据翻倍实现无缝滚动（无跳动感）
+
+## 边界场景
+- 温度恰好等于 30°C 时，是否不触发异常高亮
+- O₂ 恰好等于 19.5% 时，是否不触发异常高亮
+- 列表数据只有 1 条时，无缝滚动是否仍能正常运行
+- 所有实验室数据均正常时，列表是否无任何高亮警告展示
+
+---
+
+# 七、1.5 实验室实时风险预警模块测试点
+
+## 正常场景
+- 模块固定高度是否为 320px
+- 本月预警响应总数是否以大字数字展示
+- 预警列表是否持续循环滚动（约 30s 一轮）
+- 每条预警数据是否显示：实验室名称-二级单位、异常传感器及数值（橙色高亮）、预警时间（YYYY-MM-DD HH:mm:ss）
+- 每条预警条目左侧是否有 3px 橙色竖条
+
+## 动效场景
+- 预警总数数字是否有发光文字动画（warnCountGlow，2s 周期）
+- 预警条目左边框是否有脉冲动画（warnBorderPulse，3s 周期）
+- 滚动是否为无缝循环（无跳动感）
+
+## 边界场景
+- 本月预警总数为 0 时，是否正确显示 0 且不出现报错
+- 预警列表为空时，滚动区域是否不报错、不显示异常
+
+---
+
+# 八、1.6 智能环境感知应用设备统计模块测试点
+
+## 正常场景
+- 顶部是否并排显示「在线设备数量」（科技蓝）和「离线设备数量」（灰色）两个统计卡片
+- 仪表盘是否正确渲染设备在线率百分比
+- 仪表盘量程是否为 210° ~ -30°，三段颜色分布正确（70%暗蓝、90%中蓝、100%亮蓝）
+- 右侧设备类型列表是否纵向显示 4 项：电子信息铭牌、化学品智能终端、传感器、智能设备，各自对应数量
+
+## 边界场景
+- 在线率为 0% 时，仪表盘指针是否指向最低端不报错
+- 在线率为 100% 时，仪表盘指针是否指向最高端不报错
+- 离线设备数量为 0 时，灰色数值卡片是否正确显示 0
+
+---
+
+# 九、1.7 实验室设备分类及使用统计模块测试点
+
+## 正常场景
+- 饼图是否正确渲染 7 类设备分类扇区，颜色各异
+- 饼图 radius 是否为 ['30%','60%']（环形）
+- 右侧图例是否纵向排列并与 7 类设备对应
+- 中部是否并排显示「设备总数」「使用总时长(h)」「设备使用率(%)」3 个统计卡片
+- 底部是否并排显示「使用(蓝)」「空闲(绿)」「正常(橙)」「维修(红)」4 个状态卡片
+
+## 边界场景
+- 某类设备数量为 0 时，饼图是否不渲染该扇区或正确处理
+- 设备使用率为 0% 和 100% 时，相关卡片是否正确显示不报错
+
+---
+
+# 十、页面二：视频监控 — 左侧导航栏测试点
+
+## 正常场景
+- 左侧导航栏宽度是否为 300px，并应用面板样式
+- 顶部标题是否显示「建筑结构导航」
+- 搜索框是否存在并可输入楼栋/楼层关键词
+- 搜索框聚焦时边框是否发光
+- 下拉筛选框是否可按二级单位筛选（安全技术研究所、职业安全研究所、化学品安全研究所、矿山安全研究所）
+- 树状结构是否展示院区 → 楼栋 → 楼层 → 房间的层级
+
+## 交互场景
+- 点击树节点，是否可正确展开/折叠对应子节点
+- 展开子节点时，是否有淡入动画（treeExpand，0.35s）
+- 点击选中树节点，是否高亮（科技蓝背景 + 左侧竖线）
+- 悬停树节点，是否出现光扫效果（light sweep）
+- 箭头展开时，是否变色发光
+- 使用搜索框输入关键词，是否过滤只展示匹配的楼栋/楼层
+
+## 边界场景
+- 搜索框输入不存在的楼栋/楼层名，是否无匹配结果，不报错
+- 搜索框清空后，树状结构是否恢复完整展示
+- 筛选下拉选择某单位，是否仅显示该单位相关节点
+
+---
+
+# 十一、页面二：视频监控 — 右侧视频区域测试点
+
+## 正常场景
+- 面包屑是否正确显示当前路径（院区 → 楼栋名称 → 楼层名称）
+- 视频网格是否为 3×3 九宫格，共展示 9 个摄像头格子
+- 每个摄像头格子是否显示科幻风边框（外层渐变背景 + 内外双层边框）
+- 每个格子四角是否有 L 形发光装饰（cam-corner），带呼吸动画（stagger 间隔 0.6s）
+- 每个格子内是否有扫描线纹理（repeating-linear-gradient）
+- 摄像头内是否有移动扫描线动画（6s 周期）
+- 左上角是否显示在线状态绿色闪烁圆点 + 摄像头编号
+- 分页控件是否显示「上一页 / 第 X / Y 页 / 下一页」
+
+## 交互场景
+- 点击「下一页」按钮，是否切换到下一页摄像头，页码正确更新
+- 点击「上一页」按钮，是否切换到上一页摄像头，页码正确更新
+- 悬停摄像头格子，是否轻微放大并增强发光效果
+- 每页第一个格子是否应用 AI 智能摄像头样式（橙金色主题）
+- AI 格子右上角是否显示「AI 智能」徽章，并有脉冲动画（aiBadgePulse，1.5s）
+- AI 格子内扫描线是否为橙色
+- 九宫格格子入场是否有 stagger 动画（每格延迟 0.05s）
+
+## 边界场景
+- 当前为第 1 页时，点击「上一页」按钮，是否不响应或给出提示
+- 当前为最后一页时，点击「下一页」按钮，是否不响应或给出提示
+- 总摄像头数量不足 9 个时，剩余格子是否正确处理（不报错）
+
+---
+
+# 十二、全屏预警弹窗测试点
+
+## 正常场景
+- 页面加载 15 秒后，是否自动弹出预警弹窗（Demo 演示）
+- 弹窗宽度是否为 900px
+- 覆盖层是否呈全屏半透明红色，并有呼吸闪烁效果
+- 四周是否有大面积红色光晕（inset box-shadow），1s 周期明暗交替
+- 四边是否有红色光边框闪烁（0.8s 周期）
+- 弹窗左侧信息区是否显示以下字段：实验室（房号）、楼栋楼层、所属单位、异常参数（红色高亮）、当前数值（红色高亮）、实验室负责人、联系电话、预警时间（YYYY-MM-DD HH:mm:ss）
+- 弹窗右侧是否有 320px 宽的监控画面区域，含标题「实时监控画面」+ 红色闪烁圆点
+- 监控画面区域背景是否为暗红色 + 扫描线纹理
+- 左上角是否有 REC 标识 + 摄像头名称
+- 弹窗底部是否显示确认按钮（红色渐变）
+
+## 交互场景
+- 点击确认按钮，弹窗是否关闭，页面恢复正常
+- 悬停确认按钮，是否有发光效果
+- `showAlert()` 函数被调用时，弹窗是否正确接收并展示传入的实验室、楼栋、单位、参数、数值、负责人、电话参数
+
+## 边界场景
+- 弹窗中异常参数字段为多个异常项时，是否均红色高亮展示
+- 负责人电话字段为空时，是否不报错，字段留空或显示默认提示
+
+---
+
+# 十三、通用功能 — 自适应缩放测试点
+
+## 正常场景
+- 页面在 1920×1080 分辨率下，是否完整显示不缩放
+- 浏览器窗口缩小（宽度小于 1920 或高度小于 1080），页面是否按 `Math.min(vw/1920, vh/1080)` 比例等比缩放
+- 缩放后内容是否居中展示
+
+## 交互场景
+- 调整浏览器窗口大小时，页面缩放比例是否实时更新（监听 resize 事件）
+
+## 边界场景
+- 浏览器窗口极小（如 800×600）时，页面是否缩放后仍可辨识，不出现布局错乱
+- 浏览器窗口极大（如 3840×2160）时，页面是否在 1920×1080 基础上适度放大，不出现模糊或错位
+
+---
+
+# 十四、通用功能 — 自动全屏测试点
+
+## 正常场景
+- 首次点击页面时，是否调用 `requestFullscreen()` 进入全屏
+- 全屏后内容是否铺满屏幕，无黑边（或仅等比缩放留边）
+
+## 边界场景
+- 用户手动退出全屏后再次点击页面，是否不再重复触发全屏（`{ once: true }` 保证只触发一次）
+- 浏览器不支持 `requestFullscreen` 时，是否不报错，页面正常工作
+
+---
+
+# 十五、通用功能 — ECharts 图表通用测试点
+
+## 正常场景
+- 所有 ECharts 图表（环形图、堆叠柱状图、折线图、仪表盘、饼图）是否在页面加载约 200ms 后初始化并正常渲染
+- 所有图表 tooltip 是否使用统一样式（深色背景 rgba(6,22,56,0.9) + 蓝色边框）
+- 调整浏览器窗口大小时，所有图表是否调用 `.resize()` 自适应更新
+
+## 边界场景
+- ECharts JS 文件加载失败时，图表区域是否不白屏崩溃，页面其他内容仍可展示
+
+---
+
+# 十六、外部依赖与文件结构测试点
+
+## 正常场景
+- `libs/reset.css` 是否正确引用并生效（Ant Design Reset CSS）
+- `libs/echarts.min.js` 是否正确引用并生效（ECharts 5.5.0）
+- 所有 CSS 是否在 `<style>` 标签内，所有 JS 是否在 `<script>` 标签内
+
+## 异常场景
+- 删除或移动 `libs/reset.css` 后刷新页面，是否仅影响基础样式重置，不导致 JS 报错
+- 删除或移动 `libs/echarts.min.js` 后刷新页面，是否不崩溃，并给出可识别的错误信息
+
+---
+
+# 十七、全局动效与光效测试点
+
+## 正常场景
+- 页面背景是否显示技术网格覆盖层（半透明网格线）
+- 页面是否有浮动粒子效果（particleDrift，20s 周期）
+- 所有面板是否有 box-shadow 呼吸发光动画（panelGlow，4s 周期）
+- 面板顶部是否有水平扫描线（panelScan，6s 周期，各面板 stagger 延迟）
+- 面板四角装饰是否有呼吸动画（cornerBreathe，3s 周期）
+- 面板标题左侧竖条是否有发光脉冲（titleBarGlow，2.5s 周期）
+- 视频监控页进入时，是否有入场淡入上浮动画（videoPageFadeIn，0.6s）
+
+## 边界场景
+- 所有 CSS `@keyframes` 动画是否在不使用第三方动画库的情况下正常运行
+- 多个动画同时运行时，是否不出现卡顿或渲染异常
+
+---
+
+# 十八、界面与设计规范测试点
+
+## 正常场景
+- 主背景色是否为深蓝渐变（#020c1b → #061630 → #0a2550）
+- 面板背景是否为 rgba(6, 22, 56, 0.82) 毛玻璃效果，backdrop-filter: blur(8px)
+- 面板边框颜色是否为 rgba(72, 180, 255, 0.28)
+- 主文字色是否为 #d8f4ff，辅助文字色是否为 #7eacc8
+- 强调色是否正确使用 #48d7ff（科技蓝）和 #3a7bff（深蓝）
+- 安全色（#36d399）、警告色（#ffb020）、危险色（#ff4d4f）是否应用于对应场景
+- 实验室安全等级配色是否符合教育部标准（I级红/II级橙/III级黄/IV级蓝）
+- 字体是否按顺序 fallback："DIN Alternate" → "Alibaba PuHuiTi" → "PingFang SC" → "Microsoft YaHei" → sans-serif
+- 面板圆角是否为 6px，内边距是否为 14px 16px
+- 面板顶部是否有 2px 渐变高亮线
+- 所有界面文案是否为简体中文
+
+## 边界场景
+- 在不支持 `backdrop-filter` 的浏览器中，面板是否有兜底背景色，不显示为透明

test_pro/test_case_new.md

@@ -0,0 +1,413 @@
+# 中国安全生产科学研究院实验室安全智慧化管控中心 数据可视化大屏测试点
+
+---
+
+# 导航栏模块测试点
+
+## 正常场景
+- 打开 index.html，导航栏左侧标题显示「中国安全生产科学研究院实验室安全智慧化管控中心」，文字呈现白色→科技蓝渐变效果
+- 打开 index.html，导航栏中间区域同时显示「实验室情况」和「视频监控」两个切换按钮，且「实验室情况」默认处于选中高亮状态
+- 打开 index.html，导航栏右侧显示天气信息、当前星期和实时时钟，时钟格式为 HH:MM:SS
+- 观察时钟运行，时钟每秒递增更新，显示值与系统时间一致
+- 量取或视觉检验导航栏，整体高度固定为 72px，两个页面切换时导航栏高度不变
+- 观察导航栏底部边缘，存在渐变分割线，并有流光动画持续运行（navFlow，4s 周期）
+
+## 交互场景
+- 点击「视频监控」按钮，视频监控页面内容展示，「实验室情况」取消高亮，「视频监控」变为选中高亮状态
+- 在视频监控页点击「实验室情况」按钮，实验室情况页面内容展示，按钮高亮状态正确切换
+- 切回「实验室情况」页面约 100ms 后，页面内所有 ECharts 图表重新渲染完成，无空白或残留
+- 快速连续点击两个 Tab 按钮，页面最终稳定显示最后点击的页面，无卡顿或显示错乱
+
+## 动效场景
+- 观察导航栏标题，文字存在 drop-shadow 脉冲动画（titleGlow），3s 为一个循环周期
+- 观察时钟文字，存在 text-shadow 脉冲发光动画（clockPulse），2s 为一个循环周期
+- 观察选中状态的 Tab 按钮，存在发光呼吸动画（tabGlow），2.5s 为一个循环周期
+
+## 边界场景
+- 等待至时钟显示 23:59:59，下一秒是否自动归零显示 00:00:00，日期同步跳转到次日
+- 导航栏标题文字在浏览器最小化后重新打开，动画恢复正常运行，无静止卡死
+
+---
+
+# 页面一：实验室情况 — 整体布局测试点
+
+## 正常场景
+- 打开实验室情况页面，整体内容区呈现左（440px）、中（自适应宽）、右（440px）三栏布局
+- 三栏之间的间距为 14px，各栏内模块从上到下依次排列，无遮挡重叠
+
+## 边界场景
+- 将浏览器窗口宽度缩小至 1280px，三栏布局通过整体缩放等比适应，不出现列折叠或内容溢出
+- 将浏览器窗口拉宽至 2560px，三栏布局通过整体缩放等比放大，不出现模块间距异常
+
+---
+
+# 1.1 实验室基本情况统计模块测试点
+
+## 正常场景
+- 打开页面，模块整体高度固定为 260px，内容在该高度内完整展示，无超出裁剪
+- 查看环形图，中心区域正确显示实验室总数数字及「实验室总数」文字标注
+- 查看环形图，扇区显示四个安全分级（I级红/#ff4d4f、II级橙/#ff8c00、III级黄/#ffcc00、IV级蓝/#3a7bff），各扇区颜色与分级对应准确
+- 查看环形图，ring 内外径比例对应 radius ['45%','70%']，呈现标准环形而非实心饼图
+- 查看环形图右侧，图例纵向排列，四个分级名称与颜色图标一一对应
+- 查看模块下方状态卡片区，并排显示「使用 XX 间」「异常 XX 间」「空闲 XX 间」三个卡片，「使用」数值为科技蓝色，「异常」为红色，「空闲」为绿色
+
+## 动效场景
+- 观察三个状态卡片，均存在呼吸发光动画（cardBreathe，4s 周期），且三张卡片动画起始时间依次错开 1.3s（stagger）
+
+## 异常场景
+- 将某分级实验室数量设置为 0，环形图不渲染该分级扇区，或以零比例扇区展示，不出现渲染报错
+
+## 边界场景
+- 将实验室总数设置为 0，环形图中心显示 0，图例正常展示，不出现 NaN 或除零报错
+- 将某一分级数量设置为所有实验室总数（其余分级均为 0），环形图正确显示单色完整圆环
+
+---
+
+# 1.2 实验室安全分级统计模块测试点
+
+## 正常场景
+- 打开页面，模块高度随左栏剩余空间自适应（flex:1），内容填满可用高度无空白
+- 查看堆叠柱状图，X 轴显示各二级单位名称（支持换行），名称下方显示该单位实验室总数
+- 查看堆叠柱状图，Y 轴标注实验室数量刻度，各柱按 I/II/III/IV 级对应颜色堆叠显示
+- 查看图表顶部，图例区域完整展示 I/II/III/IV 级四组数据标识
+
+## 交互场景
+- 等待 5s，dataZoom 自动向右滑动一个单位，X 轴显示内容相应右移
+- 初始状态，X 轴可见区域内展示前 6 个二级单位，超出部分不可见
+- 当滚动到最后一个单位后，再等待 5s，dataZoom 循环回初始位置从第一个单位重新展示
+- 悬停柱体，tooltip 弹出，背景色为 rgba(6,22,56,0.9)，边框为蓝色，数据内容准确
+
+## 边界场景
+- 将二级单位数量设置为恰好 6 个，图表初始显示全部单位，不发生无意义滚动
+- 将二级单位数量设置为 1 个，图表正常展示该单位柱体，不报错也不出现空白
+- 某二级单位仅有 I 级实验室，堆叠柱只显示 I 级红色单段，其余段不渲染或不可见
+
+---
+
+# 1.3 实验室进入人数统计及走势模块测试点
+
+## 正常场景
+- 打开页面，模块固定高度为 280px，内容完整展示无超出
+- 查看翻牌器，左侧「今日总进入人数」显示 5 个独立数字方块，右侧「当前实验人数」显示 4 个独立数字方块
+- 量取单个数字方块，宽高约为 32×42px，方块带有渐变背景和边框发光效果
+- 查看折线图，渲染双折线：进入人数使用科技蓝（#48d7ff），实验人数使用深蓝（#3a7bff）
+- 查看折线图 X 轴，展示 0:00 ~ 24:00 共 9 个时段刻度，分布均匀
+- 查看折线图，折线为平滑曲线（smooth），并带有面积填充渐变效果
+
+## 动效场景
+- 观察翻牌器每个数字方块，存在边框发光动画（digitGlow），2s 为一个循环周期
+
+## 边界场景
+- 将今日总进入人数设置为 0，翻牌器显示 00000，不出现空白或异常占位
+- 将今日总进入人数设置为 99999（5 位最大值），翻牌器正常显示，不出现数字超出方块或溢出
+- 将当前实验人数设置为 0000，翻牌器显示 0000，不出现错误
+- 某时段进入人数为 0，折线图在该时段对应点标注为 0，连线正常不断折
+
+---
+
+# 1.4 实验环境安全智能感知模块测试点
+
+## 正常场景
+- 打开页面，列表自动向上滚动展示各实验室数据，速度约 40s 完成一轮循环
+- 查看每条数据，包含实验室名称（房号）、所属二级单位，及温度、湿度、TVOC、CO₂、O₂ 五个传感器数值
+- 所有传感器数值均在正常范围内时，数值文字正常颜色展示，无高亮和报警图标
+
+## 异常场景
+- 将某条数据温度值设置为 30.1°C（> 30°C），该温度值红色高亮显示，出现 ⚠ 报警图标，并带有脉冲 box-shadow 动画
+- 将某条数据温度值设置为 30°C（恰好等于阈值），该温度值不触发异常高亮，正常颜色展示
+- 将某条数据 TVOC 值设置为 1.6 mg/m³（> 1.5），该值红色高亮显示，出现 ⚠ 报警图标，带脉冲动画
+- 将某条数据 TVOC 值设置为 1.5 mg/m³（恰好等于阈值），该值不触发异常高亮
+- 将某条数据 CO₂ 值设置为 901 ppm（> 900），该值红色高亮显示，出现 ⚠ 报警图标，带脉冲动画
+- 将某条数据 CO₂ 值设置为 900 ppm（恰好等于阈值），该值不触发异常高亮
+- 将某条数据 O₂ 值设置为 19.4%（< 19.5%），该值红色高亮显示，出现 ⚠ 报警图标，带脉冲动画
+- 将某条数据 O₂ 值设置为 19.5%（恰好等于阈值），该值不触发异常高亮
+- 同一条目中温度、TVOC、CO₂ 同时超阈值，三个异常值均独立红色高亮，各自出现 ⚠ 图标
+
+## 动效场景
+- 观察列表条目入场，每条数据有淡入动画（sensorFadeIn，0.5s）
+- 观察报警图标，存在摇晃动画（alarmIconShake，0.5s 周期），持续循环
+- 列表滚动到末尾后无缝衔接从头继续（CSS translateY(-50%) + 数据翻倍），无跳动或闪烁
+
+## 边界场景
+- 所有实验室传感器数据均正常，列表无任何红色高亮和报警图标
+- 列表数据只有 1 条，无缝滚动仍正常运行，不出现空白或跳帧
+
+---
+
+# 1.5 实验室实时风险预警模块测试点
+
+## 正常场景
+- 打开页面，模块固定高度为 320px，内容完整展示无超出裁剪
+- 查看模块顶部，本月预警响应总数以大字数字突出展示
+- 查看预警滚动列表，数据自动向上无缝循环滚动，速度约 30s 一轮
+- 查看每条预警数据，包含「实验室名称 - 二级单位」、异常传感器名称及数值（橙色高亮）、预警时间（YYYY-MM-DD HH:mm:ss 格式）
+- 每条预警条目左侧有 3px 宽橙色竖条装饰
+
+## 动效场景
+- 观察本月预警总数数字，存在发光文字动画（warnCountGlow），2s 为一个循环周期
+- 观察每条预警条目左侧橙色竖条，存在脉冲动画（warnBorderPulse），3s 为一个循环周期
+- 预警列表滚动到末尾后无缝衔接，无跳动
+
+## 边界场景
+- 将本月预警总数设置为 0，模块正常显示数字 0，无报错或 NaN
+- 预警列表数据为空，滚动区域不报错，不出现 undefined 或异常占位
+
+---
+
+# 1.6 智能环境感知应用设备统计模块测试点
+
+## 正常场景
+- 打开页面，模块顶部并排显示「在线设备数量」（科技蓝色数字）和「离线设备数量」（灰色数字）两个统计卡片
+- 查看模块下部左侧，仪表盘（ECharts gauge）正确渲染，指针指向对应在线率百分比位置
+- 量程范围覆盖 210°（最低）到 -30°（最高），三段渐变颜色：0~70% 暗蓝、70~90% 中蓝、90~100% 亮蓝
+- 查看模块下部右侧，纵向排列 4 项设备类型：电子信息铭牌、化学品智能终端、传感器、智能设备，各自显示对应数量
+
+## 边界场景
+- 将设备在线率设置为 0%，仪表盘指针指向量程最低端（210° 方向），不出现渲染错误
+- 将设备在线率设置为 100%，仪表盘指针指向量程最高端（-30° 方向），不出现渲染错误
+- 将离线设备数量设置为 0，对应卡片正确显示 0，不出现空白或 NaN
+
+---
+
+# 1.7 实验室设备分类及使用统计模块测试点
+
+## 正常场景
+- 打开页面，饼图（ECharts pie）正确渲染，内外径对应 radius ['30%','60%'] 呈现环形
+- 饼图展示 7 类设备分类：分析仪器、安全防护、化学试剂设备、电气设备、力学测试、环境监测、通用设备，各扇区颜色各异
+- 查看饼图右侧图例，纵向排列 7 类设备名称与颜色图标，与扇区一一对应
+- 查看模块中部，并排显示「设备总数」「使用总时长(h)」「设备使用率(%)」三个统计卡片，数值正确展示
+- 查看模块底部，并排显示「使用」（蓝）、「空闲」（绿）、「正常」（橙）、「维修」（红）四个状态卡片，颜色标识正确
+
+## 交互场景
+- 悬停底部状态卡片，卡片上浮并出现发光效果
+- 悬停饼图扇区，tooltip 弹出，背景色为 rgba(6,22,56,0.9)，边框为蓝色，显示设备分类名称和数量
+
+## 边界场景
+- 将某类设备数量设置为 0，饼图不渲染该扇区（或扇区比例为零），不报错
+- 将设备使用率设置为 0% 和 100%，对应卡片数值正确显示，不出现异常字符
+
+---
+
+# 页面二：视频监控 — 左侧建筑结构导航测试点
+
+## 正常场景
+- 切换到视频监控页，左侧导航栏宽度为 300px，应用面板样式（毛玻璃背景、边框、圆角）
+- 查看导航栏顶部，标题显示「建筑结构导航」
+- 查看搜索框，可正常点击聚焦并输入文字
+- 查看筛选下拉，展开后显示「安全技术研究所」「职业安全研究所」「化学品安全研究所」「矿山安全研究所」四个选项
+- 查看树状结构，默认展示院区节点，层级结构为：院区 → 楼栋 → 楼层 → 房间
+
+## 交互场景
+- 点击有子节点的树节点，子节点列表展开显示，再次点击子节点列表折叠
+- 展开子节点时，子节点以淡入动画进场（treeExpand，0.35s）
+- 点击树节点，该节点背景变为科技蓝并出现左侧竖线高亮，其他节点取消高亮
+- 悬停树节点，出现光扫效果（light sweep）从左到右扫过节点背景
+- 展开节点时，展开箭头变色并发光
+- 搜索框输入「3号楼」，树状结构过滤仅展示包含「3号楼」的节点，其余节点隐藏
+- 清空搜索框，树状结构恢复完整展示所有节点
+- 筛选下拉选择「化学品安全研究所」，树状结构仅展示该单位相关楼栋/楼层节点
+
+## 动效场景
+- 观察侧边栏，存在垂直扫描线动画（sidebarScan，5s 周期）
+- 观察侧边栏左边缘，存在发光呼吸动画（sidebarEdgeGlow，3s 周期）
+- 点击聚焦搜索框，边框出现发光效果；搜索框空闲时有周期性脉冲动画
+- 已选中的树节点持续有蓝光脉冲动画（treeSelectedGlow，2.5s 周期）
+
+## 异常场景
+- 搜索框输入不存在的楼栋名称（如「99号楼」），树状结构无匹配项展示，不报错、不崩溃
+- 筛选下拉切换不同单位，树状结构正确更新，不出现数据残留
+
+## 边界场景
+- 树状结构展开全部节点，滚动条正常出现并可滚动，侧边栏宽度保持 300px 不变
+
+---
+
+# 页面二：视频监控 — 右侧视频区域测试点
+
+## 正常场景
+- 切换到视频监控页，右侧视频区域填满剩余宽度（flex:1）
+- 查看面包屑区域，显示当前路径：院区 → 楼栋名称 → 楼层名称，文字清晰可读
+- 查看视频网格，以 3×3 九宫格排列展示 9 个摄像头格子，格子等宽等高均匀分布
+- 查看每个摄像头格子，外层渐变背景（科技蓝半透明）+ 内外双层边框装饰存在
+- 查看每个格子四角，存在 L 形发光装饰（cam-corner）
+- 查看每个格子左上角，显示绿色圆点（在线状态）和摄像头编号文字
+- 查看每个格子内部，存在扫描线纹理（repeating-linear-gradient）背景
+- 查看分页控件，显示「上一页」「第 X / Y 页」「下一页」
+
+## AI 智能摄像头场景
+- 查看每页第一个格子（AI 摄像头），边框和主题色为橙金色，替代普通格子的蓝色主题
+- 查看 AI 格子右上角，存在「AI 智能」徽章，背景为渐变色
+- 查看 AI 格子内扫描线颜色，为橙色（而非普通格子的蓝色）
+
+## 交互场景
+- 点击「下一页」按钮，九宫格内容切换为下一页摄像头，「第 X / Y 页」中 X 数值加一
+- 点击「上一页」按钮，九宫格内容切换为上一页摄像头，「第 X / Y 页」中 X 数值减一
+- 悬停任意摄像头格子，格子轻微放大（scale 增大），边框发光增强
+- 在左侧树状结构中选中某楼层节点，面包屑路径同步更新为对应院区/楼栋/楼层
+
+## 动效场景
+- 页面切换到视频监控时，右侧视频区域有淡入上浮入场动画（videoPageFadeIn，0.6s）
+- 观察面包屑底部，存在流光动画（breadcrumbFlow，5s 周期），文字有微光呼吸效果
+- 观察视频网格背景，存在网格线纹理和水平扫描线动画（gridScanLine，8s 周期）
+- 观察视频网格外框，存在边框呼吸发光动画（videoGridBreathe，5s 周期）
+- 九宫格 9 个格子入场时，有 stagger 动画（每格依次延迟 0.05s 进入）
+- 观察每个格子四角 L 形装饰，有呼吸发光动画（camCornerGlow，2.5s 周期，stagger 0.6s）
+- 观察每个格子框体，有整体呼吸发光动画（camFrameBreathe，4s 周期）
+- 观察格子内部，有移动扫描线动画（camInnerScan，6s 周期）从上到下循环扫过
+- 观察左上角在线状态圆点，有闪烁动画（dotBlink，2s 周期）
+- 观察 AI 徽章，有脉冲动画（aiBadgePulse，1.5s 周期）
+- 观察 AI 格子框体，有橙色呼吸动画（aiFrameBreathe，3s 周期）
+- 观察翻页按钮，空闲时有边框呼吸动画（pageBtnPulse，4s 周期）；悬停时有光扫效果
+- 观察右侧区域背景，存在漂浮微粒子动画（videoParticlesDrift，12s 周期）
+
+## 边界场景
+- 当前为第 1 页，点击「上一页」按钮，操作无效（按钮灰化或不响应），页码不变
+- 当前为最后一页，点击「下一页」按钮，操作无效（按钮灰化或不响应），页码不变
+- 总摄像头数量非 9 的整数倍（如 10 个），最后一页部分格子以空占位或特殊样式处理，不出现布局错乱
+
+---
+
+# 全屏预警弹窗测试点
+
+## 正常场景
+- 页面加载后等待约 15s，预警弹窗自动弹出（Demo 演示触发）
+- 弹窗展示时，全屏覆盖层呈现半透明红色，并有呼吸闪烁效果
+- 弹窗四周边框存在红色闪烁效果（0.8s 周期）
+- 弹窗内容区宽度为 900px，水平居中展示
+- 查看弹窗左侧信息区，完整显示：实验室（房号）、楼栋楼层、所属单位、异常参数（红色高亮）、当前数值（红色高亮）、实验室负责人、联系电话、预警时间
+- 预警时间格式为 YYYY-MM-DD HH:mm:ss，与触发时系统时间一致
+- 查看弹窗右侧（320px 宽），标题显示「实时监控画面」并有红色闪烁圆点
+- 右侧监控画面区域背景为暗红色，叠加扫描线纹理
+- 右侧监控画面左上角显示 REC 标识和摄像头名称
+- 查看弹窗底部，存在红色渐变背景的确认按钮
+
+## 交互场景
+- 点击确认按钮，弹窗关闭，页面背景红色覆盖层消失，大屏恢复正常展示
+- 悬停确认按钮，按钮出现发光效果
+- 调用 `showAlert(lab, building, unit, param, value, person, phone)` 函数，弹窗展示的各字段内容与传入参数一一对应
+
+## 动效场景
+- 弹窗激活时，全屏覆盖层有呼吸闪烁动画
+- 四周红色光晕（inset box-shadow）以 1s 周期进行快速明暗交替
+- 异常参数和当前数值字段以红色高亮显示，且持续可见
+
+## 边界场景
+- `showAlert()` 传入的 param 参数包含多个异常传感器名称（用逗号分隔），弹窗正确展示所有异常参数
+- `showAlert()` 传入的 phone 参数为空字符串，联系电话字段显示为空或占位符，不出现 undefined
+
+---
+
+# 自适应缩放功能测试点
+
+## 正常场景
+- 在 1920×1080 分辨率显示器下打开页面，内容以 1:1 比例填满屏幕，无缩放变形
+- 调整浏览器窗口至 1280×720，页面按 `Math.min(1280/1920, 720/1080)` 计算缩放比例，内容等比缩小并水平居中
+
+## 交互场景
+- 拖动浏览器窗口边缘持续改变尺寸，页面缩放比例实时跟随更新（resize 事件监听），无延迟卡顿
+
+## 边界场景
+- 将浏览器窗口缩小至 400×300（极小尺寸），页面缩放比按公式计算到极小值，内容等比缩小，不出现 JS 报错
+- 在宽屏显示器（3840×2160）下打开页面，页面等比放大，内容清晰，无模糊或错位
+- 浏览器窗口宽高比与 16:9 差异较大（如 4:3 的 1024×768），按短边约束缩放，页面内容不出现裁剪
+
+---
+
+# 自动全屏功能测试点
+
+## 正常场景
+- 首次点击页面任意位置，浏览器进入全屏模式，地址栏和标签栏隐藏，内容铺满屏幕
+
+## 边界场景
+- 进入全屏后按 ESC 键退出全屏，再次点击页面任意位置，不再重新触发全屏（`{ once: true }` 限制只触发一次）
+- 浏览器不支持 `requestFullscreen` API（如某些内嵌 WebView），点击页面不报错，页面功能正常使用
+
+---
+
+# 页面切换功能测试点
+
+## 正常场景
+- 调用 `switchPage('lab')`，实验室情况页面以 display 显示，视频监控页面以 display 隐藏，Tab 高亮正确切换
+- 调用 `switchPage('video')`，视频监控页面显示，实验室情况页面隐藏，Tab 高亮正确切换
+- 从视频监控页切回实验室情况页，约 100ms 后 ECharts 图表（环形图、堆叠柱状图、折线图、仪表盘、饼图）全部重新渲染正常
+
+## 边界场景
+- 在当前已是「实验室情况」页时再次点击「实验室情况」Tab，页面无异常刷新，ECharts 图表不出现重复初始化导致的错乱
+
+---
+
+# ECharts 图表通用测试点
+
+## 正常场景
+- 页面完成加载约 200ms 后，所有图表完成初始化，无空白容器或 loading 残留
+- 所有图表（环形图、堆叠柱状图、折线图、仪表盘、饼图）hover tooltip 背景色均为 rgba(6,22,56,0.9)，边框为蓝色
+
+## 交互场景
+- 调整浏览器窗口大小后，所有图表调用 `.resize()` 自适应填满各自容器，不出现图表溢出或空白区域
+
+## 异常场景
+- 将 `libs/echarts.min.js` 路径改为不存在的文件，页面打开时图表容器为空白，控制台报加载错误，但页面其他 HTML 内容和动效不崩溃
+
+---
+
+# 通用面板样式测试点
+
+## 正常场景
+- 查看各功能模块面板，圆角为 6px，内边距为 14px（上下）16px（左右）
+- 查看各面板顶部边缘，存在 2px 渐变高亮线（accent 色）
+- 查看各面板四角，存在 L 形角装饰元素（corner-deco）
+- 查看各面板标题左侧，存在 3px 宽竖线高亮条
+- 查看各面板，box-shadow 呈现外发光效果
+
+## 动效场景
+- 观察面板 box-shadow，存在呼吸发光动画（panelGlow，4s 周期）
+- 观察面板顶部扫描线，存在水平扫描线动画（panelScan，6s 周期），各面板 stagger 延迟不同
+- 观察面板四角装饰，存在呼吸缩放动画（cornerBreathe，3s 周期）
+- 观察面板标题竖条，存在发光脉冲动画（titleBarGlow，2.5s 周期）
+
+---
+
+# 全局背景与动效测试点
+
+## 正常场景
+- 查看页面背景，整体为 #020c1b → #061630 → #0a2550 深蓝渐变，无纯白或浅色区域
+- 查看页面背景，叠加有半透明技术网格覆盖层（水平和垂直网格线）
+- 观察页面背景，存在浮动粒子效果（particleDrift，20s 周期）持续漂浮运动
+
+## 动效场景
+- 所有 CSS `@keyframes` 动画均通过原生 CSS 实现，不依赖第三方动画库（jQuery Animate、GSAP 等）
+- 多个动画同时运行时（面板、图表、列表、背景粒子），页面运行流畅，无明显掉帧
+
+---
+
+# 设计规范测试点
+
+## 色彩规范
+- 面板背景色为 rgba(6, 22, 56, 0.82)，`backdrop-filter: blur(8px)` 毛玻璃效果正常渲染
+- 面板边框颜色为 rgba(72, 180, 255, 0.28)，半透明蓝色细边框可见
+- 主要正文文字颜色为 #d8f4ff（浅蓝白），辅助说明文字颜色为 #7eacc8（中蓝灰）
+- 安全/空闲状态使用 #36d399（绿色），警告/预警状态使用 #ffb020（橙黄），危险/异常状态使用 #ff4d4f（红色）
+- 实验室安全等级颜色：I级 #ff4d4f（红）、II级 #ff8c00（橙）、III级 #ffcc00（黄）、IV级 #3a7bff（蓝）
+
+## 字体规范
+- 页面字体按优先级加载：DIN Alternate > Alibaba PuHuiTi > PingFang SC > Microsoft YaHei > sans-serif，在当前操作系统可用字体中正确匹配
+
+## 语言规范
+- 页面所有标签、按钮、图例、提示文字均为简体中文，无英文（技术缩写如 TVOC、CO₂、O₂ 除外）
+
+## 兼容性
+- 在不支持 `backdrop-filter` 的浏览器中，面板有兜底背景色，不显示为完全透明
+
+---
+
+# 外部依赖与代码结构测试点
+
+## 正常场景
+- 在 `libs/reset.css` 路径下存在 Ant Design Reset CSS 文件时，页面基础样式（margin/padding/box-sizing 等）被正确重置
+- 在 `libs/echarts.min.js` 路径下存在 ECharts 5.5.0 文件时，所有图表正常初始化渲染
+- 查看 index.html 源码，所有样式代码在 `<style>` 标签内，所有脚本代码在 `<script>` 标签内，无外联自定义 CSS/JS 文件
+- 查看 index.html 源码，CSS 区块和 JS 区块之间有清晰的注释分隔各功能模块
+
+## 异常场景
+- `libs/reset.css` 文件缺失，页面样式受到浏览器默认样式影响，但 JS 功能和图表不报错，页面可正常使用
+- `libs/echarts.min.js` 文件缺失，控制台报 ECharts 未定义错误，图表区域空白，但导航栏、列表、动效等非图表功能不崩溃