feat: add 30 interactive components for computer fundamentals section

Added comprehensive interactive demos covering: - Operating systems (2): OS overview, process/memory/filesystem - Data encoding (2): data lifecycle, encoding/storage/transmission - Network basics (5): overview, physical/data-link/transport/application layers - Data structures (5): overview, linear structures, hash table, tree, selector - Algorithms (4): overview, recursion, greedy thinking, paradigms - Programming languages (5): evolution, paradigms, scenarios, comparison, type models - Compilers (2): analogy, practice demo - Additional (5): search/sort algorithms, network principles, encoding basics, storage hierarchy, graph structures Also updated component registration in theme index.js and fixed minor formatting issues in related docs.
2026-02-20 21:59:52 +08:00
parent 0e8618f902
commit ec9d52033f
39 changed files with 13733 additions and 43 deletions
@@ -3,8 +3,8 @@

 在开始之前，建议你先了解：

- **基础网络概念**：如果你还不熟悉 IP 地址、端口、域名等概念，建议先阅读 [网络基础知识](/zh-cn/appendix/computer-networks)
- **API 是什么**：如果你对 API 还不了解，可以先看 [API 入门](/zh-cn/appendix/api-intro)
+- **基础网络概念**：如果你还不熟悉 IP 地址、端口、域名等概念，建议先阅读 [网络基础知识](/zh-cn/appendix/1-computer-fundamentals/computer-networks)
+- **API 是什么**：如果你对 API 还不了解，可以先看 [API 入门](/zh-cn/appendix/4-server-and-backend/api-intro)

 ---

