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 内容，集成交互式演示
2026-02-24 18:22:58 +08:00
parent b5a55811cc
commit 3af119a598
86 changed files with 20311 additions and 340 deletions
@@ -1,9 +1,24 @@
 # 算法思维入门

-::: tip 🎯 核心问题
+::: tip 前言
 **如何高效地解决问题？** 你可能遇到过这样的困惑：同一个问题，有人写的代码跑几秒就出结果，有人写的跑几分钟还在转。差别往往在于算法。本章带你理解算法的核心思维方式。
 :::

+**这篇文章会带你学什么？**
+
+学完这章后，你将获得：
+
+- **问题拆解能力**：面对复杂问题，能想到用分治、递归等策略拆解，而不是一上来就写代码
+- **效率判断能力**：用大 O 表示法判断两种解法哪个更高效，而不是凭感觉猜测
+- **复杂度思维**：写代码前先估算数据规模和时间要求，选择合适的算法级别
+- **后续学习基础**：为高级数据结构、分布式系统、机器学习打下基础
+
+| 章节 | 内容 | 核心概念 |
+|-----|------|---------|
+| **第 1 章** | 二分查找 | 分治思想、O(log n) |
+| **第 2 章** | 排序算法 | 冒泡、快排、归并 |
+| **第 3 章** | 复杂度分析 | 时间复杂度、空间复杂度 |
+
 ---

 ## 0. 全景图：算法是什么？
@@ -16,6 +16,8 @@

 **这篇文章会带你学什么？**

+学完这章后，你将掌握从输入网址到页面显示的完整技术流程，理解浏览器与服务器如何协同工作。这些知识是后续学习 API、接口、网络安全等技术的基石，也是排查"网页打不开"、"加载慢"等日常问题的关键。
+
 | 章节 | 内容 | 核心概念 |
 |-----|------|---------|
 | **第 1 章** | URL 解析 | 网址的结构和作用 |
@@ -1,10 +1,23 @@
 # 什么是数据的编码与传输？

-> 💡 **学习指南**：当你给朋友发一张照片、发一条微信，或者下载一个几 GB 的游戏时，这些信息是怎么穿过大半个地球、完好无损地出现在你的屏幕上的？
-> 
-> 本章节会围绕一个经常困扰新手的问题展开：**为什么我收到的文件变成了乱码？**
-> 
-> 顺着这个问题，我们将彻底揭开计算机底层最核心的三大基石：**编码、存储与传输**。
+::: tip 前言
+当你给朋友发一张照片、发一条微信，或者下载一个几 GB 的游戏时，这些信息是怎么穿过大半个地球、完好无损地出现在你的屏幕上的？本章节会围绕一个经常困扰新手的问题展开：**为什么我收到的文件变成了乱码？** 顺着这个问题，我们将彻底揭开计算机底层最核心的三大基石：**编码、存储与传输**。
+:::
+
+**这篇文章会带你学什么？**
+
+学完这章后，你将获得：
+
+- **乱码排查能力**：遇到"文件打开是乱码"时，能从编码角度分析原因，而不是简单认为"文件坏了"
+- **跨平台意识**：处理数据交换时，知道为什么要关注编码格式和字节序
+- **编码世界观**：理解计算机如何用 0 和 1 表示世间万物——从文字到图像到复杂对象
+- **后续学习基础**：为网络协议、文件格式、序列化技术打下基础
+
+| 章节 | 内容 | 核心概念 |
+|-----|------|---------|
+| **第 1 章** | 字符编码 | ASCII、UTF-8、GBK |
+| **第 2 章** | 数据存储 | 二进制、字节序 |
+| **第 3 章** | 数据传输 | 序列化、压缩 |

 在开始之前，我们需要先明确一个经常被新手忽略的物理事实：

@@ -1,9 +1,25 @@
 # 数据结构

-::: tip 🎯 核心问题
+::: tip 前言
 **如何高效地组织和存储数据？** 你可能遇到过这样的困惑：为什么有些程序处理几万条数据很快，有些处理几百条就卡住了？答案往往在于数据结构的选择。本章带你理解常见数据结构的特点和适用场景。
 :::

+**这篇文章会带你学什么？**
+
+学完这章后，你将获得：
+
+- **选型决策能力**：知道什么时候用数组快速访问，什么时候用链表灵活插入
+- **性能分析视角**：能判断性能问题是数据结构选择不当，还是算法效率低下
+- **权衡思维**：理解"空间换时间"与"时间换空间"，知道没有完美的数据结构
+- **后续学习基础**：为数据库、缓存系统、搜索引擎等技术打下基础
+
+| 章节 | 内容 | 核心概念 |
+|-----|------|---------|
+| **第 1 章** | 线性结构 | 数组、链表、栈、队列 |
+| **第 2 章** | 哈希结构 | 哈希表、冲突处理 |
+| **第 3 章** | 树形结构 | 二叉树、B树、堆 |
+| **第 4 章** | 图结构 | 有向图、无向图、遍历算法 |
+
 ---

 ## 0. 全景图：数据结构是什么？
@@ -1,12 +1,27 @@
 # 操作系统：给电脑请个"大管家"

-::: tip 🎯 核心问题
+::: tip 前言
 **有了完美的 CPU 和无限的内存，电脑就能直接用了吗？** 
 在上一章，我们见证了晶体管如何组合成强大的 CPU。但即使你拥有最顶级的硬件，如果直接让它们工作，连在屏幕上显示一个字母都需要写几百行晦涩的机器指令。不仅麻烦，还极其危险——稍有差池，你的代码就可能把别人的数据覆盖掉。

 为了解决这些噩梦，**操作系统（Operating System, 简称 OS）**诞生了。它是挡在你和冰冷硬件之间的一层最伟大的"软件"。本章我们将抛开深奥的代码，用通俗的比喻，看看这个"超级管家"是如何把杂乱无章的硬件调教得服服帖帖的。
 :::

