docs: 重构 README 附录展示 & 新增多个附录交互组件

README 更新:
- 移除顶部 header.png 横幅图片
- 新增「附录知识库」板块，以 3×3 网格展示 9 大知识领域精选内容
- 附录链接指向部署版网站 (datawhalechina.github.io)
- 阶段表格新增「附录」行，突出 80+ 交互式专题
- 章节标题「新手入门 & PM」简化为「零基础入门」
- News 新增 2026-02-25 附录知识库更新条目

新增交互组件:
- 异步任务队列 (async-task-queues) 演示组件
- 文件存储 (file-storage) 演示组件
- 项目架构 (project-architecture) 演示组件
- 限流与背压 (rate-limiting) 演示组件
- 搜索引擎 (search-engines) 演示组件
- 计算机基础: AppLaunch/BiosUefi/OSBoot 等启动流程演示组件

新增附录文档:
- 前端项目架构 (frontend-project-architecture.md)
- 后端项目架构 (backend-project-architecture.md)

内容优化:
- 算法思维、数据结构、编程语言、调试艺术等多篇附录内容更新
- HTML/CSS 布局、请求旅程等前后端文档完善
- 附录索引页 (index.md) 同步更新

docs/.vitepress/theme/components/appendix/file-storage/CDNAccelerationDemo.vue

@@ -0,0 +1,123 @@
+<!--
+  CDNAccelerationDemo.vue
+  CDN 加速演示：展示 CDN 如何加速文件访问
+-->
+<template>
+  <div class="cdn-demo">
+    <div class="header">
+      <div class="title">CDN 加速原理</div>
+      <div class="subtitle">对比有无 CDN 时的文件访问路径</div>
+    </div>
+
+    <div class="mode-tabs">
+      <button :class="['tab', { active: !cdnEnabled }]" @click="cdnEnabled = false">无 CDN</button>
+      <button :class="['tab', { active: cdnEnabled }]" @click="cdnEnabled = true">有 CDN</button>
+    </div>
+
+    <div class="diagram">
+      <div class="node user-node">
+        <div class="node-icon">👤</div>
+        <div class="node-label">北京用户</div>
+      </div>
+
+      <div class="path-line" :class="{ highlight: !cdnEnabled }">
+        <span class="latency">{{ cdnEnabled ? '5ms' : '200ms' }}</span>
+      </div>
+
+      <div v-if="cdnEnabled" class="node cdn-node">
+        <div class="node-icon">⚡</div>
+        <div class="node-label">北京 CDN 节点</div>
+        <div class="node-detail">缓存命中</div>
+      </div>
+
+      <div v-if="cdnEnabled" class="path-line miss-line">
+        <span class="latency miss">缓存未命中时回源</span>
+      </div>
+
+      <div class="node origin-node">
+        <div class="node-icon">🏢</div>
+        <div class="node-label">源站（美西 S3）</div>
+      </div>
+    </div>
+
+    <div class="metrics">
+      <div class="metric">
+        <div class="metric-label">首字节时间 (TTFB)</div>
+        <div class="metric-bar">
+          <div class="bar-fill" :style="{ width: cdnEnabled ? '15%' : '100%' }"></div>
+        </div>
+        <div class="metric-value">{{ cdnEnabled ? '~30ms' : '~200ms' }}</div>
+      </div>
+      <div class="metric">
+        <div class="metric-label">下载 1MB 图片</div>
+        <div class="metric-bar">
+          <div class="bar-fill" :style="{ width: cdnEnabled ? '20%' : '100%' }"></div>
+        </div>
+        <div class="metric-value">{{ cdnEnabled ? '~50ms' : '~800ms' }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+const cdnEnabled = ref(true)
+</script>
+
+<style scoped>
+.cdn-demo {
+  border: 1px solid var(--vp-c-divider); background: var(--vp-c-bg-soft);
+  border-radius: 12px; padding: 1.5rem; margin: 1.5rem 0;
+}
+.header { margin-bottom: 1rem; }
+.title { font-weight: 700; font-size: 1.1rem; }
+.subtitle { color: var(--vp-c-text-2); font-size: 0.9rem; }
+.mode-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }
+.tab {
+  padding: 0.4rem 0.8rem; border-radius: 6px; border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg); cursor: pointer; font-size: 0.85rem;
+}
+.tab.active { border-color: var(--vp-c-brand); color: var(--vp-c-brand); }
+.diagram {
+  display: flex; align-items: center; justify-content: center;
+  gap: 0.5rem; margin-bottom: 1.5rem; flex-wrap: wrap;
+}
+.node {
+  padding: 0.75rem 1rem; border-radius: 10px; text-align: center;
+  border: 2px solid var(--vp-c-divider); background: var(--vp-c-bg);
+}
+.cdn-node { border-color: #22c55e; background: rgba(34,197,94,0.05); }
+.node-icon { font-size: 1.5rem; }
+.node-label { font-weight: 600; font-size: 0.85rem; margin-top: 0.25rem; }
+.node-detail { font-size: 0.75rem; color: #22c55e; }
+.path-line {
+  display: flex; align-items: center; padding: 0 0.5rem;
+  font-size: 0.8rem; color: var(--vp-c-text-3);
+}
+.path-line::before, .path-line::after { content: '→'; margin: 0 0.25rem; }
+.latency {
+  padding: 0.15rem 0.4rem; border-radius: 4px; font-family: var(--vp-font-family-mono);
+  background: rgba(var(--vp-c-brand-rgb), 0.1); color: var(--vp-c-brand); font-size: 0.75rem;
+}
+.latency.miss { background: rgba(245,158,11,0.1); color: #f59e0b; font-family: var(--vp-font-family-base); }
+.miss-line { opacity: 0.5; }
+.metrics { display: flex; flex-direction: column; gap: 0.75rem; }
+.metric { display: flex; align-items: center; gap: 0.75rem; }
+.metric-label { min-width: 140px; font-size: 0.85rem; font-weight: 600; }
+.metric-bar {
+  flex: 1; height: 20px; background: var(--vp-c-bg); border-radius: 4px;
+  border: 1px solid var(--vp-c-divider); overflow: hidden;
+}
+.bar-fill {
+  height: 100%; background: var(--vp-c-brand); border-radius: 3px;
+  transition: width 0.5s ease;
+}
+.metric-value { min-width: 80px; font-size: 0.85rem; font-family: var(--vp-font-family-mono); text-align: right; }
+@media (max-width: 640px) {
+  .diagram { flex-direction: column; }
+  .path-line::before, .path-line::after { content: '↓'; }
+  .metric { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
+  .metric-label { min-width: auto; }
+  .metric-value { min-width: auto; }
+}
+</style>