 <!-- 盗用本站 死全家，不得好死-->
   <!-- 盗用本站 死全家，不得好死-->
     <!-- 盗用本站 死全家，不得好死-->
       <!-- 盗用本站 死全家，不得好死-->
         <!-- 盗用本站 死全家，不得好死-->
           <!-- 盗用本站 死全家，不得好死-->
             <!-- 盗用本站 死全家，不得好死-->
               <!-- 盗用本站 死全家，不得好死-->
                 <!-- 盗用本站 死全家，不得好死-->
                   <!-- 盗用本站 死全家，不得好死-->
                     <!-- 盗用本站 死全家，不得好死-->
                       <!-- 盗用本站 死全家，不得好死-->
                         <!-- 盗用本站 死全家，不得好死-->
                           <!-- 盗用本站 死全家，不得好死-->
                             <!-- 盗用本站 死全家，不得好死-->
                               <!-- 盗用本站 死全家，不得好死-->
                                 <!-- 盗用本站 死全家，不得好死-->
                                   <!-- 盗用本站 死全家，不得好死-->
                                     <!-- 盗用本站 死全家，不得好死-->
                                       <!-- 盗用本站 死全家，不得好死-->
                                         <!-- 盗用本站 死全家，不得好死-->
                                           <!-- 盗用本站 死全家，不得好死-->
                                             <!-- 盗用本站 死全家，不得好死-->
                                               <!-- 盗用本站 死全家，不得好死-->
                                                 <!-- 盗用本站 死全家，不得好死-->
                                                   <!-- 盗用本站 死全家，不得好死-->
                                                     <!-- 盗用本站 死全家，不得好死-->
                                                       <!-- 盗用本站 死全家，不得好死-->
                                                         <!-- 盗用本站 死全家，不得好死-->
                                                           <!-- 盗用本站 死全家，不得好死-->
                                                             <!-- 盗用本站 死全家，不得好死-->
                                                               <!-- 盗用本站 死全家，不得好死-->
                                                                 <!-- 盗用本站 死全家，不得好死-->
                                                                   <!-- 盗用本站 死全家，不得好死-->
                                                                     <!-- 盗用本站 死全家，不得好死-->
                                                                       <!-- 盗用本站 死全家，不得好死-->
                                                                         <!-- 盗用本站 死全家，不得好死-->
                                                                           <!-- 盗用本站 死全家，不得好死-->
                                                                             <!-- 盗用本站 死全家，不得好死-->
                                                                               <!-- 盗用本站 死全家，不得好死-->
                                                                                 <!-- 盗用本站 死全家，不得好死-->
                                                                                   <!-- 盗用本站 死全家，不得好死-->
                                                                                     <!-- 盗用本站 死全家，不得好死-->
                                                                                       <!-- 盗用本站 死全家，不得好死-->
                                                                                         <!-- 盗用本站 死全家，不得好死-->
                                                                                           <!-- 盗用本站 死全家，不得好死-->
                                                                                             <!-- 盗用本站 死全家，不得好死-->
                                                                                               <!-- 盗用本站 死全家，不得好死-->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>en导航丨搜索助手</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <link rel="icon" href="logo.png" type="image/x-icon">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#69b1ff',
                        neutral: '#f5f7fa',
                        dark: '#1d2129',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }

            .search-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }

            .engine-item-hover {
                transition: all 0.2s ease;
            }

            .engine-item-hover:hover {
                transform: translateX(4px);
            }

            .search-input-focus {
                transition: all 0.2s ease;
            }

            .search-input-focus:focus-within {
                box-shadow: 0 4px 20px rgba(22, 93, 255, 0.15);
            }

            .engine-selector {
                position: relative;
                z-index: 20;
            }

            .engine-selector::after {
                content: '';
                position: absolute;
                right: 0;
                top: 25%;
                height: 50%;
                width: 1px;
                background-color: #e5e7eb;
            }

            .mobile-search {
                @apply bg-white rounded-full p-1 search-shadow search-input-focus;
            }

            .mobile-engine-selector {
                @apply flex items-center h-10 px-3 cursor-pointer hover:bg-gray-50 rounded-l-full transition-colors duration-200;
            }

            .mobile-search-input {
                @apply flex-grow h-10 outline-none bg-transparent px-3 text-base pl-2;
            }

            .mobile-clear-btn {
                @apply h-8 w-8 rounded-full text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-colors duration-200 opacity-0 pointer-events-none;
            }

            .mobile-search-btn {
                @apply bg-primary hover:bg-primary/90 text-white h-10 px-4 rounded-full flex items-center justify-center transition-all duration-200 hover:shadow-lg hover:shadow-primary/20;
            }

            .mobile-engine-list {
                @apply absolute left-0 top-full mt-2 bg-white rounded-xl shadow-lg p-3 w-64 opacity-0 pointer-events-none transition-all duration-200 z-30;
            }

            .mobile-engine-list.active {
                @apply opacity-100 pointer-events-auto;
            }

            .mobile-history-item {
                @apply flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition-colors;
            }

            .footer-link {
                @apply text-gray-500 hover:text-primary transition-colors duration-200;
            }

            .social-icon {
                @apply w-8 h-8 rounded-full flex items-center justify-center text-gray-500 hover:text-white hover:bg-primary transition-all duration-200;
            }

            .suggestion-item {
                @apply p-2 rounded-lg hover:bg-gray-50 cursor-pointer;
            }

            .text-shadow {
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }

            .text-shadow-lg {
                text-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
            }

            .text-shadow-xl {
                text-shadow: 0 8px 16px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.12);
            }

            .setting-panel {
                @apply fixed top-16 right-4 bg-white/95 backdrop-blur-md rounded-xl shadow-xl p-5 w-72 opacity-0 pointer-events-none transition-all duration-300 transform translate-x-4 z-50;
            }

            .setting-panel.active {
                @apply opacity-100 pointer-events-auto translate-x-0;
            }

            .setting-toggle {
                @apply fixed top-4 right-4 w-10 h-10 rounded-full bg-white/10 hover:bg-white/20 text-white flex items-center justify-center cursor-pointer transition-all duration-200 z-40;
            }

            .setting-toggle:hover {
                @apply scale-110;
            }

            .setting-item {
                @apply mb-5;
            }

            .setting-label {
                @apply block text-sm font-medium text-gray-700 mb-2;
            }

            .setting-input {
                @apply w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200 text-sm;
            }

            .range-slider {
                @apply w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer;
            }

            .range-slider::-webkit-slider-thumb {
                @apply appearance-none w-5 h-5 rounded-full bg-primary shadow-md cursor-pointer;
            }

            .range-value {
                @apply text-xs text-gray-500 ml-2;
            }

            .setting-btn {
                @apply px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200;
            }

            .setting-btn-primary {
                @apply bg-primary text-white hover:bg-primary/90;
            }

            .setting-btn-secondary {
                @apply bg-gray-100 text-gray-700 hover:bg-gray-200;
            }

            .default-bg-btn {
                @apply px-3 py-1.5 rounded-md text-xs font-medium transition-all duration-200 mr-2 mb-2;
            }

            .default-bg-btn.active {
                @apply bg-primary text-white;
            }

            .default-bg-btn:not(.active) {
                @apply bg-gray-100 text-gray-700 hover:bg-gray-200;
            }
        }
    </style>
