# Research: 蓝湖页面与运行时资产清单

**Ticket:** [02: 蓝湖页面与运行时资产清单](../issues/02-lanhu-asset-inventory.md)
**Date:** 2026-09-29
**Scope:** 决策事实盘点。只读调研，未改动任何业务代码，未运行 build/dev/浏览器调试（遵守 `AGENTS.md` 验证规则）。
**Method:** 以票 01 已确认的蓝湖事实为准，逐文件阅读仓库源码与文档（`src/modules/cockpit/**`、`public/cockpit/**`、`docs/cockpit-deployment.md`、`.fes.js`），记录每个语义入口与资产接缝的路径/行号。**不在未逐项打开蓝湖画板的情况下虚构切图、字体、状态图、标注的具体清单**（票 01 Answer 第 26 行的立场）。

> 阅读约定：本报告只陈述「仓库侧已经存在的东西」与「蓝湖侧已确认的事实」；凡涉及蓝湖 9 个画板的**具体名称、内容、切图、字体、状态图、标注**，一律标为 `待逐项人工确认`，不作推测。

---

## 1. 结论摘要（Decision）

- **蓝湖侧可确认事实（不新增推测）**：项目「城市生命线驾驶舱」，分享链接 `https://lanhuapp.com/link/#/invite?sid=lx00KZTO`；设计总览为「全部 9 / 未分组 9」，共 9 个未分组画板；登录已完成，画板可人工打开，读取/导出/下载在人工操作下正常（来源：票 01 第 18–20、24 行）。
- **仓库侧运行时资产现状**：驾驶舱**尚无正式视觉素材**。现有全部视觉资源为占位实现：内联 SVG 图标（`domain/icons.js`）、内联 SVG 形状 + 数据 URL（`domain/pointStatus.js` 的 `markerSvg`）、CSS token 单一来源（`styles/tokens.css`）、唯一静态图片 `public/cockpit/aerial.webp`（临时占位底图）。代码注释明确「正式稿由设计公司交付」。
- **候选映射的仓库侧锚点已齐**：品牌位、16 个二级面板、图层、监测点/监测设备/状态图例、事件等级、应急资源、底图氛围、详情图片都有明确的**单一语义入口**（第 3 节逐项给出路径/行号），蓝湖画板→语义 key 的映射表骨架见第 4 节，蓝湖侧单元格待逐项人工确认。
- **四分类结论**：目前**不存在**已确认的「可直接运行时资源」（蓝湖导出包尚未逐项盘点）；仓库侧全部现有视觉资源属于**临时占位**；蓝湖正式素材按「可直接运行时 / 需加工设计源 / 参考标注」三类的判定依据见第 5 节；蓝湖未覆盖的现有 UI 清单见第 5.4 节。
- **结构保护边界**：替换不得改变 `mode` / `panelId` / 面板结构（`public/cockpit/README.md:30-31`）；正式资源必须经既有接缝（`CockpitIcon` / `markerSvg` / `deviceAssets` / `tokens.css` / `BASE_URL` 拼路径）消费（地图 `map.md:17`）。

---

## 2. 蓝湖可确认事实

来源：`.scratch/lanhu-cockpit-asset-replacement/issues/01-lanhu-access-and-delivery.md`

| # | 事实 | 来源 |
| --- | --- | --- |
| F1 | 项目名称「城市生命线驾驶舱」；分享链接 `https://lanhuapp.com/link/#/invite?sid=lx00KZTO`，页面跳转到蓝湖项目 stage 视图 | 01:18 |
| F2 | 设计总览可访问，顶部有「产品 / 设计」导航，左侧显示「全部 9 / 未分组 9」，可见 9 个驾驶舱设计画板缩略图 | 01:19 |
| F3 | 登录已完成（用户人工确认）；画板在人工操作下可正常打开；读取、导出、下载功能在人工操作下均正常 | 01:20 |
| F4 | 分享链接在当前人工登录会话下可用；**当前分享页要求重新登录**，资源获取前需要人工完成一次登录（地图 Notes） | 01:22、`map.md:18` |
| F5 | 原始蓝湖导出包应作为设计归档保留；是否进入运行时候选集由本票逐项盘点决定，**不在没有逐项查看资源的情况下虚构切图、字体、状态图、标注的具体清单** | 01:26 |

