@jet-w/astro-blog 0.1.0

package/templates/default/public/images/avatar.svg

@@ -0,0 +1,142 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="200.000000pt" height="200.000000pt" viewBox="0 0 200.000000 200.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.10, written by Peter Selinger 2001-2011
+</metadata>
+<g transform="translate(0.000000,200.000000) scale(0.100000,-0.100000)"
+fill="#d08a03" stroke="none">
+<path d="M905 1780 c-87 -22 -160 -75 -187 -137 -17 -39 -19 -57 -13 -121 8
+-89 19 -121 45 -139 11 -8 20 -24 20 -36 -1 -22 -1 -22 -15 -3 -15 19 -15 19
+-15 -1 0 -12 8 -24 19 -28 13 -4 17 -12 14 -25 -3 -11 0 -20 6 -20 6 0 11 -13
+11 -30 0 -23 -4 -30 -20 -30 -14 0 -29 20 -56 76 -31 66 -35 79 -25 101 13 29
+9 40 -7 20 -14 -17 -26 -101 -13 -93 5 3 12 -1 15 -10 9 -23 8 -26 -6 -18 -7
+4 -2 -7 11 -24 12 -18 27 -32 33 -32 5 0 8 -7 4 -15 -3 -8 -2 -14 2 -14 18 4
+71 -14 75 -25 2 -6 2 1 0 17 -5 30 20 39 31 11 4 -9 9 -14 13 -11 3 4 -9 36
+-27 73 -28 57 -32 73 -27 118 3 28 9 61 12 74 6 17 4 22 -6 20 -9 -2 -13 4
+-11 19 2 12 -2 24 -8 28 -6 4 -10 -8 -10 -32 0 -38 -14 -72 -25 -62 -3 4 -10
+42 -15 85 -8 71 -6 83 13 122 32 65 152 132 237 132 37 0 172 -59 185 -81 6
+-9 3 -10 -10 -6 -9 4 -24 2 -31 -4 -9 -7 -14 -7 -14 -1 0 16 -34 20 -48 6 -7
+-7 -12 -17 -12 -23 0 -5 -7 -12 -16 -15 -11 -4 -18 1 -21 14 -4 13 -9 17 -17
+12 -6 -5 -26 -10 -44 -10 -17 0 -39 -8 -47 -16 -9 -8 -22 -13 -29 -10 -8 3
+-31 -4 -52 -15 -21 -12 -35 -21 -31 -21 5 0 1 -7 -7 -16 -9 -8 -16 -21 -16
+-28 0 -20 29 -15 36 6 7 23 29 35 84 43 25 4 57 14 73 23 24 15 29 15 37 2 13
+-22 64 -1 68 28 4 28 15 28 27 0 6 -12 24 -26 40 -30 17 -4 43 -18 59 -31 24
+-20 30 -33 34 -80 7 -82 26 -86 20 -5 -5 80 -52 184 -101 220 -60 46 -166 67
+-242 48z"/>
+<path d="M1145 1464 c-48 -23 -67 -46 -57 -72 3 -8 12 -5 30 13 24 25 41 31
+90 37 24 3 24 3 5 25 l-19 21 -49 -24z"/>
+<path d="M881 1435 c-30 -29 -24 -39 13 -25 42 16 114 13 118 -5 2 -9 8 -11
+16 -6 15 9 7 37 -14 45 -7 3 -35 8 -61 11 -42 4 -51 2 -72 -20z"/>
+<path d="M1170 1402 c-55 -5 -60 -21 -6 -20 25 0 49 4 51 9 8 11 -6 15 -45 11z"/>
+<path d="M1249 1405 c-1 -6 -1 -33 0 -60 2 -54 -22 -174 -37 -184 -4 -3 -14
+-22 -22 -41 -8 -19 -18 -39 -22 -45 -5 -5 -15 -19 -22 -29 -10 -15 -27 -20
+-79 -22 -58 -2 -68 0 -88 22 -12 13 -31 24 -42 24 -10 0 -28 11 -38 25 -11 13
+-26 22 -33 19 -9 -3 -13 1 -13 12 1 9 -4 19 -11 21 -7 3 -12 -1 -11 -8 2 -8
+-7 -32 -18 -55 -17 -32 -33 -45 -71 -61 -27 -11 -108 -49 -179 -84 -144 -70
+-140 -67 -178 -192 -19 -61 -18 -104 5 -332 11 -111 44 -263 80 -365 22 -65
+25 -48 5 30 -46 180 -64 264 -70 324 -3 38 -7 71 -9 75 -2 3 -5 58 -7 121 -3
+115 10 192 37 215 6 6 14 22 18 38 6 24 10 26 34 21 21 -4 24 -3 12 5 -13 10
+-13 11 0 11 8 0 66 25 128 55 133 65 160 73 174 54 6 -10 7 -7 3 11 -6 23 -5
+24 7 5 14 -23 19 -85 6 -85 -4 0 -8 -4 -8 -10 0 -17 30 1 30 19 1 11 5 8 15
+-9 19 -33 18 -38 -2 -43 -11 -3 -7 -5 10 -6 18 -1 27 -6 27 -18 0 -10 7 -27
+15 -37 8 -11 15 -27 15 -35 0 -14 -2 -14 -11 -1 -7 11 -8 6 -3 -20 8 -44 13
+-52 26 -44 8 5 9 -8 6 -41 -3 -27 -2 -42 2 -34 6 9 16 -3 34 -42 l26 -54 -6
+40 c-10 68 -74 266 -110 344 -32 67 -55 161 -41 161 4 0 20 -13 37 -30 50 -49
+147 -110 175 -110 37 0 68 -18 61 -36 -3 -9 -1 -12 4 -9 6 3 10 1 10 -5 0 -14
+-82 -3 -91 12 -11 17 -39 -34 -39 -70 0 -18 7 -44 16 -57 14 -21 14 -37 6
+-107 -11 -101 -9 -192 5 -210 6 -7 13 -24 16 -38 3 -14 3 -7 1 15 -9 71 -8
+105 5 118 10 9 11 9 6 -4 -5 -13 2 -18 30 -23 19 -4 40 -4 45 -1 6 3 10 0 10
+-7 0 -10 3 -9 11 2 8 11 9 5 5 -25 -3 -25 -2 -35 3 -26 7 10 11 0 16 -35 17
+-125 24 -137 19 -34 -6 114 -27 258 -48 330 -13 45 -6 100 16 127 12 15 -13
+60 -38 70 -11 4 -8 13 15 42 15 20 35 49 43 65 l16 30 5 -30 c14 -67 6 -138
+-19 -176 -26 -41 -33 -66 -8 -30 18 26 34 29 32 5 -3 -42 2 -416 6 -412 3 3 8
+29 11 59 4 30 11 57 16 58 13 5 11 46 -3 61 -8 8 -9 15 -3 17 6 2 10 46 10
+102 0 78 -4 104 -19 126 -17 28 -17 28 3 21 19 -6 20 -4 12 17 -10 28 -3 78
+11 78 6 0 8 7 4 15 -3 9 0 15 10 15 8 0 13 -4 10 -9 -3 -5 1 -14 9 -21 13 -11
+14 -10 8 5 -5 15 -3 17 13 11 10 -5 37 -12 59 -17 63 -13 106 -27 121 -40 8
+-6 14 -8 14 -5 0 18 37 -17 55 -51 10 -21 28 -51 38 -66 18 -26 18 -29 3 -52
+-19 -28 -15 -32 8 -10 13 14 17 10 30 -36 9 -28 13 -55 10 -60 -2 -4 0 -16 5
+-26 12 -24 37 -107 33 -112 -2 -2 2 -7 8 -11 9 -6 8 -14 -3 -36 -14 -26 -15
+-27 -21 -7 -5 15 -18 23 -49 27 -74 11 -90 9 -109 -16 -14 -18 -18 -20 -18 -6
+0 9 5 29 11 45 6 15 12 58 14 94 2 62 1 65 -15 50 -12 -11 -14 -21 -8 -33 15
+-30 -2 -120 -32 -174 -16 -29 -26 -55 -22 -59 4 -3 -1 -3 -10 0 -12 5 -15 2
+-12 -12 3 -10 -3 -27 -14 -38 -10 -11 -16 -27 -14 -34 3 -8 0 -11 -6 -7 -5 3
+-13 -1 -16 -10 -4 -10 -2 -13 7 -9 6 4 1 -3 -13 -14 -14 -11 -29 -21 -35 -21
+-25 -1 -36 -17 -26 -41 l10 -24 0 28 c1 24 5 27 34 27 35 0 55 24 94 110 22
+48 97 130 120 130 23 0 14 -24 -18 -53 -18 -15 -29 -30 -26 -33 5 -5 28 11 61
+42 24 23 63 44 69 37 14 -14 6 -42 -13 -48 -32 -10 -130 -109 -130 -131 0 -15
+5 -12 20 12 21 33 131 124 149 124 27 0 8 -41 -31 -69 -47 -32 -107 -91 -93
+-91 5 0 30 18 56 40 26 22 52 40 58 40 19 0 11 -24 -17 -56 -23 -28 -37 -34
+-102 -43 -41 -7 -97 -15 -125 -20 l-50 -8 55 -7 c70 -9 241 21 247 44 4 13 3
+13 -6 0 -9 -13 -11 -13 -11 1 0 9 7 22 15 29 8 7 15 23 15 35 0 13 8 42 19 65
+l19 42 13 -51 c7 -28 16 -51 20 -51 5 0 7 -16 5 -36 -2 -25 3 -39 14 -47 17
+-10 16 -47 0 -47 -5 0 -8 -20 -8 -45 0 -25 -5 -51 -10 -58 -5 -7 -12 -23 -14
+-37 -3 -14 -9 -33 -13 -43 -4 -9 -3 -17 3 -17 14 0 42 79 49 139 3 28 9 51 13
+51 16 0 18 29 3 56 -8 16 -17 40 -19 54 -7 36 -45 162 -55 182 -5 10 -9 29 -9
+43 0 13 -8 39 -18 57 -10 18 -19 40 -19 48 -1 37 -57 208 -73 220 -4 3 -10 12
+-14 20 -14 30 -32 57 -46 71 -15 14 -155 59 -184 59 -27 0 -143 58 -149 74 -4
+10 5 32 22 57 48 65 74 240 41 273 -6 6 -10 6 -11 1z m-260 -386 c26 -16 42
+-19 75 -13 37 6 39 5 27 -10 -7 -9 -23 -16 -35 -16 -20 0 -131 60 -111 60 6 0
+25 -9 44 -21z m131 -138 c11 -1 11 -4 2 -13 -7 -7 -12 -20 -12 -30 0 -9 -8
+-22 -17 -27 -10 -6 -13 -11 -6 -11 6 0 11 -13 11 -28 -1 -15 4 -43 10 -62 6
+-19 10 -60 10 -91 0 -55 -1 -56 -30 -57 -20 0 -28 3 -25 12 3 7 -4 18 -14 25
+-11 6 -17 17 -13 22 8 13 16 78 17 132 1 20 6 37 12 38 5 0 0 4 -12 9 -14 6
+-23 18 -23 30 0 12 -4 18 -10 15 -5 -3 -10 -1 -10 4 0 6 8 11 18 12 10 0 12 3
+4 6 -6 2 -10 8 -8 11 4 6 20 7 96 3z"/>
+<path d="M890 1370 c-22 -6 -23 -8 -7 -15 10 -4 35 -3 54 3 19 6 41 8 49 5 8
+-3 14 0 14 6 0 12 -71 13 -110 1z"/>
+<path d="M1010 1259 c0 -32 19 -44 65 -43 52 2 76 17 58 35 -7 7 -17 8 -25 3
+-24 -15 -78 -14 -78 2 0 8 -4 14 -10 14 -5 0 -10 -5 -10 -11z"/>
+<path d="M1105 1175 c-5 -1 -36 -10 -67 -20 -32 -9 -58 -21 -58 -25 0 -5 30 0
+66 10 37 11 71 17 75 14 4 -2 20 -2 34 2 20 5 23 9 13 15 -13 9 -43 10 -63 4z"/>
+<path d="M1095 1123 c-11 -3 -29 -12 -40 -19 -19 -13 -19 -14 6 -14 28 0 79
+21 79 33 0 8 -13 8 -45 0z"/>
+<path d="M1351 903 c8 -10 18 -21 22 -24 4 -3 21 -32 38 -65 19 -40 29 -52 29
+-36 0 12 -4 22 -10 22 -5 0 -10 7 -10 15 0 18 -60 105 -73 105 -5 0 -3 -8 4
+-17z"/>
+<path d="M710 900 c0 -9 15 -21 33 -28 40 -14 47 -15 47 -3 0 5 -15 13 -32 16
+-18 4 -36 13 -40 19 -5 7 -8 6 -8 -4z"/>
+<path d="M920 884 c0 -4 11 -17 25 -30 15 -14 25 -18 25 -10 0 7 -8 20 -18 29
+-19 18 -32 22 -32 11z"/>
+<path d="M1462 810 c0 -56 14 -155 18 -120 3 27 2 39 -10 115 l-8 50 0 -45z"/>
+<path d="M697 817 c4 -7 11 -16 16 -22 4 -5 16 -26 26 -44 30 -58 44 -47 15
+12 -15 31 -36 58 -46 60 -12 3 -16 1 -11 -6z"/>
+<path d="M465 720 c6 -10 78 -50 90 -50 16 0 -11 22 -48 40 -47 23 -51 24 -42
+10z"/>
+<path d="M1568 710 c-20 -11 -40 -24 -43 -30 -10 -16 1 -12 42 16 60 40 60 45
+1 14z"/>
+<path d="M726 683 c-2 -10 -8 -29 -12 -43 -6 -22 -5 -23 10 -8 9 10 13 24 9
+34 -4 12 -3 15 5 10 7 -4 12 -1 12 8 0 22 -17 20 -24 -1z"/>
+<path d="M652 630 c-1 -33 2 -60 7 -60 4 0 9 27 10 60 1 33 -2 60 -7 60 -5 0
+-9 -27 -10 -60z"/>
+<path d="M780 684 c0 -12 31 -95 60 -159 12 -27 26 -61 30 -75 5 -16 9 -19 9
+-8 1 9 -20 68 -45 130 -46 113 -54 129 -54 112z"/>
+<path d="M470 666 c97 -38 121 -50 116 -62 -3 -8 0 -11 10 -7 7 3 14 8 14 12
+0 13 -125 71 -151 71 -21 -1 -19 -3 11 -14z"/>
+<path d="M1341 586 c-1 -28 -1 -28 47 -21 53 8 91 24 57 24 -11 0 -37 -3 -57
+-8 -33 -8 -37 -6 -41 13 -3 16 -5 14 -6 -8z"/>
+<path d="M600 580 c0 -5 6 -13 14 -17 17 -10 47 -69 39 -77 -4 -3 -2 -6 4 -6
+14 0 63 -111 63 -143 0 -14 4 -28 9 -32 5 -3 7 -18 4 -33 -7 -34 -7 -38 2 -88
+7 -39 6 -41 -21 -47 -33 -7 -99 -45 -91 -53 2 -3 20 4 38 15 19 12 51 21 72
+21 36 0 50 -13 25 -23 -9 -4 -8 -6 2 -6 9 -1 22 -7 28 -13 7 -7 20 -13 30 -13
+11 0 16 -7 14 -18 -3 -18 -2 -18 24 0 27 18 28 18 22 -5 -4 -15 -2 -22 5 -19
+7 3 11 10 9 16 -1 6 7 11 18 11 11 0 20 -7 20 -15 0 -12 4 -13 19 -5 28 14 31
+13 31 -12 0 -17 3 -19 12 -10 14 14 58 16 58 4 0 -12 32 -11 48 1 6 5 12 18
+12 29 0 10 4 16 10 13 5 -3 10 4 10 17 -1 13 -1 56 0 96 0 41 -3 78 -6 84 -10
+15 18 28 45 21 20 -5 23 -3 18 11 -4 10 -7 19 -7 21 0 2 -16 -3 -35 -11 -30
+-12 -34 -12 -29 1 5 11 2 13 -12 8 -13 -5 -15 -3 -9 7 6 10 4 12 -7 7 -9 -3
+-20 -1 -26 5 -9 9 -47 -5 -62 -23 -11 -13 -60 -19 -60 -8 0 8 -4 8 -12 2 -21
+-16 -61 -24 -49 -10 7 9 -5 13 -46 15 -86 5 -103 15 -103 60 0 22 -11 59 -24
+85 -14 25 -28 62 -32 82 -5 29 -9 33 -20 24 -11 -9 -14 -9 -14 0 0 13 -24 41
+-34 41 -3 0 -6 -4 -6 -10z m500 -427 c0 -137 0 -136 -66 -108 -40 17 -189 46
+-218 42 -14 -2 -21 9 -32 53 -8 30 -21 68 -29 84 -8 16 -13 31 -11 33 2 3 63
+1 136 -3 l132 -7 -6 -41 c-4 -23 -11 -42 -15 -44 -5 -2 -6 -13 -3 -25 4 -17 8
+-12 19 28 7 28 13 68 13 91 l0 41 40 -10 40 -11 0 -123z"/>
+<path d="M525 461 l-40 -7 34 -5 c19 -3 52 0 75 7 l41 13 -35 -1 c-19 -1 -53
+-4 -75 -7z"/>
+</g>
+</svg>

