auto-save 2026-05-14 00:37 (+1, ~2)

web/components/nodes/index.tsx

@@ -9,6 +9,7 @@ import {
 } from "lucide-react"
 import { toast } from "sonner"
 import { NodeShell, type NodeStatus, type NodeKind } from "./node-shell"
+import { HoverPreview } from "./hover-preview"
 import {
   type Job, type ImageRef,
   apiAssetUrl, effectiveFrameUrl, videoUrl, hasCutout, representativeCutoutUrl,
@@ -124,45 +125,54 @@ export function InputNode({ data, selected }: NodeProps<{ data: NodeData }> | an
           {[...d.jobs].reverse().map((j) => {
             const isActive = j.id === d.activeJobId
             const ready = !!j.video_url
+            const aspectStr = ready ? `${j.width}/${j.height}` : "9/16"
             return (
-              <button
+              <div
                 key={j.id}
-                type="button"
-                onClick={(e) => {
-                  e.stopPropagation()
-                  if (isActive && ready) setVideoExpanded(true)
-                  else d.onSwitchJob(j.id)
-                }}
-                title={ready ? `${j.width}×${j.height} · ${j.duration.toFixed(1)}s · ${isActive ? "点击展开" : "点击切换"}` : "下载中…"}
-                className={`shrink-0 group relative rounded-md overflow-hidden border shadow-lg transition hover:-translate-y-0.5 ${
+                className={`group relative shrink-0 rounded-md overflow-visible border shadow-lg transition hover:-translate-y-0.5 ${
                   isActive ? "border-violet-400 ring-2 ring-violet-400/60" : "border-white/25"
                 }`}
-                style={{ height: 64, aspectRatio: ready ? `${j.width}/${j.height}` : "9/16" }}
+                style={{ height: 80, aspectRatio: aspectStr }}
               >
-                {ready ? (
-                  <video
-                    src={videoUrl(j.id)}
-                    muted
-                    loop
-                    playsInline
-                    preload="metadata"
-                    className="block w-full h-full object-cover bg-black"
-                    onMouseEnter={(e) => (e.target as HTMLVideoElement).play().catch(() => {})}
-                    onMouseLeave={(e) => {
-                      const v = e.target as HTMLVideoElement
-                      v.pause()
-                      v.currentTime = 0
-                    }}
-                  />
-                ) : (
-                  <div className="w-full h-full bg-black/60 flex items-center justify-center">
-                    <Loader2 className="h-4 w-4 animate-spin text-white/60" />
+                <button
+                  type="button"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    if (isActive && ready) setVideoExpanded(true)
+                    else d.onSwitchJob(j.id)
+                  }}
+                  title={ready ? `${j.width}×${j.height} · ${j.duration.toFixed(1)}s · ${isActive ? "点击展开" : "点击切换"}` : "下载中…"}
+                  className="absolute inset-0 w-full h-full overflow-hidden rounded-md"
+                >
+                  {ready ? (
+                    <video
+                      src={videoUrl(j.id)}
+                      muted
+                      loop
+                      playsInline
+                      preload="metadata"
+                      poster=""
+                      className="block w-full h-full object-cover bg-black"
+                    />
+                  ) : (
+                    <div className="w-full h-full bg-black/60 flex items-center justify-center">
+                      <Loader2 className="h-4 w-4 animate-spin text-white/60" />
+                    </div>
+                  )}
+                  <div className="absolute bottom-0.5 right-0.5 bg-black/70 text-white text-[9px] font-mono px-1 py-0.5 rounded">
+                    {ready ? `${j.duration.toFixed(1)}s` : "…"}
                   </div>
+                </button>
+                {ready && (
+                  <HoverPreview
+                    videoSrc={videoUrl(j.id)}
+                    aspect={aspectStr}
+                    label={`${j.width}×${j.height}`}
+                    caption={`${j.duration.toFixed(1)}s`}
+                    borderClass="border-violet-300/60"
+                  />
                 )}
-                <div className="absolute bottom-0.5 right-0.5 bg-black/70 text-white text-[9px] font-mono px-1 py-0.5 rounded">
-                  {ready ? `${j.duration.toFixed(1)}s` : "…"}
-                </div>
-              </button>
+              </div>
             )
           })}
         </div>
@@ -367,10 +377,10 @@ export function KeyframeNode({ data, selected }: any) {
 
   return (
     <div className="relative" style={{ width: "100%", height: "100%" }}>
-      {/* 缩略图浮条（节点上方，最多 5 个一行，多行向上扩展） */}
+      {/* 缩略图浮条 — 单行横滚 + 固定高度，跟节点宽度对齐；超出横滚（视觉类节点统一规则） */}
       {frames.length > 0 && jobId && (
         <div
-          className="absolute left-0 right-0 grid grid-cols-5 gap-1.5"
+          className="absolute left-0 right-0 flex items-end gap-1.5 overflow-x-auto pb-1.5"
           style={{ bottom: "calc(100% + 12px)" }}
         >
           {frames.map((f) => {
@@ -378,12 +388,13 @@ export function KeyframeNode({ data, selected }: any) {
             return (
               <div
                 key={f.index}
-                className={`group relative rounded-md border transition shadow-lg hover:-translate-y-0.5 ${
+                className={`group relative shrink-0 rounded-md border overflow-visible transition shadow-lg hover:-translate-y-0.5 ${
                   isSel
                     ? "border-emerald-400 ring-2 ring-emerald-400/60"
                     : "border-white/30 dark:border-white/20"
                 }`}
                 style={{
+                  height: 80,
                   aspectRatio: d.job && d.job.height > 0
                     ? `${d.job.width}/${d.job.height}`
                     : "16/9",
@@ -972,10 +983,10 @@ export function VideoGenNode({ data, selected }: any) {
     <div className="relative" style={{ width: "100%", height: "100%" }}>
       {videos.length > 0 && (
         <div
-          className="absolute left-0 right-0 grid grid-cols-3 gap-1.5"
+          className="absolute left-0 right-0 flex items-end gap-1.5 overflow-x-auto pb-1.5"
           style={{ bottom: "calc(100% + 12px)" }}
         >
-          {videos.slice(0, 6).map((v, i) => {
+          {videos.map((v, i) => {
             const videoSrc = apiAssetUrl(v.url)
             const posterSrc = apiAssetUrl(v.poster_url)
             const ready = v.status === "completed" && !!videoSrc
@@ -983,10 +994,10 @@ export function VideoGenNode({ data, selected }: any) {
             return (
             <div
               key={v.id}
-              className={`group relative rounded-md border transition shadow-lg hover:-translate-y-0.5 bg-black ${
+              className={`group relative shrink-0 rounded-md border overflow-visible transition shadow-lg hover:-translate-y-0.5 bg-black ${
                 ready ? "border-emerald-300/60" : v.status === "failed" ? "border-rose-300/70" : "border-violet-300/55"
               }`}
-              style={{ aspectRatio: aspect }}
+              style={{ height: 80, aspectRatio: aspect }}
             >
               <button
                 type="button"
@@ -1007,12 +1018,6 @@ export function VideoGenNode({ data, selected }: any) {
                     playsInline
                     preload="metadata"
                     className="absolute inset-0 h-full w-full object-cover"
-                    onMouseEnter={(e) => (e.target as HTMLVideoElement).play().catch(() => {})}
-                    onMouseLeave={(e) => {
-                      const el = e.target as HTMLVideoElement
-                      el.pause()
-                      el.currentTime = 0
-                    }}
                   />
                 ) : posterSrc ? (
                   <img src={posterSrc} alt="" className="absolute inset-0 h-full w-full object-cover opacity-75" />