From e1b312e6512bbced148f71b824bb8ce1e9a01e03 Mon Sep 17 00:00:00 2001 From: xfy Date: Sun, 5 Jul 2026 23:10:56 +0800 Subject: [PATCH] =?UTF-8?q?fix(admin):=20SQL=20=E7=BC=96=E8=BE=91=E5=99=A8?= =?UTF-8?q?=20gutter=20=E4=B8=8E=20content=20=E8=83=8C=E6=99=AF=E5=89=B2?= =?UTF-8?q?=E8=A3=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 现象：行号区和代码输入区背景色看起来不一致，有割裂感。 根因：三层背景色各不相同——容器用 paper-entry(mantle #e6e9ef)、 标题栏用 paper-theme(base #eff1f5)、CodeMirror 自带 base 背景。 容器与编辑器同处 base/mantle 之间，层次扁平，CodeMirror 的 base 浮不出层次，gutter 与 content 的细微差异被放大。 修复：建立 crust > mantle > base 三层明确递进—— - 容器改 paper-code-block(crust #dce0e8，最深) - 标题栏改 paper-entry(mantle，中) - CodeMirror 保持自带 base(最浅) 编辑器作为「浅色岛」浮在深色容器上（VS Code / Sublime 的 IDE 经典范式），gutter 与 content 同为 base 完全融合，割裂消失。 --- src/pages/admin/system.rs | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/pages/admin/system.rs b/src/pages/admin/system.rs index 5815452..2606858 100644 --- a/src/pages/admin/system.rs +++ b/src/pages/admin/system.rs @@ -898,10 +898,13 @@ fn SqlConsoleTab() -> Element { rsx! { div { class: "space-y-5", - // 编辑器卡片：标题栏 + CodeMirror 一体化 - div { class: "rounded-2xl overflow-hidden border border-[var(--color-paper-border)] bg-[var(--color-paper-entry)]", + // 编辑器卡片：标题栏 + CodeMirror 一体化。 + // 容器用 code-block(crust) 比标题栏 entry(mantle) 深一档，CodeMirror 自带 + // base 背景则更浅——三层形成 crust > mantle > base 的层级，让编辑器作为 + // 「浅色岛」浮在深色容器上（IDE 经典范式），消除 gutter/content 割裂。 + div { class: "rounded-2xl overflow-hidden border border-[var(--color-paper-border)] bg-[var(--color-paper-code-block)]", // 标题栏 - div { class: "flex justify-between items-center px-4 py-2.5 border-b border-[var(--color-paper-border)] bg-[var(--color-paper-theme)]", + div { class: "flex justify-between items-center px-4 py-2.5 border-b border-[var(--color-paper-border)] bg-[var(--color-paper-entry)]", div { class: "flex items-center gap-2", span { class: "w-2 h-2 rounded-full bg-[var(--color-paper-accent)]" } span { class: "font-mono text-sm font-semibold text-[var(--color-paper-primary)]", "SQL" }