From 23ea3af0deb6377182b4b21b682a8e9969c420d1 Mon Sep 17 00:00:00 2001
From: Zzc <1373857752@qq.com>
Date: Tue, 11 Nov 2025 18:03:50 +0800
Subject: [PATCH] =?UTF-8?q?feat(cockpit):=20=E4=B8=BA=E5=8F=AF=E5=B5=8C?=
 =?UTF-8?q?=E5=85=A5=E5=B8=83=E5=B1=80=E6=B7=BB=E5=8A=A0=E5=AE=B9=E5=99=A8?=
 =?UTF-8?q?=E6=9F=A5=E8=AF=A2=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

增加对 CSS 容器查询的支持，从而在嵌入式场景中实现响应式缩放。
更新了 mixin，使其使用容器单位（cqw/cqh）并为不支持的浏览器提供视口回退。
修改了 CockpitLayout，使用 CSS 自定义属性实现灵活嵌入，包括窄容器的紧凑模式。
---
 packages/screen/src/styles/index.scss         | 11 +++
 packages/screen/src/styles/mixins.scss        | 38 ++++++---
 .../cockpit/components/CockpitLayout.vue      | 78 ++++++++++++++++---
 3 files changed, 107 insertions(+), 20 deletions(-)

diff --git a/packages/screen/src/styles/index.scss b/packages/screen/src/styles/index.scss
index bcb6252..474e258 100644
--- a/packages/screen/src/styles/index.scss
+++ b/packages/screen/src/styles/index.scss
@@ -1,5 +1,16 @@
 @use './mixins.scss' as *;
 
