# 33: 一张图浮层布局（图例置顶 + 摘要最小化）

**What to build:** 点位状态图例移到**一张图最上方**；地图摘要**收成小胶囊**（不再占一大块、
不再有「地图摘要」文字标题）；顺手修掉票 32 引入的**引擎状态与底部摘要行叠字**。

（来源：维护者 2026-09-18 的三条要求 —— 「地图摘要也需最小化其形态，不应过分遮挡一张图页面」
「点位状态图例应放在一张图的最上方显示，当前位置显示效果不好」。）

Status: resolved
Labels: ready-for-agent

## 依赖与事实

- 图例（票 09）与底部摘要行（票 08）都在 `components/MapCanvas.vue`；引擎状态浮标由服务层自绘（票 21/32）。
- 先做了**几何测量**再动手：筛选条（y 64–98）并不压在地图上（地图 y 102 起），
  真正压在一张图上的是**底部那条 81px 高的浮层带**（图例 + 标题 + 实例提示 + 摘要行）。
- 票 32 把生产形态的引擎状态放到 `bottom:2px`，与底部摘要行（913–927）**重叠**（924–935）——
  这是本票要一并修掉的自身缺陷。

## 验收

- [x] 点位状态图例在**一张图最上方**（距画布顶 ≤ 24px），且图例（颜色语义）仍然显示。
- [x] 地图摘要最小化：去掉「地图摘要」文字标题、带状态点、宽度收窄到 ≤300px；
      动作按钮与状态文案的 `data-*` 选择器保留（票 07/08/09/10 走查依赖它们）。
- [x] 图例 / 引擎状态 / 底部摘要行三者**互不重叠**（两种形态下都成立）。
- [x] 调试形态仍能读到完整诊断信息（票 32 的形态契约不回退）。
- [x] 有真机走查（几何断言，不靠肉眼）：`verify/t33-overlay-layout-walkthrough.mjs`（14/14）。
- [x] 「无地图位置」浮块在**一张图右下角**（让开右栏），生产形态下与引擎状态日志收成右下角一摞摘要。

## 进度：100%

**已完成（2026-09-18）。**

### 改动

- `components/MapCanvas.vue`：`.map-holo__top` 改为「顶部带」——**图例在最上**（任何形态都显示），
  调试形态的标题 + 图层占位收进 `.map-holo__headline` 放在图例下方；图例从 `.map-holo__bottom` 移出。
- `services/mapService.js`：调试药丸 `top:74px → 96px`（让开图例与标题）；生产小字
  `bottom:2px → 26px`（**让开底部摘要行**，修掉叠字）。
- `CockpitShell.vue`：地图摘要块去掉 `cockpit-shell__scope-label`（「地图摘要」文字），
  收成「状态点 + 短文案 + 动作按钮」的小胶囊（`role="status"` + `aria-label` 保留语义），
  文案上限 210→150、字号 10.5→10、加淡边框与底色。

### 追补二（维护者 2026-09-18 看渲染图后）

维护者指出两点，均按几何测量落地：

1. **「无地图位置」浮块挪到一张图右下角**，继续减少遮挡。
   注意**右下角 ≠ 画布右下角**：右栏是 300px 宽的浮层（共享 token `--column-w`），
   贴 canvas 右缘会被它压住。实现为
   `right: calc(var(--column-w) + 10u); bottom: 26u; text-align: right`。
   实测：胶囊 **x 1194–1357（距右栏 11px）、y 885**，在下半屏、不再占中央。
2. **收紧为「右下角状态日志」**：原中央底部那行地图摘要（`.map-holo__bottom`）在生产形态下
   也改到同一摞（`right: calc(var(--column-w) + 10u); bottom: 22u; justify-items: end`），
   引擎状态日志落在最下（`bottom: 8px`）—— 右下角一小摞、中央视野完全空出。
   实测生产形态几何：胶囊 1194–1357 / y 885，引擎日志 y 918–929，两者右边线对齐、竖向不叠。
3. 关于图中那两块（标题 + 图层占位）：**生产形态下本来就不渲染**（`counts.headline = 0`、`chip = 0`），
   已用测量确认；它们只在调试形态出现（票 32 的形态契约）。

### 验证证据（`yarn dev`，Chrome 152 headless）

- 新走查 `t33-overlay-layout-walkthrough.mjs` → **14/14**（两种形态各 7 条），全部按真实几何断言：
  - 图例距画布顶 **11px**（生产与调试形态都是），图例标签 8 个在位；
  - **无重叠**：`legendVsStatus=false, pillVsStatus=false, pillVsLegend=false, pillVsHeadline=false`
    （生产形态：图例 113–133、药丸 900–911、摘要行 915–929 —— 修掉了票 32 的 924–935 压 913–927）；
  - 摘要块：无「地图摘要」文字节点、有状态点、宽 **230px**（≤300）、动作与文案选择器都在。
- 票 32 走查 `t32-ui-mode-walkthrough.mjs` → **9/9**（其几何断言已按新布局更新：
  生产小字贴底抬高一档 16–40px；调试药丸改为断言"在顶部且让开图例"）。
- 回归：t08 16/16、t09 28/28、t07/t10/t01/t04/t21/t21视图/t29/t30/t28 全绿（见票面回归批次）。