**待人工确认（本票不虚构）**：9 个画板的**各自标题、画布尺寸、图层/组件树、可导出切图清单、字体、状态图变体、标注**，均需逐项打开画板后记录。本报告第 4 节的映射表只给「候选语义 key」列，蓝湖侧内容留待下一步人工/浏览器盘点填充。

---

## 3. 仓库现有运行时资产与语义入口（全部带路径/行号）

### 3.1 视觉 token —— 唯一来源

- **`src/modules/cockpit/styles/tokens.css`**：主色、语义色、文字色、字体、字号、间距、层级只在此声明一份（:1–13）；设计像素 `--u`（:17）；底色与面板（:20–25）；主色 `--cyan`（:28–29）；语义色 `--lv1..--lv4 / --neutral`（:34–38，事件四级与点位状态共用调色板，见 ADR 0006/0008 注 :31–33）；文字色（:41–43）；字体 `--font` 与数字字体 `--num`（:46–47）；字号（:50–53）；间距（:56–58）；左右栏宽 `--column-w`（:62）；层级 `--z-map/--z-columns/--z-overlay`（:65–67）；阴影 `--shadow`（:70）。
- **例外声明**：组件内各自的装饰性渐变/辉光（如面板切角高光、扫描线）是散落的 rgba，**不属主题色**，换肤时需个别替换（:6–7）。这是「蓝湖装饰素材」落点判断的关键依据。

### 3.2 图标接缝 —— `CockpitIcon`（内联 SVG，占位）

- **`src/modules/cockpit/domain/icons.js`**：图标集注册表，注释明确「正式稿由设计公司交付……将来换成图片或图标字体只需改本文件」（:4–7）。
  - `brand`（城市生命线同心环 + 十字轴线，用于顶栏品牌位，:13–21）
  - `layers`（图层叠片，:23–28）
  - `points`（设备点位，:30–35）
  - `event`（事件告警三角，:37–42）
  - `resource`（处置力量/资源，:44–49）
  - `blank`（面板占位图示，:51–56）
  - `ICON_NAMES` / `isKnownIcon()` / `iconFor()`（:59–66）
- **`src/modules/cockpit/components/CockpitIcon.vue`**：渲染器，`<CockpitIcon name="..." />` 用法（:4）。
- **引用点**：`CockpitShell.vue:22`（品牌位 `<CockpitIcon name="brand" size="100%" />`）、`MapCanvas.vue:41`（图层开关占位图标）、`MapCoordinateBlocked.vue:23`、`PanelPlaceholder.vue:10`。

### 3.3 监测点标记/图例接缝 —— `markerSvg` / `SHAPES` / `pointLegend`

- **`src/modules/cockpit/domain/pointStatus.js`**：后端点位状态→视觉的**唯一对照表**（:1–5）。
  - `POINT_STATUS` 六个后端取值 ALARM/WARNING/WORK_ORDER/NORMAL/OFFLINE/EMPTY（:27–34）
  - `SHAPES` 内联 SVG 片段：triangle/diamond/square/circle/ring/hollowSquare/hollowDiamond/cross（:42–59）
  - `POINT_STATUS_VISUALS` 六态 tone+shape+label+priority（:78–85）；`UNKNOWN_VISUAL`（:88）；`UNASSOCIATED_VISUAL`（:91）
  - `planPointMarkers()`（:121–145）；`pointLegend()` 图例行（:173–182）；`legendMatchesMarkers()` 一致性判据（:185–207）
  - `markerSvg(shape, color, size)` 把形状片段包成带色的 SVG data URL（:218–223）；颜色**必须由调用方给**，色值只来自 `tokens.css`（:209–216）
- **图例 UI**：`src/modules/cockpit/components/StatusTag.vue`（形状+颜色+文字，:14–29；色键来自 token，:86–90）；地图图例渲染在 `MapCanvas.vue:26–35`。

### 3.4 监测设备位置符号接缝 —— `deviceAssets`（正式素材的预留入口）

