From 8b913b11a5d65df16b5c9968d57cd5f632575faa Mon Sep 17 00:00:00 2001
From: imeepos <imeepos@sker.com>
Date: Wed, 30 Jul 2025 22:44:28 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=9B=BE=E7=89=87=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88=E7=82=B9=E5=87=BB=E4=BA=8B=E4=BB=B6=E8=B0=83=E8=AF=95?=
 =?UTF-8?q?=E6=97=A5=E5=BF=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在OutfitImageGallery中为图片点击事件添加详细日志
- 在ImagePreviewModal中添加渲染状态日志
- 帮助调试图片预览功能无响应的问题
---
 .../src/components/ImagePreviewModal.tsx      | 11 +++++++--
 .../src/components/OutfitImageGallery.tsx     | 24 +++++++++++++++++--
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/apps/desktop/src/components/ImagePreviewModal.tsx b/apps/desktop/src/components/ImagePreviewModal.tsx
index f19d373..ada6d34 100644
--- a/apps/desktop/src/components/ImagePreviewModal.tsx
+++ b/apps/desktop/src/components/ImagePreviewModal.tsx
@@ -120,7 +120,12 @@ export const ImagePreviewModal: React.FC<ImagePreviewModalProps> = ({
     setRotation(prev => (prev + 90) % 360);
   }, []);
 
-  if (!isOpen || !source) return null;
+  if (!isOpen || !source) {
+    console.log('🖼️ ImagePreviewModal: 不渲染', { isOpen, source });
+    return null;
+  }
+
+  console.log('🖼️ ImagePreviewModal: 开始渲染', { isOpen, source });
 
   const imageData = source.content?.text || source.content;
   const imageUri = source.uri;
@@ -134,10 +139,12 @@ export const ImagePreviewModal: React.FC<ImagePreviewModalProps> = ({
   // 获取modal-root容器
   const modalRoot = document.getElementById('modal-root');
   if (!modalRoot) {
-    console.error('Modal root element not found');
+    console.error('🖼️ Modal root element not found');
     return null;
   }
 
+  console.log('🖼️ Modal root found:', modalRoot);
+
   const modalContent = (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75">
       {/* 模态框背景 */}
diff --git a/apps/desktop/src/components/OutfitImageGallery.tsx b/apps/desktop/src/components/OutfitImageGallery.tsx
index 42d39d1..e0578e0 100644
--- a/apps/desktop/src/components/OutfitImageGallery.tsx
+++ b/apps/desktop/src/components/OutfitImageGallery.tsx
@@ -103,6 +103,7 @@ export const OutfitImageGallery: React.FC<OutfitImageGalleryProps> = ({
 
   // 打开图片预览
   const openImagePreview = useCallback((imageUrl: string, title: string) => {
+    console.log('🖼️ 打开图片预览:', { imageUrl, title });
     const source: GroundingSource = {
       uri: imageUrl,
       title: title,
@@ -112,6 +113,7 @@ export const OutfitImageGallery: React.FC<OutfitImageGalleryProps> = ({
       isOpen: true,
       source
     });
+    console.log('🖼️ 预览模态框状态已更新:', { isOpen: true, source });
   }, []);
 
   // 关闭图片预览
@@ -337,7 +339,16 @@ export const OutfitImageGallery: React.FC<OutfitImageGalleryProps> = ({
                           src={getImageSrc(image.image_url)}
                           alt={`穿搭图片 ${index + 1}`}
                           className="w-full h-full object-cover hover:scale-105 transition-transform duration-200"
-                          onClick={() => openImagePreview(image.image_url, `穿搭图片 ${index + 1}`)}
+                          onClick={(e) => {
+                            console.log('🖱️ 图片点击事件触发:', {
+                              imageUrl: image.image_url,
+                              title: `穿搭图片 ${index + 1}`,
+                              event: e
+                            });
+                            e.preventDefault();
+                            e.stopPropagation();
+                            openImagePreview(image.image_url, `穿搭图片 ${index + 1}`);
+                          }}
                         />
                         {/* 预览按钮覆盖层 */}
                         <div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all duration-200 flex items-center justify-center">
@@ -423,7 +434,16 @@ export const OutfitImageGallery: React.FC<OutfitImageGalleryProps> = ({
                           <div
                             key={image.id}
                             className="w-10 h-10 rounded-lg overflow-hidden border-2 border-white cursor-pointer hover:scale-110 transition-transform duration-200"
-                            onClick={() => openImagePreview(image.image_url, `穿搭图片 ${index + 1}`)}
+                            onClick={(e) => {
+                              console.log('🖱️ 列表图片点击事件触发:', {
+                                imageUrl: image.image_url,
+                                title: `穿搭图片 ${index + 1}`,
+                                event: e
+                              });
+                              e.preventDefault();
+                              e.stopPropagation();
+                              openImagePreview(image.image_url, `穿搭图片 ${index + 1}`);
+                            }}
                           >
                             <img
                               src={getImageSrc(image.image_url)}