kangwan/20260512-skg-tk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

auto-save 2026-05-13 13:42 (+1, ~4)

Browse Source
This commit is contained in:
kang
2026-05-13 13:43:08 +08:00
parent fa3fadd52b
commit 7e55b9b60d
5 changed files with 141 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
web/components/nodes/index.tsx
View File

@@ -583,7 +583,7 @@ export function RewriteNode({ selected }: any) {
/* ============================================================
8. ImageGenNode — 显示 selected frames 的代表生成图
============================================================ */
const IMAGEGEN_WIDTH = 320
const IMAGEGEN_WIDTH = 360
export function ImageGenNode({ data, selected }: any) {
const d: NodeData = data
@@ -601,24 +601,25 @@ export function ImageGenNode({ data, selected }: any) {
const totalElements = elementCrops.length
const status: NodeStatus = !job ? "pending" : totalElements > 0 ? "done" : "pending"
const aspect = job && job.height > 0 ? `${job.width}/${job.height}` : "9/16"
return (
<div className="relative" style={{ width: IMAGEGEN_WIDTH }}>
{/* 节点上方：所有元素 crop 图（编排输入素材） */}
{/* 节点上方：所有元素 crop 图（编排输入素材）· 跟 keyframe 节点样式一致 */}
{elementCrops.length > 0 && job && (
<div
className="absolute left-0 right-0 grid grid-cols-6 gap-1.5"
className="absolute left-0 right-0 grid grid-cols-5 gap-1.5"
style={{ bottom: "calc(100% + 12px)" }}
>
{elementCrops.map((p) => (
<div
key={`${p.frameIdx}_${p.elementId}`}
className="group relative rounded-md border border-violet-300/40 dark:border-violet-300/30 transition shadow-lg hover:-translate-y-0.5 bg-black/40 overflow-hidden"
style={{ aspectRatio: "1/1" }}
className="group relative rounded-md border border-violet-300/50 transition shadow-lg hover:-translate-y-0.5 bg-black/40 overflow-hidden"
style={{ aspectRatio: aspect }}
>
<button
onClick={(e) => { e.stopPropagation(); d.onOpenPanel?.("imagegen") }}
title={`${p.name} · 来自分镜 ${p.frameIdx + 1} · 打开「分镜头编排」`}
title={`${p.name} · 来自分镜 ${p.frameIdx + 1}`}
className="absolute inset-0 w-full h-full"
>
<img
@@ -627,7 +628,7 @@ export function ImageGenNode({ data, selected }: any) {
className="absolute inset-0 w-full h-full object-contain"
/>
{/* Hover 大图预览 */}
{/* Hover 大图预览 — 跟 keyframe 样式一致 */}
<div
className="pointer-events-none absolute opacity-0 group-hover:opacity-100 scale-95 group-hover:scale-100 transition-all duration-200 z-[60]"
style={{
@@ -643,15 +644,16 @@ export function ImageGenNode({ data, selected }: any) {
alt={`preview ${p.elementId}`}
className="block"
style={{
maxWidth: "min(560px, 70vw)",
width: IMAGEGEN_WIDTH * 2,
maxWidth: "min(720px, 80vw)",
height: "auto",
maxHeight: "70vh",
maxHeight: "82vh",
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>
<span className="text-white/60 text-[11px] font-mono">来自分镜 {p.frameIdx + 1}</span>
</div>
</div>
</div>