xfy/yggdrasil
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(codemirror): 行号区背景与代码区割裂（core base theme 覆盖 catppuccin）

Browse Source 
现象：行号列(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 同理。
This commit is contained in:
xfy 2026-07-05 23:58:18 +08:00
parent e1b312e651
commit 64907401a0
2 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
libs/codemirror-editor/src/themes.ts
View File

@ -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];
}

7
src/pages/admin/system.rs
View File

@ -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" }