From 6d87afa2b1fcc4923a75abd651818eeecd6ff3d8 Mon Sep 17 00:00:00 2001
From: kang <wankang2050@gmail.com>
Date: Wed, 13 May 2026 14:10:48 +0800
Subject: [PATCH] auto-save 2026-05-13 14:10 (~2)

---
 .memory/worklog.json              | 13 +++++++
 web/components/storyboard-bar.tsx | 65 +++++++++++++------------------
 2 files changed, 41 insertions(+), 37 deletions(-)

diff --git a/.memory/worklog.json b/.memory/worklog.json
index 7f0490b..658a1bd 100644
--- a/.memory/worklog.json
+++ b/.memory/worklog.json
@@ -1629,6 +1629,19 @@
       "message": "auto-save 2026-05-13 13:59 (~2)",
       "hash": "c026ab5",
       "files_changed": 2
+    },
+    {
+      "ts": "2026-05-13T14:05:14+08:00",
+      "type": "commit",
+      "message": "auto-save 2026-05-13 14:05 (~2)",
+      "hash": "43b96b8",
+      "files_changed": 2
+    },
+    {
+      "ts": "2026-05-13T06:07:39Z",
+      "type": "session-heartbeat",
+      "message": "Claude 会话活跃 · 最近命令：claude · 1 项未提交变更 · 最近提交：auto-save 2026-05-13 14:05 (~2)",
+      "files_changed": 1
     }
   ]
 }
diff --git a/web/components/storyboard-bar.tsx b/web/components/storyboard-bar.tsx
index 6fd0e23..eee3ae2 100644
--- a/web/components/storyboard-bar.tsx
+++ b/web/components/storyboard-bar.tsx
@@ -110,44 +110,35 @@ export function StoryboardBar({ job, selectedFrames, onOpenStoryboard }: Props)
         )
       )}
 
-      {/* Hover 大图预览 · portal 到 body 避免父容器 overflow clip · 跟关键帧节点 hover 同尺寸 */}
-      {mounted && hover && (() => {
-        // 预览宽度按视口动态算，最大 720（跟 KEYFRAME hover 一致）
-        const previewMaxWidth = Math.min(720, window.innerWidth * 0.8)
-        const halfW = previewMaxWidth / 2
-        const centerX = hover.rect.left + hover.rect.width / 2
-        const clampedLeft = Math.max(12, Math.min(window.innerWidth - previewMaxWidth - 12, centerX - halfW))
-        return createPortal(
-          <div
-            className="fixed z-[120] pointer-events-none"
-            style={{
-              top: hover.rect.bottom + 8,
-              left: clampedLeft,
-              animation: "drawer-in 0.18s cubic-bezier(0.32, 0.72, 0, 1)",
-            }}
-          >
-            <div className="rounded-2xl overflow-hidden border border-white/25 bg-black" style={{ boxShadow: "0 40px 100px -20px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.06)" }}>
-              <img
-                src={effectiveFrameUrl(job.id, hover.frame)}
-                alt={`preview ${hover.frame.index}`}
-                className="block"
-                style={{
-                  width: 720,
-                  maxWidth: "min(720px, 80vw)",
-                  height: "auto",
-                  maxHeight: "82vh",
-                  objectFit: "contain",
-                }}
-              />
-              <div className="flex items-center justify-between px-3 py-2 bg-black/70 backdrop-blur-md">
-                <span className="text-white text-[12.5px] font-medium">分镜 {hover.seq} · {hover.frame.timestamp.toFixed(2)}s</span>
-                <span className="text-white/60 text-[11px] font-mono">点击进入精细调整</span>
-              </div>
+      {/* Hover 大图预览 · 视口居中大尺寸（绕开竖屏图被高度压窄的问题） */}
+      {mounted && hover && createPortal(
+        <div
+          className="fixed inset-0 z-[120] pointer-events-none flex items-center justify-center p-6"
+          style={{ animation: "drawer-in 0.18s cubic-bezier(0.32, 0.72, 0, 1)" }}
+        >
+          {/* 背景轻微暗化让大图更突出 */}
+          <div className="absolute inset-0 bg-black/40 backdrop-blur-sm" />
+          <div className="relative rounded-2xl overflow-hidden border border-violet-300/40 bg-black" style={{ boxShadow: "0 50px 120px -10px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.06)" }}>
+            <img
+              src={effectiveFrameUrl(job.id, hover.frame)}
+              alt={`preview ${hover.frame.index}`}
+              className="block"
+              style={{
+                maxHeight: "85vh",
+                maxWidth: "70vw",
+                width: "auto",
+                height: "auto",
+                objectFit: "contain",
+              }}
+            />
+            <div className="flex items-center justify-between px-4 py-2.5 bg-black/80 backdrop-blur-md">
+              <span className="text-white text-[13px] font-medium">分镜 {hover.seq} · {hover.frame.timestamp.toFixed(2)}s</span>
+              <span className="text-white/60 text-[11.5px] font-mono">点击进入精细调整</span>
             </div>
-          </div>,
-          document.body,
-        )
-      })()}
+          </div>
+        </div>,
+        document.body,
+      )}
     </div>
   )
 }