Upload 2 files

static/app.js

@@ -400,6 +400,7 @@ function renderResults() {
   DOM.pageTotal.textContent = String(totalPages);
   DOM.prevPage.disabled = STATE.page <= 1;
   DOM.nextPage.disabled = STATE.page >= totalPages;
+  DOM.results.hidden = !STATE.results.length;
   DOM.emptyState.style.display = STATE.results.length ? "none" : "flex";
   DOM.results.innerHTML = STATE.results.map((item) => resultHTML(item)).join("");
 }
@@ -524,10 +525,34 @@ function previewTitleHTML(item) {
 
 function previewMetaHTML(item) {
   const authors = item.authors && item.authors.length ? ` / ${escapeHTML(item.authors.join(", "))}` : "";
-  const tags = item.tag_names && item.tag_names.length ? `<div class="preview-path">${escapeHTML(item.tag_names.join(" / "))}</div>` : "";
+  const tagNames = item.tag_names || [];
+  const pageSize = 8;
+  const totalPages = Math.ceil(tagNames.length / pageSize);
+  const tagItems = tagNames.map((tag, index) => {
+    const page = Math.floor(index / pageSize) + 1;
+    const hasNextOnPage = index + 1 < tagNames.length && Math.floor((index + 1) / pageSize) + 1 === page;
+    return `<span data-preview-tag-page="${page}" ${page > 1 ? "hidden" : ""}>${escapeHTML(tag)}${hasNextOnPage ? '<span class="path-sep"> / </span>' : ""}</span>`;
+  }).join("");
+  const pager = totalPages > 1 ? `<div class="preview-tag-pager"><button type="button" class="text-btn-sm" data-preview-tag-page-change="prev" disabled>上一页</button><span><span data-preview-tag-current>1</span> / ${totalPages}</span><button type="button" class="text-btn-sm" data-preview-tag-page-change="next">下一页</button></div>` : "";
+  const tags = tagNames.length ? `<div class="preview-tags" data-preview-tags data-total-pages="${totalPages}"><div class="preview-path preview-tag-list">${tagItems}</div>${pager}</div>` : "";
   return `<div class="preview-path">${escapeHTML(item.publication_name)}${authors}</div>${tags}`;
 }
 
+function changePreviewTagPage(button) {
+  const container = button.closest("[data-preview-tags]");
+  if (!container) return;
+  const totalPages = parseInt(container.dataset.totalPages || "1", 10);
+  const currentNode = container.querySelector("[data-preview-tag-current]");
+  const current = parseInt(currentNode?.textContent || "1", 10);
+  const next = Math.min(totalPages, Math.max(1, current + (button.dataset.previewTagPageChange === "next" ? 1 : -1)));
+  container.querySelectorAll("[data-preview-tag-page]").forEach((tag) => { tag.hidden = parseInt(tag.dataset.previewTagPage, 10) !== next; });
+  if (currentNode) currentNode.textContent = String(next);
+  const prev = container.querySelector('[data-preview-tag-page-change="prev"]');
+  const nextButton = container.querySelector('[data-preview-tag-page-change="next"]');
+  if (prev) prev.disabled = next <= 1;
+  if (nextButton) nextButton.disabled = next >= totalPages;
+}
+
 function compareSelectHTML(item) {
   if (!item.variants || !item.variants.length) return "";
   const options = item.variants.map((variant) => `<option value="${escapeHTML(variant.doc_id)}">${escapeHTML(variant.publication_name)}</option>`).join("");
@@ -681,6 +706,11 @@ function attachEvents() {
     }
   });
   DOM.previewPanel.addEventListener("click", (event) => {
+    const tagPageButton = event.target.closest("[data-preview-tag-page-change]");
+    if (tagPageButton) {
+      changePreviewTagPage(tagPageButton);
+      return;
+    }
     if (event.target.closest("[data-close-preview]")) {
       STATE.preview = "";
       restorePreview(false);

static/style.css

@@ -548,6 +548,20 @@ ul, li {
   word-break: break-all;
 }
 
+.preview-tag-pager {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 4px;
+  font-size: 11px;
+  color: var(--on-surface-variant);
+}
+
+.preview-tag-pager .text-btn-sm:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
 .preview-body {
   margin: 0;
   padding: 14px;
@@ -570,7 +584,8 @@ ul, li {
 }
 
 body.mobile .preview-compare-grid {
-  grid-template-columns: 1fr;
+  display: block;
+  overflow-y: auto;
 }
 
 body.mobile .preview-compare-grid > div:first-child {
@@ -578,6 +593,15 @@ body.mobile .preview-compare-grid > div:first-child {
   border-bottom: 1px solid var(--outline-variant);
 }
 
+body.mobile .preview-body.compare-body {
+  max-height: none;
+  overflow: visible;
+}
+
+body.mobile .preview-compare-grid .diff-gap {
+  display: none;
+}
+
 .result-snippet {
   margin-top: 6px;
   font-size: 12px;
@@ -1241,6 +1265,10 @@ body.mobile .multi-toggle { padding: 1px 4px; font-size: 11px; }
   overflow-x: hidden;
 }
 
+.results-list[hidden] {
+  display: none;
+}
+
 .preview-panel:not([hidden]) + .results-list {
   border-top: 1px solid var(--outline-variant);
 }