+/**
+ * 全局 CSS 容器查询回退
+ *
+ * 这些根级别变量为不支持容器查询的浏览器提供默认的视口单位。
+ * 设置了 container-type 的组件会在支持时覆盖这些值为容器单位（cqw/cqh）。
+ */
+:root {
+  --cq-inline-100: 100vw;
+  --cq-block-100: 100vh;
+}
+
 * {
   margin: 0;
   padding: 0;
diff --git a/packages/screen/src/styles/mixins.scss b/packages/screen/src/styles/mixins.scss
index 276c69a..99f34cf 100644
--- a/packages/screen/src/styles/mixins.scss
+++ b/packages/screen/src/styles/mixins.scss
@@ -1,22 +1,40 @@
-// 屏幕适配工具
+// 屏幕适配工具（支持容器查询）
 // 设计稿基准：1920px (宽) × 982px (高，不含头部)
+//
+// 容器查询支持：
+// 当组件嵌入到其他系统时，会自动使用容器单位（cqw/cqh）而非视口单位（vw/vh）
+// 这确保了子组件相对于父容器而非整个视口进行缩放
+//
+// 回退策略：
+// 使用 CSS 变量 --cq-inline-100 和 --cq-block-100 提供渐进增强
+// 不支持容器查询的浏览器会回退到视口单位
 
-// 将 px 转换为 vw (基于设计稿宽度 1920px)
+$design-width: 1920;
+$design-height: 982;
+
+// 将 px 转换为容器宽度单位（基于设计稿宽度 1920px）
+// 在支持容器查询的浏览器中使用 cqw，否则回退到 vw
 @function vw($px) {
-  @return calc($px / 1920 * 100vw);
+  @return calc($px / $design-width * var(--cq-inline-100, 100vw));
 }
 
-// 将 px 转换为 vh (基于设计稿内容区域高度 982px)
+// 将 px 转换为容器高度单位（基于设计稿内容区域高度 982px）
+// 在支持容器查询的浏览器中使用 cqh，否则回退到 vh
 @function vh($px) {
-  @return calc($px / 982 * 100vh);
+  @return calc($px / $design-height * var(--cq-block-100, 100vh));
 }
 
-// 字体大小转换 (使用 vw 确保响应式)
+// 字体大小转换（使用容器宽度确保响应式）
+// 字体随容器宽度缩放，保持与其他元素的比例关系
 @function fs($px) {
-  @return calc($px / 1920 * 100vw);
+  @return vw($px);
 }
 
 // 使用示例：
-// width: vw(580);      // 580px → vw
-// height: vh(400);     // 400px → vh
-// font-size: fs(16);   // 16px → vw
+// width: vw(580);      // 580px → cqw (或 vw 作为 fallback)
+// height: vh(400);     // 400px → cqh (或 vh 作为 fallback)
+// font-size: fs(16);   // 16px → cqw (或 vw 作为 fallback)
+//
+// 注意：这些函数需要父容器设置了 container-type: inline-size 或 size
+// 例如在 CockpitLayout.vue 中已经设置了相应的容器类型
+
diff --git a/packages/screen/src/views/cockpit/components/CockpitLayout.vue b/packages/screen/src/views/cockpit/components/CockpitLayout.vue
index d73b737..3196e20 100644
--- a/packages/screen/src/views/cockpit/components/CockpitLayout.vue
+++ b/packages/screen/src/views/cockpit/components/CockpitLayout.vue
@@ -29,32 +29,89 @@ import YearStatistics from './YearStatistics.vue'
 </script>
 
 <style scoped lang="scss">
-@use '@/styles/mixins.scss' as *;
-
+/**
+ * 驾驶舱布局 - 可嵌入组件
+ *
+ * 此组件设计为可嵌入到其他系统中（iframe/组件）。
+ * 使用百分比和 rem 单位而非 vw/vh，以适应父容器尺寸。
+ *
+ * CSS 自定义属性（可被父级覆盖）：
+ * - --cockpit-side-width: 侧边栏宽度（默认：minmax(15rem, 28%)）
+ * - --cockpit-gap: 网格间距和面板间距（默认：1.25rem）
+ * - --cockpit-padding-x: 水平内边距（默认：0.625rem）
+ * - --cockpit-padding-top: 顶部内边距（默认：0）
+ * - --cockpit-padding-bottom: 底部内边距（默认：0）
+ * - --cockpit-min-height: 最小高度（默认：600px）
+ *
+ * 父级使用方式：<CockpitLayout style="--cockpit-gap: 2rem" />
+ * 窄容器嵌入（<1100px 宽度）时，添加 .is-compact 修饰符类：
+ *   <CockpitLayout class="is-compact" />
+ * 如需在滚动父容器中嵌入，可覆盖 overflow: hidden
+ *
+ * 浏览器兼容性：需要 CSS 自定义属性支持（Chrome 49+, Safari 9.1+, Firefox 31+）
+ * 未来计划：支持容器查询以实现响应式窄屏布局
+ *
+ * 基于 1920px 设计稿，根字体大小 16px
+ */
 .cockpit-layout {
-  width: 100vw;
-  height: 100vh;
+  /* 容器查询设置，用于嵌入场景的自适应缩放 */
+  container-name: cockpit-layout;
+  container-type: size;
+
+  /* 为旧版浏览器提供视口单位回退 */
+  --cq-inline-100: 100vw;
+  --cq-block-100: 100vh;
+
+  /* 当支持容器单位时覆盖为容器单位 */
+  @supports (width: 1cqw) {
+    --cq-inline-100: 100cqw;
+  }
+  @supports (height: 1cqh) {
+    --cq-block-100: 100cqh;
+  }
+
+  /* 嵌入场景的 CSS 自定义属性 */
+  --cockpit-side-width: minmax(15rem, 28%);
+  --cockpit-gap: 1.25rem;
+  --cockpit-padding-x: 0.625rem;
+  --cockpit-padding-top: 0;
+  --cockpit-padding-bottom: 0;
+  --cockpit-min-height: 600px;
+
+  /* 使用 100% 填充父容器而非视口 */
+  width: 100%;
+  height: 100%;
+  min-height: var(--cockpit-min-height);
+  min-width: 0; /* 允许 flex 子元素收缩 */
+
   background: url(../assets/img/cockpit-main-bg.png) no-repeat;
   background-size: cover;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  overflow: auto; /* 当宿主高度 < 最小高度时允许滚动 */
+}
+
+/* 窄容器嵌入的紧凑布局（<1100px 宽度）*/
+.cockpit-layout.is-compact {
+  --cockpit-side-width: minmax(12rem, 24%);
+  --cockpit-gap: 1rem;
 }
 
 .cockpit-main {
   flex: 1;
+  min-height: 0; /* 允许网格在 flex 上下文中收缩 */
   display: grid;
-  grid-template-columns: vw(580) 1fr vw(580);
-  gap: vw(20);
-  padding: 0 vw(10);
-  // padding-top: 0;
+  grid-template-columns: var(--cockpit-side-width) 1fr var(--cockpit-side-width);
+  gap: var(--cockpit-gap);
+  padding: var(--cockpit-padding-top) var(--cockpit-padding-x) var(--cockpit-padding-bottom);
 }
 
 .left-panel,
 .right-panel {
   display: flex;
   flex-direction: column;
-  gap: vw(20);
+  gap: var(--cockpit-gap);
+  min-width: 0; /* 防止在窄容器中溢出 */
 }
 
 .center-panel {
@@ -62,5 +119,6 @@ import YearStatistics from './YearStatistics.vue'
   align-items: center;
   justify-content: center;
   position: relative;
+  min-width: 0; /* 确保地图可以在需要时收缩 */
 }
 </style>