Upload 2 files

static/app.js

@@ -128,6 +128,7 @@ function cacheDom() {
   DOM.themeBtn = $("#theme-btn");
   DOM.leftSidebar = $("#left-sidebar");
   DOM.rightSidebar = $("#right-sidebar");
+  DOM.sidebarExpandBtn = $("#sidebar-expand-btn");
   DOM.sidebarTitle = $("#sidebar-title");
   DOM.sidebarContent = $("#sidebar-content");
   DOM.resultCount = $("#result-count");
@@ -181,8 +182,14 @@ function syncRoute() {
   STATE.source = route.source;
   if (STATE.source) {
     DOM.sidebarTitle.textContent = STATE.source;
+    if (DOM.sidebarExpandBtn && !STATE.isMobile) DOM.sidebarExpandBtn.style.display = "";
   } else {
     DOM.sidebarTitle.textContent = "数据包";
+    if (DOM.sidebarExpandBtn) {
+      DOM.sidebarExpandBtn.style.display = "none";
+      DOM.leftSidebar.classList.remove("expanded-wide");
+      DOM.sidebarExpandBtn.textContent = "↔";
+    }
   }
 }
 
@@ -238,6 +245,10 @@ function showToast(message, duration = 2000) {
   }, duration);
 }
 
+function setHistoryDropdownOpen(open) {
+  DOM.searchHistoryDropdown.style.display = open ? "" : "none";
+}
+
 function getHistory() {
   try {
     return JSON.parse(localStorage.getItem(HISTORY_KEY)) || [];
@@ -271,7 +282,7 @@ function addHistory(query) {
 function renderHistoryDropdown() {
   const items = getHistory();
   if (!items.length) {
-    DOM.searchHistoryDropdown.style.display = "none";
+    setHistoryDropdownOpen(false);
     return;
   }
   DOM.searchHistoryDropdown.innerHTML = items.map((item) => `
@@ -279,7 +290,7 @@ function renderHistoryDropdown() {
       <span class="history-text">${escapeHTML(item)}</span>
       <button type="button" class="history-del" data-del="${escapeHTML(item)}" aria-label="删除历史">×</button>
     </div>`).join("") + '<div class="history-footer"><button type="button" class="history-clear-all">清空历史</button></div>';
-  DOM.searchHistoryDropdown.style.display = "";
+  setHistoryDropdownOpen(true);
 }
 
 function applyTheme() {
@@ -292,6 +303,13 @@ function applyMobileMode() {
   if (DOM.mobileToggleIcon) {
     DOM.mobileToggleIcon.className = STATE.isMobile ? "ui-icon ui-icon-desktop" : "ui-icon ui-icon-phone";
   }
+  if (DOM.sidebarExpandBtn) {
+    DOM.sidebarExpandBtn.style.display = (!STATE.isMobile && STATE.source) ? "" : "none";
+    if (STATE.isMobile) {
+      DOM.leftSidebar.classList.remove("expanded-wide");
+      DOM.sidebarExpandBtn.textContent = "↔";
+    }
+  }
   if (STATE.isMobile) {
     STATE.leftSidebarOpen = false;
     STATE.rightSidebarOpen = false;
@@ -676,6 +694,12 @@ function attachEvents() {
     if (STATE.isMobile && STATE.leftSidebarOpen) STATE.rightSidebarOpen = false;
     updateSidebarVisibility();
   });
+  if (DOM.sidebarExpandBtn) {
+    DOM.sidebarExpandBtn.addEventListener("click", () => {
+      DOM.leftSidebar.classList.toggle("expanded-wide");
+      DOM.sidebarExpandBtn.textContent = DOM.leftSidebar.classList.contains("expanded-wide") ? "→" : "↔";
+    });
+  }
   DOM.settingsBtn.addEventListener("click", () => {
     STATE.rightSidebarOpen = !STATE.rightSidebarOpen;
     if (STATE.isMobile && STATE.rightSidebarOpen) STATE.leftSidebarOpen = false;
@@ -699,18 +723,25 @@ function attachEvents() {
     STATE.isMobile = !STATE.isMobile;
     applyMobileMode();
   });
+  let historyDropdownActive = false;
   DOM.searchInput.addEventListener("focus", renderHistoryDropdown);
-  DOM.searchInput.addEventListener("blur", () => setTimeout(() => { DOM.searchHistoryDropdown.style.display = "none"; }, 100));
+  DOM.searchInput.addEventListener("blur", () => setTimeout(() => { if (!historyDropdownActive) setHistoryDropdownOpen(false); }, 120));
+  DOM.searchHistoryDropdown.addEventListener("mouseenter", () => { historyDropdownActive = true; });
+  DOM.searchHistoryDropdown.addEventListener("mouseleave", () => { historyDropdownActive = false; });
   DOM.searchHistoryDropdown.addEventListener("click", (event) => {
     const delBtn = event.target.closest(".history-del");
     if (delBtn) {
       event.stopPropagation();
       removeHistory(delBtn.dataset.del);
+      historyDropdownActive = true;
+      DOM.searchInput.focus();
       return;
     }
     const clearBtn = event.target.closest(".history-clear-all");
     if (clearBtn) {
       clearHistory();
+      historyDropdownActive = true;
+      DOM.searchInput.focus();
       return;
     }
     const item = event.target.closest("[data-query]");

static/index.html

@@ -36,7 +36,7 @@
 
 <div id="app-body" class="app-body">
   <aside id="left-sidebar" class="sidebar left-sidebar">
-    <div class="sidebar-header"><span id="sidebar-title">数据包</span></div>
+    <div class="sidebar-header"><span id="sidebar-title">数据包</span><button id="sidebar-expand-btn" class="icon-btn-sm" title="展开/收起侧边栏" style="display:none">↔</button></div>
     <div id="sidebar-content" class="sidebar-content"><div class="sidebar-loading">加载中...</div></div>
   </aside>