From ebe2bf610960e48ec0e11272ba9d2a7b4d99cc97 Mon Sep 17 00:00:00 2001
From: sanbuphy <physicoada@gmail.com>
Date: Sat, 14 Feb 2026 12:14:07 +0800
Subject: [PATCH] feat: enhance demo components with consistent styling and
 info boxes

- Add standardized header and info box components to all demo files
- Improve visual consistency with theme colors and spacing
- Add max-height and overflow-y for better content containment
- Update package.json build script with --force flag
- Add .gitignore entries for REFACTORING files
- Fix table formatting in audio-intro.md
---
 .gitignore                                    |    4 +
 .../appendix/api-design/DocumentationDemo.vue |  498 +++-
 .../appendix/api-design/ErrorHandlingDemo.vue |  408 +++-
 .../api-design/ResponseStructureDemo.vue      |  393 +++-
 .../api-design/VersioningStrategyDemo.vue     |  411 +++-
 .../ArchitectureComparisonDemo.vue            |   59 +-
 .../backend-evolution/ContainerDockerDemo.vue |   56 +-
 .../backend-evolution/EvolutionIntroDemo.vue  |  161 +-
 .../backend-evolution/MonolithDemo.vue        |   61 +-
 .../backend-evolution/PhysicalServerDemo.vue  |   75 +-
 .../TechStackTimelineDemo.vue                 |   26 +-
 .../canvas-intro/AnimationLoopDemo.vue        |  135 +-
 .../canvas-intro/CanvasBasicsDemo.vue         |  338 +--
 .../canvas-intro/CoordinateSystemDemo.vue     |  139 +-
 .../canvas-intro/EventHandlingDemo.vue        |  129 +-
 .../canvas-intro/ParticleSystemDemo.vue       |  122 +-
 .../appendix/canvas-intro/PerformanceDemo.vue |  131 +-
 .../cloud-iam/AccessKeyManagementDemo.vue     |    8 +-
 .../appendix/cloud-iam/BestPracticesDemo.vue  |    8 +-
 .../cloud-iam/CrossAccountAccessDemo.vue      |    8 +-
 .../appendix/cloud-iam/IAMStructure.vue       |   94 +-
 .../cloud-iam/IamRamComparisonDemo.vue        |   90 +-
 .../cloud-iam/IdentityProviderDemo.vue        |    8 +-
 .../appendix/cloud-iam/MfaSecurityDemo.vue    |    8 +-
 .../cloud-iam/PermissionHierarchyDemo.vue     |    8 +-
 .../appendix/cloud-iam/PolicyEditorDemo.vue   |   11 +
 .../appendix/cloud-iam/RolePolicyDemo.vue     |    8 +-
 .../cloud-storage-cdn/AccessAnalyticsDemo.vue |   63 +-
 .../cloud-storage-cdn/CachePolicyDemo.vue     |   10 +-
 .../cloud-storage-cdn/CdnAccelerationDemo.vue |  124 +-
 .../HttpsOptimizationDemo.vue                 |   67 +-
 .../cloud-storage-cdn/ObjectStorageDemo.vue   |  247 +-
 .../TrafficSchedulingDemo.vue                 |   63 +-
 .../cloud-storage-cdn/UploadProcessDemo.vue   |   12 +-
 .../FrontendEvolutionDemo.vue                 |  392 ++--
 .../ImperativeVsDeclarativeDemo.vue           |  133 +-
 .../frontend-evolution/JQueryVsStateDemo.vue  |  570 ++---
 .../frontend-evolution/RoutingModeDemo.vue    |   61 +-
 .../frontend-evolution/SliceRequestDemo.vue   |  526 +++--
 .../appendix/git-intro/GitThreeAreasDemo.vue  |   67 +-
 .../appendix/git-intro/GitWorkflowDemo.vue    |  582 +++--
 .../appendix/queue-design/CouplingDemo.vue    |  272 +--
 .../queue-design/DeadLetterQueueDemo.vue      |  385 ++--
 .../appendix/queue-design/DecouplingDemo.vue  |  522 +++++
 .../appendix/queue-design/IdempotenceDemo.vue |  865 ++++++-
 .../appendix/queue-design/ReliabilityDemo.vue |  694 +++++-
 .../web-basics/BigFrontendScopeDemo.vue       |  167 +-
 .../appendix/web-basics/CssBoxModel.vue       |   61 +-
 .../appendix/web-basics/CssFlexbox.vue        |  260 ++-
 .../appendix/web-basics/DomManipulator.vue    |  183 +-
 .../ImperativeVsDeclarativeDemo.vue           |  240 +-
 .../appendix/web-basics/WebTechTriad.vue      |    2 +
 docs/.vitepress/theme/index.js                |    2 +
 docs/zh-cn/appendix/api-design.md             | 1075 +++------
 docs/zh-cn/appendix/audio-intro.md            |   36 +-
 docs/zh-cn/appendix/backend-evolution.md      |  695 ++++--
 .../appendix/backend-layered-architecture.md  | 1161 +++++-----
 docs/zh-cn/appendix/canvas-intro.md           |  725 ++----
 docs/zh-cn/appendix/cloud-iam.md              |  203 +-
 docs/zh-cn/appendix/cloud-storage-cdn.md      |  334 ++-
 docs/zh-cn/appendix/computer-networks.md      | 1013 ++++-----
 docs/zh-cn/appendix/frontend-evolution.md     |  709 +++---
 docs/zh-cn/appendix/gateway-proxy.md          | 1736 ++++----------
 docs/zh-cn/appendix/git-intro.md              |  336 ++-
 docs/zh-cn/appendix/load-balancing.md         |  664 +++---
 docs/zh-cn/appendix/queue-design.md           |  896 +++-----
 docs/zh-cn/appendix/url-to-browser.md         |  121 +-
 docs/zh-cn/appendix/web-basics.md             | 1057 ++++++---
 package-lock.json                             | 2022 +++++------------
 package.json                                  |    2 +-
 70 files changed, 12307 insertions(+), 10445 deletions(-)
 create mode 100644 docs/.vitepress/theme/components/appendix/queue-design/DecouplingDemo.vue

diff --git a/.gitignore b/.gitignore
index 26f8dcc..b683492 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,3 +10,7 @@ MULTI_LANGUAGE_PLAN.md
 scripts/collapse_code_blocks.py
 .gitignore
 scripts/verify.sh
+REFACTORING_PLAN.md
+.gitignore
+.gitignore
+REFACTORING_REPORT.md
diff --git a/docs/.vitepress/theme/components/appendix/api-design/DocumentationDemo.vue b/docs/.vitepress/theme/components/appendix/api-design/DocumentationDemo.vue
index ea59c4f..5d24ab1 100644
--- a/docs/.vitepress/theme/components/appendix/api-design/DocumentationDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/api-design/DocumentationDemo.vue
@@ -1,50 +1,496 @@
+<!--
+  DocumentationDemo.vue - API 文档演示组件
+  展示 API 文档的编写规范和最佳实践
+-->
 <template>
-  <div class="demo-container">
-    <div class="demo-header">
-      <h4>{{ title }}</h4>
-      <p class="hint">{{ description }}</p>
+  <div class="demo">
+    <div class="header">
+      <span class="icon">📚</span>
+      <span class="title">API 文档：最好的 API 文档就是代码本身</span>
     </div>
-    <div class="demo-content">
-      <el-alert type="info" :closable="false">
-        文档演示组件占位符 - 待实现具体交互
-      </el-alert>
+
+    <div class="content">
+      <div class="tools-tabs">
+        <button
+          v-for="tool in tools"
+          :key="tool.id"
+          class="tool-btn"
+          :class="{ active: selectedTool === tool.id }"
+          @click="selectedTool = tool.id"
+        >
+          <span class="tool-icon">{{ tool.icon }}</span>
+          <span class="tool-name">{{ tool.name }}</span>
+        </button>
+      </div>
+
+      <div class="tool-detail" v-if="currentTool">
+        <div class="tool-header">
+          <div class="tool-title">{{ currentTool.name }}</div>
+          <div class="tool-tags">
+            <span class="tag" :class="tag.class" v-for="tag in currentTool.tags" :key="tag.text">
+              {{ tag.text }}
+            </span>
+          </div>
+        </div>
+
+        <div class="tool-description">
+          <p>{{ currentTool.description }}</p>
+        </div>
+
+        <div class="feature-section">
+          <h4>核心特性</h4>
+          <div class="feature-list">
+            <div v-for="(feature, idx) in currentTool.features" :key="idx" class="feature-item">
+              <span class="feature-icon">✓</span>
+              <span class="feature-text">{{ feature }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="example-section">
+          <h4>文档示例（OpenAPI 3.0）</h4>
+          <div class="code-block">
+            <pre><code>{{ currentTool.example }}</code></pre>
+          </div>
+        </div>
+
+        <div class="tools-section">
+          <h4>🔧 推荐工具</h4>
+          <div class="tools-grid">
+            <div v-for="(rec, idx) in currentTool.recommendations" :key="idx" class="tool-card">
+              <div class="rec-name">{{ rec.name }}</div>
+              <div class="rec-desc">{{ rec.description }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 
-const title = ref('API文档演示')
-const description = ref('展示RESTful API文档的编写规范和最佳实践，包括Swagger、OpenAPI等工具的使用')
+const tools = [
+  {
+    id: 'openapi',
+    name: 'OpenAPI 规范',
+    icon: '📋',
+    tags: [
+      { text: '行业标准', class: 'primary' },
+      { text: '语言无关', class: 'secondary' }
+    ],
+    description: 'OpenAPI Specification（原 Swagger）是描述 REST API 的标准格式，可以被工具解析生成交互式文档、客户端 SDK、服务器存根等。',
+    features: [
+      '标准化的 YAML/JSON 格式描述 API',
+      '支持路径、参数、响应模型、认证等完整定义',
+      '生态系统丰富，支持 100+ 工具',
+      '可以生成交互式文档（Swagger UI）',
+      '可以从代码注释自动生成',
+      '支持 API 版本控制和演进'
+    ],
+    example: `openapi: 3.0.0
+info:
+  title: 用户服务 API
+  version: 1.0.0
+  description: 提供用户管理相关接口
+servers:
+  - url: https://api.example.com/v1
+paths:
+  /users:
+    get:
+      summary: 获取用户列表
+      parameters:
+        - name: page
+          in: query
+          schema:
+            type: integer
+            default: 1
+      responses:
+        '200':
+          description: 成功
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  code:
+                    type: integer
+                  data:
+                    type: array
+                    items:
+                      $ref: '#/components/schemas/User'
+components:
+  schemas:
+    User:
+      type: object
+      properties:
+        id:
+          type: integer
+        name:
+          type: string
+        email:
+          type: string
+          format: email`,
+    recommendations: [
+      { name: 'Swagger UI', description: '最流行的交互式文档界面' },
+      { name: 'Redoc', description: '美观的现代文档生成器' },
+      { name: 'Stoplight', description: '可视化的 API 设计平台' }
+    ]
+  },
+  {
+    id: 'swagger',
+    name: 'Swagger 工具链',
+    icon: '🛠️',
+    tags: [
+      { text: '工具集', class: 'success' },
+      { text: '自动化', class: 'info' }
+    ],
+    description: 'Swagger 是一套围绕 OpenAPI 规范构建的工具，包括编辑器、UI、代码生成器等，帮助开发者快速构建和使用 API。',
+    features: [
+      'Swagger Editor：在线编写和验证 OpenAPI 文档',
+      'Swagger UI：自动生成交互式文档',
+      'Swagger Codegen：根据文档生成客户端 SDK',
+      '支持主流编程语言和框架',
+      '集成到 CI/CD 流程',
+      '自动保持文档与代码同步'
+    ],
+    example: `# Swagger Editor 示例配置
+swagger: '2.0'
+info:
+  title: 示例 API
+  version: '1.0.0'
+host: api.example.com
+basePath: /v1
+schemes:
+  - https
+paths:
+  /users:
+    get:
+      tags:
+        - Users
+      summary: 获取所有用户
+      produces:
+        - application/json
+      responses:
+        200:
+          description: 成功
+          schema:
+            type: object
+            properties:
+              code:
+                type: integer
+              data:
+                type: array`,
+    recommendations: [
+      { name: 'Swagger Editor', description: '在线编辑器，实时预览' },
+      { name: 'Swagger Codegen', description: '生成 40+ 种语言的客户端' },
+      { name: 'Postman', description: '导入 OpenAPI 进行测试' }
+    ]
+  },
+  {
+    id: 'best-practices',
+    name: '文档最佳实践',
+    icon: '⭐',
+    tags: [
+      { text: '经验', class: 'warning' },
+      { text: '规范', class: 'secondary' }
+    ],
+    description: '好的 API 文档应该像用户手册一样清晰，让开发者不问问题就能完成集成。',
+    features: [
+      '每个接口都有完整的请求示例',
+      '提供多种语言的代码示例（curl、JavaScript、Python）',
+      '错误码文档化，附带解决方案',
+      '提供沙箱环境或测试工具',
+      '包含认证流程和获取 Token 的方法',
+      '实时更新，与代码保持一致',
+      '版本变更日志和迁移指南'
+    ],
+    example: `# 完整的接口文档示例
+
+## 获取用户信息
+
+**请求示例：**
+
+\`\`\`bash
+curl -X GET \\
+  https://api.example.com/v1/users/123 \\
+  -H "Authorization: Bearer YOUR_TOKEN"
+\`\`\`
+
+**成功响应：**
+
+\`\`\`json
+{
+  "code": 0,
+  "message": "success",
+  "data": {
+    "id": 123,
+    "name": "张三",
+    "email": "zhangsan@example.com"
+  }
+}
+\`\`\`
+
+**错误响应：**
+
+| 错误码 | 说明 | 解决方案 |
+|--------|------|----------|
+| 10010 | 用户不存在 | 检查 user_id 是否正确 |
+| 10018 | Token 已过期 | 重新调用登录接口 |
+
+**在线测试：**
+
+[🚀 在 API Explorer 中测试](https://api.example.com/docs)`,
+    recommendations: [
+      { name: 'API Blueprint', description: ' Markdown 风格的 API 文档' },
+      { name: 'Docusaurus', description: ' Facebook 开源的文档平台' },
+      { name: 'GitBook', description: '美观的文档托管平台' }
+    ]
+  }
+]
+
+const selectedTool = ref('openapi')
+const currentTool = computed(() =>
+  tools.find(t => t.id === selectedTool.value)
+)
 </script>
 
 <style scoped>
-.demo-container {
+.demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  background: var(--vp-c-bg-soft);
+  margin: 24px 0;
+  overflow: hidden;
+}
+
+.header {
+  padding: 16px 20px;
+  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+  color: white;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.icon {
+  font-size: 24px;
+}
+
+.title {
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.content {
+  padding: 24px;
+}
+
+.tools-tabs {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+}
+
+.tool-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.tool-btn:hover {
+  border-color: rgba(var(--vp-c-brand-rgb), 0.5);
+  transform: translateY(-2px);
+}
+
+.tool-btn.active {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-brand);
+  color: white;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.tool-icon {
+  font-size: 18px;
+}
+
+.tool-name {
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.tool-detail {
+  background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
-  padding: 20px;
+  overflow: hidden;
+}
+
+.tool-header {
+  padding: 16px;
   background: var(--vp-c-bg-soft);
+  border-bottom: 1px solid var(--vp-c-divider);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
-.demo-header {
-  margin-bottom: 20px;
-}
-
-.demo-header h4 {
-  margin: 0 0 8px 0;
+.tool-title {
+  font-weight: 700;
+  font-size: 16px;
   color: var(--vp-c-text-1);
 }
 
-.hint {
-  margin: 0;
-  font-size: 14px;
-  color: var(--vp-c-text-2);
+.tool-tags {
+  display: flex;
+  gap: 8px;
 }
 
-.demo-content {
+.tag {
+  padding: 4px 10px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.tag.primary {
+  background: #dbeafe;
+  color: #1d4ed8;
+}
+
+.tag.secondary {
+  background: #e0e7ff;
+  color: #4338ca;
+}
+
+.tag.success {
+  background: #dcfce7;
+  color: #16a34a;
+}
+
+.tag.info {
+  background: #ccfbf1;
+  color: #0f766e;
+}
+
+.tag.warning {
+  background: #fef3c7;
+  color: #d97706;
+}
+
+.tool-description {
+  padding: 16px;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+  line-height: 1.7;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.feature-section, .example-section, .tools-section {
+  padding: 16px;
+}
+
+.feature-section h4, .example-section h4, .tools-section h4 {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  margin: 0 0 12px 0;
+}
+
+.feature-list {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+
+.feature-item {
   display: flex;
-  flex-direction: column;
-  gap: 16px;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 8px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+}
+
+.feature-icon {
+  color: #22c55e;
+  font-weight: 700;
+  font-size: 16px;
+  flex-shrink: 0;
+}
+
+.feature-text {
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+  line-height: 1.5;
+}
+
+.code-block {
+  background: var(--vp-c-bg-alt);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.code-block pre {
+  margin: 0;
+  padding: 16px;
+  font-size: 12px;
+  line-height: 1.5;
+  overflow-x: auto;
+}
+
+.code-block code {
+  font-family: monospace;
+  color: var(--vp-c-text-1);
+}
+
+.tools-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+}
+
+.tool-card {
+  padding: 12px;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  text-align: center;
+}
+
+.rec-name {
+  font-weight: 600;
+  font-size: 13px;
+  color: var(--vp-c-text-1);
+  margin-bottom: 4px;
+}
+
+.rec-desc {
+  font-size: 12px;
+  color: var(--vp-c-text-2);
+  line-height: 1.4;
+}
+
+@media (max-width: 768px) {
+  .tools-tabs {
+    flex-direction: column;
+  }
+
+  .feature-list {
+    grid-template-columns: 1fr;
+  }
+
+  .tools-grid {
+    grid-template-columns: 1fr;
+  }
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/api-design/ErrorHandlingDemo.vue b/docs/.vitepress/theme/components/appendix/api-design/ErrorHandlingDemo.vue
index ecc0d11..5aa4145 100644
--- a/docs/.vitepress/theme/components/appendix/api-design/ErrorHandlingDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/api-design/ErrorHandlingDemo.vue
@@ -1,97 +1,379 @@
+<!--
+  ErrorHandlingDemo.vue - 错误处理演示组件
+  展示错误处理的正确和错误示例对比
+-->
 <template>
-  <div class="demo-container">
-    <div class="demo-header">
-      <h4>错误处理演示</h4>
-      <p class="hint">展示RESTful API中的错误处理机制</p>
+  <div class="demo">
+    <div class="header">
+      <span class="icon">🚨</span>
+      <span class="title">错误处理：优雅地"拒绝"</span>
     </div>
-    <div class="demo-content">
-      <div class="error-types">
-        <div class="error-item">
-          <span class="code">400</span>
-          <span class="name">Bad Request</span>
-          <span class="desc">请求参数错误</span>
+
+    <div class="content">
+      <div class="comparison-tabs">
+        <button
+          class="tab-btn bad"
+          :class="{ active: selectedTab === 'bad' }"
+          @click="selectedTab = 'bad'"
+        >
+          ❌ 错误示范
+        </button>
+        <button
+          class="tab-btn good"
+          :class="{ active: selectedTab === 'good' }"
+          @click="selectedTab = 'good'"
+        >
+          ✅ 正确示范
+        </button>
+      </div>
+
+      <!-- 错误示范 -->
+      <div v-if="selectedTab === 'bad'" class="comparison bad">
+        <div class="response-preview">
+          <div class="status-line bad">
+            <span>HTTP/1.1</span>
+            <span class="code">200 OK</span>
+          </div>
+          <div class="response-body">
+            <pre><code>{
+  "error": "出错了"
+}</code></pre>
+          </div>
         </div>
-        <div class="error-item">
-          <span class="code">401</span>
-          <span class="name">Unauthorized</span>
-          <span class="desc">未授权访问</span>
+
+        <div class="problems">
+          <h4>问题分析</h4>
+          <ul>
+            <li>
+              <span class="icon">⚠️</span>
+              HTTP 状态码说"成功"，但业务说"出错" - 前后端状态不一致
+            </li>
+            <li>
+              <span class="icon">⚠️</span>
+              错误信息太笼统，无法定位问题
+            </li>
+            <li>
+              <span class="icon">⚠️</span>
+              没有错误代码，难以程序化判断
+            </li>
+            <li>
+              <span class="icon">⚠️</span>
+              浏览器和 CDN 会缓存这个"成功的"响应
+            </li>
+          </ul>
         </div>
-        <div class="error-item">
-          <span class="code">404</span>
-          <span class="name">Not Found</span>
-          <span class="desc">资源不存在</span>
+      </div>
+
+      <!-- 正确示范 -->
+      <div v-if="selectedTab === 'good'" class="comparison good">
+        <div class="response-preview">
+          <div class="status-line">
+            <span>HTTP/1.1</span>
+            <span class="code">422 Unprocessable Entity</span>
+          </div>
+          <div class="response-body">
+            <pre><code>{{ JSON.stringify(goodResponse, null, 2) }}</code></pre>
+          </div>
         </div>
-        <div class="error-item">
-          <span class="code">500</span>
-          <span class="name">Server Error</span>
-          <span class="desc">服务器内部错误</span>
+
+        <div class="highlights">
+          <h4>正确做法</h4>
+          <ul>
+            <li>
+              <span class="icon">✅</span>
+              <strong>正确的 HTTP 状态码</strong>: 422 表示语义错误
+            </li>
+            <li>
+              <span class="icon">✅</span>
+              <strong>业务错误码</strong>: `code: 20003` 可用于程序判断
+            </li>
+            <li>
+              <span class="icon">✅</span>
+              <strong>详细错误信息</strong>: `errors` 数组包含具体字段和原因
+            </li>
+            <li>
+              <span class="icon">✅</span>
+              <strong>可追踪性</strong>: `request_id` 用于日志查询
+            </li>
+            <li>
+              <span class="icon">✅</span>
+              <strong>帮助链接</strong>: `help_url` 引导用户查看文档
+            </li>
+          </ul>
+        </div>
+
+        <div class="error-codes">
+          <h4>错误码体系</h4>
+          <div class="code-list">
+            <div v-for="item in errorCodeItems" :key="item.code" class="code-item">
+              <span class="code-badge">{{ item.code }}</span>
+              <span class="code-desc">{{ item.desc }}</span>
+            </div>
+          </div>
         </div>
       </div>
     </div>
   </div>
 </template>
 
+<script setup>
+import { ref } from 'vue'
+
+const selectedTab = ref('bad')
+
+const goodResponse = {
+  code: 20003,
+  message: '密码强度不足',
+  errors: [
+    {
+      field: 'password',
+      code: 'VALIDATION_ERROR',
+      message: '密码必须包含至少 1 个大写字母、1 个小写字母、1 个数字，且长度至少 8 位'
+    }
+  ],
+  request_id: 'req-550e8400-e29b-41d4-a716-44665544000',
+  timestamp: '2024-01-15T09:30:00.000Z',
+  help_url: 'https://docs.example.com/errors/20003'
+}
+
+const errorCodeItems = [
+  { code: '1XXYY', desc: '通用错误（第1位固定为1）' },
+  { code: '10001', desc: '参数错误' },
+  { code: '10010', desc: '用户不存在' },
+  { code: '10018', desc: 'Token 已过期' },
+  { code: '10021', desc: '权限不足' },
+  { code: '20003', desc: '密码强度不足' },
+  { code: '20014', desc: '余额不足' }
+]
+</script>
+
 <style scoped>
-.demo-container {
+.demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 20px;
+  border-radius: 12px;
   background: var(--vp-c-bg-soft);
+  margin: 24px 0;
+  overflow: hidden;
 }
 
-.demo-header {
-  margin-bottom: 20px;
-}
-
-.demo-header h4 {
-  margin: 0 0 8px 0;
-  color: var(--vp-c-text-1);
-}
-
-.hint {
-  margin: 0;
-  font-size: 14px;
-  color: var(--vp-c-text-2);
-}
-
-.demo-content {
+.header {
+  padding: 16px 20px;
+  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+  color: white;
   display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.error-types {
-  display: flex;
-  flex-direction: column;
+  align-items: center;
   gap: 12px;
 }
 
-.error-item {
+.icon {
+  font-size: 24px;
+}
+
+.title {
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.content {
+  padding: 24px;
+}
+
+.comparison-tabs {
   display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 12px 16px;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.tab-btn {
+  flex: 1;
+  padding: 12px;
+  border: 2px solid;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.tab-btn.bad {
+  border-color: #ef4444;
+  background: var(--vp-c-bg);
+  color: #ef4444;
+}
+
+.tab-btn.bad:hover {
+  background: #fef2f2;
+}
+
+.tab-btn.bad.active {
+  background: #ef4444;
+  color: white;
+}
+
+.tab-btn.good {
+  border-color: #22c55e;
+  background: var(--vp-c-bg);
+  color: #22c55e;
+}
+
+.tab-btn.good:hover {
+  background: #f0fdf4;
+}
+
+.tab-btn.good.active {
+  background: #22c55e;
+  color: white;
+}
+
+.comparison {
   background: var(--vp-c-bg);
   border-radius: 8px;
-  border-left: 4px solid #f56c6c;
+  overflow: hidden;
 }
 
-.error-item .code {
+.response-preview {
+  margin-bottom: 20px;
+}
+
+.status-line {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  background: var(--vp-c-bg-soft);
+  border-bottom: 1px solid var(--vp-c-divider);
   font-family: monospace;
-  font-weight: 600;
-  color: #f56c6c;
-  font-size: 16px;
-  min-width: 50px;
+  font-size: 13px;
 }
 
-.error-item .name {
-  font-weight: 500;
+.status-line.bad .code {
+  color: #ef4444;
+  font-weight: 700;
+}
+
+.status-line:not(.bad) .code {
+  color: #d97706;
+  font-weight: 700;
+}
+
+.response-body {
+  padding: 16px;
+}
+
+.response-body pre {
+  margin: 0;
+  background: var(--vp-c-bg-alt);
+  padding: 16px;
+  border-radius: 6px;
+  font-size: 12px;
+  line-height: 1.5;
+  overflow-x: auto;
+}
+
+.response-body code {
+  font-family: monospace;
   color: var(--vp-c-text-1);
-  min-width: 120px;
 }
 
-.error-item .desc {
-  color: var(--vp-c-text-2);
+.problems, .highlights {
+  padding: 16px;
+}
+
+.problems h4, .highlights h4 {
   font-size: 14px;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  margin: 0 0 12px 0;
+}
+
+.problems ul, .highlights ul {
+  margin: 0;
+  padding-left: 0;
+  list-style: none;
+}
+
+.problems li, .highlights li {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 10px;
+  margin-bottom: 8px;
+  border-radius: 6px;
+  line-height: 1.6;
+  font-size: 13px;
+}
+
+.problems li {
+  background: #fef2f2;
+  color: #991b1b;
+}
+
+.highlights li {
+  background: #f0fdf4;
+  color: #166534;
+}
+
+.problems li .icon, .highlights li .icon {
+  font-size: 16px;
+  flex-shrink: 0;
+}
+
+.problems li strong, .highlights li strong {
+  font-weight: 600;
+}
+
+.error-codes {
+  padding: 16px;
+  border-top: 1px solid var(--vp-c-divider);
+}
+
+.error-codes h4 {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  margin: 0 0 12px 0;
+}
+
+.code-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.code-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+  border-left: 3px solid var(--vp-c-brand);
+}
+
+.code-badge {
+  font-family: monospace;
+  font-size: 12px;
+  font-weight: 700;
+  padding: 4px 8px;
+  background: var(--vp-c-brand);
+  color: white;
+  border-radius: 4px;
+  min-width: 70px;
+  text-align: center;
+}
+
+.code-desc {
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+}
+
+@media (max-width: 640px) {
+  .comparison-tabs {
+    flex-direction: column;
+  }
+
+  .status-line {
+    flex-wrap: wrap;
+  }
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/api-design/ResponseStructureDemo.vue b/docs/.vitepress/theme/components/appendix/api-design/ResponseStructureDemo.vue
index 7144057..1fd0015 100644
--- a/docs/.vitepress/theme/components/appendix/api-design/ResponseStructureDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/api-design/ResponseStructureDemo.vue
@@ -1,50 +1,397 @@
+<!--
+  ResponseStructureDemo.vue - HTTP 响应结构演示组件
+  展示标准化 API 响应结构和分页响应
+-->
 <template>
-  <div class="demo-container">
-    <div class="demo-header">
-      <h4>{{ title }}</h4>
-      <p class="hint">{{ description }}</p>
+  <div class="demo">
+    <div class="header">
+      <span class="icon">📦</span>
+      <span class="title">HTTP 响应结构：标准化的数据契约</span>
     </div>
-    <div class="demo-content">
-      <el-alert type="info" :closable="false">
-        响应结构演示组件占位符 - 待实现具体交互
-      </el-alert>
+
+    <div class="content">
+      <div class="response-tabs">
+        <button
+          v-for="tab in tabs"
+          :key="tab.id"
+          class="tab-btn"
+          :class="{ active: selectedTab === tab.id }"
+          @click="selectedTab = tab.id"
+        >
+          {{ tab.name }}
+        </button>
+      </div>
+
+      <div class="response-detail">
+        <div class="response-header">
+          <div class="status-line">
+            <span class="http-version">HTTP/1.1</span>
+            <span class="status-code" :class="getStatusClass(currentResponse.status)">{{ currentResponse.status }}</span>
+            <span class="status-text">{{ currentResponse.statusText }}</span>
+          </div>
+        </div>
+
+        <div class="response-headers">
+          <div class="header-item">
+            <span class="header-key">Content-Type:</span>
+            <span class="header-value">application/json</span>
+          </div>
+          <div class="header-item">
+            <span class="header-key">X-Request-ID:</span>
+            <span class="header-value">req-550e8400-e29b-41d4</span>
+          </div>
+          <div class="header-item">
+            <span class="header-key">X-Response-Time:</span>
+            <span class="header-value">45ms</span>
+          </div>
+        </div>
+
+        <div class="response-body">
+          <pre><code>{{ JSON.stringify(currentResponse.body, null, 2) }}</code></pre>
+        </div>
+
+        <div class="field-descriptions">
+          <h4>字段说明</h4>
+          <div class="field-list">
+            <div v-for="field in currentResponse.fields" :key="field.name" class="field-item">
+              <div class="field-name">
+                <code>{{ field.name }}</code>
+                <span class="field-type">{{ field.type }}</span>
+              </div>
+              <div class="field-desc">{{ field.description }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 
-const title = ref('HTTP响应结构演示')
-const description = ref('展示HTTP响应的结构，包括状态行、响应头和响应体')
+const tabs = [
+  { id: 'success', name: '成功响应' },
+  { id: 'pagination', name: '分页响应' },
+  { id: 'error', name: '错误响应' }
+]
+
+const responses = {
+  success: {
+    status: 200,
+    statusText: 'OK',
+    body: {
+      code: 0,
+      message: 'success',
+      data: {
+        id: 123,
+        name: '张三',
+        email: 'zhangsan@example.com',
+        phone: '13800138000',
+        created_at: '2024-01-15T10:30:00.000Z'
+      },
+      request_id: 'req-550e8400-e29b-41d4-a716-446655440000',
+      timestamp: '2024-01-15T10:30:00.000Z'
+    },
+    fields: [
+      { name: 'code', type: 'integer', description: '业务状态码，0 表示成功' },
+      { name: 'message', type: 'string', description: '状态描述，成功时为 "success"' },
+      { name: 'data', type: 'object', description: '业务数据，成功时返回具体数据' },
+      { name: 'request_id', type: 'string', description: '请求唯一标识，用于问题追踪' },
+      { name: 'timestamp', type: 'string', description: '响应时间戳，ISO 8601 格式' }
+    ]
+  },
+  pagination: {
+    status: 200,
+    statusText: 'OK',
+    body: {
+      code: 0,
+      message: 'success',
+      data: {
+        list: [
+          { id: 1, name: '商品A', price: 100 },
+          { id: 2, name: '商品B', price: 200 }
+        ],
+        pagination: {
+          page: 1,
+          page_size: 20,
+          total: 156,
+          total_pages: 8,
+          has_next: true,
+          has_prev: false
+        }
+      },
+      request_id: 'req-550e8400-e29b-41d4-a716-446655440000',
+      timestamp: '2024-01-15T10:30:00.000Z'
+    },
+    fields: [
+      { name: 'list', type: 'array', description: '数据列表' },
+      { name: 'pagination', type: 'object', description: '分页信息对象' },
+      { name: 'page', type: 'integer', description: '当前页码' },
+      { name: 'page_size', type: 'integer', description: '每页数量' },
+      { name: 'total', type: 'integer', description: '总记录数' },
+      { name: 'total_pages', type: 'integer', description: '总页数' },
+      { name: 'has_next', type: 'boolean', description: '是否有下一页' },
+      { name: 'has_prev', type: 'boolean', description: '是否有上一页' }
+    ]
+  },
+  error: {
+    status: 422,
+    statusText: 'Unprocessable Entity',
+    body: {
+      code: 20003,
+      message: '密码强度不足',
+      errors: [
+        {
+          field: 'password',
+          code: 'VALIDATION_ERROR',
+          message: '密码必须包含至少 1 个大写字母、1 个小写字母、1 个数字，且长度至少 8 位'
+        }
+      ],
+      request_id: 'req-550e8400-e29b-41d4-a716-446655440000',
+      timestamp: '2024-01-15T10:30:00.000Z',
+      help_url: 'https://docs.example.com/errors/20003'
+    },
+    fields: [
+      { name: 'code', type: 'integer', description: '错误码，非 0 表示失败' },
+      { name: 'message', type: 'string', description: '错误描述，供用户阅读' },
+      { name: 'errors', type: 'array', description: '详细错误信息数组（可选）' },
+      { name: 'help_url', type: 'string', description: '错误文档链接（可选）' }
+    ]
+  }
+}
+
+const selectedTab = ref('success')
+const currentResponse = computed(() => responses[selectedTab.value])
+
+function getStatusClass(status) {
+  const prefix = Math.floor(status / 100)
+  switch (prefix) {
+    case 2: return 'success'
+    case 3: return 'redirect'
+    case 4: return 'client-error'
+    case 5: return 'server-error'
+    default: return ''
+  }
+}
 </script>
 
 <style scoped>
-.demo-container {
+.demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 20px;
+  border-radius: 12px;
   background: var(--vp-c-bg-soft);
+  margin: 24px 0;
+  overflow: hidden;
 }
 
-.demo-header {
+.header {
+  padding: 16px 20px;
+  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
+  color: white;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.icon {
+  font-size: 24px;
+}
+
+.title {
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.content {
+  padding: 24px;
+}
+
+.response-tabs {
+  display: flex;
+  gap: 8px;
   margin-bottom: 20px;
 }
 
-.demo-header h4 {
-  margin: 0 0 8px 0;
-  color: var(--vp-c-text-1);
+.tab-btn {
+  padding: 8px 16px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  background: var(--vp-c-bg);
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.2s ease;
 }
 
-.hint {
-  margin: 0;
-  font-size: 14px;
+.tab-btn:hover {
+  transform: translateY(-1px);
+}
+
+.tab-btn.active {
+  background: var(--vp-c-brand);
+  color: white;
+  border-color: var(--vp-c-brand);
+  transform: scale(1.05);
+}
+
+.response-detail {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.response-header {
+  padding: 16px;
+  background: var(--vp-c-bg-soft);
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.status-line {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.http-version {
+  font-family: monospace;
+  font-size: 13px;
   color: var(--vp-c-text-2);
 }
 
-.demo-content {
+.status-code {
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-weight: 700;
+  font-size: 13px;
+  font-family: monospace;
+}
+
+.status-code.success {
+  background: #dcfce7;
+  color: #16a34a;
+}
+
+.status-code.client-error {
+  background: #fef3c7;
+  color: #d97706;
+}
+
+.status-text {
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+}
+
+.response-headers {
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.header-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 0;
+  font-size: 12px;
+}
+
+.header-key {
+  font-family: monospace;
+  font-weight: 600;
+  color: var(--vp-c-text-2);
+  min-width: 120px;
+}
+
+.header-value {
+  font-family: monospace;
+  color: var(--vp-c-text-1);
+}
+
+.response-body {
+  padding: 16px;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.response-body pre {
+  margin: 0;
+  background: var(--vp-c-bg-alt);
+  padding: 16px;
+  border-radius: 6px;
+  font-size: 12px;
+  line-height: 1.5;
+  overflow-x: auto;
+}
+
+.response-body code {
+  font-family: monospace;
+  color: var(--vp-c-text-1);
+}
+
+.field-descriptions {
+  padding: 16px;
+}
+
+.field-descriptions h4 {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  margin: 0 0 12px 0;
+}
+
+.field-list {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 12px;
+}
+
+.field-item {
+  padding: 12px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+  border-left: 3px solid var(--vp-c-brand);
+}
+
+.field-name {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.field-name code {
+  font-family: monospace;
+  font-size: 13px;
+  color: var(--vp-c-brand);
+  font-weight: 600;
+}
+
+.field-type {
+  font-size: 11px;
+  padding: 2px 6px;
+  background: rgba(var(--vp-c-brand-rgb), 0.1);
+  color: var(--vp-c-brand);
+  border-radius: 4px;
+  font-family: monospace;
+}
+
+.field-desc {
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+  line-height: 1.6;
+}
+
+@media (max-width: 640px) {
+  .response-tabs {
+    flex-direction: column;
+  }
+
+  .status-line {
+    flex-wrap: wrap;
+  }
+
+  .header-item {
+    flex-direction: column;
+    align-items: flex-start;
+  }
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/api-design/VersioningStrategyDemo.vue b/docs/.vitepress/theme/components/appendix/api-design/VersioningStrategyDemo.vue
index cdce418..3769edc 100644
--- a/docs/.vitepress/theme/components/appendix/api-design/VersioningStrategyDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/api-design/VersioningStrategyDemo.vue
@@ -1,50 +1,413 @@
+<!--
+  VersioningStrategyDemo.vue - API 版本控制策略演示
+  展示 4 种版本控制策略的对比
+-->
 <template>
-  <div class="demo-container">
-    <div class="demo-header">
-      <h4>{{ title }}</h4>
-      <p class="hint">{{ description }}</p>
+  <div class="demo">
+    <div class="header">
+      <span class="icon">🔢</span>
+      <span class="title">API 版本控制：向后兼容的艺术</span>
     </div>
-    <div class="demo-content">
-      <el-alert type="info" :closable="false">
-        版本策略演示组件占位符 - 待实现具体交互
-      </el-alert>
+
+    <div class="content">
+      <div class="strategies">
+        <div
+          v-for="strategy in strategies"
+          :key="strategy.id"
+          class="strategy-card"
+          :class="{ active: selectedStrategy === strategy.id }"
+          @click="selectedStrategy = strategy.id"
+        >
+          <div class="strategy-header">
+            <div class="strategy-name">{{ strategy.name }}</div>
+            <div class="strategy-stars">
+              <span v-for="n in strategy.stars" :key="n" class="star">⭐</span>
+            </div>
+          </div>
+          <div class="strategy-example">{{ strategy.example }}</div>
+        </div>
+      </div>
+
+      <div class="strategy-detail" v-if="currentStrategy">
+        <div class="detail-header">
+          <div class="detail-title">{{ currentStrategy.name }}</div>
+          <div class="detail-recommendation" :class="currentStrategy.level">
+            {{ currentStrategy.level === 'high' ? '强烈推荐' : currentStrategy.level === 'medium' ? '可以使用' : '不推荐' }}
+          </div>
+        </div>
+
+        <div class="detail-sections">
+          <div class="detail-section">
+            <h4>✅ 优点</h4>
+            <ul>
+              <li v-for="(pro, idx) in currentStrategy.pros" :key="idx">{{ pro }}</li>
+            </ul>
+          </div>
+
+          <div class="detail-section">
+            <h4>❌ 缺点</h4>
+            <ul>
+              <li v-for="(con, idx) in currentStrategy.cons" :key="idx">{{ con }}</li>
+            </ul>
+          </div>
+        </div>
+
+        <div class="detail-section example">
+          <h4>💻 实现示例</h4>
+          <div class="code-box">
+            <div class="code-header">Request</div>
+            <pre><code>{{ currentStrategy.codeExample.request }}</code></pre>
+            <div class="code-header">Response Headers</div>
+            <pre><code>{{ currentStrategy.codeExample.response }}</code></pre>
+          </div>
+        </div>
+
+        <div class="detail-section tips">
+          <h4>💡 最佳实践</h4>
+          <ul>
+            <li v-for="(tip, idx) in currentStrategy.tips" :key="idx">{{ tip }}</li>
+          </ul>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 
-const title = ref('版本策略演示')
-const description = ref('展示API版本控制的策略，包括URL版本、Header版本、内容协商等方式')
+const strategies = [
+  {
+    id: 'url-path',
+    name: 'URL Path 版本',
+    example: '/v1/users',
+    stars: 4,
+    level: 'high',
+    pros: [
+      '最直观，一目了然看到版本号',
+      '易于缓存和控制权限',
+      '文档清晰，社区主流做法',
+      '支持不同版本的并行部署'
+    ],
+    cons: [
+      'URL 会变化，不符合 REST 资源唯一性',
+      '需要配置路由规则'
+    ],
+    codeExample: {
+      request: `GET /v1/users HTTP/1.1
+Host: api.example.com`,
+      response: `HTTP/1.1 200 OK
+Content-Type: application/json
+X-API-Version: v1`
+    },
+    tips: [
+      '版本号放在路径开头：`/v1/users`',
+      '使用语义化版本号（Semantic Versioning）',
+      '废弃版本返回 Sunset 头部',
+      '客户端升级提示可通过响应头提示'
+    ]
+  },
+  {
+    id: 'header',
+    name: 'Header 版本',
+    example: 'API-Version: v1',
+    stars: 2,
+    level: 'medium',
+    pros: [
+      'URL 保持简洁不变',
+      '版本控制不影响路由'
+    ],
+    cons: [
+      '不直观，需要在工具里配置 Header',
+      '缓存策略复杂',
+      '文档不够清晰',
+      '调试不便'
+    ],
+    codeExample: {
+      request: `GET /users HTTP/1.1
+Host: api.example.com
+API-Version: v1`,
+      response: `HTTP/1.1 200 OK
+Content-Type: application/json
+X-API-Version: v1`
+    },
+    tips: [
+      '使用自定义 Header：`API-Version` 或 `Accept`',
+      '需在 API Gateway 中统一处理',
+      '适合内部系统或对 API 规范要求高的场景'
+    ]
+  },
+  {
+    id: 'content-negotiation',
+    name: '内容协商',
+    example: 'Accept: application/vnd.api.v1+json',
+    stars: 2,
+    level: 'medium',
+    pros: [
+      '符合 HTTP 标准',
+      'URL 完全不变'
+    ],
+    cons: [
+      '复杂，理解成本高',
+      '开发者容易用错',
+      '缓存和代理支持不佳'
+    ],
+    codeExample: {
+      request: `GET /users HTTP/1.1
+Host: api.example.com
+Accept: application/vnd.api.v1+json`,
+      response: `HTTP/1.1 200 OK
+Content-Type: application/vnd.api.v1+json`
+    },
+    tips: [
+      '使用 Vendor MIME 类型：`application/vnd.{company}.{resource}.v{version}+json`',
+      '需要 API Gateway 或框架支持内容协商',
+      'GitHub API 使用此策略'
+    ]
+  },
+  {
+    id: 'query-param',
+    name: 'Query 参数',
+    example: '/users?version=v1',
+    stars: 1,
+    level: 'low',
+    pros: [
+      '实现简单'
+    ],
+    cons: [
+      '不专业，容易忽视',
+      '缓存麻烦（不同参数视为不同资源）',
+      'URL 混乱'
+    ],
+    codeExample: {
+      request: `GET /users?version=v1 HTTP/1.1
+Host: api.example.com`,
+      response: `HTTP/1.1 200 OK
+Content-Type: application/json`
+    },
+    tips: [
+      '仅用于快速原型或内部工具',
+      '生产环境不推荐使用'
+    ]
+  }
+]
+
+const selectedStrategy = ref('url-path')
+const currentStrategy = computed(() =>
+  strategies.find(s => s.id === selectedStrategy.value)
+)
 </script>
 
 <style scoped>
-.demo-container {
+.demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 20px;
+  border-radius: 12px;
   background: var(--vp-c-bg-soft);
+  margin: 24px 0;
+  overflow: hidden;
 }
 
-.demo-header {
-  margin-bottom: 20px;
+.header {
+  padding: 16px 20px;
+  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
+  color: white;
+  display: flex;
+  align-items: center;
+  gap: 12px;
 }
 
-.demo-header h4 {
-  margin: 0 0 8px 0;
+.icon {
+  font-size: 24px;
+}
+
+.title {
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.content {
+  padding: 24px;
+}
+
+.strategies {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.strategy-card {
+  background: var(--vp-c-bg);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 16px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.strategy-card:hover {
+  border-color: rgba(var(--vp-c-brand-rgb), 0.5);
+  transform: translateY(-2px);
+}
+
+.strategy-card.active {
+  border-color: var(--vp-c-brand);
+  box-shadow: 0 0 0 3px rgba(var(--vp-c-brand-rgb), 0.15);
+}
+
+.strategy-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.strategy-name {
+  font-weight: 600;
+  font-size: 14px;
   color: var(--vp-c-text-1);
 }
 
-.hint {
-  margin: 0;
-  font-size: 14px;
-  color: var(--vp-c-text-2);
+.strategy-stars {
+  display: flex;
+  gap: 2px;
 }
 
-.demo-content {
+.star {
+  font-size: 12px;
+}
+
+.strategy-example {
+  font-family: monospace;
+  font-size: 12px;
+  color: var(--vp-c-text-2);
+  background: var(--vp-c-bg-soft);
+  padding: 6px 10px;
+  border-radius: 4px;
+  margin-top: 8px;
+}
+
+.strategy-detail {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.detail-header {
   display: flex;
-  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  background: var(--vp-c-bg-soft);
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.detail-title {
+  font-weight: 700;
+  font-size: 16px;
+  color: var(--vp-c-text-1);
+}
+
+.detail-recommendation {
+  padding: 4px 12px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.detail-recommendation.high {
+  background: #dcfce7;
+  color: #16a34a;
+}
+
+.detail-recommendation.medium {
+  background: #fef3c7;
+  color: #d97706;
+}
+
+.detail-recommendation.low {
+  background: #fee2e2;
+  color: #dc2626;
+}
+
+.detail-sections {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
   gap: 16px;
+  padding: 16px;
+}
+
+.detail-section {
+  padding: 16px;
+}
+
+.detail-section h4 {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  margin: 0 0 12px 0;
+}
+
+.detail-section ul {
+  margin: 0;
+  padding-left: 20px;
+}
+
+.detail-section li {
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+  line-height: 1.6;
+  margin: 6px 0;
+}
+
+.detail-section.example {
+  grid-column: 1 / -1;
+  padding: 16px;
+  background: var(--vp-c-bg-soft);
+}
+
+.code-box {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.code-header {
+  padding: 8px 12px;
+  background: var(--vp-c-bg-soft);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--vp-c-text-2);
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.code-box pre {
+  margin: 0;
+  padding: 12px;
+  font-size: 12px;
+  line-height: 1.5;
+  overflow-x: auto;
+}
+
+.code-box code {
+  font-family: monospace;
+  color: var(--vp-c-text-1);
+}
+
+.detail-section.tips {
+  background: #eff6ff;
+  border-left: 3px solid #3b82f6;
+}
+
+@media (max-width: 768px) {
+  .strategies {
+    grid-template-columns: 1fr;
+  }
+
+  .detail-sections {
+    grid-template-columns: 1fr;
+  }
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/backend-evolution/ArchitectureComparisonDemo.vue b/docs/.vitepress/theme/components/appendix/backend-evolution/ArchitectureComparisonDemo.vue
index 429024c..e0e9259 100644
--- a/docs/.vitepress/theme/components/appendix/backend-evolution/ArchitectureComparisonDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/backend-evolution/ArchitectureComparisonDemo.vue
@@ -1,8 +1,9 @@
 <template>
   <div class="architecture-comparison-demo">
     <div class="demo-header">
-      <h4>🏗️ 架构演进对比</h4>
-      <p>四个时代的核心架构特征对比</p>
+      <span class="icon">🏗️</span>
+      <span class="title">架构演进对比</span>
+      <span class="subtitle">四个时代的核心架构特征</span>
     </div>
 
     <div class="comparison-grid">
@@ -50,6 +51,11 @@
         </div>
       </div>
     </div>
+
+    <div class="info-box">
+      <span class="icon">💡</span>
+      <strong>核心思想:</strong>架构演进是为了解决上一个时代的痛点,但也带来了新的复杂度。
+    </div>
   </div>
 </template>
 
@@ -108,24 +114,35 @@ const currentEra = computed(() => {
   border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
   background: var(--vp-c-bg-soft);
-  padding: 1.5rem;
+  padding: 1rem;
   margin: 1rem 0;
+  max-height: 600px;
+  overflow-y: auto;
 }
 
 .demo-header {
-  margin-bottom: 1.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--vp-c-divider);
 }
 
-.demo-header h4 {
-  margin: 0 0 0.5rem 0;
-  font-size: 1.1rem;
+.demo-header .icon {
+  font-size: 1.25rem;
+}
+
+.demo-header .title {
+  font-weight: bold;
+  font-size: 1rem;
   color: var(--vp-c-text-1);
 }
 
-.demo-header p {
-  margin: 0;
-  font-size: 0.9rem;
+.demo-header .subtitle {
   color: var(--vp-c-text-2);
+  font-size: 0.85rem;
+  margin-left: 0.5rem;
 }
 
 .comparison-grid {
@@ -152,8 +169,7 @@ const currentEra = computed(() => {
 
 .era-card.active {
   border-color: var(--vp-c-brand);
-  background: rgba(102, 126, 234, 0.1);
-  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
+  background: var(--vp-c-brand-soft);
 }
 
 .era-icon {
@@ -271,6 +287,25 @@ const currentEra = computed(() => {
   color: var(--vp-c-text-2);
 }
 
+.info-box {
+  background: var(--vp-c-bg-alt);
+  padding: 0.75rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  margin-top: 0.75rem;
+  display: flex;
+  gap: 0.25rem;
+}
+
+.info-box .icon {
+  flex-shrink: 0;
+}
+
+.info-box strong {
+  color: var(--vp-c-text-1);
+}
+
 @media (max-width: 768px) {
   .comparison-grid {
     grid-template-columns: repeat(2, 1fr);
diff --git a/docs/.vitepress/theme/components/appendix/backend-evolution/ContainerDockerDemo.vue b/docs/.vitepress/theme/components/appendix/backend-evolution/ContainerDockerDemo.vue
index 373038b..8ee6284 100644
--- a/docs/.vitepress/theme/components/appendix/backend-evolution/ContainerDockerDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/backend-evolution/ContainerDockerDemo.vue
@@ -1,8 +1,9 @@
 <template>
   <div class="container-docker-demo">
     <div class="demo-header">
-      <h4>🐳 Docker 容器化演示</h4>
-      <p>理解容器如何让应用"一次打包，到处运行"</p>
+      <span class="icon">🐳</span>
+      <span class="title">Docker 容器化演示</span>
+      <span class="subtitle">理解容器如何让应用"一次打包，到处运行"</span>
     </div>
 
     <div class="docker-visualization">
@@ -46,6 +47,11 @@
         <div class="benefit-desc">{{ benefit.desc }}</div>
       </div>
     </div>
+
+    <div class="info-box">
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>容器化让应用"一次构建，到处运行"，解决了环境一致性和快速部署的问题。
+    </div>
   </div>
 </template>
 
@@ -69,24 +75,35 @@ const benefits = [
   border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
   background: var(--vp-c-bg-soft);
-  padding: 1.5rem;
+  padding: 1rem;
   margin: 1rem 0;
+  max-height: 600px;
+  overflow-y: auto;
 }
 
 .demo-header {
-  margin-bottom: 1.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--vp-c-divider);
 }
 
-.demo-header h4 {
-  margin: 0 0 0.5rem 0;
-  font-size: 1.1rem;
+.demo-header .icon {
+  font-size: 1.25rem;
+}
+
+.demo-header .title {
+  font-weight: bold;
+  font-size: 1rem;
   color: var(--vp-c-text-1);
 }
 
-.demo-header p {
-  margin: 0;
-  font-size: 0.9rem;
+.demo-header .subtitle {
   color: var(--vp-c-text-2);
+  font-size: 0.85rem;
+  margin-left: 0.5rem;
 }
 
 .docker-visualization {
@@ -268,4 +285,23 @@ const benefits = [
     grid-template-columns: 1fr;
   }
 }
+
+.info-box {
+  background: var(--vp-c-bg-alt);
+  padding: 0.75rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  margin-top: 1rem;
+  display: flex;
+  gap: 0.25rem;
+}
+
+.info-box .icon {
+  flex-shrink: 0;
+}
+
+.info-box strong {
+  color: var(--vp-c-text-1);
+}
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/backend-evolution/EvolutionIntroDemo.vue b/docs/.vitepress/theme/components/appendix/backend-evolution/EvolutionIntroDemo.vue
index 7e1cb8a..1f3cbd6 100644
--- a/docs/.vitepress/theme/components/appendix/backend-evolution/EvolutionIntroDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/backend-evolution/EvolutionIntroDemo.vue
@@ -1,8 +1,9 @@
 <template>
   <div class="evolution-intro-demo">
-    <div class="intro-header">
-      <h3>后端架构进化之旅</h3>
-      <p>用一个餐厅的成长历程，理解后端架构的 30 年变迁</p>
+    <div class="demo-header">
+      <span class="icon">🏗️</span>
+      <span class="title">后端架构进化之旅</span>
+      <span class="subtitle">用餐厅比喻理解 30 年架构演进</span>
     </div>
 
     <div class="timeline-cards">
@@ -20,7 +21,7 @@
       </div>
     </div>
 
-    <div class="stage-detail">
+    <div class="stage-detail" v-if="currentStage !== null">
       <Transition name="fade" mode="out-in">
         <div :key="currentStage" class="detail-panel">
           <div class="detail-header">
@@ -46,6 +47,11 @@
         </div>
       </Transition>
     </div>
+
+    <div class="info-box">
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>架构演进是为了解决上一个时代的痛点，但也带来了新的复杂度。没有最好的架构，只有最适合的架构。
+    </div>
   </div>
 </template>
 
@@ -116,84 +122,95 @@ const stages = [
 
 <style scoped>
 .evolution-intro-demo {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  border-radius: 16px;
-  padding: 32px;
-  color: #fff;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg-soft);
+  padding: 1rem;
+  margin: 1rem 0;
+  max-height: 600px;
+  overflow-y: auto;
 }
 
-.intro-header {
-  text-align: center;
-  margin-bottom: 32px;
+.demo-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--vp-c-divider);
 }
 
-.intro-header h3 {
-  font-size: 24px;
-  font-weight: 700;
-  margin: 0 0 8px 0;
+.demo-header .icon {
+  font-size: 1.25rem;
 }
 
-.intro-header p {
-  font-size: 14px;
-  opacity: 0.9;
-  margin: 0;
+.demo-header .title {
+  font-weight: bold;
+  font-size: 1rem;
+  color: var(--vp-c-text-1);
+}
+
+.demo-header .subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.85rem;
+  margin-left: 0.5rem;
 }
 
 .timeline-cards {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 12px;
-  margin-bottom: 24px;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
 }
 
 .stage-card {
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--vp-c-bg);
   border: 2px solid transparent;
-  border-radius: 12px;
-  padding: 16px 12px;
+  border-radius: 8px;
+  padding: 0.75rem 0.5rem;
   text-align: center;
   cursor: pointer;
-  transition: all 0.3s ease;
+  transition: all 0.3s;
 }
 
 .stage-card:hover {
-  background: rgba(255, 255, 255, 0.15);
+  border-color: var(--vp-c-brand);
   transform: translateY(-2px);
 }
 
 .stage-card.active {
-  background: rgba(255, 255, 255, 0.25);
-  border-color: rgba(255, 255, 255, 0.5);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-brand-soft);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 .stage-era {
-  font-size: 11px;
-  opacity: 0.7;
-  margin-bottom: 4px;
+  font-size: 0.7rem;
+  color: var(--vp-c-text-3);
+  margin-bottom: 0.25rem;
 }
 
 .stage-icon {
-  font-size: 32px;
-  margin-bottom: 8px;
+  font-size: 1.5rem;
+  margin-bottom: 0.5rem;
 }
 
 .stage-name {
-  font-size: 14px;
+  font-size: 0.85rem;
   font-weight: 600;
-  margin-bottom: 2px;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.25rem;
 }
 
 .stage-arch {
-  font-size: 11px;
-  opacity: 0.7;
+  font-size: 0.7rem;
+  color: var(--vp-c-text-3);
 }
 
 .stage-detail {
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: 12px;
-  padding: 24px;
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  padding: 1rem;
 }
 
 .detail-panel {
@@ -208,56 +225,76 @@ const stages = [
 .detail-header {
   display: flex;
   align-items: center;
-  gap: 12px;
-  margin-bottom: 20px;
-  padding-bottom: 16px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--vp-c-divider);
 }
 
 .detail-icon {
-  font-size: 32px;
+  font-size: 1.5rem;
 }
 
 .detail-header h4 {
-  font-size: 20px;
+  font-size: 1rem;
   font-weight: 600;
   margin: 0;
+  color: var(--vp-c-text-1);
 }
 
 .detail-content {
   display: grid;
-  gap: 16px;
+  gap: 0.75rem;
 }
 
 .detail-section h5 {
-  font-size: 14px;
+  font-size: 0.85rem;
   font-weight: 600;
-  margin: 0 0 8px 0;
-  color: #ffd700;
+  margin: 0 0 0.5rem 0;
+  color: var(--vp-c-brand);
 }
 
 .detail-section p {
-  font-size: 13px;
+  font-size: 0.8rem;
   line-height: 1.6;
-  margin: 0;
-  opacity: 0.9;
+  margin: 0 0 0.5rem 0;
+  color: var(--vp-c-text-2);
 }
 
 .detail-section ul {
   margin: 0;
-  padding-left: 18px;
+  padding-left: 1rem;
 }
 
 .detail-section li {
-  font-size: 13px;
+  font-size: 0.8rem;
   line-height: 1.6;
-  margin-bottom: 4px;
-  opacity: 0.9;
+  margin-bottom: 0.25rem;
+  color: var(--vp-c-text-2);
+}
+
+.info-box {
+  background: var(--vp-c-bg-alt);
+  padding: 0.75rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  margin-top: 1rem;
+  display: flex;
+  gap: 0.25rem;
+}
+
+.info-box .icon {
+  flex-shrink: 0;
+}
+
+.info-box strong {
+  color: var(--vp-c-text-1);
 }
 
 .fade-enter-active,
 .fade-leave-active {
-  transition: all 0.4s ease;
+  transition: all 0.3s ease;
 }
 
 .fade-enter-from {
@@ -275,8 +312,8 @@ const stages = [
     grid-template-columns: repeat(2, 1fr);
   }
 
-  .stage-detail {
-    padding: 16px;
+  .detail-content {
+    grid-template-columns: 1fr;
   }
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/backend-evolution/MonolithDemo.vue b/docs/.vitepress/theme/components/appendix/backend-evolution/MonolithDemo.vue
index 25c0e6f..0ca6831 100644
--- a/docs/.vitepress/theme/components/appendix/backend-evolution/MonolithDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/backend-evolution/MonolithDemo.vue
@@ -1,8 +1,9 @@
 <template>
   <div class="monolith-demo">
     <div class="demo-header">
-      <h4>🏢 单体架构演示</h4>
-      <p>观察单体应用如何处理请求，以及模块间的依赖关系</p>
+      <span class="icon">🏢</span>
+      <span class="title">单体架构演示</span>
+      <span class="subtitle">观察单体应用如何处理请求</span>
     </div>
 
     <div class="monolith-diagram">
@@ -47,13 +48,9 @@
       <button class="control-btn" @click="reset">重置</button>
     </div>
 
-    <div class="demo-explanation">
-      <h5>💡 单体架构的特点</h5>
-      <ul>
-        <li><strong>共享进程空间</strong>：所有模块在同一个进程中运行，内存共享</li>
-        <li><strong>数据库耦合</strong>：所有模块共享同一个数据库，Schema变更影响全局</li>
-        <li><strong>级联故障</strong>：一个模块崩溃可能导致整个进程挂掉（雪崩效应）</li>
-      </ul>
+    <div class="info-box">
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>所有模块在同一个进程中运行，内存共享，但一个模块崩溃可能导致整个进程挂掉（雪崩效应）。
     </div>
   </div>
 </template>
@@ -136,24 +133,35 @@ const reset = () => {
   border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
   background: var(--vp-c-bg-soft);
-  padding: 1.5rem;
+  padding: 1rem;
   margin: 1rem 0;
+  max-height: 600px;
+  overflow-y: auto;
 }
 
 .demo-header {
-  margin-bottom: 1.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--vp-c-divider);
 }
 
-.demo-header h4 {
-  margin: 0 0 0.5rem 0;
-  font-size: 1.1rem;
+.demo-header .icon {
+  font-size: 1.25rem;
+}
+
+.demo-header .title {
+  font-weight: bold;
+  font-size: 1rem;
   color: var(--vp-c-text-1);
 }
 
-.demo-header p {
-  margin: 0;
-  font-size: 0.9rem;
+.demo-header .subtitle {
   color: var(--vp-c-text-2);
+  font-size: 0.85rem;
+  margin-left: 0.5rem;
 }
 
 .monolith-diagram {
@@ -378,4 +386,23 @@ const reset = () => {
     flex-wrap: wrap;
   }
 }
+
+.info-box {
+  background: var(--vp-c-bg-alt);
+  padding: 0.75rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  margin-top: 1rem;
+  display: flex;
+  gap: 0.25rem;
+}
+
+.info-box .icon {
+  flex-shrink: 0;
+}
+
+.info-box strong {
+  color: var(--vp-c-text-1);
+}
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/backend-evolution/PhysicalServerDemo.vue b/docs/.vitepress/theme/components/appendix/backend-evolution/PhysicalServerDemo.vue
index 4e99281..c5ee914 100644
--- a/docs/.vitepress/theme/components/appendix/backend-evolution/PhysicalServerDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/backend-evolution/PhysicalServerDemo.vue
@@ -1,8 +1,9 @@
 <template>
   <div class="physical-server-demo">
     <div class="demo-header">
-      <h4>🖥️ 物理服务器时代演示</h4>
-      <p>点击"发送请求"，观察早期 CGI 服务器的处理瓶颈</p>
+      <span class="icon">🖥️</span>
+      <span class="title">物理服务器时代演示</span>
+      <span class="subtitle">观察早期 CGI 服务器的处理瓶颈</span>
     </div>
 
     <div class="demo-stage">
@@ -85,27 +86,9 @@
       </div>
     </div>
 
-    <div class="demo-explanation">
-      <h5>💡 早期的痛点在哪里？</h5>
-      <ul>
-        <li>
-          <strong>进程启动开销</strong>：每个请求都要启动新的 CGI
-          进程，就像每来一个客人都要重新搭一个厨房
-        </li>
-        <li>
-          <strong>资源无法复用</strong>：数据库连接每次都要重新建立，CPU
-          频繁在进程间切换
-        </li>
-        <li>
-          <strong>扩展困难</strong>：只能买更强的单机（垂直扩展），无法通过增加机器分担压力
-        </li>
-      </ul>
-      <p class="demo-conclusion">
-        这就是<strong>物理服务器 + CGI</strong>时代的核心问题：<span
-          class="highlight"
-          >进程级隔离带来了稳定性，但也带来了巨大的性能开销</span
-        >。
-      </p>
+    <div class="info-box">
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>进程级隔离带来了稳定性，但也带来了巨大的性能开销。
     </div>
   </div>
 </template>
@@ -192,24 +175,35 @@ const sendRequest = async () => {
   border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
   background: var(--vp-c-bg-soft);
-  padding: 1.5rem;
+  padding: 1rem;
   margin: 1rem 0;
+  max-height: 600px;
+  overflow-y: auto;
 }
 
 .demo-header {
-  margin-bottom: 1.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--vp-c-divider);
 }
 
-.demo-header h4 {
-  margin: 0 0 0.5rem 0;
-  font-size: 1.1rem;
+.demo-header .icon {
+  font-size: 1.25rem;
+}
+
+.demo-header .title {
+  font-weight: bold;
+  font-size: 1rem;
   color: var(--vp-c-text-1);
 }
 
-.demo-header p {
-  margin: 0;
-  font-size: 0.9rem;
+.demo-header .subtitle {
   color: var(--vp-c-text-2);
+  font-size: 0.85rem;
+  margin-left: 0.5rem;
 }
 
 .demo-stage {
@@ -472,4 +466,23 @@ const sendRequest = async () => {
     height: 3px;
   }
 }
+
+.info-box {
+  background: var(--vp-c-bg-alt);
+  padding: 0.75rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  margin-top: 1rem;
+  display: flex;
+  gap: 0.25rem;
+}
+
+.info-box .icon {
+  flex-shrink: 0;
+}
+
+.info-box strong {
+  color: var(--vp-c-text-1);
+}
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/backend-evolution/TechStackTimelineDemo.vue b/docs/.vitepress/theme/components/appendix/backend-evolution/TechStackTimelineDemo.vue
index f6b1591..46de486 100644
--- a/docs/.vitepress/theme/components/appendix/backend-evolution/TechStackTimelineDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/backend-evolution/TechStackTimelineDemo.vue
@@ -1,8 +1,9 @@
 <template>
   <div class="tech-stack-timeline-demo">
     <div class="demo-header">
-      <h4>📚 技术栈演进时间线</h4>
-      <p>每个时代的主流技术栈</p>
+      <span class="icon">📚</span>
+      <span class="title">技术栈演进时间线</span>
+      <span class="subtitle">每个时代的主流技术栈</span>
     </div>
 
     <div class="timeline">
@@ -106,6 +107,8 @@ const eras = [
   background: var(--vp-c-bg-soft);
   padding: 1rem;
   margin: 1rem 0;
+  max-height: 600px;
+  overflow-y: auto;
 }
 
 .demo-header {
@@ -247,4 +250,23 @@ const eras = [
     grid-template-columns: 1fr;
   }
 }
+
+.info-box {
+  background: var(--vp-c-bg-alt);
+  padding: 0.75rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  margin-top: 1rem;
+  display: flex;
+  gap: 0.25rem;
+}
+
+.info-box .icon {
+  flex-shrink: 0;
+}
+
+.info-box strong {
+  color: var(--vp-c-text-1);
+}
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/canvas-intro/AnimationLoopDemo.vue b/docs/.vitepress/theme/components/appendix/canvas-intro/AnimationLoopDemo.vue
index b267b86..ef7eabb 100644
--- a/docs/.vitepress/theme/components/appendix/canvas-intro/AnimationLoopDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/canvas-intro/AnimationLoopDemo.vue
@@ -408,14 +408,15 @@ onUnmounted(() => {
 
 <style scoped>
 .animation-demo {
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
-  padding: 20px;
-  background: #fafafa;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 1.5rem;
+  background: var(--vp-c-bg-soft);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
 }
 
 .control-panel {
-  margin-bottom: 20px;
+  margin-bottom: 1.5rem;
 }
 
 .playback-controls {
@@ -426,13 +427,16 @@ onUnmounted(() => {
 
 .play-btn,
 .reset-btn {
-  padding: 10px 20px;
+  padding: 0.625rem 1.25rem;
   border: none;
-  border-radius: 6px;
-  font-size: 14px;
+  border-radius: 8px;
+  font-size: 0.875rem;
   font-weight: 600;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all 0.25s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
 }
 
 .play-btn {
@@ -442,7 +446,8 @@ onUnmounted(() => {
 
 .play-btn:hover {
   background: #27ae60;
-  transform: translateY(-1px);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(46, 204, 113, 0.4);
 }
 
 .reset-btn {
@@ -452,28 +457,35 @@ onUnmounted(() => {
 
 .reset-btn:hover {
   background: #7f8c8d;
-  transform: translateY(-1px);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(149, 165, 166, 0.4);
 }
 
 .animation-selector {
-  margin-bottom: 15px;
+  margin-bottom: 1.25rem;
 }
 
 .animation-selector label {
   display: block;
   font-weight: 600;
-  margin-bottom: 8px;
-  color: #2c3e50;
+  margin-bottom: 0.5rem;
+  color: var(--vp-c-text-1);
+  font-size: 0.875rem;
 }
 
 .animation-selector select {
   width: 100%;
-  padding: 8px 12px;
-  border: 2px solid #ddd;
-  border-radius: 6px;
-  font-size: 14px;
-  background: white;
+  padding: 0.5rem 0.75rem;
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 8px;
+  font-size: 0.875rem;
+  background: var(--vp-c-bg);
   cursor: pointer;
+  transition: all 0.2s;
+}
+
+.animation-selector select:hover {
+  border-color: var(--vp-c-brand);
 }
 
 .parameters {
@@ -531,30 +543,35 @@ onUnmounted(() => {
 .canvas-container {
   display: flex;
   justify-content: center;
-  margin: 20px 0;
-  padding: 20px;
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  margin: 1.5rem 0;
+  padding: 1.5rem;
+  background: var(--vp-c-bg);
+  border-radius: 12px;
+  border: 2px solid var(--vp-c-divider);
+  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
 }
 
 canvas {
-  border: 2px solid #ddd;
-  border-radius: 4px;
+  border: 3px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: #ffffff;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
 }
 
 .code-display {
-  margin-top: 20px;
-  padding: 15px;
-  background: #2c3e50;
-  border-radius: 6px;
+  margin-top: 1.5rem;
+  padding: 1.25rem;
+  background: #1e293b;
+  border-radius: 12px;
   overflow-x: auto;
+  border: 2px solid #334155;
 }
 
 .code-display h4 {
-  color: #ecf0f1;
-  margin: 0 0 10px 0;
-  font-size: 14px;
+  color: #f8fafc;
+  margin: 0 0 0.75rem 0;
+  font-size: 0.875rem;
+  font-weight: 600;
 }
 
 .code-display pre {
@@ -562,54 +579,60 @@ canvas {
 }
 
 .code-display code {
-  color: #ecf0f1;
-  font-family: 'Courier New', monospace;
-  font-size: 12px;
-  line-height: 1.6;
+  color: #e2e8f0;
+  font-family: var(--vp-font-family-mono);
+  font-size: 0.75rem;
+  line-height: 1.7;
 }
 
 .explanation {
-  margin: 20px 0;
-  padding: 15px;
-  background: white;
-  border-radius: 6px;
+  margin: 1.5rem 0;
+  padding: 1.25rem;
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  border: 1px solid var(--vp-c-divider);
 }
 
 .explanation h4 {
-  margin: 0 0 10px 0;
-  color: #2c3e50;
+  margin: 0 0 0.75rem 0;
+  color: var(--vp-c-text-1);
+  font-size: 0.875rem;
+  font-weight: 600;
 }
 
 .explanation ul {
   margin: 0;
-  padding-left: 20px;
+  padding-left: 1.25rem;
 }
 
 .explanation li {
-  margin-bottom: 8px;
-  color: #555;
-  font-size: 14px;
+  margin-bottom: 0.5rem;
+  color: var(--vp-c-text-2);
+  font-size: 0.875rem;
+  line-height: 1.6;
 }
 
 .info-box {
-  margin-top: 15px;
-  padding: 12px;
-  background: #fff3cd;
-  border-left: 4px solid #ffc107;
-  border-radius: 4px;
+  margin-top: 1.5rem;
+  padding: 1rem 1.25rem;
+  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+  border-radius: 12px;
+  border-left: 4px solid #f59e0b;
+  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
 }
 
 .info-box p {
   margin: 0;
-  font-size: 14px;
-  color: #856404;
+  font-size: 0.875rem;
+  color: #92400e;
   display: flex;
   align-items: flex-start;
-  gap: 8px;
+  gap: 0.5rem;
+  line-height: 1.6;
 }
 
 .info-box .icon {
-  font-size: 16px;
+  font-size: 1.125rem;
   flex-shrink: 0;
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/canvas-intro/CanvasBasicsDemo.vue b/docs/.vitepress/theme/components/appendix/canvas-intro/CanvasBasicsDemo.vue
index 0539726..5a25a97 100644
--- a/docs/.vitepress/theme/components/appendix/canvas-intro/CanvasBasicsDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/canvas-intro/CanvasBasicsDemo.vue
@@ -13,85 +13,89 @@
 -->
 <template>
   <div class="canvas-basics-demo">
-    <div class="control-panel">
-      <div class="shape-selector">
-        <label>Shape / 形状</label>
-        <div class="button-group">
-          <button
-            v-for="shape in shapes"
-            :key="shape.value"
-            :class="{ active: currentShape === shape.value }"
-            @click="currentShape = shape.value"
-          >
-            {{ shape.label }}
-          </button>
-        </div>
-      </div>
-
-      <div class="parameters">
-        <div class="param-row">
-          <label>Fill Color / 填充颜色</label>
-          <input type="color" v-model="fillColor" />
-        </div>
-
-        <div class="param-row">
-          <label>Stroke Color / 描边颜色</label>
-          <input type="color" v-model="strokeColor" />
-        </div>
-
-        <div class="param-row">
-          <label>Stroke Width / 描边宽度: {{ strokeWidth }}px</label>
-          <input type="range" v-model.number="strokeWidth" min="1" max="20" />
-        </div>
-
-        <div class="param-row" v-if="currentShape === 'rect'">
-          <label>Size / 大小: {{ rectSize }}px</label>
-          <input type="range" v-model.number="rectSize" min="20" max="200" />
-        </div>
-
-        <div class="param-row" v-if="currentShape === 'circle'">
-          <label>Radius / 半径: {{ circleRadius }}px</label>
-          <input
-            type="range"
-            v-model.number="circleRadius"
-            min="10"
-            max="150"
-          />
-        </div>
-
-        <div class="param-row" v-if="currentShape === 'line'">
-          <label>Line Length / 线条长度: {{ lineLength }}px</label>
-          <input type="range" v-model.number="lineLength" min="50" max="300" />
-        </div>
-      </div>
-
-      <button class="draw-btn" @click="draw">
-        <span class="icon">🎨</span>
-        Draw / 绘制
-      </button>
-
-      <button class="clear-btn" @click="clearCanvas">
-        <span class="icon">🗑️</span>
-        Clear / 清除
-      </button>
+    <div class="demo-header">
+      <span class="icon">🎨</span>
+      <span class="title">Canvas 基础</span>
+      <span class="subtitle">用代码画图（通俗说：编程画板）</span>
     </div>
 
-    <div class="canvas-container">
-      <canvas ref="canvasRef" width="600" height="400"></canvas>
-    </div>
+    <div class="demo-content">
+      <div class="controls">
+        <div class="shape-selector">
+          <label>Shape / 形状</label>
+          <div class="button-group">
+            <button
+              v-for="shape in shapes"
+              :key="shape.value"
+              :class="{ active: currentShape === shape.value }"
+              @click="currentShape = shape.value"
+            >
+              {{ shape.label }}
+            </button>
+          </div>
+        </div>
 
-    <div class="code-display">
-      <h4>Code / 代码</h4>
-      <pre><code>{{ currentCode }}</code></pre>
+        <div class="parameters">
+          <div class="param-row">
+            <label>Fill Color / 填充颜色</label>
+            <input type="color" v-model="fillColor" />
+          </div>
+
+          <div class="param-row">
+            <label>Stroke Color / 描边颜色</label>
+            <input type="color" v-model="strokeColor" />
+          </div>
+
+          <div class="param-row">
+            <label>Stroke Width / 描边宽度: {{ strokeWidth }}px</label>
+            <input type="range" v-model.number="strokeWidth" min="1" max="20" />
+          </div>
+
+          <div class="param-row" v-if="currentShape === 'rect'">
+            <label>Size / 大小: {{ rectSize }}px</label>
+            <input type="range" v-model.number="rectSize" min="20" max="200" />
+          </div>
+
+          <div class="param-row" v-if="currentShape === 'circle'">
+            <label>Radius / 半径: {{ circleRadius }}px</label>
+            <input
+              type="range"
+              v-model.number="circleRadius"
+              min="10"
+              max="150"
+            />
+          </div>
+
+          <div class="param-row" v-if="currentShape === 'line'">
+            <label>Line Length / 线条长度: {{ lineLength }}px</label>
+            <input type="range" v-model.number="lineLength" min="50" max="300" />
+          </div>
+        </div>
+
+        <button class="draw-btn" @click="draw">
+          <span class="icon">🎨</span>
+          Draw / 绘制
+        </button>
+
+        <button class="clear-btn" @click="clearCanvas">
+          <span class="icon">🗑️</span>
+          Clear / 清除
+        </button>
+      </div>
+
+      <div class="canvas-container">
+        <canvas ref="canvasRef" width="600" height="400"></canvas>
+      </div>
+
+      <div class="code-display">
+        <h4>Code / 代码</h4>
+        <pre><code>{{ currentCode }}</code></pre>
+      </div>
     </div>
 
     <div class="info-box">
-      <p>
-        <span class="icon">💡</span>
-        <strong>提示：</strong>
-        Canvas
-        是一个位图画布，所有绘制都是像素操作。绘制后无法修改已有内容，只能覆盖或清除重绘。
-      </p>
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>Canvas 是一个位图画布，所有绘制都是像素操作。绘制后无法修改已有内容，只能覆盖或清除重绘。
     </div>
   </div>
 </template>
@@ -101,8 +105,8 @@ import { ref, computed, watch, onMounted } from 'vue'
 
 const canvasRef = ref(null)
 const currentShape = ref('rect')
-const fillColor = ref('#3498db')
-const strokeColor = ref('#2c3e50')
+const fillColor = ref('#3b82f6')
+const strokeColor = ref('#1e293b')
 const strokeWidth = ref(2)
 const rectSize = ref(100)
 const circleRadius = ref(50)
@@ -231,145 +235,193 @@ onMounted(() => {
 
 <style scoped>
 .canvas-basics-demo {
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
-  padding: 20px;
-  background: #fafafa;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  background: var(--vp-c-bg-soft);
+  padding: 1.5rem;
+  margin: 1.5rem 0;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
 }
 
-.control-panel {
-  margin-bottom: 20px;
+.demo-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 1.25rem;
+  padding-bottom: 1rem;
+  border-bottom: 2px solid var(--vp-c-divider);
+}
+
+.demo-header .icon {
+  font-size: 1.5rem;
+}
+
+.demo-header .title {
+  font-weight: 700;
+  font-size: 1.125rem;
+  color: var(--vp-c-text-1);
+}
+
+.demo-header .subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.875rem;
+  margin-left: 0.75rem;
+  padding: 0.25rem 0.75rem;
+  background: var(--vp-c-brand);
+  color: white;
+  border-radius: 20px;
+  font-weight: 500;
+}
+
+.demo-content {
+  margin-bottom: 0.5rem;
+}
+
+.controls {
+  margin-bottom: 1rem;
 }
 
 .shape-selector {
-  margin-bottom: 15px;
+  margin-bottom: 1.25rem;
 }
 
 .shape-selector label {
   display: block;
   font-weight: 600;
-  margin-bottom: 8px;
-  color: #2c3e50;
+  margin-bottom: 0.625rem;
+  color: var(--vp-c-text-1);
+  font-size: 0.875rem;
 }
 
 .button-group {
   display: flex;
-  gap: 8px;
+  gap: 0.625rem;
   flex-wrap: wrap;
 }
 
 .button-group button {
-  padding: 8px 16px;
-  border: 2px solid #ddd;
-  background: white;
-  border-radius: 6px;
+  padding: 0.625rem 1.25rem;
+  border: 2px solid var(--vp-c-divider);
+  background: var(--vp-c-bg);
+  border-radius: 8px;
   cursor: pointer;
-  font-size: 14px;
-  transition: all 0.2s;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: all 0.25s ease;
 }
 
 .button-group button:hover {
-  border-color: #3498db;
-  background: #f0f8ff;
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-bg-soft);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 .button-group button.active {
-  border-color: #3498db;
-  background: #3498db;
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-brand);
   color: white;
+  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
 }
 
 .parameters {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 12px;
-  margin-bottom: 15px;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
 }
 
 .param-row {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 0.25rem;
 }
 
 .param-row label {
-  font-size: 13px;
+  font-size: 0.75rem;
   font-weight: 500;
-  color: #555;
+  color: var(--vp-c-text-1);
 }
 
 .param-row input[type='range'] {
   width: 100%;
+  accent-color: var(--vp-c-brand);
 }
 
 .param-row input[type='color'] {
   width: 100%;
-  height: 36px;
-  border: 1px solid #ddd;
+  height: 32px;
+  border: 1px solid var(--vp-c-divider);
   border-radius: 4px;
   cursor: pointer;
 }
 
 .draw-btn,
 .clear-btn {
-  padding: 10px 20px;
+  padding: 0.5rem 1rem;
   border: none;
   border-radius: 6px;
-  font-size: 14px;
+  font-size: 0.85rem;
   font-weight: 600;
   cursor: pointer;
-  margin-right: 10px;
+  margin-right: 0.5rem;
   transition: all 0.2s;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
 }
 
 .draw-btn {
-  background: #3498db;
+  background: var(--vp-c-brand);
   color: white;
 }
 
 .draw-btn:hover {
-  background: #2980b9;
-  transform: translateY(-1px);
+  opacity: 0.9;
 }
 
 .clear-btn {
-  background: #e74c3c;
+  background: var(--vp-c-danger);
   color: white;
 }
 
 .clear-btn:hover {
-  background: #c0392b;
-  transform: translateY(-1px);
+  opacity: 0.9;
 }
 
 .canvas-container {
   display: flex;
   justify-content: center;
-  margin: 20px 0;
-  padding: 20px;
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  margin: 1.5rem 0;
+  padding: 1.5rem;
+  background: var(--vp-c-bg);
+  border-radius: 12px;
+  border: 2px solid var(--vp-c-divider);
+  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
 }
 
 canvas {
-  border: 2px solid #ddd;
-  border-radius: 4px;
-  background: white;
+  border: 3px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: #ffffff;
+  max-width: 100%;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
 }
 
 .code-display {
-  margin-top: 20px;
-  padding: 15px;
-  background: #2c3e50;
-  border-radius: 6px;
+  margin-top: 1.5rem;
+  padding: 1.25rem;
+  background: #1e293b;
+  border-radius: 12px;
   overflow-x: auto;
+  border: 2px solid #334155;
 }
 
 .code-display h4 {
-  color: #ecf0f1;
-  margin: 0 0 10px 0;
-  font-size: 14px;
+  color: #f8fafc;
+  margin: 0 0 0.75rem 0;
+  font-size: 0.875rem;
+  font-weight: 600;
 }
 
 .code-display pre {
@@ -377,31 +429,39 @@ canvas {
 }
 
 .code-display code {
-  color: #ecf0f1;
-  font-family: 'Courier New', monospace;
-  font-size: 12px;
-  line-height: 1.6;
+  color: #e2e8f0;
+  font-family: var(--vp-font-family-mono);
+  font-size: 0.75rem;
+  line-height: 1.7;
 }
 
 .info-box {
-  margin-top: 15px;
-  padding: 12px;
-  background: #fff3cd;
-  border-left: 4px solid #ffc107;
-  border-radius: 4px;
+  margin-top: 1.5rem;
+  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+  padding: 1rem 1.25rem;
+  border-radius: 12px;
+  font-size: 0.875rem;
+  color: #92400e;
+  border-left: 4px solid #f59e0b;
+  display: flex;
+  gap: 0.5rem;
+  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
 }
 
 .info-box p {
   margin: 0;
-  font-size: 14px;
-  color: #856404;
   display: flex;
   align-items: flex-start;
-  gap: 8px;
+  gap: 0.625rem;
+  line-height: 1.6;
 }
 
 .info-box .icon {
-  font-size: 16px;
+  font-size: 1.125rem;
   flex-shrink: 0;
 }
+
+.info-box strong {
+  color: #78350f;
+}
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/canvas-intro/CoordinateSystemDemo.vue b/docs/.vitepress/theme/components/appendix/canvas-intro/CoordinateSystemDemo.vue
index d2f7259..d064ca8 100644
--- a/docs/.vitepress/theme/components/appendix/canvas-intro/CoordinateSystemDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/canvas-intro/CoordinateSystemDemo.vue
@@ -272,117 +272,140 @@ onMounted(() => {
 
 <style scoped>
 .coordinate-demo {
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
-  padding: 20px;
-  background: #fafafa;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 1.5rem;
+  background: var(--vp-c-bg-soft);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
 }
 
 .control-panel {
-  margin-bottom: 20px;
+  margin-bottom: 1.5rem;
 }
 
 .toggle-group {
   display: flex;
   flex-wrap: wrap;
-  gap: 15px;
-  margin-bottom: 15px;
+  gap: 1rem;
+  margin-bottom: 1.25rem;
 }
 
 .toggle-option {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 0.5rem;
   cursor: pointer;
-  font-size: 14px;
+  font-size: 0.875rem;
+  padding: 0.5rem 1rem;
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  transition: all 0.2s;
+}
+
+.toggle-option:hover {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-bg-soft);
 }
 
 .toggle-option input[type='checkbox'] {
   width: 18px;
   height: 18px;
   cursor: pointer;
+  accent-color: var(--vp-c-brand);
 }
 
 .info-display {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 10px;
-  padding: 12px;
-  background: white;
-  border-radius: 6px;
+  gap: 0.75rem;
+  padding: 1rem;
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  border: 1px solid var(--vp-c-divider);
 }
 
 .info-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  font-size: 13px;
+  font-size: 0.875rem;
 }
 
 .info-item .label {
   font-weight: 600;
-  color: #555;
+  color: var(--vp-c-text-2);
 }
 
 .info-item .value {
-  font-family: 'Courier New', monospace;
-  color: #2c3e50;
-  background: #f0f0f0;
-  padding: 2px 8px;
-  border-radius: 4px;
+  font-family: var(--vp-font-family-mono);
+  color: var(--vp-c-text-1);
+  background: var(--vp-c-bg-soft);
+  padding: 0.25rem 0.75rem;
+  border-radius: 6px;
+  font-weight: 600;
 }
 
 .canvas-container {
   display: flex;
   justify-content: center;
-  margin: 20px 0;
-  padding: 20px;
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  margin: 1.5rem 0;
+  padding: 1.5rem;
+  background: var(--vp-c-bg);
+  border-radius: 12px;
+  border: 2px solid var(--vp-c-divider);
+  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
 }
 
 canvas {
-  border: 2px solid #ddd;
-  border-radius: 4px;
+  border: 3px solid var(--vp-c-divider);
+  border-radius: 8px;
   cursor: crosshair;
+  background: #ffffff;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
 }
 
 .explanation {
-  margin: 20px 0;
-  padding: 15px;
-  background: white;
-  border-radius: 6px;
+  margin: 1.5rem 0;
+  padding: 1.25rem;
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  border: 1px solid var(--vp-c-divider);
 }
 
 .explanation h4 {
-  margin: 0 0 10px 0;
-  color: #2c3e50;
+  margin: 0 0 0.75rem 0;
+  color: var(--vp-c-text-1);
+  font-size: 0.875rem;
+  font-weight: 600;
 }
 
 .explanation ul {
   margin: 0;
-  padding-left: 20px;
+  padding-left: 1.25rem;
 }
 
 .explanation li {
-  margin-bottom: 8px;
-  color: #555;
-  font-size: 14px;
+  margin-bottom: 0.5rem;
+  color: var(--vp-c-text-2);
+  font-size: 0.875rem;
+  line-height: 1.6;
 }
 
 .code-display {
-  margin-top: 20px;
-  padding: 15px;
-  background: #2c3e50;
-  border-radius: 6px;
+  margin-top: 1.5rem;
+  padding: 1.25rem;
+  background: #1e293b;
+  border-radius: 12px;
   overflow-x: auto;
+  border: 2px solid #334155;
 }
 
 .code-display h4 {
-  color: #ecf0f1;
-  margin: 0 0 10px 0;
-  font-size: 14px;
+  color: #f8fafc;
+  margin: 0 0 0.75rem 0;
+  font-size: 0.875rem;
+  font-weight: 600;
 }
 
 .code-display pre {
@@ -390,31 +413,33 @@ canvas {
 }
 
 .code-display code {
-  color: #ecf0f1;
-  font-family: 'Courier New', monospace;
-  font-size: 12px;
-  line-height: 1.6;
+  color: #e2e8f0;
+  font-family: var(--vp-font-family-mono);
+  font-size: 0.75rem;
+  line-height: 1.7;
 }
 
 .info-box {
-  margin-top: 15px;
-  padding: 12px;
-  background: #fff3cd;
-  border-left: 4px solid #ffc107;
-  border-radius: 4px;
+  margin-top: 1.5rem;
+  padding: 1rem 1.25rem;
+  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+  border-radius: 12px;
+  border-left: 4px solid #f59e0b;
+  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
 }
 
 .info-box p {
   margin: 0;
-  font-size: 14px;
-  color: #856404;
+  font-size: 0.875rem;
+  color: #92400e;
   display: flex;
   align-items: flex-start;
-  gap: 8px;
+  gap: 0.5rem;
+  line-height: 1.6;
 }
 
 .info-box .icon {
-  font-size: 16px;
+  font-size: 1.125rem;
   flex-shrink: 0;
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/canvas-intro/EventHandlingDemo.vue b/docs/.vitepress/theme/components/appendix/canvas-intro/EventHandlingDemo.vue
index fdef10f..1b360e6 100644
--- a/docs/.vitepress/theme/components/appendix/canvas-intro/EventHandlingDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/canvas-intro/EventHandlingDemo.vue
@@ -491,14 +491,15 @@ onMounted(() => {
 
 <style scoped>
 .event-demo {
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
-  padding: 20px;
-  background: #fafafa;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 1.5rem;
+  background: var(--vp-c-bg-soft);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
 }
 
 .control-panel {
-  margin-bottom: 20px;
+  margin-bottom: 1.5rem;
 }
 
 .mode-selector {
@@ -514,53 +515,60 @@ onMounted(() => {
 
 .button-group {
   display: flex;
-  gap: 8px;
+  gap: 0.5rem;
   flex-wrap: wrap;
 }
 
 .button-group button {
-  padding: 8px 16px;
-  border: 2px solid #ddd;
-  background: white;
-  border-radius: 6px;
+  padding: 0.5rem 1rem;
+  border: 2px solid var(--vp-c-divider);
+  background: var(--vp-c-bg);
+  border-radius: 8px;
   cursor: pointer;
-  font-size: 14px;
-  transition: all 0.2s;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: all 0.25s ease;
 }
 
 .button-group button:hover {
-  border-color: #3498db;
-  background: #f0f8ff;
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-bg-soft);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 .button-group button.active {
-  border-color: #3498db;
-  background: #3498db;
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-brand);
   color: white;
+  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
 }
 
 .instructions {
-  margin-bottom: 15px;
-  padding: 12px;
-  background: white;
-  border-radius: 6px;
+  margin-bottom: 1rem;
+  padding: 1rem;
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  border: 1px solid var(--vp-c-divider);
 }
 
 .instructions h4 {
-  margin: 0 0 8px 0;
-  color: #2c3e50;
-  font-size: 14px;
+  margin: 0 0 0.5rem 0;
+  color: var(--vp-c-text-1);
+  font-size: 0.875rem;
+  font-weight: 600;
 }
 
 .instructions ul {
   margin: 0;
-  padding-left: 20px;
+  padding-left: 1.25rem;
 }
 
 .instructions li {
-  margin-bottom: 6px;
-  color: #555;
-  font-size: 13px;
+  margin-bottom: 0.375rem;
+  color: var(--vp-c-text-2);
+  font-size: 0.813rem;
+  line-height: 1.5;
 }
 
 .event-log {
@@ -635,36 +643,41 @@ onMounted(() => {
 .canvas-container {
   display: flex;
   justify-content: center;
-  margin: 20px 0;
-  padding: 20px;
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  margin: 1.5rem 0;
+  padding: 1.5rem;
+  background: var(--vp-c-bg);
+  border-radius: 12px;
+  border: 2px solid var(--vp-c-divider);
+  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
 }
 
 canvas {
-  border: 2px solid #ddd;
-  border-radius: 4px;
+  border: 3px solid var(--vp-c-divider);
+  border-radius: 8px;
   cursor: crosshair;
   outline: none;
+  background: #ffffff;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
 }
 
 canvas:focus {
-  border-color: #3498db;
+  border-color: var(--vp-c-brand);
 }
 
 .code-display {
-  margin-top: 20px;
-  padding: 15px;
-  background: #2c3e50;
-  border-radius: 6px;
+  margin-top: 1.5rem;
+  padding: 1.25rem;
+  background: #1e293b;
+  border-radius: 12px;
   overflow-x: auto;
+  border: 2px solid #334155;
 }
 
 .code-display h4 {
-  color: #ecf0f1;
-  margin: 0 0 10px 0;
-  font-size: 14px;
+  color: #f8fafc;
+  margin: 0 0 0.75rem 0;
+  font-size: 0.875rem;
+  font-weight: 600;
 }
 
 .code-display pre {
@@ -672,32 +685,36 @@ canvas:focus {
 }
 
 .code-display code {
-  color: #ecf0f1;
-  font-family: 'Courier New', monospace;
-  font-size: 12px;
-  line-height: 1.6;
+  color: #e2e8f0;
+  font-family: var(--vp-font-family-mono);
+  font-size: 0.75rem;
+  line-height: 1.7;
 }
 
 .explanation {
-  margin: 20px 0;
-  padding: 15px;
-  background: white;
-  border-radius: 6px;
+  margin: 1.5rem 0;
+  padding: 1.25rem;
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  border: 1px solid var(--vp-c-divider);
 }
 
 .explanation h4 {
-  margin: 0 0 10px 0;
-  color: #2c3e50;
+  margin: 0 0 0.75rem 0;
+  color: var(--vp-c-text-1);
+  font-size: 0.875rem;
+  font-weight: 600;
 }
 
 .explanation ul {
   margin: 0;
-  padding-left: 20px;
+  padding-left: 1.25rem;
 }
 
 .explanation li {
-  margin-bottom: 8px;
-  color: #555;
-  font-size: 14px;
+  margin-bottom: 0.5rem;
+  color: var(--vp-c-text-2);
+  font-size: 0.875rem;
+  line-height: 1.6;
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/canvas-intro/ParticleSystemDemo.vue b/docs/.vitepress/theme/components/appendix/canvas-intro/ParticleSystemDemo.vue
index 44a002d..cca10d4 100644
--- a/docs/.vitepress/theme/components/appendix/canvas-intro/ParticleSystemDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/canvas-intro/ParticleSystemDemo.vue
@@ -378,14 +378,15 @@ onUnmounted(() => {
 
 <style scoped>
 .particle-demo {
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
-  padding: 20px;
-  background: #fafafa;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 1.5rem;
+  background: var(--vp-c-bg-soft);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
 }
 
 .control-panel {
-  margin-bottom: 20px;
+  margin-bottom: 1.5rem;
 }
 
 .effect-selector {
@@ -401,29 +402,33 @@ onUnmounted(() => {
 
 .button-group {
   display: flex;
-  gap: 8px;
+  gap: 0.5rem;
   flex-wrap: wrap;
 }
 
 .button-group button {
-  padding: 8px 16px;
-  border: 2px solid #ddd;
-  background: white;
-  border-radius: 6px;
+  padding: 0.5rem 1rem;
+  border: 2px solid var(--vp-c-divider);
+  background: var(--vp-c-bg);
+  border-radius: 8px;
   cursor: pointer;
-  font-size: 14px;
-  transition: all 0.2s;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: all 0.25s ease;
 }
 
 .button-group button:hover {
-  border-color: #3498db;
-  background: #f0f8ff;
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-bg-soft);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 .button-group button.active {
-  border-color: #3498db;
-  background: #3498db;
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-brand);
   color: white;
+  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
 }
 
 .parameters {
@@ -499,31 +504,36 @@ onUnmounted(() => {
 .canvas-container {
   display: flex;
   justify-content: center;
-  margin: 20px 0;
-  padding: 20px;
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  margin: 1.5rem 0;
+  padding: 1.5rem;
+  background: var(--vp-c-bg);
+  border-radius: 12px;
+  border: 2px solid var(--vp-c-divider);
+  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
 }
 
 canvas {
-  border: 2px solid #ddd;
-  border-radius: 4px;
+  border: 3px solid var(--vp-c-divider);
+  border-radius: 8px;
   cursor: crosshair;
+  background: #ffffff;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
 }
 
 .code-display {
-  margin-top: 20px;
-  padding: 15px;
-  background: #2c3e50;
-  border-radius: 6px;
+  margin-top: 1.5rem;
+  padding: 1.25rem;
+  background: #1e293b;
+  border-radius: 12px;
   overflow-x: auto;
+  border: 2px solid #334155;
 }
 
 .code-display h4 {
-  color: #ecf0f1;
-  margin: 0 0 10px 0;
-  font-size: 14px;
+  color: #f8fafc;
+  margin: 0 0 0.75rem 0;
+  font-size: 0.875rem;
+  font-weight: 600;
 }
 
 .code-display pre {
@@ -531,54 +541,60 @@ canvas {
 }
 
 .code-display code {
-  color: #ecf0f1;
-  font-family: 'Courier New', monospace;
-  font-size: 12px;
-  line-height: 1.6;
+  color: #e2e8f0;
+  font-family: var(--vp-font-family-mono);
+  font-size: 0.75rem;
+  line-height: 1.7;
 }
 
 .explanation {
-  margin: 20px 0;
-  padding: 15px;
-  background: white;
-  border-radius: 6px;
+  margin: 1.5rem 0;
+  padding: 1.25rem;
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  border: 1px solid var(--vp-c-divider);
 }
 
 .explanation h4 {
-  margin: 0 0 10px 0;
-  color: #2c3e50;
+  margin: 0 0 0.75rem 0;
+  color: var(--vp-c-text-1);
+  font-size: 0.875rem;
+  font-weight: 600;
 }
 
 .explanation ul {
   margin: 0;
-  padding-left: 20px;
+  padding-left: 1.25rem;
 }
 
 .explanation li {
-  margin-bottom: 8px;
-  color: #555;
-  font-size: 14px;
+  margin-bottom: 0.5rem;
+  color: var(--vp-c-text-2);
+  font-size: 0.875rem;
+  line-height: 1.6;
 }
 
 .info-box {
-  margin-top: 15px;
-  padding: 12px;
-  background: #fff3cd;
-  border-left: 4px solid #ffc107;
-  border-radius: 4px;
+  margin-top: 1.5rem;
+  padding: 1rem 1.25rem;
+  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+  border-radius: 12px;
+  border-left: 4px solid #f59e0b;
+  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
 }
 
 .info-box p {
   margin: 0;
-  font-size: 14px;
-  color: #856404;
+  font-size: 0.875rem;
+  color: #92400e;
   display: flex;
   align-items: flex-start;
-  gap: 8px;
+  gap: 0.5rem;
+  line-height: 1.6;
 }
 
 .info-box .icon {
-  font-size: 16px;
+  font-size: 1.125rem;
   flex-shrink: 0;
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/canvas-intro/PerformanceDemo.vue b/docs/.vitepress/theme/components/appendix/canvas-intro/PerformanceDemo.vue
index 324f11f..6a152aa 100644
--- a/docs/.vitepress/theme/components/appendix/canvas-intro/PerformanceDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/canvas-intro/PerformanceDemo.vue
@@ -553,14 +553,15 @@ onUnmounted(() => {
 
 <style scoped>
 .performance-demo {
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
-  padding: 20px;
-  background: #fafafa;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  padding: 1.5rem;
+  background: var(--vp-c-bg-soft);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
 }
 
 .control-panel {
-  margin-bottom: 20px;
+  margin-bottom: 1.5rem;
 }
 
 .test-selector {
@@ -576,29 +577,33 @@ onUnmounted(() => {
 
 .button-group {
   display: flex;
-  gap: 8px;
+  gap: 0.5rem;
   flex-wrap: wrap;
 }
 
 .button-group button {
-  padding: 8px 16px;
-  border: 2px solid #ddd;
-  background: white;
-  border-radius: 6px;
+  padding: 0.5rem 1rem;
+  border: 2px solid var(--vp-c-divider);
+  background: var(--vp-c-bg);
+  border-radius: 8px;
   cursor: pointer;
-  font-size: 14px;
-  transition: all 0.2s;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: all 0.25s ease;
 }
 
 .button-group button:hover {
-  border-color: #3498db;
-  background: #f0f8ff;
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-bg-soft);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 .button-group button.active {
-  border-color: #3498db;
-  background: #3498db;
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-brand);
   color: white;
+  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
 }
 
 .parameters {
@@ -721,28 +726,34 @@ onUnmounted(() => {
 .canvas-container {
   display: flex;
   justify-content: center;
-  margin: 20px 0;
-  padding: 20px;
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  margin: 1.5rem 0;
+  padding: 1.5rem;
+  background: var(--vp-c-bg);
+  border-radius: 12px;
+  border: 2px solid var(--vp-c-divider);
+  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
 }
 
 canvas {
-  border: 2px solid #ddd;
-  border-radius: 4px;
+  border: 3px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: #ffffff;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
 }
 
 .comparison {
-  margin: 20px 0;
-  padding: 15px;
-  background: white;
-  border-radius: 6px;
+  margin: 1.5rem 0;
+  padding: 1.25rem;
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  border: 1px solid var(--vp-c-divider);
 }
 
 .comparison h4 {
-  margin: 0 0 15px 0;
-  color: #2c3e50;
+  margin: 0 0 1rem 0;
+  color: var(--vp-c-text-1);
+  font-size: 0.875rem;
+  font-weight: 600;
 }
 
 .comparison-table {
@@ -756,29 +767,37 @@ canvas {
 
 .comparison-table th,
 .comparison-table td {
-  padding: 10px;
+  padding: 0.625rem;
   text-align: left;
-  border-bottom: 1px solid #e0e0e0;
+  border-bottom: 1px solid var(--vp-c-divider);
 }
 
 .comparison-table th {
-  background: #f8f9fa;
+  background: var(--vp-c-bg-soft);
   font-weight: 600;
-  color: #2c3e50;
+  color: var(--vp-c-text-1);
+  font-size: 0.813rem;
+}
+
+.comparison-table td {
+  font-size: 0.813rem;
+  color: var(--vp-c-text-2);
 }
 
 .code-display {
-  margin-top: 20px;
-  padding: 15px;
-  background: #2c3e50;
-  border-radius: 6px;
+  margin-top: 1.5rem;
+  padding: 1.25rem;
+  background: #1e293b;
+  border-radius: 12px;
   overflow-x: auto;
+  border: 2px solid #334155;
 }
 
 .code-display h4 {
-  color: #ecf0f1;
-  margin: 0 0 10px 0;
-  font-size: 14px;
+  color: #f8fafc;
+  margin: 0 0 0.75rem 0;
+  font-size: 0.875rem;
+  font-weight: 600;
 }
 
 .code-display pre {
@@ -786,32 +805,36 @@ canvas {
 }
 
 .code-display code {
-  color: #ecf0f1;
-  font-family: 'Courier New', monospace;
-  font-size: 12px;
-  line-height: 1.6;
+  color: #e2e8f0;
+  font-family: var(--vp-font-family-mono);
+  font-size: 0.75rem;
+  line-height: 1.7;
 }
 
 .explanation {
-  margin: 20px 0;
-  padding: 15px;
-  background: white;
-  border-radius: 6px;
+  margin: 1.5rem 0;
+  padding: 1.25rem;
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  border: 1px solid var(--vp-c-divider);
 }
 
 .explanation h4 {
-  margin: 0 0 10px 0;
-  color: #2c3e50;
+  margin: 0 0 0.75rem 0;
+  color: var(--vp-c-text-1);
+  font-size: 0.875rem;
+  font-weight: 600;
 }
 
 .explanation ul {
   margin: 0;
-  padding-left: 20px;
+  padding-left: 1.25rem;
 }
 
 .explanation li {
-  margin-bottom: 8px;
-  color: #555;
-  font-size: 14px;
+  margin-bottom: 0.5rem;
+  color: var(--vp-c-text-2);
+  font-size: 0.875rem;
+  line-height: 1.6;
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-iam/AccessKeyManagementDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-iam/AccessKeyManagementDemo.vue
index dfba066..2a75870 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-iam/AccessKeyManagementDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-iam/AccessKeyManagementDemo.vue
@@ -1,8 +1,9 @@
 <template>
   <div class="access-key-management-demo">
     <div class="demo-header">
-      <h4>访问密钥（AK/SK）生命周期管理</h4>
-      <p class="intro-text">模拟 AK/SK 的创建、使用和轮换流程</p>
+      <span class="icon">🔑</span>
+      <span class="title">访问密钥管理</span>
+      <span class="subtitle">理解 AK/SK 生命周期和轮换流程</span>
     </div>
 
     <div class="demo-content">
@@ -88,7 +89,8 @@
     </div>
 
     <div class="info-box">
-      <strong>💡 安全提示：</strong>访问密钥泄露是云安全事件的主要原因之一。建议优先使用 IAM 角色替代访问密钥，如果必须使用，请务必定期轮换。
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>访问密钥泄露是云安全事件的主要原因之一。建议优先使用 IAM 角色替代访问密钥，如果必须使用，请务必定期轮换。
     </div>
   </div>
 </template>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-iam/BestPracticesDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-iam/BestPracticesDemo.vue
index 592d7e5..2a3ec27 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-iam/BestPracticesDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-iam/BestPracticesDemo.vue
@@ -1,8 +1,9 @@
 <template>
   <div class="best-practices-demo">
     <div class="demo-header">
-      <h4>云账号权限管理最佳实践清单</h4>
-      <p class="intro-text">点击查看详细的实施指南和代码示例</p>
+      <span class="icon">✅</span>
+      <span class="title">权限管理最佳实践</span>
+      <span class="subtitle">理解云账号安全管理的核心原则</span>
     </div>
 
     <div class="demo-content">
@@ -52,7 +53,8 @@
     </div>
 
     <div class="info-box">
-      <strong>💡 实施建议：</strong>按照优先级从 P0 开始逐步实施最佳实践。每个改进都能显著提升账号安全性，不要试图一次性完成所有改进。
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>按照优先级从 P0 开始逐步实施最佳实践。每个改进都能显著提升账号安全性，不要试图一次性完成所有改进。
     </div>
   </div>
 </template>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-iam/CrossAccountAccessDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-iam/CrossAccountAccessDemo.vue
index 3ebf2e5..d6f1921 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-iam/CrossAccountAccessDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-iam/CrossAccountAccessDemo.vue
@@ -1,8 +1,9 @@
 <template>
   <div class="cross-account-access-demo">
     <div class="demo-header">
-      <h4>跨账号访问流程演示</h4>
-      <p class="intro-text">角色扮演（AssumeRole）获取临时凭证</p>
+      <span class="icon">🔗</span>
+      <span class="title">跨账号访问</span>
+      <span class="subtitle">理解跨账号访问的 AssumeRole 机制</span>
     </div>
 
     <div class="demo-content">
@@ -65,7 +66,8 @@ s3_client = boto3.client(
     </div>
 
     <div class="info-box">
-      <strong>💡 跨账号访问优势：</strong>通过角色扮演实现跨账号访问，无需在每个账号创建 IAM 用户，临时凭证自动过期，更安全更易管理。
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>通过角色扮演实现跨账号访问，无需在每个账号创建 IAM 用户，临时凭证自动过期，更安全更易管理。
     </div>
   </div>
 </template>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-iam/IAMStructure.vue b/docs/.vitepress/theme/components/appendix/cloud-iam/IAMStructure.vue
index 37d1c1b..cd62928 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-iam/IAMStructure.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-iam/IAMStructure.vue
@@ -1,6 +1,13 @@
 <template>
   <div class="iam-structure">
-    <div class="structure-layers">
+    <div class="demo-header">
+      <span class="icon">🏗️</span>
+      <span class="title">IAM 五大核心概念</span>
+      <span class="subtitle">云上权限管理的基础构件</span>
+    </div>
+
+    <div class="demo-content">
+      <div class="structure-layers">
       <div 
         v-for="(layer, index) in layers" 
         :key="index"
@@ -14,21 +21,27 @@
           <div class="layer-desc">{{ layer.shortDesc }}</div>
         </div>
       </div>
-    </div>
-    
-    <div v-if="selectedLayerData" class="layer-detail">
-      <div class="detail-header">
-        <span class="detail-icon">{{ selectedLayerData.icon }}</span>
-        <span class="detail-name">{{ selectedLayerData.name }}</span>
       </div>
-      <div class="detail-desc">{{ selectedLayerData.description }}</div>
-      <div class="detail-examples">
-        <div class="example-title">示例：</div>
-        <ul>
-          <li v-for="(example, i) in selectedLayerData.examples" :key="i">
-            {{ example }}
-          </li>
-        </ul>
+
+      <div v-if="selectedLayerData" class="layer-detail">
+          <div class="detail-header">
+            <span class="detail-icon">{{ selectedLayerData.icon }}</span>
+            <span class="detail-name">{{ selectedLayerData.name }}</span>
+          </div>
+          <div class="detail-desc">{{ selectedLayerData.description }}</div>
+          <div class="detail-examples">
+            <div class="example-title">示例：</div>
+            <ul>
+              <li v-for="(example, i) in selectedLayerData.examples" :key="i">
+                {{ example }}
+              </li>
+            </ul>
+          </div>
+      </div>
+
+      <div class="info-box">
+        <span class="icon">💡</span>
+        <strong>核心思想：</strong>IAM 就像公司的门禁系统——根账号是老板（拥有所有钥匙），用户是员工（有特定权限），角色是临时访客证（有时效），策略是"谁能进哪些门"的规则。
       </div>
     </div>
   </div>
@@ -113,9 +126,39 @@ function selectLayer(index) {
 .iam-structure {
   border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
-  background-color: var(--vp-c-bg-soft);
+  background: var(--vp-c-bg-soft);
   padding: 1rem;
   margin: 1rem 0;
+  max-height: 600px;
+  overflow-y: auto;
+}
+
+.demo-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.demo-header .icon {
+  font-size: 1.25rem;
+}
+
+.demo-header .title {
+  font-weight: bold;
+  font-size: 1rem;
+}
+
+.demo-header .subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.85rem;
+  margin-left: 0.5rem;
+}
+
+.demo-content {
+  margin-bottom: 0.5rem;
 }
 
 .structure-layers {
@@ -221,4 +264,23 @@ function selectLayer(index) {
 .detail-examples li:last-child {
   margin-bottom: 0;
 }
+
+.info-box {
+  background: var(--vp-c-bg-alt);
+  padding: 0.75rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  margin-top: 0.75rem;
+  display: flex;
+  gap: 0.25rem;
+}
+
+.info-box .icon {
+  flex-shrink: 0;
+}
+
+.info-box strong {
+  color: var(--vp-c-text-1);
+}
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-iam/IamRamComparisonDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-iam/IamRamComparisonDemo.vue
index 2ef8488..368e244 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-iam/IamRamComparisonDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-iam/IamRamComparisonDemo.vue
@@ -1,8 +1,9 @@
 <template>
   <div class="iam-ram-comparison-demo">
     <div class="demo-header">
-      <h4>AWS IAM vs 阿里云 RAM 对比</h4>
-      <p class="intro-text">点击各个模块查看详细对比</p>
+      <span class="icon">🔐</span>
+      <span class="title">IAM vs RAM 对比</span>
+      <span class="subtitle">理解不同云厂商的权限管理服务</span>
     </div>
 
     <div class="demo-content">
@@ -80,7 +81,8 @@
     </div>
 
     <div class="info-box">
-      <strong>💡 提示：</strong>IAM 和 RAM 的核心概念基本一致，只是术语和实现细节略有不同。掌握一个平台后，可以快速迁移到另一个平台。
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>IAM 和 RAM 的核心概念基本一致，只是术语和实现细节略有不同。掌握一个平台后，可以快速迁移到另一个平台。
     </div>
   </div>
 </template>
@@ -163,31 +165,24 @@ function selectFeature(platform, index) {
   border: 1px solid var(--vp-c-divider);
   background: var(--vp-c-bg-soft);
   border-radius: 8px;
-  padding: 1.5rem;
+  padding: 1rem;
   margin: 1rem 0;
   max-height: 600px;
   overflow-y: auto;
 }
 
 .demo-header {
-  margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
 }
 
-.demo-header h4 {
-  margin: 0 0 0.5rem 0;
-  font-weight: 800;
-  color: var(--vp-c-text-1);
-}
+.demo-header .icon { font-size: 1.25rem; }
+.demo-header .title { font-weight: bold; font-size: 1rem; }
+.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.85rem; margin-left: 0.5rem; }
 
-.intro-text {
-  margin: 0;
-  color: var(--vp-c-text-2);
-  font-size: 0.9rem;
-}
-
-.demo-content {
-  margin-bottom: 1rem;
-}
+.demo-content { margin-bottom: 0.75rem; }
 
 .comparison-container {
   display: grid;
@@ -214,7 +209,7 @@ function selectFeature(platform, index) {
 }
 
 .platform-header.ram {
-  background: rgba(var(--vp-c-brand-delta-rgb), 0.15);
+  background: var(--vp-c-bg-soft);
 }
 
 .platform-header .logo {
@@ -234,9 +229,7 @@ function selectFeature(platform, index) {
   color: var(--vp-c-text-2);
 }
 
-.features-list {
-  padding: 0.75rem;
-}
+.features-list { padding: 0.75rem; }
 
 .feature-item {
   display: flex;
@@ -258,9 +251,7 @@ function selectFeature(platform, index) {
   transform: translateX(4px);
 }
 
-.feature-icon {
-  font-size: 1.2rem;
-}
+.feature-icon { font-size: 1.2rem; }
 
 .feature-content {
   display: flex;
@@ -289,13 +280,11 @@ function selectFeature(platform, index) {
   padding: 1rem;
 }
 
-.detail-card {
-  text-align: center;
-}
+.detail-card { text-align: center; }
 
 .detail-card h6 {
   margin: 0 0 1rem 0;
-  font-size: 1.1rem;
+  font-size: 1rem;
   color: var(--vp-c-brand-1);
 }
 
@@ -324,18 +313,13 @@ function selectFeature(platform, index) {
   color: var(--vp-c-text-1);
 }
 
-.aws-detail .label {
-  color: var(--vp-c-brand-1);
-}
-
-.ram-detail .label {
-  color: var(--vp-c-brand-delta);
-}
+.aws-detail .label { color: var(--vp-c-brand-1); }
+.ram-detail .label { color: var(--vp-c-brand-delta); }
 
 .aws-detail p,
 .ram-detail p {
   margin: 0 0 0.5rem 0;
-  font-size: 0.8rem;
+  font-size: 0.75rem;
   line-height: 1.4;
   color: var(--vp-c-text-2);
 }
@@ -347,7 +331,7 @@ function selectFeature(platform, index) {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
   border-radius: 4px;
-  font-size: 0.65rem;
+  font-size: 0.6rem;
   word-break: break-all;
   color: var(--vp-c-text-2);
 }
@@ -363,19 +347,17 @@ function selectFeature(platform, index) {
 }
 
 .info-box {
-  padding: 0.75rem;
   background: var(--vp-c-bg-alt);
-  border: 1px solid var(--vp-c-divider);
-  border-left: 4px solid var(--vp-c-brand);
+  padding: 0.75rem;
   border-radius: 6px;
-  font-size: 0.9rem;
-  line-height: 1.6;
+  font-size: 0.85rem;
   color: var(--vp-c-text-2);
+  margin-top: 0.75rem;
+  display: flex;
+  gap: 0.25rem;
 }
 
-.info-box strong {
-  color: var(--vp-c-text-1);
-}
+.info-box .icon { flex-shrink: 0; }
 
 @media (max-width: 1024px) {
   .comparison-container {
@@ -383,16 +365,8 @@ function selectFeature(platform, index) {
     gap: 1rem;
   }
 
-  .comparison-details {
-    order: -1;
-  }
-
-  .comparison-row {
-    flex-direction: column;
-  }
-
-  .vs-divider {
-    padding: 0.5rem 0;
-  }
+  .comparison-details { order: -1; }
+  .comparison-row { flex-direction: column; }
+  .vs-divider { padding: 0.5rem 0; }
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-iam/IdentityProviderDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-iam/IdentityProviderDemo.vue
index c39a2c8..ec12079 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-iam/IdentityProviderDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-iam/IdentityProviderDemo.vue
@@ -1,8 +1,9 @@
 <template>
   <div class="identity-provider-demo">
     <div class="demo-header">
-      <h4>身份提供商(IdP)集成流程</h4>
-      <p class="intro-text">点击步骤查看 SSO 单点登录流程</p>
+      <span class="icon">🔐</span>
+      <span class="title">身份提供商集成</span>
+      <span class="subtitle">理解企业 SSO 单点登录流程</span>
     </div>
 
     <div class="demo-content">
@@ -38,7 +39,8 @@
     </div>
 
     <div class="info-box">
-      <strong>💡 SSO 优势：</strong>通过企业 IdP 统一管理用户身份，避免在每个云平台单独创建账号，提高安全性和管理效率。
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>通过企业 IdP 统一管理用户身份，避免在每个云平台单独创建账号，提高安全性和管理效率。
     </div>
   </div>
 </template>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-iam/MfaSecurityDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-iam/MfaSecurityDemo.vue
index b1d6cdb..fb6583c 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-iam/MfaSecurityDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-iam/MfaSecurityDemo.vue
@@ -1,8 +1,9 @@
 <template>
   <div class="mfa-security-demo">
     <div class="demo-header">
-      <h4>MFA 多因素认证模拟</h4>
-      <p class="intro-text">体验 MFA 双因素认证流程</p>
+      <span class="icon">🔐</span>
+      <span class="title">多因素认证</span>
+      <span class="subtitle">理解 MFA 双因素认证流程</span>
     </div>
 
     <div class="demo-content">
@@ -50,7 +51,8 @@
     </div>
 
     <div class="info-box">
-      <strong>💡 MFA 安全价值：</strong>启用 MFA 可降低 99.9% 的账号被盗风险。即使密码泄露，攻击者没有你的 MFA 设备也无法登录。
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>启用 MFA 可降低 99.9% 的账号被盗风险。即使密码泄露，攻击者没有你的 MFA 设备也无法登录。
     </div>
   </div>
 </template>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-iam/PermissionHierarchyDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-iam/PermissionHierarchyDemo.vue
index ab956fc..369f6c4 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-iam/PermissionHierarchyDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-iam/PermissionHierarchyDemo.vue
@@ -1,8 +1,9 @@
 <template>
   <div class="permission-hierarchy-demo">
     <div class="demo-header">
-      <h4>权限层级结构</h4>
-      <p class="intro-text">点击层级查看详细权限范围</p>
+      <span class="icon">🏛️</span>
+      <span class="title">权限层级结构</span>
+      <span class="subtitle">理解不同权限级别的范围差异</span>
     </div>
 
     <div class="demo-content">
@@ -61,7 +62,8 @@
     </div>
 
     <div class="info-box">
-      <strong>💡 最小权限原则：</strong>始终授予用户完成工作所需的最小权限。从低权限开始，根据实际需求逐步提升，而不是一开始就授予高权限。
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>最小权限原则——始终授予用户完成工作所需的最小权限。从低权限开始，根据实际需求逐步提升，而不是一开始就授予高权限。
     </div>
   </div>
 </template>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-iam/PolicyEditorDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-iam/PolicyEditorDemo.vue
index dc9d157..2e84e4f 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-iam/PolicyEditorDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-iam/PolicyEditorDemo.vue
@@ -1,5 +1,11 @@
 <template>
   <div class="policy-editor-demo">
+    <div class="demo-header">
+      <span class="icon">📋</span>
+      <span class="title">策略编辑器</span>
+      <span class="subtitle">理解 IAM 策略的 JSON 结构</span>
+    </div>
+
     <div class="editor-layout">
       <div class="editor-panel">
         <div class="panel-title">策略编辑器</div>
@@ -42,6 +48,11 @@
         </div>
       </div>
     </div>
+
+    <div class="info-box">
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>策略由 Effect、Action、Resource、Condition 四个核心元素组成，理解这四个元素的作用是编写 IAM 策略的基础。
+    </div>
   </div>
 </template>
 
diff --git a/docs/.vitepress/theme/components/appendix/cloud-iam/RolePolicyDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-iam/RolePolicyDemo.vue
index 0c3b02f..d2bd0ad 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-iam/RolePolicyDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-iam/RolePolicyDemo.vue
@@ -1,8 +1,9 @@
 <template>
   <div class="role-policy-demo">
     <div class="demo-header">
-      <h4>角色与策略关系可视化</h4>
-      <p class="intro-text">拖动查看角色如何关联多个策略</p>
+      <span class="icon">🎭</span>
+      <span class="title">角色与策略</span>
+      <span class="subtitle">理解角色如何关联多个策略</span>
     </div>
 
     <div class="demo-content">
@@ -80,7 +81,8 @@
     </div>
 
     <div class="info-box">
-      <strong>💡 策略叠加：</strong>一个角色可以附加多个策略，最终的权限是所有策略的叠加结果。Deny 策略优先级高于 Allow。
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>策略叠加——一个角色可以附加多个策略，最终的权限是所有策略的叠加结果。Deny 策略优先级高于 Allow。
     </div>
   </div>
 </template>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/AccessAnalyticsDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/AccessAnalyticsDemo.vue
index b546b97..217f416 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/AccessAnalyticsDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/AccessAnalyticsDemo.vue
@@ -1,14 +1,20 @@
 <template>
-  <div class="demo-container">
+  <div class="access-analytics-demo">
     <div class="demo-header">
-      <h4>{{ title }}</h4>
-      <p class="hint">{{ description }}</p>
+      <span class="icon">📊</span>
+      <span class="title">访问分析</span>
+      <span class="subtitle">理解 CDN 访问统计和日志分析</span>
     </div>
     <div class="demo-content">
       <el-alert type="info" :closable="false">
         访问分析演示组件占位符 - 待实现具体交互
       </el-alert>
     </div>
+
+    <div class="info-box">
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>通过日志分析，可以了解谁在何时访问了什么资源，帮助发现异常访问模式和安全事件。
+    </div>
   </div>
 </template>
 
@@ -20,31 +26,58 @@ const description = ref('展示CDN和对象存储的访问统计分析，包括
 </script>
 
 <style scoped>
-.demo-container {
+.access-analytics-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 20px;
   background: var(--vp-c-bg-soft);
+  border-radius: 8px;
+  padding: 1.5rem;
+  margin: 1rem 0;
+  max-height: 600px;
+  overflow-y: auto;
 }
 
 .demo-header {
-  margin-bottom: 20px;
+  margin-bottom: 1rem;
 }
 
-.demo-header h4 {
-  margin: 0 0 8px 0;
-  color: var(--vp-c-text-1);
+.demo-header .icon {
+  font-size: 1.25rem;
 }
 
-.hint {
-  margin: 0;
-  font-size: 14px;
+.demo-header .title {
+  font-weight: bold;
+  font-size: 1rem;
+}
+
+.demo-header .subtitle {
   color: var(--vp-c-text-2);
+  font-size: 0.85rem;
+  margin-left: 0.5rem;
 }
 
 .demo-content {
+  margin-bottom: 1rem;
+}
+
+.info-box {
+  padding: 0.75rem;
+  background: var(--vp-c-bg-alt);
+  border: 1px solid var(--vp-c-divider);
+  border-left: 4px solid var(--vp-c-brand);
+  border-radius: 6px;
+  font-size: 0.9rem;
+  line-height: 1.6;
+  color: var(--vp-c-text-2);
+  margin-top: 0.75rem;
   display: flex;
-  flex-direction: column;
-  gap: 16px;
+  gap: 0.25rem;
+}
+
+.info-box .icon {
+  flex-shrink: 0;
+}
+
+.info-box strong {
+  color: var(--vp-c-text-1);
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/CachePolicyDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/CachePolicyDemo.vue
index 5894f0d..c6e333d 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/CachePolicyDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/CachePolicyDemo.vue
@@ -1,14 +1,20 @@
 <template>
   <div class="demo-container">
     <div class="demo-header">
-      <h4>{{ title }}</h4>
-      <p class="hint">{{ description }}</p>
+      <span class="icon">⚙️</span>
+      <span class="title">{{ title }}</span>
+      <span class="subtitle">{{ description }}</span>
     </div>
     <div class="demo-content">
       <el-alert type="info" :closable="false">
         缓存策略演示组件占位符 - 待实现具体交互
       </el-alert>
     </div>
+
+    <div class="info-box">
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>缓存策略平衡命中率和新鲜度，TTL 设置太短会导致频繁回源，太长会导致内容过期。
+    </div>
   </div>
 </template>
 
diff --git a/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/CdnAccelerationDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/CdnAccelerationDemo.vue
index f1983c9..aaf86f8 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/CdnAccelerationDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/CdnAccelerationDemo.vue
@@ -4,9 +4,10 @@
 -->
 <template>
   <div class="cdn-acceleration-demo">
-    <div class="header">
-      <div class="title">CDN 加速原理</div>
-      <div class="subtitle">边缘节点、源站与回源的协同工作</div>
+    <div class="demo-header">
+      <span class="icon">🌐</span>
+      <span class="title">CDN 加速原理</span>
+      <span class="subtitle">边缘节点、源站与回源的协同工作</span>
     </div>
 
     <div class="cdn-architecture">
@@ -64,7 +65,7 @@
               </div>
               <div class="stat">
                 <span class="stat-label">命中</span>
-                <span class="stat-value" :style="{ color: node.hitRate > 80 ? '#22c55e' : '#f59e0b' }">
+                <span class="stat-value" :style="{ color: node.hitRate > 80 ? 'var(--vp-c-brand-1)' : 'var(--vp-c-brand)' }">
                   {{ node.hitRate }}%
                 </span>
               </div>
@@ -135,25 +136,30 @@
       <div class="stats-title">📊 访问统计</div>
       <div class="stats-grid">
         <div class="stat-card">
-          <div class="stat-value" :style="{ color: '#22c55e' }">{{ stats.cacheHit }}</div>
+          <div class="stat-value" :style="{ color: 'var(--vp-c-brand-1)' }">{{ stats.cacheHit }}</div>
           <div class="stat-label">缓存命中</div>
         </div>
         <div class="stat-card">
-          <div class="stat-value" :style="{ color: '#ef4444' }">{{ stats.cacheMiss }}</div>
+          <div class="stat-value" :style="{ color: 'var(--vp-c-brand-delta)' }">{{ stats.cacheMiss }}</div>
           <div class="stat-label">缓存未命中</div>
         </div>
         <div class="stat-card">
-          <div class="stat-value" :style="{ color: stats.hitRate > 80 ? '#22c55e' : '#f59e0b' }">
+          <div class="stat-value" :style="{ color: stats.hitRate > 80 ? 'var(--vp-c-brand-1)' : 'var(--vp-c-brand)' }">
             {{ stats.hitRate }}%
           </div>
           <div class="stat-label">命中率</div>
         </div>
         <div class="stat-card">
-          <div class="stat-value" :style="{ color: '#3b82f6' }">{{ stats.avgResponseTime }}ms</div>
+          <div class="stat-value" :style="{ color: 'var(--vp-c-brand)' }">{{ stats.avgResponseTime }}ms</div>
           <div class="stat-label">平均响应</div>
         </div>
       </div>
     </div>
+
+    <div class="info-box">
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>CDN就像在全球开了分店——用户访问最近的分店拿资源，不用都跑总店来，速度自然快。
+    </div>
   </div>
 </template>
 
@@ -285,21 +291,32 @@ const resetDemo = () => {
   padding: 1.5rem;
   margin: 1.5rem 0;
   font-family: var(--vp-font-family-base);
+  max-height: 600px;
+  overflow-y: auto;
 }
 
-.header {
-  margin-bottom: 1.5rem;
+.demo-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--vp-c-divider);
 }
 
-.title {
-  font-weight: 700;
-  font-size: 1.2rem;
-  margin-bottom: 0.25rem;
+.demo-header .icon {
+  font-size: 1.25rem;
 }
 
-.subtitle {
+.demo-header .title {
+  font-weight: bold;
+  font-size: 1rem;
+}
+
+.demo-header .subtitle {
   color: var(--vp-c-text-2);
-  font-size: 0.9rem;
+  font-size: 0.85rem;
+  margin-left: 0.5rem;
 }
 
 .cdn-architecture {
@@ -338,27 +355,27 @@ const resetDemo = () => {
 }
 
 .layer-status.hit {
-  background: #dcfce7;
-  color: #166534;
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand-1);
 }
 
 .layer-status.miss {
-  background: #fee2e2;
-  color: #991b1b;
+  background: rgba(var(--vp-c-brand-delta-rgb), 0.15);
+  color: var(--vp-c-brand-delta);
 }
 
 .layer-status.active {
-  background: #dbeafe;
-  color: #1e40af;
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand-1);
 }
 
 /* 用户层 */
 .users-map {
   position: relative;
   height: 120px;
-  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
+  background: var(--vp-c-bg-soft);
   border-radius: 8px;
-  border: 1px solid #bae6fd;
+  border: 1px solid var(--vp-c-divider);
   overflow: hidden;
 }
 
@@ -396,18 +413,18 @@ const resetDemo = () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: white;
+  background: var(--vp-c-bg);
   border-radius: 50%;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 .user-label {
   font-size: 0.65rem;
   font-weight: 600;
-  color: #0369a1;
+  color: var(--vp-c-brand-1);
   margin-top: 0.25rem;
   white-space: nowrap;
-  background: rgba(255, 255, 255, 0.9);
+  background: var(--vp-c-bg);
   padding: 0.1rem 0.4rem;
   border-radius: 4px;
 }
@@ -511,8 +528,8 @@ const resetDemo = () => {
   align-items: center;
   gap: 0.75rem;
   padding: 0.75rem;
-  background: linear-gradient(135deg, #fef3c7, #fde68a);
-  border: 2px solid #f59e0b;
+  background: var(--vp-c-bg-soft);
+  border: 2px solid var(--vp-c-divider);
   border-radius: 8px;
 }
 
@@ -528,12 +545,12 @@ const resetDemo = () => {
 .server-name {
   font-weight: 600;
   font-size: 0.9rem;
-  color: #92400e;
+  color: var(--vp-c-text-1);
 }
 
 .server-address {
   font-size: 0.75rem;
-  color: #b45309;
+  color: var(--vp-c-text-2);
   font-family: var(--vp-font-family-mono);
 }
 
@@ -543,14 +560,14 @@ const resetDemo = () => {
   gap: 0.4rem;
   font-size: 0.75rem;
   font-weight: 600;
-  color: #15803d;
+  color: var(--vp-c-brand-1);
 }
 
 .status-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: #22c55e;
+  background: var(--vp-c-brand-1);
   animation: statusPulse 2s infinite;
 }
 
@@ -560,8 +577,8 @@ const resetDemo = () => {
 }
 
 .back-to-source-flow {
-  background: #fef2f2;
-  border: 1px solid #fecaca;
+  background: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
   padding: 1rem;
   margin-top: 0.5rem;
@@ -571,7 +588,7 @@ const resetDemo = () => {
   text-align: center;
   font-size: 0.9rem;
   font-weight: 600;
-  color: #dc2626;
+  color: var(--vp-c-brand-delta);
   margin-bottom: 0.5rem;
 }
 
@@ -589,11 +606,11 @@ const resetDemo = () => {
 
 .flow-step {
   font-size: 0.75rem;
-  color: #991b1b;
-  background: white;
+  color: var(--vp-c-text-1);
+  background: var(--vp-c-bg);
   padding: 0.4rem 0.6rem;
   border-radius: 4px;
-  border-left: 3px solid #dc2626;
+  border-left: 3px solid var(--vp-c-brand);
 }
 
 /* 控制区 */
@@ -639,13 +656,13 @@ const resetDemo = () => {
 }
 
 .control-btn.reset {
-  background: #fef2f2;
-  border-color: #fecaca;
-  color: #dc2626;
+  background: rgba(var(--vp-c-brand-delta-rgb), 0.1);
+  border-color: var(--vp-c-brand-delta);
+  color: var(--vp-c-brand-delta);
 }
 
 .control-btn.reset:hover {
-  background: #fee2e2;
+  background: rgba(var(--vp-c-brand-delta-rgb), 0.15);
 }
 
 /* 统计面板 */
@@ -693,4 +710,23 @@ const resetDemo = () => {
   font-size: 0.7rem;
   color: var(--vp-c-text-2);
 }
+
+.info-box {
+  background: var(--vp-c-bg-alt);
+  padding: 0.75rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  margin-top: 0.75rem;
+  display: flex;
+  gap: 0.25rem;
+}
+
+.info-box .icon {
+  flex-shrink: 0;
+}
+
+.info-box strong {
+  color: var(--vp-c-text-1);
+}
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/HttpsOptimizationDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/HttpsOptimizationDemo.vue
index a9c4d57..3943b2f 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/HttpsOptimizationDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/HttpsOptimizationDemo.vue
@@ -1,50 +1,83 @@
 <template>
-  <div class="demo-container">
+  <div class="https-optimization-demo">
     <div class="demo-header">
-      <h4>{{ title }}</h4>
-      <p class="hint">{{ description }}</p>
+      <span class="icon">🔒</span>
+      <span class="title">HTTPS 优化</span>
+      <span class="subtitle">理解 CDN 的 HTTPS 协议和证书管理</span>
     </div>
     <div class="demo-content">
       <el-alert type="info" :closable="false">
-        HTTPS优化演示组件占位符 - 待实现具体交互
+        HTTPS 优化演示组件占位符 - 待实现具体交互
       </el-alert>
     </div>
+
+    <div class="info-box">
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>HTTPS 通过 TLS/SSL 加密数据传输，防止中间人攻击和数据泄露，是现代 Web 应用的安全基础。
+    </div>
   </div>
 </template>
 
 <script setup>
 import { ref } from 'vue'
 
-const title = ref('HTTPS优化演示')
+const title = ref('HTTPS 优化演示')
 const description = ref('展示CDN的HTTPS优化技术，包括TLS握手优化、证书管理、HSTS等')
 </script>
 
 <style scoped>
-.demo-container {
+.https-optimization-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 20px;
   background: var(--vp-c-bg-soft);
+  border-radius: 8px;
+  padding: 1.5rem;
+  margin: 1rem 0;
+  max-height: 600px;
+  overflow-y: auto;
 }
 
 .demo-header {
-  margin-bottom: 20px;
+  margin-bottom: 1rem;
 }
 
-.demo-header h4 {
-  margin: 0 0 8px 0;
-  color: var(--vp-c-text-1);
+.demo-header .icon {
+  font-size: 1.25rem;
 }
 
-.hint {
-  margin: 0;
-  font-size: 14px;
+.demo-header .title {
+  font-weight: bold;
+  font-size: 1rem;
+}
+
+.demo-header .subtitle {
   color: var(--vp-c-text-2);
+  font-size: 0.85rem;
+  margin-left: 0.5rem;
 }
 
 .demo-content {
+  margin-bottom: 1rem;
+}
+
+.info-box {
+  padding: 0.75rem;
+  background: var(--vp-c-bg-alt);
+  border: 1px solid var(--vp-c-divider);
+  border-left: 4px solid var(--vp-c-brand);
+  border-radius: 6px;
+  font-size: 0.9rem;
+  line-height: 1.6;
+  color: var(--vp-c-text-2);
+  margin-top: 0.75rem;
   display: flex;
-  flex-direction: column;
-  gap: 16px;
+  gap: 0.25rem;
+}
+
+.info-box .icon {
+  flex-shrink: 0;
+}
+
+.info-box strong {
+  color: var(--vp-c-text-1);
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/ObjectStorageDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/ObjectStorageDemo.vue
index 38ca274..a8293fa 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/ObjectStorageDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/ObjectStorageDemo.vue
@@ -1,12 +1,9 @@
-<!--
-  ObjectStorageDemo.vue
-  对象存储架构演示 - 展示桶、对象、元数据的核心概念
--->
 <template>
   <div class="object-storage-demo">
-    <div class="header">
-      <div class="title">对象存储架构</div>
-      <div class="subtitle">理解 Bucket、Object 和 Metadata 的关系</div>
+    <div class="demo-header">
+      <span class="icon">🗄️</span>
+      <span class="title">对象存储架构</span>
+      <span class="subtitle">理解 Bucket、Object 和 Metadata 的关系</span>
     </div>
 
     <div class="storage-architecture">
@@ -113,38 +110,9 @@
       </div>
     </div>
 
-    <div class="architecture-summary">
-      <div class="summary-title">架构要点总结</div>
-      <div class="summary-grid">
-        <div class="summary-item">
-          <div class="summary-icon">📦</div>
-          <div class="summary-text">
-            <strong>Bucket（桶）</strong>
-            <span>全局命名空间，用于组织和隔离数据</span>
-          </div>
-        </div>
-        <div class="summary-item">
-          <div class="summary-icon">📄</div>
-          <div class="summary-text">
-            <strong>Object（对象）</strong>
-            <span>键值对存储，包含数据、元数据和唯一 Key</span>
-          </div>
-        </div>
-        <div class="summary-item">
-          <div class="summary-icon">🏷️</div>
-          <div class="summary-text">
-            <strong>Metadata（元数据）</strong>
-            <span>系统元数据 + 自定义标签，支持检索和管理</span>
-          </div>
-        </div>
-        <div class="summary-item">
-          <div class="summary-icon">🔐</div>
-          <div class="summary-text">
-            <strong>Access Control（访问控制）</strong>
-            <span>Bucket Policy、ACL、STS 临时凭证多层权限</span>
-          </div>
-        </div>
-      </div>
+    <div class="info-box">
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>对象存储采用三层架构：Account（账户）→ Bucket（桶）→ Object（对象），每个对象都附带丰富的元数据用于检索和管理。理解这个层次结构是掌握对象存储的第一步。
     </div>
   </div>
 </template>
@@ -262,69 +230,67 @@ const getFileIcon = (type) => {
 .object-storage-demo {
   border: 1px solid var(--vp-c-divider);
   background: var(--vp-c-bg-soft);
-  border-radius: 12px;
-  padding: 1.5rem;
-  margin: 1.5rem 0;
-  font-family: var(--vp-font-family-base);
+  border-radius: 8px;
+  padding: 1rem;
+  margin: 1rem 0;
+  max-height: 600px;
+  overflow-y: auto;
 }
 
-.header {
-  margin-bottom: 1.5rem;
+.demo-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
 }
 
-.title {
-  font-weight: 700;
-  font-size: 1.2rem;
-  margin-bottom: 0.25rem;
-}
-
-.subtitle {
-  color: var(--vp-c-text-2);
-  font-size: 0.9rem;
-}
+.demo-header .icon { font-size: 1.25rem; }
+.demo-header .title { font-weight: bold; font-size: 1rem; }
+.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.85rem; margin-left: 0.5rem; }
 
 .storage-architecture {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: 0.5rem;
 }
 
 .account-layer {
-  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
-  padding: 1rem;
-  border-radius: 10px;
+  background: var(--vp-c-brand-soft);
+  padding: 0.75rem;
+  border-radius: 8px;
   text-align: center;
-  border: 2px solid #6366f1;
+  border: 2px solid var(--vp-c-brand);
 }
 
 .account-icon {
-  font-size: 2rem;
+  font-size: 1.5rem;
   margin-bottom: 0.25rem;
 }
 
 .account-name {
   font-weight: 600;
-  font-size: 0.95rem;
-  color: #4338ca;
+  font-size: 0.9rem;
+  color: var(--vp-c-brand-1);
+  margin-bottom: 0.25rem;
 }
 
 .account-desc {
-  font-size: 0.75rem;
-  color: #6366f1;
+  font-size: 0.7rem;
+  color: var(--vp-c-text-2);
   margin-top: 0.25rem;
 }
 
 .connector {
   text-align: center;
   color: var(--vp-c-text-3);
-  font-size: 1.25rem;
+  font-size: 1rem;
 }
 
 .buckets-container {
   background: var(--vp-c-bg);
   border: 2px solid var(--vp-c-divider);
-  border-radius: 10px;
-  padding: 1rem;
+  border-radius: 8px;
+  padding: 0.75rem;
 }
 
 .section-title {
@@ -332,13 +298,13 @@ const getFileIcon = (type) => {
   align-items: center;
   gap: 0.5rem;
   font-weight: 600;
-  font-size: 0.9rem;
-  margin-bottom: 0.75rem;
+  font-size: 0.85rem;
+  margin-bottom: 0.5rem;
   color: var(--vp-c-text-1);
 }
 
 .section-desc {
-  font-size: 0.75rem;
+  font-size: 0.65rem;
   font-weight: normal;
   color: var(--vp-c-text-2);
   margin-left: auto;
@@ -346,17 +312,17 @@ const getFileIcon = (type) => {
 
 .buckets-row {
   display: flex;
-  gap: 0.75rem;
+  gap: 0.5rem;
   flex-wrap: wrap;
 }
 
 .bucket-card {
   flex: 1;
-  min-width: 140px;
+  min-width: 120px;
   background: var(--vp-c-bg-soft);
   border: 2px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 0.75rem;
+  border-radius: 6px;
+  padding: 0.5rem;
   text-align: center;
   cursor: pointer;
   transition: all 0.2s;
@@ -370,29 +336,26 @@ const getFileIcon = (type) => {
 .bucket-card.active {
   border-color: var(--vp-c-brand);
   background: var(--vp-c-brand-soft);
-  box-shadow: 0 0 0 3px var(--vp-c-brand-dimm);
+  box-shadow: 0 0 3px var(--vp-c-brand-dimm);
 }
 
-.bucket-icon {
-  font-size: 1.75rem;
-  margin-bottom: 0.25rem;
-}
+.bucket-icon { font-size: 1.5rem; margin-bottom: 0.25rem; }
 
 .bucket-name {
   font-weight: 600;
-  font-size: 0.8rem;
+  font-size: 0.75rem;
   color: var(--vp-c-text-1);
   word-break: break-all;
 }
 
 .bucket-meta {
-  font-size: 0.7rem;
+  font-size: 0.65rem;
   color: var(--vp-c-text-2);
   margin-top: 0.25rem;
 }
 
 .bucket-size {
-  font-size: 0.75rem;
+  font-size: 0.7rem;
   color: var(--vp-c-brand);
   font-weight: 600;
   margin-top: 0.25rem;
@@ -401,30 +364,30 @@ const getFileIcon = (type) => {
 .objects-container {
   background: var(--vp-c-bg);
   border: 2px solid var(--vp-c-divider);
-  border-radius: 10px;
-  padding: 1rem;
-  min-height: 150px;
+  border-radius: 8px;
+  padding: 0.75rem;
+  min-height: 120px;
 }
 
 .objects-list {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.4rem;
 }
 
 .object-item {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  padding: 0.5rem 0.75rem;
+  gap: 0.5rem;
+  padding: 0.4rem 0.5rem;
   background: var(--vp-c-bg-soft);
-  border-radius: 6px;
+  border-radius: 4px;
   cursor: pointer;
   transition: all 0.2s;
 }
 
 .object-item:hover {
-  background: var(--vp-c-bg-mute);
+  background: var(--vp-c-bg-alt);
 }
 
 .object-item.selected {
@@ -432,9 +395,7 @@ const getFileIcon = (type) => {
   border: 1px solid var(--vp-c-brand);
 }
 
-.object-icon {
-  font-size: 1.25rem;
-}
+.object-icon { font-size: 1rem; }
 
 .object-info {
   flex: 1;
@@ -442,7 +403,7 @@ const getFileIcon = (type) => {
 }
 
 .object-key {
-  font-size: 0.8rem;
+  font-size: 0.75rem;
   font-weight: 600;
   color: var(--vp-c-text-1);
   white-space: nowrap;
@@ -451,33 +412,35 @@ const getFileIcon = (type) => {
 }
 
 .object-meta {
-  font-size: 0.7rem;
+  font-size: 0.65rem;
   color: var(--vp-c-text-2);
 }
 
 .object-arrow {
   color: var(--vp-c-text-3);
+  font-size: 0.8rem;
 }
 
-.objects-placeholder {
+.objects-placeholder,
+.metadata-placeholder {
   text-align: center;
-  padding: 2rem;
+  padding: 1.5rem;
   color: var(--vp-c-text-2);
-  font-size: 0.9rem;
+  font-size: 0.8rem;
 }
 
 .metadata-container {
   background: var(--vp-c-bg);
   border: 2px solid var(--vp-c-divider);
-  border-radius: 10px;
-  padding: 1rem;
-  min-height: 150px;
+  border-radius: 8px;
+  padding: 0.75rem;
+  min-height: 120px;
 }
 
 .metadata-content {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 1rem;
+  gap: 0.75rem;
 }
 
 @media (max-width: 768px) {
@@ -488,30 +451,30 @@ const getFileIcon = (type) => {
 
 .metadata-section {
   background: var(--vp-c-bg-soft);
-  border-radius: 8px;
-  padding: 0.75rem;
+  border-radius: 6px;
+  padding: 0.5rem;
 }
 
 .metadata-section-title {
   font-weight: 600;
-  font-size: 0.85rem;
+  font-size: 0.75rem;
   color: var(--vp-c-brand);
-  margin-bottom: 0.5rem;
-  padding-bottom: 0.5rem;
+  margin-bottom: 0.4rem;
+  padding-bottom: 0.4rem;
   border-bottom: 1px solid var(--vp-c-divider);
 }
 
 .metadata-list {
   display: flex;
   flex-direction: column;
-  gap: 0.4rem;
+  gap: 0.3rem;
 }
 
 .metadata-item {
   display: flex;
   flex-direction: column;
   gap: 0.1rem;
-  font-size: 0.75rem;
+  font-size: 0.7rem;
 }
 
 .metadata-key {
@@ -525,66 +488,16 @@ const getFileIcon = (type) => {
   word-break: break-all;
 }
 
-.metadata-placeholder {
-  text-align: center;
-  padding: 2rem;
-  color: var(--vp-c-text-2);
-  font-size: 0.9rem;
-}
-
-.architecture-summary {
-  background: var(--vp-c-bg);
-  border-radius: 10px;
-  padding: 1.25rem;
-  margin-top: 1.5rem;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.summary-title {
-  font-weight: 700;
-  font-size: 1rem;
-  margin-bottom: 1rem;
-  color: var(--vp-c-text-1);
-}
-
-.summary-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 1rem;
-}
-
-@media (max-width: 640px) {
-  .summary-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-.summary-item {
-  display: flex;
-  gap: 0.75rem;
+.info-box {
+  background: var(--vp-c-bg-alt);
   padding: 0.75rem;
-  background: var(--vp-c-bg-soft);
-  border-radius: 8px;
-}
-
-.summary-icon {
-  font-size: 1.5rem;
-}
-
-.summary-text {
+  border-radius: 6px;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  margin-top: 0.75rem;
   display: flex;
-  flex-direction: column;
   gap: 0.25rem;
 }
 
-.summary-text strong {
-  font-size: 0.9rem;
-  color: var(--vp-c-text-1);
-}
-
-.summary-text span {
-  font-size: 0.75rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.4;
-}
+.info-box .icon { flex-shrink: 0; }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/TrafficSchedulingDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/TrafficSchedulingDemo.vue
index 6da61e1..c243516 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/TrafficSchedulingDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/TrafficSchedulingDemo.vue
@@ -1,14 +1,20 @@
 <template>
-  <div class="demo-container">
+  <div class="traffic-scheduling-demo">
     <div class="demo-header">
-      <h4>{{ title }}</h4>
-      <p class="hint">{{ description }}</p>
+      <span class="icon">🚦</span>
+      <span class="title">流量调度</span>
+      <span class="subtitle">理解 CDN 智能调度和负载均衡</span>
     </div>
     <div class="demo-content">
       <el-alert type="info" :closable="false">
         流量调度演示组件占位符 - 待实现具体交互
       </el-alert>
     </div>
+
+    <div class="info-box">
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>智能调度通过就近访问、负载均衡和故障切换，实现全球加速和高可用性。
+    </div>
   </div>
 </template>
 
@@ -20,31 +26,58 @@ const description = ref('展示CDN的智能流量调度机制，包括负载均
 </script>
 
 <style scoped>
-.demo-container {
+.traffic-scheduling-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 20px;
   background: var(--vp-c-bg-soft);
+  border-radius: 8px;
+  padding: 1.5rem;
+  margin: 1rem 0;
+  max-height: 600px;
+  overflow-y: auto;
 }
 
 .demo-header {
-  margin-bottom: 20px;
+  margin-bottom: 1rem;
 }
 
-.demo-header h4 {
-  margin: 0 0 8px 0;
-  color: var(--vp-c-text-1);
+.demo-header .icon {
+  font-size: 1.25rem;
 }
 
-.hint {
-  margin: 0;
-  font-size: 14px;
+.demo-header .title {
+  font-weight: bold;
+  font-size: 1rem;
+}
+
+.demo-header .subtitle {
   color: var(--vp-c-text-2);
+  font-size: 0.85rem;
+  margin-left: 0.5rem;
 }
 
 .demo-content {
+  margin-bottom: 1rem;
+}
+
+.info-box {
+  padding: 0.75rem;
+  background: var(--vp-c-bg-alt);
+  border: 1px solid var(--vp-c-divider);
+  border-left: 4px solid var(--vp-c-brand);
+  border-radius: 6px;
+  font-size: 0.9rem;
+  line-height: 1.6;
+  color: var(--vp-c-text-2);
+  margin-top:  0.75rem;
   display: flex;
-  flex-direction: column;
-  gap: 16px;
+  gap: 0.25rem;
+}
+
+.info-box .icon {
+  flex-shrink: 0;
+}
+
+.info-box strong {
+  color: var(--vp-c-text-1);
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/UploadProcessDemo.vue b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/UploadProcessDemo.vue
index f353d49..cb5dc24 100644
--- a/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/UploadProcessDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/cloud-storage-cdn/UploadProcessDemo.vue
@@ -4,9 +4,10 @@
 -->
 <template>
   <div class="upload-process-demo">
-    <div class="header">
-      <div class="title">文件上传流程</div>
-      <div class="subtitle">直传 vs 分片上传 vs 断点续传</div>
+    <div class="demo-header">
+      <span class="icon">📤</span>
+      <span class="title">文件上传流程</span>
+      <span class="subtitle">理解直传、分片、断点续传三种方式</span>
     </div>
 
     <!-- 上传方式选择 -->
@@ -179,6 +180,11 @@
         </div>
       </div>
     </div>
+
+    <div class="info-box">
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>大文件分片上传提高可靠性，网络中断可以从断点续传，避免重复上传整个文件。
+    </div>
   </div>
 </template>
 
diff --git a/docs/.vitepress/theme/components/appendix/frontend-evolution/FrontendEvolutionDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-evolution/FrontendEvolutionDemo.vue
index 4a199df..62abc63 100644
--- a/docs/.vitepress/theme/components/appendix/frontend-evolution/FrontendEvolutionDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/frontend-evolution/FrontendEvolutionDemo.vue
@@ -4,100 +4,62 @@
 -->
 <template>
   <div class="evolution-timeline">
-    <div class="timeline-header">
-      <span class="header-icon">🚀</span>
-      <span class="header-title">前端开发演进时间线</span>
-      <span class="header-subtitle">从"贴海报"到"搭乐高"的 20 年变迁</span>
+    <div class="demo-header">
+      <span class="icon">🚀</span>
+      <span class="title">前端演进时间线</span>
+      <span class="subtitle">从"贴海报"到"搭乐高"的20年变迁</span>
     </div>
 
-    <!-- 时间线 -->
-    <div class="timeline-container">
-      <div
-        v-for="(era, index) in eras"
-        :key="era.id"
-        class="era-item"
-        :class="{ active: activeEra === era.id }"
-        @click="activeEra = activeEra === era.id ? null : era.id"
-      >
-        <div class="era-marker">
-          <div class="era-dot">{{ era.emoji }}</div>
-          <div v-if="index < eras.length - 1" class="era-line"></div>
-        </div>
-
-        <div class="era-content">
-          <div class="era-header">
-            <span class="era-year">{{ era.year }}</span>
-            <span class="era-name">{{ era.name }}</span>
+    <div class="demo-content">
+      <!-- 时间线 -->
+      <div class="timeline-container">
+        <div
+          v-for="(era, index) in eras"
+          :key="era.id"
+          class="era-item"
+          :class="{ active: activeEra === era.id }"
+          @click="activeEra = activeEra === era.id ? null : era.id"
+        >
+          <div class="era-marker">
+            <div class="era-dot">{{ era.emoji }}</div>
+            <div v-if="index < eras.length - 1" class="era-line"></div>
           </div>
 
-          <div class="era-brief">{{ era.brief }}</div>
-
-          <Transition name="expand">
-            <div v-if="activeEra === era.id" class="era-detail">
-              <div class="detail-section">
-                <div class="section-title">🔑 关键技术</div>
-                <div class="tech-tags">
-                  <span
-                    v-for="tech in era.technologies"
-                    :key="tech"
-                    class="tech-tag"
-                  >{{ tech }}</span>
-                </div>
-              </div>
-
-              <div class="detail-section">
-                <div class="section-title">💪 优点</div>
-                <div class="benefit-list">
-                  <div
-                    v-for="benefit in era.pros"
-                    :key="benefit"
-                    class="benefit-item"
-                  >
-                    <span class="check-icon">✓</span>
-                    <span>{{ benefit }}</span>
-                  </div>
-                </div>
-              </div>
-
-              <div class="detail-section">
-                <div class="section-title">⚠️ 缺点</div>
-                <div class="problem-list">
-                  <div
-                    v-for="problem in era.cons"
-                    :key="problem"
-                    class="problem-item"
-                  >
-                    <span class="warn-icon">!</span>
-                    <span>{{ problem }}</span>
-                  </div>
-                </div>
-              </div>
-
-              <div class="detail-section" v-if="era.metaphor">
-                <div class="section-title">💡 生活比喻</div>
-                <div class="metaphor-box">{{ era.metaphor }}</div>
-              </div>
+          <div class="era-content">
+            <div class="era-header">
+              <span class="era-year">{{ era.year }}</span>
+              <span class="era-name">{{ era.name }}</span>
             </div>
-          </Transition>
+
+            <div class="era-brief">{{ era.brief }}</div>
+
+            <Transition name="expand">
+              <div v-if="activeEra === era.id" class="era-detail">
+                <div class="detail-section">
+                  <div class="section-title">🔑 关键技术</div>
+                  <div class="tech-tags">
+                    <span
+                      v-for="tech in era.technologies.slice(0, 5)"
+                      :key="tech"
+                      class="tech-tag"
+                    >{{ tech }}</span>
+                  </div>
+                </div>
+
+                <div class="detail-section" v-if="era.metaphor">
+                  <div class="section-title">💡 生活比喻</div>
+                  <div class="metaphor-box">{{ era.metaphor }}</div>
+                </div>
+              </div>
+            </Transition>
+          </div>
         </div>
       </div>
     </div>
 
-    <!-- 提示 -->
-    <div class="timeline-hint">
-      <span>👆</span>
-      <span>点击任意时代，查看详细信息</span>
-    </div>
-
-    <!-- 核心要点 -->
-    <div class="key-takeaway">
-      <span class="takeaway-icon">🎯</span>
-      <div class="takeaway-content">
-        <strong>核心思想：</strong>
-        前端技术的演进，本质是为了解决两个问题：
-        <strong>提升开发效率</strong>（从手动到自动化）和
-        <strong>支撑更复杂的应用</strong>（从简单页面到桌面级应用）。
-      </div>
+    <div class="info-box">
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>前端技术的演进，本质是为了解决两个问题：提升开发效率（从手动到自动化）和支撑更复杂的应用（从简单页面到桌面级应用）。
     </div>
   </div>
 </template>
@@ -168,37 +130,39 @@ const eras = [
 
 <style scoped>
 .evolution-timeline {
-  border: 2px solid #e0e0e0;
-  border-radius: 16px;
-  background: linear-gradient(135deg, #fafbfc 0%, #f0f4f8 100%);
-  padding: 24px;
-  margin: 20px 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg-soft);
+  padding: 1rem;
+  margin: 1rem 0;
+  max-height: 600px;
+  overflow-y: auto;
 }
 
-.timeline-header {
-  text-align: center;
-  margin-bottom: 32px;
+.demo-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
 }
 
-.header-icon {
-  font-size: 48px;
-  display: block;
-  margin-bottom: 12px;
+.demo-header .icon {
+  font-size: 1.25rem;
 }
 
-.header-title {
-  display: block;
-  font-size: 24px;
+.demo-header .title {
   font-weight: bold;
-  color: #333;
-  margin-bottom: 8px;
+  font-size: 1rem;
 }
 
-.header-subtitle {
-  display: block;
-  font-size: 14px;
-  color: #666;
+.demo-header .subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.85rem;
+  margin-left: 0.5rem;
+}
+
+.demo-content {
+  margin-bottom: 0.5rem;
 }
 
 /* 时间线容器 */
@@ -208,8 +172,8 @@ const eras = [
 
 .era-item {
   display: flex;
-  gap: 20px;
-  margin-bottom: 24px;
+  gap: 1rem;
+  margin-bottom: 1rem;
   cursor: pointer;
   transition: all 0.3s ease;
 }
@@ -231,89 +195,88 @@ const eras = [
 }
 
 .era-dot {
-  width: 56px;
-  height: 56px;
+  width: 48px;
+  height: 48px;
   border-radius: 50%;
-  background: linear-gradient(135deg, #667eea, #764ba2);
+  background: var(--vp-c-brand);
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 28px;
-  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+  font-size: 24px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   z-index: 1;
   transition: all 0.3s ease;
 }
 
 .era-item:hover .era-dot {
   transform: scale(1.1);
-  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
 }
 
 .era-line {
   width: 4px;
   flex: 1;
-  background: linear-gradient(180deg, #667eea, #e0e0e0);
+  background: var(--vp-c-divider);
   margin-top: 8px;
-  min-height: 40px;
+  min-height: 30px;
 }
 
 /* 内容区域 */
 .era-content {
   flex: 1;
-  background: white;
-  border-radius: 12px;
-  padding: 16px;
-  border: 2px solid #e0e0e0;
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  padding: 0.75rem;
+  border: 2px solid var(--vp-c-divider);
   transition: all 0.3s ease;
 }
 
 .era-item:hover .era-content {
-  border-color: #667eea;
-  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.1);
+  border-color: var(--vp-c-brand);
 }
 
 .era-item.active .era-content {
-  border-color: #667eea;
-  background: linear-gradient(135deg, #f8f9ff, #ffffff);
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-bg-soft);
 }
 
 .era-header {
   display: flex;
   align-items: center;
-  gap: 12px;
-  margin-bottom: 8px;
+  gap: 0.75rem;
+  margin-bottom: 0.5rem;
 }
 
 .era-year {
-  padding: 4px 12px;
-  background: linear-gradient(135deg, #667eea, #764ba2);
+  padding: 2px 10px;
+  background: var(--vp-c-brand);
   color: white;
-  border-radius: 12px;
-  font-size: 12px;
+  border-radius: 8px;
+  font-size: 0.75rem;
   font-weight: bold;
 }
 
 .era-name {
-  font-size: 18px;
+  font-size: 1rem;
   font-weight: bold;
-  color: #333;
+  color: var(--vp-c-text-1);
 }
 
 .era-brief {
-  font-size: 14px;
-  color: #666;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
   line-height: 1.5;
 }
 
 /* 详情展开 */
 .era-detail {
-  margin-top: 16px;
-  padding-top: 16px;
-  border-top: 2px dashed #e0e0e0;
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+  border-top: 2px dashed var(--vp-c-divider);
 }
 
 .detail-section {
-  margin-bottom: 16px;
+  margin-bottom: 0.75rem;
 }
 
 .detail-section:last-child {
@@ -321,124 +284,36 @@ const eras = [
 }
 
 .section-title {
-  font-size: 13px;
+  font-size: 0.8rem;
   font-weight: bold;
-  color: #667eea;
-  margin-bottom: 8px;
+  color: var(--vp-c-brand);
+  margin-bottom: 0.5rem;
 }
 
 /* 技术标签 */
 .tech-tags {
   display: flex;
   flex-wrap: wrap;
-  gap: 8px;
+  gap: 0.5rem;
 }
 
 .tech-tag {
-  padding: 4px 12px;
-  background: #f0f4ff;
-  color: #667eea;
-  border-radius: 12px;
-  font-size: 12px;
+  padding: 2px 10px;
+  background: var(--vp-c-bg-soft);
+  color: var(--vp-c-brand);
+  border-radius: 8px;
+  font-size: 0.75rem;
   font-weight: 500;
 }
 
-/* 优点列表 */
-.benefit-list {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.benefit-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 13px;
-  color: #16a34a;
-}
-
-.check-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  background: #dcfce7;
-  border-radius: 50%;
-  font-size: 10px;
-  font-weight: bold;
-}
-
-/* 缺点列表 */
-.problem-list {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.problem-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 13px;
-  color: #dc2626;
-}
-
-.warn-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  background: #fecaca;
-  border-radius: 50%;
-  font-size: 10px;
-  font-weight: bold;
-}
-
 /* 比喻框 */
 .metaphor-box {
-  background: linear-gradient(135deg, #fff7ed, #ffedd5);
-  border-left: 4px solid #f97316;
-  padding: 12px;
-  border-radius: 8px;
-  font-size: 13px;
-  color: #9a3412;
-  line-height: 1.6;
-}
-
-/* 提示 */
-.timeline-hint {
-  text-align: center;
-  font-size: 13px;
-  color: #666;
-  margin: 16px 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-}
-
-/* 核心要点 */
-.key-takeaway {
-  display: flex;
-  gap: 12px;
-  padding: 16px;
-  background: linear-gradient(135deg, #dcfce7, #d1fae5);
-  border-radius: 12px;
-  border-left: 4px solid #16a34a;
-}
-
-.takeaway-icon {
-  font-size: 24px;
-  flex-shrink: 0;
-}
-
-.takeaway-content {
-  flex: 1;
-  font-size: 14px;
-  color: #14532d;
+  background: var(--vp-c-bg-alt);
+  border-left: 4px solid var(--vp-c-brand);
+  padding: 0.75rem;
+  border-radius: 6px;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
   line-height: 1.6;
 }
 
@@ -457,28 +332,25 @@ const eras = [
 
 .expand-enter-to,
 .expand-leave-from {
-  max-height: 1000px;
+  max-height: 600px;
   opacity: 1;
 }
 
-/* 响应式 */
-@media (max-width: 768px) {
-  .era-item {
-    flex-direction: column;
-    gap: 12px;
-  }
+.info-box {
+  background: var(--vp-c-bg-alt);
+  padding: 0.75rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  display: flex;
+  gap: 0.25rem;
+}
 
-  .era-marker {
-    flex-direction: row;
-    gap: 12px;
-  }
+.info-box .icon {
+  flex-shrink: 0;
+}
 
-  .era-line {
-    width: 100%;
-    height: 4px;
-    min-height: 0;
-    margin-top: 0;
-    margin-left: 8px;
-  }
+.info-box strong {
+  color: var(--vp-c-text-1);
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-evolution/ImperativeVsDeclarativeDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-evolution/ImperativeVsDeclarativeDemo.vue
index 797b5bf..ba3d5e6 100644
--- a/docs/.vitepress/theme/components/appendix/frontend-evolution/ImperativeVsDeclarativeDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/frontend-evolution/ImperativeVsDeclarativeDemo.vue
@@ -1,19 +1,19 @@
 <!--
-  ImperativeVsDeclarativeDemo.vue
-  命令式 vs 声明式编程对比演示
-
-  用途：
-  通过并排的交互式计数器，直观展示 Imperative（jQuery）和 Declarative（Vue）
-  在代码量和心智负担上的差异。
-
-  交互功能：
-  - 两个可交互的计数器。
-  - 切换展示背后的代码实现。
-  - 高亮显示 jQuery 需要手动更新的多个 DOM 节点 vs Vue 的自动绑定。
+  ImperativeVsDeclarativeDemo.vue - 命令式 vs 声明式编程对比
+  用"画画的两种方式"来解释 jQuery vs Vue/React 的区别
 -->
 <template>
   <div class="imperative-declarative-demo">
+    <!-- 标题区 -->
     <div class="demo-header">
+      <span class="icon">🎨</span>
+      <span class="title">编程范式对比</span>
+      <span class="subtitle">告诉"怎么做" vs 告诉"要什么"</span>
+    </div>
+
+    <!-- 主内容区 -->
+    <div class="demo-content">
+      <!-- 视图切换 -->
       <div class="toggle-group">
         <button
           v-for="view in views"
@@ -24,14 +24,13 @@
           {{ view.label }}
         </button>
       </div>
-    </div>
 
     <div class="comparison-container">
       <!-- Imperative Side (jQuery) -->
       <div class="side imperative-side">
         <div class="side-header">
-          <span class="badge imperative">jQuery / Imperative</span>
-          <h4>"Tell me HOW"</h4>
+          <span class="badge imperative">jQuery / 命令式</span>
+          <span class="sub-label">通俗说法: 告诉怎么做</span>
         </div>
 
         <div class="demo-area">
@@ -112,8 +111,8 @@
       <!-- Declarative Side (Vue) -->
       <div class="side declarative-side">
         <div class="side-header">
-          <span class="badge declarative">Vue / Declarative</span>
-          <h4>"Tell me WHAT"</h4>
+          <span class="badge declarative">Vue / 声明式</span>
+          <span class="sub-label">通俗说法: 告诉要什么</span>
         </div>
 
         <div class="demo-area">
@@ -188,11 +187,20 @@
       </div>
     </div>
 
+    <!-- 底部控制 -->
     <div class="demo-controls">
       <button class="toggle-btn" @click="showAnalysis = !showAnalysis">
         {{ showAnalysis ? '隐藏' : '显示' }}对比分析
       </button>
     </div>
+    </div>
+
+    <!-- 信息框 -->
+    <div class="info-box">
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>
+      命令式编程需要一步步告诉浏览器"怎么做"，声明式编程只需告诉浏览器"要什么"，框架会自动处理细节。
+    </div>
   </div>
 </template>
 
@@ -224,13 +232,40 @@ function updateJq(change) {
 .imperative-declarative-demo {
   border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
-  background-color: var(--vp-c-bg-soft);
-  padding: 1.5rem;
+  background: var(--vp-c-bg-soft);
+  padding: 1rem;
   margin: 1rem 0;
+  max-height: 600px;
+  overflow-y: auto;
 }
 
+/* 标题区 */
 .demo-header {
-  margin-bottom: 1.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.demo-header .icon {
+  font-size: 1.25rem;
+}
+
+.demo-header .title {
+  font-weight: bold;
+  font-size: 1rem;
+}
+
+.demo-header .subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.85rem;
+  margin-left: 0.5rem;
+}
+
+.demo-content {
+  margin-bottom: 0.5rem;
 }
 
 .toggle-group {
@@ -275,9 +310,10 @@ function updateJq(change) {
 
 .side-header {
   text-align: center;
+  margin-bottom: 1rem;
 }
 
-.badge {
+.side-header .badge {
   display: inline-block;
   padding: 0.25rem 0.75rem;
   border-radius: 9999px;
@@ -285,14 +321,11 @@ function updateJq(change) {
   font-weight: 600;
 }
 
-.badge.imperative {
-  background-color: rgba(7, 105, 173, 0.2);
-  color: #0769ad;
-}
-
-.badge.declarative {
-  background-color: rgba(66, 184, 131, 0.2);
-  color: #2c8a5e;
+.side-header .sub-label {
+  display: block;
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+  margin-top: 0.5rem;
 }
 
 .side-header h4 {
@@ -356,7 +389,7 @@ function updateJq(change) {
 }
 
 .status-text.warning {
-  color: #f87171;
+  color: var(--vp-c-warning);
   font-weight: 600;
 }
 
@@ -406,8 +439,8 @@ function updateJq(change) {
 }
 
 .imperative-code {
-  background-color: #1e1e2e;
-  color: #a6accd;
+  background: var(--vp-c-bg-alt);
+  color: var(--vp-c-text-1);
 }
 
 .imperative-code code {
@@ -415,8 +448,8 @@ function updateJq(change) {
 }
 
 .declarative-code {
-  background-color: #1e1e2e;
-  color: #a6accd;
+  background: var(--vp-c-bg-alt);
+  color: var(--vp-c-text-1);
 }
 
 .declarative-code code {
@@ -433,7 +466,7 @@ function updateJq(change) {
   width: 40px;
   height: 40px;
   border-radius: 50%;
-  background: linear-gradient(135deg, #0769ad, #42b883);
+  background: var(--vp-c-brand);
   color: white;
   display: flex;
   align-items: center;
@@ -460,23 +493,43 @@ function updateJq(change) {
 }
 
 .pain-point {
-  background-color: rgba(248, 113, 113, 0.1);
-  color: #dc2626;
+  background: var(--vp-c-bg-alt);
+  color: var(--vp-c-danger);
 }
 
 .benefit {
-  background-color: rgba(74, 222, 128, 0.1);
-  color: #16a34a;
+  background: var(--vp-c-bg-alt);
+  color: var(--vp-c-success);
 }
 
 .demo-controls {
   display: flex;
   justify-content: center;
-  margin-top: 1.5rem;
-  padding-top: 1.5rem;
+  margin-top: 1rem;
+  padding-top: 1rem;
   border-top: 1px solid var(--vp-c-divider);
 }
 
+/* 信息框 */
+.info-box {
+  background: var(--vp-c-bg-alt);
+  padding: 0.75rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  display: flex;
+  gap: 0.25rem;
+  margin-top: 0.75rem;
+}
+
+.info-box .icon {
+  flex-shrink: 0;
+}
+
+.info-box strong {
+  color: var(--vp-c-text-1);
+}
+
 @media (max-width: 768px) {
   .comparison-container {
     grid-template-columns: 1fr;
diff --git a/docs/.vitepress/theme/components/appendix/frontend-evolution/JQueryVsStateDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-evolution/JQueryVsStateDemo.vue
index dca4dc7..4d6458f 100644
--- a/docs/.vitepress/theme/components/appendix/frontend-evolution/JQueryVsStateDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/frontend-evolution/JQueryVsStateDemo.vue
@@ -1,152 +1,130 @@
 <!--
-  JQueryVsStateDemo.vue - 餐厅账本对比
+  JQueryVsStateDemo.vue - 前端开发模式对比
   用"手工记账 vs 智能管家"的比喻来解释 jQuery vs Vue/React
 -->
 <template>
-  <div class="restaurant-demo">
-    <!-- 故事引入 -->
-    <div class="story-intro">
-      <div class="story-icon">👨‍🍳📒🤖</div>
-      <h3 class="story-title">老张的餐厅账本</h3>
-      <p class="story-desc">
-        老张开了家餐厅，每天要点菜、做菜、算账。有两种记账方式：<br>
-        <strong>传统方式：老张手工记</strong>（jQuery 模式） vs <strong>智能方式：请个管家</strong>（Vue/React 模式）<br>
-        看看哪种更轻松？
-      </p>
+  <div class="jquery-vs-state-demo">
+    <!-- 标题区 -->
+    <div class="demo-header">
+      <span class="icon">🔄</span>
+      <span class="title">前端开发模式</span>
+      <span class="subtitle">手动操作DOM vs 状态管理</span>
     </div>
 
-    <!-- 模式选择 -->
-    <div class="mode-tabs">
-      <button
-        class="tab-btn"
-        :class="{ active: mode === 'manual' }"
-        @click="mode = 'manual'"
-      >
-        <span class="tab-icon">✍️</span>
-        <span class="tab-text">手工记账</span>
-        <span class="tab-sub">jQuery 方式</span>
-      </button>
-      <button
-        class="tab-btn"
-        :class="{ active: mode === 'smart' }"
-        @click="mode = 'smart'"
-      >
-        <span class="tab-icon">🤖</span>
-        <span class="tab-text">智能管家</span>
-        <span class="tab-sub">Vue/React 方式</span>
-      </button>
-    </div>
-
-    <!-- 对比展示区 -->
-    <div class="comparison-showcase">
-      <!-- 左侧：场景描述 -->
-      <div class="scenario-panel">
-        <div class="scenario-header">
-          <span class="scenario-icon">{{ mode === 'manual' ? '👨‍🍳' : '🤖' }}</span>
-          <span class="scenario-title">{{ mode === 'manual' ? '老张手工记账' : '智能管家记账' }}</span>
-        </div>
-
-        <div class="scenario-content">
-          <div class="step-list">
-            <div
-              v-for="(step, index) in currentSteps"
-              :key="index"
-              class="step-item"
-              :class="{ active: index === currentStep }"
-            >
-              <div class="step-number">{{ index + 1 }}</div>
-              <div class="step-text">{{ step }}</div>
-            </div>
-          </div>
-        </div>
+    <!-- 主内容区 -->
+    <div class="demo-content">
+      <!-- 模式选择 -->
+      <div class="mode-tabs">
+        <button
+          class="tab-btn"
+          :class="{ active: mode === 'manual' }"
+          @click="mode = 'manual'"
+        >
+          <span class="tab-icon">✍️</span>
+          <span class="tab-text">手工记账</span>
+          <span class="tab-sub">通俗说法: jQuery</span>
+        </button>
+        <button
+          class="tab-btn"
+          :class="{ active: mode === 'smart' }"
+          @click="mode = 'smart'"
+        >
+          <span class="tab-icon">🤖</span>
+          <span class="tab-text">智能管家</span>
+          <span class="tab-sub">通俗说法: Vue/React</span>
+        </button>
       </div>
 
-      <!-- 右侧：账本展示 -->
-      <div class="ledger-panel">
-        <div class="ledger-header">
-          <span class="ledger-icon">📒</span>
-          <span class="ledger-title">今日账本</span>
-          <span class="ledger-status" :class="mode">{{ ledgerStatus }}</span>
-        </div>
+      <!-- 对比展示区 -->
+      <div class="comparison-showcase">
+        <!-- 左侧：场景描述 -->
+        <div class="scenario-panel">
+          <div class="scenario-header">
+            <span class="scenario-icon">{{ mode === 'manual' ? '👨‍🍳' : '🤖' }}</span>
+            <span class="scenario-title">{{ mode === 'manual' ? '手工记账' : '智能管家' }}</span>
+          </div>
 
-        <div class="ledger-content">
-          <!-- 订单列表 -->
-          <div class="order-list">
-            <div
-              v-for="order in orders"
-              :key="order.id"
-              class="order-item"
-              :class="{ completed: order.completed }"
-            >
-              <div class="order-info">
-                <span class="order-name">{{ order.name }}</span>
-                <span class="order-price">¥{{ order.price }}</span>
-              </div>
-              <div class="order-status">
-                {{ order.completed ? '✓' : '○' }}
+          <div class="scenario-content">
+            <div class="step-list">
+              <div
+                v-for="(step, index) in currentSteps"
+                :key="index"
+                class="step-item"
+                :class="{ active: index === currentStep }"
+              >
+                <div class="step-number">{{ index + 1 }}</div>
+                <div class="step-text">{{ step }}</div>
               </div>
             </div>
           </div>
+        </div>
 
-          <!-- 总计 -->
-          <div class="total-section">
-            <div class="total-row">
-              <span>菜品数量：</span>
-              <span class="total-value">{{ completedCount }}/{{ orders.length }} 份</span>
+        <!-- 右侧：账本展示 -->
+        <div class="ledger-panel">
+          <div class="ledger-header">
+            <span class="ledger-icon">📒</span>
+            <span class="ledger-title">今日账本</span>
+            <span class="ledger-status" :class="mode">{{ ledgerStatus }}</span>
+          </div>
+
+          <div class="ledger-content">
+            <!-- 订单列表 -->
+            <div class="order-list">
+              <div
+                v-for="order in orders"
+                :key="order.id"
+                class="order-item"
+                :class="{ completed: order.completed }"
+              >
+                <div class="order-info">
+                  <span class="order-name">{{ order.name }}</span>
+                  <span class="order-price">¥{{ order.price }}</span>
+                </div>
+                <div class="order-status">
+                  {{ order.completed ? '✓' : '○' }}
+                </div>
+              </div>
             </div>
-            <div class="total-row total-final">
-              <span>今日营收：</span>
-              <span class="total-amount">¥{{ totalRevenue }}</span>
+
+            <!-- 总计 -->
+            <div class="total-section">
+              <div class="total-row">
+                <span>菜品数量：</span>
+                <span class="total-value">{{ completedCount }}/{{ orders.length }} 份</span>
+              </div>
+              <div class="total-row total-final">
+                <span>今日营收：</span>
+                <span class="total-amount">¥{{ totalRevenue }}</span>
+              </div>
             </div>
           </div>
         </div>
       </div>
+
+      <!-- 操作按钮 -->
+      <div class="action-buttons">
+        <button
+          class="btn btn-primary"
+          @click="processOrder"
+          :disabled="isProcessing || allCompleted"
+        >
+          {{ isProcessing ? '处理中...' : allCompleted ? '今日完成！' : '下一道菜' }}
+        </button>
+        <button
+          class="btn btn-secondary"
+          @click="resetDemo"
+        >
+          重新开始
+        </button>
+      </div>
     </div>
 
-    <!-- 操作按钮 -->
-    <div class="action-buttons">
-      <button
-        class="btn btn-primary"
-        @click="processOrder"
-        :disabled="isProcessing || allCompleted"
-      >
-        {{ isProcessing ? '处理中...' : allCompleted ? '今日完成！' : '下一道菜' }}
-      </button>
-      <button
-        class="btn btn-secondary"
-        @click="resetDemo"
-      >
-        重新开始
-      </button>
-    </div>
-
-    <!-- 优缺点对比 -->
-    <div class="comparison-table">
-      <div class="table-header">
-        <div class="table-title">💡 两种方式对比</div>
-      </div>
-      <div class="table-content">
-        <div class="comparison-row header">
-          <div class="col-feature">特点</div>
-          <div class="col-manual">手工记账 (jQuery)</div>
-          <div class="col-smart">智能管家 (Vue/React)</div>
-        </div>
-        <div class="comparison-row">
-          <div class="col-feature">工作方式</div>
-          <div class="col-manual">手动改每一处</div>
-          <div class="col-smart">改数据，界面自动变</div>
-        </div>
-        <div class="comparison-row">
-          <div class="col-feature">容易出错</div>
-          <div class="col-manual">容易漏改某处</div>
-          <div class="col-smart">自动同步，不易错</div>
-        </div>
-        <div class="comparison-row">
-          <div class="col-feature">适合场景</div>
-          <div class="col-manual">简单页面</div>
-          <div class="col-smart">复杂交互应用</div>
-        </div>
-      </div>
+    <!-- 信息框 -->
+    <div class="info-box">
+      <span class="icon">💡</span>
+      <strong>核心思想:</strong>
+      <span v-if="mode === 'manual'">jQuery需要手动查找和修改DOM,就像手工记账,容易出错。</span>
+      <span v-else>Vue/React通过状态自动更新界面,就像智能管家,改数据界面自动变。</span>
     </div>
   </div>
 </template>
@@ -237,53 +215,53 @@ const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))
 </script>
 
 <style scoped>
-.restaurant-demo {
-  border: 2px solid #e8e8e8;
-  border-radius: 16px;
-  background: linear-gradient(135deg, #fafbfc 0%, #f0f4f8 100%);
-  padding: 24px;
-  margin: 20px 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+.jquery-vs-state-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg-soft);
+  padding: 1rem;
+  margin: 1rem 0;
+  max-height: 600px;
+  overflow-y: auto;
 }
 
-/* 故事引入 */
-.story-intro {
-  text-align: center;
-  margin-bottom: 24px;
-  padding: 20px;
-  background: linear-gradient(135deg, #fff8e1, #ffecb3);
-  border-radius: 16px;
-  border: 2px dashed #ffc107;
+/* 标题区 */
+.demo-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
 }
 
-.story-icon {
-  font-size: 48px;
-  margin-bottom: 12px;
+.demo-header .icon {
+  font-size: 1.25rem;
 }
 
-.story-title {
-  font-size: 24px;
+.demo-header .title {
   font-weight: bold;
-  color: #e65100;
-  margin: 0 0 8px 0;
+  font-size: 1rem;
 }
 
-.story-desc {
-  font-size: 14px;
-  color: #666;
-  line-height: 1.6;
-  margin: 0;
+.demo-header .subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.85rem;
+  margin-left: 0.5rem;
+}
+
+/* 主内容区 */
+.demo-content {
+  margin-bottom: 0.75rem;
 }
 
 /* 模式选项卡 */
 .mode-tabs {
   display: flex;
-  gap: 12px;
-  margin-bottom: 24px;
-  background: white;
-  padding: 8px;
-  border-radius: 12px;
-  border: 2px solid #e0e0e0;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+  background: var(--vp-c-bg);
+  padding: 0.5rem;
+  border-radius: 8px;
+  border: 2px solid var(--vp-c-divider);
 }
 
 .tab-btn {
@@ -291,35 +269,36 @@ const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 4px;
-  padding: 16px;
+  gap: 0.25rem;
+  padding: 0.75rem;
   border: none;
-  border-radius: 8px;
+  border-radius: 6px;
   background: transparent;
   cursor: pointer;
-  transition: all 0.3s ease;
+  transition: all 0.2s;
+  color: var(--vp-c-text-1);
 }
 
 .tab-btn:hover {
-  background: #f5f5f5;
+  background: var(--vp-c-bg-alt);
 }
 
 .tab-btn.active {
-  background: linear-gradient(135deg, #667eea, #764ba2);
+  background: var(--vp-c-brand);
   color: white;
 }
 
 .tab-icon {
-  font-size: 32px;
+  font-size: 1.5rem;
 }
 
 .tab-text {
-  font-size: 14px;
+  font-size: 0.85rem;
   font-weight: bold;
 }
 
 .tab-sub {
-  font-size: 12px;
+  font-size: 0.75rem;
   opacity: 0.8;
 }
 
@@ -327,8 +306,8 @@ const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))
 .comparison-showcase {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 20px;
-  margin-bottom: 24px;
+  gap: 1rem;
+  margin-bottom: 1rem;
 }
 
 @media (max-width: 768px) {
@@ -339,67 +318,67 @@ const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))
 
 /* 场景面板 */
 .scenario-panel {
-  background: white;
-  border-radius: 16px;
-  border: 2px solid #e0e0e0;
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  border: 2px solid var(--vp-c-divider);
   overflow: hidden;
 }
 
 .scenario-header {
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 16px;
-  background: linear-gradient(135deg, #ffecb3, #ffe082);
-  border-bottom: 2px solid #e0e0e0;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background: var(--vp-c-bg-alt);
+  border-bottom: 2px solid var(--vp-c-divider);
 }
 
 .scenario-icon {
-  font-size: 28px;
+  font-size: 1.5rem;
 }
 
 .scenario-title {
-  font-size: 16px;
+  font-size: 0.9rem;
   font-weight: bold;
-  color: #333;
+  color: var(--vp-c-text-1);
 }
 
 .scenario-content {
-  padding: 16px;
+  padding: 1rem;
 }
 
 .step-list {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 0.5rem;
 }
 
 .step-item {
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 12px;
-  background: #f5f5f5;
-  border-radius: 8px;
-  transition: all 0.3s ease;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background: var(--vp-c-bg-alt);
+  border-radius: 6px;
+  transition: all 0.2s;
 }
 
 .step-item.active {
-  background: linear-gradient(135deg, #667eea, #764ba2);
+  background: var(--vp-c-brand);
   color: white;
-  transform: translateX(8px);
+  transform: translateX(4px);
 }
 
 .step-number {
-  width: 28px;
-  height: 28px;
+  width: 24px;
+  height: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: white;
-  color: #333;
+  background: var(--vp-c-bg);
+  color: var(--vp-c-text-1);
   border-radius: 50%;
-  font-size: 12px;
+  font-size: 0.75rem;
   font-weight: bold;
 }
 
@@ -409,142 +388,147 @@ const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))
 }
 
 .step-text {
-  font-size: 14px;
+  font-size: 0.85rem;
   flex: 1;
 }
 
 /* 账本面板 */
 .ledger-panel {
-  background: white;
-  border-radius: 16px;
-  border: 2px solid #e0e0e0;
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  border: 2px solid var(--vp-c-divider);
   overflow: hidden;
 }
 
 .ledger-header {
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 16px;
-  background: linear-gradient(135deg, #c8e6c9, #a5d6a7);
-  border-bottom: 2px solid #e0e0e0;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background: var(--vp-c-bg-alt);
+  border-bottom: 2px solid var(--vp-c-divider);
 }
 
 .ledger-icon {
-  font-size: 28px;
+  font-size: 1.5rem;
 }
 
 .ledger-title {
   flex: 1;
-  font-size: 16px;
+  font-size: 0.9rem;
   font-weight: bold;
-  color: #333;
+  color: var(--vp-c-text-1);
 }
 
 .ledger-status {
-  font-size: 12px;
-  padding: 4px 12px;
+  font-size: 0.75rem;
+  padding: 0.25rem 0.75rem;
   border-radius: 12px;
-  background: white;
-  color: #666;
+  background: var(--vp-c-bg);
+  color: var(--vp-c-text-2);
 }
 
 .ledger-status.manual {
-  background: #fff3e0;
-  color: #e65100;
+  background: var(--vp-c-warning);
+  color: white;
+}
+
+.ledger-status.smart {
+  background: var(--vp-c-success);
+  color: white;
 }
 
 .ledger-content {
-  padding: 16px;
+  padding: 1rem;
 }
 
 .order-list {
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  margin-bottom: 16px;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
 }
 
 .order-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 12px;
-  background: #f5f5f5;
-  border-radius: 8px;
-  transition: all 0.3s ease;
+  padding: 0.75rem;
+  background: var(--vp-c-bg-alt);
+  border-radius: 6px;
+  transition: all 0.2s;
 }
 
 .order-item.completed {
-  background: #e8f5e9;
-  border-left: 4px solid #4caf50;
+  background: var(--vp-c-success);
+  border-left: 4px solid var(--vp-c-brand);
+  opacity: 0.3;
 }
 
 .order-info {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 0.25rem;
 }
 
 .order-name {
-  font-size: 14px;
+  font-size: 0.85rem;
   font-weight: bold;
-  color: #333;
+  color: var(--vp-c-text-1);
 }
 
 .order-price {
-  font-size: 13px;
-  color: #e65100;
+  font-size: 0.75rem;
+  color: var(--vp-c-brand);
   font-weight: bold;
 }
 
 .order-status {
-  font-size: 18px;
+  font-size: 1rem;
 }
 
 .total-section {
-  border-top: 2px dashed #e0e0e0;
-  padding-top: 12px;
+  border-top: 2px dashed var(--vp-c-divider);
+  padding-top: 0.75rem;
 }
 
 .total-row {
   display: flex;
   justify-content: space-between;
-  padding: 8px 0;
-  font-size: 14px;
-  color: #666;
+  padding: 0.5rem 0;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
 }
 
 .total-row.total-final {
-  font-size: 16px;
+  font-size: 0.9rem;
   font-weight: bold;
-  color: #333;
-  border-top: 2px solid #e0e0e0;
-  margin-top: 8px;
-  padding-top: 12px;
+  color: var(--vp-c-text-1);
+  border-top: 2px solid var(--vp-c-divider);
+  margin-top: 0.5rem;
+  padding-top: 0.75rem;
 }
 
 .total-amount {
-  color: #4caf50;
-  font-size: 20px;
+  color: var(--vp-c-success);
+  font-size: 1.1rem;
 }
 
 /* 操作按钮 */
 .action-buttons {
   display: flex;
   justify-content: center;
-  gap: 12px;
-  margin-bottom: 24px;
+  gap: 0.75rem;
 }
 
 .btn {
-  padding: 12px 24px;
+  padding: 0.5rem 1rem;
   border: none;
-  border-radius: 8px;
-  font-size: 16px;
+  border-radius: 6px;
+  font-size: 0.85rem;
   font-weight: bold;
   cursor: pointer;
-  transition: all 0.3s ease;
+  transition: all 0.2s;
 }
 
 .btn:hover:not(:disabled) {
@@ -558,91 +542,31 @@ const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))
 }
 
 .btn-primary {
-  background: linear-gradient(135deg, #667eea, #764ba2);
+  background: var(--vp-c-brand);
   color: white;
 }
 
 .btn-secondary {
-  background: #f5f5f5;
-  color: #666;
+  background: var(--vp-c-bg-alt);
+  color: var(--vp-c-text-1);
 }
 
-/* 对比表格 */
-.comparison-table {
-  background: white;
-  border-radius: 16px;
-  border: 2px solid #e0e0e0;
-  overflow: hidden;
+/* 信息框 */
+.info-box {
+  background: var(--vp-c-bg-alt);
+  padding: 0.75rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  display: flex;
+  gap: 0.25rem;
 }
 
-.table-header {
-  padding: 16px;
-  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
-  border-bottom: 2px solid #e0e0e0;
+.info-box .icon {
+  flex-shrink: 0;
 }
 
-.table-title {
-  font-size: 16px;
-  font-weight: bold;
-  color: #1565c0;
-}
-
-.table-content {
-  padding: 0;
-}
-
-.comparison-row {
-  display: grid;
-  grid-template-columns: 1.2fr 1.4fr 1.4fr;
-  gap: 16px;
-  padding: 16px;
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.comparison-row:last-child {
-  border-bottom: none;
-}
-
-.comparison-row.header {
-  background: #f5f5f5;
-  font-weight: bold;
-  color: #333;
-}
-
-.col-feature {
-  color: #666;
-}
-
-.col-manual {
-  color: #e65100;
-}
-
-.col-smart {
-  color: #4caf50;
-}
-
-.comparison-row.header .col-manual,
-.comparison-row.header .col-smart {
-  color: #333;
-}
-
-/* 响应式 */
-@media (max-width: 768px) {
-  .comparison-showcase {
-    grid-template-columns: 1fr;
-  }
-
-  .comparison-row {
-    grid-template-columns: 1fr;
-    gap: 8px;
-  }
-
-  .comparison-row.header {
-    display: none;
-  }
-
-  .mode-tabs {
-    flex-direction: column;
-  }
+.info-box strong {
+  color: var(--vp-c-text-1);
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/frontend-evolution/RoutingModeDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-evolution/RoutingModeDemo.vue
index b3a0b94..c77ed1a 100644
--- a/docs/.vitepress/theme/components/appendix/frontend-evolution/RoutingModeDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/frontend-evolution/RoutingModeDemo.vue
@@ -4,16 +4,24 @@
 -->
 <template>
   <div class="routing-demo">
-    <!-- 故事引入 -->
-    <div class="story-box">
-      <div class="story-emoji">📖📄✨</div>
-      <h4 class="story-title">小明看书记</h4>
-      <p class="story-text">
-        小明喜欢看书。有两种看书方式：<br>
-        <strong>MPA 方式：像翻书</strong>，每翻一页都要换一本书 <strong>SPA 方式：像换纸</strong>，在同一本书里换内容
-      </p>
+    <!-- 标题区 -->
+    <div class="demo-header">
+      <span class="icon">📖</span>
+      <span class="title">路由模式对比</span>
+      <span class="subtitle">MPA 多页应用 vs SPA 单页应用</span>
     </div>
 
+    <!-- 主内容区 -->
+    <div class="demo-content">
+      <!-- 故事引入 -->
+      <div class="story-box">
+        <p class="story-text">
+          <strong>通俗说法：</strong>小明喜欢看书，有两种看书方式：<br>
+          <strong>MPA 方式（像翻书）</strong>：每翻一页都要换一本书<br>
+          <strong>SPA 方式（像换纸）</strong>：在同一本书里换内容
+        </p>
+      </div>
+
     <!-- 模式选择 -->
     <div class="mode-selector">
       <div
@@ -23,7 +31,7 @@
       >
         <div class="mode-icon">📚</div>
         <div class="mode-name">MPA 多页应用</div>
-        <div class="mode-sub">像翻书：每次都换一本</div>
+        <div class="mode-sub">通俗说法: 像翻书</div>
         <div class="mode-desc">每点一次链接，浏览器向服务器要新页面</div>
       </div>
 
@@ -36,7 +44,7 @@
       >
         <div class="mode-icon">📄</div>
         <div class="mode-name">SPA 单页应用</div>
-        <div class="mode-sub">像换纸：同一本书换内容</div>
+        <div class="mode-sub">通俗说法: 像换纸</div>
         <div class="mode-desc">只加载一次，后续只切换内容</div>
       </div>
     </div>
@@ -185,14 +193,13 @@
     </div>
 
     <!-- 核心要点 -->
-    <div class="key-takeaway">
-      <div class="takeaway-icon">🎯</div>
-      <div class="takeaway-content">
-        <strong>核心差异：</strong>
-        <strong>MPA</strong> 每次切换都要"整页刷新"，像翻书，适合内容为主的网站；
-        <strong>SPA</strong> 只加载一次，后续"局部更新"，像换纸，适合交互复杂的应用。
-        关键是：<strong>状态会不会丢</strong>。
-      </div>
+    <div class="info-box">
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>
+      <strong>MPA</strong> 每次切换都要"整页刷新"，像翻书，适合内容为主的网站；
+      <strong>SPA</strong> 只加载一次，后续"局部更新"，像换纸，适合交互复杂的应用。
+      关键是：<strong>状态会不会丢</strong>。
+    </div>
     </div>
   </div>
 </template>
@@ -251,7 +258,7 @@ const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))
 
 <style scoped>
 .routing-demo {
-  border: 2px solid #e0e0e0;
+  border: 2px solid var(--vp-c-divider);
   border-radius: 16px;
   background: linear-gradient(135deg, #fafbfc 0%, #f0f4f8 100%);
   padding: 24px;
@@ -303,7 +310,7 @@ const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))
   min-width: 200px;
   max-width: 280px;
   background: white;
-  border: 3px solid #e0e0e0;
+  border: 3px solid var(--vp-c-divider);
   border-radius: 16px;
   padding: 20px;
   text-align: center;
@@ -356,7 +363,7 @@ const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))
 .demo-area {
   background: white;
   border-radius: 16px;
-  border: 2px solid #e0e0e0;
+  border: 2px solid var(--vp-c-divider);
   padding: 20px;
   margin-bottom: 24px;
 }
@@ -493,7 +500,7 @@ const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))
 /* 阅读区 */
 .reading-paper {
   background: white;
-  border: 2px solid #e0e0e0;
+  border: 2px solid var(--vp-c-divider);
   border-radius: 12px;
   padding: 16px;
   min-height: 200px;
@@ -524,7 +531,7 @@ const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))
 .state-test {
   margin-top: 16px;
   padding-top: 16px;
-  border-top: 2px dashed #e0e0e0;
+  border-top: 2px dashed var(--vp-c-divider);
 }
 
 .test-label {
@@ -537,7 +544,7 @@ const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))
 .test-input {
   width: 100%;
   padding: 8px 12px;
-  border: 1px solid #e0e0e0;
+  border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
   font-size: 13px;
   box-sizing: border-box;
@@ -572,7 +579,7 @@ const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))
 
 .nav-btn {
   padding: 8px 16px;
-  border: 2px solid #e0e0e0;
+  border: 2px solid var(--vp-c-divider);
   border-radius: 8px;
   background: white;
   cursor: pointer;
@@ -632,7 +639,7 @@ const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))
 .comparison-table {
   background: white;
   border-radius: 16px;
-  border: 2px solid #e0e0e0;
+  border: 2px solid var(--vp-c-divider);
   overflow: hidden;
   margin-bottom: 20px;
 }
@@ -655,7 +662,7 @@ const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))
   grid-template-columns: 1fr 1.5fr 1.5fr;
   gap: 16px;
   padding: 16px;
-  border-bottom: 1px solid #e0e0e0;
+  border-bottom: 1px solid var(--vp-c-divider);
 }
 
 .comparison-row:last-child {
diff --git a/docs/.vitepress/theme/components/appendix/frontend-evolution/SliceRequestDemo.vue b/docs/.vitepress/theme/components/appendix/frontend-evolution/SliceRequestDemo.vue
index ddd9b0d..3400a70 100644
--- a/docs/.vitepress/theme/components/appendix/frontend-evolution/SliceRequestDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/frontend-evolution/SliceRequestDemo.vue
@@ -1,141 +1,140 @@
 <!--
-  SliceRequestDemo.vue - 搬家快递大作战
-  用"搬家打包"的比喻来解释 HTTP 请求优化（切图 vs 雪碧图）
+  SliceRequestDemo.vue - HTTP请求优化对比
+  用"搬家"的比喻来解释雪碧图 vs 切片请求
 -->
 <template>
-  <div class="moving-game">
-    <!-- 故事引入 -->
-    <div class="story-box">
-      <div class="story-emoji">📦🚚🏠</div>
-      <h4 class="story-title">小明搬家记</h4>
-      <p class="story-text">
-        小明要搬 6 箱书到新房子。有两种搬家方式：<br>
-        <strong>A 方案：一箱一箱搬</strong>（切图模式） vs <strong>B 方案：一次性打包运走</strong>（雪碧图模式）<br>
-        看看哪种更省时间？
-      </p>
+  <div class="slice-request-demo">
+    <!-- 标题区 -->
+    <div class="demo-header">
+      <span class="icon">📦</span>
+      <span class="title">HTTP请求优化</span>
+      <span class="subtitle">雪碧图 vs 独立请求</span>
     </div>
 
-    <!-- 模式选择 -->
-    <div class="mode-selector">
-      <div
-        class="mode-card"
-        :class="{ active: mode === 'separate' }"
-        @click="mode = 'separate'"
-      >
-        <div class="mode-icon">🛵</div>
-        <div class="mode-name">A 方案：一箱一趟</div>
-        <div class="mode-desc">小面包车，一次拉一箱</div>
-        <div class="mode-detail">需要 6 趟运输</div>
+    <!-- 主内容区 -->
+    <div class="demo-content">
+      <!-- 故事引入 -->
+      <div class="story-box">
+        <p class="story-text">
+          <strong>通俗说法：</strong>就像搬家——<br>
+          <strong>切图模式</strong>：一箱一箱搬，需要6趟（6次HTTP请求）<br>
+          <strong>雪碧图模式</strong>：打包一次性运走，只需1趟（1次HTTP请求）
+        </p>
       </div>
 
-      <div class="vs-divider">VS</div>
-
-      <div
-        class="mode-card"
-        :class="{ active: mode === 'packed' }"
-        @click="mode = 'packed'"
-      >
-        <div class="mode-icon">🚚</div>
-        <div class="mode-name">B 方案：打包一车拉</div>
-        <div class="mode-desc">大卡车，6箱一次运走</div>
-        <div class="mode-detail">只需 1 趟运输</div>
-      </div>
-    </div>
-
-    <!-- 动画演示区 -->
-    <div class="animation-area">
-      <!-- 起点 -->
-      <div class="location start">
-        <div class="location-icon">🏠</div>
-        <div class="location-label">旧家</div>
-        <div class="boxes-remaining">
-          剩余箱子: <span class="count">{{ remainingBoxes }}</span>
-        </div>
-      </div>
-
-      <!-- 道路 -->
-      <div class="road">
-        <div class="road-line"></div>
-
-        <!-- 运输车辆 -->
+      <!-- 模式选择 -->
+      <div class="mode-selector">
         <div
-          v-for="vehicle in vehicles"
-          :key="vehicle.id"
-          class="vehicle"
-          :class="{ 'moving': vehicle.isMoving }"
-          :style="{ left: vehicle.position + '%' }"
+          class="mode-card"
+          :class="{ active: mode === 'separate' }"
+          @click="mode = 'separate'"
         >
-          <div class="vehicle-body">
-            {{ mode === 'separate' ? '🛵' : '🚚' }}
+          <div class="mode-icon">🛵</div>
+          <div class="mode-name">切图模式</div>
+          <div class="mode-desc">通俗说法: 一箱一趟</div>
+          <div class="mode-detail">需要 6 趟运输</div>
+        </div>
+
+        <div class="vs-divider">VS</div>
+
+        <div
+          class="mode-card"
+          :class="{ active: mode === 'packed' }"
+          @click="mode = 'packed'"
+        >
+          <div class="mode-icon">🚚</div>
+          <div class="mode-name">雪碧图模式</div>
+          <div class="mode-desc">通俗说法: 打包一车拉</div>
+          <div class="mode-detail">只需 1 趟运输</div>
+        </div>
+      </div>
+
+      <!-- 动画演示区 -->
+      <div class="animation-area">
+        <!-- 起点 -->
+        <div class="location start">
+          <div class="location-icon">🏠</div>
+          <div class="location-label">旧家</div>
+          <div class="boxes-remaining">
+            剩余箱子: <span class="count">{{ remainingBoxes }}</span>
           </div>
-          <div class="vehicle-cargo" v-if="vehicle.cargo > 0">
-            {{ mode === 'separate' ? '📦' : '📦×' + vehicle.cargo }}
+        </div>
+
+        <!-- 道路 -->
+        <div class="road">
+          <div class="road-line"></div>
+
+          <!-- 运输车辆 -->
+          <div
+            v-for="vehicle in vehicles"
+            :key="vehicle.id"
+            class="vehicle"
+            :class="{ 'moving': vehicle.isMoving }"
+            :style="{ left: vehicle.position + '%' }"
+          >
+            <div class="vehicle-body">
+              {{ mode === 'separate' ? '🛵' : '🚚' }}
+            </div>
+            <div class="vehicle-cargo" v-if="vehicle.cargo > 0">
+              {{ mode === 'separate' ? '📦' : '📦×' + vehicle.cargo }}
+            </div>
+          </div>
+        </div>
+
+        <!-- 终点 -->
+        <div class="location end">
+          <div class="location-icon">🏡</div>
+          <div class="location-label">新家</div>
+          <div class="boxes-delivered">
+            已送达: <span class="count">{{ deliveredBoxes }}</span>/6
           </div>
         </div>
       </div>
 
-      <!-- 终点 -->
-      <div class="location end">
-        <div class="location-icon">🏡</div>
-        <div class="location-label">新家</div>
-        <div class="boxes-delivered">
-          已送达: <span class="count">{{ deliveredBoxes }}</span>/6
+      <!-- 统计面板 -->
+      <div class="stats-panel">
+        <div class="stat-item">
+          <div class="stat-label">运输趟数</div>
+          <div class="stat-value" :class="{ 'good': trips <= 2, 'bad': trips > 2 }">
+            {{ trips }} 趟
+          </div>
         </div>
+        <div class="stat-item">
+          <div class="stat-label">总耗时</div>
+          <div class="stat-value">{{ totalTime.toFixed(1) }} 秒</div>
+        </div>
+        <div class="stat-item">
+          <div class="stat-label">效率评分</div>
+          <div class="stat-value" :class="efficiencyClass">
+            {{ efficiency }}
+          </div>
+        </div>
+      </div>
+
+      <!-- 控制按钮 -->
+      <div class="controls">
+        <button
+          class="btn btn-primary"
+          @click="startSimulation"
+          :disabled="isRunning"
+        >
+          {{ isRunning ? '运输中...' : '开始搬家' }}
+        </button>
+        <button
+          class="btn btn-secondary"
+          @click="resetSimulation"
+        >
+          重置
+        </button>
       </div>
     </div>
 
-    <!-- 统计面板 -->
-    <div class="stats-panel">
-      <div class="stat-item">
-        <div class="stat-label">运输趟数</div>
-        <div class="stat-value" :class="{ 'good': trips <= 2, 'bad': trips > 2 }">
-          {{ trips }} 趟
-        </div>
-      </div>
-      <div class="stat-item">
-        <div class="stat-label">总耗时</div>
-        <div class="stat-value">{{ totalTime.toFixed(1) }} 秒</div>
-      </div>
-      <div class="stat-item">
-        <div class="stat-label">效率评分</div>
-        <div class="stat-value" :class="efficiencyClass">
-          {{ efficiency }}
-        </div>
-      </div>
-    </div>
-
-    <!-- 控制按钮 -->
-    <div class="controls">
-      <button
-        class="btn btn-primary"
-        @click="startSimulation"
-        :disabled="isRunning"
-      >
-        {{ isRunning ? '运输中...' : '开始搬家' }}
-      </button>
-      <button
-        class="btn btn-secondary"
-        @click="resetSimulation"
-      >
-        重置
-      </button>
-    </div>
-
-    <!-- 知识点总结 -->
-    <div class="knowledge-box">
-      <div class="knowledge-title">💡 核心原理</div>
-      <div class="knowledge-content">
-        <p v-if="mode === 'separate'">
-          <strong>切图模式（分开请求）：</strong>就像一箱一箱搬，每次只拉一件货。
-          浏览器要发起 6 次 HTTP 请求，每次都要建立连接、传输数据，
-          <span class="highlight-bad">效率低、耗时长</span>。
-        </p>
-        <p v-else>
-          <strong>雪碧图模式（合并请求）：</strong>就像用大卡车一次性拉走所有箱子。
-          浏览器只需 1 次 HTTP 请求就能获取所有图片，
-          <span class="highlight-good">大幅减少连接开销，速度更快</span>！
-        </p>
-      </div>
+    <!-- 信息框 -->
+    <div class="info-box">
+      <span class="icon">💡</span>
+      <strong>核心思想:</strong>
+      <span v-if="mode === 'separate'">切图模式每次只拉一件货,需要6次HTTP请求,效率低。</span>
+      <span v-else>雪碧图模式打包一次性运走,只需1次HTTP请求,大幅减少连接开销。</span>
     </div>
   </div>
 </template>
@@ -254,40 +253,56 @@ const resetStats = () => {
 </script>
 
 <style scoped>
-.moving-game {
-  border: 2px solid #e8e8e8;
-  border-radius: 16px;
-  background: linear-gradient(135deg, #fafbfc 0%, #f0f4f8 100%);
-  padding: 24px;
-  margin: 20px 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+.slice-request-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg-soft);
+  padding: 1rem;
+  margin: 1rem 0;
+  max-height: 600px;
+  overflow-y: auto;
+}
+
+/* 标题区 */
+.demo-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.demo-header .icon {
+  font-size: 1.25rem;
+}
+
+.demo-header .title {
+  font-weight: bold;
+  font-size: 1rem;
+}
+
+.demo-header .subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.85rem;
+  margin-left: 0.5rem;
+}
+
+/* 主内容区 */
+.demo-content {
+  margin-bottom: 0.75rem;
 }
 
 /* 故事框 */
 .story-box {
   text-align: center;
-  margin-bottom: 24px;
-  padding: 20px;
-  background: linear-gradient(135deg, #fff8e1, #ffecb3);
-  border-radius: 16px;
-  border: 2px dashed #ffc107;
-}
-
-.story-emoji {
-  font-size: 48px;
-  margin-bottom: 8px;
-}
-
-.story-title {
-  font-size: 20px;
-  font-weight: bold;
-  color: #8b4513;
-  margin: 0 0 8px 0;
+  margin-bottom: 1rem;
+  padding: 0.75rem;
+  background: var(--vp-c-bg-alt);
+  border-radius: 6px;
 }
 
 .story-text {
-  font-size: 14px;
-  color: #666;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
   margin: 0;
   line-height: 1.6;
 }
@@ -297,67 +312,67 @@ const resetStats = () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 16px;
-  margin-bottom: 24px;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
   flex-wrap: wrap;
 }
 
 .mode-card {
-  background: white;
-  border: 3px solid #e0e0e0;
-  border-radius: 16px;
-  padding: 20px;
+  background: var(--vp-c-bg);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 1rem;
   text-align: center;
   cursor: pointer;
-  transition: all 0.3s ease;
-  min-width: 200px;
+  transition: all 0.2s;
+  min-width: 160px;
   flex: 1;
-  max-width: 280px;
+  max-width: 220px;
 }
 
 .mode-card:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 .mode-card.active {
-  border-color: #4caf50;
-  background: #e8f5e9;
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-brand-soft);
 }
 
 .mode-icon {
-  font-size: 48px;
-  margin-bottom: 12px;
+  font-size: 2rem;
+  margin-bottom: 0.5rem;
 }
 
 .mode-name {
-  font-size: 16px;
+  font-size: 0.9rem;
   font-weight: bold;
-  color: #333;
-  margin-bottom: 8px;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.5rem;
 }
 
 .mode-desc {
-  font-size: 13px;
-  color: #666;
-  margin-bottom: 8px;
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+  margin-bottom: 0.5rem;
 }
 
 .mode-detail {
-  font-size: 14px;
+  font-size: 0.85rem;
   font-weight: bold;
-  color: #e65100;
-  padding: 4px 12px;
-  background: #fff3e0;
+  color: var(--vp-c-brand);
+  padding: 0.25rem 0.75rem;
+  background: var(--vp-c-bg-alt);
   border-radius: 12px;
   display: inline-block;
 }
 
 .vs-divider {
-  font-size: 24px;
+  font-size: 1.25rem;
   font-weight: bold;
-  color: #999;
-  padding: 0 8px;
+  color: var(--vp-c-text-3);
+  padding: 0 0.5rem;
 }
 
 /* 动画演示区 */
@@ -365,52 +380,52 @@ const resetStats = () => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 16px;
-  margin-bottom: 20px;
-  padding: 20px;
-  background: white;
-  border-radius: 16px;
-  border: 2px solid #e0e0e0;
+  gap: 1rem;
+  margin-bottom: 1rem;
+  padding: 1rem;
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  border: 2px solid var(--vp-c-divider);
 }
 
 .location {
   text-align: center;
-  min-width: 100px;
+  min-width: 80px;
 }
 
 .location-icon {
-  font-size: 40px;
-  margin-bottom: 8px;
+  font-size: 2rem;
+  margin-bottom: 0.5rem;
 }
 
 .location-label {
-  font-size: 14px;
+  font-size: 0.85rem;
   font-weight: bold;
-  color: #333;
-  margin-bottom: 8px;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.5rem;
 }
 
 .boxes-remaining,
 .boxes-delivered {
-  font-size: 12px;
-  color: #666;
-  padding: 4px 8px;
-  background: #f5f5f5;
-  border-radius: 8px;
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+  padding: 0.25rem 0.5rem;
+  background: var(--vp-c-bg-alt);
+  border-radius: 6px;
 }
 
 .count {
   font-weight: bold;
-  color: #e65100;
-  font-size: 16px;
+  color: var(--vp-c-brand);
+  font-size: 0.9rem;
 }
 
 .road {
   flex: 1;
   position: relative;
-  height: 80px;
-  background: linear-gradient(to bottom, #e8eaf6 0%, #c5cae9 100%);
-  border-radius: 8px;
+  height: 60px;
+  background: var(--vp-c-bg-alt);
+  border-radius: 6px;
   overflow: hidden;
 }
 
@@ -422,8 +437,8 @@ const resetStats = () => {
   height: 4px;
   background: repeating-linear-gradient(
     90deg,
-    #7986cb 0px,
-    #7986cb 20px,
+    var(--vp-c-brand) 0px,
+    var(--vp-c-brand) 20px,
     transparent 20px,
     transparent 40px
   );
@@ -441,89 +456,86 @@ const resetStats = () => {
 }
 
 .vehicle-body {
-  font-size: 32px;
-  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
+  font-size: 1.5rem;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
 }
 
 .vehicle-cargo {
-  font-size: 12px;
-  background: white;
-  padding: 2px 6px;
-  border-radius: 8px;
-  margin-top: 2px;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  font-size: 0.75rem;
+  background: var(--vp-c-bg);
+  padding: 0.125rem 0.375rem;
+  border-radius: 6px;
+  margin-top: 0.125rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   font-weight: bold;
-  color: #e65100;
+  color: var(--vp-c-brand);
 }
 
 /* 统计面板 */
 .stats-panel {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 16px;
-  margin-bottom: 20px;
+  gap: 1rem;
+  margin-bottom: 1rem;
 }
 
 .stat-item {
-  background: white;
-  border-radius: 12px;
-  padding: 16px;
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  padding: 1rem;
   text-align: center;
-  border: 2px solid #e0e0e0;
+  border: 2px solid var(--vp-c-divider);
 }
 
 .stat-label {
-  font-size: 13px;
-  color: #666;
-  margin-bottom: 8px;
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+  margin-bottom: 0.5rem;
 }
 
 .stat-value {
-  font-size: 24px;
+  font-size: 1.25rem;
   font-weight: bold;
+  color: var(--vp-c-text-1);
 }
 
 .stat-value.good {
-  color: #4caf50;
+  color: var(--vp-c-success);
 }
 
 .stat-value.bad {
-  color: #f44336;
+  color: var(--vp-c-danger);
 }
 
 .stat-value.excellent {
-  color: #2196f3;
-}
-
-.stat-value.good {
-  color: #4caf50;
+  color: var(--vp-c-brand);
 }
 
 .stat-value.poor {
-  color: #ff9800;
+  color: var(--vp-c-warning);
 }
 
 /* 控制按钮 */
 .controls {
   display: flex;
   justify-content: center;
-  gap: 12px;
-  margin-bottom: 20px;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
 }
 
 .btn {
-  padding: 12px 24px;
+  padding: 0.5rem 1rem;
   border: none;
-  border-radius: 8px;
-  font-size: 16px;
+  border-radius: 6px;
+  font-size: 0.9rem;
   font-weight: bold;
   cursor: pointer;
-  transition: all 0.3s ease;
+  transition: all 0.2s;
 }
 
 .btn:hover:not(:disabled) {
   transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
 .btn:disabled {
@@ -532,48 +544,32 @@ const resetStats = () => {
 }
 
 .btn-primary {
-  background: linear-gradient(135deg, #667eea, #764ba2);
+  background: var(--vp-c-brand);
   color: white;
 }
 
 .btn-secondary {
-  background: #f5f5f5;
-  color: #666;
+  background: var(--vp-c-bg-alt);
+  color: var(--vp-c-text-1);
 }
 
-/* 知识点总结 */
-.knowledge-box {
-  background: linear-gradient(135deg, #e3f2fd, #f3e5f5);
-  border-radius: 12px;
-  padding: 20px;
-  border-left: 4px solid #2196f3;
+/* 信息框 */
+.info-box {
+  background: var(--vp-c-bg-alt);
+  padding: 0.75rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  display: flex;
+  gap: 0.25rem;
 }
 
-.knowledge-title {
-  font-size: 16px;
-  font-weight: bold;
-  color: #1565c0;
-  margin-bottom: 12px;
+.info-box .icon {
+  flex-shrink: 0;
 }
 
-.knowledge-content {
-  font-size: 14px;
-  line-height: 1.6;
-  color: #333;
-}
-
-.knowledge-content p {
-  margin: 0;
-}
-
-.highlight-good {
-  color: #4caf50;
-  font-weight: bold;
-}
-
-.highlight-bad {
-  color: #f44336;
-  font-weight: bold;
+.info-box strong {
+  color: var(--vp-c-text-1);
 }
 
 /* 响应式 */
@@ -588,7 +584,7 @@ const resetStats = () => {
 
   .animation-area {
     flex-direction: column;
-    gap: 12px;
+    gap: 0.75rem;
   }
 
   .road {
diff --git a/docs/.vitepress/theme/components/appendix/git-intro/GitThreeAreasDemo.vue b/docs/.vitepress/theme/components/appendix/git-intro/GitThreeAreasDemo.vue
index f97b8fe..0a5a16c 100644
--- a/docs/.vitepress/theme/components/appendix/git-intro/GitThreeAreasDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/git-intro/GitThreeAreasDemo.vue
@@ -1,6 +1,13 @@
 <template>
   <div class="three-areas-demo">
-    <div class="scene">
+    <div class="demo-header">
+      <span class="icon">📂</span>
+      <span class="title">Git 三区概念</span>
+      <span class="subtitle">工作区 → 暂存区 → 仓库</span>
+    </div>
+
+    <div class="demo-content">
+      <div class="scene">
       <!-- 1. Working Directory (Desk) -->
       <div class="zone working">
         <div class="zone-header">
@@ -121,6 +128,7 @@
         </div>
       </div>
     </div>
+    </div>
 
     <div class="bottom">
       <div class="block">
@@ -132,6 +140,11 @@
         <pre class="mono"><code>{{ statusText }}</code></pre>
       </div>
     </div>
+
+    <div class="info-box">
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>Git 的三区就像餐厅——工作区是餐桌（随便放），暂存区是备菜盘（准备上菜），仓库是菜单（永久记录）。
+    </div>
   </div>
 </template>
 
@@ -239,11 +252,40 @@ const commitFiles = () => {
 .three-areas-demo {
   border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
-  background-color: var(--vp-c-bg-soft);
+  background: var(--vp-c-bg-soft);
   padding: 1rem;
   margin: 1rem 0;
   font-family: var(--vp-font-family-mono);
-  overflow-x: auto;
+  max-height: 600px;
+  overflow-y: auto;
+}
+
+.demo-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.demo-header .icon {
+  font-size: 1.25rem;
+}
+
+.demo-header .title {
+  font-weight: bold;
+  font-size: 1rem;
+}
+
+.demo-header .subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.85rem;
+  margin-left: 0.5rem;
+}
+
+.demo-content {
+  margin-bottom: 0.5rem;
 }
 
 .scene {
@@ -641,4 +683,23 @@ const commitFiles = () => {
     grid-template-columns: 1fr;
   }
 }
+
+.info-box {
+  background: var(--vp-c-bg-alt);
+  padding: 0.75rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  margin-top: 0.75rem;
+  display: flex;
+  gap: 0.25rem;
+}
+
+.info-box .icon {
+  flex-shrink: 0;
+}
+
+.info-box strong {
+  color: var(--vp-c-text-1);
+}
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/git-intro/GitWorkflowDemo.vue b/docs/.vitepress/theme/components/appendix/git-intro/GitWorkflowDemo.vue
index 6785e5c..9e4149d 100644
--- a/docs/.vitepress/theme/components/appendix/git-intro/GitWorkflowDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/git-intro/GitWorkflowDemo.vue
@@ -1,134 +1,136 @@
 <!--
   GitWorkflowDemo.vue
-  Git 工作流演示 - 简洁版
+  Git 基础工作流演示 - 寄快递版
 
-  用途：展示 Git 的基本工作流程
-  交互：初始化、提交、创建分支、合并
+  展示 Git 的基本工作流程：修改 → 暂存 → 提交
+  高度控制：紧凑布局，确保在 600px 内
 -->
 <template>
   <div class="git-workflow-demo">
-    <!-- 控制面板 -->
-    <div class="control-panel">
-      <button
-        @click="initRepo"
-        :disabled="inited || mergePending"
-        class="action-btn"
-      >
-        🎯 初始化仓库
-      </button>
-      <button
-        @click="makeCommit"
-        :disabled="!inited || mergePending"
-        class="action-btn"
-      >
-        ✅ 提交
-      </button>
-      <button
-        @click="createBranch"
-        :disabled="!inited || hasBranch || mergePending"
-        class="action-btn"
-      >
-        🌿 创建分支
-      </button>
-      <button
-        @click="prepareMerge"
-        :disabled="!hasBranch || mergePending"
-        class="action-btn"
-      >
-        🔀 准备合并
-      </button>
-      <button @click="finishMerge" :disabled="!mergePending" class="action-btn">
-        ✅ 完成合并
-      </button>
-      <button @click="reset" class="action-btn secondary">🔄 重置</button>
+    <div class="demo-header">
+      <span class="icon">📦</span>
+      <span class="title">Git 工作流</span>
+      <span class="subtitle">修改 → 暂存 → 提交，三步走</span>
     </div>
 
-    <!-- 提交历史可视化 -->
-    <div class="visualization">
-      <div class="graph-container">
-        <svg viewBox="0 0 400 150" class="git-graph">
-          <!-- 主分支线 -->
-          <line
-            x1="50"
-            y1="60"
-            x2="350"
-            y2="60"
-            stroke="#3b82f6"
-            stroke-width="3"
-          />
+    <div class="demo-content">
+      <!-- 文件状态区域 -->
+      <div class="file-area">
+        <div class="area-header">
+          <span class="area-icon">📝</span>
+          <span class="area-name">工作区</span>
+          <span class="area-desc">你正在改的文件</span>
+        </div>
+        <div class="file-list">
+          <div
+            v-for="file in files"
+            :key="file.name"
+            class="file-item"
+            :class="{
+              'modified': file.status === 'modified',
+              'staged': file.status === 'staged',
+              'committed': file.status === 'committed'
+            }"
+          >
+            <span class="file-icon">{{ getIcon(file.status) }}</span>
+            <span class="file-name">{{ file.name }}</span>
+            <span class="file-status">{{ getStatusText(file.status) }}</span>
+          </div>
+        </div>
+      </div>
 
-          <!-- 分支线 -->
-          <line
-            v-if="hasBranch"
-            x1="150"
-            y1="60"
-            x2="150"
-            y2="100"
-            stroke="#10b981"
-            stroke-width="3"
-          />
-          <line
-            v-if="hasBranch"
-            x1="150"
-            y1="100"
-            x2="300"
-            y2="100"
-            stroke="#10b981"
-            stroke-width="3"
-          />
+      <!-- 箭头 -->
+      <div class="arrow-group" v-if="!allCommitted">
+        <div class="arrow" :class="{ active: hasStaged }">↓</div>
+        <div class="arrow-label" v-if="hasStaged">git add</div>
+      </div>
 
-          <!-- 合并线 -->
-          <path
-            v-if="mergePending"
-            d="M 300 100 Q 320 80, 320 60"
-            fill="none"
-            stroke="var(--vp-c-brand)"
-            stroke-width="2"
-            stroke-dasharray="5,5"
-          />
+      <!-- 暂存区 -->
+      <div class="stage-area">
+        <div class="area-header">
+          <span class="area-icon">📋</span>
+          <span class="area-name">暂存区</span>
+          <span class="area-desc">准备打包的文件</span>
+        </div>
+        <div class="file-list">
+          <div
+            v-for="file in stagedFiles"
+            :key="file.name"
+            class="file-item staged"
+          >
+            <span class="file-icon">📌</span>
+            <span class="file-name">{{ file.name }}</span>
+            <span class="file-status">待提交</span>
+          </div>
+          <div v-if="stagedFiles.length === 0" class="empty-tip">
+            暂无文件
+          </div>
+        </div>
+      </div>
 
-          <!-- 提交节点 -->
-          <circle
-            v-for="(commit, i) in mainCommits"
-            :key="'main-' + i"
-            :cx="80 + i * 60"
-            cy="60"
-            r="10"
-            fill="#3b82f6"
-          />
-          <circle
-            v-for="(commit, i) in branchCommits"
-            :key="'branch-' + i"
-            :cx="200 + i * 60"
-            cy="100"
-            r="10"
-            fill="#10b981"
-          />
-        </svg>
+      <!-- 箭头 -->
+      <div class="arrow-group" v-if="hasStaged">
+        <div class="arrow active">↓</div>
+        <div class="arrow-label">git commit</div>
+      </div>
+
+      <!-- 仓库区 -->
+      <div class="repo-area">
+        <div class="area-header">
+          <span class="area-icon">🏪</span>
+          <span class="area-name">仓库</span>
+          <span class="area-desc">已保存的版本</span>
+        </div>
+        <div class="commit-list">
+          <div
+            v-for="(commit, i) in commits"
+            :key="i"
+            class="commit-item"
+          >
+            <span class="commit-icon">✅</span>
+            <span class="commit-msg">{{ commit.msg }}</span>
+          </div>
+          <div v-if="commits.length === 0" class="empty-tip">
+            暂无提交
+          </div>
+        </div>
       </div>
     </div>
 
-    <!-- 状态信息 -->
-    <div class="status-panel">
-      <div class="status-item">
-        <span class="label">提交数:</span>
-        <span class="value">{{ mainCommits.length }}</span>
-      </div>
-      <div class="status-item">
-        <span class="label">分支:</span>
-        <span class="value">{{ hasBranch ? '2' : '1' }}</span>
-      </div>
-      <div class="status-item">
-        <span class="label">状态:</span>
-        <span class="value">{{ status }}</span>
-      </div>
+    <!-- 操作按钮 -->
+    <div class="action-panel">
+      <button
+        @click="modifyFile"
+        class="action-btn"
+        :disabled="allModified"
+      >
+        ✏️ 修改文件
+      </button>
+      <button
+        @click="stageFiles"
+        class="action-btn"
+        :disabled="!hasModified || allStaged"
+      >
+        📌 暂存修改
+      </button>
+      <button
+        @click="commitFiles"
+        class="action-btn"
+        :disabled="!hasStaged"
+      >
+        ✅ 提交版本
+      </button>
+      <button
+        @click="reset"
+        class="action-btn secondary"
+      >
+        🔄 重置
+      </button>
     </div>
 
-    <!-- 说明 -->
     <div class="info-box">
-      <p>
-        <strong>💡 工作流程:</strong> 初始化 → 提交 → 创建分支 → 开发 → 合并
-      </p>
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>工作区修改 → 暂存区挑选 → 仓库永久保存
     </div>
   </div>
 </template>
@@ -136,56 +138,92 @@
 <script setup>
 import { ref, computed } from 'vue'
 
-const inited = ref(false)
-const hasBranch = ref(false)
-const mergePending = ref(false)
-const mainCommits = ref([])
-const branchCommits = ref([])
+const files = ref([
+  { name: 'index.html', status: 'unmodified' },
+  { name: 'app.js', status: 'unmodified' },
+  { name: 'style.css', status: 'unmodified' }
+])
 
-const status = computed(() => {
-  if (mergePending.value) return '准备合并：检查改动/解决冲突后再完成合并'
-  if (hasBranch) return '分支已创建'
-  if (inited) return '已初始化'
-  return '未初始化'
-})
+const commits = ref([])
 
-const initRepo = () => {
-  inited.value = true
-  mainCommits.value = [{ hash: 'abc123' }]
-}
+const hasModified = computed(() =>
+  files.value.some(f => f.status === 'modified')
+)
 
-const makeCommit = () => {
-  if (inited.value) {
-    mainCommits.value.push({ hash: Math.random().toString(16).substr(2, 6) })
+const hasStaged = computed(() =>
+  files.value.some(f => f.status === 'staged')
+)
+
+const allCommitted = computed(() =>
+  files.value.every(f => f.status === 'committed')
+)
+
+const allModified = computed(() =>
+  files.value.every(f => f.status === 'modified')
+)
+
+const allStaged = computed(() =>
+  files.value.every(f => f.status === 'staged' || f.status === 'committed')
+)
+
+const stagedFiles = computed(() =>
+  files.value.filter(f => f.status === 'staged')
+)
+
+const getIcon = (status) => {
+  switch (status) {
+    case 'modified': return '📝'
+    case 'staged': return '📌'
+    case 'committed': return '✅'
+    default: return '📄'
   }
 }
 
-const createBranch = () => {
-  if (inited.value && !hasBranch.value) {
-    hasBranch.value = true
-    branchCommits.value = [{ hash: 'def456' }]
+const getStatusText = (status) => {
+  switch (status) {
+    case 'modified': return '已修改'
+    case 'staged': return '已暂存'
+    case 'committed': return '已提交'
+    default: return '未修改'
   }
 }
 
-const prepareMerge = () => {
-  if (!hasBranch.value) return
-  mergePending.value = true
+const modifyFile = () => {
+  const unmodified = files.value.filter(f => f.status === 'unmodified' || f.status === 'committed')
+  if (unmodified.length > 0) {
+    const file = unmodified[0]
+    file.status = 'modified'
+  }
 }
 
-const finishMerge = () => {
-  if (!mergePending.value) return
-  mainCommits.value.push({ hash: Math.random().toString(16).substr(2, 6) })
-  hasBranch.value = false
-  branchCommits.value = []
-  mergePending.value = false
+const stageFiles = () => {
+  files.value.forEach(f => {
+    if (f.status === 'modified') {
+      f.status = 'staged'
+    }
+  })
+}
+
+const commitFiles = () => {
+  const staged = files.value.filter(f => f.status === 'staged')
+  if (staged.length > 0) {
+    files.value.forEach(f => {
+      if (f.status === 'staged') {
+        f.status = 'committed'
+      }
+    })
+    commits.value.push({
+      msg: `提交了 ${staged.length} 个文件`,
+      files: staged.map(f => f.name)
+    })
+  }
 }
 
 const reset = () => {
-  inited.value = false
-  hasBranch.value = false
-  mergePending.value = false
-  mainCommits.value = []
-  branchCommits.value = []
+  files.value.forEach(f => {
+    f.status = 'unmodified'
+  })
+  commits.value = []
 }
 </script>
 
@@ -193,94 +231,230 @@ const reset = () => {
 .git-workflow-demo {
   border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
-  background-color: var(--vp-c-bg-soft);
-  padding: 1.5rem;
+  background: var(--vp-c-bg-soft);
+  padding: 1rem;
   margin: 1rem 0;
+  max-height: 550px;
+  overflow-y: auto;
 }
 
-.control-panel {
+.demo-header {
   display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.demo-header .icon {
+  font-size: 1.25rem;
+}
+
+.demo-header .title {
+  font-weight: bold;
+  font-size: 1rem;
+  color: var(--vp-c-text-1);
+}
+
+.demo-header .subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.85rem;
+  margin-left: 0.5rem;
+}
+
+.demo-content {
+  display: flex;
+  flex-direction: column;
   gap: 0.75rem;
-  margin-bottom: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+.area-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.area-icon {
+  font-size: 1.1rem;
+}
+
+.area-name {
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-1);
+}
+
+.area-desc {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-3);
+  margin-left: 0.5rem;
+}
+
+.file-area,
+.stage-area,
+.repo-area {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  padding: 0.75rem;
+}
+
+.file-list,
+.commit-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-height: 60px;
+}
+
+.file-item,
+.commit-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  background: var(--vp-c-bg-soft);
+  border-radius: 4px;
+  font-size: 0.85rem;
+}
+
+.file-item.modified {
+  background: var(--vp-c-bg-alt);
+  border-left: 3px solid var(--vp-c-warning);
+}
+
+.file-item.staged {
+  background: var(--vp-c-brand-soft);
+  border-left: 3px solid var(--vp-c-brand);
+}
+
+.file-item.committed {
+  background: var(--vp-c-bg-alt);
+  border-left: 3px solid var(--vp-c-success);
+  opacity: 0.7;
+}
+
+.file-icon {
+  font-size: 1rem;
+}
+
+.file-name {
+  flex: 1;
+  color: var(--vp-c-text-1);
+}
+
+.file-status {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-3);
+}
+
+.commit-item {
+  font-size: 0.8rem;
+}
+
+.commit-icon {
+  font-size: 0.9rem;
+}
+
+.commit-msg {
+  flex: 1;
+  color: var(--vp-c-text-2);
+}
+
+.empty-tip {
+  text-align: center;
+  color: var(--vp-c-text-3);
+  font-size: 0.8rem;
+  padding: 0.5rem;
+}
+
+.arrow-group {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0;
+}
+
+.arrow {
+  font-size: 1.5rem;
+  color: var(--vp-c-text-3);
+  transition: all 0.3s;
+}
+
+.arrow.active {
+  color: var(--vp-c-brand);
+  transform: scale(1.2);
+}
+
+.arrow-label {
+  font-size: 0.7rem;
+  color: var(--vp-c-brand);
+  font-family: monospace;
+}
+
+.action-panel {
+  display: flex;
+  gap: 0.5rem;
   flex-wrap: wrap;
+  margin-top: 0.75rem;
 }
 
 .action-btn {
-  padding: 0.625rem 1.25rem;
-  border: 2px solid var(--vp-c-brand);
-  background: var(--vp-c-bg);
-  color: var(--vp-c-brand);
+  padding: 0.5rem 1rem;
+  background: var(--vp-c-brand);
+  color: white;
+  border: none;
   border-radius: 6px;
-  font-size: 0.875rem;
+  font-size: 0.85rem;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s;
+  flex: 1;
+  min-width: 100px;
 }
 
 .action-btn:hover:not(:disabled) {
-  background: var(--vp-c-brand);
-  color: var(--vp-c-bg);
+  opacity: 0.9;
+  transform: translateY(-1px);
 }
 
 .action-btn:disabled {
-  opacity: 0.5;
+  opacity: 0.4;
   cursor: not-allowed;
-  border-color: var(--vp-c-divider);
-  color: var(--vp-c-text-2);
+  background: var(--vp-c-divider);
 }
 
 .action-btn.secondary {
-  border-color: var(--vp-c-divider);
-}
-
-.visualization {
-  margin: 1.5rem 0;
-}
-
-.graph-container {
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  padding: 1rem;
+  background: transparent;
   border: 1px solid var(--vp-c-divider);
-}
-
-.git-graph {
-  width: 100%;
-  height: auto;
-}
-
-.status-panel {
-  display: flex;
-  gap: 2rem;
-  margin: 1.5rem 0;
-  flex-wrap: wrap;
-}
-
-.status-item {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.status-item .label {
   color: var(--vp-c-text-2);
 }
 
-.status-item .value {
-  font-weight: 600;
+.action-btn.secondary:hover:not(:disabled) {
+  border-color: var(--vp-c-brand);
   color: var(--vp-c-brand);
 }
 
 .info-box {
-  padding: 1rem;
-  background: var(--vp-c-bg);
-  border-left: 4px solid var(--vp-c-brand);
-  border-radius: 4px;
+  background: var(--vp-c-bg-alt);
+  padding: 0.75rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
   margin-top: 1rem;
+  display: flex;
+  gap: 0.25rem;
 }
 
-.info-box p {
-  margin: 0;
+.info-box .icon {
+  flex-shrink: 0;
+}
+
+.info-box strong {
   color: var(--vp-c-text-1);
-  line-height: 1.6;
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/queue-design/CouplingDemo.vue b/docs/.vitepress/theme/components/appendix/queue-design/CouplingDemo.vue
index 19b2124..ede69f6 100644
--- a/docs/.vitepress/theme/components/appendix/queue-design/CouplingDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/queue-design/CouplingDemo.vue
@@ -4,9 +4,10 @@
 -->
 <template>
   <div class="coupling-demo">
-    <div class="header">
-      <div class="title">系统解耦：从紧耦合到松耦合</div>
-      <div class="subtitle">观察同步调用与异步消息的区别</div>
+    <div class="demo-header">
+      <span class="icon">🔗</span>
+      <span class="title">系统解耦</span>
+      <span class="subtitle">从紧耦合到松耦合</span>
     </div>
 
     <div class="mode-switch">
@@ -26,7 +27,7 @@
       </button>
     </div>
 
-    <div class="demo-container">
+    <div class="demo-content">
       <!-- 紧耦合模式 -->
       <div v-if="!useAsync" class="synchronous-mode">
         <div class="scenario">
@@ -65,7 +66,7 @@
           <div class="problem-list">
             <div class="problem-item">
               <span class="icon">⚠️</span>
-              <span><strong>依赖性强：</strong>通知服务宕机，订单创建失败</span>
+              <span><strong>依赖性强：</strong>通知服务宕机,订单创建失败</span>
             </div>
             <div class="problem-item">
               <span class="icon">⚠️</span>
@@ -111,7 +112,7 @@
               <div class="consumer-box" :class="{ failed: consumerFailed }">
                 <div class="consumer-name">短信服务</div>
                 <div class="consumer-status">
-                  {{ consumerFailed ? '离线（不影响订单）' : '运行中' }}
+                  {{ consumerFailed ? '离线(不影响订单)' : '运行中' }}
                 </div>
               </div>
               <div class="consumer-box">
@@ -122,10 +123,6 @@
                 <div class="consumer-name">积分服务</div>
                 <div class="consumer-status">运行中</div>
               </div>
-              <div class="consumer-box new">
-                <div class="consumer-name">数据分析</div>
-                <div class="consumer-status">新增 ✨</div>
-              </div>
             </div>
           </div>
 
@@ -137,7 +134,7 @@
             <div class="benefit-item">
               <span class="icon">✅</span>
               <span
-                ><strong>响应快：</strong>订单服务只耗时 50ms（发送消息）</span
+                ><strong>响应快：</strong>订单服务只耗时 50ms(发送消息)</span
               >
             </div>
             <div class="benefit-item">
@@ -153,41 +150,9 @@
       </div>
     </div>
 
-    <div class="comparison-summary">
-      <div class="summary-title">📊 对比总结</div>
-      <div class="summary-table">
-        <table>
-          <thead>
-            <tr>
-              <th>维度</th>
-              <th>紧耦合 (同步)</th>
-              <th>松耦合 (异步)</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>服务依赖</td>
-              <td class="bad">强依赖，一个挂全挂</td>
-              <td class="good">弱依赖，独立运行</td>
-            </tr>
-            <tr>
-              <td>响应时间</td>
-              <td class="bad">1200ms（串行执行）</td>
-              <td class="good">50ms（只发消息）</td>
-            </tr>
-            <tr>
-              <td>扩展性</td>
-              <td class="bad">修改订单服务代码</td>
-              <td class="good">增加新消费者即可</td>
-            </tr>
-            <tr>
-              <td>可用性</td>
-              <td class="bad">90%（任一服务故障）</td>
-              <td class="good">99.9%（独立故障域）</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
+    <div class="info-box">
+      <span class="icon">💡</span>
+      <strong>核心思想:</strong>同步调用强依赖、响应慢;异步消息解耦、响应快、易扩展
     </div>
   </div>
 </template>
@@ -203,7 +168,7 @@ const messageInQueue = ref(false)
 const syncCalls = ref([
   { id: 1, service: '调用库存服务', active: false, status: '处理中...' },
   { id: 2, service: '调用积分服务', active: false, status: '处理中...' },
-  { id: 3, service: '调用通知服务', active: false, status: '失败！订单回滚' }
+  { id: 3, service: '调用通知服务', active: false, status: '失败!订单回滚' }
 ])
 
 const testSyncCall = () => {
@@ -232,42 +197,52 @@ const testAsyncCall = () => {
 <style scoped>
 .coupling-demo {
   border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
   background: var(--vp-c-bg-soft);
-  border-radius: 12px;
-  padding: 1.5rem;
-  margin: 1.5rem 0;
-  font-family: var(--vp-font-family-base);
+  padding: 1rem;
+  margin: 1rem 0;
+  max-height: 600px;
+  overflow-y: auto;
 }
 
-.header {
-  margin-bottom: 1rem;
+.demo-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
 }
 
-.title {
-  font-weight: 700;
-  font-size: 1.05rem;
+.demo-header .icon {
+  font-size: 1.25rem;
 }
 
-.subtitle {
+.demo-header .title {
+  font-weight: bold;
+  font-size: 1rem;
+  color: var(--vp-c-text-1);
+}
+
+.demo-header .subtitle {
   color: var(--vp-c-text-2);
-  font-size: 0.9rem;
-  margin-top: 0.25rem;
+  font-size: 0.85rem;
+  margin-left: 0.5rem;
 }
 
 .mode-switch {
   display: flex;
   gap: 1rem;
-  margin-bottom: 1.5rem;
+  margin-bottom: 1rem;
 }
 
 .mode-btn {
   flex: 1;
-  padding: 0.75rem 1rem;
+  padding: 0.5rem 0.75rem;
   border: 2px solid var(--vp-c-divider);
   background: var(--vp-c-bg);
-  border-radius: 8px;
+  border-radius: 6px;
   cursor: pointer;
   font-weight: 600;
+  font-size: 0.85rem;
   transition: all 0.2s;
 }
 
@@ -277,18 +252,18 @@ const testAsyncCall = () => {
 
 .mode-btn.active {
   background: var(--vp-c-brand);
-  color: #fff;
+  color: white;
   border-color: var(--vp-c-brand);
 }
 
-.demo-container {
-  margin-bottom: 1.5rem;
+.demo-content {
+  margin-bottom: 0.75rem;
 }
 
 .scenario-title {
   font-weight: 600;
-  font-size: 1rem;
-  margin-bottom: 1rem;
+  font-size: 0.9rem;
+  margin-bottom: 0.75rem;
   text-align: center;
 }
 
@@ -296,55 +271,55 @@ const testAsyncCall = () => {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 1rem;
-  padding: 1.5rem;
+  gap: 0.75rem;
+  padding: 1rem;
   background: var(--vp-c-bg);
-  border-radius: 10px;
-  margin-bottom: 1rem;
+  border-radius: 8px;
+  margin-bottom: 0.75rem;
 }
 
 .service-box {
   background: var(--vp-c-bg-soft);
   border: 2px solid var(--vp-c-brand);
-  border-radius: 10px;
-  padding: 1rem;
+  border-radius: 8px;
+  padding: 0.75rem;
   text-align: center;
-  min-width: 180px;
+  min-width: 140px;
   transition: all 0.3s;
 }
 
 .service-box.failed {
-  border-color: #ef4444;
-  background: rgba(239, 68, 68, 0.1);
+  border-color: var(--vp-c-danger);
+  background: var(--vp-c-danger-soft);
 }
 
 .service-name {
   font-weight: 600;
-  font-size: 0.95rem;
+  font-size: 0.85rem;
   margin-bottom: 0.25rem;
 }
 
 .service-desc {
-  font-size: 0.8rem;
+  font-size: 0.75rem;
   color: var(--vp-c-text-2);
 }
 
 .error-msg {
   margin-top: 0.5rem;
   padding: 0.35rem 0.5rem;
-  background: #ef4444;
+  background: var(--vp-c-danger);
   color: white;
   border-radius: 4px;
-  font-size: 0.8rem;
+  font-size: 0.75rem;
   font-weight: 600;
 }
 
 .arrows {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: 0.5rem;
   width: 100%;
-  max-width: 300px;
+  max-width: 250px;
 }
 
 .sync-call {
@@ -357,7 +332,7 @@ const testAsyncCall = () => {
 }
 
 .sync-call.active {
-  background: rgba(239, 68, 68, 0.1);
+  background: var(--vp-c-danger-soft);
 }
 
 .call-line {
@@ -367,96 +342,91 @@ const testAsyncCall = () => {
 }
 
 .sync-call.active .call-line {
-  background: #ef4444;
+  background: var(--vp-c-danger);
 }
 
 .call-label {
-  font-size: 0.8rem;
+  font-size: 0.75rem;
   color: var(--vp-c-text-2);
   flex: 1;
 }
 
 .call-status {
-  font-size: 0.75rem;
-  color: #ef4444;
+  font-size: 0.7rem;
+  color: var(--vp-c-danger);
   font-weight: 600;
 }
 
 .mq-bridge {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: 0.75rem;
 }
 
 .mq-box {
-  background: rgba(59, 130, 246, 0.1);
+  background: var(--vp-c-brand-soft);
   border: 2px solid var(--vp-c-brand);
-  border-radius: 10px;
-  padding: 1rem;
+  border-radius: 8px;
+  padding: 0.75rem;
   text-align: center;
-  min-width: 140px;
+  min-width: 120px;
 }
 
 .mq-icon {
-  font-size: 2rem;
+  font-size: 1.5rem;
   margin-bottom: 0.5rem;
 }
 
 .mq-label {
   font-weight: 600;
-  font-size: 0.9rem;
+  font-size: 0.85rem;
 }
 
 .msg-indicator {
   margin-top: 0.5rem;
   padding: 0.35rem 0.5rem;
-  background: #dcfce7;
-  color: #166534;
+  background: var(--vp-c-success);
+  color: white;
   border-radius: 4px;
-  font-size: 0.75rem;
+  font-size: 0.7rem;
   font-weight: 600;
 }
 
 .flow-arrow {
-  font-size: 1.5rem;
+  font-size: 1.25rem;
   color: var(--vp-c-brand);
 }
 
 .consumers-group {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
-  gap: 0.75rem;
+  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+  gap: 0.5rem;
   width: 100%;
-  max-width: 500px;
+  max-width: 400px;
 }
 
 .consumer-box {
   background: var(--vp-c-bg-soft);
   border: 2px solid var(--vp-c-brand);
-  border-radius: 8px;
-  padding: 0.75rem;
+  border-radius: 6px;
+  padding: 0.5rem;
   text-align: center;
   transition: all 0.3s;
 }
 
 .consumer-box.failed {
-  border-color: #f59e0b;
-  background: rgba(245, 158, 11, 0.1);
-}
-
-.consumer-box.new {
-  border-color: #22c55e;
-  background: rgba(34, 197, 94, 0.1);
+  border-color: var(--vp-c-warning);
+  background: var(--vp-c-warning-soft);
 }
 
 .consumer-name {
-  font-size: 0.8rem;
+  font-size: 0.75rem;
   font-weight: 600;
   margin-bottom: 0.25rem;
 }
 
 .consumer-status {
-  font-size: 0.7rem;
+  font-size: 0.65rem;
   color: var(--vp-c-text-2);
 }
 
@@ -464,8 +434,8 @@ const testAsyncCall = () => {
 .benefit-list {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
-  margin-bottom: 1rem;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
 }
 
 .problem-item,
@@ -473,92 +443,66 @@ const testAsyncCall = () => {
   display: flex;
   align-items: flex-start;
   gap: 0.5rem;
-  padding: 0.75rem;
-  border-radius: 8px;
-  font-size: 0.9rem;
-  line-height: 1.5;
+  padding: 0.5rem;
+  border-radius: 6px;
+  font-size: 0.8rem;
+  line-height: 1.4;
 }
 
 .problem-item {
-  background: rgba(239, 68, 68, 0.1);
+  background: var(--vp-c-danger-soft);
 }
 
 .benefit-item {
-  background: rgba(34, 197, 94, 0.1);
+  background: var(--vp-c-success-soft);
 }
 
 .icon {
-  font-size: 1.2rem;
+  font-size: 1rem;
   flex-shrink: 0;
 }
 
 .test-btn {
   width: 100%;
-  padding: 0.75rem;
+  padding: 0.5rem;
   border: none;
-  border-radius: 8px;
+  border-radius: 6px;
   cursor: pointer;
   font-weight: 600;
+  font-size: 0.85rem;
   transition: all 0.2s;
 }
 
 .test-btn.fail {
-  background: #ef4444;
+  background: var(--vp-c-danger);
   color: white;
 }
 
 .test-btn.fail:hover {
-  background: #dc2626;
+  opacity: 0.9;
 }
 
 .test-btn.success {
-  background: #22c55e;
+  background: var(--vp-c-success);
   color: white;
 }
 
 .test-btn.success:hover {
-  background: #16a34a;
+  opacity: 0.9;
 }
 
-.comparison-summary {
-  background: var(--vp-c-bg);
-  border-radius: 10px;
-  padding: 1rem;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.summary-title {
-  font-weight: 600;
-  margin-bottom: 0.75rem;
-}
-
-.summary-table {
-  overflow-x: auto;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.9rem;
-}
-
-th,
-td {
+.info-box {
+  background: var(--vp-c-bg-alt);
   padding: 0.75rem;
-  text-align: left;
-  border-bottom: 1px solid var(--vp-c-divider);
+  border-radius: 6px;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  margin-top: 0.75rem;
+  display: flex;
+  gap: 0.25rem;
 }
 
-th {
-  background: var(--vp-c-bg-soft);
-  font-weight: 600;
-}
-
-.bad {
-  color: #ef4444;
-}
-
-.good {
-  color: #16a34a;
+.info-box .icon {
+  flex-shrink: 0;
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/queue-design/DeadLetterQueueDemo.vue b/docs/.vitepress/theme/components/appendix/queue-design/DeadLetterQueueDemo.vue
index b3e0db9..62d6f3f 100644
--- a/docs/.vitepress/theme/components/appendix/queue-design/DeadLetterQueueDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/queue-design/DeadLetterQueueDemo.vue
@@ -4,133 +4,132 @@
 -->
 <template>
   <div class="dlq-demo">
-    <div class="header">
-      <div class="title">死信队列：消息的"急救站"</div>
-      <div class="subtitle">处理无法消费的消息，避免阻塞队列</div>
+    <div class="demo-header">
+      <span class="icon">🚑</span>
+      <span class="title">死信队列</span>
+      <span class="subtitle">消息的"急救站" - 处理失败消息</span>
     </div>
 
     <div class="controls">
       <div class="control">
         <label>失败率：</label>
-        <input v-model="failureRate" type="range" min="0" max="100" step="10" />
+        <input v-model.number="failureRate" type="range" min="0" max="100" step="10" />
         <span class="value">{{ failureRate }}%</span>
       </div>
       <div class="control">
-        <label>最大重试次数：</label>
-        <input v-model="maxRetries" type="range" min="1" max="5" step="1" />
+        <label>最大重试：</label>
+        <input v-model.number="maxRetries" type="range" min="1" max="5" step="1" />
         <span class="value">{{ maxRetries }}</span>
       </div>
     </div>
 
-    <div class="flow-container">
-      <div class="main-queue-section">
-        <div class="section-title">📦 主队列</div>
-        <div class="queue-box main-queue">
-          <div class="queue-header">
-            <span>正常消息队列</span>
-            <span class="count">{{ mainQueue.length }} 条</span>
-          </div>
-          <div class="message-list">
-            <div
-              v-for="msg in mainQueue"
-              :key="msg.id"
-              class="message-item"
-              :class="{ processing: msg.processing }"
-            >
-              <div class="msg-id">#{{ msg.id }}</div>
-              <div class="msg-retries" v-if="msg.retries > 0">
-                重试: {{ msg.retries }}/{{ maxRetries }}
+    <div class="demo-content">
+      <div class="flow-container">
+        <div class="main-queue-section">
+          <div class="section-title">📦 主队列</div>
+          <div class="queue-box main-queue">
+            <div class="queue-header">
+              <span>正常消息队列</span>
+              <span class="count">{{ mainQueue.length }} 条</span>
+            </div>
+            <div class="message-list">
+              <div
+                v-for="msg in mainQueue.slice(0, 3)"
+                :key="msg.id"
+                class="message-item"
+                :class="{ processing: msg.processing }"
+              >
+                <div class="msg-id">#{{ msg.id }}</div>
+                <div class="msg-retries" v-if="msg.retries > 0">
+                  重试: {{ msg.retries }}/{{ maxRetries }}
+                </div>
+              </div>
+              <div v-if="mainQueue.length === 0" class="empty">队列为空</div>
+              <div v-else-if="mainQueue.length > 3" class="more">
+                还有 {{ mainQueue.length - 3 }} 条...
               </div>
             </div>
-            <div v-if="mainQueue.length === 0" class="empty">队列为空</div>
           </div>
+          <button class="add-btn" @click="addMessage" :disabled="processing">
+            + 添加消息
+          </button>
         </div>
-        <button class="add-btn" @click="addMessage" :disabled="processing">
-          + 添加消息
-        </button>
-      </div>
 
-      <div class="processing-section">
-        <div class="section-title">⚙️ 消费处理</div>
-        <div class="processor-box">
-          <div class="processor-icon" :class="{ active: processing }">
-            {{ processing ? '⚙️' : '💤' }}
-          </div>
-          <div class="processor-status">
-            {{ processing ? '处理中...' : '空闲' }}
-          </div>
-          <div v-if="currentMessage" class="current-msg">
-            处理: #{{ currentMessage.id }}
-          </div>
-          <div v-if="lastResult" class="last-result" :class="lastResult.type">
-            {{ lastResult.message }}
-          </div>
-        </div>
-      </div>
-
-      <div class="dlq-section">
-        <div class="section-title">⚠️ 死信队列</div>
-        <div class="queue-box dead-letter">
-          <div class="queue-header">
-            <span>失败消息</span>
-            <span class="count">{{ deadLetterQueue.length }} 条</span>
-          </div>
-          <div class="message-list">
-            <div
-              v-for="msg in deadLetterQueue"
-              :key="msg.id"
-              class="message-item failed"
-            >
-              <div class="msg-id">#{{ msg.id }}</div>
-              <div class="msg-error">{{ msg.error }}</div>
+        <div class="processing-section">
+          <div class="section-title">⚙️ 消费处理</div>
+          <div class="processor-box">
+            <div class="processor-icon" :class="{ active: processing }">
+              {{ processing ? '⚙️' : '💤' }}
             </div>
-            <div v-if="deadLetterQueue.length === 0" class="empty">
-              无失败消息
+            <div class="processor-status">
+              {{ processing ? '处理中...' : '空闲' }}
+            </div>
+            <div v-if="currentMessage" class="current-msg">
+              处理: #{{ currentMessage.id }}
+            </div>
+            <div v-if="lastResult" class="last-result" :class="lastResult.type">
+              {{ lastResult.message }}
             </div>
           </div>
         </div>
-        <button
-          class="retry-btn"
-          @click="retryDeadLetters"
-          :disabled="deadLetterQueue.length === 0"
-        >
-          🔄 重试死信
-        </button>
+
+        <div class="dlq-section">
+          <div class="section-title">⚠️ 死信队列</div>
+          <div class="queue-box dead-letter">
+            <div class="queue-header">
+              <span>失败消息</span>
+              <span class="count">{{ deadLetterQueue.length }} 条</span>
+            </div>
+            <div class="message-list">
+              <div
+                v-for="msg in deadLetterQueue.slice(0, 2)"
+                :key="msg.id"
+                class="message-item failed"
+              >
+                <div class="msg-id">#{{ msg.id }}</div>
+                <div class="msg-error">{{ msg.error }}</div>
+              </div>
+              <div v-if="deadLetterQueue.length === 0" class="empty">
+                无失败消息
+              </div>
+              <div v-else-if="deadLetterQueue.length > 2" class="more">
+                还有 {{ deadLetterQueue.length - 2 }} 条...
+              </div>
+            </div>
+          </div>
+          <button
+            class="retry-btn"
+            @click="retryDeadLetters"
+            :disabled="deadLetterQueue.length === 0"
+          >
+            🔄 重试死信
+          </button>
+        </div>
+      </div>
+
+      <div class="stats">
+        <div class="stat-card">
+          <div class="stat-label">总消息数</div>
+          <div class="stat-value">{{ totalMessages }}</div>
+        </div>
+        <div class="stat-card success">
+          <div class="stat-label">成功处理</div>
+          <div class="stat-value">{{ successCount }}</div>
+        </div>
+        <div class="stat-card warning">
+          <div class="stat-label">进入死信</div>
+          <div class="stat-value">{{ deadLetterCount }}</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-label">成功率</div>
+          <div class="stat-value">{{ successRate }}%</div>
+        </div>
       </div>
     </div>
 
-    <div class="stats">
-      <div class="stat-card">
-        <div class="stat-label">总消息数</div>
-        <div class="stat-value">{{ totalMessages }}</div>
-      </div>
-      <div class="stat-card success">
-        <div class="stat-label">成功处理</div>
-        <div class="stat-value">{{ successCount }}</div>
-      </div>
-      <div class="stat-card warning">
-        <div class="stat-label">进入死信</div>
-        <div class="stat-value">{{ deadLetterCount }}</div>
-      </div>
-      <div class="stat-card">
-        <div class="stat-label">成功率</div>
-        <div class="stat-value">{{ successRate }}%</div>
-      </div>
-    </div>
-
-    <div class="explanation">
-      <div class="exp-title">💡 死信队列的作用</div>
-      <div class="exp-content">
-        <div class="exp-item">
-          <strong>1. 隔离异常消息：</strong>失败消息不会阻塞正常消息的处理
-        </div>
-        <div class="exp-item">
-          <strong>2. 保留失败记录：</strong>可以后续人工介入或自动重试
-        </div>
-        <div class="exp-item">
-          <strong>3. 系统保护：</strong>避免因持续失败导致消费者崩溃
-        </div>
-      </div>
+    <div class="info-box">
+      <span class="icon">💡</span>
+      <strong>核心思想:</strong>失败消息进入死信队列,避免阻塞正常消息,可后续人工介入或自动重试
     </div>
   </div>
 </template>
@@ -174,7 +173,7 @@ const processNext = () => {
     return
   }
 
-  let msg = mainQueue[0]
+  let msg = mainQueue.value[0]
   msg.processing = true
   processing.value = true
   currentMessage.value = msg
@@ -188,7 +187,7 @@ const processNext = () => {
       msg.processing = false
 
       if (msg.retries >= maxRetries.value) {
-        // 超过最大重试次数，进入死信队列
+        // 超过最大重试次数,进入死信队列
         mainQueue.value.shift()
         deadLetterQueue.value.push({
           id: msg.id,
@@ -202,7 +201,7 @@ const processNext = () => {
         // 重新入队
         lastResult.value = {
           type: 'warning',
-          message: `⚠️ 消息 #${msg.id} 处理失败，重试 ${msg.retries}/${maxRetries.value}`
+          message: `⚠️ 消息 #${msg.id} 处理失败,重试 ${msg.retries}/${maxRetries.value}`
         }
       }
 
@@ -262,39 +261,48 @@ addMessage = addMessageWithAutoProcess
 .dlq-demo {
   border: 1px solid var(--vp-c-divider);
   background: var(--vp-c-bg-soft);
-  border-radius: 12px;
-  padding: 1.5rem;
-  margin: 1.5rem 0;
-  font-family: var(--vp-font-family-base);
+  border-radius: 8px;
+  padding: 1rem;
+  margin: 1rem 0;
+  max-height: 600px;
+  overflow-y: auto;
 }
 
-.header {
-  margin-bottom: 1rem;
+.demo-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
 }
 
-.title {
-  font-weight: 700;
-  font-size: 1.05rem;
+.demo-header .icon {
+  font-size: 1.25rem;
 }
 
-.subtitle {
+.demo-header .title {
+  font-weight: bold;
+  font-size: 1rem;
+  color: var(--vp-c-text-1);
+}
+
+.demo-header .subtitle {
   color: var(--vp-c-text-2);
-  font-size: 0.9rem;
-  margin-top: 0.25rem;
+  font-size: 0.85rem;
+  margin-left: 0.5rem;
 }
 
 .controls {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 1rem;
-  margin-bottom: 1.5rem;
+  margin-bottom: 1rem;
 }
 
 .control {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  font-size: 0.9rem;
+  font-size: 0.85rem;
 }
 
 .control input[type='range'] {
@@ -307,25 +315,29 @@ addMessage = addMessageWithAutoProcess
   text-align: right;
 }
 
+.demo-content {
+  margin-bottom: 0.75rem;
+}
+
 .flow-container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 1rem;
-  margin-bottom: 1.5rem;
+  margin-bottom: 1rem;
 }
 
 .section-title {
-  font-size: 0.85rem;
+  font-size: 0.75rem;
   font-weight: 600;
   color: var(--vp-c-text-2);
   text-align: center;
-  margin-bottom: 0.75rem;
+  margin-bottom: 0.5rem;
 }
 
 .queue-box {
   background: var(--vp-c-bg);
   border: 2px solid var(--vp-c-divider);
-  border-radius: 10px;
+  border-radius: 8px;
   overflow: hidden;
 }
 
@@ -334,7 +346,7 @@ addMessage = addMessageWithAutoProcess
 }
 
 .queue-box.dead-letter {
-  border-color: #ef4444;
+  border-color: var(--vp-c-danger);
 }
 
 .queue-header {
@@ -343,12 +355,12 @@ addMessage = addMessageWithAutoProcess
   align-items: center;
   padding: 0.5rem 0.75rem;
   background: var(--vp-c-bg-soft);
-  font-size: 0.8rem;
+  font-size: 0.75rem;
   font-weight: 600;
 }
 
 .message-list {
-  max-height: 200px;
+  max-height: 150px;
   overflow-y: auto;
   padding: 0.5rem;
 }
@@ -361,17 +373,17 @@ addMessage = addMessageWithAutoProcess
   background: var(--vp-c-bg-soft);
   border-radius: 6px;
   margin-bottom: 0.4rem;
-  font-size: 0.8rem;
+  font-size: 0.75rem;
 }
 
 .message-item.processing {
-  border: 1px solid #f59e0b;
-  background: rgba(245, 158, 11, 0.1);
+  border: 1px solid var(--vp-c-warning);
+  background: var(--vp-c-warning-soft);
 }
 
 .message-item.failed {
-  border: 1px solid #ef4444;
-  background: rgba(239, 68, 68, 0.1);
+  border: 1px solid var(--vp-c-danger);
+  background: var(--vp-c-danger-soft);
 }
 
 .msg-id {
@@ -379,32 +391,32 @@ addMessage = addMessageWithAutoProcess
 }
 
 .msg-retries {
-  font-size: 0.7rem;
-  color: #f59e0b;
+  font-size: 0.65rem;
+  color: var(--vp-c-warning);
 }
 
 .msg-error {
-  font-size: 0.7rem;
-  color: #ef4444;
+  font-size: 0.65rem;
+  color: var(--vp-c-danger);
 }
 
-.empty {
+.empty, .more {
   text-align: center;
-  padding: 1.5rem;
+  padding: 1rem 0.5rem;
   color: var(--vp-c-text-3);
-  font-size: 0.85rem;
+  font-size: 0.75rem;
 }
 
 .add-btn,
 .retry-btn {
   width: 100%;
-  padding: 0.6rem;
+  padding: 0.5rem;
   border: none;
-  border-radius: 8px;
+  border-radius: 6px;
   cursor: pointer;
   font-weight: 600;
-  font-size: 0.85rem;
-  margin-top: 0.75rem;
+  font-size: 0.8rem;
+  margin-top: 0.5rem;
   transition: all 0.2s;
 }
 
@@ -414,8 +426,7 @@ addMessage = addMessageWithAutoProcess
 }
 
 .add-btn:hover:not(:disabled) {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+  opacity: 0.9;
 }
 
 .add-btn:disabled {
@@ -424,21 +435,21 @@ addMessage = addMessageWithAutoProcess
 }
 
 .retry-btn {
-  background: #f59e0b;
+  background: var(--vp-c-warning);
   color: white;
 }
 
 .retry-btn:hover:not(:disabled) {
-  background: #d97706;
+  opacity: 0.8;
 }
 
 .processor-box {
   background: var(--vp-c-bg);
   border: 2px solid var(--vp-c-divider);
-  border-radius: 10px;
-  padding: 1.5rem;
+  border-radius: 8px;
+  padding: 1rem;
   text-align: center;
-  min-height: 200px;
+  min-height: 150px;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -446,8 +457,8 @@ addMessage = addMessageWithAutoProcess
 }
 
 .processor-icon {
-  font-size: 2.5rem;
-  margin-bottom: 0.75rem;
+  font-size: 2rem;
+  margin-bottom: 0.5rem;
 }
 
 .processor-icon.active {
@@ -455,97 +466,87 @@ addMessage = addMessageWithAutoProcess
 }
 
 .processor-status {
-  font-size: 0.9rem;
+  font-size: 0.8rem;
   font-weight: 600;
   margin-bottom: 0.5rem;
 }
 
 .current-msg {
-  font-size: 0.85rem;
+  font-size: 0.75rem;
   color: var(--vp-c-text-2);
   margin-bottom: 0.5rem;
 }
 
 .last-result {
-  font-size: 0.8rem;
+  font-size: 0.75rem;
   padding: 0.5rem 0.75rem;
   border-radius: 6px;
   margin-top: 0.5rem;
 }
 
 .last-result.success {
-  background: #dcfce7;
-  color: #166534;
+  background: var(--vp-c-success);
+  color: white;
 }
 
 .last-result.warning {
-  background: rgba(245, 158, 11, 0.1);
-  color: #d97706;
+  background: var(--vp-c-warning-soft);
+  color: var(--vp-c-warning-dark);
 }
 
 .last-result.error {
-  background: rgba(239, 68, 68, 0.1);
-  color: #dc2626;
+  background: var(--vp-c-danger-soft);
+  color: var(--vp-c-danger-dark);
 }
 
 .stats {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
   gap: 1rem;
-  margin-bottom: 1.5rem;
 }
 
 .stat-card {
   background: var(--vp-c-bg);
-  border-radius: 10px;
-  padding: 1rem;
+  border-radius: 8px;
+  padding: 0.75rem;
   text-align: center;
   border: 1px solid var(--vp-c-divider);
 }
 
 .stat-card.success {
-  border-color: #22c55e;
-  background: rgba(34, 197, 94, 0.05);
+  border-color: var(--vp-c-success);
+  background: var(--vp-c-success-soft);
 }
 
 .stat-card.warning {
-  border-color: #ef4444;
-  background: rgba(239, 68, 68, 0.05);
+  border-color: var(--vp-c-danger);
+  background: var(--vp-c-danger-soft);
 }
 
 .stat-label {
-  font-size: 0.8rem;
+  font-size: 0.7rem;
   color: var(--vp-c-text-2);
   margin-bottom: 0.35rem;
 }
 
 .stat-value {
-  font-size: 1.3rem;
+  font-size: 1.1rem;
   font-weight: 700;
 }
 
-.explanation {
-  background: var(--vp-c-bg);
-  border-radius: 10px;
-  padding: 1rem;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.exp-title {
-  font-weight: 600;
-  margin-bottom: 0.75rem;
-}
-
-.exp-content {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.exp-item {
-  font-size: 0.9rem;
-  line-height: 1.5;
+.info-box {
+  background: var(--vp-c-bg-alt);
+  padding: 0.75rem;
+  border-radius: 6px;
+  font-size: 0.8rem;
   color: var(--vp-c-text-2);
+  margin-top: 0.75rem;
+  display: flex;
+  gap: 0.25rem;
+}
+
+.info-box .icon {
+  flex-shrink: 0;
 }
 
 @keyframes spin {
diff --git a/docs/.vitepress/theme/components/appendix/queue-design/DecouplingDemo.vue b/docs/.vitepress/theme/components/appendix/queue-design/DecouplingDemo.vue
new file mode 100644
index 0000000..3ccb3ba
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/queue-design/DecouplingDemo.vue
@@ -0,0 +1,522 @@
+<!--
+  DecouplingDemo.vue
+  系统解耦演示 - 同步 vs 异步对比
+-->
+<template>
+  <div class="decoupling-demo">
+    <div class="demo-header">
+      <span class="icon">🔗</span>
+      <span class="title">系统解耦演示</span>
+      <span class="subtitle">从紧耦合到松耦合的演进</span>
+    </div>
+
+    <div class="mode-switch">
+      <button
+        class="mode-btn"
+        :class="{ active: !useAsync }"
+        @click="useAsync = false"
+      >
+        🔗 紧耦合 (同步)
+      </button>
+      <button
+        class="mode-btn"
+        :class="{ active: useAsync }"
+        @click="useAsync = true"
+      >
+        🔓 松耦合 (异步)
+      </button>
+    </div>
+
+    <div class="demo-content">
+      <!-- 紧耦合模式 -->
+      <div v-if="!useAsync" class="synchronous-mode">
+        <div class="scenario">
+          <div class="scenario-title">❌ 紧耦合的致命问题</div>
+          <div class="flow-diagram">
+            <div class="service-box order">
+              <div class="service-name">订单服务</div>
+              <div class="service-desc">创建订单</div>
+            </div>
+
+            <div class="arrows">
+              <div
+                v-for="call in syncCalls"
+                :key="call.id"
+                class="sync-call"
+                :class="{ active: call.active }"
+              >
+                <div class="call-line"></div>
+                <div class="call-label">{{ call.service }}</div>
+                <div v-if="call.active" class="call-status">
+                  {{ call.status }}
+                </div>
+              </div>
+            </div>
+
+            <div
+              class="service-box notification"
+              :class="{ failed: notificationFailed }"
+            >
+              <div class="service-name">通知服务</div>
+              <div class="service-desc">发送短信/邮件</div>
+              <div v-if="notificationFailed" class="error-msg">
+                服务宕机 ❌
+              </div>
+            </div>
+          </div>
+
+          <div class="problem-list">
+            <div class="problem-item">
+              <span class="icon">⚠️</span>
+              <span
+                ><strong>依赖性强：</strong>通知服务宕机,订单创建失败</span
+              >
+            </div>
+            <div class="problem-item">
+              <span class="icon">⚠️</span>
+              <span
+                ><strong>响应慢：</strong>总耗时 = 300ms + 500ms + 400ms =
+                1200ms</span
+              >
+            </div>
+            <div class="problem-item">
+              <span class="icon">⚠️</span>
+              <span
+                ><strong>扩展难：</strong>增加新服务需要修改订单代码</span
+              >
+            </div>
+          </div>
+
+          <button class="test-btn fail" @click="testSyncCall">
+            模拟通知服务故障
+          </button>
+        </div>
+      </div>
+
+      <!-- 松耦合模式 -->
+      <div v-else class="asynchronous-mode">
+        <div class="scenario">
+          <div class="scenario-title">✅ 松耦合的核心优势</div>
+          <div class="flow-diagram">
+            <div class="service-box order">
+              <div class="service-name">订单服务</div>
+              <div class="service-desc">创建订单 + 发送消息</div>
+            </div>
+
+            <div class="mq-bridge">
+              <div class="mq-box">
+                <div class="mq-icon">📨</div>
+                <div class="mq-label">消息队列</div>
+                <div v-if="messageInQueue" class="msg-indicator">
+                  消息已发送
+                </div>
+              </div>
+              <div class="flow-arrow">→</div>
+            </div>
+
+            <div class="consumers-group">
+              <div class="consumer-box" :class="{ failed: consumerFailed }">
+                <div class="consumer-name">短信服务</div>
+                <div class="consumer-status">
+                  {{ consumerFailed ? '离线(不影响订单)' : '运行中' }}
+                </div>
+              </div>
+              <div class="consumer-box">
+                <div class="consumer-name">邮件服务</div>
+                <div class="consumer-status">运行中</div>
+              </div>
+              <div class="consumer-box">
+                <div class="consumer-name">积分服务</div>
+                <div class="consumer-status">运行中</div>
+              </div>
+            </div>
+          </div>
+
+          <div class="benefit-list">
+            <div class="benefit-item">
+              <span class="icon">✅</span>
+              <span
+                ><strong>独立运行：</strong>通知服务宕机不影响订单创建</span
+              >
+            </div>
+            <div class="benefit-item">
+              <span class="icon">✅</span>
+              <span
+                ><strong>响应快：</strong>订单服务只耗时 50ms(发送消息)</span
+              >
+            </div>
+            <div class="benefit-item">
+              <span class="icon">✅</span>
+              <span
+                ><strong>易扩展：</strong>增加新消费者无需修改订单代码</span
+              >
+            </div>
+          </div>
+
+          <button class="test-btn success" @click="testAsyncCall">
+            发送订单消息
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div class="info-box">
+      <span class="icon">💡</span>
+      <strong>核心思想:</strong>同步调用强依赖、响应慢;异步消息解耦、响应快、易扩展
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const useAsync = ref(false)
+const notificationFailed = ref(false)
+const consumerFailed = ref(false)
+const messageInQueue = ref(false)
+
+const syncCalls = ref([
+  { id: 1, service: '调用库存服务', active: false, status: '处理中...' },
+  { id: 2, service: '调用积分服务', active: false, status: '处理中...' },
+  {
+    id: 3,
+    service: '调用通知服务',
+    active: false,
+    status: '失败!订单回滚'
+  }
+])
+
+const testSyncCall = () => {
+  notificationFailed.value = true
+
+  syncCalls.value.forEach((call, index) => {
+    setTimeout(() => {
+      call.active = true
+      if (index === syncCalls.value.length - 1) {
+        setTimeout(() => {
+          call.active = false
+        }, 2000)
+      }
+    }, index * 800)
+  })
+}
+
+const testAsyncCall = () => {
+  messageInQueue.value = true
+  setTimeout(() => {
+    messageInQueue.value = false
+  }, 2000)
+}
+</script>
+
+<style scoped>
+.decoupling-demo {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  background: var(--vp-c-bg-soft);
+  padding: 20px;
+  margin: 20px 0;
+  font-family: var(--vp-font-family-base);
+}
+
+.demo-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.demo-header .icon {
+  font-size: 24px;
+}
+
+.demo-header .title {
+  font-weight: 700;
+  font-size: 18px;
+  color: var(--vp-c-text-1);
+}
+
+.demo-header .subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 14px;
+  margin-left: 8px;
+}
+
+.mode-switch {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.mode-btn {
+  flex: 1;
+  padding: 12px 16px;
+  border: 2px solid var(--vp-c-divider);
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 14px;
+  transition: all 0.2s;
+}
+
+.mode-btn:hover {
+  border-color: var(--vp-c-brand);
+}
+
+.mode-btn.active {
+  background: var(--vp-c-brand);
+  color: white;
+  border-color: var(--vp-c-brand);
+}
+
+.demo-content {
+  margin-bottom: 16px;
+}
+
+.scenario-title {
+  font-weight: 600;
+  font-size: 16px;
+  margin-bottom: 16px;
+  text-align: center;
+}
+
+.flow-diagram {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  padding: 20px;
+  background: var(--vp-c-bg);
+  border-radius: 12px;
+  margin-bottom: 16px;
+}
+
+.service-box {
+  background: var(--vp-c-bg-soft);
+  border: 2px solid var(--vp-c-brand);
+  border-radius: 12px;
+  padding: 16px;
+  text-align: center;
+  min-width: 160px;
+  transition: all 0.3s;
+}
+
+.service-box.failed {
+  border-color: var(--vp-c-danger);
+  background: rgba(239, 68, 68, 0.1);
+}
+
+.service-name {
+  font-weight: 600;
+  font-size: 15px;
+  margin-bottom: 6px;
+}
+
+.service-desc {
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+}
+
+.error-msg {
+  margin-top: 10px;
+  padding: 8px 12px;
+  background: var(--vp-c-danger);
+  color: white;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.arrows {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+  max-width: 280px;
+}
+
+.sync-call {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px;
+  border-radius: 8px;
+  transition: all 0.3s;
+}
+
+.sync-call.active {
+  background: rgba(239, 68, 68, 0.1);
+}
+
+.call-line {
+  width: 2px;
+  height: 24px;
+  background: var(--vp-c-divider);
+}
+
+.sync-call.active .call-line {
+  background: var(--vp-c-danger);
+}
+
+.call-label {
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+  flex: 1;
+}
+
+.call-status {
+  font-size: 12px;
+  color: var(--vp-c-danger);
+  font-weight: 600;
+}
+
+.mq-bridge {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.mq-box {
+  background: rgba(59, 130, 246, 0.1);
+  border: 2px solid var(--vp-c-brand);
+  border-radius: 12px;
+  padding: 16px;
+  text-align: center;
+  min-width: 140px;
+}
+
+.mq-icon {
+  font-size: 32px;
+  margin-bottom: 8px;
+}
+
+.mq-label {
+  font-weight: 600;
+  font-size: 15px;
+}
+
+.msg-indicator {
+  margin-top: 10px;
+  padding: 8px 12px;
+  background: var(--vp-c-success);
+  color: white;
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.flow-arrow {
+  font-size: 24px;
+  color: var(--vp-c-brand);
+}
+
+.consumers-group {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+  gap: 10px;
+  width: 100%;
+  max-width: 450px;
+}
+
+.consumer-box {
+  background: var(--vp-c-bg-soft);
+  border: 2px solid var(--vp-c-brand);
+  border-radius: 8px;
+  padding: 12px;
+  text-align: center;
+  transition: all 0.3s;
+}
+
+.consumer-box.failed {
+  border-color: var(--vp-c-warning);
+  background: rgba(245, 158, 11, 0.1);
+}
+
+.consumer-name {
+  font-size: 13px;
+  font-weight: 600;
+  margin-bottom: 6px;
+}
+
+.consumer-status {
+  font-size: 12px;
+  color: var(--vp-c-text-2);
+}
+
+.problem-list,
+.benefit-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 16px;
+}
+
+.problem-item,
+.benefit-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 12px;
+  border-radius: 8px;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.problem-item {
+  background: rgba(239, 68, 68, 0.1);
+}
+
+.benefit-item {
+  background: rgba(34, 197, 94, 0.1);
+}
+
+.icon {
+  font-size: 18px;
+  flex-shrink: 0;
+}
+
+.test-btn {
+  width: 100%;
+  padding: 12px;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 14px;
+  transition: all 0.2s;
+}
+
+.test-btn.fail {
+  background: var(--vp-c-danger);
+  color: white;
+}
+
+.test-btn.fail:hover {
+  opacity: 0.9;
+}
+
+.test-btn.success {
+  background: var(--vp-c-success);
+  color: white;
+}
+
+.test-btn.success:hover {
+  opacity: 0.9;
+}
+
+.info-box {
+  background: var(--vp-c-bg-alt);
+  padding: 16px;
+  border-radius: 8px;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+  margin-top: 16px;
+  display: flex;
+  gap: 8px;
+}
+
+.info-box .icon {
+  flex-shrink: 0;
+}
+</style>
diff --git a/docs/.vitepress/theme/components/appendix/queue-design/IdempotenceDemo.vue b/docs/.vitepress/theme/components/appendix/queue-design/IdempotenceDemo.vue
index 50c818e..241f534 100644
--- a/docs/.vitepress/theme/components/appendix/queue-design/IdempotenceDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/queue-design/IdempotenceDemo.vue
@@ -1,50 +1,881 @@
+<!--
+  IdempotenceDemo.vue
+  幂等性演示 - 重复消费处理
+-->
 <template>
-  <div class="demo-container">
+  <div class="idempotence-demo">
     <div class="demo-header">
-      <h4>{{ title }}</h4>
-      <p class="hint">{{ description }}</p>
+      <span class="icon">🔄</span>
+      <span class="title">幂等性演示</span>
+      <span class="subtitle">保证重复消费不会产生副作用</span>
     </div>
+
+    <div class="scenario-switch">
+      <button
+        class="scenario-btn"
+        :class="{ active: scenario === 'transfer' }"
+        @click="scenario = 'transfer'"
+      >
+        💰 银行转账
+      </button>
+      <button
+        class="scenario-btn"
+        :class="{ active: scenario === 'elevator' }"
+        @click="scenario = 'elevator'"
+      >
+        🛗 电梯按钮
+      </button>
+    </div>
+
     <div class="demo-content">
-      <el-alert type="info" :closable="false">
-        幂等性演示组件占位符 - 待实现具体交互
-      </el-alert>
+      <!-- 银行转账场景 -->
+      <div v-if="scenario === 'transfer'" class="transfer-scenario">
+        <div class="scenario-header">
+          <div class="title">❌ 非幂等操作: 银行转账</div>
+          <div class="subtitle">重复消费会导致多次扣款</div>
+        </div>
+
+        <div class="account-system">
+          <div class="account-card sender">
+            <div class="account-name">发送方</div>
+            <div class="account-balance">
+              余额: ¥<span class="balance-amount">{{ senderBalance }}</span>
+            </div>
+          </div>
+
+          <div class="transfer-flow">
+            <div class="flow-animation" :class="{ active: isTransferring }">
+              <div class="money-icon">💰</div>
+              <div class="flow-label">转账 ¥100</div>
+            </div>
+            <div class="retry-info" v-if="retryCount > 0">
+              <div class="retry-badge">重试 {{ retryCount }} 次</div>
+            </div>
+          </div>
+
+          <div class="account-card receiver">
+            <div class="account-name">接收方</div>
+            <div class="account-balance">
+              余额: ¥<span class="balance-amount">{{ receiverBalance }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="control-panel">
+          <div class="control-row">
+            <div class="control-item">
+              <label>幂等性保护</label>
+              <div class="toggle-switch">
+                <button
+                  class="toggle-btn"
+                  :class="{ active: useIdempotence }"
+                  @click="useIdempotence = !useIdempotence"
+                >
+                  <span class="toggle-slider"></span>
+                </button>
+                <span class="toggle-label">{{ useIdempotence ? '已启用' : '未启用' }}</span>
+              </div>
+            </div>
+
+            <button
+              class="action-btn"
+              @click="simulateTransfer"
+              :disabled="isTransferring"
+            >
+              {{ isTransferring ? '处理中...' : '模拟重复消费' }}
+            </button>
+          </div>
+
+          <div class="idempotence-info" v-if="useIdempotence">
+            <div class="info-item">
+              <span class="info-icon">🔑</span>
+              <span class="info-text">每笔交易有唯一ID,重复请求被自动过滤</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="result-log">
+          <div class="log-header">处理日志</div>
+          <div class="log-list">
+            <div
+              v-for="(log, index) in logs"
+              :key="index"
+              class="log-item"
+              :class="log.type"
+            >
+              <span class="log-time">{{ log.time }}</span>
+              <span class="log-message">{{ log.message }}</span>
+            </div>
+            <div v-if="logs.length === 0" class="log-empty">
+              暂无日志,点击按钮开始模拟
+            </div>
+          </div>
+        </div>
+
+        <div class="comparison-box">
+          <div class="comparison-item bad">
+            <div class="comp-header">❌ 无幂等保护</div>
+            <div class="comp-body">
+              <div class="comp-result">扣款 ¥{{ (retryCount + 1) * 100 }}</div>
+              <div class="comp-desc">重复消费造成多次扣款</div>
+            </div>
+          </div>
+          <div class="comparison-item good">
+            <div class="comp-header">✅ 有幂等保护</div>
+            <div class="comp-body">
+              <div class="comp-result">扣款 ¥100</div>
+              <div class="comp-desc">重复请求被过滤,只扣一次</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 电梯按钮场景 -->
+      <div v-else class="elevator-scenario">
+        <div class="scenario-header">
+          <div class="title">✅ 天然幂等操作: 电梯按钮</div>
+          <div class="subtitle">无论按多少次,电梯只响应一次</div>
+        </div>
+
+        <div class="elevator-system">
+          <div class="elevator-panel">
+            <div class="panel-title">电梯按钮面板</div>
+            <div class="button-grid">
+              <button
+                v-for="floor in floors"
+                :key="floor"
+                class="floor-btn"
+                :class="{ active: selectedFloor === floor }"
+                @click="pressFloor(floor)"
+              >
+                {{ floor }}F
+              </button>
+            </div>
+            <div class="press-count">
+              <span class="count-label">按钮按了</span>
+              <span class="count-value">{{ pressCount }}</span>
+              <span class="count-label">次</span>
+            </div>
+          </div>
+
+          <div class="elevator-shaft">
+            <div class="floor-marks">
+              <div
+                v-for="floor in floors"
+                :key="floor"
+                class="floor-mark"
+                :class="{ current: elevatorFloor === floor }"
+              >
+                <span class="floor-num">{{ floor }}F</span>
+              </div>
+            </div>
+            <div class="elevator-car" :style="{ bottom: elevatorPosition }">
+              <div class="car-icon">🛗</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="control-panel">
+          <div class="control-item">
+            <label>快速连按3次</label>
+            <button class="action-btn" @click="pressMultipleTimes">
+              🚀 连续点击
+            </button>
+          </div>
+          <div class="info-text">
+            <span class="info-icon">💡</span>
+            虽然按了{{ pressCount }}次,但电梯只响应一次请求
+          </div>
+        </div>
+
+        <div class="explanation-box">
+          <div class="explanation-title">为什么电梯按钮是幂等的?</div>
+          <div class="explanation-list">
+            <div class="explanation-item">
+              <span class="icon">✅</span>
+              <span>状态只切换一次: 停靠 → 已选中</span>
+            </div>
+            <div class="explanation-item">
+              <span class="icon">✅</span>
+              <span>重复请求不改变目标楼层</span>
+            </div>
+            <div class="explanation-item">
+              <span class="icon">✅</span>
+              <span>无需额外的幂等性保护机制</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="principle-box">
+      <div class="principle-icon">🎯</div>
+      <div class="principle-content">
+        <strong>幂等性核心原则:</strong>
+        {{ scenario === 'transfer'
+          ? '为每条消息生成唯一ID,处理前检查是否已处理,避免重复操作'
+          : '设计操作时确保重复执行和执行一次的效果相同' }}
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 
-const title = ref('幂等性演示')
-const description = ref('展示消息消费中的幂等性问题，以及如何通过幂等性设计保证消息处理的正确性')
+// 场景切换
+const scenario = ref('transfer')
+
+// 转账场景
+const senderBalance = ref(1000)
+const receiverBalance = ref(500)
+const isTransferring = ref(false)
+const useIdempotence = ref(false)
+const retryCount = ref(0)
+const logs = ref([])
+
+const addLog = (message, type = 'info') => {
+  const now = new Date()
+  const time = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`
+  logs.value.unshift({ time, message, type })
+}
+
+const simulateTransfer = () => {
+  if (isTransferring.value) return
+
+  isTransferring.value = true
+  retryCount.value = 0
+  logs.value = []
+
+  const originalSenderBalance = senderBalance.value
+  const originalReceiverBalance = receiverBalance.value
+
+  addLog('收到转账请求: ¥100', 'info')
+
+  // 模拟重复消费
+  const processTransfer = (attempt) => {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        retryCount.value = attempt
+
+        if (useIdempotence.value) {
+          if (attempt === 0) {
+            senderBalance.value = originalSenderBalance - 100
+            receiverBalance.value = originalReceiverBalance + 100
+            addLog(`第${attempt + 1}次处理: 成功转账 ¥100`, 'success')
+            addLog('幂等性检查: 唯一ID已记录,后续请求被过滤', 'info')
+          } else {
+            addLog(`第${attempt + 1}次处理: 重复请求,已忽略`, 'warning')
+          }
+        } else {
+          senderBalance.value -= 100
+          receiverBalance.value += 100
+          addLog(`第${attempt + 1}次处理: 转账 ¥100`, attempt === 0 ? 'success' : 'error')
+        }
+
+        if (attempt < 2) {
+          setTimeout(() => processTransfer(attempt + 1), 1000)
+        } else {
+          setTimeout(() => {
+            isTransferring.value = false
+          }, 500)
+        }
+
+        resolve()
+      }, 1000)
+    })
+  }
+
+  processTransfer(0)
+}
+
+// 电梯场景
+const floors = [1, 2, 3, 4, 5]
+const selectedFloor = ref(null)
+const elevatorFloor = ref(1)
+const pressCount = ref(0)
+
+const elevatorPosition = computed(() => {
+  return ((elevatorFloor.value - 1) / 4) * 100 + '%'
+})
+
+const pressFloor = (floor) => {
+  pressCount.value++
+  selectedFloor.value = floor
+
+  setTimeout(() => {
+    elevatorFloor.value = floor
+  }, 500)
+}
+
+const pressMultipleTimes = () => {
+  const targetFloor = Math.floor(Math.random() * 5) + 1
+  let count = 0
+  const interval = setInterval(() => {
+    pressFloor(targetFloor)
+    count++
+    if (count >= 3) {
+      clearInterval(interval)
+    }
+  }, 200)
+}
 </script>
 
 <style scoped>
-.demo-container {
+.idempotence-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 20px;
+  border-radius: 12px;
   background: var(--vp-c-bg-soft);
+  padding: 20px;
+  margin: 20px 0;
+  font-family: var(--vp-font-family-base);
 }
 
 .demo-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
   margin-bottom: 20px;
 }
 
-.demo-header h4 {
-  margin: 0 0 8px 0;
+.demo-header .icon {
+  font-size: 24px;
+}
+
+.demo-header .title {
+  font-weight: 700;
+  font-size: 18px;
   color: var(--vp-c-text-1);
 }
 
-.hint {
-  margin: 0;
+.demo-header .subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 14px;
+  margin-left: 8px;
+}
+
+.scenario-switch {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.scenario-btn {
+  flex: 1;
+  padding: 12px 16px;
+  border: 2px solid var(--vp-c-divider);
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 14px;
+  transition: all 0.2s;
+}
+
+.scenario-btn:hover {
+  border-color: var(--vp-c-brand);
+}
+
+.scenario-btn.active {
+  background: var(--vp-c-brand);
+  color: white;
+  border-color: var(--vp-c-brand);
+}
+
+.scenario-header {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.scenario-header .title {
+  font-weight: 700;
+  font-size: 18px;
+  color: var(--vp-c-text-1);
+  margin-bottom: 6px;
+}
+
+.scenario-header .subtitle {
   font-size: 14px;
   color: var(--vp-c-text-2);
 }
 
-.demo-content {
+.account-system {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 40px;
+  margin-bottom: 20px;
+  padding: 24px;
+  background: var(--vp-c-bg);
+  border-radius: 12px;
+}
+
+.account-card {
+  flex: 1;
+  max-width: 200px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+  border: 2px solid var(--vp-c-brand);
+  border-radius: 12px;
+  text-align: center;
+}
+
+.account-name {
+  font-weight: 600;
+  font-size: 15px;
+  margin-bottom: 10px;
+}
+
+.account-balance {
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.balance-amount {
+  font-weight: 700;
+  font-size: 18px;
+  color: var(--vp-c-brand);
+}
+
+.transfer-flow {
   display: flex;
   flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+.flow-animation {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 16px;
+  border-radius: 8px;
+  transition: all 0.3s;
+}
+
+.flow-animation.active {
+  background: rgba(59, 130, 246, 0.1);
+  animation: pulse 1s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.6;
+  }
+}
+
+.money-icon {
+  font-size: 32px;
+}
+
+.flow-label {
+  font-weight: 600;
+  font-size: 13px;
+}
+
+.retry-info {
+  display: flex;
+  justify-content: center;
+}
+
+.retry-badge {
+  padding: 4px 10px;
+  background: var(--vp-c-warning);
+  color: white;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.control-panel {
+  background: var(--vp-c-bg);
+  padding: 16px;
+  border-radius: 8px;
+  margin-bottom: 16px;
+}
+
+.control-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 12px;
+}
+
+.control-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.control-item label {
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.toggle-switch {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.toggle-btn {
+  position: relative;
+  width: 48px;
+  height: 26px;
+  background: var(--vp-c-divider);
+  border: none;
+  border-radius: 13px;
+  cursor: pointer;
+  padding: 0;
+  transition: all 0.3s;
+}
+
+.toggle-btn.active {
+  background: var(--vp-c-brand);
+}
+
+.toggle-slider {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 20px;
+  height: 20px;
+  background: white;
+  border-radius: 50%;
+  transition: all 0.3s;
+}
+
+.toggle-btn.active .toggle-slider {
+  left: 25px;
+}
+
+.toggle-label {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.action-btn {
+  padding: 10px 20px;
+  background: var(--vp-c-brand);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 13px;
+  transition: all 0.2s;
+}
+
+.action-btn:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.action-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.idempotence-info {
+  margin-top: 12px;
+}
+
+.info-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px;
+  background: rgba(34, 197, 94, 0.1);
+  border: 1px solid rgba(34, 197, 94, 0.2);
+  border-radius: 6px;
+  font-size: 13px;
+}
+
+.info-icon {
+  font-size: 16px;
+}
+
+.info-text {
+  flex: 1;
+}
+
+.result-log {
+  background: var(--vp-c-bg);
+  padding: 16px;
+  border-radius: 8px;
+  margin-bottom: 16px;
+}
+
+.log-header {
+  font-weight: 600;
+  font-size: 14px;
+  margin-bottom: 10px;
+}
+
+.log-list {
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.log-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  margin-bottom: 6px;
+}
+
+.log-item.success {
+  background: rgba(34, 197, 94, 0.1);
+}
+
+.log-item.error {
+  background: rgba(239, 68, 68, 0.1);
+}
+
+.log-item.warning {
+  background: rgba(245, 158, 11, 0.1);
+}
+
+.log-time {
+  color: var(--vp-c-text-3);
+  font-family: monospace;
+}
+
+.log-message {
+  flex: 1;
+}
+
+.log-empty {
+  text-align: center;
+  padding: 20px;
+  color: var(--vp-c-text-3);
+  font-size: 13px;
+}
+
+.comparison-box {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 16px;
 }
+
+.comparison-item {
+  padding: 16px;
+  border-radius: 8px;
+  text-align: center;
+}
+
+.comparison-item.bad {
+  background: rgba(239, 68, 68, 0.1);
+  border: 1px solid rgba(239, 68, 68, 0.2);
+}
+
+.comparison-item.good {
+  background: rgba(34, 197, 94, 0.1);
+  border: 1px solid rgba(34, 197, 94, 0.2);
+}
+
+.comp-header {
+  font-weight: 600;
+  font-size: 14px;
+  margin-bottom: 10px;
+}
+
+.comp-result {
+  font-weight: 700;
+  font-size: 18px;
+  margin-bottom: 6px;
+}
+
+.comp-desc {
+  font-size: 12px;
+  color: var(--vp-c-text-2);
+}
+
+.elevator-system {
+  display: flex;
+  gap: 24px;
+  margin-bottom: 20px;
+  padding: 24px;
+  background: var(--vp-c-bg);
+  border-radius: 12px;
+}
+
+.elevator-panel {
+  flex: 1;
+  max-width: 250px;
+}
+
+.panel-title {
+  font-weight: 600;
+  font-size: 14px;
+  text-align: center;
+  margin-bottom: 16px;
+}
+
+.button-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+  margin-bottom: 16px;
+}
+
+.floor-btn {
+  padding: 16px;
+  background: var(--vp-c-bg-soft);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 14px;
+  transition: all 0.2s;
+}
+
+.floor-btn:hover {
+  border-color: var(--vp-c-brand);
+}
+
+.floor-btn.active {
+  background: var(--vp-c-brand);
+  color: white;
+  border-color: var(--vp-c-brand);
+}
+
+.press-count {
+  text-align: center;
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+}
+
+.count-label {
+  font-size: 12px;
+}
+
+.count-value {
+  font-weight: 700;
+  font-size: 18px;
+  color: var(--vp-c-brand);
+}
+
+.elevator-shaft {
+  flex: 1;
+  position: relative;
+  height: 300px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 12px;
+  padding: 20px;
+}
+
+.floor-marks {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.floor-mark {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.floor-num {
+  font-weight: 600;
+  font-size: 12px;
+  color: var(--vp-c-text-2);
+}
+
+.floor-mark.current .floor-num {
+  color: var(--vp-c-brand);
+  font-weight: 700;
+}
+
+.elevator-car {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  transition: bottom 0.5s ease;
+}
+
+.car-icon {
+  font-size: 32px;
+  animation: bounce 0.5s ease;
+}
+
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-5px);
+  }
+}
+
+.info-text {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+  padding: 10px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+}
+
+.explanation-box {
+  background: var(--vp-c-bg);
+  padding: 16px;
+  border-radius: 8px;
+}
+
+.explanation-title {
+  font-weight: 600;
+  font-size: 14px;
+  margin-bottom: 12px;
+}
+
+.explanation-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.explanation-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.explanation-item .icon {
+  flex-shrink: 0;
+}
+
+.principle-box {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  background: rgba(59, 130, 246, 0.1);
+  border: 1px solid rgba(59, 130, 246, 0.2);
+  border-radius: 8px;
+  font-size: 14px;
+  color: var(--vp-c-text-1);
+  margin-top: 16px;
+}
+
+.principle-icon {
+  font-size: 24px;
+}
+
+.principle-content {
+  flex: 1;
+}
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/queue-design/ReliabilityDemo.vue b/docs/.vitepress/theme/components/appendix/queue-design/ReliabilityDemo.vue
index b5d245a..8b536b7 100644
--- a/docs/.vitepress/theme/components/appendix/queue-design/ReliabilityDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/queue-design/ReliabilityDemo.vue
@@ -1,13 +1,207 @@
+<!--
+  ReliabilityDemo.vue
+  消息可靠性演示 - 三道防线
+-->
 <template>
-  <div class="demo-container">
+  <div class="reliability-demo">
     <div class="demo-header">
-      <h4>{{ title }}</h4>
-      <p class="hint">{{ description }}</p>
+      <span class="icon">🛡️</span>
+      <span class="title">消息可靠性演示</span>
+      <span class="subtitle">三道防线保证消息不丢失</span>
     </div>
-    <div class="demo-content">
-      <el-alert type="info" :closable="false">
-        消息可靠性演示组件占位符 - 待实现具体交互
-      </el-alert>
+
+    <div class="defense-system">
+      <!-- 防线1: 生产者确认 -->
+      <div class="defense-line">
+        <div class="defense-header">
+          <div class="defense-badge line1">防线 1</div>
+          <div class="defense-title">生产者确认 (Producer ACK)</div>
+        </div>
+        <div class="defense-content">
+          <div class="flow-diagram">
+            <div class="component producer">
+              <div class="comp-icon">📤</div>
+              <div class="comp-label">生产者</div>
+              <div class="comp-desc">发送消息</div>
+            </div>
+
+            <div class="message-flow">
+              <div class="msg-item" :class="{ active: step === 1 }">
+                <div class="msg-icon">📨</div>
+                <div class="msg-label">消息</div>
+                <div v-if="step === 1" class="msg-status">
+                  {{ ackStatus }}
+                </div>
+              </div>
+
+              <div class="ack-item" :class="{ active: step === 2 }">
+                <div class="ack-icon">✓</div>
+                <div class="ack-label">ACK确认</div>
+                <div v-if="step === 2" class="ack-status">
+                  {{ ackMessage }}
+                </div>
+              </div>
+            </div>
+
+            <div class="component broker">
+              <div class="comp-icon">📦</div>
+              <div class="comp-label">Broker</div>
+              <div class="comp-desc">接收并存储</div>
+            </div>
+          </div>
+
+          <div class="control-panel">
+            <div class="control-item">
+              <label>发送消息</label>
+              <button class="action-btn" @click="sendWithAck" :disabled="step > 0">
+                发送并等待确认
+              </button>
+            </div>
+            <div class="info-text">
+              <span class="info-icon">💡</span>
+              如果没收到ACK,生产者会重试或记录本地日志
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 防线2: Broker持久化 -->
+      <div class="defense-line">
+        <div class="defense-header">
+          <div class="defense-badge line2">防线 2</div>
+          <div class="defense-title">Broker持久化</div>
+        </div>
+        <div class="defense-content">
+          <div class="storage-diagram">
+            <div class="storage-container">
+              <div class="storage-option" :class="{ active: storageType === 'memory' }">
+                <div class="option-icon">⚡</div>
+                <div class="option-label">内存存储</div>
+                <div class="option-desc">速度快,但重启丢失</div>
+                <div class="option-risk">❌ 高风险</div>
+              </div>
+
+              <div class="vs-divider">vs</div>
+
+              <div class="storage-option recommended" :class="{ active: storageType === 'disk' }">
+                <div class="option-icon">💾</div>
+                <div class="option-label">磁盘存储</div>
+                <div class="option-desc">落盘保证不丢失</div>
+                <div class="option-risk">✅ 推荐</div>
+              </div>
+            </div>
+
+            <div class="replication-info">
+              <div class="replication-title">
+                <span class="icon">🔄</span>
+                多副本同步
+              </div>
+              <div class="replication-detail">
+                消息同步到3个节点,即使1个节点宕机也不丢数据
+              </div>
+            </div>
+          </div>
+
+          <div class="control-panel">
+            <div class="control-item">
+              <label>存储方式</label>
+              <div class="btn-group">
+                <button
+                  class="toggle-btn"
+                  :class="{ active: storageType === 'memory' }"
+                  @click="storageType = 'memory'"
+                >
+                  内存
+                </button>
+                <button
+                  class="toggle-btn"
+                  :class="{ active: storageType === 'disk' }"
+                  @click="storageType = 'disk'"
+                >
+                  磁盘
+                </button>
+              </div>
+            </div>
+            <div class="info-text" :class="{ warning: storageType === 'memory' }">
+              <span class="info-icon">{{ storageType === 'disk' ? '✅' : '⚠️' }}</span>
+              {{ storageType === 'disk' ? '消息已落盘,安全可靠' : '消息仅在内存,重启丢失' }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 防线3: 消费者确认 -->
+      <div class="defense-line">
+        <div class="defense-header">
+          <div class="defense-badge line3">防线 3</div>
+          <div class="defense-title">消费者确认 (Consumer ACK)</div>
+        </div>
+        <div class="defense-content">
+          <div class="consumer-flow">
+            <div class="flow-step" :class="{ active: consumerStep >= 1 }">
+              <div class="step-num">1</div>
+              <div class="step-content">
+                <div class="step-title">拉取消息</div>
+                <div class="step-desc">从Broker获取消息</div>
+              </div>
+            </div>
+
+            <div class="flow-arrow" :class="{ active: consumerStep >= 1 }">→</div>
+
+            <div class="flow-step" :class="{ active: consumerStep >= 2 }">
+              <div class="step-num">2</div>
+              <div class="step-content">
+                <div class="step-title">处理消息</div>
+                <div class="step-desc">执行业务逻辑</div>
+              </div>
+            </div>
+
+            <div class="flow-arrow" :class="{ active: consumerStep >= 2 }">→</div>
+
+            <div class="flow-step" :class="{ active: consumerStep >= 3 }">
+              <div class="step-num">3</div>
+              <div class="step-content">
+                <div class="step-title">手动ACK</div>
+                <div class="step-desc">确认处理完成</div>
+              </div>
+            </div>
+          </div>
+
+          <div class="ack-comparison">
+            <div class="ack-option">
+              <div class="ack-type">自动 ACK</div>
+              <div class="ack-desc">高效但可能丢消息</div>
+              <div class="ack-risk">⚠️ 不推荐</div>
+            </div>
+
+            <div class="ack-option recommended">
+              <div class="ack-type">手动 ACK</div>
+              <div class="ack-desc">可靠,处理完才确认</div>
+              <div class="ack-risk">✅ 推荐</div>
+            </div>
+          </div>
+
+          <div class="control-panel">
+            <div class="control-item">
+              <label>模拟消费</label>
+              <button class="action-btn" @click="simulateConsume" :disabled="consumerStep > 0">
+                开始消费流程
+              </button>
+            </div>
+            <div class="info-text">
+              <span class="info-icon">💡</span>
+              如果处理失败,不发送ACK,Broker会重新投递
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="summary-box">
+      <div class="summary-icon">🎯</div>
+      <div class="summary-content">
+        <strong>三道防线,缺一不可：</strong>生产者确认 → Broker持久化 → 消费者确认
+      </div>
     </div>
   </div>
 </template>
@@ -15,36 +209,500 @@
 <script setup>
 import { ref } from 'vue'
 
-const title = ref('消息可靠性演示')
-const description = ref('展示消息队列如何保证消息的可靠传输，包括消息确认、持久化、重试机制等')
+// 防线1: 生产者确认
+const step = ref(0)
+const ackStatus = ref('')
+const ackMessage = ref('')
+
+// 防线2: 存储方式
+const storageType = ref('disk')
+
+// 防线3: 消费者确认
+const consumerStep = ref(0)
+
+const sendWithAck = () => {
+  step.value = 1
+  ackStatus.value = '发送中...'
+
+  setTimeout(() => {
+    step.value = 2
+    ackStatus.value = '已发送'
+    ackMessage.value = '收到ACK,消息安全'
+
+    setTimeout(() => {
+      step.value = 0
+      ackStatus.value = ''
+      ackMessage.value = ''
+    }, 3000)
+  }, 1500)
+}
+
+const simulateConsume = () => {
+  consumerStep.value = 1
+
+  setTimeout(() => {
+    consumerStep.value = 2
+    setTimeout(() => {
+      consumerStep.value = 3
+      setTimeout(() => {
+        consumerStep.value = 0
+      }, 3000)
+    }, 1500)
+  }, 1500)
+}
 </script>
 
 <style scoped>
-.demo-container {
+.reliability-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 20px;
+  border-radius: 12px;
   background: var(--vp-c-bg-soft);
+  padding: 20px;
+  margin: 20px 0;
+  font-family: var(--vp-font-family-base);
 }
 
 .demo-header {
-  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 24px;
 }
 
-.demo-header h4 {
-  margin: 0 0 8px 0;
+.demo-header .icon {
+  font-size: 24px;
+}
+
+.demo-header .title {
+  font-weight: 700;
+  font-size: 18px;
   color: var(--vp-c-text-1);
 }
 
-.hint {
-  margin: 0;
+.demo-header .subtitle {
+  color: var(--vp-c-text-2);
   font-size: 14px;
+  margin-left: 8px;
+}
+
+.defense-system {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.defense-line {
+  background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.defense-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 20px;
+  background: var(--vp-c-bg-soft);
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.defense-badge {
+  padding: 6px 12px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 700;
+  color: white;
+}
+
+.defense-badge.line1 {
+  background: #3b82f6
+}
+
+.defense-badge.line2 {
+  background: #f59e0b
+}
+
+.defense-badge.line3 {
+  background: #22c55e
+}
+
+.defense-title {
+  font-weight: 600;
+  font-size: 15px;
+  color: var(--vp-c-text-1);
+}
+
+.defense-content {
+  padding: 20px;
+}
+
+.flow-diagram {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 24px;
+  margin-bottom: 20px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 8px;
+}
+
+.component {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 16px;
+  background: var(--vp-c-bg);
+  border: 2px solid var(--vp-c-brand);
+  border-radius: 12px;
+  min-width: 120px;
+}
+
+.comp-icon {
+  font-size: 32px;
+}
+
+.comp-label {
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.comp-desc {
+  font-size: 12px;
   color: var(--vp-c-text-2);
 }
 
-.demo-content {
+.message-flow {
   display: flex;
   flex-direction: column;
   gap: 16px;
+  align-items: center;
+}
+
+.msg-item,
+.ack-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: 10px;
+  border-radius: 8px;
+  transition: all 0.3s;
+}
+
+.msg-item.active {
+  background: rgba(59, 130, 246, 0.1);
+}
+
+.ack-item.active {
+  background: rgba(34, 197, 94, 0.1);
+}
+
+.msg-icon,
+.ack-icon {
+  font-size: 24px;
+}
+
+.msg-label,
+.ack-label {
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.msg-status,
+.ack-status {
+  font-size: 11px;
+  color: var(--vp-c-text-2);
+}
+
+.storage-diagram {
+  margin-bottom: 20px;
+}
+
+.storage-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 24px;
+  margin-bottom: 16px;
+}
+
+.storage-option {
+  flex: 1;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 12px;
+  text-align: center;
+  transition: all 0.3s;
+}
+
+.storage-option.active {
+  border-color: var(--vp-c-brand);
+  background: rgba(59, 130, 246, 0.05);
+}
+
+.storage-option.recommended {
+  border-color: var(--vp-c-success);
+}
+
+.storage-option.recommended.active {
+  background: rgba(34, 197, 94, 0.05);
+}
+
+.option-icon {
+  font-size: 36px;
+  margin-bottom: 10px;
+}
+
+.option-label {
+  font-weight: 600;
+  font-size: 15px;
+  margin-bottom: 6px;
+}
+
+.option-desc {
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+  margin-bottom: 8px;
+}
+
+.option-risk {
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.vs-divider {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--vp-c-text-2);
+}
+
+.replication-info {
+  padding: 16px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.replication-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.replication-icon {
+  font-size: 20px;
+}
+
+.replication-detail {
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+}
+
+.consumer-flow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  margin-bottom: 20px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 8px;
+}
+
+.flow-step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 12px;
+  background: var(--vp-c-bg);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 12px;
+  min-width: 100px;
+  transition: all 0.3s;
+}
+
+.flow-step.active {
+  border-color: var(--vp-c-brand);
+  background: rgba(59, 130, 246, 0.05);
+}
+
+.step-num {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: var(--vp-c-brand);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 14px;
+}
+
+.step-title {
+  font-weight: 600;
+  font-size: 13px;
+}
+
+.step-desc {
+  font-size: 11px;
+  color: var(--vp-c-text-2);
+}
+
+.flow-arrow {
+  font-size: 24px;
+  color: var(--vp-c-divider);
+  transition: all 0.3s;
+}
+
+.flow-arrow.active {
+  color: var(--vp-c-brand);
+}
+
+.ack-comparison {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.ack-option {
+  padding: 16px;
+  background: var(--vp-c-bg-soft);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 8px;
+  text-align: center;
+}
+
+.ack-option.recommended {
+  border-color: var(--vp-c-success);
+  background: rgba(34, 197, 94, 0.05);
+}
+
+.ack-type {
+  font-weight: 600;
+  font-size: 15px;
+  margin-bottom: 8px;
+}
+
+.ack-desc {
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+  margin-bottom: 8px;
+}
+
+.ack-risk {
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.control-panel {
+  padding: 16px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 8px;
+}
+
+.control-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.control-item label {
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.action-btn {
+  padding: 10px 20px;
+  background: var(--vp-c-brand);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 13px;
+  transition: all 0.2s;
+}
+
+.action-btn:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.action-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-group {
+  display: flex;
+  gap: 8px;
+}
+
+.toggle-btn {
+  padding: 8px 16px;
+  background: var(--vp-c-bg);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 13px;
+  transition: all 0.2s;
+}
+
+.toggle-btn.active {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-brand);
+  color: white;
+}
+
+.info-text {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+  padding: 10px;
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+}
+
+.info-text.warning {
+  background: rgba(245, 158, 11, 0.1);
+  color: #f59e0b;
+}
+
+.info-icon {
+  font-size: 16px;
+}
+
+.summary-box {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  background: rgba(59, 130, 246, 0.1);
+  border: 1px solid rgba(59, 130, 246, 0.2);
+  border-radius: 8px;
+  font-size: 14px;
+  color: var(--vp-c-text-1);
+}
+
+.summary-icon {
+  font-size: 24px;
+}
+
+.summary-content {
+  flex: 1;
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/BigFrontendScopeDemo.vue b/docs/.vitepress/theme/components/appendix/web-basics/BigFrontendScopeDemo.vue
index 5713136..8efb42e 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/BigFrontendScopeDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/BigFrontendScopeDemo.vue
@@ -1,50 +1,51 @@
-<!--
-  BigFrontendScopeDemo.vue
-  前端 vs 大前端（跨端）范围演示
--->
 <template>
   <div class="bigfe-demo">
-    <div class="header">
-      <div class="title">前端 vs 大前端：到底“前端”都包含什么？</div>
-      <div class="subtitle">点一下不同“端”，立刻看到它跑在哪里、怎么发布</div>
+    <div class="demo-header">
+      <span class="icon">🌐</span>
+      <span class="title">前端 vs 大前端</span>
+      <span class="subtitle">了解不同平台的运行环境和技术栈</span>
     </div>
 
-    <div class="platforms">
-      <button
-        v-for="p in platforms"
-        :key="p.key"
-        class="platform"
-        :class="{ active: current === p.key }"
-        @click="current = p.key"
-      >
-        <span class="icon">{{ p.icon }}</span>
-        <span>{{ p.label }}</span>
-      </button>
-    </div>
+    <div class="demo-content">
+      <div class="platforms">
+        <button
+          v-for="p in platforms"
+          :key="p.key"
+          class="platform"
+          :class="{ active: current === p.key }"
+          @click="current = p.key"
+        >
+          <span class="icon">{{ p.icon }}</span>
+          <span>{{ p.label }}</span>
+        </button>
+      </div>
 
-    <div class="cards">
-      <div class="card">
-        <div class="label">运行环境</div>
-        <div class="value">{{ currentData.runtime }}</div>
+      <div class="cards">
+        <div class="card">
+          <div class="label">运行环境</div>
+          <div class="value">{{ currentData.runtime }}</div>
+        </div>
+        <div class="card">
+          <div class="label">主要技术</div>
+          <div class="value">{{ currentData.stack }}</div>
+        </div>
+        <div class="card">
+          <div class="label">发布方式</div>
+          <div class="value">{{ currentData.release }}</div>
+        </div>
       </div>
-      <div class="card">
-        <div class="label">主要技术</div>
-        <div class="value">{{ currentData.stack }}</div>
-      </div>
-      <div class="card">
-        <div class="label">发布方式</div>
-        <div class="value">{{ currentData.release }}</div>
+
+      <div class="skills">
+        <div class="skills-title">哪些能力是"共通的"？</div>
+        <div class="tags">
+          <span v-for="t in commonSkills.slice(0, 6)" :key="t" class="tag">{{ t }}</span>
+        </div>
       </div>
     </div>
 
-    <div class="skills">
-      <div class="skills-title">哪些能力是“共通的”？</div>
-      <div class="tags">
-        <span v-for="t in commonSkills" :key="t" class="tag">{{ t }}</span>
-      </div>
-      <div class="skills-note">
-        大前端的核心不是“会更多框架”，而是：<strong>用同一套工程能力，把体验交付到不同平台</strong>。
-      </div>
+    <div class="info-box">
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>大前端不是"会更多框架"，而是用同一套工程能力，把体验交付到不同平台。
     </div>
   </div>
 </template>
@@ -53,11 +54,11 @@
 import { ref, computed } from 'vue'
 
 const platforms = [
-  { key: 'web', label: 'Web 网站', icon: '🌐' },
-  { key: 'h5', label: 'H5 活动页', icon: '📱' },
+  { key: 'web', label: 'Web网站', icon: '🌐' },
+  { key: 'h5', label: 'H5活动页', icon: '📱' },
   { key: 'miniapp', label: '小程序', icon: '🧩' },
-  { key: 'native', label: 'App（原生）', icon: '📲' },
-  { key: 'cross', label: '跨端 App', icon: '🧱' },
+  { key: 'native', label: '原生App', icon: '📲' },
+  { key: 'cross', label: '跨端App', icon: '🧱' },
   { key: 'desktop', label: '桌面应用', icon: '🖥️' }
 ]
 
@@ -112,32 +113,45 @@ const commonSkills = [
 <style scoped>
 .bigfe-demo {
   border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
   background: var(--vp-c-bg-soft);
-  border-radius: 12px;
-  padding: 1.5rem;
-  margin: 1.5rem 0;
-  font-family: var(--vp-font-family-base);
+  padding: 1rem;
+  margin: 1rem 0;
+  max-height: 600px;
+  overflow-y: auto;
 }
 
-.header {
-  margin-bottom: 1rem;
+.demo-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
 }
 
-.title {
-  font-weight: 700;
-  font-size: 1.05rem;
+.demo-header .icon {
+  font-size: 1.25rem;
 }
 
-.subtitle {
+.demo-header .title {
+  font-weight: bold;
+  font-size: 1rem;
+}
+
+.demo-header .subtitle {
   color: var(--vp-c-text-2);
-  font-size: 0.9rem;
+  font-size: 0.85rem;
+  margin-left: 0.5rem;
+}
+
+.demo-content {
+  margin-bottom: 0.5rem;
 }
 
 .platforms {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
-  margin: 0.75rem 0 1rem;
+  margin-bottom: 1rem;
 }
 
 .platform {
@@ -150,22 +164,25 @@ const commonSkills = [
   display: inline-flex;
   align-items: center;
   gap: 0.35rem;
+  transition: all 0.2s;
+}
+
+.platform:hover {
+  background: var(--vp-c-bg-soft);
 }
 
 .platform.active {
-  border-color: #3b82f6;
-  color: #1d4ed8;
-  background: rgba(59, 130, 246, 0.12);
-}
-
-.icon {
-  font-size: 1rem;
+  border-color: var(--vp-c-brand);
+  color: var(--vp-c-brand);
+  background: var(--vp-c-brand-soft);
+  font-weight: 600;
 }
 
 .cards {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   gap: 0.75rem;
+  margin-bottom: 1rem;
 }
 
 .card {
@@ -185,17 +202,19 @@ const commonSkills = [
   font-size: 0.95rem;
   font-weight: 600;
   line-height: 1.35;
+  color: var(--vp-c-text-1);
 }
 
 .skills {
-  margin-top: 1rem;
   border-top: 1px dashed var(--vp-c-divider);
-  padding-top: 1rem;
+  padding-top: 0.75rem;
 }
 
 .skills-title {
   font-weight: 600;
   margin-bottom: 0.5rem;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-1);
 }
 
 .tags {
@@ -208,14 +227,26 @@ const commonSkills = [
   font-size: 0.8rem;
   padding: 0.2rem 0.55rem;
   border-radius: 999px;
-  background: rgba(34, 197, 94, 0.12);
-  color: #15803d;
-  border: 1px solid rgba(34, 197, 94, 0.2);
+  background: var(--vp-c-bg-alt);
+  color: var(--vp-c-text-1);
+  border: 1px solid var(--vp-c-divider);
 }
 
-.skills-note {
-  margin-top: 0.75rem;
+.info-box {
+  background: var(--vp-c-bg-alt);
+  padding: 0.75rem;
+  border-radius: 6px;
   font-size: 0.85rem;
   color: var(--vp-c-text-2);
+  display: flex;
+  gap: 0.25rem;
+}
+
+.info-box .icon {
+  flex-shrink: 0;
+}
+
+.info-box strong {
+  color: var(--vp-c-text-1);
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/CssBoxModel.vue b/docs/.vitepress/theme/components/appendix/web-basics/CssBoxModel.vue
index 48f869d..b60e8c6 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/CssBoxModel.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/CssBoxModel.vue
@@ -4,6 +4,12 @@
 -->
 <template>
   <div class="box-demo">
+    <div class="demo-header">
+      <span class="icon">📦</span>
+      <span class="title">CSS 盒模型</span>
+      <span class="subtitle">理解元素尺寸的构成（通俗说：盒子的四层包装）</span>
+    </div>
+
     <div class="controls">
       <div class="control-item">
         <div class="control-header">
@@ -67,6 +73,11 @@
       </div>
     </div>
 
+    <div class="info-box">
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>每个元素都是一个"盒子"，从内到外依次是：内容区 → 内边距 → 边框 → 外边距。
+    </div>
+
     <div class="code-block">
       <div class="code-title">CSS 代码片段</div>
       <div class="code-content">
@@ -99,13 +110,37 @@ const total = computed(
 <style scoped>
 .box-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 12px;
+  border-radius: 8px;
   background: var(--vp-c-bg-soft);
-  padding: 24px;
-  margin: 24px 0;
+  padding: 1rem;
+  margin: 1rem 0;
+  max-height: 600px;
+  overflow-y: auto;
   display: flex;
   flex-direction: column;
-  gap: 24px;
+  gap: 1rem;
+}
+
+.demo-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.demo-header .icon {
+  font-size: 1.25rem;
+}
+
+.demo-header .title {
+  font-weight: bold;
+  font-size: 1rem;
+}
+
+.demo-header .subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.85rem;
+  margin-left: 0.5rem;
 }
 
 .controls {
@@ -310,4 +345,22 @@ input[type='range'] {
 .line {
   white-space: pre;
 }
+
+.info-box {
+  background: var(--vp-c-bg-alt);
+  padding: 0.75rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  display: flex;
+  gap: 0.25rem;
+}
+
+.info-box .icon {
+  flex-shrink: 0;
+}
+
+.info-box strong {
+  color: var(--vp-c-text-1);
+}
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/CssFlexbox.vue b/docs/.vitepress/theme/components/appendix/web-basics/CssFlexbox.vue
index d6a98b1..6f3ea77 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/CssFlexbox.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/CssFlexbox.vue
@@ -1,73 +1,86 @@
 <!--
   CssFlexbox.vue
-  Flex 速学：三个按钮控制方向/对齐/换行，实时看盒子怎么排。
+  Flex 布局速学：三个按钮控制方向/对齐/换行，实时看盒子怎么排
 -->
 <template>
   <div class="flex-demo">
-    <div class="controls">
-      <div class="control-item">
-        <div class="control-header">
-          <label>主轴方向 (flex-direction)</label>
+    <div class="demo-header">
+      <span class="icon">📐</span>
+      <span class="title">Flex 布局</span>
+      <span class="subtitle">一行代码搞定排列对齐（通俗说：自动排版）</span>
+    </div>
+
+    <div class="demo-content">
+      <div class="controls">
+        <div class="control-item">
+          <div class="control-header">
+            <label>主轴方向 (flex-direction)</label>
+          </div>
+          <div class="chips">
+            <button
+              v-for="d in directions"
+              :key="d.id"
+              :class="['chip', { active: dir === d.id }]"
+              @click="dir = d.id"
+            >
+              {{ d.label }}
+            </button>
+          </div>
         </div>
-        <div class="chips">
-          <button
-            v-for="d in directions"
-            :key="d.id"
-            :class="['chip', { active: dir === d.id }]"
-            @click="dir = d.id"
-          >
-            {{ d.label }}
-          </button>
+        <div class="control-item">
+          <div class="control-header">
+            <label>主轴对齐 (justify-content)</label>
+          </div>
+          <div class="chips">
+            <button
+              v-for="j in justifies"
+              :key="j.id"
+              :class="['chip', { active: justify === j.id }]"
+              @click="justify = j.id"
+            >
+              {{ j.label }}
+            </button>
+          </div>
+        </div>
+        <div class="control-item">
+          <div class="control-header">
+            <label>是否换行 (flex-wrap)</label>
+          </div>
+          <div class="chips">
+            <button
+              v-for="w in wraps"
+              :key="w.id"
+              :class="['chip', { active: wrap === w.id }]"
+              @click="wrap = w.id"
+            >
+              {{ w.label }}
+            </button>
+          </div>
         </div>
       </div>
-      <div class="control-item">
-        <div class="control-header">
-          <label>主轴对齐 (justify-content)</label>
-        </div>
-        <div class="chips">
-          <button
-            v-for="j in justifies"
-            :key="j.id"
-            :class="['chip', { active: justify === j.id }]"
-            @click="justify = j.id"
-          >
-            {{ j.label }}
-          </button>
+
+      <div class="canvas-container">
+        <div class="canvas" :style="boxStyle">
+          <div v-for="n in 6" :key="n" class="item">{{ n }}</div>
         </div>
       </div>
-      <div class="control-item">
-        <div class="control-header">
-          <label>是否换行 (flex-wrap)</label>
-        </div>
-        <div class="chips">
-          <button
-            v-for="w in wraps"
-            :key="w.id"
-            :class="['chip', { active: wrap === w.id }]"
-            @click="wrap = w.id"
-          >
-            {{ w.label }}
-          </button>
+
+      <div class="code-block">
+        <div class="code-title">CSS 代码片段</div>
+        <div class="code-content">
+          <div class="line">.container {</div>
+          <div class="line">display: flex;</div>
+          <div class="line">flex-direction: {{ dir }};</div>
+          <div class="line">justify-content: {{ justify }};</div>
+          <div class="line">flex-wrap: {{ wrap }};</div>
+          <div class="line">}</div>
         </div>
       </div>
     </div>
 
-    <div class="canvas-container">
-      <div class="canvas" :style="boxStyle">
-        <div v-for="n in 8" :key="n" class="item">{{ n }}</div>
-      </div>
-    </div>
-
-    <div class="code-block">
-      <div class="code-title">CSS 代码片段</div>
-      <div class="code-content">
-        <div class="line">.container {</div>
-        <div class="line">display: flex;</div>
-        <div class="line">flex-direction: {{ dir }};</div>
-        <div class="line">justify-content: {{ justify }};</div>
-        <div class="line">flex-wrap: {{ wrap }};</div>
-        <div class="line">}</div>
-      </div>
+    <div class="info-box">
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>Flex 让元素自动排列，不用手动计算位置。就像书架上的书，会自动对齐。
     </div>
   </div>
 </template>
@@ -99,7 +112,7 @@ const boxStyle = computed(() => ({
   justifyContent: justify.value,
   flexWrap: wrap.value,
   gap: '12px',
-  minHeight: '200px',
+  minHeight: '180px',
   padding: '16px'
 }))
 </script>
@@ -107,50 +120,76 @@ const boxStyle = computed(() => ({
 <style scoped>
 .flex-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 12px;
+  border-radius: 8px;
   background: var(--vp-c-bg-soft);
-  padding: 24px;
-  margin: 24px 0;
+  padding: 1rem;
+  margin: 1rem 0;
+  max-height: 600px;
+  overflow-y: auto;
+}
+
+.demo-header {
   display: flex;
-  flex-direction: column;
-  gap: 24px;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.demo-header .icon {
+  font-size: 1.25rem;
+}
+
+.demo-header .title {
+  font-weight: bold;
+  font-size: 1rem;
+}
+
+.demo-header .subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.85rem;
+  margin-left: 0.5rem;
+}
+
+.demo-content {
+  margin-bottom: 0.5rem;
 }
 
 .controls {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-  gap: 16px;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 0.75rem;
+  margin-bottom: 1rem;
 }
 
 .control-item {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
-  padding: 16px;
+  padding: 0.75rem;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 0.5rem;
 }
 
 .control-header label {
-  font-weight: 700;
+  font-weight: 600;
   color: var(--vp-c-text-1);
-  font-size: 13px;
+  font-size: 0.8rem;
 }
 
 .chips {
   display: flex;
-  gap: 8px;
+  gap: 0.5rem;
   flex-wrap: wrap;
 }
 
 .chip {
-  padding: 6px 12px;
+  padding: 0.25rem 0.75rem;
   border-radius: 6px;
   border: 1px solid var(--vp-c-divider);
   background: var(--vp-c-bg-alt);
   cursor: pointer;
-  font-size: 13px;
+  font-size: 0.8rem;
   transition: all 0.2s;
 }
 
@@ -161,77 +200,60 @@ const boxStyle = computed(() => ({
 .chip.active {
   border-color: var(--vp-c-brand);
   color: var(--vp-c-brand);
-  background: var(--vp-c-brand-dimm);
+  background: var(--vp-c-brand-soft);
   font-weight: 600;
 }
 
 .canvas-container {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 12px;
-  padding: 4px; /* Tiny padding for the inner canvas */
+  border-radius: 8px;
+  padding: 0.25rem;
+  margin-bottom: 1rem;
 }
 
 .canvas {
   background: var(--vp-c-bg);
-  border-radius: 8px;
-  /* border: 1px dashed var(--vp-c-divider); */
+  border-radius: 6px;
   background-image: radial-gradient(var(--vp-c-divider) 1px, transparent 1px);
   background-size: 20px 20px;
 }
 
 .item {
-  width: 60px;
-  height: 60px;
-  border-radius: 8px;
-  background: linear-gradient(135deg, #0ea5e9, #10b981);
+  width: 50px;
+  height: 50px;
+  border-radius: 6px;
+  background: var(--vp-c-brand);
   color: #fff;
-  font-weight: 800;
+  font-weight: 700;
   display: grid;
   place-items: center;
-  font-size: 18px;
-  box-shadow:
-    0 4px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  font-size: 16px;
+  transition: all 0.3s;
   flex-shrink: 0;
 }
 
-.val {
-  font-family: var(--vp-font-family-mono);
-  color: var(--vp-c-brand);
-  font-weight: 600;
-  font-size: 13px;
-}
-
-input[type='range'] {
-  width: 100%;
-  accent-color: var(--vp-c-brand);
-  cursor: pointer;
-  margin-top: 8px;
-}
-
 .code-block {
   background: var(--vp-c-bg-alt);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 10px;
-  padding: 16px;
+  border-radius: 8px;
+  padding: 0.75rem;
 }
 
 .code-title {
-  font-weight: 700;
-  margin-bottom: 8px;
-  font-size: 13px;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  font-size: 0.8rem;
   color: var(--vp-c-text-2);
 }
 
 .code-content {
-  background: #0b1221;
-  color: #e5e7eb;
-  border-radius: 8px;
-  padding: 16px;
+  background: var(--vp-c-bg);
+  color: var(--vp-c-text-1);
+  border-radius: 6px;
+  padding: 0.75rem;
   font-family: var(--vp-font-family-mono);
-  font-size: 13px;
+  font-size: 0.75rem;
   overflow-x: auto;
   line-height: 1.6;
 }
@@ -239,4 +261,22 @@ input[type='range'] {
 .line {
   white-space: pre;
 }
+
+.info-box {
+  background: var(--vp-c-bg-alt);
+  padding: 0.75rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  display: flex;
+  gap: 0.25rem;
+}
+
+.info-box .icon {
+  flex-shrink: 0;
+}
+
+.info-box strong {
+  color: var(--vp-c-text-1);
+}
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/DomManipulator.vue b/docs/.vitepress/theme/components/appendix/web-basics/DomManipulator.vue
index 7689e18..c35f82a 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/DomManipulator.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/DomManipulator.vue
@@ -1,35 +1,45 @@
 <!--
   DomManipulator.vue
-  DOM 速体验：输入标题+切换高亮类，直观看到文本和样式变化。
+  DOM 操作速体验：输入标题+切换高亮类，直观看到文本和样式变化
 -->
 <template>
   <div class="dom-demo">
-    <div class="controls">
-      <div class="field">
-        <label>改个标题</label>
-        <input v-model="title" placeholder="输入新标题" />
-      </div>
-      <div class="field checkbox">
-        <label
-          ><input type="checkbox" v-model="highlight" /> 高亮模式
-          (class="highlight")</label
-        >
-      </div>
+    <div class="demo-header">
+      <span class="icon">🎯</span>
+      <span class="title">DOM 操作</span>
+      <span class="subtitle">网页内容的动态修改（通俗说：用代码改页面）</span>
     </div>
 
-    <div class="card" :class="{ highlight }">
-      <h2 id="hero">{{ title }}</h2>
-      <p id="desc">这里是段落说明，勾选高亮看看变化。</p>
-      <button @click="toggleText">{{ buttonText }}</button>
-    </div>
+    <div class="demo-content">
+      <div class="controls">
+        <div class="field">
+          <label>改个标题</label>
+          <input v-model="title" placeholder="输入新标题" />
+        </div>
+        <div class="field checkbox">
+          <label><input type="checkbox" v-model="highlight" /> 高亮模式 (class="highlight")</label>
+        </div>
+      </div>
 
-    <pre class="code"><code>// JS 改内容
+      <div class="card" :class="{ highlight }">
+        <h2 id="hero">{{ title }}</h2>
+        <p id="desc">这里是段落说明，勾选高亮看看变化。</p>
+        <button @click="toggleText">{{ buttonText }}</button>
+      </div>
+
+      <pre class="code"><code>// JS 改内容
 const titleEl = document.getElementById('hero')
 titleEl.textContent = '{{ title }}'
 
 // JS 切 class
 const card = document.querySelector('.card')
 card.classList.toggle('highlight', {{ highlight }})</code></pre>
+    </div>
+
+    <div class="info-box">
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>DOM 是网页的"乐高积木"，JavaScript 可以随时添加、删除、修改这些积木。
+    </div>
   </div>
 </template>
 
@@ -48,73 +58,154 @@ const toggleText = () => {
 <style scoped>
 .dom-demo {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 12px;
+  border-radius: 8px;
   background: var(--vp-c-bg-soft);
-  padding: 16px;
-  margin: 20px 0;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
+  padding: 1rem;
+  margin: 1rem 0;
+  max-height: 600px;
+  overflow-y: auto;
 }
+
+.demo-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.demo-header .icon {
+  font-size: 1.25rem;
+}
+
+.demo-header .title {
+  font-weight: bold;
+  font-size: 1rem;
+}
+
+.demo-header .subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.85rem;
+  margin-left: 0.5rem;
+}
+
+.demo-content {
+  margin-bottom: 0.5rem;
+}
+
 .controls {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: 10px;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 0.5rem;
+  margin-bottom: 1rem;
 }
+
 .field {
   background: var(--vp-c-bg);
   border: 1px solid var(--vp-c-divider);
-  border-radius: 10px;
-  padding: 10px;
+  border-radius: 8px;
+  padding: 0.75rem;
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 0.5rem;
 }
+
+.field label {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
 .checkbox {
   flex-direction: row;
   align-items: center;
-  gap: 8px;
+  gap: 0.5rem;
 }
-input[type='text'],
+
+input[type='text'] {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+  background: var(--vp-c-bg);
+  color: var(--vp-c-text-1);
+}
+
+input[type='text']:focus {
+  outline: none;
+  border-color: var(--vp-c-brand);
+}
+
 input[type='checkbox'] {
   accent-color: var(--vp-c-brand);
 }
 
 .card {
   border: 1px solid var(--vp-c-divider);
-  border-radius: 12px;
-  padding: 16px;
+  border-radius: 8px;
+  padding: 1rem;
   background: var(--vp-c-bg);
   transition: all 0.2s;
+  margin-bottom: 1rem;
 }
+
 .card.highlight {
-  border-color: #f59e0b;
-  box-shadow: 0 8px 18px rgba(245, 158, 11, 0.2);
-  background: #fff7ed;
+  border-color: var(--vp-c-warning);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  background: var(--vp-c-bg-soft);
 }
+
 .card h2 {
-  margin: 0 0 8px 0;
+  margin: 0 0 0.5rem 0;
+  color: var(--vp-c-text-1);
 }
+
 .card p {
-  margin: 0 0 12px 0;
+  margin: 0 0 0.75rem 0;
   color: var(--vp-c-text-2);
+  font-size: 0.9rem;
 }
+
 .card button {
   background: var(--vp-c-brand);
-  color: #fff;
+  color: white;
   border: none;
-  border-radius: 8px;
-  padding: 8px 12px;
+  border-radius: 6px;
+  padding: 0.5rem 1rem;
   cursor: pointer;
+  font-size: 0.85rem;
+  transition: opacity 0.2s;
+}
+
+.card button:hover {
+  opacity: 0.9;
 }
 
 .code {
-  background: #0b1221;
-  color: #e5e7eb;
-  border-radius: 10px;
-  padding: 12px;
+  background: var(--vp-c-bg-alt);
+  color: var(--vp-c-text-1);
+  border-radius: 8px;
+  padding: 0.75rem;
   font-family: var(--vp-font-family-mono);
-  font-size: 13px;
+  font-size: 0.75rem;
   overflow-x: auto;
+  line-height: 1.6;
+}
+
+.info-box {
+  background: var(--vp-c-bg-alt);
+  padding: 0.75rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  display: flex;
+  gap: 0.25rem;
+}
+
+.info-box .icon {
+  flex-shrink: 0;
+}
+
+.info-box strong {
+  color: var(--vp-c-text-1);
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/ImperativeVsDeclarativeDemo.vue b/docs/.vitepress/theme/components/appendix/web-basics/ImperativeVsDeclarativeDemo.vue
index 735935f..1913033 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/ImperativeVsDeclarativeDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/ImperativeVsDeclarativeDemo.vue
@@ -1,70 +1,83 @@
 <template>
   <div class="imperative-declarative-demo">
-    <div class="demo-grid">
-      <!-- Imperative (jQuery Style) -->
-      <div class="panel imperative">
-        <div class="panel-header">
-          <span class="badge yellow">Imperative (命令式)</span>
-          <span class="sub-text">jQuery Style</span>
-        </div>
-        <div class="code-preview">
-          <code>
-            // 手动操作 DOM<br />
-            $('#count').text(val);<br />
-            if (val > 5) $('#msg').show();
-          </code>
-        </div>
-        <div class="interactive-area">
-          <div class="output-box">
-            Count: <span id="imp-count-display">{{ impCount }}</span>
-            <div v-show="impShowMsg" class="warning-msg">⚠️ Count is high!</div>
-          </div>
-          <div class="actions">
-            <button @click="impIncrement" class="btn">Step 1: Value++</button>
-            <button @click="impUpdateText" class="btn" :disabled="!impChanged">
-              Step 2: Update Text
-            </button>
-            <button
-              @click="impCheckState"
-              class="btn"
-              :disabled="!impTextUpdated"
-            >
-              Step 3: Check Logic
-            </button>
-          </div>
-          <div class="status-log">{{ impStatus }}</div>
-        </div>
-      </div>
+    <div class="demo-header">
+      <span class="icon">🔄</span>
+      <span class="title">命令式 vs 声明式</span>
+      <span class="subtitle">两种编程思维的对比（通俗说：手动操作 vs 自动响应）</span>
+    </div>
 
-      <!-- Declarative (Vue Style) -->
-      <div class="panel declarative">
-        <div class="panel-header">
-          <span class="badge green">Declarative (声明式)</span>
-          <span class="sub-text">Vue/React Style</span>
-        </div>
-        <div class="code-preview">
-          <code>
-            // 只需要绑定数据<br />
-            {{ '{' + '{ count }' + '}' }}<br />
-            &lt;div v-if="count > 5"&gt;...&lt;/div&gt;
-          </code>
-        </div>
-        <div class="interactive-area">
-          <div class="output-box">
-            Count: <span>{{ decCount }}</span>
-            <div v-if="decCount > 5" class="warning-msg">⚠️ Count is high!</div>
+    <div class="demo-content">
+      <div class="demo-grid">
+        <!-- Imperative (jQuery Style) -->
+        <div class="panel imperative">
+          <div class="panel-header">
+            <span class="badge yellow">命令式 (Imperative)</span>
+            <span class="sub-text">jQuery Style - 手动操作</span>
           </div>
-          <div class="actions">
-            <button @click="decIncrement" class="btn primary">
-              Value++ (Auto Render)
-            </button>
+          <div class="code-preview">
+            <code>
+              // 手动操作 DOM<br />
+              $('#count').text(val);<br />
+              if (val > 5) $('#msg').show();
+            </code>
           </div>
-          <div class="status-log">
-            Framework handles DOM updates automatically.
+          <div class="interactive-area">
+            <div class="output-box">
+              Count: <span id="imp-count-display">{{ impCount }}</span>
+              <div v-show="impShowMsg" class="warning-msg">⚠️ Count is high!</div>
+            </div>
+            <div class="actions">
+              <button @click="impIncrement" class="btn">Step 1: Value++</button>
+              <button @click="impUpdateText" class="btn" :disabled="!impChanged">
+                Step 2: Update Text
+              </button>
+              <button
+                @click="impCheckState"
+                class="btn"
+                :disabled="!impTextUpdated"
+              >
+                Step 3: Check Logic
+              </button>
+            </div>
+            <div class="status-log">{{ impStatus }}</div>
+          </div>
+        </div>
+
+        <!-- Declarative (Vue Style) -->
+        <div class="panel declarative">
+          <div class="panel-header">
+            <span class="badge green">声明式 (Declarative)</span>
+            <span class="sub-text">Vue/React Style - 自动响应</span>
+          </div>
+          <div class="code-preview">
+            <code v-pre>
+              // 只需要绑定数据
+              {{ count }}
+              &lt;div v-if="count > 5"&gt;...&lt;/div&gt;
+            </code>
+          </div>
+          <div class="interactive-area">
+            <div class="output-box">
+              Count: <span>{{ decCount }}</span>
+              <div v-if="decCount > 5" class="warning-msg">⚠️ Count is high!</div>
+            </div>
+            <div class="actions">
+              <button @click="decIncrement" class="btn primary">
+                Value++ (Auto Render)
+              </button>
+            </div>
+            <div class="status-log">
+              Framework handles DOM updates automatically.
+            </div>
           </div>
         </div>
       </div>
     </div>
+
+    <div class="info-box">
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>命令式像"手把手教电脑怎么做"，声明式像"告诉电脑要什么，它自己搞定"。
+    </div>
   </div>
 </template>
 
@@ -119,12 +132,40 @@ const decIncrement = () => {
   background: var(--vp-c-bg-soft);
   padding: 1rem;
   margin: 1rem 0;
+  max-height: 600px;
+  overflow-y: auto;
+}
+
+.demo-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.demo-header .icon {
+  font-size: 1.25rem;
+}
+
+.demo-header .title {
+  font-weight: bold;
+  font-size: 1rem;
+}
+
+.demo-header .subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.85rem;
+  margin-left: 0.5rem;
+}
+
+.demo-content {
+  margin-bottom: 0.5rem;
 }
 
 .demo-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 1.5rem;
+  gap: 1rem;
 }
 
 @media (max-width: 640px) {
@@ -143,7 +184,7 @@ const decIncrement = () => {
 }
 
 .panel-header {
-  padding: 0.8rem;
+  padding: 0.75rem;
   border-bottom: 1px solid var(--vp-c-divider);
   display: flex;
   justify-content: space-between;
@@ -152,48 +193,51 @@ const decIncrement = () => {
 }
 
 .badge {
-  font-size: 0.8rem;
+  font-size: 0.75rem;
   font-weight: bold;
-  padding: 2px 6px;
+  padding: 2px 8px;
   border-radius: 4px;
   color: white;
 }
+
 .badge.yellow {
-  background: #f59e0b;
+  background: var(--vp-c-warning);
 }
+
 .badge.green {
-  background: #10b981;
+  background: var(--vp-c-success);
 }
 
 .sub-text {
-  font-size: 0.8rem;
+  font-size: 0.75rem;
   color: var(--vp-c-text-2);
 }
 
 .code-preview {
-  background: #1e1e2e;
-  padding: 0.8rem;
+  background: var(--vp-c-bg-alt);
+  padding: 0.75rem;
   font-family: monospace;
-  font-size: 0.8rem;
-  color: #a6accd;
-  height: 80px;
+  font-size: 0.75rem;
+  color: var(--vp-c-text-1);
+  height: 70px;
+  overflow: hidden;
 }
 
 .interactive-area {
-  padding: 1rem;
+  padding: 0.75rem;
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 0.75rem;
 }
 
 .output-box {
   background: var(--vp-c-bg-soft);
-  padding: 1rem;
+  padding: 0.75rem;
   border-radius: 6px;
   text-align: center;
   font-weight: bold;
-  min-height: 80px;
+  min-height: 70px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -201,10 +245,9 @@ const decIncrement = () => {
 }
 
 .warning-msg {
-  color: #ef4444;
+  color: var(--vp-c-danger);
   margin-top: 0.5rem;
-  font-size: 0.9rem;
-  animation: popIn 0.3s;
+  font-size: 0.85rem;
 }
 
 .actions {
@@ -217,42 +260,53 @@ const decIncrement = () => {
   padding: 0.5rem;
   border: 1px solid var(--vp-c-divider);
   border-radius: 4px;
-  background: white;
+  background: var(--vp-c-bg);
   cursor: pointer;
-  font-size: 0.8rem;
+  font-size: 0.75rem;
   transition: all 0.2s;
 }
+
 .btn:hover:not(:disabled) {
-  background: #f3f4f6;
+  background: var(--vp-c-bg-soft);
 }
+
 .btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
+
 .btn.primary {
-  background: #3b82f6;
+  background: var(--vp-c-brand);
   color: white;
   border: none;
 }
+
 .btn.primary:hover {
-  background: #2563eb;
+  opacity: 0.9;
 }
 
 .status-log {
-  font-size: 0.75rem;
-  color: var(--vp-c-text-3);
+  font-size: 0.7rem;
+  color: var(--vp-c-text-2);
   font-style: italic;
   min-height: 1.2em;
 }
 
-@keyframes popIn {
-  0% {
-    transform: scale(0.8);
-    opacity: 0;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
+.info-box {
+  background: var(--vp-c-bg-alt);
+  padding: 0.75rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  display: flex;
+  gap: 0.25rem;
+}
+
+.info-box .icon {
+  flex-shrink: 0;
+}
+
+.info-box strong {
+  color: var(--vp-c-text-1);
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/web-basics/WebTechTriad.vue b/docs/.vitepress/theme/components/appendix/web-basics/WebTechTriad.vue
index 28e25eb..df1faa7 100644
--- a/docs/.vitepress/theme/components/appendix/web-basics/WebTechTriad.vue
+++ b/docs/.vitepress/theme/components/appendix/web-basics/WebTechTriad.vue
@@ -303,6 +303,8 @@ const handleBtnClick = () => {
   display: flex;
   flex-direction: column;
   gap: 12px;
+  max-height: 600px;
+  overflow-y: auto;
 }
 
 /* New Config Panel Styles */
diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
index bfc4c03..891edd2 100644
--- a/docs/.vitepress/theme/index.js
+++ b/docs/.vitepress/theme/index.js
@@ -222,6 +222,7 @@ import MessageQueueComponentsDemo from './components/appendix/queue-design/Messa
 import PointToPointVsPubSubDemo from './components/appendix/queue-design/PointToPointVsPubSubDemo.vue'
 import MessageQueueComparisonDemo from './components/appendix/queue-design/MessageQueueComparisonDemo.vue'
 import CouplingDemo from './components/appendix/queue-design/CouplingDemo.vue'
+import DecouplingDemo from './components/appendix/queue-design/DecouplingDemo.vue'
 import PubSubDemo from './components/appendix/queue-design/PubSubDemo.vue'
 import DeadLetterQueueDemo from './components/appendix/queue-design/DeadLetterQueueDemo.vue'
 import DelayedMessageDemo from './components/appendix/queue-design/DelayedMessageDemo.vue'
@@ -693,6 +694,7 @@ export default {
     app.component('PointToPointVsPubSubDemo', PointToPointVsPubSubDemo)
     app.component('MessageQueueComparisonDemo', MessageQueueComparisonDemo)
     app.component('CouplingDemo', CouplingDemo)
+    app.component('DecouplingDemo', DecouplingDemo)
     app.component('PubSubDemo', PubSubDemo)
     app.component('DeadLetterQueueDemo', DeadLetterQueueDemo)
     app.component('DelayedMessageDemo', DelayedMessageDemo)
diff --git a/docs/zh-cn/appendix/api-design.md b/docs/zh-cn/appendix/api-design.md
index 94b3b17..569a60a 100644
--- a/docs/zh-cn/appendix/api-design.md
+++ b/docs/zh-cn/appendix/api-design.md
@@ -1,117 +1,170 @@
-# 后端接口设计与错误处理：请求、响应与状态码结构
+# API 设计与错误处理:请求、响应与状态码结构
 
-> 💡 **学习指南**：接口设计解决的是"客户端和服务端如何对话"，错误处理解决的是"出问题时怎么优雅地告诉用户"。本章节会围绕一个问题展开：**如何设计一套让前后端都舒服的 API 规范？**
-
-在开始之前，建议你先补两块"基础砖"：
-
-- **HTTP 是什么**：可以先阅读 [Web 基础](./web-basics/http.md) 的「请求-响应模型」部分。
-- **REST 是什么**：如果你还不熟悉 RESTful 架构风格，可以先了解 [REST API 设计原则](https://restfulapi.net/)。
+::: tip 🎯 核心问题
+**前后端如何高效对话?** 这就像问:餐厅的菜单怎么设计,客人一看就懂?服务员怎么记单,不会出错?上菜怎么规范,客人满意?API 设计解决的就是"对话规则"的问题。
+:::
 
 ---
 
-## 0. 引言：为什么好接口像好餐厅的点餐系统？
+## 1. 为什么要"API 设计"?
+
+### 1.1 从混乱到规范
+
+想象一下你走进一家餐厅:
+
+- **菜单(API 文档)**:清楚标注了每道菜的口味、配料、价格
+- **服务员(HTTP 协议)**:用标准化的方式记录你的点餐
+- **后厨(服务端)**:按约定流程烹饪
+- **上菜(响应)**:盘子摆盘规范,附带小票说明
+
+**好的 API 设计就像这套点餐系统**——双方约定好"说什么话"、"怎么说话"、"出错怎么办",才能高效协作。
+
+但很多团队的真实情况是:
+
+- 接口命名随心所欲:`/getUserData`、`/fetchUserInfo`、`/queryUserById` 并存
+- 错误处理五花八门:有的返回 HTTP 状态码,有的返回 `code: 500`,有的直接抛异常
+- 响应结构千人千面:同一个项目里,有的用 `data`,有的用 `result`,有的用 `content`
 
 <RestfulDesignDemo />
 
-想象一下你走进一家餐厅：
+**结果就是**:前后端互相猜,联调痛苦,维护成本高,新人入职一脸懵。
 
-- 菜单（API 文档）清楚标注了每道菜的口味、配料、价格
-- 服务员（HTTP 协议）用标准化的方式记录你的点餐
-- 后厨（服务端）按约定流程烹饪
-- 上菜时（响应）盘子摆盘规范，附带小票说明
+::: tip 💡 通俗解释
+**API**(Application Programming Interface,应用程序编程接口)就像"餐厅的服务协议":
 
-**好的 API 设计就像这套点餐系统**——双方约定好"说什么话"、"怎么说话"、"出错怎么办"，才能高效协作。
+- **RESTful** = 餐厅点餐:有菜单、有流程、有规范
+- **GraphQL** = 自助餐:想要什么,自己组合
+- **gRPC** = 快递:二进制格式,速度最快
 
-但很多团队的真实情况是：
+**为什么需要设计?**
 
-- 接口命名随心所欲：`/getUserData`、`/fetchUserInfo`、`/queryUserById` 并存
-- 错误处理五花八门：有的返回 HTTP 状态码，有的返回 `code: 500`，有的直接抛异常
-- 响应结构千人千面：同一个项目里，有的用 `data`，有的用 `result`，有的用 `content`
-
-**结果就是**：前后端互相猜，联调痛苦，维护成本高，新人入职一脸懵。
-
-本章节会带你从最基础的 RESTful 设计开始，一步步掌握一套**可落地、可维护、可扩展**的 API 设计规范。
+- 没有设计 = 服务员随机记单 → 后厨看不懂、客人等半天
+- 有设计 = 标准化流程 → 效率高、错误少
+  :::
 
 ---
 
-## 1. RESTful 设计：让你的 URL 会说话
+## 2. RESTful 设计:让你的 URL 会说话
 
-### 1.1 什么是 RESTful？
+### 2.1 什么是 RESTful?
 
-REST（Representational State Transfer，表述性状态传递）是一种软件架构风格，由 Roy Fielding 在 2000 年提出。
+**REST**(Representational State Transfer,表述性状态传递)是一种软件架构风格,由 Roy Fielding 在 2000 年提出。
 
-**核心思想**：把网络上的所有事物都抽象为"资源"（Resource），用 URL 标识资源，用 HTTP 方法操作资源。
+**核心思想**:把网络上的所有事物都抽象为"资源"(Resource),用 URL 标识资源,用 HTTP 方法操作资源。
 
-<ResourceAnalogy />
+<ResourceAnalogyDemo />
 
-> 想象 URL 是一个仓库的货架地址：
-> - `/warehouse/products` 是"产品区"
-> - `/warehouse/products/123` 是"编号 123 的产品"
-> - HTTP 方法就是你允许的操作：GET（查看）、POST（入库）、PUT（更新）、DELETE（出库）
+::: tip 💡 资源是什么?
+**资源**(Resource)是 REST 架构的核心概念:
 
-### 1.2 URL 设计的 7 个黄金法则
+- 有唯一标识(URL)
+- 有表达方式(JSON/XML/HTML)
+- 有操作方法(GET/POST/PUT/DELETE)
+
+**比喻**:
+
+- URL 是"仓库的货架地址":`/warehouse/products` 是"产品区"
+- HTTP 方法是"允许的操作":GET(查看)、POST(入库)、PUT(更新)、DELETE(出库)
+
+**关键点**:
+
+- URL 是名词,不是动词:`/users` 而不是 `/getUsers`
+- HTTP 方法已经表达了操作,不需要在 URL 里重复
+  :::
+
+### 2.2 URL 设计的 7 个黄金法则
 
 <HttpMethodsDemo />
 
-| 法则 | 正确示例 | 错误示例 | 原因 |
-|------|---------|---------|------|
-| **1. 用名词，不用动词** | `GET /users` | `GET /getUsers` | URL 是资源地址，不是操作 |
-| **2. 用复数** | `GET /orders` | `GET /order` | 一致性好，表示集合 |
-| **3. 小写字母** | `/user-profiles` | `/UserProfiles` | URL 大小写敏感，统一小写避免混乱 |
-| **4. 用连字符分隔** | `/user-profiles` | `/user_profiles` | 连字符是 URL 规范，下划线在某些场景会转义 |
-| **5. 避免层级过深** | `/users/123/orders` | `/users/123/orders/456/items/789/status` | 超过 3 层考虑用查询参数或重构 |
-| **6. 用查询参数过滤** | `GET /products?category=phone&price_max=5000` | `GET /products/category/phone/price/5000` | 过滤条件多且变，不适合放路径 |
-| **7. 版本号放 URL** | `/v1/users` 或 `v1.users.api.com` | 混用新旧接口无版本 | 便于灰度发布和向后兼容 |
+| 法则                   | 正确示例                                      | 错误示例                                  | 原因                                     |
+| ---------------------- | --------------------------------------------- | ----------------------------------------- | ---------------------------------------- |
+| **1. 用名词,不用动词** | `GET /users`                                  | `GET /getUsers`                           | URL 是资源地址,不是操作                  |
+| **2. 用复数**          | `GET /orders`                                 | `GET /order`                              | 一致性好,表示集合                        |
+| **3. 小写字母**        | `/user-profiles`                              | `/UserProfiles`                           | URL 大小写敏感,统一小写避免混乱          |
+| **4. 用连字符**        | `/user-profiles`                              | `/user_profiles`                          | 连字符是 URL 规范,下划线在某些场景会转义 |
+| **5. 避免层级过深**    | `/users/123/orders`                           | `/users/123/orders/456/items/789/status`  | 超过 3 层考虑用查询参数或重构            |
+| **6. 用查询参数过滤**  | `GET /products?category=phone&price_max=5000` | `GET /products/category/phone/price/5000` | 过滤条件多且变动,不适合放路径            |
+| **7. 版本号放 URL**    | `/v1/users` 或 `v1.users.api.com`             | 混用新旧接口无版本                        | 便于灰度发布和向后兼容                   |
 
-### 1.3 HTTP 方法的选择
+::: tip 📊 从表格中你能看到什么?
+**规则 1-4**是"一致性"原则:
 
-| 方法 | 用途 | 幂等性* | 安全性** | 典型场景 |
-|------|------|---------|---------|---------|
-| **GET** | 获取资源 | 是 | 是 | 查询列表、查看详情 |
-| **POST** | 创建资源 | 否 | 否 | 新增用户、提交订单 |
-| **PUT** | 全量更新 | 是 | 否 | 替换整个用户资料 |
-| **PATCH** | 部分更新 | 否 | 否 | 修改用户昵称（只传一个字段） |
-| **DELETE** | 删除资源 | 是 | 否 | 删除用户、取消订单 |
+- 统一名词、复数、大小写,让团队所有人写的 URL 风格一致
+- 减少认知负担,一眼就知道这是什么资源
 
-> *幂等性：多次执行结果相同。比如 PUT 同一个资源 10 次，结果还是那一个资源。
-> **安全性：不会改变服务器状态。GET 是安全的，POST/PUT/DELETE 都不安全。
+**规则 5-6**是"灵活性"原则:
 
-### 1.4 实战示例：电商系统的 RESTful API
+- 层级太深 = 耦心度太高,难以维护
+- 查询参数 = 更灵活,可以组合任意过滤条件
+
+**规则 7**是"兼容性"原则:
+
+- API 是长期契约,不能随意改
+- 版本号让新旧接口并存,平滑升级
+  :::
+
+### 2.3 HTTP 方法的选择
+
+| 方法       | 用途     | 幂等性\* | 安全性\*\* | 典型场景                   |
+| ---------- | -------- | -------- | ---------- | -------------------------- |
+| **GET**    | 获取资源 | 是       | 是         | 查询列表、查看详情         |
+| **POST**   | 创建资源 | 否       | 否         | 新增用户、提交订单         |
+| **PUT**    | 全量更新 | 是       | 否         | 替换整个用户资料           |
+| **PATCH**  | 部分更新 | 否       | 否         | 修改用户昵称(只传一个字段) |
+| **DELETE** | 删除资源 | 是       | 否         | 删除用户、取消订单         |
+
+> **\*幂等性**:多次执行结果相同。比如 PUT 同一个资源 10 次,结果还是那一个资源。\***\*安全性**:不会改变服务器状态。GET 是安全的,POST/PUT/DELETE 都不安全。
+
+::: details 🔧 幂等性为什么重要?
+**场景**:用户点击"支付"按钮,但网络延迟,用户又点了一次。
+
+- **幂等的操作**(PUT/DELETE):点击 10 次和点击 1 次,结果相同。不会重复扣款。
+- **不幂等的操作**(POST):点击 10 次,可能创建 10 个订单。
+
+**解决方案**:
+
+- **客户端**:按钮点击后禁用,防止重复提交
+- **服务端**:POST 操作用唯一 ID 校验,避免重复处理
+
+**关键点**:幂等性是分布式系统正确性的重要保证。
+:::
+
+### 2.4 实战示例:电商系统的 RESTful API
 
 ```
 # 用户模块
-GET    /v1/users                    # 获取用户列表（支持分页、过滤）
+GET    /v1/users                    # 获取用户列表(支持分页、过滤)
 POST   /v1/users                    # 创建新用户
 GET    /v1/users/{id}               # 获取用户详情
 PUT    /v1/users/{id}               # 全量更新用户信息
-PATCH  /v1/users/{id}               # 部分更新（如：修改密码）
+PATCH  /v1/users/{id}               # 部分更新(如:修改密码)
 DELETE /v1/users/{id}               # 删除用户
 
-# 订单模块（嵌套资源，最多 3 层）
+# 订单模块(嵌套资源,最多 3 层)
 GET    /v1/users/{id}/orders         # 获取某用户的所有订单
 POST   /v1/users/{id}/orders         # 为用户创建订单
-GET    /v1/orders/{orderId}         # 获取订单详情（扁平化，避免过深）
-PATCH  /v1/orders/{orderId}/status   # 更新订单状态（子资源操作）
+GET    /v1/orders/{orderId}         # 获取订单详情(扁平化,避免过深)
+PATCH  /v1/orders/{orderId}/status   # 更新订单状态(子资源操作)
 
-# 商品模块（复杂过滤用查询参数）
+# 商品模块(复杂过滤用查询参数)
 GET    /v1/products?category=electronics&price_min=100&price_max=5000&sort=price_desc&page=2&page_size=20
 
-# 复杂报表（特殊场景，URL 可带动词）
-POST   /v1/reports/sales/export      # 导出销售报表（非纯 CRUD，动词可接受）
+# 复杂报表(特殊场景,URL 可带动词)
+POST   /v1/reports/sales/export      # 导出销售报表(非纯 CRUD,动词可接受)
 ```
 
 ---
 
-## 2. 状态码：让错误"会说话"
+## 3. 状态码:让错误"会说话"
 
-### 2.1 为什么状态码很重要？
+### 3.1 为什么状态码很重要?
 
 <StatusCodeDemo />
 
-想象一下，如果你的 API 不管成功失败都返回 `200 OK`，客户端该怎么判断？
+想象一下,如果你的 API 不管成功失败都返回 `200 OK`,客户端该怎么判断?
 
 ```json
-// 错误的做法：HTTP 200，但业务失败
+// ❌ 错误的做法:HTTP 200,但业务失败
 HTTP/1.1 200 OK
 {
   "success": false,
@@ -119,77 +172,92 @@ HTTP/1.1 200 OK
 }
 ```
 
-**问题在哪？**
-- 缓存层（CDN、浏览器）会缓存这个"成功的"响应
+**问题在哪?**
+
+- 缓存层(CDN、浏览器)会缓存这个"成功的"响应
 - 监控工具以为一切正常
 - 前端需要额外解析 JSON 才知道有没有错
 
-**正确的做法**：用 HTTP 状态码表示传输层状态，和业务成功/失败解耦。
+**正确的做法**:用 HTTP 状态码表示传输层状态,和业务成功/失败解耦。
 
-### 2.2 常用状态码速查表
+### 3.2 常用状态码速查表
 
-| 状态码 | 含义 | 使用场景 | 响应体内容 |
-|--------|------|---------|-----------|
-| **2xx 成功** ||||
-| 200 OK | 通用成功 | GET 查询成功、PUT/PATCH 更新成功 | 资源数据 |
-| 201 Created | 创建成功 | POST 创建资源成功 | 新资源数据 + Location 头 |
-| 202 Accepted | 已接受 | 异步任务提交成功（如：导出报表） | 任务状态/轮询地址 |
-| 204 No Content | 无内容 | DELETE 删除成功、PUT 更新但无需返回数据 | 空 |
-| **3xx 重定向** ||||
-| 301 Moved Permanently | 永久重定向 | 资源 URL 永久变更（如：v1 废弃，跳转 v2） | 新 URL |
-| 302 Found | 临时重定向 | 临时跳转（较少用于 API） | 临时 URL |
-| 304 Not Modified | 未修改 | 缓存有效（配合 If-None-Match/If-Modified-Since） | 空（用缓存） |
-| **4xx 客户端错误** ||||
-| 400 Bad Request | 请求格式错误 | 参数缺失、JSON 格式错误、字段类型不对 | 错误详情 |
-| 401 Unauthorized | 未认证 | 缺少 Token、Token 过期、签名错误 | 认证方式说明 |
-| 403 Forbidden | 禁止访问 | 已登录但无权限（如：普通用户访问管理员接口） | 无权限说明 |
-| 404 Not Found | 资源不存在 | URL 错误、资源已删除 | 错误详情 |
-| 405 Method Not Allowed | 方法不允许 | 如：对只读资源调用 POST | 允许的 Methods |
-| 409 Conflict | 资源冲突 | 重复创建（唯一约束冲突）、乐观锁版本冲突 | 冲突详情 |
-| 422 Unprocessable Entity | 语义错误 | 请求格式对，但业务校验失败（如：密码太短） | 校验错误详情 |
-| 429 Too Many Requests | 请求过多 | 触发限流（Rate Limiting） | 重试时间 |
-| **5xx 服务端错误** ||||
-| 500 Internal Server Error | 服务器内部错误 | 未捕获的异常、代码 bug | 错误 ID（不要暴露堆栈） |
-| 502 Bad Gateway | 网关错误 | 反向代理（Nginx）无法连接到后端服务 | - |
-| 503 Service Unavailable | 服务不可用 | 服务正在维护、过载保护触发 | 恢复时间估计 |
-| 504 Gateway Timeout | 网关超时 | 后端响应太慢，被代理层切断 | - |
+| 状态码                    | 含义           | 使用场景                                       | 响应体内容               |
+| ------------------------- | -------------- | ---------------------------------------------- | ------------------------ | --- |
+| **2xx 成功**              |                |                                                |                          |     |
+| 200 OK                    | 通用成功       | GET 查询成功、PUT/PATCH 更新成功               | 资源数据                 |
+| 201 Created               | 创建成功       | POST 创建资源成功                              | 新资源数据 + Location 头 |
+| 202 Accepted              | 已接受         | 异步任务提交成功(如:导出报表)                  | 任务状态/轮询地址        |
+| 204 No Content            | 无内容         | DELETE 删除成功、PUT 更新但无需返回数据        | 空(用缓存)               |
+| **3xx 重定向**            |                |                                                |                          |     |
+| 301 Moved Permanently     | 永久重定向     | 资源 URL 永久变更(如:v1 废弃,跳转 v2)          | 新 URL                   |
+| 302 Found                 | 临时重定向     | 临时跳转(较少用于 API)                         | 临时 URL                 |
+| 304 Not Modified          | 未修改         | 缓存有效(配合 If-None-Match/If-Modified-Since) | 空(用缓存)               |
+| **4xx 客户端错误**        |                |                                                |                          |     |
+| 400 Bad Request           | 请求格式错误   | 参数缺失、JSON 格式错误、字段类型不对          | 错误详情                 |
+| 401 Unauthorized          | 未认证         | 缺少 Token、Token 过期、签名错误               | 认证方式说明             |
+| 403 Forbidden             | 禁止访问       | 已登录但无权限(如:普通用户访问管理员接口)      | 无权限说明               |
+| 404 Not Found             | 资源不存在     | URL 错误、资源已删除                           | 错误详情                 |
+| 405 Method Not Allowed    | 方法不允许     | 如:对只读资源调用 POST                         | 允许的 Methods           |
+| 409 Conflict              | 资源冲突       | 重复创建(唯一约束冲突)、乐观锁版本冲突         | 冲突详情                 |
+| 422 Unprocessable Entity  | 语义错误       | 请求格式对,但业务校验失败(如:密码太短)         | 校验错误详情             |
+| 429 Too Many Requests     | 请求过多       | 触发限流(Rate Limiting)                        | 重试时间                 |
+| **5xx 服务端错误**        |                |                                                |                          |     |
+| 500 Internal Server Error | 服务器内部错误 | 未捕获的异常、代码 bug                         | 错误 ID(不要暴露堆栈)    |
+| 502 Bad Gateway           | 网关错误       | 反向代理(Nginx)无法连接到后端服务              | -                        |
+| 503 Service Unavailable   | 服务不可用     | 服务正在维护、过载保护触发                     | 恢复时间估计             |
+| 504 Gateway Timeout       | 网关超时       | 后端响应太慢,被代理层切断                      | -                        |
 
-### 2.3 状态码使用的"避坑指南"
+::: tip 📊 从表格中你能看到什么?
+**2xx(成功)** vs **3xx(重定向)** vs **4xx(客户端错误)** vs **5xx(服务端错误)**:
+
+- **2xx**:一切正常,客户端可以继续
+- **3xx**:资源换地方了,告诉客户端去哪找
+- **4xx**:客户端搞错了,修正请求后重试
+- **5xx**:服务端出问题了,客户端等一等再试,或者联系管理员
+
+**关键点**:正确的状态码让客户端、浏览器、CDN、监控工具都能正确理解响应。
+:::
+
+### 3.3 状态码使用的"避坑指南"
+
+**坑 1:所有错误都用 400**
 
-**坑 1：所有错误都用 400**
 ```
 ❌ GET /users/999  → 400 (用户不存在应该返回 404)
 ❌ POST /login 密码错误 → 400 (应该返回 401 或 422)
 ❌ 删除已删除的资源 → 400 (应该返回 404 或 204)
 ```
 
-**坑 2：业务状态混在 HTTP 状态码里**
+**坑 2:业务状态混在 HTTP 状态码里**
+
 ```
-❌ 订单支付失败 → 402 Payment Required (这个状态码是为数字钱包预留的，不要滥用)
+❌ 订单支付失败 → 402 Payment Required (这个状态码是为数字钱包预留的,不要滥用)
 ✅ 订单支付失败 → 200 OK + body: { "code": "PAYMENT_FAILED", "message": "余额不足" }
 ```
 
-**坑 3：暴露敏感信息**
+**坑 3:暴露敏感信息**
+
 ```
 ❌ 500 响应里返回完整的堆栈跟踪、SQL 查询语句、数据库连接信息
-✅ 只返回 "错误 ID"，详细日志记录到服务器，通过错误 ID 关联
+✅ 只返回 "错误 ID",详细日志记录到服务器,通过错误 ID 关联
 ```
 
 ---
 
-## 3. 请求与响应：标准化的数据契约
+## 4. 请求与响应:标准化的数据契约
 
-### 3.1 请求结构设计
+### 4.1 请求结构设计
 
 <RequestStructureDemo />
 
-**HTTP 请求由 3 部分组成**：
+**HTTP 请求由 3 部分组成**:
 
 ```http
-# 1. 请求行（方法 + URL + 协议版本）
+# 1. 请求行(方法 + URL + 协议版本)
 POST /v1/users HTTP/1.1
 
-# 2. 请求头（元数据）
+# 2. 请求头(元数据)
 Host: api.example.com
 Content-Type: application/json
 Authorization: Bearer eyJhbGciOiJIUzI1NiIs...
@@ -197,7 +265,7 @@ X-Request-ID: req-123456789
 Accept: application/json
 Accept-Language: zh-CN,zh;q=0.9
 
-# 3. 请求体（仅 POST/PUT/PATCH 需要）
+# 3. 请求体(仅 POST/PUT/PATCH 需要)
 {
   "name": "张三",
   "email": "zhangsan@example.com",
@@ -208,20 +276,20 @@ Accept-Language: zh-CN,zh;q=0.9
 #### 查询参数设计规范
 
 ```http
-# 分页（必须）
+# 分页(必须)
 GET /products?page=1&page_size=20
 
-# 排序（可选）
+# 排序(可选)
 GET /products?sort=created_at&order=desc
 
-# 过滤（可选，支持多种操作符）
+# 过滤(可选,支持多种操作符)
 GET /products?price_min=100&price_max=5000          # 范围
-GET /products?category=electronics,clothing         # 多选（IN）
+GET /products?category=electronics,clothing         # 多选(IN)
 GET /products?status=active&is_featured=true         # 布尔
-GET /products?search=iPhone                         # 全文搜索
+GET /products?search=iphone                         # 全文搜索
 
-# 字段选择（可选，减少数据传输）
-GET /products?fields=id,name,price,image
+# 字段选择(可选,减少数据传输)
+GET /products?fields=id,name,price
 
 # 组合使用
 GET /products?page=1&page_size=20&sort=price&order=asc&category=electronics&price_max=5000&fields=id,name,price
@@ -229,21 +297,21 @@ GET /products?page=1&page_size=20&sort=price&order=asc&category=electronics&pric
 
 #### 请求头设计规范
 
-| 头部字段 | 用途 | 示例 | 是否必需 |
-|---------|------|------|---------|
-| `Authorization` | 认证信息 | `Bearer eyJhbGciOiJIUzI1NiIs...` | 受保护接口必需 |
-| `Content-Type` | 请求体格式 | `application/json` | POST/PUT/PATCH 必需 |
-| `Accept` | 期望响应格式 | `application/json` | 建议携带 |
-| `Accept-Language` | 期望语言 | `zh-CN,zh;q=0.9,en;q=0.8` | 多语言应用必需 |
-| `X-Request-ID` | 请求唯一标识 | `req-550e8400-e29b-41d4-a716-446655440000` | 建议携带，便于追踪 |
-| `X-Client-Version` | 客户端版本 | `iOS-2.5.1` / `Web-3.0.0` | 建议携带，便于问题排查 |
-| `If-None-Match` | 缓存校验 | `"abc123"` | 可选，用于乐观并发控制 |
+| 头部字段           | 用途         | 示例                                      | 是否必需              |
+| ------------------ | ------------ | ----------------------------------------- | --------------------- |
+| `Authorization`    | 认证信息     | `Bearer eyJhbGciOiJIUzI1NiIs...`          | 受保护接口必需        |
+| `Content-Type`     | 请求体格式   | `application/json`                        | POST/PUT/PATCH 必需   |
+| `Accept`           | 期望响应格式 | `application/json`                        | 建议携带              |
+| `Accept-Language`  | 期望语言     | `zh-CN,zh;q=0.9,en;q=0.8`                 | 多语言应用必需        |
+| `X-Request-ID`     | 请求唯一标识 | `req-550e8400-e29b-41d4-a716-44665544000` | 建议携带,便于追踪     |
+| `X-Client-Version` | 客户端版本   | `iOS-2.5.1` / `Web-3.0.0`                 | 建议携带,便于问题排查 |
+| `If-None-Match`    | 缓存校验     | `"abc123"`                                | 可选,用于乐观并发控制 |
 
-### 3.2 响应结构设计
+### 4.2 响应结构设计
 
 <ResponseStructureDemo />
 
-**标准化响应结构**（无论成功与否，结构一致）：
+**标准化响应结构**(无论成功与否,结构一致):
 
 ```json
 {
@@ -257,13 +325,13 @@ GET /products?page=1&page_size=20&sort=price&order=asc&category=electronics&pric
 
 #### 响应字段说明
 
-| 字段 | 类型 | 说明 | 示例 |
-|------|------|------|------|
-| `code` | integer | 业务状态码，`0` 表示成功，非 `0` 表示失败 | `0`, `10001`, `20003` |
-| `message` | string | 状态描述，成功时为 `"success"`，失败时为错误描述 | `"success"`, `"用户不存在"` |
-| `data` | any | 业务数据，成功时返回具体数据，失败时可返回 `null` 或错误详情 | `{ "id": 1, "name": "张三" }` |
-| `request_id` | string | 请求唯一标识，用于问题追踪 | `"req-550e8400-e29b-41d4-a716-446655440000"` |
-| `timestamp` | string | 响应时间戳，ISO 8601 格式 | `"2024-01-15T09:30:00.000Z"` |
+| 字段         | 类型    | 说明                                                       | 示例                                        |
+| ------------ | ------- | ---------------------------------------------------------- | ------------------------------------------- |
+| `code`       | integer | 业务状态码,`0` 表示成功,非 `0` 表示失败                    | `0`, `10001`, `20003`                       |
+| `message`    | string  | 状态描述,成功时为 `"success"`,失败时为错误描述             | `"success"`, `"用户不存在"`                 |
+| `data`       | any     | 业务数据,成功时返回具体数据,失败时可返回 `null` 或错误详情 | `{ "id": 1, "name": "张三" }`               |
+| `request_id` | string  | 请求唯一标识,用于问题追踪                                  | `"req-550e8400-e29b-41d4-a716-44665544000"` |
+| `timestamp`  | string  | 响应时间戳,ISO 8601 格式                                   | `"2024-01-15T09:30:00.000Z"`                |
 
 #### 分页响应结构
 
@@ -288,48 +356,52 @@ GET /products?page=1&page_size=20&sort=price&order=asc&category=electronics&pric
 }
 ```
 
-#### 批量操作响应结构
+::: tip 💡 为什么要 request_id?
+**request_id** 是问题追踪的关键:
 
-```json
-{
-  "code": 0,
-  "message": "success",
-  "data": {
-    "success_count": 8,
-    "fail_count": 2,
-    "details": [
-      { "id": 1, "status": "success", "message": "操作成功" },
-      { "id": 2, "status": "success", "message": "操作成功" },
-      { "id": 3, "status": "failed", "code": 40001, "message": "用户不存在" },
-      { "id": 4, "status": "failed", "code": 40002, "message": "状态不允许操作" }
-    ]
-  }
-}
-```
+1. **用户反馈**:"支付失败,错误 ID 是 abc123"
+   → 技术人员直接在日志里搜索 abc123,立即定位问题
+
+2. **分布式追踪**:
+   - 请求经过 API Gateway → Service A → Service B
+   - 每个服务都记录相同的 request_id
+   - 日志系统可以把所有相关日志聚合起来
+
+3. **性能分析**:
+   - 统计某个 request_id 的完整链路耗时
+
+- 发现瓶颈在哪个服务
+
+**关键点**:request_id 是可观测性的基础,没有它,分布式系统的问题排查是地狱模式。
+:::
 
 ---
 
-## 4. 错误处理：优雅地"拒绝"
+## 5. 错误处理:优雅地"拒绝"
 
-### 4.1 为什么错误处理如此重要？
+### 5.1 为什么错误处理如此重要?
 
 <ErrorHandlingDemo />
 
-一个好的错误处理机制，能让客户端"看状态码就知道怎么回事"，而不是去猜。
+一个好的错误处理机制,能让客户端"看状态码就知道怎么回事",而不是去猜。
+
+**错误的示范**:
 
-**错误的示范**：
 ```json
 HTTP/1.1 200 OK
 {
   "error": "出错了"
 }
 ```
-问题：
-- HTTP 状态码说"成功"，但业务说"出错"
-- 错误信息太笼统，无法定位问题
-- 没有错误代码，难以程序化判断
 
-**正确的示范**：
+**问题**:
+
+- HTTP 状态码说"成功",但业务说"出错"
+- 错误信息太笼统,无法定位问题
+- 没有错误代码,难以程序化判断
+
+**正确的示范**:
+
 ```json
 HTTP/1.1 422 Unprocessable Entity
 {
@@ -339,651 +411,144 @@ HTTP/1.1 422 Unprocessable Entity
     {
       "field": "password",
       "code": "VALIDATION_ERROR",
-      "message": "密码必须包含至少 1 个大写字母、1 个小写字母、1 个数字，且长度至少 8 位"
+      "message": "密码必须包含至少 1 个大写字母、1 个小写字母、1 个数字,且长度至少 8 位"
     }
   ],
-  "request_id": "req-550e8400-e29b-41d4-a716-446655440000",
+  "request_id": "req-550e8400-e29b-41d4-a716-44665544000",
   "timestamp": "2024-01-15T09:30:00.000Z",
   "help_url": "https://docs.example.com/errors/20003"
 }
 ```
 
-### 4.2 错误码设计规范
+### 5.2 错误码设计规范
+
+::: tip 💡 错误码的分层设计
+**分层错误码**的好处:
+
+- **可程序化判断**:前端根据 `code` 字段决定行为,而不是解析 `message`
+- **国际化友好**:`code` 不变,`message` 可以根据用户语言返回不同文本
+- **文档化**:每个错误码都有文档,开发者可以查
+
+**结构**:1XXYY
+
+- 第 1 位(1):固定,表示错误
+- 第 2-3 位(XX):模块/层次
+- 第 3-4 位(YY):具体错误
+
+**示例**:
+
+- `10001`:通用错误(参数错误)
+- `10010`:用户模块(用户不存在)
+- `20003`:业务错误(密码强度不足)
+  :::
 
 #### 分层错误码体系
 
 ```
-错误码格式：1XXYY
-- 第 1 位（1）：固定，表示错误
-- 第 2-3 位（XX）：模块/层次
-- 第 4-5 位（YY）：具体错误
+错误码格式:1XXYY
+- 第 1 位(1):固定,表示错误
+- 第 2-3 位(XX):模块/层次
+- 第 4-5 位(YY):具体错误
 ```
 
-| 模块代码 | 模块名称 | 说明 |
-|---------|---------|------|
-| 00 | 通用 | 系统级、通用错误 |
-| 10 | 用户模块 | 注册、登录、用户信息相关 |
-| 11 | 认证授权 | Token、权限相关 |
-| 20 | 商品模块 | 商品 CRUD、库存相关 |
-| 30 | 订单模块 | 下单、支付、物流相关 |
-| 40 | 支付模块 | 支付渠道、退款相关 |
-| 50 | 营销模块 | 优惠券、活动相关 |
-| 90 | 第三方服务 | 短信、邮件、云存储等 |
-
-#### 错误码定义示例
-
-```javascript
-// 通用错误 (00XXX)
-const CommonErrors = {
-  UNKNOWN_ERROR: { code: 10000, message: '未知错误', httpStatus: 500 },
-  INVALID_PARAMETER: { code: 10001, message: '参数错误', httpStatus: 400 },
-  RESOURCE_NOT_FOUND: { code: 10002, message: '资源不存在', httpStatus: 404 },
-  METHOD_NOT_ALLOWED: { code: 10003, message: '请求方法不允许', httpStatus: 405 },
-  REQUEST_TIMEOUT: { code: 10004, message: '请求超时', httpStatus: 408 },
-  RATE_LIMIT_EXCEEDED: { code: 10005, message: '请求过于频繁', httpStatus: 429 },
-  INTERNAL_SERVER_ERROR: { code: 10006, message: '服务器内部错误', httpStatus: 500 },
-  SERVICE_UNAVAILABLE: { code: 10007, message: '服务不可用', httpStatus: 503 },
-}
-
-// 用户模块错误 (10XXX)
-const UserErrors = {
-  USER_NOT_FOUND: { code: 10010, message: '用户不存在', httpStatus: 404 },
-  USER_ALREADY_EXISTS: { code: 10011, message: '用户已存在', httpStatus: 409 },
-  INVALID_EMAIL_FORMAT: { code: 10012, message: '邮箱格式不正确', httpStatus: 422 },
-  INVALID_PHONE_FORMAT: { code: 10013, message: '手机号格式不正确', httpStatus: 422 },
-  PASSWORD_TOO_WEAK: { code: 10014, message: '密码强度不足', httpStatus: 422 },
-  PASSWORD_MISMATCH: { code: 10015, message: '两次输入的密码不一致', httpStatus: 422 },
-  USER_ACCOUNT_DISABLED: { code: 10016, message: '账号已被禁用', httpStatus: 403 },
-  USER_ACCOUNT_LOCKED: { code: 10017, message: '账号已被锁定', httpStatus: 403 },
-}
-
-// 认证授权错误 (11XXX)
-const AuthErrors = {
-  TOKEN_MISSING: { code: 10018, message: '缺少认证令牌', httpStatus: 401 },
-  TOKEN_INVALID: { code: 10019, message: '无效的认证令牌', httpStatus: 401 },
-  TOKEN_EXPIRED: { code: 10020, message: '认证令牌已过期', httpStatus: 401 },
-  INSUFFICIENT_PERMISSIONS: { code: 10021, message: '权限不足', httpStatus: 403 },
-  REFRESH_TOKEN_EXPIRED: { code: 10022, message: '刷新令牌已过期', httpStatus: 401 },
-}
-```
-
-### 4.3 多字段校验错误处理
-
-当表单有多个字段错误时，应该一次性返回所有错误：
-
-```json
-HTTP/1.1 422 Unprocessable Entity
-{
-  "code": 10001,
-  "message": "参数校验失败",
-  "errors": [
-    {
-      "field": "email",
-      "code": "INVALID_FORMAT",
-      "message": "邮箱格式不正确",
-      "value": "not-an-email"
-    },
-    {
-      "field": "password",
-      "code": "TOO_SHORT",
-      "message": "密码长度不能少于 8 位",
-      "value": "(hidden)",
-      "constraints": {
-        "min": 8,
-        "max": 32
-      }
-    },
-    {
-      "field": "age",
-      "code": "OUT_OF_RANGE",
-      "message": "年龄必须在 18-120 之间",
-      "value": 15,
-      "constraints": {
-        "min": 18,
-        "max": 120
-      }
-    }
-  ],
-  "request_id": "req-550e8400-e29b-41d4-a716-446655440000",
-  "timestamp": "2024-01-15T09:30:00.000Z"
-}
-```
+| 模块代码 | 模块名称   | 说明                     |
+| -------- | ---------- | ------------------------ |
+| 00       | 通用       | 系统级、通用错误         |
+| 10       | 用户模块   | 注册、登录、用户信息相关 |
+| 11       | 认证授权   | Token、权限相关          |
+| 20       | 商品模块   | 商品 CRUD、库存相关      |
+| 30       | 订单模块   | 下单、支付、物流相关     |
+| 40       | 支付模块   | 支付渠道、退款相关       |
+| 50       | 营销模块   | 优惠券、活动相关         |
+| 90       | 第三方服务 | 短信、邮件、云存储等     |
 
 ---
 
-## 5. 版本控制：API 的"向后兼容"
+## 6. 版本控制:API 的"向后兼容"
 
-### 5.1 为什么要做 API 版本控制？
+### 6.1 为什么要做 API 版本控制?
 
 <VersioningStrategyDemo />
 
-场景：你的电商系统已经上线，App 有 100 万用户。现在需要修改订单接口，添加一个新字段，同时废弃一个旧字段。
+场景:你的电商系统已经上线,App 有 100 万用户。现在需要修改订单接口,添加一个新字段,同时废弃一个旧字段。
+
+**如果不做版本控制**:
 
-**如果不做版本控制**：
 - 新 App 调用新接口 → 正常工作
-- 旧 App 调用新接口 → 字段缺失，崩溃
+- 旧 App 调用新接口 → 字段缺失,崩溃
 - 用户投诉 → 老板震怒 → 你背锅
 
-**正确的做法**：
-```
-/v1/orders  - 旧接口，继续服务旧 App
-/v2/orders  - 新接口，新功能在这里
-```
-
-旧 App 继续调用 `/v1/orders`，新功能上线不会崩。等旧 App 用户都升级了，再考虑废弃 v1。
-
-### 5.2 4 种版本控制策略
-
-| 策略 | 示例 | 优点 | 缺点 | 推荐度 |
-|------|------|------|------|--------|
-| **URL Path** | `/v1/users` | 最直观、易于缓存、文档清晰 | URL 变化 | ⭐⭐⭐⭐⭐ |
-| **Header** | `API-Version: v1` | URL 不变 | 不直观，难以缓存，需要读 Header 文档 | ⭐⭐⭐ |
-| **Content Negotiation** | `Accept: application/vnd.api.v1+json` | 标准 HTTP 规范 | 复杂，理解成本高 | ⭐⭐ |
-| **Query Parameter** | `/users?version=v1` | 简单 | 不专业，容易被忽视，缓存麻烦 | ⭐ |
-
-**推荐做法**：URL Path 版本控制，简单直观，行业主流。
+**正确的做法**:
 
 ```
-# 推荐的 URL 结构
-https://api.example.com/v1/users
-https://api.example.com/v2/users
-
-# 或者使用子域名（大型系统）
-https://v1.api.example.com/users
-https://v2.api.example.com/users
-
-# 不推荐的做法
-https://api.example.com/users?version=v1  (Query 参数)
-https://api.example.com/users  (Header: API-Version: v1)
+/v1/orders  - 旧接口,继续服务旧 App
+/v2/orders  - 新接口,新功能在这里
 ```
 
-### 5.3 版本演进策略
+旧 App 继续调用 `/v1/orders`,新功能上线不会崩。等旧 App 用户都升级了,再考虑废弃 v1。
 
-#### 语义化版本（SemVer）在 API 中的应用
+### 6.2 4 种版本控制策略
 
-```
-API 版本格式：v{主版本}.{次版本}
+| 策略                    | 示例                                  | 优点                       | 缺点                               | 推荐度   |
+| ----------------------- | ------------------------------------- | -------------------------- | ---------------------------------- | -------- |
+| **URL Path**            | `/v1/users`                           | 最直观、易于缓存、文档清晰 | URL 变化                           | ⭐⭐⭐⭐ |
+| **Header**              | `API-Version: v1`                     | URL 不变                   | 不直观,难以缓存,需要读 Header 文档 | ⭐⭐     |
+| **Content Negotiation** | `Accept: application/vnd.api.v1+json` | 标准 HTTP 规范             | 复杂,理解成本高                    | ⭐⭐     |
+| **Query Parameter**     | `/users?version=v1`                   | 简单                       | 不专业,容易被忽视,缓存麻烦         | ⭐       |
 
-- 主版本（v1, v2, v3）：破坏性变更，不向后兼容
-- 次版本（v1.1, v1.2）：新增功能，向后兼容
-
-实际使用：
-- 通常只保留主版本在 URL：/v1/users, /v2/users
-- 次版本通过文档和 Header 标注：X-API-Revision: 1.3
-```
-
-#### 版本演进示例
-
-```
-时间线：
-
-2023-01: 发布 v1
-  GET /v1/users → 返回 { id, name, email }
-
-2023-06: v1 新增字段（向后兼容）
-  GET /v1/users → 返回 { id, name, email, phone }  ✓ 旧客户端仍能正常工作
-
-2024-01: 破坏性变更，发布 v2
-  GET /v2/users → 返回 {
-    user_id,           # id 改为 user_id
-    full_name,         # name 改为 full_name
-    email_address,     # email 改为 email_address
-    contact_phone,     # phone 改为 contact_phone
-    created_at         # 新增字段
-  }
-
-  同时：
-  - v1 标记为 Deprecated，继续服务 6 个月
-  - 在响应头添加：Deprecation: true, Sunset: Wed, 30 Jun 2024 00:00:00 GMT
-
-2024-07: 正式下线 v1
-  GET /v1/users → 410 Gone
-  {
-    "code": 10002,
-    "message": "API v1 已停用，请升级到 v2",
-    "help_url": "https://docs.example.com/migration/v1-to-v2"
-  }
-```
+**推荐做法**:URL Path 版本控制,简单直观,行业主流。
 
 ---
 
-## 6. 文档规范：让接口"活"在文档里
+## 7. 总结:API 设计 checklist
 
-### 6.1 为什么 API 文档容易过时？
+### 7.1 设计阶段
 
-<DocumentationDemo />
-
-传统文档的问题：
-- 接口变更后，文档没人更新
-- 文档和代码"各说各话"
-- 前端联调时，发现实际接口和文档不一致
-
-**解决方案**：
-1. **代码即文档**：使用 Swagger/OpenAPI 注解，从代码自动生成文档
-2. **契约先行**：API 变更必须同时更新文档，代码审查时检查
-3. **Mock 服务**：文档即 Mock，前端不用等后端完成就能开发
-
-### 6.2 OpenAPI 规范示例
-
-```yaml
-openapi: 3.0.3
-info:
-  title: 电商系统 API
-  description: |
-    提供用户、商品、订单等模块的接口服务。
-
-    ## 认证方式
-    所有需要认证的接口都需要在 Header 中携带 `Authorization: Bearer {token}`
-  version: 1.0.0
-  contact:
-    name: API Support
-    email: api@example.com
-
-servers:
-  - url: https://api.example.com/v1
-    description: 生产环境
-  - url: https://staging-api.example.com/v1
-    description: 测试环境
-
-paths:
-  /users:
-    get:
-      summary: 获取用户列表
-      description: 支持分页、排序和过滤
-      tags:
-        - 用户管理
-      parameters:
-        - name: page
-          in: query
-          description: 页码，从 1 开始
-          schema:
-            type: integer
-            default: 1
-            minimum: 1
-        - name: page_size
-          in: query
-          description: 每页数量
-          schema:
-            type: integer
-            default: 20
-            minimum: 1
-            maximum: 100
-        - name: sort
-          in: query
-          description: 排序字段
-          schema:
-            type: string
-            enum: [created_at, updated_at, name]
-            default: created_at
-        - name: order
-          in: query
-          description: 排序方向
-          schema:
-            type: string
-            enum: [asc, desc]
-            default: desc
-        - name: status
-          in: query
-          description: 按状态过滤
-          schema:
-            type: string
-            enum: [active, inactive, suspended]
-      responses:
-        '200':
-          description: 成功
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/UserListResponse'
-        '400':
-          $ref: '#/components/responses/BadRequest'
-        '401':
-          $ref: '#/components/responses/Unauthorized'
-        '429':
-          $ref: '#/components/responses/TooManyRequests'
-
-    post:
-      summary: 创建用户
-      description: 注册新用户
-      tags:
-        - 用户管理
-      requestBody:
-        required: true
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/CreateUserRequest'
-            examples:
-              success:
-                summary: 正常请求
-                value:
-                  name: "张三"
-                  email: "zhangsan@example.com"
-                  phone: "13800138000"
-                  password: "SecurePass123!"
-      responses:
-        '201':
-          description: 创建成功
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/UserResponse'
-        '400':
-          $ref: '#/components/responses/BadRequest'
-        '409':
-          $ref: '#/components/responses/Conflict'
-
-  /users/{userId}:
-    get:
-      summary: 获取用户详情
-      tags:
-        - 用户管理
-      parameters:
-        - name: userId
-          in: path
-          required: true
-          schema:
-            type: integer
-          description: 用户 ID
-      responses:
-        '200':
-          description: 成功
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/UserResponse'
-        '404':
-          $ref: '#/components/responses/NotFound'
-
-components:
-  schemas:
-    User:
-      type: object
-      properties:
-        id:
-          type: integer
-          description: 用户唯一标识
-          example: 1
-        name:
-          type: string
-          description: 用户姓名
-          example: "张三"
-        email:
-          type: string
-          format: email
-          description: 邮箱地址
-          example: "zhangsan@example.com"
-        phone:
-          type: string
-          description: 手机号
-          example: "13800138000"
-        status:
-          type: string
-          enum: [active, inactive, suspended]
-          description: 账号状态
-          example: "active"
-        created_at:
-          type: string
-          format: date-time
-          description: 创建时间
-          example: "2024-01-15T09:30:00.000Z"
-        updated_at:
-          type: string
-          format: date-time
-          description: 更新时间
-          example: "2024-01-15T09:30:00.000Z"
-      required:
-        - id
-        - name
-        - email
-        - status
-        - created_at
-        - updated_at
-
-    UserResponse:
-      type: object
-      properties:
-        code:
-          type: integer
-          example: 0
-        message:
-          type: string
-          example: "success"
-        data:
-          $ref: '#/components/schemas/User'
-
-    UserListResponse:
-      type: object
-      properties:
-        code:
-          type: integer
-          example: 0
-        message:
-          type: string
-          example: "success"
-        data:
-          type: object
-          properties:
-            list:
-              type: array
-              items:
-                $ref: '#/components/schemas/User'
-            pagination:
-              type: object
-              properties:
-                page:
-                  type: integer
-                  example: 1
-                page_size:
-                  type: integer
-                  example: 20
-                total:
-                  type: integer
-                  example: 156
-                total_pages:
-                  type: integer
-                  example: 8
-                has_next:
-                  type: boolean
-                  example: true
-                has_prev:
-                  type: boolean
-                  example: false
-
-    CreateUserRequest:
-      type: object
-      properties:
-        name:
-          type: string
-          minLength: 2
-          maxLength: 50
-          description: 用户姓名
-          example: "张三"
-        email:
-          type: string
-          format: email
-          description: 邮箱地址
-          example: "zhangsan@example.com"
-        phone:
-          type: string
-          pattern: '^1[3-9]\\d{9}$'
-          description: 手机号
-          example: "13800138000"
-        password:
-          type: string
-          minLength: 8
-          description: 密码
-          example: "SecurePass123!"
-      required:
-        - name
-        - email
-        - password
-
-    Error:
-      type: object
-      properties:
-        code:
-          type: integer
-          description: 业务错误码
-          example: 10001
-        message:
-          type: string
-          description: 错误描述
-          example: "参数校验失败"
-        errors:
-          type: array
-          items:
-            type: object
-            properties:
-              field:
-                type: string
-                example: "email"
-              code:
-                type: string
-                example: "INVALID_FORMAT"
-              message:
-                type: string
-                example: "邮箱格式不正确"
-        request_id:
-          type: string
-          example: "req-550e8400-e29b-41d4-a716-446655440000"
-        timestamp:
-          type: string
-          format: date-time
-          example: "2024-01-15T09:30:00.000Z"
-        help_url:
-          type: string
-          example: "https://docs.example.com/errors/10001"
-
-  responses:
-    BadRequest:
-      description: 请求参数错误
-      content:
-        application/json:
-          schema:
-            $ref: '#/components/schemas/Error'
-          example:
-            code: 10001
-            message: "参数校验失败"
-            errors:
-              - field: "email"
-                code: "INVALID_FORMAT"
-                message: "邮箱格式不正确"
-            request_id: "req-550e8400-e29b-41d4-a716-446655440000"
-            timestamp: "2024-01-15T09:30:00.000Z"
-
-    Unauthorized:
-      description: 未认证或认证失败
-      content:
-        application/json:
-          schema:
-            $ref: '#/components/schemas/Error'
-          example:
-            code: 10018
-            message: "无效的认证令牌"
-            request_id: "req-550e8400-e29b-41d4-a716-446655440000"
-            timestamp: "2024-01-15T09:30:00.000Z"
-
-    Forbidden:
-      description: 无权限访问
-      content:
-        application/json:
-          schema:
-            $ref: '#/components/schemas/Error'
-          example:
-            code: 10021
-            message: "权限不足，需要管理员权限"
-            request_id: "req-550e8400-e29b-41d4-a716-446655440000"
-            timestamp: "2024-01-15T09:30:00.000Z"
-
-    NotFound:
-      description: 资源不存在
-      content:
-        application/json:
-          schema:
-            $ref: '#/components/schemas/Error'
-          example:
-            code: 10002
-            message: "用户不存在"
-            request_id: "req-550e8400-e29b-41d4-a716-446655440000"
-            timestamp: "2024-01-15T09:30:00.000Z"
-
-    Conflict:
-      description: 资源冲突
-      content:
-        application/json:
-          schema:
-            $ref: '#/components/schemas/Error'
-          example:
-            code: 10011
-            message: "用户已存在"
-            request_id: "req-550e8400-e29b-41d4-a716-446655440000"
-            timestamp: "2024-01-15T09:30:00.000Z"
-
-    TooManyRequests:
-      description: 请求过于频繁
-      content:
-        application/json:
-          schema:
-            $ref: '#/components/schemas/Error'
-          example:
-            code: 10005
-            message: "请求过于频繁，请稍后再试"
-            request_id: "req-550e8400-e29b-41d4-a716-446655440000"
-            timestamp: "2024-01-15T09:30:00.000Z"
-```
-
----
-
-## 7. 总结：API 设计 checklist
-
-### 设计阶段
-
-- [ ] URL 设计符合 RESTful 规范（名词、复数、小写、连字符）
-- [ ] HTTP 方法使用正确（GET/POST/PUT/PATCH/DELETE）
-- [ ] 状态码选择恰当（2xx/4xx/5xx 区分清楚）
-- [ ] 错误码体系设计完成（分层、易扩展）
-- [ ] 响应结构标准化（code/message/data 统一）
-- [ ] 版本控制策略确定（URL Path 推荐）
+- [ ] URL 设计符合 RESTful 规范(名词、复数、小写、连字符)
+- [ ] HTTP 方法使用正确(GET/POST/PUT/PATCH/DELETE)
+- [ ] 状态码选择恰当(2xx/4xx/5xx 区分清楚)
+- [ ] 错误码体系设计完成(分层、易扩展)
+- [ ] 响应结构标准化(code/message/data 统一)
+- [ ] 版本控制策略确定(URL Path 推荐)
 - [ ] 分页/排序/过滤参数设计统一
 
-### 实现阶段
+### 7.2 实现阶段
 
 - [ ] 所有接口都有完善的 OpenAPI 文档
-- [ ] 参数校验规则清晰（类型、长度、必填）
-- [ ] 敏感信息脱敏处理（密码、Token 等）
-- [ ] 错误日志记录完整（带 request_id）
-- [ ] 接口性能监控到位（响应时间、错误率）
-- [ ] 限流熔断策略配置（防刷、降级）
+- [ ] 参数校验规则清晰(类型、长度、必填)
+- [ ] 敏感信息脱敏处理(密码、Token 等)
+- [ ] 错误日志记录完整(带 request_id)
+- [ ] 接口性能监控到位(响应时间、错误率)
+- [ ] 限流熔断策略配置(防刷、降级)
 
-### 维护阶段
+### 7.3 维护阶段
 
-- [ ] 接口变更走评审流程（兼容性检查）
+- [ ] 接口变更走评审流程(兼容性检查)
 - [ ] 废弃接口有明确的 Sunset 计划
 - [ ] 客户端接入文档及时更新
 - [ ] 错误码文档随代码同步维护
 
 ---
 
-## 名词对照表
+## 8. 名词对照表
 
-| 英文术语 | 中文对照 | 解释 |
-|---------|---------|------|
-| **REST** | 表述性状态传递 | 一种软件架构风格，用 URL 标识资源，用 HTTP 方法操作资源 |
-| **RESTful** | 符合 REST 规范的 | 遵循 REST 架构风格设计的 API |
-| **Endpoint** | 端点 | API 的具体 URL 地址，如 `/users` |
-| **Resource** | 资源 | REST 架构中的核心概念，网络上的任何事物都可抽象为资源 |
-| **URI** | 统一资源标识符 | 标识资源的字符串，URL 是 URI 的一种 |
-| **HTTP Method** | HTTP 方法 | GET、POST、PUT、PATCH、DELETE 等 |
-| **Status Code** | 状态码 | HTTP 响应中的 3 位数字，表示请求的处理结果 |
-| **Payload** | 载荷 | HTTP 请求或响应的主体数据 |
-| **Header** | 头部 | HTTP 请求或响应的元数据 |
-| **Query String** | 查询字符串 | URL 中 `?` 后面的参数部分 |
-| **Path Parameter** | 路径参数 | URL 路径中的变量，如 `/users/{id}` |
-| **Pagination** | 分页 | 大数据量时分批返回的机制 |
-| **Idempotency** | 幂等性 | 多次执行结果相同的特性 |
-| **Deprecation** | 弃用 | 标记即将废弃的功能或接口 |
-| **Backward Compatibility** | 向后兼容 | 新版本兼容旧版本的接口调用 |
-| **Rate Limiting** | 限流 | 控制单位时间内的请求数量 |
-| **OpenAPI** | 开放 API 规范 | 描述 REST API 的标准格式（原 Swagger） |
-| **SDK** | 软件开发工具包 | 封装 API 调用的开发工具包 |
+| 英文术语                   | 中文对照         | 解释                                                  |
+| -------------------------- | ---------------- | ----------------------------------------------------- |
+| **REST**                   | 表述性状态传递   | 一种软件架构风格,用 URL 标识资源,用 HTTP 方法操作资源 |
+| **RESTful**                | 符合 REST 规范的 | 遵循 REST 架构风格设计的 API                          |
+| **Endpoint**               | 端点             | API 的具体 URL 地址,如 `/users`                       |
+| **Resource**               | 资源             | REST 架构中的核心概念,网络上的任何事物都可抽象为资源  |
+| **URI**                    | 统一资源标识符   | 标识资源的字符串,URL 是 URI 的一种                    |
+| **HTTP Method**            | HTTP 方法        | GET、POST、PUT、PATCH、DELETE 等                      |
+| **Status Code**            | 状态码           | HTTP 响应中的 3 位数字,表示请求的处理结果             |
+| **Payload**                | 载荷             | HTTP 请求或响应的主体数据                             |
+| **Header**                 | 头部             | HTTP 请求或响应的元数据                               |
+| **Query String**           | 查询字符串       | URL 中 `?` 后面的参数部分                             |
+| **Path Parameter**         | 路径参数         | URL 路径中的变量,如 `/users/{id}`                     |
+| **Pagination**             | 分页             | 大数据量时分批返回的机制                              |
+| **Idempotency**            | 幂等性           | 多次执行结果相同的特性                                |
+| **Deprecation**            | 弃用             | 标记即将废弃的功能或接口                              |
+| **Backward Compatibility** | 向后兼容         | 新版本兼容旧版本的接口调用                            |
+| **Rate Limiting**          | 限流             | 限制单位时间内的请求数量                              |
+| **OpenAPI**                | 开放 API 规范    | 描述 REST API 的标准格式(原 Swagger)                  |
+| **SDK**                    | 软件开发工具包   | 封装 API 调用的开发工具包                             |
diff --git a/docs/zh-cn/appendix/audio-intro.md b/docs/zh-cn/appendix/audio-intro.md
index 929dc8c..8c4a116 100644
--- a/docs/zh-cn/appendix/audio-intro.md
+++ b/docs/zh-cn/appendix/audio-intro.md
@@ -151,12 +151,12 @@ _很多人以为 AI 直接处理"声音"，但实际上 AI 处理的是**数字
 
 ### 4.1 自回归 vs 非自回归
 
-| 特性 | 自回归 (AR) | 非自回归 (NAR) | 流匹配 (Flow) |
-|------|------------|---------------|--------------|
-| 生成方式 | 逐个时间步 | 一次性生成 | 流匹配路径 |
-| 速度 | 慢 | 快 | 很快 |
-| 音质 | 高 | 中高 | 高 |
-| 代表模型 | Tacotron 2 | FastSpeech 2 | F5-TTS |
+| 特性     | 自回归 (AR) | 非自回归 (NAR) | 流匹配 (Flow) |
+| -------- | ----------- | -------------- | ------------- |
+| 生成方式 | 逐个时间步  | 一次性生成     | 流匹配路径    |
+| 速度     | 慢          | 快             | 很快          |
+| 音质     | 高          | 中高           | 高            |
+| 代表模型 | Tacotron 2  | FastSpeech 2   | F5-TTS        |
 
 ### 4.2 关键组件
 
@@ -285,15 +285,15 @@ GST (Global Style Token) 是一种从参考音频中提取风格特征的方法
 
 ## 附录：常用术语表 (Vocabulary)
 
-| 术语           | 英文                         | 解释                                         |
-| :------------- | :--------------------------- | :------------------------------------------- |
-| **采样率**     | Sample Rate                  | 每秒采集的音频样本数（如 44.1kHz）。         |
-| **梅尔频谱**   | Mel-Spectrogram              | 模拟人耳感知的频谱表示，音频 AI 的核心输入。 |
-| **声码器**     | Vocoder                      | 将频谱图还原为音频波形的模型。               |
-| **TTS**        | Text-to-Speech               | 文本转语音，让 AI 说话的技术。               |
-| **ASR**        | Automatic Speech Recognition | 自动语音识别，让 AI 听懂的技术。             |
-| **零样本克隆** | Zero-Shot Cloning            | 只需几秒参考音频就能模仿任何声音。           |
-| **流匹配**     | Flow Matching                | 一种高效的生成方法，用于最新的 TTS 模型。    |
-| **声音编码器** | Speaker Encoder              | 提取声音身份特征的神经网络。                 |
-| **GST**        | Global Style Token           | 全局风格 Token，用于情感控制。               |
-| **神经编解码器**| Neural Codec                 | 将音频压缩为离散 Token 的模型。              |
+| 术语             | 英文                         | 解释                                         |
+| :--------------- | :--------------------------- | :------------------------------------------- |
+| **采样率**       | Sample Rate                  | 每秒采集的音频样本数（如 44.1kHz）。         |
+| **梅尔频谱**     | Mel-Spectrogram              | 模拟人耳感知的频谱表示，音频 AI 的核心输入。 |
+| **声码器**       | Vocoder                      | 将频谱图还原为音频波形的模型。               |
+| **TTS**          | Text-to-Speech               | 文本转语音，让 AI 说话的技术。               |
+| **ASR**          | Automatic Speech Recognition | 自动语音识别，让 AI 听懂的技术。             |
+| **零样本克隆**   | Zero-Shot Cloning            | 只需几秒参考音频就能模仿任何声音。           |
+| **流匹配**       | Flow Matching                | 一种高效的生成方法，用于最新的 TTS 模型。    |
+| **声音编码器**   | Speaker Encoder              | 提取声音身份特征的神经网络。                 |
+| **GST**          | Global Style Token           | 全局风格 Token，用于情感控制。               |
+| **神经编解码器** | Neural Codec                 | 将音频压缩为离散 Token 的模型。              |
diff --git a/docs/zh-cn/appendix/backend-evolution.md b/docs/zh-cn/appendix/backend-evolution.md
index 6fa7215..b7e7e53 100644
--- a/docs/zh-cn/appendix/backend-evolution.md
+++ b/docs/zh-cn/appendix/backend-evolution.md
@@ -1,404 +1,603 @@
 # 后端架构演进：从单机到云原生
 
-> 💡 **学习指南**：本章节无需编程基础，通过交互式演示带你回顾后端架构的 30 年变迁。我们将从最原始的物理服务器讲起，一直到现代的 Serverless 云计算。理解架构演进的历史，能帮助你在面对技术选型时做出更明智的决策。
+::: tip 🎯 核心问题
+**代码写好了,怎么让全世界的人都能访问?** 这就像问:你是想开一家路边小摊,还是经营一家跨国连锁餐厅?后端架构的选择,决定了你的"餐厅"能服务多少顾客。
+:::
+
+---
+
+## 1. 为什么要了解架构演进?
+
+想象一下,你正在规划一次长途旅行。你可以选择骑自行车、开私家车、坐高铁,或者乘飞机。每种方式都有其适用的场景:自行车适合短距离且想锻炼身体的情况,飞机则适合跨越大陆的长途旅行。
+
+**后端架构的选择也是如此。**
+
+从互联网诞生到现在,后端架构经历了多次重大变革。每一次变革都不是为了"追新潮",而是为了解决当时面临的特定问题:
+
+| 年代  | 核心问题                 | 架构演进            |
+| ----- | ------------------------ | ------------------- |
+| 1990s | 如何把网站跑起来         | 物理服务器          |
+| 2000s | 代码越来越乱怎么维护     | 单体架构 + MVC      |
+| 2010s | 系统太大怎么扩展和协作   | 微服务 + 容器化     |
+| 2020s | 如何降低运维成本和复杂性 | Serverless + 云原生 |
+
+::: tip 📊 从表格中你能看到什么?
+让我们逐行解读这张表:
+
+**1990s → 2000s**:从"能跑就行"到"需要维护"。网站从静态页面变成动态应用,代码量激增,需要更好的组织方式。
+
+**2000s → 2010s**:从"单机"到"分布式"。用户量爆炸式增长,单台服务器扛不住了,需要拆分系统,水平扩展。
+
+**2010s → 2020s**:从"自己运维"到"云服务"。容器和微服务虽然强大,但运维成本太高,Serverless 让开发者只关注业务逻辑。
+
+**核心启示**:架构演进不是技术选型的游戏,而是**解决实际问题**的过程。每个阶段都有其适用的场景,没有"最好的架构",只有"最适合的架构"。
+:::
+
+**了解架构演进的意义在于:**
+
+1. **避免重复造轮子**:很多"新"概念其实早在几十年前就有雏形,了解历史能让你站在巨人的肩膀上
+2. **做出合理的技术选型**:没有最好的架构,只有最适合当前阶段的架构
+3. **理解技术背后的权衡**:每一次架构演进都是在**开发效率**、**系统性能**、**运维复杂度**之间做取舍
+4. **预判技术趋势**:历史总是押韵的,理解过去的演进规律有助于把握未来方向
 
 <EvolutionIntroDemo />
 
 ---
 
-## 0. 引言：为什么要了解架构演进？
+## 2. 物理服务器时代 (1990s)
 
-想象一下，你正在规划一次长途旅行。你可以选择骑自行车、开私家车、坐高铁，或者乘飞机。每种方式都有其适用的场景：自行车适合短距离且想锻炼身体的情况，飞机则适合跨越大陆的长途旅行。
+### 2.1 什么是物理服务器?
 
-**后端架构的选择也是如此。**
+在互联网刚起步时,后端就是一台放在机房里的**物理服务器**(一台真实的电脑)。
 
-从互联网诞生到现在，后端架构经历了多次重大变革。每一次变革都不是为了"追新潮"，而是为了解决当时面临的特定问题：
+::: tip 💡 通俗解释
+**物理服务器**就像你家里的台式机,但它:
 
-| 年代 | 核心问题 | 架构演进 |
-|------|---------|---------|
-| 1990s | 如何把网站跑起来 | 物理服务器 |
-| 2000s | 代码越来越乱怎么维护 | 单体架构 + MVC |
-| 2010s | 系统太大怎么扩展和协作 | 微服务 + 容器化 |
-| 2020s | 如何降低运维成本和复杂性 | Serverless + 云原生 |
+- 7×24小时不关机
+- 放在专门的数据中心(有空调、UPS电源、消防系统)
+- 有更快的网络带宽(企业级光纤)
+- 有固定的公网IP地址(全世界都能访问)
 
-**了解架构演进的意义在于：**
+这就好比你家 vs 餐厅:你家只是偶尔做饭,餐厅则是专业厨房,全天候营业,设备更专业。
+:::
 
-1. **避免重复造轮子**：很多"新"概念其实早在几十年前就有雏形，了解历史能让你站在巨人的肩膀上
-2. **做出合理的技术选型**：没有最好的架构，只有最适合当前阶段的架构
-3. **理解技术背后的权衡**：每一次架构演进都是在**开发效率**、**系统性能**、**运维复杂度**之间做取舍
-4. **预判技术趋势**：历史总是押韵的，理解过去的演进规律有助于把握未来方向
+### 2.2 核心特点
 
-<ArchitectureComparisonDemo />
+- **单机部署**:所有应用运行在一台物理机上
+- **手动运维**:需要人工上架、布线、安装系统
+- **垂直扩展**:性能不够时只能买更强的机器
 
----
+::: details 🔧 垂直扩展 vs 水平扩展
+**垂直扩展**(Scale Up):升级单台服务器的配置(更多CPU、更大内存、更快硬盘)。
 
-## 1. 物理服务器时代 (1990s)
+**水平扩展**(Scale Out):增加更多服务器,让它们一起工作。
 
-在互联网刚起步时，后端就是一台放在机房里的**物理服务器**（一台真实的电脑）。
+**比喻**:
+
+- 垂直扩展:把小餐厅改成大餐厅,装修更豪华,但只有一个厨师
+- 水平扩展:开连锁店,每个店规模不大,但有100家分店
+
+**优缺点**:
+
+- 垂直扩展简单,但有上限(顶级服务器很贵,且有限制)
+- 水平扩展理论上无限,但需要解决数据一致性问题
+  :::
+
+### 2.3 痛点
+
+- **慢**:每次改代码都要手动上传,然后重启服务器
+- **贵**:扩容只能买更大的机器(垂直扩展)
+- **难扩展**:一台机器顶住所有请求,CPU满载时就只能排队
 
 <PhysicalServerDemo />
 
-### 1.1 核心特点
+### 2.4 物理服务器时代的优缺点
 
-- **单机部署**：所有应用运行在一台物理机上
-- **手动运维**：需要人工上架、布线、安装系统
-- **垂直扩展**：性能不够时只能买更强的机器
+| 维度         | 评价                                                         |
+| ------------ | ------------------------------------------------------------ |
+| **优点**     | 完全掌控硬件,性能可预测;没有虚拟化开销;数据物理隔离,安全性高 |
+| **缺点**     | 采购周期长(数周);前期投入大(CapEx);资源利用率低;扩容困难     |
+| **适用场景** | 金融核心系统、政府涉密系统、对数据主权有严格要求的场景       |
 
-### 1.2 痛点
+::: tip 💡 CapEx vs OpEx
+**CapEx**(Capital Expenditure):资本性支出,一次性投入大量资金购买硬件。
 
-- **慢**：每次改代码都要手动上传，然后重启服务器
-- **贵**：扩容只能买更大的机器（垂直扩展）
-- **难扩展**：一台机器顶住所有请求，CPU 满载时就只能排队
+**OpEx**(Operating Expenditure):运营性支出,按使用量付费(如云服务器)。
 
-### 1.3 扩展策略
+**比喻**:
 
-<ScalingStrategyDemo />
+- CapEx:买房,一次性付几百万,之后每月只需交物业费
+- OpEx:租房,每月交房租,不用一次性掏大钱
 
-### 1.4 物理服务器时代的优缺点
-
-| 维度 | 评价 |
-|------|------|
-| **优点** | 完全掌控硬件，性能可预测；没有虚拟化开销；数据物理隔离，安全性高 |
-| **缺点** | 采购周期长（数周）；前期投入大（CapEx）；资源利用率低；扩容困难 |
-| **适用场景** | 金融核心系统、政府涉密系统、对数据主权有严格要求的场景 |
+**云时代**的启示:Serverless 和云服务让更多公司从 CapEx 转向 OpEx,降低创业门槛。
+:::
 
 ---
 
-## 2. 单体架构时代 (2000s)
+## 3. 单体架构时代 (2000s)
 
-随着框架的出现（Rails / Django / Spring），大家把所有功能都塞进一个应用里。
+### 3.1 什么是单体架构?
+
+随着框架的出现(Rails / Django / Spring),大家把所有功能都塞进一个应用里。
+
+::: tip 💡 通俗解释
+**单体架构**(Monolith)就像一个超级商场:
+
+- 服装区、食品区、电器区都在同一栋楼里
+- 所有员工在一个管理系统里工作
+- 如果整栋楼停电,所有区域都停止营业
+
+对比微服务就像商业街:每家店独立运营,一家店关门不影响其他店。
+:::
 
 <MonolithDemo />
 
-### 2.1 核心特点
+### 3.2 核心特点
 
-- **单一代码库**：所有功能模块在同一个项目中
-- **共享数据库**：所有模块共用同一个数据库
-- **统一部署**：整个应用作为一个整体打包部署
+- **单一代码库**:所有功能模块在同一个项目中
+- **共享数据库**:所有模块共用同一个数据库
+- **统一部署**:整个应用作为一个整体打包部署
 
-### 2.2 优点
+### 3.3 优点
 
-- **开发简单**：一个项目搞定所有功能
-- **部署方便**：把一个大包扔到服务器上就行
-- **调试容易**：本地启动就能调试所有功能
+- **开发简单**:一个项目搞定所有功能
+- **部署方便**:把一个大包扔到服务器上就行
+- **调试容易**:本地启动就能调试所有功能
 
-### 2.3 痛点：雪崩效应
+### 3.4 痛点:雪崩效应
 
-想象一下，如果"切菜"的师傅不小心切到了手（代码出了 Bug），整个后厨都要停下来处理伤口，导致所有客人都吃不上饭。
+想象一下,如果"切菜"的师傅不小心切到了手(代码出了Bug),整个后厨都要停下来处理伤口,导致所有客人都吃不上饭。
 
-这就是单体架构最大的风险：**隔离性差**。
+这就是单体架构最大的风险:**隔离性差**。
 
-### 2.4 单体架构的优缺点与适用场景
+::: details 🚨 真实的雪崩案例
+某电商公司双十一大促:
 
-| 维度 | 评价 |
-|------|------|
-| **优点** | 开发简单，无需考虑分布式复杂性；调试方便，本地启动即可调试全功能；部署简单，一个包即可运行；事务管理容易，单机数据库即可保证 ACID |
-| **缺点** | 代码耦合度高，随着业务增长代码膨胀；技术栈单一，难以局部升级；扩展困难，只能整体扩容；故障隔离差，一个模块故障影响全局；团队协作效率低，多人改同一套代码 |
-| **适用场景** | 初创公司 MVP 验证、小型团队（<10人）、业务相对简单、对交付速度要求高于扩展性的场景 |
-| **不适用场景** | 大型团队并行开发、需要频繁发布不同模块、某些模块需要独立扩容的场景 |
+- 订单服务因为某个商品的价格计算错误,抛出异常
+- 异常没有被正确捕获,导致线程池耗尽
+- 所有后续请求(包括商品浏览、搜索、用户登录)都被阻塞
+- 整个网站彻底瘫痪,持续1小时
 
-### 2.5 部署流程演进
+**如果用微服务**:
 
-<DeploymentFlowDemo />
+- 订单服务挂了,但商品浏览、搜索、用户登录仍然可用
+- 用户至少可以继续浏览商品,损失降到最低
+  :::
 
-### 2.6 单体架构的技术栈
+### 3.5 单体架构的优缺点与适用场景
 
-在单体架构时代，开发者通常使用以下技术栈：
+| 维度           | 评价                                                                                                                                            |
+| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| **优点**       | 开发简单,无需考虑分布式复杂性;调试方便,本地启动即可调试全功能;部署简单,一个包即可运行;事务管理容易,单机数据库即可保证ACID                       |
+| **缺点**       | 代码耦合度高,随着业务增长代码膨胀;技术栈单一,难以局部升级;扩展困难,只能整体扩容;故障隔离差,一个模块故障影响全局;团队协作效率低,多人改同一套代码 |
+| **适用场景**   | 初创公司MVP验证、小型团队(<10人)、业务相对简单、对交付速度要求高于扩展性的场景                                                                  |
+| **不适用场景** | 大型团队并行开发、需要频繁发布不同模块、某些模块需要独立扩容的场景                                                                              |
 
-| 语言/框架 | 特点 | 代表企业 |
-|---------|------|---------|
-| **Java + Spring** | 企业级开发首选，生态完善 | 阿里巴巴、京东 |
-| **PHP + Laravel/ThinkPHP** | 快速开发，适合中小型项目 | 早期 Facebook、微博 |
-| **Python + Django/Flask** | 开发效率高，适合快速原型 | Instagram、Pinterest |
-| **Ruby on Rails** | 约定优于配置，初创公司最爱 | GitHub、Twitter（早期） |
-| **Node.js + Express** | 前后端统一语言，I/O 密集型场景 | Netflix、Uber |
+::: tip 🎯 初学者建议
+如果你正在学习后端开发,**强烈建议从单体架构开始**:
+
+1. **先学会走路**:理解HTTP、数据库、基本的MVC架构
+2. **再考虑跑步**:当项目真的遇到扩展性问题,再考虑微服务
+3. **避免过度设计**:很多公司的"微服务"其实是"分布式单体",更难维护
+
+**学习路径**:
+
+- 阶段1:用 Spring Boot / Django / Rails 写一个完整的单体应用
+- 阶段2:遇到性能瓶颈时,尝试拆分出1-2个服务
+- 阶段3:当团队规模>50人,系统真的复杂了,再全面微服务化
+  :::
+
+### 3.6 单体架构的技术栈
+
+| 语言/框架                  | 特点                         | 代表企业              |
+| -------------------------- | ---------------------------- | --------------------- |
+| **Java + Spring**          | 企业级开发首选,生态完善      | 阿里巴巴、京东        |
+| **PHP + Laravel/ThinkPHP** | 快速开发,适合中小型项目      | 早期 Facebook、微博   |
+| **Python + Django/Flask**  | 开发效率高,适合快速原型      | Instagram、Pinterest  |
+| **Ruby on Rails**          | 约定优于配置,初创公司最爱    | GitHub、Twitter(早期) |
+| **Node.js + Express**      | 前后端统一语言,I/O密集型场景 | Netflix、Uber         |
 
 ---
 
-## 3. 容器化与微服务 (2010s)
+## 4. 容器化与微服务 (2010s)
 
-### 3.1 Docker 容器化
+### 4.1 为什么需要微服务?
+
+单体架构的痛点在2010年代集中爆发:
+
+- **代码太庞大**:一个项目几百万行代码,新人入职要花一个月才能看懂
+- **部署太慢**:构建一次要30分钟,发布一次要小心翼翼
+- **协作太难**:100个开发者改同一个项目,代码冲突每天发生
+- **扩展太贵**:只需要扩展"聊天服务",却要复制整个应用
+
+**微服务的核心思想**:把大应用拆成多个小服务,每个服务:
+
+- 独立开发、独立部署
+- 有自己的数据库
+- 通过API通信
 
 <ContainerDockerDemo />
 
-Docker 就像是**集装箱**，它把每个小服务连同它的锅碗瓢盆（依赖库）一起打包。
+::: tip 💡 Docker是什么?
+**Docker**就像是"集装箱":
 
-无论运到哪里（哪台服务器），打开集装箱就能直接开工，不用再重新安装环境。
+- 每个集装箱里有独立的货物(代码 + 依赖库 + 运行环境)
+- 无论运到哪里(哪台服务器),打开集装箱就能直接开工
+- 不用担心"我这台机器没有Python 3.9"、"那个机器缺少某个库"
 
-### 3.2 技术栈时间线
+**比喻**:
+
+- 没有 Docker:每次搬家,要把家具、电器、衣服一件件搬上卡车,到了新家再一件件摆好
+- 有 Docker:所有东西打包进集装箱,卡车直接运走,到了新家放下就能用
+
+**核心价值**:"一次构建,到处运行"。
+:::
+
+### 4.2 技术栈时间线
 
 <TechStackTimelineDemo />
 
-### 3.3 微服务架构
+### 4.3 微服务架构
 
-<MicroservicesDemo />
-
-为了解决单体的问题，我们把大厨房拆成了很多个小厨房（服务）：
+为了解决单体的问题,我们把大厨房拆成了很多个小厨房(服务):
 
 - 专门负责用户的服务
 - 专门负责订单的服务
 - 专门负责支付的服务
 
-### 3.4 Kubernetes 编排
+<MicroservicesDemo />
+
+### 4.4 Kubernetes 编排
+
+当集装箱数量到达成百上千,就需要一个"港口调度系统":
+
+- **Kubernetes (K8s)**:负责把容器安排到合适的机器上(调度、扩缩容、滚动更新)
+- **Service Mesh**:负责服务之间的交通规则(熔断、限流、重试、可观测)
 
 <KubernetesDemo />
 
-当集装箱数量到达成百上千，就需要一个"港口调度系统"：
+::: tip 💡 什么是"编排"?
+**编排**(Orchestration)是指自动管理大量容器的系统。
 
-- **Kubernetes (K8s)**：负责把容器安排到合适的机器上（调度、扩缩容、滚动更新）
-- **Service Mesh**：负责服务之间的交通规则（熔断、限流、重试、可观测）
+**比喻**:
 
-**关键点**：微服务不是"拆开就好"，真正的难点在于**治理和运维**。
+- 没有 K8s:你手动管理100个容器,哪个挂了要手动重启,哪个流量大了要手动加机器
+- 有 K8s:你告诉它"我要这个服务一直有10个实例运行",它会自动完成:
+  - 哪台服务器资源充足,就把容器调度到那里
+  - 容器挂了,自动重启
+  - 流量大了,自动扩容到20个实例
+  - 更新代码时,滚动更新(先停1个旧实例,启动1个新实例,逐个替换)
 
-### 3.5 微服务与容器化的优缺点
+**关键点**:微服务不是"拆开就好",真正的难点在于**治理和运维**。
+:::
 
-| 维度 | 评价 |
-|------|------|
-| **优点** | 服务独立部署，技术栈可异构；故障隔离，单个服务崩溃不影响全局；按需扩展，热点服务单独扩容；团队协作友好，不同团队负责不同服务；代码库更小，易于理解和维护 |
-| **缺点** | 分布式复杂性高（网络延迟、分布式事务、服务发现）；运维成本高，需要专业的 DevOps 团队；调试困难，问题可能需要跨多个服务追踪；数据一致性难以保证；部署和监控基础设施要求复杂 |
-| **适用场景** | 大型团队（>50人）、业务复杂需要分模块独立演进、某些模块需要独立扩容、需要多语言技术栈、对可用性要求高的系统 |
-| **不适用场景** | 小型团队、业务简单、流量小且稳定、没有专业运维团队的情况 |
+### 4.5 微服务与容器化的优缺点
 
-### 3.6 微服务技术栈
+| 维度           | 评价                                                                                                                                                             |
+| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **优点**       | 服务独立部署,技术栈可异构;故障隔离,单个服务崩溃不影响全局;按需扩展,热点服务单独扩容;团队协作友好,不同团队负责不同服务;代码库更小,易于理解和维护                  |
+| **缺点**       | 分布式复杂性高(网络延迟、分布式事务、服务发现);运维成本高,需要专业的DevOps团队;调试困难,问题可能需要跨多个服务追踪;数据一致性难以保证;部署和监控基础设施要求复杂 |
+| **适用场景**   | 大型团队(>50人)、业务复杂需要分模块独立演进、某些模块需要独立扩容、需要多语言技术栈、对可用性要求高的系统                                                        |
+| **不适用场景** | 小型团队、业务简单、流量小且稳定、没有专业运维团队的情况                                                                                                         |
 
-| 类别 | 技术/工具 | 作用 |
-|------|---------|------|
-| **容器化** | Docker, containerd | 应用打包与隔离 |
-| **编排调度** | Kubernetes, Docker Swarm | 容器管理与自动扩缩容 |
-| **服务发现** | Consul, etcd, ZooKeeper | 服务注册与发现 |
-| **API 网关** | Kong, Zuul, Envoy | 统一入口、路由、限流 |
-| **配置中心** | Apollo, Nacos, Spring Cloud Config | 集中配置管理 |
-| **监控告警** | Prometheus, Grafana, ELK | 指标监控与日志分析 |
-| **链路追踪** | Jaeger, Zipkin, SkyWalking | 分布式请求追踪 |
-| **服务网格** | Istio, Linkerd | 流量治理与安全 |
+::: details ⚠️ 微服务的陷阱
+**陷阱1:分布式单体**
+
+拆了10个微服务,但它们之间紧密耦合:
+
+- 服务A调用服务B,服务B调用服务C,服务C又调用服务A
+- 改一个功能,要同时改5个服务
+- 部署时,必须按顺序依次部署,否则系统报错
+
+**这比单体更糟糕**:你拥有了单体的复杂性,又没有享受到微服务的独立部署好处。
+
+**陷阱2:过度拆分**
+
+把只有100行代码的功能也拆成一个独立服务:
+
+- 10个服务,每个只有100行代码
+- 服务间通信的开销(网络序列化/反序列化)比实际业务逻辑还重
+- 运维成本爆炸:要部署、监控、日志收集10个服务
+
+**正确做法**:从功能内聚的角度拆分,一个微服务应该是一个完整的业务能力(如"订单服务",而不是"订单创建服务"、"订单查询服务")。
+:::
+
+### 4.6 微服务技术栈
+
+| 类别         | 技术/工具                          | 作用                 |
+| ------------ | ---------------------------------- | -------------------- |
+| **容器化**   | Docker, containerd                 | 应用打包与隔离       |
+| **编排调度** | Kubernetes, Docker Swarm           | 容器管理与自动扩缩容 |
+| **服务发现** | Consul, etcd, ZooKeeper            | 服务注册与发现       |
+| **API网关**  | Kong, Zuul, Envoy                  | 统一入口、路由、限流 |
+| **配置中心** | Apollo, Nacos, Spring Cloud Config | 集中配置管理         |
+| **监控告警** | Prometheus, Grafana, ELK           | 指标监控与日志分析   |
+| **链路追踪** | Jaeger, Zipkin, SkyWalking         | 分布式请求追踪       |
+| **服务网格** | Istio, Linkerd                     | 流量治理与安全       |
 
 ---
 
-## 4. Serverless 与云原生时代 (2020s+)
+## 5. Serverless 与云原生时代 (2020s+)
 
-微服务虽然好，但维护几十个小厨房还是很累。你需要担心：
+### 5.1 为什么需要 Serverless?
 
-- 厨房够不够大？（服务器扩容）
-- 停电了怎么办？（高可用）
-- 容器太多怎么管？（运维成本）
+微服务虽然好,但维护几十个小厨房还是很累。你需要担心:
+
+- 厨房够不够大?(服务器扩容)
+- 停电了怎么办?(高可用)
+- 容器太多怎么管?(运维成本)
 
 <ServerlessDemo />
 
-### 4.1 什么是 Serverless？
+::: tip 💡 Serverless 不是真的"没有服务器"
+**Serverless**的意思是"你不需要管理服务器",而不是真的没有服务器。
 
-Serverless 并不是"没有服务器"，而是**"你不需要管理服务器"**。
+**比喻**:
 
-就像你现在不想自己做饭，也不想开饭馆，而是直接叫**外卖**。
+- **物理服务器时代**:你买地、盖房、装修、雇厨师、买食材...全部自己来
+- **云服务器时代**:你租一个已经装修好的餐厅,但自己雇厨师、管理运营
+- **Serverless时代**:你只需要设计菜单,云端有共享厨房,有专业厨师,你下单他们做,按次付费
 
-- 你只需要写代码（下单）
-- 云厂商（美团）负责准备机器、运行代码、自动扩容
-- **按次付费**：代码跑了 100 毫秒，就收 100 毫秒的钱。没人访问就不收钱
+**核心变化**:
 
-### 4.2 适用场景
+- 以前:买服务器 → 配环境 → 部署代码 → 监控 → 扩容 → 维护
+- 现在:写代码 → 上传 → 按使用量付费
 
-Serverless 特别适合：
+**就像外卖**:你不需要厨房,只需要设计菜单,有人帮你做。
+:::
 
-- **潮汐流量**：比如外卖软件，中午流量大，半夜没人。Serverless 会自动在中午为你分配 1000 台机器，半夜缩减到 0 台
-- **事件驱动**：比如"用户上传图片后，自动压缩图片"
-- **快速验证**：小团队、MVP、黑客松项目
+### 5.2 什么是 Serverless?
 
-### 4.3 BaaS 组合拳
+**Serverless = FaaS + BaaS**
 
-Serverless 的真正力量来自于 **BaaS (Backend as a Service)**：
+**FaaS**(Function as a Service,函数即服务):
 
-- 登录 -> Auth0 / Supabase Auth
-- 支付 -> Stripe
-- 数据库 -> Supabase / Firebase / DynamoDB
-- 消息 -> Kafka / SQS
+- 你只写函数(如"用户注册时发送欢迎邮件")
+- 云厂商负责运行这个函数,自动扩缩容
+- 典型代表:AWS Lambda、阿里云函数计算
 
-**关键点**：Serverless 让后端越来越像"搭积木"。
+**BaaS**(Backend as a Service,后端即服务):
 
-### 4.4 Serverless 与云原生的优缺点
+- 登录 → Auth0 / Supabase Auth
+- 支付 → Stripe
+- 数据库 → Supabase / Firebase / DynamoDB
+- 消息 → Kafka / SQS
 
-| 维度 | 评价 |
-|------|------|
-| **优点** | 零运维成本，开发者只需关注业务代码；自动扩缩容，完美应对流量峰值；按需付费，无流量时成本接近零；快速上线，几分钟即可部署全球；高可用内置，云服务自动处理故障转移 |
-| **缺点** | 冷启动延迟（几百毫秒到数秒）；运行时长限制（通常5-15分钟）；调试困难，本地难以完全模拟云环境；供应商锁定风险；不适合长时间运行或计算密集型任务；成本在高频持续流量下可能反超传统方案 |
-| **适用场景** | 事件驱动处理（图片处理、消息通知）；潮汐流量应用（活动页、促销）；快速原型验证和MVP；低频API或后台任务；无专职运维团队的小团队 |
-| **不适用场景** | 需要持续低延迟的应用；长时间计算任务；对冷启动敏感的场景（高频交易）；需要精细控制底层基础设施的场景 |
+::: tip 🎯 Serverless 适用场景
+**最佳场景**:
 
-### 4.5 Serverless 技术栈与平台
+1. **潮汐流量**:外卖软件,中午流量大,半夜没人。Serverless会自动在中午分配1000台机器,半夜缩减到0台
+2. **事件驱动**:"用户上传图片后,自动压缩图片"
+3. **快速验证**:小团队、MVP、黑客松项目
 
-| 类别 | 技术/平台 | 特点 |
-|------|---------|------|
-| **FaaS 平台** | AWS Lambda | 最早的 FaaS 服务，生态最成熟 |
-| | Azure Functions | 微软云集成度高，.NET 友好 |
-| | Google Cloud Functions | 与 GCP 服务深度集成 |
-| | 阿里云函数计算 | 国内生态完善，冷启动优化好 |
-| | 腾讯云云函数 | 与微信生态整合 |
-| | Vercel/Netlify Functions | 前端开发者友好，边缘部署 |
-| **BaaS 服务** | Firebase | Google 的移动端后端方案 |
-| | Supabase | PostgreSQL 的 Firebase 开源替代 |
-| | AWS Amplify | AWS 的移动和 Web 应用开发平台 |
-| **部署工具** | Serverless Framework | 多云部署，社区活跃 |
-| | Terraform | 基础设施即代码 |
-| | Pulumi | 用编程语言定义基础设施 |
+**不适合场景**:
+
+1. **长时间运行的任务**:视频转码(可能跑1小时,函数最大执行时间通常只有15分钟)
+2. **需要低延迟的应用**:高频交易(冷启动延迟可能几十毫秒到几秒)
+3. **需要精细控制底层**:操作系统内核调优、GPU直接访问
+   :::
+
+### 5.3 Serverless 与云原生的优缺点
+
+| 维度           | 评价                                                                                                                                                                       |
+| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **优点**       | 零运维成本,开发者只需关注业务代码;自动扩缩容,完美应对流量峰值;按需付费,无流量时成本接近零;快速上线,几分钟即可部署全球;高可用内置,云服务自动处理故障转移                    |
+| **缺点**       | 冷启动延迟(几百毫秒到数秒);运行时长限制(通常5-15分钟);调试困难,本地难以完全模拟云环境;供应商锁定风险;不适合长时间运行或计算密集型任务;成本在高频持续流量下可能反超传统方案 |
+| **适用场景**   | 事件驱动处理(图片处理、消息通知);潮汐流量应用(活动页、促销);快速原型验证和MVP;低频API或后台任务;无专职运维团队的小团队                                                     |
+| **不适用场景** | 需要持续低延迟的应用;长时间计算任务;对冷启动敏感的场景(高频交易);需要精细控制底层基础设施的场景                                                                            |
+
+::: details 💰 成本对比:何时Serverless更贵?
+**场景1:低频访问**
+
+- 传统服务器:每月$20(不管有没有人访问)
+- Serverless:100万次请求 × $0.0002/次 = $20(仅在有流量时付费)
+- **结论**:低频场景,Serverless更省钱
+
+**场景2:高频持续访问**
+
+- 传统服务器:每月$20
+- Serverless:1亿次请求 × $0.0002/次 = $20,000
+- **结论**:高频持续场景,传统服务器更省钱
+
+**场景3:潮汐流量**
+
+- 传统服务器:为了应对峰值,需要$100/月的服务器(平时资源利用率只有10%)
+- Serverless:峰值时$20,平时几乎$0
+- **结论**:潮汐流量场景,Serverless节省成本
+
+**启示**:不要盲目上Serverless,要根据实际流量特征做成本测算。
+:::
+
+### 5.4 Serverless 技术栈与平台
+
+| 类别         | 技术/平台                | 特点                         |
+| ------------ | ------------------------ | ---------------------------- |
+| **FaaS平台** | AWS Lambda               | 最早的FaaS服务,生态最成熟    |
+|              | Azure Functions          | 微软云集成度高,.NET友好      |
+|              | Google Cloud Functions   | 与GCP服务深度集成            |
+|              | 阿里云函数计算           | 国内生态完善,冷启动优化好    |
+|              | 腾讯云云函数             | 与微信生态整合               |
+|              | Vercel/Netlify Functions | 前端开发者友好,边缘部署      |
+| **BaaS服务** | Firebase                 | Google的移动端后端方案       |
+|              | Supabase                 | PostgreSQL的Firebase开源替代 |
+|              | AWS Amplify              | AWS的移动和Web应用开发平台   |
+| **部署工具** | Serverless Framework     | 多云部署,社区活跃            |
+|              | Terraform                | 基础设施即代码               |
+|              | Pulumi                   | 用编程语言定义基础设施       |
 
 ---
 
-## 5. 各架构阶段对比与选型指南
+## 6. 各架构阶段对比与选型指南
 
-### 5.1 架构演进全景对比
+### 6.1 架构演进全景对比
 
-| 维度 | 物理服务器 | 单体架构 | 微服务+容器 | Serverless |
-|------|-----------|---------|------------|-------------|
-| **团队规模** | 1-5人 | 5-50人 | 50-500人 | 1-20人 |
-| **部署复杂度** | 极高 | 低 | 极高 | 极低 |
-| **运维成本** | 高 | 中 | 很高 | 低 |
-| **扩展性** | 差 | 垂直扩展有限 | 水平扩展优秀 | 自动扩展 |
-| **技术栈灵活性** | 无 | 单一 | 多样化 | 受限 |
-| **冷启动** | 无 | 无 | 容器启动时间 | 有延迟 |
-| **适用场景** | 遗留系统、特殊合规要求 | 初创公司、业务简单 | 大型互联网公司、复杂业务 | 快速验证、事件驱动 |
+<ArchitectureComparisonDemo />
 
-### 5.2 技术选型决策树
+| 维度             | 物理服务器             | 单体架构           | 微服务+容器              | Serverless         |
+| ---------------- | ---------------------- | ------------------ | ------------------------ | ------------------ |
+| **团队规模**     | 1-5人                  | 5-50人             | 50-500人                 | 1-20人             |
+| **部署复杂度**   | 极高                   | 低                 | 极高                     | 极低               |
+| **运维成本**     | 高                     | 中                 | 很高                     | 低                 |
+| **扩展性**       | 差                     | 垂直扩展有限       | 水平扩展优秀             | 自动扩展           |
+| **技术栈灵活性** | 无                     | 单一               | 多样化                   | 受限               |
+| **冷启动**       | 无                     | 无                 | 容器启动时间             | 有延迟             |
+| **适用场景**     | 遗留系统、特殊合规要求 | 初创公司、业务简单 | 大型互联网公司、复杂业务 | 快速验证、事件驱动 |
+
+### 6.2 技术选型决策树
 
 ```
 开始选型
     │
-    ├─ 团队有专业运维人员？
+    ├─ 团队有专业运维人员?
     │   ├─ 是 → 考虑微服务或物理机
     │   └─ 否 → 继续判断
     │
-    ├─ 需要快速上线验证想法？
+    ├─ 需要快速上线验证想法?
     │   ├─ 是 → Serverless 或单体
     │   └─ 否 → 继续判断
     │
-    ├─ 团队规模 > 50人？
+    ├─ 团队规模 > 50人?
     │   ├─ 是 → 考虑微服务
     │   └─ 否 → 继续判断
     │
-    ├─ 流量有明显峰谷特征？
+    ├─ 流量有明显峰谷特征?
     │   ├─ 是 → Serverless
-    │   └─ 否 → 单体架构（推荐初创）
+    │   └─ 否 → 单体架构(推荐初创)
     │
-    └─ 特殊要求（合规、遗留系统）？
+    └─ 特殊要求(合规、遗留系统)?
         └─ 是 → 物理服务器
 ```
 
-### 5.3 不同场景下的推荐架构
+::: tip 🎯 初学者选型建议
+**如果你是个开发者或小团队:**
 
-#### 场景一：独立开发者/兼职项目
-- **推荐架构**：Serverless (Vercel/Netlify) 或 单体应用
-- **理由**：几乎零运维成本，按需付费，快速上线
-- **示例技术栈**：Next.js + Vercel + Supabase
+1. **阶段0 (学习)**:本地跑单体应用,理解HTTP、数据库、基本架构
+2. **阶段1 (MVP)**:部署单体应用到云服务器(如阿里云ECS、AWS EC2)
+3. **阶段2 (增长)**:当团队>10人、业务变复杂,考虑拆分出1-2个微服务
+4. **阶段3 (成熟)**:当团队>50人、流量百万级,全面微服务化
 
-#### 场景二：初创公司 MVP 验证
-- **推荐架构**：单体架构 + 云服务器
-- **理由**：开发速度快，团队可以专注于业务逻辑而非基础设施
-- **示例技术栈**：Spring Boot / Django / Rails + RDS + ECS
+**关键原则**:不要一开始就上微服务,那是"过早优化"。让架构随业务成长而演进。
+:::
 
-#### 场景三：成长型公司（10-50人团队）
-- **推荐架构**：模块化单体 或 轻量级微服务
-- **理由**：开始面临代码耦合问题，但还不需要完整的微服务复杂度
-- **示例技术栈**：Spring Cloud / Go Micro + Kubernetes
+### 6.3 不同场景下的推荐架构
 
-#### 场景四：大型互联网公司
-- **推荐架构**：微服务 + 服务网格 + 中台架构
-- **理由**：团队规模大，业务复杂，需要独立的发布节奏和技术栈
-- **示例技术栈**：自研 RPC 框架 + Istio + 自建 PaaS 平台
+#### 场景一:独立开发者/兼职项目
 
-#### 场景五：事件驱动/潮汐流量应用
-- **推荐架构**：Serverless + 事件总线
-- **理由**：流量波动大，需要极致的成本优化和自动扩缩容
-- **示例技术栈**：AWS Lambda + API Gateway + EventBridge
+- **推荐架构**:Serverless (Vercel/Netlify) 或 单体应用
+- **理由**:几乎零运维成本,按需付费,快速上线
+- **示例技术栈**:Next.js + Vercel + Supabase
+
+#### 场景二:初创公司MVP验证
+
+- **推荐架构**:单体架构 + 云服务器
+- **理由**:开发速度快,团队可以专注于业务逻辑而非基础设施
+- **示例技术栈**:Spring Boot / Django / Rails + RDS + ECS
+
+#### 场景三:成长型公司(10-50人团队)
+
+- **推荐架构**:模块化单体 或 轻量级微服务
+- **理由**:开始面临代码耦合问题,但还不需要完整的微服务复杂度
+- **示例技术栈**:Spring Cloud / Go Micro + Kubernetes
+
+#### 场景四:大型互联网公司
+
+- **推荐架构**:微服务 + 服务网格 + 中台架构
+- **理由**:团队规模大,业务复杂,需要独立的发布节奏和技术栈
+- **示例技术栈**:自研RPC框架 + Istio + 自建PaaS平台
+
+#### 场景五:事件驱动/潮汐流量应用
+
+- **推荐架构**:Serverless + 事件总线
+- **理由**:流量波动大,需要极致的成本优化和自动扩缩容
+- **示例技术栈**:AWS Lambda + API Gateway + EventBridge
 
 ---
 
-## 6. 总结与学习路线
+## 7. 总结与学习路线
 
-后端架构的演进，本质上是在做**加法**和**减法**：
+### 7.1 核心要点
 
-| 时代 | 架构 | 开发者要做的事 | 运维要做的事 |
-| :--- | :----- | :--------------- | :-------------------- |
-| **物理时代** | 单机 | 写脚本、手动部署 | 维护机房与硬件 |
-| **单体时代** | 一整块 | 写所有业务逻辑 | 维护几台大服务器 |
-| **微服务时代** | 拆分 | 关注单一业务 | 维护 K8s 集群 (很累!) |
-| **Serverless** | 函数 | 只写核心函数 | 喝茶 (云厂商全包了) |
+后端架构的演进,本质上是在做**加法**和**减法**:
 
-**下一步建议**：
+| 时代           | 架构   | 开发者要做的事   | 运维要做的事       |
+| :------------- | :----- | :--------------- | :----------------- |
+| **物理时代**   | 单机   | 写脚本、手动部署 | 维护机房与硬件     |
+| **单体时代**   | 一整块 | 写所有业务逻辑   | 维护几台大服务器   |
+| **微服务时代** | 拆分   | 关注单一业务     | 维护K8s集群(很累!) |
+| **Serverless** | 函数   | 只写核心函数     | 喝茶(云厂商全包了) |
 
-- 想打基础：学会 HTTP、数据库、缓存、消息队列
-- 想上手实践：用 Docker 跑一个小项目，再部署到云端
-- 想更专业：了解 K8s、监控体系、CI/CD 流水线
+**关键洞察**:
 
-未来的后端开发，将越来越像"搭积木"——你只需要关注**业务逻辑**，底层的脏活累活，全部交给云。
+- 架构演进不是"新技术取代旧技术",而是**适用场景的变化**
+- 没有银弹,每个架构都有其适用的边界
+- 选择架构要考虑:团队规模、业务复杂度、流量特征、运维能力
 
-### 6.2 学习路线建议
+### 7.2 学习路线建议
 
-根据你的职业阶段，推荐以下学习路径：
+根据你的职业阶段,推荐以下学习路径:
 
-#### 阶段一：打好基础（0-1年）
-**目标**：理解后端核心概念，能独立开发单体应用
+#### 阶段一:打好基础(0-1年)
 
-- 掌握一门后端语言（Java/Python/Go 任选其一）
-- 学习 HTTP 协议和 RESTful API 设计
-- 掌握关系型数据库（MySQL/PostgreSQL）
-- 了解缓存基础（Redis）
-- 学习 Git 和基础 Linux 命令
-- **实践项目**：用单体架构完成一个 CRUD 应用（如博客系统、待办事项）
+**目标**:理解后端核心概念,能独立开发单体应用
 
-#### 阶段二：扩展能力（1-3年）
-**目标**：理解分布式系统，能参与微服务开发
+- 掌握一门后端语言(Java/Python/Go任选其一)
+- 学习HTTP协议和RESTful API设计
+- 掌握关系型数据库(MySQL/PostgreSQL)
+- 了解缓存基础(Redis)
+- 学习Git和基础Linux命令
+- **实践项目**:用单体架构完成一个CRUD应用(如博客系统、待办事项)
+
+#### 阶段二:扩展能力(1-3年)
+
+**目标**:理解分布式系统,能参与微服务开发
 
 - 深入学习微服务架构和拆分策略
-- 掌握 Docker 和 Kubernetes 基础
-- 学习消息队列（Kafka/RabbitMQ）
+- 掌握Docker和Kubernetes基础
+- 学习消息队列(Kafka/RabbitMQ)
 - 了解分布式事务和一致性
-- 掌握监控和日志（Prometheus/ELK）
-- **实践项目**：将单体应用拆分为 3-5 个微服务，使用 Docker 部署
+- 掌握监控和日志(Prometheus/ELK)
+- **实践项目**:将单体应用拆分为3-5个微服务,使用Docker部署
 
-#### 阶段三：专业深化（3-5年）
-**目标**：能设计大型系统，具备技术选型能力
+#### 阶段三:专业深化(3-5年)
 
-- 深入理解云原生架构（Service Mesh、Serverless）
+**目标**:能设计大型系统,具备技术选型能力
+
+- 深入理解云原生架构(Service Mesh、Serverless)
 - 掌握容量规划和性能调优
 - 了解多活架构和灾备设计
-- 学习 DDD（领域驱动设计）
+- 学习DDD(领域驱动设计)
 - 培养技术判断力和架构思维
-- **实践项目**：设计一个支持百万级用户的系统架构，包含高可用、弹性伸缩等方案
+- **实践项目**:设计一个支持百万级用户的系统架构,包含高可用、弹性伸缩等方案
 
-#### 持续学习资源推荐
+### 7.3 持续学习资源推荐
 
-**书籍**
-- 《设计数据密集型应用》（DDIA）- 分布式系统必读
+**书籍**:
+
+- 《设计数据密集型应用》(DDIA)- 分布式系统必读
 - 《云原生模式》
 - 《微服务设计》
 - 《领域驱动设计》
 
-**在线资源**
+**在线资源**:
+
 - AWS/Azure/阿里云官方架构文档
-- CNCF（云原生计算基金会）项目文档
-- 各大公司技术博客（Netflix Tech Blog、阿里技术公众号等）
-
-### 6.3 架构选型的核心原则
-
-记住以下原则，帮助你在实际工作中做出正确的选择：
-
-1. **没有银弹**：不存在最好的架构，只有最适合当前场景的架构
-2. **演进优于完美**：先让系统跑起来，再逐步优化，不要过度设计
-3. **团队能力优先**：选择团队熟悉和能驾驭的技术，而不是最新最酷的技术
-4. **成本意识**：计算总体拥有成本（TCO），包括开发、运维、培训等
-5. **可回退性**：设计时考虑回退方案，微服务可以合并回单体，但很难拆分
+- CNCF(云原生计算基金会)项目文档
+- 各大公司技术博客(Netflix Tech Blog、阿里技术公众号等)
 
 ---
 
-## 7. 名词速查表 (Glossary)
+## 8. 名词速查表(Glossary)
 
-| 名词 | 全称 | 解释 |
-| :---------------- | :-------------------------------- | :--------------------------------------------------- |
-| **Backend** | - | 服务器端系统，负责处理业务逻辑、数据存储和对外接口 |
-| **CGI** | Common Gateway Interface | 早期动态网页技术，通过脚本处理请求并返回结果 |
-| **Monolith** | - | 单体架构，把所有业务逻辑打包在同一个应用中 |
-| **Microservices** | - | 微服务架构，把业务拆分成多个独立服务 |
-| **Container** | - | 容器化技术，把应用和依赖打包成可移植单元 |
-| **K8s** | Kubernetes | 容器编排平台，用于调度、扩缩容和治理容器 |
-| **Service Mesh** | - | 服务网格，负责微服务间通信治理、观测与安全 |
-| **Serverless** | - | 无服务计算，开发者只写函数，平台自动运行与扩缩容 |
-| **BaaS** | Backend as a Service | 即插即用的后端云服务（认证、数据库、支付等） |
-| **CI/CD** | Continuous Integration / Delivery | 持续集成与持续交付，自动化测试与部署流程 |
-| **Observability** | - | 可观测性，利用日志/指标/追踪理解系统运行状态 |
+| 名词              | 全称                              | 解释                                              |
+| :---------------- | :-------------------------------- | :------------------------------------------------ |
+| **Backend**       | -                                 | 服务器端系统,负责处理业务逻辑、数据存储和对外接口 |
+| **CGI**           | Common Gateway Interface          | 早期动态网页技术,通过脚本处理请求并返回结果       |
+| **Monolith**      | -                                 | 单体架构,把所有业务逻辑打包在同一个应用中         |
+| **Microservices** | -                                 | 微服务架构,把业务拆分成多个独立服务               |
+| **Container**     | -                                 | 容器化技术,把应用和依赖打包成可移植单元           |
+| **K8s**           | Kubernetes                        | 容器编排平台,用于调度、扩缩容和治理容器           |
+| **Service Mesh**  | -                                 | 服务网格,负责微服务间通信治理、观测与安全         |
+| **Serverless**    | -                                 | 无服务计算,开发者只写函数,平台自动运行与扩缩容    |
+| **BaaS**          | Backend as a Service              | 即插即用的后端云服务(认证、数据库、支付等)        |
+| **CI/CD**         | Continuous Integration / Delivery | 持续集成与持续交付,自动化测试与部署流程           |
+| **Observability** | -                                 | 可观测性,利用日志/指标/追踪理解系统运行状态       |
diff --git a/docs/zh-cn/appendix/backend-layered-architecture.md b/docs/zh-cn/appendix/backend-layered-architecture.md
index c25642f..dbaa9bb 100644
--- a/docs/zh-cn/appendix/backend-layered-architecture.md
+++ b/docs/zh-cn/appendix/backend-layered-architecture.md
@@ -1,229 +1,135 @@
-# 后端分层架构：Controller / Service / Repository / Domain
+# 后端分层架构:Controller / Service / Repository / Domain
 
-> 💡 **学习指南**：分层架构就像组织一家餐厅——每个人都有明确的职责，前厅接待（Controller）、厨师做菜（Service）、仓管取货（Repository）、菜谱标准（Domain）。本文将带你从零理解后端代码的"层"到底是怎么回事，以及为什么要这样分层。
-
-在开始之前，建议你先有简单的后端开发经验，至少写过几个接口，踩过一些坑。
+::: tip 🎯 核心问题
+**代码越写越乱,怎么组织才能清晰易懂?** 这就像问:你是把所有食材、厨具、调料都扔在一个抽屉里,还是用橱柜、冰箱、抽屉分类摆放?分层架构就是让代码"物归其位"的方法。
+:::
 
 ---
 
-## 0. 引言：为什么代码越写越乱？
+## 1. 为什么要分层?
+
+### 1.1 从混乱到整洁
+
+很多初学者在刚开始写后端代码时,都会遇到这样的困惑:
+
+- **刚开始**:写一个用户注册接口,100行代码搞定,感觉挺简单
+- **三个月后**:业务越来越复杂,一个文件500行,改一行代码怕影响其他地方
+- **半年后**:来了新同事,看着代码发愁:"这个接口到底干了多少事?"
+
+**问题的本质**:代码没有"章法",所有的逻辑都堆在一起,就像把食材、厨具、调料都扔在一个抽屉里。
 
 <LayeredArchitectureDemo />
 
-很多初学者在刚开始写后端代码时，都会遇到这样的困惑：
+### 1.2 分层的思想:把抽屉换成橱柜
 
-- **刚开始**：写一个用户注册接口，100 行代码搞定，感觉挺简单
-- **三个月后**：业务越来越复杂，一个文件 500 行，改一行代码怕影响其他地方
-- **半年后**：来了新同事，看着代码发愁："这个接口到底干了多少事？"
+想象一下厨房的组织方式:
 
-**问题的本质**：代码没有"章法"，所有的逻辑都堆在一起，就像把食材、厨具、调料都扔在一个抽屉里。
-
-### 分层的思想：把抽屉换成橱柜
-
-想象一下厨房的组织方式：
-
-| 区域 | 存放物品 | 特点 |
-|------|---------|------|
+| 区域     | 存放物品           | 特点         |
+| -------- | ------------------ | ------------ |
 | **吊柜** | 不常用的锅具、囤货 | 取用最不方便 |
-| **台面** | 正在处理的食材 | 临时操作区 |
-| **抽屉** | 分类摆放的餐具 | 按需取用 |
-| **冰箱** | 生鲜食材 | 有保鲜条件 |
+| **台面** | 正在处理的食材     | 临时操作区   |
+| **抽屉** | 分类摆放的餐具     | 按需取用     |
+| **冰箱** | 生鲜食材           | 有保鲜条件   |
 
-**分层架构**就是把代码也这样组织：每一层只关心自己的职责，层与层之间通过明确的"接口"交互，而不是随意互相调用。
+**分层架构**就是把代码也这样组织:每一层只关心自己的职责,层与层之间通过明确的"接口"交互,而不是随意互相调用。
+
+::: tip 💡 通俗比喻:餐厅的分工
+把后端系统想象成一家餐厅:
+
+- **Controller(控制器)** = 前厅接待员:迎接客人、接单、上菜
+- **Service(业务逻辑)** = 厨师:按照菜谱做菜,协调各个帮厨
+- **Repository(数据访问)** = 仓管员:从仓库取食材、存放剩余食材
+- **Domain(领域模型)** = 菜谱标准:定义宫保鸡丁是什么、用什么食材、什么口味
+
+**关键点**:每个角色只做自己的事,不会越界。接待员不会自己跑进厨房炒菜,仓管员不会修改菜谱。
+:::
 
 ---
 
-## 1. 核心概念：四层架构的职责划分
+## 2. 四层架构的职责划分
 
-### 1.1 四层架构概览
+### 2.1 四层架构概览
 
-典型的后端分层架构包含四个核心层次：
+典型的后端分层架构包含四个核心层次:
 
 ```
 ┌─────────────────────────────────────┐
-│  Controller 层（控制器层）             │  ← 接待员：接收请求，初步检查
+│  Controller 层(控制器层)             │  ← 接待员:接收请求,初步检查
 │  - 接收 HTTP 请求                     │
 │  - 参数校验                          │
 │  - 调用 Service                      │
 │  - 返回响应                          │
 ├─────────────────────────────────────┤
-│  Service 层（业务逻辑层）              │  ← 厨师：处理核心业务
+│  Service 层(业务逻辑层)              │  ← 厨师:处理核心业务
 │  - 业务逻辑编排                       │
 │  - 事务管理                          │
 │  - 调用 Repository                   │
 │  - 跨模块协调                        │
 ├─────────────────────────────────────┤
-│  Repository 层（数据访问层）           │  ← 仓管员：管理数据存取
+│  Repository 层(数据访问层)           │  ← 仓管员:管理数据存取
 │  - 数据库操作                        │
 │  - ORM 映射                          │
 │  - 查询封装                          │
 ├─────────────────────────────────────┤
-│  Domain 层（领域模型层）               │  ← 菜谱标准：定义业务概念
-│  - 实体（Entity）                    │
-│  - 值对象（Value Object）             │
+│  Domain 层(领域模型层)               │  ← 菜谱标准:定义业务概念
+│  - 实体(Entity)                      │
+│  - 值对象(Value Object)              │
 │  - 业务规则                          │
 └─────────────────────────────────────┘
 ```
 
-### 1.2 Controller 层：请求的"接待员"
+::: tip 📊 从图解中你能看到什么?
+**自上而下**:从"接近用户"到"接近数据"
+
+- **Controller**:最接近前端,处理HTTP协议相关的事情
+- **Service**:核心业务逻辑,但不关心数据怎么存、HTTP怎么传
+- **Repository**:只关心数据怎么存取,不关心业务含义
+- **Domain**:最核心的业务概念,所有层都依赖它
+
+**依赖方向**:
+
+```
+Controller → Service → Repository
+                 ↓
+              Domain(核心,不依赖任何层)
+```
+
+这符合"依赖倒置原则":高层模块不应依赖低层模块的具体实现,而应依赖抽象(Domain)。
+:::
+
+### 2.2 Controller 层:请求的"接待员"
 
 <ControllerLayerDemo />
 
-**职责**：
-- 接收 HTTP 请求，解析参数
-- 进行基础的参数校验（格式、必填等）
+**职责**:
+
+- 接收 HTTP 请求,解析参数
+- 进行基础的参数校验(格式、必填等)
 - 调用 Service 层执行业务逻辑
-- 封装响应，返回给客户端
+- 封装响应,返回给客户端
 
-**不该做的事**：
-- 不要在这里写业务逻辑
-- 不要直接操作数据库
-- 不要处理事务
+**不该做的事**:
 
-**类比**：就像餐厅的门童，负责迎接客人、检查预约、引导入座，但不负责做菜。
+- ❌ 在这里写业务逻辑
+- ❌ 直接操作数据库
+- ❌ 处理事务
 
-### 1.3 Service 层：业务逻辑的"厨师"
+**类比**:就像餐厅的门童,负责迎接客人、检查预约、引导入座,但不负责做菜。
 
-<ServiceLayerDemo />
-
-**职责**：
-- 实现核心业务逻辑
-- 编排多个 Repository 的操作
-- 管理事务边界（@Transactional）
-- 处理跨模块的业务协调
-
-**不该做的事**：
-- 不要直接写 SQL（交给 Repository）
-- 不要处理 HTTP 相关的事情
-- 不要返回数据库实体给 Controller
-
-**类比**：就像厨师按照菜谱做菜，需要协调各种食材（数据），把控菜品质量（业务正确性）。
-
-### 1.4 Repository 层：数据的"仓管员"
-
-<RepositoryLayerDemo />
-
-**职责**：
-- 封装所有数据访问逻辑
-- 执行 CRUD 操作
-- 处理 ORM 映射
-- 封装查询条件
-
-**不该做的事**：
-- 不要写业务逻辑
-- 不要处理事务（Service 层管理）
-- 不要依赖上层模块
-
-**类比**：就像餐厅的仓管员，负责从仓库取食材、存放剩余食材。厨师只需要告诉仓管员要什么，不需要知道仓库在哪、怎么取。
-
-### 1.5 Domain 层：领域模型的"蓝图"
-
-<DomainModelDemo />
-
-**职责**：
-- 定义业务实体（Entity）
-- 定义值对象（Value Object）
-- 封装业务规则
-- 作为所有层的共同依赖
-
-**重要特性**：
-- Domain 层不依赖任何其他层
-- 所有层都依赖 Domain 层
-- 是分层架构的基础
-
-**类比**：就像餐厅的菜单和菜品标准，定义了什么是"宫保鸡丁"、用什么食材、什么口味。所有厨师都要按照这个标准来做。
-
----
-
-## 2. DTO：层与层之间的"翻译官"
-
-<DtoFlowDemo />
-
-### 2.1 为什么需要 DTO？
-
-想象一下：如果 Controller 直接把数据库实体（Entity）返回给前端，会发生什么？
+::: details 📋 实际代码示例
 
 ```java
-// ❌ 错误的做法
-@Entity
-public class User {
-    @Id
-    private Long id;
-    private String username;
-    private String password;        // 敏感信息！
-    private String phone;
-    private String email;
-    private LocalDateTime createdAt;
-    private Boolean isDeleted;    // 内部字段！
-}
-
-// 如果直接返回这个实体...
-// 前端会收到 password、isDeleted 等不应该暴露的字段
-```
-
-**DTO 的作用**：
-- **解耦**：隔离数据库实体和 API 契约
-- **安全**：控制暴露的字段，避免泄露敏感信息
-- **灵活**：可以为不同场景定义不同的 DTO
-- **性能**：避免加载不必要的数据
-
-### 2.2 不同层的 DTO 职责
-
-| 层级 | DTO 类型 | 职责 | 示例 |
-|------|---------|------|------|
-| **Controller** | Request / Response DTO | 定义 API 契约、参数校验、序列化 | `UserCreateRequest` |
-| **Service** | Param / Result DTO | 封装业务方法参数，解耦 Controller 与 Service | `UserCreateParam` |
-| **Repository** | Entity / DO | 映射数据库表结构，ORM 映射 | `UserEntity` |
-
-### 2.3 DTO 转换实战
-
-```java
-// ========== Controller 层：Request DTO ==========
-@Data
-public class UserCreateRequest {
-    @NotBlank(message = "用户名不能为空")
-    @Size(min = 3, max = 20, message = "用户名长度3-20")
-    private String username;
-
-    @NotBlank(message = "密码不能为空")
-    @Size(min = 6, message = "密码至少6位")
-    private String password;
-
-    @Email(message = "邮箱格式不正确")
-    private String email;
-}
-
-// ========== Controller 层：Response DTO ==========
-@Data
-@Builder
-public class UserDTO {
-    private Long id;
-    private String username;
-    private String email;
-    private LocalDateTime createdAt;
-    // ❌ 注意：不包含 password 字段！
-}
-
-// ========== Service 层：Param DTO ==========
-@Data
-@Builder
-public class UserCreateParam {
-    private String username;
-    private String password;  // 已加密的密码
-    private String email;
-}
-
-// ========== 转换逻辑 ==========
 @RestController
 @RequestMapping("/api/users")
 public class UserController {
 
     private final UserService userService;
 
+    // ✅ 正确:Controller 只负责接收请求和返回响应
     @PostMapping
     public ResponseEntity<UserDTO> createUser(
             @RequestBody @Valid UserCreateRequest request) {
-        // 1. Request DTO -> Param DTO
+        // 1. Request DTO → Param DTO
         UserCreateParam param = UserCreateParam.builder()
                 .username(request.getUsername())
                 .password(encryptPassword(request.getPassword()))
@@ -233,143 +139,366 @@ public class UserController {
         // 2. 调用 Service
         User user = userService.createUser(param);
 
-        // 3. Entity -> Response DTO
+        // 3. Entity → Response DTO
         UserDTO response = UserDTO.builder()
                 .id(user.getId())
                 .username(user.getUsername())
                 .email(user.getEmail())
-                .createdAt(user.getCreatedAt())
                 .build();
 
-        return ResponseEntity.ok(response);
+        return ResponseEntity.status(HttpStatus.CREATED).body(response);
     }
 }
 ```
 
+**关键点**:
+
+- 用 `@Valid` 自动校验参数格式
+- 用 DTO(Data Transfer Object)隔离前后端数据结构
+- 不包含任何业务逻辑,只做"翻译"和"调度"
+  :::
+
+### 2.3 Service 层:业务逻辑的"厨师"
+
+<ServiceLayerDemo />
+
+**职责**:
+
+- 实现核心业务逻辑
+- 编排多个 Repository 的操作
+- 管理事务边界(@Transactional)
+- 处理跨模块的业务协调
+
+**不该做的事**:
+
+- ❌ 直接写 SQL(交给 Repository)
+- ❌ 处理 HTTP 相关的事情
+- ❌ 返回数据库实体给 Controller
+
+**类比**:就像厨师按照菜谱做菜,需要协调各种食材(数据),把控菜品质量(业务正确性)。
+
+::: details 📋 实际代码示例
+
+```java
+@Service
+@RequiredArgsConstructor
+public class UserService {
+
+    private final UserRepository userRepository;
+    private final EmailService emailService;
+
+    // ✅ 正确:Service 封装业务逻辑
+    @Transactional
+    public User createUser(UserCreateParam param) {
+        // 1. 业务规则:检查用户名是否重复
+        if (userRepository.existsByUsername(param.getUsername())) {
+            throw new UserAlreadyExistsException();
+        }
+
+        // 2. 创建用户实体
+        User user = new User();
+        user.setUsername(param.getUsername());
+        user.setPassword(param.getPassword()); // 已经加密
+        user.setEmail(param.getEmail());
+
+        // 3. 保存到数据库
+        userRepository.save(user);
+
+        // 4. 发送欢迎邮件(跨模块协调)
+        emailService.sendWelcomeEmail(user);
+
+        return user;
+    }
+}
+```
+
+**关键点**:
+
+- 用 `@Transactional` 保证事务一致性
+- 抛出业务异常,让 Controller 统一处理
+- 不依赖 HTTP 概念,可以复用(如定时任务调用)
+  :::
+
+### 2.4 Repository 层:数据的"仓管员"
+
+<RepositoryLayerDemo />
+
+**职责**:
+
+- 封装所有数据访问逻辑
+- 执行 CRUD 操作
+- 处理 ORM 映射
+- 封装查询条件
+
+**不该做的事**:
+
+- ❌ 写业务逻辑
+- ❌ 处理事务(Service 层管理)
+- ❌ 依赖上层模块
+
+**类比**:就像餐厅的仓管员,负责从仓库取食材、存放剩余食材。厨师只需要告诉仓管员要什么,不需要知道仓库在哪、怎么取。
+
+::: details 📋 实际代码示例
+
+```java
+@Repository
+public interface UserRepository extends JpaRepository<User, Long> {
+
+    // ✅ Spring Data JPA 自动实现
+    Optional<User> findByUsername(String username);
+
+    boolean existsByUsername(String username);
+
+    // ✅ 自定义复杂查询
+    @Query("SELECT u FROM User u WHERE u.email = :email AND u.deleted = false")
+    Optional<User> findActiveByEmail(@Param("email") String email);
+}
+```
+
+**关键点**:
+
+- Repository 是接口,不包含业务逻辑
+- 用方法名表达查询意图,不需要写实现
+- 可以用 `@Query` 自定义复杂查询
+  :::
+
+### 2.5 Domain 层:领域模型的"蓝图"
+
+<DomainModelDemo />
+
+**职责**:
+
+- 定义业务实体(Entity)
+- 定义值对象(Value Object)
+- 封装业务规则
+- 作为所有层的共同依赖
+
+**重要特性**:
+
+- Domain 层不依赖任何其他层
+- 所有层都依赖 Domain 层
+- 是分层架构的基础
+
+**类比**:就像餐厅的菜单和菜品标准,定义了什么是"宫保鸡丁"、用什么食材、什么口味。所有厨师都要按照这个标准来做。
+
+::: details 📋 实际代码示例
+
+```java
+// ✅ 实体(Entity):有唯一标识的业务对象
+@Entity
+@Table(name = "users")
+public class User {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private Long id;
+
+    @Column(unique = true, nullable = false)
+    private String username;
+
+    @Column(nullable = false)
+    private String password;
+
+    @Column(nullable = false)
+    private String email;
+
+    // ✅ 业务方法:封装业务规则
+    public boolean isPasswordCorrect(String rawPassword) {
+        return BCrypt.checkpw(rawPassword, this.password);
+    }
+
+    public void changePassword(String oldPassword, String newPassword) {
+        if (!isPasswordCorrect(oldPassword)) {
+            throw new IncorrectPasswordException();
+        }
+        this.password = BCrypt.hashpw(newPassword);
+    }
+}
+
+// ✅ 值对象(Value Object):通过属性值判断相等
+@Embeddable
+public class Email {
+
+    @Column(nullable = false)
+    private String address;
+
+    public Email(String address) {
+        if (!isValidEmail(address)) {
+            throw new InvalidEmailException();
+        }
+        this.address = address;
+    }
+
+    private boolean isValidEmail(String address) {
+        return address.matches("^[A-Za-z0-9+_.-]+@(.+)$");
+    }
+
+    // ✅ 值对象不通过ID判断相等,而是通过属性值
+    @Override
+    public boolean equals(Object o) {
+        if (this == o) return true;
+        if (!(o instanceof Email)) return false;
+        return address.equals(((Email) o).address);
+    }
+}
+```
+
+**关键点**:
+
+- Entity 有唯一标识,Value Object 通过属性值判断相等
+- 业务规则封装在 Domain 对象中,而不是散落在 Service 层
+- Domain 层是纯粹的业务逻辑,不依赖框架
+  :::
+
 ---
 
-## 3. 依赖方向：分层架构的铁律
+## 3. DTO:层与层之间的"翻译官"
+
+### 3.1 为什么需要 DTO?
+
+<DtoFlowDemo />
+
+想象一下:如果 Controller 直接把数据库实体(Entity)返回给前端,会发生什么?
+
+```java
+// ❌ 错误的做法
+@Entity
+public class User {
+    @Id
+    private Long id;
+    private String username;
+    private String password;        // 敏感信息!
+    private String phone;
+    private String email;
+    private LocalDateTime createdAt;
+    private Boolean isDeleted;    // 内部字段!
+}
+
+// 如果直接返回这个实体...
+// 前端会收到 password、isDeleted 等不应该暴露的字段
+```
+
+::: tip 💡 通俗解释
+**DTO**(Data Transfer Object,数据传输对象)就像"菜单翻译":
+
+- 厨师的菜谱(Domain Entity)包含:食材清单、烹饪步骤、火候、摆盘要求
+- 给客人看的菜单(Controller Response DTO)只包含:菜名、价格、图片、简介
+
+**为什么要翻译**:
+
+1. **安全**:不能把"后厨秘密"(如密码、删除标记)暴露给客人
+2. **简化**:客人只关心"这道菜是什么",不关心"怎么做的"
+3. **灵活**:同一道菜,堂食菜单和外卖菜单显示的内容可以不同
+   :::
+
+**DTO 的作用**:
+
+- **解耦**:隔离数据库实体和 API 契约
+- **安全**:控制暴露的字段,避免泄露敏感信息
+- **灵活**:可以为不同场景定义不同的 DTO
+- **性能**:避免加载不必要的数据
+
+### 3.2 不同层的 DTO 职责
+
+| 层级           | DTO 类型               | 职责                                        | 示例                |
+| -------------- | ---------------------- | ------------------------------------------- | ------------------- |
+| **Controller** | Request / Response DTO | 定义 API 契约、参数校验、序列化             | `UserCreateRequest` |
+| **Service**    | Param / Result DTO     | 封装业务方法参数,解耦 Controller 与 Service | `UserCreateParam`   |
+| **Repository** | Entity / DO            | 映射数据库表结构,ORM 映射                   | `UserEntity`        |
+
+---
+
+## 4. 依赖方向:分层架构的铁律
+
+### 4.1 依赖倒置原则(DIP)
 
 <DependencyDirectionDemo />
 
-### 3.1 依赖倒置原则（DIP）
+分层架构的核心规则:**上层模块不应依赖下层模块的具体实现,而应依赖于抽象。**
 
-分层架构的核心规则：**上层模块不应该依赖下层模块的具体实现，而应该依赖于抽象。**
+::: tip 💡 通俗解释
+**依赖倒置**(Dependency Inversion Principle):
+
+**错误的做法**(依赖实现):
 
 ```
-❌ 错误的依赖方式（直接依赖实现）：
+Controller → UserServiceImpl → UserDaoImpl → UserEntity
+```
 
-Controller -> UserServiceImpl -> UserDaoImpl -> UserEntity
+问题:
 
-问题：
-1. 每层都耦合了具体实现
-2. 换实现要改很多代码
-3. 测试困难
+1. 每层都耦合了具体实现,换个实现要改很多代码
+2. 测试困难,Mock 需要修改实现类
 
-✅ 正确的依赖方式（依赖抽象）：
+**正确的做法**(依赖抽象):
 
-Controller -> IUserService (接口) -> IUserDao (接口) -> UserEntity
+```
+Controller → IUserService(接口) → IUserDao(接口) → UserEntity
+```
 
-实现：
-UserServiceImpl -> UserDaoImpl
+好处:
 
-好处：
-1. 上层只依赖接口
-2. 换实现只需改配置
+1. 上层只依赖接口,不关心实现
+2. 换实现只需改配置(如从 MySQL 换到 PostgreSQL)
 3. 容易 Mock 测试
-```
 
-### 3.2 正确的依赖方向
+**比喻**:
+
+- ❌ 错误:你只去某家特定的超市买东西,超市关门你就买不到
+- ✅ 正确:你定义"买东西"这个接口,可以去任何超市实现
+  :::
+
+### 4.2 正确的依赖方向
 
 ```
-┌─────────────────────────────────────────────────────────────┐
-│  Controller 层                                               │
-│  ┌──────────────────────────────────────────────────────┐  │
-│  │  UserController                                       │  │
-│  │  - @Autowired private IUserService userService;      │  │
-│  │  ✅ 依赖接口，不依赖实现                              │  │
-│  └──────────────────────────────────────────────────────┘  │
-│                            │                                 │
-│                            ▼ 依赖（Dependency）               │
-│  ┌──────────────────────────────────────────────────────┐  │
-│  │  Service 层                                           │  │
-│  │  ┌────────────────────────────────────────────────┐  │  │
-│  │  │  UserServiceImpl                                │  │  │
-│  │  │  - @Autowired private UserRepository repository;  │  │  │
-│  │  │  ✅ 依赖 Repository 接口                         │  │  │
-│  │  └────────────────────────────────────────────────┘  │  │
-│  │                      │                              │  │
-│  │                      ▼ 依赖                          │  │
-│  │  ┌────────────────────────────────────────────────┐  │  │
-│  │  │  Repository 层                                  │  │  │
-│  │  │  ┌──────────────────────────────────────────┐   │  │  │
-│  │  │  │  UserRepository                          │   │  │  │
-│  │  │  │  - extends JpaRepository<User, Long>    │   │  │  │
-│  │  │  └──────────────────────────────────────────┘   │  │  │
-│  │  │                      │                         │  │  │
-│  │  │                      ▼ 依赖                     │  │  │
-│  │  │  ┌──────────────────────────────────────────┐   │  │  │
-│  │  │  │  Domain 层 (核心领域)                   │   │  │  │
-│  │  │  │  ┌────────────────────────────────────┐  │   │  │  │
-│  │  │  │  │  User (Entity)                     │  │   │  │  │
-│  │  │  │  │  - 不包含任何层依赖              │  │   │  │  │
-│  │  │  │  │  - 被所有层依赖                  │  │   │  │  │
-│  │  │  │  └────────────────────────────────────┘  │   │  │  │
-│  │  │  └──────────────────────────────────────────┘   │  │  │
-│  │  └────────────────────────────────────────────────┘  │  │
-│  └──────────────────────────────────────────────────────┘  │
-└─────────────────────────────────────────────────────────────┘
+✅ 正确的依赖方向:
+
+Controller → Service 接口 → Repository 接口 → Domain
+    ↑           ↑                ↑              ↑
+    └-----------└----------------└--------------┘
+    所有层都依赖 Domain,Domain 不依赖任何层
+
+❌ 禁止的做法:
+- Service 直接依赖 Repository 实现
+- Controller 直接操作数据库
+- Domain 依赖 Service 或 Repository
+- 层与层之间形成循环依赖
 ```
 
 ---
 
-## 4. 实战案例：电商订单系统的分层实现
+## 5. 实战案例:电商订单系统的分层实现
 
-### 4.1 需求场景
+### 5.1 需求场景
 
-实现一个电商订单创建功能：
-- 用户选择商品，确认订单信息
+实现一个电商订单创建功能:
+
+- 用户选择商品,确认订单信息
 - 系统检查库存
-- 计算订单金额（商品价格 + 运费 - 优惠）
+- 计算订单金额(商品价格 + 运费 - 优惠)
 - 创建订单记录
 - 扣减库存
 - 返回订单信息
 
-### 4.2 完整的分层代码
+::: details 📋 完整的四层代码
+**1. Domain 层:领域模型**
 
 ```java
-// =====================================================
-// 1. Domain 层：领域模型
-// =====================================================
-
 // 订单实体
 @Entity
-@Table(name = "orders")
 public class Order {
     @Id
     @GeneratedValue(strategy = GenerationType.IDENTITY)
     private Long id;
 
-    @Column(name = "user_id")
     private Long userId;
-
-    @OneToMany(cascade = CascadeType.ALL, orphanRemoval = true)
-    @JoinColumn(name = "order_id")
     private List<OrderItem> items = new ArrayList<>();
-
     @Embedded
     private Money totalAmount;
-
-    @Embedded
-    private Address shippingAddress;
-
-    @Enumerated(EnumType.STRING)
     private OrderStatus status = OrderStatus.PENDING_PAYMENT;
-
-    @Column(name = "created_at")
     private LocalDateTime createdAt = LocalDateTime.now();
 
-    // 业务方法：计算订单总金额
+    // ✅ 业务方法:计算订单总金额
     public void calculateTotal() {
         Money total = Money.zero();
         for (OrderItem item : items) {
@@ -378,121 +507,44 @@ public class Order {
         this.totalAmount = total;
     }
 
-    // 业务方法：添加订单项
-    public void addItem(OrderItem item) {
-        items.add(item);
-        item.setOrder(this);
-    }
-
-    // 业务方法：取消订单
+    // ✅ 业务方法:取消订单
     public void cancel() {
         if (this.status != OrderStatus.PENDING_PAYMENT) {
             throw new IllegalStateException("只有待支付订单可以取消");
         }
         this.status = OrderStatus.CANCELLED;
     }
-
-    // Getters...
 }
 
-// 订单项实体
-@Entity
-@Table(name = "order_items")
-public class OrderItem {
-    @Id
-    @GeneratedValue(strategy = GenerationType.IDENTITY)
-    private Long id;
-
-    @Column(name = "product_id")
-    private Long productId;
-
-    @Column(name = "product_name")
-    private String productName;
-
-    @Embedded
-    private Money unitPrice;
-
-    @Column(name = "quantity")
-    private Integer quantity;
-
-    @ManyToOne(fetch = FetchType.LAZY)
-    @JoinColumn(name = "order_id")
-    private Order order;
-
-    // 计算小计
-    public Money getSubTotal() {
-        return unitPrice.multiply(quantity);
-    }
-
-    // Getters and Setters...
-}
-
-// 值对象：金钱
+// 值对象:金钱
 @Embeddable
 public class Money {
-    @Column(name = "amount")
     private BigDecimal amount;
-
-    @Column(name = "currency")
     private String currency;
 
     public static Money zero() {
         return new Money(BigDecimal.ZERO, "CNY");
     }
-
-    public Money add(Money other) {
-        return new Money(this.amount.add(other.amount), this.currency);
-    }
-
-    public Money multiply(int factor) {
-        return new Money(this.amount.multiply(BigDecimal.valueOf(factor)), this.currency);
-    }
-
-    // Constructor, Getters...
 }
+```
 
-// 枚举：订单状态
-public enum OrderStatus {
-    PENDING_PAYMENT,   // 待支付
-    PAID,              // 已支付
-    SHIPPED,           // 已发货
-    COMPLETED,         // 已完成
-    CANCELLED          // 已取消
-}
-
-// =====================================================
-// 2. Repository 层：数据访问
-// =====================================================
+**2. Repository 层:数据访问**
 
+```java
 @Repository
 public interface OrderRepository extends JpaRepository<Order, Long> {
-
-    // 根据用户查询订单
     List<Order> findByUserIdOrderByCreatedAtDesc(Long userId);
-
-    // 根据状态查询订单
-    List<Order> findByStatus(OrderStatus status);
-
-    // 复杂的 JPQL 查询
-    @Query("""
-        SELECT o FROM Order o
-        WHERE o.userId = :userId
-          AND o.status IN :statuses
-          AND o.createdAt BETWEEN :startDate AND :endDate
-        ORDER BY o.createdAt DESC
-        """)
-    List<Order> findUserOrdersWithConditions(
-        @Param("userId") Long userId,
-        @Param("statuses") List<OrderStatus> statuses,
-        @Param("startDate") LocalDateTime startDate,
-        @Param("endDate") LocalDateTime endDate
-    );
 }
 
-// =====================================================
-// 3. Service 层：业务逻辑
-// =====================================================
+@Repository
+public interface ProductRepository extends JpaRepository<Product, Long> {
+    // Spring Data JPA 自动实现
+}
+```
 
+**3. Service 层:业务逻辑**
+
+```java
 @Service
 @RequiredArgsConstructor
 public class OrderService {
@@ -500,33 +552,24 @@ public class OrderService {
     private final OrderRepository orderRepository;
     private final ProductService productService;
     private final InventoryService inventoryService;
-    private final IdGenerator idGenerator;
 
-    /**
-     * 创建订单
-     */
     @Transactional
     public OrderDTO createOrder(OrderCreateParam param) {
-        // 1. 验证商品信息并扣减库存
+        // 1. 验证商品并扣减库存
         List<OrderItem> items = new ArrayList<>();
         for (OrderItemParam itemParam : param.getItems()) {
-            // 查询商品
             Product product = productService.getProduct(itemParam.getProductId());
 
-            // 检查库存
             boolean reserved = inventoryService.reserveStock(
                 itemParam.getProductId(),
                 itemParam.getQuantity()
             );
             if (!reserved) {
-                throw new InsufficientStockException("商品库存不足: " + product.getName());
+                throw new InsufficientStockException();
             }
 
-            // 创建订单项
             OrderItem item = new OrderItem();
             item.setProductId(product.getId());
-            item.setProductName(product.getName());
-            item.setUnitPrice(product.getPrice());
             item.setQuantity(itemParam.getQuantity());
             items.add(item);
         }
@@ -534,54 +577,24 @@ public class OrderService {
         // 2. 创建订单
         Order order = new Order();
         order.setUserId(param.getUserId());
-        order.setShippingAddress(param.getAddress());
-
-        // 添加订单项
         for (OrderItem item : items) {
             order.addItem(item);
         }
 
-        // 计算总价
+        // 3. 计算总价(调用 Domain 方法)
         order.calculateTotal();
 
-        // 3. 保存订单
+        // 4. 保存订单
         orderRepository.save(order);
 
-        // 4. 转换为 DTO 返回
         return OrderDTO.from(order);
     }
-
-    /**
-     * 取消订单
-     */
-    @Transactional
-    public void cancelOrder(Long orderId, Long userId) {
-        // 1. 查询订单
-        Order order = orderRepository.findById(orderId)
-            .orElseThrow(() -> new OrderNotFoundException(orderId));
-
-        // 2. 验证权限
-        if (!order.getUserId().equals(userId)) {
-            throw new AccessDeniedException("无权操作此订单");
-        }
-
-        // 3. 执行业务逻辑（在领域对象中封装）
-        order.cancel();  // 这会检查状态是否允许取消
-
-        // 4. 恢复库存
-        for (OrderItem item : order.getItems()) {
-            inventoryService.releaseStock(item.getProductId(), item.getQuantity());
-        }
-
-        // 5. 保存
-        orderRepository.save(order);
-    }
 }
+```
 
-// =====================================================
-// 4. Controller 层：API 入口
-// =====================================================
+**4. Controller 层:API 入口**
 
+```java
 @RestController
 @RequestMapping("/api/orders")
 @RequiredArgsConstructor
@@ -589,24 +602,15 @@ public class OrderController {
 
     private final OrderService orderService;
 
-    /**
-     * 创建订单
-     */
     @PostMapping
     public ResponseEntity<OrderDTO> createOrder(
             @RequestBody @Valid OrderCreateRequest request,
             @AuthenticationPrincipal UserPrincipal user) {
 
-        // 1. Request -> Param 转换
+        // 1. Request → Param 转换
         OrderCreateParam param = OrderCreateParam.builder()
                 .userId(user.getId())
-                .address(request.getAddress())
-                .items(request.getItems().stream()
-                        .map(item -> OrderItemParam.builder()
-                                .productId(item.getProductId())
-                                .quantity(item.getQuantity())
-                                .build())
-                        .collect(Collectors.toList()))
+                .items(request.getItems())
                 .build();
 
         // 2. 调用 Service
@@ -615,42 +619,30 @@ public class OrderController {
         // 3. 返回
         return ResponseEntity.status(HttpStatus.CREATED).body(order);
     }
-
-    /**
-     * 取消订单
-     */
-    @PostMapping("/{orderId}/cancel")
-    public ResponseEntity<Void> cancelOrder(
-            @PathVariable Long orderId,
-            @AuthenticationPrincipal UserPrincipal user) {
-
-        orderService.cancelOrder(orderId, user.getId());
-
-        return ResponseEntity.noContent().build();
-    }
 }
 ```
 
+:::
+
 ---
 
-## 5. 分层架构的演进：从混乱到整洁
+## 6. 分层架构的演进:从混乱到整洁
 
-### 5.1 初学者常犯的错误
+### 6.1 初学者常犯的错误
 
-**错误一：Controller 里写业务逻辑**
+::: details ❌ 错误一:Controller 里写业务逻辑
 
 ```java
-// ❌ 错误：Controller 里写了太多业务逻辑
+// ❌ 错误:Controller 里写了太多业务逻辑
 @RestController
 public class OrderController {
 
     @Autowired private OrderRepository orderRepository;
     @Autowired private ProductRepository productRepository;
-    @Autowired private InventoryRepository inventoryRepository;
 
     @PostMapping("/orders")
     public Order createOrder(@RequestBody CreateOrderRequest request) {
-        // 太多的业务逻辑在这里...
+        // ❌ 太多的业务逻辑在这里...
         // 检查库存
         for (ItemRequest item : request.getItems()) {
             Product product = productRepository.findById(item.getProductId())
@@ -661,50 +653,44 @@ public class OrderController {
             }
         }
 
-        // 扣减库存
-        for (ItemRequest item : request.getItems()) {
-            Product product = productRepository.findById(item.getProductId()).get();
-            product.setStock(product.getStock() - item.getQuantity());
-            productRepository.save(product);
-        }
-
-        // 创建订单...
+        // ❌ 直接操作数据库
         Order order = new Order();
-        // ... 更多逻辑
+        orderRepository.save(order);
 
-        return orderRepository.save(order);
+        return order;
     }
 }
 ```
 
-**错误二：Service 层直接操作数据库**
+**重构后**:
 
 ```java
-// ❌ 错误：Service 里直接写 SQL
-@Service
-public class OrderService {
+// ✅ Controller 只负责接收请求和返回响应
+@RestController
+public class OrderController {
 
     @Autowired
-    private JdbcTemplate jdbcTemplate;  // 直接依赖底层 JDBC
+    private OrderService orderService;
 
-    public List<Order> getUserOrders(Long userId) {
-        // SQL 硬编码在 Service 里
-        String sql = "SELECT * FROM orders WHERE user_id = ? AND deleted = 0";
+    @PostMapping("/orders")
+    public OrderDTO createOrder(@RequestBody @Valid CreateOrderRequest request) {
+        OrderCreateParam param = OrderCreateParam.builder()
+                .items(request.getItems())
+                .build();
 
-        return jdbcTemplate.query(sql, (rs, rowNum) -> {
-            Order order = new Order();
-            order.setId(rs.getLong("id"));
-            // ... 更多字段映射
-            return order;
-        }, userId);
+        Order order = orderService.createOrder(param);
+
+        return OrderDTO.from(order);
     }
 }
 ```
 
-**错误三：循环依赖**
+:::
+
+::: details ❌ 错误二:循环依赖
 
 ```java
-// ❌ 错误：Service 之间相互调用，形成循环依赖
+// ❌ 错误:Service 之间相互调用,形成循环依赖
 @Service
 public class OrderService {
     @Autowired
@@ -714,120 +700,14 @@ public class OrderService {
 @Service
 public class PaymentService {
     @Autowired
-    private OrderService orderService;  // B 又依赖 A - 循环！
+    private OrderService orderService;  // B 又依赖 A - 循环!
 }
 ```
 
-### 5.2 如何重构？
-
-**重构一：提取 Service 层**
+**解决方案:使用事件驱动**
 
 ```java
-// ✅ Controller 只负责接收请求和返回响应
-@RestController
-public class OrderController {
-
-    @Autowired
-    private OrderService orderService;  // 只依赖 Service 接口
-
-    @PostMapping("/orders")
-    public OrderDTO createOrder(@RequestBody @Valid CreateOrderRequest request) {
-        // 1. Request -> Param
-        CreateOrderParam param = CreateOrderParam.builder()
-            .userId(getCurrentUserId())
-            .items(request.getItems())
-            .address(request.getAddress())
-            .build();
-
-        // 2. 调用 Service
-        Order order = orderService.createOrder(param);
-
-        // 3. Entity -> DTO
-        return OrderDTO.from(order);
-    }
-}
-
-// ✅ Service 封装业务逻辑
-@Service
-@Transactional
-public class OrderService {
-
-    @Autowired
-    private OrderRepository orderRepository;
-
-    @Autowired
-    private ProductService productService;
-
-    @Autowired
-    private InventoryService inventoryService;
-
-    public Order createOrder(CreateOrderParam param) {
-        // 1. 检查库存并扣减
-        for (ItemParam item : param.getItems()) {
-            boolean reserved = inventoryService.reserveStock(
-                item.getProductId(),
-                item.getQuantity()
-            );
-            if (!reserved) {
-                throw new InsufficientStockException("库存不足");
-            }
-        }
-
-        // 2. 创建订单
-        Order order = new Order();
-        order.setUserId(param.getUserId());
-        // ... 设置其他属性
-
-        // 3. 保存
-        return orderRepository.save(order);
-    }
-}
-```
-
-**重构二：提取 Repository 层**
-
-```java
-// ✅ Repository 接口：定义数据访问契约
-@Repository
-public interface OrderRepository extends JpaRepository<Order, Long> {
-    // Spring Data JPA 自动生成实现
-    List<Order> findByUserIdOrderByCreatedAtDesc(Long userId);
-
-    @Query("SELECT o FROM Order o WHERE o.status = :status AND o.createdAt < :date")
-    List<Order> findByStatusAndCreatedAtBefore(
-        @Param("status") OrderStatus status,
-        @Param("date") LocalDateTime date
-    );
-}
-
-// ✅ Service 只依赖 Repository 接口
-@Service
-public class OrderService {
-    @Autowired
-    private OrderRepository orderRepository;  // 依赖接口，不依赖实现
-
-    public Order getOrder(Long id) {
-        return orderRepository.findById(id)
-            .orElseThrow(() -> new OrderNotFoundException(id));
-    }
-}
-```
-
-**重构三：打破循环依赖**
-
-```java
-// ✅ 方案一：抽取共同的依赖到 Domain 层
-
-// 在 Domain 层定义领域事件
-public class OrderPaidEvent {
-    private final Long orderId;
-    private final Long userId;
-    private final Money amount;
-    private final LocalDateTime paidAt;
-    // ...
-}
-
-// OrderService 发布事件
+// ✅ 发布事件,而不是直接调用
 @Service
 public class OrderService {
     @Autowired
@@ -838,17 +718,12 @@ public class OrderService {
         order.pay(param.getPaymentMethod());
         orderRepository.save(order);
 
-        // 发布事件，而不是直接调用 PaymentService
-        eventPublisher.publishEvent(new OrderPaidEvent(
-            order.getId(),
-            order.getUserId(),
-            order.getTotalAmount(),
-            LocalDateTime.now()
-        ));
+        // ✅ 发布事件,解耦服务
+        eventPublisher.publishEvent(new OrderPaidEvent(order));
     }
 }
 
-// PaymentService 监听事件
+// ✅ PaymentService 监听事件
 @Service
 public class PaymentService {
     @EventListener
@@ -856,134 +731,140 @@ public class PaymentService {
     public void handleOrderPaid(OrderPaidEvent event) {
         // 处理支付相关逻辑
         createPaymentRecord(event);
-        // ...
     }
 }
-
-// ✅ 方案二：使用中间抽象
-
-// 定义接口
-public interface PaymentGateway {
-    PaymentResult processPayment(PaymentRequest request);
-}
-
-// OrderService 依赖接口
-@Service
-public class OrderService {
-    @Autowired
-    private PaymentGateway paymentGateway;  // 依赖接口
-}
-
-// 实现类
-@Service
-public class AlipayGateway implements PaymentGateway {
-    // 实现...
-}
 ```
 
+:::
+
 ---
 
-## 5. 分层架构 vs 整洁架构
+## 7. 分层架构 vs 整洁架构
 
 <CleanArchitectureDemo />
 
-### 5.1 两种架构的对比
+### 7.1 两种架构的对比
 
-| 特性 | 传统分层架构 | 整洁架构 |
-|------|-------------|----------|
-| **依赖方向** | 从上到下 | 从外到内 |
-| **核心业务位置** | Service 层 | Domain 层（中心） |
-| **框架依赖** | 较深（如 Spring） | 较浅（通过接口隔离） |
-| **可测试性** | 需要集成测试 | 核心可单元测试 |
-| **学习曲线** | 平缓 | 较陡 |
-| **适用场景** | 中小型项目、快速迭代 | 大型复杂业务、长期维护 |
+| 特性             | 传统分层架构         | 整洁架构               |
+| ---------------- | -------------------- | ---------------------- |
+| **依赖方向**     | 从上到下             | 从外到内               |
+| **核心业务位置** | Service 层           | Domain 层(中心)        |
+| **框架依赖**     | 较深(如 Spring)      | 较浅(通过接口隔离)     |
+| **可测试性**     | 需要集成测试         | 核心可单元测试         |
+| **学习曲线**     | 平缓                 | 较陡                   |
+| **适用场景**     | 中小型项目、快速迭代 | 大型复杂业务、长期维护 |
 
-### 5.2 如何选择？
+::: tip 💡 核心区别
+**传统分层架构**:
+
+- 依赖方向:Controller → Service → Repository → Domain
+- 框架(Spring)渗透到所有层
+- Service 层既包含业务逻辑,也依赖框架
+
+**整洁架构**:
+
+- 依赖方向:所有层都指向中心(Domain)
+- 通过接口隔离,框架只在外层
+- Domain 层纯粹的业务逻辑,完全不依赖框架
+
+**比喻**:
+
+- 传统分层:像盖楼,从下往上建,地基很重要但可以被替换
+- 整洁架构:像洋葱,核心业务在最内层,外层(框架)可以随时更换
+  :::
+
+### 7.2 如何选择?
 
 **选择传统分层架构当...**
-- 项目规模较小，业务相对简单
+
+- 项目规模较小,业务相对简单
 - 团队对 DDD 不熟悉
-- 需要快速上线，验证市场
+- 需要快速上线,验证市场
 - 技术栈相对固定
 
 **选择整洁架构当...**
-- 业务复杂，领域模型丰富
+
+- 业务复杂,领域模型丰富
 - 需要长期维护和演进
 - 需要频繁切换技术栈
 - 团队有较强的设计能力
 
 ---
 
-## 6. 总结：分层架构的核心要点
+## 8. 总结:分层架构的核心要点
 
-### 6.1 四层职责速查表
+### 8.1 四层职责速查表
 
-| 层级 | 主要职责 | 不该做的事 |
-|------|---------|-----------|
-| **Controller** | 接收请求、参数校验、调用 Service、返回响应 | 写业务逻辑、操作数据库、处理事务 |
-| **Service** | 业务逻辑编排、事务管理、协调 Repository | 直接写 SQL、处理 HTTP 细节、返回实体给 Controller |
-| **Repository** | 数据访问、ORM 映射、查询封装 | 写业务逻辑、管理事务、依赖上层 |
-| **Domain** | 实体定义、业务规则、值对象 | 依赖其他层、处理持久化、处理 HTTP |
+| 层级           | 主要职责                                   | 不该做的事                                   |
+| -------------- | ------------------------------------------ | -------------------------------------------- |
+| **Controller** | 接收请求、参数校验、调用 Service、返回响应 | 写业务逻辑、操作数据库、处理事务             |
+| **Service**    | 业务逻辑编排、事务管理、协调 Repository    | 直接写 SQL、处理 HTTP、返回实体给 Controller |
+| **Repository** | 数据访问、ORM 映射、查询封装               | 写业务逻辑、管理事务、依赖上层               |
+| **Domain**     | 实体定义、业务规则、值对象                 | 依赖其他层、处理持久化、处理 HTTP            |
 
-### 6.2 依赖方向铁律
+### 8.2 依赖方向铁律
 
 ```
-✅ 正确的依赖方向：
+✅ 正确的依赖方向:
 
 Controller → Service 接口 → Repository 接口 → Domain
     ↑           ↑                ↑              ↑
     └-----------└----------------└--------------┘
-    所有层都依赖 Domain，Domain 不依赖任何层
+    所有层都依赖 Domain,Domain 不依赖任何层
 
-❌ 禁止的做法：
+❌ 禁止的做法:
 - Service 直接依赖 Repository 实现
 - Controller 直接操作数据库
 - Domain 依赖 Service 或 Repository
 - 层与层之间形成循环依赖
 ```
 
-### 6.3 编码最佳实践
+### 8.3 编码最佳实践
 
-1. **接口优先**：Service 和 Repository 都定义接口，实现类通过 Spring 注入
-2. **DTO 隔离**：每层使用自己的 DTO，不要直接传递 Entity
-3. **事务在 Service**：使用 `@Transactional` 在 Service 方法上控制事务
-4. **异常处理**：Controller 统一处理异常，不要 try-catch 后吞掉异常
-5. **贫血模型 vs 充血模型**：根据团队熟悉程度选择，但建议 Domain 有基本的行为方法
+1. **接口优先**:Service 和 Repository 都定义接口,实现类通过 Spring 注入
+2. **DTO 隔离**:每层使用自己的 DTO,不要直接传递 Entity
+3. **事务在 Service**:使用 `@Transactional` 在 Service 方法上控制事务
+4. **异常处理**:Controller 统一处理异常,不要 try-catch 后吞掉异常
+5. **贫血模型 vs 充血模型**:根据团队熟悉程度选择,但建议 Domain 有基本的行为方法
 
-### 6.4 常见面试问题
+### 8.4 常见面试问题
 
-**Q1: 为什么要分层？不分层可以吗？**
-> A: 分层的目的是解耦和关注点分离。小项目可以不分层，但随着业务复杂度的增加，不分层会导致代码难以维护、测试困难、团队协作效率低下。
+**Q1:为什么要分层?不分层可以吗?**
 
-**Q2: Controller 层可以写业务逻辑吗？**
-> A: 不可以。Controller 应该只负责接收请求、调用 Service、返回响应。业务逻辑应该封装在 Service 层，这样代码可以被复用，也更容易测试。
+> A:分层的目的是解耦和关注点分离。小项目可以不分层,但随着业务复杂度的增加,不分层会导致代码难以维护、测试困难、团队协作效率低下。
 
-**Q3: 什么是贫血模型和充血模型？**
-> A: 贫血模型是指 Entity 只有 getter/setter，业务逻辑都在 Service 层。充血模型是指 Entity 包含业务方法（如 `order.cancel()`），封装了业务规则。DDD 推荐充血模型，但贫血模型更简单易懂。
+**Q2:Controller 层可以写业务逻辑吗?**
 
-**Q4: 如何处理跨多个 Service 的事务？**
-> A: 可以在上层 Service 中使用 `@Transactional`，调用多个下层 Service。或者使用分布式事务方案（如 Seata），但会增加系统复杂度。
+> A:不可以。Controller 应该只负责接收请求、调用 Service、返回响应。业务逻辑应该封装在 Service 层,这样代码可以被复用,也更容易测试。
+
+**Q3:什么是贫血模型和充血模型?**
+
+> A:贫血模型是指 Entity 只有 getter/setter,业务逻辑都在 Service 层。充血模型是指 Entity 包含业务方法(如 `order.cancel()`),封装了业务规则。DDD 推荐充血模型,但贫血模型更简单易懂。
+
+**Q4:如何处理跨多个 Service 的事务?**
+
+> A:可以在上层 Service 中使用 `@Transactional`,调用多个下层 Service。或者使用分布式事务方案(如 Seata),但会增加系统复杂度。
 
 ---
 
-## 7. 名词对照表
+## 9. 名词对照表
 
-| 英文术语 | 中文对照 | 解释 |
-|------|---------|------|
-| **Layered Architecture** | 分层架构 | 将系统划分为多个层次，每层有明确的职责 |
-| **Controller** | 控制器 | 接收 HTTP 请求，调用 Service，返回响应 |
-| **Service** | 服务 | 封装业务逻辑，协调多个 Repository |
-| **Repository** | 仓储 | 封装数据访问逻辑，执行 CRUD 操作 |
-| **Domain** | 领域 | 定义业务实体、值对象和业务规则 |
-| **DTO** | 数据传输对象 | 层与层之间传递数据的载体 |
-| **Entity** | 实体 | 有唯一标识的领域对象，对应数据库表 |
-| **Value Object** | 值对象 | 没有唯一标识，通过属性值判断相等的对象 |
-| **Dependency Inversion** | 依赖倒置 | 高层模块不应依赖低层模块，都应依赖抽象 |
-| **Transaction** | 事务 | 保证一组操作原子性的机制 |
-| **Clean Architecture** | 整洁架构 | 以领域为核心的架构风格，强调依赖方向 |
-| **Anemic Domain Model** | 贫血模型 | 实体只有数据没有行为的模型 |
-| **Rich Domain Model** | 充血模型 | 实体包含数据和业务行为的模型 |
+| 英文术语                 | 中文对照     | 解释                                  |
+| ------------------------ | ------------ | ------------------------------------- |
+| **Layered Architecture** | 分层架构     | 将系统划分为多个层次,每层有明确的职责 |
+| **Controller**           | 控制器       | 接收 HTTP 请求,调用 Service,返回响应  |
+| **Service**              | 服务         | 封装业务逻辑,协调多个 Repository      |
+| **Repository**           | 仓储         | 封装数据访问逻辑,执行 CRUD 操作       |
+| **Domain**               | 领域         | 定义业务实体、值对象和业务规则        |
+| **DTO**                  | 数据传输对象 | 层与层之间传递数据的载体              |
+| **Entity**               | 实体         | 有唯一标识的领域对象,对应数据库表     |
+| **Value Object**         | 值对象       | 没有唯一标识,通过属性值判断相等的对象 |
+| **Dependency Inversion** | 依赖倒置     | 高层模块不应依赖低层模块,都应依赖抽象 |
+| **Transaction**          | 事务         | 保证一组操作原子性的机制              |
+| **Clean Architecture**   | 整洁架构     | 以领域为核心的架构风格,强调依赖方向   |
+| **Anemic Domain Model**  | 贫血模型     | 实体只有数据没有行为的模型            |
+| **Rich Domain Model**    | 充血模型     | 实体包含数据和业务行为的模型          |
 
 ---
 
-*本文档示例代码基于 Java + Spring Boot，但分层架构的思想适用于任何后端技术栈（Node.js、Python、Go 等）。*
+_本文档示例代码基于 Java + Spring Boot,但分层架构的思想适用于任何后端技术栈(Node.js、Python、Go 等)。_
diff --git a/docs/zh-cn/appendix/canvas-intro.md b/docs/zh-cn/appendix/canvas-intro.md
index f2222c5..67e0d69 100644
--- a/docs/zh-cn/appendix/canvas-intro.md
+++ b/docs/zh-cn/appendix/canvas-intro.md
@@ -1,94 +1,112 @@
-# Canvas 2D 入门：从像素到动画（交互式教程）
+# Canvas 2D 入门:从像素到动画
 
-> **学习指南**：本章节无需深厚的前端基础，通过交互式演示带你掌握 Canvas 2D 的核心原理和实践技巧。我们将从最基础的绘制开始，一直到构建复杂的交互式图形应用。
+::: tip 🎯 核心问题
+**如何在网页上画图、做动画、甚至开发游戏?** Canvas 提供了一个强大的 2D 绘图能力,让你用代码创造视觉内容。
+:::
 
-## 0. 引言：Canvas 是什么
+---
 
-Canvas（画布）是 HTML5 提供的一个通过 JavaScript 绘制 2D 图形的元素。你可以把它想象成一张**数字画布**，上面可以用代码"画"出任何东西：简单的形状、复杂的图表、流畅的动画，甚至是完整的游戏。
+## 1. 为什么要学 Canvas?
 
-### 0.1 Canvas vs SVG：有什么区别？
+### 1.1 Canvas 是什么?
 
-在 Web 开发中，绘制图形主要有两种方式：Canvas 和 SVG（Scalable Vector Graphics）。它们各有优劣：
+**Canvas (画布)** 是 HTML5 提供的一个通过 JavaScript 绘制 2D 图形的元素。
+
+你可以把它想象成一张**数字画布**:
+
+- 🖌️ 你可以用代码"画笔"在上面作画
+- 🎨 可以画任何东西: 简单的形状、复杂的图表、流畅的动画
+- 🎮 甚至可以做成完整的游戏
+
+::: tip 💡 Canvas vs SVG:有什么区别?
+
+在 Web 开发中,绘制图形主要有两种方式:
 
 | 特性     | Canvas               | SVG                   |
-| :------- | :------------------- | :-------------------- |
-| **类型** | 位图（光栅图形）     | 矢量图形              |
+| -------- | -------------------- | --------------------- |
+| **类型** | 位图(光栅图形)       | 矢量图形              |
 | **DOM**  | 单个 `<canvas>` 元素 | 每个图形都是 DOM 元素 |
 | **交互** | 需要手动计算碰撞     | 天然支持事件绑定      |
 | **性能** | 适合大量对象         | 适合少量复杂对象      |
 | **缩放** | 放大会失真           | 无限缩放不失真        |
 | **应用** | 游戏、数据可视化     | 图标、插画            |
 
-**简单总结**：
+**简单总结**:
 
-- **Canvas** = 像素画，画完就变成像素，性能好但交互麻烦
-- **SVG** = 矢量图，每个图形都是对象，交互方便但对象多了会慢
+- **Canvas** = 像素画,画完就变成像素,性能好但交互麻烦
+- **SVG** = 矢量图,每个图形都是对象,交互方便但对象多了会慢
+  :::
 
-### 0.2 Canvas 的应用场景
+### 1.2 Canvas 的应用场景
 
-Canvas 的用途非常广泛，你可能在很多地方都见过它：
+Canvas 的用途非常广泛,你可能每天都在用:
 
-1. **数据可视化**：折线图、饼图、热力图（如 ECharts、Chart.js）
-2. **游戏开发**：网页游戏（如 Phaser.js 引擎）
-3. **图像处理**：图片裁剪、滤镜、拼图（如 Fabric.js）
-4. **创意效果**：粒子特效、动画背景（如 Three.js 的 2D 渲染）
-5. **工程绘图**：CAD、流程图、思维导图
+1. **数据可视化**: ECharts、Chart.js 的图表
+2. **游戏开发**: 网页游戏(如 Phaser.js 引擎)
+3. **图像处理**: 图片裁剪、滤镜、拼图(如 Fabric.js)
+4. **创意效果**: 粒子特效、动画背景
+5. **工程绘图**: CAD、流程图、思维导图
 
 ---
 
-## 1. Canvas 基础
+## 2. Canvas 基础
 
-### 1.1 Canvas 元素和上下文
+### 2.1 Canvas 元素和上下文
 
-使用 Canvas 的第一步是在 HTML 中创建一个 `<canvas>` 元素：
+使用 Canvas 的第一步是在 HTML 中创建一个 `<canvas>` 元素:
 
 ```html
 <canvas id="myCanvas" width="600" height="400"></canvas>
 ```
 
-然后通过 JavaScript 获取**渲染上下文（Rendering Context）**：
+然后通过 JavaScript 获取**渲染上下文 (Rendering Context)**:
 
 ```javascript
 const canvas = document.getElementById('myCanvas')
 const ctx = canvas.getContext('2d') // 获取 2D 上下文
 ```
 
-**关键概念**：
+::: tip 💡 关键概念
 
-- `canvas` 是 DOM 元素，控制画布的大小和位置
-- `ctx` 是绘图工具，所有的绘制操作都通过它完成
-- `'2d'` 表示使用 2D 渲染上下文（WebGL 使用 `'webgl'`）
+- **canvas** 是 DOM 元素,控制画布的大小和位置
+- **ctx** 是绘图工具,所有的绘制操作都通过它完成
+- **`"2d"`** 表示使用 2D 渲染上下文(WebGL 使用 `"webgl"`)
+  :::
 
-> 🕹️ **交互演示**：点击下方按钮，体验 Canvas 的基本绘图操作。
+### 2.2 坐标系统:Canvas 的"地图规则"
 
-<CanvasBasicsDemo />
+Canvas 使用的是**屏幕坐标系**,这与传统数学坐标系有所不同:
 
-### 1.2 坐标系统
-
-Canvas 使用的是**屏幕坐标系**，这与传统数学坐标系有所不同：
-
-- **原点 (0, 0)**：在左上角（不是中心）
-- **X 轴**：向右为正方向
-- **Y 轴**：向下为正方向（注意：数学坐标系中 Y 轴向上）
-- **单位**：像素（px）
+- **原点 (0, 0)**: 在**左上角**(不是中心)
+- **X 轴**: 向右为正方向
+- **Y 轴**: **向下**为正方向(注意: 数学坐标系中 Y 轴向上)
+- **单位**: 像素 (px)
 
 ```javascript
-// 在左上角绘制一个点
+// 在左上角绘制一个矩形
 ctx.fillRect(0, 0, 10, 10)
 
-// 在右下角绘制一个点
+// 在右下角绘制一个矩形
 ctx.fillRect(canvas.width - 10, canvas.height - 10, 10, 10)
 ```
 
-> 🕹️ **交互演示**：拖动下方的点，感受 Canvas 的坐标系统。
+::: tip 💡 记忆技巧
 
-<CoordinateSystemDemo />
+想象你在看**屏幕**:
 
-### 1.3 绘制基本形状
+- 向右移 → X 增加 ✅
+- 向下移(滚动页面) → Y 增加 ✅
+- 向左移 → X 减少
+- 向上移(向上滚动) → Y 减少
 
-Canvas 提供了几种绘制基本形状的方法：
+这就是 Canvas 的坐标规则。
+:::
 
-#### 矩形
+### 2.3 绘制基本形状
+
+Canvas 提供了几种绘制基本形状的方法:
+
+**矩形**:
 
 ```javascript
 // 填充矩形
@@ -104,7 +122,7 @@ ctx.strokeRect(x, y, width, height)
 ctx.clearRect(x, y, width, height)
 ```
 
-#### 圆形
+**圆形**:
 
 ```javascript
 ctx.beginPath()
@@ -112,18 +130,16 @@ ctx.arc(x, y, radius, startAngle, endAngle)
 ctx.fill() // 或 ctx.stroke()
 ```
 
-**参数说明**：
+**参数说明**:
 
-- `x, y`：圆心坐标
-- `radius`：半径
-- `startAngle, endAngle`：起始和结束角度（弧度制）
+- **x, y**: 圆心坐标
+- **radius**: 半径
+- **startAngle, endAngle**: 起始和结束角度(弧度制)
   - `0` = 3 点钟方向
   - `Math.PI / 2` = 6 点钟方向
   - `Math.PI` = 9 点钟方向
-  - `Math.PI * 1.5` = 12 点钟方向
-  - `Math.PI * 2` = 回到 3 点钟方向
 
-#### 线条
+**线条**:
 
 ```javascript
 ctx.beginPath()
@@ -132,15 +148,15 @@ ctx.lineTo(x2, y2) // 终点
 ctx.stroke()
 ```
 
-### 1.4 颜色和渐变
+### 2.4 颜色和样式
 
-Canvas 支持多种颜色设置方式：
+Canvas 支持多种颜色设置方式:
 
 ```javascript
 // 纯色
 ctx.fillStyle = '#3498db' // 十六进制
 ctx.fillStyle = 'rgb(52, 152, 219)' // RGB
-ctx.fillStyle = 'rgba(52, 152, 219, 0.5)' // RGBA（带透明度）
+ctx.fillStyle = 'rgba(52, 152, 219, 0.5)' // RGBA(带透明度)
 
 // 线性渐变
 const gradient = ctx.createLinearGradient(x1, y1, x2, y2)
@@ -157,32 +173,32 @@ ctx.fillStyle = radialGradient
 
 ---
 
-## 2. 路径与形状
+## 3. 路径:Canvas 的"笔画"
 
-### 2.1 路径 (Path) 的概念
+### 3.1 什么是路径?
 
-**路径**是 Canvas 中的核心概念，它是由一系列点连接成的"轨迹"。你可以把它想象成用笔画线的过程：
+**路径 (Path)** 是 Canvas 中的核心概念。你可以把它想象成用笔画线的过程:
 
-1. `beginPath()` - 开始新路径（拿起笔）
-2. `moveTo()` - 移动到起点（不画线）
-3. `lineTo()` / `arc()` / `curveTo()` - 绘制线条或曲线
-4. `closePath()` - 闭合路径（可选）
-5. `fill()` / `stroke()` - 填充或描边
+1. **`beginPath()`** - 开始新路径(拿起笔)
+2. **`moveTo()`** - 移动到起点(不画线)
+3. **`lineTo()` / `arc()`** - 绘制线条或曲线
+4. **`closePath()`** - 闭合路径(可选)
+5. **`fill()` / `stroke()`** - 填充或描边
 
 ```javascript
 ctx.beginPath()
 ctx.moveTo(100, 100) // 移动到起点
 ctx.lineTo(200, 100) // 画横线
 ctx.lineTo(150, 150) // 画斜线
-ctx.closePath() // 闭合路径（回到起点）
+ctx.closePath() // 闭合路径(回到起点)
 ctx.fill() // 填充
 ```
 
-### 2.2 绘制复杂形状
+### 3.2 绘制复杂形状
 
-通过组合路径，可以绘制任意复杂的形状：
+通过组合路径,可以绘制任意复杂的形状。
 
-#### 三角形
+**三角形**:
 
 ```javascript
 ctx.beginPath()
@@ -194,114 +210,17 @@ ctx.fillStyle = '#e74c3c'
 ctx.fill()
 ```
 
-#### 星形
-
-```javascript
-function drawStar(ctx, cx, cy, spikes, outerRadius, innerRadius) {
-  let rot = (Math.PI / 2) * 3
-  let x = cx
-  let y = cy
-  const step = Math.PI / spikes
-
-  ctx.beginPath()
-  ctx.moveTo(cx, cy - outerRadius)
-
-  for (let i = 0; i < spikes; i++) {
-    x = cx + Math.cos(rot) * outerRadius
-    y = cy + Math.sin(rot) * outerRadius
-    ctx.lineTo(x, y)
-    rot += step
-
-    x = cx + Math.cos(rot) * innerRadius
-    y = cy + Math.sin(rot) * innerRadius
-    ctx.lineTo(x, y)
-    rot += step
-  }
-
-  ctx.lineTo(cx, cy - outerRadius)
-  ctx.closePath()
-  ctx.fill()
-}
-
-drawStar(ctx, 150, 150, 5, 50, 25)
-```
-
----
-
-## 3. 文本与图片
-
-### 3.1 绘制文本
-
-Canvas 也可以绘制文本：
-
-```javascript
-// 填充文本
-ctx.font = '30px Arial'
-ctx.fillStyle = '#2c3e50'
-ctx.fillText('Hello Canvas', x, y)
-
-// 描边文本
-ctx.font = 'bold 40px Arial'
-ctx.strokeStyle = '#e74c3c'
-ctx.lineWidth = 2
-ctx.strokeText('Hello Canvas', x, y)
-
-// 文本对齐
-ctx.textAlign = 'center' // left, center, right
-ctx.textBaseline = 'middle' // top, middle, bottom
-ctx.fillText('Centered', canvas.width / 2, canvas.height / 2)
-```
-
-### 3.2 加载和绘制图片
-
-```javascript
-const img = new Image()
-img.src = 'image.png'
-img.onload = () => {
-  // 绘制图片
-  ctx.drawImage(img, x, y)
-
-  // 缩放图片
-  ctx.drawImage(img, x, y, width, height)
-
-  // 裁剪图片
-  ctx.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
-}
-```
-
-**参数说明**：
-
-- `sx, sy, sWidth, sHeight`：源图像的裁剪区域
-- `dx, dy, dWidth, dHeight`：目标画布的绘制区域
-
-### 3.3 裁剪与合成
-
-```javascript
-// 裁剪区域
-ctx.save()
-ctx.beginPath()
-ctx.arc(x, y, radius, 0, Math.PI * 2)
-ctx.clip() // 之后的所有绘制都只会显示在圆形内
-ctx.drawImage(img, 0, 0)
-ctx.restore()
-
-// 全局合成操作
-ctx.globalCompositeOperation = 'source-over' // 默认
-ctx.globalCompositeOperation = 'destination-over' // 绘制在现有内容后面
-ctx.globalCompositeOperation = 'source-in' // 只保留重叠部分
-```
-
 ---
 
 ## 4. 动画基础
 
-### 4.1 requestAnimationFrame
+### 4.1 动画循环
 
-在 Canvas 中创建动画，核心是使用 `requestAnimationFrame` 方法。它是浏览器专门为动画优化的 API：
+在 Canvas 中创建动画,核心是使用 **`requestAnimationFrame`** 方法。
 
 ```javascript
 function animate() {
-  // 1. 清除画布（或绘制半透明背景产生拖尾效果）
+  // 1. 清除画布(或绘制半透明背景产生拖尾效果)
   ctx.clearRect(0, 0, canvas.width, canvas.height)
 
   // 2. 更新状态
@@ -318,93 +237,35 @@ function animate() {
 animate()
 ```
 
-**为什么用 requestAnimationFrame 而不是 setInterval？**
+::: tip 💡 为什么用 requestAnimationFrame 而不是 setInterval?
 
-- 自动优化，通常为 60FPS（每秒 60 帧）
-- 页面不可见时自动暂停，节省资源
-- 与浏览器刷新周期同步，避免画面撕裂
+- ✅ 自动优化,通常为 60FPS(每秒 60 帧)
+- ✅ 页面不可见时自动暂停,节省资源
+- ✅ 与浏览器刷新周期同步,避免画面撕裂
+  :::
 
-> 🕹️ **交互演示**：点击播放，观察不同类型的动画效果。
+### 4.2 动画的本质
 
-<AnimationLoopDemo />
+动画的本质是**快速连续绘制静态画面**。每帧需要:
 
-### 4.2 清除与重绘
-
-动画的本质是**快速连续绘制静态画面**。每帧需要：
-
-1. **清除旧画面**：`ctx.clearRect()` 或用半透明背景覆盖
-2. **更新状态**：计算新位置、新角度等
-3. **绘制新画面**：重新绘制所有对象
+1. **清除旧画面**: `ctx.clearRect()` 或用半透明背景覆盖
+2. **更新状态**: 计算新位置、新角度等
+3. **绘制新画面**: 重新绘制所有对象
 
 ```javascript
-// 方法1：完全清除
+// 清除画布
 ctx.clearRect(0, 0, canvas.width, canvas.height)
 
-// 方法2：半透明背景（产生拖尾效果）
+// 半透明背景(产生拖尾效果)
 ctx.fillStyle = 'rgba(255, 255, 255, 0.1)'
 ctx.fillRect(0, 0, canvas.width, canvas.height)
-
-// 方法3：只清除变化区域（脏矩形优化）
-objects.forEach((obj) => {
-  if (obj.moved) {
-    ctx.clearRect(obj.oldX, obj.oldY, obj.size, obj.size)
-    obj.draw(ctx)
-  }
-})
-```
-
-### 4.3 动画循环
-
-一个完整的动画循环示例：
-
-```javascript
-let ball = {
-  x: 300,
-  y: 200,
-  vx: 2,
-  vy: 3,
-  radius: 20
-}
-
-function update() {
-  // 更新位置
-  ball.x += ball.vx
-  ball.y += ball.vy
-
-  // 边界碰撞
-  if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
-    ball.vx = -ball.vx
-  }
-  if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
-    ball.vy = -ball.vy
-  }
-}
-
-function draw() {
-  // 清除画布
-  ctx.clearRect(0, 0, canvas.width, canvas.height)
-
-  // 绘制球
-  ctx.beginPath()
-  ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2)
-  ctx.fillStyle = '#3498db'
-  ctx.fill()
-}
-
-function animate() {
-  update()
-  draw()
-  requestAnimationFrame(animate)
-}
-
-animate()
 ```
 
 ---
 
 ## 5. 事件处理
 
-Canvas 只是一个 DOM 元素，不像 SVG 那样每个图形都是独立的 DOM 元素。因此，我们需要**手动处理交互事件**。
+Canvas 只是一个 DOM 元素,不像 SVG 那样每个图形都是独立的 DOM 元素。因此,我们需要**手动处理交互事件**。
 
 ### 5.1 鼠标事件
 
@@ -466,168 +327,15 @@ canvas.addEventListener('mouseup', () => {
 })
 ```
 
-### 5.3 键盘事件
-
-```javascript
-canvas.tabIndex = 0 // 使 canvas 可以获取焦点
-canvas.focus()
-
-canvas.addEventListener('keydown', (e) => {
-  const step = 10
-
-  switch (e.key) {
-    case 'ArrowUp':
-      selectedObject.y -= step
-      break
-    case 'ArrowDown':
-      selectedObject.y += step
-      break
-    case 'ArrowLeft':
-      selectedObject.x -= step
-      break
-    case 'ArrowRight':
-      selectedObject.x += step
-      break
-    case 'Delete':
-      objects = objects.filter((obj) => obj !== selectedObject)
-      break
-  }
-
-  draw()
-})
-```
-
-> 🕹️ **交互演示**：尝试在下方的 Canvas 中点击、拖拽、悬停，体验不同的事件处理方式。
-
-<EventHandlingDemo />
-
 ---
 
-## 6. 实战案例
+## 6. 性能优化
 
-### 6.1 绘制折线图
+随着绘制的对象增多,Canvas 性能会下降。以下是一些常用的优化技巧:
 
-```javascript
-const data = [10, 50, 30, 80, 60, 90, 40]
+### 6.1 离屏 Canvas (Offscreen Canvas)
 
-function drawLineChart(ctx, data) {
-  const padding = 50
-  const chartWidth = canvas.width - padding * 2
-  const chartHeight = canvas.height - padding * 2
-  const maxValue = Math.max(...data)
-
-  // 绘制坐标轴
-  ctx.beginPath()
-  ctx.moveTo(padding, padding)
-  ctx.lineTo(padding, canvas.height - padding)
-  ctx.lineTo(canvas.width - padding, canvas.height - padding)
-  ctx.strokeStyle = '#2c3e50'
-  ctx.stroke()
-
-  // 绘制折线
-  ctx.beginPath()
-  data.forEach((value, index) => {
-    const x = padding + (index / (data.length - 1)) * chartWidth
-    const y = canvas.height - padding - (value / maxValue) * chartHeight
-
-    if (index === 0) {
-      ctx.moveTo(x, y)
-    } else {
-      ctx.lineTo(x, y)
-    }
-  })
-  ctx.strokeStyle = '#3498db'
-  ctx.lineWidth = 2
-  ctx.stroke()
-
-  // 绘制数据点
-  data.forEach((value, index) => {
-    const x = padding + (index / (data.length - 1)) * chartWidth
-    const y = canvas.height - padding - (value / maxValue) * chartHeight
-
-    ctx.beginPath()
-    ctx.arc(x, y, 5, 0, Math.PI * 2)
-    ctx.fillStyle = '#e74c3c'
-    ctx.fill()
-  })
-}
-```
-
-### 6.2 简单粒子系统
-
-粒子系统是游戏和特效中常见的技术，它由大量小粒子组成，每个粒子有独立的位置、速度、生命周期等属性。
-
-```javascript
-class Particle {
-  constructor(x, y) {
-    this.x = x
-    this.y = y
-    this.vx = (Math.random() - 0.5) * 4
-    this.vy = (Math.random() - 0.5) * 4
-    this.life = 1.0
-    this.color = `hsl(${Math.random() * 360}, 70%, 50%)`
-  }
-
-  update() {
-    this.x += this.vx
-    this.y += this.vy
-    this.life -= 0.02
-  }
-
-  draw(ctx) {
-    ctx.globalAlpha = this.life
-    ctx.fillStyle = this.color
-    ctx.beginPath()
-    ctx.arc(this.x, this.y, 3, 0, Math.PI * 2)
-    ctx.fill()
-    ctx.globalAlpha = 1.0
-  }
-
-  isDead() {
-    return this.life <= 0
-  }
-}
-
-// 动画循环
-let particles = []
-
-function animate() {
-  ctx.clearRect(0, 0, canvas.width, canvas.height)
-
-  // 更新和绘制粒子
-  particles = particles.filter((p) => !p.isDead())
-  particles.forEach((p) => {
-    p.update()
-    p.draw(ctx)
-  })
-
-  requestAnimationFrame(animate)
-}
-
-// 鼠标移动产生粒子
-canvas.addEventListener('mousemove', (e) => {
-  const { x, y } = getMousePos(e)
-  for (let i = 0; i < 3; i++) {
-    particles.push(new Particle(x, y))
-  }
-})
-
-animate()
-```
-
-> 🕹️ **交互演示**：在下方 Canvas 中移动鼠标，体验不同的粒子效果。
-
-<ParticleSystemDemo />
-
----
-
-## 7. 性能优化
-
-随着绘制的对象增多，Canvas 性能会下降。以下是一些常用的优化技巧：
-
-### 7.1 离屏 Canvas (Offscreen Canvas)
-
-预渲染静态内容到离屏 Canvas，减少每帧的绘制操作：
+预渲染静态内容到离屏 Canvas,减少每帧的绘制操作:
 
 ```javascript
 // 创建离屏 Canvas
@@ -640,7 +348,6 @@ offscreenCanvas.height = 400
 function drawBackground(ctx) {
   ctx.fillStyle = '#f0f0f0'
   ctx.fillRect(0, 0, 600, 400)
-  // 绘制网格...
 }
 drawBackground(offscreenCtx)
 
@@ -654,33 +361,9 @@ function draw() {
 }
 ```
 
-### 7.2 图层管理
+### 6.2 减少重绘(脏矩形优化)
 
-将静态背景和动态对象分层渲染：
-
-```javascript
-// 背景层（只绘制一次）
-const backgroundLayer = document.createElement('canvas')
-// ... 绘制静态背景
-
-// 动态层（每帧重绘）
-const dynamicLayer = canvas
-
-function draw() {
-  // 清除动态层
-  ctx.clearRect(0, 0, canvas.width, canvas.height)
-
-  // 绘制背景层
-  ctx.drawImage(backgroundLayer, 0, 0)
-
-  // 绘制动态对象
-  objects.forEach((obj) => obj.draw(ctx))
-}
-```
-
-### 7.3 减少重绘
-
-只重绘变化的部分（脏矩形优化）：
+只重绘变化的部分:
 
 ```javascript
 function draw() {
@@ -703,9 +386,9 @@ function draw() {
 }
 ```
 
-### 7.4 批量渲染
+### 6.3 批量渲染
 
-减少状态切换（fillStyle、strokeStyle 等）：
+减少状态切换(fillStyle、strokeStyle 等):
 
 ```javascript
 // 按颜色分组
@@ -728,19 +411,15 @@ Object.keys(batches).forEach((color) => {
 })
 ```
 
-> 🕹️ **交互演示**：对比不同优化技术的性能差异。
-
-<PerformanceDemo />
-
 ---
 
-## 8. 常见库与框架
+## 7. 常见库与框架
 
-虽然原生 Canvas 已经很强大，但在实际项目中，使用成熟的库可以大大提高开发效率。
+虽然原生 Canvas 已经很强大,但在实际项目中,使用成熟的库可以大大提高开发效率。
 
-### 8.1 Fabric.js
+### 7.1 Fabric.js
 
-**特点**：对象模型，支持交互
+**特点**: 对象模型,支持交互
 
 ```javascript
 const canvas = new fabric.Canvas('c')
@@ -762,38 +441,11 @@ circle.on('click', () => {
 })
 ```
 
-**适用场景**：图片编辑器、白板工具、图形设计工具
+**适用场景**: 图片编辑器、白板工具、图形设计工具
 
-### 8.2 Konva.js
+### 7.2 PixiJS (WebGL)
 
-**特点**：高性能，支持动画和滤镜
-
-```javascript
-const stage = new Konva.Stage({
-  container: 'container',
-  width: 600,
-  height: 400
-})
-
-const layer = new Konva.Layer()
-stage.add(layer)
-
-const circle = new Konva.Circle({
-  x: 300,
-  y: 200,
-  radius: 50,
-  fill: '#3498db',
-  draggable: true
-})
-
-layer.add(circle)
-```
-
-**适用场景**：复杂的图形应用、动画演示
-
-### 8.3 PixiJS (WebGL)
-
-**特点**：WebGL 加速，超高性能
+**特点**: WebGL 加速,超高性能
 
 ```javascript
 const app = new PIXI.Application({
@@ -810,60 +462,24 @@ graphics.endFill()
 app.stage.addChild(graphics)
 ```
 
-**适用场景**：大型游戏、粒子系统、大量对象的场景
-
-### 8.4 Three.js (3D)
-
-虽然 Three.js 主要用于 3D，但也支持 2D 渲染：
-
-```javascript
-const scene = new THREE.Scene()
-const camera = new THREE.OrthographicCamera(0, 600, 400, 0, 1, 1000)
-const renderer = new THREE.WebGLRenderer()
-renderer.setSize(600, 400)
-document.body.appendChild(renderer.domElement)
-
-const geometry = new THREE.CircleGeometry(50, 32)
-const material = new THREE.MeshBasicMaterial({ color: 0x3498db })
-const circle = new THREE.Mesh(geometry, material)
-circle.position.set(300, 200, 0)
-scene.add(circle)
-
-function animate() {
-  requestAnimationFrame(animate)
-  renderer.render(scene, camera)
-}
-animate()
-```
-
-**适用场景**：2.5D 游戏、混合 2D/3D 应用
-
-### 8.5 选择建议
-
-| 库              | 优势               | 劣势       | 适用场景         |
-| :-------------- | :----------------- | :--------- | :--------------- |
-| **原生 Canvas** | 轻量、无依赖       | 开发效率低 | 学习、简单图形   |
-| **Fabric.js**   | 对象模型、交互友好 | 性能一般   | 图片编辑器、白板 |
-| **Konva.js**    | 高性能、API 简洁   | 体积较大   | 复杂图形应用     |
-| **PixiJS**      | 超高性能、WebGL    | 学习曲线陡 | 大型游戏         |
-| **Three.js**    | 3D 能力强          | 过于重量级 | 2.5D 游戏        |
+**适用场景**: 大型游戏、粒子系统、大量对象的场景
 
 ---
 
-## 9. 总结与最佳实践
+## 8. 总结与最佳实践
 
-### 9.1 核心要点回顾
+### 8.1 核心要点回顾
 
-1. **Canvas 是位图画布**：绘制后就是像素，无法直接修改已有内容
-2. **坐标系统**：原点在左上角，Y 轴向下为正
-3. **路径系统**：beginPath → moveTo → lineTo → fill/stroke
-4. **动画原理**：清除 → 更新 → 绘制 → requestAnimationFrame
-5. **事件处理**：需要手动计算碰撞检测
-6. **性能优化**：离屏 Canvas、脏矩形、批量渲染
+1. **Canvas 是位图画布**: 绘制后就是像素,无法直接修改已有内容
+2. **坐标系统**: 原点在左上角,Y 轴向下为正
+3. **路径系统**: beginPath → moveTo → lineTo → fill/stroke
+4. **动画原理**: 清除 → 更新 → 绘制 → requestAnimationFrame
+5. **事件处理**: 需要手动计算碰撞
+6. **性能优化**: 离屏 Canvas、脏矩形、批量渲染
 
-### 9.2 最佳实践
+### 8.2 最佳实践
 
-#### 代码组织
+**代码组织**:
 
 ```javascript
 // 使用类封装对象
@@ -889,81 +505,48 @@ class GameObject {
 }
 ```
 
-#### 性能优化清单
+**性能优化清单**:
 
 - ✅ 使用 `requestAnimationFrame` 而不是 `setInterval`
-- ✅ 减少状态切换（按颜色分组绘制）
+- ✅ 减少状态切换(按颜色分组绘制)
 - ✅ 使用离屏 Canvas 预渲染静态内容
-- ✅ 只重绘变化的部分（脏矩形）
-- ✅ 限制对象数量，使用对象池
+- ✅ 只重绘变化的部分(脏矩形)
+- ✅ 限制对象数量,使用对象池
 - ✅ 避免 `save()` 和 `restore()` 的频繁调用
 
-#### 调试技巧
+---
 
-```javascript
-// 绘制边界框（用于调试）
-function drawBoundingBox(ctx, obj) {
-  ctx.strokeStyle = '#e74c3c'
-  ctx.lineWidth = 1
-  ctx.strokeRect(
-    obj.x - obj.radius,
-    obj.y - obj.radius,
-    obj.radius * 2,
-    obj.radius * 2
-  )
-}
+## 9. 名词速查表 (Glossary)
 
-// 显示 FPS
-let lastTime = performance.now()
-let frameCount = 0
-
-function showFPS() {
-  const now = performance.now()
-  frameCount++
-
-  if (now >= lastTime + 1000) {
-    console.log(`FPS: ${frameCount}`)
-    frameCount = 0
-    lastTime = now
-  }
-
-  requestAnimationFrame(showFPS)
-}
-showFPS()
-```
-
-### 9.3 学习路线
-
-1. **入门**：掌握基本形状绘制和颜色
-2. **进阶**：学习动画原理和事件处理
-3. **实战**：制作小游戏（贪吃蛇、打砖块）
-4. **优化**：学习性能优化技巧
-5. **扩展**：尝试成熟的 Canvas 库（Fabric.js、Konva）
+| 名词                      | 解释                                                                    |
+| ------------------------- | ----------------------------------------------------------------------- |
+| **Context / 上下文**      | Canvas 的渲染环境,通过 `getContext("2d")` 获取,所有绘制操作都通过它完成 |
+| **Path / 路径**           | 由一系列点连接成的轨迹,是 Canvas 绘图的基础                             |
+| **Stroke / 描边**         | 绘制路径的轮廓线                                                        |
+| **Fill / 填充**           | 用颜色填充路径内部                                                      |
+| **requestAnimationFrame** | 浏览器提供的动画 API,在每次重绘前调用回调函数                           |
+| **Offscreen Canvas**      | 离屏 Canvas,用于预渲染静态内容以提高性能                                |
+| **Dirty Rect**            | 脏矩形优化,只重绘变化的部分                                             |
+| **Collision Detection**   | 碰撞检测,判断鼠标或对象是否点击了某个图形                               |
+| **Raster vs Vector**      | 位图 vs 矢量图,Canvas 是位图,SVG 是矢量图                               |
 
 ---
 
-## 10. 名词速查表 (Glossary)
+## 总结
 
-| 名词                      | 解释                                                                      |
-| :------------------------ | :------------------------------------------------------------------------ |
-| **Context / 上下文**      | Canvas 的渲染环境，通过 `getContext('2d')` 获取，所有绘制操作都通过它完成 |
-| **Path / 路径**           | 由一系列点连接成的轨迹，是 Canvas 绘图的基础                              |
-| **Stroke / 描边**         | 绘制路径的轮廓线                                                          |
-| **Fill / 填充**           | 用颜色填充路径内部                                                        |
-| **requestAnimationFrame** | 浏览器提供的动画 API，在每次重绘前调用回调函数                            |
-| **Offscreen Canvas**      | 离屏 Canvas，用于预渲染静态内容以提高性能                                 |
-| **Dirty Rect**            | 脏矩形优化，只重绘变化的部分                                              |
-| **Particle System**       | 粒子系统，由大量小粒子组成的特效系统                                      |
-| **Collision Detection**   | 碰撞检测，判断鼠标或对象是否点击了某个图形                                |
-| **Raster vs Vector**      | 位图 vs 矢量图，Canvas 是位图，SVG 是矢量图                               |
+现在你已经掌握了 Canvas 2D 的核心概念:
 
----
+- **基本绘图**: 矩形、圆形、线条
+- **样式控制**: 颜色、渐变、阴影
+- **动画制作**: requestAnimationFrame + 清除重绘
+- **交互处理**: 鼠标事件、碰撞检测
+- **性能优化**: 离屏 Canvas、批量渲染
 
-**下一步建议**：
+**下一步建议**:
 
-- 如果你想深入学习 Canvas 动画，可以尝试制作一个**贪吃蛇游戏**或**打砖块游戏**
-- 如果你对数据可视化感兴趣，可以学习 **ECharts** 或 **D3.js**
-- 如果你想做游戏开发，可以尝试 **Phaser.js** 游戏引擎
-- 如果你对 WebGL 感兴趣，可以学习 **Three.js** 或 **PixiJS**
+- 如果你想深入学习动画,可以尝试制作一个**贪吃蛇游戏**或**打砖块游戏**
+- 如果你对数据可视化感兴趣,可以学习 **ECharts** 或 **D3.js**
+- 如果你想做游戏开发,可以尝试 **Phaser.js** 游戏引擎
+- 如果你对 WebGL 感兴趣,可以学习 **Three.js** 或 **PixiJS**
 
-祝你学习愉快！🎨
+祝你学习愉快! 🎨
diff --git a/docs/zh-cn/appendix/cloud-iam.md b/docs/zh-cn/appendix/cloud-iam.md
index 680ba5a..f29cc0b 100644
--- a/docs/zh-cn/appendix/cloud-iam.md
+++ b/docs/zh-cn/appendix/cloud-iam.md
@@ -36,12 +36,12 @@
 
 想象一下，你们公司搬到了一栋新写字楼：
 
-| 场景 | 没有 IAM 的做法 | 有 IAM 的做法 |
-| :--- | :--- | :--- |
-| 新员工入职 | 给他一把能开所有门的万能钥匙 | 给他一张门禁卡，只能刷他办公区域的门 |
-| 员工离职 | 钥匙丢了就丢了，也不知道谁拿着 | 立即在系统里注销他的门禁卡，所有门都打不开了 |
-| 外包人员 | 把钥匙借给他几天 | 发临时门禁卡，设置3天后自动失效 |
-| 访客 | 前台配一把钥匙给他 | 发一次性访客码，只能进会议室 |
+| 场景       | 没有 IAM 的做法                | 有 IAM 的做法                                |
+| :--------- | :----------------------------- | :------------------------------------------- |
+| 新员工入职 | 给他一把能开所有门的万能钥匙   | 给他一张门禁卡，只能刷他办公区域的门         |
+| 员工离职   | 钥匙丢了就丢了，也不知道谁拿着 | 立即在系统里注销他的门禁卡，所有门都打不开了 |
+| 外包人员   | 把钥匙借给他几天               | 发临时门禁卡，设置3天后自动失效              |
+| 访客       | 前台配一把钥匙给他             | 发一次性访客码，只能进会议室                 |
 
 **IAM（Identity and Access Management，身份与访问管理）**，就像是这套"智能门禁系统"：
 
@@ -55,13 +55,13 @@
 
 不同的云厂商都有自己的 IAM 实现：
 
-| 云厂商 | 服务名称 | 核心概念 |
-| :--- | :--- | :--- |
-| **AWS** | IAM (Identity and Access Management) | User、Group、Role、Policy |
-| **阿里云** | RAM (Resource Access Management) | 用户、用户组、角色、策略 |
-| **腾讯云** | CAM (Cloud Access Management) | 用户、用户组、角色、策略 |
-| **华为云** | IAM | 用户、用户组、委托、策略 |
-| **Azure** | Azure AD + RBAC | User、Group、Role、RBAC |
+| 云厂商     | 服务名称                             | 核心概念                  |
+| :--------- | :----------------------------------- | :------------------------ |
+| **AWS**    | IAM (Identity and Access Management) | User、Group、Role、Policy |
+| **阿里云** | RAM (Resource Access Management)     | 用户、用户组、角色、策略  |
+| **腾讯云** | CAM (Cloud Access Management)        | 用户、用户组、角色、策略  |
+| **华为云** | IAM                                  | 用户、用户组、委托、策略  |
+| **Azure**  | Azure AD + RBAC                      | User、Group、Role、RBAC   |
 
 虽然名字不同，但**核心概念都是相通的**：
 
@@ -80,11 +80,11 @@
 
 用一个办公室的场景来类比：
 
-| 概念 | 类比 | 适用场景 | 特点 |
-| :--- | :--- | :--- | :--- |
-| **用户（User）** | 正式员工，有自己的工位和门禁卡 | 长期、稳定的团队成员 | 有永久凭证（密码、AK/SK） |
-| **用户组（Group）** | 部门，如"技术部"、"销售部" | 批量管理权限 | 不能登录，只是权限容器 |
-| **角色（Role）** | 临时访客证、外包临时卡 | 临时授权、跨账号访问 | 没有永久凭证，靠"扮演"获取临时凭证 |
+| 概念                | 类比                           | 适用场景             | 特点                               |
+| :------------------ | :----------------------------- | :------------------- | :--------------------------------- |
+| **用户（User）**    | 正式员工，有自己的工位和门禁卡 | 长期、稳定的团队成员 | 有永久凭证（密码、AK/SK）          |
+| **用户组（Group）** | 部门，如"技术部"、"销售部"     | 批量管理权限         | 不能登录，只是权限容器             |
+| **角色（Role）**    | 临时访客证、外包临时卡         | 临时授权、跨账号访问 | 没有永久凭证，靠"扮演"获取临时凭证 |
 
 ### 2.2 真实案例：一个创业公司的权限演进
 
@@ -151,13 +151,13 @@ IAM Role 有两个核心组成部分：
 
 用一个话剧表演的类比：
 
-| 概念 | 类比 | 说明 |
-| :--- | :--- | :--- |
-| **Role（角色）** | 剧本里的"哈姆雷特" | 定义了要演什么戏（权限）|
-| **Trust Policy** | 导演说"谁能演哈姆雷特" | 可能是"本剧团的演员"（本账号用户）、"隔壁剧团借来的演员"（跨账号）、"特邀嘉宾"（外部 IdP）|
-| **Permission Policy** | 剧本内容 | 哈姆雷特能做什么：说台词、决斗、发疯（具体权限）|
-| **Assume Role** | 演员上台表演 | 小李被导演选中演哈姆雷特，上台后他就拥有了剧本里定义的所有权限 |
-| **临时凭证** | 演出证 | 小李拿到一个"临时演出证"，演出结束后就失效了 |
+| 概念                  | 类比                   | 说明                                                                                       |
+| :-------------------- | :--------------------- | :----------------------------------------------------------------------------------------- |
+| **Role（角色）**      | 剧本里的"哈姆雷特"     | 定义了要演什么戏（权限）                                                                   |
+| **Trust Policy**      | 导演说"谁能演哈姆雷特" | 可能是"本剧团的演员"（本账号用户）、"隔壁剧团借来的演员"（跨账号）、"特邀嘉宾"（外部 IdP） |
+| **Permission Policy** | 剧本内容               | 哈姆雷特能做什么：说台词、决斗、发疯（具体权限）                                           |
+| **Assume Role**       | 演员上台表演           | 小李被导演选中演哈姆雷特，上台后他就拥有了剧本里定义的所有权限                             |
+| **临时凭证**          | 演出证                 | 小李拿到一个"临时演出证"，演出结束后就失效了                                               |
 
 ### 3.2 策略（Policy）：权限的"语法"
 
@@ -174,11 +174,7 @@ IAM Policy 是一个 JSON 文档，定义了"谁能对什么资源做什么操
     {
       "Sid": "AllowS3ReadWrite",
       "Effect": "Allow",
-      "Action": [
-        "s3:GetObject",
-        "s3:PutObject",
-        "s3:DeleteObject"
-      ],
+      "Action": ["s3:GetObject", "s3:PutObject", "s3:DeleteObject"],
       "Resource": "arn:aws:s3:::my-app-bucket/*",
       "Condition": {
         "StringEquals": {
@@ -201,15 +197,15 @@ IAM Policy 是一个 JSON 文档，定义了"谁能对什么资源做什么操
 
 **关键字段解释**：
 
-| 字段 | 含义 | 示例 |
-| :--- | :--- | :--- |
-| **Version** | Policy 语法版本 | "2012-10-17" |
-| **Statement** | 权限声明数组，可包含多个规则 | [...] |
-| **Sid** | 声明 ID，可选，用于标识这条规则 | "AllowS3ReadWrite" |
-| **Effect** | 效果：Allow（允许）或 Deny（拒绝） | "Allow" |
-| **Action** | 允许/拒绝的操作，支持通配符 | "s3:GetObject", "s3:*" |
-| **Resource** | 作用的资源，用 ARN 标识 | "arn:aws:s3:::bucket/*" |
-| **Condition** | 可选，满足特定条件时才生效 | 区域限制、MFA 要求等 |
+| 字段          | 含义                               | 示例                     |
+| :------------ | :--------------------------------- | :----------------------- |
+| **Version**   | Policy 语法版本                    | "2012-10-17"             |
+| **Statement** | 权限声明数组，可包含多个规则       | [...]                    |
+| **Sid**       | 声明 ID，可选，用于标识这条规则    | "AllowS3ReadWrite"       |
+| **Effect**    | 效果：Allow（允许）或 Deny（拒绝） | "Allow"                  |
+| **Action**    | 允许/拒绝的操作，支持通配符        | "s3:GetObject", "s3:\*"  |
+| **Resource**  | 作用的资源，用 ARN 标识            | "arn:aws:s3:::bucket/\*" |
+| **Condition** | 可选，满足特定条件时才生效         | 区域限制、MFA 要求等     |
 
 ### 3.3 权限的优先级：Deny > Allow > 默认拒绝
 
@@ -246,6 +242,7 @@ IAM 的权限评估逻辑可以用一句话总结：**显式 Deny 永远赢，
 ```
 
 **关键点**：
+
 - 开发者虽然有 `s3:*` 的 Allow 权限
 - 但敏感目录有显式的 Deny 规则
 - Deny 优先级更高，所以开发者无法访问敏感数据
@@ -261,10 +258,10 @@ IAM 的权限评估逻辑可以用一句话总结：**显式 Deny 永远赢，
 
 Access Key（访问密钥）是云服务提供的一种长期凭证，用于程序化的 API 调用。它由两部分组成：
 
-| 组成部分 | 名称 | 作用 | 类比 |
-| :--- | :--- | :--- | :--- |
-| **Access Key ID** | 访问密钥 ID | 标识你是谁（类似于用户名） | 银行卡号 |
-| **Secret Access Key** | 秘密访问密钥 | 证明你是你（类似于密码） | 银行卡密码 |
+| 组成部分              | 名称         | 作用                       | 类比       |
+| :-------------------- | :----------- | :------------------------- | :--------- |
+| **Access Key ID**     | 访问密钥 ID  | 标识你是谁（类似于用户名） | 银行卡号   |
+| **Secret Access Key** | 秘密访问密钥 | 证明你是你（类似于密码）   | 银行卡密码 |
 
 ### 4.2 为什么 AK/SK 是"高危物品"？
 
@@ -302,12 +299,12 @@ upload_file('./test.jpg', 'my-company-bucket', 'uploads/test.jpg')
 
 **这个案例告诉我们什么？**
 
-| 错误做法 | 正确做法 |
-| :--- | :--- |
-| 把 AK/SK 硬编码在代码中 | 使用 IAM Role，让程序自动获取临时凭证 |
-| 把 AK/SK 提交到 Git 仓库 | 使用 `.gitignore` 忽略配置文件，使用密钥管理服务 |
-| 长期使用同一个 AK/SK 不轮换 | 定期轮换 AK/SK，使用临时凭证替代长期凭证 |
-| 给 AK/SK 分配过大权限 | 遵循最小权限原则，只授予必要的权限 |
+| 错误做法                    | 正确做法                                         |
+| :-------------------------- | :----------------------------------------------- |
+| 把 AK/SK 硬编码在代码中     | 使用 IAM Role，让程序自动获取临时凭证            |
+| 把 AK/SK 提交到 Git 仓库    | 使用 `.gitignore` 忽略配置文件，使用密钥管理服务 |
+| 长期使用同一个 AK/SK 不轮换 | 定期轮换 AK/SK，使用临时凭证替代长期凭证         |
+| 给 AK/SK 分配过大权限       | 遵循最小权限原则，只授予必要的权限               |
 
 ### 4.3 AK/SK 的安全使用指南
 
@@ -356,7 +353,7 @@ jobs:
   deploy:
     runs-on: ubuntu-latest
     permissions:
-      id-token: write  # 关键：允许请求 OIDC token
+      id-token: write # 关键：允许请求 OIDC token
       contents: read
     steps:
       - uses: actions/checkout@v3
@@ -374,13 +371,13 @@ jobs:
 
 **总结：AK/SK 使用的安全层级**
 
-| 安全等级 | 做法 | 适用场景 | 风险等级 |
-| :--- | :--- | :--- | :--- |
-| 最高 | 使用 IAM Role（无长期凭证） | EC2、Lambda、ECS、CI/CD | 极低 |
-| 高 | 使用 OIDC Federation | GitHub Actions、GitLab CI | 低 |
-| 中 | 使用密钥管理服务 | 本地开发、小团队 | 中 |
-| 低 | 使用环境变量 | 快速原型、个人项目 | 高 |
-| 极低 | 硬编码在代码中 | 任何场景都不推荐 | 极高 |
+| 安全等级 | 做法                        | 适用场景                  | 风险等级 |
+| :------- | :-------------------------- | :------------------------ | :------- |
+| 最高     | 使用 IAM Role（无长期凭证） | EC2、Lambda、ECS、CI/CD   | 极低     |
+| 高       | 使用 OIDC Federation        | GitHub Actions、GitLab CI | 低       |
+| 中       | 使用密钥管理服务            | 本地开发、小团队          | 中       |
+| 低       | 使用环境变量                | 快速原型、个人项目        | 高       |
+| 极低     | 硬编码在代码中              | 任何场景都不推荐          | 极高     |
 
 ---
 
@@ -392,21 +389,21 @@ jobs:
 
 MFA（Multi-Factor Authentication，多因素认证），也叫 2FA（Two-Factor Authentication，双因素认证），是一种安全机制，要求用户在登录时提供**两种或以上**不同类型的认证因素：
 
-| 因素类型 | 是什么 | 例子 |
-| :--- | :--- | :--- |
-| **知识因素**（你知道什么） | 只有用户知道的信息 | 密码、PIN 码 |
-| **持有因素**（你有什么） | 用户拥有的物理设备 | 手机、硬件密钥 |
-| **生物因素**（你是什么） | 用户的生物特征 | 指纹、面部识别 |
+| 因素类型                   | 是什么             | 例子           |
+| :------------------------- | :----------------- | :------------- |
+| **知识因素**（你知道什么） | 只有用户知道的信息 | 密码、PIN 码   |
+| **持有因素**（你有什么）   | 用户拥有的物理设备 | 手机、硬件密钥 |
+| **生物因素**（你是什么）   | 用户的生物特征     | 指纹、面部识别 |
 
 ### 5.2 为什么 MFA 这么重要？
 
 **真实数据告诉你答案**：
 
-| 攻击方式 | 没有 MFA 时的成功率 | 有 MFA 时的成功率 |
-| :--- | :--- | :--- |
-| 密码猜测/暴力破解 | 很高 | 极低（还需要第二因素） |
-| 钓鱼攻击获取密码 | 很高 | 极低（钓鱼页面无法获取 MFA 码） |
-| 密码泄露（其他网站泄露）| 很高 | 极低（不知道第二因素） |
+| 攻击方式                 | 没有 MFA 时的成功率 | 有 MFA 时的成功率               |
+| :----------------------- | :------------------ | :------------------------------ |
+| 密码猜测/暴力破解        | 很高                | 极低（还需要第二因素）          |
+| 钓鱼攻击获取密码         | 很高                | 极低（钓鱼页面无法获取 MFA 码） |
+| 密码泄露（其他网站泄露） | 很高                | 极低（不知道第二因素）          |
 
 **微软安全报告（2020）**：启用 MFA 可以阻止 **99.9%** 的自动化攻击。
 
@@ -441,14 +438,14 @@ MFA（Multi-Factor Authentication，多因素认证），也叫 2FA（Two-Factor
 
 随着业务增长，很多公司会使用**多账号架构**来隔离不同环境：
 
-| 账号类型 | 用途 | 权限要求 |
-| :--- | :--- | :--- |
-| **Master Account** | 组织管理、账单结算 | 几乎不使用 |
-| **Security Audit** | 集中收集所有账号的日志 | 只读访问其他账号 |
-| **Shared Services** | 共享资源（镜像仓库等） | 其他账号只读访问 |
-| **Development** | 开发环境 | 开发者完全权限 |
-| **Staging** | 测试/预发布环境 | 测试人员权限 |
-| **Production** | 生产环境 | 严格限制，需要审批 |
+| 账号类型            | 用途                   | 权限要求           |
+| :------------------ | :--------------------- | :----------------- |
+| **Master Account**  | 组织管理、账单结算     | 几乎不使用         |
+| **Security Audit**  | 集中收集所有账号的日志 | 只读访问其他账号   |
+| **Shared Services** | 共享资源（镜像仓库等） | 其他账号只读访问   |
+| **Development**     | 开发环境               | 开发者完全权限     |
+| **Staging**         | 测试/预发布环境        | 测试人员权限       |
+| **Production**      | 生产环境               | 严格限制，需要审批 |
 
 **问题：Shared Services 账号里的镜像，怎么让 Production 账号的 EC2 拉取？**
 
@@ -498,6 +495,7 @@ MFA（Multi-Factor Authentication，多因素认证），也叫 2FA（Two-Factor
 **步骤二：获取 Role ARN**
 
 创建完成后，复制 Role 的 ARN：
+
 ```
 arn:aws:iam::SHARED_SERVICES_ACCOUNT_ID:role/CrossAccountECRReadRole
 ```
@@ -691,38 +689,38 @@ aws ecr describe-repositories --registry-id SHARED_SERVICES_ACCOUNT_ID
 
 ### 8.1 十大 IAM 反模式
 
-| # | 反模式 | 为什么不好 | 正确做法 |
-| :--- | :--- | :--- | :--- |
-| 1 | 使用根账号进行日常操作 | 根账号拥有所有权限，一旦泄露无法限制损害 | 创建 IAM 管理员账号，根账号仅在必要时使用 |
-| 2 | 给所有人 AdministratorAccess | 违反最小权限原则，增加误操作和内部威胁风险 | 按角色分组，只授予必要的权限 |
-| 3 | 在代码中硬编码 AK/SK | AK/SK 容易通过 GitHub 泄露，且难以轮换 | 使用 IAM Role、环境变量或密钥管理服务 |
-| 4 | 长期不轮换 AK/SK | 增加凭证泄露后的风险敞口时间 | 设置 90 天轮换策略，或更好的——使用临时凭证 |
-| 5 | 忽略 MFA | 密码泄露后账号直接沦陷 | 为所有 IAM 用户启用 MFA，尤其是高权限用户 |
-| 6 | 不使用 CloudTrail | 无法审计谁做了什么操作，出事后无法溯源 | 启用 CloudTrail，并将日志存储到独立的审计账号 |
-| 7 | IAM Policy 过于宽松 | 如 `Resource: "*"`、`Action: "*"`，增加攻击面 | 明确指定资源 ARN 和具体 Action |
-| 8 | 不清理离职员工的 IAM User | 僵尸账号可能成为后门 | 建立离职流程，立即禁用并删除 IAM User |
-| 9 | 不使用 IAM Access Analyzer | 无法发现过度宽松的资源策略（如公开 S3 bucket） | 启用 IAM Access Analyzer，定期检查外部访问 |
-| 10 | 不在测试环境验证 Policy | 直接在生产环境应用 Policy，可能导致服务中断 | 使用 IAM Policy Simulator 测试，先在测试环境验证 |
+| #   | 反模式                       | 为什么不好                                     | 正确做法                                         |
+| :-- | :--------------------------- | :--------------------------------------------- | :----------------------------------------------- |
+| 1   | 使用根账号进行日常操作       | 根账号拥有所有权限，一旦泄露无法限制损害       | 创建 IAM 管理员账号，根账号仅在必要时使用        |
+| 2   | 给所有人 AdministratorAccess | 违反最小权限原则，增加误操作和内部威胁风险     | 按角色分组，只授予必要的权限                     |
+| 3   | 在代码中硬编码 AK/SK         | AK/SK 容易通过 GitHub 泄露，且难以轮换         | 使用 IAM Role、环境变量或密钥管理服务            |
+| 4   | 长期不轮换 AK/SK             | 增加凭证泄露后的风险敞口时间                   | 设置 90 天轮换策略，或更好的——使用临时凭证       |
+| 5   | 忽略 MFA                     | 密码泄露后账号直接沦陷                         | 为所有 IAM 用户启用 MFA，尤其是高权限用户        |
+| 6   | 不使用 CloudTrail            | 无法审计谁做了什么操作，出事后无法溯源         | 启用 CloudTrail，并将日志存储到独立的审计账号    |
+| 7   | IAM Policy 过于宽松          | 如 `Resource: "*"`、`Action: "*"`，增加攻击面  | 明确指定资源 ARN 和具体 Action                   |
+| 8   | 不清理离职员工的 IAM User    | 僵尸账号可能成为后门                           | 建立离职流程，立即禁用并删除 IAM User            |
+| 9   | 不使用 IAM Access Analyzer   | 无法发现过度宽松的资源策略（如公开 S3 bucket） | 启用 IAM Access Analyzer，定期检查外部访问       |
+| 10  | 不在测试环境验证 Policy      | 直接在生产环境应用 Policy，可能导致服务中断    | 使用 IAM Policy Simulator 测试，先在测试环境验证 |
 
 ---
 
 ## 9. 名词对照表
 
-| 英文术语 | 中文对照 | 解释 |
-| :--- | :--- | :--- |
-| **IAM (Identity and Access Management)** | 身份与访问管理 | 云服务中管理用户身份和访问权限的服务 |
-| **RAM (Resource Access Management)** | 资源访问管理 | 阿里云的 IAM 服务名称 |
-| **Root Account** | 根账号 | 注册云账号时创建的拥有者账号，拥有最高权限 |
-| **IAM User** | IAM 用户/子账号 | 由根账号创建的子身份，用于日常操作 |
-| **IAM Role** | IAM 角色 | 临时性权限载体，无长期凭证，需要被"扮演" |
-| **IAM Policy** | IAM 策略 | JSON 格式的权限规则定义 |
-| **ARN** | 亚马逊资源名称 | 全局唯一的资源标识符 |
-| **AK/SK** | 访问密钥/密钥 | 程序访问云 API 的凭证 |
-| **STS** | 安全令牌服务 | 提供临时安全凭证的服务 |
-| **MFA** | 多因素认证 | 需要两个或以上因素的认证方式 |
-| **SSO** | 单点登录 | 用户一次登录即可访问多个系统的认证方式 |
-| **ExternalId** | 外部 ID | 用于防止困惑代理攻击的安全标识符 |
-| **CloudTrail** | 云审计服务 | 记录云账号中所有 API 调用和操作的日志服务 |
+| 英文术语                                 | 中文对照        | 解释                                       |
+| :--------------------------------------- | :-------------- | :----------------------------------------- |
+| **IAM (Identity and Access Management)** | 身份与访问管理  | 云服务中管理用户身份和访问权限的服务       |
+| **RAM (Resource Access Management)**     | 资源访问管理    | 阿里云的 IAM 服务名称                      |
+| **Root Account**                         | 根账号          | 注册云账号时创建的拥有者账号，拥有最高权限 |
+| **IAM User**                             | IAM 用户/子账号 | 由根账号创建的子身份，用于日常操作         |
+| **IAM Role**                             | IAM 角色        | 临时性权限载体，无长期凭证，需要被"扮演"   |
+| **IAM Policy**                           | IAM 策略        | JSON 格式的权限规则定义                    |
+| **ARN**                                  | 亚马逊资源名称  | 全局唯一的资源标识符                       |
+| **AK/SK**                                | 访问密钥/密钥   | 程序访问云 API 的凭证                      |
+| **STS**                                  | 安全令牌服务    | 提供临时安全凭证的服务                     |
+| **MFA**                                  | 多因素认证      | 需要两个或以上因素的认证方式               |
+| **SSO**                                  | 单点登录        | 用户一次登录即可访问多个系统的认证方式     |
+| **ExternalId**                           | 外部 ID         | 用于防止困惑代理攻击的安全标识符           |
+| **CloudTrail**                           | 云审计服务      | 记录云账号中所有 API 调用和操作的日志服务  |
 
 ---
 
@@ -756,6 +754,7 @@ aws ecr describe-repositories --registry-id SHARED_SERVICES_ACCOUNT_ID
 ---
 
 > **延伸阅读**：
+>
 > - [AWS IAM 官方文档](https://docs.aws.amazon.com/iam/)
 > - [阿里云 RAM 官方文档](https://www.aliyun.com/product/ram)
 > - [AWS IAM Best Practices](https://docs.aws.amazon.com/IAM/latest/UserGuide/best-practices.html)
diff --git a/docs/zh-cn/appendix/cloud-storage-cdn.md b/docs/zh-cn/appendix/cloud-storage-cdn.md
index 126c030..12c9858 100644
--- a/docs/zh-cn/appendix/cloud-storage-cdn.md
+++ b/docs/zh-cn/appendix/cloud-storage-cdn.md
@@ -31,13 +31,13 @@
 
 **核心区别一览**：
 
-| 维度 | 传统文件系统 | 对象存储 |
-| :--- | :--- | :--- |
-| **组织方式** | 层级目录树 | 扁平键值对 |
-| **访问协议** | POSIX（本地文件操作） | HTTP/REST API |
-| **扩展性** | 单机容量有限 | 近乎无限水平扩展 |
-| **元数据** | 基础属性（大小、时间） | 丰富的自定义元数据 |
-| **典型场景** | 本地办公文档 | 图片/视频/备份/静态资源 |
+| 维度         | 传统文件系统           | 对象存储                |
+| :----------- | :--------------------- | :---------------------- |
+| **组织方式** | 层级目录树             | 扁平键值对              |
+| **访问协议** | POSIX（本地文件操作）  | HTTP/REST API           |
+| **扩展性**   | 单机容量有限           | 近乎无限水平扩展        |
+| **元数据**   | 基础属性（大小、时间） | 丰富的自定义元数据      |
+| **典型场景** | 本地办公文档           | 图片/视频/备份/静态资源 |
 
 ### 1.2 对象存储的核心概念
 
@@ -46,6 +46,7 @@
 桶是对象存储的顶级容器，相当于一个独立的命名空间。所有对象都必须存放在某个桶中。
 
 **命名规则**（以阿里云 OSS 为例）：
+
 - 全局唯一：在整个云厂商的所有用户中不能重复
 - 只能包含小写字母、数字和短横线
 - 必须以小写字母或数字开头和结尾
@@ -73,11 +74,11 @@
 
 对象存储提供多层权限控制：
 
-| 层级 | 控制方式 | 典型场景 |
-| :--- | :--- | :--- |
-| **桶级别** | Bucket Policy（资源策略） | 禁止所有外网访问、只允许特定 IP |
-| **对象级别** | ACL（访问控制列表） | 公开图片、私有文档 |
-| **临时授权** | STS（安全令牌服务） | 前端直传、移动端上传 |
+| 层级         | 控制方式                  | 典型场景                        |
+| :----------- | :------------------------ | :------------------------------ |
+| **桶级别**   | Bucket Policy（资源策略） | 禁止所有外网访问、只允许特定 IP |
+| **对象级别** | ACL（访问控制列表）       | 公开图片、私有文档              |
+| **临时授权** | STS（安全令牌服务）       | 前端直传、移动端上传            |
 
 **安全红线**：永远不要把 AccessKey ID 和 AccessKey Secret 写在前端代码里！正确做法是：前端向你的后端申请临时 STS 凭证，后端验证身份后返回带过期时间的临时凭证。
 
@@ -102,11 +103,13 @@
 #### 边缘节点：离用户最近的"快递站"
 
 边缘节点是 CDN 网络中最接近用户的层级，通常部署在：
+
 - 运营商机房（联通/电信/移动）
 - 大城市互联网交换中心
 - 重要交通枢纽
 
 **中国主要 CDN 节点分布**：
+
 - 一线城市：北京、上海、广州、深圳
 - 二线城市：杭州、南京、成都、武汉、西安
 - 海外：香港、新加坡、东京、硅谷、法兰克福
@@ -116,11 +119,13 @@
 #### 源站：内容的"总仓库"
 
 源站是 CDN 回源获取内容的地方，可以是：
+
 - 对象存储（OSS/COS/S3）
 - 自建服务器（ECS/物理机）
 - 负载均衡（SLB/CLB）
 
 **关键配置**：
+
 - **回源 HOST**：CDN 节点访问源站时使用的域名/IP
 - **回源协议**：HTTP 还是 HTTPS
 - **回源端口**：80、443 还是自定义端口
@@ -128,10 +133,12 @@
 #### 中间层节点："区域分拨中心"
 
 在边缘节点和源站之间，CDN 通常还有一层或多层中间节点：
+
 - **汇聚节点**：聚合多个边缘节点的回源请求，减少源站压力
 - **区域中心**：负责一个大区的内容分发和调度
 
 这种分层架构的好处：
+
 1. **降低源站压力**：1000 个边缘节点的请求，可能只需要向源站发起 10 次
 2. **提高命中率**：热门内容在中间层就被拦截，不需要回源
 3. **故障隔离**：某条链路出问题，可以自动切换到其他路径
@@ -143,14 +150,17 @@
 <CachePolicyDemo />
 
 **Step 1：DNS 解析**（智能调度）
+
 ```
 用户输入：cdn.example.com/image.jpg
 ↓
 DNS 服务器返回：北京联通 CDN 节点 IP（1.2.3.4）
 ```
+
 这里的关键是**智能 DNS**：根据用户的运营商、地理位置、节点负载，返回最优的 CDN 节点 IP。
 
 **Step 2：边缘节点查找**（缓存命中？）
+
 ```
 请求到达北京联通 CDN 节点（1.2.3.4）
 ↓
@@ -160,6 +170,7 @@ DNS 服务器返回：北京联通 CDN 节点 IP（1.2.3.4）
 ```
 
 **Step 3：回源获取**（层层向上）
+
 ```
 边缘节点未命中
 ↓
@@ -173,6 +184,7 @@ DNS 服务器返回：北京联通 CDN 节点 IP（1.2.3.4）
 ```
 
 **Step 4：缓存并返回**（下次更快）
+
 ```
 内容沿链路返回
 ↓
@@ -198,17 +210,20 @@ DNS 服务器返回：北京联通 CDN 节点 IP（1.2.3.4）
 ```
 
 **流程**：
+
 1. 用户选择文件，点击上传
 2. 文件先上传到你的后端服务器
 3. 后端接收完整文件后，再转上传到对象存储
 4. 返回上传结果给用户
 
 **优点**：
+
 - 实现简单，前后端都好控制
 - 可以在后端做文件校验、格式转换
 - 敏感操作可以记录日志、做权限校验
 
 **缺点**：
+
 - **带宽双吃**：用户上传占用一次带宽，服务器转传又占用一次
 - **服务器压力大**：大文件会占用大量内存和 CPU
 - **上传慢**：相当于多了一道中转，用户感知到的上传时间更长
@@ -224,6 +239,7 @@ DNS 服务器返回：北京联通 CDN 节点 IP（1.2.3.4）
 ```
 
 **流程**：
+
 1. 用户选择文件，前端先向后端申请"上传凭证"
 2. 后端验证用户身份，向对象存储服务申请**临时 STS 凭证**（带过期时间）
 3. 后端把临时凭证返回给前端
@@ -231,12 +247,14 @@ DNS 服务器返回：北京联通 CDN 节点 IP（1.2.3.4）
 5. 对象存储返回上传结果，前端通知后端"上传完成"
 
 **优点**：
+
 - **上传快**：少了中转环节，用户感知速度最快
 - **服务器压力小**：只处理凭证签发，不处理文件流
 - **带宽省**：只走一次上传流量
 - **安全性高**：临时凭证有过期时间，泄露也危害有限
 
 **缺点**：
+
 - 实现稍复杂，需要理解 STS、签名机制
 - 前端需要处理分片上传、断点续传等逻辑
 - 跨域（CORS）需要配置
@@ -261,21 +279,21 @@ DNS 服务器返回：北京联通 CDN 节点 IP（1.2.3.4）
 
 **为什么需要分片？**
 
-| 场景 | 不分片 | 分片 |
-| :--- | :--- | :--- |
-| **网络波动** | 传了 99% 断网，全部重传 | 只重传失败的分片 |
-| **上传速度** | 单线程，速度慢 | 多线程并行，速度快 |
-| **内存占用** | 需要缓存整个文件 | 只需缓存当前分片 |
-| **进度显示** | 只有 0% 和 100% | 精确到每个分片的进度 |
+| 场景         | 不分片                  | 分片                 |
+| :----------- | :---------------------- | :------------------- |
+| **网络波动** | 传了 99% 断网，全部重传 | 只重传失败的分片     |
+| **上传速度** | 单线程，速度慢          | 多线程并行，速度快   |
+| **内存占用** | 需要缓存整个文件        | 只需缓存当前分片     |
+| **进度显示** | 只有 0% 和 100%         | 精确到每个分片的进度 |
 
 **主流云厂商的分片规格**：
 
-| 厂商 | 分片大小限制 | 最大分片数 | 最小分片大小 |
-| :--- | :--- | :--- | :--- |
-| **阿里云 OSS** | 100MB | 10000 | 100KB |
-| **腾讯云 COS** | 5GB | 10000 | 1MB |
-| **AWS S3** | 5GB | 10000 | 5MB（推荐） |
-| **七牛云** | 100MB | 10000 | 4MB |
+| 厂商           | 分片大小限制 | 最大分片数 | 最小分片大小 |
+| :------------- | :----------- | :--------- | :----------- |
+| **阿里云 OSS** | 100MB        | 10000      | 100KB        |
+| **腾讯云 COS** | 5GB          | 10000      | 1MB          |
+| **AWS S3**     | 5GB          | 10000      | 5MB（推荐）  |
+| **七牛云**     | 100MB        | 10000      | 4MB          |
 
 ### 3.2 CDN 回源策略详解
 
@@ -284,6 +302,7 @@ DNS 服务器返回：北京联通 CDN 节点 IP（1.2.3.4）
 #### 什么是"回源"？
 
 CDN 边缘节点缓存了源站的内容，但当：
+
 - 用户请求的内容**第一次被访问**
 - 缓存的内容**已过期（TTL 到期）**
 - 缓存被**手动刷新/预热**
@@ -292,11 +311,11 @@ CDN 节点就需要向**源站**请求最新内容，这个过程就叫"回源"
 
 #### 回源的三种模式
 
-| 模式 | 原理 | 适用场景 | 优缺点 |
-| :--- | :--- | :--- | :--- |
-| **直接回源** | CDN 节点 → 源站 | 源站有公网 IP，且流量不大 | 简单直接，但源站压力大 |
-| **中间源回源** | CDN 节点 → 中间层 → 源站 | 大型网站，多层缓存架构 | 分担源站压力，架构复杂 |
-| ** OSS/COS 作为源站** | CDN 节点 → 对象存储 | 静态资源、图片、视频 | 最佳实践，成本低、性能好 |
+| 模式                  | 原理                     | 适用场景                  | 优缺点                   |
+| :-------------------- | :----------------------- | :------------------------ | :----------------------- |
+| **直接回源**          | CDN 节点 → 源站          | 源站有公网 IP，且流量不大 | 简单直接，但源站压力大   |
+| **中间源回源**        | CDN 节点 → 中间层 → 源站 | 大型网站，多层缓存架构    | 分担源站压力，架构复杂   |
+| ** OSS/COS 作为源站** | CDN 节点 → 对象存储      | 静态资源、图片、视频      | 最佳实践，成本低、性能好 |
 
 #### 回源配置实战
 
@@ -315,6 +334,7 @@ CDN 节点就需要向**源站**请求最新内容，这个过程就叫"回源"
 ```
 
 关键配置项：
+
 - **源站类型**：OSS/COS 域名 或 自定义源站
 - **回源协议**：HTTP 还是 HTTPS（建议 HTTPS）
 - **回源 HOST**：访问源站时使用的 Host 头
@@ -332,6 +352,7 @@ CDN 边缘节点
 ```
 
 主备模式：
+
 ```
 CDN 边缘节点
     ├─ 主源站 A (健康时全部流量)
@@ -342,12 +363,13 @@ CDN 边缘节点
 
 这里有个容易混淆的概念：
 
-| 指标 | 定义 | 计费关系 |
-| :--- | :--- | :--- |
-| **CDN 下行带宽** | 从 CDN 节点到用户的流量 | 通常按流量计费的 CDN 费用 |
-| **回源带宽** | 从源站到 CDN 节点的流量 | 通常对象存储或源站出流量费用 |
+| 指标             | 定义                    | 计费关系                     |
+| :--------------- | :---------------------- | :--------------------------- |
+| **CDN 下行带宽** | 从 CDN 节点到用户的流量 | 通常按流量计费的 CDN 费用    |
+| **回源带宽**     | 从源站到 CDN 节点的流量 | 通常对象存储或源站出流量费用 |
 
 **省钱技巧**：
+
 - 提高 CDN 命中率（让更多请求命中缓存，减少回源）
 - 设置合理的缓存时间（TTL）
 - 使用预热功能，在用户访问前就缓存热点内容
@@ -362,10 +384,12 @@ CDN 边缘节点
 CDN 如何判断两次请求是否应该返回同一个缓存副本？靠的就是**缓存键**。
 
 **默认缓存键通常包括**：
+
 - URL 路径（不含查询参数）
 - 例如：`/images/photo.jpg`
 
 **问题场景**：
+
 ```
 用户 A 请求：/images/photo.jpg?w=100&h=100  (100x100 缩略图)
 用户 B 请求：/images/photo.jpg?w=800&h=600  (800x600 大图)
@@ -375,14 +399,15 @@ CDN 如何判断两次请求是否应该返回同一个缓存副本？靠的就
 
 **解决方案：自定义缓存键规则**
 
-| 规则 | 示例 | 效果 |
-| :--- | :--- | :--- |
-| **保留指定查询参数** | 保留 `w`、`h` | 不同尺寸分别缓存 |
-| **保留所有查询参数** | 保留全部 | 完全精确匹配 |
+| 规则                 | 示例                      | 效果                      |
+| :------------------- | :------------------------ | :------------------------ |
+| **保留指定查询参数** | 保留 `w`、`h`             | 不同尺寸分别缓存          |
+| **保留所有查询参数** | 保留全部                  | 完全精确匹配              |
 | **忽略特定查询参数** | 忽略 `token`、`timestamp` | 带时间戳的 URL 能命中缓存 |
-| **包含请求头** | 包含 `Accept-Language` | 不同语言返回不同内容 |
+| **包含请求头**       | 包含 `Accept-Language`    | 不同语言返回不同内容      |
 
 **实战配置示例**（阿里云 CDN）：
+
 ```
 缓存键规则：
 - URL 路径：/images/*
@@ -396,13 +421,13 @@ TTL（Time To Live）决定了内容在 CDN 节点上缓存多久。设置太短
 
 **按文件类型设置 TTL 的建议**：
 
-| 文件类型 | 建议 TTL | 原因 |
-| :--- | :--- | :--- |
-| HTML 页面 | 0-5 分钟 | 内容频繁更新，需要实时 |
+| 文件类型    | 建议 TTL                | 原因                           |
+| :---------- | :---------------------- | :----------------------------- |
+| HTML 页面   | 0-5 分钟                | 内容频繁更新，需要实时         |
 | JS/CSS 文件 | 1 年（配合文件名 hash） | 内容不变，文件名变化即缓存失效 |
-| 图片/视频 | 7-30 天 | 更新频率低，可长期缓存 |
-| 字体文件 | 1 年 | 几乎不变 |
-| API 响应 | 0-5 分钟（视业务） | 数据实时性要求高 |
+| 图片/视频   | 7-30 天                 | 更新频率低，可长期缓存         |
+| 字体文件    | 1 年                    | 几乎不变                       |
+| API 响应    | 0-5 分钟（视业务）      | 数据实时性要求高               |
 
 **前端工程化配合 CDN 的最佳实践**：
 
@@ -425,11 +450,11 @@ output: {
 
 当你更新了源站内容，但 CDN 缓存还没过期，用户看到的还是旧内容：
 
-| 刷新类型 | 效果 | 耗时 | 适用场景 |
-| :--- | :--- | :--- | :--- |
-| **URL 刷新** | 指定 URL 的缓存失效 | 5-10 分钟 | 单个文件更新 |
-| **目录刷新** | 指定目录下所有内容失效 | 10-30 分钟 | 批量更新 |
-| **全站刷新** | 整个域名的缓存全部失效 | 30 分钟以上 | 紧急回滚 |
+| 刷新类型     | 效果                   | 耗时        | 适用场景     |
+| :----------- | :--------------------- | :---------- | :----------- |
+| **URL 刷新** | 指定 URL 的缓存失效    | 5-10 分钟   | 单个文件更新 |
+| **目录刷新** | 指定目录下所有内容失效 | 10-30 分钟  | 批量更新     |
+| **全站刷新** | 整个域名的缓存全部失效 | 30 分钟以上 | 紧急回滚     |
 
 **重要提醒**：刷新只是让缓存失效，下次请求会回源拉取新内容。不要在高峰期大批量刷新，否则可能导致源站被打爆。
 
@@ -458,12 +483,14 @@ output: {
 ### 4.1 智能 DNS 调度
 
 传统 DNS 解析：
+
 ```
 用户问：cdn.example.com 的 IP 是什么？
 DNS 答：1.2.3.4（固定的）
 ```
 
 智能 DNS 解析：
+
 ```
 用户（北京联通）问：cdn.example.com 的 IP 是什么？
 智能 DNS：让我查查... 北京联通的 CDN 节点是 1.2.3.4
@@ -486,6 +513,7 @@ DNS 答：1.2.3.4（固定的）
 传统 DNS 有个问题：**DNS 劫持和解析延迟**。
 
 **HTTP DNS 方案**：
+
 ```
 客户端 → 绕过系统 DNS → 直接问 HTTP DNS 服务（如 223.5.5.5:80）
          ↓
@@ -495,11 +523,13 @@ DNS 答：1.2.3.4（固定的）
 ```
 
 优势：
+
 - 防劫持：不走运营商 DNS
 - 更精准：可以按客户端网络质量选择 IP
 - 实时性：故障切换更快
 
 **实战建议**：
+
 - 移动端 APP 强烈建议接入 HTTP DNS
 - Web 端可以使用 CDN 提供的 CNAME 调度
 - 关键业务可以做多 IP 容灾（一个域名返回多个 IP）
@@ -513,6 +543,7 @@ DNS 答：1.2.3.4（固定的）
 ### 5.1 为什么 CDN 上 HTTPS 很重要？
 
 **场景对比**：
+
 ```
 无 HTTPS：
 用户访问 http://cdn.example.com/image.jpg
@@ -539,14 +570,15 @@ HTTP/2 多路复用生效
 
 #### 证书管理
 
-| 方案 | 说明 | 成本 | 适用场景 |
-| :--- | :--- | :--- | :--- |
-| **云厂商免费证书** | 阿里云/腾讯云等提供 | 免费 | 单域名，快速上手 |
-| **Let's Encrypt** | 社区免费证书 | 免费 | 自动化部署 |
+| 方案                   | 说明                  | 成本           | 适用场景         |
+| :--------------------- | :-------------------- | :------------- | :--------------- |
+| **云厂商免费证书**     | 阿里云/腾讯云等提供   | 免费           | 单域名，快速上手 |
+| **Let's Encrypt**      | 社区免费证书          | 免费           | 自动化部署       |
 | **商业 DV/OV/EV 证书** | 赛门铁克、GeoTrust 等 | ￥几百-几万/年 | 企业级、需要绿条 |
-| **泛域名证书** | *.example.com | ￥几千/年 | 多子域名 |
+| **泛域名证书**         | \*.example.com        | ￥几千/年      | 多子域名         |
 
 **实战建议**：
+
 - 测试环境：Let's Encrypt 或云厂商免费证书
 - 生产环境：泛域名证书（省事）或单域名 OV 证书（省钱）
 - 注意证书过期时间，设置自动续期提醒
@@ -554,18 +586,21 @@ HTTP/2 多路复用生效
 #### HTTPS 优化配置
 
 **TLS 版本选择**：
+
 ```
 推荐配置：仅 TLS 1.2 和 TLS 1.3
 兼容配置：TLS 1.1 + TLS 1.2 + TLS 1.3（兼容老旧浏览器）
 ```
 
 **密码套件**：
+
 ```
 推荐：ECDHE 密钥交换 + AES-GCM 加密
 禁用：DES、RC4、MD5、SHA1
 ```
 
 **OCSP Stapling**：
+
 ```
 功能：CDN 节点预获取证书吊销状态
 效果：减少客户端验证时间 200-500ms
@@ -573,6 +608,7 @@ HTTP/2 多路复用生效
 ```
 
 **TLS 会话复用**：
+
 ```
 Session ID 复用：客户端带着上次 Session ID，服务端恢复会话
 Session Ticket 复用：服务端把会话状态加密发给客户端，下次带来
@@ -582,6 +618,7 @@ Session Ticket 复用：服务端把会话状态加密发给客户端，下次
 ### 5.3 HTTP/2 与 HTTP/3 在 CDN 上的应用
 
 **HTTP/2 多路复用**：
+
 ```
 HTTP/1.1：
 请求 1 (index.html) ────────────────→
@@ -603,6 +640,7 @@ HTTP/2：
 ```
 
 **HTTP/2 服务端推送**：
+
 ```
 场景：用户请求 index.html，里面引用了 style.css 和 script.js
 
@@ -620,6 +658,7 @@ HTTP/2 推送：
 ```
 
 **HTTP/3 (QUIC)**：
+
 ```
 HTTP/2 的问题：基于 TCP，队头阻塞
 → 一个 TCP 包丢失，整个连接等待重传
@@ -654,6 +693,7 @@ CDN 带宽 = 所有边缘节点的出流量总和
 ```
 
 **带宽与流量的关系**：
+
 ```
 1 Mbps 带宽持续跑 1 小时 = 450 MB 流量
 （计算：1,000,000 bps × 3600s ÷ 8 ÷ 1024 ÷ 1024 ≈ 429 MB）
@@ -689,13 +729,13 @@ CDN QPS = 所有边缘节点每秒处理的 HTTP 请求总数
 
 **命中率低的常见原因**：
 
-| 原因 | 现象 | 解决方案 |
-| :--- | :--- | :--- |
-| 缓存时间太短 | TTL 只有几分钟 | 根据文件类型调整 TTL |
-| 查询参数变化 | URL 带随机数 | 配置忽略特定参数 |
-| 缓存键设置不当 | 不该区分的被区分了 | 优化缓存键规则 |
-| 内容更新频繁 | 文件经常被覆盖 | 使用版本号或 hash 文件名 |
-| 首次访问多 | 新内容或新节点 | 提前预热 |
+| 原因           | 现象               | 解决方案                 |
+| :------------- | :----------------- | :----------------------- |
+| 缓存时间太短   | TTL 只有几分钟     | 根据文件类型调整 TTL     |
+| 查询参数变化   | URL 带随机数       | 配置忽略特定参数         |
+| 缓存键设置不当 | 不该区分的被区分了 | 优化缓存键规则           |
+| 内容更新频繁   | 文件经常被覆盖     | 使用版本号或 hash 文件名 |
+| 首次访问多     | 新内容或新节点     | 提前预热                 |
 
 ### 6.2 日志分析与问题排查
 
@@ -712,18 +752,19 @@ CDN QPS = 所有边缘节点每秒处理的 HTTP 请求总数
 
 关键字段解释：
 
-| 字段 | 说明 | 分析价值 |
-| :--- | :--- | :--- |
-| `cache_status` | 缓存状态 | HIT（命中）、MISS（未命中）、EXPIRED（过期） |
-| `response_time` | 响应时间（ms） | 判断用户体验，>500ms 需优化 |
-| `http_status` | HTTP 状态码 | 404/500 错误排查 |
-| `bytes_sent` | 发送字节数 | 带宽统计 |
+| 字段            | 说明           | 分析价值                                     |
+| :-------------- | :------------- | :------------------------------------------- |
+| `cache_status`  | 缓存状态       | HIT（命中）、MISS（未命中）、EXPIRED（过期） |
+| `response_time` | 响应时间（ms） | 判断用户体验，>500ms 需优化                  |
+| `http_status`   | HTTP 状态码    | 404/500 错误排查                             |
+| `bytes_sent`    | 发送字节数     | 带宽统计                                     |
 
 #### 常见问题排查
 
 **问题 1：用户反映访问慢**
 
 排查步骤：
+
 ```
 1. 看日志 response_time
    - 如果很大（>500ms）：检查是缓存 MISS 还是源站慢
@@ -739,6 +780,7 @@ CDN QPS = 所有边缘节点每秒处理的 HTTP 请求总数
 **问题 2：缓存不生效，每次都回源**
 
 排查清单：
+
 ```
 □ 源站响应头是否有 Cache-Control: no-cache / private？
 □ URL 是否带随机参数（如 ?_=123456）？
@@ -750,6 +792,7 @@ CDN QPS = 所有边缘节点每秒处理的 HTTP 请求总数
 **问题 3：费用暴涨**
 
 排查方向：
+
 ```
 1. 看账单明细
    - CDN 流量费高：检查是否有大文件被频繁访问，或被盗链
@@ -848,6 +891,7 @@ CDN QPS = 所有边缘节点每秒处理的 HTTP 请求总数
 #### 对象存储配置
 
 **存储桶规划**：
+
 ```
  Bucket: myapp-images-prod
  ├─ 目录结构：
@@ -872,6 +916,7 @@ CDN QPS = 所有边缘节点每秒处理的 HTTP 请求总数
 ```
 
 **CORS 跨域配置**：
+
 ```xml
 <CORSConfiguration>
   <CORSRule>
@@ -890,6 +935,7 @@ CDN QPS = 所有边缘节点每秒处理的 HTTP 请求总数
 #### CDN 加速配置
 
 **缓存策略配置**：
+
 ```
 全局默认规则：
 ├─ 缓存键：URL 路径 + 保留 w、h、format 查询参数
@@ -916,6 +962,7 @@ CDN QPS = 所有边缘节点每秒处理的 HTTP 请求总数
 ```
 
 **HTTPS 优化配置**：
+
 ```
 证书配置：
 ├─ 证书类型：泛域名证书 *.myapp.com
@@ -1031,14 +1078,14 @@ rules:
 ```yaml
 # 带宽封顶配置
 bandwidth_cap:
-  daily_limit: 500  # Mbps，日峰值超过则自动停用 CDN
-  monthly_limit: 10000  # GB，月流量超过则停用
+  daily_limit: 500 # Mbps，日峰值超过则自动停用 CDN
+  monthly_limit: 10000 # GB，月流量超过则停用
 
   # 告警阈值
   alerts:
-    - threshold: 70%  # 达到 70% 发告警
+    - threshold: 70% # 达到 70% 发告警
       channels: [sms, email]
-    - threshold: 90%  # 达到 90% 打电话
+    - threshold: 90% # 达到 90% 打电话
       channels: [phone]
 ```
 
@@ -1049,12 +1096,14 @@ bandwidth_cap:
 ### 8.1 架构设计原则
 
 **原则 1：动静分离**
+
 ```
 动态内容（API、HTML）→ 走源站或边缘函数
 静态内容（图片、JS、CSS、视频）→ 走 CDN + 对象存储
 ```
 
 **原则 2：就近服务**
+
 ```
 用户在哪里，内容就缓存到哪里
 → 选择覆盖广的 CDN 服务商
@@ -1063,6 +1112,7 @@ bandwidth_cap:
 ```
 
 **原则 3：分层缓存**
+
 ```
 浏览器本地缓存（最强）
     ↓
@@ -1074,6 +1124,7 @@ CDN 中间层/区域节点（兜底）
 ```
 
 **原则 4：成本与体验的平衡**
+
 ```
 存储分级：热数据标准存储，冷数据归档存储
 缓存策略：高频内容长 TTL，低频内容短 TTL
@@ -1084,24 +1135,28 @@ CDN 中间层/区域节点（兜底）
 ### 8.2 避坑清单
 
 **存储桶命名与权限**
+
 - [ ] 桶名全局唯一，避免被占用
 - [ ] 私有文件不要设置为公共读
 - [ ] AccessKey 不要写在前端代码里，用 STS 临时凭证
 - [ ] 启用服务端加密（SSE）保护敏感数据
 
 **CDN 缓存配置**
+
 - [ ] HTML 文件 TTL 不要太长（建议 < 5 分钟）
 - [ ] JS/CSS 建议用带 hash 的文件名，TTL 设为 1 年
 - [ ] 缓存键要合理，不要把用户信息等变量放进去
 - [ ] 重要更新后记得刷新缓存或预热
 
 **HTTPS 安全**
+
 - [ ] 证书不要过期，设置自动续期
 - [ ] 最低 TLS 版本建议 1.2
 - [ ] 开启 HSTS 防止降级攻击
 - [ ] 敏感 Cookie 设置 Secure 和 HttpOnly
 
 **成本控制**
+
 - [ ] 开启带宽封顶告警，防止异常流量
 - [ ] 低频/归档存储有最小存储时间和提前删除费，注意规则
 - [ ] 回源流量费也很贵，努力提高 CDN 命中率
@@ -1170,7 +1225,12 @@ class DirectUploader {
     const formData = new FormData()
 
     // 构建表单字段（不同厂商字段名不同）
-    const formFields = this._buildFormFields(credentials, fileKey, file.type, options)
+    const formFields = this._buildFormFields(
+      credentials,
+      fileKey,
+      file.type,
+      options
+    )
     Object.entries(formFields).forEach(([key, value]) => {
       formData.append(key, value)
     })
@@ -1210,7 +1270,11 @@ class DirectUploader {
     const fileKey = this._generateFileKey(file, options.directory)
 
     // 1. 初始化分片上传
-    const uploadId = await this._initMultipartUpload(credentials, fileKey, file.type)
+    const uploadId = await this._initMultipartUpload(
+      credentials,
+      fileKey,
+      file.type
+    )
 
     // 2. 计算分片
     const parts = []
@@ -1232,21 +1296,30 @@ class DirectUploader {
 
     // 支持断点续传：检查哪些分片已上传
     if (options.resume) {
-      const existingParts = await this._listParts(credentials, fileKey, uploadId)
+      const existingParts = await this._listParts(
+        credentials,
+        fileKey,
+        uploadId
+      )
       for (const part of existingParts) {
         uploadedParts.push(part)
       }
     }
 
     // 过滤出未上传的分片
-    const pendingParts = parts.filter(p =>
-      !uploadedParts.some(up => up.partNumber === p.number)
+    const pendingParts = parts.filter(
+      (p) => !uploadedParts.some((up) => up.partNumber === p.number)
     )
 
     // 并发上传
     const uploadPart = async (part) => {
       try {
-        const etag = await this._uploadPart(credentials, fileKey, uploadId, part)
+        const etag = await this._uploadPart(
+          credentials,
+          fileKey,
+          uploadId,
+          part
+        )
         return { partNumber: part.number, etag }
       } catch (error) {
         failedParts.push({ part, error })
@@ -1271,11 +1344,18 @@ class DirectUploader {
 
     // 检查是否所有分片都上传成功
     if (uploadedParts.length !== totalParts) {
-      throw new Error(`Upload incomplete: ${uploadedParts.length}/${totalParts} parts uploaded`)
+      throw new Error(
+        `Upload incomplete: ${uploadedParts.length}/${totalParts} parts uploaded`
+      )
     }
 
     // 4. 完成分片上传（合并分片）
-    await this._completeMultipartUpload(credentials, fileKey, uploadId, uploadedParts)
+    await this._completeMultipartUpload(
+      credentials,
+      fileKey,
+      uploadId,
+      uploadedParts
+    )
 
     return {
       url: this._getFileUrl(fileKey),
@@ -1316,7 +1396,11 @@ class DirectUploader {
 
   _getFileUrl(key) {
     return `https://${this.bucket}.${this.provider === 'oss' ? 'oss' : 'cos'}-${this.region}.${
-      this.provider === 'oss' ? 'aliyuncs.com' : this.provider === 'cos' ? 'myqcloud.com' : 'amazonaws.com'
+      this.provider === 'oss'
+        ? 'aliyuncs.com'
+        : this.provider === 'cos'
+          ? 'myqcloud.com'
+          : 'amazonaws.com'
     }/${key}`
   }
 
@@ -1385,7 +1469,9 @@ async function uploadVideo(file) {
       parallel: 3, // 3 个并发
       resume: true, // 支持断点续传
       onProgress: (progress) => {
-        console.log(`上传进度: ${progress.percent}%, 已传 ${progress.loaded}/${progress.total}`)
+        console.log(
+          `上传进度: ${progress.percent}%, 已传 ${progress.loaded}/${progress.total}`
+        )
       },
       onPartComplete: (part) => {
         console.log(`分片 ${part.number} 上传完成`)
@@ -1464,9 +1550,7 @@ router.post('/credentials', async (req, res) => {
               'oss:AbortMultipartUpload',
               'oss:ListParts'
             ],
-            Resource: [
-              `acs:oss:*:*:${config.oss.bucket}/${prefix}*`
-            ]
+            Resource: [`acs:oss:*:*:${config.oss.bucket}/${prefix}*`]
           }
         ],
         Version: '1'
@@ -1495,7 +1579,13 @@ router.post('/credentials', async (req, res) => {
           prefix: prefix, // 文件路径前缀
           // 安全限制
           maxSize: 100 * 1024 * 1024, // 最大 100MB
-          allowedTypes: ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'video/mp4']
+          allowedTypes: [
+            'image/jpeg',
+            'image/png',
+            'image/gif',
+            'image/webp',
+            'video/mp4'
+          ]
         }
       }
     })
@@ -1565,27 +1655,27 @@ module.exports = router
 const refererConfig = {
   // 白名单模式：只允许以下 Referer 访问
   allowList: [
-    '*.myapp.com',      // 主站
-    '*.myapp.cn',       // 国内站
-    'localhost:*',      // 本地开发
+    '*.myapp.com', // 主站
+    '*.myapp.cn', // 国内站
+    'localhost:*', // 本地开发
     '127.0.0.1:*'
   ],
 
   // 黑名单模式（可选）：禁止以下 Referer
   blockList: [
-    '*. competitor.com',  // 竞争对手
+    '*. competitor.com', // 竞争对手
     'spam-site.com'
   ],
 
   // 空 Referer 处理：是否允许直接访问（浏览器地址栏输入 URL）
-  allowEmptyReferer: false  // 生产环境建议 false，测试环境可 true
+  allowEmptyReferer: false // 生产环境建议 false，测试环境可 true
 }
 
 // 2. URL 鉴权（更安全的防盗链，带时间戳和签名）
 class URLAuth {
   constructor(config) {
-    this.key = config.key  // 鉴权密钥，只在服务端保存
-    this.expireTime = config.expireTime || 3600  // 默认 1 小时有效期
+    this.key = config.key // 鉴权密钥，只在服务端保存
+    this.expireTime = config.expireTime || 3600 // 默认 1 小时有效期
   }
 
   /**
@@ -1645,11 +1735,14 @@ class URLAuth {
 // 使用示例
 const auth = new URLAuth({
   key: 'your-secret-key-only-known-by-server',
-  expireTime: 3600  // 1 小时有效期
+  expireTime: 3600 // 1 小时有效期
 })
 
 // 服务端生成带签名的 URL
-const signedUrl = auth.sign('https://cdn.example.com/private/document.pdf', 7200)
+const signedUrl = auth.sign(
+  'https://cdn.example.com/private/document.pdf',
+  7200
+)
 // 结果：https://cdn.example.com/private/document.pdf?sign=xxxxx&t=1699123456
 
 // CDN 边缘或源站验证
@@ -1662,15 +1755,12 @@ if (!result.valid) {
 const ipConfig = {
   // 只允许特定 IP 访问（适合内部系统）
   whiteList: [
-    '192.168.1.0/24',    // 内网网段
+    '192.168.1.0/24', // 内网网段
     '10.0.0.0/8'
   ],
 
   // 禁止特定 IP 访问（封禁攻击者）
-  blackList: [
-    '1.2.3.4',
-    '5.6.7.8'
-  ]
+  blackList: ['1.2.3.4', '5.6.7.8']
 }
 
 // 4. UA（User-Agent）黑白名单
@@ -1687,7 +1777,7 @@ const uaConfig = {
 
   // 只允许浏览器访问（严格模式）
   whiteList: [
-    'Mozilla/*',  // 现代浏览器
+    'Mozilla/*', // 现代浏览器
     'AppleWebKit/*'
   ]
 }
@@ -1697,28 +1787,28 @@ const uaConfig = {
 
 ## 10. 名词对照表
 
-| 英文术语 | 中文对照 | 解释 |
-| :--- | :--- | :--- |
-| **Object Storage** | 对象存储 | 一种数据存储架构，将数据作为对象管理，而非文件系统层级结构。适合存储图片、视频、备份等非结构化数据。 |
-| **Bucket** | 存储桶 | 对象存储中的顶级容器，用于组织和隔离数据。每个桶有独立的权限控制和配置。 |
-| **Object** | 对象/文件对象 | 对象存储的基本单元，包含数据本身、元数据（Metadata）和全局唯一键（Key）。 |
-| **CDN** | 内容分发网络 | Content Delivery Network，通过在全球部署边缘节点，将网站内容缓存到离用户最近的位置，加速访问速度。 |
-| **Edge Node** | 边缘节点 | CDN 网络中部署在各地的缓存服务器，直接为用户提供内容访问服务。 |
-| **Origin** | 源站 | CDN 回源获取内容的服务器，可以是对象存储、ECS 或自建服务器。 |
-| **Cache Hit** | 缓存命中 | 用户请求的内容在 CDN 边缘节点已存在，直接返回，无需回源。 |
-| **Cache Miss** | 缓存未命中 | 边缘节点没有请求的内容，需要回源获取。 |
-| **Hit Ratio** | 命中率 | 缓存命中次数占总请求次数的比例。命中率越高，回源越少，成本越低。 |
-| **TTL** | 生存时间/缓存时间 | Time To Live，内容在 CDN 节点上缓存的有效期。过期后需要重新回源。 |
-| **Back to Source** | 回源 | CDN 边缘节点向源站请求内容的过程。 |
-| **Purge/Refresh** | 刷新缓存 | 强制使 CDN 缓存失效，下次请求回源获取最新内容。 |
-| **Preheat** | 预热 | 在正式发布前，主动将内容推送到 CDN 节点，让用户第一次访问就能命中缓存。 |
-| **CORS** | 跨域资源共享 | Cross-Origin Resource Sharing，浏览器的安全机制，控制不同域之间的资源访问。 |
-| **Referer** | 来源页面 | HTTP 请求头字段，指示请求是从哪个页面链接过来的。用于防盗链。 |
-| **STS** | 安全令牌服务 | Security Token Service，颁发临时访问凭证的服务，用于前端直传等场景。 |
-| **Multipart Upload** | 分片上传 | 将大文件切分成多个小分片并行上传，支持断点续传，提高上传效率和可靠性。 |
-| **ETag** | 实体标签 | HTTP 响应头，用于标识资源的特定版本，常用于缓存验证。 |
-| **S3 API** | S3 兼容接口 | AWS S3 的对象存储 API 规范，多数云厂商的对象存储都兼容此接口。 |
-| **Canonical Query String** | 规范查询字符串 | 签名字符串的一部分，用于计算请求签名，确保请求不被篡改。 |
+| 英文术语                   | 中文对照          | 解释                                                                                                 |
+| :------------------------- | :---------------- | :--------------------------------------------------------------------------------------------------- |
+| **Object Storage**         | 对象存储          | 一种数据存储架构，将数据作为对象管理，而非文件系统层级结构。适合存储图片、视频、备份等非结构化数据。 |
+| **Bucket**                 | 存储桶            | 对象存储中的顶级容器，用于组织和隔离数据。每个桶有独立的权限控制和配置。                             |
+| **Object**                 | 对象/文件对象     | 对象存储的基本单元，包含数据本身、元数据（Metadata）和全局唯一键（Key）。                            |
+| **CDN**                    | 内容分发网络      | Content Delivery Network，通过在全球部署边缘节点，将网站内容缓存到离用户最近的位置，加速访问速度。   |
+| **Edge Node**              | 边缘节点          | CDN 网络中部署在各地的缓存服务器，直接为用户提供内容访问服务。                                       |
+| **Origin**                 | 源站              | CDN 回源获取内容的服务器，可以是对象存储、ECS 或自建服务器。                                         |
+| **Cache Hit**              | 缓存命中          | 用户请求的内容在 CDN 边缘节点已存在，直接返回，无需回源。                                            |
+| **Cache Miss**             | 缓存未命中        | 边缘节点没有请求的内容，需要回源获取。                                                               |
+| **Hit Ratio**              | 命中率            | 缓存命中次数占总请求次数的比例。命中率越高，回源越少，成本越低。                                     |
+| **TTL**                    | 生存时间/缓存时间 | Time To Live，内容在 CDN 节点上缓存的有效期。过期后需要重新回源。                                    |
+| **Back to Source**         | 回源              | CDN 边缘节点向源站请求内容的过程。                                                                   |
+| **Purge/Refresh**          | 刷新缓存          | 强制使 CDN 缓存失效，下次请求回源获取最新内容。                                                      |
+| **Preheat**                | 预热              | 在正式发布前，主动将内容推送到 CDN 节点，让用户第一次访问就能命中缓存。                              |
+| **CORS**                   | 跨域资源共享      | Cross-Origin Resource Sharing，浏览器的安全机制，控制不同域之间的资源访问。                          |
+| **Referer**                | 来源页面          | HTTP 请求头字段，指示请求是从哪个页面链接过来的。用于防盗链。                                        |
+| **STS**                    | 安全令牌服务      | Security Token Service，颁发临时访问凭证的服务，用于前端直传等场景。                                 |
+| **Multipart Upload**       | 分片上传          | 将大文件切分成多个小分片并行上传，支持断点续传，提高上传效率和可靠性。                               |
+| **ETag**                   | 实体标签          | HTTP 响应头，用于标识资源的特定版本，常用于缓存验证。                                                |
+| **S3 API**                 | S3 兼容接口       | AWS S3 的对象存储 API 规范，多数云厂商的对象存储都兼容此接口。                                       |
+| **Canonical Query String** | 规范查询字符串    | 签名字符串的一部分，用于计算请求签名，确保请求不被篡改。                                             |
 
 ---
 
diff --git a/docs/zh-cn/appendix/computer-networks.md b/docs/zh-cn/appendix/computer-networks.md
index 94cff1a..dde1a44 100644
--- a/docs/zh-cn/appendix/computer-networks.md
+++ b/docs/zh-cn/appendix/computer-networks.md
@@ -1,173 +1,337 @@
-# 计算机网络
+# 计算机网络:互联网的运作原理
 
-> 💡 **学习指南**：计算机网络是现代技术的基础设施。本章节通过可视化演示和实战案例，带你从五层模型到实际应用，全面理解网络通信原理、协议分析和故障排查。
+::: tip 🎯 核心问题
+**当你在浏览器输入 www.baidu.com 并按下回车,到底发生了什么?** 这个简单动作背后,其实隐藏着一个庞大的"快递系统":从填写订单(URL)到查询地址簿(DNS),从建立运输通道(TCP)到快递员送货(HTTP),最终在你屏幕上展示(渲染)。本章带你完整理解这个神奇的过程。
+:::
 
-## 0. 五层模型总览
+---
 
-现代计算机网络采用五层分层模型，每层负责不同的功能：
+## 0. 五层模型总览:快递公司的组织架构
+
+现代计算机网络就像一个**快递公司**,采用五层分层模型,每层负责不同的工作:
 
 <NetworkLayers />
 
-**为什么需要分层？**
+::: tip 💡 为什么需要分层?
+想象一个没有分工的快递公司:
 
-- 🎯 **模块化**：每层独立设计和实现
-- 🔧 **易维护**：修改一层不影响其他层
-- 📚 **标准化**：统一的接口和协议
-- 🔄 **可扩展**：新技术可以替换某一层
+- **每个人什么都干**:接电话、分拣、打包、开车送货...
+- **效率极低**:没人专精,什么都做不好
+- **难以扩展**:想加个"航空运输",所有员工都要重新培训
 
-## 1. 物理层 (Physical Layer)
+**分层设计**解决了这些问题:
+
+- **模块化**:每层独立设计和实现,改一层不影响其他层
+- **易维护**:网络慢了?查物理层和数据链路层;安全问题?查应用层
+- **标准化**:统一的接口和协议,不同厂商的设备能互相通信
+- **可扩展**:新技术可以替换某一层,比如从铜线换成光纤,只需改物理层
+  :::
+
+| 层级  | 技术名称   | 快递公司类比     | 核心职责                                 | 常见协议/设备      |
+| ----- | ---------- | ---------------- | ---------------------------------------- | ------------------ |
+| **5** | 应用层     | **客户服务部门** | 处理具体业务(网页、邮件、文件传输)       | HTTP, FTP, SMTP    |
+| **4** | 传输层     | **包裹分拣组**   | 确保包裹可靠送达(_TCP_)或快速送达(_UDP_) | TCP, UDP           |
+| **3** | 网络层     | **路由规划部**   | 规划最佳运输路线,选择走哪条路            | IP, 路由器         |
+| **2** | 数据链路层 | **车队管理**     | 管理车辆之间的通信,MAC 地址寻址          | 以太网, 交换机     |
+| **1** | 物理层     | **道路和车辆**   | 实际的物理传输(电缆、光纤、无线电波)     | 网线, 光纤, 无线电 |
+
+::: tip 📊 逐行解读这张表
+**第5层(应用层)**:这是你直接接触的层。浏览器打开网页、邮件客户端收发邮件,都是在调用这一层的服务。它负责处理"具体的业务逻辑"。
+
+**第4层(传输层)**:应用层把数据给它,它负责决定用什么方式"寄送"。TCP 像挂号信(可靠但慢),UDP 像平信(快但可能丢)。这一层用**端口号**区分不同的应用程序。
+
+**第3层(网络层)**:这是"全球定位系统"层。IP 地址就在这一层,路由器根据 IP 地址规划路线:"从北京到上海,应该走哪条高速公路?"
+
+**第2层(数据链路层)**:这一层负责"两站之间"的运输。就像快递车从北京分拣中心开到天津分拣中心,这一段路的通信规则由数据链路层规定。MAC 地址(设备身份证)也在这一层。
+
+**第1层(物理层)**:这是最底层,实实在在的物理介质。网线里的电信号、光纤里的光信号、Wi-Fi 的无线电波,都是物理层负责的。
+:::
+
+---
+
+## 1. 物理层:道路和车辆
 
 ### 1.1 基本概念
 
-物理层负责在物理介质上传输原始的比特流（0 和 1）。
+::: tip 💡 物理层是什么?
+物理层负责在物理介质上传输原始的比特流(0 和 1)。
 
-**关键任务**：
+**生活类比**:想象快递公司需要有**道路**和**运输车辆**:
 
-- 定义物理设备标准（RJ45、光纤接口等）
-- 规定传输介质（双绞线、光纤、无线电波）
-- 确定电气特性（电压、频率、编码方式）
+- 道路可以是:高速公路(光纤)、普通公路(网线)、航空线路(无线电波)
+- 车辆可以是:卡车(有线传输)、飞机(无线传输)
+- 货物(数据)最终都要变成能在这些道路上运输的形式
+  :::
+
+**关键任务**:
+
+- **定义物理设备标准**:RJ45 网线接口长什么样、光纤接口怎么接
+- **规定传输介质**:
+  - 有线:双绞线(网线)、光纤、同轴电缆
+  - 无线:Wi-Fi、蓝牙、4G/5G
+- **确定电气特性**:
+  - 用多少电压代表 0 和 1?
+  - 信号频率是多少?
+  - 怎么编码(比如曼彻斯特编码)?
 
 ### 1.2 传输介质
 
-**有线介质**：
+**有线介质**:
 
-- 双绞线（Twisted Pair）：Cat5、Cat6，用于以太网
-- 光纤（Fiber Optic）：长距离、高带宽
-- 同轴电缆（Coaxial）：早期以太网、有线电视
+| 类型         | 速度             | 距离     | 特点                     | 用途                     |
+| ------------ | ---------------- | -------- | ------------------------ | ------------------------ |
+| **双绞线**   | 100Mbps - 10Gbps | 100m     | 成本低,易安装,抗干扰一般 | 家庭、办公室网络         |
+| **光纤**     | 1Gbps - 100Tbps  | 几十公里 | 速度极快,抗干扰强,成本高 | 长距离、高带宽(跨海光缆) |
+| **同轴电缆** | 10Mbps - 1Gbps   | 500m     | 抗干扰好,但较粗          | 早期以太网、有线电视     |
 
-**无线介质**：
+::: tip 💡 为什么光纤这么快?
+光纤用**光**而不是电信号传输:
 
-- 无线电波（Wi-Fi、蓝牙、4G/5G）
-- 微波（卫星通信）
-- 红外线（短距离通信）
+- 光的频率极高,能调制大量数据(就像用不同颜色的光同时传输)
+- 光在光纤中几乎不衰减,能传输几十公里
+- 不受电磁干扰(高压电线、雷电都不怕)
+
+这就像用电信号寄快递(铜线)vs 用光速寄快递(光纤),速度差异是本质级别的。
+:::
+
+**无线介质**:
+
+| 类型      | 频段                 | 速度                | 距离   | 用途                 |
+| --------- | -------------------- | ------------------- | ------ | -------------------- |
+| **Wi-Fi** | 2.4GHz / 5GHz / 6GHz | 几十 Mbps - 几 Gbps | 几十米 | 家庭、办公室无线网络 |
+| **蓝牙**  | 2.4GHz               | 1-3 Mbps            | 10m    | 耳机、键鼠等短距设备 |
+| **4G/5G** | 700MHz - 39GHz       | 10Mbps - 10Gbps     | 几公里 | 移动网络             |
 
 ### 1.3 常见设备
 
-- **中继器 (Repeater)**：放大信号，延长传输距离
-- **集线器 (Hub)**：多端口中继器（已被交换机取代）
+**中继器(Repeater)**:
 
-## 2. 数据链路层 (Data Link Layer)
+- **作用**:放大信号,延长传输距离
+- **生活类比**:快递中转站。快递车开了 500 公里需要加油、司机换班,中继器就是让信号"休息充电"的地方
+- **为什么需要**:电信号在铜线传输会衰减,传几百米就弱得识别不出了
+
+**集线器(Hub)**:
+
+- **作用**:多端口中继器,从一个口收到的信号复制到所有口
+- **缺点**:效率低,已被**交换机**取代
+- **生活类比**:一个大厅,一个人喊话,所有人都能听到,但不是喊给谁的
+
+---
+
+## 2. 数据链路层:车队管理
 
 ### 2.1 基本概念
 
-数据链路层负责在直连的两个节点间传输数据帧。
+::: tip 💡 数据链路层做什么?
+数据链路层负责在**直连的两个节点**间传输数据帧。
 
-**核心功能**：
+**生活类比**:快递公司的**车队管理**:
 
-- 物理地址寻址（MAC 地址）
-- 帧的封装和解封装
-- 错误检测（CRC 校验）
-- 介质访问控制（MAC）
+- 快递车从北京分拣中心开到天津分拣中心(点对点)
+- 车上有司机(负责驾驶)、装卸工(负责搬运)
+- 两边分拣中心之间有约定:"每天 8 点发车""用标准尺寸的快递箱"
+  :::
 
-### 2.2 MAC 地址
+**核心功能**:
 
-**MAC 地址格式**：`00:1A:2B:3C:4D:5E`
+- **物理地址寻址(MAC 地址)**:每个网卡都有全球唯一的身份证号
+- **帧的封装和解封装**:把网络层的数据包"装进车厢"
+- **错误检测**:通过 CRC 校验,发现数据是否损坏
+- **介质访问控制**:多个设备共享一条线时,谁先谁后?(比如 Wi-Fi 多台设备连一个路由器)
 
-- 前 24 位：厂商标识（OUI）
-- 后 24 位：设备序列号
-- 全球唯一，烧录在网卡上
+### 2.2 MAC 地址:设备的身份证
 
-**查看 MAC 地址**：
+**MAC 地址格式**:`00:1A:2B:3C:4D:5E`
+
+::: tip 💡 MAC 地址 vs IP 地址
+这是初学者最容易混淆的两个概念:
+
+| 特性         | MAC 地址                | IP 地址                     |
+| ------------ | ----------------------- | --------------------------- |
+| **作用范围** | 局域网内(同一个 Wi-Fi)  | 全球互联网                  |
+| **分配方式** | 网卡出厂时烧录,全球唯一 | 由网络管理员动态分配        |
+| **变化**     | 一般不变(除非换网卡)    | 经常变化(连不同 Wi-Fi 会变) |
+| **类比**     | 身份证号(跟随你一生)    | 家庭住址(搬家就变)          |
+| **层级**     | 数据链路层(第2层)       | 网络层(第3层)               |
+
+**生活类比**:你要寄快递:
+
+- **MAC 地址** = 收件人身份证号(唯一标识这个人)
+- **IP 地址** = 收件人家庭住址(用于路由)
+
+快递员实际上需要"住址"才能送货,但身份证号能确保"这个人"是唯一的。
+:::
+
+**查看你的 MAC 地址**:
 
 ```bash
 # Windows
 ipconfig /all
+# 找到 "物理地址",类似: 00-1A-2B-3C-4D-5E
 
 # macOS/Linux
 ifconfig
+# 找到 "ether",类似: 00:1a:2b:3c:4d:5e
 ```
 
-### 2.3 以太网帧结构
+### 2.3 以太网帧:快递车厢的结构
+
+**以太网帧**就是数据链路层的"快递车厢",有一套标准格式:
 
 ```
 +------------+----------+---------+-----+----------+
 | 目标 MAC   | 源 MAC   | 类型    | 数据 | FCS      |
-| (6 bytes)  | (6 bytes)| (2 bytes)|     | (4 bytes)|
+| (6 bytes)  | (6 bytes) | (2 bytes)|     | (4 bytes) |
 +------------+----------+---------+-----+----------+
 ```
 
-**常见以太网类型**：
+::: tip 💡 逐行理解帧结构
+**目标 MAC (6字节)**:这帧数据给谁的?就像快递单上的收件人
 
-- `0x0800`：IPv4
-- `0x0806`：ARP
-- `0x86DD`：IPv6
+**源 MAC (6字节)**:这帧数据谁发的?就像寄件人信息
 
-### 2.4 交换机原理
+**类型 (2字节)**:车厢里装的是什么?
 
-**交换机工作方式**：
+- `0x0800` = IPv4 数据包
+- `0x0806` = ARP 请求(查询 MAC 地址)
+- `0x86DD` = IPv6 数据包
 
-1. **学习 MAC 地址**：记录端口与 MAC 的对应关系
-2. **转发帧**：根据目标 MAC 地址选择端口
-3. **过滤广播**：不会转发到所有端口（集线器会）
+**数据(46-1500字节)**:实际要传输的内容,就是网络层的 IP 数据包
 
-**查看交换机 MAC 表**：
+**FCS (4字节)**:帧校验序列。接收方用这个检查数据是否损坏,就像快递单上的"完好无损"签章
+:::
 
-```bash
-show mac address-table  # 思科设备
+### 2.4 交换机:聪明的交通指挥
+
+**交换机**是数据链路层的核心设备。
+
+::: tip 💡 交换机 vs 集线器
+**集线器**:
+
+- 收到数据后,简单地"广播"到所有端口
+- 所有设备都能看到,不是给自己的也得收下来再丢弃
+- 效率低,安全性差
+
+**交换机**:
+
+- **学习 MAC 地址**:记住哪个端口连了哪个 MAC 地址
+- **智能转发**:只把数据发到目标设备所在的端口
+- **效率高**:设备 A 和 B 通信,设备 C 不会收到
+  :::
+
+**交换机工作流程**:
+
+1. **学习**:设备 A (MAC: 11:11...) 发数据给交换机端口1
+   - 交换机记下:"11:11... 在端口1"
+
+2. **转发**:设备 A 要发数据给设备 B (MAC: 22:22...)
+   - 交换机查表:"22:22... 在端口3"
+   - 只把数据从端口3 发出去
+
+3. **广播**:如果交换机不知道目标 MAC 在哪(比如第一次通信)
+   - 向所有端口(除了来源端口)广播
+   - "谁是 22:22...?" 目标设备回应后,交换机学习到它的位置
+
+---
+
+## 3. 网络层:路由规划部
+
+### 3.1 IP 地址:互联网的门牌号
+
+::: tip 💡 IP 地址是什么?
+**IP 地址**就像互联网上的**家庭住址**,每台联网设备都需要一个。
+
+**IPv4 地址格式**:`192.168.1.1`
+
+- 32 位,通常用点分十进制表示
+- 分为**网络部分**(前3段)和**主机部分**(最后1段)
+- `192.168.1` 是网络号(这个小区)
+- `.1` 是主机号(这个小区的1号房)
+  :::
+
+**IP 地址分类(像城市规模)**:
+
+| 类别     | 范围示例              | 网络数    | 每个网络主机数 | 用途             | 类比       |
+| -------- | --------------------- | --------- | -------------- | ---------------- | ---------- |
+| **A 类** | 1.0.0.0 - 126.x.x.x   | 126       | 16,777,214     | 超大型网络(早期) | 特大城市   |
+| **B 类** | 128.0.0.0 - 191.x.x.x | 16,384    | 65,534         | 中型网络         | 中等城市   |
+| **C 类** | 192.0.0.0 - 223.x.x.x | 2,097,152 | 254            | 小型网络(最常见) | 小区、村庄 |
+
+::: tip 💡 私有 IP 地址:内网 vs 外网
+有些 IP 地址段被保留为"私有",不能直接在互联网上使用:
+
+| 类别     | 私有 IP 范围                    | 为什么用私有 IP?     |
+| -------- | ------------------------------- | -------------------- |
+| **A 类** | `10.0.0.0 - 10.255.255.255`     | 大型企业内网         |
+| **B 类** | `172.16.0.0 - 172.31.255.255`   | 中型企业内网         |
+| **C 类** | `192.168.0.0 - 192.168.255.255` | 家庭、小公司(最常见) |
+
+**生活类比**:
+
+- **私有 IP** = 你家的门牌号("3单元501室")
+- **公网 IP** = 你家在地图上的地址("XX市XX区XX路XX号")
+
+快递员(互联网)只能送到公网地址(你家楼门口),然后需要"路由器/NAT"转换到你家的私有地址。
+:::
+
+### 3.2 子网划分:把大楼分成多个单元
+
+::: tip 💡 为什么要划分子网?
+想象一个公司:
+
+- **不划分子网**:财务部、技术部、市场部都在 `192.168.1.0` 网段
+  - 广播风暴:一个人发广播,所有人都能收到
+  - 安全问题:技术部的开发服务器,市场部也能访问
+  - 管理混乱:网络出问题,不知道是哪个部门的
+
+**划分子网**:
+
+- 财务部:`192.168.1.0/24`
+- 技术部:`192.168.2.0/24`
+- 市场部:`192.168.3.0/24`
+
+各部门隔离,广播不出部门,管理更清晰。
+:::
+
+**子网掩码的作用**:
+
+子网掩码用来区分 IP 地址的哪部分是"网络号",哪部分是"主机号"。
+
+```
+IP:     192.168.1.10
+掩码:    255.255.255.0
+-----------------------
+网络号:  192.168.1.0   (前3段)
+主机号:  .10            (最后1段)
 ```
 
-## 3. 网络层 (Network Layer)
+**CIDR 表示法**:`192.168.1.0/24`
 
-### 3.1 IP 地址
-
-**IPv4 地址格式**：`192.168.1.1`
-
-- 32 位，通常用点分十进制表示
-- 分为网络部分和主机部分
-
-**IP 地址分类**：
-
-| 类别 | 范围                        | 网络数 | 主机数 | 用途     |
-| ---- | --------------------------- | ------ | ------ | -------- |
-| A 类 | 1.0.0.0 - 126.255.255.255   | 126    | 16M    | 大型网络 |
-| B 类 | 128.0.0.0 - 191.255.255.255 | 16K    | 65K    | 中型网络 |
-| C 类 | 192.0.0.0 - 223.255.255.255 | 2M     | 254    | 小型网络 |
-
-**私有 IP 地址**：
-
-- A 类：`10.0.0.0 - 10.255.255.255`
-- B 类：`172.16.0.0 - 172.31.255.255`
-- C 类：`192.168.0.0 - 192.168.255.255`
-
-### 3.2 子网划分
+- `/24` 表示前 24 位是网络位
+- 剩余 8 位是主机位(2^8 - 2 = 254 个可用 IP)
 
 <SubnetCalculator />
 
-**子网掩码的作用**：
+### 3.3 路由器:GPS 导航
 
-- 区分 IP 地址的网络部分和主机部分
-- 确定两个 IP 是否在同一网段
-- 计算网络地址和广播地址
+**路由器**是网络层的核心设备,负责"规划最佳路线"。
 
-**CIDR 表示法**：`192.168.1.0/24`
+::: tip 💡 路由器怎么工作?
+**生活类比**:GPS 导航软件
 
-- `/24` 表示前 24 位是网络位
-- 剩余 8 位是主机位
+- 你输入:"从北京天安门到上海外滩"
+- GPS 查询地图数据库,规划出最佳路线
+- 路线可能是:"北京 → 天津 → 济南 → 南京 → 上海"
 
-**子网划分示例**：
+**路由器的工作**:
 
-```
-原网络：192.168.1.0/24
-可用主机：192.168.1.1 - 192.168.1.254 (254 台)
+1. 收到数据包,查看目标 IP 地址
+2. 查询**路由表**(路由器的"地图数据库")
+3. 选择最佳路径:"下一站该去哪个路由器?"
+4. 转发到下一跳
+   :::
 
-划分为 /26 子网：
-- 子网 1：192.168.1.0/26   (192.168.1.1 - 192.168.1.62，62 台)
-- 子网 2：192.168.1.64/26  (192.168.1.65 - 192.168.1.126，62 台)
-- 子网 3：192.168.1.128/26 (192.168.1.129 - 192.168.1.190，62 台)
-- 子网 4：192.168.1.192/26 (192.168.1.193 - 192.168.1.254，62 台)
-```
-
-### 3.3 路由原理
-
-**路由器工作流程**：
-
-1. 接收数据包
-2. 检查目标 IP 地址
-3. 查询路由表
-4. 选择最佳路径
-5. 转发到下一跳
-
-**路由表示例**：
+**路由表示例**:
 
 ```
 目标网络          子网掩码          网关          接口
@@ -176,27 +340,25 @@ show mac address-table  # 思科设备
 0.0.0.0        0.0.0.0          192.168.1.1  eth0  (默认网关)
 ```
 
-**查看路由表**：
+::: tip 💡 理解路由表
+**第1行**:"发往 192.168.1.0 网段的包,直接从 eth0 接口发出去"(本地网络,不需要网关)
 
-```bash
-# Windows
-route print
+**第2行**:"发往 192.168.2.0 网段的包,发给 192.168.1.2(它是这个网络的'门')"
 
-# macOS/Linux
-netstat -rn
-```
+**第3行(默认网关)**:"不知道怎么走的包,全部发给 192.168.1.1(它连接互联网,会继续帮你转发)"
 
-### 3.4 ICMP 协议
+这就像你去外地:
 
-**ICMP (Internet Control Message Protocol)** 用于网络诊断。
+- 在本地:走路就到(直接路由)
+- 去隔壁城市:坐大巴(走网关)
+- 去国外:先到机场,再转机(默认网关 → 层层转发)
+  :::
 
-**常见 ICMP 类型**：
+### 3.4 ICMP:网络诊断工具
 
-- Echo Request (Type 8)：ping 请求
-- Echo Reply (Type 0)：ping 响应
-- Destination Unreachable (Type 3)：目标不可达
+**ICMP (Internet Control Message Protocol)** 用于网络诊断,最常用的就是 `ping` 命令。
 
-**Ping 命令**：
+**Ping 命令**:
 
 ```bash
 ping google.com
@@ -207,453 +369,258 @@ PING google.com (142.250.185.238): 56 data bytes
 64 bytes from 142.250.185.238: icmp_seq=1 ttl=117 time=11.8 ms
 ```
 
-## 4. 传输层 (Transport Layer)
+::: tip 💡 理解 ping 的输出
+**`64 bytes`**:数据包大小(64 字节)
 
-### 4.1 端口
+**`icmp_seq=0`**:这是第 0 个包(序列号)
 
-**端口号范围**：
+**`ttl=117`**:Time To Live(生存时间)
 
-- **0-1023**：系统端口（需要管理员权限）
-- **1024-49151**：注册端口
-- **49152-65535**：动态端口
+- 每经过一个路由器减 1
+- 防止数据包在网络中无限循环
+- 117 表示这个包经过了 255-117=138 个路由器
 
-**常见端口**：
+**`time=12.4 ms`**:往返时间(RTT, Round Trip Time)
 
-- `21`：FTP
-- `22`：SSH
-- `80`：HTTP
-- `443`：HTTPS
-- `3306`：MySQL
-- `5432`：PostgreSQL
-- `27017`：MongoDB
+- 你的电脑发送请求 → google.com 收到 → google.com 回应 → 你的电脑收到
+- 整个过程花了 12.4 毫秒
+- 数值越小,网络延迟越低,网速越快
+  :::
 
-**查看端口占用**：
+---
 
-```bash
-# macOS/Linux
-lsof -i :8080
+## 4. 传输层:可靠送达 vs 快速送达
 
-# Windows
-netstat -ano | findstr :8080
-```
+### 4.1 端口:应用的门牌号
 
-### 4.2 TCP vs UDP
+::: tip 💡 为什么需要端口号?
+想象一台服务器:
+
+- **只有 IP 地址**:数据包到了服务器,服务器不知道给哪个程序
+  - Web 服务器要?
+  - 邮件服务器要?
+  - 数据库服务器要?
+
+**端口号**就像"公司里的部门号":
+
+- IP: 公司地址(XX 市XX 路 XX 号)
+- 端口: 部门(301 财务部、302 技术部、303 市场部)
+
+数据包到了公司,前台(操作系统)根据"部门号"(端口)转发给对应部门(应用程序)。
+:::
+
+**端口号范围**:
+
+| 范围            | 类型     | 示例                          | 需要权限?                         |
+| --------------- | -------- | ----------------------------- | --------------------------------- |
+| **0-1023**      | 系统端口 | 80(HTTP)、443(HTTPS)、22(SSH) | ✅ 需要(防止普通用户占用关键服务) |
+| **1024-49151**  | 注册端口 | 3306(MySQL)、5432(PostgreSQL) | ❌ 不需要                         |
+| **49152-65535** | 动态端口 | 客户端临时使用                | ❌ 不需要                         |
+
+**常见端口速查**:
+
+| 端口      | 服务       | 用途            |
+| --------- | ---------- | --------------- |
+| **21**    | FTP        | 文件传输        |
+| **22**    | SSH        | 远程登录(安全)  |
+| **80**    | HTTP       | 网页(不安全)    |
+| **443**   | HTTPS      | 网页(安全,加密) |
+| **3306**  | MySQL      | 数据库          |
+| **5432**  | PostgreSQL | 数据库          |
+| **6379**  | Redis      | 缓存数据库      |
+| **27017** | MongoDB    | 数据库          |
+
+### 4.2 TCP vs UDP:挂号信 vs 平信
 
 <TcpUdpComparison />
 
-**选择建议**：
+**选择建议**:
 
-- 📧 **邮件、文件传输**：用 TCP（不能丢数据）
-- 📺 **视频、直播**：用 UDP（实时性优先）
-- 🌐 **网页浏览**：用 TCP（可靠性重要）
-- 🎮 **在线游戏**：用 UDP（速度优先）
+| 场景               | 选择    | 原因                                      |
+| ------------------ | ------- | ----------------------------------------- |
+| **邮件、文件传输** | **TCP** | 不能丢数据,一个字节错误都可能导致文件损坏 |
+| **视频、直播**     | **UDP** | 实时性优先,丢几帧没关系,但不能卡顿        |
+| **网页浏览**       | **TCP** | 可靠性重要,网页内容必须完整               |
+| **在线游戏**       | **UDP** | 速度优先,位置信息晚到比没到好             |
 
-### 4.3 TCP 三次握手
+::: tip 💡 深入理解:TCP 为什么可靠?
+TCP 通过以下机制保证可靠:
+
+1. **三次握手**:确保双方都能发送和接收
+2. **序列号**:每个字节都有编号,丢包能发现
+3. **确认应答**:收到数据必须回复 ACK,没收到就重传
+4. **流量控制**:接收方告诉发送方"我的缓冲区快满了,慢点发"
+5. **拥塞控制**:网络拥堵时,降低发送速度,避免"堵死"
+
+这就像寄挂号信:
+
+- 要签收(ACK)
+- 丢了邮政局会重传
+- 太多信件会积压,需要控制发送速度
+  :::
+
+### 4.3 TCP 三次握手:建立可靠连接
 
 ```
 客户端                                服务器
-  |                                    |
-  | -------- SYN (seq=x) -----------> |
-  |     (同步请求，x 是随机数)          |
-  |                                    |
-  | <------- SYN-ACK (seq=y, ack=x+1) -|
-  |     (同步确认，y 是随机数，确认号=x+1)|
-  |                                    |
-  | -------- ACK (ack=y+1) ----------> |
-  |     (确认，确认号=y+1)              |
-  |                                    |
-  |          连接建立成功                  |
+  |                                |
+  | -------- SYN(seq=x) ---------> |  第1次:你好,我想和你通信(SYN)
+  |                                |        (x 是随机数,防止伪造)
+  |                                |
+  | <--- SYN-ACK(seq=y, ack=x+1) ---|  第2次:收到!我也想和你通信(SYN)
+  |                                |        我收到了你的 x,所以 ack=x+1
+  |                                |
+  | -------- ACK(ack=y+1) --------> |  第3次:我收到了你的 y,所以 ack=y+1
+  |                                |        连接建立成功!
 ```
 
-**为什么需要三次？**
+::: tip 💡 为什么需要三次,不是两次?
+想象打电话:
 
-- 防止已失效的连接请求报文段突然又传送到了服务端
-- 确认双方的发送和接收能力都正常
-- 同步双方的初始序列号
+- **A**:你好!(SYN)
+- **B**:你好!(SYN-ACK) —- 此时 B 确认了 A 能收到,但 A 还不确定 B 能不能收到
+- **A**:我听到了!(ACK) —- 现在双方都知道对方能收能发
 
-### 4.4 TCP 四次挥手
+如果只有两次:
 
-```
-客户端                                服务器
-  |                                    |
-  | -------- FIN (seq=u) -----------> |
-  |     (请求关闭连接)                    |
-  |                                    |
-  | <------- ACK (ack=u+1) ----------- |
-  |     (确认收到关闭请求)                |
-  |                                    |
-  | <------- FIN (seq=w) --------------|
-  |     (服务器也可以关闭连接)            |
-  |                                    |
-  | -------- ACK (ack=w+1) ----------> |
-  |     (确认服务器关闭)                  |
-  |                                    |
-  |          连接完全关闭                  |
-```
+- A 发 SYN
+- B 回 SYN-ACK
+- 连接建立...但 B 不知道 A 有没有收到 SYN-ACK!如果 A 没收到,会重复发 SYN,但 B 以为已经建立连接,会出现问题
+  :::
 
-**为什么需要四次？**
+---
 
-- TCP 是全双工协议，双方都可以发送数据
-- 当一方关闭连接时，另一方可能还有数据要发送
-- 需要双方分别确认关闭各自方向的连接
+## 5. 应用层:具体的业务
 
-## 5. 应用层 (Application Layer)
+### 5.1 HTTP/HTTPS:网页的对话协议
 
-### 5.1 HTTP/HTTPS
+**HTTP (HyperText Transfer Protocol)** 是浏览器和服务器之间的"对话规则"。
 
-**HTTP (HyperText Transfer Protocol)** 超文本传输协议。
+| 特性       | HTTP                     | HTTPS                         |
+| ---------- | ------------------------ | ----------------------------- |
+| **加密**   | ❌ 否(明文,任何人都能看) | ✅ 是(TLS/SSL 加密)           |
+| **端口**   | 80                       | 443                           |
+| **安全性** | 低(密码、账号会被窃取)   | 高(即使被拦截,看到的也是乱码) |
+| **性能**   | 略快(无加密开销)         | 略慢(加密解密需要时间)        |
+| **SEO**    | 不友好(搜索引擎会降权)   | 友好(搜索引擎优先收录 HTTPS)  |
 
-**HTTP 请求方法**：
+**HTTP 请求方法**:
 
-| 方法   | 描述     | 示例         |
-| ------ | -------- | ------------ |
-| GET    | 获取资源 | 查看网页     |
-| POST   | 提交数据 | 表单提交     |
-| PUT    | 更新资源 | 更新用户信息 |
-| DELETE | 删除资源 | 删除文章     |
-| PATCH  | 部分更新 | 修改状态     |
+| 方法       | 描述                   | 生活类比                     | 示例                   |
+| ---------- | ---------------------- | ---------------------------- | ---------------------- |
+| **GET**    | 获取资源               | "我要看这个商品的详情"       | 查看网页、加载图片     |
+| **POST**   | 提交数据               | "我要下单,这是我的收货信息"  | 登录、注册、提交表单   |
+| **PUT**    | 更新资源(整体替换)     | "我要完整更新这个商品的信息" | 修改用户资料(全部字段) |
+| **PATCH**  | 部分更新               | "我只想改商品的名称"         | 修改用户资料(只改名字) |
+| **DELETE** | 删除资源               | "我要删除这个订单"           | 删除文章、删除评论     |
+| **HEAD**   | 只获取响应头(不要内容) | "这个文件还在吗?有多大?"     | 检查资源是否存在       |
 
-**HTTP 状态码**：
+**HTTP 状态码**(服务器给你的"回复"):
 
 ```
 2xx 成功
-- 200 OK：请求成功
-- 201 Created：资源创建成功
+- 200 OK:请求成功,这是你要的内容
+- 201 Created:创建成功(比如注册新用户)
 
 3xx 重定向
-- 301 Moved Permanently：永久重定向
-- 302 Found：临时重定向
+- 301 Moved Permanently:永久搬家了,请用新地址
+- 302 Found:暂时搬迁,请访问新地址
 
-4xx 客户端错误
-- 400 Bad Request：请求错误
-- 401 Unauthorized：未授权
-- 403 Forbidden：禁止访问
-- 404 Not Found：资源不存在
+4xx 客户端错误(你发的问题)
+- 400 Bad Request:请求格式错误,服务器看不懂
+- 401 Unauthorized:未授权,请先登录
+- 403 Forbidden:禁止访问,即使登录也不行
+- 404 Not Found:资源不存在(网址错了?)
 
-5xx 服务器错误
-- 500 Internal Server Error：服务器内部错误
-- 502 Bad Gateway：网关错误
-- 503 Service Unavailable：服务不可用
+5xx 服务器错误(服务器的问题)
+- 500 Internal Server Error:服务器内部出错了
+- 502 Bad Gateway:网关错误,服务器连不上后端
+- 503 Service Unavailable:服务暂时不可用(过载或维护)
 ```
 
-**HTTPS vs HTTP**：
+### 5.2 DNS:互联网的地址簿
 
-| 特性   | HTTP           | HTTPS            |
-| ------ | -------------- | ---------------- |
-| 加密   | 否             | 是（TLS/SSL）    |
-| 端口   | 80             | 443              |
-| 安全性 | 低（明文传输） | 高（加密传输）   |
-| 性能   | 略快           | 略慢（握手开销） |
-| SEO    | 不友好         | 友好             |
+**DNS (Domain Name System)** 域名系统,把人类可读的域名转换成机器可读的 IP 地址。
 
-**HTTPS 工作流程**：
+::: tip 💡 为什么需要 DNS?
+**没有 DNS 的世界**:
+
+- 你需要记住所有网站的 IP 地址
+- 访问百度:`https://110.242.68.66`(你能记住吗?)
+- IP 地址会变(服务器迁移),你需要重新记住
+
+**有 DNS 的世界**:
+
+- 记住域名:`baidu.com`
+- DNS 帮你转换:`baidu.com` → `110.242.68.66`
+- IP 变了?更新 DNS 记录就行,域名不用变
+  :::
+
+**DNS 查询过程**:
 
 ```
-客户端                              服务器
-  |                                  |
-  | -------- Client Hello ---------> |
-  | (支持的加密算法、随机数)              |
-  |                                  |
-  | <------- Server Header --------- |
-  | (服务器证书、随机数、选择的加密方法)    |
-  |                                  |
-  | 验证证书                           |
-  | 生成会话密钥                        |
-  |                                  |
-  | -------- 用公钥加密会话密钥 ------> |
-  |                                  |
-  | <------- 加密通信开始 ------------ |
-  | (用会话密钥加密所有数据)              |
+你(浏览器)
+    ↓ 问:baidu.com 的 IP 是多少?
+本地 DNS 服务器(你的网络运营商,如电信/联通)
+    ↓ 不知道? 问:
+根域名服务器(全球13组,管理所有顶级域)
+    ↓ 告诉:去问 .cn 的管理者
+顶级域名服务器(Verisign 管理 .cn)
+    ↓ 告诉:去问 baidu.com 的管理者
+权威 DNS 服务器(Baidu 自己的 DNS)
+    ↓ 告诉:baidu.com 的 IP 是 110.242.68.66
+返回 IP 地址给浏览器
 ```
 
-### 5.2 DNS
-
-**DNS (Domain Name System)** 域名系统，将域名转换为 IP 地址。
-
-**DNS 查询过程**：
-
-```
-用户查询 google.com
-    ↓
-浏览器缓存（最近查询）
-    ↓ 未命中
-系统缓存（/etc/hosts）
-    ↓ 未命中
-路由器缓存
-    ↓ 未命中
-ISP DNS 服务器
-    ↓ 未命中
-根域名服务器（.）
-    ↓ 指向 .com 服务器
-顶级域名服务器（.com）
-    ↓ 指向 google.com 服务器
-权威 DNS 服务器
-    ↓ 返回 IP 地址
-```
-
-**DNS 记录类型**：
-
-| 类型  | 用途       | 示例                                                   |
-| ----- | ---------- | ------------------------------------------------------ |
-| A     | IPv4 地址  | `www.example.com → 93.184.216.34`                      |
-| AAAA  | IPv6 地址  | `www.example.com → 2606:2800:220:1:248:1893:25c8:1946` |
-| CNAME | 别名       | `www.example.com → example.com`                        |
-| MX    | 邮件服务器 | `mail.example.com`                                     |
-| TXT   | 文本记录   | SPF、DKIM 验证                                         |
-
-**查看 DNS 记录**：
-
-```bash
-nslookup google.com
-dig google.com ANY
-```
-
-### 5.3 常见应用协议
-
-**FTP (File Transfer Protocol)**：文件传输
-
-- 端口：21（控制）、20（数据）
-- 主动模式 vs 被动模式
-
-**SSH (Secure Shell)**：远程登录
-
-- 端口：22
-- 加密通信
-
-**SMTP (Simple Mail Transfer Protocol)**：发送邮件
-
-- 端口：25
-- 端口：465（SSL）、587（TLS）
-
-**POP3/IMAP**：接收邮件
-
-- POP3：端口 110，下载到本地
-- IMAP：端口 143，服务器同步
-
-## 6. 浏览器请求全过程
-
-### 6.1 完整流程
-
-```
-1. URL 解析
-   - 解析协议、域名、端口、路径
-   - 编码特殊字符
-
-2. DNS 查询
-   - 查找域名对应的 IP 地址
-
-3. TCP 连接
-   - 三次握手建立连接
-
-4. TLS 握手（HTTPS）
-   - 协商加密参数
-
-5. 发送 HTTP 请求
-   GET /page HTTP/1.1
-   Host: www.example.com
-
-6. 服务器处理
-   - 路由匹配
-   - 业务逻辑
-   - 生成响应
-
-7. 接收 HTTP 响应
-   HTTP/1.1 200 OK
-   Content-Type: text/html
-
-8. 解析 HTML
-   - 构建 DOM 树
-
-9. 下载资源
-   - CSS、JS、图片等
-
-10. 渲染页面
-    - 构建渲染树
-    - 布局、绘制
-```
-
-### 6.2 抓包实战
-
-**使用浏览器 DevTools**：
-
-1. 打开开发者工具（F12）
-2. 切换到 Network 标签
-3. 刷新页面或发起请求
-4. 查看请求详情
-
-**关键信息**：
-
-- **Request Headers**：请求头信息
-- **Response Headers**：响应头信息
-- **Status**：状态码
-- **Size**：资源大小
-- **Time**：请求耗时
-- **Waterfall**：瀑布图，显示时间线
-
-**使用 Wireshark**：
-
-1. 下载安装 Wireshark
-2. 选择网络接口
-3. 开始抓包
-4. 过滤器：`http && ip.addr == 93.184.216.34`
-5. 分析 HTTP 报文
-
-**常用过滤器**：
-
-```
-http                    # 只显示 HTTP 协议
-ip.addr == 8.8.8.8      # 只显示与 8.8.8.8 的通信
-tcp.port == 80          # 只显示 80 端口的流量
-dns                     # 只显示 DNS 查询
-```
-
-## 7. 网络故障排查
-
-<NetworkTroubleshooting />
-
-### 7.1 诊断命令
-
-**基础命令**：
-
-```bash
-# 测试连通性
-ping google.com
-
-# 追踪路由
-traceroute google.com
-
-# 查看网络配置
-ifconfig
-ip addr show
-
-# 查看 DNS 配置
-cat /etc/resolv.conf
-
-# 查看路由表
-netstat -rn
-```
-
-**高级命令**：
-
-```bash
-# 查看端口占用
-lsof -i :8080
-
-# 查看网络连接
-netstat -an
-
-# 抓包分析
-tcpdump -i eth0 -w capture.pcap
-
-# 测试带宽
-speedtest-cli
-```
-
-### 7.2 常见问题
-
-**问题 1：无法上网**
-
-1. `ping 8.8.8.8` 测试基本连通性
-2. `ping google.com` 测试 DNS 解析
-3. 检查网关配置
-4. 清除 DNS 缓存
-
-**问题 2：网速慢**
-
-1. `speedtest-cli` 测试实际带宽
-2. 检查后台下载应用
-3. 重启路由器
-4. 更换 DNS 服务器
-
-**问题 3：延迟高**
-
-1. `ping -c 100` 统计平均延迟
-2. `traceroute` 找出高延迟路由
-3. 检查本地网络负载
-4. 使用有线连接测试
-
-**问题 4：端口无法访问**
-
-1. `netstat -tuln | grep :80` 检查服务监听
-2. 检查防火墙规则
-3. `iptables -L` 查看防火墙
-4. 测试本地访问：`curl http://localhost`
-
-## 8. 网络安全基础
-
-### 8.1 常见攻击
-
-**DDoS 攻击**：
-
-- 分布式拒绝服务
-- 大量请求耗尽服务器资源
-- 防御：CDN、流量清洗
-
-**中间人攻击**：
-
-- 拦截通信数据
-- 防御：使用 HTTPS、验证证书
-
-**SQL 注入**：
-
-- 通过输入框注入恶意 SQL
-- 防御：参数化查询、输入验证
-
-**XSS 攻击**：
-
-- 跨站脚本攻击
-- 防御：输出编码、CSP 策略
-
-### 8.2 安全实践
-
-**HTTPS 强制**：
-
-```
-# Nginx 配置
-server {
-    listen 80;
-    server_name example.com;
-    return 301 https://$host$request_uri;
-}
-
-server {
-    listen 443 ssl;
-    server_name example.com;
-    ssl_certificate /path/to/cert.pem;
-    ssl_certificate_key /path/to/key.pem;
-}
-```
-
-**防火墙配置**：
-
-```bash
-# 允许 SSH
-iptables -A INPUT -p tcp --dport 22 -j ACCEPT
-
-# 允许 HTTP/HTTPS
-iptables -A INPUT -p tcp --dport 80 -j ACCEPT
-iptables -A INPUT -p tcp --dport 443 -j ACCEPT
-
-# 拒绝其他连接
-iptables -A INPUT -j DROP
-```
-
-## 9. 总结
-
-计算机网络核心要点：
-
-- 📚 **分层模型**：理解五层模型，每层职责清晰
-- 🌐 **IP 地址**：掌握子网划分、路由原理
-- 🔄 **TCP/UDP**：理解可靠传输 vs 快速传输
-- 🔐 **HTTP/HTTPS**：Web 应用的基础协议
-- 🛠️ **故障排查**：从物理层到应用层逐层排查
-
-**学习建议**：
-
-- ✅ 多动手实践：使用 ping、traceroute、wireshark
-- ✅ 理解协议细节：阅读 RFC 文档
-- ✅ 抓包分析：用 Wireshark 观察实际流量
-- ✅ 排查问题：系统化地诊断网络故障
-- ✅ 关注安全：了解常见攻击和防御方法
-
-掌握计算机网络，你就能理解互联网的运作原理，写出更高效的网络应用！
+**DNS 记录类型**:
+
+| 类型      | 用途             | 示例                                                   |
+| --------- | ---------------- | ------------------------------------------------------ |
+| **A**     | 域名 → IPv4 地址 | `www.example.com → 93.184.216.34`                      |
+| **AAAA**  | 域名 → IPv6 地址 | `www.example.com → 2606:2800:220:1:248:1893:25c8:1946` |
+| **CNAME** | 别名             | `www.baidu.com → a.baidu.com`(多个域名指向同一个 IP)   |
+| **MX**    | 邮件服务器       | `@example.com → mail.example.com`(邮件发到哪里)        |
+
+---
+
+## 6. 总结:网络五层模型核心要点
+
+| 层级           | 核心概念            | 关键技术             | 生活类比                           |
+| -------------- | ------------------- | -------------------- | ---------------------------------- |
+| **应用层**     | 应用程序之间的通信  | HTTP, FTP, SMTP, DNS | 具体业务(寄快递、发邮件、浏览网页) |
+| **传输层**     | 端到端的可靠传输    | TCP(可靠), UDP(快速) | 快递方式(挂号信 vs 平信)           |
+| **网络层**     | 路由选择,寻址       | IP, 路由器, ICMP     | GPS 导航,规划路线                  |
+| **数据链路层** | 点对点传输,MAC 寻址 | 以太网, 交换机, MAC  | 车队管理,车辆之间通信              |
+| **物理层**     | 实际的物理传输      | 光纤, 网线, 无线电波 | 道路和运输工具                     |
+
+**学习建议**:
+
+- ✅ **从应用层往下学**:你每天都在用 HTTP,DNS,从熟悉的开始
+- ✅ **多用工具**:ping, traceroute, Wireshark,观察实际网络
+- ✅ **理解协议细节**:阅读 RFC 文档(比如 RFC 791 定义 IP)
+- ✅ **抓包分析**:用 Wireshark 观察 TCP 三次握手、HTTP 请求
+- ✅ **关注安全**:了解 DDoS、中间人攻击等常见威胁
+
+掌握计算机网络,你就能理解互联网的运作原理,写出更高效的网络应用!
+
+---
+
+## 附录:名词速查表
+
+| 名词            | 英文                          | 用人话解释                                  |
+| --------------- | ----------------------------- | ------------------------------------------- |
+| **OSI 模型**    | Open Systems Interconnection  | 七层网络模型(理论标准)                      |
+| **TCP/IP 模型** | -                             | 实际使用的四层/五层模型                     |
+| **MAC 地址**    | Media Access Control          | 网卡的物理地址,全球唯一,像身份证            |
+| **IP 地址**     | Internet Protocol             | 设备在互联网上的逻辑地址,像住址             |
+| **子网掩码**    | Subnet Mask                   | 区分 IP 地址的网络部分和主机部分            |
+| **端口**        | Port                          | 应用程序的"门牌号",区分同一台设备的不同服务 |
+| **TCP**         | Transmission Control Protocol | 可靠传输协议,三次握手,不丢包                |
+| **UDP**         | User Datagram Protocol        | 快速传输协议,不保证可靠,可能丢包            |
+| **DNS**         | Domain Name System            | 域名系统,把域名转成 IP 地址                 |
+| **HTTP**        | HyperText Transfer Protocol   | 超文本传输协议,网页通信规则                 |
+| **HTTPS**       | HTTP Secure                   | 加密的 HTTP,更安全                          |
+| **路由器**      | Router                        | 网络层设备,规划路线,连接不同网络            |
+| **交换机**      | Switch                        | 数据链路层设备,智能转发数据帧               |
+| **TTL**         | Time To Live                  | 生存时间,防止数据包无限循环                 |
+| **RTT**         | Round Trip Time               | 往返时间,数据从发送到接收确认的时间         |
diff --git a/docs/zh-cn/appendix/frontend-evolution.md b/docs/zh-cn/appendix/frontend-evolution.md
index b7e9e5b..c1e7426 100644
--- a/docs/zh-cn/appendix/frontend-evolution.md
+++ b/docs/zh-cn/appendix/frontend-evolution.md
@@ -1,424 +1,461 @@
-# 前端开发入门：从"贴海报"到"搭乐高" (Interactive Intro)
+# 前端开发演进史:从"贴海报"到"搭乐高"
 
-> 💡 **学习指南**：本章节无需编程基础，通过交互式演示带你回顾前端开发的 20 年变迁。我们将从最基础的 HTML 讲起，一直到现代的 Vue/React 组件化开发。
+::: tip 🎯 核心问题
+**为什么网页越来越复杂?前端技术为什么要不断演进?** 这个问题会带你理解从简单网页到现代 Web 应用的技术演变之路。
+:::
 
-先把几个最常见的新名词说清楚（后面会反复出现）：
+---
 
-- **HTML**：网页的"骨架"，负责内容和结构（标题、段落、图片、按钮）。
-- **CSS**：网页的"皮肤"，负责样式（颜色、大小、布局、动画）。
-- **JavaScript**：网页的"肌肉"，负责交互与逻辑（点击、输入、请求数据）。
-- **框架（Framework）**：一套成熟的开发方式和工具，让你更高效地做复杂页面（比如 Vue/React）。
+## 1. 为什么要关注前端演进史?
+
+### 1.1 从"电子海报"到"桌面应用"
+
+想象一下你在街上看到的**海报**:
+
+- ✅ 有内容(文字、图片)
+- ✅ 有设计(颜色、排版)
+- ❌ 但你跟它说话,它不会回应
+- ❌ 你点击某个地方,不会发生什么
+
+**最早的网页**就是这样的"电子海报":只能看、不能改、内容固定。
+
+**现代网页**完全不同了。它们像**桌面应用**(VS Code、Figma):
+
+- ✅ 可以编辑文档、画图、玩游戏
+- ✅ 实时响应你的每个操作
+- ✅ 甚至可以离线工作
+
+**这种转变的核心原因: 网页的功能越来越复杂,需要更高效的技术和开发方式。**
+
+### 1.2 一个生活的比喻:盖房子
+
+前端技术的演进,就像盖房子方式的进化:
+
+| 时代      | 🏠 盖房比喻        | 实际特点                     | 优缺点                      |
+| --------- | ------------------ | ---------------------------- | --------------------------- |
+| **2000s** | **贴海报**         | 静态网页,写好 HTML 就行      | ✅ 简单 ❌ 不能互动         |
+| **2010s** | **请工人手动装修** | jQuery 时代,手动操作每个元素 | ✅ 能互动 ❌ 代码乱、难维护 |
+| **2020s** | **用乐高搭房子**   | Vue/React 时代,组件化开发    | ✅ 高效、可维护 ❌ 学习曲线 |
+
+::: tip 💡 从表格中你能看到什么?
+
+**阶段一 → 阶段二**: 从"不能动"到"能动"。这是质的飞跃——网页开始有交互,但代价是代码变得混乱。
+
+**阶段二 → 阶段三**: 从"能用"到"好用"。组件化让代码像积木一样可复用,大幅提升开发效率。
+
+**核心思想**: 技术演进不是"为了新而新",而是为了解决上一个阶段的痛点。
+:::
+
+---
+
+## 2. 第一阶段:静态网页与"切图"(2000s)
 
 <FrontendEvolutionDemo />
 
-## 0. 引言：网页为什么越来越难做？
+### 2.1 这个时代是什么样的?
 
-最早的网页，只是**电子海报**——就像你在街上看到的纸质海报，只能看、不能互动。
+**开发方式**:
 
-现在的网页，是**桌面级应用** (如 VS Code, Figma)——可以编辑文档、画图、玩游戏，甚至剪辑视频。
+- 写几个 HTML 文件
+- 内嵌一些 CSS 和 JavaScript
+- 直接把文件拖到浏览器就能看效果
+- 上传文件夹到服务器就完成部署
 
-为了支撑这种转变，前端技术经历了一场从 "手工作坊" 到 "工业化生产" 的革命。
+**特点**:
 
-### 一个生活的比喻
+- ✅ **优点**: 简单直接,没有学习成本,写完就能跑
+- ❌ **缺点**: 无法实现复杂交互,代码一多就乱
 
-想象你要盖房子：
+::: details 查看当时的项目结构
 
-- **2000 年代（静态网页）**：就像**贴海报**。你画好一张图，贴到墙上就完事了，不能改动。
-- **2010 年代（jQuery 时代）**：就像**请工人手动装修**。你需要亲自告诉工人："把这块墙涂成蓝色"、"把那扇窗户打开"。工人很多、指令很杂，容易出错。
-- **2020 年代（Vue/React 时代）**：就像**用乐高积木搭房子**。你先设计好"房子长什么样"（设计图），然后乐高积木（组件）会自动按设计图组装好，不需要你一块一块手动拼。
+```
+project/
+├── index.html
+├── login.html
+├── css/
+│   ├── bootstrap.css
+│   └── custom.css
+├── js/
+│   ├── jquery.js
+│   └── app.js
+└── images/
+```
 
-**核心变化只有一点：页面越来越复杂，我们需要更高效的"组织方式"和"开发方式"。**
+**遇到的问题**:
 
-### 0.1 前端 vs 大前端（你到底在学什么？）
+1. **全局变量污染**: 所有变量都在全局命名空间,容易互相覆盖
+2. **依赖管理混乱**: 必须按正确顺序加载 JS 文件,否则会报错
+3. **代码难以复用**: 想复用某个功能,只能复制粘贴
+   :::
 
-很多人说"我学前端"，但不同公司口径不一样。
+### 2.2 "切图"是什么?
 
-- **前端（Web Frontend）**：主要指"在浏览器里跑的那部分"。典型产物是网站和 H5 页面。
-- **大前端（Big Frontend）**：泛指"所有用户界面相关的开发"。不只 Web，还包括小程序、App、桌面应用等。
+<SliceRequestDemo />
 
-这里的几个新词（后面也会用到）：
+你可能听说过"切图"这个词。它是早期前端的主要工作:
 
-- **端**：平台/运行环境的意思，比如 Web 端、移动端、桌面端。
-- **H5**：手机网页（本质也是 Web），通常用来做活动页/落地页，传播快、迭代快。
-- **WebView**：App 里用来显示网页的"内置浏览器控件"。很多 App 的部分页面其实就是 WebView。
-- **跨端**：用一套代码同时做多个端（比如同时做 iOS + Android）。
-- **原生**：直接用平台官方语言/能力开发（iOS 的 Swift、Android 的 Kotlin）。
+**什么是切图?**
 
-<BigFrontendScopeDemo />
+设计师用 Photoshop 设计好页面 → 前端把设计切成小图片 → 用 HTML 把图片拼成页面
 
-**关键点**：大前端不是一个"新岗位名字"，而是一种范围：把体验交付到更多平台。
+**为什么这么慢?**
+
+网页上的每张小图片,浏览器都要发一次**网络请求**。请求越多,加载越慢。
+
+::: tip 💡 雪碧图(Sprite)
+
+为了减少请求数,出现了"雪碧图"技术:把很多小图合成一张大图。
+
+优点是请求数变少,缺点是制作和维护都很麻烦。
+
+这个阶段的教训:**请求太多是性能大敌**。
+:::
 
 ---
 
-## 1. 第一阶段：静态网页与切图 (2000s-)
+## 3. 第二阶段:jQuery 时代 - "手动搬砖"(2010s)
 
-早期网页开发像做报纸：设计师把 UI 设计切成很多小图，前端把这些图片拼成页面。
-这就叫**切图**。
+### 3.1 为什么需要 jQuery?
 
-这里的几个新词：
+随着网页变复杂,原生 JavaScript 的问题暴露出来:
 
-- **静态网页**：页面内容基本固定，打开就是一份 HTML 文件（不像现在很多页面是"数据驱动、可交互"的）。
-- **UI**：User Interface，用户界面。也就是你看到的按钮、颜色、布局。
+- ❌ **API 繁琐**: 简单的操作也要写很多代码
+- ❌ **浏览器兼容**: 不同浏览器的 API 不一样,要写很多兼容代码
+- ❌ **选择器弱**: 找元素很麻烦
 
-### 1.1 为什么会慢？
+**jQuery** 诞生了。它让 JavaScript 变得简单:
 
-网页上的每一张小图，浏览器都要发一次**网络请求**。
-请求越多，加载越慢。
+```javascript
+// 原生 JavaScript (繁琐)
+const element = document.getElementById('title')
 
-想象一下你点外卖：
-- 如果你一次性下单 10 道菜，餐厅可以一起做完送过来。
-- 但如果你分 10 次下单，每次只点 1 道菜，骑手要跑 10 趟！
+// jQuery (简洁)
+const element = $('#title')
+```
 
-早期的网页就像"分 10 次下单"，每张图片都要单独"下单"（发请求）。
+### 3.2 jQuery 的思路:亲手改页面
 
-<EvolutionSliceRequestDemo />
+<JQueryVsStateDemo />
 
-补充一个常见技巧：**雪碧图 (Sprite)**。
-把很多小图合成一张大图，这样请求数会变少（但制作和维护更麻烦）。
+jQuery 的核心思路是**命令式**: 你告诉浏览器"怎么做"。
 
-**关键点**：早期网页慢，常见原因之一是"请求太多"。（图片、脚本、样式都会产生请求）
+```javascript
+// 找到标题元素
+$('#title').text('新标题')
+
+// 找到按钮并禁用
+$('#submit-btn').attr('disabled', true)
+
+// 找到列表并添加一项
+$('ul').append('<li>新项目</li>')
+```
+
+**问题**: 你需要记住页面上有哪些元素,每次数据变化都要手动更新所有相关元素。
+
+::: warning ⚠️ jQuery 的痛点
+
+想象你在做一个购物车:
+
+```javascript
+// 用户点击"添加到购物车"
+function addToCart() {
+  cartCount++ // 数据变化
+
+  // 你要手动更新所有相关地方
+  $('#cart-count').text(cartCount) // 右上角小红点
+  $('#cart-page-count').text(cartCount) // 购物车页面
+  $('#checkout-price').text(calculatePrice()) // 结算按钮
+
+  // 如果漏了一个地方,页面就不一致了!
+}
+```
+
+**这就是"手动搬砖"的代价**: 容易出错,难以维护。
+:::
+
+### 3.3 移动端普及:响应式设计的出现
+
+这个阶段还有一个重要变化:**手机和平板开始流行**。
+
+<ResponsiveGridDemo />
+
+网页必须适配不同屏幕。这需要**响应式布局**: 同一套 HTML/CSS,自动根据屏幕宽度变换布局。
+
+**响应式布局的核心: 媒体查询 (Media Query)**
+
+```css
+/* 电脑屏幕(大于 640px) */
+@media (min-width: 640px) {
+  .container {
+    display: flex;
+  }
+}
+
+/* 手机屏幕(小于 640px) */
+@media (max-width: 640px) {
+  .container {
+    display: block;
+  }
+}
+```
+
+::: tip 💡 响应式就像"智能相框"
+
+想象你在不同房间看同一张照片:
+
+- 在**大客厅**(电脑屏幕),照片可以摆大一些,旁边还能放其他装饰品
+- 在**小卧室**(手机屏幕),照片需要缩小,其他装饰品要收起来
+
+**响应式布局**就是"智能相框",它会自动根据房间大小调整展示方式。
+:::
 
 ---
 
-## 2. 第二阶段：移动端普及与响应式布局 (2010s)
+## 4. 第三阶段:从"手动搬砖"到"数据驱动"(Vue/React)
 
-手机和平板开始流行以后，网页必须适配不同屏幕。
-这就需要**响应式布局**：同一套 HTML/CSS，自动根据屏幕宽度变换布局。
+### 4.1 为什么需要新框架?
 
-这里用到了**媒体查询 (Media Query)**：
-它是 CSS 里的"条件判断"，比如"如果屏幕小于 640px，就用 1 列布局"。
+jQuery 时代的问题积累到一定程度:
 
-想象一下你在不同房间看同一张照片：
-- 在**大客厅**（电脑屏幕），照片可以摆大一些，旁边还能放其他装饰品。
-- 在**小卧室**（手机屏幕），照片需要缩小，其他装饰品要收起来，否则会挤不下。
+- **代码一多就乱**: 到处都是 DOM 操作,难以维护
+- **容易出 bug**: 漏更新一个地方,页面就不一致
+- **协作困难**: 多人修改同一个文件,容易冲突
 
-**响应式布局**就是"智能相框"，它会自动根据房间大小调整展示方式。
+**Vue / React** 的核心思路:**只改数据,页面自动更新**。
 
-<EvolutionResponsiveGridDemo />
-
-**关键点**：响应式让网页"会变形"，不再只适配电脑。
-
----
-
-## 3. 第三阶段：从"手动搬砖"到"数据驱动" (jQuery -> Vue/React)
-
-网页开始像 App 一样复杂之后，最麻烦的事变成了：**同一份数据变化，要改很多地方**。
-
-举个最常见的例子：购物车数量从 1 变成 2。
-
-- 右上角小红点要变
-- 购物车页面的数量要变
-- 结算按钮的价格要变
-
-下面这个可视化演示，专门用来解释：**什么是 jQuery（以及它为什么会累）**。
-
-想象一下你在餐厅当服务员：
-- **jQuery 时代**：客人点了一份牛排，你要亲自跑厨房告诉厨师、跑吧台拿饮料、跑收银台记账。客人加菜，你又要重新跑一遍。**你成了"跑腿王"，累得半死**。
-- **Vue/React 时代**：你只需在单子上写好"客人要什么"（数据），厨房、吧台、收银台会自动看单子做事。客人加菜，你只需改单子，其他地方**自动更新**。**你成了"指挥家"，轻松优雅**。
-
-<EvolutionJQueryVsStateDemo />
-
-### 3.1 jQuery 的思路：我来"亲手改页面"
-
-在 jQuery 时代（2005+），你通常会写很多"命令"去改页面：
-"找到某个元素，把文字改掉；找到某个按钮，把它禁用……"
-
-它的问题不是"写不出来"，而是：**只要漏改一个地方，页面就会出现前后不一致的 bug**。
-页面越大，这种 bug 越多。
-
-就像你手动修一栋大楼：
-- 你要记住"每个房间的长什么样"。
-- 你要亲自"一间一间地修"。
-- 如果你忘了修某间房，或者修错了，整栋楼就不一致了。
-
-这里用到的新词（先解释清楚）：
-
-- **jQuery**：早期非常流行的 JavaScript 工具库，特点是"很方便地找元素、改元素"。
-- **DOM**：浏览器里保存页面结构的一棵"树"（按钮、文字、图片都在这棵树上）。
-- **ID**：HTML 元素的唯一名字（类似"身份证号"），方便你定位某一个元素。
-- **div**：HTML 里最常用的"盒子"标签，用来做布局和容器。
-
-### 3.2 Vue/React 的思路：我只改"数据"，页面自己变
-
-后来大家意识到：与其到处改页面，不如只维护一份**状态 (State)**。
-状态变了，页面自动刷新到正确的样子。
-
-这就是"数据驱动 UI"的核心：
-
-- **State（状态）**：页面的"数据"，比如购物车数量、登录状态、输入框内容。
-- **数据驱动**：你只改 State，不直接改 DOM；框架负责把界面同步到正确状态。
-- **Vue/React**：现代前端框架，主要解决"状态变化 -> 界面自动更新"。
-
-想象一下你在玩"模拟城市"游戏：
-- 你不需要"手动画每一栋房子"（手动改 DOM）。
-- 你只需要调整"城市数据"（比如人口、资金、政策），游戏画面**自动更新**。
-
-**这就是数据驱动的魅力：你只关心"数据长什么样"，不关心"页面怎么画"。**
-
-### 3.3 什么是"命令式"和"声明式"？
-
-这就好比你要画一幅画：
-
-- **命令式**：你告诉画家"拿起笔，蘸红颜料，在坐标(10,10)画一个圈"。
-- **声明式**：你直接给画家一张照片，"给我画成这样"。
-
-想象一下你点披萨：
-- **命令式**：你亲自和面、撒料、烤披萨、切披萨。你要记住每一步，很累。
-- **声明式**：你只需说"我要一个芝士披萨"，披萨店自动做好。你只需"声明"你要什么，不关心"怎么做"。
-
-### 3.4 交互演示：两种写法的区别
-
-下方的演示展示了两种思维的巨大差异。
-
-- **左边 (jQuery)**：你需要手动关注每一步 DOM 操作。忘了更新 DOM？界面就不对了。
-- **右边 (Vue)**：你只管修改数据 `count`，界面自动变。
+### 4.2 Vue/React 的思路:声明式 UI
 
 <ImperativeVsDeclarativeDemo />
 
-**关键点**：从 jQuery 到 Vue/React，变化的核心不是"语法"，而是**思维方式**：从"我去改页面"变成"我只改数据"。
+**jQuery (命令式)**:
 
-### 3.5 Vue 和 React 怎么选？先把差异理解清楚
+```javascript
+// 你要告诉浏览器每一步怎么做
+$('#title').text('新标题')
+$('#title').css('color', 'red')
+$('#title').show()
+```
 
-很多初学者会纠结："我到底学 Vue 还是 React？"
-先别急着站队。你先把它们的"共同点"和"差异点"理解清楚，就不会被带节奏了。
+**Vue (声明式)**:
 
-**共同点（它们都在解决同一件事）**：
+```javascript
+// 你只需告诉浏览器"要显示什么"
+data() {
+  return {
+    title: "新标题",
+    color: "red",
+    visible: true
+  }
+}
+```
 
-- 都是为了解决：页面复杂时，如何可靠地管理状态、更新界面
-- 都强调：组件化（把页面拆成积木）
+::: tip 💡 命令式 vs 声明式
 
-**差异点（你会在写代码时真实感受到）**：
+就像画一幅画:
 
-- **写 UI 的方式**：Vue 常用 Template；React 常用 JSX
-- **状态变化时怎么更新**：Vue 更偏"依赖追踪"；React 更偏"重新渲染组件函数"
+- **命令式**: 你告诉画家"拿起笔,蘸红颜料,在坐标(10,10)画一个圈"
+- **声明式**: 你直接给画家一张照片,"给我画成这样"
 
-这里的几个新词（像课件一样解释清楚）：
+Vue/React 就是"声明式": 你描述"页面长什么样",框架负责"怎么把它画出来"。
+:::
 
-- **Template**：Vue 常见写法，用类似 HTML 的语法来写界面。
-- **JSX**：React 常见写法，用"像写 JS 一样"的方式写界面结构。
-- **Hook**：React 的一套函数式能力（比如 `useState`），用来保存状态、处理副作用。
-- **SFC**：Single File Component，Vue 常见的单文件组件（一个 `.vue` 文件里写模板/逻辑/样式）。
+### 4.3 组件化:像搭乐高一样写页面
 
-<VueReactComparisonDemo />
+**Vue / React** 最强大的特性是**组件化**: 把页面拆成一个个独立的"积木"。
 
-**关键点**：别死记名词。你只要记住一句话：它们都能做同样的产品，只是"写法和心智模型"不一样。
+想象一下你在搭乐高:
 
----
+- 你不需要"从头开始雕刻每一块积木"(从头写 HTML/CSS)
+- 你只需要"按说明书把积木拼在一起"(把组件组合起来)
+- 每个积木都是**独立的**,你可以在不同的套装里**重复使用**
 
-## 4. 第四阶段：组件化（像搭积木一样写页面）
+**组件的好处**:
 
-解决了"怎么更新页面"的问题，接下来是"怎么组织代码"。
-以前一个页面可能是一个超大的 HTML 文件，改一个按钮可能牵连全局。
+- **复用**: 写一个"商品卡片"组件,可以用 100 次
+- **封装**: 组件内部的状态不影响别人
+- **维护**: 修改一个组件,所有用到它的地方都会更新
 
-### 4.1 "积木"是什么？
-
-现代前端把页面拆成了**组件**。
-一个按钮、一个导航栏、一个商品卡片，都是独立的积木。
-
-想象一下你在搭乐高：
-- 你不需要"从头开始雕刻每一块积木"（从头写 HTML/CSS）。
-- 你只需要"按说明书把积木拼在一起"（把组件组合起来）。
-- 每个积木都是**独立的**，你可以在不同的套装里**重复使用**。
-
-### 4.2 为什么组件能复用？
-
-定义好一个"商品卡片"组件后，你可以由它生成 100 个实例。每个实例都有自己独立的状态（比如点赞状态），互不干扰。
-
-想象一下你有一个"万能开关"组件：
-- 你可以把这个开关放在客厅、卧室、厨房。
-- 每个开关都是**独立的**：你按客厅的开关，不会影响到卧室的灯。
-- 但它们都是**同一个组件**，你只需要设计一次"开关长什么样"，就可以到处使用。
-
-<ComponentReusabilityDemo />
-
-**新名词解释**：
-
-- **组件 (Component)**：页面里的"积木块"，可以单独复用。
-- **封装**：组件内部的状态不影响别人。
-- **复用**：同一个组件可以用很多次。
-
-**关键点**：组件化让页面像搭积木一样搭出来。
-
----
-
-## 5. 第五阶段：页面切换体验（MPA vs SPA）
-
-用户不再想要"每点一次就刷新整页"的体验。
-于是出现了**单页应用 (SPA)**：整个网站只加载一次，之后只是切换内容。
-
-与之对应的是**多页应用 (MPA)**：每点一次都会重新加载整个页面。
-
-这里的一个新词：**路由 (Routing)**。
-简单理解：就是"从 A 页面切到 B 页面"的规则和过程。
-
-再补两个新词（非常重要）：
-
-- **前端路由**：页面切换主要由浏览器里的 JavaScript 控制（常见于 SPA）。
-- **后端路由**：页面切换主要由服务器决定"返回哪个页面"（常见于 MPA）。
-
-想象一下你在看一本书：
-- **MPA（多页应用）**：就像**翻书**。每翻一页，你都要把旧书合上、去书架上拿一本新书。慢，而且你之前在书上做的笔记（比如折页）都会消失。
-- **SPA（单页应用）**：就像**在同一页纸上换内容**。你只需要擦掉旧内容、写上新内容，**纸还是那张纸**。快，而且你做的笔记一直都在。
+### 4.4 SPA:单页应用的诞生
 
 <RoutingModeDemo />
 
-### 5.1 MPA 是什么？（多页应用）
+**Vue / React** 时代还有一个重要变化:**从 MPA 到 SPA**。
 
-MPA 的直觉很像"翻书"：
+**MPA (Multi-Page Application)**:
 
-- 点"商品页" -> 浏览器向服务器要一个新的页面（新的 HTML）
-- 旧页面被替换掉 -> 原来的输入、滚动位置、临时数据往往会消失
+- 点一个链接 → 整页刷新 → 显示新页面
+- 就像**翻书**: 每翻一页都要把旧书合上、去书架拿新书
 
-想象一下你在逛商场：
-- 每进一家店（点一个链接），你都要**走出商场、重新排队进门**（整页刷新）。
-- 你在上一家店试过的衣服（输入的内容）、拿过的购物车，**全部清空**。
+**SPA (Single-Page Application)**:
 
-**优点（为什么很多网站仍在用）**：
+- 点一个链接 → 只刷新内容区域 → 页面不刷新
+- 就像**同一本书里换章节**: 只擦掉旧内容、写上新内容
 
-- 结构简单：服务器负责"出页面"，浏览器负责"展示"
-- SEO 友好：搜索引擎更容易直接看到页面内容
-- 首屏容易快：因为服务器直接给了 HTML
+**SPA 的优点**:
 
-**缺点**：
-
-- 体验偏"跳"：整页刷新会白一下、加载一下
-- 复杂交互会变难：页面之间共享状态不方便
-
-### 5.2 SPA 是什么？（单页应用）
-
-SPA 更像"同一本书里换章节"：
-
-- 第一次打开：加载一个"外壳页面"（HTML + CSS + JS）
-- 之后切换页面：通常只换内容区域，整页不刷新
-
-想象一下你在用手机的 App：
-- 打开微信（第一次加载），之后你刷朋友圈、看聊天、进公众号，**页面不会重新加载**，只是内容在切换。
-- 你输入了一半的消息、看到的滚动位置，**切换后再回来还在**。
-
-**优点**：
-
-- 体验丝滑：页面切换快
-- 状态好管理：同一个页面里，数据更容易共享（登录态、购物车等）
-
-**缺点（也要知道）**：
-
-- 首次加载可能更慢：需要先下载一堆 JS
-- SEO 要额外处理：通常需要 SSR/SSG 方案配合（后面第 7 阶段会讲）
-
-### 5.3 交互演示：状态会不会丢？
-
-下面这个小实验更直观：输入一段文字，然后切换页面再回来，看看有没有被清空。
-
-想象一下你正在填写一张申请表：
-- **MPA（翻书模式）**：你填到一半，去另一页查资料，回来发现**表格被清空了**，要重新填。
-- **SPA（同一页模式）**：你填到一半，去另一页查资料，回来发现**表格还在**，继续填就行。
-
-<SpaStatePreservationDemo />
-
-**关键点**：从"整页刷新"到"局部更新"，带来的不仅是速度，更是"状态能不能保留"的体验差异。
+- ✅ **体验丝滑**: 页面切换快
+- ✅ **状态好管理**: 输入的内容、滚动位置都在
+- ❌ **首屏可能慢**: 需要先下载 JavaScript
+- ❌ **SEO 要额外处理**: 搜索引擎可能抓不到内容(需要 SSR/SSG)
 
 ---
 
-## 6. 第六阶段：工程化（从"手工作坊"到"现代化工厂"）
-
-前端项目越来越大，不能再靠手动引入脚本文件。
-于是有了**打包工具**（Webpack/Vite）：把多个文件和依赖打成一个或多个"优化后的包"。
-
-想象一下你在整理行李：
-- **以前（手动引入）**：你要出门，把衣服、裤子、袜子一件一件拿在手里，容易丢、容易乱。
-- **现在（工程化打包）**：你把所有东西**打包进一个行李箱**，拉着就走，整齐又方便。
-
-**依赖**就是你用到的第三方库，比如图表库、编辑器。
-
-想象一下你在做饭：
-- 你要做蛋糕，需要面粉、鸡蛋、糖（**依赖**）。
-- 你不需要自己种小麦、养鸡（**自己写所有代码**），而是去超市买现成的（**使用第三方库**）。
-- **工程化**就是"超市购物清单"，帮你自动把所有需要的食材买齐、分类放好。
-
-<BundlerSizeDemo />
-
-这里的几个新词：
-
-- **工程化**：用工具和规范把项目"像工程一样"管理（目录结构、构建、发布、代码规范等）。
-- **Bundle（包）**：打包后的产物文件。
-- **Tree Shaking**：把"没用到的代码"从包里摇掉，体积更小。
-
-**关键点**：工程化让多人协作的大项目变得可控。
-
----
-
-## 7. 第七阶段：渲染方式（CSR / SSR / SSG）
-
-为了更快的首屏、更好的搜索排名，渲染方式也在进化。
-
-想象一下你在餐厅吃饭，有三种服务模式：
-
-- **CSR（客户端渲染）**：服务员给你一个**半成品食材包**（JS 文件），你自己在桌上做饭。等菜时间长（要下载 JS），但做完后你可以随时"热更新"（交互流畅）。
-
-- **SSR（服务端渲染）**：服务员在**厨房做好菜**（服务器渲染 HTML），直接端给你。上菜快（首屏快），但你想加辣（交互），还得等厨师（服务器响应）。
-
-- **SSG（静态生成）**：餐厅**提前把所有菜做好**，放在保温柜里。你来点餐，立刻就能吃（最快）。但菜单是固定的（静态内容），不能临时加菜。
-
-- **首屏**：用户打开网站时，最先看到的那一屏内容。
-- **SEO**：Search Engine Optimization，搜索引擎优化。让页面更容易被搜索到。
-- **TTFB**：Time To First Byte，浏览器收到"第一口数据"的时间（越小越快）。
-- **TTI**：Time To Interactive，页面变得"可以点、可以用"的时间。
+## 5. 渲染策略:从 CSR 到 SSR/SSG
 
 <RenderingStrategyDemo />
 
-**关键点**：不同渲染策略适配不同业务场景。
+## 6. 第四阶段:工程化与构建工具(2015s-2020s)
+
+### 6.1 为什么需要"工程化"?
+
+前端项目越来越大,不能再靠"手动引入脚本"。
+
+**工程化**就是用工具和规范,让开发更高效、代码更可靠、协作更顺畅。
+
+::: tip 💡 工程化 = 从"手工作坊"到"现代化工厂"
+
+想象一下你在家做饭 vs 开餐厅:
+
+- **在家做饭**: 想吃什么就做什么,很自由
+- **开餐厅**: 需要标准化的菜谱、规范的操作流程、统一的原材料采购
+
+前端开发也一样:
+
+- **小项目**: 怎么写都行
+- **大项目**: 需要统一的代码规范、自动化工具、标准化流程
+  :::
+
+### 6.2 构建工具:Webpack → Vite
+
+**Webpack** (传统):
+
+- 工作方式:**先打包,后服务**
+- 启动时: 打包所有代码 → 启动服务器
+- 问题:**慢**。项目越大,启动越慢(可能要等 30 秒)
+
+**Vite** (现代):
+
+- 工作方式:**按需编译**
+- 启动时: 不打包,直接启动服务器
+- 浏览器请求哪个文件,就实时编译哪个
+- 优势:**快**。通常 1 秒内启动
+
+| 对比项   | Webpack | Vite   | 提升         |
+| -------- | ------- | ------ | ------------ |
+| 冷启动   | 30s+    | <1s    | **快 30 倍** |
+| 热更新   | 3-5s    | <100ms | **快 30 倍** |
+| 配置文件 | 几百行  | 几十行 | **大幅简化** |
+
+::: tip 💡 为什么 Vite 这么快?
+
+**Webpack** 就像**整备家当搬家**:先把所有东西打包,再出门。
+
+**Vite** 就像**轻装旅行**:只带必需品,用到什么再买什么。
+
+在开发环境,大多数时候你只需要修改几个文件,Vite 只编译这几个文件,当然快。
+:::
 
 ---
 
-## 8. 小结与学习建议
+## 7. 总结:演进的本质
 
-前端技术的进化，本质上是在解决两个问题：
+前端技术的演进,本质上是在解决两个问题:
 
-1.  **效率**：从 手动操作 DOM -> 数据驱动 (MVVM)。
-2.  **规模**：从 巨型面条代码 -> 组件化 + 工程化。
+### 7.1 效率:从手动到自动
 
-**MVVM 是什么？**
-简单理解：**Model（数据）变了，View（界面）自动变**。
+| 时代      | 开发方式                 | 效率       |
+| --------- | ------------------------ | ---------- |
+| **2000s** | 手写 HTML/CSS/JS         | ⭐         |
+| **2010s** | jQuery + 手动 DOM 操作   | ⭐⭐       |
+| **2020s** | Vue/React + 数据驱动     | ⭐⭐⭐     |
+| **现在**  | 组件化 + 工程化 + 自动化 | ⭐⭐⭐⭐⭐ |
 
-现在你可以把前端理解成三件事：
+### 7.2 规模:从个人到团队
 
-1.  **写页面**：HTML + CSS（结构与样式）
-2.  **让页面动起来**：JavaScript（交互与状态）
-3.  **把复杂项目做好**：组件化 + 工程化（协作与质量）
+| 时代      | 项目规模   | 协作方式                |
+| --------- | ---------- | ----------------------- |
+| **2000s** | 几个文件   | 单人就能维护            |
+| **2010s** | 几十个文件 | 小团队,容易冲突         |
+| **2020s** | 几百个文件 | 中团队,需要规范         |
+| **现在**  | 几千个文件 | 大团队,需要完整工程体系 |
 
-如果你刚开始学，建议按这个顺序：
+---
 
-- 先把 HTML/CSS 写熟（布局、响应式）
-- 再学 JavaScript 的基础（变量、函数、事件）
-- 最后上手一个框架（Vue/React），理解"状态驱动 UI"
+## 8. 学习路线图
+
+### 8.1 如果你是零基础
+
+**第 1 步: HTML/CSS/JavaScript 基础**
+
+- 理解网页的三大基石
+- 能写出简单的静态页面
+
+**第 2 步: 学习一个框架(Vue 推荐)**
+
+- 理解"数据驱动"的思想
+- 掌握组件化开发
+
+**第 3 步: 实战项目**
+
+- 做一个完整的单页应用
+- 熟悉路由、状态管理、API 调用
+
+### 8.2 如果你有基础
+
+**进阶方向**:
+
+- **工程化**: 学习 Vite/Webpack,理解构建流程
+- **性能优化**: 学习懒加载、代码分割、缓存策略
+- **TypeScript**: 为代码加上类型,提升可靠性
+- **服务端渲染**: 学习 Nuxt/Next.js,解决 SEO 和首屏问题
 
 ---
 
 ## 9. 名词速查表 (Glossary)
 
-| 名词               | 全称                                       | 解释                                                                                           |
-| :----------------- | :----------------------------------------- | :--------------------------------------------------------------------------------------------- |
-| **HTML**           | HyperText Markup Language                  | 超文本标记语言。网页的骨架，定义内容和结构。                                                   |
-| **CSS**            | Cascading Style Sheets                     | 层叠样式表。网页的皮肤，定义颜色、布局、动画。                                                 |
-| **JS**             | JavaScript                                 | 网页的肌肉，负责交互和逻辑。                                                                   |
-| **DOM**            | Document Object Model                      | 文档对象模型。浏览器内部表示页面结构的树形对象。                                               |
-| **jQuery**         | -                                          | 早期流行的 JS 库，简化了 DOM 操作。                                                            |
-| **Vue/React**      | -                                          | 现代前端框架，采用数据驱动和组件化开发。                                                       |
-| **State**          | -                                          | 状态。组件或应用的数据，状态变化驱动 UI 更新。                                                   |
-| **组件**           | Component                                  | 可复用的 UI 单元，如按钮、卡片、导航栏。                                                       |
-| **MPA**            | Multi-Page Application                     | 多页应用。每次跳转都重新加载整个页面。                                                         |
-| **SPA**            | Single-Page Application                    | 单页应用。只加载一次，后续切换不刷新页面。                                                     |
-| **路由**           | Routing                                    | 管理页面之间切换的规则和过程。                                                                 |
-| **CSR**            | Client-Side Rendering                      | 客户端渲染。浏览器下载 JS 后执行生成页面。                                                     |
-| **SSR**            | Server-Side Rendering                      | 服务端渲染。服务器生成 HTML 后发给浏览器。                                                     |
-| **SSG**            | Static Site Generation                     | 静态站点生成。构建时预渲染页面为静态 HTML。                                                    |
-| **Bundle**         | -                                          | 包。打包工具将多个文件合并后的产物。                                                           |
-| **Tree Shaking**   | -                                          | 摇树优化。自动移除未使用的代码，减小包体积。                                                   |
-| **H5**             | HTML5                                      | 通常指手机网页或基于 HTML5 的移动页面。                                                        |
-| **WebView**        | -                                          | 内嵌网页视图。App 中用于显示网页内容的组件。                                                   |
-| **跨端**           | Cross-Platform                             | 一套代码运行在多个平台（iOS、Android、Web 等）。                                               |
-| **原生**           | Native                                     | 使用平台官方语言和 API 开发的应用。                                                            |
-| **MVVM**           | Model-View-ViewModel                       | 一种架构模式，实现数据（Model）和视图（View）的自动同步。                                        |
-| **SEO**            | Search Engine Optimization                 | 搜索引擎优化，提高网页在搜索结果中的排名。                                                     |
-| **TTFB**           | Time To First Byte                         | 首字节时间，从请求到收到第一个字节数据的耗时。                                                 |
-| **TTI**            | Time To Interactive                        | 可交互时间，页面变为完全可交互状态所需的时间。                                                 |
+| 名词             | 英文                    | 用人话解释                                    |
+| ---------------- | ----------------------- | --------------------------------------------- |
+| **DOM**          | Document Object Model   | 文档对象模型。用对象树表示页面,可被 JS 读写。 |
+| **jQuery**       | -                       | 早期流行的 JS 库,简化了 DOM 操作。            |
+| **Vue/React**    | -                       | 现代前端框架,采用数据驱动和组件化开发。       |
+| **组件**         | Component               | 可复用的 UI 单元,如按钮、卡片、导航栏。       |
+| **MPA**          | Multi-Page Application  | 多页应用。每次跳转都重新加载整个页面。        |
+| **SPA**          | Single-Page Application | 单页应用。只加载一次,后续切换不刷新页面。     |
+| **路由**         | Routing                 | 管理页面之间切换的规则和过程。                |
+| **SSR**          | Server-Side Rendering   | 服务端渲染。服务器生成 HTML 后发给浏览器。    |
+| **SSG**          | Static Site Generation  | 静态站点生成。构建时预渲染页面为静态 HTML。   |
+| **Webpack**      | -                       | 传统打包工具,先打包后服务。                   |
+| **Vite**         | -                       | 现代构建工具,按需编译,速度极快。              |
+| **响应式**       | Responsive Design       | 页面自动适配不同屏幕尺寸的设计。              |
+| **媒体查询**     | Media Query             | CSS 的条件判断,根据屏幕宽度应用不同样式。     |
+| **命令式**       | Imperative              | 告诉程序"怎么做"。                            |
+| **声明式**       | Declarative             | 告诉程序"要什么"。                            |
+| **数据驱动**     | Data-Driven             | 只修改数据,界面自动更新。                     |
+| **Tree Shaking** | -                       | 摇树优化。自动移除未使用的代码,减小包体积。   |
+| **代码分割**     | Code Splitting          | 把代码分成多个小块,按需加载。                 |
+
+---
+
+## 总结
+
+前端技术的演进,本质上是**从"手工"到"工业化"的进化**:
+
+- **2000s**: 手工时代,简单直接
+- **2010s**: 工具化时代,开始有框架
+- **2020s**: 工业化时代,组件化 + 工程化
+- **现在**: 智能化时代,AI 辅助开发
+
+理解这个演进,你就能:
+
+- 知道为什么要有 Vue/React
+- 理解"数据驱动"的价值
+- 明白工程化的必要性
+- 快速上手新技术
+
+**下一步建议**:
+
+- 如果你想快速上手,学习 **Vue 3** (推荐) 或 **React**
+- 如果你想深入理解,学习 **Vite** 构建流程
+- 如果你想提升代码质量,学习 **TypeScript**
+
+祝你学习愉快!
diff --git a/docs/zh-cn/appendix/gateway-proxy.md b/docs/zh-cn/appendix/gateway-proxy.md
index 29fcd39..51d1c52 100644
--- a/docs/zh-cn/appendix/gateway-proxy.md
+++ b/docs/zh-cn/appendix/gateway-proxy.md
@@ -1,234 +1,331 @@
-# 反向代理与网关：Nginx / API Gateway 在系统中的位置
+# 反向代理与网关:Nginx / API Gateway 在系统中的位置
 
-> 💡 **学习指南**：反向代理解决的是"流量怎么分发"，API 网关解决的是"请求怎么处理"。本章节会围绕一个问题展开：**在高并发的互联网架构中，如何把流量安全、高效地送到正确的服务？**
-
-在开始之前，建议你先补两块"基础砖"：
-
-- **HTTP 基础**：可以先阅读 [Web 基础](./web-basics/) 的「HTTP 协议」部分。
-- **服务器部署**：如果你还不熟悉 [部署相关概念](./deployment/)，建议先了解基础。
+::: tip 🎯 核心问题
+**在高并发的互联网架构中,如何把流量安全、高效地送到正确的服务?** 反向代理解决"流量怎么分发",API网关解决"请求怎么处理"。本文通过真实案例(前台接待、保安系统、智能路由)深入理解网关的设计哲学和工程实践。
+:::
 
 ---
 
-## 0. 引言：为什么网站访问慢了、挂了、被攻击了？
+## 1. 为什么要"网关"?
+
+### 1.1 从一个真实案例说起:某电商的架构演进
+
+某电商平台在业务快速增长时遇到了严重的架构问题:
+
+**场景还原:**
+
+```
+阶段一:直接暴露服务
+客户端 → 直接调用用户服务、订单服务、支付服务...
+         ↓
+问题1:服务IP暴露,存在安全隐患
+问题2:无法统一做认证、限流
+问题3:新增服务需要修改客户端配置
+```
+
+::: warning ⚠️ 直接暴露的致命问题
+
+- **安全隐患**: 所有服务IP暴露,容易被攻击
+- **功能重复**: 每个服务都要做认证、限流、日志
+- **扩展困难**: 新增服务要修改所有客户端
+- **协议混乱**: 有的用HTTP,有的用gRPC,客户端要适配
+  :::
+
+**改进后的架构(引入网关):**
+
+```
+客户端 → API网关(Nginx/Kong) → 内部服务
+         ↓
+      统一认证、限流、路由
+         ↓
+      客户端只知道网关地址
+```
+
+::: tip ✨ 改进后的效果
+
+- **安全**: 真实服务IP隐藏,只有网关对外
+- **功能收敛**: 认证、限流、日志在网关统一处理
+- **扩展容易**: 新增服务只需网关配置路由
+- **协议统一**: 对外HTTP,内部可用gRPC
+  :::
+
+### 1.2 网关的生活化比喻
+
+**前台接待**
+
+想象你去一家大公司:
+
+- **没有前台**: 访客直接找各部门,不知道在哪,公司乱成一团
+- **有前台**: 访客先到前台,前台问清楚来意,再引导到对应部门
+
+**API网关就是系统的"前台"**:
+
+- **反向代理**: 前台,引导访客到正确的部门
+- **API网关**: 智能前台,还能检查访客身份(认证)、限制访问人数(限流)
 
 <ReverseProxyDemo />
 
-很多人在实际搭建网站时都会遇到类似的情况：
+---
 
-- 网站流量一高就卡顿，用户体验很差；
-- 某台服务器宕机，整个网站就不可用了；
-- 网站被 DDoS 攻击，服务器直接被打垮；
-- 后台管理接口暴露在外网，被黑客扫描攻击。
+## 2. 什么是反向代理?
 
-直觉上，我们会以为是：**"服务器配置不够"**。
-但大多数时候，问题并不在于服务器"性能差"，而在于我们**没有把流量处理好**。
+### 2.1 正向代理 vs 反向代理
 
-面对这些挑战，单纯依靠"升级服务器"已经捉襟见肘。我们需要一套更系统的流量管理方法，在高并发的场景下，把流量安全、高效地分发到正确的服务。这正是**反向代理与网关**试图解决的问题。
+::: tip 🤔 术语解释
+**正向代理(Forward Proxy)**:
+
+- 部署在客户端侧
+- 代替客户端访问外部资源
+- 典型应用:VPN、翻墙工具
+- 例子:公司网络,你通过代理访问外网
+
+**反向代理(Reverse Proxy)**:
+
+- 部署在服务器端
+- 接收客户端请求并转发给内部服务
+- 客户端只知道代理存在,不知道真实服务器
+- 例子:Nginx、HAProxy
+  :::
+
+**对比表:**
+
+| 维度         | 正向代理                 | 反向代理                 |
+| ------------ | ------------------------ | ------------------------ |
+| **部署位置** | 客户端侧                 | 服务器端                 |
+| **服务对象** | 客户端                   | 服务器                   |
+| **典型应用** | VPN、翻墙                | 负载均衡、网关           |
+| **透明性**   | 服务器看到代理IP         | 客户端看到代理IP         |
+| **目的**     | 隐藏真实客户端、加速访问 | 隐藏真实服务器、负载均衡 |
+
+### 2.2 反向代理的核心价值
+
+::: details 价值一:负载均衡
+将流量分发到多个后端服务器,避免单点过载。
+
+```
+客户端
+  ↓
+Nginx(反向代理)
+  ↓
+┌─────────┬─────────┬─────────┐
+│ 服务器1 │ 服务器2 │ 服务器3 │
+└─────────┴─────────┴─────────┘
+```
+
+:::
+
+::: details 价值二:安全防护
+隐藏真实服务器IP,防止直接攻击。统一在代理层做安全防护。
+
+```
+客户端 → 只能看到Nginx的IP
+真实服务器 → 只在内网,外部无法直接访问
+```
+
+:::
+
+::: details 价值三:SSL终结
+在代理层处理HTTPS加密解密,后端服务用HTTP,降低后端计算开销。
+
+```
+HTTPS客户端 → Nginx(加密/解密) → HTTP后端服务
+                   ↑
+              SSL终结点
+```
+
+:::
 
 ---
 
-## 1. 什么是"反向代理"？（定义 + 场景）
+## 3. Nginx:为什么能扛起百万并发?
 
-先给一个简短的工作定义，再看几个典型场景。
+### 3.1 Master-Worker进程模型
 
-> 反向代理，是部署在服务器端的"流量中转站"，接收客户端请求，转发给内部服务器，并将响应返回给客户端。客户端只知道反向代理的存在，不知道真实服务器的地址。
+Nginx采用**多进程**架构,而不是多线程:
 
-你可以简单地把它理解成三件事：**接收请求、转发请求、返回响应**。
-常见会用到它的场景包括：
+**Master进程(管理者)**:
 
-- **负载均衡**：将流量分发到多台服务器，避免单点压力过大。
-- **安全防护**：隐藏真实服务器 IP，防止直接攻击。
-- **SSL 终结**：在网关层处理 HTTPS，后端服务使用 HTTP，降低计算开销。
-- **动静分离**：静态资源直接由 Nginx 返回，动态请求转发给应用服务器。
+- 负责读取和验证配置文件
+- 管理Worker进程(启动、停止、重新加载)
+- 不处理具体请求
 
-接下来，我们就从一个真实团队的"踩坑经历"出发，看看他们是怎么一点点从"单机部署"进化到"网关架构"的。
+**Worker进程(工作者)**:
 
----
+- 实际处理HTTP请求
+- 每个Worker是独立的进程,相互隔离
+- 数量通常设置为CPU核心数,避免上下文切换开销
 
-## 2. 从"血泪教训"说起：某电商大促踩过的坑
+::: tip 💡 优势
 
-本章案例来自 **某电商平台**（日活千万级用户）。
-与普通网站不同，电商平台在双十一等大促期间，流量会呈指数级增长，对系统的稳定性、性能、安全性都提出了极高要求。
-
-这带来了核心矛盾：
-- **如果只用一台服务器**：流量一高就宕机，用户体验极差。
-- **如果直接暴露多台服务器**：客户端需要知道多个 IP，无法实现负载均衡，而且安全性极差。
-
-该平台的技术团队经历过多次架构重构，才明白一个道理：**流量不能只靠"挡"，而要靠"疏"和"导"。**
-
-### 2.1 四次重构教会我们什么？
-
-该平台的 CTO 在架构分享会上讲过一个"踩坑史"：
-
-| 阶段 | 遇到的问题 | 当时的想法 | 结果 |
-| :--- | :--- | :--- | :--- |
-| **第一次** | 单台服务器扛不住流量 | "换一台更好的服务器" | 流量再涨还是扛不住 |
-| **第二次** | 多台服务器不知如何分发流量 | "直接暴露多个 IP 给用户" | 用户访问混乱，无法实现负载均衡 |
-| **第三次** | 网站被 DDoS 攻击，真实 IP 暴露 | "在每台服务器上都配置防火墙" | 管理复杂，防护效果差 |
-| **第四次** | HTTPS 配置复杂，证书管理混乱 | "每台服务器都配置 SSL 证书" | 证书更新麻烦，配置不一致 |
-
-**核心领悟**：**不是服务器越多越好，而是流量管理越智能越好**。
-
-### 2.2 反向代理到底像什么？
-
-**直接暴露服务器** = **没有门卫的大楼**：
-- 任何人都可以直接找到房间（IP）。
-- 来访者（请求）不知道去哪个房间，可能都挤在一个房间。
-- 安全隐患大，坏人可以直接找到房间搞破坏。
-
-**反向代理** = **有前台的大楼**：
-- 来访者（客户端）只知道前台地址（反向代理 IP）。
-- 前台根据情况把来访者引导到不同的房间（服务器）。
-- 房间的真实位置对外保密，安全性高。
-
-**该平台的经验**：**大楼要有前台，流量要过网关**。
-
----
-
-## 3. 第一步：Nginx 架构 - 为什么它能扛住百万并发？
-
-<NginxArchitectureDemo />
-
-在深入配置之前，我们需要理解 Nginx 为什么能处理如此高的并发。这不是魔法，而是精心设计的架构。
-
-### 3.1 Master-Worker 进程模型
-
-Nginx 采用**多进程**架构，而不是多线程：
-
-**Master 进程（管理者）**：
-- 负责读取和验证配置文件。
-- 管理 Worker 进程（启动、停止、重新加载）。
-- 不处理具体请求。
-
-**Worker 进程（工作者）**：
-- 实际处理 HTTP 请求。
-- 每个 Worker 是独立的进程，相互隔离。
-- 数量通常设置为 CPU 核心数，避免上下文切换开销。
-
-**优势**：
-- 一个 Worker 崩溃，不会影响其他 Worker。
-- 充分利用多核 CPU。
-- 避免多线程编程的复杂性。
+- **隔离性好**: 一个Worker崩溃,不影响其他Worker
+- **充分利用多核**: 每个Worker独立运行
+- **避免多线程复杂性**: 无需处理锁、竞争等问题
+  :::
 
 ### 3.2 事件驱动 + 异步非阻塞
 
-这是 Nginx 高性能的核心秘密：
+这是Nginx高性能的核心秘密:
 
-**传统 Apache（多进程/线程模型）**：
-- 一个连接 = 一个进程/线程。
-- 并发数受限于系统进程/线程数。
-- 大量连接时，进程切换开销巨大。
+**传统Apache(多进程/线程模型)**:
 
-**Nginx（事件驱动模型）**：
-- 使用 epoll（Linux）/ kqueue（macOS）等高效 I/O 多路复用机制。
-- 一个 Worker 进程可以同时处理数万个连接。
-- 连接没有数据时，不会占用 CPU，有新数据时通过事件通知唤醒。
+- 一个连接 = 一个进程/线程
+- 并发数受限于系统进程/线程数
+- 大量连接时,进程切换开销巨大
 
-**比喻**：
-- Apache 像餐厅里每个顾客配一个服务员（进程）。
-- Nginx 像一个超级服务员，同时服务所有顾客，谁需要服务就去谁那里，而不是一直站在某个顾客旁边。
+**Nginx(事件驱动模型)**:
 
-### 3.3 生产环境配置建议
+- 使用epoll(Linux)/kqueue(macOS)等高效I/O多路复用机制
+- 一个Worker进程可以同时处理数万个连接
+- 连接没有数据时,不会占用CPU,有新数据时通过事件通知唤醒
 
-```nginx
-# 设置 Worker 进程数，通常等于 CPU 核心数
-worker_processes auto;
+::: tip 生活化比喻
 
-# 设置每个 Worker 的最大连接数
-# 总并发连接数 = worker_processes * worker_connections
-events {
-    worker_connections 4096;
-    use epoll;  # Linux 下使用 epoll
-    multi_accept on;  # 尽可能接受更多连接
-}
+- **Apache**: 餐厅里每个顾客配一个服务员(进程),顾客多需要大量服务员
+- **Nginx**: 一个超级服务员,同时服务所有顾客,谁需要服务就去谁那里,而不是一直站在某个顾客旁边
+  :::
 
-http {
-    # 开启文件高效传输
-    sendfile on;
-    tcp_nopush on;
-    tcp_nodelay on;
-
-    # 长连接超时时间
-    keepalive_timeout 65;
-
-    # Gzip 压缩
-    gzip on;
-    gzip_vary on;
-    gzip_min_length 1024;
-    gzip_types text/plain text/css application/json application/javascript;
-}
-```
+<NginxArchitectureDemo />
 
 ---
 
-## 4. 第二步：API 网关 - 系统的"统一大门"
+## 4. 什么是API网关?
+
+### 4.1 为什么需要API网关?
+
+**想象一个没有网关的系统:**
+
+- 客户端需要知道多个服务的地址(用户服务、订单服务、支付服务...)
+- 每个服务都要自己做认证、限流、日志
+- 协议不统一,有的用HTTP,有的用gRPC
+- 服务升级时,客户端也需要跟着改
+
+::: warning ⚠️ 没有网关的问题
+
+- **客户端复杂**: 需要配置多个服务地址
+- **功能重复**: 每个服务都要实现认证、限流
+- **协议混乱**: 客户端要适配多种协议
+- **升级困难**: 服务升级,客户端也要改
+  :::
+
+**有了API网关之后:**
+
+- 客户端只需要知道网关地址,网关负责路由到正确服务
+- 认证、限流、日志等横切逻辑统一在网关处理
+- 网关可以做协议转换,对外统一暴露HTTP
+- 后端服务升级,只需要改网关配置,客户端无感知
 
 <ApiGatewayDemo />
 
-如果说反向代理是"流量中转站"，那么 API 网关就是"智能调度中心"。它不仅仅是转发请求，还承担了很多横切关注点的处理。
+### 4.2 API网关的核心功能
 
-### 4.1 为什么需要 API 网关？
-
-想象一个没有网关的系统：
-- 客户端需要知道多个服务的地址（用户服务、订单服务、支付服务...）。
-- 每个服务都要自己做认证、限流、日志。
-- 协议不统一，有的用 HTTP，有的用 gRPC。
-- 服务升级时，客户端也需要跟着改。
-
-**有了 API 网关之后**：
-- 客户端只需要知道网关地址，网关负责路由到正确服务。
-- 认证、限流、日志等横切逻辑统一在网关处理。
-- 网关可以做协议转换，对外统一暴露 HTTP。
-- 后端服务升级，只需要改网关配置，客户端无感知。
-
-### 4.2 API 网关的核心功能
-
-| 功能 | 说明 | 典型场景 |
-| :--- | :--- | :--- |
-| **路由转发** | 根据 URL、Header 等规则，将请求转发到不同服务 | `/api/users` → 用户服务，`/api/orders` → 订单服务 |
-| **负载均衡** | 同一个服务有多实例时，分摊流量 | 用户服务有 3 台实例，轮询分发请求 |
-| **认证鉴权** | 统一校验 JWT、OAuth Token | 未登录用户无法访问 `/api/admin` |
-| **限流熔断** | 控制流量上限，防止服务被压垮 | 每秒最多 1000 请求，超过返回 429 |
-| **协议转换** | 对外 HTTP，内部可转 gRPC | 客户端用 HTTP，网关转 gRPC 调用内部服务 |
-| **灰度发布** | 按 Header 或比例，将部分流量导到新版本 | 5% 用户体验新版本，95% 用旧版本 |
-| **日志监控** | 统一记录请求日志，便于分析和排障 | 记录每次请求的耗时、状态码、返回大小 |
-
-### 4.3 Nginx vs Kong vs Spring Cloud Gateway
-
-市面上有很多网关产品，如何选择？
-
-| 维度 | Nginx | Kong | Spring Cloud Gateway |
-| :--- | :--- | :--- | :--- |
-| **定位** | 高性能反向代理/负载均衡 | 开源 API 网关 | Spring 生态网关 |
-| **性能** | 极高（C 语言，事件驱动） | 高（基于 OpenResty） | 中等（Java，响应式） |
-| **功能** | 基础负载均衡、静态文件、缓存 | 丰富的插件生态（认证、限流、日志等） | 与 Spring Cloud 深度集成 |
-| **配置** | 配置文件（nginx.conf） | REST API + 配置文件 | Java 配置 / YAML |
-| **扩展** | C 模块 / Lua 脚本 | Lua 插件 | Java 过滤器 |
-| **适用场景** | 静态资源、七层负载均衡、SSL 终结 | 微服务 API 网关、多租户 SaaS | Spring Cloud 微服务架构 |
-
-**选型建议**：
-- **中小型项目 / 静态资源为主**：Nginx 足够。
-- **大型微服务 / 需要丰富插件**：Kong。
-- **Spring Cloud 全家桶**：Spring Cloud Gateway。
+| 功能         | 说明                                       | 典型场景                                         |
+| :----------- | :----------------------------------------- | :----------------------------------------------- |
+| **路由转发** | 根据URL、Header等规则,将请求转发到不同服务 | `/api/users` → 用户服务,`/api/orders` → 订单服务 |
+| **负载均衡** | 同一个服务有多实例时,分摊流量              | 用户服务有3台实例,轮询分发请求                   |
+| **认证鉴权** | 统一校验JWT、OAuth Token                   | 未登录用户无法访问`/api/admin`                   |
+| **限流熔断** | 控制流量上限,防止服务被压垮                | 每秒最多1000请求,超过返回429                     |
+| **协议转换** | 对外HTTP,内部可转gRPC                      | 客户端用HTTP,网关转gRPC调用内部服务              |
+| **灰度发布** | 按Header或比例,将部分流量导到新版本        | 5%用户体验新版本,95%用旧版本                     |
+| **日志监控** | 统一记录请求日志,便于分析和排障            | 记录每次请求的耗时、状态码、返回大小             |
 
 ---
 
-## 5. 第三步：路由与负载均衡 - 把请求送到正确的地方
+## 5. 网关实战:如何构建完整的网关架构?
 
-<RoutingRulesDemo />
-<LoadBalancingDemo />
+### 5.1 完整架构图
 
-网关的核心职责之一，就是**把请求送到正确的地方**。这涉及两个关键能力：**路由**（去哪台服务器）和**负载均衡**（怎么分配流量）。
+```
+┌───────────────────────────────────────────────────────────────────────┐
+│                           客户端(浏览器/APP)                               │
+└───────────────────────────┬─────────────────────────────────────────┘
+                                │ HTTPS
+                                ▼
+┌───────────────────────────────────────────────────────────────────────┐
+│                        外层:CDN + WAF                                  │
+│  ┌─────────────────────────────────────────────────────────────┐  │
+│  │  CDN(内容分发网络)                                        │  │
+│  │  - 静态资源缓存(图片、CSS、JS)                           │  │
+│  │  - 就近访问,降低延迟                                   │  │
+│  └───────────────────────────────────────────────────────────────┘  │
+│  ┌───────────────────────────────────────────────────────────────┐  │
+│  │  WAF(Web应用防火墙)                                     │  │
+│  │  - 防护SQL注入、XSS攻击                                │  │
+│  │  - 拦截恶意Bot、爬虫                                  │  │
+│  │  - CC攻击防护                              │  │
+│  └───────────────────────────────────────────────────────────────┘  │
+└───────────────────────────────────────────────────────────────────────┘
+                                │
+                                ▼
+┌───────────────────────────────────────────────────────────────────────┐
+│                     中层:API网关(Nginx/Kong)                      │
+│  ┌───────────────────────────────────────────────────────────────┐  │
+│  │  第一层:SSL终结 + 安全防护                              │  │
+│  │  - HTTPS / TLS 1.3                                        │  │
+│  │  - HSTS、安全响应头                                        │  │
+│  └───────────────────────────────────────────────────────────────┘  │
+│  ┌───────────────────────────────────────────────────────────────┐  │
+│  │  第二层:认证与鉴权                                      │  │
+│  │  - JWT Token校验                                         │  │
+│  │  - OAuth 2.0 / SSO集成                                     │  │
+│  │  - API Key管理                                         │  │
+│  │  - 权限校验(RBAC)                                        │  │
+│  └───────────────────────────────────────────────────────────────┘  │
+│  ┌───────────────────────────────────────────────────────────────┐  │
+│  │  第三层:流量控制                                        │  │
+│  │  - 限流- 令牌桶/漏桶算法                             │  │
+│  │  - 熔断- 防止故障扩散                                 │  │
+│  │  - 降级- 服务不可用时的备用方案                         │  │
+│  │  - 灰度发布- 按比例分配流量                          │  │
+│  └───────────────────────────────────────────────────────────────┘  │
+│  ┌───────────────────────────────────────────────────────────────┐  │
+│  │  第四层:路由与负载均衡                                    │  │
+│  │  - 路径路由- Path-based Routing)                          │  │
+│  │  - 域名路由- Host-based Routing)                           │  │
+│  │  - Header路由- Header-based Routing)                             │  │
+│  │  - 负载均衡算法- 轮询/加权/最少连接/IP哈希)             │  │
+│  │  - 服务发现- Service Discovery)集成                        │  │
+│  └───────────────────────────────────────────────────────────────┘  │
+│  ┌───────────────────────────────────────────────────────────────┐  │
+│  │  第五层:协议转换与数据处理                                 │  │
+│  │  - SSL终结- HTTPS ↔ HTTP)                                   │  │
+│  │  - 协议转换- HTTP ↔ gRPC / WebSocket)                         │  │
+│  │  - 请求/响应转换- JSON ↔ XML)                               │  │
+│  │  - 数据压缩- Gzip / Brotli)                                   │  │
+│  │  - 缓存- Cache)- 静态资源和API响应                          │  │
+│  └───────────────────────────────────────────────────────────────┘  │
+└───────────────────────────────────────────────────────────────────────┘
+                                │
+                                ▼
+┌───────────────────────────────────────────────────────────────────────┐
+│                        内层:微服务集群                             │
+│  ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐      │
+│  │  用户服务    │ │  订单服务    │ │  商品服务    │ │  支付服务    │      │
+│  │  User Svc   │ │  Order Svc  │ │ Product Svc │ │ Payment Svc │      │
+│  │             │ │             │ │             │ │             │      │
+│  └──────┬──────┘ └──────┬──────┘ └──────┬──────┘ └──────┬──────┘      │
+│         │                │                │                │               │
+│         └────────────────┴────────────────┴────────────────┘               │
+│                                       │                              │
+│                    服务发现与配置中心/ etcd)                          │
+│                    - 服务注册与发现                                      │
+│                    - 健康检查                                              │
+│                    - KV配置存储                                              │
+└───────────────────────────────────────────────────────────────────────┘
+```
 
-### 5.1 路由规则：从 URL 到服务
+### 5.2 路由与负载均衡
+
+网关的核心职责之一,就是**把请求送到正确的地方**。这涉及两个关键能力:**路由**(去哪台服务器)和**负载均衡**(怎么分配流量)。
+
+::: details 路由规则:从URL到服务
+想象一个电商系统,不同的URL对应不同的服务:
 
-想象一个电商系统，不同的 URL 对应不同的服务：
 - `/api/users/*` → 用户服务
 - `/api/orders/*` → 订单服务
 - `/api/products/*` → 商品服务
 - `/api/pay/*` → 支付服务
 
-**Nginx 配置示例**：
+**Nginx配置示例:**
 
 ```nginx
 server {
@@ -256,9 +353,9 @@ server {
         proxy_set_header X-Real-IP $remote_addr;
     }
 
-    # 支付服务（需要更高安全级别）
+    # 支付服务(需要更高安全级别)
     location /api/pay/ {
-        # 限制 IP 访问
+        # 限制IP访问
         allow 10.0.0.0/8;
         deny all;
 
@@ -269,234 +366,129 @@ server {
 }
 ```
 
-**高级路由规则**：
+:::
+
+::: details 负载均衡:四种策略对比
+当同一个服务有多个实例时,如何选择?
+
+| 策略         | 原理                                              | 适用场景           | 优点                 | 缺点                         |
+| :----------- | :------------------------------------------------ | :----------------- | :------------------- | :--------------------------- |
+| **轮询**     | 按顺序依次分配给每台服务器                        | 服务器性能相近     | 简单公平             | 不考虑服务器当前负载         |
+| **加权轮询** | 按权重比例分配,权重高的分配更多                   | 服务器性能不均     | 充分利用高性能服务器 | 需要合理设置权重             |
+| **最少连接** | 分配给当前连接数最少的服务器                      | 长连接场景、视频流 | 动态适应负载变化     | 需要实时统计连接数           |
+| **IP哈希**   | 根据客户端IP计算哈希,同一IP永远分配到同一台服务器 | 需要会话保持       | 保证会话一致性       | 某个IP流量大时会造成单点压力 |
+
+**Nginx配置示例:**
 
 ```nginx
-# 基于请求方法的路由
-if ($request_method = POST) {
-    proxy_pass http://write-service;
-}
-
-# 基于 Header 的路由（灰度发布）
-if ($http_x_version = "v2") {
-    proxy_pass http://api-v2;
-}
-
-# 基于 Cookie 的路由（AB 测试）
-if ($cookie_test_group = "B") {
-    proxy_pass http://variant-b;
-}
-
-# 基于 Query 参数的路由
-if ($arg_format = "json") {
-    proxy_pass http://json-api;
-}
-```
-
-### 5.2 负载均衡：四种策略对比
-
-当同一个服务有多个实例时，如何选择？
-
-| 策略 | 原理 | 适用场景 | 优点 | 缺点 |
-| :--- | :--- | :--- | :--- | :--- |
-| **轮询** (Round Robin) | 按顺序依次分配给每台服务器 | 服务器性能相近 | 简单公平 | 不考虑服务器当前负载 |
-| **加权轮询** (Weighted RR) | 按权重比例分配，权重高的分配更多 | 服务器性能不均 | 充分利用高性能服务器 | 需要合理设置权重 |
-| **最少连接** (Least Connections) | 分配给当前连接数最少的服务器 | 长连接场景（WebSocket、视频流） | 动态适应负载变化 | 需要实时统计连接数 |
-| **IP 哈希** (IP Hash) | 根据客户端 IP 计算哈希，同一 IP 永远分配到同一台服务器 | 需要会话保持的场景 | 保证会话一致性 | 某个 IP 流量大时会造成单点压力 |
-
-**Nginx 配置示例**：
-
-```nginx
-# 定义 upstream 组
-upstream backend {
-    # 轮询（默认）
-    server 10.0.1.10:8080;
-    server 10.0.1.11:8080;
-    server 10.0.1.12:8080;
-}
-
+# 加权轮询
 upstream backend_weighted {
-    # 加权轮询
-    server 10.0.1.10:8080 weight=3;  # 性能好，承担更多流量
+    server 10.0.1.10:8080 weight=3;  # 性能好,承担更多流量
     server 10.0.1.11:8080 weight=2;
-    server 10.0.1.12:8080 weight=1;  # 性能差，承担较少流量
+    server 10.0.1.12:8080 weight=1;  # 性能差,承担较少流量
 }
 
+# 最少连接
 upstream backend_least_conn {
-    # 最少连接
     least_conn;
     server 10.0.1.10:8080;
     server 10.0.1.11:8080;
     server 10.0.1.12:8080;
 }
 
+# IP哈希(会话保持)
 upstream backend_ip_hash {
-    # IP 哈希（会话保持）
     ip_hash;
     server 10.0.1.10:8080;
     server 10.0.1.11:8080;
     server 10.0.1.12:8080;
 }
-
-server {
-    listen 80;
-    server_name api.example.com;
-
-    location / {
-        proxy_pass http://backend;
-        proxy_set_header Host $host;
-        proxy_set_header X-Real-IP $remote_addr;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-        proxy_set_header X-Forwarded-Proto $scheme;
-
-        # 健康检查（需要第三方模块或 Nginx Plus）
-        # health_check;
-    }
-}
 ```
 
-### 5.3 避坑指南：负载均衡的常见误区
+:::
 
-#### 误区 1：忽视健康检查
-
-```nginx
-# ❌ 错误：没有健康检查，后端服务宕机了，流量还会继续发送
-upstream backend {
-    server 10.0.1.10:8080;
-    server 10.0.1.11:8080;  # 这台宕机了，请求会失败
-}
-
-# ✅ 正确：配置健康检查（Nginx Plus 或第三方模块）
-upstream backend {
-    server 10.0.1.10:8080;
-    server 10.0.1.11:8080;
-
-    # 主动健康检查（Nginx Plus 或配置 check 模块）
-    check interval=3000 rise=2 fall=3 timeout=1000 type=http;
-    check_http_send "GET /health HTTP/1.0\r\n\r\n";
-    check_http_expect_alive http_2xx http_3xx;
-}
-```
-
-#### 误区 2：会话保持滥用
-
-```nginx
-# ❌ 错误：所有请求都使用 IP 哈希，导致负载不均
-upstream backend {
-    ip_hash;  # 某些 IP 流量特别大，导致单点压力
-    server 10.0.1.10:8080;
-    server 10.0.1.11:8080;
-}
-
-# ✅ 正确：需要会话保持的才用 IP 哈希，其他用轮询
-upstream backend {
-    server 10.0.1.10:8080;
-    server 10.0.1.11:8080;
-}
-
-upstream backend_session {
-    ip_hash;
-    server 10.0.1.10:8080;
-    server 10.0.1.11:8080;
-}
-
-server {
-    location /api/ {
-        proxy_pass http://backend;  # 普通 API，无需会话保持
-    }
-
-    location /cart/ {
-        proxy_pass http://backend_session;  # 购物车，需要会话保持
-    }
-}
-```
-
-#### 误区 3：忽视后端获取真实 IP
-
-```nginx
-# ❌ 错误：后端应用获取到的 IP 是 Nginx 的 IP，不是客户端真实 IP
-server {
-    location / {
-        proxy_pass http://backend;
-        # 缺少 Header 设置
-    }
-}
-
-# ✅ 正确：传递真实 IP 和协议信息
-server {
-    location / {
-        proxy_pass http://backend;
-
-        # 必须设置的 Header
-        proxy_set_header Host $host;  # 原始 Host
-        proxy_set_header X-Real-IP $remote_addr;  # 客户端真实 IP
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  # 代理链
-        proxy_set_header X-Forwarded-Proto $scheme;  # 原始协议（http/https）
-
-        # 如果后端也是 Nginx，可以设置真实端口
-        proxy_set_header X-Forwarded-Port $server_port;
-    }
-}
-```
-
-后端应用（以 Node.js Express 为例）获取真实 IP：
-
-```javascript
-const express = require('express');
-const app = express();
-
-// 信任代理（必须设置，否则 X-Forwarded-* 会被忽略）
-app.set('trust proxy', true);
-
-app.get('/api/test', (req, res) => {
-    res.json({
-        // 客户端真实 IP（经过代理链后的第一个 IP）
-        realIp: req.ip,
-
-        // 完整的代理链（客户端, 代理1, 代理2, ...）
-        forwardedFor: req.get('X-Forwarded-For'),
-
-        // 原始协议（http 或 https）
-        protocol: req.protocol,
-
-        // 原始 Host
-        host: req.get('Host')
-    });
-});
-
-app.listen(3000);
-```
+<LoadBalancingDemo />
 
 ---
 
-## 4. 第三步：限流与熔断 - 防止系统被"流量洪水"冲垮
+## 6. 网关安全:如何守护系统大门?
 
-<RateLimitingDemo />
+### 6.1 认证与鉴权
 
-在高并发场景下，保护系统不被突发流量压垮，是网关的核心职责之一。这需要用到**限流**和**熔断**机制。
+**传统方式(每个服务各自认证):**
 
-### 4.1 限流算法对比：令牌桶 vs 漏桶 vs 滑动窗口
+- 用户服务、订单服务、支付服务...每个都要校验JWT
+- 代码重复,维护困难
+- secret分散在各个服务,泄露风险高
 
-| 算法 | 核心思想 | 突发流量 | 适用场景 | 实现复杂度 |
-| :--- | :--- | :--- | :--- | :--- |
-| **令牌桶** | 桶里装令牌，有令牌才能通过 | 允许一定程度的突发 | API 限流、带宽控制 | 中等 |
-| **漏桶** | 请求进桶，匀速流出处理 | 强制平滑，突发会被缓存或拒绝 | 需要严格匀速处理的场景 | 中等 |
-| **滑动窗口** | 统计时间窗口内的请求数 | 严格按窗口计数，超出一律拒绝 | 精确统计（如"1分钟内最多100次"） | 较高 |
+**网关统一认证:**
 
-### 4.2 Nginx 限流配置实战
+- 客户端携带Token访问网关
+- 网关校验Token合法性(签名、过期时间)
+- 校验通过后,将用户信息(如user_id)添加到请求头,转发给后端服务
+- 后端服务无需校验,直接从Header获取用户信息
+
+::: tip 💡 核心思想
+**认证在网关,鉴权在服务**:
+
+- **认证**: 你是谁?(校验Token,获取用户身份)
+- **鉴权**: 你能做什么?(根据用户角色判断权限)
+
+就像公司前台:前台认证你的身份(身份证),但具体权限由各部门判断。
+:::
+
+<AuthMiddlewareDemo />
+
+### 6.2 HTTPS与SSL终结
+
+**为什么需要HTTPS?**
+
+1. **安全**: 防止数据在传输过程中被窃取
+2. **合规**: 现代浏览器对HTTP网站显示"不安全"警告
+3. **SEO**: 搜索引擎优先收录HTTPS网站
+
+**SSL终结方案:**
+
+- 只在网关层配置HTTPS和证书
+- 网关负责TLS握手和加解密
+- 网关和后端服务之间使用HTTP明文传输(内部网络可信)
+- 后端服务专注于业务逻辑,无需处理TLS
+
+::: tip 💡 SSL终结的优势
+
+- **简化管理**: 证书只在网关配置,后端无需配置
+- **降低开销**: 后端服务不需要处理TLS握手
+- **统一更新**: 证书更新只需在网关操作
+  :::
+
+<SslTerminationDemo />
+
+---
+
+## 7. 限流与熔断:如何防止系统被"流量洪水"冲垮?
+
+### 7.1 限流算法对比
+
+| 算法         | 核心思想                  | 突发流量                    | 适用场景                       | 实现复杂度 |
+| :----------- | :------------------------ | :-------------------------- | :----------------------------- | :--------- |
+| **令牌桶**   | 桶里装令牌,有令牌才能通过 | 允许一定程度的突发          | API限流、带宽控制              | 中等       |
+| **漏桶**     | 请求进桶,匀速流出处理     | 强制平滑,突发会被缓存或拒绝 | 需要严格匀速处理的场景         | 中等       |
+| **滑动窗口** | 统计时间窗口内的请求数    | 严格按窗口计数,超出一律拒绝 | 精确统计(如"1分钟内最多100次") | 较高       |
+
+### 7.2 Nginx限流配置实战
 
 ```nginx
-# 定义限流区域（放在 http 块中）
+# 定义限流区域(放在http块中)
 
-# 1. 基于 IP 的限流（漏桶算法）
-# zone=mylimit:10m - 区域名称和内存大小（10MB 约可存储 16 万 IP）
-# rate=10r/s - 每秒允许 10 个请求
+# 1. 基于IP的限流(漏桶算法)
+# zone=mylimit:10m - 区域名称和内存大小(10MB约可存储16万IP)
+# rate=10r/s - 每秒允许10个请求
 limit_req_zone $binary_remote_addr zone=mylimit:10m rate=10r/s;
 
-# 2. 基于 IP 的连接数限制（防止单个 IP 建立过多连接）
+# 2. 基于IP的连接数限制(防止单个IP建立过多连接)
 limit_conn_zone $binary_remote_addr zone=addr:10m;
 
-# 3. 基于服务端点的限流（不区分 IP，保护后端整体）
+# 3. 基于服务端点的限流(不区分IP,保护后端整体)
 limit_req_zone $server_name zone=server_limit:10m rate=100r/s;
 
 server {
@@ -506,11 +498,11 @@ server {
     # 用户服务 - 普通限流
     location /api/users/ {
         # 应用限流
-        # burst=20 - 桶容量，允许突发 20 个请求
-        # nodelay - 不延迟处理突发请求（立即处理或拒绝）
+        # burst=20 - 桶容量,允许突发20个请求
+        # nodelay - 不延迟处理突发请求(立即处理或拒绝)
         limit_req zone=mylimit burst=20 nodelay;
 
-        # 限制单个 IP 的连接数
+        # 限制单个IP的连接数
         limit_conn addr 10;
 
         proxy_pass http://user-service;
@@ -520,7 +512,7 @@ server {
 
     # 订单服务 - 更严格的限流
     location /api/orders/ {
-        # 更严格的限流：每秒 5 个请求
+        # 更严格的限流:每秒5个请求
         limit_req_zone $binary_remote_addr zone=order_limit:10m rate=5r/s;
         limit_req zone=order_limit burst=10 nodelay;
 
@@ -529,36 +521,8 @@ server {
         proxy_set_header X-Real-IP $remote_addr;
     }
 
-    # 支付服务 - 最高级别保护
-    location /api/pay/ {
-        # 多层限流保护
-
-        # 第一层：单 IP 限流（每秒 2 个请求）
-        limit_req_zone $binary_remote_addr zone=pay_ip_limit:10m rate=2r/s;
-        limit_req zone=pay_ip_limit burst=5 nodelay;
-
-        # 第二层：全局限流（保护后端数据库）
-        limit_req zone=server_limit burst=50 nodelay;
-
-        # 第三层：连接数限制
-        limit_conn addr 5;
-
-        # 只允许内网访问（额外安全层）
-        allow 10.0.0.0/8;
-        deny all;
-
-        proxy_pass http://payment-service;
-        proxy_set_header Host $host;
-        proxy_set_header X-Real-IP $remote_addr;
-
-        # 支付接口增加超时时间
-        proxy_connect_timeout 30s;
-        proxy_send_timeout 30s;
-        proxy_read_timeout 30s;
-    }
-
     # 限流后的处理
-    # 当请求被限流时，返回 429 Too Many Requests
+    # 当请求被限流时,返回429 Too Many Requests
     error_page 429 /429.html;
     location = /429.html {
         internal;
@@ -568,923 +532,81 @@ server {
 }
 ```
 
-### 4.3 熔断降级：当依赖服务出问题时
+::: tip 💡 限流策略建议
 
-限流是防止外部流量压垮系统，**熔断**是防止内部依赖故障扩散。
+- **普通接口**: 每秒10个请求,允许突发20个
+- **重要接口**(支付、订单): 每秒5个请求,允许突发10个
+- **全局保护**: 所有请求总和不超过每秒100个
+  :::
 
-**熔断器的工作原理**：
-1. **关闭状态**：正常转发请求，同时统计错误率。
-2. **开启状态**：当错误率超过阈值，熔断器开启，直接返回错误，不再转发请求。
-3. **半开状态**：经过一段时间后，允许少量请求通过试探，如果成功则关闭熔断器。
+<RateLimitingDemo />
 
-**Nginx 实现熔断（使用 Lua 模块或第三方模块）**：
+### 7.3 熔断:防止故障扩散
 
-```nginx
-# 使用 nginx-upsync-module 或 lua-resty-healthcheck 实现健康检查和熔断
+**熔断器的工作原理:**
 
-upstream backend {
-    server 10.0.1.10:8080;
-    server 10.0.1.11:8080;
+1. **关闭状态**: 正常转发请求,同时统计错误率
+2. **开启状态**: 当错误率超过阈值,熔断器开启,直接返回错误,不再转发请求
+3. **半开状态**: 经过一段时间后,允许少量请求通过试探,如果成功则关闭熔断器
 
-    # 健康检查（需要 nginx_upstream_check_module）
-    check interval=3000 rise=2 fall=3 timeout=1000 type=http;
-    check_http_send "GET /health HTTP/1.0\r\n\r\n";
-    check_http_expect_alive http_2xx http_3xx;
-}
+::: tip 💡 核心思想
+**熔断就像电路保险丝**: 电流过大时,保险丝自动熔断,保护整个电路不被烧毁。
 
-server {
-    location / {
-        proxy_pass http://backend;
-
-        # 代理错误时返回自定义错误页（降级）
-        proxy_intercept_errors on;
-        error_page 500 502 503 504 /fallback.html;
-    }
-
-    location = /fallback.html {
-        internal;
-        # 返回降级数据（如缓存数据、简化版页面）
-        return 200 '{"status": "degraded", "message": "Service temporarily unavailable. Showing cached data."}';
-        add_header Content-Type application/json;
-    }
-}
-```
-
-**使用 OpenResty + Lua 实现更完善的熔断**：
-
-```lua
--- 使用 lua-resty-circuit-breaker 库实现熔断
-local circuit_breaker = require "resty.circuit-breaker"
-
-local cb = circuit_breaker.new({
-    name = "payment_service",
-    group = "payment",
-    -- 熔断策略
-    failure_threshold = 5,      -- 连续失败 5 次触发熔断
-    success_threshold = 2,    -- 连续成功 2 次关闭熔断
-    timeout = 60,              -- 熔断后等待 60 秒进入半开状态
-    -- 错误类型
-    expected_statuses = {200, 201},  -- 期望的 HTTP 状态码
-    ignored_statuses = {404, 422},   -- 不计入失败的 status
-})
-
--- 使用熔断器执行请求
-local ok, err = cb:execute(function()
-    -- 发起 HTTP 请求
-    local httpc = require "resty.http".new()
-    local res, err = httpc:request_uri("http://payment-service/charge", {
-        method = "POST",
-        body = body,
-        headers = {
-            ["Content-Type"] = "application/json",
-        },
-    })
-
-    if not res then
-        return nil, err
-    end
-
-    return res
-end)
-
-if not ok then
-    -- 熔断器开启或请求失败，执行降级逻辑
-    ngx.log(ngx.WARN, "Circuit breaker open or request failed: ", err)
-
-    -- 返回降级响应
-    ngx.status = 503
-    ngx.say('{"error": "Service temporarily unavailable", "fallback": true}')
-    return
-end
-
--- 请求成功，返回正常响应
-ngx.status = res.status
-ngx.say(res.body)
-```
+类似地,当后端服务出现大量错误时,熔断器"跳闸",快速失败,防止故障扩散到整个系统。
+:::
 
 ---
 
-## 6. 第四步：认证与安全 - 守护大门的"门卫"
+## 8. 总结:网关设计的核心思维
 
-<AuthMiddlewareDemo />
+### 8.1 核心原则回顾
 
-网关是系统的统一入口，自然也成为**安全防护的第一道防线**。在网关层处理认证和安全，可以避免每个后端服务重复实现。
+| 原则         | 含义                 | 实践要点                       |
+| ------------ | -------------------- | ------------------------------ |
+| **路由**     | 把请求送到正确的地方 | 路径路由、域名路由、Header路由 |
+| **负载均衡** | 分摊流量到多台服务器 | 轮询、加权、最少连接、IP哈希   |
+| **安全**     | 守护系统大门         | 认证鉴权、HTTPS、WAF           |
+| **限流**     | 防止被流量冲垮       | 令牌桶、漏桶、滑动窗口         |
+| **熔断**     | 防止故障扩散         | 快速失败、降级方案             |
+| **可观测**   | 监控和排障           | 日志、指标、链路追踪           |
 
-### 6.1 在网关层统一认证
+### 8.2 技术选型建议
 
-**传统方式（每个服务各自认证）**：
-- 用户服务、订单服务、支付服务...每个都要校验 JWT。
-- 代码重复，维护困难。
--  secret 分散在各个服务，泄露风险高。
+::: tip 💡 选型决策树
 
-**网关统一认证**：
-- 客户端携带 Token 访问网关。
-- 网关校验 Token 合法性（签名、过期时间）。
-- 校验通过后，将用户信息（如 user_id）添加到请求头，转发给后端服务。
-- 后端服务无需校验，直接从 Header 获取用户信息。
-
-**Nginx + Lua 实现 JWT 校验**：
-
-```nginx
-server {
-    listen 80;
-    server_name api.example.com;
-
-    location / {
-        # 使用 access_by_lua_block 进行认证
-        access_by_lua_block {
-            local jwt = require "resty.jwt"
-
-            -- 从请求头获取 Token
-            local auth_header = ngx.var.http_authorization
-            if not auth_header then
-                ngx.status = 401
-                ngx.say('{"error": "Missing authorization header"}')
-                ngx.exit(ngx.HTTP_UNAUTHORIZED)
-            end
-
-            -- 提取 Token（Bearer token）
-            local token = auth_header:match("^Bearer%s+(.+)$")
-            if not token then
-                ngx.status = 401
-                ngx.say('{"error": "Invalid authorization format"}')
-                ngx.exit(ngx.HTTP_UNAUTHORIZED)
-            end
-
-            -- 验证 JWT
-            local jwt_obj = jwt:verify("your-secret-key", token)
-            if not jwt_obj.verified then
-                ngx.status = 401
-                ngx.say('{"error": "Invalid or expired token"}')
-                ngx.exit(ngx.HTTP_UNAUTHORIZED)
-            end
-
-            -- 将用户信息设置到变量，供后续使用
-            ngx.var.user_id = jwt_obj.payload.sub
-            ngx.var.user_role = jwt_obj.payload.role
-        }
-
-        # 将用户信息传递给后端服务
-        proxy_set_header X-User-ID $user_id;
-        proxy_set_header X-User-Role $user_role;
-        proxy_set_header X-Real-IP $remote_addr;
-
-        proxy_pass http://backend;
-    }
-
-    # 公开接口，无需认证
-    location /api/public/ {
-        proxy_pass http://backend;
-        proxy_set_header X-Real-IP $remote_addr;
-    }
-}
+```
+选择网关:
+│
+├─ 只需要反向代理、负载均衡?
+│  ├─ 是 → Nginx(首选)
+│  └─ 否 → 继续
+│
+├─ 需要丰富的插件生态?
+│  ├─ 是 → Kong(基于Nginx)
+│  └─ 否 → 继续
+│
+├─ Spring Cloud 全家桶?
+│  ├─ 是 → Spring Cloud Gateway
+│  └─ 否 → Nginx
 ```
 
-### 6.2 HTTPS 与 SSL 终结
-
-<SslTerminationDemo />
-
-HTTPS 是现代 Web 应用的标配。但如果在每台后端服务器都配置 HTTPS，会带来很多麻烦：
-- 证书管理复杂，每台服务器都要部署、更新证书。
-- 后端服务需要处理 TLS 握手，消耗 CPU 资源。
-- 配置容易出错，不一致。
-
-**SSL 终结（SSL Termination）** 方案：
-- 只在网关（Nginx）层配置 HTTPS 和证书。
-- 网关负责 TLS 握手和加解密。
-- 网关和后端服务之间使用 HTTP 明文传输（内部网络可信）。
-- 后端服务专注于业务逻辑，无需处理 TLS。
-
-**SSL 终结流程**：
-1. 客户端发送 HTTPS 请求到 Nginx。
-2. Nginx 和客户端完成 TLS 握手，建立加密通道。
-3. Nginx 解密请求，得到明文 HTTP 请求。
-4. Nginx 将明文 HTTP 请求转发给后端服务（通过内部网络）。
-5. 后端服务处理请求，返回明文 HTTP 响应给 Nginx。
-6. Nginx 加密响应，通过 HTTPS 返回给客户端。
-
-**Nginx HTTPS 配置**：
-
-```nginx
-server {
-    # 监听 443 端口，启用 SSL
-    listen 443 ssl http2;
-    server_name api.example.com;
-
-    # SSL 证书配置
-    ssl_certificate /etc/nginx/ssl/api.example.com.crt;  # 证书文件
-    ssl_certificate_key /etc/nginx/ssl/api.example.com.key;  # 私钥文件
-
-    # SSL 协议和密码套件（安全配置）
-    ssl_protocols TLSv1.2 TLSv1.3;  # 只启用安全的 TLS 版本
-    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256;  # 强密码套件
-    ssl_prefer_server_ciphers off;  # 优先使用客户端支持的密码套件
-
-    # SSL 会话缓存（提升性能）
-    ssl_session_cache shared:SSL:50m;  # 会话缓存大小
-    ssl_session_timeout 1d;  # 会话超时时间
-    ssl_session_tickets off;  # 禁用会话票证（前向安全）
-
-    # OCSP Stapling（提升性能和隐私）
-    ssl_stapling on;  # 启用 OCSP Stapling
-    ssl_stapling_verify on;  # 验证 OCSP 响应
-    ssl_trusted_certificate /etc/nginx/ssl/chain.crt;  # 信任链
-    resolver 8.8.8.8 8.8.4.4 valid=300s;  # DNS 解析器
-    resolver_timeout 5s;  # DNS 解析超时
-
-    # 安全响应头
-    add_header Strict-Transport-Security "max-age=63072000" always;  # HSTS
-    add_header X-Frame-Options "SAMEORIGIN" always;  # 防止点击劫持
-    add_header X-Content-Type-Options "nosniff" always;  # 防止 MIME 嗅探
-    add_header Referrer-Policy "strict-origin-when-cross-origin" always;  # Referrer 策略
-
-    # SSL 终结后，转发到后端 HTTP 服务
-    location / {
-        proxy_pass http://backend;  # 后端使用 HTTP
-        proxy_set_header Host $host;
-        proxy_set_header X-Real-IP $remote_addr;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-        proxy_set_header X-Forwarded-Proto $scheme;  # 传递原始协议（https）
-        proxy_set_header X-Forwarded-Port 443;  # 传递原始端口
-    }
-}
-
-# HTTP 重定向到 HTTPS（强制 HTTPS）
-server {
-    listen 80;
-    server_name api.example.com;
-
-    # 所有 HTTP 请求 301 重定向到 HTTPS
-    return 301 https://$server_name$request_uri;
-}
-```
-
-### 6.3 安全配置清单
-
-| 配置项 | 说明 | 推荐值 |
-| :--- | :--- | :--- |
-| **SSL 协议** | 启用的 TLS 版本 | `TLSv1.2 TLSv1.3`（禁用 SSLv3、TLSv1.0/1.1） |
-| **密码套件** | 加密算法组合 | 优先使用 `ECDHE` + `AES-GCM`，禁用 `RC4`、`DES`、`MD5` |
-| **HSTS** | 强制 HTTPS | `max-age=63072000`（两年） |
-| **证书有效期** | SSL 证书过期时间 | 不超过 397 天（行业规范） |
-| **OCSP Stapling** | 证书状态检查 | 启用，提升性能和隐私 |
-| **Session Tickets** | 会话恢复机制 | 禁用（前向安全考虑）或定期轮换密钥 |
+:::
 
 ---
 
-## 7. 系统整合：打造完整的网关架构
-
-现在，是时候把之前学到的所有组件整合起来，搭建一个完整的网关架构了。
-
-### 7.1 完整架构图
-
-```
-┌─────────────────────────────────────────────────────────────────────────────┐
-│                           客户端（浏览器/APP）                                 │
-└───────────────────────────────┬─────────────────────────────────────────────┘
-                                │ HTTPS
-                                ▼
-┌─────────────────────────────────────────────────────────────────────────────┐
-│                           外层：CDN + WAF                                    │
-│  ┌─────────────────────────────────────────────────────────────────────┐   │
-│  │  CDN（内容分发网络）                                                 │   │
-│  │  - 静态资源缓存（图片、CSS、JS）                                      │   │
-│  │  - 就近访问，降低延迟                                                 │   │
-│  └─────────────────────────────────────────────────────────────────────┘   │
-│  ┌─────────────────────────────────────────────────────────────────────┐   │
-│  │  WAF（Web 应用防火墙）                                                │   │
-│  │  - 防护 SQL 注入、XSS 攻击                                            │   │
-│  │  - 拦截恶意 Bot、爬虫                                                 │   │
-│  │  - CC 攻击防护（Challenge Collapsar）                                 │   │
-│  └─────────────────────────────────────────────────────────────────────┘   │
-└─────────────────────────────────────────────────────────────────────────────┘
-                                │
-                                ▼
-┌─────────────────────────────────────────────────────────────────────────────┐
-│                        中层：API 网关（Nginx/Kong）                           │
-│  ┌─────────────────────────────────────────────────────────────────────┐   │
-│  │  第一层：SSL 终结 + 安全防护                                          │   │
-│  │  - HTTPS / TLS 1.3                                                   │   │
-│  │  - HSTS、安全响应头                                                   │   │
-│  │  - OCSP Stapling                                                    │   │
-│  └─────────────────────────────────────────────────────────────────────┘   │
-│  ┌─────────────────────────────────────────────────────────────────────┐   │
-│  │  第二层：认证与鉴权                                                    │   │
-│  │  - JWT Token 校验                                                    │   │
-│  │  - OAuth 2.0 / SSO 集成                                               │   │
-│  │  - API Key 管理                                                       │   │
-│  │  - 权限校验（RBAC）                                                   │   │
-│  └─────────────────────────────────────────────────────────────────────┘   │
-│  ┌─────────────────────────────────────────────────────────────────────┐   │
-│  │  第三层：流量控制                                                      │   │
-│  │  - 限流（Rate Limiting）- 令牌桶/漏桶算法                              │   │
-│  │  - 熔断（Circuit Breaking）- 防止故障扩散                               │   │
-│  │  - 降级（Degradation）- 服务不可用时的备用方案                           │   │
-│  │  - 灰度发布（Canary Release）- 按比例分配流量                            │   │
-│  └─────────────────────────────────────────────────────────────────────┘   │
-│  ┌─────────────────────────────────────────────────────────────────────┐   │
-│  │  第四层：路由与负载均衡                                                 │   │
-│  │  - 路径路由（Path-based Routing）                                      │   │
-│  │  - 域名路由（Host-based Routing）                                      │   │
-│  │  - Header 路由（Header-based Routing）                                 │   │
-│  │  - 负载均衡算法（轮询/加权/最少连接/IP 哈希）                             │   │
-│  │  - 服务发现（Service Discovery）集成                                    │   │
-│  └─────────────────────────────────────────────────────────────────────┘   │
-│  ┌─────────────────────────────────────────────────────────────────────┐   │
-│  │  第五层：协议转换与数据处理                                             │   │
-│  │  - SSL 终结（HTTPS ↔ HTTP）                                           │   │
-│  │  - 协议转换（HTTP ↔ gRPC / WebSocket）                                 │   │
-│  │  - 请求/响应转换（JSON ↔ XML）                                         │   │
-│  │  - 数据压缩（Gzip / Brotli）                                           │   │
-│  │  - 缓存（Cache）- 静态资源和 API 响应                                    │   │
-│  └─────────────────────────────────────────────────────────────────────┘   │
-└─────────────────────────────────────────────────────────────────────────────┘
-                                │
-                                ▼
-┌─────────────────────────────────────────────────────────────────────────────┐
-│                         内层：微服务集群                                     │
-│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐          │
-│  │  用户服务    │  │  订单服务    │  │  商品服务    │  │  支付服务    │          │
-│  │  User Svc   │  │  Order Svc  │  │ Product Svc │  │ Payment Svc │          │
-│  │             │  │             │  │             │  │             │          │
-│  │  服务注册    │  │  服务注册    │  │  服务注册    │  │  服务注册    │          │
-│  │   Consul    │  │   Consul    │  │   Consul    │  │   Consul    │          │
-│  └──────┬──────┘  └──────┬──────┘  └──────┬──────┘  └──────┬──────┘          │
-│         │                │                │                │               │
-│         └────────────────┴────────────────┴────────────────┘               │
-│                                       │                                      │
-│                    服务发现与配置中心（Consul / etcd）                          │
-│                    - 服务注册与发现                                            │
-│                    - 健康检查                                                  │
-│                    - KV 配置存储                                              │
-└─────────────────────────────────────────────────────────────────────────────┘
-```
-
-### 7.2 实战代码模板：完整的 Nginx 网关配置
-
-```nginx
-# /etc/nginx/nginx.conf
-
-user nginx;
-worker_processes auto;  # 自动设置为 CPU 核心数
-error_log /var/log/nginx/error.log warn;
-pid /var/run/nginx.pid;
-
-# 加载动态模块（根据实际需要启用）
-# load_module modules/ngx_http_geoip2_module.so;
-
-# 工作模式和连接数上限
-events {
-    use epoll;  # Linux 下使用 epoll
-    worker_connections 4096;  # 每个 Worker 的最大连接数
-    multi_accept on;  # 尽可能接受更多连接
-}
-
-http {
-    # 基础设置
-    include /etc/nginx/mime.types;
-    default_type application/octet-stream;
-
-    # 日志格式
-    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
-                    '$status $body_bytes_sent "$http_referer" '
-                    '"$http_user_agent" "$http_x_forwarded_for" '
-                    'rt=$request_time uct="$upstream_connect_time" '
-                    'uht="$upstream_header_time" urt="$upstream_response_time"';
-
-    access_log /var/log/nginx/access.log main;
-
-    # 性能优化
-    sendfile on;
-    tcp_nopush on;
-    tcp_nodelay on;
-    keepalive_timeout 65;
-    types_hash_max_size 2048;
-
-    # Gzip 压缩
-    gzip on;
-    gzip_vary on;
-    gzip_proxied any;
-    gzip_comp_level 6;
-    gzip_min_length 1000;
-    gzip_types text/plain text/css text/xml application/json application/javascript application/rss+xml application/atom+xml image/svg+xml;
-
-    # 安全响应头
-    add_header X-Frame-Options "SAMEORIGIN" always;
-    add_header X-Content-Type-Options "nosniff" always;
-    add_header X-XSS-Protection "1; mode=block" always;
-    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
-
-    # 防止点击劫持（可选）
-    # add_header Content-Security-Policy "default-src 'self'; frame-ancestors 'self';" always;
-
-    # 上游服务定义
-    # 用户服务（加权轮询）
-    upstream user_service {
-        server 10.0.1.10:8080 weight=3;
-        server 10.0.1.11:8080 weight=2;
-        keepalive 32;
-    }
-
-    # 订单服务（最少连接）
-    upstream order_service {
-        least_conn;
-        server 10.0.1.20:8080;
-        server 10.0.1.21:8080;
-        server 10.0.1.22:8080;
-        keepalive 32;
-    }
-
-    # 商品服务（IP 哈希，会话保持）
-    upstream product_service {
-        ip_hash;
-        server 10.0.1.30:8080;
-        server 10.0.1.31:8080;
-        keepalive 32;
-    }
-
-    # 支付服务（严格的负载均衡 + 健康检查）
-    upstream payment_service {
-        server 10.0.1.40:8080 weight=2;
-        server 10.0.1.41:8080 backup;  # 备份服务器
-        keepalive 32;
-    }
-
-    # 限流区域定义
-    # 普通 API 限流：每秒 10 请求
-    limit_req_zone $binary_remote_addr zone=api_limit:10m rate=10r/s;
-
-    # 严格限流：每秒 2 请求（用于敏感接口）
-    limit_req_zone $binary_remote_addr zone=strict_limit:10m rate=2r/s;
-
-    # 全局限流：保护后端整体
-    limit_req_zone $server_name zone=global_limit:10m rate=100r/s;
-
-    # 连接数限制
-    limit_conn_zone $binary_remote_addr zone=conn_limit:10m;
-
-    # 虚拟主机配置
-    server {
-        listen 80;
-        server_name api.example.com;
-
-        # 强制 HTTPS
-        return 301 https://$server_name$request_uri;
-    }
-
-    server {
-        listen 443 ssl http2;
-        server_name api.example.com;
-
-        # SSL 配置（略，见上文）
-        ssl_certificate /etc/nginx/ssl/api.example.com.crt;
-        ssl_certificate_key /etc/nginx/ssl/api.example.com.key;
-        # ... 其他 SSL 配置
-
-        # 全局限流
-        limit_req zone=global_limit burst=200 nodelay;
-
-        # ===== 用户服务路由 =====
-        location /api/users/ {
-            # 应用限流
-            limit_req zone=api_limit burst=20 nodelay;
-            limit_conn conn_limit 10;
-
-            # 超时设置
-            proxy_connect_timeout 5s;
-            proxy_send_timeout 10s;
-            proxy_read_timeout 10s;
-
-            proxy_pass http://user_service;
-            proxy_set_header Host $host;
-            proxy_set_header X-Real-IP $remote_addr;
-            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-            proxy_set_header X-Forwarded-Proto $scheme;
-
-            # 错误处理
-            proxy_intercept_errors on;
-            error_page 500 502 503 504 /error.html;
-        }
-
-        # ===== 订单服务路由 =====
-        location /api/orders/ {
-            # 更严格的限流
-            limit_req zone=strict_limit burst=10 nodelay;
-            limit_conn conn_limit 5;
-
-            proxy_pass http://order_service;
-            proxy_set_header Host $host;
-            proxy_set_header X-Real-IP $remote_addr;
-            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-            proxy_set_header X-Forwarded-Proto $scheme;
-        }
-
-        # ===== 商品服务路由 =====
-        location /api/products/ {
-            # 缓存静态资源
-            location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
-                expires 30d;
-                add_header Cache-Control "public, immutable";
-            }
-
-            proxy_pass http://product_service;
-            proxy_set_header Host $host;
-            proxy_set_header X-Real-IP $remote_addr;
-            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-            proxy_set_header X-Forwarded-Proto $scheme;
-        }
-
-        # ===== 支付服务路由（最高安全级别） =====
-        location /api/pay/ {
-            # 多重限流保护
-            limit_req zone=strict_limit burst=5 nodelay;
-            limit_req zone=global_limit burst=50 nodelay;
-            limit_conn conn_limit 3;
-
-            # 只允许内网访问（额外安全层）
-            allow 10.0.0.0/8;
-            allow 172.16.0.0/12;
-            allow 192.168.0.0/16;
-            deny all;
-
-            # 详细日志记录
-            access_log /var/log/nginx/payment-access.log detailed;
-
-            proxy_pass http://payment_service;
-            proxy_set_header Host $host;
-            proxy_set_header X-Real-IP $remote_addr;
-            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-            proxy_set_header X-Forwarded-Proto $scheme;
-
-            # 支付接口增加超时时间
-            proxy_connect_timeout 30s;
-            proxy_send_timeout 30s;
-            proxy_read_timeout 30s;
-        }
-
-        # 健康检查端点
-        location /health {
-            access_log off;
-            return 200 "healthy\n";
-            add_header Content-Type text/plain;
-        }
-
-        # 错误页面
-        location /error.html {
-            internal;
-            root /var/www/html;
-        }
-
-        # 限流错误处理
-        error_page 429 /429.html;
-        location = /429.html {
-            internal;
-            return 429 '{"error": "Too Many Requests", "message": "Rate limit exceeded. Please try again later."}';
-            add_header Content-Type application/json;
-        }
-    }
-}
-```
-
-### 7.3 为什么这样设计最强？
-
-这个架构的设计哲学，是为了解决三个核心矛盾：
-
-**1. 高性能与高可用（负载均衡 + 健康检查）**
-- **矛盾**：单台服务器性能有限，容易成为瓶颈；多台服务器需要协调，避免单点故障。
-- **解法**：使用 Nginx 作为负载均衡器，支持多种负载均衡算法（轮询、加权、最少连接、IP 哈希）。配合健康检查，自动剔除故障节点，保证服务高可用。
-
-**2. 安全性与易用性（SSL 终结 + 统一认证）**
-- **矛盾**：HTTPS 保证安全，但配置复杂、证书管理麻烦；每个服务都认证，代码重复、维护困难。
-- **解法**：在 Nginx 层统一做 SSL 终结和认证。客户端只需信任 Nginx 的证书，后端服务之间使用 HTTP 明文通信，简化配置。认证逻辑统一在网关处理，后端服务专注于业务逻辑。
-
-**3. 灵活性与稳定性（限流熔断 + 灰度发布）**
-- **矛盾**：新功能需要快速上线验证，但全量发布风险大；突发流量可能压垮系统，需要保护机制。
-- **解法**：使用 Nginx 的限流和熔断功能，防止系统被突发流量压垮。配合灰度发布，按 Header 或比例将部分流量导到新版本，验证稳定性后再全量上线。
-
----
-
-## 8. 实战模板：直接抄作业
-
-为了让你更直观地理解这套机制是如何运作的，我们为你准备了**全链路配置模板**。
-
-### 场景 1：中小型 Web 应用（单域名，多服务）
-
-> 适用场景：创业公司官网 + 后台管理 + API 服务
-
-```nginx
-# /etc/nginx/nginx.conf
-
-user nginx;
-worker_processes auto;
-error_log /var/log/nginx/error.log warn;
-pid /var/run/nginx.pid;
-
-events {
-    use epoll;
-    worker_connections 4096;
-    multi_accept on;
-}
-
-http {
-    include /etc/nginx/mime.types;
-    default_type application/octet-stream;
-
-    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
-                    '$status $body_bytes_sent "$http_referer" '
-                    '"$http_user_agent" "$http_x_forwarded_for"';
-
-    access_log /var/log/nginx/access.log main;
-
-    sendfile on;
-    tcp_nopush on;
-    tcp_nodelay on;
-    keepalive_timeout 65;
-
-    gzip on;
-    gzip_vary on;
-    gzip_proxied any;
-    gzip_comp_level 6;
-    gzip_min_length 1000;
-    gzip_types text/plain text/css text/xml application/json application/javascript;
-
-    # 安全响应头
-    add_header X-Frame-Options "SAMEORIGIN" always;
-    add_header X-Content-Type-Options "nosniff" always;
-    add_header X-XSS-Protection "1; mode=block" always;
-
-    # 上游服务
-    upstream app_servers {
-        server 127.0.0.1:3000;
-        server 127.0.0.1:3001;
-        keepalive 32;
-    }
-
-    upstream api_servers {
-        server 127.0.0.1:4000;
-        keepalive 32;
-    }
-
-    # 限流配置
-    limit_req_zone $binary_remote_addr zone=general:10m rate=10r/s;
-    limit_req_zone $binary_remote_addr zone=api:10m rate=20r/s;
-
-    # HTTP 服务器
-    server {
-        listen 80;
-        server_name example.com www.example.com;
-
-        # 强制 HTTPS（生产环境启用）
-        # return 301 https://$server_name$request_uri;
-
-        # 静态文件
-        location /static/ {
-            alias /var/www/html/static/;
-            expires 30d;
-            add_header Cache-Control "public, immutable";
-        }
-
-        location /images/ {
-            alias /var/www/html/images/;
-            expires 90d;
-            add_header Cache-Control "public, immutable";
-        }
-
-        # 前端应用
-        location / {
-            limit_req zone=general burst=20 nodelay;
-
-            proxy_pass http://app_servers;
-            proxy_set_header Host $host;
-            proxy_set_header X-Real-IP $remote_addr;
-            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-            proxy_set_header X-Forwarded-Proto $scheme;
-        }
-
-        # API 接口
-        location /api/ {
-            limit_req zone=api burst=40 nodelay;
-
-            proxy_pass http://api_servers;
-            proxy_set_header Host $host;
-            proxy_set_header X-Real-IP $remote_addr;
-            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-            proxy_set_header X-Forwarded-Proto $scheme;
-        }
-
-        # 健康检查
-        location /health {
-            access_log off;
-            return 200 "healthy\n";
-            add_header Content-Type text/plain;
-        }
-    }
-
-    # HTTPS 服务器（生产环境启用）
-    # server {
-    #     listen 443 ssl http2;
-    #     server_name example.com www.example.com;
-    #
-    #     ssl_certificate /etc/nginx/ssl/example.com.crt;
-    #     ssl_certificate_key /etc/nginx/ssl/example.com.key;
-    #     ssl_protocols TLSv1.2 TLSv1.3;
-    #     ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256;
-    #     ssl_prefer_server_ciphers off;
-    #     ssl_session_cache shared:SSL:50m;
-    #     ssl_session_timeout 1d;
-    #
-    #     # 复制 HTTP 服务器的 location 配置
-    #     # ...
-    # }
-}
-```
-
-### 场景 2：微服务架构（多域名，复杂路由）
-
-> 适用场景：大型互联网公司，多业务线，多团队协作
-
-```nginx
-# 微服务架构下的 Nginx 配置示例
-# 特点：多域名、复杂路由、服务发现集成
-
-# 服务发现集成（使用 Consul 或 etcd）
-# 需要 nginx-upsync-module 模块
-upstream user_service {
-    # 从 Consul 自动发现服务实例
-    upsync 127.0.0.1:8500/v1/catalog/service/user-service upsync_timeout=6m upsync_interval=500ms;
-    upsync_dump_path /var/nginx/conf/user_service.conf;
-
-    # 默认服务器（Consul 不可用时使用）
-    server 127.0.0.1:11111 down;
-
-    keepalive 64;
-    keepalive_timeout 60s;
-    keepalive_requests 1000;
-}
-
-# 动态 upstream 示例（Lua + Redis）
-upstream dynamic_backend {
-    server 0.0.0.0;  # 占位符
-
-    balancer_by_lua_block {
-        local balancer = require "ngx.balancer"
-        local resty_redis = require "resty.redis"
-
-        -- 从 Redis 获取可用后端列表
-        local redis = resty_redis:new()
-        redis:connect("127.0.0.1", 6379)
-
-        local backends, err = redis:smembers("backends:available")
-        if not backends or #backends == 0 then
-            ngx.log(ngx.ERR, "no available backends")
-            return ngx.exit(503)
-        end
-
-        -- 简单的轮询选择
-        local hash = ngx.var.remote_addr .. ngx.var.request_uri
-        local index = ngx.crc32_short(hash) % #backends + 1
-        local selected = backends[index]
-
-        -- 设置后端地址
-        local ok, err = balancer.set_current_peer(selected, 80)
-        if not ok then
-            ngx.log(ngx.ERR, "failed to set peer: ", err)
-            return ngx.exit(500)
-        end
-    }
-}
-
-# 基于 Host 的多域名路由
-server {
-    listen 80;
-    server_name api.user.example.com;
-    return 301 https://$server_name$request_uri;
-}
-
-server {
-    listen 443 ssl http2;
-    server_name api.user.example.com;
-
-    ssl_certificate /etc/nginx/ssl/user.example.com.crt;
-    ssl_certificate_key /etc/nginx/ssl/user.example.com.key;
-
-    # JWT 认证（使用 Lua）
-    access_by_lua_block {
-        local jwt = require "resty.jwt"
-
-        local auth_header = ngx.var.http_authorization
-        if not auth_header then
-            ngx.exit(401)
-        end
-
-        local token = auth_header:match("^Bearer%s+(.+)$")
-        if not token then
-            ngx.exit(401)
-        end
-
-        local jwt_obj = jwt:verify(os.getenv("JWT_SECRET"), token)
-        if not jwt_obj.verified then
-            ngx.exit(401)
-        end
-
-        -- 将用户信息设置到变量
-        ngx.var.user_id = jwt_obj.payload.sub
-        ngx.var.user_role = jwt_obj.payload.role
-    }
-
-    location / {
-        # 权限控制
-        if ($user_role != "user" && $user_role != "admin") {
-            return 403;
-        }
-
-        proxy_pass http://user_service;
-        proxy_set_header Host $host;
-        proxy_set_header X-User-ID $user_id;
-        proxy_set_header X-User-Role $user_role;
-        proxy_set_header X-Real-IP $remote_addr;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-        proxy_set_header X-Forwarded-Proto $scheme;
-    }
-}
-
-# Admin API（管理后台，更严格的权限控制）
-server {
-    listen 443 ssl http2;
-    server_name api.admin.example.com;
-
-    ssl_certificate /etc/nginx/ssl/admin.example.com.crt;
-    ssl_certificate_key /etc/nginx/ssl/admin.example.com.key;
-
-    # IP 白名单（只允许公司内网访问）
-    allow 10.0.0.0/8;
-    allow 172.16.0.0/12;
-    allow 192.168.0.0/16;
-    deny all;
-
-    # 严格的限流
-    limit_req zone=strict_limit burst=5 nodelay;
-    limit_conn conn_limit 5;
-
-    # 只允许管理员角色访问
-    set $admin_required 1;
-
-    location / {
-        if ($user_role != "admin") {
-            return 403;
-        }
-
-        proxy_pass http://admin_service;
-        proxy_set_header Host $host;
-        proxy_set_header X-User-ID $user_id;
-        proxy_set_header X-User-Role $user_role;
-        proxy_set_header X-Real-IP $remote_addr;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-        proxy_set_header X-Forwarded-Proto $scheme;
-    }
-}
-```
-
----
-
-## 9. 名词对照表
-
-| 英文术语 | 中文对照 | 解释 |
-| :--- | :--- | :--- |
-| **Reverse Proxy** | 反向代理 | 部署在服务器端，接收客户端请求并转发给内部服务器的代理服务。客户端只知道反向代理的存在，不知道真实服务器地址。 |
-| **Forward Proxy** | 正向代理 | 部署在客户端侧，代替客户端访问外部资源的代理服务。服务端看到的是代理的 IP，不知道真实客户端。典型应用：VPN、翻墙工具。 |
-| **API Gateway** | API 网关 | 位于客户端和后端服务之间的中间层，提供路由、认证、限流、日志等功能，是微服务架构的"统一大门"。 |
-| **Load Balancing** | 负载均衡 | 将请求流量分配到多台服务器，避免单台服务器过载，提高系统可用性和性能。 |
-| **Rate Limiting** | 限流 | 限制单位时间内的请求数量，防止系统被突发流量压垮。常用算法：令牌桶、漏桶、滑动窗口。 |
-| **Circuit Breaking** | 熔断 | 当依赖服务出现故障时，自动切断调用，防止故障扩散，并提供降级方案。 |
-| **SSL Termination** | SSL 终结 | 在网关层处理 HTTPS 加密解密，后端服务使用 HTTP，降低后端计算开销，简化证书管理。 |
-| **Health Check** | 健康检查 | 定期检查后端服务的健康状态，自动剔除故障节点，保证流量只发送到健康的服务实例。 |
-| **Sticky Session** | 会话保持 | 将同一客户端的请求始终路由到同一台后端服务器，用于需要保持会话状态的场景。 |
-| **Blue-Green Deployment** | 蓝绿部署 | 同时运行两个生产环境（蓝、绿），切换流量实现零停机发布。 |
-| **Canary Release** | 灰度发布 | 将少量流量导到新版本，验证稳定性后逐步扩大比例，降低发布风险。 |
-| **Upstream** | 上游 | 在 Nginx 配置中，指代后端服务器组。 |
-| **Location** | 位置块 | Nginx 中用于匹配请求 URL 并定义处理规则的配置块。 |
-| **Worker Process** | 工作进程 | Nginx 中实际处理请求的进程，多个 Worker 并行工作，充分利用多核 CPU。 |
-| **Master Process** | 主进程 | Nginx 中负责管理 Worker 进程（启动、停止、重新加载配置）的控制进程。 |
-| **Event-Driven** | 事件驱动 | 一种编程模型，通过监听和响应事件（如 I/O 就绪）来处理并发，Nginx 的核心架构。 |
-| **epoll / kqueue** | I/O 多路复用 | Linux/macOS 下的高性能 I/O 事件通知机制，允许单个进程同时处理大量连接。 |
-
----
-
-## 总结：反向代理与网关的本质
-
-经过这一章的学习，我们可以得出几个核心结论：
-
-**从实践来看**：
-- 反向代理解决的是"流量怎么分发"的问题，通过负载均衡、健康检查、会话保持等机制，将流量高效、可靠地送达后端服务。
-- API 网关解决的是"请求怎么处理"的问题，在统一的入口点处理横切关注点（认证、限流、日志等），让后端服务专注于业务逻辑。
-
-**从架构视角看**：
-- 网关是系统的"门面"，所有流量都经过这里，是安全防护的第一道防线，也是性能优化的关键节点。
-- 合理的网关架构，可以将单台服务器的处理能力扩展到整个集群，将单点故障风险分散到多个节点，将复杂的安全策略收敛到统一入口。
-
-**从运维视角看**：
-- 证书管理、限流策略、路由规则，都应该在网关层统一配置，避免分散在各个服务。
-- 监控和日志也应该在网关层统一收集，便于分析流量模式、排查问题、审计安全事件。
-
-目标是：在给定的资源和性能约束下，让每一次请求都能被安全、高效、可靠地处理。
\ No newline at end of file
+## 9. 名词速查表
+
+| 名词         | 英文                     | 解释                                                                                                               |
+| ------------ | ------------------------ | ------------------------------------------------------------------------------------------------------------------ |
+| **反向代理** | Reverse Proxy            | 部署在服务器端,接收客户端请求并转发给内部服务的代理服务。客户端只知道反向代理的存在,不知道真实服务器地址。         |
+| **正向代理** | Forward Proxy            | 部署在客户端侧,代替客户端访问外部资源的代理服务。服务端看到的是代理的IP,不知道真实客户端。典型应用:VPN、翻墙工具。 |
+| **API网关**  | API Gateway              | 位于客户端和后端服务之间的中间层,提供路由、认证、限流、日志等功能,是微服务架构的"统一大门"。                       |
+| **负载均衡** | Load Balancing           | 将请求流量分配到多台服务器,避免单台服务器过载,提高系统可用性和性能。                                               |
+| **SSL终结**  | SSL Termination          | 在网关层处理HTTPS加密解密,后端服务使用HTTP,降低后端计算开销,简化证书管理。                                         |
+| **限流**     | Rate Limiting            | 限制单位时间内的请求数量,防止系统被突发流量压垮。常用算法:令牌桶、漏桶、滑动窗口。                                 |
+| **熔断**     | Circuit Breaking         | 当依赖服务出现故障时,自动切断调用,防止故障扩散,并提供降级方案。                                                    |
+| **会话保持** | Session Persistence      | 确保同一客户端的请求始终路由到同一台后端服务器,用于需要保持会话状态的场景。                                        |
+| **健康检查** | Health Check             | 定期检查后端服务的健康状态,自动剔除故障节点,保证流量只发送到健康的服务实例。                                       |
+| **灰度发布** | Canary Release           | 将少量流量导到新版本,验证稳定性后逐步扩大比例,降低发布风险。                                                       |
+| **WAF**      | Web Application Firewall | Web应用防火墙,防护SQL注入、XSS、CC攻击等Web安全威胁。                                                              |
+| **CDN**      | Content Delivery Network | 内容分发网络,在全球部署边缘节点,加速静态资源访问。                                                                 |
diff --git a/docs/zh-cn/appendix/git-intro.md b/docs/zh-cn/appendix/git-intro.md
index fa9fe63..21b1feb 100644
--- a/docs/zh-cn/appendix/git-intro.md
+++ b/docs/zh-cn/appendix/git-intro.md
@@ -1,18 +1,24 @@
-# Git 版本控制：时间的后悔药
+# Git 版本控制:代码世界的时光机
 
-> 💡 **一句话解释**：Git 就是代码世界的**游戏存档管理器**。它能让你随时“读档”重来，也能让你和队友在各自的“平行宇宙”里互不干扰地开发。
+::: tip 🎯 核心问题
+**写代码时最怕什么?** 写错了想回退、改崩了想重来、多人同时改同一个文件...这些头疼的事,Git 都能帮你搞定!它就像是代码世界的"时光机",让你随时回到过去,又能和队友在各自的"平行宇宙"里安全开发。
+:::
 
-> ✅ **安全说明**：本页所有交互组件都是“模拟器”，不会对你电脑上的真实 Git 仓库执行任何操作；但真实项目里建议严格按步骤来，不要依赖“自动下一步”。
+---
 
-## 0. 最常用的 5 个场景（直接照抄）
+## 0. 最常用的 5 个场景(直接照抄)
 
-如果你只想“立刻能用”，先把这块过一遍：每个场景都是现实工作中最常见的 Git 流程。
+如果你只想"立刻能用",先把这块过一遍:每个场景都是现实工作中最常见的 Git 流程。
 
 <GitScenariosDemo />
 
-## 1. 为什么我们需要它？
+---
 
-你是否经历过这种绝望？
+## 1. 为什么要学 Git?三大痛点
+
+### 1.1 痛点一:版本混乱
+
+你是否经历过这种绝望?
 
 ```text
 论文_初稿.doc
@@ -22,80 +28,322 @@
 论文_绝对是最后一次修改版.doc
 ```
 
-**Git 完美解决了三个问题**：
+**Git 的解决方案**:不需要复制副本,一个文件夹搞定所有历史版本。想回到哪次修改,一键恢复。
 
-1.  **版本混乱**：不需要复制副本，一个文件夹搞定所有历史版本。
-2.  **无法后悔**：删错了代码？一秒钟找回三天前的状态。
-3.  **协作冲突**：你改了 A 文件，我改了 B 文件，Git 帮我们自动合并。
+### 1.2 痛点二:无法后悔
+
+::: tip 💡 这个场景你一定遇到过
+写代码写了 3 小时,突然发现之前的思路更好,但已经改不回去了...或者删错了一段代码,想找回原来的版本。
+
+有了 Git,这种情况永远不会发生。每次重要节点都能"存档",出问题随时"读档"重来。
+:::
+
+### 1.3 痛点三:协作冲突
+
+你和队友同时改同一个文件:
+
+- 你改了 A 文件的第 10 行
+- 队友改了 A 文件的第 15 行
+- 怎么合并?谁覆盖谁?
+
+**Git 的解决方案**:智能合并,自动处理大部分冲突。只有当你们真的改了同一行代码时,才需要手动决定用谁的。
 
 ---
 
-## 2. 核心概念：三个箱子
+## 2. 核心概念:三区模型
 
 Git 的设计哲学其实很像**寄快递**。
 
 <GitThreeAreasDemo />
 
-- **工作区 (Working Dir)**：你的**书桌**。你正在这里写代码，想怎么乱改都行。
-- **暂存区 (Staging Area)**：**快递盒**。你把写好的文件放进去（`git add`），准备打包。
-- **仓库 (Repository)**：**快递柜**。一旦你封箱寄出（`git commit`），这个版本就被永久记录下来了。
+### 2.1 三个区域是什么?
 
-> 🔑 **关键点**：只有提交（Commit）到仓库的内容，才是安全的。工作区里没提交的内容，丢了就真丢了。
+::: tip 📦 用快递理解 Git
+想象你在寄快递:
+
+- **工作区(Working Dir)** = 你的**书桌**。你在这里整理要寄的东西,想怎么乱改都行。
+- **暂存区(Staging Area)** = **快递盒**。你把要寄的文件放进去(`git add`),准备打包。
+- **仓库(Repository)** = **快递柜**。一旦你封箱寄出(`git commit`),这个版本就被永久记录下来了。
+  :::
+
+| 区域       | 作用               | 对应命令              | 状态          |
+| ---------- | ------------------ | --------------------- | ------------- |
+| **工作区** | 你当前正在改的代码 | `git status` 查看修改 | 红色 = 未暂存 |
+| **暂存区** | 准备提交的文件     | `git add` 添加        | 绿色 = 已暂存 |
+| **仓库**   | 永久保存的历史版本 | `git commit` 提交     | 只读,不能改   |
+
+::: tip 💡 关键理解
+只有提交到**仓库**的内容才是安全的。工作区里没提交的内容,丢了就真丢了。所以经常`git commit`是好习惯!
+:::
 
 ---
 
-## 3. 基础工作流：存档三步走
+## 3. 基础工作流:存档三步走
 
-日常开发中，你 90% 的时间都在重复这三个动作。
+日常开发中,你 90% 的时间都在重复这三个动作。
 
 <GitWorkflowDemo />
 
-1.  **修改代码**：在工作区写写画画。
-2.  **`git add`**：挑选你要保存的文件，放入暂存区。
-3.  **`git commit`**：给这次修改起个名字（比如“修复了登录 Bug”），永久存档。
+### 3.1 第一步:修改代码(工作区)
+
+在工作区写写画画,想怎么改就怎么改。这时候修改只在你本地,还没记录。
+
+### 3.2 第二步:挑选文件(git add → 暂存区)
+
+::: tip 🤔 为什么要先 add 再 commit?
+你可能问:为什么不能直接 commit 所有修改?
+
+**答案**:因为有时候你不想一次性提交所有改动。
+
+- 今天改了 5 个文件,但只想提交其中 3 个(完成了一个功能)
+- 另外 2 个文件还在调试中,不想现在提交
+
+`git add` 让你有选择权:决定这次提交包含哪些文件。
+:::
+
+**常用命令**:
+
+```bash
+# 添加单个文件
+git add index.html
+
+# 添加所有修改
+git add .
+
+# 查看哪些文件被暂存了
+git status
+```
+
+### 3.3 第三步:封箱提交(git commit → 仓库)
+
+给这次修改起个名字(比如"修复了登录 Bug"),永久存档。
+
+**重要:commit message 要写清楚!**
+
+```bash
+# ❌ 不好的写法
+git commit -m "update"
+
+# ✅ 好的写法
+git commit -m "feat: 添加用户登录功能"
+git commit -m "fix: 修复首页在 iOS 的显示问题"
+git commit -m "docs: 更新 README 的部署说明"
+```
+
+::: tip 💡 commit message 规范
+推荐用**类型+描述**的格式:
+
+- `feat:` 新功能
+- `fix:` 修复 bug
+- `docs:` 文档更新
+- `style:` 代码格式(不影响功能)
+- `refactor:` 重构(不改变功能)
+- `test:` 测试相关
+- `chore:` 构建/工具相关
+
+这样以后翻历史记录,一眼就知道每次提交做了什么。
+:::
 
 ---
 
-## 4. 平行宇宙：分支 (Branch)
+## 4. 平行宇宙:分支(Branch)的魔法
 
-这是 Git 最强大的功能。想象你在玩游戏，前面有个大 Boss（上线新功能），你怕打不过导致游戏结束（系统崩溃）。
+这是 Git 最强大的功能!
 
-这时候，你可以开一个**分支 (Branch)**，相当于**复制了一个平行世界**。
+::: tip 🌌 用游戏理解分支
+想象你在玩游戏,前面有个大 Boss(上线新功能),你怕打不过导致游戏结束(系统崩溃)。
+
+这时候,你可以开一个**分支(Branch)**,相当于**复制了一个平行世界**:
+
+- 在**平行世界**(新分支)里打 Boss,输了也不怕,因为主世界(主分支)没影响
+- 打赢了就把成果"合并"回主世界
+- 多个队友可以在各自的平行世界开发,互不干扰
+  :::
 
 <GitBranchMergeDemo />
 
-- **主分支 (Main/Master)**：稳定的线上版本，只有测试通过的代码才能进来。
-- **开发分支 (Feature)**：你的试验田。你在这里炸了地球也没关系，不会影响主分支。
-- **合并 (Merge)**：你在试验田里测试成功了，就把改动“合并”回主分支。
+### 4.1 主分支 vs 开发分支
+
+| 分支类型            | 作用           | 特点                                 |
+| ------------------- | -------------- | ------------------------------------ |
+| **main/master**     | 稳定的线上版本 | 只有测试通过的代码才能进来           |
+| **dev/feature-xxx** | 你的试验田     | 这里炸了地球也没关系,不影响主分支    |
+| **hotfix-xxx**      | 紧急修复       | 生产出 bug 时,从 main 开分支快速修复 |
+
+### 4.2 分支操作流程
+
+**创建分支并切换**:
+
+```bash
+# 创建新分支
+git branch feature-login
+
+# 切换到新分支
+git checkout feature-login
+
+# 或者一步到位:创建并切换
+git checkout -b feature-login
+```
+
+**在分支上开发**:
+
+```bash
+# 在 feature-login 分支上改代码...
+git add .
+git commit -m "feat: 添加登录表单"
+```
+
+**合并回主分支**:
+
+```bash
+# 切回主分支
+git checkout main
+
+# 合并 feature-login
+git merge feature-login
+
+# 删除已合并的分支(可选)
+git branch -d feature-login
+```
+
+::: tip 💡 什么时候用分支?
+**个人开发**:
+
+- 要尝试新想法,不确定会不会搞崩现有代码 → 开分支
+- 修一个复杂 bug,需要多次实验 → 开分支
+
+**团队开发**:
+
+- 每个功能一个分支,互不干扰
+- 开发完提 Pull Request,队友 review 后再合并
+  :::
 
 ---
 
-## 5. 常用命令速查
+## 5. 常用命令速查表
 
-| 命令                  | 作用           | 人话解释                               |
-| :-------------------- | :------------- | :------------------------------------- |
-| `git init`            | 初始化         | "我要在这里建个新仓库"                 |
-| `git status`          | 查看状态       | "现在书桌上乱不乱？有没有东西没装箱？" |
-| `git add .`           | 添加所有       | "把桌上所有文件都扔进快递盒"           |
-| `git commit -m "..."` | 提交           | "封箱！贴上标签，写上这次改了啥"       |
-| `git log`             | 查看历史       | "翻翻以前的日记"                       |
-| `git checkout -b dev` | 以此创建新分支 | "我要去平行宇宙 dev 探险了"            |
-| `git checkout main`   | 切换分支       | "回地球（主分支）看看"                 |
-| `git merge dev`       | 合并分支       | "把平行宇宙的成果带回地球"             |
+| 命令                    | 作用       | 人话解释                       | 使用频率              |
+| ----------------------- | ---------- | ------------------------------ | --------------------- |
+| `git init`              | 初始化     | "在这里建个新仓库"             | 项目开始时用一次      |
+| `git status`            | 查看状态   | "现在乱不乱?有没有东西没提交?" | ⭐⭐⭐⭐⭐ 极高频     |
+| `git add .`             | 添加所有   | "把桌上所有文件都扔进快递盒"   | ⭐⭐⭐⭐⭐ 每次提交前 |
+| `git add file.txt`      | 添加单个   | "只要这个文件"                 | ⭐⭐⭐⭐ 选择性添加   |
+| `git commit -m "..."`   | 提交       | "封箱!贴上标签,写上这次改了啥" | ⭐⭐⭐⭐⭐ 完成功能时 |
+| `git log`               | 查看历史   | "翻翻以前的日记"               | ⭐⭐⭐ 回顾历史       |
+| `git checkout -b dev`   | 创建新分支 | "我要去平行宇宙 dev 探险了"    | ⭐⭐⭐⭐ 开新功能     |
+| `git checkout main`     | 切换分支   | "回地球(主分支)看看"           | ⭐⭐⭐⭐ 切换任务     |
+| `git merge dev`         | 合并分支   | "把平行宇宙的成果带回地球"     | ⭐⭐⭐ 完成功能       |
+| `git branch`            | 查看分支   | "现在有哪些平行世界?"          | ⭐⭐⭐ 查看状态       |
+| `git branch -d feature` | 删除分支   | "这个平行世界不需要了,删掉"    | ⭐⭐ 合并后清理       |
+| `git push`              | 推送       | "把本地存档上传到云端"         | ⭐⭐⭐⭐⭐ 团队协作   |
+| `git pull`              | 拉取       | "把云端最新存档下载到本地"     | ⭐⭐⭐⭐⭐ 团队协作   |
 
 ---
 
-## 6. 进阶：解决冲突与远程协作
+## 6. 进阶:解决冲突与远程协作
 
-当你和队友同时修改了同一个文件的同一行代码，Git 就会懵逼：“我该听谁的？” 这就是**冲突 (Conflict)**。
+### 6.1 冲突(Conflict)是什么?
+
+当你和队友**同时修改了同一个文件的同一行代码**,Git 就会懵:"我该听谁的?"这就是**冲突(Conflict)**。
 
 <GitConflictDemo />
 
-此时你需要手动打开文件，保留需要的代码，删除 Git 自动生成的 `<<<<<<<` 标记，然后重新提交。
+### 6.2 怎么解决冲突?
 
-至于**远程仓库 (Remote)**（比如 GitHub/GitLab），它就是云端的备份中心。
+**Step 1**:打开冲突文件,会看到这样的标记:
 
-- `git push`：把本地存档上传到云端。
-- `git pull`：把云端最新的存档拉取到本地。
+```text
+<<<<<<< HEAD
+你的代码
+=======
+队友的代码
+>>>>>>> feature-branch
+```
+
+**Step 2**:手动选择要保留的代码,或合并两者:
+
+```text
+# 保留你的代码 → 删除队友的部分和标记
+# 保留队友的 → 删除你的部分和标记
+# 合并两者 → 综合两边的代码
+```
+
+**Step 3**:删除所有标记,保存文件
+
+**Step 4**:重新提交
+
+```bash
+git add 解决冲突的文件
+git commit  # Git 会自动生成合并提交
+```
+
+::: tip 💡 避免冲突的最佳实践
+
+- **频繁沟通**:队友改同一个文件前,先打个招呼
+- **小步提交**:不要攒着大量代码最后才提交,增加冲突概率
+- **分支隔离**:不同功能用不同分支,减少直接冲突
+- **用 Pull Request**:合并前让队友 review,提前发现问题
+  :::
+
+### 6.3 远程仓库(Remote)
+
+**远程仓库**(比如 GitHub/GitLab)就是**云端的备份中心**。
 
 <GitRemoteDemo />
+
+**核心操作**:
+
+| 操作         | 命令                                           | 作用                     |
+| ------------ | ---------------------------------------------- | ------------------------ |
+| **关联远程** | `git remote add origin https://github.com/...` | 第一次连接云端           |
+| **推送**     | `git push -u origin main`                      | 把本地存档上传           |
+| **拉取**     | `git pull`                                     | 把云端最新存档下载并合并 |
+| **克隆**     | `git clone https://github.com/...`             | 复制整个仓库到本地       |
+
+::: tip 💡 push 和 pull 的区别
+
+- **push**:你的本地代码 → 云端(你改了东西,要同步给队友)
+- **pull**:云端代码 → 你的本地(队友改了东西,你要同步下来)
+
+**最佳实践**:每天开始工作前先`git pull`,下班前`git push`,这样减少冲突。
+:::
+
+---
+
+## 7. 总结:Git 的核心思想
+
+Git 不是简单的"版本备份",而是一个**完整的代码协作系统**:
+
+| 特性         | 解决的问题                      | 生活类比              |
+| ------------ | ------------------------------- | --------------------- |
+| **版本管理** | 代码改错了怎么办?               | 时光机,随时回退       |
+| **分支**     | 多人同时改同一个文件怎么办?     | 平行宇宙,互不干扰     |
+| **暂存区**   | 这次提交不想包含所有修改怎么办? | 快递盒,挑拣要寄的东西 |
+| **远程协作** | 怎么和队友共享代码?             | 云备份,随时随地同步   |
+| **冲突处理** | 真的改到同一行了怎么办?         | 智能合并 + 手动协调   |
+
+**学习建议**:
+
+1. **先用起来**:不要等"完全理解"再用,一边用一边理解
+2. **从简单开始**:个人项目先掌握`add/commit/push/pull`,团队项目再学分支
+3. **看 Git 图形化工具**:SourceTree、GitHub Desktop 等,可视化帮助理解
+4. **遇到问题不要慌**:Git 的设计就是为了让你能安全地尝试,大不了`git reset`
+
+---
+
+## 附录:名词速查表
+
+| 名词     | 英文       | 用人话解释                            |
+| -------- | ---------- | ------------------------------------- |
+| **仓库** | Repository | 存放所有版本历史的数据库              |
+| **提交** | Commit     | 一次完整的版本记录,像存档点           |
+| **分支** | Branch     | 独立的开发线,像平行宇宙               |
+| **合并** | Merge      | 把一个分支的改动整合到另一个分支      |
+| **冲突** | Conflict   | 同一行代码被修改多次,Git 不知道选哪个 |
+| **暂存** | Stage      | 把修改加入"准备提交"的列表            |
+| **远程** | Remote     | 云端的仓库副本(GitHub/GitLab)         |
+| **克隆** | Clone      | 复制整个远程仓库到本地                |
+| **推送** | Push       | 本地 → 远程,上传代码                  |
+| **拉取** | Pull       | 远程 → 本地,下载代码                  |
+| **检出** | Checkout   | 切换到某个分支或版本                  |
+| **HEAD** | -          | 当前所在的分支/版本的指针             |
diff --git a/docs/zh-cn/appendix/load-balancing.md b/docs/zh-cn/appendix/load-balancing.md
index 8b0b860..af93de0 100644
--- a/docs/zh-cn/appendix/load-balancing.md
+++ b/docs/zh-cn/appendix/load-balancing.md
@@ -1,497 +1,401 @@
-# 负载均衡与多实例部署示意图
+# 负载均衡与多实例部署
 
-> 💡 **学习指南**：本文将带你理解现代分布式系统中，如何通过负载均衡技术把流量"聪明地"分配到多个服务器实例上。我们会从四层/七层负载均衡讲起，逐步深入到健康检查、会话保持、自动扩缩容，最后到异地多活部署。建议你先阅读 [后端架构演进](./backend-evolution.md) 了解基本概念。
-
-在开始之前，建议你先补充两块"基础砖"：
-
-- **网络基础**：可以先阅读 [网络基础概念](./network-basics.md) 了解 TCP/IP、HTTP 等协议。
-- **容器与编排**：如果你还不熟悉 Docker 和 Kubernetes，可以先看 [容器化部署](./container-deployment.md)。
+::: tip 🎯 核心问题
+**当单台服务器扛不住时,如何把流量"聪明地"分配到多个服务器实例?** 负载均衡是现代分布式系统的"分发员"。本文通过真实案例(奶茶店收银、快递分拣、交通指挥)深入理解负载均衡的设计哲学和工程实践。
+:::
 
 ---
 
-## 0. 引言：当一台服务器扛不住的时候
+## 1. 为什么要"负载均衡"?
 
-<ClientOnly>
-  <LoadBalancerTypesDemo />
-</ClientOnly>
+### 1.1 从一个真实案例说起:某网站的架构演进
 
-想象你开了一家网红奶茶店。刚开业时，店里只有一个收银台，顾客排队点单，一切井然有序。但随着口碑传播，排队的人越来越多，一个收银台根本应付不过来——顾客等得不耐烦，抱怨连连，甚至有人转身离开。
+某创业公司在用户量快速增长时遇到了严重的性能问题:
 
-**这时候你有两个选择：**
+**场景还原:**
 
-1. **换一台更快的收银机（垂直扩展）**：但再快的机器也有极限，而且贵得离谱。
-2. **多开几个收银台，让顾客分流（水平扩展）**：每个收银台处理一部分顾客，整体效率大幅提升。
+```
+阶段一:单台服务器
+用户 → 服务器(1核2G)
+       ↓
+  日活1000 → 活跃时间:1000人同时访问
+       ↓
+问题:CPU 100%,响应慢,经常宕机
+```
 
-**负载均衡（Load Balancing）就是第二个方案的"总指挥"。** 它站在所有收银台前面，帮顾客决定："你去1号台，你去2号台..." 确保每个收银台的 workload 相对平均，不让任何一个台累垮。
+::: warning ⚠️ 单台服务器的致命问题
 
-<ClientOnly>
-  <IntroProblemReasonSolution />
-</ClientOnly>
+- **性能瓶颈**: CPU 100%,响应时间> 5秒
+- **单点故障**: 服务器挂了,整个网站不可用
+- **扩展困难**: 只能垂直升级(加CPU、内存),贵且有限
+  :::
+
+**改进后的架构(引入负载均衡):**
+
+```
+阶段二:多台服务器 + 负载均衡
+用户 → 负载均衡器(Nginx)
+       ↓
+     ├→ 服务器1 (1核2G)
+     ├→ 服务器2 (1核2G)
+     └→ 服务器3 (1核2G)
+```
+
+::: tip ✨ 改进后的效果
+
+- **性能提升**: 3台服务器并行处理,响应时间< 1秒
+- **高可用**: 1台服务器挂了,其他服务器继续服务
+- **水平扩展**: 需要更多性能?加服务器就行
+  :::
+
+### 1.2 负载均衡的生活化比喻
+
+**奶茶店收银台**
+
+想象你开了一家网红奶茶店:
+
+- **1个收银台**: 顾客排队,后面的人等不及,差评
+- **3个收银台**: 员工分配顾客到不同收银台,效率提升3倍
+
+**负载均衡就是"收银台分配员"**:
+
+- **用户**(顾客) → 请求服务
+- **负载均衡器**(分配员) → 把请求分配到不同服务器
+- **服务器**(收银台) → 处理请求
+
+<LoadBalancerTypesDemo />
 
 ---
 
-## 1. 负载均衡器的"分层": L4 vs L7
+## 2. 什么是负载均衡?
 
-就像快递分拣有"只看邮编"和"检查包裹内容"两种策略，负载均衡也分不同"层次"：
+### 2.1 四层负载均衡(L4):只看门牌号
 
-### 1.1 四层负载均衡（L4）："只看门牌号"
+**工作在传输层(TCP/UDP)**,就像快递小哥只看你家的**门牌号(IP地址+端口号)**,不关心你家是做什么。
 
-**工作在传输层（TCP/UDP）**，就像快递小哥只看你家的**门牌号（IP地址+端口号）**，不关心你家是做什么的。
+**特点:**
 
-**特点：**
-- **速度超快**：只做简单的地址转发，不解析数据包内容
-- **适用场景**：数据库连接、Redis缓存、长连接游戏服务器
-- **代表产品**：LVS（Linux Virtual Server）、AWS NLB、Azure Load Balancer
+- **速度超快**: 只做简单的地址转发,不解析数据包内容
+- **适用场景**: 数据库连接、Redis缓存、长连接游戏服务器
+- **代表产品**: LVS(Linux Virtual Server)、AWS NLB、Azure Load Balancer
 
-**真实案例：电商大促的流量入口**
+::: details 工作原理
 
-某头部电商在双11期间，使用L4负载均衡处理每秒数百万的TCP连接。由于L4不解析HTTP内容，处理速度极快，确保用户在秒杀开始瞬间就能建立连接，不因为负载均衡本身的处理延迟而错过抢购。
+```
+客户端请求 → L4负载均衡器 → 后端服务器
+              ↓
+         只看IP + Port
+              ↓
+         快速转发(不解包内容)
+```
 
-### 1.2 七层负载均衡（L7）："检查包裹内容"
+:::
 
-**工作在应用层（HTTP/HTTPS）**，就像快递小哥不仅看门牌号，还会**打开包裹检查内容**，根据内容决定怎么送。
+### 2.2 七层负载均衡(L7):检查包裹内容
 
-**特点：**
-- **智能路由**：可以根据URL路径、HTTP头、Cookie等做精细化路由
-- **高级功能**：SSL卸载、内容缓存、压缩、安全WAF
-- **适用场景**：Web应用、API网关、微服务架构
-- **代表产品**：Nginx、HAProxy、AWS ALB、Envoy
+**工作在应用层(HTTP/HTTPS)**,就像快递小哥不仅看门牌号,还会**打开包裹检查内容**,根据内容决定怎么送。
 
-**真实案例：SaaS平台的多租户路由**
+**特点:**
 
-某SaaS公司使用Nginx作为L7负载均衡，根据HTTP Header中的`X-Tenant-ID`将不同租户的数据请求路由到对应的数据库集群。tenant-a 的请求去 db-cluster-1，tenant-b 的请求去 db-cluster-2，实现了完全的数据隔离。
+- **智能路由**: 可以根据URL路径、HTTP头、Cookie等做精细化路由
+- **高级功能**: SSL卸载、内容缓存、压缩、安全WAF
+- **适用场景**: Web应用、API网关、微服务架构
+- **代表产品**: Nginx、HAProxy、AWS ALB、Envoy
 
-### 1.3 L4 vs L7 对比一览
+::: details 工作原理
 
-| 维度 | 四层负载均衡 (L4) | 七层负载均衡 (L7) |
-|:---|:---|:---|
-| **工作层级** | 传输层 (TCP/UDP) | 应用层 (HTTP/HTTPS) |
-| **决策依据** | IP地址 + 端口号 | URL、Header、Cookie、Body |
-| **处理速度** | 极快（内核态处理） | 较快（用户态解析） |
-| **功能丰富度** | 基础转发 | SSL卸载、缓存、压缩、WAF |
-| **典型场景** | 数据库、游戏、长连接 | Web应用、API网关、微服务 |
-| **代表产品** | LVS、AWS NLB | Nginx、HAProxy、AWS ALB |
+```
+客户端请求 → L7负载均衡器 → 解析HTTP内容
+              ↓
+         检查URL、Header、Cookie
+              ↓
+         智能路由到特定服务器
+```
+
+:::
+
+### 2.3 L4 vs L7 对比一览
+
+| 维度           | 四层负载均衡(L4)     | 七层负载均衡(L7)          |
+| :------------- | :------------------- | :------------------------ |
+| **工作层级**   | 传输层(TCP/UDP)      | 应用层(HTTP/HTTPS)        |
+| **决策依据**   | IP地址 + 端口号      | URL、Header、Cookie、Body |
+| **处理速度**   | 极快(内核态处理)     | 较快(用户态解析)          |
+| **功能丰富度** | 基础转发             | SSL卸载、缓存、压缩、WAF  |
+| **典型场景**   | 数据库、游戏、长连接 | Web应用、API网关、微服务  |
+| **代表产品**   | LVS、AWS NLB         | Nginx、HAProxy、AWS ALB   |
 
 ---
 
-## 2. 健康检查：别让"坏掉"的服务器继续接客
+## 3. 核心问题一:如何避免"坏掉"的服务器继续接客?
 
-想象一下，你的某个收银台突然坏了，但顾客不知道，还在源源不断地排过去。结果队伍越来越长，顾客怨声载道。
+### 3.1 健康检查:别让"生病"的服务器拖累系统
 
-**健康检查（Health Check）就是防止这种情况发生的"哨兵"。** 它定期"体检"每台服务器，发现"生病"的立即从队列中移除，等"康复"了再请回来。
+想象一下,你的某个收银台突然坏了,但分配员不知道,还在源源不断地把顾客分过去。结果队伍越来越长,顾客怨声载道。
 
-<ClientOnly>
-  <HealthCheckDemo />
-</ClientOnly>
+**健康检查(Health Check)就是防止这种情况发生的"哨兵"**。它定期"体检"每台服务器,发现"生病"的立即从队列中移除,等"康复"了再请回来。
 
-### 2.1 主动健康检查 vs 被动健康检查
+<!-- <HealthCheckDemo /> -->
 
-**主动健康检查（Active Health Check）**：负载均衡器主动"敲门"问服务器"你还在吗？"
-- 定期发送探测请求（如 HTTP /health、TCP ping）
+### 3.2 主动健康检查 vs 被动健康检查
+
+**主动健康检查(Active Health Check)**: 负载均衡器主动"敲门"问服务器"你还在吗?"
+
+- 定期发送探测请求(如 HTTP /health、TCP ping)
 - 响应超时或返回错误码则认为不健康
-- **优点**：检测结果准确可靠
-- **缺点**：产生额外的探测流量
+- **优点**: 检测结果准确可靠
+- **缺点**: 产生额外的探测流量
+
+**被动健康检查(Passive Health Check)**: 负载均衡器"观察"真实业务流量的响应情况
 
-**被动健康检查（Passive Health Check）**：负载均衡器"观察"真实业务流量的响应情况
 - 统计实际请求的响应时间、错误率
 - 连续多次失败则认为不健康
-- **优点**：不产生额外流量
-- **缺点**：需要足够的流量样本才能判定
-
-### 2.2 阈值设定：别让"小病"也触发告警
-
-健康检查的阈值就像体温计：37度是正常，38度是低烧，40度是高烧。
-
-**常见的阈值配置：**
+- **优点**: 不产生额外流量
+- **缺点**: 需要足够的流量样本才能判定
 
+::: details 阈值设定表
 | 指标 | 健康阈值 | 不健康阈值 | 说明 |
 |:---|:---|:---|:---|
-| **HTTP 状态码** | 200-399 | 400+ 或超时 | 4xx/5xx 都认为失败 |
-| **TCP 连接** | 成功建立 | 连接超时 | 检查端口是否可达 |
-| **响应时间** | < 500ms | > 2000ms | 超时时间通常设为2-5s |
+| **HTTP状态码** | 200-399 | 400+或超时 | 4xx/5xx都认为失败 |
+| **TCP连接** | 成功建立 | 连接超时 | 检查端口是否可达 |
+| **响应时间** | < 500ms | > 2000ms | 超时时间通常设为2-5秒 |
 | **连续失败次数** | - | 3次 | 避免单次抖动误判 |
 | **检查间隔** | - | 5s | 太频繁会增加负载 |
 
-**踩坑经验：阈值设置太"敏感"的教训**
+::: tip 💡 踸见坑:阈值设置太"敏感"
+某团队将健康检查的响应时间阈值设为100ms,而他们的应用平均响应时间在80-120ms之间波动。结果是服务器频繁被标记为"不健康",导致流量在健康和不健康之间反复横跳,系统整体可用率反而下降。
 
-某团队将健康检查的响应时间阈值设为 100ms，而他们的应用平均响应时间在 80-120ms 之间波动。结果是服务器频繁被标记为"不健康"，导致流量在健康和不健康之间反复横跳，系统整体可用率反而下降。
-
-**正确的做法：** 阈值应该设置为**P99 响应时间的 2-3 倍**，给正常波动留出足够的缓冲空间。
+**正确的做法**: 阈值应该设置为**P99响应时间的2-3倍**,给正常波动留出足够的缓冲空间。
+:::
 
 ---
 
-## 3. 会话保持：让"老顾客"一直找同一个"收银员"
+## 4. 核心问题二:如何保证"老顾客"一直找同一个"收银员"?
 
-想象你是奶茶店的常客，每次来都由同一个店员接待。她知道你的口味偏好（半糖、去冰），服务起来又快又贴心。但如果每次来都换一个新人，你得一遍遍重复同样的要求，效率大打折扣。
+### 4.1 会话保持:让"老顾客"一直找同一个"收银员"
 
-**会话保持（Session Persistence/Sticky Session）** 就是解决这个问题的方法：确保同一个用户的请求，始终被路由到同一台后端服务器。
+想象你是奶茶店的常客,每次来都由同一个店员接待。她知道你的口味偏好(半糖、去冰),服务起来又快又贴心。但如果每次来都换一个新人,你得一遍遍重复同样的要求,效率大打折扣。
 
-<ClientOnly>
-  <SessionPersistenceDemo />
-</ClientOnly>
+**会话保持(Session Persistence/Sticky Session)** 就是解决这个问题的方法:确保同一个用户的请求,始终被路由到同一台后端服务器。
 
-### 3.1 三种会话保持机制对比
+<SessionPersistenceDemo />
 
-| 机制 | 实现原理 | 优点 | 缺点 | 适用场景 |
-|:---|:---|:---|:---|:---|
-| **Cookie 插入** | LB在响应中插入Cookie，后续请求携带此Cookie | 不受IP变化影响，首次请求即可保持 | 客户端需支持Cookie，可能被禁用 | 电商购物车、登录态保持 |
-| **IP 哈希** | 对客户端IP做哈希计算，映射到特定服务器 | 无需客户端支持，无状态 | IP变化会丢失会话，难以均匀分布 | 无Cookie环境、WebSocket |
-| **粘性会话表** | LB维护会话到服务器的映射表 | 支持会话复制和故障转移 | 占用LB内存，需要额外同步 | 高可用要求严格的场景 |
+### 4.2 三种会话保持机制对比
 
-### 3.2 真实案例：电商大促期间的会话保持策略
+| 机制           | 实现原理                                  | 优点                            | 缺点                          | 适用场景                |
+| :------------- | :---------------------------------------- | :------------------------------ | :---------------------------- | :---------------------- |
+| **Cookie插入** | LB在响应中插入Cookie,后续请求携带此Cookie | 不受IP变化影响,首次请求即可保持 | 客户端需支持Cookie,可能被禁用 | 电商购物车、登录态保持  |
+| **IP哈希**     | 对客户端IP做哈希计算,映射到特定服务器     | 无需客户端支持,无状态           | IP变化会丢失会话,难以均匀分布 | 无Cookie环境、WebSocket |
+| **粘性会话表** | LB维护会话到服务器的映射表                | 支持会话复制和故障转移          | 占用LB内存,需要额外同步       | 高可用要求严格的场景    |
 
-某电商平台在大促期间面临以下挑战：
+::: tip 💡 使用建议
 
-1. **购物车数据需要保持**：用户可能跨多个页面添加商品，需要保证请求都落在同一台服务器，购物车数据才能正确累计。
-
-2. **秒杀场景下服务器动态扩容**：大促期间服务器数量从平时的10台动态扩展到50台。
-
-3. **部分服务器可能故障**：需要能够快速剔除故障节点，同时不影响用户会话。
-
-**他们的解决方案**：
-
-1. **采用 Cookie 插入机制**：负载均衡器（Nginx）在首次响应时设置 `SERVERID` Cookie，值为后端服务器的唯一标识。
-
-2. **会话表持久化**：将会话映射表存储在 Redis 集群中，即使某台 Nginx 重启，也能从 Redis 恢复会话映射关系。
-
-3. **故障转移策略**：当后端服务器健康检查失败时，将其从可用列表移除。对于已经绑定到该服务器的会话，下次请求时重新哈希分配到新的健康节点（牺牲一次会话保持，换取服务可用性）。
+- **Cookie插入**: 优先推荐,兼容性好
+- **IP哈希**: 只用于WebSocket等特殊场景
+- **粘性会话表**: 配合Cookie,提供故障转移能力
+  :::
 
 ---
 
-## 4. 部署策略：蓝绿部署与金丝雀发布
+## 5. 核心问题三:如何实现零停机部署?
 
-当新版本上线时，如何确保零停机？当新版本有 Bug 时，如何快速回滚？这涉及到两种经典的部署策略。
+### 5.1 蓝绿部署:"一键切换"的零停机发布
 
-### 4.1 蓝绿部署："一键切换"的零停机发布
+**核心思想**: 同时维护两套完全相同的生产环境(蓝环境和绿环境),但只有一个环境对外提供服务。
 
-**核心思想**：同时维护两套完全相同的生产环境（蓝环境和绿环境），但只有一个环境对外提供服务。
+<BlueGreenDeploymentDemo />
 
-<ClientOnly>
-  <BlueGreenDeploymentDemo />
-</ClientOnly>
+**工作流程:**
 
-**工作流程**：
-
-1. **初始状态**：蓝环境运行 v1.0（生产），绿环境待命。
-
-2. **部署新版本**：在绿环境部署 v1.1，进行内部冒烟测试。
-
-3. **切换流量**：将负载均衡器指向绿环境，流量瞬间切换到 v1.1。
-
-4. **监控观察**：观察绿环境运行状态，确认无异常。
-
-5. **保留旧版本**：蓝环境保持 v1.0 一段时间（如24小时），作为快速回滚的保险。
-
-**优缺点分析**：
+1. **初始状态**: 蓝环境运行v1.0(生产),绿环境待命。
+2. **部署新版本**: 在绿环境部署v1.1,进行内部冒烟测试。
+3. **切换流量**: 将负载均衡器指向绿环境,流量瞬间切换到v1.1。
+4. **监控观察**: 观察绿环境运行状态,确认无异常。
+5. **保留旧版本**: 蓝环境保持v1.0一段时间(如24小时),作为快速回滚的保险。
 
+::: tip ✨ 优缺点分析
 | 优点 | 缺点 |
 |:---|:---|
-| ✅ 零停机时间，切换在毫秒级完成 | ❌ 资源成本高，需要同时维护两套环境 |
-| ✅ 快速回滚，发现问题立即切回原环境 | ❌ 数据库Schema变更时需要特别处理兼容性 |
-| ✅ 新环境可完整测试后再接管流量 | ❌ 不适用于有状态服务（如WebSocket长连接） |
+| ✅ 零停机时间,切换在毫秒级完成 | ❌ 资源成本高,需要同时维护两套环境 |
+| ✅ 快速回滚,发现问题立即切回原环境 | ❌ 数据库Schema变更时需要特别处理兼容性 |
+| ✅ 新环境可完整测试后再接管流量 | ❌ 不适用于有状态服务(如WebSocket长连接) |
 
-**适用场景**：
-- 对可用性要求极高的金融、电商核心交易系统
-- 需要频繁发布但无法接受停机的 SaaS 服务
-- 有充足的硬件/云资源预算
+:::
 
-### 4.2 金丝雀发布："小步快跑"的灰度策略
+### 5.2 金丝雀发布:"小步快跑"的灰度策略
 
-金丝雀发布得名于历史上的"煤矿金丝雀"——矿工带着金丝雀下井，如果金丝雀出现异常，说明有毒气体泄漏，矿工立即撤离。在软件发布中，金丝雀发布就是先让一小部分用户试用新版本，观察没有问题后再逐步扩大范围。
+金丝雀发布得名于历史上的"煤矿金丝雀"——矿工带着金丝雀下井,如果金丝雀出现异常,说明有毒气体泄漏,矿工立即撤离。在软件发布中,金丝雀发布就是先让一小部分用户试用新版本,观察没有问题后再逐步扩大范围。
 
-<ClientOnly>
-  <CanaryReleaseDemo />
-</ClientOnly>
+<CanaryReleaseDemo />
 
-**核心思想**：
+**核心思想:**
 
-1. **小流量先行**：先将 1% 的流量导入新版本服务器。
-
-2. **观察指标**：持续监控错误率、延迟、业务关键指标。
-
-3. **逐步放量**：如果一切正常，逐步将比例提升到 5%、10%、25%、50%、100%。
-
-4. **快速回滚**：一旦发现异常，立即将所有流量切回旧版本。
-
-**金丝雀发布的优势：**
+1. **小流量先行**: 先将1%的流量导入新版本服务器。
+2. **观察指标**: 持续监控错误率、延迟、业务关键指标。
+3. **逐步放量**: 如果一切正常,逐步将比例提升到5%、10%、25%、50%、100%。
+4. **快速回滚**: 一旦发现异常,立即将所有流量切回旧版本。
 
+::: tip 💡 金丝雀发布的优势
 | 优势 | 说明 |
 |:---|:---|
-| 🎯 **风险可控** | 即使新版本有严重 Bug，也只影响少量用户 |
-| 📊 **真实验证** | 在真实生产环境验证，比测试环境更可靠 |
+| 🎯 **风险可控** | 即使新版本有严重Bug,也只影响少量用户 |
+| 📊 **真实验证** | 在真实生产环境验证,比测试环境更可靠 |
 | 🚀 **快速迭代** | 团队可以更自信地频繁发布新功能 |
 | 💰 **资源友好** | 不需要像蓝绿部署那样准备两套完整环境 |
 
-**金丝雀发布的典型流量分配策略：**
-
-```
-阶段 1 (5分钟):   1%  新版本  → 99% 旧版本
-阶段 2 (15分钟):  5%  新版本  → 95% 旧版本
-阶段 3 (30分钟):  10% 新版本  → 90% 旧版本
-阶段 4 (1小时):   25% 新版本  → 75% 旧版本
-阶段 5 (2小时):   50% 新版本  → 50% 旧版本
-阶段 6 (全量):    100%新版本
-```
-
-**注意**：每个阶段都需要持续监控关键指标，只有确认无异常后才进入下一阶段。
+:::
 
 ---
 
-## 5. 自动扩缩容：让系统自己"呼吸"
+## 6. 核心问题四:如何让系统自己"呼吸"?
 
-想象你开了一家餐厅。午餐高峰期需要10个服务员，但下午3点闲时只需要2个。如果一直维持10个人，人工成本爆炸；如果一直只有2个人，高峰期顾客等得不耐烦全跑了。
+### 6.1 自动扩缩容:让系统像餐厅一样"灵活排班"
 
-**自动扩缩容（Auto Scaling）就是让系统像餐厅一样"灵活排班"**——忙的时候自动加服务器，闲的时候自动减服务器。
+想象你开了一家餐厅:
 
-<ClientOnly>
-  <AutoScalingDemo />
-</ClientOnly>
+- **午餐高峰期**: 需要10个服务员,但下午3点闲时只需要2个
+- 如果一直维持10个\*\*: 人工成本爆炸
+- 如果一直只有2个: 高峰期顾客等不及,全跑了
 
-### 5.1 扩容指标的选择
+**自动扩缩容(Auto Scaling)** 就是让系统像餐厅一样"灵活排班"——忙的时候自动加服务器,闲的时候自动减服务器。
 
-自动扩缩容的核心是回答一个问题：**什么时候该加机器？什么时候该减机器？**
+<AutoScalingDemo />
 
-常见的决策指标：
+### 6.2 扩容指标的选择
 
-| 指标 | 扩容阈值 | 缩容阈值 | 适用场景 |
-|:---|:---|:---|:---|
-| **CPU 使用率** | > 70% | < 30% | 计算密集型应用 |
-| **内存使用率** | > 75% | < 40% | 内存密集型应用 |
-| **QPS (每秒请求数)** | > 1000/s | < 400/s | API 网关、Web 服务 |
-| **连接数** | > 5000 | < 1000 | 数据库、消息队列 |
-| **自定义业务指标** | 视业务而定 | 视业务而定 | 特定业务场景 |
+自动扩缩容的核心是回答一个问题:\*\* **什么时候该加机器?什么时候该减机器?**
 
-### 5.2 扩容策略的"坑"与"解"
+常见的决策指标:
 
-**踩坑1：扩容反应太慢，流量洪峰已经把系统打挂了**
+| 指标                | 扩容阈值   | 缩容阈值   | 适用场景         |
+| :------------------ | :--------- | :--------- | :--------------- |
+| **CPU使用率**       | > 70%      | < 30%      | 计算密集型应用   |
+| **内存使用率**      | > 75%      | < 40%      | 内存密集型应用   |
+| **QPS(每秒请求数)** | > 1000/s   | < 400/s    | API网关、Web服务 |
+| **连接数**          | > 5000     | < 1000     | 数据库、消息队列 |
+| **自定义业务指标**  | 视业务而定 | 视业务而定 | 特定业务场景     |
 
-某电商大促期间，设置 CPU > 80% 触发扩容，但监控采集有1分钟延迟，新实例启动需要3分钟。结果流量来得太快，扩容还没完成，服务器已经被打挂。
+::: tip 💡 扩容策略的"坑"与"解"
 
-**解决方案**：
-- **提前扩容**：基于历史数据预测流量高峰，提前30分钟开始扩容
-- **多级阈值**：设置 60% 预警（开始预热新实例）、70% 正式扩容、80% 紧急扩容
-- **快速扩容**：使用容器化部署，新实例30秒内启动（相比虚拟机3-5分钟）
+**坑1:扩容反应太慢,流量洪峰已经把系统打挂了**
 
-**踩坑2：扩容太激进，成本爆炸**
+某电商大促期间,设置CPU > 80%触发扩容,但监控采集有1分钟延迟,新实例启动需要3分钟。结果流量来得太快,扩容还没完成,服务器已经被打挂。
 
-某创业公司设置了激进的自动扩容策略：CPU > 50% 就扩容。结果一个正常的业务波动就触发了扩容，服务器数量从5台膨胀到30台，月底云账单吓哭了 CTO。
+**解决方案:**
 
-**解决方案**：
-- **设置扩容冷却时间**：一次扩容后，至少等待5分钟才能再次扩容
-- **设置最大实例数**：max = 当前实例数 × 2，防止无限膨胀
-- **区分突刺和趋势**：只有连续3个周期都超过阈值才扩容，避免单点突刺触发
+- **提前扩容**: 基于历史数据预测流量高峰,提前30分钟开始扩容
+- **多级阈值**: 设置60%预警(开始预热新实例)、70%正式扩容、80%紧急扩容
+- **快速扩容**: 使用容器化部署,新实例30秒内启动(相比虚拟机3-5分钟)
 
-**踩坑3：缩容太快，刚扩容的机器马上就缩了**
+**坑2:扩容太激进,成本爆炸**
 
-某团队设置了 CPU < 30% 缩容。扩容后流量还在消化，CPU 短暂回落到 25%，触发了缩容。刚缩完 CPU 又飙到 80%，又触发扩容——系统在"扩容-缩容-扩容"中疯狂震荡。
+某创业公司设置了激进的自动扩容策略:CPU > 50%就扩容。结果一个正常的业务波动就触发了扩容,服务器数量从5台膨胀到30台,月底云账单吓哭了CTO。
 
-**解决方案**：
-- **缩容更保守**：扩容阈值 70%，缩容阈值 25%，中间有足够的缓冲带
-- **缩容冷却时间更长**：扩容后至少等待10分钟才能缩容
-- **渐进式缩容**：一次只缩 1 台，观察后再决定要不要继续缩
+**解决方案:**
+
+- **设置扩容冷却时间**: 一次扩容后,至少等待5分钟才能再次扩容
+- **设置最大实例数**: max = 当前实例数 × 2,防止无限膨胀
+- **区分突刺和趋势**: 只有连续3个周期都超过阈值才扩容,避免单点突刺触发
+
+**坑3:缩容太快,刚扩容的机器马上就缩了**
+
+某团队设置了CPU < 30%缩容。扩容后流量还在消化,CPU短暂回落到25%,触发了缩容。刚缩完CPU又飙到80%,又触发扩容——系统在"扩容-缩容-扩容"中疯狂震荡。
+
+**解决方案:**
+
+- **缩容更保守**: 扩容阈值70%,缩容阈值25%,中间有足够的缓冲带
+- **缩容冷却时间更长**: 扩容后至少等待10分钟才能缩容
+- **渐进式缩容**: 一次只缩1台,观察后再决定要不要继续缩
+  :::
 
 ---
 
-## 6. 多区域部署：当"灾难"来临时
+## 7. 实战:如何选择负载均衡器?
 
-想象你的奶茶店生意火爆，但你只有一个店面。某天突如其来的暴雨把店淹了，你得停业整修两周。这两周里，所有顾客都跑去竞争对手那里了，等你重新开业，客源已经流失大半。
+### 7.1 主流负载均衡器对比
 
-**单点故障是系统架构中的"阿喀琉斯之踵"**。多区域部署（Multi-Region Deployment）就是解决这个问题的方法：在不同地理位置部署多个数据中心，即使一个区域完全不可用，其他区域也能继续提供服务。
+| 特性           | Nginx                           | HAProxy               | Envoy          | 云厂商负载均衡 |
+| -------------- | ------------------------------- | --------------------- | -------------- | -------------- |
+| **定位**       | 高性能反向代理/负载均衡         | 开源负载均衡          | 云原生代理     | 托管负载均衡   |
+| **性能**       | 极高(C语言,事件驱动)            | 高(事件驱动)          | 高(C++/Rust)   | 极高           |
+| **功能丰富度** | 基础负载均衡、静态文件、缓存    | 丰富的负载均衡算法    | 高级路由、观测 | 功能全面       |
+| **配置**       | 配置文件(nginx.conf)            | 配置文件(haproxy.cfg) | API/配置文件   | UI控制台       |
+| **扩展**       | C模块/Lua脚本                   | Lua脚本               | WASM/Filter    | 插件           |
+| **适用场景**   | 静态资源、七层负载均衡、SSL终结 | 七层负载均衡、高可用  | 服务网格、多云 | 快速上手       |
 
-<ClientOnly>
-  <MultiRegionDemo />
-</ClientOnly>
-
-### 6.1 异地多活架构的核心概念
-
-**主备模式（Active-Standby）**：
-- 只有一个区域对外提供服务（主），其他区域待命（备）
-- 备区实时同步数据，但不处理流量
-- 主区故障时，手动或自动切换到备区
-- **优点**：架构简单，数据一致性好
-- **缺点**：备区资源利用率低，切换时有中断
-
-**多活模式（Active-Active）**：
-- 多个区域同时对外提供服务
-- 用户请求被路由到最近的区域
-- 区域之间实时同步数据
-- **优点**：资源利用率高，故障影响小
-- **缺点**：架构复杂，数据一致性挑战大
-
-### 6.2 数据同步：多活架构的"阿喀琉斯之踵"
-
-多活架构最大的挑战是**数据一致性**。当两个区域同时处理写入请求时，如何保证数据不会冲突？
-
-**场景示例**：
-- 北京区域：用户A给账户充值 100 元，余额从 200 变为 300
-- 上海区域：几乎同时，用户A消费 50 元，余额从 200 变为 150
-
-如果两个区域分别执行后同步，最终余额应该是多少？300？150？还是其他值？
-
-**解决方案对比：**
-
-| 方案 | 原理 | 优点 | 缺点 | 适用场景 |
-|:---|:---|:---|:---|:---|
-| **主从复制** | 只有一个主库可写，从库只读 | 实现简单，数据一致性好 | 主库单点，跨地域延迟大 | 读多写少，对一致性要求高 |
-| **多主复制** | 多个主库可同时写，异步同步 | 写入性能高，就近写入 | 冲突解决复杂，可能丢数据 | 写入频繁，可接受短暂不一致 |
-| **分布式事务** | 使用 2PC/3PC/TCC 等协议保证跨库事务 | 强一致性 | 性能开销大，复杂度高 | 金融交易等对一致性要求极高 |
-| **CRDT（无冲突复制数据类型）** | 数学上保证无冲突的数据结构 | 自动合并，无需锁 | 数据类型受限，实现复杂 | 计数器、集合等特定场景 |
-
-**真实案例：全球电商平台的订单系统**
-
-某跨境电商在全球5个区域部署了数据中心。订单系统的架构设计如下：
-
-- **订单创建**：使用"分区路由"策略，根据用户ID哈希确定主处理区域，该区域负责订单创建和初始状态变更，避免跨区域的写入冲突。
-
-- **库存扣减**：使用分布式锁 + 乐观锁。库存数据以用户所在区域的副本为主，当跨区域访问时，先获取分布式锁，检查版本号，避免超卖。
-
-- **最终一致性**：非关键数据（如推荐、统计）采用异步同步，允许秒级的延迟；关键数据（如支付状态）采用强同步，确保跨区一致性。
-
-这套架构在实践中实现了 99.99% 的可用性，同时控制了跨区域同步的平均延迟在 100ms 以内。
-
----
-
-## 7. 实战模板：从零搭建负载均衡架构
-
-看完了理论，我们来动手实践。以下是一套可直接落地的架构方案。
-
-### 7.1 中小型 Web 应用的推荐架构
-
-**场景**：日活 10万 的电商平台，预算有限，团队规模 10人左右。
-
-**架构方案：**
+::: tip 💡 选型建议
+**决策树:**
 
 ```
-用户请求
-    ↓
-[DNS 轮询] 多地域就近访问
-    ↓
-[CDN] 静态资源缓存（图片、JS、CSS）
-    ↓
-[L7 负载均衡 - Nginx] SSL卸载、URL路由、限流
-    ↓
-[Web 服务器 - Node.js/Java] 业务逻辑处理
-    ↓
-[缓存层 - Redis Cluster] 会话、热点数据
-    ↓
-[数据库 - MySQL 主从] 读写分离
+选择负载均衡器:
+│
+├─ 只需要基础的四层负载均衡?
+│  ├─ 是 → LVS(开源免费)或 云厂商NLB
+│  └─ 否 → 继续
+│
+├─ 需要服务网格、多云部署?
+│  ├─ 是 → Envoy
+│  └─ 否 → 继续
+│
+├─ 需要极其复杂的配置和插件?
+│  ├─ 是 → HAProxy
+│  └─ 否 → 继续
+│
+├─ 需要高性能+简单配置?
+│  ├─ 是 → Nginx(首选)
+│  └─ 继续
+│
+├─ 想要托管运维?
+│  ├─ 是 → 云厂商负载均衡(AWS ALB、阿里SLB)
+│  └─ Nginx自建
 ```
 
-**关键配置：**
-
-**Nginx 负载均衡配置示例：**
-
-```nginx
-upstream backend {
-    # 加权轮询，性能好的服务器权重更高
-    server 10.0.1.10 weight=5;
-    server 10.0.1.11 weight=3;
-    server 10.0.1.12 weight=2 backup;  # backup 标记为备用
-
-    keepalive 32;  # 长连接复用
-}
-
-server {
-    listen 80;
-    server_name api.example.com;
-
-    # 健康检查
-    location /health {
-        access_log off;
-        return 200 "healthy\n";
-        add_header Content-Type text/plain;
-    }
-
-    # 限流配置
-    limit_req_zone $binary_remote_addr zone=api:10m rate=10r/s;
-
-    location /api/ {
-        limit_req zone=api burst=20 nodelay;
-
-        proxy_pass http://backend;
-        proxy_set_header Host $host;
-        proxy_set_header X-Real-IP $remote_addr;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-
-        # 会话保持配置（基于IP哈希）
-        # 注意：在 upstream 中配置 ip_hash; 代替加权轮询
-    }
-
-    # 静态资源缓存
-    location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
-        expires 30d;
-        add_header Cache-Control "public, immutable";
-    }
-}
-```
-
-### 7.2 系统架构演进建议
-
-**阶段一：起步期（日活 < 1万）**
-- 单台服务器部署
-- Nginx 做反向代理 + 负载均衡
-- 重点关注：监控告警、日志收集
-
-**阶段二：成长期（日活 1万-10万）**
-- 横向扩展：2-3 台 Web 服务器
-- 引入 Redis 做缓存和会话存储
-- MySQL 主从复制，读写分离
-- 引入 CDN 加速静态资源
-
-**阶段三：成熟期（日活 10万-100万）**
-- 多地域部署，就近访问
-- 引入消息队列削峰填谷
-- 数据库分库分表
-- 自动化运维：CI/CD、自动扩缩容
+:::
 
 ---
 
-## 8. 名词对照表
+## 8. 总结:负载均衡的核心思维
 
-| 英文术语 | 中文对照 | 解释 |
-|:---|:---|:---|
-| **Load Balancer** | 负载均衡器 | 将流量分发到多个后端服务器的设备或软件 |
-| **L4 Load Balancing** | 四层负载均衡 | 基于传输层（TCP/UDP）的负载均衡 |
-| **L7 Load Balancing** | 七层负载均衡 | 基于应用层（HTTP/HTTPS）的负载均衡 |
-| **Health Check** | 健康检查 | 定期检查后端服务器健康状态的机制 |
-| **Session Persistence** | 会话保持 | 确保同一用户的请求始终路由到同一台服务器 |
-| **Sticky Session** | 粘性会话 | 另一种称呼，同 Session Persistence |
-| **Blue-Green Deployment** | 蓝绿部署 | 两套环境切换的零停机发布策略 |
-| **Canary Release** | 金丝雀发布 | 小流量先行验证的灰度发布策略 |
-| **Auto Scaling** | 自动扩缩容 | 根据负载自动增加或减少服务器数量 |
-| **Horizontal Scaling** | 水平扩展 | 增加服务器数量来提升处理能力 |
-| **Vertical Scaling** | 垂直扩展 | 提升单机配置（CPU、内存）来提升处理能力 |
-| **Multi-Region** | 多区域 | 在多个地理区域部署服务 |
-| **Active-Active** | 多活 | 多个区域同时对外提供服务 |
-| **Active-Standby** | 主备 | 只有一个区域提供服务，其他待命 |
-| **Data Replication** | 数据同步 | 跨区域的数据复制机制 |
-| **RTO** | 恢复时间目标 | 系统故障后需要在多长时间内恢复 |
-| **RPO** | 恢复点目标 | 系统故障后可以接受的数据丢失量 |
+### 8.1 核心原则回顾
+
+| 原则     | 含义                       | 实践要点                              |
+| -------- | -------------------------- | ------------------------------------- |
+| **分层** | L4处理"快递分拣"(快但简单) | L4处理数据库、游戏;L7处理Web、API     |
+| **冗余** | 单点故障是架构的敌人       | 通过多实例、多区域部署提升可用性      |
+| **渐进** | 发布新版本不要"一刀切"     | 蓝绿部署实现零停机;金丝雀实现风险可控 |
+| **弹性** | 系统应该像生命体一样"呼吸" | 忙时自动扩容,闲时自动缩容             |
+
+### 8.2 设计检查清单
+
+在引入负载均衡前,问自己以下问题:
+
+- [ ] 是否真的需要负载均衡?(单机性能是否真的不够)
+- [ ] 选择L4还是L7?(根据业务场景)
+- [ ] 如何处理会话保持?(Cookie、IP哈希、会话表)
+- [ ] 如何实现健康检查?(主动、被动、阈值设置)
+- [ ] 如何实现零停机?(蓝绿部署、金丝雀)
+- [ ] 如何实现弹性?(扩缩指标、冷却时间、最大实例数)
 
 ---
 
-## 总结：负载均衡的核心思维
+## 9. 名词速查表
 
-通过本文的学习，我们可以提炼出负载均衡设计的几个核心思维：
-
-**1. 分层思维**
-- L4 处理"快递分拣"（快但简单）
-- L7 处理"内容检查"（慢但智能）
-- 根据场景选择合适的层次
-
-**2. 冗余思维**
-- 单点故障是架构的敌人
-- 通过多实例、多区域部署提升可用性
-- 健康检查确保"坏节点"及时剔除
-
-**3. 渐进思维**
-- 发布新版本不要"一刀切"
-- 蓝绿部署实现零停机
-- 金丝雀发布实现风险可控
-
-**4. 弹性思维**
-- 系统应该像生命体一样"呼吸"
-- 忙时自动扩容，闲时自动缩容
-- 多区域部署实现就近服务和容灾
-
-负载均衡不是简单的"流量分发"，而是一套关于**高可用、高性能、高弹性**的系统工程思维。希望本文能帮助你在实际工作中做出更好的架构决策。
+| 名词             | 英文                  | 解释                                     |
+| ---------------- | --------------------- | ---------------------------------------- | ------------------------------ |
+| **负载均衡器**   | Load Balancer         | 将流量分发到多个后端服务器的设备或软件   |
+| **四层负载均衡** | L4 Load Balancing     | 基于传输层(TCP/UDP)的负载均衡            |
+| **七层负载均衡** | L7 Load Balancing     | 基于应用层(HTTP/HTTPS)的负载均衡         |
+| **健康检查**     | Health Check          | 定期检查后端服务器的健康状态的机制       |
+| **会话保持**     | Session Persistence   | 确保同一用户的请求始终路由到同一台服务器 |
+| **粘性会话**     | Sticky Session        | 另一种称呼,同Session Persistence         |
+| **蓝绿部署**     | Blue-Green Deployment | 两套环境切换的零停机发布策略             |
+| **金丝雀发布**   | Canary Release        | 小流量先行验证的灰度发布策略             |
+| **自动扩缩容**   | Auto Scaling          | 根据负载自动增加或减少服务器数量         |
+| **水平扩展**     | Horizontal Scaling    | 增加服务器数量来提升处理能力             |
+| **垂直扩展**     | Vertical Scaling      | 提升单机配置(CPU、内存)来提升处理能力    |
+| **多区域**       | Multi-Region          | 在多个地理区域部署服务                   |
+| **多活**         | Active-Active         | 多个区域同时对外提供服务                 |
+| **主备**         | Active-Standby        | 只有一个区域提供服务,其他待命            |
+| **数据同步**     | Data Replication      | 跨区域的数据复制机制                     |
+| **RTO**          | RTO                   | 恢复时间目标                             | 系统故障后需要在多长时间内恢复 |
+| **RPO**          | RPO                   | 恢复点目标                               | 系统故障后可以接受的数据丢失量 |
diff --git a/docs/zh-cn/appendix/queue-design.md b/docs/zh-cn/appendix/queue-design.md
index 2b9896c..1fd2e69 100644
--- a/docs/zh-cn/appendix/queue-design.md
+++ b/docs/zh-cn/appendix/queue-design.md
@@ -1,341 +1,141 @@
-# 消息队列设计：从系统解耦到高可用架构
+# 消息队列设计:从系统解耦到高可用架构
 
-> 💡 **学习指南**：消息队列是现代分布式系统的"缓冲器"和"解耦器"。本章节从一个核心问题出发：**当系统耦合严重、流量突增时，如何保证核心链路稳定？** 我们将通过真实案例（淘宝订单、秒杀系统）深入理解消息队列的设计哲学和工程实践。
-
-在开始之前，建议你先了解以下基础概念：
-
-- **同步 vs 异步**：可以先阅读 [Web 基础概念](./web-basics.md) 的「HTTP 请求/响应」部分。
-- **分布式系统基础**：如果你还不了解 CAP 定理、一致性等概念，可以先看 [分布式系统入门](./distributed-systems.md)。
+::: tip 🎯 核心问题
+**当系统耦合严重、流量突增时,如何保证核心链路稳定?** 消息队列是现代分布式系统的"缓冲器"和"解耦器"。本文通过真实案例(餐厅叫号、快递分拣、秒杀系统)深入理解消息队列的设计哲学和工程实践。
+:::
 
 ---
 
-## 0. 引言：为什么系统耦合严重时会"一崩全崩"？
+## 1. 为什么要"消息队列"?
 
-很多团队在业务快速增长时都会遇到类似的困境：
+### 1.1 从一个真实案例说起:淘宝订单系统的演进
 
-- 一个下游服务挂掉，导致整个订单流程卡住；
-- 大促期间流量突增，数据库被瞬间打崩；
-- 新增一个业务模块，需要修改十几个上游服务；
-- 系统响应越来越慢，用户投诉"转圈圈"。
+2012年,淘宝订单系统遭遇了一次严重故障。双11零点,流量瞬间涌入,订单服务直接调用库存服务、支付服务、物流服务...整个链路像多米诺骨牌一样接连倒下。
 
-直觉上，我们会以为是：**"服务器不够强"**。
-但大多数时候，问题并不在于硬件性能，而在于系统架构的设计——**服务之间耦合太紧，缺乏有效的缓冲和解耦机制**。
-
-面对这些挑战，单纯依靠"加机器"已经捉襟见肘。我们需要一种更优雅的架构设计，来在服务之间建立"缓冲带"，让系统能够从容应对流量波动和服务故障。这正是**消息队列**试图解决的问题。
-
----
-
-## 1. 什么是消息队列？（定义 + 核心三要素）
-
-### 1.1 从一个真实案例说起：淘宝订单系统的演进
-
-2012 年，淘宝订单系统遭遇了一次严重故障。双 11 零点，流量瞬间涌入，订单服务直接调用库存服务、支付服务、物流服务... 整个链路像多米诺骨牌一样接连倒下。
-
-**当时的架构（紧耦合）：**
+**当时的架构(紧耦合):**
 
 ```
 用户下单 → 订单服务 → 同步调用库存服务 → 同步调用支付服务 → 同步调用物流服务
                     ↓                    ↓                    ↓
-                 响应 200ms            响应 500ms           响应 300ms
+                 响应 200ms           响应 500ms           响应 300ms
 ```
 
-**问题：**
-- 总响应时间 = 200 + 500 + 300 = 1000ms（用户等 1 秒）
-- 库存服务挂了，订单服务也挂
-- 支付服务慢了，整个链路被拖慢
-- 无法水平扩展，只能垂直加机器
+::: warning ⚠️ 紧耦合的致命问题
 
-**改进后的架构（引入消息队列）：**
+- **总响应时间** = 200 + 500 + 300 = 1000ms(用户等1秒)
+- **库存服务挂了** → 订单服务也挂(线程池耗尽)
+- **支付服务慢了** → 整个链路被拖慢
+- **无法水平扩展** → 只能垂直加机器(贵且有限)
+  :::
+
+**改进后的架构(引入消息队列):**
 
 ```
-用户下单 → 订单服务 → 发送"订单创建"消息 → 立即返回（50ms）
+用户下单 → 订单服务 → 发送"订单创建"消息 → 立即返回(50ms)
                               ↓
-                        消息队列（Kafka）
+                        消息队列(Kafka)
                               ↓
         ┌─────────────┬─────────────┬─────────────┐
         ▼             ▼             ▼             ▼
    库存服务      支付服务      物流服务      通知服务
-   （异步扣减）  （异步处理）  （异步创建）  （异步发送）
+   (异步扣减)  (异步处理)  (异步创建)  (异步发送)
 ```
 
-**改进后：**
-- 用户响应时间 = 50ms（体验提升 20 倍）
-- 库存服务挂了，消息暂存队列，恢复后继续处理
-- 支付服务慢了，不影响订单创建
-- 可以水平扩展消费者，提升处理能力
+::: tip ✨ 改进后的效果
 
-<MQArchitectureDemo />
+- **用户响应时间** = 50ms(体验提升20倍)
+- **库存服务挂了** → 消息暂存队列,恢复后继续处理
+- **支付服务慢了** → 不影响订单创建
+- **可以水平扩展** → 增加消费者实例即可
+  :::
 
-### 1.2 消息队列的核心三要素
+### 1.2 消息队列的生活化比喻
 
-从上面的案例可以看出，消息队列的本质是**在生产者和消费者之间建立一个"邮局"**。
+**餐厅叫号系统**
 
-#### 要素一：生产者（Producer）
+想象你去一家网红餐厅:
 
-**职责**：创建并发送消息到队列。
+- **没有叫号系统**: 顾客必须站在窗口等,窗口有限,后面的人排长队,餐厅压力大
+- **有叫号系统**: 点完餐给你一个号,你可以先坐下,叫到号了去取餐
 
-**关键设计要点**：
-- **发送方式**：同步发送（可靠但阻塞）vs 异步发送（高性能但需处理回调）
-- **消息确认**：等待 Broker 确认（At Least Once）vs 发送即忘（At Most Once）
-- **失败处理**：重试策略、本地日志备份、死信队列
+**消息队列就是软件系统的"叫号系统"**:
 
-```python
-# 生产者代码示例（带可靠发送）
-class OrderProducer:
-    def __init__(self, mq_connection):
-        self.mq = mq_connection
-        self.pending_messages = []  # 本地待确认消息
+- **生产者**(点餐的人) → 把消息(订单)放到队列
+- **队列**(叫号机) → 暂存消息
+- **消费者**(厨师) → 按自己的节奏处理消息
 
-    def send_order_created(self, order_data):
-        """发送订单创建消息（带可靠投递）"""
-        message = {
-            "event_type": "order.created",
-            "order_id": order_data["id"],
-            "user_id": order_data["user_id"],
-            "product_id": order_data["product_id"],
-            "amount": order_data["amount"],
-            "timestamp": time.time()
-        }
-
-        # 1. 先写入本地日志（防止发送失败丢失）
-        msg_record = {
-            "id": generate_uuid(),
-            "status": "PENDING",
-            "message": message,
-            "retry_count": 0,
-            "created_at": time.time()
-        }
-        self.save_to_local_log(msg_record)
-
-        try:
-            # 2. 发送消息到 MQ（异步发送 + 回调确认）
-            self.mq.send_async(
-                exchange="order.events",
-                routing_key="order.created",
-                body=message,
-                on_success=lambda: self.on_send_success(msg_record["id"]),
-                on_failure=lambda e: self.on_send_failure(msg_record["id"], e)
-            )
-
-            return {"success": True, "message_id": msg_record["id"]}
-
-        except Exception as e:
-            # 发送异常，等待定时任务重试
-            logger.error(f"消息发送异常：{e}")
-            return {"success": False, "error": str(e)}
-
-    def on_send_success(self, msg_id):
-        """发送成功回调"""
-        self.update_local_log_status(msg_id, "SENT")
-        logger.info(f"消息 {msg_id} 发送成功")
-
-    def on_send_failure(self, msg_id, error):
-        """发送失败回调"""
-        logger.error(f"消息 {msg_id} 发送失败：{error}")
-        # 状态保持 PENDING，等待定时任务重试
-```
-
-<ProducerConsumerDemo />
-
-#### 要素二：消费者（Consumer）
-
-**职责**：从队列获取消息并处理。
-
-**关键设计要点**：
-- **消费模式**：推模式（Push，Broker 主动推送）vs 拉模式（Pull，消费者主动拉取）
-- **消费确认**：自动 ACK（高效但可能丢消息）vs 手动 ACK（可靠但需处理超时）
-- **并发控制**：单线程顺序消费 vs 多线程并行消费
-- **失败处理**：重试策略、死信队列、补偿机制
-
-```python
-# 消费者代码示例（带可靠处理）
-class OrderConsumer:
-    def __init__(self, mq_connection, db_connection, redis_client):
-        self.mq = mq_connection
-        self.db = db_connection
-        self.redis = redis_client
-        self.processing_messages = {}  # 正在处理的消息（防重复）
-
-    def start(self):
-        """启动消费者"""
-        self.mq.consume(
-            queue="order.created.queue",
-            callback=self.handle_message,
-            prefetch_count=10,  # 预取 10 条，平衡吞吐量和内存
-            auto_ack=False     # 手动 ACK，保证可靠性
-        )
-
-    def handle_message(self, message):
-        """处理消息（带幂等性和异常处理）"""
-        msg_id = message.headers.get("message_id")
-
-        try:
-            # 1. 幂等性检查：是否正在处理或已处理
-            if self.is_duplicate(msg_id):
-                logger.warning(f"消息 {msg_id} 重复，跳过处理")
-                message.ack()  # 确认消息，避免重复投递
-                return
-
-            # 标记为正在处理
-            self.mark_processing(msg_id)
-
-            # 2. 解析消息
-            event_data = json.loads(message.body)
-            order_id = event_data["order_id"]
-            user_id = event_data["user_id"]
-            product_id = event_data["product_id"]
-
-            logger.info(f"开始处理订单 {order_id}")
-
-            # 3. 数据库事务处理
-            with self.db.transaction() as tx:
-                # 3.1 扣减库存（使用乐观锁防并发）
-                stock_result = tx.execute("""
-                    UPDATE products
-                    SET stock = stock - 1
-                    WHERE id = ? AND stock > 0
-                """, product_id)
-
-                if stock_result.affected_rows == 0:
-                    raise InsufficientStockException(f"商品 {product_id} 库存不足")
-
-                # 3.2 创建订单
-                tx.execute("""
-                    INSERT INTO orders (id, user_id, product_id, status, created_at)
-                    VALUES (?, ?, ?, 'CONFIRMED', NOW())
-                """, order_id, user_id, product_id)
-
-                # 3.3 记录库存变动日志
-                tx.execute("""
-                    INSERT INTO inventory_logs (order_id, product_id, change, created_at)
-                    VALUES (?, ?, -1, NOW())
-                """, order_id, product_id)
-
-            # 4. 更新 Redis 缓存
-            self.redis.hset(f"order:{order_id}", "status", "CONFIRMED")
-
-            # 5. 发送后续事件（如通知服务）
-            self.mq.publish(
-                exchange="order.events",
-                routing_key="order.confirmed",
-                body={"order_id": order_id, "user_id": user_id}
-            )
-
-            # 6. 标记为已处理并确认消息
-            self.mark_processed(msg_id)
-            message.ack()
-
-            logger.info(f"订单 {order_id} 处理成功")
-
-        except InsufficientStockException as e:
-            # 库存不足，业务逻辑失败，不重试
-            logger.warning(f"订单处理失败（库存不足）：{e}")
-            self.mark_processed(msg_id)
-            message.ack()  # 确认消息，避免重复
-
-        except RetryableException as e:
-            # 可重试异常（如网络超时）
-            logger.error(f"订单处理失败（可重试）：{e}")
-            retry_count = message.headers.get("retry_count", 0)
-
-            if retry_count < 3:
-                # 重新入队，增加重试计数
-                message.headers["retry_count"] = retry_count + 1
-                message.nack(requeue=True)
-            else:
-                # 超过重试次数，进入死信队列
-                logger.error(f"消息 {msg_id} 超过最大重试次数，进入死信队列")
-                self.mark_processed(msg_id)
-                message.nack(requeue=False)
-
-        except Exception as e:
-            # 未知异常，记录日志并进入死信队列
-            logger.critical(f"订单处理发生未知异常：{e}", exc_info=True)
-            self.mark_processed(msg_id)
-            message.nack(requeue=False)
-
-    def is_duplicate(self, msg_id):
-        """检查消息是否重复"""
-        # 1. 检查是否正在处理
-        if msg_id in self.processing_messages:
-            return True
-
-        # 2. 检查 Redis 中是否已处理
-        return self.redis.sismember("processed_messages", msg_id)
-
-    def mark_processing(self, msg_id):
-        """标记消息正在处理"""
-        self.processing_messages[msg_id] = time.time()
-
-    def mark_processed(self, msg_id):
-        """标记消息已处理"""
-        self.processing_messages.pop(msg_id, None)
-        # 存入 Redis Set，设置过期时间（如 24 小时）
-        self.redis.sadd("processed_messages", msg_id)
-        self.redis.expire("processed_messages", 24 * 3600)
-```
-
-#### 要素三：Broker（消息代理）
-
-**职责**：接收、存储、转发消息。
-
-**关键设计要点**：
-- **存储模型**：内存存储（低延迟）vs 磁盘存储（高可靠）
-- **复制策略**：主从复制、多副本同步
-- **高可用机制**：集群部署、自动故障转移
-- **扩展性**：分区（Partition）、分片（Sharding）
-
-```python
-# Broker 配置示例（Kafka 集群配置）
-kafka_config = {
-    # 集群节点配置
-    "bootstrap.servers": "kafka-1:9092,kafka-2:9092,kafka-3:9092",
-
-    # 生产者配置（可靠性优先）
-    "producer": {
-        "acks": "all",                    # 等待所有 ISR 副本确认
-        "retries": 3,                     # 发送失败重试 3 次
-        "retry.backoff.ms": 1000,         # 重试间隔 1 秒
-        "enable.idempotence": True,       # 启用幂等性，防止重复发送
-        "max.in.flight.requests.per.connection": 5,  # 允许 5 个未确认请求
-        "compression.type": "lz4",        # 消息压缩，提升吞吐
-        "batch.size": 16384,              # 批量发送大小 16KB
-        "linger.ms": 10                   # 最多等待 10ms 批量发送
-    },
-
-    # 消费者配置（平衡性能与可靠性）
-    "consumer": {
-        "group.id": "order-service-group",  # 消费者组 ID
-        "auto.offset.reset": "earliest",    # 无偏移量时从最早开始
-        "enable.auto.commit": False,        # 关闭自动提交，手动 ACK
-        "max.poll.records": 500,            # 单次拉取最大 500 条
-        "max.poll.interval.ms": 300000,     # 消费超时 5 分钟
-        "session.timeout.ms": 10000,        # 会话超时 10 秒
-        "heartbeat.interval.ms": 3000       # 心跳间隔 3 秒
-    },
-
-    # Topic 配置（分区与副本）
-    "topic": {
-        "order.events": {
-            "partitions": 12,           # 12 个分区，提升并行度
-            "replication.factor": 3,    # 3 个副本，保证高可用
-            "min.insync.replicas": 2,   # 至少 2 个副本同步才算写入成功
-            "retention.ms": 604800000  # 消息保留 7 天
-        }
-    }
-}
-```
+<PeakShavingDemo />
 
 ---
 
-## 2. 核心问题一：如何解耦系统，避免"牵一发而动全身"？
+## 2. 什么是消息队列?(定义 + 核心三要素)
 
-### 2.1 紧耦合的悲剧：一个服务挂了，全盘皆输
+### 2.1 什么是"消息队列"?
 
-**场景还原**：某电商平台的早期架构
+::: tip 🤔 术语解释
+**消息队列(Message Queue, MQ)** 是一个存储消息的容器,生产者把消息放进去,消费者从里面取消息处理。它实现了"异步通信"——发送方不需要等待接收方处理完成。
+
+**同步 vs 异步**:
+
+- **同步**: 像打电话,对方必须接听才能交流
+- **异步**: 像发微信,发了就行,对方有空再看
+
+这就像你给朋友打电话(同步) vs 发微信(异步)。
+:::
+
+### 2.2 消息队列的核心三要素
+
+#### 要素一:生产者(Producer)
+
+**职责**: 创建并发送消息到队列。
+
+**生活化比喻**: 生产者就像"寄件人",把信件(消息)送到邮局(队列)。
+
+::: details 关键设计要点
+
+- **发送方式**: 同步发送(可靠但阻塞) vs 异步发送(高性能但需处理回调)
+- **消息确认**: 等待 Broker 确认(At Least Once) vs 发送即忘(At Most Once)
+- **失败处理**: 重试策略、本地日志备份、死信队列
+  :::
+
+#### 要素二:消费者(Consumer)
+
+**职责**: 从队列获取消息并处理。
+
+**生活化比喻**: 消费者就像"收件人",从邮箱(队列)取出信件(消息)并处理。
+
+::: details 关键设计要点
+
+- **消费模式**: 推模式(Push,Broker主动推送) vs 拉模式(Pull,消费者主动拉取)
+- **消费确认**: 自动 ACK(高效但可能丢消息) vs 手动 ACK(可靠但需处理超时)
+- **并发控制**: 单线程顺序消费 vs 多线程并行消费
+- **失败处理**: 重试策略、死信队列、补偿机制
+  :::
+
+#### 要素三:Broker(消息代理)
+
+**职责**: 接收、存储、转发消息。
+
+**生活化比喻**: Broker 就像"邮局"或"快递中转站",负责接收、分拣、派送信件。
+
+::: details 关键设计要点
+
+- **存储模型**: 内存存储(低延迟) vs 磁盘存储(高可靠)
+- **复制策略**: 主从复制、多副本同步
+- **高可用机制**: 集群部署、自动故障转移
+- **扩展性**: 分区(Partition)、分片(Sharding)
+  :::
+
+---
+
+## 3. 核心问题一:如何解耦系统,避免"牵一发而动全身"?
+
+### 3.1 紧耦合的悲剧:一个服务挂了,全盘皆输
+
+**场景还原**: 某电商平台的早期架构
 
 ```
-订单服务直接调用下游服务：
+订单服务直接调用下游服务:
 ┌─────────────┐
 │  订单服务   │
 └──────┬──────┘
@@ -348,21 +148,21 @@ kafka_config = {
 └──────────┘ └──────────┘ └──────────┘ └──────────┘
 ```
 
-**痛点分析：**
-
+::: tip 📊 痛点分析表
 | 痛点 | 具体表现 | 后果 |
 |------|----------|------|
-| **级联故障** | 库存服务挂掉，订单服务同步调用超时 | 订单服务线程池耗尽，无法处理新请求 |
-| **响应延迟** | 必须等待所有下游服务响应 | 用户等待 1 秒以上，体验极差 |
-| **扩展困难** | 新增积分服务，需要修改订单服务代码 | 发布周期变长，风险增加 |
+| **级联故障** | 库存服务挂掉,订单服务同步调用超时 | 订单服务线程池耗尽,无法处理新请求 |
+| **响应延迟** | 必须等待所有下游服务响应 | 用户等待1秒以上,体验极差 |
+| **扩展困难** | 新增积分服务,需要修改订单服务代码 | 发布周期变长,风险增加 |
 | **资源浪费** | 订单服务必须等待短信服务 | 数据库连接被长时间占用 |
+:::
 
-### 2.2 解耦方案：引入消息队列作为"中间层"
+### 3.2 解耦方案:引入消息队列作为"中间层"
 
-**解耦后的架构：**
+**解耦后的架构:**
 
 ```
-订单服务只负责发消息，不关心谁消费：
+订单服务只负责发消息,不关心谁消费:
 
 ┌─────────────┐
 │  订单服务   │ ──发送"订单创建"消息──┐
@@ -385,123 +185,129 @@ kafka_config = {
        └──────────────┘      └──────────────┘      └──────────────┘
 ```
 
-**解耦带来的好处：**
-
-| 维度 | 解耦前 | 解耦后 |
-|------|--------|--------|
-| **故障隔离** | 库存挂 = 订单挂 | 库存挂，消息暂存队列，恢复后消费 |
-| **响应时间** | 1000ms（同步等待） | 50ms（发完消息即返回） |
-| **扩展性** | 新增服务需改订单代码 | 新增服务只需订阅主题 |
-| **系统复杂度** | 订单服务强依赖下游 | 订单服务只依赖消息队列 |
-
 <DecouplingDemo />
 
-### 2.3 解耦的本质：从"直接调用"到"事件驱动"
+::: tip ✨ 解耦的好处
+| 维度 | 解耦前 | 解耦后 |
+|------|--------|--------|
+| **故障隔离** | 库存挂 = 订单挂 | 库存挂,消息暂存队列,恢复后消费 |
+| **响应时间** | 1000ms(同步等待) | 50ms(发完消息即返回) |
+| **扩展性** | 新增服务需改订单代码 | 新增服务只需订阅主题 |
+| **系统复杂度** | 订单服务强依赖下游 | 订单服务只依赖消息队列 |
+:::
 
-**思维模式的转变：**
+### 3.3 解耦的本质:从"直接调用"到"事件驱动"
+
+**思维模式的转变:**
 
 ```
-传统思维（命令式）：
-"订单服务命令库存服务：给我扣库存！"
+传统思维(命令式):
+"订单服务命令库存服务:给我扣库存!"
   ↓ 直接调用
-  ↓ 耦合度高，被调用方必须在线
+  ↓ 耦合度高,被调用方必须在线
   ↓ 调用方需要知道被调用方的接口
 
-事件驱动思维（声明式）：
-"订单服务声明：订单已创建，谁关心谁来处理。"
+事件驱动思维(声明式):
+"订单服务声明:订单已创建,谁关心谁来处理。"
   ↓ 发送事件到消息队列
-  ↓ 解耦，消费者可以离线
+  ↓ 解耦,消费者可以离线
   ↓ 生产者不需要知道消费者的存在
 ```
 
 ---
 
-## 3. 核心问题二：如何削峰填谷，应对流量突增？
+## 4. 核心问题二:如何削峰填谷,应对流量突增?
 
-### 3.1 秒杀场景：10 万 QPS 如何平稳处理？
+### 4.1 秒杀场景:10万QPS如何平稳处理?
 
-**场景还原**：某电商平台双 11 秒杀活动，预计峰值 10 万 QPS，但数据库只能承受 1000 QPS。
+**场景还原**: 某电商平台双11秒杀活动,预计峰值10万QPS,但数据库只能承受1000 QPS。
 
-**直接冲击的后果：**
+**直接冲击的后果:**
 
 ```
 用户请求 ──→ 应用服务器 ──→ 数据库
-  10万/s       10万/s          1000/s（极限）
+  10万/s       10万/s          1000/s(极限)
                               ↓
                          连接池耗尽
                          响应超时
                          数据库崩溃
                               ↓
-                         雪崩效应（所有依赖数据库的服务都挂）
+                         雪崩效应(所有依赖数据库的服务都挂)
 ```
 
-### 3.2 削峰填谷方案：消息队列作为"蓄水池"
+::: tip 🌊 术语解释
+**QPS(Queries Per Second)**: 每秒查询数,衡量系统吞吐量的指标。
 
-**架构设计：**
+**10万QPS** 意味着每秒有10万个请求,就像10万人同时冲进商店。
+:::
+
+### 4.2 削峰填谷方案:消息队列作为"蓄水池"
+
+**架构设计:**
 
 ```
-┌───────────────────────────────────────────────────────────────┐
+┌───────────────────────────────────────────────────────────────────────┐
 │                        秒杀系统架构                           │
-├───────────────────────────────────────────────────────────────┤
+├───────────────────────────────────────────────────────────────────────┤
 │                                                               │
-│  第一层：网关层（硬限流）                                        │
-│  ┌───────────────────────────────────────────────────────┐  │
-│  │  - 令牌桶限流：10万/s → 1万/s（丢弃 90% 请求）          │  │
-│  │  - CDN 缓存静态资源（商品详情页）                       │  │
-│  │  - 验证码/排队页面（削峰第一层）                        │  │
-│  └───────────────────────────────────────────────────────┘  │
+│  第一层:网关层(硬限流)                                        │
+│  ┌───────────────────────────────────────────────────────────────┐  │
+│  │  - 令牌桶限流:10万/s → 1万/s(丢弃90%请求)          │  │
+│  │  - CDN 缓存静态资源(商品详情页)                       │  │
+│  │  - 验证码/排队页面(削峰第一层)                        │  │
+│  └───────────────────────────────────────────────────────────────┘  │
 │                            │                                 │
 │                            ▼                                 │
-│  第二层：服务层（软限流）                                        │
-│  ┌───────────────────────────────────────────────────────┐  │
-│  │  - Nginx 限流：1万/s → 5000/s                         │  │
-│  │  - Redis 预扣库存（原子操作）：                       │  │
+│  第二层:服务层(软限流)                                        │
+│  ┌───────────────────────────────────────────────────────────────┐  │
+│  │  - Nginx限流:1万/s → 5000/s                         │  │
+│  │  - Redis预扣库存(原子操作):                       │  │
 │  │    * 使用 Lua 脚本保证原子性                          │  │
 │  │    * 库存不足直接返回"已售罄"                         │  │
-│  │  - 生成订单令牌（排队凭证）                             │  │
-│  └───────────────────────────────────────────────────────┘  │
+│  │  - 生成订单令牌(排队凭证)                             │  │
+│  └───────────────────────────────────────────────────────────────┘  │
 │                            │                                 │
 │                            ▼                                 │
-│  第三层：消息队列层（核心削峰）                                   │
-│  ┌───────────────────────────────────────────────────────┐  │
-│  │  Kafka/RocketMQ：                                     │  │
-│  │  - 批量写入：5000/s → 1000/s（数据库承受能力）         │  │
-│  │  - 消息持久化：落盘保证不丢消息                         │  │
-│  │  - 多分区并行消费：提升吞吐量                           │  │
-│  │  - 消费位点管理：支持故障恢复                           │  │
+│  第三层:消息队列层(核心削峰)                                   │
+│  ┌───────────────────────────────────────────────────────────────┐  │
+│  │  Kafka/RocketMQ:                                     │  │
+│  │  - 批量写入:5000/s → 1000/s(数据库承受能力)         │  │
+│  │  - 消息持久化:落盘保证不丢消息                         │  │
+│  │  - 多分区并行消费:提升吞吐量                           │  │
+│  │  - 消费位点管理:支持故障恢复                           │  │
 │  │                                                       │  │
-│  │  关键指标监控：                                         │  │
-│  │  - 生产速率（Produce Rate）                             │  │
-│  │  - 消费速率（Consume Rate）                             │  │
-│  │  - 消息堆积（Lag）                                      │  │
-│  └───────────────────────────────────────────────────────┘  │
+│  │  关键指标监控:                                         │  │
+│  │  - 生产速率(Produce Rate)                             │  │
+│  │  - 消费速率(Consume Rate)                             │  │
+│  │  - 消息堆积(Lag)                                      │  │
+│  └───────────────────────────────────────────────────────────────┘  │
 │                            │                                 │
 │                            ▼                                 │
-│  第四层：消费层（异步处理）                                        │
-│  ┌───────────────────────────────────────────────────────┐  │
-│  │  订单处理消费者（多实例）：                              │  │
-│  │  - 从 Kafka 拉取消息（1000/s，匹配数据库能力）           │  │
-│  │  - 数据库事务：创建订单 + 扣减库存                        │  │
+│  第四层:消费层(异步处理)                                        │
+│  ┌───────────────────────────────────────────────────────────────┐  │
+│  │  订单处理消费者(多实例):                              │  │
+│  │  - 从 Kafka 拉取消息(1000/s,匹配数据库能力)           │  │
+│  │  - 数据库事务:创建订单 + 扣减库存                        │  │
 │  │  - 更新订单状态为"已创建"                               │  │
-│  │  - 发送订单创建成功通知（邮件/短信/推送）                  │  │
-│  │  - 确认消息消费（ACK）                                   │  │
+│  │  - 发送订单创建成功通知(邮件/短信/推送)                  │  │
+│  │  - 确认消息消费(ACK)                                   │  │
 │  │                                                         │  │
-│  │  消费者扩容策略：                                        │  │
-│  │  - 当 Lag > 10000 时，自动增加消费者实例                  │  │
-│  │  - 当 Lag < 1000 时，减少消费者实例（节省成本）           │  │
-│  └───────────────────────────────────────────────────────┘  │
+│  │  消费者扩容策略:                                        │  │
+│  │  - 当 Lag > 10000 时,自动增加消费者实例                  │  │
+│  │  - 当 Lag < 1000 时,减少消费者实例(节省成本)           │  │
+│  └───────────────────────────────────────────────────────────────┘  │
 │                                                               │
-└───────────────────────────────────────────────────────────────┘
+└───────────────────────────────────────────────────────────────────────┘
 ```
 
 <PeakShavingDemo />
 
-### 3.3 削峰填谷的数学原理
+### 4.3 削峰填谷的数学原理
 
-**流量平滑效果：**
+**流量平滑效果:**
 
 ```
-原始流量（尖峰）：                平滑后流量：
+原始流量(尖峰):                平滑后流量:
 
 10万/s │    ╱╲                  1000/s │████████████████
        │   ╱  ╲                        │
@@ -510,16 +316,16 @@ kafka_config = {
        └───────────────               └────────────────
        0s   1s   2s                   0s              20s
 
-原始：10万/s 峰值，持续 1 秒
-平滑：1000/s 恒定速率，持续 100 秒
+原始:10万/s 峰值,持续1秒
+平滑:1000/s 恒定速率,持续100秒
 ```
 
-**关键公式：**
+**关键公式:**
 
 ```
 队列长度 = 生产者速率 × 持续时间 - 消费者速率 × 持续时间
         = 100,000 × 1 - 1,000 × 1
-        = 99,000 条消息（峰值时队列堆积）
+        = 99,000 条消息(峰值时队列堆积)
 
 消费完所有消息所需时间 = 队列长度 / 消费者速率
                       = 99,000 / 1,000
@@ -528,291 +334,147 @@ kafka_config = {
 
 ---
 
-## 4. 核心问题三：如何保证消息不丢失、不重复、有序？
+## 5. 核心问题三:如何保证消息不丢失、不重复、有序?
 
-### 4.1 消息可靠性：三道防线
+### 5.1 消息可靠性:三道防线
 
-消息可能在三个环节丢失：生产者发送时、Broker 存储时、消费者处理时。
+消息可能在三个环节丢失:生产者发送时、Broker存储时、消费者处理时。
 
-#### 防线 1：生产者确认（Producer ACK）
+::: warning 🛡️ 三道防线
+**防线1:生产者确认(Producer ACK)**
 
-```python
-# 可靠的生产者实现
-class ReliableProducer:
-    def __init__(self, mq_connection, db_connection):
-        self.mq = mq_connection
-        self.db = db_connection
+- 发送消息时,等待 Broker 确认已收到
+- 如果没收到确认,重试或记录本地日志
 
-    def send_with_reliability(self, message):
-        """
-        可靠消息发送：本地日志 + 异步发送 + 定时重试
-        """
-        # 1. 生成消息 ID
-        msg_id = generate_uuid()
+**防线2:Broker持久化**
 
-        # 2. 先写本地数据库（本地事务）
-        with self.db.transaction() as tx:
-            tx.execute("""
-                INSERT INTO outgoing_messages
-                (id, topic, body, status, retry_count, created_at)
-                VALUES (?, ?, ?, 'PENDING', 0, NOW())
-            """, msg_id, message['topic'], json.dumps(message['body']))
+- 消息写入磁盘,而不是只在内存
+- 多副本同步,保证不丢数据
 
-        # 3. 异步发送消息
-        try:
-            self.mq.send_async(
-                topic=message['topic'],
-                body=message['body'],
-                headers={'msg_id': msg_id},
-                on_success=lambda: self.on_send_success(msg_id),
-                on_failure=lambda e: self.on_send_failure(msg_id, e)
-            )
-        except Exception as e:
-            # 发送异常，等待定时任务重试
-            logger.error(f"消息 {msg_id} 发送异常：{e}")
-```
+**防线3:消费者确认(Consumer ACK)**
 
-#### 防线 2：Broker 持久化
-
-```python
-# Kafka 生产者配置（可靠性优先）
-kafka_producer_config = {
-    # 1. ACK 配置（最关键）
-    "acks": "all",                    # 等待所有 ISR 副本确认
-
-    # 2. 重试配置
-    "retries": 3,                     # 发送失败重试 3 次
-    "retry.backoff.ms": 1000,         # 重试间隔 1 秒
-
-    # 3. 幂等性配置（防止重复发送）
-    "enable.idempotence": True,       # 启用幂等性生产者
-
-    # 4. 批量配置（吞吐 vs 延迟权衡）
-    "batch.size": 16384,              # 批量发送大小 16KB
-    "linger.ms": 10,                  # 最多等待 10ms 批量发送
-
-    # 5. 压缩配置
-    "compression.type": "lz4",         # 消息压缩，提升吞吐
-
-    # 6. 缓冲区配置
-    "buffer.memory": 33554432,       # 生产者缓冲区 32MB
-
-    # 7. 事务配置（原子性发送多条消息）
-    "transactional.id": "seckill-producer-1",
-}
-```
-
-#### 防线 3：消费者确认（Consumer ACK）
-
-```python
-# 消费者可靠处理代码
-
-# ACK 策略选择：
-ack_strategies = {
-    "auto_ack": {
-        "description": "自动确认，消息送达即确认",
-        "pros": ["性能最高", "代码最简单"],
-        "cons": ["消息可能在处理前丢失", "无法保证可靠性"],
-        "use_case": "日志收集等对可靠性要求不高的场景"
-    },
-
-    "manual_ack_sync": {
-        "description": "手动同步确认，处理成功后确认",
-        "pros": ["可靠性高", "可以控制确认时机"],
-        "cons": ["性能略低", "需要处理超时"],
-        "use_case": "订单处理、支付等对可靠性要求高的场景"
-    },
-
-    "manual_ack_async": {
-        "description": "手动异步确认，批量确认",
-        "pros": ["性能高", "可靠性平衡"],
-        "cons": ["实现复杂", "可能重复处理"],
-        "use_case": "日志处理、大数据等高吞吐场景"
-    }
-}
-
-# 推荐策略：手动同步确认 + 幂等性设计
-consumer_config = {
-    "auto_ack": False,              # 关闭自动确认
-    "prefetch_count": 10,           # 预取 10 条，平衡吞吐和内存
-    "max_retries": 3,               # 最大重试 3 次
-    "retry_backoff": [1, 5, 30],    # 退避策略：1秒、5秒、30秒
-    "dead_letter_enabled": True,    # 启用死信队列
-    "idempotency_enabled": True     # 启用幂等性检查
-}
-```
+- 处理完消息后,手动确认(ACK)
+- 如果处理失败,不确认,Broker重新投递
+  :::
 
 <ReliabilityDemo />
 
-### 4.2 如何处理消息重复消费？
+### 5.2 如何处理消息重复消费?
 
-消息重复可能在以下场景发生：
+**消息重复可能在以下场景发生:**
 
-1. **生产者重试**：生产者发送消息后未收到 ACK，重试发送同一条消息
-2. **消费者 ACK 超时**：消费者处理完成但 ACK 超时，Broker 重新投递
-3. **网络抖动**：消费者 ACK 未到达 Broker，Broker 认为未消费
-4. **消费者重启**：消费者重启后重新消费同一批消息
+1. **生产者重试**: 生产者发送消息后未收到ACK,重试发送同一条消息
+2. **消费者ACK超时**: 消费者处理完成但ACK超时,Broker重新投递
+3. **网络抖动**: 消费者ACK未到达Broker,Broker认为未消费
+4. **消费者重启**: 消费者重启后重新消费同一批消息
 
-**解决方案：幂等性设计**
+::: tip 💡 幂等性
+**幂等性**: 同一操作执行多次和执行一次的效果相同。
 
-**核心思想**：同一操作执行多次和执行一次的效果相同。
+**生活中的幂等性**:
+
+- **幂等**: 按电梯按钮(按10次和按1次,电梯都会来)
+- **非幂等**: 转账(转10元,执行两次会转20元)
+
+**技术解决方案**: 为每条消息生成唯一ID,处理前检查是否已处理过。
+:::
 
 <IdempotenceDemo />
 
-**幂等性实现方案对比：**
-
-```python
-# 方案对比
-idempotency_solutions = {
-    "database_unique_constraint": {
-        "name": "数据库唯一约束",
-        "implementation": "UNIQUE 索引 + INSERT IGNORE",
-        "pros": ["简单可靠", "数据库保证原子性"],
-        "cons": ["需要数据库支持", "写入性能有损耗"],
-        "use_case": "订单创建、用户注册等核心业务流程"
-    },
-
-    "redis_setnx": {
-        "name": "Redis SETNX",
-        "implementation": "SET key value NX EX",
-        "pros": ["高性能", "支持过期时间"],
-        "cons": ["需要额外 Redis 资源", "极端情况下可能不一致"],
-        "use_case": "高并发场景下的幂等性检查"
-    },
-
-    "token_bucket": {
-        "name": "业务令牌",
-        "implementation": "前端生成唯一 Token，服务端校验",
-        "pros": ["前端友好", "可防重放攻击"],
-        "cons": ["需要 Token 生成策略", "Token 可能被盗用"],
-        "use_case": "表单提交、支付确认等用户交互场景"
-    },
-
-    "state_machine": {
-        "name": "状态机",
-        "implementation": "定义状态流转规则，拒绝非法状态变更",
-        "pros": ["业务语义清晰", "天然支持幂等"],
-        "cons": ["设计复杂", "需要维护状态图"],
-        "use_case": "订单状态流转、工作流引擎等复杂业务"
-    }
-}
-```
-
 ---
 
-## 5. 实战：完整的消息队列架构设计
+## 6. 实战:如何选择消息队列?
 
-### 5.1 四大主流消息队列选型对比
+### 6.1 四大主流消息队列对比
 
-| 特性 | RabbitMQ | Kafka | RocketMQ | Redis Stream |
-|------|----------|-------|----------|--------------|
-| **定位** | 传统消息队列 | 分布式日志流 | 电商级消息队列 | 轻量级队列 |
-| **吞吐量** | ~1 万/秒 | ~100 万/秒 | ~10 万/秒 | ~5 万/秒 |
-| **延迟** | 微秒级 | 毫秒级 | 毫秒级 | 毫秒级 |
-| **可靠性** | 高（持久化） | 高（多副本） | 高（同步刷盘） | 中（AOF） |
-| **消息回溯** | 不支持 | 支持 | 支持 | 支持 |
-| **事务消息** | 支持（弱） | 不支持 | 支持（强） | 不支持 |
-| **延迟消息** | 支持 | 不支持 | 支持 | 不支持 |
-| **适用场景** | 传统企业应用 | 日志、大数据 | 电商、金融 | 小规模应用 |
+| 特性         | RabbitMQ     | Kafka        | RocketMQ       | Redis Stream |
+| ------------ | ------------ | ------------ | -------------- | ------------ |
+| **定位**     | 传统消息队列 | 分布式日志流 | 电商级消息队列 | 轻量级队列   |
+| **吞吐量**   | ~1万/秒      | ~100万/秒    | ~10万/秒       | ~5万/秒      |
+| **延迟**     | 微秒级       | 毫秒级       | 毫秒级         | 毫秒级       |
+| **可靠性**   | 高(持久化)   | 高(多副本)   | 高(同步刷盘)   | 中(AOF)      |
+| **消息回溯** | 不支持       | 支持         | 支持           | 支持         |
+| **事务消息** | 支持(弱)     | 不支持       | 支持(强)       | 不支持       |
+| **延迟消息** | 支持         | 不支持       | 支持           | 不支持       |
+| **适用场景** | 传统企业应用 | 日志、大数据 | 电商、金融     | 小规模应用   |
 
-<MQComparisonDemo />
-
-### 5.2 选型决策树
+::: tip 💡 选型建议
+**决策树:**
 
 ```
-选择消息队列：
+选择消息队列:
 │
-├─ 需要事务消息（分布式事务）？
-│  ├─ 是 → RocketMQ（首选）或 RabbitMQ
+├─ 需要事务消息(分布式事务)?
+│  ├─ 是 → RocketMQ(首选)或 RabbitMQ
 │  └─ 否 → 继续
 │
-├─ 需要处理海量日志/实时流？
-│  ├─ 是 → Kafka（首选）
+├─ 需要处理海量日志/实时流?
+│  ├─ 是 → Kafka(首选)
 │  └─ 否 → 继续
 │
-├─ QPS > 1万/秒？
+├─ QPS > 1万/秒?
 │  ├─ 是 → RocketMQ 或 Kafka
 │  └─ 否 → 继续
 │
-├─ 需要复杂路由（如 headers 匹配）？
+├─ 需要复杂路由(如 headers 匹配)?
 │  ├─ 是 → RabbitMQ
 │  └─ 否 → 继续
 │
-├─ 已有 Redis 基础设施？
-│  ├─ 是 → Redis Stream（快速开始）
-│  └─ 否 → RabbitMQ（功能全面，学习曲线适中）
-│
+├─ 已有 Redis 基础设施?
+│  ├─ 是 → Redis Stream(快速开始)
+│  └─ 否 → RabbitMQ(功能全面,学习曲线适中)
 ```
 
+:::
+
 ---
 
-## 6. 总结：消息队列设计心法
+## 7. 总结:消息队列设计心法
 
-### 6.1 核心原则回顾
+### 7.1 核心原则回顾
 
-| 原则 | 含义 | 实践要点 |
-|------|------|----------|
-| **解耦** | 服务间不直接依赖 | 通过消息队列通信，消费者故障不影响生产者 |
-| **削峰** | 平滑流量波动 | 消息队列作为蓄水池，消费者按恒定速率处理 |
-| **可靠** | 消息不丢失 | 生产者确认 + Broker 持久化 + 消费者确认 |
-| **幂等** | 重复消费无影响 | 业务层面保证幂等性（唯一键、状态机） |
-| **有序** | 消息顺序保证 | 单分区有序或消费者端排序 |
+| 原则     | 含义             | 实践要点                                |
+| -------- | ---------------- | --------------------------------------- |
+| **解耦** | 服务间不直接依赖 | 通过消息队列通信,消费者故障不影响生产者 |
+| **削峰** | 平滑流量波动     | 消息队列作为蓄水池,消费者按恒定速率处理 |
+| **可靠** | 消息不丢失       | 生产者确认 + Broker持久化 + 消费者确认  |
+| **幂等** | 重复消费无影响   | 业务层面保证幂等性(唯一键、状态机)      |
+| **有序** | 消息顺序保证     | 单分区有序或消费者端排序                |
 
-### 6.2 设计检查清单
+### 7.2 设计检查清单
 
-在引入消息队列前，问自己以下问题：
+在引入消息队列前,问自己以下问题:
 
-- [ ] 是否真的需要消息队列？（简单异步可以用线程池）
-- [ ] 消息丢失是否可以接受？（决定可靠性级别）
-- [ ] 消息重复是否会影响业务？（决定幂等性投入）
-- [ ] 消息顺序是否重要？（决定分区策略）
-- [ ] 消费者处理能力如何？（决定队列大小和告警阈值）
-- [ ] 如何处理消费失败？（决定重试和死信策略）
-
-### 6.3 学习路径推荐
-
-```
-入门阶段（1-2 周）：
-├── 理解消息队列核心概念（生产者、消费者、Broker）
-├── 选择一种消息队列上手（推荐 RabbitMQ 或 Redis Stream）
-└── 实现第一个"生产者-消费者" Demo
-
-进阶阶段（2-4 周）：
-├── 深入学习一种消息队列的高级特性
-│   ├── Kafka：分区、副本、消费者组
-│   └── RocketMQ：事务消息、延迟消息
-├── 实现可靠消息投递（ACK 机制、重试策略）
-└── 实现幂等性消费
-
-实战阶段（1-2 月）：
-├── 设计一个完整的秒杀系统（削峰填谷）
-├── 设计一个订单系统（解耦、最终一致性）
-└── 搭建消息队列监控告警体系
-```
+- [ ] 是否真的需要消息队列?(简单异步可以用线程池)
+- [ ] 消息丢失是否可以接受?(决定可靠性级别)
+- [ ] 消息重复是否会影响业务?(决定幂等性投入)
+- [ ] 消息顺序是否重要?(决定分区策略)
+- [ ] 消费者处理能力如何?(决定队列大小和告警阈值)
+- [ ] 如何处理消费失败?(决定重试和死信策略)
 
 ---
 
-## 7. 名词速查表 (Glossary)
+## 8. 名词速查表
 
-| 名词 | 全称 | 解释 |
-|------|------|------|
-| **MQ** | Message Queue | **消息队列**。用于异步通信的中间件，实现生产者和消费者的解耦。 |
-| **Producer** | - | **生产者**。发送消息的一方。 |
-| **Consumer** | - | **消费者**。接收并处理消息的一方。 |
-| **Broker** | - | **消息代理**。存储和转发消息的服务端程序。 |
-| **Topic** | - | **主题**。消息的逻辑分类（如 "orders"）。 |
-| **Queue** | - | **队列**。存储消息的物理容器。 |
-| **Partition** | - | **分区**。Kafka 的概念，一个 Topic 可以分成多个 Partition，提升并发。 |
-| **ACK** | Acknowledgment | **确认**。消费者处理完消息后，向 Broker 确认。 |
-| **Pub/Sub** | Publish/Subscribe | **发布订阅**。一种消息模式，一条消息可被多个消费者接收。 |
-| **P2P** | Point-to-Point | **点对点**。一种消息模式，一条消息只能被一个消费者接收。 |
-| **DLQ** | Dead Letter Queue | **死信队列**。存放无法消费的消息。 |
-| **Idempotence** | - | **幂等性**。多次执行结果相同。 |
-| **Throughput** | - | **吞吐量**。单位时间内处理的消息数量。 |
-| **Latency** | - | **延迟**。消息从发送到被接收的时间差。 |
-| **Persistence** | - | **持久化**。消息写入磁盘，而非仅存内存。 |
-| **Replication** | - | **副本**。为了高可用，消息被复制到多个节点。 |
-| **Transaction Message** | - | **事务消息**。保证本地事务和消息发送的一致性。 |
-| **Backpressure** | - | **背压**。消费者处理不过来时，通知生产者降速。 |
-| **Offset** | - | **偏移量**。消费者在分区中的消费位置。 |
-| **Rebalance** | - | **重平衡**。消费者组成员变化时，重新分配分区。 |
+| 名词                    | 全称              | 解释                                                            |
+| ----------------------- | ----------------- | --------------------------------------------------------------- |
+| **MQ**                  | Message Queue     | **消息队列**。用于异步通信的中间件,实现生产者和消费者的解耦。   |
+| **Producer**            | -                 | **生产者**。发送消息的一方。                                    |
+| **Consumer**            | -                 | **消费者**。接收并处理消息的一方。                              |
+| **Broker**              | -                 | **消息代理**。存储和转发消息的服务端程序。                      |
+| **Topic**               | -                 | **主题**。消息的逻辑分类(如 "orders")。                         |
+| **Queue**               | -                 | **队列**。存储消息的物理容器。                                  |
+| **Partition**           | -                 | **分区**。Kafka的概念,一个Topic可以分成多个Partition,提升并发。 |
+| **ACK**                 | Acknowledgment    | **确认**。消费者处理完消息后,向Broker确认。                     |
+| **Pub/Sub**             | Publish/Subscribe | **发布订阅**。一种消息模式,一条消息可被多个消费者接收。         |
+| **P2P**                 | Point-to-Point    | **点对点**。一种消息模式,一条消息只能被一个消费者接收。         |
+| **DLQ**                 | Dead Letter Queue | **死信队列**。存放无法消费的消息。                              |
+| **Idempotence**         | -                 | **幂等性**。多次执行结果相同。                                  |
+| **Throughput**          | -                 | **吞吐量**。单位时间内处理的消息数量。                          |
+| **Latency**             | -                 | **延迟**。消息从发送到被接收的时间差。                          |
+| **Persistence**         | -                 | **持久化**。消息写入磁盘,而非仅存内存。                         |
+| **Replication**         | -                 | **副本**。为了高可用,消息被复制到多个节点。                     |
+| **Transaction Message** | -                 | **事务消息**。保证本地事务和消息发送的一致性。                  |
+| **Backpressure**        | -                 | **背压**。消费者处理不过来时,通知生产者降速。                   |
+| **Offset**              | -                 | **偏移量**。消费者在分区中的消费位置。                          |
+| **Rebalance**           | -                 | **重平衡**。消费者组成员变化时,重新分配分区。                   |
diff --git a/docs/zh-cn/appendix/url-to-browser.md b/docs/zh-cn/appendix/url-to-browser.md
index f27aa73..2fdddcd 100644
--- a/docs/zh-cn/appendix/url-to-browser.md
+++ b/docs/zh-cn/appendix/url-to-browser.md
@@ -2,11 +2,6 @@
 
 <script setup>
 import UrlToBrowserQuickStart from '../../.vitepress/theme/components/appendix/url-to-browser/UrlToBrowserQuickStart.vue'
-import UrlParserDemo from '../../.vitepress/theme/components/appendix/url-to-browser/UrlParserDemo.vue'
-import DnsLookupDemo from '../../.vitepress/theme/components/appendix/url-to-browser/DnsLookupDemo.vue'
-import TcpHandshakeDemo from '../../.vitepress/theme/components/appendix/url-to-browser/TcpHandshakeDemo.vue'
-import HttpExchangeDemo from '../../.vitepress/theme/components/appendix/url-to-browser/HttpExchangeDemo.vue'
-import BrowserRenderingDemo from '../../.vitepress/theme/components/appendix/url-to-browser/BrowserRenderingDemo.vue'
 </script>
 
 > **学习指南**：本章节无需编程基础。我们将用**"网购"**的生活化比喻，配合**真实的技术过程**，带你一步步理解浏览器如何将一行网址变成丰富多彩的页面。
@@ -16,6 +11,7 @@ import BrowserRenderingDemo from '../../.vitepress/theme/components/appendix/url
 ## 0. 引言：当你按下回车键的那一刻
 
 想象你正在进行一次**网购**。你需要：
+
 1. **填写订单**（选好商品，确认收货地址）
 2. **系统查找仓库**（根据店铺名找到具体的发货仓库）
 3. **建立物流通道**（确保仓库正常营业且能发货）
@@ -35,6 +31,7 @@ import BrowserRenderingDemo from '../../.vitepress/theme/components/appendix/url
 ### 生活比喻：填写购物单
 
 假设你只在订单上写"买鞋子"，仓库肯定不知道发哪双。你需要写清楚：
+
 - **店铺类型**（官方旗舰店/普通店）
 - **店铺名称**（Nike 官方店）
 - **商品位置**（男鞋区/跑鞋系列）
@@ -45,14 +42,14 @@ import BrowserRenderingDemo from '../../.vitepress/theme/components/appendix/url
 
 **URL（Uniform Resource Locator，统一资源定位符）**就是浏览器世界的"商品定位码"。当你在地址栏输入 `https://www.example.com:8080/path/page.html?id=123#section`，浏览器会立即拆解它：
 
-| URL 部分 | 示例值 | 网购类比 | 技术作用 |
-|----------|--------|-----------|----------|
-| **协议** `https://` | 安全超文本传输协议 | **物流方式**：保密配送（HTTPS）vs 普通配送（HTTP） | 决定使用什么规则通信。`http` 是普通传输，`https` 是加密传输 |
-| **域名** `www.example.com` | 服务器的人类可读名字 | **店铺名称**：京东超市 | 告诉浏览器要找哪台服务器。域名是为了让人记住，最终要转换成 IP 地址 |
-| **端口** `:8080` | 服务器的具体"门牌号" | **柜台编号**：3号柜台（默认不写） | 服务器上可能有多个服务，端口指定访问哪一个。HTTP 默认 80，HTTPS 默认 443 |
-| **路径** `/path/page.html` | 服务器上的文件位置 | **货架位置**：日用品区/第三排 | 指定服务器上的具体资源位置 |
-| **查询参数** `?id=123` | 附加信息 | **订单备注**：红色、XL码 | 传递给服务器的额外数据，如搜索关键词、页码等 |
-| **锚点** `#section` | 页面内的位置 | **说明书页码**：翻到第5页 | 页面加载后自动滚动到指定位置，不发送给服务器 |
+| URL 部分                   | 示例值               | 网购类比                                           | 技术作用                                                                 |
+| -------------------------- | -------------------- | -------------------------------------------------- | ------------------------------------------------------------------------ |
+| **协议** `https://`        | 安全超文本传输协议   | **物流方式**：保密配送（HTTPS）vs 普通配送（HTTP） | 决定使用什么规则通信。`http` 是普通传输，`https` 是加密传输              |
+| **域名** `www.example.com` | 服务器的人类可读名字 | **店铺名称**：京东超市                             | 告诉浏览器要找哪台服务器。域名是为了让人记住，最终要转换成 IP 地址       |
+| **端口** `:8080`           | 服务器的具体"门牌号" | **柜台编号**：3号柜台（默认不写）                  | 服务器上可能有多个服务，端口指定访问哪一个。HTTP 默认 80，HTTPS 默认 443 |
+| **路径** `/path/page.html` | 服务器上的文件位置   | **货架位置**：日用品区/第三排                      | 指定服务器上的具体资源位置                                               |
+| **查询参数** `?id=123`     | 附加信息             | **订单备注**：红色、XL码                           | 传递给服务器的额外数据，如搜索关键词、页码等                             |
+| **锚点** `#section`        | 页面内的位置         | **说明书页码**：翻到第5页                          | 页面加载后自动滚动到指定位置，不发送给服务器                             |
 
 <UrlParserDemo />
 
@@ -65,6 +62,7 @@ import BrowserRenderingDemo from '../../.vitepress/theme/components/appendix/url
 ### 生活比喻：查仓库地址
 
 你下单写的是"Nike 官方店"，但物流系统不知道仓库在哪。它需要查地址簿：
+
 1. 先查**常用地址**（最近买过这家吗）→ 浏览器缓存
 2. 没有的话问**小区快递点**（他们知道大区域的分配）→ 本地 DNS 服务器
 3. 问**总部调度中心**（知道.com类店铺归谁管）→ 根域名服务器
@@ -89,6 +87,7 @@ import BrowserRenderingDemo from '../../.vitepress/theme/components/appendix/url
 ```
 
 **查询类型说明：**
+
 - **递归查询（Recursive Query）**：浏览器只发一次请求，本地 DNS 负责层层查询后返回结果
 - **迭代查询（Iterative Query）**：每一层只告诉下一层去哪查，浏览器需要多次查询
 - **缓存机制**：查询结果会被缓存，下次直接返回，大大加速访问
@@ -104,6 +103,7 @@ import BrowserRenderingDemo from '../../.vitepress/theme/components/appendix/url
 ### 生活比喻：建立物流通道
 
 假设物流车直接开到仓库，结果：
+
 - 仓库关门了 → 白跑一趟
 - 仓库爆仓不接单 → 无法发货
 - 找不到卸货口 → 无法对接
@@ -135,6 +135,7 @@ import BrowserRenderingDemo from '../../.vitepress/theme/components/appendix/url
 三次握手确保：**双方都能发、双方都能收** —— 四个条件都满足，才能可靠传输。
 
 **TCP 还负责：**
+
 - **数据分包**：大数据拆成小数据包传输
 - **顺序重组**：确保数据包按正确顺序组装
 - **错误重传**：丢包后自动重新发送
@@ -158,6 +159,7 @@ import BrowserRenderingDemo from '../../.vitepress/theme/components/appendix/url
 **HTTP（HyperText Transfer Protocol，超文本传输协议）**是浏览器和服务器之间的"对话规则"。通道建立后，浏览器发送**取货请求**，**核心目标是拿回网页的源代码（HTML 文件）**：
 
 **HTTP 请求示例：**
+
 ```http
 GET /index.html HTTP/1.1          ← 请求方法 + 路径 + 协议版本
 Host: www.example.com             ← 目标主机（支持虚拟主机，一台服务器可托管多个网站）
@@ -174,8 +176,9 @@ Cookie: session_id=abc123         ← 身份凭证
 你平时写的 API 调用（`fetch` / `axios`）和浏览器访问网页，在 **HTTP 层面完全是同一个东西**。
 
 它们都是发送一个请求，服务器返回一段文本数据。
-*   如果服务器给的是 **HTML**，浏览器就把它**画出来**（变成网页）。
-*   如果服务器给的是 **JSON**，你的代码就把它**存起来**（用于逻辑处理）。
+
+- 如果服务器给的是 **HTML**，浏览器就把它**画出来**（变成网页）。
+- 如果服务器给的是 **JSON**，你的代码就把它**存起来**（用于逻辑处理）。
 
 **根本就没有"两种"请求，只有同一种 HTTP 请求，只是返回的数据格式（Content-Type）不同而已。**
 这也是为什么理解了 HTTP，你就理解了 90% 的后端 API 原理。
@@ -184,6 +187,7 @@ Cookie: session_id=abc123         ← 身份凭证
 :::
 
 **常见 HTTP 方法：**
+
 - `GET`：获取资源（安全、幂等，可被缓存）
 - `POST`：提交数据（创建资源，如注册、登录）
 - `PUT`：更新资源（完整替换）
@@ -192,6 +196,7 @@ Cookie: session_id=abc123         ← 身份凭证
 - `HEAD`：获取响应头（不返回主体，用于检查资源是否存在）
 
 **服务器返回 HTTP 响应：**
+
 ```http
 HTTP/1.1 200 OK                   ← 协议版本 + 状态码 + 状态描述
 Date: Mon, 23 May 2025 12:00:00 GMT  ← 服务器时间
@@ -205,18 +210,18 @@ Set-Cookie: user_id=xyz789        ← 设置 Cookie
 
 **HTTP 状态码分类：**
 
-| 状态码 | 类别 | 含义 | 生活类比 |
-|--------|------|------|----------|
-| **200** | 成功 | 请求成功处理 | "订单确认，马上发货" |
-| **301/302** | 重定向 | 资源已移动 | "本店搬家了，请去新店下单" |
-| **304** | 未修改 | 缓存仍有效 | "你上次买的还能用，不用重新发货" |
-| **400** | 客户端错误 | 请求格式错误 | "订单填写模糊，看不懂" |
-| **401** | 未授权 | 需要身份验证 | "请先出示会员卡" |
-| **403** | 禁止访问 | 权限不足 | "非内部人员禁止入内" |
-| **404** | 未找到 | 资源不存在 | "仓库里没这款商品" |
-| **500** | 服务器错误 | 服务器内部错误 | "仓库起火了，暂时发不了货" |
-| **502** | 网关错误 | 上游服务器无响应 | "总仓没货了，分仓也调不到" |
-| **503** | 服务不可用 | 服务器过载或维护 | "爆单了，暂停接单" |
+| 状态码      | 类别       | 含义             | 生活类比                         |
+| ----------- | ---------- | ---------------- | -------------------------------- |
+| **200**     | 成功       | 请求成功处理     | "订单确认，马上发货"             |
+| **301/302** | 重定向     | 资源已移动       | "本店搬家了，请去新店下单"       |
+| **304**     | 未修改     | 缓存仍有效       | "你上次买的还能用，不用重新发货" |
+| **400**     | 客户端错误 | 请求格式错误     | "订单填写模糊，看不懂"           |
+| **401**     | 未授权     | 需要身份验证     | "请先出示会员卡"                 |
+| **403**     | 禁止访问   | 权限不足         | "非内部人员禁止入内"             |
+| **404**     | 未找到     | 资源不存在       | "仓库里没这款商品"               |
+| **500**     | 服务器错误 | 服务器内部错误   | "仓库起火了，暂时发不了货"       |
+| **502**     | 网关错误   | 上游服务器无响应 | "总仓没货了，分仓也调不到"       |
+| **503**     | 服务不可用 | 服务器过载或维护 | "爆单了，暂停接单"               |
 
 <HttpExchangeDemo />
 
@@ -263,22 +268,29 @@ Document
 浏览器解析所有的 CSS（内联、外部文件），构建**CSSOM（CSS Object Model）树**。这就像理解说明书上的样式规则：
 
 ```css
-.header { color: blue; font-size: 24px; } /* 标题要是蓝色的 */
-.content { display: none; }               /* 内容暂时隐藏 */
+.header {
+  color: blue;
+  font-size: 24px;
+} /* 标题要是蓝色的 */
+.content {
+  display: none;
+} /* 内容暂时隐藏 */
 ```
 
 #### 步骤3：合并 → 渲染树 (准备组装)
 
 DOM 树 + CSSOM 树 = **渲染树 (Render Tree)**。
 关键点：**只有"可见"的元素才会在渲染树中**。
-*   `.header`：在渲染树中（可见）。
-*   `.content`：**不在**渲染树中（因为 `display: none`，就像被扔掉的包装纸，不需要组装）。
+
+- `.header`：在渲染树中（可见）。
+- `.content`：**不在**渲染树中（因为 `display: none`，就像被扔掉的包装纸，不需要组装）。
 
 #### 步骤4：布局 (Layout / Reflow) —— 测量尺寸
 
 浏览器计算渲染树中每个节点在屏幕上的**精确坐标和大小**。
-*   "这个标题框宽 100px，高 50px，放在屏幕左上角 (0,0) 位置。"
-*   这个过程叫**重排 (Reflow)**。如果窗口大小变了（比如手机横屏），所有元素的位置都要重新计算，非常消耗性能。
+
+- "这个标题框宽 100px，高 50px，放在屏幕左上角 (0,0) 位置。"
+- 这个过程叫**重排 (Reflow)**。如果窗口大小变了（比如手机横屏），所有元素的位置都要重新计算，非常消耗性能。
 
 #### 步骤5：绘制 (Paint) —— 上色
 
@@ -300,17 +312,18 @@ DOM 树 + CSSOM 树 = **渲染树 (Render Tree)**。
 
 让我们回顾整个旅程：
 
-| 阶段 | 技术术语 | 网购类比 | 核心任务 | 关键技术 |
-|------|----------|----------|----------|----------|
-| **1. 解析** | URL 解析 | 填写订单 | 理解买家想买什么 | 协议、域名、端口、路径、参数 |
-| **2. 查询** | DNS 查询 | 查仓库址 | 找到店铺的发货仓库 | 递归/迭代查询、缓存机制 |
-| **3. 连接** | TCP 握手 | 建立通道 | 确保物流通畅 | 三次握手、序列号、流量控制 |
-| **4. 对话** | HTTP 交换 | 仓库发货 | 提交订单并收货 | 请求方法、状态码、头部字段 |
-| **5. 展示** | 浏览器渲染 | 拆箱组装 | 把商品展示出来 | DOM、CSSOM、渲染树、布局、绘制 |
+| 阶段        | 技术术语   | 网购类比 | 核心任务           | 关键技术                       |
+| ----------- | ---------- | -------- | ------------------ | ------------------------------ |
+| **1. 解析** | URL 解析   | 填写订单 | 理解买家想买什么   | 协议、域名、端口、路径、参数   |
+| **2. 查询** | DNS 查询   | 查仓库址 | 找到店铺的发货仓库 | 递归/迭代查询、缓存机制        |
+| **3. 连接** | TCP 握手   | 建立通道 | 确保物流通畅       | 三次握手、序列号、流量控制     |
+| **4. 对话** | HTTP 交换  | 仓库发货 | 提交订单并收货     | 请求方法、状态码、头部字段     |
+| **5. 展示** | 浏览器渲染 | 拆箱组装 | 把商品展示出来     | DOM、CSSOM、渲染树、布局、绘制 |
 
 **整个过程通常在几百毫秒内完成** —— 想想这有多么不可思议！
 
 你的浏览器在不到1秒的时间里：
+
 - 解析了一个复杂的地址
 - 查询了分布在全球的 DNS 服务器
 - 和千里之外的服务器建立了可靠连接
@@ -323,20 +336,20 @@ DOM 树 + CSSOM 树 = **渲染树 (Render Tree)**。
 
 ## 7. 名词速查表 (Glossary)
 
-| 名词 | 全称 | 简单解释 |
-|------|------|----------|
-| **URL** | Uniform Resource Locator | **统一资源定位符**。网页的"地址"，告诉浏览器去哪里找资源。 |
-| **DNS** | Domain Name System | **域名系统**。互联网的"电话簿"，把人类可读的域名转换成机器可读的 IP 地址。 |
-| **IP 地址** | Internet Protocol Address | **互联网协议地址**。每台联网设备的唯一"门牌号"，如 `192.168.1.1`。 |
-| **TCP** | Transmission Control Protocol | **传输控制协议**。确保数据可靠传输的"规则"，通过三次握手建立连接。 |
-| **HTTP** | HyperText Transfer Protocol | **超文本传输协议**。浏览器和服务器"对话"的规则。 |
-| **HTTPS** | HTTP Secure | **安全的 HTTP**。在 HTTP 基础上加了加密（TLS/SSL），保护数据安全。 |
-| **HTML** | HyperText Markup Language | **超文本标记语言**。网页的"骨架"，定义内容的结构。 |
-| **CSS** | Cascading Style Sheets | **层叠样式表**。网页的"皮肤"，定义内容的外观。 |
-| **DOM** | Document Object Model | **文档对象模型**。浏览器把 HTML 转换成的树形结构，方便操作。 |
-| **CSSOM** | CSS Object Model | **CSS 对象模型**。浏览器把 CSS 转换成的树形结构。 |
-| **渲染** | Rendering | 浏览器把代码转换成屏幕像素的过程。 |
-| **RTT** | Round Trip Time | **往返时间**。数据包从发送到接收确认的时间，影响网页加载速度。 |
+| 名词        | 全称                          | 简单解释                                                                   |
+| ----------- | ----------------------------- | -------------------------------------------------------------------------- |
+| **URL**     | Uniform Resource Locator      | **统一资源定位符**。网页的"地址"，告诉浏览器去哪里找资源。                 |
+| **DNS**     | Domain Name System            | **域名系统**。互联网的"电话簿"，把人类可读的域名转换成机器可读的 IP 地址。 |
+| **IP 地址** | Internet Protocol Address     | **互联网协议地址**。每台联网设备的唯一"门牌号"，如 `192.168.1.1`。         |
+| **TCP**     | Transmission Control Protocol | **传输控制协议**。确保数据可靠传输的"规则"，通过三次握手建立连接。         |
+| **HTTP**    | HyperText Transfer Protocol   | **超文本传输协议**。浏览器和服务器"对话"的规则。                           |
+| **HTTPS**   | HTTP Secure                   | **安全的 HTTP**。在 HTTP 基础上加了加密（TLS/SSL），保护数据安全。         |
+| **HTML**    | HyperText Markup Language     | **超文本标记语言**。网页的"骨架"，定义内容的结构。                         |
+| **CSS**     | Cascading Style Sheets        | **层叠样式表**。网页的"皮肤"，定义内容的外观。                             |
+| **DOM**     | Document Object Model         | **文档对象模型**。浏览器把 HTML 转换成的树形结构，方便操作。               |
+| **CSSOM**   | CSS Object Model              | **CSS 对象模型**。浏览器把 CSS 转换成的树形结构。                          |
+| **渲染**    | Rendering                     | 浏览器把代码转换成屏幕像素的过程。                                         |
+| **RTT**     | Round Trip Time               | **往返时间**。数据包从发送到接收确认的时间，影响网页加载速度。             |
 
 ---
 
diff --git a/docs/zh-cn/appendix/web-basics.md b/docs/zh-cn/appendix/web-basics.md
index aadb1ba..2f8e005 100644
--- a/docs/zh-cn/appendix/web-basics.md
+++ b/docs/zh-cn/appendix/web-basics.md
@@ -1,447 +1,757 @@
-# HTML/CSS/JS 基础 (Web Basics)
+# HTML/CSS/JavaScript 基础 (Web Basics)
 
-> 💡 **学习指南**：不需要任何基础，像玩游戏一样点一点、改一改，亲手拆解网页背后的秘密，五分钟看懂它到底是怎么造出来的。
+::: tip 🎯 核心问题
+**网页是怎么做出来的?为什么有的网页只有文字,有的却像应用一样可以交互?** 这个问题会引出 Web 开发的三大基石,让你理解每一个网页背后的结构。
+:::
 
-## 0. 引言：从网页外观到幕后三剑客
+---
 
-你每天刷到的页面，其实是 **结构（HTML）+ 表现（CSS）+ 行为（JavaScript）** 三股力量协作的结果。
+## 1. 为什么要理解网页的"三剑客"?
 
-为了把一个想法变成可交互的网页，我们需要解决三件事：
+### 1.1 从"电子海报"到"Web 应用"
 
-1. **放什么**：内容与层级如何组织？
-2. **长什么样**：颜色、布局、留白、动效如何呈现？
-3. **怎么动**：用户点击/输入后，页面如何响应？
+想象一下你在街上看到的**海报**。你只能看,不能互动——海报不会因为你看了就改变内容,也不会因为你点了某个地方就弹出更多信息。
 
-打开下面的交互，先“玩一玩”三者的分工，再继续向下学习。
+早期的网页就是这样的"电子海报"：只能看、不能改、内容固定。
+
+但现代网页完全不同了。它们像**桌面应用**一样：
+
+- 你可以点击、拖拽、输入、上传
+- 页面会根据你的操作实时变化
+- 可以像软件一样完成复杂任务(比如在线视频剪辑)
+
+**这种转变的核心原因,就是网页技术的三大基石:HTML + CSS + JavaScript**。
+
+### 1.2 一个生活的比喻:盖房子
+
+为了让你快速理解这三者的关系,我们用"盖房子"来比喻:
+
+| 技术           | 🏠 房子比喻              | 实际作用             | 具体例子                             |
+| -------------- | ------------------------ | -------------------- | ------------------------------------ |
+| **HTML**       | 房子的**结构和材料**     | 定义网页的内容和层级 | 这是一面墙、这是一扇窗、这是一个房间 |
+| **CSS**        | 房子的**装修和外观**     | 控制网页的样式和布局 | 墙刷成蓝色、窗户放在东边、地板铺瓷砖 |
+| **JavaScript** | 房子的**电器和智能系统** | 让网页具备交互和逻辑 | 按开关灯亮了、开门窗帘自动拉开       |
+
+::: tip 💡 从表格中你能看到什么?
+
+**HTML → CSS**: 先有房子,才能装修。HTML 是基础,CSS 是美化。没有 HTML,CSS 就没有东西可以装饰。
+
+**HTML + CSS → JavaScript**: 先有房子和装修,才能装智能系统。JavaScript 会让"死"的页面变"活"。
+
+**核心思想**: 三者各司其职,但缺一不可。只有 HTML 的页面很丑,只有 HTML+CSS 的页面不能互动,三者齐全才能做出像微信网页版、淘宝这样的"Web 应用"。
+
+🎯 动手试试看：
+
+下面这个演示展示了 HTML/CSS/JavaScript 三者如何协作。你可以切换三种模式,点击页面上的元素会高亮对应的代码：
 
 <WebTechTriad />
 
----
-
-## 1. HTML：为什么不能只用纯文本？
-
-### 1.1 朴素方案的缺陷
-
-- 纯文本无法表达层级（标题、列表、表格）。
-- 屏幕阅读器和搜索引擎看不懂语义。
-- 链接、表单、媒体都无法定义。
-
-### 1.2 解决方案：用标记语言搭出“骨架”
-
-**HTML (HyperText Markup Language)** 用标签描述结构和含义。
-
-```html
-<h1>欢迎来到我的网站</h1>
-<p>这是一段文字内容。</p>
-<img src="photo.jpg" alt="我的照片" />
-<a href="https://example.com">点击这里</a>
-```
-
-**关键概念**：
-
-- **标签 (Tag)**：`<h1>`、`<p>` 用来声明“这是什么”。
-- **元素 (Element)**：标签 + 内容，如 `<h1>标题</h1>`。
-- **属性 (Attribute)**：附加信息，如 `alt="我的照片"`。
-- **嵌套 (Nesting)**：父子结构，让页面有层次。
-
-### 1.3 常用语义标签速查
-
-<SemanticTagsDemo />
+:::
 
 ---
 
-## 2. CSS：给网页“精装修”
+## 2. HTML: 网页的"骨架"
 
-### 2.1 只有 HTML 会怎样？
+### 2.1 为什么不能只用纯文本?
 
-就像**毛坯房**：有墙有窗，能住人，但**丑**。
+在 HTML 出现之前,互联网上的内容只是**纯文本**。就像你现在看的这段文字,没有任何格式、没有层级、没有链接。
 
-- 文字黑乎乎，挤在一起。
-- 图片乱排，大小不一。
-- 没有任何设计感。
+纯文本的问题是什么?
 
-### 2.2 解决方案：请个“装修队” (CSS)
+- ❌ **无法表达层级**: 分不清哪是标题、哪是正文、哪是注释
+- ❌ **机器看不懂**: 搜索引擎、屏幕阅读器(盲人用)无法理解内容
+- ❌ **无法交互**: 没有链接、没有按钮、没有输入框
 
-**CSS (Cascading Style Sheets)** 专门负责**变好看**。它不改变房子结构（HTML），只负责刷漆、贴砖、摆家具。
+**HTML (HyperText Markup Language)** 就是为了解决这个问题诞生的。它用"标签"(tag)来标记内容的含义,让浏览器知道"这是什么"。
 
-```css
-/* 谁？ { 改什么: 变成啥; } */
-h1 {
-  color: red; /* 颜色变红 */
-  font-size: 24px; /* 字变大 */
-  text-align: center; /* 居中放 */
-}
+### 2.2 HTML 的核心概念:标签与元素
 
-.button {
-  background: #007bff; /* 蓝色背景 */
-  border: none; /* 不要边框 */
-  padding: 10px 20px; /* 撑大一点 */
-  border-radius: 5px; /* 圆角 */
-}
-
-.button:hover {
-  background: #0056b3; /* 鼠标放上去变深蓝 */
-}
-```
-
-**引入方式**：
+HTML 的基本单位是"标签"(tag)。标签用尖括号 `< >` 包裹,成对出现:
 
 ```html
-<!-- 1) 临时贴个条（行内样式） -->
-<div style="color: red;">红色文字</div>
+<!-- 这是一个完整的 HTML 元素 -->
+<h1>这是标题</h1>
 
-<!-- 2) 写在户型图背面（内部样式） -->
-<style>
-  .box {
-    background: blue;
-  }
-</style>
+<!-- 标签解释 -->
+<标签名>内容</标签名>
+```
 
-<!-- 3) 找专业装修公司出图纸（外部样式 - 推荐！） -->
+**关键概念**:
+
+- **标签 (Tag)**: `<h1>`、`<p>` 这种标记,告诉浏览器"这是什么"
+- **元素 (Element)**: 标签 + 内容,比如 `<h1>标题</h1>` 整体
+- **属性 (Attribute)**: 标签上的附加信息,比如 `<img src="photo.jpg">` 中的 `src`
+- **嵌套 (Nesting)**: 标签里可以再放标签,形成父子关系
+
+::: details 💡 点击查看:HTML 标签的"家族树"
+
+HTML 标签之间的嵌套关系,就像一个家族树:
+
+```html
+<body>
+  <!-- body 是"祖先" -->
+  <div>
+    <!-- div 是 body 的"孩子" -->
+    <h1>标题</h1>
+    <!-- h1 是 div 的"孙子" -->
+    <p>段落</p>
+  </div>
+</body>
+```
+
+这种层级关系叫做 **DOM 树**(Document Object Model),我们后面会详细讲。
+:::
+
+### 2.3 常用 HTML 标签速查
+
+::: tip 🎯 学习建议
+不要背这些标签! 你只需要知道"有这些分类",用到的时候查文档就行。AI 时代更是如此——你告诉 AI"我要一个表单",它会直接写出完整代码。
+:::
+
+**结构标签** (定义页面骨架):
+
+```html
+<h1>这是一级标题</h1>
+<h2>这是二级标题</h2>
+<p>这是一个段落</p>
+<div>这是一个容器(用来分组)</div>
+<span>这是行内容器(用来分组文本)</span>
+```
+
+**链接与媒体** (让页面丰富):
+
+```html
+<!-- 链接 -->
+<a href="https://example.com">点击这里跳转</a>
+
+<!-- 图片 -->
+<img src="photo.jpg" alt="照片描述" />
+
+<!-- 视频 -->
+<video src="movie.mp4" controls></video>
+```
+
+**表单** (收集用户输入):
+
+```html
+<form>
+  <!-- 文本输入框 -->
+  <input type="text" placeholder="请输入用户名" />
+
+  <!-- 密码框 -->
+  <input type="password" placeholder="请输入密码" />
+
+  <!-- 按钮 -->
+  <button type="submit">登录</button>
+</form>
+```
+
+**语义化标签** (HTML5 新增,让页面含义更明确):
+
+```html
+<header>这是页面头部</header>
+<nav>这是导航栏</nav>
+<main>这是主要内容区</main>
+<article>这是一篇文章</article>
+<aside>这是侧边栏</aside>
+<footer>这是页脚</footer>
+```
+
+::: tip 💡 为什么要用语义化标签?
+
+`<div class="header">` 和 `<header>` 看起来效果一样,为什么要用后者?
+
+1. **SEO 友好**: 搜索引擎能更好理解页面结构
+2. **可访问性**: 屏幕阅读器能快速定位"导航""主要内容"等区域
+3. **代码可读性**: 看到 `<header>` 一眼就知道是头部,不用猜 `class="header"` 的意图
+   :::
+
+---
+
+## 3. CSS: 网页的"皮肤"
+
+### 3.1 只有 HTML 会怎样?
+
+想象你住进了一个**毛坯房**: 有墙、有窗、有门,能住人,但是:
+
+- 墙是灰色的水泥,不好看
+- 插座和开关随便装,不美观
+- 没有家具,生活不方便
+
+只有 HTML 的网页就是这样:有内容、有结构,但**丑**、**乱**、**不友好**。
+
+CSS (Cascading Style Sheets) 就是网页的"装修队"。它不改变 HTML 的结构(不拆墙、不改门),只负责:
+
+- 🎨 **刷墙**: 改变颜色、背景
+- 🖼️ **挂画**: 添加边框、阴影、圆角
+- 🪑 **摆家具**: 调整布局、间距、对齐
+
+### 3.2 CSS 的三种写法
+
+CSS 有三种"安装"方式,就像装修也有三种方式:
+
+**方式一: 行内样式** (临时贴个装饰)
+
+```html
+<div style="color: red; background: yellow;">这段文字是红色的,背景是黄色的</div>
+```
+
+**适用场景**: 临时测试、快速原型。不推荐在生产代码中使用。
+
+**方式二: 内部样式** (写在户型图背面)
+
+```html
+<head>
+  <style>
+    .red-text {
+      color: red;
+    }
+  </style>
+</head>
+<body>
+  <div class="red-text">这段文字是红色</div>
+</body>
+```
+
+**适用场景**: 单页应用、组件的专属样式。
+
+**方式三: 外部样式** (请专业装修公司) ⭐
+
+```html
+<!-- 在 HTML 中引入 -->
 <link rel="stylesheet" href="styles.css" />
 ```
 
-### 2.3 核心机制：CSS 怎么找到 HTML？
+```css
+/* styles.css 文件 */
+.red-text {
+  color: red;
+}
+```
 
-新手最容易晕的就是：CSS 里写的 `p`、`.card`、`#btn` 到底是怎么跟 HTML 对应上的？
+**适用场景**: 所有正规项目。优点是可以复用、易于维护、浏览器会缓存。
 
-这就好比老师在班级里点名，有三种点法：
+### 3.3 CSS 如何找到 HTML?选择器的工作原理
 
-1.  **喊“所有人” (标签选择器)**：喊 "男生"，所有男生都要站起来。
-2.  **喊“小组名” (类选择器)**：喊 "英语课代表"，可能有好几个。
-3.  **喊“学号” (ID 选择器)**：喊 "2024001"，全班只有一个。
+新手最容易晕的地方是:"CSS 写的 `.card`、`#btn`、`p` 到底是怎么跟 HTML 对应上的?"
 
-**互动演示：把鼠标移到左边的 CSS 规则上，看看右边谁会亮起来。**
+这就像老师在班级里点名,有三种点法:
 
-<CssSelectorsDemo />
+**1. 喊"所有人"(标签选择器)**
 
-### 2.4 盒模型：为什么宽度算不准？
+```css
+p {
+  color: red;
+}
+```
 
-每个元素都是一个盒子，由 **内容 → 内边距 → 边框 → 外边距** 组成。
+喊"所有同学",全班同学都要站起来。这里所有 `<p>` 标签的元素都会变成红色。
+
+**2. 喊"小组名"(类选择器 class)**
+
+```css
+.highlight {
+  background: yellow;
+}
+```
+
+喊"英语课代表",可能有几个同学都是。所有 `class="highlight"` 的元素背景都会变黄。
+
+**3. 喊"学号"(ID 选择器)**
+
+```css
+#submit-btn {
+  background: blue;
+}
+```
+
+喊"2024001",全班只有一个。只有 `id="submit-btn"` 的元素会变蓝。
+
+::: tip 💡 优先级:谁听谁的?
+
+如果一个元素同时被多个选择器选中,怎么办?
+
+```html
+<p class="highlight" id="special-para">这段文字是什么颜色?</p>
+```
+
+```css
+p {
+  color: red;
+} /* 优先级: 1 */
+.highlight {
+  color: yellow;
+} /* 优先级: 10 */
+#special-para {
+  color: blue;
+} /* 优先级: 100 */
+```
+
+**答案**: 蓝色。ID 选择器优先级最高,类选择器次之,标签选择器最低。
+
+**内联样式**(写在 style 属性里)优先级是 1000,最高!
+:::
+
+### 3.4 CSS 的"三明治":盒模型
+
+每个 HTML 元素在 CSS 中都被看作一个"盒子",由四层组成:
+
+```
+┌──────────────────────────────────┐
+│         margin (外边距)           │  ← 盒子之间的距离
+│   ┌─────────────────────────┐    │
+│   │    border (边框)       │    │  ← 盒子的外壳
+│   │  ┌───────────────────┐  │    │
+│   │  │  padding (内边距) │  │    │  ← 内容到边框的距离
+│   │  │  ┌─────────────┐  │  │    │
+│   │  │  │   content    │  │  │    │  ← 实际内容(文字/图片)
+│   │  │  └─────────────┘  │  │    │
+│   │  └───────────────────┘  │    │
+│   └─────────────────────────┘    │
+└──────────────────────────────────┘
+```
+
+**总宽度计算**:
+
+```css
+width: 200px;
+padding: 10px; /* 左右各 10px */
+border: 5px; /* 左右各 5px */
+margin: 20px; /* 左右各 20px */
+```
+
+**元素实际占据的宽度** = 20 + 5 + 10 + 200 + 10 + 5 + 20 = **270px**
+
+::: warning ⚠️ 常见错误:宽度对不上
+
+新手常问:"我设置了 `width: 200px`,为什么测量出来是 270px?"
+
+因为你没有算上 padding、border、margin!
+
+**解决方案**:
+
+```css
+.box {
+  box-sizing: border-box; /* 让 width 包含 padding 和 border */
+  width: 200px;
+  padding: 10px;
+  border: 5px;
+}
+```
+
+这样,`width: 200px` 就是最终宽度,padding 和 border 会"挤"在里面。
+:::
+
+🎯 动手试试看：
+
+下面这个演示让你调节 padding、border 和 margin,实时看到盒模型的变化和总宽度计算：
 
 <CssBoxModel />
 
-记忆公式：**总宽度 = margin + border + padding + width + padding + border + margin**。
+### 3.5 怎么知道有哪些 CSS 属性?
 
-### 2.5 怎么知道有哪些 CSS 属性？
+::: tip 🎯 AI 时代的学习方式
 
-新手常问：“我怎么知道要改颜色是 `color` 还是 `font-color`？” CSS 属性多到记不住，是因为网页要面对的情况太复杂了（各种屏幕尺寸、各种设计需求）。
+**以前**: 背 CSS 属性手册
 
-**但好消息是：日常开发中，90% 的时间你只需要用到下面这 20% 的核心属性。**
+**现在**: 告诉 AI 你要什么效果
 
-<CssCommonProperties />
+例子:
 
-#### 遇到不认识的属性怎么办？
+- 你说"我要一个带阴影的蓝色圆角按钮"
+- AI 会给出: `background: blue; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1)`
 
-**在 AI 原生时代，解决这个问题有更聪明的方法：**
+**为什么这是首选?** 因为 AI 不仅告诉你"属性名",还帮你把"值"都调好了。
+:::
 
-1.  **直接问 AI (首选方案)**：
-    - 现在的 AI 编程助手（如 Cursor、Trae、GitHub Copilot）已经非常强大。
-    - 你根本不需要背诵属性，直接用自然语言描述你的需求。
-    - **例子**：你对 AI 说 "我要一个带有阴影的蓝色圆形按钮"，它会直接给你写出包含 `background-color`, `border-radius`, `box-shadow` 的完整代码。
-    - **为什么这是首选？** 因为它不仅告诉你“属性名”，还帮你把“值”都调好了。
+不过,你仍然需要了解一些**最常用的 CSS 属性分类**:
 
-2.  **查文档 (MDN)**：
-    - MDN Web Docs 是 Web 开发的权威字典。
-    - 搜 "MDN CSS text color"，它会告诉你正确属性是 `color`。
-    - 搜 "MDN CSS background"，它会列出 `background-color`, `background-image` 等家族成员。
+**文字相关**:
 
-3.  **用浏览器“偷看” (DevTools)**：
-    - 在喜欢的网页上**右键 -> 检查 (Inspect)**。
-    - 在 **Styles** 面板里，你可以看到人家用了什么属性。
-    - 你甚至可以直接在那里面试着改改数值，实时看效果（刷新就没了，很安全）。
+```css
+color: red; /* 文字颜色 */
+font-size: 16px; /* 字体大小 */
+font-weight: bold; /* 字体粗细 */
+text-align: center; /* 对齐方式 */
+line-height: 1.5; /* 行高 */
+```
 
-4.  **CSS 游乐场**：
-    - 下面的演示列出了一些最常用的“装修参数”。
-    - 试着拖动滑块、修改颜色，看看它们分别控制什么。
+**背景与边框**:
 
-<CssPlaygroundDemo />
+```css
+background: blue; /* 简写,可设置颜色、图片等 */
+border: 1px solid black; /* 1px 实线黑色边框 */
+border-radius: 8px; /* 圆角 */
+box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影 */
+```
 
-### 2.6 现代 CSS 开发：Tailwind CSS 简介
+**布局相关**:
 
-以前写 CSS，我们要给每个东西起个名字（比如 `.my-button`, `.header-title`），然后在 CSS 文件里写一堆属性。这叫“语义化 CSS”。
+```css
+display: flex; /* 弹性布局 */
+justify-content: center; /* 主轴对齐 */
+align-items: center; /* 交叉轴对齐 */
+gap: 10px; /* 元素之间的间距 */
+```
 
-现在流行一种**原子化 CSS (Utility-first CSS)**，代表作是 **Tailwind CSS**。
+🎯 动手试试看：
 
-**它的核心思想**：
-不要写 CSS 代码，直接在 HTML 标签上写“代号”。
+下面这个演示展示了 Flexbox 布局的效果。你可以切换方向、对齐方式和换行，观察盒子如何排列：
 
-- **传统写法**：
+<CssFlexbox />
 
-  ```html
-  <button class="btn-primary">按钮</button>
-  <style>
-    .btn-primary {
-      background-color: #3b82f6;
-      color: white;
-      padding: 0.5rem 1rem;
-      border-radius: 0.25rem;
-    }
-  </style>
-  ```
+**尺寸与间距**:
 
-- **Tailwind 写法**：
-  ```html
-  <!-- bg-blue-500: 蓝色背景 -->
-  <!-- text-white: 白字 -->
-  <!-- px-4 py-2: 左右间距4，上下间距2 -->
-  <!-- rounded: 圆角 -->
-  <button class="bg-blue-500 text-white px-4 py-2 rounded">按钮</button>
-  ```
+```css
+width: 100px;
+height: 100px;
+padding: 10px; /* 内边距 */
+margin: 20px; /* 外边距 */
+```
 
-**为什么它这么火？**
+### 3.6 现代 CSS 开发:Tailwind CSS 简介
 
-1.  **不用起名**：最头疼的“起类名”环节没了。
-2.  **不切文件**：不用在 HTML 和 CSS 文件之间切来切去。
-3.  **不怕删**：删掉 HTML 标签时，样式自动就没了，不会留下堆积如山的无用 CSS 代码。
+::: tip 💡 这部分可选,了解即可
 
-> 💡 **提示**：现在的 AI 编程工具（如 Cursor, v0）非常擅长写 Tailwind。你只要说“给我一个蓝色的圆角按钮”，它大概率直接给你生成带 Tailwind 类的代码。
+Tailwind 是一种"原子化 CSS"框架,最近几年非常流行。它的核心思想是:**不要写 CSS,直接在 HTML 里写"样式代号"**。
 
-### 2.7 Flexbox：为什么对齐和分布这么简单？
+**传统写法**:
 
-<CssLayoutDemo />
+```html
+<!-- HTML -->
+<button class="btn-primary">点击</button>
 
-核心属性速记：
+<!-- CSS -->
+<style>
+  .btn-primary {
+    background-color: #3b82f6;
+    color: white;
+    padding: 0.5rem 1rem;
+    border-radius: 0.25rem;
+  }
+</style>
+```
 
-- `flex-direction`: 行/列
-- `justify-content`: 主轴对齐
-- `align-items`: 交叉轴对齐
-- `flex-wrap`: 是否换行
-- `gap`: 间距
-- `flex-grow`: 放大比例
+**Tailwind 写法**:
+
+```html
+<button class="bg-blue-500 text-white px-4 py-2 rounded">点击</button>
+```
+
+**为什么这么火?**
+
+1. **不用起名**: 最头疼的"这个类叫什么"环节没了
+2. **不切文件**: 不用在 HTML 和 CSS 之间来回切换
+3. **不怕删**: 删掉 HTML,样式自动就没了,不会留下堆积如山的无用 CSS
 
 ---
 
-## 3. JavaScript：为什么页面需要"思考"？
+## 4. JavaScript: 网页的"大脑"
 
-### 3.0 JavaScript 和 ECMAScript 是什么关系？
+### 4.1 没有 JavaScript 会怎样?
 
-你可能听说过 **ECMAScript** 这个词，它和 JavaScript 是什么关系？
+只有 HTML + CSS 的网页,就像**商店橱窗里的模特**:
 
-简单来说：**ECMAScript 是标准，JavaScript 是实现。**
+- ✅ 看起来很漂亮(CSS)
+- ✅ 结构很清晰(HTML)
+- ❌ 但你跟它说话,它不会回应
+- ❌ 你按了按钮,什么也不会发生
 
-打个比方：
-- **ECMAScript** 就像"普通话标准规范"，定义了语法规则
-- **JavaScript** 就像"实际说的普通话"，是浏览器真正运行的语言
+**JavaScript** 让网页从"橱窗模特"变成"真人":
 
-为什么会有两个名字？这有一段历史：
+- ✅ 点击按钮,会弹出提示
+- ✅ 输入文字,会实时检查格式
+- ✅ 滚动页面,会加载更多内容
+- ✅ 提交表单,会显示"正在提交..."
 
-- 1995 年，网景公司创造了 JavaScript
-- 1996 年，微软推出了 JScript（和 JavaScript 类似但不完全一样）
-- 为了避免各家浏览器"方言"不统一，1997 年 ECMA 国际组织制定了标准，命名为 ECMAScript
+### 4.2 JavaScript 的核心能力
 
-**所以**：所有浏览器都遵循 ECMAScript 标准，但大家习惯叫它 JavaScript。你写的是 JavaScript，它遵循的是 ECMAScript 规范。
+JavaScript 是一种**编程语言**,它让网页具备"逻辑"和"记忆"。
 
-**版本演进是什么意思？**
-
-JavaScript 这门语言不是一成不变的，它在不断"升级"。就像手机系统从 iOS 14 升级到 iOS 15、iOS 16 一样，JavaScript 也有自己的"版本号"，这些版本号就是 **ES 标准**。
-
-每个新版本都会增加新功能、新语法，让开发者写代码更方便。但浏览器需要时间来"学会"这些新语法——就像老手机可能装不了新系统一样，老浏览器也不支持新语法。
-
-**关键版本一览**：
-
-| 版本 | 发布年份 | 重要特性 | 浏览器支持 |
-|------|----------|----------|------------|
-| **ES5** | 2009 | `strict mode`、`JSON`、`Array.map/filter/reduce` | 所有浏览器 ✅ |
-| **ES6/ES2015** | 2015 | `let/const`、箭头函数、`class`、**ES 模块**、`Promise` | 现代浏览器 ✅ |
-| **ES2016** | 2016 | `includes()`、指数运算符 `**` | 现代浏览器 ✅ |
-| **ES2017** | 2017 | `async/await`、`Object.entries()` | 现代浏览器 ✅ |
-| **ES2020** | 2020 | 可选链 `?.`、空值合并 `??`、`BigInt` | 现代浏览器 ✅ |
-| **ES2022** | 2022 | 顶层 `await`、`at()`、私有字段 `#` | 较新浏览器 |
-| **ES2024** | 2024 | `Object.groupBy()`、`Promise.withResolvers()` | 最新浏览器 |
-
-> 💡 **实用建议**：现代浏览器已经支持大部分 ES6+ 特性。如果你需要兼容老浏览器（如 IE），可以用 Babel 等工具把新语法"翻译"成老语法。
-
-### 3.0.1 TypeScript 和 JavaScript 是什么关系？
-
-你可能还听说过 **TypeScript（TS）**，它和 JavaScript 又是什么关系？
-
-**一句话概括：TypeScript = JavaScript + 类型系统。**
-
-| 对比项 | JavaScript | TypeScript |
-|--------|------------|------------|
-| **类型系统** | 动态类型（运行时才知道类型） | 静态类型（写代码时就知道类型） |
-| **编译** | 不需要编译，浏览器直接运行 | 需要编译成 JavaScript 才能运行 |
-| **错误检查** | 运行时才发现错误 | 写代码时就能发现错误 |
-| **学习曲线** | 入门简单 | 需要学习类型语法 |
-| **适用场景** | 小型项目、快速原型 | 大型项目、团队协作 |
-
-**代码对比**：
+**能力一: 记住数据**(变量)
 
 ```javascript
-// JavaScript - 动态类型，变量可以随便变
-let name = "张三"
-name = 123  // 不报错，但可能出问题
+let userName = '张三'
+let isLoggedIn = true
+let cartCount = 5
+```
+
+**能力二: 重复做事**(函数)
+
+```javascript
+// 定义一个函数
+function sayHello(name) {
+  return '你好, ' + name + '!'
+}
+
+// 调用函数
+console.log(sayHello('张三')) // 输出: 你好, 张三!
+```
+
+**能力三: 响应事件**(事件监听)
+
+```javascript
+// 当按钮被点击时
+button.addEventListener('click', function () {
+  alert('按钮被点击了!')
+})
+```
+
+**能力四: 修改页面**(DOM 操作)
+
+```javascript
+// 修改页面内容
+document.getElementById('title').textContent = '新标题'
+
+// 修改样式
+document.getElementById('box').style.background = 'red'
+```
+
+### 4.3 ECMAScript 是什么?JavaScript 的版本
+
+你可能听说过 **ECMAScript** 这个词。它和 JavaScript 是什么关系?
+
+**简单来说: ECMAScript 是标准,JavaScript 是实现**。
+
+打个比方:
+
+- **ECMAScript** = "普通话标准规范",定义了语法规则
+- **JavaScript** = "实际说的普通话",是浏览器真正运行的语言
+
+**为什么会有两个名字?**
+
+- 1995 年,网景公司创造了 JavaScript
+- 1996 年,微软推出了 JScript(和 JavaScript 类似但不完全一样)
+- 为了避免各浏览器"方言"不统一,1997 年 ECMA 国际组织制定了标准,命名为 ECMAScript
+
+**版本演进**:
+
+JavaScript 这门语言在不断"升级"。每年都会发布新版本:
+
+| 版本           | 发布年份 | 重要特性                                               |
+| -------------- | -------- | ------------------------------------------------------ |
+| **ES5**        | 2009     | 严格模式、JSON、Array.map/filter/reduce                |
+| **ES6/ES2015** | 2015     | `let/const`、箭头函数、`class`、**ES 模块**、`Promise` |
+| **ES2020**     | 2020     | 可选链 `?.`、空值合并 `??`、`BigInt`                   |
+| **ES2024**     | 2024     | `Object.groupBy()`、`Promise.withResolvers()`          |
+
+::: tip 💡 实用建议
+
+现代浏览器已经支持大部分 ES6+ 特性。如果你需要兼容老浏览器(如 IE),可以用 Babel 等工具把新语法"翻译"成老语法。
+
+不过,现在很多项目已经不再支持 IE,所以你可以放心使用新语法。
+:::
+
+### 4.4 TypeScript:加上了"类型"的 JavaScript
+
+你可能还听说过 **TypeScript (TS)**,它和 JavaScript 又是什么关系?
+
+**一句话概括: TypeScript = JavaScript + 类型系统**。
+
+| 对比项       | JavaScript                 | TypeScript                     |
+| ------------ | -------------------------- | ------------------------------ |
+| **类型系统** | 动态类型(运行时才知道类型) | 静态类型(写代码时就知道类型)   |
+| **编译**     | 不需要编译,浏览器直接运行  | 需要编译成 JavaScript 才能运行 |
+| **错误检查** | 运行时才发现错误           | 写代码时就能发现错误           |
+| **学习曲线** | 入门简单                   | 需要学习类型语法               |
+| **适用场景** | 小型项目、快速原型         | 大型项目、团队协作             |
+
+**代码对比**:
+
+```javascript
+// JavaScript - 动态类型,变量可以随便变
+let name = '张三'
+name = 123 // 不报错,但可能出问题
 ```
 
 ```typescript
-// TypeScript - 静态类型，类型写死了
-let name: string = "张三"
-name = 123  // 编译时报错：不能把数字赋给字符串
+// TypeScript - 静态类型,类型写死了
+let name: string = '张三'
+name = 123 // 编译时报错: 不能把数字赋给字符串
 ```
 
-**为什么大型项目偏爱 TypeScript？**
+::: tip 💡 为什么大型项目偏爱 TypeScript?
 
-想象你在团队里开发一个复杂系统，代码几万行。JavaScript 的灵活性在这里变成了"灾难"——你不知道这个函数期望接收什么类型的参数，也不知道它返回什么。TypeScript 强制你写清楚类型，就像给代码加了"说明书"，IDE 也能给你更好的提示。
+想象你在团队里开发一个复杂系统,代码几万行。JavaScript 的灵活性在这里变成了"灾难"——你不知道这个函数期望接收什么类型的参数,也不知道它返回什么。
 
-> 💡 **建议**：初学者先学 JavaScript，打好基础后再学 TypeScript。现代前端框架（Vue 3、React）都强烈推荐使用 TypeScript。
+TypeScript 强制你写清楚类型,就像给代码加了"说明书",IDE 也能给你更好的提示。
+:::
 
-### 3.1 没有 JS 会怎样？
+---
 
-- 按钮点了没反应，表单无法校验。
-- 数据更新只能靠刷新整页。
-- 动画、互动、个性化都做不了。
+## 5. 深入理解 DOM: 网页的"族谱"
 
-### 3.2 解决方案：用 JS 驱动行为与状态
+你可能经常听到 **DOM (Document Object Model)** 这个词。别被这个专业术语吓到,它其实就是一张**网页的"族谱"**。
 
-**JavaScript** 赋予页面交互和逻辑。
+### 5.1 什么是 DOM 树?
+
+浏览器读取 HTML 代码后,不会把它们当成一堆字符串,而是在内存里把它们画成一棵"树"。
+
+```
+Document (文档)
+    ↓
+<html>                    <!-- html 是祖先 -->
+    ├─<head>              <!-- head 是 html 的孩子 -->
+    │   └─<title>我的网页</title>
+    └─<body>              <!-- body 是 html 的孩子 -->
+        ├─<h1>欢迎</h1>
+        └─<div class="card">   <!-- div 是 body 的孩子 -->
+            ├─<img src="photo.jpg">
+            └─<p>一段文字</p>
+```
+
+这棵树就叫 **DOM 树**。每个 HTML 标签都是这棵树上的一个"节点"。
+
+### 5.2 为什么叫"对象模型"(Object Model)?
+
+因为在 JavaScript 眼里,HTML 标签不仅仅是标签,而是**对象 (Object)**。它们有**属性**(可以读/写的数据)和**方法**(可以执行的动作)。
+
+**属性 (Property)**: 节点的"数据"
 
 ```javascript
-// 变量 + 函数
-let message = 'Hello, World!'
-function greet(name) {
-  return `Hello, ${name}!`
-}
-
-// 事件监听
-button.addEventListener('click', () => alert('按钮被点击了！'))
-
-// DOM 操作
-document.getElementById('title').textContent = '新标题'
+imgElement.src = 'photo.jpg' // 修改图片地址
+divElement.className = 'box' // 修改类名
+inputElement.value = '123' // 修改输入框的值
 ```
 
-### 3.3 DOM 现场演示：修改节点、切换样式
+**方法 (Method)**: 节点的"动作"
+
+```javascript
+buttonElement.click() // 模拟点击
+divElement.remove() // 删除元素
+bodyElement.appendChild(newDiv) // 添加子元素
+```
+
+### 5.3 怎么找节点?(DOM 查询)
+
+就像在族谱里找人一样,JavaScript 提供了很多方法:
+
+**按"身份证"找**(ID):
+
+```javascript
+const element = document.getElementById('header')
+// 全局唯一,速度最快
+```
+
+**按"特征"找**(选择器):
+
+```javascript
+// 找到第一个匹配的元素
+const element = document.querySelector('.card h2')
+
+// 找到所有匹配的元素
+const elements = document.querySelectorAll('button')
+```
+
+**按"关系"找**:
+
+```javascript
+element.parentNode // 找爸爸
+element.children // 找孩子
+element.nextElementSibling // 找下一个兄弟
+```
+
+### 5.4 性能警告:不要频繁"拆家"
+
+操作 DOM 是很**贵**的。每次你修改 DOM(比如改大小、改位置),浏览器都要:
+
+1. **重新计算排版** (Reflow)
+2. **重新绘制** (Repaint)
+
+这两个操作都很耗时。
+
+::: warning ⚠️ 低效操作
+
+```javascript
+// ❌ 低效:循环 1000 次,每次都操作 DOM
+for (let i = 0; i < 1000; i++) {
+  document.body.appendChild(createDiv())
+}
+```
+
+**为什么会慢?** 每次appendChild,浏览器都要重新计算整页布局,1000 次就是 1000 次重排!
+
+:::
+
+::: tip ✅ 高效操作
+
+```javascript
+// ✅ 高效:先拼好,一次性插入
+const fragment = document.createDocumentFragment()
+for (let i = 0; i < 1000; i++) {
+  fragment.appendChild(createDiv())
+}
+document.body.appendChild(fragment) // 只触发一次重排
+```
+
+这也正是 **Vue / React** 等现代框架诞生的原因: 它们在内存里玩"虚拟 DOM",计算好最小修改量,最后才去动真正的 DOM,从而保护了性能。
+:::
+
+🎯 动手试试看：
+
+下面这个演示展示了 DOM 操作的基本方法。你可以修改标题文字、切换高亮样式，并看到对应的 JavaScript 代码：
 
 <DomManipulator />
 
-常用接口：
-
-- **获取元素**：`getElementById` / `querySelector`
-- **改内容**：`textContent` / `innerHTML`
-- **改样式**：`element.style.*`
-- **类名切换**：`classList.add / remove / toggle`
-- **显隐**：`element.style.display = 'none' | 'block'`
-
-### 3.4 引入方式
-
-```html
-<!-- 行内（不推荐） -->
-<button onclick="alert('Hi')">点击</button>
-<!-- 内部脚本 -->
-<script>
-  console.log('Hello!')
-</script>
-<!-- 外部脚本（推荐） -->
-<script src="script.js"></script>
-```
-
 ---
 
-## 4. 深入理解 DOM：网页的“族谱”
+## 6. 三剑客如何协作?
 
-你可能经常听到 **DOM (Document Object Model)** 这个词。别被这个专业术语吓到，它其实就是一张**网页的族谱**。
-
-### 4.1 什么是 DOM 树？
-
-浏览器读取 HTML 代码后，不会把它们当成一堆字符串，而是会在内存里把它们画成一棵树。
-
-- `<html>` 是祖先。
-- `<body>` 是 `<html>` 的孩子。
-- `div`、`p`、`button` 又是 `<body>` 的孩子。
-
-这棵树就叫 **DOM 树**。
-
-```mermaid
-graph TD
-    Document[Document] --> HTML[html]
-    HTML --> Head[head]
-    HTML --> Body[body]
-    Head --> Title[title: "我的网页"]
-    Body --> H1[h1: "欢迎"]
-    Body --> Div[div.card]
-    Div --> Img[img]
-    Div --> P[p: "一段文字"]
-    Div --> Button[button: "点击"]
-```
-
-### 4.2 为什么叫“对象模型” (Object Model)？
-
-因为在 JS 眼里，HTML 标签不仅仅是标签，而是**对象 (Object)**。它们有属性，有方法。
-
-- **属性 (Property)**：
-  - `img.src` = "photo.jpg"
-  - `div.className` = "box"
-  - `input.value` = "123"
-- **方法 (Method)**：
-  - `button.click()` (假装被点了一下)
-  - `div.remove()` (自杀)
-  - `body.appendChild(newDiv)` (生个孩子)
-
-### 4.3 怎么找节点？(CRUD)
-
-就像在族谱里找人一样，JS 提供了很多方法：
-
-1.  **按身份证找 (ID)**：
-    - `document.getElementById('header')` —— 全局唯一，最快。
-2.  **按特征找 (Selector)**：
-    - `document.querySelector('.card h2')` —— 就像写 CSS 一样找，很灵活。
-3.  **按关系找**：
-    - `element.parentNode` (找爸爸)
-    - `element.children` (找孩子)
-
-### 4.4 性能警告：不要频繁“拆家”
-
-操作 DOM 是很贵的。每次你修改 DOM（比如改大小、改位置），浏览器都要重新计算排版（**Reflow**）和重新绘制（**Repaint**）。
-
-- ❌ **低效**：循环 1000 次，每次往 `body` 里插入一个 `div`。
-- ✅ **高效**：先把 1000 个 `div` 拼好（DocumentFragment），一次性塞进 `body` 里。
-
-这也正是 **Vue / React** 诞生的原因：它们在内存里玩“虚拟 DOM”，计算好最小修改量，最后才去动真正的 DOM，从而保护了性能。
-
----
-
-## 5. 协作实战：三者如何“分工又配合”？
-
-### 5.1 分工对比表
+### 6.1 分工对比表
 
 | 角色           | 负责什么         | 不做什么        | 典型示例                           |
-| :------------- | :--------------- | :-------------- | :--------------------------------- |
+| -------------- | ---------------- | --------------- | ---------------------------------- |
 | **HTML**       | 定义结构与语义   | 不负责样式/交互 | `<section><h1>标题</h1></section>` |
 | **CSS**        | 定义表现与布局   | 不存放业务逻辑  | `.card { border-radius: 8px; }`    |
 | **JavaScript** | 定义行为与数据流 | 不承担视觉表现  | `button.onclick = changeTitle`     |
 
-### 5.2 组合示例：点击改变标题
+### 6.2 一个完整的例子:点击改变标题
 
 ```html
 <!DOCTYPE html>
 <html>
   <head>
+    <!-- CSS 部分 -->
     <style>
       .card {
-        border: 1px solid #ddd;
+        border: 1px solid var(--vp-c-divider);
         padding: 20px;
         border-radius: 8px;
-        background: white;
+        background: var(--vp-c-bg-soft);
       }
+
       .btn {
-        background: #007bff;
+        background: var(--vp-c-brand);
         color: white;
         border: none;
         padding: 10px 20px;
         border-radius: 4px;
         cursor: pointer;
       }
+
+      .btn:hover {
+        opacity: 0.9;
+      }
     </style>
   </head>
   <body>
+    <!-- HTML 部分 -->
     <div class="card">
       <h1 id="title">欢迎</h1>
-      <p>点击按钮改变标题！</p>
+      <p>点击按钮改变标题!</p>
       <button class="btn" onclick="changeTitle()">点击我</button>
     </div>
+
+    <!-- JavaScript 部分 -->
     <script>
       function changeTitle() {
-        document.getElementById('title').textContent = '已点击！'
+        // 找到元素
+        const titleElement = document.getElementById('title')
+
+        // 修改内容
+        titleElement.textContent = '已点击!'
+
+        // 弹出提示
         alert('标题已改变')
       }
     </script>
@@ -449,48 +759,95 @@ graph TD
 </html>
 ```
 
----
+**这个例子展示了三者的协作**:
 
-## 5. 学习路线图
-
-### 5.1 4 周入门节奏
-
-1. **第 1 周：HTML 结构** — 常用标签、语义化、表单与媒体。
-2. **第 2 周：CSS 造型** — 盒模型、选择器、Flexbox、主题色与间距体系。
-3. **第 3 周：JavaScript 互动** — 变量/函数、事件、DOM 操作、模块化。
-4. **第 4 周：整合小项目** — 做一个带样式和交互的单页，练习部署。
-
-### 5.2 进阶方向
-
-- **HTML**：语义化布局、可访问性 (ARIA)、SEO。
-- **CSS**：Grid 布局、响应式设计、CSS 动画与变量。
-- **JavaScript**：ES6+ 语法、异步编程 (Promise/async)、前端框架 (Vue/React)。
+1. **HTML** 定义了页面结构: 卡片、标题、按钮
+2. **CSS** 让页面变好看: 边框、圆角、颜色
+3. **JavaScript** 让页面变活: 点击后改变标题
 
 ---
 
-## 6. 实用工具与资源
+## 7. 学习路线图
 
-- **编辑器**：VS Code（丰富插件）、WebStorm（强力重构）、Sublime Text（轻量）。
-- **浏览器 DevTools**：Elements / Styles / Console / Network / Sources（`F12` 打开）。
-- **在线文档**：MDN Web Docs、W3Schools、freeCodeCamp、Codecademy。
+### 7.1 4 周入门节奏
+
+**第 1 周: HTML 结构**
+
+- 常用标签(div、span、p、h1-h6、a、img)
+- 语义化标签(header、nav、main、footer)
+- 表单元素(input、button、form)
+
+**第 2 周: CSS 造型**
+
+- 盒模型、选择器
+- Flexbox 布局
+- 颜色、字体、间距
+
+**第 3 周: JavaScript 互动**
+
+- 变量、函数、事件
+- DOM 操作
+- ES6+ 新语法
+
+**第 4 周: 整合小项目**
+
+- 做一个带样式和交互的单页
+- 练习部署(后续章节会讲)
+
+### 7.2 进阶方向
+
+**HTML 进阶**:
+
+- 语义化布局
+- 可访问性 (ARIA)
+- SEO 优化
+
+**CSS 进阶**:
+
+- Grid 布局
+- 响应式设计
+- CSS 动画与变量
+
+**JavaScript 进阶**:
+
+- ES6+ 语法
+- 异步编程 (Promise/async)
+- 前端框架 (Vue/React)
 
 ---
 
-## 7. 名词速查表 (Glossary)
+## 8. 名词速查表 (Glossary)
 
-| 名词             | 全称                      | 解释                                     |
-| :--------------- | :------------------------ | :--------------------------------------- |
-| **HTML**         | HyperText Markup Language | 用标签描述网页结构与语义。               |
-| **CSS**          | Cascading Style Sheets    | 控制颜色、布局、动效的样式语言。         |
-| **JavaScript**   | JavaScript                | 让页面具备逻辑与交互的脚本语言。         |
-| **ECMAScript**   | ECMAScript                | JavaScript 的语言标准规范，定义语法规则。 |
-| **ES 标准**      | ECMAScript Standard       | JavaScript 的版本号，如 ES5、ES6、ES2024。 |
-| **ES 模块**      | ES Modules                | ECMAScript 的官方模块化方案（import/export）。 |
-| **TypeScript**   | TypeScript                | JavaScript 的超集，增加了静态类型系统。  |
-| **DOM**          | Document Object Model     | 用对象树表示页面，可被 JS 读写。         |
-| **Flexbox**      | Flexible Box Layout       | 一种一维布局方案，易于对齐与分布。       |
-| **Box Model**    | CSS Box Model             | 元素从内容到外边距的层层盒子。           |
+| 名词           | 英文                      | 用人话解释                                      |
+| -------------- | ------------------------- | ----------------------------------------------- |
+| **HTML**       | HyperText Markup Language | 超文本标记语言。用标签描述网页结构与语义。      |
+| **CSS**        | Cascading Style Sheets    | 层叠样式表。控制颜色、布局、动画的样式语言。    |
+| **JavaScript** | JavaScript                | 网页的肌肉,负责交互和逻辑。                     |
+| **ECMAScript** | ECMAScript                | JavaScript 的语言标准规范,定义语法规则。        |
+| **ES 模块**    | ES Modules                | ECMAScript 的官方模块化方案(import/export)。    |
+| **TypeScript** | TypeScript                | JavaScript 的超集,增加了静态类型系统。          |
+| **DOM**        | Document Object Model     | 文档对象模型。用对象树表示页面,可被 JS 读写。   |
+| **Flexbox**    | Flexible Box Layout       | 一种一维布局方案,易于对齐与分布。               |
+| **盒模型**     | CSS Box Model             | 元素从内容到外边距的层层盒子。                  |
+| **语义化**     | Semantic HTML             | 使用有含义的标签(如 header)而不是无含义的 div。 |
+| **响应式**     | Responsive Design         | 页面自动适配不同屏幕尺寸的设计。                |
 
 ---
 
-现在你已经知道：**HTML 定义骨架，CSS 负责颜值，JavaScript 赋予灵魂**。动手把上面的组合示例改成你自己的页面，实践会让每个概念“立即长在手上”。
+## 总结
+
+现在你已经知道:**HTML 定义骨架,CSS 负责颜值,JavaScript 赋予灵魂**。
+
+这三者是 Web 开发的基石。理解了它们,你就能:
+
+- 看懂任何网页的源代码(右键 → "查看网页源代码")
+- 修改别人的网页(浏览器 DevTools → Elements)
+- 开始学习前端框架(Vue/React),它们都是基于这三者的
+
+**下一步建议**:
+
+- 如果你想快速做出网页,可以学习 **Vue** 或 **React** 框架
+- 如果你想深入理解 CSS,可以学习 **Flexbox** 和 **Grid** 布局
+- 如果你想提升代码质量,可以学习 **TypeScript**
+
+祝你学习愉快!
diff --git a/package-lock.json b/package-lock.json
index 1fca3b0..07bb928 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
         "element-plus": "^2.13.1",
         "typeit": "^8.8.7",
         "viewerjs": "^1.11.7",
-        "vitepress": "2.0.0-alpha.15",
+        "vitepress": "^1.3.0",
         "vue": "^3.5.0"
       },
       "devDependencies": {
@@ -25,125 +25,60 @@
         "node": ">=18.0.0"
       }
     },
-    "node_modules/@adobe/css-tools": {
-      "version": "4.3.3",
-      "resolved": "https://registry.npmmirror.com/@adobe/css-tools/-/css-tools-4.3.3.tgz",
-      "integrity": "sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true
-    },
-    "node_modules/@ai-sdk/gateway": {
-      "version": "2.0.25",
-      "resolved": "https://registry.npmmirror.com/@ai-sdk/gateway/-/gateway-2.0.25.tgz",
-      "integrity": "sha512-Rq+FX55ne7lMiqai7NcvvDZj4HLsr+hg77WayqmySqc6zhw3tIOLxd4Ty6OpwNj0C0bVMi3iCl2zvJIEirh9XA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@ai-sdk/provider": "2.0.1",
-        "@ai-sdk/provider-utils": "3.0.20",
-        "@vercel/oidc": "3.0.5"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "peerDependencies": {
-        "zod": "^3.25.76 || ^4.1.8"
-      }
-    },
-    "node_modules/@ai-sdk/provider": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmmirror.com/@ai-sdk/provider/-/provider-2.0.1.tgz",
-      "integrity": "sha512-KCUwswvsC5VsW2PWFqF8eJgSCu5Ysj7m1TxiHTVA6g7k360bk0RNQENT8KTMAYEs+8fWPD3Uu4dEmzGHc+jGng==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "json-schema": "^0.4.0"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@ai-sdk/provider-utils": {
-      "version": "3.0.20",
-      "resolved": "https://registry.npmmirror.com/@ai-sdk/provider-utils/-/provider-utils-3.0.20.tgz",
-      "integrity": "sha512-iXHVe0apM2zUEzauqJwqmpC37A5rihrStAih5Ks+JE32iTe4LZ58y17UGBjpQQTCRw9YxMeo2UFLxLpBluyvLQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@ai-sdk/provider": "2.0.1",
-        "@standard-schema/spec": "^1.0.0",
-        "eventsource-parser": "^3.0.6"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "peerDependencies": {
-        "zod": "^3.25.76 || ^4.1.8"
-      }
-    },
-    "node_modules/@ai-sdk/react": {
-      "version": "2.0.121",
-      "resolved": "https://registry.npmmirror.com/@ai-sdk/react/-/react-2.0.121.tgz",
-      "integrity": "sha512-VbckviE2ryPaWcecjGXP9zY4CJUqXYoLFfJZJl95XtZL4Gl8X0AuU2p7p6ModCoavHuFw1bfL8k6d0Mu59WROw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@ai-sdk/provider-utils": "3.0.20",
-        "ai": "5.0.119",
-        "swr": "^2.2.5",
-        "throttleit": "2.1.0"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "peerDependencies": {
-        "react": "^18 || ~19.0.1 || ~19.1.2 || ^19.2.1",
-        "zod": "^3.25.76 || ^4.1.8"
-      },
-      "peerDependenciesMeta": {
-        "zod": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@algolia/abtesting": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmmirror.com/@algolia/abtesting/-/abtesting-1.12.2.tgz",
-      "integrity": "sha512-oWknd6wpfNrmRcH0vzed3UPX0i17o4kYLM5OMITyMVM2xLgaRbIafoxL0e8mcrNNb0iORCJA0evnNDKRYth5WQ==",
+      "version": "1.14.0",
+      "resolved": "https://registry.npmmirror.com/@algolia/abtesting/-/abtesting-1.14.0.tgz",
+      "integrity": "sha512-cZfj+1Z1dgrk3YPtNQNt0H9Rr67P8b4M79JjUKGS0d7/EbFbGxGgSu6zby5f22KXo3LT0LZa4O2c6VVbupJuDg==",
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.46.2",
-        "@algolia/requester-browser-xhr": "5.46.2",
-        "@algolia/requester-fetch": "5.46.2",
-        "@algolia/requester-node-http": "5.46.2"
+        "@algolia/client-common": "5.48.0",
+        "@algolia/requester-browser-xhr": "5.48.0",
+        "@algolia/requester-fetch": "5.48.0",
+        "@algolia/requester-node-http": "5.48.0"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/autocomplete-core": {
-      "version": "1.19.2",
-      "resolved": "https://registry.npmmirror.com/@algolia/autocomplete-core/-/autocomplete-core-1.19.2.tgz",
-      "integrity": "sha512-mKv7RyuAzXvwmq+0XRK8HqZXt9iZ5Kkm2huLjgn5JoCPtDy+oh9yxUMfDDaVCw0oyzZ1isdJBc7l9nuCyyR7Nw==",
+      "version": "1.17.7",
+      "resolved": "https://registry.npmmirror.com/@algolia/autocomplete-core/-/autocomplete-core-1.17.7.tgz",
+      "integrity": "sha512-BjiPOW6ks90UKl7TwMv7oNQMnzU+t/wk9mgIDi6b1tXpUek7MW0lbNOUHpvam9pe3lVCf4xPFT+lK7s+e+fs7Q==",
       "license": "MIT",
       "dependencies": {
-        "@algolia/autocomplete-plugin-algolia-insights": "1.19.2",
-        "@algolia/autocomplete-shared": "1.19.2"
+        "@algolia/autocomplete-plugin-algolia-insights": "1.17.7",
+        "@algolia/autocomplete-shared": "1.17.7"
       }
     },
     "node_modules/@algolia/autocomplete-plugin-algolia-insights": {
-      "version": "1.19.2",
-      "resolved": "https://registry.npmmirror.com/@algolia/autocomplete-plugin-algolia-insights/-/autocomplete-plugin-algolia-insights-1.19.2.tgz",
-      "integrity": "sha512-TjxbcC/r4vwmnZaPwrHtkXNeqvlpdyR+oR9Wi2XyfORkiGkLTVhX2j+O9SaCCINbKoDfc+c2PB8NjfOnz7+oKg==",
+      "version": "1.17.7",
+      "resolved": "https://registry.npmmirror.com/@algolia/autocomplete-plugin-algolia-insights/-/autocomplete-plugin-algolia-insights-1.17.7.tgz",
+      "integrity": "sha512-Jca5Ude6yUOuyzjnz57og7Et3aXjbwCSDf/8onLHSQgw1qW3ALl9mrMWaXb5FmPVkV3EtkD2F/+NkT6VHyPu9A==",
       "license": "MIT",
       "dependencies": {
-        "@algolia/autocomplete-shared": "1.19.2"
+        "@algolia/autocomplete-shared": "1.17.7"
       },
       "peerDependencies": {
         "search-insights": ">= 1 < 3"
       }
     },
+    "node_modules/@algolia/autocomplete-preset-algolia": {
+      "version": "1.17.7",
+      "resolved": "https://registry.npmmirror.com/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.17.7.tgz",
+      "integrity": "sha512-ggOQ950+nwbWROq2MOCIL71RE0DdQZsceqrg32UqnhDz8FlO9rL8ONHNsI2R1MH0tkgVIDKI/D0sMiUchsFdWA==",
+      "license": "MIT",
+      "dependencies": {
+        "@algolia/autocomplete-shared": "1.17.7"
+      },
+      "peerDependencies": {
+        "@algolia/client-search": ">= 4.9.1 < 6",
+        "algoliasearch": ">= 4.9.1 < 6"
+      }
+    },
     "node_modules/@algolia/autocomplete-shared": {
-      "version": "1.19.2",
-      "resolved": "https://registry.npmmirror.com/@algolia/autocomplete-shared/-/autocomplete-shared-1.19.2.tgz",
-      "integrity": "sha512-jEazxZTVD2nLrC+wYlVHQgpBoBB5KPStrJxLzsIFl6Kqd1AlG9sIAGl39V5tECLpIQzB3Qa2T6ZPJ1ChkwMK/w==",
+      "version": "1.17.7",
+      "resolved": "https://registry.npmmirror.com/@algolia/autocomplete-shared/-/autocomplete-shared-1.17.7.tgz",
+      "integrity": "sha512-o/1Vurr42U/qskRSuhBH+VKxMvkkUVTLU6WZQr+L5lGZZLYWyhdzWjW0iGXY7EkwRTjBqvN2EsR81yCTGV/kmg==",
       "license": "MIT",
       "peerDependencies": {
         "@algolia/client-search": ">= 4.9.1 < 6",
@@ -151,180 +86,180 @@
       }
     },
     "node_modules/@algolia/client-abtesting": {
-      "version": "5.46.2",
-      "resolved": "https://registry.npmmirror.com/@algolia/client-abtesting/-/client-abtesting-5.46.2.tgz",
-      "integrity": "sha512-oRSUHbylGIuxrlzdPA8FPJuwrLLRavOhAmFGgdAvMcX47XsyM+IOGa9tc7/K5SPvBqn4nhppOCEz7BrzOPWc4A==",
+      "version": "5.48.0",
+      "resolved": "https://registry.npmmirror.com/@algolia/client-abtesting/-/client-abtesting-5.48.0.tgz",
+      "integrity": "sha512-n17WSJ7vazmM6yDkWBAjY12J8ERkW9toOqNgQ1GEZu/Kc4dJDJod1iy+QP5T/UlR3WICgZDi/7a/VX5TY5LAPQ==",
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.46.2",
-        "@algolia/requester-browser-xhr": "5.46.2",
-        "@algolia/requester-fetch": "5.46.2",
-        "@algolia/requester-node-http": "5.46.2"
+        "@algolia/client-common": "5.48.0",
+        "@algolia/requester-browser-xhr": "5.48.0",
+        "@algolia/requester-fetch": "5.48.0",
+        "@algolia/requester-node-http": "5.48.0"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/client-analytics": {
-      "version": "5.46.2",
-      "resolved": "https://registry.npmmirror.com/@algolia/client-analytics/-/client-analytics-5.46.2.tgz",
-      "integrity": "sha512-EPBN2Oruw0maWOF4OgGPfioTvd+gmiNwx0HmD9IgmlS+l75DatcBkKOPNJN+0z3wBQWUO5oq602ATxIfmTQ8bA==",
+      "version": "5.48.0",
+      "resolved": "https://registry.npmmirror.com/@algolia/client-analytics/-/client-analytics-5.48.0.tgz",
+      "integrity": "sha512-v5bMZMEqW9U2l40/tTAaRyn4AKrYLio7KcRuHmLaJtxuJAhvZiE7Y62XIsF070juz4MN3eyvfQmI+y5+OVbZuA==",
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.46.2",
-        "@algolia/requester-browser-xhr": "5.46.2",
-        "@algolia/requester-fetch": "5.46.2",
-        "@algolia/requester-node-http": "5.46.2"
+        "@algolia/client-common": "5.48.0",
+        "@algolia/requester-browser-xhr": "5.48.0",
+        "@algolia/requester-fetch": "5.48.0",
+        "@algolia/requester-node-http": "5.48.0"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/client-common": {
-      "version": "5.46.2",
-      "resolved": "https://registry.npmmirror.com/@algolia/client-common/-/client-common-5.46.2.tgz",
-      "integrity": "sha512-Hj8gswSJNKZ0oyd0wWissqyasm+wTz1oIsv5ZmLarzOZAp3vFEda8bpDQ8PUhO+DfkbiLyVnAxsPe4cGzWtqkg==",
+      "version": "5.48.0",
+      "resolved": "https://registry.npmmirror.com/@algolia/client-common/-/client-common-5.48.0.tgz",
+      "integrity": "sha512-7H3DgRyi7UByScc0wz7EMrhgNl7fKPDjKX9OcWixLwCj7yrRXDSIzwunykuYUUO7V7HD4s319e15FlJ9CQIIFQ==",
       "license": "MIT",
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/client-insights": {
-      "version": "5.46.2",
-      "resolved": "https://registry.npmmirror.com/@algolia/client-insights/-/client-insights-5.46.2.tgz",
-      "integrity": "sha512-6dBZko2jt8FmQcHCbmNLB0kCV079Mx/DJcySTL3wirgDBUH7xhY1pOuUTLMiGkqM5D8moVZTvTdRKZUJRkrwBA==",
+      "version": "5.48.0",
+      "resolved": "https://registry.npmmirror.com/@algolia/client-insights/-/client-insights-5.48.0.tgz",
+      "integrity": "sha512-tXmkB6qrIGAXrtRYHQNpfW0ekru/qymV02bjT0w5QGaGw0W91yT+53WB6dTtRRsIrgS30Al6efBvyaEosjZ5uw==",
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.46.2",
-        "@algolia/requester-browser-xhr": "5.46.2",
-        "@algolia/requester-fetch": "5.46.2",
-        "@algolia/requester-node-http": "5.46.2"
+        "@algolia/client-common": "5.48.0",
+        "@algolia/requester-browser-xhr": "5.48.0",
+        "@algolia/requester-fetch": "5.48.0",
+        "@algolia/requester-node-http": "5.48.0"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/client-personalization": {
-      "version": "5.46.2",
-      "resolved": "https://registry.npmmirror.com/@algolia/client-personalization/-/client-personalization-5.46.2.tgz",
-      "integrity": "sha512-1waE2Uqh/PHNeDXGn/PM/WrmYOBiUGSVxAWqiJIj73jqPqvfzZgzdakHscIVaDl6Cp+j5dwjsZ5LCgaUr6DtmA==",
+      "version": "5.48.0",
+      "resolved": "https://registry.npmmirror.com/@algolia/client-personalization/-/client-personalization-5.48.0.tgz",
+      "integrity": "sha512-4tXEsrdtcBZbDF73u14Kb3otN+xUdTVGop1tBjict+Rc/FhsJQVIwJIcTrOJqmvhtBfc56Bu65FiVOnpAZCxcw==",
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.46.2",
-        "@algolia/requester-browser-xhr": "5.46.2",
-        "@algolia/requester-fetch": "5.46.2",
-        "@algolia/requester-node-http": "5.46.2"
+        "@algolia/client-common": "5.48.0",
+        "@algolia/requester-browser-xhr": "5.48.0",
+        "@algolia/requester-fetch": "5.48.0",
+        "@algolia/requester-node-http": "5.48.0"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/client-query-suggestions": {
-      "version": "5.46.2",
-      "resolved": "https://registry.npmmirror.com/@algolia/client-query-suggestions/-/client-query-suggestions-5.46.2.tgz",
-      "integrity": "sha512-EgOzTZkyDcNL6DV0V/24+oBJ+hKo0wNgyrOX/mePBM9bc9huHxIY2352sXmoZ648JXXY2x//V1kropF/Spx83w==",
+      "version": "5.48.0",
+      "resolved": "https://registry.npmmirror.com/@algolia/client-query-suggestions/-/client-query-suggestions-5.48.0.tgz",
+      "integrity": "sha512-unzSUwWFpsDrO8935RhMAlyK0Ttua/5XveVIwzfjs5w+GVBsHgIkbOe8VbBJccMU/z1LCwvu1AY3kffuSLAR5Q==",
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.46.2",
-        "@algolia/requester-browser-xhr": "5.46.2",
-        "@algolia/requester-fetch": "5.46.2",
-        "@algolia/requester-node-http": "5.46.2"
+        "@algolia/client-common": "5.48.0",
+        "@algolia/requester-browser-xhr": "5.48.0",
+        "@algolia/requester-fetch": "5.48.0",
+        "@algolia/requester-node-http": "5.48.0"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/client-search": {
-      "version": "5.46.2",
-      "resolved": "https://registry.npmmirror.com/@algolia/client-search/-/client-search-5.46.2.tgz",
-      "integrity": "sha512-ZsOJqu4HOG5BlvIFnMU0YKjQ9ZI6r3C31dg2jk5kMWPSdhJpYL9xa5hEe7aieE+707dXeMI4ej3diy6mXdZpgA==",
+      "version": "5.48.0",
+      "resolved": "https://registry.npmmirror.com/@algolia/client-search/-/client-search-5.48.0.tgz",
+      "integrity": "sha512-RB9bKgYTVUiOcEb5bOcZ169jiiVW811dCsJoLT19DcbbFmU4QaK0ghSTssij35QBQ3SCOitXOUrHcGgNVwS7sQ==",
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.46.2",
-        "@algolia/requester-browser-xhr": "5.46.2",
-        "@algolia/requester-fetch": "5.46.2",
-        "@algolia/requester-node-http": "5.46.2"
+        "@algolia/client-common": "5.48.0",
+        "@algolia/requester-browser-xhr": "5.48.0",
+        "@algolia/requester-fetch": "5.48.0",
+        "@algolia/requester-node-http": "5.48.0"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/ingestion": {
-      "version": "1.46.2",
-      "resolved": "https://registry.npmmirror.com/@algolia/ingestion/-/ingestion-1.46.2.tgz",
-      "integrity": "sha512-1Uw2OslTWiOFDtt83y0bGiErJYy5MizadV0nHnOoHFWMoDqWW0kQoMFI65pXqRSkVvit5zjXSLik2xMiyQJDWQ==",
+      "version": "1.48.0",
+      "resolved": "https://registry.npmmirror.com/@algolia/ingestion/-/ingestion-1.48.0.tgz",
+      "integrity": "sha512-rhoSoPu+TDzDpvpk3cY/pYgbeWXr23DxnAIH/AkN0dUC+GCnVIeNSQkLaJ+CL4NZ51cjLIjksrzb4KC5Xu+ktw==",
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.46.2",
-        "@algolia/requester-browser-xhr": "5.46.2",
-        "@algolia/requester-fetch": "5.46.2",
-        "@algolia/requester-node-http": "5.46.2"
+        "@algolia/client-common": "5.48.0",
+        "@algolia/requester-browser-xhr": "5.48.0",
+        "@algolia/requester-fetch": "5.48.0",
+        "@algolia/requester-node-http": "5.48.0"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/monitoring": {
-      "version": "1.46.2",
-      "resolved": "https://registry.npmmirror.com/@algolia/monitoring/-/monitoring-1.46.2.tgz",
-      "integrity": "sha512-xk9f+DPtNcddWN6E7n1hyNNsATBCHIqAvVGG2EAGHJc4AFYL18uM/kMTiOKXE/LKDPyy1JhIerrh9oYb7RBrgw==",
+      "version": "1.48.0",
+      "resolved": "https://registry.npmmirror.com/@algolia/monitoring/-/monitoring-1.48.0.tgz",
+      "integrity": "sha512-aSe6jKvWt+8VdjOaq2ERtsXp9+qMXNJ3mTyTc1VMhNfgPl7ArOhRMRSQ8QBnY8ZL4yV5Xpezb7lAg8pdGrrulg==",
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.46.2",
-        "@algolia/requester-browser-xhr": "5.46.2",
-        "@algolia/requester-fetch": "5.46.2",
-        "@algolia/requester-node-http": "5.46.2"
+        "@algolia/client-common": "5.48.0",
+        "@algolia/requester-browser-xhr": "5.48.0",
+        "@algolia/requester-fetch": "5.48.0",
+        "@algolia/requester-node-http": "5.48.0"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/recommend": {
-      "version": "5.46.2",
-      "resolved": "https://registry.npmmirror.com/@algolia/recommend/-/recommend-5.46.2.tgz",
-      "integrity": "sha512-NApbTPj9LxGzNw4dYnZmj2BoXiAc8NmbbH6qBNzQgXklGklt/xldTvu+FACN6ltFsTzoNU6j2mWNlHQTKGC5+Q==",
+      "version": "5.48.0",
+      "resolved": "https://registry.npmmirror.com/@algolia/recommend/-/recommend-5.48.0.tgz",
+      "integrity": "sha512-p9tfI1bimAaZrdiVExL/dDyGUZ8gyiSHsktP1ZWGzt5hXpM3nhv4tSjyHtXjEKtA0UvsaHKwSfFE8aAAm1eIQA==",
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.46.2",
-        "@algolia/requester-browser-xhr": "5.46.2",
-        "@algolia/requester-fetch": "5.46.2",
-        "@algolia/requester-node-http": "5.46.2"
+        "@algolia/client-common": "5.48.0",
+        "@algolia/requester-browser-xhr": "5.48.0",
+        "@algolia/requester-fetch": "5.48.0",
+        "@algolia/requester-node-http": "5.48.0"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/requester-browser-xhr": {
-      "version": "5.46.2",
-      "resolved": "https://registry.npmmirror.com/@algolia/requester-browser-xhr/-/requester-browser-xhr-5.46.2.tgz",
-      "integrity": "sha512-ekotpCwpSp033DIIrsTpYlGUCF6momkgupRV/FA3m62SreTSZUKjgK6VTNyG7TtYfq9YFm/pnh65bATP/ZWJEg==",
+      "version": "5.48.0",
+      "resolved": "https://registry.npmmirror.com/@algolia/requester-browser-xhr/-/requester-browser-xhr-5.48.0.tgz",
+      "integrity": "sha512-XshyfpsQB7BLnHseMinp3fVHOGlTv6uEHOzNK/3XrEF9mjxoZAcdVfY1OCXObfwRWX5qXZOq8FnrndFd44iVsQ==",
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.46.2"
+        "@algolia/client-common": "5.48.0"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/requester-fetch": {
-      "version": "5.46.2",
-      "resolved": "https://registry.npmmirror.com/@algolia/requester-fetch/-/requester-fetch-5.46.2.tgz",
-      "integrity": "sha512-gKE+ZFi/6y7saTr34wS0SqYFDcjHW4Wminv8PDZEi0/mE99+hSrbKgJWxo2ztb5eqGirQTgIh1AMVacGGWM1iw==",
+      "version": "5.48.0",
+      "resolved": "https://registry.npmmirror.com/@algolia/requester-fetch/-/requester-fetch-5.48.0.tgz",
+      "integrity": "sha512-Q4XNSVQU89bKNAPuvzSYqTH9AcbOOiIo6AeYMQTxgSJ2+uvT78CLPMG89RIIloYuAtSfE07s40OLV50++l1Bbw==",
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.46.2"
+        "@algolia/client-common": "5.48.0"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/requester-node-http": {
-      "version": "5.46.2",
-      "resolved": "https://registry.npmmirror.com/@algolia/requester-node-http/-/requester-node-http-5.46.2.tgz",
-      "integrity": "sha512-ciPihkletp7ttweJ8Zt+GukSVLp2ANJHU+9ttiSxsJZThXc4Y2yJ8HGVWesW5jN1zrsZsezN71KrMx/iZsOYpg==",
+      "version": "5.48.0",
+      "resolved": "https://registry.npmmirror.com/@algolia/requester-node-http/-/requester-node-http-5.48.0.tgz",
+      "integrity": "sha512-ZgxV2+5qt3NLeUYBTsi6PLyHcENQWC0iFppFZekHSEDA2wcLdTUjnaJzimTEULHIvJuLRCkUs4JABdhuJktEag==",
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.46.2"
+        "@algolia/client-common": "5.48.0"
       },
       "engines": {
         "node": ">= 14.0.0"
@@ -385,63 +320,37 @@
         "node": ">=10"
       }
     },
-    "node_modules/@docsearch/core": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmmirror.com/@docsearch/core/-/core-4.4.0.tgz",
-      "integrity": "sha512-kiwNo5KEndOnrf5Kq/e5+D9NBMCFgNsDoRpKQJ9o/xnSlheh6b8AXppMuuUVVdAUIhIfQFk/07VLjjk/fYyKmw==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": ">= 16.8.0 < 20.0.0",
-        "react": ">= 16.8.0 < 20.0.0",
-        "react-dom": ">= 16.8.0 < 20.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "react": {
-          "optional": true
-        },
-        "react-dom": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@docsearch/css": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmmirror.com/@docsearch/css/-/css-4.4.0.tgz",
-      "integrity": "sha512-e9vPgtih6fkawakmYo0Y6V4BKBmDV7Ykudn7ADWXUs5b6pmtBRwDbpSG/WiaUG63G28OkJDEnsMvgIAnZgGwYw==",
+      "version": "3.8.2",
+      "resolved": "https://registry.npmmirror.com/@docsearch/css/-/css-3.8.2.tgz",
+      "integrity": "sha512-y05ayQFyUmCXze79+56v/4HpycYF3uFqB78pLPrSV5ZKAlDuIAAJNhaRi8tTdRNXh05yxX/TyNnzD6LwSM89vQ==",
       "license": "MIT"
     },
     "node_modules/@docsearch/js": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmmirror.com/@docsearch/js/-/js-4.4.0.tgz",
-      "integrity": "sha512-vCiKzjYD54bugUIMZA6YzuLDilkD3TNH/kfbvqsnzxiLTMu8F13psD+hdMSEOn7j+dFJOaf49fZ+gwr+rXctMw==",
+      "version": "3.8.2",
+      "resolved": "https://registry.npmmirror.com/@docsearch/js/-/js-3.8.2.tgz",
+      "integrity": "sha512-Q5wY66qHn0SwA7Taa0aDbHiJvaFJLOJyHmooQ7y8hlwwQLQ/5WwCcoX0g7ii04Qi2DJlHsd0XXzJ8Ypw9+9YmQ==",
       "license": "MIT",
       "dependencies": {
-        "@docsearch/react": "4.4.0",
-        "htm": "3.1.1"
+        "@docsearch/react": "3.8.2",
+        "preact": "^10.0.0"
       }
     },
     "node_modules/@docsearch/react": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmmirror.com/@docsearch/react/-/react-4.4.0.tgz",
-      "integrity": "sha512-z12zeg1mV7WD4Ag4pKSuGukETJLaucVFwszDXL/qLaEgRqxEaVacO9SR1qqnCXvZztlvz2rt7cMqryi/7sKfjA==",
+      "version": "3.8.2",
+      "resolved": "https://registry.npmmirror.com/@docsearch/react/-/react-3.8.2.tgz",
+      "integrity": "sha512-xCRrJQlTt8N9GU0DG4ptwHRkfnSnD/YpdeaXe02iKfqs97TkZJv60yE+1eq/tjPcVnTW8dP5qLP7itifFVV5eg==",
       "license": "MIT",
       "dependencies": {
-        "@ai-sdk/react": "^2.0.30",
-        "@algolia/autocomplete-core": "1.19.2",
-        "@docsearch/core": "4.4.0",
-        "@docsearch/css": "4.4.0",
-        "ai": "^5.0.30",
-        "algoliasearch": "^5.28.0",
-        "marked": "^16.3.0",
-        "zod": "^4.1.8"
+        "@algolia/autocomplete-core": "1.17.7",
+        "@algolia/autocomplete-preset-algolia": "1.17.7",
+        "@docsearch/css": "3.8.2",
+        "algoliasearch": "^5.14.2"
       },
       "peerDependencies": {
-        "@types/react": ">= 16.8.0 < 20.0.0",
-        "react": ">= 16.8.0 < 20.0.0",
-        "react-dom": ">= 16.8.0 < 20.0.0",
+        "@types/react": ">= 16.8.0 < 19.0.0",
+        "react": ">= 16.8.0 < 19.0.0",
+        "react-dom": ">= 16.8.0 < 19.0.0",
         "search-insights": ">= 1 < 3"
       },
       "peerDependenciesMeta": {
@@ -469,9 +378,9 @@
       }
     },
     "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmmirror.com/@esbuild/aix-ppc64/-/aix-ppc64-0.27.2.tgz",
-      "integrity": "sha512-GZMB+a0mOMZs4MpDbj8RJp4cw+w1WV5NYD6xzgvzUJ5Ek2jerwfO2eADyI6ExDSUED+1X8aMbegahsJi+8mgpw==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
       "cpu": [
         "ppc64"
       ],
@@ -481,13 +390,13 @@
         "aix"
       ],
       "engines": {
-        "node": ">=18"
+        "node": ">=12"
       }
     },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmmirror.com/@esbuild/android-arm/-/android-arm-0.27.2.tgz",
-      "integrity": "sha512-DVNI8jlPa7Ujbr1yjU2PfUSRtAUZPG9I1RwW4F4xFB1Imiu2on0ADiI/c3td+KmDtVKNbi+nffGDQMfcIMkwIA==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
+      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
       "cpu": [
         "arm"
       ],
@@ -497,13 +406,13 @@
         "android"
       ],
       "engines": {
-        "node": ">=18"
+        "node": ">=12"
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmmirror.com/@esbuild/android-arm64/-/android-arm64-0.27.2.tgz",
-      "integrity": "sha512-pvz8ZZ7ot/RBphf8fv60ljmaoydPU12VuXHImtAs0XhLLw+EXBi2BLe3OYSBslR4rryHvweW5gmkKFwTiFy6KA==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
+      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
       "cpu": [
         "arm64"
       ],
@@ -513,13 +422,13 @@
         "android"
       ],
       "engines": {
-        "node": ">=18"
+        "node": ">=12"
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmmirror.com/@esbuild/android-x64/-/android-x64-0.27.2.tgz",
-      "integrity": "sha512-z8Ank4Byh4TJJOh4wpz8g2vDy75zFL0TlZlkUkEwYXuPSgX8yzep596n6mT7905kA9uHZsf/o2OJZubl2l3M7A==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
+      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
       "cpu": [
         "x64"
       ],
@@ -529,13 +438,13 @@
         "android"
       ],
       "engines": {
-        "node": ">=18"
+        "node": ">=12"
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmmirror.com/@esbuild/darwin-arm64/-/darwin-arm64-0.27.2.tgz",
-      "integrity": "sha512-davCD2Zc80nzDVRwXTcQP/28fiJbcOwvdolL0sOiOsbwBa72kegmVU0Wrh1MYrbuCL98Omp5dVhQFWRKR2ZAlg==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
+      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
       "cpu": [
         "arm64"
       ],
@@ -545,13 +454,13 @@
         "darwin"
       ],
       "engines": {
-        "node": ">=18"
+        "node": ">=12"
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmmirror.com/@esbuild/darwin-x64/-/darwin-x64-0.27.2.tgz",
-      "integrity": "sha512-ZxtijOmlQCBWGwbVmwOF/UCzuGIbUkqB1faQRf5akQmxRJ1ujusWsb3CVfk/9iZKr2L5SMU5wPBi1UWbvL+VQA==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
+      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
       "cpu": [
         "x64"
       ],
@@ -561,13 +470,13 @@
         "darwin"
       ],
       "engines": {
-        "node": ">=18"
+        "node": ">=12"
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmmirror.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.2.tgz",
-      "integrity": "sha512-lS/9CN+rgqQ9czogxlMcBMGd+l8Q3Nj1MFQwBZJyoEKI50XGxwuzznYdwcav6lpOGv5BqaZXqvBSiB/kJ5op+g==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
+      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
       "cpu": [
         "arm64"
       ],
@@ -577,13 +486,13 @@
         "freebsd"
       ],
       "engines": {
-        "node": ">=18"
+        "node": ">=12"
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmmirror.com/@esbuild/freebsd-x64/-/freebsd-x64-0.27.2.tgz",
-      "integrity": "sha512-tAfqtNYb4YgPnJlEFu4c212HYjQWSO/w/h/lQaBK7RbwGIkBOuNKQI9tqWzx7Wtp7bTPaGC6MJvWI608P3wXYA==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
+      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
       "cpu": [
         "x64"
       ],
@@ -593,13 +502,13 @@
         "freebsd"
       ],
       "engines": {
-        "node": ">=18"
+        "node": ">=12"
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmmirror.com/@esbuild/linux-arm/-/linux-arm-0.27.2.tgz",
-      "integrity": "sha512-vWfq4GaIMP9AIe4yj1ZUW18RDhx6EPQKjwe7n8BbIecFtCQG4CfHGaHuh7fdfq+y3LIA2vGS/o9ZBGVxIDi9hw==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
+      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
       "cpu": [
         "arm"
       ],
@@ -609,13 +518,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">=18"
+        "node": ">=12"
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmmirror.com/@esbuild/linux-arm64/-/linux-arm64-0.27.2.tgz",
-      "integrity": "sha512-hYxN8pr66NsCCiRFkHUAsxylNOcAQaxSSkHMMjcpx0si13t1LHFphxJZUiGwojB1a/Hd5OiPIqDdXONia6bhTw==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
+      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
       "cpu": [
         "arm64"
       ],
@@ -625,13 +534,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">=18"
+        "node": ">=12"
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmmirror.com/@esbuild/linux-ia32/-/linux-ia32-0.27.2.tgz",
-      "integrity": "sha512-MJt5BRRSScPDwG2hLelYhAAKh9imjHK5+NE/tvnRLbIqUWa+0E9N4WNMjmp/kXXPHZGqPLxggwVhz7QP8CTR8w==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
+      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
       "cpu": [
         "ia32"
       ],
@@ -641,13 +550,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">=18"
+        "node": ">=12"
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmmirror.com/@esbuild/linux-loong64/-/linux-loong64-0.27.2.tgz",
-      "integrity": "sha512-lugyF1atnAT463aO6KPshVCJK5NgRnU4yb3FUumyVz+cGvZbontBgzeGFO1nF+dPueHD367a2ZXe1NtUkAjOtg==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
+      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
       "cpu": [
         "loong64"
       ],
@@ -657,13 +566,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">=18"
+        "node": ">=12"
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmmirror.com/@esbuild/linux-mips64el/-/linux-mips64el-0.27.2.tgz",
-      "integrity": "sha512-nlP2I6ArEBewvJ2gjrrkESEZkB5mIoaTswuqNFRv/WYd+ATtUpe9Y09RnJvgvdag7he0OWgEZWhviS1OTOKixw==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
+      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
       "cpu": [
         "mips64el"
       ],
@@ -673,13 +582,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">=18"
+        "node": ">=12"
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmmirror.com/@esbuild/linux-ppc64/-/linux-ppc64-0.27.2.tgz",
-      "integrity": "sha512-C92gnpey7tUQONqg1n6dKVbx3vphKtTHJaNG2Ok9lGwbZil6DrfyecMsp9CrmXGQJmZ7iiVXvvZH6Ml5hL6XdQ==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
       "cpu": [
         "ppc64"
       ],
@@ -689,13 +598,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">=18"
+        "node": ">=12"
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmmirror.com/@esbuild/linux-riscv64/-/linux-riscv64-0.27.2.tgz",
-      "integrity": "sha512-B5BOmojNtUyN8AXlK0QJyvjEZkWwy/FKvakkTDCziX95AowLZKR6aCDhG7LeF7uMCXEJqwa8Bejz5LTPYm8AvA==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
+      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
       "cpu": [
         "riscv64"
       ],
@@ -705,13 +614,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">=18"
+        "node": ">=12"
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmmirror.com/@esbuild/linux-s390x/-/linux-s390x-0.27.2.tgz",
-      "integrity": "sha512-p4bm9+wsPwup5Z8f4EpfN63qNagQ47Ua2znaqGH6bqLlmJ4bx97Y9JdqxgGZ6Y8xVTixUnEkoKSHcpRlDnNr5w==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
+      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
       "cpu": [
         "s390x"
       ],
@@ -721,13 +630,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">=18"
+        "node": ">=12"
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmmirror.com/@esbuild/linux-x64/-/linux-x64-0.27.2.tgz",
-      "integrity": "sha512-uwp2Tip5aPmH+NRUwTcfLb+W32WXjpFejTIOWZFw/v7/KnpCDKG66u4DLcurQpiYTiYwQ9B7KOeMJvLCu/OvbA==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
+      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
       "cpu": [
         "x64"
       ],
@@ -737,29 +646,13 @@
         "linux"
       ],
       "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/netbsd-arm64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmmirror.com/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.2.tgz",
-      "integrity": "sha512-Kj6DiBlwXrPsCRDeRvGAUb/LNrBASrfqAIok+xB0LxK8CHqxZ037viF13ugfsIpePH93mX7xfJp97cyDuTZ3cw==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
-      "engines": {
-        "node": ">=18"
+        "node": ">=12"
       }
     },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmmirror.com/@esbuild/netbsd-x64/-/netbsd-x64-0.27.2.tgz",
-      "integrity": "sha512-HwGDZ0VLVBY3Y+Nw0JexZy9o/nUAWq9MlV7cahpaXKW6TOzfVno3y3/M8Ga8u8Yr7GldLOov27xiCnqRZf0tCA==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
       "cpu": [
         "x64"
       ],
@@ -769,29 +662,13 @@
         "netbsd"
       ],
       "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/openbsd-arm64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmmirror.com/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.2.tgz",
-      "integrity": "sha512-DNIHH2BPQ5551A7oSHD0CKbwIA/Ox7+78/AWkbS5QoRzaqlev2uFayfSxq68EkonB+IKjiuxBFoV8ESJy8bOHA==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
-      "engines": {
-        "node": ">=18"
+        "node": ">=12"
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmmirror.com/@esbuild/openbsd-x64/-/openbsd-x64-0.27.2.tgz",
-      "integrity": "sha512-/it7w9Nb7+0KFIzjalNJVR5bOzA9Vay+yIPLVHfIQYG/j+j9VTH84aNB8ExGKPU4AzfaEvN9/V4HV+F+vo8OEg==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
       "cpu": [
         "x64"
       ],
@@ -801,29 +678,13 @@
         "openbsd"
       ],
       "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@esbuild/openharmony-arm64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmmirror.com/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.2.tgz",
-      "integrity": "sha512-LRBbCmiU51IXfeXk59csuX/aSaToeG7w48nMwA6049Y4J4+VbWALAuXcs+qcD04rHDuSCSRKdmY63sruDS5qag==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openharmony"
-      ],
-      "engines": {
-        "node": ">=18"
+        "node": ">=12"
       }
     },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmmirror.com/@esbuild/sunos-x64/-/sunos-x64-0.27.2.tgz",
-      "integrity": "sha512-kMtx1yqJHTmqaqHPAzKCAkDaKsffmXkPHThSfRwZGyuqyIeBvf08KSsYXl+abf5HDAPMJIPnbBfXvP2ZC2TfHg==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
+      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
       "cpu": [
         "x64"
       ],
@@ -833,13 +694,13 @@
         "sunos"
       ],
       "engines": {
-        "node": ">=18"
+        "node": ">=12"
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmmirror.com/@esbuild/win32-arm64/-/win32-arm64-0.27.2.tgz",
-      "integrity": "sha512-Yaf78O/B3Kkh+nKABUF++bvJv5Ijoy9AN1ww904rOXZFLWVc5OLOfL56W+C8F9xn5JQZa3UX6m+IktJnIb1Jjg==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
+      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
       "cpu": [
         "arm64"
       ],
@@ -849,13 +710,13 @@
         "win32"
       ],
       "engines": {
-        "node": ">=18"
+        "node": ">=12"
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmmirror.com/@esbuild/win32-ia32/-/win32-ia32-0.27.2.tgz",
-      "integrity": "sha512-Iuws0kxo4yusk7sw70Xa2E2imZU5HoixzxfGCdxwBdhiDgt9vX9VUCBhqcwY7/uh//78A1hMkkROMJq9l27oLQ==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
+      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
       "cpu": [
         "ia32"
       ],
@@ -865,13 +726,13 @@
         "win32"
       ],
       "engines": {
-        "node": ">=18"
+        "node": ">=12"
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmmirror.com/@esbuild/win32-x64/-/win32-x64-0.27.2.tgz",
-      "integrity": "sha512-sRdU18mcKf7F+YgheI/zGf5alZatMUTKj/jNS6l744f9u3WFu4v7twcUI9vu4mknF4Y9aDlblIie0IM+5xxaqQ==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
+      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
       "cpu": [
         "x64"
       ],
@@ -881,7 +742,7 @@
         "win32"
       ],
       "engines": {
-        "node": ">=18"
+        "node": ">=12"
       }
     },
     "node_modules/@floating-ui/core": {
@@ -924,51 +785,12 @@
       "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
       "license": "MIT"
     },
-    "node_modules/@isaacs/cliui": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmmirror.com/@isaacs/cliui/-/cliui-8.0.2.tgz",
-      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
-      "license": "ISC",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "string-width": "^5.1.2",
-        "string-width-cjs": "npm:string-width@^4.2.0",
-        "strip-ansi": "^7.0.1",
-        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
-        "wrap-ansi": "^8.1.0",
-        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.5.5",
       "resolved": "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
       "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
       "license": "MIT"
     },
-    "node_modules/@opentelemetry/api": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmmirror.com/@opentelemetry/api/-/api-1.9.0.tgz",
-      "integrity": "sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==",
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
-    "node_modules/@pkgjs/parseargs": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmmirror.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
-      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=14"
-      }
-    },
     "node_modules/@popperjs/core": {
       "name": "@sxzz/popperjs-es",
       "version": "2.11.7",
@@ -980,16 +802,10 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
-    "node_modules/@rolldown/pluginutils": {
-      "version": "1.0.0-beta.53",
-      "resolved": "https://registry.npmmirror.com/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.53.tgz",
-      "integrity": "sha512-vENRlFU4YbrwVqNDZ7fLvy+JR1CRkyr01jhSiDpE1u6py3OMzQfztQU2jxykW3ALNxO4kSlqIDeYyD0Y9RcQeQ==",
-      "license": "MIT"
-    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmmirror.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.55.1.tgz",
-      "integrity": "sha512-9R0DM/ykwfGIlNu6+2U09ga0WXeZ9MRC2Ter8jnz8415VbuIykVuc6bhdrbORFZANDmTDvq26mJrEVTl8TdnDg==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.57.1.tgz",
+      "integrity": "sha512-A6ehUVSiSaaliTxai040ZpZ2zTevHYbvu/lDoeAteHI8QnaosIzm4qwtezfRg1jOYaUmnzLX1AOD6Z+UJjtifg==",
       "cpu": [
         "arm"
       ],
@@ -1000,9 +816,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmmirror.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.55.1.tgz",
-      "integrity": "sha512-eFZCb1YUqhTysgW3sj/55du5cG57S7UTNtdMjCW7LwVcj3dTTcowCsC8p7uBdzKsZYa8J7IDE8lhMI+HX1vQvg==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.57.1.tgz",
+      "integrity": "sha512-dQaAddCY9YgkFHZcFNS/606Exo8vcLHwArFZ7vxXq4rigo2bb494/xKMMwRRQW6ug7Js6yXmBZhSBRuBvCCQ3w==",
       "cpu": [
         "arm64"
       ],
@@ -1013,9 +829,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmmirror.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.55.1.tgz",
-      "integrity": "sha512-p3grE2PHcQm2e8PSGZdzIhCKbMCw/xi9XvMPErPhwO17vxtvCN5FEA2mSLgmKlCjHGMQTP6phuQTYWUnKewwGg==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.57.1.tgz",
+      "integrity": "sha512-crNPrwJOrRxagUYeMn/DZwqN88SDmwaJ8Cvi/TN1HnWBU7GwknckyosC2gd0IqYRsHDEnXf328o9/HC6OkPgOg==",
       "cpu": [
         "arm64"
       ],
@@ -1026,9 +842,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmmirror.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.55.1.tgz",
-      "integrity": "sha512-rDUjG25C9qoTm+e02Esi+aqTKSBYwVTaoS1wxcN47/Luqef57Vgp96xNANwt5npq9GDxsH7kXxNkJVEsWEOEaQ==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.57.1.tgz",
+      "integrity": "sha512-Ji8g8ChVbKrhFtig5QBV7iMaJrGtpHelkB3lsaKzadFBe58gmjfGXAOfI5FV0lYMH8wiqsxKQ1C9B0YTRXVy4w==",
       "cpu": [
         "x64"
       ],
@@ -1039,9 +855,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmmirror.com/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.55.1.tgz",
-      "integrity": "sha512-+JiU7Jbp5cdxekIgdte0jfcu5oqw4GCKr6i3PJTlXTCU5H5Fvtkpbs4XJHRmWNXF+hKmn4v7ogI5OQPaupJgOg==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.57.1.tgz",
+      "integrity": "sha512-R+/WwhsjmwodAcz65guCGFRkMb4gKWTcIeLy60JJQbXrJ97BOXHxnkPFrP+YwFlaS0m+uWJTstrUA9o+UchFug==",
       "cpu": [
         "arm64"
       ],
@@ -1052,9 +868,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmmirror.com/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.55.1.tgz",
-      "integrity": "sha512-V5xC1tOVWtLLmr3YUk2f6EJK4qksksOYiz/TCsFHu/R+woubcLWdC9nZQmwjOAbmExBIVKsm1/wKmEy4z4u4Bw==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.57.1.tgz",
+      "integrity": "sha512-IEQTCHeiTOnAUC3IDQdzRAGj3jOAYNr9kBguI7MQAAZK3caezRrg0GxAb6Hchg4lxdZEI5Oq3iov/w/hnFWY9Q==",
       "cpu": [
         "x64"
       ],
@@ -1065,9 +881,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.55.1.tgz",
-      "integrity": "sha512-Rn3n+FUk2J5VWx+ywrG/HGPTD9jXNbicRtTM11e/uorplArnXZYsVifnPPqNNP5BsO3roI4n8332ukpY/zN7rQ==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.57.1.tgz",
+      "integrity": "sha512-F8sWbhZ7tyuEfsmOxwc2giKDQzN3+kuBLPwwZGyVkLlKGdV1nvnNwYD0fKQ8+XS6hp9nY7B+ZeK01EBUE7aHaw==",
       "cpu": [
         "arm"
       ],
@@ -1078,9 +894,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.55.1.tgz",
-      "integrity": "sha512-grPNWydeKtc1aEdrJDWk4opD7nFtQbMmV7769hiAaYyUKCT1faPRm2av8CX1YJsZ4TLAZcg9gTR1KvEzoLjXkg==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.57.1.tgz",
+      "integrity": "sha512-rGfNUfn0GIeXtBP1wL5MnzSj98+PZe/AXaGBCRmT0ts80lU5CATYGxXukeTX39XBKsxzFpEeK+Mrp9faXOlmrw==",
       "cpu": [
         "arm"
       ],
@@ -1091,9 +907,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.55.1.tgz",
-      "integrity": "sha512-a59mwd1k6x8tXKcUxSyISiquLwB5pX+fJW9TkWU46lCqD/GRDe9uDN31jrMmVP3feI3mhAdvcCClhV8V5MhJFQ==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.57.1.tgz",
+      "integrity": "sha512-MMtej3YHWeg/0klK2Qodf3yrNzz6CGjo2UntLvk2RSPlhzgLvYEB3frRvbEF2wRKh1Z2fDIg9KRPe1fawv7C+g==",
       "cpu": [
         "arm64"
       ],
@@ -1104,9 +920,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.55.1.tgz",
-      "integrity": "sha512-puS1MEgWX5GsHSoiAsF0TYrpomdvkaXm0CofIMG5uVkP6IBV+ZO9xhC5YEN49nsgYo1DuuMquF9+7EDBVYu4uA==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.57.1.tgz",
+      "integrity": "sha512-1a/qhaaOXhqXGpMFMET9VqwZakkljWHLmZOX48R0I/YLbhdxr1m4gtG1Hq7++VhVUmf+L3sTAf9op4JlhQ5u1Q==",
       "cpu": [
         "arm64"
       ],
@@ -1117,9 +933,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-loong64-gnu": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.55.1.tgz",
-      "integrity": "sha512-r3Wv40in+lTsULSb6nnoudVbARdOwb2u5fpeoOAZjFLznp6tDU8kd+GTHmJoqZ9lt6/Sys33KdIHUaQihFcu7g==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.57.1.tgz",
+      "integrity": "sha512-QWO6RQTZ/cqYtJMtxhkRkidoNGXc7ERPbZN7dVW5SdURuLeVU7lwKMpo18XdcmpWYd0qsP1bwKPf7DNSUinhvA==",
       "cpu": [
         "loong64"
       ],
@@ -1130,9 +946,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-loong64-musl": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.55.1.tgz",
-      "integrity": "sha512-MR8c0+UxAlB22Fq4R+aQSPBayvYa3+9DrwG/i1TKQXFYEaoW3B5b/rkSRIypcZDdWjWnpcvxbNaAJDcSbJU3Lw==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.57.1.tgz",
+      "integrity": "sha512-xpObYIf+8gprgWaPP32xiN5RVTi/s5FCR+XMXSKmhfoJjrpRAjCuuqQXyxUa/eJTdAE6eJ+KDKaoEqjZQxh3Gw==",
       "cpu": [
         "loong64"
       ],
@@ -1143,9 +959,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-ppc64-gnu": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.55.1.tgz",
-      "integrity": "sha512-3KhoECe1BRlSYpMTeVrD4sh2Pw2xgt4jzNSZIIPLFEsnQn9gAnZagW9+VqDqAHgm1Xc77LzJOo2LdigS5qZ+gw==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.57.1.tgz",
+      "integrity": "sha512-4BrCgrpZo4hvzMDKRqEaW1zeecScDCR+2nZ86ATLhAoJ5FQ+lbHVD3ttKe74/c7tNT9c6F2viwB3ufwp01Oh2w==",
       "cpu": [
         "ppc64"
       ],
@@ -1156,9 +972,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-ppc64-musl": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.55.1.tgz",
-      "integrity": "sha512-ziR1OuZx0vdYZZ30vueNZTg73alF59DicYrPViG0NEgDVN8/Jl87zkAPu4u6VjZST2llgEUjaiNl9JM6HH1Vdw==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.57.1.tgz",
+      "integrity": "sha512-NOlUuzesGauESAyEYFSe3QTUguL+lvrN1HtwEEsU2rOwdUDeTMJdO5dUYl/2hKf9jWydJrO9OL/XSSf65R5+Xw==",
       "cpu": [
         "ppc64"
       ],
@@ -1169,9 +985,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.55.1.tgz",
-      "integrity": "sha512-uW0Y12ih2XJRERZ4jAfKamTyIHVMPQnTZcQjme2HMVDAHY4amf5u414OqNYC+x+LzRdRcnIG1YodLrrtA8xsxw==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.57.1.tgz",
+      "integrity": "sha512-ptA88htVp0AwUUqhVghwDIKlvJMD/fmL/wrQj99PRHFRAG6Z5nbWoWG4o81Nt9FT+IuqUQi+L31ZKAFeJ5Is+A==",
       "cpu": [
         "riscv64"
       ],
@@ -1182,9 +998,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-musl": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.55.1.tgz",
-      "integrity": "sha512-u9yZ0jUkOED1BFrqu3BwMQoixvGHGZ+JhJNkNKY/hyoEgOwlqKb62qu+7UjbPSHYjiVy8kKJHvXKv5coH4wDeg==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.57.1.tgz",
+      "integrity": "sha512-S51t7aMMTNdmAMPpBg7OOsTdn4tySRQvklmL3RpDRyknk87+Sp3xaumlatU+ppQ+5raY7sSTcC2beGgvhENfuw==",
       "cpu": [
         "riscv64"
       ],
@@ -1195,9 +1011,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.55.1.tgz",
-      "integrity": "sha512-/0PenBCmqM4ZUd0190j7J0UsQ/1nsi735iPRakO8iPciE7BQ495Y6msPzaOmvx0/pn+eJVVlZrNrSh4WSYLxNg==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.57.1.tgz",
+      "integrity": "sha512-Bl00OFnVFkL82FHbEqy3k5CUCKH6OEJL54KCyx2oqsmZnFTR8IoNqBF+mjQVcRCT5sB6yOvK8A37LNm/kPJiZg==",
       "cpu": [
         "s390x"
       ],
@@ -1208,9 +1024,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.55.1.tgz",
-      "integrity": "sha512-a8G4wiQxQG2BAvo+gU6XrReRRqj+pLS2NGXKm8io19goR+K8lw269eTrPkSdDTALwMmJp4th2Uh0D8J9bEV1vg==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.57.1.tgz",
+      "integrity": "sha512-ABca4ceT4N+Tv/GtotnWAeXZUZuM/9AQyCyKYyKnpk4yoA7QIAuBt6Hkgpw8kActYlew2mvckXkvx0FfoInnLg==",
       "cpu": [
         "x64"
       ],
@@ -1221,9 +1037,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.55.1.tgz",
-      "integrity": "sha512-bD+zjpFrMpP/hqkfEcnjXWHMw5BIghGisOKPj+2NaNDuVT+8Ds4mPf3XcPHuat1tz89WRL+1wbcxKY3WSbiT7w==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.57.1.tgz",
+      "integrity": "sha512-HFps0JeGtuOR2convgRRkHCekD7j+gdAuXM+/i6kGzQtFhlCtQkpwtNzkNj6QhCDp7DRJ7+qC/1Vg2jt5iSOFw==",
       "cpu": [
         "x64"
       ],
@@ -1234,9 +1050,9 @@
       ]
     },
     "node_modules/@rollup/rollup-openbsd-x64": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmmirror.com/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.55.1.tgz",
-      "integrity": "sha512-eLXw0dOiqE4QmvikfQ6yjgkg/xDM+MdU9YJuP4ySTibXU0oAvnEWXt7UDJmD4UkYialMfOGFPJnIHSe/kdzPxg==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.57.1.tgz",
+      "integrity": "sha512-H+hXEv9gdVQuDTgnqD+SQffoWoc0Of59AStSzTEj/feWTBAnSfSD3+Dql1ZruJQxmykT/JVY0dE8Ka7z0DH1hw==",
       "cpu": [
         "x64"
       ],
@@ -1247,9 +1063,9 @@
       ]
     },
     "node_modules/@rollup/rollup-openharmony-arm64": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmmirror.com/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.55.1.tgz",
-      "integrity": "sha512-xzm44KgEP11te3S2HCSyYf5zIzWmx3n8HDCc7EE59+lTcswEWNpvMLfd9uJvVX8LCg9QWG67Xt75AuHn4vgsXw==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.57.1.tgz",
+      "integrity": "sha512-4wYoDpNg6o/oPximyc/NG+mYUejZrCU2q+2w6YZqrAs2UcNUChIZXjtafAiiZSUc7On8v5NyNj34Kzj/Ltk6dQ==",
       "cpu": [
         "arm64"
       ],
@@ -1260,9 +1076,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmmirror.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.55.1.tgz",
-      "integrity": "sha512-yR6Bl3tMC/gBok5cz/Qi0xYnVbIxGx5Fcf/ca0eB6/6JwOY+SRUcJfI0OpeTpPls7f194as62thCt/2BjxYN8g==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.57.1.tgz",
+      "integrity": "sha512-O54mtsV/6LW3P8qdTcamQmuC990HDfR71lo44oZMZlXU4tzLrbvTii87Ni9opq60ds0YzuAlEr/GNwuNluZyMQ==",
       "cpu": [
         "arm64"
       ],
@@ -1273,9 +1089,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmmirror.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.55.1.tgz",
-      "integrity": "sha512-3fZBidchE0eY0oFZBnekYCfg+5wAB0mbpCBuofh5mZuzIU/4jIVkbESmd2dOsFNS78b53CYv3OAtwqkZZmU5nA==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.57.1.tgz",
+      "integrity": "sha512-P3dLS+IerxCT/7D2q2FYcRdWRl22dNbrbBEtxdWhXrfIMPP9lQhb5h4Du04mdl5Woq05jVCDPCMF7Ub0NAjIew==",
       "cpu": [
         "ia32"
       ],
@@ -1286,9 +1102,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-gnu": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmmirror.com/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.55.1.tgz",
-      "integrity": "sha512-xGGY5pXj69IxKb4yv/POoocPy/qmEGhimy/FoTpTSVju3FYXUQQMFCaZZXJVidsmGxRioZAwpThl/4zX41gRKg==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.57.1.tgz",
+      "integrity": "sha512-VMBH2eOOaKGtIJYleXsi2B8CPVADrh+TyNxJ4mWPnKfLB/DBUmzW+5m1xUrcwWoMfSLagIRpjUFeW5CO5hyciQ==",
       "cpu": [
         "x64"
       ],
@@ -1299,9 +1115,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmmirror.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.55.1.tgz",
-      "integrity": "sha512-SPEpaL6DX4rmcXtnhdrQYgzQ5W2uW3SCJch88lB2zImhJRhIIK44fkUrgIV/Q8yUNfw5oyZ5vkeQsZLhCb06lw==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmmirror.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.57.1.tgz",
+      "integrity": "sha512-mxRFDdHIWRxg3UfIIAwCm6NzvxG0jDX/wBN6KsQFTvKFqqg9vTrWUE68qEjHt19A5wwx5X5aUi2zuZT7YR0jrA==",
       "cpu": [
         "x64"
       ],
@@ -1312,70 +1128,72 @@
       ]
     },
     "node_modules/@shikijs/core": {
-      "version": "3.21.0",
-      "resolved": "https://registry.npmmirror.com/@shikijs/core/-/core-3.21.0.tgz",
-      "integrity": "sha512-AXSQu/2n1UIQekY8euBJlvFYZIw0PHY63jUzGbrOma4wPxzznJXTXkri+QcHeBNaFxiiOljKxxJkVSoB3PjbyA==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmmirror.com/@shikijs/core/-/core-2.5.0.tgz",
+      "integrity": "sha512-uu/8RExTKtavlpH7XqnVYBrfBkUc20ngXiX9NSrBhOVZYv/7XQRKUyhtkeflY5QsxC0GbJThCerruZfsUaSldg==",
       "license": "MIT",
       "dependencies": {
-        "@shikijs/types": "3.21.0",
+        "@shikijs/engine-javascript": "2.5.0",
+        "@shikijs/engine-oniguruma": "2.5.0",
+        "@shikijs/types": "2.5.0",
         "@shikijs/vscode-textmate": "^10.0.2",
         "@types/hast": "^3.0.4",
-        "hast-util-to-html": "^9.0.5"
+        "hast-util-to-html": "^9.0.4"
       }
     },
     "node_modules/@shikijs/engine-javascript": {
-      "version": "3.21.0",
-      "resolved": "https://registry.npmmirror.com/@shikijs/engine-javascript/-/engine-javascript-3.21.0.tgz",
-      "integrity": "sha512-ATwv86xlbmfD9n9gKRiwuPpWgPENAWCLwYCGz9ugTJlsO2kOzhOkvoyV/UD+tJ0uT7YRyD530x6ugNSffmvIiQ==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmmirror.com/@shikijs/engine-javascript/-/engine-javascript-2.5.0.tgz",
+      "integrity": "sha512-VjnOpnQf8WuCEZtNUdjjwGUbtAVKuZkVQ/5cHy/tojVVRIRtlWMYVjyWhxOmIq05AlSOv72z7hRNRGVBgQOl0w==",
       "license": "MIT",
       "dependencies": {
-        "@shikijs/types": "3.21.0",
+        "@shikijs/types": "2.5.0",
         "@shikijs/vscode-textmate": "^10.0.2",
-        "oniguruma-to-es": "^4.3.4"
+        "oniguruma-to-es": "^3.1.0"
       }
     },
     "node_modules/@shikijs/engine-oniguruma": {
-      "version": "3.21.0",
-      "resolved": "https://registry.npmmirror.com/@shikijs/engine-oniguruma/-/engine-oniguruma-3.21.0.tgz",
-      "integrity": "sha512-OYknTCct6qiwpQDqDdf3iedRdzj6hFlOPv5hMvI+hkWfCKs5mlJ4TXziBG9nyabLwGulrUjHiCq3xCspSzErYQ==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmmirror.com/@shikijs/engine-oniguruma/-/engine-oniguruma-2.5.0.tgz",
+      "integrity": "sha512-pGd1wRATzbo/uatrCIILlAdFVKdxImWJGQ5rFiB5VZi2ve5xj3Ax9jny8QvkaV93btQEwR/rSz5ERFpC5mKNIw==",
       "license": "MIT",
       "dependencies": {
-        "@shikijs/types": "3.21.0",
+        "@shikijs/types": "2.5.0",
         "@shikijs/vscode-textmate": "^10.0.2"
       }
     },
     "node_modules/@shikijs/langs": {
-      "version": "3.21.0",
-      "resolved": "https://registry.npmmirror.com/@shikijs/langs/-/langs-3.21.0.tgz",
-      "integrity": "sha512-g6mn5m+Y6GBJ4wxmBYqalK9Sp0CFkUqfNzUy2pJglUginz6ZpWbaWjDB4fbQ/8SHzFjYbtU6Ddlp1pc+PPNDVA==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmmirror.com/@shikijs/langs/-/langs-2.5.0.tgz",
+      "integrity": "sha512-Qfrrt5OsNH5R+5tJ/3uYBBZv3SuGmnRPejV9IlIbFH3HTGLDlkqgHymAlzklVmKBjAaVmkPkyikAV/sQ1wSL+w==",
       "license": "MIT",
       "dependencies": {
-        "@shikijs/types": "3.21.0"
+        "@shikijs/types": "2.5.0"
       }
     },
     "node_modules/@shikijs/themes": {
-      "version": "3.21.0",
-      "resolved": "https://registry.npmmirror.com/@shikijs/themes/-/themes-3.21.0.tgz",
-      "integrity": "sha512-BAE4cr9EDiZyYzwIHEk7JTBJ9CzlPuM4PchfcA5ao1dWXb25nv6hYsoDiBq2aZK9E3dlt3WB78uI96UESD+8Mw==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmmirror.com/@shikijs/themes/-/themes-2.5.0.tgz",
+      "integrity": "sha512-wGrk+R8tJnO0VMzmUExHR+QdSaPUl/NKs+a4cQQRWyoc3YFbUzuLEi/KWK1hj+8BfHRKm2jNhhJck1dfstJpiw==",
       "license": "MIT",
       "dependencies": {
-        "@shikijs/types": "3.21.0"
+        "@shikijs/types": "2.5.0"
       }
     },
     "node_modules/@shikijs/transformers": {
-      "version": "3.21.0",
-      "resolved": "https://registry.npmmirror.com/@shikijs/transformers/-/transformers-3.21.0.tgz",
-      "integrity": "sha512-CZwvCWWIiRRiFk9/JKzdEooakAP8mQDtBOQ1TKiCaS2E1bYtyBCOkUzS8akO34/7ufICQ29oeSfkb3tT5KtrhA==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmmirror.com/@shikijs/transformers/-/transformers-2.5.0.tgz",
+      "integrity": "sha512-SI494W5X60CaUwgi8u4q4m4s3YAFSxln3tzNjOSYqq54wlVgz0/NbbXEb3mdLbqMBztcmS7bVTaEd2w0qMmfeg==",
       "license": "MIT",
       "dependencies": {
-        "@shikijs/core": "3.21.0",
-        "@shikijs/types": "3.21.0"
+        "@shikijs/core": "2.5.0",
+        "@shikijs/types": "2.5.0"
       }
     },
     "node_modules/@shikijs/types": {
-      "version": "3.21.0",
-      "resolved": "https://registry.npmmirror.com/@shikijs/types/-/types-3.21.0.tgz",
-      "integrity": "sha512-zGrWOxZ0/+0ovPY7PvBU2gIS9tmhSUUt30jAcNV0Bq0gb2S98gwfjIs1vxlmH5zM7/4YxLamT6ChlqqAJmPPjA==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmmirror.com/@shikijs/types/-/types-2.5.0.tgz",
+      "integrity": "sha512-ygl5yhxki9ZLNuNpPitBWvcy9fsSKKaRuO4BAlMyagszQidxcpLAr0qiW/q43DtSIDxO6hEbtYLiFZNXO/hdGw==",
       "license": "MIT",
       "dependencies": {
         "@shikijs/vscode-textmate": "^10.0.2",
@@ -1388,12 +1206,6 @@
       "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==",
       "license": "MIT"
     },
-    "node_modules/@standard-schema/spec": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmmirror.com/@standard-schema/spec/-/spec-1.1.0.tgz",
-      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
-      "license": "MIT"
-    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.8.tgz",
@@ -1479,28 +1291,16 @@
       "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
       "license": "ISC"
     },
-    "node_modules/@vercel/oidc": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmmirror.com/@vercel/oidc/-/oidc-3.0.5.tgz",
-      "integrity": "sha512-fnYhv671l+eTTp48gB4zEsTW/YtRgRPnkI2nT7x6qw5rkI1Lq2hTmQIpHPgyThI0znLK+vX2n9XxKdXZ7BUbbw==",
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">= 20"
-      }
-    },
     "node_modules/@vitejs/plugin-vue": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-6.0.3.tgz",
-      "integrity": "sha512-TlGPkLFLVOY3T7fZrwdvKpjprR3s4fxRln0ORDo1VQ7HHyxJwTlrjKU3kpVWTlaAjIEuCTokmjkZnr8Tpc925w==",
+      "version": "5.2.4",
+      "resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-5.2.4.tgz",
+      "integrity": "sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA==",
       "license": "MIT",
-      "dependencies": {
-        "@rolldown/pluginutils": "1.0.0-beta.53"
-      },
       "engines": {
-        "node": "^20.19.0 || >=22.12.0"
+        "node": "^18.0.0 || >=20.0.0"
       },
       "peerDependencies": {
-        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0",
+        "vite": "^5.0.0 || ^6.0.0",
         "vue": "^3.2.25"
       }
     },
@@ -1555,33 +1355,33 @@
       }
     },
     "node_modules/@vue/devtools-api": {
-      "version": "8.0.5",
-      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-8.0.5.tgz",
-      "integrity": "sha512-DgVcW8H/Nral7LgZEecYFFYXnAvGuN9C3L3DtWekAncFBedBczpNW8iHKExfaM559Zm8wQWrwtYZ9lXthEHtDw==",
+      "version": "7.7.9",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-7.7.9.tgz",
+      "integrity": "sha512-kIE8wvwlcZ6TJTbNeU2HQNtaxLx3a84aotTITUuL/4bzfPxzajGBOoqjMhwZJ8L9qFYDU/lAYMEEm11dnZOD6g==",
       "license": "MIT",
       "dependencies": {
-        "@vue/devtools-kit": "^8.0.5"
+        "@vue/devtools-kit": "^7.7.9"
       }
     },
     "node_modules/@vue/devtools-kit": {
-      "version": "8.0.5",
-      "resolved": "https://registry.npmmirror.com/@vue/devtools-kit/-/devtools-kit-8.0.5.tgz",
-      "integrity": "sha512-q2VV6x1U3KJMTQPUlRMyWEKVbcHuxhqJdSr6Jtjz5uAThAIrfJ6WVZdGZm5cuO63ZnSUz0RCsVwiUUb0mDV0Yg==",
+      "version": "7.7.9",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-kit/-/devtools-kit-7.7.9.tgz",
+      "integrity": "sha512-PyQ6odHSgiDVd4hnTP+aDk2X4gl2HmLDfiyEnn3/oV+ckFDuswRs4IbBT7vacMuGdwY/XemxBoh302ctbsptuA==",
       "license": "MIT",
       "dependencies": {
-        "@vue/devtools-shared": "^8.0.5",
-        "birpc": "^2.6.1",
+        "@vue/devtools-shared": "^7.7.9",
+        "birpc": "^2.3.0",
         "hookable": "^5.5.3",
         "mitt": "^3.0.1",
-        "perfect-debounce": "^2.0.0",
+        "perfect-debounce": "^1.0.0",
         "speakingurl": "^14.0.1",
         "superjson": "^2.2.2"
       }
     },
     "node_modules/@vue/devtools-shared": {
-      "version": "8.0.5",
-      "resolved": "https://registry.npmmirror.com/@vue/devtools-shared/-/devtools-shared-8.0.5.tgz",
-      "integrity": "sha512-bRLn6/spxpmgLk+iwOrR29KrYnJjG9DGpHGkDFG82UM21ZpJ39ztUT9OXX3g+usW7/b2z+h46I9ZiYyB07XMXg==",
+      "version": "7.7.9",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-shared/-/devtools-shared-7.7.9.tgz",
+      "integrity": "sha512-iWAb0v2WYf0QWmxCGy0seZNDPdO3Sp5+u78ORnyeonS6MT4PC7VPrryX2BpMJrwlDeaZ6BD4vP4XKjK0SZqaeA==",
       "license": "MIT",
       "dependencies": {
         "rfdc": "^1.4.1"
@@ -1679,13 +1479,14 @@
       }
     },
     "node_modules/@vueuse/integrations": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmmirror.com/@vueuse/integrations/-/integrations-14.1.0.tgz",
-      "integrity": "sha512-eNQPdisnO9SvdydTIXnTE7c29yOsJBD/xkwEyQLdhDC/LKbqrFpXHb3uS//7NcIrQO3fWVuvMGp8dbK6mNEMCA==",
+      "version": "12.8.2",
+      "resolved": "https://registry.npmmirror.com/@vueuse/integrations/-/integrations-12.8.2.tgz",
+      "integrity": "sha512-fbGYivgK5uBTRt7p5F3zy6VrETlV9RtZjBqd1/HxGdjdckBgBM4ugP8LHpjolqTj14TXTxSK1ZfgPbHYyGuH7g==",
       "license": "MIT",
       "dependencies": {
-        "@vueuse/core": "14.1.0",
-        "@vueuse/shared": "14.1.0"
+        "@vueuse/core": "12.8.2",
+        "@vueuse/shared": "12.8.2",
+        "vue": "^3.5.13"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
@@ -1702,8 +1503,7 @@
         "nprogress": "^0.2",
         "qrcode": "^1.5",
         "sortablejs": "^1",
-        "universal-cookie": "^7 || ^8",
-        "vue": "^3.5.0"
+        "universal-cookie": "^7"
       },
       "peerDependenciesMeta": {
         "async-validator": {
@@ -1751,41 +1551,39 @@
       "license": "MIT"
     },
     "node_modules/@vueuse/integrations/node_modules/@vueuse/core": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-14.1.0.tgz",
-      "integrity": "sha512-rgBinKs07hAYyPF834mDTigH7BtPqvZ3Pryuzt1SD/lg5wEcWqvwzXXYGEDb2/cP0Sj5zSvHl3WkmMELr5kfWw==",
+      "version": "12.8.2",
+      "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-12.8.2.tgz",
+      "integrity": "sha512-HbvCmZdzAu3VGi/pWYm5Ut+Kd9mn1ZHnn4L5G8kOQTPs/IwIAmJoBrmYk2ckLArgMXZj0AW3n5CAejLUO+PhdQ==",
       "license": "MIT",
       "dependencies": {
         "@types/web-bluetooth": "^0.0.21",
-        "@vueuse/metadata": "14.1.0",
-        "@vueuse/shared": "14.1.0"
+        "@vueuse/metadata": "12.8.2",
+        "@vueuse/shared": "12.8.2",
+        "vue": "^3.5.13"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "vue": "^3.5.0"
       }
     },
     "node_modules/@vueuse/integrations/node_modules/@vueuse/metadata": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-14.1.0.tgz",
-      "integrity": "sha512-7hK4g015rWn2PhKcZ99NyT+ZD9sbwm7SGvp7k+k+rKGWnLjS/oQozoIZzWfCewSUeBmnJkIb+CNr7Zc/EyRnnA==",
+      "version": "12.8.2",
+      "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-12.8.2.tgz",
+      "integrity": "sha512-rAyLGEuoBJ/Il5AmFHiziCPdQzRt88VxR+Y/A/QhJ1EWtWqPBBAxTAFaSkviwEuOEZNtW8pvkPgoCZQ+HxqW1A==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/@vueuse/integrations/node_modules/@vueuse/shared": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-14.1.0.tgz",
-      "integrity": "sha512-EcKxtYvn6gx1F8z9J5/rsg3+lTQnvOruQd8fUecW99DCK04BkWD7z5KQ/wTAx+DazyoEE9dJt/zV8OIEQbM6kw==",
+      "version": "12.8.2",
+      "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-12.8.2.tgz",
+      "integrity": "sha512-dznP38YzxZoNloI0qpEfpkms8knDtaoQ6Y/sfS0L7Yki4zh40LFHEhur0odJC6xTHG5dxWVPiUWBXn+wCG2s5w==",
       "license": "MIT",
+      "dependencies": {
+        "vue": "^3.5.13"
+      },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "vue": "^3.5.0"
       }
     },
     "node_modules/@vueuse/metadata": {
@@ -1846,44 +1644,26 @@
         "node": ">=14.6"
       }
     },
-    "node_modules/ai": {
-      "version": "5.0.119",
-      "resolved": "https://registry.npmmirror.com/ai/-/ai-5.0.119.tgz",
-      "integrity": "sha512-HUOwhc17fl2SZTJGZyA/99aNu706qKfXaUBCy9vgZiXBwrxg2eTzn2BCz7kmYDsfx6Fg2ACBy2icm41bsDXCTw==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@ai-sdk/gateway": "2.0.25",
-        "@ai-sdk/provider": "2.0.1",
-        "@ai-sdk/provider-utils": "3.0.20",
-        "@opentelemetry/api": "1.9.0"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "peerDependencies": {
-        "zod": "^3.25.76 || ^4.1.8"
-      }
-    },
     "node_modules/algoliasearch": {
-      "version": "5.46.2",
-      "resolved": "https://registry.npmmirror.com/algoliasearch/-/algoliasearch-5.46.2.tgz",
-      "integrity": "sha512-qqAXW9QvKf2tTyhpDA4qXv1IfBwD2eduSW6tUEBFIfCeE9gn9HQ9I5+MaKoenRuHrzk5sQoNh1/iof8mY7uD6Q==",
+      "version": "5.48.0",
+      "resolved": "https://registry.npmmirror.com/algoliasearch/-/algoliasearch-5.48.0.tgz",
+      "integrity": "sha512-aD8EQC6KEman6/S79FtPdQmB7D4af/etcRL/KwiKFKgAE62iU8c5PeEQvpvIcBPurC3O/4Lj78nOl7ZcoazqSw==",
       "license": "MIT",
       "dependencies": {
-        "@algolia/abtesting": "1.12.2",
-        "@algolia/client-abtesting": "5.46.2",
-        "@algolia/client-analytics": "5.46.2",
-        "@algolia/client-common": "5.46.2",
-        "@algolia/client-insights": "5.46.2",
-        "@algolia/client-personalization": "5.46.2",
-        "@algolia/client-query-suggestions": "5.46.2",
-        "@algolia/client-search": "5.46.2",
-        "@algolia/ingestion": "1.46.2",
-        "@algolia/monitoring": "1.46.2",
-        "@algolia/recommend": "5.46.2",
-        "@algolia/requester-browser-xhr": "5.46.2",
-        "@algolia/requester-fetch": "5.46.2",
-        "@algolia/requester-node-http": "5.46.2"
+        "@algolia/abtesting": "1.14.0",
+        "@algolia/client-abtesting": "5.48.0",
+        "@algolia/client-analytics": "5.48.0",
+        "@algolia/client-common": "5.48.0",
+        "@algolia/client-insights": "5.48.0",
+        "@algolia/client-personalization": "5.48.0",
+        "@algolia/client-query-suggestions": "5.48.0",
+        "@algolia/client-search": "5.48.0",
+        "@algolia/ingestion": "1.48.0",
+        "@algolia/monitoring": "1.48.0",
+        "@algolia/recommend": "5.48.0",
+        "@algolia/requester-browser-xhr": "5.48.0",
+        "@algolia/requester-fetch": "5.48.0",
+        "@algolia/requester-node-http": "5.48.0"
       },
       "engines": {
         "node": ">= 14.0.0"
@@ -1900,48 +1680,12 @@
         "node": ">=6"
       }
     },
-    "node_modules/ansi-regex": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-6.2.2.tgz",
-      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
-    "node_modules/ansi-styles": {
-      "version": "6.2.3",
-      "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-6.2.3.tgz",
-      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
     "node_modules/async-validator": {
       "version": "4.2.5",
       "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz",
       "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==",
       "license": "MIT"
     },
-    "node_modules/balanced-match": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/birpc": {
       "version": "2.9.0",
       "resolved": "https://registry.npmmirror.com/birpc/-/birpc-2.9.0.tgz",
@@ -1959,17 +1703,6 @@
       "optional": true,
       "peer": true
     },
-    "node_modules/brace-expansion": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-2.0.2.tgz",
-      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
     "node_modules/ccount": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/ccount/-/ccount-2.0.1.tgz",
@@ -2047,28 +1780,6 @@
       "integrity": "sha512-j7oSibqQdIODNhkI1sEJzHMiPsF43L/GqNbcA+eDDyGM10+x2sH9NW/PK6vM3z0J2tLDKMBcc5ZjVaoRinhuCA==",
       "license": "ISC"
     },
-    "node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/comma-separated-tokens": {
       "version": "2.0.3",
       "resolved": "https://registry.npmmirror.com/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
@@ -2105,22 +1816,6 @@
         "url": "https://github.com/sponsors/mesqueeb"
       }
     },
-    "node_modules/cross-spawn": {
-      "version": "7.0.6",
-      "resolved": "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-7.0.6.tgz",
-      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/css-select": {
       "version": "4.3.0",
       "resolved": "https://registry.npmmirror.com/css-select/-/css-select-4.3.0.tgz",
@@ -2165,25 +1860,6 @@
       "integrity": "sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==",
       "license": "MIT"
     },
-    "node_modules/debug": {
-      "version": "4.4.3",
-      "resolved": "https://registry.npmmirror.com/debug/-/debug-4.4.3.tgz",
-      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "ms": "^2.1.3"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/dequal": {
       "version": "2.0.3",
       "resolved": "https://registry.npmmirror.com/dequal/-/dequal-2.0.3.tgz",
@@ -2280,14 +1956,6 @@
         "url": "https://github.com/fb55/domutils?sponsor=1"
       }
     },
-    "node_modules/eastasianwidth": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmmirror.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/element-plus": {
       "version": "2.13.1",
       "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.13.1.tgz",
@@ -2313,13 +1981,11 @@
         "vue": "^3.3.0"
       }
     },
-    "node_modules/emoji-regex": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true
+    "node_modules/emoji-regex-xs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/emoji-regex-xs/-/emoji-regex-xs-1.0.0.tgz",
+      "integrity": "sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==",
+      "license": "MIT"
     },
     "node_modules/entities": {
       "version": "7.0.0",
@@ -2334,44 +2000,41 @@
       }
     },
     "node_modules/esbuild": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.27.2.tgz",
-      "integrity": "sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw==",
+      "version": "0.21.5",
+      "resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.21.5.tgz",
+      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
         "esbuild": "bin/esbuild"
       },
       "engines": {
-        "node": ">=18"
+        "node": ">=12"
       },
       "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.27.2",
-        "@esbuild/android-arm": "0.27.2",
-        "@esbuild/android-arm64": "0.27.2",
-        "@esbuild/android-x64": "0.27.2",
-        "@esbuild/darwin-arm64": "0.27.2",
-        "@esbuild/darwin-x64": "0.27.2",
-        "@esbuild/freebsd-arm64": "0.27.2",
-        "@esbuild/freebsd-x64": "0.27.2",
-        "@esbuild/linux-arm": "0.27.2",
-        "@esbuild/linux-arm64": "0.27.2",
-        "@esbuild/linux-ia32": "0.27.2",
-        "@esbuild/linux-loong64": "0.27.2",
-        "@esbuild/linux-mips64el": "0.27.2",
-        "@esbuild/linux-ppc64": "0.27.2",
-        "@esbuild/linux-riscv64": "0.27.2",
-        "@esbuild/linux-s390x": "0.27.2",
-        "@esbuild/linux-x64": "0.27.2",
-        "@esbuild/netbsd-arm64": "0.27.2",
-        "@esbuild/netbsd-x64": "0.27.2",
-        "@esbuild/openbsd-arm64": "0.27.2",
-        "@esbuild/openbsd-x64": "0.27.2",
-        "@esbuild/openharmony-arm64": "0.27.2",
-        "@esbuild/sunos-x64": "0.27.2",
-        "@esbuild/win32-arm64": "0.27.2",
-        "@esbuild/win32-ia32": "0.27.2",
-        "@esbuild/win32-x64": "0.27.2"
+        "@esbuild/aix-ppc64": "0.21.5",
+        "@esbuild/android-arm": "0.21.5",
+        "@esbuild/android-arm64": "0.21.5",
+        "@esbuild/android-x64": "0.21.5",
+        "@esbuild/darwin-arm64": "0.21.5",
+        "@esbuild/darwin-x64": "0.21.5",
+        "@esbuild/freebsd-arm64": "0.21.5",
+        "@esbuild/freebsd-x64": "0.21.5",
+        "@esbuild/linux-arm": "0.21.5",
+        "@esbuild/linux-arm64": "0.21.5",
+        "@esbuild/linux-ia32": "0.21.5",
+        "@esbuild/linux-loong64": "0.21.5",
+        "@esbuild/linux-mips64el": "0.21.5",
+        "@esbuild/linux-ppc64": "0.21.5",
+        "@esbuild/linux-riscv64": "0.21.5",
+        "@esbuild/linux-s390x": "0.21.5",
+        "@esbuild/linux-x64": "0.21.5",
+        "@esbuild/netbsd-x64": "0.21.5",
+        "@esbuild/openbsd-x64": "0.21.5",
+        "@esbuild/sunos-x64": "0.21.5",
+        "@esbuild/win32-arm64": "0.21.5",
+        "@esbuild/win32-ia32": "0.21.5",
+        "@esbuild/win32-x64": "0.21.5"
       }
     },
     "node_modules/escape-goat": {
@@ -2405,32 +2068,6 @@
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
       "license": "MIT"
     },
-    "node_modules/eventsource-parser": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmmirror.com/eventsource-parser/-/eventsource-parser-3.0.6.tgz",
-      "integrity": "sha512-Vo1ab+QXPzZ4tCa8SwIHJFaSzy4R6SHf7BY79rFBDf0idraZWAkYrDjDj8uWaSm3S2TK+hJ7/t1CEmZ7jXw+pg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
-    "node_modules/fdir": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmmirror.com/fdir/-/fdir-6.5.0.tgz",
-      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=12.0.0"
-      },
-      "peerDependencies": {
-        "picomatch": "^3 || ^4"
-      },
-      "peerDependenciesMeta": {
-        "picomatch": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/focus-trap": {
       "version": "7.8.0",
       "resolved": "https://registry.npmmirror.com/focus-trap/-/focus-trap-7.8.0.tgz",
@@ -2440,24 +2077,6 @@
         "tabbable": "^6.4.0"
       }
     },
-    "node_modules/foreground-child": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmmirror.com/foreground-child/-/foreground-child-3.3.1.tgz",
-      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
-      "license": "ISC",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "cross-spawn": "^7.0.6",
-        "signal-exit": "^4.0.1"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz",
@@ -2472,28 +2091,6 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
-    "node_modules/glob": {
-      "version": "10.5.0",
-      "resolved": "https://registry.npmmirror.com/glob/-/glob-10.5.0.tgz",
-      "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==",
-      "license": "ISC",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "foreground-child": "^3.1.0",
-        "jackspeak": "^3.1.2",
-        "minimatch": "^9.0.4",
-        "minipass": "^7.1.2",
-        "package-json-from-dist": "^1.0.0",
-        "path-scurry": "^1.11.1"
-      },
-      "bin": {
-        "glob": "dist/esm/bin.mjs"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/hast-util-to-html": {
       "version": "9.0.5",
       "resolved": "https://registry.npmmirror.com/hast-util-to-html/-/hast-util-to-html-9.0.5.tgz",
@@ -2536,12 +2133,6 @@
       "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
       "license": "MIT"
     },
-    "node_modules/htm": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmmirror.com/htm/-/htm-3.1.1.tgz",
-      "integrity": "sha512-983Vyg8NwUE7JkZ6NmOqpCZ+sh1bKv2iYTlUkzlWmA5JD2acKoxd4KVxbMmxX/85mtfdnDmTFoNKcg5DGAvxNQ==",
-      "license": "Apache-2.0"
-    },
     "node_modules/html-void-elements": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/html-void-elements/-/html-void-elements-3.0.0.tgz",
@@ -2584,17 +2175,6 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
-    "node_modules/is-fullwidth-code-point": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/is-what": {
       "version": "5.5.0",
       "resolved": "https://registry.npmmirror.com/is-what/-/is-what-5.5.0.tgz",
@@ -2607,37 +2187,6 @@
         "url": "https://github.com/sponsors/mesqueeb"
       }
     },
-    "node_modules/isexe": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmmirror.com/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "license": "ISC",
-      "optional": true,
-      "peer": true
-    },
-    "node_modules/jackspeak": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmmirror.com/jackspeak/-/jackspeak-3.4.3.tgz",
-      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
-      "license": "BlueOak-1.0.0",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@isaacs/cliui": "^8.0.2"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      },
-      "optionalDependencies": {
-        "@pkgjs/parseargs": "^0.11.0"
-      }
-    },
-    "node_modules/json-schema": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmmirror.com/json-schema/-/json-schema-0.4.0.tgz",
-      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
-      "license": "(AFL-2.1 OR BSD-3-Clause)"
-    },
     "node_modules/juice": {
       "version": "8.1.0",
       "resolved": "https://registry.npmmirror.com/juice/-/juice-8.1.0.tgz",
@@ -2695,14 +2244,6 @@
         "lodash-es": "*"
       }
     },
-    "node_modules/lru-cache": {
-      "version": "10.4.3",
-      "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-10.4.3.tgz",
-      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
-      "license": "ISC",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.21.tgz",
@@ -2740,18 +2281,6 @@
         "mathjax-full": "^3.2.0"
       }
     },
-    "node_modules/marked": {
-      "version": "16.4.2",
-      "resolved": "https://registry.npmmirror.com/marked/-/marked-16.4.2.tgz",
-      "integrity": "sha512-TI3V8YYWvkVf3KJe1dRkpnjs68JUPyEa5vjKrp1XEEJUAOaQc+Qj+L1qWbPd0SJuAdQkFU0h73sXXqwDYxsiDA==",
-      "license": "MIT",
-      "bin": {
-        "marked": "bin/marked.js"
-      },
-      "engines": {
-        "node": ">= 20"
-      }
-    },
     "node_modules/match-at": {
       "version": "0.1.1",
       "resolved": "https://registry.npmmirror.com/match-at/-/match-at-0.1.1.tgz",
@@ -2918,34 +2447,6 @@
         "node": ">=4.0.0"
       }
     },
-    "node_modules/minimatch": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-9.0.5.tgz",
-      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
-      "license": "ISC",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/minipass": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmmirror.com/minipass/-/minipass-7.1.2.tgz",
-      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
-      "license": "ISC",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
     "node_modules/minisearch": {
       "version": "7.2.0",
       "resolved": "https://registry.npmmirror.com/minisearch/-/minisearch-7.2.0.tgz",
@@ -2966,14 +2467,6 @@
       "optional": true,
       "peer": true
     },
-    "node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.11.tgz",
@@ -3034,31 +2527,17 @@
         "url": "https://github.com/fb55/nth-check?sponsor=1"
       }
     },
-    "node_modules/oniguruma-parser": {
-      "version": "0.12.1",
-      "resolved": "https://registry.npmmirror.com/oniguruma-parser/-/oniguruma-parser-0.12.1.tgz",
-      "integrity": "sha512-8Unqkvk1RYc6yq2WBYRj4hdnsAxVze8i7iPfQr8e4uSP3tRv0rpZcbGUDvxfQQcdwHt/e9PrMvGCsa8OqG9X3w==",
-      "license": "MIT"
-    },
     "node_modules/oniguruma-to-es": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmmirror.com/oniguruma-to-es/-/oniguruma-to-es-4.3.4.tgz",
-      "integrity": "sha512-3VhUGN3w2eYxnTzHn+ikMI+fp/96KoRSVK9/kMTcFqj1NRDh2IhQCKvYxDnWePKRXY/AqH+Fuiyb7VHSzBjHfA==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmmirror.com/oniguruma-to-es/-/oniguruma-to-es-3.1.1.tgz",
+      "integrity": "sha512-bUH8SDvPkH3ho3dvwJwfonjlQ4R80vjyvrU8YpxuROddv55vAEJrTuCuCVUhhsHbtlD9tGGbaNApGQckXhS8iQ==",
       "license": "MIT",
       "dependencies": {
-        "oniguruma-parser": "^0.12.1",
+        "emoji-regex-xs": "^1.0.0",
         "regex": "^6.0.1",
         "regex-recursion": "^6.0.2"
       }
     },
-    "node_modules/package-json-from-dist": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmmirror.com/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
-      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
-      "license": "BlueOak-1.0.0",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/parse5": {
       "version": "6.0.1",
       "resolved": "https://registry.npmmirror.com/parse5/-/parse5-6.0.1.tgz",
@@ -3078,39 +2557,10 @@
         "parse5": "^6.0.1"
       }
     },
-    "node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmmirror.com/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/path-scurry": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmmirror.com/path-scurry/-/path-scurry-1.11.1.tgz",
-      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
-      "license": "BlueOak-1.0.0",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "lru-cache": "^10.2.0",
-        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/perfect-debounce": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmmirror.com/perfect-debounce/-/perfect-debounce-2.0.0.tgz",
-      "integrity": "sha512-fkEH/OBiKrqqI/yIgjR92lMfs2K8105zt/VT6+7eTjNwisrsh47CeIED9z58zI7DfKdH3uHAn25ziRZn3kgAow==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
+      "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
       "license": "MIT"
     },
     "node_modules/picocolors": {
@@ -3119,18 +2569,6 @@
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
       "license": "ISC"
     },
-    "node_modules/picomatch": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-4.0.3.tgz",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
     "node_modules/postcss": {
       "version": "8.5.6",
       "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.5.6.tgz",
@@ -3159,6 +2597,16 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/preact": {
+      "version": "10.28.3",
+      "resolved": "https://registry.npmmirror.com/preact/-/preact-10.28.3.tgz",
+      "integrity": "sha512-tCmoRkPQLpBeWzpmbhryairGnhW9tKV6c6gr/w+RhoRoKEJwsjzipwp//1oCpGPOchvSLaAPlpcJi9MwMmoPyA==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
+    },
     "node_modules/prettier": {
       "version": "3.7.4",
       "resolved": "https://registry.npmmirror.com/prettier/-/prettier-3.7.4.tgz",
@@ -3185,16 +2633,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/react": {
-      "version": "19.2.3",
-      "resolved": "https://registry.npmmirror.com/react/-/react-19.2.3.tgz",
-      "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/regex": {
       "version": "6.1.0",
       "resolved": "https://registry.npmmirror.com/regex/-/regex-6.1.0.tgz",
@@ -3226,9 +2664,9 @@
       "license": "MIT"
     },
     "node_modules/rollup": {
-      "version": "4.55.1",
-      "resolved": "https://registry.npmmirror.com/rollup/-/rollup-4.55.1.tgz",
-      "integrity": "sha512-wDv/Ht1BNHB4upNbK74s9usvl7hObDnvVzknxqY/E/O3X6rW1U1rV1aENEfJ54eFZDTNo7zv1f5N4edCluH7+A==",
+      "version": "4.57.1",
+      "resolved": "https://registry.npmmirror.com/rollup/-/rollup-4.57.1.tgz",
+      "integrity": "sha512-oQL6lgK3e2QZeQ7gcgIkS2YZPg5slw37hYufJ3edKlfQSGGm8ICoxswK15ntSzF/a8+h7ekRy7k7oWc3BQ7y8A==",
       "license": "MIT",
       "dependencies": {
         "@types/estree": "1.0.8"
@@ -3241,45 +2679,34 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.55.1",
-        "@rollup/rollup-android-arm64": "4.55.1",
-        "@rollup/rollup-darwin-arm64": "4.55.1",
-        "@rollup/rollup-darwin-x64": "4.55.1",
-        "@rollup/rollup-freebsd-arm64": "4.55.1",
-        "@rollup/rollup-freebsd-x64": "4.55.1",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.55.1",
-        "@rollup/rollup-linux-arm-musleabihf": "4.55.1",
-        "@rollup/rollup-linux-arm64-gnu": "4.55.1",
-        "@rollup/rollup-linux-arm64-musl": "4.55.1",
-        "@rollup/rollup-linux-loong64-gnu": "4.55.1",
-        "@rollup/rollup-linux-loong64-musl": "4.55.1",
-        "@rollup/rollup-linux-ppc64-gnu": "4.55.1",
-        "@rollup/rollup-linux-ppc64-musl": "4.55.1",
-        "@rollup/rollup-linux-riscv64-gnu": "4.55.1",
-        "@rollup/rollup-linux-riscv64-musl": "4.55.1",
-        "@rollup/rollup-linux-s390x-gnu": "4.55.1",
-        "@rollup/rollup-linux-x64-gnu": "4.55.1",
-        "@rollup/rollup-linux-x64-musl": "4.55.1",
-        "@rollup/rollup-openbsd-x64": "4.55.1",
-        "@rollup/rollup-openharmony-arm64": "4.55.1",
-        "@rollup/rollup-win32-arm64-msvc": "4.55.1",
-        "@rollup/rollup-win32-ia32-msvc": "4.55.1",
-        "@rollup/rollup-win32-x64-gnu": "4.55.1",
-        "@rollup/rollup-win32-x64-msvc": "4.55.1",
+        "@rollup/rollup-android-arm-eabi": "4.57.1",
+        "@rollup/rollup-android-arm64": "4.57.1",
+        "@rollup/rollup-darwin-arm64": "4.57.1",
+        "@rollup/rollup-darwin-x64": "4.57.1",
+        "@rollup/rollup-freebsd-arm64": "4.57.1",
+        "@rollup/rollup-freebsd-x64": "4.57.1",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.57.1",
+        "@rollup/rollup-linux-arm-musleabihf": "4.57.1",
+        "@rollup/rollup-linux-arm64-gnu": "4.57.1",
+        "@rollup/rollup-linux-arm64-musl": "4.57.1",
+        "@rollup/rollup-linux-loong64-gnu": "4.57.1",
+        "@rollup/rollup-linux-loong64-musl": "4.57.1",
+        "@rollup/rollup-linux-ppc64-gnu": "4.57.1",
+        "@rollup/rollup-linux-ppc64-musl": "4.57.1",
+        "@rollup/rollup-linux-riscv64-gnu": "4.57.1",
+        "@rollup/rollup-linux-riscv64-musl": "4.57.1",
+        "@rollup/rollup-linux-s390x-gnu": "4.57.1",
+        "@rollup/rollup-linux-x64-gnu": "4.57.1",
+        "@rollup/rollup-linux-x64-musl": "4.57.1",
+        "@rollup/rollup-openbsd-x64": "4.57.1",
+        "@rollup/rollup-openharmony-arm64": "4.57.1",
+        "@rollup/rollup-win32-arm64-msvc": "4.57.1",
+        "@rollup/rollup-win32-ia32-msvc": "4.57.1",
+        "@rollup/rollup-win32-x64-gnu": "4.57.1",
+        "@rollup/rollup-win32-x64-msvc": "4.57.1",
         "fsevents": "~2.3.2"
       }
     },
-    "node_modules/sax": {
-      "version": "1.4.4",
-      "resolved": "https://registry.npmmirror.com/sax/-/sax-1.4.4.tgz",
-      "integrity": "sha512-1n3r/tGXO6b6VXMdFT54SHzT9ytu9yr7TaELowdYpMqY/Ao7EnlQGmAQ1+RatX7Tkkdm6hONI2owqNx2aZj5Sw==",
-      "license": "BlueOak-1.0.0",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=11.0.0"
-      }
-    },
     "node_modules/search-insights": {
       "version": "2.17.3",
       "resolved": "https://registry.npmmirror.com/search-insights/-/search-insights-2.17.3.tgz",
@@ -3287,61 +2714,22 @@
       "license": "MIT",
       "peer": true
     },
-    "node_modules/shebang-command": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmmirror.com/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "shebang-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmmirror.com/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/shiki": {
-      "version": "3.21.0",
-      "resolved": "https://registry.npmmirror.com/shiki/-/shiki-3.21.0.tgz",
-      "integrity": "sha512-N65B/3bqL/TI2crrXr+4UivctrAGEjmsib5rPMMPpFp1xAx/w03v8WZ9RDDFYteXoEgY7qZ4HGgl5KBIu1153w==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmmirror.com/shiki/-/shiki-2.5.0.tgz",
+      "integrity": "sha512-mI//trrsaiCIPsja5CNfsyNOqgAZUb6VpJA+340toL42UpzQlXpwRV9nch69X6gaUxrr9kaOOa6e3y3uAkGFxQ==",
       "license": "MIT",
       "dependencies": {
-        "@shikijs/core": "3.21.0",
-        "@shikijs/engine-javascript": "3.21.0",
-        "@shikijs/engine-oniguruma": "3.21.0",
-        "@shikijs/langs": "3.21.0",
-        "@shikijs/themes": "3.21.0",
-        "@shikijs/types": "3.21.0",
+        "@shikijs/core": "2.5.0",
+        "@shikijs/engine-javascript": "2.5.0",
+        "@shikijs/engine-oniguruma": "2.5.0",
+        "@shikijs/langs": "2.5.0",
+        "@shikijs/themes": "2.5.0",
+        "@shikijs/types": "2.5.0",
         "@shikijs/vscode-textmate": "^10.0.2",
         "@types/hast": "^3.0.4"
       }
     },
-    "node_modules/signal-exit": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmmirror.com/signal-exit/-/signal-exit-4.1.0.tgz",
-      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
-      "license": "ISC",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/slick": {
       "version": "1.12.2",
       "resolved": "https://registry.npmmirror.com/slick/-/slick-1.12.2.tgz",
@@ -3353,17 +2741,6 @@
         "node": "*"
       }
     },
-    "node_modules/source-map": {
-      "version": "0.7.6",
-      "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.7.6.tgz",
-      "integrity": "sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==",
-      "license": "BSD-3-Clause",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">= 12"
-      }
-    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -3419,75 +2796,6 @@
         "node": ">=18"
       }
     },
-    "node_modules/string-width": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmmirror.com/string-width/-/string-width-5.1.2.tgz",
-      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "eastasianwidth": "^0.2.0",
-        "emoji-regex": "^9.2.2",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/string-width-cjs": {
-      "name": "string-width",
-      "version": "4.2.3",
-      "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/string-width-cjs/node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/string-width-cjs/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true
-    },
-    "node_modules/string-width-cjs/node_modules/strip-ansi": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/stringify-entities": {
       "version": "4.0.4",
       "resolved": "https://registry.npmmirror.com/stringify-entities/-/stringify-entities-4.0.4.tgz",
@@ -3502,73 +2810,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/strip-ansi": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-7.1.2.tgz",
-      "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "ansi-regex": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-      }
-    },
-    "node_modules/strip-ansi-cjs": {
-      "name": "strip-ansi",
-      "version": "6.0.1",
-      "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/strip-ansi-cjs/node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/stylus": {
-      "version": "0.64.0",
-      "resolved": "https://registry.npmmirror.com/stylus/-/stylus-0.64.0.tgz",
-      "integrity": "sha512-ZIdT8eUv8tegmqy1tTIdJv9We2DumkNZFdCF5mz/Kpq3OcTaxSuCAYZge6HKK2CmNC02G1eJig2RV7XTw5hQrA==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@adobe/css-tools": "~4.3.3",
-        "debug": "^4.3.2",
-        "glob": "^10.4.5",
-        "sax": "~1.4.1",
-        "source-map": "^0.7.3"
-      },
-      "bin": {
-        "stylus": "bin/stylus"
-      },
-      "engines": {
-        "node": ">=16"
-      },
-      "funding": {
-        "url": "https://opencollective.com/stylus"
-      }
-    },
     "node_modules/superjson": {
       "version": "2.2.6",
       "resolved": "https://registry.npmmirror.com/superjson/-/superjson-2.2.6.tgz",
@@ -3581,53 +2822,12 @@
         "node": ">=16"
       }
     },
-    "node_modules/swr": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmmirror.com/swr/-/swr-2.3.8.tgz",
-      "integrity": "sha512-gaCPRVoMq8WGDcWj9p4YWzCMPHzE0WNl6W8ADIx9c3JBEIdMkJGMzW+uzXvxHMltwcYACr9jP+32H8/hgwMR7w==",
-      "license": "MIT",
-      "dependencies": {
-        "dequal": "^2.0.3",
-        "use-sync-external-store": "^1.6.0"
-      },
-      "peerDependencies": {
-        "react": "^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    },
     "node_modules/tabbable": {
       "version": "6.4.0",
       "resolved": "https://registry.npmmirror.com/tabbable/-/tabbable-6.4.0.tgz",
       "integrity": "sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==",
       "license": "MIT"
     },
-    "node_modules/throttleit": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmmirror.com/throttleit/-/throttleit-2.1.0.tgz",
-      "integrity": "sha512-nt6AMGKW1p/70DF/hGBdJB57B8Tspmbp5gfJ8ilhLnt7kkr2ye7hzD6NVG8GGErk2HWF34igrL2CXmNIkzKqKw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/tinyglobby": {
-      "version": "0.2.15",
-      "resolved": "https://registry.npmmirror.com/tinyglobby/-/tinyglobby-0.2.15.tgz",
-      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
-      "license": "MIT",
-      "dependencies": {
-        "fdir": "^6.5.0",
-        "picomatch": "^4.0.3"
-      },
-      "engines": {
-        "node": ">=12.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/SuperchupuDev"
-      }
-    },
     "node_modules/tr46": {
       "version": "0.0.3",
       "resolved": "https://registry.npmmirror.com/tr46/-/tr46-0.0.3.tgz",
@@ -3704,9 +2904,9 @@
       }
     },
     "node_modules/unist-util-visit": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmmirror.com/unist-util-visit/-/unist-util-visit-5.0.0.tgz",
-      "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmmirror.com/unist-util-visit/-/unist-util-visit-5.1.0.tgz",
+      "integrity": "sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==",
       "license": "MIT",
       "dependencies": {
         "@types/unist": "^3.0.0",
@@ -3732,15 +2932,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/use-sync-external-store": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmmirror.com/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
-      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    },
     "node_modules/valid-data-url": {
       "version": "3.0.1",
       "resolved": "https://registry.npmmirror.com/valid-data-url/-/valid-data-url-3.0.1.tgz",
@@ -3787,23 +2978,20 @@
       "license": "MIT"
     },
     "node_modules/vite": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmmirror.com/vite/-/vite-7.3.1.tgz",
-      "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
+      "version": "5.4.21",
+      "resolved": "https://registry.npmmirror.com/vite/-/vite-5.4.21.tgz",
+      "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
       "license": "MIT",
       "dependencies": {
-        "esbuild": "^0.27.0",
-        "fdir": "^6.5.0",
-        "picomatch": "^4.0.3",
-        "postcss": "^8.5.6",
-        "rollup": "^4.43.0",
-        "tinyglobby": "^0.2.15"
+        "esbuild": "^0.21.3",
+        "postcss": "^8.4.43",
+        "rollup": "^4.20.0"
       },
       "bin": {
         "vite": "bin/vite.js"
       },
       "engines": {
-        "node": "^20.19.0 || >=22.12.0"
+        "node": "^18.0.0 || >=20.0.0"
       },
       "funding": {
         "url": "https://github.com/vitejs/vite?sponsor=1"
@@ -3812,25 +3000,19 @@
         "fsevents": "~2.3.3"
       },
       "peerDependencies": {
-        "@types/node": "^20.19.0 || >=22.12.0",
-        "jiti": ">=1.21.0",
-        "less": "^4.0.0",
+        "@types/node": "^18.0.0 || >=20.0.0",
+        "less": "*",
         "lightningcss": "^1.21.0",
-        "sass": "^1.70.0",
-        "sass-embedded": "^1.70.0",
-        "stylus": ">=0.54.8",
-        "sugarss": "^5.0.0",
-        "terser": "^5.16.0",
-        "tsx": "^4.8.1",
-        "yaml": "^2.4.2"
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.4.0"
       },
       "peerDependenciesMeta": {
         "@types/node": {
           "optional": true
         },
-        "jiti": {
-          "optional": true
-        },
         "less": {
           "optional": true
         },
@@ -3851,55 +3033,45 @@
         },
         "terser": {
           "optional": true
-        },
-        "tsx": {
-          "optional": true
-        },
-        "yaml": {
-          "optional": true
         }
       }
     },
     "node_modules/vitepress": {
-      "version": "2.0.0-alpha.15",
-      "resolved": "https://registry.npmmirror.com/vitepress/-/vitepress-2.0.0-alpha.15.tgz",
-      "integrity": "sha512-jhjSYd10Z6RZiKOa7jy0xMVf5NB5oSc/lS3bD/QoUc6V8PrvQR5JhC9104NEt6+oTGY/ftieVWxY9v7YI+1IjA==",
+      "version": "1.6.4",
+      "resolved": "https://registry.npmmirror.com/vitepress/-/vitepress-1.6.4.tgz",
+      "integrity": "sha512-+2ym1/+0VVrbhNyRoFFesVvBvHAVMZMK0rw60E3X/5349M1GuVdKeazuksqopEdvkKwKGs21Q729jX81/bkBJg==",
       "license": "MIT",
       "dependencies": {
-        "@docsearch/css": "^4.3.2",
-        "@docsearch/js": "^4.3.2",
-        "@iconify-json/simple-icons": "^1.2.59",
-        "@shikijs/core": "^3.15.0",
-        "@shikijs/transformers": "^3.15.0",
-        "@shikijs/types": "^3.15.0",
+        "@docsearch/css": "3.8.2",
+        "@docsearch/js": "3.8.2",
+        "@iconify-json/simple-icons": "^1.2.21",
+        "@shikijs/core": "^2.1.0",
+        "@shikijs/transformers": "^2.1.0",
+        "@shikijs/types": "^2.1.0",
         "@types/markdown-it": "^14.1.2",
-        "@vitejs/plugin-vue": "^6.0.1",
-        "@vue/devtools-api": "^8.0.5",
-        "@vue/shared": "^3.5.24",
-        "@vueuse/core": "^14.0.0",
-        "@vueuse/integrations": "^14.0.0",
-        "focus-trap": "^7.6.6",
+        "@vitejs/plugin-vue": "^5.2.1",
+        "@vue/devtools-api": "^7.7.0",
+        "@vue/shared": "^3.5.13",
+        "@vueuse/core": "^12.4.0",
+        "@vueuse/integrations": "^12.4.0",
+        "focus-trap": "^7.6.4",
         "mark.js": "8.11.1",
-        "minisearch": "^7.2.0",
-        "shiki": "^3.15.0",
-        "vite": "^7.2.2",
-        "vue": "^3.5.24"
+        "minisearch": "^7.1.1",
+        "shiki": "^2.1.0",
+        "vite": "^5.4.14",
+        "vue": "^3.5.13"
       },
       "bin": {
         "vitepress": "bin/vitepress.js"
       },
       "peerDependencies": {
         "markdown-it-mathjax3": "^4",
-        "oxc-minify": "*",
         "postcss": "^8"
       },
       "peerDependenciesMeta": {
         "markdown-it-mathjax3": {
           "optional": true
         },
-        "oxc-minify": {
-          "optional": true
-        },
         "postcss": {
           "optional": true
         }
@@ -3912,41 +3084,39 @@
       "license": "MIT"
     },
     "node_modules/vitepress/node_modules/@vueuse/core": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-14.1.0.tgz",
-      "integrity": "sha512-rgBinKs07hAYyPF834mDTigH7BtPqvZ3Pryuzt1SD/lg5wEcWqvwzXXYGEDb2/cP0Sj5zSvHl3WkmMELr5kfWw==",
+      "version": "12.8.2",
+      "resolved": "https://registry.npmmirror.com/@vueuse/core/-/core-12.8.2.tgz",
+      "integrity": "sha512-HbvCmZdzAu3VGi/pWYm5Ut+Kd9mn1ZHnn4L5G8kOQTPs/IwIAmJoBrmYk2ckLArgMXZj0AW3n5CAejLUO+PhdQ==",
       "license": "MIT",
       "dependencies": {
         "@types/web-bluetooth": "^0.0.21",
-        "@vueuse/metadata": "14.1.0",
-        "@vueuse/shared": "14.1.0"
+        "@vueuse/metadata": "12.8.2",
+        "@vueuse/shared": "12.8.2",
+        "vue": "^3.5.13"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "vue": "^3.5.0"
       }
     },
     "node_modules/vitepress/node_modules/@vueuse/metadata": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-14.1.0.tgz",
-      "integrity": "sha512-7hK4g015rWn2PhKcZ99NyT+ZD9sbwm7SGvp7k+k+rKGWnLjS/oQozoIZzWfCewSUeBmnJkIb+CNr7Zc/EyRnnA==",
+      "version": "12.8.2",
+      "resolved": "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-12.8.2.tgz",
+      "integrity": "sha512-rAyLGEuoBJ/Il5AmFHiziCPdQzRt88VxR+Y/A/QhJ1EWtWqPBBAxTAFaSkviwEuOEZNtW8pvkPgoCZQ+HxqW1A==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/vitepress/node_modules/@vueuse/shared": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-14.1.0.tgz",
-      "integrity": "sha512-EcKxtYvn6gx1F8z9J5/rsg3+lTQnvOruQd8fUecW99DCK04BkWD7z5KQ/wTAx+DazyoEE9dJt/zV8OIEQbM6kw==",
+      "version": "12.8.2",
+      "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-12.8.2.tgz",
+      "integrity": "sha512-dznP38YzxZoNloI0qpEfpkms8knDtaoQ6Y/sfS0L7Yki4zh40LFHEhur0odJC6xTHG5dxWVPiUWBXn+wCG2s5w==",
       "license": "MIT",
+      "dependencies": {
+        "vue": "^3.5.13"
+      },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "vue": "^3.5.0"
       }
     },
     "node_modules/vue": {
@@ -4054,23 +3224,6 @@
         "webidl-conversions": "^3.0.0"
       }
     },
-    "node_modules/which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmmirror.com/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "license": "ISC",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "node-which": "bin/node-which"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/wicked-good-xpath": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/wicked-good-xpath/-/wicked-good-xpath-1.3.0.tgz",
@@ -4079,137 +3232,6 @@
       "optional": true,
       "peer": true
     },
-    "node_modules/wrap-ansi": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
-      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "ansi-styles": "^6.1.0",
-        "string-width": "^5.0.1",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi-cjs": {
-      "name": "wrap-ansi",
-      "version": "7.0.0",
-      "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/strip-ansi": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/yaml": {
-      "version": "2.8.2",
-      "resolved": "https://registry.npmmirror.com/yaml/-/yaml-2.8.2.tgz",
-      "integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==",
-      "license": "ISC",
-      "optional": true,
-      "peer": true,
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/eemeli"
-      }
-    },
-    "node_modules/zod": {
-      "version": "4.3.5",
-      "resolved": "https://registry.npmmirror.com/zod/-/zod-4.3.5.tgz",
-      "integrity": "sha512-k7Nwx6vuWx1IJ9Bjuf4Zt1PEllcwe7cls3VNzm4CQ1/hgtFUK2bRNG3rvnpPUhFjmqJKAKtjV576KnUkHocg/g==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/colinhacks"
-      }
-    },
     "node_modules/zwitch": {
       "version": "2.0.4",
       "resolved": "https://registry.npmmirror.com/zwitch/-/zwitch-2.0.4.tgz",
diff --git a/package.json b/package.json
index 91f88e8..40eaaca 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vitepress dev docs",
-    "build": "vitepress build docs",
+    "build": "vitepress build docs --force",
     "preview": "vitepress preview docs",
     "format": "prettier --write .",
     "verify": "bash scripts/verify.sh"