fix: Mermaid 放大改为匹配 article svg 选择器
Deploy Docs / deploy (push) Successful in 11s

This commit is contained in:
2026-08-24 03:22:25 +00:00
parent 6a26c8b499
commit 15e1be2f31
2 changed files with 15 additions and 18 deletions
+3 -2
View File
@@ -24,7 +24,8 @@
padding: 1.5rem; padding: 1.5rem;
} }
/* 让 Mermaid 容器看起来可点击 */ /* 让 Mermaid 区域看起来可点击 */
.mermaid { .mermaid,
.mermaid svg {
cursor: zoom-in; cursor: zoom-in;
} }
+12 -16
View File
@@ -1,14 +1,10 @@
// Mermaid 图表点击放大 — 事件委托方案 // Mermaid 图表点击放大 — 事件委托方案
;(function () { ;(function () {
// 创建 overlay function openZoom(svgEl) {
function openZoom(mermaidEl) { if (!svgEl) return;
var svg = mermaidEl.querySelector('svg');
if (!svg) return;
// 防止重复打开
if (document.querySelector('.mermaid-zoom-overlay')) return; if (document.querySelector('.mermaid-zoom-overlay')) return;
var clone = svg.cloneNode(true); var clone = svgEl.cloneNode(true);
clone.removeAttribute('width'); clone.removeAttribute('width');
clone.removeAttribute('height'); clone.removeAttribute('height');
clone.style.width = 'auto'; clone.style.width = 'auto';
@@ -39,18 +35,18 @@
}); });
} }
// 事件委托:点击时往上找 .mermaid // 事件委托:点击 article 内的 svg(Mermaid 渲染产出)
document.addEventListener('click', function (e) { document.addEventListener('click', function (e) {
var target = e.target.closest('.mermaid'); var svg = e.target.closest('article .mermaid svg, article .mermaid');
if (target) { if (svg) {
// 如果点击的是 .mermaid 容器本身,找里面的 svg
if (svg.tagName !== 'svg') {
svg = svg.querySelector('svg');
}
if (!svg) return;
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
openZoom(target); openZoom(svg);
} }
}); });
// 兼容 MkDocs Material instant navigation:
// 页面切换后 Mermaid 可能重新渲染,无需重新绑定(事件委托天然兼容)
// 但需要确保 .mermaid 的 cursor 样式对新渲染的图表也生效
// (CSS 全局生效,无需额外处理)
})(); })();