package/templates/default/public/js/mermaid-container.js

@@ -0,0 +1,402 @@
+// 简化的 Mermaid 容器渲染脚本
+console.log('🎯 Mermaid Container Script loaded');
+
+// UTF-8 安全的 base64 解码函数
+function base64ToUtf8(base64) {
+  try {
+    // 使用 TextDecoder 处理 UTF-8 字符
+    const binaryString = atob(base64);
+    const bytes = new Uint8Array(binaryString.length);
+    for (let i = 0; i < binaryString.length; i++) {
+      bytes[i] = binaryString.charCodeAt(i);
+    }
+    const decoder = new TextDecoder('utf-8');
+    return decoder.decode(bytes);
+  } catch (error) {
+    console.error('Base64 解码失败:', error);
+    // 回退到原始方法
+    return atob(base64);
+  }
+}
+
+// 创建全屏预览模态框
+function createFullscreenModal() {
+  // 如果已存在则返回
+  if (document.getElementById('mermaid-fullscreen-modal')) {
+    return document.getElementById('mermaid-fullscreen-modal');
+  }
+
+  const modal = document.createElement('div');
+  modal.id = 'mermaid-fullscreen-modal';
+  modal.className = 'mermaid-fullscreen-modal';
+  modal.innerHTML = `
+    <div class="mermaid-fullscreen-backdrop"></div>
+    <div class="mermaid-fullscreen-container">
+      <div class="mermaid-fullscreen-header">
+        <span class="mermaid-fullscreen-title">Mermaid 图表预览</span>
+        <div class="mermaid-fullscreen-controls">
+          <button class="mermaid-zoom-btn" data-action="zoom-out" title="缩小">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <circle cx="11" cy="11" r="8"/>
+              <line x1="21" y1="21" x2="16.65" y2="16.65"/>
+              <line x1="8" y1="11" x2="14" y2="11"/>
+            </svg>
+          </button>
+          <span class="mermaid-zoom-level">100%</span>
+          <button class="mermaid-zoom-btn" data-action="zoom-in" title="放大">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <circle cx="11" cy="11" r="8"/>
+              <line x1="21" y1="21" x2="16.65" y2="16.65"/>
+              <line x1="11" y1="8" x2="11" y2="14"/>
+              <line x1="8" y1="11" x2="14" y2="11"/>
+            </svg>
+          </button>
+          <button class="mermaid-zoom-btn" data-action="zoom-fit" title="适配屏幕">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <rect x="3" y="3" width="18" height="18" rx="2"/>
+              <path d="M9 3v18M15 3v18M3 9h18M3 15h18"/>
+            </svg>
+          </button>
+          <button class="mermaid-zoom-btn" data-action="zoom-reset" title="重置为100%">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/>
+              <path d="M3 3v5h5"/>
+            </svg>
+          </button>
+          <button class="mermaid-close-btn" title="关闭 (Esc)">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <line x1="18" y1="6" x2="6" y2="18"/>
+              <line x1="6" y1="6" x2="18" y2="18"/>
+            </svg>
+          </button>
+        </div>
+      </div>
+      <div class="mermaid-fullscreen-content">
+        <div class="mermaid-fullscreen-svg-wrapper"></div>
+      </div>
+    </div>
+  `;
+
+  document.body.appendChild(modal);
+
+  // 绑定事件
+  let currentZoom = 1;
+  const zoomStep = 0.25;
+  const minZoom = 0.25;
+  const maxZoom = 4;
+
+  // 拖动相关状态
+  let isDragging = false;
+  let startX = 0;
+  let startY = 0;
+  let translateX = 0;
+  let translateY = 0;
+
+  const backdrop = modal.querySelector('.mermaid-fullscreen-backdrop');
+  const closeBtn = modal.querySelector('.mermaid-close-btn');
+  const zoomLevelSpan = modal.querySelector('.mermaid-zoom-level');
+  const svgWrapper = modal.querySelector('.mermaid-fullscreen-svg-wrapper');
+  const contentArea = modal.querySelector('.mermaid-fullscreen-content');
+
+  function updateTransform() {
+    zoomLevelSpan.textContent = Math.round(currentZoom * 100) + '%';
+    svgWrapper.style.transform = `translate(${translateX}px, ${translateY}px) scale(${currentZoom})`;
+  }
+
+  function resetPosition() {
+    translateX = 0;
+    translateY = 0;
+  }
+
+  function closeModal() {
+    modal.classList.remove('active');
+    document.body.style.overflow = '';
+    currentZoom = 1;
+    resetPosition();
+    updateTransform();
+    isDragging = false;
+  }
+
+  backdrop.addEventListener('click', closeModal);
+  closeBtn.addEventListener('click', closeModal);
+
+  // 鼠标拖动事件
+  svgWrapper.addEventListener('mousedown', (e) => {
+    if (e.button !== 0) return; // 只响应左键
+    isDragging = true;
+    startX = e.clientX - translateX;
+    startY = e.clientY - translateY;
+    svgWrapper.style.cursor = 'grabbing';
+    e.preventDefault();
+  });
+
+  document.addEventListener('mousemove', (e) => {
+    if (!isDragging || !modal.classList.contains('active')) return;
+    translateX = e.clientX - startX;
+    translateY = e.clientY - startY;
+    updateTransform();
+  });
+
+  document.addEventListener('mouseup', () => {
+    if (isDragging) {
+      isDragging = false;
+      svgWrapper.style.cursor = 'grab';
+    }
+  });
+
+  // 触摸拖动支持（移动设备）
+  let touchStartX = 0;
+  let touchStartY = 0;
+
+  svgWrapper.addEventListener('touchstart', (e) => {
+    if (e.touches.length === 1) {
+      isDragging = true;
+      touchStartX = e.touches[0].clientX - translateX;
+      touchStartY = e.touches[0].clientY - translateY;
+    }
+  }, { passive: true });
+
+  svgWrapper.addEventListener('touchmove', (e) => {
+    if (!isDragging || e.touches.length !== 1) return;
+    translateX = e.touches[0].clientX - touchStartX;
+    translateY = e.touches[0].clientY - touchStartY;
+    updateTransform();
+  }, { passive: true });
+
+  svgWrapper.addEventListener('touchend', () => {
+    isDragging = false;
+  });
+
+  // 计算适配屏幕的缩放比例
+  function calculateFitScale() {
+    const svg = svgWrapper.querySelector('svg');
+    if (!svg) return 1;
+
+    // 先重置变换以获取原始尺寸
+    const originalTransform = svgWrapper.style.transform;
+    svgWrapper.style.transform = 'translate(0px, 0px) scale(1)';
+
+    const svgRect = svg.getBoundingClientRect();
+    const contentRect = contentArea.getBoundingClientRect();
+
+    // 恢复变换
+    svgWrapper.style.transform = originalTransform;
+
+    const availableWidth = contentRect.width - 80;
+    const availableHeight = contentRect.height - 80;
+
+    const scaleX = availableWidth / svgRect.width;
+    const scaleY = availableHeight / svgRect.height;
+    return Math.min(scaleX, scaleY, 3); // 最大不超过 300%
+  }
+
+  modal.querySelectorAll('.mermaid-zoom-btn').forEach(btn => {
+    btn.addEventListener('click', (e) => {
+      const action = btn.dataset.action;
+      if (action === 'zoom-in' && currentZoom < maxZoom) {
+        currentZoom = Math.min(currentZoom + zoomStep, maxZoom);
+      } else if (action === 'zoom-out' && currentZoom > minZoom) {
+        currentZoom = Math.max(currentZoom - zoomStep, minZoom);
+      } else if (action === 'zoom-reset') {
+        currentZoom = 1;
+        resetPosition();
+      } else if (action === 'zoom-fit') {
+        currentZoom = calculateFitScale();
+        resetPosition();
+      }
+      updateTransform();
+    });
+  });
+
+  // 键盘事件
+  document.addEventListener('keydown', (e) => {
+    if (!modal.classList.contains('active')) return;
+
+    if (e.key === 'Escape') {
+      closeModal();
+    } else if (e.key === '+' || e.key === '=') {
+      if (currentZoom < maxZoom) {
+        currentZoom = Math.min(currentZoom + zoomStep, maxZoom);
+        updateTransform();
+      }
+    } else if (e.key === '-') {
+      if (currentZoom > minZoom) {
+        currentZoom = Math.max(currentZoom - zoomStep, minZoom);
+        updateTransform();
+      }
+    } else if (e.key === '0') {
+      currentZoom = 1;
+      resetPosition();
+      updateTransform();
+    }
+  });
+
+  // 鼠标滚轮缩放
+  modal.querySelector('.mermaid-fullscreen-content').addEventListener('wheel', (e) => {
+    if (!modal.classList.contains('active')) return;
+    e.preventDefault();
+
+    if (e.deltaY < 0 && currentZoom < maxZoom) {
+      currentZoom = Math.min(currentZoom + zoomStep * 0.5, maxZoom);
+    } else if (e.deltaY > 0 && currentZoom > minZoom) {
+      currentZoom = Math.max(currentZoom - zoomStep * 0.5, minZoom);
+    }
+    updateTransform();
+  }, { passive: false });
+
+  // 暴露适配屏幕的方法供外部调用
+  modal._fitToScreen = function() {
+    currentZoom = calculateFitScale();
+    resetPosition();
+    updateTransform();
+  };
+
+  return modal;
+}
+
+// 打开全屏预览
+function openFullscreen(svgContent) {
+  const modal = createFullscreenModal();
+  const svgWrapper = modal.querySelector('.mermaid-fullscreen-svg-wrapper');
+
+  svgWrapper.innerHTML = svgContent;
+  svgWrapper.style.transform = 'translate(0px, 0px) scale(1)';
+  svgWrapper.style.cursor = 'grab';
+
+  modal.classList.add('active');
+  document.body.style.overflow = 'hidden';
+
+  // 等待 DOM 渲染完成后自动适配屏幕
+  requestAnimationFrame(() => {
+    if (modal._fitToScreen) {
+      modal._fitToScreen();
+    }
+  });
+}
+
+// 创建全屏按钮
+function createFullscreenButton() {
+  const btn = document.createElement('button');
+  btn.className = 'mermaid-fullscreen-btn';
+  btn.title = '全屏预览';
+  btn.innerHTML = `
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>
+    </svg>
+  `;
+  return btn;
+}
+
+function renderMermaidContainers() {
+  console.log('🚀 开始检查 mermaid 容器');
+
+  // 查找所有新格式的mermaid容器
+  const mermaidContainers = document.querySelectorAll('.mermaid-container[data-mermaid-source]');
+  console.log('🔍 找到 ' + mermaidContainers.length + ' 个mermaid容器');
+
+  if (mermaidContainers.length === 0) {
+    console.log('❌ 没有找到mermaid容器');
+    return;
+  }
+
+  // 动态加载mermaid库
+  const script = document.createElement('script');
+  script.src = 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js';
+  script.onload = function() {
+    console.log('✅ Mermaid库加载完成');
+
+    // 初始化mermaid，支持中文字符
+    window.mermaid.initialize({
+      startOnLoad: false,
+      theme: 'default',
+      securityLevel: 'loose',
+      fontFamily: '"Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif',
+      flowchart: {
+        useMaxWidth: true,
+        htmlLabels: true,
+        curve: 'basis'
+      }
+    });
+
+    // 处理每个容器
+    mermaidContainers.forEach(async function(container, index) {
+      try {
+        const base64Code = container.getAttribute('data-mermaid-source');
+        const id = container.getAttribute('data-id') || ('mermaid-' + index);
+
+        console.log('🎨 处理第' + (index+1) + '个容器, ID: ' + id);
+
+        // UTF-8 安全的 base64 解码
+        const mermaidCode = base64ToUtf8(base64Code);
+        console.log('📝 Mermaid代码: ' + mermaidCode.slice(0, 50) + '...');
+
+        // 渲染mermaid图表
+        const result = await window.mermaid.render(id, mermaidCode);
+
+        // 创建渲染后的容器
+        const renderedDiv = document.createElement('div');
+        renderedDiv.className = 'mermaid-rendered';
+        renderedDiv.style.cssText = [
+          'margin: 1.5rem 0',
+          'padding: 1rem',
+          'border: 1px solid #e2e8f0',
+          'border-radius: 0.5rem',
+          'background: white',
+          'overflow-x: auto',
+          'text-align: center',
+          'position: relative'
+        ].join('; ');
+        renderedDiv.innerHTML = result.svg;
+
+        // 添加全屏按钮
+        const fullscreenBtn = createFullscreenButton();
+        fullscreenBtn.addEventListener('click', () => {
+          openFullscreen(result.svg);
+        });
+        renderedDiv.appendChild(fullscreenBtn);
+
+        // 替换加载提示
+        const loadingDiv = container.querySelector('.mermaid-loading');
+        if (loadingDiv) {
+          container.replaceChild(renderedDiv, loadingDiv);
+        } else {
+          container.appendChild(renderedDiv);
+        }
+
+        console.log('✨ 第' + (index+1) + '个图表渲染成功');
+
+      } catch (error) {
+        console.error('❌ 渲染第' + (index+1) + '个图表失败:', error);
+
+        // 显示错误信息
+        const errorDiv = document.createElement('div');
+        errorDiv.style.cssText = 'color: red; padding: 1rem; border: 1px solid red; margin: 1rem 0; background: #fee;';
+        errorDiv.innerHTML = '<strong>Mermaid渲染错误:</strong> ' + error.message;
+
+        const loadingDiv = container.querySelector('.mermaid-loading');
+        if (loadingDiv) {
+          container.replaceChild(errorDiv, loadingDiv);
+        }
+
+        // 显示fallback代码块
+        const fallback = container.querySelector('.mermaid-fallback');
+        if (fallback) {
+          fallback.style.display = 'block';
+        }
+      }
+    });
+  };
+
+  script.onerror = function() {
+    console.error('❌ Mermaid库加载失败');
+  };
+
+  document.head.appendChild(script);
+}
+
+// 启动渲染
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', renderMermaidContainers);
+} else {
+  renderMermaidContainers();
+}

