...
+ * 视觉类节点统一大预览：
+ * - 浮在缩略图正上方居中，跟随 ReactFlow viewport 缩放
+ * - 默认 480px 宽（原比例高），视频自动播放（muted loop），图片静态
+ * - 不 pinned 时：pointer-events-none，依赖 group-hover 显示/隐藏
+ * - pinned=true：强制 visible，常驻不消失，pointer-events 开启可点 × 关闭
+ * - 用法： ...
*/
interface Props {
imgSrc?: string
@@ -17,17 +18,24 @@ interface Props {
caption?: string
borderClass?: string
width?: number
+ pinned?: boolean
+ onClose?: () => void
}
export function HoverPreview({
imgSrc, videoSrc, poster, aspect,
label, caption,
borderClass = "border-violet-300/55",
- width = 280,
+ width = 480,
+ pinned = false,
+ onClose,
}: Props) {
+ const visibilityCls = pinned
+ ? "opacity-100 scale-100 pointer-events-auto"
+ : "pointer-events-none opacity-0 group-hover:opacity-100 scale-95 group-hover:scale-100"
return (
-
+
{videoSrc ? (
@@ -51,6 +59,17 @@ export function HoverPreview({
{caption && {caption}}
)}
+ {pinned && onClose && (
+
+ )}
)
diff --git a/web/components/nodes/index.tsx b/web/components/nodes/index.tsx
index b793a05..488f290 100644
--- a/web/components/nodes/index.tsx
+++ b/web/components/nodes/index.tsx
@@ -93,6 +93,7 @@ export function InputNode({ data, selected }: NodeProps<{ data: NodeData }> | an
const [videoT, setVideoT] = useState(0)
const [addingFrame, setAddingFrame] = useState(false)
const [videoExpanded, setVideoExpanded] = useState(false)
+ const [pinnedPreviewJob, setPinnedPreviewJob] = useState
(null)
const fileRef = useRef(null)
const videoRef = useRef(null)
const job = d.job
@@ -140,10 +141,15 @@ export function InputNode({ data, selected }: NodeProps<{ data: NodeData }> | an
type="button"
onClick={(e) => {
e.stopPropagation()
- if (isActive && ready) setVideoExpanded(true)
- else d.onSwitchJob(j.id)
+ // 单击：钉住 / 取消钉住大预览 + 切换 active（若需要）
+ setPinnedPreviewJob((prev) => (prev === j.id ? null : j.id))
+ if (!isActive && ready) d.onSwitchJob(j.id)
}}
- title={ready ? `${j.width}×${j.height} · ${j.duration.toFixed(1)}s · ${isActive ? "点击展开" : "点击切换"}` : "下载中…"}
+ onDoubleClick={(e) => {
+ e.stopPropagation()
+ if (ready) setVideoExpanded(true)
+ }}
+ title={ready ? `${j.width}×${j.height} · ${j.duration.toFixed(1)}s · 单击钉住大预览 · 双击展开播放` : "下载中…"}
className="absolute inset-0 w-full h-full overflow-hidden rounded-md"
>
{ready ? (
@@ -172,6 +178,8 @@ export function InputNode({ data, selected }: NodeProps<{ data: NodeData }> | an
label={`${j.width}×${j.height}`}
caption={`${j.duration.toFixed(1)}s`}
borderClass="border-violet-300/60"
+ pinned={pinnedPreviewJob === j.id}
+ onClose={() => setPinnedPreviewJob(null)}
/>
)}
-