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/queue-design/IdempotenceDemo.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/queue-design/MQArchitectureDemo.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/queue-design/MQComparisonDemo.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('对比主流消息队列产品（RabbitMQ、Kafka、RocketMQ等）的特性、适用场景和性能差异')
+</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/queue-design/ProducerConsumerDemo.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/queue-design/ReliabilityDemo.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>