From ad895f92e2bb3cf398f66d3907c5bc41cc5d966c Mon Sep 17 00:00:00 2001
From: kang <wankang2050@gmail.com>
Date: Wed, 13 May 2026 15:28:21 +0800
Subject: [PATCH] auto-save 2026-05-13 15:28 (~4)

---
 .memory/worklog.json              | 13 ++++++++
 web/components/lightbox.tsx       |  4 +--
 web/components/nodes/index.tsx    | 53 ++++++++++++-------------------
 web/components/storyboard-bar.tsx | 21 +++++-------
 4 files changed, 44 insertions(+), 47 deletions(-)

diff --git a/.memory/worklog.json b/.memory/worklog.json
index 4935fff..bda3b95 100644
--- a/.memory/worklog.json
+++ b/.memory/worklog.json
@@ -1775,6 +1775,19 @@
       "type": "session-heartbeat",
       "message": "Claude 会话活跃 · 最近命令：claude · 1 项未提交变更 · 最近提交：auto-save 2026-05-13 15:17 (~6)",
       "files_changed": 1
+    },
+    {
+      "ts": "2026-05-13T15:22:51+08:00",
+      "type": "commit",
+      "message": "auto-save 2026-05-13 15:22 (~5)",
+      "hash": "de1254f",
+      "files_changed": 5
+    },
+    {
+      "ts": "2026-05-13T07:27:40Z",
+      "type": "session-heartbeat",
+      "message": "Claude 会话活跃 · 最近命令：claude · 4 项未提交变更 · 最近提交：auto-save 2026-05-13 15:22 (~5)",
+      "files_changed": 4
     }
   ]
 }
