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/frontend-routing/RoutingModesDemo.vue

@@ -1,8 +1,13 @@
 <template>
   <div class="routing-modes-demo">
     <div class="demo-header">
-      <h4>路由模式对比</h4>
-      <p class="demo-desc">点击切换不同路由模式，观察URL变化和浏览器行为</p>
+      <span class="icon">🔀</span>
+      <span class="title">路由模式</span>
+      <span class="subtitle">不同的URL管理方式</span>
+    </div>
+
+    <div class="intro-text">
+      想象你在<span class="highlight">寄快递</span>：可以选择平邮（Hash，简单但慢）、快递（History，快速但需要配合）、或者专人送达（Memory，特殊场景）。不同模式适合不同需求。
     </div>
 
     <div class="mode-selector">
@@ -17,191 +22,153 @@
       </button>
     </div>
 
-    <div class="demo-content">
-      <div class="browser-mockup">
-        <div class="browser-header">
-          <div class="browser-controls">
-            <span class="dot red"></span>
-            <span class="dot yellow"></span>
-            <span class="dot green"></span>
-          </div>
-          <div class="address-bar">
-            <span class="url-protocol">{{ getProtocol() }}</span>
-            <span class="url-host">example.com</span>
-            <span class="url-path">{{ currentPath }}</span>
-            <span v-if="currentMode === 'hash'" class="url-hash">#/home</span>
-          </div>
+    <div class="mode-detail">
+      <div class="mode-info">
+        <h5>{{ getCurrentMode().name }}</h5>
+        <p class="mode-desc">{{ getCurrentMode().description }}</p>
+      </div>
+
+      <div class="mode-features">
+        <div class="feature-section">
+          <h6>✅ 优点</h6>
+          <ul>
+            <li v-for="pro in getCurrentMode().pros" :key="pro">{{ pro }}</li>
+          </ul>
         </div>
-        <div class="browser-content">
-          <nav class="nav-menu">
-            <a
-              v-for="item in navItems"
-              :key="item.path"
-              :class="['nav-link', { active: currentPath === item.path }]"
-              @click="navigate(item.path)"
-            >
-              {{ item.name }}
-            </a>
-          </nav>
-          <div class="page-content">
-            <div class="page-header">
-              <h2>{{ getPageTitle() }}</h2>
-            </div>
-            <div class="page-body">
-              <p>{{ getPageContent() }}</p>
-            </div>
-          </div>
+        <div class="feature-section">
+          <h6>❌ 缺点</h6>
+          <ul>
+            <li v-for="con in getCurrentMode().cons" :key="con">{{ con }}</li>
+          </ul>
         </div>
       </div>
 
-      <div class="mode-info">
-        <div class="info-card">
-          <h5>{{ getCurrentMode().name }}</h5>
-          <p class="info-desc">{{ getCurrentMode().description }}</p>
-          <div class="pros-cons">
-            <div class="pros">
-              <h6>优点</h6>
-              <ul>
-                <li v-for="pro in getCurrentMode().pros" :key="pro">{{ pro }}</li>
-              </ul>
-            </div>
-            <div class="cons">
-              <h6>缺点</h6>
-              <ul>
-                <li v-for="con in getCurrentMode().cons" :key="con">{{ con }}</li>
-              </ul>
-            </div>
-          </div>
+      <div class="url-example">
+        <h6>🌐 URL 示例</h6>
+        <div class="url-bar">
+          <span class="url-prefix">https://example.com</span>
+          <span class="url-suffix">{{ getUrlSuffix() }}</span>
         </div>
       </div>
     </div>
+
+    <div class="info-box">
+      <span class="icon">💡</span>
+      <strong>选择建议：</strong>现代Web应用优先选History模式，老项目或特殊场景用Hash，移动端App或测试环境可用Memory模式。
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { ref } from 'vue'
 
 const currentMode = ref('history')
-const currentPath = ref('/home')
 
 const modes = [
   {
     key: 'hash',
     name: 'Hash 模式',
     icon: '#',
-    description: '使用URL的hash部分（#）来模拟完整URL，当hash改变时不会触发页面刷新。',
-    pros: ['兼容性好，支持IE8+', '无需服务端配置', '部署简单'],
-    cons: ['URL带有#号，不够美观', '部分浏览器分享链接可能丢失hash', 'SEO不友好']
+    description: '使用URL的hash部分（#）来模拟路由，兼容性最好',
+    pros: ['兼容IE8+', '无需服务端配置', '部署简单'],
+    cons: ['URL带有#号', 'SEO不友好', '分享可能丢失hash']
   },
   {
     key: 'history',
     name: 'History 模式',
     icon: '/',
-    description: '使用HTML5 History API（pushState/replaceState）来实现无刷新导航。',
-    pros: ['URL美观，没有#号', '更符合用户习惯', 'SEO友好'],
-    cons: ['需要服务端支持', '兼容性要求IE10+', '配置相对复杂']
+    description: '使用HTML5 History API实现URL管理，最常用的模式',
+    pros: ['URL美观', 'SEO友好', '符合用户习惯'],
+    cons: ['需要服务端配置', '兼容性IE10+', '刷新返回404']
   },
   {
     key: 'memory',
     name: 'Memory 模式',
     icon: 'M',
-    description: '将路由信息保存在内存中，不修改浏览器URL，适用于非浏览器环境。',
-    pros: ['无需浏览器环境', '适用于测试环境', '移动端App内嵌'],
-    cons: ['不支持浏览器刷新', 'URL不会同步', '仅适用于特定场景']
+    description: '将路由信息保存在内存中，不修改浏览器URL',
+    pros: ['无需浏览器环境', '适用于测试', '移动端App内嵌'],
+    cons: ['不支持刷新', 'URL不变化', '仅限特定场景']
   }
 ]
 
