15-batch2-token-baseline.md 11 KB
票 15 取证：批次 2（面板视觉 token 替换）事实基线
生成时间：本次执行
数据来源：.scratch/lanhu-cockpit-asset-replacement/research/raw-v2/（蓝湖 2026-10-12 版 v3/v4，9 画板）
脚本：probe-v2-palette.mjs / probe-v2-main-board.mjs / probe-v2-tokens.mjs / probe-v2-panel-style.mjs / probe-v2-main-palette.mjs / probe-v2-panel-conflict.mjs / probe-token-litter.mjs / probe-size-litter.mjs
本文件只记录可复核的机器提取事实，不含取舍结论。取舍写在票 15 正文。
1. 设计基准与缩放（--u）
| 项 | 设计稿（新版全 9 画板） | 现有实现 |
|---|---|---|
| 画板宽度 | 全部 1440 | 设计基准 1920（--u: clamp(1px, 0.0521vw, 2px)，1920 时 = 1px） |
--u 换算实测（现行公式）：
| 视口宽 | --u |
--fs-caption(10.5u) |
--fs-body(13u) |
--fs-title(14.5u) |
|---|---|---|---|---|
| 1280 | 1px | 10.5px | 13.0px | 14.5px |
| 1440 | 1px | 10.5px | 13.0px | 14.5px |
| 1920 | 1px | 10.5px | 13.0px | 14.5px |
| 2560 | 1.33px | 14.0px | 17.3px | 19.3px |
| 3840 | 2px | 21.0px | 26.0px | 29.0px |
若改按 1440 重标定（--u: clamp(0.889px, 0.0694vw, 2px)，1440 时 = 1px）：
| 视口宽 | --u |
--fs-caption |
--fs-body |
--fs-title |
|---|---|---|---|---|
| 1280 | 0.889px | 9.3px | 11.6px | 12.9px |
| 1440 | 1px | 10.5px | 13.0px | 14.5px |
| 1920 | 1.33px | 14.0px | 17.3px | 19.3px |
设计稿字号（Noto Sans SC 为主，全 9 画板）：10 / 11 / 12 / 13 / 14 / 15 / 17px 为主档，正文 12px、辅助 10–11px、面板标题 17px、KPI 数字 25–30px（Rajdhani）。
2. 全稿色板（按出现频次，Top 45）
| 色值 | 次数 | 画板覆盖 |
|---|---|---|
#5680b0 |
341 | 9/9 |
#88b7e8 |
309 | 9/9 |
#01abea |
281 | 9/9 |
#d7ecff |
208 | 9/9 |
#ffffff |
200 | 9/9 |
#27d17a |
113 | 9/9 |
#001f5c |
103 | 7/9 |
#001448 |
85 | 9/9 |
#000d2a |
63 | 7/9 |
#00b8ff |
59 | 9/9 |
#ff3b52 |
53 | 9/9 |
#ffb020 |
44 | 9/9 |
#02091b |
37 | 9/9 |
#d9d9d9 |
28 | 9/9 |
#030919 |
28 | 4/9 |
#33b3ed |
18 | 9/9 |
#970b1c |
18 | 9/9 |
#f0152f |
18 | 9/9 |
#b9e8ff |
18 | 9/9 |
#010514 |
15 | 9/9 |
#a970ff |
15 | 8/9 |
#001847 |
14 | 8/9 |
#00ceea / #009de9 |
9 / 9 | 9/9 |
#42de90 |
8 | 4/9 |
#8f8cfc |
8 | 4/9 |
#14c2ff |
7 | 7/9 |
#1780ff |
7 | 7/9 |
#c1d5ff |
7 | 7/9 |
全稿色值种类共 60；带透明度色值 Top：#001448@0.26(85)、#000d2a@0.45(63)、#001f5c@0.50(53)、#02091b@0.28(37)、#001f5c@0.40(35)、#01abea@0.08(21)、#01abea@0.35(16)、#001f5c@0.60(15)。
描边（borders）Top：#01abea(265)、#01abea@0.18(240)、#01abea@0.35(178)、#5680b0(38)、#01abea@0.13(37)、#ff3b52(20)、#f0152f(18)、#01abea@0.32(15)、#01abea@0.38(15)、#27d17a@0.55(15)、#42de90(12)、#ffb020(9)。
圆角：全稿 0 圆角（radius 全零，无一处非零）。
3. 面板形态（冲突判定用）
45 个 Panel 节点中，≥300 宽的 25 种形态里，面板底色与边框只有一套（其余是同一形态的不同尺寸）：
fills = color:#02091b@0.28 + linear-gradient(
#00359c@0.34 0% → #0045a7@0.20 22% → #005cb5@0.13 32% → #0174c5@0.09 38%
→ #01abea@0.05 43% → #015e90@0.10 50% → #003e6b@0.14 57% → #00234b@0.22 71%
→ #000f34@0.38 100%)
border = #01abea@0.35 宽 0.96px
radius = 0
表头（Header，11 种形态）主形态：fills = linear-gradient(#00359c@0.23 0% → #00359c@0.00 72%)，border = #01abea@0.13；另有 Header 632x43 用 #01abea@0.12 → #00359c@0.22 + border #01abea@0.35（详情弹窗表头）。
chip：主形态 fill #001448@0.26 + border #01abea@0.35；选中态 fill #011f50 + border #01abea（不透明）。
画板根填充（= 页面底色）：9/9 全为 #010514。中央底图占位 Rectangle 34624244 为 #d9d9d9（AI 生成图占位，非正式素材）。
阴影/模糊 Top：shadow #00071a@0.18 blur28 y12(46)、shadow #00359c@0.23 blur38(46)、shadow #01abea@0.13 blur0 y1(46)、shadow #01abea blur10(46)、blur Gaussian r16(37)、shadow #01abea blur12(37)、shadow #ff3b52@0.35 blur24(8)、blur Gaussian r40(9)。
4. 文字层级（字号 × 颜色，全稿）
| 字号 | 颜色 | 次数 | 例 |
|---|---|---|---|
| 10px | #5680b0 |
139 | 03.10 |
| 12px | #88b7e8 |
114 | 城区 |
| 11px | #88b7e8 |
91 | 未关闭事件 |
| 11px | #5680b0 |
87 | 当前事件与设备定位 |
| 8px | #5680b0 |
55 | LON |
| 17px | #d7ecff |
46 | 当前预警 |
| 14px | #d7ecff |
45 | 供水水位监测点 01 |
| 12px | #01abea |
44 | 全部 |
| 9px | #5680b0 |
44 | 定位 |
| 12px | #d7ecff |
41 | 燃气 |
| 13px | #88b7e8 |
40 | 历史分析 |
| 26px | #ffffff |
36 | 2 |
| 14px | #00b8ff |
25 | 总体概览（一级模式选中） |
| 14px | #ffffff |
23 | 预警处置 |
| 25px | #d7ecff |
KPI 值 | 1,284 |
| 25px | #ffb020 / #ff3b52 / #27d17a |
KPI 值 | 14 / 08 / 82% |
字体族（全稿）：Noto Sans SC 895、Rajdhani 161、Share Tech Mono 131、PingFang TC 75、PingFang MO 21、Alimama FangYuanTi VF 18、PingFang HK 18、PingFang SC 6、DIN 2。
状态词配色（文字内容精确命中状态词）：在线 → #27d17a、正常 → #27d17a、报警 → #ff3b52、预警 → #ffb020、处置中 → #ffb020、待接单 → #01abea、已完成 → #5680b0、离线/故障 → #5680b0。
5. 现有 token 与设计稿对照
| 语义 | 现有 token | 设计稿主值 | 差异 |
|---|---|---|---|
| 页面底色 | --bg-0: #01060d |
#010514 |
极接近 |
| 主色 | --cyan: #4fd8ff |
#01abea（281 次，主）/ #00b8ff（59 次，导航选中） |
设计更偏蓝、饱和度更高 |
| 主色深 | --cyan-d: #1b93cf |
#33b3ed / #009de9 |
— |
| 面板顶 | --panel-top: rgba(12,48,86,0.58) |
#02091b@0.28 + 九停渐变 |
设计为低透明深蓝 + 多层渐变 |
| 面板底 | --panel-bot: rgba(3,14,28,0.9) |
渐变末停 #000f34@0.38 |
— |
| 面板线 | --panel-line: rgba(58,170,226,0.3) |
#01abea@0.35 |
色相不同（蓝→青蓝） |
| 面板高亮线 | --panel-line-hi: rgba(96,220,255,0.85) |
#01abea（不透明） |
— |
| 报警 | --lv1: #ff4d5e |
#ff3b52 / #f0152f / #970b1c |
设计有深浅三级红 |
| 预警 | --lv2: #ffa63d |
#ffb020 |
接近 |
| 正常 | --lv4: #35e39a |
#27d17a / #42de90 |
设计偏绿更深 |
| 中性 | --neutral: #6d92ae |
#5680b0 |
— |
| 文字主 | --text: #e6f5ff |
#d7ecff |
接近 |
| 文字次 | --text-2: #a8cbe2 |
#88b7e8 |
— |
| 弱化 | --muted: #6d92ae |
#5680b0 |
— |
| 面板标题 | 组件内 #eaf9ff |
#d7ecff（17px） |
— |
设计稿新增槽位（现有 token 无对应）：#a970ff / #8f8cfc / #9469f2（紫）、#b9e8ff / #80bcff / #c1d5ff（浅蓝）。
6. 组件内散落字面量（清退面）
6.1 主题色字面量（按色族聚合，跨 17 个文件）
| 色族 | 合计 | 主要文件 |
|---|---|---|
--cyan 族（#4fd8ff / rgba(79,216,255,…)） |
70 | PanelBlocks.vue(19)、CockpitShell.vue(18)、CockpitPanel.vue(10)、CockpitIntro.vue(4)、MapCanvas.vue(4)、PointDetailCard.vue(4) |
--neutral（#6d92ae） |
57 | PointDetailCard.vue(10)、PanelBlocks.vue(9)、EquipmentDetailSections.vue(5)、SectionStateTag.vue(5)、CockpitShell.vue(4)、MapInfoPanel.vue(4) |
--panel-line 族（rgba(58,170,226,…)） |
41 | PointDetailCard.vue(8)、PanelBlocks.vue(5)、EquipmentDetailSections.vue(4)、MapCoordinateBlocked.vue(4)、WorkOrderTimeline.vue(4) |
--lv2 族 |
33 | CockpitShell.vue(13)、PanelBlocks.vue(4)、EquipmentDetailSections.vue(3)、MapCoordinateBlocked.vue(3)、PointDetailCard.vue(3)、WorkOrderTimeline.vue(3) |
--text-2 |
20 | PanelBlocks.vue(5)、PointDetailCard.vue(3)、MapCoordinateBlocked.vue(2)、WorkOrderTimeline.vue(2) |
#eaf9ff（标题亮色） |
18 | PanelBlocks.vue(9)、PointDetailCard.vue(4)、EquipmentDetailSections.vue(2) |
--lv1 族 |
14 | CockpitShell.vue(5)、mapService.js(2) |
--text |
12 | EventDetailCard.vue(3)、EquipmentDetailSections.vue(2)、PanelBlocks.vue(2) |
--lv4 族 |
11 | CockpitShell.vue(5) |
#9dc2d9（正文蓝） |
7 | CockpitShell.vue(2)、EventDetailCard.vue 等各 1 |
--panel-top 基色 |
6 | PointDetailCard.vue(2)、CockpitShell.vue、CockpitPanel.vue、EventDetailCard.vue |
--panel-bot 基色 |
5 | CockpitShell.vue、CockpitPanel.vue、EventDetailCard.vue、PointDetailCard.vue |
--cyan-d |
5 | PanelBlocks.vue(2)、CockpitPanel.vue、PointDetailCard.vue |
--panel-line-hi |
4 | CockpitShell.vue、EventDetailCard.vue、PointDetailCard.vue |
#04121f（地图底） |
3 | CockpitShell.vue、MapCanvas.vue、cesiumEngine.js |
rgba(130,225,255,…)（内高光） |
3 | CockpitPanel.vue、MapCanvas.vue、PointDetailCard.vue |
rgba(6,24,44,0.82)（面板中停） |
2 | CockpitPanel.vue、PointDetailCard.vue |
表头渐变三色 rgba(24,96,152,0.55) / rgba(12,52,90,0.3) / rgba(90,200,255,0.1) |
2 / 2 / 2 | CockpitPanel.vue、PointDetailCard.vue |
表头 hover 两色 rgba(34,116,176,0.6) / rgba(16,66,110,0.34) |
1 / 1 | CockpitPanel.vue |
JS 侧主题字面量（不在 CSS，属主题色但写在脚本里）：
services/mapService.js:2300-2306TONE_FALLBACK：lv1 #ff4d5e/lv2 #ffa63d/lv3 #4fd8ff/lv4 #35e39a/neutral #6d92ae（脱浏览器时的兜底色）。services/cesiumEngine.js:134地图球体底色。components/PanelBlocks.vue:295-300pieToneColor()：var(--lv*, #fallback)形式。
6.2 字号与尺寸档位
font-size声明：var(--fs-caption, 10.5px)×56、var(--fs-body, 13px)×8、var(--fs-title, 14.5px)×1；其余 19 处为calc(N * var(--u))裸档位（9 / 9.5 / 10 / 10.5 / 11 / 12.5 / 13 / 13.5 / 14 / 14.5 / 15 / 21 / 26）。calc(N * var(--u))全部裸档位共 42 个（1u–340u），其中高频：3u(23)、4u(22)、10u(19)、6u(16)、2u(15)、8u(12)、5u(11)、52u(4)。- 非
var()的裸 px 尺寸声明共 34 条（跨 10 个文件），多数为 ≤1px 发丝线与小圆点（height: 1px/width: 6px/gap: 1px），以及外壳的min()/max()响应式夹取（min-width: min(220px, 28vw)、max-height: min(62vh, 520px)）。
7. 既有断言面对 token 的耦合
.scratch/cockpit-shell-panel-layout/verify/t06-assets.mjs的[B] 基础视觉 token断言：token 必须声明在.cockpit-shell、不得挂:root、五类 token 名齐全、语义色不得在 token 文件外重复声明（--lv1..--lv4/--neutral/--cyan的name:形式）。t09-point-status.mjs、t43-device-correspondence.mjs等按色值/色键断言（读运行态计算样式或色键，不写死 hex 于 token 之外）。src/modules/cockpit/domain/statusPie.js注释固化「颜色仍只写色键，色值只在tokens.css声明一份」。