整理aigc结构，完善使用说明

README.md

@@ -0,0 +1,48 @@
+# 使用说明
+
+####0 Intro
+
+**分支**：该分支为北京安科院(chinaSafety)一期项目数据可视化UI。
+
+**尺寸**：1920*1080px
+
+**场景**：75寸电视
+
+---
+
+
+
+####1 文件目录说明
+
+```bash
+# 所有操作请务必在prototype分支执行，不要影响其他dev或release分支
+chinaSafety                            
+├── prompt                               # 提示词仓库
+│   ├── prompt_rewritebyCC.md            # CC重写后的提示词
+│   └── promptByStoney.md                # 原始提示词
+├── prototype-ui                         # 高保真UI
+│   ├── agentDemo_dashboard.html
+│   └── libs
+└── README.md
+```
+
+#### 2 Dev/QA 使用
+
+因该项目代码远端仓库创建时间早于产品生成原型时间，无法执行完整的workflow流转，所以该项目高保真原型作为纯净分支推送及迭代，不影响其他已有分支。
+
+⚠️  @anne@lihongfei 提交生成内容是注意确认分支，建议使用时直接拉取prototype分支至workspace即可。
+
+```bash
+mkdir new_folder_name   # 新建目录
+cd new_floder_name      
+git clone -b prototype --signle-barnch <remote repo url> # 仅拉取原型分支即可
+```
+
+#### 3 预览
+
+- Visual studio code请安装`Live server` 插件后可直接右键预览
+- 本地预览用浏览器打开`agentDemo_dashboard.html`即可
+
+#### 4 维护及贡献
+
+产品团队在该分支提交修改时请明确每一次commit的详细信息，记录清楚调整内容以便版本控制。

prompt/promptByStoney.md

@@ -0,0 +1,90 @@
+你是一名经验丰富的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

@@ -0,0 +1,357 @@
+# 中国安全生产科学研究院实验室安全智慧化管控中心 — 数据可视化大屏开发 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. 中文界面，所有标签和文案使用简体中文