From 8ee513a17d2ab8c849b2862167021eb55aa4bc3a Mon Sep 17 00:00:00 2001
From: claude_dev <claude-dev@sanguo.local>
Date: Sun, 16 Aug 2026 08:33:23 +0800
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E4=BB=A3=E7=A0=81=E5=AF=B9?=
 =?UTF-8?q?=E6=AF=94=E6=94=B9=E5=85=A8=E5=B1=8F=E6=A8=A1=E6=80=81=E2=80=94?=
 =?UTF-8?q?=E2=80=94=E7=94=A8=E6=88=B7=E5=8F=8D=E9=A6=88860px=E4=BE=A7?=
 =?UTF-8?q?=E6=8A=BD=E5=B1=89=E5=A4=AA=E5=B0=8F=E7=9C=8B=E4=B8=8D=E6=B8=85?=
 =?UTF-8?q?;=E7=89=88=E6=9C=AC=E5=8E=86=E5=8F=B2=E5=92=8C=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E5=BF=AB=E7=85=A7=E6=8A=BD=E5=B1=89(el-drawer)?=
 =?UTF-8?q?=E7=BB=9F=E4=B8=80=E6=94=B9el-dialog=20fullscreen:=E7=89=88?=
 =?UTF-8?q?=E6=9C=AC=E5=88=97=E8=A1=A8=E6=94=B9=E6=A8=AA=E5=90=91chip?=
 =?UTF-8?q?=E6=9D=A1(=E9=80=89=E4=B8=AD=E9=AB=98=E4=BA=AE)=E7=9C=81?=
 =?UTF-8?q?=E7=BA=B5=E5=90=91=E7=A9=BA=E9=97=B4,diff=E5=8C=BAflex=E6=92=91?=
 =?UTF-8?q?=E6=BB=A1calc(100vh-60px);Esc/=E5=85=B3=E9=97=AD=E5=8D=B3?=
 =?UTF-8?q?=E8=B5=B0;dev=E5=AE=9E=E6=B5=8Bdialog=E9=93=BA=E6=BB=A1?=
 =?UTF-8?q?=E8=A7=86=E5=8F=A32560x1177,diff=E5=B7=A6=E5=8F=B3=E5=90=841262?=
 =?UTF-8?q?x1036(=E5=8E=9F=E6=8A=BD=E5=B1=89=E5=86=85=E4=BB=85~400x460,?=
 =?UTF-8?q?=E9=9D=A2=E7=A7=AF=E6=89=A9=E5=A4=A7=E7=BA=A67=E5=80=8D);Monaco?=
 =?UTF-8?q?Diff=E5=BB=B6=E8=BF=9F=E6=8C=82=E8=BD=BD=E4=BF=9D=E7=95=99(?=
 =?UTF-8?q?=E6=A8=A1=E6=80=81=E5=8A=A8=E7=94=BB=E5=90=8E=E5=85=A8=E5=AE=BD?=
 =?UTF-8?q?=E5=88=9B=E5=BB=BA)=20[nas]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/strategy/Code.vue          | 78 +++++++++++--------
 .../src/views/strategy/CodeSnapshotDrawer.vue | 36 ++++-----
 2 files changed, 64 insertions(+), 50 deletions(-)

diff --git a/frontend/src/views/strategy/Code.vue b/frontend/src/views/strategy/Code.vue
index d947e0d..b5a5fd9 100644
--- a/frontend/src/views/strategy/Code.vue
+++ b/frontend/src/views/strategy/Code.vue
@@ -170,12 +170,14 @@ async function openVersions(): Promise<void> {
   }
 }
 