-const navItems = [
-  { name: '首页', path: '/home' },
-  { name: '产品', path: '/products' },
-  { name: '关于', path: '/about' },
-  { name: '用户', path: '/user/profile' }
-]
-
 const switchMode = (mode) => {
   currentMode.value = mode
-  // 重置路径
-  currentPath.value = '/home'
-}
-
-const navigate = (path) => {
-  currentPath.value = path
-  // 模拟路由切换效果
-  if (currentMode.value === 'history') {
-    // History模式下使用pushState（这里仅模拟）
-    console.log(`pushState: ${path}`)
-  } else if (currentMode.value === 'hash') {
-    // Hash模式下修改hash
-    console.log(`hashchange: #${path}`)
-  }
-}
-
-const getProtocol = () => {
-  return 'https://'
 }
 
 const getCurrentMode = () => {
   return modes.find(m => m.key === currentMode.value) || modes[0]
 }
 
-const getPageTitle = () => {
-  const item = navItems.find(i => i.path === currentPath.value)
-  return item ? `${item.name}页面` : '首页'
-}
-
-const getPageContent = () => {
-  const contents = {
-    '/home': '欢迎来到首页！这是SPA应用的入口页面，所有导航都在前端完成，无需刷新整个页面。',
-    '/products': '产品列表页面展示了我们的核心产品。你可以在这里浏览、筛选和查看详情。',
-    '/about': '关于我们页面介绍了公司的历史、愿景和团队信息。',
-    '/user/profile': '个人中心页面，显示用户的基本信息、订单历史和设置选项。'
+const getUrlSuffix = () => {
+  const path = '/home'
+  switch (currentMode.value) {
+    case 'hash':
+      return `/#${path}`
+    case 'history':
+      return path
+    case 'memory':
+      return ' (URL不变)'
+    default:
+      return path
   }
-  return contents[currentPath.value] || contents['/home']
 }
 </script>
 
 <style scoped>
 .routing-modes-demo {
-  padding: 20px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
   background: var(--vp-c-bg-soft);
-  border-radius: 12px;
-  margin: 20px 0;
+  padding: 1rem;
+  margin: 1rem 0;
+  max-height: 600px;
+  overflow-y: auto;
 }
 
 .demo-header {
-  text-align: center;
-  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
 }
 
-.demo-header h4 {
-  margin: 0 0 8px 0;
-  color: var(--vp-c-text-1);
-}
+.demo-header .icon { font-size: 1.25rem; }
+.demo-header .title { font-weight: bold; font-size: 1rem; }
+.demo-header .subtitle { color: var(--vp-c-text-2); font-size: 0.85rem; margin-left: 0.5rem; }
 
-.demo-desc {
-  margin: 0;
+.intro-text {
+  font-size: 0.9rem;
   color: var(--vp-c-text-2);
-  font-size: 14px;
+  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;
 }
 
 .mode-selector {
   display: flex;
-  gap: 12px;
-  justify-content: center;
-  margin-bottom: 24px;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
   flex-wrap: wrap;
 }
 
 .mode-btn {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 10px 16px;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
   border: 2px solid var(--vp-c-divider);
   border-radius: 8px;
   background: var(--vp-c-bg);
   cursor: pointer;
   transition: all 0.2s;
+  font-size: 0.85rem;
 }
 
 .mode-btn:hover {
@@ -215,212 +182,102 @@ const getPageContent = () => {
 
 .mode-icon {
   font-weight: bold;
-  font-size: 16px;
+  font-size: 1rem;
 }
 
 .mode-name {
-  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+}
+
+.mode-detail {
+  background: var(--vp-c-bg);
+  border-radius: 8px;
+  padding: 1rem;
+  border: 1px solid var(--vp-c-divider);
+  margin-bottom: 1rem;
+}
+
+.mode-info h5 {
+  margin: 0 0 0.5rem 0;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-1);
+}
+
+.mode-desc {
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.5;
+  margin-bottom: 1rem;
+}
+
+.mode-features {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.feature-section h6 {
+  margin: 0 0 0.5rem 0;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+}
+
+.feature-section ul {
+  margin: 0;
+  padding-left: 1rem;
+  font-size: 0.75rem;
+  color: var(--vp-c-text-2);
+}
+
+.feature-section li {
+  margin: 0.25rem 0;
+}
+
+.url-example {
+  background: var(--vp-c-bg-soft);
+  padding: 0.75rem;
+  border-radius: 6px;
+}
+
+.url-example h6 {
+  margin: 0 0 0.5rem 0;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+}
+
+.url-bar {
+  background: var(--vp-c-bg);
+  padding: 0.5rem 0.75rem;
+  border-radius: 4px;
+  font-family: monospace;
+  font-size: 0.8rem;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.url-prefix {
+  color: var(--vp-c-text-3);
+}
+
+.url-suffix {
+  color: var(--vp-c-brand);
   font-weight: 500;
 }
 
-.demo-content {
-  display: grid;
-  gap: 20px;
-}
-
-.browser-mockup {
-  background: var(--vp-c-bg);
-  border-radius: 12px;
-  overflow: hidden;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-.browser-header {
-  background: var(--vp-c-bg-soft);
-  padding: 12px 16px;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.browser-controls {
-  display: flex;
-  gap: 6px;
-}
-
-.dot {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-}
-
-.dot.red { background: #ff5f56; }
-.dot.yellow { background: #ffbd2e; }
-.dot.green { background: #27c93f; }
-
-.address-bar {
-  flex: 1;
-  background: var(--vp-c-bg);
-  padding: 6px 12px;
+.info-box {
+  background: var(--vp-c-bg-alt);
+  padding: 0.75rem;
   border-radius: 6px;
-  font-size: 13px;
-  font-family: monospace;
-  display: flex;
-  align-items: center;
-  gap: 2px;
-}
-
-.url-protocol { color: var(--vp-c-text-3); }
-.url-host { color: var(--vp-c-text-2); }
-.url-path { color: var(--vp-c-brand); font-weight: 500; }
-.url-hash { color: #e06c75; font-weight: 500; }
-
-.browser-content {
-  display: flex;
-  min-height: 200px;
-}
-
-.nav-menu {
-  width: 120px;
-  background: var(--vp-c-bg-soft);
-  padding: 16px 0;
-  border-right: 1px solid var(--vp-c-divider);
-}
-
-.nav-link {
-  display: block;
-  padding: 10px 16px;
-  color: var(--vp-c-text-2);
-  text-decoration: none;
-  font-size: 14px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.nav-link:hover {
-  background: var(--vp-c-bg);
-  color: var(--vp-c-text-1);
-}
-
-.nav-link.active {
-  background: var(--vp-c-brand-soft);
-  color: var(--vp-c-brand);
-  border-right: 2px solid var(--vp-c-brand);
-}
-
-.page-content {
-  flex: 1;
-  padding: 20px;
-}
-
-.page-header h2 {
-  margin: 0 0 12px 0;
-  color: var(--vp-c-text-1);
-  font-size: 20px;
-}
-
-.page-body {
-  color: var(--vp-c-text-2);
-  line-height: 1.6;
-}
-
-.mode-info {
-  margin-top: 16px;
-}
-
-.info-card {
-  background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 8px;
-  padding: 16px;
-}
-
-.info-card h5 {
-  margin: 0 0 8px 0;
-  color: var(--vp-c-text-1);
-  font-size: 16px;
-}
-
-.info-desc {
-  margin: 0 0 16px 0;
-  color: var(--vp-c-text-2);
-  font-size: 14px;
-  line-height: 1.5;
-}
-
-.pros-cons {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 16px;
-}
-
-.pros, .cons {
-  padding: 12px;
-  border-radius: 6px;
-}
-
-.pros {
-  background: rgba(39, 201, 63, 0.1);
-}
-
-.cons {
-  background: rgba(255, 95, 86, 0.1);
-}
-
-.pros h6, .cons h6 {
-  margin: 0 0 8px 0;
-  font-size: 13px;
-  font-weight: 600;
-}
-
-.pros h6 {
-  color: #27c93f;
-}
-
-.cons h6 {
-  color: #ff5f56;
-}
-
-.pros ul, .cons ul {
-  margin: 0;
-  padding-left: 16px;
-  font-size: 12px;
+  font-size: 0.85rem;
   color: var(--vp-c-text-2);
 }
 
-.pros li, .cons li {
-  margin: 4px 0;
-}
+.info-box .icon { margin-right: 0.25rem; }
 
 @media (max-width: 768px) {
-  .mode-selector {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .mode-btn {
-    justify-content: center;
-  }
-
-  .browser-content {
-    flex-direction: column;
-  }
-
-  .nav-menu {
-    width: 100%;
-    display: flex;
-    padding: 8px;
-    border-right: none;
-    border-bottom: 1px solid var(--vp-c-divider);
-  }
-
-  .nav-link {
-    padding: 8px 12px;
-    white-space: nowrap;
-  }
-
-  .pros-cons {
+  .mode-features {
     grid-template-columns: 1fr;
   }
 }
-</style>
+</style>