Add section filter cancel actions

static/app.js

@@ -516,9 +516,12 @@ function cacheDOM() {
   DOM.toast = $("#toast");
   DOM.filterRepoSection = $("#filter-repo-section");
   DOM.filterRepoList = $("#filter-repo-list");
+  DOM.repoFilterCancel = $("#repo-filter-cancel");
   DOM.filterFolderSection = $("#filter-folder-section");
   DOM.filterFolderTree = $("#filter-folder-tree");
+  DOM.folderFilterCancel = $("#folder-filter-cancel");
   DOM.filterExtList = $("#filter-ext-list");
+  DOM.extFilterCancel = $("#ext-filter-cancel");
   DOM.filterMinSize = $("#filter-min-size");
   DOM.filterMaxSize = $("#filter-max-size");
   DOM.mirrorLinksToggle = $("#mirror-links-toggle");
@@ -1811,9 +1814,16 @@ function updateStatusBar() {
     : (STATE.total > 0 ? `共 ${STATE.total.toLocaleString()} 条结果` : "");
   const has = STATE.filterRepos.length || STATE.filterExtensions.length || STATE.filterFolderSelfs.length || STATE.filterFolderSubtrees.length || STATE.filterMinSize !== null || STATE.filterMaxSize !== null;
   DOM.clearFiltersBtn.style.display = has ? "" : "none";
+  updateFilterCancelButtons();
   if (DOM.multiToggleLabel) DOM.multiToggleLabel.style.display = STATE.total > 0 ? "" : "none";
 }
 
+function updateFilterCancelButtons() {
+  DOM.repoFilterCancel.hidden = STATE.filterRepos.length === 0;
+  DOM.folderFilterCancel.hidden = STATE.filterFolderSelfs.length === 0 && STATE.filterFolderSubtrees.length === 0;
+  DOM.extFilterCancel.hidden = STATE.filterExtensions.length === 0;
+}
+
 function setSearchVisualLoading(loading) {
   document.getElementById("search-box").classList.toggle("is-searching", loading);
   updateStatusBar();
@@ -2048,7 +2058,7 @@ async function renderFilters(routeId) {
     } catch (e) { }
     if (routeId && routeId !== routeRenderId) return;
     const repos = Array.isArray(STATE.repoList) ? STATE.repoList : [];
-    renderCheckboxList(DOM.filterRepoList, repos.map(r => ({ key: r.name, label: r.name.split("/").pop(), count: r.count })), STATE.filterRepos, (vals) => { STATE.filterRepos = vals; STATE.page = 1; doSearch(); });
+    renderCheckboxList(DOM.filterRepoList, repos.map(r => ({ key: r.name, label: r.name.split("/").pop(), count: r.count })), STATE.filterRepos, (vals) => { STATE.filterRepos = vals; STATE.page = 1; updateFilterCancelButtons(); doSearch(); });
   } else {
     DOM.filterRepoSection.style.display = "none";
   }
@@ -2120,6 +2130,7 @@ function renderExtensionFilter() {
     STATE.filterExtensions = vals;
     STATE.page = 1;
     saveStoredExtensionFilters();
+    updateFilterCancelButtons();
     doSearch();
   });
 }
@@ -2426,6 +2437,7 @@ function persistFolderSelection(subtreeSet, selfSet) {
   STATE.filterFolders = merged;
   STATE.page = 1;
   STATE.results = [];
+  updateFilterCancelButtons();
   syncStateToURL(true);
   doSearch();
 }
@@ -3142,6 +3154,27 @@ async function init() {
   DOM.themeBtn.addEventListener("click", toggleTheme);
   DOM.mobileToggleBtn.addEventListener("click", toggleMobile);
   DOM.clearFiltersBtn.addEventListener("click", clearAllFilters);
+  DOM.repoFilterCancel.addEventListener("click", () => {
+    STATE.filterRepos = [];
+    STATE.page = 1;
+    STATE.results = [];
+    updateFilterCancelButtons();
+    renderFilters(routeRenderId);
+    doSearch();
+  });
+  DOM.folderFilterCancel.addEventListener("click", () => {
+    persistFolderSelection(new Set(), new Set());
+    renderFilterFolderTree();
+  });
+  DOM.extFilterCancel.addEventListener("click", () => {
+    STATE.filterExtensions = [];
+    STATE.page = 1;
+    STATE.results = [];
+    saveStoredExtensionFilters();
+    updateFilterCancelButtons();
+    renderExtensionFilter();
+    doSearch();
+  });
   DOM.searchFoldersToggle.addEventListener("change", () => {
     STATE.searchFolders = DOM.searchFoldersToggle.checked;
     STATE.page = 1;

static/index.html

@@ -190,12 +190,14 @@
         </label>
       </div>
       <div id="filter-repo-section" class="filter-section">
-        <div class="filter-section-title">仓库过滤</div>
+        <div class="filter-section-title">
+          <span class="filter-title-leading"><span>仓库过滤</span><button id="repo-filter-cancel" class="text-btn-sm" hidden>取消</button></span>
+        </div>
         <div id="filter-repo-list" class="filter-checkbox-list"></div>
       </div>
       <div id="filter-folder-section" class="filter-section">
         <div class="filter-section-title">
-          <span>路径过滤</span>
+          <span class="filter-title-leading"><span>路径过滤</span><button id="folder-filter-cancel" class="text-btn-sm" hidden>取消</button></span>
           <span class="filter-actions">
             <button id="folder-select-all" class="text-btn-sm">全选</button>
             <button id="folder-deselect-all" class="text-btn-sm">反选</button>
@@ -203,9 +205,9 @@
         </div>
         <div id="filter-folder-tree" class="filter-folder-tree"></div>
       </div>
-      <div class="filter-section">
+      <div id="filter-ext-section" class="filter-section">
         <div class="filter-section-title">
-          <span>文件类型</span>
+          <span class="filter-title-leading"><span>文件类型</span><button id="ext-filter-cancel" class="text-btn-sm" hidden>取消</button></span>
           <span class="filter-actions">
             <button id="ext-select-all" class="text-btn-sm">全选</button>
             <button id="ext-deselect-all" class="text-btn-sm">反选</button>

static/style.css

@@ -1151,6 +1151,13 @@ body.mobile .mobile-selected-count {
 .filter-actions {
   display: flex;
   gap: 4px;
+  margin-left: auto;
+}
+
+.filter-title-leading {
+  display: flex;
+  align-items: center;
+  gap: 4px;
 }
 
 .filter-checkbox-list {