增加管理后台监控位置配置UI及prompt文件

prompt/admin-9grid-config-prompt.md

@@ -0,0 +1,297 @@
+# 数据可视化配置页面 · 产品需求与设计说明
+
+> 所属项目：实验室安全智能监测与管控中心
+> 页面文件：`prototype-ui/admin-9grid-config.html`
+> 设计分辨率：1920×1080px（屏幕等比缩放自适应）
+> 设计风格：亮色企业管理后台（Ant Design 规范）
+
+---
+
+## 一、页面定位
+
+本页面为大屏「默认」视图中固定监控宫格的**后台配置入口**，供系统管理员分别配置「安全大厦」（9路，3×3）和「基地」（4路，2×2）两套监控方案的摄像头槽位。配置保存后可选择是否立即生效并推送至大屏端。
+
+---
+
+## 二、整体布局
+
+```
+┌─────────────────────────── 顶部标题栏 (56px) ───────────────────────────┐
+│ Logo │ ← 返回 │ 首页 / 基础结构管理* / 实验室管理 / 系统配置 / 数据报表 │ 右侧操作区 │
+├──────────┬────────────────────┬──────────────────────────────────────────┤
+│ 左导航菜单│   摄像头库侧边栏    │           槽位配置区（选项卡切换）         │
+│  282px   │      322px         │                  flex:1                  │
+│          │                    │                                          │
+│ 基础结构  │ [搜索框]           │ 顶部：[标题栏] ‖ 右侧 [安全大厦][基地] 标签 │
+│ 管理      │ [单位筛选]         │                                          │
+│ > 数据可  │ 摄像头树形列表      │  安全大厦模式 (3×3)：                    │
+│   视化配置│ (按楼栋/楼层/房间) │  ┌──┬──┬──┐                            │
+│ 实验室管理│                    │  │1 │2 │3 │                            │
+│ 系统设置  │                    │  ├──┼──┼──┤                            │
+│          │                    │  │4 │5 │6 │                            │
+│          │                    │  ├──┼──┼──┤                            │
+│          │                    │  │7 │8 │9 │                            │
+│          │                    │  └──┴──┴──┘                            │
+│          │                    │                                          │
+│          │                    │  基地模式 (2×2)：                        │
+│          │                    │  ┌──┬──┐                               │
+│          │                    │  │1 │2 │                               │
+│          │                    │  ├──┼──┤                               │
+│          │                    │  │3 │4 │                               │
+│          │                    │  └──┴──┘                               │
+│          │                    │                                          │
+│          │                    │  [配置状态统计栏]                        │
+├──────────┴────────────────────┴──────────────────────────────────────────┤
+│     底部操作栏：系统状态 | 保存时间 | 有效性 ‖ 立即生效 开关 | 重置/预览/保存   │
+└──────────────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 三、顶部标题栏
+
+| 区域 | 内容 |
+|------|------|
+| Logo | 圆形蓝色图标「安」+ 系统名称「安科院管理后台」+ 副标题 |
+| 返回按钮 | `← 返回`，调用 `history.back()`，hover 变蓝 |
+| 横向导航 | 首页 / **基础结构管理**（激活）/ 实验室管理 / 系统配置 / 数据报表 |
+| 右侧操作 | 查看大屏图标按钮（新标签打开 `index-v2.html`）、通知铃铛、分割线、用户信息（姓名+角色） |
+
+---
+
+## 四、左导航菜单（282px）
+
+分三个分组，带分组标题：
+
+**基础结构管理**
+- 🖥️ 实时监控大屏
+- 📺 **数据可视化配置**（**当前页，激活高亮，蓝色左边框**）
+- 📷 摄像头管理（角标显示数量）
+- 🗺️ 点位地图
+
+**实验室管理**
+- 🔬 实验室列表（角标 128）
+- 📊 安全分级
+- 👥 人员管理
+- ⚗️ 化学品管理
+
+**系统设置**
+- 👤 用户管理
+- 🔔 预警配置
+- 📋 操作日志
+
+> 激活项样式：蓝色左边框 `border-left: 3px solid #1890ff`，背景 `#e6f7ff`，文字蓝色加粗。
+
+---
+
+## 五、面包屑导航
+
+顶部内容区面包屑路径：`基础结构管理 / 数据可视化配置`
+
+---
+
+## 六、摄像头库侧边栏（322px）
+
+### 6.1 顶部信息区
+- 标题「摄像头库」+ 数量角标（共 N 台）
+- 三个统计芯片：在线数（绿色）/ 离线数（红色）/ 总计（蓝色）
+
+### 6.2 搜索与筛选
+- 搜索框：带搜索图标，实时过滤摄像头名称/房间号
+- 下拉筛选：按二级单位（化学/物理/生物/材料/工程研究所）筛选
+
+### 6.3 摄像头树形列表
+结构层级：**楼栋 → 楼层 → 摄像头**，前两级可展开/折叠。
+
+每条摄像头条目显示：
+- `⠿` 拖拽手柄
+- 圆点状态（绿=在线 / 红=离线）
+- 摄像头名称（超长省略）
+- 类型标签（等宽 38px）：
+  - **AI**（绿色）：AI 智能摄像头
+  - **已配置**（绿色）：已分配至某槽位
+  - 普通摄像头不显示标签
+
+> ⚠️ 摄像头条目**不显示**悬浮预览浮窗，鼠标经过无弹层。
+
+---
+
+## 七、槽位配置区
+
+### 7.1 选项卡（内容区顶部右侧）
+
+配置区顶部操作栏右侧提供两个标签按钮，切换当前配置的方案：
+
+| 标签 | 说明 |
+|------|------|
+| **安全大厦**（默认激活） | 9路监控，3×3 宫格布局 |
+| **基地** | 4路监控，2×2 宫格布局 |
+
+- 两套方案的槽位数据**完全独立**，切换标签不影响另一套方案
+- 切换标签时同步更新卡片标题、宫格布局及统计栏
+- 当前激活标签：蓝色填充背景 + 白色文字；未激活：灰白底色
+
+### 7.2 卡片标题栏
+
+从左到右单行排列：
+
+```
+📺 安全大厦监控配置  |  槽位1须为 AI 摄像头 · 保存后即时生效  |  ● 大屏实时同步
+                                    [右对齐]
+💡 点选摄像头→点击槽位，或直接拖拽   [🗑 清空全部]
+```
+
+- 安全大厦模式：卡片标题显示「安全大厦监控配置」
+- 基地模式：卡片标题显示「基地监控配置」
+- 快捷操作区**仅保留** 🗑 清空全部 按钮
+
+### 7.3 宫格槽位网格
+
+**安全大厦模式（gridMode = 9）**：3×3 共 9 个槽位
+**基地模式（gridMode = 4）**：2×2 共 4 个槽位
+
+每个槽位包含：
+- 左上角编号徽标（选中时变蓝填充）
+- 右上角：AI 标签（绿色）/ "须AI" 警告标签（橙色）/ REC 录制标签（红色闪烁）/ 离线标签
+- Canvas 模拟监控画面（深色背景 `#040d1e`）
+- 底部：摄像头名称（左）+ 房间号·楼层（右）
+- 悬停显示操作浮层：**替换** / **清除（红色）**
+
+**槽位 1 特殊规则（两种模式共同）：**
+- 强制要求分配 AI 智能摄像头
+- 已正确配置：绿色边框
+- 未配置或配置非 AI：橙色警告边框 + "须AI" 标签
+- 仅槽位 1 显示危险行为检测框（红色动画虚框 + "危险行为检测"标签）
+
+**空槽位：**
+- 槽位 1：显示 🤖 + "请分配 AI 摄像头"
+- 其他：显示 📷 + "点击选择摄像头"
+- 均显示「或从左侧拖拽至此」提示
+
+### 7.4 分配交互方式
+
+| 方式 | 操作描述 |
+|------|----------|
+| 点选分配 | 点击左侧摄像头条目 → 再点击目标槽位 |
+| 先选槽后选摄像头 | 点击槽位激活 → 再点击摄像头条目 |
+| 拖拽（从树）| 从摄像头库拖拽条目至目标槽位 |
+| 槽位互换 | 从已配置槽位拖拽至另一槽位 |
+| 替换 | 悬停槽位 → 点击「替换」→ 再选摄像头 |
+| 清除 | 悬停槽位 → 点击「清除」 |
+
+### 7.5 配置规则（强制约束）
+1. **槽位 1 必须分配 AI 摄像头**（拖拽互换时同样校验，违规自动回滚）
+2. 同一摄像头不可重复分配至多个槽位（分配时自动从原槽位移除）
+3. 离线摄像头可分配，但显示占位画面
+
+### 7.6 状态统计栏（卡片底部）
+
+| 字段 | 说明 |
+|------|------|
+| 已配置 | X / N（满配绿色，否则橙色；N=9 或 4 取决于当前模式）|
+| AI槽位 | 槽位1是否满足约束（✓ 绿 / ✗ 红）|
+| 待配置 | 空槽位数（0 绿色，否则橙色）|
+| 在线率 | 已配置中在线摄像头占比 |
+| 右侧约束徽章 | 全局 AI 约束状态（满足绿色 / 不满足红色闪烁）|
+
+---
+
+## 八、底部操作栏
+
+**左侧状态信息：**
+- `● 系统运行正常`（绿色脉冲点）
+- `上次保存：HH:MM:SS`（保存后更新）
+- 配置有效性描述（AI约束满足 + 槽位完整度）
+
+**右侧操作区（从左到右）：**
+
+| 控件 | 类型 | 说明 |
+|------|------|------|
+| 立即生效 | Toggle 开关（默认开启） | 控制保存时是否同步推送大屏；开启=蓝色，关闭=灰色 |
+| `重置` | 默认样式按钮 | 将当前标签的配置恢复至最近一次保存的快照 |
+| `预览效果` | 描边蓝色按钮 | 弹出模拟大屏宫格预览弹窗 |
+| `💾 保存` | 蓝色主按钮 | 保存配置；若「立即生效」开启则同时推送大屏，否则仅保存草稿 |
+
+> **立即生效 Toggle 逻辑：**
+> - 开关开启（checked）→ 保存时 toast 提示「已保存并生效，大屏即时更新」
+> - 开关关闭（unchecked）→ 保存时 toast 提示「草稿已保存」
+> - `doSave()` 读取 `#apply-toggle` checkbox 的 `.checked` 状态决定行为，无参数传入
+
+---
+
+## 九、预览效果弹窗
+
+点击「预览效果」后弹出全屏遮罩弹窗，内容：
+- 标题：「📺 大屏监控宫格预览」+ 副标题（根据当前 gridMode 显示对应格数）
+- 深色背景 `#1a1a2e` 内展示对应 Canvas 模拟监控网格
+- 每格显示：编号、摄像头名称、AI 标签（仅 AI 摄像头）
+- 底部按钮：关闭 / **确认并保存生效**（强制打开「立即生效」开关后调用 `doSave()`）
+
+---
+
+## 十、设计规范
+
+| 属性 | 值 |
+|------|-----|
+| 设计分辨率 | 1920×1080px |
+| 缩放方式 | `transform: scale()` 等比缩放居中，响应窗口 resize |
+| 主色 | `#1890ff` |
+| 成功色 | `#52c41a` |
+| 警告色 | `#faad14` |
+| 错误色 | `#ff4d4f` |
+| 主要文字 | `#262626` |
+| 次要文字 | `#595959` / `#8c8c8c` |
+| 页面背景 | `#f5f7fa` |
+| 卡片背景 | `#ffffff` |
+| 边框色 | `#e8e8e8` |
+| 圆角 | `8px`（卡片）/ `4px`（按钮/输入框）|
+| 字体 | `-apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif` |
+| 图表库 | 无（Canvas 2D 模拟）|
+
+---
+
+## 十一、数据结构
+
+### 摄像头对象 `CAM_DB[]`
+```javascript
+{
+  id:       'A301-1',          // 唯一ID
+  name:     'A301 有机合成室 #1', // 显示名称
+  code:     'A301',            // 房间号
+  labName:  '有机合成实验室',    // 实验室名称
+  floor:    '3层',             // 楼层
+  building: '综合实验楼A',      // 楼栋
+  unit:     '化学研究所',       // 二级单位
+  type:     'ai' | 'normal',   // 摄像头类型
+  status:   'online' | 'offline' // 在线状态
+}
+```
+
+### 槽位对象 `slots9[]` / `slots4[]`
+```javascript
+{
+  pos:        1,      // 槽位编号（安全大厦: 1~9，基地: 1~4）
+  camId:      null,   // 已分配摄像头ID（null=空）
+  aiRequired: true    // 是否要求AI摄像头（仅pos=1为true）
+}
+```
+
+### 双模式独立状态
+```javascript
+let slots9 = Array(9)   // 安全大厦槽位数组（独立）
+let slots4 = Array(4)   // 基地槽位数组（独立）
+let savedSnapshot9 = [] // 安全大厦最近保存快照
+let savedSnapshot4 = [] // 基地最近保存快照
+let gridMode = 9        // 当前激活模式（9 或 4）
+let slots = slots9      // 运行时指针，switchGridMode() 切换
+```
+
+---
+
+## 十二、待扩展功能（预留）
+
+- [ ] 与后端 API 对接：摄像头列表拉取、配置读取/写入
+- [ ] 配置历史记录查询与回滚
+- [ ] 摄像头实时在线状态 WebSocket 推送
+- [ ] 多套宫格方案管理（草稿/发布）
+- [ ] 操作权限控制（仅指定角色可保存生效）