| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh-CN"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | <title>工程白图 · Engineering Whiteprint</title> |
| 7 | <style> |
| 8 | *{margin:0;padding:0;box-sizing:border-box} |
| 9 | html,body{width:100%;height:100%;overflow:hidden;background:#0f1117} |
| 10 | body{display:grid;place-items:center;font-family:"SFMono-Regular",Consolas,"SF Mono",Menlo,monospace} |
| 11 | .slide{position:relative;width:min(100vw,calc(100vh*16/9));aspect-ratio:16/9;overflow:hidden;background:#fdfdfd;box-shadow:0 0 0 1px rgba(255,255,255,.06)} |
| 12 | .grid-min{position:absolute;inset:0;background-image:linear-gradient(rgba(30,58,95,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(30,58,95,.04) 1px,transparent 1px);background-size:clamp(8px,1.4vw,18px) clamp(8px,1.4vw,18px)} |
| 13 | .grid-maj{position:absolute;inset:0;background-image:linear-gradient(rgba(30,58,95,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(30,58,95,.08) 1px,transparent 1px);background-size:clamp(40px,7vw,90px) clamp(40px,7vw,90px)} |
| 14 | .frame{position:absolute;inset:clamp(8px,1.5vw,20px);border:1.5px solid rgba(30,64,175,.15);pointer-events:none} |
| 15 | .content{position:absolute;inset:0;padding:clamp(16px,3vw,40px);display:flex;flex-direction:column;z-index:2} |
| 16 | .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:clamp(8px,1.4vw,18px)} |
| 17 | .tag{font-size:clamp(7px,.9vw,11px);color:#2563eb;letter-spacing:.15em;text-transform:uppercase;border:1px solid rgba(37,99,235,.25);padding:clamp(2px,.3vw,4px) clamp(6px,1vw,13px)} |
| 18 | .rev{font-size:clamp(6px,.75vw,9px);color:#9ca3af} |
| 19 | .title{font-size:clamp(16px,3vw,36px);color:#1e3a5f;font-weight:bold;line-height:1.1;margin-bottom:clamp(2px,.3vw,4px)} |
| 20 | .subtitle{font-size:clamp(8px,1vw,12px);color:#374151;opacity:.7} |
| 21 | .diagram{flex:1;display:flex;align-items:center;justify-content:center;gap:clamp(16px,3vw,40px);margin-top:clamp(8px,1.5vw,20px)} |
| 22 | .node{border-radius:2px;padding:clamp(6px,1.2vw,16px) clamp(8px,1.6vw,22px);text-align:center;position:relative} |
| 23 | .node-name{font-size:clamp(9px,1.2vw,14px);font-weight:bold;margin-bottom:clamp(2px,.3vw,4px)} |
| 24 | .node-desc{font-size:clamp(6px,.7vw,9px);opacity:.6} |
| 25 | .n-client{border:1.5px solid #1e3a5f;color:#1e3a5f} |
| 26 | .n-gateway{border:1.5px solid #2563eb;color:#2563eb;background:rgba(37,99,235,.03)} |
| 27 | .n-auth{border:1.2px solid #1e3a5f;color:#1e3a5f} |
| 28 | .n-core{border:1.5px solid #2563eb;color:#2563eb;background:rgba(37,99,235,.06)} |
| 29 | .n-queue{border:1.2px solid #1e3a5f;color:#1e3a5f} |
| 30 | .n-db{border:1.5px dashed #1e3a5f;color:#1e3a5f} |
| 31 | .col-stack{display:flex;flex-direction:column;gap:clamp(8px,1.4vw,18px)} |
| 32 | .arrow{display:flex;align-items:center;color:#1e40af;font-size:clamp(8px,1.2vw,14px)} |
| 33 | .arrow-label{font-size:clamp(5px,.6vw,7px);color:#6b7280;writing-mode:vertical-lr;margin-left:clamp(2px,.3vw,4px)} |
| 34 | .palette{display:flex;gap:clamp(3px,.4vw,5px);margin-top:clamp(6px,1vw,14px);align-items:center} |
| 35 | .palette-label{font-size:clamp(6px,.7vw,8px);color:#9ca3af;margin-right:clamp(4px,.8vw,10px)} |
| 36 | .sw{width:clamp(9px,1.2vw,14px);height:clamp(9px,1.2vw,14px);border-radius:1px;background:var(--c);border:1px solid rgba(0,0,0,.1)} |
| 37 | .title-block{position:absolute;bottom:clamp(8px,1.5vw,20px);right:clamp(8px,1.5vw,20px);border:1.5px solid rgba(30,64,175,.2);background:#fff;z-index:3} |
| 38 | .tb-row{display:flex;border-bottom:1px solid rgba(30,64,175,.1)} |
| 39 | .tb-row:last-child{border-bottom:none} |
| 40 | .tb-label{padding:clamp(2px,.4vw,5px) clamp(4px,.8vw,10px);color:#6b7280;background:rgba(30,58,95,.04);border-right:1px solid rgba(30,64,175,.1);font-size:clamp(5px,.65vw,7px)} |
| 41 | .tb-val{padding:clamp(2px,.4vw,5px) clamp(4px,.8vw,10px);color:#1e3a5f;font-weight:bold;font-size:clamp(5px,.65vw,7px)} |
| 42 | </style> |
| 43 | </head> |
| 44 | <body> |
| 45 | <div class="slide"> |
| 46 | <div class="grid-min"></div> |
| 47 | <div class="grid-maj"></div> |
| 48 | <div class="frame"></div> |
| 49 | <div class="content"> |
| 50 | <div class="head"> |
| 51 | <span class="tag">System Architecture</span> |
| 52 | <span class="rev">REV. C · 2026-06-13</span> |
| 53 | </div> |
| 54 | <div class="title">微服务架构拓扑图</div> |
| 55 | <div class="subtitle">Microservice Topology — Data Flow & Service Dependencies</div> |
| 56 | <div class="diagram"> |
| 57 | <div class="node n-client"><div class="node-name">Client</div><div class="node-desc">Web / Mobile</div></div> |
| 58 | <div class="arrow">→</div> |
| 59 | <div class="node n-gateway"><div class="node-name">Gateway</div><div class="node-desc">API · Auth · Rate</div></div> |
| 60 | <div class="arrow">→</div> |
| 61 | <div class="col-stack"> |
| 62 | <div class="node n-auth"><div class="node-name">Auth Svc</div><div class="node-desc">JWT · OAuth2</div></div> |
| 63 | <div class="node n-core"><div class="node-name">Core Svc</div><div class="node-desc">Business Logic</div></div> |
| 64 | <div class="node n-queue"><div class="node-name">Queue Svc</div><div class="node-desc">Redis · RabbitMQ</div></div> |
| 65 | </div> |
| 66 | <div class="arrow">→</div> |
| 67 | <div class="node n-db"><div class="node-name">Database</div><div class="node-desc">PostgreSQL 15</div><div class="node-desc">Primary + Replica</div></div> |
| 68 | </div> |
| 69 | <div class="palette"> |
| 70 | <span class="palette-label">PALETTE</span> |
| 71 | <i class="sw" style="--c:#1e3a5f"></i> |
| 72 | <i class="sw" style="--c:#374151"></i> |
| 73 | <i class="sw" style="--c:#1e40af"></i> |
| 74 | <i class="sw" style="--c:#2563eb"></i> |
| 75 | <i class="sw" style="--c:#fdfdfd"></i> |
| 76 | </div> |
| 77 | </div> |
| 78 | <div class="title-block"> |
| 79 | <div class="tb-row"><span class="tb-label">DWG No.</span><span class="tb-val">WP-2026-001</span></div> |
| 80 | <div class="tb-row"><span class="tb-label">SCALE</span><span class="tb-val">1:1</span></div> |
| 81 | <div class="tb-row"><span class="tb-label">UNIT</span><span class="tb-val">mm</span></div> |
| 82 | <div class="tb-row"><span class="tb-label">DRAWN</span><span class="tb-val">arc</span></div> |
| 83 | </div> |
| 84 | </div> |
| 85 | </body> |
| 86 | </html> |
| 87 |