diff --git a/docs/.vitepress/theme/components/appendix/api-intro/ApiConceptDemo.vue b/docs/.vitepress/theme/components/appendix/api-intro/ApiConceptDemo.vue
index 1bab8f2..40c8c47 100644
--- a/docs/.vitepress/theme/components/appendix/api-intro/ApiConceptDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/api-intro/ApiConceptDemo.vue
@@ -80,10 +80,8 @@
 
     <div class="info-box">
       <strong>核心思想：</strong>
-      <span
-        >无论哪种 API，结构都一样：地址（找谁）+ 参数（要什么）=
-        响应（得到什么）。</span
-      >
+      <span>无论哪种 API，结构都一样：地址（找谁）+ 参数（要什么）=
+        响应（得到什么）。</span>
     </div>
   </div>
 </template>
diff --git a/docs/.vitepress/theme/components/appendix/api-intro/ApiDocumentDemo.vue b/docs/.vitepress/theme/components/appendix/api-intro/ApiDocumentDemo.vue
index 82c9a7a..289a777 100644
--- a/docs/.vitepress/theme/components/appendix/api-intro/ApiDocumentDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/api-intro/ApiDocumentDemo.vue
@@ -25,8 +25,7 @@
           <div class="doc-title">Headers</div>
           <pre class="doc-pre">
 Authorization: Bearer sk-xxx
-Content-Type: application/json</pre
-          >
+Content-Type: application/json</pre>
         </div>
 
         <div class="doc-section">
@@ -69,10 +68,8 @@ response = client.chat.completions.create(
 
     <div class="info-box">
       <strong>核心思想：</strong>
-      <span
-        >看文档找三样：地址（Base
-        URL）、鉴权（Authorization）、参数（Parameters）。</span
-      >
+      <span>看文档找三样：地址（Base
+        URL）、鉴权（Authorization）、参数（Parameters）。</span>
     </div>
   </div>
 </template>
diff --git a/docs/.vitepress/theme/components/appendix/api-intro/ApiMethodDemo.vue b/docs/.vitepress/theme/components/appendix/api-intro/ApiMethodDemo.vue
index 98d148c..cb7a602 100644
--- a/docs/.vitepress/theme/components/appendix/api-intro/ApiMethodDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/api-intro/ApiMethodDemo.vue
@@ -49,10 +49,8 @@
 
     <div class="info-box">
       <strong>核心思想：</strong>
-      <span
-        >HTTP 方法就是动词——GET 是"问"，POST 是"做"，PUT/PATCH 是"改"，DELETE
-        是"删"。</span
-      >
+      <span>HTTP 方法就是动词——GET 是"问"，POST 是"做"，PUT/PATCH 是"改"，DELETE
+        是"删"。</span>
     </div>
   </div>
 </template>
diff --git a/docs/.vitepress/theme/components/appendix/api-intro/ApiPlayground.vue b/docs/.vitepress/theme/components/appendix/api-intro/ApiPlayground.vue
index d19fe43..ffd8821 100644
--- a/docs/.vitepress/theme/components/appendix/api-intro/ApiPlayground.vue
+++ b/docs/.vitepress/theme/components/appendix/api-intro/ApiPlayground.vue
@@ -19,7 +19,7 @@
             type="text"
             placeholder="/users"
             class="input"
-          >
+          />
         </div>
         <div class="input-row">
           <label>方法</label>
@@ -41,42 +41,24 @@
             type="password"
             placeholder="sk-..."
             class="input"
-          >
+          />
         </div>
-        <button
-          class="send-btn"
-          :disabled="loading"
-          @click="sendRequest"
-        >
+        <button class="send-btn" :disabled="loading" @click="sendRequest">
           {{ loading ? '发送中...' : '🚀 发送' }}
         </button>
       </div>
 
       <div class="right-panel">
-        <div
-          v-if="!response"
-          class="empty"
-        >
-          点击发送查看结果
-        </div>
-        <div
-          v-else
-          class="response"
-        >
-          <div
-            class="status-bar"
-            :class="getStatusClass(response.status)"
-          >
+        <div v-if="!response" class="empty">点击发送查看结果</div>
+        <div v-else class="response">
+          <div class="status-bar" :class="getStatusClass(response.status)">
             <span class="code">{{ response.status }}</span>
             <span class="text">{{ response.statusText }}</span>
           </div>
           <div class="body">
             <pre>{{ JSON.stringify(response.data, null, 2) }}</pre>
           </div>
-          <div
-            v-if="response.explanation"
-            class="explanation"
-          >
+          <div v-if="response.explanation" class="explanation">
             💡 {{ response.explanation }}
           </div>
         </div>
@@ -85,18 +67,10 @@
 
     <div class="quick-actions">
       <span class="label">快速尝试：</span>
-      <button @click="tryEndpoint('/users')">
-        ✅ GET /users
-      </button>
-      <button @click="tryError401">
-        ❌ 401
-      </button>
-      <button @click="tryError404">
-        ❌ 404
-      </button>
-      <button @click="tryError429">
-        ❌ 429
-      </button>
+      <button @click="tryEndpoint('/users')">✅ GET /users</button>
+      <button @click="tryError401">❌ 401</button>
+      <button @click="tryError404">❌ 404</button>
+      <button @click="tryError429">❌ 429</button>
     </div>
   </div>
 </template>
@@ -205,9 +179,18 @@ function tryError429() {
   gap: 8px;
 }
 
-.icon { font-size: 18px; }
-.title { font-weight: 600; font-size: 0.9rem; }
-.subtitle { font-size: 0.75rem; color: var(--vp-c-text-3); margin-left: auto; }
+.icon {
+  font-size: 18px;
+}
+.title {
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+.subtitle {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-3);
+  margin-left: auto;
+}
 
 .demo-layout {
   display: flex;
@@ -230,8 +213,14 @@ function tryError429() {
 }
 
 @media (max-width: 640px) {
-  .demo-layout { flex-direction: column; }
-  .left-panel { width: 100%; border-right: none; border-bottom: 1px solid var(--vp-c-divider); }
+  .demo-layout {
+    flex-direction: column;
+  }
+  .left-panel {
+    width: 100%;
+    border-right: none;
+    border-bottom: 1px solid var(--vp-c-divider);
+  }
 }
 
 .input-row {
@@ -314,15 +303,31 @@ function tryError429() {
   font-size: 0.8rem;
 }
 
-.status-bar.success { background: #dcfce7; }
-.status-bar.success .code { color: #166534; }
-.status-bar.client-error { background: #fee2e2; }
-.status-bar.client-error .code { color: #991b1b; }
-.status-bar.server-error { background: #fef3c7; }
-.status-bar.server-error .code { color: #92400e; }
+.status-bar.success {
+  background: #dcfce7;
+}
+.status-bar.success .code {
+  color: #166534;
+}
+.status-bar.client-error {
+  background: #fee2e2;
+}
+.status-bar.client-error .code {
+  color: #991b1b;
+}
+.status-bar.server-error {
+  background: #fef3c7;
+}
+.status-bar.server-error .code {
+  color: #92400e;
+}
 
-.code { font-weight: bold; }
-.text { color: var(--vp-c-text-2); }
+.code {
+  font-weight: bold;
+}
+.text {
+  color: var(--vp-c-text-2);
+}
 
 .body {
   flex: 1;
diff --git a/docs/.vitepress/theme/components/appendix/api-intro/ApiQuickStartDemo.vue b/docs/.vitepress/theme/components/appendix/api-intro/ApiQuickStartDemo.vue
index eb0af8b..c72caf7 100644
--- a/docs/.vitepress/theme/components/appendix/api-intro/ApiQuickStartDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/api-intro/ApiQuickStartDemo.vue
@@ -89,10 +89,8 @@
 
     <div class="info-box">
       <strong>核心思想：</strong>
-      <span
-        >点击按钮 → 发送请求 → 服务器处理 → 返回数据。这就是 API
-        调用的完整流程。</span
-      >
+      <span>点击按钮 → 发送请求 → 服务器处理 → 返回数据。这就是 API
+        调用的完整流程。</span>
     </div>
   </div>
 </template>
diff --git a/docs/.vitepress/theme/components/appendix/api-intro/ApiTypesComparison.vue b/docs/.vitepress/theme/components/appendix/api-intro/ApiTypesComparison.vue
new file mode 100644
index 0000000..74a7717
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/api-intro/ApiTypesComparison.vue
@@ -0,0 +1,201 @@
+<template>
+  <div class="api-types-demo">
+    <div class="switch-bar">
+      <button
+        v-for="type in types"
+        :key="type.id"
+        :class="{ active: active === type.id }"
+        @click="active = type.id"
+      >
+        {{ type.icon }} {{ type.name }}
+      </button>
+    </div>
+
+    <div class="display-area">
+      <div class="info-grid">
+        <div class="info-item">
+          <span class="label">调用对象</span>
+          <span class="value">{{ currentType.target }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">通信方式</span>
+          <span class="value">{{ currentType.comm }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">延迟</span>
+          <span class="value">{{ currentType.latency }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">典型场景</span>
+          <span class="value">{{ currentType.scenarios }}</span>
+        </div>
+      </div>
+
+      <div class="code-preview">
+        <div class="code-header">{{ currentType.name }} 示例</div>
+        <pre><code>{{ currentType.example }}</code></pre>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const active = ref('function')
+
+const types = [
+  {
+    id: 'function',
+    icon: '📦',
+    name: '函数 API',
+    target: '本地代码库',
+    comm: '函数调用',
+    latency: '纳秒级',
+    scenarios: '数据处理、文件操作',
+    example: `len("hello")           # 返回 5
+max([1, 5, 3])         # 返回 5
+open("file.txt").read() # 读取文件`
+  },
+  {
+    id: 'system',
+    icon: '⚙️',
+    name: '操作系统 API',
+    target: '操作系统内核',
+    comm: '系统调用',
+    latency: '微秒级',
+    scenarios: '文件操作、进程管理',
+    example: `with open("file.txt", "r") as f:
+    content = f.read()
+
+subprocess.run(["ls", "-l"])`
+  },
+  {
+    id: 'web',
+    icon: '🌐',
+    name: 'Web API',
+    target: '远程服务器',
+    comm: 'HTTP 请求',
+    latency: '毫秒级',
+    scenarios: 'AI 调用、数据获取',
+    example: `requests.post(
+    "https://api.deepseek.com/v1/chat/completions",
+    json={"model": "deepseek-chat", "messages": [...]}
+)`
+  }
+]
+
+const currentType = computed(() => {
+  return types.find((t) => t.id === active.value) || types[0]
+})
+</script>
+
+<style scoped>
+.api-types-demo {
+  margin: 20px 0;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg-soft);
+  overflow: hidden;
+}
+
+.switch-bar {
+  display: flex;
+  gap: 0;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.switch-bar button {
+  flex: 1;
+  padding: 10px 16px;
+  background: var(--vp-c-bg);
+  border: none;
+  border-right: 1px solid var(--vp-c-divider);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s;
+  color: var(--vp-c-text-2);
+}
+
+.switch-bar button:last-child {
+  border-right: none;
+}
+
+.switch-bar button:hover {
+  background: var(--vp-c-bg-mute);
+}
+
+.switch-bar button.active {
+  background: var(--vp-c-brand);
+  color: white;
+}
+
+.display-area {
+  padding: 16px;
+  background: var(--vp-c-bg);
+}
+
+.info-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+@media (max-width: 768px) {
+  .info-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.info-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 10px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+}
+
+.label {
+  font-size: 10px;
+  color: var(--vp-c-text-3);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.value {
+  font-size: 12px;
+  color: var(--vp-c-text-1);
+  font-weight: 500;
+}
+
+.code-preview {
+  background: #0a0a0a;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.code-header {
+  padding: 8px 12px;
+  background: #18181b;
+  color: #71717a;
+  font-size: 11px;
+  font-weight: 600;
+  border-bottom: 1px solid #27272a;
+}
+
+.code-preview pre {
+  margin: 0;
+  padding: 12px;
+  color: #e4e4e7;
+  font-size: 11px;
+  line-height: 1.5;
+  overflow-x: auto;
+}
+
+.code-preview code {
+  font-family: 'Menlo', 'Monaco', monospace;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/api-intro/FunctionApiDemo.vue b/docs/.vitepress/theme/components/appendix/api-intro/FunctionApiDemo.vue
index bf800f9..c8c3b7e 100644
--- a/docs/.vitepress/theme/components/appendix/api-intro/FunctionApiDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/api-intro/FunctionApiDemo.vue
@@ -53,10 +53,8 @@ result = <span class="func">greet</span>(<span class="str">"张三"</span>)</cod
 
     <div class="info-box">
       <strong>核心思想：</strong>
-      <span
-        >你不需要知道函数内部怎么实现，只需要知道怎么调用它。这就是 API
-        的本质。</span
-      >
+      <span>你不需要知道函数内部怎么实现，只需要知道怎么调用它。这就是 API
+        的本质。</span>
     </div>
   </div>
 </template>
diff --git a/docs/.vitepress/theme/components/appendix/api-intro/HttpMethodsDemo.vue b/docs/.vitepress/theme/components/appendix/api-intro/HttpMethodsDemo.vue
new file mode 100644
index 0000000..22594c9
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/api-intro/HttpMethodsDemo.vue
@@ -0,0 +1,310 @@
+<template>
+  <div class="http-methods-demo">
+    <div class="methods-grid">
+      <div
+        v-for="method in methods"
+        :key="method.id"
+        :class="['method-card', method.id, { active: active === method.id }]"
+        @click="active = method.id"
+      >
+        <span class="method-badge">{{ method.id }}</span>
+        <div class="method-info">
+          <div class="method-name">{{ method.name }}</div>
+          <div class="method-use">{{ method.use }}</div>
+        </div>
+        <div class="method-flags">
+          <span :class="['flag', method.idempotent ? 'yes' : 'no']">
+            {{ method.idempotent ? '幂等' : '不幂等' }}
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <div class="method-detail">
+      <div class="detail-header">
+        <span :class="['detail-badge', currentMethod.id]">{{
+          currentMethod.id
+        }}</span>
+        <span class="detail-title">{{ currentMethod.name }} - {{ currentMethod.use }}</span>
+      </div>
+      <div class="detail-desc">{{ currentMethod.desc }}</div>
+      <div class="detail-analogy">
+        <span class="analogy-label">餐厅类比:</span>
+        <span class="analogy-text">{{ currentMethod.analogy }}</span>
+      </div>
+      <div class="detail-code">
+        <pre><code>{{ currentMethod.example }}</code></pre>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const active = ref('get')
+
+const methods = [
+  {
+    id: 'get',
+    name: '获取',
+    use: '查询数据',
+    idempotent: true,
+    desc: '从服务器获取资源,不会修改任何数据',
+    analogy: '"服务员,菜单给我看看"',
+    example: `GET /api/users           # 获取用户列表
+GET /api/users/123       # 获取单个用户
+GET /api/products?cat=phone  # 查询手机商品`
+  },
+  {
+    id: 'post',
+    name: '创建',
+    use: '新增数据',
+    idempotent: false,
+    desc: '向服务器提交数据,创建新资源',
+    analogy: '"给我来份宫保鸡丁"',
+    example: `POST /api/users
+Body: {"name": "张三", "email": "zhang@example.com"}
+
+POST /api/orders
+Body: {"items": [{"id": 1, "qty": 2}]}`
+  },
+  {
+    id: 'put',
+    name: '全量更新',
+    use: '替换资源',
+    idempotent: true,
+    desc: '用新数据完整替换旧资源',
+    analogy: '"把宫保鸡丁改成糖醋里脊"',
+    example: `PUT /api/users/123
+Body: {"name": "李四", "email": "li@example.com", "age": 25}
+# 注意:必须提供所有字段`
+  },
+  {
+    id: 'patch',
+    name: '部分更新',
+    use: '修改字段',
+    idempotent: false,
+    desc: '只修改资源的部分字段',
+    analogy: '"宫保鸡丁不要放花生"',
+    example: `PATCH /api/users/123
+Body: {"name": "王五"}
+# 只修改 name,其他字段保持不变`
+  },
+  {
+    id: 'delete',
+    name: '删除',
+    use: '删除资源',
+    idempotent: true,
+    desc: '从服务器删除资源',
+    analogy: '"算了,那道菜不要了"',
+    example: `DELETE /api/users/123       # 删除指定用户
+DELETE /api/orders/456      # 取消订单`
+  }
+]
+
+const currentMethod = computed(() => {
+  return methods.find((m) => m.id === active.value) || methods[0]
+})
+</script>
+
+<style scoped>
+.http-methods-demo {
+  margin: 20px 0;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg-soft);
+  overflow: hidden;
+}
+
+.methods-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 0;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+@media (max-width: 768px) {
+  .methods-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 480px) {
+  .methods-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.method-card {
+  padding: 12px 8px;
+  background: var(--vp-c-bg);
+  border-right: 1px solid var(--vp-c-divider);
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  transition: background 0.2s;
+}
+
+.method-card:last-child {
+  border-right: none;
+}
+
+.method-card:hover {
+  background: var(--vp-c-bg-mute);
+}
+
+.method-card.active {
+  background: color-mix(in srgb, var(--vp-c-brand) 10%, transparent);
+}
+
+.method-badge {
+  padding: 3px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 700;
+  min-width: 36px;
+  text-align: center;
+}
+
+.method-card.get .method-badge {
+  background: #22c55e;
+  color: white;
+}
+.method-card.post .method-badge {
+  background: #3b82f6;
+  color: white;
+}
+.method-card.put .method-badge {
+  background: #f59e0b;
+  color: white;
+}
+.method-card.patch .method-badge {
+  background: #8b5cf6;
+  color: white;
+}
+.method-card.delete .method-badge {
+  background: #ef4444;
+  color: white;
+}
+
+.method-info {
+  text-align: center;
+}
+
+.method-name {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+.method-use {
+  font-size: 10px;
+  color: var(--vp-c-text-3);
+}
+
+.method-flags {
+  margin-top: auto;
+}
+
+.flag {
+  font-size: 9px;
+  padding: 2px 6px;
+  border-radius: 3px;
+}
+
+.flag.yes {
+  background: #22c55e22;
+  color: #22c55e;
+}
+
+.flag.no {
+  background: #ef444422;
+  color: #ef4444;
+}
+
+.method-detail {
+  padding: 16px;
+  background: var(--vp-c-bg);
+}
+
+.detail-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.detail-badge {
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.detail-badge.get {
+  background: #22c55e;
+  color: white;
+}
+.detail-badge.post {
+  background: #3b82f6;
+  color: white;
+}
+.detail-badge.put {
+  background: #f59e0b;
+  color: white;
+}
+.detail-badge.patch {
+  background: #8b5cf6;
+  color: white;
+}
+.detail-badge.delete {
+  background: #ef4444;
+  color: white;
+}
+
+.detail-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+.detail-desc {
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+  line-height: 1.5;
+  margin-bottom: 8px;
+}
+
+.detail-analogy {
+  font-size: 12px;
+  color: var(--vp-c-text-3);
+  margin-bottom: 10px;
+}
+
+.analogy-label {
+  font-weight: 600;
+  color: var(--vp-c-text-2);
+}
+
+.detail-code {
+  background: #0a0a0a;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.detail-code pre {
+  margin: 0;
+  padding: 12px;
+  color: #e4e4e7;
+  font-size: 11px;
+  line-height: 1.5;
+  overflow-x: auto;
+}
+
+.detail-code code {
+  font-family: 'Menlo', 'Monaco', monospace;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/api-intro/StatusCodeCategories.vue b/docs/.vitepress/theme/components/appendix/api-intro/StatusCodeCategories.vue
new file mode 100644
index 0000000..710ab58
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/api-intro/StatusCodeCategories.vue
@@ -0,0 +1,226 @@
+<template>
+  <div class="status-categories">
+    <div class="cards-grid">
+      <div
+        v-for="cat in categories"
+        :key="cat.code"
+        :class="['status-card', cat.id]"
+      >
+        <div class="card-header">
+          <span class="card-code">{{ cat.code }}xx</span>
+          <span class="card-name">{{ cat.name }}</span>
+        </div>
+        <div class="card-desc">{{ cat.desc }}</div>
+        <div class="card-examples">
+          <span v-for="ex in cat.examples" :key="ex" class="tag">{{ ex }}</span>
+        </div>
+      </div>
+    </div>
+    <div class="memory-tip">
+      <span class="tip-icon">💡</span>
+      <span class="tip-text">
+        <strong>记忆技巧:</strong>
+        <span class="tip-2">2️⃣ 成功</span> •
+        <span class="tip-3">3️⃣ 重定向</span> •
+        <span class="tip-4">4️⃣ 客户端错</span> •
+        <span class="tip-5">5️⃣ 服务器错</span>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const categories = [
+  {
+    id: 'success',
+    code: '2',
+    name: '成功',
+    desc: '请求被成功接收、理解并处理',
+    examples: ['200 OK', '201 Created', '204 No Content']
+  },
+  {
+    id: 'redirect',
+    code: '3',
+    name: '重定向',
+    desc: '需要进一步操作才能完成请求',
+    examples: ['301 永久移动', '304 未修改', '307 临时重定向']
+  },
+  {
+    id: 'client-error',
+    code: '4',
+    name: '客户端错误',
+    desc: '请求包含错误或无法完成',
+    examples: ['400 参数错误', '401 未认证', '403 无权限', '404 不存在']
+  },
+  {
+    id: 'server-error',
+    code: '5',
+    name: '服务器错误',
+    desc: '服务器无法处理有效请求',
+    examples: ['500 内部错误', '502 网关错误', '503 服务不可用']
+  }
+]
+</script>
+
+<style scoped>
+.status-categories {
+  margin: 20px 0;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg-soft);
+  overflow: hidden;
+}
+
+.cards-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+@media (max-width: 768px) {
+  .cards-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 480px) {
+  .cards-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.status-card {
+  padding: 14px 12px;
+  background: var(--vp-c-bg);
+  border-right: 1px solid var(--vp-c-divider);
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s;
+}
+
+.status-card:last-child {
+  border-right: none;
+}
+
+.status-card.success {
+  border-top: 3px solid #22c55e;
+}
+
+.status-card.redirect {
+  border-top: 3px solid #f59e0b;
+}
+
+.status-card.client-error {
+  border-top: 3px solid #ef4444;
+}
+
+.status-card.server-error {
+  border-top: 3px solid #8b5cf6;
+}
+
+.status-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.card-code {
+  padding: 3px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 700;
+  min-width: 32px;
+  text-align: center;
+}
+
+.success .card-code {
+  background: #22c55e22;
+  color: #22c55e;
+}
+
+.redirect .card-code {
+  background: #f59e0b22;
+  color: #f59e0b;
+}
+
+.client-error .card-code {
+  background: #ef444422;
+  color: #ef4444;
+}
+
+.server-error .card-code {
+  background: #8b5cf622;
+  color: #8b5cf6;
+}
+
+.card-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+.card-desc {
+  font-size: 11px;
+  color: var(--vp-c-text-2);
+  line-height: 1.4;
+  margin-bottom: 8px;
+}
+
+.card-examples {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.tag {
+  padding: 2px 6px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 3px;
+  font-size: 9px;
+  font-family: 'Menlo', 'Monaco', monospace;
+  color: var(--vp-c-text-3);
+}
+
+.memory-tip {
+  padding: 12px 16px;
+  background: var(--vp-c-bg);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.tip-icon {
+  font-size: 16px;
+  flex-shrink: 0;
+}
+
+.tip-text {
+  font-size: 12px;
+  color: var(--vp-c-text-2);
+}
+
+.tip-text strong {
+  color: var(--vp-c-text-1);
+  margin-right: 6px;
+}
+
+.tip-2 {
+  color: #22c55e;
+}
+.tip-3 {
+  color: #f59e0b;
+}
+.tip-4 {
+  color: #ef4444;
+}
+.tip-5 {
+  color: #8b5cf6;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/AdderChainDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/AdderChainDemo.vue
new file mode 100644
index 0000000..68cee55
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/AdderChainDemo.vue
@@ -0,0 +1,719 @@
+<template>
+  <div class="adder-chain-demo">
+    <div class="demo-header">
+      <span class="title">行波进位加法器 (Ripple Carry Adder)</span>
+      <span class="subtitle">多个全加器级联，实现多位二进制加法</span>
+    </div>
+
+    <div class="terms-box">
+      <div class="term-item">
+        <span class="term-name">级联</span>
+        <span class="term-desc">低位 Cout 连接高位 Cin</span>
+      </div>
+      <div class="term-item">
+        <span class="term-name">行波</span>
+        <span class="term-desc">进位像波浪一样逐位传递</span>
+      </div>
+      <div class="term-item">
+        <span class="term-name">溢出</span>
+        <span class="term-desc">最高位产生进位，结果超出范围</span>
+      </div>
+    </div>
+
+    <div class="control-panel">
+      <div class="bit-selector">
+        <span class="selector-label">位数：</span>
+        <button
+          v-for="b in [2, 4, 8]"
+          :key="b"
+          class="bit-btn"
+          :class="{ active: bitCount === b }"
+          @click="bitCount = b"
+        >
+          {{ b }} 位
+        </button>
+      </div>
+      <div class="input-group">
+        <label class="input-label">
+          <span>A =</span>
+          <input
+            v-model.number="inputA"
+            type="number"
+            :min="0"
+            :max="maxValue"
+            class="num-input"
+          />
+        </label>
+        <span class="op">+</span>
+        <label class="input-label">
+          <span>B =</span>
+          <input
+            v-model.number="inputB"
+            type="number"
+            :min="0"
+            :max="maxValue"
+            class="num-input"
+          />
+        </label>
+        <span class="op">=</span>
+        <span class="result">{{ resultDec }}</span>
+        <span v-if="overflow" class="overflow-badge">溢出</span>
+      </div>
+    </div>
+
+    <div class="binary-display">
+      <div class="binary-row">
+        <span class="binary-label">A</span>
+        <span class="binary-bits">
+          <span
+            v-for="(b, i) in bitsA"
+            :key="'a' + i"
+            class="bit"
+            :class="{ hl: activeBit === i }"
+            >{{ b }}</span>
+        </span>
+        <span class="binary-dec">({{ clampedA }})</span>
+      </div>
+      <div class="binary-row">
+        <span class="binary-label">B</span>
+        <span class="binary-bits">
+          <span
+            v-for="(b, i) in bitsB"
+            :key="'b' + i"
+            class="bit"
+            :class="{ hl: activeBit === i }"
+            >{{ b }}</span>
+        </span>
+        <span class="binary-dec">({{ clampedB }})</span>
+      </div>
+      <div class="binary-row result-row">
+        <span class="binary-label">=</span>
+        <span class="binary-bits">
+          <span
+            v-for="(b, i) in bitsSum"
+            :key="'s' + i"
+            class="bit result-bit"
+            :class="{ hl: activeBit === i }"
+            >{{ b }}</span>
+        </span>
+        <span class="binary-dec">({{ resultDec }}{{ overflow ? ' 溢出' : '' }})</span>
+      </div>
+    </div>
+
+    <div class="chain-visualization">
+      <div class="chain-header">
+        <span class="chain-title">加法器级联</span>
+        <span class="chain-hint">悬停查看每位计算详情</span>
+      </div>
+      <div class="chain-row">
+        <div
+          v-for="(stage, idx) in stages"
+          :key="idx"
+          class="stage-box"
+          :class="{ active: activeBit === idx, first: idx === 0 }"
+          @mouseenter="activeBit = idx"
+          @mouseleave="activeBit = null"
+        >
+          <div class="stage-header">
+            <span class="stage-bit">第{{ idx }}位</span>
+            <span class="stage-type">{{
+              idx === 0 ? '半加器' : '全加器'
+            }}</span>
+          </div>
+          <div class="stage-io">
+            <div class="io-row">
+              <span class="io-tag a">A</span>
+              <span class="io-val">{{ stage.a }}</span>
+              <span class="io-tag b">B</span>
+              <span class="io-val">{{ stage.b }}</span>
+              <span v-if="stage.cin !== null" class="io-tag cin">Cin</span>
+              <span v-if="stage.cin !== null" class="io-val">{{
+                stage.cin
+              }}</span>
+            </div>
+            <div class="io-divider"></div>
+            <div class="io-row">
+              <span class="io-tag sum">Sum</span>
+              <span class="io-val result">{{ stage.sum }}</span>
+              <span class="io-tag cout">Cout</span>
+              <span class="io-val" :class="{ carry: stage.cout }">{{
+                stage.cout
+              }}</span>
+            </div>
+          </div>
+          <div v-if="idx < stages.length - 1 && stage.cout" class="carry-arrow">
+            <svg width="20" height="12" viewBox="0 0 20 12">
+              <path
+                d="M 0,6 L 15,6 M 12,3 L 15,6 L 12,9"
+                fill="none"
+                stroke="#d97706"
+                stroke-width="1.5"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="activeBit !== null" class="calculation-box">
+      <div class="calc-title">第 {{ activeBit }} 位计算过程</div>
+      <div class="calc-content">
+        <div class="calc-row">
+          <span class="calc-label">输入：</span>
+          <span class="calc-value">A = {{ stages[activeBit]?.a }}，B = {{ stages[activeBit]?.b
+            }}<span v-if="stages[activeBit]?.cin !== null">，Cin = {{ stages[activeBit]?.cin }}</span></span>
+        </div>
+        <div class="calc-row">
+          <span class="calc-label">本位：</span>
+          <span class="calc-formula">
+            {{ stages[activeBit]?.a }} ⊕ {{ stages[activeBit]?.b }}
+            <span v-if="stages[activeBit]?.cin !== null">
+              ⊕ {{ stages[activeBit]?.cin }}</span>
+            = <strong>{{ stages[activeBit]?.sum }}</strong>
+          </span>
+          <span class="calc-reason">（{{ getSumReason(stages[activeBit]) }}）</span>
+        </div>
+        <div class="calc-row">
+          <span class="calc-label">进位：</span>
+          <span class="calc-formula">
+            {{ stages[activeBit]?.cout ? '产生进位 → 传递给高位' : '无进位' }}
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <div v-else class="calculation-box">
+      <div class="calc-title">整体计算过程</div>
+      <div class="calc-content">
+        <div class="calc-row">
+          <span class="calc-label">输入：</span>
+          <span class="calc-value">A = {{ clampedA }} ({{ bitsA.join('') }})，B = {{ clampedB }} ({{
+              bitsB.join('')
+            }})</span>
+        </div>
+        <div class="calc-row">
+          <span class="calc-label">过程：</span>
+          <span class="calc-formula">从第 0 位开始，逐位计算本位和进位，进位向高位传递</span>
+        </div>
+        <div class="calc-row">
+          <span class="calc-label">结果：</span>
+          <span class="calc-formula">{{ bitsSum.join('') }} = <strong>{{ resultDec }}</strong>{{ overflow ? ' (溢出)' : '' }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="info-box">
+      <strong>核心思想：</strong>
+      进位像波浪一样从最低位逐级传递到最高位，所以叫"行波进位"。位数越多，延迟越大，但电路简单。
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const bitCount = ref(4)
+const inputA = ref(7)
+const inputB = ref(6)
+const activeBit = ref(null)
+
+const maxValue = computed(() => Math.pow(2, bitCount.value) - 1)
+
+function clamp(n) {
+  const v = Number(n)
+  if (Number.isNaN(v)) return 0
+  return Math.max(0, Math.min(maxValue.value, Math.floor(v)))
+}
+
+const clampedA = computed(() => clamp(inputA.value))
+const clampedB = computed(() => clamp(inputB.value))
+
+const bitsA = computed(() =>
+  (clampedA.value >>> 0).toString(2).padStart(bitCount.value, '0').split('')
+)
+
+const bitsB = computed(() =>
+  (clampedB.value >>> 0).toString(2).padStart(bitCount.value, '0').split('')
+)
+
+const stages = computed(() => {
+  const A = clampedA.value
+  const B = clampedB.value
+  const result = []
+  let carryIn = null
+
+  for (let i = 0; i < bitCount.value; i++) {
+    const a = (A >> i) & 1
+    const b = (B >> i) & 1
+    let sum, carryOut
+
+    if (carryIn === null) {
+      sum = a ^ b
+      carryOut = a & b
+    } else {
+      const xor1 = a ^ b
+      sum = xor1 ^ carryIn
+      carryOut = (a & b) | (carryIn & xor1)
+    }
+
+    result.push({
+      bitPos: i,
+      a,
+      b,
+      cin: carryIn,
+      sum,
+      cout: carryOut
+    })
+    carryIn = carryOut
+  }
+
+  return result
+})
+
+const bitsSum = computed(() => {
+  const S = stages.value.reduce((acc, s, i) => acc + (s.sum << i), 0)
+  return (S >>> 0).toString(2).padStart(bitCount.value, '0').split('')
+})
+
+const overflow = computed(() => {
+  return (
+    stages.value.length > 0 && stages.value[stages.value.length - 1].cout === 1
+  )
+})
+
+const resultDec = computed(() =>
+  stages.value.reduce((acc, s, i) => acc + (s.sum << i), 0)
+)
+
+function getSumReason(stage) {
+  if (!stage) return ''
+  const inputs = [stage.a, stage.b]
+  if (stage.cin !== null) inputs.push(stage.cin)
+  const ones = inputs.filter((x) => x === 1).length
+  if (stage.sum === 1) {
+    return ones % 2 === 1 ? '奇数个 1' : '偶数个 1'
+  } else {
+    return ones % 2 === 0 ? '偶数个 1' : '奇数个 1'
+  }
+}
+</script>
+
+<style scoped>
+.adder-chain-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg-soft);
+  padding: 1rem 1.2rem;
+  margin: 1rem 0;
+}
+
+.demo-header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  margin-bottom: 0.75rem;
+}
+
+.title {
+  font-size: 0.9rem;
+  font-weight: bold;
+  color: var(--vp-c-text-1);
+}
+
+.subtitle {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-3);
+}
+
+.terms-box {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+  padding: 0.5rem;
+  background: var(--vp-c-bg-alt);
+  border-radius: 6px;
+}
+
+.term-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.term-name {
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: var(--vp-c-brand-1);
+}
+
+.term-desc {
+  font-size: 0.68rem;
+  color: var(--vp-c-text-3);
+  line-height: 1.3;
+}
+
+.control-panel {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  align-items: center;
+  margin-bottom: 0.75rem;
+  padding: 0.5rem 0.75rem;
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+}
+
+.bit-selector {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+
+.selector-label {
+  font-size: 0.78rem;
+  color: var(--vp-c-text-2);
+  font-weight: 500;
+}
+
+.bit-btn {
+  padding: 0.25rem 0.6rem;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+  background: var(--vp-c-bg-alt);
+  color: var(--vp-c-text-2);
+  font-size: 0.75rem;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.bit-btn.active {
+  background: var(--vp-c-brand-1);
+  color: white;
+  border-color: var(--vp-c-brand-1);
+}
+
+.input-group {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.input-label {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.78rem;
+  color: var(--vp-c-text-2);
+}
+
+.num-input {
+  width: 3.5rem;
+  padding: 0.2rem 0.4rem;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+  font-size: 0.85rem;
+  background: var(--vp-c-bg-alt);
+  color: var(--vp-c-text-1);
+}
+
+.op {
+  font-weight: bold;
+  color: var(--vp-c-text-3);
+}
+
+.result {
+  font-weight: bold;
+  color: var(--vp-c-brand-1);
+  font-size: 1rem;
+}
+
+.overflow-badge {
+  font-size: 0.65rem;
+  padding: 0.15rem 0.4rem;
+  background: #fef3c7;
+  color: #d97706;
+  border-radius: 3px;
+  font-weight: 600;
+}
+
+.binary-display {
+  background: var(--vp-c-bg-alt);
+  border-radius: 6px;
+  padding: 0.5rem 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.binary-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.2rem;
+  font-size: 0.82rem;
+}
+
+.binary-label {
+  color: var(--vp-c-text-2);
+  min-width: 1.5rem;
+  font-weight: 600;
+}
+
+.binary-bits {
+  display: flex;
+  gap: 0.15rem;
+  font-family: 'JetBrains Mono', monospace;
+}
+
+.bit {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.2rem;
+  height: 1.4rem;
+  border-radius: 3px;
+  transition: all 0.15s;
+}
+
+.bit.hl {
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand-1);
+  font-weight: bold;
+}
+
+.result-bit {
+  font-weight: 600;
+}
+
+.binary-dec {
+  color: var(--vp-c-text-3);
+  font-size: 0.72rem;
+  margin-left: 0.25rem;
+}
+
+.result-row .binary-bits {
+  color: var(--vp-c-green-1, #16a34a);
+}
+
+.chain-visualization {
+  margin-bottom: 0.75rem;
+}
+
+.chain-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.4rem;
+}
+
+.chain-title {
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: var(--vp-c-text-2);
+}
+
+.chain-hint {
+  font-size: 0.68rem;
+  color: var(--vp-c-text-3);
+}
+
+.chain-row {
+  display: flex;
+  gap: 0.3rem;
+  overflow-x: auto;
+  padding-bottom: 0.25rem;
+}
+
+.stage-box {
+  flex-shrink: 0;
+  width: 5.5rem;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  padding: 0.4rem;
+  cursor: pointer;
+  transition: all 0.15s;
+  position: relative;
+}
+
+.stage-box.active {
+  border-color: var(--vp-c-brand-1);
+  box-shadow: 0 0 0 1px var(--vp-c-brand-1);
+}
+
+.stage-box.first {
+  border-color: var(--vp-c-brand-soft);
+}
+
+.stage-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.3rem;
+  padding-bottom: 0.2rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.stage-bit {
+  font-size: 0.68rem;
+  font-weight: 600;
+  color: var(--vp-c-text-2);
+}
+
+.stage-type {
+  font-size: 0.6rem;
+  padding: 0.1rem 0.25rem;
+  border-radius: 3px;
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand-1);
+}
+
+.stage-box.first .stage-type {
+  background: rgba(139, 92, 246, 0.15);
+  color: #8b5cf6;
+}
+
+.stage-io {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.io-row {
+  display: flex;
+  align-items: center;
+  gap: 0.15rem;
+  font-size: 0.72rem;
+}
+
+.io-tag {
+  font-size: 0.55rem;
+  font-weight: 600;
+  padding: 0.05rem 0.2rem;
+  border-radius: 2px;
+  color: white;
+}
+
+.io-tag.a {
+  background: var(--vp-c-brand-1);
+}
+.io-tag.b {
+  background: #8b5cf6;
+}
+.io-tag.cin {
+  background: #d97706;
+}
+.io-tag.sum {
+  background: var(--vp-c-green-1, #16a34a);
+}
+.io-tag.cout {
+  background: #d97706;
+}
+
+.io-val {
+  font-family: 'JetBrains Mono', monospace;
+  color: var(--vp-c-text-1);
+}
+
+.io-val.result {
+  font-weight: 600;
+  color: var(--vp-c-green-1, #16a34a);
+}
+
+.io-val.carry {
+  color: #d97706;
+  font-weight: 600;
+}
+
+.io-divider {
+  height: 1px;
+  background: var(--vp-c-divider);
+  margin: 0.15rem 0;
+}
+
+.carry-arrow {
+  position: absolute;
+  right: -1.3rem;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.calculation-box {
+  margin-top: 0.75rem;
+  padding: 0.6rem 0.8rem;
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+}
+
+.calc-title {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--vp-c-text-2);
+  margin-bottom: 0.4rem;
+}
+
+.calc-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.calc-row {
+  display: flex;
+  align-items: baseline;
+  gap: 0.3rem;
+  font-size: 0.78rem;
+}
+
+.calc-label {
+  color: var(--vp-c-text-3);
+  min-width: 3rem;
+}
+
+.calc-formula {
+  font-family: 'JetBrains Mono', monospace;
+  color: var(--vp-c-text-1);
+}
+
+.calc-formula strong {
+  color: var(--vp-c-brand-1);
+}
+
+.calc-reason {
+  color: var(--vp-c-text-3);
+  font-size: 0.72rem;
+}
+
+.info-box {
+  display: flex;
+  gap: 0.25rem;
+  margin-top: 0.75rem;
+  padding: 0.6rem 0.8rem;
+  background: var(--vp-c-bg-alt);
+  border-radius: 6px;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.4;
+}
+
+.info-box strong {
+  white-space: nowrap;
+  flex-shrink: 0;
+  color: var(--vp-c-text-1);
+}
+
+@media (max-width: 600px) {
+  .control-panel {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .chain-row {
+    gap: 0.2rem;
+  }
+  .stage-box {
+    width: 5rem;
+  }
+  .terms-box {
+    flex-direction: column;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/CompleteAdderDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/CompleteAdderDemo.vue
new file mode 100644
index 0000000..7a65e78
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/CompleteAdderDemo.vue
@@ -0,0 +1,1219 @@
+<template>
+  <div class="complete-adder-demo">
+    <div class="demo-header">
+      <span class="title">完整加法器演示</span>
+      <span class="subtitle">从逻辑门到多位加法 ── 层层抽象，逐级封装</span>
+    </div>
+
+    <div class="layer-tabs">
+      <button
+        v-for="layer in layers"
+        :key="layer.id"
+        class="layer-tab"
+        :class="{ active: currentLayer === layer.id }"
+        @click="currentLayer = layer.id"
+      >
+        {{ layer.name }}
+      </button>
+    </div>
+
+    <div v-if="currentLayer === 'gates'" class="layer-panel">
+      <div class="panel-title">第一层：逻辑门</div>
+      <div class="panel-desc">最基础的运算单元，每个门执行一种布尔运算</div>
+
+      <div class="terms-box">
+        <div class="term-item">
+          <span class="term-name">AND (与门)</span>
+          <span class="term-desc">全 1 为 1</span>
+        </div>
+        <div class="term-item">
+          <span class="term-name">OR (或门)</span>
+          <span class="term-desc">有 1 为 1</span>
+        </div>
+        <div class="term-item">
+          <span class="term-name">XOR (异或门)</span>
+          <span class="term-desc">不同为 1</span>
+        </div>
+      </div>
+
+      <div class="gates-showcase">
+        <div
+          v-for="gate in gates"
+          :key="gate.name"
+          class="gate-demo"
+          :class="{ active: gateActive === gate.name }"
+          @click="gateActive = gate.name"
+        >
+          <div class="gate-symbol">{{ gate.symbol }}</div>
+          <div class="gate-info">
+            <span class="gate-name">{{ gate.name }} ({{ gate.cn }})</span>
+            <span class="gate-formula">{{ gate.formula }}</span>
+          </div>
+          <div class="gate-mini-truth">
+            <span
+              v-for="(r, i) in gate.truth"
+              :key="i"
+              class="truth-dot"
+              :class="{ one: r }"
+              >{{ r }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="info-box">
+        <strong>核心思想：</strong>
+        逻辑门把电压高低（0/1）变成布尔运算（真/假），是硬件实现数学的起点。
+      </div>
+    </div>
+
+    <div v-if="currentLayer === 'half'" class="layer-panel">
+      <div class="panel-title">第二层：半加器</div>
+      <div class="panel-desc">
+        用 XOR + AND 组合，实现 1 位加法（无进位输入）
+      </div>
+
+      <div class="terms-box">
+        <div class="term-item">
+          <span class="term-name">本位 (Sum)</span>
+          <span class="term-desc">当前位的计算结果，不考虑外部进位</span>
+        </div>
+        <div class="term-item">
+          <span class="term-name">进位 (Carry)</span>
+          <span class="term-desc">当两位都是 1 时，向更高位"借位"</span>
+        </div>
+      </div>
+
+      <div class="circuit-container">
+        <div class="inputs">
+          <div class="input-line">
+            <button class="toggle-btn" :class="{ on: haA }" @click="haA = !haA">
+              {{ haA ? '1' : '0' }}
+            </button>
+            <span class="label">输入 A</span>
+          </div>
+          <div class="input-line">
+            <button class="toggle-btn" :class="{ on: haB }" @click="haB = !haB">
+              {{ haB ? '1' : '0' }}
+            </button>
+            <span class="label">输入 B</span>
+          </div>
+        </div>
+
+        <div class="wires">
+          <svg class="wire-svg" viewBox="0 0 80 120" preserveAspectRatio="none">
+            <path
+              d="M 0,30 C 40,30 40,35 80,35"
+              fill="none"
+              :stroke="haA ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
+              stroke-width="2"
+            />
+            <path
+              d="M 0,30 L 20,30 L 20,85 L 80,85"
+              fill="none"
+              :stroke="haA ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
+              stroke-width="2"
+            />
+            <path
+              d="M 0,90 C 40,90 40,55 80,55"
+              fill="none"
+              :stroke="haB ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
+              stroke-width="2"
+            />
+            <path
+              d="M 0,90 L 30,90 L 30,105 L 80,105"
+              fill="none"
+              :stroke="haB ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
+              stroke-width="2"
+            />
+            <circle
+              cx="20"
+              cy="30"
+              r="3"
+              :fill="haA ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
+            />
+            <circle
+              cx="30"
+              cy="90"
+              r="3"
+              :fill="haB ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
+            />
+          </svg>
+        </div>
+
+        <div class="gates">
+          <div class="gate-box" :class="{ active: haSum }">
+            <div class="gate-header">
+              <span class="gate-name">XOR</span>
+              <span class="gate-cn">异或门</span>
+            </div>
+            <div class="gate-formula">A ⊕ B</div>
+            <div class="gate-desc">不同为 1 → 本位</div>
+          </div>
+          <div class="gate-box" :class="{ active: haCarry }">
+            <div class="gate-header">
+              <span class="gate-name">AND</span>
+              <span class="gate-cn">与门</span>
+            </div>
+            <div class="gate-formula">A ∧ B</div>
+            <div class="gate-desc">全 1 为 1 → 进位</div>
+          </div>
+        </div>
+
+        <div class="wires outputs-wires">
+          <svg class="wire-svg" viewBox="0 0 40 120" preserveAspectRatio="none">
+            <line
+              x1="0"
+              y1="45"
+              x2="40"
+              y2="45"
+              :stroke="
+                haSum ? 'var(--vp-c-green-1, #16a34a)' : 'var(--vp-c-text-3)'
+              "
+              stroke-width="2"
+            />
+            <line
+              x1="0"
+              y1="95"
+              x2="40"
+              y2="95"
+              :stroke="haCarry ? '#d97706' : 'var(--vp-c-text-3)'"
+              stroke-width="2"
+            />
+          </svg>
+        </div>
+
+        <div class="outputs">
+          <div class="output-line" :class="{ active: haSum }">
+            <span class="label">本位</span>
+            <span class="out-val s-val">{{ haSum ? '1' : '0' }}</span>
+          </div>
+          <div class="output-line" :class="{ active: haCarry }">
+            <span class="label">进位</span>
+            <span class="out-val c-val">{{ haCarry ? '1' : '0' }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="calculation-box">
+        <div class="calc-title">计算过程</div>
+        <div class="calc-content">
+          <div class="calc-row">
+            <span class="calc-label">输入：</span>
+            <span class="calc-value">A = {{ haA ? '1' : '0' }}，B = {{ haB ? '1' : '0' }}</span>
+          </div>
+          <div class="calc-row">
+            <span class="calc-label">本位：</span>
+            <span class="calc-formula">A ⊕ B = {{ haA ? '1' : '0' }} ⊕ {{ haB ? '1' : '0' }} =
+              <strong>{{ haSum ? '1' : '0' }}</strong></span>
+            <span class="calc-reason">（{{ haA !== haB ? '不同' : '相同' }}）</span>
+          </div>
+          <div class="calc-row">
+            <span class="calc-label">进位：</span>
+            <span class="calc-formula">A ∧ B = {{ haA ? '1' : '0' }} ∧ {{ haB ? '1' : '0' }} =
+              <strong>{{ haCarry ? '1' : '0' }}</strong></span>
+            <span class="calc-reason">（{{ haA && haB ? '全为 1' : '不全为 1' }}）</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="info-box">
+        <strong>核心思想：</strong>
+        半加器用 XOR 算"本位和"，用 AND
+        算"进位"。它是最小的加法单元，但无法处理来自低位的进位。
+      </div>
+    </div>
+
+    <div v-if="currentLayer === 'full'" class="layer-panel">
+      <div class="panel-title">第三层：全加器</div>
+      <div class="panel-desc">用两个半加器 + OR 门，处理进位输入</div>
+
+      <div class="terms-box">
+        <div class="term-item">
+          <span class="term-name">Cin (进位输入)</span>
+          <span class="term-desc">来自低位的进位信号</span>
+        </div>
+        <div class="term-item">
+          <span class="term-name">Sum (本位)</span>
+          <span class="term-desc">三位异或的结果</span>
+        </div>
+        <div class="term-item">
+          <span class="term-name">Cout (进位输出)</span>
+          <span class="term-desc">向高位的进位信号</span>
+        </div>
+      </div>
+
+      <div class="circuit-container">
+        <div class="inputs">
+          <div class="input-line">
+            <button class="toggle-btn" :class="{ on: faA }" @click="faA = !faA">
+              {{ faA ? '1' : '0' }}
+            </button>
+            <span class="label">A</span>
+          </div>
+          <div class="input-line">
+            <button class="toggle-btn" :class="{ on: faB }" @click="faB = !faB">
+              {{ faB ? '1' : '0' }}
+            </button>
+            <span class="label">B</span>
+          </div>
+          <div class="input-line">
+            <button
+              class="toggle-btn cin-btn"
+              :class="{ on: faCin }"
+              @click="faCin = !faCin"
+            >
+              {{ faCin ? '1' : '0' }}
+            </button>
+            <span class="label">Cin</span>
+          </div>
+        </div>
+
+        <div class="wires">
+          <svg
+            class="wire-svg"
+            viewBox="0 0 100 160"
+            preserveAspectRatio="none"
+          >
+            <path
+              d="M 0,30 C 30,30 30,40 60,40"
+              fill="none"
+              :stroke="faA ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
+              stroke-width="2"
+            />
+            <path
+              d="M 0,30 L 15,30 L 15,100 L 60,100"
+              fill="none"
+              :stroke="faA ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
+              stroke-width="2"
+            />
+            <path
+              d="M 0,80 C 30,80 30,55 60,55"
+              fill="none"
+              :stroke="faB ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
+              stroke-width="2"
+            />
+            <path
+              d="M 0,80 L 25,80 L 25,115 L 60,115"
+              fill="none"
+              :stroke="faB ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
+              stroke-width="2"
+            />
+            <path
+              d="M 0,130 C 30,130 30,130 60,130"
+              fill="none"
+              :stroke="faCin ? '#d97706' : 'var(--vp-c-text-3)'"
+              stroke-width="2"
+            />
+            <circle
+              cx="15"
+              cy="30"
+              r="3"
+              :fill="faA ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
+            />
+            <circle
+              cx="25"
+              cy="80"
+              r="3"
+              :fill="faB ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
+            />
+          </svg>
+        </div>
+
+        <div class="gates-grid">
+          <div class="gate-box sm" :class="{ active: faXor1 }">
+            <span class="gate-name">XOR</span>
+            <span class="gate-out">{{ faXor1 ? '1' : '0' }}</span>
+          </div>
+          <div class="gate-box sm" :class="{ active: faCarry1 }">
+            <span class="gate-name">AND</span>
+            <span class="gate-out">{{ faCarry1 ? '1' : '0' }}</span>
+          </div>
+          <div class="gate-box sm" :class="{ active: faSum }">
+            <span class="gate-name">XOR</span>
+            <span class="gate-out">{{ faSum ? '1' : '0' }}</span>
+          </div>
+          <div class="gate-box sm" :class="{ active: faCarryOut }">
+            <span class="gate-name">OR</span>
+            <span class="gate-out">{{ faCarryOut ? '1' : '0' }}</span>
+          </div>
+        </div>
+
+        <div class="wires outputs-wires">
+          <svg class="wire-svg" viewBox="0 0 40 160" preserveAspectRatio="none">
+            <line
+              x1="0"
+              y1="48"
+              x2="40"
+              y2="48"
+              :stroke="
+                faSum ? 'var(--vp-c-green-1, #16a34a)' : 'var(--vp-c-text-3)'
+              "
+              stroke-width="2"
+            />
+            <line
+              x1="0"
+              y1="115"
+              x2="40"
+              y2="115"
+              :stroke="faCarryOut ? '#d97706' : 'var(--vp-c-text-3)'"
+              stroke-width="2"
+            />
+          </svg>
+        </div>
+
+        <div class="outputs">
+          <div class="output-line" :class="{ active: faSum }">
+            <span class="label">Sum</span>
+            <span class="out-val s-val">{{ faSum ? '1' : '0' }}</span>
+          </div>
+          <div class="output-line" :class="{ active: faCarryOut }">
+            <span class="label">Cout</span>
+            <span class="out-val c-val">{{ faCarryOut ? '1' : '0' }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="calculation-box">
+        <div class="calc-title">计算过程</div>
+        <div class="calc-content">
+          <div class="calc-row">
+            <span class="calc-label">输入：</span>
+            <span class="calc-value">A={{ faA ? '1' : '0' }} B={{ faB ? '1' : '0' }} Cin={{
+                faCin ? '1' : '0'
+              }}</span>
+          </div>
+          <div class="calc-row">
+            <span class="calc-label">中间：</span>
+            <span class="calc-formula">xor1 = A ⊕ B = <strong>{{ faXor1 ? '1' : '0' }}</strong></span>
+          </div>
+          <div class="calc-row">
+            <span class="calc-label">本位：</span>
+            <span class="calc-formula">Sum = xor1 ⊕ Cin = <strong>{{ faSum ? '1' : '0' }}</strong></span>
+          </div>
+          <div class="calc-row">
+            <span class="calc-label">进位：</span>
+            <span class="calc-formula">Cout = (A∧B) ∨ (xor1∧Cin) =
+              <strong>{{ faCarryOut ? '1' : '0' }}</strong></span>
+          </div>
+        </div>
+      </div>
+
+      <div class="info-box">
+        <strong>核心思想：</strong>
+        全加器 = 两个半加器 + 一个 OR
+        门。它能处理来自低位的进位，是构建多位加法器的基础。
+      </div>
+    </div>
+
+    <div v-if="currentLayer === 'multi'" class="layer-panel">
+      <div class="panel-title">第四层：4 位加法器</div>
+      <div class="panel-desc">4 个全加器级联，实现 0-15 范围的加法</div>
+
+      <div class="terms-box">
+        <div class="term-item">
+          <span class="term-name">级联</span>
+          <span class="term-desc">低位 Cout 连接高位 Cin</span>
+        </div>
+        <div class="term-item">
+          <span class="term-name">行波</span>
+          <span class="term-desc">进位像波浪一样逐位传递</span>
+        </div>
+        <div class="term-item">
+          <span class="term-name">溢出</span>
+          <span class="term-desc">最高位产生进位</span>
+        </div>
+      </div>
+
+      <div class="multi-control">
+        <label class="multi-input">
+          <span>A =</span>
+          <input v-model.number="multiA" type="number" min="0" max="15" />
+        </label>
+        <span class="multi-op">+</span>
+        <label class="multi-input">
+          <span>B =</span>
+          <input v-model.number="multiB" type="number" min="0" max="15" />
+        </label>
+        <span class="multi-op">=</span>
+        <span class="multi-result">{{ multiResult }}</span>
+        <span v-if="multiOverflow" class="multi-overflow">溢出</span>
+      </div>
+
+      <div class="multi-binary">
+        <div class="multi-row">
+          <span class="multi-label">A:</span>
+          <span class="multi-bits">{{ multiBitsA }}</span>
+        </div>
+        <div class="multi-row">
+          <span class="multi-label">B:</span>
+          <span class="multi-bits">{{ multiBitsB }}</span>
+        </div>
+        <div class="multi-row result">
+          <span class="multi-label">=:</span>
+          <span class="multi-bits">{{ multiBitsSum }}</span>
+        </div>
+      </div>
+
+      <div class="multi-chain">
+        <div
+          v-for="(s, i) in multiStages"
+          :key="i"
+          class="multi-stage"
+          :class="{ highlight: multiHover === i }"
+          @mouseenter="multiHover = i"
+          @mouseleave="multiHover = null"
+        >
+          <span class="multi-stage-bit">位{{ i }}</span>
+          <span class="multi-stage-io">{{ s.a }}+{{ s.b }}<span v-if="i > 0">+{{ s.cin }}</span></span>
+          <span class="multi-stage-out">={{ s.sum }}<span v-if="s.cout">C</span></span>
+        </div>
+      </div>
+
+      <div class="calculation-box">
+        <div class="calc-title">计算过程</div>
+        <div class="calc-content">
+          <div class="calc-row">
+            <span class="calc-label">输入：</span>
+            <span class="calc-value">A = {{ clampedMultiA }} ({{ multiBitsA }})，B =
+              {{ clampedMultiB }} ({{ multiBitsB }})</span>
+          </div>
+          <div class="calc-row">
+            <span class="calc-label">过程：</span>
+            <span class="calc-formula">从第 0 位开始，逐位计算本位和进位，进位向高位传递</span>
+          </div>
+          <div class="calc-row">
+            <span class="calc-label">结果：</span>
+            <span class="calc-formula">{{ multiBitsSum }} = <strong>{{ multiResult }}</strong>{{ multiOverflow ? ' (溢出)' : '' }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="info-box">
+        <strong>核心思想：</strong>
+        进位从最低位"波纹式"传递到最高位，这就是"行波进位加法器"。位数越多，延迟越大。
+      </div>
+    </div>
+
+    <div class="summary-box">
+      <div class="summary-title">抽象层级总结</div>
+      <div class="summary-flow">
+        <div class="summary-item">
+          <span class="summary-icon">◇</span>
+          <span class="summary-name">逻辑门</span>
+        </div>
+        <span class="summary-arrow">→</span>
+        <div class="summary-item">
+          <span class="summary-icon">⊞</span>
+          <span class="summary-name">半加器</span>
+        </div>
+        <span class="summary-arrow">→</span>
+        <div class="summary-item">
+          <span class="summary-icon">⊞⊞</span>
+          <span class="summary-name">全加器</span>
+        </div>
+        <span class="summary-arrow">→</span>
+        <div class="summary-item">
+          <span class="summary-icon">🔲</span>
+          <span class="summary-name">多位加法器</span>
+        </div>
+        <span class="summary-arrow">→</span>
+        <div class="summary-item">
+          <span class="summary-icon">🧠</span>
+          <span class="summary-name">ALU/CPU</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const currentLayer = ref('gates')
+const gateActive = ref('XOR')
+
+const layers = [
+  { id: 'gates', name: '逻辑门' },
+  { id: 'half', name: '半加器' },
+  { id: 'full', name: '全加器' },
+  { id: 'multi', name: '多位加法' }
+]
+
+const gates = [
+  {
+    name: 'AND',
+    cn: '与门',
+    symbol: '&',
+    formula: 'A ∧ B',
+    truth: [0, 0, 0, 1]
+  },
+  {
+    name: 'OR',
+    cn: '或门',
+    symbol: '≥1',
+    formula: 'A ∨ B',
+    truth: [0, 1, 1, 1]
+  },
+  {
+    name: 'XOR',
+    cn: '异或门',
+    symbol: '=1',
+    formula: 'A ⊕ B',
+    truth: [0, 1, 1, 0]
+  },
+  { name: 'NOT', cn: '非门', symbol: '1', formula: '¬A', truth: [1, 0] }
+]
+
+const haA = ref(false)
+const haB = ref(true)
+const haSum = computed(() => haA.value !== haB.value)
+const haCarry = computed(() => haA.value && haB.value)
+
+const faA = ref(true)
+const faB = ref(true)
+const faCin = ref(false)
+const faXor1 = computed(() => faA.value !== faB.value)
+const faCarry1 = computed(() => faA.value && faB.value)
+const faCarry2 = computed(() => faXor1.value && faCin.value)
+const faSum = computed(() => faXor1.value !== faCin.value)
+const faCarryOut = computed(() => faCarry1.value || faCarry2.value)
+
+const multiA = ref(7)
+const multiB = ref(6)
+const multiHover = ref(null)
+
+function clampMulti(n) {
+  const v = Number(n)
+  if (Number.isNaN(v)) return 0
+  return Math.max(0, Math.min(15, Math.floor(v)))
+}
+
+const clampedMultiA = computed(() => clampMulti(multiA.value))
+const clampedMultiB = computed(() => clampMulti(multiB.value))
+
+const multiBitsA = computed(() =>
+  clampedMultiA.value.toString(2).padStart(4, '0')
+)
+const multiBitsB = computed(() =>
+  clampedMultiB.value.toString(2).padStart(4, '0')
+)
+
+const multiStages = computed(() => {
+  const A = clampedMultiA.value
+  const B = clampedMultiB.value
+  const result = []
+  let cin = 0
+  for (let i = 0; i < 4; i++) {
+    const a = (A >> i) & 1
+    const b = (B >> i) & 1
+    const xor1 = a ^ b
+    const sum = xor1 ^ cin
+    const cout = (a & b) | (cin & xor1)
+    result.push({ a, b, cin: i > 0 ? cin : null, sum, cout })
+    cin = cout
+  }
+  return result
+})
+
+const multiBitsSum = computed(() => {
+  const S = multiStages.value.reduce((acc, s, i) => acc + (s.sum << i), 0)
+  return S.toString(2).padStart(4, '0')
+})
+
+const multiResult = computed(() =>
+  multiStages.value.reduce((acc, s, i) => acc + (s.sum << i), 0)
+)
+
+const multiOverflow = computed(() => multiStages.value[3]?.cout === 1)
+</script>
+
+<style scoped>
+.complete-adder-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg-soft);
+  padding: 1rem 1.2rem;
+  margin: 1rem 0;
+}
+
+.demo-header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  margin-bottom: 0.75rem;
+}
+
+.title {
+  font-size: 0.9rem;
+  font-weight: bold;
+  color: var(--vp-c-text-1);
+}
+
+.subtitle {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-3);
+}
+
+.layer-tabs {
+  display: flex;
+  gap: 0.25rem;
+  margin-bottom: 0.75rem;
+}
+
+.layer-tab {
+  padding: 0.4rem 0.8rem;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  background: var(--vp-c-bg);
+  color: var(--vp-c-text-2);
+  font-size: 0.78rem;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.layer-tab.active {
+  background: var(--vp-c-brand-1);
+  color: white;
+  border-color: var(--vp-c-brand-1);
+}
+
+.layer-panel {
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+  padding: 0.75rem;
+}
+
+.panel-title {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.2rem;
+}
+
+.panel-desc {
+  font-size: 0.72rem;
+  color: var(--vp-c-text-3);
+  margin-bottom: 0.6rem;
+}
+
+.terms-box {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+  padding: 0.5rem;
+  background: var(--vp-c-bg-alt);
+  border-radius: 6px;
+}
+
+.term-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.term-name {
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: var(--vp-c-brand-1);
+}
+
+.term-desc {
+  font-size: 0.68rem;
+  color: var(--vp-c-text-3);
+  line-height: 1.3;
+}
+
+.gates-showcase {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.5rem;
+  margin-bottom: 0.6rem;
+}
+
+.gate-demo {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0.5rem;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  background: var(--vp-c-bg-alt);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.gate-demo.active {
+  border-color: var(--vp-c-brand-1);
+  box-shadow: 0 0 0 1px var(--vp-c-brand-soft);
+}
+
+.gate-symbol {
+  font-size: 1.2rem;
+  font-weight: bold;
+  color: var(--vp-c-brand-1);
+  margin-bottom: 0.2rem;
+}
+
+.gate-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.1rem;
+  margin-bottom: 0.3rem;
+}
+
+.gate-name {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+.gate-formula {
+  font-size: 0.68rem;
+  color: var(--vp-c-text-3);
+  font-family: 'JetBrains Mono', monospace;
+}
+
+.gate-mini-truth {
+  display: flex;
+  gap: 0.15rem;
+}
+
+.truth-dot {
+  width: 1rem;
+  height: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  font-size: 0.65rem;
+  font-weight: 600;
+  background: var(--vp-c-bg);
+  color: var(--vp-c-text-3);
+}
+
+.truth-dot.one {
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand-1);
+}
+
+.circuit-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
+  padding: 0.75rem;
+  overflow-x: auto;
+}
+
+.inputs,
+.outputs {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  min-width: 5rem;
+  z-index: 2;
+}
+
+.outputs {
+  min-width: 4.5rem;
+}
+
+.input-line,
+.output-line {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.label {
+  font-size: 0.78rem;
+  color: var(--vp-c-text-1);
+}
+
+.toggle-btn {
+  width: 2rem;
+  height: 2rem;
+  border-radius: 4px;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  font-weight: bold;
+  font-family: monospace;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.toggle-btn.on {
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand-1);
+  border-color: var(--vp-c-brand-1);
+}
+
+.toggle-btn.cin-btn.on {
+  background: #fef3c7;
+  color: #d97706;
+  border-color: #d97706;
+}
+
+.out-val {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 4px;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  font-weight: bold;
+  font-family: monospace;
+  font-size: 0.9rem;
+  transition: all 0.2s;
+}
+
+.output-line.active .s-val {
+  background: #dcfce7;
+  color: #16a34a;
+  border-color: #16a34a;
+}
+
+.output-line.active .c-val {
+  background: #fef3c7;
+  color: #d97706;
+  border-color: #d97706;
+}
+
+.wires {
+  width: 60px;
+  height: 120px;
+  position: relative;
+}
+
+.wires.outputs-wires {
+  width: 30px;
+}
+
+.wire-svg {
+  width: 100%;
+  height: 100%;
+}
+
+.gates {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  z-index: 2;
+}
+
+.gates-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.5rem;
+  z-index: 2;
+}
+
+.gate-box {
+  width: 6rem;
+  height: 3.5rem;
+  background: var(--vp-c-bg-alt);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+}
+
+.gate-box.sm {
+  width: 4rem;
+  height: 2.5rem;
+}
+
+.gate-box.active {
+  border-color: var(--vp-c-brand-1);
+  box-shadow: 0 0 8px var(--vp-c-brand-soft);
+}
+
+.gate-header {
+  display: flex;
+  align-items: baseline;
+  gap: 0.25rem;
+}
+
+.gate-name {
+  font-weight: bold;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-1);
+}
+
+.gate-box.sm .gate-name {
+  font-size: 0.75rem;
+}
+
+.gate-cn {
+  font-size: 0.65rem;
+  color: var(--vp-c-text-3);
+}
+
+.gate-formula {
+  font-size: 0.7rem;
+  color: var(--vp-c-brand-1);
+  font-family: 'JetBrains Mono', monospace;
+}
+
+.gate-desc {
+  font-size: 0.6rem;
+  color: var(--vp-c-text-3);
+  margin-top: 0.1rem;
+}
+
+.gate-out {
+  font-size: 0.8rem;
+  font-family: 'JetBrains Mono', monospace;
+  color: var(--vp-c-brand-1);
+  font-weight: 600;
+}
+
+.calculation-box {
+  margin-top: 0.75rem;
+  padding: 0.5rem 0.7rem;
+  background: var(--vp-c-bg-alt);
+  border-radius: 6px;
+}
+
+.calc-title {
+  font-size: 0.72rem;
+  font-weight: 600;
+  color: var(--vp-c-text-2);
+  margin-bottom: 0.3rem;
+}
+
+.calc-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.calc-row {
+  display: flex;
+  align-items: baseline;
+  gap: 0.25rem;
+  font-size: 0.72rem;
+}
+
+.calc-label {
+  color: var(--vp-c-text-3);
+  min-width: 3rem;
+}
+
+.calc-formula {
+  font-family: 'JetBrains Mono', monospace;
+  color: var(--vp-c-text-1);
+}
+
+.calc-formula strong {
+  color: var(--vp-c-brand-1);
+}
+
+.calc-reason {
+  color: var(--vp-c-text-3);
+  font-size: 0.68rem;
+}
+
+.multi-control {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  flex-wrap: wrap;
+  margin-bottom: 0.5rem;
+}
+
+.multi-input {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.78rem;
+  color: var(--vp-c-text-2);
+}
+
+.multi-input input {
+  width: 2.5rem;
+  padding: 0.2rem 0.3rem;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+  font-size: 0.85rem;
+  background: var(--vp-c-bg-alt);
+  color: var(--vp-c-text-1);
+}
+
+.multi-op {
+  font-weight: bold;
+  color: var(--vp-c-text-3);
+}
+
+.multi-result {
+  font-weight: bold;
+  color: var(--vp-c-brand-1);
+  font-size: 1rem;
+}
+
+.multi-overflow {
+  font-size: 0.6rem;
+  padding: 0.1rem 0.3rem;
+  background: #fef3c7;
+  color: #d97706;
+  border-radius: 3px;
+}
+
+.multi-binary {
+  background: var(--vp-c-bg-alt);
+  border-radius: 4px;
+  padding: 0.4rem 0.6rem;
+  margin-bottom: 0.5rem;
+}
+
+.multi-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.82rem;
+  font-family: 'JetBrains Mono', monospace;
+}
+
+.multi-row.result {
+  color: var(--vp-c-green-1, #16a34a);
+  font-weight: 600;
+}
+
+.multi-label {
+  color: var(--vp-c-text-3);
+  min-width: 1.5rem;
+}
+
+.multi-bits {
+  letter-spacing: 0.15rem;
+}
+
+.multi-chain {
+  display: flex;
+  gap: 0.3rem;
+  overflow-x: auto;
+  padding-bottom: 0.25rem;
+  margin-bottom: 0.5rem;
+}
+
+.multi-stage {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0.3rem 0.5rem;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+  background: var(--vp-c-bg);
+  font-size: 0.72rem;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.multi-stage.highlight {
+  border-color: var(--vp-c-brand-1);
+  background: var(--vp-c-brand-soft);
+}
+
+.multi-stage-bit {
+  font-weight: 600;
+  color: var(--vp-c-text-2);
+  margin-bottom: 0.1rem;
+}
+
+.multi-stage-io {
+  color: var(--vp-c-text-3);
+  font-family: 'JetBrains Mono', monospace;
+}
+
+.multi-stage-out {
+  color: var(--vp-c-brand-1);
+  font-family: 'JetBrains Mono', monospace;
+  font-weight: 600;
+}
+
+.info-box {
+  display: flex;
+  gap: 0.25rem;
+  padding: 0.5rem 0.7rem;
+  background: var(--vp-c-bg-alt);
+  border-radius: 6px;
+  font-size: 0.78rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.4;
+}
+
+.info-box strong {
+  white-space: nowrap;
+  flex-shrink: 0;
+  color: var(--vp-c-text-1);
+}
+
+.summary-box {
+  margin-top: 0.75rem;
+  padding: 0.5rem 0.7rem;
+  background: var(--vp-c-bg-alt);
+  border-radius: 6px;
+}
+
+.summary-title {
+  font-size: 0.72rem;
+  font-weight: 600;
+  color: var(--vp-c-text-2);
+  margin-bottom: 0.4rem;
+}
+
+.summary-flow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.3rem;
+  flex-wrap: wrap;
+}
+
+.summary-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.1rem;
+  padding: 0.25rem 0.4rem;
+  border-radius: 4px;
+  background: var(--vp-c-bg);
+}
+
+.summary-icon {
+  font-size: 0.9rem;
+}
+
+.summary-name {
+  font-size: 0.68rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+.summary-arrow {
+  color: var(--vp-c-text-3);
+  font-size: 0.8rem;
+}
+
+@media (max-width: 600px) {
+  .gates-showcase {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .circuit-container {
+    transform: scale(0.8);
+    transform-origin: left top;
+  }
+  .terms-box {
+    flex-direction: column;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/FullAdderDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/FullAdderDemo.vue
new file mode 100644
index 0000000..4b78540
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/FullAdderDemo.vue
@@ -0,0 +1,515 @@
+<template>
+  <div class="full-adder-demo">
+    <div class="demo-header">
+      <span class="title">全加器 (Full Adder)</span>
+      <span class="subtitle">能处理进位输入的完整加法单元 ── 三个输入，两个输出</span>
+    </div>
+
+    <div class="terms-box">
+      <div class="term-item">
+        <span class="term-name">Cin (进位输入)</span>
+        <span class="term-desc">来自低位的进位信号</span>
+      </div>
+      <div class="term-item">
+        <span class="term-name">Sum (本位)</span>
+        <span class="term-desc">三位异或的结果</span>
+      </div>
+      <div class="term-item">
+        <span class="term-name">Cout (进位输出)</span>
+        <span class="term-desc">向高位的进位信号</span>
+      </div>
+    </div>
+
+    <div class="circuit-container">
+      <div class="inputs">
+        <div class="input-line">
+          <button
+            class="toggle-btn"
+            :class="{ on: inputA }"
+            @click="inputA = !inputA"
+          >
+            {{ inputA ? '1' : '0' }}
+          </button>
+          <span class="label">输入 A</span>
+        </div>
+        <div class="input-line">
+          <button
+            class="toggle-btn"
+            :class="{ on: inputB }"
+            @click="inputB = !inputB"
+          >
+            {{ inputB ? '1' : '0' }}
+          </button>
+          <span class="label">输入 B</span>
+        </div>
+        <div class="input-line">
+          <button
+            class="toggle-btn cin-btn"
+            :class="{ on: carryIn }"
+            @click="carryIn = !carryIn"
+          >
+            {{ carryIn ? '1' : '0' }}
+          </button>
+          <span class="label">Cin</span>
+        </div>
+      </div>
+
+      <div class="wires">
+        <svg class="wire-svg" viewBox="0 0 120 180" preserveAspectRatio="none">
+          <path
+            d="M 0,30 C 30,30 30,45 60,45"
+            fill="none"
+            :stroke="inputA ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
+            stroke-width="2"
+          />
+          <path
+            d="M 0,30 L 15,30 L 15,105 L 60,105"
+            fill="none"
+            :stroke="inputA ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
+            stroke-width="2"
+          />
+          <path
+            d="M 0,90 C 30,90 30,60 60,60"
+            fill="none"
+            :stroke="inputB ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
+            stroke-width="2"
+          />
+          <path
+            d="M 0,90 L 25,90 L 25,120 L 60,120"
+            fill="none"
+            :stroke="inputB ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
+            stroke-width="2"
+          />
+          <path
+            d="M 0,150 C 30,150 30,135 60,135"
+            fill="none"
+            :stroke="carryIn ? '#d97706' : 'var(--vp-c-text-3)'"
+            stroke-width="2"
+          />
+          <circle
+            cx="15"
+            cy="30"
+            r="3"
+            :fill="inputA ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
+          />
+          <circle
+            cx="25"
+            cy="90"
+            r="3"
+            :fill="inputB ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
+          />
+        </svg>
+      </div>
+
+      <div class="gates">
+        <div class="gate-box xor-gate" :class="{ active: xor1 }">
+          <div class="gate-header">
+            <span class="gate-name">XOR</span>
+            <span class="gate-cn">异或门</span>
+          </div>
+          <div class="gate-formula">A ⊕ B</div>
+          <div class="gate-desc">不同为 1 → 中间值</div>
+        </div>
+        <div class="gate-box and-gate" :class="{ active: carry1 }">
+          <div class="gate-header">
+            <span class="gate-name">AND</span>
+            <span class="gate-cn">与门</span>
+          </div>
+          <div class="gate-formula">A ∧ B</div>
+          <div class="gate-desc">全 1 为 1 → 进位1</div>
+        </div>
+        <div class="gate-box xor-gate" :class="{ active: sumOut }">
+          <div class="gate-header">
+            <span class="gate-name">XOR</span>
+            <span class="gate-cn">异或门</span>
+          </div>
+          <div class="gate-formula">xor1 ⊕ Cin</div>
+          <div class="gate-desc">不同为 1 → 本位</div>
+        </div>
+        <div class="gate-box or-gate" :class="{ active: carryOut }">
+          <div class="gate-header">
+            <span class="gate-name">OR</span>
+            <span class="gate-cn">或门</span>
+          </div>
+          <div class="gate-formula">c1 ∨ c2</div>
+          <div class="gate-desc">有 1 为 1 → 进位输出</div>
+        </div>
+      </div>
+
+      <div class="wires outputs-wires">
+        <svg class="wire-svg" viewBox="0 0 50 180" preserveAspectRatio="none">
+          <line
+            x1="0"
+            y1="52"
+            x2="50"
+            y2="52"
+            :stroke="
+              sumOut ? 'var(--vp-c-green-1, #16a34a)' : 'var(--vp-c-text-3)'
+            "
+            stroke-width="2"
+          />
+          <line
+            x1="0"
+            y1="135"
+            x2="50"
+            y2="135"
+            :stroke="carryOut ? '#d97706' : 'var(--vp-c-text-3)'"
+            stroke-width="2"
+          />
+        </svg>
+      </div>
+
+      <div class="outputs">
+        <div class="output-line" :class="{ active: sumOut }">
+          <span class="label">本位 (Sum)</span>
+          <span class="out-val s-val">{{ sumOut ? '1' : '0' }}</span>
+        </div>
+        <div class="output-line" :class="{ active: carryOut }">
+          <span class="label">Cout (进位)</span>
+          <span class="out-val c-val">{{ carryOut ? '1' : '0' }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="calculation-box">
+      <div class="calc-title">计算过程</div>
+      <div class="calc-content">
+        <div class="calc-row">
+          <span class="calc-label">输入：</span>
+          <span class="calc-value">A = {{ inputA ? '1' : '0' }}，B = {{ inputB ? '1' : '0' }}，Cin =
+            {{ carryIn ? '1' : '0' }}</span>
+        </div>
+        <div class="calc-row">
+          <span class="calc-label">中间值：</span>
+          <span class="calc-formula">xor1 = A ⊕ B = {{ inputA ? '1' : '0' }} ⊕
+            {{ inputB ? '1' : '0' }} =
+            <strong>{{ xor1 ? '1' : '0' }}</strong></span>
+          <span class="calc-reason">（{{ inputA !== inputB ? '不同' : '相同' }}）</span>
+        </div>
+        <div class="calc-row">
+          <span class="calc-label">本位：</span>
+          <span class="calc-formula">Sum = xor1 ⊕ Cin = {{ xor1 ? '1' : '0' }} ⊕
+            {{ carryIn ? '1' : '0' }} =
+            <strong>{{ sumOut ? '1' : '0' }}</strong></span>
+          <span class="calc-reason">（{{ xor1 !== carryIn ? '不同' : '相同' }}）</span>
+        </div>
+        <div class="calc-row">
+          <span class="calc-label">进位：</span>
+          <span class="calc-formula">Cout = (A∧B) ∨ (xor1∧Cin) = ({{ carry1 ? '1' : '0' }}) ∨ ({{
+              carry2 ? '1' : '0'
+            }}) = <strong>{{ carryOut ? '1' : '0' }}</strong></span>
+        </div>
+      </div>
+    </div>
+
+    <div class="info-box">
+      <strong>核心思想：</strong>
+      全加器 = 两个半加器 + 一个 OR 门。第一级半加器算
+      A+B，第二级半加器把结果加上 Cin，OR 门合并两路进位信号。
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const inputA = ref(true)
+const inputB = ref(true)
+const carryIn = ref(false)
+
+const xor1 = computed(() => inputA.value !== inputB.value)
+const carry1 = computed(() => inputA.value && inputB.value)
+const carry2 = computed(() => xor1.value && carryIn.value)
+const sumOut = computed(() => xor1.value !== carryIn.value)
+const carryOut = computed(() => carry1.value || carry2.value)
+</script>
+
+<style scoped>
+.full-adder-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg-soft);
+  padding: 1rem 1.2rem;
+  margin: 1rem 0;
+}
+
+.demo-header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  margin-bottom: 0.75rem;
+}
+
+.title {
+  font-size: 0.9rem;
+  font-weight: bold;
+  color: var(--vp-c-text-1);
+}
+
+.subtitle {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-3);
+}
+
+.terms-box {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+  padding: 0.5rem;
+  background: var(--vp-c-bg-alt);
+  border-radius: 6px;
+}
+
+.term-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.term-name {
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: var(--vp-c-brand-1);
+}
+
+.term-desc {
+  font-size: 0.68rem;
+  color: var(--vp-c-text-3);
+  line-height: 1.3;
+}
+
+.circuit-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
+  padding: 1rem;
+  overflow-x: auto;
+}
+
+.inputs,
+.outputs {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  min-width: 6rem;
+  z-index: 2;
+}
+
+.outputs {
+  min-width: 8rem;
+}
+
+.input-line,
+.output-line {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.label {
+  font-size: 0.8rem;
+  color: var(--vp-c-text-1);
+}
+
+.toggle-btn {
+  width: 2.2rem;
+  height: 2.2rem;
+  border-radius: 4px;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  font-weight: bold;
+  font-family: monospace;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.toggle-btn.on {
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand-1);
+  border-color: var(--vp-c-brand-1);
+}
+
+.toggle-btn.cin-btn.on {
+  background: #fef3c7;
+  color: #d97706;
+  border-color: #d97706;
+}
+
+.out-val {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.2rem;
+  height: 2.2rem;
+  border-radius: 4px;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  font-weight: bold;
+  font-family: monospace;
+  font-size: 1rem;
+  transition: all 0.2s;
+}
+
+.output-line.active .s-val {
+  background: #dcfce7;
+  color: #16a34a;
+  border-color: #16a34a;
+}
+
+.output-line.active .c-val {
+  background: #fef3c7;
+  color: #d97706;
+  border-color: #d97706;
+}
+
+.wires {
+  width: 100px;
+  height: 180px;
+  position: relative;
+}
+
+.outputs-wires {
+  width: 40px;
+}
+
+.wire-svg {
+  width: 100%;
+  height: 100%;
+}
+
+.gates {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.6rem;
+  z-index: 2;
+}
+
+.gate-box {
+  width: 6rem;
+  height: 3.5rem;
+  background: var(--vp-c-bg-alt);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.gate-box.active {
+  border-color: var(--vp-c-brand-1);
+  box-shadow: 0 0 8px var(--vp-c-brand-soft);
+}
+
+.gate-header {
+  display: flex;
+  align-items: baseline;
+  gap: 0.25rem;
+}
+
+.gate-name {
+  font-weight: bold;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-1);
+}
+
+.gate-cn {
+  font-size: 0.65rem;
+  color: var(--vp-c-text-3);
+}
+
+.gate-formula {
+  font-size: 0.7rem;
+  color: var(--vp-c-brand-1);
+  font-family: 'JetBrains Mono', monospace;
+}
+
+.gate-desc {
+  font-size: 0.6rem;
+  color: var(--vp-c-text-3);
+  margin-top: 0.1rem;
+}
+
+.calculation-box {
+  margin-top: 1rem;
+  padding: 0.6rem 0.8rem;
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+}
+
+.calc-title {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--vp-c-text-2);
+  margin-bottom: 0.4rem;
+}
+
+.calc-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.calc-row {
+  display: flex;
+  align-items: baseline;
+  gap: 0.3rem;
+  font-size: 0.78rem;
+}
+
+.calc-label {
+  color: var(--vp-c-text-3);
+  min-width: 4rem;
+}
+
+.calc-formula {
+  font-family: 'JetBrains Mono', monospace;
+  color: var(--vp-c-text-1);
+}
+
+.calc-formula strong {
+  color: var(--vp-c-brand-1);
+}
+
+.calc-reason {
+  color: var(--vp-c-text-3);
+  font-size: 0.72rem;
+}
+
+.info-box {
+  display: flex;
+  gap: 0.25rem;
+  margin-top: 0.75rem;
+  padding: 0.6rem 0.8rem;
+  background: var(--vp-c-bg-alt);
+  border-radius: 6px;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.4;
+}
+
+.info-box strong {
+  white-space: nowrap;
+  flex-shrink: 0;
+  color: var(--vp-c-text-1);
+}
+
+@media (max-width: 600px) {
+  .circuit-container {
+    transform: scale(0.75);
+    transform-origin: left top;
+    padding-bottom: 0;
+  }
+  .terms-box {
+    flex-direction: column;
+  }
+  .gates {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/HalfAdderDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/HalfAdderDemo.vue
index 743fa04..f6c3d57 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/HalfAdderDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/HalfAdderDemo.vue
@@ -1,12 +1,22 @@
 <template>
   <div class="half-adder-demo">
-    <div class="demo-label">
-      半加器 (Half Adder) 内部构造 ── 尝试组合 A 和 B，观察 XOR（异或门）和
-      AND（与门）的分工
+    <div class="demo-header">
+      <span class="title">半加器 (Half Adder)</span>
+      <span class="subtitle">最基础的二进制加法单元 ── 只能处理两个 1 位输入</span>
+    </div>
+
+    <div class="terms-box">
+      <div class="term-item">
+        <span class="term-name">本位 (Sum)</span>
+        <span class="term-desc">当前位的计算结果，不考虑外部进位</span>
+      </div>
+      <div class="term-item">
+        <span class="term-name">进位 (Carry)</span>
+        <span class="term-desc">当两位都是 1 时，向更高位"借位"</span>
+      </div>
     </div>
 
     <div class="circuit-container">
-      <!-- 输入端 -->
       <div class="inputs">
         <div class="input-line">
           <button
@@ -30,41 +40,32 @@
         </div>
       </div>
 
-      <!-- 连线区域 -->
       <div class="wires">
-        <!-- Path visualization can be complex, using simple SVG lines -->
         <svg class="wire-svg" viewBox="0 0 100 150" preserveAspectRatio="none">
-          <!-- A to XOR -->
           <path
             d="M 0,30 C 50,30 50,40 100,40"
             fill="none"
             :stroke="inputA ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
             stroke-width="2"
           />
-          <!-- B to XOR -->
           <path
             d="M 0,120 C 50,120 50,60 100,60"
             fill="none"
             :stroke="inputB ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
             stroke-width="2"
           />
-
-          <!-- A to AND -->
           <path
             d="M 20,30 L 20,90 C 20,90 50,90 100,90"
             fill="none"
             :stroke="inputA ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
             stroke-width="2"
           />
-          <!-- B to AND -->
           <path
             d="M 40,120 L 40,110 C 40,110 50,110 100,110"
             fill="none"
             :stroke="inputB ? 'var(--vp-c-brand-1)' : 'var(--vp-c-text-3)'"
             stroke-width="2"
           />
-
-          <!-- Nodes -->
           <circle
             cx="20"
             cy="30"
@@ -80,19 +81,25 @@
         </svg>
       </div>
 
-      <!-- 逻辑门 -->
       <div class="gates">
         <div class="gate-box xor-gate" :class="{ active: sumOut }">
-          <div class="gate-name">XOR 门</div>
-          <div class="gate-desc">计算"本位" (相加结果)</div>
+          <div class="gate-header">
+            <span class="gate-name">XOR</span>
+            <span class="gate-cn">异或门</span>
+          </div>
+          <div class="gate-formula">A ⊕ B</div>
+          <div class="gate-desc">不同为 1 → 本位</div>
         </div>
         <div class="gate-box and-gate" :class="{ active: carryOut }">
-          <div class="gate-name">AND 门</div>
-          <div class="gate-desc">计算"进位" (满2进1)</div>
+          <div class="gate-header">
+            <span class="gate-name">AND</span>
+            <span class="gate-cn">与门</span>
+          </div>
+          <div class="gate-formula">A ∧ B</div>
+          <div class="gate-desc">全 1 为 1 → 进位</div>
         </div>
       </div>
 
-      <!-- 线 -->
       <div class="wires outputs-wires">
         <svg class="wire-svg" viewBox="0 0 50 150" preserveAspectRatio="none">
           <line
@@ -116,33 +123,44 @@
         </svg>
       </div>
 
-      <!-- 输出端 -->
       <div class="outputs">
         <div class="output-line" :class="{ active: sumOut }">
           <span class="label">本位 (Sum)</span>
           <span class="out-val s-val">{{ sumOut ? '1' : '0' }}</span>
         </div>
         <div class="output-line" :class="{ active: carryOut }">
-          <span class="label">向前进位 (Carry)</span>
+          <span class="label">进位 (Carry)</span>
           <span class="out-val c-val">{{ carryOut ? '1' : '0' }}</span>
         </div>
       </div>
     </div>
 
-    <div class="logic-explain">
-      <p>
-        你的输入是 {{ inputA ? '1' : '0' }} 和 {{ inputB ? '1' : '0' }}。<br />
-        <strong>XOR 门</strong>判断它们不仅要"相加"，还看是否"不同"：{{
-          inputA !== inputB ? '不同，出1' : '相同，出0'
-        }}
-        ——> 核心本位 <strong>{{ sumOut ? '1' : '0' }}</strong
-        >。<br />
-        <strong>AND 门</strong>暗中观察是否"全为真"：{{
-          inputA && inputB ? '全为 1，产生进位！' : '没有全为 1，不进位'
-        }}
-        ——> 进位信号 <strong>{{ carryOut ? '1' : '0' }}</strong
-        >。
-      </p>
+    <div class="calculation-box">
+      <div class="calc-title">计算过程</div>
+      <div class="calc-content">
+        <div class="calc-row">
+          <span class="calc-label">输入：</span>
+          <span class="calc-value">A = {{ inputA ? '1' : '0' }}，B = {{ inputB ? '1' : '0' }}</span>
+        </div>
+        <div class="calc-row">
+          <span class="calc-label">本位：</span>
+          <span class="calc-formula">A ⊕ B = {{ inputA ? '1' : '0' }} ⊕ {{ inputB ? '1' : '0' }} =
+            <strong>{{ sumOut ? '1' : '0' }}</strong></span>
+          <span class="calc-reason">（{{ inputA !== inputB ? '不同' : '相同' }}）</span>
+        </div>
+        <div class="calc-row">
+          <span class="calc-label">进位：</span>
+          <span class="calc-formula">A ∧ B = {{ inputA ? '1' : '0' }} ∧ {{ inputB ? '1' : '0' }} =
+            <strong>{{ carryOut ? '1' : '0' }}</strong></span>
+          <span class="calc-reason">（{{ inputA && inputB ? '全为 1' : '不全为 1' }}）</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="info-box">
+      <strong>核心思想：</strong>
+      半加器用 XOR 算"本位和"，用 AND
+      算"进位"。它是最小的加法单元，但无法处理来自低位的进位。
     </div>
   </div>
 </template>
@@ -166,12 +184,50 @@ const carryOut = computed(() => inputA.value && inputB.value)
   margin: 1rem 0;
 }
 
-.demo-label {
-  font-size: 0.78rem;
+.demo-header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  margin-bottom: 0.75rem;
+}
+
+.title {
+  font-size: 0.9rem;
   font-weight: bold;
-  color: var(--vp-c-text-2);
-  margin-bottom: 1rem;
-  letter-spacing: 0.2px;
+  color: var(--vp-c-text-1);
+}
+
+.subtitle {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-3);
+}
+
+.terms-box {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+  padding: 0.5rem;
+  background: var(--vp-c-bg-alt);
+  border-radius: 6px;
+}
+
+.term-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.term-name {
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: var(--vp-c-brand-1);
+}
+
+.term-desc {
+  font-size: 0.68rem;
+  color: var(--vp-c-text-3);
+  line-height: 1.3;
 }
 
 .circuit-container {
@@ -240,12 +296,6 @@ const carryOut = computed(() => inputA.value && inputB.value)
   font-size: 1rem;
   transition: all 0.2s;
 }
-.s-val {
-  color: var(--vp-c-text-3);
-}
-.c-val {
-  color: var(--vp-c-text-3);
-}
 
 .output-line.active .s-val {
   background: #dcfce7;
@@ -300,27 +350,97 @@ const carryOut = computed(() => inputA.value && inputB.value)
   box-shadow: 0 0 8px var(--vp-c-brand-soft);
 }
 
+.gate-header {
+  display: flex;
+  align-items: baseline;
+  gap: 0.25rem;
+}
+
 .gate-name {
   font-weight: bold;
   font-size: 0.9rem;
   color: var(--vp-c-text-1);
 }
 
+.gate-cn {
+  font-size: 0.7rem;
+  color: var(--vp-c-text-3);
+}
+
+.gate-formula {
+  font-size: 0.75rem;
+  color: var(--vp-c-brand-1);
+  font-family: 'JetBrains Mono', monospace;
+}
+
 .gate-desc {
   font-size: 0.65rem;
   color: var(--vp-c-text-3);
-  margin-top: 0.2rem;
+  margin-top: 0.15rem;
 }
 
-.logic-explain {
-  margin-top: 1.5rem;
-  padding: 0.8rem;
+.calculation-box {
+  margin-top: 1rem;
+  padding: 0.6rem 0.8rem;
   background: var(--vp-c-bg);
   border-radius: 6px;
-  font-size: 0.85rem;
-  text-align: center;
+}
+
+.calc-title {
+  font-size: 0.75rem;
+  font-weight: 600;
   color: var(--vp-c-text-2);
-  line-height: 1.5;
+  margin-bottom: 0.4rem;
+}
+
+.calc-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.calc-row {
+  display: flex;
+  align-items: baseline;
+  gap: 0.3rem;
+  font-size: 0.78rem;
+}
+
+.calc-label {
+  color: var(--vp-c-text-3);
+  min-width: 3.5rem;
+}
+
+.calc-formula {
+  font-family: 'JetBrains Mono', monospace;
+  color: var(--vp-c-text-1);
+}
+
+.calc-formula strong {
+  color: var(--vp-c-brand-1);
+}
+
+.calc-reason {
+  color: var(--vp-c-text-3);
+  font-size: 0.72rem;
+}
+
+.info-box {
+  display: flex;
+  gap: 0.25rem;
+  margin-top: 0.75rem;
+  padding: 0.6rem 0.8rem;
+  background: var(--vp-c-bg-alt);
+  border-radius: 6px;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.4;
+}
+
+.info-box strong {
+  white-space: nowrap;
+  flex-shrink: 0;
+  color: var(--vp-c-text-1);
 }
 
 @media (max-width: 600px) {
@@ -329,5 +449,8 @@ const carryOut = computed(() => inputA.value && inputB.value)
     transform-origin: left top;
     padding-bottom: 0;
   }
+  .terms-box {
+    flex-direction: column;
+  }
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/LogicGateDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/LogicGateDemo.vue
index b5a2401..d79457c 100644
--- a/docs/.vitepress/theme/components/appendix/computer-fundamentals/LogicGateDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/LogicGateDemo.vue
@@ -1,36 +1,54 @@
 <template>
   <div class="logic-gate-demo">
-    <div class="demo-label">四种基本逻辑门 ── 真值表一览</div>
+    <div class="demo-header">
+      <span class="title">四种基本逻辑门</span>
+      <span class="subtitle">所有数字计算的基础积木</span>
+    </div>
 
     <div class="gates-grid">
       <div v-for="gate in gates" :key="gate.name" class="gate-card">
-        <div class="gate-name">{{ gate.name }}</div>
+        <div class="gate-header">
+          <span class="gate-name-en">{{ gate.name }}</span>
+          <span class="gate-name-cn">{{ gate.nameCn }}</span>
+        </div>
+        <div class="gate-formula">
+          <span class="formula-label">运算：</span>
+          <code class="formula-code">{{ gate.formula }}</code>
+        </div>
         <div class="gate-rule">{{ gate.rule }}</div>
-        <table class="mini-truth">
-          <thead>
-            <tr>
-              <th>A</th>
-              <th v-if="gate.name !== 'NOT'">B</th>
-              <th>结果</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="(row, i) in gate.rows" :key="i">
-              <td>{{ row[0] }}</td>
-              <td v-if="gate.name !== 'NOT'">{{ row[1] }}</td>
-              <td
-                class="result-cell"
-                :class="{ one: row[row.length - 1] === 1 }"
-              >
-                {{ row[row.length - 1] }}
-              </td>
-            </tr>
-          </tbody>
-        </table>
+        <div class="gate-intuition">{{ gate.intuition }}</div>
+
+        <div class="truth-section">
+          <div class="truth-title">真值表</div>
+          <table class="mini-truth">
+            <thead>
+              <tr>
+                <th>A</th>
+                <th v-if="gate.name !== 'NOT'">B</th>
+                <th>输出</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(row, i) in gate.rows" :key="i">
+                <td>{{ row[0] }}</td>
+                <td v-if="gate.name !== 'NOT'">{{ row[1] }}</td>
+                <td
+                  class="result-cell"
+                  :class="{ one: row[row.length - 1] === 1 }"
+                >
+                  {{ row[row.length - 1] }}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
 
-    <div class="demo-caption">所有数字计算都由这四种门的组合实现</div>
+    <div class="info-box">
+      <strong>核心思想：</strong>
+      逻辑门把物理电路的"通/断"变成了数学上的"真/假"运算，是硬件实现软件逻辑的桥梁。
+    </div>
   </div>
 </template>
 
@@ -38,7 +56,10 @@
 const gates = [
   {
     name: 'AND',
-    rule: '都为 1 才得 1',
+    nameCn: '与门',
+    formula: 'A ∧ B',
+    rule: '两个都为 1，才输出 1',
+    intuition: '串联开关：两道门都开才通',
     rows: [
       [0, 0, 0],
       [0, 1, 0],
@@ -48,7 +69,10 @@ const gates = [
   },
   {
     name: 'OR',
-    rule: '有一个 1 就得 1',
+    nameCn: '或门',
+    formula: 'A ∨ B',
+    rule: '有一个为 1，就输出 1',
+    intuition: '并联开关：任一道门开就通',
     rows: [
       [0, 0, 0],
       [0, 1, 1],
@@ -58,7 +82,10 @@ const gates = [
   },
   {
     name: 'NOT',
-    rule: '取反',
+    nameCn: '非门',
+    formula: '¬A',
+    rule: '输入取反：0 变 1，1 变 0',
+    intuition: '反向器：开变关，关变开',
     rows: [
       [0, 1],
       [1, 0]
@@ -66,7 +93,10 @@ const gates = [
   },
   {
     name: 'XOR',
-    rule: '不同才得 1',
+    nameCn: '异或门',
+    formula: 'A ⊕ B',
+    rule: '两个不同，才输出 1',
+    intuition: '差异检测器：相异为真',
     rows: [
       [0, 0, 0],
       [0, 1, 1],
@@ -86,12 +116,22 @@ const gates = [
   margin: 1rem 0;
 }
 
-.demo-label {
-  font-size: 0.78rem;
-  font-weight: bold;
-  color: var(--vp-c-text-2);
+.demo-header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
   margin-bottom: 0.75rem;
-  letter-spacing: 0.2px;
+}
+
+.title {
+  font-size: 0.9rem;
+  font-weight: bold;
+  color: var(--vp-c-text-1);
+}
+
+.subtitle {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-3);
 }
 
 .gates-grid {
@@ -108,23 +148,80 @@ const gates = [
   text-align: center;
 }
 
-.gate-name {
+.gate-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  gap: 0.3rem;
+  margin-bottom: 0.3rem;
+}
+
+.gate-name-en {
   font-weight: bold;
-  font-size: 0.9rem;
+  font-size: 1rem;
   color: var(--vp-c-brand-1);
-  margin-bottom: 0.15rem;
+}
+
+.gate-name-cn {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+  font-weight: 500;
+}
+
+.gate-formula {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.2rem;
+  margin-bottom: 0.25rem;
+}
+
+.formula-label {
+  font-size: 0.65rem;
+  color: var(--vp-c-text-3);
+}
+
+.formula-code {
+  font-size: 0.8rem;
+  padding: 0.1rem 0.3rem;
+  background: var(--vp-c-bg-alt);
+  border-radius: 3px;
+  color: var(--vp-c-brand-1);
+  font-family: 'JetBrains Mono', monospace;
 }
 
 .gate-rule {
   font-size: 0.72rem;
+  color: var(--vp-c-text-2);
+  margin-bottom: 0.2rem;
+  font-weight: 500;
+}
+
+.gate-intuition {
+  font-size: 0.68rem;
   color: var(--vp-c-text-3);
   margin-bottom: 0.5rem;
+  padding: 0.2rem 0.4rem;
+  background: var(--vp-c-bg-alt);
+  border-radius: 4px;
+}
+
+.truth-section {
+  margin-top: 0.3rem;
+}
+
+.truth-title {
+  font-size: 0.6rem;
+  color: var(--vp-c-text-3);
+  margin-bottom: 0.2rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
 }
 
 .mini-truth {
   width: 100%;
   border-collapse: collapse;
-  font-size: 0.8rem;
+  font-size: 0.78rem;
   font-variant-numeric: tabular-nums;
 }
 
@@ -137,7 +234,7 @@ const gates = [
 
 .mini-truth th {
   background: var(--vp-c-bg-alt);
-  font-size: 0.72rem;
+  font-size: 0.7rem;
   font-weight: 600;
   color: var(--vp-c-text-2);
 }
@@ -145,13 +242,25 @@ const gates = [
 .result-cell.one {
   color: var(--vp-c-brand-1);
   font-weight: bold;
+  background: var(--vp-c-brand-soft);
 }
 
-.demo-caption {
-  font-size: 0.72rem;
-  color: var(--vp-c-text-3);
-  margin-top: 0.6rem;
-  text-align: center;
+.info-box {
+  display: flex;
+  gap: 0.25rem;
+  margin-top: 0.75rem;
+  padding: 0.6rem 0.8rem;
+  background: var(--vp-c-bg-alt);
+  border-radius: 6px;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.4;
+}
+
+.info-box strong {
+  white-space: nowrap;
+  flex-shrink: 0;
+  color: var(--vp-c-text-1);
 }
 
 @media (max-width: 600px) {
diff --git a/docs/.vitepress/theme/components/appendix/data/ABTestingDemo.vue b/docs/.vitepress/theme/components/appendix/data/ABTestingDemo.vue
new file mode 100644
index 0000000..fb72f84
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/data/ABTestingDemo.vue
@@ -0,0 +1,1139 @@
+<template>
+  <div class="demo ab-testing-demo">
+    <div class="header">
+      <span class="icon">🧪</span>
+      <span class="title">A/B 测试交互演示</span>
+    </div>
+
+    <div class="tabs">
+      <button
+        v-for="tab in tabs"
+        :key="tab.id"
+        :class="['tab', { active: activeTab === tab.id }]"
+        @click="activeTab = tab.id"
+      >
+        {{ tab.icon }} {{ tab.name }}
+      </button>
+    </div>
+
+    <!-- 流量分配演示 -->
+    <div v-if="activeTab === 'traffic'" class="content">
+      <h4>流量分配可视化</h4>
+      <p class="desc">观察用户如何被随机分配到对照组（A组）和实验组（B组）</p>
+
+      <div class="traffic-split">
+        <div class="split-container">
+          <div class="group group-a" :style="{ width: trafficSplit + '%' }">
+            <div class="group-label">A组 (对照组)</div>
+            <div class="group-percent">{{ trafficSplit }}%</div>
+          </div>
+          <div
+            class="group group-b"
+            :style="{ width: 100 - trafficSplit + '%' }"
+          >
+            <div class="group-label">B组 (实验组)</div>
+            <div class="group-percent">{{ 100 - trafficSplit }}%</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="traffic-controls">
+        <button @click="allocateUser" class="btn-primary">
+          👤 分配1个用户
+        </button>
+        <button @click="allocateBatch" class="btn-secondary">
+          👥 分配100个用户
+        </button>
+        <button @click="resetTraffic" class="btn-tertiary">🔄 重置</button>
+      </div>
+
+      <div class="traffic-stats">
+        <div class="stat-item">
+          <span class="stat-label">总用户数</span>
+          <span class="stat-value">{{ totalUsers }}</span>
+        </div>
+        <div class="stat-item">
+          <span class="stat-label">A组用户</span>
+          <span class="stat-value">{{ groupAUsers }}</span>
+        </div>
+        <div class="stat-item">
+          <span class="stat-label">B组用户</span>
+          <span class="stat-value">{{ groupBUsers }}</span>
+        </div>
+      </div>
+
+      <div class="tips">
+        <span class="tips-icon">💡</span>
+        <span class="tips-text"
+          >50/50分配能最快检测出差异，确保两组样本量足够大以获得统计显著性</span
+        >
+      </div>
+    </div>
+
+    <!-- 结果对比演示 -->
+    <div v-if="activeTab === 'results'" class="content">
+      <h4>A/B组结果对比</h4>
+      <p class="desc">比较两组的转化率和统计显著性</p>
+
+      <div class="comparison-settings">
+        <div class="setting-item">
+          <label>A组转化率（基准）</label>
+          <input
+            v-model.number="conversionA"
+            type="number"
+            min="1"
+            max="50"
+            step="0.5"
+            class="number-input"
+          />
+          <span class="unit">%</span>
+        </div>
+        <div class="setting-item">
+          <label>B组转化率</label>
+          <input
+            v-model.number="conversionB"
+            type="number"
+            min="1"
+            max="50"
+            step="0.5"
+            class="number-input"
+          />
+          <span class="unit">%</span>
+        </div>
+        <div class="setting-item">
+          <label>每组样本量</label>
+          <input
+            v-model.number="sampleSize"
+            type="number"
+            min="100"
+            max="100000"
+            step="100"
+            class="number-input"
+          />
+        </div>
+      </div>
+
+      <div class="results-comparison">
+        <div class="result-card result-a">
+          <div class="card-header">A组（对照组）</div>
+          <div class="card-metric">
+            <span class="metric-label">转化率</span>
+            <span class="metric-value">{{ conversionA }}%</span>
+          </div>
+          <div class="card-metric">
+            <span class="metric-label">转化数</span>
+            <span class="metric-value">{{ conversionsA }}</span>
+          </div>
+          <div class="card-metric">
+            <span class="metric-label">样本量</span>
+            <span class="metric-value">{{ sampleSize }}</span>
+          </div>
+        </div>
+
+        <div class="vs-divider">VS</div>
+
+        <div class="result-card result-b">
+          <div class="card-header">B组（实验组）</div>
+          <div class="card-metric">
+            <span class="metric-label">转化率</span>
+            <span class="metric-value">{{ conversionB }}%</span>
+          </div>
+          <div class="card-metric">
+            <span class="metric-label">转化数</span>
+            <span class="metric-value">{{ conversionsB }}</span>
+          </div>
+          <div class="card-metric">
+            <span class="metric-label">样本量</span>
+            <span class="metric-value">{{ sampleSize }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="statistical-summary">
+        <div class="summary-item">
+          <span class="summary-label">相对提升</span>
+          <span
+            class="summary-value"
+            :class="{
+              positive: relativeLift > 0,
+              negative: relativeLift < 0,
+              neutral: relativeLift === 0
+            }"
+          >
+            {{ relativeLift > 0 ? '+' : '' }}{{ relativeLift.toFixed(2) }}%
+          </span>
+        </div>
+        <div class="summary-item">
+          <span class="summary-label">Z值</span>
+          <span class="summary-value">{{ zScore.toFixed(3) }}</span>
+        </div>
+        <div class="summary-item">
+          <span class="summary-label">P值</span>
+          <span class="summary-value">{{ pValue.toFixed(5) }}</span>
+        </div>
+        <div class="summary-item">
+          <span class="summary-label">统计显著性</span>
+          <span
+            class="summary-value significance"
+            :class="{
+              significant: isSignificant,
+              'not-significant': !isSignificant
+            }"
+          >
+            {{ isSignificant ? '显著 ✅' : '不显著 ❌' }}
+          </span>
+        </div>
+      </div>
+
+      <div class="confidence-interval">
+        <div class="ci-header">95%置信区间</div>
+        <div class="ci-values">
+          <span class="ci-bound">{{ ciLower.toFixed(2) }}%</span>
+          <span class="ci-arrow">← 真实差异 →</span>
+          <span class="ci-bound">{{ ciUpper.toFixed(2) }}%</span>
+        </div>
+        <div class="ci-note">我们有95%的信心认为，真实差异在这个区间内</div>
+      </div>
+
+      <div class="tips">
+        <span class="tips-icon">💡</span>
+        <span class="tips-text"
+          >P值 < 0.05 表示结果统计显著，说明差异不太可能是随机产生的</span
+        >
+      </div>
+    </div>
+
+    <!-- 样本量计算器 -->
+    <div v-if="activeTab === 'calculator'" class="content">
+      <h4>样本量计算器</h4>
+      <p class="desc">计算达到统计显著性所需的最小样本量</p>
+
+      <div class="calc-inputs">
+        <div class="input-group">
+          <label>基准转化率</label>
+          <div class="input-wrapper">
+            <input
+              v-model.number="baselineRate"
+              type="number"
+              min="1"
+              max="50"
+              step="0.5"
+              class="number-input"
+            />
+            <span class="unit">%</span>
+          </div>
+          <span class="input-hint">当前版本的转化率</span>
+        </div>
+
+        <div class="input-group">
+          <label>最小检测提升</label>
+          <div class="input-wrapper">
+            <input
+              v-model.number="minimumDetectable"
+              type="number"
+              min="1"
+              max="100"
+              step="1"
+              class="number-input"
+            />
+            <span class="unit">%</span>
+          </div>
+          <span class="input-hint">希望检测到的最小相对提升（相对值）</span>
+        </div>
+
+        <div class="input-group">
+          <label>显著性水平 (α)</label>
+          <select v-model.number="alpha" class="select-input">
+            <option :value="0.01">0.01 (99%置信度)</option>
+            <option :value="0.05">0.05 (95%置信度) - 推荐</option>
+            <option :value="0.1">0.1 (90%置信度)</option>
+          </select>
+          <span class="input-hint">犯第一类错误的概率</span>
+        </div>
+
+        <div class="input-group">
+          <label>统计功效 (1-β)</label>
+          <select v-model.number="power" class="select-input">
+            <option :value="0.7">70%</option>
+            <option :value="0.8">80% - 推荐</option>
+            <option :value="0.9">90%</option>
+          </select>
+          <span class="input-hint">检测到真实效应的概率</span>
+        </div>
+      </div>
+
+      <button @click="calculateSampleSize" class="btn-primary btn-calc">
+        🧮 计算所需样本量
+      </button>
+
+      <div v-if="calculatedSampleSize > 0" class="calc-results">
+        <div class="result-highlight">
+          <div class="highlight-label">每组所需样本量</div>
+          <div class="highlight-value">
+            {{ calculatedSampleSize.toLocaleString() }}
+          </div>
+        </div>
+
+        <div class="result-details">
+          <div class="detail-row">
+            <span class="detail-label">总样本量（A+B组）</span>
+            <span class="detail-value">{{
+              (calculatedSampleSize * 2).toLocaleString()
+            }}</span>
+          </div>
+          <div class="detail-row">
+            <span class="detail-label">目标转化率（实验组）</span>
+            <span class="detail-value">{{ targetRate }}%</span>
+          </div>
+          <div class="detail-row">
+            <span class="detail-label">绝对差异</span>
+            <span class="detail-value">{{ absoluteDifference }}%</span>
+          </div>
+          <div class="detail-row">
+            <span class="detail-label">检测时长估算</span>
+            <span class="detail-value">{{ estimatedDays }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="tips">
+        <span class="tips-icon">💡</span>
+        <span class="tips-text"
+          >提升目标越小，所需样本量越大。5%的提升比20%的提升需要更多样本</span
+        >
+      </div>
+    </div>
+
+    <!-- 常见误区 -->
+    <div v-if="activeTab === 'pitfalls'" class="content">
+      <h4>A/B测试常见误区</h4>
+
+      <div class="pitfall-list">
+        <div v-for="pitfall in pitfalls" :key="pitfall.id" class="pitfall-card">
+          <div class="pitfall-header">
+            <span class="pitfall-icon">{{ pitfall.icon }}</span>
+            <span class="pitfall-title">{{ pitfall.title }}</span>
+          </div>
+          <div class="pitfall-desc">{{ pitfall.description }}</div>
+          <div class="pitfall-example">
+            <strong>示例：</strong>{{ pitfall.example }}
+          </div>
+          <div class="pitfall-solution">
+            <strong>✅ 解决方案：</strong>{{ pitfall.solution }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const activeTab = ref('traffic')
+
+const tabs = [
+  { id: 'traffic', icon: '🚦', name: '流量分配' },
+  { id: 'results', icon: '📊', name: '结果对比' },
+  { id: 'calculator', icon: '🧮', name: '样本量计算' },
+  { id: 'pitfalls', icon: '⚠️', name: '常见误区' }
+]
+
+// 流量分配相关
+const groupAUsers = ref(500)
+const groupBUsers = ref(500)
+
+const totalUsers = computed(() => groupAUsers.value + groupBUsers.value)
+const trafficSplit = computed(() => {
+  if (totalUsers.value === 0) return 50
+  return Math.round((groupAUsers.value / totalUsers.value) * 100)
+})
+
+function allocateUser() {
+  if (Math.random() < 0.5) {
+    groupAUsers.value++
+  } else {
+    groupBUsers.value++
+  }
+}
+
+function allocateBatch() {
+  for (let i = 0; i < 100; i++) {
+    allocateUser()
+  }
+}
+
+function resetTraffic() {
+  groupAUsers.value = 500
+  groupBUsers.value = 500
+}
+
+// 结果对比相关
+const conversionA = ref(5.0)
+const conversionB = ref(6.0)
+const sampleSize = ref(10000)
+
+const conversionsA = computed(
+  () => Math.round((conversionA.value / 100) * sampleSize.value)
+)
+const conversionsB = computed(
+  () => Math.round((conversionB.value / 100) * sampleSize.value)
+)
+
+const relativeLift = computed(() => {
+  if (conversionA.value === 0) return 0
+  return ((conversionB.value - conversionA.value) / conversionA.value) * 100
+})
+
+// Z-score计算
+const zScore = computed(() => {
+  const p1 = conversionA.value / 100
+  const p2 = conversionB.value / 100
+  const n1 = sampleSize.value
+  const n2 = sampleSize.value
+
+  const pooledP = (conversionsA.value + conversionsB.value) / (n1 + n2)
+  const se = Math.sqrt(pooledP * (1 - pooledP) * (1 / n1 + 1 / n2))
+
+  if (se === 0) return 0
+  return (p2 - p1) / se
+})
+
+const pValue = computed(() => {
+  const z = Math.abs(zScore.value)
+  // 使用标准正态分布的近似
+  return 2 * (1 - normalCDF(z))
+})
+
+function normalCDF(x) {
+  // 标准正态分布累积分布函数近似
+  const a1 = 0.254829592
+  const a2 = -0.284496736
+  const a3 = 1.421413741
+  const a4 = -1.453152027
+  const a5 = 1.061405429
+  const p = 0.3275911
+
+  const sign = x < 0 ? -1 : 1
+  x = Math.abs(x) / Math.sqrt(2)
+
+  const t = 1.0 / (1.0 + p * x)
+  const y =
+    1.0 -
+    (((((a5 * t + a4) * t) + a3) * t + a2) * t + a1) * t * Math.exp(-x * x)
+
+  return 0.5 * (1.0 + sign * y)
+}
+
+const isSignificant = computed(() => pValue.value < 0.05)
+
+// 95%置信区间
+const ciLower = computed(() => {
+  const diff = conversionB.value - conversionA.value
+  const p1 = conversionA.value / 100
+  const p2 = conversionB.value / 100
+  const n = sampleSize.value
+
+  const se = Math.sqrt((p1 * (1 - p1)) / n + (p2 * (1 - p2)) / n)
+  const margin = 1.96 * se * 100 // 1.95996是95%置信区间的z值
+
+  return diff - margin
+})
+
+const ciUpper = computed(() => {
+  const diff = conversionB.value - conversionA.value
+  const p1 = conversionA.value / 100
+  const p2 = conversionB.value / 100
+  const n = sampleSize.value
+
+  const se = Math.sqrt((p1 * (1 - p1)) / n + (p2 * (1 - p2)) / n)
+  const margin = 1.96 * se * 100
+
+  return diff + margin
+})
+
+// 样本量计算器相关
+const baselineRate = ref(5.0)
+const minimumDetectable = ref(20)
+const alpha = ref(0.05)
+const power = ref(0.8)
+const calculatedSampleSize = ref(0)
+
+const targetRate = computed(
+  () => (baselineRate.value * (1 + minimumDetectable.value / 100)).toFixed(2)
+)
+
+const absoluteDifference = computed(
+  => (targetRate.value - baselineRate.value).toFixed(2)
+)
+
+const estimatedDays = computed(() => {
+  const dailyVisitors = 5000 // 假设每日5000访客
+  const totalNeeded = calculatedSampleSize.value * 2
+  const days = Math.ceil(totalNeeded / dailyVisitors)
+  return `约 ${days} 天`
+})
+
+function calculateSampleSize() {
+  const p1 = baselineRate.value / 100
+  const p2 = targetRate.value / 100
+  constZa = 1.96 // alpha = 0.05对应的z值
+  constZb = 0.84 // power = 0.8对应的z值
+
+  // 合并标准差
+  const pBar = (p1 + p2) / 2
+  const sd1 = Math.sqrt(2 * pBar * (1 - pBar))
+  const sd2 = Math.sqrt(p1 * (1 - p1) + p2 * (1 - p2))
+
+  // 简化的样本量公式
+  const n =
+    (Math.pow(constZa * sd1 + constZb * sd2, 2)) / Math.pow(p2 - p1, 2)
+
+  calculatedSampleSize.value = Math.ceil(n)
+}
+
+// 常见误区数据
+const pitfalls = [
+  {
+    id: 'early-stop',
+    icon: '🛑',
+    title: '过早停止实验',
+    description:
+      '看到结果"显著"就立即停止实验，实际上只是随机波动',
+    example:
+      '运行2天后发现B组领先，立即宣布胜利。但继续运行一周后，差异消失。',
+    solution: '预先计算所需样本量，运行完整周期（至少2周）后再做决策'
+  },
+  {
+    id: 'peeking',
+    icon: '👁️',
+    title: '频繁窥探结果',
+    description: '每天查看数据，一旦"显著"就停止，这会大幅增加假阳性率',
+    example:
+      '每天检查p值，看到<0.05就停止。这种做法会让假阳性率从5%飙升到30%+。',
+    solution: '使用序贯检验方法，或预先设定唯一的检查点'
+  },
+  {
+    id: 'simpson',
+    icon: '🔄',
+    title: '辛普森悖论',
+    description: '分组看B组更差，但合并后B组反而更好（或相反）',
+    example:
+      '移动端转化率B>A，桌面端也是B>A，但合并后却A>B。原因：流量分配不均。',
+    solution: '按流量来源、设备、用户群体等维度分别分析，验证随机化是否正确'
+  },
+  {
+    id: 'p-hacking',
+    icon: '🔬',
+    title: 'P值操纵（P-hacking）',
+    description: '通过尝试不同指标、不同子群体，直到找到"显著"结果',
+    example:
+      '主指标不显著，就按年龄、地区、设备细分，发现某个子群显著就宣称成功。',
+    solution: '预先注册假设和指标，只分析预先设定的指标'
+  },
+  {
+    id: 'novelty',
+    icon: '✨',
+    title: '新奇效应',
+    description: '用户因好奇点击新功能，导致短期数据虚高',
+    example:
+      '新按钮上线首周点击率提升30%，但三周后回落到原水平甚至更低。',
+    solution: '运行足够长的时间（至少2-4周），让新奇效应消退'
+  },
+  {
+    id: 'underpowered',
+    icon: '🔋',
+    title: '样本量不足',
+    description: '样本量太小，即使有真实差异也检测不出来',
+    example:
+      '预期提升5%，但只运行了1000样本，结果"不显著"就放弃，实际上需要30000样本。',
+    solution: '实验前计算所需样本量，确保统计功效≥80%'
+  }
+]
+</script>
+
+<style scoped>
+.ab-testing-demo {
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.icon {
+  font-size: 24px;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #2c3e50;
+}
+
+.tabs {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+}
+
+.tab {
+  padding: 8px 16px;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  background: #f8fafc;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-size: 14px;
+}
+
+.tab:hover {
+  background: #e2e8f0;
+}
+
+.tab.active {
+  background: #3b82f6;
+  color: white;
+  border-color: #3b82f6;
+}
+
+.content {
+  background: #f8fafc;
+  border-radius: 8px;
+  padding: 20px;
+}
+
+.content h4 {
+  margin: 0 0 8px 0;
+  font-size: 16px;
+  color: #1e293b;
+}
+
+.desc {
+  color: #64748b;
+  font-size: 14px;
+  margin-bottom: 16px;
+}
+
+/* 流量分配样式 */
+.traffic-split {
+  margin-bottom: 20px;
+}
+
+.split-container {
+  display: flex;
+  height: 120px;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 2px solid #e2e8f0;
+}
+
+.group {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  transition: width 0.3s ease;
+}
+
+.group-a {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+}
+
+.group-b {
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  color: white;
+}
+
+.group-label {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.group-percent {
+  font-size: 32px;
+  font-weight: 700;
+}
+
+.traffic-controls {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+}
+
+.btn-primary,
+.btn-secondary,
+.btn-tertiary,
+.btn-calc {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn-primary {
+  background: #3b82f6;
+  color: white;
+}
+
+.btn-primary:hover {
+  background: #2563eb;
+}
+
+.btn-secondary {
+  background: #8b5cf6;
+  color: white;
+}
+
+.btn-secondary:hover {
+  background: #7c3aed;
+}
+
+.btn-tertiary {
+  background: #64748b;
+  color: white;
+}
+
+.btn-tertiary:hover {
+  background: #475569;
+}
+
+.btn-calc {
+  width: 100%;
+  margin-top: 16px;
+  font-size: 16px;
+  padding: 12px;
+}
+
+.traffic-stats {
+  display: flex;
+  gap: 24px;
+  padding: 16px;
+  background: white;
+  border-radius: 8px;
+  flex-wrap: wrap;
+}
+
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.stat-label {
+  font-size: 12px;
+  color: #64748b;
+}
+
+.stat-value {
+  font-size: 24px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+/* 结果对比样式 */
+.comparison-settings {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.setting-item {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.setting-item label {
+  font-size: 14px;
+  font-weight: 500;
+  color: #475569;
+}
+
+.number-input {
+  padding: 8px 12px;
+  border: 1px solid #cbd5e1;
+  border-radius: 6px;
+  font-size: 14px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.unit {
+  font-size: 14px;
+  color: #64748b;
+  margin-left: -40px;
+  padding-left: 4px;
+}
+
+.setting-item {
+  position: relative;
+}
+
+.setting-item .unit {
+  position: absolute;
+  right: 12px;
+  top: 33px;
+}
+
+.setting-item input {
+  padding-right: 40px;
+}
+
+.results-comparison {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+}
+
+.result-card {
+  flex: 1;
+  min-width: 200px;
+  background: white;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.result-a {
+  border-left: 4px solid #3b82f6;
+}
+
+.result-b {
+  border-left: 4px solid #f59e0b;
+}
+
+.card-header {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 16px;
+  color: #1e293b;
+}
+
+.card-metric {
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 0;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+.card-metric:last-child {
+  border-bottom: none;
+}
+
+.metric-label {
+  font-size: 13px;
+  color: #64748b;
+}
+
+.metric-value {
+  font-size: 15px;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.vs-divider {
+  font-size: 20px;
+  font-weight: 700;
+  color: #94a3b8;
+  padding: 0 8px;
+}
+
+.statistical-summary {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.summary-item {
+  background: white;
+  padding: 16px;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.summary-label {
+  font-size: 12px;
+  color: #64748b;
+}
+
+.summary-value {
+  font-size: 20px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.summary-value.positive {
+  color: #10b981;
+}
+
+.summary-value.negative {
+  color: #ef4444;
+}
+
+.summary-value.neutral {
+  color: #64748b;
+}
+
+.summary-value.significance.significant {
+  color: #10b981;
+}
+
+.summary-value.significance.not-significant {
+  color: #f59e0b;
+}
+
+.confidence-interval {
+  background: white;
+  padding: 20px;
+  border-radius: 8px;
+  margin-bottom: 16px;
+}
+
+.ci-header {
+  font-size: 14px;
+  font-weight: 600;
+  color: #475569;
+  margin-bottom: 12px;
+}
+
+.ci-values {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  font-size: 16px;
+}
+
+.ci-bound {
+  font-weight: 600;
+  color: #3b82f6;
+}
+
+.ci-arrow {
+  color: #94a3b8;
+  font-size: 14px;
+}
+
+.ci-note {
+  text-align: center;
+  font-size: 13px;
+  color: #64748b;
+  margin-top: 12px;
+}
+
+/* 样本量计算器样式 */
+.calc-inputs {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.input-group label {
+  font-size: 14px;
+  font-weight: 500;
+  color: #475569;
+}
+
+.input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.input-wrapper .unit {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: 0;
+  padding-left: 0;
+}
+
+.input-wrapper input {
+  padding-right: 40px;
+}
+
+.select-input {
+  padding: 8px 12px;
+  border: 1px solid #cbd5e1;
+  border-radius: 6px;
+  font-size: 14px;
+  background: white;
+  width: 100%;
+}
+
+.input-hint {
+  font-size: 12px;
+  color: #94a3b8;
+}
+
+.calc-results {
+  margin-top: 20px;
+}
+
+.result-highlight {
+  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+  color: white;
+  padding: 24px;
+  border-radius: 8px;
+  text-align: center;
+  margin-bottom: 16px;
+}
+
+.highlight-label {
+  font-size: 14px;
+  opacity: 0.9;
+  margin-bottom: 8px;
+}
+
+.highlight-value {
+  font-size: 36px;
+  font-weight: 700;
+}
+
+.result-details {
+  background: white;
+  padding: 16px;
+  border-radius: 8px;
+}
+
+.detail-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 0;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+.detail-row:last-child {
+  border-bottom: none;
+}
+
+.detail-label {
+  font-size: 14px;
+  color: #64748b;
+}
+
+.detail-value {
+  font-size: 15px;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+/* 常见误区样式 */
+.pitfall-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.pitfall-card {
+  background: white;
+  border-radius: 8px;
+  padding: 20px;
+  border-left: 4px solid #f59e0b;
+}
+
+.pitfall-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.pitfall-icon {
+  font-size: 24px;
+}
+
+.pitfall-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.pitfall-desc {
+  font-size: 14px;
+  color: #475569;
+  margin-bottom: 12px;
+  line-height: 1.6;
+}
+
+.pitfall-example {
+  font-size: 13px;
+  color: #64748b;
+  margin-bottom: 8px;
+  padding: 12px;
+  background: #fef3c7;
+  border-radius: 6px;
+  line-height: 1.6;
+}
+
+.pitfall-solution {
+  font-size: 13px;
+  color: #059669;
+  padding: 12px;
+  background: #d1fae5;
+  border-radius: 6px;
+  line-height: 1.6;
+}
+
+/* 提示框样式 */
+.tips {
+  display: flex;
+  gap: 12px;
+  background: #fef3c7;
+  padding: 16px;
+  border-radius: 8px;
+  margin-top: 16px;
+}
+
+.tips-icon {
+  font-size: 20px;
+  flex-shrink: 0;
+}
+
+.tips-text {
+  font-size: 14px;
+  color: #92400e;
+  line-height: 1.6;
+}
+
+/* 响应式 */
+@media (max-width: 768px) {
+  .results-comparison {
+    flex-direction: column;
+  }
+
+  .vs-divider {
+    transform: rotate(90deg);
+  }
+
+  .statistical-summary {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/data/DataAnalysisDemo.vue b/docs/.vitepress/theme/components/appendix/data/DataAnalysisDemo.vue
new file mode 100644
index 0000000..4843d3f
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/data/DataAnalysisDemo.vue
@@ -0,0 +1,1249 @@
+<template>
+  <div class="data-analysis-root">
+    <div class="data-analysis-header">
+      <span class="data-analysis-icon">📊</span>
+      <span class="data-analysis-title">数据分析演示</span>
+    </div>
+
+    <div class="data-analysis-tabs">
+      <button
+        v-for="tab in tabs"
+        :key="tab.id"
+        :class="['data-analysis-tab', { active: activeTab === tab.id }]"
+        @click="activeTab = tab.id"
+      >
+        {{ tab.icon }} {{ tab.name }}
+      </button>
+    </div>
+
+    <div class="data-analysis-content">
+      <!-- 描述性统计 -->
+      <div v-if="activeTab === 'stats'" class="data-analysis-section">
+        <div class="stats-demo">
+          <div class="stats-input-section">
+            <div class="stats-input-title">数据集</div>
+            <div class="stats-input-desc">输入一组数字，计算统计指标</div>
+            <div class="stats-input-wrapper">
+              <input
+                v-model="dataInput"
+                type="text"
+                class="stats-input"
+                placeholder="用逗号分隔，例如：1, 2, 3, 4, 5"
+                @input="calculateStats"
+              />
+              <button class="stats-btn" @click="generateRandomData">
+                🎲 随机生成
+              </button>
+            </div>
+          </div>
+
+          <div class="stats-results">
+            <div class="stats-result-title">统计结果</div>
+            <div class="stats-grid">
+              <div v-for="stat in stats" :key="stat.key" class="stat-card">
+                <div class="stat-label">{{ stat.label }}</div>
+                <div class="stat-value" :style="{ color: stat.color }">
+                  {{ stat.value }}
+                </div>
+                <div class="stat-desc">{{ stat.desc }}</div>
+              </div>
+            </div>
+          </div>
+
+          <div class="stats-visualization">
+            <div class="stats-viz-title">数据分布</div>
+            <div class="stats-chart">
+              <div class="stats-chart-bar">
+                <div
+                  v-for="(val, i) in sortedData"
+                  :key="i"
+                  class="stats-bar-item"
+                  :style="{
+                    height: getBarHeight(val),
+                    background: getBarColor(i)
+                  }"
+                >
+                  <div class="stats-bar-value">{{ val }}</div>
+                </div>
+              </div>
+              <div class="stats-chart-mean">
+                <div
+                  class="stats-mean-line"
+                  :style="{ left: meanLinePosition + '%' }"
+                >
+                  <div class="stats-mean-label">均值: {{ mean }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 数据聚合 -->
+      <div
+        v-else-if="activeTab === 'aggregation'"
+        class="data-analysis-section"
+      >
+        <div class="aggregation-demo">
+          <div class="aggregation-title">数据聚合操作</div>
+          <div class="aggregation-table">
+            <table class="agg-table">
+              <thead>
+                <tr>
+                  <th>用户 ID</th>
+                  <th>订单号</th>
+                  <th>金额（元）</th>
+                  <th>日期</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="row in rawOrders" :key="row.id">
+                  <td>{{ row.userId }}</td>
+                  <td>{{ row.orderId }}</td>
+                  <td>{{ row.amount }}</td>
+                  <td>{{ row.date }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <div class="aggregation-operations">
+            <button
+              v-for="op in aggregationOps"
+              :key="op.id"
+              :class="['agg-op-btn', { active: activeAggOp === op.id }]"
+              @click="activeAggOp = op.id"
+            >
+              {{ op.icon }} {{ op.name }}
+            </button>
+          </div>
+
+          <div class="aggregation-result">
+            <div class="agg-result-title">{{ currentAggOp.name }}结果</div>
+            <div class="agg-result-table">
+              <table class="agg-table">
+                <thead>
+                  <tr>
+                    <th v-for="col in currentAggResult.columns" :key="col">
+                      {{ col }}
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="(row, i) in currentAggResult.data" :key="i">
+                    <td v-for="col in currentAggResult.columns" :key="col">
+                      {{ row[col] }}
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <div class="agg-result-sql">
+              <div class="agg-sql-title">SQL 示例</div>
+              <pre class="agg-sql-code">{{ currentAggOp.sql }}</pre>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 漏斗分析 -->
+      <div v-else-if="activeTab === 'funnel'" class="data-analysis-section">
+        <div class="funnel-demo">
+          <div class="funnel-title">用户转化漏斗</div>
+          <div class="funnel-description">
+            漏斗分析用于追踪用户在一系列步骤中的转化率
+          </div>
+
+          <div class="funnel-visualization">
+            <div class="funnel-steps">
+              <div
+                v-for="(step, i) in funnelSteps"
+                :key="step.name"
+                class="funnel-step"
+                :style="{ width: getFunnelWidth(step.count, i) }"
+              >
+                <div class="funnel-step-header">
+                  <span class="funnel-step-name">{{ step.name }}</span>
+                  <span class="funnel-step-count">{{ step.count }} 人</span>
+                </div>
+                <div class="funnel-step-bar"></div>
+                <div class="funnel-step-conversion">
+                  {{
+                    i === 0
+                      ? '100%'
+                      : getConversionRate(step.count, funnelSteps[0].count)
+                  }}
+                  {{
+                    i > 0
+                      ? `(转化率 ${getConversionRate(step.count, funnelSteps[i - 1].count)})`
+                      : ''
+                  }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="funnel-insights">
+            <div class="funnel-insights-title">洞察与建议</div>
+            <div class="funnel-insights-list">
+              <div class="funnel-insight">
+                <span class="funnel-insight-icon">💡</span>
+                <span class="funnel-insight-text">
+                  最低转化步骤：<strong>{{ worstStep.name }}</strong> ({{
+                    worstStep.rate
+                  }})
+                </span>
+              </div>
+              <div class="funnel-insight">
+                <span class="funnel-insight-icon">📈</span>
+                <span class="funnel-insight-text">
+                  整体转化率：<strong>{{ overallConversion }}</strong>
+                </span>
+              </div>
+              <div class="funnel-insight">
+                <span class="funnel-insight-icon">🎯</span>
+                <span class="funnel-insight-text">
+                  建议：优化
+                  <strong>{{ worstStep.name }}</strong>
+                  页面，减少表单字段或简化流程
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 留存分析 -->
+      <div v-else-if="activeTab === 'retention'" class="data-analysis-section">
+        <div class="retention-demo">
+          <div class="retention-title">用户留存分析</div>
+          <div class="retention-description">
+            留存分析衡量用户在首次使用后持续使用产品的情况
+          </div>
+
+          <div class="retention-table">
+            <table class="retention-table-el">
+              <thead>
+                <tr>
+                  <th>注册日期</th>
+                  <th>注册用户数</th>
+                  <th>次日留存</th>
+                  <th>7日留存</th>
+                  <th>30日留存</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="row in retentionData" :key="row.date">
+                  <td>{{ row.date }}</td>
+                  <td>{{ row.users }}</td>
+                  <td :class="getRetentionClass(row.day1)">{{ row.day1 }}%</td>
+                  <td :class="getRetentionClass(row.day7)">{{ row.day7 }}%</td>
+                  <td :class="getRetentionClass(row.day30)">
+                    {{ row.day30 }}%
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <div class="retention-chart">
+            <div class="retention-chart-title">留存曲线</div>
+            <div class="retention-curve">
+              <svg viewBox="0 0 400 200" class="retention-svg">
+                <!-- 坐标轴 -->
+                <line
+                  x1="40"
+                  y1="180"
+                  x2="380"
+                  y2="180"
+                  stroke="#666"
+                  stroke-width="1"
+                />
+                <line
+                  x1="40"
+                  y1="20"
+                  x2="40"
+                  y2="180"
+                  stroke="#666"
+                  stroke-width="1"
+                />
+
+                <!-- Y轴标签 -->
+                <text x="10" y="30" font-size="10" fill="#666">100%</text>
+                <text x="15" y="100" font-size="10" fill="#666">50%</text>
+                <text x="20" y="180" font-size="10" fill="#666">0%</text>
+
+                <!-- 次日留存曲线 -->
+                <polyline
+                  :points="
+                    getRetentionCurvePoints([45, 42, 40, 38, 41, 43, 40])
+                  "
+                  fill="none"
+                  stroke="#3b82f6"
+                  stroke-width="2"
+                />
+                <circle
+                  v-for="(i, idx) in 7"
+                  :key="'d1-' + idx"
+                  :cx="60 + idx * 50"
+                  :cy="180 - 45 * 1.6"
+                  r="4"
+                  fill="#3b82f6"
+                />
+
+                <!-- 7日留存曲线 -->
+                <polyline
+                  :points="
+                    getRetentionCurvePoints([45, 32, 28, 25, 30, 33, 29])
+                  "
+                  fill="none"
+                  stroke="#22c55e"
+                  stroke-width="2"
+                />
+                <circle
+                  v-for="(i, idx) in 7"
+                  :key="'d7-' + idx"
+                  :cx="60 + idx * 50"
+                  :cy="180 - 32 * 1.6"
+                  r="4"
+                  fill="#22c55e"
+                />
+
+                <!-- 30日留存曲线 -->
+                <polyline
+                  :points="
+                    getRetentionCurvePoints([45, 18, 15, 12, 14, 16, 13])
+                  "
+                  fill="none"
+                  stroke="#f59e0b"
+                  stroke-width="2"
+                />
+                <circle
+                  v-for="(i, idx) in 7"
+                  :key="'d30-' + idx"
+                  :cx="60 + idx * 50"
+                  :cy="180 - 18 * 1.6"
+                  r="4"
+                  fill="#f59e0b"
+                />
+
+                <!-- X轴标签 -->
+                <text
+                  v-for="(day, idx) in [
+                    'D1',
+                    'D2',
+                    'D3',
+                    'D4',
+                    'D5',
+                    'D6',
+                    'D7'
+                  ]"
+                  :key="day"
+                  :x="60 + idx * 50"
+                  y="195"
+                  font-size="10"
+                  fill="#666"
+                  text-anchor="middle"
+                >
+                  {{ day }}
+                </text>
+              </svg>
+
+              <div class="retention-legend">
+                <div class="retention-legend-item">
+                  <span
+                    class="retention-legend-color"
+                    style="background: #3b82f6"
+                  ></span>
+                  <span class="retention-legend-text">次日留存</span>
+                </div>
+                <div class="retention-legend-item">
+                  <span
+                    class="retention-legend-color"
+                    style="background: #22c55e"
+                  ></span>
+                  <span class="retention-legend-text">7日留存</span>
+                </div>
+                <div class="retention-legend-item">
+                  <span
+                    class="retention-legend-color"
+                    style="background: #f59e0b"
+                  ></span>
+                  <span class="retention-legend-text">30日留存</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const activeTab = ref('stats')
+const activeAggOp = ref('groupBy')
+
+const tabs = [
+  { id: 'stats', name: '描述性统计', icon: '📈' },
+  { id: 'aggregation', name: '数据聚合', icon: '🔗' },
+  { id: 'funnel', name: '漏斗分析', icon: '🔽' },
+  { id: 'retention', name: '留存分析', icon: '📊' }
+]
+
+// 描述性统计
+const dataInput = ref('23, 45, 67, 89, 12, 34, 56, 78, 90, 21')
+
+const rawData = computed(() => {
+  return dataInput.value
+    .split(',')
+    .map((s) => parseFloat(s.trim()))
+    .filter((n) => !isNaN(n))
+})
+
+const sortedData = computed(() => {
+  return [...rawData.value].sort((a, b) => a - b)
+})
+
+const count = computed(() => rawData.value.length)
+
+const mean = computed(() => {
+  if (count.value === 0) return 0
+  const sum = rawData.value.reduce((a, b) => a + b, 0)
+  return (sum / count.value).toFixed(2)
+})
+
+const median = computed(() => {
+  const sorted = sortedData.value
+  const n = sorted.length
+  if (n === 0) return 0
+  if (n % 2 === 0) {
+    return ((sorted[n / 2 - 1] + sorted[n / 2]) / 2).toFixed(2)
+  } else {
+    return sorted[Math.floor(n / 2)].toFixed(2)
+  }
+})
+
+const mode = computed(() => {
+  const frequency = {}
+  let maxFreq = 0
+  let modes = []
+
+  rawData.value.forEach((num) => {
+    frequency[num] = (frequency[num] || 0) + 1
+    if (frequency[num] > maxFreq) {
+      maxFreq = frequency[num]
+    }
+  })
+
+  Object.keys(frequency).forEach((num) => {
+    if (frequency[num] === maxFreq) {
+      modes.push(num)
+    }
+  })
+
+  return maxFreq === 1 ? '无' : modes.join(', ')
+})
+
+const variance = computed(() => {
+  if (count.value === 0) return 0
+  const squaredDiffs = rawData.value.map((num) =>
+    Math.pow(num - parseFloat(mean.value), 2)
+  )
+  return (squaredDiffs.reduce((a, b) => a + b, 0) / count.value).toFixed(2)
+})
+
+const stdDev = computed(() => {
+  return Math.sqrt(parseFloat(variance.value)).toFixed(2)
+})
+
+const stats = computed(() => [
+  {
+    key: 'count',
+    label: '样本数',
+    value: count.value,
+    desc: '数据点的总数',
+    color: '#3b82f6'
+  },
+  {
+    key: 'mean',
+    label: '均值',
+    value: mean.value,
+    desc: '所有数值的平均值',
+    color: '#22c55e'
+  },
+  {
+    key: 'median',
+    label: '中位数',
+    value: median.value,
+    desc: '排序后位于中间的值',
+    color: '#f59e0b'
+  },
+  {
+    key: 'mode',
+    label: '众数',
+    value: mode.value,
+    desc: '出现次数最多的值',
+    color: '#8b5cf6'
+  },
+  {
+    key: 'variance',
+    label: '方差',
+    value: variance.value,
+    desc: '数据分散程度的度量',
+    color: '#ec4899'
+  },
+  {
+    key: 'stdDev',
+    label: '标准差',
+    value: stdDev.value,
+    desc: '方差的平方根',
+    color: '#06b6d4'
+  }
+])
+
+function generateRandomData() {
+  const data = Array.from(
+    { length: 10 },
+    () => Math.floor(Math.random() * 100) + 1
+  )
+  dataInput.value = data.join(', ')
+}
+
+function getBarHeight(value) {
+  const max = Math.max(...sortedData.value)
+  const min = Math.min(...sortedData.value)
+  const range = max - min || 1
+  return ((value - min) / range) * 80 + 20 + '%'
+}
+
+function getBarColor(index) {
+  const colors = ['#3b82f6', '#22c55e', '#f59e0b', '#8b5cf6', '#ec4899']
+  return colors[index % colors.length]
+}
+
+const meanLinePosition = computed(() => {
+  const sorted = sortedData.value
+  const min = Math.min(...sorted)
+  const max = Math.max(...sorted)
+  const range = max - min || 1
+  return ((parseFloat(mean.value) - min) / range) * 100
+})
+
+function calculateStats() {
+  // Triggered by input
+}
+
+// 数据聚合
+const rawOrders = [
+  { id: 1, userId: 'U001', orderId: 'ORD001', amount: 100, date: '2024-01-01' },
+  { id: 2, userId: 'U001', orderId: 'ORD002', amount: 200, date: '2024-01-02' },
+  { id: 3, userId: 'U002', orderId: 'ORD003', amount: 150, date: '2024-01-01' },
+  { id: 4, userId: 'U002', orderId: 'ORD004', amount: 300, date: '2024-01-03' },
+  { id: 5, userId: 'U003', orderId: 'ORD005', amount: 250, date: '2024-01-02' },
+  { id: 6, userId: 'U001', orderId: 'ORD006', amount: 180, date: '2024-01-04' }
+]
+
+const aggregationOps = {
+  groupBy: {
+    id: 'groupBy',
+    name: '按用户分组',
+    sql: `SELECT user_id, COUNT(*) as order_count, SUM(amount) as total_amount
+FROM orders
+GROUP BY user_id;`,
+    columns: ['用户 ID', '订单数', '总金额'],
+    data: [
+      { '用户 ID': 'U001', 订单数: 3, 总金额: 480 },
+      { '用户 ID': 'U002', 订单数: 2, 总金额: 450 },
+      { '用户 ID': 'U003', 订单数: 1, 总金额: 250 }
+    ]
+  },
+  sum: {
+    id: 'sum',
+    name: '总销售额',
+    sql: `SELECT SUM(amount) as total_sales
+FROM orders;`,
+    columns: ['总销售额'],
+    data: [{ 总销售额: 1180 }]
+  },
+  avg: {
+    id: 'avg',
+    name: '平均订单额',
+    sql: `SELECT AVG(amount) as avg_amount
+FROM orders;`,
+    columns: ['平均订单额'],
+    data: [{ 平均订单额: 196.67 }]
+  },
+  max: {
+    id: 'max',
+    name: '最大订单额',
+    sql: `SELECT MAX(amount) as max_amount
+FROM orders;`,
+    columns: ['最大订单额'],
+    data: [{ 最大订单额: 300 }]
+  }
+}
+
+const currentAggOp = computed(() => aggregationOps[activeAggOp.value])
+const currentAggResult = computed(() => ({
+  columns: currentAggOp.value.columns,
+  data: currentAggOp.value.data
+}))
+
+// 漏斗分析
+const funnelSteps = [
+  { name: '访问商品页', count: 10000 },
+  { name: '加入购物车', count: 6000 },
+  { name: '进入结算页', count: 4000 },
+  { name: '完成支付', count: 2500 }
+]
+
+function getFunnelWidth(count, index) {
+  const maxWidth = 100
+  const minWidth = 30
+  const percentage = (count / funnelSteps[0].count) * 100
+  return Math.max(minWidth, (percentage / 100) * maxWidth) + '%'
+}
+
+function getConversionRate(current, previous) {
+  return ((current / previous) * 100).toFixed(1) + '%'
+}
+
+const worstStep = computed(() => {
+  let worst = { name: '', rate: '100%' }
+  let minRate = 100
+
+  for (let i = 1; i < funnelSteps.length; i++) {
+    const rate = (funnelSteps[i].count / funnelSteps[i - 1].count) * 100
+    if (rate < minRate) {
+      minRate = rate
+      worst = {
+        name: funnelSteps[i].name,
+        rate: rate.toFixed(1) + '%'
+      }
+    }
+  }
+
+  return worst
+})
+
+const overallConversion = computed(() => {
+  return (
+    (
+      (funnelSteps[funnelSteps.length - 1].count / funnelSteps[0].count) *
+      100
+    ).toFixed(1) + '%'
+  )
+})
+
+// 留存分析
+const retentionData = [
+  { date: '2024-01-01', users: 1000, day1: 45, day7: 32, day30: 18 },
+  { date: '2024-01-02', users: 1200, day1: 42, day7: 28, day30: 15 },
+  { date: '2024-01-03', users: 950, day1: 40, day7: 25, day30: 12 },
+  { date: '2024-01-04', users: 1100, day1: 38, day7: 30, day30: 14 },
+  { date: '2024-01-05', users: 1050, day1: 41, day7: 33, day30: 16 },
+  { date: '2024-01-06', users: 1300, day1: 43, day7: 29, day30: 13 },
+  { date: '2024-01-07', users: 1150, day1: 40, day7: 31, day30: 15 }
+]
+
+function getRetentionClass(rate) {
+  if (rate >= 40) return 'retention-high'
+  if (rate >= 25) return 'retention-medium'
+  return 'retention-low'
+}
+
+function getRetentionCurvePoints(data) {
+  return data
+    .map((val, idx) => {
+      const x = 60 + idx * 50
+      const y = 180 - val * 1.6
+      return `${x},${y}`
+    })
+    .join(' ')
+}
+</script>
+
+<style scoped>
+.data-analysis-root {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  background: var(--vp-c-bg-soft);
+  margin: 24px 0;
+  overflow: hidden;
+}
+
+.data-analysis-header {
+  padding: 14px 20px;
+  background: var(--vp-c-bg);
+  border-bottom: 1px solid var(--vp-c-divider);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.data-analysis-icon {
+  font-size: 20px;
+}
+
+.data-analysis-title {
+  font-weight: 600;
+  font-size: 15px;
+}
+
+.data-analysis-tabs {
+  display: flex;
+  gap: 6px;
+  padding: 12px 16px;
+  background: var(--vp-c-bg);
+  border-bottom: 1px solid var(--vp-c-divider);
+  overflow-x: auto;
+}
+
+.data-analysis-tab {
+  padding: 8px 14px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  background: var(--vp-c-bg-soft);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 0.2s;
+}
+
+.data-analysis-tab:hover {
+  border-color: var(--vp-c-brand);
+}
+
+.data-analysis-tab.active {
+  background: var(--vp-c-brand);
+  border-color: var(--vp-c-brand);
+  color: white;
+}
+
+.data-analysis-content {
+  padding: 20px;
+}
+
+/* 描述性统计 */
+.stats-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.stats-input-section {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 16px;
+  background: var(--vp-c-bg);
+}
+
+.stats-input-title {
+  font-weight: 600;
+  font-size: 14px;
+  margin-bottom: 6px;
+}
+
+.stats-input-desc {
+  font-size: 12px;
+  color: var(--vp-c-text-3);
+  margin-bottom: 12px;
+}
+
+.stats-input-wrapper {
+  display: flex;
+  gap: 10px;
+}
+
+.stats-input {
+  flex: 1;
+  padding: 10px 12px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  background: var(--vp-c-bg-soft);
+  font-size: 13px;
+  font-family: 'Menlo', 'Monaco', monospace;
+}
+
+.stats-btn {
+  padding: 10px 16px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  background: var(--vp-c-brand);
+  color: white;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.stats-btn:hover {
+  opacity: 0.9;
+}
+
+.stats-results {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 16px;
+  background: var(--vp-c-bg);
+}
+
+.stats-result-title {
+  font-weight: 600;
+  font-size: 14px;
+  margin-bottom: 12px;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 12px;
+}
+
+.stat-card {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  padding: 12px;
+  background: var(--vp-c-bg-soft);
+}
+
+.stat-label {
+  font-size: 12px;
+  color: var(--vp-c-text-3);
+  margin-bottom: 6px;
+}
+
+.stat-value {
+  font-size: 20px;
+  font-weight: 700;
+  margin-bottom: 4px;
+}
+
+.stat-desc {
+  font-size: 11px;
+  color: var(--vp-c-text-3);
+}
+
+.stats-visualization {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 16px;
+  background: var(--vp-c-bg);
+}
+
+.stats-viz-title {
+  font-weight: 600;
+  font-size: 14px;
+  margin-bottom: 12px;
+}
+
+.stats-chart {
+  position: relative;
+  height: 200px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+  padding: 20px;
+}
+
+.stats-chart-bar {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-around;
+  height: 160px;
+  gap: 8px;
+}
+
+.stats-bar-item {
+  flex: 1;
+  max-width: 60px;
+  background: var(--vp-c-brand);
+  border-radius: 4px 4px 0 0;
+  position: relative;
+  transition: all 0.3s;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+}
+
+.stats-bar-value {
+  position: absolute;
+  top: -20px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+.stats-chart-mean {
+  position: absolute;
+  bottom: 20px;
+  left: 0;
+  right: 0;
+  height: 160px;
+}
+
+.stats-mean-line {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: #ef4444;
+  border-left: 2px dashed #ef4444;
+}
+
+.stats-mean-label {
+  position: absolute;
+  top: -25px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: #ef4444;
+  color: white;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+/* 数据聚合 */
+.aggregation-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.aggregation-title {
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.aggregation-table {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--vp-c-bg);
+}
+
+.agg-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+.agg-table th,
+.agg-table td {
+  padding: 10px 12px;
+  text-align: left;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.agg-table th {
+  background: var(--vp-c-bg-alt);
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+.agg-table tbody tr:hover {
+  background: var(--vp-c-bg-soft);
+}
+
+.aggregation-operations {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.agg-op-btn {
+  padding: 8px 14px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  background: var(--vp-c-bg);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.agg-op-btn:hover {
+  border-color: var(--vp-c-brand);
+}
+
+.agg-op-btn.active {
+  background: var(--vp-c-brand);
+  border-color: var(--vp-c-brand);
+  color: white;
+}
+
+.aggregation-result {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 16px;
+  background: var(--vp-c-bg);
+}
+
+.agg-result-title {
+  font-weight: 600;
+  font-size: 13px;
+  margin-bottom: 12px;
+}
+
+.agg-result-table {
+  margin-bottom: 12px;
+}
+
+.agg-result-sql {
+  border-top: 1px solid var(--vp-c-divider);
+  padding-top: 12px;
+}
+
+.agg-sql-title {
+  font-weight: 600;
+  font-size: 12px;
+  margin-bottom: 8px;
+  color: var(--vp-c-text-3);
+}
+
+.agg-sql-code {
+  margin: 0;
+  padding: 10px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+  font-family: 'Menlo', 'Monaco', monospace;
+  font-size: 11px;
+  line-height: 1.5;
+  overflow-x: auto;
+}
+
+/* 漏斗分析 */
+.funnel-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.funnel-title {
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.funnel-description {
+  font-size: 13px;
+  color: var(--vp-c-text-3);
+}
+
+.funnel-visualization {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg);
+}
+
+.funnel-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.funnel-step {
+  background: var(--vp-c-bg-soft);
+  border-radius: 8px;
+  padding: 14px 18px;
+  position: relative;
+  transition: all 0.3s;
+}
+
+.funnel-step-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.funnel-step-name {
+  font-weight: 600;
+  font-size: 13px;
+}
+
+.funnel-step-count {
+  font-size: 12px;
+  color: var(--vp-c-text-3);
+}
+
+.funnel-step-bar {
+  height: 24px;
+  background: linear-gradient(90deg, var(--vp-c-brand), #60a5fa);
+  border-radius: 4px;
+  margin-bottom: 8px;
+}
+
+.funnel-step-conversion {
+  font-size: 12px;
+  color: var(--vp-c-text-3);
+}
+
+.funnel-insights {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 16px;
+  background: var(--vp-c-bg);
+}
+
+.funnel-insights-title {
+  font-weight: 600;
+  font-size: 13px;
+  margin-bottom: 12px;
+}
+
+.funnel-insights-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.funnel-insight {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+}
+
+.funnel-insight-icon {
+  font-size: 16px;
+}
+
+/* 留存分析 */
+.retention-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.retention-title {
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.retention-description {
+  font-size: 13px;
+  color: var(--vp-c-text-3);
+}
+
+.retention-table {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--vp-c-bg);
+}
+
+.retention-table-el {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+.retention-table-el th,
+.retention-table-el td {
+  padding: 10px 12px;
+  text-align: left;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.retention-table-el th {
+  background: var(--vp-c-bg-alt);
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+.retention-table-el tbody tr:hover {
+  background: var(--vp-c-bg-soft);
+}
+
+.retention-high {
+  color: #22c55e;
+  font-weight: 600;
+}
+
+.retention-medium {
+  color: #f59e0b;
+  font-weight: 600;
+}
+
+.retention-low {
+  color: #ef4444;
+  font-weight: 600;
+}
+
+.retention-chart {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 16px;
+  background: var(--vp-c-bg);
+}
+
+.retention-chart-title {
+  font-weight: 600;
+  font-size: 13px;
+  margin-bottom: 12px;
+}
+
+.retention-curve {
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+  padding: 16px;
+}
+
+.retention-svg {
+  width: 100%;
+  height: auto;
+}
+
+.retention-legend {
+  display: flex;
+  gap: 16px;
+  margin-top: 12px;
+  justify-content: center;
+}
+
+.retention-legend-item {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  font-size: 12px;
+}
+
+.retention-legend-color {
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
+}
+
+.retention-legend-text {
+  color: var(--vp-c-text-2);
+}
+
+@media (max-width: 768px) {
+  .stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .aggregation-operations {
+    flex-direction: column;
+  }
+
+  .funnel-steps {
+    gap: 8px;
+  }
+
+  .stats-chart-bar {
+    gap: 4px;
+  }
+
+  .stats-bar-value {
+    font-size: 9px;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/data/DataModelsDemo.vue b/docs/.vitepress/theme/components/appendix/data/DataModelsDemo.vue
new file mode 100644
index 0000000..cf126cc
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/data/DataModelsDemo.vue
@@ -0,0 +1,1264 @@
+<template>
+  <div class="demo">
+    <div class="header">
+      <span class="icon">🗄️</span>
+      <span class="title">数据模型设计演示</span>
+    </div>
+
+    <div class="tabs">
+      <button
+        v-for="tab in tabs"
+        :key="tab.id"
+        :class="['tab', { active: active === tab.id }]"
+        @click="active = tab.id"
+      >
+        {{ tab.icon }} {{ tab.name }}
+      </button>
+    </div>
+
+    <div class="content">
+      <!-- ER 图展示 -->
+      <div v-if="active === 'er'" class="section">
+        <h4>实体关系图（ER Diagram）</h4>
+        <div class="er-diagram">
+          <div class="er-table users">
+            <div class="table-header">
+              <span class="table-name">users</span>
+              <span class="table-type">用户表</span>
+            </div>
+            <div class="table-fields">
+              <div class="field pk">
+                <span class="field-key">PK</span>
+                <code>id</code>
+                <span class="field-type">BIGINT</span>
+              </div>
+              <div class="field">
+                <span class="field-key"></span>
+                <code>username</code>
+                <span class="field-type">VARCHAR(50)</span>
+              </div>
+              <div class="field">
+                <span class="field-key"></span>
+                <code>email</code>
+                <span class="field-type">VARCHAR(100)</span>
+              </div>
+              <div class="field">
+                <span class="field-key"></span>
+                <code>created_at</code>
+                <span class="field-type">TIMESTAMP</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="relationship one-to-many">
+            <div class="rel-line">
+              <span class="rel-cardinality">1</span>
+              <span class="rel-arrow">———⟡</span>
+              <span class="rel-cardinality">N</span>
+            </div>
+            <div class="rel-label">一个用户可以有多个订单</div>
+          </div>
+
+          <div class="er-table orders">
+            <div class="table-header">
+              <span class="table-name">orders</span>
+              <span class="table-type">订单表</span>
+            </div>
+            <div class="table-fields">
+              <div class="field pk">
+                <span class="field-key">PK</span>
+                <code>id</code>
+                <span class="field-type">BIGINT</span>
+              </div>
+              <div class="field fk">
+                <span class="field-key">FK</span>
+                <code>user_id</code>
+                <span class="field-type">BIGINT</span>
+              </div>
+              <div class="field">
+                <span class="field-key"></span>
+                <code>total_amount</code>
+                <span class="field-type">DECIMAL(10,2)</span>
+              </div>
+              <div class="field">
+                <span class="field-key"></span>
+                <code>status</code>
+                <span class="field-type">VARCHAR(20)</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="legend">
+          <div class="legend-item">
+            <span class="legend-key pk">PK</span>
+            <span>主键 (Primary Key)</span>
+          </div>
+          <div class="legend-item">
+            <span class="legend-key fk">FK</span>
+            <span>外键 (Foreign Key)</span>
+          </div>
+          <div class="legend-item">
+            <span class="legend-rel">1 ———⟡ N</span>
+            <span>一对多关系</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 关系类型 -->
+      <div v-if="active === 'relationships'" class="section">
+        <h4>三种基本关系类型</h4>
+        <div class="relationship-cards">
+          <div class="rel-card">
+            <div class="rel-icon">1️⃣</div>
+            <div class="rel-title">一对一 (One-to-One)</div>
+            <div class="rel-example">
+              <div class="rel-tables">
+                <code>users</code> → <code>user_profiles</code>
+              </div>
+              <div class="rel-desc">一个用户只有一个详细资料</div>
+            </div>
+            <div class="rel-sql">
+              <pre>user_id UNIQUE</pre>
+            </div>
+          </div>
+
+          <div class="rel-card">
+            <div class="rel-icon">1️⃣➡️🔢</div>
+            <div class="rel-title">一对多 (One-to-Many)</div>
+            <div class="rel-example">
+              <div class="rel-tables">
+                <code>users</code> → <code>orders</code>
+              </div>
+              <div class="rel-desc">一个用户可以有多个订单</div>
+            </div>
+            <div class="rel-sql">
+              <pre>user_id FOREIGN KEY</pre>
+            </div>
+          </div>
+
+          <div class="rel-card">
+            <div class="rel-icon">🔢↔️🔢</div>
+            <div class="rel-title">多对多 (Many-to-Many)</div>
+            <div class="rel-example">
+              <div class="rel-tables">
+                <code>students</code> ↔ <code>courses</code>
+              </div>
+              <div class="rel-desc">
+                一个学生可以选多门课，一门课可以有多个学生
+              </div>
+            </div>
+            <div class="rel-sql">
+              <pre>
+中间表: enrollments
+- student_id FK
+- course_id FK</pre>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 范式理论 -->
+      <div v-if="active === 'normalization'" class="section">
+        <h4>范式理论：从混乱到有序</h4>
+        <div class="norm-container">
+          <div class="norm-tabs">
+            <button
+              v-for="norm in norms"
+              :key="norm.id"
+              :class="['norm-tab', { active: normId === norm.id }]"
+              @click="normId = norm.id"
+            >
+              {{ norm.name }}
+            </button>
+          </div>
+
+          <div class="norm-content">
+            <div class="norm-header">
+              <span class="norm-title">{{ currentNorm.name }}</span>
+              <span class="norm-desc">{{ currentNorm.desc }}</span>
+            </div>
+
+            <div class="norm-example">
+              <div v-if="currentNorm.before" class="norm-before">
+                <div class="norm-label">
+                  ❌ {{ currentNorm.beforeTitle || '不符合' }}
+                </div>
+                <pre class="norm-code">{{ currentNorm.before }}</pre>
+              </div>
+              <div v-if="currentNorm.after" class="norm-after">
+                <div class="norm-label">
+                  ✅ {{ currentNorm.afterTitle || '符合' }}
+                </div>
+                <pre class="norm-code">{{ currentNorm.after }}</pre>
+              </div>
+            </div>
+
+            <div v-if="currentNorm.note" class="norm-note">
+              <span class="note-icon">💡</span>
+              <span class="note-text">{{ currentNorm.note }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 反范式化 -->
+      <div v-if="active === 'denormalization'" class="section">
+        <h4>反范式化：用空间换时间</h4>
+        <div class="denorm-box">
+          <div class="denorm-scenario">
+            <h5>场景：电商订单查询</h5>
+            <div class="denorm-comparison">
+              <div class="denorm-side norm">
+                <div class="denorm-title">范式化设计</div>
+                <div class="denorm-tables">
+                  <pre class="code-sm">
+orders:      users:
+- id         - id
+- user_id ⟐  - name
+- total      - email
+- status
+                  </pre>
+                </div>
+                <div class="denorm-query">
+                  <div class="query-label">查询 SQL：</div>
+                  <pre class="code-sm">
+SELECT o.*, u.name, u.email
+FROM orders o
+JOIN users u ON o.user_id = u.id
+WHERE o.id = 123;</pre>
+                </div>
+                <div class="denorm-result">
+                  <span class="result-label">结果：</span>
+                  <span class="result-bad">需要 JOIN，查询慢</span>
+                </div>
+              </div>
+
+              <div class="denorm-arrow">→</div>
+
+              <div class="denorm-side denorm">
+                <div class="denorm-title">反范式化设计</div>
+                <div class="denorm-tables">
+                  <pre class="code-sm">
+orders:
+- id
+- user_id
+- user_name     ← 冗余
+- user_email    ← 冗余
+- total
+- status</pre>
+                </div>
+                <div class="denorm-query">
+                  <div class="query-label">查询 SQL：</div>
+                  <pre class="code-sm">
+SELECT *
+FROM orders
+WHERE id = 123;</pre>
+                </div>
+                <div class="denorm-result">
+                  <span class="result-label">结果：</span>
+                  <span class="result-good">单表查询，速度快</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="denorm-tradeoff">
+            <div class="tradeoff-item">
+              <span class="tradeoff-icon">✅</span>
+              <span class="tradeoff-text">查询性能提升，减少 JOIN</span>
+            </div>
+            <div class="tradeoff-item">
+              <span class="tradeoff-icon">⚠️</span>
+              <span class="tradeoff-text">数据冗余，占用更多存储</span>
+            </div>
+            <div class="tradeoff-item">
+              <span class="tradeoff-icon">⚠️</span>
+              <span class="tradeoff-text">更新时需同步冗余字段</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 电商实战 -->
+      <div v-if="active === 'ecommerce'" class="section">
+        <h4>实战：电商系统数据模型</h4>
+        <div class="ecommerce-diagram">
+          <div class="ecosystem">
+            <!-- 用户中心 -->
+            <div class="eco-module users-module">
+              <div class="module-title">用户模块</div>
+              <div class="module-tables">
+                <div class="mini-table">users</div>
+                <div class="mini-table">user_addresses</div>
+                <div class="mini-table">user_profiles</div>
+              </div>
+            </div>
+
+            <!-- 商品中心 -->
+            <div class="eco-module products-module">
+              <div class="module-title">商品模块</div>
+              <div class="module-tables">
+                <div class="mini-table">categories</div>
+                <div class="mini-table">products</div>
+                <div class="mini-table">product_skus</div>
+                <div class="mini-table">product_inventory</div>
+              </div>
+            </div>
+
+            <!-- 订单中心 -->
+            <div class="eco-module orders-module">
+              <div class="module-title">订单模块</div>
+              <div class="module-tables">
+                <div class="mini-table">orders</div>
+                <div class="mini-table">order_items</div>
+                <div class="mini-table">payments</div>
+              </div>
+            </div>
+
+            <!-- 营销中心 -->
+            <div class="eco-module marketing-module">
+              <div class="module-title">营销模块</div>
+              <div class="module-tables">
+                <div class="mini-table">coupons</div>
+                <div class="mini-table">user_coupons</div>
+                <div class="mini-table">promotions</div>
+              </div>
+            </div>
+          </div>
+
+          <div class="relationships">
+            <div class="rel-item">
+              <span class="rel-from">users</span>
+              <span class="rel-type">1:N</span>
+              <span class="rel-to">orders</span>
+            </div>
+            <div class="rel-item">
+              <span class="rel-from">orders</span>
+              <span class="rel-type">1:N</span>
+              <span class="rel-to">order_items</span>
+            </div>
+            <div class="rel-item">
+              <span class="rel-from">products</span>
+              <span class="rel-type">1:N</span>
+              <span class="rel-to">product_skus</span>
+            </div>
+            <div class="rel-item">
+              <span class="rel-from">users & coupons</span>
+              <span class="rel-type">M:N</span>
+              <span class="rel-to">user_coupons</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="design-principles">
+          <div class="principle-item">
+            <span class="principle-icon">📐</span>
+            <div class="principle-text">
+              <strong>适度范式</strong>
+              <div class="principle-desc">
+                核心业务表遵循 3NF，查询表适当反范式化
+              </div>
+            </div>
+          </div>
+          <div class="principle-item">
+            <span class="principle-icon">🔗</span>
+            <div class="principle-text">
+              <strong>明确关系</strong>
+              <div class="principle-desc">通过外键约束保证数据完整性</div>
+            </div>
+          </div>
+          <div class="principle-item">
+            <span class="principle-icon">📊</span>
+            <div class="principle-text">
+              <strong>预留扩展</strong>
+              <div class="principle-desc">
+                使用 JSON 字段存储非结构化扩展数据
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 反模式 -->
+      <div v-if="active === 'antipatterns'" class="section">
+        <h4>常见反模式及改进</h4>
+        <div class="antipatterns-list">
+          <div v-for="anti in antipatterns" :key="anti.id" class="anti-item">
+            <div class="anti-header">
+              <span class="anti-icon">{{ anti.icon }}</span>
+              <span class="anti-title">{{ anti.title }}</span>
+            </div>
+            <div class="anti-problem">
+              <div class="anti-label">❌ 问题</div>
+              <pre class="anti-code">{{ anti.problem }}</pre>
+            </div>
+            <div class="anti-solution">
+              <div class="anti-label">✅ 改进</div>
+              <pre class="anti-code">{{ anti.solution }}</pre>
+            </div>
+            <div v-if="anti.impact" class="anti-impact">
+              <span class="impact-icon">💥</span>
+              <span class="impact-text">{{ anti.impact }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const active = ref('er')
+const normId = ref('1nf')
+
+const tabs = [
+  { id: 'er', icon: '📊', name: 'ER 图' },
+  { id: 'relationships', icon: '🔗', name: '关系类型' },
+  { id: 'normalization', icon: '📐', name: '范式理论' },
+  { id: 'denormalization', icon: '⚡', name: '反范式化' },
+  { id: 'ecommerce', icon: '🛒', name: '电商实战' },
+  { id: 'antipatterns', icon: '⚠️', name: '反模式' }
+]
+
+const norms = [
+  {
+    id: '1nf',
+    name: '第一范式 (1NF)',
+    desc: '每个字段都是不可再分的最小数据单元',
+    beforeTitle: '不符合 1NF',
+    before: `users 表:
+| id | name           |
+|----|----------------|
+| 1  | 张三,北京,工程师 |`,
+    afterTitle: '符合 1NF',
+    after: `users 表:
+| id | name | city   | role    |
+|----|------|--------|---------|
+| 1  | 张三 | 北京   | 工程师  |`,
+    note: '字段原子性：一个字段只存储一个值'
+  },
+  {
+    id: '2nf',
+    name: '第二范式 (2NF)',
+    desc: '在 1NF 基础上，非主键字段完全依赖于主键',
+    beforeTitle: '不符合 2NF',
+    before: `order_items 表:
+| id | order_id | product_name | quantity | unit_price |
+|----|----------|--------------|----------|------------|
+| 1  | 100      | iPhone       | 2        | 5999       |`,
+    afterTitle: '符合 2NF',
+    after: `order_items 表:
+| id | order_id | product_id | quantity |
+|----|----------|------------|----------|
+| 1  | 100      | 1          | 2        |
+
+products 表:
+| id | name       | price    |
+|----|------------|----------|
+| 1  | iPhone     | 5999     |`,
+    note: '消除部分依赖：product_name 只依赖 product_id，不依赖 (order_id, product_id) 联合主键'
+  },
+  {
+    id: '3nf',
+    name: '第三范式 (3NF)',
+    desc: '在 2NF 基础上，非主键字段不传递依赖主键',
+    beforeTitle: '不符合 3NF',
+    before: `orders 表:
+| id | user_id | total | user_level | discount |
+|----|---------|-------|------------|----------|
+| 1  | 100     | 500   | VIP        | 0.9      |`,
+    afterTitle: '符合 3NF',
+    after: `orders 表:
+| id | user_id | total | discount |
+|----|---------|-------|----------|
+| 1  | 100     | 500   | 0.9      |
+
+users 表:
+| id | level |
+|----|-------|
+| 100| VIP   |`,
+    note: '消除传递依赖：user_level 依赖 user_id，再依赖 orders.id'
+  }
+]
+
+const antipatterns = [
+  {
+    id: 'flat',
+    icon: '📋',
+    title: '巨型宽表',
+    problem: `big_table 表:
+- id
+- user_name
+- user_email
+- user_phone
+- user_address_city
+- user_address_street
+- order_1_id
+- order_1_amount
+- order_2_id
+- order_2_amount
+- ...（订单字段重复 100 次）`,
+    solution: `users 表:
+- id
+- name
+- email
+- phone
+
+orders 表:
+- id
+- user_id
+- amount
+- created_at`,
+    impact: '字段数量爆炸，空值多，扩展困难'
+  },
+  {
+    id: 'comma',
+    icon: '🔢',
+    title: '逗号分隔值',
+    problem: `posts 表:
+| id | title      | tags               |
+|----|------------|--------------------|
+| 1  | Vue入门    | vue,frontend,jjs   |`,
+    solution: `posts 表:
+| id | title      |
+|----|------------|
+| 1  | Vue入门    |
+
+post_tags 表:
+| post_id | tag_id |
+|---------|--------|
+| 1       | 1      |
+| 1       | 2      |
+
+tags 表:
+| id | name      |
+|----|-----------|
+| 1  | vue       |
+| 2  | frontend |`,
+    impact: '无法索引，无法关联查询，无法统计'
+  },
+  {
+    id: 'json',
+    icon: '📦',
+    title: '滥用 JSON 字段',
+    problem: `orders 表:
+| id | user_id | items                  | total |
+|----|---------|------------------------|-------|
+| 1  | 100     | [{"pid":1,"qty":2}]    | 200   |`,
+    solution: `orders 表:
+| id | user_id | total |
+|----|---------|-------|
+| 1  | 100     | 200   |
+
+order_items 表:
+| id | order_id | product_id | quantity |
+|----|----------|------------|----------|
+| 1  | 1        | 1          | 2        |`,
+    impact: '无法建立外键约束，无法有效索引，数据完整性差'
+  }
+]
+
+const currentNorm = computed(() => {
+  return norms.find((n) => n.id === normId.value) || norms[0]
+})
+</script>
+
+<style scoped>
+.demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  background: var(--vp-c-bg-soft);
+  margin: 24px 0;
+  overflow: hidden;
+}
+
+.header {
+  padding: 14px 20px;
+  background: var(--vp-c-bg);
+  border-bottom: 1px solid var(--vp-c-divider);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.icon {
+  font-size: 20px;
+}
+
+.title {
+  font-weight: 600;
+  font-size: 15px;
+}
+
+.tabs {
+  display: flex;
+  gap: 4px;
+  padding: 10px 12px;
+  background: var(--vp-c-bg);
+  border-bottom: 1px solid var(--vp-c-divider);
+  overflow-x: auto;
+}
+
+.tab {
+  padding: 6px 12px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  background: var(--vp-c-bg-soft);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 0.2s;
+}
+
+.tab:hover {
+  border-color: var(--vp-c-brand);
+}
+
+.tab.active {
+  background: var(--vp-c-brand);
+  border-color: var(--vp-c-brand);
+  color: white;
+}
+
+.content {
+  padding: 16px;
+}
+
+.section h4 {
+  margin: 0 0 14px 0;
+  font-size: 15px;
+}
+
+/* ER Diagram Styles */
+.er-diagram {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  margin-bottom: 16px;
+}
+
+.er-table {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  overflow: hidden;
+  min-width: 280px;
+}
+
+.table-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 14px;
+  background: var(--vp-c-bg-soft);
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.table-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--vp-c-brand);
+}
+
+.table-type {
+  font-size: 11px;
+  color: var(--vp-c-text-3);
+}
+
+.table-fields {
+  display: flex;
+  flex-direction: column;
+}
+
+.field {
+  display: grid;
+  grid-template-columns: 32px 1fr 80px;
+  gap: 8px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--vp-c-divider);
+  align-items: center;
+  font-size: 12px;
+}
+
+.field:last-child {
+  border-bottom: none;
+}
+
+.field.pk {
+  background: color-mix(in srgb, #22c55e 8%, var(--vp-c-bg));
+}
+
+.field.fk {
+  background: color-mix(in srgb, #3b82f6 8%, var(--vp-c-bg));
+}
+
+.field-key {
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--vp-c-text-3);
+}
+
+.field.pk .field-key {
+  color: #22c55e;
+}
+
+.field.fk .field-key {
+  color: #3b82f6;
+}
+
+.field code {
+  font-size: 11px;
+  color: var(--vp-c-text-1);
+}
+
+.field-type {
+  font-size: 10px;
+  color: var(--vp-c-text-3);
+  text-align: right;
+}
+
+.relationship {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+}
+
+.rel-line {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+  color: var(--vp-c-text-2);
+}
+
+.rel-cardinality {
+  font-weight: 600;
+  color: var(--vp-c-brand);
+}
+
+.rel-arrow {
+  font-size: 16px;
+}
+
+.rel-label {
+  font-size: 11px;
+  color: var(--vp-c-text-3);
+}
+
+.legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  padding: 12px;
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+  font-size: 11px;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.legend-key {
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 10px;
+  font-weight: 600;
+}
+
+.legend-key.pk {
+  background: color-mix(in srgb, #22c55e 20%, transparent);
+  color: #22c55e;
+}
+
+.legend-key.fk {
+  background: color-mix(in srgb, #3b82f6 20%, transparent);
+  color: #3b82f6;
+}
+
+.legend-rel {
+  font-size: 12px;
+}
+
+/* Relationship Cards */
+.relationship-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 12px;
+}
+
+.rel-card {
+  padding: 14px;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+}
+
+.rel-icon {
+  font-size: 24px;
+  margin-bottom: 8px;
+}
+
+.rel-title {
+  font-size: 13px;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+
+.rel-example {
+  margin-bottom: 10px;
+}
+
+.rel-tables {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 6px;
+}
+
+.rel-tables code {
+  background: var(--vp-c-bg-soft);
+  padding: 3px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+}
+
+.rel-desc {
+  font-size: 11px;
+  color: var(--vp-c-text-3);
+}
+
+.rel-sql {
+  background: color-mix(in srgb, #22c55e 8%, var(--vp-c-bg));
+  padding: 8px;
+  border-radius: 4px;
+}
+
+.rel-sql pre {
+  margin: 0;
+  font-size: 10px;
+  line-height: 1.4;
+  color: var(--vp-c-text-2);
+}
+
+/* Normalization Styles */
+.norm-container {
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.norm-tabs {
+  display: flex;
+  gap: 2px;
+  padding: 8px;
+  background: var(--vp-c-bg-soft);
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.norm-tab {
+  padding: 6px 14px;
+  border: none;
+  background: transparent;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.norm-tab:hover {
+  background: var(--vp-c-bg-soft);
+}
+
+.norm-tab.active {
+  background: var(--vp-c-brand);
+  color: white;
+}
+
+.norm-content {
+  padding: 14px;
+}
+
+.norm-header {
+  margin-bottom: 14px;
+}
+
+.norm-title {
+  font-size: 14px;
+  font-weight: 600;
+  display: block;
+  margin-bottom: 4px;
+}
+
+.norm-desc {
+  font-size: 12px;
+  color: var(--vp-c-text-3);
+}
+
+.norm-example {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+@media (min-width: 768px) {
+  .norm-example {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.norm-before,
+.norm-after {
+  padding: 12px;
+  border-radius: 6px;
+}
+
+.norm-before {
+  background: color-mix(in srgb, #ef4444 8%, var(--vp-c-bg));
+  border: 1px solid color-mix(in srgb, #ef4444 20%, transparent);
+}
+
+.norm-after {
+  background: color-mix(in srgb, #22c55e 8%, var(--vp-c-bg));
+  border: 1px solid color-mix(in srgb, #22c55e 20%, transparent);
+}
+
+.norm-label {
+  font-size: 12px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.norm-code {
+  background: #1e293b;
+  color: #e2e8f0;
+  padding: 10px;
+  border-radius: 6px;
+  font-family: 'Menlo', monospace;
+  font-size: 10px;
+  line-height: 1.5;
+  overflow-x: auto;
+  margin: 0;
+}
+
+.norm-note {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+  font-size: 11px;
+}
+
+.note-icon {
+  font-size: 14px;
+}
+
+.note-text {
+  color: var(--vp-c-text-2);
+}
+
+/* Denormalization */
+.denorm-box {
+  background: var(--vp-c-bg);
+  padding: 14px;
+  border-radius: 8px;
+}
+
+.denorm-scenario {
+  margin-bottom: 14px;
+}
+
+.denorm-scenario h5 {
+  margin: 0 0 12px 0;
+  font-size: 13px;
+}
+
+.denorm-comparison {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 12px;
+  align-items: center;
+}
+
+@media (min-width: 768px) {
+  .denorm-comparison {
+    grid-template-columns: 1fr auto 1fr;
+  }
+}
+
+.denorm-side {
+  padding: 12px;
+  border-radius: 6px;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.denorm-side.norm {
+  background: color-mix(in srgb, #ef4444 5%, var(--vp-c-bg));
+}
+
+.denorm-side.denorm {
+  background: color-mix(in srgb, #22c55e 5%, var(--vp-c-bg));
+}
+
+.denorm-title {
+  font-size: 12px;
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+
+.denorm-tables {
+  margin-bottom: 10px;
+}
+
+.denorm-query {
+  margin-bottom: 10px;
+}
+
+.query-label {
+  font-size: 11px;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.denorm-result {
+  font-size: 11px;
+}
+
+.result-label {
+  font-weight: 600;
+}
+
+.result-bad {
+  color: #ef4444;
+}
+
+.result-good {
+  color: #22c55e;
+}
+
+.denorm-arrow {
+  font-size: 20px;
+  color: var(--vp-c-text-3);
+}
+
+.denorm-tradeoff {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+}
+
+.tradeoff-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+}
+
+.tradeoff-icon {
+  font-size: 14px;
+}
+
+/* E-commerce Diagram */
+.ecommerce-diagram {
+  background: var(--vp-c-bg);
+  padding: 14px;
+  border-radius: 8px;
+  margin-bottom: 14px;
+}
+
+.ecosystem {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+  margin-bottom: 14px;
+}
+
+@media (min-width: 768px) {
+  .ecosystem {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.eco-module {
+  padding: 12px;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+}
+
+.module-title {
+  font-size: 12px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  color: var(--vp-c-brand);
+}
+
+.module-tables {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.mini-table {
+  padding: 6px 10px;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+  font-size: 11px;
+  font-family: 'Menlo', monospace;
+}
+
+.relationships {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.rel-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 4px;
+  font-size: 11px;
+}
+
+.rel-from,
+.rel-to {
+  font-family: 'Menlo', monospace;
+  color: var(--vp-c-brand);
+}
+
+.rel-type {
+  font-weight: 600;
+  color: var(--vp-c-text-3);
+}
+
+.design-principles {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.principle-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 10px 12px;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+}
+
+.principle-icon {
+  font-size: 18px;
+}
+
+.principle-text {
+  flex: 1;
+}
+
+.principle-text strong {
+  display: block;
+  font-size: 12px;
+  margin-bottom: 2px;
+}
+
+.principle-desc {
+  font-size: 11px;
+  color: var(--vp-c-text-3);
+}
+
+/* Antipatterns */
+.antipatterns-list {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.anti-item {
+  background: var(--vp-c-bg);
+  padding: 12px;
+  border-radius: 6px;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.anti-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.anti-icon {
+  font-size: 18px;
+}
+
+.anti-title {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.anti-problem,
+.anti-solution {
+  margin-bottom: 8px;
+}
+
+.anti-label {
+  font-size: 11px;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.anti-code {
+  background: #1e293b;
+  color: #e2e8f0;
+  padding: 10px;
+  border-radius: 6px;
+  font-family: 'Menlo', monospace;
+  font-size: 10px;
+  line-height: 1.4;
+  overflow-x: auto;
+  margin: 0;
+}
+
+.anti-impact {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--vp-c-text-3);
+}
+
+.impact-icon {
+  font-size: 14px;
+}
+
+.code-sm {
+  background: #1e293b;
+  color: #e2e8f0;
+  padding: 10px;
+  border-radius: 6px;
+  font-family: 'Menlo', monospace;
+  font-size: 10px;
+  line-height: 1.5;
+  overflow-x: auto;
+  margin: 0;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/data/SqlDemo.vue b/docs/.vitepress/theme/components/appendix/data/SqlDemo.vue
new file mode 100644
index 0000000..5d9c760
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/data/SqlDemo.vue
@@ -0,0 +1,974 @@
+<template>
+  <div class="sql-root">
+    <div class="sql-header">
+      <span class="sql-icon">🗄️</span>
+      <span class="sql-title">SQL 演示</span>
+    </div>
+
+    <div class="sql-tabs">
+      <button
+        v-for="tab in tabs"
+        :key="tab.id"
+        :class="['sql-tab', { active: activeTab === tab.id }]"
+        @click="activeTab = tab.id"
+      >
+        {{ tab.icon }} {{ tab.name }}
+      </button>
+    </div>
+
+    <div class="sql-content">
+      <!-- CRUD 演示 -->
+      <div v-if="activeTab === 'crud'" class="sql-section">
+        <div class="sql-editor">
+          <div class="sql-editor-header">
+            <span class="sql-editor-title">SQL 编辑器</span>
+          </div>
+          <div class="sql-editor-body">
+            <div class="sql-code" contenteditable="true" @blur="updateQuery">
+              {{ currentQuery }}
+            </div>
+          </div>
+          <div class="sql-editor-footer">
+            <button class="sql-btn sql-btn-run" @click="runQuery">
+              ▶ 运行
+            </button>
+            <select
+              v-model="selectedQuery"
+              class="sql-select"
+              @change="selectQuery"
+            >
+              <option value="">选择示例...</option>
+              <option value="select">SELECT 查询</option>
+              <option value="insert">INSERT 插入</option>
+              <option value="update">UPDATE 更新</option>
+              <option value="delete">DELETE 删除</option>
+            </select>
+          </div>
+        </div>
+
+        <div class="sql-result">
+          <div class="sql-result-header">
+            <span class="sql-result-title">查询结果</span>
+            <span class="sql-result-count">{{ result.length }} 行</span>
+          </div>
+          <div class="sql-result-body">
+            <table class="sql-table">
+              <thead>
+                <tr>
+                  <th v-for="col in columns" :key="col">{{ col }}</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(row, i) in result" :key="i">
+                  <td v-for="col in columns" :key="col">{{ row[col] }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+
+      <!-- JOIN 演示 -->
+      <div v-else-if="activeTab === 'join'" class="sql-section">
+        <div class="join-diagram">
+          <div class="join-title">JOIN 类型对比</div>
+          <div class="join-grid">
+            <div
+              v-for="join in joins"
+              :key="join.type"
+              class="join-card"
+              :class="{ 'join-card-active': activeJoin === join.type }"
+              @click="activeJoin = join.type"
+            >
+              <div class="join-name">{{ join.name }}</div>
+              <div class="join-desc">{{ join.desc }}</div>
+              <div class="join-viz">
+                <div class="join-circle join-left"></div>
+                <div class="join-circle join-right"></div>
+                <div :class="['join-highlight', join.highlight]"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="join-result">
+          <div class="join-sql">
+            <div class="join-sql-title">SQL 示例</div>
+            <pre class="join-code">{{ currentJoin.sql }}</pre>
+          </div>
+          <div class="join-table">
+            <div class="join-table-title">查询结果</div>
+            <table class="sql-table">
+              <thead>
+                <tr>
+                  <th v-for="col in currentJoin.columns" :key="col">
+                    {{ col }}
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(row, i) in currentJoin.data" :key="i">
+                  <td v-for="col in currentJoin.columns" :key="col">
+                    {{ row[col] }}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+
+      <!-- 索引演示 -->
+      <div v-else-if="activeTab === 'index'" class="sql-section">
+        <div class="index-demo">
+          <div class="index-title">索引原理</div>
+          <div class="index-comparison">
+            <div class="index-side">
+              <div class="index-side-title">无索引</div>
+              <div class="index-visual index-no-index">
+                <div v-for="i in 8" :key="i" class="index-item">
+                  {{ indexData[i - 1] }}
+                </div>
+              </div>
+              <div class="index-stats">
+                <div class="index-stat">
+                  <span class="index-stat-label">查找 ID=5:</span>
+                  <span class="index-stat-value">需要扫描 5 次</span>
+                </div>
+              </div>
+            </div>
+
+            <div class="index-side">
+              <div class="index-side-title">有索引 (B+树)</div>
+              <div class="index-visual index-tree">
+                <div class="index-tree-level">
+                  <div class="index-tree-node">1-8</div>
+                </div>
+                <div class="index-tree-level">
+                  <div class="index-tree-node">1-4</div>
+                  <div class="index-tree-node">5-8</div>
+                </div>
+                <div class="index-tree-level">
+                  <div v-for="i in 8" :key="i" class="index-tree-node-small">
+                    {{ i }}
+                  </div>
+                </div>
+              </div>
+              <div class="index-stats">
+                <div class="index-stat">
+                  <span class="index-stat-label">查找 ID=5:</span>
+                  <span class="index-stat-value index-fast">只需 3 次比较</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="index-tips">
+          <div class="index-tip-title">索引使用建议</div>
+          <ul class="index-tips-list">
+            <li>✓ 在 WHERE、JOIN、ORDER BY 列上创建索引</li>
+            <li>✓ 选择性高的列适合建索引（如手机号、用户名）</li>
+            <li>✗ 避免在低选择性列上建索引（如性别、状态）</li>
+            <li>✗ 索引会降低写入性能，不要过度索引</li>
+          </ul>
+        </div>
+      </div>
+
+      <!-- 事务演示 -->
+      <div v-else-if="activeTab === 'transaction'" class="sql-section">
+        <div class="transaction-demo">
+          <div class="transaction-title">ACID 特性</div>
+          <div class="acid-grid">
+            <div
+              v-for="acid in acids"
+              :key="acid.id"
+              class="acid-card"
+              :class="{ 'acid-card-active': activeAcid === acid.id }"
+              @click="activeAcid = acid.id"
+            >
+              <div class="acid-letter">{{ acid.letter }}</div>
+              <div class="acid-name">{{ acid.name }}</div>
+              <div class="acid-desc">{{ acid.desc }}</div>
+              <div class="acid-example">{{ acid.example }}</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="transaction-flow">
+          <div class="transaction-flow-title">转账示例</div>
+          <div class="transaction-steps">
+            <div class="transaction-step">
+              <div class="transaction-step-number">1</div>
+              <div class="transaction-step-content">
+                <div class="transaction-step-title">开始事务</div>
+                <code>BEGIN;</code>
+              </div>
+            </div>
+            <div class="transaction-step">
+              <div class="transaction-step-number">2</div>
+              <div class="transaction-step-content">
+                <div class="transaction-step-title">扣款</div>
+                <code>UPDATE accounts SET balance = balance - 100 WHERE user_id =
+                  1;</code>
+              </div>
+            </div>
+            <div class="transaction-step">
+              <div class="transaction-step-number">3</div>
+              <div class="transaction-step-content">
+                <div class="transaction-step-title">收款</div>
+                <code>UPDATE accounts SET balance = balance + 100 WHERE user_id =
+                  2;</code>
+              </div>
+            </div>
+            <div class="transaction-step">
+              <div class="transaction-step-number">4</div>
+              <div class="transaction-step-content">
+                <div class="transaction-step-title">提交事务</div>
+                <code>COMMIT;</code>
+              </div>
+            </div>
+          </div>
+          <div class="transaction-note">
+            如果步骤 2 或 3 失败，整个事务会回滚（ROLLBACK），保证原子性
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const activeTab = ref('crud')
+const activeJoin = ref('inner')
+const activeAcid = ref('atomicity')
+const selectedQuery = ref('')
+const currentQuery = ref('SELECT * FROM users;')
+
+const tabs = [
+  { id: 'crud', name: 'CRUD 操作', icon: '📝' },
+  { id: 'join', name: 'JOIN 查询', icon: '🔗' },
+  { id: 'index', name: '索引', icon: '📇' },
+  { id: 'transaction', name: '事务', icon: '🔄' }
+]
+
+const queries = {
+  select: 'SELECT id, name, email FROM users WHERE age > 18;',
+  insert:
+    "INSERT INTO users (name, email, age) VALUES ('王五', 'wangwu@example.com', 25);",
+  update: 'UPDATE users SET age = 26 WHERE id = 1;',
+  delete: 'DELETE FROM users WHERE id = 3;'
+}
+
+const indexData = ref([1, 2, 3, 4, 5, 6, 7, 8])
+
+const columns = ref(['id', 'name', 'email', 'age'])
+const result = ref([
+  { id: 1, name: '张三', email: 'zhangsan@example.com', age: 28 },
+  { id: 2, name: '李四', email: 'lisi@example.com', age: 32 },
+  { id: 3, name: '王五', email: 'wangwu@example.com', age: 25 }
+])
+
+const joins = {
+  inner: {
+    type: 'inner',
+    name: 'INNER JOIN',
+    desc: '只返回两个表中匹配的行',
+    highlight: 'join-highlight-intersect',
+    sql: `SELECT users.name, orders.order_id
+FROM users
+INNER JOIN orders ON users.id = orders.user_id;`,
+    columns: ['name', 'order_id'],
+    data: [
+      { name: '张三', order_id: 'ORD001' },
+      { name: '李四', order_id: 'ORD002' }
+    ]
+  },
+  left: {
+    type: 'left',
+    name: 'LEFT JOIN',
+    desc: '返回左表所有行，右表不匹配的填 NULL',
+    highlight: 'join-highlight-left',
+    sql: `SELECT users.name, orders.order_id
+FROM users
+LEFT JOIN orders ON users.id = orders.user_id;`,
+    columns: ['name', 'order_id'],
+    data: [
+      { name: '张三', order_id: 'ORD001' },
+      { name: '李四', order_id: 'ORD002' },
+      { name: '王五', order_id: 'NULL' }
+    ]
+  },
+  right: {
+    type: 'right',
+    name: 'RIGHT JOIN',
+    desc: '返回右表所有行，左表不匹配的填 NULL',
+    highlight: 'join-highlight-right',
+    sql: `SELECT users.name, orders.order_id
+FROM users
+RIGHT JOIN orders ON users.id = orders.user_id;`,
+    columns: ['name', 'order_id'],
+    data: [
+      { name: '张三', order_id: 'ORD001' },
+      { name: '李四', order_id: 'ORD002' },
+      { name: 'NULL', order_id: 'ORD003' }
+    ]
+  },
+  full: {
+    type: 'full',
+    name: 'FULL OUTER JOIN',
+    desc: '返回两个表所有行，不匹配的填 NULL',
+    highlight: 'join-highlight-full',
+    sql: `SELECT users.name, orders.order_id
+FROM users
+FULL OUTER JOIN orders ON users.id = orders.user_id;`,
+    columns: ['name', 'order_id'],
+    data: [
+      { name: '张三', order_id: 'ORD001' },
+      { name: '李四', order_id: 'ORD002' },
+      { name: '王五', order_id: 'NULL' },
+      { name: 'NULL', order_id: 'ORD003' }
+    ]
+  }
+}
+
+const acids = {
+  atomicity: {
+    id: 'atomicity',
+    letter: 'A',
+    name: '原子性',
+    desc: '事务中的操作要么全部成功，要么全部失败',
+    example: '转账：要么同时成功，要么同时回滚'
+  },
+  consistency: {
+    id: 'consistency',
+    letter: 'C',
+    name: '一致性',
+    desc: '事务前后数据库状态一致，满足约束',
+    example: '转账前后总金额不变'
+  },
+  isolation: {
+    id: 'isolation',
+    letter: 'I',
+    name: '隔离性',
+    desc: '并发事务之间互不干扰',
+    example: '两个用户同时转账，不会相互影响'
+  },
+  durability: {
+    id: 'durability',
+    letter: 'D',
+    name: '持久性',
+    desc: '事务提交后，永久保存，即使系统故障',
+    example: '转账成功后，断电也不会丢失'
+  }
+}
+
+const currentJoin = computed(() => joins[activeJoin.value])
+
+function updateQuery(e) {
+  currentQuery.value = e.target.textContent
+}
+
+function selectQuery() {
+  if (selectedQuery.value && queries[selectedQuery.value]) {
+    currentQuery.value = queries[selectedQuery.value]
+  }
+}
+
+function runQuery() {
+  // 模拟查询执行
+  console.log('Running query:', currentQuery.value)
+}
+</script>
+
+<style scoped>
+.sql-root {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  background: var(--vp-c-bg-soft);
+  margin: 24px 0;
+  overflow: hidden;
+}
+
+.sql-header {
+  padding: 14px 20px;
+  background: var(--vp-c-bg);
+  border-bottom: 1px solid var(--vp-c-divider);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.sql-icon {
+  font-size: 20px;
+}
+
+.sql-title {
+  font-weight: 600;
+  font-size: 15px;
+}
+
+.sql-tabs {
+  display: flex;
+  gap: 6px;
+  padding: 12px 16px;
+  background: var(--vp-c-bg);
+  border-bottom: 1px solid var(--vp-c-divider);
+  overflow-x: auto;
+}
+
+.sql-tab {
+  padding: 8px 14px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  background: var(--vp-c-bg-soft);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 0.2s;
+}
+
+.sql-tab:hover {
+  border-color: var(--vp-c-brand);
+}
+
+.sql-tab.active {
+  background: var(--vp-c-brand);
+  border-color: var(--vp-c-brand);
+  color: white;
+}
+
+.sql-content {
+  padding: 20px;
+}
+
+/* CRUD 演示 */
+.sql-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.sql-editor,
+.sql-result {
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg);
+  overflow: hidden;
+}
+
+.sql-editor-header,
+.sql-result-header {
+  padding: 10px 12px;
+  background: var(--vp-c-bg-alt);
+  border-bottom: 1px solid var(--vp-c-divider);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.sql-editor-title,
+.sql-result-title {
+  font-weight: 600;
+  font-size: 13px;
+}
+
+.sql-result-count {
+  font-size: 11px;
+  color: var(--vp-c-text-3);
+  background: var(--vp-c-bg-soft);
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
+.sql-editor-body,
+.sql-result-body {
+  padding: 12px;
+}
+
+.sql-code {
+  font-family: 'Menlo', 'Monaco', monospace;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--vp-c-text-1);
+  background: var(--vp-c-bg-soft);
+  padding: 12px;
+  border-radius: 6px;
+  min-height: 80px;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.sql-editor-footer {
+  padding: 10px 12px;
+  background: var(--vp-c-bg-alt);
+  border-top: 1px solid var(--vp-c-divider);
+  display: flex;
+  gap: 10px;
+}
+
+.sql-btn {
+  padding: 8px 16px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  background: var(--vp-c-bg-soft);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.sql-btn:hover {
+  border-color: var(--vp-c-brand);
+}
+
+.sql-btn-run {
+  background: var(--vp-c-brand);
+  border-color: var(--vp-c-brand);
+  color: white;
+}
+
+.sql-select {
+  flex: 1;
+  padding: 8px 10px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  background: var(--vp-c-bg);
+  font-size: 13px;
+}
+
+.sql-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+.sql-table th,
+.sql-table td {
+  padding: 10px;
+  text-align: left;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.sql-table th {
+  background: var(--vp-c-bg-alt);
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+.sql-table tbody tr:hover {
+  background: var(--vp-c-bg-soft);
+}
+
+/* JOIN 演示 */
+.join-diagram {
+  margin-bottom: 20px;
+}
+
+.join-title {
+  font-weight: 600;
+  font-size: 14px;
+  margin-bottom: 12px;
+}
+
+.join-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 12px;
+}
+
+.join-card {
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 12px;
+  background: var(--vp-c-bg);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.join-card:hover,
+.join-card-active {
+  border-color: var(--vp-c-brand);
+}
+
+.join-name {
+  font-weight: 600;
+  font-size: 13px;
+  margin-bottom: 6px;
+}
+
+.join-desc {
+  font-size: 12px;
+  color: var(--vp-c-text-3);
+  margin-bottom: 10px;
+}
+
+.join-viz {
+  position: relative;
+  height: 80px;
+}
+
+.join-circle {
+  position: absolute;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background: var(--vp-c-bg-soft);
+  border: 2px solid var(--vp-c-divider);
+  top: 10px;
+}
+
+.join-left {
+  left: 10px;
+}
+
+.join-right {
+  right: 10px;
+}
+
+.join-highlight {
+  position: absolute;
+  top: 10px;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background: rgba(59, 130, 246, 0.2);
+}
+
+.join-highlight-intersect {
+  left: 25px;
+  width: 50px;
+  height: 50px;
+}
+
+.join-highlight-left {
+  left: 10px;
+  width: 60px;
+}
+
+.join-highlight-right {
+  right: 10px;
+  width: 60px;
+}
+
+.join-highlight-full {
+  left: 10px;
+  width: calc(100% - 20px);
+  border-radius: 8px;
+}
+
+.join-result {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+.join-sql,
+.join-table {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 12px;
+  background: var(--vp-c-bg);
+}
+
+.join-sql-title,
+.join-table-title {
+  font-weight: 600;
+  font-size: 13px;
+  margin-bottom: 10px;
+}
+
+.join-code {
+  margin: 0;
+  padding: 10px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+  font-family: 'Menlo', 'Monaco', monospace;
+  font-size: 11px;
+  line-height: 1.5;
+  overflow-x: auto;
+}
+
+/* 索引演示 */
+.index-demo {
+  margin-bottom: 16px;
+}
+
+.index-title {
+  font-weight: 600;
+  font-size: 14px;
+  margin-bottom: 12px;
+}
+
+.index-comparison {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+
+.index-side {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 14px;
+  background: var(--vp-c-bg);
+}
+
+.index-side-title {
+  font-weight: 600;
+  font-size: 13px;
+  margin-bottom: 12px;
+  text-align: center;
+}
+
+.index-visual {
+  min-height: 120px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+  padding: 10px;
+  margin-bottom: 12px;
+}
+
+.index-no-index {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.index-item {
+  padding: 6px 10px;
+  background: var(--vp-c-bg);
+  border-radius: 4px;
+  font-family: 'Menlo', 'Monaco', monospace;
+  font-size: 11px;
+}
+
+.index-tree {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.index-tree-level {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+}
+
+.index-tree-node {
+  padding: 6px 12px;
+  background: var(--vp-c-brand);
+  color: white;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.index-tree-node-small {
+  padding: 4px 8px;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+  font-size: 11px;
+  font-family: 'Menlo', 'Monaco', monospace;
+}
+
+.index-stats {
+  text-align: center;
+}
+
+.index-stat {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 12px;
+}
+
+.index-stat-label {
+  color: var(--vp-c-text-3);
+}
+
+.index-stat-value {
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+.index-fast {
+  color: #22c55e;
+}
+
+.index-tips {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 14px;
+  background: var(--vp-c-bg);
+}
+
+.index-tip-title {
+  font-weight: 600;
+  font-size: 13px;
+  margin-bottom: 10px;
+}
+
+.index-tips-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.index-tips-list li {
+  padding: 6px 0;
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+}
+
+/* 事务演示 */
+.transaction-demo {
+  margin-bottom: 16px;
+}
+
+.transaction-title {
+  font-weight: 600;
+  font-size: 14px;
+  margin-bottom: 12px;
+}
+
+.acid-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 12px;
+}
+
+.acid-card {
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 14px;
+  background: var(--vp-c-bg);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.acid-card:hover,
+.acid-card-active {
+  border-color: var(--vp-c-brand);
+}
+
+.acid-letter {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: var(--vp-c-brand);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 18px;
+  margin-bottom: 10px;
+}
+
+.acid-name {
+  font-weight: 600;
+  font-size: 14px;
+  margin-bottom: 6px;
+}
+
+.acid-desc {
+  font-size: 12px;
+  color: var(--vp-c-text-3);
+  margin-bottom: 8px;
+}
+
+.acid-example {
+  font-size: 12px;
+  color: var(--vp-c-text-2);
+  font-style: italic;
+}
+
+.transaction-flow {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 14px;
+  background: var(--vp-c-bg);
+}
+
+.transaction-flow-title {
+  font-weight: 600;
+  font-size: 13px;
+  margin-bottom: 12px;
+}
+
+.transaction-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.transaction-step {
+  display: flex;
+  gap: 12px;
+}
+
+.transaction-step-number {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--vp-c-brand);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 13px;
+  flex-shrink: 0;
+}
+
+.transaction-step-content {
+  flex: 1;
+}
+
+.transaction-step-title {
+  font-weight: 600;
+  font-size: 13px;
+  margin-bottom: 4px;
+}
+
+.transaction-step-content code {
+  display: block;
+  font-family: 'Menlo', 'Monaco', monospace;
+  font-size: 11px;
+  color: var(--vp-c-text-2);
+  background: var(--vp-c-bg-soft);
+  padding: 8px;
+  border-radius: 4px;
+  margin-top: 4px;
+  word-break: break-all;
+}
+
+.transaction-note {
+  font-size: 12px;
+  color: var(--vp-c-text-3);
+  padding: 10px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+}
+
+@media (max-width: 768px) {
+  .join-result,
+  .index-comparison {
+    grid-template-columns: 1fr;
+  }
+
+  .acid-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .sql-editor-footer {
+    flex-direction: column;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/server-backend/HttpProtocolDemo.vue b/docs/.vitepress/theme/components/appendix/server-backend/HttpProtocolDemo.vue
new file mode 100644
index 0000000..240df05
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/server-backend/HttpProtocolDemo.vue
@@ -0,0 +1,971 @@
+<template>
+  <div class="http-root">
+    <div class="http-header">
+      <span class="http-icon">🌐</span>
+      <span class="http-title">HTTP 协议演示</span>
+    </div>
+
+    <div class="http-tabs">
+      <button
+        v-for="tab in tabs"
+        :key="tab.id"
+        :class="['http-tab', { active: activeTab === tab.id }]"
+        @click="activeTab = tab.id"
+      >
+        {{ tab.icon }} {{ tab.name }}
+      </button>
+    </div>
+
+    <div class="http-content">
+      <!-- 请求响应演示 -->
+      <div v-if="activeTab === 'request'" class="http-section">
+        <div class="http-flow">
+          <div class="http-card http-request">
+            <div class="http-card-header">
+              <span class="http-card-icon">📤</span>
+              <span class="http-card-title">HTTP 请求</span>
+            </div>
+            <div class="http-card-body">
+              <div class="http-line http-line-start">
+                <span class="http-method" :class="request.method">{{
+                  request.method
+                }}</span>
+                <span class="http-url">{{ request.url }}</span>
+                <span class="http-version">{{ request.version }}</span>
+              </div>
+              <div
+                v-for="(header, key) in request.headers"
+                :key="key"
+                class="http-line"
+              >
+                <span class="http-header-key">{{ key }}:</span>
+                <span class="http-header-value">{{ header }}</span>
+              </div>
+              <div class="http-line http-line-empty"></div>
+              <div v-if="request.body" class="http-body">
+                {{ request.body }}
+              </div>
+            </div>
+          </div>
+
+          <div class="http-connection">
+            <div class="http-connection-line"></div>
+            <span class="http-connection-label">TCP 连接</span>
+          </div>
+
+          <div class="http-card http-response">
+            <div class="http-card-header">
+              <span class="http-card-icon">📥</span>
+              <span class="http-card-title">HTTP 响应</span>
+            </div>
+            <div class="http-card-body">
+              <div class="http-line http-line-start">
+                <span class="http-version">{{ response.version }}</span>
+                <span class="http-status" :class="response.statusClass">{{
+                  response.status
+                }}</span>
+                <span class="http-status-text">{{ response.statusText }}</span>
+              </div>
+              <div
+                v-for="(header, key) in response.headers"
+                :key="key"
+                class="http-line"
+              >
+                <span class="http-header-key">{{ key }}:</span>
+                <span class="http-header-value">{{ header }}</span>
+              </div>
+              <div class="http-line http-line-empty"></div>
+              <div class="http-body">{{ response.body }}</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="http-buttons">
+          <button
+            v-for="demo in demos"
+            :key="demo.id"
+            class="http-btn"
+            @click="loadDemo(demo)"
+          >
+            {{ demo.name }}
+          </button>
+        </div>
+      </div>
+
+      <!-- HTTP 版本对比 -->
+      <div v-else-if="activeTab === 'versions'" class="http-section">
+        <div class="version-table">
+          <div class="version-row version-row-head">
+            <div class="version-cell">版本</div>
+            <div class="version-cell">年份</div>
+            <div class="version-cell">核心特性</div>
+            <div class="version-cell">传输格式</div>
+            <div class="version-cell">连接方式</div>
+          </div>
+          <div
+            v-for="ver in versions"
+            :key="ver.version"
+            class="version-row"
+            :class="{ 'version-row-highlight': ver.highlight }"
+          >
+            <div class="version-cell version-version">{{ ver.version }}</div>
+            <div class="version-cell">{{ ver.year }}</div>
+            <div class="version-cell">{{ ver.features }}</div>
+            <div class="version-cell">{{ ver.format }}</div>
+            <div class="version-cell">{{ ver.connection }}</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- HTTP/2 多路复用 -->
+      <div v-else-if="activeTab === 'http2'" class="http-section">
+        <div class="http2-diagram">
+          <div class="http2-header">
+            <span class="http2-title">HTTP/1.1 vs HTTP/2</span>
+          </div>
+
+          <div class="http2-comparison">
+            <div class="http2-side">
+              <div class="http2-side-title">HTTP/1.1</div>
+              <div class="http2-connection http2-connection-legacy">
+                <div class="http2-stream http2-stream-1">
+                  <div class="http2-label">请求 1</div>
+                  <div class="http2-timeline">
+                    <div class="http2-block http2-block-req">发送</div>
+                    <div class="http2-block http2-block-wait">等待</div>
+                    <div class="http2-block http2-block-res">接收</div>
+                  </div>
+                </div>
+                <div class="http2-stream http2-stream-2">
+                  <div class="http2-label">请求 2</div>
+                  <div class="http2-timeline">
+                    <div class="http2-block http2-block-wait">排队</div>
+                    <div class="http2-block http2-block-req">发送</div>
+                    <div class="http2-block http2-block-wait">等待</div>
+                    <div class="http2-block http2-block-res">接收</div>
+                  </div>
+                </div>
+                <div class="http2-stream http2-stream-3">
+                  <div class="http2-label">请求 3</div>
+                  <div class="http2-timeline">
+                    <div class="http2-block http2-block-wait">排队</div>
+                    <div class="http2-block http2-block-wait">排队</div>
+                    <div class="http2-block http2-block-req">发送</div>
+                    <div class="http2-block http2-block-res">接收</div>
+                  </div>
+                </div>
+              </div>
+              <div class="http2-note">串行传输，需等待前一个请求完成</div>
+            </div>
+
+            <div class="http2-side">
+              <div class="http2-side-title">HTTP/2</div>
+              <div class="http2-connection http2-connection-modern">
+                <div class="http2-stream http2-stream-1">
+                  <div class="http2-label">Stream 1</div>
+                  <div class="http2-timeline">
+                    <div class="http2-block http2-block-req">发送</div>
+                    <div class="http2-block http2-block-res">接收</div>
+                  </div>
+                </div>
+                <div class="http2-stream http2-stream-2">
+                  <div class="http2-label">Stream 2</div>
+                  <div class="http2-timeline">
+                    <div class="http2-block http2-block-req">发送</div>
+                    <div class="http2-block http2-block-res">接收</div>
+                  </div>
+                </div>
+                <div class="http2-stream http2-stream-3">
+                  <div class="http2-label">Stream 3</div>
+                  <div class="http2-timeline">
+                    <div class="http2-block http2-block-req">发送</div>
+                    <div class="http2-block http2-block-res">接收</div>
+                  </div>
+                </div>
+              </div>
+              <div class="http2-note">多路复用，并发传输多个请求</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- HTTPS vs HTTP -->
+      <div v-else-if="activeTab === 'https'" class="http-section">
+        <div class="https-comparison">
+          <div class="https-card https-http">
+            <div class="https-header">
+              <span class="https-icon">🔓</span>
+              <span class="https-title">HTTP</span>
+            </div>
+            <div class="https-body">
+              <div class="https-warning">⚠️ 不安全</div>
+              <ul class="https-list">
+                <li>明文传输，数据可被窃听</li>
+                <li>无法验证服务器身份</li>
+                <li>数据可能被篡改</li>
+              </ul>
+              <div class="https-example">
+                <div class="https-example-label">传输内容：</div>
+                <code>GET /login?user=admin&pass=123456</code>
+              </div>
+            </div>
+          </div>
+
+          <div class="https-card https-https">
+            <div class="https-header">
+              <span class="https-icon">🔒</span>
+              <span class="https-title">HTTPS</span>
+            </div>
+            <div class="https-body">
+              <div class="https-success">✓ 安全</div>
+              <ul class="https-list">
+                <li>加密传输，数据无法被窃听</li>
+                <li>SSL/TLS 证书验证身份</li>
+                <li>数据完整性校验，防篡改</li>
+              </ul>
+              <div class="https-example">
+                <div class="https-example-label">传输内容：</div>
+                <code>8f3a2b...（加密数据）</code>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="https-flow">
+          <div class="https-flow-title">HTTPS 握手过程</div>
+          <div class="https-steps">
+            <div class="https-step">
+              <div class="https-step-number">1</div>
+              <div class="https-step-content">
+                <div class="https-step-title">Client Hello</div>
+                <div class="https-step-desc">客户端发送支持的加密套件</div>
+              </div>
+            </div>
+            <div class="https-step">
+              <div class="https-step-number">2</div>
+              <div class="https-step-content">
+                <div class="https-step-title">Server Hello</div>
+                <div class="https-step-desc">
+                  服务器返回证书和选定的加密套件
+                </div>
+              </div>
+            </div>
+            <div class="https-step">
+              <div class="https-step-number">3</div>
+              <div class="https-step-content">
+                <div class="https-step-title">验证证书</div>
+                <div class="https-step-desc">客户端验证服务器证书</div>
+              </div>
+            </div>
+            <div class="https-step">
+              <div class="https-step-number">4</div>
+              <div class="https-step-content">
+                <div class="https-step-title">密钥交换</div>
+                <div class="https-step-desc">生成会话密钥</div>
+              </div>
+            </div>
+            <div class="https-step">
+              <div class="https-step-number">5</div>
+              <div class="https-step-content">
+                <div class="https-step-title">加密通信</div>
+                <div class="https-step-desc">使用会话密钥加密数据</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const activeTab = ref('request')
+
+const tabs = [
+  { id: 'request', name: '请求响应', icon: '📡' },
+  { id: 'versions', name: '版本对比', icon: '📊' },
+  { id: 'http2', name: 'HTTP/2', icon: '⚡' },
+  { id: 'https', name: 'HTTPS', icon: '🔒' }
+]
+
+const request = ref({
+  method: 'GET',
+  url: '/api/users/123',
+  version: 'HTTP/1.1',
+  headers: {
+    Host: 'api.example.com',
+    'User-Agent': 'Mozilla/5.0',
+    Accept: 'application/json',
+    Authorization: 'Bearer xxx'
+  },
+  body: null
+})
+
+const response = ref({
+  version: 'HTTP/1.1',
+  status: '200',
+  statusClass: 'success',
+  statusText: 'OK',
+  headers: {
+    'Content-Type': 'application/json',
+    'Content-Length': '156',
+    'Cache-Control': 'max-age=3600'
+  },
+  body: '{\n  "id": 123,\n  "name": "张三",\n  "email": "zhangsan@example.com"\n}'
+})
+
+const demos = [
+  {
+    id: 'get',
+    name: 'GET 请求',
+    request: {
+      method: 'GET',
+      url: '/api/users/123',
+      version: 'HTTP/1.1',
+      headers: {
+        Host: 'api.example.com',
+        Accept: 'application/json'
+      },
+      body: null
+    },
+    response: {
+      version: 'HTTP/1.1',
+      status: '200',
+      statusClass: 'success',
+      statusText: 'OK',
+      headers: {
+        'Content-Type': 'application/json',
+        'Content-Length': '156'
+      },
+      body: '{\n  "id": 123,\n  "name": "张三"\n}'
+    }
+  },
+  {
+    id: 'post',
+    name: 'POST 创建',
+    request: {
+      method: 'POST',
+      url: '/api/users',
+      version: 'HTTP/1.1',
+      headers: {
+        Host: 'api.example.com',
+        'Content-Type': 'application/json',
+        'Content-Length': '45'
+      },
+      body: '{\n  "name": "李四",\n  "email": "lisi@example.com"\n}'
+    },
+    response: {
+      version: 'HTTP/1.1',
+      status: '201',
+      statusClass: 'success',
+      statusText: 'Created',
+      headers: {
+        'Content-Type': 'application/json',
+        Location: '/api/users/124'
+      },
+      body: '{\n  "id": 124,\n  "name": "李四"\n}'
+    }
+  },
+  {
+    id: '404',
+    name: '404 错误',
+    request: {
+      method: 'GET',
+      url: '/api/users/999',
+      version: 'HTTP/1.1',
+      headers: {
+        Host: 'api.example.com'
+      },
+      body: null
+    },
+    response: {
+      version: 'HTTP/1.1',
+      status: '404',
+      statusClass: 'error',
+      statusText: 'Not Found',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: '{\n  "error": "用户不存在"\n}'
+    }
+  }
+]
+
+const versions = [
+  {
+    version: 'HTTP/0.9',
+    year: '1991',
+    features: '仅支持 GET',
+    format: '纯文本',
+    connection: '一次一请求',
+    highlight: false
+  },
+  {
+    version: 'HTTP/1.0',
+    year: '1996',
+    features: '增加 POST/HEAD',
+    format: '纯文本',
+    connection: '短连接',
+    highlight: false
+  },
+  {
+    version: 'HTTP/1.1',
+    year: '1997',
+    features: '持久连接、分块传输',
+    format: '纯文本',
+    connection: '长连接',
+    highlight: true
+  },
+  {
+    version: 'HTTP/2',
+    year: '2015',
+    features: '多路复用、头部压缩',
+    format: '二进制帧',
+    connection: '多路复用',
+    highlight: true
+  },
+  {
+    version: 'HTTP/3',
+    year: '2022',
+    features: '基于 QUIC、解决队头阻塞',
+    format: 'QUIC (UDP)',
+    connection: '独立连接',
+    highlight: true
+  }
+]
+
+function loadDemo(demo) {
+  request.value = demo.request
+  response.value = demo.response
+}
+</script>
+
+<style scoped>
+.http-root {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  background: var(--vp-c-bg-soft);
+  margin: 24px 0;
+  overflow: hidden;
+}
+
+.http-header {
+  padding: 14px 20px;
+  background: var(--vp-c-bg);
+  border-bottom: 1px solid var(--vp-c-divider);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.http-icon {
+  font-size: 20px;
+}
+
+.http-title {
+  font-weight: 600;
+  font-size: 15px;
+}
+
+.http-tabs {
+  display: flex;
+  gap: 6px;
+  padding: 12px 16px;
+  background: var(--vp-c-bg);
+  border-bottom: 1px solid var(--vp-c-divider);
+  overflow-x: auto;
+}
+
+.http-tab {
+  padding: 8px 14px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  background: var(--vp-c-bg-soft);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 0.2s;
+}
+
+.http-tab:hover {
+  border-color: var(--vp-c-brand);
+}
+
+.http-tab.active {
+  background: var(--vp-c-brand);
+  border-color: var(--vp-c-brand);
+  color: white;
+}
+
+.http-content {
+  padding: 20px;
+}
+
+/* 请求响应演示 */
+.http-flow {
+  display: flex;
+  align-items: stretch;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.http-card {
+  flex: 1;
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg);
+  overflow: hidden;
+}
+
+.http-request {
+  border-left-color: #3b82f6;
+  border-left-width: 4px;
+}
+
+.http-response {
+  border-left-color: #22c55e;
+  border-left-width: 4px;
+}
+
+.http-card-header {
+  padding: 10px 12px;
+  background: var(--vp-c-bg-alt);
+  border-bottom: 1px solid var(--vp-c-divider);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 600;
+  font-size: 13px;
+}
+
+.http-card-body {
+  padding: 12px;
+  font-family: 'Menlo', 'Monaco', monospace;
+  font-size: 11px;
+  line-height: 1.6;
+}
+
+.http-line {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.http-line-start {
+  margin-bottom: 8px;
+  font-weight: 600;
+}
+
+.http-method {
+  padding: 2px 8px;
+  border-radius: 3px;
+  font-weight: 700;
+}
+
+.http-method.GET {
+  background: #22c55e22;
+  color: #22c55e;
+}
+
+.http-method.POST {
+  background: #3b82f622;
+  color: #3b82f6;
+}
+
+.http-url {
+  color: var(--vp-c-text-1);
+}
+
+.http-version {
+  color: var(--vp-c-text-3);
+}
+
+.http-header-key {
+  color: var(--vp-c-brand);
+  min-width: 100px;
+}
+
+.http-header-value {
+  color: var(--vp-c-text-2);
+}
+
+.http-line-empty {
+  height: 4px;
+}
+
+.http-body {
+  padding: 8px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 4px;
+  color: var(--vp-c-text-2);
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.http-connection {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.http-connection-line {
+  width: 2px;
+  height: 60px;
+  background: var(--vp-c-divider);
+  position: relative;
+}
+
+.http-connection-line::before {
+  content: '→';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 16px;
+  color: var(--vp-c-brand);
+}
+
+.http-connection-label {
+  font-size: 11px;
+  color: var(--vp-c-text-3);
+  font-weight: 500;
+}
+
+.http-status {
+  padding: 2px 8px;
+  border-radius: 3px;
+  font-weight: 700;
+}
+
+.http-status.success {
+  background: #22c55e22;
+  color: #22c55e;
+}
+
+.http-status.error {
+  background: #ef444422;
+  color: #ef4444;
+}
+
+.http-buttons {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.http-btn {
+  padding: 8px 14px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  background: var(--vp-c-bg-soft);
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.http-btn:hover {
+  border-color: var(--vp-c-brand);
+}
+
+/* 版本对比表 */
+.version-table {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.version-row {
+  display: grid;
+  grid-template-columns: 100px 80px 1fr 120px 120px;
+}
+
+.version-row:nth-child(odd) {
+  background: var(--vp-c-bg-soft);
+}
+
+.version-row:nth-child(even) {
+  background: var(--vp-c-bg);
+}
+
+.version-row-head {
+  background: var(--vp-c-bg-alt);
+}
+
+.version-row-highlight {
+  background: color-mix(in srgb, var(--vp-c-brand) 8%, transparent);
+}
+
+.version-cell {
+  padding: 12px 10px;
+  font-size: 12px;
+  color: var(--vp-c-text-2);
+  border-right: 1px solid var(--vp-c-divider);
+}
+
+.version-cell:last-child {
+  border-right: none;
+}
+
+.version-row-head .version-cell {
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+.version-version {
+  font-weight: 600;
+  color: var(--vp-c-brand);
+}
+
+/* HTTP/2 对比 */
+.http2-comparison {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+}
+
+.http2-side-title {
+  font-weight: 600;
+  margin-bottom: 12px;
+  text-align: center;
+}
+
+.http2-connection {
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 12px;
+  background: var(--vp-c-bg);
+}
+
+.http2-stream {
+  margin-bottom: 12px;
+}
+
+.http2-label {
+  font-size: 11px;
+  color: var(--vp-c-text-3);
+  margin-bottom: 6px;
+}
+
+.http2-timeline {
+  display: flex;
+  gap: 4px;
+  height: 32px;
+}
+
+.http2-block {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  font-size: 10px;
+  font-weight: 600;
+}
+
+.http2-block-req {
+  background: #3b82f622;
+  color: #3b82f6;
+}
+
+.http2-block-res {
+  background: #22c55e22;
+  color: #22c55e;
+}
+
+.http2-block-wait {
+  background: var(--vp-c-bg-soft);
+  color: var(--vp-c-text-3);
+}
+
+.http2-note {
+  font-size: 11px;
+  color: var(--vp-c-text-3);
+  text-align: center;
+  margin-top: 8px;
+}
+
+/* HTTPS 对比 */
+.https-comparison {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.https-card {
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg);
+  overflow: hidden;
+}
+
+.https-http {
+  border-color: #ef4444;
+}
+
+.https-https {
+  border-color: #22c55e;
+}
+
+.https-header {
+  padding: 12px;
+  background: var(--vp-c-bg-alt);
+  border-bottom: 1px solid var(--vp-c-divider);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 600;
+}
+
+.https-body {
+  padding: 14px;
+}
+
+.https-warning,
+.https-success {
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-weight: 600;
+  font-size: 13px;
+  margin-bottom: 12px;
+  text-align: center;
+}
+
+.https-warning {
+  background: #ef444422;
+  color: #ef4444;
+}
+
+.https-success {
+  background: #22c55e22;
+  color: #22c55e;
+}
+
+.https-list {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 12px 0;
+}
+
+.https-list li {
+  padding: 6px 0;
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+  position: relative;
+  padding-left: 20px;
+}
+
+.https-list li::before {
+  content: '•';
+  position: absolute;
+  left: 6px;
+  color: var(--vp-c-brand);
+  font-weight: bold;
+}
+
+.https-example {
+  padding: 10px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+}
+
+.https-example-label {
+  font-size: 11px;
+  color: var(--vp-c-text-3);
+  margin-bottom: 6px;
+}
+
+.https-example code {
+  display: block;
+  font-family: 'Menlo', 'Monaco', monospace;
+  font-size: 11px;
+  color: var(--vp-c-text-1);
+  word-break: break-all;
+}
+
+.https-flow {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 16px;
+  background: var(--vp-c-bg);
+}
+
+.https-flow-title {
+  font-weight: 600;
+  margin-bottom: 14px;
+  font-size: 14px;
+}
+
+.https-steps {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 12px;
+}
+
+.https-step {
+  display: flex;
+  gap: 10px;
+}
+
+.https-step-number {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--vp-c-brand);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 13px;
+  flex-shrink: 0;
+}
+
+.https-step-title {
+  font-weight: 600;
+  font-size: 13px;
+  color: var(--vp-c-text-1);
+  margin-bottom: 4px;
+}
+
+.https-step-desc {
+  font-size: 12px;
+  color: var(--vp-c-text-3);
+}
+
+@media (max-width: 768px) {
+  .http-flow {
+    flex-direction: column;
+  }
+
+  .http-connection {
+    flex-direction: row;
+    width: 100%;
+    height: 40px;
+  }
+
+  .http-connection-line {
+    width: 100%;
+    height: 2px;
+  }
+
+  .version-row {
+    grid-template-columns: 80px 60px 1fr 100px 100px;
+  }
+
+  .version-cell {
+    padding: 8px 6px;
+    font-size: 11px;
+  }
+
+  .http2-comparison,
+  .https-comparison {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/server-backend/SerializationDemo.vue b/docs/.vitepress/theme/components/appendix/server-backend/SerializationDemo.vue
new file mode 100644
index 0000000..d4ba0c6
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/server-backend/SerializationDemo.vue
@@ -0,0 +1,564 @@
+<template>
+  <div class="sd-root">
+    <div class="sd-header">
+      <span class="sd-icon">🔄</span>
+      <span class="sd-title">序列化演示</span>
+    </div>
+
+    <div class="sd-tabs">
+      <button
+        v-for="lang in languages"
+        :key="lang.id"
+        :class="['sd-tab', { active: activeLang === lang.id }]"
+        @click="activeLang = lang.id"
+      >
+        {{ lang.name }}
+      </button>
+    </div>
+
+    <div class="sd-layout">
+      <div class="sd-panel sd-object">
+        <div class="sd-panel-header">
+          <span class="sd-panel-icon">📦</span>
+          <span class="sd-panel-title">内存对象</span>
+        </div>
+        <div class="sd-panel-body">
+          <pre class="sd-code">{{ currentLang.objectCode }}</pre>
+        </div>
+        <div class="sd-panel-desc">内存中的对象，只能在当前进程使用</div>
+      </div>
+
+      <div class="sd-arrow" :class="{ 'sd-arrow-active': step >= 1 }">
+        <div class="sd-arrow-line"></div>
+        <div class="sd-arrow-label">序列化</div>
+      </div>
+
+      <div
+        class="sd-panel sd-json"
+        :class="{ 'sd-panel-highlight': step === 1 }"
+      >
+        <div class="sd-panel-header">
+          <span class="sd-panel-icon">{}</span>
+          <span class="sd-panel-title">JSON 字符串</span>
+          <span class="sd-panel-size">{{ currentLang.jsonSize }} bytes</span>
+        </div>
+        <div class="sd-panel-body">
+          <pre class="sd-code">{{ currentLang.jsonString }}</pre>
+        </div>
+        <div class="sd-panel-desc">可在网络传输、可跨语言</div>
+      </div>
+
+      <div class="sd-arrow" :class="{ 'sd-arrow-active': step >= 2 }">
+        <div class="sd-arrow-line"></div>
+        <div class="sd-arrow-label">传输</div>
+      </div>
+
+      <div
+        class="sd-panel sd-binary"
+        :class="{ 'sd-panel-highlight': step === 2 }"
+      >
+        <div class="sd-panel-header">
+          <span class="sd-panel-icon">💻</span>
+          <span class="sd-panel-title">二进制</span>
+          <span class="sd-panel-size">{{ currentLang.binarySize }} bytes</span>
+        </div>
+        <div class="sd-panel-body">
+          <pre class="sd-code sd-binary-code">{{
+            currentLang.binaryString
+          }}</pre>
+        </div>
+        <div class="sd-panel-desc">Protobuf/MessagePack，更小更快</div>
+      </div>
+    </div>
+
+    <div class="sd-controls">
+      <button
+        class="sd-btn sd-btn-primary"
+        :disabled="step >= 3"
+        @click="nextStep"
+      >
+        {{ stepText }}
+      </button>
+      <button class="sd-btn" :disabled="step === 0" @click="reset">重置</button>
+    </div>
+
+    <div class="sd-comparison">
+      <div class="sd-comparison-header">📊 格式对比</div>
+      <div class="sd-comparison-table">
+        <div class="sd-row sd-row-head">
+          <div class="sd-cell">格式</div>
+          <div class="sd-cell">大小</div>
+          <div class="sd-cell">速度</div>
+          <div class="sd-cell">可读性</div>
+          <div class="sd-cell">跨语言</div>
+        </div>
+        <div class="sd-row">
+          <div class="sd-cell">JSON</div>
+          <div class="sd-cell sd-rating sd-rating-3">★★★☆☆</div>
+          <div class="sd-cell sd-rating sd-rating-3">★★★☆☆</div>
+          <div class="sd-cell sd-rating sd-rating-5">★★★★★</div>
+          <div class="sd-cell sd-rating sd-rating-5">★★★★★</div>
+        </div>
+        <div class="sd-row">
+          <div class="sd-cell">XML</div>
+          <div class="sd-cell sd-rating sd-rating-2">★★☆☆☆</div>
+          <div class="sd-cell sd-rating sd-rating-2">★★☆☆☆</div>
+          <div class="sd-cell sd-rating sd-rating-5">★★★★★</div>
+          <div class="sd-cell sd-rating sd-rating-5">★★★★★</div>
+        </div>
+        <div class="sd-row">
+          <div class="sd-cell">Protobuf</div>
+          <div class="sd-cell sd-rating sd-rating-5">★★★★★</div>
+          <div class="sd-cell sd-rating sd-rating-5">★★★★★</div>
+          <div class="sd-cell sd-rating sd-rating-1">★☆☆☆☆</div>
+          <div class="sd-cell sd-rating sd-rating-4">★★★★☆</div>
+        </div>
+        <div class="sd-row">
+          <div class="sd-cell">MessagePack</div>
+          <div class="sd-cell sd-rating sd-rating-4">★★★★☆</div>
+          <div class="sd-cell sd-rating sd-rating-4">★★★★☆</div>
+          <div class="sd-cell sd-rating sd-rating-2">★★☆☆☆</div>
+          <div class="sd-cell sd-rating sd-rating-5">★★★★★</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const activeLang = ref('javascript')
+const step = ref(0)
+
+const languages = {
+  javascript: {
+    name: 'JavaScript',
+    objectCode: `const user = {
+  id: 123,
+  name: "张三",
+  email: "zhangsan@example.com",
+  age: 28
+};`,
+    jsonString: `{
+  "id": 123,
+  "name": "张三",
+  "email": "zhangsan@example.com",
+  "age": 28
+}`,
+    jsonSize: 68,
+    binaryString: `七进制编码 (MessagePack):
+\xa7 id 7b
+\xa4 name \xa3 张三
+\xa5 email \xb1 zhangsan@example.com
+\xa3 age 1c`,
+    binarySize: 52
+  },
+  python: {
+    name: 'Python',
+    objectCode: `user = {
+    "id": 123,
+    "name": "张三",
+    "email": "zhangsan@example.com",
+    "age": 28
+}`,
+    jsonString: `{
+  "id": 123,
+  "name": "张三",
+  "email": "zhangsan@example.com",
+  "age": 28
+}`,
+    jsonSize: 68,
+    binaryString: `Protobuf 二进制:
+08 7b  # field 1, varint 123
+12 06  # field 2, length 6
+e5 bc a0 e4 b8 89  # UTF-8 "张三"
+1a 11  # field 3, length 17
+7a 68 61 6e 67 73 61 6e 40 65 78 61 6d 70 6c 65 2e 63 6f 6d
+20 1c  # field 4, varint 28`,
+    binarySize: 38
+  },
+  java: {
+    name: 'Java',
+    objectCode: `User user = new User();
+user.setId(123);
+user.setName("张三");
+user.setEmail("zhangsan@example.com");
+user.setAge(28);`,
+    jsonString: `{
+  "id": 123,
+  "name": "张三",
+  "email": "zhangsan@example.com",
+  "age": 28
+}`,
+    jsonSize: 68,
+    binaryString: `Java 序列化:
+AC ED 00 05 73 72 00 04 55 73 65 72
+... (复杂元数据)
+实际大小 ~150 bytes`,
+    binarySize: 150
+  },
+  golang: {
+    name: 'Go',
+    objectCode: `type User struct {
+    ID    int
+    Name  string
+    Email string
+    Age   int
+}
+
+user := User{
+    ID: 123,
+    Name: "张三",
+    Email: "zhangsan@example.com",
+    Age: 28,
+}`,
+    jsonString: `{
+  "id": 123,
+  "name": "张三",
+  "email": "zhangsan@example.com",
+  "age": 28
+}`,
+    jsonSize: 68,
+    binaryString: `Gob 编码:
+0f ff 81 03 01 01 08 55 73 65 72 01
+ff 82 00 01 02 01 04 69 64 01 04 01
+02 6e 61 6d 65 01 04 05 65 6d 61 69 6c
+... (高效二进制)`,
+    binarySize: 42
+  }
+}
+
+const currentLang = computed(() => languages[activeLang.value])
+
+const stepText = computed(() => {
+  if (step.value === 0) return '开始序列化 →'
+  if (step.value === 1) return '转换为二进制 →'
+  if (step.value === 2) return '传输完成 ✓'
+  return '完成'
+})
+
+function nextStep() {
+  if (step.value < 3) {
+    step.value++
+  }
+}
+
+function reset() {
+  step.value = 0
+}
+</script>
+
+<style scoped>
+.sd-root {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  background: var(--vp-c-bg-soft);
+  margin: 24px 0;
+  overflow: hidden;
+}
+
+.sd-header {
+  padding: 14px 20px;
+  background: var(--vp-c-bg);
+  border-bottom: 1px solid var(--vp-c-divider);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.sd-icon {
+  font-size: 20px;
+}
+
+.sd-title {
+  font-weight: 600;
+  font-size: 15px;
+}
+
+.sd-tabs {
+  display: flex;
+  gap: 6px;
+  padding: 12px 16px;
+  background: var(--vp-c-bg);
+  border-bottom: 1px solid var(--vp-c-divider);
+  overflow-x: auto;
+}
+
+.sd-tab {
+  padding: 8px 14px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  background: var(--vp-c-bg-soft);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 0.2s;
+}
+
+.sd-tab:hover {
+  border-color: var(--vp-c-brand);
+}
+
+.sd-tab.active {
+  background: var(--vp-c-brand);
+  border-color: var(--vp-c-brand);
+  color: white;
+}
+
+.sd-layout {
+  padding: 20px;
+  display: flex;
+  align-items: stretch;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.sd-panel {
+  flex: 1;
+  min-width: 200px;
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg);
+  display: flex;
+  flex-direction: column;
+  transition: all 0.3s;
+}
+
+.sd-panel-highlight {
+  border-color: var(--vp-c-brand);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vp-c-brand) 14%, transparent);
+}
+
+.sd-panel-header {
+  padding: 10px 12px;
+  background: var(--vp-c-bg-alt);
+  border-bottom: 1px solid var(--vp-c-divider);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.sd-panel-icon {
+  font-size: 16px;
+}
+
+.sd-panel-title {
+  font-weight: 600;
+  font-size: 13px;
+  flex: 1;
+}
+
+.sd-panel-size {
+  font-size: 11px;
+  color: var(--vp-c-text-3);
+  background: var(--vp-c-bg-soft);
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.sd-panel-body {
+  padding: 12px;
+  flex: 1;
+}
+
+.sd-code {
+  margin: 0;
+  padding: 10px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+  font-family: 'Menlo', 'Monaco', monospace;
+  font-size: 11px;
+  line-height: 1.5;
+  overflow-x: auto;
+  color: var(--vp-c-text-1);
+}
+
+.sd-binary-code {
+  font-size: 10px;
+  color: var(--vp-c-text-2);
+}
+
+.sd-panel-desc {
+  padding: 8px 12px;
+  font-size: 12px;
+  color: var(--vp-c-text-3);
+  border-top: 1px solid var(--vp-c-divider);
+  text-align: center;
+}
+
+.sd-arrow {
+  width: 60px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  opacity: 0.3;
+  transition: opacity 0.3s;
+}
+
+.sd-arrow-active {
+  opacity: 1;
+}
+
+.sd-arrow-line {
+  width: 2px;
+  height: 40px;
+  background: var(--vp-c-brand);
+  position: relative;
+}
+
+.sd-arrow-line::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: -4px;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 8px solid var(--vp-c-brand);
+}
+
+.sd-arrow-label {
+  font-size: 11px;
+  color: var(--vp-c-brand);
+  font-weight: 600;
+}
+
+.sd-controls {
+  padding: 14px 20px;
+  background: var(--vp-c-bg);
+  border-top: 1px solid var(--vp-c-divider);
+  display: flex;
+  gap: 10px;
+}
+
+.sd-btn {
+  padding: 8px 16px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  background: var(--vp-c-bg-soft);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.sd-btn:hover:not(:disabled) {
+  border-color: var(--vp-c-brand);
+}
+
+.sd-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.sd-btn-primary {
+  background: var(--vp-c-brand);
+  border-color: var(--vp-c-brand);
+  color: white;
+}
+
+.sd-btn-primary:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--vp-c-brand) 90%, white);
+}
+
+.sd-comparison {
+  background: var(--vp-c-bg);
+  border-top: 1px solid var(--vp-c-divider);
+  padding: 16px 20px;
+}
+
+.sd-comparison-header {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 12px;
+}
+
+.sd-comparison-table {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.sd-row {
+  display: grid;
+  grid-template-columns: 1fr repeat(4, 1fr);
+}
+
+.sd-row:nth-child(odd) {
+  background: var(--vp-c-bg-soft);
+}
+
+.sd-row:nth-child(even) {
+  background: var(--vp-c-bg);
+}
+
+.sd-row-head {
+  background: var(--vp-c-bg-alt);
+}
+
+.sd-cell {
+  padding: 10px 8px;
+  font-size: 12px;
+  color: var(--vp-c-text-2);
+  text-align: center;
+  border-right: 1px solid var(--vp-c-divider);
+}
+
+.sd-cell:last-child {
+  border-right: none;
+}
+
+.sd-row-head .sd-cell {
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+.sd-row .sd-cell:first-child {
+  text-align: left;
+  font-weight: 500;
+  padding-left: 12px;
+}
+
+.sd-rating {
+  color: var(--vp-c-brand);
+  font-size: 12px;
+}
+
+@media (max-width: 768px) {
+  .sd-layout {
+    flex-direction: column;
+  }
+
+  .sd-arrow {
+    width: 100%;
+    height: 40px;
+    flex-direction: row;
+  }
+
+  .sd-arrow-line {
+    width: 40px;
+    height: 2px;
+  }
+
+  .sd-arrow-line::after {
+    right: 0;
+    top: -4px;
+    left: auto;
+    border-top: 5px solid transparent;
+    border-bottom: 5px solid transparent;
+    border-left: 8px solid var(--vp-c-brand);
+  }
+
+  .sd-row {
+    grid-template-columns: 80px repeat(4, 1fr);
+  }
+
+  .sd-cell {
+    padding: 8px 4px;
+    font-size: 11px;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
index 273529f..f9d07fb 100644
--- a/docs/.vitepress/theme/index.js
+++ b/docs/.vitepress/theme/index.js
@@ -42,6 +42,10 @@ import ApiMethodDemo from './components/appendix/api-intro/ApiMethodDemo.vue'
 import ApiDocumentDemo from './components/appendix/api-intro/ApiDocumentDemo.vue'
 import ApiPlayground from './components/appendix/api-intro/ApiPlayground.vue'
 import RealWorldApiDemo from './components/appendix/api-intro/RealWorldApiDemo.vue'
+import FunctionApiDemo from './components/appendix/api-intro/FunctionApiDemo.vue'
+import ApiTypesComparison from './components/appendix/api-intro/ApiTypesComparison.vue'
+import HttpMethodsDemo from './components/appendix/api-intro/HttpMethodsDemo.vue'
+import StatusCodeCategories from './components/appendix/api-intro/StatusCodeCategories.vue'
 
 // LLM Intro Components
 import EmbeddingDemo from './components/appendix/llm-intro/EmbeddingDemo.vue'
@@ -106,8 +110,13 @@ import NetworkTroubleshooting from './components/appendix/web-basics/NetworkTrou
 // Computer Fundamentals Components
 import TransistorDemo from './components/appendix/computer-fundamentals/TransistorDemo.vue'
 import LogicGateDemo from './components/appendix/computer-fundamentals/LogicGateDemo.vue'
+import HalfAdderDemo from './components/appendix/computer-fundamentals/HalfAdderDemo.vue'
+import FullAdderDemo from './components/appendix/computer-fundamentals/FullAdderDemo.vue'
 import AdderDemo from './components/appendix/computer-fundamentals/AdderDemo.vue'
-// import CpuArchitectureDemo from './components/appendix/computer-fundamentals/CpuArchitectureDemo.vue'
+import AdderChainDemo from './components/appendix/computer-fundamentals/AdderChainDemo.vue'
+import CompleteAdderDemo from './components/appendix/computer-fundamentals/CompleteAdderDemo.vue'
+import FunctionalUnitDemo from './components/appendix/computer-fundamentals/FunctionalUnitDemo.vue'
+import CpuArchitectureDemo from './components/appendix/computer-fundamentals/CpuArchitectureDemo.vue'
 import RegisterDemo from './components/appendix/computer-fundamentals/RegisterDemo.vue'
 // import EvolutionFlowDemo from './components/appendix/computer-fundamentals/EvolutionFlowDemo.vue'
 import ProcessDemo from './components/appendix/computer-fundamentals/ProcessDemo.vue'
@@ -614,6 +623,16 @@ import InterfaceDemo from './components/appendix/typescript-intro/InterfaceDemo.
 import GenericDemo from './components/appendix/typescript-intro/GenericDemo.vue'
 import TypeInferenceDemo from './components/appendix/typescript-intro/TypeInferenceDemo.vue'
 
+// Server & Backend Components
+import SerializationDemo from './components/appendix/server-backend/SerializationDemo.vue'
+import HttpProtocolDemo from './components/appendix/server-backend/HttpProtocolDemo.vue'
+
+// Data Components
+import SqlDemo from './components/appendix/data/SqlDemo.vue'
+import DataModelsDemo from './components/appendix/data/DataModelsDemo.vue'
+import ABTestingDemo from './components/appendix/data/ABTestingDemo.vue'
+import DataAnalysisDemo from './components/appendix/data/DataAnalysisDemo.vue'
+
 export default {
   extends: DefaultTheme,
   Layout,
@@ -652,6 +671,10 @@ export default {
     app.component('ApiDocumentDemo', ApiDocumentDemo)
     app.component('ApiPlayground', ApiPlayground)
     app.component('RealWorldApiDemo', RealWorldApiDemo)
+    app.component('FunctionApiDemo', FunctionApiDemo)
+    app.component('ApiTypesComparison', ApiTypesComparison)
+    app.component('HttpMethodsDemo', HttpMethodsDemo)
+    app.component('StatusCodeCategories', StatusCodeCategories)
 
     // LLM Intro Components Registration
     app.component('EmbeddingDemo', EmbeddingDemo)
@@ -719,8 +742,13 @@ export default {
     // Computer Fundamentals Components Registration
     app.component('TransistorDemo', TransistorDemo)
     app.component('LogicGateDemo', LogicGateDemo)
+    app.component('HalfAdderDemo', HalfAdderDemo)
+    app.component('FullAdderDemo', FullAdderDemo)
     app.component('AdderDemo', AdderDemo)
-    // app.component('CpuArchitectureDemo', CpuArchitectureDemo)
+    app.component('AdderChainDemo', AdderChainDemo)
+    app.component('CompleteAdderDemo', CompleteAdderDemo)
+    app.component('FunctionalUnitDemo', FunctionalUnitDemo)
+    app.component('CpuArchitectureDemo', CpuArchitectureDemo)
     app.component('RegisterDemo', RegisterDemo)
     // app.component('EvolutionFlowDemo', EvolutionFlowDemo)
     app.component('ProcessDemo', ProcessDemo)
@@ -1244,6 +1272,16 @@ export default {
     app.component('InterfaceDemo', InterfaceDemo)
     app.component('GenericDemo', GenericDemo)
     app.component('TypeInferenceDemo', TypeInferenceDemo)
+
+    // Server & Backend Components Registration
+    app.component('SerializationDemo', SerializationDemo)
+    app.component('HttpProtocolDemo', HttpProtocolDemo)
+
+    // Data Components Registration
+    app.component('SqlDemo', SqlDemo)
+    app.component('DataModelsDemo', DataModelsDemo)
+    app.component('ABTestingDemo', ABTestingDemo)
+    app.component('DataAnalysisDemo', DataAnalysisDemo)
   },
   setup() {
     const route = useRoute()
diff --git a/docs/zh-cn/appendix/1-computer-fundamentals/transistor-to-cpu.md b/docs/zh-cn/appendix/1-computer-fundamentals/transistor-to-cpu.md
index 3faacae..f944d26 100644
--- a/docs/zh-cn/appendix/1-computer-fundamentals/transistor-to-cpu.md
+++ b/docs/zh-cn/appendix/1-computer-fundamentals/transistor-to-cpu.md
@@ -128,9 +128,13 @@
 
 <HalfAdderDemo />
 
-再进一步：我们可以把多个半加器和全加器级联组合起来，完成多个位数的加法：
+但半加器有个致命缺陷：它无法处理来自低位的进位。在多位加法中，中间的每一位不仅要加 A 和 B，还要加上低位传来的进位。这就需要**全加器（Full Adder）**：
 
-<AdderDemo />
+<FullAdderDemo />
+
+把多个全加器级联起来，就能完成多位数的加法：
+
+<AdderChainDemo />
 
 ::: tip 核心解析：分解加法器
 为了处理真实世界中更复杂的数字，加法器需要像搭积木一样拼装：
@@ -140,6 +144,10 @@
 3. **行波进位加法器（Ripple Carry Adder）**：要想处理 32 位或 64 位的数字，只需要把几十个全加器串联起来。进位信号便像波浪一样从低位一层层涌向高位，从而完成任意大小的加法。
 :::
 
+想要一次性看懂从逻辑门到多位加法的完整过程？试试这个综合演示：
+
+<CompleteAdderDemo />
+
 ---
 
 ## 3. 功能单元：逻辑门的组合
diff --git a/docs/zh-cn/appendix/4-server-and-backend/api-intro.md b/docs/zh-cn/appendix/4-server-and-backend/api-intro.md
index 276ee80..2bc7b69 100644
--- a/docs/zh-cn/appendix/4-server-and-backend/api-intro.md
+++ b/docs/zh-cn/appendix/4-server-and-backend/api-intro.md
@@ -1,179 +1,35 @@
-# API 入门
+# API 入门：从零理解"程序之间的对话"
 
-::: tip 🎯 学习目标
-阅读完本节后，你将能够：
-- 理解 API 的本质概念和设计哲学
-- 区分不同类型的 API（函数 API、操作系统 API、Web API）
-- 掌握 HTTP 方法的语义和使用场景
-- 学会阅读和使用 API 文档
-- 理解 HTTP 调用与 SDK 调用的区别
+::: tip 🎯 核心问题
+**什么是 API?** 这就像问:餐厅的菜单怎么设计,客人一看就懂?服务员怎么记单,不会出错?API 解决的就是"程序之间如何对话"的问题。你写代码的第一天就在用 API,只是你可能没意识到。
 :::
 
 ---
 
-## 1. 从一个按钮开始
+## 0. 新手常见的三个困惑
 
-<ApiQuickStartDemo />
+**困惑一:API 是很高深的东西吗?**
 
-👆 看见了吗？点击按钮，几百毫秒后，服务器返回了当前时间。
-
-这个过程，就是一次完整的 **API 调用**。虽然简单，但它包含了 API 交互的所有核心要素：
-
-| 阶段 | 发生了什么 |
-|------|-----------|
-| **请求** | 客户端向服务器发送 "给我当前时间" 的请求 |
-| **处理** | 服务器接收请求，查询系统时间 |
-| **响应** | 服务器将时间数据返回给客户端 |
-
-这就像你去便利店买水——你说"来瓶可乐"，店员给你一瓶可乐。你问一句，他给一笔。
-
-**API（Application Programming Interface，应用程序编程接口）**，本质上就是一种"对话约定"：一方提出请求，另一方给出响应。
-
----
-
-## 2. API 的三种形态
-
-很多人一提到 API，就觉得这是很高深的东西。其实，你写代码的第一天就在用 API 了。
-
-### 2.1 函数 API：最基础的形态
-
-<FunctionApiDemo />
-
-当你调用 `len("hello")` 时，你就在使用 Python 提供的一个 API。你不需要知道 `len()` 内部是怎么数字符串长度的——是用 C 实现的还是用 Python 实现的？是遍历计数还是直接读取长度字段？这些细节都被隐藏了。
-
-**API 的核心价值：把复杂的东西藏起来，只给你一个简单的用法。**
-
-再看一个更贴近实际的例子：
+很多人一听到 API,就觉得是高级工程师才能理解的概念。其实你早就用过 API 了:
 
 ```python
-# 你写这行代码
-response = requests.get("https://api.example.com/users")
-
-# 背后发生了什么？
-# 1. DNS 解析：把域名转成 IP 地址
-# 2. TCP 连接：建立网络通道
-# 3. TLS 握手：加密通信
-# 4. HTTP 请求：发送数据包
-# 5. 等待响应：接收服务器返回
-# 6. 解析数据：把字节流转成 Python 对象
+len("hello")        # 这就是 Python 提供的 API
+open("file.txt")    # 这也是 API
+requests.get(url)   # 这还是 API
 ```
 
-如果你要自己处理这 6 步，每次请求都要写几百行代码。但 `requests.get()` 把这些都封装好了，你只需要一行代码。
+**困惑二:Web API 和普通 API 有什么区别?**
 
-### 2.2 操作系统 API：让程序能"碰"硬件
+| 类型 | 调用对象 | 通信方式 | 典型场景 |
+| :--- | :--- | :--- | :--- |
+| **函数 API** | 本地代码 | 函数调用 | `len()`, `open()` |
+| **操作系统 API** | 操作系统 | 系统调用 | 读写文件、创建进程 |
+| **Web API** | 远程服务器 | HTTP 请求 | 调用 AI 模型、获取天气 |
 
-当你在电脑上打开一个文件：
+**困惑三:我该用 HTTP 还是 SDK?**
 
 ```python
-with open("file.txt", "r") as f:
-    content = f.read()
-```
-
-这行代码背后，Python 调用了**操作系统的 API**。
-
-| 操作系统 | API 名称 | 作用 |
-|---------|---------|------|
-| Windows | Win32 API | 文件操作、窗口管理、进程控制 |
-| Linux | POSIX API | 系统调用、进程通信、设备访问 |
-| macOS | Cocoa API | 图形界面、文件系统、网络 |
-
-没有操作系统 API，你的 Python 代码就是一堆文字，根本动不了硬盘里的文件、显示不了窗口、连不上网络。
-
-### 2.3 Web API：跨越网络的"超能力"
-
-最后，才是大多数人熟知的 Web API：
-
-```python
-import requests
-
-response = requests.post(
-    "https://api.deepseek.com/v1/chat/completions",
-    headers={"Authorization": "Bearer sk-xxx"},
-    json={
-        "model": "deepseek-chat",
-        "messages": [{"role": "user", "content": "你好"}]
-    }
-)
-```
-
-这行代码做了什么？它让你的程序穿越互联网，调用了千里之外 DeepSeek 服务器上的 AI 模型。就像你打了个越洋电话，让大洋彼岸的厨师帮你做了一道菜。
-
-**Web API 的神奇之处：让"调用别人的超级电脑"变得像调用本地函数一样简单。**
-
----
-
-## 3. API 的统一结构
-
-无论哪种 API，结构都一样。就像插头和插座，怎么变都离不开三样东西：
-
-<ApiConceptDemo />
-
-| 要素 | 函数 API | Web API |
-|------|---------|---------|
-| **地址/名称** | `len()` | `https://api.example.com/users` |
-| **输入/参数** | `"hello"` | `{"name": "张三"}` |
-| **输出/返回** | `5` | `{"id": 1, "name": "张三"}` |
-
-理解了这个统一结构，你就掌握了 API 的本质。无论是调用一个 Python 函数，还是请求一个远程服务器，思路都是一样的：
-
-1. **找到入口**（函数名或 URL）
-2. **传入参数**（按要求的格式）
-3. **处理返回**（按约定的结构解析）
-
----
-
-## 4. HTTP 方法：你是在"问"还是在"做"？
-
-调用 Web API 时，你需要告诉服务器你想做什么。这就是 HTTP 方法的由来。
-
-想象你去一家餐厅：
-
-| 场景 | 现实中你会怎么说？ | 对应的 HTTP 方法 |
-|------|-------------------|-----------------|
-| 你想知道今天有什么菜 | "服务员，菜单给我看看" | **GET** - 纯"问"，不改数据 |
-| 你想点一份宫保鸡丁 | "给我来份宫保鸡丁" | **POST** - "做"件事，创建数据 |
-| 你想换一道菜 | "把宫保鸡丁改成糖醋里脊" | **PUT** - 替换数据 |
-| 你想改口味 | "宫保鸡丁不要放花生" | **PATCH** - 部分修改 |
-| 你不想要了 | "算了，那道菜不要了" | **DELETE** - 删除数据 |
-
-<ApiMethodDemo />
-
-::: warning 关于幂等性
-**幂等性**是一个重要概念：多次执行结果是否相同？
-
-- **GET**：查询 10 次和查询 1 次，结果一样 → 幂等
-- **DELETE**：删除 10 次和删除 1 次，结果一样 → 幂等
-- **POST**：下单 10 次，可能创建 10 个订单 → 不幂等
-
-实际开发中，POST 操作通常需要用唯一 ID 来防止重复处理。
-:::
-
----
-
-## 5. HTTP vs SDK：自己跑腿还是让管家代办？
-
-在 AI 编程教程中，你会经常看到两种调用方式：**HTTP** 和 **SDK**。它们的区别就像"自己跑腿"和"让管家代办"。
-
-<RealWorldApiDemo />
-
-### 5.1 HTTP API：自己跑腿
-
-这是最原始的方式。你需要：
-
-1. **找到网址**（Base URL + Endpoint）
-2. **准备请求头**（Authorization、Content-Type）
-3. **构造请求体**（JSON 格式的参数）
-4. **发送请求**（处理网络错误、超时）
-5. **解析响应**（把 JSON 转成可用的数据）
-
-所有编程语言都能用，但你需要处理很多细节。
-
-### 5.2 SDK：让管家代办
-
-SDK（Software Development Kit）就像是 API 提供方派给你的专属管家：
-
-```python
-# HTTP 方式：自己处理所有细节
+# HTTP 方式:自己处理所有细节
 import requests
 response = requests.post(
     "https://api.deepseek.com/v1/chat/completions",
@@ -182,7 +38,7 @@ response = requests.post(
 )
 result = response.json()["choices"][0]["message"]["content"]
 
-# SDK 方式：管家帮你处理
+# SDK 方式:管家帮你处理
 from openai import OpenAI
 client = OpenAI(api_key="sk-xxx")
 response = client.chat.completions.create(
@@ -192,94 +48,219 @@ response = client.chat.completions.create(
 result = response.choices[0].message.content
 ```
 
-SDK 自动处理了：鉴权、请求格式、错误处理、重试逻辑、响应解析。
+---
 
-::: tip 建议
-**能用 SDK 就用 SDK**，把麻烦事留给库，把时间留给自己。
+## 1. API 的本质:插头与插座
+
+**API**(Application Programming Interface,应用程序编程接口)就是"程序之间对话的约定"。
+
+### 1.1 用电器来类比
+
+| 概念 | 电器类比 | API 对应 |
+| :--- | :--- | :--- |
+| **接口** | 插座形状 | 函数签名 / URL |
+| **输入** | 电流输入 | 函数参数 / 请求体 |
+| **输出** | 电器工作 | 返回值 / 响应体 |
+
+### 1.2 三种 API 形态对比
+
+<ApiTypesComparison />
+
+---
+
+## 2. 一次完整的 API 调用
+
+👇 **动手试试看**:点击下方按钮,观察一次完整的 API 请求-响应流程:
+
+<ApiRequestDemo />
+
+### 2.1 API 调用的四个阶段
+
+| 阶段 | 发生了什么 | 电器类比 |
+| :--- | :--- | :--- |
+| **请求** | 客户端向服务器发送请求 | 按下开关 |
+| **传输** | 请求通过网络传输到服务器 | 电流通过电线 |
+| **处理** | 服务器处理请求并返回数据 | 电器开始工作 |
+| **响应** | 客户端接收并处理返回结果 | 灯泡发光 |
+
+### 2.2 餐厅类比
+
+| 餐厅角色 | API 对应 | 说明 |
+| :--- | :--- | :--- |
+| **菜单** | API 文档 | 告诉你有哪些"菜"可以点 |
+| **服务员** | HTTP 协议 | 标准化的"对话方式" |
+| **后厨** | 服务端 | 按"订单"处理请求 |
+| **上菜** | 响应 | 把结果返回给"客人" |
+
+---
+
+## 3. HTTP 方法:你是在"问"还是在"做"?
+
+调用 Web API 时,你需要告诉服务器你想做什么。这就是 HTTP 方法的由来。
+
+### 3.1 用餐厅点餐来理解
+
+| 场景 | 现实中你会怎么说? | 对应的 HTTP 方法 |
+| :--- | :--- | :--- |
+| 你想知道今天有什么菜 | "服务员,菜单给我看看" | **GET** - 纯"问",不改数据 |
+| 你想点一份宫保鸡丁 | "给我来份宫保鸡丁" | **POST** - "做"件事,创建数据 |
+| 你想换一道菜 | "把宫保鸡丁改成糖醋里脊" | **PUT** - 替换数据 |
+| 你想改口味 | "宫保鸡丁不要放花生" | **PATCH** - 部分修改 |
+| 你不想要了 | "算了,那道菜不要了" | **DELETE** - 删除数据 |
+
+<HttpMethodsDemo />
+
+::: warning 关于幂等性
+**幂等性**:多次执行结果是否相同?
+
+- **幂等的操作**(GET/PUT/DELETE):点 10 次和点 1 次,结果一样
+- **不幂等的操作**(POST):点 10 次,可能创建 10 个订单
+
+**解决方案**:POST 操作用唯一 ID 校验,避免重复处理。
+:::
+
+### 3.2 HTTP 方法速查表
+
+| 方法 | 用途 | 幂等性 | 安全性 | 典型场景 |
+| :--- | :--- | :--- | :--- | :--- |
+| **GET** | 获取资源 | 是 | 是 | 查询列表、查看详情 |
+| **POST** | 创建资源 | 否 | 否 | 新增用户、提交订单 |
+| **PUT** | 全量更新 | 是 | 否 | 替换整个用户资料 |
+| **PATCH** | 部分更新 | 否 | 否 | 只修改昵称 |
+| **DELETE** | 删除资源 | 是 | 否 | 删除用户、取消订单 |
+
+---
+
+## 4. HTTP 状态码:服务器在告诉你什么?
+
+服务器回复时,会先返回一个状态码,告诉你请求是否成功。
+
+### 4.1 状态码分类
+
+<StatusCodeCategories />
+
+### 4.2 常见状态码详解
+
+| 状态码 | 含义 | 典型场景 | 客户端处理 |
+| :--- | :--- | :--- | :--- |
+| **200 OK** | 成功 | 请求正常处理 | 展示数据 |
+| **201 Created** | 创建成功 | POST 请求成功创建资源 | 跳转到新资源 |
+| **400 Bad Request** | 请求格式错误 | 参数缺失或格式不对 | 检查参数 |
+| **401 Unauthorized** | 未认证 | 没有提供有效的 API Key | 引导用户登录 |
+| **403 Forbidden** | 无权限 | API Key 没有访问该资源的权限 | 提示权限不足 |
+| **404 Not Found** | 不存在 | 请求的地址或资源不存在 | 检查 URL |
+| **429 Too Many Requests** | 请求过多 | 超过了速率限制 | 稍后重试 |
+| **500 Internal Server Error** | 服务器错误 | 服务端出了问题 | 提示用户稍后重试 |
+
+👇 **动手试试看**:点击下方按钮,了解常见状态码的含义:
+
+<StatusCodeDemo />
+
+---
+
+## 5. HTTP vs SDK:自己跑腿还是让管家代办?
+
+### 5.1 两种调用方式对比
+
+| | 🏃 **HTTP API** | 🤵 **SDK** |
+| :--- | :--- | :--- |
+| **比喻** | 自己跑腿 | 管家代办 |
+| **优点** | ✓ 所有语言都能用<br>✓ 完全控制请求细节<br>✓ 无需额外依赖 | ✓ 代码简洁易读<br>✓ 自动处理鉴权<br>✓ 内置错误重试 |
+| **缺点** | ✗ 需要处理所有细节<br>✗ 代码冗长易出错 | ✗ 需要安装依赖<br>✗ 可能有版本问题 |
+| **代码示例** | `requests.post(url, json=..., headers={...})` | `client.chat.completions.create(...)` |
+
+### 5.2 如何选择?
+
+| 场景 | 推荐方式 | 原因 |
+| :--- | :--- | :--- |
+| **快速开发** | SDK | 自动处理鉴权、错误、重试 |
+| **学习原理** | HTTP | 理解底层机制 |
+| **不支持的语言** | HTTP | 任何语言都能用 |
+| **需要定制** | HTTP | 灵活控制每个细节 |
+
+::: tip 💡 建议
+**能用 SDK 就用 SDK**,把麻烦事留给库,把时间留给自己。
 :::
 
 ---
 
-## 6. 如何阅读 API 文档？
+## 6. 如何阅读 API 文档?
 
-API 文档就像说明书和菜单的结合体。你不需要从头读到尾，只需要学会"查字典"。
-
-打开任何一个 API 文档（比如 OpenAI 或 DeepSeek），你只需要找这几样东西：
-
-<ApiDocumentDemo />
+API 文档就像说明书和菜单的结合体。你不需要从头读到尾,只需要学会"查字典"。
 
 ### 6.1 文档阅读清单
 
+打开任何一个 API 文档(比如 OpenAI 或 DeepSeek),你只需要找这几样东西:
+
+<ApiDocumentDemo />
+
 | 项目 | 说明 | 示例 |
-|------|------|------|
+| :--- | :--- | :--- |
 | **Base URL** | API 的根地址 | `https://api.deepseek.com` |
 | **Authentication** | 如何证明身份 | `Authorization: Bearer sk-xxx` |
 | **Endpoints** | 具体的接口列表 | `/v1/chat/completions` |
-| **Parameters** | 必填/可选参数 | `model`（必填）、`temperature`（可选） |
+| **Parameters** | 必填/可选参数 | `model`(必填)、`temperature`(可选) |
 | **Response** | 返回数据结构 | `{"choices": [...]}` |
 
-### 6.2 常见状态码
+### 6.2 阅读文档的步骤
 
-服务器回复时，会先返回一个状态码，告诉你请求是否成功：
-
-| 状态码 | 含义 | 常见原因 |
-|--------|------|---------|
-| **200 OK** | 成功 | 请求正常处理 |
-| **201 Created** | 创建成功 | POST 请求成功创建资源 |
-| **400 Bad Request** | 请求格式错误 | 参数缺失或格式不对 |
-| **401 Unauthorized** | 未认证 | 没有提供有效的 API Key |
-| **403 Forbidden** | 无权限 | API Key 没有访问该资源的权限 |
-| **404 Not Found** | 不存在 | 请求的地址或资源不存在 |
-| **429 Too Many Requests** | 请求过多 | 超过了速率限制 |
-| **500 Internal Server Error** | 服务器错误 | 服务端出了问题 |
+1. **找到 Base URL** - 这是所有请求的前缀
+2. **看懂认证方式** - API Key 放在 Header 还是 Query?
+3. **找到需要的 Endpoint** - 你要调用的具体接口
+4. **查看请求参数** - 哪些必填?哪些可选?
+5. **理解返回格式** - 数据是如何组织的?
 
 ---
 
-## 7. 动手练习
+## 7. 动手练习:模拟 API 调用
 
-光说不练假把式。这里有个模拟 API，你可以随便填参数、随便改地址，看看会发生什么。
+光说不练假把式。这里有个模拟 API,你可以随便填参数、随便改地址,看看会发生什么。
 
 <ApiPlayground />
 
-试着触发以下场景：
-- ✅ **成功请求**：填入正确的 Endpoint 和 API Key
-- ❌ **401 错误**：不填 API Key，看看服务器怎么拒绝你
-- ❌ **404 错误**：填一个不存在的地址
+试着触发以下场景:
+- ✅ **成功请求**:填入正确的 Endpoint 和 API Key
+- ❌ **401 错误**:不填 API Key,看看服务器怎么拒绝你
+- ❌ **404 错误**:填一个不存在的地址
 
 ---
 
 ## 8. 小结
 
 ::: info 核心要点
-1. **API 就是传声筒**，帮你把话传给另一段代码或远程服务器
-2. **你早就用过 API 了**，从 `len()` 到 `open()` 都是 API
-3. **Web API 是超能力**，让你调用千里之外的超级电脑
-4. **SDK 是好管家**，能用 SDK 就别自己跑腿
-5. **看文档找三样**：地址、鉴权、参数
+1. **API 就是传声筒**,帮你把话传给另一段代码或远程服务器
+2. **你早就用过 API 了**,从 `len()` 到 `open()` 都是 API
+3. **Web API 是超能力**,让你调用千里之外的超级电脑
+4. **SDK 是好管家**,能用 SDK 就别自己跑腿
+5. **看文档找三样**:地址、鉴权、参数
 :::
 
-在 AI 编程的时代，你只需要记住这几个核心概念。剩下的细节，IDE 和 AI 助手会帮你处理。
+在 AI 编程的时代,你只需要记住这几个核心概念。剩下的细节,IDE 和 AI 助手会帮你处理。
 
 ---
 
 ## 名词速查表
 
 | 名词 | 全称 | 解释 |
-|------|------|------|
-| **API** | Application Programming Interface | 应用程序编程接口，定义了软件之间如何交互 |
-| **Web API** | - | 基于 HTTP 协议的 API，用于网络通信 |
-| **Endpoint** | - | 端点，API 的具体地址 |
+| :--- | :--- | :--- |
+| **API** | Application Programming Interface | 应用程序编程接口,定义了软件之间如何交互 |
+| **Web API** | - | 基于 HTTP 协议的 API,用于网络通信 |
+| **Endpoint** | - | 端点,API 的具体地址 |
 | **HTTP** | HyperText Transfer Protocol | Web API 使用的通信协议 |
 | **GET** | - | 获取资源的方法 |
 | **POST** | - | 提交数据的方法 |
-| **SDK** | Software Development Kit | 软件开发工具包，封装了底层 API 调用 |
+| **SDK** | Software Development Kit | 软件开发工具包,封装了底层 API 调用 |
 | **URL** | Uniform Resource Locator | API 的网络地址 |
 | **JSON** | JavaScript Object Notation | 常用的数据格式 |
 | **Authentication** | - | 验证身份的过程 |
 | **Status Code** | - | HTTP 响应中的状态码 |
 | **Request** | - | 请求 |
 | **Response** | - | 响应 |
-| **Header** | - | HTTP 头，包含元信息 |
+| **Header** | - | HTTP 头,包含元信息 |
 | **Payload** | - | 请求或响应的实际数据 |
 | **Rate Limit** | - | 速率限制 |
-| **Idempotent** | - | 幂等，多次执行结果相同 |
+| **Idempotent** | - | 幂等,多次执行结果相同 |
+| **REST** | Representational State Transfer | 一种 API 架构风格 |
+| **RPC** | Remote Procedure Call | 远程过程调用 |
+| **GraphQL** | - | 一种查询语言 API |
+| **gRPC** | - | Google 开发的高性能 RPC 框架 |
diff --git a/docs/zh-cn/appendix/4-server-and-backend/http-protocol.md b/docs/zh-cn/appendix/4-server-and-backend/http-protocol.md
index dbb7120..881bcde 100644
--- a/docs/zh-cn/appendix/4-server-and-backend/http-protocol.md
+++ b/docs/zh-cn/appendix/4-server-and-backend/http-protocol.md
@@ -1,3 +1,297 @@
-# HTTP 协议
+# HTTP 协议：前后端的"通信语言"
 
-> 待实现
+::: tip 🎯 核心问题
+**HTTP 是如何工作的？** 这就像问：两个人如何对话？需要约定语言、语法、对话规则。HTTP 就是前后端之间的"对话协议"。
+:::
+
+---
+
+## 0. HTTP 的本质
+
+**HTTP**（HyperText Transfer Protocol，超文本传输协议）是前后端通信的基础协议。
+
+### 0.1 用对话来类比
+
+| 对话要素 | HTTP 对应 | 说明 |
+| :--- | :--- | :--- |
+| 语言 | HTTP 协议 | 双方都能理解的语言 |
+| 语法 | 请求/响应格式 | 怎么"说话" |
+| 流程 | 请求-响应模式 | 一问一答 |
+| 结束 | 挂断 | TCP 连接关闭 |
+
+---
+
+## 1. HTTP 的发展历程
+
+HTTP 从 1991 年诞生至今，经历了多次重大升级。
+
+<HttpProtocolDemo />
+
+### 1.1 版本对比
+
+| 版本 | 年份 | 核心改进 | 典型特征 |
+| :--- | :--- | :--- | :--- |
+| **HTTP/0.9** | 1991 | 仅支持 GET | 纯文本，只有请求，无响应头 |
+| **HTTP/1.0** | 1996 | 增加 POST/HEAD | 每个请求一个 TCP 连接 |
+| **HTTP/1.1** | 1997 | 持久连接 | Keep-Alive，一个连接多个请求 |
+| **HTTP/2** | 2015 | 多路复用 | 二进制帧，头部压缩 |
+| **HTTP/3** | 2022 | 基于 QUIC | UDP 传输，解决队头阻塞 |
+
+::: tip 💡 为什么需要 HTTP/2？
+HTTP/1.1 虽然支持持久连接，但请求必须串行发送（前一个请求的响应返回后，才能发送下一个请求）。HTTP/2 通过多路复用解决了这个问题，可以同时发送多个请求。
+:::
+
+---
+
+## 2. HTTP 请求的结构
+
+### 2.1 请求行
+
+```http
+GET /api/users/123 HTTP/1.1
+```
+
+包含三个部分：
+- **方法**：GET、POST、PUT、DELETE 等
+- **URL**：请求的资源路径
+- **版本**：HTTP/1.1 或 HTTP/2
+
+### 2.2 请求头
+
+```http
+Host: api.example.com
+User-Agent: Mozilla/5.0
+Accept: application/json
+Authorization: Bearer xxx
+Content-Type: application/json
+Content-Length: 45
+```
+
+常见请求头：
+| 头部 | 说明 | 示例 |
+| :--- | :--- | :--- |
+| **Host** | 服务器域名 | `api.example.com` |
+| **User-Agent** | 客户端信息 | `Mozilla/5.0` |
+| **Accept** | 接受的响应类型 | `application/json` |
+| **Authorization** | 认证信息 | `Bearer token` |
+| **Content-Type** | 请求体类型 | `application/json` |
+
+### 2.3 请求体
+
+```json
+{
+  "name": "张三",
+  "email": "zhangsan@example.com"
+}
+```
+
+只有 POST、PUT、PATCH 等方法才有请求体。
+
+---
+
+## 3. HTTP 响应的结构
+
+### 3.1 状态行
+
+```http
+HTTP/1.1 200 OK
+```
+
+包含三个部分：
+- **版本**：HTTP/1.1
+- **状态码**：200、404、500 等
+- **状态文本**：OK、Not Found 等
+
+### 3.2 响应头
+
+```http
+Content-Type: application/json
+Content-Length: 156
+Cache-Control: max-age=3600
+Set-Cookie: session=xxx; HttpOnly
+```
+
+常见响应头：
+| 头部 | 说明 | 示例 |
+| :--- | :--- | :--- |
+| **Content-Type** | 响应体类型 | `application/json` |
+| **Content-Length** | 响应体大小 | `156` |
+| **Cache-Control** | 缓存策略 | `max-age=3600` |
+| **Set-Cookie** | 设置 Cookie | `session=xxx` |
+
+### 3.3 响应体
+
+```json
+{
+  "code": 0,
+  "data": {
+    "id": 123,
+    "name": "张三"
+  }
+}
+```
+
+---
+
+## 4. HTTP 方法详解
+
+| 方法 | 用途 | 请求体 | 幂等性 | 安全性 |
+| :--- | :--- | :--- | :--- | :--- |
+| **GET** | 获取资源 | 无 | 是 | 是 |
+| **POST** | 创建资源 | 有 | 否 | 否 |
+| **PUT** | 全量更新 | 有 | 是 | 否 |
+| **PATCH** | 部分更新 | 有 | 否 | 否 |
+| **DELETE** | 删除资源 | 无 | 是 | 否 |
+| **HEAD** | 获取头部 | 无 | 是 | 是 |
+| **OPTIONS** | 查询支持的方法 | 无 | 是 | 是 |
+
+### 4.1 GET vs POST
+
+| 特性 | GET | POST |
+| :--- | :--- | :--- |
+| **参数位置** | URL 查询参数 | 请求体 |
+| **缓存** | 可缓存 | 默认不缓存 |
+| **书签** | 可添加为书签 | 不可 |
+| **历史记录** | 保存在浏览器历史 | 不保存 |
+| **数据长度** | 有限制（URL 长度） | 无限制 |
+| **安全性** | 参数可见在 URL | 参数在请求体中 |
+
+::: tip 💡 何时使用 GET/POST？
+- **GET**：查询、获取数据
+- **POST**：创建、提交数据
+- **PUT**：全量更新（替换整个资源）
+- **PATCH**：部分更新（只修改指定字段）
+- **DELETE**：删除资源
+:::
+
+---
+
+## 5. HTTP 状态码
+
+### 5.1 状态码分类
+
+| 分类 | 说明 | 典型状态码 |
+| :--- | :--- | :--- |
+| **2xx** | 成功 | 200 OK、201 Created、204 No Content |
+| **3xx** | 重定向 | 301 永久、302 临时、304 未修改 |
+| **4xx** | 客户端错误 | 400 参数错误、401 未认证、404 不存在 |
+| **5xx** | 服务端错误 | 500 内部错误、503 不可用 |
+
+### 5.2 常用状态码
+
+| 状态码 | 说明 | 使用场景 |
+| :--- | :--- | :--- |
+| **200 OK** | 请求成功 | GET、PUT 请求成功 |
+| **201 Created** | 创建成功 | POST 创建资源成功 |
+| **204 No Content** | 无内容 | DELETE 删除成功 |
+| **301 Moved Permanently** | 永久重定向 | URL 永久变更 |
+| **302 Found** | 临时重定向 | URL 临时变更 |
+| **304 Not Modified** | 未修改 | 缓存有效 |
+| **400 Bad Request** | 参数错误 | 请求参数格式错误 |
+| **401 Unauthorized** | 未认证 | 需要登录 |
+| **403 Forbidden** | 无权限 | 已登录但权限不足 |
+| **404 Not Found** | 不存在 | 资源不存在 |
+| **500 Internal Server Error** | 内部错误 | 服务器异常 |
+| **503 Service Unavailable** | 不可用 | 服务器维护或过载 |
+
+---
+
+## 6. HTTPS：安全的 HTTP
+
+### 6.1 HTTP vs HTTPS
+
+| 特性 | HTTP | HTTPS |
+| :--- | :--- | :--- |
+| **协议** | TCP | TCP + SSL/TLS |
+| **端口** | 80 | 443 |
+| **数据** | 明文传输 | 加密传输 |
+| **证书** | 不需要 | 需要 SSL 证书 |
+| **性能** | 略快 | 略慢（握手开销） |
+| **SEO** | 无影响 | 搜索引擎优先收录 |
+
+### 6.2 HTTPS 的工作流程
+
+1. **Client Hello**：客户端发送支持的加密套件
+2. **Server Hello**：服务器返回证书和选定的加密套件
+3. **验证证书**：客户端验证服务器证书的有效性
+4. **密钥交换**：使用非对称加密交换会话密钥
+5. **加密通信**：使用会话密钥进行对称加密通信
+
+::: tip 💡 HTTPS 的优势
+- **防窃听**：数据加密，第三方无法读取
+- **防篡改**：数据完整性校验
+- **防冒充**：SSL 证书验证服务器身份
+:::
+
+---
+
+## 7. HTTP 缓存机制
+
+### 7.1 缓存头
+
+| 头部 | 说明 | 示例 |
+| :--- | :--- | :--- |
+| **Cache-Control** | 缓存策略 | `max-age=3600` |
+| **ETag** | 资源版本号 | `"33a64df551425fcc"` |
+| **Last-Modified** | 最后修改时间 | `Wed, 21 Oct 2015 07:28:00 GMT` |
+
+### 7.2 缓存策略
+
+**强缓存**：
+```http
+Cache-Control: max-age=3600
+```
+在 3600 秒内，浏览器直接使用缓存，不发送请求。
+
+**协商缓存**：
+```http
+ETag: "33a64df551425fcc"
+```
+浏览器发送 `If-None-Match`，服务器返回 304（未修改）或 200（已修改）。
+
+---
+
+## 8. 常见问题
+
+### 8.1 GET 和 POST 的本质区别
+
+**误区**：GET 和 POST 的区别只是参数位置不同。
+
+**真相**：
+- GET 是幂等的，多次请求结果相同
+- POST 是非幂等的，多次请求可能创建多个资源
+- GET 可被缓存，POST 默认不缓存
+- GET 可被书签保存，POST 不可
+
+### 8.2 HTTP/1.1 的队头阻塞
+
+**问题**：HTTP/1.1 虽然支持持久连接，但请求必须串行发送。前一个请求响应慢，后续请求都要等待。
+
+**解决方案**：
+- HTTP/2 多路复用
+- 域名分片（多个域名建立多个连接）
+- 连接池（限制并发数）
+
+### 8.3 HTTP/2 的优势
+
+| 特性 | HTTP/1.1 | HTTP/2 |
+| :--- | :--- | :--- |
+| **传输格式** | 文本 | 二进制帧 |
+| **多路复用** | 不支持 | 支持 |
+| **头部压缩** | 无 | HPACK 算法 |
+| **服务器推送** | 不支持 | 支持 |
+
+---
+
+## 名词速查表
+
+| 名词 | 英文 | 解释 |
+| :--- | :--- | :--- |
+| **HTTP** | HyperText Transfer Protocol | 超文本传输协议 |
+| **HTTPS** | HTTP Secure | HTTP + SSL/TLS |
+| **TCP** | Transmission Control Protocol | 传输控制协议 |
+| **SSL/TLS** | Secure Sockets Layer | 安全套接层 |
+| **幂等性** | Idempotent | 多次请求结果相同 |
+| **持久连接** | Keep-Alive | 一个 TCP 连接发送多个请求 |
+| **多路复用** | Multiplexing | 同时发送多个请求 |
+| **队头阻塞** | Head-of-Line Blocking | 前面的请求阻塞后面的请求 |
diff --git a/docs/zh-cn/appendix/4-server-and-backend/serialization.md b/docs/zh-cn/appendix/4-server-and-backend/serialization.md
index 36c3ac6..e44b4eb 100644
--- a/docs/zh-cn/appendix/4-server-and-backend/serialization.md
+++ b/docs/zh-cn/appendix/4-server-and-backend/serialization.md
@@ -1,3 +1,455 @@
-# 序列化与数据格式
+# 序列化：数据的"翻译"
 
-> 待实现
+::: tip 🎯 核心问题
+**数据如何在网络上传输？** 这就像问：一个人说的话，如何让另一个人听懂？序列化解决的就是"数据翻译"的问题——把内存中的对象翻译成可以传输的格式。
+:::
+
+---
+
+## 序列化数据的必要性
+
+在前后端交互过程中，数据需要经历多次"变形"才能从服务器传递到客户端。
+
+**场景一：前端收到的数据"变了"**
+
+```javascript
+// 后端发送
+Date birth = new Date(1990, 5, 15)
+
+// 前端收到
+{ "birth": "1990-06-15T00:00:00Z" }  // 字符串！
+```
+
+前端想用 `.getFullYear()`，结果报错了——因为这不是 Date 对象，是字符串。
+
+**场景二：中文乱码**
+
+```json
+// 期望
+{ "name": "张三" }
+
+// 实际收到
+{ "name": "å¼ ä¸" }
+```
+
+字符编码问题导致中文变成乱码。
+
+**场景三：性能瓶颈**
+
+```json
+// 一个包含 10000 条商品列表的响应
+{
+  "products": [
+    { "id": 1, "name": "...", "description": "...", ... },
+    // ... 9999 more
+  ]
+}
+// 大小：5.2 MB，传输时间：3.5 秒
+```
+
+JSON 格式的冗余导致数据包太大，严重影响性能。
+
+---
+
+**序列化就像"翻译"**——把内存对象"翻译"成可以传输的格式，接收方再"翻译"回去。
+
+---
+
+## 1. 什么是序列化/反序列化？
+
+**序列化**（Serialization）就是把对象转换成可传输格式的过程。
+
+**反序列化**（Deserialization）就是把传输格式还原成对象的过程。
+
+### 1.1 用寄快递来类比
+
+| 寄快递 | 序列化 | 说明 |
+| :--- | :--- | :--- |
+| 打包物品 | 序列化 | 把物品装箱，贴上标签 |
+| 运输 | 网络传输 | 快递车运送到目的地 |
+| 拆包取物 | 反序列化 | 收件人打开箱子，取出物品 |
+
+### 1.2 为什么需要序列化？
+
+| 原因 | 说明 | 示例 |
+| :--- | :--- | :--- |
+| **网络传输** | 网络只能传输字节流 | API 调用、RPC 通信 |
+| **持久化存储** | 磁盘只能存储字节 | 保存对象到文件、数据库 |
+| **跨语言** | 不同语言的数据结构不同 | Java 对象 → Python 字典 |
+| **分布式缓存** | Redis/Memcached 存储字节 | 缓存用户信息 |
+
+---
+
+## 2. 常见的序列化格式
+
+👇 **动手试试看**：点击下方按钮，观察不同语言的序列化过程：
+
+<SerializationDemo />
+
+### 2.1 JSON：最通用
+
+**优点**：
+- 可读性好，调试方便
+- 所有语言都支持
+- 浏览器原生支持（`JSON.parse` / `JSON.stringify`）
+
+**缺点**：
+- 体积大（有大量 `{}` `""` 标记）
+- 不支持丰富的数据类型（Date、Map、Set 会被转换成字符串）
+
+**适用场景**：
+- 公开 API
+- 前后端通信
+- 配置文件
+
+### 2.2 XML：曾经的主流
+
+```xml
+<?xml version="1.0" encoding="UTF-8"?>
+<user>
+  <id>123</id>
+  <name>张三</name>
+  <email>zhangsan@example.com</email>
+  <age>28</age>
+</user>
+```
+
+**优点**：
+- 结构清晰，支持注释
+- 支持复杂的嵌套结构
+- 有 Schema 验证（XSD）
+
+**缺点**：
+- 体积大，解析慢
+- 标签冗余（`<open></close>`）
+
+**适用场景**：
+- 配置文件（Spring、MyBatis）
+- SOAP 协议
+- 复杂数据交换
+
+### 2.3 Protobuf：最高效
+
+```protobuf
+// user.proto
+syntax = "proto3";
+message User {
+  int32 id = 1;
+  string name = 2;
+  string email = 3;
+  int32 age = 4;
+}
+```
+
+**优点**：
+- 体积小（比 JSON 小 30-50%）
+- 速度快（解析速度快 5-10 倍）
+- 向后兼容（新增字段不影响老版本）
+
+**缺点**：
+- 不可读（二进制格式）
+- 需要 .proto 文件定义
+- 不支持动态类型
+
+**适用场景**：
+- 微服务内部通信
+- 高性能场景（游戏、实时通信）
+- 移动端 App（节省流量）
+
+### 2.4 MessagePack：兼顾可读性和性能
+
+```json
+// MessagePack 是 JSON 的二进制版本
+// 相同数据，MessagePack 比 JSON 小 30% 左右
+```
+
+**优点**：
+- 比 JSON 小，比 JSON 快
+- 保持 JSON 的数据模型
+- 支持所有 JSON 类型
+
+**缺点**：
+- 不可读
+- 不如 Protobuf 高效
+
+**适用场景**：
+- 需要性能但不想用 Protobuf
+- Redis 缓存
+- WebSocket 消息
+
+---
+
+## 3. 各语言序列化方式对比
+
+| 语言 | JSON 库 | Protobuf 库 | XML 库 |
+| :--- | :--- | :--- | :--- |
+| **JavaScript** | `JSON.stringify()` | `protobuf.js` | `fast-xml-parser` |
+| **Python** | `json.dumps()` | `protobuf` | `xmltodict` |
+| **Java** | `Jackson` / `Gson` | `protobuf-java` | `JAXB` |
+| **Go** | `encoding/json` | `proto` | `encoding/xml` |
+| **C++** | `nlohmann/json` | `protobuf` | `tinyxml2` |
+| **C#** | `System.Text.Json` | `Google.Protobuf` | `System.Xml` |
+
+::: tip 💡 选择建议
+- **前后端通信**：JSON（调试方便）
+- **微服务内部**：Protobuf（性能最优）
+- **配置文件**：JSON 或 YAML
+- **旧系统对接**：XML（可能别无选择）
+:::
+
+---
+
+## 4. 性能对比
+
+### 4.1 大小对比（以用户对象为例）
+
+| 格式 | 大小 | 相对 JSON |
+| :--- | :--- | :--- |
+| JSON | 68 bytes | 100% |
+| XML | 142 bytes | 209% |
+| Protobuf | 38 bytes | 56% |
+| MessagePack | 52 bytes | 76% |
+
+### 4.2 速度对比（序列化 10000 次）
+
+| 格式 | 耗时 | 相对 JSON |
+| :--- | :--- | :--- |
+| JSON | 45 ms | 100% |
+| XML | 120 ms | 267% |
+| Protobuf | 8 ms | 18% |
+| MessagePack | 28 ms | 62% |
+
+::: tip 💡 性能测试结论
+- **Protobuf 最快**：适合高性能场景
+- **MessagePack 次之**：比 JSON 快 40% 左右
+- **JSON 最慢**：但对大多数场景已经足够
+:::
+
+---
+
+## 5. 常见问题
+
+### 5.1 日期序列化问题
+
+**问题**：Date 对象序列化后变成字符串
+
+```javascript
+// 序列化前
+const date = new Date('2024-01-01')
+
+// 序列化后
+JSON.stringify(date)  // "2024-01-01T00:00:00.000Z"
+```
+
+**解决方案**：
+```javascript
+// 方案1：转成时间戳
+{ createdAt: date.getTime() }  // 1704067200000
+
+// 方案2：转成 ISO 字符串
+{ createdAt: date.toISOString() }  // "2024-01-01T00:00:00.000Z"
+
+// 方案3：自定义序列化
+JSON.stringify(obj, (key, value) => {
+  if (value instanceof Date) {
+    return { __type: 'Date', value: value.toISOString() }
+  }
+  return value
+})
+```
+
+### 5.2 循环引用问题
+
+**问题**：对象循环引用会报错
+
+```javascript
+const obj = { name: 'test' }
+obj.self = obj
+JSON.stringify(obj)  // TypeError: Converting circular structure to JSON
+```
+
+**解决方案**：
+```javascript
+// 方案1：过滤掉循环引用
+const seen = new WeakSet()
+JSON.stringify(obj, (key, value) => {
+  if (typeof value === 'object' && value !== null) {
+    if (seen.has(value)) return
+    seen.add(value)
+  }
+  return value
+})
+
+// 方案2：使用 flatted 库
+import { parse, stringify } from 'flatted'
+stringify(obj)  // 自动处理循环引用
+```
+
+### 5.3 中文乱码问题
+
+**问题**：中文序列化后乱码
+
+**原因**：
+- 字符编码不一致（UTF-8 vs GBK）
+- BOM 标记
+
+**解决方案**：
+```python
+# Python 确保使用 UTF-8
+import json
+json.dumps(data, ensure_ascii=False)  # 不转义中文
+```
+
+```javascript
+// Node.js 设置响应头
+res.setHeader('Content-Type', 'application/json; charset=utf-8')
+```
+
+---
+
+## 6. 实战：电商系统序列化方案
+
+### 6.1 场景分析
+
+| 场景 | 格式选择 | 理由 |
+| :--- | :--- | :--- |
+| **App → 后端 API** | JSON | 调试方便，前后端统一 |
+| **后端 → 后端 RPC** | Protobuf | 性能最优，节省流量 |
+| **缓存到 Redis** | MessagePack | 比 JSON 小，可序列化复杂对象 |
+| **日志记录** | JSON | 便于日志分析工具解析 |
+
+### 6.2 代码示例
+
+```javascript
+// API 响应（JSON）
+app.get('/api/products/:id', async (req, res) => {
+  const product = await db.getProduct(req.params.id)
+  res.json({
+    code: 0,
+    data: product
+  })
+})
+
+// 微服务通信（Protobuf）
+// product.proto
+syntax = "proto3";
+message Product {
+  int32 id = 1;
+  string name = 2;
+  int32 price = 3;
+}
+
+// 服务端
+const proto = require('./product.proto')
+const message = proto.Product.create(product)
+const buffer = proto.Product.encode(message).finish()
+
+// 客户端
+const decoded = proto.Product.decode(buffer)
+
+// Redis 缓存（MessagePack）
+const msgpack = require('msgpack-lite')
+await redis.set(
+  `product:${id}`,
+  msgpack.encode(product)
+)
+const cached = msgpack.decode(await redis.get(`product:${id}`))
+```
+
+---
+
+## 7. 用 AI 辅助选择序列化方案
+
+AI 可以帮助你根据场景选择合适的序列化格式。
+
+### 7.1 提示词模板
+
+```
+你是一位资深的系统架构师，精通数据序列化技术。请帮我选择合适的序列化方案。
+
+## 业务场景
+[描述你的场景，例如：电商 App、游戏后端、微服务等]
+
+## 技术要求
+[列出约束条件，例如：
+- 前后端分离（Vue + Node.js）
+- 性能要求高（QPS > 10000）
+- 流量敏感（移动端，需节省流量）
+- 需要跨语言（Java + Python + Go）]
+
+## 数据特征
+[描述数据特点，例如：
+- 数据量大（单次响应 > 1MB）
+- 结构复杂（多层嵌套）
+- 包含日期、二进制数据等特殊类型]
+
+## 输出格式
+请按以下格式输出：
+1. 推荐方案（JSON/Protobuf/MessagePack/XML）
+2. 理由说明
+3. 性能对比（估算大小和速度）
+4. 代码示例
+```
+
+### 7.2 实战示例
+
+**输入提示词**：
+
+```
+你是一位资深的系统架构师。我们的电商 App 需要优化商品列表接口性能。
+
+## 业务场景
+- 电商 App 的商品列表接口
+- 单次返回 100 个商品
+- 每个 商品包含：id, name, price, image, description 等 20 个字段
+- 当前使用 JSON，响应大小约 200KB，耗时 800ms
+
+## 技术要求
+- 前端是 Vue.js
+- 后端是 Node.js + Go 微服务
+- 需要兼顾性能和开发效率
+
+## 优化目标
+- 响应时间降到 300ms 以内
+- 数据包大小减少 30%
+```
+
+**AI 输出**：
+
+```
+推荐方案：混合方案
+
+1. **API 层**：继续使用 JSON（前端友好）
+2. **微服务通信**：切换到 Protobuf（性能提升）
+3. **静态数据**：启用 gzip 压缩
+
+### 理由说明
+- JSON 对前端最友好，无需额外解析
+- 后端微服务用 Protobuf，可以减少 40% 的数据量
+- gzip 压缩对文本效果明显（JSON 可压缩 70%）
+
+### 性能对比
+| 方案 | 大小 | 耗时 |
+|------|------|------|
+| 当前 (JSON) | 200 KB | 800 ms |
+| + gzip | 60 KB | 350 ms |
+| + Protobuf | 50 KB | 280 ms |
+
+### 代码示例
+[具体实现代码...]
+```
+
+---
+
+## 名词速查表
+
+| 名词 | 英文 | 解释 |
+| :--- | :--- | :--- |
+| **序列化** | Serialization | 对象 → 字节流 |
+| **反序列化** | Deserialization | 字节流 → 对象 |
+| **JSON** | JavaScript Object Notation | 最常用的文本格式 |
+| **XML** | Extensible Markup Language | 标记语言，曾主流 |
+| **Protobuf** | Protocol Buffers | Google 开源的高效格式 |
+| **MessagePack** | - | JSON 的二进制版本 |
+| **编码** | Encoding | 字符 → 字节 |
+| **解码** | Decoding | 字节 → 字符 |
diff --git a/docs/zh-cn/appendix/5-data/ab-testing.md b/docs/zh-cn/appendix/5-data/ab-testing.md
index e7cbf4a..5208783 100644
--- a/docs/zh-cn/appendix/5-data/ab-testing.md
+++ b/docs/zh-cn/appendix/5-data/ab-testing.md
@@ -1,3 +1,565 @@
-# A/B 测试与实验驱动
+# A/B 测试：用数据"做决策"
 
-> 待实现
+::: tip 🎯 核心问题
+**如何科学地验证产品改动的效果？** 这就像问：新按钮真的更好用吗？还是用户只是因为新鲜感多点了一下？A/B 测试解决的就是"用数据说话"的问题——不是我觉得好，而是数据证明真的好。
+:::
+
+---
+
+## 0. 先问一个问题：你有没有经历过这些"伪成功"？
+
+**场景一：被数据骗了**
+
+你改了购物车的结算按钮颜色，从蓝变红。一周后一看数据：点击率提升了 30%！
+
+你很高兴，宣布大获成功。但三周后，点击率悄悄回到了原水平，甚至还不如之前。
+
+**真相**：这是"新奇效应"——用户因为好奇多点了几次，新鲜劲过后就恢复了。
+
+**场景二：假阳性陷阱**
+
+你同时测试了 20 个不同的改进方案。有一个方案显示"统计显著"（p < 0.05），你立即全量上线。
+
+一个月后，用户满意度下降了。
+
+**真相**：同时测试 20 个方案，即使全部无效，也有 64% 的概率至少有一个"显著"（1 - 0.95^20）。你看到的"显著"只是随机波动。
+
+**场景三：辛普森悖论**
+
+你的数据显示：B 版本的转化率（7.3%）高于 A 版本（5.6%）。但拆分数据后却发现：
+
+- 移动端：A 8% > B 6%
+- 桌面端：A 4% > B 3%
+
+**每个渠道 A 都更好，但合并后 B 反而赢了**！
+
+**真相**：流量分配不均（移动端占 80% 流量，且更多分配给了 B），导致加权平均后 B 看起来更好。
+
+---
+
+**好的 A/B 测试就像科学的临床试验**——严谨设计、足够样本、长期观察，才能得出可信结论。
+
+---
+
+## 1. 什么是 A/B 测试？
+
+**A/B 测试**是一种对比实验方法：将用户随机分成两组，分别体验不同版本，比较关键指标（如转化率、点击率）的差异，从而判断哪个版本更优。
+
+### 1.1 用医学试验来类比
+
+| 医学试验 | A/B 测试 | 说明 |
+| :--- | :--- | :--- |
+| 对照组（安慰剂） | A组（对照组） | 使用当前版本，作为基准 |
+| 实验组（新药） | B组（实验组） | 使用新版本，验证效果 |
+| 治愈率 | 转化率 | 衡量是否"成功"的指标 |
+| 统计显著性 | 统计显著性 | 结果是否可信 |
+
+**关键原则**：除了版本不同，其他所有条件必须相同（随机分配、同时运行、相同用户群）。
+
+### 1.2 A/B 测试的完整流程
+
+```
+1. 提出假设
+   ↓
+2. 设计实验（确定指标、样本量）
+   ↓
+3. 开发并部署实验
+   ↓
+4. 运行实验（收集数据）
+   ↓
+5. 分析结果（统计检验）
+   ↓
+6. 做出决策（全量/放弃/迭代）
+```
+
+---
+
+## 2. A/B 测试的核心价值
+
+### 2.1 避免"拍脑袋决策"
+
+没有 A/B 测试时，决策往往依赖：
+
+- **HiPPO**（Highest Paid Person's Opinion）：最高领导说了算
+- **设计直觉**：设计师觉得这样更好看
+- **模仿竞品**：竞争对手这么做，我们也这么做
+
+**问题**：这些方法都忽略了真实的用户行为。
+
+### 2.2 降低风险
+
+上线前不知道用户会不会买账？先小范围测试，用 1% 流量验证，避免全量上线后造成损失。
+
+### 2.3 持续优化
+
+通过不断的小实验，积累小的提升，最终实现显著增长。这就是"增长黑客"的核心方法。
+
+---
+
+## 3. 实验设计：对照组与实验组
+
+### 3.1 随机分配的重要性
+
+**正确的做法**：每个用户有 50% 概率进入 A 组，50% 概率进入 B 组
+
+**错误的做法**：
+- 前半天所有用户进 A 组，后半天进 B 组（时间差异）
+- 移动端用户进 A 组，桌面端进 B 组（设备差异）
+- 新用户进 A 组，老用户进 B 组（用户类型差异）
+
+**为什么随机很重要？**
+
+只有随机分配，才能保证两组用户在其他所有方面都相似（年龄、设备、使用习惯等），这样才能公平比较。
+
+### 3.2 流量分配演示
+
+👇 **动手试试看**：点击下方按钮，观察流量如何随机分配到两组：
+
+<ABTestingDemo />
+
+::: tip 💡 50/50 分配是最优的
+虽然有 30/70 或 20/80 的分配策略，但 50/50 能最快检测出差异。除非你对新版本极度不放心，否则不推荐使用非对称分配。
+:::
+
+---
+
+## 4. 样本量计算：需要多少用户才够？
+
+### 4.1 为什么不能"看着办"？
+
+样本量太小 → 统计功效不足，即使有真实差异也检测不出来（假阴性）
+样本量太大 → 浪费资源，运行时间过长
+
+**正确做法**：实验前计算所需样本量。
+
+### 4.2 影响样本量的四个因素
+
+| 因素 | 影响 | 典型值 |
+| :--- | :--- | :--- |
+| **基准转化率** | 越高，所需样本越少 | 2% - 10% |
+| **最小检测提升** | 越小，所需样本越多 | 相对提升 5% - 20% |
+| **显著性水平 (α)** | 越小，所需样本越多 | 0.05 (95%置信度) |
+| **统计功效 (1-β)** | 越大，所需样本越多 | 0.8 (80%功效) |
+
+**直觉理解**：
+- 你想检测的差异越小（比如只提升 5%），就需要更多样本才能"看清"
+- 你想要的结果越确定（比如 99% 置信度 vs 95%），就需要更多证据
+
+### 4.3 样本量计算公式
+
+对于比例指标（转化率），简化的样本量公式为：
+
+```
+n = (Zα + Zβ)² × [p1(1-p1) + p2(1-p2)] / (p2 - p1)²
+```
+
+其中：
+- `n` = 每组所需样本量
+- `Zα` = 显著性水平对应的 Z 值（α=0.05 时，Zα=1.96）
+- `Zβ` = 统计功效对应的 Z 值（80%功效时，Zβ=0.84）
+- `p1` = 基准转化率
+- `p2` = 目标转化率 = p1 × (1 + 相对提升)
+
+### 4.4 样本量计算示例
+
+**场景**：购物车结算按钮，当前转化率 5%，希望检测 20% 的相对提升（即 6%）。
+
+- `p1` = 5% = 0.05
+- `p2` = 6% = 0.06
+- `Zα` = 1.96 (α=0.05)
+- `Zβ` = 0.84 (80%功效)
+
+```
+n = (1.96 + 0.84)² × [0.05×0.95 + 0.06×0.94] / (0.06 - 0.05)²
+n ≈ 6,932
+```
+
+**每组需要 6,932 个样本，两组共需 13,864 个样本**。
+
+如果每天有 5,000 个访客，大约需要 **3 天**才能达到足够样本量。
+
+::: tip 💡 在线计算工具
+- [Evan Miller 的样本量计算器](https://www.evanmiller.org/ab-testing/sample-size.html) - 业界标准
+- [Optimizely 的样本量计算器](https://www.optimizely.com/sample-size-calculator/)
+:::
+
+---
+
+## 5. 统计显著性：如何判断结果"可信"？
+
+### 5.1 P 值是什么？
+
+**P 值**：如果两个版本真的没有差异（零假设为真），观察到当前数据（或更极端数据）的概率。
+
+**通俗理解**：P 值越小，说明"纯属巧合"的可能性越小。
+
+**常用阈值**：
+- `p < 0.05`：统计显著，有 95% 的信心说差异不是随机的
+- `p < 0.01`：高度显著，有 99% 的信心
+- `p ≥ 0.05`：不显著，差异可能是随机波动
+
+### 5.2 置信区间
+
+**置信区间**：真实差异可能落入的范围。
+
+示例：
+- 相对提升：+15%
+- 95% 置信区间：[+5%, +25%]
+
+**解读**：我们有 95% 的信心认为，真实提升在 5% 到 25% 之间。
+
+::: warning ⚠️ 常见误解
+置信区间不是"有 95% 的概率在这个区间内"，而是"如果我们重复实验 100 次，95 次的区间会包含真实值"。
+
+对于单次实验，真实值要么在区间内，要么不在。但我们不知道是哪种情况。
+:::
+
+### 5.3 A/B 组结果对比演示
+
+👇 **动手试试看**：调整转化率和样本量，观察统计显著性的变化：
+
+<ABTestingDemo />
+
+**关键观察**：
+1. **相对提升越大**，P 值越小（越容易显著）
+2. **样本量越大**，P 值越小（越容易显著）
+3. **转化率越低**，需要更大样本量才能达到相同显著性
+
+---
+
+## 6. A/B 测试的常见误区
+
+### 6.1 过早停止实验（Peeking 问题）
+
+**问题**：看到结果"显著"就立即停止实验，不再继续观察。
+
+**真相**：P 值会随着数据积累而波动。你看到的"显著"可能只是暂时的随机波动。
+
+**Airbnb 的真实案例**：
+- 第 7 天：p = 0.05，结果显著，B 版本领先
+- 第 14 天：p = 0.15，不再显著
+- 第 30 天：p = 0.42，完全中性
+
+如果第 7 天就停止，就会得出错误的结论。
+
+**解决方案**：
+- 实验前计算所需样本量，达到后才能分析
+- 使用序贯检验（Sequential Testing），预设"窥探"点和调整后的显著性阈值
+
+### 6.2 辛普森悖论
+
+**问题**：分组看 B 更差，但合并后 B 反而更好（或相反）。
+
+**根本原因**：混淆变量（Confounding Variable）分布不均。
+
+**示例**：
+```
+移动端（占 80% 流量）：
+- A 组：8% 转化率（分配了 40% 流量）
+- B 组：6% 转化率（分配了 40% 流量）
+
+桌面端（占 20% 流量）：
+- A 组：4% 转化率（分配了 10% 流量）
+- B 组：3% 转化率（分配了 10% 流量）
+
+合并数据：
+- A 组：(8%×0.4 + 4%×0.1) / 0.5 = 7.2%
+- B 组：(6%×0.4 + 3%×0.1) / 0.5 = 5.4%
+
+但如果是这样分配：
+移动端：A 组 40% 流量，B 组 40% 流量
+桌面端：A 组 0% 流量，B 组 20% 流量（不平衡！）
+
+合并数据：
+- A 组：(8%×0.4) / 0.4 = 8%
+- B 组：(6%×0.4 + 3%×0.2) / 0.6 = 5%
+但如果不加权，直接平均：A=5.6%, B=7.3%（B 反而赢了！）
+```
+
+**解决方案**：
+- 确保随机化正确，每个子群体流量分配一致
+- 按关键维度（设备、流量来源、用户类型）分别分析
+- 使用 A/A 测试验证随机化是否有效
+
+### 6.3 P-hacking（P 值操纵）
+
+**问题**：通过尝试不同方法，直到找到"显著"结果。
+
+**常见形式**：
+- **子群挖掘**：主指标不显著，就按年龄、地区、设备细分，宣称某个子群显著
+- **选择性报告**：同时测了 10 个指标，只报告显著的 1 个
+- **延长实验**：看到 p = 0.06，就再跑几天，"看看能不能降到 0.05 以下"
+
+**问题**：这些都会大幅增加假阳性率。
+
+**解决方案**：
+- 预先注册假设和指标，实验过程中不改变
+- 同时测试多个指标时，使用 Bonferroni 校正或 FDR（False Discovery Rate）控制
+- 严格控制"窥探"次数
+
+### 6.4 新奇效应
+
+**问题**：用户因好奇点击新功能，导致短期数据虚高。
+
+**示例**：
+- 新按钮上线首周：点击率 +30%
+- 第二周：+15%
+- 第三周：+5%
+- 第四周：0%（甚至 -2%，新鲜感过后，用户发现并不好用）
+
+**解决方案**：
+- 至少运行 2 个完整业务周期（通常 2-4 周）
+- 观察趋势是否稳定，而不是只看绝对值
+- 对长期指标（如用户留存）的重视度高于短期指标（如点击率）
+
+### 6.5 统计功效不足
+
+**问题**：样本量太小，即使有真实差异也检测不出来（假阴性）。
+
+**示例**：预期提升 5%，但只跑了 1,000 个样本，结果显示"不显著"，你就放弃了。
+
+实际上，如果检测 5% 的提升，需要约 30,000 样本才能达到 80% 功效。
+
+**解决方案**：
+- 实验前必须计算样本量
+- 如果资源有限，可以考虑：
+  - 提高最小检测提升（比如从 5% 改为 10%）
+  - 降低统计功效（从 80% 降到 70%，但会增加假阴性风险）
+  - 延长测试时间
+
+---
+
+## 7. 实战案例
+
+### 7.1 案例 1：按钮颜色测试
+
+**背景**：电商网站购物车结算按钮，当前为蓝色，想测试红色是否能提升转化率。
+
+**实验设计**：
+- 假设：红色按钮更醒目，能提升转化率 10%
+- 指标：结算按钮点击率（点击次数 / 访问次数）
+- 基准转化率：5%
+- 目标转化率：5.5%（相对提升 10%）
+- 所需样本量：每组约 30,000（使用在线计算器）
+- 流量分配：50/50
+- 显著性水平：α = 0.05
+- 统计功效：80%
+
+**结果**：
+- 运行 7 天后达到所需样本量
+- A 组（蓝）：5.02%
+- B 组（红）：5.15%
+- 相对提升：+2.6%
+- P 值：0.23（不显著）
+- 95% 置信区间：[-1.7%, +6.9%]
+
+**决策**：结果不显著，无法确认红色按钮更好。考虑到：
+1. 转化率提升很小（即使真实，也只有 2.6%）
+2. 置信区间包含 0（甚至包含负值）
+3. 红色按钮可能影响品牌一致性
+
+**最终决定**：保持蓝色按钮，尝试其他优化方向（如按钮文案、大小、位置）。
+
+---
+
+### 7.2 案例 2：注册流程简化
+
+**背景**：SaaS 产品注册流程需要填写 10 个字段，想测试减少到 5 个字段是否能提升注册率。
+
+**实验设计**：
+- 假设：字段更少 → 注册率更高
+- 指标：注册完成率（完成注册数 / 开始注册数）
+- 基准转化率：25%
+- 目标转化率：30%（相对提升 20%）
+- 所需样本量：每组约 2,000
+- 流量分配：50/50
+
+**结果**：
+- A 组（10 字段）：24.8%
+- B 组（5 字段）：31.2%
+- 相对提升：+25.8%
+- P 值：< 0.001（高度显著）
+- 95% 置信区间：[+18.2%, +33.4%]
+
+**决策**：结果高度显著，全量上线 5 字段版本。
+
+**后续跟踪**：
+- 新用户注册率提升了 25.8%
+- 用户质量（后续付费率）没有下降
+- 用户反馈"注册很快很方便"
+
+---
+
+### 7.3 案例 3：推荐算法优化
+
+**背景**：视频网站推荐算法，想测试新的协同过滤算法是否能提升用户观看时长。
+
+**实验设计**：
+- 假设：新算法推荐更精准 → 观看时长更长
+- 指标：人均每日观看时长（分钟）
+- 基准：45 分钟/天
+- 目标：提升 5% → 47.25 分钟/天
+- 所需样本量：每组约 10,000 用户
+- 运行时间：至少 4 周（覆盖完整用户行为周期）
+
+**结果（4 周后）**：
+- A 组（旧算法）：45.2 分钟/天
+- B 组（新算法）：46.8 分钟/天
+- 相对提升：+3.5%
+- P 值：0.07（接近显著，但未达到 0.05 阈值）
+- 95% 置信区间：[-0.2%, +7.2%]
+
+**决策**：
+1. 统计不显著，但趋势积极（P 值接近 0.05）
+2. 置信区间下限接近 0（-0.2%），风险很小
+3. 新算法成本增加不大（服务器资源 +5%）
+
+**最终决定**：谨慎全量上线，但：
+- 持续监控关键指标
+- 准备快速回滚方案
+- 一个月后重新评估
+
+**一个月后**：
+- 观看时长提升稳定在 +4%
+- 用户留存率无显著变化
+- 服务器成本增加可接受
+
+结论：实验成功。
+
+---
+
+## 8. 用 AI 辅助 A/B 测试设计
+
+AI 可以帮助你快速设计实验、计算样本量、分析结果。关键在于提供清晰的上下文。
+
+### 8.1 提示词模板：样本量计算
+
+```
+你是一位资深的 A/B 测试专家。请帮我计算实验所需的样本量。
+
+## 业务背景
+[描述你的业务场景，例如：电商网站、SaaS 产品、移动 App]
+
+## 当前指标
+- 关键指标：[转化率/留存率/点击率等]
+- 当前数值：[基准值，如 5%]
+- 指标类型：[比例指标/均值指标]
+
+## 实验设计
+- 预期相对提升：[如 10%，即从 5% 提升到 5.5%]
+- 显著性水平 (α)：0.05 (95% 置信度)
+- 统计功效 (1-β)：0.8 (80%)
+- 流量分配：50/50
+
+## 请求
+1. 计算每组所需样本量
+2. 假设每天有 [X] 个访问用户，估算需要运行多少天
+3. 给出实验设计建议
+```
+
+### 8.2 提示词模板：结果分析
+
+```
+你是一位资深的 A/B 测试专家。请帮我分析实验结果。
+
+## 实验结果
+- A 组（对照组）：
+  - 样本量：10,000
+  - 转化数：500
+  - 转化率：5.0%
+
+- B 组（实验组）：
+  - 样本量：10,000
+  - 转化数：550
+  - 转化率：5.5%
+
+## 请求
+1. 计算相对提升（百分比）
+2. 计算 Z 值和 P 值
+3. 计算 95% 置信区间
+4. 判断是否统计显著（α = 0.05）
+5. 给出决策建议（全量/放弃/继续观察）
+6. 指出实验可能存在的偏倚或问题
+```
+
+### 8.3 提示词模板：常见问题诊断
+
+```
+你是一位资深的 A/B 测试专家。我的实验遇到了问题，请帮我诊断。
+
+## 问题描述
+[描述你遇到的问题，例如：
+- 运行两周后 P 值仍在 0.5 左右，完全不显著
+- A 组和 B 组数据差异很大，完全不像随机分配
+- 第 3 天结果显示显著，但第 7 天又不显著了]
+
+## 实验信息
+- 指标：[转化率等]
+- 基准值：[如 5%]
+- 预期提升：[如 10%]
+- 流量分配：[50/50]
+- 运行天数：[如 7 天]
+- 总样本量：[如 5,000]
+
+## 请求
+1. 分析可能的原因
+2. 提供诊断建议
+3. 给出解决方案
+```
+
+::: tip 💡 追问技巧
+- "请用通俗语言解释什么是 P 值"
+- "我的置信区间包含 0，这意味着什么？"
+- "如何判断是否存在辛普森悖论？"
+- "什么情况下可以使用非 50/50 的流量分配？"
+:::
+
+---
+
+## 名词速查表
+
+| 名词 | 英文 | 解释 |
+| :--- | :--- | :--- |
+| **A/B 测试** | A/B Testing | 对比实验，随机分配用户到不同版本，比较指标差异 |
+| **对照组** | Control Group | 使用当前版本的组（A 组），作为基准 |
+| **实验组** | Treatment Group | 使用新版本的组（B 组），验证效果 |
+| **转化率** | Conversion Rate | 完成目标行为的用户占比（如购买、注册） |
+| **零假设** | Null Hypothesis | 假设两组没有差异的起点，目标是"推翻"它 |
+| **P 值** | P-value | 如果零假设为真，观察到当前数据的概率 |
+| **统计显著性** | Statistical Significance | P 值 < 0.05，结果不太可能是随机的 |
+| **置信区间** | Confidence Interval | 真实差异可能落入的范围（如 95% CI） |
+| **统计功效** | Statistical Power | 检测到真实效应的概率（1-β），通常 80% |
+| **第一类错误** | Type I Error | 假阳性（说有差异，实际没有），α 控制 |
+| **第二类错误** | Type II Error | 假阴性（说没差异，实际有），β 控制 |
+| **显著性水平** | Significance Level | 容忍第一类错误的概率，通常 α = 0.05 |
+| **效应量** | Effect Size | 差异的大小（相对提升多少），不只是是否显著 |
+| **样本量** | Sample Size | 每组需要的用户数，需提前计算 |
+| **随机分配** | Random Assignment | 每个用户有相同概率进入任一组 |
+| **单尾检验** | One-tailed Test | 只检验"更好"（不关心"更差"） |
+| **双尾检验** | Two-tailed Test | 检验"有差异"（更好或更差都算） |
+| **辛普森悖论** | Simpson's Paradox | 分组看趋势一致，合并后趋势相反 |
+| **P-hacking** | P-hacking | 操纵数据或方法以获得显著结果 |
+| **新奇效应** | Novelty Effect | 用户因好奇产生的短期行为变化 |
+| **序贯检验** | Sequential Testing | 预设多个检查点，动态调整显著性阈值 |
+
+---
+
+## 参考资源
+
+### 在线工具
+- [Evan Miller - A/B 测试样本量计算器](https://www.evanmiller.org/ab-testing/sample-size.html)
+- [Optimizely - 样本量计算器](https://www.optimizely.com/sample-size-calculator/)
+- [AB TestGuide - 统计显著性计算器](https://abtestguide.com/calc/)
+
+### 经典文章
+- [ Airbnb 的实验设计实践](https://medium.com/airbnb-engineering/experimentation-at-airbnb-acquiring-trust-confidence-through-exploratory-data-analysis-9304de556269)
+- [Netflix 的 A/B 测试指南](https://netflixtechblog.com/its-all-a-bout-testing-the-netflix-experimentation-platform-4e1ca458c55)
+- [Google 的 A/B 测试最佳实践](https://experimentation.com/)
+
+### 书籍推荐
+- 《Trustworthy Online Controlled Experiments》- Ron Kohavi 等
+- 《Designing Experiments》- Geoffrey Keppel
+
+### 相关文章
+- [A/B Testing Pitfalls - Simpson's Paradox, P-hacking, Early Stopping](https://blog.example.com/ab-testing-pitfalls)
+- [Sample Size Calculation for A/B Testing](https://www.evanmiller.org/ab-testing/sample-size.html)
diff --git a/docs/zh-cn/appendix/5-data/data-analysis.md b/docs/zh-cn/appendix/5-data/data-analysis.md
index 69436f5..33b9a21 100644
--- a/docs/zh-cn/appendix/5-data/data-analysis.md
+++ b/docs/zh-cn/appendix/5-data/data-analysis.md
@@ -1,3 +1,576 @@
-# 数据分析基础（统计 / 指标 / 漏斗）
+# 数据分析：从数据中"挖掘价值"
 
-> 待实现
+::: tip 核心问题
+**如何从数据中发现规律？** 这就像问：怎么从一堆杂乱的数字里找到有价值的信息？怎么判断业务是否健康？怎么预测未来的趋势？数据分析解决的就是"从数据到洞察"的问题。
+:::
+
+---
+
+## 0. 先问一个问题：你有没有经历过这些困惑？
+
+**场景一：被数据淹没**
+
+```
+系统日志：10 GB/天
+用户行为：100 万条/天
+订单数据：10 万条/天
+```
+
+数据堆积如山，但不知道从哪里入手分析，更不知道这些数据能告诉你什么。
+
+**场景二：只看表面指标**
+
+```
+DAU（日活用户）：10 万 → 看起来不错！
+次日留存：15% → 危险！
+30 日留存：3% → 非常危险！
+```
+
+只看 DAU 以为产品很成功，但留存率暴跌说明用户来一次就走，产品根本没有粘性。
+
+**场景三：不会用 SQL 分析数据**
+
+```
+想统计：每个用户的平均订单额
+只会写：SELECT * FROM orders;
+然后用 Excel 手动计算...
+```
+
+掌握基本的数据分析技能，能让你从"看数据"变成"用数据驱动决策"。
+
+---
+
+**好的数据分析就像侦探破案**——从蛛丝马迹中发现规律，从混乱中找到真相。
+
+---
+
+## 1. 数据分析的价值
+
+**数据分析**是从数据中提取有价值信息的过程。它不是简单的"看数字"，而是通过统计、聚合、可视化等方法，发现数据背后的规律和趋势。
+
+### 1.1 用医学检查来类比
+
+| 医学检查 | 数据分析 | 说明 |
+| :--- | :--- | :--- |
+| 体温计 | 基础指标 | 温度/DAU 等单一数值 |
+| 血常规 | 描述性统计 | 均值、中位数、分布情况 |
+| CT 扫描 | 多维度分析 | 从不同角度看数据 |
+| 趋势图 | 时间序列分析 | 观察变化趋势 |
+| 诊断报告 | 数据洞察 | 得出结论和建议 |
+
+### 1.2 数据分析的核心价值
+
+| 价值 | 说明 | 示例 |
+| :--- | :--- | :--- |
+| **描述现状** | 告诉你"发生了什么" | 今日 DAU 10 万，销售额 50 万 |
+| **诊断问题** | 告诉你"为什么发生" | 留存率低是因为注册流程太长 |
+| **预测趋势** | 告诉你"可能发生什么" | 根据过去 30 天数据，下月 DAU 增长 10% |
+| **指导决策** | 告诉你"应该怎么做" | A/B 测试显示新版按钮转化率提高 20% |
+
+---
+
+## 2. 描述性统计：从数据中"提炼信息"
+
+描述性统计是数据分析的基础，它用几个关键指标概括大量数据的特征。
+
+### 2.1 集中趋势：数据的"中心"在哪里？
+
+| 指标 | 定义 | 适用场景 | 示例 |
+| :--- | :--- | :--- | :--- |
+| **均值** | 所有数值的平均值 | 数据分布均匀时 | 用户平均年龄：28 岁 |
+| **中位数** | 排序后位于中间的值 | 有极端值时 | 收入中位数：5000 元（避免被亿万富翁 skew） |
+| **众数** | 出现次数最多的值 | 分类数据 | 最常买的商品：iPhone |
+
+**为什么需要三个指标？**
+
+```python
+# 场景一：正常分布
+数据：[1, 2, 3, 4, 5]
+均值 = 3, 中位数 = 3, 众数 = 无
+→ 数据分布均匀，三个指标接近
+
+# 场景二：有极端值
+数据：[1, 2, 3, 4, 100]
+均值 = 22, 中位数 = 3
+→ 极端值（100）拉高了均值，中位数更准确
+
+# 场景三：电商订单
+数据：[9.9, 9.9, 9.9, 999, 9999]
+均值 = 2005.72, 众数 = 9.9
+→ 大部分用户买 9.9 元商品，均值被高客单价 skew
+```
+
+::: tip 💡 实战建议
+- **DAU、GMV 等指标**：看均值即可（数据量大，极端值影响小）
+- **用户收入、房价等**：看中位数更准确（避免被极端值 skew）
+- **热销商品、常用功能**：看众数（最典型的情况）
+:::
+
+### 2.2 离散程度：数据"分散"还是"集中"？
+
+| 指标 | 定义 | 说明 |
+| :--- | :--- | :--- |
+| **方差** | 各数据与均值差的平方的平均 | 数值越大，数据越分散 |
+| **标准差** | 方差的平方根 | 与原始数据同单位，更直观 |
+| **极差** = 最大值 - 最小值 | 最简单的离散度量 | 易受极端值影响 |
+
+**示例：两个班级的数学成绩**
+
+```
+A 班：[85, 88, 90, 92, 95]
+均值 = 90, 标准差 = 3.16
+→ 成绩集中，水平稳定
+
+B 班：[60, 75, 90, 100, 100]
+均值 = 85, 标准差 = 16.58
+→ 成绩分散，水平差异大
+```
+
+::: tip 💡 标准差的应用
+- **标准差小**：用户行为一致，产品体验稳定
+- **标准差大**：用户群体差异大，可能需要分群分析
+:::
+
+### 2.3 交互式演示
+
+👇 **动手试试看**：在下方输入一组数据，实时计算统计指标：
+
+<DataAnalysisDemo />
+
+---
+
+## 3. 数据聚合：从明细到"洞察"
+
+数据聚合是将明细数据按维度汇总，从"看个体"到"看整体"的过程。
+
+### 3.1 常用聚合操作
+
+| 操作 | SQL 函数 | 说明 | 示例 |
+| :--- | :--- | :--- | :--- |
+| **计数** | COUNT(*) | 统计行数 | 订单总数 |
+| **求和** | SUM(amount) | 累加数值 | 总销售额 |
+| **均值** | AVG(amount) | 计算平均 | 平均订单额 |
+| **最大值** | MAX(amount) | 找最大值 | 最高单笔订单 |
+| **最小值** | MIN(amount) | 找最小值 | 最低单笔订单 |
+
+### 3.2 分组聚合（GROUP BY）
+
+**问题**：如何统计每个用户的订单数和总消费？
+
+```sql
+SELECT
+  user_id,
+  COUNT(*) as order_count,
+  SUM(amount) as total_amount
+FROM orders
+GROUP BY user_id;
+```
+
+**结果**：
+
+| user_id | order_count | total_amount |
+| :--- | :--- | :--- |
+| U001 | 3 | 480 |
+| U002 | 2 | 450 |
+| U003 | 1 | 250 |
+
+::: tip 💡 GROUP BY 的核心思想
+把"明细数据"按某个维度分组，然后对每组进行统计。
+- **维度**：你想分析的角度（用户、商品、日期等）
+- **指标**：你想统计的数值（订单数、销售额等）
+:::
+
+### 3.3 多维度聚合
+
+**问题**：如何统计每个用户每天的消费？
+
+```sql
+SELECT
+  user_id,
+  date,
+  SUM(amount) as daily_amount
+FROM orders
+GROUP BY user_id, date;
+```
+
+**结果**：
+
+| user_id | date | daily_amount |
+| :--- | :--- | :--- |
+| U001 | 2024-01-01 | 100 |
+| U001 | 2024-01-02 | 200 |
+| U002 | 2024-01-01 | 150 |
+
+::: warning 常见错误
+```sql
+-- ❌ 错误：user_id 没有在 GROUP BY 中
+SELECT user_id, SUM(amount)
+FROM orders;
+
+-- ✅ 正确：所有非聚合字段都要在 GROUP BY 中
+SELECT user_id, SUM(amount)
+FROM orders
+GROUP BY user_id;
+```
+:::
+
+---
+
+## 4. 可视化基础：让数据"会说话"
+
+好的可视化能让人一眼看懂数据的规律。
+
+### 4.1 常用图表类型
+
+| 图表类型 | 用途 | 示例 |
+| :--- | :--- | :--- |
+| **折线图** | 展示趋势 | DAU 变化、销售额增长 |
+| **柱状图** | 对比数值 | 各渠道用户数、各品类销售额 |
+| **饼图** | 展示占比 | 用户来源分布、商品品类占比 |
+| **散点图** | 探索关系 | 广告投入 vs 销售额 |
+
+### 4.2 图表选择指南
+
+| 想展示 | 选择图表 |
+| :--- | :--- |
+| **随时间的变化** | 折线图 |
+| **类别之间的对比** | 柱状图 |
+| **部分占整体的比例** | 饼图 |
+| **两个变量的关系** | 散点图 |
+| **多个变量的分布** | 箱线图 |
+
+::: tip 💡 可视化原则
+1. **简洁至上**：去掉不必要的装饰（3D 效果、渐变色等）
+2. **突出重点**：用颜色、大小强调关键数据
+3. **标注清晰**：标题、坐标轴、图例都要清楚
+4. **避免误导**：Y 轴从 0 开始，不要截断坐标轴
+:::
+
+---
+
+## 5. 数据清洗：垃圾进，垃圾出
+
+**"Garbage In, Garbage Out"** —— 如果数据质量差，分析结果就不可信。
+
+### 5.1 常见数据问题
+
+| 问题类型 | 示例 | 影响 |
+| :--- | :--- | :--- |
+| **缺失值** | 年龄字段为 NULL | 统计结果偏差 |
+| **重复值** | 同一订单出现两次 | 重复计算 |
+| **异常值** | 年龄 = 200 岁 | 均值被拉偏 |
+| **格式不一致** | 日期：2024-01-01 和 01/01/2024 | 无法正确排序 |
+
+### 5.2 数据清洗步骤
+
+| 步骤 | 操作 | SQL 示例 |
+| :--- | :--- | :--- |
+| **1. 去重** | 删除重复记录 | `SELECT DISTINCT * FROM orders;` |
+| **2. 处理缺失值** | 填充或删除 | `WHERE age IS NOT NULL;` |
+| **3. 处理异常值** | 过滤或修正 | `WHERE age BETWEEN 0 AND 120;` |
+| **4. 标准化格式** | 统一日期格式 | `TO_DATE(date_str, 'YYYY-MM-DD');` |
+
+---
+
+## 6. 漏斗分析：找到转化瓶颈
+
+漏斗分析用于追踪用户在一系列步骤中的转化情况，找到"流失最严重"的环节。
+
+### 6.1 什么是漏斗分析？
+
+**示例：电商购物流程**
+
+```
+访问商品页 → 加入购物车 → 进入结算页 → 完成支付
+   10000  →    6000     →     4000    →    2500
+   100%   →    60%      →     40%     →    25%
+```
+
+**关键指标**：
+
+| 指标 | 定义 | 示例 |
+| :--- | :--- | :--- |
+| **转化率** | 进入下一步的人数 / 当前步骤人数 | 60% 的用户加入购物车 |
+| **整体转化率** | 最终完成人数 / 初始人数 | 25% 的用户完成购买 |
+| **流失率** | 1 - 转化率 | 40% 的用户在购物车环节流失 |
+
+### 6.2 如何优化漏斗？
+
+**步骤 1：找到最弱的环节**
+
+```
+访问 → 加购 → 结算 → 支付
+100% → 60% → 40% → 25%
+       -40%  -20%  -15%
+```
+
+最大的流失在"访问 → 加购"环节（-40%），说明**商品页没有吸引力**。
+
+**步骤 2：针对性优化**
+
+| 问题环节 | 可能原因 | 优化方案 |
+| :--- | :--- | :--- |
+| 访问 → 加购 | 商品详情不清晰 | 优化图片、描述、评价 |
+| 加购 → 结算 | 运费不透明 | 明确显示总价（含运费） |
+| 结算 → 支付 | 支付流程复杂 | 减少表单字段，支持一键支付 |
+
+---
+
+## 7. 留存分析：衡量产品粘性
+
+**留存率**衡量用户在首次使用后持续使用的情况，是产品健康度的核心指标。
+
+### 7.1 留存率类型
+
+| 类型 | 定义 | 计算公式 | 健康标准 |
+| :--- | :--- | :--- | :--- |
+| **次日留存** | 注册第二天还来的用户占比 | Day 1 活跃 / 注册用户 | > 40% |
+| **7 日留存** | 注册第 7 天还来的用户占比 | Day 7 活跃 / 注册用户 | > 20% |
+| **30 日留存** | 注册第 30 天还来的用户占比 | Day 30 活跃 / 注册用户 | > 10% |
+
+### 7.2 如何计算留存率？
+
+**示例：1 月 1 日注册的 1000 名用户**
+
+| 日期 | 注册用户 | 次日留存 | 7 日留存 | 30 日留存 |
+| :--- | :--- | :--- | :--- | :--- |
+| 2024-01-01 | 1000 | 45% (450 人) | 32% (320 人) | 18% (180 人) |
+| 2024-01-02 | 1200 | 42% (504 人) | 28% (336 人) | 15% (180 人) |
+
+**次日留存率** = 1 月 2 日还活跃的用户 / 1 月 1 日注册用户
+= 450 / 1000 = 45%
+
+### 7.3 留存率的意义
+
+| 留存率 | 产品状态 | 说明 |
+| :--- | :--- | :--- |
+| **高留存** (>40%) | 健康增长 | 用户喜欢，持续使用 |
+| **中等留存** (20-40%) | 需要优化 | 产品还行，但不够吸引人 |
+| **低留存** (<20%) | 危险 | 用户来一次就走，产品有问题 |
+
+::: tip 💡 留存 vs DAU
+- **高 DAU + 低留存** = "烧钱买量"，不可持续
+- **低 DAU + 高留存** = "慢热型产品"，需要时间积累
+- **高 DAU + 高留存** = 健康增长 🎯
+:::
+
+---
+
+## 8. 实战：用户行为分析
+
+假设你负责一个电商 App 的数据分析，以下是完整的分析流程。
+
+### 8.1 问题定义
+
+**目标**：提高订单转化率
+
+**现状**：访问商品页 10 万人，最终下单 2000 人，转化率 2%
+
+### 8.2 数据收集
+
+| 维度 | 数据 |
+| :--- | :--- |
+| **用户属性** | 年龄、性别、地域、注册时间 |
+| **行为数据** | 浏览记录、加购、下单、支付 |
+| **交易数据** | 订单金额、商品品类、优惠券使用 |
+
+### 8.3 数据分析
+
+**步骤 1：漏斗分析**
+
+```
+浏览商品 → 加购 → 结算 → 支付
+  10万  → 5万  → 3万  → 2万
+  100%  → 50%  → 30%  → 2%
+```
+
+发现："结算 → 支付"环节流失最严重（30% → 2%）。
+
+**步骤 2：分群分析**
+
+```sql
+-- 按用户来源分析转化率
+SELECT
+  traffic_source,
+  COUNT(*) as total_users,
+  SUM(CASE WHEN order_id IS NOT NULL THEN 1 ELSE 0 END) as converted_users,
+  SUM(CASE WHEN order_id IS NOT NULL THEN 1 ELSE 0 END) * 1.0 / COUNT(*) as conversion_rate
+FROM user_events
+GROUP BY traffic_source;
+```
+
+**结果**：
+
+| 来源 | 用户数 | 转化用户 | 转化率 |
+| :--- | :--- | :--- | :--- |
+| 搜索引擎 | 50000 | 500 | 1% |
+| 社交媒体 | 30000 | 900 | 3% |
+| 直接访问 | 20000 | 600 | 3% |
+
+**结论**：搜索引擎用户转化率最低（1%），可能是因为搜索来的用户"只是看看"。
+
+**步骤 3：留存分析**
+
+```sql
+-- 不同来源用户的次日留存
+SELECT
+  traffic_source,
+  AVG(retention_day1) as avg_retention
+FROM user_retention
+GROUP BY traffic_source;
+```
+
+**结果**：
+
+| 来源 | 次日留存 |
+| :--- | :--- |
+| 搜索引擎 | 25% |
+| 社交媒体 | 45% |
+| 直接访问 | 55% |
+
+**结论**：搜索引擎用户留存低，说明"质量不高"。
+
+### 8.4 行动建议
+
+| 问题 | 原因 | 建议 |
+| :--- | :--- | :--- |
+| 转化率低 (2%) | 结算流程复杂 | 简化表单，支持一键支付 |
+| 搜索引擎转化低 | 用户意向不明确 | 优化落地页，突出商品价值 |
+| 搜索引擎留存低 | 用户找到就离开 | 增加"相关推荐"，引导浏览更多商品 |
+
+---
+
+## 9. 用 AI 辅助数据分析
+
+AI 可以帮你快速生成 SQL、分析数据、生成报告。
+
+### 9.1 提示词模板
+
+```
+你是一位资深的数据分析师，精通 SQL 和数据可视化。请帮我分析以下数据。
+
+## 业务背景
+[描述你的业务场景，例如：电商 App、社交媒体等]
+
+## 数据表结构
+[描述数据表的字段，例如：
+- users: user_id, age, gender, register_date
+- orders: order_id, user_id, amount, created_at]
+
+## 分析需求
+[列出你想回答的问题，例如：
+1. 统计每个用户的订单数和总消费
+2. 找出消费 Top 10 的用户
+3. 分析用户消费的分布情况]
+
+## 输出要求
+1. SQL 查询语句
+2. 结果解读
+3. 数据可视化建议
+4. 业务洞察
+```
+
+### 9.2 实战示例：用户分群
+
+**输入提示词**：
+
+```
+你是一位资深的数据分析师。请帮我设计一个用户分群方案。
+
+## 业务背景
+我是一个电商 App 的数据分析师，我们有 100 万用户，想根据用户的消费行为进行分群，以便精准营销。
+
+## 数据表结构
+- orders: order_id, user_id, amount, created_at
+- users: user_id, age, gender, register_date
+
+## 分析需求
+1. 根据 RFM 模型（最近消费、消费频率、消费金额）对用户分群
+2. 计算每个分群的用户数和贡献的销售额
+3. 为每个分群设计营销策略
+
+## 输出要求
+请提供：
+1. SQL 查询语句
+2. 分群逻辑说明
+3. 每个分群的特征和营销策略
+```
+
+**AI 输出示例**：
+
+```sql
+-- RFM 分群 SQL
+WITH rfm AS (
+  SELECT
+    user_id,
+    DATEDIFF('2024-01-31', MAX(created_at)) as recency,
+    COUNT(*) as frequency,
+    SUM(amount) as monetary
+  FROM orders
+  WHERE created_at >= '2024-01-01'
+  GROUP BY user_id
+),
+rfm_scores AS (
+  SELECT
+    user_id,
+    recency,
+    frequency,
+    monetary,
+    NTILE(4) OVER (ORDER BY recency DESC) as r_score,
+    NTILE(4) OVER (ORDER BY frequency) as f_score,
+    NTILE(4) OVER (ORDER BY monetary) as m_score
+  FROM rfm
+)
+SELECT
+  user_id,
+  CASE
+    WHEN r_score IN (3, 4) AND f_score IN (3, 4) AND m_score IN (3, 4) THEN '重要价值用户'
+    WHEN r_score IN (1, 2) AND f_score IN (3, 4) AND m_score IN (3, 4) THEN '重要保持用户'
+    WHEN r_score IN (3, 4) AND f_score IN (1, 2) AND m_score IN (3, 4) THEN '重要发展用户'
+    WHEN r_score IN (1, 2) AND f_score IN (1, 2) AND m_score IN (3, 4) THEN '重要挽留用户'
+    WHEN r_score IN (3, 4) AND f_score IN (3, 4) AND m_score IN (1, 2) THEN '一般价值用户'
+    WHEN r_score IN (1, 2) AND f_score IN (3, 4) AND m_score IN (1, 2) THEN '一般保持用户'
+    WHEN r_score IN (3, 4) AND f_score IN (1, 2) AND m_score IN (1, 2) THEN '一般发展用户'
+    ELSE '流失用户'
+  END as user_segment
+FROM rfm_scores;
+```
+
+**分群策略**：
+
+| 分群 | 特征 | 营销策略 |
+| :--- | :--- | :--- |
+| **重要价值用户** | 最近消费、高频、高金额 | VIP 待遇，专属客服 |
+| **重要保持用户** | 很久没来、但曾经高频 | 唤醒活动，优惠券召回 |
+| **重要发展用户** | 最近消费、低频、高金额 | 引导复购，推荐关联商品 |
+| **重要挽留用户** | 很久没来、低频、高金额 | 主动联系，了解原因 |
+
+---
+
+## 名词速查表
+
+| 名词 | 英文 | 解释 |
+| :--- | :--- | :--- |
+| **描述性统计** | Descriptive Statistics | 用均值、中位数、标准差等指标概括数据 |
+| **均值** | Mean | 所有数值的平均值 |
+| **中位数** | Median | 排序后位于中间的值 |
+| **众数** | Mode | 出现次数最多的值 |
+| **标准差** | Standard Deviation | 衡量数据分散程度 |
+| **方差** | Variance | 标准差的平方 |
+| **聚合** | Aggregation | 将明细数据汇总（求和、计数等） |
+| **分组** | Group By | 按某个维度将数据分组 |
+| **漏斗分析** | Funnel Analysis | 分析用户在一系列步骤中的转化情况 |
+| **转化率** | Conversion Rate | 完成目标行为的用户占比 |
+| **留存率** | Retention Rate | 用户持续使用产品的比例 |
+| **次日留存** | Day 1 Retention | 注册第二天还活跃的用户占比 |
+| **数据清洗** | Data Cleaning | 处理缺失值、重复值、异常值 |
+| **可视化** | Visualization | 用图表展示数据 |
+| **折线图** | Line Chart | 展示随时间的变化趋势 |
+| **柱状图** | Bar Chart | 对比不同类别的数值 |
+| **饼图** | Pie Chart | 展示各部分占整体的比例 |
+| **散点图** | Scatter Plot | 展示两个变量的关系 |
+| **RFM 模型** | RFM Model | 根据最近消费、频率、金额对用户分群 |
+| **DAU** | Daily Active Users | 日活跃用户数 |
+| **GMV** | Gross Merchandise Value | 商品交易总额 |
+| **ARPU** | Average Revenue Per User | 每用户平均收入 |
+| **LTV** | Lifetime Value | 用户生命周期价值 |
diff --git a/docs/zh-cn/appendix/5-data/data-models.md b/docs/zh-cn/appendix/5-data/data-models.md
index 488ff92..9650c97 100644
--- a/docs/zh-cn/appendix/5-data/data-models.md
+++ b/docs/zh-cn/appendix/5-data/data-models.md
@@ -1,3 +1,818 @@
-# 数据模型全景（文档 / 图 / 时序 / 向量）
+# 数据模型：设计的"骨架"
 
-> 待实现
+::: tip 🎯 核心问题
+**如何设计合理的数据结构？** 这就像问：盖房子前怎么画图纸？仓库怎么摆放货物最高效？家族谱系怎么记录最清晰？数据模型解决的就是"数据如何组织"的问题。
+:::
+
+---
+
+## 0. 先问一个问题：你有没有经历过这些噩梦？
+
+**场景一：表设计混乱**
+
+```
+users 表：
+| id | name | address | order_1 | order_1_amount | order_2 | order_2_amount | ... |
+```
+
+订单字段重复 100 次，每次下单都要改表结构。
+
+**场景二：数据冗余严重**
+
+```
+orders 表：
+| id | user_name | user_email | user_phone | product_name | product_price |
+```
+
+用户信息、商品信息全部复制到订单表，修改用户邮箱需要更新所有历史订单。
+
+**场景三：关系处理错误**
+
+```
+posts 表：
+| id | title | tags |
+| 1  | Vue入门 | vue,frontend,javascript |
+```
+
+用逗号分隔存储标签，无法查询"有哪些文章包含 vue 标签"。
+
+---
+
+**好的数据模型就像建筑蓝图**——结构清晰、扩展灵活、关系明确。
+
+---
+
+## 1. 数据模型的重要性
+
+**数据模型**（Data Model）是对现实世界的抽象，描述数据如何存储、组织和关联。
+
+### 1.1 用建筑来类比
+
+| 建筑概念 | 对应概念 | 说明 |
+| :--- | :--- | :--- |
+| 蓝图 | 数据模型 | 设计的"骨架"和结构 |
+| 承重墙 | 主键/外键 | 保证结构稳固的核心 |
+| 房间布局 | 表结构 | 各个功能单元的设计 |
+| 水电管线 | 关系 | 连接各个部分的数据流 |
+
+### 1.2 数据模型的层次
+
+| 层次 | 内容 | 示例 |
+| :--- | :--- | :--- |
+| **概念模型** | 业务对象和关系 | 用户、订单、商品 |
+| **逻辑模型** | 表结构、关系类型 | users 表 1:N orders 表 |
+| **物理模型** | 具体存储实现 | 字段类型、索引、分区 |
+
+---
+
+## 2. ER 图：实体关系建模
+
+**ER 图**（Entity-Relationship Diagram）是用图形化方式描述数据模型的工具。
+
+### 2.1 核心概念
+
+| 符号 | 含义 | 示例 |
+| :--- | :--- | :--- |
+| **矩形** | 实体（表） | 用户、订单、商品 |
+| **椭圆** | 属性（字段） | 用户名、邮箱、电话 |
+| **菱形** | 关系 | 下单、支付、评论 |
+| **线条** | 连接 | 表与表的关联 |
+
+### 2.2 完整的 ER 图示例
+
+👇 **动手试试看**：探索用户-订单-商品的实体关系模型：
+
+<DataModelsDemo />
+
+---
+
+## 3. 关系类型：一对一、一对多、多对多
+
+关系类型决定了表之间如何关联，是数据模型设计的核心。
+
+### 3.1 一对一（One-to-One）
+
+**定义**：A 表的一条记录对应 B 表的一条记录。
+
+**示例**：用户 ↔ 详细资料
+
+```sql
+users 表：          user_profiles 表：
+| id | username |   | user_id | bio | avatar |
+| 1  | 张三     |   | 1       | ... | ...    |
+```
+
+**实现方式**：
+
+```sql
+-- 方式 1：外键唯一约束
+CREATE TABLE user_profiles (
+  user_id BIGINT PRIMARY KEY,
+  bio TEXT,
+  avatar VARCHAR(255),
+  FOREIGN KEY (user_id) REFERENCES users(id)
+);
+
+-- 方式 2：直接在主表扩展
+CREATE TABLE users (
+  id BIGINT PRIMARY KEY,
+  username VARCHAR(50),
+  profile_id BIGINT UNIQUE,
+  FOREIGN KEY (profile_id) REFERENCES user_profiles(id)
+);
+```
+
+**使用场景**：
+- 用户表 + 详细资料表（分离敏感信息）
+- 订单表 + 支付信息表（分离支付数据）
+- 商品表 + 库存表（分离库存管理）
+
+::: tip 💡 什么时候用一对一？
+当字段数量过多（超过 20 个）或需要分离敏感信息时，考虑拆分为一对一关系。
+:::
+
+### 3.2 一对多（One-to-Many）
+
+**定义**：A 表的一条记录对应 B 表的多条记录。
+
+**示例**：用户 → 订单
+
+```sql
+users 表：          orders 表：
+| id | username |   | id | user_id | amount |
+| 1  | 张三     |   | 1  | 1       | 100    |
+                    | 2  | 1       | 200    |
+```
+
+**实现方式**：
+
+```sql
+CREATE TABLE orders (
+  id BIGINT PRIMARY KEY,
+  user_id BIGINT NOT NULL,
+  amount DECIMAL(10,2),
+  FOREIGN KEY (user_id) REFERENCES users(id)
+);
+
+-- 查询某用户的所有订单
+SELECT * FROM orders WHERE user_id = 1;
+```
+
+**使用场景**：
+- 用户 → 订单
+- 分类 → 商品
+- 部门 → 员工
+
+::: tip 💡 最常见的关系
+一对多是关系型数据库中最常见的关系，约占 70% 的场景。
+:::
+
+### 3.3 多对多（Many-to-Many）
+
+**定义**：A 表的多条记录对应 B 表的多条记录。
+
+**示例**：学生 ↔ 课程
+
+```sql
+students 表：        courses 表：        enrollments 表（中间表）：
+| id | name  |      | id | title |     | student_id | course_id |
+| 1  | 小明  |      | 1  | 数学  |     | 1          | 1         |
+| 2  | 小红  |      | 2  | 英语  |     | 1          | 2         |
+                                     | 2          | 1         |
+```
+
+**实现方式**：
+
+```sql
+-- 学生表
+CREATE TABLE students (
+  id BIGINT PRIMARY KEY,
+  name VARCHAR(50)
+);
+
+-- 课程表
+CREATE TABLE courses (
+  id BIGINT PRIMARY KEY,
+  title VARCHAR(100)
+);
+
+-- 中间表（选课记录）
+CREATE TABLE enrollments (
+  student_id BIGINT,
+  course_id BIGINT,
+  enrolled_at TIMESTAMP,
+  PRIMARY KEY (student_id, course_id),
+  FOREIGN KEY (student_id) REFERENCES students(id),
+  FOREIGN KEY (course_id) REFERENCES courses(id)
+);
+
+-- 查询小明选的所有课程
+SELECT c.* FROM courses c
+JOIN enrollments e ON c.id = e.course_id
+WHERE e.student_id = 1;
+```
+
+**使用场景**：
+- 学生 ↔ 课程
+- 用户 ↔ 角色
+- 商品 ↔ 标签
+- 文章 ↔ 分类
+
+::: tip 💡 多对多需要中间表
+多对多关系必须通过中间表来实现，中间表包含两个外键，分别指向两张表。
+:::
+
+---
+
+## 4. 范式理论：从混乱到有序
+
+**范式**（Normalization）是数据库设计的规范，目的是消除数据冗余，避免数据异常。
+
+### 4.1 第一范式（1NF）：字段原子性
+
+**要求**：每个字段都是不可再分的最小数据单元。
+
+❌ **不符合 1NF**：
+
+```sql
+-- 用户和地址混在一起
+| id | name | contact_info              |
+| 1  | 张三 | 北京朝阳区,13800138000     |
+```
+
+✅ **符合 1NF**：
+
+```sql
+| id | name | city        | district   | phone        |
+| 1  | 张三 | 北京        | 朝阳区     | 13800138000  |
+```
+
+::: tip 💡 1NF 是基础
+所有关系型数据库默认都满足 1NF，因为字段本身就不能存储复杂对象（JSON 除外）。
+:::
+
+### 4.2 第二范式（2NF）：消除部分依赖
+
+**要求**：非主键字段必须完全依赖于主键（针对复合主键）。
+
+❌ **不符合 2NF**：
+
+```sql
+-- 订单明细表：(order_id, product_id) 是复合主键
+| order_id | product_id | product_name | quantity | unit_price |
+| 100      | 1          | iPhone       | 2        | 5999       |
+```
+
+**问题**：`product_name` 和 `unit_price` 只依赖 `product_id`，不依赖 `order_id`。
+
+✅ **符合 2NF**：
+
+```sql
+-- 订单明细表
+| order_id | product_id | quantity |
+| 100      | 1          | 2        |
+
+-- 商品表
+| product_id | name   | price    |
+| 1          | iPhone | 5999     |
+```
+
+::: tip 💡 2NF 针对复合主键
+如果主键是单个字段，则自动满足 2NF。2NF 主要解决复合主键的部分依赖问题。
+:::
+
+### 4.3 第三范式（3NF）：消除传递依赖
+
+**要求**：非主键字段不传递依赖于主键。
+
+❌ **不符合 3NF**：
+
+```sql
+-- 订单表
+| id | user_id | total | user_level | discount |
+| 1  | 100     | 500   | VIP        | 0.9      |
+```
+
+**问题**：`user_level` 依赖 `user_id`，再依赖 `id`（传递依赖）。
+
+✅ **符合 3NF**：
+
+```sql
+-- 订单表
+| id | user_id | total | discount |
+| 1  | 100     | 500   | 0.9      |
+
+-- 用户表
+| id | level |
+| 100| VIP   |
+```
+
+::: tip 💡 3NF 是最常见的范式
+实际业务中，大部分表设计都遵循 3NF，它在数据冗余和查询性能之间取得了平衡。
+:::
+
+### 4.4 范式对比演示
+
+👇 **点击下方标签页，查看各范式的对比**：
+
+<DataModelsDemo />
+
+---
+
+## 5. 反范式化：用空间换时间
+
+**范式化**虽然能消除冗余，但查询时需要多次 JOIN，影响性能。
+
+**反范式化**（Denormalization）是有意增加冗余，换取查询性能提升。
+
+### 5.1 何时需要反范式化？
+
+| 场景 | 说明 |
+| :--- | :--- |
+| **高频查询** | 每秒数百次查询，JOIN 成为瓶颈 |
+| **大数据量** | 表数据超过千万级，JOIN 性能下降 |
+| **报表统计** | 需要聚合计算，预先存储结果 |
+| **分布式系统** | 跨库 JOIN 困难，需要冗余数据 |
+
+### 5.2 反范式化实战
+
+**场景**：电商订单查询
+
+**范式化设计**：
+
+```sql
+-- 订单表
+orders (id, user_id, total, status)
+users (id, name, email)
+
+-- 查询订单及用户信息
+SELECT o.*, u.name, u.email
+FROM orders o
+JOIN users u ON o.user_id = u.id
+WHERE o.id = 123;
+```
+
+**性能问题**：每次查询都需要 JOIN，数据量大时慢。
+
+**反范式化设计**：
+
+```sql
+-- 订单表（冗余用户信息）
+orders (id, user_id, user_name, user_email, total, status)
+
+-- 查询订单（单表查询）
+SELECT * FROM orders WHERE id = 123;
+```
+
+**性能提升**：无需 JOIN，单表查询速度快 5-10 倍。
+
+**代价**：
+- 存储空间增加（每个订单多存用户名和邮箱）
+- 更新成本增加（修改用户邮箱需更新所有历史订单）
+
+### 5.3 反范式化的设计原则
+
+| 原则 | 说明 |
+| :--- | :--- |
+| **冗余不经常变化的数据** | 如用户名、商品名称（很少修改） |
+| **冗余查询频繁的字段** | 如订单列表展示的用户名、商品图片 |
+| **保留原始表** | 范式化表作为"主表"，反范式化表作为"查询表" |
+| **数据同步策略** | 通过定时任务、消息队列同步冗余字段 |
+
+::: warning ⚠️ 反范式化的风险
+- 数据冗余：占用更多存储空间
+- 更新异常：修改数据需同步多处
+- 数据不一致：同步失败导致数据不匹配
+
+**建议**：核心交易表保持范式化，查询表、统计表适当反范式化。
+:::
+
+---
+
+## 6. 常见反模式及改进
+
+**反模式**（Antipattern）是看似正确但实际有害的设计模式。
+
+### 6.1 反模式 1：巨型宽表
+
+**错误设计**：
+
+```sql
+-- 将所有数据塞进一张表
+CREATE TABLE big_table (
+  id BIGINT,
+  -- 用户字段
+  user_name, user_email, user_phone,
+  -- 订单字段（重复 100 次）
+  order_1_id, order_1_amount, order_1_status,
+  order_2_id, order_2_amount, order_2_status,
+  -- ...
+  order_100_id, order_100_amount, order_100_status
+);
+```
+
+**问题**：
+- 字段数量爆炸，超过数据库限制
+- 大量空值，浪费存储空间
+- 新增订单需要修改表结构（DDL 操作）
+- 无法查询"某个用户的所有订单"
+
+**正确设计**：
+
+```sql
+-- 用户表
+users (id, name, email, phone)
+
+-- 订单表
+orders (id, user_id, amount, status, created_at)
+```
+
+### 6.2 反模式 2：逗号分隔值
+
+**错误设计**：
+
+```sql
+-- 文章表，用逗号分隔标签
+posts (id, title, tags)
+
+| id | title    | tags                    |
+| 1  | Vue入门  | vue,frontend,javascript |
+```
+
+**问题**：
+- 无法索引，查询慢
+- 无法关联查询"有哪些文章包含 vue 标签"
+- 无法统计"每个标签有多少篇文章"
+- 修改标签需要字符串操作
+
+**正确设计**：
+
+```sql
+-- 文章表
+posts (id, title)
+
+-- 标签表
+tags (id, name)
+
+-- 文章-标签关联表
+post_tags (post_id, tag_id)
+
+-- 查询包含 vue 标签的文章
+SELECT p.* FROM posts p
+JOIN post_tags pt ON p.id = pt.post_id
+JOIN tags t ON pt.tag_id = t.id
+WHERE t.name = 'vue';
+```
+
+### 6.3 反模式 3：滥用 JSON 字段
+
+**错误设计**：
+
+```sql
+-- 订单表，订单明细存为 JSON
+orders (id, user_id, items, total)
+
+| id | user_id | items                              | total |
+| 1  | 100     | [{"pid":1,"qty":2},{"pid":2,"qty":1}] | 500   |
+```
+
+**问题**：
+- 无法建立外键约束
+- 无法有效索引（MySQL 5.7+ 部分支持）
+- 数据完整性差（插入错误数据无法检测）
+- 查询"某个商品的所有订单"需要全文扫描
+
+**正确设计**：
+
+```sql
+-- 订单表
+orders (id, user_id, total)
+
+-- 订单明细表
+order_items (id, order_id, product_id, quantity, price)
+```
+
+::: tip 💡 什么时候用 JSON？
+JSON 适合存储非结构化、低频查询的数据，如：
+- 用户的扩展配置信息
+- 商品的动态属性（不同品类属性不同）
+- 日志、埋点数据
+:::
+
+---
+
+## 7. 实战：电商系统数据模型
+
+下面是一个完整的电商系统数据模型设计。
+
+### 7.1 核心模块
+
+**用户模块**：
+
+```sql
+-- 用户表
+users (id, username, email, password_hash, created_at)
+
+-- 用户地址表
+user_addresses (id, user_id, province, city, district, detail, is_default)
+
+-- 用户资料表
+user_profiles (id, user_id, nickname, avatar, bio)
+```
+
+**商品模块**：
+
+```sql
+-- 分类表
+categories (id, name, parent_id, level)
+
+-- 商品表
+products (id, category_id, name, description, created_at)
+
+-- 商品 SKU 表
+product_skus (id, product_id, specs, price, stock)
+
+-- 库存表
+product_inventory (sku_id, warehouse_id, quantity)
+```
+
+**订单模块**：
+
+```sql
+-- 订单表
+orders (
+  id,
+  user_id,
+  user_name,          -- 冗余，反范式化
+  total_amount,
+  discount_amount,
+  pay_amount,
+  status,
+  created_at
+)
+
+-- 订单明细表
+order_items (
+  id,
+  order_id,
+  product_id,
+  product_name,       -- 冗余，反范式化
+  product_sku_id,
+  price,
+  quantity
+)
+
+-- 支付记录表
+payments (id, order_id, amount, method, status, transaction_id)
+```
+
+**营销模块**：
+
+```sql
+-- 优惠券表
+coupons (id, name, type, discount, min_amount, stock)
+
+-- 用户优惠券表
+user_coupons (id, user_id, coupon_id, status, used_at)
+
+-- 促销活动表
+promotions (id, name, type, discount, start_time, end_time)
+```
+
+### 7.2 关系设计
+
+| 关系 | 类型 | 说明 |
+| :--- | :--- | :--- |
+| users ↔ orders | 1:N | 一个用户有多个订单 |
+| orders ↔ order_items | 1:N | 一个订单有多个明细 |
+| products ↔ product_skus | 1:N | 一个商品有多个 SKU |
+| users & coupons | M:N | 通过 user_coupons 中间表 |
+| products & categories | M:N | 一个商品可属于多个分类 |
+
+### 7.3 反范式化策略
+
+| 字段 | 冗余位置 | 原因 |
+| :--- | :--- | :--- |
+| user_name | orders 表 | 避免查询订单时 JOIN users 表 |
+| product_name | order_items 表 | 避免商品改名后历史订单显示问题 |
+| product_price | order_items 表 | 保存下单时价格，避免价格变动影响 |
+
+---
+
+## 8. 数据模型设计流程
+
+### 8.1 需求分析阶段
+
+1. **识别业务实体**：用户、订单、商品、优惠券
+2. **梳理业务关系**：用户下单、商品分类、优惠券使用
+3. **确定数据量级**：预计用户数、订单数、商品数
+
+### 8.2 概念模型阶段
+
+1. **绘制 ER 图**：用图形化工具（如 draw.io、MySQL Workbench）
+2. **标注关系类型**：一对一、一对多、多对多
+3. **确定主外键**：每个表的主键、外键关联
+
+### 8.3 逻辑模型阶段
+
+1. **设计表结构**：字段名、类型、约束
+2. **应用范式理论**：确保满足 3NF
+3. **考虑扩展性**：预留扩展字段（如 ext_json）
+
+### 8.4 物理模型阶段
+
+1. **选择存储引擎**：InnoDB（事务）、MyISAM（只读）
+2. **设计索引**：主键索引、外键索引、唯一索引
+3. **分区策略**：按时间、ID 范围分区
+
+### 8.5 优化迭代阶段
+
+1. **性能测试**：模拟真实查询，分析慢查询
+2. **适当反范式化**：高频查询表冗余字段
+3. **数据归档**：历史数据迁移到归档表
+
+---
+
+## 9. 用 AI 辅助设计数据模型
+
+AI 可以帮你快速生成符合规范的数据模型。关键在于提供清晰的业务描述。
+
+### 9.1 提示词模板
+
+```
+你是一位资深的数据库架构师，精通关系型数据库设计。请帮我设计数据模型。
+
+## 业务背景
+[描述你的业务场景，例如：电商系统、博客平台、任务管理系统]
+
+## 核心实体
+[列出主要的业务对象，例如：
+- 用户：注册、登录、个人信息
+- 订单：下单、支付、发货
+- 商品：分类、库存、价格]
+
+## 关系说明
+[描述实体之间的关系，例如：
+- 一个用户可以有多个订单
+- 一个订单包含多个商品
+- 商品属于分类，多级分类]
+
+## 设计要求
+1. 遵循 3NF 范式
+2. 明确标注主键（PK）和外键（FK）
+3. 说明表之间的一对一、一对多、多对多关系
+4. 考虑反范式化策略（如果需要）
+5. 提供完整的建表 SQL（MySQL 语法）
+
+## 输出格式
+请按以下格式输出：
+
+### 表结构
+- 表名：说明
+  - 字段定义
+
+### 关系图
+用文字描述表之间的关系
+
+### 索引建议
+列出需要建立的索引
+
+### 反范式化建议
+说明哪些字段需要冗余，为什么
+```
+
+### 9.2 实战示例：博客系统
+
+**输入提示词**：
+
+```
+你是一位资深的数据库架构师。请帮我设计一个博客系统的数据模型。
+
+## 业务背景
+一个多用户博客平台，用户可以发布文章、评论、点赞。
+
+## 核心实体
+- 用户：昵称、邮箱、密码
+- 文章：标题、内容、发布时间
+- 评论：评论内容、评论时间
+- 标签：文章可以打多个标签
+
+## 关系说明
+- 一个用户可以发表多篇文章
+- 一篇文章可以有多个评论
+- 一篇文章可以有多个标签
+- 一个用户可以点赞多篇文章
+
+## 设计要求
+1. 遵循 3NF 范式
+2. 标注 PK 和 FK
+3. 说明关系类型
+4. 提供建表 SQL
+```
+
+**AI 输出示例**：
+
+```sql
+-- 用户表
+CREATE TABLE users (
+  id BIGINT PRIMARY KEY AUTO_INCREMENT,
+  nickname VARCHAR(50) NOT NULL,
+  email VARCHAR(100) UNIQUE NOT NULL,
+  password_hash VARCHAR(255) NOT NULL,
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+-- 文章表
+CREATE TABLE posts (
+  id BIGINT PRIMARY KEY AUTO_INCREMENT,
+  user_id BIGINT NOT NULL,
+  title VARCHAR(200) NOT NULL,
+  content TEXT NOT NULL,
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
+);
+
+-- 评论表
+CREATE TABLE comments (
+  id BIGINT PRIMARY KEY AUTO_INCREMENT,
+  post_id BIGINT NOT NULL,
+  user_id BIGINT NOT NULL,
+  content TEXT NOT NULL,
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  FOREIGN KEY (post_id) REFERENCES posts(id) ON DELETE CASCADE,
+  FOREIGN KEY (user_id) REFERENCES users(id)
+);
+
+-- 标签表
+CREATE TABLE tags (
+  id BIGINT PRIMARY KEY AUTO_INCREMENT,
+  name VARCHAR(50) UNIQUE NOT NULL
+);
+
+-- 文章-标签关联表
+CREATE TABLE post_tags (
+  post_id BIGINT NOT NULL,
+  tag_id BIGINT NOT NULL,
+  PRIMARY KEY (post_id, tag_id),
+  FOREIGN KEY (post_id) REFERENCES posts(id) ON DELETE CASCADE,
+  FOREIGN KEY (tag_id) REFERENCES tags(id)
+);
+
+-- 点赞表
+CREATE TABLE likes (
+  user_id BIGINT NOT NULL,
+  post_id BIGINT NOT NULL,
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  PRIMARY KEY (user_id, post_id),
+  FOREIGN KEY (user_id) REFERENCES users(id),
+  FOREIGN KEY (post_id) REFERENCES posts(id) ON DELETE CASCADE
+);
+
+-- 索引建议
+CREATE INDEX idx_posts_user_id ON posts(user_id);
+CREATE INDEX idx_posts_created_at ON posts(created_at DESC);
+CREATE INDEX idx_comments_post_id ON comments(post_id);
+CREATE INDEX idx_post_tags_tag_id ON post_tags(tag_id);
+```
+
+### 9.3 AI 辅助设计的注意事项
+
+| 注意点 | 说明 |
+| :--- | :--- |
+| **提供完整上下文** | 业务场景、数据量级、查询模式都要说明 |
+| **明确关系类型** | 一对一、一对多、多对多要说清楚 |
+| **要求解释原因** | 让 AI 说明为什么这样设计 |
+| **检查约束条件** | 主键、外键、唯一索引是否合理 |
+| **考虑扩展性** | 询问未来可能的扩展场景 |
+| **人工审核** | AI 生成的内容需要人工检查是否符合业务需求 |
+
+::: tip 💡 追问技巧
+- "请说明这个设计遵循了哪些范式"
+- "如果数据量达到千万级，如何优化"
+- "哪些字段可以考虑反范式化"
+- "请补充索引设计的理由"
+:::
+
+---
+
+## 名词速查表
+
+| 名词 | 英文 | 解释 |
+| :--- | :--- | :--- |
+| **数据模型** | Data Model | 对现实世界的抽象，描述数据如何存储、组织和关联 |
+| **ER 图** | Entity-Relationship Diagram | 用图形化方式描述实体关系的工具 |
+| **主键** | Primary Key | 唯一标识表中每条记录的字段 |
+| **外键** | Foreign Key | 关联另一张表主键的字段 |
+| **范式** | Normalization | 数据库设计的规范，消除数据冗余 |
+| **反范式化** | Denormalization | 有意增加冗余，换取查询性能提升 |
+| **一对一** | One-to-One | A 表一条记录对应 B 表一条记录 |
+| **一对多** | One-to-Many | A 表一条记录对应 B 表多条记录 |
+| **多对多** | Many-to-Many | A 表多条记录对应 B 表多条记录 |
+| **中间表** | Junction Table | 实现多对多关系的关联表 |
+| **冗余** | Redundancy | 数据重复存储 |
+| **传递依赖** | Transitive Dependency | A → B → C，C 传递依赖 A |
+| **部分依赖** | Partial Dependency | 非主键字段只依赖复合主键的一部分 |
+| **原子性** | Atomicity | 字段不可再分的最小数据单元 |
+| **宽表** | Wide Table | 字段数量特别多的表 |
+| **索引** | Index | 加速查询的数据结构 |
+| **约束** | Constraint | 保证数据完整性的规则（如 NOT NULL、UNIQUE） |
diff --git a/docs/zh-cn/appendix/5-data/sql.md b/docs/zh-cn/appendix/5-data/sql.md
index e5ff34e..ec5ee0c 100644
--- a/docs/zh-cn/appendix/5-data/sql.md
+++ b/docs/zh-cn/appendix/5-data/sql.md
@@ -1,3 +1,652 @@
-# SQL
+# SQL：与数据库对话的语言
 
-> 待实现
+::: tip 核心问题
+**如何高效地查询和操作数据？** 这就像问：图书馆的书怎么快速找到？仓库的货物怎么精准定位？银行的账目怎么安全转账？SQL 解决的就是"与数据对话"的问题。
+:::
+
+---
+
+## 0. SQL 的核心价值
+
+在现代软件开发中，数据是核心资产。无论是电商平台的商品信息、社交网络的用户关系，还是银行系统的交易记录，都需要一种高效的方式来管理和查询。
+
+**SQL**（Structured Query Language，结构化查询语言）就是这样一种"与数据库对话"的语言。它让我们能够：
+
+- **精准查询**：从百万级数据中快速找到目标
+- **高效操作**：批量增删改，一条语句搞定
+- **安全保障**：事务机制保证数据一致性
+- **标准通用**：学一次，所有数据库都能用
+
+---
+
+## 1. SQL vs NoSQL：如何选择？
+
+在深入了解 SQL 之前，先了解一下它与 NoSQL 的区别。
+
+### 1.1 用仓库来类比
+
+| 特性 | SQL（关系型数据库） | NoSQL（非关系型数据库） |
+| :--- | :--- | :--- |
+| **数据结构** | 严格的表结构（像 Excel） | 灵活的文档/键值/图结构 |
+| **典型代表** | MySQL、PostgreSQL、Oracle | MongoDB、Redis、Elasticsearch |
+| **适用场景** | 金融系统、电商订单、用户管理 | 社交动态、日志分析、实时缓存 |
+| **优势** | 数据一致性、事务支持（ACID） | 高并发、灵活扩展、高性能 |
+| **劣势** | 扩展性差、schema 固定 | 数据一致性弱、查询功能有限 |
+
+### 1.2 一个直观的对比
+
+**SQL 数据库**就像一个**规范化的仓库**：
+- 每个货架有固定的编号、名称、容量
+- 货物必须按照规则摆放
+- 入库、出库有严格的流程和记录
+- 适合需要严格管理的场景
+
+**NoSQL 数据库**就像一个**灵活的杂物间**：
+- 想放哪里就放哪里
+- 不需要预先规划空间
+- 快速存取，但可能找不到东西
+- 适合需要快速迭代的场景
+
+::: tip 💡 实际应用
+大多数企业会**同时使用 SQL 和 NoSQL**：
+- MySQL 存储用户信息、订单数据（核心业务）
+- Redis 缓存热点数据（提高性能）
+- MongoDB 存储日志、用户行为（数据分析）
+:::
+
+---
+
+## 2. CRUD 操作：数据的增删改查
+
+SQL 的核心操作就是 CRUD（Create, Read, Update, Delete）。
+
+### 2.1 用 Excel 来类比
+
+| Excel 操作 | SQL 关键字 | 说明 |
+| :--- | :--- | :--- |
+| 插入新行 | INSERT | 添加数据 |
+| 筛选行 | SELECT | 查询数据 |
+| 修改单元格 | UPDATE | 更新数据 |
+| 删除行 | DELETE | 删除数据 |
+
+### 2.2 实战演示
+
+👇 **动手试试看**：在下方交互式演示中体验 CRUD 操作：
+
+<SqlDemo />
+
+### 2.3 常用查询语法
+
+#### **SELECT：查询数据**
+
+```sql
+-- 查询所有列
+SELECT * FROM users;
+
+-- 查询指定列
+SELECT name, email FROM users;
+
+-- 带条件查询
+SELECT * FROM users WHERE age > 18;
+
+-- 排序
+SELECT * FROM users ORDER BY age DESC;
+
+-- 限制结果数量
+SELECT * FROM users LIMIT 10;
+```
+
+#### **INSERT：插入数据**
+
+```sql
+-- 插入完整数据
+INSERT INTO users (name, email, age)
+VALUES ('张三', 'zhangsan@example.com', 25);
+
+-- 批量插入
+INSERT INTO users (name, email, age) VALUES
+  ('李四', 'lisi@example.com', 30),
+  ('王五', 'wangwu@example.com', 28);
+```
+
+#### **UPDATE：更新数据**
+
+```sql
+-- 更新单个字段
+UPDATE users SET age = 26 WHERE id = 1;
+
+-- 更新多个字段
+UPDATE users
+SET age = 27, email = 'newemail@example.com'
+WHERE id = 1;
+
+-- ⚠️ 危险操作：不带 WHERE 会更新所有行！
+UPDATE users SET age = 0;  -- 慎用！
+```
+
+#### **DELETE：删除数据**
+
+```sql
+-- 删除指定行
+DELETE FROM users WHERE id = 1;
+
+-- ⚠️ 危险操作：不带 WHERE 会删除所有数据！
+DELETE FROM users;  -- 慎用！
+```
+
+::: warning 💡 最佳实践
+- 先用 `SELECT` 验证 WHERE 条件是否正确
+- 再用 `UPDATE/DELETE` 执行操作
+- 生产环境务必加 `LIMIT` 限制影响行数
+:::
+
+---
+
+## 3. SELECT 进阶：JOIN、GROUP BY、子查询
+
+当数据分布在多个表中时，我们需要更强大的查询能力。
+
+### 3.1 JOIN：连接多个表
+
+**场景**：一个电商系统有两个表：
+- `users`（用户表）：id, name, email
+- `orders`（订单表）：order_id, user_id, amount
+
+如何查询"每个用户的订单总金额"？
+
+#### **INNER JOIN：只返回匹配的行**
+
+```sql
+SELECT users.name, SUM(orders.amount) as total
+FROM users
+INNER JOIN orders ON users.id = orders.user_id
+GROUP BY users.id;
+```
+
+**结果**：只显示有订单的用户
+
+#### **LEFT JOIN：返回左表所有行**
+
+```sql
+SELECT users.name, SUM(orders.amount) as total
+FROM users
+LEFT JOIN orders ON users.id = orders.user_id
+GROUP BY users.id;
+```
+
+**结果**：显示所有用户，没有订单的用户 total 为 NULL
+
+::: tip 💡 如何选择 JOIN？
+- **INNER JOIN**：只要两边都有数据才需要（如：订单明细）
+- **LEFT JOIN**：需要保留主表所有数据（如：用户列表 + 统计信息）
+- **RIGHT JOIN**：需要保留从表所有数据（很少用）
+- **FULL OUTER JOIN**：需要所有数据（MySQL 不支持，可用 UNION 实现）
+:::
+
+### 3.2 GROUP BY：分组统计
+
+**场景**：统计每个部门的平均工资。
+
+```sql
+SELECT department, AVG(salary) as avg_salary, COUNT(*) as count
+FROM employees
+GROUP BY department
+HAVING AVG(salary) > 10000;  -- HAVING 过滤分组后的结果
+```
+
+**注意**：
+- `WHERE` 过滤行（在 GROUP BY 之前）
+- `HAVING` 过滤分组（在 GROUP BY 之后）
+
+### 3.3 子查询：查询嵌套查询
+
+**场景**：查找工资高于平均工资的员工。
+
+```sql
+-- 方式一：WHERE 子查询
+SELECT name, salary
+FROM employees
+WHERE salary > (SELECT AVG(salary) FROM employees);
+
+-- 方式二：FROM 子查询（派生表）
+SELECT dept_name, avg_salary
+FROM (
+  SELECT department, AVG(salary) as avg_salary
+  FROM employees
+  GROUP BY department
+) as dept_avg
+WHERE avg_salary > 10000;
+```
+
+::: tip 💡 子查询 vs JOIN
+- **子查询**：逻辑清晰，但性能较差（每个子查询都会执行一次）
+- **JOIN**：性能更好，但需要理解连接逻辑
+- **最佳实践**：优先使用 JOIN，必要时用子查询
+:::
+
+---
+
+## 4. 索引原理：让查询快起来
+
+### 4.1 为什么需要索引？
+
+**场景**：在一个 100 万行的用户表中，查找 `id = 123456` 的用户。
+
+**没有索引**：
+- 数据库需要逐行扫描，最多比较 100 万次
+- 时间复杂度：O(n)
+
+**有索引**：
+- 数据库通过 B+ 树快速定位，只需比较 log₂(100万) ≈ 20 次
+- 时间复杂度：O(log n)
+
+### 4.2 用图书馆来类比
+
+| 概念 | 图书馆 | 数据库 |
+| :--- | :--- | :--- |
+| **数据** | 书籍 | 表的行 |
+| **索引** | 目录卡片 | B+ 树 |
+| **查询** | 按书名找书 | 按 WHERE 条件找行 |
+| **无索引** | 逐排书架找 | 全表扫描 |
+| **有索引** | 查目录定位 | 索引查找 |
+
+### 4.3 索引的可视化演示
+
+👇 **动手试试看**：在 SqlDemo 组件的"索引"标签页查看无索引 vs 有索引的对比：
+
+<SqlDemo />
+
+### 4.4 索引的使用建议
+
+| 场景 | 是否建索引 | 说明 |
+| :--- | :--- | :--- |
+| **WHERE 条件** | 是 | 如 `WHERE user_id = 1` |
+| **JOIN 连接** | 是 | 如 `JOIN ON user_id` |
+| **ORDER BY 排序** | 是 | 如 `ORDER BY created_at` |
+| **低选择性列** | 否 | 如性别（只有男/女） |
+| **频繁更新的列** | 谨慎 | 索引会降低写入性能 |
+| **小表** | 否 | 数据量小不需要索引 |
+
+**创建索引**：
+```sql
+-- 单列索引
+CREATE INDEX idx_user_id ON orders(user_id);
+
+-- 复合索引（最左前缀原则）
+CREATE INDEX idx_user_status ON orders(user_id, status);
+
+-- 唯一索引
+CREATE UNIQUE INDEX idx_email ON users(email);
+```
+
+::: tip 💡 索引的代价
+- **空间**：每个索引都是额外的存储空间
+- **时间**：INSERT/UPDATE/DELETE 需要更新索引，降低写入速度
+- **建议**：只在查询频繁、更新少的列上建索引
+:::
+
+---
+
+## 5. 事务 ACID：保证数据一致性
+
+### 5.1 什么是事务？
+
+**事务**（Transaction）是一组 SQL 操作，要么全部成功，要么全部失败。
+
+**经典案例**：银行转账
+
+```sql
+BEGIN;  -- 开始事务
+
+-- 账户 A 扣款 100 元
+UPDATE accounts SET balance = balance - 100 WHERE user_id = 1;
+
+-- 账户 B 加款 100 元
+UPDATE accounts SET balance = balance + 100 WHERE user_id = 2;
+
+COMMIT;  -- 提交事务（如果中间出错，自动 ROLLBACK）
+```
+
+如果第二步失败（比如账户 B 不存在），整个事务会回滚，账户 A 不会被扣款。
+
+### 5.2 ACID 四大特性
+
+👇 **动手试试看**：在 SqlDemo 组件的"事务"标签页查看 ACID 可视化：
+
+<SqlDemo />
+
+#### **A - Atomicity（原子性）**
+- **含义**：事务中的操作要么全部成功，要么全部失败
+- **类比**：转账要么同时成功，要么同时失败，不会出现"扣款了但没到账"的情况
+- **实现**：Undo Log（回滚日志）
+
+#### **C - Consistency（一致性）**
+- **含义**：事务前后数据库状态一致，满足所有约束
+- **类比**：转账前后总金额不变（A 余额 + B 余额 = 总金额）
+- **实现**：应用层约束 + 数据库约束
+
+#### **I - Isolation（隔离性）**
+- **含义**：并发事务之间互不干扰
+- **类比**：两个用户同时转账，不会相互影响
+- **实现**：锁机制 + MVCC（多版本并发控制）
+
+#### **D - Durability（持久性）**
+- **含义**：事务提交后，永久保存，即使系统故障
+- **类比**：转账成功后，断电也不会丢失记录
+- **实现**：Redo Log（重做日志）
+
+### 5.3 事务隔离级别
+
+| 隔离级别 | 脏读 | 不可重复读 | 幻读 | 性能 | 适用场景 |
+| :--- | :--- | :--- | :--- | :--- | :--- |
+| **READ UNCOMMITTED** | 是 | 是 | 是 | 高 | 几乎不用 |
+| **READ COMMITTED** | 否 | 是 | 是 | 中 | 大多数数据库默认 |
+| **REPEATABLE READ** | 否 | 否 | 是 | 低 | MySQL 默认 |
+| **SERIALIZABLE** | 否 | 否 | 否 | 最低 | 金融级要求 |
+
+**设置隔离级别**：
+```sql
+-- 查看
+SELECT @@transaction_isolation;
+
+-- 设置
+SET TRANSACTION ISOLATION LEVEL READ COMMITTED;
+```
+
+::: tip 💡 如何选择隔离级别？
+- **默认使用 READ COMMITTED**：避免脏读，性能可接受
+- **金融场景**：使用 SERIALIZABLE 或 REPEATABLE READ
+- **分析场景**：可降低到 READ UNCOMMITTED 提高性能
+:::
+
+---
+
+## 6. SQL 注入：安全的警惕性
+
+### 6.1 什么是 SQL 注入？
+
+**SQL 注入**是一种常见的安全漏洞，攻击者通过构造恶意的输入，篡改 SQL 语句。
+
+**示例**：一个登录接口
+
+```sql
+-- 正常 SQL
+SELECT * FROM users WHERE username = 'admin' AND password = '123456';
+
+-- 攻击者输入用户名：admin' --
+-- 拼接后的 SQL
+SELECT * FROM users WHERE username = 'admin' --' AND password = '123456';
+--                                       ↑ 注释掉后面的密码验证，直接登录成功！
+```
+
+**更危险的攻击**：
+
+```sql
+-- 用户名输入：admin'; DROP TABLE users; --
+-- 拼接后的 SQL
+SELECT * FROM users WHERE username = 'admin'; DROP TABLE users; --'
+```
+
+### 6.2 如何防御？
+
+#### **方法一：参数化查询（推荐）**
+
+```python
+# ❌ 错误：直接拼接字符串（危险！）
+sql = f"SELECT * FROM users WHERE username = '{username}'"
+cursor.execute(sql)
+
+# ✅ 正确：使用参数化查询（安全）
+sql = "SELECT * FROM users WHERE username = %s"
+cursor.execute(sql, (username,))
+```
+
+#### **方法二：ORM 框架**
+
+```python
+# Django ORM
+user = User.objects.get(username=username)
+
+# SQLAlchemy
+user = session.query(User).filter(User.username == username).first()
+```
+
+#### **方法三：输入验证**
+
+```python
+# 限制用户名只能包含字母、数字、下划线
+import re
+if not re.match(r'^\w+$', username):
+    raise ValueError('Invalid username')
+```
+
+::: warning 💡 防御 SQL 注入的黄金法则
+1. **永远不要相信用户输入**
+2. **永远使用参数化查询或 ORM**
+3. **永远不要拼接 SQL 字符串**
+4. **最小权限原则**：数据库用户只给必要权限
+:::
+
+---
+
+## 7. 最佳实践
+
+### 7.1 查询优化
+
+| 优化技巧 | 说明 | 示例 |
+| :--- | :--- | :--- |
+| **避免 SELECT \*** | 只查询需要的列 | `SELECT name, email FROM users` |
+| **使用 LIMIT** | 限制结果数量 | `SELECT * FROM users LIMIT 10` |
+| **索引覆盖** | 查询条件使用索引列 | `WHERE indexed_col = 1` |
+| **避免子查询** | 用 JOIN 替代子查询 | 见上文对比 |
+| **批量操作** | 减少数据库往返 | `INSERT INTO ... VALUES (...), (...), (...)` |
+| **分页查询** | 大数据量分页 | `SELECT * FROM users LIMIT 10 OFFSET 20` |
+
+### 7.2 命名规范
+
+| 类型 | 规范 | 示例 |
+| :--- | :--- | :--- |
+| **表名** | 小写 + 下划线 | `user_profiles`, `order_items` |
+| **列名** | 小写 + 下划线 | `created_at`, `user_id` |
+| **索引名** | `idx_表名_列名` | `idx_users_email` |
+| **外键名** | `fk_表名_列名` | `fk_orders_user_id` |
+| **主键名** | 统一使用 `id` | 无 |
+
+### 7.3 数据库设计
+
+| 设计原则 | 说明 | 示例 |
+| :--- | :--- | :--- |
+| **规范化** | 消除数据冗余 | 第三范式（3NF） |
+| **反规范化** | 适当冗余提高性能 | 在订单表冗余用户姓名 |
+| **主键选择** | 优先使用自增 ID | `id BIGINT AUTO_INCREMENT` |
+| **时间字段** | 统一使用 DATETIME | `created_at DATETIME` |
+| **软删除** | 用 `is_deleted` 标记 | 不真删除，便于恢复 |
+
+---
+
+## 8. 用 AI 辅助编写 SQL
+
+AI 可以帮助你快速编写复杂的 SQL 查询。关键在于提供清晰的表结构和业务需求。
+
+### 8.1 提示词模板
+
+```
+你是一位资深的数据库工程师，精通 SQL 查询优化。请帮我编写 SQL 查询。
+
+## 数据库表结构
+[提供表的 CREATE TABLE 语句或字段说明]
+
+## 业务需求
+[描述你想要查询的数据，例如：
+- 统计每个月的订单总金额
+- 查找购买过商品 A 和商品 B 的用户
+- 计算用户的留存率]
+
+## 要求
+1. 使用标准 SQL 语法（兼容 MySQL 8.0）
+2. 注释关键逻辑
+3. 考虑性能优化（索引、JOIN 顺序）
+4. 提供多种实现方案（如子查询 vs JOIN）
+
+## 输出格式
+### SQL 查询
+\`\`\`sql
+[SQL 语句]
+\`\`\`
+
+### 逻辑说明
+[解释查询的逻辑和优化思路]
+```
+
+### 8.2 实战示例：复杂统计查询
+
+**输入提示词**：
+
+```
+你是一位资深的数据库工程师，精通 SQL 查询优化。请帮我编写 SQL 查询。
+
+## 数据库表结构
+
+```sql
+-- 用户表
+CREATE TABLE users (
+  id BIGINT PRIMARY KEY AUTO_INCREMENT,
+  name VARCHAR(50),
+  created_at DATETIME
+);
+
+-- 订单表
+CREATE TABLE orders (
+  id BIGINT PRIMARY KEY AUTO_INCREMENT,
+  user_id BIGINT,
+  amount DECIMAL(10, 2),
+  status ENUM('pending', 'paid', 'shipped', 'completed', 'cancelled'),
+  created_at DATETIME,
+  FOREIGN KEY (user_id) REFERENCES users(id)
+);
+
+-- 订单详情表
+CREATE TABLE order_items (
+  id BIGINT PRIMARY KEY AUTO_INCREMENT,
+  order_id BIGINT,
+  product_id BIGINT,
+  quantity INT,
+  price DECIMAL(10, 2),
+  FOREIGN KEY (order_id) REFERENCES orders(id)
+);
+
+-- 商品表
+CREATE TABLE products (
+  id BIGINT PRIMARY KEY AUTO_INCREMENT,
+  name VARCHAR(100),
+  category VARCHAR(50)
+);
+```
+
+## 业务需求
+1. 统计每个月的订单总金额和订单数量
+2. 查找购买过商品 A 和商品 B 的用户
+3. 计算用户复购率（有多少用户下了多个订单）
+
+## 要求
+1. 使用标准 SQL 语法（兼容 MySQL 8.0）
+2. 注释关键逻辑
+3. 考虑性能优化
+```
+
+**AI 输出示例**：
+
+```sql
+-- 需求 1：统计每个月的订单总金额和订单数量
+SELECT
+  DATE_FORMAT(created_at, '%Y-%m') AS month,
+  COUNT(*) AS order_count,
+  SUM(amount) AS total_amount
+FROM orders
+WHERE status IN ('paid', 'shipped', 'completed')  -- 只统计有效订单
+GROUP BY DATE_FORMAT(created_at, '%Y-%m')
+ORDER BY month DESC;
+
+-- 需求 2：查找购买过商品 A 和商品 B 的用户
+-- 方案一：INTERSECT（MySQL 不支持，用 IN 替代）
+SELECT DISTINCT user_id
+FROM orders o
+JOIN order_items oi ON o.id = oi.order_id
+JOIN products p ON oi.product_id = p.id
+WHERE p.name IN ('商品 A', '商品 B')
+GROUP BY user_id
+HAVING COUNT(DISTINCT p.name) = 2;  -- 确保同时买了两个商品
+
+-- 方案二：自连接（性能更好）
+SELECT
+  oa.user_id
+FROM orders oa
+JOIN order_items oia ON oa.id = oia.order_id
+JOIN products pa ON oia.product_id = pa.id
+JOIN order_items oib ON oa.id = oib.order_id  -- 同一个订单
+JOIN products pb ON oib.product_id = pb.id
+WHERE pa.name = '商品 A' AND pb.name = '商品 B';
+
+-- 需求 3：计算用户复购率
+WITH user_order_count AS (
+  SELECT
+    user_id,
+    COUNT(*) AS order_count
+  FROM orders
+  WHERE status IN ('paid', 'shipped', 'completed')
+  GROUP BY user_id
+)
+SELECT
+  COUNT(CASE WHEN order_count >= 2 THEN 1 END) AS repeat_users,
+  COUNT(*) AS total_users,
+  ROUND(COUNT(CASE WHEN order_count >= 2 THEN 1 END) * 100.0 / COUNT(*), 2) AS repeat_rate
+FROM user_order_count;
+```
+
+### 8.3 AI 辅助的注意事项
+
+| 注意点 | 说明 |
+| :--- | :--- |
+| **提供完整上下文** | 表结构、索引、数据量都要说清楚 |
+| **明确性能要求** | 是否需要优化、数据量大小 |
+| **验证 SQL 语法** | AI 生成的 SQL 可能有小错误，需要测试 |
+| **理解执行计划** | 用 `EXPLAIN` 查看查询是否使用了索引 |
+| **分步实现** | 复杂查询可以拆分成多个简单查询 |
+
+::: tip 💡 追问技巧
+- "请提供另一种实现方案（如用 JOIN 替代子查询）"
+- "请分析这条查询的性能瓶颈"
+- "请添加索引建议"
+- "请解释每个步骤的逻辑"
+:::
+
+---
+
+## 名词速查表
+
+| 名词 | 英文 | 解释 |
+| :--- | :--- | :--- |
+| **SQL** | Structured Query Language | 结构化查询语言，与数据库对话的标准语言 |
+| **数据库** | Database | 存储和管理数据的仓库 |
+| **表** | Table | 数据的二维表格，类似 Excel |
+| **行** | Row | 表中的一条记录 |
+| **列** | Column | 表中的一个字段 |
+| **主键** | Primary Key | 唯一标识一行的字段（如 id） |
+| **外键** | Foreign Key | 关联其他表的字段 |
+| **索引** | Index | 加速查询的数据结构（B+ 树） |
+| **事务** | Transaction | 一组要么全成功、要么全失败的 SQL 操作 |
+| **ACID** | Atomicity, Consistency, Isolation, Durability | 事务的四大特性 |
+| **JOIN** | Join | 连接多个表的查询操作 |
+| **子查询** | Subquery | 嵌套在另一个查询中的查询 |
+| **聚合函数** | Aggregate Function | SUM, AVG, COUNT, MAX, MIN |
+| **分组** | Group By | 按字段分组统计 |
+| **SQL 注入** | SQL Injection | 通过输入篡改 SQL 语句的攻击方式 |
+| **规范化** | Normalization | 消除数据冗余的设计原则 |
+| **反规范化** | Denormalization | 适当冗余提高性能的设计 |
+| **执行计划** | Execution Plan | 数据库执行 SQL 的详细步骤 |
+| **B+ 树** | B+ Tree | 索引的底层数据结构 |
+| **MVCC** | Multi-Version Concurrency Control | 多版本并发控制，实现事务隔离 |
+| **脏读** | Dirty Read | 读取未提交的数据 |
+| **不可重复读** | Non-Repeatable Read | 同一事务两次读取结果不同 |
+| **幻读** | Phantom Read | 同一事务两次读取结果集不同 |
+| **隔离级别** | Isolation Level | 事务隔离的程度（READ UNCOMMITTED/READ COMMITTED/REPEATABLE READ/SERIALIZABLE） |