feat(docs): add interactive demo components for technical appendices

Add placeholder Vue components for visualizing technical concepts across multiple domains including frontend routing, browser rendering, cache design, queue design, database principles, API design, cloud services, and backend evolution. These components provide interactive educational content for the documentation.

Update documentation structure to include new appendix sections and enhance existing content with visual components. Remove unused 'codex' dependency from package.json.

docs/.vitepress/theme/components/appendix/database-intro/BPlusTreeDemo.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-header">
+      <h4>{{ title }}</h4>
+      <p class="hint">{{ description }}</p>
+    </div>
+    <div class="demo-content">
+      <el-alert type="info" :closable="false">
+        B+树索引演示组件占位符 - 待实现具体交互
+      </el-alert>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const title = ref('B+树索引演示')
+const description = ref('展示数据库中B+树索引的结构和工作原理，理解索引如何加速数据查询')
+</script>
+
+<style scoped>
+.demo-container {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.demo-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>

docs/.vitepress/theme/components/appendix/database-intro/DatabaseEvolutionDemo.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-header">
+      <h4>{{ title }}</h4>
+      <p class="hint">{{ description }}</p>
+    </div>
+    <div class="demo-content">
+      <el-alert type="info" :closable="false">
+        数据库演进历程演示组件占位符 - 待实现具体交互
+      </el-alert>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const title = ref('数据库演进历程演示')
+const description = ref('展示数据库从层次数据库、网状数据库到关系数据库、NoSQL数据库的演进过程')
+</script>
+
+<style scoped>
+.demo-container {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.demo-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>

docs/.vitepress/theme/components/appendix/database-intro/DatabaseRelationDemo.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-header">
+      <h4>{{ title }}</h4>
+      <p class="hint">{{ description }}</p>
+    </div>
+    <div class="demo-content">
+      <el-alert type="info" :closable="false">
+        数据库关系演示组件占位符 - 待实现具体交互
+      </el-alert>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const title = ref('数据库关系演示')
+const description = ref('展示关系数据库中表与表之间的关系，包括一对一、一对多、多对多关系')
+</script>
+
+<style scoped>
+.demo-container {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.demo-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>

docs/.vitepress/theme/components/appendix/database-intro/QueryOptimizationDemo.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-header">
+      <h4>{{ title }}</h4>
+      <p class="hint">{{ description }}</p>
+    </div>
+    <div class="demo-content">
+      <el-alert type="info" :closable="false">
+        查询优化演示组件占位符 - 待实现具体交互
+      </el-alert>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const title = ref('查询优化演示')
+const description = ref('展示数据库查询优化的原理和方法，包括执行计划分析和索引优化')
+</script>
+
+<style scoped>
+.demo-container {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.demo-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>

docs/.vitepress/theme/components/appendix/database-intro/TransactionACIDDemo.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-header">
+      <h4>{{ title }}</h4>
+      <p class="hint">{{ description }}</p>
+    </div>
+    <div class="demo-content">
+      <el-alert type="info" :closable="false">
+        事务ACID特性演示组件占位符 - 待实现具体交互
+      </el-alert>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const title = ref('事务ACID特性演示')
+const description = ref('通过可视化方式演示事务的原子性、一致性、隔离性和持久性')
+</script>
+
+<style scoped>
+.demo-container {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  padding: 20px;
+  background: var(--vp-c-bg-soft);
+}
+
+.demo-header {
+  margin-bottom: 20px;
+}
+
+.demo-header h4 {
+  margin: 0 0 8px 0;
+  color: var(--vp-c-text-1);
+}
+
+.hint {
+  margin: 0;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.demo-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+</style>