// ==UserScript==
// @name         图片隐藏
// @namespace    http://tampermonkey.net/
// @version      1.2
// @description  单张或者全局图片隐藏与显示
// @match        *://*/*
// @author       eternal5130
// @license      MIT
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_registerMenuCommand
// @downloadURL none
// ==/UserScript==


(function() {
    'use strict';
 
    // 默认快捷键配置
    const DEFAULT_SHORTCUT = {
        single: {
            keys: ['MouseMiddle']
        },
        global: {
            keys: ['AltLeft', 'KeyH']
        }
    };
 
    // 存储图片状态
    const imageStates = new Map();
    const currentPressedKeys = new Set();
    let currentHoverTarget = null;
    let configModal = null;
    let globalImageCounter = 0;
 
    // 获取快捷键配置
    function getShortcutConfig() {
        try {
            const savedConfig = GM_getValue('imageHiderShortcut');
            return savedConfig ? JSON.parse(savedConfig) : { ...DEFAULT_SHORTCUT };
        } catch (error) {
            console.error('获取快捷键配置失败，使用默认配置', error);
            return { ...DEFAULT_SHORTCUT };
        }
    }
 
    // 保存快捷键配置
    function saveShortcutConfig(config) {
        try {
            GM_setValue('imageHiderShortcut', JSON.stringify(config));
        } catch (error) {
            console.error('保存快捷键配置失败', error);
            alert('保存配置时出错，请重试');
        }
    }
 
    // 将按键码转换为可读名称
    function getKeyDisplayName(code) {
        const keyNameMap = {
            'AltLeft': 'Alt (左)', 'AltRight': 'Alt (右)',
            'ControlLeft': 'Ctrl (左)', 'ControlRight': 'Ctrl (右)',
            'ShiftLeft': 'Shift (左)', 'ShiftRight': 'Shift (右)',
            'MetaLeft': 'Meta (左)', 'MetaRight': 'Meta (右)',
            'MouseLeft': '鼠标左键', 'MouseMiddle': '鼠标中键', 'MouseRight': '鼠标右键',
            'KeyA': 'A', 'KeyB': 'B', 'KeyC': 'C', 'KeyD': 'D', 'KeyE': 'E',
            'KeyF': 'F', 'KeyG': 'G', 'KeyH': 'H', 'KeyI': 'I', 'KeyJ': 'J',
            'KeyK': 'K', 'KeyL': 'L', 'KeyM': 'M', 'KeyN': 'N', 'KeyO': 'O',
            'KeyP': 'P', 'KeyQ': 'Q', 'KeyR': 'R', 'KeyS': 'S', 'KeyT': 'T',
            'KeyU': 'U', 'KeyV': 'V', 'KeyW': 'W', 'KeyX': 'X', 'KeyY': 'Y', 'KeyZ': 'Z',
            'Digit0': '0', 'Digit1': '1', 'Digit2': '2', 'Digit3': '3',
            'Digit4': '4', 'Digit5': '5', 'Digit6': '6', 'Digit7': '7',
            'Digit8': '8', 'Digit9': '9'
        };
        return keyNameMap[code] || code;
    }
 
    // 检查快捷键是否匹配
    function isShortcutMatch(config) {
        const { keys = [] } = config;
        return keys.every(key => currentPressedKeys.has(key));
    }
 
    // 创建模态框样式
    function createModalStyles() {
        const style = document.createElement('style');
        style.textContent = `
            .image-hider-modal {
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background: #fff;
                border-radius: 12px;
                box-shadow: 0 10px 25px rgba(0,0,0,0.1);
                padding: 24px;
                z-index: 10000;
                width: 500px;
                max-height: 80vh;
                overflow-y: auto;
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
                position: relative;
            }
            .image-hider-modal h2 {
                color: #333;
                margin-bottom: 16px;
                font-weight: 600;
            }
            .image-hider-modal button {
                background-color: #4CAF50;
                color: white;
                border: none;
                padding: 10px 16px;
                margin: 8px;
                border-radius: 6px;
                cursor: pointer;
                transition: background-color 0.3s;
            }
            .image-hider-modal button:hover {
                background-color: #45a049;
            }
            .image-hider-modal button.cancel {
                background-color: #f44336;
            }
            .image-hider-modal .current-shortcut {
                background-color: #f0f0f0;
                padding: 10px;
                margin-bottom: 16px;
                border-radius: 6px;
                text-align: center;
            }
            .image-hider-modal .shortcut-input {
                width: 100%;
                padding: 10px;
                margin: 10px 0;
                border: 1px solid #ddd;
                border-radius: 6px;
                font-size: 16px;
                text-align: center;
            }
            .image-hider-modal .close-btn {
                position: absolute;
                right: 16px;
                top: 16px;
                width: 24px;
                height: 24px;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                background: #f5f5f5;
                border: none;
                padding: 0;
            }
            .image-hider-modal .close-btn:hover {
                background: #e0e0e0;
            }
            .image-hider-modal .close-btn::before,
            .image-hider-modal .close-btn::after {
                content: '';
                position: absolute;
                width: 14px;
                height: 2px;
                background: #666;
            }
            .image-hider-modal .close-btn::before {
                transform: rotate(45deg);
            }
            .image-hider-modal .close-btn::after {
                transform: rotate(-45deg);
            }
            .image-hider-modal .shortcut-section {
                background: #f8f9fa;
                border-radius: 8px;
                padding: 16px;
                margin-bottom: 16px;
            }
            .image-hider-modal .shortcut-section h3 {
                color: #2c3e50;
                margin: 0 0 12px 0;
                font-size: 1.1em;
                font-weight: 500;
            }
            .image-hider-modal .shortcut-section .current-shortcut {
                background-color: #fff;
                margin-bottom: 12px;
            }
            .image-hider-modal .shortcut-section button {
                margin: 8px 0;
                width: 100%;
            }
            .image-hider-modal .button-group {
                margin-top: 24px;
            }
            .settings-item {
                display: flex;
                align-items: center;
                margin: 16px 0;
                padding: 8px;
                background: #fff;
                border-radius: 8px;
            }
 
            .settings-label {
                margin-left: 12px;
                color: #495057;
            }
 
            .image-hider-switch {
                position: relative;
                display: inline-block;
                width: 60px;
                height: 34px;
            }
 
            .image-hider-switch input {
                opacity: 0;
                width: 0;
                height: 0;
            }
 
            .image-hider-slider {
                position: absolute;
                cursor: pointer;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: #ccc;
                transition: background-color 0.4s, transform 0.4s;
                border-radius: 34px;
                box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            }
 
            .image-hider-slider:before {
                position: absolute;
                content: "";
                height: 26px;
                width: 26px;
                left: 4px;
                bottom: 4px;
                background-color: white;
                transition: transform 0.4s;
                border-radius: 50%;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            }
 
            .image-hider-switch input:checked + .image-hider-slider {
                background-color: #4CAF50;
            }
 
            .image-hider-switch input:checked + .image-hider-slider:before {
                transform: translateX(26px);
            }
 
            .image-hider-slider:hover {
                background-color: #b3b3b3;
            }
 
            .settings-item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 16px 20px;
                transition: background-color 0.2s ease;
            }
 
            .settings-content {
                flex: 1;
                margin-right: 16px;
            }
 
            .settings-title {
                font-size: 14px;
                font-weight: 500;
                color: #303133;
                margin-bottom: 4px;
            }
 
            .settings-description {
                font-size: 12px;
                color: #909399;
                line-height: 1.4;
            }
        `;
        document.head.appendChild(style);
    }
 
    // 添加全局状态存储
    function getGlobalHideState() {
        return GM_getValue('globalHideState', false);
    }
 
    function setGlobalHideState(state) {
        GM_setValue('globalHideState', state);
    }
 
    // 修改 toggleAllImages 函数
    function toggleAllImages() {
        const images = document.getElementsByTagName('img');
 
        Array.from(images).forEach(img => {
            if (!img.dataset.imageId) {
                img.dataset.imageId = `img_${++globalImageCounter}`;
                imageStates.set(img.dataset.imageId, new ImageState(img));
            }
        });
 
        const visibleImages = Array.from(images).filter(img => {
            const state = imageStates.get(img.dataset.imageId);
            return !state?.isHidden;
        });
 
        const shouldHide = visibleImages.length > 0;
 
        // 更新全局状态
        setGlobalHideState(shouldHide);
 
        requestAnimationFrame(() => {
            Array.from(images).forEach(img => {
                toggleImageVisibility(img, shouldHide, false);
            });
        });
    }
 
    // 修改初始化函数
    function initAutoHide() {
        const shouldHide = getGlobalHideState();
        if (shouldHide) {
            // 立即处理当前可见的图片
            const processImages = () => {
                const images = document.getElementsByTagName('img');
                Array.from(images).forEach(img => {
                    if (!img.dataset.imageId) {
                        img.dataset.imageId = `img_${++globalImageCounter}`;
                        imageStates.set(img.dataset.imageId, new ImageState(img));
                    }
                    
                    // 立即设置初始样式，防止图片闪现
                    img.style.cssText = `
                        opacity: 0 !important;
                        pointer-events: none !important;
                        transition: none !important;
                    `;
                    
                    if (img.complete) {
                        toggleImageVisibility(img, true, true);
                    } else {
                        // 在图片加载前就开始监听
                        img.addEventListener('load', () => toggleImageVisibility(img, true, true), { once: true });
                    }
                });
            };

            // 首次处理
            processImages();

            // 使用 MutationObserver 监听 DOM 变化
            const observer = new MutationObserver((mutations) => {
                mutations.forEach(mutation => {
                    mutation.addedNodes.forEach(node => {
                        if (node.tagName === 'IMG') {
                            // 立即设置初始样式
                            node.style.cssText = `
                                opacity: 0 !important;
                                pointer-events: none !important;
                                transition: none !important;
                            `;
                            toggleImageVisibility(node, true, true);
                        } else if (node.getElementsByTagName) {
                            const images = node.getElementsByTagName('img');
                            Array.from(images).forEach(img => {
                                // 立即设置初始样式
                                img.style.cssText = `
                                    opacity: 0 !important;
                                    pointer-events: none !important;
                                    transition: none !important;
                                `;
                                toggleImageVisibility(img, true, true);
                            });
                        }
                    });
                });
            });

            observer.observe(document.body, {
                childList: true,
                subtree: true,
                attributes: true,
                attributeFilter: ['src']
            });

            // 添加 DOM 内容加载完成的处理
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', processImages);
            }

            // 添加页面完全加载完成的处理
            window.addEventListener('load', processImages);

            // 清理函数
            const cleanup = () => {
                observer.disconnect();
            };

            // 页面卸载时清理
            window.addEventListener('unload', cleanup);
        }
    }
 
    // 修改配置弹窗，移除自动隐藏开关相关代码
    function createConfigModal() {
        if (!document.querySelector('#image-hider-modal-styles')) {
            const style = document.createElement('style');
            style.id = 'image-hider-modal-styles';
            style.textContent = `
                .image-hider-modal {
                    position: fixed;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    background: #fff;
                    border-radius: 12px;
                    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
                    padding: 28px;
                    z-index: 10000;
                    width: 480px;
                    max-height: 80vh;
                    overflow-y: auto;
                    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
                    animation: modalFadeIn 0.2s ease-out;
                    box-sizing: border-box;
                }

                .image-hider-modal * {
                    box-sizing: border-box;
                }

                @keyframes modalFadeIn {
                    from {
                        opacity: 0;
                        transform: translate(-50%, -48%);
                    }
                    to {
                        opacity: 1;
                        transform: translate(-50%, -50%);
                    }
                }

                .image-hider-modal h2 {
                    color: #2c3e50;
                    margin: 0 0 20px 0;
                    font-size: 1.5em;
                    font-weight: 600;
                    line-height: 1.4;
                }

                .image-hider-modal .shortcut-section {
                    background: #f8f9fa;
                    border-radius: 8px;
                    padding: 20px;
                    margin-bottom: 20px;
                    border: 1px solid #e9ecef;
                }

                .image-hider-modal .shortcut-section h3 {
                    color: #2c3e50;
                    margin: 0 0 16px 0;
                    font-size: 1.1em;
                    font-weight: 500;
                    line-height: 1.4;
                }

                .image-hider-modal .current-shortcut {
                    background-color: #fff;
                    padding: 12px 16px;
                    margin-bottom: 16px;
                    border-radius: 8px;
                    text-align: center;
                    border: 1px solid #e9ecef;
                    color: #495057;
                    line-height: 1.5;
                    font-size: 14px;
                }

                .image-hider-modal .shortcut-input {
                    width: 100%;
                    height: 42px;
                    padding: 8px 16px;
                    margin: 10px 0;
                    border: 2px solid #e9ecef;
                    border-radius: 8px;
                    font-size: 14px;
                    text-align: center;
                    background: #fff;
                    transition: all 0.2s ease;
                    color: #495057;
                    line-height: 1.5;
                    display: block;
                }

                .image-hider-modal .shortcut-input:focus {
                    border-color: #4CAF50;
                    outline: none;
                    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
                }

                .image-hider-modal .shortcut-input.recording {
                    background: #e8f5e9;
                    border-color: #4CAF50;
                }

                .image-hider-modal .shortcut-input::placeholder {
                    color: #adb5bd;
                }

                .image-hider-modal .button-wrapper {
                    display: flex;
                    justify-content: center;
                    margin: 12px 0;
                }

                .image-hider-modal button {
                    padding: 10px 20px;
                    border-radius: 8px;
                    border: none;
                    cursor: pointer;
                    font-size: 14px;
                    font-weight: 500;
                    transition: all 0.2s ease;
                    min-width: 120px;
                    height: 40px;
                    line-height: 20px;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    margin: 0;
                }

                .image-hider-modal button#setShortcutBtn,
                .image-hider-modal button#setSingleShortcutBtn,
                .image-hider-modal button#setGlobalShortcutBtn {
                    background-color: #f8f9fa;
                    color: #495057;
                    border: 1px solid #dee2e6;
                    width: 100%;
                }

                .image-hider-modal button#setShortcutBtn:hover,
                .image-hider-modal button#setSingleShortcutBtn:hover,
                .image-hider-modal button#setGlobalShortcutBtn:hover {
                    background-color: #e9ecef;
                }

                .image-hider-modal button#setShortcutBtn.recording,
                .image-hider-modal button#setSingleShortcutBtn.recording,
                .image-hider-modal button#setGlobalShortcutBtn.recording {
                    background-color: #4CAF50;
                    color: white;
                    border: none;
                }

                .image-hider-modal .button-group {
                    display: flex;
                    gap: 12px;
                    margin-top: 24px;
                    justify-content: center;
                }

                .image-hider-modal button#saveConfigBtn {
                    background-color: #4CAF50;
                    color: white;
                    min-width: 140px;
                }

                .image-hider-modal button#saveConfigBtn:hover {
                    background-color: #43a047;
                }

                .image-hider-modal .close-btn {
                    position: absolute;
                    right: 16px;
                    top: 16px;
                    width: 32px;
                    height: 32px;
                    border-radius: 16px;
                    background: #f8f9fa;
                    border: none;
                    cursor: pointer;
                    transition: all 0.2s ease;
                    padding: 0;
                    min-width: unset;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .image-hider-modal .close-btn:hover {
                    background: #e9ecef;
                }

                .image-hider-modal .close-btn::before,
                .image-hider-modal .close-btn::after {
                    content: '';
                    position: absolute;
                    width: 16px;
                    height: 2px;
                    background: #495057;
                    transition: background 0.2s;
                }

                .image-hider-modal .close-btn::before {
                    transform: rotate(45deg);
                }

                .image-hider-modal .close-btn::after {
                    transform: rotate(-45deg);
                }

                .image-hider-modal .hint {
                    color: #6c757d;
                    font-size: 13px;
                    margin-top: 20px;
                    line-height: 1.6;
                    padding: 16px;
                    background: #f8f9fa;
                    border-radius: 8px;
                    border: 1px solid #e9ecef;
                }

                .image-hider-modal .success-message {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    background: rgba(76, 175, 80, 0.9);
                    color: white;
                    padding: 16px 32px;
                    border-radius: 8px;
                    font-weight: 500;
                    opacity: 0;
                    transition: opacity 0.3s ease;
                    pointer-events: none;
                }

                .image-hider-modal .success-message.show {
                    opacity: 1;
                }

                .image-hider-modal.closing {
                    opacity: 0;
                    transform: translate(-50%, -48%);
                    transition: all 0.3s ease;
                }
            `;
            document.head.appendChild(style);
        }
 
        if (configModal) {
            configModal.remove();
        }
 
        configModal = document.createElement('div');
        configModal.className = 'image-hider-modal';
 
        const shortcutConfig = getShortcutConfig();
        const singleShortcutDisplay = (shortcutConfig.single.keys || DEFAULT_SHORTCUT.single.keys)
            .map(key => getKeyDisplayName(key))
            .join(' + ');
        const globalShortcutDisplay = (shortcutConfig.global.keys || DEFAULT_SHORTCUT.global.keys)
            .map(key => getKeyDisplayName(key))
            .join(' + ');
 
        configModal.innerHTML = `
            <button class="close-btn" id="closeConfigBtn"></button>
            <h2>图片隐藏快捷键配置</h2>
 
            <div class="shortcut-section">
                <h3>单个图片快捷键</h3>
                <div class="current-shortcut">
                    <strong>当前快捷键：</strong>${singleShortcutDisplay}
                </div>
                <input type="text" readonly class="shortcut-input" id="singleShortcutInput"
                       placeholder="点击"设置快捷键"开始录制">
                <div class="button-wrapper">
                    <button id="setSingleShortcutBtn">设置快捷键</button>
                </div>
            </div>
 
            <div class="shortcut-section">
                <h3>全局图片快捷键</h3>
                <div class="current-shortcut">
                    <strong>当前快捷键：</strong>${globalShortcutDisplay}
                </div>
                <input type="text" readonly class="shortcut-input" id="globalShortcutInput"
                       placeholder="点击"设置快捷键"开始录制">
                <div class="button-wrapper">
                    <button id="setGlobalShortcutBtn">设置快捷键</button>
                </div>
            </div>
 
            <div class="button-group">
                <button id="saveConfigBtn">保存设置</button>
            </div>
 
            <div class="hint">
                <strong>使用说明：</strong><br>
                1. 单个图片快捷键：悬停在图片上时触发隐藏/显示<br>
                2. 全局图片快捷键：一键切换所有图片的显示状态，状态会在新页面保持<br>
                3. 点击对应的"设置快捷键"开始录制<br>
                4. 完成设置后点击"保存设置"确认更改
            </div>
        `;
 
        document.body.appendChild(configModal);
 
        const setSingleShortcutBtn = configModal.querySelector('#setSingleShortcutBtn');
        const setGlobalShortcutBtn = configModal.querySelector('#setGlobalShortcutBtn');
        const saveConfigBtn = configModal.querySelector('#saveConfigBtn');
        const closeConfigBtn = configModal.querySelector('#closeConfigBtn');
        const singleShortcutInput = configModal.querySelector('#singleShortcutInput');
        const globalShortcutInput = configModal.querySelector('#globalShortcutInput');
 
        let isRecording = false;
        let currentRecordingType = null;
        let singlePressedKeys = new Set();
        let globalPressedKeys = new Set();
 
        function startRecording(type, input, button) {
            if (isRecording) return;
 
            isRecording = true;
            currentRecordingType = type;
            const keysSet = type === 'single' ? singlePressedKeys : globalPressedKeys;
            keysSet.clear();
 
            input.value = '请按下快捷键组合...';
            input.classList.add('recording');
            button.classList.add('recording');
            button.textContent = '正在录制...';
 
            const keydownHandler = (e) => {
                e.preventDefault();
                keysSet.add(e.code);
                updateShortcutDisplay(input, keysSet);
            };
 
            const keyupHandler = (e) => {
                e.preventDefault();
                if (keysSet.size > 0) {
                    finishRecording(input, button);
                }
            };
 
            const mousedownHandler = (e) => {
                e.preventDefault();
                if (e.button === 1) {
                    keysSet.add('MouseMiddle');
                    updateShortcutDisplay(input, keysSet);
                }
            };
 
            const mouseupHandler = (e) => {
                e.preventDefault();
                if (e.button === 1 && keysSet.size > 0) {
                    finishRecording(input, button);
                }
            };
 
            document.addEventListener('keydown', keydownHandler);
            document.addEventListener('keyup', keyupHandler);
            document.addEventListener('mousedown', mousedownHandler);
            document.addEventListener('mouseup', mouseupHandler);
 
            // 保存清理函数
            button.cleanup = () => {
                document.removeEventListener('keydown', keydownHandler);
                document.removeEventListener('keyup', keyupHandler);
                document.removeEventListener('mousedown', mousedownHandler);
                document.removeEventListener('mouseup', mouseupHandler);
            };
        }
 
        function updateShortcutDisplay(input, keysSet) {
            input.value = Array.from(keysSet)
                .map(getKeyDisplayName)
                .join(' + ');
        }
 
        function finishRecording(input, button) {
            isRecording = false;
            currentRecordingType = null;
            input.classList.remove('recording');
            button.classList.remove('recording');
            button.textContent = '设置快捷键';
 
            if (button.cleanup) {
                button.cleanup();
                button.cleanup = null;
            }
        }
 
        setSingleShortcutBtn.addEventListener('click', () => {
            startRecording('single', singleShortcutInput, setSingleShortcutBtn);
        });
 
        setGlobalShortcutBtn.addEventListener('click', () => {
            startRecording('global', globalShortcutInput, setGlobalShortcutBtn);
        });
 
        saveConfigBtn.addEventListener('click', () => {
            const shortcutConfig = getShortcutConfig();
            const settings = getSettings();
            let hasChanges = false;
 
            // 检查并保存单个图片快捷键
            if (singleShortcutInput.value && singleShortcutInput.value !== '请按下快捷键组合...') {
                shortcutConfig.single.keys = Array.from(singlePressedKeys);
                hasChanges = true;
            }
 
            // 检查并保存全局快捷键
            if (globalShortcutInput.value && globalShortcutInput.value !== '请按下快捷键组合...') {
                shortcutConfig.global.keys = Array.from(globalPressedKeys);
                hasChanges = true;
            }
 
            if (hasChanges) {
                saveShortcutConfig(shortcutConfig);
 
                // 创建成功提示
                const successMessage = document.createElement('div');
                successMessage.className = 'success-message';
                successMessage.textContent = '快捷键设置已保存';
                configModal.appendChild(successMessage);
 
                // 添加过渡效果
                requestAnimationFrame(() => {
                    successMessage.classList.add('show');
                    setTimeout(() => {
                        configModal.classList.add('closing');
                        setTimeout(() => {
                            configModal.remove();
                            configModal = null;
                        }, 300);
                    }, 500);
                });
            } else {
                alert('请先设置至少一个快捷键');
            }
        });
 
        closeConfigBtn.addEventListener('click', () => {
            if (isRecording) {
                const button = currentRecordingType === 'single' ? setSingleShortcutBtn : setGlobalShortcutBtn;
                const input = currentRecordingType === 'single' ? singleShortcutInput : globalShortcutInput;
                finishRecording(input, button);
            }
            configModal.remove();
            configModal = null;
        });
 
        // 添加点击外部关闭功能
        document.addEventListener('mousedown', (e) => {
            if (configModal && !configModal.contains(e.target)) {
                closeConfigBtn.click();
            }
        });
    }
 
    // 添加用户操作标记
    function ImageState(imgElement) {
        this.element = imgElement;
        this.originalOpacity = getComputedStyle(imgElement).opacity;
        this.originalPointerEvents = getComputedStyle(imgElement).pointerEvents;
        this.isHidden = false;
        this.overlay = null;
        this.observers = new Set();
        this.lastToggleTime = 0;
        this.userManuallyShown = false;
        this.toggleDebounceDelay = 300;
        this.isProcessing = false;
    }
 
    ImageState.prototype.cleanup = function() {
        this.observers.forEach(observer => observer.disconnect());
        this.observers.clear();
        if (this.overlay) {
            this.overlay.cleanup?.();
            this.overlay.remove();
            this.overlay = null;
        }
    };
 
    // 优化覆盖层创建
    function createOverlay(imgElement) {
        if (!imgElement || !imgElement.parentNode) return null;

        const overlay = document.createElement('div');
        const state = imageStates.get(imgElement.dataset.imageId);
        if (!state) return null;

        const updatePosition = throttle(() => {
            if (!imgElement.parentNode) {
                overlay.remove();
                return;
            }

            const rect = imgElement.getBoundingClientRect();
            if (rect.width === 0 || rect.height === 0) return;

            Object.assign(overlay.style, {
                position: 'absolute',
                left: `${rect.left + window.scrollX}px`,
                top: `${rect.top + window.scrollY}px`,
                width: `${rect.width}px`,
                height: `${rect.height}px`,
                backgroundColor: 'transparent',
                pointerEvents: 'auto',
                zIndex: '9999'
            });
        }, 16);

        updatePosition();
        overlay.dataset.linkedImage = imgElement.dataset.imageId;

        const intersectionObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    updatePosition();
                }
            });
        }, {
            threshold: [0, 1]
        });

        intersectionObserver.observe(imgElement);
        state.observers.add(intersectionObserver);

        const resizeObserver = new ResizeObserver(updatePosition);
        resizeObserver.observe(imgElement);
        state.observers.add(resizeObserver);

        const scrollHandler = () => requestAnimationFrame(updatePosition);
        window.addEventListener('scroll', scrollHandler, { passive: true });

        overlay.addEventListener('mouseover', () => currentHoverTarget = imgElement);
        overlay.addEventListener('mouseout', () => currentHoverTarget = null);

        overlay.cleanup = () => {
            window.removeEventListener('scroll', scrollHandler);
            intersectionObserver.disconnect();
            resizeObserver.disconnect();
        };

        document.body.appendChild(overlay);
        return overlay;
    }
 
    // 修改 toggleImageVisibility 函数
    function toggleImageVisibility(imgElement, forceHide = false, isAutoHide = false) {
        if (!imgElement || !imgElement.parentNode) return;

        if (!imgElement.dataset.imageId) {
            imgElement.dataset.imageId = `img_${++globalImageCounter}`;
            imageStates.set(imgElement.dataset.imageId, new ImageState(imgElement));
        }

        const state = imageStates.get(imgElement.dataset.imageId);
        if (!state) return;

        const currentTime = Date.now();
        if (currentTime - state.lastToggleTime < state.toggleDebounceDelay || state.isProcessing) {
            return;
        }

        state.isProcessing = true;
        state.lastToggleTime = currentTime;

        if (isAutoHide && state.userManuallyShown) {
            state.isProcessing = false;
            return;
        }

        if (!isAutoHide) {
            state.userManuallyShown = !state.isHidden;
        }

        const shouldHide = forceHide || !state.isHidden;

        try {
            requestAnimationFrame(() => {
                if (shouldHide) {
                    if (!state.overlay) {
                        state.overlay = createOverlay(imgElement);
                    }
                    imgElement.style.cssText = `
                        opacity: 0 !important;
                        pointer-events: none !important;
                        transition: opacity 0.2s ease !important;
                    `;
                } else {
                    imgElement.style.cssText = `
                        opacity: ${state.originalOpacity || '1'} !important;
                        pointer-events: ${state.originalPointerEvents || 'auto'} !important;
                        transition: opacity 0.2s ease !important;
                    `;
                    state.cleanup();
                }
                state.isHidden = shouldHide;
                
                setTimeout(() => {
                    state.isProcessing = false;
                    
                    if (!shouldHide && parseFloat(getComputedStyle(imgElement).opacity) === 0) {
                        imgElement.style.cssText = `
                            opacity: ${state.originalOpacity || '1'} !important;
                            pointer-events: ${state.originalPointerEvents || 'auto'} !important;
                        `;
                    }
                }, 250);
            });
        } catch (error) {
            console.error('Toggle image visibility error:', error);
            state.isProcessing = false;
        }
    }
 
    // 添加节流函数
    function throttle(func, limit) {
        let inThrottle;
        return function(...args) {
            if (!inThrottle) {
                func.apply(this, args);
                inThrottle = true;
                setTimeout(() => inThrottle = false, limit);
            }
        }
    }
 
    // 键盘按下事件
    function handleKeyDown(event) {
        currentPressedKeys.add(event.code);
        checkShortcut();
    }
 
    // 键盘抬起事件
    function handleKeyUp(event) {
        currentPressedKeys.delete(event.code);
    }
 
    // 鼠标悬停处理
    function handleMouseOver(event) {
        if (event.target.tagName.toLowerCase() === 'img') {
            currentHoverTarget = event.target;
        }
    }
 
    // 鼠标移出处理
    function handleMouseOut(event) {
        if (event.target.tagName.toLowerCase() === 'img') {
            currentHoverTarget = null;
        }
    }
 
    // 重置状态的函数
    function resetState() {
        currentPressedKeys.clear();
        currentHoverTarget = null;
    }
 
    // 注册事件监听
    document.addEventListener('mouseover', handleMouseOver);
    document.addEventListener('mouseout', handleMouseOut);
    document.addEventListener('keydown', handleKeyDown);
    document.addEventListener('keyup', handleKeyUp);
 
    // 页面刷新/切换时重置按键状态
    window.addEventListener('beforeunload', resetState);
 
    // 注册菜单命令
    GM_registerMenuCommand('配置快捷键', createConfigModal);
 
    // 增加鼠标事件处理函数
    function handleMouseDown(event) {
        if (event.button === 1) {
            event.preventDefault();
            currentPressedKeys.add('MouseMiddle');
            checkShortcut();
        }
    }
 
    function handleMouseUp(event) {
        if (event.button === 1) {
            currentPressedKeys.delete('MouseMiddle');
        }
    }
 
    // 检查快捷键组合是否匹配
    function checkShortcut() {
        const shortcutConfig = getShortcutConfig();
 
        // 检查单个图片快捷键
        if (isShortcutMatch(shortcutConfig.single) &&
            currentHoverTarget &&
            currentHoverTarget.tagName.toLowerCase() === 'img') {
            toggleImageVisibility(currentHoverTarget);
        }
 
        // 检查全局快捷键
        if (isShortcutMatch(shortcutConfig.global)) {
            toggleAllImages();
        }
    }
 
    // 在主函数中添加鼠标事件监听
    document.addEventListener('mousedown', handleMouseDown);
    document.addEventListener('mouseup', handleMouseUp);
 
    // 修改页面加载事件监听
    document.addEventListener('DOMContentLoaded', initAutoHide);
    if (document.readyState !== 'loading') {
        initAutoHide();
    }
})();