28: 外壳填满所在容器，而不是硬用 100vh

What to build: .cockpit-shell 原先写死 height: 100vh。宿主布局一旦在页面顶部留出页头、或把 /cockpit 放进比视口矮的容器里（预演站是 54px 页头；将来 qiankun 主应用也可能套壳），外壳就被挤出容器底部 54px：底部内容看不见，容器还多出一条纵向滚动条。改成填满可用容器，让驾驶舱在任何宿主下都铺满可用区域。

Blocked by: 01

Status: resolved Labels: ready-for-agent

请勿据标签重复接单：本票已完成并有验证记录，Labels 保留只是为了让面板不把它退化成 needs-triage。

环境口径（维护者 2026-09-16 澄清）

真实启动路径是 yarn dev（= fes dev → .fes.js：layout.navigation: null，页面无页头）；真实应用环境不使用 predev 启动服务。yarn pre.dev / pre.dev.one 是 TvT 预演站布局（navigation: 'top' + isFixedHeader，顶部多 54px 固定页头），只用于预览插件，不是产品路径。

本票最初把验收写成「predev 演示环境下……」，那是框错了环境：验收改以真实路径为准（见下），predev 那条几何只作为「宿主套壳」的等价复现手段保留在证据里。本票的剩余价值因此落在两点：真实路径下不得有回归；将来 /cockpit 被 qiankun 主应用或别的前端壳包住时，外壳仍要铺满可用区域而不是溢出。

依赖与事实

走查 A12（铺满视口）在预演站环境下红、在 .fes.js（yarn dev / yarn build）环境下绿；两次走查数据与根因定位见 06 的「关于走查 A12 的环境差异」。
页头来源：.fes.predev.js / .fes.predev.one.js 的 layout.navigation: 'top' + isFixedHeader: true；.fes.js 是 navigation: null，src/.fes/plugin-layout/views/BaseLayout.vue 落到 v-else，只渲染 <FMain><router-view /></FMain>。
走查脚本已加 pageHeaderH 字段与「用 yarn dev，别用 yarn pre.dev」的前置条件说明，可用它判断当前跑在哪个环境。

验收

真实启动路径 yarn dev（产品构建为 fes build）下：页面无纵向滚动、外壳铺满视口、main.bottom <= 视口高、中央一张图吃掉剩余宽高。
宿主套壳（顶部有页头，例如将来 qiankun 主应用的前端壳）时外壳跟着容器变矮、底部不被裁切——用等价复现验证（见证据 B）。
.fes.js 环境（yarn dev）下走查 A12 仍绿。
改动落在驾驶舱模块内，不靠全局路由配置改布局（.fes.js 的 router.routes 会关掉整套文件路由，见票 01 的约束）。
窗口 resize 后仍贴合，不得只在挂载时算一次。
走查 A12 绿、pageHeaderH 与几何自洽。

进度：100%

已实施

src/modules/cockpit/CockpitShell.vue 两处，只动这一个文件（没碰路由、.fes.js 或宿主布局）：

.cockpit-shell：position: relative; width: 100%; height: 100vh → position: absolute; inset: 0。贴着最近的定位容器：宿主留了页头时容器矮，外壳就跟着矮；没有定位祖先时按规范落回初始包含块（＝视口），所以 yarn dev 下仍是铺满视口。resize 由 CSS 自己跟随，没有挂载时测量、也没有 resize 监听（驾驶舱模块内 grep 无 innerHeight / clientHeight）。
.cockpit-shell__atmosphere：fixed → absolute，氛围底只铺驾驶舱自己的范围，不再盖到宿主页头那一带。

验收证据

真实路径（yarn dev，服务在 8000）：外壳 position: absolute、y=0 h=950（= 视口高）、底边贴合、链上无可滚动祖先、地图铺满主体；走查 A12（铺满视口）保持绿。

node .scratch/cockpit-shell-panel-layout/verify/t28-fill-container.mjs → 7/7 通过。脚本把 #tvt-app 临时改成「有定位 + top:54px + 高度 = 视口 - 54px + 滚动容器」，复刻「宿主套壳」那条几何链路（预演站里实测到的定位容器是 section.fes-layout.is-fixed：absolute、top 54px、高 896），再对比新旧实现：

A-real-host 真实宿主（无页头）：外壳铺满视口、底边贴合、无可滚动祖先、地图铺满主体。
B1-reproduce-old 复现：套壳宿主 + 旧实现（position: static; height: 100vh）→ 外壳 y=54 h=950、底边 1004 > 视口 950、宿主容器多出纵向滚动。与票 06 走查在预演站实测到的 y=54 / main.bottom=992 是同一现象。
B2-fixed 修复后：外壳高 = 容器高 896、底边 = 视口底 950、main.bottom <= 视口高、无纵向滚动、地图仍铺满主体。
B3-atmosphere-scoped：氛围底范围与外壳完全一致，不越界到页头那一带。
B4-follows-container + C-real-viewport-resize：容器再变矮 66px、以及把视口真的改成 1280x720，外壳都跟着缩（666 = 720 - 54）并保持底边贴合、无滚动条——证明是 CSS 跟随，不是一次性测量。

回归：t06-assets.mjs 15/15、t01-panel-catalog.mjs 通过、走查 A12 仍绿。

复核（2026-09-17，停掉长跑服务后 yarn dev 全新启动）：t28-fill-container.mjs 仍 7/7，走查 20/20（含 A12；A15 那次红已查明是长跑 server 的陈旧模块，见票 27 的复跑复核一节）。

环境口径的由来

本票原先的验收第 1 条写的是「npm run pre.dev 演示环境下」，属于框错了环境：维护者 2026-09-16 明确真实启动路径是 yarn dev、真实应用环境不使用 predev 启动服务。上面的证据全部落在真实路径，宿主套壳那条用等价复现覆盖；走查脚本头部与 map.md 的 Notes 也同步了这条口径，免得后人再去追 predev。

28-shell-fill-container.md 5.8 KB Histórico Raw