From 64907401a01ded569e156b9102fb466548479c31 Mon Sep 17 00:00:00 2001 From: xfy Date: Sun, 5 Jul 2026 23:58:18 +0800 Subject: [PATCH] =?UTF-8?q?fix(codemirror):=20=E8=A1=8C=E5=8F=B7=E5=8C=BA?= =?UTF-8?q?=E8=83=8C=E6=99=AF=E4=B8=8E=E4=BB=A3=E7=A0=81=E5=8C=BA=E5=89=B2?= =?UTF-8?q?=E8=A3=82=EF=BC=88core=20base=20theme=20=E8=A6=86=E7=9B=96=20ca?= =?UTF-8?q?tppuccin=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 现象：行号列(gutter)背景是 #f5f5f5 浅灰，代码区(content)是 catppuccin base #eff1f5 浅蓝灰，两者不一致，有明显割裂。 误诊修正：上一提交（e1b312e）以为是容器背景与 CodeMirror 层次扁平， 改了容器为 code-block(crust)。但 CodeMirror 内部 .cm-editor 和 .cm-gutters 都有不透明背景，容器色根本透不出来——所以「没效果」。 本次回退该容器改动。 真因：CodeMirror core 的内置 base theme（@codemirror/view dist index.js:6916） 给 `&light .cm-gutters` 设了 backgroundColor: "#f5f5f5" / dark "#333338"， 特异性为 .cm-editor.cm-light .cm-gutters，高于 @catppuccin/codemirror 的 .cm-gutters 覆盖，catppuccin 的 base 背景被 core 默认灰压制。 修复：themes.ts 在 catppuccin extension 之后追加一个 EditorView.theme， 用 backgroundColor: transparent !important 强制 .cm-gutters 透明， 继承 .cm-editor 的 base 色，行号区与代码区完全融合。light/dark 同理。 --- libs/codemirror-editor/src/themes.ts | 21 ++++++++++++++++++++- src/pages/admin/system.rs | 7 ++----- 2 files changed, 22 insertions(+), 6 deletions(-) diff --git a/libs/codemirror-editor/src/themes.ts b/libs/codemirror-editor/src/themes.ts index 5632f99..398ca70 100644 --- a/libs/codemirror-editor/src/themes.ts +++ b/libs/codemirror-editor/src/themes.ts @@ -1,11 +1,30 @@ // @catppuccin/codemirror 提供现成的 Catppuccin 主题 Extension， // 与项目 themes/ 下的 Catppuccin Latte/Mocha .tmTheme 视觉一致。 import { catppuccinLatte, catppuccinMocha } from '@catppuccin/codemirror'; +import { EditorView } from '@codemirror/view'; import type { Extension } from '@codemirror/state'; export type ThemeName = 'light' | 'dark'; +/** + * 覆盖 CodeMirror core 内置 base theme 给 `.cm-gutters` 设的默认背景。 + * + * CodeMirror core 的 base theme 用 `&light .cm-gutters` / `&dark .cm-gutters` + * （特异性 `.cm-editor.cm-light .cm-gutters`）注入了一个浅灰/深灰背景 + * （light `#f5f5f5`、dark `#333338`），优先级高于 catppuccin 的 `.cm-gutters` + * 覆盖，导致行号列与编辑器 content（catppuccin base 色）背景不一致，产生割裂。 + * + * 这里用 `!important` 强制 gutter 背景透明，使其继承 `.cm-editor` 的 base 色， + * 行号区与代码区融为一体。 + */ +const gutterBackgroundOverride: Extension = EditorView.theme({ + '.cm-gutters': { + backgroundColor: 'transparent !important', + }, +}); + /** 根据主题名返回对应的 CodeMirror 主题 Extension。 */ export function themeExtension(name: ThemeName): Extension { - return name === 'light' ? catppuccinLatte : catppuccinMocha; + const catppuccin = name === 'light' ? catppuccinLatte : catppuccinMocha; + return [catppuccin, gutterBackgroundOverride]; } diff --git a/src/pages/admin/system.rs b/src/pages/admin/system.rs index 2606858..8712428 100644 --- a/src/pages/admin/system.rs +++ b/src/pages/admin/system.rs @@ -899,12 +899,9 @@ fn SqlConsoleTab() -> Element { rsx! { div { class: "space-y-5", // 编辑器卡片：标题栏 + 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: "rounded-2xl overflow-hidden border border-[var(--color-paper-border)] bg-[var(--color-paper-entry)]", // 标题栏 - 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 justify-between items-center px-4 py-2.5 border-b border-[var(--color-paper-border)] bg-[var(--color-paper-theme)]", 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" }