批次 1 验收说明：品牌/图标替换

关联：执行-批次1：品牌/图标替换蓝湖来源：项目「城市生命线驾驶舱」，9 个画板 2026-10-12 版（v3/v4）本文档只讲怎么验收；改动理由与映射过程见票 14 与复查附录。

0. 一句话：改了什么

驾驶舱顶栏品牌位与地图四个图层 chip 的图标，从代码内联的几何占位图形换成蓝湖导出的正式切图，经统一资产解析层按语义 key 消费。

只有 6 个位置会看到变化：

位置	改动前（占位）	改动后（正式切图）
顶栏品牌位	同心圆 + 十字轴线，白色描边	渐变浅蓝底板 + 顶部青色亮边（蓝湖 `nav/title-bg`）
chip「管线图层」	三层叠片菱形	网格方块
chip「监测点」	双同心圆	水滴
chip「事件定位」	空心三角 + 感叹号	实心警告三角（橙黄）
chip「应急资源」	屋顶+门框线稿	火焰（红橙）
空面板占位	折线框 + 折线	不变（设计稿未覆盖，仍走原占位）

首次交付未能生效，2026-10-12 已修复。 审核发现「图标没有应用到场景中」，连到真实运行地址定位到两个叠加缺陷： ① 资源路径少一级目录——manifest 写 icons/brand.png，文件实际在 public/cockpit/assets/icons/，导致浏览器请求 /cockpit/icons/brand.png 落到 Vite 的 dev 兜底页上，返回 200 + index.html，status: 200 骗过了 HTTP 层与原格式校验两层检查（复现坑见 §3）； ② 品牌位改宽挤掉标题——品牌槽从 32×32 改成 90×34 后，顶栏「城市生命线驾驶舱系统」被截断，已按切图原比例收回 50×19。修复后复验：6/6 资源返回正确 image/png / image/svg+xml 与正确字节；标题完整显示；品牌底板在顶栏可见。同时把校验补强到文件真实可达 + 拒绝 HTML 兜底页 + 内容 hash 一致，避免同类问题再靠人工发现。另需知悉：icon.brand 素材本身像素级实测 alpha 仅 10–18%，是半透明装饰板，叠在深色顶栏上呈低调浅蓝光晕——这是素材特性，不是渲染故障；其余四枚为完全不透明的实心彩色图标。

1. 验收方式一：静态核对（不跑任何服务，1 分钟）

在仓库根目录执行，逐条比对：

# 1.1 正式切图已入库（17 个 PNG + 1 个临时 SVG）
Get-ChildItem public/cockpit/assets/icons | Select-Object Name, Length

# 1.2 旧占位 SVG 已删除（应只余 blank.svg）
Get-ChildItem public/cockpit/assets/icons -Filter *.svg

# 1.3 manifest 状态：17 条 formal + 1 条 temporary（且文件真实可达）
node .scratch/lanhu-cockpit-asset-replacement/research/check-manifest.mjs

# 1.4 确认组件与地图服务中没有散落的物理路径（只应命中解析层 1 处）
git grep -n "cockpit/assets" -- src

# 1.5 四处交叉引用一致性：注册表 ↔ manifest ↔ 组件引用 ↔ 面板/行业映射
node .scratch/lanhu-cockpit-asset-replacement/research/cross-check-icons.mjs

判定：1.1 看到 17 个 png + blank.svg；1.2 只剩 blank.svg；1.3 打印 manifest 校验通过（含文件可达性与 hash 一致性），退出码 0；1.4 只出现 runtimeAssets.js:15 一行；1.5 打印 ✅ 四处交叉引用完全一致。

1.3 现在会比对磁盘上的真实文件、拒绝 HTML 兜底页、并核对内容 sha256——这三项正是本次缺陷 1（路径少一级目录、被 dev 兜底成 200 HTML）漏掉的口子，已补上。

补充人工核对（打开文件看）：

