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/FoundationDemo.vue

@@ -1,44 +1,87 @@
 <template>
   <div class="demo-card">
-    <div class="events">
-      <div class="event" v-for="e in events" :key="e.year">
-        <div class="year-col">
-          <span class="year-badge">{{ e.year }}</span>
-        </div>
-        <div class="dot-col">
-          <div class="dot" :style="{ background: e.color }"></div>
-          <div class="line" v-if="e !== events[events.length - 1]"></div>
-        </div>
-        <div class="content-col">
-          <div class="event-title">{{ e.title }}</div>
-          <div class="event-note">{{ e.note }}</div>
+    <div class="foundation-container">
+      
+      <!-- Part 1: Core Theories -->
+      <div class="section-block">
+        <div class="section-title">核心人物与理论</div>
+        <div class="event-list">
+          <div class="event-item">
+            <span class="e-year">1943</span>
+            <span class="e-text"><strong>沃伦·麦卡洛克 & 沃尔特·皮茨</strong> 提出 <em>MP 神经元模型</em>，首次用数学描述神经网络</span>
+          </div>
+          <div class="event-item">
+            <span class="e-year">1950</span>
+            <span class="e-text"><strong>艾伦·图灵</strong> 发表《计算机器与智能》，提出 <em>图灵测试</em>，定义机器智能标准</span>
+          </div>
+          <div class="event-item highlight-event">
+            <span class="e-year">1956</span>
+            <span class="e-text"><strong>达特茅斯会议</strong>，约翰·麦卡锡首次提出"人工智能"概念，标志 AI 学科正式诞生</span>
+          </div>
         </div>
       </div>
+
+      <!-- Part 2: Symbolism -->
+      <div class="symbolism-panel">
+        <div class="s-header">
+          <span class="s-icon">📜</span>
+          <span class="s-title">符号主义兴起 (Symbolism)</span>
+        </div>
+        <div class="s-body">
+          <div class="s-equation">智能 = 符号推理</div>
+          <div class="s-desc">
+            符号主义（逻辑主义/计算机学派）主张将知识编码为符号，通过 <strong>逻辑规则与推导</strong> 解决问题，这是一条极其依赖人类专家的 <em>自上而下</em> 的智能模拟路径。
+          </div>
+        </div>
+      </div>
+
+      <!-- Part 3: Early Breakthroughs -->
+      <div class="section-block">
+        <div class="section-title">早期突破</div>
+        <div class="event-list">
+          <div class="event-item">
+            <span class="e-year">1956</span>
+            <span class="e-text">纽厄尔和西蒙开发 <strong>逻辑理论家 (Logic Theorist)</strong>，首个能证明数学定理的 AI 程序</span>
+          </div>
+          <div class="event-item">
+            <span class="e-year">1958</span>
+            <span class="e-text">麦卡锡发明 <strong>LISP 语言</strong>，成为 AI 研究的重要工具</span>
+          </div>
+          <div class="event-item">
+            <span class="e-year">1959</span>
+            <span class="e-text">乔治·德沃尔与约瑟夫·恩格尔伯格开发首台 <strong>工业机器人</strong>，标志 AI 从理论走向应用</span>
+          </div>
+        </div>
+      </div>
+
     </div>
   </div>
 </template>
 
 <script setup>
-const events = [
-  { year: '1943', title: 'MP 神经元模型', note: '麦卡洛克 & 皮茨：首次用数学公式模拟神经元，证明"神经元可被计算"。', color: '#3b82f6' },
-  { year: '1950', title: '图灵测试', note: '图灵：如果机器的回答让人无法分辨是人还是机器，则认为它具备智能。', color: '#7c3aed' },
-  { year: '1956', title: '达特茅斯会议 — AI 学科诞生', note: '麦卡锡等人首次提出"人工智能"概念，AI 正式成为一门学科。', color: '#059669' },
-  { year: '1956', title: '逻辑理论家（Logic Theorist）', note: '纽厄尔 & 西蒙：第一个用规则自动证明数学定理的 AI 程序。', color: '#059669' },
-  { year: '1958', title: 'LISP 语言诞生', note: '麦卡锡发明，成为此后数十年 AI 研究的核心编程语言。', color: '#d97706' },
-  { year: '1959', title: '首台工业机器人', note: '德沃尔 & 恩格尔伯格：AI 从实验室走向工厂，开始改变工业生产。', color: '#dc2626' },
-]
 </script>
 
 <style scoped>
-.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1.25rem; margin: 1rem 0; }
-.events { display: flex; flex-direction: column; }
-.event { display: grid; grid-template-columns: 52px 24px 1fr; gap: 0 0.6rem; }
-.year-col { display: flex; align-items: flex-start; padding-top: 0.15rem; justify-content: flex-end; }
-.year-badge { font-size: 0.7rem; font-weight: bold; color: var(--vp-c-text-3); white-space: nowrap; }
-.dot-col { display: flex; flex-direction: column; align-items: center; }
-.dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 0.2rem; }
-.line { width: 2px; flex: 1; background: var(--vp-c-divider); margin: 3px 0; min-height: 16px; }
-.content-col { padding-bottom: 0.9rem; }
-.event-title { font-weight: bold; font-size: 0.85rem; color: var(--vp-c-text-1); margin-bottom: 0.15rem; }
-.event-note { font-size: 0.78rem; color: var(--vp-c-text-2); line-height: 1.5; }
+.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1.2rem; margin: 1rem 0; }
+.foundation-container { display: flex; flex-direction: column; gap: 1.2rem; }
+
+.section-block { display: flex; flex-direction: column; gap: 0.5rem; }
+.section-title { font-weight: bold; font-size: 0.9rem; color: var(--vp-c-brand-1); border-bottom: 1px solid var(--vp-c-divider); padding-bottom: 0.3rem; margin-bottom: 0.3rem; }
+
+.event-list { display: flex; flex-direction: column; gap: 0.5rem; }
+.event-item { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.8rem; line-height: 1.4; }
+.e-year { font-weight: bold; background: var(--vp-c-bg-alt); padding: 0.1rem 0.4rem; border-radius: 4px; color: var(--vp-c-text-1); border: 1px solid var(--vp-c-divider); font-family: monospace; flex-shrink: 0; }
+.e-text { color: var(--vp-c-text-2); padding-top: 0.1rem; }
+.e-text strong { color: var(--vp-c-text-1); }
+.e-text em { color: var(--vp-c-brand-1); font-style: normal; font-weight: 500; }
+.highlight-event .e-year { background: #10b981; color: white; border-color: #059669; }
+
+.symbolism-panel { background: rgba(16, 185, 129, 0.05); border: 1px dashed #10b981; border-radius: 8px; padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; text-align: center; }
+.s-header { display: flex; align-items: center; justify-content: center; gap: 0.4rem; }
+.s-icon { font-size: 1.2rem; }
+.s-title { font-weight: bold; font-size: 0.95rem; color: #059669; }
+.s-equation { font-family: monospace; font-size: 1rem; font-weight: bold; color: var(--vp-c-text-1); background: var(--vp-c-bg); padding: 0.4rem 1rem; border-radius: 6px; border: 1px solid var(--vp-c-divider); display: inline-block; margin: 0 auto; }
+.s-desc { font-size: 0.78rem; color: var(--vp-c-text-2); line-height: 1.5; max-width: 90%; margin: 0 auto; }
+.html.dark .symbolism-panel { background: rgba(5, 150, 105, 0.15); border-color: #059669; }
+.html.dark .s-title { color: #34d399; }
 </style>