二〇二六年四月二十一日

1 files changed, 169 insertions, 0 deletions

diff --git a/themes/theme/source/js/mermaid-zoom.js b/themes/theme/source/js/mermaid-zoom.js
new file mode 100644
index 00000000..6b4f0e17
--- /dev/null
+++ b/themes/theme/source/js/mermaid-zoom.js
@@ -0,0 +1,169 @@
+// Mermaid 图表点击放大功能
+
+(function() {
+    'use strict';
+
+    // 等待 DOM 加载完成
+    function initMermaidZoom() {
+        const mermaidElements = document.querySelectorAll('.mermaid');
+        
+        if (mermaidElements.length === 0) return;
+
+        // 检测是否为移动端
+        const isMobile = window.innerWidth <= 688;
+
+        // 移动端：为 mermaid 元素添加提示样式
+        if (isMobile) {
+            mermaidElements.forEach(function(el) {
+                el.style.position = 'relative';
+                // 创建提示元素
+                const hint = document.createElement('span');
+                hint.textContent = '点击放大';
+                hint.style.cssText = 'position:absolute;bottom:4px;right:4px;font-size:10px;padding:2px 6px;background:rgba(0,0,0,0.5);color:#fff;border-radius:4px;pointer-events:none;';
+                el.appendChild(hint);
+            });
+        }
+
+        // 创建模态框
+        const modal = document.createElement('div');
+        modal.className = 'mermaid-modal';
+        modal.innerHTML = `
+            <button class="mermaid-close" aria-label="关闭">&times;</button>
+            <div class="mermaid-content"></div>
+        `;
+        document.body.appendChild(modal);
+
+        const closeBtn = modal.querySelector('.mermaid-close');
+        const content = modal.querySelector('.mermaid-content');
+
+        // 关闭模态框函数
+        function closeModal() {
+            modal.classList.remove('active');
+            document.body.style.overflow = '';
+        }
+
+        // 为每个 mermaid 图表添加点击事件
+        mermaidElements.forEach(function(el) {
+            el.addEventListener('click', function(e) {
+                // 等待 mermaid 渲染完成
+                const svg = el.querySelector('svg');
+                if (!svg) return;
+
+                // 复制 SVG 到模态框
+                content.innerHTML = '';
+                const clonedSvg = svg.cloneNode(true);
+                
+                // 获取原始 SVG 的尺寸
+                const originalWidth = svg.viewBox.baseVal.width || svg.width.baseVal.value || 800;
+                const originalHeight = svg.viewBox.baseVal.height || svg.height.baseVal.value || 600;
+                
+                // 检测是否为移动端
+                const isMobile = window.innerWidth <= 688;
+                
+                // 计算放大比例
+                let targetWidth;
+                if (isMobile) {
+                    // 移动端：适配屏幕宽度，留出边距
+                    targetWidth = window.innerWidth - 32; // 16px padding × 2
+                } else {
+                    // 桌面端：85% 视口宽度，最大 1600px
+                    targetWidth = Math.min(window.innerWidth * 0.85, 1600);
+                }
+                
+                const scale = targetWidth / originalWidth;
+                const newWidth = originalWidth * scale;
+                const newHeight = originalHeight * scale;
+                
+                // 设置放大后的尺寸
+                clonedSvg.setAttribute('width', newWidth + 'px');
+                clonedSvg.setAttribute('height', newHeight + 'px');
+                clonedSvg.style.width = newWidth + 'px';
+                clonedSvg.style.height = newHeight + 'px';
+                clonedSvg.style.maxWidth = 'none';
+                clonedSvg.style.maxHeight = 'none';
+                
+                // 确保 viewBox 存在
+                if (!clonedSvg.getAttribute('viewBox')) {
+                    clonedSvg.setAttribute('viewBox', '0 0 ' + originalWidth + ' ' + originalHeight);
+                }
+                
+                content.appendChild(clonedSvg);
+                
+                // 显示模态框
+                modal.classList.add('active');
+                document.body.style.overflow = 'hidden';
+                
+                // 移动端样式调整
+                if (isMobile) {
+                    content.style.maxWidth = '100vw';
+                    content.style.maxHeight = '100vh';
+                    content.style.padding = '12px';
+                    content.style.borderRadius = '0';
+                    modal.style.padding = '0';
+                } else {
+                    // 恢复桌面端样式
+                    content.style.maxWidth = '';
+                    content.style.maxHeight = '';
+                    content.style.padding = '';
+                    content.style.borderRadius = '';
+                    modal.style.padding = '';
+                }
+            });
+        });
+
+        // 关闭按钮事件
+        closeBtn.addEventListener('click', closeModal);
+
+        // 点击背景关闭
+        modal.addEventListener('click', function(e) {
+            if (e.target === modal) {
+                closeModal();
+            }
+        });
+
+        // ESC 键关闭
+        document.addEventListener('keydown', function(e) {
+            if (e.key === 'Escape' && modal.classList.contains('active')) {
+                closeModal();
+            }
+        });
+    }
+
+    // 等待 mermaid 渲染完成后再初始化
+    function waitForMermaid() {
+        const mermaidElements = document.querySelectorAll('.mermaid');
+        let renderedCount = 0;
+        
+        function checkRendered() {
+            let allRendered = true;
+            mermaidElements.forEach(function(el) {
+                if (!el.querySelector('svg')) {
+                    allRendered = false;
+                }
+            });
+            
+            if (allRendered) {
+                initMermaidZoom();
+            } else {
+                // 如果还没渲染完，继续等待
+                if (renderedCount < 50) { // 最多等待 5 秒
+                    renderedCount++;
+                    setTimeout(checkRendered, 100);
+                } else {
+                    // 超时，仍然初始化（可能有些图表渲染失败）
+                    initMermaidZoom();
+                }
+            }
+        }
+        
+        // 开始检查
+        setTimeout(checkRendered, 500);
+    }
+
+    // 页面加载完成后初始化
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', waitForMermaid);
+    } else {
+        waitForMermaid();
+    }
+})();