From 227a04e6fa1663dbf43d7e7acaccf6d6eee2ada6 Mon Sep 17 00:00:00 2001
From: lhx-666-cool <d3032471065@yeah.net>
Date: Thu, 5 Mar 2026 15:43:27 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=BA=86=E6=94=B9=E5=8F=98?=
 =?UTF-8?q?=E8=BE=93=E5=85=A5=E6=A1=86=E5=A4=A7=E5=B0=8F=E6=97=B6=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E9=AB=98=E4=BA=AE=E7=9A=84=E9=97=AE=E9=A2=98=EF=BC=8C?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=BA=86=E4=BB=A3=E7=A0=81=E6=8F=90=E7=A4=BA?=
 =?UTF-8?q?=E4=B8=8E=E4=BB=A3=E7=A0=81=E5=AD=97=E5=8F=B7=E4=B8=8D=E4=B8=80?=
 =?UTF-8?q?=E8=87=B4=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/pages/CodePage.vue | 40 ++++++++++++++++++++++++++++++++------
 1 file changed, 34 insertions(+), 6 deletions(-)

diff --git a/web/src/pages/CodePage.vue b/web/src/pages/CodePage.vue
index f491c92..ccfe3c3 100644
--- a/web/src/pages/CodePage.vue
+++ b/web/src/pages/CodePage.vue
@@ -160,6 +160,7 @@ const IO_SPLIT_KEY = 'code_io_split_ratio'
 const FONT_SCALE_KEY = 'code_font_scale'
 
 const editorThemeCompartment = new Compartment()
+const editorHighlightCompartment = new Compartment()
 
 const serverUri = window.CONFIG.LSP_SERVER !== '__LSP_SERVER_URL_PLACEHOLDER__' ? window.CONFIG.LSP_SERVER : import.meta.env.VITE_LSP_SERVER;
 const backend = window.CONFIG.BACKEND !== '__BACKEND_URL_PLACEHOLDER__' ? window.CONFIG.BACKEND : import.meta.env.VITE_BACKEND;
@@ -204,17 +205,36 @@ function clampFontScale(value: number) {
 
 function createEditorTheme(scale: number) {
   const fontPx = Math.max(12, Math.round((16 * scale) / 100))
+  const fontSize = `${fontPx}px`
+  const fontFamily = '"JetBrains Mono", "Fira Code", "Cascadia Code", "Consolas", monospace'
   return EditorView.theme({
     "&": { height: "100%" },
     ".cm-scroller": { overflow: "auto" },
     ".cm-content, .cm-gutters": {
-      fontSize: `${fontPx}px`,
+      fontSize,
       lineHeight: '1.6',
-      fontFamily: '"JetBrains Mono", "Fira Code", "Cascadia Code", "Consolas", monospace'
+      fontFamily
+    },
+    ".cm-tooltip": {
+      fontSize,
+      fontFamily,
+      lineHeight: '1.6'
+    },
+    ".cm-tooltip .cm-completionLabel, .cm-tooltip .cm-completionDetail, .cm-tooltip .cm-completionInfo": {
+      fontSize,
+      fontFamily
     }
   })
 }
 
+function createHighlightExtensions() {
+  return [
+    syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+    syntaxHighlighting(oneDarkHighlightStyle),
+    oneDark,
+  ]
+}
+
 function requestEditorMeasure() {
   if (!editorView.value) {
     return
@@ -231,6 +251,15 @@ function applyEditorTheme(scale: number = fontScale.value) {
   })
 }
 
+function refreshHighlighting() {
+  if (!editorView.value) {
+    return
+  }
+  editorView.value.dispatch({
+    effects: editorHighlightCompartment.reconfigure(createHighlightExtensions())
+  })
+}
+
 function setPanelPosition(position: PanelPosition) {
   if (panelPosition.value === position) {
     return
@@ -355,6 +384,7 @@ function startResize(event: PointerEvent) {
     document.body.style.removeProperty('cursor')
     isResizing.value = false
     requestEditorMeasure()
+    refreshHighlighting()
   }
 }
 
@@ -399,6 +429,7 @@ function startIoResize(event: PointerEvent) {
     document.body.classList.remove('is-resizing-panel')
     document.body.style.removeProperty('cursor')
     isIoResizing.value = false
+    refreshHighlighting()
   }
 }
 
@@ -426,7 +457,6 @@ watch(panelPosition, (position) => {
 
 watch(panelSize, (size) => {
   localStorage.setItem(PANEL_SIZE_KEY, String(size))
-  requestEditorMeasure()
 })
 
 watch(ioSplit, (size) => {
@@ -473,6 +503,7 @@ onMounted(() => {
       ls,
       indentUnit.of("    "),
       editorThemeCompartment.of(createEditorTheme(fontScale.value)),
+      editorHighlightCompartment.of(createHighlightExtensions()),
       EditorView.updateListener.of((update) => {
         if (update.docChanged && update.selectionSet) {
           const cursorParams = update.state.selection.main.head;
@@ -488,9 +519,6 @@ onMounted(() => {
         // 如果需要在行中插入真实 Tab：
         { key: "Mod-Tab", run: insertTab },
       ]),
-      syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
-      syntaxHighlighting(oneDarkHighlightStyle),
-      oneDark,
     ]
   })
   editorView.value = new EditorView({