---
status: accepted
---

# Web page information architecture

Web 驾驶舱的一级模式为总体概览、基础设施、运行监测、预警处置。切换一级模式时，中央一张图保持常驻；模式内的全部二级面板同时出现在左右两栏，不再使用 `subview` 或独立二级路由。

布局采用 A 四面板总览方案：顶栏 + 一级模式 + 左右各两块二级面板 + 中央一张图。四个一级模式都固定 4 个二级面板。总体概览为态势总览、基础设施、运行监测、预警设置；基础设施为基础档案、运行信息、管理信息、应急保障；运行监测为监测概览、监测分布、运行概况、监测点台账；预警处置为当前预警、历史分析、预警效率、预警分析。不把环境监测升格为二级面板。每个二级面板通过标题栏展开/收起；切换一级模式时重置为默认展开。同步实现 9 个共享地图/详情视图和 5 个预警/报警模式变体。首期视觉沿用深色指挥大屏、深中性背景和青色强调色；正式视觉资源由设计公司后续交付后替换。

模式与面板使用稳定英文键，中文只用于展示：

| 一级模式 `mode` | 左栏上 | 左栏下 | 右栏上 | 右栏下 |
| --- | --- | --- | --- | --- |
| `overview` | `situationSummary` | `infrastructureSummary` | `monitoringSummary` | `alertSettings` |
| `infrastructure` | `archive` | `operation` | `management` | `emergency` |
| `monitoring` | `monitoringOverview` | `monitoringDistribution` | `operationOverview` | `monitoringPointLedger` |
| `warningResponse` | `currentEvents` | `historyAnalysis` | `responseEfficiency` | `eventAnalysis` |

`panelId` 扁平且全局唯一，不带模式前缀；`expandedPanelIds` 即 `panelId` 字符串集合。中文标题由独立的 `panelLabels` 映射按 `panelId` 解析，业务逻辑不读中文。

加载、成功、空数据、字段缺失、数据过期、数据不可用、请求失败、无坐标等状态均为首期正式状态；详情分区必须能独立失败，不使用整页错误遮罩。当前事件列表默认 10-15 条，历史列表提供 7/30/90 天和自定义时间范围。工单只读展示七态：待派单、待接单、已接单、处理中、待验收、已结案、已取消；验收驳回表现为“待验收回退处理中”的动作轨迹，不展示延期。

UI 组件优先沿用当前 TvT.js 前端项目已有组件生态，首期 Fes Design / Naive UI；后续可按大屏定制需要调整，但不应为此重做页面信息架构。