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.
This commit is contained in:
sanbuphy
2026-02-06 03:34:50 +08:00
parent e8bba6f7c0
commit 7c70c37072
171 changed files with 69830 additions and 6689 deletions
@@ -0,0 +1,51 @@
<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>