- **`src/modules/cockpit/domain/deviceAssets.js`**：设备位置符号的**单一可替换资产接缝**（票 44；:1–21）。
  - `ASSET_MODE`：IMAGE（正式图片素材，未来统一提供后走这条）/ ICON（本期临时形状簇）/ FALLBACK（最后兜底）（:26–33）
  - `ASSET_REASON` 原因码含 `ASSET_MISSING` / `ASSET_FAILED` / `ICON_FAILED` 等（:36–51）；`ASSET_REASON_TEXT` 人话（:54–63）
  - `MARKER_SIZE`：point 18 / device 14，点恒大于设备（:76–84）；`markerSizeFor()` / `sizeHierarchyHolds()`（:87–99）
  - `planDeviceAsset()` 降级链：正式图片可用→图片；未提供/失败→设备专属图标；图标失败→通用位置符号（:139–193）；`renderIconImpl` 注入点（:133–136, :202–209）
- **`src/modules/cockpit/domain/deviceStatus.js`**：设备自身状态五态视觉（:26–32, :41–47）；`deviceLegend()` 独立于监测点图例（:69–80）；形状复用 `pointStatus.js` 的 `SHAPES`（:37–38）。

### 3.5 底图/氛围/影像接缝

- **临时底图**：`public/cockpit/aerial.webp`（唯一静态图片；README 注明「**临时占位**，无地理配准，不得据此推断坐标，真底图接入后本文件可删」，`public/cockpit/README.md:13`）。引用点 `MapCanvas.vue:139`（`${base}cockpit/aerial.webp`，走 `import.meta.env.BASE_URL`）、`:12`（背景图）。
- **底图计划**：`src/modules/cockpit/domain/basemap.js` —— `BASEMAP_SOURCE`（:12–18）、ArcGIS 世界影像（:34–35）、Natural Earth II 离线 TMS（:38）、天地图 WMTS 模板（:55–58）、`planBasemap()`（:72–133）。
- **地形/叠加影像/3D Tiles**：`src/modules/cockpit/domain/mapLayers.js` —— `planTerrain()`（:28–41）、`planOverlays()`（:47–60）、`planTilesets()`（:81–91）。本机 GIS 目录由 `.env.local` 的 `COCKPIT_GIS_MOUNTS` 挂载（dev），生产由 nginx 挂同一批 URL（`docs/cockpit-deployment.md` 第 3 节）。
- **地图全息氛围层（装饰）**：`MapCanvas.vue` 的 `.map-holo__grid`（网格，:404–410）、`__scan`（扫描线，:412–418）、`__vignette`（暗角，:427–429）；外壳氛围 `CockpitShell.vue:1542–1565`（`.cockpit-shell__atmosphere` 径向辉光 + 细网格，注释「原型 body::before / ::after 的等价实现」）。这些是**代码生成的装饰**，是否由蓝湖提供对应素材需逐项确认。
- **Cesium 资源基址**：`src/modules/cockpit/services/cesiumAssets.js` —— `CESIUM_DIR = 'cesium/'`（:12）、`resolveCesiumBaseUrl()`（:20–22）、`ensureCesiumBaseUrl()`（:41–54），兼容 qiankun 注入路径（:25–34）；静态资源本体由 `src/common/cesiumStaticPlugin.js` 提供（`.fes.js:88`）。

### 3.6 语义对象目录（模式/面板/图层/事件/资源）

