diff --git a/docs/.vitepress/config.mjs b/docs/.vitepress/config.mjs
index 92a42ca..848c678 100644
--- a/docs/.vitepress/config.mjs
+++ b/docs/.vitepress/config.mjs
@@ -702,7 +702,7 @@ export default defineConfig({
                 { text: 'Embedding 与向量检索', link: '/zh-cn/appendix/8-artificial-intelligence/embedding-vector-retrieval' },
                 { text: 'RAG 架构', link: '/zh-cn/appendix/8-artificial-intelligence/rag' },
                 { text: 'AI Agent 与工具调用', link: '/zh-cn/appendix/8-artificial-intelligence/ai-agents' },
-                { text: 'AI 协议（MCP 等）', link: '/zh-cn/appendix/8-artificial-intelligence/ai-protocols' },
+                { text: 'AI 协议（MCP & A2A）', link: '/zh-cn/appendix/8-artificial-intelligence/ai-protocols' },
                 { text: '模型微调与部署', link: '/zh-cn/appendix/8-artificial-intelligence/model-finetuning-deployment' },
                 { text: 'AI 原生应用设计', link: '/zh-cn/appendix/8-artificial-intelligence/ai-native-app-design' },
                 { text: 'AI 能力词典', link: '/zh-cn/appendix/8-artificial-intelligence/ai-capability-dictionary' }
diff --git a/docs/.vitepress/theme/components/appendix/ai-history/AIEvolutionTimelineDemo.vue b/docs/.vitepress/theme/components/appendix/ai-history/AIEvolutionTimelineDemo.vue
index 962c5a0..e5e6a79 100644
--- a/docs/.vitepress/theme/components/appendix/ai-history/AIEvolutionTimelineDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/ai-history/AIEvolutionTimelineDemo.vue
@@ -1,239 +1,3 @@
 <template>
-  <div class="ai-evolution-timeline-demo">
-    <el-card
-      shadow="hover"
-      class="main-card"
-    >
-      <template #header>
-        <div class="card-header">
-          <h3>AI 进化时间轴</h3>
-          <p class="subtitle">
-            点击不同时期，查看 AI 是如何一步步进化的
-          </p>
-        </div>
-      </template>
-
-      <div class="demo-content">
-        <el-tabs
-          v-model="activeEraName"
-          type="border-card"
-          class="timeline-tabs"
-        >
-          <el-tab-pane
-            v-for="(era, index) in eras"
-            :key="index"
-            :label="era.title"
-            :name="era.title"
-          >
-            <div class="era-content">
-              <div class="era-header">
-                <el-tag
-                  effect="dark"
-                  size="large"
-                  class="year-tag"
-                >
-                  {{ era.year }}
-                </el-tag>
-                <span class="era-desc-short">{{ era.desc }}</span>
-              </div>
-              
-              <div class="era-body">
-                <p class="full-desc">
-                  {{ era.fullDesc }}
-                </p>
-                
-                <div class="info-grid">
-                  <div class="info-column">
-                    <span class="column-title">💡 核心特点</span>
-                    <ul class="key-points-list">
-                      <li
-                        v-for="(point, i) in era.keyPoints"
-                        :key="i"
-                      >
-                        <el-icon class="point-icon">
-                          <CaretRight />
-                        </el-icon>
-                        {{ point }}
-                      </li>
-                    </ul>
-                  </div>
-                  
-                  <div class="info-column">
-                    <span class="column-title">🌟 代表成就</span>
-                    <div class="examples-container">
-                      <el-tag
-                        v-for="(example, i) in era.examples"
-                        :key="i"
-                        class="example-tag"
-                        effect="plain"
-                      >
-                        {{ example }}
-                      </el-tag>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </el-tab-pane>
-        </el-tabs>
-      </div>
-    </el-card>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { CaretRight } from '@element-plus/icons-vue'
-
-const activeEraName = ref('符号主义时代')
-
-const eras = [
-  {
-    year: '20世纪50-80年代',
-    title: '符号主义时代',
-    desc: '规则与逻辑推理',
-    fullDesc:
-      '早期人工智能研究认为，智能可以通过符号和逻辑规则来表达。科学家们尝试编写大量规则来让机器模拟人类专家的决策过程。',
-    examples: ['专家系统', '深蓝 (Deep Blue)', 'MYCIN'],
-    keyPoints: [
-      '人工编写 If-Then 规则',
-      '逻辑推理能力强大',
-      '可解释性强',
-      '难以处理模糊/复杂问题'
-    ]
-  },
-  {
-    year: '21世纪10年代',
-    title: '连接主义时代',
-    desc: '神经网络与深度学习',
-    fullDesc:
-      '随着大数据和 GPU 算力的突破，深度学习迎来了春天。神经网络通过多层结构自动学习特征，在图像识别、语音识别等领域取得巨大成功。',
-    examples: ['AlexNet', 'AlphaGo', '人脸识别'],
-    keyPoints: [
-      '模仿人脑神经元结构',
-      '从数据中自动学习特征',
-      '强大的模式识别能力',
-      '模型是"黑盒"，缺乏可解释性'
-    ]
-  },
-  {
-    year: '21世纪20年代至今',
-    title: '生成式 AI 时代',
-    desc: '大模型与创造力',
-    fullDesc:
-      'Transformer 架构的诞生让机器理解了上下文关系。GPT 等大语言模型不仅能生成文本、图像，还展现出了惊人的推理和创造能力。',
-    examples: ['ChatGPT', 'Midjourney', 'Sora'],
-    keyPoints: [
-      '基于 Transformer 架构',
-      '通用的理解与生成能力',
-      '涌现出推理、规划等高级智能',
-      '通过提示词 (Prompt) 交互'
-    ]
-  }
-]
-</script>
-
-<style scoped>
-.ai-evolution-timeline-demo {
-  margin: 10px 0;
-}
-
-.main-card {
-  /* Compact card style */
-}
-
-.card-header h3 {
-  margin: 0;
-  font-size: 16px;
-  font-weight: bold;
-}
-
-.subtitle {
-  font-size: 12px;
-  color: #909399;
-  margin: 5px 0 0 0;
-}
-
-.timeline-tabs {
-  margin-top: 10px;
-}
-
-.era-content {
-  padding: 10px;
-}
-
-.era-header {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-  margin-bottom: 15px;
-  flex-wrap: wrap;
-}
-
-.era-desc-short {
-  font-weight: bold;
-  color: #606266;
-  font-size: 14px;
-}
-
-.full-desc {
-  font-size: 14px;
-  color: #303133;
-  line-height: 1.6;
-  margin-bottom: 20px;
-  background: #f5f7fa;
-  padding: 10px;
-  border-radius: 4px;
-}
-
-.info-grid {
-  display: flex;
-  gap: 20px;
-}
-
-.info-column {
-  flex: 1;
-}
-
-.column-title {
-  display: block;
-  font-size: 13px;
-  font-weight: bold;
-  color: #909399;
-  margin-bottom: 10px;
-  border-bottom: 1px solid #ebeef5;
-  padding-bottom: 5px;
-}
-
-.key-points-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.key-points-list li {
-  display: flex;
-  align-items: center;
-  font-size: 13px;
-  color: #606266;
-  margin-bottom: 6px;
-}
-
-.point-icon {
-  margin-right: 5px;
-  color: #409eff;
-}
-
-.examples-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-@media (max-width: 600px) {
-  .info-grid {
-    flex-direction: column;
-    gap: 15px;
-  }
-}
-</style>
\ No newline at end of file
+  <div></div>
+</template>
\ No newline at end of file
diff --git a/docs/.vitepress/theme/components/appendix/ai-history/AiEvolutionDemo.vue b/docs/.vitepress/theme/components/appendix/ai-history/AiEvolutionDemo.vue
index edf1468..9e77929 100644
--- a/docs/.vitepress/theme/components/appendix/ai-history/AiEvolutionDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/ai-history/AiEvolutionDemo.vue
@@ -1,697 +1,41 @@
 <template>
-  <div class="evolution-demo">
-    <el-card
-      class="main-card"
-      shadow="hover"
-    >
-      <template #header>
-        <div class="header-container">
-          <div class="title-area">
-            <span class="main-title">AI 进化模拟器</span>
-          </div>
-          <el-steps
-            :active="currentStage"
-            finish-status="success"
-            align-center
-            class="compact-steps"
-            simple
-          >
-            <el-step
-              v-for="stage in stages"
-              :key="stage.id"
-              :title="stage.label"
-            />
-          </el-steps>
-        </div>
-      </template>
-
-      <!-- Stage 1: Rule Based (Traffic Light Example) -->
-      <div
-        v-if="currentStage === 0"
-        class="stage-pane"
-      >
-        <el-alert
-          type="info"
-          :closable="false"
-          show-icon
-          class="compact-alert mb-2"
-        >
-          <template #title>
-            <span class="alert-title">阶段一：规则时代 (Rule-Based)</span>
-          </template>
-          <template #default>
-            <span class="alert-desc">就像教小孩：如果看到红灯，就停下。</span>
-          </template>
-        </el-alert>
-        
-        <div class="game-area-grid">
-          <div class="panel left-panel">
-            <div class="panel-header">
-              规则库 (Code)
-            </div>
-            <div class="code-block">
-              <div class="code-line">
-                <span class="keyword">function</span> <span class="function">decideTrafficLight</span>(color) {
-              </div>
-              <div class="code-line indent">
-                <span class="keyword">if</span> (color === <span class="string">'red'</span>) <span class="keyword">return</span> <span class="string">'stop'</span>
-              </div>
-              <div class="code-line indent">
-                <span class="keyword">else if</span> (color === <span class="string">'yellow'</span>) <span class="keyword">return</span> <span class="string">'caution'</span>
-              </div>
-              <div class="code-line indent">
-                <span class="keyword">else if</span> (color === <span class="string">'green'</span>) <span class="keyword">return</span> <span class="string">'go'</span>
-              </div>
-              <div class="code-line">
-                }
-              </div>
-            </div>
-          </div>
-          <div class="panel right-panel">
-            <div class="panel-header">
-              测试输入
-            </div>
-            <div class="input-controls">
-              <el-select
-                v-model="ruleColor"
-                size="small"
-                style="width: 120px;"
-              >
-                <el-option
-                  value="red"
-                  label="🔴 红灯"
-                />
-                <el-option
-                  value="yellow"
-                  label="🟡 黄灯"
-                />
-                <el-option
-                  value="green"
-                  label="🟢 绿灯"
-                />
-                <el-option
-                  value="blue"
-                  label="🔵 蓝灯"
-                />
-              </el-select>
-              <div class="arrow">
-                →
-              </div>
-              <el-tag :type="ruleResult === 'stop' ? 'danger' : ruleResult === 'caution' ? 'warning' : ruleResult === 'go' ? 'success' : 'info'">
-                {{ ruleResult }}
-              </el-tag>
-            </div>
-            <div
-              v-if="ruleResult === 'Unknown'"
-              class="hint-text"
-            >
-              规则库中没有定义"蓝灯"，所以系统不知道该做什么。这就是规则系统的局限性：无法处理未定义的规则。
-            </div>
-            <div
-              v-else
-              class="hint-text"
-            >
-              系统严格按照预定义的规则执行指令。
-            </div>
-          </div>
-        </div>
+  <div class="demo-card">
+    <div class="timeline-visual">
+      <div class="era" v-for="era in eras" :key="era.label" :style="{ flex: era.flex, background: era.bg }">
+        <div class="era-label">{{ era.label }}</div>
+        <div class="era-years">{{ era.years }}</div>
       </div>
-
-      <!-- Stage 2: Machine Learning (Interactive 2D Plot) -->
-      <div
-        v-else-if="currentStage === 1"
-        class="stage-pane"
-      >
-        <el-alert
-          type="info"
-          :closable="false"
-          show-icon
-          class="compact-alert mb-2"
-        >
-          <template #title>
-            <span class="alert-title">阶段二：机器学习 (Machine Learning)</span>
-          </template>
-          <template #default>
-            <span class="alert-desc">点击画布添加数据点，训练模型自动寻找分类边界 (Decision Boundary)。</span>
-          </template>
-        </el-alert>
-
-        <div class="game-area-grid">
-          <div
-            class="panel left-panel canvas-container"
-            @click="addPoint"
-          >
-            <!-- Simple SVG Plot -->
-            <svg
-              width="100%"
-              height="200"
-              class="ml-plot"
-            >
-              <!-- Background Regions (Visible after training) -->
-              <rect
-                v-if="modelTrained"
-                x="0"
-                y="0"
-                width="100%"
-                height="100%"
-                :fill="boundaryColor"
-              />
-                
-              <!-- Decision Line -->
-              <line
-                v-if="modelTrained"
-                :x1="line.x1"
-                :y1="line.y1"
-                :x2="line.x2"
-                :y2="line.y2"
-                stroke="#333"
-                stroke-width="2"
-                stroke-dasharray="4"
-              />
-
-              <!-- Points -->
-              <circle 
-                v-for="(p, i) in points" 
-                :key="i" 
-                :cx="p.x" 
-                :cy="p.y" 
-                r="6" 
-                :fill="p.type === 'A' ? '#409eff' : '#e6a23c'" 
-                stroke="white" 
-                stroke-width="2" 
-              />
-            </svg>
-            <div
-              v-if="points.length === 0"
-              class="canvas-hint"
-            >
-              👆 点击此处添加数据点
-            </div>
-          </div>
-
-          <div class="panel right-panel">
-            <div class="panel-header">
-              控制面板
-            </div>
-            <div class="control-group">
-              <span class="label">当前类别:</span>
-              <el-radio-group
-                v-model="currentClass"
-                size="small"
-              >
-                <el-radio-button label="A">
-                  <span style="color: #409eff">● 蓝类</span>
-                </el-radio-button>
-                <el-radio-button label="B">
-                  <span style="color: #e6a23c">● 橙类</span>
-                </el-radio-button>
-              </el-radio-group>
-            </div>
-            
-            <div class="control-group mt-2">
-              <el-button
-                type="primary"
-                size="small"
-                :disabled="points.length < 2"
-                @click="trainLinearModel"
-              >
-                ⚡ 开始训练 (Fit)
-              </el-button>
-              <el-button
-                size="small"
-                :icon="Delete"
-                circle
-                @click="clearPoints"
-              />
-            </div>
-
-            <div class="stats-info mt-2">
-              <p
-                v-if="!modelTrained"
-                class="text-desc"
-              >
-                机器学习不再依赖硬编码规则，而是通过统计学方法（如寻找中心点或线性回归）在数据之间划出一条"界线"。试试在不同位置添加点，看看界线如何变化。
-              </p>
-              <p
-                v-else
-                class="text-desc"
-              >
-                模型已训练！它找到了一条最佳分割线。新进来的数据将根据它在红区还是蓝区被自动分类。
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Stage 3: Deep Learning (3x3 Grid Feature Extraction) -->
-      <div
-        v-else
-        class="stage-pane"
-      >
-        <el-alert
-          type="info"
-          :closable="false"
-          show-icon
-          class="compact-alert mb-2"
-        >
-          <template #title>
-            <span class="alert-title">阶段三：深度学习 (Deep Learning)</span>
-          </template>
-          <template #default>
-            <span class="alert-desc">神经网络通过多层结构自动提取特征（Feature Extraction）。点击格子绘制图案。</span>
-          </template>
-        </el-alert>
-
-        <div class="game-area-grid">
-          <div class="panel left-panel grid-container">
-            <div class="pixel-grid">
-              <div 
-                v-for="(pixel, i) in pixels" 
-                :key="i" 
-                class="pixel" 
-                :class="{ active: pixel }"
-                @click="togglePixel(i)"
-              />
-            </div>
-            <div class="grid-actions">
-              <el-button
-                size="small"
-                link
-                @click="preset('x')"
-              >
-                ❌ X型
-              </el-button>
-              <el-button
-                size="small"
-                link
-                @click="preset('plus')"
-              >
-                ➕ 十字
-              </el-button>
-              <el-button
-                size="small"
-                link
-                @click="clearPixels"
-              >
-                清空
-              </el-button>
-            </div>
-          </div>
-
-          <div class="panel right-panel">
-            <div class="panel-header">
-              神经网络层级透视
-            </div>
-            
-            <!-- Visualization of Layers -->
-            <div class="network-viz">
-              <div class="layer input-layer">
-                <div class="layer-label">
-                  输入层 (Pixels)
-                </div>
-                <div class="nodes">
-                  <span
-                    v-for="n in 9"
-                    :key="n"
-                    class="node mini"
-                    :class="{active: pixels[n-1]}"
-                  />
-                </div>
-              </div>
-              
-              <div class="arrow-down">
-                ⬇️ 卷积/提取特征
-              </div>
-
-              <div class="layer hidden-layer">
-                <div class="layer-label">
-                  隐藏层 (Features)
-                </div>
-                <div class="feature-detectors">
-                  <div
-                    class="feature"
-                    :class="{detected: features.center}"
-                  >
-                    <span class="f-icon">⏺</span> 中心点
-                  </div>
-                  <div
-                    class="feature"
-                    :class="{detected: features.corners}"
-                  >
-                    <span class="f-icon">Corners</span> 四角
-                  </div>
-                  <div
-                    class="feature"
-                    :class="{detected: features.cross}"
-                  >
-                    <span class="f-icon">➕</span> 交叉
-                  </div>
-                </div>
-              </div>
-
-              <div class="arrow-down">
-                ⬇️ 输出层
-              </div>
-
-              <div class="layer output-layer">
-                <div class="prediction-box">
-                  识别结果: <span class="result-text">{{ prediction }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Footer Navigation -->
-      <div class="footer-nav mt-2 flex justify-end">
-        <el-button-group>
-          <el-button
-            size="small"
-            :disabled="currentStage === 0"
-            @click="currentStage--"
-          >
-            上一步
-          </el-button>
-          <el-button
-            size="small"
-            type="primary"
-            :disabled="currentStage === 2"
-            @click="currentStage++"
-          >
-            下一步
-          </el-button>
-        </el-button-group>
-      </div>
-    </el-card>
+    </div>
+    <div class="legend">
+      <span class="legend-item"><span class="dot" style="background:#059669"></span>技术浪潮</span>
+      <span class="legend-item"><span class="dot" style="background:#94a3b8"></span>❄️ AI 寒冬</span>
+      <span class="legend-item"><span class="dot" style="background:#7c3aed"></span>大模型时代</span>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref, reactive, computed } from 'vue'
-import { Delete } from '@element-plus/icons-vue'
-
-const currentStage = ref(0)
-const stages = [
-  { id: 0, label: '规则', desc: '人工规则' },
-  { id: 1, label: '机器学习', desc: '统计特征' },
-  { id: 2, label: '深度学习', desc: '自动特征' }
+const eras = [
+  { label: '理论奠基', years: '1940s-50s', flex: 1.5, bg: 'linear-gradient(135deg, #dbeafe, #bfdbfe)' },
+  { label: '第一次浪潮', years: '1960s-70s', flex: 1.5, bg: 'linear-gradient(135deg, #d1fae5, #a7f3d0)' },
+  { label: '❄️ 寒冬 I', years: '1974-80', flex: 0.7, bg: 'linear-gradient(135deg, #e2e8f0, #cbd5e1)' },
+  { label: '第二次浪潮', years: '1980s', flex: 1, bg: 'linear-gradient(135deg, #d1fae5, #a7f3d0)' },
+  { label: '❄️ 寒冬 II', years: '1987-93', flex: 0.7, bg: 'linear-gradient(135deg, #e2e8f0, #cbd5e1)' },
+  { label: 'ML 崛起', years: '1990s-2000s', flex: 1.5, bg: 'linear-gradient(135deg, #d1fae5, #6ee7b7)' },
+  { label: '深度学习', years: '2010s', flex: 1.2, bg: 'linear-gradient(135deg, #a7f3d0, #34d399)' },
+  { label: '大模型时代', years: '2018+', flex: 1.2, bg: 'linear-gradient(135deg, #c4b5fd, #a78bfa)' },
 ]
-
-// --- Stage 1: Rule Based ---
-const ruleColor = ref('red')
-const ruleResult = computed(() => {
-  if (ruleColor.value === 'red') return 'stop'
-  if (ruleColor.value === 'yellow') return 'caution'
-  if (ruleColor.value === 'green') return 'go'
-  return 'Unknown'
-})
-
-// --- Stage 2: Machine Learning ---
-const points = ref([])
-const currentClass = ref('A')
-const modelTrained = ref(false)
-const line = reactive({ x1: 0, y1: 0, x2: 0, y2: 0 })
-// SVG click coordinates are relative to the SVG element
-// We'll use a simple approximation for the demo
-// x, y are percentages (0-100)
-const addPoint = (e) => {
-  const rect = e.target.getBoundingClientRect()
-  // Ensure we are clicking on the SVG or its children
-  // Best to put event on wrapper
-  // But event target might be circle.
-  // Use currentTarget
-  const x = e.offsetX
-  const y = e.offsetY
-  // Convert to % for responsiveness if needed, but pixel is easier for calc
-  // Let's stick to pixel for this simple demo, assuming fixed height 200
-  // width varies.
-  points.value.push({
-    x, y, 
-    type: currentClass.value
-  })
-  modelTrained.value = false
-}
-
-const clearPoints = () => {
-  points.value = []
-  modelTrained.value = false
-}
-
-const trainLinearModel = () => {
-  // Simple Nearest Centroid Classifier
-  const groupA = points.value.filter(p => p.type === 'A')
-  const groupB = points.value.filter(p => p.type === 'B')
-
-  if (groupA.length === 0 || groupB.length === 0) return
-
-  const avgA = {
-    x: groupA.reduce((sum, p) => sum + p.x, 0) / groupA.length,
-    y: groupA.reduce((sum, p) => sum + p.y, 0) / groupA.length
-  }
-  const avgB = {
-    x: groupB.reduce((sum, p) => sum + p.x, 0) / groupB.length,
-    y: groupB.reduce((sum, p) => sum + p.y, 0) / groupB.length
-  }
-
-  // Midpoint
-  const midX = (avgA.x + avgB.x) / 2
-  const midY = (avgA.y + avgB.y) / 2
-
-  // Normal vector (from A to B)
-  const dx = avgB.x - avgA.x
-  const dy = avgB.y - avgA.y
-
-  // Perpendicular line: dx*x + dy*y = C
-  // Slope of normal is dy/dx. Slope of perp line is -dx/dy
-  
-  // Let's just draw a line perpendicular to the segment AB passing through Midpoint
-  // Slope m = -dx/dy
-  
-  // Calculate line coordinates for visualization
-  // y - midY = m * (x - midX)
-  // if dy is close to 0, vertical line x = midX
-  
-  const width = 1000 // ample width
-  
-  if (Math.abs(dy) < 0.001) {
-    // Vertical line
-    line.x1 = midX
-    line.x2 = midX
-    line.y1 = 0
-    line.y2 = 200
-  } else {
-    const m = -dx / dy
-    // At x=0
-    const y0 = midY + m * (0 - midX)
-    // At x=width
-    const y1 = midY + m * (width - midX)
-    
-    line.x1 = 0
-    line.y1 = y0
-    line.x2 = width
-    line.y2 = y1
-  }
-  
-  modelTrained.value = true
-}
-
-// Simple visual background
-// If A is left/top, background is blue-ish
-// SVG doesn't support "half plane fill" easily without path math
-// For this demo, we won't fill the background perfectly, just draw the line.
-const boundaryColor = computed(() => 'transparent') 
-
-
-// --- Stage 3: Deep Learning ---
-const pixels = ref(Array(9).fill(false))
-
-const togglePixel = (index) => {
-  pixels.value[index] = !pixels.value[index]
-}
-
-const clearPixels = () => {
-  pixels.value = pixels.value.map(() => false)
-}
-
-const preset = (type) => {
-  clearPixels()
-  if (type === 'x') {
-    [0, 2, 4, 6, 8].forEach(i => pixels.value[i] = true)
-  } else if (type === 'plus') {
-    [1, 3, 4, 5, 7].forEach(i => pixels.value[i] = true)
-  }
-}
-
-const features = computed(() => {
-  // Simple heuristics to simulate feature detection
-  const p = pixels.value
-  const center = p[4]
-  const corners = p[0] && p[2] && p[6] && p[8]
-  const cross = p[1] && p[3] && p[5] && p[7]
-  
-  return { center, corners, cross }
-})
-
-const prediction = computed(() => {
-  const f = features.value
-  if (f.corners && f.center) return 'X 型图案 (X-Shape)'
-  if (f.cross && f.center) return '十字型 (Plus-Shape)'
-  if (f.corners && !f.center) return '四角 (Corners)'
-  if (pixels.value.filter(Boolean).length === 0) return '无输入'
-  return '未知图案'
-})
-
 </script>
 
 <style scoped>
-.evolution-demo { margin: 10px 0; }
-.header-container { margin-bottom: 5px; }
-.main-title { font-weight: bold; font-size: 16px; }
-.compact-steps { padding: 5px 0; margin-bottom: 10px; }
-.compact-alert { padding: 5px 10px; }
-.alert-title { font-weight: bold; font-size: 13px; }
-.alert-desc { font-size: 12px; }
-
-.game-area-grid {
-  display: flex;
-  gap: 15px;
-  margin-top: 10px;
-}
-.panel {
-  border: 1px solid #ebeef5;
-  border-radius: 4px;
-  padding: 10px;
-}
-.left-panel { flex: 1; }
-.right-panel { flex: 1; background-color: #fcfcfc; }
-.panel-header {
-  font-size: 13px;
-  font-weight: bold;
-  color: #606266;
-  margin-bottom: 10px;
-  border-bottom: 1px solid #ebeef5;
-  padding-bottom: 5px;
-}
-
-/* Stage 1 */
-.code-block {
-  font-family: monospace;
-  font-size: 12px;
-  background: #282c34;
-  color: #abb2bf;
-  padding: 10px;
-  border-radius: 4px;
-}
-.keyword { color: #c678dd; }
-.string { color: #98c379; }
-.function { color: #61afef; }
-.indent { padding-left: 15px; }
-.input-controls {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-.hint-text {
-  margin-top: 10px;
-  font-size: 12px;
-  color: #909399;
-}
-
-/* Stage 2 */
-.canvas-container {
-  height: 220px;
-  background-color: #f5f7fa;
-  position: relative;
-  cursor: crosshair;
-  padding: 0;
-  overflow: hidden;
-}
-.ml-plot {
-  display: block;
-}
-.canvas-hint {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  color: #909399;
-  font-size: 12px;
-  pointer-events: none;
-}
-.text-desc {
-  font-size: 12px;
-  color: #606266;
-  line-height: 1.5;
-}
-
-/* Stage 3 */
-.grid-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-.pixel-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 40px);
-  gap: 4px;
-  margin-bottom: 10px;
-}
-.pixel {
-  width: 40px;
-  height: 40px;
-  background-color: #eee;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: background-color 0.2s;
-}
-.pixel:hover { background-color: #d9d9d9; }
-.pixel.active { background-color: #333; }
-
-.network-viz {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-}
-.layer {
-  width: 100%;
-  padding: 5px;
-  background: #fff;
-  border: 1px solid #ebeef5;
-  border-radius: 4px;
-  text-align: center;
-}
-.layer-label { font-size: 11px; color: #909399; margin-bottom: 4px; }
-.nodes { display: flex; gap: 2px; justify-content: center; flex-wrap: wrap; width: 60px; margin: 0 auto; }
-.node.mini { width: 6px; height: 6px; border-radius: 50%; background: #ddd; }
-.node.mini.active { background: #333; }
-.arrow-down { font-size: 10px; color: #ccc; }
-
-.feature-detectors {
-  display: flex;
-  justify-content: space-around;
-  font-size: 11px;
-}
-.feature {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  opacity: 0.3;
-  transition: opacity 0.3s;
-}
-.feature.detected { opacity: 1; color: #409eff; font-weight: bold; }
-.f-icon { font-size: 14px; margin-bottom: 2px; }
-
-.prediction-box { font-weight: bold; font-size: 13px; color: #303133; }
-.result-text { color: #67c23a; }
-
-@media (max-width: 600px) {
-  .game-area-grid { flex-direction: column; }
-}
-.flex { display: flex; }
-.justify-end { justify-content: flex-end; }
-.mt-2 { margin-top: 8px; }
-.mb-2 { margin-bottom: 8px; }
+.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1rem; margin: 1rem 0; }
+.timeline-visual { display: flex; border-radius: 6px; overflow: hidden; border: 1px solid var(--vp-c-divider); min-height: 60px; }
+.era { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.4rem 0.2rem; text-align: center; border-right: 1px solid rgba(255,255,255,0.4); }
+.era:last-child { border-right: none; }
+.era-label { font-size: 0.65rem; font-weight: bold; color: #1e293b; line-height: 1.2; }
+.era-years { font-size: 0.55rem; color: #475569; margin-top: 0.15rem; }
+.legend { display: flex; gap: 1rem; margin-top: 0.6rem; flex-wrap: wrap; }
+.legend-item { display: flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; color: var(--vp-c-text-2); }
+.dot { width: 8px; height: 8px; border-radius: 2px; }
+@media (max-width: 640px) { .era-label { font-size: 0.58rem; } .era-years { display: none; } }
 </style>
\ No newline at end of file
diff --git a/docs/.vitepress/theme/components/appendix/ai-history/AttentionMechanismDemo.vue b/docs/.vitepress/theme/components/appendix/ai-history/AttentionMechanismDemo.vue
index 8a928d1..b070acd 100644
--- a/docs/.vitepress/theme/components/appendix/ai-history/AttentionMechanismDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/ai-history/AttentionMechanismDemo.vue
@@ -1,199 +1,50 @@
 <template>
-  <div class="attention-mechanism-demo">
-    <el-card shadow="hover">
-      <template #header>
-        <div class="card-header">
-          <h4>👁️ 注意力机制演示</h4>
-          <p class="subtitle">
-            点击词语，观察它如何"关注"句子中的其他词
-          </p>
+  <div class="demo-card">
+    <div class="attention-layout">
+      <div class="sentence-col">
+        <div class="col-label">处理「<strong>他</strong>」时的注意力分配：</div>
+        <div class="sentence-box">
+          <span v-for="(word, i) in sentence" :key="i" class="word-token" :class="{ focus: i === focusIdx }">{{ word }}</span>
         </div>
-      </template>
-
-      <div class="sentence-container">
-        <div class="sentence">
-          <el-tag
-            v-for="(word, index) in sentence"
-            :key="index"
-            :type="activeIndex === index ? 'primary' : 'info'"
-            :effect="activeIndex === index ? 'dark' : 'plain'"
-            class="word-token"
-            @click="selectWord(index)"
-          >
-            {{ word }}
-          </el-tag>
-        </div>
-
-        <div
-          v-if="activeIndex !== null"
-          class="attention-bars"
-        >
-          <div
-            v-for="(attention, index) in attentionWeights"
-            :key="index"
-            class="attention-item"
-          >
-            <div class="word-label">
-              {{ attention.word }}
-            </div>
-            <el-progress
-              :percentage="Math.round(attention.weight * 100)"
-              :status="attention.weight > 0.5 ? 'exception' : ''"
-              :color="customColors"
-              class="attention-progress"
-            />
-          </div>
-        </div>
-        <el-empty
-          v-else
-          description="👆 点击句子中的任意词语开始"
-          :image-size="60"
-        />
       </div>
-
-      <el-collapse-transition>
-        <div
-          v-if="activeIndex !== null"
-          class="explanation-panel"
-        >
-          <el-alert
-            type="success"
-            :closable="false"
-            show-icon
-            class="insight-alert"
-          >
-            <template #title>
-              <span class="insight-title">关键洞察</span>
-            </template>
-            <p>{{ getInsight(activeIndex) }}</p>
-          </el-alert>
+      <div class="bars-col">
+        <div class="attention-item" v-for="(item, i) in weights" :key="i">
+          <span class="bar-word" :class="{ focus: i === focusIdx }">{{ item.word }}</span>
+          <div class="bar-bg">
+            <div class="bar-fill" :style="{ width: item.w * 100 + '%', background: barColor(item.w) }"></div>
+          </div>
+          <span class="bar-pct">{{ Math.round(item.w * 100) }}%</span>
         </div>
-      </el-collapse-transition>
-    </el-card>
+      </div>
+    </div>
+    <div class="caption">
+      「他」虽在句中间，模型却把 65% 注意力精准投向句首的「小明」，跨越距离识别代词指代
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
-
-const sentence = ref(['小明', '把', '苹果', '给了', '他', '的', '母亲'])
-const activeIndex = ref(null)
-
-const customColors = [
-  { color: '#909399', percentage: 20 },
-  { color: '#e6a23c', percentage: 40 },
-  { color: '#f56c6c', percentage: 80 },
-  { color: '#67c23a', percentage: 100 }
-]
-
-// 注意力权重矩阵（模拟）
-const attentionMatrix = {
-  0: [0.15, 0.05, 0.6, 0.05, 0.05, 0.05, 0.05], // 小明 主要关注 苹果、他
-  1: [0.1, 0.1, 0.4, 0.3, 0.05, 0.03, 0.02], // 把 主要关注 苹果、给了
-  2: [0.5, 0.1, 0.15, 0.15, 0.05, 0.03, 0.02], // 苹果 主要关注 小明
-  3: [0.1, 0.1, 0.35, 0.15, 0.2, 0.05, 0.05], // 给了 主要关注 苹果、他
-  4: [0.65, 0.05, 0.1, 0.1, 0.05, 0.03, 0.02], // 他 主要关注 小明
-  5: [0.08, 0.05, 0.07, 0.08, 0.62, 0.05, 0.05], // 的 主要关注 他
-  6: [0.25, 0.1, 0.15, 0.15, 0.2, 0.1, 0.05] // 母亲 关注多个词
-}
-
-const insights = {
-  0: '当模型处理"小明"时，它最关注"苹果"（60%），因为这表明是"谁"拥有苹果。',
-  1: '"把"是介词，模型关注"苹果"和"给了"，理解动作的对象和方向。',
-  2: '"苹果"作为宾语，主要关注主语"小明"，确定归属关系。',
-  3: '"给了"关注"苹果"和"他"，理解传递动作的对象。',
-  4: '"他"最关注"小明"（65%），因为"他"指代的就是"小明"！',
-  5: '"的"连接"他"和"母亲"，主要关注"他"（62%）。',
-  6: '"母亲"作为句末宾语，关注前面的多个词语来理解完整语境。'
-}
-
-const attentionWeights = computed(() => {
-  if (activeIndex.value === null) return []
-
-  return sentence.value.map((word, index) => ({
-    word,
-    weight: attentionMatrix[activeIndex.value][index]
-  }))
-})
-
-const selectWord = (index) => {
-  activeIndex.value = index
-}
-
-const getInsight = (index) => {
-  return insights[index]
-}
+const sentence = ['小明', '把', '苹果', '给了', '他', '的', '母亲']
+const focusIdx = 4
+const attn = [0.65, 0.05, 0.10, 0.10, 0.05, 0.03, 0.02]
+const weights = sentence.map((word, i) => ({ word, w: attn[i] }))
+const barColor = (v) => v > 0.5 ? '#dc2626' : v > 0.15 ? '#d97706' : v > 0.06 ? '#059669' : 'var(--vp-c-divider)'
 </script>
 
 <style scoped>
-.attention-mechanism-demo {
-  margin: 20px 0;
-}
-
-.card-header h4 {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.subtitle {
-  font-size: 13px;
-  color: var(--vp-c-text-2);
-  margin: 4px 0 0;
-}
-
-.sentence {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  justify-content: center;
-  margin-bottom: 24px;
-  padding: 16px;
-  background-color: var(--vp-c-bg-alt);
-  border-radius: 6px;
-}
-
-.word-token {
-  cursor: pointer;
-  font-size: 16px;
-  padding: 8px 16px;
-  transition: all 0.2s;
-}
-
-.word-token:hover {
-  transform: translateY(-2px);
-}
-
-.attention-bars {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  margin-bottom: 20px;
-}
-
-.attention-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.word-label {
-  width: 40px;
-  text-align: right;
-  font-weight: bold;
-  font-size: 14px;
-}
-
-.attention-progress {
-  flex: 1;
-}
-
-.explanation-panel {
-  margin-top: 16px;
-}
-
-.insight-title {
-  font-weight: bold;
-  font-size: 14px;
-}
+.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1.25rem; margin: 1rem 0; }
+.attention-layout { display: grid; grid-template-columns: 1fr 1.3fr; gap: 1rem; background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 6px; padding: 0.9rem; margin-bottom: 0.5rem; }
+@media (max-width: 560px) { .attention-layout { grid-template-columns: 1fr; } }
+.col-label { font-size: 0.76rem; color: var(--vp-c-text-2); margin-bottom: 0.5rem; font-weight: bold; }
+.sentence-box { display: flex; flex-wrap: wrap; gap: 0.35rem; background: var(--vp-c-bg-alt); padding: 0.6rem; border-radius: 5px; border: 1px dashed var(--vp-c-divider); }
+.word-token { font-size: 0.88rem; font-weight: bold; padding: 0.2rem 0.5rem; background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 4px; }
+.word-token.focus { background: var(--vp-c-brand); color: white; border-color: var(--vp-c-brand); }
+.bars-col { display: flex; flex-direction: column; gap: 0.3rem; justify-content: center; }
+.attention-item { display: flex; align-items: center; gap: 0.4rem; }
+.bar-word { width: 30px; text-align: right; font-size: 0.8rem; font-weight: bold; color: var(--vp-c-text-2); flex-shrink: 0; }
+.bar-word.focus { color: var(--vp-c-brand); }
+.bar-bg { flex: 1; height: 12px; background: var(--vp-c-bg-alt); border-radius: 6px; overflow: hidden; border: 1px solid var(--vp-c-divider); }
+.bar-fill { height: 100%; border-radius: 6px; }
+.bar-pct { font-size: 0.7rem; font-weight: bold; color: var(--vp-c-text-2); width: 30px; flex-shrink: 0; }
+.caption { font-size: 0.75rem; color: var(--vp-c-text-3); text-align: center; }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/ai-history/BackpropagationDemo.vue b/docs/.vitepress/theme/components/appendix/ai-history/BackpropagationDemo.vue
index bcfd67d..4d4bc0f 100644
--- a/docs/.vitepress/theme/components/appendix/ai-history/BackpropagationDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/ai-history/BackpropagationDemo.vue
@@ -1,332 +1,54 @@
 <template>
-  <div class="backpropagation-demo">
-    <el-card shadow="hover">
-      <template #header>
-        <div class="card-header">
-          <h4>🔄 反向传播演示</h4>
-          <p class="subtitle">
-            观察神经网络如何通过误差反向调整权重
-          </p>
-        </div>
-      </template>
-
-      <div class="demo-content">
-        <div class="network-view">
-          <svg
-            class="network-svg"
-            viewBox="0 0 600 300"
-          >
-            <!-- Layers visualization -->
-            <g
-              v-for="(layer, lIndex) in 3"
-              :key="lIndex"
-            >
-              <text
-                :x="100 + lIndex * 200"
-                y="20"
-                text-anchor="middle"
-                class="layer-label"
-                fill="currentColor"
-              >
-                {{
-                  lIndex === 0 ? '输入层' : lIndex === 1 ? '隐藏层' : '输出层'
-                }}
-              </text>
-
-              <circle
-                v-for="n in 3"
-                :key="`${lIndex}-${n}`"
-                :cx="100 + lIndex * 200"
-                :cy="60 + n * 70"
-                :r="25"
-                :class="['neuron', getNeuronClass(lIndex, n)]"
-              />
-            </g>
-
-            <!-- Connections with error flow -->
-            <line
-              v-for="conn in connections"
-              :key="conn.id"
-              :x1="conn.x1"
-              :y1="conn.y1"
-              :x2="conn.x2"
-              :y2="conn.y2"
-              :stroke="conn.color"
-              :stroke-width="conn.width"
-              :opacity="conn.opacity"
-              class="connection"
-            />
-          </svg>
-        </div>
-
-        <el-divider />
-
-        <div class="controls-panel">
-          <el-steps
-            :active="currentStep"
-            align-center
-            finish-status="success"
-          >
-            <el-step
-              v-for="(step, index) in steps"
-              :key="index"
-              :title="step"
-            />
-          </el-steps>
-
-          <div class="error-display mt-4">
-            <div class="flex justify-between mb-2">
-              <span class="text-sm">误差 (Loss)</span>
-              <span class="text-sm font-bold">{{ errorValue.toFixed(4) }}</span>
-            </div>
-            <el-progress
-              :percentage="Math.round(errorValue * 100)"
-              :color="customColors"
-              :striped="currentStep === 2"
-              :striped-flow="currentStep === 2"
-            />
-          </div>
-
-          <el-alert
-            :title="explanations[currentStep]"
-            type="info"
-            show-icon
-            :closable="false"
-            class="mt-4"
-          />
-
-          <div class="action-buttons mt-4 flex justify-center gap-4">
-            <el-button
-              :disabled="currentStep === 0"
-              @click="resetDemo"
-            >
-              重置
-            </el-button>
-            <el-button
-              type="primary"
-              :disabled="currentStep >= 4"
-              @click="nextStep"
-            >
-              {{ currentStep < 4 ? '下一步' : '完成' }}
-            </el-button>
-          </div>
-        </div>
+  <div class="demo-card">
+    <div class="bp-flow">
+      <div class="step-block" v-for="(step, i) in steps" :key="i" :style="{ borderTopColor: step.color }">
+        <div class="step-num" :style="{ background: step.color }">{{ i + 1 }}</div>
+        <div class="step-icon">{{ step.icon }}</div>
+        <div class="step-name">{{ step.name }}</div>
+        <div class="step-desc">{{ step.desc }}</div>
       </div>
-    </el-card>
+    </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>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
-
-const currentStep = ref(0)
-const errorValue = ref(0.95)
-const steps = ['前向传播', '计算误差', '反向传播', '更新权重']
-const explanations = [
-  '输入数据通过各层传递，得到预测输出。就像学生做完了一套试卷。',
-  '对比预测值和真实值，计算误差。就像老师批改试卷，算出得了多少分（错得有多离谱）。',
-  '将误差从输出层反向传递到各层。就像老师把错题反馈给学生，告诉他是哪一步思路错了。',
-  '根据误差梯度调整每个神经元的权重。学生根据反馈修正自己的理解（权重），下次就能做对了。',
-  '演示完成！通过不断重复这个过程，网络就学会了任务。'
+const steps = [
+  { icon: '➡️', name: '前向传播', desc: '数据流过网络，得出预测', color: '#3b82f6' },
+  { icon: '📐', name: '计算误差', desc: '预测值 vs 正确答案，算 Loss', color: '#d97706' },
+  { icon: '⬅️', name: '反向传播', desc: '逐层追溯每个权重的"责任"', color: '#dc2626' },
+  { icon: '⚙️', name: '更新权重', desc: '按责任微调，减少下次误差', color: '#059669' },
 ]
-
-const customColors = [
-  { color: '#67c23a', percentage: 20 },
-  { color: '#e6a23c', percentage: 50 },
-  { color: '#f56c6c', percentage: 100 }
-]
-
-const connections = ref([])
-
-// Generate initial connections
-const initConnections = () => {
-  const conns = []
-  // Input -> Hidden
-  for (let i = 1; i <= 3; i++) {
-    for (let j = 1; j <= 3; j++) {
-      conns.push({
-        id: `i${i}-h${j}`,
-        x1: 100,
-        y1: 60 + i * 70,
-        x2: 300,
-        y2: 60 + j * 70,
-        width: 2,
-        color: '#dcdfe6',
-        opacity: 0.5
-      })
-    }
+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
+    pts.push(`${x},${y}`)
   }
-  // Hidden -> Output
-  for (let i = 1; i <= 3; i++) {
-    for (let j = 1; j <= 3; j++) {
-      conns.push({
-        id: `h${i}-o${j}`,
-        x1: 300,
-        y1: 60 + i * 70,
-        x2: 500,
-        y2: 60 + j * 70,
-        width: 2,
-        color: '#dcdfe6',
-        opacity: 0.5
-      })
-    }
-  }
-  connections.value = conns
-}
-
-const getNeuronClass = (layerIndex, neuronIndex) => {
-  if (currentStep.value === 0) return 'active' // Forward
-  if (currentStep.value === 2) {
-    // Backward
-    if (layerIndex === 2) return 'error-source'
-    if (layerIndex === 1) return 'error-passing'
-  }
-  if (currentStep.value === 3) return 'updating' // Update
-  return ''
-}
-
-const nextStep = () => {
-  if (currentStep.value >= 4) return
-  currentStep.value++
-
-  if (currentStep.value === 1) {
-    // Calculate Error
-    // Visual effect only
-  } else if (currentStep.value === 2) {
-    // Backprop: highlight connections red
-    connections.value.forEach((c) => {
-      c.color = '#f56c6c'
-      c.width = 4
-      c.opacity = 1
-    })
-  } else if (currentStep.value === 3) {
-    // Update weights: error drops
-    const reduceError = setInterval(() => {
-      if (errorValue.value > 0.1) {
-        errorValue.value -= 0.05
-      } else {
-        clearInterval(reduceError)
-      }
-    }, 50)
-
-    connections.value.forEach((c) => {
-      c.color = '#67c23a'
-      c.width = 2
-      c.opacity = 0.8
-    })
-  }
-}
-
-const resetDemo = () => {
-  currentStep.value = 0
-  errorValue.value = 0.95
-  initConnections()
-}
-
-onMounted(() => {
-  initConnections()
-})
+  return pts.join(' ')
+})()
 </script>
 
 <style scoped>
-.backpropagation-demo {
-  margin: 20px 0;
-}
-
-.card-header h4 {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.subtitle {
-  font-size: 13px;
-  color: var(--vp-c-text-2);
-  margin: 4px 0 0;
-}
-
-.network-view {
-  display: flex;
-  justify-content: center;
-  background-color: var(--vp-c-bg-alt);
-  border-radius: 6px;
-  padding: 10px;
-}
-
-.network-svg {
-  width: 100%;
-  max-width: 600px;
-  height: auto;
-}
-
-.layer-label {
-  font-size: 14px;
-  font-weight: bold;
-  fill: var(--vp-c-text-2);
-}
-
-.neuron {
-  fill: var(--vp-c-bg);
-  stroke: var(--vp-c-text-2);
-  stroke-width: 2;
-  transition: all 0.5s;
-}
-
-.neuron.active {
-  fill: var(--el-color-primary-light-9);
-  stroke: var(--el-color-primary);
-}
-
-.neuron.error-source {
-  fill: var(--el-color-danger-light-9);
-  stroke: var(--el-color-danger);
-  filter: drop-shadow(0 0 5px var(--el-color-danger));
-}
-
-.neuron.error-passing {
-  fill: var(--el-color-warning-light-9);
-  stroke: var(--el-color-warning);
-}
-
-.neuron.updating {
-  fill: var(--el-color-success-light-9);
-  stroke: var(--el-color-success);
-  r: 28; /* Pulse effect */
-}
-
-.connection {
-  transition: all 0.5s;
-}
-
-.mt-4 {
-  margin-top: 16px;
-}
-
-.mb-2 {
-  margin-bottom: 8px;
-}
-
-.flex {
-  display: flex;
-}
-
-.justify-between {
-  justify-content: space-between;
-}
-
-.justify-center {
-  justify-content: center;
-}
-
-.gap-4 {
-  gap: 16px;
-}
-
-.text-sm {
-  font-size: 14px;
-}
-
-.font-bold {
-  font-weight: bold;
-}
+.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1.25rem; margin: 1rem 0; }
+.bp-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 0.8rem; }
+@media (max-width: 600px) { .bp-flow { grid-template-columns: repeat(2, 1fr); } }
+.step-block { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-top: 3px solid; border-radius: 6px; padding: 0.7rem 0.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; text-align: center; }
+.step-num { width: 16px; height: 16px; border-radius: 50%; color: white; font-size: 0.6rem; font-weight: bold; display: flex; align-items: center; justify-content: center; }
+.step-icon { font-size: 1.2rem; }
+.step-name { font-weight: bold; font-size: 0.78rem; }
+.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); }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/ai-history/CombinatorialExplosionDemo.vue b/docs/.vitepress/theme/components/appendix/ai-history/CombinatorialExplosionDemo.vue
index 90e5add..7b8b46c 100644
--- a/docs/.vitepress/theme/components/appendix/ai-history/CombinatorialExplosionDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/ai-history/CombinatorialExplosionDemo.vue
@@ -1,278 +1,3 @@
 <template>
-  <div class="combinatorial-explosion-demo">
-    <el-card shadow="hover">
-      <template #header>
-        <div class="card-header">
-          <h4>🎯 组合爆炸模拟器</h4>
-          <p class="subtitle">
-            亲手体验"规则指数增长"的恐怖
-          </p>
-        </div>
-      </template>
-
-      <div class="demo-content">
-        <div class="controls-grid">
-          <div class="control-item">
-            <div class="label-row">
-              <span class="label-icon">🎨</span>
-              <span class="label-text">物体特征数量: {{ featureCount }}</span>
-            </div>
-            <el-slider
-              v-model="featureCount"
-              :min="2"
-              :max="6"
-              show-stops
-              :marks="{ 2: '2', 4: '4', 6: '6' }"
-            />
-            <div class="preview-tags">
-              <el-tag
-                v-for="i in featureCount"
-                :key="i"
-                size="small"
-                :type="getFeatureTagType(i)"
-                effect="plain"
-              >
-                特征{{ i }}
-              </el-tag>
-            </div>
-          </div>
-
-          <div class="control-item">
-            <div class="label-row">
-              <span class="label-icon">🔢</span>
-              <span class="label-text">每个特征的可能值: {{ valuesPerFeature }}</span>
-            </div>
-            <el-slider
-              v-model="valuesPerFeature"
-              :min="2"
-              :max="4"
-              show-stops
-              :marks="{ 2: '2', 3: '3', 4: '4' }"
-            />
-          </div>
-        </div>
-
-        <el-divider />
-
-        <div class="visualization-panel">
-          <div class="counter-display">
-            <el-statistic
-              title="需要的规则总数"
-              :value="totalRules"
-              value-style="font-weight: bold; color: var(--el-color-primary)"
-            >
-              <template #suffix>
-                <span class="formula-suffix">= {{ valuesPerFeature }}<sup>{{ featureCount }}</sup></span>
-              </template>
-            </el-statistic>
-            <el-tag
-              :type="complexityInfo.type"
-              effect="dark"
-              class="mt-2"
-            >
-              {{ complexityInfo.label }}
-            </el-tag>
-          </div>
-
-          <div class="action-buttons mt-4">
-            <el-button
-              type="primary"
-              :disabled="ruleCount >= maxRules"
-              @click="addRule"
-            >
-              ✨ 添加规则 ({{ ruleCount }}/{{ maxRules }})
-            </el-button>
-            <el-button @click="resetRules">
-              🔄 重置
-            </el-button>
-          </div>
-
-          <div class="rules-container mt-4">
-            <transition-group
-              name="el-zoom-in-center"
-              tag="div"
-              class="rules-grid"
-            >
-              <div
-                v-for="(rule, index) in displayedRules"
-                :key="rule.id"
-                class="rule-card-mini"
-                :style="{ borderColor: rule.color }"
-              >
-                <div class="rule-idx">
-                  #{{ index + 1 }}
-                </div>
-                <div class="rule-dots">
-                  <span
-                    v-for="d in 3"
-                    :key="d"
-                    class="dot"
-                    :style="{ backgroundColor: rule.color }"
-                  />
-                </div>
-              </div>
-            </transition-group>
-          </div>
-
-          <el-alert
-            v-if="showWarning"
-            title="规则太多了！"
-            description="这就是'组合爆炸'。仅仅增加一点点复杂度，规则数量就会爆炸式增长，人类根本写不完。"
-            type="error"
-            show-icon
-            class="mt-4"
-          />
-        </div>
-      </div>
-    </el-card>
-  </div>
+  <div></div>
 </template>
-
-<script setup>
-import { ref, computed, watch } from 'vue'
-
-const featureCount = ref(3)
-const valuesPerFeature = ref(2)
-const displayedRules = ref([])
-const maxRules = 20 // Visual limit
-
-const totalRules = computed(() =>
-  Math.pow(valuesPerFeature.value, featureCount.value)
-)
-const ruleCount = computed(() => displayedRules.value.length)
-const showWarning = computed(() => totalRules.value > 50)
-
-const complexityInfo = computed(() => {
-  if (totalRules.value <= 10)
-    return { label: '简单 (可人工处理)', type: 'success' }
-  if (totalRules.value <= 50)
-    return { label: '中等 (有点累了)', type: 'warning' }
-  return { label: '极难 (组合爆炸!)', type: 'danger' }
-})
-
-const getFeatureTagType = (i) => {
-  const types = ['', 'success', 'warning', 'danger', 'info']
-  return types[i % types.length]
-}
-
-const addRule = () => {
-  if (ruleCount.value >= maxRules) return
-
-  const colors = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399']
-  displayedRules.value.push({
-    id: Date.now(),
-    color: colors[Math.floor(Math.random() * colors.length)]
-  })
-}
-
-const resetRules = () => {
-  displayedRules.value = []
-}
-
-// Reset rules when parameters change
-watch([featureCount, valuesPerFeature], () => {
-  resetRules()
-})
-</script>
-
-<style scoped>
-.combinatorial-explosion-demo {
-  margin: 20px 0;
-}
-
-.card-header h4 {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.subtitle {
-  font-size: 13px;
-  color: var(--vp-c-text-2);
-  margin: 4px 0 0;
-}
-
-.controls-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 20px;
-}
-
-@media (max-width: 640px) {
-  .controls-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-.label-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 8px;
-  font-weight: 500;
-}
-
-.preview-tags {
-  display: flex;
-  gap: 4px;
-  flex-wrap: wrap;
-  margin-top: 8px;
-}
-
-.counter-display {
-  text-align: center;
-  background-color: var(--vp-c-bg-alt);
-  padding: 16px;
-  border-radius: 6px;
-}
-
-.formula-suffix {
-  font-size: 0.6em;
-  color: var(--vp-c-text-2);
-  margin-left: 8px;
-}
-
-.rules-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  justify-content: center;
-  min-height: 60px;
-}
-
-.rule-card-mini {
-  width: 50px;
-  height: 50px;
-  border: 2px solid;
-  border-radius: 6px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--vp-c-bg);
-}
-
-.rule-idx {
-  font-size: 10px;
-  color: var(--vp-c-text-2);
-}
-
-.rule-dots {
-  display: flex;
-  gap: 2px;
-  margin-top: 2px;
-}
-
-.dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-}
-
-.mt-2 {
-  margin-top: 8px;
-}
-.mt-4 {
-  margin-top: 16px;
-}
-</style>
diff --git a/docs/.vitepress/theme/components/appendix/ai-history/DiscriminativeVsGenerativeDemo.vue b/docs/.vitepress/theme/components/appendix/ai-history/DiscriminativeVsGenerativeDemo.vue
index 41e87e8..7b36d13 100644
--- a/docs/.vitepress/theme/components/appendix/ai-history/DiscriminativeVsGenerativeDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/ai-history/DiscriminativeVsGenerativeDemo.vue
@@ -1,327 +1,36 @@
 <template>
-  <div class="discriminative-vs-generative-demo">
-    <el-card shadow="hover">
-      <template #header>
-        <div class="card-header">
-          <h4>🎯 判别式 vs 生成式 AI</h4>
-          <p class="subtitle">
-            理解两种不同的 AI 范式
-          </p>
+  <div class="demo-card">
+    <div class="schools-grid">
+      <div class="school-card" v-for="s in schools" :key="s.name" :style="{ borderTopColor: s.color }">
+        <div class="card-head">
+          <span class="school-icon">{{ s.icon }}</span>
+          <span class="school-name" :style="{ color: s.color }">{{ s.name }}</span>
         </div>
-      </template>
-
-      <div class="comparison-container">
-        <el-row :gutter="20">
-          <!-- Discriminative AI -->
-          <el-col
-            :xs="24"
-            :sm="12"
-          >
-            <el-card
-              shadow="always"
-              class="ai-panel discriminative"
-              :class="{ active: mode === 'discriminative' }"
-              @click="mode = 'discriminative'"
-            >
-              <div class="panel-header">
-                <div class="icon">
-                  🔍
-                </div>
-                <h5>判别式 AI</h5>
-                <el-tag
-                  size="small"
-                  type="success"
-                >
-                  分类/识别
-                </el-tag>
-              </div>
-
-              <div class="panel-content">
-                <div class="input-output">
-                  <div class="io-box input">
-                    <div class="io-label">
-                      输入
-                    </div>
-                    <div class="io-content">
-                      <div class="svg-placeholder green">
-                        <span class="svg-text">猫图</span>
-                      </div>
-                    </div>
-                  </div>
-
-                  <div class="arrow">
-                    <el-icon><Bottom /></el-icon>
-                  </div>
-
-                  <div class="io-box output">
-                    <div class="io-label">
-                      输出
-                    </div>
-                    <div class="io-content">
-                      <el-tag
-                        effect="dark"
-                        type="success"
-                      >
-                        这是猫
-                      </el-tag>
-                      <div class="probability">
-                        置信度: 98%
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                <div class="examples">
-                  <h6>典型应用:</h6>
-                  <div class="example-tags">
-                    <el-tag
-                      v-for="tag in [
-                        '图像分类',
-                        '垃圾邮件过滤',
-                        '疾病诊断',
-                        '人脸识别'
-                      ]"
-                      :key="tag"
-                      size="small"
-                      effect="plain"
-                    >
-                      {{ tag }}
-                    </el-tag>
-                  </div>
-                </div>
-              </div>
-            </el-card>
-          </el-col>
-
-          <!-- Generative AI -->
-          <el-col
-            :xs="24"
-            :sm="12"
-          >
-            <el-card
-              shadow="always"
-              class="ai-panel generative"
-              :class="{ active: mode === 'generative' }"
-              @click="mode = 'generative'"
-            >
-              <div class="panel-header">
-                <div class="icon">
-                  ✨
-                </div>
-                <h5>生成式 AI</h5>
-                <el-tag
-                  size="small"
-                  type="primary"
-                >
-                  创造/生成
-                </el-tag>
-              </div>
-
-              <div class="panel-content">
-                <div class="input-output">
-                  <div class="io-box input">
-                    <div class="io-label">
-                      输入
-                    </div>
-                    <div class="io-content">
-                      <div class="prompt-text">
-                        "一只戴墨镜的猫"
-                      </div>
-                    </div>
-                  </div>
-
-                  <div class="arrow">
-                    <el-icon><Bottom /></el-icon>
-                  </div>
-
-                  <div class="io-box output">
-                    <div class="io-label">
-                      输出
-                    </div>
-                    <div class="io-content">
-                      <div class="svg-placeholder blue">
-                        <span class="svg-text">生成图像 ✓</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                <div class="examples">
-                  <h6>典型应用:</h6>
-                  <div class="example-tags">
-                    <el-tag
-                      v-for="tag in [
-                        'ChatGPT',
-                        'Midjourney',
-                        '代码生成',
-                        '音乐创作'
-                      ]"
-                      :key="tag"
-                      size="small"
-                      effect="plain"
-                      type="primary"
-                    >
-                      {{ tag }}
-                    </el-tag>
-                  </div>
-                </div>
-              </div>
-            </el-card>
-          </el-col>
-        </el-row>
+        <div class="school-idea">{{ s.idea }}</div>
+        <div class="school-rep">代表：{{ s.rep }}</div>
+        <div class="school-status">{{ s.status }}</div>
       </div>
-    </el-card>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import { Bottom } from '@element-plus/icons-vue'
-
-const mode = ref('discriminative')
+const schools = [
+  { name: '符号主义', icon: '📜', color: '#059669', idea: '智能 = 符号推理 / If-Then 规则', rep: '专家系统、深蓝', status: '→ 与连接主义融合（神经符号 AI）' },
+  { name: '连接主义', icon: '🧠', color: '#7c3aed', idea: '智能 = 神经元网络 + 海量数据', rep: 'AlphaGo、GPT 系列', status: '→ 主导大模型时代，当前主流' },
+  { name: '行为主义', icon: '🎮', color: '#d97706', idea: '智能 = 与环境互动 / 强化学习', rep: 'AlphaGo（RL 部分）', status: '→ 与连接主义融合（深度强化学习）' },
+]
 </script>
 
 <style scoped>
-.discriminative-vs-generative-demo {
-  margin: 20px 0;
-}
-
-.card-header h4 {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.subtitle {
-  font-size: 13px;
-  color: var(--vp-c-text-2);
-  margin: 4px 0 0;
-}
-
-.comparison-container {
-  padding: 10px;
-}
-
-.ai-panel {
-  cursor: pointer;
-  transition: all 0.3s;
-  border: 2px solid transparent;
-  height: 100%;
-}
-
-.ai-panel:hover {
-  transform: translateY(-2px);
-}
-
-.ai-panel.active {
-  border-color: var(--el-color-primary);
-  background-color: var(--el-color-primary-light-9);
-}
-
-.panel-header {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 16px;
-}
-
-.icon {
-  font-size: 24px;
-}
-
-.panel-header h5 {
-  margin: 0;
-  flex: 1;
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.panel-content {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.input-output {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 10px;
-  background-color: var(--vp-c-bg);
-  padding: 16px;
-  border-radius: 6px;
-}
-
-.io-box {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 5px;
-}
-
-.io-label {
-  font-size: 12px;
-  color: var(--vp-c-text-2);
-  text-transform: uppercase;
-}
-
-.io-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 5px;
-}
-
-.svg-placeholder {
-  width: 60px;
-  height: 60px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-}
-
-.svg-placeholder.green {
-  background-color: #48bb78;
-}
-
-.svg-placeholder.blue {
-  background-color: #667eea;
-}
-
-.svg-text {
-  color: white;
-  font-size: 12px;
-  font-weight: bold;
-}
-
-.prompt-text {
-  background-color: var(--vp-c-bg-alt);
-  padding: 8px;
-  border-radius: 4px;
-  font-family: monospace;
-  font-size: 12px;
-}
-
-.arrow {
-  color: var(--vp-c-text-2);
-}
-
-.probability {
-  font-size: 12px;
-  color: var(--vp-c-text-2);
-}
-
-.examples h6 {
-  margin: 0 0 8px 0;
-  font-size: 13px;
-  color: var(--vp-c-text-2);
-}
-
-.example-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
+.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1.25rem; margin: 1rem 0; }
+.schools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
+@media (max-width: 640px) { .schools-grid { grid-template-columns: 1fr; } }
+.school-card { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-top: 3px solid; border-radius: 6px; padding: 0.9rem; display: flex; flex-direction: column; gap: 0.4rem; }
+.card-head { display: flex; align-items: center; gap: 0.5rem; }
+.school-icon { font-size: 1.3rem; }
+.school-name { font-weight: bold; font-size: 0.9rem; }
+.school-idea { font-size: 0.78rem; color: var(--vp-c-text-1); background: var(--vp-c-bg-alt); padding: 0.35rem 0.5rem; border-radius: 4px; }
+.school-rep { font-size: 0.72rem; color: var(--vp-c-text-3); }
+.school-status { font-size: 0.72rem; color: var(--vp-c-text-2); border-top: 1px dashed var(--vp-c-divider); padding-top: 0.35rem; }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/ai-history/FoundationDemo.vue b/docs/.vitepress/theme/components/appendix/ai-history/FoundationDemo.vue
new file mode 100644
index 0000000..64357c2
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/ai-history/FoundationDemo.vue
@@ -0,0 +1,44 @@
+<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>
+      </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; }
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/ai-history/GPTEvolutionDemo.vue b/docs/.vitepress/theme/components/appendix/ai-history/GPTEvolutionDemo.vue
index d55f8f6..40445e7 100644
--- a/docs/.vitepress/theme/components/appendix/ai-history/GPTEvolutionDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/ai-history/GPTEvolutionDemo.vue
@@ -1,293 +1,40 @@
 <template>
-  <div class="gpt-evolution-demo">
-    <el-card
-      shadow="hover"
-      class="main-card"
-    >
-      <template #header>
-        <div class="card-header">
-          <span class="title">🚀 GPT 进化历程</span>
-          <span class="subtitle">从 GPT-1 到 GPT-4 的演进之路</span>
+  <div class="demo-card">
+    <div class="gpt-grid">
+      <div class="gpt-card" v-for="m in models" :key="m.name" :style="{ borderTopColor: m.color }">
+        <div class="card-top">
+          <span class="gpt-name" :style="{ color: m.color }">{{ m.name }}</span>
+          <span class="gpt-year">{{ m.year }}</span>
         </div>
-      </template>
-
-      <div class="demo-content">
-        <!-- Replace Vertical Timeline with Horizontal Tabs -->
-        <el-tabs
-          v-model="activeModelName"
-          type="card"
-          class="evolution-tabs"
-          @tab-click="handleTabClick"
-        >
-          <el-tab-pane
-            v-for="(model, index) in gptModels"
-            :key="index"
-            :label="model.name"
-            :name="model.name"
-          >
-            <div class="model-view">
-              <div class="model-info-header">
-                <el-tag
-                  effect="dark"
-                  size="large"
-                >
-                  {{ model.year }}
-                </el-tag>
-                <div class="model-stats">
-                  <div class="stat-item">
-                    <span class="label">参数量</span>
-                    <span class="value">{{ model.parameters }}</span>
-                  </div>
-                  <div class="stat-item">
-                    <span class="label">上下文</span>
-                    <span class="value">{{ model.context }}</span>
-                  </div>
-                </div>
-              </div>
-
-              <div class="model-description">
-                <p>{{ model.description }}</p>
-              </div>
-
-              <div class="model-milestones">
-                <span class="section-label">🎯 关键能力:</span>
-                <div class="tags-container">
-                  <el-tag 
-                    v-for="(milestone, i) in model.milestones" 
-                    :key="i" 
-                    size="small" 
-                    class="milestone-tag"
-                  >
-                    {{ milestone }}
-                  </el-tag>
-                </div>
-              </div>
-            </div>
-          </el-tab-pane>
-        </el-tabs>
-
-        <el-divider class="compact-divider">
-          进化趋势
-        </el-divider>
-
-        <div class="evolution-insight">
-          <div class="insight-row">
-            <div class="insight-item">
-              <el-icon><TrendCharts /></el-icon>
-              <div class="insight-text">
-                <span class="label">参数量增长</span>
-                <span class="value">10000倍+</span>
-              </div>
-            </div>
-            <div class="insight-item">
-              <el-icon><ChatDotSquare /></el-icon>
-              <div class="insight-text">
-                <span class="label">对话能力</span>
-                <span class="value">单轮 &rarr; 多轮</span>
-              </div>
-            </div>
-            <div class="insight-item">
-              <el-icon><Cpu /></el-icon>
-              <div class="insight-text">
-                <span class="label">逻辑推理</span>
-                <span class="value">弱 &rarr; 强</span>
-              </div>
-            </div>
-          </div>
+        <div class="param-val">{{ m.params }}</div>
+        <div class="param-bar-bg">
+          <div class="param-bar" :style="{ width: m.barWidth, background: m.color }"></div>
         </div>
+        <div class="gpt-key">{{ m.key }}</div>
       </div>
-    </el-card>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import { TrendCharts, ChatDotSquare, Cpu } from '@element-plus/icons-vue'
-
-const activeModelName = ref('GPT-1')
-
-const gptModels = [
-  {
-    name: 'GPT-1',
-    year: '2018',
-    parameters: '1.17 亿',
-    paramDetail: '117 Million',
-    context: '512 tokens',
-    contextDetail: '约 1 页文本',
-    capability: '无监督预训练',
-    description: '开创性地使用了 Transformer 解码器进行预训练，证明了无监督学习在 NLP 中的潜力。',
-    milestones: ['预训练+微调范式', 'BookCorpus 数据集', '单向 Transformer']
-  },
-  {
-    name: 'GPT-2',
-    year: '2019',
-    parameters: '15 亿',
-    paramDetail: '1.5 Billion',
-    context: '1024 tokens',
-    contextDetail: '约 2 页文本',
-    capability: '零样本任务',
-    description: '参数量扩大 10 倍，展示了惊人的零样本（Zero-shot）能力，能生成连贯的文本。',
-    milestones: ['WebText 数据集', 'Zero-shot Learning', '生成长文本']
-  },
-  {
-    name: 'GPT-3',
-    year: '2020',
-    parameters: '1750 亿',
-    paramDetail: '175 Billion',
-    context: '2048 tokens',
-    contextDetail: '约 4 页文本',
-    capability: '上下文学习 (ICL)',
-    description: '参数量爆炸式增长，涌现出上下文学习能力（In-Context Learning），无需微调即可完成任务。',
-    milestones: ['Few-shot Learning', 'Common Crawl', '能力涌现']
-  },
-  {
-    name: 'GPT-4',
-    year: '2023',
-    parameters: '1.8 万亿 (推测)',
-    paramDetail: '1.8 Trillion (Est.)',
-    context: '128k tokens',
-    contextDetail: '约 300 页书',
-    capability: '多模态 & 推理',
-    description: '引入多模态能力（识图），逻辑推理和代码能力大幅提升，支持超长上下文。',
-    milestones: ['多模态输入', 'MoE 架构', 'RLHF 对齐', '考试高手']
-  }
+const models = [
+  { name: 'GPT-1', year: '2018', params: '1.17 亿', barWidth: '2%', color: '#94a3b8', key: '预训练+微调范式确立' },
+  { name: 'GPT-2', year: '2019', params: '15 亿', barWidth: '6%', color: '#3b82f6', key: 'Zero-shot 零样本泛化' },
+  { name: 'GPT-3', year: '2020', params: '1750 亿', barWidth: '45%', color: '#7c3aed', key: '⚡ 涌现！上下文学习' },
+  { name: 'GPT-4', year: '2023', params: '~1.8 万亿', barWidth: '100%', color: '#dc2626', key: '多模态 + 复杂推理' },
 ]
-
-const handleTabClick = (tab) => {
-  // activeModelName updated automatically
-}
 </script>
 
 <style scoped>
-.gpt-evolution-demo {
-  margin: 10px 0;
-}
-
-.main-card {
-  border-radius: 6px;
-}
-
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.title {
-  font-weight: bold;
-  font-size: 16px;
-}
-
-.subtitle {
-  font-size: 12px;
-  color: #909399;
-}
-
-/* Compact Tabs */
-.evolution-tabs :deep(.el-tabs__header) {
-  margin-bottom: 15px;
-}
-
-.model-view {
-  padding: 0 10px;
-}
-
-.model-info-header {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-  margin-bottom: 12px;
-}
-
-.model-stats {
-  display: flex;
-  gap: 20px;
-}
-
-.stat-item {
-  display: flex;
-  flex-direction: column;
-}
-
-.stat-item .label {
-  font-size: 12px;
-  color: #909399;
-}
-
-.stat-item .value {
-  font-weight: bold;
-  color: #409eff;
-  font-size: 14px;
-}
-
-.model-description {
-  background-color: #f5f7fa;
-  padding: 10px;
-  border-radius: 4px;
-  margin-bottom: 12px;
-  font-size: 14px;
-  color: #606266;
-  line-height: 1.5;
-}
-
-.model-milestones {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.section-label {
-  font-size: 13px;
-  font-weight: bold;
-  color: #303133;
-}
-
-.milestone-tag {
-  margin-right: 4px;
-}
-
-.compact-divider {
-  margin: 15px 0;
-}
-
-.evolution-insight {
-  background-color: #f0f9eb;
-  padding: 10px;
-  border-radius: 4px;
-}
-
-.insight-row {
-  display: flex;
-  justify-content: space-around;
-}
-
-.insight-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.insight-text {
-  display: flex;
-  flex-direction: column;
-}
-
-.insight-text .label {
-  font-size: 12px;
-  color: #67c23a;
-}
-
-.insight-text .value {
-  font-weight: bold;
-  font-size: 13px;
-  color: #303133;
-}
-
-@media (max-width: 600px) {
-  .insight-row {
-    flex-direction: column;
-    gap: 10px;
-  }
-}
+.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1.25rem; margin: 1rem 0; }
+.gpt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
+@media (max-width: 640px) { .gpt-grid { grid-template-columns: repeat(2, 1fr); } }
+.gpt-card { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-top: 3px solid; border-radius: 6px; padding: 0.7rem; display: flex; flex-direction: column; gap: 0.35rem; }
+.card-top { display: flex; justify-content: space-between; }
+.gpt-name { font-weight: bold; font-size: 0.88rem; }
+.gpt-year { font-size: 0.68rem; color: var(--vp-c-text-3); }
+.param-val { font-size: 0.78rem; font-weight: bold; font-family: monospace; color: var(--vp-c-text-1); }
+.param-bar-bg { height: 6px; background: var(--vp-c-bg-alt); border-radius: 3px; overflow: hidden; }
+.param-bar { height: 100%; border-radius: 3px; min-width: 3px; }
+.gpt-key { font-size: 0.7rem; color: var(--vp-c-brand-1); background: var(--vp-c-brand-soft); padding: 0.15rem 0.4rem; border-radius: 3px; }
 </style>
\ No newline at end of file
diff --git a/docs/.vitepress/theme/components/appendix/ai-history/NeuralNetworkVisualizationDemo.vue b/docs/.vitepress/theme/components/appendix/ai-history/NeuralNetworkVisualizationDemo.vue
index ee0b935..29641b4 100644
--- a/docs/.vitepress/theme/components/appendix/ai-history/NeuralNetworkVisualizationDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/ai-history/NeuralNetworkVisualizationDemo.vue
@@ -1,424 +1,58 @@
 <template>
-  <div class="nn-viz-demo">
-    <el-card shadow="hover">
-      <template #header>
-        <div class="card-header">
-          <h4>神经网络：手动前向传播（可控演示）</h4>
-          <p class="subtitle">
-            用"开始 / 上一步 / 下一步"逐层推进，避免误把动画当成真实训练过程。
-          </p>
-        </div>
-      </template>
-
-      <div class="controls mb-4 flex gap-2">
-        <el-button-group>
-          <el-button
-            type="primary"
-            :disabled="step !== 0"
-            @click="start"
-          >
-            开始
-          </el-button>
-          <el-button
-            :disabled="step <= 1"
-            @click="prev"
-          >
-            上一步
-          </el-button>
-          <el-button
-            type="primary"
-            :disabled="step === 0 || step >= maxStep"
-            @click="next"
-          >
-            下一步
-          </el-button>
-          <el-button @click="reset">
-            重置
-          </el-button>
-        </el-button-group>
+  <div class="demo-card">
+    <div class="net-layout">
+      <div class="svg-wrap">
+        <svg viewBox="0 0 380 200" class="net-svg">
+          <line v-for="c in connections" :key="c.id" :x1="c.x1" :y1="c.y1" :x2="c.x2" :y2="c.y2" stroke="#94a3b8" stroke-width="1.2" opacity="0.35" />
+          <g v-for="layer in layers" :key="layer.idx">
+            <circle v-for="n in layer.nodes" :key="n.id" :cx="n.x" :cy="n.y" r="15" :fill="layer.fill" :stroke="layer.stroke" stroke-width="2" />
+          </g>
+          <text v-for="layer in layers" :key="'l-'+layer.idx" :x="layer.x" y="194" text-anchor="middle" :fill="layer.stroke" class="lbl">{{ layer.name }}</text>
+        </svg>
       </div>
-
-      <div
-        v-if="step > 0"
-        class="progress mb-4"
-      >
-        <el-steps
-          :active="step"
-          align-center
-          finish-status="success"
-        >
-          <el-step title="输入层" />
-          <el-step title="隐藏层" />
-          <el-step title="输出层" />
-        </el-steps>
-        <div class="step-info text-center mt-2 text-sm text-gray-500">
-          Step {{ step }} / {{ maxStep }} · {{ stepTitle }}
+      <div class="layer-cards">
+        <div class="layer-card" v-for="info in layerInfo" :key="info.name" :style="{ borderLeftColor: info.color }">
+          <div class="lc-title" :style="{ color: info.color }">{{ info.name }}</div>
+          <div class="lc-desc">{{ info.desc }}</div>
         </div>
       </div>
-
-      <div class="grid-layout">
-        <el-card
-          shadow="never"
-          class="viz-card"
-        >
-          <template #header>
-            <div class="card-title">
-              网络结构
-            </div>
-          </template>
-          <div class="network-container">
-            <svg
-              class="network-svg"
-              :viewBox="`0 0 ${svgWidth} ${svgHeight}`"
-            >
-              <defs>
-                <linearGradient
-                  id="conn"
-                  x1="0%"
-                  y1="0%"
-                  x2="100%"
-                  y2="0%"
-                >
-                  <stop
-                    offset="0%"
-                    :style="{
-                      stopColor: 'var(--el-color-primary)',
-                      stopOpacity: 0.18
-                    }"
-                  />
-                  <stop
-                    offset="100%"
-                    :style="{
-                      stopColor: 'var(--el-color-primary)',
-                      stopOpacity: 0.45
-                    }"
-                  />
-                </linearGradient>
-              </defs>
-
-              <g class="connections">
-                <line
-                  v-for="c in connections"
-                  :key="c.id"
-                  :x1="c.x1"
-                  :y1="c.y1"
-                  :x2="c.x2"
-                  :y2="c.y2"
-                  :class="{
-                    active: isConnectionActive(c),
-                    focus: isConnectionFocus(c)
-                  }"
-                  class="connection-line"
-                />
-              </g>
-
-              <g class="neurons">
-                <g
-                  v-for="n in neurons"
-                  :key="n.id"
-                  :transform="`translate(${n.x}, ${n.y})`"
-                  :class="{
-                    neuron: true,
-                    active: isNeuronActive(n),
-                    focus: focusLayer === n.layer
-                  }"
-                  @click="focusLayer = n.layer"
-                >
-                  <circle :r="n.r" />
-                  <text
-                    v-if="n.label"
-                    y="32"
-                    text-anchor="middle"
-                    class="neuron-label"
-                  >
-                    {{ n.label }}
-                  </text>
-                </g>
-              </g>
-            </svg>
-          </div>
-
-          <el-alert
-            title="提示：点击某一层的神经元可以“聚焦”该层（仅用于查看，不会触发自动流程）。"
-            type="info"
-            show-icon
-            :closable="false"
-            class="mt-2"
-          />
-        </el-card>
-
-        <el-card
-          shadow="never"
-          class="info-card"
-        >
-          <template #header>
-            <div class="card-title">
-              每一层在做什么
-            </div>
-          </template>
-          <div class="layers-info">
-            <el-collapse v-model="activeCollapse">
-              <el-collapse-item
-                v-for="(l, idx) in layerConfigs"
-                :key="l.name"
-                :title="l.name"
-                :name="idx"
-              >
-                <div class="layer-detail">
-                  <p>{{ l.desc }}</p>
-                  <div class="math-box">
-                    <code>{{ l.math }}</code>
-                  </div>
-                </div>
-              </el-collapse-item>
-            </el-collapse>
-          </div>
-        </el-card>
-      </div>
-    </el-card>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
-
-const svgWidth = 600
-const svgHeight = 300
-const step = ref(0)
-const maxStep = 3
-const focusLayer = ref(null)
-const activeCollapse = ref([0])
-
-// Mock logic for demo
-const layerConfigs = [
-  {
-    name: '输入层 (Input)',
-    desc: '接收原始数据（如图片的像素值）。',
-    math: 'x = [x1, x2, x3]'
-  },
-  {
-    name: '隐藏层 (Hidden)',
-    desc: '提取特征（如边缘、形状）。每个神经元计算加权和并激活。',
-    math: 'h = ReLU(W1·x + b1)'
-  },
-  {
-    name: '输出层 (Output)',
-    desc: '给出最终结果（如分类概率）。',
-    math: 'y = Softmax(W2·h + b2)'
-  }
+const W = 380, H = 185
+const layerDef = [
+  { name: '输入层', count: 3, xFrac: 0.13, color: '#3b82f6', fill: '#dbeafe' },
+  { name: '隐藏层', count: 4, xFrac: 0.5,  color: '#7c3aed', fill: '#ede9fe' },
+  { name: '输出层', count: 2, xFrac: 0.87, color: '#059669', fill: '#d1fae5' },
 ]
-
-const neurons = ref([])
-const connections = ref([])
-
-const stepTitle = computed(() => {
-  if (step.value === 0) return '准备就绪'
-  if (step.value === 1) return '输入数据进入网络'
-  if (step.value === 2) return '隐藏层提取特征'
-  if (step.value === 3) return '输出层得出结果'
-  return ''
+const layers = layerDef.map((l, idx) => {
+  const x = l.xFrac * W
+  const gap = Math.min(46, (H - 36) / (l.count - 1 || 1))
+  const startY = (H - gap * (l.count - 1)) / 2
+  return { idx, x, name: l.name, fill: l.fill, stroke: l.color, nodes: Array.from({ length: l.count }, (_, i) => ({ id: `${idx}-${i}`, x, y: startY + i * gap })) }
 })
-
-const initNetwork = () => {
-  // Simple layout logic
-  const layers = [3, 4, 2] // Neuron counts per layer
-  const layerX = [100, 300, 500]
-  const ns = []
-  const cs = []
-
-  layers.forEach((count, layerIdx) => {
-    const startY = (svgHeight - (count - 1) * 60) / 2
-    for (let i = 0; i < count; i++) {
-      ns.push({
-        id: `n-${layerIdx}-${i}`,
-        layer: layerIdx,
-        x: layerX[layerIdx],
-        y: startY + i * 60,
-        r: 20,
-        label: layerIdx === 0 ? `x${i + 1}` : layerIdx === 2 ? `y${i + 1}` : ''
-      })
-    }
-  })
-
-  // Create connections
-  ns.forEach((src) => {
-    ns.forEach((tgt) => {
-      if (tgt.layer === src.layer + 1) {
-        cs.push({
-          id: `c-${src.id}-${tgt.id}`,
-          srcId: src.id,
-          tgtId: tgt.id,
-          srcLayer: src.layer,
-          x1: src.x,
-          y1: src.y,
-          x2: tgt.x,
-          y2: tgt.y
-        })
-      }
-    })
-  })
-
-  neurons.value = ns
-  connections.value = cs
-}
-
-onMounted(() => {
-  initNetwork()
-})
-
-const start = () => {
-  step.value = 1
-  focusLayer.value = 0
-  activeCollapse.value = [0]
-}
-
-const next = () => {
-  if (step.value < maxStep) {
-    step.value++
-    focusLayer.value = step.value - 1
-    activeCollapse.value = [step.value - 1]
-  }
-}
-
-const prev = () => {
-  if (step.value > 1) {
-    step.value--
-    focusLayer.value = step.value - 1
-    activeCollapse.value = [step.value - 1]
-  }
-}
-
-const reset = () => {
-  step.value = 0
-  focusLayer.value = null
-  activeCollapse.value = [0]
-}
-
-const isNeuronActive = (n) => {
-  if (step.value === 0) return false
-  return n.layer < step.value
-}
-
-const isConnectionActive = (c) => {
-  if (step.value === 0) return false
-  return c.srcLayer < step.value - 1
-}
-
-const isConnectionFocus = (c) => {
-  // Optional: highlight connections related to focused layer
-  return false
+const connections = []
+for (let li = 0; li < layers.length - 1; li++) {
+  layers[li].nodes.forEach(a => { layers[li + 1].nodes.forEach(b => { connections.push({ id: `${a.id}-${b.id}`, x1: a.x, y1: a.y, x2: b.x, y2: b.y }) }) })
 }
+const layerInfo = [
+  { name: '输入层', desc: '原始像素 / 数值信号', color: '#3b82f6' },
+  { name: '隐藏层（可叠加多层）', desc: '底层识别边缘 → 中层识别形状 → 高层识别语义概念', color: '#7c3aed' },
+  { name: '输出层', desc: '最终分类或预测结果', color: '#059669' },
+]
 </script>
 
 <style scoped>
-.nn-viz-demo {
-  margin: 20px 0;
-}
-
-.card-header h4 {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.subtitle {
-  font-size: 13px;
-  color: var(--vp-c-text-2);
-  margin: 4px 0 0;
-}
-
-.mb-4 {
-  margin-bottom: 16px;
-}
-
-.mt-2 {
-  margin-top: 8px;
-}
-
-.flex {
-  display: flex;
-}
-
-.gap-2 {
-  gap: 8px;
-}
-
-.text-center {
-  text-align: center;
-}
-
-.text-sm {
-  font-size: 12px;
-}
-
-.text-gray-500 {
-  color: var(--vp-c-text-2);
-}
-
-.grid-layout {
-  display: grid;
-  grid-template-columns: 2fr 1fr;
-  gap: 20px;
-}
-
-@media (max-width: 768px) {
-  .grid-layout {
-    grid-template-columns: 1fr;
-  }
-}
-
-.network-container {
-  display: flex;
-  justify-content: center;
-  background-color: var(--vp-c-bg-alt);
-  border-radius: 6px;
-  padding: 10px;
-}
-
-.network-svg {
-  width: 100%;
-  height: auto;
-}
-
-.connection-line {
-  stroke: var(--vp-c-divider);
-  stroke-width: 2;
-  transition: all 0.5s;
-}
-
-.connection-line.active {
-  stroke: var(--el-color-primary);
-  opacity: 0.5;
-}
-
-.neuron circle {
-  fill: var(--vp-c-bg);
-  stroke: var(--vp-c-text-2);
-  stroke-width: 2;
-  transition: all 0.5s;
-  cursor: pointer;
-}
-
-.neuron.active circle {
-  fill: var(--el-color-primary-light-9);
-  stroke: var(--el-color-primary);
-}
-
-.neuron.focus circle {
-  stroke-width: 4;
-}
-
-.neuron-label {
-  font-size: 12px;
-  fill: var(--vp-c-text-1);
-}
-
-.math-box {
-  background-color: var(--vp-c-bg-alt);
-  padding: 8px;
-  border-radius: 4px;
-  margin-top: 8px;
-  font-family: monospace;
-  font-size: 12px;
-}
+.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1.25rem; margin: 1rem 0; }
+.net-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 6px; padding: 0.9rem; }
+@media (max-width: 600px) { .net-layout { grid-template-columns: 1fr; } }
+.svg-wrap { display: flex; align-items: center; justify-content: center; background: var(--vp-c-bg-alt); border-radius: 6px; }
+.net-svg { width: 100%; height: auto; }
+.lbl { font-size: 9px; font-weight: bold; }
+.layer-cards { display: flex; flex-direction: column; gap: 0.4rem; justify-content: center; }
+.layer-card { border-left: 3px solid; padding: 0.5rem 0.7rem; background: var(--vp-c-bg-alt); border-radius: 0 5px 5px 0; }
+.lc-title { font-weight: bold; font-size: 0.78rem; margin-bottom: 0.15rem; }
+.lc-desc { font-size: 0.73rem; color: var(--vp-c-text-2); line-height: 1.4; }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/ai-history/PerceptronDemo.vue b/docs/.vitepress/theme/components/appendix/ai-history/PerceptronDemo.vue
index 076af94..8119739 100644
--- a/docs/.vitepress/theme/components/appendix/ai-history/PerceptronDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/ai-history/PerceptronDemo.vue
@@ -1,288 +1,71 @@
 <template>
-  <div class="perceptron-demo">
-    <el-card shadow="hover">
-      <template #header>
-        <div class="card-header">
-          <h4>感知机 (Perceptron) 演示</h4>
-          <p class="subtitle">
-            最简单的神经元：输入 x 权重 + 偏置 = 输出
-          </p>
-        </div>
-      </template>
-
-      <div class="neuron-viz-container">
-        <!-- Inputs -->
-        <div class="col inputs-col">
-          <div class="node-wrapper">
-            <el-tag effect="dark">
-              输入 A
-            </el-tag>
-            <el-input-number
-              v-model="x1"
-              size="small"
-              :step="1"
-            />
-          </div>
-          <div class="node-wrapper">
-            <el-tag effect="dark">
-              输入 B
-            </el-tag>
-            <el-input-number
-              v-model="x2"
-              size="small"
-              :step="1"
-            />
-          </div>
-        </div>
-
-        <!-- Weights Visual -->
-        <div class="col weights-col">
-          <div class="weight-group">
-            <div
-              class="weight-line"
-              :style="{
-                height: Math.abs(w1) * 2 + 2 + 'px',
-                opacity: Math.abs(w1) / 5 + 0.2
-              }"
-            />
-            <div class="weight-control">
-              <span class="label">权重 A: {{ w1 }}</span>
-              <el-slider
-                v-model="w1"
-                :min="-5"
-                :max="5"
-                :step="0.1"
-                size="small"
-              />
-            </div>
-          </div>
-
-          <div class="weight-group">
-            <div
-              class="weight-line"
-              :style="{
-                height: Math.abs(w2) * 2 + 2 + 'px',
-                opacity: Math.abs(w2) / 5 + 0.2
-              }"
-            />
-            <div class="weight-control">
-              <span class="label">权重 B: {{ w2 }}</span>
-              <el-slider
-                v-model="w2"
-                :min="-5"
-                :max="5"
-                :step="0.1"
-                size="small"
-              />
-            </div>
-          </div>
-        </div>
-
-        <!-- Neuron Body -->
-        <div class="col neuron-col">
-          <div class="neuron-circle">
-            <div class="sum-symbol">
-              总分
-            </div>
-            <div class="sum-value">
-              {{ weightedSum.toFixed(1) }}
-            </div>
-          </div>
-          <div class="bias-control mt-2">
-            <span class="label">基础分 (Bias):</span>
-            <el-input-number
-              v-model="bias"
-              size="small"
-              :step="1"
-            />
-          </div>
-        </div>
-
-        <!-- Output -->
-        <div class="col output-col">
-          <el-icon class="arrow-icon">
-            <Right />
-          </el-icon>
-          <div class="node-wrapper">
-            <el-tag
-              :type="output > 0 ? 'success' : 'info'"
-              effect="dark"
-            >
-              结果 (Output)
-            </el-tag>
-            <div
-              class="output-value"
-              :class="{ active: output > 0 }"
-            >
-              {{ output }}
-            </div>
-          </div>
+  <div class="demo-card">
+    <div class="perceptron-layout">
+      <div class="inputs-col">
+        <div class="input-node" v-for="inp in inputs" :key="inp.label">
+          <span class="node-circle">{{ inp.val }}</span>
+          <span class="node-label">{{ inp.label }}</span>
         </div>
       </div>
-
-      <el-divider />
-
-      <div class="formula-bar">
-        <el-alert
-          type="info"
-          :closable="false"
-        >
-          <template #title>
-            <div class="formula-content">
-              <div>
-                <strong>总分计算: </strong>
-                <span class="calc-step">
-                  (输入A {{ x1 }} × 权重 {{ w1 }}) + (输入B {{ x2 }} × 权重 {{ w2 }}) + 基础分 {{ bias }} =
-                  {{ weightedSum.toFixed(1) }}
-                </span>
-              </div>
-              <div class="mt-1">
-                <strong>判断结果: </strong>
-                <span class="calc-step"> 
-                  {{ weightedSum.toFixed(1) }} {{ weightedSum > 0 ? '>' : '≤' }} 0 
-                  → 输出 {{ output }} ({{ output > 0 ? '激活' : '静默' }})
-                </span>
-              </div>
-            </div>
-          </template>
-        </el-alert>
+      <div class="weights-col">
+        <div class="weight-arrow" v-for="inp in inputs" :key="inp.label">
+          <span class="arrow">→</span>
+          <span class="w-tag">×{{ inp.weight }}</span>
+        </div>
       </div>
-    </el-card>
+      <div class="neuron-col">
+        <div class="neuron-circle">
+          <div class="n-sym">Σ</div>
+          <div class="n-val">{{ sum }}</div>
+        </div>
+        <span class="bias-tag">偏置 {{ bias }}</span>
+      </div>
+      <div class="act-col">
+        <span class="arrow big">→</span>
+        <div class="act-box">sum &gt; 0 ?</div>
+        <span class="arrow big">→</span>
+      </div>
+      <div class="output-col">
+        <div class="output-node" :class="{ on: output === 1 }">
+          <span class="out-val">{{ output }}</span>
+          <span class="out-lbl">{{ output ? '激活' : '静默' }}</span>
+        </div>
+      </div>
+    </div>
+    <div class="caption">
+      ① 输入特征&emsp;② 乘以权重（重要性）&emsp;③ 求和 + 偏置&emsp;④ 超过阈值就激活输出 1，否则输出 0
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
-import { Right } from '@element-plus/icons-vue'
-
-const x1 = ref(1)
-const x2 = ref(0)
-const w1 = ref(2.0)
-const w2 = ref(-1.0)
-const bias = ref(0)
-
-const weightedSum = computed(() => {
-  return x1.value * w1.value + x2.value * w2.value + bias.value
-})
-
-const output = computed(() => {
-  return weightedSum.value > 0 ? 1 : 0
-})
+import { computed } from 'vue'
+const inputs = [{ label: '特征 x₁', val: 1, weight: 0.6 }, { label: '特征 x₂', val: 0, weight: 0.4 }]
+const bias = -0.3
+const sum = computed(() => Number((inputs.reduce((s, i) => s + i.val * i.weight, 0) + bias).toFixed(2)))
+const output = computed(() => sum.value > 0 ? 1 : 0)
 </script>
 
 <style scoped>
-.perceptron-demo {
-  margin: 20px 0;
-}
-
-.card-header h4 {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.subtitle {
-  font-size: 13px;
-  color: var(--vp-c-text-2);
-  margin: 4px 0 0;
-}
-
-.neuron-viz-container {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 20px;
-  padding: 20px 0;
-  overflow-x: auto;
-}
-
-.col {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 20px;
-}
-
-.node-wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-}
-
-.weight-group {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4px;
-  width: 120px;
-}
-
-.weight-line {
-  width: 100%;
-  background-color: var(--el-color-primary);
-  height: 2px;
-  min-height: 2px;
-}
-
-.weight-control {
-  width: 100%;
-  text-align: center;
-}
-
-.label {
-  font-size: 12px;
-  color: var(--vp-c-text-2);
-}
-
-.neuron-circle {
-  width: 80px;
-  height: 80px;
-  border-radius: 50%;
-  border: 2px solid var(--el-color-primary);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--vp-c-bg);
-}
-
-.sum-symbol {
-  font-size: 24px;
-  font-weight: bold;
-}
-
-.sum-value {
-  font-family: monospace;
-}
-
-.arrow-icon {
-  font-size: 24px;
-  color: var(--vp-c-text-2);
-}
-
-.output-value {
-  font-size: 24px;
-  font-weight: bold;
-  color: var(--vp-c-text-2);
-}
-
-.output-value.active {
-  color: var(--el-color-success);
-}
-
-.mt-1 {
-  margin-top: 4px;
-}
-
-.mt-2 {
-  margin-top: 8px;
-}
-
-.formula-content code {
-  background-color: var(--vp-c-bg-alt);
-  padding: 2px 4px;
-  border-radius: 4px;
-  font-family: monospace;
-}
+.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1.25rem; margin: 1rem 0; }
+.perceptron-layout { display: flex; align-items: center; justify-content: center; gap: 0.5rem; background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-radius: 6px; padding: 1.2rem 0.8rem; flex-wrap: wrap; }
+.inputs-col, .weights-col, .neuron-col, .act-col, .output-col { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
+.input-node { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
+.node-circle { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; background: var(--vp-c-brand-soft); border: 2px solid var(--vp-c-brand); color: var(--vp-c-brand-1); }
+.node-label { font-size: 0.62rem; color: var(--vp-c-text-2); }
+.weight-arrow { display: flex; align-items: center; gap: 0.3rem; }
+.arrow { color: var(--vp-c-text-3); font-size: 1.1rem; }
+.arrow.big { font-size: 1.4rem; }
+.w-tag { font-size: 0.72rem; font-weight: bold; font-family: monospace; background: var(--vp-c-bg-alt); border: 1px solid var(--vp-c-divider); padding: 0.1rem 0.4rem; border-radius: 4px; color: var(--vp-c-brand-1); }
+.neuron-circle { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--vp-c-brand); background: var(--vp-c-bg-alt); display: flex; flex-direction: column; align-items: center; justify-content: center; }
+.n-sym { font-size: 1.2rem; font-weight: bold; color: var(--vp-c-brand); }
+.n-val { font-size: 0.8rem; font-weight: bold; font-family: monospace; }
+.bias-tag { font-size: 0.62rem; color: var(--vp-c-text-3); padding: 0.1rem 0.4rem; border: 1px dashed var(--vp-c-divider); border-radius: 4px; }
+.act-col { flex-direction: row; }
+.act-box { font-size: 0.72rem; font-family: monospace; background: var(--vp-c-bg-alt); border: 1px solid var(--vp-c-divider); border-radius: 6px; padding: 0.4rem 0.6rem; }
+.output-node { width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--vp-c-divider); background: var(--vp-c-bg-alt); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem; }
+.output-node.on { border-color: #059669; background: rgba(5,150,105,0.08); }
+.out-val { font-size: 1.3rem; font-weight: bold; }
+.out-lbl { font-size: 0.58rem; color: var(--vp-c-text-2); }
+.caption { font-size: 0.75rem; color: var(--vp-c-text-3); text-align: center; margin-top: 0.6rem; }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/ai-history/RuleBasedVsLearningDemo.vue b/docs/.vitepress/theme/components/appendix/ai-history/RuleBasedVsLearningDemo.vue
index 757660d..7da5691 100644
--- a/docs/.vitepress/theme/components/appendix/ai-history/RuleBasedVsLearningDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/ai-history/RuleBasedVsLearningDemo.vue
@@ -1,361 +1,49 @@
 <template>
-  <div class="rule-learning-demo">
-    <el-card shadow="hover">
-      <template #header>
-        <div class="card-header">
-          <h4>规则 vs 学习</h4>
-          <p class="subtitle">
-            对比：你写阈值 (规则) vs 让模型从数据里"推断"阈值 (学习)
-          </p>
+  <div class="demo-card">
+    <div class="demo-header">
+      <span class="title">关键发展路径总结</span>
+    </div>
+    <div class="path-flow">
+      <div class="path-item" v-for="(item, i) in path" :key="i">
+        <div class="path-card" :style="{ borderLeftColor: item.color }">
+          <div class="path-top">
+            <span class="path-icon" :style="{ background: item.color }">{{ i + 1 }}</span>
+            <div>
+              <div class="path-name">{{ item.name }}</div>
+              <div class="path-years">{{ item.years }}</div>
+            </div>
+          </div>
+          <div class="path-desc">{{ item.desc }}</div>
         </div>
-      </template>
-
-      <el-row :gutter="20">
-        <!-- Rule Based -->
-        <el-col
-          :xs="24"
-          :md="12"
-          class="mb-4-xs"
-        >
-          <el-card
-            shadow="never"
-            class="panel-card"
-          >
-            <template #header>
-              <div class="panel-title">
-                规则系统（手写 If/Else）
-              </div>
-            </template>
-            <div class="panel-content">
-              <div class="control-row">
-                <span class="label">阈值 size &gt;</span>
-                <el-input-number
-                  v-model="ruleThreshold"
-                  :min="1"
-                  :max="10"
-                  size="small"
-                />
-                <span class="text-xs text-gray">（必须明确写出）</span>
-              </div>
-
-              <div class="control-row mt-4">
-                <span class="label">测试输入 size</span>
-                <el-slider
-                  v-model="testInput"
-                  :min="1"
-                  :max="10"
-                  show-input
-                  input-size="small"
-                  class="flex-1"
-                />
-              </div>
-
-              <div
-                class="result-box mt-4"
-                :class="{
-                  good: ruleResult.label === '🍎',
-                  bad: ruleResult.label === '🍒'
-                }"
-              >
-                <div class="result-title">
-                  输出
-                </div>
-                <div class="result-value">
-                  {{ ruleResult.text }}
-                </div>
-                <div class="result-code">
-                  if (size &gt; {{ ruleThreshold }}) return 🍎 else return 🍒
-                </div>
-              </div>
-
-              <el-alert
-                title="当环境变化（比如'苹果平均变小了'），你需要手动改规则；规则越多，维护成本越高。"
-                type="warning"
-                :closable="false"
-                class="mt-4"
-              />
-            </div>
-          </el-card>
-        </el-col>
-
-        <!-- Machine Learning -->
-        <el-col
-          :xs="24"
-          :md="12"
-        >
-          <el-card
-            shadow="never"
-            class="panel-card"
-          >
-            <template #header>
-              <div class="panel-title">
-                机器学习（从样本推断边界）
-              </div>
-            </template>
-            <div class="panel-content">
-              <div class="control-row">
-                <el-input-number
-                  v-model="newSize"
-                  :min="1"
-                  :max="10"
-                  size="small"
-                  placeholder="Size"
-                />
-                <el-select
-                  v-model="newLabel"
-                  size="small"
-                  placeholder="Label"
-                  style="width: 120px"
-                >
-                  <el-option
-                    label="🍒 樱桃"
-                    value="🍒"
-                  />
-                  <el-option
-                    label="🍎 苹果"
-                    value="🍎"
-                  />
-                </el-select>
-                <el-button
-                  type="primary"
-                  size="small"
-                  @click="addSample"
-                >
-                  添加样本
-                </el-button>
-              </div>
-
-              <div class="samples-area mt-4">
-                <el-empty
-                  v-if="trainingData.length === 0"
-                  description="还没有样本：先添加 2-4 个样本再训练"
-                  :image-size="40"
-                />
-                <div
-                  v-else
-                  class="sample-chips"
-                >
-                  <el-tag
-                    v-for="(p, i) in trainingData"
-                    :key="p.id"
-                    closable
-                    :type="p.label === '🍎' ? 'danger' : 'info'"
-                    effect="plain"
-                    @close="removeSample(i)"
-                  >
-                    {{ p.size }} → {{ p.label }}
-                  </el-tag>
-                </div>
-              </div>
-
-              <div class="actions mt-4 flex gap-2">
-                <el-button
-                  type="success"
-                  :disabled="trainingData.length < 2"
-                  @click="train"
-                >
-                  训练（推断阈值）
-                </el-button>
-                <el-button @click="resetLearning">
-                  重置
-                </el-button>
-              </div>
-
-              <div
-                v-if="learnedThreshold !== null"
-                class="learned-result mt-4"
-              >
-                <el-alert
-                  type="success"
-                  :closable="false"
-                  show-icon
-                  title="学习完成！"
-                >
-                  <p>
-                    模型推断出阈值应为: <strong>{{ learnedThreshold }}</strong>
-                  </p>
-                  <p class="text-xs">
-                    (大于 {{ learnedThreshold }} 是苹果，否则是樱桃)
-                  </p>
-                </el-alert>
-              </div>
-            </div>
-          </el-card>
-        </el-col>
-      </el-row>
-    </el-card>
+        <div v-if="i < path.length - 1" class="path-connector">
+          <svg width="20" height="24" viewBox="0 0 20 24"><path d="M10 0 L10 18 L5 13 M10 18 L15 13" fill="none" stroke="var(--vp-c-text-3)" stroke-width="1.5" stroke-linecap="round" /></svg>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
-
-// Rule Based Logic
-const ruleThreshold = ref(5)
-const testInput = ref(6)
-
-const ruleResult = computed(() => {
-  if (testInput.value > ruleThreshold.value) {
-    return { label: '🍎', text: '🍎 苹果' }
-  } else {
-    return { label: '🍒', text: '🍒 樱桃' }
-  }
-})
-
-// ML Logic
-const newSize = ref(5)
-const newLabel = ref('🍎')
-const trainingData = ref([
-  { id: 1, size: 2, label: '🍒' },
-  { id: 2, size: 8, label: '🍎' }
-])
-const learnedThreshold = ref(null)
-
-const addSample = () => {
-  trainingData.value.push({
-    id: Date.now(),
-    size: newSize.value,
-    label: newLabel.value
-  })
-}
-
-const removeSample = (index) => {
-  trainingData.value.splice(index, 1)
-}
-
-const resetLearning = () => {
-  trainingData.value = []
-  learnedThreshold.value = null
-}
-
-const train = () => {
-  // Simple "training": find the boundary between cherry and apple
-  // Sort data by size
-  const sorted = [...trainingData.value].sort((a, b) => a.size - b.size)
-
-  // Find the first Apple
-  const firstAppleIndex = sorted.findIndex((item) => item.label === '🍎')
-
-  if (firstAppleIndex === -1) {
-    // All cherries
-    learnedThreshold.value = 10
-  } else if (firstAppleIndex === 0) {
-    // All apples
-    learnedThreshold.value = 0
-  } else {
-    // Boundary is between last cherry and first apple
-    const lastCherry = sorted[firstAppleIndex - 1]
-    const firstApple = sorted[firstAppleIndex]
-    learnedThreshold.value = (lastCherry.size + firstApple.size) / 2
-  }
-}
+const path = [
+  { name: '理论奠基', years: '1940s-1950s', desc: '图灵测试、达特茅斯会议，符号主义诞生', color: '#3b82f6' },
+  { name: '符号主义主导', years: '1960s-1980s', desc: '专家系统兴起与两次 AI 寒冬', color: '#059669' },
+  { name: '机器学习转型', years: '1990s-2000s', desc: '统计方法取代规则，连接主义复苏', color: '#d97706' },
+  { name: '深度学习革命', years: '2010s', desc: 'AlexNet、AlphaGo、Transformer 架构，连接主义成为主流', color: '#dc2626' },
+  { name: '大模型时代', years: '2018 至今', desc: 'GPT 系列、多模态融合，通用智能曙光初现', color: '#7c3aed' },
+]
 </script>
 
 <style scoped>
-.rule-learning-demo {
-  margin: 20px 0;
-}
-
-.card-header h4 {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.subtitle {
-  font-size: 13px;
-  color: var(--vp-c-text-2);
-  margin: 4px 0 0;
-}
-
-.panel-title {
-  font-weight: bold;
-  font-size: 14px;
-}
-
-.control-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.label {
-  font-size: 14px;
-}
-
-.text-xs {
-  font-size: 12px;
-}
-
-.text-gray {
-  color: var(--vp-c-text-2);
-}
-
-.flex-1 {
-  flex: 1;
-}
-
-.mt-4 {
-  margin-top: 16px;
-}
-
-.mb-4-xs {
-  margin-bottom: 20px;
-}
-
-@media (min-width: 992px) {
-  .mb-4-xs {
-    margin-bottom: 0;
-  }
-}
-
-.result-box {
-  background-color: var(--vp-c-bg-alt);
-  padding: 12px;
-  border-radius: 6px;
-  border: 1px solid var(--vp-c-divider);
-  text-align: center;
-}
-
-.result-box.good {
-  border-color: var(--el-color-danger);
-  background-color: var(--el-color-danger-light-9);
-}
-
-.result-box.bad {
-  border-color: var(--el-color-primary);
-  background-color: var(--el-color-primary-light-9);
-}
-
-.result-title {
-  font-size: 12px;
-  color: var(--vp-c-text-2);
-  text-transform: uppercase;
-}
-
-.result-value {
-  font-size: 24px;
-  font-weight: bold;
-  margin: 8px 0;
-}
-
-.result-code {
-  font-family: monospace;
-  font-size: 12px;
-  background-color: rgba(0, 0, 0, 0.05);
-  padding: 4px;
-  border-radius: 4px;
-}
-
-.sample-chips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  min-height: 40px;
-}
-
-.gap-2 {
-  gap: 8px;
-}
+.demo-card { border: 1px solid var(--vp-c-divider); border-radius: 8px; background: var(--vp-c-bg-soft); padding: 1.25rem; margin: 1rem 0; }
+.demo-header { margin-bottom: 1rem; }
+.demo-header .title { font-weight: bold; font-size: 1rem; }
+.path-flow { display: flex; flex-direction: column; align-items: stretch; }
+.path-item { display: flex; flex-direction: column; align-items: center; }
+.path-card { background: var(--vp-c-bg); border: 1px solid var(--vp-c-divider); border-left: 4px solid; border-radius: 0 8px 8px 0; padding: 0.8rem 1rem; width: 100%; }
+.path-top { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.35rem; }
+.path-icon { width: 24px; height: 24px; border-radius: 50%; color: white; font-size: 0.72rem; font-weight: bold; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+.path-name { font-weight: bold; font-size: 0.9rem; color: var(--vp-c-text-1); }
+.path-years { font-size: 0.72rem; color: var(--vp-c-text-3); font-weight: bold; }
+.path-desc { font-size: 0.8rem; color: var(--vp-c-text-2); line-height: 1.4; padding-left: 2.2rem; }
+.path-connector { display: flex; justify-content: center; padding: 0.15rem 0; }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/ai-protocols/A2ADetailedDemo.vue b/docs/.vitepress/theme/components/appendix/ai-protocols/A2ADetailedDemo.vue
new file mode 100644
index 0000000..0b936c4
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/ai-protocols/A2ADetailedDemo.vue
@@ -0,0 +1,895 @@
+<template>
+  <div class="a2a-detailed-demo">
+    <div class="demo-header">
+      <span class="title">A2A 内部实现</span>
+      <span class="subtitle">对等网络架构的通信细节</span>
+    </div>
+
+    <div class="intro-section">
+      <div class="section-title">A2A 可以做什么？</div>
+      <p class="intro-text">
+        A2A 让多个 AI Agent 可以相互协作，不再是单打独斗。一个复杂任务可以分配给多个专业 Agent，每个 Agent 做自己擅长的事。
+      </p>
+      <div class="popular-uses">
+        <div class="use-item">
+          <div class="use-title">软件开发流水线</div>
+          <div class="use-desc">需求分析 Agent → 代码 Agent → 测试 Agent → 部署 Agent</div>
+        </div>
+        <div class="use-item">
+          <div class="use-title">多厂商 Agent 集成</div>
+          <div class="use-desc">Google、Anthropic、OpenAI 的 Agent 可以相互调用</div>
+        </div>
+        <div class="use-item">
+          <div class="use-title">企业工作流</div>
+          <div class="use-desc">HR Agent、财务 Agent、审批 Agent 协同处理业务流程</div>
+        </div>
+        <div class="use-item">
+          <div class="use-title">智能客服升级</div>
+          <div class="use-desc">接待 Agent → 业务 Agent → 人工 Agent 逐级转接</div>
+        </div>
+        <div class="use-item">
+          <div class="use-title">科研协作</div>
+          <div class="use-desc">文献 Agent → 实验 Agent → 分析 Agent → 报告 Agent</div>
+        </div>
+        <div class="use-item">
+          <div class="use-title">自动化运维</div>
+          <div class="use-desc">监控 Agent → 诊断 Agent → 修复 Agent → 通知 Agent</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="usage-section">
+      <div class="section-title">如何使用 A2A？</div>
+      <p class="usage-intro">
+        A2A 目前还在早期阶段，主要由 Google 推动。如果你想尝试 A2A，需要开发支持 A2A 协议的 Agent 服务。
+      </p>
+      
+      <div class="usage-steps">
+        <div class="usage-step">
+          <div class="step-num">1</div>
+          <div class="step-content">
+            <div class="step-title">实现 Agent Card 端点</div>
+            <div class="step-desc">
+              在你的 Agent 服务中暴露 <code>/.well-known/agent.json</code>，声明 Agent 的能力和版本
+            </div>
+          </div>
+        </div>
+        
+        <div class="usage-step">
+          <div class="step-num">2</div>
+          <div class="step-content">
+            <div class="step-title">实现 A2A API</div>
+            <div class="step-desc">
+              实现 <code>agents/get</code>、<code>tasks/send</code>、<code>tasks/get</code> 等核心 API
+            </div>
+          </div>
+        </div>
+        
+        <div class="usage-step">
+          <div class="step-num">3</div>
+          <div class="step-content">
+            <div class="step-title">部署并注册 Agent</div>
+            <div class="step-desc">
+              将 Agent 部署到服务器，并在 Agent 注册表中登记，让其他 Agent 可以发现它
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <div class="usage-note">
+        <div class="note-title">当前状态</div>
+        <div class="note-content">
+          A2A 协议于 2025 年 4 月发布，目前还在快速发展中。Google 提供了参考实现，但生态还在建设中。建议关注 <a href="https://google.github.io/A2A" target="_blank">官方文档</a> 获取最新进展。
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-content">
+      <div class="flow-section">
+        <div class="flow-title">
+          
+          通信流程（5 步）
+        </div>
+        
+        <div class="flow-steps">
+          <div
+            v-for="(step, index) in a2aFlowSteps"
+            :key="index"
+            class="flow-step-item"
+          >
+            <div class="step-header" @click="toggleStep(index)">
+              <span class="step-num">{{ index + 1 }}</span>
+              <span class="step-name">{{ step.name }}</span>
+              <span class="step-arrow">{{ expandedStep === index ? '▼' : '▶' }}</span>
+            </div>
+            <div v-if="expandedStep === index" class="step-detail">
+              <div class="step-desc">{{ step.desc }}</div>
+              <div class="step-example">
+                <div class="example-title">{{ step.example.title }}</div>
+                <pre class="example-code"><code>{{ step.example.code }}</code></pre>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <details class="tech-details">
+        <summary class="tech-summary">
+          
+          <span class="summary-text">技术深究：Agent Card 名片格式</span>
+        </summary>
+        <div class="tech-content">
+          <div class="tech-intro">
+            Agent Card 是一个 JSON 文件，通常放在 <code>/.well-known/agent.json</code> 路径
+          </div>
+          <div class="tech-section">
+            <div class="tech-title">Agent Card 示例</div>
+            <pre class="tech-code"><code>{{ agentCardExample }}</code></pre>
+          </div>
+          <div class="tech-note">
+            
+            <span>通过 Agent Card，Agent 之间可以相互发现，了解对方的能力和版本，实现互操作</span>
+          </div>
+        </div>
+      </details>
+
+      <details class="tech-details">
+        <summary class="tech-summary">
+          
+          <span class="summary-text">技术深究：HTTP + SSE 通信</span>
+        </summary>
+        <div class="tech-content">
+          <div class="tech-section">
+            <div class="tech-title">任务发送（HTTP POST）</div>
+            <pre class="tech-code"><code>{{ taskSendExample }}</code></pre>
+          </div>
+          <div class="tech-section">
+            <div class="tech-title">实时推送（SSE）</div>
+            <pre class="tech-code"><code>{{ sseExample }}</code></pre>
+          </div>
+          <div class="tech-note">
+            <span>SSE（Server-Sent Events）允许服务器主动推送消息，适合长时任务的状态更新</span>
+          </div>
+        </div>
+      </details>
+
+      <details class="tech-details">
+        <summary class="tech-summary">
+          
+          <span class="summary-text">技术深究：A2A 核心 API</span>
+        </summary>
+        <div class="tech-content">
+          <div class="api-list">
+            <div v-for="(api, index) in a2aApis" :key="index" class="api-item">
+              <div class="api-method">
+                <span class="method-badge">{{ api.method }}</span>
+                <span class="method-name">{{ api.name }}</span>
+              </div>
+              <div class="api-desc">{{ api.desc }}</div>
+            </div>
+          </div>
+        </div>
+      </details>
+
+      <details class="tech-details">
+        <summary class="tech-summary">
+          
+          <span class="summary-text">技术深究：认证机制</span>
+        </summary>
+        <div class="tech-content">
+          <div class="auth-grid">
+            <div class="auth-card">
+              <div class="auth-header">
+                
+                <span class="auth-name">API Key</span>
+              </div>
+              <div class="auth-desc">
+                简单的认证方式，适合内部 Agent 通信
+              </div>
+              <pre class="auth-example"><code>{{ apiKeyExample }}</code></pre>
+            </div>
+            <div class="auth-card">
+              <div class="auth-header">
+                
+                <span class="auth-name">OAuth 2.0</span>
+              </div>
+              <div class="auth-desc">
+                企业级认证，支持令牌刷新和权限控制
+              </div>
+              <pre class="auth-example"><code>{{ oauthExample }}</code></pre>
+            </div>
+          </div>
+        </div>
+      </details>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const expandedStep = ref(0)
+
+const toggleStep = (index) => {
+  expandedStep.value = expandedStep.value === index ? -1 : index
+}
+
+const a2aFlowSteps = [
+  {
+    name: '发现（agents/get）',
+    desc: 'Agent 之间通过 HTTP 请求获取对方的 Agent Card，了解对方的能力和版本',
+    example: {
+      title: 'HTTP 请求',
+      code: `// Agent A 获取 Agent B 的 Agent Card
+GET /.well-known/agent.json HTTP/1.1
+Host: agent-b.company.com
+
+// 响应
+{
+  "name": "Code Agent",
+  "description": "专业代码生成 Agent",
+  "url": "https://agent-b.company.com",
+  "version": "1.0.0",
+  "capabilities": {
+    "streaming": true,
+    "pushNotifications": true
+  },
+  "skills": [
+    {"id": "code-gen", "name": "代码生成"},
+    {"id": "code-review", "name": "代码审查"}
+  ]
+}`
+    }
+  },
+  {
+    name: '发任务（tasks/send）',
+    desc: 'Agent A 调用 tasks/send 向 Agent B 发送任务，包含任务ID、描述、上下文等',
+    example: {
+      title: 'HTTP POST',
+      code: `// Agent A 发送任务给 Agent B
+POST /tasks/send HTTP/1.1
+Content-Type: application/json
+Authorization: Bearer xxx
+
+{
+  "id": "task-12345",
+  "sessionId": "session-001",
+  "message": {
+    "role": "user",
+    "parts": [
+      {
+        "type": "text",
+        "text": "请帮我写一个登录 API"
+      },
+      {
+        "type": "resource",
+        "resource": "file:///specs/login.yaml"
+      }
+    ]
+  }
+}`
+    }
+  },
+  {
+    name: '执行（Task Processing）',
+    desc: 'Agent B 接收任务后，可能调用自己的 LLM 或 MCP 工具来执行任务',
+    example: {
+      title: 'Agent B 内部处理',
+      code: `// Agent B 内部处理流程
+1. 解析任务请求
+2. 分析需要的技能（从 skills 中匹配）
+3. 调用内部 LLM 生成代码
+4. 可选：通过 MCP 调用外部工具验证代码
+5. 生成最终结果
+
+// 整个过程可能耗时较长，通过 SSE 推送进度`
+    }
+  },
+  {
+    name: '推送（SSE）',
+    desc: 'Agent B 通过 SSE（Server-Sent Events）实时推送任务进度和中间结果',
+    example: {
+      title: 'SSE 推送',
+      code: `// 服务器持续推送
+event: taskProgress
+data: {
+  "taskId": "task-12345",
+  "status": "processing",
+  "progress": 30,
+  "message": "正在生成登录逻辑..."
+}
+
+event: taskProgress  
+data: {
+  "taskId": "task-12345", 
+  "status": "processing",
+  "progress": 60,
+  "message": "正在生成数据库操作..."
+}
+
+event: taskCompleted
+data: {
+  "taskId": "task-12345",
+  "status": "completed",
+  "result": { ... }
+}`
+    }
+  },
+  {
+    name: '返回结果（tasks/get）',
+    desc: '任务完成后，Agent A 可以通过 tasks/get 获取最终结果',
+    example: {
+      title: 'HTTP GET',
+      code: `// Agent A 获取任务结果
+GET /tasks/task-12345 HTTP/1.1
+Authorization: Bearer xxx
+
+// 响应
+{
+  "id": "task-12345",
+  "status": "completed",
+  "result": {
+    "message": {
+      "role": "agent",
+      "parts": [
+        {
+          "type": "text",
+          "text": "登录 API 已生成..."
+        },
+        {
+          "type": "file",
+          "file": {
+            "name": "login.py",
+            "mimeType": "text/plain",
+            "uri": "file:///generated/login.py"
+          }
+        }
+      ]
+    }
+  }
+}`
+    }
+  }
+]
+
+const agentCardExample = `{
+  "name": "代码生成 Agent",
+  "description": "专业的前后端代码生成 Agent",
+  "url": "https://code-agent.company.com",
+  "version": "1.0.0",
+  "capabilities": {
+    "streaming": true,
+    "pushNotifications": true
+  },
+  "skills": [
+    {
+      "id": "frontend",
+      "name": "前端开发",
+      "description": "React/Vue/Angular"
+    },
+    {
+      "id": "backend", 
+      "name": "后端开发",
+      "description": "Node/Python/Go"
+    }
+  ],
+  "authentication": {
+    "schemes": ["Bearer", "OAuth2"]
+  }
+}`
+
+const taskSendExample = `POST /tasks/send HTTP/1.1
+Host: agent-b.company.com
+Content-Type: application/json
+Authorization: Bearer {token}
+
+{
+  "id": "task-001",
+  "message": {
+    "role": "user",
+    "parts": [{ "type": "text", "text": "写一个登录接口" }]
+  }
+}`
+
+const sseExample = `GET /tasks/task-001/sse HTTP/1.1
+Authorization: Bearer {token}
+
+event: progress
+data: {"status": "processing", "progress": 50}
+
+event: completed  
+data: {"status": "completed", "result": {...}}`
+
+const a2aApis = [
+  { method: 'GET', name: 'agents/get', desc: '获取指定 Agent 的 Agent Card，了解其能力' },
+  { method: 'POST', name: 'tasks/send', desc: '发送任务给目标 Agent，同步等待结果' },
+  { method: 'POST', name: 'tasks/sendSubscribe', desc: '发送任务并订阅 SSE 推送，实时获取进度' },
+  { method: 'GET', name: 'tasks/get', desc: '根据任务 ID 获取任务状态和结果' },
+  { method: 'GET', name: 'tasks/cancel', desc: '取消正在执行的任务' }
+]
+
+const apiKeyExample = `Authorization: Bearer sk-xxxxx
+# 或
+Authorization: ApiKey sk-xxxxx`
+
+const oauthExample = `Authorization: Bearer {access_token}
+# 支持刷新令牌
+POST /oauth/token
+{
+  "grant_type": "refresh_token",
+  "refresh_token": "xxx"
+}`
+</script>
+
+<style scoped>
+.a2a-detailed-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg-soft);
+  padding: 1rem;
+  margin: 1rem 0;
+}
+
+.demo-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.demo-header .icon {
+  font-size: 1.25rem;
+}
+
+.demo-header .title {
+  font-weight: bold;
+  font-size: 1rem;
+}
+
+.demo-header .subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.85rem;
+  margin-left: 0.5rem;
+}
+
+.flow-section {
+  margin-bottom: 1rem;
+}
+
+.flow-title {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  font-weight: 600;
+  font-size: 0.95rem;
+  margin-bottom: 0.75rem;
+}
+
+.title-icon {
+  font-size: 1rem;
+}
+
+.flow-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.flow-step-item {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  overflow: hidden;
+  background: var(--vp-c-bg);
+}
+
+.step-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  background: var(--vp-c-bg-soft);
+  transition: background 0.2s;
+}
+
+.step-header:hover {
+  background: var(--vp-c-bg-alt);
+}
+
+.step-num {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #10b981;
+  color: white;
+  font-size: 0.7rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.step-name {
+  flex: 1;
+  font-size: 0.85rem;
+  font-weight: 500;
+}
+
+.step-arrow {
+  font-size: 0.7rem;
+  color: var(--vp-c-text-3);
+}
+
+.step-detail {
+  padding: 0.75rem;
+  border-top: 1px solid var(--vp-c-divider);
+}
+
+.step-desc {
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  margin-bottom: 0.5rem;
+}
+
+.step-example {
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+  padding: 0.5rem;
+}
+
+.example-title {
+  font-size: 0.7rem;
+  color: var(--vp-c-text-3);
+  margin-bottom: 0.3rem;
+}
+
+.example-code {
+  font-size: 0.7rem;
+  background: var(--vp-c-bg);
+  padding: 0.5rem;
+  border-radius: 4px;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+  font-family: var(--vp-font-family-mono);
+  margin: 0;
+  line-height: 1.4;
+}
+
+.tech-details {
+  margin-bottom: 0.75rem;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.tech-summary {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.6rem 0.75rem;
+  cursor: pointer;
+  background: var(--vp-c-bg-soft);
+  font-size: 0.85rem;
+  font-weight: 500;
+  list-style: none;
+}
+
+.tech-summary::-webkit-details-marker {
+  display: none;
+}
+
+.summary-icon {
+  font-size: 0.9rem;
+}
+
+.tech-content {
+  padding: 0.75rem;
+  border-top: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg);
+}
+
+.tech-intro {
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  margin-bottom: 0.75rem;
+  padding: 0.5rem;
+  background: var(--vp-c-bg-soft);
+  border-radius: 4px;
+}
+
+.tech-intro code {
+  background: var(--vp-c-bg);
+  padding: 0.1rem 0.3rem;
+  border-radius: 3px;
+  font-size: 0.75rem;
+}
+
+.tech-section {
+  margin-bottom: 0.75rem;
+}
+
+.tech-title {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.4rem;
+}
+
+.tech-code {
+  font-size: 0.7rem;
+  background: var(--vp-c-bg-soft);
+  padding: 0.5rem;
+  border-radius: 4px;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+  font-family: var(--vp-font-family-mono);
+  margin: 0;
+  line-height: 1.4;
+}
+
+.tech-note {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.3rem;
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+  padding: 0.5rem;
+  background: var(--vp-c-bg-soft);
+  border-radius: 4px;
+}
+
+.note-icon {
+  flex-shrink: 0;
+}
+
+.api-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.api-item {
+  padding: 0.4rem;
+  background: var(--vp-c-bg-soft);
+  border-radius: 4px;
+}
+
+.api-method {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  margin-bottom: 0.2rem;
+}
+
+.method-badge {
+  font-size: 0.6rem;
+  background: #10b981;
+  color: white;
+  padding: 0.1rem 0.3rem;
+  border-radius: 3px;
+  font-family: var(--vp-font-family-mono);
+}
+
+.method-name {
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+
+.api-desc {
+  font-size: 0.7rem;
+  color: var(--vp-c-text-2);
+}
+
+.auth-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.5rem;
+}
+
+.auth-card {
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+  padding: 0.5rem;
+}
+
+.auth-header {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  margin-bottom: 0.3rem;
+}
+
+.auth-icon {
+  font-size: 0.9rem;
+}
+
+.auth-name {
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+
+.auth-desc {
+  font-size: 0.7rem;
+  color: var(--vp-c-text-2);
+  margin-bottom: 0.4rem;
+}
+
+.auth-example pre {
+  font-size: 0.65rem;
+  background: var(--vp-c-bg);
+  padding: 0.4rem;
+  border-radius: 4px;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+  font-family: var(--vp-font-family-mono);
+  margin: 0;
+  line-height: 1.3;
+}
+
+@media (max-width: 640px) {
+  .auth-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.intro-section {
+  margin-bottom: 1.5rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.intro-section .section-title {
+  font-weight: 600;
+  font-size: 0.95rem;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.5rem;
+}
+
+.intro-section .intro-text {
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.5;
+  margin-bottom: 0.75rem;
+}
+
+.popular-uses {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5rem;
+}
+
+.use-item {
+  padding: 0.5rem;
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+  border-left: 3px solid var(--vp-c-brand);
+}
+
+.use-title {
+  font-weight: 600;
+  font-size: 0.75rem;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.2rem;
+}
+
+.use-desc {
+  font-size: 0.65rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.3;
+}
+
+@media (max-width: 640px) {
+  .popular-uses {
+    grid-template-columns: 1fr;
+  }
+}
+
+.usage-section {
+  margin-bottom: 1.5rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.usage-section .section-title {
+  font-weight: 600;
+  font-size: 0.95rem;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.5rem;
+}
+
+.usage-intro {
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.5;
+  margin-bottom: 0.75rem;
+}
+
+.usage-intro code {
+  background: var(--vp-c-bg-alt);
+  padding: 0.1rem 0.3rem;
+  border-radius: 3px;
+  font-size: 0.8rem;
+}
+
+.usage-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  margin-bottom: 1rem;
+}
+
+.usage-step {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+}
+
+.usage-step .step-num {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  background: var(--vp-c-brand);
+  color: white;
+  border-radius: 50%;
+  font-size: 0.75rem;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.usage-step .step-content {
+  flex: 1;
+}
+
+.usage-step .step-title {
+  font-weight: 600;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.2rem;
+}
+
+.usage-step .step-desc {
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.4;
+}
+
+.usage-step .step-desc code {
+  background: var(--vp-c-bg-alt);
+  padding: 0.1rem 0.3rem;
+  border-radius: 3px;
+  font-size: 0.75rem;
+}
+
+.usage-note {
+  padding: 0.75rem;
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+  border-left: 3px solid var(--vp-c-brand);
+}
+
+.note-title {
+  font-weight: 600;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.3rem;
+}
+
+.note-content {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.4;
+}
+
+.note-content a {
+  color: var(--vp-c-brand);
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/ai-protocols/A2AVisualDemo.vue b/docs/.vitepress/theme/components/appendix/ai-protocols/A2AVisualDemo.vue
new file mode 100644
index 0000000..a884624
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/ai-protocols/A2AVisualDemo.vue
@@ -0,0 +1,221 @@
+<template>
+  <div class="a2a-visual-demo">
+    <div class="section-title">A2A 是什么？</div>
+
+    <div class="intro-text">
+      A2A（Agent-to-Agent Protocol）是 Google 于 2025 年 4 月推出的<strong>Agent 之间相互协作的通信标准</strong>。它让不同厂商、不同框架的 Agent 能够相互发现、分配任务、交换信息，就像给 AI 世界装上了"对讲机"。
+    </div>
+
+    <div class="section-title">核心概念</div>
+
+    <div class="concepts-grid">
+      <div class="concept">
+        <div class="concept-title">Agent Card（Agent 名片）</div>
+        <div class="concept-desc">每个 Agent 公开的元数据，包括能力描述、版本号、端点地址等，相当于人的"名片"</div>
+      </div>
+      <div class="concept">
+        <div class="concept-title">Task（任务）</div>
+        <div class="concept-desc">Agent 之间传递的工作单元，可以包含多轮对话、文件附件等</div>
+      </div>
+      <div class="concept">
+        <div class="concept-title">Message（消息）</div>
+        <div class="concept-desc">Agent 之间的通信内容，支持文本、文件、语音等多模态</div>
+      </div>
+      <div class="concept">
+        <div class="concept-title">SSE（Server-Sent Events）</div>
+        <div class="concept-desc">服务器推送技术，用于实时任务进度更新</div>
+      </div>
+    </div>
+
+    <div class="section-title">什么时候用 A2A？</div>
+
+    <div class="use-cases">
+      <div class="use-case">
+        <div class="use-case-title">当需要多个 Agent 协作完成复杂任务时</div>
+        <div class="use-case-desc">一个 Agent 负责需求分析，一个负责写代码，一个负责测试，各自发挥专长</div>
+      </div>
+      <div class="use-case">
+        <div class="use-case-title">当需要集成不同厂商的 Agent 时</div>
+        <div class="use-case-desc">Google 的 Agent、Anthropic 的 Agent、OpenAI 的 Agent 需要相互协作</div>
+      </div>
+      <div class="use-case">
+        <div class="use-case-title">当需要任务委托和进度追踪时</div>
+        <div class="use-case-desc">主 Agent 分配任务给专家 Agent，并实时接收进度更新</div>
+      </div>
+    </div>
+
+    <div class="section-title">如何使用 A2A？</div>
+
+    <div class="usage-steps">
+      <div class="step">
+        <div class="step-num">1</div>
+        <div class="step-content">
+          <div class="step-title">发布 Agent Card</div>
+          <div class="step-desc">在 /.well-known/agent.json 路径暴露 Agent 的能力描述</div>
+        </div>
+      </div>
+      <div class="step">
+        <div class="step-num">2</div>
+        <div class="step-content">
+          <div class="step-title">发现 Agent</div>
+          <div class="step-desc">通过 agents/get API 获取其他 Agent 的名片，了解其能力</div>
+        </div>
+      </div>
+      <div class="step">
+        <div class="step-num">3</div>
+        <div class="step-content">
+          <div class="step-title">发送任务</div>
+          <div class="step-desc">通过 tasks/send API 发送任务，支持 SSE 接收进度更新</div>
+        </div>
+      </div>
+      <div class="step">
+        <div class="step-num">4</div>
+        <div class="step-content">
+          <div class="step-title">获取结果</div>
+          <div class="step-desc">任务完成后，通过 tasks/get API 获取最终结果</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+.a2a-visual-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  background: var(--vp-c-bg-soft);
+  padding: 1.25rem;
+  margin: 1rem 0;
+}
+
+.section-title {
+  font-weight: 600;
+  font-size: 1rem;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.75rem;
+  margin-top: 1.25rem;
+}
+
+.section-title:first-child {
+  margin-top: 0;
+}
+
+.intro-text {
+  font-size: 0.9rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.6;
+  margin-bottom: 1rem;
+}
+
+.intro-text strong {
+  color: var(--vp-c-brand);
+}
+
+.concepts-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.6rem;
+  margin-bottom: 1rem;
+}
+
+.concept {
+  padding: 0.75rem;
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+}
+
+.concept-title {
+  font-weight: 600;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.3rem;
+}
+
+.concept-desc {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.4;
+}
+
+.use-cases {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  margin-bottom: 1rem;
+}
+
+.use-case {
+  padding: 0.75rem;
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+  border-left: 3px solid var(--vp-c-brand);
+}
+
+.use-case-title {
+  font-weight: 600;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.3rem;
+}
+
+.use-case-desc {
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.4;
+}
+
+.usage-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+
+.step {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+}
+
+.step-num {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  background: var(--vp-c-brand);
+  color: white;
+  border-radius: 50%;
+  font-size: 0.75rem;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.step-content {
+  flex: 1;
+}
+
+.step-title {
+  font-weight: 600;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.2rem;
+}
+
+.step-desc {
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.4;
+}
+
+@media (max-width: 640px) {
+  .concepts-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/ai-protocols/McpDetailedDemo.vue b/docs/.vitepress/theme/components/appendix/ai-protocols/McpDetailedDemo.vue
new file mode 100644
index 0000000..d2316d0
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/ai-protocols/McpDetailedDemo.vue
@@ -0,0 +1,1140 @@
+<template>
+  <div class="mcp-detailed-demo">
+    <div class="demo-header">
+      <span class="title">MCP 内部实现</span>
+      <span class="subtitle">客户端-服务器架构的通信细节</span>
+    </div>
+
+    <div class="intro-section">
+      <div class="section-title">为什么 MCP 这么火？</div>
+      <p class="intro-text">
+        MCP 之前，AI 只能"看"和"说"，有了 MCP，AI 终于可以"动手"了。它让 AI 可以操纵各种程序，真正帮你干活。
+      </p>
+      <div class="popular-uses">
+        <div class="use-item">
+          <div class="use-title">Cursor / Claude 等 AI 编辑器</div>
+          <div class="use-desc">直接读写文件、执行代码、操作 Git</div>
+        </div>
+        <div class="use-item">
+          <div class="use-title">浏览器自动化</div>
+          <div class="use-desc">AI 自动打开网页、点击按钮、填表单</div>
+        </div>
+        <div class="use-item">
+          <div class="use-title">数据库查询</div>
+          <div class="use-desc">直接查询/写入数据库，无需手动导出</div>
+        </div>
+        <div class="use-item">
+          <div class="use-title">AI 操作电脑</div>
+          <div class="use-desc">Windows-MCP 让 AI 直接操控鼠标键盘</div>
+        </div>
+        <div class="use-item">
+          <div class="use-title">自动化部署</div>
+          <div class="use-desc">Vercel-MCP 一键部署网站到线上</div>
+        </div>
+        <div class="use-item">
+          <div class="use-title">设计稿转代码</div>
+          <div class="use-desc">Figma-MCP 读取设计稿自动生成网页</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="usage-section">
+      <div class="section-title">如何使用 MCP？</div>
+      <p class="usage-intro">
+        使用 MCP 非常简单，只需要配置一个 <code>mcp.json</code> 文件，就可以在你的 IDE 里使用各种 MCP 工具。
+      </p>
+      
+      <div class="usage-steps">
+        <div class="usage-step">
+          <div class="step-num">1</div>
+          <div class="step-content">
+            <div class="step-title">找到 MCP Server</div>
+            <div class="step-desc">
+              从 MCP 资源站或 GitHub 找到你需要的 MCP Server
+            </div>
+            <div class="mcp-resources">
+              <div class="resource-item">
+                <span class="resource-name">官方 Server 列表</span>
+                <a href="https://github.com/modelcontextprotocol/servers" target="_blank" class="resource-link">github.com/modelcontextprotocol/servers</a>
+              </div>
+              <div class="resource-item">
+                <span class="resource-name">MCP.so（中文）</span>
+                <a href="https://mcp.so" target="_blank" class="resource-link">mcp.so</a>
+              </div>
+              <div class="resource-item">
+                <span class="resource-name">Pulse MCP（英文）</span>
+                <a href="https://www.pulsemcp.com" target="_blank" class="resource-link">pulsemcp.com</a>
+              </div>
+              <div class="resource-item">
+                <span class="resource-name">Smithery（英文）</span>
+                <a href="https://smithery.ai" target="_blank" class="resource-link">smithery.ai</a>
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <div class="usage-step">
+          <div class="step-num">2</div>
+          <div class="step-content">
+            <div class="step-title">配置 mcp.json</div>
+            <div class="step-desc">
+              在你的 AI 编辑器（Cursor / Claude Desktop 等）中找到 MCP 配置文件位置，添加 Server 配置
+            </div>
+            <pre class="config-example"><code>{{ mcpConfigExample }}</code></pre>
+          </div>
+        </div>
+        
+        <div class="usage-step">
+          <div class="step-num">3</div>
+          <div class="step-content">
+            <div class="step-title">重启 IDE 即可使用</div>
+            <div class="step-desc">
+              重启后，AI 会自动发现并加载 MCP 工具，你就可以直接让 AI 使用这些工具了
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <div class="skills-note">
+        <div class="note-title">Skills 正在替代 MCP？</div>
+        <div class="note-content">
+          随着 <strong>Skills</strong> 的普及，越来越多的场景开始使用 Skills 替代 MCP 协议。Skills 更轻量、更易编写，适合大多数常见任务。MCP 更适合需要复杂工具集成、多客户端复用的场景。如果你只是想让 AI 做一些简单操作，建议优先考虑 Skills。
+        </div>
+      </div>
+      
+      <div class="config-locations">
+        <div class="config-title">常见 IDE 的 mcp.json 位置</div>
+        <div class="config-list">
+          <div class="config-item">
+            <span class="config-name">Cursor</span>
+            <span class="config-path">~/.cursor/mcp.json</span>
+          </div>
+          <div class="config-item">
+            <span class="config-name">Claude Desktop</span>
+            <span class="config-path">~/Library/Application Support/Claude/claude_desktop_config.json (macOS)</span>
+          </div>
+          <div class="config-item">
+            <span class="config-name">Windsurf</span>
+            <span class="config-path">~/.windsurf/mcp.json</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="implement-section">
+      <div class="section-title">如何实现一个 MCP Server？</div>
+      <p class="implement-intro">
+        假设你有一个天气 API，想把它封装成 MCP Server 让 AI 可以调用。下面以 Node.js 为例演示：
+      </p>
+      
+      <div class="implement-code">
+        <div class="code-title">weather-mcp-server.js</div>
+        <pre class="code-block"><code>{{ weatherMcpCode }}</code></pre>
+      </div>
+      
+      <div class="transport-compare">
+        <div class="compare-title">stdio vs HTTP+SSE 传输方式</div>
+        <div class="compare-grid">
+          <div class="compare-item">
+            <div class="compare-name">stdio（本地进程）</div>
+            <div class="compare-desc">
+              <p>MCP Server 作为子进程运行，通过标准输入输出通信</p>
+              <p><strong>优点：</strong>简单、安全、适合本地工具</p>
+              <p><strong>缺点：</strong>只能本地使用，不支持远程</p>
+            </div>
+          </div>
+          <div class="compare-item">
+            <div class="compare-name">HTTP + SSE（远程服务）</div>
+            <div class="compare-desc">
+              <p>MCP Server 作为 HTTP 服务运行，支持 SSE 推送</p>
+              <p><strong>优点：</strong>支持远程访问、多客户端共享</p>
+              <p><strong>缺点：</strong>需要部署服务器、配置认证</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-content">
+      <div class="flow-section">
+        <div class="flow-title">
+          
+          通信流程（4 步）
+        </div>
+        
+        <div class="flow-steps">
+          <div
+            v-for="(step, index) in mcpFlowSteps"
+            :key="index"
+            class="flow-step-item"
+          >
+            <div class="step-header" @click="toggleStep(index)">
+              <span class="step-num">{{ index + 1 }}</span>
+              <span class="step-name">{{ step.name }}</span>
+              <span class="step-arrow">{{ expandedStep === index ? '▼' : '▶' }}</span>
+            </div>
+            <div v-if="expandedStep === index" class="step-detail">
+              <div class="step-desc">{{ step.desc }}</div>
+              <div class="step-example">
+                <div class="example-title">{{ step.example.title }}</div>
+                <pre class="example-code"><code>{{ step.example.code }}</code></pre>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <details class="tech-details">
+        <summary class="tech-summary">
+          
+          <span class="summary-text">技术深究：JSON-RPC 2.0 消息格式</span>
+        </summary>
+        <div class="tech-content">
+          <div class="tech-section">
+            <div class="tech-title">请求消息结构</div>
+            <pre class="tech-code"><code>{{ jsonRpcRequest }}</code></pre>
+          </div>
+          <div class="tech-section">
+            <div class="tech-title">响应消息结构</div>
+            <pre class="tech-code"><code>{{ jsonRpcResponse }}</code></pre>
+          </div>
+          <div class="tech-note">
+            
+            <span>JSON-RPC 2.0 是无状态协议，每个请求都需要包含 <code>id</code> 用于匹配响应</span>
+          </div>
+        </div>
+      </details>
+
+      <details class="tech-details">
+        <summary class="tech-summary">
+          
+          <span class="summary-text">技术深究：两种传输方式</span>
+        </summary>
+        <div class="tech-content">
+          <div class="transport-grid">
+            <div class="transport-card">
+              <div class="transport-header">
+                
+                <span class="transport-name">stdio（本地进程）</span>
+              </div>
+              <div class="transport-desc">
+                适用于本地工具，通过标准输入输出通信
+              </div>
+              <div class="transport-example">
+                <pre><code>{{ stdioExample }}</code></pre>
+              </div>
+            </div>
+            <div class="transport-card">
+              <div class="transport-header">
+                
+                <span class="transport-name">HTTP + SSE（远程）</span>
+              </div>
+              <div class="transport-desc">
+                适用于远程服务，支持长连接推送
+              </div>
+              <div class="transport-example">
+                <pre><code>{{ httpExample }}</code></pre>
+              </div>
+            </div>
+          </div>
+        </div>
+      </details>
+
+      <details class="tech-details">
+        <summary class="tech-summary">
+          
+          <span class="summary-text">技术深究：MCP 核心 API</span>
+        </summary>
+        <div class="tech-content">
+          <div class="api-list">
+            <div v-for="(api, index) in mcpApis" :key="index" class="api-item">
+              <div class="api-method">
+                <span class="method-badge">{{ api.method }}</span>
+                <span class="method-name">{{ api.name }}</span>
+              </div>
+              <div class="api-desc">{{ api.desc }}</div>
+            </div>
+          </div>
+        </div>
+      </details>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const expandedStep = ref(0)
+
+const toggleStep = (index) => {
+  expandedStep.value = expandedStep.value === index ? -1 : index
+}
+
+const mcpFlowSteps = [
+  {
+    name: '握手（initialize）',
+    desc: 'MCP Server 启动时向 Client 发送握手请求，声明自己的协议版本和能力',
+    example: {
+      title: 'Server → Client',
+      code: `// Server 发送 initialize 请求
+{
+  "jsonrpc": "2.0",
+  "id": 1,
+  "method": "initialize",
+  "params": {
+    "protocolVersion": "2024-11-05",
+    "capabilities": {
+      "tools": {},
+      "resources": {},
+      "prompts": {}
+    },
+    "serverInfo": {
+      "name": "filesystem",
+      "version": "1.0.0"
+    }
+  }
+}`
+    }
+  },
+  {
+    name: '列工具（tools/list）',
+    desc: 'Client 向 Server 请求可用工具列表，AI 知道能调用哪些功能',
+    example: {
+      title: 'Client → Server',
+      code: `// Client 请求工具列表
+{
+  "jsonrpc": "2.0",
+  "id": 2,
+  "method": "tools/list",
+  "params": {}
+}
+
+// Server 返回工具列表
+{
+  "jsonrpc": "2.0",
+  "id": 2,
+  "result": {
+    "tools": [
+      {
+        "name": "read_file",
+        "description": "读取文件内容",
+        "inputSchema": {
+          "type": "object",
+          "properties": {
+            "path": { "type": "string" }
+          },
+          "required": ["path"]
+        }
+      },
+      {
+        "name": "write_file",
+        "description": "写入文件内容",
+        "inputSchema": { ... }
+      }
+    ]
+  }
+}`
+    }
+  },
+  {
+    name: '调工具（tools/call）',
+    desc: 'AI 决定调用工具时，Client 发送调用请求，Server 执行后返回结果',
+    example: {
+      title: 'Client → Server',
+      code: `// Client 调用工具
+{
+  "jsonrpc": "2.0",
+  "id": 3,
+  "method": "tools/call",
+  "params": {
+    "name": "read_file",
+    "arguments": {
+      "path": "/home/user/project/README.md"
+    }
+  }
+}
+
+// Server 返回结果
+{
+  "jsonrpc": "2.0",
+  "id": 3,
+  "result": {
+    "content": [
+      {
+        "type": "text",
+        "text": "# My Project\\n\\nHello World"
+      }
+    ]
+  }
+}`
+    }
+  },
+  {
+    name: '返回结果',
+    desc: 'Server 执行完成后把结果发回给 Client，Client 将结果返回给 AI',
+    example: {
+      title: '结果流向',
+      code: `Server 执行 → 返回 JSON-RPC 响应 → Client 解析 → 
+       → 将结果注入 AI 上下文 → AI 继续处理`
+    }
+  }
+]
+
+const jsonRpcRequest = `{
+  "jsonrpc": "2.0",           // 协议版本
+  "id": 1,                     // 请求 ID，用于匹配响应
+  "method": "tools/call",      // 方法名
+  "params": { ... }            // 参数对象
+}`
+
+const jsonRpcResponse = `// 成功响应
+{
+  "jsonrpc": "2.0",
+  "id": 1,
+  "result": { ... }
+}
+
+// 错误响应
+{
+  "jsonrpc": "2.0",
+  "id": 1,
+  "error": {
+    "code": -32600,
+    "message": "Invalid Request"
+  }
+}`
+
+const stdioExample = `// 启动 MCP Server 作为子进程
+npx @modelcontextprotocol/server-filesystem ./project
+
+// 通过 stdio 通信
+// stdin: 接收请求
+// stdout: 发送响应`
+
+const httpExample = `// HTTP 传输（Server-Sent Events）
+POST /mcp HTTP/1.1
+Content-Type: application/json
+
+{
+  "jsonrpc": "2.0",
+  "id": 1,
+  "method": "tools/call",
+  "params": { ... }
+}
+
+// SSE 长连接用于推送
+GET /mcp/sse HTTP/1.1
+// 持续接收服务器推送的更新`
+
+const mcpConfigExample = `{
+  "mcpServers": {
+    "filesystem": {
+      "command": "npx",
+      "args": [
+        "-y",
+        "@modelcontextprotocol/server-filesystem",
+        "/home/user/projects"
+      ]
+    },
+    "github": {
+      "command": "npx",
+      "args": ["-y", "@modelcontextprotocol/server-github"],
+      "env": {
+        "GITHUB_TOKEN": "your-token-here"
+      }
+    },
+    "postgres": {
+      "command": "npx",
+      "args": ["-y", "@modelcontextprotocol/server-postgres"],
+      "env": {
+        "DATABASE_URL": "postgresql://user:pass@localhost/db"
+      }
+    }
+  }
+}`
+
+const weatherMcpCode = `import { Server } from '@modelcontextprotocol/sdk/server/index.js'
+import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js'
+
+// 1. 创建 MCP Server
+const server = new Server({
+  name: 'weather-server',
+  version: '1.0.0'
+}, {
+  capabilities: { tools: {} }
+})
+
+// 2. 定义工具列表
+server.setRequestHandler('tools/list', async () => ({
+  tools: [{
+    name: 'get_weather',
+    description: '获取指定城市的天气信息',
+    inputSchema: {
+      type: 'object',
+      properties: {
+        city: { type: 'string', description: '城市名称' }
+      },
+      required: ['city']
+    }
+  }]
+}))
+
+// 3. 实现工具调用逻辑
+server.setRequestHandler('tools/call', async (request) => {
+  const { name, arguments: args } = request.params
+  
+  if (name === 'get_weather') {
+    // 调用你的天气 API
+    const response = await fetch(
+      \`https://api.weather.com/v1/current?city=\${args.city}\`
+    )
+    const data = await response.json()
+    
+    return {
+      content: [{
+        type: 'text',
+        text: JSON.stringify(data)
+      }]
+    }
+  }
+})
+
+// 4. 启动服务（stdio 方式）
+const transport = new StdioServerTransport()
+await server.connect(transport)`
+
+const mcpApis = [
+  { method: 'initialize', name: '初始化', desc: 'Server 向 Client 声明协议版本和能力' },
+  { method: 'tools/list', name: '工具列表', desc: '获取 Server 提供所有可用工具' },
+  { method: 'tools/call', name: '调用工具', desc: '实际调用某个工具并获取结果' },
+  { method: 'resources/list', name: '资源列表', desc: '获取可访问的资源（如文件、数据库）' },
+  { method: 'resources/read', name: '读取资源', desc: '读取某个资源的内容' },
+  { method: 'prompts/list', name: '提示模板', desc: '获取预定义的提示模板' }
+]
+</script>
+
+<style scoped>
+.mcp-detailed-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg-soft);
+  padding: 1rem;
+  margin: 1rem 0;
+}
+
+.demo-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.demo-header .icon {
+  font-size: 1.25rem;
+}
+
+.demo-header .title {
+  font-weight: bold;
+  font-size: 1rem;
+}
+
+.demo-header .subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.85rem;
+  margin-left: 0.5rem;
+}
+
+.flow-section {
+  margin-bottom: 1rem;
+}
+
+.flow-title {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  font-weight: 600;
+  font-size: 0.95rem;
+  margin-bottom: 0.75rem;
+}
+
+.title-icon {
+  font-size: 1rem;
+}
+
+.flow-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.flow-step-item {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  overflow: hidden;
+  background: var(--vp-c-bg);
+}
+
+.step-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  background: var(--vp-c-bg-soft);
+  transition: background 0.2s;
+}
+
+.step-header:hover {
+  background: var(--vp-c-bg-alt);
+}
+
+.step-num {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #3b82f6;
+  color: white;
+  font-size: 0.7rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.step-name {
+  flex: 1;
+  font-size: 0.85rem;
+  font-weight: 500;
+}
+
+.step-arrow {
+  font-size: 0.7rem;
+  color: var(--vp-c-text-3);
+}
+
+.step-detail {
+  padding: 0.75rem;
+  border-top: 1px solid var(--vp-c-divider);
+}
+
+.step-desc {
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  margin-bottom: 0.5rem;
+}
+
+.step-example {
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+  padding: 0.5rem;
+}
+
+.example-title {
+  font-size: 0.7rem;
+  color: var(--vp-c-text-3);
+  margin-bottom: 0.3rem;
+}
+
+.example-code {
+  font-size: 0.7rem;
+  background: var(--vp-c-bg);
+  padding: 0.5rem;
+  border-radius: 4px;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+  font-family: var(--vp-font-family-mono);
+  margin: 0;
+  line-height: 1.4;
+}
+
+.tech-details {
+  margin-bottom: 0.75rem;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.tech-summary {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.6rem 0.75rem;
+  cursor: pointer;
+  background: var(--vp-c-bg-soft);
+  font-size: 0.85rem;
+  font-weight: 500;
+  list-style: none;
+}
+
+.tech-summary::-webkit-details-marker {
+  display: none;
+}
+
+.summary-icon {
+  font-size: 0.9rem;
+}
+
+.tech-content {
+  padding: 0.75rem;
+  border-top: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg);
+}
+
+.tech-section {
+  margin-bottom: 0.75rem;
+}
+
+.tech-title {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.4rem;
+}
+
+.tech-code {
+  font-size: 0.7rem;
+  background: var(--vp-c-bg-soft);
+  padding: 0.5rem;
+  border-radius: 4px;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+  font-family: var(--vp-font-family-mono);
+  margin: 0;
+  line-height: 1.4;
+}
+
+.tech-note {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.3rem;
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+  padding: 0.5rem;
+  background: var(--vp-c-bg-soft);
+  border-radius: 4px;
+}
+
+.note-icon {
+  flex-shrink: 0;
+}
+
+.tech-note code {
+  background: var(--vp-c-bg);
+  padding: 0.1rem 0.3rem;
+  border-radius: 3px;
+  font-size: 0.7rem;
+}
+
+.transport-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.5rem;
+}
+
+.transport-card {
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+  padding: 0.5rem;
+}
+
+.transport-header {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  margin-bottom: 0.3rem;
+}
+
+.transport-icon {
+  font-size: 0.9rem;
+}
+
+.transport-name {
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+
+.transport-desc {
+  font-size: 0.7rem;
+  color: var(--vp-c-text-2);
+  margin-bottom: 0.4rem;
+}
+
+.transport-example pre {
+  font-size: 0.65rem;
+  background: var(--vp-c-bg);
+  padding: 0.4rem;
+  border-radius: 4px;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+  font-family: var(--vp-font-family-mono);
+  margin: 0;
+  line-height: 1.3;
+}
+
+.api-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.api-item {
+  padding: 0.4rem;
+  background: var(--vp-c-bg-soft);
+  border-radius: 4px;
+}
+
+.api-method {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  margin-bottom: 0.2rem;
+}
+
+.method-badge {
+  font-size: 0.6rem;
+  background: #3b82f6;
+  color: white;
+  padding: 0.1rem 0.3rem;
+  border-radius: 3px;
+  font-family: var(--vp-font-family-mono);
+}
+
+.method-name {
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+
+.api-desc {
+  font-size: 0.7rem;
+  color: var(--vp-c-text-2);
+}
+
+@media (max-width: 640px) {
+  .transport-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.intro-section {
+  margin-bottom: 1.5rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.intro-section .section-title {
+  font-weight: 600;
+  font-size: 0.95rem;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.5rem;
+}
+
+.intro-section .intro-text {
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.5;
+  margin-bottom: 0.75rem;
+}
+
+.popular-uses {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5rem;
+}
+
+.use-item {
+  padding: 0.5rem;
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+  border-left: 3px solid var(--vp-c-brand);
+}
+
+.use-title {
+  font-weight: 600;
+  font-size: 0.75rem;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.2rem;
+}
+
+.use-desc {
+  font-size: 0.65rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.3;
+}
+
+@media (max-width: 640px) {
+  .popular-uses {
+    grid-template-columns: 1fr;
+  }
+}
+
+.usage-section {
+  margin-bottom: 1.5rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.usage-section .section-title {
+  font-weight: 600;
+  font-size: 0.95rem;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.5rem;
+}
+
+.usage-intro {
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.5;
+  margin-bottom: 0.75rem;
+}
+
+.usage-intro code {
+  background: var(--vp-c-bg-alt);
+  padding: 0.1rem 0.3rem;
+  border-radius: 3px;
+  font-size: 0.8rem;
+}
+
+.usage-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  margin-bottom: 1rem;
+}
+
+.usage-step {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+}
+
+.usage-step .step-num {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  background: var(--vp-c-brand);
+  color: white;
+  border-radius: 50%;
+  font-size: 0.75rem;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.usage-step .step-content {
+  flex: 1;
+}
+
+.usage-step .step-title {
+  font-weight: 600;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.2rem;
+}
+
+.usage-step .step-desc {
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.4;
+}
+
+.usage-step .step-desc a {
+  color: var(--vp-c-brand);
+}
+
+.config-example {
+  margin-top: 0.5rem;
+  padding: 0.5rem;
+  background: var(--vp-c-bg-alt);
+  border-radius: 4px;
+  overflow-x: auto;
+}
+
+.config-example code {
+  font-size: 0.7rem;
+  line-height: 1.4;
+}
+
+.config-locations {
+  padding: 0.75rem;
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+}
+
+.config-title {
+  font-weight: 600;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.5rem;
+}
+
+.config-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.config-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+}
+
+.config-name {
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+  min-width: 100px;
+}
+
+.config-path {
+  color: var(--vp-c-text-2);
+  font-family: monospace;
+  font-size: 0.7rem;
+}
+
+.mcp-resources {
+  margin-top: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+}
+
+.resource-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+}
+
+.resource-name {
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+  min-width: 120px;
+}
+
+.resource-link {
+  color: var(--vp-c-brand);
+  font-size: 0.7rem;
+}
+
+.skills-note {
+  margin-top: 1rem;
+  padding: 0.75rem;
+  background: var(--vp-c-bg-alt);
+  border-radius: 6px;
+  border-left: 3px solid #f59e0b;
+}
+
+.skills-note .note-title {
+  font-weight: 600;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.3rem;
+}
+
+.skills-note .note-content {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.4;
+}
+
+.implement-section {
+  margin-bottom: 1.5rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.implement-section .section-title {
+  font-weight: 600;
+  font-size: 0.95rem;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.5rem;
+}
+
+.implement-intro {
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.5;
+  margin-bottom: 0.75rem;
+}
+
+.implement-code {
+  margin-bottom: 1rem;
+}
+
+.code-title {
+  font-weight: 500;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.3rem;
+}
+
+.code-block {
+  padding: 0.75rem;
+  background: var(--vp-c-bg-alt);
+  border-radius: 6px;
+  overflow-x: auto;
+}
+
+.code-block code {
+  font-size: 0.65rem;
+  line-height: 1.4;
+}
+
+.transport-compare {
+  padding: 0.75rem;
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+}
+
+.compare-title {
+  font-weight: 600;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.5rem;
+}
+
+.compare-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+}
+
+.compare-item {
+  padding: 0.5rem;
+  background: var(--vp-c-bg-alt);
+  border-radius: 6px;
+}
+
+.compare-name {
+  font-weight: 600;
+  font-size: 0.75rem;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.3rem;
+}
+
+.compare-desc p {
+  font-size: 0.7rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.3;
+  margin: 0.2rem 0;
+}
+
+.compare-desc strong {
+  color: var(--vp-c-text-1);
+}
+
+@media (max-width: 640px) {
+  .compare-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/ai-protocols/McpVisualDemo.vue b/docs/.vitepress/theme/components/appendix/ai-protocols/McpVisualDemo.vue
new file mode 100644
index 0000000..9679c54
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/ai-protocols/McpVisualDemo.vue
@@ -0,0 +1,284 @@
+<template>
+  <div class="mcp-visual-demo">
+    <div class="section-title">MCP 是什么？</div>
+
+    <div class="intro-text">
+      MCP（Model Context Protocol）是 Anthropic 于 2024 年 11 月推出的<strong>AI 与外部工具连接的统一标准</strong>。它让 AI 应用可以调用外部工具、读取资源数据、使用预定义提示，就像给 AI 装上了"手"和"眼睛"。
+    </div>
+
+    <div class="section-title">三大核心能力</div>
+
+    <div class="能力-table">
+      <div class="table-header">
+        <div class="col-能力">能力</div>
+        <div class="col-英文">英文</div>
+        <div class="col-作用">作用</div>
+        <div class="col-示例">示例</div>
+      </div>
+      <div class="table-row">
+        <div class="col-能力"><strong>工具</strong></div>
+        <div class="col-英文">Tools</div>
+        <div class="col-作用">AI 可以调用的功能</div>
+        <div class="col-示例">查询天气、发送邮件、调用 API</div>
+      </div>
+      <div class="table-row">
+        <div class="col-能力"><strong>资源</strong></div>
+        <div class="col-英文">Resources</div>
+        <div class="col-作用">AI 可以读取的数据</div>
+        <div class="col-示例">文件内容、数据库记录、配置信息</div>
+      </div>
+      <div class="table-row">
+        <div class="col-能力"><strong>提示</strong></div>
+        <div class="col-英文">Prompts</div>
+        <div class="col-作用">预定义的提示模板</div>
+        <div class="col-示例">代码审查模板、写作模板</div>
+      </div>
+    </div>
+
+    <div class="section-title">什么时候用 MCP？</div>
+
+    <div class="use-cases">
+      <div class="use-case">
+        <div class="use-case-title">当 AI 需要执行实际操作时</div>
+        <div class="use-case-desc">AI 不仅要回答问题，还要真正做事：发送邮件、操作文件、调用第三方 API</div>
+      </div>
+      <div class="use-case">
+        <div class="use-case-title">当 AI 需要访问私有数据时</div>
+        <div class="use-case-desc">读取本地文件、查询数据库、访问企业内部系统</div>
+      </div>
+      <div class="use-case">
+        <div class="use-case-title">当需要标准化工具接入时</div>
+        <div class="use-case-desc">一次开发，多个 AI 应用可用（Claude、Cursor、Windsurf 等）</div>
+      </div>
+    </div>
+
+    <div class="section-title">如何使用 MCP？</div>
+
+    <div class="usage-steps">
+      <div class="step">
+        <div class="step-num">1</div>
+        <div class="step-content">
+          <div class="step-title">开发 MCP Server</div>
+          <div class="step-desc">按 MCP 规范实现 Server，提供 tools/resources/prompts</div>
+        </div>
+      </div>
+      <div class="step">
+        <div class="step-num">2</div>
+        <div class="step-content">
+          <div class="step-title">配置 AI 应用连接</div>
+          <div class="step-desc">在 AI 应用中添加 MCP Server 配置（本地或远程）</div>
+        </div>
+      </div>
+      <div class="step">
+        <div class="step-num">3</div>
+        <div class="step-content">
+          <div class="step-title">AI 自动调用</div>
+          <div class="step-desc">AI 根据任务需求，自动发现并调用合适的工具或读取资源</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+.mcp-visual-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  background: var(--vp-c-bg-soft);
+  padding: 1.25rem;
+  margin: 1rem 0;
+}
+
+.section-title {
+  font-weight: 600;
+  font-size: 1rem;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.75rem;
+  margin-top: 1.25rem;
+}
+
+.section-title:first-child {
+  margin-top: 0;
+}
+
+.intro-text {
+  font-size: 0.9rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.6;
+  margin-bottom: 1rem;
+}
+
+.intro-text strong {
+  color: var(--vp-c-brand);
+}
+
+.能力-table {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  overflow: hidden;
+  margin-bottom: 1rem;
+}
+
+.table-header {
+  display: flex;
+  background: var(--vp-c-bg-alt);
+  border-bottom: 1px solid var(--vp-c-divider);
+  font-weight: 600;
+  font-size: 0.8rem;
+}
+
+.table-row {
+  display: flex;
+  border-bottom: 1px solid var(--vp-c-divider);
+  font-size: 0.8rem;
+}
+
+.table-row:last-child {
+  border-bottom: none;
+}
+
+.col-能力 {
+  width: 15%;
+  padding: 0.5rem 0.6rem;
+  color: var(--vp-c-text-1);
+}
+
+.col-英文 {
+  width: 18%;
+  padding: 0.5rem 0.6rem;
+  color: var(--vp-c-text-2);
+}
+
+.col-作用 {
+  width: 32%;
+  padding: 0.5rem 0.6rem;
+  color: var(--vp-c-text-2);
+}
+
+.col-示例 {
+  width: 35%;
+  padding: 0.5rem 0.6rem;
+  color: var(--vp-c-text-3);
+}
+
+.use-cases {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  margin-bottom: 1rem;
+}
+
+.use-case {
+  padding: 0.75rem;
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+  border-left: 3px solid var(--vp-c-brand);
+}
+
+.use-case-title {
+  font-weight: 600;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.3rem;
+}
+
+.use-case-desc {
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.4;
+}
+
+.usage-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+
+.step {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+}
+
+.step-num {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  background: var(--vp-c-brand);
+  color: white;
+  border-radius: 50%;
+  font-size: 0.75rem;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.step-content {
+  flex: 1;
+}
+
+.step-title {
+  font-weight: 600;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.2rem;
+}
+
+.step-desc {
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.4;
+}
+
+@media (max-width: 640px) {
+  .table-header,
+  .table-row {
+    flex-direction: column;
+  }
+
+  .col-能力,
+  .col-英文,
+  .col-作用,
+  .col-示例 {
+    width: 100%;
+    padding: 0.35rem 0.6rem;
+  }
+
+  .table-header {
+    display: none;
+  }
+
+  .table-row {
+    padding: 0.5rem 0;
+  }
+
+  .col-能力 {
+    font-size: 0.85rem;
+    padding-bottom: 0.2rem;
+  }
+
+  .col-英文 {
+    font-size: 0.75rem;
+    padding-top: 0;
+    padding-bottom: 0.2rem;
+  }
+
+  .col-作用 {
+    font-size: 0.8rem;
+    padding-top: 0;
+    padding-bottom: 0.2rem;
+  }
+
+  .col-示例 {
+    font-size: 0.75rem;
+    padding-top: 0;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/ai-protocols/ProtocolComparisonDemo.vue b/docs/.vitepress/theme/components/appendix/ai-protocols/ProtocolComparisonDemo.vue
new file mode 100644
index 0000000..c3a10b8
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/ai-protocols/ProtocolComparisonDemo.vue
@@ -0,0 +1,268 @@
+<template>
+  <div class="protocol-comparison-demo">
+    <div class="demo-header">
+      <span class="title">MCP vs A2A</span>
+      <span class="subtitle">AI Agent 两大协议的定位差异</span>
+    </div>
+
+    <div class="intro-text">
+      想象你在一个<span class="highlight">大型商场</span>：MCP 就像商场的"统一插座标准"，让各种电器（工具）都能插上使用；A2A 就像商场的"内部对讲系统"，让不同店铺（Agent）之间可以协作。
+    </div>
+
+    <div class="protocol-cards">
+      <div class="protocol-card mcp">
+        <div class="card-header">
+          <span class="card-title">MCP</span>
+          <span class="card-badge">工具连接</span>
+        </div>
+        <div class="card-fullname">Model Context Protocol</div>
+        <div class="card-desc">
+          AI 与外部工具、数据源的连接协议，让工具开发者写一次代码，所有 AI 应用都能用
+        </div>
+        <div class="card-meta">
+          <div class="meta-item">
+            <span class="meta-label">发起方</span>
+            <span class="meta-value">Anthropic</span>
+          </div>
+          <div class="meta-item">
+            <span class="meta-label">发布时间</span>
+            <span class="meta-value">2024.11</span>
+          </div>
+          <div class="meta-item">
+            <span class="meta-label">架构</span>
+            <span class="meta-value">Client-Server</span>
+          </div>
+          <div class="meta-item">
+            <span class="meta-label">数据格式</span>
+            <span class="meta-value">JSON-RPC 2.0</span>
+          </div>
+        </div>
+        <div class="card-analogy">
+          <span class="analogy-label">类比</span>
+          <span class="analogy-text">USB-C 接口 —— 统一各种设备的充电方式</span>
+        </div>
+      </div>
+
+      <div class="protocol-card a2a">
+        <div class="card-header">
+          <span class="card-title">A2A</span>
+          <span class="card-badge">Agent协作</span>
+        </div>
+        <div class="card-fullname">Agent-to-Agent Protocol</div>
+        <div class="card-desc">
+          Agent 之间的通信协议，让不同厂商、不同框架的 Agent 能够无缝协作
+        </div>
+        <div class="card-meta">
+          <div class="meta-item">
+            <span class="meta-label">发起方</span>
+            <span class="meta-value">Google</span>
+          </div>
+          <div class="meta-item">
+            <span class="meta-label">发布时间</span>
+            <span class="meta-value">2025.04</span>
+          </div>
+          <div class="meta-item">
+            <span class="meta-label">架构</span>
+            <span class="meta-value">Peer-to-Peer</span>
+          </div>
+          <div class="meta-item">
+            <span class="meta-label">数据格式</span>
+            <span class="meta-value">HTTP + JSON</span>
+          </div>
+        </div>
+        <div class="card-analogy">
+          <span class="analogy-label">类比</span>
+          <span class="analogy-text">企业微信 —— 让同事之间可以发任务、聊天</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="info-box">
+      <strong>核心思想：</strong>MCP 和 A2A 不是竞争关系，而是互补关系。MCP 解决"AI 如何获取外部能力"，A2A 解决"多个 AI 如何协作"。
+    </div>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+.protocol-comparison-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg-soft);
+  padding: 1rem;
+  margin: 1rem 0;
+}
+
+.demo-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.demo-header .icon {
+  font-size: 1.25rem;
+}
+
+.demo-header .title {
+  font-weight: bold;
+  font-size: 1rem;
+}
+
+.demo-header .subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.85rem;
+  margin-left: 0.5rem;
+}
+
+.intro-text {
+  color: var(--vp-c-text-2);
+  font-size: 0.9rem;
+  margin-bottom: 1rem;
+  line-height: 1.5;
+}
+
+.intro-text .highlight {
+  color: var(--vp-c-brand);
+  font-weight: 500;
+}
+
+.protocol-cards {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+.protocol-card {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 0.75rem;
+  background: var(--vp-c-bg);
+}
+
+.protocol-card.mcp {
+  border-left: 3px solid #3b82f6;
+}
+
+.protocol-card.a2a {
+  border-left: 3px solid #10b981;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.4rem;
+}
+
+.card-icon {
+  font-size: 1.25rem;
+}
+
+.card-title {
+  font-weight: bold;
+  font-size: 1.1rem;
+}
+
+.card-badge {
+  font-size: 0.7rem;
+  padding: 0.15rem 0.4rem;
+  border-radius: 4px;
+  margin-left: auto;
+}
+
+.protocol-card.mcp .card-badge {
+  background: rgba(59, 130, 246, 0.2);
+  color: #3b82f6;
+}
+
+.protocol-card.a2a .card-badge {
+  background: rgba(16, 185, 129, 0.2);
+  color: #10b981;
+}
+
+.card-fullname {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-3);
+  margin-bottom: 0.4rem;
+}
+
+.card-desc {
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.4;
+  margin-bottom: 0.6rem;
+}
+
+.card-meta {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.4rem;
+  margin-bottom: 0.6rem;
+  padding: 0.5rem;
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+}
+
+.meta-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+}
+
+.meta-label {
+  font-size: 0.65rem;
+  color: var(--vp-c-text-3);
+}
+
+.meta-value {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-1);
+  font-weight: 500;
+}
+
+.card-analogy {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.4rem;
+  background: var(--vp-c-bg-alt);
+  border-radius: 6px;
+}
+
+.analogy-label {
+  font-size: 0.65rem;
+  color: var(--vp-c-text-3);
+  flex-shrink: 0;
+}
+
+.analogy-text {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.3;
+}
+
+.info-box {
+  background: var(--vp-c-bg-alt);
+  padding: 0.75rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  display: flex;
+  gap: 0.25rem;
+  align-items: flex-start;
+}
+
+.info-box .icon {
+  flex-shrink: 0;
+}
+
+@media (max-width: 640px) {
+  .protocol-cards {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/ai-protocols/ProtocolWorkflowDemo.vue b/docs/.vitepress/theme/components/appendix/ai-protocols/ProtocolWorkflowDemo.vue
new file mode 100644
index 0000000..c88ff5a
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/ai-protocols/ProtocolWorkflowDemo.vue
@@ -0,0 +1,336 @@
+<template>
+  <div class="protocol-workflow-demo">
+    <div class="demo-header">
+      <span class="title">MCP + A2A 协作流程</span>
+      <span class="subtitle">两者如何配合完成复杂任务</span>
+    </div>
+
+    <div class="intro-text">
+      想象你要<span class="highlight">装修房子</span>：你需要设计师（主 Agent）出方案，工人（专家 Agent）施工，还要从建材市场（工具）买材料。A2A 让设计师和工人能协作，MCP 让工人能买到材料。
+    </div>
+
+    <div class="workflow-diagram">
+      <div class="user-node">
+        <span class="node-label">用户</span>
+      </div>
+      <div class="arrow">→</div>
+      <div class="agent-node main">
+        <span class="node-label">主 Agent</span>
+        <span class="node-role">需求分析</span>
+      </div>
+      <div class="arrow">→</div>
+      <div class="a2a-badge">
+        <span class="badge-text">A2A</span>
+      </div>
+      <div class="agent-node expert">
+        <span class="node-label">专家 Agent</span>
+        <span class="node-role">执行任务</span>
+      </div>
+      <div class="arrow">↔</div>
+      <div class="mcp-badge">
+        <span class="badge-text">MCP</span>
+      </div>
+      <div class="tool-node">
+        <span class="node-label">外部工具</span>
+        <span class="node-role">API/数据库</span>
+      </div>
+    </div>
+
+    <div class="flow-steps">
+      <div class="flow-step">
+        <span class="step-num">1</span>
+        <span class="step-text">用户向主 Agent 提出需求（如"分析这个 GitHub 仓库"）</span>
+      </div>
+      <div class="flow-step">
+        <span class="step-num">2</span>
+        <span class="step-text">主 Agent 通过 <strong>A2A</strong> 委托专家 Agent 执行任务</span>
+      </div>
+      <div class="flow-step">
+        <span class="step-num">3</span>
+        <span class="step-text">专家 Agent 通过 <strong>MCP</strong> 调用外部工具获取数据</span>
+      </div>
+      <div class="flow-step">
+        <span class="step-num">4</span>
+        <span class="step-text">专家 Agent 通过 <strong>A2A</strong> 返回结果给主 Agent</span>
+      </div>
+      <div class="flow-step">
+        <span class="step-num">5</span>
+        <span class="step-text">主 Agent 汇总结果，回复用户</span>
+      </div>
+    </div>
+
+    <div class="legend">
+      <div class="legend-item">
+        <span class="legend-dot a2a"></span>
+        <span class="legend-text"><strong>A2A</strong>：Agent ↔ Agent 通信</span>
+      </div>
+      <div class="legend-item">
+        <span class="legend-dot mcp"></span>
+        <span class="legend-text"><strong>MCP</strong>：Agent ↔ 工具 通信</span>
+      </div>
+    </div>
+
+    <div class="info-box">
+      <strong>核心思想：</strong>A2A 负责 Agent 之间的任务分配和协作，MCP 负责 Agent 与外部工具的交互，两者各司其职，互补协作。
+    </div>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+.protocol-workflow-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg-soft);
+  padding: 1rem;
+  margin: 1rem 0;
+}
+
+.demo-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.demo-header .icon {
+  font-size: 1.25rem;
+}
+
+.demo-header .title {
+  font-weight: bold;
+  font-size: 1rem;
+}
+
+.demo-header .subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.85rem;
+  margin-left: 0.5rem;
+}
+
+.intro-text {
+  color: var(--vp-c-text-2);
+  font-size: 0.9rem;
+  margin-bottom: 1rem;
+  line-height: 1.5;
+}
+
+.intro-text .highlight {
+  color: var(--vp-c-brand);
+  font-weight: 500;
+}
+
+.workflow-diagram {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  padding: 1rem;
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  margin-bottom: 1rem;
+  flex-wrap: wrap;
+  overflow-x: auto;
+}
+
+.user-node,
+.agent-node,
+.tool-node {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.2rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 8px;
+  background: var(--vp-c-bg-soft);
+}
+
+.user-node {
+  border: 1px dashed var(--vp-c-divider);
+}
+
+.agent-node.main {
+  border: 2px solid var(--vp-c-brand);
+  background: rgba(100, 108, 255, 0.1);
+}
+
+.agent-node.expert {
+  border: 2px solid #10b981;
+  background: rgba(16, 185, 129, 0.1);
+}
+
+.tool-node {
+  border: 1px solid var(--vp-c-divider);
+}
+
+.node-icon {
+  font-size: 1.25rem;
+}
+
+.node-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+.node-role {
+  font-size: 0.65rem;
+  color: var(--vp-c-text-3);
+}
+
+.arrow {
+  color: var(--vp-c-text-3);
+  font-size: 1rem;
+  font-weight: bold;
+}
+
+.a2a-badge,
+.mcp-badge {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.1rem;
+  padding: 0.3rem 0.5rem;
+  border-radius: 6px;
+}
+
+.a2a-badge {
+  background: rgba(16, 185, 129, 0.15);
+}
+
+.a2a-badge .badge-icon {
+  font-size: 0.9rem;
+}
+
+.a2a-badge .badge-text {
+  font-size: 0.6rem;
+  font-weight: 700;
+  color: #10b981;
+}
+
+.mcp-badge {
+  background: rgba(59, 130, 246, 0.15);
+}
+
+.mcp-badge .badge-icon {
+  font-size: 0.9rem;
+}
+
+.mcp-badge .badge-text {
+  font-size: 0.6rem;
+  font-weight: 700;
+  color: #3b82f6;
+}
+
+.flow-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.flow-step {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 0.4rem 0.6rem;
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+}
+
+.step-num {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--vp-c-brand);
+  color: white;
+  font-size: 0.7rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-weight: 600;
+}
+
+.step-text {
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.4;
+}
+
+.step-text strong {
+  color: var(--vp-c-brand);
+}
+
+.legend {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 0.75rem;
+  padding: 0.5rem;
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+  justify-content: center;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  font-size: 0.75rem;
+}
+
+.legend-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+
+.legend-dot.a2a {
+  background: #10b981;
+}
+
+.legend-dot.mcp {
+  background: #3b82f6;
+}
+
+.legend-text {
+  color: var(--vp-c-text-2);
+}
+
+.legend-text strong {
+  color: var(--vp-c-text-1);
+}
+
+.info-box {
+  background: var(--vp-c-bg-alt);
+  padding: 0.75rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  display: flex;
+  gap: 0.25rem;
+  align-items: flex-start;
+}
+
+.info-box .icon {
+  flex-shrink: 0;
+}
+
+@media (max-width: 768px) {
+  .workflow-diagram {
+    justify-content: flex-start;
+    overflow-x: auto;
+    padding: 0.75rem;
+  }
+
+  .flow-steps {
+    gap: 0.4rem;
+  }
+
+  .flow-step {
+    padding: 0.3rem 0.5rem;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/api-design/RestfulApiFlow.vue b/docs/.vitepress/theme/components/appendix/api-design/RestfulApiFlow.vue
new file mode 100644
index 0000000..07ef39a
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/api-design/RestfulApiFlow.vue
@@ -0,0 +1,417 @@
+<template>
+  <div class="raf-root">
+    <div class="raf-layout">
+      <!-- Left: Client Side -->
+      <div class="raf-left">
+        <div class="raf-header">
+          <span class="raf-icon">💻</span>
+          <span class="raf-title">Client (Browser/App)</span>
+        </div>
+        
+        <div class="raf-controls">
+          <div class="raf-scenarios">
+            <button 
+              v-for="s in scenarios" 
+              :key="s.id"
+              :class="['raf-chip', { active: currentScenario.id === s.id }]"
+              @click="selectScenario(s)"
+              :disabled="processing"
+            >
+              {{ s.label }}
+            </button>
+          </div>
+        </div>
+
+        <div class="raf-request-box">
+          <div class="raf-http-line">
+            <span :class="['raf-method', currentScenario.method]">{{ currentScenario.method }}</span>
+            <span class="raf-url">{{ currentScenario.url }}</span>
+          </div>
+          <div v-if="currentScenario.body" class="raf-code-block">
+            {{ JSON.stringify(currentScenario.body, null, 2) }}
+          </div>
+          <button 
+            class="raf-send-btn" 
+            @click="sendRequest" 
+            :disabled="processing"
+          >
+            {{ processing ? 'Sending...' : 'Send Request' }}
+          </button>
+        </div>
+
+        <div class="raf-response-box" v-if="response">
+          <div class="raf-status-line">
+            <span class="raf-label">Response Status:</span>
+            <span :class="['raf-status-badge', getStatusColor(response.status)]">
+              {{ response.status }} {{ response.statusText }}
+            </span>
+          </div>
+          <div class="raf-code-block response-body">
+            {{ JSON.stringify(response.body, null, 2) }}
+          </div>
+        </div>
+      </div>
+
+      <!-- Right: Server Side -->
+      <div class="raf-right">
+        <div class="raf-header server-header">
+          <span class="raf-icon">☁️</span>
+          <span class="raf-title">Server (API)</span>
+        </div>
+
+        <div class="raf-server-state">
+          <!-- Database View -->
+          <div class="raf-section">
+            <div class="raf-section-title">📦 Database (Users Resource)</div>
+            <div class="raf-db-view">
+              <transition-group name="list">
+                <div v-for="user in db" :key="user.id" class="raf-db-item">
+                  <span class="raf-db-id">ID: {{ user.id }}</span>
+                  <span class="raf-db-name">{{ user.name }}</span>
+                  <span class="raf-db-role">({{ user.role }})</span>
+                </div>
+              </transition-group>
+              <div v-if="db.length === 0" class="raf-empty">No users found</div>
+            </div>
+          </div>
+
+          <!-- Logs -->
+          <div class="raf-section">
+            <div class="raf-section-title">📜 Server Logs</div>
+            <div class="raf-logs" ref="logsRef">
+              <div v-for="(log, i) in logs" :key="i" class="raf-log-line">
+                <span class="raf-log-time">[{{ log.time }}]</span>
+                <span :class="log.type">{{ log.msg }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, nextTick } from 'vue'
+
+const processing = ref(false)
+const response = ref(null)
+const logs = ref([])
+const logsRef = ref(null)
+
+const db = ref([
+  { id: 1, name: "Alice", role: "admin" },
+  { id: 2, name: "Bob", role: "user" }
+])
+
+const scenarios = [
+  { id: 'get-all', label: 'GET /users', method: 'GET', url: '/api/users', body: null },
+  { id: 'get-one', label: 'GET /users/1', method: 'GET', url: '/api/users/1', body: null },
+  { id: 'create', label: 'POST /users', method: 'POST', url: '/api/users', body: { name: "Charlie", role: "user" } },
+  { id: 'not-found', label: 'GET /users/99', method: 'GET', url: '/api/users/99', body: null },
+  { id: 'delete', label: 'DELETE /users/1', method: 'DELETE', url: '/api/users/1', body: null },
+]
+
+const currentScenario = ref(scenarios[0])
+
+function selectScenario(s) {
+  currentScenario.value = s
+  response.value = null
+}
+
+function addLog(msg, type = 'info') {
+  const now = new Date()
+  const time = `${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`
+  logs.value.push({ time, msg, type })
+  nextTick(() => {
+    if (logsRef.value) logsRef.value.scrollTop = logsRef.value.scrollHeight
+  })
+}
+
+function getStatusColor(status) {
+  if (status >= 200 && status < 300) return 'status-success'
+  if (status >= 400 && status < 500) return 'status-error'
+  return 'status-neutral'
+}
+
+async function sendRequest() {
+  processing.value = true
+  response.value = null
+  addLog(`Received ${currentScenario.value.method} ${currentScenario.value.url}`, 'info')
+  
+  await new Promise(r => setTimeout(r, 600)) // Simulate network latency
+
+  const { method, url, body } = currentScenario.value
+  
+  // Router Logic Simulation
+  if (method === 'GET' && url === '/api/users') {
+    response.value = { status: 200, statusText: 'OK', body: db.value }
+    addLog('Matched route: GET /users -> listUsers()', 'success')
+  } 
+  else if (method === 'GET' && url.match(/\/api\/users\/\d+/)) {
+    const id = parseInt(url.split('/').pop())
+    const user = db.value.find(u => u.id === id)
+    if (user) {
+      response.value = { status: 200, statusText: 'OK', body: user }
+      addLog(`Found user ${id}`, 'success')
+    } else {
+      response.value = { status: 404, statusText: 'Not Found', body: { error: "User not found" } }
+      addLog(`User ${id} not found in DB`, 'error')
+    }
+  }
+  else if (method === 'POST' && url === '/api/users') {
+    const newUser = { id: Math.max(0, ...db.value.map(u => u.id)) + 1, ...body }
+    db.value.push(newUser)
+    response.value = { status: 201, statusText: 'Created', body: newUser }
+    addLog(`Created user ${newUser.id}`, 'success')
+  }
+  else if (method === 'DELETE' && url.match(/\/api\/users\/\d+/)) {
+    const id = parseInt(url.split('/').pop())
+    const idx = db.value.findIndex(u => u.id === id)
+    if (idx !== -1) {
+      db.value.splice(idx, 1)
+      response.value = { status: 204, statusText: 'No Content', body: null }
+      addLog(`Deleted user ${id}`, 'success')
+    } else {
+      response.value = { status: 404, statusText: 'Not Found', body: { error: "User not found" } }
+      addLog(`User ${id} not found for deletion`, 'error')
+    }
+  }
+
+  processing.value = false
+}
+</script>
+
+<style scoped>
+.raf-root {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--vp-c-bg-soft);
+  margin: 1rem 0;
+  font-family: var(--vp-font-family-mono);
+  font-size: 13px;
+}
+
+.raf-layout {
+  display: flex;
+  min-height: 400px;
+}
+
+.raf-left, .raf-right {
+  flex: 1;
+  padding: 1.2rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.raf-left {
+  border-right: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg);
+}
+
+.raf-right {
+  background: var(--vp-c-bg-alt);
+}
+
+.raf-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 1rem;
+  font-weight: 600;
+  font-size: 1.1em;
+  color: var(--vp-c-text-1);
+}
+
+.raf-scenarios {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 1.5rem;
+}
+
+.raf-chip {
+  border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg);
+  padding: 6px 12px;
+  border-radius: 20px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+  color: var(--vp-c-text-2);
+}
+
+.raf-chip:hover {
+  border-color: var(--vp-c-brand);
+  color: var(--vp-c-brand);
+}
+
+.raf-chip.active {
+  background: var(--vp-c-brand);
+  color: white;
+  border-color: var(--vp-c-brand);
+}
+
+.raf-request-box {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  padding: 1rem;
+  background: var(--vp-c-bg-soft);
+  margin-bottom: 1rem;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+
+.raf-http-line {
+  display: flex;
+  gap: 10px;
+  font-family: monospace;
+  margin-bottom: 8px;
+  align-items: center;
+  font-size: 1.1em;
+}
+
+.raf-method {
+  font-weight: bold;
+}
+.raf-method.GET { color: #61affe; }
+.raf-method.POST { color: #49cc90; }
+.raf-method.DELETE { color: #f93e3e; }
+
+.raf-code-block {
+  background: var(--vp-c-bg);
+  padding: 10px;
+  border-radius: 4px;
+  font-size: 12px;
+  white-space: pre;
+  overflow-x: auto;
+  border: 1px solid var(--vp-c-divider);
+  color: var(--vp-c-text-2);
+}
+
+.raf-send-btn {
+  margin-top: 10px;
+  width: 100%;
+  padding: 10px;
+  background: var(--vp-c-brand);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 600;
+  transition: opacity 0.2s;
+}
+.raf-send-btn:hover {
+  opacity: 0.9;
+}
+.raf-send-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.raf-response-box {
+  margin-top: auto;
+  border-top: 1px solid var(--vp-c-divider);
+  padding-top: 1rem;
+  animation: slideUp 0.3s ease-out;
+}
+
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.raf-status-line {
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+}
+
+.raf-status-badge {
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: bold;
+  margin-left: 8px;
+}
+.status-success { background: #d1fae5; color: #065f46; }
+.status-error { background: #fee2e2; color: #991b1b; }
+.status-neutral { background: #f3f4f6; color: #374151; }
+
+.raf-db-view {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.raf-db-item {
+  display: flex;
+  gap: 10px;
+  padding: 8px 12px;
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+  border: 1px solid var(--vp-c-divider);
+  font-size: 12px;
+  align-items: center;
+}
+
+.raf-db-id { color: var(--vp-c-text-3); font-family: monospace; }
+.raf-db-name { font-weight: bold; }
+.raf-db-role { color: var(--vp-c-brand); font-size: 0.9em; }
+
+.raf-logs {
+  height: 180px;
+  overflow-y: auto;
+  background: #1e1e1e;
+  color: #d4d4d4;
+  padding: 12px;
+  border-radius: 6px;
+  font-family: monospace;
+  font-size: 11px;
+  line-height: 1.5;
+}
+
+.raf-log-line {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.raf-log-time { color: #6b7280; flex-shrink: 0; }
+.info { color: #93c5fd; }
+.success { color: #86efac; }
+.error { color: #fca5a5; }
+
+.raf-section-title {
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-weight: bold;
+  margin-bottom: 8px;
+  color: var(--vp-c-text-3);
+  margin-top: 1.5rem;
+}
+.raf-section:first-child .raf-section-title { margin-top: 0; }
+
+.raf-empty {
+  color: var(--vp-c-text-3);
+  font-style: italic;
+  padding: 10px;
+  text-align: center;
+}
+
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.3s ease;
+}
+.list-enter-from,
+.list-leave-to {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+@media (max-width: 768px) {
+  .raf-layout { flex-direction: column; }
+  .raf-left { border-right: none; border-bottom: 1px solid var(--vp-c-divider); }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/AdderDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/AdderDemo.vue
index 9ff3077..c0ab1c3 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/AdderDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/AdderDemo.vue
@@ -2,69 +2,75 @@
   <div class="adder-demo">
     <div class="demo-header">
       <span class="title">加法器：用逻辑门做二进制加法</span>
-      <span class="subtitle">点击蓝色位按钮切换 0/1，观察进位如何逐位传递</span>
+      <span class="subtitle">就像手算竖式：从个位往高位算，逢二进一，进位往左传</span>
     </div>
 
-    <!-- 名词解释 -->
-    <div class="legend">
-      <span class="legend-item"><span class="dot a" />A = 被加数</span>
-      <span class="legend-item"><span class="dot b" />B = 加数</span>
-      <span class="legend-item"><span class="dot s" />S = 和（Sum，本位结果）</span>
-      <span class="legend-item"><span class="dot c" />C = 进位（Carry，传给下一位）</span>
-    </div>
-
-    <!-- 输入控制 -->
     <div class="control-panel">
-      <div class="input-group">
-        <span class="group-label">A（被加数）</span>
-        <div class="bits">
-          <button
-            v-for="(bit, i) in bitsA"
-            :key="'a' + i"
-            class="bit-btn"
-            :class="{ on: bit }"
-            @click="toggleBit('A', i)"
-          >
-            {{ bit }}
-          </button>
-        </div>
-        <span class="decimal">= {{ decimalA }}</span>
+      <label>
+        <span class="control-label">A（被加数）</span>
+        <input v-model.number="inputA" type="number" min="0" max="15" class="num-input" />
+      </label>
+      <span class="op">+</span>
+      <label>
+        <span class="control-label">B（加数）</span>
+        <input v-model.number="inputB" type="number" min="0" max="15" class="num-input" />
+      </label>
+      <span class="eq">=</span>
+      <span class="result-dec">{{ resultDec }}</span>
+    </div>
+
+    <div class="why-what-box">
+      <p class="why-p">
+        <strong>为啥要看这些？</strong>CPU 只会处理 0 和 1，所以加法要「一位一位」算；每一列（第 0 位、第 1 位…）都需要一个小电路来算「这一位写几、要不要往左进位」。
+      </p>
+      <p class="what-p">
+        <strong>这些词是啥？</strong>
+        <span class="term">半加器</span>：只算这一位的 A+B（最右边没有进位进来）。  
+        <span class="term">全加器</span>：算 A+B+上一位的进位。  
+        <span class="term">S</span>：这一位写下的数字（0 或 1）。  
+        <span class="term">Cout</span>：要不要往左边一位进 1（进就是 1，不进就是 0）。
+      </p>
+    </div>
+
+    <div class="example-block">
+      <div class="example-row">
+        <span class="example-label">A（被加数）</span>
+        <span class="example-bits">
+          <span v-for="(b, i) in bitsA" :key="'a'+i" class="bit" :class="{ active: highlightedBit === (3 - i) }">{{ b }}</span>
+        </span>
+        <span class="example-dec">= {{ inputA }}</span>
       </div>
-      <div class="op-sign">+</div>
-      <div class="input-group">
-        <span class="group-label">B（加数）</span>
-        <div class="bits">
-          <button
-            v-for="(bit, i) in bitsB"
-            :key="'b' + i"
-            class="bit-btn"
-            :class="{ on: bit }"
-            @click="toggleBit('B', i)"
-          >
-            {{ bit }}
-          </button>
-        </div>
-        <span class="decimal">= {{ decimalB }}</span>
+      <div class="example-row">
+        <span class="example-label">B（加数）</span>
+        <span class="example-bits">
+          <span v-for="(b, i) in bitsB" :key="'b'+i" class="bit" :class="{ active: highlightedBit === (3 - i) }">{{ b }}</span>
+        </span>
+        <span class="example-dec">= {{ inputB }}</span>
       </div>
-      <div class="op-sign">=</div>
-      <div class="result-inline">
-        <span class="result-bin">{{ resultBinary }}</span>
-        <span class="result-dec">（十进制 {{ resultDecimal }}）</span>
+      <div class="example-row result-row">
+        <span class="example-label">结果</span>
+        <span class="example-bits">
+          <span v-for="(b, i) in bitsSum" :key="'s'+i" class="bit" :class="{ active: highlightedBit === (3 - i) }">{{ b }}</span>
+        </span>
+        <span class="example-dec">= {{ resultDec }}</span>
+      </div>
+      <div class="bit-legend">
+        <span v-for="i in 4" :key="i" class="bit-legend-item">第{{ 4 - i }}位</span>
       </div>
     </div>
 
-    <!-- 每位加法器展示 -->
-    <div class="stages-label">逐位计算过程（从最低位开始）</div>
+    <div class="stages-label">逐位计算（从右往左：第 0 位 → 第 3 位，对应上面每一列）</div>
     <div class="adder-stages">
       <div
-        v-for="(stage, idx) in stageData"
+        v-for="(stage, idx) in stages"
         :key="idx"
         class="stage"
+        :class="{ 'stage-highlight': highlightedBit === stage.bitPos }"
+        @mouseenter="highlightedBit = stage.bitPos"
+        @mouseleave="highlightedBit = null"
       >
         <div class="stage-title">第 {{ stage.bitPos }} 位（{{ stage.posName }}）</div>
-
         <div class="stage-content">
-          <!-- 输入列 -->
           <div class="io-col inputs-col">
             <div class="io-row">
               <span class="io-badge a-badge">A</span>
@@ -74,55 +80,34 @@
               <span class="io-badge b-badge">B</span>
               <span class="io-val">{{ stage.b }}</span>
             </div>
-            <div v-if="stage.carryIn !== null" class="io-row carry-in-row">
+            <div v-if="stage.carryIn !== null" class="io-row">
               <span class="io-badge cin-badge">Cin</span>
               <span class="io-val">{{ stage.carryIn }}</span>
             </div>
           </div>
-
-          <!-- 全加器框 -->
           <div class="fa-box">
             <div class="fa-label">{{ stage.carryIn !== null ? '全加器' : '半加器' }}</div>
-            <div class="fa-hint">{{ stage.carryIn !== null ? 'Full Adder' : 'Half Adder' }}</div>
+            <div class="fa-hint">{{ stage.carryIn !== null ? 'A+B+进位' : '只算 A+B' }}</div>
           </div>
-
-          <!-- 输出列 -->
           <div class="io-col outputs-col">
             <div class="io-row">
-              <span class="io-badge s-badge">S</span>
+              <span class="io-badge s-badge" :title="'S = 这一位写下的数'">S</span>
               <span class="io-val sum-val">{{ stage.sum }}</span>
             </div>
             <div class="io-row">
-              <span class="io-badge cout-badge">Cout</span>
+              <span class="io-badge cout-badge" :title="'Cout = 往左进 0 还是 1'">Cout</span>
               <span class="io-val carry-val">{{ stage.carryOut }}</span>
             </div>
           </div>
         </div>
-
-        <!-- 进位传递提示 -->
-        <div v-if="idx < stageData.length - 1 && stage.carryOut" class="carry-hint">
-          进位 {{ stage.carryOut }} 传给第 {{ stage.bitPos + 1 }} 位 →
+        <div v-if="idx < stages.length - 1" class="carry-hint" :class="{ 'no-carry': !stage.carryOut }">
+          {{ stage.carryOut ? `进位 ${stage.carryOut} 传给第 ${stage.bitPos + 1} 位 →` : '无进位' }}
         </div>
-        <div v-else-if="idx < stageData.length - 1" class="carry-hint no-carry">
-          无进位
-        </div>
-      </div>
-    </div>
-
-    <!-- 结果 -->
-    <div class="result-bar">
-      <div class="result-row">
-        <span class="result-label">二进制结果</span>
-        <span class="result-bits">{{ resultBinary }}</span>
-      </div>
-      <div class="result-row">
-        <span class="result-label">十进制验证</span>
-        <span class="result-eq">{{ decimalA }} + {{ decimalB }} = {{ resultDecimal }}</span>
       </div>
     </div>
 
     <div class="info-box">
-      <strong>核心思想：</strong>每位全加器接收 A、B 和上一位的进位（Cin），输出本位的和（S）与向上传递的进位（Cout）——和我们手算竖式加法"逢二进一"完全一致。
+      <strong>核心思想：</strong>每位全加器接收 A、B 和上一位的进位（Cin），输出本位的和（S）与传给下一位的进位（Cout），和手算竖式「逢二进一」一致。
     </div>
   </div>
 </template>
@@ -130,57 +115,66 @@
 <script setup>
 import { ref, computed } from 'vue'
 
-const bitsA = ref([0, 0, 1, 1])
-const bitsB = ref([0, 0, 1, 0])
+const POS_NAMES = ['最低位', '次低位', '次高位', '最高位']
 
-const toggleBit = (arr, i) => {
-  if (arr === 'A') {
-    bitsA.value[i] = bitsA.value[i] ? 0 : 1
-  } else {
-    bitsB.value[i] = bitsB.value[i] ? 0 : 1
-  }
+function clamp(n) {
+  const v = Number(n)
+  if (Number.isNaN(v)) return 0
+  return Math.max(0, Math.min(15, Math.floor(v)))
 }
 
-const decimalA = computed(() =>
-  bitsA.value.reduce((acc, bit, i) => acc + bit * Math.pow(2, 3 - i), 0)
-)
+const inputA = ref(3)
+const inputB = ref(2)
+const highlightedBit = ref(null)
 
-const decimalB = computed(() =>
-  bitsB.value.reduce((acc, bit, i) => acc + bit * Math.pow(2, 3 - i), 0)
-)
+const clampedA = computed(() => clamp(inputA.value))
+const clampedB = computed(() => clamp(inputB.value))
 
-const stageData = computed(() => {
-  const stages = []
-  let carry = 0
-  const posNames = ['最低位', '次低位', '次高位', '最高位']
-  for (let i = 3; i >= 0; i--) {
-    const a = bitsA.value[i]
-    const b = bitsB.value[i]
-    const total = a + b + carry
-    const sum = total % 2
-    const carryOut = total >= 2 ? 1 : 0
-    stages.push({
-      bitPos: 3 - i,
-      posName: posNames[3 - i],
+const bitsA = computed(() => (clampedA.value >>> 0).toString(2).padStart(4, '0').split(''))
+const bitsB = computed(() => (clampedB.value >>> 0).toString(2).padStart(4, '0').split(''))
+
+const stages = computed(() => {
+  const A = clampedA.value
+  const B = clampedB.value
+  const result = []
+  let carryIn = null
+  for (let i = 0; i < 4; i++) {
+    const a = (A >> i) & 1
+    const b = (B >> i) & 1
+    let sum, carryOut
+    if (carryIn === null) {
+      sum = a ^ b
+      carryOut = a & b
+    } else {
+      sum = (a ^ b) ^ carryIn
+      carryOut = (a & b) | (carryIn & (a ^ b))
+    }
+    result.push({
+      bitPos: i,
+      posName: POS_NAMES[i],
       a,
       b,
-      carryIn: stages.length > 0 ? carry : null,
+      carryIn: carryIn === null ? null : carryIn,
       sum,
       carryOut
     })
-    carry = carryOut
+    carryIn = carryOut
   }
-  return stages
+  return result
 })
 
-const sumBits = computed(() => stageData.value.map((s) => s.sum).reverse())
-
-const resultBinary = computed(() => {
-  const lastCarry = stageData.value[stageData.value.length - 1]?.carryOut || 0
-  return (lastCarry ? lastCarry.toString() : '') + sumBits.value.join('')
+const bitsSum = computed(() => {
+  const S = stages.value.reduce((acc, s, i) => acc + (s.sum << i), 0)
+  return (S >>> 0).toString(2).padStart(4, '0').split('')
 })
 
-const resultDecimal = computed(() => decimalA.value + decimalB.value)
+const fourBitResult = computed(() =>
+  stages.value.reduce((acc, s, i) => acc + (s.sum << i), 0)
+)
+const overflow = computed(() => clampedA.value + clampedB.value > 15)
+const resultDec = computed(() =>
+  overflow.value ? `${fourBitResult.value}（4 位溢出）` : String(fourBitResult.value)
+)
 </script>
 
 <style scoped>
@@ -193,147 +187,167 @@ const resultDecimal = computed(() => decimalA.value + decimalB.value)
 }
 
 .demo-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 0.65rem;
-  flex-wrap: wrap;
+  margin-bottom: 0.35rem;
 }
 
 .demo-header .title {
+  display: block;
   font-weight: bold;
   font-size: 1rem;
 }
 
 .demo-header .subtitle {
-  color: var(--vp-c-text-2);
+  display: block;
   font-size: 0.82rem;
-  margin-left: 0.5rem;
-}
-
-/* 名词解释 */
-.legend {
-  display: flex;
-  gap: 0.8rem;
-  flex-wrap: wrap;
-  margin-bottom: 0.7rem;
-  font-size: 0.78rem;
   color: var(--vp-c-text-2);
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 6px;
-  padding: 0.5rem 0.7rem;
+  font-weight: normal;
 }
 
-.legend-item {
-  display: flex;
-  align-items: center;
-  gap: 0.3rem;
-}
-
-.dot {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-}
-
-.dot.a { background: var(--vp-c-brand); }
-.dot.b { background: #8b5cf6; }
-.dot.s { background: var(--vp-c-success, #16a34a); }
-.dot.c { background: #d97706; }
-
-/* 控制面板 */
 .control-panel {
   display: flex;
-  align-items: center;
-  gap: 0.6rem;
-  padding: 0.55rem 0.75rem;
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  background: var(--vp-c-bg);
-  margin-bottom: 0.75rem;
   flex-wrap: wrap;
-}
-
-.input-group {
-  display: flex;
   align-items: center;
-  gap: 0.4rem;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+  padding: 0.5rem 0;
 }
 
-.group-label {
-  font-size: 0.8rem;
+.control-panel label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.control-label {
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+}
+
+.num-input {
+  width: 3rem;
+  padding: 0.25rem 0.35rem;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+  font-size: 0.9rem;
+  background: var(--vp-c-bg);
+}
+
+.control-panel .op,
+.control-panel .eq {
   font-weight: bold;
   color: var(--vp-c-text-2);
-  white-space: nowrap;
 }
 
-.bits {
-  display: flex;
-  gap: 0.2rem;
-}
-
-.bit-btn {
-  width: 26px;
-  height: 26px;
-  border: 1px solid var(--vp-c-divider);
-  background: var(--vp-c-bg-alt);
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 0.85rem;
+.control-panel .result-dec {
   font-weight: bold;
-  transition: all 0.2s;
+  color: var(--vp-c-brand-1);
 }
 
-.bit-btn.on {
-  background: var(--vp-c-brand);
-  color: white;
-  border-color: var(--vp-c-brand);
+.why-what-box {
+  background: var(--vp-c-bg-alt);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  padding: 0.65rem 0.85rem;
+  margin-bottom: 0.75rem;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.55;
 }
 
-.decimal {
-  font-size: 0.82rem;
+.why-what-box .why-p {
+  margin: 0 0 0.4rem;
+}
+
+.why-what-box .what-p {
+  margin: 0;
+}
+
+.why-what-box .term {
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+.example-block {
+  margin-bottom: 0.25rem;
+}
+
+.bit-legend {
+  display: flex;
+  gap: 0.25rem;
+  margin-left: 6rem;
+  margin-top: 0.2rem;
+  font-size: 0.7rem;
+  color: var(--vp-c-text-3);
+}
+
+.bit-legend-item {
+  min-width: 1.2em;
+  text-align: center;
+}
+
+.example-row .example-bits {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.bit {
+  display: inline-block;
+  min-width: 1.2em;
+  text-align: center;
+  padding: 0.1rem 0;
+  border-radius: 3px;
+  transition: background 0.15s ease;
+}
+
+.bit.active {
+  background: var(--vp-c-brand-2);
+  color: var(--vp-c-bg);
+}
+
+.stage.stage-highlight {
+  outline: 2px solid var(--vp-c-brand-1);
+  outline-offset: 1px;
+}
+
+.example-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.25rem;
+  font-size: 0.9rem;
+}
+
+.example-label {
+  color: var(--vp-c-text-2);
+  min-width: 6rem;
+}
+
+.example-bits {
+  font-family: monospace;
+  font-variant-numeric: tabular-nums;
+}
+
+.example-dec {
   color: var(--vp-c-text-2);
   font-variant-numeric: tabular-nums;
 }
 
-.op-sign {
-  font-size: 1.1rem;
+.result-row .example-bits {
   font-weight: bold;
-  color: var(--vp-c-brand);
-  flex-shrink: 0;
+  color: var(--vp-c-brand-1);
 }
 
-.result-inline {
-  display: flex;
-  align-items: center;
-  gap: 0.3rem;
-}
-
-.result-bin {
-  font-family: monospace;
-  font-weight: bold;
-  color: var(--vp-c-brand);
-}
-
-.result-dec {
-  font-size: 0.8rem;
-  color: var(--vp-c-text-2);
-}
-
-/* 阶段 */
 .stages-label {
-  font-size: 0.82rem;
+  font-size: 0.85rem;
   font-weight: bold;
-  margin-bottom: 0.4rem;
+  margin: 0.75rem 0 0.4rem;
   color: var(--vp-c-text-2);
 }
 
 .adder-stages {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 0.45rem;
+  gap: 0.5rem;
   margin-bottom: 0.75rem;
 }
 
@@ -344,7 +358,7 @@ const resultDecimal = computed(() => decimalA.value + decimalB.value)
   padding: 0.55rem;
   display: flex;
   flex-direction: column;
-  gap: 0.4rem;
+  gap: 0.35rem;
 }
 
 .stage-title {
@@ -401,16 +415,11 @@ const resultDecimal = computed(() => decimalA.value + decimalB.value)
 .sum-val { color: var(--vp-c-success, #16a34a); }
 .carry-val { color: #d97706; }
 
-/* 全加器盒子 */
 .fa-box {
   background: var(--vp-c-bg-alt);
   border: 1px solid var(--vp-c-divider);
   border-radius: 6px;
   padding: 0.3rem 0.35rem;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.1rem;
   flex-shrink: 0;
 }
 
@@ -422,9 +431,9 @@ const resultDecimal = computed(() => decimalA.value + decimalB.value)
 .fa-hint {
   font-size: 0.6rem;
   color: var(--vp-c-text-3);
+  margin-top: 0.1rem;
 }
 
-/* 进位提示 */
 .carry-hint {
   font-size: 0.65rem;
   color: #d97706;
@@ -436,48 +445,14 @@ const resultDecimal = computed(() => decimalA.value + decimalB.value)
   color: var(--vp-c-text-3);
 }
 
-/* 结果栏 */
-.result-bar {
-  background: var(--vp-c-bg-alt);
-  border-radius: 6px;
-  padding: 0.55rem 0.75rem;
-  display: flex;
-  gap: 1.5rem;
-  flex-wrap: wrap;
-  margin-bottom: 0.75rem;
-}
-
-.result-row {
-  display: flex;
-  gap: 0.4rem;
-  align-items: center;
-}
-
-.result-label {
-  font-size: 0.82rem;
-  color: var(--vp-c-text-2);
-}
-
-.result-bits {
-  font-family: monospace;
-  font-weight: bold;
-  color: var(--vp-c-brand);
-}
-
-.result-eq {
-  font-weight: bold;
-  color: var(--vp-c-success, #16a34a);
-}
-
-/* info box */
 .info-box {
+  display: flex;
+  gap: 0.25rem;
   background: var(--vp-c-bg-alt);
   padding: 0.75rem;
   border-radius: 6px;
   font-size: 0.85rem;
   color: var(--vp-c-text-2);
-  display: flex;
-  gap: 0.25rem;
 }
 
 .info-box strong {
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/LogicGateDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/LogicGateDemo.vue
index 79421f2..d4d4279 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/LogicGateDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/LogicGateDemo.vue
@@ -2,48 +2,13 @@
   <div class="logic-gate-demo">
     <div class="demo-header">
       <span class="title">逻辑门：用开关做运算</span>
-      <span class="subtitle">切换输入 A / B，同屏观察四种门的输出</span>
     </div>
 
-    <div class="control-panel">
-      <span class="panel-hint">点按钮切换 0 / 1，右侧四个门同步更新：</span>
-      <div class="input-item">
-        <span class="input-label">输入 A</span>
-        <button class="input-btn" :class="{ on: inputA }" @click="inputA = !inputA">
-          {{ inputA ? '1' : '0' }}
-        </button>
-      </div>
-      <div class="input-item">
-        <span class="input-label">输入 B</span>
-        <button class="input-btn" :class="{ on: inputB }" @click="inputB = !inputB">
-          {{ inputB ? '1' : '0' }}
-        </button>
-      </div>
-      <span class="current-state">当前：A={{ inputA ? 1 : 0 }}，B={{ inputB ? 1 : 0 }}</span>
-    </div>
-
-    <div class="gate-grid">
-      <div v-for="gate in gates" :key="gate.name" class="gate-card">
-        <div class="gate-top">
-          <span class="gate-name">{{ gate.name }}</span>
-          <span class="gate-formula">{{ gate.formula }}</span>
-        </div>
-        <div class="gate-analogy">{{ gate.analogy }}</div>
-        <div class="gate-output-row">
-          <span class="output-label">输出</span>
-          <span
-            class="output-value"
-            :class="{ on: gateOutput(gate.name, inputA, inputB) }"
-          >
-            {{ gateOutput(gate.name, inputA, inputB) }}
-          </span>
-          <span class="output-hint">{{ gateOutput(gate.name, inputA, inputB) ? '（真 / 导通）' : '（假 / 断开）' }}</span>
-        </div>
-      </div>
-    </div>
+    <p class="intro">
+      输入 A、B 只能是 0 或 1；四种门按不同规则输出一个 0 或 1。下面表格列出所有 4 种输入组合的结果。
+    </p>
 
     <div class="truth-section">
-      <div class="table-title">四种门真值表对照（高亮行 = 当前输入）</div>
       <table>
         <thead>
           <tr>
@@ -56,65 +21,37 @@
           </tr>
         </thead>
         <tbody>
-          <tr
-            v-for="row in truthRows"
-            :key="`${row.a}-${row.b}`"
-            :class="{
-              highlight:
-                row.a === (inputA ? 1 : 0) && row.b === (inputB ? 1 : 0)
-            }"
-          >
+          <tr v-for="row in truthRows" :key="`${row.a}-${row.b}`">
             <td>{{ row.a }}</td>
             <td>{{ row.b }}</td>
-            <td>{{ gateOutput('AND', !!row.a, !!row.b) }}</td>
-            <td>{{ gateOutput('OR', !!row.a, !!row.b) }}</td>
-            <td>{{ gateOutput('NOT', !!row.a, !!row.b) }}</td>
-            <td>{{ gateOutput('XOR', !!row.a, !!row.b) }}</td>
+            <td>{{ row.and }}</td>
+            <td>{{ row.or }}</td>
+            <td>{{ row.not }}</td>
+            <td>{{ row.xor }}</td>
           </tr>
         </tbody>
       </table>
+      <ul class="col-meaning">
+        <li><strong>AND</strong>：两个都是 1 才输出 1（像串联：都通才通）</li>
+        <li><strong>OR</strong>：有一个 1 就输出 1（像并联：一通就通）</li>
+        <li><strong>NOT(A)</strong>：对 A 取反，0→1、1→0</li>
+        <li><strong>XOR</strong>：两个不同输出 1，相同输出 0</li>
+      </ul>
     </div>
 
     <div class="info-box">
-      <strong>核心思想：</strong>逻辑门用晶体管的"开关"组合实现基本运算——AND 像串联、OR 像并联、NOT 取反、XOR 判异。所有复杂计算都由这四种基础操作构建而来。
+      <strong>核心思想：</strong>逻辑门用晶体管的“开关”组合实现这四种运算，复杂计算都由它们组合而成。
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-
-const inputA = ref(false)
-const inputB = ref(false)
-
-const gates = [
-  { name: 'AND', formula: 'A && B', analogy: '串联：都为 1 才输出 1' },
-  { name: 'OR', formula: 'A || B', analogy: '并联：任一为 1 就输出 1' },
-  { name: 'NOT', formula: '!A', analogy: '取反：0→1，1→0' },
-  { name: 'XOR', formula: 'A ⊕ B', analogy: '判异：不同为 1，相同为 0' }
-]
-
 const truthRows = [
-  { a: 0, b: 0 },
-  { a: 0, b: 1 },
-  { a: 1, b: 0 },
-  { a: 1, b: 1 }
+  { a: 0, b: 0, and: 0, or: 0, not: 1, xor: 0 },
+  { a: 0, b: 1, and: 0, or: 1, not: 1, xor: 1 },
+  { a: 1, b: 0, and: 0, or: 1, not: 0, xor: 1 },
+  { a: 1, b: 1, and: 1, or: 1, not: 0, xor: 0 }
 ]
-
-const gateOutput = (name, a, b) => {
-  switch (name) {
-    case 'AND':
-      return a && b ? 1 : 0
-    case 'OR':
-      return a || b ? 1 : 0
-    case 'NOT':
-      return a ? 0 : 1
-    case 'XOR':
-      return a !== b ? 1 : 0
-    default:
-      return 0
-  }
-}
 </script>
 
 <style scoped>
@@ -127,11 +64,7 @@ const gateOutput = (name, a, b) => {
 }
 
 .demo-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 0.75rem;
-  flex-wrap: wrap;
+  margin-bottom: 0.5rem;
 }
 
 .demo-header .title {
@@ -139,169 +72,29 @@ const gateOutput = (name, a, b) => {
   font-size: 1rem;
 }
 
-.demo-header .subtitle {
+.intro {
+  font-size: 0.9rem;
   color: var(--vp-c-text-2);
-  font-size: 0.82rem;
-  margin-left: 0.5rem;
-}
-
-.control-panel {
-  display: flex;
-  align-items: center;
-  gap: 0.6rem;
-  margin-bottom: 0.75rem;
-  flex-wrap: wrap;
-  padding: 0.5rem 0.65rem;
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-}
-
-.panel-hint {
-  font-size: 0.8rem;
-  color: var(--vp-c-text-2);
-}
-
-.current-state {
-  font-size: 0.8rem;
-  color: var(--vp-c-text-2);
-  margin-left: auto;
-  font-variant-numeric: tabular-nums;
-}
-
-.input-item {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.4rem;
-  background: var(--vp-c-bg-alt);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 999px;
-  padding: 0.2rem 0.5rem;
-  font-size: 0.85rem;
-}
-
-.input-label {
-  font-size: 0.82rem;
-  color: var(--vp-c-text-2);
-}
-
-.input-btn {
-  width: 28px;
-  height: 28px;
-  border: 1px solid var(--vp-c-divider);
-  background: var(--vp-c-bg-alt);
-  border-radius: 50%;
-  cursor: pointer;
-  font-weight: bold;
-  transition: all 0.2s;
-}
-
-.input-btn.on {
-  background: var(--vp-c-brand);
-  color: white;
-  border-color: var(--vp-c-brand);
-}
-
-.gate-grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 0.5rem;
-  margin-bottom: 0.75rem;
-}
-
-.gate-card {
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 0.55rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
-}
-
-.gate-top {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.gate-name {
-  font-weight: bold;
-  font-size: 0.85rem;
-  color: var(--vp-c-brand-1);
-}
-
-.gate-formula {
-  font-family: monospace;
-  font-size: 0.72rem;
-  color: var(--vp-c-text-3);
-}
-
-.gate-analogy {
-  font-size: 0.72rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.3;
-}
-
-.gate-output-row {
-  display: flex;
-  align-items: center;
-  gap: 0.35rem;
-  margin-top: 0.1rem;
-}
-
-.output-label {
-  font-size: 0.7rem;
-  color: var(--vp-c-text-3);
-}
-
-.output-hint {
-  font-size: 0.68rem;
-  color: var(--vp-c-text-3);
-}
-
-.output-value {
-  width: 24px;
-  height: 24px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 4px;
-  background: var(--vp-c-bg-alt);
-  font-weight: bold;
-  font-size: 0.85rem;
-  flex-shrink: 0;
-}
-
-.output-value.on {
-  background: var(--vp-c-success);
-  color: white;
-  border-color: var(--vp-c-success);
+  margin: 0 0 0.75rem;
+  line-height: 1.5;
 }
 
 .truth-section {
   margin-bottom: 0;
 }
 
-.table-title {
-  font-weight: bold;
-  font-size: 0.82rem;
-  margin-bottom: 0.4rem;
-}
-
 table {
   width: 100%;
   border-collapse: collapse;
   table-layout: fixed;
-  font-size: 0.8rem;
+  font-size: 0.88rem;
+  margin-bottom: 0.75rem;
 }
 
 th,
 td {
   border: 1px solid var(--vp-c-divider);
-  padding: 0;
-  height: 2rem;
+  padding: 0.4rem 0.5rem;
   vertical-align: middle;
   text-align: center;
   font-variant-numeric: tabular-nums;
@@ -312,29 +105,36 @@ th {
   font-weight: 600;
 }
 
-tr.highlight {
-  background: var(--vp-c-brand-soft);
+.col-meaning {
+  margin: 0;
+  padding-left: 1.25rem;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.6;
+}
+
+.col-meaning li {
+  margin-bottom: 0.25rem;
+}
+
+.col-meaning strong {
+  color: var(--vp-c-text-1);
+  font-variant-numeric: tabular-nums;
 }
 
 .info-box {
+  display: flex;
+  gap: 0.25rem;
   background: var(--vp-c-bg-alt);
   padding: 0.75rem;
   border-radius: 6px;
   font-size: 0.85rem;
   color: var(--vp-c-text-2);
   margin-top: 0.75rem;
-  display: flex;
-  gap: 0.25rem;
 }
 
 .info-box strong {
   white-space: nowrap;
   flex-shrink: 0;
 }
-
-@media (max-width: 640px) {
-  .gate-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/RegisterDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/RegisterDemo.vue
index 1ffb2df..1d0e24d 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/RegisterDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/RegisterDemo.vue
@@ -1,13 +1,26 @@
 <template>
   <div class="register-demo">
     <div class="demo-header">
-      <span class="title">寄存器：存储状态的功能单元</span>
-      <span class="subtitle">改变输入不会改变存储值——必须主动"写入"</span>
+      <span class="title">寄存器：能「记住」一个 0 或 1 的小单元</span>
+      <span class="subtitle">只有点「写入」时才会把当前输入记下来，平时改输入不会影响已存的值</span>
+    </div>
+
+    <div class="why-what-box">
+      <p class="why-p">
+        <strong>为啥要看这个？</strong>CPU 算到一半要暂时「记住」中间结果，寄存器就是干这个的。它和「直接连线」不同：改输入不会立刻改变里面存的东西，必须主动点一次「写入」才会更新。
+      </p>
+      <p class="what-p">
+        <strong>这些词是啥？</strong>
+        <span class="term">输入</span>：你想写进去的 0 或 1。
+        <span class="term">写入</span>：点一下，把当前输入「锁进」寄存器。
+        <span class="term">存储值</span>：寄存器里现在记着的数（只有写入时才会变）。
+        <span class="term">输出</span>：从寄存器读出来的数，和存储值一样。
+      </p>
     </div>
 
     <div class="control-panel">
-      <div class="control-left">
-        <span class="ctrl-label">输入值</span>
+      <label class="ctrl-group">
+        <span class="ctrl-label">输入</span>
         <button
           class="input-toggle"
           :class="{ on: inputData === 1 }"
@@ -15,87 +28,33 @@
         >
           {{ inputData }}
         </button>
-      </div>
+      </label>
       <button class="write-btn" :class="{ flash: isWriting }" @click="writeOnce">
-        写入寄存器 →
+        写入
       </button>
-      <div class="control-right">
-        <span class="chip">存储值：{{ storedData }}</span>
-        <span class="chip" :class="{ chip_on: storedData === 1 }">输出：{{ storedData === 1 ? '1 ✓' : '0' }}</span>
-      </div>
+      <label class="ctrl-group">
+        <span class="ctrl-label">存储</span>
+        <span class="stored-val" :class="{ on: storedData === 1 }">{{ storedData }}</span>
+      </label>
+      <span class="ctrl-group">
+        <span class="ctrl-label">输出</span>
+        <span class="output-val" :class="{ on: storedData === 1 }">{{ storedData }}</span>
+      </span>
     </div>
 
-    <div class="demo-content">
-      <div class="flow-diagram">
-        <div class="flow-node input-node">
-          <div class="node-label">输入（Data）</div>
-          <div class="node-value" :class="{ on: inputData === 1 }">{{ inputData }}</div>
-          <div class="node-hint">点左侧按钮切换</div>
-        </div>
-
-        <div class="flow-arrow" :class="{ active: isWriting }">
-          <div class="arrow-line" />
-          <div class="arrow-tag">{{ isWriting ? '写入中...' : '写入触发' }}</div>
-          <div class="arrow-head">→</div>
-        </div>
-
-        <div class="flow-node register-node" :class="{ flashing: isWriting }">
-          <div class="node-label">D 触发器（寄存器核心）</div>
-          <div class="node-value" :class="{ on: storedData === 1 }">{{ storedData }}</div>
-          <div class="node-hint">{{ isWriting ? '正在锁存...' : '保持 (Hold)' }}</div>
-        </div>
-
-        <div class="flow-arrow" :class="{ active: storedData === 1 }">
-          <div class="arrow-line" />
-          <div class="arrow-tag">输出</div>
-          <div class="arrow-head">→</div>
-        </div>
-
-        <div class="flow-node output-node" :class="{ on: storedData === 1 }">
-          <div class="node-label">输出（Output）</div>
-          <div class="bulb">{{ storedData === 1 ? '💡' : '🌑' }}</div>
-          <div class="node-hint">{{ storedData === 1 ? '亮（1）' : '灭（0）' }}</div>
-        </div>
-      </div>
-
-      <div class="state-table">
-        <div class="table-title">操作步骤说明</div>
-        <div class="state-rows">
-          <div class="state-row">
-            <span class="step-num">①</span>
-            <span>点"输入值"按钮切换输入（0/1）</span>
-          </div>
-          <div class="state-row">
-            <span class="step-num">②</span>
-            <span>此时存储值<strong>不变</strong>——这就是寄存器的意义</span>
-          </div>
-          <div class="state-row">
-            <span class="step-num">③</span>
-            <span>点"写入寄存器"，输入值才被锁入</span>
-          </div>
-          <div class="state-row">
-            <span class="step-num">④</span>
-            <span>写入后再改输入，存储值依然<strong>保持</strong>不变</span>
-          </div>
-        </div>
-
-        <div class="diff-display">
-          <div class="diff-item">
-            <div class="diff-label">当前输入</div>
-            <div class="diff-value" :class="{ on: inputData === 1 }">{{ inputData }}</div>
-          </div>
-          <div class="diff-sep">≠</div>
-          <div class="diff-item">
-            <div class="diff-label">存储值</div>
-            <div class="diff-value" :class="{ on: storedData === 1 }">{{ storedData }}</div>
-          </div>
-          <div v-if="inputData === storedData" class="diff-same">（当前相同）</div>
-        </div>
+    <div class="visualization-area">
+      <div class="flow-strip">
+        <span class="flow-item">输入 {{ inputData }}</span>
+        <span class="flow-arrow" :class="{ active: isWriting }">{{ isWriting ? '写入中 →' : '— 点「写入」才更新 →' }}</span>
+        <span class="flow-item flow-store" :class="{ flash: isWriting }">存 {{ storedData }}</span>
       </div>
+      <p class="flow-hint">
+        {{ inputData !== storedData ? '输入和存储不一样：点「写入」会把当前输入记进去。' : '输入和存储已一致。' }}
+      </p>
     </div>
 
     <div class="info-box">
-      <strong>核心思想：</strong>寄存器只在"写入"信号触发时更新，其余时刻持续锁定当前值。这就是 CPU 能在计算过程中稳定保存中间结果的原因。
+      <strong>核心思想：</strong>寄存器只在「写入」那一刻更新，其余时间一直保持原来的值，所以 CPU 能稳定保存中间结果。
     </div>
   </div>
 </template>
@@ -126,41 +85,62 @@ const writeOnce = () => {
 }
 
 .demo-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 0.8rem;
-  flex-wrap: wrap;
+  margin-bottom: 0.5rem;
 }
 
 .demo-header .title {
+  display: block;
   font-weight: bold;
   font-size: 1rem;
 }
 
 .demo-header .subtitle {
-  color: var(--vp-c-text-2);
+  display: block;
   font-size: 0.82rem;
-  margin-left: 0.5rem;
+  color: var(--vp-c-text-2);
+  font-weight: normal;
+}
+
+.why-what-box {
+  background: var(--vp-c-bg-alt);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  padding: 0.65rem 0.85rem;
+  margin-bottom: 0.75rem;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.55;
+}
+
+.why-what-box .why-p {
+  margin: 0 0 0.4rem;
+}
+
+.why-what-box .what-p {
+  margin: 0;
+}
+
+.why-what-box .term {
+  font-weight: 600;
+  color: var(--vp-c-text-1);
 }
 
-/* ---- control panel ---- */
 .control-panel {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  gap: 0.7rem;
-  padding: 0.6rem 0.75rem;
+  gap: 0.6rem;
+  padding: 0.5rem 0.7rem;
   border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
   background: var(--vp-c-bg);
-  margin-bottom: 0.8rem;
-  flex-wrap: wrap;
+  margin-bottom: 0.75rem;
 }
 
-.control-left {
-  display: flex;
+.ctrl-group {
+  display: inline-flex;
   align-items: center;
-  gap: 0.45rem;
+  gap: 0.35rem;
 }
 
 .ctrl-label {
@@ -169,9 +149,9 @@ const writeOnce = () => {
 }
 
 .input-toggle {
-  width: 2rem;
-  height: 2rem;
-  border-radius: 50%;
+  width: 2.2rem;
+  height: 2.2rem;
+  border-radius: 6px;
   border: 2px solid var(--vp-c-divider);
   background: var(--vp-c-bg-alt);
   font-weight: bold;
@@ -187,260 +167,102 @@ const writeOnce = () => {
 }
 
 .write-btn {
-  padding: 0.3rem 0.75rem;
-  border-radius: 999px;
-  border: 2px solid var(--vp-c-warning);
+  padding: 0.35rem 0.8rem;
+  border-radius: 6px;
+  border: 2px solid var(--vp-c-warning-1, #d97706);
   background: var(--vp-c-bg);
   color: var(--vp-c-warning-1, #d97706);
-  font-size: 0.82rem;
+  font-size: 0.85rem;
   font-weight: bold;
   cursor: pointer;
   transition: all 0.2s;
-  white-space: nowrap;
 }
 
 .write-btn:hover {
-  background: var(--vp-c-warning-soft);
+  background: var(--vp-c-warning-soft, rgba(217, 119, 6, 0.1));
 }
 
 .write-btn.flash {
-  background: var(--vp-c-warning);
+  background: var(--vp-c-warning-1, #d97706);
   color: white;
-  transform: scale(0.96);
 }
 
-.control-right {
-  display: flex;
-  gap: 0.4rem;
-  flex-wrap: wrap;
-  margin-left: auto;
-}
-
-.chip {
-  font-size: 0.78rem;
-  padding: 0.2rem 0.45rem;
-  border-radius: 999px;
-  background: var(--vp-c-bg-alt);
-  border: 1px solid var(--vp-c-divider);
-}
-
-.chip_on {
-  border-color: var(--vp-c-brand);
-  color: var(--vp-c-brand);
-}
-
-/* ---- main content ---- */
-.demo-content {
-  display: grid;
-  grid-template-columns: 1.5fr 1fr;
-  gap: 0.8rem;
-}
-
-/* ---- flow diagram ---- */
-.flow-diagram {
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  background: var(--vp-c-bg);
-  padding: 0.8rem;
-  display: flex;
+.stored-val,
+.output-val {
+  display: inline-flex;
   align-items: center;
-  gap: 0.3rem;
-  flex-wrap: nowrap;
-  overflow-x: auto;
-}
-
-.flow-node {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.3rem;
-  flex-shrink: 0;
-}
-
-.node-label {
-  font-size: 0.72rem;
-  color: var(--vp-c-text-2);
-  text-align: center;
-}
-
-.node-value {
-  width: 2.4rem;
-  height: 2.4rem;
-  border-radius: 8px;
+  justify-content: center;
+  min-width: 2rem;
+  height: 2rem;
+  padding: 0 0.4rem;
+  border-radius: 6px;
   border: 2px solid var(--vp-c-divider);
   background: var(--vp-c-bg-alt);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.2rem;
   font-weight: bold;
   font-family: monospace;
-  transition: all 0.3s;
+  font-size: 1rem;
 }
 
-.node-value.on {
+.stored-val.on,
+.output-val.on {
   border-color: var(--vp-c-brand);
   color: var(--vp-c-brand);
   background: var(--vp-c-brand-soft);
 }
 
-.node-hint {
-  font-size: 0.7rem;
-  color: var(--vp-c-text-3);
+.visualization-area {
+  margin-bottom: 0.75rem;
 }
 
-.register-node .node-value {
-  width: 3rem;
-  height: 3rem;
-  font-size: 1.5rem;
-  border: 3px solid var(--vp-c-text-1);
-}
-
-.register-node.flashing .node-value {
-  border-color: var(--vp-c-warning);
-  box-shadow: 0 0 10px var(--vp-c-warning-soft);
-}
-
-.bulb {
-  font-size: 1.8rem;
-  filter: grayscale(100%);
-  opacity: 0.4;
-  transition: all 0.3s;
-}
-
-.output-node.on .bulb {
-  filter: grayscale(0%);
-  opacity: 1;
-  text-shadow: 0 0 12px #facc15;
-}
-
-/* ---- arrows ---- */
-.flow-arrow {
+.flow-strip {
   display: flex;
-  flex-direction: column;
+  flex-wrap: wrap;
   align-items: center;
-  gap: 0.2rem;
-  flex-shrink: 0;
-}
-
-.arrow-line {
-  width: 28px;
-  height: 2px;
-  background: var(--vp-c-divider);
-  transition: background 0.3s;
-}
-
-.flow-arrow.active .arrow-line {
-  background: var(--vp-c-brand);
-}
-
-.arrow-tag {
-  font-size: 0.65rem;
-  color: var(--vp-c-text-3);
-  white-space: nowrap;
-}
-
-.arrow-head {
-  font-size: 0.8rem;
-  color: var(--vp-c-text-3);
-}
-
-/* ---- state table ---- */
-.state-table {
+  gap: 0.4rem;
+  padding: 0.6rem 0.8rem;
   border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
   background: var(--vp-c-bg);
-  padding: 0.8rem;
+  font-size: 0.9rem;
 }
 
-.table-title {
+.flow-item {
   font-weight: bold;
-  font-size: 0.85rem;
-  margin-bottom: 0.6rem;
 }
 
-.state-rows {
-  display: flex;
-  flex-direction: column;
-  gap: 0.4rem;
-}
-
-.state-row {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.4rem;
-  font-size: 0.78rem;
-  color: var(--vp-c-text-2);
-}
-
-.step-num {
-  flex-shrink: 0;
-  font-weight: bold;
+.flow-store {
   color: var(--vp-c-brand);
 }
 
-.diff-display {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-top: 0.75rem;
-  padding: 0.5rem;
-  background: var(--vp-c-bg-alt);
-  border-radius: 6px;
-}
-
-.diff-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.2rem;
-}
-
-.diff-label {
-  font-size: 0.7rem;
-  color: var(--vp-c-text-2);
-}
-
-.diff-value {
-  width: 1.6rem;
-  height: 1.6rem;
+.flow-store.flash {
+  box-shadow: 0 0 0 2px var(--vp-c-warning-1);
   border-radius: 4px;
-  border: 1px solid var(--vp-c-divider);
-  background: var(--vp-c-bg);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: bold;
-  font-family: monospace;
 }
 
-.diff-value.on {
-  border-color: var(--vp-c-brand);
-  color: var(--vp-c-brand);
-  background: var(--vp-c-brand-soft);
-}
-
-.diff-sep {
-  font-size: 1.1rem;
+.flow-arrow {
   color: var(--vp-c-text-3);
+  font-size: 0.82rem;
+}
+
+.flow-arrow.active {
+  color: var(--vp-c-warning-1);
   font-weight: bold;
 }
 
-.diff-same {
-  font-size: 0.72rem;
-  color: var(--vp-c-text-3);
+.flow-hint {
+  margin: 0.4rem 0 0;
+  font-size: 0.82rem;
+  color: var(--vp-c-text-2);
 }
 
-/* ---- info box ---- */
 .info-box {
+  display: flex;
+  gap: 0.25rem;
   background: var(--vp-c-bg-alt);
   padding: 0.75rem;
   border-radius: 6px;
   font-size: 0.85rem;
   color: var(--vp-c-text-2);
-  margin-top: 0.8rem;
-  display: flex;
-  gap: 0.25rem;
 }
 
 .info-box strong {
@@ -448,9 +270,10 @@ const writeOnce = () => {
   flex-shrink: 0;
 }
 
-@media (max-width: 760px) {
-  .demo-content {
-    grid-template-columns: 1fr;
+@media (max-width: 520px) {
+  .control-panel {
+    flex-direction: column;
+    align-items: flex-start;
   }
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/TransistorDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/TransistorDemo.vue
index 3497e90..3b2b0d8 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/TransistorDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/TransistorDemo.vue
@@ -5,97 +5,43 @@
       <span class="subtitle">Gate 电压决定电流能否通过</span>
     </div>
 
-    <div class="control-panel">
-      <div class="control-left">
-        <span class="control-label">栅极输入（Gate）</span>
-        <button class="gate-toggle" :class="{ on: isOn }" @click="toggleSwitch">
-          {{ isOn ? '1（高电压）' : '0（低电压）' }}
-        </button>
-      </div>
-      <div class="control-right">
-        <span class="chip">通道：{{ isOn ? '导通' : '断开' }}</span>
-        <span class="chip">输出：{{ isOn ? '1' : '0' }}</span>
-      </div>
-    </div>
-
-    <div class="demo-content">
-      <div class="transistor-diagram">
-        <div class="gate-column">
-          <div class="gate-title">控制端 Gate</div>
-          <div class="gate-value" :class="{ on: isOn }">
-            {{ isOn ? '1' : '0' }}
+    <div class="states">
+      <div class="state-card">
+        <div class="state-label">Gate = 0（低电压）</div>
+        <div class="channel-row">
+          <span class="terminal">源极</span>
+          <div class="channel-track off">
+            <span class="block-icon">✕ 断开</span>
           </div>
-          <div class="gate-arrow">↓ 控制</div>
+          <span class="terminal">漏极</span>
         </div>
+        <div class="output-line">输出：<strong>0</strong></div>
+      </div>
 
-        <div class="main-channel">
-          <div class="terminal-box">源极 Source</div>
-          <div class="channel-track" :class="{ on: isOn }">
-            <span v-if="!isOn" class="block-icon">✕</span>
-            <template v-else>
-              <span class="flow-dot d1" />
-              <span class="flow-dot d2" />
-              <span class="flow-dot d3" />
-            </template>
+      <div class="state-card">
+        <div class="state-label">Gate = 1（高电压）</div>
+        <div class="channel-row">
+          <span class="terminal">源极</span>
+          <div class="channel-track on">
+            <span class="flow-dot d1" />
+            <span class="flow-dot d2" />
+            <span class="flow-dot d3" />
+            <span class="flow-label">导通</span>
           </div>
-          <div class="terminal-box">漏极 Drain</div>
-        </div>
-
-        <div class="result-line" :class="{ on: isOn }">
-          {{ isOn ? '电流通过：Source → Drain' : '电流被阻断：无法通过通道' }}
+          <span class="terminal">漏极</span>
         </div>
+        <div class="output-line">输出：<strong>1</strong></div>
       </div>
-
-      <div class="truth-table">
-        <div class="table-title">晶体管状态表</div>
-        <table>
-          <thead>
-            <tr>
-              <th>Gate 输入</th>
-              <th>通道状态</th>
-              <th>输出</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr :class="{ highlight: !isOn }">
-              <td>0（低电压）</td>
-              <td>断开</td>
-              <td>0</td>
-            </tr>
-            <tr :class="{ highlight: isOn }">
-              <td>1（高电压）</td>
-              <td>导通</td>
-              <td>1</td>
-            </tr>
-          </tbody>
-        </table>
-        <div class="table-hint">
-          点上方按钮切换 Gate，观察“通道状态”和“电流流动”如何同步变化。
-        </div>
-      </div>
-    </div>
-
-    <div class="step-guide">
-      <div class="step-item">① 改变 Gate 电压（0/1）</div>
-      <div class="step-item">② 通道变为断开/导通</div>
-      <div class="step-item">③ 输出随之变成 0/1</div>
     </div>
 
     <div class="info-box">
-      <strong>核心思想：</strong>晶体管本质是“电控开关”：Gate=1 时导通，Gate=0
-      时断开。所有数字计算都建立在这种 0/1 开关之上。
+      <strong>核心思想：</strong>晶体管是“电控开关”：Gate=1 导通、Gate=0 断开，所有数字计算都建立在这种 0/1 开关之上。
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-
-const isOn = ref(false)
-
-const toggleSwitch = () => {
-  isOn.value = !isOn.value
-}
+// 纯静态展示，无需交互
 </script>
 
 <style scoped>
@@ -111,7 +57,7 @@ const toggleSwitch = () => {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  margin-bottom: 0.8rem;
+  margin-bottom: 0.75rem;
 }
 
 .demo-header .title {
@@ -125,166 +71,72 @@ const toggleSwitch = () => {
   margin-left: 0.5rem;
 }
 
-.control-panel {
-  display: flex;
-  align-items: center;
-  padding: 0.65rem 0.75rem;
+.states {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.state-card {
   border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
   background: var(--vp-c-bg);
-  margin-bottom: 0.8rem;
-  flex-wrap: wrap;
+  padding: 0.75rem;
 }
 
-.control-left {
+.state-label {
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  margin-bottom: 0.5rem;
+}
+
+.channel-row {
   display: flex;
   align-items: center;
-  gap: 0.55rem;
+  gap: 0.5rem;
 }
 
-.control-label {
+.terminal {
   font-size: 0.82rem;
   color: var(--vp-c-text-2);
-}
-
-.gate-toggle {
-  border: 1px solid var(--vp-c-divider);
-  background: var(--vp-c-bg-alt);
-  border-radius: 999px;
-  padding: 0.3rem 0.65rem;
-  font-weight: bold;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.gate-toggle.on {
-  background: var(--vp-c-success-soft);
-  color: var(--vp-c-success-1);
-  border-color: var(--vp-c-success);
-  color: var(--vp-c-success-1);
-  background: var(--vp-c-success-soft);
-}
-
-.control-right {
-  display: flex;
-  gap: 0.4rem;
-  flex-wrap: wrap;
-  margin-left: auto;
-}
-
-.chip {
-  font-size: 0.78rem;
-  padding: 0.2rem 0.45rem;
-  border-radius: 999px;
-  background: var(--vp-c-bg-alt);
-  border: 1px solid var(--vp-c-divider);
-}
-.chip.active {
-  border-color: var(--vp-c-success);
-}
-
-.legend-chip {
-  font-size: 0.72rem;
-  padding: 0.16rem 0.42rem;
-  border-radius: 999px;
-  border: 1px solid var(--vp-c-divider);
-  background: var(--vp-c-bg);
-  color: var(--vp-c-text-2);
-}
-
-.demo-content {
-  display: grid;
-  grid-template-columns: 1.2fr 1fr;
-  gap: 0.9rem;
-}
-
-.transistor-diagram {
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  background: var(--vp-c-bg);
-  padding: 0.8rem;
-}
-
-.gate-column {
-  display: flex;
-  align-items: center;
-  gap: 0.45rem;
-  margin-bottom: 0.7rem;
-}
-
-.gate-title {
-  font-size: 0.8rem;
-  color: var(--vp-c-text-2);
-}
-
-.gate-value {
-  width: 2rem;
-  height: 2rem;
-  border-radius: 50%;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: 2px solid var(--vp-c-divider);
-  font-weight: bold;
-}
-
-.gate-value.on {
-  border-color: var(--vp-c-success);
-  color: var(--vp-c-success-1);
-  background: var(--vp-c-success-soft);
-}
-
-.gate-arrow {
-  font-size: 0.78rem;
-  color: var(--vp-c-text-2);
-}
-
-.main-channel {
-  display: grid;
-  grid-template-columns: 1fr 1.6fr 1fr;
-  align-items: center;
-  gap: 0.55rem;
-}
-
-.terminal-box {
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 6px;
-  background: var(--vp-c-bg-alt);
-  padding: 0.45rem;
-  text-align: center;
-  font-size: 0.78rem;
+  flex-shrink: 0;
 }
 
 .channel-track {
-  height: 2.4rem;
+  flex: 1;
+  min-height: 2.5rem;
   border: 2px solid var(--vp-c-divider);
-  border-radius: 999px;
-  background: #e5e7eb;
-  position: relative;
+  border-radius: 6px;
   display: flex;
   align-items: center;
   justify-content: center;
+  position: relative;
   overflow: hidden;
 }
 
+.channel-track.off {
+  background: var(--vp-c-bg-alt);
+}
+
 .channel-track.on {
   background: var(--vp-c-success-soft);
   border-color: var(--vp-c-success);
 }
 
 .block-icon {
-  font-size: 1.1rem;
+  font-size: 0.9rem;
   font-weight: bold;
   color: var(--vp-c-text-3);
 }
 
 .flow-dot {
-  width: 0.42rem;
-  height: 0.42rem;
+  width: 0.4rem;
+  height: 0.4rem;
   border-radius: 50%;
   background: var(--vp-c-success);
   position: absolute;
-  left: -8%;
+  left: -10%;
   animation: flow 1.5s linear infinite;
 }
 
@@ -296,92 +148,40 @@ const toggleSwitch = () => {
   animation-delay: 0.9s;
 }
 
+.flow-label {
+  margin-left: 0.4rem;
+  font-size: 0.85rem;
+  color: var(--vp-c-success-1);
+  font-weight: 600;
+}
+
 @keyframes flow {
   from {
-    left: -8%;
+    left: -10%;
   }
   to {
     left: 105%;
   }
 }
 
-.result-line {
-  margin-top: 0.7rem;
-  font-size: 0.82rem;
-  color: var(--vp-c-text-2);
-  padding: 0.45rem 0.55rem;
-  background: var(--vp-c-bg-alt);
-  border-radius: 6px;
-}
-
-.result-line.on {
-  color: var(--vp-c-success-1);
-}
-
-.truth-table {
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  background: var(--vp-c-bg);
-  padding: 0.8rem;
-}
-
-.table-title {
-  font-weight: bold;
-  margin-bottom: 0.55rem;
+.output-line {
+  margin-top: 0.5rem;
   font-size: 0.9rem;
+  color: var(--vp-c-text-1);
 }
 
-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.84rem;
-}
-
-th,
-td {
-  border: 1px solid var(--vp-c-divider);
-  padding: 0.45rem;
-  text-align: center;
-}
-
-th {
-  background: var(--vp-c-bg-alt);
-}
-
-tr.highlight {
-  background: var(--vp-c-brand-soft);
-}
-
-.table-hint {
-  margin-top: 0.55rem;
-  font-size: 0.8rem;
-  color: var(--vp-c-text-2);
-}
-
-.step-guide {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 0.45rem;
-  margin-top: 0.8rem;
-}
-
-.step-item {
-  border: 1px solid var(--vp-c-divider);
-  background: var(--vp-c-bg);
-  border-radius: 6px;
-  padding: 0.45rem 0.5rem;
-  font-size: 0.78rem;
+.output-line strong {
+  color: var(--vp-c-brand-1);
 }
 
 .info-box {
+  display: flex;
+  gap: 0.25rem;
   background: var(--vp-c-bg-alt);
   padding: 0.75rem;
   border-radius: 6px;
   font-size: 0.85rem;
   color: var(--vp-c-text-2);
-  margin-top: 0.75rem;
-  display: flex;
-  gap: 0.25rem;
 }
 
 .info-box strong {
@@ -389,12 +189,8 @@ tr.highlight {
   flex-shrink: 0;
 }
 
-@media (max-width: 860px) {
-  .demo-content {
-    grid-template-columns: 1fr;
-  }
-
-  .step-guide {
+@media (max-width: 640px) {
+  .states {
     grid-template-columns: 1fr;
   }
 }
diff --git a/docs/.vitepress/theme/components/appendix/git-intro/GitBranchVisual.vue b/docs/.vitepress/theme/components/appendix/git-intro/GitBranchVisual.vue
index c94fba4..94c5587 100644
--- a/docs/.vitepress/theme/components/appendix/git-intro/GitBranchVisual.vue
+++ b/docs/.vitepress/theme/components/appendix/git-intro/GitBranchVisual.vue
@@ -382,29 +382,32 @@ function reset() {
 /* Graph */
 .gb-graph-wrap {
   background: var(--vp-c-bg); border-top: 1px solid var(--vp-c-divider);
-  padding: 10px 12px;
+  padding: 14px 16px;
+  min-height: 200px;
+  overflow-x: auto;
+  max-width: 100%;
 }
 .gb-legend {
-  display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px;
-  font-size: 0.74rem; color: var(--vp-c-text-2);
+  display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 12px;
+  font-size: 0.8rem; color: var(--vp-c-text-2);
 }
-.leg-item { display: flex; align-items: center; gap: 5px; }
-.leg-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
+.leg-item { display: flex; align-items: center; gap: 6px; }
+.leg-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
 .main-c { background: #5b9cf6; }
 .feat-c { background: #f9e2af; }
 .merge-c { background: #a6e3a1; }
 .leg-head {
-  font-family: monospace; font-size: 0.68rem; font-weight: 700;
-  background: #5b9cf655; color: #5b9cf6; padding: 1px 5px; border-radius: 3px;
+  font-family: monospace; font-size: 0.72rem; font-weight: 700;
+  background: #5b9cf655; color: #5b9cf6; padding: 2px 6px; border-radius: 4px;
 }
-.head-leg { gap: 4px; }
+.head-leg { gap: 6px; }
 
-.svg-scroll { overflow-x: auto; }
+.svg-scroll { overflow-x: auto; overflow-y: hidden; max-width: 100%; }
 .gb-svg { display: block; overflow: visible; }
 
 .gb-hint {
-  padding: 8px 12px; background: var(--vp-c-bg-alt);
+  padding: 10px 14px; background: var(--vp-c-bg-alt);
   border-top: 1px solid var(--vp-c-divider);
-  font-size: 0.8rem; color: var(--vp-c-text-2); line-height: 1.5;
+  font-size: 0.82rem; color: var(--vp-c-text-2); line-height: 1.5;
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/git-intro/GitCommandCheatsheet.vue b/docs/.vitepress/theme/components/appendix/git-intro/GitCommandCheatsheet.vue
index 036c685..bc89eb7 100644
--- a/docs/.vitepress/theme/components/appendix/git-intro/GitCommandCheatsheet.vue
+++ b/docs/.vitepress/theme/components/appendix/git-intro/GitCommandCheatsheet.vue
@@ -127,6 +127,8 @@ const yLabels = computed(() => {
   background: var(--vp-c-bg-soft);
   padding: 8px 10px;
   margin-bottom: 1rem;
+  max-width: 100%;
+  overflow-x: auto;
 }
 
 .chart-header {
diff --git a/docs/.vitepress/theme/components/appendix/git-intro/GitCommitFlow.vue b/docs/.vitepress/theme/components/appendix/git-intro/GitCommitFlow.vue
index 1e46fb5..32ec773 100644
--- a/docs/.vitepress/theme/components/appendix/git-intro/GitCommitFlow.vue
+++ b/docs/.vitepress/theme/components/appendix/git-intro/GitCommitFlow.vue
@@ -1,39 +1,41 @@
 <template>
   <div class="gc-root">
-    <!-- Terminal -->
-    <div class="gc-terminal">
-      <div class="term-bar">
-        <span class="dot r" /><span class="dot y" /><span class="dot g" />
-        <span class="term-title">~/project (main)</span>
-      </div>
-      <div ref="termEl" class="term-body">
-        <div v-for="(l, i) in lines" :key="i" class="t-line">
-          <span v-if="l.kind === 'cmd'" class="t-ps">$ </span>
-          <span :class="'t-' + l.kind">{{ l.text }}</span>
+    <div class="gc-layout">
+      <!-- 左侧：终端 + 按钮 -->
+      <div class="gc-left">
+        <div class="gc-terminal">
+          <div class="term-bar">
+            <span class="dot r" /><span class="dot y" /><span class="dot g" />
+            <span class="term-title">~/project (main)</span>
+          </div>
+          <div ref="termEl" class="term-body">
+            <div v-for="(l, i) in lines" :key="i" class="t-line">
+              <span v-if="l.kind === 'cmd'" class="t-ps">$ </span>
+              <span :class="'t-' + l.kind">{{ l.text }}</span>
+            </div>
+            <div class="t-line">
+              <span class="t-ps">$ </span>
+              <span class="t-typing">{{ typing }}<span class="t-cur">▋</span></span>
+            </div>
+          </div>
         </div>
-        <div class="t-line">
-          <span class="t-ps">$ </span>
-          <span class="t-typing">{{ typing }}<span class="t-cur">▋</span></span>
+        <div class="gc-btns">
+          <button
+            v-for="op in ops"
+            :key="op.id"
+            :disabled="running || !op.ok()"
+            :class="['gc-btn', { 'gc-btn--on': active === op.id, 'gc-btn--dim': !op.ok() }]"
+            @click="run(op)"
+          >
+            <code>{{ op.cmd }}</code>
+          </button>
+          <button class="gc-btn gc-btn--reset" :disabled="running" @click="reset">重置</button>
         </div>
       </div>
-    </div>
 
-    <!-- Buttons -->
-    <div class="gc-btns">
-      <button
-        v-for="op in ops"
-        :key="op.id"
-        :disabled="running || !op.ok()"
-        :class="['gc-btn', { 'gc-btn--on': active === op.id, 'gc-btn--dim': !op.ok() }]"
-        @click="run(op)"
-      >
-        <code>{{ op.cmd }}</code>
-      </button>
-      <button class="gc-btn gc-btn--reset" :disabled="running" @click="reset">重置</button>
-    </div>
-
-    <!-- 三区可视化 -->
-    <div class="gc-three-areas">
+      <!-- 右侧：三区缩小展示 -->
+      <div class="gc-right">
+        <div class="gc-three-areas">
       <div class="area-col area-work" :class="{ 'area-highlight': pulseArea === 'work' }">
         <div class="area-header">
           <span class="area-icon">📝</span>
@@ -55,7 +57,8 @@
 
       <div class="area-arrow" :class="{ 'arrow-lit': addDone }">
         <code class="arrow-cmd">git add</code>
-        <span class="arrow-symbol">→</span>
+        <span class="arrow-symbol arrow-symbol--h" aria-hidden="true">→</span>
+        <span class="arrow-symbol arrow-symbol--v" aria-hidden="true">↓</span>
       </div>
 
       <div class="area-col area-stage" :class="{ 'area-highlight': pulseArea === 'stage' }">
@@ -79,7 +82,8 @@
 
       <div class="area-arrow" :class="{ 'arrow-lit': commitDone }">
         <code class="arrow-cmd">git commit</code>
-        <span class="arrow-symbol">→</span>
+        <span class="arrow-symbol arrow-symbol--h" aria-hidden="true">→</span>
+        <span class="arrow-symbol arrow-symbol--v" aria-hidden="true">↓</span>
       </div>
 
       <div class="area-col area-repo" :class="{ 'area-highlight': pulseArea === 'repo' }">
@@ -102,6 +106,8 @@
         </div>
       </div>
     </div>
+    </div>
+    </div>
 
     <!-- Hint -->
     <div v-if="hint" class="gc-hint">💡 {{ hint }}</div>
@@ -116,7 +122,7 @@ const lines = ref([{ kind: 'dim', text: '# 你刚改了 3 个文件，现在演
 const typing = ref('')
 const running = ref(false)
 const active = ref(null)
-const hint = ref('点击下方命令按钮，按顺序执行。观察上方三区里文件如何随命令移动。')
+const hint = ref('点击下方命令按钮，按顺序执行。观察右侧三区里文件如何随命令移动。')
 const pulseArea = ref(null)
 
 const files = ref([
@@ -275,7 +281,7 @@ function reset() {
   commitDone = false
   active.value = null
   pulseArea.value = null
-  hint.value = '点击下方命令按钮，按顺序执行。观察上方三区里文件如何随命令移动。'
+  hint.value = '点击下方命令按钮，按顺序执行。观察右侧三区里文件如何随命令移动。'
   typing.value = ''
   running.value = false
 }
@@ -291,6 +297,29 @@ function reset() {
   font-size: 0.85rem;
 }
 
+/* 左右分栏：左终端+按钮，右三区缩小 */
+.gc-layout {
+  display: flex;
+  align-items: stretch;
+  gap: 0;
+}
+.gc-left {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+.gc-right {
+  width: 260px;
+  flex-shrink: 0;
+  border-left: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg);
+}
+@media (max-width: 640px) {
+  .gc-layout { flex-direction: column; }
+  .gc-right { width: 100%; border-left: none; border-top: 1px solid var(--vp-c-divider); }
+}
+
 /* Terminal */
 .gc-terminal { background: #141420; }
 .term-bar {
@@ -310,13 +339,14 @@ function reset() {
   min-height: 140px;
   max-height: 200px;
   overflow-y: auto;
+  overflow-x: auto;
   padding: 0.8rem 1rem;
   font-family: 'Menlo', 'Monaco', monospace;
   font-size: 0.76rem;
   line-height: 1.65;
   color: #cdd6f4;
 }
-.t-line { display: flex; }
+.t-line { display: flex; min-width: min-content; }
 .t-ps { color: #a6e3a1; flex-shrink: 0; }
 .t-cmd { color: #cdd6f4; }
 .t-dim { color: #585b70; }
@@ -357,33 +387,28 @@ function reset() {
 .gc-btn--reset code { display: none; }
 .gc-btn--reset::after { content: '重置'; font-size: 0.7rem; color: #585b70; }
 
-/* 三区布局 */
+/* 三区布局：右侧缩小、垂直堆叠 */
 .gc-three-areas {
-  display: grid;
-  grid-template-columns: 1fr auto 1fr auto 1fr;
+  display: flex;
+  flex-direction: column;
   gap: 0;
-  align-items: stretch;
-  padding: 12px 14px;
+  padding: 10px 12px;
   background: var(--vp-c-bg);
-  border-top: 1px solid var(--vp-c-divider);
-  min-height: 180px;
-}
-@media (max-width: 720px) {
-  .gc-three-areas {
-    grid-template-columns: 1fr;
-    grid-template-rows: auto auto auto auto auto;
-  }
-  .area-arrow { transform: rotate(90deg); justify-self: center; }
+  font-size: 0.75rem;
 }
 
 .area-col {
   border: 1.5px solid var(--vp-c-divider);
-  border-radius: 8px;
+  border-radius: 6px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  min-height: 0;
   transition: border-color 0.25s, box-shadow 0.25s;
 }
+.gc-right .area-col {
+  min-height: 72px;
+}
 .area-col.area-highlight {
   border-color: var(--vp-c-brand);
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--vp-c-brand) 14%, transparent);
@@ -393,50 +418,71 @@ function reset() {
 .area-repo { border-left: 4px solid #5b9cf6; }
 
 .area-header {
-  padding: 6px 10px;
+  padding: 6px 8px;
   background: var(--vp-c-bg-alt);
   border-bottom: 1px solid var(--vp-c-divider);
+  min-width: 0;
+  overflow-wrap: break-word;
 }
-.area-icon { font-size: 1rem; margin-right: 4px; }
+.gc-right .area-header { padding: 5px 8px; }
+.area-icon { font-size: 0.95rem; margin-right: 4px; flex-shrink: 0; }
+.gc-right .area-icon { font-size: 0.85rem; }
 .area-title {
   font-weight: 700;
-  font-size: 0.88rem;
+  font-size: 0.92rem;
   color: var(--vp-c-text-1);
 }
+.gc-right .area-title { font-size: 0.8rem; }
 .area-desc {
   display: block;
-  font-size: 0.68rem;
+  font-size: 0.72rem;
   color: var(--vp-c-text-3);
-  margin-top: 2px;
-  line-height: 1.3;
+  margin-top: 4px;
+  line-height: 1.35;
 }
+.gc-right .area-desc { font-size: 0.62rem; margin-top: 2px; }
 
 .area-body {
   padding: 8px 10px;
   flex: 1;
-  min-height: 72px;
+  min-height: 48px;
+  display: flex;
+  flex-direction: column;
 }
+.gc-right .area-body { padding: 6px 8px; min-height: 40px; }
 .area-label {
-  font-size: 0.68rem;
+  font-size: 0.72rem;
   color: var(--vp-c-text-3);
   margin-bottom: 6px;
   font-family: monospace;
 }
+.gc-right .area-label { font-size: 0.62rem; margin-bottom: 4px; }
 .area-empty {
-  font-size: 0.74rem;
+  font-size: 0.8rem;
   color: var(--vp-c-text-3);
   font-style: italic;
+  padding: 6px 0;
 }
+.gc-right .area-empty { font-size: 0.7rem; padding: 4px 0; }
 
 .file-row,
 .commit-row {
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: 4px 6px;
+  padding: 6px 8px;
   border-radius: 4px;
-  font-size: 0.76rem;
+  font-size: 0.8rem;
   margin-bottom: 4px;
+  min-height: 28px;
+}
+.gc-right .file-row,
+.gc-right .commit-row {
+  gap: 4px;
+  padding: 4px 6px;
+  font-size: 0.7rem;
+  margin-bottom: 3px;
+  min-height: 24px;
 }
 .file-row:last-child,
 .commit-row:last-child { margin-bottom: 0; }
@@ -450,73 +496,91 @@ function reset() {
 }
 .file-badge {
   font-weight: 700;
-  font-size: 0.72rem;
-  width: 14px;
+  font-size: 0.78rem;
+  width: 16px;
   flex-shrink: 0;
   text-align: center;
 }
+.gc-right .file-badge { font-size: 0.68rem; width: 14px; }
 .file-mod .file-badge { color: #f38ba8; }
 .file-staged .file-badge { color: #a6e3a1; }
-.file-name { font-family: monospace; color: var(--vp-c-text-1); }
+.file-name {
+  font-family: monospace;
+  color: var(--vp-c-text-1);
+  flex: 1;
+  min-width: 0;
+  word-break: break-all;
+}
+.gc-right .file-name { font-size: 0.68rem; }
 .file-state {
   margin-left: auto;
-  font-size: 0.7rem;
+  font-size: 0.74rem;
   color: var(--vp-c-text-3);
+  flex-shrink: 0;
 }
+.gc-right .file-state { font-size: 0.62rem; }
 
 .commit-row {
   background: #5b9cf618;
   border-left: 3px solid #5b9cf6;
 }
-.commit-badge { color: #5b9cf6; font-weight: 700; flex-shrink: 0; }
+.commit-badge { color: #5b9cf6; font-weight: 700; flex-shrink: 0; font-size: 0.9rem; }
+.gc-right .commit-badge { font-size: 0.75rem; }
 .commit-hash {
   font-family: monospace;
-  font-size: 0.7rem;
+  font-size: 0.78rem;
   color: #5b9cf6;
   flex-shrink: 0;
 }
+.gc-right .commit-hash { font-size: 0.66rem; }
 .commit-msg {
-  font-size: 0.72rem;
+  font-size: 0.78rem;
   color: var(--vp-c-text-2);
   flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  min-width: 3em;
+  word-wrap: break-word;
 }
+.gc-right .commit-msg { font-size: 0.66rem; min-width: 2em; }
 .commit-head {
-  font-size: 0.64rem;
+  font-size: 0.7rem;
   font-family: monospace;
   font-weight: 700;
   background: #5b9cf6;
   color: #fff;
-  padding: 1px 4px;
-  border-radius: 3px;
+  padding: 2px 6px;
+  border-radius: 4px;
   flex-shrink: 0;
 }
+.gc-right .commit-head { font-size: 0.6rem; padding: 1px 4px; }
 
+/* 箭头：↓ + 命令 */
 .area-arrow {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
-  gap: 4px;
-  padding: 0 8px;
+  gap: 6px;
+  padding: 6px 0;
   opacity: 0.3;
   transition: opacity 0.3s;
 }
+.gc-right .area-arrow { padding: 4px 0; }
+.area-arrow .arrow-symbol--h { display: none; }
+.area-arrow .arrow-symbol--v {
+  display: inline;
+  font-size: 1rem;
+  color: var(--vp-c-brand);
+  line-height: 1;
+}
+.gc-right .area-arrow .arrow-symbol--v { font-size: 0.9rem; }
 .area-arrow.arrow-lit { opacity: 1; }
 .arrow-cmd {
-  font-size: 0.66rem;
+  font-size: 0.72rem;
   font-family: monospace;
   color: var(--vp-c-brand);
   white-space: nowrap;
 }
-.arrow-symbol {
-  font-size: 1.2rem;
-  color: var(--vp-c-brand);
-  line-height: 1;
-}
+.gc-right .arrow-cmd { font-size: 0.62rem; }
 
 .gc-hint {
   padding: 10px 12px;
diff --git a/docs/.vitepress/theme/components/appendix/git-intro/GitSyncDemo.vue b/docs/.vitepress/theme/components/appendix/git-intro/GitSyncDemo.vue
index 3087016..b24e3ac 100644
--- a/docs/.vitepress/theme/components/appendix/git-intro/GitSyncDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/git-intro/GitSyncDemo.vue
@@ -281,10 +281,12 @@ function reset() {
 
 /* Repos */
 .gs-repos {
-  display: grid; grid-template-columns: 1fr auto 1fr;
-  gap: 8px; padding: 10px 12px;
+  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  gap: 12px; padding: 16px 14px;
   background: var(--vp-c-bg); border-top: 1px solid var(--vp-c-divider);
   align-items: start;
+  min-height: 200px;
+  overflow-x: auto;
 }
 @media (max-width: 600px) {
   .gs-repos { grid-template-columns: 1fr; }
@@ -293,7 +295,9 @@ function reset() {
 
 .repo-card {
   border: 1.5px solid var(--vp-c-divider); border-radius: 8px;
-  padding: 8px 10px; background: var(--vp-c-bg-soft);
+  padding: 12px 14px; background: var(--vp-c-bg-soft);
+  min-height: 180px; min-width: 0;
+  display: flex; flex-direction: column;
   transition: border-color .3s, box-shadow .3s;
 }
 .repo-remote { border-color: #60a5fa44; background: color-mix(in srgb, #60a5fa 4%, var(--vp-c-bg-soft)); }
@@ -301,26 +305,41 @@ function reset() {
 .repo-pulse-remote { border-color: #60a5fa !important; box-shadow: 0 0 0 3px #60a5fa22; }
 
 .repo-header {
-  display: flex; align-items: center; gap: 5px; margin-bottom: 6px; flex-wrap: wrap;
+  display: flex; align-items: center; gap: 6px; margin-bottom: 10px; flex-wrap: wrap;
+  min-width: 0;
+}
+.repo-icon { font-size: 1.1rem; flex-shrink: 0; }
+.repo-name { font-weight: 700; font-size: 0.88rem; flex-shrink: 0; }
+.repo-path {
+  font-family: monospace; font-size: 0.7rem; color: var(--vp-c-text-3);
+  margin-left: auto; min-width: 0; overflow: hidden;
+  text-overflow: ellipsis; white-space: nowrap;
 }
-.repo-icon { font-size: 1rem; }
-.repo-name { font-weight: 700; font-size: 0.8rem; }
-.repo-path { font-family: monospace; font-size: 0.62rem; color: var(--vp-c-text-3); margin-left: auto; }
 
-.commit-col { min-height: 48px; display: flex; flex-direction: column; gap: 4px; }
-.no-commits { color: var(--vp-c-text-3); font-size: 0.72rem; }
+.commit-col {
+  min-height: 80px; min-width: 0;
+  display: flex; flex-direction: column; gap: 6px; flex: 1;
+}
+.no-commits { color: var(--vp-c-text-3); font-size: 0.8rem; padding: 6px 0; }
 .cmt-row {
-  display: flex; align-items: center; gap: 5px; font-size: 0.72rem;
-  padding: 2px 4px; border-radius: 3px; transition: background .3s;
+  display: flex; align-items: center; gap: 8px; font-size: 0.8rem;
+  padding: 8px 10px; border-radius: 6px; min-height: 36px;
+  min-width: 0; transition: background .3s;
 }
 .cmt-new { background: color-mix(in srgb, var(--vp-c-brand) 10%, transparent); }
-.cmt-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
+.cmt-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
 .local-dot { background: var(--vp-c-brand); }
 .remote-dot { background: #60a5fa; }
-.cmt-hash { color: var(--vp-c-brand); font-size: 0.68rem; }
-.cmt-msg { color: var(--vp-c-text-2); }
+.cmt-hash { color: var(--vp-c-brand); font-size: 0.76rem; flex-shrink: 0; }
+.cmt-msg {
+  color: var(--vp-c-text-2);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
-.repo-footer { margin-top: 5px; font-size: 0.7rem; min-height: 16px; }
+.repo-footer { margin-top: 10px; font-size: 0.76rem; min-height: 20px; }
 .badge-ahead { color: var(--vp-c-brand); font-weight: 600; }
 .badge-sync { color: #a6e3a1; }
 .badge-online { color: #60a5fa; }
@@ -342,8 +361,8 @@ function reset() {
 .arrow-pull .arrow-label { color: #60a5fa; }
 
 .gs-hint {
-  padding: 8px 12px; background: var(--vp-c-bg-alt);
+  padding: 10px 14px; background: var(--vp-c-bg-alt);
   border-top: 1px solid var(--vp-c-divider);
-  font-size: 0.8rem; color: var(--vp-c-text-2);
+  font-size: 0.82rem; color: var(--vp-c-text-2); line-height: 1.5;
 }
 </style>
diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
index c4da2e9..31a18df 100644
--- a/docs/.vitepress/theme/index.js
+++ b/docs/.vitepress/theme/index.js
@@ -211,6 +211,15 @@ import BackpropagationDemo from './components/appendix/ai-history/Backpropagatio
 import AttentionMechanismDemo from './components/appendix/ai-history/AttentionMechanismDemo.vue'
 import DiscriminativeVsGenerativeDemo from './components/appendix/ai-history/DiscriminativeVsGenerativeDemo.vue'
 import GPTEvolutionDemo from './components/appendix/ai-history/GPTEvolutionDemo.vue'
+import FoundationDemo from './components/appendix/ai-history/FoundationDemo.vue'
+
+// AI Protocols Components
+import McpVisualDemo from './components/appendix/ai-protocols/McpVisualDemo.vue'
+import A2AVisualDemo from './components/appendix/ai-protocols/A2AVisualDemo.vue'
+import McpDetailedDemo from './components/appendix/ai-protocols/McpDetailedDemo.vue'
+import A2ADetailedDemo from './components/appendix/ai-protocols/A2ADetailedDemo.vue'
+import ProtocolComparisonDemo from './components/appendix/ai-protocols/ProtocolComparisonDemo.vue'
+import ProtocolWorkflowDemo from './components/appendix/ai-protocols/ProtocolWorkflowDemo.vue'
 
 import ImperativeVsDeclarativeDemo from './components/appendix/web-basics/ImperativeVsDeclarativeDemo.vue'
 import ComponentReusabilityDemo from './components/appendix/web-basics/ComponentReusabilityDemo.vue'
@@ -543,12 +552,7 @@ import HttpsOptimizationDemo from './components/appendix/cloud-storage-cdn/Https
 import AccessAnalyticsDemo from './components/appendix/cloud-storage-cdn/AccessAnalyticsDemo.vue'
 
 // API Design Extra Components
-import ErrorHandlingDemo from './components/appendix/api-design/ErrorHandlingDemo.vue'
-import VersioningStrategyDemo from './components/appendix/api-design/VersioningStrategyDemo.vue'
-import DocumentationDemo from './components/appendix/api-design/DocumentationDemo.vue'
-import ResourceAnalogy from './components/appendix/api-design/ResourceAnalogy.vue'
-import RequestStructureDemo from './components/appendix/api-design/RequestStructureDemo.vue'
-import ResponseStructureDemo from './components/appendix/api-design/ResponseStructureDemo.vue'
+import RestfulApiFlow from './components/appendix/api-design/RestfulApiFlow.vue'
 
 // JavaScript Intro Components
 import VariableBoxDemo from './components/appendix/javascript-intro/VariableBoxDemo.vue'
@@ -638,6 +642,7 @@ export default {
     app.component('ApiDocumentDemo', ApiDocumentDemo)
     app.component('ApiPlayground', ApiPlayground)
     app.component('RealWorldApiDemo', RealWorldApiDemo)
+    app.component('RestfulApiFlow', RestfulApiFlow)
 
     // LLM Intro Components Registration
     app.component('EmbeddingDemo', EmbeddingDemo)
@@ -804,6 +809,7 @@ export default {
     app.component('RenderingStrategyDemo', RenderingStrategyDemo)
     app.component('BigFrontendScopeDemo', BigFrontendScopeDemo)
     app.component('AiEvolutionDemo', AiEvolutionDemo)
+    app.component('FoundationDemo', FoundationDemo)
     app.component('RuleBasedVsLearningDemo', RuleBasedVsLearningDemo)
     app.component('PerceptronDemo', PerceptronDemo)
     app.component('AIEvolutionTimelineDemo', AIEvolutionTimelineDemo)
@@ -820,6 +826,14 @@ export default {
     )
     app.component('GPTEvolutionDemo', GPTEvolutionDemo)
 
+    // AI Protocols Components Registration
+    app.component('McpVisualDemo', McpVisualDemo)
+    app.component('A2AVisualDemo', A2AVisualDemo)
+    app.component('McpDetailedDemo', McpDetailedDemo)
+    app.component('A2ADetailedDemo', A2ADetailedDemo)
+    app.component('ProtocolComparisonDemo', ProtocolComparisonDemo)
+    app.component('ProtocolWorkflowDemo', ProtocolWorkflowDemo)
+
     app.component('ImperativeVsDeclarativeDemo', ImperativeVsDeclarativeDemo)
     app.component('ComponentReusabilityDemo', ComponentReusabilityDemo)
     app.component('FrameworkMotivationDemo', FrameworkMotivationDemo)
diff --git a/docs/zh-cn/appendix/4-server-and-backend/api-design.md b/docs/zh-cn/appendix/4-server-and-backend/api-design.md
index f8108d3..9d03330 100644
--- a/docs/zh-cn/appendix/4-server-and-backend/api-design.md
+++ b/docs/zh-cn/appendix/4-server-and-backend/api-design.md
@@ -1,553 +1,124 @@
-# API 设计哲学（REST / GraphQL / gRPC）
-::: tip 🎯 核心问题
-**前后端如何高效对话?** 这就像问:餐厅的菜单怎么设计,客人一看就懂?服务员怎么记单,不会出错?上菜怎么规范,客人满意?API 设计解决的就是"对话规则"的问题。
-:::
+# API 设计：前后端的通用语言
+
+> 💡 **学习指南**：这一章我们聊聊前后端如何高效对话。如果你被后端接口的命名搞晕过，或者不知道该返回 200 还是 404，这篇文章就是为你准备的。我们将通过一个交互式 Demo，带你理解 RESTful API 的设计精髓。
 
 ---
 
-## 1. 为什么要"API 设计"?
+## 0. 先问一个问题：你有没有经历过这些噩梦？
 
-### 1.1 从混乱到规范
+**场景一：接口猜谜**
 
-想象一下你走进一家餐厅:
+后端给你一个接口 `/getUser`，你调用了，返回 `null`。
+你是传错了参数？还是数据库没数据？还是服务器崩了？完全不知道。
 
-- **菜单(API 文档)**:清楚标注了每道菜的口味、配料、价格
-- **服务员(HTTP 协议)**:用标准化的方式记录你的点餐
-- **后厨(服务端)**:按约定流程烹饪
-- **上菜(响应)**:盘子摆盘规范,附带小票说明
-
-**好的 API 设计就像这套点餐系统**——双方约定好"说什么话"、"怎么说话"、"出错怎么办",才能高效协作。
-
-但很多团队的真实情况是:
-
-- 接口命名随心所欲:`/getUserData`、`/fetchUserInfo`、`/queryUserById` 并存
-- 错误处理五花八门:有的返回 HTTP 状态码,有的返回 `code: 500`,有的直接抛异常
-- 响应结构千人千面:同一个项目里,有的用 `data`,有的用 `result`,有的用 `content`
-
-<RestfulDesignDemo />
-
-**结果就是**:前后端互相猜,联调痛苦,维护成本高,新人入职一脸懵。
-
-::: tip 💡 通俗解释
-**API**(Application Programming Interface,应用程序编程接口)就像"餐厅的服务协议":
-
-- **RESTful** = 餐厅点餐:有菜单、有流程、有规范
-- **GraphQL** = 自助餐:想要什么,自己组合
-- **gRPC** = 快递:二进制格式,速度最快
-
-**为什么需要设计?**
-
-- 没有设计 = 服务员随机记单 → 后厨看不懂、客人等半天
-- 有设计 = 标准化流程 → 效率高、错误少
-  :::
-
----
-
-## 2. RESTful 设计:让你的 URL 会说话
-
-### 2.1 什么是 RESTful?
-
-**REST**(Representational State Transfer,表述性状态传递)是一种软件架构风格,由 Roy Fielding 在 2000 年提出。
-
-**核心思想**:把网络上的所有事物都抽象为"资源"(Resource),用 URL 标识资源,用 HTTP 方法操作资源。
-
-<ResourceAnalogyDemo />
-
-::: tip 💡 资源是什么?
-**资源**(Resource)是 REST 架构的核心概念:
-
-- 有唯一标识(URL)
-- 有表达方式(JSON/XML/HTML)
-- 有操作方法(GET/POST/PUT/DELETE)
-
-**比喻**:
-
-- URL 是"仓库的货架地址":`/warehouse/products` 是"产品区"
-- HTTP 方法是"允许的操作":GET(查看)、POST(入库)、PUT(更新)、DELETE(出库)
-
-**关键点**:
-
-- URL 是名词,不是动词:`/users` 而不是 `/getUsers`
-- HTTP 方法已经表达了操作,不需要在 URL 里重复
-  :::
-
-### 2.2 URL 设计的 7 个黄金法则
-
-<HttpMethodsDemo />
-
-| 法则                   | 正确示例                                      | 错误示例                                  | 原因                                     |
-| ---------------------- | --------------------------------------------- | ----------------------------------------- | ---------------------------------------- |
-| **1. 用名词,不用动词** | `GET /users`                                  | `GET /getUsers`                           | URL 是资源地址,不是操作                  |
-| **2. 用复数**          | `GET /orders`                                 | `GET /order`                              | 一致性好,表示集合                        |
-| **3. 小写字母**        | `/user-profiles`                              | `/UserProfiles`                           | URL 大小写敏感,统一小写避免混乱          |
-| **4. 用连字符**        | `/user-profiles`                              | `/user_profiles`                          | 连字符是 URL 规范,下划线在某些场景会转义 |
-| **5. 避免层级过深**    | `/users/123/orders`                           | `/users/123/orders/456/items/789/status`  | 超过 3 层考虑用查询参数或重构            |
-| **6. 用查询参数过滤**  | `GET /products?category=phone&price_max=5000` | `GET /products/category/phone/price/5000` | 过滤条件多且变动,不适合放路径            |
-| **7. 版本号放 URL**    | `/v1/users` 或 `v1.users.api.com`             | 混用新旧接口无版本                        | 便于灰度发布和向后兼容                   |
-
-::: tip 📊 从表格中你能看到什么?
-**规则 1-4**是"一致性"原则:
-
-- 统一名词、复数、大小写,让团队所有人写的 URL 风格一致
-- 减少认知负担,一眼就知道这是什么资源
-
-**规则 5-6**是"灵活性"原则:
-
-- 层级太深 = 耦心度太高,难以维护
-- 查询参数 = 更灵活,可以组合任意过滤条件
-
-**规则 7**是"兼容性"原则:
-
-- API 是长期契约,不能随意改
-- 版本号让新旧接口并存,平滑升级
-  :::
-
-### 2.3 HTTP 方法的选择
-
-| 方法       | 用途     | 幂等性\* | 安全性\*\* | 典型场景                   |
-| ---------- | -------- | -------- | ---------- | -------------------------- |
-| **GET**    | 获取资源 | 是       | 是         | 查询列表、查看详情         |
-| **POST**   | 创建资源 | 否       | 否         | 新增用户、提交订单         |
-| **PUT**    | 全量更新 | 是       | 否         | 替换整个用户资料           |
-| **PATCH**  | 部分更新 | 否       | 否         | 修改用户昵称(只传一个字段) |
-| **DELETE** | 删除资源 | 是       | 否         | 删除用户、取消订单         |
-
-> **\*幂等性**:多次执行结果相同。比如 PUT 同一个资源 10 次,结果还是那一个资源。\***\*安全性**:不会改变服务器状态。GET 是安全的,POST/PUT/DELETE 都不安全。
-
-::: details 🔧 幂等性为什么重要?
-**场景**:用户点击"支付"按钮,但网络延迟,用户又点了一次。
-
-- **幂等的操作**(PUT/DELETE):点击 10 次和点击 1 次,结果相同。不会重复扣款。
-- **不幂等的操作**(POST):点击 10 次,可能创建 10 个订单。
-
-**解决方案**:
-
-- **客户端**:按钮点击后禁用,防止重复提交
-- **服务端**:POST 操作用唯一 ID 校验,避免重复处理
-
-**关键点**:幂等性是分布式系统正确性的重要保证。
-:::
-
-### 2.4 实战示例:电商系统的 RESTful API
-
-```
-# 用户模块
-GET    /v1/users                    # 获取用户列表(支持分页、过滤)
-POST   /v1/users                    # 创建新用户
-GET    /v1/users/{id}               # 获取用户详情
-PUT    /v1/users/{id}               # 全量更新用户信息
-PATCH  /v1/users/{id}               # 部分更新(如:修改密码)
-DELETE /v1/users/{id}               # 删除用户
-
-# 订单模块(嵌套资源,最多 3 层)
-GET    /v1/users/{id}/orders         # 获取某用户的所有订单
-POST   /v1/users/{id}/orders         # 为用户创建订单
-GET    /v1/orders/{orderId}         # 获取订单详情(扁平化,避免过深)
-PATCH  /v1/orders/{orderId}/status   # 更新订单状态(子资源操作)
-
-# 商品模块(复杂过滤用查询参数)
-GET    /v1/products?category=electronics&price_min=100&price_max=5000&sort=price_desc&page=2&page_size=20
-
-# 复杂报表(特殊场景,URL 可带动词)
-POST   /v1/reports/sales/export      # 导出销售报表(非纯 CRUD,动词可接受)
-```
-
----
-
-## 3. 状态码:让错误"会说话"
-
-### 3.1 为什么状态码很重要?
-
-<StatusCodeDemo />
-
-想象一下,如果你的 API 不管成功失败都返回 `200 OK`,客户端该怎么判断?
-
-```json
-// ❌ 错误的做法:HTTP 200,但业务失败
-HTTP/1.1 200 OK
-{
-  "success": false,
-  "error": "用户不存在"
-}
-```
-
-**问题在哪?**
-
-- 缓存层(CDN、浏览器)会缓存这个"成功的"响应
-- 监控工具以为一切正常
-- 前端需要额外解析 JSON 才知道有没有错
-
-**正确的做法**:用 HTTP 状态码表示传输层状态,和业务成功/失败解耦。
-
-### 3.2 常用状态码速查表
-
-| 状态码                    | 含义           | 使用场景                                       | 响应体内容               |
-| ------------------------- | -------------- | ---------------------------------------------- | ------------------------ | --- |
-| **2xx 成功**              |                |                                                |                          |     |
-| 200 OK                    | 通用成功       | GET 查询成功、PUT/PATCH 更新成功               | 资源数据                 |
-| 201 Created               | 创建成功       | POST 创建资源成功                              | 新资源数据 + Location 头 |
-| 202 Accepted              | 已接受         | 异步任务提交成功(如:导出报表)                  | 任务状态/轮询地址        |
-| 204 No Content            | 无内容         | DELETE 删除成功、PUT 更新但无需返回数据        | 空(用缓存)               |
-| **3xx 重定向**            |                |                                                |                          |     |
-| 301 Moved Permanently     | 永久重定向     | 资源 URL 永久变更(如:v1 废弃,跳转 v2)          | 新 URL                   |
-| 302 Found                 | 临时重定向     | 临时跳转(较少用于 API)                         | 临时 URL                 |
-| 304 Not Modified          | 未修改         | 缓存有效(配合 If-None-Match/If-Modified-Since) | 空(用缓存)               |
-| **4xx 客户端错误**        |                |                                                |                          |     |
-| 400 Bad Request           | 请求格式错误   | 参数缺失、JSON 格式错误、字段类型不对          | 错误详情                 |
-| 401 Unauthorized          | 未认证         | 缺少 Token、Token 过期、签名错误               | 认证方式说明             |
-| 403 Forbidden             | 禁止访问       | 已登录但无权限(如:普通用户访问管理员接口)      | 无权限说明               |
-| 404 Not Found             | 资源不存在     | URL 错误、资源已删除                           | 错误详情                 |
-| 405 Method Not Allowed    | 方法不允许     | 如:对只读资源调用 POST                         | 允许的 Methods           |
-| 409 Conflict              | 资源冲突       | 重复创建(唯一约束冲突)、乐观锁版本冲突         | 冲突详情                 |
-| 422 Unprocessable Entity  | 语义错误       | 请求格式对,但业务校验失败(如:密码太短)         | 校验错误详情             |
-| 429 Too Many Requests     | 请求过多       | 触发限流(Rate Limiting)                        | 重试时间                 |
-| **5xx 服务端错误**        |                |                                                |                          |     |
-| 500 Internal Server Error | 服务器内部错误 | 未捕获的异常、代码 bug                         | 错误 ID(不要暴露堆栈)    |
-| 502 Bad Gateway           | 网关错误       | 反向代理(Nginx)无法连接到后端服务              | -                        |
-| 503 Service Unavailable   | 服务不可用     | 服务正在维护、过载保护触发                     | 恢复时间估计             |
-| 504 Gateway Timeout       | 网关超时       | 后端响应太慢,被代理层切断                      | -                        |
-
-::: tip 📊 从表格中你能看到什么?
-**2xx(成功)** vs **3xx(重定向)** vs **4xx(客户端错误)** vs **5xx(服务端错误)**:
-
-- **2xx**:一切正常,客户端可以继续
-- **3xx**:资源换地方了,告诉客户端去哪找
-- **4xx**:客户端搞错了,修正请求后重试
-- **5xx**:服务端出问题了,客户端等一等再试,或者联系管理员
-
-**关键点**:正确的状态码让客户端、浏览器、CDN、监控工具都能正确理解响应。
-:::
-
-### 3.3 状态码使用的"避坑指南"
-
-**坑 1:所有错误都用 400**
-
-```
-❌ GET /users/999  → 400 (用户不存在应该返回 404)
-❌ POST /login 密码错误 → 400 (应该返回 401 或 422)
-❌ 删除已删除的资源 → 400 (应该返回 404 或 204)
-```
-
-**坑 2:业务状态混在 HTTP 状态码里**
-
-```
-❌ 订单支付失败 → 402 Payment Required (这个状态码是为数字钱包预留的,不要滥用)
-✅ 订单支付失败 → 200 OK + body: { "code": "PAYMENT_FAILED", "message": "余额不足" }
-```
-
-**坑 3:暴露敏感信息**
-
-```
-❌ 500 响应里返回完整的堆栈跟踪、SQL 查询语句、数据库连接信息
-✅ 只返回 "错误 ID",详细日志记录到服务器,通过错误 ID 关联
-```
-
----
-
-## 4. 请求与响应:标准化的数据契约
-
-### 4.1 请求结构设计
-
-<RequestStructureDemo />
-
-**HTTP 请求由 3 部分组成**:
-
-```http
-# 1. 请求行(方法 + URL + 协议版本)
-POST /v1/users HTTP/1.1
-
-# 2. 请求头(元数据)
-Host: api.example.com
-Content-Type: application/json
-Authorization: Bearer eyJhbGciOiJIUzI1NiIs...
-X-Request-ID: req-123456789
-Accept: application/json
-Accept-Language: zh-CN,zh;q=0.9
-
-# 3. 请求体(仅 POST/PUT/PATCH 需要)
-{
-  "name": "张三",
-  "email": "zhangsan@example.com",
-  "phone": "13800138000"
-}
-```
-
-#### 查询参数设计规范
-
-```http
-# 分页(必须)
-GET /products?page=1&page_size=20
-
-# 排序(可选)
-GET /products?sort=created_at&order=desc
-
-# 过滤(可选,支持多种操作符)
-GET /products?price_min=100&price_max=5000          # 范围
-GET /products?category=electronics,clothing         # 多选(IN)
-GET /products?status=active&is_featured=true         # 布尔
-GET /products?search=iphone                         # 全文搜索
-
-# 字段选择(可选,减少数据传输)
-GET /products?fields=id,name,price
-
-# 组合使用
-GET /products?page=1&page_size=20&sort=price&order=asc&category=electronics&price_max=5000&fields=id,name,price
-```
-
-#### 请求头设计规范
-
-| 头部字段           | 用途         | 示例                                      | 是否必需              |
-| ------------------ | ------------ | ----------------------------------------- | --------------------- |
-| `Authorization`    | 认证信息     | `Bearer eyJhbGciOiJIUzI1NiIs...`          | 受保护接口必需        |
-| `Content-Type`     | 请求体格式   | `application/json`                        | POST/PUT/PATCH 必需   |
-| `Accept`           | 期望响应格式 | `application/json`                        | 建议携带              |
-| `Accept-Language`  | 期望语言     | `zh-CN,zh;q=0.9,en;q=0.8`                 | 多语言应用必需        |
-| `X-Request-ID`     | 请求唯一标识 | `req-550e8400-e29b-41d4-a716-44665544000` | 建议携带,便于追踪     |
-| `X-Client-Version` | 客户端版本   | `iOS-2.5.1` / `Web-3.0.0`                 | 建议携带,便于问题排查 |
-| `If-None-Match`    | 缓存校验     | `"abc123"`                                | 可选,用于乐观并发控制 |
-
-### 4.2 响应结构设计
-
-<ResponseStructureDemo />
-
-**标准化响应结构**(无论成功与否,结构一致):
+**场景二：状态码撒谎**
 
+你收到了一个 HTTP 200 OK 的响应，心想“稳了”。
+结果打开 Body 一看：
 ```json
 {
-  "code": 0,
-  "message": "success",
-  "data": { ... },
-  "request_id": "req-123456789",
-  "timestamp": "2024-01-15T09:30:00.000Z"
+  "code": 500,
+  "msg": "系统内部错误",
+  "data": null
 }
 ```
+浏览器缓存了它，监控系统认为它成功了，只有你的前端代码在风中凌乱。
 
-#### 响应字段说明
+**场景三：版本地狱**
 
-| 字段         | 类型    | 说明                                                       | 示例                                        |
-| ------------ | ------- | ---------------------------------------------------------- | ------------------------------------------- |
-| `code`       | integer | 业务状态码,`0` 表示成功,非 `0` 表示失败                    | `0`, `10001`, `20003`                       |
-| `message`    | string  | 状态描述,成功时为 `"success"`,失败时为错误描述             | `"success"`, `"用户不存在"`                 |
-| `data`       | any     | 业务数据,成功时返回具体数据,失败时可返回 `null` 或错误详情 | `{ "id": 1, "name": "张三" }`               |
-| `request_id` | string  | 请求唯一标识,用于问题追踪                                  | `"req-550e8400-e29b-41d4-a716-44665544000"` |
-| `timestamp`  | string  | 响应时间戳,ISO 8601 格式                                   | `"2024-01-15T09:30:00.000Z"`                |
-
-#### 分页响应结构
-
-```json
-{
-  "code": 0,
-  "message": "success",
-  "data": {
-    "list": [
-      { "id": 1, "name": "商品A", "price": 100 },
-      { "id": 2, "name": "商品B", "price": 200 }
-    ],
-    "pagination": {
-      "page": 1,
-      "page_size": 20,
-      "total": 156,
-      "total_pages": 8,
-      "has_next": true,
-      "has_prev": false
-    }
-  }
-}
-```
-
-::: tip 💡 为什么要 request_id?
-**request_id** 是问题追踪的关键:
-
-1. **用户反馈**:"支付失败,错误 ID 是 abc123"
-   → 技术人员直接在日志里搜索 abc123,立即定位问题
-
-2. **分布式追踪**:
-   - 请求经过 API Gateway → Service A → Service B
-   - 每个服务都记录相同的 request_id
-   - 日志系统可以把所有相关日志聚合起来
-
-3. **性能分析**:
-   - 统计某个 request_id 的完整链路耗时
-
-- 发现瓶颈在哪个服务
-
-**关键点**:request_id 是可观测性的基础,没有它,分布式系统的问题排查是地狱模式。
-:::
+项目迭代了三年，你的代码里充满了这样的 URL：
+- `/api/v1/user/update`
+- `/api/v2/user/update_new`
+- `/api/user/update_final_real`
 
 ---
 
-## 5. 错误处理:优雅地"拒绝"
+**API 设计就是为了解决这些问题。**
 
-### 5.1 为什么错误处理如此重要?
+它就像餐厅的菜单和点餐流程：规定了我们**怎么点菜（请求）**、**怎么上菜（响应）**、**没菜了怎么办（错误处理）**。
 
-<ErrorHandlingDemo />
-
-一个好的错误处理机制,能让客户端"看状态码就知道怎么回事",而不是去猜。
-
-**错误的示范**:
-
-```json
-HTTP/1.1 200 OK
-{
-  "error": "出错了"
-}
-```
-
-**问题**:
-
-- HTTP 状态码说"成功",但业务说"出错"
-- 错误信息太笼统,无法定位问题
-- 没有错误代码,难以程序化判断
-
-**正确的示范**:
-
-```json
-HTTP/1.1 422 Unprocessable Entity
-{
-  "code": 20003,
-  "message": "密码强度不足",
-  "errors": [
-    {
-      "field": "password",
-      "code": "VALIDATION_ERROR",
-      "message": "密码必须包含至少 1 个大写字母、1 个小写字母、1 个数字,且长度至少 8 位"
-    }
-  ],
-  "request_id": "req-550e8400-e29b-41d4-a716-44665544000",
-  "timestamp": "2024-01-15T09:30:00.000Z",
-  "help_url": "https://docs.example.com/errors/20003"
-}
-```
-
-### 5.2 错误码设计规范
-
-::: tip 💡 错误码的分层设计
-**分层错误码**的好处:
-
-- **可程序化判断**:前端根据 `code` 字段决定行为,而不是解析 `message`
-- **国际化友好**:`code` 不变,`message` 可以根据用户语言返回不同文本
-- **文档化**:每个错误码都有文档,开发者可以查
-
-**结构**:1XXYY
-
-- 第 1 位(1):固定,表示错误
-- 第 2-3 位(XX):模块/层次
-- 第 3-4 位(YY):具体错误
-
-**示例**:
-
-- `10001`:通用错误(参数错误)
-- `10010`:用户模块(用户不存在)
-- `20003`:业务错误(密码强度不足)
-  :::
-
-#### 分层错误码体系
-
-```
-错误码格式:1XXYY
-- 第 1 位(1):固定,表示错误
-- 第 2-3 位(XX):模块/层次
-- 第 4-5 位(YY):具体错误
-```
-
-| 模块代码 | 模块名称   | 说明                     |
-| -------- | ---------- | ------------------------ |
-| 00       | 通用       | 系统级、通用错误         |
-| 10       | 用户模块   | 注册、登录、用户信息相关 |
-| 11       | 认证授权   | Token、权限相关          |
-| 20       | 商品模块   | 商品 CRUD、库存相关      |
-| 30       | 订单模块   | 下单、支付、物流相关     |
-| 40       | 支付模块   | 支付渠道、退款相关       |
-| 50       | 营销模块   | 优惠券、活动相关         |
-| 90       | 第三方服务 | 短信、邮件、云存储等     |
+目前最流行的设计风格是 **RESTful**。
 
 ---
 
-## 6. 版本控制:API 的"向后兼容"
+## 1. 核心概念：RESTful 是什么？
 
-### 6.1 为什么要做 API 版本控制?
+REST (Representational State Transfer) 听起来很学术，其实核心就三句话：
 
-<VersioningStrategyDemo />
+1.  **资源 (Resource)**：网络上的所有东西都是资源（用户、订单、商品）。
+2.  **统一接口 (Uniform Interface)**：用标准的 HTTP 方法（GET, POST, DELETE）来操作这些资源。
+3.  **无状态 (Stateless)**：每次请求都包含所有必要信息，服务器不记“你是谁”（除非你带了 Token）。
 
-场景:你的电商系统已经上线,App 有 100 万用户。现在需要修改订单接口,添加一个新字段,同时废弃一个旧字段。
+### 比喻：餐厅点餐
 
-**如果不做版本控制**:
-
-- 新 App 调用新接口 → 正常工作
-- 旧 App 调用新接口 → 字段缺失,崩溃
-- 用户投诉 → 老板震怒 → 你背锅
-
-**正确的做法**:
-
-```
-/v1/orders  - 旧接口,继续服务旧 App
-/v2/orders  - 新接口,新功能在这里
-```
-
-旧 App 继续调用 `/v1/orders`,新功能上线不会崩。等旧 App 用户都升级了,再考虑废弃 v1。
-
-### 6.2 4 种版本控制策略
-
-| 策略                    | 示例                                  | 优点                       | 缺点                               | 推荐度   |
-| ----------------------- | ------------------------------------- | -------------------------- | ---------------------------------- | -------- |
-| **URL Path**            | `/v1/users`                           | 最直观、易于缓存、文档清晰 | URL 变化                           | ⭐⭐⭐⭐ |
-| **Header**              | `API-Version: v1`                     | URL 不变                   | 不直观,难以缓存,需要读 Header 文档 | ⭐⭐     |
-| **Content Negotiation** | `Accept: application/vnd.api.v1+json` | 标准 HTTP 规范             | 复杂,理解成本高                    | ⭐⭐     |
-| **Query Parameter**     | `/users?version=v1`                   | 简单                       | 不专业,容易被忽视,缓存麻烦         | ⭐       |
-
-**推荐做法**:URL Path 版本控制,简单直观,行业主流。
+- **URL 是桌号**：`/tables/5` (资源地址)
+- **HTTP 方法是动作**：
+    - `GET`：看菜单
+    - `POST`：下单
+    - `PUT`：换一桌菜
+    - `DELETE`：吃完走人
 
 ---
 
-## 7. 总结:API 设计 checklist
+## 2. 交互演示：RESTful API 全流程
 
-### 7.1 设计阶段
+别光听概念，我们来动手玩一下。
+下面是一个模拟的“用户管理系统”。试着点击不同的场景，观察 **客户端发出了什么** 以及 **服务端返回了什么**。
 
-- [ ] URL 设计符合 RESTful 规范(名词、复数、小写、连字符)
-- [ ] HTTP 方法使用正确(GET/POST/PUT/PATCH/DELETE)
-- [ ] 状态码选择恰当(2xx/4xx/5xx 区分清楚)
-- [ ] 错误码体系设计完成(分层、易扩展)
-- [ ] 响应结构标准化(code/message/data 统一)
-- [ ] 版本控制策略确定(URL Path 推荐)
-- [ ] 分页/排序/过滤参数设计统一
+<RestfulApiFlow />
 
-### 7.2 实现阶段
+### 💡 观察重点
 
-- [ ] 所有接口都有完善的 OpenAPI 文档
-- [ ] 参数校验规则清晰(类型、长度、必填)
-- [ ] 敏感信息脱敏处理(密码、Token 等)
-- [ ] 错误日志记录完整(带 request_id)
-- [ ] 接口性能监控到位(响应时间、错误率)
-- [ ] 限流熔断策略配置(防刷、降级)
-
-### 7.3 维护阶段
-
-- [ ] 接口变更走评审流程(兼容性检查)
-- [ ] 废弃接口有明确的 Sunset 计划
-- [ ] 客户端接入文档及时更新
-- [ ] 错误码文档随代码同步维护
+1.  **URL 是名词**：注意看 URL 都是 `/users` 或者 `/users/1`，没有动词（如 `/getUsers`）。因为 HTTP 方法（GET/POST）已经表示了动作。
+2.  **状态码会说话**：
+    - 创建成功返回 `201 Created`，而不是 200。
+    - 删除成功返回 `204 No Content`（没有 Body）。
+    - 找不到返回 `404 Not Found`。
+3.  **复数形式**：通常使用 `/users` 而不是 `/user`，表示这是“用户集合”下的资源。
 
 ---
 
-## 8. 名词对照表
+## 3. 设计黄金法则
 
-| 英文术语                   | 中文对照         | 解释                                                  |
-| -------------------------- | ---------------- | ----------------------------------------------------- |
-| **REST**                   | 表述性状态传递   | 一种软件架构风格,用 URL 标识资源,用 HTTP 方法操作资源 |
-| **RESTful**                | 符合 REST 规范的 | 遵循 REST 架构风格设计的 API                          |
-| **Endpoint**               | 端点             | API 的具体 URL 地址,如 `/users`                       |
-| **Resource**               | 资源             | REST 架构中的核心概念,网络上的任何事物都可抽象为资源  |
-| **URI**                    | 统一资源标识符   | 标识资源的字符串,URL 是 URI 的一种                    |
-| **HTTP Method**            | HTTP 方法        | GET、POST、PUT、PATCH、DELETE 等                      |
-| **Status Code**            | 状态码           | HTTP 响应中的 3 位数字,表示请求的处理结果             |
-| **Payload**                | 载荷             | HTTP 请求或响应的主体数据                             |
-| **Header**                 | 头部             | HTTP 请求或响应的元数据                               |
-| **Query String**           | 查询字符串       | URL 中 `?` 后面的参数部分                             |
-| **Path Parameter**         | 路径参数         | URL 路径中的变量,如 `/users/{id}`                     |
-| **Pagination**             | 分页             | 大数据量时分批返回的机制                              |
-| **Idempotency**            | 幂等性           | 多次执行结果相同的特性                                |
-| **Deprecation**            | 弃用             | 标记即将废弃的功能或接口                              |
-| **Backward Compatibility** | 向后兼容         | 新版本兼容旧版本的接口调用                            |
-| **Rate Limiting**          | 限流             | 限制单位时间内的请求数量                              |
-| **OpenAPI**                | 开放 API 规范    | 描述 REST API 的标准格式(原 Swagger)                  |
-| **SDK**                    | 软件开发工具包   | 封装 API 调用的开发工具包                             |
+### 3.1 URL 设计：让路径清晰
+
+| 法则 | 正确 ✅ | 错误 ❌ | 原因 |
+| :--- | :--- | :--- | :--- |
+| **用名词，不用动词** | `GET /products` | `GET /getProducts` | HTTP 方法已经是动词了 |
+| **用复数** | `/users/1` | `/user/1` | 保持一致性，`/users` 代表集合 |
+| **层级不要太深** | `/users/1/orders` | `/users/1/orders/2/items/3` | 超过 3 层建议拆分或用查询参数 |
+| **使用连字符** | `/user-profiles` | `/userProfiles` | URL 对大小写敏感，连字符更易读 |
+
+### 3.2 HTTP 方法：动作要有语义
+
+- **GET** (查)：**安全且幂等**。不管调用多少次，服务器状态不变。
+- **POST** (增)：**不安全，不幂等**。调用 10 次可能创建 10 个用户。
+- **PUT** (改-全量)：**幂等**。把 ID=1 的用户替换为新数据，替换 10 次结果一样。
+- **PATCH** (改-局部)：通常用于只修改一个字段（如只改密码）。
+- **DELETE** (删)：**幂等**。删除 ID=1 的用户，删 1 次和删 10 次，结果都是“用户没了”。
+
+### 3.3 状态码：别只用 200
+
+| 类别 | 状态码 | 含义 | 场景 |
+| :--- | :--- | :--- | :--- |
+| **2xx 成功** | 200 OK | 通用成功 | GET, PUT |
+| | 201 Created | 创建成功 | POST |
+| | 204 No Content | 成功但无返回 | DELETE |
+| **4xx 客户端错** | 400 Bad Request | 参数错 | 必填项没填，格式不对 |
+| | 401 Unauthorized | 未登录 | 没有 Token 或 Token 过期 |
+| | 403 Forbidden | 无权限 | 普通用户想删管理员 |
+| | 404 Not Found | 找不到 | URL 错了或 ID 不存在 |
+| **5xx 服务端错** | 500 Internal Error | 崩了 | 代码抛异常了，数据库挂了 |
+
+---
+
+## 4. 总结
+
+好的 API 设计是**“自解释”**的。
+当你的前端同事看到 `DELETE /api/orders/123`，他不需要问你，就应该知道：
+1.  这是一个删除操作。
+2.  操作对象是 ID 为 123 的订单。
+3.  如果成功，应该收到 204 或 200。
+4.  如果失败，应该去看状态码是 4xx 还是 5xx。
+
+这就是**约定优于配置**的力量。
diff --git a/docs/zh-cn/appendix/8-artificial-intelligence/ai-history.md b/docs/zh-cn/appendix/8-artificial-intelligence/ai-history.md
index 370ad84..6e63fdb 100644
--- a/docs/zh-cn/appendix/8-artificial-intelligence/ai-history.md
+++ b/docs/zh-cn/appendix/8-artificial-intelligence/ai-history.md
@@ -1,348 +1,154 @@
-# AI 简史与核心概念
-> 💡 **学习指南**：本章节通过交互式演示，带你回顾 AI 如何从“只会算数的机器”进化成“能写诗的艺术家”。
->
-> 我们将聚焦于三次核心的思维跃迁：从**教它规则**，到**让它模仿**，最终实现**让它创造**。同时，我们也会梳理关键的历史节点，带你理清技术发展的脉络。
+---
+title: 'AI 简史：从符号逻辑到千亿参数大模型'
+description: 'AI 发展 70 年，经历了三次浪潮、两次寒冬，最终融合为今天的大模型时代。'
+---
+
+# AI 简史：从符号逻辑到千亿参数大模型
+
+AI 发展 70 年，经历了**三次浪潮、两次寒冬**，从符号主义的逻辑推演，到连接主义的神经网络，再到行为主义的强化学习，最终融合为今天的大模型时代。以下是清晰的发展脉络与关键里程碑。
 
 <AiEvolutionDemo />
 
-### 关键里程碑 (Timeline)
+---
 
-<AIEvolutionTimelineDemo />
+## 一、理论奠基与符号主义的诞生（1940s-1950s）
 
-## 0. 引言：机器能思考吗？
+### 核心人物与理论
 
-1950 年，艾伦·图灵提出了一个问题：**"机器能思考吗？"**
+- **1943 年**：沃伦・麦卡洛克与沃尔特・皮茨提出 **MP 神经元模型**，首次用数学描述神经网络
+- **1950 年**：艾伦・图灵发表《计算机器与智能》，提出**图灵测试**，定义机器智能标准
+- **1956 年**：**达特茅斯会议**，约翰・麦卡锡首次提出"人工智能"概念，标志 AI 学科正式诞生
 
-为了回答这个问题，人类尝试了三种截然不同的解法：
+::: tip 符号主义兴起
+**符号主义**（逻辑主义/计算机学派）主张 **智能 = 符号推理**，将知识编码为符号，通过逻辑规则推导解决问题，是**自上而下**的智能模拟路径。
+:::
 
-1.  **教它规则**（逻辑）：像教小孩一样，把所有规则写给它。
-2.  **让它模仿**（概率）：给它看大量数据，让它自己找规律。
-3.  **让它创造**（生成）：不仅能分类，还能根据理解创造新东西。
+### 早期突破
 
-本教程将带你亲手体验这三个阶段。
+- **1956 年**：纽厄尔和西蒙开发**逻辑理论家**（Logic Theorist），首个能证明数学定理的 AI 程序
+- **1958 年**：麦卡锡发明 **LISP 语言**，成为 AI 研究的重要工具
+- **1959 年**：乔治・德沃尔与约瑟夫・恩格尔伯格开发首台**工业机器人**，标志 AI 从理论走向应用
 
 ---
 
-## 1. 符号主义：教机器"守规矩"（20世纪50年代 - 80年代）
+## 二、符号主义黄金时代与第一次 AI 浪潮（1960s-1970s）
 
-早期的 AI 科学家认为：智慧就是**逻辑推理**。
-只要我们把世界上的所有知识都写成 `If...Then...` 的规则，机器就能像人一样聪明。
+### 专家系统的辉煌
 
-这被称为**专家系统**或**符号主义人工智能**。
+符号主义在**专家系统**领域取得巨大成功，通过将领域专家知识编码为规则库，解决特定领域复杂问题。
 
-### 1.1 什么是"基于规则"？
+| 时间 | 标志性成果 | 意义 |
+| --- | --- | --- |
+| **1965 年** | Dendral 系统 | 首个专家系统，用于化学分子结构分析 |
+| **1977 年** | MYCIN 系统 | 诊断血液感染的专家系统，准确率达 69% |
+| **1980 年** | XCON 系统 | 为 DEC 公司配置计算机，节省 4000 万美元/年 |
 
-就像教小孩：
+### 第一次 AI 寒冬（1974-1980）
 
-- 如果看到红灯，就停下。
-- 如果下雨，就带伞。
+::: warning ❄️ 第一次 AI 寒冬
+符号主义局限性显现：
+- **知识获取瓶颈**：规则需人工编写，无法自动获取
+- **脆性问题**：难以处理例外情况，稍微偏离规则就崩溃
+- **计算能力不足**：当时的硬件无法支撑复杂推理
 
-在代码中，这表现为：
-
-```javascript
-// 基于规则的 AI 示例
-function decideTrafficLight(color) {
-  if (color === 'red') {
-    return 'stop'
-  } else if (color === 'yellow') {
-    return 'caution'
-  } else if (color === 'green') {
-    return 'go'
-  } else {
-    return 'unknown'
-  }
-}
-```
-
-### 1.2 专家系统的巅峰：MYCIN
-
-1970 年代，斯坦福大学开发的 MYCIN 系统能诊断血液感染，准确率达到专家水平。
-
-它的工作原理是：
-
-```lisp
-// MYCIN 系统的规则示例 (伪代码)
-(IF
-  (organism IS gram-positive) AND
-  (morphology IS coccus) AND
-  (growth-chains IS chains)
-THEN
-  (identity IS 0.7 streptococcus))
-```
-
-_数据示例 (知识库格式)_：
-
-```json
-// 专家系统知识库示例
-{
-  "rules": [
-    {
-      "id": "RULE-001",
-      "conditions": ["traffic_light == red", "speed > 0"],
-      "action": "brake",
-      "priority": 1
-    },
-    {
-      "id": "RULE-002",
-      "conditions": ["weather == rainy", "visibility < 100m"],
-      "action": "turn_on_lights",
-      "priority": 2
-    }
-  ]
-  // 系统按优先级依次匹配规则，遇到匹配就执行
-}
-```
-
-### 1.3 交互演示：规则 vs 学习
-
-下方的演示展示了两种方式的区别。
-
-- **左边 (规则)**：你必须显式地写代码 `if (size > 6)`。如果世界变了（比如苹果变小了），你的代码就失效了。
-- **右边 (学习)**：你不需要写规则。你只需要给机器看一堆苹果和樱桃的数据，点击 **Train**，它自己会"悟"出一个分界线。
-
-<RuleBasedVsLearningDemo />
-
-### 1.4 符号主义的局限性
-
-规则看起来很完美，但现实世界太复杂了。
-
-<CombinatorialExplosionDemo />
-
-**问题 1：组合爆炸**
-
-- 试图写下"识别猫"的所有规则？不可能！
-- "有胡须"？老鼠也有。
-- "有尖耳朵"？狗也有。
-- "毛茸茸的"？兔子也是。
-- 现实世界有无限边界情况，规则永远写不完。
-
-**问题 2：无法处理不确定性**
-
-- 如果规则冲突怎么办？
-- 如果遇到没见过的情况怎么办？
-- 规则系统很"脆弱"，缺少人类常识。
-
-> ⚠️ **教训**：试图用有限规则描述无限现实，注定失败。这导致了 1980 年代的**AI 寒冬**。
+美国 DARPA 削减 AI 研究经费，AI 进入第一次低谷期。
+:::
 
 ---
 
-## 2. 连接主义：教机器"像人脑一样思考"（21世纪10年代至今）
+## 三、专家系统复兴与第二次 AI 浪潮（1980s）
 
-既然规则写不完，不如换个思路：**让机器自己学**？
-科学家开始模仿人脑的结构——**神经元**。
+### 商业应用爆发
 
-这就是**连接主义**的核心思想。
+- 日本"**第五代计算机计划**"（1982）推动全球 AI 投资热潮
+- 美国 DEC、IBM 等公司推出商用专家系统开发工具
+- 符号主义达到巅峰，成为 AI 领域绝对主流
 
-### 2.1 人脑的启示
-
-人脑有约 860 亿个神经元，每个神经元通过突触连接成千上万个其他神经元。
-
-**关键发现**：
-
-- 单个神经元很"笨"（只是兴奋或不兴奋）
-- 但几百亿个神经元连在一起，就产生了智能
-
-### 2.2 感知机
-
-1957 年，康奈尔大学的 Frank Rosenblatt 发明了感知机——这是最简单的人工神经元。
-
-它的工作原理：
-
-1.  **接收输入**：从多个"突触"接收信号（$x_1, x_2, ...$）
-2.  **加权求和**：每个输入有对应的**权重**，代表重要性
-3.  **激活判断**：如果总和超过某个**阈值（偏置）**，就激活（输出 1）
-
-```text
-如果不带公式，怎么理解？
-
-简单来说就是：打分机制。
-总分 = (输入1 × 权重1) + (输入2 × 权重2) + ... + 基础分
-如果 总分 > 0，输出 1 (激活)
-否则，输出 0 (静默)
-```
-
-### 2.3 交互演示：玩转神经元
-
-调整下方的**权重**和**偏置**，看看能否控制神经元的输出。
-
-- **权重（$w$）**：代表输入的"重要性"。$w$ 越大，这个输入对结果影响越大。
-- **偏置（$b$）**：代表神经元的"门槛"。$b$ 越小，神经元越容易兴奋（输出 1）。
+### 连接主义的早期尝试
 
 <PerceptronDemo />
 
-### 2.4 从单神经元到深度学习
+- **1958 年**：罗森布拉特发明**感知机**，首个可学习的神经网络模型
+- **1969 年**：明斯基与佩珀特出版《感知机》，指出单层感知机无法解决**异或问题**，导致连接主义研究陷入停滞
 
-单个神经元能做什么？只能做简单分类（比如判断"苹果还是樱桃"）。
+### 第二次 AI 寒冬（1987-1993）
 
-但如果把神经元分层连接：
+::: warning ❄️ 第二次 AI 寒冬
+- 专家系统**维护成本高昂**，难以扩展到复杂领域
+- 个人电脑崛起，第五代计算机计划失败
+- AI 市场崩盘，研究经费再次大幅削减
+:::
 
-```
-输入层 (图片像素)
-    ↓
-隐藏层 1 (识别边缘)
-    ↓
-隐藏层 2 (识别形状)
-    ↓
-隐藏层 3 (识别物体部件)
-    ↓
-输出层 (识别物体)
-```
+---
 
-这就是**神经网络**。当网络有很多层时，我们称之为**深度学习**。
+## 四、机器学习兴起与连接主义复苏（1990s-2000s）
 
-<NeuralNetworkVisualizationDemo />
+### 符号主义衰落，机器学习崛起
 
-### 2.5 神经网络是如何学习的？
+- **1997 年**：IBM **深蓝** 击败国际象棋世界冠军卡斯帕罗夫，是符号主义最后的辉煌
+- 同时，**统计机器学习**开始取代基于规则的方法，支持向量机（SVM）、决策树等算法成为主流
 
-不像专家系统需要人写规则，神经网络通过**看数据**自己学。
-
-**学习过程（反向传播）**：
-
-1.  **前向传播**：输入数据，得到预测结果
-2.  **计算误差**：对比预测和真实答案
-3.  **反向传播**：根据误差调整每个神经元的权重
-4.  **重复**：重复几百万次，直到误差足够小
+### 连接主义的重生
 
 <BackpropagationDemo />
 
-_数据示例 (训练数据格式)_：
-
-```json
-// 图像分类训练数据示例
-{
-  "dataset": "cats_vs_dogs",
-  "samples": [
-    {
-      "image": "cat_001.jpg",
-      "label": 1,  // 1 = 猫
-      "features": [0.2, 0.8, 0.5, ...]  // 提取的特征向量
-    },
-    {
-      "image": "dog_001.jpg",
-      "label": 0,  // 0 = 狗
-      "features": [0.7, 0.3, 0.9, ...]
-    }
-  ]
-  // 神经网络会自动学习：什么样的 feature 组合更可能是猫
-}
-```
-
-### 2.6 连接主义的突破：2012 年 AlexNet
-
-2012 年，AlexNet 在 ImageNet 竞赛中以压倒性优势夺冠，标志着深度学习时代的到来。
-
-**关键因素**：
-
-- **大数据**：ImageNet 提供了 1400 万张标注图片
-- **大算力**：GPU 的并行计算能力让训练深度网络成为可能
-- **新算法**：ReLU 激活函数、Dropout 正则化等技术突破
-
-### 2.7 连接主义的局限
-
-深度学习很强大，但也不是完美的：
-
-- **黑盒问题**：虽然能识别猫，但我们说不清"它是怎么识别的"
-- **数据饥渴**：需要海量标注数据，获取成本高
-- **缺乏常识**：能识别出这是“猫”，但理解不了“猫喜欢抓老鼠”或“猫通常怕狗”这种常识关系（因为它只是在做像素级的统计匹配，而非真正的概念理解）
+- **1986 年**：鲁梅尔哈特等人提出**反向传播算法**，解决多层神经网络训练难题
+- **1997 年**：李飞飞创立 **ImageNet 数据集**，为后续深度学习提供数据基础
+- **2006 年**：杰弗里・辛顿提出**深度信念网络**，通过逐层预训练解决梯度消失问题，开启深度学习时代
 
 ---
 
-## 3. 生成式人工智能：机器有了"创造力"（21世纪20年代至今）
+## 五、深度学习革命与连接主义主导（2010s）
 
-以前的 AI 主要是**判别式**（这是猫还是狗？）。
-现在的 AI 是**生成式**（画一只猫！）。
+### 关键技术突破
 
-这一切的背后，是 **Transformer** 架构的诞生。它让 AI 学会了理解上下文，学会了"举一反三"。
+<NeuralNetworkVisualizationDemo />
 
-### 3.1 从"识别"到"创造"
-
-传统深度学习（判别式模型）：
-
-- 输入：一张图
-- 输出：这是猫（概率 98%）
-
-生成式 AI：
-
-- 输入：一句话"一只戴着墨镜的猫"
-- 输出：生成一张对应的图片
-
-<DiscriminativeVsGenerativeDemo />
-
-### 3.2 Transformer：AI 的"瑞士军刀"
-
-2017 年，Google 发表论文《Attention Is All You Need》（注意力机制就是你所需的全部），提出 Transformer 架构。
-
-它的核心创新：**注意力机制**
-
-**原理**：让模型在处理一个词时，能"关注"到句子中其他相关的词。
-
-例如："小明把苹果给了**他**的母亲"
-
-当模型处理"他"时，注意力机制会让它关注到"小明"，从而理解"他"指代的是小明。
+| 时间 | 突破 | 影响 |
+| --- | --- | --- |
+| **2012 年** | AlexNet 在 ImageNet 竞赛中错误率降至 15.3% | 标志深度学习超越传统方法，引爆计算机视觉革命 |
+| **2014 年** | GAN（生成对抗网络）提出 | AI 具备生成逼真图像、音频能力，推动生成式 AI 发展 |
+| **2015 年** | ResNet（残差网络）解决深层网络训练难题 | 网络层数突破 1000 层，进一步提升模型性能 |
+| **2016 年** | AlphaGo 击败围棋世界冠军李世石 | 结合深度强化学习与蒙特卡洛树搜索，实现复杂决策能力 |
+| **2017 年** | **Transformer 架构**发布 | 基于自注意力机制，解决长距离依赖问题，为大模型奠定基础 |
 
 <AttentionMechanismDemo />
 
-### 3.3 GPT：从文本生成到通用智能
+::: tip 行为主义的发展
+**行为主义**（进化主义）主张智能来自与环境的互动，通过试错学习优化行为，**强化学习**是其核心技术。AlphaGo 就是深度学习与强化学习结合的代表作。
+:::
 
-2018 年，OpenAI 发布 GPT-1（生成式预训练变换器）。
+---
 
-**核心思想**：
+## 六、大模型时代与通用智能曙光（2018 至今）
 
-1.  **预训练**：在海量文本上学习"预测下一个词"
-2.  **微调**：在特定任务上调整（比如问答、翻译）
-
-从 GPT-1 (2018) → GPT-2 (2019) → GPT-3 (2020) → GPT-4 (2023)
-
-- 参数量从 1.17 亿 → 1750 亿 → 1.8 万亿（估计）
-- 能力从文本生成 → 多模态（图片、音频、视频）
+### 预训练模型范式确立
 
 <GPTEvolutionDemo />
 
-### 3.4 生成式人工智能的局限
+- **2018 年**：OpenAI 发布 **GPT-1**（1.17 亿参数），谷歌发布 **BERT**，确立"**预训练 + 微调**"新范式
+- **2019 年**：**GPT-2**（15 亿参数）展现惊人的文本生成能力，引发对 AI 伦理的广泛讨论
+- **2020 年**：**GPT-3**（1750 亿参数）通过"暴力美学"展现**涌现能力**，无需微调即可完成多种任务
 
-虽然强大，但也存在问题：
+### 生成式 AI 爆发
 
-- **幻觉**：一本正经地胡说八道
-- **偏见放大**：从训练数据中学到人类偏见
-- **不可解释**：仍然是个黑盒，不知道内部怎么运作
+- **2022 年 11 月**：**ChatGPT**（GPT-3.5）发布，通过 RLHF（人类反馈强化学习）大幅提升对话能力，成为现象级产品
+- **2023 年 3 月**：**GPT-4** 发布，具备**多模态能力**（文本 + 图像），进一步提升逻辑推理与安全性
+- **2023 年**：Stable Diffusion、Midjourney 等图像生成模型兴起，多模态大模型成为主流
+- **2024 年**：**Sora** 等视频生成模型发布，AI 生成能力扩展到动态内容领域
 
 ---
 
-## 4. AI 范式对比总结
+## 七、AI 三大学派的融合与未来展望
 
-| 时代               | 核心理念        | 代表产物                    | 优势                     | 局限                         |
-| :----------------- | :-------------- | :-------------------------- | :----------------------- | :--------------------------- |
-| **符号主义**       | 智慧 = 规则     | 深蓝（下棋）、MYCIN（诊断） | 可解释性强，逻辑清晰     | 无法处理模糊、复杂的现实世界 |
-| **连接主义**       | 智慧 = 神经网络 | AlphaGo、人脸识别           | 能处理复杂模式，性能强大 | 需要海量数据，是个"黑盒"     |
-| **生成式人工智能** | 智慧 = 通用理解 | ChatGPT、Midjourney         | 能创造新内容，理解上下文 | 幻觉、偏见、不可解释         |
+<DiscriminativeVsGenerativeDemo />
 
-**AI 的进化趋势**：
+### 未来趋势
 
-1.  **从人工到自动**：从人写规则 → 机器自动学习
-2.  **从单一到通用**：从下棋专用 → 通用人工智能
-3.  **从判别到生成**：从分类识别 → 创造新内容
+- **多模态融合**：文本、图像、音频、视频等信息的统一处理
+- **高效大模型**：降低训练成本，提升推理效率，推动边缘部署
+- **可解释 AI**：解决黑箱问题，增强 AI 可信度
+- **AGI 探索**：从专用智能向通用人工智能迈进，追求更全面的人类智能模拟
 
-> 关于大语言模型的详细原理，请移步下一章：[大语言模型入门](./llm-intro.md)
 
----
-
-## 5. 名词速查表
-
-| 名词               | 英文原文                           | 解释                                                                                                |
-| :----------------- | :--------------------------------- | :-------------------------------------------------------------------------------------------------- |
-| **符号主义**       | Symbolic AI                        | 基于规则的人工智能。认为智能可以用逻辑规则表示。代表：专家系统、深蓝。                              |
-| **专家系统**       | Expert Systems                     | 符号主义的代表产物。通过人工编写大量规则来模拟专家决策。代表：MYCIN（医疗诊断）。                   |
-| **连接主义**       | Connectionism                      | 基于神经网络的人工智能。模仿人脑神经元连接结构，通过数据自动学习。                                  |
-| **感知机**         | Perceptron                         | 最简单的神经网络单元。接收多个输入，加权求和后通过激活函数输出。                                    |
-| **神经网络**       | Neural Network                     | 由多个感知机分层连接组成的模型。通过调整权重来学习数据中的模式。                                    |
-| **深度学习**       | Deep Learning                      | 使用**多层**神经网络的学习方法。能自动提取层次化特征（边缘 → 形状 → 物体）。                        |
-| **反向传播**       | Backpropagation                    | 神经网络的学习算法。通过计算预测误差，反向调整每层的权重，逐步优化模型。                            |
-| **生成式人工智能** | Generative AI                      | 能**创造新内容**的人工智能（文本、图片、音频等），而非仅仅是分类或识别。代表：ChatGPT、Midjourney。 |
-| **判别式人工智能** | Discriminative AI                  | 用于**分类**的人工智能（如：这是猫还是狗？）。传统深度学习大多是判别式的。                          |
-| **Transformer**    | Transformer                        | 2017 年由 Google 提出的架构，基于注意力机制。是现代大语言模型（GPT、BERT）的基础。                  |
-| **注意力机制**     | Attention Mechanism                | 让模型在处理一个元素时，能动态"关注"其他相关元素的技术。是 Transformer 的核心。                     |
-| **GPT**            | Generative Pre-trained Transformer | OpenAI 的系列模型。通过"预训练 + 微调"范式，在大量文本上学习生成能力。                              |
-| **预训练**         | Pre-training                       | 在大规模无标注数据上进行初步训练，学习通用知识（如语言规律）。                                      |
-| **微调**           | Fine-tuning                        | 在预训练模型基础上，使用特定任务的小规模数据进行调整，使模型适应具体应用。                          |
-| **幻觉**           | Hallucination                      | 生成式人工智能模型"自信地编造错误内容"的现象。如 ChatGPT 编造不存在的论文或事实。                   |
-| **通用人工智能**   | Artificial General Intelligence    | 像人类一样具备多领域智能、能自主学习推理的人工智能（尚未实现）。                                    |
+AI 的发展是一条**螺旋式上升**的道路，每个时代的技术都为后续突破奠定基础。今天的大模型并非完全抛弃符号主义，而是在连接主义框架下，通过海量数据学习到了类似符号推理的能力，实现了**不同学派思想的深度融合**。
diff --git a/docs/zh-cn/appendix/8-artificial-intelligence/ai-protocols.md b/docs/zh-cn/appendix/8-artificial-intelligence/ai-protocols.md
index 4237403..500b0ac 100644
--- a/docs/zh-cn/appendix/8-artificial-intelligence/ai-protocols.md
+++ b/docs/zh-cn/appendix/8-artificial-intelligence/ai-protocols.md
@@ -1,3 +1,318 @@
-# AI 协议（MCP 等）
+# AI Agent 协议（MCP & A2A）
 
-> 待实现
+::: tip 核心问题
+**AI Agent 如何与外部世界"对话"？** 就像互联网需要 HTTP 协议，AI Agent 也需要标准化的通信协议。本章介绍两个最主流的 Agent 协议：MCP 和 A2A，它们分别解决了 AI 与工具、Agent 与 Agent 之间的通信问题。
+:::
+
+---
+
+## 0. 什么是协议？
+
+在计算机领域，**协议（Protocol）** 是一套标准化的规则和约定，让不同的系统、程序能够相互"理解"和"通信"。
+
+### 0.1 为什么需要协议？
+
+想象一个场景：你给朋友寄快递，需要填写地址。如果每个人写的地址格式都不一样，快递员就没法投递。协议就是规定了"地址怎么写"的标准——省、市、区、街道、门牌号，按这个格式写，谁都能看懂。
+
+计算机也是一样。两个程序要通信，必须约定好：
+- 数据格式是什么？（JSON？二进制？）
+- 怎么建立连接？（握手流程）
+- 出错了怎么办？（错误处理）
+
+### 0.2 计算机中常见的协议
+
+| 协议 | 作用 | 你每天都在用 |
+|------|------|-------------|
+| **HTTP** | 网页传输协议 | 浏览器打开网页 |
+| **HTTPS** | 加密的 HTTP | 网银、支付页面 |
+| **TCP/IP** | 互联网基础协议 | 所有网络通信 |
+| **DNS** | 域名解析协议 | 把 `google.com` 变成 IP 地址 |
+| **SMTP** | 邮件发送协议 | 发送邮件 |
+| **WebSocket** | 双向实时通信 | 聊天软件、在线游戏 |
+| **SSH** | 安全远程登录 | 连接服务器 |
+| **FTP** | 文件传输协议 | 上传/下载文件 |
+
+这些协议构成了互联网的基石。没有它们，你无法浏览网页、发送邮件、观看视频。
+
+### 0.3 协议的价值
+
+协议的核心价值是**标准化**和**互操作性**：
+
+- **标准化**：大家都按同一套规则办事，减少沟通成本
+- **互操作性**：不同厂商、不同技术栈的系统可以无缝对接
+
+比如 HTTP 协议，让 Chrome 浏览器可以访问 Nginx 服务器，让 Python 爬虫可以抓取 Java 网站的数据。不需要 Chrome 和 Nginx 互相"认识"，只要都遵守 HTTP 协议就行。
+
+### 0.4 AI Agent 也需要协议
+
+AI Agent 要真正"干活"，需要：
+- 调用外部工具（查天气、发邮件、操作数据库）
+- 与其他 Agent 协作（分工合作完成复杂任务）
+
+这就需要标准化的协议来规定"AI 怎么调用工具"、"Agent 之间怎么对话"。这就是 **MCP** 和 **A2A** 的由来。
+
+---
+
+## 1. Agent 协议的层次
+
+在深入了解具体协议之前，让我们先看看 Agent 生态中的通信层次：
+
+| 层级 | 协议 | 解决的问题 | 类比 |
+|------|------|-----------|------|
+| **1** | Function Call | AI 如何调用本地函数 | 大脑发出指令 |
+| **2** | **MCP** | AI 如何连接外部工具和数据源 | USB-C 接口 |
+| **3** | **A2A** | Agent 之间如何协作通信 | 企业微信 |
+
+::: tip 逐行解读这张表
+**第1层（Function Call）**：这是大模型最基础的能力——通过输出结构化数据（JSON）来触发函数执行。它是"协议"的基础，但本身更像是一种能力而非标准协议。
+
+**第2层（MCP）**：Model Context Protocol，由 Anthropic 于 2024 年 11 月发布。它标准化了 AI 与外部工具、数据源的连接方式，就像 USB-C 统一了各种设备的充电接口。
+
+**第3层（A2A）**：Agent-to-Agent Protocol，由 Google 于 2025 年 4 月发布。它让不同的 Agent 能够相互发现、通信和协作，就像企业微信让同事之间可以发任务、聊天。
+:::
+
+本章重点介绍第 2、3 层的两个正式协议：MCP 和 A2A。
+
+---
+
+## 2. MCP (Model Context Protocol)
+
+### 2.1 协议基本信息
+
+| 项目 | 内容 |
+|------|------|
+| **全称** | Model Context Protocol |
+| **发起方** | Anthropic |
+| **发布时间** | 2024 年 11 月 25 日 |
+| **官方文档** | [modelcontextprotocol.io](https://modelcontextprotocol.io) |
+| **开源协议** | MIT License |
+| **GitHub** | [github.com/modelcontextprotocol](https://github.com/modelcontextprotocol) |
+
+::: tip 为什么叫"Context Protocol"？
+**Context（上下文）** 是大模型理解任务的关键。MCP 的核心思想是：**让 AI 能够动态获取所需的上下文信息**，而不是把所有信息都塞进 Prompt。
+
+比如，AI 需要读取一个文件时，不需要你把文件内容复制粘贴给它，而是通过 MCP 直接访问文件系统。
+:::
+
+### 2.2 发布的背景
+
+2024 年，随着 Claude 3.5 Sonnet 的发布，Anthropic 发现一个问题：**每个工具都要单独集成**。
+
+想象一下：
+- 你想让 AI 读取 GitHub 仓库 → 要写 GitHub 集成代码
+- 你想让 AI 查询数据库 → 要写数据库集成代码
+- 你想让 AI 操作文件系统 → 要写文件系统集成代码
+
+每个集成都要重复写类似的代码：认证、错误处理、数据转换……
+
+Anthropic 在官方博客中写道：
+> "We're introducing the Model Context Protocol (MCP), an open protocol that standardizes how applications provide context to LLMs."
+
+**核心目标**：让工具开发者写一次代码，所有支持 MCP 的 AI 应用都能使用。
+
+### 2.3 MCP 是什么？
+
+<McpVisualDemo />
+
+**三大核心能力**：
+
+| 能力 | 英文 | 作用 | 示例 |
+|------|------|------|------|
+| **工具** | Tools | AI 可以调用的功能 | 查询天气、发送邮件 |
+| **资源** | Resources | AI 可以读取的数据 | 文件内容、数据库记录 |
+| **提示** | Prompts | 预定义的提示模板 | 代码审查模板、写作模板 |
+
+### 2.4 MCP 的内部实现
+
+<McpDetailedDemo />
+
+### 2.5 类比理解：USB-C 接口
+
+MCP 就像 **USB-C 接口**：
+
+- **以前**：每个设备都有自己的充电口（圆口、扁口、磁吸……）
+- **现在**：USB-C 统一了所有设备的充电和数据传输
+- **MCP**：统一了 AI 与所有工具的连接方式
+
+工具开发者只需要实现一次 MCP Server，所有支持 MCP 的 AI 应用（Claude、Cursor、Windsurf 等）都能直接使用。
+
+### 2.6 MCP 的典型应用场景
+
+| 场景 | 说明 | 示例 |
+|------|------|------|
+| **本地文件操作** | 让 AI 读取/修改本地文件 | 读取代码库、分析日志文件 |
+| **数据库查询** | 让 AI 直接查询数据库 | SQL 查询、数据分析 |
+| **API 调用** | 让 AI 调用第三方服务 | GitHub API、Slack、邮件 |
+| **开发工具集成** | 让 AI 使用开发工具 | Git 操作、终端命令 |
+
+**实际案例**：
+- **Cursor/Windsurf**：通过 MCP 连接文件系统、Git、终端
+- **Claude Desktop**：通过 MCP 连接笔记软件、邮件客户端
+- **自动化脚本**：让 AI 执行自动化任务（备份、部署、数据同步）
+
+---
+
+## 3. A2A (Agent-to-Agent Protocol)
+
+### 3.1 协议基本信息
+
+| 项目 | 内容 |
+|------|------|
+| **全称** | Agent-to-Agent Protocol |
+| **发起方** | Google |
+| **发布时间** | 2025 年 4 月 9 日 |
+| **官方文档** | [google.github.io/A2A](https://google.github.io/A2A) |
+| **开源协议** | Apache 2.0 |
+| **GitHub** | [github.com/google/A2A](https://github.com/google/A2A) |
+
+::: tip 为什么是 Google 发起？
+Google 在 Cloud Next 2025 大会上发布 A2A，与其企业级 AI 战略密切相关。
+
+Google 认为：未来的企业 AI 不是单个超级 Agent，而是**多个专业 Agent 协作**——有的负责数据分析，有的负责代码生成，有的负责文档处理。
+
+这些 Agent 需要一种标准化的方式相互通信，A2A 应运而生。
+:::
+
+### 3.2 发布的背景
+
+MCP 解决了"AI 如何连接工具"的问题，但还有一个问题：**多个 Agent 如何协作？**
+
+想象一个场景：
+- Agent A 是"需求分析专家"
+- Agent B 是"代码生成专家"
+- Agent C 是"测试专家"
+
+用户说："帮我开发一个登录功能"
+
+Agent A 分析需求后，需要把任务分配给 Agent B；Agent B 写完代码后，需要让 Agent C 测试。它们之间如何通信？
+
+Google 在官方博客中写道：
+> "A2A is an open protocol that enables AI agents to communicate with each other, facilitating collaboration across different frameworks and vendors."
+
+**核心目标**：让不同厂商、不同框架开发的 Agent 能够无缝协作。
+
+### 3.3 A2A 是什么？
+
+<A2AVisualDemo />
+
+**三大核心概念**：
+
+| 概念 | 英文 | 作用 | 类比 |
+|------|------|------|------|
+| **Agent Card** | Agent 名片 | 描述 Agent 的能力 | 员工工牌 |
+| **Task** | 任务 | 要执行的工作单元 | 工单 |
+| **Message** | 消息 | Agent 之间的通信内容 | 聊天记录 |
+
+### 3.4 A2A 的内部实现
+
+<A2ADetailedDemo />
+
+### 3.5 类比理解：企业微信
+
+A2A 就像 **企业微信**：
+
+- **Agent Card**：每个人的名片，显示姓名、部门、职责
+- **发任务**：@某人，分配一个任务
+- **聊天沟通**：任务执行过程中可以随时沟通
+- **任务追踪**：能看到任务的进度和状态
+
+不同的 Agent 就像不同的同事，A2A 让它们能够协作完成复杂项目。
+
+### 3.6 A2A 的典型应用场景
+
+| 场景 | 说明 | 示例 |
+|------|------|------|
+| **软件开发** | 多 Agent 协作完成开发任务 | 需求分析→代码→测试→部署 |
+| **企业工作流** | 不同部门 Agent 协作处理业务 | HR Agent + 财务 Agent + 法务 Agent |
+| **智能客服** | 多个专业 Agent 分工处理 | 接待→解答→转接→记录 |
+| **数据分析** | 多个 Agent 协作分析数据 | 收集→清洗→分析→可视化→报告 |
+
+**实际案例**：
+- **Google Agent Space**：企业内部多个 Agent 协作处理文档、邮件、日程
+- **软件开发团队**：需求 Agent → 代码 Agent → 测试 Agent → 部署 Agent
+- **智能客服系统**：接待 Agent → 专业解答 Agent → 人工转接 Agent
+
+---
+
+## 4. MCP vs A2A：对比与关系
+
+### 4.1 核心差异
+
+| 维度 | MCP | A2A |
+|------|-----|-----|
+| **发起方** | Anthropic (2024.11) | Google (2025.04) |
+| **定位** | AI 与工具的连接 | Agent 与 Agent 的协作 |
+| **通信范围** | Client-Server | Peer-to-Peer |
+| **数据格式** | JSON-RPC 2.0 | HTTP + JSON |
+| **类比** | USB-C 接口 | 企业微信 |
+
+### 4.2 两者的关系
+
+MCP 和 A2A **不是竞争关系，而是互补关系**：
+
+<ProtocolComparisonDemo />
+
+### 4.3 如何选择？
+
+| 场景 | 选择 |
+|------|------|
+| 让 AI 调用本地函数或工具 | Function Call |
+| 使用第三方工具（数据库、API、文件系统） | MCP |
+| 构建多 Agent 协作系统 | A2A |
+| 同时需要工具集成和多 Agent 协作 | MCP + A2A |
+
+---
+
+## 5. 协议的未来趋势
+
+### 5.1 生态发展
+
+**MCP 生态**（截至 2025 年初）：
+- 官方提供的 Server：文件系统、SQLite、Git、PostgreSQL 等
+- 社区贡献的 Server：Slack、Notion、Figma、Stripe 等
+- 支持 MCP 的应用：Claude Desktop、Cursor、Windsurf、Zed 等
+
+**A2A 生态**（刚发布）：
+- Google 自家的 Agent 产品率先支持
+- 开源社区正在开发各种语言的 SDK
+- 企业级应用正在探索中
+
+### 5.2 标准化进程
+
+目前 Agent 协议还处于"战国时代"：
+- MCP 和 A2A 是最主流的两个
+- 还有其他新兴协议如 ANP、AGP 等
+- 未来可能会融合或统一
+
+类比互联网的发展：
+- 早期：各种局域网协议并存
+- 后来：TCP/IP 成为标准
+- 现在：Agent 协议可能也会走向统一
+
+---
+
+## 6. 小结
+
+::: tip 核心要点
+| 协议 | 一句话理解 | 发布时间 | 发起方 | 适用场景 |
+|------|-----------|---------|--------|---------|
+| **MCP** | AI 连接工具的"USB-C" | 2024.11 | Anthropic | 工具集成、数据源连接 |
+| **A2A** | Agent 协作的"企业微信" | 2025.04 | Google | 多 Agent 协作、任务委托 |
+
+**关键洞察**：
+1. MCP 解决"AI 如何获取外部能力"的问题
+2. A2A 解决"多个 AI 如何协作"的问题
+3. 两者互补，未来可能会融合使用
+4. 选择协议要根据具体场景，没有银弹
+:::
+
+---
+
+## 参考资料
+
+1. **MCP 官方文档**: [modelcontextprotocol.io](https://modelcontextprotocol.io)
+2. **MCP GitHub**: [github.com/modelcontextprotocol](https://github.com/modelcontextprotocol)
+3. **Anthropic 发布博客**: "Introducing the Model Context Protocol" (2024-11-25)
+4. **A2A 官方文档**: [google.github.io/A2A](https://google.github.io/A2A)
+5. **A2A GitHub**: [github.com/google/A2A](https://github.com/google/A2A)
+6. **Google Cloud Blog**: "Announcing the Agent-to-Agent Protocol" (2025-04-09)