zsbqb-static 0.1.7 → 0.1.9

package/css/app.css

@@ -804,12 +804,12 @@ 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;
-  --alpha-rail-viewport: calc(100vh - 16px);
-  --alpha-rail-viewport: calc(100svh - 16px);
   position: sticky;
   top: 8px;
   z-index: 15;
@@ -818,9 +818,11 @@ th { color: var(--muted); font-weight: 600; font-size: 13px; background: var(--b
   justify-content: space-between;
   gap: 0;
   width: 28px;
-  box-sizing: content-box;
-  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));
+  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);
@@ -849,13 +851,12 @@ th { color: var(--muted); font-weight: 600; font-size: 13px; background: var(--b
   display: grid;
   place-items: center;
   width: 28px;
-  flex: 1 1 0;
-  min-height: 0;
+  flex: 1 1 auto;
+  min-height: 1em;
   padding: 0;
   border-radius: 5px;
   color: var(--muted);
-  font-size: clamp(10px, 2.2vh, 13px);
-  font-size: clamp(10px, 2.2svh, 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;

package/js/app.js

@@ -1561,10 +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) {
@@ -1580,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;
@@ -1593,7 +1641,7 @@ function bindAlphaRail() {
 
   function goTo(item) {
     if (!item || navigating) return;
-    const label = item.textContent.trim();
+    const label = letterOf(item);
     if (typeof window.__setQueryLetterFilter === "function") {
       window.__setQueryLetterFilter(label);
       return;
@@ -1607,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) {
@@ -1618,14 +1668,16 @@ 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);
@@ -1636,6 +1688,7 @@ function bindAlphaRail() {
 
   function onPointerCancel() {
     dragging = false;
+    downItem = null;
     clearScrub();
   }
 
@@ -1651,6 +1704,11 @@ function bindAlphaRail() {
       goTo(item);
     });
   });
+
+  window.__fitQueryAlphaRail = fitRail;
+  fitRail();
+  window.addEventListener("resize", requestFit);
+  window.addEventListener("scroll", requestFit, { passive: true });
 }
 
 function bindSearchClear() {

package/js/query-app.js

@@ -310,11 +310,15 @@
     }
     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));
+    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) {