Upload 3 files

static/app.js

@@ -67,6 +67,14 @@ const snippetQueue = [];
 const snippetCache = new Map();
 const snippetControllers = new Set();
 
+function motionAllowed() {
+  return !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
+function motionDuration(duration) {
+  return motionAllowed() ? duration : 0;
+}
+
 function themeIcon(isDark) {
   const shape = isDark
     ? '<path d="M20 15.5A8 8 0 1 1 8.5 4 6.5 6.5 0 0 0 20 15.5Z"/>'
@@ -464,11 +472,18 @@ function updateFilterVisibility() {
 }
 
 function showToast(message, duration = 2000) {
+  clearTimeout(showToast._timer);
+  clearTimeout(showToast._hideTimer);
+  DOM.toast.classList.remove("is-leaving");
   DOM.toast.textContent = message;
   DOM.toast.style.display = "";
-  clearTimeout(showToast._timer);
   showToast._timer = setTimeout(() => {
-    DOM.toast.style.display = "none";
+    const exitDuration = motionDuration(140);
+    if (exitDuration) DOM.toast.classList.add("is-leaving");
+    showToast._hideTimer = setTimeout(() => {
+      DOM.toast.style.display = "none";
+      DOM.toast.classList.remove("is-leaving");
+    }, exitDuration);
   }, duration);
 }
 
@@ -534,9 +549,19 @@ function applyTheme() {
 }
 
 function toggleTheme() {
+  const animate = motionAllowed();
+  if (animate) document.body.classList.add("theme-transitioning");
   STATE.isDark = !STATE.isDark;
   applyTheme();
   localStorage.setItem("theme", STATE.isDark ? "dark" : "light");
+  if (animate) {
+    document.body.classList.remove("theme-switching");
+    void document.body.offsetWidth;
+    document.body.classList.add("theme-switching");
+    window.setTimeout(() => {
+      document.body.classList.remove("theme-transitioning", "theme-switching");
+    }, 280);
+  }
 }
 
 function applyMobileMode() {
@@ -765,6 +790,7 @@ async function applyInitialSearch(sequence) {
   STATE.results = data.results || [];
   STATE.isLoading = false;
   DOM.resultsLoading.style.display = "none";
+  setSearchMotion(false);
   renderResults();
   updateStatus();
   DOM.resultsContainer.scrollTop = 0;
@@ -810,6 +836,12 @@ function prefetchNextPage() {
     });
 }
 
+function setSearchMotion(loading, refreshing = false) {
+  DOM.resultsContainer.classList.toggle("is-searching", loading);
+  DOM.resultsContainer.classList.toggle("is-refreshing", loading && refreshing);
+  DOM.resultsContainer.setAttribute("aria-busy", loading ? "true" : "false");
+}
+
 async function doSearch() {
   if (STATE.searchController) STATE.searchController.abort();
   abortSearchPrefetch();
@@ -828,6 +860,7 @@ async function doSearch() {
   STATE.searchController = controller;
   STATE.isLoading = true;
   DOM.resultsLoading.style.display = "flex";
+  setSearchMotion(true, STATE.page === 1 && STATE.results.length > 0);
   if (STATE.page === 1) {
     STATE.suppressAutoLoad = true;
     DOM.previewPanel.style.display = "none";
@@ -859,6 +892,7 @@ async function doSearch() {
     STATE.searchController = null;
     STATE.isLoading = false;
     DOM.resultsLoading.style.display = "none";
+    setSearchMotion(false);
     requestAnimationFrame(() => { STATE.suppressAutoLoad = false; });
     prefetchNextPage();
   }
@@ -902,6 +936,7 @@ function appendResults(items) {
   if (!items.length) return;
   DOM.emptyState.style.display = "none";
   DOM.resultsList.insertAdjacentHTML("beforeend", items.map(resultItemHtml).join(""));
+  animateResultRows(Array.from(DOM.resultsList.children).slice(-items.length));
   DOM.multiActionBar.style.display = STATE.multiSelect ? "" : "none";
   observeResultSnippets();
 }
@@ -917,10 +952,23 @@ function renderResults() {
   }
   DOM.emptyState.style.display = "none";
   DOM.resultsList.innerHTML = STATE.results.map(resultItemHtml).join("");
+  animateResultRows(Array.from(DOM.resultsList.children).slice(0, 8));
   DOM.multiActionBar.style.display = STATE.multiSelect ? "" : "none";
   observeResultSnippets();
 }
 
+function animateResultRows(rows) {
+  if (!motionAllowed()) return;
+  rows.slice(0, 8).forEach((row, index) => {
+    row.style.setProperty("--result-enter-delay", `${index * 14}ms`);
+    row.classList.add("result-enter");
+    row.addEventListener("animationend", () => {
+      row.classList.remove("result-enter");
+      row.style.removeProperty("--result-enter-delay");
+    }, { once: true });
+  });
+}
+
 function resetSnippetObserver() {
   if (snippetObserver) snippetObserver.disconnect();
   snippetObserver = null;
@@ -1036,6 +1084,14 @@ async function openPreview(docId, keyword, options = {}) {
     else previewBody.textContent = rawText;
     DOM.previewPanel.style.display = STATE.isMobile ? "flex" : "block";
     document.body.classList.add("preview-open");
+    if (motionAllowed()) {
+      DOM.previewPanel.classList.remove("preview-enter");
+      void DOM.previewPanel.offsetWidth;
+      DOM.previewPanel.classList.add("preview-enter");
+      DOM.previewPanel.addEventListener("animationend", () => {
+        DOM.previewPanel.classList.remove("preview-enter");
+      }, { once: true });
+    }
     STATE.previewDocId = docId;
     if (options.scroll !== false) DOM.previewPanel.scrollIntoView({ behavior: "smooth", block: "start" });
   } catch (error) {
@@ -1282,6 +1338,7 @@ function renderFolderTreeRows(animation = {}) {
   container.innerHTML = "";
   renderFolderNodes(container, STATE.folderTree, 0);
   refreshFolderTreeSelectionState();
+  if (!motionAllowed()) return;
   const newRows = container.querySelectorAll(".filter-folder-item[data-folder-path]");
   newRows.forEach((row) => {
     const path = row.dataset.folderPath;
@@ -1327,7 +1384,8 @@ function renderFolderTreeRows(animation = {}) {
 function animateFolderCollapse(nodePath, exitingPaths) {
   const container = DOM.filterFolderTree;
   if (!container) return 200;
-  const duration = 200;
+  const duration = motionDuration(200);
+  if (!duration) return 0;
   const glyph = container.querySelector(`.filter-folder-item[data-folder-path="${CSS.escape(nodePath)}"] .tree-toggle-glyph`);
   if (glyph) {
     glyph.animate([

static/index.html

@@ -68,7 +68,7 @@
       <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-container" class="results-container" aria-busy="false">
       <div id="results-list" class="results-list"></div>
       <div id="results-loading" class="loading-spinner" style="display:none"><div class="spinner"></div></div>
       <div id="empty-state" class="empty-state" style="display:none">
@@ -145,7 +145,7 @@
 
 </footer>
 <div id="overlay" class="overlay" style="display:none"></div>
-<div id="toast" class="toast" style="display:none"></div>
+<div id="toast" class="toast" role="status" aria-live="polite" style="display:none"></div>
 
 <script>if ("serviceWorker" in navigator) { navigator.serviceWorker.register("/sw.js", { scope: "/" }); }</script>
 <script src="/static/app.js"></script>

static/style.css

@@ -35,7 +35,9 @@
   --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
   --shadow-md: 0 2px 8px rgba(0,0,0,0.4);
   --shadow-lg: 0 4px 16px rgba(0,0,0,0.5);
-  --transition: 150ms ease;
+  --transition: 160ms cubic-bezier(0.2, 0, 0, 1);
+  --motion-standard: 180ms cubic-bezier(0.2, 0, 0, 1);
+  --motion-emphasized: 220ms cubic-bezier(0.2, 0, 0, 1);
   --sidebar-w: 280px;
   --sidebar-expanded-w: min(50vw, 720px);
   color-scheme: dark;
@@ -279,6 +281,13 @@ ul, li {
   max-height: 320px;
   overflow-y: auto;
   padding: 4px 0;
+  transform-origin: top center;
+  animation: menu-enter var(--motion-standard);
+}
+
+@keyframes menu-enter {
+  from { opacity: 0; transform: translateY(-4px) scaleY(0.98); }
+  to { opacity: 1; transform: translateY(0) scaleY(1); }
 }
 
 .search-history-dropdown .history-item {
@@ -461,6 +470,15 @@ ul, li {
   overflow: hidden;
 }
 
+.preview-panel.preview-enter {
+  animation: preview-enter var(--motion-emphasized);
+}
+
+@keyframes preview-enter {
+  from { opacity: 0; transform: translateY(6px) scale(0.995); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
 body.preview-open {
   user-select: none;
   -webkit-user-select: none;
@@ -518,6 +536,15 @@ body.preview-open #preview-panel .preview-header {
   display: block;
 }
 
+body.theme-switching .theme-icon-svg {
+  animation: theme-icon-turn 280ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+@keyframes theme-icon-turn {
+  from { opacity: 0.35; transform: rotate(-80deg) scale(0.82); }
+  to { opacity: 1; transform: rotate(0) scale(1); }
+}
+
 .preview-title {
   font-size: 15px;
   font-weight: 600;
@@ -607,7 +634,7 @@ body.preview-open #preview-panel .preview-header {
 }
 
 .sidebar.collapsed {
-  width: 0 !important; 
+  width: 0 !important;
   border-right: none;
 }
 
@@ -1154,6 +1181,40 @@ body.mobile .multi-toggle { padding: 1px 4px; font-size: 11px; }
   flex: 1;
   overflow-y: auto;
   overflow-x: hidden;
+  position: relative;
+}
+
+.results-container::before {
+  content: "";
+  position: sticky;
+  top: 0;
+  z-index: 6;
+  display: block;
+  width: 100%;
+  height: 2px;
+  margin-bottom: -2px;
+  background: linear-gradient(90deg, transparent, var(--primary), transparent);
+  opacity: 0;
+  transform: translateX(-100%);
+  pointer-events: none;
+}
+
+.results-container.is-searching::before {
+  opacity: 1;
+  animation: search-progress 1.15s ease-in-out infinite;
+}
+
+.results-container.is-refreshing .results-list {
+  opacity: 0.56;
+}
+
+.results-list {
+  transition: opacity var(--motion-standard);
+}
+
+@keyframes search-progress {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(100%); }
 }
 
 .snippet-loading {
@@ -1174,6 +1235,16 @@ body.mobile .multi-toggle { padding: 1px 4px; font-size: 11px; }
   transition: background var(--transition);
 }
 
+.result-item.result-enter {
+  animation: result-enter var(--motion-standard) both;
+  animation-delay: var(--result-enter-delay, 0ms);
+}
+
+@keyframes result-enter {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
 .result-item:nth-child(even) {
   background: var(--surface-variant);
 }
@@ -1762,6 +1833,10 @@ body.mobile .mobile-selected-count {
   animation: toast-in 0.2s ease;
 }
 
+.toast.is-leaving {
+  animation: toast-out 140ms ease-in forwards;
+}
+
 @keyframes toast-in {
   from {
     opacity: 0;
@@ -1774,6 +1849,11 @@ body.mobile .mobile-selected-count {
   }
 }
 
+@keyframes toast-out {
+  from { opacity: 1; transform: translateX(-50%) translateY(0); }
+  to { opacity: 0; transform: translateX(-50%) translateY(6px); }
+}
+
 body.mobile .sidebar {
   position: fixed;
   top: var(--header-h);
@@ -1781,7 +1861,7 @@ body.mobile .sidebar {
   z-index: 95;
   width: 85vw !important;
   max-width: 320px;
-  transition: transform var(--transition), opacity var(--transition);
+  transition: transform var(--motion-emphasized), opacity var(--motion-standard);
   will-change: transform;
 }
 
@@ -1868,6 +1948,15 @@ body.mobile .preview-panel {
   background: var(--reader-bg);
 }
 
+body.mobile .preview-panel.preview-enter {
+  animation-name: preview-enter-mobile;
+}
+
+@keyframes preview-enter-mobile {
+  from { opacity: 0.7; transform: translateX(18px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
 body.light.mobile .preview-panel {
   --reader-bg: #f7f3e8;
   --reader-header: #f0ecdf;
@@ -1921,7 +2010,7 @@ body.mobile .preview-path {
     z-index: 95;
     width: 85vw !important;
     max-width: 320px;
-    transition: transform var(--transition), opacity var(--transition);
+    transition: transform var(--motion-emphasized), opacity var(--motion-standard);
     will-change: transform;
   }
 
@@ -2033,26 +2122,11 @@ input[type="checkbox"]:indeterminate {
   accent-color: var(--primary);
 }
 
+body.theme-transitioning,
 body.theme-transitioning *,
 body.theme-transitioning *::before,
 body.theme-transitioning *::after {
-  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease !important;
-}
-
-.theme-ripple {
-  position: fixed;
-  border-radius: 50%;
-  pointer-events: none;
-  z-index: 9999;
-  width: 0;
-  height: 0;
-  animation: theme-ripple-expand 0.6s ease-out forwards;
-}
-
-@keyframes theme-ripple-expand {
-  0%   { width: 0; height: 0; opacity: 0.6; }
-
-  100% { width: 300vmax; height: 300vmax; opacity: 0; transform: translate(-150vmax, -150vmax); }
+  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important;
 }
 
 @media (prefers-reduced-motion: reduce) {