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

auto-save 2026-05-14 03:03 (~3)

Browse Source
This commit is contained in:
kang
2026-05-14 03:04:09 +08:00
parent bdbaf75850
commit 3df3ce4b1a
3 changed files with 153 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -311,6 +311,73 @@ function FloatingThumbnailStrip({
)
}
function DeleteConfirmDialog({
title,
description,
confirmLabel = "删除",
onCancel,
onConfirm,
}: {
title: string
description: string
confirmLabel?: string
onCancel: () => void
onConfirm: () => void
}) {
useEffect(() => {
const onKeyDown = (e: KeyboardEvent) => {
if (e.key === "Escape") onCancel()
}
document.addEventListener("keydown", onKeyDown)
return () => document.removeEventListener("keydown", onKeyDown)
}, [onCancel])
if (typeof document === "undefined") return null
return createPortal(
<div
className="fixed inset-0 z-[1000] flex items-center justify-center bg-black/55 px-4 backdrop-blur-sm"
onMouseDown={(e) => {
e.stopPropagation()
if (e.target === e.currentTarget) onCancel()
}}
>
<div
role="dialog"
aria-modal="true"
aria-label={title}
className="w-full max-w-sm rounded-xl border border-white/14 bg-zinc-950/95 p-4 text-white shadow-2xl"
onMouseDown={(e) => e.stopPropagation()}
>
<div className="mb-2 flex items-center gap-2">
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-rose-500/16 text-rose-200">
<Trash2 className="h-4 w-4" />
</div>
<div className="text-sm font-semibold">{title}</div>
</div>
<p className="text-xs leading-5 text-white/68">{description}</p>
<div className="mt-4 flex justify-end gap-2">
<button
type="button"
onClick={(e) => { e.stopPropagation(); onCancel() }}
className="rounded-md border border-white/12 bg-white/[0.04] px-3 py-1.5 text-xs font-medium text-white/78 transition hover:bg-white/[0.08] hover:text-white"
>
取消
</button>
<button
type="button"
onClick={(e) => { e.stopPropagation(); onConfirm() }}
className="rounded-md bg-rose-500 px-3 py-1.5 text-xs font-semibold text-white shadow-lg shadow-rose-950/35 transition hover:bg-rose-400"
>
{confirmLabel}
</button>
</div>
</div>
</div>,
document.body,
)
}
/* ============================================================
1. InputNode — TK 链接 / 上传
============================================================ */
@@ -322,6 +389,7 @@ export function InputNode({ data, selected }: NodeProps<{ data: NodeData }> | an
const [videoExpanded, setVideoExpanded] = useState(false)
const [hoverPreviewJob, setHoverPreviewJob] = useState<PreviewAnchor<string> | null>(null)
const [pinnedPreviewJob, setPinnedPreviewJob] = useState<PreviewAnchor<string> | null>(null)
const [deleteJobTarget, setDeleteJobTarget] = useState<Job | null>(null)
const rootRef = useRef<HTMLDivElement>(null)
const fileRef = useRef<HTMLInputElement>(null)
const videoRef = useRef<HTMLVideoElement>(null)
@@ -417,9 +485,7 @@ export function InputNode({ data, selected }: NodeProps<{ data: NodeData }> | an
type="button"
onClick={(e) => {
e.stopPropagation()
if (confirm(`删除视频任务 ${j.id.slice(0, 8)}？源视频、关键帧、元素提取图和生成视频都会一并删除。`)) {
d.onDeleteJob?.(j.id)
}
setDeleteJobTarget(j)
}}
title="删除这个输入视频"
className="absolute right-1.5 top-1.5 z-[70] inline-flex h-7 w-7 items-center justify-center rounded-full bg-rose-500/95 text-white shadow-lg backdrop-blur transition hover:scale-110 hover:bg-rose-400"
@@ -433,6 +499,20 @@ export function InputNode({ data, selected }: NodeProps<{ data: NodeData }> | an
</FloatingThumbnailStrip>
)}
{deleteJobTarget && (
<DeleteConfirmDialog
title="删除这个输入视频？"
description={`会同时删除 ${deleteJobTarget.id.slice(0, 8)} 的源视频、关键帧、元素提取图、生成视频和本地任务目录。`}
confirmLabel="删除视频"
onCancel={() => setDeleteJobTarget(null)}
onConfirm={() => {
const id = deleteJobTarget.id
setDeleteJobTarget(null)
d.onDeleteJob?.(id)
}}
/>
)}
{(() => {
const anchor = pinnedPreviewJob ?? hoverPreviewJob
if (!anchor || videoExpanded) return null
@@ -714,6 +794,7 @@ export function VisualLabNode({ data, selected }: any) {
const [hoverPreview, setHoverPreview] = useState<PreviewAnchor<string> | null>(null)
const [pinnedPreview, setPinnedPreview] = useState<PreviewAnchor<string> | null>(null)
const [deleteVideoTarget, setDeleteVideoTarget] = useState<{ id: string; label: string; caption: string } | null>(null)
const rootRef = useRef<HTMLDivElement>(null)
const previews: VisualPreview[] = [
@@ -885,7 +966,7 @@ export function VisualLabNode({ data, selected }: any) {
type="button"
onClick={(e) => {
e.stopPropagation()
if (confirm(`删除${p.label}？相关清洗 / 抠图 / 生成图都会一并清除。`)) d.onDeleteFrame?.(p.frameIdx)
d.onDeleteFrame?.(p.frameIdx)
}}
title="删除该关键帧"
className="absolute top-1.5 right-1.5 z-[70] inline-flex h-7 w-7 items-center justify-center rounded-full bg-rose-500/95 text-white shadow-lg backdrop-blur transition hover:scale-110 hover:bg-rose-400"
@@ -899,9 +980,7 @@ export function VisualLabNode({ data, selected }: any) {
type="button"
onClick={(e) => {
e.stopPropagation()
if (confirm(`删除元素提取图「${p.label}」？该 cutout 文件会被移除。`)) {
d.onDeleteCutout?.(p.frameIdx, p.elementId, p.cutoutId)
}
d.onDeleteCutout?.(p.frameIdx, p.elementId, p.cutoutId)
}}
title="删除该提取图"
className="absolute top-1.5 right-1.5 z-[70] inline-flex h-7 w-7 items-center justify-center rounded-full bg-rose-500/95 text-white shadow-lg backdrop-blur transition hover:scale-110 hover:bg-rose-400"
@@ -915,7 +994,7 @@ export function VisualLabNode({ data, selected }: any) {
type="button"
onClick={(e) => {
e.stopPropagation()
d.onDeleteVideo?.(p.videoId)
setDeleteVideoTarget({ id: p.videoId, label: p.label, caption: p.caption })
}}
className="absolute right-1.5 top-1.5 z-[70] inline-flex h-7 w-7 items-center justify-center rounded-full bg-rose-500/95 text-white shadow-lg backdrop-blur transition hover:scale-110 hover:bg-rose-400"
title="删除这个视频任务"
@@ -929,6 +1008,20 @@ export function VisualLabNode({ data, selected }: any) {
</FloatingThumbnailStrip>
)}
{deleteVideoTarget && (
<DeleteConfirmDialog
title="删除这个视频任务？"
description={`会删除${deleteVideoTarget.label}的生成任务和本地视频文件。${deleteVideoTarget.caption}`}
confirmLabel="删除视频任务"
onCancel={() => setDeleteVideoTarget(null)}
onConfirm={() => {
const id = deleteVideoTarget.id
setDeleteVideoTarget(null)
d.onDeleteVideo?.(id)
}}
/>
)}
{(() => {
const anchor = pinnedPreview ?? hoverPreview
if (!anchor) return null
@@ -1107,9 +1200,7 @@ export function KeyframeNode({ data, selected }: any) {
<button
onClick={(e) => {
e.stopPropagation()
if (confirm(`删除分镜 ${f.index + 1}（${f.timestamp.toFixed(1)}s）？相关清洗 / 抠图 / 生成图都会一并清除。`)) {
d.onDeleteFrame?.(f.index)
}
d.onDeleteFrame?.(f.index)
}}
title="删除该关键帧"
className="absolute top-1.5 right-1.5 z-[70] inline-flex h-7 w-7 items-center justify-center rounded-full bg-rose-500/95 text-white shadow-lg backdrop-blur transition hover:scale-110 hover:bg-rose-400"
@@ -1608,9 +1699,7 @@ export function StoryboardNode({ data, selected }: any) {
<button
onClick={(e) => {
e.stopPropagation()
if (confirm(`删除元素提取图「${p.name}」？该 cutout 文件会被移除。`)) {
d.onDeleteCutout?.(p.frameIdx, p.elementId, p.cid)
}
d.onDeleteCutout?.(p.frameIdx, p.elementId, p.cid)
}}
title="删除该提取图"
className="absolute top-1.5 right-1.5 z-[70] inline-flex h-7 w-7 items-center justify-center rounded-full bg-rose-500/95 text-white shadow-lg backdrop-blur transition hover:scale-110 hover:bg-rose-400"
@@ -1684,6 +1773,7 @@ export function VideoGenNode({ data, selected }: any) {
const videos = d.job?.generated_videos ?? []
const rootRef = useRef<HTMLDivElement>(null)
const [hoverPreviewVideo, setHoverPreviewVideo] = useState<PreviewAnchor<string> | null>(null)
const [deleteVideoTarget, setDeleteVideoTarget] = useState<{ id: string; label: string; caption: string } | null>(null)
const running = videos.some((v) => v.status === "queued" || v.status === "in_progress")
const completed = videos.filter((v) => v.status === "completed" && v.url)
const failed = videos.some((v) => v.status === "failed")
@@ -1774,7 +1864,11 @@ export function VideoGenNode({ data, selected }: any) {
type="button"
onClick={(e) => {
e.stopPropagation()
d.onDeleteVideo?.(v.id)
setDeleteVideoTarget({
id: v.id,
label: `视频 ${i + 1}`,
caption: `分镜 ${v.frame_idx + 1} · ${modelLabel(v.model)} · ${v.status}`,
})
}}
className="absolute right-1.5 top-1.5 z-[70] inline-flex h-7 w-7 items-center justify-center rounded-full bg-rose-500/95 text-white shadow-lg backdrop-blur transition hover:scale-110 hover:bg-rose-400"
title="删除这个视频任务"
@@ -1785,6 +1879,19 @@ export function VideoGenNode({ data, selected }: any) {
)})}
</FloatingThumbnailStrip>
)}
{deleteVideoTarget && (
<DeleteConfirmDialog
title="删除这个视频任务？"
description={`会删除${deleteVideoTarget.label}的生成任务和本地视频文件。${deleteVideoTarget.caption}`}
confirmLabel="删除视频任务"
onCancel={() => setDeleteVideoTarget(null)}
onConfirm={() => {
const id = deleteVideoTarget.id
setDeleteVideoTarget(null)
d.onDeleteVideo?.(id)
}}
/>
)}
{(() => {
if (!hoverPreviewVideo) return null
const item = videos.find((v) => v.id === hoverPreviewVideo.id)