- **一级模式与二级面板**：`src/modules/cockpit/domain/panelCatalog.js` —— `MODES`（overview/infrastructure/monitoring/warningResponse，:9）、`MODE_LABELS`（:12–17）、`PANEL_LABELS` **16 个 panelId**（situationSummary / infrastructureSummary / monitoringSummary / alertSettings / archive / operation / management / emergency / monitoringOverview / monitoringDistribution / operationOverview / monitoringPointLedger / currentEvents / historyAnalysis / responseEfficiency / eventAnalysis，:20–37）、每模式左右两栏 `COLUMNS`（:43–60）。结构由本文件决定、与视觉资源解耦（`public/cockpit/README.md:30-31`）。
- **模式图层计划**：`src/modules/cockpit/domain/modeLayerPlan.js` —— `MODE_LAYER`（:11–16）、`planModeLayers()`（:141–228，markers/legend/facilities/pipelines/associatedDevices/selection 的唯一裁决点）。
- **地图图层占位图标**：`MapCanvas.vue:130–135` `LAYERS`（管线图层/监测点/事件定位/应急资源，图标名对应 `domain/icons.js`）。
- **事件等级**：`src/modules/cockpit/domain/statusTones.js` —— `TONES`（:14）、`LEVEL_TAGS` 事件四级 1级..4级（:19–24）；事件色不挂地图、与点位状态色分开（:8–11）。事件领域对象 `domain/events.js`（WARNING/ALARM family，:15–18）；事件列表 UI `components/EventListPane.vue`（预警/报警切换 + StatusTag 等级，:21–100）。
- **应急资源/危险源/防护目标**：`src/modules/cockpit/domain/panelBlocks.js:73–75`（`CODE_TEXT` 中 EMERGENCY_RESOURCE/HAZARD_SOURCE/PROTECTION_TARGET）；面板 UI `components/WarningResponsePane.vue`。
- **行业/范围筛选**：`CockpitShell.vue:91–120`（当前范围 + 行业 chips）；词表 `domain/filterOptions.js`。
- **详情图片**：`src/modules/cockpit/domain/equipmentDetail.js` —— `EQUIPMENT_SECTIONS` 含 `latestImage`（:23–32）；`toDeviceImage()` 只认后端给的那一张单值（:62–69）；mock 示例 `mocks/contractMocks.js:580`（`latestImage: { url: '/cockpit/aerial.webp', ... }`）。展示层 `components/EquipmentDetailSections.vue`、`PointDetailCard.vue`。

### 3.7 运行时路径约定

- **`BASE_URL` 拼路径**：`MapCanvas.vue:138-139`（`const base = import.meta.env.BASE_URL || '/'`）；`public/cockpit/README.md:17–24`（组件用 BASE_URL 拼路径，`publicPath: './'` 与 qiankun 注入路径下都能取到，不硬编码 `/cockpit/...`）。
- **`public/cockpit/` 是驾驶舱唯一静态资源位置**，不得依赖 `public/plugins/**`（`public/cockpit/README.md:6-7`）。
- **`.fes.js`**：`publicPath: './'`（:32）、qiankun micro（:48–52）、cesium 单独分包（:102）、`cesiumStatic()`/`localGisStatic()` 插件（:88, :91）、天地图开发代理（:163–171）。
- **路由**：Fes 文件路由 `src/pages/cockpit/index.vue` → `/cockpit`（薄入口，只挂 `CockpitShell`，:1–10）。
- **部署**：`docs/cockpit-deployment.md` 一页速查（改 `dist/cockpit/config.json` 即可，不需重建）；配置四层覆盖（内置默认 → `VITE_COCKPIT_*` → `cockpit/config.json` → `window.__COCKPIT_CONFIG__`，`public/cockpit/README.md:42–49`）。

---

## 4. 候选映射（蓝湖画板 ↔ 仓库语义 key）

> 本表只锁定**仓库侧语义锚点**；蓝湖侧「画板标题/内容/导出物」列全部为 `待逐项人工确认`，**未打开画板前不得填入具体值**（票 01 立场）。表中「假设」表示基于项目名与驾驶舱语义的候选对应，供人工盘点时逐项核对，不构成结论。

