From 11ccda271d3376b43b9d04f423cf4bf5a942a178 Mon Sep 17 00:00:00 2001
From: claude_dev <claude-dev@sanguo.local>
Date: Sun, 16 Aug 2026 00:08:09 +0800
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E7=89=88=E6=9C=AC=E5=AF=B9?=
 =?UTF-8?q?=E6=AF=94=E5=B7=A6=E6=A0=8F=E4=B8=8D=E6=98=BE=E7=A4=BA=E2=80=94?=
 =?UTF-8?q?=E2=80=94=E6=A0=B9=E5=9B=A0monaco=200.56=20createDiffEditor?=
 =?UTF-8?q?=E5=9C=A8=E6=8A=BD=E5=B1=89=E5=B5=8C=E5=A5=97=E5=AE=B9=E5=99=A8?=
 =?UTF-8?q?=E9=87=8C=E5=88=86=E6=A0=8F=E6=B5=8B=E9=87=8F=E9=94=99=E8=AF=AF?=
 =?UTF-8?q?(original=E6=A0=8F=E6=81=92=E8=A2=AB=E5=8E=8B36px;=E6=97=B6?=
 =?UTF-8?q?=E5=BA=8F=E5=BB=B6=E8=BF=9F=E6=8C=82=E8=BD=BD/layout=E5=BC=BA?=
 =?UTF-8?q?=E5=88=B6=E9=87=8D=E7=AE=97/=E7=A6=81=E6=8B=96=E6=8B=BD?=
 =?UTF-8?q?=E5=88=86=E6=A0=8F/=E5=86=85=E8=81=94=E6=A8=A1=E5=BC=8F?=
 =?UTF-8?q?=E5=9B=9B=E6=8B=9B=E5=85=A8=E8=AF=95=E5=9D=87=E6=97=A0=E6=95=88?=
 =?UTF-8?q?,=E5=AE=9E=E6=B5=8Bpanes=2036/748);=E6=8D=A2=E5=8F=8C=E5=8F=AA?=
 =?UTF-8?q?=E8=AF=BB=E7=BC=96=E8=BE=91=E5=99=A8=E5=B9=B6=E6=8E=92=E5=90=84?=
 =?UTF-8?q?50%(=E5=BF=AB=E7=85=A7|=E5=BD=93=E5=89=8D,=E5=B8=A6=E6=A0=8F?=
 =?UTF-8?q?=E5=A4=B4=E6=A0=87=E7=AD=BE+=E6=BB=9A=E5=8A=A8=E8=81=94?=
 =?UTF-8?q?=E5=8A=A8),=E5=A4=8D=E7=94=A8=E4=B8=BB=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=99=A8=E5=90=8C=E6=AC=BE=E4=B8=BB=E9=A2=98;showDiff=E5=BB=B6?=
 =?UTF-8?q?=E8=BF=9F360ms=E7=AD=89=E6=8A=BD=E5=B1=89=E5=8A=A8=E7=94=BB?=
 =?UTF-8?q?=E5=90=8E=E6=8C=82=E8=BD=BD(=E5=AE=B9=E5=99=A8=E5=85=A8?=
 =?UTF-8?q?=E5=AE=BD=E5=88=9B=E5=BB=BA);dev=E5=AE=9E=E6=B5=8Bpanes=20408/4?=
 =?UTF-8?q?07=E5=B7=A6=E5=8F=B3=E5=86=85=E5=AE=B9=E6=AD=A3=E7=A1=AE=20[nas?=
 =?UTF-8?q?]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/MonacoDiff.vue | 89 +++++++++++++++++---------
 frontend/src/views/strategy/Code.vue   | 10 ++-
 2 files changed, 65 insertions(+), 34 deletions(-)

diff --git a/frontend/src/components/MonacoDiff.vue b/frontend/src/components/MonacoDiff.vue
index 89a0b41..e6166e8 100644
--- a/frontend/src/components/MonacoDiff.vue
+++ b/frontend/src/components/MonacoDiff.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-// 版本 diff 视图（§12.6 代码快照查看）：左=历史版本 右=当前代码。
-// 主题与 MonacoEditor.vue 同名同值（define 幂等，两处挂载互不干扰）。
+// 版本对比视图（§12.6 代码快照查看）：左=历史快照 右=当前代码，各 50% 只读。
+// 不用 monaco createDiffEditor：0.56 在抽屉等嵌套容器里分栏测量错误
+// （original 栏被压 ~36px，layout/固定分栏/内联模式均救不回），双只读编辑器最稳。
 import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
 import * as monaco from 'monaco-editor'
 
@@ -17,11 +18,23 @@ const props = withDefaults(defineProps<{
   language?: string
 }>(), { language: 'python' })
 
