From d3c2e41fd879a00512f7c64324cad3aab7a48af3 Mon Sep 17 00:00:00 2001
From: xfy <i@rua.plus>
Date: Mon, 6 Jul 2026 00:20:55 +0800
Subject: [PATCH] =?UTF-8?q?fix(codemirror):=20=E7=BC=96=E8=BE=91=E5=99=A8?=
 =?UTF-8?q?=E5=A1=8C=E7=BC=A9=E5=AF=BC=E8=87=B4=E4=B8=8A=E4=B8=8B=E8=83=8C?=
 =?UTF-8?q?=E6=99=AF=E5=89=B2=E8=A3=82=EF=BC=88height:100%=20=E5=A4=B1?=
 =?UTF-8?q?=E6=95=88=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

上一提交（3c10f72）用 `& { height: 100% }` 让 .cm-editor 撑满容器，
但实测无效——headless chromium 抓取 computed style 显示：

  容器#ed:      h=280px  (min-height)
  .cm-editor:   h=63px   ← 塌缩！只有内容高度
  .cm-gutters:  h=63px
  .cm-content:  h=63px

根因：CSS 百分比高度要求父元素有「明确 height」（不是 min-height）。
容器只有 min-height: 280px，没有 height，`.cm-editor { height: 100% }`
解析为 auto，塌缩到内容高度（3 行 ≈ 63px）。剩余 217px 透出容器背景
（paper-entry/mantle），与 .cm-editor 的 base 色形成上下割裂。

修复：改用 flexbox 而非百分比高度——
- themes.ts：`& { flex: 1 1 0; minHeight: 0 }`（替换 height:100%）
- 容器（system.rs / runner.rs）：`display: flex; flex-direction: column`

flex 子项的 `flex: 1` 不依赖父元素 height，能真正填满 min-height 撑开
的空间。headless 验证：.cm-editor 现为 280px，与容器一致，割裂消失。

诊断方法：构建自包含测试 HTML（内联 editor.js），chromium --headless
--dump-dom 抓 getComputedStyle。这是应有的反馈循环，避免了前几轮
凭代码猜测导致的反复误诊。
---
 libs/codemirror-editor/src/themes.ts | 10 ++++++----
 src/components/code_runner/runner.rs |  2 +-
 src/pages/admin/system.rs            |  5 +++--
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/libs/codemirror-editor/src/themes.ts b/libs/codemirror-editor/src/themes.ts
index ffe6d06..b6cae50 100644
--- a/libs/codemirror-editor/src/themes.ts
+++ b/libs/codemirror-editor/src/themes.ts
@@ -13,13 +13,15 @@ export type ThemeName = 'light' | 'dark';
  *    （`#333338`）特异性高于 catppuccin 的 `.cm-gutters`，catppuccin 的 base 背景被
  *    压制，行号列与代码区背景不一致。用 `!important` 强制透明，继承 editor base 色。
  *
- * 2. `.cm-editor` 默认不撑满父容器：core 的 `&` 没设 height，编辑器只占内容高度，
- *    容器剩余空间透出父元素背景，造成「有行号的上半部分」与「空白下半部分」色差。
- *    用 `& { height: 100% }` 让编辑器填满容器。
+ * 2. `.cm-editor` 默认不撑满父容器：core 的 `&` 没设 height/flex，编辑器只占内容
+ *    高度。`height: 100%` 在父容器只有 min-height 时会塌缩（CSS：百分比高度需要
+ *    父元素有明确 height）。改用 `flex: 1`，配合父容器 `display: flex`，编辑器才能
+ *    真正填满，避免「有内容的上半部分」与「空白下半部分」背景割裂。
  */
 const gutterBackgroundOverride: Extension = EditorView.theme({
   '&': {
-    height: '100%',
+    flex: '1 1 0',
+    minHeight: '0',
   },
   '.cm-gutters': {
     backgroundColor: 'transparent !important',
diff --git a/src/components/code_runner/runner.rs b/src/components/code_runner/runner.rs
index 363e40c..b6f05cd 100644
--- a/src/components/code_runner/runner.rs
+++ b/src/components/code_runner/runner.rs
@@ -245,7 +245,7 @@ pub fn CodeRunner(
             div {
                 id: "{container_id}",
                 class: "code-runner-editor font-mono text-sm",
-                style: "min-height: 160px",
+                style: "min-height: 160px; display: flex; flex-direction: column",
             }
             // 输出区
             if !output().is_empty() {
diff --git a/src/pages/admin/system.rs b/src/pages/admin/system.rs
index 5a2d985..b2ee277 100644
--- a/src/pages/admin/system.rs
+++ b/src/pages/admin/system.rs
@@ -910,10 +910,11 @@ fn SqlConsoleTab() -> Element {
                     }
                     span { class: "text-xs text-[var(--color-paper-tertiary)] font-mono", "⌘↵ 执行" }
                 }
-                // CodeMirror 容器
+                // CodeMirror 容器：用 flex 让 .cm-editor(flex:1) 填满整个高度，
+                // 避免编辑器塌缩到内容高度、底部透出容器背景造成上下色差。
                 div {
                     id: "sql-editor",
-                    style: "min-height: 280px",
+                    style: "min-height: 280px; display: flex; flex-direction: column",
                 }
             }