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/backend-languages/LanguageComparisonDemo.vue

@@ -1,202 +1,323 @@
 <template>
   <div class="language-comparison-demo">
-    <div class="comparison-table-wrapper">
-      <table class="comparison-table">
-        <thead>
-          <tr>
-            <th>维度</th>
-            <th v-for="lang in languages" :key="lang.name" class="lang-col">
-              {{ lang.name }}
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="dimension in dimensions" :key="dimension.key">
-            <td class="dimension-label">{{ dimension.label }}</td>
-            <td v-for="lang in languages" :key="lang.name" class="score-cell">
-              <div class="score-bar">
-                <div
-                  class="score-fill"
-                  :class="`score-${dimension.key}`"
-                  :style="{ width: getScore(lang.name, dimension.key) + '%' }"
-                >
-                  <span class="score-text">{{
-                    getScore(lang.name, dimension.key)
-                  }}</span>
-                </div>
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+    <div class="demo-header">
+      <span class="icon">⚖️</span>
+      <span class="title">语言天平</span>
+      <span class="subtitle">权衡不同维度的优劣势</span>
     </div>
 
-    <div class="insight-panel">
-      <h4>💡 洞察分析</h4>
-      <div class="insight-content">
-        <div class="insight-item">
-          <strong>性能王者：</strong>
-          <span>C++ 和 Rust 在性能方面遥遥领先，但学习曲线极其陡峭。</span>
-        </div>
-        <div class="insight-item">
-          <strong>开发效率：</strong>
-          <span
-            >Python 和 Ruby 在快速开发方面无与伦比，适合原型和初创公司。</span
-          >
-        </div>
-        <div class="insight-item">
-          <strong>生态成熟度：</strong>
-          <span
-            >Java、Python、Node.js 拥有最成熟的生态系统，库和框架丰富。</span
-          >
-        </div>
-        <div class="insight-item">
-          <strong>学习曲线：</strong>
-          <span
-            >Python、Ruby、Go 最容易上手，Rust 和 C++ 需要较长时间学习。</span
-          >
+    <div class="intro-text">
+      想象你在<span class="highlight">超市购物</span>：有的商品便宜但不耐用，有的质量好但价格高。选择后端语言也一样，需要在性能、开发效率、生态成熟度等多个维度之间做权衡。
+    </div>
+
+    <div class="dimension-selector">
+      <div class="dimension-label">选择比较维度：</div>
+      <div class="dimension-buttons">
+        <button
+          v-for="dim in dimensions"
+          :key="dim.key"
+          class="dimension-btn"
+          :class="{ active: selectedDimension === dim.key }"
+          @click="selectedDimension = dim.key"
+        >
+          <span class="dim-icon">{{ dim.icon }}</span>
+          <span class="dim-label">{{ dim.label }}</span>
+        </button>
+      </div>
+    </div>
+
+    <div class="comparison-chart">
+      <div class="chart-header">
+        <span class="chart-title">{{ getDimensionInfo().title }}</span>
+        <span class="chart-unit">{{ getDimensionInfo().unit }}</span>
+      </div>
+      <div class="bars-container">
+        <div
+          v-for="lang in sortedLanguages"
+          :key="lang.name"
+          class="bar-wrapper"
+        >
+          <div class="bar-label">{{ lang.name }}</div>
+          <div class="bar-track">
+            <div
+              class="bar-fill"
+              :class="getBarClass(lang.score)"
+              :style="{ width: lang.score + '%' }"
+            >
+              <span class="bar-value">{{ lang.score }}</span>
+            </div>
+          </div>
         </div>
       </div>
     </div>
