Página Principal Explorar Ajuda
Registe-se Iniciar Sessão
ChenJZ
/
City-Lifeline-Cockpit
1
0
Fork 0
Ficheiros Problemas 0 Pull Requests 0 Wiki
Árvore: bbcfa0d970
Ramos Etiquetas
City-Lifelin...
/
.scratch
/
lanhu-cockpit-asset-replacement
/
research
/
02-lanhu-asset-inventory.md

02-lanhu-asset-inventory.md 21 KB
Histórico Em bruto

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

Ticket: 02: 蓝湖页面与运行时资产清单 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。