public/cockpit/assets/manifest.json 中每条含 source.board（蓝湖画板名）、source.layer（图层路径）、source.url（导出地址）、hash（sha256）、dimensions、status
src/modules/cockpit/components/CockpitIcon.vue 有 renderMode === 'image' 分支（彩色切图）与 mask 分支（单色）并存
src/modules/cockpit/CockpitShell.vue:1709 附近 .cockpit-shell__mark 为 width: calc(50 * var(--u))、height: calc(19 * var(--u))（按切图 90:34 原比例缩放；直接用 90×34 会把标题挤出顶栏），且选择器含 img
src/modules/cockpit/CockpitShell.vue 的 .cockpit-shell__brand-text 带 flex: none（保证标题不被压缩）

2. 验收方式二：看切图本身（30 秒）

直接看蓝湖导出的正式切图：

key	文件	应看到
`icon.brand`	brand.png	浅蓝渐变矩形板，顶部一条青色亮线
`icon.layers`	pipe-facility.png	管网设施（弯管，蓝渐变）
`icon.points`	pipe-alert.png	预警处置（警灯，蓝渐变）
`icon.event`	pipe-command.png	应急指挥（文档+警示三角，蓝渐变）
`icon.resource`	scale-kind.png	规模种类（双层数据库堆叠，蓝渐变）
`icon.manhole`	manhole.png	井盖（紫色网格球）
`icon.infrastructure`	infrastructure.png	楼宇
`icon.facility`	facility.png	立方体（红）
`icon.safety`	safety.png	盾牌对勾
`icon.history`	history.png	时钟
`icon.efficiency`	efficiency.png	绿色对勾圆
`icon.pulse`	pulse.png	信号波形
`icon.close`	close.png	关闭叉
`icon.emergency`	emergency.png	大火焰
`icon.industry.gas`	industry-gas.png	消防栓（绿）
`icon.industry.water`	industry-water.png	水波
`icon.industry.drainage`	industry-drainage.png	雨云

判定：17 张都能正常显示（不是空白/破损）；语义对得上——弯管=管线图层、警灯=监测点、文档警示=事件定位、数据库堆叠=应急资源（均为维护者指派的 Pipe/Q 系列切图）、紫网格球=井盖（行业筛选「窨井」）、楼宇=基础设施、消防栓=燃气、水波=供水、雨云=排水、时钟=历史、对勾=效率、波形=实时监测。

若图片显示不出来，先确认浏览器没有拦截本地相对路径；也可直接用系统图片查看器打开。

3. 验收方式三：跑起来看真实效果

真实运行地址：http://127.0.0.1:8000/#/cockpit（维护者已提供并在运行，无需重启）。

⚠ 三个必须知道的坑（第一次验收就是在这里翻车的）

入口遮罩：打开后先点画面中央「点击进入系统」，否则看到的是入口页而非驾驶舱。
chip 图标在折叠面板里：四个图层图标（网格/水滴/三角/火焰）渲染在地图右上角「地图摘要」浮标的展开态。默认是折叠的，必须点开才能看到——它们不在地图表面。
本仓 dev 会把不存在的路径兜底成 200 + index.html：所以「Network 里状态码是 200」不能证明图片拿到了。要看 Content-Type 是不是 image/png；若是 text/html 说明路径错了（这正是本次修复的缺陷 1）。

走查清单（真实页面）

① 顶栏品牌位

品牌位左侧有一块浅蓝色半透明底板（不是改动前的白色同心圆）
标题「城市生命线驾驶舱系统」完整显示，没有被模式按钮压住或截断
顶栏无溢出、四个一级模式按钮位置正常

② 16 个面板标题图标（切换四个一级模式逐一看）

每个面板标题文字前有一个小图标，位置在青色竖条之后
语义对应正确：基础设施=楼宇、基础档案/管理信息=立方体、应急保障=大火焰、运行监测类=波形、监测点台账=水滴、历史分析=时钟、预警效率=对勾、预警/事件类=三角、汇总类=网格
图标没有被标题的发光糊成一团，边缘可辨
面板标题文字未被图标挤压（不换行、不截断）
面板收放（+/-）功能正常，data-panel-id 仍在

③ 行业筛选按钮图标（顶栏「行业」一栏）

