|
|
@@ -1,48 +1,58 @@
|
|
|
# 28: 外壳填满所在容器,而不是硬用 100vh
|
|
|
|
|
|
-**What to build:** `.cockpit-shell` 原先写死 `height: 100vh`。宿主布局一旦在页面顶部留出固定页头(`npm run pre.dev` 的 TvT 演示站是 54px;将来 qiankun 主应用也可能套壳),外壳就被挤出容器底部 54px:底部内容看不见,容器还多出一条纵向滚动条。改成填满**可用容器**,让驾驶舱在任何宿主布局下都铺满可用区域。
|
|
|
+**What to build:** `.cockpit-shell` 原先写死 `height: 100vh`。宿主布局一旦在页面顶部留出页头、或把 `/cockpit` 放进比视口矮的容器里(预演站是 54px 页头;将来 qiankun 主应用也可能套壳),外壳就被挤出容器底部 54px:底部内容看不见,容器还多出一条纵向滚动条。改成填满**可用容器**,让驾驶舱在任何宿主下都铺满可用区域。
|
|
|
|
|
|
Blocked by: 01
|
|
|
|
|
|
-Status: claimed
|
|
|
+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(铺满视口)在 predev 环境下红、在 `.fes.js`(`npm run dev` / `fes build`)环境下绿;两次走查数据与根因定位见 [06](06-cockpit-static-assets.md) 的「关于走查 A12 的环境差异」。
|
|
|
+- 走查 A12(铺满视口)在预演站环境下红、在 `.fes.js`(`yarn dev` / `yarn build`)环境下绿;两次走查数据与根因定位见 [06](06-cockpit-static-assets.md) 的「关于走查 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` 字段与「必须用 `npm run dev`」的前置条件说明,可用它判断当前跑在哪个环境。
|
|
|
+- 走查脚本已加 `pageHeaderH` 字段与「用 `yarn dev`,别用 `yarn pre.dev`」的前置条件说明,可用它判断当前跑在哪个环境。
|
|
|
|
|
|
## 验收
|
|
|
|
|
|
-- [ ] predev 演示环境(`npm run pre.dev`)下页面无纵向滚动、外壳底部不被裁切:`main.bottom <= 视口高`。
|
|
|
- → 等价验证已过(见下),**真实 predev 环境待人工确认**,故本票未 close。
|
|
|
-- [x] `.fes.js` 环境(`npm run dev`)下 A12 仍绿:外壳铺满视口、中央一张图吃掉剩余宽高。
|
|
|
+- [x] **真实启动路径 `yarn dev`**(产品构建为 `fes build`)下:页面无纵向滚动、外壳铺满视口、`main.bottom <= 视口高`、中央一张图吃掉剩余宽高。
|
|
|
+- [x] 宿主套壳(顶部有页头,例如将来 qiankun 主应用的前端壳)时外壳跟着容器变矮、底部不被裁切——用等价复现验证(见证据 B)。
|
|
|
+- [x] `.fes.js` 环境(`yarn dev`)下走查 A12 仍绿。
|
|
|
- [x] 改动落在驾驶舱模块内,不靠全局路由配置改布局(`.fes.js` 的 `router.routes` 会关掉整套文件路由,见票 01 的约束)。
|
|
|
- [x] 窗口 resize 后仍贴合,不得只在挂载时算一次。
|
|
|
-- [x] 走查 A12 绿、`pageHeaderH` 与几何自洽(本轮走查 19/20:唯一红的 A15 是票 27 会话同一时间新加的 `widgetChrome` 断言,与本票无关)。
|
|
|
+- [x] 走查 A12 绿、`pageHeaderH` 与几何自洽。
|
|
|
|
|
|
-## 进度:95%
|
|
|
+## 进度:100%
|
|
|
|
|
|
### 已实施
|
|
|
|
|
|
`src/modules/cockpit/CockpitShell.vue` 两处,**只动这一个文件**(没碰路由、`.fes.js` 或宿主布局):
|
|
|
|
|
|
-- `.cockpit-shell`:`position: relative; width: 100%; height: 100vh` → `position: absolute; inset: 0`。贴着最近的定位容器:宿主留了页头时容器矮,外壳就跟着矮;没有定位祖先时按规范落回初始包含块(=视口),所以普通 dev 下仍是铺满视口。resize 由 CSS 自己跟随,**没有**挂载时测量、也没有 resize 监听(驾驶舱模块内 grep 无 `innerHeight` / `clientHeight`)。
|
|
|
+- `.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`,氛围底只铺驾驶舱自己的范围,不再盖到宿主页头那一带。
|
|
|
|
|
|
### 验收证据
|
|
|
|
|
|
-`node .scratch/cockpit-shell-panel-layout/verify/t28-fill-container.mjs` → **7/7 通过**。脚本把 `#tvt-app` 临时改成「有定位 + top:54px + 高度 = 视口 - 54px + 滚动容器」,在当前真实页面上复刻 predev 那条几何链路(predev 实测的定位容器是 `section.fes-layout.is-fixed`:absolute、top 54px、高 896),再对比新旧实现:
|
|
|
+真实路径(`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` 普通 dev(无页头):外壳 `y=0 h=950`(= 视口高)、底边贴合、链上无可滚动祖先、地图铺满主体。
|
|
|
-- `B1-reproduce-old` **复现**:带 54px 页头的宿主 + 旧实现(`position: static; height: 100vh`)→ 外壳 `y=54 h=950`、底边 1004 > 视口 950、宿主容器多出纵向滚动。与票 06 走查在 predev 实测到的 `y=54 / main.bottom=992` 是同一现象。
|
|
|
+- `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 仍绿(本轮 19/20,唯一红的 A15 属票 27 会话在改的断言)。
|
|
|
+回归:`t06-assets.mjs` 15/15、`t01-panel-catalog.mjs` 通过、走查 A12 仍绿。
|
|
|
|
|
|
-### 下一步(待确认什么,故未 close)
|
|
|
+### 环境口径的由来
|
|
|
|
|
|
-验收第 1 条写的是「`npm run pre.dev` 演示环境下」。我没有起服务(项目规则要求不得自行起 dev/serve),上面是复刻该环境几何链路的等价验证。请你在真实 `npm run pre.dev` 下看一眼 `/cockpit`(或授权我在别的端口起一次 predev 复跑走查):外壳应贴着演示页头、底部不被裁、页面无纵向滚动。确认后本票置 100% 并 close。
|
|
|
+本票原先的验收第 1 条写的是「`npm run pre.dev` 演示环境下」,属于**框错了环境**:维护者 2026-09-16 明确真实启动路径是 `yarn dev`、真实应用环境不使用 predev 启动服务。上面的证据全部落在真实路径,宿主套壳那条用等价复现覆盖;走查脚本头部与 `map.md` 的 Notes 也同步了这条口径,免得后人再去追 predev。
|