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) 同步更新
2026-02-25 12:22:49 +08:00
parent f44c842fe7
commit df51f84ab5
36 changed files with 8535 additions and 393 deletions
@@ -0,0 +1,143 @@
+<!--
+  AsyncComparisonDemo.vue
+  异步任务框架对比演示
+-->
+<template>
+  <div class="comparison-demo">
+    <div class="header">
+      <div class="title">主流异步任务框架对比</div>
+      <div class="subtitle">点击查看各框架详情</div>
+    </div>
+
+    <div class="framework-grid">
+      <div
+        v-for="fw in frameworks"
+        :key="fw.name"
+        :class="['fw-card', { active: selected === fw.name }]"
+        @click="selected = fw.name"
+      >
+        <div class="fw-name">{{ fw.name }}</div>
+        <div class="fw-lang">{{ fw.lang }}</div>
+        <div class="fw-stars">
+          <span v-for="n in 5" :key="n" :class="n <= fw.rating ? 'star-filled' : 'star-empty'">★</span>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="currentFw" class="detail-panel">
+      <div class="detail-header">
+        <span class="detail-name">{{ currentFw.name }}</span>
+        <span class="detail-lang-tag">{{ currentFw.lang }}</span>
+      </div>
+      <div class="detail-desc">{{ currentFw.desc }}</div>
+      <div class="detail-features">
+        <div class="feature-title">核心特性：</div>
+        <div class="feature-list">
+          <span v-for="f in currentFw.features" :key="f" class="feature-tag">{{ f }}</span>
+        </div>
+      </div>
+      <div class="detail-usecase">
+        <div class="usecase-title">典型场景：</div>
+        <div class="usecase-text">{{ currentFw.usecase }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const selected = ref('Celery')
+
+const frameworks = [
+  {
+    name: 'Celery',
+    lang: 'Python',
+    rating: 5,
+    desc: 'Python 生态最流行的分布式任务队列，支持多种消息中间件（RabbitMQ、Redis），功能全面且社区活跃。',
+    features: ['定时任务', '任务链', '结果存储', '自动重试', '优先级队列', '任务路由'],
+    usecase: '数据处理管道、邮件发送、报表生成、机器学习训练任务'
+  },
+  {
+    name: 'Sidekiq',
+    lang: 'Ruby',
+    rating: 5,
+    desc: 'Ruby 生态的高性能后台任务处理器，基于 Redis，使用多线程模型，内存效率极高。',
+    features: ['多线程', 'Web UI', '定时任务', '批量处理', '速率限制', '唯一任务'],
+    usecase: 'Rails 应用的邮件、通知、数据导入导出'
+  },
+  {
+    name: 'Bull',
+    lang: 'Node.js',
+    rating: 4,
+    desc: 'Node.js 生态最成熟的任务队列库，基于 Redis，支持优先级、延迟任务、重复任务等。BullMQ 是其下一代版本。',
+    features: ['优先级', '延迟任务', '速率限制', '并发控制', '事件驱动', 'Dashboard'],
+    usecase: 'API 后台处理、文件转换、爬虫任务、通知推送'
+  },
+  {
+    name: 'RQ',
+    lang: 'Python',
+    rating: 3,
+    desc: '轻量级 Python 任务队列，基于 Redis，API 简洁易用。适合不需要 Celery 全部功能的中小项目。',
+    features: ['简洁 API', '任务依赖', 'Worker 管理', '失败重试', 'Dashboard'],
+    usecase: '中小型 Web 应用的后台任务处理'
+  },
+  {
+    name: 'Kafka Streams',
+    lang: 'Java/JVM',
+    rating: 4,
+    desc: '基于 Kafka 的流处理框架，适合高吞吐量的实时数据处理场景，天然支持分布式和容错。',
+    features: ['流处理', '精确一次语义', '状态存储', '窗口操作', '高吞吐', '容错'],
+    usecase: '实时数据管道、事件驱动架构、日志聚合分析'
+  }
+]
+
+const currentFw = computed(() => frameworks.find(f => f.name === selected.value))
+</script>
+
+<style scoped>
+.comparison-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; }
+.framework-grid {
+  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 0.5rem; margin-bottom: 1rem;
+}
+.fw-card {
+  padding: 0.75rem; border-radius: 8px; background: var(--vp-c-bg);
+  border: 2px solid var(--vp-c-divider); cursor: pointer; text-align: center;
+  transition: all 0.2s;
+}
+.fw-card:hover { border-color: var(--vp-c-brand); }
+.fw-card.active { border-color: var(--vp-c-brand); background: rgba(var(--vp-c-brand-rgb), 0.05); }
+.fw-name { font-weight: 700; font-size: 0.95rem; }
+.fw-lang { font-size: 0.8rem; color: var(--vp-c-text-2); margin: 0.25rem 0; }
+.fw-stars { font-size: 0.85rem; }
+.star-filled { color: #f59e0b; }
+.star-empty { color: var(--vp-c-divider); }
+.detail-panel {
+  padding: 1rem; border-radius: 10px; background: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+}
+.detail-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
+.detail-name { font-weight: 700; font-size: 1rem; }
+.detail-lang-tag {
+  padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.75rem;
+  background: rgba(var(--vp-c-brand-rgb), 0.1); color: var(--vp-c-brand);
+}
+.detail-desc { font-size: 0.9rem; color: var(--vp-c-text-2); margin-bottom: 0.75rem; line-height: 1.6; }
+.feature-title, .usecase-title { font-weight: 600; font-size: 0.85rem; margin-bottom: 0.4rem; }
+.feature-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; }
+.feature-tag {
+  padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.75rem;
+  background: var(--vp-c-bg-soft); border: 1px solid var(--vp-c-divider);
+}
+.usecase-text { font-size: 0.85rem; color: var(--vp-c-text-2); }
+</style>