feat(appendix): 添加多个交互式演示组件，完善 AI/Infra 等章节内容

- 新增 Vibe Coding 全栈相关演示组件 (DeveloperSkillShift, FrontendTriad, BackendCore 等)
- 新增 RAG 相关组件 (RAGPipeline, ChunkingStrategy, Retrieval 等)
- 新增 Embedding & Vector 相关组件 (EmbeddingConcept, VectorSimilarity 等)
- 新增 AI Native App 设计组件 (AINativeArch, PromptDesign 等)
- 新增 Infrastructure as Code 组件 (IaCConcept, TerraformWorkflow 等)
- 新增 DNS & HTTPS 演示组件 (DnsResolution, HttpsHandshake 等)
- 新增 Model Finetuning 组件 (FinetuningPipeline 等)
- 更新多个章节的 markdown 内容，集成交互式演示

docs/.vitepress/theme/components/appendix/computer-fundamentals/CareerPathDemo.vue

@@ -0,0 +1,286 @@
+<template>
+  <div class="career-path-demo">
+    <div class="demo-header">
+      <span class="icon">🚀</span>
+      <span class="title">工程师成长路径</span>
+      <span class="subtitle">从入门到精通的技能演进</span>
+    </div>
+
+    <div class="path-container">
+      <div
+        v-for="(stage, index) in stages"
+        :key="stage.name"
+        class="stage-card"
+        :class="{ active: activeStage === index }"
+        @click="activeStage = index"
+      >
+        <div class="stage-header">
+          <span class="stage-icon">{{ stage.icon }}</span>
+          <span class="stage-name">{{ stage.name }}</span>
+          <span class="stage-time">{{ stage.time }}</span>
+        </div>
+        <div class="stage-content">
+          <div class="stage-desc">{{ stage.desc }}</div>
+          <div class="stage-skills">
+            <span class="skill-label">核心技能：</span>
+            <div class="skill-tags">
+              <span v-for="skill in stage.skills" :key="skill" class="skill-tag">
+                {{ skill }}
+              </span>
+            </div>
+          </div>
+          <div class="stage-output">
+            <span class="output-label">典型产出：</span>
+            <span class="output-text">{{ stage.output }}</span>
+          </div>
+        </div>
+        <div v-if="index < stages.length - 1" class="stage-arrow">→</div>
+      </div>
+    </div>
+
+    <div class="path-insight">
+      <div class="insight-icon">💡</div>
+      <div class="insight-content">
+        <div class="insight-title">成长关键点</div>
+        <ul class="insight-list">
+          <li>前 1-2 年：打基础，建立"能独立完成任务"的能力</li>
+          <li>2-3 年：选方向，在某个领域建立深度</li>
+          <li>3-5 年：横向扩展，培养架构思维和团队协作能力</li>
+          <li>5 年+：技术决策、团队带领、技术影响力</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const activeStage = ref(0)
+
+const stages = ref([
+  {
+    name: '入门期',
+    icon: '🌱',
+    time: '0-1 年',
+    desc: '学习基础语法和工具，能完成简单任务',
+    skills: ['一门语言基础', 'Git 使用', '调试技巧', '阅读文档'],
+    output: '能独立完成小功能、修复简单 Bug'
+  },
+  {
+    name: '成长期',
+    icon: '🌿',
+    time: '1-2 年',
+    desc: '熟悉常用框架和最佳实践，能独立负责模块',
+    skills: ['框架熟练', '代码规范', '单元测试', 'API 设计'],
+    output: '独立负责一个功能模块，代码质量稳定'
+  },
+  {
+    name: '进阶期',
+    icon: '🌳',
+    time: '2-3 年',
+    desc: '深入某个领域，开始有技术选型能力',
+    skills: ['领域深入', '性能优化', '架构设计', '技术选型'],
+    output: '主导技术方案设计，解决复杂问题'
+  },
+  {
+    name: '成熟期',
+    icon: '🌲',
+    time: '3-5 年',
+    desc: '全栈能力或领域专家，能带领小团队',
+    skills: ['全栈能力', '团队协作', '技术分享', '项目管理'],
+    output: '负责核心系统，指导新人成长'
+  },
+  {
+    name: '专家期',
+    icon: '🏔️',
+    time: '5 年+',
+    desc: '技术决策者，有行业影响力',
+    skills: ['技术战略', '团队建设', '行业洞察', '创新引领'],
+    output: '技术方向决策，培养技术团队'
+  }
+])
+</script>
+
+<style scoped>
+.career-path-demo {
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  border-radius: 16px;
+  padding: 24px;
+  margin: 20px 0;
+}
+
+.demo-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  border-bottom: 2px solid #e2e8f0;
+}
+
+.icon {
+  font-size: 28px;
+}
+
+.title {
+  font-size: 20px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.subtitle {
+  font-size: 14px;
+  color: #64748b;
+  margin-left: auto;
+}
+
+.path-container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.stage-card {
+  background: white;
+  border-radius: 12px;
+  padding: 16px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border: 2px solid transparent;
+  position: relative;
+}
+
+.stage-card:hover {
+  transform: translateX(4px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.stage-card.active {
+  border-color: #3b82f6;
+  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
+}
+
+.stage-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.stage-icon {
+  font-size: 24px;
+}
+
+.stage-name {
+  font-size: 18px;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.stage-time {
+  font-size: 12px;
+  color: #64748b;
+  background: #f1f5f9;
+  padding: 2px 8px;
+  border-radius: 4px;
+  margin-left: auto;
+}
+
+.stage-content {
+  padding-left: 36px;
+}
+
+.stage-desc {
+  font-size: 14px;
+  color: #475569;
+  margin-bottom: 12px;
+}
+
+.stage-skills {
+  margin-bottom: 8px;
+}
+
+.skill-label,
+.output-label {
+  font-size: 12px;
+  color: #64748b;
+  margin-right: 8px;
+}
+
+.skill-tags {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 4px;
+}
+
+.skill-tag {
+  font-size: 12px;
+  background: #e0f2fe;
+  color: #0369a1;
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
+.stage-output {
+  font-size: 13px;
+  color: #475569;
+}
+
+.output-text {
+  color: #1e293b;
+}
+
+.stage-arrow {
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 20px;
+  color: #cbd5e1;
+}
+
+.path-insight {
+  margin-top: 24px;
+  background: white;
+  border-radius: 12px;
+  padding: 16px;
+  display: flex;
+  gap: 16px;
+  border-left: 4px solid #f59e0b;
+}
+
+.insight-icon {
+  font-size: 24px;
+}
+
+.insight-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #1e293b;
+  margin-bottom: 8px;
+}
+
+.insight-list {
+  margin: 0;
+  padding-left: 20px;
+  font-size: 13px;
+  color: #475569;
+  line-height: 1.8;
+}
+
+.insight-list li {
+  margin-bottom: 4px;
+}
+
+@media (max-width: 640px) {
+  .stage-content {
+    padding-left: 0;
+  }
+
+  .stage-arrow {
+    display: none;
+  }
+}
+</style>