fix: Mermaid 放大改用事件委托方案

docs/js/mermaid-zoom.js

@@ -1,67 +1,56 @@
-document.addEventListener('DOMContentLoaded', function () {
+// Mermaid 图表点击放大 — 事件委托方案
-  // 等待 Mermaid 渲染完成（Mermaid 在 DOMContentLoaded 之后异步渲染）
+;(function () {
-  const observer = new MutationObserver(function () {
+  // 创建 overlay
-    const svgs = document.querySelectorAll('.mermaid svg');
+  function openZoom(mermaidEl) {
-    if (svgs.length > 0) {
+    var svg = mermaidEl.querySelector('svg');
-      observer.disconnect();
+    if (!svg) return;
-      initMermaidZoom();
+
+    // 防止重复打开
+    if (document.querySelector('.mermaid-zoom-overlay')) return;
+
+    var clone = svg.cloneNode(true);
+    clone.removeAttribute('width');
+    clone.removeAttribute('height');
+    clone.style.width = 'auto';
+    clone.style.height = 'auto';
+    clone.style.maxWidth = '95vw';
+    clone.style.maxHeight = '95vh';
+
+    var overlay = document.createElement('div');
+    overlay.className = 'mermaid-zoom-overlay';
+    overlay.appendChild(clone);
+
+    overlay.addEventListener('click', function () {
+      overlay.classList.remove('active');
+      setTimeout(function () { overlay.remove(); }, 200);
+    });
+
+    document.addEventListener('keydown', function handler(e) {
+      if (e.key === 'Escape') {
+        overlay.classList.remove('active');
+        setTimeout(function () { overlay.remove(); }, 200);
+        document.removeEventListener('keydown', handler);
+      }
+    });
+
+    document.body.appendChild(overlay);
+    requestAnimationFrame(function () {
+      overlay.classList.add('active');
+    });
+  }
+
+  // 事件委托：点击时往上找 .mermaid
+  document.addEventListener('click', function (e) {
+    var target = e.target.closest('.mermaid');
+    if (target) {
+      e.preventDefault();
+      e.stopPropagation();
+      openZoom(target);
     }
   });
 
-  observer.observe(document.body, { childList: true, subtree: true });
+  // 兼容 MkDocs Material instant navigation：
-
+  // 页面切换后 Mermaid 可能重新渲染，无需重新绑定（事件委托天然兼容）
-  // 也尝试立即初始化（以防 Mermaid 已经渲染完）
+  // 但需要确保 .mermaid 的 cursor 样式对新渲染的图表也生效
-  setTimeout(initMermaidZoom, 1000);
+  // （CSS 全局生效，无需额外处理）
-});
+})();
-
-function initMermaidZoom() {
-  // 避免重复绑定
-  if (document.querySelector('.mermaid-zoom-overlay')) return;
-
-  document.querySelectorAll('.mermaid').forEach(function (el) {
-    if (el.dataset.zoomBound) return;
-    el.dataset.zoomBound = 'true';
-
-    el.addEventListener('click', function () {
-      const svg = el.querySelector('svg');
-      if (!svg) return;
-
-      const clone = svg.cloneNode(true);
-      // 让克隆的 SVG 自适应放大
-      clone.removeAttribute('width');
-      clone.removeAttribute('height');
-      clone.style.width = 'auto';
-      clone.style.height = 'auto';
-      clone.style.maxWidth = '95vw';
-      clone.style.maxHeight = '95vh';
-
-      const overlay = document.createElement('div');
-      overlay.className = 'mermaid-zoom-overlay';
-      overlay.appendChild(clone);
-
-      // 点击 overlay 关闭
-      overlay.addEventListener('click', function (e) {
-        if (e.target === overlay || e.target.closest('svg')) {
-          overlay.classList.remove('active');
-          setTimeout(function () { overlay.remove(); }, 200);
-        }
-      });
-
-      // ESC 关闭
-      function onKey(e) {
-        if (e.key === 'Escape') {
-          overlay.classList.remove('active');
-          setTimeout(function () { overlay.remove(); }, 200);
-          document.removeEventListener('keydown', onKey);
-        }
-      }
-      document.addEventListener('keydown', onKey);
-
-      document.body.appendChild(overlay);
-      // 触发动画
-      requestAnimationFrame(function () {
-        overlay.classList.add('active');
-      });
-    });
-  });
-}