auto-save 2026-05-13 23:40 (+3, ~2)

web/components/nodes/index.tsx

@@ -104,10 +104,28 @@ export function InputNode({ data, selected }: NodeProps<{ data: NodeData }> | an
 
   return (
     <div className="relative" style={{ width: 320 }}>
-      {/* 多视频缩略图浮条 — 每个 job 一张 + 末尾「+」按钮再上传 */}
+      {/* 多视频缩略图浮条 — 「+」在最左，job 按时间倒序（最新靠左高亮），统一高度 64，宽度按视频原比例，一行横滚 */}
       {!videoExpanded && d.jobs.length > 0 && (
-        <div className="absolute left-0 right-0 flex justify-center items-end gap-1.5 flex-wrap" style={{ bottom: "calc(100% + 12px)" }}>
-          {d.jobs.map((j) => {
+        <div
+          className="absolute flex items-end gap-1.5 overflow-x-auto pb-1.5"
+          style={{
+            bottom: "calc(100% + 12px)",
+            left: "50%",
+            transform: "translateX(-50%)",
+            width: "min(720px, 88vw)",
+          }}
+        >
+          {/* + 再上传一个（放在最前面） */}
+          <button
+            type="button"
+            onClick={(e) => { e.stopPropagation(); fileRef.current?.click() }}
+            title="再上传一个视频"
+            className="shrink-0 rounded-md border border-dashed border-white/30 hover:border-white/50 bg-white/[0.04] hover:bg-white/[0.08] inline-flex items-center justify-center text-white/60 hover:text-white transition"
+            style={{ width: 36, height: 64 }}
+          >
+            <Plus className="h-4 w-4" />
+          </button>
+          {[...d.jobs].reverse().map((j) => {
             const isActive = j.id === d.activeJobId
             const ready = !!j.video_url
             return (
@@ -120,10 +138,10 @@ export function InputNode({ data, selected }: NodeProps<{ data: NodeData }> | an
                   else d.onSwitchJob(j.id)
                 }}
                 title={ready ? `${j.width}×${j.height} · ${j.duration.toFixed(1)}s · ${isActive ? "点击展开" : "点击切换"}` : "下载中…"}
-                className={`group relative rounded-md overflow-hidden border shadow-lg transition hover:-translate-y-0.5 ${
+                className={`shrink-0 group relative rounded-md overflow-hidden border shadow-lg transition hover:-translate-y-0.5 ${
                   isActive ? "border-violet-400 ring-2 ring-violet-400/60" : "border-white/25"
                 }`}
-                style={{ width: 80, aspectRatio: ready ? `${j.width}/${j.height}` : "9/16" }}
+                style={{ height: 64, aspectRatio: ready ? `${j.width}/${j.height}` : "9/16" }}
               >
                 {ready ? (
                   <video
@@ -151,16 +169,6 @@ export function InputNode({ data, selected }: NodeProps<{ data: NodeData }> | an
               </button>
             )
           })}
-          {/* + 再加一个 */}
-          <button
-            type="button"
-            onClick={(e) => { e.stopPropagation(); fileRef.current?.click() }}
-            title="再上传一个视频"
-            className="rounded-md border border-dashed border-white/30 hover:border-white/50 bg-white/[0.04] hover:bg-white/[0.08] inline-flex items-center justify-center text-white/60 hover:text-white transition"
-            style={{ width: 36, height: 64 }}
-          >
-            <Plus className="h-4 w-4" />
-          </button>
         </div>
       )}