feat(docs): add interactive demos and complete content for development tools

- Add Vue components for interactive demos (SSH auth, regex, env vars, ports) - Complete markdown content for SSH, regex, environment variables, and ports - Remove placeholder "待实现" sections and replace with detailed guides - Add visual explanations for key concepts like ports and localhost - Include practical examples and troubleshooting tips - Add component for showing evolution from transistors to CPU - Improve documentation structure and navigation - Add security best practices for API keys and environment variables
2026-02-21 10:04:47 +08:00
parent 399913d3ff
commit 6098908eee
52 changed files with 17782 additions and 2725 deletions
@@ -1,395 +1,132 @@
 # 编程语言图谱

-::: tip 🎯 核心问题
-**为什么有这么多编程语言？它们之间有什么关系？** 从机器语言到现代高级语言，每种语言都有其设计哲学和适用场景。本章带你理解编程语言的演化历程和核心概念。
-:::
+> 💡 **学习指南**：为什么有这么多编程语言？该学哪个？本章带你从"语言演化"到"编程范式"到"如何选择"，建立对编程语言全景的理解。**结论先行：没有最好的语言，只有最适合场景的语言。**

 ---

-## 0. 想象你要和外国人交流：
+## 0. 人类如何和计算机"说话"？

- **直接用肢体语言**：最原始，但效率极低（机器语言）
- **学习对方的语言**：需要翻译，但表达丰富（高级语言）
- **使用世界语**：设计完美，但没人用（某些学术语言）
- **使用翻译软件**：自动转换，但可能不准确（编译器/解释器）
+想象你要和一个只懂二进制的机器人沟通：

-**编程语言就是人类与计算机沟通的桥梁**，不同的语言有不同的设计哲学。
+- **直接打 0 和 1** — 最原始，效率极低，一个 0 写成 1 就全错了（机器语言）
+- **用助记符代替** — `MOV AX, 1` 比 `10110000 00000001` 好认多了（汇编语言）
+- **用接近自然语言** — `int sum = 1 + 2;` 人类可以直接读懂（高级语言）

-<LanguageMapDemo />
+**编程语言就是人类与计算机沟通的桥梁**，70 多年来一直在朝着"更接近人类思维"的方向进化。

 ---

 ## 1. 编程语言的演化

-### 1.1 第一代：机器语言（1940s）
+👇 动手点点看：探索编程语言从 1940 年代到今天的演化历程

-::: tip 💡 机器语言是什么？
-直接用 0 和 1 编写程序，计算机可以直接执行。
+<LanguageMapDemo />

-**示例**：让计算机计算 1 + 2
-```
-10110000 00000001  ; 将 1 放入寄存器
-10110001 00000010  ; 将 2 放入另一个寄存器
-10100010           ; 执行加法
-```
-
-**问题**：
- 人类难以理解和记忆
- 容易出错，一个 0 写成 1 就全错了
- 不同 CPU 有不同的机器语言
+::: tip 💡 一句话总结
+编程语言的演化趋势：**越来越接近人类思维，越来越安全，越来越高效**。从手写 0/1，到汇编助记符，到 C 的结构化编程，到 Java 的面向对象，再到 Rust 的内存安全——每一代语言都在解决上一代的痛点。
 :::

-### 1.2 第二代：汇编语言（1950s）
-
-用**助记符**代替 0 和 1：
-
-```asm
-MOV AX, 1    ; 将 1 放入 AX 寄存器
-MOV BX, 2    ; 将 2 放入 BX 寄存器
-ADD AX, BX   ; 将 BX 加到 AX
-```
-
-::: tip 💡 汇编语言 vs 机器语言
-| 特性 | 机器语言 | 汇编语言 |
-|------|---------|---------|
-| **可读性** | 极差 | 较好 |
-| **执行效率** | 最高 | 最高（汇编器直接转换） |
-| **移植性** | 无 | 无（依赖 CPU 架构） |
-| **使用场景** | 几乎不用 | 嵌入式、操作系统内核 |
-:::
-
-### 1.3 第三代：高级语言（1950s - 至今）
-
-**用接近自然语言的方式编程**：
-
-```c
-int sum = 1 + 2;  // C 语言
-```
-
-**里程碑语言**：
-
-| 年代 | 语言 | 意义 |
-|------|------|------|
-| **1957** | Fortran | 第一个高级语言，科学计算 |
-| **1958** | Lisp | 函数式编程鼻祖 |
-| **1959** | COBOL | 商业数据处理 |
-| **1972** | C | 系统编程，影响深远 |
-| **1983** | C++ | 面向对象 + C 的效率 |
-| **1991** | Python | 简洁优雅，AI 时代主角 |
-| **1995** | Java | 跨平台，企业应用 |
-| **1995** | JavaScript | Web 开发，无处不在 |
-| **2009** | Go | 并发友好，云原生 |
-| **2010** | Rust | 内存安全，系统编程新选择 |
-
-### 1.4 第四代：领域特定语言（DSL）
-
-为特定领域设计的语言：
-
-| 语言 | 领域 | 示例 |
-|------|------|------|
-| **SQL** | 数据库查询 | `SELECT * FROM users` |
-| **HTML** | 网页结构 | `<div>Hello</div>` |
-| **CSS** | 样式定义 | `color: red;` |
-| **Regex** | 文本匹配 | `\d{3}-\d{4}` |
-| **MATLAB** | 数学计算 | `A = [1 2; 3 4]` |
-
 ---

 ## 2. 编程范式：思考问题的方式

-::: tip 💡 什么是编程范式？
-编程范式是**编程的思维方式**，决定了你如何组织代码和解决问题。
+编程范式不是语言特性，而是**思维方式**——就像写作有诗歌、小说、论文不同的文体。

-就像写作有不同的文体（诗歌、小说、论文），编程也有不同的"文体"。
-:::
-
-### 2.1 命令式编程（Imperative）
-
-**核心思想**：告诉计算机"怎么做"
+### 2.1 命令式 — "一步步告诉计算机怎么做"

 ```c
-// 计算数组总和
 int sum = 0;
 for (int i = 0; i < n; i++) {
    sum += arr[i];
 }
 ```

-**特点**：
- 关注**过程**和**步骤**
- 通过**语句**改变程序状态
- 最接近计算机实际执行方式
-
-**代表语言**：C, Fortran, BASIC
-
-### 2.2 面向对象编程（OOP）
-
-**核心思想**：把数据和操作封装在"对象"中
+### 2.2 面向对象 — "把数据和行为封装成对象"

 ```python
 class Dog:
    def __init__(self, name):
        self.name = name
-    
    def bark(self):
        print(f"{self.name} says woof!")
-
-dog = Dog("Buddy")
-dog.bark()  # Buddy says woof!
 ```

-**四大特性**：
-
-| 特性 | 含义 | 生活类比 |
-|------|------|---------|
-| **封装** | 隐藏内部细节 | 汽车方向盘，不需要知道引擎原理 |
-| **继承** | 子类继承父类 | 儿子继承父亲的基因 |
-| **多态** | 同一接口不同实现 | 不同动物发出不同叫声 |
-| **抽象** | 提取共同特征 | "动物"是对猫、狗的抽象 |
-
-**代表语言**：Java, C++, Python, Ruby
-
-### 2.3 函数式编程（Functional）
-
-**核心思想**：把计算视为函数求值，避免状态变化
+### 2.3 函数式 — "用纯函数组合，不修改状态"

 ```haskell
-- 计算数组总和
-sum arr = foldl (+) 0 arr
-
-- 或者更简洁
 sum = foldl (+) 0
+-- 相同输入永远产生相同输出
 ```

-**核心原则**：
-
-| 原则 | 含义 | 好处 |
-|------|------|------|
-| **纯函数** | 相同输入永远产生相同输出 | 易测试、易推理 |
-| **不可变数据** | 数据一旦创建就不变 | 无副作用、线程安全 |
-| **高阶函数** | 函数可以作为参数和返回值 | 代码复用、灵活组合 |
-| **无副作用** | 函数不修改外部状态 | 可预测、易调试 |
-
-**代表语言**：Haskell, Lisp, Erlang, F#
-
-### 2.4 声明式编程（Declarative）
-
-**核心思想**：告诉计算机"做什么"，而不是"怎么做"
+### 2.4 声明式 — "只说做什么，不管怎么做"

 ```sql
-- 查询所有活跃用户
-SELECT name, email 
-FROM users 
-WHERE active = true
-ORDER BY created_at DESC
+SELECT name FROM users WHERE active = true
+-- 数据库自己决定怎么查最快
 ```

-**对比命令式**：
-
-| 命令式 | 声明式 |
-|--------|--------|
-| "从第一行开始遍历..." | "给我所有活跃用户" |
-| "检查每个用户是否活跃..." | "按创建时间排序" |
-| "如果活跃就加入结果..." | 数据库自己决定怎么执行 |
-| "最后排序返回..." | |
-
-**代表语言**：SQL, Prolog, HTML
+::: tip 💡 实际开发中
+现代语言大多是**多范式**的。Python 既支持面向对象，也支持函数式；JavaScript 也一样。不用纠结"哪个范式最好"，而是根据问题选择最合适的方式。
+:::

 ---

-## 3. 类型系统：数据的分类规则
+## 3. 类型系统：数据的交通规则

-::: tip 💡 什么是类型系统？
-类型系统是编程语言的**交通规则**，规定数据如何分类和操作。
+| | 强类型 | 弱类型 |
+|---|---|---|
+| **静态** | Java, Rust, TypeScript — 最安全 | C, C++ — 高效但要小心 |
+| **动态** | Python, Ruby — 灵活且安全 | JavaScript, PHP — 灵活但易出错 |

-就像现实世界：
- **整数** = 整数类型（1, 2, 3...）
- **文字** = 字符串类型（"hello"）
- **是/否** = 布尔类型（true/false）
-:::
+**关键问题**：`"1" + 1` 等于什么？
+- **JavaScript（弱类型）**：`"11"` — 悄悄帮你转了
+- **Python（强类型）**：`TypeError` — 让你自己想清楚

-### 3.1 静态类型 vs 动态类型
-
-| 特性 | 静态类型 | 动态类型 |
-|------|---------|---------|
-| **类型检查时机** | 编译时 | 运行时 |
-| **代码示例** | `int x = 1;` | `x = 1` |
-| **错误发现** | 编译期就发现 | 运行时才发现 |
-| **灵活性** | 较低 | 较高 |
-| **性能** | 较高（编译优化） | 较低（运行时检查） |
-| **代表语言** | Java, C++, Rust, TypeScript | Python, JavaScript, Ruby |
-
-**静态类型示例（Java）**：
-
-```java
-String name = "Alice";
-name = 123;  // 编译错误！类型不匹配
-```
-
-**动态类型示例（Python）**：
-
-```python
-name = "Alice"
-name = 123  # 没问题，运行时类型改变
-```
-
-### 3.2 强类型 vs 弱类型
-
-| 特性 | 强类型 | 弱类型 |
-|------|--------|--------|
-| **类型转换** | 不允许隐式转换 | 允许隐式转换 |
-| **类型安全** | 高 | 低 |
-| **代码示例** | `"1" + 1` 报错 | `"1" + 1 = "11"` |
-| **代表语言** | Python, Java, Rust | JavaScript, PHP, C |
-
-**弱类型示例（JavaScript）**：
-
-```javascript
-console.log("1" + 1)    // "11" (字符串拼接)
-console.log("1" - 1)    // 0    (自动转数字)
-console.log([] + [])    // ""   (空字符串)
-console.log([] + {})    // "[object Object]"
-```
-
-**强类型示例（Python）**：
-
-```python
-"1" + 1  # TypeError: can only concatenate str to str
-```
-
-### 3.3 类型推断
-
-现代语言可以**自动推断**变量类型：
-
-```typescript
-// TypeScript
-let x = 1;        // 推断为 number
-let y = "hello";  // 推断为 string
-
-// Rust
-let x = 1;        // 推断为 i32
-let y = "hello";  // 推断为 &str
-```
+想深入了解类型系统？→ [类型系统与编译原理入门](./type-systems-compilers)

 ---

 ## 4. 编译型 vs 解释型

-::: tip 💡 程序如何运行？
-编程语言写的代码需要转换成机器能理解的指令，有两种主要方式：
-:::
-
-### 4.1 编译型语言
-
-**流程**：源代码 → 编译器 → 机器码 → 执行
-
-```
-源代码 (main.c)
-    ↓
-编译器 (gcc)
-    ↓
-可执行文件 (main.exe)
-    ↓
-CPU 直接执行
-```
-
-**特点**：
-
-| 优点 | 缺点 |
-|------|------|
-| 执行速度快 | 编译时间长 |
-| 编译时发现错误 | 跨平台需要重新编译 |
-| 不需要运行时环境 | 调试较困难 |
-
-**代表语言**：C, C++, Rust, Go
-
-### 4.2 解释型语言
-
-**流程**：源代码 → 解释器 → 逐行执行
-
-```
-源代码 (main.py)
-    ↓
-解释器 (python)
-    ↓
-逐行解释执行
-```
-
-**特点**：
-
-| 优点 | 缺点 |
-|------|------|
-| 跨平台 | 执行速度慢 |
-| 开发调试快 | 运行时才能发现错误 |
-| 代码即运行 | 需要解释器环境 |
-
-**代表语言**：Python, JavaScript, Ruby, PHP
-
-### 4.3 混合型语言（JIT）
-
-**即时编译（Just-In-Time）**：先解释执行，热点代码编译成机器码
-
-```
-源代码
-    ↓
-字节码（中间代码）
-    ↓
-解释执行 + JIT 编译热点代码
-    ↓
-执行
-```
-
-**代表语言**：Java, JavaScript (V8), Python (PyPy)
+| | 编译型 | 解释型 | JIT |
+|---|---|---|---|
+| **过程** | 先全部翻译，再执行 | 边读边执行 | 先解释，热点再编译 |
+| **速度** | 最快 | 较慢 | 中等 |
+| **调试** | 需编译等待 | 即时反馈 | 即时 + 优化 |
+| **代表** | C, Rust, Go | Python, Ruby | Java, JavaScript |

 ---

 ## 5. 如何选择编程语言？

-::: tip 💡 没有最好的语言，只有最适合的语言
-选择语言要考虑：
-1. **问题领域**：Web 开发？系统编程？数据分析？
-2. **团队熟悉度**：团队擅长什么？
-3. **生态系统**：有没有现成的库？
-4. **性能需求**：需要多高的性能？
-5. **开发效率**：需要多快开发完成？
-:::
+### 按场景选择

-### 5.1 按应用场景选择
-
-| 场景 | 推荐语言 | 原因 |
-|------|---------|------|
-| **Web 前端** | JavaScript, TypeScript | 浏览器原生支持 |
-| **Web 后端** | Java, Go, Python, Node.js | 生态成熟，框架丰富 |
+| 场景 | 推荐语言 | 理由 |
+|---|---|---|
+| **Web 前端** | JavaScript, TypeScript | 浏览器只认 JS |
+| **Web 后端** | Go, Java, Python, Node.js | 生态成熟 |
 | **移动开发** | Swift (iOS), Kotlin (Android) | 官方推荐 |
