diff --git a/components/scene-fusion-dialog.tsx b/components/scene-fusion-dialog.tsx
index 38636f733..b8c87addb 100644
--- a/components/scene-fusion-dialog.tsx
+++ b/components/scene-fusion-dialog.tsx
@@ -27,7 +27,6 @@ export function SceneFusionDialog({ open, onOpenChange, onBatchAddToCanvas }: Sc
onOpenChange(false)}
onBatchAddToCanvas={onBatchAddToCanvas}
/>
diff --git a/components/scene-fusion-view.tsx b/components/scene-fusion-view.tsx
index 2867649d5..cc1ab7e2f 100644
--- a/components/scene-fusion-view.tsx
+++ b/components/scene-fusion-view.tsx
@@ -14,6 +14,7 @@ import {
Upload,
Wand2,
Eraser,
+ X,
} from "lucide-react";
import { toast } from "sonner";
import { requestLongTaskResult } from "@/lib/client/long-task";
@@ -22,7 +23,7 @@ import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { ScrollArea } from "@/components/ui/scroll-area";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Select, SelectContent, SelectItem, SelectTrigger } from "@/components/ui/select";
const fetcher = (url: string) => fetch(url).then((res) => res.json());
const MAX_BATCH_ITEMS = 10;
@@ -47,7 +48,6 @@ interface ProcessItem {
}
interface SceneFusionViewProps {
- onBack: () => void;
initialProductImage?: string | null;
initialProductName?: string;
onBatchAddToCanvas?: (imageUrls: string[]) => void | Promise
;
@@ -121,7 +121,6 @@ function getModePrompt(mode: BatchMode) {
}
export function SceneFusionView({
- onBack,
initialProductImage,
initialProductName,
onBatchAddToCanvas,
@@ -154,6 +153,8 @@ export function SceneFusionView({
const [randomPrompt, setRandomPrompt] = useState("");
const [batchItems, setBatchItems] = useState([]);
+ const [previewImageUrl, setPreviewImageUrl] = useState(null);
+ const [previewImageTitle, setPreviewImageTitle] = useState("处理结果预览");
const productInputRef = useRef(null);
const sceneInputRef = useRef(null);
@@ -1137,19 +1138,23 @@ export function SceneFusionView({
}
};
+ const openResultPreview = (imageUrl: string, title: string) => {
+ setPreviewImageUrl(imageUrl);
+ setPreviewImageTitle(title);
+ };
+
+ const closeResultPreview = () => {
+ setPreviewImageUrl(null);
+ };
+
return (
-
-
-
-
- 批量处理
-
-
+
@@ -1159,22 +1164,21 @@ export function SceneFusionView({
- {selectedModeOption && (
-
-
{selectedModeOption.label}
-
{selectedModeOption.description}
-
- )}
单次处理硬限制:最多 {MAX_BATCH_ITEMS} 张图片。
@@ -1591,7 +1595,12 @@ export function SceneFusionView({
-
-
+
处理结果
{(completedResultItems.length > 0 || (resultAllFinished && onBatchAddToCanvas)) && (
@@ -1661,7 +1670,28 @@ export function SceneFusionView({
-
+
{
+ const previewUrl = item.originalUrl || item.result;
+ if (item.status === "completed" && previewUrl) {
+ openResultPreview(previewUrl, `任务 ${index + 1} 预览`);
+ }
+ }}
+ onKeyDown={(event) => {
+ if (event.key !== "Enter" && event.key !== " ") return;
+ const previewUrl = item.originalUrl || item.result;
+ if (item.status === "completed" && previewUrl) {
+ event.preventDefault();
+ openResultPreview(previewUrl, `任务 ${index + 1} 预览`);
+ }
+ }}
+ role="button"
+ tabIndex={item.status === "completed" && (item.result || item.originalUrl) ? 0 : -1}
+ >
{item.result ? (

) : (
@@ -1691,11 +1721,21 @@ export function SceneFusionView({
downloadImage(item.originalUrl || item.result!, `batch-${index + 1}.png`)}
+ onClick={(event) => {
+ event.stopPropagation();
+ downloadImage(item.originalUrl || item.result!, `batch-${index + 1}.png`);
+ }}
>
-
retrySingleItem(item)}>
+ {
+ event.stopPropagation();
+ retrySingleItem(item);
+ }}
+ >
@@ -1709,6 +1749,31 @@ export function SceneFusionView({
+ {previewImageUrl && (
+
+
event.stopPropagation()}
+ >
+
+ {previewImageTitle}
+
+
+
+
+
+

+
+
+
+ )}
);
}