user-help-docs/assets/javascripts/tabs-more.js

(function () {
  const KEEP = 9; // 显示前 9 个

  const qs = (s, r = document) => r.querySelector(s);
  const qsa = (s, r = document) => Array.from(r.querySelectorAll(s));

  function ensureMoreItem(list) {
    let more = qs(".md-tabs__item--more", list);
    if (!more) {
      more = document.createElement("li");
      more.className = "md-tabs__item md-tabs__item--more";
      more.innerHTML = `
        <button class="md-tabs__link md-tabs__more-link" type="button" aria-label="更多">
          <span class="md-tabs__more-triangle" aria-hidden="true"></span>
        </button>
      `;
    }
    return more;
  }

  // 全局浮层（挂 body，避免被 overflow 裁剪）
  function ensureGlobalPanel() {
    let panel = qs("#md-tabs-more-global-panel");
    if (panel) return panel;

    panel = document.createElement("div");
    panel.id = "md-tabs-more-global-panel";
    panel.style.position = "fixed";
    panel.style.display = "none";
    panel.style.zIndex = "99999";
    panel.style.minWidth = "160px";
    panel.style.maxWidth = "240px";
    panel.style.maxHeight = "60vh";
    panel.style.overflow = "auto";
    panel.style.padding = "6px";
    panel.style.borderRadius = "10px";
    panel.style.boxShadow = "0 10px 30px rgba(0,0,0,.18)";
    panel.style.border = "1px solid rgba(0,0,0,.12)";
    panel.style.background = "#fff";
    panel.style.fontSize = "16px";     // ✅ 下拉字体 16px
    panel.style.lineHeight = "1.4";
    panel.style.padding = "8px";
    document.body.appendChild(panel);
    return panel;
  }

  function setPanelTheme(panel) {
    const slate = document.documentElement.getAttribute("data-md-color-scheme") === "slate";
    panel.style.background = slate ? "#1e1e1e" : "#fff";
    panel.style.borderColor = slate ? "rgba(255,255,255,.12)" : "rgba(0,0,0,.12)";
  }

  function closePanel(panel) {
    panel.style.display = "none";
    panel.innerHTML = "";
  }
  
  function openPanel(panel, anchorEl) {
  const r = anchorEl.getBoundingClientRect();
  const margin = 6;

  // 1) 先把面板放到一个可测量状态（不可见但参与布局）
  panel.style.visibility = "hidden";
  panel.style.display = "block";

  // 2) 读真实宽度
  const panelWidth = panel.getBoundingClientRect().width;

  // 3) 按“右对齐”计算：面板右边缘 = 三角按钮右边缘
  let left = Math.round(r.right - panelWidth);
  let top = Math.round(r.bottom + margin);

  // 4) 边界保护（避免出屏）
  const minLeft = 8;
  const maxLeft = window.innerWidth - panelWidth - 8;
  left = Math.min(Math.max(left, minLeft), maxLeft);

  // 5) 设置最终位置并显示
  panel.style.left = `${left}px`;
  panel.style.top = `${top}px`;
  panel.style.visibility = "visible"; // 恢复可见
  panel.style.display = "block";
}

  function render() {
    const mdTabs = qs(".md-tabs");
    if (!mdTabs) return;

    const list = qs(".md-tabs__list", mdTabs);
    if (!list) return;

    // 真实 tabs（排除 more）
    const items = qsa(".md-tabs__item", list).filter(it => !it.classList.contains("md-tabs__item--more"));
    if (!items.length) return;

    // 1) 先恢复显示
    items.forEach(it => it.style.display = "");

    // 2) 插入 more 到第 9 个后面（固定位置）
    const more = ensureMoreItem(list);
    const insertBefore = items[KEEP] || null; // 原第10个（index=9）
    if (more.parentElement !== list) list.insertBefore(more, insertBefore);
    else list.insertBefore(more, insertBefore); // 重新定位（防止被 append 到末尾）

    // 3) 从第 10 个起隐藏
    const hidden = items.slice(KEEP);
    if (!hidden.length) {
      more.style.display = "none";
      return;
    }
    more.style.display = "";
    hidden.forEach(it => it.style.display = "none");

    // 4) 面板构建（挂到 body）
    const btn = qs(".md-tabs__more-link", more);
    const panel = ensureGlobalPanel();
    setPanelTheme(panel);

    // 防重复绑定
    if (!btn.dataset.bound) {
      btn.dataset.bound = "1";

      document.addEventListener("click", (e) => {
        const clickBtn = e.target.closest(".md-tabs__more-link");
        const insidePanel = e.target.closest("#md-tabs-more-global-panel");

        if (clickBtn) {
          e.preventDefault();
          e.stopPropagation();

          // 重建面板内容（保持顺序）
          panel.innerHTML = "";
          setPanelTheme(panel);

          const active = qs(".md-tabs__item--active", list);

          hidden.forEach(it => {
            const link = qs("a.md-tabs__link", it);
            if (!link) return;

            const a = document.createElement("a");
            a.href = link.href;
            a.textContent = link.textContent.trim();
            a.style.display = "block";
            a.style.padding = "8px 10px";
            a.style.borderRadius = "8px";
            a.style.textDecoration = "none";
            a.style.whiteSpace = "nowrap";
            a.style.color = "inherit";

            if (it === active) {
              a.style.color = "#0183FA";
              a.style.fontWeight = "600";
              a.style.background = "rgba(1,131,250,0.10)";
            } else {
              a.addEventListener("mouseenter", () => {
                a.style.color = "#0183FA";
                a.style.background = "rgba(1,131,250,0.08)";
              });
              a.addEventListener("mouseleave", () => {
                a.style.color = "inherit";
                a.style.background = "transparent";
              });
            }

            a.addEventListener("click", () => closePanel(panel));
            panel.appendChild(a);
          });

          // toggle
          if (panel.style.display === "block") closePanel(panel);
          else openPanel(panel, clickBtn);
          return;
        }

        if (insidePanel) return;

        closePanel(panel);
      }, true);

      document.addEventListener("keydown", (e) => {
        if (e.key === "Escape") closePanel(panel);
      });

      window.addEventListener("resize", () => closePanel(panel));
      window.addEventListener("scroll", () => closePanel(panel), true);
    }
  }

  function boot() { setTimeout(render, 0); }

  document.addEventListener("DOMContentLoaded", boot);
  if (window.document$ && typeof window.document$.subscribe === "function") {
    window.document$.subscribe(boot);
  }
})();