Upload 3 files

static/app.js

@@ -41,6 +41,15 @@ const STATE = {
 const DOM = {};
 const HISTORY_KEY = "vomebook_search_history";
 const SEARCH_CACHE_LIMIT = 60;
+const SEARCH_CACHE_TTL = 8 * 60 * 1000;
+const REQUEST_TIMEOUT_MS = 12000;
+const folderContentsPending = new Map();
+const folderTreePending = new Map();
+const sidebarRetryCounts = new Map();
+let searchPrefetchController = null;
+let routeRenderId = 0;
+let sidebarCurrentPath = "";
+let scrollRecoveryTimer = null;
 
 function themeIcon(isDark) {
   const shape = isDark
@@ -172,17 +181,39 @@ const API = {
     return resp.json();
   },
   async getFolders(sourceSlug) {
-    const resp = await fetch(`/api/folders/${sourceSlug}`);
-    return resp.json();
+    if (folderTreePending.has(sourceSlug)) return folderTreePending.get(sourceSlug);
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), REQUEST_TIMEOUT_MS);
+    const pending = fetch(`/api/folders/${sourceSlug}`, { signal: controller.signal })
+      .then((resp) => resp.json())
+      .finally(() => {
+        clearTimeout(timeoutId);
+        folderTreePending.delete(sourceSlug);
+      });
+    folderTreePending.set(sourceSlug, pending);
+    return pending;
   },
   async getContents(sourceSlug, path) {
     const cacheKey = `${sourceSlug}\n${path || ""}`;
     if (STATE.folderContentsCache.has(cacheKey)) return STATE.folderContentsCache.get(cacheKey);
+    if (folderContentsPending.has(cacheKey)) return folderContentsPending.get(cacheKey);
     const qs = path ? `?path=${encodeURIComponent(path)}` : "";
-    const resp = await fetch(`/api/folders/${sourceSlug}/contents${qs}`);
-    const data = await resp.json();
-    STATE.folderContentsCache.set(cacheKey, data);
-    return data;
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), REQUEST_TIMEOUT_MS);
+    const pending = fetch(`/api/folders/${sourceSlug}/contents${qs}`, { signal: controller.signal })
+      .then((resp) => resp.json())
+      .then((data) => {
+        if (data && (Array.isArray(data.folders) || Array.isArray(data.files))) {
+          STATE.folderContentsCache.set(cacheKey, data);
+        }
+        return data;
+      })
+      .finally(() => {
+        clearTimeout(timeoutId);
+        folderContentsPending.delete(cacheKey);
+      });
+    folderContentsPending.set(cacheKey, pending);
+    return pending;
   },
   async preview(docId) {
     const resp = await fetch(`/api/preview/${encodeURIComponent(docId)}`);
@@ -205,14 +236,18 @@ function stableStringify(value) {
 
 function getCachedSearch(key) {
   if (!STATE.searchCache.has(key)) return null;
-  const value = STATE.searchCache.get(key);
+  const entry = STATE.searchCache.get(key);
+  if (!entry || Date.now() - entry.time > SEARCH_CACHE_TTL) {
+    STATE.searchCache.delete(key);
+    return null;
+  }
   STATE.searchCache.delete(key);
-  STATE.searchCache.set(key, value);
-  return value;
+  STATE.searchCache.set(key, entry);
+  return entry.value;
 }
 
 function setCachedSearch(key, value) {
-  STATE.searchCache.set(key, value);
+  STATE.searchCache.set(key, { value, time: Date.now() });
   while (STATE.searchCache.size > SEARCH_CACHE_LIMIT) {
     STATE.searchCache.delete(STATE.searchCache.keys().next().value);
   }
@@ -243,7 +278,6 @@ function cacheDom() {
   DOM.loadInfo = $("#load-info");
   DOM.loadedCount = $("#loaded-count");
   DOM.totalCount = $("#total-count");
-  DOM.didYouMean = $("#did-you-mean");
   DOM.clearFiltersBtn = $("#clear-filters-btn");
   DOM.sortSelect = $("#sort-select");
   DOM.previewPanel = $("#preview-panel");
@@ -301,8 +335,10 @@ function navigateToSource(sourceSlug) {
   STATE.page = 1;
   STATE.folderSelections = [];
   syncRoute();
-  renderSidebar();
-  renderFolderTree();
+  const routeId = ++routeRenderId;
+  sidebarCurrentPath = "";
+  renderSidebar(routeId);
+  renderFolderTree(false, routeId);
   doSearch();
 }
 
@@ -311,8 +347,10 @@ async function navigateToSourceFolder(sourceSlug, folderPath) {
   STATE.page = 1;
   STATE.folderSelections = folderPath ? [folderPath] : [];
   syncRoute();
-  await renderSidebar();
-  await renderFolderTree();
+  const routeId = ++routeRenderId;
+  sidebarCurrentPath = "";
+  await renderSidebar(routeId);
+  await renderFolderTree(false, routeId);
   refreshFolderTreeSelectionState();
   syncUrl();
   doSearch();
@@ -323,8 +361,10 @@ function navigateHome() {
   STATE.page = 1;
   STATE.folderSelections = [];
   syncRoute();
-  renderSidebar();
-  renderFolderTree();
+  const routeId = ++routeRenderId;
+  sidebarCurrentPath = "";
+  renderSidebar(routeId);
+  renderFolderTree(false, routeId);
   doSearch();
 }
 
@@ -413,7 +453,7 @@ function applyTheme() {
   DOM.themeBtn.innerHTML = themeIcon(STATE.isDark);
   DOM.themeBtn.setAttribute("aria-label", STATE.isDark ? "切换到白天模式" : "切换到黑夜模式");
   DOM.themeBtn.title = STATE.isDark ? "白天模式" : "黑夜模式";
-  const previewThemeBtn = DOM.previewPanel?.querySelector("[data-action='toggle-preview-theme']");
+  const previewThemeBtn = DOM.previewPanel ? DOM.previewPanel.querySelector("[data-action='toggle-preview-theme']") : null;
   if (previewThemeBtn) {
     previewThemeBtn.setAttribute("aria-label", STATE.isDark ? "切换到白天模式" : "切换到黑夜模式");
     previewThemeBtn.title = STATE.isDark ? "白天模式" : "黑夜模式";
@@ -476,7 +516,7 @@ function syncUrl(replace = true) {
   const basePath = STATE.source ? `/${encodeURIComponent(STATE.source)}` : "/";
   const nextUrl = params.toString() ? `${basePath}?${params.toString()}` : basePath;
   STATE.searchUrlWithoutPreview = searchUrlKey(nextUrl);
-  const previewEntry = STATE.previewDocId && (!replace || history.state?.previewEntry === true);
+  const previewEntry = STATE.previewDocId && (!replace || (history.state && history.state.previewEntry === true));
   const historyState = STATE.previewDocId ? { preview: true, previewEntry } : null;
   if (replace) history.replaceState(historyState, "", nextUrl);
   else history.pushState(historyState, "", nextUrl);
@@ -528,9 +568,8 @@ function loadUrlState() {
   restoreSizeInput(DOM.filterMaxSize, DOM.filterMaxUnit, STATE.maxSize);
 }
 
-async function pathSearch(signal) {
-  const page = STATE.page;
-  const body = {
+function buildSearchBody(page = STATE.page) {
+  return {
     q: STATE.query,
     sources: getSelectedSourcesForSearch(),
     folders: STATE.folderSelections,
@@ -543,7 +582,15 @@ async function pathSearch(signal) {
     search_paths: STATE.searchPaths,
     fulltext: STATE.fulltext,
   };
-  const cacheKey = `${STATE.source || ""}\n${stableStringify(body)}`;
+}
+
+function searchCacheKey(body, sourceSlug = STATE.source) {
+  return `${sourceSlug || ""}\n${stableStringify(body)}`;
+}
+
+async function pathSearch(signal, page = STATE.page) {
+  const body = buildSearchBody(page);
+  const cacheKey = searchCacheKey(body);
   const cached = getCachedSearch(cacheKey);
   if (cached) return { data: cached, page, cached: true };
   const data = await API.search(body, STATE.source, signal);
@@ -551,8 +598,36 @@ async function pathSearch(signal) {
   return { data, page };
 }
 
+function abortSearchPrefetch() {
+  if (searchPrefetchController) searchPrefetchController.abort();
+  searchPrefetchController = null;
+}
+
+function prefetchNextPage() {
+  if (STATE.isLoading || STATE.results.length >= STATE.total) return;
+  abortSearchPrefetch();
+  const nextPage = Math.floor(STATE.results.length / STATE.pageSize) + 1;
+  if (nextPage <= STATE.page) return;
+  const body = buildSearchBody(nextPage);
+  const cacheKey = searchCacheKey(body);
+  if (getCachedSearch(cacheKey)) return;
+  const controller = new AbortController();
+  searchPrefetchController = controller;
+  API.search(body, STATE.source, controller.signal)
+    .then((data) => {
+      if (!controller.signal.aborted) setCachedSearch(cacheKey, data);
+    })
+    .catch((error) => {
+      if (error.name !== "AbortError") console.warn("搜索预取失败", error);
+    })
+    .finally(() => {
+      if (searchPrefetchController === controller) searchPrefetchController = null;
+    });
+}
+
 async function doSearch() {
   if (STATE.searchController) STATE.searchController.abort();
+  abortSearchPrefetch();
   const controller = new AbortController();
   const sequence = ++STATE.searchSequence;
   STATE.searchController = controller;
@@ -577,6 +652,7 @@ async function doSearch() {
       appendResults(newResults);
     }
     updateStatus();
+    prefetchNextPage();
   } catch (error) {
     if (error.name === "AbortError") return;
     console.error(error);
@@ -643,7 +719,7 @@ function renderResults() {
 async function openPreview(docId, keyword, options = {}) {
   if (options.sync !== false) {
     STATE.previewDocId = docId;
-    syncUrl(history.state?.preview === true);
+    syncUrl(history.state && history.state.preview === true);
   }
   try {
     const data = await API.preview(docId);
@@ -690,7 +766,7 @@ async function openPreview(docId, keyword, options = {}) {
 }
 
 function closePreview() {
-  if (history.state?.previewEntry === true) {
+  if (history.state && history.state.previewEntry === true) {
     history.back();
     return;
   }
@@ -1033,7 +1109,7 @@ function renderFolderNodes(container, nodes, depth) {
   }
 }
 
-async function renderFolderTree(forceReload = false) {
+async function renderFolderTree(forceReload = false, routeId = routeRenderId) {
   updateFilterVisibility();
   if (!STATE.source) {
     DOM.filterFolderTree.innerHTML = '<div style="font-size:12px;opacity:0.6">进入单仓库后可按路径过滤</div>';
@@ -1043,7 +1119,18 @@ async function renderFolderTree(forceReload = false) {
     return;
   }
   if (forceReload || STATE.folderTreeSource !== STATE.source || !STATE.folderTree.length) {
-    STATE.folderTree = normalizeFolderTree(await API.getFolders(STATE.source));
+    const source = STATE.source;
+    let data;
+    try {
+      data = await API.getFolders(source);
+    } catch (error) {
+      if (routeId === routeRenderId && STATE.source === source) {
+        DOM.filterFolderTree.innerHTML = '<div class="sidebar-loading">路径加载失败</div>';
+      }
+      return;
+    }
+    if (routeId !== routeRenderId || STATE.source !== source) return;
+    STATE.folderTree = normalizeFolderTree(data);
     STATE.folderTreeSource = STATE.source;
     STATE.folderNodeMap = buildFolderNodeMap(STATE.folderTree);
     STATE.folderCollapsed = {};
@@ -1053,22 +1140,60 @@ async function renderFolderTree(forceReload = false) {
   refreshFolderTreeSelectionState();
 }
 
-async function renderSidebar() {
+function retrySidebar(source, path, routeId) {
+  const retryKey = `${source}\n${path || ""}`;
+  const tries = sidebarRetryCounts.get(retryKey) || 0;
+  if (tries >= 2) {
+    DOM.sidebarContent.innerHTML = '<div class="sidebar-loading">加载失败</div>';
+    return;
+  }
+  sidebarRetryCounts.set(retryKey, tries + 1);
+  DOM.sidebarContent.innerHTML = '<div class="sidebar-loading">加载失败，正在重试...</div>';
+  setTimeout(() => {
+    if (routeId !== routeRenderId || STATE.source !== source) return;
+    if (path) openFolder(path, routeId);
+    else renderSidebar(routeId);
+  }, 1200);
+}
+
+async function renderSidebar(routeId = routeRenderId) {
   if (!STATE.source) {
     DOM.sidebarTitle.textContent = "数据包";
     DOM.sidebarContent.innerHTML = STATE.sources.map((source) => `<div class="repo-list-item" data-source="${escapeHTML(source.slug)}">${ICON_HTML.source}<span class="repo-name">${escapeHTML(source.name)}</span><span class="repo-count">${(source.count || 0).toLocaleString()}</span></div>`).join("");
     return;
   }
-  DOM.sidebarTitle.textContent = STATE.sourceMap[STATE.source]?.name || STATE.source;
-  const data = await API.getContents(STATE.source, "");
+  const source = STATE.source;
+  sidebarCurrentPath = "";
+  DOM.sidebarTitle.textContent = (STATE.sourceMap[source] && STATE.sourceMap[source].name) || source;
+  DOM.sidebarContent.innerHTML = '<div class="sidebar-loading">加载中...</div>';
+  let data;
+  try {
+    data = await API.getContents(source, "");
+  } catch (error) {
+    if (routeId === routeRenderId && STATE.source === source) retrySidebar(source, "", routeId);
+    return;
+  }
+  if (routeId !== routeRenderId || STATE.source !== source) return;
+  sidebarRetryCounts.delete(`${source}\n`);
   let html = '<div class="back-to-global" id="back-home">返回全局搜索</div>';
   html += (data.folders || []).map((item) => `<div class="browser-item" data-folder-open="${escapeHTML(item.path)}">${ICON_HTML.folder}<span class="browser-name">${escapeHTML(item.name)}</span><span class="browser-count">${(item.count || 0).toLocaleString()}</span></div>`).join("");
   html += (data.files || []).map((item) => `<div class="browser-item" data-doc-id="${escapeHTML(item.doc_id)}">${ICON_HTML.file}<span class="browser-name">${escapeHTML(item.name)}.txt</span><span class="browser-size">${escapeHTML(formatSize(item.size))}</span></div>`).join("");
   DOM.sidebarContent.innerHTML = html;
 }
 
-async function openFolder(path) {
-  const data = await API.getContents(STATE.source, path);
+async function openFolder(path, routeId = routeRenderId) {
+  const source = STATE.source;
+  sidebarCurrentPath = path || "";
+  DOM.sidebarContent.innerHTML = '<div class="sidebar-loading">加载中...</div>';
+  let data;
+  try {
+    data = await API.getContents(source, path);
+  } catch (error) {
+    if (routeId === routeRenderId && STATE.source === source && sidebarCurrentPath === (path || "")) retrySidebar(source, path, routeId);
+    return;
+  }
+  if (routeId !== routeRenderId || STATE.source !== source || sidebarCurrentPath !== (path || "")) return;
+  sidebarRetryCounts.delete(`${source}\n${path || ""}`);
   const parts = path ? path.split("/") : [];
   let html = '<div class="back-to-global" id="back-home">返回全局搜索</div>';
   html += `<div class="sidebar-breadcrumb"><span class="crumb-item" data-folder-nav="">根目录</span>${parts.map((part, index) => `<span class="crumb-sep">/</span><span class="crumb-item" data-folder-nav="${escapeHTML(parts.slice(0, index + 1).join("/"))}">${escapeHTML(part)}</span>`).join("")}</div>`;
@@ -1086,6 +1211,40 @@ function updateSidebarVisibility() {
   DOM.overlay.classList.toggle("open", STATE.isMobile && (STATE.leftSidebarOpen || STATE.rightSidebarOpen));
 }
 
+function recoverSidebarState() {
+  if (!DOM.sidebarContent || !DOM.sidebarContent.querySelector(".sidebar-loading")) return;
+  folderContentsPending.clear();
+  folderTreePending.clear();
+  sidebarRetryCounts.clear();
+  const routeId = ++routeRenderId;
+  if (STATE.source && sidebarCurrentPath) openFolder(sidebarCurrentPath, routeId);
+  else renderSidebar(routeId);
+  renderFolderTree(false, routeId);
+}
+
+function recoverScrollState() {
+  if (!DOM.resultsContainer) return;
+  if (STATE.isLoading && !STATE.searchController) {
+    STATE.isLoading = false;
+    DOM.resultsLoading.style.display = "none";
+  }
+  const nearBottom = DOM.resultsContainer.scrollTop + DOM.resultsContainer.clientHeight >= DOM.resultsContainer.scrollHeight - 240;
+  if (nearBottom && STATE.results.length < STATE.total && !STATE.isLoading) {
+    STATE.page += 1;
+    doSearch();
+  } else {
+    prefetchNextPage();
+  }
+}
+
+function schedulePageRecovery(delay = 0) {
+  clearTimeout(scrollRecoveryTimer);
+  scrollRecoveryTimer = setTimeout(() => {
+    recoverSidebarState();
+    recoverScrollState();
+  }, delay);
+}
+
 function clearFilters() {
   STATE.page = 1;
   STATE.folderSelections = [];
@@ -1405,12 +1564,12 @@ function attachEvents() {
     }
     const folderOpen = event.target.closest("[data-folder-open]");
     if (folderOpen) {
-      openFolder(folderOpen.dataset.folderOpen);
+      openFolder(folderOpen.dataset.folderOpen, routeRenderId);
       return;
     }
     const folderNav = event.target.closest("[data-folder-nav]");
     if (folderNav) {
-      openFolder(folderNav.dataset.folderNav);
+      openFolder(folderNav.dataset.folderNav, routeRenderId);
       return;
     }
     const docItem = event.target.closest("[data-doc-id]");
@@ -1426,6 +1585,12 @@ function attachEvents() {
       doSearch();
     }
   });
+  window.addEventListener("resize", () => schedulePageRecovery(120));
+  window.addEventListener("focus", () => schedulePageRecovery(0));
+  window.addEventListener("pageshow", () => schedulePageRecovery(0));
+  document.addEventListener("visibilitychange", () => {
+    if (!document.hidden) schedulePageRecovery(0);
+  });
   DOM.previewPanel.addEventListener("click", (event) => {
     const closeBtn = event.target.closest("[data-action='close-preview']");
     if (closeBtn) {
@@ -1463,8 +1628,10 @@ function attachEvents() {
     STATE.searchUrlWithoutPreview = nextSearchUrl;
     syncRoute();
     loadUrlState();
-    await renderSidebar();
-    await renderFolderTree();
+    const routeId = ++routeRenderId;
+    sidebarCurrentPath = "";
+    await renderSidebar(routeId);
+    await renderFolderTree(false, routeId);
     updateSidebarVisibility();
     restorePreviewFromUrl({ scroll: false });
     doSearch();
@@ -1482,7 +1649,7 @@ async function init() {
   syncRoute();
   applyMobileMode();
   loadUrlState();
-  if (STATE.previewDocId && history.state?.previewEntry !== true) {
+  if (STATE.previewDocId && !(history.state && history.state.previewEntry === true)) {
     const previewDocId = STATE.previewDocId;
     STATE.previewDocId = null;
     syncUrl();
@@ -1500,8 +1667,9 @@ async function init() {
   STATE.sources = await API.getSources();
   STATE.sourceMap = Object.fromEntries(STATE.sources.map((source) => [source.slug, source]));
   await renderSourcesFilter();
-  await renderSidebar();
-  await renderFolderTree();
+  const routeId = ++routeRenderId;
+  await renderSidebar(routeId);
+  await renderFolderTree(false, routeId);
   updateFilterVisibility();
   await initialSearch;
 }

static/index.html

@@ -12,6 +12,7 @@
 <link rel="stylesheet" href="/static/style.css">
 </head>
 <body class="dark">
+
 <header id="header">
   <div class="header-left">
     <button id="hamburger-btn" class="icon-btn" aria-label="菜单"><span class="ui-icon ui-icon-menu" aria-hidden="true"></span></button>
@@ -32,12 +33,14 @@
     <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="切换到白天模式" title="白天模式"><svg class="theme-icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M20 15.5A8 8 0 1 1 8.5 4 6.5 6.5 0 0 0 20 15.5Z"/></svg></button>
   </div>
-</header>
 
+</header>
 <div id="app-body" class="app-body">
+
   <aside id="left-sidebar" class="sidebar left-sidebar">
     <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>
 
   <main id="main-content" class="main-content">
@@ -45,7 +48,6 @@
       <div class="status-left">
         <span id="result-count" class="result-count"></span>
         <label class="multi-toggle" id="multi-toggle-label" style="display:none"><input type="checkbox" id="multi-select-toggle"><span>多选</span></label>
-        <span id="did-you-mean" class="did-you-mean"></span>
       </div>
       <div class="status-right">
         <button id="clear-filters-btn" class="text-btn" style="display:none">清空筛选</button>
@@ -59,7 +61,6 @@
         </div>
       </div>
     </div>
-
     <div id="multi-action-bar" class="multi-action-bar" style="display:none">
       <button id="multi-select-all" class="multi-action-btn">全选</button>
       <button id="multi-deselect" class="multi-action-btn">取消选择</button>
@@ -67,7 +68,6 @@
       <button id="multi-zip-download" class="multi-action-btn primary">合并下载</button>
       <span id="multi-selected-count" class="multi-selected-count"></span>
     </div>
-
     <div id="results-container" class="results-container">
       <div id="results-list" class="results-list"></div>
       <div id="results-loading" class="loading-spinner" style="display:none"><div class="spinner"></div></div>
@@ -77,9 +77,9 @@
         <button id="empty-random-btn" class="random-big-btn">随机来一篇</button>
       </div>
     </div>
-
     <div id="load-info" class="load-info" style="display:none">已加载 <span id="loaded-count">0</span> / <span id="total-count">0</span> 条</div>
     <div id="preview-panel" class="preview-panel" style="display:none"></div>
+
   </main>
 
   <aside id="right-sidebar" class="sidebar right-sidebar">
@@ -132,6 +132,7 @@
         </div>
       </div>
     </div>
+
   </aside>
 </div>
 
@@ -141,10 +142,11 @@
     <span class="ui-icon ui-icon-book" aria-hidden="true"></span>
     <span>随机来一篇</span>
   </button>
-</footer>
 
+</footer>
 <div id="overlay" class="overlay" style="display:none"></div>
 <div id="toast" class="toast" style="display:none"></div>
+
 <script>if ("serviceWorker" in navigator) { navigator.serviceWorker.register("/sw.js", { scope: "/" }); }</script>
 <script src="/static/app.js"></script>
 </body>

static/style.css

@@ -1128,16 +1128,6 @@ body.mobile .multi-toggle { padding: 1px 4px; font-size: 11px; }
   cursor: pointer;
 }
 
-.did-you-mean {
-  font-size: 12px;
-  color: var(--primary);
-  cursor: pointer;
-}
-
-.did-you-mean:hover, .did-you-mean:focus-visible {
-  text-decoration: underline;
-}
-
 .results-container {
   flex: 1;
   overflow-y: auto;