</head>

<body class="min-h-screen font-inter text-dark flex flex-col items-center justify-center p-4">
    <!-- 背景图 -->
    <div id="backgroundContainer" class="fixed inset-0 -z-10 bg-cover bg-center" style="background-image: url('https://bing.img.run/1920x1080.php'); filter: brightness(0.95);">
        <!-- 添加黑色遮罩层 -->
        <div id="overlay" class="absolute inset-0 bg-black/35"></div>
    </div>
    
    <!-- 设置面板 -->
    <div id="settingPanel" class="setting-panel">
        <div class="flex items-center justify-between mb-4 pb-3 border-b border-gray-100">
            <h3 class="font-medium text-gray-800">页面设置</h3>
            <button id="closeSettingPanel" class="text-gray-400 hover:text-gray-600">
                <i class="fa-solid fa-xmark"></i>
            </button>
        </div>
        
        <div class="setting-item">
            <label class="setting-label">遮罩透明度</label>
            <div class="flex items-center">
                <input type="range" id="overlayOpacity" min="0" max="100" value="35" class="range-slider">
                <span id="opacityValue" class="range-value">35%</span>
            </div>
        </div>
        
        <div class="setting-item">
            <label class="setting-label">默认背景</label>
            <div class="flex flex-wrap">
                <button class="default-bg-btn active" data-bg="https://bing.img.run/1920x1080.php">每日必应</button>
                <button class="default-bg-btn" data-bg="https://bing.img.run/rand.php">随机必应</button>
                <button class="default-bg-btn" data-bg="custom">自定义</button>
            </div>
        </div>
        
        <div class="setting-item" id="customBgSection">
            <label class="setting-label">背景图地址</label>
            <input type="text" id="backgroundUrl" placeholder="输入图片URL" value="https://bing.img.run/1920x1080.php" class="setting-input">
        </div>
        
        <div class="flex justify-end space-x-2">
            <button id="resetSettings" class="setting-btn setting-btn-secondary">重置</button>
            <button id="saveSettings" class="setting-btn setting-btn-primary">保存</button>
        </div>
    </div>
    
    <!-- 设置开关 -->
    <button id="settingToggle" class="setting-toggle">
        <i class="fa-solid fa-sliders"></i>
    </button>
    
    <div class="max-w-3xl w-full mx-auto flex flex-col min-h-[90vh]">
        <!-- 标题区域 -->
        <div class="text-center mb-6 animate-fade-in">
            <h1 class="text-[clamp(1.5rem,5vw,2.5rem)] font-bold text-white mb-2 text-shadow-xl">enso</h1>
            <p class="text-white text-base text-shadow-xl">一站式搜索助手，助你快速上网</p>
        </div>

        <!-- 搜索框主体 - 使用响应式设计 -->
        <div class="search-container relative mb-8"> <!-- 增加底部外边距 -->
            <div class="mobile-search">
                <div class="flex items-center">
                    <!-- 搜索引擎选择区域 -->
                    <div id="engineSelector" class="mobile-engine-selector engine-selector">
                        <img id="engineIcon" src="https://www.baidu.com/favicon.ico" alt="搜索引擎图标" class="w-5 h-5">
                        <i class="fa-solid fa-chevron-down text-gray-400 text-xs ml-2"></i>
                    </div>

                    <!-- 搜索输入框 -->
                    <input 
                        type="text" 
                        id="searchInput" 
                        placeholder="输入关键词并按Enter搜索..." 
                        class="mobile-search-input"
                    >

                    <!-- 清除按钮 -->
                    <button id="clearBtn" class="mobile-clear-btn">
                        <i class="fa-solid fa-times"></i>
                    </button>

                    <!-- 搜索按钮 -->
                    <button id="searchBtn" class="mobile-search-btn">
                        <i class="fa-solid fa-arrow-right"></i>
                    </button>
                </div>
            </div>

            <!-- 搜索引擎列表 -->
            <div id="engineList" class="mobile-engine-list">
                <div class="flex items-center justify-between mb-2 pb-2 border-b border-gray-100">
                    <h3 class="font-medium text-gray-700">选择搜索引擎</h3>
                    <button id="closeEngineList" class="text-gray-400 hover:text-gray-600">
                        <i class="fa-solid fa-xmark"></i>
                    </button>
                </div>
                <div class="space-y-1 max-h-60 overflow-y-auto pr-1">
                    <!-- 搜索引擎选项 -->
                    <div class="engine-item-hover flex items-center p-2 rounded-lg cursor-pointer bg-primary/5" data-engine="baidu">
                        <img src="https://www.baidu.com/favicon.ico" alt="百度" class="w-5 h-5 mr-3">
                        <span class="text-gray-800 text-sm">百度</span>
                    </div>
                    <div class="engine-item-hover flex items-center p-2 rounded-lg cursor-pointer hover:bg-gray-50" data-engine="bing">
                        <img src="https://cn.bing.com/favicon.ico" alt="必应" class="w-5 h-5 mr-3">
                        <span class="text-gray-800 text-sm">必应</span>
                    </div>
                    <div class="engine-item-hover flex items-center p-2 rounded-lg cursor-pointer hover:bg-gray-50" data-engine="sogou">
                        <img src="https://www.sogou.com/favicon.ico" alt="搜狗" class="w-5 h-5 mr-3">
                        <span class="text-gray-800 text-sm">搜狗</span>
                    </div>
                    <div class="engine-item-hover flex items-center p-2 rounded-lg cursor-pointer hover:bg-gray-50" data-engine="so">
                        <img src="https://www.so.com/favicon.ico" alt="360搜索" class="w-5 h-5 mr-3">
                        <span class="text-gray-800 text-sm">360搜索</span>
                    </div>
                    <div class="engine-item-hover flex items-center p-2 rounded-lg cursor-pointer hover:bg-gray-50" data-engine="github">
                        <img src="https://github.com/favicon.ico" alt="GitHub" class="w-5 h-5 mr-3">
                        <span class="text-gray-800 text-sm">GitHub</span>
                    </div>
                    <div class="engine-item-hover flex items-center p-2 rounded-lg cursor-pointer hover:bg-gray-50" data-engine="zhihu">
                        <img src="https://www.zhihu.com/favicon.ico" alt="知乎" class="w-5 h-5 mr-3">
                        <span class="text-gray-800 text-sm">知乎</span>
                    </div>
                    <div class="engine-item-hover flex items-center p-2 rounded-lg cursor-pointer hover:bg-gray-50" data-engine="bilibili">
                        <img src="https://www.bilibili.com/favicon.ico" alt="哔哩哔哩" class="w-5 h-5 mr-3">
                        <span class="text-gray-800 text-sm">哔哩哔哩</span>
                    </div>
                    <div class="engine-item-hover flex items-center p-2 rounded-lg cursor-pointer hover:bg-gray-50" data-engine="yingshi">
                        <img src="https://www.enabcd.cn/souimg/yingshi.ico" alt="影视" class="w-5 h-5 mr-3">
                        <span class="text-gray-800 text-sm">影视</span>
                    </div>
                    <div class="engine-item-hover flex items-center p-2 rounded-lg cursor-pointer hover:bg-gray-50" data-engine="wangpan">
                        <img src="https://www.enabcd.cn/souimg/wangpan.ico" alt="网盘" class="w-5 h-5 mr-3">
                        <span class="text-gray-800 text-sm">网盘</span>
                    </div>
                    <div class="engine-item-hover flex items-center p-2 rounded-lg cursor-pointer hover:bg-gray-50" data-engine="duanju">
                        <img src="https://img.dogged.cn/i/2024/06/06/66612a22e5a30.png" alt="短剧" class="w-5 h-5 mr-3">
                        <span class="text-gray-800 text-sm">短剧</span>
                    </div>
                    <div class="engine-item-hover flex items-center p-2 rounded-lg cursor-pointer hover:bg-gray-50" data-engine="yadex">
                        <img src="https://yastatic.net/s3/home-static/_/nova/ZKozwZ-k.png" alt="yadex" class="w-5 h-5 mr-3">
                        <span class="text-gray-800 text-sm">yadex(可搜“吃瓜”)</span>
                    </div>
                </div>
            </div>

            <!-- 搜索联想建议 -->
            <div id="searchSuggestions" class="mobile-suggestions absolute left-0 top-full mt-2 bg-white rounded-xl shadow-lg p-3 w-full opacity-0 pointer-events-none transition-all duration-200 z-30"></div>
        </div>

        <!-- 当前搜索引擎信息 -->
        <div class="flex items-center justify-center text-xs text-white mt-6 mb-8 text-shadow-xl"> <!-- 增加顶部外边距 -->
            <span>当前使用: </span>
            <span id="currentEngine" class="ml-1 font-medium text-white hover:text-primary transition-colors">...</span>
            <span class="mx-2">|</span>
            <span class="flex items-center">
                <i class="fa-solid fa-keyboard mr-1"></i>
                <kbd class="bg-white/20 px-1 rounded text-xs">Enter</kbd> 搜索
            </span>
        </div>

        <!-- 最近搜索历史 -->
        <div id="searchHistory" class="bg-white/80 backdrop-blur-sm rounded-xl shadow-md p-4 mt-6 transition-all duration-300 opacity-0 transform translate-y-4">
            <div class="flex items-center justify-between mb-3">
                <h3 class="font-medium text-gray-800 text-sm">最近搜索</h3>
                <button id="clearHistory" class="text-xs text-gray-500 hover:text-primary transition-colors">
                    清空历史
                </button>
            </div>
            <div id="historyList" class="space-y-2">
                <!-- 历史记录将通过JavaScript动态添加 -->
                <div class="text-center text-gray-400 py-3 text-sm">暂无搜索历史</div>
            </div>
        </div>

        <!-- 底部信息 -->
        <footer class="mt-auto pt-8 text-center text-white text-shadow-xl">
            <div class="flex justify-center space-x-4 mb-4">
                <a href="weixin.png" class="w-8 h-8 rounded-full flex items-center justify-center text-white bg-white/10 hover:bg-primary transition-all duration-200" aria-label="微信" target="_blank">
                    <i class="fa-brands fa-weixin"></i>
                </a>
                <a href="https://qm.qq.com/q/37khC6s1kA" class="w-8 h-8 rounded-full flex items-center justify-center text-white bg-white/10 hover:bg-primary transition-all duration-200" aria-label="QQ" target="_blank">
                    <i class="fa-brands fa-qq"></i>
                </a>
                <a href="mailto:zledx@qq.com" class="w-8 h-8 rounded-full flex items-center justify-center text-white bg-white/10 hover:bg-primary transition-all duration-200" aria-label="邮箱" target="_blank">
                    <i class="fa-solid fa-envelope"></i>
                </a>
            </div>
            <p class="text-white/80 text-xs">
                &copy; 2025 <a href="https://www.enabcd.cn/" class="text-white hover:text-primary transition-colors">en导航</a> - 版权所有
                
            </p>
        </footer>
    </div>

    <script>
        // 搜索引擎配置 - 添加了suffix字段
        const searchEngines = {
            'baidu': {
                name: '百度',
                url: 'https://www.baidu.com/s?wd=',
                suffix: '/',
                icon: 'https://www.baidu.com/favicon.ico'
            },
            'bing': {
                name: '必应',
                url: 'https://cn.bing.com/search?q=',
                suffix: '',
                icon: 'https://cn.bing.com/favicon.ico'
            },
            'sogou': {
                name: '搜狗',
                url: 'https://www.sogou.com/web?query=',
                suffix: '',
                icon: 'https://www.sogou.com/favicon.ico'
            },
            'so': {
                name: '360搜索',
                url: 'https://www.so.com/s?q=',
                suffix: '',
                icon: 'https://www.so.com/favicon.ico'
            },
            'github': {
                name: 'GitHub',
                url: 'https://github.com/search?q=',
                suffix: '',
                icon: 'https://github.com/favicon.ico'
            },
            'zhihu': {
                name: '知乎',
                url: 'https://www.zhihu.com/search?type=content&q=',
                suffix: '',
                icon: 'https://www.zhihu.com/favicon.ico'
            },
            'bilibili': {
                name: '哔哩哔哩',
                url: 'https://search.bilibili.com/all?keyword=',
                suffix: '',
                icon: 'https://www.bilibili.com/favicon.ico'
            },
            'yingshi': {
                name: '影视',
                url: 'https://soupian.pro/movie/',
                suffix: '',
                icon: 'https://www.enabcd.cn/souimg/yingshi.ico'
            },
            'wangpan': {
                name: '网盘',
                url: 'https://alipansou.com/search?k=',
                suffix: '',
                icon: 'https://www.enabcd.cn/souimg/wangpan.ico'
            },
            'duanju': {
                name: '短剧',
                url: 'https://duanjugou.top/search.php?q=',
                suffix: '',
                icon: 'https://img.dogged.cn/i/2024/06/06/66612a22e5a30.png'
            },
			'yadex': {
                name: 'yadex',
                url: 'https://yandex.eu/search/?text=',
                suffix: '',
                icon: 'https://yastatic.net/s3/home-static/_/nova/ZKozwZ-k.png'
            }
            
        };

        // 获取DOM元素
        const engineSelector = document.getElementById('engineSelector');
        const engineList = document.getElementById('engineList');
        const closeEngineList = document.getElementById('closeEngineList');
        const searchInput = document.getElementById('searchInput');
        const searchBtn = document.getElementById('searchBtn');
        const clearBtn = document.getElementById('clearBtn');
        const currentEngine = document.getElementById('currentEngine');
        const historyList = document.getElementById('historyList');
        const searchHistory = document.getElementById('searchHistory');
        const clearHistory = document.getElementById('clearHistory');
        const engineIcon = document.getElementById('engineIcon');
        const searchSuggestions = document.getElementById('searchSuggestions');
        
        // 设置相关元素
        const settingToggle = document.getElementById('settingToggle');
        const settingPanel = document.getElementById('settingPanel');
        const closeSettingPanel = document.getElementById('closeSettingPanel');
        const overlayOpacity = document.getElementById('overlayOpacity');
        const opacityValue = document.getElementById('opacityValue');
        const backgroundUrl = document.getElementById('backgroundUrl');
        const saveSettings = document.getElementById('saveSettings');
        const resetSettings = document.getElementById('resetSettings');
        const backgroundContainer = document.getElementById('backgroundContainer');
        const overlay = document.getElementById('overlay');
        const customBgSection = document.getElementById('customBgSection');
        const defaultBgBtns = document.querySelectorAll('.default-bg-btn');

        // 当前选中的搜索引擎
        let selectedEngine = localStorage.getItem('selectedEngine') || 'baidu';
        let selectedSuggestionIndex = -1;
        let currentBgType = localStorage.getItem('currentBgType') || 'https://bing.img.run/1920x1080.php';

        // 初始化
        function init() {
            // 检查并修复已选引擎
            selectedEngine = ensureValidEngine(selectedEngine);
            
            // 设置当前搜索引擎
            setEngine(selectedEngine);

            // 加载搜索历史
            loadSearchHistory();

            // 监听输入框变化
            searchInput.addEventListener('input', handleInputChange);
            
            // 监听输入框聚焦
            searchInput.addEventListener('focus', handleInputFocus);
            
            // 监听输入框失焦
            searchInput.addEventListener('blur', handleInputBlur);
            
            // 监听键盘事件
            searchInput.addEventListener('keydown', handleKeyDown);

            // 监听清除按钮点击
            clearBtn.addEventListener('click', () => {
                searchInput.value = '';
                clearBtn.classList.remove('opacity-0', 'pointer-events-none');
                searchInput.focus();
            });

            // 监听搜索按钮点击
            searchBtn.addEventListener('click', performSearch);

            // 监听Enter键搜索
            searchInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') {
                    performSearch();
                }
            });

            // 监听搜索引擎选择区域点击
            engineSelector.addEventListener('click', (e) => {
                e.stopPropagation();
                toggleEngineList();
            });

            // 监听关闭搜索引擎列表按钮点击
            closeEngineList.addEventListener('click', toggleEngineList);

            // 点击其他区域关闭搜索引擎列表
            document.addEventListener('click', (e) => {
                if (!engineList.contains(e.target) && !engineSelector.contains(e.target)) {
                    closeEngineListHandler();
                }
            });

            // 监听搜索引擎选择
            document.querySelectorAll('#engineList [data-engine]').forEach(item => {
                item.addEventListener('click', (e) => {
                    const engine = e.currentTarget.getAttribute('data-engine');
                    setEngine(engine);
                    toggleEngineList();
                });
            });

            // 监听清空历史按钮点击
            clearHistory.addEventListener('click', () => {
                localStorage.removeItem('searchHistory');
                loadSearchHistory();
            });

            // 监听历史记录点击
            historyList.addEventListener('click', (e) => {
                if (e.target.closest('[data-query]')) {
                    const query = e.target.closest('[data-query]').getAttribute('data-query');
                    searchInput.value = query;
                    performSearch();
                }
            });

            // 页面加载动画
            setTimeout(() => {
                document.querySelectorAll('.animate-fade-in').forEach(el => {
                    el.style.opacity = '1';
                    el.style.transform = 'translateY(0)';
                });
            }, 100);
            
            // 设置相关事件监听
            settingToggle.addEventListener('click', toggleSettingPanel);
            closeSettingPanel.addEventListener('click', toggleSettingPanel);
            
            // 点击其他区域关闭设置面板
            document.addEventListener('click', (e) => {
                if (!settingPanel.contains(e.target) && !settingToggle.contains(e.target)) {
                    closeSettingPanelHandler();
                }
            });
            
            // 监听遮罩透明度变化
            overlayOpacity.addEventListener('input', updateOpacityValue);
            
            // 监听保存设置按钮
            saveSettings.addEventListener('click', saveCustomSettings);
            
            // 监听重置设置按钮
            resetSettings.addEventListener('click', resetCustomSettings);
            
            // 监听默认背景按钮点击
            defaultBgBtns.forEach(btn => {
                btn.addEventListener('click', () => {
                    selectDefaultBackground(btn.getAttribute('data-bg'));
                });
            });
            
            // 加载自定义设置
            loadCustomSettings();
            
            // 初始化默认背景按钮状态
            initDefaultBgButtons();
        }

        // 关闭引擎列表的处理函数
        function closeEngineListHandler() {
            engineList.classList.remove('active');
            const arrow = engineSelector.querySelector('i');
            arrow.classList.remove('rotate-180');
        }

        // 切换搜索引擎列表显示/隐藏
        function toggleEngineList() {
            engineList.classList.toggle('active');
            
            // 旋转下拉箭头
            const arrow = engineSelector.querySelector('i');
            arrow.classList.toggle('rotate-180');

            // 动画效果
            if (engineList.classList.contains('active')) {
                searchHistory.classList.add('opacity-0', 'translate-y-4');
            } else {
                setTimeout(() => {
                    if (localStorage.getItem('searchHistory')) {
                        searchHistory.classList.remove('opacity-0', 'translate-y-4');
                    }
                }, 200);
            }
        }

        // 确保引擎有效，如果无效则设置为默认引擎
        function ensureValidEngine(engine) {
            if (!searchEngines[engine]) {
                // 如果引擎不存在，设置为默认引擎（百度）
                console.warn(`引擎 "${engine}" 不存在，已切换至默认引擎`);
                return 'baidu';
            }
            return engine;
        }

        // 设置当前搜索引擎
        function setEngine(engine) {
            // 验证引擎有效性
            engine = ensureValidEngine(engine);
            
            selectedEngine = engine;
            localStorage.setItem('selectedEngine', engine);

            // 更新当前搜索引擎显示
            currentEngine.textContent = searchEngines[engine].name;
            engineIcon.src = searchEngines[engine].icon;

            // 更新搜索引擎列表选中状态
            document.querySelectorAll('#engineList [data-engine]').forEach(item => {
                item.classList.remove('bg-primary/5');
                if (item.getAttribute('data-engine') === engine) {
                    item.classList.add('bg-primary/5');
                }
            });

            // 添加切换动画
            engineSelector.classList.add('bg-primary/5');
            setTimeout(() => {
                engineSelector.classList.remove('bg-primary/5');
            }, 300);
        }

        // 处理输入框变化
        function handleInputChange() {
            if (searchInput.value.trim() !== '') {
                clearBtn.classList.remove('opacity-0', 'pointer-events-none');
                getSearchSuggestions(searchInput.value);
            } else {
                clearBtn.classList.add('opacity-0', 'pointer-events-none');
                hideSearchSuggestions();
            }
        }

        // 处理输入框聚焦
        function handleInputFocus() {
            if (searchInput.value.trim() !== '') {
                getSearchSuggestions(searchInput.value);
            }
        }

        // 处理输入框失焦
        function handleInputBlur() {
            setTimeout(() => {
                hideSearchSuggestions();
            }, 200);
        }

        // 处理键盘事件
        function handleKeyDown(e) {
            const suggestions = searchSuggestions.querySelectorAll('.suggestion-item');
            if (suggestions.length > 0) {
                if (e.key === 'ArrowDown') {
                    e.preventDefault();
                    selectedSuggestionIndex = (selectedSuggestionIndex + 1) % suggestions.length;
                    highlightSuggestion(selectedSuggestionIndex);
                } else if (e.key === 'ArrowUp') {
                    e.preventDefault();
                    selectedSuggestionIndex = (selectedSuggestionIndex - 1 + suggestions.length) % suggestions.length;
                    highlightSuggestion(selectedSuggestionIndex);
                } else if (e.key === 'Enter') {
                    if (selectedSuggestionIndex !== -1) {
                        const suggestion = suggestions[selectedSuggestionIndex];
                        searchInput.value = suggestion.textContent;
                        performSearch();
                    }
                }
            }
        }

        // 执行搜索 - 修改了URL构建方式
        function performSearch() {
            const query = searchInput.value.trim();
            if (query === '') return;

            // 保存搜索历史
            saveSearchHistory(query);

            // 构建搜索URL - 使用suffix字段
            const engineConfig = searchEngines[selectedEngine];
            const searchUrl = engineConfig.url + encodeURIComponent(query) + engineConfig.suffix;

            // 打开搜索结果页面
            window.open(searchUrl, '_blank');

            // 搜索动画
            searchBtn.classList.add('scale-95', 'bg-primary/80');
            setTimeout(() => {
                searchBtn.classList.remove('scale-95', 'bg-primary/80');
            }, 200);
            
            // 隐藏引擎列表
            closeEngineListHandler();
            hideSearchSuggestions();
        }

        // 保存搜索历史
        function saveSearchHistory(query) {
            // 获取现有历史记录
            let history = JSON.parse(localStorage.getItem('searchHistory') || '[]');

            // 检查是否已存在相同的搜索词，如果存在则移除
            const index = history.findIndex(item => item.toLowerCase() === query.toLowerCase());
            if (index !== -1) {
                history.splice(index, 1);
            }

            // 添加到历史记录的开头
            history.unshift(query);

            // 限制历史记录数量为10条
            if (history.length > 10) {
                history = history.slice(0, 10);
            }

            // 保存到localStorage
            localStorage.setItem('searchHistory', JSON.stringify(history));

            // 更新历史记录显示
            loadSearchHistory();
        }

        // 加载搜索历史
        function loadSearchHistory() {
            const history = JSON.parse(localStorage.getItem('searchHistory') || '[]');

            if (history.length === 0) {
                historyList.innerHTML = '<div class="text-center text-gray-400 py-3 text-sm">暂无搜索历史</div>';
                searchHistory.classList.add('opacity-0', 'translate-y-4');
                return;
            }

            // 显示搜索历史容器
            searchHistory.classList.remove('opacity-0', 'translate-y-4');

            // 构建历史记录HTML
            let html = '';
            history.forEach((query, index) => {
                html += `
                    <div class="mobile-history-item" data-query="${query}">
                        <div class="flex items-center">
                            <span class="text-xs font-medium text-primary bg-primary/10 rounded-full h-4 w-4 flex items-center justify-center mr-2">${index + 1}</span>
                            <span class="text-gray-700 truncate text-sm">${query}</span>
                        </div>
                        <button class="text-gray-400 hover:text-red-500 transition-colors text-xs" data-query="${query}" data-action="remove">
                            <i class="fa-solid fa-times"></i>
                        </button>
                    </div>
                `;
            });

            historyList.innerHTML = html;

            // 监听删除历史记录
            document.querySelectorAll('[data-action="remove"]').forEach(btn => {
                btn.addEventListener('click', (e) => {
                    e.stopPropagation();
                    const query = e.currentTarget.getAttribute('data-query');
                    removeSearchHistory(query);
                });
            });
        }

        // 移除单条搜索历史
        function removeSearchHistory(query) {
            let history = JSON.parse(localStorage.getItem('searchHistory') || '[]');
            const index = history.findIndex(item => item.toLowerCase() === query.toLowerCase());

            if (index !== -1) {
                history.splice(index, 1);
                localStorage.setItem('searchHistory', JSON.stringify(history));
                loadSearchHistory();
            }
        }

        // 获取搜索建议
        function getSearchSuggestions(query) {
            const apiUrl = `https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${encodeURIComponent(query)}&cb=handleSuggestions`;
            const script = document.createElement('script');
            script.src = apiUrl;
            document.body.appendChild(script);
        }

        // 处理搜索建议
        function handleSuggestions(data) {
            const suggestions = data.s;
            if (suggestions.length > 0) {
                let html = '';
                suggestions.forEach(suggestion => {
                    html += `<div class="suggestion-item" onclick="selectSuggestion('${suggestion}')">${suggestion}</div>`;
                });
                searchSuggestions.innerHTML = html;
                searchSuggestions.classList.remove('opacity-0', 'pointer-events-none');
            } else {
                hideSearchSuggestions();
            }
        }

        // 选择搜索建议
        function selectSuggestion(suggestion) {
            searchInput.value = suggestion;
            performSearch();
        }

        // 隐藏搜索建议
        function hideSearchSuggestions() {
            searchSuggestions.classList.add('opacity-0', 'pointer-events-none');
            selectedSuggestionIndex = -1;
        }

        // 高亮显示建议
        function highlightSuggestion(index) {
            const suggestions = searchSuggestions.querySelectorAll('.suggestion-item');
            suggestions.forEach((suggestion, i) => {
                if (i === index) {
                    suggestion.classList.add('bg-primary/5');
                } else {
                    suggestion.classList.remove('bg-primary/5');
                }
            });
        }
        
        // 切换设置面板显示/隐藏
        function toggleSettingPanel() {
            settingPanel.classList.toggle('active');
            
            // 旋转设置图标
            const icon = settingToggle.querySelector('i');
            icon.classList.toggle('rotate-90');
            
            // 隐藏其他面板
            if (settingPanel.classList.contains('active')) {
                engineList.classList.remove('active');
                const engineArrow = engineSelector.querySelector('i');
                engineArrow.classList.remove('rotate-180');
            }
        }
        
        // 关闭设置面板的处理函数
        function closeSettingPanelHandler() {
            settingPanel.classList.remove('active');
            const icon = settingToggle.querySelector('i');
            icon.classList.remove('rotate-90');
        }
        
        // 更新透明度显示
        function updateOpacityValue() {
            const value = overlayOpacity.value;
            opacityValue.textContent = `${value}%`;
            overlay.style.backgroundColor = `rgba(0, 0, 0, ${value / 100})`;
        }
        
        // 保存自定义设置
        function saveCustomSettings() {
            const settings = {
                opacity: overlayOpacity.value,
                backgroundUrl: backgroundUrl.value,
                currentBgType: currentBgType
            };
            
            localStorage.setItem('customSettings', JSON.stringify(settings));
            
            // 应用设置
            overlay.style.backgroundColor = `rgba(0, 0, 0, ${settings.opacity / 100})`;
            backgroundContainer.style.backgroundImage = `url('${settings.backgroundUrl}')`;
            
            // 添加保存成功动画
            saveSettings.classList.add('bg-green-500');
            saveSettings.innerHTML = '<i class="fa-solid fa-check mr-1"></i> 已保存';
            
            setTimeout(() => {
                saveSettings.classList.remove('bg-green-500');
                saveSettings.innerHTML = '保存';
            }, 1500);
        }
        
        // 重置自定义设置
        function resetCustomSettings() {
            overlayOpacity.value = 35;
            backgroundUrl.value = 'https://bing.img.run/1920x1080.php';
            currentBgType = 'https://bing.img.run/1920x1080.php';
            
            updateOpacityValue();
            initDefaultBgButtons();
            
            // 移除localStorage中的设置
            localStorage.removeItem('customSettings');
            
            // 应用默认设置
            overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.35)';
            backgroundContainer.style.backgroundImage = 'url(\'https://bing.img.run/1920x1080.php\')';
            
            // 添加重置成功动画
            resetSettings.classList.add('bg-red-500', 'text-white');
            resetSettings.innerHTML = '<i class="fa-solid fa-check mr-1"></i> 已重置';
            
            setTimeout(() => {
                resetSettings.classList.remove('bg-red-500', 'text-white');
                resetSettings.innerHTML = '重置';
            }, 1500);
        }
        
        // 加载自定义设置
        function loadCustomSettings() {
            const settings = JSON.parse(localStorage.getItem('customSettings'));
            
            if (settings) {
                overlayOpacity.value = settings.opacity || 35;
                backgroundUrl.value = settings.backgroundUrl || 'https://bing.img.run/1920x1080.php';
                currentBgType = settings.currentBgType || 'https://bing.img.run/1920x1080.php';
                
                updateOpacityValue();
                
                // 应用设置
                overlay.style.backgroundColor = `rgba(0, 0, 0, ${settings.opacity / 100})`;
                backgroundContainer.style.backgroundImage = `url('${settings.backgroundUrl}')`;
                
                // 初始化默认背景按钮状态
                initDefaultBgButtons();
            }
        }
        
        // 选择默认背景
        function selectDefaultBackground(bgType) {
            currentBgType = bgType;
            
            // 更新按钮状态
            defaultBgBtns.forEach(btn => {
                if (btn.getAttribute('data-bg') === bgType) {
                    btn.classList.add('active');
                } else {
                    btn.classList.remove('active');
                }
            });
            
            // 显示或隐藏自定义URL输入框
            if (bgType === 'custom') {
                customBgSection.classList.remove('hidden');
            } else {
                customBgSection.classList.add('hidden');
                backgroundUrl.value = bgType;
                backgroundContainer.style.backgroundImage = `url('${bgType}')`;
            }
        }
        
        // 初始化默认背景按钮状态
        function initDefaultBgButtons() {
            defaultBgBtns.forEach(btn => {
                if (btn.getAttribute('data-bg') === currentBgType) {
                    btn.classList.add('active');
                } else {
                    btn.classList.remove('active');
                }
            });
            
            // 显示或隐藏自定义URL输入框
            if (currentBgType === 'custom') {
                customBgSection.classList.remove('hidden');
            } else {
                customBgSection.classList.add('hidden');
            }
        }

        // 初始化页面
        init();
    </script>
    <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
    <script>LA.init({id:"3MCtTvjjKw4usL1y",ck:"3MCtTvjjKw4usL1y"})</script>
</body>

</html>