Upload 2 files

static/app.js

@@ -6,6 +6,7 @@ const STATE = {
   pageSize: 100,
   total: 0,
   results: [],
+  previewDocId: null,
   sources: [],
   sourceMap: {},
   folderTree: [],
@@ -372,6 +373,7 @@ function syncUrl(replace = true) {
   if (!STATE.leftSidebarOpen) params.set("sidebar", "0");
   if (DOM.leftSidebar.classList.contains("expanded-wide")) params.set("wide", "1");
   if (STATE.rightSidebarOpen) params.set("filters", "1");
+  if (STATE.previewDocId) params.set("preview", STATE.previewDocId);
   const basePath = STATE.source ? `/${encodeURIComponent(STATE.source)}` : "/";
   const nextUrl = params.toString() ? `${basePath}?${params.toString()}` : basePath;
   if (replace) history.replaceState(null, "", nextUrl);
@@ -398,6 +400,7 @@ function loadUrlState() {
   DOM.sortSelect.value = sort;
   STATE.leftSidebarOpen = !STATE.isMobile && params.get("sidebar") !== "0";
   STATE.rightSidebarOpen = params.get("filters") === "1";
+  STATE.previewDocId = params.get("preview") || null;
   DOM.leftSidebar.classList.toggle("expanded-wide", params.get("wide") === "1" && !STATE.isMobile);
   if (DOM.sidebarExpandBtn) DOM.sidebarExpandBtn.textContent = params.get("wide") === "1" && !STATE.isMobile ? "→" : "↔";
   if (STATE.minSize !== null) DOM.filterMinSize.value = STATE.minSize;
@@ -574,7 +577,7 @@ function renderResults() {
   DOM.multiActionBar.style.display = STATE.multiSelect ? "" : "none";
 }
 
-async function openPreview(docId, keyword) {
+async function openPreview(docId, keyword, options = {}) {
   try {
     const data = await API.preview(docId);
     if (data.error) {
@@ -590,18 +593,39 @@ async function openPreview(docId, keyword) {
     }
     DOM.previewPanel.innerHTML = `
       <div class="preview-header">
-        <div class="preview-title">${escapeHTML(data.title)}</div>
-        <div class="preview-path">${escapeHTML(data.source)} / ${escapeHTML(data.path)}</div>
+        <div>
+          <div class="preview-title">${escapeHTML(data.title)}</div>
+          <div class="preview-path">${escapeHTML(data.source)} / ${escapeHTML(data.path)}</div>
+        </div>
+        <button type="button" class="icon-btn-sm" data-action="close-preview" aria-label="关闭预览">×</button>
       </div>
       <pre class="preview-body">${text}</pre>`;
     DOM.previewPanel.style.display = "block";
-    DOM.previewPanel.scrollIntoView({ behavior: "smooth", block: "start" });
+    STATE.previewDocId = docId;
+    if (options.sync !== false) syncUrl();
+    if (options.scroll !== false) DOM.previewPanel.scrollIntoView({ behavior: "smooth", block: "start" });
   } catch (error) {
     console.error(error);
     showToast("预览失败");
   }
 }
 
+function closePreview() {
+  STATE.previewDocId = null;
+  DOM.previewPanel.innerHTML = "";
+  DOM.previewPanel.style.display = "none";
+  syncUrl();
+}
+
+function restorePreviewFromUrl(options = {}) {
+  if (!STATE.previewDocId) {
+    DOM.previewPanel.innerHTML = "";
+    DOM.previewPanel.style.display = "none";
+    return;
+  }
+  openPreview(STATE.previewDocId, STATE.query, { sync: false, scroll: options.scroll === true });
+}
+
 function renderCheckboxList(container, items, selected, onChange) {
   container.innerHTML = items.map((item) => `
     <label class="filter-checkbox-item">
@@ -1312,6 +1336,10 @@ function attachEvents() {
       doSearch();
     }
   });
+  DOM.previewPanel.addEventListener("click", (event) => {
+    const closeBtn = event.target.closest("[data-action='close-preview']");
+    if (closeBtn) closePreview();
+  });
   document.addEventListener("keydown", (event) => {
     if (event.key === "/" && document.activeElement !== DOM.searchInput) {
       event.preventDefault();
@@ -1321,8 +1349,11 @@ function attachEvents() {
   });
   window.addEventListener("popstate", async () => {
     syncRoute();
+    loadUrlState();
     await renderSidebar();
     await renderFolderTree();
+    updateSidebarVisibility();
+    restorePreviewFromUrl({ scroll: false });
     doSearch();
   });
 }
@@ -1352,6 +1383,7 @@ async function init() {
   }
   updateSidebarVisibility();
   syncUrl();
+  restorePreviewFromUrl({ scroll: false });
   doSearch();
 }
 

static/style.css

@@ -448,6 +448,10 @@ ul, li {
 }
 
 .preview-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
   padding: 12px 14px;
   border-bottom: 1px solid var(--outline-variant);
 }