From e314edb283be2a1201eb156aeea08c450e507b2e Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Mon, 2 Feb 2026 12:34:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=94=BB=E5=B8=83=E7=82=B9=E9=98=B5?=
 =?UTF-8?q?=E8=83=8C=E6=99=AF=E5=9B=BA=E5=AE=9A=E5=A4=A7=E5=B0=8F=E4=B8=8D?=
 =?UTF-8?q?=E9=9A=8F=E7=BC=A9=E6=94=BE=E5=8F=98=E5=8C=96=EF=BC=8C=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E5=8F=8C=E5=87=BB=E6=94=BE=E5=A4=A7=E9=A2=84=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/canvas/CanvasWorkspace.tsx | 14 ++++-----
 components/canvas/nodes/ImageNode.tsx | 41 +++++++++++++++++++++++++--
 2 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/components/canvas/CanvasWorkspace.tsx b/components/canvas/CanvasWorkspace.tsx
index b97ea0e..9ce2e24 100644
--- a/components/canvas/CanvasWorkspace.tsx
+++ b/components/canvas/CanvasWorkspace.tsx
@@ -228,22 +228,20 @@ export function CanvasWorkspace() {
       onMouseLeave={handleMouseUp}
       onWheel={handleWheel}
     >
-      {/* 点阵背景 - 浅色模式 */}
+      {/* 点阵背景 - 浅色模式（固定大小，不随缩放变化） */}
       <div
         className="absolute inset-0 pointer-events-none dark:hidden"
         style={{
-          backgroundImage: `radial-gradient(rgba(0,0,0,0.1) 1px, transparent 1px)`,
-          backgroundSize: `${20 * viewport.zoom}px ${20 * viewport.zoom}px`,
-          backgroundPosition: `${viewport.x}px ${viewport.y}px`,
+          backgroundImage: `radial-gradient(rgba(0,0,0,0.08) 1px, transparent 1px)`,
+          backgroundSize: `20px 20px`,
         }}
       />
-      {/* 深色模式点阵 */}
+      {/* 深色模式点阵（固定大小，不随缩放变化） */}
       <div
         className="absolute inset-0 pointer-events-none hidden dark:block"
         style={{
-          backgroundImage: `radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px)`,
-          backgroundSize: `${20 * viewport.zoom}px ${20 * viewport.zoom}px`,
-          backgroundPosition: `${viewport.x}px ${viewport.y}px`,
+          backgroundImage: `radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px)`,
+          backgroundSize: `20px 20px`,
         }}
       />
 
diff --git a/components/canvas/nodes/ImageNode.tsx b/components/canvas/nodes/ImageNode.tsx
index 5f6199c..ca5cab5 100644
--- a/components/canvas/nodes/ImageNode.tsx
+++ b/components/canvas/nodes/ImageNode.tsx
@@ -46,6 +46,7 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
   const [resizeHeight, setResizeHeight] = useState(1024);
   const [isUploading, setIsUploading] = useState(false);
   const [annotatorOpen, setAnnotatorOpen] = useState(false);
+  const [fullscreenPreviewOpen, setFullscreenPreviewOpen] = useState(false);
   
   // 文件输入的 ref
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -417,13 +418,17 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
       >
-        {/* 图片内容 - 使用 object-contain 保持原始比例 */}
+        {/* 图片内容 - 使用 object-contain 保持原始比例，双击可放大查看 */}
         {data.src ? (
           <img
             src={data.src}
             alt={data.prompt || "图片"}
-            className="w-full h-full object-contain bg-muted/30"
+            className="w-full h-full object-contain bg-muted/30 cursor-pointer"
             draggable={false}
+            onDoubleClick={(e) => {
+              e.stopPropagation();
+              setFullscreenPreviewOpen(true);
+            }}
           />
         ) : data.status === 'generating' ? (
           <div className="w-full h-full flex flex-col items-center justify-center bg-muted">
@@ -797,6 +802,38 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
           onCancel={() => setAnnotatorOpen(false)}
         />
       )}
+      
+      {/* 双击放大预览弹窗 */}
+      {fullscreenPreviewOpen && data.src && createPortal(
+        <div 
+          className="fixed inset-0 z-[9999] bg-black/90 flex items-center justify-center cursor-zoom-out"
+          onClick={() => setFullscreenPreviewOpen(false)}
+        >
+          {/* 关闭按钮 */}
+          <button
+            className="absolute top-4 right-4 p-2 rounded-full bg-white/10 hover:bg-white/20 transition-colors"
+            onClick={() => setFullscreenPreviewOpen(false)}
+          >
+            <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+          
+          {/* 图片 */}
+          <img
+            src={data.src}
+            alt={data.prompt || "图片预览"}
+            className="max-w-[95vw] max-h-[95vh] object-contain"
+            onClick={(e) => e.stopPropagation()}
+          />
+          
+          {/* 底部提示 */}
+          <div className="absolute bottom-4 left-1/2 -translate-x-1/2 text-white/60 text-sm">
+            点击任意位置关闭
+          </div>
+        </div>,
+        document.body
+      )}
     </>
   );
 }