99 lines
3.6 KiB
TypeScript
99 lines
3.6 KiB
TypeScript
"use client";
|
||
|
||
import { ArrowLeft, FileImage } from "lucide-react";
|
||
import { useParams, useRouter, useSearchParams } from "next/navigation";
|
||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||
import { AgentPsdTemplateEditorDialog } from "@/components/agents/AgentPsdTemplateEditorDialog";
|
||
import { Button } from "@/components/ui/button";
|
||
import {
|
||
readCanvasPsdTemplateLaunchPayload,
|
||
type CanvasPsdTemplateLaunchPayload,
|
||
} from "@/lib/canvas/psd-template-launch";
|
||
|
||
export default function CanvasPsdTemplatePage() {
|
||
const router = useRouter();
|
||
const routeParams = useParams();
|
||
const searchParams = useSearchParams();
|
||
const canvasId = String(routeParams?.id || "");
|
||
const launchToken = searchParams.get("launch") || "";
|
||
|
||
const [launchPayload, setLaunchPayload] = useState<CanvasPsdTemplateLaunchPayload | null>(null);
|
||
const [activePendingImageId, setActivePendingImageId] = useState<string | null>(null);
|
||
const [renderedResultUrls, setRenderedResultUrls] = useState<Record<string, string>>({});
|
||
|
||
useEffect(() => {
|
||
if (!launchToken) {
|
||
setLaunchPayload(null);
|
||
return;
|
||
}
|
||
|
||
const nextPayload = readCanvasPsdTemplateLaunchPayload(launchToken);
|
||
setLaunchPayload(nextPayload);
|
||
setActivePendingImageId(nextPayload?.activeImageId || nextPayload?.pendingImages[0]?.id || null);
|
||
}, [launchToken]);
|
||
|
||
const handleBack = useCallback(() => {
|
||
const returnTo = launchPayload?.returnTo?.trim();
|
||
if (returnTo) {
|
||
router.push(returnTo);
|
||
return;
|
||
}
|
||
router.push(`/canvas/${canvasId}/batch`);
|
||
}, [canvasId, launchPayload?.returnTo, router]);
|
||
|
||
const activePendingImage = useMemo(
|
||
() =>
|
||
launchPayload?.pendingImages.find((image) => image.id === activePendingImageId) ||
|
||
launchPayload?.pendingImages[0] ||
|
||
null,
|
||
[activePendingImageId, launchPayload?.pendingImages]
|
||
);
|
||
|
||
if (!launchPayload || !activePendingImage) {
|
||
return (
|
||
<div className="flex h-dvh w-full items-center justify-center bg-[#050608] px-6 text-white">
|
||
<div className="w-full max-w-md rounded-[28px] border border-white/10 bg-white/[0.03] p-8 text-center shadow-[0_30px_80px_rgba(0,0,0,0.35)]">
|
||
<div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full border border-white/10 bg-white/[0.04]">
|
||
<FileImage className="h-6 w-6 text-white/70" />
|
||
</div>
|
||
<div className="font-semibold text-lg">没有可用的套 PSD 任务</div>
|
||
<div className="mt-3 text-sm leading-6 text-white/55">
|
||
当前页面没有接收到批量处理结果图。请先从批量处理结果区选择图片，再进入套 PSD 模版页面。
|
||
</div>
|
||
<Button className="mt-6" onClick={handleBack}>
|
||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||
返回批量处理
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<AgentPsdTemplateEditorDialog
|
||
activePendingImageId={activePendingImage.id}
|
||
brandName={launchPayload.brandName}
|
||
key={`${launchToken}:${activePendingImage.id}`}
|
||
onActivePendingImageIdChange={setActivePendingImageId}
|
||
onBack={handleBack}
|
||
onOpenChange={(open) => {
|
||
if (!open) {
|
||
handleBack();
|
||
}
|
||
}}
|
||
onRenderedResultCreated={(imageUrl) => {
|
||
setRenderedResultUrls((current) => ({
|
||
...current,
|
||
[activePendingImage.id]: imageUrl,
|
||
}));
|
||
}}
|
||
open
|
||
pendingImages={launchPayload.pendingImages}
|
||
pendingRenderedResultUrls={renderedResultUrls}
|
||
sourceImageUrl={activePendingImage.imageUrl}
|
||
standalone
|
||
templateMode={launchPayload.templateMode || "main"}
|
||
/>
|
||
);
|
||
}
|