14-exec-batch1-brand-icons.md 24 KB
执行-批次1：品牌/图标替换
Type: execution Status: resolved Label: ready-for-agent Blocked by: None Category: execution
What to build: 把驾驶舱 6 个内联 SVG 占位图标（brand / layers / points / event / resource / blank）替换为正式素材，经统一资产解析层按语义 key 消费；全部素材在 manifest 登记并通过校验。图标注册表与渲染组件的接缝不变——只换素材来源，不改引用点。
引用规格（单一决策事实来源）
- 规格 09：运行时资产 manifest 与版本策略——素材入库、hash、fallback、语义 key。
- 规格 03：正式视觉系统与现有 token 映射——ICONS 接缝与 token 规则。
- 规格 12：设计稿差异判断表——进入自查用。
进入自查（开工前逐项确认，记录进本票证据区）
- 本批素材已入 manifest 且通过校验（存在、hash、fallback 齐全）。
- 2026-10-12 蓝湖更新后重做：五枚正式切图已入库并登记
status: formal（icon.brand/icon.layers/icon.points/icon.event/icon.resource），实测 sha256、设计尺寸与 2x 倍率齐备；icon.blank设计稿未覆盖，维持temporary占位件。validateManifest()规则独立复算通过（字段齐全/key 唯一/路径安全/hash 格式/fallback 引用）。
- 2026-10-12 蓝湖更新后重做：五枚正式切图已入库并登记
- 差异判断表自查：本批涉及的差异逐项分类（结构项暂停并升新票；视觉项放行）。
- 七类逐项对照：仅「视觉资产」类命中（图标资源来源由内联改为蓝湖正式切图）+ 「布局尺寸」类一处（品牌位由 32×32 方形槽改为 90×34 按切图原比例）；信息层级、组件状态、地图/设备语义、数据契约、交互行为均未触碰 → 全部归视觉放行，无结构项。
- 既有结构断言面全绿（四模式 / 16
panelId/ 状态词表冻结）。- 未运行：按
AGENTS.md，本会话未获明确要求，不运行 build/dev/test。静态核对：本次改动只涉及icons.js/runtimeAssets.js/CockpitIcon.vue/public/cockpit/**，未触碰panelCatalog.js、状态词表、模式与面板结构。
- 未运行：按
- 若统一资产解析层尚未实现，先按规格 09 实现最小可用子集（manifest 校验 + 语义 key 解析），再进入本批素材替换。
- 已实现：
domain/runtimeAssets.js（manifest 校验 + 语义 key 解析 + BASE_URL 兼容）。最小子集边界：manifest 随包内置（构建期固化），运行时远程拉取/短缓存/整包回滚留待规格 09 完整实现，对外resolveAsset(key)语义不变。
- 已实现：
验收清单
实现者自测（纯逻辑 + 静态检查）：
- 图标注册表六键齐全，全部经语义 key 解析，组件与地图服务中无散落物理路径。
ICON_SPECS六键 →icon.*语义 key →resolveAsset()；全仓 grepcockpit/assets仅命中domain/runtimeAssets.js（manifest 导入）一处。
- 未知图标渲染为空不抛错（既有不变量保持）。
iconFor()未知名/无 URL 返回null→CockpitIcon两个分支均不渲染；不变量由组件模板条件渲染承载。
- manifest 条目字段齐全：语义 key、来源、hash、fallback、状态（正式/临时）。
- 六条目含
key/path/source(含画板·图层路径·导出 URL·归档副本)/format/dimensions/pixelRatio/transparent/renderMode/version/hash(sha256 实测)/status/appliesTo(含设计语义)/fallbackKey/core；五枚formal、一枚temporary。
- 六条目含
- 资源引用走查：全部图标有消费点，无死资源。
brand→CockpitShell 顶栏；layers/points/event/resource→MapCanvasLAYERS；points→MapCoordinateBlocked；blank→PanelPlaceholder；MapInfoPanel经layer.icon透传同一组 key。
- 结构回归全绿（四模式 / 16 面板 / 图例与标记一致）。
- 结构断言面未运行（
AGENTS.md：未经明确要求不运行 build/dev/test）；但四轮真实页面走查覆盖了四模式切换、面板收放、图例筛选与地图行为，均无回归迹象。结构保护断言（自动化面）留待批次 3 锚点迁移时一并跑（规格 13 的对抗式要求）。
- 结构断言面未运行（
收口（2026-10-12）
维护者指示「先这样收口这一项」。批次 1 关闭。
- 交付：统一资产解析层（规格 09 最小子集）+ 28 条 manifest + 46+10+8 张运行时图标 + 面板/行业/状态三套语义映射 + 走查单 + 图标素材使用共识（后续批次与设计协作的执行标准）。
- 遗留（已登记，不阻塞收口）：
icon.blank临时占位（票 06 缺口清单）；结构自动化断言面未跑（AGENTS.md 限制，走查已覆盖）。 - 后续入口：批次 3（位置符号，素材已备齐）Blocked by 批次 2（token 已上线可直接开）；批次 5（装饰）Blocked by 14–17。
- 使用规范以后以共识文档为准，图标类问题不再回本票翻历史。
维护者走查（真实 /cockpit）：
- 品牌位与五个功能图标视觉符合设计稿（或偏差已登记）。
- 四轮迭代均由维护者真实
http://127.0.0.1:8000/#/cockpit走查驱动：第一轮发现图标未生效（资源路径缺陷，已修复）；第二轮纠错 4 个语义映射并要求放大字号/图标；第三轮提供全量中文命名切图；第四轮定稿英文名 + 风格统一 + 状态标识图标。最终走查（agent 代执行 + 截图）：品牌主标题、行业四图标、16 面板标题统一蓝图标、状态行八枚区分色图标全部渲染，无 Vue 报错。
- 四轮迭代均由维护者真实
- 走查单逐项勾选 + 截图。
- 走查单：批次 1 验收说明（含本轮全部新增项）；截图：会话内工具回显（多轮），控制台无报错读数已记录于各轮小节。
缺口登记：
- 本批归视觉偏差已在签收前写入票 06 缺口清单（语义 key、缺口类型、回退结果、责任人）。
- 五枚图标已在票 06 缺口清单从「设计稿未覆盖」改记为「已替换为蓝湖正式切图」；
icon.blank保留「设计稿未覆盖、维持现状」一条。
- 五枚图标已在票 06 缺口清单从「设计稿未覆盖」改记为「已替换为蓝湖正式切图」；
证据区（完成后填写）
- 走查单路径：批次 1 验收说明。
- 使用规范：UI 设计及图标素材使用共识（本批沉淀：目录边界/英文命名/manifest 流程/染色规范/接缝纪律/已锁映射）。
data-*读数：CockpitIcon输出data-icon-name/data-asset-status；最终状态 27 条formal+blank1 条temporary。- 已登记缺口数：1（
icon.blank，票 06 缺口清单）。 - 维护者签收：收口确认（2026-10-12，维护者指示「先这样收口这一项」）。
维护者第四轮：英文名 + 风格统一 + 状态标识图标（2026-10-12）
维护者三项要求全部落地，走查通过。
1. 中文名 → 英文名
45 张切图全部改为英文命名（主标题.png→brand-title.png、管线、管道.png→pipeline.png、燃气.png→industry-gas.png…完整对照见 git 历史）。manifest 同步重建（28 条，release: 2026.10-lanhu-final-icons），中文原件已删除。
2. 面板小标题图标风格统一（去色 + 主蓝染色）
按维护者规定取 E:\&项目模型文件等\UI图片\Texture\Icon 下 I 系列（次要）/ Pipe 系列（主要）/ Q 系列（补充），经去色 + 项目调色盘主蓝 #01abea（--cyan）染色统一风格。染色保留原图灰度层次（渐变高光仍在，只换色相），生成件 11 个唯一图在 icons/panel/，映射（16 个 panelId → 11 个 key）：
| panelId | 源图 | 语义 |
|---|---|---|
| 态势总览 / 基础设施 | I图标设备 |
设备机柜 |
| 运行监测 / 运行信息 / 监测概览 | I图标在线 |
在线信号 |
| 预警设置 | I图标报警等级 |
报警等级 |
| 基础档案 / 管理信息 | I图标设备开发 |
设备开发 |
| 应急保障 / 当前预警 | I图标报警产生 |
报警产生 |
| 监测分布 | I图标资源整合 |
资源整合 |
| 监测点台账 | I图标设备 |
设备 |
| 历史分析 | Q图标时间 |
时间 |
| 预警效率 | I图标协议实施 |
协议实施 |
| 预警分析 | I图标规划设计 |
规划设计 |
染色脚本：research/tint-panel-icons.mjs（纯 Node PNG 解码/滤波还原/灰度染色/重编码，零依赖）。
3. 地图状态标识加图标 + 区分色
domain/pointStatus.js 的 legendVisuals() 每行新增 icon 字段；八个状态桶各配一枚语义色染色图标（icons/status/，脚本 tint-status-icons.mjs）：
| 状态 | 源图 | 染色 |
|---|---|---|
| 报警 | I图标报警产生（铃铛） |
#ff3b52（--lv1） |
| 预警 | I图标报警等级（警灯） |
#ffb020（--lv2） |
| 工单处置 | I图标报警解除（对勾） |
#01abea（--lv3） |
| 正常 | I图标在线（信号） |
#27d17a（--lv4） |
| 离线 | I图标离线（断线） |
#5680b0（--neutral） |
| 无设备 / 状态未发布 / 无关联设备 | I图标设备 / I图标报警误报 / I图标设备开发 |
中性色 |
MapCanvas 图例行在 StatusTag 前渲染该图标（14u、aria-hidden）。形状 + 颜色仍是状态的第一/第二线索——图标是可扫读性补充，不改变票 05/09 冻结的状态视觉契约（data-legend-key / data-status-* 断言面未动）。
校验
- manifest 28 条全过（可达性 + hash 一致 + fonts 授权块完整保留——批次 4 的
fonts.licenses6 条与 icon entries 并存，PRESERVED_TOP_LEVEL机制保住并发数据）； - 四处交叉引用一致（注册表 29 名 ↔ 28 key ↔ 组件引用 ↔ 面板/行业映射）;
- 真实页面走查：状态行八枚区分色图标、面板统一蓝图标、行业图标全部渲染，无 Vue 报错。
维护者第三轮：全量中文命名切图导入（2026-10-12，已被第四轮英文化取代）
维护者把蓝湖切图全部导入 public/cockpit/assets/icons/ 并按中文语义命名（45 个文件），同时提供备用素材目录（E:\&项目模型文件等\UI图片，内含批次 3 位置符号所需的 T_MarkPoint_White / T_MarkPoint_WhiteFull 白母版及整套彩色 MarkPoint）。本批据此重做映射。
映射原则（吸取前两轮教训）
- 一个文件一个 manifest key（按文件语义），多消费方经注册表共享——消除上轮「按消费方建 key」产生的 7 条冗余；
- 语义以维护者的中文命名为准，不再由 agent 看图猜测——语义错配从根因上消除；
- 路径保留中文原名（浏览器自动编码请求 URL，manifest 校验按磁盘原名对齐）；
- 上轮的 17 个旧英文命名文件已被维护者删除，无孤儿。
最终映射（manifest 18 条，release: 2026.10-lanhu-final-icons）
| 语义 key | 切图文件 | 用在哪 |
|---|---|---|
icon.brand |
主标题.png（470×114，自带标题文字与光带） |
顶栏品牌位 |
icon.layers |
管线、管道.png |
chip「管线图层」 |
icon.points |
监测.png |
chip「监测点」 |
icon.event |
紧急事件.png |
chip「事件定位」 |
icon.resource |
资源、资产.png |
chip「应急资源」 |
icon.industry.gas/water/drainage |
燃气.png / 供水.png / 排水.png |
行业筛选 |
icon.manhole |
窨井.png |
行业筛选「窨井」 |
icon.equipment |
设施、设备.png |
面板：态势总览 / 基础设施 / 监测分布 |
icon.heartbeat |
心跳、运行.png |
面板：运行监测 / 运行信息 / 监测概览 / 运行概况 |
icon.alert |
预警.png |
面板：预警设置 |
icon.device |
设备.png |
面板：基础档案 / 管理信息 |
icon.danger |
危险、异常、预警.png |
面板：应急保障 |
icon.history |
历史、时长.png |
面板：历史分析 |
icon.check |
正确、完成、通过、已处置、已解除.png |
面板：预警效率 |
icon.list |
事件.png |
面板：预警分析 |
icon.blank |
blank.svg（temporary） |
空面板占位 |
品牌位处理
主标题.png 自带「城市主生命线驾驶舱系统」文字与光带，若继续渲染 HTML 标题会出现两行重复。已改为：只渲染切图（宽 215u，按顶栏高度等比），<strong> 标题加 sr-only 视觉隐藏——读屏可访问名与走查断言不受影响。
未使用的导入文件（留待后续批次/维护者定夺）
- 批次 3（位置符号）：
供水点/排水点/燃气点/窨井点.png（246×114 水滴点位图）；备用目录的T_MarkPoint_White/WhiteFull白母版与彩色 MarkPoint 系列； - 批次 5（装饰）：
主标题装饰-光*.png、横向渐变、面板小标题装饰.png、面板左上/右上/左下/右下.png（面板切角）、选择框背景.png/标题选择框背景.png/选择背景底图.png、Rectangle 34624240@2x.png； - 功能候选：
刷新.png（可替换顶栏刷新按钮文字）、返回.png（可配「返回全球」）、燃气设施.png（霓虹消防栓徽标，可作大图展示）、供水监测.png（双水滴）、雨水.png/污水.png（排水细分）、安全、防护.png（盾牌）、关闭.png。
校验与走查
check-manifest.mjs：18/18 通过（文件可达 + 拒绝 HTML 兜底 + hash 一致）；cross-check-icons.mjs：注册表 ↔ manifest ↔ 组件引用 ↔ 面板/行业映射四处完全一致；- 真实页面走查：品牌主标题图、行业四图标、全部面板标题图标、地图摘要 chip 均已渲染，控制台无 Vue 报错。
维护者第二轮反馈修复（2026-10-12，语义纠错 + 字号/图标放大）
维护者核查后指出四类问题，均已处理。
1. 语义错配（我按图形猜错了 4 个）
原映射是我「看图猜语义」得出的，维护者给出正确对应并直接提供切图（Pipe管网设施 / Pipe预警处置 / Pipe应急指挥 / Q图标规模种类）：
| 落点 | 原（错误） | 现（维护者指派） | 切图文件 |
|---|---|---|---|
| 管线图层 | 网格方块 | 管网设施 | pipe-facility.png |
| 监测点 | 水滴 | 预警处置 | pipe-alert.png |
| 事件定位 | 警告三角 | 应急指挥 | pipe-command.png |
| 应急资源 | 火焰 | 规模种类 | scale-kind.png |
另一处语义纠正：那枚紫色网格球的真实语义是井盖，不是图层。已改名为 icon.manhole（manhole.png）并只用于行业筛选「窨井」；态势总览不再使用它（改为 icon.infrastructure 楼宇）。原 icon.industry.manhole（无线信号）随之移除。
根因记录：蓝湖切图多是无语义命名（(未命名图层)），只能靠看图推断，因此猜错。维护者已决定逐个改名核查，清单见切图文件地址清单。
2. chip 图标与文字不同行
.cockpit-icon 是 display: block，而 .map-info__layers 里的标签是行内 <span>，块级图标把文字挤到下一行。已给标签加 .map-info__layer-chip（inline-flex + align-items: center + white-space: nowrap）。
3. 图标与文字偏小（上调 1–2px）
- 字号：
tokens.css四个 token 各 +1（--fs-caption10.5→11.5、--fs-body13→14、--fs-title14.5→15.5、--fs-heading17→18）；另修 13 处裸像素字号（9–11u → 10–12u，脚本research/bump-font-sizes.mjs）；面板标题 14.5→15.5；chip 10.5→11.5。 - 图标：面板标题 14→17u；行业按钮 11→14u；地图摘要 chip 10→14u。
4. 走查结果
- manifest 18 条全过（文件可达 + 拒绝 HTML 兜底 + hash 一致）；
- 18/18 资源服务端可达（
Content-Type均为image/png/image/svg+xml，无 HTML 兜底）； - 真实页面
http://127.0.0.1:8000/#/cockpit：品牌位、行业筛选栏、四个面板标题、地图摘要 chip 均已渲染，控制台无 Vue 报错； - 注册表 18 个 key 与 manifest 完全一致（无缺失、无冗余）。
5. 未做（需说明）
- 设备点位图标不在本批：归执行-批次3：地图/设备位置符号替换（
Blocked by: 15token 批）。该批按规格 10 实现「双层水滴徽标」合成计划层——纯白母版承载状态色、内层图标承载行业/设备类型、尖端锚定、宽度基准 18/14。当前地图上的标记仍是既有内联 SVG 几何形状。 - 维护者将逐个核查并改名切图；同步方式见清单 §3。
图标应用面扩展（2026-10-12，维护者要求「对可以应用图标的地方都应用上」）
首轮只替换了原有 6 个占位图标，素材利用率过低。经逐张看图识别蓝湖 71 张切图后，新增 12 枚语义图标并接入两个最稳的落点。
新增切图 → 语义 key（均为蓝湖 2026-10-12 版正式切图，人工看图确认语义）
| 语义 key | 切图内容 | 设计尺寸 | 设计稿出处 | 仓库落点 |
|---|---|---|---|---|
icon.infrastructure |
楼宇 | 24×24 | D3 Overview/Metric/Container/Text |
面板：基础设施 / 基础设施总览 |
icon.facility |
立方体 | 24×24 | D7 Emergency/List Item/Text |
面板：基础档案 / 管理信息 |
icon.safety |
盾牌对勾 | 24×24 | D7 未命名图层 | 预留（处置完成语义） |
icon.history |
时钟 | 32×32 | D2 未命名图层 | 面板：历史分析 |
icon.efficiency |
对勾 | 32×32 | D2 未命名图层 | 面板：预警效率 |
icon.pulse |
信号波形 | 12×12 | D8 Article/Container/TechIcon |
面板：运行监测 / 运行信息 / 监测概览 / 运行概况 |
icon.close |
关闭叉 | 20×20 | D9 Header/Button - 关闭监测点位详情 |
预留（关闭语义） |
icon.emergency |
大火焰 | 32×32 | D2 未命名图层 | 面板：应急保障 |
icon.industry.gas |
消防栓 | 16×15 | D2 未命名图层 | 行业筛选「燃气」 |
icon.industry.water |
水波 | 32×32 | D2 未命名图层 | 行业筛选「供水」 |
icon.industry.drainage |
雨云 | 32×32 | D2 未命名图层 | 行业筛选「排水」 |
icon.industry.manhole |
无线信号 | 16×13 | D2 未命名图层 | 行业筛选「窨井」 |
manifest 由 6 条扩到 18 条（release: 2026.10-lanhu-v4-icons-r2），注册表 ICON_SPECS 同步扩展。
落点与契约保护
- 16 个面板标题：
domain/panelCatalog.js新增PANEL_ICONS+panelIcon()，按panelId映射；CockpitPanel在标题文字前渲染图标。 - 4 个行业筛选按钮：
domain/filterOptions.js新增INDUSTRY_ICONS+industryIcon()；CockpitShell派生industryChips渲染。 - 图标一律
aria-hidden：不参与按钮/标题的可访问命名（沿用CockpitPanel既有的「标记符号 aria-hidden，不参与命名」纪律）。 - 视觉信息不进契约：
INDUSTRIES数组结构、panelId、data-panel-id、data-industry、aria-pressed/aria-expanded全部未动；未登记的panelId/ 行业 key 返回空串 → 不画图标、不抛错。 - 样式改动最小：面板标题改
inline-flex+ 图标弱辉光；行业按钮用margin而非改通用 chip 排版，避免影响范围/视图等同款按钮。
校验状态
check-manifest.mjs：18 条全过（含文件可达性、拒绝 HTML 兜底、hash 一致）。- 服务端直连：12 枚新图标全部
200+ 二进制。 - 页面目视确认未完成：浏览器会话额度被并发任务占满，未能自行连上看实际效果，留在维护者验收项。
运行态修复（2026-10-12，维护者审核「图标没有应用到场景中」）
审核发现图标全部不生效。连到真实运行地址 http://127.0.0.1:8000/#/cockpit 定位到两个叠加缺陷，均已修复并复验：
缺陷 1（致命）：manifest 的 path 少一级目录，资源全部取不到
- 现象：
<img>请求/cockpit/icons/brand.png，返回 200，但内容是index.html。 - 原因：解析层按
${BASE_URL}cockpit/${path}拼接，而 manifest 写的是icons/brand.png；文件实际在public/cockpit/assets/icons/。路径少了assets/。 - 为何之前没发现：本仓 README 已写明 Vite dev 会把不存在的路径兜底成
index.html + 200；而当时的check-manifest.mjs只校验字段格式、key 唯一、路径安全和 hash 格式，不校验文件是否真实可达，于是 HTTP 200 与格式校验双双放行。 - 修复：manifest 六条
path改为assets/icons/*（重新生成，build-manifest.mjs中已注明「path相对public/cockpit、local相对 manifest 目录，两者基准不同」的注释）。 - 同时补强校验：
check-manifest.mjs增加三项——① 拼出的运行时路径必须命中磁盘；② 取到的不能是 HTML 兜底页；③ 内容 sha256 必须与登记值一致。失败时以非零码退出。 - 复验：6/6 资源返回正确
content-type（image/png/image/svg+xml）与正确字节（PNG 魔数89 50 4E 47）。
缺陷 2（我引入的回归）：品牌位改宽把标题挤出可视区
- 现象：顶栏「城市生命线驾驶舱系统」被截成「城市生命线驾」，并被模式按钮压住。
- 原因：品牌槽由 32×32 改为 90×34，顶栏宽度紧张时多占的 58u 把标题挤没。
- 修复：品牌槽按切图原比例（90:34 ≈ 2.65:1）收到 50×19（仅比原方块多 18u），并给
.cockpit-shell__brand-text加flex: none保证标题不被压缩。 - 复验：标题完整显示，品牌底板在深色顶栏左侧可见。
素材特性（非缺陷，需知悉）：icon.brand（nav/title-bg）像素级实测 alpha 仅 3–47（约 10–18% 不透明度），是半透明装饰渐变板；叠在深色顶栏上呈低调浅蓝光晕，属正常表现。其余四枚为完全不透明（实测 A=255）的实心彩色图标。
尚未完成的一步：四枚 chip 图标渲染在 MapInfoPanel 的折叠面板内（票 25 的并发改动已把图层行从 MapCanvas 迁到 MapInfoPanel），需在页面点开「地图摘要」浮标才能看到。资源链路已验证可达，但本次未能在真实页面上完成这一步的目视确认（浏览器会话两次中断），留待维护者走查。
真实状态与下一步（收口终态）
- 状态：已完成并关闭（2026-10-12，维护者指示收口）。 本节之上按时间顺序保留四轮执行与修复记录；最终事实以第四轮小节与图标素材使用共识为准。
- 最终交付：① 统一资产解析层（规格 09 最小子集，含可达性/hash 校验）；② manifest 28 条（27
formal+blank1temporary，fonts 授权块与批次 4 并存）；③ 64 张运行时图标（根 46 + panel 10 + status 8，全英文名）；④ 三套语义映射（面板 16 panelId / 行业 4 / 状态 8 桶）；⑤ 面板与状态图标按 I/Pipe/Q 系列去色染项目调色盘色统一风格；⑥ 走查单 + 图标使用共识文档。 - 遗留（已登记，不阻塞）：
icon.blank临时占位（票 06 缺口清单唯一未闭项）；结构自动化断言面未运行（AGENTS.md 限制；四轮真实走查未发现回归，自动化面留待批次 3 一并跑）。 - 下一步：① 批次 2（token）已由并发会话上线，批次 3（位置符号）素材已备齐可直接开做；② 批次 4（字体）进行中；③ 批次 5（装饰）Blocked by 14–17；④ 图标/切图类新需求一律按共识文档流程执行。
Out of Scope
- token 色值替换（批次 2）、位置符号（批次 3）、字体（批次 4）、装饰（批次 5）。
- 结构变更（面板/状态语义/交互契约）——按判断表升级路径另立票。
- 按
AGENTS.md，实施时未经用户明确要求不运行 build/dev。