auto-save 2026-05-13 14:05 (~2)

.memory/worklog.json

@@ -1622,6 +1622,13 @@
       "type": "session-heartbeat",
       "message": "Claude 会话活跃 · 最近命令：claude · 2 项未提交变更 · 最近提交：auto-save 2026-05-13 13:53 (+1, ~4)",
       "files_changed": 2
+    },
+    {
+      "ts": "2026-05-13T13:59:41+08:00",
+      "type": "commit",
+      "message": "auto-save 2026-05-13 13:59 (~2)",
+      "hash": "c026ab5",
+      "files_changed": 2
     }
   ]
 }

web/components/storyboard-bar.tsx

@@ -110,37 +110,44 @@ export function StoryboardBar({ job, selectedFrames, onOpenStoryboard }: Props)
         )
       )}
 
-      {/* Hover 大图预览 · portal 到 body 避免父容器 overflow clip */}
+      {/* Hover 大图预览 · portal 到 body 避免父容器 overflow clip · 跟关键帧节点 hover 同尺寸 */}
-      {mounted && hover && createPortal(
+      {mounted && hover && (() => {
-        <div
+        // 预览宽度按视口动态算，最大 720（跟 KEYFRAME hover 一致）
-          className="fixed z-[120] pointer-events-none"
+        const previewMaxWidth = Math.min(720, window.innerWidth * 0.8)
-          style={{
+        const halfW = previewMaxWidth / 2
-            top: hover.rect.bottom + 8,
+        const centerX = hover.rect.left + hover.rect.width / 2
-            left: Math.max(12, Math.min(window.innerWidth - 380, hover.rect.left + hover.rect.width / 2 - 180)),
+        const clampedLeft = Math.max(12, Math.min(window.innerWidth - previewMaxWidth - 12, centerX - halfW))
-            animation: "drawer-in 0.18s cubic-bezier(0.32, 0.72, 0, 1)",
+        return createPortal(
-          }}
+          <div
-        >
+            className="fixed z-[120] pointer-events-none"
-          <div className="rounded-2xl overflow-hidden border border-white/25 bg-black" style={{ boxShadow: "0 30px 80px -10px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.06)" }}>
+            style={{
-            <img
+              top: hover.rect.bottom + 8,
-              src={effectiveFrameUrl(job.id, hover.frame)}
+              left: clampedLeft,
-              alt={`preview ${hover.frame.index}`}
+              animation: "drawer-in 0.18s cubic-bezier(0.32, 0.72, 0, 1)",
-              className="block"
+            }}
-              style={{
+          >
-                width: 360,
+            <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)" }}>
-                maxWidth: "min(560px, 70vw)",
+              <img
-                height: "auto",
+                src={effectiveFrameUrl(job.id, hover.frame)}
-                maxHeight: "70vh",
+                alt={`preview ${hover.frame.index}`}
-                objectFit: "contain",
+                className="block"
-              }}
+                style={{
-            />
+                  width: 720,
-            <div className="flex items-center justify-between px-3 py-2 bg-black/70 backdrop-blur-md">
+                  maxWidth: "min(720px, 80vw)",
-              <span className="text-white text-[12.5px] font-medium">分镜 {hover.seq} · {hover.frame.timestamp.toFixed(2)}s</span>
+                  height: "auto",
-              <span className="text-white/60 text-[11px] font-mono">点击进入精细调整</span>
+                  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>
             </div>
-          </div>
+          </div>,
-        </div>,
+          document.body,
-        document.body,
+        )
-      )}
+      })()}
     </div>
   )
 }