zsbqb-static 0.1.6 → 0.1.8

package/css/app.css

@@ -804,21 +804,26 @@ th { color: var(--muted); font-weight: 600; font-size: 13px; background: var(--b
   align-items: start;
 }
 .alpha-rail {
-  /* 热区相对 28px 栏宽向外扩一截，便于鼠标/触屏滑动选字母 */
+  /* 热区相对 28px 栏宽向外扩一截，便于鼠标/触屏滑动选字母。
+     高度由 JS 按「当前位置到视口底」写入 --alpha-rail-fit，避免 100vh
+     从标题下方起算把字母拉长，点 B 实际打到 G。 */
   --alpha-rail-pad-start: 14px;
   --alpha-rail-pad-end: 20px;
   --alpha-rail-pad-y: 10px;
   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;
+  box-sizing: border-box;
+  height: var(--alpha-rail-fit, auto);
+  max-height: calc(100vh - 16px);
+  max-height: calc(100svh - 16px);
+  max-height: calc(100dvh - 16px);
+  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 +851,17 @@ 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 auto;
+  min-height: 1em;
+  padding: 0;
   border-radius: 5px;
   color: var(--muted);
-  font-size: 13px;
+  font-size: clamp(8px, calc((var(--alpha-rail-fit, 70svh) - 20px) / 36), 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 = "";
@@ -1561,9 +1561,35 @@ function bindAlphaRail() {
 
   let dragging = false;
   let current = null;
+  let downItem = null;
+  let downY = 0;
   let navigating = false;
+  let pointerHandled = false;
+  let fitFrame = 0;
+
+  function fitRail() {
+    const top = rail.getBoundingClientRect().top;
+    const fit = Math.max(280, Math.round(window.innerHeight - top - 8));
+    const next = `${fit}px`;
+    if (rail.style.getPropertyValue("--alpha-rail-fit") !== next) {
+      rail.style.setProperty("--alpha-rail-fit", next);
+    }
+  }
+
+  function requestFit() {
+    if (fitFrame) return;
+    fitFrame = window.requestAnimationFrame(() => {
+      fitFrame = 0;
+      fitRail();
+    });
+  }
+
+  function letterOf(item) {
+    if (!item) return "";
+    return (item.getAttribute("data-letter") || item.textContent || "").trim();
+  }
 
-  function pickItem(clientY) {
+  function pickItemByY(clientY) {
     let best = null;
     let bestDist = Infinity;
     for (const item of items) {
@@ -1579,6 +1605,29 @@ function bindAlphaRail() {
     return best;
   }
 
+  function itemFromPoint(clientX, clientY) {
+    const stack =
+      typeof document.elementsFromPoint === "function"
+        ? document.elementsFromPoint(clientX, clientY)
+        : [document.elementFromPoint(clientX, clientY)];
+    for (const node of stack) {
+      if (!node || !node.closest) continue;
+      const item = node.closest("[data-alpha-item]");
+      if (item && rail.contains(item)) return item;
+    }
+    return pickItemByY(clientY);
+  }
+
+  function itemFromEvent(event) {
+    const raw = event.target;
+    const el = raw && raw.nodeType === 1 ? raw : raw && raw.parentElement;
+    if (el && el.closest) {
+      const item = el.closest("[data-alpha-item]");
+      if (item && rail.contains(item)) return item;
+    }
+    return itemFromPoint(event.clientX, event.clientY);
+  }
+
   function setScrub(item) {
     if (current === item) return;
     current = item;
@@ -1592,9 +1641,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 = letterOf(item);
+    if (typeof window.__setQueryLetterFilter === "function") {
+      window.__setQueryLetterFilter(label);
       return;
     }
     const next = item.href;
@@ -1606,7 +1655,9 @@ function bindAlphaRail() {
   function onPointerDown(event) {
     if (event.pointerType === "mouse" && event.button !== 0) return;
     dragging = true;
-    setScrub(pickItem(event.clientY));
+    downY = event.clientY;
+    downItem = itemFromEvent(event);
+    setScrub(downItem);
     try {
       rail.setPointerCapture(event.pointerId);
     } catch (err) {
@@ -1617,20 +1668,27 @@ function bindAlphaRail() {
 
   function onPointerMove(event) {
     if (!dragging) return;
-    setScrub(pickItem(event.clientY));
+    setScrub(itemFromPoint(event.clientX, event.clientY));
     event.preventDefault();
   }
 
   function onPointerUp(event) {
     if (!dragging) return;
     dragging = false;
-    const target = pickItem(event.clientY) || current;
+    const moved = Math.abs(event.clientY - downY) > 8;
+    const target = moved ? itemFromPoint(event.clientX, event.clientY) || current : downItem || itemFromEvent(event);
+    downItem = null;
     clearScrub();
+    pointerHandled = true;
     goTo(target);
+    window.setTimeout(() => {
+      pointerHandled = false;
+    }, 400);
   }
 
   function onPointerCancel() {
     dragging = false;
+    downItem = null;
     clearScrub();
   }
 
@@ -1642,8 +1700,15 @@ function bindAlphaRail() {
   items.forEach((item) => {
     item.addEventListener("click", (event) => {
       event.preventDefault();
+      if (pointerHandled) return;
+      goTo(item);
     });
   });
+
+  window.__fitQueryAlphaRail = fitRail;
+  fitRail();
+  window.addEventListener("resize", requestFit);
+  window.addEventListener("scroll", requestFit, { passive: true });
 }
 
 function bindSearchClear() {

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,16 @@
       if (clearBtn) clearBtn.classList.remove("is-on");
     }
     applyFilters();
+    const toolbar = document.querySelector(".query-toolbar");
+    if (toolbar) {
+      const nextTop = toolbar.getBoundingClientRect().top + window.scrollY;
+      if (Math.abs(window.scrollY - nextTop) > 8) {
+        window.scrollTo(0, Math.max(0, nextTop));
+      }
+    }
+    window.requestAnimationFrame(function () {
+      if (typeof window.__fitQueryAlphaRail === "function") window.__fitQueryAlphaRail();
+    });
   };
 
   window.__queryLoadFamily = function (nextFamily, nextStar) {