-| **数据分析** | Python, R | 库丰富，社区活跃 |
-| **人工智能** | Python | TensorFlow, PyTorch |
-| **系统编程** | C, C++, Rust | 性能高，控制精细 |
-| **游戏开发** | C++, C#, Lua | 引擎支持 |
-| **嵌入式** | C, Rust | 资源受限环境 |
-| **云原生** | Go, Rust | 并发友好，部署简单 |
+| **AI / 数据** | Python | PyTorch、Pandas 全在 Python |
+| **系统编程** | C, Rust | 直接操控硬件 |
+| **云原生** | Go, Rust | Docker/K8s 都是 Go 写的 |

-### 5.2 学习路线建议
+### 学习路线建议

-**初学者**：
-1. Python（语法简单，应用广泛）
-2. JavaScript（Web 开发必备）
-3. 选择一门静态类型语言（Java 或 TypeScript）
-
-**进阶**：
-1. 学习 C 理解底层
-2. 学习函数式编程思想（Haskell 或 F#）
-3. 学习 Rust 理解内存安全
+1. **Python** — 语法最简单，AI 时代入口
+2. **JavaScript** — Web 开发必备，前后端通吃
+3. **TypeScript** — 给 JS 加上类型系统，体验静态类型
+4. **Go 或 Rust** — 理解编译型语言和底层概念

 ---

 ## 6. 总结

 ::: tip 📚 核心要点
-1. **编程语言演化**：从机器语言到高级语言，越来越接近人类思维
-2. **编程范式**：命令式、面向对象、函数式、声明式，各有优劣
-3. **类型系统**：静态/动态、强/弱类型，影响代码安全和灵活性
-4. **运行方式**：编译型快但需编译，解释型慢但灵活
-5. **选择语言**：没有银弹，根据场景选择合适的工具
+1. **语言演化**：从机器语言到高级语言，越来越接近人类思维
+2. **编程范式**：命令式、面向对象、函数式、声明式，各有适用场景
+3. **类型系统**：静态/动态、强/弱，影响安全性和灵活性
+4. **运行方式**：编译型快，解释型灵活，JIT 兼顾
+5. **没有银弹**：根据场景选语言，而不是追求"最好的语言"
 :::

 **下一步学习**：
@@ -1,6 +1,6 @@
 # 从晶体管到 CPU

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

@@ -8,22 +8,20 @@

 ## 0. 全景图：从沙子到智能

-<TransistorDemo />
-
 现代计算机的"思考"能力，归根结底来自于一个简单的东西：**开关**。

 想象你有一个开关，可以控制灯的亮灭。现在，如果你有几十亿个这样的开关，并且能用它们组合出各种复杂的逻辑，会发生什么？这就是计算机的奥秘。

 **从沙子到智能的层次结构：**

-| 层级 | 名称 | 数量级 | 作用 | 类比 |
-|------|------|--------|------|------|
-| **1** | 晶体管 | 数十亿 | 最基本的开关单元 | 一个开关 |
-| **2** | 逻辑门 | 数亿 | 实现基本逻辑运算 | 开关组合 |
-| **3** | 功能单元 | 数百 | 实现特定功能（加法、存储等） | 功能模块 |
-| **4** | CPU 核心 | 1-128 | 完整的处理器 | 大脑 |
+| 层级  | 名称     | 数量级 | 作用                         | 类比     |
+| ----- | -------- | ------ | ---------------------------- | -------- |
+| **1** | 晶体管   | 数十亿 | 最基本的开关单元             | 一个开关 |
+| **2** | 逻辑门   | 数亿   | 实现基本逻辑运算             | 开关组合 |
+| **3** | 功能单元 | 数百   | 实现特定功能（加法、存储等） | 功能模块 |
+| **4** | CPU 核心 | 1-128  | 完整的处理器                 | 大脑     |

-::: tip 📊 逐行解读这张表
+::: tip 逐行解读这张表
 **第1层（晶体管）**：这是最底层的"开关"。现代 CPU 使用的是 MOSFET（金属氧化物半导体场效应晶体管），它的特点是：给栅极加电压，源极和漏极之间就导通；不加电压，就断开。这就是"用电控制电"的开关。

 **第2层（逻辑门）**：把晶体管组合起来，就能实现"与"、"或"、"非"等逻辑运算。比如 AND 门：两个输入都为 1 时输出才为 1。这就像两个串联的开关，必须都按下灯才会亮。
@@ -37,12 +35,15 @@

 ## 1. 晶体管：数字世界的开关

+<TransistorDemo />
+
 ### 1.1 什么是晶体管？

-::: tip 💡 晶体管是什么？
+::: tip 晶体管是什么？
 **晶体管（Transistor）** 是一种半导体器件，它可以像开关一样控制电流的通断。

 **生活类比**：想象一个水龙头：
+
 - **水龙头**：你用手拧开关，控制水流
 - **晶体管**：用电压控制开关，控制电流

@@ -51,23 +52,24 @@

 **晶体管的三个极：**

-| 极 | 名称 | 作用 | 类比 |
-|---|------|------|------|
-| **源极 (Source)** | 电流入口 | 电流从这里进入 | 水管入口 |
-| **漏极 (Drain)** | 电流出口 | 电流从这里流出 | 水管出口 |
-| **栅极 (Gate)** | 控制端 | 控制是否导通 | 水龙头开关 |
+| 极                | 名称     | 作用           | 类比       |
+| ----------------- | -------- | -------------- | ---------- |
+| **源极 (Source)** | 电流入口 | 电流从这里进入 | 水管入口   |
+| **漏极 (Drain)**  | 电流出口 | 电流从这里流出 | 水管出口   |
+| **栅极 (Gate)**   | 控制端   | 控制是否导通   | 水龙头开关 |

 ### 1.2 晶体管如何表示 0 和 1？

 计算机只认识 0 和 1，这和晶体管有什么关系？

-::: tip 💡 用电压表示 0 和 1
+::: tip 用电压表示 0 和 1
 **核心思想**：用电压的高低来表示 0 和 1。

 - **高电压（如 3.3V）**：表示 1
 - **低电压（如 0V）**：表示 0

 这就像灯泡的亮和灭：
+
 - 灯亮 = 1
 - 灯灭 = 0

@@ -80,15 +82,15 @@

 **现代 CPU 的晶体管数量：**

-| 年份 | CPU | 晶体管数量 | 制程工艺 |
-|------|-----|-----------|---------|
-| 1971 | Intel 4004 | 2,300 | 10μm |
-| 1993 | Intel Pentium | 310万 | 0.8μm |
-| 2006 | Intel Core 2 | 2.91亿 | 65nm |
-| 2020 | Apple M1 | 160亿 | 5nm |
-| 2023 | Apple M3 Max | 920亿 | 3nm |
+| 年份 | CPU           | 晶体管数量 | 制程工艺 |
+| ---- | ------------- | ---------- | -------- |
+| 1971 | Intel 4004    | 2,300      | 10μm     |
+| 1993 | Intel Pentium | 310万      | 0.8μm    |
+| 2006 | Intel Core 2  | 2.91亿     | 65nm     |
+| 2020 | Apple M1      | 160亿      | 5nm      |
+| 2023 | Apple M3 Max  | 920亿      | 3nm      |

-::: tip 💡 什么是制程工艺？
+::: tip 什么是制程工艺？
 **制程工艺**（如 5nm、3nm）指的是晶体管的尺寸。数字越小，晶体管越小，同样面积能容纳的晶体管越多。

 - **5nm**：大约是 50 个原子的宽度
@@ -110,21 +112,25 @@
 ### 2.2 基本逻辑门详解

 **AND 门（与门）**：
+
 - **规则**：两个输入都为 1，输出才为 1
 - **生活类比**：串联的两个开关，必须都按下灯才亮
 - **应用**：判断"多个条件是否同时满足"

 **OR 门（或门）**：
+
 - **规则**：任一个输入为 1，输出就为 1
 - **生活类比**：并联的两个开关，按任意一个灯就亮
 - **应用**：判断"是否满足任一条件"

 **NOT 门（非门）**：
+
 - **规则**：输入和输出相反
 - **生活类比**：反相器，开变关、关变开
 - **应用**：取反操作

 **XOR 门（异或门）**：
+
 - **规则**：两个输入不同时输出 1
 - **生活类比**：判断"两个值是否不同"
 - **应用**：比较、加法运算
@@ -135,15 +141,18 @@

 ::: tip 💡 加法器是怎么工作的？
 **半加器**：处理两个 1 位二进制数相加
+
 - 输入：A、B（各 1 位）
 - 输出：和（S）、进位（C）
 - 公式：S = A XOR B，C = A AND B

 **全加器**：处理两个 1 位二进制数相加，加上上一位的进位
+
 - 输入：A、B、Cin（进位输入）
 - 输出：和（S）、Cout（进位输出）

 **多位加法器**：把多个全加器级联起来
+
 - 第 1 位加法器的进位输出，连接到第 2 位加法器的进位输入
 - 就像我们手算加法时"逢二进一"
 :::
@@ -154,13 +163,15 @@

 ### 3.1 常见功能单元

-| 单元 | 功能 | 组成 | 类比 |
-|------|------|------|------|
-| **加法器** | 做加法 | 多个全加器级联 | 计算器的加法功能 |
-| **多路选择器** | 选择数据 | AND 门 + OR 门 | 多选一开关 |
-| **译码器** | 解码指令 | 多个 AND 门 | 翻译器 |
-| **寄存器** | 存储数据 | 触发器（锁存器） | 临时笔记本 |
-| **计数器** | 计数 | 触发器级联 | 计分牌 |
+| 单元           | 功能     | 组成             | 类比             |
+| -------------- | -------- | ---------------- | ---------------- |
+| **加法器**     | 做加法   | 多个全加器级联   | 计算器的加法功能 |
+| **多路选择器** | 选择数据 | AND 门 + OR 门   | 多选一开关       |
+| **译码器**     | 解码指令 | 多个 AND 门      | 翻译器           |
+| **寄存器**     | 存储数据 | 触发器（锁存器） | 临时笔记本       |
+| **计数器**     | 计数     | 触发器级联       | 计分牌           |
+
+<RegisterDemo />

 ### 3.2 寄存器：存储 1 位数据

@@ -168,6 +179,7 @@
 寄存器使用**触发器**电路来存储数据。触发器的特点是：一旦设置了状态，就能保持住，直到下一次改变。

 **生活类比**：想象一个跷跷板：
+
 - 推一下左边，左边就沉下去，右边翘起来
 - 即使你松手，跷跷板也会保持这个状态
 - 只有再推一下，才会改变状态
@@ -187,17 +199,18 @@

 CPU 执行一条指令，需要经过四个阶段：

-| 阶段 | 名称 | 做什么 | 类比 |
-|------|------|--------|------|
-| **1** | 取指 (Fetch) | 从内存读取指令 | 从书架上取书 |
-| **2** | 解码 (Decode) | 分析指令要做什么 | 阅读书的内容 |
-| **3** | 执行 (Execute) | 执行运算 | 按书中的指示行动 |
+| 阶段  | 名称              | 做什么           | 类比               |
+| ----- | ----------------- | ---------------- | ------------------ |
+| **1** | 取指 (Fetch)      | 从内存读取指令   | 从书架上取书       |
+| **2** | 解码 (Decode)     | 分析指令要做什么 | 阅读书的内容       |
+| **3** | 执行 (Execute)    | 执行运算         | 按书中的指示行动   |
 | **4** | 写回 (Write Back) | 把结果存回寄存器 | 把结果记在笔记本上 |

 ::: tip 💡 指令周期
 这四个阶段组成一个**指令周期**。CPU 不断重复这个周期，一条一条执行指令，就实现了"计算"。

 现代 CPU 使用**流水线技术**，让多个指令的不同阶段并行执行：
+
 - 第 1 条指令在执行时
 - 第 2 条指令在解码
 - 第 3 条指令在取指
@@ -207,12 +220,12 @@ CPU 执行一条指令，需要经过四个阶段：

 ### 4.3 CPU 性能的关键指标

-| 指标 | 含义 | 影响 | 典型值 |
-|------|------|------|--------|
-| **主频** | 每秒执行多少个时钟周期 | 主频越高，执行越快 | 3-5 GHz |
-| **核心数** | 独立的处理器数量 | 核心越多，并行能力越强 | 4-64 核 |
-| **缓存** | CPU 内部的高速存储 | 缓存越大，访问内存越少 | 8-64 MB |
-| **指令集** | CPU 能理解的指令集合 | 决定兼容性和功能 | x86、ARM |
+| 指标       | 含义                   | 影响                   | 典型值   |
+| ---------- | ---------------------- | ---------------------- | -------- |
+| **主频**   | 每秒执行多少个时钟周期 | 主频越高，执行越快     | 3-5 GHz  |
+| **核心数** | 独立的处理器数量       | 核心越多，并行能力越强 | 4-64 核  |
+| **缓存**   | CPU 内部的高速存储     | 缓存越大，访问内存越少 | 8-64 MB  |
+| **指令集** | CPU 能理解的指令集合   | 决定兼容性和功能       | x86、ARM |

 ---

@@ -220,23 +233,9 @@ CPU 执行一条指令，需要经过四个阶段：

 让我们回顾一下从晶体管到 CPU 的完整路径：

-```
-沙子（硅）
-    ↓ 提纯、切割
-硅晶圆
-    ↓ 光刻、蚀刻、掺杂
-晶体管（开关）
-    ↓ 组合
-逻辑门（AND、OR、NOT...）
-    ↓ 组合
-功能单元（加法器、寄存器...）
-    ↓ 组合
-CPU 核心（ALU、控制器、寄存器组...）
-    ↓ 编程
-软件应用
-```
+<EvolutionFlowDemo />

-::: tip 💡 核心启示
+::: tip 核心启示
 **计算机的本质是"开关的组合"**。

 - 一个开关做不了什么
@@ -244,6 +243,7 @@ CPU 核心（ALU、控制器、寄存器组...）
 - 这就是"量变引起质变"的最好例证

 理解这一点，你就会明白：
+
 - 为什么计算机只认识 0 和 1
 - 为什么编程语言最终都要翻译成机器码
 - 为什么算法效率如此重要（因为每一步操作都需要大量晶体管参与）
@@ -1,475 +1,151 @@
 # 类型系统与编译原理入门

-::: tip 🎯 核心问题
-**编程语言如何理解你的代码？** 当你写下 `int x = 10 + 5;` 时，编译器需要理解每个字符的含义、检查类型是否正确、优化代码、最终生成机器能执行的指令。本章带你理解这个神奇的过程。
-:::
+> 💡 **学习指南**：当你写下 `int x = 10 + 5;` 时，编译器是如何理解每个字符、检查类型是否正确、最终生成机器指令的？本章用两个核心概念——**类型系统**和**编译流程**——帮你理解编程语言背后的"翻译机制"。

 ---

-## 0. 想象你在翻译一本书：
+## 0. 想象你是翻译官

- **识别单词**：把句子拆成一个个单词（词法分析）
- **理解语法**：判断句子是否符合语法规则（语法分析）
- **理解含义**：确保句子意思正确（语义分析）
- **优化表达**：让句子更简洁（代码优化）
- **翻译输出**：翻译成目标语言（代码生成）
+翻译一本书，你需要：

