@yuuichi/openlist-assets 4.2.6-ym.3 → 4.2.6-ym.4

package/dist/brand/ym-bundle.js

@@ -1024,118 +1024,538 @@
 (function () {
   "use strict";
 
-  // 官方前端搜索框固定把当前路径作为 parent，后端 /fs/search 本身已支持递归，
-  // 因此这里在弹窗内增加“全局 / 当前目录”开关，并在请求发出前改写 parent。
-  var KEY = "ym-global-search";
-  var globalByDefault = true;
+  /* =============================================================================
+   * 全局实时搜索
+   * - 去掉“全局”勾选框：搜索永远从根目录全局递归（在任何文件夹都能搜到全盘）。
+   * - 输入即搜：300ms 防抖，旧请求自动取消，结果逐个增量渲染。
+   * - 每条结果始终显示完整所在路径（parent），点击进入对应目录/文件。
+   * 实现方式：劫持官方搜索弹窗，隐藏其原生结果区与类型下拉，注入自定义结果层；
+   *           网络仍走同源 /api/fs/search（parent 固定 "/"），复用登录态。
+   * ============================================================================= */
+
+  var DEBOUNCE_MS = 300;
+  var state = {
+    modal: null,
+    input: null,
+    listEl: null,
+    statusEl: null,
+    scopeRow: null,
+    nativeList: null,
+    nativePagination: null,
+    nativeEmpty: null,
+    nativeSpinner: null,
+    seq: 0,
+    timer: null,
+    abort: null,
+    lastKeyword: "",
+    lastNodes: [],
+    scope: 0
+  };
+
+  /* ---------- 工具 ---------- */
+  function $(sel, root) { return (root || document).querySelector(sel); }
+  function $all(sel, root) { return Array.prototype.slice.call((root || document).querySelectorAll(sel)); }
+
+  function isDark() {
+    return document.documentElement.getAttribute("data-theme") === "dark" ||
+      document.body.classList.contains("hope-ui-dark") ||
+      document.documentElement.classList.contains("dark");
+  }
+
+  function joinPath(parent, name) {
+    var p = (parent || "/").replace(/\/+$/, "");
+    if (!p) p = "/";
+    if (p === "/") return "/" + name;
+    return p + "/" + name;
+  }
 
-  function isGlobal() {
+  // 后端返回的 parent 是 URL 编码的虚拟路径（中文显示成 %E4%B8…）。
+  // 链接必须保留编码（路由按编码路径解析），仅展示文本逐段解码。
+  function decodePath(p) {
+    if (!p) return "/";
     try {
-      return localStorage.getItem(KEY) !== "0";
+      return p.split("/").map(function (seg) {
+        if (!seg) return seg;
+        try { return decodeURIComponent(seg); } catch (e) { return seg; }
+      }).join("/");
+    } catch (e) { return p; }
+  }
+
+  function fmtSize(n) {
+    if (!n || n <= 0) return "";
+    var units = ["B", "KB", "MB", "GB", "TB"];
+    var i = 0;
+    while (n >= 1024 && i < units.length - 1) { n /= 1024; i++; }
+    return (i === 0 ? n : n.toFixed(1)) + " " + units[i];
+  }
+
+  var FILE_ICON = {
+    video: "M8 5v14l11-7z",
+    audio: "M12 3v10.55A4 4 0 1 0 14 17V7h4V3z",
+    image: "M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5z",
+    doc: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zM6 9V4h7v5h5v11H6z",
+    archive: "M21 8v13H3V8M1 3h22v5H1zM10 12h4"
+  };
+  var DIR_SVG = '<svg viewBox="0 0 24 24" width="18" height="18" fill="#f0b429"><path d="M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8z"/></svg>';
+  var FILE_SVG = '<svg viewBox="0 0 24 24" width="18" height="18" fill="#7dd3fc"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8zM6 9V4h7v5h5v11H6z"/></svg>';
+
+  function highlight(text, kw) {
+    var safe = String(text == null ? "" : text);
+    if (!kw) return safe;
+    var idx = safe.toLowerCase().indexOf(kw.toLowerCase());
+    if (idx < 0) return safe;
+    return safe.slice(0, idx) +
+      '<mark class="ym-hl">' + safe.slice(idx, idx + kw.length) + "</mark>" +
+      safe.slice(idx + kw.length);
+  }
+
+  function iconFor(node) {
+    if (node.is_dir) return DIR_SVG;
+    var ext = String(node.name || "").split(".").pop().toLowerCase();
+    if (/\b(mp4|mkv|avi|mov|flv|webm|ts|m4v|rmvb)$/.test(ext)) return '<svg viewBox="0 0 24 24" width="18" height="18" fill="#f472b6"><path d="M8 5v14l11-7z"/></svg>';
+    if (/\b(mp3|flac|wav|aac|ogg|m4a|ape)$/.test(ext)) return '<svg viewBox="0 0 24 24" width="18" height="18" fill="#c084fc"><path d="M12 3v10.55A4 4 0 1 0 14 17V7h4V3z"/></svg>';
+    if (/\b(jpg|jpeg|png|gif|webp|bmp|svg)$/.test(ext)) return '<svg viewBox="0 0 24 24" width="18" height="18" fill="#34d399"><path d="M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5z"/></svg>';
+    if (/\b(zip|rar|7z|tar|gz)$/.test(ext)) return '<svg viewBox="0 0 24 24" width="18" height="18" fill="#fbbf24"><path d="M21 8v13H3V8M1 3h22v5H1zM10 12h4"/></svg>';
+    return FILE_SVG;
+  }
+
+  /* ---------- 样式 ---------- */
+  function injectCss() {
+    if (document.getElementById("ym-global-search-css")) return;
+    var st = document.createElement("style");
+    st.id = "ym-global-search-css";
+    st.textContent = [
+      "#ym-search-results{max-height:min(62vh,560px);overflow-y:auto;padding:4px 2px;}",
+      ".ym-sr{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border-radius:10px;cursor:pointer;text-decoration:none;color:inherit;}",
+      ".ym-sr:hover,.ym-sr:focus{background:rgba(14,165,233,.12);outline:none;}",
+      ".ym-sr__ic{flex:0 0 auto;margin-top:2px;display:flex;}",
+      ".ym-sr__main{flex:1;min-width:0;}",
+      ".ym-sr__name{font-size:14px;font-weight:600;line-height:1.35;word-break:break-all;}",
+      ".ym-sr__path{font-size:12px;opacity:.7;margin-top:2px;word-break:break-all;display:flex;align-items:center;gap:4px;}",
+      ".ym-sr__size{font-size:11px;opacity:.6;margin-left:6px;}",
+      ".ym-hl{background:#fde68a;color:#92400e;border-radius:3px;padding:0 1px;font-weight:700;}",
+      ".ym-sstatus{padding:18px 10px;text-align:center;font-size:13px;opacity:.65;}",
+      "[role=dialog][data-ym-search] [data-ym-native-block]{display:none !important;}",
+      // 永远全局：隐藏官方“搜索范围”下拉（全部/文件夹/文件所在的整行控件）。
+      "[role=dialog][data-ym-search] [data-ym-scope-select]{display:none !important;}",
+      "[role=dialog][data-ym-search] [data-ym-empty-hint]{display:none !important;}",
+      ".ym-sspinner{display:inline-block;width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:ym-sspin .7s linear infinite;vertical-align:-3px;margin-right:8px;}",
+      "@keyframes ym-sspin{to{transform:rotate(360deg)}}",
+    ].join("\n");
+    document.head.appendChild(st);
+  }
+
+  /* ---------- 网络请求（同源，复用 cookie/token） ---------- */
+  function getToken() {
+    try {
+      var raw = localStorage.getItem("token");
+      if (!raw) return "";
+      raw = raw.trim();
+      // 官方在 localStorage.token 里存的是【裸 token】，axios 拦截器再补
+      // "Bearer " 前缀（见 store chunk：Authorization = localStorage.token）。
+      // 若历史数据里已带 Bearer 前缀，剥掉它，由 doSearch 统一补，避免出现
+      // "Bearer Bearer xxx" 导致 401。
+      var m = raw.match(/^Bearer\s+(.+)$/i);
+      if (m) raw = m[1].trim();
+      // 兼容 { token: "xxx" | "Bearer xxx" } 形态
+      try {
+        var t = JSON.parse(raw);
+        if (t && typeof t.token === "string") {
+          var mm = t.token.match(/^Bearer\s+(.+)$/i);
+          return mm ? mm[1].trim() : t.token;
+        }
+      } catch (e) {}
+      return raw;
     } catch (e) {
-      return globalByDefault;
+      return "";
     }
   }
 
-  function setGlobal(v) {
-    try { localStorage.setItem(KEY, v ? "1" : "0"); } catch (e) {}
+  async function doSearch(keyword, signal) {
+    var headers = { "Content-Type": "application/json" };
+    var token = getToken();
+    if (token) headers.Authorization = "Bearer " + token;
+    var res = await fetch("/api/fs/search", {
+      method: "POST",
+      headers: headers,
+      signal: signal,
+      body: JSON.stringify({
+        parent: "/", // 永远全局
+        keywords: keyword,
+        scope: 0, // 永远全局（官方范围下拉已隐藏）；0 = 全部
+        page: 1,
+        per_page: 100,
+        password: ""
+      })
+    });
+    var j = await res.json();
+    if (j.code !== 200) throw new Error(j.message || "search failed");
+    return j.data || { content: [], total: 0 };
+  }
+
+  /* ---------- 渲染 ---------- */
+  function setStatus(html) {
+    state.statusEl.innerHTML = html;
+    state.statusEl.style.display = html ? "block" : "none";
+  }
+
+  function renderRows(nodes, kw, append) {
+    if (!append) {
+      state.listEl.innerHTML = "";
+      state.lastNodes = [];
+    }
+    var frag = document.createDocumentFragment();
+    nodes.forEach(function (node) {
+      var fullPath = joinPath(node.parent, node.name);
+      var a = document.createElement("a");
+      a.className = "ym-sr";
+      a.href = fullPath + "?from=search";
+      a.setAttribute("role", "button");
+      if (node.is_dir) a.setAttribute("data-dir", "1");
+      a.innerHTML =
+        '<span class="ym-sr__ic">' + iconFor(node) + "</span>" +
+        '<span class="ym-sr__main">' +
+          '<span class="ym-sr__name">' + highlight(node.name, kw) +
+            (!node.is_dir && node.size ? '<span class="ym-sr__size">' + fmtSize(node.size) + "</span>" : "") +
+          "</span>" +
+          '<span class="ym-sr__path">' +
+            '<svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor" style="opacity:.7"><path d="M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8z"/></svg>' +
+            "<span>" + highlight(decodePath(node.parent || "/"), kw) + "</span>" +
+          "</span>" +
+        "</span>";
+      frag.appendChild(a);
+    });
+    state.listEl.appendChild(frag);
+    state.lastNodes = state.lastNodes.concat(nodes);
   }
 
-  function rewriteBody(body) {
+  async function runSearch(keyword) {
+    var mySeq = ++state.seq;
+    if (state.abort) { try { state.abort.abort(); } catch (e) {} }
+    var ctrl = ("AbortController" in window) ? new AbortController() : null;
+    state.abort = ctrl;
+
+    state.listEl.innerHTML = "";
+    state.lastNodes = [];
+    setStatus('<span class="ym-sspinner"></span>搜索中…');
+
+    if (!keyword) {
+      setStatus("");
+      return;
+    }
+
     try {
-      if (typeof body !== "string" || body.indexOf("/fs/search") === -1) return body;
-      var data = JSON.parse(body);
-      if (isGlobal()) data.parent = "/";
-      return JSON.stringify(data);
+      var data = await doSearch(keyword, ctrl ? ctrl.signal : undefined);
+      if (mySeq !== state.seq) return; // 已被更新的输入取代
+      var nodes = data.content || [];
+      renderRows(nodes, keyword, false);
+      // 我们已渲染结果（或明确空态）：隐藏官方弹窗里的“暂无结果”原生文案
+      try { hideNativeEmptyHints(); } catch (e) {}
+      if (!nodes.length) {
+        setStatus("没有找到与 “" + keyword + "” 相关的内容");
+      } else {
+        setStatus("");
+      }
     } catch (e) {
-      return body;
+      if (mySeq !== state.seq) return;
+      if (e && e.name === "AbortError") return;
+      setStatus("搜索失败：" + (e.message || "网络错误"));
+    }
+  }
+
+  function scheduleSearch() {
+    var kw = (state.input.value || "").trim();
+    state.lastKeyword = kw;
+    if (state.timer) clearTimeout(state.timer);
+    if (!kw) {
+      state.seq++;
+      if (state.abort) { try { state.abort.abort(); } catch (e) {} }
+      state.listEl.innerHTML = "";
+      setStatus("");
+      return;
+    }
+    state.timer = setTimeout(function () { runSearch(kw); }, DEBOUNCE_MS);
+  }
+
+  /* ---------- 劫持官方弹窗 ---------- */
+  function ensureOverlay() {
+    if (!state.modal) return;
+    // 幂等：重复 setAttribute 会触发属性观察器，必须避免无谓写操作
+    if (state.modal.getAttribute("data-ym-search") !== "1") {
+      state.modal.setAttribute("data-ym-search", "1");
+    }
+
+    if (state.listEl) return;
+    var box = document.createElement("div");
+    box.id = "ym-search-results";
+    var status = document.createElement("div");
+    status.className = "ym-sstatus";
+    status.style.display = "none";
+
+    // 插入到 modal body：该容器的直接子节点 = 输入卡片 + 原生结果块 + 我们两层。
+    var body = state.modal.querySelector(".hope-modal__body, [class*=modal__body]");
+    var mount = body || state.modal;
+    mount.appendChild(status);
+    mount.appendChild(box);
+
+    function hideScopeSelect() {
+      // 官方“搜索范围”下拉（全部/文件夹/文件）在输入卡片左侧，宽度 $32。
+      // 找到 #search-input 所在行内的 Hope Select 触发器并隐藏整行容器。
+      var input = state.modal.querySelector("#search-input");
+      if (!input) return;
+      var sel = state.modal.querySelector('[role="combobox"]');
+      if (!sel) return;
+      var holder = sel.closest(".hope-select, [class*=select]") || sel;
+      if (holder.getAttribute("data-ym-scope-select") !== "1") {
+        holder.setAttribute("data-ym-scope-select", "1");
+      }
+      // 从触发器向上，标记“不包含搜索框”的最外层包裹节点，即下拉独占的整行容器。
+      var wrap = holder;
+      for (var i = 0; i < 6 && wrap.parentElement; i++) {
+        var p = wrap.parentElement;
+        if (p.querySelector("#search-input")) break; // 再往上就会连带隐藏输入框
+        wrap = p;
+      }
+      if (wrap.getAttribute("data-ym-scope-select") !== "1") {
+        wrap.setAttribute("data-ym-scope-select", "1");
+      }
+    }
+
+    function hideNativeEmptyHints() {
+      // 原生空态文案“暂无结果”是 <p class="hope-text">。在不同构建版本里它可能
+      // 位于输入卡片内，也可能与输入卡片平级（modal__body 直接子节点），因此在整个
+      // 弹窗范围内查找，但绝不标记包含 #search-input 的节点（输入框/按钮）。
+      if (!state.modal) return;
+      var ps = state.modal.querySelectorAll("p.hope-text, .hope-text");
+      Array.prototype.forEach.call(ps, function (p) {
+        if (p.querySelector && p.querySelector("#search-input")) return;
+        if (p.closest && p.closest("#ym-search-results,.ym-sstatus")) return;
+        var txt = (p.textContent || "").trim();
+        if (/暂无|没有|无结果|no\s*result|nothing|empty/i.test(txt)
+            && p.getAttribute("data-ym-empty-hint") !== "1") {
+          p.setAttribute("data-ym-empty-hint", "1");
+        }
+      });
+    }
+
+    function syncNative() {
+      Array.prototype.forEach.call(mount.children, function (ch) {
+        if (ch === box || ch === status) return;
+        if (ch.querySelector && ch.querySelector("#search-input")) {
+          // 输入卡片保留，但其内的原生“暂无结果”空态要隐藏（我们自己渲染结果）。
+          hideNativeEmptyHints();
+          return;
+        }
+        if (ch.getAttribute("data-ym-native-block") !== "1") {
+          ch.setAttribute("data-ym-native-block", "1");
+        }
+      });
+      hideScopeSelect();
+      hideNativeEmptyHints();
     }
+    syncNative();
+    var snQueued = false, snRunning = false;
+    function snFlush() {
+      snQueued = false;
+      if (snRunning) return;
+      snRunning = true;
+      try { syncNative(); } finally { snRunning = false; }
+    }
+    new MutationObserver(function () {
+      if (snQueued) return;
+      snQueued = true;
+      (window.requestAnimationFrame || function (f) { setTimeout(f, 16); })(snFlush);
+    }).observe(mount, { childList: true, subtree: true });
+
+    state.listEl = box;
+    state.statusEl = status;
   }
 
-  function installFetchPatch() {
-    if (window.__ymSearchFetchPatched) return;
-    window.__ymSearchFetchPatched = true;
+  function bindInput() {
+    if (!state.input || state.input.__ymBound) return;
+    state.input.__ymBound = true;
+    state.input.setAttribute("placeholder", "全局搜索文件 / 文件夹…");
+    state.input.addEventListener("input", function () {
+      scheduleSearch();
+    });
+    // 回车立即搜（不等防抖）
+    state.input.addEventListener("keydown", function (e) {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        e.stopPropagation();
+        if (state.timer) clearTimeout(state.timer);
+        runSearch((state.input.value || "").trim());
+      }
+    });
+  }
+
+  /* 拦截官方 /fs/search：官方前端用 axios（XHR），不是 fetch。
+     重写请求体里的 parent 为 "/"，保证即便走官方自己的搜索通道也是全局。 */
+  function rewriteSearchBody(bodyText) {
+    try {
+      var data = JSON.parse(bodyText);
+      if (data && typeof data === "object" && "keywords" in data) {
+        data.parent = "/"; // 永远全局
+        return JSON.stringify(data);
+      }
+    } catch (e) {}
+    return bodyText;
+  }
+
+  function patchFetch() {
+    if (window.__ymGlobalFetchPatched) return;
+    window.__ymGlobalFetchPatched = true;
     var ofetch = window.fetch;
     window.fetch = function (input, init) {
       try {
         var url = typeof input === "string" ? input : input && input.url;
         if (url && url.indexOf("/fs/search") !== -1 && init && typeof init.body === "string") {
-          init = Object.assign({}, init, { body: rewriteBody(init.body) });
+          var nb = rewriteSearchBody(init.body);
+          if (nb !== init.body) init = Object.assign({}, init, { body: nb });
         }
       } catch (e) {}
       return ofetch.apply(this, arguments);
     };
   }
 
-  function installXhrPatch() {
-    if (window.__ymSearchXhrPatched) return;
-    window.__ymSearchXhrPatched = true;
-    var open = XMLHttpRequest.prototype.open;
-    var send = XMLHttpRequest.prototype.send;
+  function patchXhr() {
+    if (window.__ymGlobalXhrPatched) return;
+    window.__ymGlobalXhrPatched = true;
+    var OOpen = XMLHttpRequest.prototype.open;
+    var OSend = XMLHttpRequest.prototype.send;
     XMLHttpRequest.prototype.open = function (method, url) {
-      this.__ymSearchUrl = url || "";
-      return open.apply(this, arguments);
+      this.__ymIsSearch = typeof url === "string" && url.indexOf("/fs/search") !== -1;
+      return OOpen.apply(this, arguments);
     };
     XMLHttpRequest.prototype.send = function (body) {
       try {
-        if (this.__ymSearchUrl.indexOf("/fs/search") !== -1 && typeof body === "string") {
-          arguments[0] = rewriteBody(body);
+        if (this.__ymIsSearch && typeof body === "string") {
+          var nb = rewriteSearchBody(body);
+          if (nb !== body) body = nb;
         }
       } catch (e) {}
-      return send.apply(this, arguments);
+      return OSend.call(this, body);
     };
   }
 
-  function injectCss() {
-    if (document.getElementById("ym-search-toggle-css")) return;
-    var st = document.createElement("style");
-    st.id = "ym-search-toggle-css";
-    st.textContent = [
-      ".ym-search-scope{display:inline-flex;align-items:center;gap:5px;margin-left:6px;padding:0 8px;",
-      "height:32px;border-radius:8px;border:1px solid var(--hope-colors-neutral7,#cbd5e1);",
-      "font-size:12px;white-space:nowrap;cursor:pointer;color:var(--hope-colors-neutral11,#475569);",
-      "background:var(--hope-colors-neutral2,#f8fafc);user-select:none;}",
-      ".ym-search-scope input{margin:0;cursor:pointer;}",
-    ].join("");
-    document.head.appendChild(st);
+  // 弹窗关闭 / SPA 路由切换（点搜索结果进文件夹）后，Solid 会把旧弹窗移出文档。
+  // 此时必须重置缓存的 modal/input，否则下次打开的是【新弹窗节点】，而我们仍持有
+  // 游离的旧节点，自定义结果层不会挂回去，看起来“变回了原来的搜索界面”。
+  function resetModalState() {
+    state.modal = null;
+    state.input = null;
+    state.listEl = null;
+    state.statusEl = null;
+    state.lastKeyword = "";
+    if (state.timer) { clearTimeout(state.timer); state.timer = null; }
+    if (state.abort) { try { state.abort.abort(); } catch (e) {} state.abort = null; }
+    state.seq++;
+  }
+
+  function isDetached(el) {
+    if (!el) return true;
+    if (!el.isConnected) return true;
+    // 旧弹窗节点：仍在 DOM 中但已不可见（Solid 复用/卸载），也视为失效
+    try { if (el.getBoundingClientRect().width === 0) return true; } catch (e) {}
+    return false;
   }
 
-  function findModal() {
-    var nodes = document.querySelectorAll('[role="dialog"]');
-    for (var i = 0; i < nodes.length; i++) {
-      var n = nodes[i];
-      if (n.querySelector("#search-input") && n.getBoundingClientRect().width > 0) return n;
+  function hookModal() {
+    // 已缓存的弹窗已脱离文档：SPA 导航后清理，确保重新 hook 新弹窗
+    if (state.modal && isDetached(state.modal)) {
+      resetModalState();
     }
-    return null;
-  }
+    var modal = null;
+    var dialogs = $all('[role="dialog"]');
+    for (var i = 0; i < dialogs.length; i++) {
+      if (dialogs[i].querySelector("#search-input") && dialogs[i].getBoundingClientRect().width > 0 && dialogs[i].isConnected) {
+        modal = dialogs[i];
+        break;
+      }
+    }
+    if (!modal) return;
 
-  function ensureToggle() {
-    var modal = findModal();
-    if (!modal || modal.querySelector(".ym-search-scope")) return;
     var input = modal.querySelector("#search-input");
     if (!input) return;
-    var holder = input.closest("div");
-    if (!holder || !holder.parentElement) return;
-    var row = holder.parentElement;
-    var label = document.createElement("label");
-    label.className = "ym-search-scope";
-    label.title = "全局：从根目录递归搜索全部存储；当前目录：仅搜索所在文件夹及其子目录";
-    var cb = document.createElement("input");
-    cb.type = "checkbox";
-    cb.checked = isGlobal();
-    cb.addEventListener("change", function () { setGlobal(cb.checked); });
-    label.appendChild(cb);
-    label.appendChild(document.createTextNode("全局"));
-    row.appendChild(label);
+
+    var isNewModal = state.modal !== modal;
+    state.modal = modal;
+    state.input = input;
+    // 弹窗 DOM 在 Solid 中复用；overlay 只建一次并缓存在节点上，避免重复插入。
+    if (modal.__ymListEl) {
+      state.listEl = modal.__ymListEl;
+      state.statusEl = modal.__ymStatusEl;
+    } else {
+      state.listEl = null;
+      state.statusEl = null;
+    }
+
+    ensureOverlay();
+    modal.__ymListEl = state.listEl;
+    modal.__ymStatusEl = state.statusEl;
+    bindInput();
+
+    if (isNewModal) {
+      // 弹窗打开时聚焦并按当前内容立即搜
+      setTimeout(function () {
+        try { input.focus(); } catch (e) {}
+        var kw = (input.value || "").trim();
+        if (kw) runSearch(kw);
+      }, 50);
+    }
   }
 
   function boot() {
     injectCss();
-    installFetchPatch();
-    installXhrPatch();
-    new MutationObserver(function () {
-      if (document.querySelector("#search-input")) ensureToggle();
-    }).observe(document.body, { childList: true, subtree: true });
+    patchFetch();
+    patchXhr();
+    // 只监听节点增删（不监听 attributes，避免我们自己 setAttribute 引发观察器回调风暴）；
+    // 用 rAF 合并高频回调，并防重入。
+    var queued = false, running = false;
+    function flush() {
+      queued = false;
+      if (running) return;
+      if (!document.querySelector("#search-input")) return;
+      running = true;
+      try { hookModal(); } finally { running = false; }
+    }
+    var mo = new MutationObserver(function () {
+      if (queued) return;
+      queued = true;
+      (window.requestAnimationFrame || function (f) { setTimeout(f, 16); })(flush);
+    });
+    mo.observe(document.body, { childList: true, subtree: true });
+
+    // SPA 路由切换（点搜索结果进文件夹）：旧弹窗被卸载，复位缓存，使下次打开
+    // 搜索时重新 hook 新弹窗，而不是停留在旧的原生搜索界面直到整页刷新。
+    // 用【只读轮询 pathname】而非包装 history.pushState/replaceState —— 后者可能
+    // 干扰 Solid 路由器（曾导致导航后转圈/卡死）。轮询零副作用、最稳。
+    var lastPath = location.pathname + location.search;
+    function onRouteChange() {
+      lastPath = location.pathname + location.search;
+      setTimeout(function () {
+        if (isDetached(state.modal)) resetModalState();
+      }, 0);
+    }
+    setInterval(function () {
+      var cur = location.pathname + location.search;
+      if (cur !== lastPath) {
+        lastPath = cur;
+        setTimeout(function () {
+          if (isDetached(state.modal)) resetModalState();
+        }, 0);
+      }
+    }, 300);
+    window.addEventListener("popstate", onRouteChange);
+    window.addEventListener("hashchange", onRouteChange);
+
+    // 弹窗关闭时复位
+    document.addEventListener("click", function (e) {
+      var t = e.target;
+      if (t && t.closest && t.closest(".hope-modal__overlay, [class*=modal__overlay]")) {
+        state.seq++;
+      }
+    }, true);
   }
 
   if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", boot);
@@ -1145,573 +1565,166 @@
 /* ===== music-player.js ===== */
 ;(function(){
 /* =============================================================================
- * Yuuichi 资源站 · 悬浮背景音乐播放器
+ * Yuuichi 资源站 · 背景音乐（与 blog.yuuichi.me / www.yuuichi.me 统一的 bgm-dock）
  * -----------------------------------------------------------------------------
- * 想换歌单，只需要修改下面 MUSIC_CONFIG 里的 id / 链接即可，然后重新部署：
- *   1) 网易云歌单：打开歌单复制地址里的 id 数字
- *      例 https://music.163.com/#/playlist?id=18475904830 -> id 填 "18475904830"
- *      网易云使用内置 APlayer 内核（支持音量调节 / 封面 / 歌词 / 列表循环）
- *   2) Spotify 歌单：复制歌单链接
- *      例 https://open.spotify.com/playlist/3bePpYfOLDwFtVVs6cqwyh -> id 填 "3bePpYfOLDwFtVVs6cqwyh"
- *      Spotify 为官方嵌入播放器，其桌面端自身右下角带音量条（浏览器跨域限制，外部无法代为控制）
- * 每个平台可填多个歌单（顶部可切换）；不用的平台把列表留空 [] 即可。
- * 网易云歌单由本站同源接口 /api/music/netease 实时拉取网易云官方数据（自动反映你在网易云的增删）；
- * 每首歌的直链 / 封面 / 歌词由 metingApi 按 id 实时解析（公益服务，失效可换其它 Meting 兼容地址）。
- * 改完保存，在 openlist 目录执行：
- *   node scripts/sync-branding.mjs
- *   pnpm exec wrangler deploy
+ * 统一播放器：左下角圆形按钮（半吸附边缘 / 可拖动 / 可缩放），点击展开面板，
+ * 内置 Spotify 官方嵌入 + 网易云（Meting/APlayer，含封面/歌词/列表循环/倍速）。
+ *
+ * 想换歌单，修改下面 MUSIC_CONFIG 的 id，然后：
+ *   node scripts/sync-branding.mjs && pnpm exec wrangler deploy
+ * 也可以在 OpenList 管理台设置项 music_config 在线覆盖（无需重新部署）。
+ *
+ * 资源站资源全部同源托管在 /brand/bgm/ 下；网易云歌单/直链/歌词走本站
+ * /api/music/meting（Worker 服务端代理网易云），浏览器不直接访问 workers.dev。
  * ============================================================================= */
 (function () {
   "use strict";
 
+  var ASSET_BASE = "/brand/bgm";
+  var METING_API = "/api/music/meting?server=:server&type=:type&id=:id&r=:r";
+
   var MUSIC_CONFIG = {
-    netease: [
-      { id: "18475904830", name: "网易云歌单" }
-    ],
-    spotify: [
-      { id: "3bePpYfOLDwFtVVs6cqwyh", name: "Spotify 歌单" }
-    ],
-    defaultTab: "netease", // "netease" 或 "spotify"
-    autoplay: false,       // 网易云是否自动播放（多数浏览器会拦截，建议 false）
-    fabHint: "音乐"
+    netease: [{ id: "18475904830", name: "网易云" }],
+    spotify: [{ id: "3bePpYfOLDwFtVVs6cqwyh", name: "Spotify" }],
+    defaultTab: "spotify", // "spotify" 或 "netease"
+    autoplay: false,
+    theme: "#0ea5e9",
+    volume: 0.6,
+    order: "list" // list / random
   };
 
-  // 管理台（OpenList 设置项 music_config）可在线覆盖歌单/开关，无需重新部署。
-  // Worker 会在本脚本前注入 window.__YUUICHI_MUSIC_CONFIG_OVERLAY__。
+  // 管理台 music_config 在线覆盖
   try {
     var __ov = window.__YUUICHI_MUSIC_CONFIG_OVERLAY__;
     if (__ov && typeof __ov === "object") {
       ["netease", "spotify"].forEach(function (k) {
         if (Array.isArray(__ov[k])) MUSIC_CONFIG[k] = __ov[k];
       });
-      ["defaultTab", "fabHint"].forEach(function (k) {
+      ["defaultTab", "theme", "order"].forEach(function (k) {
         if (typeof __ov[k] === "string" && __ov[k]) MUSIC_CONFIG[k] = __ov[k];
       });
-      if (typeof __ov.autoplay === "boolean") MUSIC_CONFIG.autoplay = __ov.autoplay;
+      ["autoplay"].forEach(function (k) {
+        if (typeof __ov[k] === "boolean") MUSIC_CONFIG[k] = __ov[k];
+      });
+      if (typeof __ov.volume === "number") MUSIC_CONFIG.volume = __ov.volume;
     }
   } catch (e) {}
 
-  function init() {
-    if (window.__yuuichiMusicInited) return;
-    window.__yuuichiMusicInited = true;
-
-    var platforms = [];
-    if (MUSIC_CONFIG.netease.length) platforms.push({ key: "netease", label: "网易云", items: MUSIC_CONFIG.netease });
-    if (MUSIC_CONFIG.spotify.length) platforms.push({ key: "spotify", label: "Spotify", items: MUSIC_CONFIG.spotify });
-    if (!platforms.length) return;
-
-    var host = document.createElement("div");
-    host.id = "yuuichi-music-root";
-    host.style.cssText = "all:initial;position:fixed;z-index:2147483000;";
-    var shadow = host.attachShadow ? host.attachShadow({ mode: "open" }) : host;
-    document.body.appendChild(host);
-
-    /* ---------------- 样式 ---------------- */
-    // APlayer 厂商 CSS（12KB）改为首次真正打开歌单时才注入，避免首屏多一个请求
-    var vendorLinkLoaded = false;
-    function ensureVendorCss() {
-      if (vendorLinkLoaded) return;
-      vendorLinkLoaded = true;
-      var vendorLink = document.createElement("link");
-      vendorLink.rel = "stylesheet";
-      vendorLink.href = "/brand/vendor/APlayer.min.css";
-      shadow.appendChild(vendorLink);
-    }
-
-    var style = document.createElement("style");
-    style.textContent = [
-      ":host, * { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }",
-      ":host { --ym-txt:#0f172a; --ym-sub:#475569; --ym-card:rgba(255,255,255,.92); --ym-line:rgba(14,165,233,.28); --ym-soft:rgba(14,165,233,.12); }",
-      ":host([data-dark]) { --ym-txt:#e2e8f0; --ym-sub:#94a3b8; --ym-card:rgba(15,23,42,.92); --ym-line:rgba(56,189,248,.32); --ym-soft:rgba(56,189,248,.16); }",
-      ".wrap { position:fixed; left:0; top:0; font-family:system-ui,-apple-system,'Segoe UI','Microsoft YaHei',sans-serif; }",
-      ".fab { position:fixed; left:18px; bottom:18px; width:54px; height:54px; border-radius:50%;",
-      "  border:none; cursor:pointer; color:#fff; display:flex; align-items:center; justify-content:center;",
-      "  background:linear-gradient(135deg,#38bdf8,#0284c7); box-shadow:0 8px 24px rgba(2,132,199,.45);",
-      "  transform:translateX(-58%); transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease; padding:0; }",
-      ".wrap:hover .fab, .fab:focus-visible, .fab.peek { transform:translateX(0); }",
-      ".fab:hover { box-shadow:0 12px 30px rgba(2,132,199,.55); }",
-      ".fab:active { transform:scale(.94); }",
-      ".fab svg { width:26px; height:26px; }",
-      ".panel { position:fixed; left:18px; bottom:84px; width:360px; height:560px; max-width:calc(100vw - 24px);",
-      "  background:var(--ym-card); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);",
-      "  border:1px solid var(--ym-line); border-radius:18px; overflow:hidden; display:none;",
-      "  flex-direction:column; box-shadow:0 20px 60px rgba(2,8,23,.35); color:var(--ym-txt); }",
-      ".panel.open { display:flex; }",
-      ".bar { display:flex; align-items:center; gap:6px; padding:8px 10px; cursor:move; user-select:none;",
-      "  background:linear-gradient(135deg,rgba(56,189,248,.18),rgba(2,132,199,.10)); border-bottom:1px solid var(--ym-line); flex:0 0 auto; }",
-      ".tab { border:1px solid var(--ym-line); background:transparent; color:var(--ym-txt);",
-      "  border-radius:999px; padding:4px 12px; font-size:12px; cursor:pointer; }",
-      ".tab.active { background:linear-gradient(135deg,#38bdf8,#0284c7); color:#fff; border-color:transparent; }",
-      ".sel { flex:1; min-width:0; border:1px solid var(--ym-line); background:transparent;",
-      "  color:var(--ym-txt); border-radius:8px; font-size:12px; padding:4px 6px; outline:none; }",
-      ".sel option { color:#0f172a; }",
-      ".close { border:none; background:transparent; color:var(--ym-txt); font-size:18px; line-height:1; cursor:pointer; padding:2px 7px; border-radius:8px; }",
-      ".close:hover { background:var(--ym-soft); }",
-      ".refresh { display:none; border:none; background:transparent; color:var(--ym-txt); cursor:pointer; padding:2px 6px; border-radius:8px; align-items:center; }",
-      ".refresh.show { display:inline-flex; }",
-      ".refresh:hover { background:var(--ym-soft); }",
-      ".refresh svg { width:16px; height:16px; }",
-      ".refresh.spin svg { animation:ym-rspin .8s linear infinite; }",
-      "@keyframes ym-rspin { to { transform:rotate(360deg); } }",
-      ".ctrl { display:none; align-items:center; gap:6px; padding:5px 10px; flex:0 0 auto;",
-      "  border-bottom:1px solid var(--ym-line); }",
-      ".ctrl.show { display:flex; }",
-      ".cbtn { border:1px solid var(--ym-line); background:transparent; color:var(--ym-txt); cursor:pointer;",
-      "  border-radius:999px; font-size:12px; line-height:1; padding:4px 10px; display:inline-flex; align-items:center; gap:5px; }",
-      ".cbtn:hover { background:var(--ym-soft); }",
-      ".cbtn svg { width:14px; height:14px; }",
-      ".stages { flex:1; min-height:0; position:relative; }",
-      ".stage { position:absolute; inset:0; display:none; }",
-      ".stage.active { display:block; }",
-      ".stage iframe { width:100%; height:100%; border:0; display:block; background:#fff; }",
-      ".ap-wrap { position:absolute; inset:0; overflow:auto; }",
-      ".status { position:absolute; inset:0; display:flex; flex-direction:column; gap:10px; align-items:center; justify-content:center; text-align:center; color:var(--ym-sub); font-size:13px; padding:24px; }",
-      ".status button { border:none; cursor:pointer; color:#fff; background:linear-gradient(135deg,#38bdf8,#0284c7); border-radius:999px; padding:6px 18px; font-size:13px; }",
-      ".resizer { position:absolute; right:0; bottom:0; width:22px; height:22px; cursor:nwse-resize; z-index:5; }",
-      ".resizer::after { content:''; position:absolute; right:5px; bottom:5px; width:10px; height:10px;",
-      "  border-right:2px solid var(--ym-line); border-bottom:2px solid var(--ym-line); }",
-      /* APlayer 皮肤适配（透明、贴合面板、青蓝主题） */
-      ".aplayer { width:100%; margin:0; background:transparent !important; box-shadow:none !important; border-radius:0; color:var(--ym-txt); }",
-      ".aplayer .aplayer-info { border-top:1px solid var(--ym-line); }",
-      ".aplayer .aplayer-title, .aplayer .aplayer-list ol li .aplayer-list-index, .aplayer .aplayer-time { color:var(--ym-sub); }",
-      ".aplayer .aplayer-list ol li { border-top:1px solid var(--ym-line); }",
-      ".aplayer .aplayer-list ol li.aplayer-list-light { background:var(--ym-soft); }",
-      ".aplayer .aplayer-list ol li:hover { background:var(--ym-soft); }",
-      ".aplayer .aplayer-list ol li .aplayer-list-author { color:var(--ym-sub); }",
-      ".aplayer .aplayer-lrc { text-shadow:0 1px 4px rgba(0,0,0,.35); }",
-      ".aplayer .aplayer-lrc p.aplayer-lrc-current { color:#38bdf8; }",
-      ".aplayer .aplayer-miniswitcher { background:var(--ym-soft); }",
-      ":host([data-dark]) .aplayer svg, :host([data-dark]) .aplayer .aplayer-icon { filter:invert(1) hue-rotate(180deg); }",
-      "@media (max-width:600px) {",
-      "  .fab { left:14px; bottom:14px; width:50px; height:50px; }",
-      "  .panel { left:12px !important; bottom:76px !important; width:calc(100vw - 24px) !important; height:min(76vh,600px) !important; }",
-      "  .resizer { display:none; }",
-      "}"
-    ].join("\n");
-    shadow.appendChild(style);
-
-    /* ---------------- DOM 骨架 ---------------- */
-    var wrap = document.createElement("div");
-    wrap.className = "wrap";
-    shadow.appendChild(wrap);
-
-    var fab = document.createElement("button");
-    fab.className = "fab";
-    fab.title = MUSIC_CONFIG.fabHint || "音乐";
-    fab.setAttribute("aria-label", "音乐播放器");
-    fab.innerHTML =
-      '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
-      '<path d="M9 18V5l10-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="16" cy="16" r="3"></circle></svg>';
-    wrap.appendChild(fab);
-
-    var panel = document.createElement("div");
-    panel.className = "panel";
-    panel.innerHTML =
-      '<div class="bar"></div>' +
-      '<div class="ctrl">' +
-        '<button class="cbtn js-speed" type="button" title="播放倍速"><span class="speed-label">1.0x</span></button>' +
-        '<button class="cbtn js-order" type="button" title="播放顺序"></button>' +
-      '</div>' +
-      '<div class="stages"></div>' +
-      '<div class="resizer"></div>';
-    wrap.appendChild(panel);
-
-    var bar = panel.querySelector(".bar");
-    var stages = panel.querySelector(".stages");
-    var ctrlBar = panel.querySelector(".ctrl");
-    var speedBtn = panel.querySelector(".js-speed");
-    var speedLabel = panel.querySelector(".speed-label");
-    var orderBtn = panel.querySelector(".js-order");
-
-    var tabBtns = {};
-    platforms.forEach(function (p) {
-      var b = document.createElement("button");
-      b.className = "tab";
-      b.textContent = p.label;
-      b.dataset.key = p.key;
-      b.addEventListener("click", function () { selectTab(p.key); });
-      bar.appendChild(b);
-      tabBtns[p.key] = b;
-    });
-
-    var sel = document.createElement("select");
-    sel.className = "sel";
-    bar.appendChild(sel);
-
-    var refreshBtn = document.createElement("button");
-    refreshBtn.className = "refresh";
-    refreshBtn.title = "重新拉取最新歌单";
-    refreshBtn.setAttribute("aria-label", "刷新歌单");
-    refreshBtn.innerHTML =
-      '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
-      '<path d="M21 12a9 9 0 1 1-2.64-6.36"></path><polyline points="21 3 21 9 15 9"></polyline></svg>';
-    refreshBtn.addEventListener("click", function () {
-      if (state.tab === "netease") {
-        refreshBtn.classList.add("spin");
-        setupNetease(true).finally(function () { refreshBtn.classList.remove("spin"); });
-      }
+  /* 收起态关键 CSS（与博客 #bgm-dock-critical 保持一致），内联防止展开前闪烁 */
+  var CRITICAL_CSS =
+    ".bgm-dock{--bgm-accent:" + (MUSIC_CONFIG.theme || "#0ea5e9") + ";" +
+    "position:fixed;left:16px;bottom:16px;z-index:99999;width:52px;max-width:calc(100vw - 24px);" +
+    "font-size:13px;line-height:1.4;color:#222;}" +
+    ".bgm-dock.is-open{width:320px;max-width:calc(100vw - 24px);}" +
+    ".bgm-dock__fab{position:relative;width:52px;height:52px;border:0;border-radius:50%;" +
+    "background:var(--bgm-accent);color:#fff;font-size:20px;cursor:pointer;" +
+    "box-shadow:0 8px 22px rgba(0,0,0,.28);display:inline-flex;align-items:center;justify-content:center;touch-action:none;}" +
+    ".bgm-dock__fab.is-dragging{cursor:grabbing;opacity:.92;}" +
+    ".bgm-dock:not(.is-open) .bgm-dock__fab{--bgm-peek:18px;transition:transform .28s cubic-bezier(.22,.61,.36,1);will-change:transform;}" +
+    // 收起态半吸附到屏幕边缘：默认只露出一小截（半圆即可 hover），鼠标移上 /
+    // 键盘聚焦 / 拖拽 / 已全露 时整个滑回屏幕内，保证桌面鼠标始终点得到。
+    // 触摸设备点一下全露、再点展开（见 bgm-dock.js 的 is-revealed 逻辑）。
+    ".bgm-dock:not(.is-open) .bgm-dock__fab.is-peek-left{transform:translateX(calc(var(--bgm-peek) - 100%));}" +
+    ".bgm-dock:not(.is-open) .bgm-dock__fab.is-peek-right{transform:translateX(calc(100% - var(--bgm-peek)));}" +
+    ".bgm-dock:not(.is-open) .bgm-dock__fab:hover," +
+    ".bgm-dock:not(.is-open) .bgm-dock__fab:focus-visible," +
+    ".bgm-dock:not(.is-open) .bgm-dock__fab.is-revealed," +
+    ".bgm-dock:not(.is-open) .bgm-dock__fab.is-dragging{transform:none;}" +
+    // 触摸（无 hover）首次点按仅全露：未全露时不要因 hover 规则干扰（触摸无 hover，
+    // 该媒体查询下默认半藏即可）。
+    "@media (hover:none),(pointer:coarse){" +
+    ".bgm-dock:not(.is-open) .bgm-dock__fab.is-peek-left{transform:translateX(calc(var(--bgm-peek) - 100%));}" +
+    ".bgm-dock:not(.is-open) .bgm-dock__fab.is-peek-right{transform:translateX(calc(100% - var(--bgm-peek)));}}" +
+    ".bgm-dock__fab svg{width:22px;height:22px;fill:currentColor;display:block;}" +
+    ".bgm-dock__fab-bar{position:absolute;right:9px;top:9px;width:9px;height:9px;border-radius:50%;" +
+    "background:#2ecc71;border:2px solid #fff;opacity:0;}" +
+    ".bgm-dock.is-playing .bgm-dock__fab-bar{opacity:1;}" +
+    ".bgm-dock__panel{display:none;}" +
+    ".bgm-dock.is-open .bgm-dock__panel{display:flex;}" +
+    ".bgm-dock.is-open .bgm-dock__fab{display:none;}" +
+    ".bgm-dock__overlay{position:fixed;inset:0;z-index:999999;cursor:grabbing;user-select:none;}" +
+    "@media (max-width:768px){.bgm-dock{left:14px;bottom:14px;width:52px;}" +
+    ".bgm-dock.is-open{width:auto;left:0;right:0;bottom:0;max-width:none;}}";
+
+  function buildSources() {
+    var sources = [];
+    var i = 0;
+    (MUSIC_CONFIG.spotify || []).forEach(function (s) {
+      if (!s || !s.id) return;
+      sources.push({
+        name: s.name || "Spotify",
+        type: "spotify",
+        resourceType: "playlist",
+        id: String(s.id),
+        key: "spotify-" + i++
+      });
     });
-    bar.appendChild(refreshBtn);
-
-    var closeBtn = document.createElement("button");
-    closeBtn.className = "close";
-    closeBtn.innerHTML = "&times;";
-    closeBtn.addEventListener("click", close);
-    bar.appendChild(closeBtn);
-
-    /* 每个平台一个常驻 stage（切换/收起只隐藏，不销毁，播放不中断、不重载） */
-    var stageEl = {};
-    platforms.forEach(function (p) {
-      var d = document.createElement("div");
-      d.className = "stage";
-      d.dataset.key = p.key;
-      stages.appendChild(d);
-      stageEl[p.key] = d;
+    (MUSIC_CONFIG.netease || []).forEach(function (s) {
+      if (!s || !s.id) return;
+      sources.push({
+        name: s.name || "网易云",
+        type: "netease",
+        resourceType: "playlist",
+        id: String(s.id),
+        key: "netease-" + i++
+      });
     });
+    // 默认源标记
+    var wantDefault = MUSIC_CONFIG.defaultTab === "netease" ? "netease" : "spotify";
+    var def = sources.filter(function (s) { return s.type === wantDefault; })[0] || sources[0];
+    if (def) def.default = true;
+    return sources;
+  }
 
-    var state = {
-      tab: MUSIC_CONFIG.defaultTab,
-      idx: {},
-      ready: {},   // 该平台当前 stage 是否已初始化
-      ap: null,    // 网易云 APlayer 实例
-      tracks: null,
-      loading: false
+  function init() {
+    if (window.__yuuichiBgmInited) return;
+    if (document.getElementById("bgm-dock")) return;
+    window.__yuuichiBgmInited = true;
+
+    var sources = buildSources();
+    if (!sources.length) return;
+
+    var styleEl = document.createElement("style");
+    styleEl.id = "bgm-dock-critical";
+    styleEl.textContent = CRITICAL_CSS;
+    document.head.appendChild(styleEl);
+
+    var dock = document.createElement("div");
+    dock.id = "bgm-dock";
+    dock.className = "bgm-dock";
+    dock.setAttribute(
+      "data-bgm",
+      JSON.stringify({
+        sources: sources,
+        autoplay: MUSIC_CONFIG.autoplay === true,
+        order: MUSIC_CONFIG.order === "random" ? "random" : "list",
+        volume: typeof MUSIC_CONFIG.volume === "number" ? MUSIC_CONFIG.volume : 0.6,
+        theme: MUSIC_CONFIG.theme || "#0ea5e9",
+        assetBase: ASSET_BASE,
+        metingApi: METING_API
+      })
+    );
+    document.body.appendChild(dock);
+
+    // 收起态只依赖内联 CRITICAL_CSS，主脚本 bgm-dock.js（~28KB）推迟到浏览器
+    // 空闲 / load 后再拉，避免与首屏 JS、目录列表、背景图争抢带宽与主线程。
+    var s = document.createElement("script");
+    s.src = ASSET_BASE + "/js/bgm-dock.js";
+    s.defer = true;
+    s.onerror = function () {
+      // 加载失败时至少保证按钮还能看到，避免完全无反应
+      try { dock.style.display = "none"; } catch (e) {}
     };
-    platforms.forEach(function (p) { state.idx[p.key] = 0; state.ready[p.key] = false; });
-    if (!tabBtns[state.tab]) state.tab = platforms[0].key;
-
-    var SPEEDS = [1, 1.25, 1.5, 2, 0.75];
-    var speedIdx = 0;
-    var ORDER_MODES = [
-      { loop: "all",   order: "list",   label: "列表循环", icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="17 1 21 5 17 9"></polyline><path d="M3 11V9a4 4 0 0 1 4-4h14"></path><polyline points="7 23 3 19 7 15"></polyline><path d="M21 13v2a4 4 0 0 1-4 4H3"></path></svg>' },
-      { loop: "one",   order: "list",   label: "单曲循环", icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 2l4 4-4 4"></path><path d="M3 11v-1a4 4 0 0 1 4-4h14"></path><path d="M7 22l-4-4 4-4"></path><path d="M21 13v1a4 4 0 0 1-4 4H3"></path><text x="12" y="15" text-anchor="middle" font-size="9" fill="currentColor" stroke="none">1</text></svg>' },
-      { loop: "none",  order: "random", label: "随机播放", icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 3 21 3 21 8"></polyline><line x1="4" y1="20" x2="21" y2="3"></line><polyline points="21 16 21 21 16 21"></polyline><line x1="15" y1="15" x2="21" y2="21"></line><line x1="4" y1="4" x2="9" y2="9"></line></svg>' },
-      { loop: "all",   order: "list",   label: "全部循环", icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 2l4 4-4 4"></path><path d="M3 11v-1a4 4 0 0 1 4-4h14"></path><path d="M7 22l-4-4 4-4"></path><path d="M21 13v1a4 4 0 0 1-4 4H3"></path></svg>' }
-    ];
-    var orderIdx = 0;
-    try {
-      var sv = parseFloat(localStorage.getItem("ym-speed"));
-      var si = SPEEDS.indexOf(sv);
-      if (si >= 0) speedIdx = si;
-      var oi = parseInt(localStorage.getItem("ym-order"), 10);
-      if (!isNaN(oi) && ORDER_MODES[oi]) orderIdx = oi;
-    } catch (e) {}
-
-    function applySpeed() {
-      var rate = SPEEDS[speedIdx];
-      speedLabel.textContent = (rate % 1 === 0 ? rate.toFixed(1) : String(rate)) + "x";
-      try {
-        if (state.ap && state.ap.audio) state.ap.audio.playbackRate = rate;
-        localStorage.setItem("ym-speed", String(rate));
-      } catch (e) {}
-    }
-
-    function applyOrder() {
-      var mode = ORDER_MODES[orderIdx];
-      orderBtn.innerHTML = mode.icon + '<span class="order-label">' + mode.label + '</span>';
-      orderBtn.title = "播放顺序：" + mode.label;
-      try {
-        if (state.ap && state.ap.options) {
-          state.ap.options.loop = mode.loop;
-          state.ap.options.order = mode.order;
-        }
-        localStorage.setItem("ym-order", String(orderIdx));
-      } catch (e) {}
-    }
-
-    speedBtn.addEventListener("click", function () {
-      speedIdx = (speedIdx + 1) % SPEEDS.length;
-      applySpeed();
-    });
-    orderBtn.addEventListener("click", function () {
-      orderIdx = (orderIdx + 1) % ORDER_MODES.length;
-      applyOrder();
-    });
-    applySpeed();
-    applyOrder();
-
-    function currentPlatform() {
-      for (var i = 0; i < platforms.length; i++) if (platforms[i].key === state.tab) return platforms[i];
-      return platforms[0];
-    }
-
-    function loadScriptOnce(attr, src) {
-      return new Promise(function (resolve, reject) {
-        var existing = document.querySelector("script[" + attr + "]");
-        if (existing) {
-          if (existing.dataset.loaded === "1") return resolve();
-          existing.addEventListener("load", function () { resolve(); });
-          existing.addEventListener("error", reject);
-          return;
-        }
-        var s = document.createElement("script");
-        s.async = true;
-        s.setAttribute(attr, "1");
-        s.onload = function () { s.dataset.loaded = "1"; resolve(); };
-        s.onerror = reject;
-        s.src = src;
-        document.head.appendChild(s);
-      });
-    }
-
-    function loadScript(src) {
-      return loadScriptOnce("data-ym-aplayer", src);
-    }
-
-    /* 实时同源接口：Worker 服务端优先走自建 Meting、失败回退网易云官方，无 CORS */
-    function fetchWithTimeout(url, ms) {
-      var ctrl = ("AbortController" in window) ? new AbortController() : null;
-      var timer = ctrl ? setTimeout(function () { ctrl.abort(); }, ms) : null;
-      return fetch(url, { cache: "no-store", signal: ctrl ? ctrl.signal : undefined })
-        .finally(function () { if (timer) clearTimeout(timer); });
-    }
-
-    async function fetchPlaylist(item, force) {
-      var url = "/api/music/netease?id=" + encodeURIComponent(item.id) + (force ? "&refresh=1" : "");
-      var res = await fetchWithTimeout(url, 15000);
-      var j = await res.json();
-      if (!j || j.code !== 200 || !Array.isArray(j.data && j.data.songs) || !j.data.songs.length) {
-        throw new Error("empty");
-      }
-      return j.data.songs;
-    }
-
-    function statusEl(el, msg, withRetry) {
-      el.innerHTML = "";
-      var d = document.createElement("div");
-      d.className = "status";
-      var span = document.createElement("span");
-      span.textContent = msg;
-      d.appendChild(span);
-      if (withRetry) {
-        var btn = document.createElement("button");
-        btn.textContent = "重试";
-        btn.addEventListener("click", function () { setupNetease(true); });
-        d.appendChild(btn);
-      }
-      el.appendChild(d);
-    }
-
-    async function setupNetease(force) {
-      var el = stageEl.netease;
-      if (state.ready.netease && !force) return;
-      if (state.loading) return;
-      state.loading = true;
-      statusEl(el, "正在加载网易云歌单…", false);
-      try {
-        var item = MUSIC_CONFIG.netease[state.idx.netease || 0];
-        var list = await fetchPlaylist(item, !!force);
-        state.tracks = list;
-
-        if (state.ap) { try { state.ap.destroy(); } catch (e) {} state.ap = null; }
-        el.innerHTML = '<div class="ap-wrap"></div>';
-        ensureVendorCss();
-        await loadScript("/brand/vendor/APlayer.min.js");
-
-        var mode = ORDER_MODES[orderIdx];
-        var ap = new window.APlayer({
-          container: el.querySelector(".ap-wrap"),
-          fixed: false,
-          mini: false,
-          autoplay: !!MUSIC_CONFIG.autoplay,
-          theme: "#0ea5e9",
-          loop: mode.loop,
-          order: mode.order,
-          listMaxHeight: "999px",
-          lrcType: list[0].lrc ? 3 : 0,
-          audio: list.map(function (t) {
-            return { name: t.name, artist: t.artist, url: t.url, cover: t.pic, lrc: t.lrc, theme: "#0ea5e9" };
-          })
-        });
-        state.ap = ap;
-        var audio = ap.audio;
-        if (audio) {
-          audio.playbackRate = SPEEDS[speedIdx];
-          audio.addEventListener("play", function () { audio.playbackRate = SPEEDS[speedIdx]; });
-        }
-        state.ready.netease = true;
-      } catch (e) {
-        statusEl(el, "网易云歌单加载失败（解析服务可能暂时不可用）", true);
-      } finally {
-        state.loading = false;
-      }
-    }
-
-    function spotifySrc(item) {
-      var dark = document.body.classList.contains("hope-ui-dark");
-      return "https://open.spotify.com/embed/playlist/" + encodeURIComponent(item.id) +
-        "?utm_source=generator&theme=" + (dark ? "0" : "1");
-    }
-
-    function setupSpotify(force) {
-      var el = stageEl.spotify;
-      if (state.ready.spotify && !force) return;
-      var item = MUSIC_CONFIG.spotify[state.idx.spotify || 0];
-      el.innerHTML = "";
-      var ifr = document.createElement("iframe");
-      ifr.loading = "lazy";
-      ifr.allow = "autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture";
-      ifr.referrerPolicy = "no-referrer";
-      ifr.src = spotifySrc(item);
-      el.appendChild(ifr);
-      state.ready.spotify = true;
-    }
-
-    function fillSelect(p) {
-      sel.innerHTML = "";
-      if (p.items.length <= 1) { sel.style.display = "none"; return; }
-      sel.style.display = "";
-      p.items.forEach(function (it, i) {
-        var o = document.createElement("option");
-        o.value = String(i);
-        o.textContent = it.name || ("歌单 " + (i + 1));
-        sel.appendChild(o);
-      });
-      sel.value = String(state.idx[p.key] || 0);
-    }
-
-    function activateStages(key) {
-      Object.keys(stageEl).forEach(function (k) {
-        stageEl[k].classList.toggle("active", k === key);
+    var load = function () { document.body.appendChild(s); };
+    if (document.readyState === "complete") {
+      var ric = window.requestIdleCallback || function (cb) { return setTimeout(cb, 200); };
+      ric(load, { timeout: 2500 });
+    } else {
+      window.addEventListener("load", function () {
+        var ric = window.requestIdleCallback || function (cb) { return setTimeout(cb, 300); };
+        ric(load, { timeout: 3000 });
       });
-      ctrlBar.classList.toggle("show", key === "netease");
-      refreshBtn.classList.toggle("show", key === "netease");
-    }
-
-    function selectTab(key) {
-      state.tab = key;
-      Object.keys(tabBtns).forEach(function (k) { tabBtns[k].classList.toggle("active", k === key); });
-      var p = currentPlatform();
-      fillSelect(p);
-      activateStages(key);
-      if (key === "netease") setupNetease(false);
-      else setupSpotify(false);
-      try { localStorage.setItem("ym-tab", key); } catch (e) {}
-    }
-
-    sel.addEventListener("change", function () {
-      var key = state.tab;
-      state.idx[key] = parseInt(sel.value, 10) || 0;
-      if (key === "netease") setupNetease(true);
-      else setupSpotify(true);
-    });
-
-    function open() {
-      panel.classList.add("open");
-      var key = state.tab;
-      Object.keys(tabBtns).forEach(function (k) { tabBtns[k].classList.toggle("active", k === key); });
-      fillSelect(currentPlatform());
-      activateStages(key);
-      if (key === "netease") setupNetease(true);
-      else setupSpotify(false);
-      try { localStorage.setItem("ym-open", "1"); } catch (e) {}
-    }
-    function close() {
-      panel.classList.remove("open");
-      fab.classList.remove("peek");
-      state.ready.netease = false;
-      try { localStorage.setItem("ym-open", "0"); } catch (e) {}
-    }
-    fab.addEventListener("click", function (ev) {
-      // 第一次点击在半露出吸附态时只负责全露出，不立刻打开面板；再次点击才打开。
-      if (!panel.classList.contains("open") && !fab.classList.contains("peek")) {
-        fab.classList.add("peek");
-        ev.stopPropagation();
-        return;
-      }
-      fab.classList.remove("peek");
-      panel.classList.contains("open") ? close() : open();
-    });
-    // 触屏没有 hover：点 FAB 之外恢复半露出；面板打开时不收起，避免遮挡交互。
-    document.addEventListener("pointerdown", function (ev) {
-      if (panel.classList.contains("open")) return;
-      if (wrap.contains(ev.target)) return;
-      fab.classList.remove("peek");
-    }, true);
-
-    /* 记忆位置/尺寸/上次标签 */
-    try {
-      var savedRect = JSON.parse(localStorage.getItem("ym-rect") || "null");
-      if (savedRect && savedRect.w && savedRect.h && !window.matchMedia("(max-width:600px)").matches) {
-        panel.style.left = savedRect.x + "px";
-        panel.style.top = savedRect.y + "px";
-        panel.style.bottom = "auto";
-        panel.style.width = savedRect.w + "px";
-        panel.style.height = savedRect.h + "px";
-      }
-      var savedTab = localStorage.getItem("ym-tab");
-      if (savedTab && tabBtns[savedTab]) state.tab = savedTab;
-    } catch (e) {}
-
-    function isMobile() { return window.matchMedia("(max-width:600px)").matches; }
-    function saveRect() {
-      if (isMobile()) return;
-      var r = panel.getBoundingClientRect();
-      try { localStorage.setItem("ym-rect", JSON.stringify({ x: r.left, y: r.top, w: r.width, h: r.height })); } catch (e) {}
-    }
-
-    /* 拖动 */
-    var drag = null;
-    function startDrag(ev) {
-      if (ev.target.closest(".tab,.close,.sel")) return;
-      var pt = ev.touches ? ev.touches[0] : ev;
-      var r = panel.getBoundingClientRect();
-      drag = { x: pt.clientX, y: pt.clientY, left: r.left, top: r.top };
-      panel.style.left = r.left + "px";
-      panel.style.top = r.top + "px";
-      panel.style.bottom = "auto";
-      ev.preventDefault();
-    }
-    function moveDrag(ev) {
-      if (!drag) return;
-      var pt = ev.touches ? ev.touches[0] : ev;
-      var nx = drag.left + (pt.clientX - drag.x);
-      var ny = drag.top + (pt.clientY - drag.y);
-      var r = panel.getBoundingClientRect();
-      nx = Math.max(0, Math.min(window.innerWidth - r.width, nx));
-      ny = Math.max(0, Math.min(window.innerHeight - 60, ny));
-      panel.style.left = nx + "px";
-      panel.style.top = ny + "px";
-    }
-    function endDrag() { if (drag) { drag = null; saveRect(); } }
-    bar.addEventListener("mousedown", startDrag);
-    window.addEventListener("mousemove", moveDrag);
-    window.addEventListener("mouseup", endDrag);
-    bar.addEventListener("touchstart", startDrag, { passive: false });
-    window.addEventListener("touchmove", moveDrag, { passive: false });
-    window.addEventListener("touchend", endDrag);
-
-    /* 缩放（桌面） */
-    var resizer = panel.querySelector(".resizer");
-    var rsz = null;
-    resizer.addEventListener("mousedown", function (ev) {
-      var r = panel.getBoundingClientRect();
-      rsz = { x: ev.clientX, y: ev.clientY, w: r.width, h: r.height, left: r.left, top: r.top };
-      panel.style.left = r.left + "px";
-      panel.style.top = r.top + "px";
-      panel.style.bottom = "auto";
-      ev.preventDefault();
-      ev.stopPropagation();
-    });
-    window.addEventListener("mousemove", function (ev) {
-      if (!rsz) return;
-      var w = Math.max(300, rsz.w + (ev.clientX - rsz.x));
-      var h = Math.max(360, rsz.h + (ev.clientY - rsz.y));
-      w = Math.min(w, window.innerWidth - rsz.left - 8);
-      panel.style.width = w + "px";
-      panel.style.height = h + "px";
-    });
-    window.addEventListener("mouseup", function () { if (rsz) { rsz = null; saveRect(); } });
-
-    /* 明暗主题：同步宿主属性；Spotify 已初始化时重建一次（仅换主题，曲目由其自身续播） */
-    function syncDark() {
-      var dark = document.body.classList.contains("hope-ui-dark");
-      if (dark) host.setAttribute("data-dark", "");
-      else host.removeAttribute("data-dark");
     }
-    syncDark();
-    var mo = new MutationObserver(syncDark);
-    mo.observe(document.body, { attributes: true, attributeFilter: ["class"] });
   }
 
   if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", init);