// ==UserScript==
// @name         自动翻译助手
// @name:zh-CN   自动翻译助手
// @name:zh-TW   自動翻譯助手
// @name:zh-HK   自動翻譯助手
// @name:en      Auto Translation Assistant
// @namespace    https://github.com/eraycc
// @version      2.2.2
// @description  强大的网页翻译工具，支持多语言，可移动可缩放悬浮窗，白名单管理（样式完全独立）
// @author       Eray
// @icon         data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAAhUlEQVQ4je2SMQ6AIAxFeyfH4hLiYh8OoGMZ8Uok1UJ5Tdv0Jf/Sl/db0hAaC6FEUXgHxIGYgRZJqGQpRGOAMUABNkVnzI5I4Qz5PkBOtB6WQlTEnUqxhwhHAK54HUE5/5DxTSyG1njDQRIDaM3zkI5YV/hIlgyjXzGf/6xX1oB+jw8fAAAAAElFTkSuQmCC
// @run-at       document-start
// @match        *://*/*
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_addStyle
// @grant        GM_registerMenuCommand
// @grant        GM_unregisterMenuCommand
// @grant        GM_xmlhttpRequest
// @grant        unsafeWindow
// @license      Apache-2.0
// @require      https://unpkg.com/i18n-jsautotranslate@3.18.89/index.js
// @icon         data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHJlY3Qgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiByeD0iMTYiIGZpbGw9IiMyOTUzZTgiLz48Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIxMiIgZmlsbD0iIzQyYTVmNSIvPjxwYXRoIGQ9Ik00IDE2YzAgNi42IDUuNCAxMiAxMiAxMnMxMi01LjQgMTItMTIiIGZpbGw9Im5vbmUiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS41Ii8+PHBhdGggZD0iTTE2IDR2MjRNMjggMTZINCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjUiLz48Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSI0IiBmaWxsPSIjMjk1M2U4Ii8+PC9zdmc+
// ==/UserScript==

