diff --git a/docs/.vitepress/theme/components/appendix/deployment/CdnCacheDemo.vue b/docs/.vitepress/theme/components/appendix/deployment/CdnCacheDemo.vue
deleted file mode 100644
index 87fd89e..0000000
--- a/docs/.vitepress/theme/components/appendix/deployment/CdnCacheDemo.vue
+++ /dev/null
@@ -1,279 +0,0 @@
-<!--
-  CdnCacheDemo.vue
-  CDN 加速原理：快递柜隐喻
--->
-<template>
-  <div class="cdn">
-    <div class="header">
-      <div class="title">CDN 加速演示</div>
-      <div class="subtitle">就像在小区楼下装了个“丰巢快递柜”</div>
-    </div>
-
-    <div class="controls">
-      <div class="control">
-        <label>你要取什么东西？(资源类型)</label>
-        <div class="chips">
-          <button
-            v-for="r in resourceTypes"
-            :key="r.id"
-            :class="['chip', { active: r.id === resourceType }]"
-            @click="resourceType = r.id"
-          >
-            {{ r.label }}
-          </button>
-        </div>
-      </div>
-      <div class="control">
-        <label>快递柜里有吗？(命中率)</label>
-        <input type="range" min="0" max="100" v-model.number="hit" />
-        <div class="hint">
-          当前概率：{{ hit }}% ({{ hit > 80 ? '大部分都有' : '经常要跑远路' }})
-        </div>
-      </div>
-    </div>
-
-    <div class="summary">
-      <div class="card">
-        <div class="label">跑总仓库的次数 (回源)</div>
-        <div class="value">{{ miss }}%</div>
-        <div class="note">次数越少，总仓库越轻松</div>
-      </div>
-      <div class="card">
-        <div class="label">省下的路费 (带宽节省)</div>
-        <div class="value">{{ saved }}%</div>
-        <div class="note">省到就是赚到</div>
-      </div>
-      <div class="card">
-        <div class="label">老司机的建议</div>
-        <div class="value">{{ cacheAdvice }}</div>
-      </div>
-    </div>
-
-    <div class="flow">
-      <div class="step" v-for="(s, idx) in flow" :key="idx">
-        <div class="head">
-          <span class="dot" :style="{ background: s.color }"></span>
-          <span class="name">{{ s.name }}</span>
-          <span class="time">{{ s.time }}</span>
-        </div>
-        <div class="desc">{{ s.desc }}</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed, ref } from 'vue'
-
-const resourceTypes = [
-  { id: 'static', label: '标准件 (图片/CSS/JS)' },
-  { id: 'html', label: '信件 (HTML)' },
-  { id: 'api', label: '生鲜 (API数据)' }
-]
-
-const resourceType = ref('static')
-const hit = ref(85)
-
-const miss = computed(() => 100 - hit.value)
-const saved = computed(() => hit.value)
-
-const cacheAdvice = computed(() => {
-  if (resourceType.value === 'static')
-    return '标准件保质期长，建议放柜子里一年 (max-age=1年)'
-  if (resourceType.value === 'html')
-    return '信件可能随时更新，每次取之前问一下 (no-cache)'
-  return '生鲜容易坏，不要放柜子，直接去产地拿 (no-store)'
-})
-
-const flow = computed(() => {
-  const base = [
-    {
-      name: '用户 🙋‍♂️',
-      time: '0ms',
-      desc: '我想取个包裹',
-      color: '#6366f1'
-    },
-    {
-      name: '家门口快递柜 📦',
-      time: '15ms',
-      desc: '看看柜子里有没有...',
-      color: '#6366f1'
-    }
-  ]
-  if (hit.value >= 70 && resourceType.value === 'static') {
-    base.push({
-      name: '有货！✅',
-      time: '+5ms',
-      desc: '直接拿走，不用跑远路',
-      color: '#22c55e'
-    })
-  } else {
-    base.push({
-      name: '没货... ❌',
-      time: '+10ms',
-      desc: '柜子是空的，得去总仓库',
-      color: '#f59e0b'
-    })
-    base.push({
-      name: '总仓库 (源站) 🏭',
-      time: resourceType.value === 'api' ? '+60ms' : '+40ms',
-      desc: '翻山越岭把货取回来',
-      color: '#e11d48'
-    })
-    if (resourceType.value !== 'api') {
-      base.push({
-        name: '顺手存柜子',
-        time: '+8ms',
-        desc: '下次邻居来拿就不用跑了',
-        color: '#22c55e'
-      })
-    }
-  }
-  base.push({
-    name: '拿到手 🎁',
-    time: 'Total',
-    desc: '交易完成',
-    color: '#0ea5e9'
-  })
-  return base
-})
-</script>
-
-<style scoped>
-.cdn {
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 12px;
-  background: var(--vp-c-bg-soft);
-  padding: 20px;
-  margin: 20px 0;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.header .title {
-  font-weight: 800;
-  font-size: 18px;
-}
-.header .subtitle {
-  color: var(--vp-c-text-2);
-  font-size: 14px;
-}
-
-.controls {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: 16px;
-}
-
-.control {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-label {
-  font-weight: 600;
-  font-size: 14px;
-}
-
-.chips {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.chip {
-  padding: 6px 12px;
-  border-radius: 999px;
-  border: 1px solid var(--vp-c-divider);
-  background: var(--vp-c-bg);
-  cursor: pointer;
-  font-size: 13px;
-  transition: all 0.2s;
-}
-
-.chip.active {
-  border-color: var(--vp-c-brand);
-  color: white;
-  background: var(--vp-c-brand);
-}
-
-.hint {
-  color: var(--vp-c-text-2);
-  font-size: 12px;
-  margin-top: 4px;
-}
-
-.summary {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 12px;
-}
-
-.card {
-  background: var(--vp-c-bg);
-  border: 1px dashed var(--vp-c-divider);
-  border-radius: 10px;
-  padding: 12px;
-}
-
-.label {
-  color: var(--vp-c-text-2);
-  font-size: 12px;
-}
-
-.value {
-  font-weight: 800;
-  margin-top: 4px;
-  font-size: 16px;
-}
-
-.note {
-  color: var(--vp-c-text-2);
-  font-size: 12px;
-  margin-top: 4px;
-}
-
-.flow {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 12px;
-}
-
-.step {
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 10px;
-  padding: 12px;
-}
-
-.head {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 6px;
-}
-
-.dot {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-}
-
-.name {
-  font-weight: 700;
-  font-size: 14px;
-}
-
-.time {
-  margin-left: auto;
-  color: var(--vp-c-text-2);
-  font-size: 12px;
-}
-
-.desc {
-  color: var(--vp-c-text-2);
-  font-size: 12px;
-}
-</style>
diff --git a/docs/.vitepress/theme/components/appendix/deployment/CicdPipelineDemo.vue b/docs/.vitepress/theme/components/appendix/deployment/CicdPipelineDemo.vue
deleted file mode 100644
index c495e50..0000000
--- a/docs/.vitepress/theme/components/appendix/deployment/CicdPipelineDemo.vue
+++ /dev/null
@@ -1,296 +0,0 @@
-<!--
-  CicdPipelineDemo.vue
-  CI/CD 流水线：自动炒菜机隐喻
--->
-<template>
-  <div class="cicd">
-    <div class="header">
-      <div>
-        <div class="title">自动化流水线 (CI/CD)</div>
-        <div class="subtitle">就像一台“全自动炒菜机”</div>
-      </div>
-      <div class="actions">
-        <label class="fail-toggle"
-          ><input type="checkbox" v-model="failTest" /> 混入一颗烂菜
-          (模拟报错)</label
-        >
-        <button :disabled="running" @click="run" class="run-btn">
-          {{ running ? '机器运转中...' : '开始做菜 (触发构建)' }}
-        </button>
-      </div>
-    </div>
-
-    <div class="steps">
-      <div class="step" v-for="step in steps" :key="step.id">
-        <div class="step-head">
-          <span class="badge" :class="step.status">{{
-            statusIcon(step.status)
-          }}</span>
-          <span class="name">{{ step.name }}</span>
-        </div>
-        <div class="analogy">{{ step.analogy }}</div>
-        <div class="desc">{{ step.desc }}</div>
-      </div>
-    </div>
-
-    <div class="log" v-if="log">
-      <div class="log-title">🖥️ 机器日志</div>
-      <pre><code>{{ log }}</code></pre>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-
-const steps = ref([
-  {
-    id: 'install',
-    name: '安装依赖 (Install)',
-    analogy: '🥬 准备食材',
-    desc: 'npm install',
-    status: 'idle'
-  },
-  {
-    id: 'test',
-    name: '自动测试 (Test)',
-    analogy: '🔍 食品安检',
-    desc: 'npm test',
-    status: 'idle'
-  },
-  {
-    id: 'build',
-    name: '打包构建 (Build)',
-    analogy: '🍳 下锅烹饪',
-    desc: 'npm run build',
-    status: 'idle'
-  },
-  {
-    id: 'deploy',
-    name: '自动部署 (Deploy)',
-    analogy: '🍽️ 端上桌',
-    desc: 'pm2 restart',
-    status: 'idle'
-  }
-])
-
-const running = ref(false)
-const failTest = ref(false)
-const log = ref('')
-
-const wait = (ms) => new Promise((r) => setTimeout(r, ms))
-
-const statusIcon = (status) => {
-  if (status === 'done') return '✔'
-  if (status === 'running') return '⏳'
-  if (status === 'fail') return '✖'
-  return '•'
-}
-
-const reset = () => {
-  steps.value = steps.value.map((s) => ({ ...s, status: 'idle' }))
-  log.value = ''
-}
-
-const run = async () => {
-  if (running.value) return
-  running.value = true
-  reset()
-
-  const timeline = [
-    {
-      id: 'install',
-      ms: 1000,
-      log: '> 正在去菜市场买菜...\n> 成功买到 842 个包裹 (node_modules)'
-    },
-    {
-      id: 'test',
-      ms: 800,
-      log: '> 正在检查食材新鲜度...\n> 单元测试运行中...'
-    },
-    {
-      id: 'build',
-      ms: 1200,
-      log: '> 开始烹饪...\n> 正在压缩混淆代码...\n> 产出 dist/ 目录 (一盘好菜)'
-    },
-    {
-      id: 'deploy',
-      ms: 1000,
-      log: '> 正在把菜端给顾客...\n> 重启服务器...\n> 上线成功！'
-    }
-  ]
-
-  for (const item of timeline) {
-    const step = steps.value.find((s) => s.id === item.id)
-    step.status = 'running'
-    log.value = item.log
-    await wait(item.ms)
-
-    if (item.id === 'test' && failTest.value) {
-      step.status = 'fail'
-      log.value =
-        '❌ 警告：发现一颗烂白菜！(测试失败)\n❌ 立即停机，防止端给顾客。'
-      steps.value
-        .filter((s) => s.id !== 'test')
-        .forEach((s) => (s.status = 'idle'))
-      running.value = false
-      return
-    }
-
-    step.status = 'done'
-  }
-
-  log.value = '✅ 流程结束：大家吃得很开心 (服务正常运行)'
-  running.value = false
-}
-</script>
-
-<style scoped>
-.cicd {
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 12px;
-  background: var(--vp-c-bg-soft);
-  padding: 20px;
-  margin: 20px 0;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.header {
-  display: flex;
-  justify-content: space-between;
-  gap: 12px;
-  flex-wrap: wrap;
-  align-items: center;
-}
-
-.title {
-  font-weight: 800;
-  font-size: 18px;
-}
-.subtitle {
-  color: var(--vp-c-text-2);
-  font-size: 14px;
-}
-
-.actions {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  flex-wrap: wrap;
-}
-
-.fail-toggle {
-  font-size: 14px;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  cursor: pointer;
-}
-
-.run-btn {
-  background: var(--vp-c-brand);
-  color: #fff;
-  border: none;
-  padding: 8px 16px;
-  border-radius: 8px;
-  cursor: pointer;
-  font-weight: 600;
-  font-size: 14px;
-  transition: opacity 0.2s;
-}
-.run-btn:disabled {
-  opacity: 0.7;
-  cursor: not-allowed;
-}
-
-.steps {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 12px;
-}
-
-.step {
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 10px;
-  padding: 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.step-head {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.badge {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  display: grid;
-  place-items: center;
-  border: 2px solid var(--vp-c-divider);
-  font-size: 12px;
-}
-
-.badge.running {
-  border-color: #f59e0b;
-  color: #f59e0b;
-}
-.badge.done {
-  border-color: #22c55e;
-  color: #22c55e;
-  background: rgba(34, 197, 94, 0.1);
-}
-.badge.fail {
-  border-color: #ef4444;
-  color: #ef4444;
-  background: rgba(239, 68, 68, 0.1);
-}
-
-.name {
-  font-weight: 700;
-  font-size: 14px;
-}
-
-.analogy {
-  color: var(--vp-c-brand);
-  font-size: 13px;
-  font-weight: 600;
-  margin-left: 32px;
-}
-
-.desc {
-  color: var(--vp-c-text-2);
-  font-size: 12px;
-  margin-left: 32px;
-  font-family: var(--vp-font-family-mono);
-}
-
-.log {
-  background: #1e1e20;
-  border-radius: 10px;
-  padding: 12px;
-  color: #eee;
-  font-family: var(--vp-font-family-mono);
-  font-size: 13px;
-}
-
-.log-title {
-  font-weight: 700;
-  margin-bottom: 8px;
-  color: #aaa;
-  font-size: 12px;
-  text-transform: uppercase;
-}
-
-pre {
-  margin: 0;
-  white-space: pre-wrap;
-  line-height: 1.6;
-}
-</style>
diff --git a/docs/.vitepress/theme/components/appendix/deployment/DeploymentArchitecture.vue b/docs/.vitepress/theme/components/appendix/deployment/DeploymentArchitecture.vue
deleted file mode 100644
index fc15280..0000000
--- a/docs/.vitepress/theme/components/appendix/deployment/DeploymentArchitecture.vue
+++ /dev/null
@@ -1,360 +0,0 @@
-<!--
-  DeploymentArchitecture.vue
-  全景图：快递配送隐喻
--->
-<template>
-  <div class="arch">
-    <div class="header">
-      <div>
-        <div class="title">全景演示：一个请求的“奇幻漂流”</div>
-        <div class="subtitle">
-          点击下方按钮，看看三种模式的“配送路线”有什么不同
-        </div>
-      </div>
-      <div class="modes">
-        <button
-          v-for="mode in modes"
-          :key="mode.id"
-          :class="['mode', { active: mode.id === currentMode }]"
-          @click="currentMode = mode.id"
-        >
-          <span class="icon">{{ mode.icon }}</span>
-          {{ mode.label }}
-        </button>
-      </div>
-    </div>
-
-    <div class="flow">
-      <div
-        v-for="(node, idx) in nodes"
-        :key="node.name"
-        class="node"
-        :style="{ borderColor: node.color }"
-      >
-        <div class="node-head">
-          <div class="dot" :style="{ background: node.color }">
-            {{ node.icon }}
-          </div>
-          <div class="name-box">
-            <div class="role">{{ node.role }}</div>
-            <div class="tech-name">{{ node.name }}</div>
-          </div>
-        </div>
-        <div class="desc">{{ node.desc }}</div>
-        <div v-if="idx < nodes.length - 1" class="arrow">→</div>
-      </div>
-    </div>
-
-    <div class="summary">
-      <div class="metric">
-        <div class="label">当前场景</div>
-        <div class="value">{{ currentModeLabel }}</div>
-      </div>
-      <div class="metric">
-        <div class="label">瓶颈环节</div>
-        <div class="value">{{ bottleneck }}</div>
-      </div>
-      <div class="metric">
-        <div class="label">通俗解释</div>
-        <div class="value">{{ advice }}</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed, ref } from 'vue'
-
-const modes = [
-  { id: 'static', label: '看海报 (静态)', icon: '🖼️' },
-  { id: 'spa', label: '玩 App (SPA)', icon: '📱' },
-  { id: 'ssr', label: '刷动态 (SSR)', icon: '🔄' }
-]
-
-const currentMode = ref('spa')
-
-const currentModeLabel = computed(
-  () => modes.find((m) => m.id === currentMode.value)?.label
-)
-
-// 角色：User(寄件人), DNS(查号台), CDN(快递柜), WAF(保安), LB(大堂经理), Server(办事员), DB(档案室)
-const commonNodes = {
-  user: {
-    role: '寄件人',
-    name: 'User',
-    icon: '🧑',
-    color: '#64748b',
-    desc: '发出请求'
-  },
-  dns: {
-    role: '查号台',
-    name: 'DNS',
-    icon: '📒',
-    color: '#0ea5e9',
-    desc: '查询 IP 地址'
-  },
-  cdn: {
-    role: '快递柜',
-    name: 'CDN',
-    icon: '📦',
-    color: '#22c55e',
-    desc: '就近取货'
-  },
-  waf: {
-    role: '保安',
-    name: 'WAF',
-    icon: '🛡️',
-    color: '#ef4444',
-    desc: '拦截黑客'
-  },
-  lb: {
-    role: '大堂经理',
-    name: 'LB',
-    icon: '💁',
-    color: '#f59e0b',
-    desc: '分配窗口'
-  },
-  server: {
-    role: '办事员',
-    name: 'Server',
-    icon: '👨‍💼',
-    color: '#8b5cf6',
-    desc: '处理业务'
-  },
-  db: {
-    role: '档案室',
-    name: 'Database',
-    icon: '🗄️',
-    color: '#d946ef',
-    desc: '存取数据'
-  },
-  obj: {
-    role: '仓库',
-    name: 'OSS',
-    icon: '🏭',
-    color: '#f97316',
-    desc: '拿静态文件'
-  }
-}
-
-const flowMap = {
-  static: [
-    { ...commonNodes.user, desc: '想看一张图片' },
-    { ...commonNodes.dns, desc: '找到图片仓库地址' },
-    { ...commonNodes.cdn, desc: '家门口就有？直接拿走！' },
-    { ...commonNodes.obj, desc: '没有？去总仓库拿' }
-  ],
-  spa: [
-    { ...commonNodes.user, desc: '打开网页 App' },
-    { ...commonNodes.dns, desc: '找到服务器地址' },
-    { ...commonNodes.cdn, desc: '先拿网页外壳 (HTML/JS)' },
-    { ...commonNodes.server, desc: '再拿动态数据 (API)' },
-    { ...commonNodes.db, desc: '查用户数据' }
-  ],
-  ssr: [
-    { ...commonNodes.user, desc: '打开复杂网页' },
-    { ...commonNodes.dns, desc: '找到服务器地址' },
-    { ...commonNodes.lb, desc: '人多排队，你以此去 2 号窗口' },
-    { ...commonNodes.server, desc: '现场拼装好整个页面' },
-    { ...commonNodes.db, desc: '查所有需要的数据' }
-  ]
-}
-
-const nodes = computed(() => flowMap[currentMode.value])
-
-const bottleneck = computed(() => {
-  switch (currentMode.value) {
-    case 'static':
-      return '几乎没有瓶颈，起飞！'
-    case 'spa':
-      return 'API 接口响应速度'
-    case 'ssr':
-      return '办事员 (Server) 拼装页面的速度'
-    default:
-      return ''
-  }
-})
-
-const advice = computed(() => {
-  switch (currentMode.value) {
-    case 'static':
-      return '这是最简单的模式。就像去看公告栏的海报（或者发传单），内容印死在上面了，所有人看到的都一样。速度最快！'
-    case 'spa':
-      return '就像送你一套乐高积木。先给你个空盒子和图纸（网页壳子），你的浏览器自己在本地把页面拼出来。拼好后怎么玩都快。'
-    case 'ssr':
-      return '就像点了一份热披萨。厨师（服务器）必须现场烤好，再热乎乎地送给你。虽然慢点，但保证新鲜、不仅能吃（能看）还能闻到香味（SEO友好）。'
-    default:
-      return ''
-  }
-})
-</script>
-
-<style scoped>
-.arch {
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 12px;
-  background: var(--vp-c-bg-soft);
-  padding: 20px;
-  margin: 20px 0;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.header {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-@media (min-width: 640px) {
-  .header {
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-  }
-}
-
-.title {
-  font-weight: 800;
-  font-size: 18px;
-}
-
-.subtitle {
-  color: var(--vp-c-text-2);
-  font-size: 14px;
-  margin-top: 4px;
-}
-
-.modes {
-  display: flex;
-  gap: 8px;
-  background: var(--vp-c-bg);
-  padding: 4px;
-  border-radius: 8px;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.mode {
-  padding: 6px 12px;
-  border-radius: 6px;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 13px;
-  transition: all 0.2s;
-  white-space: nowrap;
-}
-
-.mode:hover {
-  background: var(--vp-c-bg-soft);
-}
-
-.mode.active {
-  background: var(--vp-c-brand);
-  color: white;
-}
-
-.flow {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-  gap: 16px;
-  align-items: start;
-}
-
-.node {
-  position: relative;
-  background: var(--vp-c-bg);
-  border: 2px solid transparent;
-  border-radius: 12px;
-  padding: 12px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-  transition: transform 0.2s;
-}
-
-.node:hover {
-  transform: translateY(-2px);
-}
-
-.node-head {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 8px;
-}
-
-.dot {
-  width: 36px;
-  height: 36px;
-  border-radius: 10px;
-  color: #fff;
-  display: grid;
-  place-items: center;
-  font-size: 20px;
-  flex-shrink: 0;
-}
-
-.name-box {
-  line-height: 1.2;
-}
-
-.role {
-  font-size: 12px;
-  color: var(--vp-c-text-2);
-}
-
-.tech-name {
-  font-weight: 700;
-  font-size: 14px;
-}
-
-.desc {
-  color: var(--vp-c-text-2);
-  font-size: 12px;
-  line-height: 1.4;
-}
-
-.arrow {
-  position: absolute;
-  right: -14px;
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--vp-c-divider);
-  font-size: 18px;
-  display: none;
-}
-
-@media (min-width: 768px) {
-  .arrow {
-    display: block;
-  }
-}
-
-.summary {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 12px;
-  background: var(--vp-c-bg);
-  border-radius: 12px;
-  padding: 16px;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.metric {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.label {
-  color: var(--vp-c-text-2);
-  font-size: 12px;
-}
-
-.value {
-  font-weight: 600;
-  font-size: 14px;
-  color: var(--vp-c-text-1);
-}
-</style>
diff --git a/docs/.vitepress/theme/components/appendix/deployment/DeploymentBackupDemo.vue b/docs/.vitepress/theme/components/appendix/deployment/DeploymentBackupDemo.vue
deleted file mode 100644
index b400fc9..0000000
--- a/docs/.vitepress/theme/components/appendix/deployment/DeploymentBackupDemo.vue
+++ /dev/null
@@ -1,524 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-
-const backupType = ref('full')
-const isBackingUp = ref(false)
-const backupProgress = ref(0)
-const lastBackup = ref('2024-01-15 14:30')
-
-const backups = ref([
-  { id: 1, type: 'full', date: '2024-01-15 14:30', size: '2.3 GB', status: 'completed' },
-  { id: 2, type: 'incremental', date: '2024-01-15 10:00', size: '156 MB', status: 'completed' },
-  { id: 3, type: 'full', date: '2024-01-14 14:30', size: '2.2 GB', status: 'completed' }
-])
-
-const backupTypes = [
-  { id: 'full', name: '全量备份', desc: '备份所有数据，像拍整套照片', icon: '📸' },
-  { id: 'incremental', name: '增量备份', desc: '只备份新增/修改的部分', icon: '📝' },
-  { id: 'differential', name: '差异备份', desc: '备份自上次全量后的变化', icon: '🔄' }
-]
-
-const startBackup = () => {
-  isBackingUp.value = true
-  backupProgress.value = 0
-
-  const interval = setInterval(() => {
-    backupProgress.value += 5
-    if (backupProgress.value >= 100) {
-      clearInterval(interval)
-      isBackingUp.value = false
-      lastBackup.value = new Date().toLocaleString()
-
-      backups.value.unshift({
-        id: Date.now(),
-        type: backupType.value,
-        date: lastBackup.value,
-        size: backupType.value === 'full' ? '2.4 GB' : '180 MB',
-        status: 'completed'
-      })
-    }
-  }, 200)
-}
-</script>
-
-<template>
-  <div class="deployment-backup">
-    <div class="demo-header">
-      <h3>备份演示</h3>
-      <p class="subtitle">数据安全就像保险柜</p>
-    </div>
-
-    <div class="intro-text">
-      <p>
-        就像小明每天<strong>记账</strong>、<strong>保留发票</strong>，定期<strong>盘点库存</strong>，
-        数据备份是防止数据丢失的最后一道防线。服务器故障、人为误操作都可能丢失数据！
-      </p>
-    </div>
-
-    <div class="demo-content">
-      <!-- 备份类型选择 -->
-      <div class="backup-type-section">
-        <div class="section-title">💾 选择备份类型</div>
-        <div class="type-cards">
-          <div
-            v-for="type in backupTypes"
-            :key="type.id"
-            class="type-card"
-            :class="{ active: backupType === type.id }"
-            @click="backupType = type.id"
-          >
-            <span class="type-icon">{{ type.icon }}</span>
-            <span class="type-name">{{ type.name }}</span>
-            <span class="type-desc">{{ type.desc }}</span>
-          </div>
-        </div>
-      </div>
-
-      <!-- 备份操作 -->
-      <div class="backup-action">
-        <div class="action-info">
-          <div class="info-row">
-            <span class="info-label">上次备份</span>
-            <span class="info-value">{{ lastBackup }}</span>
-          </div>
-          <div class="info-row">
-            <span class="info-label">备份总数</span>
-            <span class="info-value">{{ backups.length }} 份</span>
-          </div>
-        </div>
-
-        <button
-          v-if="!isBackingUp"
-          @click="startBackup"
-          class="btn primary"
-        >
-          🚀 开始备份
-        </button>
-        <button v-else class="btn" disabled>
-          ⏳ 备份中...
-        </button>
-      </div>
-
-      <!-- 备份进度 -->
-      <div v-if="isBackingUp" class="backup-progress">
-        <div class="progress-header">
-          <span class="progress-label">正在备份...</span>
-          <span class="progress-percent">{{ backupProgress }}%</span>
-        </div>
-        <div class="progress-bar">
-          <div
-            class="progress-fill"
-            :style="{ width: `${backupProgress}%` }"
-          ></div>
-        </div>
-      </div>
-
-      <!-- 备份历史 -->
-      <div class="backup-history">
-        <div class="section-title">📜 备份历史</div>
-        <div class="history-list">
-          <div
-            v-for="backup in backups"
-            :key="backup.id"
-            class="history-item"
-          >
-            <div class="backup-icon">
-              {{ backup.type === 'full' ? '📦' : '📄' }}
-            </div>
-            <div class="backup-info">
-              <div class="backup-type">
-                {{ backup.type === 'full' ? '全量备份' : backup.type === 'incremental' ? '增量备份' : '差异备份' }}
-              </div>
-              <div class="backup-date">{{ backup.date }}</div>
-            </div>
-            <div class="backup-meta">
-              <div class="backup-size">{{ backup.size }}</div>
-              <div class="backup-status">
-                <span class="status-dot completed"></span>
-                <span class="status-text">成功</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- 备份策略 -->
-      <div class="backup-strategy">
-        <div class="strategy-title">🎯 推荐备份策略 (3-2-1 原则)</div>
-        <div class="strategy-content">
-          <div class="strategy-item">
-            <div class="strategy-number">3</div>
-            <div class="strategy-desc">至少保留 <strong>3 份</strong>备份</div>
-          </div>
-          <div class="strategy-item">
-            <div class="strategy-number">2</div>
-            <div class="strategy-desc">使用 <strong>2 种</strong>不同存储介质</div>
-          </div>
-          <div class="strategy-item">
-            <div class="strategy-number">1</div>
-            <div class="strategy-desc"><strong>1 份</strong>异地备份</div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="info-box">
-      <p>
-        💡 <strong>小明教训</strong>：曾经因系统崩溃丢了所有销售数据，现在每天自动备份！
-        <strong>备份不是是否需要的问题，而是何时需要的问题。</strong>
-      </p>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.deployment-backup {
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  background-color: var(--vp-c-bg-soft);
-  max-height: 600px;
-  overflow-y: auto;
-  margin: 1rem 0;
-}
-
-.demo-header {
-  padding: 1.25rem;
-  background: var(--vp-c-bg);
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-
-.demo-header h3 {
-  margin: 0 0 0.5rem 0;
-  font-size: 1.2rem;
-  color: var(--vp-c-text-1);
-}
-
-.subtitle {
-  margin: 0;
-  font-size: 0.9rem;
-  color: var(--vp-c-text-2);
-}
-
-.intro-text {
-  padding: 1rem 1.25rem;
-  font-size: 0.9rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.6;
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-
-.demo-content {
-  padding: 1.25rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.section-title {
-  font-size: 0.95rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-  margin-bottom: 0.75rem;
-}
-
-.backup-type-section {
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  padding: 1rem;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.type-cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-  gap: 0.75rem;
-}
-
-.type-card {
-  background: var(--vp-c-bg-soft);
-  border: 2px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 1rem;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.type-card:hover {
-  border-color: var(--vp-c-brand-soft);
-}
-
-.type-card.active {
-  border-color: var(--vp-c-brand);
-  background: var(--vp-c-brand-soft);
-}
-
-.type-icon {
-  font-size: 1.5rem;
-}
-
-.type-name {
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-}
-
-.type-desc {
-  font-size: 0.75rem;
-  color: var(--vp-c-text-2);
-}
-
-.backup-action {
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  padding: 1rem;
-  border: 1px solid var(--vp-c-divider);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 1rem;
-}
-
-.action-info {
-  display: flex;
-  gap: 1.5rem;
-}
-
-.info-row {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.info-label {
-  font-size: 0.75rem;
-  color: var(--vp-c-text-2);
-}
-
-.info-value {
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-}
-
-.btn {
-  padding: 0.6rem 1.25rem;
-  border-radius: 6px;
-  font-size: 0.9rem;
-  font-weight: 600;
-  cursor: pointer;
-  border: none;
-  transition: all 0.3s ease;
-}
-
-.btn.primary {
-  background: var(--vp-c-brand);
-  color: white;
-}
-
-.btn.primary:hover {
-  background: var(--vp-c-brand-1);
-}
-
-.btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.backup-progress {
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  padding: 1rem;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.progress-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 0.75rem;
-}
-
-.progress-label {
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-}
-
-.progress-percent {
-  font-size: 1.1rem;
-  font-weight: 700;
-  color: var(--vp-c-brand);
-  font-family: var(--vp-font-family-mono);
-}
-
-.progress-bar {
-  height: 10px;
-  background: var(--vp-c-bg-alt);
-  border-radius: 5px;
-  overflow: hidden;
-}
-
-.progress-fill {
-  height: 100%;
-  background: linear-gradient(90deg, var(--vp-c-brand), var(--vp-c-brand-1));
-  transition: width 0.3s ease;
-}
-
-.backup-history {
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  padding: 1rem;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.history-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  max-height: 250px;
-  overflow-y: auto;
-}
-
-.history-item {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem;
-  background: var(--vp-c-bg-soft);
-  border-radius: 6px;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.backup-icon {
-  font-size: 1.5rem;
-}
-
-.backup-info {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 0.15rem;
-}
-
-.backup-type {
-  font-size: 0.85rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-}
-
-.backup-date {
-  font-size: 0.75rem;
-  color: var(--vp-c-text-3);
-}
-
-.backup-meta {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 0.25rem;
-}
-
-.backup-size {
-  font-size: 0.85rem;
-  font-weight: 600;
-  color: var(--vp-c-brand);
-  font-family: var(--vp-font-family-mono);
-}
-
-.backup-status {
-  display: flex;
-  align-items: center;
-  gap: 0.35rem;
-  font-size: 0.75rem;
-  color: var(--vp-c-text-2);
-}
-
-.status-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-}
-
-.status-dot.completed {
-  background: var(--vp-c-brand-delta);
-}
-
-.backup-strategy {
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  padding: 1rem;
-  border: 1px solid var(--vp-c-divider);
-  border-left: 3px solid var(--vp-c-brand);
-}
-
-.strategy-title {
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-  margin-bottom: 1rem;
-}
-
-.strategy-content {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-  gap: 1rem;
-}
-
-.strategy-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 1rem;
-  background: var(--vp-c-bg-soft);
-  border-radius: 6px;
-  text-align: center;
-}
-
-.strategy-number {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  background: var(--vp-c-brand);
-  color: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.2rem;
-  font-weight: 700;
-}
-
-.strategy-desc {
-  font-size: 0.8rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.4;
-}
-
-.info-box {
-  padding: 1rem 1.25rem;
-  margin: 0;
-  background: var(--vp-c-bg);
-  border-top: 1px solid var(--vp-c-divider);
-  font-size: 0.9rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.6;
-}
-
-.info-box p {
-  margin: 0;
-}
-
-@media (max-width: 640px) {
-  .backup-action {
-    flex-direction: column;
-  }
-
-  .type-cards {
-    grid-template-columns: 1fr;
-  }
-}
-</style>
diff --git a/docs/.vitepress/theme/components/appendix/deployment/DeploymentBuildDemo.vue b/docs/.vitepress/theme/components/appendix/deployment/DeploymentBuildDemo.vue
index f9aa56e..519e168 100644
--- a/docs/.vitepress/theme/components/appendix/deployment/DeploymentBuildDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/deployment/DeploymentBuildDemo.vue
@@ -1,519 +1,192 @@
-<script setup>
-import { ref, computed } from 'vue'
-
-const files = ref([
-  { name: 'App.vue', size: '5KB', status: 'pending' },
-  { name: 'main.js', size: '2KB', status: 'pending' },
-  { name: 'utils.js', size: '8KB', status: 'pending' },
-  { name: 'style.css', size: '15KB', status: 'pending' }
-])
-
-const buildProgress = ref(0)
-const buildStatus = ref('idle') // idle, building, completed
-const optimizedSize = ref('0KB')
-const originalSize = ref('30KB')
-
-const startBuild = () => {
-  buildStatus.value = 'building'
-  buildProgress.value = 0
-  files.value.forEach(f => f.status = 'pending')
-
-  // 模拟构建过程
-  const steps = [
-    { progress: 20, file: 0 },
-    { progress: 40, file: 1 },
-    { progress: 60, file: 2 },
-    { progress: 80, file: 3 },
-    { progress: 100, file: -1 }
-  ]
-
-  steps.forEach((step, idx) => {
-    setTimeout(() => {
-      buildProgress.value = step.progress
-      if (step.file >= 0) {
-        files.value[step.file].status = 'completed'
-      }
-      if (idx === steps.length - 1) {
-        buildStatus.value = 'completed'
-        optimizedSize.value = '12KB'
-      }
-    }, (idx + 1) * 600)
-  })
-}
-
-const resetBuild = () => {
-  buildStatus.value = 'idle'
-  buildProgress.value = 0
-  files.value.forEach(f => f.status = 'pending')
-  optimizedSize.value = '0KB'
-}
-</script>
-
+<!--
+  DeploymentBuildDemo.vue
+  构建过程演示：原材料变成品（简化版）
+-->
 <template>
   <div class="deployment-build">
-    <div class="demo-header">
-      <h3>构建过程演示</h3>
-      <p class="subtitle">把原材料变成成品的过程</p>
+    <div class="header">
+      <span class="icon">📦</span>
+      <span class="title">代码构建</span>
     </div>
 
-    <div class="intro-text">
-      <p>
-        就像小明制作咖啡前要<strong>研磨咖啡豆</strong>、<strong>调配比例</strong>、<strong>加热融合</strong>，
-        代码构建也需要<strong>编译</strong>、<strong>压缩</strong>、<strong>优化</strong>才能变成可以部署的成品。
-      </p>
-    </div>
-
-    <div class="demo-content">
-      <!-- 源文件列表 -->
-      <div class="source-files">
-        <div class="section-title">📁 源代码文件</div>
-        <div class="file-list">
-          <div
-            v-for="(file, idx) in files"
-            :key="file.name"
-            class="file-item"
-            :class="{ completed: file.status === 'completed' }"
-          >
-            <div class="file-icon">📄</div>
-            <div class="file-info">
-              <div class="file-name">{{ file.name }}</div>
-              <div class="file-size">{{ file.size }}</div>
-            </div>
-            <div class="file-status">
-              <span v-if="file.status === 'completed'" class="status-badge success">✓ 已处理</span>
-              <span v-else class="status-badge pending">待处理</span>
-            </div>
-          </div>
+    <div class="content">
+      <div class="flow">
+        <div class="step" :class="{ done: buildProgress >= 25 }">
+          <span class="num">1</span>
+          <span class="text">解析依赖</span>
+        </div>
+        <span class="arrow">→</span>
+        <div class="step" :class="{ done: buildProgress >= 50 }">
+          <span class="num">2</span>
+          <span class="text">编译转换</span>
+        </div>
+        <span class="arrow">→</span>
+        <div class="step" :class="{ done: buildProgress >= 75 }">
+          <span class="num">3</span>
+          <span class="text">打包压缩</span>
+        </div>
+        <span class="arrow">→</span>
+        <div class="step" :class="{ done: buildProgress >= 100 }">
+          <span class="num">4</span>
+          <span class="text">完成</span>
         </div>
       </div>
 
-      <!-- 构建流程 -->
-      <div class="build-process">
-        <div class="section-title">⚙️ 构建流程</div>
-        <div class="pipeline">
-          <div class="pipeline-step">
-            <div class="step-icon">1️⃣</div>
-            <div class="step-content">
-              <div class="step-title">解析依赖</div>
-              <div class="step-desc">分析文件导入关系</div>
-            </div>
-          </div>
-          <div class="pipeline-arrow">↓</div>
-          <div class="pipeline-step">
-            <div class="step-icon">2️⃣</div>
-            <div class="step-content">
-              <div class="step-title">编译转换</div>
-              <div class="step-desc">Vue → JavaScript</div>
-            </div>
-          </div>
-          <div class="pipeline-arrow">↓</div>
-          <div class="pipeline-step">
-            <div class="step-icon">3️⃣</div>
-            <div class="step-content">
-              <div class="step-title">打包压缩</div>
-              <div class="step-desc">合并文件，去除空格</div>
-            </div>
-          </div>
+      <div class="progress">
+        <div class="bar">
+          <div class="fill" :style="{ width: `${buildProgress}%` }"></div>
         </div>
+        <div class="percent">{{ buildProgress }}%</div>
       </div>
 
-      <!-- 构建进度 -->
-      <div class="build-status">
-        <div class="status-header">
-          <span class="status-label">构建进度</span>
-          <span class="status-percent">{{ buildProgress }}%</span>
-        </div>
-        <div class="progress-bar">
-          <div
-            class="progress-fill"
-            :style="{ width: `${buildProgress}%` }"
-          ></div>
-        </div>
-
-        <!-- 对比展示 -->
-        <div v-if="buildStatus === 'completed'" class="size-comparison">
-          <div class="size-item original">
-            <div class="size-label">原始大小</div>
-            <div class="size-value">{{ originalSize }}</div>
-          </div>
-          <div class="size-arrow">→</div>
-          <div class="size-item optimized">
-            <div class="size-label">优化后</div>
-            <div class="size-value success">{{ optimizedSize }}</div>
-          </div>
-          <div class="compression-badge">
-            压缩 60%
-          </div>
-        </div>
-      </div>
-
-      <!-- 操作按钮 -->
-      <div class="action-buttons">
-        <button
-          v-if="buildStatus === 'idle' || buildStatus === 'completed'"
-          @click="startBuild"
-          class="btn primary"
-        >
-          {{ buildStatus === 'idle' ? '开始构建' : '重新构建' }}
-        </button>
-        <button
-          v-if="buildStatus === 'completed'"
-          @click="resetBuild"
-          class="btn secondary"
-        >
-          重置
-        </button>
-      </div>
-    </div>
-
-    <div class="info-box">
-      <p v-if="buildStatus === 'idle'">
-        💡 <strong>待机中</strong>：点击"开始构建"按钮，看看代码是如何一步步变成可部署的文件的。
-      </p>
-      <p v-else-if="buildStatus === 'building'">
-        ⏳ <strong>构建中</strong>：正在处理源文件，就像小明在准备咖啡材料...
-      </p>
-      <p v-else class="success-text">
-        ✅ <strong>构建完成</strong>：所有文件已打包压缩，体积减少了60%！就像把咖啡豆研磨成粉，更易冲泡。
-      </p>
+      <button @click="startBuild" class="build-btn" :disabled="building">
+        {{ building ? '构建中...' : '▶ 开始构建' }}
+      </button>
     </div>
   </div>
 </template>
 
+<script setup>
+import { ref } from 'vue'
+
+const building = ref(false)
+const buildProgress = ref(0)
+
+const startBuild = () => {
+  if (building.value) return
+  building.value = true
+  buildProgress.value = 0
+
+  const interval = setInterval(() => {
+    buildProgress.value += 5
+    if (buildProgress.value >= 100) {
+      clearInterval(interval)
+      building.value = false
+      setTimeout(() => {
+        buildProgress.value = 0
+      }, 2000)
+    }
+  }, 150)
+}
+</script>
+
 <style scoped>
 .deployment-build {
   border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
-  background-color: var(--vp-c-bg-soft);
-  max-height: 600px;
-  overflow-y: auto;
+  background: var(--vp-c-bg-soft);
+  padding: 0.75rem;
   margin: 1rem 0;
 }
 
-.demo-header {
-  padding: 1.25rem;
-  background: var(--vp-c-bg);
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-
-.demo-header h3 {
-  margin: 0 0 0.5rem 0;
-  font-size: 1.2rem;
-  color: var(--vp-c-text-1);
-}
-
-.subtitle {
-  margin: 0;
-  font-size: 0.9rem;
-  color: var(--vp-c-text-2);
-}
-
-.intro-text {
-  padding: 1rem 1.25rem;
-  font-size: 0.9rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.6;
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-
-.demo-content {
-  padding: 1.25rem;
+.header {
   display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.section-title {
-  font-size: 0.95rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
+  align-items: center;
+  gap: 0.5rem;
   margin-bottom: 0.75rem;
 }
 
-.source-files {
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  padding: 1rem;
-  border: 1px solid var(--vp-c-divider);
+.header .icon {
+  font-size: 1.25rem;
 }
 
-.file-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.file-item {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem;
-  background: var(--vp-c-bg-soft);
-  border-radius: 6px;
-  border: 1px solid var(--vp-c-divider);
-  transition: all 0.3s ease;
-}
-
-.file-item.completed {
-  border-color: var(--vp-c-brand-delta);
-  background: var(--vp-c-brand-dimm);
-}
-
-.file-icon {
-  font-size: 1.5rem;
-}
-
-.file-info {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 0.15rem;
-}
-
-.file-name {
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-  font-family: var(--vp-font-family-mono);
-}
-
-.file-size {
-  font-size: 0.8rem;
-  color: var(--vp-c-text-2);
-}
-
-.file-status {
-  display: flex;
-  align-items: center;
-}
-
-.status-badge {
-  font-size: 0.75rem;
-  padding: 0.25rem 0.5rem;
-  border-radius: 4px;
-  font-weight: 600;
-}
-
-.status-badge.pending {
-  background: var(--vp-c-bg-alt);
-  color: var(--vp-c-text-3);
-}
-
-.status-badge.success {
-  background: var(--vp-c-brand-delta);
-  color: white;
-}
-
-.build-process {
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  padding: 1rem;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.pipeline {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.pipeline-step {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 0.75rem;
-  background: var(--vp-c-bg-soft);
-  border-radius: 6px;
-  border: 1px solid var(--vp-c-divider);
-  width: 100%;
-  max-width: 350px;
-}
-
-.step-icon {
-  font-size: 1.5rem;
-}
-
-.step-content {
-  flex: 1;
-}
-
-.step-title {
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-}
-
-.step-desc {
-  font-size: 0.8rem;
-  color: var(--vp-c-text-2);
-}
-
-.pipeline-arrow {
-  font-size: 1.5rem;
-  color: var(--vp-c-brand);
-  margin: 0.25rem 0;
-}
-
-.build-status {
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  padding: 1rem;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.status-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 0.75rem;
-}
-
-.status-label {
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-}
-
-.status-percent {
-  font-size: 1.1rem;
+.header .title {
   font-weight: 700;
-  color: var(--vp-c-brand);
-  font-family: var(--vp-font-family-mono);
+  font-size: 1rem;
+  color: var(--vp-c-text-1);
 }
 
-.progress-bar {
-  height: 10px;
-  background: var(--vp-c-bg-alt);
-  border-radius: 5px;
-  overflow: hidden;
-  margin-bottom: 1rem;
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
 }
 
-.progress-fill {
-  height: 100%;
-  background: linear-gradient(90deg, var(--vp-c-brand), var(--vp-c-brand-1));
-  transition: width 0.6s ease;
-  border-radius: 5px;
-}
-
-.size-comparison {
+.flow {
   display: flex;
   align-items: center;
-  justify-content: center;
-  gap: 1rem;
-  padding: 1rem;
-  background: var(--vp-c-bg-soft);
-  border-radius: 6px;
-  position: relative;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  overflow-x: auto;
 }
 
-.size-item {
+.step {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.25rem;
-}
-
-.size-label {
-  font-size: 0.8rem;
+  text-align: center;
+  font-size: 0.75rem;
   color: var(--vp-c-text-2);
+  padding: 0.5rem;
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+  min-width: 60px;
 }
 
-.size-value {
-  font-size: 1.2rem;
-  font-weight: 700;
-  color: var(--vp-c-text-1);
-  font-family: var(--vp-font-family-mono);
-}
-
-.size-value.success {
+.step.done {
+  background: var(--vp-c-brand-dimm);
   color: var(--vp-c-brand-delta);
 }
 
-.size-arrow {
-  font-size: 1.2rem;
+.step .num {
+  font-weight: 700;
+  font-size: 0.9rem;
+}
+
+.arrow {
+  font-size: 1rem;
+  color: var(--vp-c-text-3);
+  flex-shrink: 0;
+}
+
+.progress {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.bar {
+  flex: 1;
+  height: 8px;
+  background: var(--vp-c-bg-alt);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.fill {
+  height: 100%;
+  background: var(--vp-c-brand);
+  transition: width 0.3s ease;
+}
+
+.percent {
+  font-weight: 700;
+  font-size: 0.9rem;
   color: var(--vp-c-brand);
 }
 
-.compression-badge {
-  position: absolute;
-  top: -0.5rem;
-  right: 1rem;
+.build-btn {
+  width: 100%;
+  padding: 0.75rem;
   background: var(--vp-c-brand);
   color: white;
-  font-size: 0.75rem;
-  padding: 0.25rem 0.5rem;
-  border-radius: 4px;
-  font-weight: 600;
-}
-
-.action-buttons {
-  display: flex;
-  gap: 0.75rem;
-  justify-content: center;
-}
-
-.btn {
-  padding: 0.75rem 1.5rem;
+  border: none;
   border-radius: 6px;
-  font-size: 0.95rem;
+  font-size: 0.9rem;
   font-weight: 600;
   cursor: pointer;
-  border: none;
-  transition: all 0.3s ease;
+  transition: background 0.2s ease;
 }
 
-.btn.primary {
-  background: var(--vp-c-brand);
-  color: white;
-}
-
-.btn.primary:hover {
+.build-btn:hover:not(:disabled) {
   background: var(--vp-c-brand-1);
-  transform: translateY(-2px);
 }
 
-.btn.secondary {
-  background: var(--vp-c-bg-alt);
-  color: var(--vp-c-text-1);
-  border: 1px solid var(--vp-c-divider);
-}
-
-.btn.secondary:hover {
-  border-color: var(--vp-c-brand);
-}
-
-.info-box {
-  padding: 1rem 1.25rem;
-  margin: 0;
-  background: var(--vp-c-bg);
-  border-top: 1px solid var(--vp-c-divider);
-  font-size: 0.9rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.6;
-}
-
-.info-box p {
-  margin: 0;
-}
-
-.success-text {
-  color: var(--vp-c-brand-delta);
-}
-
-@media (max-width: 640px) {
-  .file-item {
-    padding: 0.5rem;
-  }
-
-  .size-comparison {
-    flex-direction: column;
-    gap: 0.75rem;
-  }
-
-  .compression-badge {
-    position: static;
-  }
+.build-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/deployment/DeploymentCdnDemo.vue b/docs/.vitepress/theme/components/appendix/deployment/DeploymentCdnDemo.vue
deleted file mode 100644
index 01f50a2..0000000
--- a/docs/.vitepress/theme/components/appendix/deployment/DeploymentCdnDemo.vue
+++ /dev/null
@@ -1,414 +0,0 @@
-<template>
-  <div class="deployment-cdn-demo">
-    <div class="demo-header">
-      <span class="icon">🌍</span>
-      <span class="title">CDN 加速原理</span>
-      <span class="subtitle">把资源送到用户家门口</span>
-    </div>
-
-    <div class="intro-text">
-      <strong>CDN</strong>（Content Delivery Network）就像在全世界开了连锁仓库，用户访问时从<strong>最近的仓库</strong>取货，速度超快！
-    </div>
-
-    <div class="demo-content">
-      <div class="world-map">
-        <div class="server-origin">
-          <span class="server-icon">🏠</span>
-          <span class="server-label">源站服务器<br/>(北京)</span>
-        </div>
-
-        <div class="cdn-nodes">
-          <div
-            v-for="node in cdnNodes"
-            :key="node.id"
-            class="cdn-node"
-            :class="{ active: activeNode === node.id }"
-            @click="selectNode(node)"
-          >
-            <span class="node-icon">{{ node.icon }}</span>
-            <span class="node-label">{{ node.city }}</span>
-            <span class="node-time">{{ node.time }}</span>
-          </div>
-        </div>
-
-        <div class="user-requests">
-          <div
-            v-for="user in users"
-            :key="user.id"
-            class="user-request"
-            :class="{ active: activeUser === user.id }"
-            @click="selectUser(user)"
-          >
-            <span class="user-icon">{{ user.icon }}</span>
-            <span class="user-label">{{ user.location }}</span>
-            <span class="user-arrow">→</span>
-            <span class="user-target">{{ user.cdnNode }}</span>
-          </div>
-        </div>
-      </div>
-
-      <div class="comparison-table">
-        <div class="table-title">⚡ 性能对比</div>
-        <table>
-          <thead>
-            <tr>
-              <th>用户位置</th>
-              <th>不使用 CDN</th>
-              <th>使用 CDN</th>
-              <th>提速</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="row in speedData" :key="row.location">
-              <td>{{ row.location }}</td>
-              <td class="slow">{{ row.withoutCdn }}</td>
-              <td class="fast">{{ row.withCdn }}</td>
-              <td class="speedup">{{ row.speedup }}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <div class="benefits">
-        <div class="benefit-title">✨ CDN 的好处</div>
-        <div class="benefit-list">
-          <div class="benefit-item">
-            <span class="benefit-icon">🚀</span>
-            <span class="benefit-text">访问速度提升 50-80%</span>
-          </div>
-          <div class="benefit-item">
-            <span class="benefit-icon">💰</span>
-            <span class="benefit-text">节省源站带宽成本</span>
-          </div>
-          <div class="benefit-item">
-            <span class="benefit-icon">🛡️</span>
-            <span class="benefit-text">DDoS 防护能力</span>
-          </div>
-          <div class="benefit-item">
-            <span class="benefit-icon">📱</span>
-            <span class="benefit-text">全球覆盖无死角</span>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="info-box">
-      <span class="icon">💡</span>
-      <strong>适用场景：</strong>静态资源（图片、CSS、JS）最适合上 CDN，动态数据还是走源站。
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-
-const activeNode = ref(null)
-const activeUser = ref(null)
-
-const cdnNodes = [
-  { id: 'beijing', city: '北京', icon: '🏙️', time: '10ms' },
-  { id: 'shanghai', city: '上海', icon: '🏙️', time: '15ms' },
-  { id: 'tokyo', city: '东京', icon: '🗼', time: '20ms' },
-  { id: 'london', city: '伦敦', icon: '🎡', time: '25ms' },
-  { id: 'newyork', city: '纽约', icon: '🗽', time: '18ms' }
-]
-
-const users = [
-  { id: 'user1', location: '北京用户', cdnNode: '北京节点', icon: '👤' },
-  { id: 'user2', location: '纽约用户', cdnNode: '纽约节点', icon: '👤' },
-  { id: 'user3', location: '伦敦用户', cdnNode: '伦敦节点', icon: '👤' }
-]
-
-const speedData = [
-  { location: '北京', withoutCdn: '10ms', withCdn: '10ms', speedup: '-' },
-  { location: '上海', withoutCdn: '30ms', withCdn: '15ms', speedup: '50%' },
-  { location: '纽约', withoutCdn: '200ms', withCdn: '18ms', speedup: '91%' },
-  { location: '伦敦', withoutCdn: '180ms', withCdn: '25ms', speedup: '86%' }
-]
-
-const selectNode = (node) => {
-  activeNode.value = node.id
-  activeUser.value = null
-}
-
-const selectUser = (user) => {
-  activeUser.value = user.id
-  activeNode.value = null
-}
-</script>
-
-<style scoped>
-.deployment-cdn-demo {
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  background: var(--vp-c-bg-soft);
-  padding: 1.5rem;
-  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;
-}
-
-.intro-text {
-  font-size: 0.9rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.6;
-  margin-bottom: 1rem;
-  padding: 0.75rem;
-  background: var(--vp-c-bg);
-  border-radius: 6px;
-}
-
-.intro-text strong {
-  color: var(--vp-c-brand-1);
-  font-weight: 500;
-}
-
-.demo-content {
-  margin-bottom: 1rem;
-}
-
-.world-map {
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  padding: 1rem;
-  margin-bottom: 1rem;
-}
-
-.server-origin {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem;
-  margin-bottom: 1rem;
-  background: linear-gradient(135deg, var(--vp-c-brand-soft), var(--vp-c-bg));
-  border-radius: 8px;
-  border: 2px solid var(--vp-c-brand);
-}
-
-.server-icon {
-  font-size: 2rem;
-}
-
-.server-label {
-  font-size: 0.85rem;
-  text-align: center;
-  color: var(--vp-c-text-1);
-  font-weight: 600;
-}
-
-.cdn-nodes {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-  margin-bottom: 1rem;
-}
-
-.cdn-node {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0.75rem;
-  background: var(--vp-c-bg-soft);
-  border: 2px solid var(--vp-c-divider);
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  flex: 1;
-  min-width: 80px;
-}
-
-.cdn-node:hover,
-.cdn-node.active {
-  border-color: var(--vp-c-brand);
-  background: var(--vp-c-brand-soft);
-  transform: translateY(-2px);
-}
-
-.node-icon {
-  font-size: 1.5rem;
-}
-
-.node-label {
-  font-size: 0.75rem;
-  text-align: center;
-  color: var(--vp-c-text-1);
-  font-weight: 500;
-}
-
-.node-time {
-  font-size: 0.7rem;
-  color: var(--vp-c-brand);
-  font-weight: 600;
-}
-
-.user-requests {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.user-request {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem;
-  background: var(--vp-c-bg-soft);
-  border-radius: 6px;
-  font-size: 0.8rem;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.user-request:hover,
-.user-request.active {
-  background: var(--vp-c-brand-soft);
-}
-
-.user-icon {
-  font-size: 1rem;
-}
-
-.user-label {
-  color: var(--vp-c-text-1);
-  flex: 1;
-}
-
-.user-arrow {
-  color: var(--vp-c-text-3);
-}
-
-.user-target {
-  color: var(--vp-c-brand);
-  font-weight: 600;
-}
-
-.comparison-table {
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  padding: 1rem;
-  margin-bottom: 1rem;
-}
-
-.table-title {
-  font-weight: 600;
-  font-size: 0.9rem;
-  margin-bottom: 0.75rem;
-  color: var(--vp-c-text-1);
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.85rem;
-}
-
-thead {
-  background: var(--vp-c-bg-soft);
-}
-
-th {
-  padding: 0.5rem;
-  text-align: left;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-  border-bottom: 2px solid var(--vp-c-divider);
-}
-
-td {
-  padding: 0.5rem;
-  border-bottom: 1px solid var(--vp-c-divider);
-  color: var(--vp-c-text-2);
-}
-
-td.slow {
-  color: #dc3545;
-  font-weight: 500;
-}
-
-td.fast {
-  color: #28a745;
-  font-weight: 500;
-}
-
-td.speedup {
-  color: var(--vp-c-brand);
-  font-weight: 600;
-}
-
-.benefits {
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  padding: 1rem;
-}
-
-.benefit-title {
-  font-weight: 600;
-  font-size: 0.9rem;
-  margin-bottom: 0.75rem;
-  color: var(--vp-c-text-1);
-}
-
-.benefit-list {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  gap: 0.75rem;
-}
-
-.benefit-item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.85rem;
-  color: var(--vp-c-text-2);
-}
-
-.benefit-icon {
-  font-size: 1.25rem;
-}
-
-.info-box {
-  background: var(--vp-c-bg-alt);
-  padding: 0.75rem;
-  border-radius: 6px;
-  font-size: 0.85rem;
-  color: var(--vp-c-text-2);
-}
-
-.info-box .icon {
-  margin-right: 0.25rem;
-}
-
-@media (max-width: 768px) {
-  .benefit-list {
-    grid-template-columns: 1fr;
-  }
-
-  .cdn-nodes {
-    justify-content: center;
-  }
-}
-</style>
diff --git a/docs/.vitepress/theme/components/appendix/deployment/DeploymentChecklistDemo.vue b/docs/.vitepress/theme/components/appendix/deployment/DeploymentChecklistDemo.vue
deleted file mode 100644
index 117af6c..0000000
--- a/docs/.vitepress/theme/components/appendix/deployment/DeploymentChecklistDemo.vue
+++ /dev/null
@@ -1,474 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue'
-
-const checklist = ref([
-  { id: 1, category: '代码', task: '代码已通过测试', checked: true, critical: true },
-  { id: 2, category: '代码', task: '移除调试代码和 console.log', checked: false, critical: false },
-  { id: 3, category: '环境', task: '生产环境配置已设置', checked: true, critical: true },
-  { id: 4, category: '环境', task: '数据库迁移脚本已准备', checked: false, critical: true },
-  { id: 5, category: '环境', task: '环境变量已配置', checked: true, critical: true },
-  { id: 6, category: '安全', task: '敏感信息已从代码中移除', checked: true, critical: true },
-  { id: 7, category: '安全', task: 'HTTPS 证书已配置', checked: false, critical: true },
-  { id: 8, category: '安全', task: '防火墙规则已设置', checked: true, critical: false },
-  { id: 9, category: '性能', task: '静态资源已压缩', checked: true, critical: false },
-  { id: 10, category: '性能', task: 'CDN 已配置', checked: false, critical: false },
-  { id: 11, category: '监控', task: '日志收集已启用', checked: true, critical: false },
-  { id: 12, category: '监控', task: '错误监控已配置', checked: false, critical: true },
-  { id: 13, category: '备份', task: '数据备份策略已确认', checked: true, critical: true },
-  { id: 14, category: '回滚', task: '回滚方案已准备', checked: false, critical: true },
-  { id: 15, category: '文档', task: '部署文档已更新', checked: false, critical: false }
-])
-
-const categories = computed(() => {
-  const cats = [...new Set(checklist.value.map(item => item.category))]
-  return cats
-})
-
-const itemsByCategory = (category) => {
-  return checklist.value.filter(item => item.category === category)
-}
-
-const totalTasks = computed(() => checklist.value.length)
-const completedTasks = computed(() => checklist.value.filter(item => item.checked).length)
-const progress = computed(() => Math.round((completedTasks.value / totalTasks.value) * 100))
-
-const criticalCompleted = computed(() => {
-  const criticalItems = checklist.value.filter(item => item.critical)
-  return criticalItems.filter(item => item.checked).length
-})
-
-const criticalTotal = computed(() => checklist.value.filter(item => item.critical).length)
-const allCriticalDone = computed(() => criticalCompleted.value === criticalTotal.value)
-
-const readyToDeploy = computed(() => {
-  return progress.value === 100 && allCriticalDone.value
-})
-</script>
-
-<template>
-  <div class="deployment-checklist">
-    <div class="demo-header">
-      <h3>上线前检查清单</h3>
-      <p class="subtitle">确保万无一失的起飞前检查</p>
-    </div>
-
-    <div class="intro-text">
-      <p>
-        就像飞机起飞前飞行员要逐项检查<strong>仪表盘</strong>、<strong>油量</strong>、<strong>跑道</strong>，
-        软件上线前的检查清单能避免很多低级错误导致的线上事故。
-      </p>
-    </div>
-
-    <div class="demo-content">
-      <!-- 进度概览 -->
-      <div class="progress-overview">
-        <div class="progress-circle">
-          <div class="progress-value" :class="{ success: progress === 100 }">
-            {{ progress }}%
-          </div>
-          <svg class="progress-ring" viewBox="0 0 100 100">
-            <circle
-              cx="50"
-              cy="50"
-              r="45"
-              fill="none"
-              :stroke="progress === 100 ? 'var(--vp-c-brand-delta)' : 'var(--vp-c-bg-alt)'"
-              stroke-width="8"
-            />
-            <circle
-              cx="50"
-              cy="50"
-              r="45"
-              fill="none"
-              :stroke="readyToDeploy ? 'var(--vp-c-brand-delta)' : 'var(--vp-c-brand)'"
-              stroke-width="8"
-              stroke-dasharray="283"
-              :stroke-dashoffset="283 - (283 * progress) / 100"
-              transform="rotate(-90 50 50)"
-              class="progress-ring-circle"
-            />
-          </svg>
-        </div>
-
-        <div class="progress-stats">
-          <div class="stat-item">
-            <span class="stat-value">{{ completedTasks }}/{{ totalTasks }}</span>
-            <span class="stat-label">总任务</span>
-          </div>
-          <div class="stat-item critical">
-            <span class="stat-value">{{ criticalCompleted }}/{{ criticalTotal }}</span>
-            <span class="stat-label">关键任务</span>
-          </div>
-          <div class="deploy-status" :class="{ ready: readyToDeploy }">
-            {{ readyToDeploy ? '✅ 准备就绪' : '⚠️ 还有待办项' }}
-          </div>
-        </div>
-      </div>
-
-      <!-- 分类检查清单 -->
-      <div class="checklist-categories">
-        <div
-          v-for="category in categories"
-          :key="category"
-          class="category-section"
-        >
-          <div class="category-title">{{ category }}</div>
-          <div class="checklist-items">
-            <div
-              v-for="item in itemsByCategory(category)"
-              :key="item.id"
-              class="checklist-item"
-              :class="{ checked: item.checked, critical: item.critical }"
-            >
-              <label class="checkbox-wrapper">
-                <input
-                  type="checkbox"
-                  v-model="item.checked"
-                  class="checkbox"
-                />
-                <span class="checkbox-custom"></span>
-                <span class="task-text">{{ item.task }}</span>
-                <span v-if="item.critical" class="critical-badge">关键</span>
-              </label>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- 提示信息 -->
-      <div v-if="!allCriticalDone" class="warning-box">
-        <span class="warning-icon">⚠️</span>
-        <span class="warning-text">
-          还有 <strong>{{ criticalTotal - criticalCompleted }}</strong> 项关键任务未完成，
-          建议优先处理这些关键项后再上线。
-        </span>
-      </div>
-
-      <div v-else-if="progress < 100" class="info-box-inline">
-        <span class="info-icon">ℹ️</span>
-        <span class="info-text">
-          关键任务已完成！还有 <strong>{{ totalTasks - completedTasks }}</strong> 项可选任务，
-          建议尽快完成以提升系统稳定性。
-        </span>
-      </div>
-
-      <div v-else class="success-box">
-        <span class="success-icon">🎉</span>
-        <span class="success-text">
-          太棒了！所有检查项都已完成，可以放心上线了！
-        </span>
-      </div>
-    </div>
-
-    <div class="info-box">
-      <p>
-        💡 <strong>最佳实践</strong>：将此检查清单集成到 CI/CD 流程中，
-        关键项不通过则禁止自动部署，避免人为疏忽导致线上故障。
-      </p>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.deployment-checklist {
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  background-color: var(--vp-c-bg-soft);
-  max-height: 600px;
-  overflow-y: auto;
-  margin: 1rem 0;
-}
-
-.demo-header {
-  padding: 1.25rem;
-  background: var(--vp-c-bg);
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-
-.demo-header h3 {
-  margin: 0 0 0.5rem 0;
-  font-size: 1.2rem;
-  color: var(--vp-c-text-1);
-}
-
-.subtitle {
-  margin: 0;
-  font-size: 0.9rem;
-  color: var(--vp-c-text-2);
-}
-
-.intro-text {
-  padding: 1rem 1.25rem;
-  font-size: 0.9rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.6;
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-
-.demo-content {
-  padding: 1.25rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.progress-overview {
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  padding: 1.5rem;
-  border: 1px solid var(--vp-c-divider);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 2rem;
-}
-
-.progress-circle {
-  position: relative;
-  width: 100px;
-  height: 100px;
-}
-
-.progress-ring {
-  width: 100%;
-  height: 100%;
-}
-
-.progress-ring-circle {
-  transition: stroke-dashoffset 0.5s ease;
-}
-
-.progress-value {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: var(--vp-c-brand);
-}
-
-.progress-value.success {
-  color: var(--vp-c-brand-delta);
-}
-
-.progress-stats {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.stat-item {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.stat-value {
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: var(--vp-c-text-1);
-  font-family: var(--vp-font-family-mono);
-}
-
-.stat-label {
-  font-size: 0.8rem;
-  color: var(--vp-c-text-2);
-}
-
-.stat-item.critical .stat-value {
-  color: #ef4444;
-}
-
-.deploy-status {
-  font-size: 0.9rem;
-  font-weight: 600;
-  padding: 0.5rem 1rem;
-  background: #fef3c7;
-  color: #92400e;
-  border-radius: 6px;
-  text-align: center;
-}
-
-.deploy-status.ready {
-  background: var(--vp-c-brand-dimm);
-  color: var(--vp-c-brand-delta);
-}
-
-.checklist-categories {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.category-section {
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  padding: 1rem;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.category-title {
-  font-size: 0.95rem;
-  font-weight: 700;
-  color: var(--vp-c-text-1);
-  margin-bottom: 0.75rem;
-  padding-bottom: 0.5rem;
-  border-bottom: 2px solid var(--vp-c-divider);
-}
-
-.checklist-items {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.checklist-item {
-  padding: 0.75rem;
-  border-radius: 6px;
-  background: var(--vp-c-bg-soft);
-  border: 1px solid var(--vp-c-divider);
-  transition: all 0.3s ease;
-}
-
-.checklist-item.checked {
-  background: var(--vp-c-brand-dimm);
-  border-color: var(--vp-c-brand-delta);
-}
-
-.checklist-item.critical {
-  border-left: 3px solid #ef4444;
-}
-
-.checklist-item.critical.checked {
-  border-left-color: var(--vp-c-brand-delta);
-}
-
-.checkbox-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  cursor: pointer;
-  user-select: none;
-}
-
-.checkbox {
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.checkbox-custom {
-  width: 20px;
-  height: 20px;
-  border: 2px solid var(--vp-c-divider);
-  border-radius: 4px;
-  position: relative;
-  transition: all 0.3s ease;
-  flex-shrink: 0;
-}
-
-.checkbox:checked + .checkbox-custom {
-  background: var(--vp-c-brand);
-  border-color: var(--vp-c-brand);
-}
-
-.checkbox:checked + .checkbox-custom::after {
-  content: '✓';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  color: white;
-  font-size: 0.75rem;
-  font-weight: 700;
-}
-
-.task-text {
-  flex: 1;
-  font-size: 0.9rem;
-  color: var(--vp-c-text-1);
-}
-
-.checklist-item.checked .task-text {
-  text-decoration: line-through;
-  color: var(--vp-c-text-3);
-}
-
-.critical-badge {
-  font-size: 0.7rem;
-  padding: 0.15rem 0.4rem;
-  background: #fee2e2;
-  color: #dc2626;
-  border-radius: 4px;
-  font-weight: 600;
-}
-
-.warning-box,
-.info-box-inline,
-.success-box {
-  padding: 1rem;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.warning-box {
-  background: #fef3c7;
-  border-left: 3px solid #f59e0b;
-}
-
-.info-box-inline {
-  background: #dbeafe;
-  border-left: 3px solid #3b82f6;
-}
-
-.success-box {
-  background: var(--vp-c-brand-dimm);
-  border-left: 3px solid var(--vp-c-brand-delta);
-}
-
-.warning-icon,
-.info-icon,
-.success-icon {
-  font-size: 1.2rem;
-}
-
-.warning-text,
-.info-text,
-.success-text {
-  flex: 1;
-  font-size: 0.9rem;
-  color: var(--vp-c-text-1);
-  line-height: 1.5;
-}
-
-.info-box {
-  padding: 1rem 1.25rem;
-  margin: 0;
-  background: var(--vp-c-bg);
-  border-top: 1px solid var(--vp-c-divider);
-  font-size: 0.9rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.6;
-}
-
-.info-box p {
-  margin: 0;
-}
-
-@media (max-width: 640px) {
-  .progress-overview {
-    flex-direction: column;
-  }
-
-  .checkbox-wrapper {
-    gap: 0.5rem;
-  }
-
-  .task-text {
-    font-size: 0.85rem;
-  }
-}
-</style>
diff --git a/docs/.vitepress/theme/components/appendix/deployment/DeploymentCicdDemo.vue b/docs/.vitepress/theme/components/appendix/deployment/DeploymentCicdDemo.vue
index b31ebb2..b3818fe 100644
--- a/docs/.vitepress/theme/components/appendix/deployment/DeploymentCicdDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/deployment/DeploymentCicdDemo.vue
@@ -1,358 +1,151 @@
+<!--
+  DeploymentCicdDemo.vue
+  CI/CD 自动化（精简版）
+-->
 <template>
-  <div class="deployment-cicd-demo">
-    <div class="demo-header">
+  <div class="deployment-cicd">
+    <div class="header">
       <span class="icon">🔄</span>
-      <span class="title">CI/CD 自动化流程</span>
+      <span class="title">CI/CD 自动化</span>
       <span class="subtitle">从代码到上线，一键搞定</span>
     </div>
 
-    <div class="intro-text">
-      <strong>CI/CD</strong> 就像一条<strong>自动化流水线</strong>：你只管写代码，剩下的测试、构建、部署，流水线自动帮你完成！
+    <div class="pipeline">
+      <div class="step">
+        <span class="num">1</span>
+        <span class="text">代码推送</span>
+      </div>
+      <span class="arrow">→</span>
+      <div class="step">
+        <span class="num">2</span>
+        <span class="text">自动测试</span>
+      </div>
+      <span class="arrow">→</span>
+      <div class="step">
+        <span class="num">3</span>
+        <span class="text">自动构建</span>
+      </div>
+      <span class="arrow">→</span>
+      <div class="step">
+        <span class="num">4</span>
+        <span class="text">自动部署</span>
+      </div>
     </div>
 
-    <div class="demo-content">
-      <div class="pipeline">
-        <div
-          v-for="(step, index) in pipelineSteps"
-          :key="index"
-          class="pipeline-step"
-          :class="{ active: currentStep === index, completed: currentStep > index }"
-        >
-          <div class="step-connector" v-if="index > 0"></div>
-          <div class="step-icon">{{ step.icon }}</div>
-          <div class="step-info">
-            <div class="step-title">{{ step.title }}</div>
-            <div class="step-desc">{{ step.desc }}</div>
-          </div>
-          <div class="step-status" v-if="currentStep === index">
-            <span class="spinner">⏳</span>
-          </div>
-          <div class="step-status" v-if="currentStep > index">
-            <span class="check">✅</span>
-          </div>
-        </div>
+    <div class="compare">
+      <div class="col">
+        <div class="title">手动部署</div>
+        <div class="item">❌ 容易出错</div>
       </div>
-
-      <div class="manual-vs-auto">
-        <div class="compare-column manual">
-          <div class="column-header">
-            <span class="column-icon">😰</span>
-            <span class="column-title">手动部署</span>
-          </div>
-          <div class="column-body">
-            <div class="step-list">
-              <div class="step-item">❌ 手动改代码</div>
-              <div class="step-item">❌ 手动上传 FTP</div>
-              <div class="step-item">❌ 手动 SSH 连接</div>
-              <div class="step-item">❌ 手动重启服务</div>
-              <div class="step-item">❌ 容易出错，慢</div>
-            </div>
-          </div>
-        </div>
-
-        <div class="compare-column auto">
-          <div class="column-header">
-            <span class="column-icon">🎉</span>
-            <span class="column-title">CI/CD 自动化</span>
-          </div>
-          <div class="column-body">
-            <div class="step-list">
-              <div class="step-item">✅ Git 推送代码</div>
-              <div class="step-item">✅ 自动运行测试</div>
-              <div class="step-item">✅ 自动构建打包</div>
-              <div class="step-item">✅ 自动部署上线</div>
-              <div class="step-item">✅ 快速可靠</div>
-            </div>
-          </div>
-        </div>
+      <div class="col highlight">
+        <div class="title">CI/CD</div>
+        <div class="item">✅ 快速可靠</div>
       </div>
-
-      <button @click="startPipeline" class="start-btn" :disabled="isRunning">
-        {{ isRunning ? '⏳ 流水线运行中...' : '▶ 启动流水线' }}
-      </button>
-    </div>
-
-    <div class="info-box">
-      <span class="icon">💡</span>
-      <strong>推荐工具：</strong>GitHub Actions（免费）、GitLab CI、Jenkins。几分钟就能配置好！
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-
-const currentStep = ref(-1)
-const isRunning = ref(false)
-
-const pipelineSteps = [
-  { icon: '💻', title: '代码提交', desc: 'git push 到 GitHub' },
-  { icon: '🧪', title: '自动测试', desc: '运行单元测试' },
-  { icon: '📦', title: '自动构建', desc: 'npm run build' },
-  { icon: '🚀', title: '自动部署', desc: '部署到服务器' },
-  { icon: '✨', title: '完成上线', desc: '新版本可用' }
-]
-
-const startPipeline = () => {
-  if (isRunning.value) return
-
-  isRunning.value = true
-  currentStep.value = -1
-
-  const steps = [0, 1, 2, 3, 4]
-  let delay = 0
-
-  steps.forEach((step, index) => {
-    delay += 1500
-    setTimeout(() => {
-      currentStep.value = step
-      if (index === steps.length - 1) {
-        setTimeout(() => {
-          isRunning.value = false
-          setTimeout(() => {
-            currentStep.value = -1
-          }, 2000)
-        }, 1000)
-      }
-    }, delay)
-  })
-}
 </script>
 
 <style scoped>
-.deployment-cicd-demo {
+.deployment-cicd {
   border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
   background: var(--vp-c-bg-soft);
-  padding: 1.5rem;
+  padding: 0.75rem;
   margin: 1rem 0;
-  max-height: 600px;
-  overflow-y: auto;
 }
 
-.demo-header {
+.header {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   margin-bottom: 0.75rem;
 }
 
-.demo-header .icon {
+.header .icon {
   font-size: 1.25rem;
 }
 
-.demo-header .title {
-  font-weight: bold;
+.header .title {
+  font-weight: 700;
   font-size: 1rem;
+  color: var(--vp-c-text-1);
 }
 
-.demo-header .subtitle {
+.header .subtitle {
   color: var(--vp-c-text-2);
   font-size: 0.85rem;
-  margin-left: 0.5rem;
-}
-
-.intro-text {
-  font-size: 0.9rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.6;
-  margin-bottom: 1rem;
-  padding: 0.75rem;
-  background: var(--vp-c-bg);
-  border-radius: 6px;
-}
-
-.intro-text strong {
-  color: var(--vp-c-brand-1);
-  font-weight: 500;
-}
-
-.demo-content {
-  margin-bottom: 1rem;
 }
 
 .pipeline {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  margin-bottom: 1.5rem;
-  overflow-x: auto;
-  padding: 0.5rem 0;
+  padding: 0.75rem;
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  margin-bottom: 0.75rem;
 }
 
-.pipeline-step {
+.step {
   display: flex;
   flex-direction: column;
   align-items: center;
-  position: relative;
-  min-width: 100px;
-  flex: 1;
-}
-
-.step-connector {
-  position: absolute;
-  top: 20px;
-  left: -50%;
-  width: 100%;
-  height: 2px;
-  background: var(--vp-c-divider);
-  z-index: 0;
-}
-
-.pipeline-step.completed .step-connector {
-  background: var(--vp-c-brand);
-}
-
-.step-icon {
-  font-size: 1.5rem;
-  margin-bottom: 0.5rem;
-  z-index: 1;
-  background: var(--vp-c-bg);
-  padding: 0 0.5rem;
-}
-
-.step-info {
+  gap: 0.25rem;
   text-align: center;
-  z-index: 1;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  padding: 0.5rem;
+  background: var(--vp-c-bg-soft);
+  border-radius: 6px;
+  min-width: 60px;
 }
 
-.step-title {
+.step .num {
+  font-weight: 700;
+  color: var(--vp-c-brand);
+}
+
+.step .text {
   font-weight: 600;
-  font-size: 0.8rem;
+}
+
+.arrow {
+  font-size: 1rem;
+  color: var(--vp-c-text-3);
+}
+
+.compare {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.col {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+}
+
+.col.highlight {
+  background: var(--vp-c-brand-dimm);
+}
+
+.col .title {
+  font-weight: 600;
+  font-size: 0.85rem;
   color: var(--vp-c-text-1);
   margin-bottom: 0.25rem;
 }
 
-.step-desc {
-  font-size: 0.7rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.3;
-}
-
-.step-status {
-  margin-top: 0.5rem;
-  font-size: 1rem;
-}
-
-.pipeline-step.active .step-icon {
-  animation: pulse 1s infinite;
-}
-
-.pipeline-step.completed .step-icon {
-  opacity: 0.5;
-}
-
-@keyframes pulse {
-  0%, 100% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.2);
-  }
-}
-
-.manual-vs-auto {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1rem;
-  margin-bottom: 1.5rem;
-}
-
-.compare-column {
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.compare-column.manual {
-  background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
-}
-
-.compare-column.auto {
-  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
-}
-
-.column-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-}
-
-.column-icon {
-  font-size: 1.5rem;
-}
-
-.column-title {
-  font-size: 0.9rem;
-}
-
-.column-body {
-  background: white;
-  padding: 0.75rem;
-}
-
-.step-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.step-item {
+.col .item {
   font-size: 0.8rem;
-  padding: 0.4rem;
-  background: var(--vp-c-bg-soft);
-  border-radius: 4px;
-  text-align: center;
-}
-
-.start-btn {
-  width: 100%;
-  padding: 0.875rem;
-  background: var(--vp-c-brand);
-  color: white;
-  border: none;
-  border-radius: 6px;
-  font-size: 0.9rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.start-btn:hover:not(:disabled) {
-  background: var(--vp-c-brand-1);
-  transform: translateY(-1px);
-}
-
-.start-btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.info-box {
-  background: var(--vp-c-bg-alt);
-  padding: 0.75rem;
-  border-radius: 6px;
-  font-size: 0.85rem;
   color: var(--vp-c-text-2);
 }
-
-.info-box .icon {
-  margin-right: 0.25rem;
-}
-
-@media (max-width: 768px) {
-  .manual-vs-auto {
-    grid-template-columns: 1fr;
-  }
-
-  .pipeline {
-    flex-wrap: wrap;
-  }
-
-  .pipeline-step {
-    min-width: 80px;
-  }
-}
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/deployment/DeploymentDnsDemo.vue b/docs/.vitepress/theme/components/appendix/deployment/DeploymentDnsDemo.vue
index 961b130..391e5d2 100644
--- a/docs/.vitepress/theme/components/appendix/deployment/DeploymentDnsDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/deployment/DeploymentDnsDemo.vue
@@ -1,315 +1,135 @@
+<!--
+  DeploymentDnsDemo.vue
+  DNS 解析（精简版）
+-->
 <template>
-  <div class="deployment-dns-demo">
-    <div class="demo-header">
+  <div class="deployment-dns">
+    <div class="header">
       <span class="icon">🔍</span>
-      <span class="title">DNS 解析流程</span>
-      <span class="subtitle">域名是怎么变成 IP 地址的</span>
+      <span class="title">DNS 解析</span>
+      <span class="subtitle">把"好记的名字"变成"机器能懂的IP"</span>
     </div>
 
-    <div class="intro-text">
-      想象你要给朋友打电话，但你只记得他的名字，不记得电话号。<strong>DNS</strong> 就像一个<strong>电话本</strong>，帮你把名字翻译成号码。
-    </div>
-
-    <div class="demo-content">
-      <div class="dns-flow">
-        <div class="flow-step" :class="{ active: currentStep >= 1 }">
-          <div class="step-icon">💻</div>
-          <div class="step-info">
-            <div class="step-title">用户输入域名</div>
-            <div class="step-desc">在浏览器输入 coffee.example.com</div>
-          </div>
-        </div>
-
-        <div class="flow-arrow">→</div>
-
-        <div class="flow-step" :class="{ active: currentStep >= 2 }">
-          <div class="step-icon">📋</div>
-          <div class="step-info">
-            <div class="step-title">查询本地 DNS</div>
-            <div class="step-desc">先查电脑的"电话本"（缓存）</div>
-          </div>
-        </div>
-
-        <div class="flow-arrow">→</div>
-
-        <div class="flow-step" :class="{ active: currentStep >= 3 }">
-          <div class="step-icon">🌐</div>
-          <div class="step-info">
-            <div class="step-title">向上级 DNS 查询</div>
-            <div class="step-desc">本地没有，问"上级电话局"</div>
-          </div>
-        </div>
-
-        <div class="flow-arrow">→</div>
-
-        <div class="flow-step" :class="{ active: currentStep >= 4 }">
-          <div class="step-icon">🏠</div>
-          <div class="step-info">
-            <div class="step-title">返回 IP 地址</div>
-            <div class="step-desc">找到了！123.45.67.89</div>
-          </div>
-        </div>
+    <div class="flow">
+      <div class="step">
+        <span class="emoji">💻</span>
+        <span class="text">用户输入域名</span>
       </div>
-
-      <div class="example-box">
-        <div class="example-title">DNS 记录示例</div>
-        <div class="record-list">
-          <div class="record-item">
-            <span class="record-type">A 记录</span>
-            <span class="record-name">coffee.example.com</span>
-            <span class="record-arrow">→</span>
-            <span class="record-value">123.45.67.89</span>
-          </div>
-          <div class="record-item">
-            <span class="record-type">CNAME</span>
-            <span class="record-name">www.coffee.example.com</span>
-            <span class="record-arrow">→</span>
-            <span class="record-value">coffee.example.com</span>
-          </div>
-        </div>
+      <span class="arrow">→</span>
+      <div class="step">
+        <span class="emoji">📋</span>
+        <span class="text">查询 DNS</span>
+      </div>
+      <span class="arrow">→</span>
+      <div class="step success">
+        <span class="emoji">✅</span>
+        <span class="text">返回 IP</span>
       </div>
-
-      <button @click="playAnimation" class="play-btn">
-        {{ isPlaying ? '▶ 重新播放' : '▶ 播放动画' }}
-      </button>
     </div>
 
-    <div class="info-box">
-      <span class="icon">💡</span>
-      <strong>关键点：</strong>DNS 修改不是立即生效的，全球同步需要几分钟到几小时（受 TTL 影响）。
+    <div class="example">
+      <span class="label">示例：</span>
+      <code>example.com → 192.168.1.1</code>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-
-const currentStep = ref(0)
-const isPlaying = ref(false)
-
-const playAnimation = () => {
-  isPlaying.value = true
-  currentStep.value = 0
-
-  const steps = [1, 2, 3, 4]
-  let delay = 0
-
-  steps.forEach((step, index) => {
-    delay += 800
-    setTimeout(() => {
-      currentStep.value = step
-      if (index === steps.length - 1) {
-        setTimeout(() => {
-          isPlaying.value = false
-        }, 1000)
-      }
-    }, delay)
-  })
-}
 </script>
 
 <style scoped>
-.deployment-dns-demo {
+.deployment-dns {
   border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
   background: var(--vp-c-bg-soft);
-  padding: 1.5rem;
+  padding: 0.75rem;
   margin: 1rem 0;
-  max-height: 600px;
-  overflow-y: auto;
 }
 
-.demo-header {
+.header {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   margin-bottom: 0.75rem;
 }
 
-.demo-header .icon {
+.header .icon {
   font-size: 1.25rem;
 }
 
-.demo-header .title {
-  font-weight: bold;
+.header .title {
+  font-weight: 700;
   font-size: 1rem;
-}
-
-.demo-header .subtitle {
-  color: var(--vp-c-text-2);
-  font-size: 0.85rem;
-  margin-left: 0.5rem;
-}
-
-.intro-text {
-  font-size: 0.9rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.6;
-  margin-bottom: 1rem;
-  padding: 0.75rem;
-  background: var(--vp-c-bg);
-  border-radius: 6px;
-}
-
-.intro-text strong {
-  color: var(--vp-c-brand-1);
-  font-weight: 500;
-}
-
-.demo-content {
-  margin-bottom: 1rem;
-}
-
-.dns-flow {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 1.5rem;
-  gap: 0.5rem;
-}
-
-.flow-step {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 0.75rem;
-  background: var(--vp-c-bg);
-  border: 2px solid var(--vp-c-divider);
-  border-radius: 8px;
-  transition: all 0.3s ease;
-}
-
-.flow-step.active {
-  border-color: var(--vp-c-brand);
-  background: var(--vp-c-brand-soft);
-  transform: translateY(-2px);
-}
-
-.step-icon {
-  font-size: 1.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.step-info {
-  text-align: center;
-}
-
-.step-title {
-  font-weight: 600;
-  font-size: 0.85rem;
   color: var(--vp-c-text-1);
-  margin-bottom: 0.25rem;
 }
 
-.step-desc {
-  font-size: 0.75rem;
+.header .subtitle {
   color: var(--vp-c-text-2);
-  line-height: 1.4;
+  font-size: 0.85rem;
 }
 
-.flow-arrow {
-  font-size: 1.25rem;
-  color: var(--vp-c-text-3);
-}
-
-.example-box {
+.flow {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem;
   background: var(--vp-c-bg);
   border-radius: 8px;
-  padding: 1rem;
-  margin-bottom: 1rem;
-}
-
-.example-title {
-  font-weight: 600;
-  font-size: 0.9rem;
   margin-bottom: 0.75rem;
-  color: var(--vp-c-text-1);
 }
 
-.record-list {
+.step {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
-}
-
-.record-item {
-  display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.25rem;
+  text-align: center;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
   padding: 0.5rem;
   background: var(--vp-c-bg-soft);
-  border-radius: 4px;
-  font-size: 0.8rem;
-}
-
-.record-type {
-  background: var(--vp-c-brand);
-  color: white;
-  padding: 0.2rem 0.5rem;
-  border-radius: 4px;
-  font-weight: 600;
-  font-size: 0.7rem;
+  border-radius: 6px;
   min-width: 60px;
-  text-align: center;
 }
 
-.record-name {
-  color: var(--vp-c-text-2);
-  flex: 1;
-  font-family: monospace;
+.step.success {
+  background: var(--vp-c-brand-dimm);
+  color: var(--vp-c-brand-delta);
 }
 
-.record-arrow {
+.step .emoji {
+  font-size: 1.25rem;
+}
+
+.step .text {
+  font-weight: 600;
+}
+
+.arrow {
+  font-size: 1rem;
   color: var(--vp-c-text-3);
 }
 
-.record-value {
-  color: var(--vp-c-brand);
-  font-family: monospace;
-  font-weight: 500;
-}
-
-.play-btn {
-  width: 100%;
-  padding: 0.75rem;
-  background: var(--vp-c-brand);
-  color: white;
-  border: none;
-  border-radius: 6px;
-  font-size: 0.9rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background 0.2s ease;
-}
-
-.play-btn:hover {
-  background: var(--vp-c-brand-1);
-}
-
-.info-box {
-  background: var(--vp-c-bg-alt);
+.example {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
   padding: 0.75rem;
+  background: var(--vp-c-bg);
   border-radius: 6px;
   font-size: 0.85rem;
+}
+
+.example .label {
   color: var(--vp-c-text-2);
 }
 
-.info-box .icon {
-  margin-right: 0.25rem;
-}
-
-@media (max-width: 768px) {
-  .dns-flow {
-    flex-wrap: wrap;
-  }
-
-  .flow-arrow {
-    display: none;
-  }
-
-  .flow-step {
-    min-width: 45%;
-  }
+.example code {
+  font-family: var(--vp-font-family-mono);
+  color: var(--vp-c-brand);
+  background: var(--vp-c-bg-soft);
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/deployment/DeploymentEnvironmentDemo.vue b/docs/.vitepress/theme/components/appendix/deployment/DeploymentEnvironmentDemo.vue
deleted file mode 100644
index 4c26f25..0000000
--- a/docs/.vitepress/theme/components/appendix/deployment/DeploymentEnvironmentDemo.vue
+++ /dev/null
@@ -1,395 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue'
-
-const environments = ref(['dev', 'test', 'prod'])
-const currentEnv = ref('dev')
-
-const envConfigs = {
-  dev: {
-    name: '开发环境',
-    icon: '🔧',
-    color: '#3b82f6',
-    apiUrl: 'http://dev.api.example.com',
-    dbUrl: 'dev-db.example.com',
-    features: ['热重载', '详细日志', '调试工具'],
-    analogy: '小明的测试厨房，不断尝试新配方'
-  },
-  test: {
-    name: '测试环境',
-    icon: '🧪',
-    color: '#f59e0b',
-    apiUrl: 'http://test.api.example.com',
-    dbUrl: 'test-db.example.com',
-    features: ['模拟数据', '自动化测试', 'Bug 追踪'],
-    analogy: '内部试吃环节，确保品质稳定'
-  },
-  prod: {
-    name: '生产环境',
-    icon: '🚀',
-    color: '#10b981',
-    apiUrl: 'https://api.example.com',
-    dbUrl: 'prod-db.example.com',
-    features: ['性能优化', '安全加固', '监控告警'],
-    analogy: '正式营业的咖啡店，服务真实顾客'
-  }
-}
-
-const currentConfig = computed(() => envConfigs[currentEnv.value])
-</script>
-
-<template>
-  <div class="deployment-environment">
-    <div class="demo-header">
-      <h3>环境配置演示</h3>
-      <p class="subtitle">开发、测试、生产三分离</p>
-    </div>
-
-    <div class="intro-text">
-      <p>
-        就像小明有<strong>研发厨房</strong>、<strong>试吃区域</strong>、<strong>正式门店</strong>三个独立空间，
-        软件也需要隔离的环境避免开发测试影响真实用户。
-      </p>
-    </div>
-
-    <div class="demo-content">
-      <!-- 环境切换 -->
-      <div class="env-tabs">
-        <div
-          v-for="env in environments"
-          :key="env"
-          class="env-tab"
-          :class="{ active: currentEnv === env }"
-          @click="currentEnv = env"
-          :style="{ '--env-color': envConfigs[env].color }"
-        >
-          <span class="tab-icon">{{ envConfigs[env].icon }}</span>
-          <span class="tab-name">{{ envConfigs[env].name }}</span>
-        </div>
-      </div>
-
-      <!-- 环境详情 -->
-      <div class="env-detail">
-        <div class="detail-header" :style="{ '--env-color': currentConfig.color }">
-          <span class="detail-icon">{{ currentConfig.icon }}</span>
-          <div class="detail-info">
-            <h4>{{ currentConfig.name }}</h4>
-            <p class="detail-analogy">{{ currentConfig.analogy }}</p>
-          </div>
-        </div>
-
-        <div class="config-list">
-          <div class="config-item">
-            <span class="config-label">API 地址</span>
-            <span class="config-value">{{ currentConfig.apiUrl }}</span>
-          </div>
-          <div class="config-item">
-            <span class="config-label">数据库</span>
-            <span class="config-value">{{ currentConfig.dbUrl }}</span>
-          </div>
-        </div>
-
-        <div class="features">
-          <div class="features-title">✨ 特性</div>
-          <div class="features-list">
-            <span
-              v-for="feature in currentConfig.features"
-              :key="feature"
-              class="feature-tag"
-            >
-              {{ feature }}
-            </span>
-          </div>
-        </div>
-      </div>
-
-      <!-- 流程说明 -->
-      <div class="flow-diagram">
-        <div class="flow-title">🔄 环境流转</div>
-        <div class="flow-steps">
-          <div class="flow-step" :class="{ active: currentEnv === 'dev' }">
-            <div class="step-badge">1</div>
-            <div class="step-text">开发</div>
-          </div>
-          <div class="flow-arrow">→</div>
-          <div class="flow-step" :class="{ active: currentEnv === 'test' }">
-            <div class="step-badge">2</div>
-            <div class="step-text">测试</div>
-          </div>
-          <div class="flow-arrow">→</div>
-          <div class="flow-step" :class="{ active: currentEnv === 'prod' }">
-            <div class="step-badge">3</div>
-            <div class="step-text">生产</div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="info-box">
-      <p>
-        💡 <strong>最佳实践</strong>：永远不要在开发环境直接修改生产配置！就像小明不会在正式营业时突然换咖啡配方。
-      </p>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.deployment-environment {
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  background-color: var(--vp-c-bg-soft);
-  max-height: 600px;
-  overflow-y: auto;
-  margin: 1rem 0;
-}
-
-.demo-header {
-  padding: 1.25rem;
-  background: var(--vp-c-bg);
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-
-.demo-header h3 {
-  margin: 0 0 0.5rem 0;
-  font-size: 1.2rem;
-  color: var(--vp-c-text-1);
-}
-
-.subtitle {
-  margin: 0;
-  font-size: 0.9rem;
-  color: var(--vp-c-text-2);
-}
-
-.intro-text {
-  padding: 1rem 1.25rem;
-  font-size: 0.9rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.6;
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-
-.demo-content {
-  padding: 1.25rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.env-tabs {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 0.75rem;
-}
-
-.env-tab {
-  background: var(--vp-c-bg);
-  border: 2px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 1rem;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.env-tab:hover {
-  border-color: var(--vp-c-brand-soft);
-}
-
-.env-tab.active {
-  border-color: var(--env-color);
-  background: var(--vp-c-brand-soft);
-}
-
-.tab-icon {
-  font-size: 1.5rem;
-}
-
-.tab-name {
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-}
-
-.env-detail {
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  padding: 1rem;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.detail-header {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding-bottom: 1rem;
-  border-bottom: 2px solid var(--env-color);
-  margin-bottom: 1rem;
-}
-
-.detail-icon {
-  font-size: 2.5rem;
-}
-
-.detail-info h4 {
-  margin: 0 0 0.25rem 0;
-  font-size: 1.1rem;
-  color: var(--vp-c-text-1);
-}
-
-.detail-analogy {
-  margin: 0;
-  font-size: 0.85rem;
-  color: var(--vp-c-text-2);
-  font-style: italic;
-}
-
-.config-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  margin-bottom: 1rem;
-}
-
-.config-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.75rem;
-  background: var(--vp-c-bg-soft);
-  border-radius: 6px;
-}
-
-.config-label {
-  font-size: 0.85rem;
-  color: var(--vp-c-text-2);
-  font-weight: 600;
-}
-
-.config-value {
-  font-size: 0.85rem;
-  color: var(--vp-c-brand-1);
-  font-family: var(--vp-font-family-mono);
-}
-
-.features {
-  margin-top: 1rem;
-}
-
-.features-title {
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-  margin-bottom: 0.5rem;
-}
-
-.features-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-}
-
-.feature-tag {
-  background: var(--vp-c-brand-soft);
-  color: var(--vp-c-brand-1);
-  padding: 0.3rem 0.6rem;
-  border-radius: 4px;
-  font-size: 0.8rem;
-  font-weight: 600;
-}
-
-.flow-diagram {
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  padding: 1rem;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.flow-title {
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-  margin-bottom: 1rem;
-}
-
-.flow-steps {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-}
-
-.flow-step {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem 1rem;
-  border-radius: 6px;
-  border: 2px solid var(--vp-c-divider);
-  background: var(--vp-c-bg-soft);
-  transition: all 0.3s ease;
-  min-width: 80px;
-}
-
-.flow-step.active {
-  border-color: var(--vp-c-brand);
-  background: var(--vp-c-brand-soft);
-}
-
-.step-badge {
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  background: var(--vp-c-brand);
-  color: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.85rem;
-  font-weight: 700;
-}
-
-.step-text {
-  font-size: 0.85rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-}
-
-.flow-arrow {
-  font-size: 1.2rem;
-  color: var(--vp-c-brand);
-  margin: 0 0.25rem;
-}
-
-.info-box {
-  padding: 1rem 1.25rem;
-  margin: 0;
-  background: var(--vp-c-bg);
-  border-top: 1px solid var(--vp-c-divider);
-  font-size: 0.9rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.6;
-}
-
-.info-box p {
-  margin: 0;
-}
-
-@media (max-width: 640px) {
-  .env-tabs {
-    grid-template-columns: 1fr;
-  }
-
-  .flow-steps {
-    flex-direction: column;
-  }
-
-  .flow-arrow {
-    transform: rotate(90deg);
-  }
-}
-</style>
diff --git a/docs/.vitepress/theme/components/appendix/deployment/DeploymentHttpsDemo.vue b/docs/.vitepress/theme/components/appendix/deployment/DeploymentHttpsDemo.vue
index 45b73bd..2edd900 100644
--- a/docs/.vitepress/theme/components/appendix/deployment/DeploymentHttpsDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/deployment/DeploymentHttpsDemo.vue
@@ -1,98 +1,28 @@
+<!--
+  DeploymentHttpsDemo.vue
+  HTTPS 安全（精简版）
+-->
 <template>
-  <div class="deployment-https-demo">
-    <div class="demo-header">
+  <div class="deployment-https">
+    <div class="header">
       <span class="icon">🔒</span>
-      <span class="title">HTTPS 安全传输</span>
+      <span class="title">HTTPS 安全</span>
       <span class="subtitle">给数据传输加把锁</span>
     </div>
 
-    <div class="intro-text">
-      <strong>HTTP</strong> 就像寄明信片，邮递员能看见内容。<strong>HTTPS</strong> 就像寄保险箱，只有收件人能打开。
-    </div>
-
-    <div class="demo-content">
-      <div class="comparison">
-        <div class="compare-card http">
-          <div class="card-header">
-            <span class="lock-icon">🔓</span>
-            <span class="card-title">HTTP（不安全）</span>
-          </div>
-          <div class="card-body">
-            <div class="data-flow">
-              <div class="sender">👤 用户</div>
-              <div class="envelope open">
-                <div class="content-visible">密码: 123456</div>
-              </div>
-              <div class="thief">😈 黑客</div>
-              <div class="receiver">🌐 服务器</div>
-            </div>
-            <div class="warning-text">⚠️ 数据"裸奔"，黑客能看见密码</div>
-          </div>
-        </div>
-
-        <div class="compare-card https">
-          <div class="card-header">
-            <span class="lock-icon">🔒</span>
-            <span class="card-title">HTTPS（安全）</span>
-          </div>
-          <div class="card-body">
-            <div class="data-flow">
-              <div class="sender">👤 用户</div>
-              <div class="envelope locked">
-                <div class="content-hidden">??加密??</div>
-              </div>
-              <div class="thief-confused">😕 黑客看不懂</div>
-              <div class="receiver">🌐 服务器</div>
-            </div>
-            <div class="success-text">✅ 数据加密，黑客看不懂</div>
-          </div>
-        </div>
+    <div class="compare">
+      <div class="col">
+        <div class="title">HTTP</div>
+        <div class="item">❌ 明文传输</div>
       </div>
-
-      <div class="certificate-box">
-        <div class="cert-title">📜 SSL/TLS 证书的作用</div>
-        <div class="cert-features">
-          <div class="cert-feature">
-            <span class="feature-icon">🔐</span>
-            <span class="feature-text">加密传输数据</span>
-          </div>
-          <div class="cert-feature">
-            <span class="feature-icon">✅</span>
-            <span class="feature-text">验证网站身份</span>
-          </div>
-          <div class="cert-feature">
-            <span class="feature-icon">🛡️</span>
-            <span class="feature-text">防止数据篡改</span>
-          </div>
-        </div>
-      </div>
-
-      <div class="setup-steps">
-        <div class="steps-title">🚀 快速上手（Let's Encrypt 免费）</div>
-        <div class="step-list">
-          <div class="step-item">
-            <span class="step-num">1</span>
-            <span class="step-text">安装 Certbot 工具</span>
-          </div>
-          <div class="step-item">
-            <span class="step-num">2</span>
-            <span class="step-text">运行命令申请证书</span>
-          </div>
-          <div class="step-item">
-            <span class="step-num">3</span>
-            <span class="step-text">自动配置 Nginx</span>
-          </div>
-          <div class="step-item">
-            <span class="step-num">4</span>
-            <span class="step-text">完成！网站显示🔒小锁</span>
-          </div>
-        </div>
+      <div class="col highlight">
+        <div class="title">HTTPS</div>
+        <div class="item">✅ 加密传输</div>
       </div>
     </div>
 
-    <div class="info-box">
-      <span class="icon">💡</span>
-      <strong>推荐工具：</strong>Let's Encrypt 免费证书 + Certbot 自动工具，几分钟就能搞定 HTTPS！
+    <div class="info">
+      <span class="text">💡 推荐：Let's Encrypt 免费证书</span>
     </div>
   </div>
 </template>
@@ -101,244 +31,78 @@
 </script>
 
 <style scoped>
-.deployment-https-demo {
+.deployment-https {
   border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
   background: var(--vp-c-bg-soft);
-  padding: 1.5rem;
+  padding: 0.75rem;
   margin: 1rem 0;
-  max-height: 600px;
-  overflow-y: auto;
 }
 
-.demo-header {
+.header {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   margin-bottom: 0.75rem;
 }
 
-.demo-header .icon {
+.header .icon {
   font-size: 1.25rem;
 }
 
-.demo-header .title {
-  font-weight: bold;
+.header .title {
+  font-weight: 700;
   font-size: 1rem;
-}
-
-.demo-header .subtitle {
-  color: var(--vp-c-text-2);
-  font-size: 0.85rem;
-  margin-left: 0.5rem;
-}
-
-.intro-text {
-  font-size: 0.9rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.6;
-  margin-bottom: 1rem;
-  padding: 0.75rem;
-  background: var(--vp-c-bg);
-  border-radius: 6px;
-}
-
-.intro-text strong {
-  color: var(--vp-c-brand-1);
-  font-weight: 500;
-}
-
-.demo-content {
-  margin-bottom: 1rem;
-}
-
-.comparison {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 1rem;
-  margin-bottom: 1rem;
-}
-
-.compare-card {
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.compare-card.http {
-  background: linear-gradient(135deg, #ff6b6b 0%, #ff8787 100%);
-}
-
-.compare-card.https {
-  background: linear-gradient(135deg, #51cf66 0%, #69db7c 100%);
-}
-
-.card-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem;
-  color: white;
-}
-
-.lock-icon {
-  font-size: 1.5rem;
-}
-
-.card-title {
-  font-weight: 600;
-  font-size: 0.9rem;
-}
-
-.card-body {
-  background: white;
-  padding: 0.75rem;
-}
-
-.data-flow {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-  margin-bottom: 0.75rem;
-}
-
-.sender,
-.receiver {
-  font-size: 1.25rem;
-}
-
-.envelope {
-  flex: 1;
-  padding: 0.5rem;
-  border: 2px dashed var(--vp-c-divider);
-  border-radius: 6px;
-  text-align: center;
-  font-size: 0.75rem;
-  font-family: monospace;
-}
-
-.envelope.open {
-  background: #fff3cd;
-}
-
-.envelope.locked {
-  background: #d4edda;
-}
-
-.thief {
-  font-size: 1.25rem;
-}
-
-.thief-confused {
-  font-size: 1.25rem;
-  opacity: 0.5;
-}
-
-.warning-text {
-  color: #dc3545;
-  font-size: 0.75rem;
-  text-align: center;
-  font-weight: 500;
-}
-
-.success-text {
-  color: #28a745;
-  font-size: 0.75rem;
-  text-align: center;
-  font-weight: 500;
-}
-
-.certificate-box {
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  padding: 1rem;
-  margin-bottom: 1rem;
-}
-
-.cert-title {
-  font-weight: 600;
-  font-size: 0.9rem;
-  margin-bottom: 0.75rem;
   color: var(--vp-c-text-1);
 }
 
-.cert-features {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.cert-feature {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.85rem;
+.header .subtitle {
   color: var(--vp-c-text-2);
+  font-size: 0.85rem;
 }
 
-.feature-icon {
-  font-size: 1rem;
-}
-
-.setup-steps {
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  padding: 1rem;
-}
-
-.steps-title {
-  font-weight: 600;
-  font-size: 0.9rem;
-  margin-bottom: 0.75rem;
-  color: var(--vp-c-text-1);
-}
-
-.step-list {
+.compare {
   display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.step-item {
-  display: flex;
-  align-items: center;
   gap: 0.75rem;
-  font-size: 0.85rem;
-  color: var(--vp-c-text-2);
+  margin-bottom: 0.75rem;
 }
 
-.step-num {
+.col {
+  flex: 1;
   display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  background: var(--vp-c-brand);
-  color: white;
-  border-radius: 50%;
-  font-size: 0.75rem;
-  font-weight: 600;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  background: var(--vp-c-bg);
+  border-radius: 6px;
 }
 
-.info-box {
-  background: var(--vp-c-bg-alt);
-  padding: 0.75rem;
-  border-radius: 6px;
+.col.highlight {
+  background: var(--vp-c-brand-dimm);
+}
+
+.col .title {
+  font-weight: 600;
   font-size: 0.85rem;
+  color: var(--vp-c-text-1);
+  margin-bottom: 0.25rem;
+}
+
+.col .item {
+  font-size: 0.8rem;
   color: var(--vp-c-text-2);
 }
 
-.info-box .icon {
-  margin-right: 0.25rem;
+.info {
+  padding: 0.75rem;
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+  text-align: center;
+  font-size: 0.85rem;
 }
 
-@media (max-width: 768px) {
-  .comparison {
-    grid-template-columns: 1fr;
-  }
-
-  .data-flow {
-    flex-wrap: wrap;
-  }
+.info .text {
+  color: var(--vp-c-text-2);
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/deployment/DeploymentLbDemo.vue b/docs/.vitepress/theme/components/appendix/deployment/DeploymentLbDemo.vue
deleted file mode 100644
index 783749e..0000000
--- a/docs/.vitepress/theme/components/appendix/deployment/DeploymentLbDemo.vue
+++ /dev/null
@@ -1,465 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue'
-
-const algorithm = ref('round-robin')
-const totalRequests = ref(0)
-const servers = ref([
-  { id: 1, name: '服务器 1', requests: 0, status: 'healthy' },
-  { id: 2, name: '服务器 2', requests: 0, status: 'healthy' },
-  { id: 3, name: '服务器 3', requests: 0, status: 'healthy' }
-])
-
-const algorithms = [
-  { id: 'round-robin', name: '轮询 (Round Robin)', desc: '依次分配，像排队发号' },
-  { id: 'least-connections', name: '最少连接 (Least Connections)', desc: '谁最空闲分配给谁' },
-  { id: 'ip-hash', name: 'IP 哈希 (IP Hash)', desc: '同一IP总是分配给同一服务器' }
-]
-
-const currentAlgorithm = computed(() => {
-  return algorithms.find(a => a.id === algorithm.value)
-})
-
-let requestIndex = 0
-const sendRequest = () => {
-  totalRequests.value++
-  requestIndex++
-
-  let serverIndex = 0
-
-  if (algorithm.value === 'round-robin') {
-    serverIndex = (totalRequests.value - 1) % servers.value.length
-  } else if (algorithm.value === 'least-connections') {
-    const minRequests = Math.min(...servers.value.map(s => s.requests))
-    serverIndex = servers.value.findIndex(s => s.requests === minRequests)
-  } else if (algorithm.value === 'ip-hash') {
-    const mockIp = `192.168.1.${(requestIndex % 10) + 1}`
-    serverIndex = parseInt(mockIp.split('.')[3]) % servers.value.length
-  }
-
-  servers.value[serverIndex].requests++
-}
-
-// Auto simulate
-setInterval(() => {
-  sendRequest()
-}, 1500)
-</script>
-
-<template>
-  <div class="deployment-lb">
-    <div class="demo-header">
-      <h3>负载均衡演示</h3>
-      <p class="subtitle">多店协同，分散客流</p>
-    </div>
-
-    <div class="intro-text">
-      <p>
-        就像小明开了三家咖啡店，<strong>引导员</strong>根据不同策略把顾客分流到不同门店，
-        避免单店过载，提高整体服务能力。负载均衡器就是那个"引导员"。
-      </p>
-    </div>
-
-    <div class="demo-content">
-      <!-- 算法选择 -->
-      <div class="algorithm-section">
-        <div class="section-title">🎯 负载均衡算法</div>
-        <div class="algorithm-list">
-          <div
-            v-for="algo in algorithms"
-            :key="algo.id"
-            class="algorithm-item"
-            :class="{ active: algorithm === algo.id }"
-            @click="algorithm = algo.id"
-          >
-            <div class="algo-header">
-              <span class="algo-icon">{{ algorithm === algo.id ? '✓' : '○' }}</span>
-              <span class="algo-name">{{ algo.name }}</span>
-            </div>
-            <div class="algo-desc">{{ algo.desc }}</div>
-          </div>
-        </div>
-      </div>
-
-      <!-- 负载均衡器可视化 -->
-      <div class="lb-visualization">
-        <div class="lb-node">
-          <div class="lb-icon">⚖️</div>
-          <div class="lb-title">负载均衡器</div>
-          <div class="lb-algorithm">{{ currentAlgorithm.name }}</div>
-          <div class="lb-stats">{{ totalRequests }} 次请求</div>
-        </div>
-
-        <div class="lb-arrows">
-          <div
-            v-for="i in 3"
-            :key="i"
-            class="arrow-line"
-            :style="{ animationDelay: `${i * 0.2}s` }"
-          >
-            →
-          </div>
-        </div>
-
-        <div class="servers-grid">
-          <div
-            v-for="(server, idx) in servers"
-            :key="server.id"
-            class="server-card"
-            :class="{ highlighted: server.requests > 0 }"
-          >
-            <div class="server-icon">🖥️</div>
-            <div class="server-name">{{ server.name }}</div>
-            <div class="server-status">
-              <span class="status-dot healthy"></span>
-              <span class="status-text">健康</span>
-            </div>
-            <div class="server-metrics">
-              <div class="metric-item">
-                <span class="metric-label">请求数</span>
-                <span class="metric-value">{{ server.requests }}</span>
-              </div>
-              <div class="metric-item">
-                <span class="metric-label">负载</span>
-                <div class="load-bar">
-                  <div
-                    class="load-fill"
-                    :style="{ width: `${Math.min(server.requests * 5, 100)}%` }"
-                  ></div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- 生活类比 -->
-      <div class="analogy-box">
-        <div class="analogy-title">💡 生活类比</div>
-        <div class="analogy-content">
-          <div v-if="algorithm === 'round-robin'" class="analogy-item">
-            <strong>轮询</strong>：就像三家咖啡店轮流接待，A店、B店、C店、A店、B店、C店...公平分配。
-          </div>
-          <div v-if="algorithm === 'least-connections'" class="analogy-item">
-            <strong>最少连接</strong>：就像引导员看哪家店人少就往哪家导，确保每家都不会太忙。
-          </div>
-          <div v-if="algorithm === 'ip-hash'" class="analogy-item">
-            <strong>IP哈希</strong>：就像记住老顾客的习惯，张三总是去A店，李四总是去B店，保证体验一致。
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="info-box">
-      <p>
-        💡 <strong>关键价值</strong>：负载均衡不仅能<strong>提高吞吐量</strong>，还能提供<strong>高可用性</strong>。
-        某台服务器挂了，负载均衡器会自动把流量导向其他健康的服务器！
-      </p>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.deployment-lb {
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  background-color: var(--vp-c-bg-soft);
-  max-height: 600px;
-  overflow-y: auto;
-  margin: 1rem 0;
-}
-
-.demo-header {
-  padding: 1.25rem;
-  background: var(--vp-c-bg);
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-
-.demo-header h3 {
-  margin: 0 0 0.5rem 0;
-  font-size: 1.2rem;
-  color: var(--vp-c-text-1);
-}
-
-.subtitle {
-  margin: 0;
-  font-size: 0.9rem;
-  color: var(--vp-c-text-2);
-}
-
-.intro-text {
-  padding: 1rem 1.25rem;
-  font-size: 0.9rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.6;
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-
-.demo-content {
-  padding: 1.25rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.section-title {
-  font-size: 0.95rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-  margin-bottom: 0.75rem;
-}
-
-.algorithm-section {
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  padding: 1rem;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.algorithm-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.algorithm-item {
-  background: var(--vp-c-bg-soft);
-  border: 2px solid var(--vp-c-divider);
-  border-radius: 6px;
-  padding: 0.75rem;
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-.algorithm-item:hover {
-  border-color: var(--vp-c-brand-soft);
-}
-
-.algorithm-item.active {
-  border-color: var(--vp-c-brand);
-  background: var(--vp-c-brand-soft);
-}
-
-.algo-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 0.25rem;
-}
-
-.algo-icon {
-  font-size: 0.9rem;
-  color: var(--vp-c-brand);
-  font-weight: 700;
-}
-
-.algo-name {
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-}
-
-.algo-desc {
-  font-size: 0.8rem;
-  color: var(--vp-c-text-2);
-  padding-left: 1.4rem;
-}
-
-.lb-visualization {
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  padding: 1.5rem;
-  border: 1px solid var(--vp-c-divider);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1rem;
-}
-
-.lb-node {
-  background: var(--vp-c-brand-soft);
-  border: 2px solid var(--vp-c-brand);
-  border-radius: 8px;
-  padding: 1rem;
-  text-align: center;
-  width: 100%;
-  max-width: 280px;
-}
-
-.lb-icon {
-  font-size: 2rem;
-  margin-bottom: 0.5rem;
-}
-
-.lb-title {
-  font-size: 1rem;
-  font-weight: 700;
-  color: var(--vp-c-text-1);
-  margin-bottom: 0.25rem;
-}
-
-.lb-algorithm {
-  font-size: 0.85rem;
-  color: var(--vp-c-brand);
-  margin-bottom: 0.5rem;
-}
-
-.lb-stats {
-  font-size: 0.8rem;
-  color: var(--vp-c-text-2);
-  font-family: var(--vp-font-family-mono);
-}
-
-.lb-arrows {
-  display: flex;
-  gap: 1rem;
-  justify-content: center;
-}
-
-.arrow-line {
-  font-size: 1.5rem;
-  color: var(--vp-c-brand);
-  animation: flow 1.5s infinite;
-}
-
-@keyframes flow {
-  0%, 100% { opacity: 0.3; transform: translateX(-5px); }
-  50% { opacity: 1; transform: translateX(5px); }
-}
-
-.servers-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  gap: 0.75rem;
-  width: 100%;
-}
-
-.server-card {
-  background: var(--vp-c-bg-soft);
-  border: 2px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 1rem;
-  text-align: center;
-  transition: all 0.3s ease;
-}
-
-.server-card.highlighted {
-  border-color: var(--vp-c-brand);
-  background: var(--vp-c-brand-dimm);
-}
-
-.server-icon {
-  font-size: 1.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.server-name {
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-  margin-bottom: 0.5rem;
-}
-
-.server-status {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.35rem;
-  margin-bottom: 0.75rem;
-}
-
-.status-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--vp-c-text-3);
-}
-
-.status-dot.healthy {
-  background: var(--vp-c-brand-delta);
-}
-
-.status-text {
-  font-size: 0.75rem;
-  color: var(--vp-c-text-2);
-}
-
-.server-metrics {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.metric-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.metric-label {
-  font-size: 0.75rem;
-  color: var(--vp-c-text-2);
-}
-
-.metric-value {
-  font-size: 0.85rem;
-  font-weight: 700;
-  color: var(--vp-c-brand);
-  font-family: var(--vp-font-family-mono);
-}
-
-.load-bar {
-  width: 50px;
-  height: 6px;
-  background: var(--vp-c-bg-alt);
-  border-radius: 3px;
-  overflow: hidden;
-}
-
-.load-fill {
-  height: 100%;
-  background: linear-gradient(90deg, var(--vp-c-brand), var(--vp-c-brand-1));
-  transition: width 0.3s ease;
-}
-
-.analogy-box {
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  padding: 1rem;
-  border: 1px solid var(--vp-c-divider);
-  border-left: 3px solid var(--vp-c-brand);
-}
-
-.analogy-title {
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-  margin-bottom: 0.5rem;
-}
-
-.analogy-content {
-  font-size: 0.85rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.5;
-}
-
-.info-box {
-  padding: 1rem 1.25rem;
-  margin: 0;
-  background: var(--vp-c-bg);
-  border-top: 1px solid var(--vp-c-divider);
-  font-size: 0.9rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.6;
-}
-
-.info-box p {
-  margin: 0;
-}
-
-@media (max-width: 640px) {
-  .servers-grid {
-    grid-template-columns: 1fr;
-  }
-}
-</style>
diff --git a/docs/.vitepress/theme/components/appendix/deployment/DeploymentMonitorDemo.vue b/docs/.vitepress/theme/components/appendix/deployment/DeploymentMonitorDemo.vue
index 2267704..729c4f1 100644
--- a/docs/.vitepress/theme/components/appendix/deployment/DeploymentMonitorDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/deployment/DeploymentMonitorDemo.vue
@@ -1,525 +1,138 @@
-<script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
+<!--
+  DeploymentMonitorDemo.vue
+  监控备份（精简版）
+-->
+<template>
+  <div class="deployment-monitor">
+    <div class="header">
+      <span class="icon">📊</span>
+      <span class="title">监控 & 备份</span>
+      <span class="subtitle">守住网站底线的最后一道防线</span>
+    </div>
+
+    <div class="metrics">
+      <div class="metric">
+        <span class="label">CPU 使用率</span>
+        <span class="value">{{ cpuUsage }}%</span>
+      </div>
+      <div class="metric">
+        <span class="label">内存使用率</span>
+        <span class="value">{{ memoryUsage }}%</span>
+      </div>
+      <div class="metric">
+        <span class="label">在线用户</span>
+        <span class="value">{{ activeUsers }}</span>
+      </div>
+    </div>
+
+    <div class="backup">
+      <div class="label">上次备份：</div>
+      <span class="value">{{ lastBackup }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, onUnmounted, ref } from 'vue'
 
-const isMonitoring = ref(false)
 const cpuUsage = ref(45)
 const memoryUsage = ref(62)
 const activeUsers = ref(23)
-const requestRate = ref(145)
-const errorRate = ref(0.8)
-
-const alerts = ref([
-  { id: 1, type: 'warning', message: 'CPU 使用率超过 70%', time: '2分钟前' },
-  { id: 2, type: 'info', message: '新用户注册激增', time: '5分钟前' }
-])
-
-const metrics = ref([
-  { name: '响应时间', value: '120ms', status: 'good', threshold: '200ms' },
-  { name: '可用性', value: '99.9%', status: 'good', threshold: '99.5%' },
-  { name: '错误率', value: '0.8%', status: 'warning', threshold: '1%' },
-  { name: '吞吐量', value: '145 req/s', status: 'good', threshold: '100 req/s' }
-])
+const lastBackup = ref('2024-01-15 14:30')
 
 let interval = null
 
-const toggleMonitoring = () => {
-  isMonitoring.value = !isMonitoring.value
-
-  if (isMonitoring.value) {
-    startSimulation()
-  } else {
-    stopSimulation()
-  }
-}
-
-const startSimulation = () => {
+onMounted(() => {
   interval = setInterval(() => {
     cpuUsage.value = Math.max(20, Math.min(95, cpuUsage.value + (Math.random() - 0.5) * 10))
     memoryUsage.value = Math.max(30, Math.min(90, memoryUsage.value + (Math.random() - 0.5) * 5))
     activeUsers.value = Math.max(10, Math.min(100, activeUsers.value + Math.floor((Math.random() - 0.5) * 5)))
-    requestRate.value = Math.max(50, Math.min(300, requestRate.value + Math.floor((Math.random() - 0.5) * 20)))
-    errorRate.value = Math.max(0, Math.min(5, errorRate.value + (Math.random() - 0.5) * 0.3))
   }, 2000)
-}
-
-const stopSimulation = () => {
-  if (interval) {
-    clearInterval(interval)
-    interval = null
-  }
-}
+})
 
 onUnmounted(() => {
-  stopSimulation()
+  if (interval) {
+    clearInterval(interval)
+  }
 })
 </script>
 
-<template>
-  <div class="deployment-monitor">
-    <div class="demo-header">
-      <h3>监控演示</h3>
-      <p class="subtitle">实时掌握咖啡店运营状况</p>
-    </div>
-
-    <div class="intro-text">
-      <p>
-        就像小明通过<strong>监控摄像头</strong>、<strong>收银系统</strong>实时了解客流量、销售额、库存情况，
-        服务监控能帮助我们发现性能瓶颈、提前预警故障。
-      </p>
-    </div>
-
-    <div class="demo-content">
-      <!-- 控制栏 -->
-      <div class="control-bar">
-        <div class="monitor-status">
-          <span class="status-indicator" :class="{ active: isMonitoring }"></span>
-          <span class="status-text">{{ isMonitoring ? '监控运行中' : '监控已停止' }}</span>
-        </div>
-        <button
-          class="toggle-btn"
-          :class="{ active: isMonitoring }"
-          @click="toggleMonitoring"
-        >
-          {{ isMonitoring ? '⏸ 暂停' : '▶ 启动监控' }}
-        </button>
-      </div>
-
-      <!-- 核心指标 -->
-      <div class="metrics-grid">
-        <div class="metric-card">
-          <div class="metric-header">
-            <span class="metric-icon">💻</span>
-            <span class="metric-name">CPU 使用率</span>
-          </div>
-          <div class="metric-value">
-            {{ cpuUsage.toFixed(1) }}%
-          </div>
-          <div class="metric-bar">
-            <div
-              class="metric-fill"
-              :class="cpuUsage > 80 ? 'danger' : cpuUsage > 60 ? 'warning' : 'good'"
-              :style="{ width: `${cpuUsage}%` }"
-            ></div>
-          </div>
-        </div>
-
-        <div class="metric-card">
-          <div class="metric-header">
-            <span class="metric-icon">🧠</span>
-            <span class="metric-name">内存使用率</span>
-          </div>
-          <div class="metric-value">
-            {{ memoryUsage.toFixed(1) }}%
-          </div>
-          <div class="metric-bar">
-            <div
-              class="metric-fill"
-              :class="memoryUsage > 80 ? 'danger' : memoryUsage > 60 ? 'warning' : 'good'"
-              :style="{ width: `${memoryUsage}%` }"
-            ></div>
-          </div>
-        </div>
-
-        <div class="metric-card">
-          <div class="metric-header">
-            <span class="metric-icon">👥</span>
-            <span class="metric-name">在线用户</span>
-          </div>
-          <div class="metric-value large">
-            {{ activeUsers }}
-          </div>
-          <div class="metric-sub">实时</div>
-        </div>
-
-        <div class="metric-card">
-          <div class="metric-header">
-            <span class="metric-icon">⚡</span>
-            <span class="metric-name">请求速率</span>
-          </div>
-          <div class="metric-value large">
-            {{ requestRate }}
-          </div>
-          <div class="metric-sub">req/s</div>
-        </div>
-      </div>
-
-      <!-- 业务指标 -->
-      <div class="business-metrics">
-        <div class="section-title">📊 业务指标</div>
-        <div class="metrics-list">
-          <div
-            v-for="(metric, idx) in metrics"
-            :key="idx"
-            class="business-metric-item"
-            :class="metric.status"
-          >
-            <div class="metric-info">
-              <span class="metric-label">{{ metric.name }}</span>
-              <span class="metric-threshold">目标: {{ metric.threshold }}</span>
-            </div>
-            <div class="metric-val">{{ metric.value }}</div>
-            <div class="metric-status-badge">
-              <span v-if="metric.status === 'good'" class="badge good">✓ 正常</span>
-              <span v-else-if="metric.status === 'warning'" class="badge warning">⚠️ 警告</span>
-              <span v-else class="badge danger">❌ 异常</span>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- 告警列表 -->
-      <div class="alerts-section">
-        <div class="section-title">🔔 最近告警</div>
-        <div class="alerts-list">
-          <div
-            v-for="alert in alerts"
-            :key="alert.id"
-            class="alert-item"
-            :class="alert.type"
-          >
-            <span class="alert-icon">{{ alert.type === 'warning' ? '⚠️' : 'ℹ️' }}</span>
-            <span class="alert-message">{{ alert.message }}</span>
-            <span class="alert-time">{{ alert.time }}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="info-box">
-      <p v-if="!isMonitoring">
-        💡 <strong>准备就绪</strong>：点击"启动监控"按钮，开始实时查看服务器各项指标。就像打开咖啡店的监控系统！
-      </p>
-      <p v-else>
-        ✅ <strong>监控中</strong>：各项指标实时更新。设置合理的阈值和告警，才能在问题发生时第一时间响应！
-      </p>
-    </div>
-  </div>
-</template>
-
 <style scoped>
 .deployment-monitor {
   border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
-  background-color: var(--vp-c-bg-soft);
-  max-height: 600px;
-  overflow-y: auto;
+  background: var(--vp-c-bg-soft);
+  padding: 0.75rem;
   margin: 1rem 0;
 }
 
-.demo-header {
-  padding: 1.25rem;
-  background: var(--vp-c-bg);
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-
-.demo-header h3 {
-  margin: 0 0 0.5rem 0;
-  font-size: 1.2rem;
-  color: var(--vp-c-text-1);
-}
-
-.subtitle {
-  margin: 0;
-  font-size: 0.9rem;
-  color: var(--vp-c-text-2);
-}
-
-.intro-text {
-  padding: 1rem 1.25rem;
-  font-size: 0.9rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.6;
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-
-.demo-content {
-  padding: 1.25rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.control-bar {
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  padding: 1rem;
-  border: 1px solid var(--vp-c-divider);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.monitor-status {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.status-indicator {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: var(--vp-c-text-3);
-}
-
-.status-indicator.active {
-  background: var(--vp-c-brand-delta);
-  animation: pulse 2s infinite;
-}
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
-}
-
-.status-text {
-  font-size: 0.9rem;
-  color: var(--vp-c-text-1);
-  font-weight: 600;
-}
-
-.toggle-btn {
-  padding: 0.6rem 1.25rem;
-  border-radius: 6px;
-  font-size: 0.9rem;
-  font-weight: 600;
-  background: var(--vp-c-bg-alt);
-  border: 1px solid var(--vp-c-divider);
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-.toggle-btn.active {
-  background: var(--vp-c-brand);
-  border-color: var(--vp-c-brand);
-  color: white;
-}
-
-.metrics-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-  gap: 0.75rem;
-}
-
-.metric-card {
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 1rem;
-}
-
-.metric-header {
+.header {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   margin-bottom: 0.75rem;
 }
 
-.metric-icon {
-  font-size: 1.2rem;
+.header .icon {
+  font-size: 1.25rem;
 }
 
-.metric-name {
+.header .title {
+  font-weight: 700;
+  font-size: 1rem;
+  color: var(--vp-c-text-1);
+}
+
+.header .subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.85rem;
+}
+
+.metrics {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.metric {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.5rem;
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+  text-align: center;
+}
+
+.metric .label {
   font-size: 0.8rem;
-  font-weight: 600;
   color: var(--vp-c-text-2);
 }
 
-.metric-value {
-  font-size: 1.8rem;
+.metric .value {
   font-weight: 700;
-  color: var(--vp-c-text-1);
-  font-family: var(--vp-font-family-mono);
-  margin-bottom: 0.5rem;
-}
-
-.metric-value.large {
-  font-size: 2rem;
-}
-
-.metric-bar {
-  height: 8px;
-  background: var(--vp-c-bg-alt);
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.metric-fill {
-  height: 100%;
-  transition: width 0.5s ease;
-}
-
-.metric-fill.good {
-  background: var(--vp-c-brand-delta);
-}
-
-.metric-fill.warning {
-  background: #f59e0b;
-}
-
-.metric-fill.danger {
-  background: #ef4444;
-}
-
-.metric-sub {
-  font-size: 0.75rem;
-  color: var(--vp-c-text-3);
-  margin-top: 0.25rem;
-}
-
-.business-metrics {
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  padding: 1rem;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.section-title {
-  font-size: 0.95rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-  margin-bottom: 1rem;
-}
-
-.metrics-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.business-metric-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.75rem;
-  background: var(--vp-c-bg-soft);
-  border-radius: 6px;
-  border-left: 3px solid var(--vp-c-brand);
-}
-
-.business-metric-item.warning {
-  border-left-color: #f59e0b;
-}
-
-.business-metric-item.danger {
-  border-left-color: #ef4444;
-}
-
-.metric-info {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 0.15rem;
-}
-
-.metric-label {
-  font-size: 0.85rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-}
-
-.metric-threshold {
-  font-size: 0.7rem;
-  color: var(--vp-c-text-3);
-}
-
-.metric-val {
   font-size: 1rem;
-  font-weight: 700;
   color: var(--vp-c-brand);
-  font-family: var(--vp-font-family-mono);
 }
 
-.metric-status-badge {
-  margin-left: 0.75rem;
-}
-
-.badge {
-  font-size: 0.75rem;
-  padding: 0.2rem 0.5rem;
-  border-radius: 4px;
-  font-weight: 600;
-}
-
-.badge.good {
-  background: var(--vp-c-brand-dimm);
-  color: var(--vp-c-brand-delta);
-}
-
-.badge.warning {
-  background: #fef3c7;
-  color: #92400e;
-}
-
-.badge.danger {
-  background: #fee2e2;
-  color: #dc2626;
-}
-
-.alerts-section {
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  padding: 1rem;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.alerts-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.alert-item {
+.backup {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem;
-  border-radius: 6px;
-  background: var(--vp-c-bg-soft);
-}
-
-.alert-item.warning {
-  background: #fef3c7;
-  border-left: 3px solid #f59e0b;
-}
-
-.alert-item.info {
-  background: #dbeafe;
-  border-left: 3px solid #3b82f6;
-}
-
-.alert-icon {
-  font-size: 1rem;
-}
-
-.alert-message {
-  flex: 1;
-  font-size: 0.85rem;
-  color: var(--vp-c-text-1);
-}
-
-.alert-time {
-  font-size: 0.75rem;
-  color: var(--vp-c-text-3);
-}
-
-.info-box {
-  padding: 1rem 1.25rem;
-  margin: 0;
+  padding: 0.5rem 0.75rem;
   background: var(--vp-c-bg);
-  border-top: 1px solid var(--vp-c-divider);
-  font-size: 0.9rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+}
+
+.backup .label {
   color: var(--vp-c-text-2);
-  line-height: 1.6;
 }
 
-.info-box p {
-  margin: 0;
-}
-
-@media (max-width: 640px) {
-  .metrics-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
+.backup .value {
+  font-weight: 600;
+  color: var(--vp-c-text-1);
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/deployment/DeploymentNginxDemo.vue b/docs/.vitepress/theme/components/appendix/deployment/DeploymentNginxDemo.vue
deleted file mode 100644
index d457843..0000000
--- a/docs/.vitepress/theme/components/appendix/deployment/DeploymentNginxDemo.vue
+++ /dev/null
@@ -1,460 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue'
-
-const enableProxy = ref(false)
-const incomingRequests = ref(0)
-const proxiedRequests = ref(0)
-
-const serverPort = ref(3000)
-const nginxPort = ref(80)
-
-const servers = ref([
-  { id: 1, name: 'Node.js 应用', port: 3000, status: 'running', load: 45 },
-  { id: 2, name: 'Python API', port: 4000, status: 'running', load: 30 }
-])
-
-const selectedServer = ref(0)
-
-const toggleProxy = () => {
-  enableProxy.value = !enableProxy.value
-  if (!enableProxy.value) {
-    proxiedRequests.value = 0
-  }
-}
-
-const simulateRequest = () => {
-  if (!enableProxy.value) return
-  incomingRequests.value++
-  proxiedRequests.value++
-  servers.value[selectedServer.value].load = Math.min(100, servers.value[selectedServer.value].load + 5)
-  setTimeout(() => {
-    servers.value[selectedServer.value].load = Math.max(10, servers.value[selectedServer.value].load - 5)
-  }, 1000)
-}
-
-// Auto simulate
-setInterval(() => {
-  if (enableProxy.value) {
-    simulateRequest()
-  }
-}, 2000)
-</script>
-
-<template>
-  <div class="deployment-nginx">
-    <div class="demo-header">
-      <h3>Nginx反向代理演示</h3>
-      <p class="subtitle">门店服务员引导顾客</p>
-    </div>
-
-    <div class="intro-text">
-      <p>
-        就像咖啡店的<strong>服务员</strong>引导顾客到相应的吧台（咖啡、蛋糕、收银），
-        Nginx 作为反向代理，把外部请求转发给后端的不同服务。
-      </p>
-    </div>
-
-    <div class="demo-content">
-      <!-- 开关控制 -->
-      <div class="control-panel">
-        <div class="switch-section">
-          <span class="switch-label">启用反向代理</span>
-          <button
-            class="toggle-btn"
-            :class="{ active: enableProxy }"
-            @click="toggleProxy"
-          >
-            <span class="toggle-slider"></span>
-          </button>
-        </div>
-        <div class="stats">
-          <div class="stat-item">
-            <span class="stat-value">{{ incomingRequests }}</span>
-            <span class="stat-label">总请求</span>
-          </div>
-          <div class="stat-item">
-            <span class="stat-value">{{ proxiedRequests }}</span>
-            <span class="stat-label">已转发</span>
-          </div>
-        </div>
-      </div>
-
-      <!-- 架构图 -->
-      <div class="architecture-diagram">
-        <div class="diagram-layer client">
-          <div class="layer-icon">👥</div>
-          <div class="layer-title">用户浏览器</div>
-          <div class="layer-detail">访问 :80</div>
-        </div>
-
-        <div class="diagram-arrow">↓</div>
-
-        <div class="diagram-layer nginx" :class="{ active: enableProxy }">
-          <div class="layer-icon">🛎️</div>
-          <div class="layer-title">Nginx (反向代理)</div>
-          <div class="layer-detail">监听 {{ nginxPort }} 端口</div>
-        </div>
-
-        <div class="diagram-arrow" :class="{ active: enableProxy }">↓ 转发</div>
-
-        <div class="diagram-layer backend">
-          <div class="layer-title">后端服务</div>
-          <div class="server-list">
-            <div
-              v-for="(server, idx) in servers"
-              :key="server.id"
-              class="server-item"
-              :class="{ active: selectedServer === idx }"
-            >
-              <div class="server-icon">🖥️</div>
-              <div class="server-info">
-                <div class="server-name">{{ server.name }}</div>
-                <div class="server-port">:{{ server.port }}</div>
-              </div>
-              <div class="server-load">
-                <div class="load-bar">
-                  <div
-                    class="load-fill"
-                    :style="{ width: `${server.load}%` }"
-                  ></div>
-                </div>
-                <span class="load-text">{{ server.load }}%</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- 配置示例 -->
-      <div class="config-example">
-        <div class="config-title">📝 Nginx 配置示例</div>
-        <pre class="code-block"><code>server {
-    listen {{ nginxPort }};
-    server_name example.com;
-
-    location / {
-        proxy_pass http://localhost:{{ serverPort }};
-        proxy_set_header Host $host;
-    }
-}</code></pre>
-      </div>
-    </div>
-
-    <div class="info-box">
-      <p v-if="!enableProxy">
-        💡 <strong>等待启用</strong>：点击"启用反向代理"开关，看看 Nginx 如何将请求转发给后端服务。
-      </p>
-      <p v-else>
-        ✅ <strong>运行中</strong>：Nginx 正在监听 {{ nginxPort }} 端口，将请求转发到后端的 {{ serverPort }} 端口！
-      </p>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.deployment-nginx {
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  background-color: var(--vp-c-bg-soft);
-  max-height: 600px;
-  overflow-y: auto;
-  margin: 1rem 0;
-}
-
-.demo-header {
-  padding: 1.25rem;
-  background: var(--vp-c-bg);
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-
-.demo-header h3 {
-  margin: 0 0 0.5rem 0;
-  font-size: 1.2rem;
-  color: var(--vp-c-text-1);
-}
-
-.subtitle {
-  margin: 0;
-  font-size: 0.9rem;
-  color: var(--vp-c-text-2);
-}
-
-.intro-text {
-  padding: 1rem 1.25rem;
-  font-size: 0.9rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.6;
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-
-.demo-content {
-  padding: 1.25rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.control-panel {
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  padding: 1rem;
-  border: 1px solid var(--vp-c-divider);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 1rem;
-}
-
-.switch-section {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.switch-label {
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-}
-
-.toggle-btn {
-  width: 50px;
-  height: 26px;
-  background: var(--vp-c-bg-alt);
-  border-radius: 13px;
-  border: 2px solid var(--vp-c-divider);
-  cursor: pointer;
-  position: relative;
-  transition: all 0.3s ease;
-}
-
-.toggle-btn.active {
-  background: var(--vp-c-brand);
-  border-color: var(--vp-c-brand);
-}
-
-.toggle-slider {
-  width: 20px;
-  height: 20px;
-  background: white;
-  border-radius: 50%;
-  position: absolute;
-  top: 1px;
-  left: 2px;
-  transition: all 0.3s ease;
-}
-
-.toggle-btn.active .toggle-slider {
-  left: 25px;
-}
-
-.stats {
-  display: flex;
-  gap: 1.5rem;
-}
-
-.stat-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.stat-value {
-  font-size: 1.2rem;
-  font-weight: 700;
-  color: var(--vp-c-brand);
-  font-family: var(--vp-font-family-mono);
-}
-
-.stat-label {
-  font-size: 0.75rem;
-  color: var(--vp-c-text-2);
-}
-
-.architecture-diagram {
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  padding: 1.5rem;
-  border: 1px solid var(--vp-c-divider);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1rem;
-}
-
-.diagram-layer {
-  background: var(--vp-c-bg-soft);
-  border: 2px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 1rem;
-  text-align: center;
-  width: 100%;
-  max-width: 350px;
-  transition: all 0.3s ease;
-}
-
-.diagram-layer.active {
-  border-color: var(--vp-c-brand);
-  background: var(--vp-c-brand-soft);
-}
-
-.layer-icon {
-  font-size: 2rem;
-  margin-bottom: 0.5rem;
-}
-
-.layer-title {
-  font-size: 0.95rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-  margin-bottom: 0.25rem;
-}
-
-.layer-detail {
-  font-size: 0.8rem;
-  color: var(--vp-c-text-2);
-  font-family: var(--vp-font-family-mono);
-}
-
-.diagram-arrow {
-  font-size: 1.5rem;
-  color: var(--vp-c-text-3);
-}
-
-.diagram-arrow.active {
-  color: var(--vp-c-brand);
-  animation: bounce 1s infinite;
-}
-
-@keyframes bounce {
-  0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-5px); }
-}
-
-.server-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  margin-top: 0.75rem;
-}
-
-.server-item {
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 6px;
-  padding: 0.75rem;
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.server-item.active {
-  border-color: var(--vp-c-brand);
-}
-
-.server-icon {
-  font-size: 1.5rem;
-}
-
-.server-info {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 0.15rem;
-}
-
-.server-name {
-  font-size: 0.85rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-}
-
-.server-port {
-  font-size: 0.75rem;
-  color: var(--vp-c-brand);
-  font-family: var(--vp-font-family-mono);
-}
-
-.server-load {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.load-bar {
-  width: 60px;
-  height: 6px;
-  background: var(--vp-c-bg-alt);
-  border-radius: 3px;
-  overflow: hidden;
-}
-
-.load-fill {
-  height: 100%;
-  background: linear-gradient(90deg, var(--vp-c-brand), var(--vp-c-brand-1));
-  transition: width 0.3s ease;
-}
-
-.load-text {
-  font-size: 0.75rem;
-  color: var(--vp-c-text-2);
-  font-family: var(--vp-font-family-mono);
-  min-width: 2.5rem;
-  text-align: right;
-}
-
-.config-example {
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  padding: 1rem;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.config-title {
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-  margin-bottom: 0.75rem;
-}
-
-.code-block {
-  background: #1e1e1e;
-  border-radius: 6px;
-  padding: 1rem;
-  overflow-x: auto;
-  margin: 0;
-}
-
-.code-block code {
-  font-family: var(--vp-font-family-mono);
-  font-size: 0.85rem;
-  color: #d4d4d4;
-  line-height: 1.5;
-}
-
-.info-box {
-  padding: 1rem 1.25rem;
-  margin: 0;
-  background: var(--vp-c-bg);
-  border-top: 1px solid var(--vp-c-divider);
-  font-size: 0.9rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.6;
-}
-
-.info-box p {
-  margin: 0;
-}
-
-@media (max-width: 640px) {
-  .control-panel {
-    flex-direction: column;
-  }
-
-  .stats {
-    width: 100%;
-    justify-content: space-around;
-  }
-}
-</style>
diff --git a/docs/.vitepress/theme/components/appendix/deployment/DeploymentOverviewDemo.vue b/docs/.vitepress/theme/components/appendix/deployment/DeploymentOverviewDemo.vue
index d32e8aa..72e0f82 100644
--- a/docs/.vitepress/theme/components/appendix/deployment/DeploymentOverviewDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/deployment/DeploymentOverviewDemo.vue
@@ -1,300 +1,200 @@
-<script setup>
-import { ref, computed } from 'vue'
-
-const currentStep = ref(0)
-const steps = [
-  { id: 'code', title: '写代码', desc: '小明在厨房开发新咖啡配方', icon: '☕' },
-  { id: 'build', title: '构建打包', desc: '准备原材料，清洗咖啡豆', icon: '📦' },
-  { id: 'test', title: '测试验证', desc: '小明自己先品尝确认没问题', icon: '🧪' },
-  { id: 'deploy', title: '部署上线', desc: '把咖啡上架到门店售卖', icon: '🚀' },
-  { id: 'monitor', title: '监控维护', desc: '观察顾客反馈，持续优化', icon: '📊' }
-]
-
-const stepProgress = computed(() => ((currentStep.value + 1) / steps.length) * 100)
-</script>
-
 <template>
   <div class="deployment-overview">
     <div class="demo-header">
-      <h3>服务上线全流程</h3>
-      <p class="subtitle">从小明咖啡店看部署流程</p>
-    </div>
-
-    <div class="intro-text">
-      <p>
-        就像小明要推出一款新咖啡，需要经过<strong>配方研发</strong>→<strong>材料准备</strong>→<strong>试喝确认</strong>→<strong>上架售卖</strong>→<strong>收集反馈</strong>，
-        软件上线也需要完整的流程保障质量。
-      </p>
+      <span class="icon">🚀</span>
+      <span class="title">服务上线全流程</span>
+      <span class="subtitle">从代码到用户眼中的网页</span>
     </div>
 
     <div class="demo-content">
-      <!-- 进度条 -->
-      <div class="progress-section">
-        <div class="progress-bar">
-          <div class="progress-fill" :style="{ width: `${stepProgress}%` }"></div>
+      <div class="service-flow">
+        <div class="flow-step" :class="{ active: currentStep >= 1 }">
+          <div class="step-icon">📦</div>
+          <div class="step-title">Build</div>
+          <div class="tech-term">源码→可执行文件</div>
         </div>
-        <div class="progress-label">{{ currentStep + 1 }} / {{ steps.length }}</div>
-      </div>
-
-      <!-- 步骤卡片 -->
-      <div class="steps-container">
-        <div
-          v-for="(step, index) in steps"
-          :key="step.id"
-          class="step-card"
-          :class="{ active: currentStep === index, completed: index < currentStep }"
-          @click="currentStep = index"
-        >
-          <div class="step-icon">{{ step.icon }}</div>
-          <div class="step-title">{{ step.title }}</div>
-          <div class="step-desc">{{ step.desc }}</div>
-
-          <!-- 状态指示 -->
-          <div class="step-status">
-            <span v-if="index < currentStep" class="status-icon completed">✓</span>
-            <span v-else-if="index === currentStep" class="status-icon active">●</span>
-            <span v-else class="status-icon pending">○</span>
-          </div>
+        <span class="flow-arrow">→</span>
+        <div class="flow-step" :class="{ active: currentStep >= 2 }">
+          <div class="step-icon">🖥️</div>
+          <div class="step-title">Server</div>
+          <div class="tech-term">24h运行的电脑</div>
+        </div>
+        <span class="flow-arrow">→</span>
+        <div class="flow-step" :class="{ active: currentStep >= 3 }">
+          <div class="step-icon">�</div>
+          <div class="step-title">Deploy</div>
+          <div class="tech-term">代码放到服务器</div>
+        </div>
+        <span class="flow-arrow">→</span>
+        <div class="flow-step" :class="{ active: currentStep >= 4 }">
+          <div class="step-icon">🔀</div>
+          <div class="step-title">Nginx</div>
+          <div class="tech-term">接收请求分发响应</div>
+        </div>
+        <span class="flow-arrow">→</span>
+        <div class="flow-step" :class="{ active: currentStep >= 5 }">
+          <div class="step-icon">�</div>
+          <div class="step-title">DNS</div>
+          <div class="tech-term">域名→IP地址</div>
+        </div>
+        <span class="flow-arrow">→</span>
+        <div class="flow-step" :class="{ active: currentStep >= 6 }">
+          <div class="step-icon">�</div>
+          <div class="step-title">HTTPS</div>
+          <div class="tech-term">加密数据传输</div>
+        </div>
+        <span class="flow-arrow">→</span>
+        <div class="flow-step" :class="{ active: currentStep >= 7 }">
+          <div class="step-icon">⚡</div>
+          <div class="step-title">CDN</div>
+          <div class="tech-term">就近访问加速</div>
+        </div>
+        <span class="flow-arrow">→</span>
+        <div class="flow-step" :class="{ active: currentStep >= 8 }">
+          <div class="step-icon">🔄</div>
+          <div class="step-title">CI/CD</div>
+          <div class="tech-term">自动化部署流程</div>
+        </div>
+        <span class="flow-arrow">→</span>
+        <div class="flow-step" :class="{ active: currentStep >= 9 }">
+          <div class="step-icon">�</div>
+          <div class="step-title">Monitor</div>
+          <div class="tech-term">监控运行状态</div>
         </div>
       </div>
 
-      <!-- 当前步骤详情 -->
-      <div class="step-detail">
-        <h4>{{ steps[currentStep].title }}</h4>
-        <p>{{ steps[currentStep].desc }}</p>
-        <div class="detail-analogy">
-          <div class="analogy-label">💡 技术对应</div>
-          <div class="analogy-content">
-            <span v-if="currentStep === 0">编写代码：开发新功能</span>
-            <span v-if="currentStep === 1">构建打包：Webpack/Vite 编译资源</span>
-            <span v-if="currentStep === 2">测试验证：单元测试、集成测试</span>
-            <span v-if="currentStep === 3">部署上线：推送到服务器/云平台</span>
-            <span v-if="currentStep === 4">监控维护：日志、性能监控、告警</span>
-          </div>
-        </div>
+      <div class="info-box">
+        <span class="icon">💡</span>
+        <strong>核心原则</strong>：小步快跑 → 先上线MVP → 逐步完善
       </div>
     </div>
-
-    <div class="info-box">
-      <p>💡 <strong>关键要点</strong>：每个环节都不可或缺。跳过测试就上线，就像没试喝就卖咖啡，可能让顾客喝到难喝的咖啡（Bug）！</p>
-    </div>
   </div>
 </template>
 
+<script setup>
+import { ref } from 'vue'
+
+const currentStep = ref(0)
+</script>
+
 <style scoped>
 .deployment-overview {
   border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
-  background-color: var(--vp-c-bg-soft);
-  max-height: 600px;
-  overflow-y: auto;
+  background: var(--vp-c-bg-soft);
+  padding: 0.75rem;
   margin: 1rem 0;
 }
 
 .demo-header {
-  padding: 1.25rem;
-  background: var(--vp-c-bg);
-  border-bottom: 1px solid var(--vp-c-divider);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 
-.demo-header h3 {
-  margin: 0 0 0.5rem 0;
-  font-size: 1.2rem;
-  color: var(--vp-c-text-1);
+.demo-header .icon {
+  font-size: 1.25rem;
 }
 
-.subtitle {
-  margin: 0;
-  font-size: 0.9rem;
+.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 {
-  padding: 1rem 1.25rem;
-  font-size: 0.9rem;
+  font-size: 0.85rem;
   color: var(--vp-c-text-2);
-  line-height: 1.6;
-  border-bottom: 1px solid var(--vp-c-divider);
+  line-height: 1.5;
+  margin-bottom: 0.75rem;
+  padding: 0.5rem;
+  background: var(--vp-c-bg);
+  border-radius: 6px;
+}
+
+.intro-text strong {
+  color: var(--vp-c-brand-1);
+  font-weight: 500;
 }
 
 .demo-content {
-  padding: 1.25rem;
+  margin-bottom: 0.5rem;
 }
 
-.progress-section {
+.service-flow {
   display: flex;
+  flex-direction: row;
   align-items: center;
-  gap: 1rem;
-  margin-bottom: 1.5rem;
+  gap: 0.25rem;
+  overflow-x: auto;
+  padding-bottom: 0.5rem;
 }
 
-.progress-bar {
-  flex: 1;
-  height: 8px;
-  background: var(--vp-c-bg-alt);
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.progress-fill {
-  height: 100%;
-  background: linear-gradient(90deg, var(--vp-c-brand), var(--vp-c-brand-1));
-  transition: width 0.3s ease;
-  border-radius: 4px;
-}
-
-.progress-label {
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: var(--vp-c-brand);
-  min-width: 3rem;
-  text-align: right;
-}
-
-.steps-container {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-  gap: 0.75rem;
-  margin-bottom: 1.5rem;
-}
-
-.step-card {
-  background: var(--vp-c-bg);
-  border: 2px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 1rem;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  position: relative;
-  min-height: 120px;
+.flow-step {
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  text-align: center;
+  gap: 0.25rem;
+  padding: 0.5rem;
+  background: var(--vp-c-bg);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 8px;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+  min-width: 85px;
 }
 
-.step-card:hover {
-  border-color: var(--vp-c-brand-soft);
-  transform: translateY(-2px);
+.flow-step:hover {
+  border-color: var(--vp-c-brand);
 }
 
-.step-card.active {
+.flow-step.active {
   border-color: var(--vp-c-brand);
   background: var(--vp-c-brand-soft);
 }
 
-.step-card.completed {
-  border-color: var(--vp-c-brand-delta);
-  opacity: 0.8;
-}
-
 .step-icon {
-  font-size: 2rem;
-  margin-bottom: 0.5rem;
+  font-size: 1rem;
 }
 
 .step-title {
   font-weight: 600;
-  font-size: 0.95rem;
+  font-size: 0.75rem;
   color: var(--vp-c-text-1);
-  margin-bottom: 0.25rem;
+  text-align: center;
+  white-space: nowrap;
 }
 
-.step-desc {
-  font-size: 0.8rem;
+.tech-term {
+  font-size: 0.6rem;
   color: var(--vp-c-text-2);
-  line-height: 1.3;
+  text-align: center;
+  white-space: normal;
+  line-height: 1.2;
 }
 
-.step-status {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-}
-
-.status-icon {
-  font-size: 0.9rem;
-}
-
-.status-icon.completed {
-  color: var(--vp-c-brand-delta);
-}
-
-.status-icon.active {
-  color: var(--vp-c-brand);
-}
-
-.status-icon.pending {
+.flow-arrow {
+  font-size: 1rem;
   color: var(--vp-c-text-3);
-}
-
-.step-detail {
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  padding: 1.25rem;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.step-detail h4 {
-  margin: 0 0 0.75rem 0;
-  font-size: 1.1rem;
-  color: var(--vp-c-brand);
-}
-
-.step-detail p {
-  margin: 0 0 1rem 0;
-  font-size: 0.95rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.6;
-}
-
-.detail-analogy {
-  background: var(--vp-c-bg-soft);
-  border-radius: 6px;
-  padding: 0.75rem;
-  border-left: 3px solid var(--vp-c-brand);
-}
-
-.analogy-label {
-  font-size: 0.8rem;
-  font-weight: 600;
-  color: var(--vp-c-text-2);
-  margin-bottom: 0.25rem;
-}
-
-.analogy-content {
-  font-size: 0.9rem;
-  color: var(--vp-c-brand-1);
-  font-family: var(--vp-font-family-mono);
+  flex-shrink: 0;
 }
 
 .info-box {
-  padding: 1rem 1.25rem;
-  margin: 0;
-  background: var(--vp-c-bg);
-  border-top: 1px solid var(--vp-c-divider);
-  font-size: 0.9rem;
+  background: var(--vp-c-bg-alt);
+  padding: 0.5rem;
+  border-radius: 6px;
+  font-size: 0.8rem;
   color: var(--vp-c-text-2);
-  line-height: 1.6;
+  margin-top: 0.5rem;
 }
 
-.info-box p {
-  margin: 0;
-}
-
-@media (max-width: 640px) {
-  .steps-container {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .step-card {
-    min-height: 100px;
-    padding: 0.75rem;
-  }
-
-  .step-icon {
-    font-size: 1.5rem;
-  }
+.info-box .icon {
+  margin-right: 0.25rem;
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/deployment/DeploymentSSHDemo.vue b/docs/.vitepress/theme/components/appendix/deployment/DeploymentSSHDemo.vue
deleted file mode 100644
index d4c99bd..0000000
--- a/docs/.vitepress/theme/components/appendix/deployment/DeploymentSSHDemo.vue
+++ /dev/null
@@ -1,561 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-
-const connected = ref(false)
-const connecting = ref(false)
-const currentStep = ref(0)
-const commandHistory = ref([])
-const currentCommand = ref('')
-
-const steps = [
-  { text: '正在连接服务器...', icon: '🔌' },
-  { text: '身份验证中...', icon: '🔑' },
-  { text: '建立安全通道...', icon: '🛡️' },
-  { text: '连接成功！', icon: '✅' }
-]
-
-const connect = () => {
-  if (connected.value || connecting.value) return
-
-  connecting.value = true
-  currentStep.value = 0
-  commandHistory.value = []
-
-  const interval = setInterval(() => {
-    if (currentStep.value < steps.length - 1) {
-      currentStep.value++
-    } else {
-      clearInterval(interval)
-      connecting.value = false
-      connected.value = true
-      commandHistory.value.push({
-        type: 'success',
-        text: 'Welcome to Ubuntu 22.04 LTS'
-      })
-      commandHistory.value.push({
-        type: 'info',
-        text: 'Last login: ' + new Date().toLocaleString()
-      })
-    }
-  }, 800)
-}
-
-const disconnect = () => {
-  connected.value = false
-  currentStep.value = 0
-  commandHistory.value = []
-}
-
-const executeCommand = () => {
-  if (!currentCommand.value.trim()) return
-
-  commandHistory.value.push({
-    type: 'command',
-    text: `$ ${currentCommand.value}`
-  })
-
-  // 模拟命令响应
-  setTimeout(() => {
-    if (currentCommand.value === 'ls') {
-      commandHistory.value.push({
-        type: 'output',
-        text: 'app.js  package.json  node_modules/  README.md'
-      })
-    } else if (currentCommand.value === 'pwd') {
-      commandHistory.value.push({
-        type: 'output',
-        text: '/home/user/my-app'
-      })
-    } else if (currentCommand.value === 'whoami') {
-      commandHistory.value.push({
-        type: 'output',
-        text: 'user'
-      })
-    } else {
-      commandHistory.value.push({
-        type: 'output',
-        text: `Command '${currentCommand.value}' executed`
-      })
-    }
-  }, 300)
-
-  currentCommand.value = ''
-}
-</script>
-
-<template>
-  <div class="deployment-ssh">
-    <div class="demo-header">
-      <h3>SSH远程连接演示</h3>
-      <p class="subtitle">像小明远程指挥咖啡店</p>
-    </div>
-
-    <div class="intro-text">
-      <p>
-        SSH就像小明通过<strong>电话远程指挥</strong>咖啡店员工工作，
-        不需要亲自到店里，就能执行命令、查看状态、部署应用。
-      </p>
-    </div>
-
-    <div class="demo-content">
-      <!-- 连接控制 -->
-      <div class="connection-panel">
-        <div class="connection-info">
-          <div class="info-item">
-            <span class="label">服务器地址</span>
-            <span class="value">192.168.1.100</span>
-          </div>
-          <div class="info-item">
-            <span class="label">用户名</span>
-            <span class="value">xiaoming</span>
-          </div>
-          <div class="info-item">
-            <span class="label">状态</span>
-            <span class="status" :class="{ connected, connecting }">
-              {{ connecting ? '连接中...' : connected ? '已连接' : '未连接' }}
-            </span>
-          </div>
-        </div>
-
-        <button
-          v-if="!connected && !connecting"
-          @click="connect"
-          class="btn primary"
-        >
-          🔗 连接服务器
-        </button>
-        <button
-          v-else-if="connected"
-          @click="disconnect"
-          class="btn danger"
-        >
-          ❌ 断开连接
-        </button>
-        <button v-else class="btn" disabled>
-          ⏳ 连接中...
-        </button>
-      </div>
-
-      <!-- 连接进度 -->
-      <div v-if="connecting || (connected && currentStep === steps.length - 1)" class="connection-progress">
-        <div class="progress-steps">
-          <div
-            v-for="(step, idx) in steps"
-            :key="idx"
-            class="progress-step"
-            :class="{ active: idx === currentStep, completed: idx < currentStep }"
-          >
-            <span class="step-icon">{{ step.icon }}</span>
-            <span class="step-text">{{ step.text }}</span>
-          </div>
-        </div>
-      </div>
-
-      <!-- 终端模拟 -->
-      <div v-if="connected" class="terminal">
-        <div class="terminal-header">
-          <span class="terminal-title">xiaoming@server ~</span>
-          <div class="terminal-buttons">
-            <span class="btn-dot red"></span>
-            <span class="btn-dot yellow"></span>
-            <span class="btn-dot green"></span>
-          </div>
-        </div>
-        <div class="terminal-body">
-          <div
-            v-for="(cmd, idx) in commandHistory"
-            :key="idx"
-            class="terminal-line"
-            :class="cmd.type"
-          >
-            {{ cmd.text }}
-          </div>
-          <div class="terminal-input-line">
-            <span class="prompt">$</span>
-            <input
-              v-model="currentCommand"
-              @keyup.enter="executeCommand"
-              type="text"
-              class="terminal-input"
-              placeholder="输入命令 (try: ls, pwd, whoami)"
-              autofocus
-            />
-          </div>
-        </div>
-      </div>
-
-      <!-- 说明 -->
-      <div v-if="!connected && !connecting" class="ssh-features">
-        <div class="feature-grid">
-          <div class="feature-item">
-            <div class="feature-icon">🔐</div>
-            <div class="feature-title">加密通信</div>
-            <div class="feature-desc">所有数据加密传输，防止被窃听</div>
-          </div>
-          <div class="feature-item">
-            <div class="feature-icon">🎫</div>
-            <div class="feature-title">身份验证</div>
-            <div class="feature-desc">密码或密钥验证，确保只有授权用户访问</div>
-          </div>
-          <div class="feature-item">
-            <div class="feature-icon">⚡</div>
-            <div class="feature-title">远程执行</div>
-            <div class="feature-desc">像在本地一样操作远程服务器</div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="info-box">
-      <p v-if="!connected">
-        💡 <strong>生活类比</strong>：SSH就像小明用专用电话打给咖啡店，只有知道号码（IP）和密码（密钥）的人才能指挥店里工作。
-      </p>
-      <p v-else>
-        ✅ <strong>已连接</strong>：现在你可以像在本地一样操作远程服务器了！试试输入 <code>ls</code>、<code>pwd</code> 或 <code>whoami</code>。
-      </p>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.deployment-ssh {
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  background-color: var(--vp-c-bg-soft);
-  max-height: 600px;
-  overflow-y: auto;
-  margin: 1rem 0;
-}
-
-.demo-header {
-  padding: 1.25rem;
-  background: var(--vp-c-bg);
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-
-.demo-header h3 {
-  margin: 0 0 0.5rem 0;
-  font-size: 1.2rem;
-  color: var(--vp-c-text-1);
-}
-
-.subtitle {
-  margin: 0;
-  font-size: 0.9rem;
-  color: var(--vp-c-text-2);
-}
-
-.intro-text {
-  padding: 1rem 1.25rem;
-  font-size: 0.9rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.6;
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-
-.demo-content {
-  padding: 1.25rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.connection-panel {
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  padding: 1rem;
-  border: 1px solid var(--vp-c-divider);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 1rem;
-}
-
-.connection-info {
-  display: flex;
-  gap: 1.5rem;
-  flex: 1;
-}
-
-.info-item {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.info-item .label {
-  font-size: 0.75rem;
-  color: var(--vp-c-text-2);
-}
-
-.info-item .value {
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-  font-family: var(--vp-font-family-mono);
-}
-
-.status {
-  font-size: 0.85rem;
-  padding: 0.25rem 0.5rem;
-  border-radius: 4px;
-  background: var(--vp-c-bg-alt);
-  color: var(--vp-c-text-3);
-}
-
-.status.connected {
-  background: var(--vp-c-brand-delta);
-  color: white;
-}
-
-.status.connecting {
-  background: var(--vp-c-brand);
-  color: white;
-  animation: pulse 1.5s infinite;
-}
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.6; }
-}
-
-.btn {
-  padding: 0.6rem 1.25rem;
-  border-radius: 6px;
-  font-size: 0.9rem;
-  font-weight: 600;
-  cursor: pointer;
-  border: none;
-  transition: all 0.3s ease;
-}
-
-.btn.primary {
-  background: var(--vp-c-brand);
-  color: white;
-}
-
-.btn.primary:hover {
-  background: var(--vp-c-brand-1);
-}
-
-.btn.danger {
-  background: var(--vp-c-red);
-  color: white;
-}
-
-.btn.danger:hover {
-  background: #dc2626;
-}
-
-.btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.connection-progress {
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  padding: 1rem;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.progress-steps {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.progress-step {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.5rem;
-  border-radius: 6px;
-  opacity: 0.4;
-  transition: all 0.3s ease;
-}
-
-.progress-step.active {
-  opacity: 1;
-  background: var(--vp-c-brand-soft);
-}
-
-.progress-step.completed {
-  opacity: 0.7;
-}
-
-.step-icon {
-  font-size: 1.2rem;
-}
-
-.step-text {
-  font-size: 0.9rem;
-  color: var(--vp-c-text-1);
-}
-
-.terminal {
-  background: #1e1e1e;
-  border-radius: 8px;
-  overflow: hidden;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.terminal-header {
-  background: #2d2d2d;
-  padding: 0.5rem 1rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid #404040;
-}
-
-.terminal-title {
-  font-size: 0.8rem;
-  color: #b4b4b4;
-  font-family: var(--vp-font-family-mono);
-}
-
-.terminal-buttons {
-  display: flex;
-  gap: 0.4rem;
-}
-
-.btn-dot {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-}
-
-.btn-dot.red { background: #ff5f56; }
-.btn-dot.yellow { background: #ffbd2e; }
-.btn-dot.green { background: #27c93f; }
-
-.terminal-body {
-  padding: 1rem;
-  min-height: 200px;
-  max-height: 300px;
-  overflow-y: auto;
-  font-family: var(--vp-font-family-mono);
-  font-size: 0.85rem;
-}
-
-.terminal-line {
-  margin-bottom: 0.5rem;
-  line-height: 1.4;
-}
-
-.terminal-line.command {
-  color: #4ec9b0;
-}
-
-.terminal-line.output {
-  color: #d4d4d4;
-}
-
-.terminal-line.success {
-  color: #4ec9b0;
-}
-
-.terminal-line.info {
-  color: #9cdcfe;
-}
-
-.terminal-input-line {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.prompt {
-  color: #4ec9b0;
-  font-weight: 600;
-}
-
-.terminal-input {
-  flex: 1;
-  background: transparent;
-  border: none;
-  outline: none;
-  color: #d4d4d4;
-  font-family: var(--vp-font-family-mono);
-  font-size: 0.85rem;
-}
-
-.terminal-input::placeholder {
-  color: #606060;
-}
-
-.ssh-features {
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  padding: 1rem;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.feature-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  gap: 1rem;
-}
-
-.feature-item {
-  text-align: center;
-  padding: 1rem;
-  background: var(--vp-c-bg-soft);
-  border-radius: 6px;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.feature-icon {
-  font-size: 2rem;
-  margin-bottom: 0.5rem;
-}
-
-.feature-title {
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-  margin-bottom: 0.25rem;
-}
-
-.feature-desc {
-  font-size: 0.8rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.3;
-}
-
-.info-box {
-  padding: 1rem 1.25rem;
-  margin: 0;
-  background: var(--vp-c-bg);
-  border-top: 1px solid var(--vp-c-divider);
-  font-size: 0.9rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.6;
-}
-
-.info-box p {
-  margin: 0;
-}
-
-.info-box code {
-  background: var(--vp-c-bg-soft);
-  padding: 0.15rem 0.4rem;
-  border-radius: 3px;
-  font-family: var(--vp-font-family-mono);
-  font-size: 0.85rem;
-  color: var(--vp-c-brand-1);
-}
-
-@media (max-width: 640px) {
-  .connection-panel {
-    flex-direction: column;
-  }
-
-  .connection-info {
-    flex-direction: column;
-    gap: 0.75rem;
-    width: 100%;
-  }
-}
-</style>
diff --git a/docs/.vitepress/theme/components/appendix/deployment/DeploymentServerDemo.vue b/docs/.vitepress/theme/components/appendix/deployment/DeploymentServerDemo.vue
index ad8562d..94630f4 100644
--- a/docs/.vitepress/theme/components/appendix/deployment/DeploymentServerDemo.vue
+++ b/docs/.vitepress/theme/components/appendix/deployment/DeploymentServerDemo.vue
@@ -1,426 +1,113 @@
-<script setup>
-import { ref, computed } from 'vue'
-
-const scenarios = ref([
-  {
-    id: 'personal',
-    name: '个人博客',
-    icon: '📝',
-    users: '100/天',
-    cpu: '1核',
-    memory: '1GB',
-    cost: '¥50/月',
-    suitable: '适合',
-    color: '#10b981'
-  },
-  {
-    id: 'small',
-    name: '小型电商',
-    icon: '🛒',
-    users: '1000/天',
-    cpu: '2核',
-    memory: '4GB',
-    cost: '¥200/月',
-    suitable: '适合',
-    color: '#3b82f6'
-  },
-  {
-    id: 'medium',
-    name: '中型应用',
-    icon: '🏢',
-    users: '10000/天',
-    cpu: '4核',
-    memory: '8GB',
-    cost: '¥800/月',
-    suitable: '适合',
-    color: '#f59e0b'
-  },
-  {
-    id: 'large',
-    name: '大型平台',
-    icon: '🏛️',
-    users: '100000+/天',
-    cpu: '8核+',
-    memory: '16GB+',
-    cost: '¥3000+/月',
-    suitable: '集群',
-    color: '#ef4444'
-  }
-])
-
-const selectedScenario = ref('small')
-const serverTypes = ['云服务器', '物理服务器', '容器化部署']
-const selectedServerType = ref('云服务器')
-
-const currentScenario = computed(() => {
-  return scenarios.value.find(s => s.id === selectedScenario.value)
-})
-</script>
-
+<!--
+  DeploymentServerDemo.vue
+  服务器选择（精简版）
+-->
 <template>
   <div class="deployment-server">
-    <div class="demo-header">
-      <h3>服务器选择演示</h3>
-      <p class="subtitle">根据客流量选择合适的店面</p>
+    <div class="header">
+      <span class="icon">🖥️</span>
+      <span class="title">服务器选择</span>
+      <span class="subtitle">根据客流量选择合适的店面</span>
     </div>
 
-    <div class="intro-text">
-      <p>
-        就像小明开咖啡店，<strong>街边小摊</strong>、<strong>社区店</strong>、<strong>商场店</strong>、<strong>旗舰店</strong>需要的场地面积和设备完全不同，
-        选择服务器也要根据用户量来匹配，避免<strong>资源浪费</strong>或<strong>性能不足</strong>。
-      </p>
-    </div>
-
-    <div class="demo-content">
-      <!-- 场景选择 -->
-      <div class="scenario-section">
-        <div class="section-title">🎯 选择你的场景</div>
-        <div class="scenario-cards">
-          <div
-            v-for="scenario in scenarios"
-            :key="scenario.id"
-            class="scenario-card"
-            :class="{ active: selectedScenario === scenario.id }"
-            @click="selectedScenario = scenario.id"
-            :style="{ '--scenario-color': scenario.color }"
-          >
-            <div class="scenario-icon">{{ scenario.icon }}</div>
-            <div class="scenario-name">{{ scenario.name }}</div>
-            <div class="scenario-users">{{ scenario.users }}</div>
-            <div class="scenario-badge" :class="scenario.suitable === '适合' ? 'good' : 'cluster'">
-              {{ scenario.suitable === '适合' ? '✓ 单机' : '需要集群' }}
-            </div>
-          </div>
-        </div>
+    <div class="scenarios">
+      <div class="scenario" :class="{ active: scenario === 'personal' }" @click="scenario = 'personal'">
+        <span class="name">个人博客</span>
+        <span class="spec">1核 1G</span>
+        <span class="cost">¥50/月</span>
       </div>
-
-      <!-- 服务器配置 -->
-      <div class="config-section">
-        <div class="section-title">⚙️ 推荐配置</div>
-        <div class="config-cards">
-          <div class="config-card">
-            <div class="config-icon">🖥️</div>
-            <div class="config-label">CPU</div>
-            <div class="config-value">{{ currentScenario.cpu }}</div>
-            <div class="config-desc">处理订单的厨师数量</div>
-          </div>
-
-          <div class="config-card">
-            <div class="config-icon">💾</div>
-            <div class="config-label">内存</div>
-            <div class="config-value">{{ currentScenario.memory }}</div>
-            <div class="config-desc">同时处理订单的能力</div>
-          </div>
-
-          <div class="config-card">
-            <div class="config-icon">💰</div>
-            <div class="config-label">成本</div>
-            <div class="config-value">{{ currentScenario.cost }}</div>
-            <div class="config-desc">相当于租金+水电费</div>
-          </div>
-        </div>
+      <div class="scenario" :class="{ active: scenario === 'small' }" @click="scenario = 'small'">
+        <span class="name">小型电商</span>
+        <span class="spec">2核 4G</span>
+        <span class="cost">¥300/月</span>
       </div>
-
-      <!-- 服务器类型选择 -->
-      <div class="server-type-section">
-        <div class="section-title">🏗️ 部署方式</div>
-        <div class="server-types">
-          <div
-            v-for="type in serverTypes"
-            :key="type"
-            class="type-item"
-            :class="{ active: selectedServerType === type }"
-            @click="selectedServerType = type"
-          >
-            <span class="type-icon">
-              {{ type === '云服务器' ? '☁️' : type === '物理服务器' ? '🏢' : '📦' }}
-            </span>
-            <span class="type-name">{{ type }}</span>
-            <span v-if="selectedServerType === type" class="type-check">✓</span>
-          </div>
-        </div>
-
-        <!-- 类型说明 -->
-        <div class="type-description">
-          <div v-if="selectedServerType === '云服务器'" class="desc-content">
-            <strong>☁️ 云服务器（推荐）</strong>
-            <p>像租用共享厨房，灵活扩展，按需付费。适合大多数场景。</p>
-          </div>
-          <div v-if="selectedServerType === '物理服务器'" class="desc-content">
-            <strong>🏢 物理服务器</strong>
-            <p>像买下整个店面，性能稳定但成本高，适合大规模应用。</p>
-          </div>
-          <div v-if="selectedServerType === '容器化部署'" class="desc-content">
-            <strong>📦 容器化部署（Docker/K8s）</strong>
-            <p>像用预制盒做饭，标准化、可复制，适合快速扩容和微服务。</p>
-          </div>
-        </div>
+      <div class="scenario" :class="{ active: scenario === 'medium' }" @click="scenario = 'medium'">
+        <span class="name">中型应用</span>
+        <span class="spec">4核 8G</span>
+        <span class="cost">¥1000/月</span>
       </div>
     </div>
-
-    <div class="info-box">
-      <p>
-        💡 <strong>小明建议</strong>：刚开始用云服务器最合适，就像开咖啡店先租个小店面测试生意，
-        客流量大了再升级或开分店（集群部署）。<strong>不要一开始就租豪华店面！</strong>
-      </p>
-    </div>
   </div>
 </template>
 
+<script setup>
+import { ref } from 'vue'
+
+const scenario = ref('small')
+</script>
+
 <style scoped>
 .deployment-server {
   border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
-  background-color: var(--vp-c-bg-soft);
-  max-height: 600px;
-  overflow-y: auto;
+  background: var(--vp-c-bg-soft);
+  padding: 0.75rem;
   margin: 1rem 0;
 }
 
-.demo-header {
-  padding: 1.25rem;
-  background: var(--vp-c-bg);
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-
-.demo-header h3 {
-  margin: 0 0 0.5rem 0;
-  font-size: 1.2rem;
-  color: var(--vp-c-text-1);
-}
-
-.subtitle {
-  margin: 0;
-  font-size: 0.9rem;
-  color: var(--vp-c-text-2);
-}
-
-.intro-text {
-  padding: 1rem 1.25rem;
-  font-size: 0.9rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.6;
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-
-.demo-content {
-  padding: 1.25rem;
+.header {
   display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.section-title {
-  font-size: 0.95rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
+  align-items: center;
+  gap: 0.5rem;
   margin-bottom: 0.75rem;
 }
 
-.scenario-cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
-  gap: 0.75rem;
-}
-
-.scenario-card {
-  background: var(--vp-c-bg);
-  border: 2px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 1rem;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  text-align: center;
-  position: relative;
-}
-
-.scenario-card:hover {
-  border-color: var(--vp-c-brand-soft);
-  transform: translateY(-2px);
-}
-
-.scenario-card.active {
-  border-color: var(--scenario-color);
-  background: var(--vp-c-brand-soft);
-}
-
-.scenario-icon {
-  font-size: 2rem;
-  margin-bottom: 0.5rem;
-}
-
-.scenario-name {
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-  margin-bottom: 0.25rem;
-}
-
-.scenario-users {
-  font-size: 0.8rem;
-  color: var(--vp-c-text-2);
-  margin-bottom: 0.5rem;
-}
-
-.scenario-badge {
-  font-size: 0.7rem;
-  padding: 0.2rem 0.5rem;
-  border-radius: 4px;
-  font-weight: 600;
-  display: inline-block;
-}
-
-.scenario-badge.good {
-  background: var(--vp-c-brand-delta);
-  color: white;
-}
-
-.scenario-badge.cluster {
-  background: var(--vp-c-red);
-  color: white;
-}
-
-.config-section {
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  padding: 1rem;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.config-cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-  gap: 0.75rem;
-}
-
-.config-card {
-  background: var(--vp-c-bg-soft);
-  border-radius: 6px;
-  padding: 1rem;
-  text-align: center;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.config-icon {
-  font-size: 1.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.config-label {
-  font-size: 0.8rem;
-  color: var(--vp-c-text-2);
-  margin-bottom: 0.25rem;
-}
-
-.config-value {
-  font-size: 1.1rem;
-  font-weight: 700;
-  color: var(--vp-c-brand);
-  font-family: var(--vp-font-family-mono);
-  margin-bottom: 0.25rem;
-}
-
-.config-desc {
-  font-size: 0.75rem;
-  color: var(--vp-c-text-3);
-  line-height: 1.3;
-}
-
-.server-type-section {
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  padding: 1rem;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.server-types {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
-}
-
-.type-item {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem;
-  background: var(--vp-c-bg-soft);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-.type-item:hover {
-  border-color: var(--vp-c-brand-soft);
-}
-
-.type-item.active {
-  border-color: var(--vp-c-brand);
-  background: var(--vp-c-brand-soft);
-}
-
-.type-icon {
+.header .icon {
   font-size: 1.25rem;
 }
 
-.type-name {
-  flex: 1;
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-}
-
-.type-check {
-  color: var(--vp-c-brand);
+.header .title {
   font-weight: 700;
-}
-
-.type-description {
-  background: var(--vp-c-bg-alt);
-  border-radius: 6px;
-  padding: 0.75rem;
-  border-left: 3px solid var(--vp-c-brand);
-}
-
-.desc-content {
-  font-size: 0.85rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.5;
-}
-
-.desc-content strong {
-  display: block;
+  font-size: 1rem;
   color: var(--vp-c-text-1);
-  margin-bottom: 0.25rem;
 }
 
-.desc-content p {
-  margin: 0;
-}
-
-.info-box {
-  padding: 1rem 1.25rem;
-  margin: 0;
-  background: var(--vp-c-bg);
-  border-top: 1px solid var(--vp-c-divider);
-  font-size: 0.9rem;
+.header .subtitle {
   color: var(--vp-c-text-2);
-  line-height: 1.6;
+  font-size: 0.85rem;
 }
 
-.info-box p {
-  margin: 0;
+.scenarios {
+  display: flex;
+  gap: 0.5rem;
 }
 
-@media (max-width: 640px) {
-  .scenario-cards {
-    grid-template-columns: repeat(2, 1fr);
-  }
+.scenario {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.75rem;
+  background: var(--vp-c-bg);
+  border: 2px solid var(--vp-c-divider);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
 
-  .config-cards {
-    grid-template-columns: 1fr;
-  }
+.scenario:hover {
+  border-color: var(--vp-c-brand-soft);
+}
+
+.scenario.active {
+  border-color: var(--vp-c-brand);
+  background: var(--vp-c-brand-dimm);
+}
+
+.scenario .name {
+  font-weight: 600;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-1);
+}
+
+.scenario .spec {
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+}
+
+.scenario .cost {
+  font-weight: 700;
+  color: var(--vp-c-brand);
 }
 </style>
diff --git a/docs/.vitepress/theme/components/appendix/deployment/DeploymentTroubleshootDemo.vue b/docs/.vitepress/theme/components/appendix/deployment/DeploymentTroubleshootDemo.vue
deleted file mode 100644
index f8e7272..0000000
--- a/docs/.vitepress/theme/components/appendix/deployment/DeploymentTroubleshootDemo.vue
+++ /dev/null
@@ -1,456 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-
-const symptoms = ref([
-  { id: 'slow', text: '网站访问很慢', icon: '🐌' },
-  { id: 'error', text: '显示500错误', icon: '❌' },
-  { id: 'timeout', text: '请求超时', icon: '⏰' },
-  { id: 'blank', text: '页面空白', icon: '📄' }
-])
-
-const selectedSymptom = ref('')
-const diagnosis = ref('')
-const solution = ref('')
-const step = ref(1)
-
-const diagnose = (symptom) => {
-  selectedSymptom.value = symptom
-  step.value = 2
-
-  if (symptom === 'slow') {
-    diagnosis.value = '可能原因：服务器负载过高、数据库查询慢、带宽不足'
-    solution.value = '检查CPU/内存使用率，优化数据库查询，考虑使用CDN加速'
-  } else if (symptom === 'error') {
-    diagnosis.value = '可能原因：代码Bug、配置错误、依赖缺失'
-    solution.value = '查看服务器日志，检查环境变量，确认依赖包是否安装'
-  } else if (symptom === 'timeout') {
-    diagnosis.value = '可能原因：网络问题、防火墙阻拦、服务未启动'
-    solution.value = '检查网络连通性，确认防火墙规则，验证服务状态'
-  } else if (symptom === 'blank') {
-    diagnosis.value = '可能原因：前端资源加载失败、JS报错、路径配置错误'
-    solution.value = '检查浏览器控制台错误，验证静态资源路径，查看构建日志'
-  }
-}
-
-const reset = () => {
-  selectedSymptom.value = ''
-  diagnosis.value = ''
-  solution.value = ''
-  step.value = 1
-}
-</script>
-
-<template>
-  <div class="deployment-troubleshoot">
-    <div class="demo-header">
-      <h3>故障排查演示</h3>
-      <p class="subtitle">像医生诊断病人一样排查问题</p>
-    </div>
-
-    <div class="intro-text">
-      <p>
-        就像小明发现咖啡店<strong>出餐慢</strong>、<strong>机器故障</strong>时，
-        需要系统性地排查问题（咖啡豆→磨豆机→咖啡机→操作员），
-        服务器故障也需要科学的排查流程。
-      </p>
-    </div>
-
-    <div class="demo-content">
-      <!-- 步骤1: 选择症状 -->
-      <div v-if="step === 1" class="symptom-selection">
-        <div class="section-title">🔍 第一步：选择你遇到的问题</div>
-        <div class="symptom-grid">
-          <div
-            v-for="symptom in symptoms"
-            :key="symptom.id"
-            class="symptom-card"
-            @click="diagnose(symptom.id)"
-          >
-            <div class="symptom-icon">{{ symptom.icon }}</div>
-            <div class="symptom-text">{{ symptom.text }}</div>
-          </div>
-        </div>
-      </div>
-
-      <!-- 步骤2: 诊断结果 -->
-      <div v-if="step === 2" class="diagnosis-result">
-        <div class="section-title">🩺 诊断结果</div>
-
-        <div class="result-card">
-          <div class="result-header">
-            <span class="result-icon">😷</span>
-            <span class="result-title">问题症状</span>
-          </div>
-          <div class="result-content">
-            {{ symptoms.find(s => s.id === selectedSymptom).text }}
-          </div>
-        </div>
-
-        <div class="result-card">
-          <div class="result-header">
-            <span class="result-icon">🔬</span>
-            <span class="result-title">可能原因</span>
-          </div>
-          <div class="result-content">{{ diagnosis }}</div>
-        </div>
-
-        <div class="result-card success">
-          <div class="result-header">
-            <span class="result-icon">💊</span>
-            <span class="result-title">解决方案</span>
-          </div>
-          <div class="result-content">{{ solution }}</div>
-        </div>
-
-        <button class="btn secondary" @click="reset">
-          ← 重新诊断
-        </button>
-      </div>
-
-      <!-- 通用排查流程 -->
-      <div class="troubleshoot-flow">
-        <div class="flow-title">📋 通用排查流程</div>
-        <div class="flow-steps">
-          <div class="flow-step">
-            <div class="step-number">1</div>
-            <div class="step-content">
-              <div class="step-title">查看日志</div>
-              <div class="step-desc">服务器日志、应用日志、错误日志</div>
-            </div>
-          </div>
-          <div class="flow-step">
-            <div class="step-number">2</div>
-            <div class="step-content">
-              <div class="step-title">检查状态</div>
-              <div class="step-desc">服务是否运行、端口是否监听、进程是否存在</div>
-            </div>
-          </div>
-          <div class="flow-step">
-            <div class="step-number">3</div>
-            <div class="step-content">
-              <div class="step-title">资源监控</div>
-              <div class="step-desc">CPU、内存、磁盘、网络使用情况</div>
-            </div>
-          </div>
-          <div class="flow-step">
-            <div class="step-number">4</div>
-            <div class="step-content">
-              <div class="step-title">网络测试</div>
-              <div class="step-desc">ping、telnet、curl 测试连通性</div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- 常用命令 -->
-      <div class="commands-cheatsheet">
-        <div class="cheatsheet-title">⚡ 常用排查命令</div>
-        <div class="command-list">
-          <div class="command-item">
-            <code class="command-code">tail -f /var/log/nginx/error.log</code>
-            <span class="command-desc">实时查看 Nginx 错误日志</span>
-          </div>
-          <div class="command-item">
-            <code class="command-code">systemctl status nginx</code>
-            <span class="command-desc">检查 Nginx 服务状态</span>
-          </div>
-          <div class="command-item">
-            <code class="command-code">netstat -tlnp | grep :80</code>
-            <span class="command-desc">检查 80 端口是否被监听</span>
-          </div>
-          <div class="command-item">
-            <code class="command-code">ps aux | grep node</code>
-            <span class="command-desc">查看 Node.js 进程</span>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="info-box">
-      <p>
-        💡 <strong>小明经验</strong>：遇到问题不要慌！按照"查看症状→分析原因→尝试解决→验证效果"的流程，
-        90%的问题都能快速定位。记得记录问题，避免重复踩坑！
-      </p>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.deployment-troubleshoot {
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  background-color: var(--vp-c-bg-soft);
-  max-height: 600px;
-  overflow-y: auto;
-  margin: 1rem 0;
-}
-
-.demo-header {
-  padding: 1.25rem;
-  background: var(--vp-c-bg);
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-
-.demo-header h3 {
-  margin: 0 0 0.5rem 0;
-  font-size: 1.2rem;
-  color: var(--vp-c-text-1);
-}
-
-.subtitle {
-  margin: 0;
-  font-size: 0.9rem;
-  color: var(--vp-c-text-2);
-}
-
-.intro-text {
-  padding: 1rem 1.25rem;
-  font-size: 0.9rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.6;
-  border-bottom: 1px solid var(--vp-c-divider);
-}
-
-.demo-content {
-  padding: 1.25rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.section-title {
-  font-size: 0.95rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-  margin-bottom: 1rem;
-}
-
-.symptom-selection {
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  padding: 1rem;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.symptom-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-  gap: 0.75rem;
-}
-
-.symptom-card {
-  background: var(--vp-c-bg-soft);
-  border: 2px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 1rem;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  text-align: center;
-}
-
-.symptom-card:hover {
-  border-color: var(--vp-c-brand-soft);
-  transform: translateY(-2px);
-}
-
-.symptom-icon {
-  font-size: 2rem;
-  margin-bottom: 0.5rem;
-}
-
-.symptom-text {
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-}
-
-.diagnosis-result {
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  padding: 1rem;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.result-card {
-  background: var(--vp-c-bg-soft);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 6px;
-  padding: 1rem;
-  margin-bottom: 0.75rem;
-}
-
-.result-card.success {
-  border-color: var(--vp-c-brand-delta);
-  background: var(--vp-c-brand-dimm);
-}
-
-.result-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.result-icon {
-  font-size: 1.2rem;
-}
-
-.result-title {
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-}
-
-.result-content {
-  font-size: 0.85rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.5;
-  padding-left: 1.7rem;
-}
-
-.btn {
-  padding: 0.6rem 1.25rem;
-  border-radius: 6px;
-  font-size: 0.9rem;
-  font-weight: 600;
-  cursor: pointer;
-  border: none;
-  transition: all 0.3s ease;
-}
-
-.btn.secondary {
-  background: var(--vp-c-bg-alt);
-  color: var(--vp-c-text-1);
-  border: 1px solid var(--vp-c-divider);
-}
-
-.btn.secondary:hover {
-  border-color: var(--vp-c-brand);
-}
-
-.troubleshoot-flow {
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  padding: 1rem;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.flow-title {
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-  margin-bottom: 1rem;
-}
-
-.flow-steps {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.flow-step {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.75rem;
-  padding: 0.75rem;
-  background: var(--vp-c-bg-soft);
-  border-radius: 6px;
-}
-
-.step-number {
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  background: var(--vp-c-brand);
-  color: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.85rem;
-  font-weight: 700;
-  flex-shrink: 0;
-}
-
-.step-content {
-  flex: 1;
-}
-
-.step-title {
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-  margin-bottom: 0.15rem;
-}
-
-.step-desc {
-  font-size: 0.8rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.4;
-}
-
-.commands-cheatsheet {
-  background: var(--vp-c-bg);
-  border-radius: 8px;
-  padding: 1rem;
-  border: 1px solid var(--vp-c-divider);
-}
-
-.cheatsheet-title {
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-  margin-bottom: 1rem;
-}
-
-.command-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.command-item {
-  background: #1e1e1e;
-  border-radius: 4px;
-  padding: 0.6rem 0.75rem;
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.command-code {
-  font-family: var(--vp-font-family-mono);
-  font-size: 0.8rem;
-  color: #4ec9b0;
-  background: transparent;
-}
-
-.command-desc {
-  font-size: 0.75rem;
-  color: var(--vp-c-text-3);
-}
-
-.info-box {
-  padding: 1rem 1.25rem;
-  margin: 0;
-  background: var(--vp-c-bg);
-  border-top: 1px solid var(--vp-c-divider);
-  font-size: 0.9rem;
-  color: var(--vp-c-text-2);
-  line-height: 1.6;
-}
-
-.info-box p {
-  margin: 0;
-}
-
-@media (max-width: 640px) {
-  .symptom-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .command-item {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-}
-</style>
diff --git a/docs/.vitepress/theme/components/appendix/deployment/DnsFlowDemo.vue b/docs/.vitepress/theme/components/appendix/deployment/DnsFlowDemo.vue
deleted file mode 100644
index c147e55..0000000
--- a/docs/.vitepress/theme/components/appendix/deployment/DnsFlowDemo.vue
+++ /dev/null
@@ -1,217 +0,0 @@
-<!--
-  DnsFlowDemo.vue
-  DNS 记录操练台：地址簿隐喻
--->
-<template>
-  <div class="dns">
-    <div class="header">
-      <div class="title">DNS 查号台</div>
-      <div class="subtitle">把“好记的名字”变成“机器的 IP”</div>
-    </div>
-
-    <div class="controls">
-      <div class="field">
-        <label>你要配哪个域名？</label>
-        <input v-model="domain" placeholder="例如：baidu.com" />
-      </div>
-      <div class="field">
-        <label>你要做什么？(记录类型)</label>
-        <div class="chips">
-          <button
-            v-for="r in recordTypes"
-            :key="r.type"
-            :class="['chip', { active: recordType === r.type }]"
-            @click="recordType = r.type"
-          >
-            {{ r.desc }}
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <div class="card">
-      <div class="row">
-        <span>类型 (Type)</span>
-        <code class="highlight">{{ recordType }}</code>
-      </div>
-      <div class="row">
-        <span>前缀 (Host)</span>
-        <code>{{ hostLabel }}</code>
-      </div>
-      <div class="row">
-        <span>目标 (Value)</span>
-        <code>{{ recordValue }}</code>
-      </div>
-      <div class="row">
-        <span>记忆时间 (TTL)</span>
-        <code>{{ ttlSuggestion }}</code>
-      </div>
-
-      <div class="human-speak">
-        <span class="emoji">💡</span>
-        <div class="text">
-          <strong>人话解释：</strong>
-          {{ humanExplanation }}
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed, ref } from 'vue'
-
-const domain = ref('my-site.com')
-const recordType = ref('A')
-
-const recordTypes = [
-  {
-    type: 'A',
-    desc: '直接指向 IP',
-    value: '1.2.3.4',
-    explanation: '告诉查号台：我家住在“1.2.3.4”这个门牌号。最常用！',
-    ttl: '600s (10分钟)'
-  },
-  {
-    type: 'CNAME',
-    desc: '指向别名',
-    value: 'shops.myshopify.com',
-    explanation: '告诉查号台：我搬家了，你去问问“shops.myshopify.com”我在哪。',
-    ttl: '600s (10分钟)'
-  },
-  {
-    type: 'MX',
-    desc: '配置邮箱',
-    value: 'mxbiz1.qq.com',
-    explanation: '告诉邮递员：寄给我的信，请送到“mxbiz1.qq.com”这个邮局去。',
-    ttl: '3600s (1小时)'
-  }
-]
-
-const currentRecord = computed(() =>
-  recordTypes.find((r) => r.type === recordType.value)
-)
-
-const hostLabel = computed(() => (recordType.value === 'CNAME' ? 'www' : '@'))
-const recordValue = computed(() => currentRecord.value?.value || '')
-const ttlSuggestion = computed(() => currentRecord.value?.ttl || '600s')
-const humanExplanation = computed(() => currentRecord.value?.explanation || '')
-</script>
-
-<style scoped>
-.dns {
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 12px;
-  background: var(--vp-c-bg-soft);
-  padding: 20px;
-  margin: 20px 0;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.header .title {
-  font-weight: 800;
-  font-size: 18px;
-}
-.header .subtitle {
-  color: var(--vp-c-text-2);
-  font-size: 14px;
-}
-
-.controls {
-  display: grid;
-  gap: 16px;
-}
-
-.field {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-label {
-  font-weight: 600;
-  font-size: 14px;
-}
-
-input {
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 10px;
-  background: var(--vp-c-bg);
-  width: 100%;
-}
-
-.chips {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.chip {
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 999px;
-  padding: 6px 14px;
-  background: var(--vp-c-bg);
-  font-size: 13px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.chip.active {
-  background: var(--vp-c-brand);
-  color: white;
-  border-color: var(--vp-c-brand);
-}
-
-.card {
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 10px;
-  padding: 16px;
-}
-
-.row {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 10px;
-  font-size: 14px;
-  align-items: center;
-}
-
-.row span {
-  color: var(--vp-c-text-2);
-}
-
-code {
-  background: var(--vp-c-bg-soft);
-  padding: 4px 8px;
-  border-radius: 6px;
-  font-family: var(--vp-font-family-mono);
-  font-size: 13px;
-}
-
-.highlight {
-  color: var(--vp-c-brand);
-  font-weight: bold;
-}
-
-.human-speak {
-  margin-top: 16px;
-  padding-top: 16px;
-  border-top: 1px dashed var(--vp-c-divider);
-  display: flex;
-  gap: 10px;
-}
-
-.emoji {
-  font-size: 20px;
-}
-
-.text {
-  font-size: 14px;
-  line-height: 1.5;
-  color: var(--vp-c-text-1);
-}
-</style>
diff --git a/docs/.vitepress/theme/components/appendix/deployment/HttpsNginxDemo.vue b/docs/.vitepress/theme/components/appendix/deployment/HttpsNginxDemo.vue
deleted file mode 100644
index 4b406e2..0000000
--- a/docs/.vitepress/theme/components/appendix/deployment/HttpsNginxDemo.vue
+++ /dev/null
@@ -1,212 +0,0 @@
-<!--
-  HttpsNginxDemo.vue
-  Nginx 配置生成器：极简版
--->
-<template>
-  <div class="https">
-    <div class="header">
-      <div class="title">Nginx 配置生成器</div>
-      <div class="subtitle">复制粘贴就能用，自动配置 HTTPS</div>
-    </div>
-
-    <div class="options">
-      <div
-        class="option"
-        :class="{ active: mode === 'static' }"
-        @click="mode = 'static'"
-      >
-        <span class="icon">📄</span>
-        <span>静态网站</span>
-      </div>
-      <div
-        class="option"
-        :class="{ active: mode === 'proxy' }"
-        @click="mode = 'proxy'"
-      >
-        <span class="icon">🔄</span>
-        <span>反向代理 (Node/Python)</span>
-      </div>
-    </div>
-
-    <div class="code-box">
-      <div class="code-header">
-        <span>/etc/nginx/sites-available/default</span>
-        <button class="copy-btn" @click="copy">
-          {{ copied ? '已复制' : '复制' }}
-        </button>
-      </div>
-      <pre><code>{{ snippet }}</code></pre>
-    </div>
-
-    <div class="tips">
-      <div class="tip-item">
-        <span class="emoji">🔑</span>
-        <div>
-          <strong>开启 HTTPS 神器：</strong>
-          <div class="cmd">sudo certbot --nginx</div>
-          <div class="desc">
-            运行这行命令，它会自动修改上面的配置，帮你加上 SSL 证书。
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed, ref } from 'vue'
-
-const mode = ref('proxy')
-const copied = ref(false)
-
-const snippet = computed(() => {
-  if (mode.value === 'static') {
-    return `server {
-    listen 80;
-    server_name example.com;  # 改成你的域名
-
-    # 静态文件在哪里？
-    root /var/www/html;
-    index index.html;
-
-    location / {
-        try_files $uri $uri/ =404;
-    }
-}`
-  } else {
-    return `server {
-    listen 80;
-    server_name example.com;  # 改成你的域名
-
-    location / {
-        # 把请求转发给 3000 端口的程序
-        proxy_pass http://127.0.0.1:3000;
-        
-        # 告诉后端真实的客户 IP 是多少
-        proxy_set_header Host $host;
-        proxy_set_header X-Real-IP $remote_addr;
-    }
-}`
-  }
-})
-
-function copy() {
-  navigator.clipboard.writeText(snippet.value)
-  copied.value = true
-  setTimeout(() => (copied.value = false), 2000)
-}
-</script>
-
-<style scoped>
-.https {
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 12px;
-  background: var(--vp-c-bg-soft);
-  padding: 20px;
-  margin: 20px 0;
-}
-
-.header {
-  margin-bottom: 16px;
-}
-.header .title {
-  font-weight: 800;
-  font-size: 18px;
-}
-.header .subtitle {
-  color: var(--vp-c-text-2);
-  font-size: 14px;
-}
-
-.options {
-  display: flex;
-  gap: 12px;
-  margin-bottom: 16px;
-}
-
-.option {
-  border: 1px solid var(--vp-c-divider);
-  background: var(--vp-c-bg);
-  padding: 8px 16px;
-  border-radius: 8px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 14px;
-  transition: all 0.2s;
-}
-
-.option.active {
-  border-color: var(--vp-c-brand);
-  color: var(--vp-c-brand);
-  background: var(--vp-c-bg-soft);
-}
-
-.code-box {
-  background: #1e1e20;
-  border-radius: 8px;
-  overflow: hidden;
-  color: #fff;
-  font-family: var(--vp-font-family-mono);
-  font-size: 13px;
-  margin-bottom: 16px;
-}
-
-.code-header {
-  background: #2d2d30;
-  padding: 8px 12px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: 12px;
-  color: #aaa;
-}
-
-.copy-btn {
-  color: #fff;
-  background: rgba(255, 255, 255, 0.1);
-  padding: 2px 8px;
-  border-radius: 4px;
-  font-size: 11px;
-}
-
-pre {
-  padding: 16px;
-  margin: 0;
-  overflow-x: auto;
-  line-height: 1.5;
-}
-
-.tips {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.tip-item {
-  display: flex;
-  gap: 10px;
-  background: var(--vp-c-bg);
-  padding: 12px;
-  border-radius: 8px;
-  border: 1px dashed var(--vp-c-divider);
-}
-
-.cmd {
-  background: #1e1e20;
-  color: #22c55e;
-  padding: 4px 8px;
-  border-radius: 4px;
-  display: inline-block;
-  margin: 4px 0;
-  font-family: var(--vp-font-family-mono);
-  font-size: 13px;
-}
-
-.desc {
-  font-size: 13px;
-  color: var(--vp-c-text-2);
-  line-height: 1.4;
-}
-</style>
diff --git a/docs/.vitepress/theme/components/appendix/deployment/ObservabilityBackupDemo.vue b/docs/.vitepress/theme/components/appendix/deployment/ObservabilityBackupDemo.vue
deleted file mode 100644
index 1d4ccee..0000000
--- a/docs/.vitepress/theme/components/appendix/deployment/ObservabilityBackupDemo.vue
+++ /dev/null
@@ -1,267 +0,0 @@
-<!--
-  ObservabilityBackupDemo.vue
-  监控与备份：买保险隐喻
--->
-<template>
-  <div class="obs">
-    <div class="header">
-      <div class="title">监控与备份</div>
-      <div class="subtitle">给你的网站买份“保险”</div>
-    </div>
-
-    <div class="controls">
-      <div class="control">
-        <label>安保级别 (监控)</label>
-        <select v-model="monitorLevel">
-          <option value="lite">入门：只装个摄像头 (日志)</option>
-          <option value="std">标准：雇个保安 (指标+告警)</option>
-          <option value="pro">专业：24h 安保中心 (全链路追踪)</option>
-        </select>
-      </div>
-      <div class="control">
-        <label>通知谁？(告警渠道)</label>
-        <div class="chips">
-          <button
-            v-for="c in channels"
-            :key="c.id"
-            :class="['chip', { active: channel === c.id }]"
-            @click="channel = c.id"
-          >
-            {{ c.label }}
-          </button>
-        </div>
-      </div>
-      <div class="control">
-        <label>备份频率 (小时)</label>
-        <input
-          type="range"
-          min="6"
-          max="48"
-          step="6"
-          v-model.number="backupHours"
-        />
-        <div class="hint">每 {{ backupHours }} 小时存一次盘</div>
-      </div>
-    </div>
-
-    <div class="grid">
-      <div class="card">
-        <div class="label">安全评分</div>
-        <div
-          class="value big"
-          :class="{
-            green: riskScore <= 40,
-            orange: riskScore > 40 && riskScore <= 70,
-            red: riskScore > 70
-          }"
-        >
-          {{ 100 - riskScore }} 分
-        </div>
-        <div class="note">
-          {{
-            riskScore > 70
-              ? '极其危险！'
-              : riskScore > 40
-                ? '勉强及格'
-                : '非常稳！'
-          }}
-        </div>
-      </div>
-      <div class="card">
-        <div class="label">最坏情况 (丢数据)</div>
-        <div class="value">{{ rpo }}</div>
-        <div class="note">最多丢失多少小时的数据</div>
-      </div>
-      <div class="card">
-        <div class="label">恢复速度</div>
-        <div class="value">{{ rto }}</div>
-        <div class="note">出事后多久能修好</div>
-      </div>
-    </div>
-
-    <div class="checklist-box">
-      <div class="box-title">保命清单 (Checklist)</div>
-      <div class="checks">
-        <div class="check" v-for="item in checklist" :key="item.label">
-          <input type="checkbox" v-model="item.done" />
-          <span>{{ item.label }}</span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed, reactive, ref } from 'vue'
-
-const monitorLevel = ref('std')
-const channels = [
-  { id: 'email', label: '发邮件 (慢)' },
-  { id: 'chat', label: '企业微信/飞书 (快)' },
-  { id: 'pager', label: '电话轰炸 (急)' }
-]
-const channel = ref('chat')
-const backupHours = ref(24)
-
-const checklist = reactive([
-  { label: '日志能不能查到？', done: true },
-  { label: 'CPU 飙高了会不会报警？', done: false },
-  { label: '关键接口慢了知不知道？', done: false },
-  { label: '数据库有没有自动备份？', done: true },
-  { label: '备份文件真的能恢复吗？(演练过)', done: false }
-])
-
-const riskScore = computed(() => {
-  let score = 70
-  if (monitorLevel.value === 'pro') score -= 20
-  else if (monitorLevel.value === 'std') score -= 10
-
-  if (channel.value === 'pager') score -= 10
-  else if (channel.value === 'chat') score -= 5
-
-  score -= Math.min(20, (48 - backupHours.value) * 0.8)
-
-  const doneCount = checklist.filter((i) => i.done).length
-  score -= doneCount * 4
-
-  return Math.max(0, Math.min(100, Math.round(score)))
-})
-
-const rpo = computed(() => `${backupHours.value} 小时`)
-const rto = computed(() => {
-  if (monitorLevel.value === 'pro') return '15-30 分钟'
-  if (monitorLevel.value === 'std') return '30-60 分钟'
-  return '1-2 小时 (甚至更久)'
-})
-</script>
-
-<style scoped>
-.obs {
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 12px;
-  background: var(--vp-c-bg-soft);
-  padding: 20px;
-  margin: 20px 0;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.header .title {
-  font-weight: 800;
-  font-size: 18px;
-}
-.header .subtitle {
-  color: var(--vp-c-text-2);
-  font-size: 14px;
-}
-
-.controls {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: 16px;
-}
-
-.control {
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 10px;
-  padding: 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-label {
-  font-weight: 700;
-  font-size: 14px;
-}
-select,
-input[type='range'] {
-  width: 100%;
-}
-.hint {
-  color: var(--vp-c-text-2);
-  font-size: 12px;
-  margin-top: 4px;
-}
-.chips {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-.chip {
-  padding: 6px 12px;
-  border-radius: 999px;
-  border: 1px solid var(--vp-c-divider);
-  background: var(--vp-c-bg);
-  cursor: pointer;
-  font-size: 12px;
-  transition: all 0.2s;
-}
-.chip.active {
-  border-color: var(--vp-c-brand);
-  color: white;
-  background: var(--vp-c-brand);
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 12px;
-}
-.card {
-  background: var(--vp-c-bg);
-  border: 1px dashed var(--vp-c-divider);
-  border-radius: 10px;
-  padding: 16px;
-}
-.label {
-  color: var(--vp-c-text-2);
-  font-size: 13px;
-}
-.value {
-  font-weight: 800;
-  margin-top: 4px;
-  font-size: 15px;
-}
-.value.big {
-  font-size: 24px;
-}
-.value.green {
-  color: #22c55e;
-}
-.value.orange {
-  color: #f59e0b;
-}
-.value.red {
-  color: #ef4444;
-}
-.note {
-  color: var(--vp-c-text-2);
-  font-size: 12px;
-  margin-top: 4px;
-}
-
-.checklist-box {
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 10px;
-  padding: 16px;
-}
-.box-title {
-  font-weight: 700;
-  margin-bottom: 12px;
-  font-size: 14px;
-}
-.checks {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: 10px;
-}
-.check {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  font-size: 13px;
-}
-</style>
diff --git a/docs/.vitepress/theme/components/appendix/deployment/RollbackSwitchDemo.vue b/docs/.vitepress/theme/components/appendix/deployment/RollbackSwitchDemo.vue
deleted file mode 100644
index 515be02..0000000
--- a/docs/.vitepress/theme/components/appendix/deployment/RollbackSwitchDemo.vue
+++ /dev/null
@@ -1,194 +0,0 @@
-<!--
-  RollbackSwitchDemo.vue
-  发布策略：如何不关门装修
--->
-<template>
-  <div class="roll">
-    <div class="header">
-      <div class="title">发布策略对比</div>
-      <div class="subtitle">网站升级就像店铺装修，怎么才能不影响做生意？</div>
-    </div>
-
-    <div class="tabs">
-      <button
-        v-for="s in strategies"
-        :key="s.id"
-        :class="['tab', { active: current === s.id }]"
-        @click="current = s.id"
-      >
-        <span class="emoji">{{ s.emoji }}</span>
-        {{ s.label }}
-      </button>
-    </div>
-
-    <div class="stats">
-      <div class="card">
-        <div class="label">操作方式</div>
-        <div class="value">{{ flow }}</div>
-      </div>
-      <div class="card">
-        <div class="label">后悔药 (回滚时间)</div>
-        <div class="value">{{ rollbackTime }}</div>
-      </div>
-      <div class="card">
-        <div class="label">成本代价</div>
-        <div class="value">{{ cost }}</div>
-      </div>
-    </div>
-
-    <div class="analogy-section">
-      <div class="col">
-        <div class="section-title">🧐 通俗理解</div>
-        <div class="analogy-text">{{ analogy }}</div>
-      </div>
-      <div class="col">
-        <div class="section-title">⚠️ 风险点</div>
-        <div class="risk-text">{{ risk }}</div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed, ref } from 'vue'
-
-const strategies = [
-  { id: 'rolling', label: '滚动更新 (Rolling)', emoji: '🔄' },
-  { id: 'blue', label: '蓝绿发布 (Blue/Green)', emoji: '🔵🟢' },
-  { id: 'canary', label: '金丝雀发布 (Canary)', emoji: '🐦' }
-]
-
-const current = ref('rolling')
-
-const flow = computed(() => {
-  if (current.value === 'rolling') return '分批替换'
-  if (current.value === 'blue') return '全量切换'
-  return '按比例慢慢切'
-})
-
-const rollbackTime = computed(() => {
-  if (current.value === 'rolling') return '慢 (3-10 分钟)'
-  if (current.value === 'blue') return '极快 (秒级)'
-  return '快 (秒级)'
-})
-
-const cost = computed(() => {
-  if (current.value === 'rolling') return '低 (资源利用率高)'
-  if (current.value === 'blue') return '高 (需要双倍机器)'
-  return '中 (需要复杂网关)'
-})
-
-const analogy = computed(() => {
-  switch (current.value) {
-    case 'rolling':
-      return '就像餐厅换桌布。不关门，一桌一桌换。客人来了坐新桌子，还没换好的桌子先空着。'
-    case 'blue':
-      return '有钱任性。在隔壁新开一家一模一样的店。装修好了，直接把大门指路牌改到新店。'
-    case 'canary':
-      return '先让 VIP 客户去新包间体验一下。如果 VIP 没投诉，再把所有客人都请进去。'
-    default:
-      return ''
-  }
-})
-
-const risk = computed(() => {
-  if (current.value === 'rolling')
-    return '中间状态比较乱，有的客人看到新装修，有的看到旧装修。'
-  if (current.value === 'blue') return '太贵了！'
-  return '技术要求高，得有能识别 VIP 的“门童” (流量网关)。'
-})
-</script>
-
-<style scoped>
-.roll {
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 12px;
-  background: var(--vp-c-bg-soft);
-  padding: 20px;
-  margin: 20px 0;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.header .title {
-  font-weight: 800;
-  font-size: 18px;
-}
-.header .subtitle {
-  color: var(--vp-c-text-2);
-  font-size: 14px;
-}
-
-.tabs {
-  display: flex;
-  gap: 10px;
-  flex-wrap: wrap;
-}
-.tab {
-  padding: 8px 16px;
-  border-radius: 8px;
-  border: 1px solid var(--vp-c-divider);
-  background: var(--vp-c-bg);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 14px;
-  transition: all 0.2s;
-}
-.tab.active {
-  border-color: var(--vp-c-brand);
-  color: var(--vp-c-brand);
-  background: var(--vp-c-bg-soft);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-}
-
-.stats {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 12px;
-}
-.card {
-  background: var(--vp-c-bg);
-  border: 1px dashed var(--vp-c-divider);
-  border-radius: 10px;
-  padding: 12px;
-}
-.label {
-  color: var(--vp-c-text-2);
-  font-size: 12px;
-}
-.value {
-  font-weight: 800;
-  margin-top: 4px;
-  font-size: 15px;
-}
-
-.analogy-section {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-  gap: 12px;
-}
-.col {
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 10px;
-  padding: 16px;
-}
-.section-title {
-  font-weight: 700;
-  margin-bottom: 8px;
-  font-size: 14px;
-}
-.analogy-text {
-  font-size: 14px;
-  line-height: 1.6;
-  color: var(--vp-c-text-1);
-}
-.risk-text {
-  font-size: 14px;
-  line-height: 1.6;
-  color: #ef4444;
-}
-</style>
diff --git a/docs/.vitepress/theme/components/appendix/deployment/ServerSizerDemo.vue b/docs/.vitepress/theme/components/appendix/deployment/ServerSizerDemo.vue
deleted file mode 100644
index 39ee174..0000000
--- a/docs/.vitepress/theme/components/appendix/deployment/ServerSizerDemo.vue
+++ /dev/null
@@ -1,246 +0,0 @@
-<!--
-  ServerSizerDemo.vue
-  服务器选购指南：租房隐喻
--->
-<template>
-  <div class="sizer">
-    <div class="header">
-      <div class="title">服务器选购指南</div>
-      <div class="subtitle">不花冤枉钱，够用就好</div>
-    </div>
-
-    <div class="controls">
-      <div class="control">
-        <label>你的业务规模？</label>
-        <div class="range-box">
-          <input
-            type="range"
-            min="0"
-            max="3"
-            step="1"
-            v-model.number="scaleIndex"
-          />
-          <div class="scale-labels">
-            <span>个人博客</span>
-            <span>初创官网</span>
-            <span>小型 App</span>
-            <span>中型平台</span>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="result-card">
-      <div class="main-rec">
-        <div class="icon">{{ recommendation.icon }}</div>
-        <div class="details">
-          <div class="rec-title">{{ recommendation.title }}</div>
-          <div class="rec-spec">{{ recommendation.spec }}</div>
-        </div>
-      </div>
-
-      <div class="analogy-box">
-        <p><strong>🤔 通俗理解：</strong></p>
-        <p>{{ recommendation.analogy }}</p>
-      </div>
-
-      <div class="specs-grid">
-        <div class="spec-item">
-          <span class="label">带宽 (水管)</span>
-          <span class="val">{{ recommendation.bandwidth }}</span>
-        </div>
-        <div class="spec-item">
-          <span class="label">预算估算</span>
-          <span class="val">{{ recommendation.cost }}</span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed, ref } from 'vue'
-
-const scaleIndex = ref(1)
-
-const levels = [
-  {
-    title: '入门级 (Entry)',
-    spec: '1核 1G ~ 2G',
-    icon: '🚲',
-    bandwidth: '1 Mbps',
-    cost: '¥50~99 / 年 (活动价)',
-    analogy: '就像租了个单间。放个博客、跑个脚本完全够用。人多了会挤不动。'
-  },
-  {
-    title: '标准级 (Standard)',
-    spec: '2核 4G',
-    icon: '🚗',
-    bandwidth: '3~5 Mbps',
-    cost: '¥300 / 年',
-    analogy:
-      '就像租了个两居室。正经跑个公司官网、小程序后端没问题。大多数人的首选。'
-  },
-  {
-    title: '专业级 (Pro)',
-    spec: '4核 8G',
-    icon: '🏎️',
-    bandwidth: '5~10 Mbps',
-    cost: '¥1000+ / 年',
-    analogy:
-      '就像租了个大平层办公室。能抗住几千人同时在线，跑复杂的计算任务也不虚。'
-  },
-  {
-    title: '企业级 (Enterprise)',
-    spec: '8核 16G + 负载均衡',
-    icon: '✈️',
-    bandwidth: '按量付费',
-    cost: '¥5000+ / 年',
-    analogy:
-      '这已经不是租房了，是包下了一整层楼。通常需要多台机器配合，专人维护。'
-  }
-]
-
-const recommendation = computed(() => levels[scaleIndex.value])
-</script>
-
-<style scoped>
-.sizer {
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 12px;
-  background: var(--vp-c-bg-soft);
-  padding: 20px;
-  margin: 20px 0;
-}
-
-.header {
-  margin-bottom: 20px;
-}
-.header .title {
-  font-weight: 800;
-  font-size: 18px;
-}
-.header .subtitle {
-  color: var(--vp-c-text-2);
-  font-size: 14px;
-}
-
-.controls {
-  margin-bottom: 20px;
-}
-
-.control label {
-  font-weight: 600;
-  font-size: 14px;
-  display: block;
-  margin-bottom: 10px;
-}
-
-.range-box {
-  background: var(--vp-c-bg);
-  padding: 16px;
-  border-radius: 10px;
-  border: 1px solid var(--vp-c-divider);
-}
-
-input[type='range'] {
-  width: 100%;
-  margin-bottom: 10px;
-}
-
-.scale-labels {
-  display: flex;
-  justify-content: space-between;
-  font-size: 12px;
-  color: var(--vp-c-text-2);
-}
-
-.result-card {
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-brand);
-  border-radius: 12px;
-  padding: 20px;
-  position: relative;
-  overflow: hidden;
-}
-
-.result-card::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 4px;
-  height: 100%;
-  background: var(--vp-c-brand);
-}
-
-.main-rec {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  margin-bottom: 16px;
-}
-
-.icon {
-  font-size: 40px;
-  background: var(--vp-c-bg-soft);
-  width: 64px;
-  height: 64px;
-  border-radius: 12px;
-  display: grid;
-  place-items: center;
-}
-
-.rec-title {
-  font-weight: 800;
-  font-size: 18px;
-  color: var(--vp-c-brand);
-}
-
-.rec-spec {
-  font-size: 14px;
-  color: var(--vp-c-text-1);
-  margin-top: 4px;
-}
-
-.analogy-box {
-  background: var(--vp-c-bg-soft);
-  padding: 12px;
-  border-radius: 8px;
-  font-size: 14px;
-  line-height: 1.5;
-  margin-bottom: 16px;
-}
-
-.analogy-box p {
-  margin: 0;
-}
-
-.analogy-box strong {
-  color: var(--vp-c-text-1);
-}
-
-.specs-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 12px;
-  border-top: 1px dashed var(--vp-c-divider);
-  padding-top: 16px;
-}
-
-.spec-item {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.spec-item .label {
-  font-size: 12px;
-  color: var(--vp-c-text-2);
-}
-
-.spec-item .val {
-  font-weight: 600;
-  font-size: 14px;
-}
-</style>
diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
index f9c4f97..bfc4c03 100644
--- a/docs/.vitepress/theme/index.js
+++ b/docs/.vitepress/theme/index.js
@@ -102,29 +102,13 @@ import SubnetCalculator from './components/appendix/web-basics/SubnetCalculator.
 import NetworkTroubleshooting from './components/appendix/web-basics/NetworkTroubleshooting.vue'
 
 // Deployment appendix components
-import DeploymentArchitecture from './components/appendix/deployment/DeploymentArchitecture.vue'
-import DnsFlowDemo from './components/appendix/deployment/DnsFlowDemo.vue'
-import ServerSizerDemo from './components/appendix/deployment/ServerSizerDemo.vue'
-import HttpsNginxDemo from './components/appendix/deployment/HttpsNginxDemo.vue'
-import CdnCacheDemo from './components/appendix/deployment/CdnCacheDemo.vue'
-import CicdPipelineDemo from './components/appendix/deployment/CicdPipelineDemo.vue'
-import RollbackSwitchDemo from './components/appendix/deployment/RollbackSwitchDemo.vue'
-import ObservabilityBackupDemo from './components/appendix/deployment/ObservabilityBackupDemo.vue'
 import DeploymentOverviewDemo from './components/appendix/deployment/DeploymentOverviewDemo.vue'
 import DeploymentBuildDemo from './components/appendix/deployment/DeploymentBuildDemo.vue'
 import DeploymentServerDemo from './components/appendix/deployment/DeploymentServerDemo.vue'
-import DeploymentSSHDemo from './components/appendix/deployment/DeploymentSSHDemo.vue'
-import DeploymentEnvironmentDemo from './components/appendix/deployment/DeploymentEnvironmentDemo.vue'
-import DeploymentNginxDemo from './components/appendix/deployment/DeploymentNginxDemo.vue'
-import DeploymentLbDemo from './components/appendix/deployment/DeploymentLbDemo.vue'
-import DeploymentMonitorDemo from './components/appendix/deployment/DeploymentMonitorDemo.vue'
-import DeploymentBackupDemo from './components/appendix/deployment/DeploymentBackupDemo.vue'
-import DeploymentTroubleshootDemo from './components/appendix/deployment/DeploymentTroubleshootDemo.vue'
-import DeploymentChecklistDemo from './components/appendix/deployment/DeploymentChecklistDemo.vue'
 import DeploymentDnsDemo from './components/appendix/deployment/DeploymentDnsDemo.vue'
 import DeploymentHttpsDemo from './components/appendix/deployment/DeploymentHttpsDemo.vue'
-import DeploymentCdnDemo from './components/appendix/deployment/DeploymentCdnDemo.vue'
 import DeploymentCicdDemo from './components/appendix/deployment/DeploymentCicdDemo.vue'
+import DeploymentMonitorDemo from './components/appendix/deployment/DeploymentMonitorDemo.vue'
 import CssBoxModel from './components/appendix/web-basics/CssBoxModel.vue'
 import CssFlexbox from './components/appendix/web-basics/CssFlexbox.vue'
 import CssLayoutDemo from './components/appendix/web-basics/CssLayoutDemo.vue'
@@ -583,29 +567,13 @@ export default {
     app.component('SubnetCalculator', SubnetCalculator)
     app.component('NetworkTroubleshooting', NetworkTroubleshooting)
     // Deployment appendix
-    app.component('DeploymentArchitecture', DeploymentArchitecture)
-    app.component('DnsFlowDemo', DnsFlowDemo)
-    app.component('ServerSizerDemo', ServerSizerDemo)
-    app.component('HttpsNginxDemo', HttpsNginxDemo)
-    app.component('CdnCacheDemo', CdnCacheDemo)
-    app.component('CicdPipelineDemo', CicdPipelineDemo)
-    app.component('RollbackSwitchDemo', RollbackSwitchDemo)
-    app.component('ObservabilityBackupDemo', ObservabilityBackupDemo)
     app.component('DeploymentOverviewDemo', DeploymentOverviewDemo)
     app.component('DeploymentBuildDemo', DeploymentBuildDemo)
     app.component('DeploymentServerDemo', DeploymentServerDemo)
-    app.component('DeploymentSSHDemo', DeploymentSSHDemo)
-    app.component('DeploymentEnvironmentDemo', DeploymentEnvironmentDemo)
-    app.component('DeploymentNginxDemo', DeploymentNginxDemo)
-    app.component('DeploymentLbDemo', DeploymentLbDemo)
-    app.component('DeploymentMonitorDemo', DeploymentMonitorDemo)
-    app.component('DeploymentBackupDemo', DeploymentBackupDemo)
-    app.component('DeploymentTroubleshootDemo', DeploymentTroubleshootDemo)
-    app.component('DeploymentChecklistDemo', DeploymentChecklistDemo)
     app.component('DeploymentDnsDemo', DeploymentDnsDemo)
     app.component('DeploymentHttpsDemo', DeploymentHttpsDemo)
-    app.component('DeploymentCdnDemo', DeploymentCdnDemo)
     app.component('DeploymentCicdDemo', DeploymentCicdDemo)
+    app.component('DeploymentMonitorDemo', DeploymentMonitorDemo)
     app.component('CssBoxModel', CssBoxModel)
     app.component('CssFlexbox', CssFlexbox)
     app.component('CssLayoutDemo', CssLayoutDemo)
diff --git a/docs/zh-cn/appendix/deployment.md b/docs/zh-cn/appendix/deployment.md
index 719b48a..b150a37 100644
--- a/docs/zh-cn/appendix/deployment.md
+++ b/docs/zh-cn/appendix/deployment.md
@@ -1,373 +1,216 @@
-# 服务上线之旅：从代码到用户眼中的网页
+# 服务上线之旅
 
-> **学习指南**：本章节带你完整体验"一个服务上线"的全过程。我们不讲复杂的运维术语，而是通过小明的咖啡店网站上线故事，让你看懂代码是怎么变成用户能访问的网站的。
+::: tip 🎯 核心问题
+**代码在本地跑得好好的，怎么让全世界的人都能访问？**
+:::
 
 ---
 
-## 0. 引言：小明的咖啡店网站要上线了
+## 1. 为什么要"服务上线"？
 
-小明是个前端开发，他用 Vue 写了一个漂亮的咖啡店网站：可以看菜单、在线下单、查看订单状态。
-
-网站在**小明的电脑上**跑得好好的，但是问题来了：
-
-> **怎么让全世界的人都能访问这个网站？**
-
-这就像小明在家做了一桌子菜，现在要开餐厅让所有人来吃。这可不是简单地"把菜端出去"那么简单，他要经历一整套完整的流程。
+想象小明在家做了一桌子菜，现在要开餐厅让所有人来吃。这可不是"把菜端出去"那么简单。
 
 <DeploymentOverviewDemo />
 
-**服务上线就是一场"搬家+开业"的大工程**：
-
-1. **打包行李** → 把代码打包成服务器能懂的格式
-2. **找房子** → 选择服务器（云服务器/VPS）
-3. **搬家** → 把代码部署到服务器
-4. **装修** → 配置运行环境
-5. **挂牌** → 配置域名和DNS
-6. **安防** → 安装HTTPS证书
-7. **招服务员** → 配置负载均衡
-8. **开分店** → 配置CDN加速
-9. **自动化** → 建立CI/CD流程
-10. **守夜人** → 监控和备份
-
-让我们跟着小明，一步一步完成这场"上线之旅"！
+**服务上线是一场"搬家+开业"的大工程**：
+1. **构建** → 打包代码成服务器能懂的格式
+2. **服务器** → 租一台永远不关机的电脑
+3. **部署** → 把代码上传到服务器
+4. **环境** → 配置 Nginx、Node.js
+5. **域名** → 配置 DNS，让用户能找到
+6. **HTTPS** → 安装证书，保护数据安全
+7. **CI/CD** → 自动化部署，解放双手
+8. **监控** → 盯控和备份，守住底线
 
 ---
 
-## 1. 打包行李：把代码变成"可携带的包裹"
+## 2. 构建：把代码变成"可携带的包裹"
 
-小明的网站代码在他电脑上是这样散落的：
+### 2.1 为什么要构建？
 
-```
-my-coffee-shop/
-├── src/              # 源代码
-│   ├── App.vue      # Vue 组件
-│   ├── main.js      # 入口文件
-│   └── assets/      # 图片、样式
-├── package.json     # 依赖清单
-└── vite.config.js   # 构建配置
-```
-
-这些源代码浏览器**看不懂**。浏览器只认识：
-- HTML 文件（网页骨架）
-- CSS 文件（网页样式）
-- JS 文件（网页逻辑）
-
-### 1.1 为什么要"构建"？
-
-想象小明做了一桌子菜，现在要打包外卖：
+浏览器只认识 HTML/CSS/JS，不认识 Vue 组件。**构建（Build）就是"打包外卖"的过程**。
 
 <DeploymentBuildDemo />
 
-**构建（Build）就是"打包外卖"的过程**：
-
-1. **翻译**：把 Vue 组件翻译成浏览器懂的 HTML/CSS/JS
-2. **压缩**：把代码体积缩小（省流量、加载快）
-3. **合并**：把几十个小文件合成几个大包（减少请求）
-4. **哈希**：给文件名加上指纹（`app.abc123.js`），浏览器缓存友好
-
-运行构建命令：
+**构建做了什么**：
+- **翻译**：Vue → HTML/CSS/JS
+- **压缩**：减小代码体积（省流量、加载快）
+- **合并**：多个文件 → 几个大包（减少请求）
+- **哈希**：文件名加指纹（`app.abc123.js`），缓存友好
 
 ```bash
 npm run build
 ```
 
-构建完成后会生成一个 `dist` 文件夹：
-
-```
-dist/
-├── index.html                 # 主页面
-├── assets/
-│   ├── app.abc123.js         # 打包后的JS（278KB）
-│   ├── app.abc123.css        # 打包后的CSS（45KB）
-│   └── logo.789xyz.png       # 优化后的图片
-```
-
-这个 `dist` 文件夹，就是小明的"行李箱"，里面装着所有要搬去服务器的东西。
-
 ---
 
-## 2. 找房子：选择服务器
+## 3. 服务器：找房子
 
-代码打包好了，现在要找个"房子"住。这个房子就是**服务器**。
-
-### 2.1 服务器是什么？
+### 3.1 服务器是什么？
 
 服务器 = **一台永远不关机、连着互联网的电脑**
 
 <DeploymentServerDemo />
 
-### 2.2 怎么选服务器？
+### 3.2 怎么选服务器？
 
-小明有几个选择：
+::: tip 💡 选型建议
+- **个人项目/学习**：1核2G，约¥100-200/年
+- **小型商业项目**：2核4G，约¥500/年
+- **中型项目**：4核8G，约¥1000+/年
+:::
 
 | 方案 | 类比 | 优点 | 缺点 | 价格 |
 |------|------|------|------|------|
-| **虚拟主机** | 租个床位 | 便宜、简单 | 性能差、不能随便装软件 | ¥50-200/年 |
-| **云服务器** | 租整套公寓 | 自由度高、可扩展 | 需要自己配置 | ¥100-1000/年 |
-| **容器服务** | 租豪华酒店 | 自动化管理 | 价格高 | ¥500+/月 |
-| **Serverless** | 租用会议室 | 用多少付多少 | 冷启动慢 | 按量计费 |
+| 虚拟主机 | 租床位 | 便宜、简单 | 性能差 | ¥50-200/年 |
+| 云服务器 | 租公寓 | 自由度高、可扩展 | 需自己配置 | ¥100-1000/年 |
+| Vercel | 租会议室 | 零配置、免费额度 | 受平台限制 | 免费/按量 |
 
-**小明的选择**：云服务器（2核4G，约¥500/年）
-
-选配置的误区：
-
-- ❌ **太小了**：1核1G，跑个Hello World还行，稍微多点人就卡死
-- ❌ **太大了**：一上来就8核16G，每天10个访问，纯属浪费
-- ✅ **刚刚好**：2核4G起步，不够了再升级（云服务器支持弹性伸缩）
-
-### 2.3 主流云厂商
+### 3.3 主流云厂商
 
 | 厂商 | 特点 | 适合人群 |
 |------|------|---------|
-| **阿里云** | 国内访问快、文档多 | 国内业务首选 |
-| **腾讯云** | 价格亲民、微信生态 | 小程序开发者 |
-| **AWS** | 全球覆盖、功能最强 | 国际业务 |
-| **Vercel** | 免费额度、零配置 | 前端项目快速上线 |
+| 阿里云 | 国内访问快 | 国内业务 |
+| 腾讯云 | 价格亲民 | 小程序开发者 |
+| Vercel | 零配置、免费 | 前端项目 |
 
 ---
 
-## 3. 搬家：把代码放到服务器上
+## 4. 部署：搬家
 
-服务器租好了，现在要把代码"搬"过去。
+### 4.1 连接服务器
 
-### 3.1 怎么连接服务器？
-
-服务器在遥远的机房，怎么操作？用 **SSH（远程连接工具）**：
+用 **SSH（远程连接工具）**：
 
 ```bash
-# 连接到服务器
 ssh root@123.45.67.89
-
-# 输入密码后，你就"进入"服务器了
-# 后面敲的命令，都是在服务器上执行
+# 输入密码后，你就在服务器上了
 ```
 
-<DeploymentSSHDemo />
+### 4.2 部署方式
 
-### 3.2 部署方式对比
+| 方式 | 优点 | 缺点 |
+|------|------|------|
+| FTP上传 | 简单直观 | 容易漏传 |
+| Git拉取 | 快、可追溯 | 需配置Git |
 
-| 方式 | 类比 | 优点 | 缺点 |
-|------|------|------|------|
-| **FTP上传** | 自己扛箱子搬家 | 简单直观 | 容易漏传文件、慢 |
-| **Git拉取** | 让快递公司送货 | 快、可追溯 | 需要配置Git |
-| **Docker容器** | 用搬家集装箱 | 环境一致、易迁移 | 需要学习Docker |
-
-**推荐方式**：Git + Build Script
-
-小明用 Git 把代码推送到 GitHub，然后让服务器自己拉取最新代码：
+**推荐**：Git + Build Script
 
 ```bash
-# 服务器上执行的脚本
-cd /var/www/coffee-shop
-git pull origin main          # 拉取最新代码
-npm install                   # 安装依赖
-npm run build                 # 构建项目
-pm2 restart all               # 重启服务
+cd /var/www/my-site
+git pull origin main    # 拉取最新代码
+npm install              # 安装依赖
+npm run build            # 构建项目
+pm2 restart all         # 重启服务
 ```
 
----
-
-## 4. 装修：配置运行环境
-
-代码搬过去了，但是服务器还只是个"空房子"，需要"装修"才能住人。
-
-### 4.1 需要装什么？
-
-<DeploymentEnvironmentDemo />
-
-**最小化安装脚本**（Ubuntu系统）：
+### 4.3 环境配置（Ubuntu）
 
+::: details 点击展开：最小化安装脚本
 ```bash
-# 1. 更新系统
+# 更新系统
 sudo apt update && sudo apt upgrade -y
 
-# 2. 安装 Nginx（Web服务器，负责接待客人）
+# 安装 Nginx（Web服务器）
 sudo apt install -y nginx
 
-# 3. 安装 Node.js（运行JavaScript代码）
+# 安装 Node.js 18
 curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
 sudo apt install -y nodejs
 
-# 4. 安装 PM2（进程管家，防止程序崩溃）
+# 安装 PM2（进程管家）
 sudo npm install -g pm2
 
-# 5. 安装 Git（拉代码用）
+# 安装 Git
 sudo apt install -y git
 ```
+:::
 
-### 4.2 Nginx 反向代理是什么？
-
-小明的程序跑在 `3000` 端口，但用户习惯访问 `80`（HTTP）或 `443`（HTTPS）端口。
-
-**Nginx 就像个"门童"**：
-- 守在 80/443 端口接待客人
-- 把请求转给后端的 3000 端口
-- 把结果返回给用户
-
-<DeploymentNginxDemo />
-
-**Nginx 配置示例**：
+**Nginx 反向代理**：把 80 端口请求转发到 3000 端口
 
 ```nginx
 server {
     listen 80;
-    server_name coffee.example.com;
+    server_name example.com;
 
-    # 所有请求都转发给 3000 端口
     location / {
         proxy_pass http://localhost:3000;
         proxy_http_version 1.1;
-        proxy_set_header Upgrade $http_upgrade;
-        proxy_set_header Connection 'upgrade';
         proxy_set_header Host $host;
-        proxy_cache_bypass $http_upgrade;
     }
 }
 ```
 
 ---
 
-## 5. 挂牌：配置域名和 DNS
-
-房子装修好了，现在要挂个牌子，让客人能找到你。这个牌子就是**域名**。
+## 5. 域名和 DNS：挂牌
 
 ### 5.1 域名是什么？
 
-域名 = **网站的门牌号**
-
 - IP地址（123.45.67.89）太难记
-- 域名（coffee.example.com）好记
+- 域名（example.com）好记
 
-**DNS（域名解析）** = **电话本**，负责把域名翻译成IP
+**DNS（域名解析）** = **电话本**，把域名翻译成IP
 
 <DeploymentDnsDemo />
 
-### 5.2 域名配置步骤
+### 5.2 配置步骤
 
-1. **买域名**：在阿里云/腾讯云/Namecheap购买（¥50-100/年）
-2. **配置DNS记录**：告诉世界"我的网站在这个IP"
-
-常用记录类型：
+1. **买域名**：阿里云/腾讯云（¥50-100/年）
+2. **配置DNS**：
 
 | 记录类型 | 用途 | 示例 |
 |---------|------|------|
-| **A记录** | 直接指向IP | `coffee.example.com` → `123.45.67.89` |
-| **CNAME** | 指向另一个域名 | `www.coffee.example.com` → `coffee.example.com` |
+| A记录 | 指向IP | `example.com` → `123.45.67.89` |
+| CNAME | 指向域名 | `www.example.com` → `example.com` |
 
-**注意事项**：
-- ⏰ DNS生效慢：全球同步需要几分钟到几小时
-- 📝 TTL值：设置小一点（如600秒），修改后生效快
+::: tip ⚠️ 注意
+- DNS生效慢：全球同步需要几分钟到几小时
+- TTL值：设置小一点（如600秒），修改后生效快
+:::
 
 ---
 
-## 6. 安防：安装 HTTPS 证书
-
-房子好了，牌子挂了，现在要装门锁，保证安全。
+## 6. HTTPS：安防
 
 ### 6.1 为什么需要 HTTPS？
 
 <DeploymentHttpsDemo />
 
-**HTTP 的问题**：数据"裸奔"，谁都能看见
-
-**HTTPS 的好处**：数据加密，黑客看见也是乱码
+- **HTTP**：数据"裸奔"，谁都能看见
+- **HTTPS**：数据加密，黑客看见也是乱码
 
 ### 6.2 怎么搞定 HTTPS？
 
-不用花钱买证书！用 **Let's Encrypt（免费证书）** + **Certbot（自动工具）**
+用 **Let's Encrypt（免费证书）** + **Certbot（自动工具）**
 
 ```bash
-# 1. 安装 Certbot
+# 安装 Certbot
 sudo apt install -y certbot python3-certbot-nginx
 
-# 2. 自动申请证书并配置 Nginx
-sudo certbot --nginx -d coffee.example.com
+# 自动申请证书并配置 Nginx
+sudo certbot --nginx -d example.com
 
-# 3. 证书自动续期（Certbot会自动设置）
+# 证书自动续期
 sudo certbot renew --dry-run
 ```
 
-完成后，访问网站会看到小锁🔒，HTTPS 就搞定了！
+完成后访问网站会看到🔒小锁。
 
 ---
 
-## 7. 招服务员：负载均衡
+## 7. CI/CD：自动化
 
-小明的咖啡店火了，一个人接待不过来，怎么办？招更多服务员！
-
-### 7.1 什么是负载均衡？
-
-<DeploymentLbDemo />
-
-**负载均衡器（Load Balancer）** = **餐厅领班**
-
-- 看着后面N个服务器（服务员）
-- 把客人分配到最空闲的那个
-- 某个服务器挂了，自动把流量分给其他的
-
-### 7.2 什么时候需要负载均衡？
-
-| 访问量 | 服务器配置 | 是否需要LB |
-|--------|-----------|-----------|
-| <100/天 | 1核2G | ❌ 不需要 |
-| 1000-10000/天 | 2核4G | ❌ 不需要 |
-| >10000/天 | 4核8G | ✅ 建议配置 |
-
----
-
-## 8. 开分店：CDN 加速
-
-小明在全国都有客人，北京的服务器响应纽约的请求太慢了。怎么办？开分店！
-
-### 8.1 什么是 CDN？
-
-**CDN（内容分发网络）** = **全球连锁仓库**
-
-<DeploymentCdnDemo />
-
-**CDN 的工作原理**：
-
-1. 你把图片、CSS、JS等"不变的东西"上传到CDN
-2. CDN把这些文件复制到全球各地的节点
-3. 用户访问时，CDN自动从最近的节点给文件
-
-**效果**：
-- 北京用户 → 北京节点（10ms）
-- 纽约用户 → 纽约节点（15ms）
-- 伦敦用户 → 伦敦节点（20ms）
-
-### 8.2 怎么配置CDN？
-
-1. **开通CDN服务**：阿里云CDN/腾讯云CDN/Cloudflare
-2. **添加域名**：填写你的网站域名
-3. **配置源站**：告诉CDN你的服务器IP
-4. **刷新缓存**：文件更新后，手动刷新CDN缓存
-
----
-
-## 9. 自动化：建立 CI/CD 流程
-
-每次更新代码都要手动SSH到服务器、拉代码、构建、重启，太累！自动化吧！
-
-### 9.1 什么是 CI/CD？
+### 7.1 什么是 CI/CD？
 
 <DeploymentCicdDemo />
 
-**CI（持续集成）** = 自动化测试
+- **CI（持续集成）**：每次提交自动测试
+- **CD（持续部署）**：测试通过自动部署
 
-- 每次提交代码自动运行测试
-- 保证代码质量
+### 7.2 GitHub Actions 示例
 
-**CD（持续部署）** = 自动化上线
-
-- 代码通过测试后自动部署
-- 一键上线，安全可靠
-
-### 9.2 怎么实现 CI/CD？
-
-**推荐：GitHub Actions**
-
-在项目根目录创建 `.github/workflows/deploy.yml`：
+在 `.github/workflows/deploy.yml`：
 
 ```yaml
 name: Deploy to Production
@@ -387,186 +230,154 @@ jobs:
         with:
           node-version: '18'
 
-      - name: Install dependencies
-        run: npm ci
+      - name: Install & Build
+        run: |
+          npm ci
+          npm run build
 
-      - name: Build
-        run: npm run build
-
-      - name: Deploy to server
+      - name: Deploy
         uses: appleboy/ssh-action@master
         with:
           host: ${{ secrets.SERVER_HOST }}
           username: root
           key: ${{ secrets.SSH_KEY }}
           script: |
-            cd /var/www/coffee-shop
+            cd /var/www/my-site
             git pull origin main
             npm install
             npm run build
             pm2 restart all
 ```
 
-**工作流程**：
-1. 小明提交代码到 GitHub
-2. GitHub Actions 自动触发
-3. 自动构建 + 自动部署
-4. 几分钟后，新版本就上线了！
+---
+
+::: details 📖 高级主题：CDN 和负载均衡
+
+**CDN（内容分发网络）**：全球连锁仓库
+
+- 把图片、CSS、JS等静态资源上传到CDN
+- CDN复制到全球节点
+- 用户访问时从最近节点获取
+
+**效果**：北京用户→北京节点（10ms），纽约用户→纽约节点（15ms）
+
+**负载均衡（Load Balancer）**：餐厅领班
+
+- 看着N个服务器
+- 把客人分配到最空闲的那个
+- 某个服务器挂了，自动切换
+
+**什么时候需要**？
+- 访问量 >10000/天
+- 单台服务器 CPU/内存 >70%
+
+:::
 
 ---
 
-## 10. 守夜人：监控和备份
+## 8. 监控和备份：守夜人
 
-网站上线了，但工作还没完。就像开店后需要保安和账房，网站也需要**监控**和**备份**。
-
-### 10.1 监控：当个好管家
+### 8.1 监控什么？
 
 <DeploymentMonitorDemo />
 
-**需要监控什么？**
+| 指标 | 正常范围 |
+|------|---------|
+| CPU使用率 | <70% |
+| 内存使用率 | <80% |
+| 磁盘空间 | <80% |
+| 响应时间 | <2秒 |
+| 错误率 | <1% |
 
-| 指标 | 说明 | 正常范围 |
-|------|------|---------|
-| **CPU使用率** | 服务器"脑子"有多忙 | <70% |
-| **内存使用率** | 服务器"记忆"占多少 | <80% |
-| **磁盘空间** | 硬盘还剩多少 | <80% |
-| **响应时间** | 网页加载多慢 | <2秒 |
-| **错误率** | 有多少请求失败 | <1% |
+### 8.2 备份策略
 
-**监控工具推荐**：
-- **基础监控**：云厂商自带的监控（阿里云云监控/腾讯云云监控）
-- **APM监控**：New Relic / Datadog（收费，功能强大）
-- **开源方案**：Prometheus + Grafana（免费，需自建）
-
-### 10.2 备份：最后的安全网
-
-**数据是无价的**！一定要定期备份。
-
-<DeploymentBackupDemo />
-
-**备份三要素**：
-
-1. **定期备份**：每天凌晨自动备份（用户访问少的时候）
+::: tip 💾 备份三要素
+1. **定期备份**：每天凌晨自动备份
 2. **多地存储**：本地 + 异地（防止单点故障）
-3. **定期恢复测试**：备份了要确保能恢复
-
-**备份策略**：
+3. **定期恢复测试**：确保备份能恢复
+:::
 
 ```bash
 # 每天自动备份数据库
-0 2 * * * /usr/bin/mysqldump -u root -p密码 coffee_shop > /backup/db_$(date +\%Y\%m\%d).sql
+0 2 * * * /usr/bin/mysqldump -u root -p密码 my_db > /backup/db_$(date +\%Y\%m\%d).sql
 
 # 保留最近7天的备份
 find /backup -name "db_*.sql" -mtime +7 -delete
 
-# 自动上传到云存储（如阿里云OSS）
-/usr/bin/ossutil cp /backup/db_$(date +\%Y\%m\%d).sql oss://my-backup/db/
+# 自动上传到云存储
+/usr/bin/ossutil cp /backup/db_$(date +\%Y\%m\%d).sql oss://my-backup/
 ```
 
 ---
 
-## 11. 故障排查：遇到问题怎么办？
-
-网站出问题了，别慌，按这个流程排查：
-
-### 11.1 排查流程图
-
-<DeploymentTroubleshootDemo />
-
-### 11.2 常见问题速查表
+## 9. 常见问题速查
 
 | 现象 | 可能原因 | 怎么办 |
 |------|---------|--------|
-| **网站打不开** | 域名没解析？服务器挂了？ | `ping 域名` 看通不通<br>`ssh` 连不上就是服务器挂了 |
-| **404 Not Found** | Nginx配置错了？文件路径不对？ | 检查 `nginx -t` 配置<br>看看 `root` 路径对不对 |
-| **502 Bad Gateway** | 后端服务挂了？端口没开？ | `pm2 list` 看服务在不在<br>`netstat -tlnp` 看端口监听 |
-| **HTTPS证书报错** | 证书过期了？域名不匹配？ | `certbot renew` 续期<br>检查证书域名是否正确 |
-| **更新不生效** | 浏览器缓存？CDN缓存？ | Ctrl+F5 强制刷新<br>去CDN控制台"刷新缓存" |
-| **很慢** | 服务器性能不够？CDN没配置？ | 查监控看CPU/内存<br>静态资源上CDN |
+| 网站打不开 | 域名没解析？服务器挂了？ | `ping 域名`看通不通<br>`ssh`连不上就是服务器挂了 |
+| 404 Not Found | Nginx配置错了？路径不对？ | `nginx -t`检查配置 |
+| 502 Bad Gateway | 后端服务挂了？端口没开？ | `pm2 list`看服务状态 |
+| HTTPS证书报错 | 证书过期？域名不匹配？ | `certbot renew`续期 |
+| 更新不生效 | 浏览器缓存？CDN缓存？ | Ctrl+F5强制刷新<br>去CDN控制台"刷新缓存" |
+| 很慢 | 性能不够？CDN没配置？ | 查监控看CPU/内存<br>静态资源上CDN |
 
 ---
 
-## 12. 上线前最后检查
+## 10. 上线前检查清单
 
-小明终于要正式开业了！在按下"发布"按钮前，再检查一遍：
-
-<DeploymentChecklistDemo />
-
-### 最终检查清单
-
-**基础检查**：
-- [ ] 代码已经构建（`npm run build`）
+::: details ✅ 基础检查
+- [ ] 代码已构建（`npm run build`）
 - [ ] 服务器环境配置完成（Nginx + Node.js）
 - [ ] 域名解析正确（能ping通）
 - [ ] HTTPS证书正常（有🔒小锁）
+:::
 
-**性能检查**：
-- [ ] 首屏加载时间 <2秒
-- [ ] 图片已经压缩优化
-- [ ] CDN配置完成
-- [ ] 开启了Gzip压缩
-
-**安全检查**：
+::: details 🔒 安全检查
 - [ ] 数据库密码不是弱密码
 - [ ] 敏感信息没写在代码里
-- [ ] 开启了防火墙（只开必要的端口）
+- [ ] 开启了防火墙（只开必要端口）
 - [ ] 配置了SQL注入防护
+:::
 
-**运维检查**：
+::: details 🛡️ 运维检查
 - [ ] 监控告警配置完成
 - [ ] 日志正常记录
 - [ ] 自动备份已设置
 - [ ] CI/CD流程测试通过
-
-**应急预案**：
-- [ ] 准备了回滚方案
-- [ ] 有故障联系机制
-- [ ] 备份恢复测试通过
+:::
 
 ---
 
-## 13. 总结：服务上线的关键点
-
-小明的咖啡店网站终于上线了！让我们回顾一下整个过程：
+## 总结
 
 ### 核心流程
 
-1. **构建**：把代码打包成浏览器懂的格式
-2. **部署**：把代码放到服务器上
-3. **配置**：Nginx、域名、HTTPS
-4. **优化**：CDN、负载均衡
-5. **自动化**：CI/CD解放双手
-6. **保障**：监控和备份守住底线
+1. **构建** → 代码打包成浏览器懂的格式
+2. **部署** → 代码放到服务器上
+3. **配置** → Nginx、域名、HTTPS
+4. **优化** → CDN、负载均衡（高级）
+5. **自动化** → CI/CD解放双手
+6. **保障** → 监控和备份守住底线
 
 ### 关键原则
 
 | 原则 | 说明 |
 |------|------|
-| **小步快跑** | 先上线MVP（最小可用产品），再逐步完善 |
+| **小步快跑** | 先上线MVP，再逐步完善 |
 | **自动化优先** | 能自动的别手动，减少人为失误 |
 | **监控先行** | 先建监控，再上功能 |
-| **备份为王** | 数据无价，备份是最后的防线 |
+| **备份为王** | 数据无价，备份是最后防线 |
 | **安全第一** | HTTPS、防火墙、弱密码检查，一个都不能少 |
 
 ### 学习路线
 
-**入门**（第1天）：
-- 用 Vercel/Netlify 免费部署一个静态网页
+**入门（第1天）**：用 Vercel 免费部署静态网页
 
-**进阶**（第1周）：
-- 租一台云服务器
-- 手动部署一个 Node.js 应用
-- 配置域名和 HTTPS
+**进阶（第1周）**：租云服务器、手动部署 Node.js 应用、配置域名和 HTTPS
 
-**实战**（第2-4周）：
-- 搭建完整的 CI/CD 流程
-- 配置 CDN 加速
-- 建立监控和备份体系
+**实战（第2-4周）**：搭建完整 CI/CD 流程、配置 CDN、建立监控和备份
 
-**深入**（持续）：
-- 学习 Docker 容器化部署
-- 研究 Kubernetes 集群管理
-- 探索微服务架构
+**深入（持续）**：学习 Docker 容器化、Kubernetes 集群、微服务架构
 
 ---
 
@@ -574,19 +385,16 @@ find /backup -name "db_*.sql" -mtime +7 -delete
 
 | 名词 | 英文 | 人话解释 |
 |------|------|---------|
-| **部署** | Deployment | 把代码放到服务器上让人能访问 |
-| **构建** | Build | 把源代码翻译打包成浏览器懂的格式 |
-| **服务器** | Server | 一台永远不关机、连着互联网的电脑 |
-| **域名** | Domain Name | 网站的好记名字（如 baidu.com） |
-| **DNS** | Domain Name System | 域名解析系统，把域名翻译成IP |
-| **IP地址** | IP Address | 电脑在互联网上的门牌号 |
-| **HTTP** | HyperText Transfer Protocol | 网页传输协议（不安全） |
-| **HTTPS** | HTTP Secure | 安全的网页传输协议（加密） |
-| **Nginx** | Engine X | 一个高性能的Web服务器（门童） |
-| **反向代理** | Reverse Proxy | 转发请求到后端服务 |
-| **SSH** | Secure Shell | 远程连接服务器的工具 |
-| **CDN** | Content Delivery Network | 内容分发网络，全球加速 |
-| **负载均衡** | Load Balancing | 把流量分到多台服务器 |
-| **CI/CD** | Continuous Integration/Deployment | 持续集成/持续部署（自动化） |
-| **监控** | Monitoring | 盯着服务器看有没有问题 |
-| **备份** | Backup | 复份数据，防丢失 |
+| 部署 | Deployment | 把代码放到服务器上让人能访问 |
+| 构建 | Build | 把源代码翻译打包成浏览器懂的格式 |
+| 服务器 | Server | 一台永远不关机、连着互联网的电脑 |
+| 域名 | Domain Name | 网站的好记名字（如 baidu.com） |
+| DNS | Domain Name System | 域名解析系统，把域名翻译成IP |
+| HTTP/HTTPS | HyperText Transfer Protocol | 网页传输协议（HTTP不安全，HTTPS加密） |
+| Nginx | Engine X | 高性能Web服务器（门童） |
+| 反向代理 | Reverse Proxy | 转发请求到后端服务 |
+| SSH | Secure Shell | 远程连接服务器的工具 |
+| CDN | Content Delivery Network | 内容分发网络，全球加速 |
+| CI/CD | Continuous Integration/Deployment | 持续集成/持续部署（自动化） |
+| 监控 | Monitoring | 盯着服务器看有没有问题 |
+| 备份 | Backup | 备份数据，防丢失 |