feat: comprehensive documentation and demo updates
- Update READMEs and docs across multiple languages - Enhance interactive demos for Agent, LLM, VLM, Audio, Image Gen, Terminal, and Web Basics - Add new appendix sections for Database and IDE intros - Update VitePress config, theme, and utility scripts - Clean up unused assets and components
This commit is contained in:
sanbuphy
@@ -9,18 +9,21 @@
|
||||
::: info 🖥️ 不同系统的打开方式
|
||||
|
||||
** macOS (苹果电脑)**
|
||||
|
||||
1. 按下 `Command (⌘) + Space` 打开聚焦搜索（Spotlight）。
|
||||
2. 输入 `Terminal` 或 `终端`。
|
||||
3. 按回车键，你就会看到一个白底黑字（或黑底白字）的窗口。
|
||||
|
||||
**🪟 Windows**
|
||||
* **方法一 (CMD)**：按下 `Win + R`，输入 `cmd`，按回车。这是最古老的命令行。
|
||||
* **方法二 (PowerShell)**：按下 `Win + R`，输入 `powershell`，按回车。这是更现代、功能更强大的终端。
|
||||
* *建议：日常简单操作两者皆可，开发环境推荐使用 PowerShell 或安装 WSL (Windows Subsystem for Linux)。*
|
||||
|
||||
- **方法一 (CMD)**：按下 `Win + R`，输入 `cmd`，按回车。这是最古老的命令行。
|
||||
- **方法二 (PowerShell)**：按下 `Win + R`，输入 `powershell`，按回车。这是更现代、功能更强大的终端。
|
||||
- _建议：日常简单操作两者皆可，开发环境推荐使用 PowerShell 或安装 WSL (Windows Subsystem for Linux)。_
|
||||
|
||||
**🐧 Linux**
|
||||
* 通常快捷键是 `Ctrl + Alt + T`。
|
||||
* 或者在应用菜单中搜索 `Terminal`。
|
||||
|
||||
- 通常快捷键是 `Ctrl + Alt + T`。
|
||||
- 或者在应用菜单中搜索 `Terminal`。
|
||||
|
||||
:::
|
||||
|
||||
@@ -31,6 +34,7 @@
|
||||
> 💡 **提示**：为了安全和方便，推荐你在下方的**网页模拟器**中操作。如果你有信心，也可以按照第 0 章的方法打开你电脑上真实的终端，跟随步骤一起练习（效果是一样的）。
|
||||
|
||||
在这个练习中，你将学会：
|
||||
|
||||
1. **查看文件**：学会用 `ls` 或 `dir` 看看当前目录下有什么。
|
||||
2. **创建与进入**：学会用 `mkdir` 创建新文件夹，用 `cd` 像传送门一样进入它。
|
||||
3. **新建文件**：学会用命令快速创建一个新文件。
|
||||
@@ -38,33 +42,36 @@
|
||||
5. **删除清理**：学会如何删除不需要的文件（慎用！）。
|
||||
6. **求助 AI**：这是最重要的！当你忘记命令时，学会问 AI：“在 Mac 上怎么删除文件？”，它会直接告诉你答案。
|
||||
|
||||
*请在下方选择你常用的操作系统，然后跟随引导开始操作：*
|
||||
_请在下方选择你常用的操作系统，然后跟随引导开始操作：_
|
||||
|
||||
<TerminalHandsOn />
|
||||
|
||||
### 0.2 为什么要放弃鼠标？(Why CLI?)
|
||||
|
||||
你可能会问：*“现在的图形界面（GUI）这么好用，鼠标点点就行，为什么还要对着黑底白字的窗口敲复杂的命令？”*
|
||||
你可能会问：_“现在的图形界面（GUI）这么好用，鼠标点点就行，为什么还要对着黑底白字的窗口敲复杂的命令？”_
|
||||
|
||||
这并非为了“装极客”，而是因为在特定场景下，**语言（命令）比手势（鼠标）更强大**。
|
||||
|
||||
#### 1. 鼠标难以表达“批量”与“逻辑”
|
||||
* **GUI (鼠标)**：适合“看见什么点什么”。如果你想删除一张照片，右键删除很快。但如果你想“删除所有 2023 年拍摄的、大小超过 5MB 的、格式为 PNG 的照片”，鼠标就无能为力了，你可能需要手动筛选半天。
|
||||
* **CLI (命令)**：适合“描述你想做什么”。上述需求只需要一行命令，计算机会自动帮你找出符合条件的文件并处理，哪怕有 10000 张。
|
||||
|
||||
- **GUI (鼠标)**：适合“看见什么点什么”。如果你想删除一张照片，右键删除很快。但如果你想“删除所有 2023 年拍摄的、大小超过 5MB 的、格式为 PNG 的照片”，鼠标就无能为力了，你可能需要手动筛选半天。
|
||||
- **CLI (命令)**：适合“描述你想做什么”。上述需求只需要一行命令，计算机会自动帮你找出符合条件的文件并处理，哪怕有 10000 张。
|
||||
|
||||
#### 2. 命令可以被记录和复用
|
||||
* **GUI**：你配置一次环境，需要点击几十次菜单。下次换台电脑，你还得凭记忆重新点一遍，很容易漏掉步骤。
|
||||
* **CLI**：你可以把所有命令写进一个文件（脚本）。下次只需要运行这个文件，计算机会**零误差**地重现你的操作。这就是“自动化”的基础。
|
||||
|
||||
- **GUI**：你配置一次环境，需要点击几十次菜单。下次换台电脑，你还得凭记忆重新点一遍，很容易漏掉步骤。
|
||||
- **CLI**：你可以把所有命令写进一个文件（脚本）。下次只需要运行这个文件，计算机会**零误差**地重现你的操作。这就是“自动化”的基础。
|
||||
|
||||
#### 3. 远程控制的唯一选择
|
||||
* **GUI**：传输画面就像看高清视频，需要极高的网速。如果网稍微卡一点，鼠标就会卡顿，根本没法操作。
|
||||
* **CLI**：传输的只是纯文本，几十个字符。哪怕你在信号极差的山区，也能流畅地控制远在地球另一端的数据中心服务器。
|
||||
|
||||
- **GUI**：传输画面就像看高清视频，需要极高的网速。如果网稍微卡一点，鼠标就会卡顿，根本没法操作。
|
||||
- **CLI**：传输的只是纯文本，几十个字符。哪怕你在信号极差的山区，也能流畅地控制远在地球另一端的数据中心服务器。
|
||||
|
||||
**总结**：GUI 适合**探索**（浏览网页、看图），CLI 适合**生产**（开发、运维、批处理）。作为开发者，我们用终端是因为它**更精确、更可控、更高效**。
|
||||
|
||||
## 1. 概念界定：终端是什么？ (Definition)
|
||||
|
||||
*不同操作系统下的终端长相不同，**命令方式也不同**。点击下方按钮切换查看，注意观察 macOS, Windows 和 Linux 是如何用不同的命令（如 `dir` vs `ls`）做同一件事的：*
|
||||
_不同操作系统下的终端长相不同，**命令方式也不同**。点击下方按钮切换查看，注意观察 macOS, Windows 和 Linux 是如何用不同的命令（如 `dir` vs `ls`）做同一件事的：_
|
||||
|
||||
<TerminalOSDemo />
|
||||
|
||||
@@ -73,8 +80,9 @@
|
||||
<TerminalDefinition />
|
||||
|
||||
本质上，终端是一个**字符流输入/输出环境**：
|
||||
- **输入**：通过键盘发送指令（字符信号）。
|
||||
- **输出**：通过屏幕网格显示文本反馈。
|
||||
|
||||
- **输入**：通过键盘发送指令（字符信号）。
|
||||
- **输出**：通过屏幕网格显示文本反馈。
|
||||
|
||||
它不处理复杂的图形、图片或视频，而是专注于**文本信息的交互**。
|
||||
|
||||
@@ -90,30 +98,30 @@ Shell 才是那个能听懂你说话、并指挥计算机干活的“大脑”
|
||||
|
||||
### 2.1 角色分工
|
||||
|
||||
* **🖥️ 终端 (Terminal) —— 就像“浏览器”**
|
||||
* **职责**：它只负责**输入**（把你的按键告诉对方）和**显示**（把对方传回来的字符画在屏幕上）。
|
||||
* **特点**：它本身**没有任何智能**，也不懂什么叫 `ls` 或 `cd`。它就像 Chrome 浏览器，不管你访问的是百度还是谷歌，它只管渲染网页。
|
||||
* *常见的终端*：Windows 的 CMD/PowerShell 窗口, macOS 的 Terminal.app, VS Code 内置的终端。
|
||||
- **🖥️ 终端 (Terminal) —— 就像“浏览器”**
|
||||
- **职责**：它只负责**输入**（把你的按键告诉对方）和**显示**（把对方传回来的字符画在屏幕上）。
|
||||
- **特点**：它本身**没有任何智能**，也不懂什么叫 `ls` 或 `cd`。它就像 Chrome 浏览器，不管你访问的是百度还是谷歌，它只管渲染网页。
|
||||
- _常见的终端_：Windows 的 CMD/PowerShell 窗口, macOS 的 Terminal.app, VS Code 内置的终端。
|
||||
|
||||
* **🧠 Shell (壳) —— 就像“网站服务器”**
|
||||
* **职责**：它才是有逻辑的大脑。它运行在后台，负责**接收**你发来的命令字符串，**解析**它的含义，然后**指挥**操作系统干活。
|
||||
* **特点**：它看不见摸不着，只能通过文本流与外界交流。
|
||||
* *常见的 Shell*：Bash, Zsh, Fish, PowerShell。
|
||||
- **🧠 Shell (壳) —— 就像“网站服务器”**
|
||||
- **职责**：它才是有逻辑的大脑。它运行在后台，负责**接收**你发来的命令字符串，**解析**它的含义，然后**指挥**操作系统干活。
|
||||
- **特点**：它看不见摸不着，只能通过文本流与外界交流。
|
||||
- _常见的 Shell_：Bash, Zsh, Fish, PowerShell。
|
||||
|
||||
* **⚙️ 内核 (Kernel) —— 幕后的“大管家”**
|
||||
* **职责**：操作系统的核心，只有它能直接控制硬件（读写硬盘、分配内存、控制 CPU）。
|
||||
* **关系**：Shell 是内核的“秘书”，帮你把人话翻译给内核听。
|
||||
- **⚙️ 内核 (Kernel) —— 幕后的“大管家”**
|
||||
- **职责**：操作系统的核心，只有它能直接控制硬件（读写硬盘、分配内存、控制 CPU）。
|
||||
- **关系**：Shell 是内核的“秘书”，帮你把人话翻译给内核听。
|
||||
|
||||
### 2.2 为什么分开？(可替换性)
|
||||
|
||||
正因为**显示层**（终端）和**逻辑层**（Shell）是完全分开的，所以它们可以自由搭配：
|
||||
|
||||
* **换个“皮肤”**：你可以在 macOS 上用自带的 Terminal，也可以下载 iTerm2，或者用 VS Code 的终端。它们长相不同，但连的都是同一个 Shell (zsh)，所以命令一模一样。
|
||||
* **换个“大脑”**：你可以在同一个终端窗口里，从 bash 切换到 zsh，或者切换到 python 交互环境。这时，终端没变，但处理命令的逻辑变了。
|
||||
- **换个“皮肤”**：你可以在 macOS 上用自带的 Terminal，也可以下载 iTerm2，或者用 VS Code 的终端。它们长相不同，但连的都是同一个 Shell (zsh)，所以命令一模一样。
|
||||
- **换个“大脑”**：你可以在同一个终端窗口里，从 bash 切换到 zsh，或者切换到 python 交互环境。这时，终端没变，但处理命令的逻辑变了。
|
||||
|
||||
### 2.3 交互流程：消失的按键
|
||||
|
||||
你可能认为：*“我在键盘上按个 'a'，终端就在屏幕上画个 'a'。”*
|
||||
你可能认为：_“我在键盘上按个 'a'，终端就在屏幕上画个 'a'。”_
|
||||
**错！** 真实的流程是这样的（这叫**回显 Echo**）：
|
||||
|
||||
1. **按下 'a'**：键盘信号传给终端。
|
||||
@@ -126,7 +134,7 @@ Shell 才是那个能听懂你说话、并指挥计算机干活的“大脑”
|
||||
**一句话总结流程**：
|
||||
你在终端打字 ➡️ 信号传给 Shell ➡️ Shell 原样发回（你看到了字）并理解 ➡️ Shell 指挥内核干活。
|
||||
|
||||
*下面的演示展示了这个过程，注意看 Shell 和内核之间那道“墙”，以及字符是如何一来一回的：*
|
||||
_下面的演示展示了这个过程，注意看 Shell 和内核之间那道“墙”，以及字符是如何一来一回的：_
|
||||
|
||||
<ArchitectureDemo />
|
||||
|
||||
@@ -136,20 +144,23 @@ Shell 才是那个能听懂你说话、并指挥计算机干活的“大脑”
|
||||
终端屏幕被划分为若干行和列，每一个格子称为一个**单元格（Cell）**。
|
||||
|
||||
### 3.1 单元格的构成
|
||||
|
||||
每个单元格是终端显示的最小单位，它包含两类核心信息：
|
||||
|
||||
1. **字符 (Glyph)**：实际显示的文字（如 `A`, `中`, `$`）。
|
||||
2. **属性 (Attributes)**：字符的样式（如前景色、背景色、加粗、下划线）。
|
||||
|
||||
当你拖动终端窗口改变大小时，本质上是在改变这个网格的**行数 (Rows)** 和 **列数 (Columns)**。
|
||||
|
||||
*请在下方交互区域尝试操作，观察网格如何承载字符：*
|
||||
_请在下方交互区域尝试操作，观察网格如何承载字符：_
|
||||
|
||||
<TerminalGrid />
|
||||
|
||||
### 3.2 样式检查
|
||||
|
||||
终端无法显示图片，所有的“界面”都是通过字符颜色和样式的组合来实现的。
|
||||
|
||||
*点击下方单元格，查看每个格子背后包含的样式属性：*
|
||||
_点击下方单元格，查看每个格子背后包含的样式属性：_
|
||||
|
||||
<CellInspector />
|
||||
|
||||
@@ -161,17 +172,18 @@ Shell 才是那个能听懂你说话、并指挥计算机干活的“大脑”
|
||||
这是一串特殊的字符指令（通常以 `ESC` 字符开头）。当终端接收到这些字符时，**不会将它们显示在屏幕上**，而是将其解释为**控制指令**。
|
||||
|
||||
例如：
|
||||
- 普通字符 `A` → 在屏幕上画出 A。
|
||||
- 序列 `\033[31m` → **指令**：将后续文字颜色设为红色。
|
||||
- 序列 `\033[2J` → **指令**：清空屏幕。
|
||||
|
||||
- 普通字符 `A` → 在屏幕上画出 A。
|
||||
- 序列 `\033[31m` → **指令**：将后续文字颜色设为红色。
|
||||
- 序列 `\033[2J` → **指令**：清空屏幕。
|
||||
|
||||
这就好比你和朋友约定：如果我正常说话，你就记录下来；如果我举起左手（相当于 `ESC`），接下来的那句话就是命令而不是内容。
|
||||
|
||||
*点击下方的“播放”按钮，观察终端是如何逐个处理字符流，并识别出隐藏的指令：*
|
||||
_点击下方的“播放”按钮，观察终端是如何逐个处理字符流，并识别出隐藏的指令：_
|
||||
|
||||
<EscapeParserDemo />
|
||||
|
||||
*下方组件则展示了更多种类的转义序列及其渲染效果：*
|
||||
_下方组件则展示了更多种类的转义序列及其渲染效果：_
|
||||
|
||||
<EscapeSequences />
|
||||
|
||||
@@ -181,13 +193,13 @@ Shell 才是那个能听懂你说话、并指挥计算机干活的“大脑”
|
||||
|
||||
1. **按键捕获**：终端捕获你的物理按键动作。
|
||||
2. **编码转换**：将按键转换为特定的**字节序列**。
|
||||
- 按下 `a` → 发送字节 `a`。
|
||||
- 按下 `向上箭头` → 发送序列 `^[[A`。
|
||||
- 按下 `a` → 发送字节 `a`。
|
||||
- 按下 `向上箭头` → 发送序列 `^[[A`。
|
||||
3. **发送**：将字节流发送给 Shell 或当前运行的程序。
|
||||
|
||||
**关键点**：所有的按键（包括功能键、鼠标点击）在传输层面上都是**字节数据**。
|
||||
|
||||
*在下方尝试按键，观察你的输入是如何被转换为底层数据的：*
|
||||
_在下方尝试按键，观察你的输入是如何被转换为底层数据的：_
|
||||
|
||||
<InputVisualizer />
|
||||
|
||||
@@ -195,19 +207,19 @@ Shell 才是那个能听懂你说话、并指挥计算机干活的“大脑”
|
||||
|
||||
终端有两种截然不同的性格。理解这一点，你就能明白为什么在终端里**打命令**和**玩贪吃蛇**是完全不同的体验。
|
||||
|
||||
- **加工模式 (Cooked Mode) —— 像打字机**
|
||||
* 这是默认模式。
|
||||
* **行为**：你输入的字符会被终端**暂时扣留**，直到你按下回车键（Enter）。
|
||||
* **好处**：这给了你修改的机会。打错了？按退格键（Backspace）删掉重写，程序根本不知道你之前打错过。
|
||||
* *适用场景：平时敲命令（如 `ls`, `cd`）。*
|
||||
- **加工模式 (Cooked Mode) —— 像打字机**
|
||||
- 这是默认模式。
|
||||
- **行为**：你输入的字符会被终端**暂时扣留**，直到你按下回车键（Enter）。
|
||||
- **好处**：这给了你修改的机会。打错了？按退格键（Backspace）删掉重写，程序根本不知道你之前打错过。
|
||||
- _适用场景：平时敲命令（如 `ls`, `cd`）。_
|
||||
|
||||
- **原始模式 (Raw Mode) —— 像游戏手柄**
|
||||
* 这是“高手”模式。
|
||||
* **行为**：你按下的每一个键（包括方向键、Ctrl组合键），都会**瞬间**发送给程序，没有任何缓冲。
|
||||
* **好处**：程序能实时响应你的操作。
|
||||
* *适用场景：玩终端游戏（如贪吃蛇）、使用 Vim 编辑器（一种纯键盘操作的编辑器）。*
|
||||
- **原始模式 (Raw Mode) —— 像游戏手柄**
|
||||
- 这是“高手”模式。
|
||||
- **行为**：你按下的每一个键（包括方向键、Ctrl组合键），都会**瞬间**发送给程序，没有任何缓冲。
|
||||
- **好处**：程序能实时响应你的操作。
|
||||
- _适用场景：玩终端游戏（如贪吃蛇）、使用 Vim 编辑器（一种纯键盘操作的编辑器）。_
|
||||
|
||||
*点击下方按钮切换模式，体验“写信”与“打游戏”的不同手感：*
|
||||
_点击下方按钮切换模式，体验“写信”与“打游戏”的不同手感：_
|
||||
|
||||
<CookedRawDemo />
|
||||
|
||||
@@ -216,8 +228,9 @@ Shell 才是那个能听懂你说话、并指挥计算机干活的“大脑”
|
||||
在终端中按下 `Ctrl+C` 通常能停止程序。这并非通过发送字符实现，而是触发了**信号 (Signal)**。
|
||||
|
||||
信号是操作系统级别的通知机制，用于告诉程序发生了特定事件。
|
||||
- **Ctrl+C** → 发送 `SIGINT` (Interrupt)：通知程序“请中断当前操作”。
|
||||
- **Ctrl+Z** → 发送 `SIGTSTP` (Suspend)：通知程序“请暂停并挂起到后台”。
|
||||
|
||||
- **Ctrl+C** → 发送 `SIGINT` (Interrupt)：通知程序“请中断当前操作”。
|
||||
- **Ctrl+Z** → 发送 `SIGTSTP` (Suspend)：通知程序“请暂停并挂起到后台”。
|
||||
|
||||
这一机制绕过了标准的数据输入通道，确保在程序卡死时用户仍有控制权。
|
||||
|
||||
@@ -229,18 +242,18 @@ Shell 才是那个能听懂你说话、并指挥计算机干活的“大脑”
|
||||
|
||||
这是因为终端有两块“画布”在来回切换：
|
||||
|
||||
* **主缓冲区 (Primary Buffer)**：就像**草稿本**。
|
||||
* 你写一行，系统回一行。
|
||||
* 写满了就翻页（滚动），以前写的东西都在上面。
|
||||
* *用于：日常敲命令。*
|
||||
- **主缓冲区 (Primary Buffer)**：就像**草稿本**。
|
||||
- 你写一行，系统回一行。
|
||||
- 写满了就翻页（滚动），以前写的东西都在上面。
|
||||
- _用于：日常敲命令。_
|
||||
|
||||
* **备用缓冲区 (Alternate Buffer)**：就像**黑板**。
|
||||
* 程序把黑板擦干净，在上面画画（全屏显示）。
|
||||
* 不管怎么画，都不会影响你桌子上的草稿本。
|
||||
* 当你退出程序时，就像把黑板收起来，你又回到了草稿本面前。
|
||||
* *用于：Vim, Nano, 游戏等全屏软件。*
|
||||
- **备用缓冲区 (Alternate Buffer)**：就像**黑板**。
|
||||
- 程序把黑板擦干净，在上面画画（全屏显示）。
|
||||
- 不管怎么画，都不会影响你桌子上的草稿本。
|
||||
- 当你退出程序时，就像把黑板收起来，你又回到了草稿本面前。
|
||||
- _用于：Vim, Nano, 游戏等全屏软件。_
|
||||
|
||||
*点击下方按钮，体验“草稿本”和“黑板”是如何瞬间切换的：*
|
||||
_点击下方按钮，体验“草稿本”和“黑板”是如何瞬间切换的：_
|
||||
|
||||
<BufferSwitchDemo />
|
||||
|
||||
@@ -249,23 +262,24 @@ Shell 才是那个能听懂你说话、并指挥计算机干活的“大脑”
|
||||
## 9. 总结 (Summary)
|
||||
|
||||
终端并非神秘的黑盒，它是一个标准化的文本交互接口。
|
||||
- **显示**：基于网格和字符。
|
||||
- **控制**：基于转义序列。
|
||||
- **交互**：基于输入输出流和信号。
|
||||
|
||||
- **显示**：基于网格和字符。
|
||||
- **控制**：基于转义序列。
|
||||
- **交互**：基于输入输出流和信号。
|
||||
|
||||
通过理解这些底层原理，你不再只是死记硬背命令，而是能真正理解每一次敲击键盘背后发生的逻辑流转。
|
||||
|
||||
## 附录：常用术语表 (Vocabulary)
|
||||
|
||||
| 术语 | 英文 | 解释 |
|
||||
| :--- | :--- | :--- |
|
||||
| **终端** | Terminal | 负责显示和输入的窗口程序（前端）。 |
|
||||
| **Shell** | Shell | 负责解析命令和执行逻辑的程序（后端）。 |
|
||||
| **CLI** | Command Line Interface | 命令行界面，一种基于文本的交互方式。 |
|
||||
| **TUI** | Text User Interface | 文本用户界面，指在终端中通过字符构建的伪图形界面。 |
|
||||
| **转义序列** | Escape Sequence | 用于控制终端光标、颜色等的特殊字符指令。 |
|
||||
| **标准输入/输出** | Stdin/Stdout | 程序接收数据和输出数据的标准通道。 |
|
||||
| 术语 | 英文 | 解释 |
|
||||
| :---------------- | :--------------------- | :------------------------------------------------- |
|
||||
| **终端** | Terminal | 负责显示和输入的窗口程序（前端）。 |
|
||||
| **Shell** | Shell | 负责解析命令和执行逻辑的程序（后端）。 |
|
||||
| **CLI** | Command Line Interface | 命令行界面，一种基于文本的交互方式。 |
|
||||
| **TUI** | Text User Interface | 文本用户界面，指在终端中通过字符构建的伪图形界面。 |
|
||||
| **转义序列** | Escape Sequence | 用于控制终端光标、颜色等的特殊字符指令。 |
|
||||
| **标准输入/输出** | Stdin/Stdout | 程序接收数据和输出数据的标准通道。 |
|
||||
|
||||
## 参考资料 (Reference)
|
||||
|
||||
- [How Terminals Work](https://how-terminals-work.vercel.app/)：本文的结构与演示灵感深受该项目的启发。如果你希望深入了解工程实现细节，强烈推荐阅读原版教程。
|
||||
- [How Terminals Work](https://how-terminals-work.vercel.app/)：本文的结构与演示灵感深受该项目的启发。如果你希望深入了解工程实现细节，强烈推荐阅读原版教程。
|
||||
|
||||
Reference in New Issue
Block a user