+**这篇文章会带你学什么？**
+
+学完这章后，你将获得：
+
+- **问题排查能力**：遇到"程序卡死"、"内存不足"时，能从操作系统层面分析原因
+- **术语理解深度**：理解"多进程"、"虚拟内存"、"文件权限"解决的是什么问题
+- **系统观思维**：理解程序不是孤立运行的，而是与操作系统、其他进程、硬件资源密切交互
+- **后续学习基础**：为并发编程、系统调优、容器技术打下基础
+
+| 章节 | 内容 | 核心概念 |
+|-----|------|---------|
+| **第 1 章** | 进程管理 | CPU 时分复用、时间片轮转 |
+| **第 2 章** | 内存管理 | 虚拟内存、分页机制 |
+| **第 3 章** | 文件系统 | 文件组织、目录结构 |
+
 ---

 ## 0. 全景图：没有操作系统会怎样？
@@ -0,0 +1,452 @@
+# 从按下电源到访问网站发生了什么
+
+::: tip 前言
+你有没有想过，当你按下电脑电源键，到最终在浏览器中看到网页，这中间到底发生了什么？
+
+这个过程涉及**硬件启动**、**操作系统加载**、**网络通信**等多个环节。理解这个过程，能帮助你建立对计算机系统的整体认知，也是成为全栈工程师的必经之路。
+:::
+
+**你会学到什么？**
+
+- 电脑从通电到显示桌面的完整过程
+- 操作系统是如何启动的
+- 浏览器是如何工作的
+- 当你访问一个 URL 时，网络请求是如何完成的
+
+---
+
+## 1. 按下电源：硬件的觉醒
+
+### 1.1 电源启动
+
+当你按下电源键，**电源单元（PSU）** 开始工作，把交流电（220V）转换成直流电（12V、5V、3.3V 等），为各个硬件部件供电。
+
+```
+电源按钮 → 电源单元(PSU) → 直流电输出 → 供给主板各部件
+```
+
+### 1.2 主板芯片组唤醒
+
+电源稳定后，**主板芯片组**开始工作，它就像电脑的"总调度员"，负责协调各个硬件部件。
+
+### 1.3 CPU 复位
+
+CPU 接收到复位信号后，把内部所有寄存器和缓存清零，从一个预设的地址开始执行指令。这个地址通常指向 **BIOS/UEFI** 芯片。
+
+<PowerOnDemo />
+
+---
+
+## 2. BIOS/UEFI：硬件的自检
+
+### 2.1 什么是 BIOS/UEFI？
+
+**BIOS（Basic Input/Output System）** 是电脑启动后第一个运行的程序，存储在主板的一个**只读芯片**中。
+
+**UEFI（Unified Extensible Firmware Interface）** 是 BIOS 的升级版，更安全、更现代。现在的电脑大多使用 UEFI。
+
+### 2.2 BIOS/UEFI 做了什么？
+
+1. **硬件自检（POST）**：检查内存、显卡、键盘等部件是否正常
+2. **初始化硬件**：设置硬件工作模式
+3. **启动顺序**：按照设定顺序，尝试从硬盘/U 盘/网络启动
+
+```
+BIOS/UEFI 工作流程：
+┌─────────────────────────────────────┐
+│  1. 硬件自检 (POST)                 │
+│     - 检查内存是否正常              │
+│     - 检查显卡是否正常              │
+│     - 检查键盘/鼠标是否正常         │
+├─────────────────────────────────────┤
+│  2. 初始化硬件                      │
+│     - 设置硬件工作模式              │
+│     - 配置中断向量表                │
+├─────────────────────────────────────┤
+│  3. 寻找启动设备                    │
+│     - 按启动顺序查找可启动设备      │
+│     - 读取启动扇区                  │
+└─────────────────────────────────────┘
+```
+
+如果发现问题，主板会发出**蜂鸣声**（不同次数代表不同错误）。
+
+### 2.3 启动顺序
+
+BIOS/UEFI 会按照设定的**启动顺序**查找启动设备：
+
+1. 硬盘（最常见）
+2. U 盘/光盘（重装系统时用）
+3. 网络（ PXE 启动，企业批量部署用）
+
+找到第一个可启动设备后，读取它的**启动扇区（Boot Sector）**，把控制权交给操作系统。
+
+---
+
+## 3. 操作系统启动：从内核到桌面
+
+### 3.1 什么是操作系统？
+
+**操作系统（Operating System，简称 OS）** 是管理计算机硬件和软件资源的程序集合。它就像一个"大管家"，帮我们管理内存、CPU、文件等资源，让我们不需要直接和硬件打交道。
+
+常见的操作系统：
+
+| 操作系统 | 特点 | 典型设备 |
+|---------|------|---------|
+| **Windows** | 生态丰富，兼容性好 | 桌面电脑、笔记本 |
+| **macOS** | 苹果生态，流畅稳定 | Mac 电脑 |
+| **Linux** | 开源免费，服务器首选 | 服务器、嵌入式设备 |
+| **Android** | 移动端 Linux | 手机、平板 |
+| **iOS** | 苹果移动端 | iPhone、iPad |
+
+### 3.2 操作系统的启动过程
+
+当你从硬盘启动时，操作系统的启动过程如下：
+
+<BootProcessDemo />
+
+#### 第一步：引导程序（Bootloader）
+
+硬盘的第一个扇区存放着**引导程序（Bootloader）**，它的任务是把操作系统内核加载到内存中。
+
+- **Windows**：Bootloader 叫 `bootmgr`
+- **Linux**：常见的引导程序有 `GRUB`、`rEFInd` 等
+
+```
+引导程序工作流程：
+┌─────────────────────────────────────┐
+│  1. 读取硬盘分区表                  │
+│  2. 找到操作系统分区                 │
+│  3. 加载操作系统内核到内存           │
+│  4. 跳转到内核入口点                 │
+└─────────────────────────────────────┘
+```
+
+#### 第二步：内核加载（Kernel）
+
+操作系统**内核（Kernel）** 是操作系统的核心，负责管理内存、CPU、进程等核心功能。
+
+```
+内核的主要功能：
+┌─────────────────────────────────────┐
+│  • 进程管理     - 创建/调度进程     │
+│  • 内存管理     - 分配/回收内存     │
+│  • 文件系统     - 管理文件存储      │
+│  • 设备驱动     - 控制硬件设备      │
+│  • 网络通信     - 处理网络协议      │
+└─────────────────────────────────────┘
+```
+
+#### 第三步：系统服务启动
+
+内核加载后，会启动各种**系统服务**：
+
+- **Windows 服务**：更新服务、安全中心、打印机服务
+- **Linux 服务**：SSH 服务、网络服务、图形界面（GNOME、KDE）
+
+```
+Windows 启动过程：
+BIOS → MBR → bootmgr → winload.exe → ntoskrnl.exe → 系统服务 → 桌面
+
+Linux 启动过程：
+BIOS → GRUB → vmlinuz (内核) → systemd → 系统服务 → 桌面环境
+```
+
+#### 第四步：显示桌面
+
+最后，操作系统启动**图形界面（GUI）**，显示桌面：
+
+- **Windows**：explorer.exe（资源管理器）显示桌面
+- **Linux**：GNOME、KDE、XFCE 等桌面环境
+- **macOS**：Finder 显示桌面
+
+```
+桌面出现的过程：
+┌─────────────────────────────────────┐
+│  1. 显卡驱动加载                    │
+│  2. 显示服务器启动                  │
+│     (Windows: Desktop Window Manager)│
+│     (Linux: X Server / Wayland)    │
+│  3. 桌面环境启动                    │
+│  4. 显示桌面背景和图标              │
+└─────────────────────────────────────┘
+```
+
+<DesktopDemo />
+
+---
+
+## 4. 打开浏览器：应用程序的启动
+
+### 4.1 应用程序的启动过程
+
+当你双击浏览器图标时，操作系统会：
+
+1. **查找可执行文件**：根据文件关联，找到浏览器的 `.exe`（Windows）或可执行文件
+2. **创建进程**：为浏览器创建一个新的**进程**
+3. **加载程序**：把浏览器的代码从硬盘加载到内存
+4. **初始化**：启动浏览器的主线程、渲染引擎、网络引擎等
+
+```
+浏览器启动过程：
+┌─────────────────────────────────────┐
+│  1. 双击图标                        │
+│  2. 操作系统查找浏览器可执行文件     │
+│  3. 创建浏览器进程                  │
+│  4. 加载浏览器代码到内存             │
+│  5. 初始化各模块（渲染、网络、JS）   │
+│  6. 显示浏览器窗口                   │
+└─────────────────────────────────────┘
+```
+
+### 4.2 浏览器的主要组成部分
+
+现代浏览器是一个复杂的"操作系统"，主要由以下部分组成：
+
+| 模块 | 功能 |
+|-----|------|
+| **用户界面** | 地址栏、标签页、书签等 |
+| **浏览器引擎** | 协调 UI 和渲染引擎 |
+| **渲染引擎** | 解析 HTML/CSS，显示网页 |
+| **JavaScript 引擎** | 执行 JavaScript 代码 |
+| **网络模块** | 发送 HTTP 请求 |
+| **UI 后端** | 绘制基础 UI 组件 |
+| **数据存储** | Cookie、LocalStorage 等 |
+
+<BrowserArchitectureDemo />
+
+---
+
+## 5. 访问 URL：网络请求的全过程
+
+### 5.1 什么是 URL？
+
+**URL（Uniform Resource Locator）** 是资源的地址，就像生活中的地址一样，用来定位互联网上的资源。
+
+```
+URL 的结构：
+┌─────────────────────────────────────────────────────────┐
+│  https://  │  www.example.com  │  /path/to/page  │ ?query=1 │
+│    协议    │       域名        │     路径       │   查询   │
+└─────────────────────────────────────────────────────────┘
+```
+
+- **协议（Protocol）**：用什么方式访问（http、https、ftp 等）
+- **域名（Domain）**：服务器的地址
+- **路径（Path）**：资源在服务器上的位置
+- **查询（Query）**：额外的参数
+
+### 5.2 访问 URL 的完整过程
+
+当你访问 `https://www.example.com` 时，发生了这些事情：
+
+<URLRequestDemo />
+
+#### 第一步：URL 解析
+
+浏览器首先**解析 URL**，提取出协议、域名、路径等信息。
+
+```
+URL 解析过程：
+https://www.example.com/index.html
+  ↓
+协议: https
+域名: www.example.com
+路径: /index.html
+```
+
+#### 第二步：DNS 解析
+
+计算机通过网络访问服务器，但网络用的是 **IP 地址**（如 93.184.216.34），而不是域名。所以需要把域名转换成 IP 地址，这个过程叫 **DNS 解析**。
+
+```
+DNS 解析流程：
+┌─────────────────────────────────────────────────────────┐
+│  浏览器缓存 → hosts 文件 → 本地 DNS 缓存 → DNS 服务器  │
+└─────────────────────────────────────────────────────────┘
+
+实际过程：
+1. 浏览器检查缓存（最近访问过吗？）
+2. 操作系统检查 DNS 缓存
+3. 向 DNS 服务器发送查询请求
+4. DNS 服务器返回 IP 地址
+```
+
+#### 第三步：建立 TCP 连接
+
+拿到 IP 地址后，浏览器要与服务器建立 **TCP 连接**。TCP 是传输层协议，保证数据可靠传输。
+
+```
+TCP 三次握手：
+┌─────────────────────────────────────────────────────────┐
+│  客户端 → 服务器：SYN（同步请求）                       │
+│  服务器 → 客户端：SYN-ACK（确认并同步）                 │
+│  客户端 → 服务器：ACK（确认）                           │
+│                        ↓                                │
+│  连接建立完成！                                         │
+└─────────────────────────────────────────────────────────┘
+```
+
+如果是 **HTTPS**，还需要进行 **TLS/SSL 握手**，建立加密通道。
+
+#### 第四步：发送 HTTP 请求
+
+连接建立后，浏览器向服务器发送 **HTTP 请求**：
+
+```
+HTTP 请求格式：
+┌─────────────────────────────────────────────────────────┐
+│  GET /index.html HTTP/1.1                              │
+│  Host: www.example.com                                 │
+│  User-Agent: Mozilla/5.0...                             │
+│  Accept: text/html                                     │
+│                                                         │
+│  （空行）                                               │
+└─────────────────────────────────────────────────────────┘
+```
+
+常见的 HTTP 方法：
+
+| 方法 | 含义 | 用途 |
+|-----|------|-----|
+| **GET** | 获取资源 | 浏览网页 |
+| **POST** | 提交数据 | 登录、提交表单 |
+| **PUT** | 上传资源 | 文件上传 |
+| **DELETE** | 删除资源 | 删除数据 |
+
+#### 第五步：服务器处理请求
+
+服务器（通常是 **Web 服务器** 如 Nginx、Apache）收到请求后：
+
+1. **解析请求**：理解客户端想要什么
+2. **处理业务**：调用后端程序（如 Python、Node.js、Java）
+3. **查询数据库**：获取需要的数据
+4. **生成响应**：把数据组装成 HTML、JSON 等格式
+
+```
+服务器处理流程：
+┌─────────────────────────────────────────────────────────┐
+│  1. Web 服务器接收请求 (Nginx/Apache)                  │
+│  2. 根据路径找到对应的处理程序                          │
+│  3. 执行后端代码 (API、业务逻辑)                        │
+│  4. 如需查询数据库，获取数据                           │
+│  5. 组装响应 (HTML/JSON/CSS/JS)                        │
+│  6. 返回 HTTP 响应                                     │
+└─────────────────────────────────────────────────────────┘
+```
+
+#### 第六步：返回 HTTP 响应
+
+服务器返回 **HTTP 响应**，包含状态码、响应头和响应体：
+
+```
+HTTP 响应格式：
+┌─────────────────────────────────────────────────────────┐
+│  HTTP/1.1 200 OK                                       │
+│  Content-Type: text/html                               │
+│  Content-Length: 1234                                  │
+│                                                         │
+│  <!DOCTYPE html>                                       │
+│  <html>...</html>                                      │
+└─────────────────────────────────────────────────────────┘
+```
+
+常见的状态码：
+
+| 状态码 | 含义 |
+|-------|------|
+| **200** | 成功 |
+| **301/302** | 重定向 |
+| **404** | 资源未找到 |
+| **500** | 服务器错误 |
+
+#### 第七步：浏览器渲染页面
+
+浏览器收到响应后，开始**渲染页面**：
+
+<RenderingDemo />
+
+1. **解析 HTML**：构建 DOM 树
+2. **解析 CSS**：计算样式，构建渲染树
+3. **执行 JavaScript**：执行页面中的 JS 代码
+4. **绘制页面**：把内容显示到屏幕上
+
+```
+浏览器渲染过程：
+┌─────────────────────────────────────────────────────────┐
+│  1. HTML 解析 → DOM 树                                │
+│  2. CSS 解析 → 样式规则                               │
+│  3. DOM + CSS → 渲染树                                │
+│  4. 布局计算 → 每个元素的大小位置                      │
+│  5. 绘制 → 像素显示到屏幕                             │
+│  6. 合成 → 多层合并显示                                │
+└─────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 6. 完整流程回顾
+
+让我们把整个过程串起来：
+
+<FullProcessDemo />
+
+```
+从按下电源到访问网站的完整流程：
+
+┌──────────────────────────────────────────────────────────────────┐
+│  1. 按下电源                                                      │
+│     └── 电源启动 → 主板唤醒 → CPU 复位 → 执行 BIOS/UEFI          │
+├──────────────────────────────────────────────────────────────────┤
+│  2. BIOS/UEFI 启动                                               │
+│     └── 硬件自检 → 寻找启动设备 → 读取引导程序                   │
+├──────────────────────────────────────────────────────────────────┤
+│  3. 操作系统启动                                                 │
+│     └── 引导程序 → 加载内核 → 启动服务 → 显示桌面                │
+├──────────────────────────────────────────────────────────────────┤
+│  4. 打开浏览器                                                   │
+│     └── 双击图标 → 创建进程 → 加载程序 → 显示窗口                │
+├──────────────────────────────────────────────────────────────────┤
+│  5. 访问 URL                                                     │
+│     └── URL 解析 → DNS 解析 → TCP 连接 → HTTP 请求              │
+│         → 服务器处理 → HTTP 响应 → 浏览器渲染 → 显示网页          │
+└──────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 7. 知识地图
+
+这一章涉及的知识领域：
+
+```
+计算机系统概览
+├── 硬件基础
+│   ├── 电源 (PSU)
+│   ├── 主板芯片组
+│   └── CPU
+├── BIOS/UEFI
+│   ├── POST 自检
+│   ├── 启动顺序
+│   └── 引导程序
+├── 操作系统
+│   ├── 内核 (Kernel)
+│   ├── 系统服务
+│   └── 桌面环境
+├── 应用程序
+│   ├── 进程管理
+│   └── 程序加载
+└── 网络通信
+    ├── DNS 解析
+    ├── TCP/IP 协议
+    ├── HTTP 协议
+    └── 浏览器渲染
+```
+
+::: tip 继续学习
+如果你想深入了解某个环节，可以继续学习：
+
+- **从晶体管到 CPU**：了解计算机硬件基础
+- **操作系统（进程/内存/文件系统）**：深入理解操作系统
+- **计算机网络**：深入理解网络协议
+:::
@@ -1,6 +1,23 @@
 # 编程语言图谱

