# 票 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-2306` `TONE_FALLBACK`：`lv1 #ff4d5e` / `lv2 #ffa63d` / `lv3 #4fd8ff` / `lv4 #35e39a` / `neutral #6d92ae`（脱浏览器时的兜底色）。
- `services/cesiumEngine.js:134` 地图球体底色。
- `components/PanelBlocks.vue:295-300` `pieToneColor()`：`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` 声明一份」。