添加图片预览点击事件调试日志

- 在OutfitImageGallery中为图片点击事件添加详细日志
- 在ImagePreviewModal中添加渲染状态日志
- 帮助调试图片预览功能无响应的问题
This commit is contained in:
imeepos 2025-07-30 22:44:28 +08:00
parent 973ccf940a
commit 8b913b11a5
2 changed files with 31 additions and 4 deletions

View File

@ -120,7 +120,12 @@ export const ImagePreviewModal: React.FC<ImagePreviewModalProps> = ({
setRotation(prev => (prev + 90) % 360); 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 imageData = source.content?.text || source.content;
const imageUri = source.uri; const imageUri = source.uri;
@ -134,10 +139,12 @@ export const ImagePreviewModal: React.FC<ImagePreviewModalProps> = ({
// 获取modal-root容器 // 获取modal-root容器
const modalRoot = document.getElementById('modal-root'); const modalRoot = document.getElementById('modal-root');
if (!modalRoot) { if (!modalRoot) {
console.error('Modal root element not found'); console.error('🖼️ Modal root element not found');
return null; return null;
} }
console.log('🖼️ Modal root found:', modalRoot);
const modalContent = ( const modalContent = (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75"> <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75">
{/* 模态框背景 */} {/* 模态框背景 */}

View File

@ -103,6 +103,7 @@ export const OutfitImageGallery: React.FC<OutfitImageGalleryProps> = ({
// 打开图片预览 // 打开图片预览
const openImagePreview = useCallback((imageUrl: string, title: string) => { const openImagePreview = useCallback((imageUrl: string, title: string) => {
console.log('🖼️ 打开图片预览:', { imageUrl, title });
const source: GroundingSource = { const source: GroundingSource = {
uri: imageUrl, uri: imageUrl,
title: title, title: title,
@ -112,6 +113,7 @@ export const OutfitImageGallery: React.FC<OutfitImageGalleryProps> = ({
isOpen: true, isOpen: true,
source source
}); });
console.log('🖼️ 预览模态框状态已更新:', { isOpen: true, source });
}, []); }, []);
// 关闭图片预览 // 关闭图片预览
@ -337,7 +339,16 @@ export const OutfitImageGallery: React.FC<OutfitImageGalleryProps> = ({
src={getImageSrc(image.image_url)} src={getImageSrc(image.image_url)}
alt={`穿搭图片 ${index + 1}`} alt={`穿搭图片 ${index + 1}`}
className="w-full h-full object-cover hover:scale-105 transition-transform duration-200" 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"> <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 <div
key={image.id} 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" 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 <img
src={getImageSrc(image.image_url)} src={getImageSrc(image.image_url)}