feat: 补齐营养边缘服务原型

_templates/md-viewer.html

@@ -6,6 +6,7 @@
 <base href="../">
 <title>文档预览</title>
 <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
 <style>
 :root {
   --primary: #1677FF;
@@ -50,6 +51,9 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica
 .content hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; }
 .content img { max-width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--border); margin: 8px 0; cursor: pointer; transition: opacity .15s; }
 .content img:hover { opacity: .85; }
+.content .mermaid { margin: 16px 0; padding: 16px; background: #fff; border: 1px solid var(--border); border-radius: 8px; overflow-x: auto; text-align: center; }
+.content .mermaid svg { max-width: 100%; height: auto; }
+.content .mermaid-error { color: #ff4d4f; text-align: left; white-space: pre-wrap; }
 
 /* Lightbox 图片放大遮罩 */
 .lightbox { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.75); align-items: center; justify-content: center; cursor: zoom-out; }
@@ -75,6 +79,34 @@ const params = new URLSearchParams(location.search);
 const filePath = params.get('file');
 const title = params.get('title');
 
+function renderMermaidBlocks(root) {
+  if (typeof mermaid === 'undefined') return;
+  mermaid.initialize({
+    startOnLoad: false,
+    theme: 'default',
+    securityLevel: 'strict',
+    fontFamily: '-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Segoe UI",sans-serif'
+  });
+  root.querySelectorAll('pre code.language-mermaid, pre code.mermaid').forEach(code => {
+    const pre = code.closest('pre');
+    if (!pre) return;
+    const diagram = document.createElement('div');
+    diagram.className = 'mermaid';
+    diagram.textContent = code.textContent.trim();
+    pre.replaceWith(diagram);
+  });
+  const nodes = root.querySelectorAll('.mermaid');
+  if (!nodes.length) return;
+  mermaid.run({ nodes }).catch(err => {
+    nodes.forEach(node => {
+      if (!node.querySelector('svg')) {
+        node.classList.add('mermaid-error');
+        node.textContent = 'Mermaid 图形渲染失败：' + (err && err.message ? err.message : err);
+      }
+    });
+  });
+}
+
 if (title) {
   document.getElementById('doc-title').textContent = title;
   document.title = title + ' - 文档预览';
@@ -121,6 +153,9 @@ if (filePath) {
           + '#main-content p{font-size:14px;line-height:1.8;margin:8px 0}'
           + '#main-content ul,#main-content ol{padding-left:20px;margin:8px 0;font-size:14px;line-height:1.8}'
           + '#main-content code{background:#f5f5f5;padding:2px 6px;border-radius:4px;font-size:13px}'
+          + '#main-content .mermaid{margin:16px 0;padding:16px;background:#fff;border:1px solid #e8ecf1;border-radius:8px;overflow-x:auto;text-align:center}'
+          + '#main-content .mermaid svg{max-width:100%;height:auto}'
+          + '#main-content .mermaid-error{color:#ff4d4f;text-align:left;white-space:pre-wrap}'
           + '#main-content blockquote{border-left:4px solid #1677FF;padding:8px 16px;margin:12px 0;background:#E6F7FF;border-radius:0 4px 4px 0}'
           + '#toc-container a.active{color:#1677FF;font-weight:600}'
           + '</style>';
@@ -136,13 +171,25 @@ if (filePath) {
           + 'links.forEach(function(a){a.classList.remove("active")});if(cur)cur.link.classList.add("active")}'
           + 'window.addEventListener("scroll",update);update()});'
           + '<\/script>';
+        /* iframe 内注入：将 mermaid 代码块转换为图形 */
+        const mermaidScript = '<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"><\/script>';
+        const diagramScript = '<script>'
+          + 'document.addEventListener("DOMContentLoaded",function(){'
+          + 'if(typeof mermaid==="undefined")return;'
+          + 'mermaid.initialize({startOnLoad:false,theme:"default",securityLevel:"strict",fontFamily:"-apple-system,BlinkMacSystemFont,\\"PingFang SC\\",\\"Helvetica Neue\\",\\"Segoe UI\\",sans-serif"});'
+          + 'document.querySelectorAll("pre code.language-mermaid,pre code.mermaid").forEach(function(code){'
+          + 'var pre=code.closest("pre");if(!pre)return;var div=document.createElement("div");div.className="mermaid";div.textContent=code.textContent.trim();pre.replaceWith(div)});'
+          + 'var nodes=document.querySelectorAll(".mermaid");if(!nodes.length)return;'
+          + 'mermaid.run({nodes:nodes}).catch(function(err){nodes.forEach(function(node){if(!node.querySelector("svg")){node.classList.add("mermaid-error");node.textContent="Mermaid 图形渲染失败："+(err&&err.message?err.message:err)}})})'
+          + '});'
+          + '<\/script>';
         /* 用 iframe 隔离渲染 */
         document.querySelector('.topbar').style.display = 'none';
         const wrap = document.getElementById('content');
         wrap.style.cssText = 'max-width:none;margin:0;padding:0;min-height:100vh';
         const iframe = document.createElement('iframe');
         iframe.style.cssText = 'width:100%;height:100vh;border:none';
-        iframe.srcdoc = '<!DOCTYPE html><html><head><meta charset="UTF-8">' + extraCss + '</head><body>' + processed + tocScript + '</body></html>';
+        iframe.srcdoc = '<!DOCTYPE html><html><head><meta charset="UTF-8">' + extraCss + mermaidScript + '</head><body>' + processed + tocScript + diagramScript + '</body></html>';
         wrap.innerHTML = '';
         wrap.appendChild(iframe);
       } else {
@@ -151,6 +198,7 @@ if (filePath) {
         const content = document.getElementById('content');
         if (typeof marked !== 'undefined') {
           content.innerHTML = marked.parse(md);
+          renderMermaidBlocks(content);
           /* 将图片相对路径补全为基于 Markdown 文件目录的路径 */
           content.querySelectorAll('img').forEach(img => {
             const src = img.getAttribute('src');