浏览代码

fix(cockpit): 宽屏并排时收起面板要连背景板一起收起

现象:宽屏(≥3456×1239)并排布局下点击面板标题收起,只有内容消失,
面板背景板仍占着整条栏宽。

成因:宽屏块的 `.cockpit-shell__column > .cockpit-panel { flex: 0 0 var(--column-w) }`
与组件里的 `.cockpit-panel.is-collapsed { flex: 0 0 auto }` **特异性同为 (0,2,0)**,
而宽屏块在样式表里更靠后 → 收起态被覆盖,面板照旧占一整条栏宽。

修法:在宽屏块内补一条 (0,3,0) 的 `.cockpit-shell__column > .cockpit-panel.is-collapsed`
覆盖规则,把收起态的 flex 还原为 `0 0 auto`。展开态仍由原规则管着(恒等于一条
`--column-w`),不受影响。

闸门:t11 新增 F4f(宽屏块内必须有该覆盖规则且展开态仍恒等一条栏宽);
变异 M36(删掉覆盖规则)可打红。t02 34/34、t11 全通过、变异 33/33。
ChenJZ 1 天之前
父节点
当前提交
be56fafd49
共有 1 个文件被更改,包括 14 次插入 和 0 次删除
  1. 14 0
      src/modules/cockpit/CockpitShell.vue

+ 14 - 0
src/modules/cockpit/CockpitShell.vue

@@ -2970,6 +2970,20 @@ const mapDataSourceCredits = computed(() => getDataSourceCredits())
            压窄的同时 --u 的字号不变,观感就是「变窄、变形」。 */
         flex: 0 0 var(--column-w);
     }
+
+    /* 收起态必须**连背景板一起收起**(维护者 2026-10-27 反馈:宽屏下点标题只收内容,
+       背景板仍占整条栏宽)。
+
+       为什么会漏:上面那条 .cockpit-shell__column > .cockpit-panel 与组件里的
+       .cockpit-panel.is-collapsed { flex: 0 0 auto } **特异性同为 (0,2,0)**,
+       而宽屏块在样式表里更靠后 → 收起态被覆盖,面板照旧占一整条栏宽。
+
+       所以这里补一条 (0,3,0) 的规则把它抢回来:收起时 basis 回到 auto,
+       面板缩到只剩标题条那么大,不再占栏宽。
+       展开态仍由上面那条管着(恒等于一条 --column-w),不受影响。 */
+    .cockpit-shell__column > .cockpit-panel.is-collapsed {
+        flex: 0 0 auto;
+    }
 }