[Feature] 优化图片点击放大的体验

[molikai-work]

背景

可以优化操作体验。

功能描述

具体优化一下点击图片放大预览方面的功能。

解决方案

这里是我用的改进的代码，支持上一张下一张的切换图片。

const [selectedImageIndex, setSelectedImageIndex] = useState(null);
const imageRefs = useRef([]);

// 图片点击事件
const handleImageClick = (index) => {
    setSelectedImageIndex(index);
};

// 关闭图片
const handleCloseImage = (e) => {
    if (e.target.className.includes('modal-overlay')) {
        setSelectedImageIndex(null);
    }
};

// 切换到前一张图片
const handlePrevImage = () => {
    setSelectedImageIndex((prevIndex) => (prevIndex > 0 ? prevIndex - 1 : data.length - 1));
};

// 切换到下一张图片
const handleNextImage = () => {
    setSelectedImageIndex((prevIndex) => (prevIndex < data.length - 1 ? prevIndex + 1 : 0));
};

// 键盘左右切换图片
const handleKeyDown = (e) => {
    if (e.key === 'ArrowLeft') {
        handlePrevImage();
    } else if (e.key === 'ArrowRight') {
        handleNextImage();
    }
};

// 键盘事件监听器
useEffect(() => {
    if (selectedImageIndex !== null) {
        window.addEventListener('keydown', handleKeyDown);
    } else {
        window.removeEventListener('keydown', handleKeyDown);
    }

    return () => {
        window.removeEventListener('keydown', handleKeyDown);
    };
}, [selectedImageIndex]);

// ...

// 按钮渲染
{selectedImageIndex !== null && (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 modal-overlay" onClick={handleCloseImage}>
        <div className="relative">
            <button
                className="absolute top-2 right-2 bg-red-500 text-white rounded-full w-8 h-8 flex items-center justify-center"
                onClick={() => setSelectedImageIndex(null)}
            >
                &times;
            </button>
            <img
                src={getImgUrl(data[selectedImageIndex].url)}
                alt="Selected"
                className="max-w-full max-h-screen object-contain"
                draggable="false"
            />
            <button
                className="absolute left-2 top-1/2 transform -translate-y-1/2 bg-gray-700 text-white rounded-full w-8 h-8 flex items-center justify-center"
                onClick={handlePrevImage}
            >
                &#9664;
            </button>
            <button
                className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-gray-700 text-white rounded-full w-8 h-8 flex items-center justify-center"
                onClick={handleNextImage}
            >
                &#9654;
            </button>
        </div>
    </div>
)}

替代方案

无

附加信息

效果看起来是这样：

还支持键盘上的左右键。