feat: replace ASCII architecture diagram with drawio SVG in gen2D deck

2026-05-30 22:10:23 +08:00
parent 19075592e5
commit 1a297e57a9
3 changed files with 258 additions and 25 deletions
@@ -0,0 +1,110 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 680" font-family="Microsoft YaHei, PingFang SC, Helvetica, Arial, sans-serif">
+  <defs>
+    <filter id="shadow" x="-2%" y="-2%" width="104%" height="104%">
+      <feDropShadow dx="2" dy="2" stdDeviation="3" flood-opacity="0.15"/>
+    </filter>
+    <marker id="arrow" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
+      <path d="M 0 0 L 10 5 L 0 10 z" fill="#6c8ebf"/>
+    </marker>
+    <marker id="arrow-gray" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
+      <path d="M 0 0 L 10 5 L 0 10 z" fill="#999"/>
+    </marker>
+    <marker id="arrow-red" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
+      <path d="M 0 0 L 10 5 L 0 10 z" fill="#b85450"/>
+    </marker>
+    <marker id="arrow-purple" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
+      <path d="M 0 0 L 10 5 L 0 10 z" fill="#9673a6"/>
+    </marker>
+  </defs>
+
+  <!-- Frontend 外框 -->
+  <rect x="30" y="20" width="940" height="130" rx="10" fill="#dae8fc" stroke="#6c8ebf" stroke-width="1.5" filter="url(#shadow)"/>
+  <text x="420" y="50" font-size="15" font-weight="bold" fill="#333">Frontend</text>
+  <text x="490" y="50" font-size="13" fill="#666">React + Vite + TypeScript</text>
+
+  <rect x="60" y="65" width="130" height="40" rx="6" fill="#fff2cc" stroke="#d6b656" stroke-width="1"/>
+  <text x="125" y="90" font-size="12" fill="#333" text-anchor="middle">项目画廊</text>
+
+  <rect x="210" y="65" width="130" height="40" rx="6" fill="#fff2cc" stroke="#d6b656" stroke-width="1"/>
+  <text x="275" y="90" font-size="12" fill="#333" text-anchor="middle">工作台</text>
+
+  <rect x="360" y="65" width="130" height="40" rx="6" fill="#fff2cc" stroke="#d6b656" stroke-width="1"/>
+  <text x="425" y="90" font-size="12" fill="#333" text-anchor="middle">结果预览</text>
+
+  <rect x="510" y="65" width="130" height="40" rx="6" fill="#fff2cc" stroke="#d6b656" stroke-width="1"/>
+  <text x="575" y="90" font-size="12" fill="#333" text-anchor="middle">风格编辑器</text>
+
+  <text x="790" y="90" font-size="11" fill="#666" text-anchor="middle">Zustand 状态管理 · react-router v7</text>
+
+  <!-- 连接线 Frontend → Backend -->
+  <text x="500" y="172" font-size="12" fill="#666" text-anchor="middle">HTTP / WebSocket</text>
+  <line x1="500" y1="155" x2="500" y2="195" stroke="#6c8ebf" stroke-width="2" marker-end="url(#arrow)"/>
+
+  <!-- Backend 外框 -->
+  <rect x="30" y="200" width="940" height="290" rx="10" fill="#d5e8d4" stroke="#82b366" stroke-width="1.5" filter="url(#shadow)"/>
+  <text x="420" y="230" font-size="15" font-weight="bold" fill="#333">Backend</text>
+  <text x="487" y="230" font-size="13" fill="#666">Go + Gin + Eino</text>
+
+  <!-- Handler 层 -->
+  <rect x="60" y="245" width="880" height="45" rx="8" fill="#e1d5e7" stroke="#9673a6" stroke-width="1"/>
+  <text x="80" y="272" font-size="12" font-weight="bold" fill="#333">Handler</text>
+  <text x="400" y="272" font-size="12" fill="#555" text-anchor="middle">JWT 中间件  ·  请求校验  ·  错误处理</text>
+
+  <!-- Handler → Service 箭头 -->
+  <line x1="500" y1="292" x2="500" y2="305" stroke="#9673a6" stroke-width="2" marker-end="url(#arrow-purple)"/>
+
+  <!-- Service 层 -->
+  <rect x="60" y="308" width="880" height="100" rx="8" fill="#fff2cc" stroke="#d6b656" stroke-width="1"/>
+  <text x="80" y="333" font-size="12" font-weight="bold" fill="#333">Service</text>
+
+  <!-- Eino Pipeline -->
+  <text x="80" y="380" font-size="11" fill="#b85450" font-weight="bold">Eino compose.Graph Pipeline</text>
+
+  <rect x="280" y="345" width="110" height="45" rx="6" fill="#f8cecc" stroke="#b85450" stroke-width="1"/>
+  <text x="335" y="363" font-size="11" fill="#333" text-anchor="middle">Prompt</text>
+  <text x="335" y="378" font-size="11" fill="#333" text-anchor="middle">Optimizer</text>
+
+  <rect x="420" y="345" width="110" height="45" rx="6" fill="#f8cecc" stroke="#b85450" stroke-width="1"/>
+  <text x="475" y="363" font-size="11" fill="#333" text-anchor="middle">Asset</text>
+  <text x="475" y="378" font-size="11" fill="#333" text-anchor="middle">Generator</text>
+
+  <rect x="560" y="345" width="110" height="45" rx="6" fill="#f8cecc" stroke="#b85450" stroke-width="1"/>
+  <text x="615" y="363" font-size="11" fill="#333" text-anchor="middle">Quality</text>
+  <text x="615" y="378" font-size="11" fill="#333" text-anchor="middle">Supervisor</text>
+
+  <rect x="700" y="345" width="110" height="45" rx="6" fill="#f8cecc" stroke="#b85450" stroke-width="1"/>
+  <text x="755" y="363" font-size="11" fill="#333" text-anchor="middle">Format</text>
+  <text x="755" y="378" font-size="11" fill="#333" text-anchor="middle">Adapter</text>
+
+  <!-- Pipeline 箭头 -->
+  <line x1="392" y1="367" x2="418" y2="367" stroke="#b85450" stroke-width="2" marker-end="url(#arrow-red)"/>
+  <line x1="532" y1="367" x2="558" y2="367" stroke="#b85450" stroke-width="2" marker-end="url(#arrow-red)"/>
+  <line x1="672" y1="367" x2="698" y2="367" stroke="#b85450" stroke-width="2" marker-end="url(#arrow-red)"/>
+
+  <!-- 项目管理等 -->
+  <text x="120" y="420" font-size="11" fill="#555">项目管理 · 风格系统 · 用户认证</text>
+
+  <!-- Service → Data 箭头 -->
+  <line x1="500" y1="410" x2="500" y2="425" stroke="#d6b656" stroke-width="2" marker-end="url(#arrow-purple)"/>
+
+  <!-- Data 层 -->
+  <rect x="60" y="428" width="880" height="45" rx="8" fill="#e1d5e7" stroke="#9673a6" stroke-width="1"/>
+  <text x="80" y="455" font-size="12" font-weight="bold" fill="#333">Data</text>
+  <text x="400" y="455" font-size="12" fill="#555" text-anchor="middle">GORM + SQLite  ·  sync.Map 缓存</text>
+
+  <!-- Backend → External 箭头 -->
+  <line x1="500" y1="492" x2="500" y2="520" stroke="#999" stroke-width="2" stroke-dasharray="6,3" marker-end="url(#arrow-gray)"/>
+
+  <!-- External Services -->
+  <rect x="30" y="525" width="940" height="80" rx="10" fill="#f5f5f5" stroke="#999" stroke-width="1" stroke-dasharray="6,3" filter="url(#shadow)"/>
+  <text x="80" y="550" font-size="12" font-weight="bold" fill="#333">外部服务</text>
+
+  <rect x="120" y="560" width="180" height="35" rx="6" fill="#f5f5f5" stroke="#999" stroke-width="1"/>
+  <text x="210" y="582" font-size="12" fill="#333" text-anchor="middle">DeepSeek LLM</text>
+
+  <rect x="410" y="560" width="180" height="35" rx="6" fill="#f5f5f5" stroke="#999" stroke-width="1"/>
+  <text x="500" y="582" font-size="12" fill="#333" text-anchor="middle">Stability AI</text>
+
+  <rect x="700" y="560" width="180" height="35" rx="6" fill="#f5f5f5" stroke="#999" stroke-width="1"/>
+  <text x="790" y="582" font-size="12" fill="#333" text-anchor="middle">七牛云 Kodo</text>
+</svg>