+
+    <div class="insight-box">
+      <span class="icon">🔍</span>
+      <div class="insight-content">
+        <strong>洞察分析：</strong>
+        <p>{{ getDimensionInfo().insight }}</p>
+      </div>
+    </div>
+
+    <div class="info-box">
+      <span class="icon">💡</span>
+      <strong>核心思想：</strong>没有"万能银弹"。高性能往往意味着高开发成本（C++、Rust），快速开发通常伴随性能损失（Python、Ruby）。根据项目核心诉求做取舍，而不是追求"样样都行"。
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 
-const languages = [
-  { name: 'Java' },
-  { name: 'Python' },
-  { name: 'Go' },
-  { name: 'Node.js' },
-  { name: 'Rust' },
-  { name: 'C++' }
-]
+const selectedDimension = ref('performance')
 
 const dimensions = [
-  { key: 'performance', label: '性能' },
-  { key: 'efficiency', label: '开发效率' },
-  { key: 'ecosystem', label: '生态成熟度' },
-  { key: 'learning', label: '学习曲线' },
-  { key: 'concurrency', label: '并发能力' },
-  { key: 'memory', label: '内存管理' }
+  { key: 'performance', icon: '⚡', label: '性能' },
+  { key: 'efficiency', icon: '🚀', label: '开发效率' },
+  { key: 'ecosystem', icon: '📦', label: '生态成熟度' },
+  { key: 'learning', icon: '📚', label: '学习曲线' },
+  { key: 'concurrency', icon: '🔄', label: '并发能力' }
 ]
 