-**编译器就是编程语言的"翻译官"**，将人类可读的代码转换为机器可执行的指令。
+1. **识别单词** — 把句子拆成一个个单词（词法分析）
+2. **理解语法** — 判断句子是否符合语法规则（语法分析）
+3. **理解含义** — 确保句子意思正确，类型不冲突（语义分析）
+4. **优化表达** — 让句子更简洁流畅（代码优化）
+5. **翻译输出** — 翻译成目标语言（代码生成）
+
+**编译器就是编程语言的"翻译官"**，将你写的代码转换为机器能执行的指令。而**类型系统**就是翻译过程中的"语法检查器"——确保你不会把数字当文字用。
+
+---
+
+## 1. 类型系统：数据的交通规则
+
+👇 动手点点看：探索四种类型系统的区别

 <TypeSystemDemo />

+::: tip 💡 一句话总结
+类型系统在两个维度上做选择：**何时检查**（编译时 vs 运行时）和**是否允许隐式转换**（强类型 vs 弱类型）。没有最好的组合，只有最适合的场景。
+:::
+
 ---

-## 1. 类型系统基础
+### 1.1 静态类型 vs 动态类型

-### 1.1 什么是类型？
+| | 静态类型 | 动态类型 |
+|---|---|---|
+| **检查时机** | 编译时（还没运行就检查） | 运行时（跑到那行才检查） |
+| **发现 bug** | 早（写完就知道） | 晚（用户操作时才暴露） |
+| **灵活性** | 较低（类型固定） | 较高（类型可变） |
+| **IDE 支持** | 好（自动补全、重构） | 差（运行时才知道类型） |
+| **代表** | Java, TypeScript, Rust | Python, JavaScript, Ruby |

-::: tip 💡 类型的本质
-类型是对数据的**分类**，规定了数据可以进行的操作。
+### 1.2 强类型 vs 弱类型

-就像现实世界：
- **整数**：可以加减乘除，但不能分割
- **字符串**：可以拼接、截取，但不能直接运算
- **布尔**：只有 true/false，用于逻辑判断
-:::
+**核心区别**：`"1" + 1` 会发生什么？

-**基本数据类型**：
+- **强类型（Python）**：直接报错 `TypeError` — "你得明确告诉我怎么转"
+- **弱类型（JavaScript）**：悄悄转成 `"11"` — "我猜你想拼字符串"

-| 类型 | 表示 | 占用空间 | 取值范围 |
-|------|------|---------|---------|
-| **整数** | int | 4 字节 | -2^31 到 2^31-1 |
-| **浮点数** | float | 4 字节 | 约 ±3.4 × 10^38 |
-| **双精度** | double | 8 字节 | 约 ±1.8 × 10^308 |
-| **字符** | char | 1 字节 | 0 到 255 |
-| **布尔** | bool | 1 字节 | true/false |
+弱类型的"好意"常常带来意想不到的 bug。

-### 1.2 静态类型 vs 动态类型
+### 1.3 类型推断：两全其美

-::: tip 💡 核心区别
-**静态类型**：变量类型在**编译时**确定
-**动态类型**：变量类型在**运行时**确定
-:::
-
-**静态类型示例（Java）**：
-
-```java
-String name = "Alice";  // 编译时确定 name 是 String 类型
-name = 123;             // 编译错误！类型不匹配
-```
-
-**动态类型示例（Python）**：
-
-```python
-name = "Alice"  # 运行时 name 是 str 类型
-name = 123      # 运行时 name 变成 int 类型
-print(type(name))  # <class 'int'>
-```
-
-**对比分析**：
-
-| 特性 | 静态类型 | 动态类型 |
-|------|---------|---------|
-| **类型检查时机** | 编译时 | 运行时 |
-| **错误发现** | 早（编译期） | 晚（运行时） |
-| **代码灵活性** | 低 | 高 |
-| **执行性能** | 高（编译优化） | 低（运行时检查） |
-| **IDE 支持** | 好（自动补全） | 差（运行时才知道类型） |
-| **代表语言** | Java, C++, Rust, TypeScript | Python, JavaScript, Ruby |
-
-### 1.3 强类型 vs 弱类型
-
-::: tip 💡 核心区别
-**强类型**：不允许隐式类型转换
-**弱类型**：允许隐式类型转换
-:::
-
-**弱类型示例（JavaScript）**：
-
-```javascript
-console.log("1" + 1)    // "11" - 字符串拼接
-console.log("1" - 1)    // 0    - 自动转数字
-console.log([] + [])    // ""   - 空数组转空字符串
-console.log(true + 1)   // 2    - 布尔转数字
-```
-
-**强类型示例（Python）**：
-
-```python
-"1" + 1   # TypeError: can only concatenate str to str
-"1" - 1   # TypeError: unsupported operand type(s)
-```
-
-**类型系统四象限**：
-
-| | 强类型 | 弱类型 |
-|---|--------|--------|
-| **静态** | Java, Rust, Haskell | C, C++ |
-| **动态** | Python, Ruby | JavaScript, PHP |
-
-### 1.4 类型推断
-
-现代语言可以**自动推断**变量类型，结合静态类型的安全性和动态类型的简洁性：
+现代语言的类型推断让你**写着像动态语言，编译器检查像静态语言**：

 ```typescript
-// TypeScript
-let x = 1;           // 推断为 number
-let arr = [1, 2, 3]; // 推断为 number[]
-let fn = (x) => x;   // 推断为 (x: any) => any
-
-// Rust
-let x = 1;           // 推断为 i32
-let s = "hello";     // 推断为 &str
-let v = vec![1, 2];  // 推断为 Vec<i32>
+let x = 1           // 编译器自动推断为 number
+let arr = [1, 2, 3] // 推断为 number[]
+x = "hello"         // ❌ 编译错误！类型不匹配
 ```

+你不用显式写类型声明，编译器也能帮你严格检查。
+
 ---

-## 2. 编译原理基础
+## 2. 编译流程：从代码到机器码

-### 2.1 编译器的任务
-
-::: tip 💡 编译器做什么？
-编译器将**源代码**转换为**目标代码**，主要完成：
-
-1. **理解代码**：分析源代码的结构和含义
-2. **检查正确性**：发现语法和语义错误
-3. **优化代码**：提高执行效率
-4. **生成代码**：输出目标机器的指令
-:::
+👇 动手点点看：输入代码，观察编译器的六步翻译过程

 <CompilerDemo />

-### 2.2 词法分析（Lexical Analysis）
+::: tip 💡 一句话总结
+编译器的六步流水线：源代码 → Token（词法分析）→ AST（语法分析）→ 带类型的 AST（语义分析）→ IR（中间代码）→ 优化后的 IR → 机器码。
+:::

-**任务**：将源代码分解为**词法单元（Token）**
+---

-**示例**：
+### 2.1 词法分析：拆出每个"单词"

 ```
 源代码: int x = 10 + 5;

-词法单元:
+Token 流:
 [int]   → 关键字
 [x]     → 标识符
 [=]     → 运算符
-[10]    → 整数字面量
+[10]    → 数字
 [+]     → 运算符
-[5]     → 整数字面量
+[5]     → 数字
 [;]     → 分隔符
 ```

-**词法分析器的工作**：
-
-| 输入 | 处理 | 输出 |
-|------|------|------|
-| `int` | 匹配关键字表 | `KEYWORD(int)` |
-| `x` | 匹配标识符规则 | `IDENTIFIER(x)` |
-| `10` | 匹配数字规则 | `NUMBER(10)` |
-
-### 2.3 语法分析（Syntax Analysis）
-
-**任务**：根据语法规则，将 Token 流组织成**语法树（AST）**
-
-**示例**：
+### 2.2 语法分析：构建语法树（AST）

 ```
 表达式: 1 + 2 * 3

-语法树:
-       +
-      / \
-     1   *
+语法树:        为什么？
+       +       因为 * 的优先级
+      / \      高于 +，所以
+     1   *     2 * 3 先结合
        / \
       2   3
 ```

-::: tip 💡 为什么是这棵树？
-根据运算优先级，`*` 优先级高于 `+`，所以 `2 * 3` 先结合。
+### 2.3 语义分析：检查"意思"是否正确

-如果表达式是 `(1 + 2) * 3`，语法树会变成：
+| 检查内容 | 示例 | 结果 |
+|---|---|---|
+| 类型检查 | `int x = "hello"` | ❌ 类型不匹配 |
+| 作用域分析 | 使用未声明的变量 | ❌ 变量不存在 |
+| 类型推断 | `1 + 2.0` | ✅ 推断为 float |

-```
-       *
-      / \
-     +   3
-    / \
-   1   2
-```
-:::
+### 2.4 代码优化：让程序跑得更快

-**语法规则（文法）**：
-
-```
-表达式 → 表达式 + 项 | 表达式 - 项 | 项
-项     → 项 * 因子 | 项 / 因子 | 因子
-因子   → 数字 | (表达式)
-```
-
-### 2.4 语义分析（Semantic Analysis）
-
-**任务**：检查语义正确性，进行类型检查
-
-**主要工作**：
-
-| 工作 | 说明 | 示例 |
-|------|------|------|
-| **类型检查** | 检查类型是否匹配 | `int x = "hello";` → 错误 |
-| **作用域分析** | 检查变量是否声明 | 使用未声明变量 → 错误 |
-| **符号表构建** | 记录所有标识符信息 | 变量名、类型、作用域 |
-| **类型推断** | 推断表达式类型 | `1 + 2.0` → float |
-
-**符号表示例**：
-
-```
-int x = 10;
-float y = 3.14;
-string name = "Alice";
-
-符号表:
-┌──────────┬────────┬─────────┐
-│ 名称     │ 类型   │ 作用域  │
-├──────────┼────────┼─────────┤
-│ x        │ int    │ global  │
-│ y        │ float  │ global  │
-│ name     │ string │ global  │
-└──────────┴────────┴─────────┘
-```
-
-### 2.5 中间代码生成
-
-**任务**：生成平台无关的中间表示（IR）
-
-**三地址码示例**：
-
-```
-源代码: int x = (a + b) * c;
-
-三地址码:
-t1 = a + b
-t2 = t1 * c
-x = t2
-```
-
-::: tip 💡 为什么需要中间代码？
-1. **平台无关**：一次编写，多平台编译
-2. **便于优化**：在 IR 层面进行优化
-3. **支持多语言**：不同语言可以编译到同一 IR
-
-例如 LLVM IR 支持 C、C++、Rust、Swift 等多种语言。
-:::
-
-### 2.6 代码优化
-
-**任务**：提高代码执行效率
-
-**常见优化技术**：
-
-| 优化技术 | 说明 | 示例 |
-|---------|------|------|
-| **常量折叠** | 编译时计算常量表达式 | `10 + 5` → `15` |
-| **死代码消除** | 删除不会执行的代码 | `if (false) { ... }` → 删除 |
-| **内联展开** | 函数调用替换为函数体 | `add(1, 2)` → `1 + 2` |
-| **循环优化** | 减少循环开销 | 循环展开、循环不变量外提 |
-| **公共子表达式消除** | 避免重复计算 | `a+b` 计算一次，多次使用 |
-
-**优化示例**：
-
-```c
-// 优化前
-int x = 10 + 5;    // 常量折叠
-int y = x * 2;     // x 已知为 15
-if (false) {       // 死代码
-    printf("never");
-}
-
-// 优化后
-int x = 15;
-int y = 30;
-// if 语句被删除
-```
-
-### 2.7 目标代码生成
-
-**任务**：生成目标机器的机器码
-
-**汇编代码示例**：
-
-```asm
-; int x = 15;
-mov     eax, 15
-mov     dword ptr [x], eax
-
-; int y = 30;
-mov     eax, 30
-mov     dword ptr [y], eax
-```
-
-**代码生成的主要任务**：
-
-| 任务 | 说明 |
-|------|------|
-| **指令选择** | 选择合适的机器指令 |
-| **寄存器分配** | 决定哪些变量放在寄存器 |
-| **指令调度** | 安排指令顺序，提高流水线效率 |
+| 优化技术 | 优化前 | 优化后 |
+|---|---|---|
+| 常量折叠 | `x = 10 + 5` | `x = 15` |
+| 死代码消除 | `if (false) { ... }` | 直接删除 |
+| 常量传播 | `y = x * 2`（x=15） | `y = 30` |

 ---

 ## 3. 编译型 vs 解释型 vs JIT

-### 3.1 编译型语言
+程序写完后，有三种"翻译方式"让它运行：

-**流程**：源代码 → 编译器 → 机器码 → 执行
+| | 编译型 | 解释型 | JIT 即时编译 |
+|---|---|---|---|
+| **过程** | 先编译成机器码，再执行 | 边读边执行 | 先解释，热点代码再编译 |
+| **速度** | 最快 | 最慢 | 中等（热点代码接近编译型） |
+| **启动** | 慢（需编译） | 快（直接运行） | 中等（需预热） |
+| **跨平台** | 需要重新编译 | 天然跨平台 | 跨平台 |
+| **代表** | C, Rust, Go | Python, Ruby | Java, JavaScript (V8) |

-```
-main.c → [编译器] → main.exe → [CPU] → 执行
-```
-
-**特点**：
- ✅ 执行速度快
- ✅ 编译期发现错误
- ❌ 编译时间长
- ❌ 跨平台需要重新编译
-
-**代表语言**：C, C++, Rust, Go
-
-### 3.2 解释型语言
-
-**流程**：源代码 → 解释器 → 逐行执行
-
-```
-main.py → [解释器] → 逐行解释执行
-```
-
-**特点**：
- ✅ 跨平台
- ✅ 开发调试快
- ❌ 执行速度慢
- ❌ 运行时才能发现错误
-
-**代表语言**：Python, Ruby, PHP
-
-### 3.3 JIT（即时编译）
-
-**流程**：源代码 → 字节码 → JIT 编译 → 执行
-
-```
-源代码 → [编译器] → 字节码 → [JIT] → 机器码 → 执行
-```
-
-**工作原理**：
-1. 先将源代码编译成字节码（中间代码）
-2. 解释器逐行执行字节码
-3. 发现热点代码（频繁执行），JIT 编译成机器码
-4. 后续直接执行机器码
-
-**特点**：
- ✅ 兼顾性能和跨平台
- ✅ 热点代码执行快
- ❌ 启动慢（需要预热）
- ❌ 内存占用大
-
-**代表语言**：Java (JVM), JavaScript (V8), Python (PyPy)
+::: tip 💡 为什么 JavaScript 这么快？
+V8 引擎的 JIT 编译器会监测哪些代码被频繁执行（热点代码），然后把它们编译成高度优化的机器码。所以虽然 JavaScript 是"解释型语言"，但在 V8 中它的性能可以接近编译型语言。
+:::

 ---

