调整测试用例

.claude/settings.local.json

@@ -0,0 +1,19 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(python -c \"import openpyxl; print\\(''openpyxl ok''\\)\")",
+      "Bash(node --version)",
+      "Bash(node -e \"const fs = require\\(''fs''\\); console.log\\(''node fs ok''\\);\")",
+      "Bash(npm list -g xlsx)",
+      "Bash(npm list -g exceljs)",
+      "Bash(cd /tmp)",
+      "Bash(npm install xlsx)",
+      "Bash(node \"e:/anKeYuan-largeScreen-1080/test_case/gen_test_case.js\")",
+      "Read(//tmp/**)",
+      "Bash(node -e \"const m = require\\(''C:/tmp_xlsx/node_modules/xlsx''\\); console.log\\(''ok'', typeof m\\)\")",
+      "Read(//e/anKeYuan-largeScreen-9600/test_case/**)",
+      "Bash(node -e \":*)",
+      "Bash(node \"e:/anKeYuan-largeScreen-1080/test_case/analyze_ref.js\")"
+    ]
+  }
+}

prompt/newPromptAddChem.md

@@ -1,42 +0,0 @@
-# 新增化学品管理模块数据统计及应急疏散引导
-
-重要约束说明：所有改动在原有的内容基础上改动，仅改动本prompt提到的新增的内容，未提及到的保持原内容，不做任何更改！
-
----
-
-增量更新模块：
-
-**实验室实时风险预警**
-
-该模块记录在保留原有实验室风险预警的情况下新增化学品违规带离报警信息，每条数据包括实验室信息（实验室名称（房号）-二级单位）、实验人员未正常使用违规带离、预警时间（日期-时-分-秒），两类数据融合在一个list中展示。
-
----
-
-新增模块：
-
-**化学品库存动态统计**：
-
-- 要求：在实验室信息页面右侧区域新增模块：化学品库存动态统计
-
-- 位置：右侧最下方，放在实验室设备分类及使用统计下方
-
-- 展示内容：
-  - 仅用一个饼图统计管控化学品与非管控化学品的库存量及占比，数据标注（分类名称+数量(L)+占比）直接显示在饼图扇区外侧引线处，不设Tab切换。
-  - 右侧统计区展示存量化学品总量（单位L）、管控类化学品总量及占比、非管控类化学品总量及占比、存量化学品总类目数，管控类使用红色系、非管控类使用青色系、总类目数使用金色系配色，各含SVG圆弧进度环。
-  - 所有化学品数量单位统一为L。
-
-**应急疏散弹窗**
-
-- 入口：在已有预案安全报警的的弹窗页面上新增一个按钮：应急疏散，点击进入应急疏散页面
-
-- 内容：
-
-  内容及排版如下：
-
-  ![cb1b9a4e0fd85f6abda374443cde2b1c](../assets/images/cb1b9a4e0fd85f6abda374443cde2b1c.jpg)
-
-​	需要在用户点击执行疏散按钮后根据图片简单标识疏散路线，用箭头标识。
-
-
-
-重要：未提及的其他模块不要改动，未提及的其他模块不要改动！

prompt/promptByStoney.md