-> 💡 **学习指南**：为什么有这么多编程语言？该学哪个？本章带你从"语言演化"到"编程范式"到"如何选择"，建立对编程语言全景的理解。**结论先行：没有最好的语言，只有最适合场景的语言。**
+::: tip 前言
+为什么有这么多编程语言？该学哪个？本章带你从"语言演化"到"编程范式"到"如何选择"，建立对编程语言全景的理解。**结论先行：没有最好的语言，只有最适合场景的语言。**
+:::
+
+**这篇文章会带你学什么？**
+
+学完这章后，你将获得：
+
+- **理性选型能力**：面对"学什么语言"时，能根据项目需求做出判断，而不是盲目跟风
+- **范式理解深度**：理解"面向对象"、"函数式编程"是不同的思维方式，而不仅仅是语法差异
+- **历史演进视角**：看到 70 多年语言演化——从手写 0 和 1 到自然语言生成代码
+- **后续学习基础**：为理解新语言设计理念、技术选型决策打下基础
+
+| 章节 | 内容 | 核心概念 |
+|-----|------|---------|
+| **第 1 章** | 语言演化 | 从机器语言到高级语言 |
+| **第 2 章** | 编程范式 | 命令式、面向对象、函数式 |
+| **第 3 章** | 语言选择 | 场景驱动的选型方法 |

 ---