燃气=消防栓、供水=水波、排水=雨云、窨井=井盖（紫色网格球）
「全部」按钮没有图标（它不对应任何行业语义）
图标与文字间距均匀，点击/选中态正常，data-industry 仍在

④ 四个图层 chip（需先点开「地图摘要」浮标；须与文字同行）

「管线图层」= 管网设施（弯管）
「监测点」= 预警处置（警灯）
「事件定位」= 应急指挥（文档+警示）
「应急资源」= 规模种类（数据库堆叠）
四个 chip 的图标与文字在同一行（若文字折到图标下方即为回归，.map-info__layer-chip 失效）
四个图标颜色正确（发白或全黑说明错走单色 mask 分支，是 bug）

⑤ 无地图位置浮块

「无地图位置」标题前的水滴图标正常显示

⑥ 空面板占位

任一无数据面板内的占位图示仍为原折线框样式（预期不变，icon.blank 是 temporary）

⑦ 结构未受影响（重点回归）

四个一级模式切换正常，面板内容随之变化
行业筛选点击后面板数据随之刷新
地图标记、状态图例、点选与定位行为与改动前一致
控制台无 Vue 报错、无资源 404
按钮可访问名仍是纯文字（图标不参与命名，控制台读 button.textContent.trim 应与改动前一致）

读数断言（浏览器控制台执行，用于留证）

// 应输出渲染出来的图标：17 条 formal + 1 条 temporary（品牌位 1 + 行业 4 + 面板按当前模式若干 + chip 4）
Array.from(document.querySelectorAll('[data-icon-name]'))
  .map(el => `${el.dataset.iconName}=${el.dataset.assetStatus}`)

// 面板图标覆盖度：切四个一级模式，看 16 个 panelId 是否都出图标
Array.from(document.querySelectorAll('[data-panel-id]'))
  .map(el => `${el.dataset.panelId}:${el.querySelector('[data-icon-name]')?.dataset.iconName || 'MISSING'}`)

期望：所有条目的 status 为 formal，只有 blank=temporary；data-panel-id 列表 16 项且无 MISSING。

若某条为空 → 该图标没渲染出来；Resource 面板里搜 cockpit/assets/icons，确认 Status 列是 200 且 Content-Type 为 image/png（若为 text/html 即路径错误）。

截图留存：顶栏品牌位一张、行业筛选栏一张、某模式的左/右栏面板标题一张、地图摘要展开后的四个 chip 一张。

4. 判定标准

结果	结论
静态全过 + 走查 ①–⑦ 全过	批次 1 通过，可关闭票 14
静态全过 + ① 或 ② 观感不可接受	记为视觉偏差，登记进票 06 缺口清单
② 图标发白/全黑	缺陷：走了单色渲染分支，需要修 `CockpitIcon.vue` 的 image 分支
⑤ 出现模式/面板/地图行为变化	阻断：说明改动越界，需回退并复查

5. 不通过怎么回滚

本批改动是自包含的，回滚成本低：

# 回滚代码与 manifest（会一并恢复 5 个占位 SVG）
git checkout -- src/modules/cockpit public/cockpit

# 或只回滚品牌位尺寸调整（切图本身保留）
# 编辑 src/modules/cockpit/CockpitShell.vue 的 .cockpit-shell__mark，恢复 32×32

回滚后：顶栏恢复白色同心圆，四个 chip 恢复几何占位图形，其余功能不受影响（资产层改动已隔离在 icons.js / runtimeAssets.js / CockpitIcon.vue 三处）。

6. 本次未做的事（避免误判）

未运行 build/dev/浏览器：受 AGENTS.md 限制，视觉效果的最终判定必须由方式三完成。
未改动：四个一级模式、16 个二级面板、panelId、状态词表、地图图层、拾取与定位契约——本批只换素材来源。
icon.blank 仍是占位：设计稿确实没有空面板占位图示，属「设计稿未覆盖」，不算缺陷。
切图取自面板内同义图标：蓝湖的图层 chip 本身仍是纯文字，本批按语义对应取用面板内的网格/水滴/三角/火焰；若设计方本意是 chip 专用图标，可在走查时提出。

walkthrough-14-batch1.md 13 KB Historia Czysty