@@ -632,8 +632,8 @@ resource "aws_security_group" "web" {

 ## 12. 延伸阅读

- **[系统缓存设计](/zh-cn/appendix/cache-design)** - 缓存原理、模式与最佳实践
- **[消息队列设计](/zh-cn/appendix/queue-design)** - 削峰填谷、异步解耦
- **[鉴权原理与实战](/zh-cn/appendix/auth-design)** - 认证授权、安全加固
- **[后端进化史](/zh-cn/appendix/backend-evolution)** - 从单体到微服务到 Serverless
- **[部署与上线](/zh-cn/appendix/deployment)** - 从开发到生产的最后一公里
+- **[系统缓存设计](/zh-cn/appendix/4-server-and-backend/caching)** - 缓存原理、模式与最佳实践
+- **[消息队列设计](/zh-cn/appendix/4-server-and-backend/message-queues)** - 削峰填谷、异步解耦
+- **[鉴权原理与实战](/zh-cn/appendix/4-server-and-backend/auth-authorization)** - 认证授权、安全加固
+- **[后端进化史](/zh-cn/appendix/4-server-and-backend/backend-layered-architecture)** - 从单体到微服务到 Serverless
+- **[部署与上线](/zh-cn/appendix/7-infrastructure-and-operations/ci-cd)** - 从开发到生产的最后一公里
@@ -18,7 +18,7 @@

 ### 总附录

-[AI 能力词典：常见 AI 核心概念与名词、场景解释](/zh-cn/appendix/ai-capability-dictionary)
+[AI 能力词典：常见 AI 核心概念与名词、场景解释](/zh-cn/appendix/8-artificial-intelligence/ai-capability-dictionary)

 ### 零、幼儿园

@@ -300,7 +300,7 @@ AI 出现之后,第一次给了普通人一个全新的可能：你不需要会

 此外，我们还可以要求 LLM 帮你直接生成项目级的提示词。在上一节中，我们只自己写了贪吃蛇游戏的提示词。现在让我们尝试让大模型生成一个带有整体框架和实现路径的提示词（你可以直接用 z.ai 生成）。

-如果你想学习如何写出更好的提示词，可以查看[提示词工程附录](../../appendix/prompt-engineering/index.md)。
+如果你想学习如何写出更好的提示词，可以查看[提示词工程附录](/zh-cn/appendix/8-artificial-intelligence/prompt-engineering)。

 > 我想让 AI 生成一个网页贪吃蛇游戏，需要一个更完整的提示词，让生成结果更令人印象深刻和有趣。请生成相应的提示词。当前目标是：生成一个贪吃蛇游戏，需要实现吃不同单词生成诗歌的功能，并且应该包含图像生成模块。

@@ -639,7 +639,7 @@ z.ai 的回复将会是这样的：

 > "用 React 做一个排行榜页面，右侧显示分数列表，点击某行在下方展示玩家详情，风格简洁现代。"

-如果你想深入理解 HTML、CSS、JavaScript 等前端基础知识，可以查看[Web 基础附录](../../appendix/web-basics.md)。想了解前端技术的发展历程，可以查看[前端进化史附录](../../appendix/frontend-evolution.md)。
+如果你想深入理解 HTML、CSS、JavaScript 等前端基础知识，可以查看[Web 基础附录](/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive)。想了解前端技术的发展历程，可以查看[前端进化史附录](/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks)。

 ## <span id="appendix-2">[附录 2：到底什么是 Vibe Coding](#appendix-nav)</span>

@@ -64,7 +64,7 @@ const duration = '约 <strong>1 天</strong>，可分多次完成'
 ## 2. 什么是 IDE，为什么需要 IDE

 ::: info 预习提示
-如果你还不熟悉 IDE 是什么、各个界面元素有什么作用，建议先阅读 [IDE 简介](../../appendix/ide-intro/) 进行预习，了解 IDE 的基本概念和常见功能。
+如果你还不熟悉 IDE 是什么、各个界面元素有什么作用，建议先阅读 [IDE 简介](/zh-cn/appendix/2-development-tools/ide-basics) 进行预习，了解 IDE 的基本概念和常见功能。
 :::

 在早期编程时代，我们只需要简单文本编辑器和语言处理器即可。但随着项目复杂度增加，开发者迫切需要一种能高效管理文件、支持语法高亮和调试的工具，于是集成开发环境（IDE）应运而生。
@@ -99,7 +99,7 @@ VS Code 的核心理念是“一切皆插件”。它通过插件机制支持各

 总之，IDE 是一套帮助开发者高效写代码和运行程序的工具集。

-更具体的详细内容解释，请查看[附录中的 虚拟 IDE 可视化 IDE 原理部分](/zh-cn/appendix/ide-intro/)。
+更具体的详细内容解释，请查看[附录中的 虚拟 IDE 可视化 IDE 原理部分](/zh-cn/appendix/2-development-tools/ide-basics)。

 ## 3. AI IDE 和普通 IDE 有什么不同

@@ -487,7 +487,7 @@ AI 会根据你的描述，直接修改 React 组件和样式。保存后刷新
 - **Panel（底部面板）**：包含终端和输出窗口。
 - **Status Bar（状态栏）**：显示当前环境状态。

-更具体的详细内容解释，请查看[附录中的 虚拟 IDE 可视化 IDE 原理部分](/zh-cn/appendix/ide-intro/)。
+更具体的详细内容解释，请查看[附录中的 虚拟 IDE 可视化 IDE 原理部分](/zh-cn/appendix/2-development-tools/ide-basics)。

 <div style="margin: 50px 0;">
  <ClientOnly>
@@ -745,7 +745,7 @@ AI 很认真地给了你一段代码，你也老老实实地复制进去了，
      <span style="font-size: 12px; color: #909399">看到不懂的计算机名词时，来这里快速查含义，推荐通读一遍。</span>
    </el-col>
    <el-col :span="12">
-      <a href="../../appendix/ide-intro/" style="text-decoration: none; color: inherit;"><b>附录二：Visual Studio Code 菜单栏解析</b></a><br/>
+      <a href="/zh-cn/appendix/2-development-tools/ide-basics" style="text-decoration: none; color: inherit;"><b>附录二：Visual Studio Code 菜单栏解析</b></a><br/>
      <span style="font-size: 12px; color: #909399">不知道 AI IDE 的界面有什么用的时候，拿以下内容和 AI 对话进行查阅，或者直接查看。</span>
    </el-col>
  </el-row>
@@ -54,7 +54,7 @@ API 是计算机领域的一个重要抽象概念，我们可以简单理解为
 6. **错误处理**：当出现问题时（如API Key错误、请求太频繁等），知道如何排查解决。

 ::: info ℹ️ 什么是 API
-对于 API 的更深入的解释，请看附录：[API 入门](/zh-cn/appendix/api-intro)。
+对于 API 的更深入的解释，请看附录：[API 入门](/zh-cn/appendix/4-server-and-backend/api-intro)。

 ::: warning 🔐 **API 安全注意事项**
 API Key 是你请求 AI 服务的「通行证」，它是一串密码字符串，用于身份验证和计费。
@@ -89,7 +89,7 @@ API Key 是你请求 AI 服务的「通行证」，它是一串密码字符串
 在 `1.2 动手做出原型` 里，你已经做出了一个可交互的原型。接下来我们要做的，是把原型里“看起来像 AI 的功能”变成真正可用的能力：**当用户点击按钮时，原型会向外部的 AI 服务发出请求，并把返回的文字展示出来。**

 ::: info ℹ️ 原理延伸
-如果你想了解更多原理相关的内容，请查看附录：[大语言模型（LLM）入门](/zh-cn/appendix/llm-intro)。
+如果你想了解更多原理相关的内容，请查看附录：[大语言模型（LLM）入门](/zh-cn/appendix/8-artificial-intelligence/llm-principles)。
 ::: details 了解更多：DeepSeek 是什么？

 **杭州深度求索人工智能基础技术研究有限公司**（Hangzhou DeepSeek Artificial Intelligence Basic Technology Research Co., Ltd.），以 DeepSeek 为商号，是一家**开发大语言模型（LLMs）的中国人工智能（AI）公司**。DeepSeek 总部位于浙江杭州，由中国对冲基金幻方量化（High-Flyer）拥有并资助。DeepSeek 由幻方量化的联合创始人梁文锋于 2023 年 7 月创立，他也同时担任这两家公司的 CEO。该公司于 2025 年 1 月推出了同名聊天机器人及其 DeepSeek-R1 模型。
@@ -164,7 +164,7 @@ curl  \
 # 3. 接入图像转文字 API：Qwen3 VL

 ::: info ℹ️ 原理延伸
-如果你想了解更多原理相关的内容，请查看附录：[视觉语言模型（VLM）入门](/zh-cn/appendix/vlm-intro)。
+如果你想了解更多原理相关的内容，请查看附录：[视觉语言模型（VLM）入门](/zh-cn/appendix/8-artificial-intelligence/multimodal-models)。

 ::: details 了解更多：Qwen3 VL 是什么？

@@ -314,7 +314,7 @@ caption = caption_image(image_path)
 在前面的部分我们主要和文本相关的任务打交道，接下来我们将尝试接入图片生成的功能，支持从文字描述生成图片，或者对图片进行修改。

 ::: info ℹ️ 原理延伸
-如果你想了解更多原理相关的内容，请查看附录：[图像生成入门](/zh-cn/appendix/image-gen-intro)。
+如果你想了解更多原理相关的内容，请查看附录：[图像生成入门](/zh-cn/appendix/8-artificial-intelligence/image-generation)。

 ::: details 了解更多：什么是 [Seedream 即梦](https://seed.bytedance.com/en/seedream4_5)？