Upload 2 files

static/app.js

@@ -250,6 +250,17 @@ function saveHistory(items) {
   localStorage.setItem(HISTORY_KEY, JSON.stringify(items.slice(0, 20)));
 }
 
+function removeHistory(query) {
+  const items = getHistory().filter((item) => item !== query);
+  saveHistory(items);
+  renderHistoryDropdown();
+}
+
+function clearHistory() {
+  saveHistory([]);
+  renderHistoryDropdown();
+}
+
 function addHistory(query) {
   if (!STATE.historyEnabled || !query) return;
   const items = getHistory().filter((item) => item !== query);
@@ -263,7 +274,11 @@ function renderHistoryDropdown() {
     DOM.searchHistoryDropdown.style.display = "none";
     return;
   }
-  DOM.searchHistoryDropdown.innerHTML = items.map((item) => `<div class="history-item" data-query="${escapeHTML(item)}"><span class="history-text">${escapeHTML(item)}</span></div>`).join("");
+  DOM.searchHistoryDropdown.innerHTML = items.map((item) => `
+    <div class="history-item" data-query="${escapeHTML(item)}">
+      <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 = "";
 }
 
@@ -687,6 +702,17 @@ function attachEvents() {
   DOM.searchInput.addEventListener("focus", renderHistoryDropdown);
   DOM.searchInput.addEventListener("blur", () => setTimeout(() => { DOM.searchHistoryDropdown.style.display = "none"; }, 100));
   DOM.searchHistoryDropdown.addEventListener("click", (event) => {
+    const delBtn = event.target.closest(".history-del");
+    if (delBtn) {
+      event.stopPropagation();
+      removeHistory(delBtn.dataset.del);
+      return;
+    }
+    const clearBtn = event.target.closest(".history-clear-all");
+    if (clearBtn) {
+      clearHistory();
+      return;
+    }
     const item = event.target.closest("[data-query]");
     if (!item) return;
     DOM.searchInput.value = item.dataset.query;
@@ -694,6 +720,35 @@ function attachEvents() {
     syncUrl();
     doSearch();
   });
+  let historyLongPressTimer = null;
+  const cancelHistoryLongPress = () => {
+    if (historyLongPressTimer) {
+      clearTimeout(historyLongPressTimer);
+      historyLongPressTimer = null;
+    }
+  };
+  DOM.searchHistoryDropdown.addEventListener("mousedown", (event) => {
+    const item = event.target.closest("[data-query]");
+    if (!item || event.target.closest(".history-del") || event.target.closest(".history-clear-all")) return;
+    cancelHistoryLongPress();
+    historyLongPressTimer = setTimeout(() => {
+      removeHistory(item.dataset.query);
+      historyLongPressTimer = null;
+    }, 600);
+  });
+  DOM.searchHistoryDropdown.addEventListener("mouseup", cancelHistoryLongPress);
+  DOM.searchHistoryDropdown.addEventListener("mouseleave", cancelHistoryLongPress);
+  DOM.searchHistoryDropdown.addEventListener("touchstart", (event) => {
+    const item = event.target.closest("[data-query]");
+    if (!item || event.target.closest(".history-del") || event.target.closest(".history-clear-all")) return;
+    cancelHistoryLongPress();
+    historyLongPressTimer = setTimeout(() => {
+      removeHistory(item.dataset.query);
+      historyLongPressTimer = null;
+    }, 650);
+  }, { passive: true });
+  DOM.searchHistoryDropdown.addEventListener("touchend", cancelHistoryLongPress, { passive: true });
+  DOM.searchHistoryDropdown.addEventListener("touchmove", cancelHistoryLongPress, { passive: true });
   let timer = null;
   DOM.searchInput.addEventListener("input", () => {
     clearTimeout(timer);
@@ -701,6 +756,7 @@ function attachEvents() {
       STATE.query = DOM.searchInput.value.trim();
       STATE.page = 1;
       addHistory(STATE.query);
+      renderHistoryDropdown();
       syncUrl();
       doSearch();
     }, 250);

static/style.css

@@ -307,6 +307,40 @@ ul, li {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.search-history-dropdown .history-del {
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  border-radius: 999px;
+  color: var(--on-surface-variant);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  opacity: 0.65;
+}
+.search-history-dropdown .history-del:hover,
+.search-history-dropdown .history-del:focus-visible {
+  background: var(--surface-variant);
+  color: var(--primary);
+  opacity: 1;
+}
+.search-history-dropdown .history-footer {
+  padding: 6px 12px;
+  border-top: 1px solid var(--outline-variant);
+  display: flex;
+  justify-content: center;
+}
+.search-history-dropdown .history-clear-all {
+  font-size: 12px;
+  color: var(--primary);
+  padding: 4px 8px;
+  border-radius: 6px;
+}
+.search-history-dropdown .history-clear-all:hover,
+.search-history-dropdown .history-clear-all:focus-visible {
+  background: var(--surface-variant);
+}
 .search-history-dropdown .history-del {
   flex-shrink: 0;
   background: none;