This commit is contained in:
@@ -1,31 +0,0 @@
|
||||
.mermaid-zoom-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9999;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: zoom-out;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.mermaid-zoom-overlay.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mermaid-zoom-overlay svg {
|
||||
max-width: 95vw;
|
||||
max-height: 95vh;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
/* 让 Mermaid 区域看起来可点击 */
|
||||
.mermaid,
|
||||
.mermaid svg {
|
||||
cursor: zoom-in;
|
||||
}
|
||||
@@ -1,96 +0,0 @@
|
||||
// Mermaid 渲染 + 点击放大
|
||||
;(function () {
|
||||
// 等待 Mermaid 库加载
|
||||
function waitForMermaid(cb, tries) {
|
||||
tries = tries || 0;
|
||||
if (typeof mermaid !== 'undefined') { cb(); return; }
|
||||
if (tries > 50) { console.error('[mermaid-zoom] mermaid lib not found'); return; }
|
||||
setTimeout(function () { waitForMermaid(cb, tries + 1); }, 200);
|
||||
}
|
||||
|
||||
waitForMermaid(function () {
|
||||
// 初始化 mermaid(如果还没初始化)
|
||||
mermaid.initialize({
|
||||
startOnLoad: false,
|
||||
theme: 'default',
|
||||
securityLevel: 'loose'
|
||||
});
|
||||
|
||||
// 找所有未渲染的 .mermaid div,逐一渲染
|
||||
var els = document.querySelectorAll('.mermaid');
|
||||
var queue = [];
|
||||
els.forEach(function (el, i) {
|
||||
var src = el.textContent.trim();
|
||||
if (!src || el.getAttribute('data-processed')) return;
|
||||
queue.push({ el: el, id: 'mermaid-svg-' + i, src: src });
|
||||
});
|
||||
|
||||
// 串行渲染,避免并发冲突
|
||||
function renderNext() {
|
||||
if (queue.length === 0) {
|
||||
// 全部渲染完,绑定点击
|
||||
bindClickZoom();
|
||||
return;
|
||||
}
|
||||
var item = queue.shift();
|
||||
mermaid.render(item.id, item.src).then(function (result) {
|
||||
item.el.innerHTML = result.svg;
|
||||
item.el.setAttribute('data-processed', 'true');
|
||||
renderNext();
|
||||
}).catch(function (err) {
|
||||
console.warn('[mermaid-zoom] render failed for', item.id, err);
|
||||
// 跳过失败的,继续渲染下一个
|
||||
item.el.innerHTML = '<p style="color:#c62828;padding:8px">图表渲染失败</p>';
|
||||
item.el.setAttribute('data-processed', 'true');
|
||||
renderNext();
|
||||
});
|
||||
}
|
||||
|
||||
renderNext();
|
||||
});
|
||||
|
||||
function bindClickZoom() {
|
||||
document.addEventListener('click', function (e) {
|
||||
var target = e.target.closest('.mermaid svg');
|
||||
if (!target) {
|
||||
// 也试 .mermaid 容器本身
|
||||
var m = e.target.closest('.mermaid');
|
||||
if (m) target = m.querySelector('svg');
|
||||
}
|
||||
if (!target) return;
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
var clone = target.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');
|
||||
});
|
||||
});
|
||||
}
|
||||
})();
|
||||
@@ -78,12 +78,8 @@ markdown_extensions:
|
||||
custom_checkbox: true
|
||||
- pymdownx.tilde
|
||||
|
||||
extra_css:
|
||||
- css/mermaid-zoom.css
|
||||
|
||||
extra_javascript:
|
||||
- https://unpkg.com/mermaid@10/dist/mermaid.min.js
|
||||
- js/mermaid-zoom.js
|
||||
|
||||
nav:
|
||||
- 首页: index.md
|
||||
|
||||
Reference in New Issue
Block a user