auto-save 2026-05-13 19:28 (~4)

web/app/page.tsx

@@ -67,7 +67,8 @@ export default function Home() {
   const [analyzing, setAnalyzing] = useState(false)
   const [selectedFrames, setSelectedFrames] = useState<Set<number>>(new Set())
   const [expandedFrame, setExpandedFrame] = useState<number | null>(null)
-  const [framePanelResetNonce, setFramePanelResetNonce] = useState(0)
+  const [framePanelScale, setFramePanelScale] = useState(1)
+  const [framePanelPinned, setFramePanelPinned] = useState(false)
   const [videoLightboxOpen, setVideoLightboxOpen] = useState(false)
   const [storyboardFrame, setStoryboardFrame] = useState<number | null>(null)
   const [workbenchOpen, setWorkbenchOpen] = useState(false)
@@ -170,7 +171,10 @@ export default function Home() {
 
   const handleOpenFramePanel = useCallback((idx: number) => {
     setExpandedFrame(idx)
-    setFramePanelResetNonce((n) => n + 1)
+  }, [])
+
+  const handleFramePanelScaleChange = useCallback((scale: number) => {
+    setFramePanelScale(Math.max(0.75, Math.min(1.35, Number(scale.toFixed(2)))))
   }, [])
 
   const handleDeleteFrame = useCallback(async (idx: number) => {
@@ -281,12 +285,16 @@ export default function Home() {
     analyzing,
     selectedFrames,
     expandedFrame,
+    framePanelScale,
+    framePanelPinned,
     onSubmitUrl: handleSubmit,
     onUploadFile: handleUpload,
     onAnalyze: handleAnalyze,
     onToggleFrame: handleToggleFrame,
     onExpandFrame: setExpandedFrame,
     onOpenFramePanel: handleOpenFramePanel,
+    onFramePanelScaleChange: handleFramePanelScaleChange,
+    onFramePanelPinnedChange: setFramePanelPinned,
     onCloseExpandedFrame: () => setExpandedFrame(null),
     onAddManualFrame: handleAddManualFrame,
     onOpenVideoLightbox: () => setVideoLightboxOpen(true),
@@ -300,7 +308,7 @@ export default function Home() {
       setWorkbenchOpen(true)
     },
     onCopyImage: handleCopyImage,
-  }), [job, jobs, activeJobId, submitting, analyzing, selectedFrames, expandedFrame, handleSubmit, handleUpload, handleAnalyze, handleToggleFrame, handleOpenFramePanel, handleAddManualFrame, handleSwitchJob, setJob, handleDeleteFrame, handleDeleteGenerated, handleCopyImage])
+  }), [job, jobs, activeJobId, submitting, analyzing, selectedFrames, expandedFrame, framePanelScale, framePanelPinned, handleSubmit, handleUpload, handleAnalyze, handleToggleFrame, handleOpenFramePanel, handleFramePanelScaleChange, handleAddManualFrame, handleSwitchJob, setJob, handleDeleteFrame, handleDeleteGenerated, handleCopyImage])
 
   // 用 useNodesState 让 ReactFlow 自己管位置（避免轮询时重置 drag）
   const [nodes, setNodes, onNodesChange] = useNodesState<Node>(
@@ -324,16 +332,14 @@ export default function Home() {
   }, [nodeData, setNodes])
 
   // 关键帧详情面板是独立 ReactFlow 节点：可拖动、跟随画布缩放。
-  // 再次点击任意关键帧缩略图时，重新放回关键帧节点左侧附近，避免拖丢后找不到。
-  const panelResetHandledRef = useRef(0)
+  // 已打开时点击其他关键帧只切换内容，不移动用户拖好的面板位置。
   useEffect(() => {
     if (!job || expandedFrame === null) {
       setNodes((prev) => prev.filter((n) => n.id !== KEYFRAME_PANEL_ID))
       return
     }
 
-    const shouldReset = panelResetHandledRef.current !== framePanelResetNonce
-    panelResetHandledRef.current = framePanelResetNonce
+    let shouldFocusNewPanel = false
     setNodes((prev) => {
       const keyframeNode = prev.find((n) => n.id === "keyframe")
       const inputNode = prev.find((n) => n.id === "input")
@@ -347,13 +353,13 @@ export default function Home() {
           ? {
               ...n,
               data: nodeData,
-              position: shouldReset ? defaultPosition : n.position,
-              draggable: true,
-              dragHandle: ".keyframe-panel-drag",
+              draggable: !framePanelPinned,
+              dragHandle: framePanelPinned ? undefined : ".keyframe-panel-drag",
             }
           : n,
         )
       }
+      shouldFocusNewPanel = true
       return [
         ...prev,
         {
@@ -361,13 +367,13 @@ export default function Home() {
           type: "keyframePanel",
           position: defaultPosition,
           data: nodeData,
-          draggable: true,
-          dragHandle: ".keyframe-panel-drag",
+          draggable: !framePanelPinned,
+          dragHandle: framePanelPinned ? undefined : ".keyframe-panel-drag",
           selectable: true,
         },
       ]
     })
-    if (shouldReset) {
+    if (shouldFocusNewPanel) {
       window.setTimeout(() => {
         flowRef.current?.fitView?.({
           nodes: [{ id: KEYFRAME_PANEL_ID }, { id: "keyframe" }],
@@ -376,7 +382,7 @@ export default function Home() {
         })
       }, 0)
     }
-  }, [job?.id, expandedFrame, framePanelResetNonce, nodeData, setNodes])
+  }, [job?.id, expandedFrame, framePanelPinned, nodeData, setNodes])
 
   // 边的 animated 状态跟 Job 进度联动
   useEffect(() => {