lunanting/ai-chatbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: show regenerating state for style batch results

Browse Source
This commit is contained in:
Your Name 2026-06-02 11:43:44 +08:00
parent caf9eb7290
commit f69e2d07a2
1 changed files with 76 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
components/scene-fusion-view.tsx
View File

@ -119,6 +119,20 @@ interface ProcessItem {
};
}
function markProcessItemRegenerating(
item: ProcessItem,
status: Extract<ItemStatus, "pending" | "processing">
): ProcessItem {
return {
...item,
status,
result: undefined,
originalUrl: undefined,
queueStatus: undefined,
error: undefined,
};
}
interface SceneFusionViewProps {
initialProductImage?: string | null;
initialProductName?: string;
@ -1081,11 +1095,12 @@ export function SceneFusionView({
setBatchItems((prev) =>
prev.map((item) =>
ids.includes(item.id)
? {
...item,
status,
error: status === "processing" ? undefined : item.error,
}
? status === "pending" || status === "processing"
? markProcessItemRegenerating(item, status)
: {
...item,
status,
}
: item
)
);
@ -1099,11 +1114,12 @@ export function SceneFusionView({
setter((prev) =>
prev.map((item) =>
ids.includes(item.id)
? {
...item,
status,
error: status === "processing" ? undefined : item.error,
}
? status === "pending" || status === "processing"
? markProcessItemRegenerating(item, status)
: {
...item,
status,
}
: item
)
);
@ -1217,12 +1233,17 @@ export function SceneFusionView({
setter((prev) =>
prev.map((item) =>
item.id === data.id
? {
...item,
status: data.status,
queueStatus: data.queueStatus || undefined,
error: data.status === "failed" ? item.error : undefined,
}
? data.status === "pending" || data.status === "processing"
? {
...markProcessItemRegenerating(item, data.status),
queueStatus: data.queueStatus || undefined,
}
: {
...item,
status: data.status,
queueStatus: data.queueStatus || undefined,
error: data.status === "failed" ? item.error : undefined,
}
: item
)
);
@ -1454,12 +1475,21 @@ export function SceneFusionView({
setMultiProductItems((prev) =>
prev.map((item) =>
item.id === params.itemId
? {
...item,
status: msg.data?.status || item.status,
queueStatus: msg.data?.queueStatus || undefined,
error: undefined,
}
? msg.data?.status === "pending" ||
msg.data?.status === "processing"
? {
...markProcessItemRegenerating(
item,
msg.data.status
),
queueStatus: msg.data.queueStatus || undefined,
}
: {
...item,
status: msg.data?.status || item.status,
queueStatus: msg.data?.queueStatus || undefined,
error: undefined,
}
: item
)
);
@ -1556,7 +1586,7 @@ export function SceneFusionView({
setMultiProductItems((prev) =>
prev.map((item) =>
itemsToProcess.some((target) => target.id === item.id)
? { ...item, status: "pending", queueStatus: undefined, error: undefined }
? markProcessItemRegenerating(item, "pending")
: item
)
);
@ -1577,7 +1607,7 @@ export function SceneFusionView({
setMultiProductItems((prev) =>
prev.map((item) =>
item.id === current.id
? { ...item, status: "processing", error: undefined }
? markProcessItemRegenerating(item, "processing")
: item
)
);
@ -1743,7 +1773,7 @@ export function SceneFusionView({
setBatchItems((prev) =>
prev.map((item) =>
itemsToProcess.some((target) => target.id === item.id)
? { ...item, status: "pending", error: undefined }
? markProcessItemRegenerating(item, "pending")
: item
)
);
@ -1763,7 +1793,7 @@ export function SceneFusionView({
setBatchItems((prev) =>
prev.map((item) =>
item.id === current.id
? { ...item, status: "processing", error: undefined }
? markProcessItemRegenerating(item, "processing")
: item
)
);
@ -1825,7 +1855,7 @@ export function SceneFusionView({
setBatchItems((prev) =>
prev.map((batchItem) =>
batchItem.id === item.id
? { ...batchItem, status: "processing", error: undefined }
? markProcessItemRegenerating(batchItem, "processing")
: batchItem
)
);
@ -1955,7 +1985,7 @@ export function SceneFusionView({
setMultiProductItems((prev) =>
prev.map((productItem) =>
productItem.id === item.id
? { ...productItem, status: "pending", error: undefined }
? markProcessItemRegenerating(productItem, "pending")
: productItem
)
);
@ -2915,6 +2945,12 @@ export function SceneFusionView({
) : (
<div className="grid grid-cols-2 gap-4 md:grid-cols-3 xl:grid-cols-4">
{resultItems.map((item, index) => (
(() => {
const completedResultUrl =
item.status === "completed"
? item.result || item.originalUrl || ""
: "";
return (
<div
className="flex flex-col overflow-hidden rounded-lg border bg-background shadow-sm"
key={item.id}
@ -2947,15 +2983,12 @@ export function SceneFusionView({
<div
className={cn(
"group relative aspect-[3/4] bg-muted/20",
item.status === "completed" &&
(item.result || item.originalUrl) &&
"cursor-zoom-in"
completedResultUrl && "cursor-zoom-in"
)}
onClick={() => {
const previewUrl = item.originalUrl || item.result;
if (item.status === "completed" && previewUrl) {
if (completedResultUrl) {
openResultPreview(
previewUrl,
completedResultUrl,
`任务 ${index + 1} 预览`
);
}
@ -2963,28 +2996,24 @@ export function SceneFusionView({
onKeyDown={(event) => {
if (event.key !== "Enter" && event.key !== " ")
return;
const previewUrl = item.originalUrl || item.result;
if (item.status === "completed" && previewUrl) {
if (completedResultUrl) {
event.preventDefault();
openResultPreview(
previewUrl,
completedResultUrl,
`任务 ${index + 1} 预览`
);
}
}}
role="button"
tabIndex={
item.status === "completed" &&
(item.result || item.originalUrl)
? 0
: -1
completedResultUrl ? 0 : -1
}
>
{item.result ? (
{completedResultUrl ? (
<img
alt="处理结果"
className="h-full w-full object-cover"
src={item.result}
src={completedResultUrl}
/>
) : (
(() => {
@ -3080,7 +3109,7 @@ export function SceneFusionView({
})()
)}
{item.status === "completed" && (
{completedResultUrl && (
<>
<button
type="button"
@ -3107,7 +3136,7 @@ export function SceneFusionView({
onClick={(event) => {
event.stopPropagation();
downloadImage(
item.originalUrl || item.result!,
completedResultUrl,
`batch-${index + 1}.png`
);
}}
@ -3131,6 +3160,8 @@ export function SceneFusionView({
)}
</div>
</div>
);
})()
))}
</div>
)}