1183 lines
47 KiB
TypeScript
1183 lines
47 KiB
TypeScript
"use client";
|
||
|
||
import { useChat } from "@ai-sdk/react";
|
||
import { DefaultChatTransport } from "ai";
|
||
import { Fragment, useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
|
||
import useSWR from "swr";
|
||
import { motion, AnimatePresence } from "framer-motion";
|
||
import {
|
||
ArrowUp,
|
||
Download,
|
||
ImagePlus,
|
||
Loader2,
|
||
Sparkles,
|
||
Upload,
|
||
UserRound,
|
||
X,
|
||
Wand2,
|
||
Settings2,
|
||
} from "lucide-react";
|
||
import { toast } from "sonner";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Textarea } from "@/components/ui/textarea";
|
||
import {
|
||
Select,
|
||
SelectContent,
|
||
SelectItem,
|
||
SelectTrigger,
|
||
SelectValue,
|
||
} from "@/components/ui/select";
|
||
import { ImageParamsBar, type ImageGenerationParams } from "@/components/image-params-bar";
|
||
import { ImageGenerationLoading } from "@/components/image-generation-loading";
|
||
import { useCanvasStore } from "@/store/canvas";
|
||
import { fetchUploadWithRetry } from "@/lib/client/upload-with-retry";
|
||
import { buildImageProxyUrl } from "@/lib/image-delivery";
|
||
import { extractImageUrlsFromText } from "@/lib/image-url";
|
||
import type { Attachment, ChatMessage } from "@/lib/types";
|
||
import { cn, fetchWithErrorHandlers, fetcher, generateUUID } from "@/lib/utils";
|
||
import { AgentCanvasTopNavDark } from "@/components/agents/AgentCanvasTopNavDark";
|
||
import type {
|
||
AgentPreset,
|
||
AgentWorkflowComposerContext,
|
||
AgentWorkflowSelectedBrandModel,
|
||
} from "@/types/agent";
|
||
|
||
interface AgentGenerationWorkspaceDarkV2Props {
|
||
chatId: string;
|
||
projectId: string;
|
||
selectedAgentPresetId?: string | null;
|
||
selectedBrandModel?: AgentWorkflowSelectedBrandModel | null;
|
||
workflowContext?: AgentWorkflowComposerContext | null;
|
||
onBack?: () => void;
|
||
presetPanel?: ReactNode;
|
||
materialSelectionPanel?: ReactNode;
|
||
brandModelPanel?: ReactNode;
|
||
onClearPreset?: () => void;
|
||
siteName?: string | null;
|
||
siteLogo?: string | null;
|
||
siteLogoDark?: string | null;
|
||
}
|
||
|
||
interface PickedAttachment extends Attachment {}
|
||
|
||
interface GeneratedImageGroup {
|
||
messageId: string;
|
||
imageUrls: string[];
|
||
text: string;
|
||
}
|
||
|
||
type ToolStepKey =
|
||
| "preset"
|
||
| "brand-model"
|
||
| "materials"
|
||
| "slots"
|
||
| "prompt"
|
||
| "settings";
|
||
|
||
function buildPreviewImageUrl(url: string, width: number) {
|
||
return buildImageProxyUrl(url, { width, quality: 86, format: "webp" });
|
||
}
|
||
|
||
function buildDownloadFilename(url: string): string {
|
||
const fallback = `canvas-image-${Date.now()}.png`;
|
||
const raw = String(url || "").trim();
|
||
if (!raw) return fallback;
|
||
try {
|
||
const pathname = new URL(raw).pathname || "";
|
||
const candidate = pathname.split("/").pop() || "";
|
||
return candidate || fallback;
|
||
} catch {
|
||
const candidate = raw.split("/").pop()?.split("?")[0] || "";
|
||
return candidate || fallback;
|
||
}
|
||
}
|
||
|
||
function normalizeAssistantText(value: string) {
|
||
return String(value || "")
|
||
.replace(/\n*<!-- GENERATING_IMAGE -->\n*/g, "")
|
||
.replace(/\n*<!-- IMAGE_GENERATION_START -->\n*/g, "")
|
||
.replace(/\n*<!-- IMAGE_GENERATION_END -->\n*/g, "")
|
||
.replace(/!\[[^\]]*\]\((https?:\/\/[^\s)]+)\)/g, "")
|
||
.trim();
|
||
}
|
||
|
||
function getImageDimensions(url: string): Promise<{
|
||
width: number;
|
||
height: number;
|
||
originalWidth: number;
|
||
originalHeight: number;
|
||
}> {
|
||
return new Promise((resolve) => {
|
||
const img = new Image();
|
||
img.onload = () => {
|
||
const maxSize = 500;
|
||
const originalWidth = img.naturalWidth;
|
||
const originalHeight = img.naturalHeight;
|
||
let width = originalWidth;
|
||
let height = originalHeight;
|
||
|
||
if (width > maxSize || height > maxSize) {
|
||
const scale = Math.min(maxSize / width, maxSize / height);
|
||
width = Math.round(width * scale);
|
||
height = Math.round(height * scale);
|
||
}
|
||
|
||
const minSize = 150;
|
||
if (width < minSize && height < minSize) {
|
||
const scale = minSize / Math.min(width, height);
|
||
width = Math.round(width * scale);
|
||
height = Math.round(height * scale);
|
||
}
|
||
|
||
resolve({ width, height, originalWidth, originalHeight });
|
||
};
|
||
img.onerror = () => {
|
||
resolve({ width: 300, height: 300, originalWidth: 0, originalHeight: 0 });
|
||
};
|
||
img.src = url;
|
||
});
|
||
}
|
||
|
||
export function AgentGenerationWorkspaceDarkV2({
|
||
chatId,
|
||
projectId,
|
||
selectedAgentPresetId,
|
||
selectedBrandModel = null,
|
||
workflowContext = null,
|
||
onBack,
|
||
presetPanel,
|
||
materialSelectionPanel,
|
||
brandModelPanel,
|
||
onClearPreset,
|
||
siteName,
|
||
siteLogo,
|
||
siteLogoDark,
|
||
}: AgentGenerationWorkspaceDarkV2Props) {
|
||
const rawChatId = useMemo(
|
||
() => (chatId.startsWith("canvas-") ? chatId.replace("canvas-", "") : chatId),
|
||
[chatId]
|
||
);
|
||
const addNode = useCanvasStore((state) => state.addNode);
|
||
const nodes = useCanvasStore((state) => state.nodes);
|
||
const fileInputRefs = useRef<Array<HTMLInputElement | null>>([]);
|
||
const hiddenPromptRef = useRef<string | null>(null);
|
||
const generatedImageKeysRef = useRef<Set<string>>(new Set());
|
||
const lastSyncedBrandModelUrlRef = useRef<string | null>(null);
|
||
|
||
const [input, setInput] = useState("");
|
||
const [attachments, setAttachments] = useState<Array<PickedAttachment | null>>([]);
|
||
const [slotUploading, setSlotUploading] = useState<number | null>(null);
|
||
const [selectedModelId, setSelectedModelId] = useState<string>("auto");
|
||
const [selectedResultUrl, setSelectedResultUrl] = useState<string | null>(null);
|
||
const [fullscreenPreview, setFullscreenPreview] = useState<string | null>(null);
|
||
const [imageParams, setImageParams] = useState<ImageGenerationParams>({
|
||
aspectRatio: "auto",
|
||
imageSize: "2K",
|
||
imageCount: 1,
|
||
});
|
||
|
||
const { data: historyData } = useSWR<{ messages: ChatMessage[] }>(
|
||
rawChatId ? `/api/messages?chatId=${rawChatId}` : null,
|
||
fetcher
|
||
);
|
||
|
||
const { data: modelsData } = useSWR<{
|
||
models: Array<{
|
||
id: string;
|
||
displayName: string;
|
||
providerType: string;
|
||
supportsImageGen?: boolean;
|
||
isMultimodal?: boolean;
|
||
imageGenConfig?: any;
|
||
}>;
|
||
defaultModelId?: string | null;
|
||
agentModel?: any;
|
||
}>("/api/models", fetcher);
|
||
|
||
const { data: agentPresetResponse } = useSWR<{
|
||
success?: boolean;
|
||
data?: AgentPreset;
|
||
}>(selectedAgentPresetId ? `/api/agents/${selectedAgentPresetId}` : null, fetcher);
|
||
|
||
const selectedAgentPreset = useMemo(
|
||
() => (agentPresetResponse?.success && agentPresetResponse.data ? agentPresetResponse.data : null),
|
||
[agentPresetResponse]
|
||
);
|
||
|
||
const historyMessages = useMemo(() => historyData?.messages || [], [historyData?.messages]);
|
||
const referenceImages = workflowContext?.referenceImages || [];
|
||
const hasAgentUploadSlots = Boolean(selectedAgentPreset && selectedAgentPreset.type !== "text");
|
||
const agentUploadSlots = useMemo(
|
||
() =>
|
||
hasAgentUploadSlots
|
||
? [
|
||
{ slotIndex: 0, label: "产品图1" },
|
||
{ slotIndex: 1, label: "产品图2" },
|
||
{ slotIndex: 2, label: "模特图" },
|
||
]
|
||
: [],
|
||
[hasAgentUploadSlots]
|
||
);
|
||
const requiredUploadCount = hasAgentUploadSlots ? 3 : 0;
|
||
|
||
const selectableModels = useMemo(() => {
|
||
const imageModels = (modelsData?.models || []).filter(
|
||
(model) => model.supportsImageGen || model.isMultimodal
|
||
);
|
||
const autoOption = {
|
||
id: "auto",
|
||
displayName: "自动选择",
|
||
providerType: "auto",
|
||
imageGenConfig: modelsData?.agentModel?.imageGenConfig || undefined,
|
||
};
|
||
return [autoOption, ...imageModels];
|
||
}, [modelsData?.agentModel?.imageGenConfig, modelsData?.models]);
|
||
|
||
const currentModel = useMemo(
|
||
() => selectableModels.find((model) => model.id === selectedModelId) || selectableModels[0],
|
||
[selectableModels, selectedModelId]
|
||
);
|
||
const [activeToolStep, setActiveToolStep] = useState<ToolStepKey>("preset");
|
||
const hasBrandModelStep = Boolean(brandModelPanel);
|
||
const hasMaterialStep = Boolean(materialSelectionPanel);
|
||
|
||
const { messages, setMessages, sendMessage, status } = useChat<ChatMessage>({
|
||
id: chatId,
|
||
messages: historyMessages,
|
||
experimental_throttle: 100,
|
||
generateId: generateUUID,
|
||
transport: new DefaultChatTransport({
|
||
api: "/api/chat",
|
||
fetch: fetchWithErrorHandlers,
|
||
prepareSendMessagesRequest(request) {
|
||
return {
|
||
body: {
|
||
id: rawChatId,
|
||
message: request.messages.at(-1),
|
||
hiddenPrompt: hiddenPromptRef.current || undefined,
|
||
agentPresetId: selectedAgentPresetId || undefined,
|
||
selectedChatModel: selectedModelId,
|
||
selectedVisibilityType: "private",
|
||
imageParams,
|
||
},
|
||
};
|
||
},
|
||
}),
|
||
});
|
||
|
||
useEffect(() => {
|
||
if (!messages.length && historyMessages.length) {
|
||
setMessages(historyMessages);
|
||
}
|
||
}, [historyMessages, messages.length, setMessages]);
|
||
|
||
useEffect(() => {
|
||
if (selectedAgentPreset?.defaultModelId) {
|
||
setSelectedModelId(selectedAgentPreset.defaultModelId);
|
||
return;
|
||
}
|
||
if (modelsData?.defaultModelId) {
|
||
setSelectedModelId(modelsData.defaultModelId);
|
||
}
|
||
}, [modelsData?.defaultModelId, selectedAgentPreset?.defaultModelId]);
|
||
|
||
// 初始化附件
|
||
useEffect(() => {
|
||
if (!hasAgentUploadSlots) {
|
||
setAttachments([]);
|
||
return;
|
||
}
|
||
const nextSlots: Array<PickedAttachment | null> = Array.from(
|
||
{ length: agentUploadSlots.length },
|
||
() => null
|
||
);
|
||
const primaryImages = referenceImages.filter((image) => image.source === "primary");
|
||
const secondaryImages = referenceImages.filter((image) => image.source === "secondary");
|
||
const brandModelImages = referenceImages.filter((image) => image.source === "brandModel");
|
||
const toAttachment = (image: (typeof referenceImages)[number] | undefined) =>
|
||
image
|
||
? { url: image.url, name: image.name || image.label, contentType: image.mimeType || "image/png", assetId: image.assetId || undefined }
|
||
: null;
|
||
|
||
nextSlots[0] = toAttachment(primaryImages[0] || secondaryImages[0] || referenceImages[0]);
|
||
nextSlots[1] = toAttachment(secondaryImages[0] || primaryImages[1] || referenceImages[1]);
|
||
nextSlots[2] = toAttachment(brandModelImages[0]);
|
||
|
||
setAttachments((current) => {
|
||
const result: Array<PickedAttachment | null> = Array.from(
|
||
{ length: agentUploadSlots.length },
|
||
(_, index) => current[index] || null
|
||
);
|
||
for (let index = 0; index < 3; index += 1) {
|
||
if (!result[index] && nextSlots[index]) {
|
||
result[index] = nextSlots[index] as PickedAttachment;
|
||
}
|
||
}
|
||
return result;
|
||
});
|
||
}, [agentUploadSlots.length, hasAgentUploadSlots, referenceImages]);
|
||
|
||
useEffect(() => {
|
||
if (!hasAgentUploadSlots) {
|
||
lastSyncedBrandModelUrlRef.current = null;
|
||
return;
|
||
}
|
||
|
||
const nextAttachment = selectedBrandModel?.imageUrl
|
||
? {
|
||
url: selectedBrandModel.imageUrl,
|
||
name: selectedBrandModel.displayName || `${selectedBrandModel.brandName} 模特图`,
|
||
contentType: selectedBrandModel.mimeType || "image/png",
|
||
assetId: selectedBrandModel.assetId || undefined,
|
||
}
|
||
: null;
|
||
|
||
setAttachments((current) => {
|
||
const slots: Array<PickedAttachment | null> = Array.from(
|
||
{ length: Math.max(agentUploadSlots.length, 3) },
|
||
(_, index) => current[index] ?? null
|
||
);
|
||
const currentSlot = slots[2] ?? null;
|
||
const previousSyncedUrl = lastSyncedBrandModelUrlRef.current;
|
||
|
||
if (nextAttachment) {
|
||
slots[2] = nextAttachment;
|
||
} else if (previousSyncedUrl && currentSlot?.url === previousSyncedUrl) {
|
||
slots[2] = null;
|
||
}
|
||
|
||
return slots;
|
||
});
|
||
|
||
lastSyncedBrandModelUrlRef.current = nextAttachment?.url || null;
|
||
}, [
|
||
agentUploadSlots.length,
|
||
hasAgentUploadSlots,
|
||
selectedBrandModel?.assetId,
|
||
selectedBrandModel?.brandName,
|
||
selectedBrandModel?.displayName,
|
||
selectedBrandModel?.id,
|
||
selectedBrandModel?.imageUrl,
|
||
selectedBrandModel?.mimeType,
|
||
]);
|
||
|
||
const generatedGroups = useMemo<GeneratedImageGroup[]>(() => {
|
||
return messages
|
||
.filter((message) => message.role === "assistant")
|
||
.map((message) => {
|
||
const textParts = (message.parts || [])
|
||
.filter((part: any) => part.type === "text" && part.text)
|
||
.map((part: any) => String(part.text));
|
||
const imageUrls = Array.from(
|
||
new Set(textParts.flatMap((text) => extractImageUrlsFromText(text)))
|
||
);
|
||
return {
|
||
messageId: message.id,
|
||
imageUrls,
|
||
text: normalizeAssistantText(textParts.join("\n\n")),
|
||
};
|
||
})
|
||
.filter((group) => group.imageUrls.length > 0);
|
||
}, [messages]);
|
||
|
||
const allGeneratedImages = useMemo(
|
||
() => Array.from(new Set(generatedGroups.flatMap((group) => group.imageUrls))),
|
||
[generatedGroups]
|
||
);
|
||
const latestGeneratedGroup = generatedGroups[generatedGroups.length - 1] || null;
|
||
const displayedResultUrl = selectedResultUrl || latestGeneratedGroup?.imageUrls[0] || null;
|
||
const isGenerating = status === "streaming" || status === "submitted";
|
||
const attachmentCount = attachments.filter(Boolean).length;
|
||
const hasBrandModelSelection = Boolean(
|
||
selectedBrandModel?.imageUrl || referenceImages.some((image) => image.source === "brandModel")
|
||
);
|
||
const hasMaterialSelections = referenceImages.some(
|
||
(image) => image.source === "primary" || image.source === "secondary"
|
||
);
|
||
const hasSatisfiedSlotRequirement = !hasAgentUploadSlots || attachmentCount >= requiredUploadCount;
|
||
|
||
const toolSteps = useMemo(
|
||
() => [
|
||
{
|
||
key: "preset" as const,
|
||
label: "生图模式",
|
||
description: "先选择一个模式，再继续后续配置",
|
||
icon: Wand2,
|
||
disabled: false,
|
||
completed: Boolean(selectedAgentPresetId),
|
||
optional: false,
|
||
},
|
||
...(hasBrandModelStep
|
||
? [
|
||
{
|
||
key: "brand-model" as const,
|
||
label: "品牌模特",
|
||
description: "根据品牌选择模特图",
|
||
icon: UserRound,
|
||
disabled: !selectedAgentPresetId,
|
||
completed: hasBrandModelSelection,
|
||
optional: true,
|
||
},
|
||
]
|
||
: []),
|
||
...(hasMaterialStep
|
||
? [
|
||
{
|
||
key: "materials" as const,
|
||
label: "SKU / SPU 选图",
|
||
description: "搜索主图和搭配图",
|
||
icon: Upload,
|
||
disabled: !selectedAgentPresetId,
|
||
completed: hasMaterialSelections,
|
||
optional: true,
|
||
},
|
||
]
|
||
: []),
|
||
{
|
||
key: "slots" as const,
|
||
label: "图片槽位",
|
||
description: "检查和补齐参考图槽位",
|
||
icon: ImagePlus,
|
||
disabled: !selectedAgentPresetId,
|
||
completed: hasSatisfiedSlotRequirement,
|
||
optional: false,
|
||
},
|
||
{
|
||
key: "prompt" as const,
|
||
label: "补充要求",
|
||
description: "补充风格、构图和细节要求",
|
||
icon: Sparkles,
|
||
disabled: !selectedAgentPresetId,
|
||
completed: Boolean(input.trim()),
|
||
optional: true,
|
||
},
|
||
{
|
||
key: "settings" as const,
|
||
label: "生成参数",
|
||
description: "选择模型并开始生成",
|
||
icon: Settings2,
|
||
disabled: !selectedAgentPresetId,
|
||
completed: Boolean(selectedAgentPresetId),
|
||
optional: false,
|
||
},
|
||
],
|
||
[
|
||
hasBrandModelSelection,
|
||
hasBrandModelStep,
|
||
hasMaterialSelections,
|
||
hasMaterialStep,
|
||
hasSatisfiedSlotRequirement,
|
||
input,
|
||
selectedAgentPresetId,
|
||
]
|
||
);
|
||
const activeToolStepIndex = Math.max(
|
||
toolSteps.findIndex((step) => step.key === activeToolStep),
|
||
0
|
||
);
|
||
const activeToolStepMeta = toolSteps[activeToolStepIndex] || toolSteps[0];
|
||
const previousToolStep = activeToolStepIndex > 0 ? toolSteps[activeToolStepIndex - 1] : null;
|
||
const nextToolStep =
|
||
activeToolStepIndex < toolSteps.length - 1 ? toolSteps[activeToolStepIndex + 1] : null;
|
||
|
||
useEffect(() => {
|
||
if (!selectedResultUrl && latestGeneratedGroup?.imageUrls[0]) {
|
||
setSelectedResultUrl(latestGeneratedGroup.imageUrls[0]);
|
||
}
|
||
}, [latestGeneratedGroup?.imageUrls, selectedResultUrl]);
|
||
|
||
useEffect(() => {
|
||
if (!selectedAgentPresetId) {
|
||
setActiveToolStep("preset");
|
||
return;
|
||
}
|
||
|
||
setActiveToolStep((current) => {
|
||
if (current !== "preset") return current;
|
||
if (hasBrandModelStep) return "brand-model";
|
||
if (hasMaterialStep) return "materials";
|
||
return "slots";
|
||
});
|
||
}, [hasBrandModelStep, hasMaterialStep, selectedAgentPresetId]);
|
||
|
||
useEffect(() => {
|
||
if (!toolSteps.some((step) => step.key === activeToolStep)) {
|
||
setActiveToolStep("preset");
|
||
}
|
||
}, [activeToolStep, toolSteps]);
|
||
|
||
useEffect(() => {
|
||
const latestUrls = latestGeneratedGroup?.imageUrls || [];
|
||
if (latestUrls.length === 0) return;
|
||
|
||
latestUrls.forEach(async (url, index) => {
|
||
if (!url || generatedImageKeysRef.current.has(url)) return;
|
||
generatedImageKeysRef.current.add(url);
|
||
|
||
try {
|
||
const dimensions = await getImageDimensions(url);
|
||
const nodeIndex = nodes.length + index;
|
||
const spacing = 20;
|
||
const x = 120 + (nodeIndex % 3) * (dimensions.width + spacing);
|
||
const y = 120 + Math.floor(nodeIndex / 3) * (dimensions.height + spacing);
|
||
|
||
addNode({
|
||
type: "image",
|
||
position: { x, y },
|
||
size: { width: dimensions.width, height: dimensions.height },
|
||
data: {
|
||
src: url,
|
||
status: "completed",
|
||
title: "生成结果",
|
||
prompt: latestGeneratedGroup.text || "生成结果",
|
||
metadata: {
|
||
originalWidth: dimensions.originalWidth,
|
||
originalHeight: dimensions.originalHeight,
|
||
},
|
||
},
|
||
connections: [],
|
||
});
|
||
} catch (error) {
|
||
console.warn("[AgentGenerationWorkspaceDarkV2] Failed to add generated image to canvas:", error);
|
||
}
|
||
});
|
||
}, [addNode, latestGeneratedGroup, nodes.length]);
|
||
|
||
const updateAttachmentAtSlot = useCallback((slotIndex: number, attachment: PickedAttachment | null) => {
|
||
const slotCount = Math.max(agentUploadSlots.length, 1);
|
||
setAttachments((current) => {
|
||
const slots: Array<PickedAttachment | null> = Array.from(
|
||
{ length: slotCount },
|
||
(_, index) => current[index] ?? null
|
||
);
|
||
slots[slotIndex] = attachment;
|
||
return slots;
|
||
});
|
||
}, [agentUploadSlots.length]);
|
||
|
||
const handleSlotFileChange = useCallback(
|
||
async (slotIndex: number, event: React.ChangeEvent<HTMLInputElement>) => {
|
||
const file = event.target.files?.[0];
|
||
if (!file) return;
|
||
if (!file.type.startsWith("image/")) {
|
||
toast.error("请上传图片文件");
|
||
event.currentTarget.value = "";
|
||
return;
|
||
}
|
||
setSlotUploading(slotIndex);
|
||
try {
|
||
const formData = new FormData();
|
||
formData.append("file", file);
|
||
const response = await fetchUploadWithRetry(formData);
|
||
const data = await response.json();
|
||
if (!response.ok || !data?.url) {
|
||
throw new Error(data?.error || "上传失败");
|
||
}
|
||
updateAttachmentAtSlot(slotIndex, {
|
||
url: data.url,
|
||
name: file.name,
|
||
contentType: file.type || "image/jpeg",
|
||
assetId: typeof data.assetId === "string" ? data.assetId : undefined,
|
||
});
|
||
toast.success(`${agentUploadSlots[slotIndex]?.label || `槽位${slotIndex + 1}`}上传成功`);
|
||
} catch (error) {
|
||
toast.error(error instanceof Error ? error.message : "上传失败");
|
||
} finally {
|
||
setSlotUploading(null);
|
||
event.currentTarget.value = "";
|
||
}
|
||
},
|
||
[agentUploadSlots, updateAttachmentAtSlot]
|
||
);
|
||
|
||
const handleSend = useCallback(() => {
|
||
if (!selectedAgentPresetId) {
|
||
toast.error("请先选择生图模式");
|
||
return;
|
||
}
|
||
const uploadedAttachmentCount = attachments.filter(Boolean).length;
|
||
if (hasAgentUploadSlots && uploadedAttachmentCount < requiredUploadCount) {
|
||
toast.error(`当前模式需要上传 ${requiredUploadCount} 张图片`);
|
||
return;
|
||
}
|
||
const parts: Array<{ type: "text"; text: string } | { type: "file"; mediaType: string; name: string; url: string; assetId?: string }> = [];
|
||
attachments.forEach((attachment) => {
|
||
if (!attachment) return;
|
||
parts.push({ type: "file", mediaType: attachment.contentType || "image/jpeg", name: attachment.name || "参考图", url: attachment.url, assetId: attachment.assetId });
|
||
});
|
||
let textContent = input.trim();
|
||
if (!textContent && selectedAgentPreset?.type === "text" && workflowContext?.summaryText) {
|
||
textContent = `请基于当前工作流设定生成方案：${workflowContext.summaryText}`;
|
||
}
|
||
if (!textContent && selectedAgentPreset?.type === "text" && selectedAgentPreset) {
|
||
textContent = `请按「${selectedAgentPreset.name}」输出内容`;
|
||
}
|
||
if (textContent) {
|
||
parts.push({ type: "text", text: textContent });
|
||
}
|
||
if (parts.length === 0) {
|
||
toast.error("请至少补充要求或上传图片");
|
||
return;
|
||
}
|
||
hiddenPromptRef.current = workflowContext?.promptText
|
||
? `【工作流设定】\n${workflowContext.promptText}\n\n请严格遵循以上工作流设定输出内容，并保持整体结果一致。`
|
||
: null;
|
||
sendMessage({ role: "user", parts });
|
||
setInput("");
|
||
}, [attachments, hasAgentUploadSlots, input, requiredUploadCount, selectedAgentPreset, selectedAgentPresetId, sendMessage, workflowContext?.promptText, workflowContext?.summaryText]);
|
||
|
||
const handleDownloadOriginalImage = useCallback(async (imageUrl: string) => {
|
||
const raw = String(imageUrl || "").trim();
|
||
if (!raw) {
|
||
toast.error("图片地址无效");
|
||
return;
|
||
}
|
||
|
||
const filename = buildDownloadFilename(raw);
|
||
try {
|
||
const response = await fetch(raw);
|
||
if (!response.ok) {
|
||
throw new Error(`download failed: ${response.status}`);
|
||
}
|
||
const blob = await response.blob();
|
||
const blobUrl = window.URL.createObjectURL(blob);
|
||
const link = document.createElement("a");
|
||
link.href = blobUrl;
|
||
link.download = filename;
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
document.body.removeChild(link);
|
||
window.URL.revokeObjectURL(blobUrl);
|
||
} catch {
|
||
const link = document.createElement("a");
|
||
link.href = raw;
|
||
link.target = "_blank";
|
||
link.rel = "noopener noreferrer";
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
document.body.removeChild(link);
|
||
toast.message("已打开原图，可右键另存为");
|
||
}
|
||
}, []);
|
||
|
||
const handleToolStepChange = useCallback(
|
||
(nextKey: ToolStepKey) => {
|
||
const nextStep = toolSteps.find((step) => step.key === nextKey);
|
||
if (!nextStep) return;
|
||
if (nextStep.disabled) {
|
||
toast.error("请先选择生图模式");
|
||
return;
|
||
}
|
||
setActiveToolStep(nextKey);
|
||
},
|
||
[toolSteps]
|
||
);
|
||
|
||
return (
|
||
<div className="flex h-dvh flex-col overflow-hidden bg-black">
|
||
<AgentCanvasTopNavDark
|
||
siteName={siteName}
|
||
siteLogo={siteLogo}
|
||
siteLogoDark={siteLogoDark}
|
||
onBack={onBack}
|
||
activeKey="agent"
|
||
rightSlot={<div className="w-10" />}
|
||
/>
|
||
|
||
{/* Main Content */}
|
||
<main className="flex-1 overflow-y-auto overscroll-contain pt-16">
|
||
<div className="mx-auto flex w-full max-w-[1480px] flex-col gap-6 px-6 py-6 pb-24 lg:px-8 xl:px-10">
|
||
<motion.section
|
||
initial={{ opacity: 0, y: 18 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
className="rounded-[26px] border border-white/12 bg-white/[0.04] px-4 py-2.5 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)] lg:px-5"
|
||
>
|
||
<div className="flex flex-col gap-2 xl:flex-row xl:items-center xl:justify-between">
|
||
<div className="min-w-0">
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<span className="rounded-full border border-white/10 bg-white/[0.03] px-2.5 py-1 text-[10px] uppercase tracking-[0.22em] text-white/40">
|
||
Step Flow
|
||
</span>
|
||
<h2 className="text-[15px] font-semibold leading-none text-white lg:text-[18px]">
|
||
第二步：生图模式执行流程
|
||
</h2>
|
||
</div>
|
||
</div>
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<div className="rounded-full border border-white/10 bg-white/[0.03] px-3 py-1 text-[11px] text-white/58">
|
||
第一步：风格选择
|
||
<span className="mx-1.5 text-white/22">→</span>
|
||
<span className="font-medium text-emerald-300">第二步：生图模式</span>
|
||
</div>
|
||
<div className="rounded-full border border-white/10 bg-white/[0.03] px-3 py-1 text-[11px] text-white/58">
|
||
当前步骤 {activeToolStepIndex + 1} / {toolSteps.length}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="agent-dark-scrollbar mt-2 overflow-x-auto pb-0.5">
|
||
<div className="flex min-w-max items-center gap-2">
|
||
{toolSteps.map((step, index) => {
|
||
const Icon = step.icon;
|
||
const isActive = activeToolStep === step.key;
|
||
return (
|
||
<Fragment key={step.key}>
|
||
<button
|
||
type="button"
|
||
onClick={() => handleToolStepChange(step.key)}
|
||
disabled={step.disabled}
|
||
className={cn(
|
||
"flex h-[58px] min-w-[148px] items-center gap-2 rounded-[20px] border px-2.5 py-2 text-left transition-all lg:min-w-[158px]",
|
||
isActive
|
||
? "border-emerald-400/55 bg-emerald-500/[0.10] shadow-[0_0_0_1px_rgba(16,185,129,0.2)]"
|
||
: step.completed
|
||
? "border-emerald-400/30 bg-white/[0.03] hover:border-emerald-400/45"
|
||
: "border-white/10 bg-black/20 hover:border-white/20",
|
||
step.disabled && "cursor-not-allowed opacity-45 hover:border-white/10"
|
||
)}
|
||
>
|
||
<div
|
||
className={cn(
|
||
"flex h-8 w-8 shrink-0 items-center justify-center rounded-[14px] border",
|
||
isActive
|
||
? "border-emerald-300/60 bg-emerald-400/20 text-emerald-200"
|
||
: step.completed
|
||
? "border-emerald-400/35 bg-emerald-500/10 text-emerald-300"
|
||
: "border-white/12 bg-white/[0.03] text-white/55"
|
||
)}
|
||
>
|
||
<Icon className="h-[18px] w-[18px]" />
|
||
</div>
|
||
<div className="min-w-0 flex-1">
|
||
<div className="flex items-center gap-1.5">
|
||
<span className="truncate text-sm font-medium leading-none text-white">
|
||
{step.label}
|
||
</span>
|
||
{step.optional ? (
|
||
<span className="rounded-full bg-white/8 px-1.5 py-0.5 text-[9px] font-normal leading-none text-white/45">
|
||
可选
|
||
</span>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
</button>
|
||
{index < toolSteps.length - 1 ? (
|
||
<div
|
||
className={cn(
|
||
"h-px w-4 shrink-0 rounded-full lg:w-5",
|
||
step.completed ? "bg-emerald-400/45" : "bg-white/10"
|
||
)}
|
||
/>
|
||
) : null}
|
||
</Fragment>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</motion.section>
|
||
|
||
<motion.section
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: 0.06 }}
|
||
className="rounded-[28px] border border-white/12 bg-white/[0.04] p-5 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]"
|
||
>
|
||
<div className="flex flex-col gap-4 border-b border-white/10 pb-4 lg:flex-row lg:items-start lg:justify-between">
|
||
<div className="space-y-1">
|
||
<div className="text-xs uppercase tracking-[0.2em] text-white/35">Current Module</div>
|
||
<h3 className="text-lg font-semibold text-white">{activeToolStepMeta.label}</h3>
|
||
<p className="text-sm text-white/45">{activeToolStepMeta.description}</p>
|
||
</div>
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
{selectedAgentPreset ? (
|
||
<div className="flex items-center gap-3 rounded-[20px] border border-white/10 bg-black/20 px-3 py-2">
|
||
{selectedAgentPreset.avatarUrl ? (
|
||
<img
|
||
src={selectedAgentPreset.avatarUrl}
|
||
alt={selectedAgentPreset.name}
|
||
className="h-10 w-10 rounded-xl object-cover"
|
||
/>
|
||
) : (
|
||
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-500/18">
|
||
<Wand2 className="h-5 w-5 text-emerald-300" />
|
||
</div>
|
||
)}
|
||
<div>
|
||
<div className="text-sm font-medium text-white">{selectedAgentPreset.name}</div>
|
||
<div className="text-xs text-white/40">
|
||
{selectedAgentPreset.type === "image" ? "生图模式" : "视频模式"}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
{selectedAgentPreset && onClearPreset ? (
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
onClearPreset();
|
||
setActiveToolStep("preset");
|
||
}}
|
||
className="rounded-full border border-white/10 bg-white/[0.03] px-3 py-2 text-xs text-emerald-300 transition-colors hover:border-emerald-300/35 hover:text-emerald-200"
|
||
>
|
||
更换生图模式
|
||
</button>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-5 min-h-[260px]">
|
||
<div className={cn(activeToolStep === "preset" ? "block" : "hidden")}>
|
||
{presetPanel ? (
|
||
<div className="agent-dark-scrollbar max-h-[520px] overflow-y-auto pr-1">
|
||
{presetPanel}
|
||
</div>
|
||
) : (
|
||
<div className="flex min-h-[220px] items-center justify-center rounded-[24px] border border-dashed border-white/12 bg-black/20 text-sm text-white/45">
|
||
暂无可用的生图模式配置。
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{hasBrandModelStep ? (
|
||
<div className={cn(activeToolStep === "brand-model" ? "block" : "hidden")}>
|
||
{brandModelPanel}
|
||
</div>
|
||
) : null}
|
||
|
||
{hasMaterialStep ? (
|
||
<div className={cn(activeToolStep === "materials" ? "block" : "hidden")}>
|
||
{materialSelectionPanel}
|
||
</div>
|
||
) : null}
|
||
|
||
<div className={cn(activeToolStep === "slots" ? "block" : "hidden")}>
|
||
<div className="rounded-[28px] border border-white/12 bg-white/[0.02] p-4">
|
||
<h3 className="mb-3 flex items-center gap-2 text-sm font-semibold text-white">
|
||
<ImagePlus className="h-4 w-4 text-emerald-300" />
|
||
图片槽位
|
||
</h3>
|
||
{agentUploadSlots.length > 0 ? (
|
||
<div className="grid grid-cols-1 gap-3 md:grid-cols-3">
|
||
{agentUploadSlots.map((slot, index) => (
|
||
<motion.button
|
||
key={slot.label}
|
||
type="button"
|
||
onClick={() => fileInputRefs.current[index]?.click()}
|
||
whileHover={{ scale: 1.02 }}
|
||
whileTap={{ scale: 0.98 }}
|
||
className={cn(
|
||
"group relative aspect-square overflow-hidden rounded-[24px] transition-all",
|
||
attachments[index]
|
||
? "ring-2 ring-emerald-400/45"
|
||
: "border-2 border-dashed border-white/15 bg-black/25 hover:border-emerald-400/35"
|
||
)}
|
||
>
|
||
<input
|
||
ref={(el) => {
|
||
fileInputRefs.current[index] = el;
|
||
}}
|
||
type="file"
|
||
accept="image/*"
|
||
className="hidden"
|
||
onChange={(e) => handleSlotFileChange(index, e)}
|
||
/>
|
||
{attachments[index] ? (
|
||
<>
|
||
<img
|
||
src={buildPreviewImageUrl(attachments[index]!.url, 256)}
|
||
alt={attachments[index]!.name || slot.label}
|
||
className="h-full w-full object-cover"
|
||
/>
|
||
<div className="absolute inset-x-0 bottom-0 bg-black/60 px-2 py-1 text-[10px] text-white">
|
||
{slot.label}
|
||
</div>
|
||
<button
|
||
type="button"
|
||
className="absolute right-1 top-1 flex h-5 w-5 items-center justify-center rounded-full bg-white/20 text-white opacity-0 transition-opacity group-hover:opacity-100"
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
updateAttachmentAtSlot(index, null);
|
||
}}
|
||
>
|
||
<X className="h-3 w-3" />
|
||
</button>
|
||
</>
|
||
) : (
|
||
<div className="flex h-full flex-col items-center justify-center gap-1 text-white/30">
|
||
{slotUploading === index ? (
|
||
<Loader2 className="h-5 w-5 animate-spin text-emerald-400" />
|
||
) : (
|
||
<>
|
||
<Upload className="h-5 w-5" />
|
||
<span className="text-[10px]">{slot.label}</span>
|
||
</>
|
||
)}
|
||
</div>
|
||
)}
|
||
</motion.button>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<div className="flex min-h-[132px] flex-col items-center justify-center rounded-[24px] border border-dashed border-white/12 bg-black/20 px-4 text-center text-sm text-white/45">
|
||
<ImagePlus className="mb-2 h-5 w-5 opacity-60" />
|
||
先选择一个生图模式，系统会自动展示产品图1、产品图2和模特图槽位。
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className={cn(activeToolStep === "prompt" ? "block" : "hidden")}>
|
||
<div className="rounded-[28px] border border-white/12 bg-white/[0.02] p-4">
|
||
<h3 className="mb-3 flex items-center gap-2 text-sm font-semibold text-white">
|
||
<Sparkles className="h-4 w-4 text-emerald-300" />
|
||
补充要求
|
||
</h3>
|
||
<Textarea
|
||
value={input}
|
||
onChange={(e) => setInput(e.target.value)}
|
||
placeholder="描述你想要的风格、氛围、构图..."
|
||
className="min-h-[160px] resize-none rounded-[24px] border-white/12 bg-black text-sm text-white placeholder:text-white/20 focus:border-emerald-400/30"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className={cn(activeToolStep === "settings" ? "block" : "hidden")}>
|
||
<div className="rounded-[28px] border border-white/12 bg-white/[0.02] p-4">
|
||
<h3 className="mb-3 flex items-center gap-2 text-sm font-semibold text-white">
|
||
<Settings2 className="h-4 w-4 text-emerald-300" />
|
||
生成参数
|
||
</h3>
|
||
<div className="space-y-3">
|
||
<Select value={selectedModelId} onValueChange={setSelectedModelId}>
|
||
<SelectTrigger className="h-10 rounded-[24px] border-white/12 bg-black text-white">
|
||
<SelectValue placeholder="选择模型" />
|
||
</SelectTrigger>
|
||
<SelectContent className="border-white/10 bg-zinc-900">
|
||
{selectableModels.map((model) => (
|
||
<SelectItem key={model.id} value={model.id} className="text-white">
|
||
{model.displayName}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
|
||
<ImageParamsBar
|
||
modelName={currentModel?.displayName}
|
||
initialParams={imageParams}
|
||
onParamsChange={setImageParams}
|
||
inline
|
||
inlineTheme="dark"
|
||
showInlineDivider={false}
|
||
providerType={currentModel?.providerType}
|
||
imageGenConfig={currentModel?.imageGenConfig || undefined}
|
||
/>
|
||
|
||
<Button
|
||
onClick={handleSend}
|
||
disabled={isGenerating || !selectedAgentPresetId}
|
||
className={cn(
|
||
"h-11 w-full gap-2 rounded-[24px]",
|
||
"bg-gradient-to-r from-emerald-500 to-teal-500",
|
||
"text-white font-medium",
|
||
"hover:from-emerald-400 hover:to-teal-400",
|
||
"shadow-[0_0_24px_rgba(16,185,129,0.24)]",
|
||
"disabled:opacity-30"
|
||
)}
|
||
>
|
||
{isGenerating ? (
|
||
<>
|
||
<Loader2 className="h-4 w-4 animate-spin" />
|
||
生成中...
|
||
</>
|
||
) : (
|
||
<>
|
||
<ArrowUp className="h-4 w-4" />
|
||
开始生成
|
||
</>
|
||
)}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-5 flex flex-wrap items-center justify-between gap-3 border-t border-white/10 pt-4">
|
||
<div className="text-xs text-white/40">
|
||
完成当前模块后，可点击下一步继续，也可以直接点击顶部流程线跳转。
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<button
|
||
type="button"
|
||
onClick={() => previousToolStep && handleToolStepChange(previousToolStep.key)}
|
||
disabled={!previousToolStep}
|
||
className={cn(
|
||
"rounded-full border px-4 py-2 text-sm transition-colors",
|
||
previousToolStep
|
||
? "border-white/12 bg-white/[0.03] text-white hover:border-white/20 hover:bg-white/[0.06]"
|
||
: "cursor-not-allowed border-white/8 bg-white/[0.02] text-white/25"
|
||
)}
|
||
>
|
||
上一步
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => nextToolStep && handleToolStepChange(nextToolStep.key)}
|
||
disabled={!nextToolStep}
|
||
className={cn(
|
||
"rounded-full border px-4 py-2 text-sm transition-colors",
|
||
nextToolStep
|
||
? "border-emerald-400/35 bg-emerald-500/[0.08] text-emerald-200 hover:border-emerald-300/50 hover:bg-emerald-500/[0.12]"
|
||
: "cursor-not-allowed border-white/8 bg-white/[0.02] text-white/25"
|
||
)}
|
||
>
|
||
下一步
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</motion.section>
|
||
|
||
<motion.section
|
||
className="relative flex min-h-[620px] flex-col overflow-hidden rounded-[28px] border border-white/12 bg-white/[0.04] shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]"
|
||
initial={{ opacity: 0, scale: 0.98 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{ delay: 0.12 }}
|
||
>
|
||
<div className="flex items-center justify-between border-b border-white/12 px-5 py-4">
|
||
<div>
|
||
<div className="text-sm font-semibold text-white">结果预览</div>
|
||
<div className="text-xs text-white/40">
|
||
生成完成后会同步回到画布，并在这里保留预览与切换。
|
||
</div>
|
||
</div>
|
||
{allGeneratedImages.length > 0 ? (
|
||
<div className="rounded-full bg-white/8 px-3 py-1 text-xs text-white/60">
|
||
共 {allGeneratedImages.length} 张
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
|
||
<AnimatePresence mode="wait">
|
||
{isGenerating ? (
|
||
<motion.div
|
||
key="loading"
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
exit={{ opacity: 0 }}
|
||
className="flex flex-1 items-center justify-center"
|
||
>
|
||
<ImageGenerationLoading
|
||
imageCount={imageParams.imageCount || 1}
|
||
maxImages={6}
|
||
providerType={currentModel?.providerType}
|
||
modelName={currentModel?.displayName}
|
||
phase="processing"
|
||
/>
|
||
</motion.div>
|
||
) : displayedResultUrl ? (
|
||
<motion.div
|
||
key="result"
|
||
initial={{ opacity: 0, scale: 0.95 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
exit={{ opacity: 0, scale: 0.95 }}
|
||
className="relative flex flex-1 items-center justify-center p-6"
|
||
>
|
||
<img
|
||
src={buildPreviewImageUrl(displayedResultUrl, 1400)}
|
||
alt="生成结果"
|
||
className="max-h-full max-w-full cursor-zoom-in rounded-[24px] object-contain"
|
||
onClick={() => setFullscreenPreview(displayedResultUrl)}
|
||
/>
|
||
<button
|
||
onClick={() => {
|
||
void handleDownloadOriginalImage(displayedResultUrl);
|
||
}}
|
||
className="absolute bottom-6 right-6 flex h-10 items-center gap-2 rounded-full bg-white/10 px-4 text-sm text-white backdrop-blur-md transition-colors hover:bg-white/20"
|
||
>
|
||
<Download className="h-4 w-4" />
|
||
下载
|
||
</button>
|
||
</motion.div>
|
||
) : (
|
||
<motion.div
|
||
key="empty"
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
exit={{ opacity: 0 }}
|
||
className="flex flex-1 flex-col items-center justify-center px-6 text-center"
|
||
>
|
||
<div className="mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-white/5">
|
||
<Wand2 className="h-8 w-8 text-white/20" />
|
||
</div>
|
||
<p className="text-base font-medium text-white/60">
|
||
{selectedAgentPresetId ? "准备开始生成" : "请选择生图模式"}
|
||
</p>
|
||
<p className="mt-2 text-sm text-white/30">
|
||
{selectedAgentPresetId
|
||
? "顶部流程线配置完成后，切到“生成参数”即可开始生成"
|
||
: "请先从顶部流程线选择一个生图模式"}
|
||
</p>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
|
||
{allGeneratedImages.length > 0 ? (
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 12 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
className="border-t border-white/12 bg-black/20 px-4 py-3"
|
||
>
|
||
<div className="flex gap-2 overflow-x-auto pb-1">
|
||
{allGeneratedImages.map((url) => (
|
||
<button
|
||
key={url}
|
||
onClick={() => setSelectedResultUrl(url)}
|
||
className={cn(
|
||
"relative flex-shrink-0 overflow-hidden rounded-[24px] transition-all",
|
||
displayedResultUrl === url
|
||
? "ring-2 ring-emerald-400"
|
||
: "ring-1 ring-white/12 hover:ring-white/30"
|
||
)}
|
||
>
|
||
<img
|
||
src={buildPreviewImageUrl(url, 240)}
|
||
alt="缩略图"
|
||
className="h-20 w-20 object-cover"
|
||
/>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</motion.div>
|
||
) : null}
|
||
</motion.section>
|
||
</div>
|
||
</main>
|
||
|
||
{/* Fullscreen Preview */}
|
||
<AnimatePresence>
|
||
{fullscreenPreview && (
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
exit={{ opacity: 0 }}
|
||
className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/95 backdrop-blur-sm"
|
||
onClick={() => setFullscreenPreview(null)}
|
||
>
|
||
<img
|
||
src={fullscreenPreview}
|
||
alt="预览"
|
||
className="max-h-[95vh] max-w-[95vw] object-contain"
|
||
onClick={(e) => e.stopPropagation()}
|
||
/>
|
||
<button
|
||
onClick={() => setFullscreenPreview(null)}
|
||
className="absolute right-6 top-6 flex h-12 w-12 items-center justify-center rounded-full bg-white/10 text-white backdrop-blur-md transition-colors hover:bg-white/20"
|
||
>
|
||
<X className="h-6 w-6" />
|
||
</button>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
</div>
|
||
);
|
||
}
|