diff --git a/web/components/lightbox.tsx b/web/components/lightbox.tsx
index b195f92..2f8e856 100644
--- a/web/components/lightbox.tsx
+++ b/web/components/lightbox.tsx
@@ -714,14 +714,14 @@ export function FrameLightbox({ jobId, frames, activeIndex, selected, onClose, o
                                 <div className="absolute bottom-0 left-0 text-[8.5px] font-mono text-white bg-black/70 backdrop-blur px-1 rounded-tr">
                                   #{ci + 1}
                                 </div>
-                                {/* 上推按钮：左上角 */}
+                                {/* 上推按钮：常驻可见 */}
                                 <button
                                   onClick={(ev) => {
                                     ev.preventDefault(); ev.stopPropagation()
                                     const isLegacy = !(e.cutouts && e.cutouts.length > 0)
                                     handlePushCutout(e.id, cid, `${e.name_zh} #${ci + 1}`, isLegacy)
                                   }}
-                                  className="absolute left-0.5 top-0.5 h-4 w-4 rounded-sm bg-black/70 text-white/85 hover:bg-violet-500 hover:text-white inline-flex items-center justify-center opacity-0 group-hover/img:opacity-100 transition text-[11px] leading-none font-bold"
+                                  className="absolute left-0.5 top-0.5 h-4 w-4 rounded-sm bg-violet-500/90 text-white shadow hover:bg-violet-400 inline-flex items-center justify-center transition text-[11px] leading-none font-bold"
                                   title="⬆ 上推到分镜头编排"
                                 >
                                   ⬆
diff --git a/web/components/nodes/index.tsx b/web/components/nodes/index.tsx
index bad995f..ac9149c 100644
--- a/web/components/nodes/index.tsx
+++ b/web/components/nodes/index.tsx
@@ -409,7 +409,7 @@ export function KeyframeNode({ data, selected }: any) {
                   {f.timestamp.toFixed(1)}s
                 </div>
               </button>
-              {/* 上推按钮：hover 时浮出 — 推送关键帧本身到分镜头编排 */}
+              {/* 上推按钮：常驻可见 — 推送关键帧本身到分镜头编排 */}
               {d.onPushToStoryboard && (
                 <button
                   onClick={(e) => {
@@ -421,7 +421,7 @@ export function KeyframeNode({ data, selected }: any) {
                     })
                   }}
                   title="⬆ 上推到分镜头编排"
-                  className="absolute top-1 left-1 h-5 w-5 rounded-full bg-black/70 backdrop-blur text-white/85 hover:bg-violet-500 hover:text-white inline-flex items-center justify-center opacity-0 group-hover:opacity-100 transition z-[70] text-[12px] leading-none font-bold"
+                  className="absolute top-1 left-1 h-5 w-5 rounded-full bg-violet-500/90 backdrop-blur text-white shadow-md hover:bg-violet-400 hover:scale-110 inline-flex items-center justify-center transition z-[70] text-[12px] leading-none font-bold"
                 >
                   ⬆
                 </button>
@@ -479,38 +479,31 @@ export function KeyframeNode({ data, selected }: any) {
         )}
       </NodeShell>
 
-      {/* Portal hover 大预览 — 浮在缩略图上方（不挡其他界面） */}
+      {/* Portal hover 预览 — 固定视口右下角，不遮挡 */}
       {mounted && hover && jobId && (() => {
         const hf = frames.find((x) => x.index === hover.idx)
         if (!hf) return null
-        // 大图最大尺寸（按视频比例算）
         const vidAspect = d.job && d.job.height > 0 ? d.job.height / d.job.width : 16 / 9
-        const maxH = Math.min(window.innerHeight * 0.7, hover.rect.top - 16)
-        const maxW = Math.min(window.innerWidth * 0.6, 600)
-        let h = maxH, w = h / vidAspect
-        if (w > maxW) { w = maxW; h = w * vidAspect }
-        // 水平居中到缩略图，clamp 在视口内
-        const centerX = hover.rect.left + hover.rect.width / 2
-        const left = Math.max(12, Math.min(window.innerWidth - w - 12, centerX - w / 2))
+        const w = 280
+        const h = w * vidAspect
         return createPortal(
           <div
             className="fixed z-[120] pointer-events-none"
             style={{
-              top: hover.rect.top - h - 12,
-              left,
+              right: 20,
+              bottom: 20,
               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 30px 80px -10px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.06)" }}>
+            <div className="rounded-2xl overflow-hidden border border-orange-300/40 bg-black" style={{ boxShadow: "0 30px 80px -10px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.06)" }}>
               <img
                 src={effectiveFrameUrl(jobId, hf)}
                 alt={`preview ${hf.index}`}
                 className="block"
                 style={{ width: w, height: h, 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">分镜 {hf.index + 1} · {hf.timestamp.toFixed(2)}s</span>
-                <span className="text-white/60 text-[11px] font-mono">点击进入精细调整</span>
+              <div className="flex items-center justify-between px-3 py-1.5 bg-black/70 backdrop-blur-md">
+                <span className="text-white text-[12px] font-medium">分镜 {hf.index + 1} · {hf.timestamp.toFixed(2)}s</span>
               </div>
             </div>
           </div>,
@@ -674,7 +667,7 @@ export function ImageGenNode({ data, selected }: any) {
                     className="absolute inset-0 w-full h-full object-contain"
                   />
                 </button>
-                {/* 上推按钮：hover 时浮出 */}
+                {/* 上推按钮：常驻可见 */}
                 {d.onPushToStoryboard && (
                   <button
                     onClick={(e) => {
@@ -688,7 +681,7 @@ export function ImageGenNode({ data, selected }: any) {
                       })
                     }}
                     title="⬆ 上推到分镜头编排"
-                    className="absolute top-1 left-1 h-5 w-5 rounded-full bg-black/70 backdrop-blur text-white/85 hover:bg-violet-500 hover:text-white inline-flex items-center justify-center opacity-0 group-hover:opacity-100 transition z-[70] text-[12px] leading-none font-bold"
+                    className="absolute top-1 left-1 h-5 w-5 rounded-full bg-violet-500/90 backdrop-blur text-white shadow-md hover:bg-violet-400 hover:scale-110 inline-flex items-center justify-center transition z-[70] text-[12px] leading-none font-bold"
                   >
                     ⬆
                   </button>
@@ -724,38 +717,34 @@ export function ImageGenNode({ data, selected }: any) {
         )}
       </NodeShell>
 
-      {/* Portal hover 大预览 — 浮在缩略图上方 */}
+      {/* Portal hover 预览 — 固定视口右下角，不遮挡 */}
       {mounted && hover && job && (() => {
         const [fi, ei] = hover.key.split("_")
         const frameIdx = parseInt(fi, 10)
         const p = elementCrops.find((x) => x.frameIdx === frameIdx && x.elementId === ei)
         if (!p) return null
         const vidAspect = job.height > 0 ? job.height / job.width : 16 / 9
-        const maxH = Math.min(window.innerHeight * 0.7, hover.rect.top - 16)
-        const maxW = Math.min(window.innerWidth * 0.6, 600)
-        let h = maxH, w = h / vidAspect
-        if (w > maxW) { w = maxW; h = w * vidAspect }
-        const centerX = hover.rect.left + hover.rect.width / 2
-        const left = Math.max(12, Math.min(window.innerWidth - w - 12, centerX - w / 2))
+        const w = 280
+        const h = w * vidAspect
         return createPortal(
           <div
             className="fixed z-[120] pointer-events-none"
             style={{
-              top: hover.rect.top - h - 12,
-              left,
+              right: 20,
+              bottom: 20,
               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 30px 80px -10px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.06)" }}>
+            <div className="rounded-2xl overflow-hidden border border-violet-300/40 bg-white" style={{ boxShadow: "0 30px 80px -10px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.06)" }}>
               <img
                 src={p.src}
                 alt={`preview ${p.elementId}`}
                 className="block"
                 style={{ width: w, height: h, 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">{p.name}</span>
-                <span className="text-white/60 text-[11px] font-mono">来自分镜 {p.frameIdx + 1}</span>
+              <div className="flex items-center justify-between px-3 py-1.5 bg-black/70 backdrop-blur-md">
+                <span className="text-white text-[12px] font-medium">{p.name}</span>
+                <span className="text-white/60 text-[11px] font-mono">分镜 {p.frameIdx + 1}</span>
               </div>
             </div>
           </div>,
diff --git a/web/components/storyboard-bar.tsx b/web/components/storyboard-bar.tsx
index 20da9c9..a6fcac3 100644
--- a/web/components/storyboard-bar.tsx
+++ b/web/components/storyboard-bar.tsx
@@ -213,34 +213,29 @@ export function StoryboardBar({ job, selectedFrames, focusedFrame, onFocusFrame,
         </div>
       )}
 
-      {/* Hover 大图预览 · 浮在缩略图下方（不挡其他界面） */}
+      {/* Hover 预览 · 固定视口右下角，不遮挡 */}
       {mounted && hover && (() => {
         const vidAspect = job.height > 0 ? job.height / job.width : 16 / 9
-        const maxH = Math.min(window.innerHeight * 0.7, window.innerHeight - hover.rect.bottom - 16)
-        const maxW = Math.min(window.innerWidth * 0.6, 600)
-        let h = maxH, w = h / vidAspect
-        if (w > maxW) { w = maxW; h = w * vidAspect }
-        const centerX = hover.rect.left + hover.rect.width / 2
-        const left = Math.max(12, Math.min(window.innerWidth - w - 12, centerX - w / 2))
+        const w = 280
+        const h = w * vidAspect
         return createPortal(
           <div
             className="fixed z-[120] pointer-events-none"
             style={{
-              top: hover.rect.bottom + 8,
-              left,
+              right: 20,
+              bottom: 20,
               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 30px 80px -10px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.06)" }}>
+            <div className="rounded-2xl overflow-hidden border border-violet-300/40 bg-black" style={{ boxShadow: "0 30px 80px -10px 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: w, height: h, 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 className="flex items-center justify-between px-3 py-1.5 bg-black/70 backdrop-blur-md">
+                <span className="text-white text-[12px] font-medium">分镜 {hover.seq} · {hover.frame.timestamp.toFixed(2)}s</span>
               </div>
             </div>
           </div>,