| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh-CN"><head><meta charset="utf-8"><title>Architecture</title> |
| 3 | <link rel="stylesheet" href="../../assets/fonts.css"> |
| 4 | <link rel="stylesheet" href="../../assets/base.css"> |
| 5 | <link rel="stylesheet" id="theme-link" href="../../assets/themes/minimal-white.css"> |
| 6 | <link rel="stylesheet" href="../../assets/animations/animations.css"> |
| 7 | <style> |
| 8 | .arch{margin-top:20px;display:grid;grid-template-rows:auto auto auto;gap:22px} |
| 9 | .arch .tier{display:grid;grid-template-columns:120px 1fr;align-items:stretch;gap:22px} |
| 10 | .arch .tname{display:flex;align-items:center;justify-content:center;background:var(--surface-2);border-radius:var(--radius);padding:18px;font-weight:600;font-size:13px;color:var(--text-2);text-transform:uppercase;letter-spacing:.1em;text-align:center} |
| 11 | .arch .cells{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} |
| 12 | .arch .cells.three{grid-template-columns:repeat(3,1fr)} |
| 13 | .arch .cell{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;text-align:center;box-shadow:var(--shadow)} |
| 14 | .arch .cell .ic{font-size:24px} |
| 15 | .arch .cell h4{font-size:14px;margin:6px 0 2px} |
| 16 | .arch .cell p{font-size:11px;color:var(--text-3);margin:0} |
| 17 | .arch .tier.hl .cell{border-top:3px solid var(--accent)} |
| 18 | </style> |
| 19 | </head><body class="single"> |
| 20 | <div class="deck"><section class="slide is-active" data-title="Architecture"> |
| 21 | <p class="kicker">Architecture · 系统总览</p> |
| 22 | <h2 class="h2">一套三层栈</h2> |
| 23 | <div class="arch anim-stagger-list" data-anim-target> |
| 24 | <div class="tier"><div class="tname">UI Layer</div> |
| 25 | <div class="cells"><div class="cell"><div class="ic">🧱</div><h4>Layouts</h4><p>30 个单页</p></div> |
| 26 | <div class="cell"><div class="ic">🎨</div><h4>Themes</h4><p>24 tokens 主题</p></div> |
| 27 | <div class="cell"><div class="ic">✨</div><h4>Animations</h4><p>25 个命名动效</p></div> |
| 28 | <div class="cell"><div class="ic">⌨️</div><h4>Runtime</h4><p>键盘导航</p></div> |
| 29 | </div> |
| 30 | </div> |
| 31 | <div class="tier hl"><div class="tname">Core · tokens</div> |
| 32 | <div class="cells three"><div class="cell"><div class="ic">🎯</div><h4>base.css</h4><p>排版 + 网格</p></div> |
| 33 | <div class="cell"><div class="ic">🔤</div><h4>fonts.css</h4><p>中英字体</p></div> |
| 34 | <div class="cell"><div class="ic">🪞</div><h4>:root vars</h4><p>语义颜色</p></div> |
| 35 | </div> |
| 36 | </div> |
| 37 | <div class="tier"><div class="tname">Tooling</div> |
| 38 | <div class="cells three"><div class="cell"><div class="ic">🧪</div><h4>render.sh</h4><p>headless Chrome</p></div> |
| 39 | <div class="cell"><div class="ic">🆕</div><h4>new-deck.sh</h4><p>脚手架</p></div> |
| 40 | <div class="cell"><div class="ic">📦</div><h4>AgentSkill</h4><p>Claude 接入点</p></div> |
| 41 | </div> |
| 42 | </div> |
| 43 | </div> |
| 44 | </section></div> |
| 45 | <script src="../../assets/runtime.js"></script> |
| 46 | </body></html> |
| 47 |