feat: 优化搜索框样式

assets/style.css

@@ -644,6 +644,7 @@ body .content.expanded {
     border-radius: 50%;
     opacity: 0;
     transition: all 0.3s ease;
+    pointer-events: none; /* 不阻挡点击，避免遮住图标可点击区域 */
 }
 
 .search-box.has-results::after {
@@ -697,15 +698,30 @@ body .content.expanded {
 
 /* 搜索图标和搜索引擎切换图标位置调整 */
 .search-box .search-icon {
-    right: 1.5rem;
+    right: 2.0rem;
     cursor: pointer;
     transition: all 0.3s ease;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
+/* 下拉指示图标交互与状态 */
+.search-box .search-engine-toggle:hover { color: inherit; }
+
+.search-box.dropdown-open .search-engine-toggle { transform: translateY(-50%) rotate(180deg); }
+
 .search-box .search-engine-toggle {
-    right: 3.5rem;
+    right: 0.8rem;
     cursor: pointer;
     font-size: 0.8rem;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 /* 搜索引擎下拉菜单 */

src/script.js

@@ -392,6 +392,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // 搜索引擎相关元素
     const searchIcon = document.querySelector('.search-icon');
+    const searchEngineToggle = document.querySelector('.search-engine-toggle');
     const searchEngineDropdown = document.querySelector('.search-engine-dropdown');
     const searchEngineOptions = document.querySelectorAll('.search-engine-option');
 
@@ -990,10 +991,38 @@ document.addEventListener('DOMContentLoaded', () => {
         updateSearchEngineUI();
 
         // 初始化搜索引擎下拉菜单事件
-        searchIcon.addEventListener('click', (e) => {
+        const toggleEngineDropdown = () => {
-            e.stopPropagation();
+            const next = !searchEngineDropdown.classList.contains('active');
-            searchEngineDropdown.classList.toggle('active');
+            searchEngineDropdown.classList.toggle('active', next);
-        });
+            if (searchBox) {
+                searchBox.classList.toggle('dropdown-open', next);
+            }
+            if (searchEngineToggle) {
+                searchEngineToggle.setAttribute('aria-expanded', String(next));
+            }
+        };
+
+        if (searchIcon) {
+            searchIcon.addEventListener('click', (e) => {
+                e.stopPropagation();
+                toggleEngineDropdown();
+            });
+        }
+
+        if (searchEngineToggle) {
+            searchEngineToggle.addEventListener('click', (e) => {
+                e.stopPropagation();
+                toggleEngineDropdown();
+            });
+            // 键盘可访问性：Enter/Space 触发
+            searchEngineToggle.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    toggleEngineDropdown();
+                }
+            });
+        }
 
         // 点击搜索引擎选项
         searchEngineOptions.forEach(option => {
@@ -1023,6 +1052,9 @@ document.addEventListener('DOMContentLoaded', () => {
 
                     // 关闭下拉菜单
                     searchEngineDropdown.classList.remove('active');
+                    if (searchBox) {
+                        searchBox.classList.remove('dropdown-open');
+                    }
                 }
             });
         });
@@ -1030,6 +1062,9 @@ document.addEventListener('DOMContentLoaded', () => {
         // 点击页面其他位置关闭下拉菜单
         document.addEventListener('click', () => {
             searchEngineDropdown.classList.remove('active');
+            if (searchBox) {
+                searchBox.classList.remove('dropdown-open');
+            }
         });
     }
 

templates/layouts/default.hbs

@@ -104,8 +104,9 @@
             <!-- 搜索框容器 -->
             <div class="search-container">
                 <div class="search-box">
-                    <input type="text" id="search" placeholder="搜索... (点击右侧图标切换搜索引擎)">
+                    <input type="text" id="search" placeholder="搜索...">
                     <i class="fas fa-search search-icon" title="本地搜索"></i>
+                    <i class="fas fa-chevron-down search-engine-toggle" title="选择搜索引擎" role="button" aria-label="选择搜索引擎" aria-expanded="false" tabindex="0"></i>
                     <div class="search-engine-dropdown">
                         <div class="search-engine-option" data-engine="local" title="本地搜索">
                             <i class="fas fa-search"></i>
@@ -143,4 +144,4 @@
     <script src="pinyin-match.js"></script>
     <script src="script.js"></script>
 </body>
-</html>
+</html>