ColdBreeze-chat-web/src/common/component/ImagePreview.tsx

import { useEffect, useState } from 'react';
import ImagePreviewModal, { PreviewImageData } from "../../common/component/ImagePreviewModal";
type Props = {
    context?: "chat" | "markdown",
    container: HTMLElement | null
}

const ImagePreview = ({ container, context = "chat" }: Props) => {
    const [previewImage, setPreviewImage] = useState<PreviewImageData | null>(null);
    const closePreviewModal = () => {
        setPreviewImage(null);
    };
    useEffect(() => {
        if (!container) return;
        const chatHandler = (evt: MouseEvent) => {
            const target = evt.target as HTMLImageElement;
            if (!target) return;
            if (target.nodeName == "IMG" && target.classList.contains("preview")) {
                const thumbnail = target.src;
                const originUrl = target.dataset.origin || target.src;
                const downloadLink = target.dataset.download || target.src;
                const meta = JSON.parse(target.dataset.meta || "{}");
                setPreviewImage({ thumbnail, originUrl, downloadLink, ...meta });
            }
        };
        const markdownHandler = (evt: MouseEvent) => {
            evt.stopPropagation();
            const target = evt.target as HTMLImageElement;
            if (!target) return;
            // 图片
            if (target.nodeName == "IMG") {
                const urlObj = new URL(target.src);
                const originUrl = `${urlObj.origin}${urlObj.pathname}?file_path=${urlObj.searchParams.get(
                    "file_path"
                )}`;
                const data = { originUrl };
                setPreviewImage(data);
            }
        };

        const handler = context == 'chat' ? chatHandler : markdownHandler;
        // 点击查看大图
        container.addEventListener("click", handler, true);
        return () => {
            container.removeEventListener("click", handler, true);
        };
    }, [container, context]);
    return previewImage ? <ImagePreviewModal download={context == "chat"} data={previewImage} closeModal={closePreviewModal} /> : null;

};

export default ImagePreview;