feat(docs): enhance interactive demos and improve documentation

- Add new interactive components for frontend routing, browser rendering pipeline, and database transactions
- Improve existing demos with better visuals, explanations, and examples
- Update documentation structure and content for better clarity
- Add new utility scripts and update package.json with new commands
- Fix formatting and alignment in documentation tables

docs/.vitepress/theme/components/appendix/cache-design/CacheArchitectureOverview.vue

@@ -1,13 +1,126 @@
 <template>
-  <div class="demo-container">
+  <div class="cache-architecture-demo">
     <div class="demo-header">
-      <h4>{{ title }}</h4>
-      <p class="hint">{{ description }}</p>
+      <span class="icon">🏗️</span>
+      <span class="title">多级缓存架构</span>
+      <span class="subtitle">像图书分馆一样层层拦截请求</span>
     </div>
-    <div class="demo-content">
-      <el-alert type="info" :closable="false">
-        缓存架构概览演示组件占位符 - 待实现具体交互
-      </el-alert>
+
+    <div class="intro-text">
+      想象你在<span class="highlight">连锁图书馆</span>找书：先在桌面上找（CDN），没有就去房间书架（本地缓存），
+      再没有就去楼层的公共阅览室（Redis），最后才去总馆（数据库）。每一层都能拦截大量请求。
+    </div>
+
+    <div class="architecture-diagram">
+      <div class="layer user-layer">
+        <div class="layer-icon">👤</div>
+        <div class="layer-label">用户请求</div>
+      </div>
+
+      <div class="arrow-down">⬇</div>
+
+      <div class="layer cdn-layer" :class="{ active: activeLayer === 'cdn' }">
+        <div class="layer-header">
+          <span class="icon">🌐</span>
+          <span class="layer-name">CDN 缓存</span>
+        </div>
+        <div class="layer-details">
+          <div class="detail-item">
+            <span class="label">位置</span>
+            <span class="value">全球边缘节点</span>
+          </div>
+          <div class="detail-item">
+            <span class="label">内容</span>
+            <span class="value">静态资源</span>
+          </div>
+          <div class="detail-item">
+            <span class="label">命中率</span>
+            <span class="value highlight">{{ cdnHitRate }}%</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="arrow-down">⬇</div>
+
+      <div class="layer local-layer" :class="{ active: activeLayer === 'local' }">
+        <div class="layer-header">
+          <span class="icon">💻</span>
+          <span class="layer-name">本地缓存</span>
+        </div>
+        <div class="layer-details">
+          <div class="detail-item">
+            <span class="label">位置</span>
+            <span class="value">应用服务器内存</span>
+          </div>
+          <div class="detail-item">
+            <span class="label">内容</span>
+            <span class="value">热点数据</span>
+          </div>
+          <div class="detail-item">
+            <span class="label">速度</span>
+            <span class="value highlight">极快 (~1ms)</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="arrow-down">⬇</div>
+
+      <div class="layer distributed-layer" :class="{ active: activeLayer === 'distributed' }">
+        <div class="layer-header">
+          <span class="icon">🗄️</span>
+          <span class="layer-name">分布式缓存</span>
+        </div>
+        <div class="layer-details">
+          <div class="detail-item">
+            <span class="label">位置</span>
+            <span class="value">Redis 集群</span>
+          </div>
+          <div class="detail-item">
+            <span class="label">内容</span>
+            <span class="value">共享缓存数据</span>
+          </div>
+          <div class="detail-item">
+            <span class="label">容量</span>
+            <span class="value highlight">可扩展</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="arrow-down">⬇</div>
+
+      <div class="layer database-layer">
+        <div class="layer-header">
+          <span class="icon">🗃️</span>
+          <span class="layer-name">数据库</span>
+        </div>
+        <div class="layer-details">
+          <div class="detail-item">
+            <span class="label">位置</span>
+            <span class="value">MySQL / PostgreSQL</span>
+          </div>
+          <div class="detail-item">
+            <span class="label">速度</span>
+            <span class="value warning">较慢 (~100ms)</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="control-panel">
+      <button
+        v-for="layer in layers"
+        :key="layer.id"
+        class="layer-btn"
+        :class="{ active: activeLayer === layer.id }"
+        @click="activeLayer = layer.id"
+      >
+        {{ layer.name }}
+      </button>
+    </div>
+
+    <div class="info-box">
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>多级缓存通过在不同层次拦截请求，逐层过滤，最终只有极少数请求会打到数据库。就像漏斗一样，越往下流量越小。
     </div>
   </div>
 </template>