(function() {
    'use strict';

    // 工具函数
    function isMobile() {
        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) 
            || window.innerWidth <= 768;
    }

    function isDarkMode() {
        return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
    }

    function getCurrentDomain() {
        return window.location.hostname;
    }

    // 配置管理器
    class ConfigManager {
        constructor() {
            this.defaultConfig = {
                enabled: true,
                localLanguage: 'english',
                targetLanguage: 'chinese_simplified',
                autoTranslate: false,
                translateService: 'client.edge',
                customServiceUrls: '',
                panelPosition: { x: 100, y: 100 },
                panelWidth: 380,
                panelHeight: 500,
                panelOpacity: 1,
                ignoredClasses: '',
                ignoredIds: '',
                customTerms: '',
                enableListener: true,
                enableCache: true,
                translateAttributes: ['title', 'alt', 'placeholder'],
                whitelist: [],
                siteSpecificServices: {},
                enableSelectionTranslate: true
            };
            this.config = this.loadConfig();
        }

        loadConfig() {
            const saved = GM_getValue('translateConfig', null);
            if (saved) {
                if (!saved.panelWidth) saved.panelWidth = this.defaultConfig.panelWidth;
                if (!saved.panelHeight) saved.panelHeight = this.defaultConfig.panelHeight;
                if (!saved.localLanguage) saved.localLanguage = this.defaultConfig.localLanguage;
                if (saved.enableSelectionTranslate === undefined) saved.enableSelectionTranslate = this.defaultConfig.enableSelectionTranslate;
                return { ...this.defaultConfig, ...saved };
            }
            return { ...this.defaultConfig };
        }

        saveConfig() {
            GM_setValue('translateConfig', this.config);
        }

        get(key) {
            return this.config[key];
        }

        set(key, value) {
            this.config[key] = value;
            this.saveConfig();
        }

        reset() {
            GM_deleteValue('translateConfig');
            this.config = { ...this.defaultConfig };
            this.saveConfig();
        }

        clearCache() {
            if (typeof translate !== 'undefined') {
                try {
                    translate.storage.clear();
                } catch (e) { console.log('清除translate.js缓存失败:', e); }
            }
            const keys = Object.keys(localStorage);
            let cleared = 0;
            keys.forEach(key => {
                if (key.includes('translate_') || key.includes('hash_')) {
                    localStorage.removeItem(key);
                    cleared++;
                }
            });
            return cleared;
        }

        isInWhitelist(domain) {
            return this.config.whitelist.includes(domain);
        }

        addToWhitelist(domain) {
            if (!this.isInWhitelist(domain)) {
                this.config.whitelist.push(domain);
                this.saveConfig();
                return true;
            }
            return false;
        }

        removeFromWhitelist(domain) {
            const index = this.config.whitelist.indexOf(domain);
            if (index !== -1) {
                this.config.whitelist.splice(index, 1);
                this.saveConfig();
                return true;
            }
            return false;
        }

        clearWhitelist() {
            this.config.whitelist = [];
            this.saveConfig();
        }

        toggleWhitelistDomain(domain) {
            if (this.isInWhitelist(domain)) {
                this.removeFromWhitelist(domain);
                return false;
            } else {
                this.addToWhitelist(domain);
                return true;
            }
        }

        shouldTranslate() {
            if (this.isInWhitelist(getCurrentDomain())) return true;
            return this.config.enabled;
        }

        getSiteService(domain) {
            return this.config.siteSpecificServices[domain] || null;
        }

        setSiteService(domain, service) {
            if (service && service !== this.config.translateService) {
                this.config.siteSpecificServices[domain] = service;
            } else {
                delete this.config.siteSpecificServices[domain];
            }
            this.saveConfig();
        }

        getEffectiveService(domain) {
            const siteService = this.getSiteService(domain);
            return siteService || this.config.translateService;
        }
    }

    // 翻译管理器
    class TranslateManager {
        constructor(configManager) {
            this.configManager = configManager;
            this.initialized = false;
            this.listenerStarted = false;
            this.currentLanguage = null;
            this.isTranslating = false;
        }

        init() {
            if (this.initialized || typeof translate === 'undefined') return;
            
            try {
                translate.language.setLocal(this.configManager.get('localLanguage'));
                
                const domain = getCurrentDomain();
                const service = this.configManager.getEffectiveService(domain);
                translate.service.use(service);
                
                if (service === 'translate.service') {
                    const customUrls = this.configManager.get('customServiceUrls');
                    if (customUrls) {
                        const urls = customUrls.split(',').map(url => url.trim()).filter(url => url);
                        if (urls.length > 0) {
                            translate.request.api.host = urls.length === 1 ? urls[0] : urls;
                        }
                    }
                }
                
                translate.selectLanguageTag.show = false;
                this.applyIgnoreSettings();
                this.applyCustomTerms();

                const translateAttributes = this.configManager.get('translateAttributes');
                if (translateAttributes.length > 0) {
                    translate.translateAttributes = translateAttributes;
                }

                translate.showOrigin = false;

                if (this.configManager.get('enableCache')) {
                    translate.storage.enable();
                } else {
                    translate.storage.disable();
                }

                this.initialized = true;
                console.log('翻译管理器初始化完成');
            } catch (error) {
                console.error('翻译初始化失败:', error);
            }
        }

        applyIgnoreSettings() {
            if (typeof translate === 'undefined') return;
            translate.ignore.class = [];
            translate.ignore.id = [];
            
            const ignoredClasses = this.configManager.get('ignoredClasses');
            if (ignoredClasses) {
                ignoredClasses.split(',').map(c => c.trim()).filter(c => c).forEach(cls => translate.ignore.class.push(cls));
            }
            const ignoredIds = this.configManager.get('ignoredIds');
            if (ignoredIds) {
                ignoredIds.split(',').map(id => id.trim()).filter(id => id).forEach(id => translate.ignore.id.push(id));
            }
        }

        applyCustomTerms() {
            if (typeof translate === 'undefined') return;
            const customTerms = this.configManager.get('customTerms');
            if (!customTerms) return;
            const localLang = this.configManager.get('localLanguage');
            const targetLang = this.configManager.get('targetLanguage');
            translate.nomenclature.append(localLang, targetLang, customTerms);
        }

        startListener() {
            if (!this.listenerStarted && typeof translate !== 'undefined') {
                try {
                    if (this.configManager.get('enableListener')) {
                        translate.listener.start();
                        this.listenerStarted = true;
                        console.log('动态内容监听已启动');
                    }
                } catch (error) {
                    if (!error.message?.includes('已经启动')) {
                        console.error('启动监听失败:', error);
                    }
                }
            }
        }

        changeLanguage(targetLang, force = false) {
            if (!this.initialized) this.init();
            if (typeof translate === 'undefined') return;
            
            if (!force && this.currentLanguage === targetLang && this.isTranslating) return;
            
            this.isTranslating = true;
            this.init();
            this.applyIgnoreSettings();
            this.applyCustomTerms();
            this.startListener();
            
            translate.changeLanguage(targetLang);
            
            setTimeout(() => {
                this.isTranslating = false;
                this.currentLanguage = targetLang;
            }, 1000);
        }

        forceTranslate() {
            const targetLang = this.configManager.get('targetLanguage');
            this.changeLanguage(targetLang, true);
        }

        refresh() {
            const should = this.configManager.shouldTranslate();
            if (should) {
                this.forceTranslate();
            } else {
                this.changeLanguage(null, true);
            }
        }

        startAutoTranslate() {
            if (!this.initialized) this.init();
            this.startListener();
            
            const should = this.configManager.shouldTranslate();
            const auto = this.configManager.get('autoTranslate');
            
            if (should && (auto || this.configManager.isInWhitelist(getCurrentDomain()))) {
                setTimeout(() => this.forceTranslate(), 100);
            } else if (!should && !auto) {
                setTimeout(() => this.changeLanguage(null, true), 100);
            }
        }

        startSelectionTranslate() {
            if (!this.initialized) this.init();
            if (typeof translate !== 'undefined') {
                try {
                    translate.language.setDefaultTo(this.configManager.get('targetLanguage'));
                    translate.selectionTranslate.start();
                } catch (error) {
                    console.error('启动划词翻译失败:', error);
                }
            }
        }

        stopSelectionTranslate() {
            if (typeof translate !== 'undefined' && translate.selectionTranslate) {
                try {
                    translate.selectionTranslate.stop();
                } catch (error) {
                    console.error('停止划词翻译失败:', error);
                }
            }
        }
    }

    // 提示管理器
    class ToastManager {
        constructor() {
            this.container = null;
            this.init();
        }
        init() {
            this.container = document.createElement('div');
            this.container.id = 'translate-toast-container';
            this.container.style.cssText = `
                position: fixed !important;
                top: 20px !important;
                right: 20px !important;
                z-index: 2147483647 !important;
                pointer-events: none !important;
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
            `;
            document.body.appendChild(this.container);
        }
        show(message, type = 'success', duration = 2000) {
            const toast = document.createElement('div');
            const bgColor = type === 'success' ? '#10b981' : type === 'error' ? '#ef4444' : '#3b82f6';
            toast.style.cssText = `
                background: ${bgColor} !important;
                color: white !important;
                padding: 12px 20px !important;
                border-radius: 12px !important;
                margin-bottom: 10px !important;
                box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.02) !important;
                animation: slideInRight 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
                pointer-events: auto !important;
                font-size: 14px !important;
                font-weight: 500 !important;
                backdrop-filter: blur(8px) !important;
            `;
            toast.textContent = message;
            this.container.appendChild(toast);
            setTimeout(() => {
                toast.style.animation = 'slideOutRight 0.3s ease !important';
                setTimeout(() => {
                    if (this.container.contains(toast)) this.container.removeChild(toast);
                }, 300);
            }, duration);
        }
    }

    // UI管理器 - 确保样式完全独立
    class UIManager {
        constructor(configManager, translateManager) {
            this.configManager = configManager;
            this.translateManager = translateManager;
            this.panel = null;
            this.toast = new ToastManager();
            this.isDragging = false;
            this.isResizing = false;
            this.init();
        }

        init() {
            this.injectStyles();
            this.createPanel();
            this.bindEvents();
            setTimeout(() => this.translateManager.startAutoTranslate(), 500);
            if (!isMobile()) setTimeout(() => this.translateManager.startSelectionTranslate(), 1500);
        }

        injectStyles() {
            const darkMode = isDarkMode();
            // 使用更严格的样式，添加 !important 防止被覆盖
            GM_addStyle(`
                @keyframes slideInRight {
                    from { transform: translateX(100%); opacity: 0; }
                    to { transform: translateX(0); opacity: 1; }
                }
                @keyframes slideOutRight {
                    from { transform: translateX(0); opacity: 1; }
                    to { transform: translateX(100%); opacity: 0; }
                }
                @keyframes fadeIn {
                    from { opacity: 0; transform: scale(0.95); }
                    to { opacity: 1; transform: scale(1); }
                }
                
                #translate-panel {
                    position: fixed !important;
                    border-radius: 12px !important;
                    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.2) !important;
                    z-index: 2147483646 !important;
                    display: none !important;
                    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
                    overflow: hidden !important;
                    touch-action: none !important;
                    user-select: none !important;
                    -webkit-user-select: none !important;
                    transition: none !important;
                    min-width: 280px !important;
                    min-height: 300px !important;
                    max-width: 90vw !important;
                    max-height: 80vh !important;
                    backdrop-filter: blur(20px) !important;
                    ${darkMode ? `
                        background: rgba(30, 30, 35, 0.95) !important;
                        border: 1px solid rgba(255, 255, 255, 0.1) !important;
                    ` : `
                        background: rgba(255, 255, 255, 0.95) !important;
                        border: 1px solid rgba(255, 255, 255, 0.3) !important;
                    `}
                }
                #translate-panel.show {
                    display: flex !important;
                    flex-direction: column !important;
                    animation: fadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
                }
                #translate-panel.dragging {
                    transition: none !important;
                    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3) !important;
                    cursor: grabbing !important;
                }
                #translate-panel.resizing {
                    transition: none !important;
                    cursor: nw-resize !important;
                }
                .translate-panel-header {
                    padding: 12px 16px !important;
                    display: flex !important;
                    justify-content: space-between !important;
                    align-items: center !important;
                    cursor: move !important;
                    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
                    flex-shrink: 0 !important;
                    ${darkMode ? `
                        background: rgba(0, 0, 0, 0.3) !important;
                        border-bottom-color: rgba(255, 255, 255, 0.1) !important;
                    ` : `
                        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
                    `}
                }
                .translate-panel-title {
                    font-size: 16px !important;
                    font-weight: 600 !important;
                    user-select: none !important;
                    letter-spacing: -0.01em !important;
                    display: flex !important;
                    align-items: center !important;
                    gap: 6px !important;
                    color: white !important;
                }
                .translate-panel-close {
                    width: 28px !important;
                    height: 28px !important;
                    border-radius: 50% !important;
                    background: rgba(0, 0, 0, 0.1) !important;
                    border: none !important;
                    cursor: pointer !important;
                    display: flex !important;
                    align-items: center !important;
                    justify-content: center !important;
                    transition: all 0.2s !important;
                    font-size: 16px !important;
                    color: white !important;
                }
                .translate-panel-close:hover { background: rgba(0, 0, 0, 0.2) !important; transform: scale(1.05) !important; }
                .translate-panel-close:active { transform: scale(0.95) !important; }
                .translate-panel-body {
                    padding: 16px !important;
                    overflow-y: auto !important;
                    -webkit-overflow-scrolling: touch !important;
                    cursor: default !important;
                    flex: 1 !important;
                }
                .translate-panel-body::-webkit-scrollbar { width: 4px !important; }
                .translate-panel-body::-webkit-scrollbar-track { background: transparent !important; }
                .translate-panel-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2) !important; border-radius: 10px !important; }
                .translate-control-group { margin-bottom: 16px !important; }
                .translate-control-label {
                    display: flex !important;
                    align-items: center !important;
                    gap: 6px !important;
                    margin-bottom: 6px !important;
                    font-size: 13px !important;
                    font-weight: 500 !important;
                    ${darkMode ? `color: #e5e7eb !important;` : `color: #1f2937 !important;`}
                }
                .translate-description {
                    font-size: 11px !important;
                    ${darkMode ? `color: #9ca3af !important;` : `color: #6b7280 !important;`}
                    margin-top: 2px !important;
                    font-weight: normal !important;
                }
                .translate-switch {
                    position: relative !important;
                    display: inline-block !important;
                    width: 40px !important;
                    height: 22px !important;
                }
                .translate-switch input {
                    opacity: 0 !important;
                    width: 0 !important;
                    height: 0 !important;
                }
                .translate-switch-slider {
                    position: absolute !important;
                    cursor: pointer !important;
                    top: 0 !important;
                    left: 0 !important;
                    right: 0 !important;
                    bottom: 0 !important;
                    background-color: #cbd5e1 !important;
                    transition: .2s !important;
                    border-radius: 34px !important;
                }
                .translate-switch-slider:before {
                    position: absolute !important;
                    content: "" !important;
                    height: 16px !important;
                    width: 16px !important;
                    left: 3px !important;
                    bottom: 3px !important;
                    background-color: white !important;
                    transition: .2s !important;
                    border-radius: 50% !important;
                    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
                }
                .translate-switch input:checked + .translate-switch-slider { background-color: #8b5cf6 !important; }
                .translate-switch input:checked + .translate-switch-slider:before { transform: translateX(18px) !important; }
                .translate-select, .translate-input {
                    width: 100% !important;
                    padding: 8px 12px !important;
                    border: 1px solid #e5e7eb !important;
                    border-radius: 8px !important;
                    font-size: 13px !important;
                    transition: all 0.2s !important;
                    box-sizing: border-box !important;
                    font-family: inherit !important;
                    ${darkMode ? `
                        background: rgba(50, 50, 55, 0.8) !important;
                        color: #e5e7eb !important;
                        border-color: rgba(255, 255, 255, 0.1) !important;
                    ` : `
                        background: rgba(255, 255, 255, 0.8) !important;
                        color: #1f2937 !important;
                    `}
                }
                .translate-select:focus, .translate-input:focus {
                    outline: none !important;
                    border-color: #8b5cf6 !important;
                    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.1) !important;
                }
                .translate-textarea {
                    width: 100% !important;
                    min-height: 80px !important;
                    padding: 8px 12px !important;
                    border: 1px solid #e5e7eb !important;
                    border-radius: 8px !important;
                    font-size: 12px !important;
                    transition: all 0.2s !important;
                    box-sizing: border-box !important;
                    resize: vertical !important;
                    font-family: monospace !important;
                    line-height: 1.4 !important;
                    ${darkMode ? `
                        background: rgba(50, 50, 55, 0.8) !important;
                        color: #e5e7eb !important;
                        border-color: rgba(255, 255, 255, 0.1) !important;
                    ` : `
                        background: rgba(255, 255, 255, 0.8) !important;
                        color: #1f2937 !important;
                    `}
                }
                .translate-textarea:focus {
                    outline: none !important;
                    border-color: #8b5cf6 !important;
                    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.1) !important;
                }
                .translate-button {
                    width: 100% !important;
                    padding: 8px !important;
                    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%) !important;
                    color: white !important;
                    border: none !important;
                    border-radius: 8px !important;
                    font-size: 13px !important;
                    font-weight: 500 !important;
                    cursor: pointer !important;
                    transition: all 0.2s !important;
                    -webkit-tap-highlight-color: transparent !important;
                    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
                }
                .translate-button:hover { transform: translateY(-1px) !important; box-shadow: 0 4px 10px rgba(139, 92, 246, 0.2) !important; }
                .translate-button:active { transform: scale(0.98) !important; }
                .translate-button-group {
                    display: flex !important;
                    gap: 10px !important;
                    margin-bottom: 16px !important;
                }
                .translate-button-group .translate-button { flex: 1 !important; }
                .translate-section-title {
                    font-size: 15px !important;
                    font-weight: 600 !important;
                    ${darkMode ? `color: #e5e7eb !important;` : `color: #1f2937 !important;`}
                    margin: 20px 0 12px !important;
                    padding-bottom: 6px !important;
                    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
                    letter-spacing: -0.2px !important;
                }
                .translate-section-title:first-of-type { margin-top: 0 !important; }
                .translate-info {
                    background: rgba(0, 0, 0, 0.03) !important;
                    padding: 12px !important;
                    border-radius: 8px !important;
                    font-size: 11px !important;
                    ${darkMode ? `color: #9ca3af !important;` : `color: #6b7280 !important;`}
                    margin-top: 12px !important;
                    line-height: 1.4 !important;
                }
                details { margin-top: 10px !important; }
                summary {
                    cursor: pointer !important;
                    font-size: 13px !important;
                    font-weight: 500 !important;
                    color: #8b5cf6 !important;
                    padding: 6px 0 !important;
                    user-select: none !important;
                }
                summary:hover { color: #6366f1 !important; }
                .advanced-content { margin-top: 12px !important; }
                .resize-handle {
                    position: absolute !important;
                    bottom: 0 !important;
                    right: 0 !important;
                    width: 16px !important;
                    height: 16px !important;
                    cursor: nw-resize !important;
                    background: rgba(0,0,0,0.1) !important;
                    border-radius: 0 0 12px 0 !important;
                    z-index: 10 !important;
                }
                .resize-handle:hover { background: rgba(139, 92, 246, 0.3) !important; }
                .size-slider-container {
                    margin-top: 8px !important;
                    display: flex !important;
                    align-items: center !important;
                    gap: 10px !important;
                }
                .size-slider-container .translate-slider { flex: 1 !important; }
            `);
        }

        createPanel() {
            const panel = document.createElement('div');
            panel.id = 'translate-panel';
            
            const languages = this.getSupportedLanguages();
            const services = [
                { value: 'client.edge', name: '微软 Edge' },
                { value: 'giteeai', name: 'gitee AI' },
                { value: 'siliconflow', name: 'SiliconFlow AI' },
                { value: 'translate.service', name: '自定义服务' }
            ];

            const config = this.configManager.config;
            const currentDomain = getCurrentDomain();
            const inWhitelist = this.configManager.isInWhitelist(currentDomain);
            const siteService = this.configManager.getSiteService(currentDomain);
            const currentEffectiveService = this.configManager.getEffectiveService(currentDomain);
            const mobile = isMobile();

            panel.innerHTML = `
                <div class="translate-panel-header">
                    <div class="translate-panel-title"><span>✨</span> 自动翻译助手</div>
                    <button class="translate-panel-close" id="translate-panel-close">✕</button>
                </div>
                <div class="translate-panel-body">
                    <div class="translate-section-title">基础设置</div>
                    <div class="translate-control-group">
                        <label class="translate-control-label"><span>🌍</span> 源语言</label>
                        <select class="translate-select" id="translate-local-lang">
                            ${languages.map(lang => `<option value="${lang.value}" ${config.localLanguage === lang.value ? 'selected' : ''}>${lang.name}</option>`).join('')}
                        </select>
                    </div>
                    <div class="translate-control-group">
                        <label class="translate-control-label"><span>🎯</span> 目标语言</label>
                        <select class="translate-select" id="translate-target-lang">
                            ${languages.map(lang => `<option value="${lang.value}" ${config.targetLanguage === lang.value ? 'selected' : ''}>${lang.name}</option>`).join('')}
                        </select>
                    </div>
                    <div class="translate-control-group">
                        <label class="translate-control-label"><span>🔌</span> 全局翻译引擎</label>
                        <select class="translate-select" id="translate-service">
                            ${services.map(s => `<option value="${s.value}" ${config.translateService === s.value ? 'selected' : ''}>${s.name}</option>`).join('')}
                        </select>
                    </div>
                    <div class="translate-control-group">
                        <label class="translate-control-label"><span>⚡</span> 专用引擎（当前网站）</label>
                        <div class="translate-button-group">
                            <select class="translate-select" id="site-specific-service" style="flex:2;">
                                <option value="">(使用全局引擎)</option>
                                ${services.map(s => `<option value="${s.value}" ${siteService === s.value ? 'selected' : ''}>${s.name}</option>`).join('')}
                            </select>
                            <button class="translate-button" id="save-site-service" style="flex:1;">保存</button>
                        </div>
                        <div class="translate-description">当前生效: ${services.find(s => s.value === currentEffectiveService)?.name || currentEffectiveService}</div>
                    </div>

                    <div class="translate-section-title">白名单设置</div>
                    <div class="translate-control-group">
                        <div class="translate-button-group">
                            <button class="translate-button" id="translate-add-whitelist" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%);">
                                ${inWhitelist ? '✓ 已添加' : '➕ 添加当前网站'}
                            </button>
                            ${inWhitelist ? `<button class="translate-button" id="translate-remove-whitelist" style="background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);">❌ 移除</button>` : ''}
                            <button class="translate-button" id="translate-clear-whitelist" style="background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);">🗑️ 清空白名单</button>
                        </div>
                        <div class="translate-description">当前白名单网站数: ${config.whitelist.length} | 当前网站: ${currentDomain}</div>
                    </div>

                    <details>
                        <summary>⚙️ 高级设置</summary>
                        <div class="advanced-content">
                            <div class="translate-control-group">
                                <label class="translate-control-label">忽略Class</label>
                                <input type="text" class="translate-input" id="ignore-class-input" placeholder="class1,class2" value="${config.ignoredClasses}">
                                <button class="translate-button" id="save-ignore-class" style="margin-top:6px;">保存</button>
                            </div>
                            <div class="translate-control-group">
                                <label class="translate-control-label">忽略ID</label>
                                <input type="text" class="translate-input" id="ignore-id-input" placeholder="id1,id2" value="${config.ignoredIds}">
                                <button class="translate-button" id="save-ignore-id" style="margin-top:6px;">保存</button>
                            </div>
                            <div class="translate-control-group">
                                <label class="translate-control-label">自定义术语</label>
                                <textarea class="translate-textarea" id="custom-terms-input" placeholder="原文=翻译&#10;例如：&#10;百度=baidu">${config.customTerms}</textarea>
                                <button class="translate-button" id="save-custom-terms" style="margin-top:6px;">保存</button>
                            </div>
                            ${!mobile ? `<div class="translate-control-group">
                                <label class="translate-control-label">鼠标划词翻译</label>
                                <label class="translate-switch"><input type="checkbox" id="translate-selection" ${config.enableSelectionTranslate ? 'checked' : ''}><span class="translate-switch-slider"></span></label>
                            </div>` : ''}
                            <div class="translate-control-group">
                                <label class="translate-control-label">动态内容监听</label>
                                <label class="translate-switch"><input type="checkbox" id="translate-listener" ${config.enableListener ? 'checked' : ''}><span class="translate-switch-slider"></span></label>
                            </div>
                            <div class="translate-control-group">
                                <label class="translate-control-label">缓存优化</label>
                                <label class="translate-switch"><input type="checkbox" id="translate-cache" ${config.enableCache ? 'checked' : ''}><span class="translate-switch-slider"></span></label>
                            </div>
                            <div class="translate-button-group">
                                <button class="translate-button" id="translate-clear-cache" style="background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);">清除缓存</button>
                                <button class="translate-button" id="translate-reset-all" style="background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);">重置所有</button>
                            </div>
                        </div>
                    </details>

                    ${mobile ? `
                    <details>
                        <summary>📐 窗口大小调整</summary>
                        <div class="advanced-content">
                            <div class="translate-control-group">
                                <label class="translate-control-label">宽度</label>
                                <div class="size-slider-container">
                                    <input type="range" class="translate-slider" id="mobile-width-slider" min="280" max="${Math.min(window.innerWidth, 500)}" value="${this.panel ? this.panel.offsetWidth : config.panelWidth}">
                                    <span class="translate-slider-value" id="mobile-width-value">${this.panel ? this.panel.offsetWidth : config.panelWidth}px</span>
                                </div>
                                <label class="translate-control-label" style="margin-top:8px;">高度</label>
                                <div class="size-slider-container">
                                    <input type="range" class="translate-slider" id="mobile-height-slider" min="300" max="${Math.min(window.innerHeight, 600)}" value="${this.panel ? this.panel.offsetHeight : config.panelHeight}">
                                    <span class="translate-slider-value" id="mobile-height-value">${this.panel ? this.panel.offsetHeight : config.panelHeight}px</span>
                                </div>
                            </div>
                        </div>
                    </details>
                    ` : ''}

                    <div class="translate-info">
                        💡 提示：拖动标题栏可移动窗口，右下角可调整大小（PC端）<br>
                        📌 白名单网站始终翻译，不受全局开关影响
                    </div>
                </div>
                <div class="resize-handle" id="resize-handle"></div>
            `;
            
            document.body.appendChild(panel);
            this.panel = panel;
            this.panel.style.width = `${config.panelWidth}px`;
            this.panel.style.height = `${config.panelHeight}px`;
            if (config.panelPosition?.x !== undefined) {
                this.panel.style.left = `${config.panelPosition.x}px`;
                this.panel.style.top = `${config.panelPosition.y}px`;
            } else {
                this.positionPanel();
            }
            this.panel.style.opacity = config.panelOpacity;

            if (mobile) {
                const widthSlider = document.getElementById('mobile-width-slider');
                const heightSlider = document.getElementById('mobile-height-slider');
                const widthVal = document.getElementById('mobile-width-value');
                const heightVal = document.getElementById('mobile-height-value');
                if (widthSlider) {
                    widthSlider.addEventListener('input', (e) => {
                        const w = parseInt(e.target.value);
                        this.panel.style.width = `${w}px`;
                        widthVal.textContent = `${w}px`;
                        this.configManager.set('panelWidth', w);
                        this.ensureInViewport();
                    });
                }
                if (heightSlider) {
                    heightSlider.addEventListener('input', (e) => {
                        const h = parseInt(e.target.value);
                        this.panel.style.height = `${h}px`;
                        heightVal.textContent = `${h}px`;
                        this.configManager.set('panelHeight', h);
                        this.ensureInViewport();
                    });
                }
            }
        }

        getSupportedLanguages() {
            return [
                { value: 'chinese_simplified', name: '简体中文' },
                { value: 'chinese_traditional', name: '繁體中文' },
                { value: 'english', name: 'English' },
                { value: 'spanish', name: 'Español' },
                { value: 'french', name: 'Français' },
                { value: 'german', name: 'Deutsch' },
                { value: 'japanese', name: '日本語' },
                { value: 'korean', name: '한국어' },
                { value: 'russian', name: 'Русский' },
                { value: 'portuguese', name: 'Português' },
                { value: 'italian', name: 'Italiano' },
                { value: 'dutch', name: 'Nederlands' },
                { value: 'polish', name: 'Polski' },
                { value: 'turkish', name: 'Türkçe' },
                { value: 'vietnamese', name: 'Tiếng Việt' },
                { value: 'thai', name: 'ไทย' },
                { value: 'indonesian', name: 'Bahasa Indonesia' },
                { value: 'arabic', name: 'العربية' },
                { value: 'hindi', name: 'हिन्दी' }
            ];
        }

        bindEvents() {
            document.getElementById('translate-panel-close')?.addEventListener('click', () => this.togglePanel());

            document.getElementById('translate-local-lang')?.addEventListener('change', (e) => {
                const val = e.target.value;
                this.configManager.set('localLanguage', val);
                translate.language.setLocal(val);
                this.translateManager.refresh();
                this.toast.show('✅ 源语言已更新');
            });

            document.getElementById('translate-target-lang')?.addEventListener('change', (e) => {
                this.configManager.set('targetLanguage', e.target.value);
                this.translateManager.refresh();
                this.toast.show('✅ 目标语言已更新');
            });

            document.getElementById('translate-add-whitelist')?.addEventListener('click', () => {
                const domain = getCurrentDomain();
                if (this.configManager.addToWhitelist(domain)) {
                    this.toast.show(`✅ 已添加 ${domain} 到白名单`);
                    this.translateManager.refresh();
                    this.refreshWhitelistButtons();
                    window.updateMenuItems?.();
                } else {
                    this.toast.show(`⚠️ ${domain} 已在白名单中`, 'error');
                }
            });

            document.getElementById('translate-remove-whitelist')?.addEventListener('click', () => {
                const domain = getCurrentDomain();
                if (this.configManager.removeFromWhitelist(domain)) {
                    this.toast.show(`❌ 已移出 ${domain} 白名单`);
                    this.translateManager.refresh();
                    this.refreshWhitelistButtons();
                    window.updateMenuItems?.();
                }
            });

            document.getElementById('translate-clear-whitelist')?.addEventListener('click', () => {
                if (confirm('确定清空所有白名单网站？')) {
                    this.configManager.clearWhitelist();
                    this.toast.show('✅ 白名单已清空');
                    this.refreshWhitelistButtons();
                    this.translateManager.refresh();
                    window.updateMenuItems?.();
                }
            });

            document.getElementById('save-site-service')?.addEventListener('click', () => {
                const service = document.getElementById('site-specific-service').value;
                const domain = getCurrentDomain();
                this.configManager.setSiteService(domain, service || null);
                this.toast.show(`✅ 已为 ${domain} ${service ? '设置专用引擎' : '清除专用引擎'}`);
                const effective = this.configManager.getEffectiveService(domain);
                const desc = document.querySelector('#site-specific-service')?.closest('.translate-control-group')?.querySelector('.translate-description:last-child');
                if (desc) {
                    const map = { 'client.edge':'微软 Edge', 'giteeai':'gitee AI', 'siliconflow':'SiliconFlow AI', 'translate.service':'自定义服务' };
                    desc.textContent = `当前生效: ${map[effective] || effective}`;
                }
                this.translateManager.init();
                this.translateManager.refresh();
            });

            document.getElementById('translate-service')?.addEventListener('change', (e) => {
                this.configManager.set('translateService', e.target.value);
                const domain = getCurrentDomain();
                const effective = this.configManager.getEffectiveService(domain);
                if (typeof translate !== 'undefined') translate.service.use(effective);
                this.toast.show('✅ 全局翻译引擎已更新');
                if (!this.configManager.getSiteService(domain)) {
                    this.translateManager.init();
                    this.translateManager.refresh();
                }
            });

            document.getElementById('save-ignore-class')?.addEventListener('click', () => {
                this.configManager.set('ignoredClasses', document.getElementById('ignore-class-input').value.trim());
                this.translateManager.applyIgnoreSettings();
                this.toast.show('✅ 忽略Class已保存');
            });
            document.getElementById('save-ignore-id')?.addEventListener('click', () => {
                this.configManager.set('ignoredIds', document.getElementById('ignore-id-input').value.trim());
                this.translateManager.applyIgnoreSettings();
                this.toast.show('✅ 忽略ID已保存');
            });
            document.getElementById('save-custom-terms')?.addEventListener('click', () => {
                this.configManager.set('customTerms', document.getElementById('custom-terms-input').value.trim());
                this.translateManager.applyCustomTerms();
                this.toast.show('✅ 自定义术语已保存');
            });

            const selectionToggle = document.getElementById('translate-selection');
            if (selectionToggle) {
                selectionToggle.addEventListener('change', (e) => {
                    this.configManager.set('enableSelectionTranslate', e.target.checked);
                    e.target.checked ? this.translateManager.startSelectionTranslate() : this.translateManager.stopSelectionTranslate();
                    this.toast.show(e.target.checked ? '✅ 划词翻译已启用' : '❌ 划词翻译已禁用');
                });
            }

            document.getElementById('translate-listener')?.addEventListener('change', (e) => {
                this.configManager.set('enableListener', e.target.checked);
                if (e.target.checked && !this.translateManager.listenerStarted) this.translateManager.startListener();
                this.toast.show(e.target.checked ? '✅ 动态监听已启用' : '❌ 动态监听已禁用');
            });
            document.getElementById('translate-cache')?.addEventListener('change', (e) => {
                this.configManager.set('enableCache', e.target.checked);
                if (typeof translate !== 'undefined' && translate.storage) {
                    e.target.checked ? translate.storage.enable() : translate.storage.disable();
                }
                this.toast.show(e.target.checked ? '✅ 缓存已启用' : '❌ 缓存已禁用');
            });
            document.getElementById('translate-clear-cache')?.addEventListener('click', () => {
                const cleared = this.configManager.clearCache();
                this.toast.show(`✅ 已清除 ${cleared} 个缓存项`);
            });
            document.getElementById('translate-reset-all')?.addEventListener('click', () => {
                if (confirm('确定重置所有设置？此操作不可撤销。')) {
                    this.configManager.reset();
                    this.toast.show('✅ 已重置，页面将刷新', 'success', 1500);
                    setTimeout(() => location.reload(), 1500);
                }
            });

            window.addEventListener('resize', () => this.ensureInViewport());
            window.addEventListener('orientationchange', () => setTimeout(() => this.ensureInViewport(), 300));

            this.bindPanelDragEvents();
            this.bindResizeEvents();
        }

        bindPanelDragEvents() {
            const header = this.panel.querySelector('.translate-panel-header');
            let startX, startY, startLeft, startTop;
            const onMouseMove = (e) => {
                if (!this.isDragging) return;
                let newLeft = startLeft + (e.clientX - startX);
                let newTop = startTop + (e.clientY - startY);
                newLeft = Math.max(0, Math.min(newLeft, window.innerWidth - this.panel.offsetWidth));
                newTop = Math.max(0, Math.min(newTop, window.innerHeight - this.panel.offsetHeight));
                this.panel.style.left = `${newLeft}px`;
                this.panel.style.top = `${newTop}px`;
            };
            const onMouseUp = () => {
                if (this.isDragging) {
                    this.isDragging = false;
                    this.panel.classList.remove('dragging');
                    document.removeEventListener('mousemove', onMouseMove);
                    document.removeEventListener('mouseup', onMouseUp);
                    this.configManager.set('panelPosition', { x: parseInt(this.panel.style.left), y: parseInt(this.panel.style.top) });
                }
            };
            header.addEventListener('touchstart', (e) => {
                if (e.target.id === 'translate-panel-close') return;
                const touch = e.touches[0];
                startX = touch.clientX;
                startY = touch.clientY;
                startLeft = this.panel.offsetLeft;
                startTop = this.panel.offsetTop;
                this.isDragging = true;
                this.panel.classList.add('dragging');
                e.preventDefault();
            });
            header.addEventListener('touchmove', (e) => {
                if (!this.isDragging) return;
                const touch = e.touches[0];
                let newLeft = startLeft + (touch.clientX - startX);
                let newTop = startTop + (touch.clientY - startY);
                newLeft = Math.max(0, Math.min(newLeft, window.innerWidth - this.panel.offsetWidth));
                newTop = Math.max(0, Math.min(newTop, window.innerHeight - this.panel.offsetHeight));
                this.panel.style.left = `${newLeft}px`;
                this.panel.style.top = `${newTop}px`;
                e.preventDefault();
            });
            header.addEventListener('touchend', () => {
                if (this.isDragging) {
                    this.isDragging = false;
                    this.panel.classList.remove('dragging');
                    this.configManager.set('panelPosition', { x: parseInt(this.panel.style.left), y: parseInt(this.panel.style.top) });
                }
            });
            header.addEventListener('mousedown', (e) => {
                if (e.target.id === 'translate-panel-close') return;
                this.isDragging = true;
                startX = e.clientX;
                startY = e.clientY;
                startLeft = this.panel.offsetLeft;
                startTop = this.panel.offsetTop;
                this.panel.classList.add('dragging');
                document.addEventListener('mousemove', onMouseMove);
                document.addEventListener('mouseup', onMouseUp);
                e.preventDefault();
            });
        }

        bindResizeEvents() {
            const handle = document.getElementById('resize-handle');
            if (!handle || isMobile()) return;
            let startX, startY, startWidth, startHeight;
            const onMouseMove = (e) => {
                if (!this.isResizing) return;
                let newWidth = startWidth + (e.clientX - startX);
                let newHeight = startHeight + (e.clientY - startY);
                newWidth = Math.max(280, Math.min(newWidth, window.innerWidth - this.panel.offsetLeft - 10));
                newHeight = Math.max(300, Math.min(newHeight, window.innerHeight - this.panel.offsetTop - 10));
                this.panel.style.width = `${newWidth}px`;
                this.panel.style.height = `${newHeight}px`;
            };
            const onMouseUp = () => {
                if (this.isResizing) {
                    this.isResizing = false;
                    this.panel.classList.remove('resizing');
                    document.removeEventListener('mousemove', onMouseMove);
                    document.removeEventListener('mouseup', onMouseUp);
                    this.configManager.set('panelWidth', parseInt(this.panel.style.width));
                    this.configManager.set('panelHeight', parseInt(this.panel.style.height));
                }
            };
            handle.addEventListener('mousedown', (e) => {
                this.isResizing = true;
                startX = e.clientX;
                startY = e.clientY;
                startWidth = this.panel.offsetWidth;
                startHeight = this.panel.offsetHeight;
                this.panel.classList.add('resizing');
                document.addEventListener('mousemove', onMouseMove);
                document.addEventListener('mouseup', onMouseUp);
                e.preventDefault();
                e.stopPropagation();
            });
        }

        refreshWhitelistButtons() {
            const domain = getCurrentDomain();
            const inWhitelist = this.configManager.isInWhitelist(domain);
            const addBtn = document.getElementById('translate-add-whitelist');
            const removeBtn = document.getElementById('translate-remove-whitelist');
            const countDesc = document.querySelector('#translate-add-whitelist')?.closest('.translate-control-group')?.querySelector('.translate-description');
            if (countDesc) countDesc.textContent = `当前白名单网站数: ${this.configManager.get('whitelist').length} | 当前网站: ${domain}`;
            if (addBtn) {
                addBtn.textContent = inWhitelist ? '✓ 已添加' : '➕ 添加当前网站';
                if (inWhitelist && !removeBtn) {
                    const btnGroup = addBtn.parentElement;
                    const clearBtn = document.getElementById('translate-clear-whitelist');
                    if (btnGroup && clearBtn) {
                        const newRemoveBtn = document.createElement('button');
                        newRemoveBtn.id = 'translate-remove-whitelist';
                        newRemoveBtn.className = 'translate-button';
                        newRemoveBtn.style.background = 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)';
                        newRemoveBtn.textContent = '❌ 移除';
                        newRemoveBtn.addEventListener('click', () => {
                            if (this.configManager.removeFromWhitelist(domain)) {
                                this.toast.show(`❌ 已移出 ${domain} 白名单`);
                                this.translateManager.refresh();
                                this.refreshWhitelistButtons();
                                window.updateMenuItems?.();
                            }
                        });
                        btnGroup.insertBefore(newRemoveBtn, clearBtn);
                    }
                } else if (!inWhitelist && removeBtn) {
                    removeBtn.remove();
                }
            }
        }

        togglePanel() {
            if (this.panel.classList.contains('show')) {
                this.panel.classList.remove('show');
            } else {
                this.panel.classList.add('show');
                this.ensureInViewport();
                this.refreshWhitelistButtons();
            }
        }

        positionPanel() {
            const w = this.panel.offsetWidth, h = this.panel.offsetHeight;
            let left = (window.innerWidth - w) / 2;
            let top = (window.innerHeight - h) / 2;
            left = Math.max(10, Math.min(left, window.innerWidth - w - 10));
            top = Math.max(10, Math.min(top, window.innerHeight - h - 10));
            this.panel.style.left = `${left}px`;
            this.panel.style.top = `${top}px`;
            this.configManager.set('panelPosition', { x: left, y: top });
        }

        ensureInViewport() {
            if (!this.panel.classList.contains('show')) return;
            let left = this.panel.offsetLeft, top = this.panel.offsetTop;
            const w = this.panel.offsetWidth, h = this.panel.offsetHeight;
            const maxX = window.innerWidth - w, maxY = window.innerHeight - h;
            let changed = false;
            if (left < 0) { left = 0; changed = true; }
            if (top < 0) { top = 0; changed = true; }
            if (left > maxX) { left = maxX; changed = true; }
            if (top > maxY) { top = maxY; changed = true; }
            if (changed) {
                this.panel.style.left = `${left}px`;
                this.panel.style.top = `${top}px`;
                this.configManager.set('panelPosition', { x: left, y: top });
            }
        }
    }

    // 菜单管理
    let menuManager = null;
    function setupMenu(configManager, translateManager, uiManager) {
        function updateMenuItems() {
            if (menuManager) {
                if (menuManager.toggleEnabledId) GM_unregisterMenuCommand(menuManager.toggleEnabledId);
                if (menuManager.toggleWhitelistId) GM_unregisterMenuCommand(menuManager.toggleWhitelistId);
                if (menuManager.openSettingsId) GM_unregisterMenuCommand(menuManager.openSettingsId);
            }
            const enabled = configManager.get('enabled');
            const domain = getCurrentDomain();
            const inWhitelist = configManager.isInWhitelist(domain);
            const toggleEnabledText = enabled ? '❌ 关闭自动翻译' : '✅ 开启自动翻译';
            const toggleWhitelistText = inWhitelist ? '⭐ 从白名单中移除' : '☆ 添加到白名单';
            const toggleEnabledId = GM_registerMenuCommand(toggleEnabledText, () => {
                const newState = !configManager.get('enabled');
                configManager.set('enabled', newState);
                configManager.set('autoTranslate', newState);
                translateManager.refresh();
                uiManager.toast.show(newState ? '✅ 全局翻译已开启' : '❌ 全局翻译已关闭');
                updateMenuItems();
            });
            const toggleWhitelistId = GM_registerMenuCommand(toggleWhitelistText, () => {
                const nowInWhitelist = configManager.toggleWhitelistDomain(domain);
                uiManager.toast.show(nowInWhitelist ? `✅ 已添加 ${domain} 到白名单` : `❌ 已从白名单移除 ${domain}`);
                uiManager.refreshWhitelistButtons();
                translateManager.refresh();
                updateMenuItems();
            });
            const openSettingsId = GM_registerMenuCommand('⚙️ 翻译设置', () => {
                uiManager.togglePanel();
            });
            menuManager = { toggleEnabledId, toggleWhitelistId, openSettingsId };
        }
        updateMenuItems();
        window.updateMenuItems = updateMenuItems;
    }

    async function init() {
        if (document.readyState === 'loading') await new Promise(r => document.addEventListener('DOMContentLoaded', r));
        try {
            if (typeof translate === 'undefined') {
                console.error('translate.js未加载，请检查@require配置');
                return;
            }
            const configManager = new ConfigManager();
            const translateManager = new TranslateManager(configManager);
            const uiManager = new UIManager(configManager, translateManager);
            setupMenu(configManager, translateManager, uiManager);
            window.translateHelper = { config: configManager, translate: translateManager, ui: uiManager };
            console.log('自动翻译助手已加载完成');
        } catch (error) {
            console.error('翻译脚本初始化失败:', error);
        }
    }
    setTimeout(init, 100);
})();