| 语义对象（票 02 Question） | 仓库侧语义锚点（路径:行号） | 蓝湖画板候选（待确认） | 现状 |
| --- | --- | --- | --- |
| 品牌位 | `CockpitShell.vue:20-28` 品牌区；`domain/icons.js:13-21` brand 图标 | 顶栏/品牌画板 | 内联 SVG 占位 |
| 面板（16 个二级面板 + 切角外框） | `domain/panelCatalog.js:20-60`；`components/CockpitPanel.vue:54-57`（四角 SVG）、`:67-73`（面板渐变底） | 整屏驾驶舱画板 + 面板族画板 | CSS/内联 SVG 占位 |
| 图层（管线/监测点/事件/资源 + 模式图层） | `MapCanvas.vue:130-135`；`domain/modeLayerPlan.js:11-16` | 图层开关/图层面板画板 | 内联 SVG 占位 |
| 监测点 | `domain/pointStatus.js:42-59`（SHAPES）、`:218-223`（markerSvg） | 监测点符号/状态画板 | 内联 SVG 占位 |
| 监测设备 | `domain/deviceStatus.js:26-47`；`domain/deviceAssets.js:139-193`（IMAGE 模式为正式素材入口） | 设备符号/状态画板 | 内联 SVG 占位；正式图片入口已预留 |
| 状态图例（点位 + 设备） | `domain/pointStatus.js:173-182`；`domain/deviceStatus.js:69-80`；`components/StatusTag.vue` | 图例画板 | 内联 SVG 占位 |
| 事件（预警/报警 + 四级） | `domain/statusTones.js:19-24`；`components/EventListPane.vue:21-100` | 事件列表/预警处置画板 | 文本 + StatusTag |
| 资源（应急资源/危险源/防护目标） | `domain/panelBlocks.js:73-75`；`components/WarningResponsePane.vue`；`domain/icons.js:44-49` | 应急保障画板 | 文本列表 + 图标占位 |
| 底图氛围 | `public/cockpit/aerial.webp`；`domain/basemap.js:72-133`；`MapCanvas.vue:396-429`（网格/扫描/暗角）；`CockpitShell.vue:1542-1565`（氛围底） | 底图/背景氛围画板（**是否在蓝湖覆盖范围待确认**） | 临时影像 + 代码生成装饰 |
| 详情图片 | `domain/equipmentDetail.js:23-32, 62-69`（latestImage 单值） | 设备详情/现场图片画板 | 后端 URL，mock 用 `aerial.webp` |

---

## 5. 四分类：可直接运行时 / 需加工设计源 / 参考标注 / 蓝湖未覆盖

### 5.1 可直接作为运行时资源的文件（当前：无已确认项）

判定标准（供人工盘点蓝湖导出物时套用）：
- 文件为最终渲染格式（SVG / PNG/WebP 透明底 / 目标尺寸），无需再加工即可被现有接缝消费；
- 落点明确：图标→`domain/icons.js` 或图片文件→`public/cockpit/`；标记符号→`deviceAssets` 的 IMAGE 模式 / `markerSvg`；token→`styles/tokens.css`；
- 路径经 `BASE_URL` 拼接（`MapCanvas.vue:138-139`、`public/cockpit/README.md:17-24`）。

**现状结论**：蓝湖导出包尚未逐项盘点，**没有任何文件可被确认为「可直接运行时资源」**。仓库现有 `aerial.webp` 是临时占位、不是正式资源。

### 5.2 需要加工的设计源

- **整屏/整面板画板**（9 个未分组画板大概率是整屏设计稿）：需切片成面板外框、标题栏、切角、辉光、图标、标记等可运行资源，或提炼成 token（颜色/字号/间距）进 `styles/tokens.css`。
- **渐变/辉光/扫描线/网格氛围**：现为组件内散落 rgba（`tokens.css:6-7` 例外声明、`MapCanvas.vue:396-429`、`CockpitShell.vue:1542-1565`）；若蓝湖以整图形式提供，需裁切或转成可平铺纹理。
- **字体**：蓝湖可能引用商用字体；需授权确认后才能进运行时（字体授权与降级归票 06，本票不裁定）。
- **状态变体**：点位/设备各状态（`pointStatus.js:78-91`、`deviceStatus.js:41-50`）若蓝湖以多状态图提供，需按状态拆分或制作雪碧图，并保持「图例与标记同源」约束（`pointStatus.js:4-5, 40`）。

### 5.3 仅用于参考的标注

- 蓝湖画板上的**标注（标注/尺寸/间距/切图标注）**：作为设计依据供票 03（视觉 token 映射）、票 07（设计稿差异）裁定，**不进入运行时**。
- 原始蓝湖导出包整体作为**设计归档**保留（票 01:26），与运行时资源目录分离（票 04 会裁定目录边界，本票不预设）。

### 5.4 蓝湖未覆盖的现有 UI（按代码现状列，需人工核对蓝湖画板后确认哪些真未覆盖）