-const scores = {
-  Java: {
-    performance: 75,
-    efficiency: 60,
-    ecosystem: 95,
-    learning: 40,
-    concurrency: 80,
-    memory: 70
+const dimensionInfo = {
+  performance: {
+    title: '性能对比',
+    unit: '(分数越高越快)',
+    insight: 'C++ 和 Rust 在性能方面遥遥领先，但学习曲线极其陡峭。Go 和 Java 在性能和开发效率之间取得了很好的平衡。Python 和 Ruby 性能最弱，但开发速度最快。'
   },
-  Python: {
-    performance: 30,
-    efficiency: 95,
-    ecosystem: 95,
-    learning: 95,
-    concurrency: 30,
-    memory: 40
+  efficiency: {
+    title: '开发效率',
+    unit: '(分数越高越快)',
+    insight: 'Python 和 Ruby 在快速开发方面无与伦比，适合原型和初创公司。Go 和 Node.js 居中，兼顾了开发速度和性能。Rust 和 C++ 开发效率最低，主要受学习曲线影响。'
   },
-  Go: {
-    performance: 90,
-    efficiency: 85,
-    ecosystem: 75,
-    learning: 80,
-    concurrency: 95,
-    memory: 85
+  ecosystem: {
+    title: '生态成熟度',
+    unit: '(分数越高库越多)',
+    insight: 'Java、Python、Node.js 拥有最成熟的生态系统。Go 和 Rust 虽然年轻，但发展迅速。C++ 生态成熟但学习成本高。Ruby 生态主要集中在 Web 开发领域。'
   },
-  'Node.js': {
-    performance: 70,
-    efficiency: 85,
-    ecosystem: 95,
-    learning: 75,
-    concurrency: 85,
-    memory: 75
+  learning: {
+    title: '学习曲线',
+    unit: '(分数越高越简单)',
+    insight: 'Python、Ruby、Go 最容易上手。Node.js 需要理解异步概念。Java 需要掌握面向对象和框架。Rust 和 C++ 学习曲线最陡，需要深入理解内存管理。'
   },
-  Rust: {
-    performance: 95,
-    efficiency: 40,
-    ecosystem: 70,
-    learning: 20,
-    concurrency: 90,
-    memory: 98
-  },
-  'C++': {
-    performance: 98,
-    efficiency: 35,
-    ecosystem: 90,
-    learning: 25,
-    concurrency: 85,
-    memory: 70
+  concurrency: {
+    title: '并发能力',
+    unit: '(分数越高越强)',
+    insight: 'Go 的 Goroutine 是并发的王者，轻量且简单。Rust 的异步模型性能强大但复杂。Java 的线程池成熟稳定。Node.js 的事件循环适合 I/O 密集型。Python 的 GIL 限制了多线程性能。'
   }
 }
 
-const getScore = (lang, dimension) => {
-  return scores[lang][dimension]
+const languageScores = {
+  performance: [
+    { name: 'C++', score: 98 },
+    { name: 'Rust', score: 95 },
+    { name: 'Go', score: 90 },
+    { name: 'Java', score: 75 },
+    { name: 'Node.js', score: 70 },
+    { name: 'Python', score: 30 },
+    { name: 'Ruby', score: 25 }
+  ],
+  efficiency: [
+    { name: 'Python', score: 95 },
+    { name: 'Ruby', score: 90 },
+    { name: 'Go', score: 85 },
+    { name: 'Node.js', score: 85 },
+    { name: 'Java', score: 60 },
+    { name: 'Rust', score: 40 },
+    { name: 'C++', score: 35 }
+  ],
+  ecosystem: [
+    { name: 'Java', score: 95 },
+    { name: 'Python', score: 95 },
+    { name: 'Node.js', score: 95 },
+    { name: 'C++', score: 90 },
+    { name: 'Go', score: 75 },
+    { name: 'Ruby', score: 70 },
+    { name: 'Rust', score: 70 }
+  ],
+  learning: [
+    { name: 'Python', score: 95 },
+    { name: 'Ruby', score: 85 },
+    { name: 'Go', score: 80 },
+    { name: 'Node.js', score: 75 },
+    { name: 'Java', score: 40 },
+    { name: 'C++', score: 25 },
+    { name: 'Rust', score: 20 }
+  ],
+  concurrency: [
+    { name: 'Go', score: 95 },
+    { name: 'Rust', score: 90 },
+    { name: 'Node.js', score: 85 },
+    { name: 'Java', score: 80 },
+    { name: 'C++', score: 85 },
+    { name: 'Python', score: 30 },
+    { name: 'Ruby', score: 25 }
+  ]
+}
+
+const sortedLanguages = computed(() => {
+  const scores = languageScores[selectedDimension.value]
+  return [...scores].sort((a, b) => b.score - a.score)
+})
+
+const getDimensionInfo = () => {
+  return dimensionInfo[selectedDimension.value]
+}
+
+const getBarClass = (score) => {
+  if (score >= 85) return 'bar-high'
+  if (score >= 60) return 'bar-medium'
+  return 'bar-low'
 }
 </script>
 
 <style scoped>
 .language-comparison-demo {
-  background: var(--vp-c-bg);
-  border-radius: 12px;
-  padding: 2rem;
-  margin: 2rem 0;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
   border: 1px solid var(--vp-c-divider);
-}
-
-.comparison-table-wrapper {
-  overflow-x: auto;
-  margin-bottom: 2rem;
-}
-
-.comparison-table {
-  width: 100%;
-  border-collapse: collapse;
-  min-width: 600px;
-}
-
-.comparison-table th {
+  border-radius: 8px;
   background: var(--vp-c-bg-soft);
   padding: 1rem;
-  text-align: center;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-  border-bottom: 2px solid var(--vp-c-divider);
+  margin: 1rem 0;
+  max-height: 600px;
+  overflow-y: auto;
 }
 
-.comparison-table th.lang-col {
-  color: var(--vp-c-brand);
-  font-size: 1.1rem;
+.demo-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
 }
 
-.comparison-table td {
-  padding: 1rem;
-  border-bottom: 1px solid var(--vp-c-divider);
+.demo-header .icon {
+  font-size: 1.25rem;
+}
+
+.demo-header .title {
+  font-weight: bold;
+  font-size: 1rem;
+}
+
+.demo-header .subtitle {
+  color: var(--vp-c-text-2);
+  font-size: 0.85rem;
+  margin-left: 0.5rem;
+}
+
+.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;
+}
+
+.dimension-selector {
+  background: var(--vp-c-bg);
+  padding: 0.75rem;
+  border-radius: 6px;
+  margin-bottom: 1rem;
 }
 
 .dimension-label {
+  font-size: 0.85rem;
   font-weight: 600;
   color: var(--vp-c-text-1);
-  white-space: nowrap;
+  margin-bottom: 0.5rem;
 }
 
-.score-cell {
-  padding: 0.75rem;
+.dimension-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
 }
 
-.score-bar {
-  height: 30px;
+.dimension-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.4rem 0.75rem;
   background: var(--vp-c-bg-soft);
+  border: 2px solid transparent;
   border-radius: 6px;
-  overflow: hidden;
-  position: relative;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 0.85rem;
 }
 
-.score-fill {
+.dimension-btn:hover {
+  border-color: var(--vp-c-brand);
+}
+
+.dimension-btn.active {
+  background: var(--vp-c-brand);
+  color: white;
+}
+
+.dim-icon {
+  font-size: 1rem;
+}
+
+.comparison-chart {
+  background: var(--vp-c-bg);
+  padding: 0.75rem;
+  border-radius: 6px;
+  margin-bottom: 1rem;
+}
+
+.chart-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.75rem;
+}
+
+.chart-title {
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: var(--vp-c-text-1);
+}
+
+.chart-unit {
+  font-size: 0.75rem;
+  color: var(--vp-c-text-3);
+}
+
+.bars-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.bar-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.bar-label {
+  min-width: 70px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+.bar-track {
+  flex: 1;
+  height: 24px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.bar-fill {
   height: 100%;
   display: flex;
   align-items: center;
@@ -205,86 +326,62 @@ const getScore = (lang, dimension) => {
   transition: width 0.5s ease;
   color: white;
   font-weight: 600;
-  font-size: 0.85rem;
+  font-size: 0.75rem;
 }
 
-.score-performance {
-  background: linear-gradient(90deg, #fbbf24, #f59e0b);
+.bar-high {
+  background: var(--vp-c-green-1);
 }
 
-.score-efficiency {
-  background: linear-gradient(90deg, #34d399, #10b981);
+.bar-medium {
+  background: var(--vp-c-yellow-1);
 }
 
-.score-ecosystem {
-  background: linear-gradient(90deg, #60a5fa, #3b82f6);
+.bar-low {
+  background: var(--vp-c-brand-1);
 }
 
-.score-learning {
-  background: linear-gradient(90deg, #f472b6, #ec4899);
-}
-
-.score-concurrency {
-  background: linear-gradient(90deg, #a78bfa, #8b5cf6);
-}
-
-.score-memory {
-  background: linear-gradient(90deg, #fb923c, #ea580c);
-}
-
-.score-text {
-  color: white;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-}
-
-.insight-panel {
-  background: var(--vp-c-bg-soft);
-  border-radius: 8px;
-  padding: 1.5rem;
-  border-left: 4px solid var(--vp-c-brand);
-}
-
-.insight-panel h4 {
-  margin-top: 0;
+.insight-box {
+  background: var(--vp-c-bg);
+  padding: 0.75rem;
+  border-radius: 6px;
   margin-bottom: 1rem;
-  color: var(--vp-c-brand);
-  font-size: 1.2rem;
+  display: flex;
+  gap: 0.5rem;
+  border-left: 3px solid var(--vp-c-brand);
+}
+
+.insight-box .icon {
+  flex-shrink: 0;
 }
 
 .insight-content {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
+  flex: 1;
 }
 
-.insight-item {
-  display: flex;
-  gap: 0.5rem;
-  font-size: 0.95rem;
-  line-height: 1.6;
-}
-
-.insight-item strong {
+.insight-content strong {
+  display: block;
+  margin-bottom: 0.25rem;
+  font-size: 0.85rem;
   color: var(--vp-c-text-1);
-  white-space: nowrap;
 }
 
-.insight-item span {
+.insight-content p {
+  margin: 0;
+  font-size: 0.85rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.5;
+}
+
+.info-box {
+  background: var(--vp-c-bg-alt);
+  padding: 0.75rem;
+  border-radius: 6px;
+  font-size: 0.85rem;
   color: var(--vp-c-text-2);
 }
 
-@media (max-width: 768px) {
-  .comparison-table-wrapper {
-    font-size: 0.85rem;
-  }
-
-  .comparison-table th,
-  .comparison-table td {
-    padding: 0.5rem;
-  }
-
-  .insight-content {
-    font-size: 0.9rem;
-  }
+.info-box .icon {
+  margin-right: 0.25rem;
 }
 </style>