feat(docs): restructure API design guide with interactive demos and practical examples

refactor(components): replace static API design components with interactive demos
- Add ApiRequestDemo, RestfulUrlDemo, StatusCodeDemo, ErrorHandlingDemo, and ApiVersioningDemo
- Remove outdated ResourceAnalogy, RequestStructureDemo, and VersioningStrategyDemo

docs(api-design): completely rewrite API design chapter with restaurant analogy
- Add clear problem scenarios and solutions
- Include practical e-commerce API examples
- Add terminology glossary
- Improve error handling and versioning sections

style(ai-history): enhance FoundationDemo with better visual hierarchy
- Add section blocks for core theories and early breakthroughs
- Improve typography and highlighting

chore: remove unused components (CpuArchitectureDemo, EvolutionFlowDemo)

docs/.vitepress/theme/components/appendix/ai-history/BackpropagationDemo.vue

@@ -10,11 +10,26 @@
     </div>
     <div class="loss-visual">
       <div class="loss-label">Loss（误差）随训练轮次下降：</div>
-      <svg viewBox="0 0 300 60" class="loss-svg">
-        <polyline :points="lossPoints" fill="none" stroke="var(--vp-c-brand)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-        <text x="5" y="10" class="ax">高</text>
-        <text x="5" y="56" class="ax">低</text>
-        <text x="220" y="56" class="ax">训练轮次 →</text>
+      <svg viewBox="0 0 320 130" class="loss-svg">
+        <!-- Axes -->
+        <line x1="40" y1="110" x2="300" y2="110" stroke="var(--vp-c-text-3)" stroke-width="1.5" />
+        <line x1="40" y1="110" x2="40" y2="15" stroke="var(--vp-c-text-3)" stroke-width="1.5" />
+        
+        <!-- X Arrow -->
+        <polygon points="300,107 305,110 300,113" fill="var(--vp-c-text-3)" />
+        <!-- Y Arrow -->
+        <polygon points="37,15 40,10 43,15" fill="var(--vp-c-text-3)" />
+
+        <!-- Y Label -->
+        <text x="30" y="25" text-anchor="end" class="ax-text">高</text>
+        <text x="30" y="105" text-anchor="end" class="ax-text">低</text>
+        <text x="20" y="65" text-anchor="middle" transform="rotate(-90 20 65)" class="ax-title">Loss</text>
+        
+        <!-- X Label -->
+        <text x="300" y="125" text-anchor="end" class="ax-title">训练轮次 (Epochs)</text>
+
+        <!-- Loss 曲线 -->
+        <polyline :points="lossPoints" fill="none" stroke="var(--vp-c-brand)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
       </svg>
     </div>
   </div>
@@ -30,8 +45,15 @@ const steps = [
 const lossPoints = (() => {
   const pts = []
   for (let i = 0; i <= 50; i++) {
-    const x = 20 + i * 5.2
-    const y = 52 - 44 * Math.exp(-i * 0.09) + Math.sin(i * 0.7) * 1
+    const x = 40 + i * 5; // 40 to 290
+    // Y从上(小值)到下(大值)，Loss越来越低，意味着Y越来越大，靠近110
+    // 我们让一开始的高Loss出现在 y=20 附近，最终的低Loss停留 在 y=105 附近
+    let noise = (Math.random() - 0.5) * 3; 
+    let y = 105 - 85 * Math.exp(-i * 0.12) + noise; 
+    
+    if (i === 0) y = 20; // 确保起点干净
+    if (y > 108) y = 108; // 不超过底轴
+    
     pts.push(`${x},${y}`)
   }
   return pts.join(' ')
@@ -49,6 +71,8 @@ const lossPoints = (() => {
 .step-desc { font-size: 0.68rem; color: var(--vp-c-text-2); line-height: 1.3; }
 .loss-visual { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 6px; padding: 0.7rem; }
 .loss-label { font-size: 0.75rem; color: var(--vp-c-text-2); margin-bottom: 0.3rem; }
-.loss-svg { width: 100%; max-width: 380px; height: auto; display: block; margin: 0 auto; }
-.ax { font-size: 6px; fill: var(--vp-c-text-3); }
+.loss-svg { width: 100%; max-width: 460px; height: auto; display: block; margin: 0 auto; overflow: visible; font-family: sans-serif; }
+.axis-line { color: var(--vp-c-text-3); }
+.ax-text { font-size: 10px; fill: var(--vp-c-text-2); }
+.ax-title { font-size: 11px; fill: var(--vp-c-text-1); font-weight: 500; }
 </style>