33-overlay-layout.md 4.8 KB

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)—— 这是本票要一并修掉的自身缺陷。

验收

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

进度: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 全绿(见票面回归批次)。