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/CacheArchitectureDemo.vue

@@ -1,12 +1,14 @@
-<!--
-  CacheArchitectureDemo.vue
-  缓存架构概览 - 展示缓存在系统中的位置和作用
--->
 <template>
   <div class="cache-architecture-demo">
-    <div class="header">
-      <div class="title">缓存架构概览</div>
-      <div class="subtitle">数据访问的"高速公路系统"</div>
+    <div class="demo-header">
+      <span class="icon">🏗️</span>
+      <span class="title">缓存架构</span>
+      <span class="subtitle">数据访问的"高速公路系统"</span>
+    </div>
+
+    <div class="intro-text">
+      想象你在<span class="highlight">图书馆</span>找书：如果书桌上已经有你要的书（缓存），直接拿就行；
+      如果没有，就得去书架（数据库）找。缓存就是这样一张"书桌"，让常用数据触手可及。
     </div>
 
     <div class="architecture-flow">
@@ -17,10 +19,7 @@
 
       <div class="arrow">↓</div>
 
-      <div
-        class="flow-layer cache"
-        :class="{ active: currentLayer === 'cache' }"
-      >
+      <div class="flow-layer cache" :class="{ active: currentLayer === 'cache' }">
         <div class="layer-label">缓存层 (Cache)</div>
         <div class="cache-box">
           <div class="cache-icon">⚡</div>
@@ -82,6 +81,11 @@
         <span class="response-time">{{ lastResult.time }}ms</span>
       </div>
     </div>
+
+    <div class="info-box">
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>缓存就像内存和数据库之间的"高速缓冲区"，用空间换时间，把热点数据放在更快的地方。
+    </div>
   </div>
 </template>
 
@@ -99,9 +103,7 @@ const simulateRequest = () => {
   const hit = Math.random() * 100 < hitRate.value
   lastResult.value = {
     hit,
-    time: hit
-      ? Math.floor(Math.random() * 3) + 1
-      : Math.floor(Math.random() * 20) + 40
+    time: hit ? Math.floor(Math.random() * 3) + 1 : Math.floor(Math.random() * 20) + 40
   }
 
   currentLayer.value = 'cache'
@@ -119,26 +121,36 @@ const simulateRequest = () => {
 <style scoped>
 .cache-architecture-demo {
   border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
   background: var(--vp-c-bg-soft);
-  border-radius: 12px;
-  padding: 1.5rem;
-  margin: 1.5rem 0;
-  font-family: var(--vp-font-family-base);
+  padding: 1rem;
+  margin: 1rem 0;
 }
 
-.header {
-  margin-bottom: 1.5rem;
+.demo-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
 }
 
-.title {
-  font-weight: 700;
-  font-size: 1.1rem;
-  margin-bottom: 0.25rem;
-}
+.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; }
 
-.subtitle {
-  color: var(--vp-c-text-2);
+.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-flow {
@@ -336,4 +348,15 @@ const simulateRequest = () => {
 .response-time {
   color: var(--vp-c-text-2);
 }
+
+.info-box {
+  background: var(--vp-c-bg-alt);
+  padding: 0.75rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  margin-top: 0.75rem;
+}
+
+.info-box .icon { margin-right: 0.25rem; }
 </style>