From fecfa6d3704d1cfb1a78fa71c91154c400552d29 Mon Sep 17 00:00:00 2001
From: ddcat666 <2695092045@qq.com>
Date: Tue, 28 Jul 2026 14:55:22 +0800
Subject: [PATCH] =?UTF-8?q?fix(canvas):=20=E5=9B=BE=E7=89=87=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88=20-=20=E6=94=AF=E6=8C=81=E5=85=A8=E8=A7=86=E5=8F=A3?=
 =?UTF-8?q?=E7=BC=A9=E6=94=BE=E4=B8=8E=E6=8B=96=E6=8B=BD=E6=9F=A5=E7=9C=8B?=
 =?UTF-8?q?=E7=BB=86=E8=8A=82=20(#41)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes #40

Co-authored-by: ddCat <ddcat666@88.com>
---
 .../canvas/canvas-project-status-dialogs.tsx  | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/web/src/pages/canvas/canvas-project-status-dialogs.tsx b/web/src/pages/canvas/canvas-project-status-dialogs.tsx
index 1b07885c6..33db079f9 100644
--- a/web/src/pages/canvas/canvas-project-status-dialogs.tsx
+++ b/web/src/pages/canvas/canvas-project-status-dialogs.tsx
@@ -1,4 +1,4 @@
-import { Button, Modal } from "antd";
+import { Button, Image, Modal } from "antd";
 
 import { TaskDetailItem, taskStatusText } from "./canvas-project-feedback";
 import type { GenerationTask, TaskLog } from "@/services/api/task-center";
@@ -47,11 +47,26 @@ export function CanvasProjectStatusDialogs({ theme, task, taskLogs, taskLoading,
                 <div className="py-8 text-center text-base font-medium">暂未实现</div>
             </Modal>
 
-            <Modal title={previewNode?.type === CanvasNodeType.Video ? "视频预览" : "图片预览"} open={Boolean(previewNode?.metadata?.content)} centered onCancel={onClosePreview} footer={null} width="min(1200px, calc(100vw - 32px))" styles={{ body: { padding: 0, display: "flex", justifyContent: "center", alignItems: "center", maxHeight: "84vh", overflow: "hidden", background: "#090909" } }}>
+            <Modal title="视频预览" open={Boolean(previewNode?.metadata?.content && previewNode.type === CanvasNodeType.Video)} centered onCancel={onClosePreview} footer={null} width="min(1200px, calc(100vw - 32px))" styles={{ body: { padding: 0, display: "flex", justifyContent: "center", alignItems: "center", maxHeight: "84vh", overflow: "hidden", background: "#090909" } }}>
                 {previewNode?.metadata?.content && previewNode.type === CanvasNodeType.Video ? <video src={previewNode.metadata.content} controls className="max-h-[84vh] max-w-full bg-black object-contain" /> : null}
-                {previewNode?.metadata?.content && previewNode.type === CanvasNodeType.Image ? <img src={previewNode.metadata.content} alt={previewNode.title || "图片"} className="max-h-[84vh] max-w-full object-contain" /> : null}
             </Modal>
 
+            {previewNode?.metadata?.content && previewNode.type === CanvasNodeType.Image ? (
+                <Image
+                    src={previewNode.metadata.content}
+                    alt={previewNode.title || "图片"}
+                    style={{ display: "none" }}
+                    preview={{
+                        open: true,
+                        movable: true,
+                        minScale: 0.5,
+                        maxScale: 12,
+                        scaleStep: 0.25,
+                        onOpenChange: (open) => !open && onClosePreview(),
+                    }}
+                />
+            ) : null}
+
             <Modal
                 title="清空画布？"
                 open={clearConfirmOpen}