@@ -1,9 +1,25 @@
 # 从晶体管到 CPU

-::: tip 核心问题
+::: tip 前言
 **计算机是怎么"思考"的？** 你可能知道 CPU 是电脑的"大脑"，但这个大脑到底是怎么工作的？它怎么从一堆金属和塑料变成能执行程序、处理数据的智能设备？本章带你从最底层的晶体管开始，一步步理解 CPU 的构造原理。
 :::

+**这篇文章会带你学什么？**
+
+学完这章后，你将获得：
+
+- **术语理解能力**：听到"CPU 主频"、"多核"、"指令集"不再一头雾水，能理解背后的物理原理
+- **代码执行视角**：看到一行代码如何经过取指、解码、执行、写回，最终变成屏幕上的像素点
+- **抽象层次思维**：理解每一层如何向上层提供服务，又如何隐藏下层的复杂性
+- **后续学习基础**：为计算机体系结构、嵌入式开发、性能优化打下基础
+
+| 章节 | 内容 | 核心概念 |
+|-----|------|---------|
+| **第 1 章** | 晶体管 | 数字世界的开关 |
+| **第 2 章** | 逻辑门 | 布尔运算的物理实现 |
+| **第 3 章** | 功能单元 | 加法器、寄存器、多路选择器 |
+| **第 4 章** | CPU 核心 | 取指、解码、执行、写回 |
+
 ---

 ## 0. 全景图：从沙子到智能
