Upload 3 files

static/app.js

@@ -124,6 +124,7 @@ function cacheDom() {
   DOM.hamburgerBtn = $("#hamburger-btn");
   DOM.settingsBtn = $("#settings-btn");
   DOM.mobileToggleBtn = $("#mobile-toggle-btn");
+  DOM.mobileToggleIcon = $("#mobile-toggle-icon");
   DOM.themeBtn = $("#theme-btn");
   DOM.leftSidebar = $("#left-sidebar");
   DOM.rightSidebar = $("#right-sidebar");
@@ -273,6 +274,9 @@ function applyTheme() {
 function applyMobileMode() {
   document.body.classList.toggle("mobile", STATE.isMobile);
   document.body.classList.toggle("force-desktop", !STATE.isMobile);
+  if (DOM.mobileToggleIcon) {
+    DOM.mobileToggleIcon.className = STATE.isMobile ? "ui-icon ui-icon-desktop" : "ui-icon ui-icon-phone";
+  }
   if (STATE.isMobile) {
     STATE.leftSidebarOpen = false;
     STATE.rightSidebarOpen = false;
@@ -283,6 +287,51 @@ function applyMobileMode() {
   updateSidebarVisibility();
 }
 
+function syncUrl(replace = true) {
+  const params = new URLSearchParams();
+  if (STATE.query) params.set("q", STATE.query);
+  if (STATE.selectedSources.length && !STATE.source) {
+    for (const slug of STATE.selectedSources) params.append("source", slug);
+  }
+  if (STATE.folderSelections.length && STATE.source) {
+    for (const path of STATE.folderSelections) params.append("folder", path);
+  }
+  if (STATE.minSize !== null) params.set("min_size", String(STATE.minSize));
+  if (STATE.maxSize !== null) params.set("max_size", String(STATE.maxSize));
+  if (DOM.sortSelect.value !== "relevance") params.set("sort", DOM.sortSelect.value);
+  if (STATE.exact) params.set("exact", "1");
+  if (STATE.fulltext) params.set("fulltext", "1");
+  if (!STATE.historyEnabled) params.set("history", "0");
+  if (STATE.isMobile) params.set("view", "mobile");
+  const basePath = STATE.source ? `/${encodeURIComponent(STATE.source)}` : "/";
+  const nextUrl = params.toString() ? `${basePath}?${params.toString()}` : basePath;
+  if (replace) history.replaceState(null, "", nextUrl);
+  else history.pushState(null, "", nextUrl);
+}
+
+function loadUrlState() {
+  const params = new URLSearchParams(window.location.search);
+  STATE.query = params.get("q") || "";
+  STATE.selectedSources = params.getAll("source");
+  STATE.folderSelections = params.getAll("folder");
+  STATE.minSize = params.get("min_size") ? parseInt(params.get("min_size"), 10) : null;
+  STATE.maxSize = params.get("max_size") ? parseInt(params.get("max_size"), 10) : null;
+  STATE.exact = params.get("exact") === "1";
+  STATE.fulltext = params.get("fulltext") === "1";
+  STATE.historyEnabled = params.get("history") !== "0";
+  const sort = params.get("sort") || "relevance";
+  const view = params.get("view");
+  if (view === "mobile") STATE.isMobile = true;
+  if (view === "desktop") STATE.isMobile = false;
+  DOM.searchInput.value = STATE.query;
+  DOM.exactToggle.checked = STATE.exact;
+  DOM.fulltextToggle.checked = STATE.fulltext;
+  DOM.historyToggle.checked = STATE.historyEnabled;
+  DOM.sortSelect.value = sort;
+  if (STATE.minSize !== null) DOM.filterMinSize.value = STATE.minSize;
+  if (STATE.maxSize !== null) DOM.filterMaxSize.value = STATE.maxSize;
+}
+
 async function ensureFulltextLoaded() {
   if (!STATE.fulltextManifest) {
     STATE.fulltextManifest = await API.fulltextManifest();
@@ -494,6 +543,7 @@ async function renderSourcesFilter() {
   renderCheckboxList(DOM.filterSourceList, STATE.sources.map((source) => ({ key: source.slug, label: source.name, count: source.count })), STATE.selectedSources, (values) => {
     STATE.selectedSources = values;
     STATE.page = 1;
+    syncUrl();
     doSearch();
   });
 }
@@ -520,6 +570,7 @@ function renderFolderNodes(container, nodes, depth) {
         STATE.folderSelections = STATE.folderSelections.filter((path) => path !== node.path);
       }
       STATE.page = 1;
+      syncUrl();
       doSearch();
     });
     container.appendChild(row);
@@ -581,6 +632,7 @@ function clearFilters() {
   DOM.filterMaxUnit.value = "MB";
   renderSourcesFilter();
   renderFolderTree();
+  syncUrl();
   doSearch();
 }
 
@@ -596,6 +648,7 @@ async function randomDoc() {
 function updateMultiUi() {
   STATE.multiSelect = DOM.multiSelectToggle.checked;
   DOM.multiActionBar.style.display = STATE.multiSelect ? "" : "none";
+  document.body.classList.toggle("multiselect", STATE.multiSelect);
   if (!STATE.multiSelect) STATE.selectedIds.clear();
   DOM.multiSelectedCount.textContent = STATE.selectedIds.size ? `已选 ${STATE.selectedIds.size} 项` : "";
   renderResults();
@@ -643,6 +696,7 @@ function attachEvents() {
     if (!item) return;
     DOM.searchInput.value = item.dataset.query;
     STATE.query = item.dataset.query;
+    syncUrl();
     doSearch();
   });
   let timer = null;
@@ -652,27 +706,32 @@ function attachEvents() {
       STATE.query = DOM.searchInput.value.trim();
       STATE.page = 1;
       addHistory(STATE.query);
+      syncUrl();
       doSearch();
     }, 250);
   });
   DOM.sortSelect.addEventListener("change", () => {
     STATE.page = 1;
+    syncUrl();
     doSearch();
   });
   DOM.exactToggle.addEventListener("change", () => {
     STATE.exact = DOM.exactToggle.checked;
     STATE.page = 1;
+    syncUrl();
     doSearch();
   });
   DOM.historyToggle.addEventListener("change", () => {
     STATE.historyEnabled = DOM.historyToggle.checked;
     if (!STATE.historyEnabled) saveHistory([]);
+    syncUrl();
   });
   DOM.fulltextToggle.addEventListener("change", async () => {
     STATE.fulltext = DOM.fulltextToggle.checked;
     DOM.searchInput.placeholder = STATE.fulltext ? "全文搜索 TXT 正文..." : "搜索 TXT 文件或路径...";
     STATE.page = 1;
     if (STATE.fulltext) await ensureFulltextLoaded();
+    syncUrl();
     doSearch();
   });
   DOM.clearFiltersBtn.addEventListener("click", clearFilters);
@@ -680,18 +739,22 @@ function attachEvents() {
   if (DOM.randomBookBtn) DOM.randomBookBtn.addEventListener("click", randomDoc);
   DOM.filterMinSize.addEventListener("input", () => {
     STATE.minSize = bytesFromInput(DOM.filterMinSize.value, DOM.filterMinUnit.value);
+    syncUrl();
     doSearch();
   });
   DOM.filterMaxSize.addEventListener("input", () => {
     STATE.maxSize = bytesFromInput(DOM.filterMaxSize.value, DOM.filterMaxUnit.value);
+    syncUrl();
     doSearch();
   });
   DOM.filterMinUnit.addEventListener("change", () => {
     STATE.minSize = bytesFromInput(DOM.filterMinSize.value, DOM.filterMinUnit.value);
+    syncUrl();
     doSearch();
   });
   DOM.filterMaxUnit.addEventListener("change", () => {
     STATE.maxSize = bytesFromInput(DOM.filterMaxSize.value, DOM.filterMaxUnit.value);
+    syncUrl();
     doSearch();
   });
   DOM.folderSelectAll.addEventListener("click", () => {
@@ -699,11 +762,13 @@ function attachEvents() {
     flattenNodes(STATE.folderTree, paths);
     STATE.folderSelections = paths;
     renderFolderTree();
+    syncUrl();
     doSearch();
   });
   DOM.folderDeselectAll.addEventListener("click", () => {
     STATE.folderSelections = [];
     renderFolderTree();
+    syncUrl();
     doSearch();
   });
   DOM.multiSelectToggle.addEventListener("change", updateMultiUi);
@@ -767,6 +832,7 @@ function attachEvents() {
         STATE.folderSelections = path ? [path] : [];
       }
       renderFolderTree();
+      syncUrl();
       doSearch();
     }
   });
@@ -826,8 +892,9 @@ async function init() {
   if (savedMobile === "mobile") STATE.isMobile = true;
   else if (savedMobile === "desktop") STATE.isMobile = false;
   else STATE.isMobile = window.innerWidth <= 768;
-  applyMobileMode();
   syncRoute();
+  loadUrlState();
+  applyMobileMode();
   STATE.sources = await API.getSources();
   STATE.sourceMap = Object.fromEntries(STATE.sources.map((source) => [source.slug, source]));
   await renderSourcesFilter();
@@ -836,6 +903,7 @@ async function init() {
   updateFilterVisibility();
   attachEvents();
   updateSidebarVisibility();
+  syncUrl();
   doSearch();
 }
 

static/index.html

@@ -14,23 +14,23 @@
 <body class="dark">
 <header id="header">
   <div class="header-left">
-    <button id="hamburger-btn" class="icon-btn" aria-label="菜单">☰</button>
+    <button id="hamburger-btn" class="icon-btn" aria-label="菜单"><span class="ui-icon ui-icon-menu" aria-hidden="true"></span></button>
     <a id="header-logo" class="header-logo" href="https://huggingface.co/VOMEBOOK" title="VOMEBOOK">
       <span id="header-title">VOMEBOOK</span>
     </a>
   </div>
   <div class="header-center">
     <div class="search-box">
-      <span class="search-icon">⌕</span>
+      <span class="search-icon"><span class="ui-icon ui-icon-search" aria-hidden="true"></span></span>
       <input type="search" id="search-input" class="search-input" placeholder="搜索 TXT 文件或路径..." autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
       <kbd class="search-kbd">/</kbd>
       <div id="search-history-dropdown" class="search-history-dropdown" style="display:none"></div>
     </div>
   </div>
   <div class="header-right">
-    <button id="settings-btn" class="icon-btn" aria-label="搜索设置">⚙</button>
-    <button id="mobile-toggle-btn" class="icon-btn" aria-label="切换手机或电脑模式" title="手机/电脑模式切换">⌘</button>
-    <button id="theme-btn" class="icon-btn" aria-label="切换主题">◐</button>
+    <button id="settings-btn" class="icon-btn" aria-label="搜索设置"><span class="ui-icon ui-icon-sliders" aria-hidden="true"></span></button>
+    <button id="mobile-toggle-btn" class="icon-btn" aria-label="切换手机或电脑模式" title="手机/电脑模式切换"><span id="mobile-toggle-icon" class="ui-icon ui-icon-devices" aria-hidden="true"></span></button>
+    <button id="theme-btn" class="icon-btn" aria-label="切换主题"><span class="ui-icon ui-icon-theme" aria-hidden="true"></span></button>
   </div>
 </header>
 

static/style.css

@@ -238,6 +238,9 @@ ul, li {
   flex-shrink: 0;
   margin-left: 12px;
   color: var(--on-surface-variant);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .search-input {
@@ -358,6 +361,12 @@ ul, li {
   color: var(--on-surface);
 }
 
+.icon-btn .ui-icon,
+.search-icon .ui-icon {
+  width: 18px;
+  height: 18px;
+}
+
 .icon-btn-sm {
   width: 28px;
   height: 28px;
@@ -802,6 +811,154 @@ body.light .left-sidebar.expanded-wide .browser-item:nth-child(even) {
   border-left-width: 0.75px;
 }
 
+.ui-icon-menu::before {
+  content: "";
+  position: absolute;
+  left: 2px;
+  top: 4px;
+  width: 12px;
+  height: 1.8px;
+  background: currentColor;
+  border-radius: 999px;
+  box-shadow: 0 4px 0 currentColor, 0 8px 0 currentColor;
+}
+
+.ui-icon-search::before {
+  content: "";
+  position: absolute;
+  left: 2px;
+  top: 2px;
+  width: 9px;
+  height: 9px;
+  border: 1.8px solid currentColor;
+  border-radius: 50%;
+}
+
+.ui-icon-search::after {
+  content: "";
+  position: absolute;
+  right: 2px;
+  bottom: 2px;
+  width: 6px;
+  height: 1.8px;
+  background: currentColor;
+  border-radius: 999px;
+  transform: rotate(45deg);
+}
+
+.ui-icon-sliders::before,
+.ui-icon-sliders::after {
+  content: "";
+  position: absolute;
+  left: 2px;
+  width: 12px;
+  height: 1.8px;
+  background: currentColor;
+  border-radius: 999px;
+}
+
+.ui-icon-sliders::before {
+  top: 5px;
+  box-shadow: 0 6px 0 currentColor;
+}
+
+.ui-icon-sliders::after {
+  top: 5px;
+  left: 8px;
+  width: 4px;
+  height: 4px;
+  border: 1.8px solid currentColor;
+  border-radius: 50%;
+  background: var(--surface-container);
+  box-shadow: -6px 6px 0 -1px var(--surface-container), -6px 6px 0 0 currentColor;
+}
+
+.ui-icon-theme::before {
+  content: "";
+  position: absolute;
+  inset: 2px;
+  border-radius: 50%;
+  border: 1.8px solid currentColor;
+}
+
+.ui-icon-theme::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 7px;
+  height: 11px;
+  background: var(--surface-container);
+  border-radius: 999px;
+}
+
+.ui-icon-phone::before {
+  content: "";
+  position: absolute;
+  left: 4px;
+  top: 1px;
+  width: 8px;
+  height: 14px;
+  border: 1.8px solid currentColor;
+  border-radius: 3px;
+}
+
+.ui-icon-phone::after {
+  content: "";
+  position: absolute;
+  left: 7px;
+  bottom: 3px;
+  width: 2px;
+  height: 2px;
+  background: currentColor;
+  border-radius: 50%;
+}
+
+.ui-icon-desktop::before {
+  content: "";
+  position: absolute;
+  left: 1px;
+  top: 2px;
+  width: 14px;
+  height: 9px;
+  border: 1.8px solid currentColor;
+  border-radius: 3px;
+}
+
+.ui-icon-desktop::after {
+  content: "";
+  position: absolute;
+  left: 5px;
+  bottom: 1px;
+  width: 6px;
+  height: 1.8px;
+  background: currentColor;
+  border-radius: 999px;
+  box-shadow: 0 -3px 0 -0.3px var(--surface-container);
+}
+
+.ui-icon-devices::before {
+  content: "";
+  position: absolute;
+  left: 1px;
+  top: 3px;
+  width: 9px;
+  height: 7px;
+  border: 1.8px solid currentColor;
+  border-radius: 2px;
+}
+
+.ui-icon-devices::after {
+  content: "";
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  width: 5px;
+  height: 10px;
+  border: 1.8px solid currentColor;
+  border-radius: 2px;
+}
+
 /* ═══════════════════════════════════════════════════════════
    Status Bar
    ═══════════════════════════════════════════════════════════ */
@@ -1731,15 +1888,17 @@ body.mobile .multi-action-btn {
 }
 
 .result-checkbox {
-  display: none;
+  display: block;
   flex-shrink: 0;
-  width: 16px;
-  height: 16px;
+  width: 18px;
+  height: 18px;
   margin-right: 6px;
   align-self: center;
   accent-color: var(--primary);
+  opacity: 0.85;
 }
-body.multiselect .result-checkbox { display: block; }
+.result-checkbox:not(:checked) { visibility: hidden; }
+body.multiselect .result-checkbox { visibility: visible; }
 body.multiselect .result-file-icon { display: none; }
 .result-item.selected {
   background: color-mix(in srgb, var(--primary) 15%, transparent) !important;