-## 4. 实践：手写简单解释器
-
-### 4.1 目标
-
-实现一个简单的计算器，支持加减乘除：
-
-```
-输入: 1 + 2 * 3
-输出: 7
-```
-
-### 4.2 词法分析器
-
-```python
-import re
-
-Token = namedtuple('Token', ['type', 'value'])
-
-def tokenize(code):
-    tokens = []
-    for match in re.finditer(r'\d+|[+\-*/()]', code):
-        value = match.group()
-        if value.isdigit():
-            tokens.append(Token('NUMBER', int(value)))
-        else:
-            tokens.append(Token(value, value))
-    return tokens
-
-# 测试
-print(tokenize('1 + 2 * 3'))
-# [Token(type='NUMBER', value=1), Token(type='+', value='+'), ...]
-```
-
-### 4.3 语法分析器
-
-```python
-class Parser:
-    def __init__(self, tokens):
-        self.tokens = tokens
-        self.pos = 0
-    
-    def parse(self):
-        return self.expr()
-    
-    def expr(self):
-        result = self.term()
-        while self.current() in ('+', '-'):
-            op = self.consume()
-            right = self.term()
-            if op == '+':
-                result += right
-            else:
-                result -= right
-        return result
-    
-    def term(self):
-        result = self.factor()
-        while self.current() in ('*', '/'):
-            op = self.consume()
-            right = self.factor()
-            if op == '*':
-                result *= right
-            else:
-                result //= right
-        return result
-    
-    def factor(self):
-        token = self.consume()
-        if token.type == 'NUMBER':
-            return token.value
-        elif token.value == '(':
-            result = self.expr()
-            self.consume()  # )
-            return result
-```
-
-### 4.4 完整解释器
-
-```python
-def evaluate(code):
-    tokens = tokenize(code)
-    parser = Parser(tokens)
-    return parser.parse()
-
-print(evaluate('1 + 2 * 3'))      # 7
-print(evaluate('(1 + 2) * 3'))    # 9
-print(evaluate('10 - 2 * 3'))     # 4
-```
-
---
-
-## 5. 总结
+## 4. 总结

 ::: tip 📚 核心要点
-1. **类型系统**：静态/动态、强/弱类型，影响代码安全和灵活性
-2. **编译流程**：词法分析 → 语法分析 → 语义分析 → 中间代码 → 优化 → 代码生成
-3. **执行方式**：编译型快但需编译，解释型慢但灵活，JIT 兼顾两者
-4. **实践价值**：理解编译原理有助于写出更好的代码
+1. **类型系统**：静态/动态决定检查时机，强/弱决定是否允许隐式转换
+2. **编译六步**：词法分析 → 语法分析 → 语义分析 → 中间代码 → 优化 → 代码生成
+3. **三种执行**：编译型快但需编译，解释型灵活但慢，JIT 兼顾两者
+4. **类型推断**：现代语言让你享受动态语言的简洁和静态语言的安全
 :::

 **下一步学习**：
@@ -1,3 +0,0 @@
-# 编辑器与 AI 编程助手
-
-> 待实现
@@ -1,3 +1,179 @@
 # 环境变量与 PATH

-> 待实现
+> 💡 **学习指南**：每次你在终端输入 `git` 或 `python`，系统都要去找这个程序在哪里。每次你的代码调用大模型 API，程序要知道用哪个密钥。这两件事背后都是同一套机制——**环境变量**。
+
+---
+
+## 0. 每个程序身边都带着一组配置
+
+运行中的每个程序，都持有一组「键=值」配置，叫做**环境变量**。程序可以随时读取这些配置，用来了解当前的运行环境。
+
+点击下方列表里的任意变量，在终端里"查看"它的值：
+
+<EnvVarOverviewDemo />
+
+---
+
+## 1. PATH：Shell 怎么找到你输入的命令
+
+`PATH` 是一个特殊的环境变量，存着一串目录路径（用冒号分隔）。你输入 `git` 时，Shell 就按这串目录的顺序，一个一个地进去找名叫 `git` 的可执行文件——找到第一个就立刻停止。
+
+```bash
+$ echo $PATH
+/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
+```
+
+选择一个命令，观察 Shell 逐目录搜索的过程：
+
+<PathSearchDemo />
+
+**三个关键规律**：
+- 目录在 PATH 里越靠前，优先级越高
+- 找到第一个就停止，不会继续搜索
+- 所有目录都没有 → `command not found`
+
+---
+
+## 2. 为什么安装工具后要重启终端？
+
+安装 nvm、Homebrew、conda 这类工具时，安装脚本会自动在 `~/.zshrc` 里追加一行，把自己的目录加入 PATH：
+
+```bash
+# 安装脚本自动写入的内容（示例）
+export PATH="/usr/local/opt/python@3.12/bin:$PATH"
+```
+
+这行代码只在**新 Shell 启动时**才执行。已经打开的终端窗口不受影响，所以：
+
+```bash
+# 不重启也能立刻生效
+source ~/.zshrc
+```
+
+**AI 开发工具常见情况**：
+
+```bash
+# Ollama / pipx 装完报 command not found
+which ollama          # 查实际安装位置
+
+# pip 安装的 CLI 工具路径（加入 PATH）
+# macOS：~/Library/Python/3.x/bin
+# Linux：~/.local/bin
+export PATH="$PATH:$HOME/.local/bin"
+
+# 推荐用 pipx 安装命令行工具，自动管理 PATH
+pipx install aider-chat
+```
+
+---
+
+## 3. 变量的作用域：谁能看见这个变量？
+
+环境变量不是广播给所有程序的——每个进程持有**自己的一份副本**，从父进程继承而来，修改自己的副本不会影响父进程。
+
+下图展示三个层级。在「用户级」里 export 一个新变量，看它是否出现在「进程级」：
+
+<EnvScopeDemo />
+
+---
+
+## 4. export：决定子进程能不能读到这个变量
+
+设置变量时，加不加 `export` 是完全不同的两件事：
+
+<EnvExportDemo />
+
+要让变量跨会话永久存在，把 `export` 写入配置文件：
+
+```bash
+# macOS (zsh)
+echo 'export MY_VAR="value"' >> ~/.zshrc
+source ~/.zshrc       # 立刻生效，不用重开终端
+
+# Linux (bash)
+echo 'export MY_VAR="value"' >> ~/.bashrc
+source ~/.bashrc
+```
+
+---
+
+## 5. API 密钥：绝对不能写进代码
+
+调用 OpenAI、Anthropic、DeepSeek 等 API 时，密钥就是你的「身份证 + 信用卡」。泄露了，别人可以用你的额度消费，费用由你承担。
+
+最常见的错误是把密钥直接写在代码里：
+
+<ApiKeyDangerDemo />
+
+---
+
+## 6. 本地开发：用 .env 文件管密钥
+
+本地开发时，把密钥放在项目根目录的 `.env` 文件里，代码通过 dotenv 库读取。`.env` 必须加入 `.gitignore`，不能提交到 Git。
+
+左边写配置，右边读取——切换语言看两种写法：
+
+<DotEnvDemo />
+
+---
+
+## 7. 生产环境：让运行平台注入密钥
+
+`.env` 是开发阶段的便利工具。服务器和云平台上，应该由**运行环境**负责注入密钥，代码本身完全不感知密钥放在哪里：
+
+<ServerSecretDemo />
+
+---
+
+## 8. 实战排错
+
+### `command not found`
+
+```bash
+# 第一步：确认是否在 PATH 里
+which python3         # 有输出说明找到了
+
+# 第二步：找到程序实际位置（macOS）
+brew list python | grep bin
+
+# 第三步：把目录加入 PATH
+export PATH="/找到的路径:$PATH"
+source ~/.zshrc       # 写入配置文件后记得 source
+```
+
+### 装了两个版本，用的不是我想要的
+
+```bash
+which python
+# /usr/bin/python ← 系统旧版，在 PATH 靠前
+
+# 把新版目录放到 PATH 最前面
+export PATH="/usr/local/bin:$PATH"
+
+which python
+# /usr/local/bin/python ← 新版，现在优先了
+```
+
+### 变量明明设置了，程序却读不到
+
+| 原因 | 解决 |
+|:---|:---|
+| 忘了 `export` | 加上 `export` 再试 |
+| 改了 `~/.zshrc` 没生效 | `source ~/.zshrc` |
+| 用了 `.env` 但没装 dotenv | `pip install python-dotenv` / `npm install dotenv` |
+| 服务器上只在 SSH 会话有效 | 改用 systemd `EnvironmentFile` |
+
+---
+
+## 名词速查
+
+| 术语 | 含义 |
+|:---|:---|
+| **PATH** | 存储 Shell 搜索可执行文件的目录列表，冒号分隔，顺序决定优先级 |
+| **export** | 将变量标记为可继承，子进程启动时自动获得副本 |
+| **source** | 在当前 Shell 重新执行配置文件，使修改立即生效 |
+| **which** | 显示某命令对应的可执行文件路径（PATH 搜索的结果） |
+| **.env** | 项目本地配置文件，存开发用密钥，必须加入 `.gitignore` |
+| **.env.example** | 变量名完整、值留空的模板，可以安全提交到 Git |
+| **chmod 600** | 文件权限：只有所有者可读写，适合保护密钥文件 |
+| **Secret Scanner** | GitHub 等平台自动扫描密钥泄露，发现后通知厂商吊销 |
@@ -1,3 +1,392 @@
-# 包管理器（npm / pip / cargo）
+# 包管理器