+const activeVersion = ref('')
 async function showDiff(h8: string): Promise<void> {
   if (!active.value) return
   diffReady.value = false
+  activeVersion.value = h8
   try {
     diffCode.value = await getCodeVersion(active.value.name, h8)
-    // 抽屉展开动画(~300ms)期间容器宽为 0,Monaco diff 在其中创建会把左右分栏算死
+    // 模态展开动画(~300ms)期间容器宽为 0,Monaco diff 在其中创建会把左右分栏算死
     // (左栏被压扁且事后 layout() 救不回)。等动画结束容器全宽后再挂载组件。
     setTimeout(() => { diffReady.value = true }, 360)
   } catch {
@@ -245,31 +247,39 @@ async function showDiff(h8: string): Promise<void> {
       </section>
     </div>
 
-    <!-- §12.6 版本历史：发起时快照列表 + 与当前代码 diff -->
-    <el-drawer :model-value="versionsOpen" size="860px" :with-header="false" append-to-body destroy-on-close @close="versionsOpen = false">
-      <div v-loading="versionsLoading" class="ver-drawer">
-      <div class="ver-head">
-        <div>
-          <div style="font-size:15px;font-weight:700;color:var(--text)">版本历史 · {{ activeName }}</div>
-          <div class="muted" style="font-size:11.5px;margin-top:2px">发起回测/模拟/实盘时的代码快照（内容寻址去重）；点「对比」查看与当前代码差异</div>
+    <!-- §12.6 版本历史：全屏模态（860px 抽屉太小看不清 diff，fullscreen 尽量吃满屏幕） -->
+    <el-dialog
+      :model-value="versionsOpen" fullscreen append-to-body destroy-on-close
+      class="ver-modal" :show-close="false" @close="versionsOpen = false"
+    >
+      <div v-loading="versionsLoading" class="ver-full">
+        <div class="ver-head">
+          <div>
+            <span style="font-size:15px;font-weight:700;color:var(--text)">版本历史 · {{ activeName }}</span>
+            <span class="muted" style="font-size:11.5px;margin-left:12px">发起回测/模拟/实盘时的代码快照 · 点版本卡片对比当前</span>
+          </div>
+          <button class="term-btn sm" @click="versionsOpen = false">关闭 (Esc)</button>
         </div>
-        <button class="term-btn sm" @click="versionsOpen = false">关闭</button>
+        <div v-if="!versions.length && !versionsLoading" class="muted" style="padding:40px 0;text-align:center;font-size:13px">
+          还没有快照——从策略档案发起过回测/模拟/实盘后自动生成
+        </div>
+        <div v-else class="ver-chips">
+          <button
+            v-for="v in versions" :key="v.code_version"
+            class="ver-chip" :class="{ on: diffCode != null && activeVersion === v.code_version }"
+            @click="showDiff(v.code_version)"
+          >
+            <span class="mono" style="color:var(--brand)">v{{ v.code_version }}</span>
+            <span class="muted mono" style="font-size:10.5px">{{ v.saved_at }}</span>
+            <span class="muted mono" style="font-size:10px">{{ (v.size / 1024).toFixed(1) }} KB</span>
+          </button>
+        </div>
+        <div v-if="diffCode != null && diffReady" class="ver-diff-full">
+          <MonacoDiff :original="diffCode" :modified="code" />
+        </div>
+        <div v-else-if="diffCode == null" class="ver-empty muted">选择上方版本开始对比 · 左=快照 右=当前 滚动联动</div>
       </div>
-      <div v-if="!versions.length && !versionsLoading" class="muted" style="padding:20px 0;text-align:center;font-size:12.5px">
-        还没有快照——从策略档案发起过回测/模拟/实盘后自动生成
-      </div>
-      <div v-for="v in versions" :key="v.code_version" class="ver-row">
-        <span class="mono" style="color:var(--brand)">v{{ v.code_version }}</span>
-        <span class="muted mono" style="font-size:11px">{{ v.saved_at }}</span>
-        <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 && diffReady" class="ver-diff">
-        <div class="muted mono" style="font-size:11px;margin-bottom:6px">左右滚动联动 · 快照 vs 当前</div>
-        <MonacoDiff :original="diffCode" :modified="code" />
-      </div>
-      </div>
-    </el-drawer>
+    </el-dialog>
   </div>
 </template>
 
@@ -402,13 +412,17 @@ async function showDiff(h8: string): Promise<void> {
   background: #05080d;
 }
 
-/* 版本历史抽屉 */
-.ver-drawer { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; }
-.ver-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
-.ver-row {
-  display: flex; align-items: center; gap: 12px; padding: 8px 10px;
-  border: 1px solid var(--border-2); border-radius: var(--r-sm);
+/* 版本历史：全屏模态 */
+.ver-full { display: flex; flex-direction: column; gap: 10px; height: calc(100vh - 60px); padding: 4px 2px; }
+.ver-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
+.ver-chips { display: flex; gap: 8px; flex-wrap: wrap; }
+.ver-chip {
+  display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px;
+  border: 1px solid var(--border-2); border-radius: var(--r-sm); background: transparent;
+  cursor: pointer; transition: border-color 0.12s var(--ease);
 }
-.ver-row:hover { background: var(--bg-hover); }
-.ver-diff { height: 460px; border: 1px solid var(--border-2); border-radius: var(--r-sm); overflow: hidden; }
+.ver-chip:hover { border-color: rgba(0, 229, 255, 0.5); }
+.ver-chip.on { border-color: var(--brand); background: rgba(0, 229, 255, 0.08); }
+.ver-diff-full { flex: 1; min-height: 0; border: 1px solid var(--border-2); border-radius: var(--r-sm); overflow: hidden; }
+.ver-empty { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 12.5px; }
 </style>
diff --git a/frontend/src/views/strategy/CodeSnapshotDrawer.vue b/frontend/src/views/strategy/CodeSnapshotDrawer.vue
index 1fc8919..9bb5103 100644
--- a/frontend/src/views/strategy/CodeSnapshotDrawer.vue
+++ b/frontend/src/views/strategy/CodeSnapshotDrawer.vue
@@ -43,30 +43,30 @@ onMounted(load)
 </script>
 
 <template>
-  <el-drawer :model-value="true" size="860px" :with-header="false" append-to-body destroy-on-close @close="emit('close')">
-    <div v-loading="loading" class="snap">
+  <el-dialog
+    :model-value="true" fullscreen append-to-body destroy-on-close
+    :show-close="false" @close="emit('close')"
+  >
+    <div v-loading="loading" class="snap-full">
       <div class="snap-head">
         <div>
-          <div style="font-size:15px;font-weight:700;color:var(--text)">代码快照 · {{ label }}</div>
-          <div class="mono muted" style="font-size:11px;margin-top:2px">
-            {{ codeFile || '…' }} · 发起版本 v{{ codeHash.slice(0, 8) }}
-          </div>
+          <span style="font-size:15px;font-weight:700;color:var(--text)">代码快照 · {{ label }}</span>
+          <span class="mono muted" style="font-size:11.5px;margin-left:12px">
+            {{ codeFile || '…' }} · 发起版本 v{{ codeHash.slice(0, 8) }} · 左=发起时快照 右=当前 滚动联动
+          </span>
         </div>
-        <button class="term-btn sm" @click="emit('close')">关闭</button>
+        <button class="term-btn sm" @click="emit('close')">关闭 (Esc)</button>
+      </div>
+      <div v-if="err" class="muted" style="flex:1;display:flex;align-items:center;justify-content:center;font-size:13px">{{ err }}</div>
+      <div v-else-if="diffReady && snapCode != null && curCode != null" class="snap-diff-full">
+        <MonacoDiff :original="snapCode" :modified="curCode" />
       </div>
-      <div v-if="err" class="muted" style="padding:24px 0;text-align:center;font-size:12.5px">{{ err }}</div>
-      <template v-else-if="diffReady && snapCode != null && curCode != null">
-        <div class="muted mono" style="font-size:11px;margin:6px 0">左=发起时快照 · 右=当前代码 · 滚动联动</div>
-        <div class="snap-diff">
-          <MonacoDiff :original="snapCode" :modified="curCode" />
-        </div>
-      </template>
     </div>
-  </el-drawer>
+  </el-dialog>
 </template>
 
 <style scoped>
-.snap { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; }
-.snap-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
-.snap-diff { height: 520px; border: 1px solid var(--border-2); border-radius: var(--r-sm); overflow: hidden; }
+.snap-full { display: flex; flex-direction: column; gap: 10px; height: calc(100vh - 60px); padding: 4px 2px; }
+.snap-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
+.snap-diff-full { flex: 1; min-height: 0; border: 1px solid var(--border-2); border-radius: var(--r-sm); overflow: hidden; }
 </style>