@@ -1,90 +0,0 @@
-你是一名经验丰富的UI设计专家，精通高等院校实验室安全智慧化管控系统的整体设计。
-目前你来负责建设数据可视化大屏项目【中国安全生产科学研究院实验室安全智慧化管控中心】的UI设计。
-请根据以下功能描述，生成完整的UI设计稿，设计组件采用ant design，图表采用echarts。
-
-
-IDEA：中国安全生产科学研究院实验室安全智慧化管控中心
-THEME：科技蓝，科幻风（数据可视化大屏）
-CONTENT：
-整体项目分为两个页面，一个是实验室情况（默认），另一个页面为视频监控。
-### 实验室情况页面功能说明
-#### 0.整体布局
-整体数据可视化大屏分为通用导航栏、内容区（左、中、右），每个区域由上到下分别显示不同内容区块，具体排版内容如下：
-**通用导航栏**：
-- 顶部导航栏
-**左侧（由上到下）**：
-- 实验室基本情况统计
-- 实验室安全分级统计
-- 实验室进入人数统计及走势
-**中部（由上到下）**：
-- 实验环境安全智能感知
-- 实验室实时风险预警
-**右侧（由上到下）**：
-- 智能环境感知应用设备统计
-- 实验室设备分类及使用统计
-
-#### 1.各模块功能说明
-- 顶部导航栏：
-导航栏在整个页面最上面，左侧区域显示标题，中间区域显示两个页面切换按钮（实验室情况（进入页面时默认选中）、视频监控（点击切换至视频监控页面），右侧显示实时时钟、星期、天气信息。
-
-- 实验室基本情况统计：
-实验室基本情况统计分为两个部分：
-1.环形图
-以环形图展示实验室总数及各分级占比（I~IV级）及各分级对应的数量，颜色采用教育部规定的高校实验室安全等级划分的红橙黄蓝。
-2.状态标识
-显示当前实验室实时状态数据，分为使用、异常、空闲，单位为间，例如，使用20间。
-
-- 实验室安全分级统计
-实验室安全分级统计用于统计安科院各二级单位的实验室总数及分级数据，采用堆叠柱状图来统计。
-1.需要显示图例（I~IV级）
-2.图形采用堆叠柱状图
-3.x轴为二级单位名称，在单位名称下显示该二级单位实验室总数
-4.Y轴为实验室数量
-5.整体图表需要自动滚动，当X轴值超出显示范围时，自动从右往左滚动，滚动间隔5s，每次滚动渲染一个X轴数据
-
-- 实验室进入人数统计及走势
-数字翻牌器形式展示今日总进入人数及当前正在实验人数（两个数字翻牌器在一行），并在下方以折线图表形式统计与展示当天0-24点9个分隔时段的实验室进入人数及当前实验人数走势。
-
-- 实验环境安全智能感知
-该区域显示每间实验室硬件和传感器的的实时监测情况，若有异常需标红并触发预警弹窗。
-区域内由下而上滚动展示所有实验室条目。
-每个实验室条目包括实验室信息（实验室名称（房号）-二级单位）及传感器实时状态：温度、湿度、TVOC、CO2、O2等气体传感器实时监测状态数值，发生异常时，高亮显示报警图标及数值。
-
-- 实验室实时风险预警
-统计展示本月预警响应总数，并实时滚动轮播实验室发生异常预警通知，最新的通知在最上面。
-每条数据包括实验室信息（实验室名称（房号）-二级单位）、异常传感器及对应值，预警时间（日期-时-分-秒）
-
-- 智能环境感知应用设备统计
-顶部统计显示布设的智能物联应用设备在线、离线数量。
-下部左侧使用图表（速度仪表盘类）展示设备在线率百分比。
-下部右侧展示电子信息铭牌、化学品智能终端、传感器、智能设备总数。
-
-- 实验室设备分类及使用统计
-顶部使用饼图统计展示所有实验室设备分类的数量及分布情况。
-中部统计展示实验室设备总数、使用总时长、设备使用率。
-底部分别统计不同使用状态的设备数：使用、空闲、正常、维修。
-
-### 视频监控页面功能说明
-视频监控页主要为用户提供实验室实时监控查看功能，用户可通过展开左侧树状建筑结构查看对应的实时监控，分为通用导航栏、内容区（左、右），具体排版内容如下：
-**通用导航栏**：
-- 顶部导航栏（同实验室情况页）
-**左侧**：
-- 搜索框，可搜索楼栋楼层
-- 二级单位筛选项，点击下拉筛选二级单位
-- 建筑结构树状图，可展开折叠和选择，树从根节点为院区、楼栋、楼层、房间
-**右侧**：
-- 标题居左显示院区->楼栋名称->楼层名称
-- 显示9宫格16:9的实验室实时监控carema实时视频，其中第一个摄像头为智能摄像头，需要标注危险行为。
-- 显示翻页按钮
-
-
-## 通用功能：
-- 自适应缩放：设计稿默认要求1920*1080px，需支持自动适配屏幕
-- 自动全屏：初次进入页面时默认全屏显示
-- 全屏预警弹窗：当传感器监测数据超出阈值，需全屏弹窗红色预警，参考科幻电影中系统报警样式。
-- 页面切换，默认选中实验室情况按钮，点击视频监控按钮可切换至视频监控页面，在视频监控页面点击实验室情况可切回页面
-
-## 输出要求
-- 输出完成的可直接导入figma的可编辑的UI设计稿
-- 项目针对对象为中国国内科研院所
-- 提供优雅、配色舒服的UI

prompt/prompt_rewritebyCC.md