@@ -201,6 +217,8 @@
 - **内部总线 (Internal Bus)**：系统里的传送带，负责在各个模块之间搬运数据和信号。
 - **控制单元 (Control Unit)**：总指挥。它的使命就是从内存中读取用 0 和 1 组成的指令，解析出应该做什么，并向其他模块传达具体的控制信号，调度它们各司其职。

+<MinCpuDemo />
+
 ### 4.2 CPU 是如何执行指令的？

 不管写下的高级编程语言有多么复杂，最终都会变成内存中的一条条底层指令。CPU 执行任何指令的过程，本质上都在重复以下典型的四个步骤：
@@ -1,6 +1,22 @@
 # 类型系统与编译原理入门

-> 💡 **学习指南**：当你写下 `int x = 10 + 5;` 时，编译器是如何理解每个字符、检查类型是否正确、最终生成机器指令的？本章用两个核心概念——**类型系统**和**编译流程**——帮你理解编程语言背后的"翻译机制"。
+::: tip 前言
+当你写下 `int x = 10 + 5;` 时，编译器是如何理解每个字符、检查类型是否正确、最终生成机器指令的？本章用两个核心概念——**类型系统**和**编译流程**——帮你理解编程语言背后的"翻译机制"。
+:::
+
+**这篇文章会带你学什么？**
+
+学完这章后，你将获得：
+
+- **问题诊断能力**：看到 `TypeError` 报错时，能快速定位是类型不匹配还是隐式转换惹的祸
+- **语言选择依据**：理解为什么 TypeScript 适合大型项目、Python 适合快速原型开发
+- **类型安全思维**：在写代码时就预见可能的类型错误，而不是等到运行时才发现
+- **后续学习基础**：为编译原理、语言设计等高级话题打下基础
+
+| 章节 | 内容 | 核心概念 |
+|-----|------|---------|
+| **第 1 章** | 类型系统 | 静态/动态类型、强/弱类型 |
+| **第 2 章** | 编译流程 | 词法分析、语法分析、代码生成 |

 ---

