From 3c10f72444b2485df8570e3a86123fad83bbe84a Mon Sep 17 00:00:00 2001 From: xfy Date: Mon, 6 Jul 2026 00:06:00 +0800 Subject: [PATCH] =?UTF-8?q?fix(codemirror):=20=E7=BC=96=E8=BE=91=E5=99=A8?= =?UTF-8?q?=E6=9C=AA=E6=92=91=E6=BB=A1=E5=AE=B9=E5=99=A8=E5=AF=BC=E8=87=B4?= =?UTF-8?q?=E4=B8=8A=E4=B8=8B=E8=83=8C=E6=99=AF=E5=89=B2=E8=A3=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 现象：编辑器「有行号的上半部分」与「空白下半部分」背景色不一致。 根因：CodeMirror core 的 base theme 给 `.cm-editor`（&）只设了 position: relative + display: flex，没有 height。编辑器默认只占 内容高度（几行 ≈ 60px），不填满父容器。容器 div 设了 min-height: 280px，但 .cm-editor 不会自动撑到 280px——剩余空间透出容器的 paper-entry(mantle #e6e9ef) 背景，与 .cm-editor 的 base(#eff1f5) 形成「上半 base / 下半 mantle」的上下色差。 修复：themes.ts 的覆盖里加 `& { height: 100% }`，让 .cm-editor 撑满父容器。配合容器已有的 min-height: 280px，编辑器完整填充， 背景统一为 base 色，上下割裂消失。 --- libs/codemirror-editor/src/themes.ts | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/libs/codemirror-editor/src/themes.ts b/libs/codemirror-editor/src/themes.ts index 398ca70..ffe6d06 100644 --- a/libs/codemirror-editor/src/themes.ts +++ b/libs/codemirror-editor/src/themes.ts @@ -7,17 +7,20 @@ import type { Extension } from '@codemirror/state'; export type ThemeName = 'light' | 'dark'; /** - * 覆盖 CodeMirror core 内置 base theme 给 `.cm-gutters` 设的默认背景。 + * 覆盖 CodeMirror core 内置 base theme 的两处问题： * - * 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 色）背景不一致，产生割裂。 + * 1. `.cm-gutters` 默认背景：core 的 `&light .cm-gutters`（`#f5f5f5`）/ `&dark` + * （`#333338`）特异性高于 catppuccin 的 `.cm-gutters`，catppuccin 的 base 背景被 + * 压制，行号列与代码区背景不一致。用 `!important` 强制透明，继承 editor base 色。 * - * 这里用 `!important` 强制 gutter 背景透明，使其继承 `.cm-editor` 的 base 色， - * 行号区与代码区融为一体。 + * 2. `.cm-editor` 默认不撑满父容器：core 的 `&` 没设 height，编辑器只占内容高度， + * 容器剩余空间透出父元素背景，造成「有行号的上半部分」与「空白下半部分」色差。 + * 用 `& { height: 100% }` 让编辑器填满容器。 */ const gutterBackgroundOverride: Extension = EditorView.theme({ + '&': { + height: '100%', + }, '.cm-gutters': { backgroundColor: 'transparent !important', },