@@ -1,357 +0,0 @@
-# 中国安全生产科学研究院实验室安全智慧化管控中心 — 数据可视化大屏开发 Prompt
-
-## 角色定义
-
-你是一名资深前端开发工程师，擅长数据可视化大屏开发，精通 HTML/CSS/JavaScript、ECharts 图表库、CSS 动效设计。你需要根据以下完整的产品设计文档，生成一个**单文件 HTML 数据可视化大屏**项目。
-
----
-
-## 项目基本信息
-
-| 项目 | 说明 |
-|------|------|
-| **项目名称** | 中国安全生产科学研究院实验室安全智慧化管控中心 |
-| **项目类型** | 数据可视化大屏（单文件 HTML） |
-| **设计分辨率** | 1920 × 1080px |
-| **主题风格** | 科技蓝 + 科幻风 |
-| **目标用户** | 中国国内科研院所实验室安全管理人员 |
-| **技术栈** | 原生 HTML/CSS/JS + ECharts 5.5.0 + Ant Design Reset CSS |
-| **外部依赖** | 本地引用 `libs/reset.css`（Ant Design Reset）、`libs/echarts.min.js`（ECharts 5.5.0） |
-
----
-
-## 设计规范
-
-### 色彩体系
-
-```
-主背景色:     #020c1b → #061630 → #0a2550 (深蓝渐变)
-面板背景:     rgba(6, 22, 56, 0.82)（毛玻璃效果, backdrop-filter: blur(8px)）
-面板边框:     rgba(72, 180, 255, 0.28)
-主文字色:     #d8f4ff
-辅助文字色:   #7eacc8
-强调色:       #48d7ff（科技蓝）
-强调色2:      #3a7bff（深蓝）
-安全色:       #36d399（绿色，空闲/正常）
-警告色:       #ffb020（橙黄，预警）
-危险色:       #ff4d4f（红色，异常/报警）
-
-实验室安全等级配色（教育部标准）:
-  I级(红):    #ff4d4f
-  II级(橙):   #ff8c00
-  III级(黄):  #ffcc00
-  IV级(蓝):   #3a7bff
-```
-
-### 字体
-
-```
-font-family: "DIN Alternate", "Alibaba PuHuiTi", "PingFang SC", "Microsoft YaHei", sans-serif;
-```
-
-### 通用面板样式
-
-- 圆角 6px，内边距 14px 16px
-- 顶部 2px 渐变高亮线（accent 色）
-- 四角装饰元素（corner-deco），带呼吸动画
-- 面板标题左侧 3px 竖线高亮条
-- 面板 box-shadow 呼吸发光效果
-
----
-
-## 页面结构
-
-项目包含 **两个页面**，通过顶部导航栏按钮切换（JS 控制 `display`，无路由）：
-
-1. **实验室情况**（默认页面）
-2. **视频监控**
-
-### 通用导航栏（两个页面共享）
-
-| 位置 | 内容 |
-|------|------|
-| **左侧** | 项目标题「中国安全生产科学研究院实验室安全智慧化管控中心」，渐变文字（白→科技蓝） |
-| **中间** | 两个页面切换按钮：「实验室情况」（默认选中）、「视频监控」 |
-| **右侧** | 天气信息 + 星期 + 实时时钟（HH:MM:SS，每秒更新） |
-
-导航栏高度 72px，底部有渐变分割线 + 流光动画。
-
----
-
-## 页面一：实验室情况（三栏布局）
-
-整体布局为左（440px）、中（自适应）、右（440px）三栏，间距 14px。
-
-### 左栏模块（由上到下）
-
-#### 1.1 实验室基本情况统计（固定高度 260px）
-
-**环形图**（ECharts pie, radius ['45%','70%']）：
-- 展示实验室总数（中心标注数字 + "实验室总数"）
-- 四个分级占比：I级(红)、II级(橙)、III级(黄)、IV级(蓝)
-- 右侧纵向图例
-
-**状态卡片**（3个并排）：
-- 使用 XX 间（科技蓝色）
-- 异常 XX 间（红色）
-- 空闲 XX 间（绿色）
-- 卡片带呼吸发光动画，stagger 间隔 1.3s
-
-#### 1.2 实验室安全分级统计（flex:1 自适应高度）
-
-**堆叠柱状图**（ECharts bar, stack）：
-- X 轴：各二级单位名称（换行显示），名称下方显示该单位实验室总数
-- Y 轴：实验室数量
-- 四组堆叠数据：I级、II级、III级、IV级
-- 图例显示在顶部
-- **自动滚动**：使用 `dataZoom` 实现，每 5 秒向右滚动一个单位，初始显示 6 个单位，超出后循环
-
-#### 1.3 实验室进入人数统计及走势（固定高度 280px）
-
-**数字翻牌器**（两组并排）：
-- 今日总进入人数（5位数字）
-- 当前实验人数（4位数字）
-- 每个数字为独立方块（32×42px），渐变背景 + 边框发光
-
-**折线图**（ECharts line, smooth）：
-- 双折线：进入人数（科技蓝）、实验人数（深蓝）
-- X 轴：0:00 ~ 24:00 共 9 个时段
-- 面积填充渐变
-
-### 中栏模块（由上到下）
-
-#### 1.4 实验环境安全智能感知（flex:1 自适应高度）
-
-**自动滚动列表**：
-- 使用 CSS `translateY(-50%)` + 数据翻倍实现无缝滚动，速度 40s 一轮
-- 每条数据包含：
-  - 实验室名称（房号）+ 所属二级单位
-  - 5 个传感器值：温度、湿度、TVOC、CO₂、O₂
-- 异常值判定规则：
-  - 温度 > 30°C
-  - TVOC > 1.5 mg/m³
-  - CO₂ > 900 ppm
-  - O₂ < 19.5%
-- 异常时：高亮红色 + ⚠ 报警图标 + 脉冲 box-shadow 动画
-
-#### 1.5 实验室实时风险预警（固定高度 320px）
-
-**预警统计**：本月预警响应总数（大字数字 + 发光文字动画）
-
-**滚动预警列表**：
-- 无缝循环滚动（30s 一轮）
-- 每条数据：
-  - 实验室名称 - 二级单位
-  - 异常传感器及数值（橙色高亮）
-  - 预警时间（YYYY-MM-DD HH:mm:ss）
-- 左侧 3px 橙色竖条 + 脉冲动画
-
-### 右栏模块（由上到下）
-
-#### 1.6 智能环境感知应用设备统计（flex:1）
-
-**顶部统计卡片**（2个并排）：
-- 在线设备数量（科技蓝）
-- 离线设备数量（灰色）
-
-**下部左侧**：仪表盘（ECharts gauge）
-- 展示设备在线率百分比
-- 210° ~ -30° 范围，三段颜色（70% 暗蓝, 90% 中蓝, 100% 亮蓝）
-
-**下部右侧**：设备类型列表（4项纵排）
-- 电子信息铭牌、化学品智能终端、传感器、智能设备
-- 各自对应数量
-
-#### 1.7 实验室设备分类及使用统计（flex:1）
-
-**饼图**（ECharts pie, radius ['30%','60%']）：
-- 7 类设备分类：分析仪器、安全防护、化学试剂设备、电气设备、力学测试、环境监测、通用设备
-- 右侧纵向图例
-
-**中部统计**（3个并排卡片）：
-- 设备总数、使用总时长(h)、设备使用率(%)
-
-**底部状态统计**（4个并排卡片）：
-- 使用(蓝)、空闲(绿)、正常(橙)、维修(红)
-
----
-
-## 页面二：视频监控（两栏布局）
-
-### 左侧导航栏（300px，panel 样式）
-
-| 组件 | 说明 |
-|------|------|
-| **标题** | "建筑结构导航" |
-| **搜索框** | 可搜索楼栋/楼层，聚焦时边框发光 |
-| **筛选下拉** | 按二级单位筛选（安全技术研究所、职业安全研究所、化学品安全研究所、矿山安全研究所） |
-| **树状结构** | 可展开/折叠，层级为：院区 → 楼栋 → 楼层 → 房间 |
-
-树节点交互：
-- 点击展开/折叠子节点
-- 选中节点高亮（科技蓝背景 + 左侧竖线）
-- 悬停光扫效果（light sweep）
-- 子节点展开时有淡入动画
-- 箭头展开时变色发光
-
-### 右侧视频区域（flex:1）
-
-| 组件 | 说明 |
-|------|------|
-| **面包屑** | 显示当前路径：院区 → 楼栋名称 → 楼层名称 |
-| **视频网格** | 3×3 九宫格，每个格子为一个摄像头 |
-| **分页** | 上一页 / 第 X / Y 页 / 下一页 |
-
-**摄像头格子（cam-frame）科幻风边框设计**：
-- 外层渐变背景（科技蓝半透明）+ 内外双层边框
-- 四角 L 形发光装饰（cam-corner），带呼吸动画（stagger 间隔 0.6s）
-- 内部扫描线纹理（repeating-linear-gradient）
-- 摄像头内移动扫描线动画（6s 周期）
-- 左上角显示在线状态圆点（绿色闪烁）+ 摄像头编号
-- 框体整体呼吸发光动画（4s 周期）
-- 悬停时轻微放大 + 增强发光
-- 九宫格 stagger 入场动画（每格延迟 0.05s）
-
-**AI 智能摄像头**（每页第一个）：
-- 橙金色主题替代蓝色
-- 右上角 "AI 智能" 徽章（渐变背景 + 脉冲动画）
-- 内部扫描线改为橙色
-
----
-
-## 全屏预警弹窗
-
-当传感器数据超出阈值时触发，参考科幻电影系统报警风格。
-
-### 弹窗结构（900px 宽）
-
-**覆盖层效果**：
-- 全屏半透明红色覆盖 + 呼吸闪烁
-- 四周大面积红色光晕（inset box-shadow），1s 周期快速明暗交替
-- 四边红色光边框闪烁（0.8s 周期）
-
-**弹窗内容（左右布局）**：
-
-左侧信息区（flex:1）：
-
-| 字段 | 说明 |
-|------|------|
-| 实验室 | 实验室名称（房号） |
-| 楼栋楼层 | 楼栋-楼层 |
-| 所属单位 | 二级单位名称 |
-| 异常参数 | 异常传感器名称（红色高亮） |
-| 当前数值 | 异常数值（红色高亮） |
-| 实验室负责人 | 负责人姓名 |
-| 联系电话 | 负责人电话 |
-| 预警时间 | YYYY-MM-DD HH:mm:ss |
-
-右侧视频区（320px）：
-- 标题 "实时监控画面" + 红色闪烁圆点
-- 实时监控画面区域（暗红色背景 + 扫描线纹理）
-- 左上角 REC 标识 + 摄像头名称
-
-**底部**：确认按钮（红色渐变，悬停发光）
-
-### 触发方式
-
-JS 函数：`showAlert(lab, building, unit, param, value, person, phone)`
-
----
-
-## 动效与光效规范
-
-### 面板动效
-- 面板 box-shadow 呼吸发光（`panelGlow`, 4s 周期）
-- 面板顶部水平扫描线（`panelScan`, 6s 周期，各面板 stagger 延迟）
-- 面板四角装饰呼吸动画（`cornerBreathe`, 3s 周期）
-- 面板标题左侧竖条发光脉冲（`titleBarGlow`, 2.5s）
-
-### 导航栏动效
-- 底部边缘流光（`navFlow`, 4s）
-- 标题文字 drop-shadow 脉冲（`titleGlow`, 3s）
-- 时钟 text-shadow 脉冲（`clockPulse`, 2s）
-- 选中 Tab 发光呼吸（`tabGlow`, 2.5s）
-
-### 数据卡片动效
-- 状态卡片呼吸（`cardBreathe`, 4s, stagger 1.3s）
-- 翻牌器数字发光（`digitGlow`, 2s）
-- 设备类型项悬停位移 + 边框发光
-- 各统计卡片悬停上浮 + 发光
-
-### 列表动效
-- 传感器条目入场淡入（`sensorFadeIn`, 0.5s）
-- 预警条目左边框脉冲（`warnBorderPulse`, 3s）
-- 预警总数数字发光（`warnCountGlow`, 2s）
-- 报警图标摇晃（`alarmIconShake`, 0.5s）
-
-### 视频监控页动效
-- 页面入场淡入上浮（`videoPageFadeIn`, 0.6s）
-- 侧边栏垂直扫描线（`sidebarScan`, 5s）
-- 侧边栏左边缘发光呼吸（`sidebarEdgeGlow`, 3s）
-- 搜索框/筛选框聚焦发光 + 空闲脉冲
-- 树节点悬停光扫 + 选中节点蓝光脉冲（`treeSelectedGlow`, 2.5s）
-- 树节点展开淡入（`treeExpand`, 0.35s）
-- 面包屑底部流光（`breadcrumbFlow`, 5s）+ 文字微光呼吸
-- 视频网格边框呼吸（`videoGridBreathe`, 5s）+ 技术网格背景
-- 视频网格水平扫描线（`gridScanLine`, 8s）
-- 摄像头格子 stagger 入场（`camCellEntrance`, 0.5s）
-- 摄像头角标发光呼吸（`camCornerGlow`, 2.5s, stagger 0.6s）
-- 摄像头框体呼吸（`camFrameBreathe`, 4s）
-- 摄像头内扫描线（`camInnerScan`, 6s）
-- 在线圆点闪烁（`dotBlink`, 2s）
-- AI 徽章脉冲（`aiBadgePulse`, 1.5s）
-- AI 框体特殊橙色呼吸（`aiFrameBreathe`, 3s）
-- 翻页按钮悬停光扫 + 空闲边框呼吸（`pageBtnPulse`, 4s）
-- 右侧背景漂浮微粒子（`videoParticlesDrift`, 12s）
-
-### 全局背景
-- 技术网格覆盖层（半透明网格线）
-- 浮动粒子效果（`particleDrift`, 20s）
-
----
-
-## 通用功能要求
-
-### 自适应缩放
-- 设计稿固定 1920×1080px
-- 通过 JS 计算 `Math.min(vw/1920, vh/1080)` 缩放比
-- 使用 CSS `transform: scale()` 居中缩放
-- 监听 `resize` 事件实时更新
-
-### 自动全屏
-- 首次点击页面时调用 `requestFullscreen()`
-- 使用 `{ once: true }` 确保只触发一次
-
-### 页面切换
-- JS 函数 `switchPage('lab' | 'video')`
-- 切换时更新 Tab 选中状态 + 页面显示
-- 切回实验室页面时重新初始化 ECharts（延迟 100ms）
-
-### ECharts 图表
-- 统一 tooltip 样式：深色背景 `rgba(6,22,56,0.9)` + 蓝色边框
-- resize 时所有图表调用 `.resize()`
-- 图表初始化延迟 200ms（等待 DOM 渲染）
-
----
-
-## 文件结构
-
-```
-project/
-├── index.html              # 主文件（单文件，包含全部 CSS + JS）
-└── libs/
-    ├── reset.css            # Ant Design 5.28.0 Reset CSS
-    └── echarts.min.js       # ECharts 5.5.0
-```
-
----
-
-## 输出要求
-
-1. 输出**单个完整的 HTML 文件**，所有 CSS 写在 `<style>` 标签内，所有 JS 写在 `<script>` 标签内
-2. 外部依赖通过本地相对路径引用（`libs/reset.css`、`libs/echarts.min.js`）
-3. 使用 Demo 模拟数据填充所有模块，确保页面打开即有完整展示效果
-4. 所有动效通过 CSS `@keyframes` 实现，不使用第三方动画库
-5. 预警弹窗在页面加载 15 秒后自动触发一次（Demo 演示用）
-6. 代码结构清晰，使用注释分隔各模块（CSS 区块 / HTML 区块 / JS 区块）
-7. 中文界面，所有标签和文案使用简体中文

