添加图片预览点击事件调试日志
- 在OutfitImageGallery中为图片点击事件添加详细日志 - 在ImagePreviewModal中添加渲染状态日志 - 帮助调试图片预览功能无响应的问题
This commit is contained in:
parent
973ccf940a
commit
8b913b11a5
|
|
@ -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">
|
||||
{/* 模态框背景 */}
|
||||
|
|
|
|||
|
|
@ -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)}
|
||||
|
|
|
|||
Loading…
Reference in New Issue