diff --git a/docs/.vitepress/theme/components/HomeFeatures.vue b/docs/.vitepress/theme/components/HomeFeatures.vue
index f1c9504..e91ac8f 100644
--- a/docs/.vitepress/theme/components/HomeFeatures.vue
+++ b/docs/.vitepress/theme/components/HomeFeatures.vue
@@ -155,62 +155,62 @@ const i18n = {
{
title: 'AI 进化史',
desc: '回顾人工智能发展历程中的关键里程碑。',
- link: '/zh-cn/appendix/ai-evolution'
+ link: '/zh-cn/appendix/8-artificial-intelligence/ai-history'
},
{
title: '提示词工程',
desc: '掌握与 AI 高效对话的技巧,解锁潜力。',
- link: '/zh-cn/appendix/prompt-engineering'
+ link: '/zh-cn/appendix/8-artificial-intelligence/prompt-engineering'
},
{
title: '大语言模型',
desc: '深入浅出解析 LLM 的工作原理与应用。',
- link: '/zh-cn/appendix/llm-intro'
+ link: '/zh-cn/appendix/8-artificial-intelligence/llm-principles'
},
{
title: 'Agent 智能体',
desc: '探索具备自主决策与执行能力的 AI 架构。',
- link: '/zh-cn/appendix/agent-intro'
+ link: '/zh-cn/appendix/8-artificial-intelligence/ai-agents'
},
{
title: '前端基础',
desc: 'HTML/CSS/JS 三大基石,入门必修课。',
- link: '/zh-cn/appendix/web-basics'
+ link: '/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive'
},
{
title: '前端进化史',
desc: '了解前端技术栈演变,把握发展趋势。',
- link: '/zh-cn/appendix/frontend-evolution'
+ link: '/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks'
},
{
title: '后端架构',
desc: '从单体到微服务,探索架构演进之路。',
- link: '/zh-cn/appendix/backend-evolution'
+ link: '/zh-cn/appendix/4-server-and-backend/backend-layered-architecture'
},
{
title: '后端语言',
desc: '对比主流后端语言特性,选择最佳技术栈。',
- link: '/zh-cn/appendix/backend-languages'
+ link: '/zh-cn/appendix/4-server-and-backend/backend-languages'
},
{
title: '数据库原理',
desc: '理解数据库核心原理,掌握数据存储艺术。',
- link: '/zh-cn/appendix/database-intro'
+ link: '/zh-cn/appendix/5-data/database-fundamentals'
},
{
title: 'API 设计',
desc: 'API 接口设计与开发的基础知识。',
- link: '/zh-cn/appendix/api-intro'
+ link: '/zh-cn/appendix/4-server-and-backend/api-intro'
},
{
title: 'Git 版本控制',
desc: '深入理解 Git 原理与高级用法。',
- link: '/zh-cn/appendix/git-intro'
+ link: '/zh-cn/appendix/2-development-tools/git-version-control'
},
{
title: '计算机网络',
desc: '网络协议与通信原理的基础知识。',
- link: '/zh-cn/appendix/computer-networks'
+ link: '/zh-cn/appendix/1-computer-fundamentals/computer-networks'
}
]
},
@@ -1552,73 +1552,73 @@ const appendixCards = [
title: '人工智能',
desc: 'LLM、Agent、RAG,深入 AI 底层原理。',
tag: 'AI',
- link: '/zh-cn/appendix/ai-evolution'
+ link: '/zh-cn/appendix/8-artificial-intelligence/ai-history'
},
{
title: '提示词工程',
desc: '掌握与 AI 高效对话的技巧,解锁潜力。',
tag: 'AI',
- link: '/zh-cn/appendix/prompt-engineering'
+ link: '/zh-cn/appendix/8-artificial-intelligence/prompt-engineering'
},
{
title: '大语言模型',
desc: '深入浅出解析 LLM 的工作原理与应用。',
tag: 'AI',
- link: '/zh-cn/appendix/llm-intro'
+ link: '/zh-cn/appendix/8-artificial-intelligence/llm-principles'
},
{
title: 'Agent 智能体',
desc: '探索具备自主决策与执行能力的 AI 架构。',
tag: 'AI',
- link: '/zh-cn/appendix/agent-intro'
+ link: '/zh-cn/appendix/8-artificial-intelligence/ai-agents'
},
{
title: '前端基础',
desc: 'HTML/CSS/JS 三大基石,入门必修课。',
tag: 'Frontend',
- link: '/zh-cn/appendix/web-basics'
+ link: '/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive'
},
{
title: '前端进化史',
desc: '了解前端技术栈演变,把握发展趋势。',
tag: 'Frontend',
- link: '/zh-cn/appendix/frontend-evolution'
+ link: '/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks'
},
{
title: '后端架构',
desc: '从单体到微服务,探索架构演进之路。',
tag: 'Backend',
- link: '/zh-cn/appendix/backend-evolution'
+ link: '/zh-cn/appendix/4-server-and-backend/backend-layered-architecture'
},
{
title: '后端语言',
desc: '对比主流后端语言特性,选择最佳技术栈。',
tag: 'Backend',
- link: '/zh-cn/appendix/backend-languages'
+ link: '/zh-cn/appendix/4-server-and-backend/backend-languages'
},
{
title: '数据库原理',
desc: '理解数据库核心原理,掌握数据存储艺术。',
tag: 'Database',
- link: '/zh-cn/appendix/database-intro'
+ link: '/zh-cn/appendix/5-data/database-fundamentals'
},
{
title: 'API 设计',
desc: 'API 接口设计与开发的基础知识。',
tag: 'API',
- link: '/zh-cn/appendix/api-intro'
+ link: '/zh-cn/appendix/4-server-and-backend/api-intro'
},
{
title: 'Git 版本控制',
desc: '深入理解 Git 原理与高级用法。',
tag: 'General',
- link: '/zh-cn/appendix/git-intro'
+ link: '/zh-cn/appendix/2-development-tools/git-version-control'
},
{
title: '计算机网络',
desc: '网络协议与通信原理的基础知识。',
tag: 'General',
- link: '/zh-cn/appendix/computer-networks'
+ link: '/zh-cn/appendix/1-computer-fundamentals/computer-networks'
}
]
diff --git a/docs/.vitepress/theme/components/NavCard.vue b/docs/.vitepress/theme/components/NavCard.vue
index 7012d63..a0ebd16 100644
--- a/docs/.vitepress/theme/components/NavCard.vue
+++ b/docs/.vitepress/theme/components/NavCard.vue
@@ -1,4 +1,6 @@
+
+
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/AlgorithmParadigmDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/AlgorithmParadigmDemo.vue
new file mode 100644
index 0000000..8aaf089
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/AlgorithmParadigmDemo.vue
@@ -0,0 +1,490 @@
+
+
+
+
+
+ 算法设计范式是解决问题的通用策略 ,掌握这些套路可以快速找到解题思路
+
+
+
+
+
{{ paradigm.icon }}
+
{{ paradigm.name }}
+
{{ paradigm.tagline }}
+
+
+
+
+
+
+
+
+
+
核心思想
+
{{ currentParadigm.idea }}
+
+
+
+
适用场景
+
+
+ {{ scenario }}
+
+
+
+
+
+
+
+
时间复杂度
+
+
{{ currentParadigm.complexity }}
+
{{ currentParadigm.complexityNote }}
+
+
+
+
+
+
+
+
范式对比总结
+
+
+
+ 范式
+ 核心策略
+ 最优性
+ 适用场景
+
+
+
+
+ {{ item.icon }} {{ item.name }}
+ {{ item.strategy }}
+ {{ item.optimal }}
+ {{ item.use }}
+
+
+
+
+
+
+
+
如何选择合适的范式?
+
+
+
1
+
+
分析问题特征
+
是否有重叠子问题?是否有最优子结构?
+
+
+
+
2
+
+
判断是否需要最优解
+
贪心不一定最优,动态规划保证最优
+
+
+
+
3
+
+
考虑数据规模
+
回溯适合小规模,分治适合大规模
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/ApplicationLayerDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/ApplicationLayerDemo.vue
new file mode 100644
index 0000000..f3e41a3
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/ApplicationLayerDemo.vue
@@ -0,0 +1,531 @@
+
+
+
+
+
+
+
{{ protocol.icon }}
+
{{ protocol.name }}
+
{{ protocol.desc }}
+
+
+
+
+
+
+
+
+
+
作用
+
{{ currentProtocol.purpose }}
+
+
+
+
工作原理
+
+
+ {{ index + 1 }}
+ {{ step }}
+
+
+
+
+
+
日常应用
+
+
+ {{ app.icon }} {{ app.name }}
+
+
+
+
+
+
+
+
+
HTTP 请求/响应示例
+
+
+
+
+
+
GET /index.html HTTP/1.1
+
+
+
+
+
+
+
→
+
+
+
+
+
HTTP/1.1 200 OK
+
+
+
+
<html>...</html>
+
+
+
+
+
+
+
+
+
DNS 查询过程
+
+
+
💻
+
用户输入 www.example.com
+
+
→
+
+
→
+
+
📍
+
返回 IP: 93.184.216.34
+
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/CompilationPracticeDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/CompilationPracticeDemo.vue
new file mode 100644
index 0000000..a24f472
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/CompilationPracticeDemo.vue
@@ -0,0 +1,327 @@
+
+
+
+
+
+
+
+
编译步骤
+
+
+
{{ index + 1 }}
+
+
{{ step.name }}
+
{{ step.command }}
+
{{ step.output }}
+
+
+
+
+
+
+
生成的文件
+
+
+
{{ file.icon }}
+
+
{{ file.name }}
+
{{ file.desc }}
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/CompilerAnalogyDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/CompilerAnalogyDemo.vue
new file mode 100644
index 0000000..47ded51
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/CompilerAnalogyDemo.vue
@@ -0,0 +1,529 @@
+
+
+
+
+
+
+
+ 编译器就像翻译官 ,把人类能懂的代码翻译成机器能懂的指令
+
+
+
+
+
+
+
代码翻译的完整流程
+
+
+
{{ index + 1 }}
+
+
{{ step.name }}
+
{{ step.desc }}
+
{{ step.example }}
+
+
→
+
+
+
+
+
+
+
词法分析:分词
+
+
+ int age = 25;
+
+
↓
+
+
+ {{ token.type }}
+ {{ token.value }}
+
+
+
+
+
+
+
+
语法分析:构建树
+
+
+
+
赋值语句
+
+
+ 变量
+ age
+
+
+ 运算符
+ =
+
+
+ 数字
+ 25
+
+
+
+
+
+
+
+
+
+
编译 vs 解释
+
+
+
+
+
源代码 → 编译器 → 机器码
+
C, Go, Rust
+
+
✓ 执行快
+
✓ 一次编译多次运行
+
✗ 编译慢
+
+
+
+
+
+
+
+
源代码 → 解释器 → 逐行执行
+
Python, JavaScript, PHP
+
+
✓ 开发快
+
✓ 跨平台
+
✗ 执行慢
+
+
+
+
+
+
+
+
+
编译器优化
+
+
+
+ 编译器会自动优化代码,提高运行效率
+
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataEncodingBasicsDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataEncodingBasicsDemo.vue
new file mode 100644
index 0000000..e2fa3b0
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataEncodingBasicsDemo.vue
@@ -0,0 +1,263 @@
+
+
+
+
+
+ 计算机只能识别 0 和 1 ,所有数据都需要转换成二进制
+
+
+
+
+
+
位 (Bit)
+
0 或 1
+
最小数据单位
+
+
+
字节 (Byte)
+
8 位
+
常用存储单位
+
+
+
+
+
+
+
+
常见编码标准
+
+
+
+ 编码
+ 说明
+ 用途
+
+
+
+
+ ASCII
+ 7 位,128 个字符
+ 英文字符
+
+
+ Unicode
+ 统一码,全球字符
+ 多语言文本
+
+
+ UTF-8
+ 变长编码,1-4 字节
+ 网页文本
+
+
+ Base64
+ 二进制转文本
+ 邮件、图片
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataLifecycleDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataLifecycleDemo.vue
new file mode 100644
index 0000000..8fa8072
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataLifecycleDemo.vue
@@ -0,0 +1,401 @@
+
+
+
+
+
+
+
+
+
+
+
+
{{ stage.title }}
+
{{ stage.description }}
+
+
+
示例:{{ stage.example.label }}
+
+
+ {{ item.label }}:
+ {{ item.value }}
+
+
+
+
+
+
编码方式:
+
{{ stage.encoding }}
+
+
+
+
+
+
↓
+
+
+
+
+
数据转换的关键点
+
+
+
{{ point.icon }}
+
+
{{ point.title }}
+
{{ point.desc }}
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataLinkLayerDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataLinkLayerDemo.vue
new file mode 100644
index 0000000..e00c308
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataLinkLayerDemo.vue
@@ -0,0 +1,480 @@
+
+
+
+
+
+
局域网场景
+
+
+
{{ device.icon }}
+
{{ device.name }}
+
{{ device.mac }}
+
{{ device.roleText }}
+
+
+
+
+
+
🔄
+
交换机
+
根据 MAC 地址转发数据帧
+
+
+
+
+
+
以太网帧结构
+
+
+
+
{{ field.name }}
+
{{ field.value }}
+
{{ field.size }}
+
+
+
+
+
+
+
+
数据帧传输过程
+
+
+
{{ index + 1 }}
+
+
{{ step.title }}
+
{{ step.desc }}
+
+
+
+
+
+
+
+
ARP:IP 地址到 MAC 地址的映射
+
+
+ ❓
+ 谁有 IP 地址 192.168.1.200?
+
+
↓ 广播到局域网
+
+ ✅
+ 我是!我的 MAC 地址是 00:11:22:33:44:66
+
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataStructureOverviewDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataStructureOverviewDemo.vue
new file mode 100644
index 0000000..83d09c1
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataStructureOverviewDemo.vue
@@ -0,0 +1,530 @@
+
+
+
+
+
+
+ 数据结构就像整理房间的方式:把衣服放进衣柜、书放在书架、杂物放抽屉
+
+
+
+
+
{{ category.icon }}
+
{{ category.name }}
+
{{ category.desc }}
+
+
+ {{ example }}
+
+
+
+
+
+
+
+
+
+
+
+
+
特点
+
+
+ ✓
+ {{ feature }}
+
+
+
+
+
+
适用场景
+
+
+
{{ scenario.icon }}
+
+
{{ scenario.title }}
+
{{ scenario.desc }}
+
+
+
+
+
+
+
操作复杂度
+
+
+
+ {{ op.operation }}
+ {{ op.time }}
+
+
+
+
+
+
+
+
+
生活类比
+
+
{{ currentCategory.analogy.text }}
+
{{ currentCategory.analogy.example }}
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataStructureSelectorDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataStructureSelectorDemo.vue
new file mode 100644
index 0000000..40394b2
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/DataStructureSelectorDemo.vue
@@ -0,0 +1,486 @@
+
+
+
+
+
+
你的使用场景是?
+
+
+
{{ scenario.icon }}
+
{{ scenario.name }}
+
{{ scenario.desc }}
+
+
+
+
+
+
+
+
+
+
+
+
实际例子
+
{{ currentScenario.example }}
+
+
+
+
+
+
快速参考表
+
+
+
+ 场景需求
+ 推荐数据结构
+ 时间复杂度
+
+
+
+
+ {{ row.scenario }}
+ {{ row.structure }}
+ {{ row.complexity }}
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/EncodingStorageTransmissionDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/EncodingStorageTransmissionDemo.vue
new file mode 100644
index 0000000..24b78b2
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/EncodingStorageTransmissionDemo.vue
@@ -0,0 +1,637 @@
+
+
+
+
+
+
选择场景:
+
+
+ {{ scenario.icon }} {{ scenario.name }}
+
+
+
+
+
+
+
+
+
+
+
+
↓
+
+
编码后
+
{{ currentScenario.encoding.output }}
+
+
+
+
+
+
+
+
+
+
+
+ 位置:
+ {{ currentScenario.storage.location }}
+
+
+ 大小:
+ {{ currentScenario.storage.size }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ layer.name }}:
+ {{ layer.value }}
+
+
+
+
+
+
+ 协议:
+ {{ currentScenario.transmission.protocol }}
+
+
+ 路径:
+ {{ currentScenario.transmission.path }}
+
+
+
+
+
+
+
+
+
+ {{ currentScenario.relationships.encodingToStorage }}
+ →
+
+
+ {{ currentScenario.relationships.storageToTransmission }}
+ →
+
+
+
+
+
+
+
协作要点
+
+
+
{{ point.icon }}
+
+
{{ point.title }}
+
{{ point.desc }}
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/GraphStructureDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/GraphStructureDemo.vue
new file mode 100644
index 0000000..44e7869
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/GraphStructureDemo.vue
@@ -0,0 +1,309 @@
+
+
+
+
+
+
+
+ 无向图
+
+
+ 有向图
+
+
+ 带权图
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ node.label }}
+
+
+
+
+
+
+
图的特点
+
+
+
节点 (V)
+
{{ nodes.length }}
+
+
+
边 (E)
+
{{ edges.length }}
+
+
+
度
+
{{ averageDegree }}
+
+
+
+
+
+
应用场景
+
+
+ 🗺️
+ 地图导航(最短路径)
+
+
+ 👥
+ 社交网络(好友关系)
+
+
+ 🌐
+ 网页链接(PageRank)
+
+
+ 🔗
+ 依赖关系(包管理)
+
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/GreedyThinkingDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/GreedyThinkingDemo.vue
new file mode 100644
index 0000000..c825692
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/GreedyThinkingDemo.vue
@@ -0,0 +1,560 @@
+
+
+
+
+
+
+
💡
+
+ 贪心算法在每一步选择中都采取当前状态下最优 的选择
+ 希望通过一系列局部最优选择达到全局最优
+
+
+
+
+
+
经典问题
+
+
+ {{ scenario.icon }} {{ scenario.name }}
+
+
+
+
+
+
+
找零钱问题
+
+
+ 需要找零:{{ changeAmount }} 元
+
+
+
+
{{ step.coin }}
+
× {{ step.count }} = {{ step.value }}元
+
+
+
+ 共需要 {{ totalCoins }} 个硬币
+
+
+
+ ✓ 贪心策略:每次选择面值最大的硬币
+ ✓ 适用于人民币、美元等货币系统
+
+
+
+
+
+
活动选择问题
+
+
+
+
{{ activity.start }} - {{ activity.end }}
+
{{ activity.name }}
+
+
+
+ 贪心策略:选择最早结束 的活动
+
+
+ 最多可以参加 {{ selectedCount }} 个活动
+
+
+
+
+
+
+
最短路径问题 (Dijkstra)
+
+
+
+
A(起点)
+
B
+
C
+
D
+
E(终点)
+
+
+
A-B: 4
+
A-C: 2
+
B-D: 3
+
C-D: 1
+
C-E: 5
+
D-E: 2
+
+
+
+
从 A 出发,选择距离最近的节点
+
A → C → D → E
+
总距离:2 + 1 + 2 = 5
+
+
+
+
+
+
+
贪心 vs 动态规划
+
+
+
+
+ 特点
+ 贪心算法
+ 动态规划
+
+
+
+
+ 决策方式
+ 每步选当前最优
+ 考虑所有可能,选最优
+
+
+ 最优性
+ 可能不是全局最优
+ 保证全局最优
+
+
+ 时间复杂度
+ O(n) 或 O(n log n)
+ O(n²) 或更高
+
+
+ 适用场景
+ 局部最优 → 全局最优
+ 重叠子问题
+
+
+
+
+
+
+
+
+
+
+
✗ 缺点
+
+ 不保证全局最优
+ 适用范围有限
+ 需要证明最优性
+
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/HashTableDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/HashTableDemo.vue
new file mode 100644
index 0000000..0b0504f
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/HashTableDemo.vue
@@ -0,0 +1,434 @@
+
+
+
+
+
+
📚
+
+ 哈希表就像图书馆的索引卡片 :不用在一排排书架上找,直接查索引就能找到书的位置
+
+
+
+
+
+
+
+
哈希过程
+
+
+
输入键
+
{{ exampleKey }}
+
+
↓
+
+
哈希函数
+
hash(key) % 10
+
+
↓
+
+
数组索引
+
{{ exampleIndex }}
+
+
+
+
+
+
哈希表
+
+
+
{{ index }}
+
{{ slot || '空' }}
+
+
+
+
+
+
+
+
+
常见应用
+
+
+
👤
+
用户信息表(用户ID → 用户资料)
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/LanguageEvolutionDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/LanguageEvolutionDemo.vue
new file mode 100644
index 0000000..7b9e668
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/LanguageEvolutionDemo.vue
@@ -0,0 +1,514 @@
+
+
+
+
+
+
+
+
+
+
+
+
代码示例
+
+
{{ currentEra.example }}
+
+
+
+
+
特点
+
+
+ ✓
+ {{ feature }}
+
+
+
+
+
+
+
+
+
+
+
演化的趋势
+
+
+
🚀
+
越来越抽象
+
远离硬件细节,更接近人类思维
+
+
+
👥
+
越来越易用
+
语法更简洁,学习曲线更平缓
+
+
+
🛡️
+
越来越安全
+
类型系统、内存管理等安全机制
+
+
+
⚡
+
越来越高效
+
编译器优化、JIT 技术提升性能
+
+
+
+
+
+
+
现代编程语言生态
+
+
+
{{ lang.name }}
+
{{ lang.year }}
+
+
+ {{ use }}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/LanguageScenarioDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/LanguageScenarioDemo.vue
new file mode 100644
index 0000000..fa4d5a5
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/LanguageScenarioDemo.vue
@@ -0,0 +1,505 @@
+
+
+
+
+
+ 编程语言是人类思维 和计算机执行 之间的桥梁
+
+
+
+
+
{{ scenario.icon }}
+
{{ scenario.title }}
+
{{ scenario.desc }}
+
+
+
+
+
+
+
+
+
+
场景描述
+
{{ currentScenario.fullDesc }}
+
+
+
+
为什么需要编程语言?
+
+
+
{{ index + 1 }}
+
{{ step }}
+
+
+
+
+
+
不用编程语言会怎样?
+
+
+
😰
+
{{ currentScenario.withoutLang }}
+
+
+
+
+
+
适合的语言
+
+
+ {{ lang }}
+
+
+
+
+
+
+
+
+
编程语言的三大作用
+
+
+
💬
+
表达思想
+
将人类思维转化为计算机可理解的指令
+
+
+
🔧
+
控制硬件
+
精确控制计算机执行各种操作
+
+
+
🤝
+
团队协作
+
标准化的语法便于多人协作开发
+
+
+
+
+
+
+
从机器码到高级语言
+
+
+
+
+
+
+ 越来越接近 人类思维
+
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/LanguageTypeModelDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/LanguageTypeModelDemo.vue
new file mode 100644
index 0000000..3a5b0dd
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/LanguageTypeModelDemo.vue
@@ -0,0 +1,255 @@
+
+
+
+
+
+
+
{{ dim.title }}
+
+
+
{{ opt.name }}
+
{{ opt.langs }}
+
+
+
+
+
+
+
类型系统分类矩阵
+
+
+
静态 + 强
+
Java, C++, Rust, Go
+
编译期检查,类型安全
+
+
+
静态 + 弱
+
C
+
编译期检查,可随意转换
+
+
+
动态 + 强
+
Python, Ruby
+
运行时检查,类型安全
+
+
+
动态 + 弱
+
JavaScript, PHP
+
运行时检查,类型灵活
+
+
+
+
+
+
类型推断
+
+
+ 现代语言可以自动推断变量类型,无需显式声明
+
+
+
+
+
let x = 5; // 推断为 number
+let name = "Alice"; // string
+
+
+
+
let x = 5; // 推断为 i32
+let name = "Alice"; // &str
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/LinearStructuresDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/LinearStructuresDemo.vue
new file mode 100644
index 0000000..3c2b79f
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/LinearStructuresDemo.vue
@@ -0,0 +1,579 @@
+
+
+
+
+
+
+ {{ structure.icon }} {{ structure.name }}
+
+
+
+
+
+
+
+
+
+
+
+
{{ index }}
+
{{ item }}
+
+
+
+ ✓ 连续内存存储 | ✓ 快速访问 (O(1)) | ✗ 插入删除慢 (O(n))
+
+
+
+
+
+
+
+ ✓ 非连续内存 | ✗ 访问慢 (O(n)) | ✓ 快速插入删除
+
+
+
+
+
+
+
+
+ 入栈 (PUSH)
+
+
+ 出栈 (POP)
+
+
+
+ 后进先出 (LIFO) | 应用:撤销操作、函数调用
+
+
+
+
+
+
+
+
+ 入队 (ENQUEUE)
+
+
+ 出队 (DEQUEUE)
+
+
+
+ 先进先出 (FIFO) | 应用:任务队列、打印队列
+
+
+
+
+
+
+
操作对比
+
+
+
+ 数据结构
+ 访问
+ 插入
+ 删除
+ 特点
+
+
+
+
+ {{ struct.icon }} {{ struct.name }}
+ {{ struct.access }}
+ {{ struct.insert }}
+ {{ struct.delete }}
+ {{ struct.feature }}
+
+
+
+
+
+
+
+
实际应用场景
+
+
+
{{ app.icon }}
+
+
{{ app.name }}
+
{{ app.desc }}
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/NetworkOverviewDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/NetworkOverviewDemo.vue
new file mode 100644
index 0000000..437dcc1
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/NetworkOverviewDemo.vue
@@ -0,0 +1,474 @@
+
+
+
+
+
+
+
+
+
💻
+
发送方
+
192.168.1.100
+
+
+
+
+
+
+
+
{{ step.icon }}
+
{{ step.name }}
+
{{ step.desc }}
+
+
+
+
+
+
+
+
+
🖥️
+
接收方
+
192.168.1.200
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/NetworkPrincipleDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/NetworkPrincipleDemo.vue
new file mode 100644
index 0000000..528dae6
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/NetworkPrincipleDemo.vue
@@ -0,0 +1,236 @@
+
+
+
+
+
+
+
{{ principle.icon }}
+
{{ principle.title }}
+
{{ principle.desc }}
+
+
+
+
+
+
+
核心概念
+
+
+
IP 地址
+
192.168.1.100
+
设备的网络地址
+
+
+
端口
+
80, 443, 22
+
应用程序的标识
+
+
+
协议
+
HTTP, TCP/IP
+
通信的规则
+
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/OSSystemOverviewDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/OSSystemOverviewDemo.vue
new file mode 100644
index 0000000..d7d7bad
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/OSSystemOverviewDemo.vue
@@ -0,0 +1,324 @@
+
+
+
+
+
+
+
+
+ 应用程序层
+
+
+
+ 用户直接使用的程序(浏览器、IDE、游戏等)
+
+
+
+
+
+ 操作系统内核
+
+
+
+
+ {{ component.icon }} {{ component.name }}
+
+
+
+
+ 进程管理、内存管理、文件系统、设备管理
+
+
+
+
+
+ 硬件层
+
+
+
+ 💻 CPU
+ 🧠 RAM
+ 💾 硬盘
+ 🖥️ GPU
+
+
+
+
+
+
+
资源流向
+
+
+
↓
+
+ 应用程序请求资源(内存、CPU、文件)
+
+
+
+
↓
+
+ 操作系统内核统一分配和调度
+
+
+
+
+
+ {{ showFlow ? '隐藏' : '显示' }}资源流
+
+
+
+
+
+
+ 当前选中:{{ activeAppName || '请选择应用程序' }}
+
+
+ {{ getActiveAppDesc() }}
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/PhysicalLayerDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/PhysicalLayerDemo.vue
new file mode 100644
index 0000000..ae30c18
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/PhysicalLayerDemo.vue
@@ -0,0 +1,397 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1
+ 0
+ 1
+ 1
+ 0
+
+
+
+ 开
+ 关
+ 开
+ 开
+ 关
+
+
+
+
+
+
+
+
+
+
+
+
+
+
典型应用场景
+
+
+ {{ app.icon }}
+ {{ app.text }}
+
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/ProcessMemoryFilesystemDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/ProcessMemoryFilesystemDemo.vue
new file mode 100644
index 0000000..d91a3e9
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/ProcessMemoryFilesystemDemo.vue
@@ -0,0 +1,429 @@
+
+
+
+
+
+
+
+ 场景选择:
+
+
+
+ {{ scene.icon }} {{ scene.name }}
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ proc.name }}
+ PID: {{ proc.pid }}
+ {{ proc.state }}
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ getProcessName(block.processId) }}
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ getIcon(file.type) }}
+ {{ file.name }}
+ {{ file.size }}
+
+
+
+
+
+
+
+
+
+ {{ currentSceneData.title }}
+
+
+
+ {{ index + 1 }}
+ {{ step }}
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/ProgrammingLanguageComparisonDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/ProgrammingLanguageComparisonDemo.vue
new file mode 100644
index 0000000..198b2c3
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/ProgrammingLanguageComparisonDemo.vue
@@ -0,0 +1,441 @@
+
+
+
+
+
+
+
+
{{ lang.year }}
+
{{ lang.paradigm }}
+
+
+
+
+
+
+
+
+
+
+
诞生年份
+
{{ currentLang.year }}
+
+
+
编程范式
+
{{ currentLang.paradigm }}
+
+
+
类型系统
+
{{ currentLang.typeSystem }}
+
+
+
性能
+
{{ currentLang.performance }}
+
+
+
+
+
主要用途
+
+
+ {{ use }}
+
+
+
+
+
+
+
+
+
+
+
快速对比
+
+
+
+ 语言
+ 学习难度
+ 开发效率
+ 执行性能
+ 主要领域
+
+
+
+
+ {{ lang.icon }} {{ lang.name }}
+ {{ lang.difficulty }}
+ {{ lang.efficiency }}
+ {{ lang.performance }}
+ {{ lang.mainField }}
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/ProgrammingParadigmDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/ProgrammingParadigmDemo.vue
new file mode 100644
index 0000000..49990b3
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/ProgrammingParadigmDemo.vue
@@ -0,0 +1,418 @@
+
+
+
+
+
+ 编程范式是编程的思维方式 ,决定了如何组织和编写代码
+
+
+
+
+
{{ paradigm.icon }}
+
{{ paradigm.name }}
+
{{ paradigm.desc }}
+
+
+
+
+
+
+
+
+
+
核心思想
+
{{ currentParadigm.idea }}
+
+
+
+
代码示例
+
+
{{ currentParadigm.example }}
+
+
+
+
+
特点
+
+
+ {{ feature }}
+
+
+
+
+
+
代表语言
+
+
+ {{ lang }}
+
+
+
+
+
+
+
+
+
范式对比
+
+
+
+ 特点
+ 命令式
+ 面向对象
+ 函数式
+
+
+
+
+ 关注点
+ 怎么做
+ 谁来做
+ 做什么
+
+
+ 数据管理
+ 变量和状态
+ 对象封装
+ 不可变数据
+
+
+ 代码组织
+ 语句和函数
+ 类和对象
+ 纯函数
+
+
+ 适用场景
+ 系统编程
+ 大型应用
+ 数据处理
+
+
+
+
+
+
+
+
现代多范式语言
+
+ 大多数现代语言支持多种范式,开发者可以根据需求灵活选择
+
+
+
+
Python
+
命令式 + 面向对象 + 函数式
+
+
+
JavaScript
+
命令式 + 面向对象 + 函数式
+
+
+
Rust
+
命令式 + 面向对象 + 函数式
+
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/RecursiveThinkingDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/RecursiveThinkingDemo.vue
new file mode 100644
index 0000000..b6990c1
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/RecursiveThinkingDemo.vue
@@ -0,0 +1,531 @@
+
+
+
+
+
+
+
🪆
+
+
俄罗斯套娃
+
+ 打开一个大娃娃,里面有个小一点的娃娃
+ 再打开还有更小的...直到最小的一个
+ 这就是递归!
+
+
+
+
+
+
+
递归示例
+
+
+ {{ example.icon }} {{ example.name }}
+
+
+
+
+
+
+
阶乘:n! = n × (n-1)!
+
+
+
5! = 5 × 4!
+
↓
+
4! = 4 × 3!
+
↓
+
3! = 3 × 2!
+
↓
+
2! = 2 × 1!
+
↓
+
1! = 1 (基准情况)
+
+
+
↑ 返回 1
+
↑ 返回 2 × 1 = 2
+
↑ 返回 3 × 2 = 6
+
↑ 返回 4 × 6 = 24
+
↑ 返回 5 × 24 = 120
+
+
+
+
+
+
+
斐波那契数列
+
+
F(n) = F(n-1) + F(n-2)
+
+
F(5)
+
+
+
F(3)
+
F(2)
+
F(2)
+
F(1)=1
+
+
+
F(5) = 5
+
+
+
+
+
+
遍历文件目录
+
+
+
📁 /home
+
+
📄 file1.txt
+
📁 documents
+
+
📄 report.doc
+
📁 photos
+
+
+
📄 file2.txt
+
+
+
+
伪代码
+
function traverse(folder) {
+ for each item in folder {
+ if item is file {
+ print(item)
+ } else if item is folder {
+ traverse(item) // 递归调用!
+ }
+ }
+}
+
+
+
+
+
+
+
递归的三要素
+
+
+
1
+
基准情况
+
什么时候停止递归?必须有一个终止条件
+
例:n! 中 1! = 1
+
+
+
2
+
递归调用
+
如何让问题规模变小?调用自己处理更小的规模
+
例:n! 转换成 (n-1)!
+
+
+
3
+
返回结果
+
如何利用子问题的结果解决当前问题?
+
例:n × (n-1)! 的结果
+
+
+
+
+
+
+
+
✓ 优点
+
+ 代码简洁优雅
+ 自然表达递归结构
+ 适合树和图的遍历
+
+
+
+
✗ 缺点
+
+ 可能重复计算
+ 栈空间消耗大
+ 调试较困难
+
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/SearchAlgorithmDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/SearchAlgorithmDemo.vue
new file mode 100644
index 0000000..eb4d413
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/SearchAlgorithmDemo.vue
@@ -0,0 +1,368 @@
+
+
+
+
+
+
+ 顺序查找
+
+
+ 二分查找
+
+
+
+
+
+
顺序查找:一个一个找
+
+
+
+ 开始查找
+ 重置
+
+
+ 目标数字:
+
+
+
+
+
+
+
+
二分查找:每次排除一半
+
+
+
+
查找范围:[{{ binaryLeft }}, {{ binaryRight }}]
+
中间位置:{{ binaryMid }}
+
{{ sortedNumbers[binaryMid] }} vs {{ binaryTarget }}
+
+
+ 下一步
+ 重置
+
+
+
+
时间复杂度:O(log n)
+
适用:有序数组
+
+
+
+
+
+
性能对比
+
+
+
+ 数据量
+ 顺序查找
+ 二分查找
+
+
+
+
+ {{ n }}
+ 最多 {{ n }} 次
+ 最多 {{ Math.ceil(Math.log2(n)) }} 次
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/SortingAlgorithmDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/SortingAlgorithmDemo.vue
new file mode 100644
index 0000000..de85455
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/SortingAlgorithmDemo.vue
@@ -0,0 +1,319 @@
+
+
+
+
+
+
+
+ 生成新数组
+ 冒泡排序
+ 快速排序
+
+
+
+
{{ currentAlgo }}
+
{{ currentAlgoDesc }}
+
时间复杂度:{{ complexity }}
+
+
+
+
算法对比
+
+
+
+ 算法
+ 平均时间
+ 最坏时间
+ 空间
+ 稳定
+
+
+
+
+ 冒泡排序
+ O(n²)
+ O(n²)
+ O(1)
+ ✓
+
+
+ 快速排序
+ O(n log n)
+ O(n²)
+ O(log n)
+ ✗
+
+
+ 归并排序
+ O(n log n)
+ O(n log n)
+ O(n)
+ ✓
+
+
+ 插入排序
+ O(n²)
+ O(n²)
+ O(1)
+ ✓
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/StorageHierarchyDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/StorageHierarchyDemo.vue
new file mode 100644
index 0000000..b0ec1ca
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/StorageHierarchyDemo.vue
@@ -0,0 +1,246 @@
+
+
+
+
+
+
+
+
详细对比
+
+
+
+ 存储层次
+ 访问时间
+ 典型容量
+ 成本
+
+
+
+
+ 寄存器
+ < 1 ns
+ 几 KB
+ 最高
+
+
+ L1 缓存
+ ~1 ns
+ 64 KB
+ 很高
+
+
+ L2 缓存
+ ~3 ns
+ 256 KB
+ 高
+
+
+ L3 缓存
+ ~10 ns
+ 8 MB
+ 中等
+
+
+ 内存
+ ~100 ns
+ 8-32 GB
+ 中低
+
+
+ SSD
+ ~100 μs
+ 256 GB-2 TB
+ 低
+
+
+ HDD
+ ~10 ms
+ 1-10 TB
+ 最低
+
+
+
+
+
+
+
局部性原理
+
+
+ 程序倾向于访问最近访问过的位置 (时间局部性)
+ 和邻近的位置 (空间局部性)
+
+
+ 利用局部性原理,缓存可以显著提高性能
+
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/TransportLayerDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/TransportLayerDemo.vue
new file mode 100644
index 0000000..de62701
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/TransportLayerDemo.vue
@@ -0,0 +1,567 @@
+
+
+
+
+
+
+ TCP 📦
+
+
+ UDP ⚡
+
+
+
+
+
+
+
+
+
+
+
+
+
{{ index + 1 }}
+
{{ stage }}
+
+
+
+
+
TCP 可靠性机制
+
+
+
{{ mech.icon }}
+
{{ mech.title }}
+
{{ mech.desc }}
+
+
+
+
+
+
+
+
+
+
+
UDP 适用场景
+
+
+
{{ use.icon }}
+
{{ use.title }}
+
{{ use.reason }}
+
+
+
+
+
+
+
+
+
+
端口号:应用程序的标识
+
+
+ 端口号就像公寓房间号,IP 地址是公寓楼地址,合起来才能找到具体的应用程序
+
+
+
+
{{ port.number }}
+
{{ port.service }}
+
{{ port.desc }}
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/TreeStructureDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/TreeStructureDemo.vue
new file mode 100644
index 0000000..56b9058
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/TreeStructureDemo.vue
@@ -0,0 +1,530 @@
+
+
+
+
+
+
选择树的类型:
+
+
+ {{ type.icon }} {{ type.name }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ node.value }}
+
+
+
+
+
+
+
+
+
📁 根目录 /
+
+
+
📁 home
+
+
👤 user
+
+
📄 document.txt
+
🖼️ photo.jpg
+
+
+
+
+
📁 var
+
+
📁 www
+
+
📄 index.html
+
📄 style.css
+
+
+
+
+
+
+
+
+
+
+
+
HTML 结构
+
+<html>
+ <body>
+ <div class="container">
+ <h1>标题</h1>
+ <p>段落</p>
+ </div>
+ </body>
+</html>
+
+
+
+
DOM 树结构
+
+
+
html
+
+
+
body
+
+
+
div
+
.container
+
+
+ h1
+ "标题"
+
+
+ p
+ "段落"
+
+
+
+
+
+
+
+
+
+
+
+
+
+
树形结构的特点
+
+
+
🌲
+
层级关系
+
节点之间是一对多的父子关系
+
+
+
🎯
+
单一根节点
+
除根节点外,每个节点只有一个父节点
+
+
+
🔍
+
高效查找
+
二叉搜索树的查找时间是 O(log n)
+
+
+
🔄
+
多种遍历
+
前序、中序、后序、层序遍历
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
index 8659bee..1b9e764 100644
--- a/docs/.vitepress/theme/index.js
+++ b/docs/.vitepress/theme/index.js
@@ -127,6 +127,39 @@ import CFNetworkLayers from './components/appendix/computer-fundamentals/Network
import CFSubnetCalculator from './components/appendix/computer-fundamentals/SubnetCalculator.vue'
import CFTcpUdpComparison from './components/appendix/computer-fundamentals/TcpUdpComparison.vue'
+// Computer Fundamentals Additional Components
+import OSSystemOverviewDemo from './components/appendix/computer-fundamentals/OSSystemOverviewDemo.vue'
+import ProcessMemoryFilesystemDemo from './components/appendix/computer-fundamentals/ProcessMemoryFilesystemDemo.vue'
+import DataLifecycleDemo from './components/appendix/computer-fundamentals/DataLifecycleDemo.vue'
+import EncodingStorageTransmissionDemo from './components/appendix/computer-fundamentals/EncodingStorageTransmissionDemo.vue'
+import NetworkOverviewDemo from './components/appendix/computer-fundamentals/NetworkOverviewDemo.vue'
+import PhysicalLayerDemo from './components/appendix/computer-fundamentals/PhysicalLayerDemo.vue'
+import DataLinkLayerDemo from './components/appendix/computer-fundamentals/DataLinkLayerDemo.vue'
+import TransportLayerDemo from './components/appendix/computer-fundamentals/TransportLayerDemo.vue'
+import ApplicationLayerDemo from './components/appendix/computer-fundamentals/ApplicationLayerDemo.vue'
+import DataStructureOverviewDemo from './components/appendix/computer-fundamentals/DataStructureOverviewDemo.vue'
+import LinearStructuresDemo from './components/appendix/computer-fundamentals/LinearStructuresDemo.vue'
+import HashTableDemo from './components/appendix/computer-fundamentals/HashTableDemo.vue'
+import TreeStructureDemo from './components/appendix/computer-fundamentals/TreeStructureDemo.vue'
+import DataStructureSelectorDemo from './components/appendix/computer-fundamentals/DataStructureSelectorDemo.vue'
+import AlgorithmOverviewDemo from './components/appendix/computer-fundamentals/AlgorithmOverviewDemo.vue'
+import RecursiveThinkingDemo from './components/appendix/computer-fundamentals/RecursiveThinkingDemo.vue'
+import GreedyThinkingDemo from './components/appendix/computer-fundamentals/GreedyThinkingDemo.vue'
+import AlgorithmParadigmDemo from './components/appendix/computer-fundamentals/AlgorithmParadigmDemo.vue'
+import LanguageEvolutionDemo from './components/appendix/computer-fundamentals/LanguageEvolutionDemo.vue'
+import ProgrammingParadigmDemo from './components/appendix/computer-fundamentals/ProgrammingParadigmDemo.vue'
+import LanguageScenarioDemo from './components/appendix/computer-fundamentals/LanguageScenarioDemo.vue'
+import ProgrammingLanguageComparisonDemo from './components/appendix/computer-fundamentals/ProgrammingLanguageComparisonDemo.vue'
+import CompilerAnalogyDemo from './components/appendix/computer-fundamentals/CompilerAnalogyDemo.vue'
+import SearchAlgorithmDemo from './components/appendix/computer-fundamentals/SearchAlgorithmDemo.vue'
+import SortingAlgorithmDemo from './components/appendix/computer-fundamentals/SortingAlgorithmDemo.vue'
+import NetworkPrincipleDemo from './components/appendix/computer-fundamentals/NetworkPrincipleDemo.vue'
+import DataEncodingBasicsDemo from './components/appendix/computer-fundamentals/DataEncodingBasicsDemo.vue'
+import StorageHierarchyDemo from './components/appendix/computer-fundamentals/StorageHierarchyDemo.vue'
+import GraphStructureDemo from './components/appendix/computer-fundamentals/GraphStructureDemo.vue'
+import LanguageTypeModelDemo from './components/appendix/computer-fundamentals/LanguageTypeModelDemo.vue'
+import CompilationPracticeDemo from './components/appendix/computer-fundamentals/CompilationPracticeDemo.vue'
+
// Deployment appendix components
import DeploymentOverviewDemo from './components/appendix/deployment/DeploymentOverviewDemo.vue'
import DeploymentBuildDemo from './components/appendix/deployment/DeploymentBuildDemo.vue'
@@ -652,6 +685,39 @@ export default {
app.component('CFSubnetCalculator', CFSubnetCalculator)
app.component('CFTcpUdpComparison', CFTcpUdpComparison)
+ // Computer Fundamentals Additional Components Registration
+ app.component('OSSystemOverviewDemo', OSSystemOverviewDemo)
+ app.component('ProcessMemoryFilesystemDemo', ProcessMemoryFilesystemDemo)
+ app.component('DataLifecycleDemo', DataLifecycleDemo)
+ app.component('EncodingStorageTransmissionDemo', EncodingStorageTransmissionDemo)
+ app.component('NetworkOverviewDemo', NetworkOverviewDemo)
+ app.component('PhysicalLayerDemo', PhysicalLayerDemo)
+ app.component('DataLinkLayerDemo', DataLinkLayerDemo)
+ app.component('TransportLayerDemo', TransportLayerDemo)
+ app.component('ApplicationLayerDemo', ApplicationLayerDemo)
+ app.component('DataStructureOverviewDemo', DataStructureOverviewDemo)
+ app.component('LinearStructuresDemo', LinearStructuresDemo)
+ app.component('HashTableDemo', HashTableDemo)
+ app.component('TreeStructureDemo', TreeStructureDemo)
+ app.component('DataStructureSelectorDemo', DataStructureSelectorDemo)
+ app.component('AlgorithmOverviewDemo', AlgorithmOverviewDemo)
+ app.component('RecursiveThinkingDemo', RecursiveThinkingDemo)
+ app.component('GreedyThinkingDemo', GreedyThinkingDemo)
+ app.component('AlgorithmParadigmDemo', AlgorithmParadigmDemo)
+ app.component('LanguageEvolutionDemo', LanguageEvolutionDemo)
+ app.component('ProgrammingParadigmDemo', ProgrammingParadigmDemo)
+ app.component('LanguageScenarioDemo', LanguageScenarioDemo)
+ app.component('ProgrammingLanguageComparisonDemo', ProgrammingLanguageComparisonDemo)
+ app.component('CompilerAnalogyDemo', CompilerAnalogyDemo)
+ app.component('SearchAlgorithmDemo', SearchAlgorithmDemo)
+ app.component('SortingAlgorithmDemo', SortingAlgorithmDemo)
+ app.component('NetworkPrincipleDemo', NetworkPrincipleDemo)
+ app.component('DataEncodingBasicsDemo', DataEncodingBasicsDemo)
+ app.component('StorageHierarchyDemo', StorageHierarchyDemo)
+ app.component('GraphStructureDemo', GraphStructureDemo)
+ app.component('LanguageTypeModelDemo', LanguageTypeModelDemo)
+ app.component('CompilationPracticeDemo', CompilationPracticeDemo)
+
// Deployment appendix
app.component('DeploymentOverviewDemo', DeploymentOverviewDemo)
app.component('DeploymentBuildDemo', DeploymentBuildDemo)
@@ -877,7 +943,7 @@ export default {
// Backend Languages Components Registration
app.component('BackendLanguagesDemo', BackendLanguagesDemo)
- app.component('LanguageComparisonDemo', LanguageComparisonDemo)
+ app.component('ProgrammingLanguageComparisonDemo', ProgrammingLanguageComparisonDemo)
app.component('PerformanceBenchmarkDemo', PerformanceBenchmarkDemo)
app.component('SyntaxComparisonDemo', SyntaxComparisonDemo)
app.component('ConcurrencyModelDemo', ConcurrencyModelDemo)
diff --git a/docs/zh-cn/appendix/7-infrastructure-and-operations/cloud-platforms.md b/docs/zh-cn/appendix/7-infrastructure-and-operations/cloud-platforms.md
index ccf5318..7bda7d9 100644
--- a/docs/zh-cn/appendix/7-infrastructure-and-operations/cloud-platforms.md
+++ b/docs/zh-cn/appendix/7-infrastructure-and-operations/cloud-platforms.md
@@ -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)
---
diff --git a/docs/zh-cn/appendix/7-infrastructure-and-operations/monitoring-logging.md b/docs/zh-cn/appendix/7-infrastructure-and-operations/monitoring-logging.md
index be8ae62..53b0fcb 100644
--- a/docs/zh-cn/appendix/7-infrastructure-and-operations/monitoring-logging.md
+++ b/docs/zh-cn/appendix/7-infrastructure-and-operations/monitoring-logging.md
@@ -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)** - 从开发到生产的最后一公里
diff --git a/docs/zh-cn/guide/introduction.md b/docs/zh-cn/guide/introduction.md
index 8dddece..189d04c 100644
--- a/docs/zh-cn/guide/introduction.md
+++ b/docs/zh-cn/guide/introduction.md
@@ -18,7 +18,7 @@
### 总附录
-[AI 能力词典:常见 AI 核心概念与名词、场景解释](/zh-cn/appendix/ai-capability-dictionary)
+[AI 能力词典:常见 AI 核心概念与名词、场景解释](/zh-cn/appendix/8-artificial-intelligence/ai-capability-dictionary)
### 零、幼儿园
diff --git a/docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md b/docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md
index efc92af..6175a1c 100644
--- a/docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md
+++ b/docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md
@@ -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)。
## [附录 2:到底什么是 Vibe Coding](#appendix-nav)
diff --git a/docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md b/docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md
index bf262a5..07006ab 100644
--- a/docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md
+++ b/docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md
@@ -64,7 +64,7 @@ const duration = '约 1 天 ,可分多次完成'
## 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)。
@@ -745,7 +745,7 @@ AI 很认真地给了你一段代码,你也老老实实地复制进去了,
看到不懂的计算机名词时,来这里快速查含义,推荐通读一遍。
- 附录二:Visual Studio Code 菜单栏解析
+ 附录二:Visual Studio Code 菜单栏解析
不知道 AI IDE 的界面有什么用的时候,拿以下内容和 AI 对话进行查阅,或者直接查看。
diff --git a/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md
index f792c42..e9eda81 100644
--- a/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md
+++ b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md
@@ -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)?