| 现有 UI | 位置 | 说明 |
| --- | --- | --- |
| 进入引导层（自转星球 + 点击进入） | `components/CockpitIntro.vue`（全文） | 若蓝湖未提供对应视觉，维持现状 |
| 调试/诊断形态（`uiDebug` 头行、图层占位、实例提示、配置标签） | `MapCanvas.vue:37-52`、`CockpitShell.vue:75-86` | 票 32 生产形态已收敛；正式替换不影响诊断读数 |
| 「无地图位置」浮块 | `components/MapCoordinateBlocked.vue` | 坐标非法对象的可见落点，蓝湖通常不画 |
| 分区状态标签（取数中/空/失败/不可用） | `components/SectionStateTag.vue`；`domain/panelBlocks.js:155-172` | 数据状态语义，非视觉素材 |
| 面板收放标记（−/+）与标题竖条/辉光 | `CockpitPanel.vue:155-166, 184-192` | 交互态视觉，蓝湖可能只有展开态 |
| 状态灯（加载/完成/失败）与标记计数 | `MapCanvas.vue:527-572` | 运行时状态反馈 |
| 工单时间线 | `components/WorkOrderTimeline.vue` | 业务组件，蓝湖未必覆盖 |
| 两级详情卡片（点位摘要→设备卡片） | `PointDetailCard.vue`、`EquipmentDetailSections.vue`、`EventDetailCard.vue` | 面板内业务内容 |

> 判定原则：蓝湖未覆盖的 UI **不因素材替换而重做**（地图 `map.md:15` 方案边界）；只有确实存在对应设计稿差异时才进票 07 另立边界。

---

## 6. 现有结构保护与约束（本票盘点出的硬约束）

1. **结构不随素材变**：`mode` / `panelId` / 面板结构由 `domain/panelCatalog.js` 决定，替换资源不得引起变化（`public/cockpit/README.md:30-31`）。
2. **单一接缝**：图标 `CockpitIcon`（`domain/icons.js`）、标记 `markerSvg`（`domain/pointStatus.js`）、设备符号 `planDeviceAsset`（`domain/deviceAssets.js`）、token（`styles/tokens.css`）是替换的唯一入口，不得在组件/引擎/详情三处散落资源路径（`deviceAssets.js:1-21`；地图 `map.md:17`）。
3. **颜色单一口径**：色值只在 `tokens.css` 声明一份，服务层从计算样式读出后传入（`pointStatus.js:12-13, 209-216`）；替换正式色只改 token 文件。
4. **BASE_URL / qiankun 路径**：资源引用必须兼容 `import.meta.env.BASE_URL` 与 qiankun 注入路径（`cesiumAssets.js:25-34`；`map.md:17`）；不硬编码绝对 `/cockpit/...`。
5. **资产边界**：本图覆盖 2D UI 与监测点/监测设备位置符号；**不把**设备/城市 3D 模型、地形、DEM、影像、3D Tiles 当正式素材（`map.md:16`）。
6. **诚实降级**：正式素材未提供/失败时按 `deviceAssets.js:14-21` 的降级链如实标注，不把临时资源误报为正式资产（票 06 立场，本票不裁定）。
7. **不虚构蓝湖清单**：所有蓝湖画板/切图/字体/状态图/标注的具体内容，必须人工逐项打开后记录（票 01:26）。

---

## 7. 开放问题（留给后续票）

- 9 个画板各自的标题、尺寸、可导出物清单、字体、状态图变体、标注——**待逐项人工盘点**（本票的下一步执行项）。
- 蓝湖画板与仓库 16 个 panelId 的**逐面板对应关系**（含未覆盖面）——待盘点后由票 03/07 裁定。
- 底图氛围（网格/扫描线/辉光/暗角）是否在蓝湖正式素材覆盖范围——待盘点确认。
- 详情图片 `latestImage` 是否由蓝湖提供占位/正式图——当前只认后端 URL（`equipmentDetail.js:62-69`）。
- 字体授权证据与回退策略——票 06。
- 运行时目录边界、manifest、hash/版本、缓存——票 04。
- 监测点/设备位置符号的正式素材矩阵（状态×选中/悬停/聚合）——票 05。