@@ -0,0 +1,413 @@
+# Vibe Coding 时代下的全栈开发
+
+::: tip 前言
+**什么是 Vibe Coding？** 简单说，就是"用自然语言写代码"——你用中文或英文描述想要什么，AI 帮你生成代码。这彻底改变了软件开发的游戏规则。
+
+但这里有个关键问题：**AI 能帮你写代码，但 AI 不能替你思考。** 你仍然需要知道"要写什么"、"为什么这么写"、"怎么判断对错"。这正是本章要帮你建立的基础认知框架。
+:::
+
+**这篇文章会带你学什么？**
+
+学完这章后，你将获得：
+
+- **领域全景认知**：知道前端、后端、AI 算法等方向分别做什么
+- **技术选型能力**：面对"学什么语言/框架"时，能做出理性判断
+- **成长路径清晰**：了解从零基础到 3-5 年经验工程师的技能演进
+- **Vibe Coding 思维**：理解在 AI 辅助时代，哪些能力变得更重要
+
+| 章节 | 内容 | 核心概念 |
+|-----|------|---------|
+| **第 1 章** | 计算机领域全景 | 前端、后端、移动端、AI、运维 |
+| **第 2 章** | 什么是前端 | 用户能感知的界面层 |
+| **第 3 章** | 什么是后端 | 幕后的服务器逻辑 |
+| **第 4 章** | 编程语言图谱 | 与计算机沟通的工具 |
+| **第 5 章** | 全栈工程师 | 前后端通吃的多面手 |
+| **第 6 章** | AI 算法工程师 | 让机器学会思考 |
+| **第 7 章** | 成长路径 | 从入门到精通的路线图 |
+
+---
+
+## 0. Vibe Coding：软件开发的新范式
+
+### 0.1 什么是 Vibe Coding？
+
+想象一下以前的软件开发：
+
+```
+传统开发流程：
+你 → 学习语法 → 写代码 → 调试 → 查文档 → 修改 → 运行
+        ↑___________________反复循环___________________↓
+```
+
+现在有了 AI 辅助：
+
+```
+Vibe Coding 流程：
+你 → 用自然语言描述需求 → AI 生成代码 → 你审核修改 → 运行
+              ↑____________快速迭代____________↓
+```
+
+**核心变化**：从"怎么写代码"变成"怎么描述需求"。
+
+### 0.2 Vibe Coding 时代，什么能力更重要？
+
+<DeveloperSkillShiftDemo />
+
+::: tip 💡 关键洞察
+AI 能帮你写代码，但以下能力 AI 替代不了：
+- **判断力**：知道 AI 生成的代码对不对、好不好
+- **架构思维**：知道系统该怎么设计、模块该怎么划分
+- **领域知识**：理解业务逻辑，知道"要做什么"
+- **调试能力**：出问题时知道从哪里排查
+:::
+
+---
+
+## 1. 计算机领域全景图
+
+在深入各个方向之前，先建立一个全局认知。
+
+<ComputerFieldMapDemo />
+
+### 1.1 用"餐厅"比喻理解各领域
+
+把一个软件系统想象成一家**餐厅**：
+
+| 领域 | 餐厅角色 | 做什么 | 产出物 |
+|-----|---------|--------|--------|
+| **前端** | 装修 + 菜单 + 服务员 | 用户能看到、能交互的一切 | 网页、小程序、App 界面 |
+| **后端** | 厨房 + 仓库 | 处理业务逻辑、存储数据 | API、数据库、服务器程序 |
+| **移动端** | 外卖窗口 | 手机上的应用体验 | iOS/Android App |
+| **AI/算法** | 研发部 | 让系统变"聪明" | 推荐模型、图像识别、智能对话 |
+| **运维/DevOps** | 物业 + 安保 | 保证系统稳定运行 | 部署脚本、监控系统、安全防护 |
+| **数据工程** | 财务 + 分析师 | 数据采集、存储、分析 | 数据管道、报表、仪表盘 |
+
+### 1.2 各领域的技术栈速览
+
+不要被这些名词吓到，这里只是让你"见过"它们：
+
+| 领域 | 核心语言 | 常用框架/工具 | 典型产出 |
+|-----|---------|--------------|---------|
+| 前端 | JavaScript, TypeScript | React, Vue, CSS | 网页、管理后台 |
+| 后端 | Node.js, Go, Java, Python | Express, Gin, Spring | API 服务 |
+| 移动端 | Swift, Kotlin, Dart | SwiftUI, Jetpack, Flutter | 手机 App |
+| AI/算法 | Python | PyTorch, TensorFlow | 模型、算法 |
+| 运维 | Shell, Python | Docker, Kubernetes | 部署方案 |
+
+::: tip 💡 给新手的建议
+不要试图一次学完所有东西。先选一个方向深入，建立"根据地"，再横向扩展。全栈不是"什么都懂一点"，而是"有一个核心强项，其他方向能用"。
+:::
+
+---
+
+## 2. 什么是前端？
+
+### 2.1 一句话定义
+
+**前端 = 用户能直接看到、点击、交互的部分。**
+
+当你打开一个网页：
+- 页面的布局、颜色、字体 → 前端
+- 点击按钮后的动画效果 → 前端
+- 表单输入、数据展示 → 前端
+- 页面怎么适配手机屏幕 → 前端
+
+### 2.2 前端三件套
+
+<FrontendTriadDemo />
+
+**用"装修房子"来比喻**：
+
+| 技术 | 装修角色 | 职责 |
+|-----|---------|------|
+| **HTML** | 房屋结构 | 墙在哪、门在哪、房间怎么划分 |
+| **CSS** | 装饰风格 | 墙什么颜色、家具怎么摆、灯光效果 |
+| **JavaScript** | 智能家居 | 开关灯、窗帘自动开合、安防系统 |
+
+### 2.3 前端框架：为什么要用？
+
+原生 HTML/CSS/JS 能写网页，为什么还要学 React、Vue 这些框架？
+
+<FrontendFrameworkDemo />
+
+**核心原因**：当页面变得复杂（比如淘宝、微信网页版），直接操作 DOM 会变得非常混乱。框架帮你"管理复杂性"。
+
+### 2.4 前端工程师的一天
+
+```
+9:00  查看设计稿，理解要做什么功能
+10:00 用 React/Vue 写组件代码
+12:00 午休
+14:00 和后端对接 API，调试数据展示
+16:00 修复 bug，优化页面性能
+18:00 代码评审，和团队讨论技术方案
+```
+
+---
+
+## 3. 什么是后端？
+
+### 3.1 一句话定义
+
+**后端 = 用户看不到，但支撑整个系统运转的逻辑。**
+
+当你网购下单：
+- 验证你的账号密码 → 后端
+- 检查商品库存 → 后端
+- 计算优惠价格 → 后端
+- 生成订单、扣款 → 后端
+- 通知仓库发货 → 后端
+
+### 3.2 后端的核心职责
+
+<BackendCoreDemo />
+
+**用"餐厅厨房"来比喻**：
+
+| 后端职责 | 厨房类比 | 具体内容 |
+|---------|---------|---------|
+| **API 设计** | 菜单设计 | 定义"用户能点什么菜"、"怎么点" |
+| **业务逻辑** | 烹饪过程 | 处理订单、计算价格、验证权限 |
+| **数据存储** | 仓库管理 | 把数据存进数据库、查询数据 |
+| **性能优化** | 厨房效率 | 缓存、异步处理、负载均衡 |
+| **安全防护** | 食品安全 | 防止 SQL 注入、权限控制 |
+
+### 3.3 后端语言怎么选？
+
+| 语言 | 特点 | 适合场景 |
+|-----|------|---------|
+| **Node.js** | 前端友好，JavaScript 全栈 | 中小型项目、快速原型 |
+| **Go** | 高性能、并发强 | 高并发服务、微服务架构 |
+| **Java** | 生态成熟、企业级 | 大型企业系统、银行 |
+| **Python** | 简洁、AI 生态好 | 数据处理、AI 服务 |
+
+::: tip 💡 新手建议
+如果你已经会 JavaScript（前端基础），Node.js 是最自然的后端入门选择。一套语言，前后端都能写。
+:::
+
+### 3.4 后端工程师的一天
+
+```
+9:00  查看 API 需求文档
+10:00 设计数据库表结构
+11:00 写 API 接口代码
+14:00 和前端联调，修复接口问题
+16:00 优化慢查询，处理线上问题
+18:00 代码评审，写技术文档
+```
+
+---
+
+## 4. 编程语言图谱
+
+### 4.1 编程语言是什么？
+
+**编程语言 = 人类和计算机沟通的桥梁。**
+
+计算机只认识 0 和 1，人类习惯说自然语言。编程语言是中间层：
+- 人类用编程语言写代码（比 0/1 好理解）
+- 计算机把编程语言翻译成机器指令
+
+### 4.2 语言分类
+
+<ProgrammingLanguageMapDemo />
+
+**按运行方式分类**：
+
+| 类型 | 原理 | 代表语言 | 特点 |
+|-----|------|---------|------|
+| **编译型** | 先翻译成机器码，再运行 | C, C++, Go, Rust | 运行快，编译慢 |
+| **解释型** | 边翻译边运行 | Python, JavaScript, Ruby | 开发快，运行慢 |
+| **字节码型** | 折中方案 | Java, Kotlin, C# | 平衡性能和开发效率 |
+
+**按类型系统分类**：
+
+| 类型 | 特点 | 代表语言 |
+|-----|------|---------|
+| **静态类型** | 变量类型写代码时确定 | Java, TypeScript, Go |
+| **动态类型** | 变量类型运行时确定 | Python, JavaScript, Ruby |
+| **强类型** | 类型检查严格，不自动转换 | Python, Java |
+| **弱类型** | 类型检查宽松，会自动转换 | JavaScript, PHP |
+
+### 4.3 该学哪门语言？
+
+<LanguageSelectionDemo />
+
+::: tip 💡 选择原则
+没有"最好的语言"，只有"最适合场景的语言"。新手建议：
+1. **先学一门，学深**：建立编程思维
+2. **再学第二门，对比**：理解语言设计差异
+3. **按需学习**：根据项目需求选择
+:::
+
+---
+
+## 5. 全栈工程师：前后端通吃
+
+### 5.1 什么是全栈？
+
+**全栈工程师 = 能独立完成前端 + 后端开发的工程师。**
+
+<FullstackSkillDemo />
+
+### 5.2 全栈的优势
+
+| 优势 | 说明 |
+|-----|------|
+| **独立完成项目** | 从需求到上线，一个人搞定 |
+| **沟通成本低** | 不需要前后端来回扯皮 |
+| **技术视野广** | 理解整个系统如何运作 |
+| **创业友好** | 快速验证想法，MVP 开发 |
+
+### 5.3 全栈的挑战
+
+| 挑战 | 说明 |
+|-----|------|
+| **深度 vs 广度** | 容易"什么都懂一点，什么都不精" |
+| **技术更新快** | 前后端技术都在快速演进 |
+| **精力分散** | 需要同时关注多个领域 |
+
+### 5.4 全栈成长建议
+
+```
+第 1 阶段：建立根据地
+└── 选一个方向深入（建议从前端或后端开始）
+└── 达到能独立完成项目的水平
+
+第 2 阶段：横向扩展
+└── 学习另一个方向的基础
+└── 能完成简单的全栈项目
+
+第 3 阶段：融会贯通
+└── 理解前后端如何协作
+└── 能设计完整的技术架构
+
+第 4 阶段：持续精进
+└── 在某个领域保持深度
+└── 其他领域保持"能用"水平
+```
+
+---
+
+## 6. AI 算法工程师：让机器学会思考
+
+### 6.1 AI 工程师 vs 传统开发
+
+<AIvsTraditionalDemo />
+
+| 维度 | 传统开发 | AI 算法工程师 |
+|-----|---------|--------------|
+| **核心任务** | 实现确定性的业务逻辑 | 训练模型、优化算法 |
+| **思维方式** | "如果 A 则执行 B" | "让机器从数据中学习规律" |
+| **代码产出** | 功能模块、系统 | 模型、训练脚本 |
+| **调试方式** | 断点、日志 | 看指标、调超参 |
+| **成功标准** | 功能正确、无 bug | 准确率、召回率达标 |
+
+### 6.2 AI 工程师的技能树
+
+```
+AI 算法工程师
+    │
+    ├── 数学基础
+    │   ├── 线性代数（矩阵运算）
+    │   ├── 概率统计（分布、期望）
+    │   └── 微积分（梯度、优化）
+    │
+    ├── 编程能力
+    │   ├── Python（主力语言）
+    │   ├── PyTorch / TensorFlow（深度学习框架）
+    │   └── 数据处理（Pandas, NumPy）
+    │
+    ├── 机器学习
+    │   ├── 监督学习（分类、回归）
+    │   ├── 无监督学习（聚类、降维）
+    │   └── 模型评估方法
+    │
+    └── 深度学习
+        ├── 神经网络基础
+        ├── CNN（图像）
+        ├── RNN / Transformer（序列）
+        └── 大模型（LLM）
+```
+
+### 6.3 AI 工程师的一天
+
+```
+9:00  查看模型训练结果，分析指标
+10:00 数据预处理，清洗训练数据
+12:00 午休
+14:00 调整模型结构，尝试新方案
+16:00 跑实验，对比不同方案效果
+18:00 写实验报告，和团队讨论下一步
+```
+
+### 6.4 Vibe Coding 时代的 AI 工程师
+
+AI 辅助开发对 AI 工程师的影响：
+
+| 变化 | 说明 |
+|-----|------|
+| **代码生成** | AI 能生成训练脚本、数据处理代码 |
+| **论文阅读** | AI 能帮你总结论文要点 |
+| **实验记录** | AI 能帮你整理实验结果 |
+| **不变的是** | 对问题的理解、对结果的判断、对方向的把握 |
+
+---
+
+## 7. 成长路径：从入门到精通
+
+### 7.1 3-5 年成长路线图
+
+<CareerPathDemo />
+
+### 7.2 各阶段能力要求
+
+| 阶段 | 时间 | 核心能力 | 典型产出 |
+|-----|------|---------|---------|
+| **入门** | 0-1 年 | 掌握一门语言 + 基础工具 | 能完成简单功能模块 |
+| **进阶** | 1-2 年 | 熟悉一个技术栈 + 工程化 | 能独立完成中型项目 |
+| **高级** | 2-3 年 | 深入一个领域 + 架构能力 | 能设计系统方案 |
+| **资深** | 3-5 年 | 技术深度 + 业务理解 + 团队协作 | 能主导大型项目 |
+
+### 7.3 Vibe Coding 时代的学习策略
+
+<LearningStrategyDemo />
+
+::: tip 💡 核心建议
+1. **基础比工具重要**：语言特性、数据结构、算法思维是根基
+2. **实践比理论重要**：做项目是最好的学习方式
+3. **思考比记忆重要**：理解"为什么"比记住"怎么做"更有价值
+4. **AI 是工具不是拐杖**：用 AI 加速学习，不要用 AI 替代思考
+:::
+
+---
+
+## 8. 总结：Vibe Coding 时代的核心竞争力
+
+回顾本章，我们建立了计算机领域的全局认知：
+
+1. **领域划分**：前端、后端、移动端、AI、运维、数据——各有侧重
+2. **技术选型**：没有最好的技术，只有最适合场景的技术
+3. **成长路径**：先深后广，建立根据地再横向扩展
+4. **AI 时代**：AI 能帮你写代码，但不能替你思考
+
+### Vibe Coding 时代的三层能力
+
+```
+┌─────────────────────────────────────────┐
+│  第 3 层：判断力（AI 替代不了）           │
+│  - 知道什么是对的                        │
+│  - 知道什么是好的                        │
+│  - 知道该往哪个方向走                    │
+├─────────────────────────────────────────┤
+│  第 2 层：架构思维（AI 辅助）             │
+│  - 系统设计能力                          │
+│  - 模块划分能力                          │
+│  - 技术选型能力                          │
+├─────────────────────────────────────────┤
+│  第 1 层：代码实现（AI 擅长）             │
+│  - 语法编写                              │
+│  - API 调用                              │
+│  - 常见模式实现                          │
+└─────────────────────────────────────────┘
+```