zsbqb-static 0.1.0 → 0.1.2

package/js/query-app.js

@@ -1,331 +1,331 @@
-/** 查询页：从缓存的 catalog JSON 渲染歌单并用 CatalogSearch 过滤。 */
-(function () {
-  const boot = window.__QUERY_CATALOG__ || {};
-  const songList = document.querySelector("[data-query-app]");
-  if (!songList || !boot.familyUrls) return;
-
-  const emptyHint = songList.querySelector("[data-client-empty]");
-  const countEl = document.querySelector("[data-song-count]");
-  const qHint = document.querySelector("[data-query-q-hint]");
-  const hintTail = document.querySelector("[data-query-hint-tail]");
-  const searchInput = document.querySelector("[data-search-input]");
-  const starNative = document.querySelector(".star-picker__native");
-  const bpmBucketInput = document.querySelector("[data-bpm-bucket]");
-  const bpmExactField = document.querySelector("[data-bpm-exact-field]");
-  const familyNative = document.querySelector(".family-picker__native");
-
-  const cache = Object.create(null);
-  let songs = [];
-  let pinyinReady = null;
-  let family = boot.family || (familyNative && familyNative.value) || "xingdong";
-  let fuzzySuggest = false;
-
-  const urlParams = new URLSearchParams(window.location.search);
-  let filterState = {
-    q: (urlParams.get("q") || "").trim(),
-    star: (urlParams.get("star") || "").trim(),
-    letter: (urlParams.get("letter") || "").trim(),
-    bpmBucket: (urlParams.get("bpm") || "").trim(),
-    bpmExact: (urlParams.get("bpm_exact") || "").trim(),
-  };
-
-  if (searchInput && filterState.q && searchInput.value !== filterState.q) {
-    searchInput.value = filterState.q;
-    const clearBtn = searchInput.parentElement && searchInput.parentElement.querySelector("[data-search-clear]");
-    if (clearBtn) clearBtn.classList.toggle("is-on", filterState.q.length > 0);
-  }
-
-  function fetchCatalog(url, cacheMode) {
-    const abs = /^https?:/i.test(url);
-    const same = !abs || url.indexOf(window.location.origin) === 0;
-    return fetch(url, {
-      credentials: same ? "same-origin" : "omit",
-      mode: same ? "same-origin" : "cors",
-      cache: cacheMode,
-      priority: "high",
-    });
-  }
-
-  function cachedFetch(url) {
-    if (!url) return Promise.resolve(null);
-    if (cache[url]) return cache[url];
-    cache[url] = fetchCatalog(url, "force-cache")
-      .then((res) => {
-        if (!res.ok) throw new Error("catalog_http");
-        return res.json();
-      })
-      .catch(() =>
-        fetchCatalog(url, "reload").then((res) => {
-          if (!res.ok) throw new Error("catalog_http");
-          return res.json();
-        })
-      );
-    return cache[url];
-  }
-
-  function ensurePinyin() {
-    if (pinyinReady) return pinyinReady;
-    if (!boot.pinyinUrl || !window.CatalogSearch) {
-      pinyinReady = Promise.resolve();
-      return pinyinReady;
-    }
-    pinyinReady = cachedFetch(boot.pinyinUrl).then((map) => {
-      window.CatalogSearch.setCharPinyinMap(map || {});
-    });
-    return pinyinReady;
-  }
-
-  function loadFamily(nextFamily) {
-    const key = nextFamily || family;
-    const url = boot.familyUrls[key];
-    if (!url) return Promise.resolve([]);
-    return ensurePinyin().then(() =>
-      cachedFetch(url).then((payload) => {
-        songs = (payload && payload.songs) || [];
-        family = key;
-        syncFamilyHint((payload && payload.label) || key);
-        rebuildStarPicker((boot.starChoices && boot.starChoices[key]) || []);
-        return songs;
-      })
-    );
-  }
-
-  function escapeHtml(value) {
-    return String(value || "")
-      .replace(/&/g, "&")
-      .replace(/</g, "&lt;")
-      .replace(/>/g, "&gt;")
-      .replace(/"/g, "&quot;");
-  }
-
-  function detailBase(row) {
-    return `/query/${encodeURIComponent(row.family)}/${encodeURIComponent(row.star)}/${encodeURIComponent(row.title)}/`;
-  }
-
-  function iconFor(row) {
-    return (boot.icons && boot.icons[row.family]) || "";
-  }
-
-  function bpmLabel(row) {
-    if (row.bpm == null || row.bpm === "") return "";
-    const n = Number(row.bpm);
-    return Number.isFinite(n) ? String(Math.round(n)) : "";
-  }
-
-  function rebuildStarPicker(stars) {
-    if (!starNative) return;
-    const allowed = (stars || []).map(String);
-    if (filterState.star && allowed.indexOf(String(filterState.star)) < 0) {
-      filterState.star = "";
-    }
-    const current = String(filterState.star || "");
-    starNative.innerHTML =
-      '<option value="">全部</option>' +
-      allowed
-        .map((star) => `<option value="${star}"${star === current ? " selected" : ""}>${star}星</option>`)
-        .join("");
-    starNative.value = current;
-    const menu = document.querySelector("[data-star-menu]");
-    if (menu) {
-      menu.innerHTML =
-        `<button type="button" class="star-picker__option${current ? "" : " is-on"}" data-star-option data-star-value="" role="option" aria-selected="${current ? "false" : "true"}">全部</button>` +
-        allowed
-          .map(
-            (star) =>
-              `<button type="button" class="star-picker__option${star === current ? " is-on" : ""}" data-star-option data-star-value="${star}" role="option" aria-selected="${star === current ? "true" : "false"}">${star}星</button>`
-          )
-          .join("");
-    }
-    const valueEl = document.querySelector("[data-star-value]");
-    if (valueEl) valueEl.textContent = current ? `${current}星` : "全部";
-    const hintStar = document.querySelector(".query-hint__star");
-    if (hintStar) {
-      hintStar.textContent = current ? `${current}星` : "";
-      hintStar.hidden = !current;
-    }
-  }
-
-  function syncFamilyHint(label) {
-    const hint = document.querySelector(".query-hint__mode");
-    if (!hint) return;
-    hint.setAttribute("data-family", family);
-    hint.textContent = label || family;
-  }
-
-  function renderRow(row) {
-    const canDetail = boot.canDetail !== false;
-    const fire = row.list_skill === "fire" ? " is-fire" : "";
-    const tagKeys = String(row.keys || "").toLowerCase() === "5k" ? '<span class="song-tag">(5K)</span>' : "";
-    const mutation = (row.score_mutation || "").trim();
-    const tagMut = mutation && mutation !== "无" ? `<span class="song-tag">[${escapeHtml(mutation)}]</span>` : "";
-    const bpm = bpmLabel(row);
-    const bpmHtml = bpm ? `<span class="song-row__bpm">BPM ${escapeHtml(bpm)}</span>` : "";
-    const inner = `
-      <span class="song-row__title-rail" data-title-marquee title="${escapeHtml(row.title)}">
-        <span class="song-row__title" data-title-marquee-text>${escapeHtml(row.title)}</span>
-      </span>
-      <span class="song-row__meta">
-        ${tagKeys}${tagMut}
-        <span class="song-row__star">${escapeHtml(row.star)}星</span>
-      </span>
-      ${bpmHtml}`;
-    if (!canDetail) {
-      return `<div class="song-row${fire}" role="listitem">${inner}</div>`;
-    }
-    return `<button type="button" class="song-row${fire}" role="listitem" data-song-pick
-      data-title="${escapeHtml(row.title)}"
-      data-artist="${escapeHtml(row.artist)}"
-      data-family="${escapeHtml(row.family)}"
-      data-family-label="${escapeHtml(row.family_label || "")}"
-      data-star="${escapeHtml(row.star)}"
-      data-bpm="${escapeHtml(row.bpm == null ? "" : row.bpm)}"
-      data-supports-double="${row.supports_double ? "1" : "0"}"
-      data-icon="${escapeHtml(iconFor(row))}"
-      data-detail-base="${escapeHtml(detailBase(row))}"
-    >${inner}</button>`;
-  }
-
-  function syncHint(visibleCount) {
-    if (countEl) countEl.textContent = String(visibleCount);
-    const qDisplay = (searchInput && searchInput.value ? searchInput.value : filterState.q || "").trim();
-    if (qHint) {
-      qHint.textContent = qDisplay ? `[${qDisplay}]` : "";
-      qHint.hidden = !qDisplay;
-    }
-    if (hintTail) {
-      if (fuzzySuggest && qDisplay) {
-        hintTail.textContent = "。未精确匹配，是否你想找以下结果？";
-      } else if (qDisplay) {
-        hintTail.textContent = "。点击歌曲选择查看类别。";
-      } else if (filterState.star || filterState.letter || filterState.bpmBucket || filterState.bpmExact) {
-        hintTail.textContent = "。可继续输入关键词缩小范围。";
-      } else {
-        hintTail.textContent = "。点左侧字母或选择星级/BPM 浏览本模式全部歌曲。";
-      }
-    }
-  }
-
-  function syncLetterField(letter) {
-    const form = document.querySelector(".query-filters");
-    if (!form) return;
-    let input = form.querySelector("[data-letter-field]");
-    const value = (letter || "").trim();
-    if (!value) {
-      if (input) input.remove();
-      return;
-    }
-    if (!input) {
-      input = document.createElement("input");
-      input.type = "hidden";
-      input.name = "letter";
-      input.setAttribute("data-letter-field", "");
-      form.appendChild(input);
-    }
-    input.value = value;
-  }
-
-  function applyFilters() {
-    if (!window.CatalogSearch) return;
-    const q = (searchInput && searchInput.value ? searchInput.value : filterState.q || "").trim();
-    filterState.q = q;
-    filterState.star = (starNative && starNative.value) || filterState.star || "";
-    filterState.bpmBucket = (bpmBucketInput && bpmBucketInput.value) || filterState.bpmBucket || "";
-    filterState.bpmExact = (bpmExactField && bpmExactField.value) || filterState.bpmExact || "";
-    if (q) filterState.letter = "";
-    const ranked = window.CatalogSearch.searchCatalog(songs, q, filterState);
-    fuzzySuggest = Boolean(q && ranked.length && ranked.every((item) => item.fuzzy));
-    const html = ranked.map((item) => renderRow(item.entry)).join("");
-    const keepEmpty = emptyHint;
-    songList.querySelectorAll(".song-row").forEach((el) => el.remove());
-    if (keepEmpty) {
-      keepEmpty.hidden = ranked.length > 0;
-      keepEmpty.insertAdjacentHTML("afterend", html);
-    } else {
-      songList.insertAdjacentHTML("beforeend", html);
-    }
-    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));
-    });
-    const params = new URLSearchParams(window.location.search);
-    if (family) params.set("family", family);
-    if (filterState.q) params.set("q", filterState.q);
-    else params.delete("q");
-    if (filterState.star) params.set("star", filterState.star);
-    else params.delete("star");
-    if (filterState.letter) params.set("letter", filterState.letter);
-    else params.delete("letter");
-    if (filterState.bpmExact) params.set("bpm_exact", filterState.bpmExact);
-    else params.delete("bpm_exact");
-    if (filterState.bpmBucket) params.set("bpm", filterState.bpmBucket);
-    else params.delete("bpm");
-    const qs = params.toString();
-    const target = qs ? `${window.location.pathname}?${qs}` : window.location.pathname;
-    window.history.replaceState(null, "", target);
-    songList.hidden = false;
-    songList.removeAttribute("data-filter-pending");
-    if (typeof window.bindTitleMarquees === "function") window.bindTitleMarquees();
-  }
-
-  window.__applyQueryFilters = function () {
-    applyFilters();
-  };
-
-  window.__setQueryLetterFilter = function (label) {
-    const next = (label || "").trim();
-    if (filterState.letter.toLowerCase() === next.toLowerCase()) filterState.letter = "";
-    else filterState.letter = next;
-    if (searchInput) {
-      searchInput.value = "";
-      filterState.q = "";
-      const clearBtn = searchInput.parentElement && searchInput.parentElement.querySelector("[data-search-clear]");
-      if (clearBtn) clearBtn.classList.remove("is-on");
-    }
-    applyFilters();
-  };
-
-  window.__queryLoadFamily = function (nextFamily, nextStar) {
-    const key = String(nextFamily || "").trim();
-    if (!key || !boot.familyUrls[key]) return false;
-    filterState.star = nextStar == null ? "" : String(nextStar || "");
-    if (starNative) {
-      starNative.value = filterState.star;
-      starNative.dispatchEvent(new Event("change"));
-    }
-    loadFamily(key).then(applyFilters);
-    return true;
-  };
-
-  if (searchInput) {
-    searchInput.addEventListener("input", () => {
-      filterState.q = searchInput.value.trim();
-      if (filterState.q) filterState.letter = "";
-      applyFilters();
-    });
-    searchInput.addEventListener("keydown", (e) => {
-      if (e.key === "Enter") {
-        e.preventDefault();
-        applyFilters();
-      }
-    });
-  }
-
-  loadFamily(family)
-    .then(applyFilters)
-    .catch(() => {
-      if (emptyHint) {
-        emptyHint.hidden = false;
-        emptyHint.textContent = "歌单加载失败，请刷新重试。";
-      }
-      songList.hidden = false;
-      songList.removeAttribute("data-filter-pending");
-    });
-
-  Object.keys(boot.familyUrls || {}).forEach((key) => {
-    if (key === family) return;
-    cachedFetch(boot.familyUrls[key]);
-  });
-})();
+/** 查询页：从缓存的 catalog JSON 渲染歌单并用 CatalogSearch 过滤。 */
+(function () {
+  const boot = window.__QUERY_CATALOG__ || {};
+  const songList = document.querySelector("[data-query-app]");
+  if (!songList || !boot.familyUrls) return;
+
+  const emptyHint = songList.querySelector("[data-client-empty]");
+  const countEl = document.querySelector("[data-song-count]");
+  const qHint = document.querySelector("[data-query-q-hint]");
+  const hintTail = document.querySelector("[data-query-hint-tail]");
+  const searchInput = document.querySelector("[data-search-input]");
+  const starNative = document.querySelector(".star-picker__native");
+  const bpmBucketInput = document.querySelector("[data-bpm-bucket]");
+  const bpmExactField = document.querySelector("[data-bpm-exact-field]");
+  const familyNative = document.querySelector(".family-picker__native");
+
+  const cache = Object.create(null);
+  let songs = [];
+  let pinyinReady = null;
+  let family = boot.family || (familyNative && familyNative.value) || "xingdong";
+  let fuzzySuggest = false;
+
+  const urlParams = new URLSearchParams(window.location.search);
+  let filterState = {
+    q: (urlParams.get("q") || "").trim(),
+    star: (urlParams.get("star") || "").trim(),
+    letter: (urlParams.get("letter") || "").trim(),
+    bpmBucket: (urlParams.get("bpm") || "").trim(),
+    bpmExact: (urlParams.get("bpm_exact") || "").trim(),
+  };
+
+  if (searchInput && filterState.q && searchInput.value !== filterState.q) {
+    searchInput.value = filterState.q;
+    const clearBtn = searchInput.parentElement && searchInput.parentElement.querySelector("[data-search-clear]");
+    if (clearBtn) clearBtn.classList.toggle("is-on", filterState.q.length > 0);
+  }
+
+  function fetchCatalog(url, cacheMode) {
+    const abs = /^https?:/i.test(url);
+    const same = !abs || url.indexOf(window.location.origin) === 0;
+    return fetch(url, {
+      credentials: same ? "same-origin" : "omit",
+      mode: same ? "same-origin" : "cors",
+      cache: cacheMode,
+      priority: "high",
+    });
+  }
+
+  function cachedFetch(url) {
+    if (!url) return Promise.resolve(null);
+    if (cache[url]) return cache[url];
+    cache[url] = fetchCatalog(url, "force-cache")
+      .then((res) => {
+        if (!res.ok) throw new Error("catalog_http");
+        return res.json();
+      })
+      .catch(() =>
+        fetchCatalog(url, "reload").then((res) => {
+          if (!res.ok) throw new Error("catalog_http");
+          return res.json();
+        })
+      );
+    return cache[url];
+  }
+
+  function ensurePinyin() {
+    if (pinyinReady) return pinyinReady;
+    if (!boot.pinyinUrl || !window.CatalogSearch) {
+      pinyinReady = Promise.resolve();
+      return pinyinReady;
+    }
+    pinyinReady = cachedFetch(boot.pinyinUrl).then((map) => {
+      window.CatalogSearch.setCharPinyinMap(map || {});
+    });
+    return pinyinReady;
+  }
+
+  function loadFamily(nextFamily) {
+    const key = nextFamily || family;
+    const url = boot.familyUrls[key];
+    if (!url) return Promise.resolve([]);
+    return ensurePinyin().then(() =>
+      cachedFetch(url).then((payload) => {
+        songs = (payload && payload.songs) || [];
+        family = key;
+        syncFamilyHint((payload && payload.label) || key);
+        rebuildStarPicker((boot.starChoices && boot.starChoices[key]) || []);
+        return songs;
+      })
+    );
+  }
+
+  function escapeHtml(value) {
+    return String(value || "")
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;");
+  }
+
+  function detailBase(row) {
+    return `/query/${encodeURIComponent(row.family)}/${encodeURIComponent(row.star)}/${encodeURIComponent(row.title)}/`;
+  }
+
+  function iconFor(row) {
+    return (boot.icons && boot.icons[row.family]) || "";
+  }
+
+  function bpmLabel(row) {
+    if (row.bpm == null || row.bpm === "") return "";
+    const n = Number(row.bpm);
+    return Number.isFinite(n) ? String(Math.round(n)) : "";
+  }
+
+  function rebuildStarPicker(stars) {
+    if (!starNative) return;
+    const allowed = (stars || []).map(String);
+    if (filterState.star && allowed.indexOf(String(filterState.star)) < 0) {
+      filterState.star = "";
+    }
+    const current = String(filterState.star || "");
+    starNative.innerHTML =
+      '<option value="">全部</option>' +
+      allowed
+        .map((star) => `<option value="${star}"${star === current ? " selected" : ""}>${star}星</option>`)
+        .join("");
+    starNative.value = current;
+    const menu = document.querySelector("[data-star-menu]");
+    if (menu) {
+      menu.innerHTML =
+        `<button type="button" class="star-picker__option${current ? "" : " is-on"}" data-star-option data-star-value="" role="option" aria-selected="${current ? "false" : "true"}">全部</button>` +
+        allowed
+          .map(
+            (star) =>
+              `<button type="button" class="star-picker__option${star === current ? " is-on" : ""}" data-star-option data-star-value="${star}" role="option" aria-selected="${star === current ? "true" : "false"}">${star}星</button>`
+          )
+          .join("");
+    }
+    const valueEl = document.querySelector("[data-star-value]");
+    if (valueEl) valueEl.textContent = current ? `${current}星` : "全部";
+    const hintStar = document.querySelector(".query-hint__star");
+    if (hintStar) {
+      hintStar.textContent = current ? `${current}星` : "";
+      hintStar.hidden = !current;
+    }
+  }
+
+  function syncFamilyHint(label) {
+    const hint = document.querySelector(".query-hint__mode");
+    if (!hint) return;
+    hint.setAttribute("data-family", family);
+    hint.textContent = label || family;
+  }
+
+  function renderRow(row) {
+    const canDetail = boot.canDetail !== false;
+    const fire = row.list_skill === "fire" ? " is-fire" : "";
+    const tagKeys = String(row.keys || "").toLowerCase() === "5k" ? '<span class="song-tag">(5K)</span>' : "";
+    const mutation = (row.score_mutation || "").trim();
+    const tagMut = mutation && mutation !== "无" ? `<span class="song-tag">[${escapeHtml(mutation)}]</span>` : "";
+    const bpm = bpmLabel(row);
+    const bpmHtml = bpm ? `<span class="song-row__bpm">BPM ${escapeHtml(bpm)}</span>` : "";
+    const inner = `
+      <span class="song-row__title-rail" data-title-marquee title="${escapeHtml(row.title)}">
+        <span class="song-row__title" data-title-marquee-text>${escapeHtml(row.title)}</span>
+      </span>
+      <span class="song-row__meta">
+        ${tagKeys}${tagMut}
+        <span class="song-row__star">${escapeHtml(row.star)}星</span>
+      </span>
+      ${bpmHtml}`;
+    if (!canDetail) {
+      return `<div class="song-row${fire}" role="listitem">${inner}</div>`;
+    }
+    return `<button type="button" class="song-row${fire}" role="listitem" data-song-pick
+      data-title="${escapeHtml(row.title)}"
+      data-artist="${escapeHtml(row.artist)}"
+      data-family="${escapeHtml(row.family)}"
+      data-family-label="${escapeHtml(row.family_label || "")}"
+      data-star="${escapeHtml(row.star)}"
+      data-bpm="${escapeHtml(row.bpm == null ? "" : row.bpm)}"
+      data-supports-double="${row.supports_double ? "1" : "0"}"
+      data-icon="${escapeHtml(iconFor(row))}"
+      data-detail-base="${escapeHtml(detailBase(row))}"
+    >${inner}</button>`;
+  }
+
+  function syncHint(visibleCount) {
+    if (countEl) countEl.textContent = String(visibleCount);
+    const qDisplay = (searchInput && searchInput.value ? searchInput.value : filterState.q || "").trim();
+    if (qHint) {
+      qHint.textContent = qDisplay ? `[${qDisplay}]` : "";
+      qHint.hidden = !qDisplay;
+    }
+    if (hintTail) {
+      if (fuzzySuggest && qDisplay) {
+        hintTail.textContent = "。未精确匹配，是否你想找以下结果？";
+      } else if (qDisplay) {
+        hintTail.textContent = "。点击歌曲选择查看类别。";
+      } else if (filterState.star || filterState.letter || filterState.bpmBucket || filterState.bpmExact) {
+        hintTail.textContent = "。可继续输入关键词缩小范围。";
+      } else {
+        hintTail.textContent = "。点左侧字母或选择星级/BPM 浏览本模式全部歌曲。";
+      }
+    }
+  }
+
+  function syncLetterField(letter) {
+    const form = document.querySelector(".query-filters");
+    if (!form) return;
+    let input = form.querySelector("[data-letter-field]");
+    const value = (letter || "").trim();
+    if (!value) {
+      if (input) input.remove();
+      return;
+    }
+    if (!input) {
+      input = document.createElement("input");
+      input.type = "hidden";
+      input.name = "letter";
+      input.setAttribute("data-letter-field", "");
+      form.appendChild(input);
+    }
+    input.value = value;
+  }
+
+  function applyFilters() {
+    if (!window.CatalogSearch) return;
+    const q = (searchInput && searchInput.value ? searchInput.value : filterState.q || "").trim();
+    filterState.q = q;
+    filterState.star = (starNative && starNative.value) || filterState.star || "";
+    filterState.bpmBucket = (bpmBucketInput && bpmBucketInput.value) || filterState.bpmBucket || "";
+    filterState.bpmExact = (bpmExactField && bpmExactField.value) || filterState.bpmExact || "";
+    if (q) filterState.letter = "";
+    const ranked = window.CatalogSearch.searchCatalog(songs, q, filterState);
+    fuzzySuggest = Boolean(q && ranked.length && ranked.every((item) => item.fuzzy));
+    const html = ranked.map((item) => renderRow(item.entry)).join("");
+    const keepEmpty = emptyHint;
+    songList.querySelectorAll(".song-row").forEach((el) => el.remove());
+    if (keepEmpty) {
+      keepEmpty.hidden = ranked.length > 0;
+      keepEmpty.insertAdjacentHTML("afterend", html);
+    } else {
+      songList.insertAdjacentHTML("beforeend", html);
+    }
+    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));
+    });
+    const params = new URLSearchParams(window.location.search);
+    if (family) params.set("family", family);
+    if (filterState.q) params.set("q", filterState.q);
+    else params.delete("q");
+    if (filterState.star) params.set("star", filterState.star);
+    else params.delete("star");
+    if (filterState.letter) params.set("letter", filterState.letter);
+    else params.delete("letter");
+    if (filterState.bpmExact) params.set("bpm_exact", filterState.bpmExact);
+    else params.delete("bpm_exact");
+    if (filterState.bpmBucket) params.set("bpm", filterState.bpmBucket);
+    else params.delete("bpm");
+    const qs = params.toString();
+    const target = qs ? `${window.location.pathname}?${qs}` : window.location.pathname;
+    window.history.replaceState(null, "", target);
+    songList.hidden = false;
+    songList.removeAttribute("data-filter-pending");
+    if (typeof window.bindTitleMarquees === "function") window.bindTitleMarquees();
+  }
+
+  window.__applyQueryFilters = function () {
+    applyFilters();
+  };
+
+  window.__setQueryLetterFilter = function (label) {
+    const next = (label || "").trim();
+    if (filterState.letter.toLowerCase() === next.toLowerCase()) filterState.letter = "";
+    else filterState.letter = next;
+    if (searchInput) {
+      searchInput.value = "";
+      filterState.q = "";
+      const clearBtn = searchInput.parentElement && searchInput.parentElement.querySelector("[data-search-clear]");
+      if (clearBtn) clearBtn.classList.remove("is-on");
+    }
+    applyFilters();
+  };
+
+  window.__queryLoadFamily = function (nextFamily, nextStar) {
+    const key = String(nextFamily || "").trim();
+    if (!key || !boot.familyUrls[key]) return false;
+    filterState.star = nextStar == null ? "" : String(nextStar || "");
+    if (starNative) {
+      starNative.value = filterState.star;
+      starNative.dispatchEvent(new Event("change"));
+    }
+    loadFamily(key).then(applyFilters);
+    return true;
+  };
+
+  if (searchInput) {
+    searchInput.addEventListener("input", () => {
+      filterState.q = searchInput.value.trim();
+      if (filterState.q) filterState.letter = "";
+      applyFilters();
+    });
+    searchInput.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        applyFilters();
+      }
+    });
+  }
+
+  loadFamily(family)
+    .then(applyFilters)
+    .catch(() => {
+      if (emptyHint) {
+        emptyHint.hidden = false;
+        emptyHint.textContent = "歌单加载失败，请刷新重试。";
+      }
+      songList.hidden = false;
+      songList.removeAttribute("data-filter-pending");
+    });
+
+  Object.keys(boot.familyUrls || {}).forEach((key) => {
+    if (key === family) return;
+    cachedFetch(boot.familyUrls[key]);
+  });
+})();