@@ -15,36 +128,186 @@
 <script setup>
 import { ref } from 'vue'
 
-const title = ref('缓存架构概览')
-const description = ref('展示缓存系统的整体架构，包括本地缓存、分布式缓存、CDN缓存等多级缓存架构')
+const activeLayer = ref('local')
+const cdnHitRate = ref(95)
+
+const layers = [
+  { id: 'cdn', name: 'CDN 缓存' },
+  { id: 'local', name: '本地缓存' },
+  { id: 'distributed', name: '分布式缓存' },
+  { id: 'database', name: '数据库' }
+]
 </script>
 
 <style scoped>
-.demo-container {
+.cache-architecture-demo {
   border: 1px solid var(--vp-c-divider);
   border-radius: 8px;
-  padding: 20px;
   background: var(--vp-c-bg-soft);
+  padding: 1rem;
+  margin: 1rem 0;
 }
 
 .demo-header {
-  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
 }
 
-.demo-header h4 {
-  margin: 0 0 8px 0;
+.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 .highlight {
+  color: var(--vp-c-brand-1);
+  font-weight: 500;
+}
+
+.architecture-diagram {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.layer {
+  width: 100%;
+  max-width: 400px;
+  border-radius: 8px;
+  transition: all 0.3s;
+}
+
+.user-layer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0.5rem;
+}
+
+.layer-icon {
+  font-size: 2rem;
+}
+
+.layer-label {
+  font-weight: 600;
+  margin-top: 0.25rem;
+  font-size: 0.9rem;
+}
+
+.cdn-layer,
+.local-layer,
+.distributed-layer,
+.database-layer {
+  background: var(--vp-c-bg);
+  border: 2px solid var(--vp-c-divider);
+  padding: 0.75rem;
+  cursor: pointer;
+}
+
+.layer.active {
+  border-color: var(--vp-c-brand);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.layer-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.layer-details {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5rem;
+  font-size: 0.8rem;
+}
+
+.detail-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.detail-item .label {
+  color: var(--vp-c-text-2);
+  font-size: 0.7rem;
+}
+
+.detail-item .value {
+  font-weight: 500;
+}
+
+.detail-item .value.highlight {
+  color: #22c55e;
+}
+
+.detail-item .value.warning {
+  color: #f59e0b;
+}
+
+.arrow-down {
+  font-size: 1.5rem;
+  color: var(--vp-c-text-2);
+  margin: 0.25rem 0;
+}
+
+.control-panel {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-bottom: 0.75rem;
+  background: var(--vp-c-bg);
+  padding: 0.75rem;
+  border-radius: 6px;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.layer-btn {
+  padding: 0.4rem 0.8rem;
+  border-radius: 4px;
+  background-color: var(--vp-c-bg-alt);
   color: var(--vp-c-text-1);
+  font-size: 0.85rem;
+  border: 1px solid var(--vp-c-divider);
+  cursor: pointer;
+  transition: all 0.2s;
 }
 
-.hint {
-  margin: 0;
-  font-size: 14px;
+.layer-btn:hover {
+  border-color: var(--vp-c-brand);
+}
+
+.layer-btn.active {
+  background-color: var(--vp-c-brand);
+  color: white;
+  border-color: var(--vp-c-brand);
+}
+
+.info-box {
+  background: var(--vp-c-bg-alt);
+  padding: 0.75rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  line-height: 1.4;
   color: var(--vp-c-text-2);
 }
 
-.demo-content {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
+.info-box .icon {
+  margin-right: 0.25rem;
 }
 </style>