prototype-ui/libs/reset.css

@@ -1,252 +0,0 @@
-/* stylelint-disable */
-html,
-body {
-  width: 100%;
-  height: 100%;
-}
-input::-ms-clear,
-input::-ms-reveal {
-  display: none;
-}
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-html {
-  font-family: sans-serif;
-  line-height: 1.15;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-  -ms-overflow-style: scrollbar;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-@-ms-viewport {
-  width: device-width;
-}
-body {
-  margin: 0;
-}
-[tabindex='-1']:focus {
-  outline: none;
-}
-hr {
-  box-sizing: content-box;
-  height: 0;
-  overflow: visible;
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin-top: 0;
-  margin-bottom: 0.5em;
-  font-weight: 500;
-}
-p {
-  margin-top: 0;
-  margin-bottom: 1em;
-}
-abbr[title],
-abbr[data-original-title] {
-  -webkit-text-decoration: underline dotted;
-  text-decoration: underline dotted;
-  border-bottom: 0;
-  cursor: help;
-}
-address {
-  margin-bottom: 1em;
-  font-style: normal;
-  line-height: inherit;
-}
-input[type='text'],
-input[type='password'],
-input[type='number'],
-textarea {
-  -webkit-appearance: none;
-}
-ol,
-ul,
-dl {
-  margin-top: 0;
-  margin-bottom: 1em;
-}
-ol ol,
-ul ul,
-ol ul,
-ul ol {
-  margin-bottom: 0;
-}
-dt {
-  font-weight: 500;
-}
-dd {
-  margin-bottom: 0.5em;
-  margin-left: 0;
-}
-blockquote {
-  margin: 0 0 1em;
-}
-dfn {
-  font-style: italic;
-}
-b,
-strong {
-  font-weight: bolder;
-}
-small {
-  font-size: 80%;
-}
-sub,
-sup {
-  position: relative;
-  font-size: 75%;
-  line-height: 0;
-  vertical-align: baseline;
-}
-sub {
-  bottom: -0.25em;
-}
-sup {
-  top: -0.5em;
-}
-pre,
-code,
-kbd,
-samp {
-  font-size: 1em;
-  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
-}
-pre {
-  margin-top: 0;
-  margin-bottom: 1em;
-  overflow: auto;
-}
-figure {
-  margin: 0 0 1em;
-}
-img {
-  vertical-align: middle;
-  border-style: none;
-}
-a,
-area,
-button,
-[role='button'],
-input:not([type='range']),
-label,
-select,
-summary,
-textarea {
-  touch-action: manipulation;
-}
-table {
-  border-collapse: collapse;
-}
-caption {
-  padding-top: 0.75em;
-  padding-bottom: 0.3em;
-  text-align: left;
-  caption-side: bottom;
-}
-input,
-button,
-select,
-optgroup,
-textarea {
-  margin: 0;
-  color: inherit;
-  font-size: inherit;
-  font-family: inherit;
-  line-height: inherit;
-}
-button,
-input {
-  overflow: visible;
-}
-button,
-select {
-  text-transform: none;
-}
-button,
-html [type='button'],
-[type='reset'],
-[type='submit'] {
-  -webkit-appearance: button;
-}
-button::-moz-focus-inner,
-[type='button']::-moz-focus-inner,
-[type='reset']::-moz-focus-inner,
-[type='submit']::-moz-focus-inner {
-  padding: 0;
-  border-style: none;
-}
-input[type='radio'],
-input[type='checkbox'] {
-  box-sizing: border-box;
-  padding: 0;
-}
-input[type='date'],
-input[type='time'],
-input[type='datetime-local'],
-input[type='month'] {
-  -webkit-appearance: listbox;
-}
-textarea {
-  overflow: auto;
-  resize: vertical;
-}
-fieldset {
-  min-width: 0;
-  margin: 0;
-  padding: 0;
-  border: 0;
-}
-legend {
-  display: block;
-  width: 100%;
-  max-width: 100%;
-  margin-bottom: 0.5em;
-  padding: 0;
-  color: inherit;
-  font-size: 1.5em;
-  line-height: inherit;
-  white-space: normal;
-}
-progress {
-  vertical-align: baseline;
-}
-[type='number']::-webkit-inner-spin-button,
-[type='number']::-webkit-outer-spin-button {
-  height: auto;
-}
-[type='search'] {
-  outline-offset: -2px;
-  -webkit-appearance: none;
-}
-[type='search']::-webkit-search-cancel-button,
-[type='search']::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-::-webkit-file-upload-button {
-  font: inherit;
-  -webkit-appearance: button;
-}
-output {
-  display: inline-block;
-}
-summary {
-  display: list-item;
-}
-template {
-  display: none;
-}
-[hidden] {
-  display: none !important;
-}
-mark {
-  padding: 0.2em;
-  background-color: #feffe6;
-}

test_case/analyze_ref.js

@@ -0,0 +1,42 @@
+const XLSX = require('C:/tmp_xlsx/node_modules/xlsx');
+const wb = XLSX.readFile('E:/anKeYuan-largeScreen-9600/test_case/test_case_new.xlsx', {cellStyles: true});
+const ws = wb.Sheets[wb.SheetNames[0]];
+const data = XLSX.utils.sheet_to_json(ws, {header:1});
+
+// 颜色与测试类型映射
+const colorMap = {};
+for (let i = 1; i < data.length; i++) {
+  const r = i + 1;
+  const cell = ws['A' + r];
+  const typeCell = ws['D' + r];
+  if (cell && cell.s && typeCell) {
+    const color = cell.s.fgColor && cell.s.fgColor.rgb;
+    const type = typeCell.v || typeCell.w || '';
+    if (color && type) {
+      if (!colorMap[color]) colorMap[color] = {};
+      colorMap[color][type] = (colorMap[color][type] || 0) + 1;
+    }
+  }
+}
+console.log('颜色与测试类型映射:', JSON.stringify(colorMap, null, 2));
+
+// 优先级分布
+const priorities = {};
+for (let i = 1; i < data.length; i++) {
+  const cell = ws['H' + (i + 1)];
+  if (cell) priorities[cell.v || cell.w] = (priorities[cell.v || cell.w] || 0) + 1;
+}
+console.log('优先级分布:', JSON.stringify(priorities));
+
+// 看列宽（实际像素宽度信息）从文件本身提取（xlsx不保存列宽）
+// 看字体/对齐等更多样式
+const colCell = ws['A1'];
+console.log('\n标题行A1完整cell:', JSON.stringify(colCell));
+const dataCell = ws['C2'];
+console.log('数据行C2完整cell:', JSON.stringify(dataCell));
+
+// 打印示例参考行完整内容
+console.log('\n参考行1完整:', JSON.stringify(data[1]));
+console.log('参考行2完整:', JSON.stringify(data[2]));
+console.log('参考行6完整(异常类型):', JSON.stringify(data[6]));
+console.log('参考行8完整(边界类型):', JSON.stringify(data[8]));

test_pro/test_case.md

@@ -1,351 +0,0 @@
-# 中国安全生产科学研究院实验室安全智慧化管控中心 数据可视化大屏测试用例
-
----
-
-# 一、通用导航栏模块测试点
-
-## 正常场景
-- 打开页面，导航栏左侧是否正确显示项目标题「中国安全生产科学研究院实验室安全智慧化管控中心」
-- 导航栏标题文字是否呈现白色到科技蓝的渐变效果
-- 导航栏中间是否显示「实验室情况」和「视频监控」两个切换按钮
-- 默认加载时「实验室情况」按钮是否处于选中高亮状态
-- 导航栏右侧是否正确展示天气信息、星期、实时时钟
-- 实时时钟是否按 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

@@ -1,413 +0,0 @@
-# 中国安全生产科学研究院实验室安全智慧化管控中心 数据可视化大屏测试点
-
----
-
-# 导航栏模块测试点
-
-## 正常场景
-- 打开 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 未定义错误，图表区域空白，但导航栏、列表、动效等非图表功能不崩溃

test_pro/test_case_pro.md

@@ -1,50 +1,170 @@
 # 角色定义
-你是一位经验丰富的软件测试工程师，擅长从复杂的原始需求中精准提炼测试点，具备严密的逻辑思维与全面的测试视角。
+
+你是一位经验丰富的软件测试工程师，擅长从复杂的产品设计文档中精准提炼测试点，设计结构清晰、可执行、覆盖全面的测试用例，并以规范格式输出为 Excel 文件。
+
+---
 
 ## 核心技能
 
 ### 技能 1：需求深度剖析
-- 深入理解原始需求，识别显性需求与隐性需求
-- 对模糊或不明确的需求进行合理推断，确保覆盖完整
+
+- 逐模块解读产品设计文档，识别显性需求（界面展示、交互行为）与隐性需求（数据逻辑、性能边界、异常兜底）
+- 对模糊或不明确的需求进行合理推断，确保测试覆盖完整
+- 区分功能需求、交互需求、数据逻辑需求、样式动效需求、兼容性需求
 
 ### 技能 2：多样化用例设计
-- 熟练运用等价类划分、边界值分析、场景法、错误推测法、正交试验法、流程分析法等方法
+
+- 熟练运用：**场景法、等价类划分、边界值分析、错误推测法、流程分析法、正交试验法**
 - 根据需求类型选择最适合的设计方法，避免过度或不足
+- 每个功能模块必须同时覆盖：**正常场景 + 异常场景 + 边界场景**
 
 ### 技能 3：全面思维发散
-- 覆盖正常流程之外的异常场景，包括：非法值、空值、越界数据、违反业务规则的数据
-- 关注极端情况、并发场景、系统边界等特殊情形
+
+- **正常场景**：功能按预期执行、数据正确展示、交互响应正确、样式动效符合规范
+- **异常场景**：接口超时或报错、网络断开、数据为空或 NaN、资源加载失败、状态非法
+- **边界场景**：临界数值（如恰好等于阈值）、极端数据量（0条/超大数量）、跨日/跨月/跨年时刻、最大字符数、最小/最大分辨率
 
 ### 技能 4：用户视角模拟
-- 站在真实用户的角度设计场景，模拟不同使用习惯与操作路径
-- 关注用户预期结果与实际行为的一致性
+
+- 站在真实用户角度设计场景，模拟不同操作路径与使用习惯
+- 关注用户预期结果与系统实际行为的一致性
+
+---
 
 ## 工作流程
-1. **需求分析**：拆解输入需求，识别所有功能点、业务规则与约束条件
-2. **测试点设计**：针对每个需求点，结合正常/异常/边界/用户场景，设计对应测试点
-3. **分类整理**：按功能模块或测试类型对测试点进行归类，逻辑清晰地输出
 
-## 输出格式
-以 Markdown 源代码形式输出，按模块分组，示例如下：
+1. **需求分析**：逐模块拆解设计文档，识别所有功能点、业务规则与约束条件
+2. **模块编号**：为每个功能模块分配**两位数序号**（01、02、03…），按页面布局或功能重要性排序
+3. **测试点设计**：每个模块分别针对正常/异常/边界三类场景，设计具体可执行的测试用例
+4. **字段规范填写**：严格按照下方输出规范填写每个字段，不得省略
+5. **生成 Excel**：按指定颜色方案和列宽输出带格式的 .xlsx 文件
 
-```
-# 登录模块测试点
+---
 
-## 正常场景
-- 有效用户名 + 有效密码，是否登录成功
+## 输出规范
 
-## 异常场景
-- 有效用户名 + 无效密码，是否登录失败并提示错误信息
-- 用户名为空，是否提示必填
-- 密码为空，是否提示必填
-- 用户名超出最大长度，是否正确处理
+### 一、文件格式要求
 
-## 边界场景
-- 密码恰好达到最小长度限制，是否允许登录
-- 连续登录失败 N 次后，是否触发锁定机制
-```
+- 文件格式：`.xlsx`
+- Sheet 名称：`测试用例`
+- 使用支持样式写入的库（如 `xlsx-js-style`）生成，确保颜色方案正确渲染
 
-## 输出规范
-1. 仅输出测试点，不输出详细的测试用例步骤
-2. 输出必须为 Markdown 源代码格式，不得使用渲染后的格式
-3. 每条测试点表述简洁、准确，包含**操作动作**与**预期结果**两个要素，避免歧义
+### 二、颜色方案（严格遵守）
+
+| 行类型 | 背景色名称 | 十六进制色码 | 行高 | 字体 |
+|--------|-----------|------------|------|------|
+| **标题行**（第1行）| 海军蓝 | `#000080` | 30pt | 白色、加粗 |
+| **正常场景**数据行 | 浅青色 | `#CCFFFF` | 25pt | 默认 |
+| **异常场景**数据行 | 浅粉红 | `#FF99CC` | 25pt | 默认 |
+| **边界场景**数据行 | 浅黄色 | `#FFFF99` | 25pt | 默认 |
+
+所有单元格：水平左对齐、垂直居中、开启自动换行。
+
+### 三、列配置（共 10 列，A～J）
+
+| 列 | 字段名称 | 推荐列宽（wch）|
+|----|---------|--------------|
+| A | 用例编号 | 12 |
+| B | 模块名称 | 20 |
+| C | 测试场景 | 36 |
+| D | 测试类型 | 10 |
+| E | 前置条件 | 32 |
+| F | 测试操作 | 40 |
+| G | 预期结果 | 55 |
+| H | 优先级 | 8 |
+| I | 设计方法 | 12 |
+| J | 测试结果 | 14 |
+
+### 四、字段规范详解
+
+#### 用例编号
+- 格式：`TC-模块两位数字-序号三位数字`
+- 示例：`TC-01-001`、`TC-07-012`、`TC-13-005`
+- 规则：模块内序号从 `001` 开始连续递增，不同场景类型（正常/异常/边界）**不重置**序号
+
+#### 模块名称
+- 与设计文档中的功能模块名称保持一致
+- 同一模块所有用例的模块名称**完全相同**
+
+#### 测试场景
+- 简明描述该条用例的测试目标，**15～35字**
+- 表述格式：`[操作对象/条件] + [测试动作/状态] + [关注点]`
+- 示例：`温度异常（>30°C）触发红色高亮+报警图标`、`数据接口超时时图表区域降级展示`
+
+#### 测试类型
+从以下三个固定值中选择**一个**（严格匹配，不得自造）：
+
+| 值 | 适用场景 |
+|----|---------|
+| `正常场景` | 功能按预期正常执行的主路径 |
+| `异常场景` | 输入异常、系统异常、网络异常等错误路径 |
+| `边界场景` | 临界值、极端数据量、边界条件、特殊时刻 |
+
+#### 前置条件
+- 描述执行本用例前的初始状态，**20～45字**
+- 包含：系统运行状态 + 数据配置状态 + 必要的环境准备
+- 示例：`系统正常运行，数据接口正常返回`、`后台配置某分级数量为 0`
+
+#### 测试操作
+- 描述具体的操作步骤，**15～40字**
+- 聚焦于「做什么」，使用动词开头
+- 示例：`观察左栏顶部环形图渲染结果`、`等待 5 秒观察图表滚动行为`
+
+#### 预期结果
+- 描述系统的预期行为与输出，**20～70字**，需可被客观验证
+- 包含：功能正确性 + 数据正确性 + 界面状态（必要时）
+- 示例：`对应扇区不渲染，不出现"0间/0%"孤立标签`、`每隔 5 秒自动向左滚动 1 个 X 轴单位，动画流畅`
+
+#### 优先级
+从以下三个固定值中选择**一个**：
+
+| 值 | 含义 | 适用场景 |
+|----|------|---------|
+| `P0` | 核心/阻断 | 核心功能正确性、数据逻辑自洽、崩溃/白屏问题 |
+| `P1` | 重要 | 主要交互功能、重要数据展示、主要异常兜底 |
+| `P2` | 一般 | 细节样式、动画效果、非关键体验优化 |
+
+#### 设计方法
+从以下方法中选择**最适合**的一个：
+
+`场景法` · `等价类划分` · `边界值分析` · `错误推测法` · `流程分析法` · `正交试验法`
+
+#### 测试结果
+- **留空**，由测试人员执行后填写（通过 / 不通过）
+
+---
+
+## 测试覆盖要求
+
+每个功能模块的用例建议配比：
+
+| 场景类型 | 建议数量 | 侧重点 |
+|---------|---------|-------|
+| 正常场景 | 3 ～ 8 条 | 覆盖模块所有主要功能点与数据展示 |
+| 异常场景 | 1 ～ 4 条 | 接口异常、数据为空/非法、资源加载失败 |
+| 边界场景 | 1 ～ 4 条 | 临界数值、数量为 0 或极大值、极端状态 |
+
+**P0 优先级覆盖要求**：核心数据逻辑校验（如数值求和自洽）、主要功能可用性、阻断性异常兜底，必须设计 P0 用例。
+
+---
+
+## 输出示例
+
+以下为三种场景类型的典型用例示例（Excel 行，对应颜色见颜色方案）：
+
+| 用例编号 | 模块名称 | 测试场景 | 测试类型 | 前置条件 | 测试操作 | 预期结果 | 优先级 | 设计方法 | 测试结果 |
+|---------|---------|---------|---------|---------|---------|---------|-------|---------|---------|
+| TC-01-001 | 顶部导航栏 | 实时时钟以HH:MM:SS格式每秒刷新 | 正常场景 | 系统正常运行，网络连接正常，页面已完整加载 | 观察顶部导航栏时钟区域 | 时钟以HH:MM:SS格式正确显示，每秒刷新一次且无闪烁 | P0 | 场景法 | |
+| TC-01-006 | 顶部导航栏 | 网络断开时天气区域兜底展示 | 异常场景 | 系统正常运行，页面已加载；断开网络连接 | 断网后观察右侧天气区域 | 显示"--"或"暂无数据"兜底，无空白区域或JS报错 | P0 | 错误推测法 | |
+| TC-01-008 | 顶部导航栏 | 跨日00:00:00日期星期同步切换 | 边界场景 | 系统持续运行至接近午夜 | 在00:00:00前后观察日期与星期变化 | 日期与星期同步切换，不出现跨日延迟 | P0 | 边界值分析 | |
+
+---
+
+## 注意事项
+
+1. **不输出 Markdown 格式的测试点列表**，直接生成符合规范的 `.xlsx` 文件
+2. 每条用例**必须填写全部 10 个字段**，不得留空（测试结果列除外）
+3. 同一模块内所有用例的「模块名称」字段**完全一致**
+4. 测试场景描述应**简洁精准**，避免与预期结果重复表述
+5. 预期结果必须**可被客观判断**，避免使用"正常""合理"等模糊词汇
+6. 异常场景的前置条件须清楚说明**如何制造该异常**（如：后台配置/模拟网络断开/修改数据）