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
|
custom_checkbox: true
|
||||||
- pymdownx.tilde
|
- pymdownx.tilde
|
||||||
|
|
||||||
extra_css:
|
|
||||||
- css/mermaid-zoom.css
|
|
||||||
|
|
||||||
extra_javascript:
|
extra_javascript:
|
||||||
- https://unpkg.com/mermaid@10/dist/mermaid.min.js
|
- https://unpkg.com/mermaid@10/dist/mermaid.min.js
|
||||||
- js/mermaid-zoom.js
|
|
||||||
|
|
||||||
nav:
|
nav:
|
||||||
- 首页: index.md
|
- 首页: index.md
|
||||||
|
|||||||
Reference in New Issue
Block a user