zsbqb-static 0.1.6 → 0.1.7

package/css/app.css

@@ -808,17 +808,20 @@ th { color: var(--muted); font-weight: 600; font-size: 13px; background: var(--b
   --alpha-rail-pad-start: 14px;
   --alpha-rail-pad-end: 20px;
   --alpha-rail-pad-y: 10px;
+  --alpha-rail-viewport: calc(100vh - 16px);
+  --alpha-rail-viewport: calc(100svh - 16px);
   position: sticky;
-  top: 0;
+  top: 8px;
   z-index: 15;
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  justify-content: space-between;
+  gap: 0;
   width: 28px;
   box-sizing: content-box;
-  max-height: calc(100vh - 40px);
-  overflow-y: auto;
-  overflow-x: hidden;
+  height: calc(var(--alpha-rail-viewport) - 2 * var(--alpha-rail-pad-y));
+  max-height: calc(var(--alpha-rail-viewport) - 2 * var(--alpha-rail-pad-y));
+  overflow: hidden;
   overscroll-behavior: contain;
   padding: var(--alpha-rail-pad-y) var(--alpha-rail-pad-end) var(--alpha-rail-pad-y) var(--alpha-rail-pad-start);
   margin: calc(var(--alpha-rail-pad-y) * -1) calc(var(--alpha-rail-pad-end) * -1) calc(var(--alpha-rail-pad-y) * -1) calc(var(--alpha-rail-pad-start) * -1);
@@ -846,17 +849,18 @@ th { color: var(--muted); font-weight: 600; font-size: 13px; background: var(--b
   display: grid;
   place-items: center;
   width: 28px;
-  min-height: 22px;
-  padding: 2px 0;
+  flex: 1 1 0;
+  min-height: 0;
+  padding: 0;
   border-radius: 5px;
   color: var(--muted);
-  font-size: 13px;
+  font-size: clamp(10px, 2.2vh, 13px);
+  font-size: clamp(10px, 2.2svh, 13px);
   font-weight: 600;
   font-family: var(--font-sans);
   font-variant-numeric: tabular-nums;
   line-height: 1;
   letter-spacing: 0;
-  flex: 0 0 auto;
 }
 .alpha-rail__item:hover,
 .alpha-rail__item.is-scrub {

package/js/app.js

@@ -1416,11 +1416,11 @@ function bindClientQueryFilters() {
 
   window.__setQueryLetterFilter = function (label) {
     const next = (label || "").trim();
-    if (filterState.letter.toLowerCase() === next.toLowerCase()) {
-      filterState.letter = "";
-    } else {
-      filterState.letter = next;
-    }
+    if (!next) return;
+    const sameLetter = filterState.letter.toLowerCase() === next.toLowerCase();
+    const qDisplay = (searchInput?.value || filterState.q || "").trim();
+    if (sameLetter && !qDisplay) return;
+    filterState.letter = next;
     // 选字母时清空搜索关键词
     if (searchInput) {
       searchInput.value = "";
@@ -1562,6 +1562,7 @@ function bindAlphaRail() {
   let dragging = false;
   let current = null;
   let navigating = false;
+  let pointerHandled = false;
 
   function pickItem(clientY) {
     let best = null;
@@ -1592,9 +1593,9 @@ function bindAlphaRail() {
 
   function goTo(item) {
     if (!item || navigating) return;
-    if (document.querySelector(".song-list")) {
-      const label = item.textContent.trim();
-      window.__setQueryLetterFilter?.(label);
+    const label = item.textContent.trim();
+    if (typeof window.__setQueryLetterFilter === "function") {
+      window.__setQueryLetterFilter(label);
       return;
     }
     const next = item.href;
@@ -1626,7 +1627,11 @@ function bindAlphaRail() {
     dragging = false;
     const target = pickItem(event.clientY) || current;
     clearScrub();
+    pointerHandled = true;
     goTo(target);
+    window.setTimeout(() => {
+      pointerHandled = false;
+    }, 400);
   }
 
   function onPointerCancel() {
@@ -1642,6 +1647,8 @@ function bindAlphaRail() {
   items.forEach((item) => {
     item.addEventListener("click", (event) => {
       event.preventDefault();
+      if (pointerHandled) return;
+      goTo(item);
     });
   });
 }

package/js/catalog-search.js

@@ -263,10 +263,15 @@
     const letter = String((filters && filters.letter) || "").trim();
     const bpmBucket = String((filters && filters.bpmBucket) || "").trim();
     const bpmExact = (filters && filters.bpmExact) || "";
+    const browseDefault = !filters || filters.browseDefault !== false;
+    // 与 search_index/catalog.search_catalog 一致：无关键词、无字母/星级/BPM 时只展示 # 桶。
+    const browseOnly = browseDefault && !needle && !letter && !star && !bpmBucket && !String(bpmExact || "").trim();
     const exact = [];
     list.forEach((entry) => {
       if (star && String(entry.star) !== star) return;
-      if (!letterMatches(entry, letter)) return;
+      if (browseOnly) {
+        if (!entry.title_lead_non_zh_en) return;
+      } else if (!letterMatches(entry, letter)) return;
       if (!bpmMatches(entry, bpmBucket, bpmExact)) return;
       if (!needle) {
         exact.push({ entry, score: 0, fuzzy: false });

package/js/query-app.js

@@ -185,6 +185,30 @@
     >${inner}</button>`;
   }
 
+  function letterHintLabel(letter) {
+    const key = String(letter || "").trim();
+    if (!key) return "";
+    return key === "#" ? "特殊" : key.toUpperCase();
+  }
+
+  function syncLetterHint(letter) {
+    const el = document.querySelector("[data-query-letter-hint]");
+    if (!el) return;
+    const label = letterHintLabel(letter);
+    el.textContent = label ? `${label}开头` : "";
+    el.hidden = !label;
+  }
+
+  function syncAlphaRail(letter) {
+    const key = String(letter || "").trim().toLowerCase();
+    document.querySelectorAll("[data-alpha-item]").forEach((el) => {
+      const active = Boolean(key) && el.textContent.trim().toLowerCase() === key;
+      el.classList.toggle("is-on", active);
+      if (active) el.setAttribute("aria-current", "true");
+      else el.removeAttribute("aria-current");
+    });
+  }
+
   function syncHint(visibleCount) {
     if (countEl) countEl.textContent = String(visibleCount);
     const qDisplay = (searchInput && searchInput.value ? searchInput.value : filterState.q || "").trim();
@@ -192,6 +216,7 @@
       qHint.textContent = qDisplay ? `[${qDisplay}]` : "";
       qHint.hidden = !qDisplay;
     }
+    syncLetterHint(qDisplay ? "" : filterState.letter);
     if (hintTail) {
       if (fuzzySuggest && qDisplay) {
         hintTail.textContent = "。未精确匹配，是否你想找以下结果？";
@@ -245,11 +270,7 @@
     }
     syncHint(ranked.length);
     syncLetterField(filterState.letter);
-    document.querySelectorAll("[data-alpha-item]").forEach((el) => {
-      const active =
-        filterState.letter && el.textContent.trim().toLowerCase() === filterState.letter.toLowerCase();
-      el.classList.toggle("is-on", Boolean(active));
-    });
+    syncAlphaRail(filterState.letter);
     const params = new URLSearchParams(window.location.search);
     if (family) params.set("family", family);
     if (filterState.q) params.set("q", filterState.q);
@@ -276,8 +297,11 @@
 
   window.__setQueryLetterFilter = function (label) {
     const next = (label || "").trim();
-    if (filterState.letter.toLowerCase() === next.toLowerCase()) filterState.letter = "";
-    else filterState.letter = next;
+    if (!next) return;
+    const sameLetter = filterState.letter.toLowerCase() === next.toLowerCase();
+    const qDisplay = (searchInput && searchInput.value ? searchInput.value : filterState.q || "").trim();
+    if (sameLetter && !qDisplay) return;
+    filterState.letter = next;
     if (searchInput) {
       searchInput.value = "";
       filterState.q = "";
@@ -285,6 +309,12 @@
       if (clearBtn) clearBtn.classList.remove("is-on");
     }
     applyFilters();
+    const toolbar = document.querySelector(".query-toolbar");
+    if (!toolbar) return;
+    const nextTop = toolbar.getBoundingClientRect().top + window.scrollY;
+    if (Math.abs(window.scrollY - nextTop) > 8) {
+      window.scrollTo(0, Math.max(0, nextTop));
+    }
   };
 
   window.__queryLoadFamily = function (nextFamily, nextStar) {