icon-files-checklist.md 4.9 KB

批次 1 切图文件地址清单(供维护者逐个核查)

生成时间:2026-10-12 用途:维护者按语义逐个核对/改名切图;改完后按 §3 的步骤同步到运行时。


1. 运行时图标(当前生效,17 枚正式 + 1 枚临时)

目录:public/cockpit/assets/icons/

语义 key 文件名 尺寸 当前含义 用在哪 状态
icon.brand brand.png 90×34@2x 品牌标题底板(半透明渐变板) 顶栏品牌位 正式
icon.layers pipe-facility.png 256×256 管线图层(Pipe管网设施) 地图摘要 chip「管线图层」 正式
icon.points pipe-alert.png 256×256 监测点(Pipe预警处置) 地图摘要 chip「监测点」 正式
icon.event pipe-command.png 256×256 事件定位(Pipe应急指挥) 地图摘要 chip「事件定位」 正式
icon.resource scale-kind.png 256×256 应急资源(Q图标规模种类) 地图摘要 chip「应急资源」 正式
icon.manhole manhole.png 15×15@2x 井盖(紫色网格球) 行业筛选「窨井」 正式
icon.infrastructure infrastructure.png 24×24@2x 楼宇 面板:态势总览 / 基础设施 正式
icon.facility facility.png 24×24@2x 立方体 面板:基础档案 / 管理信息 / 监测分布 正式
icon.safety safety.png 24×24@2x 盾牌对勾 (预留,当前无落点) 正式
icon.history history.png 32×32@2x 时钟 面板:历史分析 正式
icon.efficiency efficiency.png 32×32@2x 对勾 面板:预警效率 正式
icon.pulse pulse.png 12×12@2x 信号波形 面板:运行监测 / 运行信息 / 监测概览 / 运行概况 正式
icon.close close.png 20×20@2x 关闭叉 (预留,当前无落点) 正式
icon.emergency emergency.png 32×32@2x 大火焰 面板:应急保障 正式
icon.industry.gas industry-gas.png 16×15@2x 消防栓 行业筛选「燃气」 正式
icon.industry.water industry-water.png 32×32@2x 水波 行业筛选「供水」 正式
icon.industry.drainage industry-drainage.png 32×32@2x 雨云 行业筛选「排水」 正式
icon.blank blank.svg 48×32 空面板占位图示 无数据面板 临时(设计稿未覆盖)

绝对路径示例:E:\City-Lifeline-Cockpit-TvT\public\cockpit\assets\icons\pipe-facility.png


2. 蓝湖设计归档(71 张原图,未全部启用)

目录:.scratch/lanhu-cockpit-asset-replacement/design-archive-v2/ 索引(含每张的来源画板、图层路径、尺寸、sha256):design-archive-v2/index.json

命名规则:<画板>__<hash8>_<宽>x<高>.png,例:Desktop_-_2__7384e709_30x30.png

查看某张属于哪个图层:

cd E:\City-Lifeline-Cockpit-TvT
$idx = Get-Content -Raw .scratch/lanhu-cockpit-asset-replacement/design-archive-v2/index.json | ConvertFrom-Json
# 按尺寸筛
$idx.files | Where-Object { $_.px -eq '24x24' } | Select-Object px, artboard, layer, file | Format-Table -AutoSize
# 按画板筛
$idx.files | Where-Object { $_.artboard -eq 'Desktop - 2' } | Select-Object px, layer, file | Format-Table -AutoSize

原始 FigmaJSON(含全部图层/字体/色值,可复查任何未导出图层):research/raw-v2/desktop-02.json … desktop-10.json


3. 你改完文件名后,我怎么同步(二选一)

方式 A:你只改文件名(推荐,最省事)

把你改好的文件放进一个目录(例如 E:\_Design\切图\),告诉我路径 + 每个文件对应的语义(或直接用语义命名,如 管线图层.png)。我会:

  1. 按语义复制到 public/cockpit/assets/icons/;
  2. 更新 manifest.json(path/hash/尺寸/来源);
  3. 更新 domain/icons.js 与 domain/panelCatalog.js / filterOptions.js 的映射;
  4. 跑 check-manifest.mjs 校验;
  5. 浏览器走查复验。

方式 B:你直接改运行时目录里的文件名

那么请同时告诉我「旧名 → 新名」的对应关系——因为 manifest.json 里记的是路径,改文件名必须同步改 manifest,否则图标会 404(这正是之前那次「图标没生效」的同类坑)。


4. 命名约定建议(便于长期维护)

  • 语义前缀 + 用途:pipe-facility.png(管网设施)、pipe-alert.png(预警处置)、pipe-command.png(应急指挥)、scale-kind.png(规模种类)
  • 行业类:industry-gas.png / industry-water.png / industry-drainage.png
  • 面板类:infrastructure.png / facility.png / history.png / efficiency.png / pulse.png / emergency.png
  • 避免纯序号名(1.png / 未命名-3.png)——那正是这次语义错配的根源:蓝湖切图多是无语义命名,我只能靠看图猜,猜错了 4 个(已由你纠正)。