-const el = ref<HTMLDivElement>()
-let editor: monaco.editor.IStandaloneDiffEditor | null = null
+const leftEl = ref<HTMLDivElement>()
+const rightEl = ref<HTMLDivElement>()
+let left: monaco.editor.IStandaloneCodeEditor | null = null
+let right: monaco.editor.IStandaloneCodeEditor | null = null
+
+const OPTIONS: monaco.editor.IStandaloneEditorConstructionOptions = {
+  theme: 'sanguo-dark',
+  readOnly: true,
+  fontSize: 12,
+  minimap: { enabled: false },
+  scrollBeyondLastLine: false,
+  automaticLayout: true,
+  lineNumbersMinChars: 4,
+  scrollbar: { alwaysConsumeMouseWheel: false },
+}
 
 onMounted(() => {
-  if (!el.value) return
   monaco.editor.defineTheme('sanguo-dark', {
     base: 'vs-dark',
     inherit: true,
@@ -40,45 +53,57 @@ onMounted(() => {
       'editorLineNumber.foreground': '#3a4654',
       'editorLineNumber.activeForeground': '#00e5ff',
       'editor.lineHighlightBackground': '#0a1018',
-      'diffEditor.insertedTextBackground': '#12291c',
-      'diffEditor.removedTextBackground': '#2a1418',
     },
   })
-  editor = monaco.editor.createDiffEditor(el.value, {
-    theme: 'sanguo-dark',
-    readOnly: true,
-    renderSideBySide: true,
-    fontSize: 12,
-    minimap: { enabled: false },
-    scrollBeyondLastLine: false,
-    automaticLayout: true,
+  if (leftEl.value) left = monaco.editor.create(leftEl.value, { ...OPTIONS, value: props.original, language: props.language })
+  if (rightEl.value) right = monaco.editor.create(rightEl.value, { ...OPTIONS, value: props.modified, language: props.language })
+  // 左右滚动联动：任一侧滚动时同步另一侧
+  left?.onDidScrollChange(() => {
+    if (right && left) {
+      right.setScrollTop(left.getScrollTop())
+      right.setScrollLeft(left.getScrollLeft())
+    }
+  })
+  right?.onDidScrollChange(() => {
+    if (left && right) {
+      left.setScrollTop(right.getScrollTop())
+      left.setScrollLeft(right.getScrollLeft())
+    }
   })
-  setModels()
 })
 
-function setModels(): void {
-  if (!editor) return
-  editor.setModel({
-    original: monaco.editor.createModel(props.original, props.language),
-    modified: monaco.editor.createModel(props.modified, props.language),
-  })
-}
-
-watch(() => [props.original, props.modified], setModels)
+watch(() => props.original, (v) => left?.setValue(v))
+watch(() => props.modified, (v) => right?.setValue(v))
 
 onBeforeUnmount(() => {
-  const m = editor?.getModel()
-  m?.original?.dispose()
-  m?.modified?.dispose()
-  editor?.dispose()
-  editor = null
+  left?.dispose()
+  right?.dispose()
+  left = null
+  right = null
 })
 </script>
 
 <template>
-  <div ref="el" class="diff-editor"></div>
+  <div class="diff-wrap" data-relayout="v3">
+    <div class="pane">
+      <div class="pane-tag mono">快照版本</div>
+      <div ref="leftEl" class="pane-editor"></div>
+    </div>
+    <div class="pane">
+      <div class="pane-tag mono pane-cur">当前代码</div>
+      <div ref="rightEl" class="pane-editor"></div>
+    </div>
+  </div>
 </template>
 
 <style scoped>
-.diff-editor { height: 100%; min-height: 300px; }
+.diff-wrap { display: flex; height: 100%; min-height: 300px; gap: 0; background: #05080d; }
+.pane { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid #16202e; }
+.pane:last-child { border-right: none; }
+.pane-tag {
+  font-size: 10px; color: #64798a; padding: 3px 10px; letter-spacing: 1px;
+  border-bottom: 1px solid #16202e; background: #0a0f17;
+}
+.pane-cur { color: #00e5ff; }
+.pane-editor { flex: 1; min-height: 0; }
 </style>
diff --git a/frontend/src/views/strategy/Code.vue b/frontend/src/views/strategy/Code.vue
index 6ea466a..0d37365 100644
--- a/frontend/src/views/strategy/Code.vue
+++ b/frontend/src/views/strategy/Code.vue
@@ -139,6 +139,7 @@ function runBacktest(): void {
 const versions = ref<CodeVersion[]>([])
 const versionsOpen = ref(false)
 const diffCode = ref<string | null>(null)
+const diffReady = ref(false)
 const versionsLoading = ref(false)
 
 async function openVersions(): Promise<void> {
@@ -146,6 +147,7 @@ async function openVersions(): Promise<void> {
   versionsOpen.value = true
   versionsLoading.value = true
   diffCode.value = null
+  diffReady.value = false
   try {
     versions.value = await getCodeVersions(active.value.name)
   } catch {
@@ -157,8 +159,12 @@ async function openVersions(): Promise<void> {
 
 async function showDiff(h8: string): Promise<void> {
   if (!active.value) return
+  diffReady.value = false
   try {
     diffCode.value = await getCodeVersion(active.value.name, h8)
+    // 抽屉展开动画(~300ms)期间容器宽为 0,Monaco diff 在其中创建会把左右分栏算死
+    // (左栏被压扁且事后 layout() 救不回)。等动画结束容器全宽后再挂载组件。
+    setTimeout(() => { diffReady.value = true }, 360)
   } catch {
     ElMessage.error('读取版本失败')
   }
@@ -245,8 +251,8 @@ async function showDiff(h8: string): Promise<void> {
         <span class="muted mono" style="font-size:11px">{{ (v.size / 1024).toFixed(1) }} KB</span>
         <button class="term-btn sm" style="margin-left:auto" @click="showDiff(v.code_version)">对比当前</button>
       </div>
-      <div v-if="diffCode != null" class="ver-diff">
-        <div class="muted mono" style="font-size:11px;margin-bottom:6px">左=快照版本 · 右=当前代码</div>
+      <div v-if="diffCode != null && diffReady" class="ver-diff">
+        <div class="muted mono" style="font-size:11px;margin-bottom:6px">左右滚动联动 · 快照 vs 当前</div>
         <MonacoDiff :original="diffCode" :modified="code" />
       </div>
       </div>