package/templates/default/public/js/mermaid-init.js

@@ -0,0 +1,131 @@
+import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+
+mermaid.initialize({
+  startOnLoad: false,
+  theme: 'default',
+  securityLevel: 'loose',
+  fontFamily: 'ui-sans-serif, system-ui, sans-serif'
+});
+
+async function initMermaid() {
+  console.log('🎯 Mermaid init: 开始查找mermaid代码块');
+
+  // Handle plugin-generated mermaid-wrapper elements (base64 encoded)
+  const wrappers = document.querySelectorAll('.mermaid-wrapper');
+  console.log(`🎯 找到 ${wrappers.length} 个 mermaid-wrapper`);
+
+  for (const wrapper of wrappers) {
+    try {
+      const base64Data = wrapper.getAttribute('data-mermaid');
+      const mermaidCode = atob(base64Data);
+      const id = `mermaid-${Math.random().toString(36).substr(2, 9)}`;
+      const { svg } = await mermaid.render(id, mermaidCode);
+      wrapper.innerHTML = `<div class="mermaid-container">${svg}</div>`;
+      console.log('✅ 成功渲染mermaid-wrapper图表');
+    } catch (error) {
+      console.error('❌ Mermaid渲染错误:', error);
+    }
+  }
+
+  // Handle div.mermaid-code elements (plain text content)
+  const mermaidDivs = document.querySelectorAll('div.mermaid-code');
+  console.log(`🎯 找到 ${mermaidDivs.length} 个 mermaid-code divs`);
+
+  for (let i = 0; i < mermaidDivs.length; i++) {
+    const mermaidDiv = mermaidDivs[i];
+    try {
+      const mermaidCode = mermaidDiv.textContent.trim();
+      console.log(`🎯 处理第${i+1}个mermaid-code div:`, mermaidCode.substring(0, 50));
+
+      const id = `mermaid-div-${i}`;
+      const { svg } = await mermaid.render(id, mermaidCode);
+
+      // Create new container with proper styling
+      const container = document.createElement('div');
+      container.className = 'mermaid-container my-6 p-4 bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700';
+      container.innerHTML = svg;
+
+      // Replace the mermaid-code div
+      mermaidDiv.parentNode.replaceChild(container, mermaidDiv);
+      console.log('✅ 成功替换并渲染mermaid div图表');
+    } catch (error) {
+      console.error('❌ Mermaid div渲染错误:', error);
+    }
+  }
+
+  // Handle text and plain code blocks that contain mermaid content (marked with %%mermaid)
+  const textBlocks = document.querySelectorAll('pre code[data-language="text"], pre code.language-text, pre code:not([data-language]):not([class*="language-"])');
+  console.log(`🎯 找到 ${textBlocks.length} 个 text/plain代码块`);
+
+  for (let i = 0; i < textBlocks.length; i++) {
+    const codeBlock = textBlocks[i];
+    const content = codeBlock.textContent.trim();
+
+    if (content.startsWith('%%mermaid')) {
+      try {
+        // Remove the %%mermaid marker and get the actual mermaid code
+        const mermaidCode = content.substring('%%mermaid'.length).trim();
+        console.log(`🎯 处理第${i+1}个mermaid文本块:`, mermaidCode.substring(0, 50));
+
+        const id = `mermaid-text-${i}`;
+        const { svg } = await mermaid.render(id, mermaidCode);
+
+        const container = document.createElement('div');
+        container.className = 'mermaid-container my-6 p-4 bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700';
+        container.innerHTML = svg;
+
+        const preElement = codeBlock.closest('pre');
+        if (preElement) {
+          preElement.parentNode.replaceChild(container, preElement);
+          console.log('✅ 成功替换并渲染mermaid文本图表');
+        }
+      } catch (error) {
+        console.error('❌ Mermaid文本渲染错误:', error);
+      }
+    }
+  }
+
+  // Handle regular mermaid code blocks directly (including auto-detected ones)
+  const codeBlocks = document.querySelectorAll('pre code[data-language="mermaid"], pre code.language-mermaid, code[class*="language-mermaid"]');
+  console.log(`🎯 找到 ${codeBlocks.length} 个 mermaid代码块`);
+
+  for (let i = 0; i < codeBlocks.length; i++) {
+    const codeBlock = codeBlocks[i];
+    try {
+      let mermaidCode = codeBlock.textContent.trim();
+      console.log(`🎯 处理第${i+1}个代码块:`, mermaidCode.substring(0, 50));
+
+      // Check if this was originally a %%mermaid block and remove the marker
+      if (mermaidCode.startsWith('%%mermaid')) {
+        mermaidCode = mermaidCode.substring('%%mermaid'.length).trim();
+        console.log('🎯 检测到%%mermaid标记，移除后的代码:', mermaidCode.substring(0, 50));
+      }
+
+      const id = `mermaid-direct-${i}`;
+      const { svg } = await mermaid.render(id, mermaidCode);
+
+      const container = document.createElement('div');
+      container.className = 'mermaid-container my-6 p-4 bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700';
+      container.innerHTML = svg;
+
+      const preElement = codeBlock.closest('pre');
+      if (preElement) {
+        preElement.parentNode.replaceChild(container, preElement);
+        console.log('✅ 成功替换并渲染mermaid图表');
+      }
+    } catch (error) {
+      console.error('❌ Mermaid直接渲染错误:', error);
+    }
+  }
+
+  console.log('🎯 Mermaid初始化完成');
+}
+
+// 确保在页面加载后执行
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', () => {
+    setTimeout(initMermaid, 100);
+  });
+} else {
+  setTimeout(initMermaid, 100);
+}