-> 待实现
+> 💡 **学习指南**：写代码不必从零造轮子——99% 的功能已经有人写好并发布到互联网上了。**包管理器**就是那个帮你找到、下载并管理这些"现成零件"的工具。本章围绕一个核心问题展开：**如何让代码依赖变得可重现、可协作、可维护？**
+
+---
+
+## 0. 为什么你一定会用到包管理器？
+
+想象你要写一个能发 HTTP 请求的 Node.js 程序。有两条路：
+
+- **方法 A（手动）**：自己实现 TCP 连接、HTTP 协议解析、重定向处理、超时机制……估计要写几千行代码，调试几个月。
+- **方法 B（包管理器）**：`npm install axios`，十秒钟，一行代码搞定。
+
+包管理器本质上是**代码的「应用商店」**。它帮你：
+
+1. 在中央仓库（Registry）里找到别人发布的库
+2. 自动下载并安装到你的项目里
+3. 处理这个库自己依赖的其他库（依赖的依赖）
+4. 记录你用的是哪个精确版本，让团队协作不出问题
+
+---
+
+## 1. 各语言 / 系统生态的包管理器一览
+
+不同编程语言和操作系统有各自的生态工具链，但底层逻辑完全一致。
+
+👇 **动手点点看**：选择你熟悉的生态，探索它的主流包管理工具。
+
+<PackageManagerOverviewDemo />
+
+### 1.1 包去哪里下载？—— Registry（注册表）
+
+每个生态背后都有一个中央仓库，存放所有可下载的包：
+
+| 生态 | 注册表 | 包数量 |
+| :--- | :--- | :--- |
+| JavaScript | [npmjs.com](https://npmjs.com) | 200 万+ |
+| Python | [pypi.org](https://pypi.org) | 50 万+ |
+| Rust | [crates.io](https://crates.io) | 15 万+ |
+| Go | [pkg.go.dev](https://pkg.go.dev) | 50 万+ |
+| macOS/Linux 工具 | [formulae.brew.sh](https://formulae.brew.sh) | 7000+ |
+| Windows 软件 | [winget.run](https://winget.run) / [chocolatey.org](https://chocolatey.org) | 数万款 |
+
+### 1.2 JavaScript 三强对比：npm vs yarn vs pnpm
+
+功能相近，区别主要体现在**速度和磁盘占用**：
+
+```text
+磁盘占用：pnpm（硬链接共享）< yarn PnP（零 node_modules）< npm（完整复制）
+安装速度：pnpm ≈ yarn > npm
+使用习惯：npm（最通用）> pnpm（新项目推荐）> yarn（部分团队）
+```
+
+**推荐**：新项目用 `pnpm`，已有项目维持原有工具，不要随意切换。
+
+### 1.3 Windows 三强对比：winget vs Chocolatey vs Scoop
+
+| | winget | Chocolatey | Scoop |
+| :--- | :--- | :--- | :--- |
+| **官方背书** | Microsoft 官方 | 第三方 | 第三方 |
+| **需要管理员** | 部分需要 | 是 | **不需要** |
+| **适合场景** | 日常软件安装 | 企业批量部署 | 开发工具管理 |
+| **包数量** | 多且增长快 | 最多（10000+）| 聚焦开发工具 |
+
+**推荐**：日常用 `winget`，开发工具用 `scoop`，企业自动化用 `Chocolatey`。
+
+---
+
+## 2. 安装包 —— 背后发生了什么？
+
+输入 `npm install axios` 后，命令行安静了几秒，然后就好了。这几秒里到底发生了什么？
+
+👇 **动手点点看**：选择一个包，点击"运行"，观察安装的全过程。
+
+<PackageInstallDemo />
+
+### 2.1 四个阶段详解
+
+**① 依赖解析（Resolve）**
+
+包管理器先"读懂"你要装什么。以 `axios` 为例，它自己依赖 `follow-redirects`、`form-data` 等包，这些也都要安装。这个过程叫做**构建依赖树**。
+
+**② 下载（Fetch）**
+
+从 Registry 下载所有需要的包（`.tgz` 格式的压缩包）。聪明的包管理器会：
+- 并行下载多个包，而不是一个个等待
+- 先查本地缓存，命中就不走网络
+
+**③ 链接（Link）**
+
+把下载的包解压放到 `node_modules/` 目录，并处理好引用关系。
+
+**④ 写锁文件（Lockfile）**
+
+把这次安装的**精确版本号**写入 `package-lock.json`（或 `yarn.lock` / `pnpm-lock.yaml`）。
+
+### 2.2 最常用命令速查
+
+```bash
+# ── JavaScript (npm) ──────────────────────────────────
+npm install              # 按 package.json 安装所有依赖
+npm install axios        # 安装新包（生产依赖）
+npm install -D jest      # 安装开发依赖（只在开发时用）
+npm install -g tsx       # 全局安装（任何目录都能用）
+npm uninstall axios      # 卸载包
+npm update               # 升级所有包到兼容的最新版
+npm run build            # 运行 package.json scripts 里的脚本
+npx create-react-app .   # 临时运行，不安装到项目
+
+# ── Python (pip) ──────────────────────────────────────
+pip install requests           # 安装包
+pip install requests==2.28.0   # 安装指定版本
+pip freeze > requirements.txt  # 导出当前依赖列表
+pip install -r requirements.txt # 按列表安装
+
+# ── Rust (cargo) ──────────────────────────────────────
+cargo add serde    # 添加依赖（会自动更新 Cargo.toml）
+cargo build        # 构建项目
+cargo test         # 运行测试
+cargo run          # 运行项目
+
+# ── Go (go mod) ───────────────────────────────────────
+go get github.com/gin-gonic/gin  # 添加依赖
+go mod tidy                      # 整理依赖（删多余、补缺失）
+go build ./...                   # 构建
+
+# ── Windows (winget) ──────────────────────────────────
+winget install Git.Git           # 安装软件
+winget upgrade --all             # 更新所有已安装软件
+```
+
+### 2.3 npm scripts 是什么？
+
+`package.json` 里有一个 `scripts` 字段，这是 npm 内置的**任务运行器**：
+
+```json
+{
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "test": "jest",
+    "lint": "eslint src/"
+  }
+}
+```
+
+运行方式：`npm run dev`、`npm run build`。这样做的好处是：
+- **统一入口**：团队成员不需要记住底层工具的具体命令
+- **环境自动配置**：运行时会自动把 `node_modules/.bin` 加入 PATH，可以直接用本地安装的工具
+
+---
+
+## 3. 全局安装 vs 本地安装
+
+这是新手最容易困惑的概念之一。
+
+### 3.1 两者的区别
+
+```bash
+npm install axios        # 本地安装：装到 ./node_modules/，只有当前项目能用
+npm install -g typescript  # 全局安装：装到系统目录，任何项目/目录都能用
+```
+
+| | 本地安装 | 全局安装 |
+| :--- | :--- | :--- |
+| **存放位置** | `./node_modules/` | 系统级目录（如 `/usr/local/lib/`） |
+| **适合** | 项目依赖的库（axios、vue、react） | 命令行工具（tsc、eslint、create-react-app） |
+| **版本隔离** | 每个项目独立版本 ✅ | 全机共用一个版本 ⚠️ |
+| **团队一致性** | 锁文件保证一致 ✅ | 各人版本可能不同 ⚠️ |
+
+### 3.2 黄金法则
+
+> **库类依赖（axios、lodash、vue）永远本地安装；  
+> 命令行工具（tsc、eslint）优先本地安装，用 `npx` 调用。**
+
+**为什么命令行工具也推荐本地安装？**
+
+假设你全局安装了 `eslint@8`，但项目 A 需要 `eslint@9` 的新规则，你就要在全局和项目之间反复切换。把 `eslint` 装到本地，用 `npx eslint .` 调用，每个项目都能独立配置自己的版本。
+
+### 3.3 npx —— 临时运行，不污染环境
+
+`npx` 是 npm 自带的工具运行器，允许你**不安装直接运行**一个包：
+
+```bash
+# 不安装 create-vue，直接运行它来初始化项目
+npx create-vue my-project
+
+# 不安装 prettier，直接格式化文件
+npx prettier --write src/
+
+# 强制使用指定版本（忽略已安装的）
+npx typescript@5.4 tsc --version
+```
+
+Python 的 `uvx`、Rust 的 `cargo run` 也提供了类似的"临时运行"能力：
+
+```bash
+uvx ruff check .       # Python：临时运行 ruff 检查器
+cargo install ripgrep  # Rust：安装到全局，变成系统命令 rg
+```
+
+---
+
+## 4. 版本号的秘密 —— 语义化版本
+
+你在 `package.json` 里会看到这样的内容：
+
+```json
+{
+  "dependencies": {
+    "axios": "^1.6.8",
+    "typescript": "~5.4.0"
+  }
+}
+```
+
+这里的 `^` 和 `~` 是什么意思？
+
+👇 **动手点点看**：鼠标悬停版本号各个部分，理解含义；点击范围符号，看哪些版本会被接受。
+
+<DependencyTreeDemo />
+
+### 4.1 为什么不锁死版本？
+
+| 做法 | 优点 | 缺点 |
+| :--- | :--- | :--- |
+| `"axios": "1.6.8"`（精确锁定） | 完全可预测 | 安全补丁无法自动更新 |
+| `"axios": "^1.6.8"`（兼容范围，推荐） | 自动获取 bug 修复和新功能 | 极少情况下引入小不兼容 |
+| `"axios": "*"`（任意版本） | 总是最新 | 主版本升级会彻底破坏代码 |
+
+**最佳实践**：用 `^` 声明范围 + 锁文件固定实际版本，两者配合使用。
+
+### 4.2 依赖地狱是什么？
+
+当你依赖 50 个包，每个包又依赖若干包，"依赖树"可能有几百个节点。如果两个你依赖的包需要**同一个库的不兼容版本**，就产生了"依赖冲突"。
+
+各生态的解法：
+- **npm v3+**：同主版本提升到顶层共享，不同主版本各自安装一份
+- **pnpm**：硬链接 + 严格隔离，从根本上防止"幽灵依赖"（没声明却能用的包）
+- **cargo（Rust）**：语言层面强制每个包只能依赖同一版本，彻底规避冲突
+- **go mod（Go）**：最小版本选择（MVS）策略，选能满足所有约束的最低版本
+
+---
+
+## 5. 锁文件 —— 团队协作的基石
+
+### 5.1 为什么需要锁文件？
+
+假设 `package.json` 写的是 `"axios": "^1.6.0"`：
+
+- 你今天安装 → 装到 `1.6.8`
+- 队友明天安装 → 可能装到 `1.7.0`（昨晚刚发布）
+- CI 服务器下周 → 可能装到 `1.7.1`
+
+同样的代码，三个人跑出不同结果。**锁文件**记录每个包的精确版本，所有人按它安装，结果完全一致。
+
+| 场景 | 命令 | 行为 |
+| :--- | :--- | :--- |
+| 开发环境同步 | `npm install` | 参考锁文件安装，不升级版本 |
+| CI / 生产部署 | `npm ci` | **严格**按锁文件安装，有差异直接报错 |
+| 主动升级版本 | `npm update` | 在允许范围内升级，并更新锁文件 |
+
+### 5.2 锁文件应该提交到 Git 吗？
+
+**应用程序必须提交，发布到 npm 的库可以不提交。**
+
+- ✅ **Web 应用、后端服务**：必须提交，确保部署环境和开发环境完全一致
+- ❌ **npm 发布的库**：通常不提交，库的使用者有自己的锁文件
+- ✅ **Python 项目**：`requirements.txt` 本身就起锁文件作用，应该提交
+- ✅ **Go 项目**：`go.sum` 必须提交，用于完整性校验
+
+---
+
+## 6. Python 虚拟环境
+
+Python 有一个特别需要注意的概念：**虚拟环境（venv）**。
+
+**为什么需要？**
+
+Python 默认**全局**安装包。你的项目 A 需要 `requests==2.28`，项目 B 需要 `requests==2.31`，两者会互相冲突。
+
+**解决方案**：为每个项目创建独立的虚拟环境，互不干扰。
+
+```bash
+# 1. 创建虚拟环境（在项目根目录运行）
+python -m venv .venv
+
+# 2. 激活虚拟环境
+source .venv/bin/activate        # macOS / Linux
+.venv\Scripts\activate           # Windows（命令提示符 CMD）
+.venv\Scripts\Activate.ps1       # Windows（PowerShell）
+
+# 3. 激活后，pip install 只影响当前虚拟环境，不污染全局
+pip install requests
+
+# 4. 退出虚拟环境
+deactivate
+```
+
+> ⚠️ **Windows 常见问题**：PowerShell 默认禁止运行脚本，需先执行：
+> ```powershell
+> Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
+> ```
+
+**现代替代方案**：
+- `conda create -n myproject python=3.11` —— 连 Python 版本都一起管理
+- `uv venv && source .venv/bin/activate` —— Rust 写的，创建速度飞快
+
+**`.venv` 要提交到 Git 吗？**
+
+不要！`.venv` 是本机生成的，应加入 `.gitignore`。用 `requirements.txt` 或 `pyproject.toml` 来描述依赖。
+
+---
+
+## 7. 常见问题速查
+
+**Q: `node_modules` 要提交到 Git 吗？**
+
+不要！通常有几百 MB，应该加入 `.gitignore`。有了 `package-lock.json`，任何人都能 `npm install` 快速重建。
+
+**Q: 安装失败 / 出现奇怪报错怎么办？**
+
+```bash
+# 清空缓存，删除旧安装，重来
+npm cache clean --force
+rm -rf node_modules package-lock.json   # macOS/Linux
+rmdir /s /q node_modules && del package-lock.json  # Windows CMD
+npm install
+```
+
+**Q: 安装速度太慢？**
+
+```bash
+# 切换到国内镜像（推荐写入 .npmrc 文件，不污染全局）
+echo "registry=https://registry.npmmirror.com" > .npmrc
+
+# pip 也可以配置镜像
+pip install requests -i https://pypi.tuna.tsinghua.edu.cn/simple
+```
+
+**Q: 包有安全漏洞怎么处理？**
+
+```bash
+npm audit          # 扫描已知漏洞
+npm audit fix      # 自动修复兼容的漏洞
+npm audit fix --force  # 强制升级（可能有破坏性，谨慎用）
+```
+
+**Q: 怎么知道某个包是否值得信赖？**
+
+在 [npmjs.com](https://npmjs.com) 或 [bundlephobia.com](https://bundlephobia.com) 查看：
+- 周下载量（越高越可信）
+- 最后更新时间（超过 2 年没更新要谨慎）
+- 依赖数量（依赖越多，引入问题的可能性越大）
+- GitHub Stars 和 Issues 活跃度
+
+**Q: Windows 上 winget 安装的软件在哪？**
+
+winget 默认安装到系统目录（需要管理员）或 `%LOCALAPPDATA%\Microsoft\WindowsApps`。Scoop 安装的软件统一在 `%USERPROFILE%\scoop\apps\`，方便管理和迁移。
+
+---
+
+## 8. 名词对照表
+
+| 英文术语 | 中文对照 | 解释 |
+| :--- | :--- | :--- |
+| **Package** | 包 / 库 | 别人写好并发布的代码模块 |
+| **Registry** | 注册表 / 仓库 | 所有包的中央存储服务器（如 npmjs.com） |
+| **Dependency** | 依赖 | 你的项目运行所需要的其他包 |
+| **devDependency** | 开发依赖 | 只在开发阶段需要的包（测试框架、构建工具等） |
+| **Lockfile** | 锁文件 | 记录精确版本号，保证环境一致性 |
+| **SemVer** | 语义化版本 | MAJOR.MINOR.PATCH 版本命名规范 |
+| **node_modules** | 模块目录 | npm 安装的包实际存放的目录 |
+| **venv** | 虚拟环境 | Python 项目的独立包隔离沙箱 |
+| **tarball** | 压缩包 | 包的分发格式，通常为 `.tgz` 文件 |
+| **Hoisting** | 提升 | npm 将子依赖提升到顶层以避免重复安装 |
+| **Phantom Dependency** | 幽灵依赖 | 未在配置文件声明却能被使用的包（pnpm 可防止） |
+| **npx** | — | npm 自带的包运行器，临时运行包而无需安装 |
+| **go.sum** | — | Go 模块的哈希校验文件，防止依赖被篡改 |
+| **Crate** | — | Rust 生态中"包"的单位名称 |
+| **winget** | — | Windows 官方包管理器（Windows 10/11 内置） |
+
+---
+
+## 总结：包管理器的本质
+
+四句话记住核心：
+
+1. **包管理器 = 应用商店**：帮你找到、安装、管理代码零件，不必重复造轮子。
+2. **锁文件 = 团队契约**：固定精确版本，让"在我机器上好好的"成为历史。
+3. **语义化版本 = 沟通语言**：`^` 安全地获取更新，MAJOR 变了就要小心。
+4. **本地 > 全局**：项目依赖尽量本地安装，`npx` / `uvx` 临时运行工具，保持环境纯净。
@@ -1,3 +1,248 @@
 # 端口与 localhost

-> 待实现
+> 💡 **学习指南**：当你执行 `npm run dev`，终端里出现 `http://localhost:5173` 时，你有没有想过：`localhost` 是什么？`5173` 又代表什么？为什么有时候会报 `EADDRINUSE` 错误？本章就来把这些日常开发中天天见、却很少深究的概念一次讲透。
+
+在开始之前，建议你先补两块"基础砖"：
+
+- **网络基础**：如果你不太清楚 IP 地址和 HTTP 的概念，可以先看 [计算机基础 - 网络通信](../1-computer-fundamentals/network-fundamentals.md) 部分。
+- **终端基础**：如果你还不熟悉终端命令行，可以先看 [命令行与 Shell 脚本](./command-line-shell.md)。
+
+---
+
+## 0. 引言：那个天天见的 `localhost:5173` 到底是什么？
+
+<DevServerFlowDemo />
+
+每个开发者的日常都离不开这一行输出：
+
+```
+➜  Local:   http://localhost:5173/
+```
+
+但你有没有想过，这短短一行字里，藏着好几个关键概念：
+
+- **http://** → 通信协议（用什么语言对话）
+- **localhost** → 目标地址（找谁）
+- **:5173** → 端口号（找到之后，敲哪扇门）
+
+搞懂这三件事，你就能理解 90% 的开发环境网络问题。接下来我们逐个拆解。
+
+---
+
+## 1. 什么是端口？（IP 是大楼，端口是房间号）
+
+### 1.1 一个直觉比喻
+
+想象一台服务器是一栋大楼：
+
+- **IP 地址**（如 `192.168.1.100`）就是大楼的门牌地址——告诉你"去哪栋楼"。
+- **端口号**（如 `:80`）就是楼里的房间号——告诉你"进哪间房"。
+
+一栋楼里可以同时有餐厅（80 号房）、咖啡厅（443 号房）、办公室（22 号房）。同理，一台电脑上可以同时运行 Web 服务器、数据库、SSH 服务，各自占用不同的端口。
+
+👇 **动手点点看**：
+点击下面的"房间门牌"，模拟向不同端口发起连接。注意观察：当端口"开着"（有程序在监听）和"关着"时，分别会发生什么？
+
+<PortAnalogyDemo />
+
+### 1.2 端口号的取值范围
+
+端口号是一个 **0–65535** 之间的整数（共 65536 个）。这么多端口被分为三个区间：
+
+| 区间 | 范围 | 用途 | 举例 |
+| :--- | :--- | :--- | :--- |
+| **系统端口** | 0 – 1023 | 预留给标准协议，普通用户不能随意占用 | 80 (HTTP)、443 (HTTPS)、22 (SSH) |
+| **注册端口** | 1024 – 49151 | 给常见应用注册使用 | 3306 (MySQL)、5432 (PostgreSQL)、6379 (Redis) |
+| **动态端口** | 49152 – 65535 | 操作系统临时分配 | 浏览器发请求时，系统随机分配一个源端口 |
+
+> 为什么你的开发服务器喜欢用 3000、5173、8080？因为这些都在"注册端口"范围内，不需要管理员权限就能监听，又不太容易和系统服务冲突。
+
+### 1.3 开发中常见的端口号速查
+
+👇 **动手点点看**：
+输入端口号或服务名搜索，点击任意一行可以展开查看使用示例。
+
+<CommonPortsDemo />
+
+---
+
+## 2. 什么是 localhost？（自己找自己）
+
+### 2.1 "环回"的核心概念
+
+`localhost` 是一个特殊的域名，它永远指向**你自己这台电脑**。
+
+当你在浏览器输入 `http://localhost:3000` 时，发生了这些事：
+
+1. 浏览器问操作系统："`localhost` 的 IP 是多少？"
+2. 操作系统直接回答："`127.0.0.1`"（不需要联网查 DNS）
+3. 数据包发往 `127.0.0.1`，但**不会真的离开本机**
+4. 操作系统通过"环回接口（loopback interface）"把数据包**折返**回来
+5. 监听在 3000 端口上的程序收到请求，返回响应
+
+**整个过程不经过网线、不经过路由器、不需要联网。**
+
+👇 **动手点点看**：
+点击"发送请求"，观察数据包的完整旅程。然后点击下方的"马甲卡片"，了解 localhost 的几种写法和区别。
+
+<LocalhostLoopbackDemo />
+
+### 2.2 `localhost` vs `127.0.0.1` vs `0.0.0.0`
+
+这三个概念经常被混淆，但它们的含义完全不同：
+
+| 写法 | 含义 | 谁能访问 |
+| :--- | :--- | :--- |
+| `localhost` / `127.0.0.1` | 环回地址，仅本机 | 只有你自己的电脑 |
+| `0.0.0.0` | 监听所有网络接口 | 本机 + 局域网内其他设备 |
+| `192.168.x.x` | 局域网 IP | 局域网内的设备 |
+
+**实际场景**：
+
+```bash
+# 只有自己能访问（安全，适合开发）
+npm run dev -- --host localhost
+
+# 手机也能访问（适合移动端调试）
+npm run dev -- --host 0.0.0.0
+```
+
+> 很多框架（如 Vite、Next.js）默认监听 `localhost`，所以你的手机即使连着同一个 WiFi 也访问不了。想用手机调试？加上 `--host` 参数就行。
+
+---
+
+## 3. 端口冲突：最常见的开发环境问题
+
+### 3.1 为什么会冲突？
+
+**一个端口同一时刻只能被一个程序监听。** 这就像一个房间只能住一户人家。
+
+如果你尝试启动第二个服务在同一个端口上，就会看到这个经典错误：
+
+```
+Error: listen EADDRINUSE :::3000
+```
+
+翻译成人话就是：**"3000 号房已经有人住了，你进不去！"**
+
+常见的冲突场景：
+- 上次的开发服务器没关干净，还在后台运行
+- 两个不同的项目用了相同的默认端口
+- 某个系统服务已经占用了你想要的端口
+
+👇 **动手点点看**：
+试着在下面的模拟器里多次启动服务。当端口冲突时，对比"直接启动"和"智能启动"的不同处理方式。
+
+<PortConflictDemo />
+
+### 3.2 排查与解决
+
+遇到端口冲突时，排查流程非常固定：
+
+**macOS / Linux：**
+```bash
+# 第一步：查看谁在占用 3000 端口
+lsof -i :3000
+
+# 第二步：拿到 PID 后，强制终止
+kill -9 <PID>
+```
+
+**Windows：**
+```bash
+# 第一步：查看谁在占用 3000 端口
+netstat -ano | findstr :3000
+
+# 第二步：终止进程
+taskkill /PID <PID> /F
+```
+
+> 很多现代框架（Vite、Create React App 等）遇到端口冲突时会自动询问"是否换一个端口？"。但了解底层原理，能帮你更快地排查那些框架帮不了你的疑难杂症。
+
+---
+
+## 4. 开发中的"同源策略"与跨域
+
+### 4.1 什么是"源"？
+
+浏览器有一个安全机制叫做**同源策略（Same-Origin Policy）**：只有**协议、域名、端口**三者完全一致，才算"同源"。
+
+| 地址 A | 地址 B | 是否同源 | 原因 |
+| :--- | :--- | :--- | :--- |
+| `http://localhost:5173` | `http://localhost:5173/about` | ✅ 同源 | 协议、域名、端口都一样 |
+| `http://localhost:5173` | `http://localhost:3000` | ❌ 不同源 | **端口不同**（5173 vs 3000） |
+| `http://localhost:5173` | `https://localhost:5173` | ❌ 不同源 | **协议不同**（http vs https） |
+
+### 4.2 为什么前后端分离必然遇到跨域？
+
+当你的项目架构是：
+
+```
+前端 (Vite)  →  http://localhost:5173
+后端 (Express) →  http://localhost:3000
+```
+
+前端页面从 `:5173` 加载，然后用 `fetch('/api/users')` 去请求 `:3000` 的接口——**端口不一样，触发跨域限制！**
+
+**两种常见解决方案：**
+
+**方案一：后端配置 CORS**
+```javascript
+// Express 后端
+app.use(cors({ origin: 'http://localhost:5173' }))
+```
+
+**方案二：前端配置代理（推荐）**
+```javascript
+// vite.config.js
+export default {
+  server: {
+    proxy: {
+      '/api': 'http://localhost:3000'
+    }
+  }
+}
+```
+
+代理的原理：让 Vite 开发服务器帮你"转发"请求。浏览器以为自己在和 `:5173` 通信（同源），实际上 Vite 在背后偷偷帮你把请求转给了 `:3000`。
+
+---
+
+## 5. 实战排查：三个最常见的问题
+
+👇 **动手点点看**：
+选择一个你遇到过的问题，跟着步骤一起排查。每一步都可以点击"执行"查看输出。
+
+<PortTroubleshootDemo />
+
+---
+
+## 6. 名词对照表
+
+| 英文术语 | 中文对照 | 解释 |
+| :--- | :--- | :--- |
+| **Port** | 端口 | 一个 0–65535 的数字，用来区分同一台机器上的不同网络服务。每个服务"监听"一个端口，等待客户端连接。 |
+| **localhost** | 本地主机 | 一个特殊域名，永远指向本机（127.0.0.1）。用于在不联网的情况下访问本机上运行的服务。 |
+| **Loopback Interface** | 环回接口 | 操作系统的虚拟网络接口。发往 127.0.0.1 的数据包不会离开本机，而是通过该接口"折返"回来。 |
+| **EADDRINUSE** | 地址已被使用 | Node.js / 操作系统报的错误，表示你要监听的端口已经被另一个程序占用了。 |
+| **CORS** | 跨域资源共享 | 浏览器安全机制。当前端页面尝试请求不同源（协议/域名/端口不同）的接口时，需要后端明确许可。 |
+| **Same-Origin Policy** | 同源策略 | 浏览器的安全基石：只允许同协议、同域名、同端口的请求自由通信，阻止跨域的数据读取。 |
+| **Proxy** | 代理 | 在开发环境中，代理服务器代替浏览器向后端转发请求，绕过浏览器的同源限制。 |
+| **0.0.0.0** | 所有接口 | 当服务监听 0.0.0.0 时，表示它接受来自任何网络接口（本机、局域网等）的连接。 |
+| **Well-known Ports** | 知名端口 | 0–1023 端口的统称，预留给 HTTP (80)、HTTPS (443)、SSH (22) 等标准协议。 |
+| **PID** | 进程 ID | 操作系统为每个运行中的程序分配的唯一编号，用于管理和终止进程。 |
+| **lsof** | 列出打开的文件 | macOS/Linux 命令，用于查看哪个进程占用了某个端口（`lsof -i :端口号`）。 |
+| **HMR** | 热模块替换 | 开发服务器的功能：你修改代码后，浏览器自动更新，无需手动刷新页面。底层通过 WebSocket 通知浏览器。 |
+
+---
+
+## 总结
+
+端口和 localhost 是开发环境中最基础、最高频的概念：
+
+- **端口** = 一台机器上区分不同服务的"门牌号"（0–65535）
+- **localhost** = "自己找自己"的特殊地址（127.0.0.1），数据不出本机
+- **端口冲突**的本质是"一个门牌只能挂一块牌子"
+- **跨域**的本质是"端口不同 = 不同源"，需要 CORS 或代理来解决
+
+记住这四句话，你在开发环境里遇到的大多数网络问题，都能快速定位原因。
@@ -1,3 +1,178 @@
 # 正则表达式

-> 待实现
+> 💡 **学习指南**：正则表达式看起来像天书？其实它只是一种"描述文本模式"的迷你语言。本章带你从零开始理解正则的核心思想，学会用几个关键符号解决 80% 的文本搜索和验证问题。
+
+---
+
+## 0. 你为什么需要正则表达式？
+
+想象以下场景：
+- 从一大段日志里找出所有 IP 地址
+- 验证用户输入的邮箱格式是否合法
+- 把文本中所有的日期格式从 `2024/01/15` 替换为 `2024-01-15`
+- 从网页源码中提取所有链接
+
+**用普通字符串搜索？** 你需要写一大堆 `if-else` 判断逻辑。  
+**用正则表达式？** 一行模式搞定。
+
+---
+
+## 1. 正则入门：三分钟上手
+
+👇 动手点点看：输入正则表达式，实时查看匹配结果
+
+<RegexDemo />
+
+::: tip 💡 一句话理解
+正则表达式 = **用特殊符号描述"你想找什么样的文本"**。`\d` 代表数字，`+` 代表一个或多个，所以 `\d+` 就是"一个或多个数字"。
+:::
+
+---
+
+## 2. 核心概念：像搭积木一样组合
+
+正则的本质是用**三类积木**搭出你想要的模式：
+
+### 2.1 积木一：字符类（匹配什么字符）
+
+| 语法 | 含义 | 示例 |
+|---|---|---|
+| `.` | 任意字符 | `a.c` → abc, a1c, a c |
+| `\d` | 数字 [0-9] | `\d\d` → 42, 99 |
+| `\w` | 字母/数字/下划线 | `\w+` → hello, user_1 |
+| `\s` | 空白字符 | 匹配空格、Tab |
+| `[abc]` | 集合中的任意一个 | `[aeiou]` → 元音字母 |
+| `[^abc]` | 不在集合中的 | `[^0-9]` → 非数字字符 |
+
+### 2.2 积木二：量词（匹配几次）
+
+| 语法 | 含义 | 示例 |
+|---|---|---|
+| `*` | 0 次或多次 | `ab*` → a, ab, abbb |
+| `+` | 1 次或多次 | `ab+` → ab, abbb（不匹配 a） |
+| `?` | 0 次或 1 次 | `colou?r` → color, colour |
+| `{3}` | 恰好 3 次 | `\d{3}` → 123 |
+| `{2,4}` | 2 到 4 次 | `\d{2,4}` → 12, 1234 |
+
+### 2.3 积木三：位置和分组
+
+| 语法 | 含义 | 示例 |
+|---|---|---|
+| `^` | 行首 | `^Hello` → 以 Hello 开头的行 |
+| `$` | 行尾 | `end$` → 以 end 结尾的行 |
+| `\b` | 单词边界 | `\bcat\b` → cat（不匹配 catch） |
+| `(...)` | 捕获分组 | `(\d+)-(\d+)` → 分别捕获 |
+| `a\|b` | 或 | `cat\|dog` → cat 或 dog |
+
+---
+
+## 3. 实战：常见验证模式
+
+### 3.1 邮箱验证
+
+```
+[\w.+-]+@[\w-]+\.[\w.]+
+```
+
+拆解：
+- `[\w.+-]+` — 用户名部分（字母数字点加号横杠）
+- `@` — 字面量 @
+- `[\w-]+` — 域名部分
+- `\.` — 转义的点
+- `[\w.]+` — 顶级域名
+
+### 3.2 手机号验证（中国）
+
+```
+1[3-9]\d{9}
+```
+
+拆解：
+- `1` — 以 1 开头
+- `[3-9]` — 第二位是 3-9
+- `\d{9}` — 后面跟 9 位数字
+
+### 3.3 密码强度检查
+
+```
+^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$
+```
+
+拆解：
+- `(?=.*[a-z])` — 至少一个小写字母（前瞻断言）
+- `(?=.*[A-Z])` — 至少一个大写字母
+- `(?=.*\d)` — 至少一个数字
+- `.{8,}` — 总长度至少 8 位
+
+---
+
+## 4. 在代码中使用正则
+
+### JavaScript
+
+```javascript
+const text = '联系方式：13812345678 或 15099887766'
+const regex = /1[3-9]\d{9}/g
+const phones = text.match(regex)
+// ['13812345678', '15099887766']
+
+// 替换
+text.replace(/\d{4}(?=\d{4}$)/, '****')
+// 隐藏手机号中间四位
+
+// 验证
+/^[\w.+-]+@[\w-]+\.[\w.]+$/.test('user@example.com')
+// true
+```
+
+### Python
+
+```python
+import re
+
+text = '价格是 99 元，优惠 20 元'
+numbers = re.findall(r'\d+', text)
+# ['99', '20']
+
+# 替换
+re.sub(r'\d+', 'X', text)
+# '价格是 X 元，优惠 X 元'
+
+# 分组捕获
+match = re.search(r'(\d+)-(\d+)', '2024-01-15')
+match.group(1)  # '2024'
+match.group(2)  # '01'
+```
+
+---
+
+## 5. 贪婪 vs 懒惰：一个关键区别
+
+```
+文本: <b>hello</b> and <b>world</b>
+```
+
+| 模式 | 匹配结果 | 说明 |
+|---|---|---|
+| `<b>.*</b>` | `<b>hello</b> and <b>world</b>` | 贪婪：尽量多匹配 |
+| `<b>.*?</b>` | `<b>hello</b>` | 懒惰：尽量少匹配 |
+
+::: tip 💡 记住
+默认是贪婪模式。在量词后面加 `?` 变成懒惰模式。大多数时候，你需要的是懒惰模式。
+:::
+
+---
+
+## 6. 总结
+
+::: tip 📚 核心要点
+1. **正则 = 描述文本模式的迷你语言**，用于搜索、匹配、替换
+2. **三类积木**：字符类（匹配什么）+ 量词（匹配几次）+ 位置/分组
+3. **\d \w \s** 是最常用的三个字符类，覆盖数字、单词、空白
+4. **不需要从零写**：常见场景都有成熟的正则模式可以复用
+5. **贪婪 vs 懒惰**：默认贪婪（多匹配），加 `?` 变懒惰（少匹配）
+:::
+
+**下一步学习**：
+- [环境变量与 PATH](./environment-path) - 理解系统配置
+- [SSH 与密钥认证](./ssh-authentication) - 安全连接远程服务器
@@ -1,3 +1,138 @@
 # SSH 与密钥认证

-> 待实现
+> 💡 **学习指南**：每次 `git push` 输密码？连服务器总被提示"Permission denied"？本章用 5 分钟带你搞懂 SSH 密钥认证的原理，以及如何一键免密登录 GitHub 和服务器。
+
+---
+
+## 0. 你一定遇到过这些场景
+
+- `git push` 时反复弹出密码输入框，烦不胜烦
+- SSH 连接服务器失败，不知道 `id_rsa` 和 `id_ed25519` 是什么
+- 听说"公钥"和"私钥"，但搞不清哪个给别人、哪个自己留
+
+**核心矛盾**：密码不安全、又麻烦。SSH 密钥就是用来同时解决安全性和便利性的方案。
+
+---
+
+## 1. 密码 vs 密钥：为什么密钥更好？
+
+👇 动手点点看：对比密码登录和密钥登录的区别
+
+<SSHAuthDemo />
+
+::: tip 💡 一句话总结
+密码登录 = 每次把密码发过去让对方核对（密码可能被截获）；  
+密钥登录 = 证明"我有钥匙"但不用把钥匙给你看（私钥永不传输）。
+:::
+
+---
+
+## 2. 非对称加密：公钥和私钥
+
+SSH 密钥基于**非对称加密**，一次生成两把钥匙：
+
+| | 私钥 (Private Key) | 公钥 (Public Key) |
+|---|---|---|
+| **保存位置** | 你的电脑 `~/.ssh/id_ed25519` | 服务器/GitHub |
+| **可以给别人吗** | ❌ 绝不 | ✅ 随便给 |
+| **功能** | 签名（证明身份） | 验签（验证身份） |
+| **类比** | 钥匙 | 锁 |
+
+### 常见密钥类型
+
+| 类型 | 命令 | 推荐度 | 说明 |
+|---|---|---|---|
+| **Ed25519** | `ssh-keygen -t ed25519` | ⭐⭐⭐ | 最新最快最安全 |
+| **RSA** | `ssh-keygen -t rsa -b 4096` | ⭐⭐ | 兼容性好，但较慢 |
+| **ECDSA** | `ssh-keygen -t ecdsa` | ⭐ | 一般不推荐 |
+
+---
+
+## 3. 实战：生成并配置 SSH 密钥
+
+### 3.1 生成密钥对
+
+```bash
+ssh-keygen -t ed25519 -C "your@email.com"
+```
+
+执行后会提示：
+- **文件路径**：直接回车用默认路径 `~/.ssh/id_ed25519`
+- **密码短语**：可以设置额外保护（也可留空）
+
+### 3.2 把公钥添加到 GitHub
+
+```bash
+# 1. 复制公钥内容
+cat ~/.ssh/id_ed25519.pub | pbcopy  # macOS
+cat ~/.ssh/id_ed25519.pub | xclip   # Linux
+
+# 2. 打开 GitHub → Settings → SSH and GPG keys → New SSH key
+# 3. 粘贴公钥，保存
+
+# 4. 测试连接
+ssh -T git@github.com
+# 成功会看到: Hi username! You've been authenticated...
+```
+
+### 3.3 把公钥添加到服务器
+
+```bash
+# 方式一：ssh-copy-id（推荐）
+ssh-copy-id user@your-server
+
+# 方式二：手动复制
+cat ~/.ssh/id_ed25519.pub | ssh user@server "mkdir -p ~/.ssh && cat >> ~/.ssh/authorized_keys"
+```
+
+---
+
+## 4. SSH Config：告别长命令
+
+在 `~/.ssh/config` 中配置别名，一次配置终身受益：
+
+```
+Host dev
+  HostName 192.168.1.100
+  User deploy
+  IdentityFile ~/.ssh/id_ed25519
+
+Host github.com
+  HostName github.com
+  User git
+  IdentityFile ~/.ssh/id_ed25519
+```
+
+配置后的效果：
+
+| 之前 | 之后 |
+|---|---|
+| `ssh -i ~/.ssh/id_ed25519 deploy@192.168.1.100` | `ssh dev` |
+| 每次都要记 IP 和用户名 | 记一个别名就够 |
+
+---
+
+## 5. 常见问题排查
+
+| 问题 | 原因 | 解决方案 |
+|---|---|---|
+| `Permission denied (publickey)` | 公钥没添加到服务器 | `ssh-copy-id user@server` |
+| `WARNING: UNPROTECTED PRIVATE KEY FILE` | 私钥文件权限太宽 | `chmod 600 ~/.ssh/id_ed25519` |
+| `Could not resolve hostname` | SSH Config 配置有误 | 检查 `~/.ssh/config` 格式 |
+| GitHub 还是要密码 | 用的 HTTPS 而非 SSH | 改用 `git@github.com:user/repo.git` |
+
+---
+
+## 6. 总结
+
+::: tip 📚 核心要点
+1. **密钥 > 密码**：私钥永不传输，比密码安全得多
+2. **推荐 Ed25519**：最现代的密钥算法，速度快、安全性高
+3. **公钥随便给，私钥绝不泄露**：记住这条铁律
+4. **SSH Config**：配一次别名，之后 `ssh 别名` 一键连接
+5. **GitHub/GitLab**：添加公钥后，`git push/pull` 再也不需要输密码
+:::
+
+**下一步学习**：
+- [端口与 localhost](./ports-localhost) - 理解网络连接的基础
+- [环境变量与 PATH](./environment-path) - 理解系统配置
@@ -1,3 +1,473 @@
 # 前端框架的本质

-> 待实现
+> 💡 **学习指南**：这篇文章会回答一个根本问题——**前端框架（Vue、React、Svelte 等）到底在做什么？** 如果你只学过 HTML、CSS 和一点 JavaScript，完全没问题，我们从头讲起。
+
+在开始之前，先确认你知道这两个基础概念。如果不确定，可以先看对应章节：
+
+- **HTML**：网页的骨架，定义页面上有哪些元素（标题、段落、按钮、图片……）。参见 [HTML 与 CSS 布局](./html-css-layout.md)。
+- **JavaScript**：让网页"动起来"的编程语言，可以修改页面内容、响应用户操作。参见 [JavaScript 深度指南](./javascript-deep-dive.md)。
+
+还有一个概念会在后面频繁出现，这里先做一个完整的说明。
+
+### 什么是 DOM？
+
+DOM 的全称是 Document Object Model，中文叫"文档对象模型"。
+
+当你在浏览器中打开一个网页时，浏览器做的第一件事就是读取 HTML 代码。读完之后，浏览器不会直接拿 HTML 文本去显示页面，而是先把 HTML 代码**转换成一棵树形结构**，存放在内存里。这棵树就叫 DOM 树。
+
+树上的每一个节点（Node）对应 HTML 里的一个标签。标签之间的嵌套关系，在 DOM 树里就变成了父节点和子节点的关系。
+
+👇 **动手试试看**：
+把鼠标移到左边的 HTML 代码上，右边 DOM 树中对应的节点会高亮。反过来也一样。每一行 HTML 标签都对应 DOM 树上的一个节点。
+
+<WhatIsDomDemo />
+
+**为什么要了解 DOM？** 因为 JavaScript 修改页面的方式，就是操作这棵 DOM 树——增加节点、删除节点、修改节点的内容。而前端框架做的核心工作，就是帮你自动化这些 DOM 操作。后面我们会反复提到 DOM，理解它是理解框架原理的基础。
+
+---
+
+## 0. 引言：什么是"前端框架"？
+
+先解释"框架"这个词。在编程中，**框架（Framework）** 是一套已经写好的代码和规则，它规定了你的代码应该怎么组织、怎么运行。你按照它的方式写代码，它帮你处理大量重复、繁琐的底层工作。
+
+**前端框架**，就是专门帮你**构建网页界面**的框架。目前最常见的有 Vue、React、Svelte、Angular 这几个。
+
+那它们到底帮你解决了什么问题？下面这三张卡片概括了核心逻辑：
+
+<FrameworkMotivationDemo />
+
+接下来我们一步步展开，从最基础的问题讲起。
+
+---
+
+## 1. 核心问题：数据变了，界面怎么办？
+
+### 1.1 先搞清楚"数据"和"界面"是什么
+
+在任何一个网页应用中，都有两个东西在同时存在：
+
+- **数据（Data / State）**：程序内部存储的信息。比如"购物车里有 3 件商品"、"用户名是张三"、"当前选中了第 2 个标签页"。这些数据存在 JavaScript 的变量里，用户看不到它们。
+- **界面（UI）**：用户在屏幕上看到的东西。比如页面上显示"购物车(3)"、显示"欢迎，张三"、第 2 个标签页高亮。这些是 HTML 元素呈现出来的视觉效果。
+
+**数据和界面之间有对应关系**：数据是"3 件商品"，界面上就应该显示"3"。如果数据变成了"4 件商品"，界面上也应该跟着变成"4"。
+
+问题是：**这个"跟着变"的过程，谁来负责？**
+
+👇 **动手点点看**：
+点击"添加商品"按钮，注意观察：数据（左边）已经变了，但界面（右边）没有跟着更新——它们之间"断开"了。再点"同步界面"手动修复。
+
+<DataUIGapDemo />
+
+### 1.2 为什么 JavaScript 变量变了，界面不会自动变？
+
+这是零基础最容易困惑的地方，我们把底层原理一步步讲清楚。
+
+在 JavaScript 中，变量就是一块内存空间，用来存放数据。当你执行 `count = count + 1` 时，JavaScript 引擎做的事情非常简单：把内存中 count 这个位置的值从 3 改成 4。**做完这一步就结束了，不会再发生任何事。**
+
+而页面上显示的内容（比如 `<span>3</span>` 这个 DOM 节点）存放在另一块完全不同的内存空间里。JavaScript 引擎在修改变量时，根本不知道页面上有一个 DOM 节点正在显示这个变量的值，也没有任何机制让它去检查。
+
+所以本质原因是：**JavaScript 的变量和 DOM 节点是两块独立的内存，它们之间没有任何自动联动机制。** 修改变量只改变了变量所在的内存，DOM 节点所在的内存不会受到任何影响。
+
+```javascript
+let count = 3
+
+// 页面上有一个 DOM 节点显示着 count 的值：
+// <span id="counter">3</span>
+
+count = 4
+// JavaScript 引擎做了什么？
+//   → 把变量 count 在内存中的值从 3 改成 4
+//   → 结束。没了。
+// 页面上 <span> 里显示的仍然是 "3"
+```
+
+如果你想让页面上的显示也变成"4"，你必须**额外写代码**，手动找到那个 DOM 节点，然后修改它的内容：
+
+```javascript
+count = 4  // 第 1 步：改变量
+
+// 第 2 步：你必须自己写——找到 DOM 节点，把它的文字改成新值
+document.getElementById('counter').textContent = count
+```
+
+如果页面上有 5 个地方显示着 count 的值（购物车数量、商品列表、总价、小计、状态提示），你就需要写 5 段这样的代码。**漏掉任何一段，那个位置显示的就还是旧值，用户看到的就是错误信息。**
+
+### 1.3 框架做了什么？两步建立自动连接
+
+框架能自动同步，靠的是**两步配合**——缺一不可。
+
+**第一步：你在模板里"登记"哪些地方要显示这个变量**
+
+框架的 HTML 模板里，你用 `{{ count }}` 这样的语法来标记"这里要显示 count 的值"：
+
+```html
+<!-- Vue 模板 -->
+<span>购物车：{{ count }} 件</span>    <!-- 位置 A：我要显示 count -->
+<span>总价：¥{{ count * 99 }}</span>   <!-- 位置 B：我也用了 count -->
+<span>{{ count > 5 ? '过多' : '正常' }}</span>  <!-- 位置 C：我也用了 count -->
+```
+
+框架第一次渲染页面时，会把这个"登记关系"记录下来：**位置 A、B、C 都依赖 count**。
+
+**第二步：框架监视变量，变了就查登记表、自动更新**
+
+框架用 JavaScript 内置的 `Proxy`（代理）把你的变量"包裹"起来，让它变成一个"被监视的变量"。当你修改这个变量时，Proxy 会在赋值的同时悄悄多做一件事：通知框架"count 变了"。框架收到通知后，去查第一步的登记表，把 A、B、C 三个位置全部更新。
+
+```
+原生 JS：
+  你写 HTML → <span id="counter">3</span>（和变量无任何连接）
+  你改变量 → count = 4 → 结束，界面毫无反应
+  你手动补 → document.getElementById('counter').textContent = 4 → 界面才更新
+
+Vue 框架：
+  你写模板 → <span>{{ count }}</span>（框架记住：这里依赖 count）
+  你改变量 → count = 4 → Proxy 拦截 → 通知框架 → 框架查登记表 → 自动更新 A/B/C
+```
+
+这就是为什么"只有框架才能自动同步"——原生 HTML 里的 `<span>` 和 JS 变量之间根本没有任何连接，框架的模板语法（`{{ }}`）才是建立这条连接的关键。你写了 `{{ count }}`，框架才知道这里要显示 count；框架才能在 count 变化时，精准找到这里并更新它。
+
+👇 **动手点点看**：
+先选"原生 JavaScript"，点"执行"后注意观察——变量改了但界面纹丝不动，你要一步步手动同步每个位置。再切换到"使用框架"，同样点"执行"——变量一改，框架自动完成所有步骤，界面立刻跟上。
+
+<WhyNoAutoSyncDemo />
+
+### 1.4 对比：手动同步 vs 自动同步的实际效果
+
+理解了原理之后，我们来看看在一个稍微复杂一点的场景下，手动同步和自动同步的区别有多大。
+
+👇 **动手点点看**：
+左边是没有框架时的"手动同步"方式——每个显示区域你都需要单独点"同步"按钮来更新。右边是有框架时的"自动同步"方式——你只管点"添加商品"，所有显示区域自动更新。试试在左边故意不同步某个区域，看看会发生什么。
+
+<ManualVsAutoSyncDemo />
+
+**这就是前端框架存在的根本原因：给 JavaScript 变量加上"被修改时自动通知界面更新"的能力，消灭手动同步带来的错误。**
+
+---
+
+## 2. 框架的核心思想：用数据描述界面
+
+### 2.1 两种写法的区别
+
+理解了"自动同步"的价值之后，我们来看框架具体是怎么实现的。
+
+在没有框架的时代（比如使用 jQuery），代码是这样写的——你一步一步告诉浏览器该做什么：
+
+```javascript
+// 第 1 步：找到页面上 id 为 counter 的元素
+var element = document.getElementById('counter')
+// 第 2 步：把这个元素的文字内容改成新的值
+element.textContent = '4'
+// 第 3 步：找到另一个元素，也改掉
+document.getElementById('total').textContent = '¥396'
+// 第 4 步：如果数量大于 5，还要改状态提示……
+```
+
+这种写法叫**命令式（Imperative）**——你在"命令"浏览器一步步执行操作。
+
+有了框架之后，代码变成这样——你只描述"界面应该长什么样"：
+
+```html
+<!-- 我不管这个值怎么更新到页面上的 -->
+<!-- 我只说：这里应该显示 count 的值 -->
+<span>{{ count }}</span>
+<span>总价：¥{{ count * 99 }}</span>
+<span v-if="count > 5">商品过多！</span>
+```
+
+这种写法叫**声明式（Declarative）**——你在"声明"界面的最终状态，至于怎么达到这个状态，框架自己处理。
+
+### 2.2 核心公式：UI = f(State)
+
+所有现代前端框架——不管是 Vue、React 还是 Svelte——都遵循同一个核心思想，可以用一个公式来表达：
+
+> **UI = f(State)**
+
+这个公式的意思是：
+
+- **State（状态）**：你的应用数据。就是 JavaScript 里的那些变量：购物车里有几件商品、用户有没有登录、当前页面是哪个……
+- **f（函数）**：框架的渲染机制。它知道怎么把数据变成界面。
+- **UI（界面）**：用户在屏幕上看到的最终结果。
+
+**含义**：给定一组数据（State），经过框架的处理（f），就能确定性地得到对应的界面（UI）。数据变了，界面就跟着变。开发者只需要关心数据，不需要关心界面怎么更新。
+
+👇 **动手点点看**：
+在左边修改数据（State），观察右边的界面（UI）如何自动跟着变化。这就是 `UI = f(State)` 的直观体现。
+
+<DeclarativeFormulaDemo />
+
+### 2.3 为什么声明式比命令式好？
+
+声明式写法的优势在于：
+
+| 对比维度 | 命令式（没有框架） | 声明式（有框架） |
+| :--- | :--- | :--- |
+| **代码量** | 每个更新都要写具体操作代码 | 只写一次模板，框架自动处理 |
+| **出错概率** | 容易漏更新某个地方 | 框架保证所有地方都更新 |
+| **可读性** | 代码里混杂着大量 DOM 操作 | 代码清晰地描述界面结构 |
+| **维护成本** | 修改一个功能要改很多地方 | 修改数据逻辑即可，界面自动跟随 |
+
+简单说：声明式让你把精力集中在"业务逻辑"（数据怎么变化）上，不用操心"界面怎么更新"这个重复且容易出错的事情。
+
+---
+
+## 3. 响应式系统：框架如何知道数据变了？
+
+### 3.1 什么是"响应式"？
+
+前面说了"数据变了，界面自动更新"。但这里有一个技术问题：**JavaScript 本身并没有"变量被修改时自动通知别人"的能力**。
+
+你写 `count = 4`，JavaScript 只是把 `count` 的值从 3 改成 4，不会自动告诉任何人。框架需要一种机制来"发现"你修改了数据。
+
+**响应式（Reactivity）** 就是这种机制的总称：当数据发生变化时，系统能自动感知到变化，并执行相应的更新操作。
+
+### 3.2 三种不同的实现方式
+
+不同的框架采用了不同的技术方案来实现响应式。这也是 Vue、React、Svelte 之间最根本的区别。
+
+**方式一：代理拦截（Vue 的做法）**
+
+Vue 使用 JavaScript 内置的 `Proxy`（代理）机制。`Proxy` 可以在你读取或修改一个对象的属性时，自动执行一段你指定的代码。
+
+Vue 把你的数据对象用 `Proxy` 包裹起来。当你执行 `count = 4` 时，`Proxy` 会拦截这次写入操作，通知 Vue："count 的值变了"，然后 Vue 去更新所有用到 `count` 的界面部分。
+
+你作为开发者不需要做任何额外的事情——直接赋值就行，Vue 自动感知。
+
+**方式二：显式调用（React 的做法）**
+
+React 不使用 `Proxy`。它要求你必须通过一个专门的函数来修改数据：
+
+```javascript
+// React 的写法
+const [count, setCount] = useState(0)
+
+// 不能直接写 count = 4（React 不会感知到）
+// 必须调用 setCount：
+setCount(4)
+```
+
+只有当你调用 `setCount()` 时，React 才知道数据变了，才会去更新界面。如果你直接写 `count = 4`，React 完全不知道，界面不会更新。
+
+这种方式更"显式"——每一次数据变化都是你主动告诉框架的，不会有意外的更新。
+
+**方式三：编译器分析（Svelte 的做法）**
+
+Svelte 采用了完全不同的路线。它有一个编译器（Compiler），在你的代码运行之前，编译器会先分析你的源代码。
+
+当编译器看到你写了 `count += 1` 这样的赋值语句时，它会自动在这行代码后面插入一段"通知界面更新"的代码。也就是说，在代码运行的时候，"通知"这个动作已经被编译器提前安排好了。
+
+你的代码看起来就是普通的 JavaScript 赋值，但编译后的代码里多了更新界面的逻辑。
+
+👇 **动手点点看**：
+选择不同的框架标签，点击"修改数据"，观察每种框架在"引擎盖下"经历了哪些步骤来完成数据变化的检测和界面更新。
+
+<ReactivityMechanismDemo />
+
+### 3.3 三种方式的对比
+
+| 对比维度 | Vue（Proxy 代理） | React（显式调用） | Svelte（编译器） |
+| :--- | :--- | :--- | :--- |
+| **开发者写法** | 直接赋值 `count = 4` | 必须用 `setCount(4)` | 直接赋值 `count = 4` |
+| **感知变化的时机** | 运行时自动拦截 | 开发者主动通知 | 编译时提前插入通知代码 |
+| **运行时性能开销** | Proxy 有少量拦截开销 | setState 调度有少量开销 | 几乎没有额外开销 |
+| **调试难度** | 中等 | 数据流清晰，较容易 | 需要理解编译后的代码 |
+| **适合场景** | 追求开发效率和自然写法 | 追求可预测的数据流 | 追求极致运行性能 |
+
+三种方式没有绝对的好坏。Vue 写起来最自然，React 的数据流最可控，Svelte 的运行性能最好。选择哪个取决于项目的具体需求。
+
+---
+
+## 4. 组件：把界面拆成可复用的小块
+
+### 4.1 为什么要拆？
+
+一个完整的网页可能有导航栏、侧边栏、内容区、搜索框、用户头像、各种按钮……如果所有代码写在一个文件里，这个文件会变得非常长、非常难维护。
+
+**组件（Component）** 就是把界面拆分成一个个独立的小块，每个小块管自己的数据、自己的界面、自己的逻辑。
+
+比如一个电商页面可以拆成这些组件：
+
+- `NavBar` 组件：负责顶部导航栏
+- `SearchBox` 组件：负责搜索框
+- `ProductCard` 组件：负责一张商品卡片
+- `ShoppingCart` 组件：负责购物车
+
+每个组件都是独立的。`ProductCard` 不需要知道 `NavBar` 里写了什么代码，它只需要管好自己。
+
+### 4.2 组件的三个好处
+
+**好处一：复用。** 一个 `ProductCard` 组件写好之后，可以在页面上用 100 次——每次传入不同的商品数据，就会渲染出不同的商品卡片。不需要复制粘贴 100 份 HTML 代码。
+
+**好处二：封装。** 组件内部的数据和逻辑是独立的。修改 `SearchBox` 组件的代码，不会影响到 `ProductCard` 组件。多人协作时，不同的人可以同时开发不同的组件，互不干扰。
+
+**好处三：可维护。** 当某个功能出了问题，你可以直接定位到对应的组件去修复，不需要在一个几千行的大文件里翻找。
+
+👇 **动手点点看**：
+点击左边的组件名称，查看它在页面上对应的区域。注意观察：同一个 `ProductCard` 组件被复用了多次，每次显示不同的数据。
+
+<ComponentTreeDemo />
+
+### 4.3 组件在代码里长什么样？
+
+以 Vue 为例，一个组件就是一个 `.vue` 文件，里面包含三部分：
+
+```html
+<!-- ProductCard.vue -->
+<template>
+  <!-- 这里写 HTML 结构 —— 组件的"外观" -->
+  <div class="card">
+    <h3>{{ name }}</h3>
+    <p>价格：¥{{ price }}</p>
+    <button @click="addToCart">加入购物车</button>
+  </div>
+</template>
+
+<script setup>
+// 这里写 JavaScript 逻辑 —— 组件的"行为"
+const props = defineProps(['name', 'price'])
+
+function addToCart() {
+  // 处理"加入购物车"的逻辑
+}
+</script>
+
+<style scoped>
+/* 这里写 CSS 样式 —— 组件的"样式" */
+.card {
+  border: 1px solid #ccc;
+  padding: 16px;
+}
+</style>
+```
+
+使用这个组件时，就像使用一个自定义的 HTML 标签：
+
+```html
+<!-- 在其他地方使用 ProductCard 组件 -->
+<ProductCard name="无线耳机" price="299" />
+<ProductCard name="机械键盘" price="599" />
+<ProductCard name="显示器" price="1999" />
+```
+
+三行代码就渲染出了三张不同的商品卡片。
+
+---
+
+## 5. DOM 操作的代价：为什么框架要费这么大力气？
+
+### 5.1 什么是 DOM 操作？
+
+前面提到过 DOM——浏览器把 HTML 解析后生成的树形结构。**DOM 操作**就是用 JavaScript 去修改这棵树上的节点。比如改一段文字、增加一个元素、删除一个元素、修改一个样式。
+
+这些操作本身不复杂，但是浏览器在执行 DOM 操作之后，需要做很多额外的工作才能让屏幕上的显示更新：
+
+1. **重新计算样式**：这个节点以及它的子节点的 CSS 样式是否需要变化？
+2. **重新布局（Layout / Reflow）**：页面上所有元素的位置和大小需要重新计算。因为一个元素的改变可能影响到其他元素的位置。
+3. **重新绘制（Paint）**：把计算好的内容画到屏幕上。
+
+这三个步骤每一个都有计算成本。如果你的代码频繁触发 DOM 操作，浏览器就会反复执行这些步骤，页面就会变卡。
+
+👇 **动手点点看**：
+观察直接操作 DOM 和批量操作 DOM 的耗时对比。当修改次数增多时，"逐个操作"的耗时会急剧上升。
+
+<DomOperationCostDemo />
+
+### 5.2 框架怎么解决这个问题？
+
+既然直接操作 DOM 很昂贵，框架就想办法**减少 DOM 操作的次数**。具体有两种策略：
+
+**策略一：虚拟 DOM + 差异比较（Vue、React 的做法）**
+
+虚拟 DOM（Virtual DOM）是一个 JavaScript 对象，它的结构和真实 DOM 树一一对应，但它只存在于内存中，不会触发浏览器的布局和绘制。
+
+当数据变化时，框架的处理流程是：
+
+1. 用 JavaScript 对象创建一棵"新的虚拟 DOM 树"，描述数据变化后界面应该长什么样
+2. 把这棵新树和旧树做对比（这个过程叫 **Diff**，即差异比较），找出哪些节点发生了变化
+3. 只把真正变化的部分应用到真实 DOM 上（这个过程叫 **Patch**，即打补丁）
+
+这样一来，不管数据怎么变化，最终对真实 DOM 的操作总是最少的。
+
+👇 **动手点点看**：
+点击"修改数据"，观察虚拟 DOM 如何对比新旧两棵树，找出变化的节点。注意看最右边的"真实 DOM"——只有真正变化的部分才会闪烁。
+
+<VirtualDomDiffDemo />
+
+**策略二：编译时精确定位（Svelte 的做法）**
+
+Svelte 不使用虚拟 DOM。它的编译器在你写代码时就分析好了："当 `count` 变化时，需要更新第 3 行的 `<span>` 元素"。运行时直接定位到那个元素去更新，完全不需要对比新旧树。
+
+这种做法跳过了 Diff 步骤，理论上性能更好。但它依赖编译器的分析能力——编译器需要足够聪明才能正确识别出所有需要更新的地方。
+
+---
+
+## 6. 运行时 vs 编译时：框架设计的核心权衡
+
+### 6.1 两个阶段
+
+前端代码从你写下到最终在浏览器里运行，会经过两个阶段：
+
+- **编译时（Compile-time / Build-time）**：你的源代码被构建工具（如 Vite、Webpack）处理，转换成浏览器能直接执行的代码。这个过程发生在你的电脑上，在用户打开网页之前。
+- **运行时（Runtime）**：转换后的代码在用户的浏览器中执行。框架的核心逻辑（比如虚拟 DOM 的 Diff、响应式的追踪）就在这个阶段工作。
+
+### 6.2 框架在这两个阶段的工作分配
+
+不同框架在这两个阶段分配的工作量不同，这决定了它们的性能特征和包体积：
+
+- **React**：大部分工作在运行时完成。虚拟 DOM 的创建、Diff、Patch 都发生在浏览器中。好处是灵活性高；代价是需要把整个框架的运行时代码（约 40KB）发送给浏览器。
+- **Vue**：混合方式。模板在编译时被优化（编译器标记出哪些节点是静态的、不会变化的），但最终的界面更新仍然通过运行时的虚拟 DOM 完成。运行时代码约 30KB。
+- **Svelte**：大部分工作在编译时完成。编译器分析你的代码，直接生成精确的 DOM 更新指令。运行时几乎没有框架代码——最终打包出来只有你自己的业务代码。包体积最小。
+
+👇 **动手点点看**：
+点击不同的框架标签，查看它们在"运行时 ↔ 编译时"光谱上的位置，以及各自在打包体积、运行性能、开发体验上的权衡。
+
+<FrameworkSpectrumDemo />
+
+### 6.3 行业趋势
+
+近几年框架的发展方向很明确：**把越来越多的工作从运行时移到编译时**。因为编译时的计算不占用用户的设备资源，不影响页面加载速度。
+
+- **Vue** 正在开发 Vapor Mode（蒸汽模式），可以跳过虚拟 DOM，在编译时直接生成 DOM 操作代码
+- **React** 推出了 React Compiler，在编译时自动优化组件的重渲染行为
+- **Svelte 5** 引入了 Runes 系统，进一步增强编译时的分析能力
+
+---
+
+## 7. 总结
+
+回顾这篇文章的核心要点：
+
+**前端框架解决的根本问题**：当应用中的数据发生变化时，自动、高效、可靠地更新界面，不需要开发者手动操作 DOM。
+
+**它们共同遵循的核心思想**：UI = f(State)——界面是数据的函数，开发者只需关注数据的变化，框架负责把数据的变化反映到界面上。
+
+**它们的关键技术差异**：
+
+| 技术点 | 含义 |
+| :--- | :--- |
+| **响应式系统** | 框架如何检测数据变化。Vue 用 Proxy 拦截、React 用显式 setState、Svelte 用编译器分析。 |
+| **虚拟 DOM** | Vue 和 React 用一个 JavaScript 对象来模拟 DOM 树，通过对比新旧两棵树（Diff）来找出最小更新量，减少真实 DOM 操作。 |
+| **组件化** | 把界面拆成独立的、可复用的小块，每个组件管理自己的数据和界面。 |
+| **编译时优化** | 在代码构建阶段提前做分析和优化，减少运行时的计算量。Svelte 在这方面走得最远。 |
+
+**一句话**：前端框架的本质工作就是——接管"数据到界面"的同步过程，让开发者只需要思考数据逻辑，不再需要手动操作界面。
+
+---
+
+## 名词对照表
+
+| 英文术语 | 中文对照 | 解释 |
+| :--- | :--- | :--- |
+| **Framework** | 框架 | 一套预先编写好的代码和规则，为开发者提供应用的基础结构和常用功能。 |
+| **DOM** | 文档对象模型 | 浏览器把 HTML 解析后生成的树形数据结构，JavaScript 通过操作它来修改页面。 |
+| **Virtual DOM** | 虚拟 DOM | 用 JavaScript 对象模拟 DOM 树，通过 Diff 算法找出最小更新路径，减少真实 DOM 操作次数。 |
+| **State** | 状态 | 应用中的数据，比如用户信息、购物车内容、页面当前状态等。 |
+| **Reactivity** | 响应式 | 当数据变化时，系统能自动感知并执行对应的界面更新操作。 |
+| **Proxy** | 代理 | JavaScript 内置机制，可以拦截对一个对象的读取和写入操作。Vue 3 用它来实现响应式。 |
+| **Component** | 组件 | 一段独立的、可复用的界面代码，包含自己的 HTML 结构、JavaScript 逻辑和 CSS 样式。 |
+| **Declarative** | 声明式 | 一种编程方式：你描述"最终想要什么结果"，由框架来决定怎么实现。 |
+| **Imperative** | 命令式 | 一种编程方式：你一步一步告诉程序"具体怎么做"。 |
+| **Diff** | 差异比较 | 对比新旧两棵虚拟 DOM 树，找出哪些节点发生了变化。 |
+| **Patch** | 打补丁 | 把 Diff 找到的变化部分，应用到真实 DOM 上。 |
+| **Compile-time** | 编译时 | 代码在构建阶段被处理的时期，发生在用户打开网页之前。 |
+| **Runtime** | 运行时 | 代码在用户浏览器中执行的时期。 |
+| **Compiler** | 编译器 | 一个程序，把源代码转换成另一种形式的代码。Svelte 的编译器把 `.svelte` 文件转换成高效的 JavaScript。 |
@@ -64,11 +64,6 @@
    title="命令行与 Shell 脚本"
    description="终端操作、Shell 命令、脚本自动化"
  />
-<NavCard
-    href="/zh-cn/appendix/2-development-tools/editors-and-ai"
-    title="编辑器与 AI 编程助手"
-    description="AI 时代的编辑器使用方式与效率提升技巧"
-  />
 <NavCard
    href="/zh-cn/appendix/2-development-tools/git-version-control"
    title="Git：代码的时光机"