+
CPU
-
-
-
-
控制单元 (CU)
- {{ cuState }}
+
+
+
-
- 控制单元 CU
+
+
+
+ PC
+ {{ fmt(regs.PC) }}
+ 程序计数器
+
+
+ IR
+ {{ regs.IR || '—' }}
+ 指令寄存器
+
-
算术逻辑单元 (ALU)
- {{ aluState }}
+
+
+
-
-
+
+
+ MAR
+ {{ fmt(regs.MAR) }}
+ 内存地址寄存器
+
+
+ MDR
+ {{ regs.MDR !== null ? regs.MDR : '—' }}
+ 内存数据寄存器
+
-
寄存器组
-
- R0: {{ r0 }}
- R1: {{ r1 }}
- PC: {{ pc }}
+
+
-
-
+
+
+
+ 算术逻辑单元 ALU
+
+
+
+ ACC
+ {{ fmt(regs.ACC) }}
+ 累加器
+
+
+ {{ aluOp }}
+
+
+
通用寄存器组
+
+
+ {{ r }}
+ {{ fmt(regs[r]) }}
-
内存 (Memory)
-
-
- M[10] 取指：LOAD R0, #5
+
+
+
+
+
+
+ 地址总线
+ {{ fmt(regs.MAR) }}
+
+
+ 数据总线
+ {{ regs.MDR !== null ? regs.MDR : '' }}
+
+
+ 控制总线
+ {{ ctrlSignal }}
+
+
+
+
+ →
+ ↔
+ →
+
+
-
- 主存 Memory
+
+
+ {{ regs.PC === BASE_ADDR + i ? '▶' : '\u00a0' }}
+ {{ hex(BASE_ADDR + i) }}
+ {{ inst.asm }}
-
- M[11] 译码：ADD R1, R0
-
-
- M[12] 执行：ALU 计算
-
-
- M[13] 写回：将结果保存
+
+
+
数据区
+
+
+ {{ hex(addr) }}
+ {{ val }}
-
- 1. Fetch
- 取指
-
-
- 2. Decode
- 译码
-
-
- 3. Execute
- 执行
-
-
- 4. WriteBack
- 写回
+
+
+
+
+
+ localhost
+ 5432
+
+
+ true
+
+ https://example.com
+ https://app.example.com
+
+
+
+```
+
+XML 的表达力非常强，支持嵌套、属性、命名空间、Schema 验证等高级特性。但它的语法冗长——大量的开闭标签导致信噪比低，手动编写和阅读的体验较差。
+
+XML 在以下领域仍然广泛使用：
+- Java 生态（Maven 的 `pom.xml`、Spring 配置、Android 布局文件）
+- 企业级 Web 服务（SOAP 协议）
+- 办公文档格式（`.docx`、`.xlsx` 本质上是 ZIP 压缩的 XML 文件集合）
+- RSS/Atom 订阅源、SVG 矢量图形
+
+**JSON**
+
+**JSON（JavaScript Object Notation）** 诞生于 2001 年，因其简洁性迅速取代 XML 成为 Web API 数据交换的事实标准：
+
+```json
+{
+ "database": {
+ "host": "localhost",
+ "port": 5432
+ },
+ "server": {
+ "debug": true
+ }
+}
+```
+
+优点是结构清晰，几乎所有编程语言都有原生解析支持。主要缺点是**不支持注释**，且大量的括号和引号在手动编写时容易出错。JSON 同时也是前端项目配置的标准格式（`package.json`、`tsconfig.json`）。
+
+**YAML**
+
+**YAML（YAML Ain't Markup Language）** 同样诞生于 2001 年，是目前后端和 DevOps 领域使用最广泛的配置格式。Docker Compose、Kubernetes、GitHub Actions 等工具均采用 YAML：
+
+```yaml
+# 数据库配置
+database:
+ host: localhost
+ port: 5432
+
+# 服务器配置
+server:
+ debug: true
+ allowed_origins:
+ - https://example.com
+ - https://app.example.com
+```
+
+优点是支持注释、语法简洁、可表达复杂嵌套结构。缺点是**依赖缩进来表示层级关系**，缩进错误会导致解析失败，这是初学者最常遇到的问题。
+
+> 补充：YAML 的全称 "YAML Ain't Markup Language" 是一个递归缩写。
+
+**TOML**
+
+**TOML（Tom's Obvious Minimal Language）** 诞生于 2013 年，被 Rust 的包管理器 Cargo 和 Python 的 `pyproject.toml` 采用：
+
+```toml
+[database]
+host = "localhost"
+port = 5432
+
+[server]
+debug = true
+allowed_origins = [
+ "https://example.com",
+ "https://app.example.com"
+]
+```
+
+TOML 试图兼顾 INI 的简洁性和 YAML 的表达力，同时避免缩进敏感带来的问题。
+
+### 2.4 二进制序列化格式
+
+上述格式都是人类可读的文本。在对性能和体积有更高要求的场景中，还存在一类**二进制序列化格式**——它们牺牲可读性，换取更小的体积和更快的解析速度。
+
+| 格式 | 开发方 | 特点 | 典型使用场景 |
+|------|-------|------|------------|
+| **Protocol Buffers (Protobuf)** | Google | 需要预定义 `.proto` Schema 文件，强类型，体积极小 | gRPC 通信、Google 内部服务、高性能微服务 |
+| **MessagePack** | 社区 | 类似 JSON 的二进制版本，无需 Schema | Redis 内部编码、跨语言高性能通信 |
+| **Avro** | Apache | 支持 Schema 演进，适合大数据场景 | Hadoop / Kafka 生态的数据序列化 |
+| **BSON** | MongoDB | JSON 的二进制扩展，支持更多数据类型 | MongoDB 数据库内部存储格式 |
+
+以 Protocol Buffers 为例，需要先定义 Schema：
+
+```protobuf
+// user.proto
+syntax = "proto3";
+
+message User {
+ string name = 1;
+ int32 age = 2;
+ string email = 3;
+}
+```
+
+然后通过编译器（`protoc`）自动生成各语言的序列化/反序列化代码。这种"先定义 Schema，再生成代码"的模式与后文将介绍的 OpenAPI SDK 生成思路一致。
+
+### 2.5 完整对比
+
+| 格式 | 类型 | 诞生年代 | 可读性 | 支持注释 | 典型使用场景 |
+|------|------|---------|--------|---------|------------|
+| **INI** | 文本 | 1980s | 高 | ✅ | 系统配置、遗留项目 |
+| **CSV** | 文本 | 1972 | 高 | ❌ | 数据导入导出、表格交换 |
+| **XML** | 文本 | 1998 | 中 | ✅ | Java 生态、企业级 Web 服务、文档格式 |
+| **JSON** | 文本 | 2001 | 高 | ❌ | Web API 数据交换、前端配置 |
+| **YAML** | 文本 | 2001 | 高 | ✅ | Docker、K8s、CI/CD、后端服务配置 |
+| **TOML** | 文本 | 2013 | 高 | ✅ | Rust / Python 项目配置 |
+| **Protobuf** | 二进制 | 2008 | 无 | — | gRPC、高性能微服务通信 |
+| **MessagePack** | 二进制 | 2008 | 无 | — | 高性能跨语言通信 |
+| **Avro** | 二进制 | 2009 | 无 | — | Hadoop / Kafka 大数据管道 |
+| **BSON** | 二进制 | 2009 | 无 | — | MongoDB 内部存储 |
+
+**要点**：所有这些格式的本质功能相同——**将结构化数据转换为可存储、可传输的形式**。文本格式优先考虑人类可读性和易编辑性；二进制格式优先考虑解析性能和传输体积。选择哪种格式取决于具体场景的需求权衡。
+
+
+---
+
+## 3. 嵌入式脚本语言：可编程的配置层
+
+### 3.1 概念定义
+
+Python、JavaScript、Go 等语言是通用编程语言（General-Purpose Language），它们可以独立运行，构建完整的应用程序。
+
+与之不同，还有一类语言**专门设计为嵌入到其他宿主程序中运行**，为宿主程序提供可编程的扩展能力。这类语言被称为**嵌入式脚本语言（Embedded Scripting Language）**。
+
+它们解决的核心问题是：**当静态配置文件（YAML/JSON）的表达力不够，需要引入条件判断、循环等逻辑时，如何在不修改宿主程序源码的前提下实现动态行为。**
+
+### 3.2 Lua：最具代表性的嵌入式脚本语言
+
+Lua（葡萄牙语中"月亮"的意思）是一门极其轻量的脚本语言，整个解释器编译后仅几百 KB。它的设计目标不是独立运行，而是作为可嵌入的扩展层。
+
+Lua 的典型应用场景：
+
+- **游戏引擎**：《魔兽世界》的插件系统、《Roblox》的游戏脚本均使用 Lua。游戏引擎用 C/C++ 实现核心渲染和物理计算，将关卡逻辑、NPC 对话等频繁变动的部分交给 Lua 脚本。这样，策划人员修改游戏内容时不需要重新编译引擎。
+
+- **Web 服务器**：OpenResty 将 Lua 嵌入 Nginx 内部，使运维人员可以用 Lua 脚本实现请求过滤、限流、鉴权等逻辑，而无需修改 Nginx 的 C 源码。
+
+- **数据库**：Redis 支持将 Lua 脚本发送到服务端执行，用于实现需要原子性保证的复合操作（如"先读后写"）。
+
+以下是一段嵌入在 Nginx（OpenResty）中的 Lua 脚本示例：
+
+```lua
+-- 功能：对 /api/secret 路径进行 token 鉴权
+local uri = ngx.var.uri
+local token = ngx.req.get_headers()["Authorization"]
+
+if uri == "/api/secret" and token ~= "Bearer my-secret-token" then
+ ngx.status = 403
+ ngx.say("Access denied")
+ return ngx.exit(403)
+end
+```
+
+### 3.3 其他嵌入式脚本语言
+
+| 语言 | 宿主环境 | 典型用途 |
+|------|---------|---------|
+| **Lua** | 游戏引擎、Nginx（OpenResty）、Redis | 游戏逻辑、网关策略、缓存操作 |
+| **VimScript / Lua** | Vim / Neovim 编辑器 | 编辑器插件开发 |
+| **Emacs Lisp** | Emacs 编辑器 | 编辑器行为自定义 |
+| **GDScript** | Godot 游戏引擎 | 游戏逻辑脚本 |
+| **Jsonnet** | Kubernetes 生态 / 配置生成工具 | 模板化生成大量相似的 JSON/YAML 配置 |
+
+**要点**：嵌入式脚本语言在 DSL 分类中属于**内部 DSL 与外部 DSL 的交界地带**——它们是独立的语言（有自己的语法和解释器），但设计目标是嵌入宿主程序运行，而非独立构建应用。它们填补了"静态配置文件"（纯数据描述型 DSL）与"通用编程语言"（GPL）之间的空白：当配置需要表达逻辑（条件判断、循环、函数调用）时，嵌入一门轻量脚本语言是工程上的标准解决方案。
+
+
+---
+
+## 4. 基础设施即代码（Infrastructure as Code）
+
+### 4.1 什么是"基础设施"
+
+在后端工程中，"基础设施"（Infrastructure）指的是应用程序运行所依赖的底层资源：
+
+- 计算资源：服务器（虚拟机或容器）
+- 数据存储：数据库实例、对象存储桶
+- 网络：防火墙规则、负载均衡器、DNS 配置
+- 中间件：消息队列、缓存集群
+
+在云计算时代，这些资源通过云服务商（如 AWS、阿里云、腾讯云）的控制台以图形界面的方式创建和管理。
+
+### 4.2 手动管理的局限性
+
+通过控制台手动操作在小规模项目中可行，但随着项目规模增长，会暴露以下问题：
+
+1. **不可重复**：操作步骤没有记录，无法精确复现同一套环境
+2. **不可审计**：无法追溯"谁在什么时间修改了什么配置"
+3. **不可协作**：操作过程无法纳入版本控制，无法进行代码审查
+4. **容易出错**：手动操作在生产环境中存在误操作风险
+
+**基础设施即代码（Infrastructure as Code，简称 IaC）** 的核心思想是：**用代码来声明式地定义基础设施资源，使其具备版本控制、自动化执行和可重复部署的能力。**
+
+### 4.3 Terraform
+
+Terraform 是目前使用最广泛的 IaC 工具，由 HashiCorp 公司开发。它使用专用的 **HCL（HashiCorp Configuration Language）** 语言。
+
+Terraform 采用**声明式**范式：用户描述期望的最终状态，Terraform 自动计算从当前状态到目标状态所需的操作。
+
+```hcl
+# 定义一台云服务器
+resource "aws_instance" "my_server" {
+ ami = "ami-0c55b159cbfafe1f0" # 操作系统镜像
+ instance_type = "t3.micro" # 实例规格
+
+ tags = {
+ Name = "my-first-server"
+ }
+}
+
+# 定义一个 PostgreSQL 数据库实例
+resource "aws_db_instance" "my_database" {
+ engine = "postgres"
+ instance_class = "db.t3.micro"
+ username = "admin"
+ password = "please-use-secrets-manager"
+}
+```
+
+执行流程：
+
+```bash
+terraform plan # 预览将要执行的变更
+terraform apply # 确认并执行，自动在云平台创建资源
+```
+
+### 4.4 Pulumi
+
+Pulumi 提供了另一种思路：**直接使用通用编程语言（TypeScript、Python、Go 等）来定义基础设施**，而非学习专用的 HCL 语法。
+
+同样的服务器定义，用 Pulumi + TypeScript 表达如下：
+
+```typescript
+import * as aws from "@pulumi/aws";
+
+const server = new aws.ec2.Instance("my-server", {
+ ami: "ami-0c55b159cbfafe1f0",
+ instanceType: "t3.micro",
+ tags: { Name: "my-first-server" },
+});
+
+const bucket = new aws.s3.Bucket("my-bucket", {
+ acl: "private",
+});
+
+export const serverIp = server.publicIp;
+```
+
+由于使用的是通用编程语言，开发者可以利用循环、条件判断、函数抽象等语言特性来处理复杂的基础设施逻辑。
+
+### 4.5 Terraform 与 Pulumi 的对比
+
+| 维度 | Terraform | Pulumi |
+|------|-----------|--------|
+| **语言** | HCL（专用语言） | TypeScript / Python / Go 等通用语言 |
+| **学习成本** | 需要学习 HCL 语法 | 使用已掌握的编程语言，学习成本较低 |
+| **社区生态** | 非常成熟，几乎覆盖所有云服务商 | 快速增长中，但规模小于 Terraform |
+| **适用场景** | 运维团队主导的标准化基础设施管理 | 开发者主导的项目，需要复杂逻辑的场景 |
+| **AI 代码生成适配度** | 高（模式固定） | 很高（本质是通用编程语言代码） |
+
+**要点**：IaC 工具中的 HCL 是一种典型的外部 DSL——它有独立的语法和解析器，专门用于声明式描述基础设施状态。而 Pulumi 则采用内部 DSL 的策略——用通用编程语言的语法来表达领域特定的概念。两者目标一致（将基础设施管理从手动操作转为代码驱动），路径不同（专用语言 vs 通用语言）。代码可以纳入 Git 版本控制、进行团队审查、自动化执行和回滚。
+
+
+---
+
+## 5. 胶水代码与 SDK 自动生成
+
+### 5.1 什么是胶水代码
+
+在软件工程中，**胶水代码（Glue Code）** 指的是本身不包含业务逻辑，仅用于连接两个系统或模块的代码。
+
+典型的胶水代码包括：
+
+- 前端调用后端 API 时编写的 HTTP 请求代码（URL 拼接、请求头设置、响应解析）
+- 后端服务 A 调用服务 B 接口时编写的 HTTP 客户端代码
+- 不同编程语言之间的接口适配代码
+
+这类代码的特征是：**高度重复、模式固定、但不可省略。**
+
+### 5.2 OpenAPI 规范与代码自动生成
+
+既然胶水代码具有高度的模式化特征，工程界的解决方案是：**先用标准格式描述 API 接口，再用工具自动生成客户端代码。**
+
+**OpenAPI 规范**（前身为 Swagger）是描述 REST API 的行业标准。它使用 YAML 或 JSON 格式，精确定义 API 的路径、参数、请求体和响应结构：
+
+```yaml
+openapi: 3.0.0
+info:
+ title: 邮件服务 API
+ version: 1.0.0
+
+paths:
+ /emails:
+ post:
+ summary: 发送邮件
+ requestBody:
+ content:
+ application/json:
+ schema:
+ type: object
+ properties:
+ to:
+ type: string
+ example: "user@example.com"
+ subject:
+ type: string
+ body:
+ type: string
+ responses:
+ '200':
+ description: 发送成功
+```
+
+基于这份规范文件，使用 `openapi-generator` 等工具可以自动生成多种语言的客户端 SDK：
+
+- **Python**：`client.emails.send(to="user@example.com", subject="Hi", body="Hello")`
+- **TypeScript**：`client.emails.send({ to: "user@example.com", subject: "Hi", body: "Hello" })`
+- **Go**：`client.Emails.Send(ctx, &SendEmailRequest{To: "user@example.com", ...})`
+
+生成的 SDK 封装了 HTTP 请求的所有细节，调用方无需关心 URL 路径、请求方法、序列化格式等底层实现。
+
+### 5.3 重新理解 Armin 的案例
+
+回到本文开头的案例，现在可以准确理解其中每个组成部分：
+
+| 组成部分 | 性质 | 说明 |
+|---------|------|------|
+| **Go** | 业务逻辑代码 | 邮件收发服务的核心功能实现 |
+| **YAML** | 配置文件 | 服务配置、CI/CD 流水线定义、OpenAPI 规范文件 |
+| **Pulumi** | 基础设施代码 | 用 Go/TypeScript 定义云资源（服务器、数据库、网络） |
+| **SDK 胶水代码** | 自动生成的客户端库 | 从 OpenAPI 规范自动生成的 Python 和 TypeScript SDK |
+
+其中 YAML 配置、Pulumi 资源定义、SDK 胶水代码这三类均属于高度模式化、有明确规范约束的代码，这正是 AI 代码生成能力最强的领域。因此"4 万行代码中 90% 由 AI 生成"是合理的。
+
+
+---
+
+## 6. AI 与 DSL 的关系
+
+### 6.1 AI 代码生成的适用性分析
+
+| 特征维度 | 适合 AI 生成 | 不适合 AI 生成 |
+|---------|-------------|---------------|
+| **模式化程度** | 高度重复，存在固定模板 | 需要创造性设计，无先例可循 |
+| **规范约束** | 有明确的 schema 或语法规范 | 需求模糊，边界不清晰 |
+| **上下文依赖** | 局部自洽，单个定义不依赖全局理解 | 需要理解整个系统的架构意图 |
+| **可验证性** | 可被工具自动校验（如 `terraform validate`） | 只能依靠人工判断设计合理性 |
+
+本文介绍的四类技术——配置文件、嵌入式脚本、IaC 代码、SDK 胶水代码——均具备左列的特征。这解释了为什么 AI 在这些领域的代码生成效果显著优于业务逻辑代码。
+
+### 6.2 评估框架
+
+在判断某段代码是否适合交给 AI 生成时，可以参考以下三个标准：
+
+1. **是否存在现成的规范或 schema？** —— 存在则 AI 友好
+2. **是否属于大量重复的模式？** —— 是则 AI 友好
+3. **生成结果能否被工具自动验证？** —— 能则 AI 友好
+
+三项均满足的代码（如从 OpenAPI 规范生成 SDK、用 Terraform 批量定义同构资源），可以高度依赖 AI 生成。三项均不满足的代码（如设计一个新的分布式一致性协议），仍需要工程师自行完成。
+
+---
+
+## 7. 术语表
+
+| 术语 | 全称 / 中文 | 定义 |
+|------|------------|------|
+| **DSL** | Domain-Specific Language / 领域特定语言 | 为特定领域设计的语言，与通用编程语言相对 |
+| **GPL** | General-Purpose Language / 通用编程语言 | 可解决任意计算问题的编程语言，如 Python、Java、Go |
+| **外部 DSL** | External DSL | 拥有独立语法和解析器的领域特定语言，如 SQL、HCL、YAML |
+| **内部 DSL** | Internal DSL / Embedded DSL | 寄生在通用编程语言内部、利用宿主语法构建的领域专用表达，如 Pulumi |
+| **数据序列化** | Data Serialization | 将内存中的数据结构转换为可存储或可传输的格式的过程 |
+| **INI** | Initialization | 最早期的键值对配置格式，起源于 Windows 系统 |
+| **CSV** | Comma-Separated Values / 逗号分隔值 | 用逗号分隔字段的纯文本表格格式 |
+| **XML** | eXtensible Markup Language / 可扩展标记语言 | 基于标签的文本数据格式，表达力强但语法冗长 |
+| **JSON** | JavaScript Object Notation | 基于键值对的轻量数据交换格式，Web API 的事实标准 |
+| **YAML** | YAML Ain't Markup Language | 基于缩进的配置文件格式，后端和 DevOps 领域广泛使用 |
+| **TOML** | Tom's Obvious Minimal Language | 显式语法的配置格式，Rust 和 Python 生态常用 |
+| **Protobuf** | Protocol Buffers | Google 开发的二进制序列化格式，需预定义 Schema，体积小、速度快 |
+| **MessagePack** | — | 类似 JSON 的二进制序列化格式，无需 Schema |
+| **Lua** | — | 轻量级嵌入式脚本语言，常用于游戏引擎、Web 服务器和数据库扩展 |
+| **IaC** | Infrastructure as Code / 基础设施即代码 | 用代码定义和管理云计算资源的工程实践 |
+| **Terraform** | — | HashiCorp 开发的 IaC 工具，使用 HCL 声明式语言 |
+| **HCL** | HashiCorp Configuration Language | Terraform 使用的专用配置语言 |
+| **Pulumi** | — | 支持通用编程语言的 IaC 工具 |
+| **OpenAPI** | — | 描述 REST API 接口的行业标准规范（前身为 Swagger） |
+| **SDK** | Software Development Kit / 软件开发工具包 | 封装了 API 调用细节的客户端库 |
+| **胶水代码** | Glue Code | 不含业务逻辑，仅用于连接两个系统的适配代码 |
+
+---
+
+## 总结
+
+后端工程中存在大量非业务逻辑代码。它们有一个共同的上位概念：**DSL（领域特定语言）**——为特定领域设计的、与通用编程语言相对的语言。
+
+本文介绍的 DSL 可以归为四个类别：
+
+1. **数据序列化格式**（XML / JSON / YAML / TOML / CSV / Protobuf 等）—— 纯数据描述型外部 DSL，将结构化数据转换为可存储、可传输的形式
+2. **嵌入式脚本语言**（Lua 等）—— 介于配置与通用语言之间，为宿主程序提供可编程的扩展能力
+3. **基础设施定义语言**（HCL / Dockerfile 等）—— 声明式外部 DSL，描述系统期望状态；Pulumi 则以内部 DSL 的方式实现同一目标
+4. **接口描述语言与胶水代码生成**（OpenAPI / .proto）—— 通过规范描述自动生成系统间的连接代码
+
+理解 DSL 这一分类框架后，面对后端项目中各类"不像代码的代码"时，可以快速识别其性质：它属于哪类 DSL、解决什么领域的问题、为什么不用通用编程语言来写。
+
+同时，由于 DSL 代码具有高度模式化、规范驱动、可自动验证的特征，它们也是当前 AI 代码生成技术最有效的应用领域。
\ No newline at end of file
diff --git a/docs/zh-cn/appendix/7-infrastructure-and-operations/dns-https.md b/docs/zh-cn/appendix/7-infrastructure-and-operations/dns-https.md
index 87e6921..26efb9e 100644
--- a/docs/zh-cn/appendix/7-infrastructure-and-operations/dns-https.md
+++ b/docs/zh-cn/appendix/7-infrastructure-and-operations/dns-https.md
@@ -1,3 +1,173 @@
# 域名、DNS 与 HTTPS
-> 待实现
+::: tip 前言
+**当你在浏览器输入 `www.google.com` 并按下回车，背后发生了什么？** 这个看似简单的动作，背后涉及域名解析、DNS 查询、TLS 加密握手等一系列精密的协作过程。理解这些机制，是每个开发者的必修课——它直接关系到你的网站能不能被访问、数据会不会被窃取。
+:::
+
+**这篇文章会带你学什么？**
+
+学完这章后，你将获得：
+
+- **DNS 原理**：理解域名如何被翻译成 IP 地址的完整过程
+- **记录类型**：掌握 A、CNAME、MX 等常见 DNS 记录的用途
+- **HTTPS 机制**：理解 TLS 握手如何建立安全连接
+- **证书体系**：了解数字证书的信任链和验证机制
+- **安全意识**：明白为什么 HTTPS 是现代 Web 的底线要求
+
+| 章节 | 内容 | 核心概念 |
+|-----|------|---------|
+| **第 1 章** | DNS 解析 | 递归查询、迭代查询 |
+| **第 2 章** | DNS 记录 | A、CNAME、MX、TXT |
+| **第 3 章** | HTTPS 与 TLS | 握手过程、加密通信 |
+| **第 4 章** | 证书信任链 | CA、根证书、中间证书 |
+| **第 5 章** | HTTP vs HTTPS | 明文 vs 加密、安全对比 |
+
+---
+
+## 0. 全景图：从域名到安全连接
+
+互联网的通信基于 IP 地址（如 142.250.80.46），但人类记不住这些数字。于是我们发明了**域名系统（DNS）**——互联网的"电话簿"，把人类可读的域名翻译成机器可读的 IP 地址。
+
+但光能找到服务器还不够。如果通信内容是明文传输的，任何中间人都能窃听、篡改你的数据。**HTTPS** 就是解决这个问题的——它在 HTTP 之上加了一层 TLS 加密，确保数据在传输过程中的机密性和完整性。
+
+::: tip 一次完整的网页访问
+1. **域名解析**：浏览器问 DNS "www.google.com 的 IP 是多少？"，DNS 回答 "142.250.80.46"
+2. **TCP 连接**：浏览器与服务器建立 TCP 三次握手
+3. **TLS 握手**：双方协商加密算法、验证证书、交换密钥
+4. **加密通信**：所有 HTTP 数据通过加密通道传输
+:::
+
+---
+
+## 1. DNS 解析：互联网的"电话簿"
+
+DNS（Domain Name System）的工作原理就像查电话簿：你知道对方的名字（域名），需要查到对方的电话号码（IP 地址）。但互联网的"电话簿"不是一本，而是一个分层的分布式系统。
+
+
+
+
+
+
步骤 {{ stepIndex }} / {{ totalSteps }}
+ {{ currentStep.msg }}
+
+ 信号：
+ {{ currentStep.signal }}
+
-
-
-
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/DesktopDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/DesktopDemo.vue
new file mode 100644
index 0000000..b458904
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/DesktopDemo.vue
@@ -0,0 +1,172 @@
+
+ - 当前阶段状态：{{ statusMsg }} -
+
+ ✅ 程序执行完毕！共执行 {{ program.length }} 条指令，{{ stepIndex }} 个时钟步骤。
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/DeveloperSkillShiftDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/DeveloperSkillShiftDemo.vue
new file mode 100644
index 0000000..2316007
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/DeveloperSkillShiftDemo.vue
@@ -0,0 +1,162 @@
+
+ 桌面是如何出现的 ── 点击加载
+
+
+
+
+
+
+
+
+ ⚙️
+ 正在启动...
+
+
+
+
+ 👆 点击切换开机状态
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/FrontendFrameworkDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/FrontendFrameworkDemo.vue
new file mode 100644
index 0000000..cf41e78
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/FrontendFrameworkDemo.vue
@@ -0,0 +1,190 @@
+
+
+ 能力重要性变化
+ AI 时代，哪些能力更重要了？
+
+
+
+
+
+
+
+
+ 传统时代更重要
+
+
+
+ {{ skill.name }}
+
+ {{ skill.desc }}
+
+
+
+ AI 时代更重要
+
+
+
+ {{ skill.name }}
+
+ {{ skill.desc }}
+
+
+ 关键洞察：AI 能帮你写代码，但判断力、架构思维、领域知识、调试能力是 AI 替代不了的。
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/FrontendTriadDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/FrontendTriadDemo.vue
new file mode 100644
index 0000000..11e5919
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/FrontendTriadDemo.vue
@@ -0,0 +1,158 @@
+
+
+ 前端框架演进
+ 从 jQuery 到现代框架
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ era.name }}
+ {{ era.time }}
+
+ {{ era.desc }}
+
+ {{ tech }}
+
+
+ 框架的本质：解决"数据变化后如何高效更新 UI"的问题。现代框架让你只需关注"数据是什么"，框架自动处理"UI 怎么变"。
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/FullProcessDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/FullProcessDemo.vue
new file mode 100644
index 0000000..6790306
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/FullProcessDemo.vue
@@ -0,0 +1,120 @@
+
+
+ 前端三件套
+ 网页开发的三大基石
+
+
+
+
+
+
+
+ {{ tech.name }}
+ {{ tech.role }}
+ {{ tech.analogy }}
+
+ {{ ex }}
+
+
+ 协作关系：HTML 搭骨架，CSS 穿衣服，JavaScript 让它动起来。三者缺一不可。
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/FullstackSkillDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/FullstackSkillDemo.vue
new file mode 100644
index 0000000..c295ace
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/FullstackSkillDemo.vue
@@ -0,0 +1,134 @@
+
+ 完整流程概览 ── 点击逐步演示
+
+
+
+
+
+
+
+ {{ phase.name }}
+
+ {{ step }}
+
+ 👆 点击查看各阶段
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/LanguageSelectionDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/LanguageSelectionDemo.vue
new file mode 100644
index 0000000..3902ce5
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/LanguageSelectionDemo.vue
@@ -0,0 +1,128 @@
+
+
+ 全栈技能树
+ 前后端通吃的核心能力
+
+
+
+
+
+
+
+
+ 前端能力
+
+
+ {{ skill }}
+
+
+
+ 全栈核心
+
+
+ {{ skill }}
+
+
+ 后端能力
+
+
+ {{ skill }}
+
+ 全栈不等于全部精通：核心是打通前后端，能独立完成一个完整功能。不需要在每个领域都达到专家级别。
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/LearningStrategyDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/LearningStrategyDemo.vue
new file mode 100644
index 0000000..b2c7d8b
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/LearningStrategyDemo.vue
@@ -0,0 +1,134 @@
+
+
+ 语言选择指南
+ 根据目标选语言
+
+
+
+
+
+
+
+ {{ item.goal }}
+ {{ item.desc }}
+
+ 推荐：
+ {{ lang }}
+
+
+ 核心原则：语言只是工具，重要的是解决问题的能力。先精通一门，再触类旁通。
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/MinCpuDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/MinCpuDemo.vue
new file mode 100644
index 0000000..859585f
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/MinCpuDemo.vue
@@ -0,0 +1,386 @@
+
+
+ Vibe Coding 学习策略
+ AI 时代怎么学更高效
+
+
+
+
+
+
+
+ {{ index + 1 }}
+
+
+ {{ strategy.title }}
+ {{ strategy.desc }}
+
+ 核心原则：AI 是你的编程助手，但决策者永远是你。学会提问、学会判断、学会整合，比学会写代码更重要。
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/PowerOnDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/PowerOnDemo.vue
new file mode 100644
index 0000000..1a621c9
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/PowerOnDemo.vue
@@ -0,0 +1,115 @@
+
+ CPU 内部微架构剖析
+ 点击下方各个模块，查看其内部由哪些子电路构成以及工作原理
+
+
+
+
+
+
+
+ CPU 核心 (Central Processing Unit)
+
+ 地址总线 (Address Bus)
+ 数据总线 (Data Bus)
+
+
+
+
+
+
+
+
+ 控制单元 (Control Unit)
+
+
+ 程序计数器 (PC)
+ 指令寄存器 (IR)
+ 指令译码器
+ 时钟发生器
+ 控制信号线 ↓
+
+
+
+
+
+
+
+ 寄存器组 (Register File)
+
+
+ 通用寄存器 R0-R3
+ 累加器 (ACC)
+
+
+ 算术逻辑单元 (ALU)
+
+
+ 加法器电路
+ 状态标志 (Flags)
+ 控制总线 (Control Bus)
+
+
+ {{ currentModuleData.title }}
+{{ currentModuleData.description }}
+
+
+ 🔌 底层子电路实现：
+{{ currentModuleData.subCircuit }}
+
+
+
+ 点击左侧 CPU 内部结构图的各个模块，
深入探索其微观电路实现。
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/ProgrammingLanguageMapDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/ProgrammingLanguageMapDemo.vue
new file mode 100644
index 0000000..ccaf370
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/ProgrammingLanguageMapDemo.vue
@@ -0,0 +1,170 @@
+
+ 电脑启动第一步 ── 点击通电
+
+
+
+
+
+
+
+
+ 电源
+ {{ powerOn ? '✅ 供电中' : '⬜ 等待' }}
+ →
+
+
+
+
+
+ 主板
+ {{ powerOn ? '✅ 唤醒' : '⬜ 等待' }}
+ →
+
+
+
+
+
+ CPU
+ {{ powerOn ? '✅ 复位' : '⬜ 等待' }}
+ →
+
+
+
+
+ BIOS
+ {{ powerOn ? '✅ 启动' : '⬜ 等待' }}
+ 👆 点击切换电源状态
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/RenderingDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/RenderingDemo.vue
new file mode 100644
index 0000000..046297c
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/RenderingDemo.vue
@@ -0,0 +1,131 @@
+
+
+ 编程语言分类
+ 不同维度看语言
+
+
+
+
+
+
+
+
+
+
+
+ {{ item.name }}
+ {{ item.desc }}
+
+ {{ ex }}
+
+
+ 选择建议：先学一门主流语言深入，理解编程思想，再学其他语言会容易很多。
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/computer-fundamentals/URLRequestDemo.vue b/docs/.vitepress/theme/components/appendix/computer-fundamentals/URLRequestDemo.vue
new file mode 100644
index 0000000..f0d8c9e
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/computer-fundamentals/URLRequestDemo.vue
@@ -0,0 +1,133 @@
+
+ 浏览器渲染过程 ── 点击逐步演示
+
+
+
+
+
+
+
+ {{ index + 1 }}
+ {{ stage.name }}
+
+ {{ stage.desc }}
+
+ {{ stage.detail }}
+
+ 👆 点击查看各阶段详情
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/dns-https/CertificateChainDemo.vue b/docs/.vitepress/theme/components/appendix/dns-https/CertificateChainDemo.vue
new file mode 100644
index 0000000..c75f511
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/dns-https/CertificateChainDemo.vue
@@ -0,0 +1,307 @@
+
+ URL 访问流程 ── 点击逐步演示
+
+
+
+
+
+
+ {{ index + 1 }}
+
+
+ {{ step.name }}
+ {{ step.desc }}
+
+ {{ step.detail }}
+
+ 👆 点击查看各步骤详情
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/dns-https/DnsHttpsComparisonDemo.vue b/docs/.vitepress/theme/components/appendix/dns-https/DnsHttpsComparisonDemo.vue
new file mode 100644
index 0000000..fd4c6ba
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/dns-https/DnsHttpsComparisonDemo.vue
@@ -0,0 +1,391 @@
+
+ + 🔗 证书信任链可视化 +
++ 点击每一层证书，查看它的详细信息和在信任链中的角色。 +
+ +
+
+
+
+
+
+ {{ cert.title }}
+ {{ cert.subtitle }}
+
+ 签发
+ ↓
+
+
+
+
+
+
+ {{ certs[selectedIdx].title }}
+
+
+
+
+ {{ item.label }}
+ {{ item.value }}
+
+
+ {{ certs[selectedIdx].explain }}
+
+
+
+ 🔍 浏览器验证流程
+
+
+
+ {{ i + 1 }}
+ {{ s }}
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/dns-https/DnsRecordTypeDemo.vue b/docs/.vitepress/theme/components/appendix/dns-https/DnsRecordTypeDemo.vue
new file mode 100644
index 0000000..7b0f7ab
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/dns-https/DnsRecordTypeDemo.vue
@@ -0,0 +1,249 @@
+
+ + 🔐 HTTP vs HTTPS 数据传输对比 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 浏览器
+
+
+ 原始数据
+ {{ originalData }}
+
+
+
+
+
+
+ {{ mode === 'http' ? '🔓 明文传输' : '🔒 加密传输' }}
+
+
+
+ {{ transmittedData }}
+
+
+
+ 中间人可窃听
+
+
+ {{ originalData }}
+
+
+
+ 中间人无法解密
+
+
+ {{ encryptedData }}
+
+
+
+ 服务器
+
+
+ 收到数据
+ {{ originalData }}
+
+
+
+
+
+ | 对比项 | +HTTP | +HTTPS | +
|---|---|---|
| {{ row.label }} | +{{ row.http }} | +{{ row.https }} | +
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/dns-https/DnsResolutionDemo.vue b/docs/.vitepress/theme/components/appendix/dns-https/DnsResolutionDemo.vue
new file mode 100644
index 0000000..8df8703
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/dns-https/DnsResolutionDemo.vue
@@ -0,0 +1,357 @@
+
+ + 📋 DNS 记录类型速查 +
+
+
+
+
+
+
+
+
+ {{ current.type }}
+ {{ current.name }}
+
+ {{ current.desc }}
+ +
+
+
+ 示例记录
+ {{ current.example }}
+
+
+ 常见用途
+ -
+
- {{ u }} +
+ 小贴士：
+ DNS 不只是把域名翻译成 IP，它还承载了邮件路由、域名验证、负载均衡等多种功能，全靠不同的记录类型来实现。
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/dns-https/HttpsHandshakeDemo.vue b/docs/.vitepress/theme/components/appendix/dns-https/HttpsHandshakeDemo.vue
new file mode 100644
index 0000000..d1a4c9b
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/dns-https/HttpsHandshakeDemo.vue
@@ -0,0 +1,298 @@
+
+ + 🔍 DNS 解析过程模拟器 +
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ step.label }}
+
+ {{ step.result }}
+
+
+ ⏳
+
+
+ →
+
+
+
+
+ ✅ 解析完成
+
+ {{ domain }}
+ →
+ {{ resolvedIp }}
+
+ 总耗时：约 {{ totalTime }}ms（模拟）
+
+ 解析流程说明：
+ 浏览器访问网站时，需要先将域名翻译成 IP
+ 地址。这个过程会依次查询多级缓存和服务器，直到找到对应的 IP。
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/embedding-vector/EmbeddingConceptDemo.vue b/docs/.vitepress/theme/components/appendix/embedding-vector/EmbeddingConceptDemo.vue
new file mode 100644
index 0000000..e0bc6ff
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/embedding-vector/EmbeddingConceptDemo.vue
@@ -0,0 +1,308 @@
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/embedding-vector/EmbeddingPipelineDemo.vue b/docs/.vitepress/theme/components/appendix/embedding-vector/EmbeddingPipelineDemo.vue
new file mode 100644
index 0000000..d602c1a
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/embedding-vector/EmbeddingPipelineDemo.vue
@@ -0,0 +1,453 @@
+
+
+ + 🤝 TLS 握手过程演示 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 客户端（浏览器）
+
+
+
+ 服务器
+
+
+
+
+ {{ messages[currentStep].name }}
+
+
+ {{ messages[currentStep].detail }}
+
+
+ ✅ TLS 握手完成！后续所有 HTTP 数据都将通过对称加密传输，第三方无法窃听。
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/embedding-vector/VectorDatabaseDemo.vue b/docs/.vitepress/theme/components/appendix/embedding-vector/VectorDatabaseDemo.vue
new file mode 100644
index 0000000..d1d526a
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/embedding-vector/VectorDatabaseDemo.vue
@@ -0,0 +1,401 @@
+
+
+
+
+
+ 嵌入生成流水线
+逐步体验从文本到向量的完整转换过程
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ idx + 1 }}
+
+ {{ step.title }}
+ ✓
+
+
+
+
+ {{ step.desc }}
+
+
+ {{ stepOutputs[step.key] }}
+
+ ↓
+
+
+
+ 嵌入向量已生成
+
+
+
+ + 实际嵌入向量通常有 768~1536 个维度，这里仅展示前 16 维的模拟值 +
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/embedding-vector/VectorIndexDemo.vue b/docs/.vitepress/theme/components/appendix/embedding-vector/VectorIndexDemo.vue
new file mode 100644
index 0000000..5fd4c90
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/embedding-vector/VectorIndexDemo.vue
@@ -0,0 +1,443 @@
+
+
+
+
+
+ 主流向量数据库对比
+点击卡片查看详细信息，了解不同向量数据库的特点与适用场景
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ db.name }}
+ {{ db.type }}
+
+
+
+
+ 开源协议
+ {{ db.license }}
+
+
+ 索引算法
+ {{ db.index }}
+
+
+ 最大维度
+ {{ db.maxDim }}
+
+
+ 适用场景
+ {{ db.useCase }}
+
+ {{ db.description }}
+
+
+
+
+ 性能
+
+
+
+ 易用性
+
+
+
+ 扩展性
+
+
+
+ 场景推荐
+
+
+
+
+
+ {{ s.title }}
+ {{ s.recommend }}
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/embedding-vector/VectorSimilarityDemo.vue b/docs/.vitepress/theme/components/appendix/embedding-vector/VectorSimilarityDemo.vue
new file mode 100644
index 0000000..e5cd1fb
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/embedding-vector/VectorSimilarityDemo.vue
@@ -0,0 +1,398 @@
+
+
+
+
+
+ 向量索引策略对比
+对比暴力搜索与近似最近邻搜索的效率差异
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 数据点总数
+ {{ points.length }}
+
+
+ 访问节点数
+
+ {{ visitedOrder.length }}
+
+
+
+ 搜索效率
+
+ {{ points.length > 0 ? ((visitedOrder.length / points.length) * 100).toFixed(0) : 0 }}%
+
+
+
+ 找到最近 K 个
+ {{ resultIndices.length }}
+
+
+
+
+
+ | 策略 | +时间复杂度 | +精确度 | +适用场景 | +
|---|---|---|---|
| 暴力搜索 | +O(n) |
+ 100% | +小数据集 (<10K) | +
| ANN (IVF) | +O(n/k) |
+ ~95% | +大数据集 (>100K) | +
| HNSW | +O(log n) |
+ ~98% | +高性能检索 | +
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/incident-response/AlertEscalationDemo.vue b/docs/.vitepress/theme/components/appendix/incident-response/AlertEscalationDemo.vue
new file mode 100644
index 0000000..7c55161
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/incident-response/AlertEscalationDemo.vue
@@ -0,0 +1,444 @@
+
+
+
+
+
+ 向量相似度计算器
+拖动向量端点，观察不同相似度指标的实时变化
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 余弦相似度
+ {{ cosineSim.toFixed(4) }}
+
+ -1 (相反) ~ 1 (相同)
+
+
+ 欧氏距离
+ {{ euclideanDist.toFixed(2) }}
+
+ 0 (完全重合) ~ ∞ (无穷远)
+
+
+ 点积
+ {{ dotProduct.toFixed(2) }}
+ dot(A, B) = |A||B|cosθ
+
+
+ + 💡 + 余弦相似度只关注方向，不关注长度，适合文本语义比较；欧氏距离同时考虑方向和大小，适合需要绝对距离的场景。 +
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/incident-response/IncidentCommandDemo.vue b/docs/.vitepress/theme/components/appendix/incident-response/IncidentCommandDemo.vue
new file mode 100644
index 0000000..9c94f89
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/incident-response/IncidentCommandDemo.vue
@@ -0,0 +1,356 @@
+
+
+
+
+
+ 告警升级流程 (Alert Escalation)
+ 选择一个场景，观察告警如何逐级升级
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ step.title }}
+ {{ step.time }}
+
+ {{ step.desc }}
+
+ {{ step.action }}
+
+
+
+ 升级规则说明
+
+
+
+
+ P3/P4 告警：仅通知值班工程师，无需升级
+
+
+
+ P2 告警：15 分钟未响应则升级至团队负责人
+
+
+
+ P1 告警：5 分钟未响应升级，30 分钟未解决升级至总监
+
+
+
+ P0 告警：立即通知全链路，15 分钟未缓解升级至 VP/CTO
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/incident-response/IncidentTimelineDemo.vue b/docs/.vitepress/theme/components/appendix/incident-response/IncidentTimelineDemo.vue
new file mode 100644
index 0000000..2ad9349
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/incident-response/IncidentTimelineDemo.vue
@@ -0,0 +1,471 @@
+
+
+
+
+
+ 事故指挥体系 (Incident Command System)
+ 点击角色卡片，了解各角色的职责和协作关系
+
+
+
+
+
+
+
+
+
+ 事故指挥官
+ Incident Commander
+
+
+
+
+
+
+
+
+
+ {{ role.name }}
+ {{ role.eng }}
+
+
+
+
+
+ {{ currentRole.name }}
+
+
+
+
+
+ 核心职责
+
+
+
+ {{ i + 1 }}
+ {{ r }}
+
+
+
+ 关键能力
+
+
+ {{ skill }}
+
+
+
+
+ 常见话术
+
+ "{{ currentRole.quote }}"
+
+
+
+ 模拟场景：支付系统 P0 事故
+
+
+
+ {{ event.time }}
+
+ {{ event.role }}
+
+ {{ event.text }}
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/incident-response/PostmortemDemo.vue b/docs/.vitepress/theme/components/appendix/incident-response/PostmortemDemo.vue
new file mode 100644
index 0000000..34f5be6
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/incident-response/PostmortemDemo.vue
@@ -0,0 +1,412 @@
+
+
+
+
+
+ 事故响应时间线 (Incident Timeline)
+ 点击各阶段，了解每个环节的关键动作
+
+
+
+
+
+
+
+
+
+
+
+ ✓
+ {{ index + 1 }}
+
+ {{ phase.name }}
+ {{ phase.timeHint }}
+
+
+
+
+
+ {{ currentPhase.name }}
+ {{ currentPhase.duration }}
+
+
+
+ {{ currentPhase.description }}
+
+
+ 关键动作：
+
+ {{ i + 1 }}
+ {{ action }}
+
+
+ 参与角色：
+
+ {{ role }}
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/incident-response/SeverityLevelDemo.vue b/docs/.vitepress/theme/components/appendix/incident-response/SeverityLevelDemo.vue
new file mode 100644
index 0000000..cb9fa9e
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/incident-response/SeverityLevelDemo.vue
@@ -0,0 +1,483 @@
+
+
+
+
+
+ 事后复盘：五个为什么 (5 Whys Analysis)
+ 点击"继续追问"，层层深入挖掘根本原因
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ index === 0 ? '现象' : '第 ' + index + ' 个为什么' }}
+
+
+ 深度 {{ index }} / {{ currentCase.whys.length - 1 }}
+
+
+
+ 为什么{{ currentCase.whys[index - 1].answer }}？
+
+
+
+ {{ why.answer }}
+
+
+ ↓ 继续追问
+
+
+
+
+
+
+
+ 根本原因已找到
+ {{ currentCase.rootCause }}
+
+
+ 改进措施：
+
+ ✓
+ {{ action }}
+
+
+
+ 复盘报告模板
+
+
+
+
+
+ {{ i + 1 }}
+ {{ section.name }}
+
+ {{ expandedSection === i ? '−' : '+' }}
+
+
+
+ {{ section.desc }}
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/infrastructure-as-code/ConfigDriftDemo.vue b/docs/.vitepress/theme/components/appendix/infrastructure-as-code/ConfigDriftDemo.vue
new file mode 100644
index 0000000..004d179
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/infrastructure-as-code/ConfigDriftDemo.vue
@@ -0,0 +1,360 @@
+
+
+
+
+ 事故严重程度分级 (Severity Levels)
+ 点击各级别，了解对应的响应要求和真实案例
+
+
+
+
+
+
+
+
+
+ {{ current.id.toUpperCase() }}
+ {{ current.name }}
+
+
+
+
+ 定义
+ {{ current.definition }}
+
+
+ 响应时间
+
+ {{ current.responseTime }}
+
+
+
+ 通知方式
+
+
+ {{ ch }}
+
+
+
+
+ 真实案例
+
+
+
+ {{ ex }}
+
+
+
+ 响应要求
+
+
+
+ ✓
+ {{ req }}
+
+
+
+ 各级别对比一览
+
+
+
+
+
+ | 级别 | +用户影响 | +响应时间 | +值班要求 | +
|---|---|---|---|
| + + {{ level.id.toUpperCase() }} + + | +{{ level.userImpact }} | +{{ level.responseTime }} | +{{ level.oncallReq }} | +
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/infrastructure-as-code/IaCBestPracticeDemo.vue b/docs/.vitepress/theme/components/appendix/infrastructure-as-code/IaCBestPracticeDemo.vue
new file mode 100644
index 0000000..cf61653
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/infrastructure-as-code/IaCBestPracticeDemo.vue
@@ -0,0 +1,329 @@
+
+ 交互演示 ── 配置漂移：无声的定时炸弹
+
+
+
+
+
+
+
+
+
+ {{ event.label }}
+
+
+
+
+
+
+
+
+
+ 期望状态（代码定义）
+
+
+
+
+
+ {{ s.name }}
+ {{ s.config }}
+
+
+
+
+
+ {{ driftText }}
+
+
+
+ 实际状态（线上环境）
+
+
+
+
+
+ {{ s.name }}
+ {{ s.config }}
+ {{ s.driftReason }}
+
+
+ {{ events[step].title }}
+ {{ events[step].detail }}
+
+
+
+
+
+
+
+
+ 关键教训
+
+
+
+
+ {{ lesson.text }}
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/infrastructure-as-code/IaCConceptDemo.vue b/docs/.vitepress/theme/components/appendix/infrastructure-as-code/IaCConceptDemo.vue
new file mode 100644
index 0000000..9952571
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/infrastructure-as-code/IaCConceptDemo.vue
@@ -0,0 +1,301 @@
+
+ 交互演示 ── IaC 最佳实践
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ currentPractice.title }}
+ {{ currentPractice.subtitle }}
+
+
+
+
+
+ ✅ 推荐做法
+
+
+
+ {{ item }}
+
+
+
+ ❌ 反面模式
+
+
+
+ {{ item }}
+
+
+
+
+
+
+ {{ currentPractice.codeTitle }}
+
+ {{ currentPractice.code }}
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/infrastructure-as-code/IaCToolComparisonDemo.vue b/docs/.vitepress/theme/components/appendix/infrastructure-as-code/IaCToolComparisonDemo.vue
new file mode 100644
index 0000000..dc3e6e0
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/infrastructure-as-code/IaCToolComparisonDemo.vue
@@ -0,0 +1,374 @@
+
+ 交互演示 ── 手动运维 vs 基础设施即代码
+
+
+
+
+
+
+
+
+
+
+
+ 手动运维流程
+
+
+
+
+
+ {{ i + 1 }}
+
+ {{ step.text }}
+ {{ step.risk }}
+
+ 手动操作完成，但存在风险：步骤不可重复、无法审计、容易遗漏配置。
+
+
+
+ IaC 代码驱动流程
+
+
+ main.tf
+ {{ iacCode }}
+
+
+
+ →
+ {{ step.icon }}
+ {{ step.text }}
+
+
+ 代码即文档，可重复、可审计、可版本控制，团队协作无忧。
+
+
+
+
+
+
+ | 对比维度 | +手动运维 | +基础设施即代码 | +
|---|---|---|
| {{ row.dim }} | +{{ row.manual }} | +{{ row.iac }} | +
+
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/infrastructure-as-code/TerraformWorkflowDemo.vue b/docs/.vitepress/theme/components/appendix/infrastructure-as-code/TerraformWorkflowDemo.vue
new file mode 100644
index 0000000..872f166
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/infrastructure-as-code/TerraformWorkflowDemo.vue
@@ -0,0 +1,333 @@
+
+ 交互演示 ── 主流 IaC 工具对比
+
+
+ 选择要对比的工具（至少选 2 个）：
+
+
+
+
+
+
+
+
+
+
+
+ | 特性 | ++ + {{ name }} + | +
|---|---|
| {{ feature.label }} | ++ + {{ getToolByName(name).features[feature.key] }} + + | +
+ 请至少选择 2 个工具进行对比
+
+
+
+
+
+
+ {{ selectedDetail.name }}
+
+
+ {{ selectedDetail.desc }}
+
+
+ 示例代码片段：
+ {{ selectedDetail.example }}
+ 点击下方工具名称查看详细介绍和代码示例
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/model-finetuning/FinetuningPipelineDemo.vue b/docs/.vitepress/theme/components/appendix/model-finetuning/FinetuningPipelineDemo.vue
new file mode 100644
index 0000000..03a0fba
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/model-finetuning/FinetuningPipelineDemo.vue
@@ -0,0 +1,333 @@
+
+ 交互演示 ── Terraform 工作流四阶段
+
+
+
+
+
+
+ {{ stage.name }}
+ →
+
+
+
+
+
+
+
+
+
+
+
+ {{ stages[currentStage].title }}
+
+ {{ stages[currentStage].desc }}
+ +
+
+
+
+
+
+
+ Terminal
+
+
+
+
+ {{ line.text }}
+
+ _
+
+
+
+ {{ point.icon }}
+ {{ point.text }}
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/model-finetuning/LoRADemo.vue b/docs/.vitepress/theme/components/appendix/model-finetuning/LoRADemo.vue
new file mode 100644
index 0000000..9151136
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/model-finetuning/LoRADemo.vue
@@ -0,0 +1,512 @@
+
+
+
+
+ 微调流水线演示
+点击每个阶段，了解微调的完整流程
+
+
+
+
+
+
+ {{ step.label }}
+
+
+
+
+
+
+
+ {{ steps[activeStep].icon }} {{ steps[activeStep].label }}
+
+ {{ steps[activeStep].description }}
+ +
+
+
+
+ {{ i + 1 }}
+ {{ point }}
+
+
+
+ 示例
+ {{ steps[activeStep].example }}
+
+
+ {{ activeStep + 1 }} / {{ steps.length }}
+
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/model-finetuning/ModelQuantizationDemo.vue b/docs/.vitepress/theme/components/appendix/model-finetuning/ModelQuantizationDemo.vue
new file mode 100644
index 0000000..3409541
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/model-finetuning/ModelQuantizationDemo.vue
@@ -0,0 +1,345 @@
+
+
+
+
+ LoRA 低秩适配原理演示
+理解 LoRA 如何用极少参数实现高效微调
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 原始权重 W
+ {{ matrixSize }}x{{ matrixSize }}
+
+
+
+ {{ (matrixSize * matrixSize).toLocaleString() }} 参数
+ 冻结不动
+ +
+
+
+
+ LoRA 适配器
+
+
+
+
+ A
+ {{ matrixSize }}x{{ loraRank }}
+
+
+
+ x
+
+
+ B
+ {{ loraRank }}x{{ matrixSize }}
+
+
+
+ {{ loraParams.toLocaleString() }} 参数
+ 可训练
+
+
+
+
+
+ 秩越小 = 参数越少、训练越快
+ 秩越大 = 表达力越强、效果越好
+
+
+
+
+
+
+
+
+
+
+
+ 想象你有一幅巨大的油画（预训练模型）。
+传统微调就像把整幅画重新画一遍——费时费力，还可能破坏原作的精髓。
+而 LoRA 的做法是：在原画上覆盖一层薄薄的透明贴纸，只在贴纸上做修改。原画完好无损，贴纸又轻又薄，随时可以换。
+
+
+
+
+ 对比维度
+ 全量微调
+ LoRA 微调
+
+
+ {{ row.dim }}
+ {{ row.full }}
+ {{ row.lora }}
+
+
+
+
+
+
+ {{ i + 1 }}
+
+
+ {{ step.title }}
+
+
+ {{ step.code }}
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/model-finetuning/ModelServingDemo.vue b/docs/.vitepress/theme/components/appendix/model-finetuning/ModelServingDemo.vue
new file mode 100644
index 0000000..b547606
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/model-finetuning/ModelServingDemo.vue
@@ -0,0 +1,332 @@
+
+
+
+
+ 模型量化演示
+拖动滑块，直观感受不同精度下的模型体积、速度与质量变化
+
+
+
+
+
+ {{ p.label }}
+ {{ p.bits }} bit
+
+
+
+
+
+
+
+ 模型体积
+
+ {{ currentPrecision.size }}
+
+
+
+
+ 推理速度
+
+ {{ currentPrecision.speed }}
+
+
+
+
+ 输出质量
+
+ {{ currentPrecision.quality }}
+
+
+
+ 显存需求
+
+ {{ currentPrecision.vram }}
+
+
+ {{ currentPrecision.label }} 详解
+ {{ currentPrecision.description }}
+ +
+
+
+ 单个参数存储示意
+
+
+ {{ i % 2 === 0 ? '1' : '0' }}
+ 每个参数占用 {{ currentPrecision.bits }} 位 = {{ currentPrecision.bytes }} 字节
+
+ 适用场景：
+ {{ currentPrecision.useCase }}
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/model-finetuning/TrainingDataDemo.vue b/docs/.vitepress/theme/components/appendix/model-finetuning/TrainingDataDemo.vue
new file mode 100644
index 0000000..7047a7f
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/model-finetuning/TrainingDataDemo.vue
@@ -0,0 +1,369 @@
+
+
+
+
+
+
+ 模型服务架构演示
+点击不同部署方案，对比其特点与适用场景
+
+
+
+
+ {{ currentOption.name }}
+
+ {{ currentOption.description }}
+ +
+
+
+ 架构流程
+
+
+
+
+ {{ node }}
+ →
+
+
+
+
+
+ {{ spec.label }}
+ {{ spec.value }}
+
+
+
+ 常用工具
+
+ {{ tool }}
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/rag/ChunkingStrategyDemo.vue b/docs/.vitepress/theme/components/appendix/rag/ChunkingStrategyDemo.vue
new file mode 100644
index 0000000..acc8150
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/rag/ChunkingStrategyDemo.vue
@@ -0,0 +1,439 @@
+
+
+
+
+
+ 训练数据格式演示
+切换不同格式，了解微调数据的组织方式
+
+
+
+
+
+
+
+
+
+ {{ currentFormat.label }}
+ {{ currentFormat.description }}
+ +
+
+
+
+ 数据样例
+
+
+
+
+
+ {{ line.key }}
+ :
+ {{ line.value }}
+
+
+
+ 数据质量要点
+
+
+
+ ✓
+ {{ tip }}
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/rag/RAGArchitectureDemo.vue b/docs/.vitepress/theme/components/appendix/rag/RAGArchitectureDemo.vue
new file mode 100644
index 0000000..4469388
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/rag/RAGArchitectureDemo.vue
@@ -0,0 +1,417 @@
+
+
+
+
+
+
+ 输入文本
+
+
+
+
+
+
+
+
+
+
+ {{ activeStrategy.name }}
+ {{ activeStrategy.desc }}
+
+
+ {{ p }}
+
+
+
+
+
+
+ 分块结果
+ 共 {{ chunks.length }} 个块
+
+
+
+
+
+
+ {{ chunk }}
+
+ 请输入文本后查看分块结果
+
+
+
+
+
+
+ | 策略 | +优点 | +缺点 | +适用场景 | +
|---|---|---|---|
| {{ s.icon }} {{ s.name }} | +{{ s.pros }} | +{{ s.cons }} | +{{ s.useCase }} | +
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/rag/RAGPipelineDemo.vue b/docs/.vitepress/theme/components/appendix/rag/RAGPipelineDemo.vue
new file mode 100644
index 0000000..a8e7894
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/rag/RAGPipelineDemo.vue
@@ -0,0 +1,349 @@
+
+
+
+
+
+
+
+ {{ activeArch.desc }}
+
+
+
+
+
+
+
+
+
+
+ {{ node.label }}
+
+ →
+ {{ node.connectorLabel }}
+
+
+
+
+ {{ activeArch.nodes[selectedNode].icon }}
+ {{ activeArch.nodes[selectedNode].label }}
+
+
+ {{ activeArch.nodes[selectedNode].detail }}
+
+
+ 点击流程节点查看详细说明
+
+
+
+
+
+
+ 架构特点
+
+
+
+
+ {{ f.text }}
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/rag/RAGvsFineTuningDemo.vue b/docs/.vitepress/theme/components/appendix/rag/RAGvsFineTuningDemo.vue
new file mode 100644
index 0000000..43c31ce
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/rag/RAGvsFineTuningDemo.vue
@@ -0,0 +1,409 @@
+
+
+
+ 选择问题：
+
+
+
+
+
+
+
+
+
+ {{ stage.name }}
+
+ {{ getStageContent(i) }}
+
+
+ →
+
+
+
+
+ {{ stages[currentStep]?.name }} — 详细说明
+ {{ stages[currentStep]?.desc }}
+
+
+ 检索到的文档片段：
+
+ 相关度 {{ doc.score }}
+ {{ doc.text }}
+
+
+
+ {{ currentStep + 1 }} / {{ stages.length }}
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/components/appendix/rag/RetrievalDemo.vue b/docs/.vitepress/theme/components/appendix/rag/RetrievalDemo.vue
new file mode 100644
index 0000000..1337e7e
--- /dev/null
+++ b/docs/.vitepress/theme/components/appendix/rag/RetrievalDemo.vue
@@ -0,0 +1,549 @@
+
+
+
+
+
+
+
+
+ RAG 检索增强生成
+ VS
+ Fine-tuning 微调
+
+
+ {{ dim.name }}
+
+
+
+
+
+
+ {{ dim.ragText }}
+
+
+
+ {{ dim.ftText }}
+
+
+
+ 你的需求是什么？
+
+
+
+
+
+
+ {{ s.name }}
+ {{ s.desc }}
+
+ {{ s.recommend === 'rag' ? '推荐 RAG' : s.recommend === 'ft' ? '推荐微调' : '两者结合' }}
+
+
+
+ {{ scenarios[selectedScenario].name }} — 详细分析
+ {{ scenarios[selectedScenario].reason }}
+
+
+ 一句话总结
+
+ RAG 像是给模型配了一个实时更新的参考书库，适合知识频繁变化的场景；
+ 微调像是让模型上了一门专业课，适合需要特定风格或领域深度的场景。
+ 实际项目中，两者常常结合使用。
+
+
+
+
+
+
+
+
diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js
index b5957f8..365a5ed 100644
--- a/docs/.vitepress/theme/index.js
+++ b/docs/.vitepress/theme/index.js
@@ -120,6 +120,7 @@ import AdderChainDemo from './components/appendix/computer-fundamentals/AdderCha
import CompleteAdderDemo from './components/appendix/computer-fundamentals/CompleteAdderDemo.vue'
import FunctionalUnitDemo from './components/appendix/computer-fundamentals/FunctionalUnitDemo.vue'
import CpuArchitectureDemo from './components/appendix/computer-fundamentals/CpuArchitectureDemo.vue'
+import MinCpuDemo from './components/appendix/computer-fundamentals/MinCpuDemo.vue'
import RegisterDemo from './components/appendix/computer-fundamentals/RegisterDemo.vue'
import FlipFlopDemo from './components/appendix/computer-fundamentals/FlipFlopDemo.vue'
// import EvolutionFlowDemo from './components/appendix/computer-fundamentals/EvolutionFlowDemo.vue'
@@ -171,6 +172,26 @@ import GraphStructureDemo from './components/appendix/computer-fundamentals/Grap
import LanguageTypeModelDemo from './components/appendix/computer-fundamentals/LanguageTypeModelDemo.vue'
import CompilationPracticeDemo from './components/appendix/computer-fundamentals/CompilationPracticeDemo.vue'
+// Vibe Coding Fullstack Components
+import DeveloperSkillShiftDemo from './components/appendix/computer-fundamentals/DeveloperSkillShiftDemo.vue'
+import ComputerFieldMapDemo from './components/appendix/computer-fundamentals/ComputerFieldMapDemo.vue'
+import FrontendTriadDemo from './components/appendix/computer-fundamentals/FrontendTriadDemo.vue'
+import FrontendFrameworkDemo from './components/appendix/computer-fundamentals/FrontendFrameworkDemo.vue'
+import BackendCoreDemo from './components/appendix/computer-fundamentals/BackendCoreDemo.vue'
+import ProgrammingLanguageMapDemo from './components/appendix/computer-fundamentals/ProgrammingLanguageMapDemo.vue'
+import LanguageSelectionDemo from './components/appendix/computer-fundamentals/LanguageSelectionDemo.vue'
+import FullstackSkillDemo from './components/appendix/computer-fundamentals/FullstackSkillDemo.vue'
+import AIvsTraditionalDemo from './components/appendix/computer-fundamentals/AIvsTraditionalDemo.vue'
+import CareerPathDemo from './components/appendix/computer-fundamentals/CareerPathDemo.vue'
+import LearningStrategyDemo from './components/appendix/computer-fundamentals/LearningStrategyDemo.vue'
+import PowerOnDemo from './components/appendix/computer-fundamentals/PowerOnDemo.vue'
+import BootProcessDemo from './components/appendix/computer-fundamentals/BootProcessDemo.vue'
+import DesktopDemo from './components/appendix/computer-fundamentals/DesktopDemo.vue'
+import BrowserArchitectureDemo from './components/appendix/computer-fundamentals/BrowserArchitectureDemo.vue'
+import URLRequestDemo from './components/appendix/computer-fundamentals/URLRequestDemo.vue'
+import RenderingDemo from './components/appendix/computer-fundamentals/RenderingDemo.vue'
+import FullProcessDemo from './components/appendix/computer-fundamentals/FullProcessDemo.vue'
+
// Data Encoding Components
import GarbledTextDemo from './components/appendix/data-encoding/GarbledTextDemo.vue'
import CharacterEncodingExplorer from './components/appendix/data-encoding/CharacterEncodingExplorer.vue'
@@ -668,6 +689,55 @@ import ABTestingDemo from './components/appendix/data/ABTestingDemo.vue'
import DataAnalysisDemo from './components/appendix/data/DataAnalysisDemo.vue'
import DataTrackingDemo from './components/appendix/data/DataTrackingDemo.vue'
+// RAG Components
+import RAGPipelineDemo from './components/appendix/rag/RAGPipelineDemo.vue'
+import ChunkingStrategyDemo from './components/appendix/rag/ChunkingStrategyDemo.vue'
+import RetrievalDemo from './components/appendix/rag/RetrievalDemo.vue'
+import RAGArchitectureDemo from './components/appendix/rag/RAGArchitectureDemo.vue'
+import RAGvsFineTuningDemo from './components/appendix/rag/RAGvsFineTuningDemo.vue'
+
+// Embedding & Vector Components
+import EmbeddingConceptDemo from './components/appendix/embedding-vector/EmbeddingConceptDemo.vue'
+import VectorSimilarityDemo from './components/appendix/embedding-vector/VectorSimilarityDemo.vue'
+import VectorIndexDemo from './components/appendix/embedding-vector/VectorIndexDemo.vue'
+import VectorDatabaseDemo from './components/appendix/embedding-vector/VectorDatabaseDemo.vue'
+import EmbeddingPipelineDemo from './components/appendix/embedding-vector/EmbeddingPipelineDemo.vue'
+
+// AI Native App Components
+import AINativeArchDemo from './components/appendix/ai-native-app/AINativeArchDemo.vue'
+import AIDesignPrincipleDemo from './components/appendix/ai-native-app/AIDesignPrincipleDemo.vue'
+import PromptDesignDemo from './components/appendix/ai-native-app/PromptDesignDemo.vue'
+import AIUXPatternDemo from './components/appendix/ai-native-app/AIUXPatternDemo.vue'
+import AIAppFlowDemo from './components/appendix/ai-native-app/AIAppFlowDemo.vue'
+
+// Infrastructure as Code Components
+import IaCConceptDemo from './components/appendix/infrastructure-as-code/IaCConceptDemo.vue'
+import TerraformWorkflowDemo from './components/appendix/infrastructure-as-code/TerraformWorkflowDemo.vue'
+import IaCToolComparisonDemo from './components/appendix/infrastructure-as-code/IaCToolComparisonDemo.vue'
+import ConfigDriftDemo from './components/appendix/infrastructure-as-code/ConfigDriftDemo.vue'
+import IaCBestPracticeDemo from './components/appendix/infrastructure-as-code/IaCBestPracticeDemo.vue'
+
+// DNS & HTTPS Components
+import DnsResolutionDemo from './components/appendix/dns-https/DnsResolutionDemo.vue'
+import DnsRecordTypeDemo from './components/appendix/dns-https/DnsRecordTypeDemo.vue'
+import HttpsHandshakeDemo from './components/appendix/dns-https/HttpsHandshakeDemo.vue'
+import CertificateChainDemo from './components/appendix/dns-https/CertificateChainDemo.vue'
+import DnsHttpsComparisonDemo from './components/appendix/dns-https/DnsHttpsComparisonDemo.vue'
+
+// Model Finetuning Components
+import FinetuningPipelineDemo from './components/appendix/model-finetuning/FinetuningPipelineDemo.vue'
+import TrainingDataDemo from './components/appendix/model-finetuning/TrainingDataDemo.vue'
+import LoRADemo from './components/appendix/model-finetuning/LoRADemo.vue'
+import ModelQuantizationDemo from './components/appendix/model-finetuning/ModelQuantizationDemo.vue'
+import ModelServingDemo from './components/appendix/model-finetuning/ModelServingDemo.vue'
+
+// Incident Response Components
+import SeverityLevelDemo from './components/appendix/incident-response/SeverityLevelDemo.vue'
+import IncidentTimelineDemo from './components/appendix/incident-response/IncidentTimelineDemo.vue'
+import IncidentCommandDemo from './components/appendix/incident-response/IncidentCommandDemo.vue'
+import AlertEscalationDemo from './components/appendix/incident-response/AlertEscalationDemo.vue'
+import PostmortemDemo from './components/appendix/incident-response/PostmortemDemo.vue'
+
export default {
extends: DefaultTheme,
Layout,
@@ -787,6 +857,7 @@ export default {
app.component('CompleteAdderDemo', CompleteAdderDemo)
app.component('FunctionalUnitDemo', FunctionalUnitDemo)
app.component('CpuArchitectureDemo', CpuArchitectureDemo)
+ app.component('MinCpuDemo', MinCpuDemo)
app.component('RegisterDemo', RegisterDemo)
app.component('FlipFlopDemo', FlipFlopDemo)
// app.component('EvolutionFlowDemo', EvolutionFlowDemo)
@@ -844,6 +915,26 @@ export default {
app.component('LanguageTypeModelDemo', LanguageTypeModelDemo)
app.component('CompilationPracticeDemo', CompilationPracticeDemo)
+ // Vibe Coding Fullstack Components Registration
+ app.component('DeveloperSkillShiftDemo', DeveloperSkillShiftDemo)
+ app.component('ComputerFieldMapDemo', ComputerFieldMapDemo)
+ app.component('FrontendTriadDemo', FrontendTriadDemo)
+ app.component('FrontendFrameworkDemo', FrontendFrameworkDemo)
+ app.component('BackendCoreDemo', BackendCoreDemo)
+ app.component('ProgrammingLanguageMapDemo', ProgrammingLanguageMapDemo)
+ app.component('LanguageSelectionDemo', LanguageSelectionDemo)
+ app.component('FullstackSkillDemo', FullstackSkillDemo)
+ app.component('AIvsTraditionalDemo', AIvsTraditionalDemo)
+ app.component('CareerPathDemo', CareerPathDemo)
+ app.component('LearningStrategyDemo', LearningStrategyDemo)
+ app.component('PowerOnDemo', PowerOnDemo)
+ app.component('BootProcessDemo', BootProcessDemo)
+ app.component('DesktopDemo', DesktopDemo)
+ app.component('BrowserArchitectureDemo', BrowserArchitectureDemo)
+ app.component('URLRequestDemo', URLRequestDemo)
+ app.component('RenderingDemo', RenderingDemo)
+ app.component('FullProcessDemo', FullProcessDemo)
+
// Data Encoding Components Registration
app.component('GarbledTextDemo', GarbledTextDemo)
app.component('CharacterEncodingExplorer', CharacterEncodingExplorer)
@@ -1353,6 +1444,55 @@ export default {
app.component('LicenseComparisonDemo', LicenseComparisonDemo)
app.component('TechRadarDemo', TechRadarDemo)
app.component('DecisionMatrixDemo', DecisionMatrixDemo)
+
+ // RAG Components Registration
+ app.component('RAGPipelineDemo', RAGPipelineDemo)
+ app.component('ChunkingStrategyDemo', ChunkingStrategyDemo)
+ app.component('RetrievalDemo', RetrievalDemo)
+ app.component('RAGArchitectureDemo', RAGArchitectureDemo)
+ app.component('RAGvsFineTuningDemo', RAGvsFineTuningDemo)
+
+ // Embedding & Vector Components Registration
+ app.component('EmbeddingConceptDemo', EmbeddingConceptDemo)
+ app.component('VectorSimilarityDemo', VectorSimilarityDemo)
+ app.component('VectorIndexDemo', VectorIndexDemo)
+ app.component('VectorDatabaseDemo', VectorDatabaseDemo)
+ app.component('EmbeddingPipelineDemo', EmbeddingPipelineDemo)
+
+ // AI Native App Components Registration
+ app.component('AINativeArchDemo', AINativeArchDemo)
+ app.component('AIDesignPrincipleDemo', AIDesignPrincipleDemo)
+ app.component('PromptDesignDemo', PromptDesignDemo)
+ app.component('AIUXPatternDemo', AIUXPatternDemo)
+ app.component('AIAppFlowDemo', AIAppFlowDemo)
+
+ // Infrastructure as Code Components Registration
+ app.component('IaCConceptDemo', IaCConceptDemo)
+ app.component('TerraformWorkflowDemo', TerraformWorkflowDemo)
+ app.component('IaCToolComparisonDemo', IaCToolComparisonDemo)
+ app.component('ConfigDriftDemo', ConfigDriftDemo)
+ app.component('IaCBestPracticeDemo', IaCBestPracticeDemo)
+
+ // DNS & HTTPS Components Registration
+ app.component('DnsResolutionDemo', DnsResolutionDemo)
+ app.component('DnsRecordTypeDemo', DnsRecordTypeDemo)
+ app.component('HttpsHandshakeDemo', HttpsHandshakeDemo)
+ app.component('CertificateChainDemo', CertificateChainDemo)
+ app.component('DnsHttpsComparisonDemo', DnsHttpsComparisonDemo)
+
+ // Model Finetuning Components Registration
+ app.component('FinetuningPipelineDemo', FinetuningPipelineDemo)
+ app.component('TrainingDataDemo', TrainingDataDemo)
+ app.component('LoRADemo', LoRADemo)
+ app.component('ModelQuantizationDemo', ModelQuantizationDemo)
+ app.component('ModelServingDemo', ModelServingDemo)
+
+ // Incident Response Components Registration
+ app.component('SeverityLevelDemo', SeverityLevelDemo)
+ app.component('IncidentTimelineDemo', IncidentTimelineDemo)
+ app.component('IncidentCommandDemo', IncidentCommandDemo)
+ app.component('AlertEscalationDemo', AlertEscalationDemo)
+ app.component('PostmortemDemo', PostmortemDemo)
},
setup() {
const route = useRoute()
diff --git a/docs/zh-cn/appendix/1-computer-fundamentals/algorithm-thinking.md b/docs/zh-cn/appendix/1-computer-fundamentals/algorithm-thinking.md
index f09ca1f..c035d7d 100644
--- a/docs/zh-cn/appendix/1-computer-fundamentals/algorithm-thinking.md
+++ b/docs/zh-cn/appendix/1-computer-fundamentals/algorithm-thinking.md
@@ -1,9 +1,24 @@
# 算法思维入门
-::: tip 🎯 核心问题
+::: tip 前言
**如何高效地解决问题？** 你可能遇到过这样的困惑：同一个问题，有人写的代码跑几秒就出结果，有人写的跑几分钟还在转。差别往往在于算法。本章带你理解算法的核心思维方式。
:::
+**这篇文章会带你学什么？**
+
+学完这章后，你将获得：
+
+- **问题拆解能力**：面对复杂问题，能想到用分治、递归等策略拆解，而不是一上来就写代码
+- **效率判断能力**：用大 O 表示法判断两种解法哪个更高效，而不是凭感觉猜测
+- **复杂度思维**：写代码前先估算数据规模和时间要求，选择合适的算法级别
+- **后续学习基础**：为高级数据结构、分布式系统、机器学习打下基础
+
+| 章节 | 内容 | 核心概念 |
+|-----|------|---------|
+| **第 1 章** | 二分查找 | 分治思想、O(log n) |
+| **第 2 章** | 排序算法 | 冒泡、快排、归并 |
+| **第 3 章** | 复杂度分析 | 时间复杂度、空间复杂度 |
+
---
## 0. 全景图：算法是什么？
diff --git a/docs/zh-cn/appendix/1-computer-fundamentals/computer-networks.md b/docs/zh-cn/appendix/1-computer-fundamentals/computer-networks.md
index 1e4d112..b31a13b 100644
--- a/docs/zh-cn/appendix/1-computer-fundamentals/computer-networks.md
+++ b/docs/zh-cn/appendix/1-computer-fundamentals/computer-networks.md
@@ -16,6 +16,8 @@
**这篇文章会带你学什么？**
+学完这章后，你将掌握从输入网址到页面显示的完整技术流程，理解浏览器与服务器如何协同工作。这些知识是后续学习 API、接口、网络安全等技术的基石，也是排查"网页打不开"、"加载慢"等日常问题的关键。
+
| 章节 | 内容 | 核心概念 |
|-----|------|---------|
| **第 1 章** | URL 解析 | 网址的结构和作用 |
diff --git a/docs/zh-cn/appendix/1-computer-fundamentals/data-encoding-storage.md b/docs/zh-cn/appendix/1-computer-fundamentals/data-encoding-storage.md
index 276278f..8aa1863 100644
--- a/docs/zh-cn/appendix/1-computer-fundamentals/data-encoding-storage.md
+++ b/docs/zh-cn/appendix/1-computer-fundamentals/data-encoding-storage.md
@@ -1,10 +1,23 @@
# 什么是数据的编码与传输？
-> 💡 **学习指南**：当你给朋友发一张照片、发一条微信，或者下载一个几 GB 的游戏时，这些信息是怎么穿过大半个地球、完好无损地出现在你的屏幕上的？
->
-> 本章节会围绕一个经常困扰新手的问题展开：**为什么我收到的文件变成了乱码？**
->
-> 顺着这个问题，我们将彻底揭开计算机底层最核心的三大基石：**编码、存储与传输**。
+::: tip 前言
+当你给朋友发一张照片、发一条微信，或者下载一个几 GB 的游戏时，这些信息是怎么穿过大半个地球、完好无损地出现在你的屏幕上的？本章节会围绕一个经常困扰新手的问题展开：**为什么我收到的文件变成了乱码？** 顺着这个问题，我们将彻底揭开计算机底层最核心的三大基石：**编码、存储与传输**。
+:::
+
+**这篇文章会带你学什么？**
+
+学完这章后，你将获得：
+
+- **乱码排查能力**：遇到"文件打开是乱码"时，能从编码角度分析原因，而不是简单认为"文件坏了"
+- **跨平台意识**：处理数据交换时，知道为什么要关注编码格式和字节序
+- **编码世界观**：理解计算机如何用 0 和 1 表示世间万物——从文字到图像到复杂对象
+- **后续学习基础**：为网络协议、文件格式、序列化技术打下基础
+
+| 章节 | 内容 | 核心概念 |
+|-----|------|---------|
+| **第 1 章** | 字符编码 | ASCII、UTF-8、GBK |
+| **第 2 章** | 数据存储 | 二进制、字节序 |
+| **第 3 章** | 数据传输 | 序列化、压缩 |
在开始之前，我们需要先明确一个经常被新手忽略的物理事实：
diff --git a/docs/zh-cn/appendix/1-computer-fundamentals/data-structures.md b/docs/zh-cn/appendix/1-computer-fundamentals/data-structures.md
index 608d03b..df0b1d4 100644
--- a/docs/zh-cn/appendix/1-computer-fundamentals/data-structures.md
+++ b/docs/zh-cn/appendix/1-computer-fundamentals/data-structures.md
@@ -1,9 +1,25 @@
# 数据结构
-::: tip 🎯 核心问题
+::: tip 前言
**如何高效地组织和存储数据？** 你可能遇到过这样的困惑：为什么有些程序处理几万条数据很快，有些处理几百条就卡住了？答案往往在于数据结构的选择。本章带你理解常见数据结构的特点和适用场景。
:::
+**这篇文章会带你学什么？**
+
+学完这章后，你将获得：
+
+- **选型决策能力**：知道什么时候用数组快速访问，什么时候用链表灵活插入
+- **性能分析视角**：能判断性能问题是数据结构选择不当，还是算法效率低下
+- **权衡思维**：理解"空间换时间"与"时间换空间"，知道没有完美的数据结构
+- **后续学习基础**：为数据库、缓存系统、搜索引擎等技术打下基础
+
+| 章节 | 内容 | 核心概念 |
+|-----|------|---------|
+| **第 1 章** | 线性结构 | 数组、链表、栈、队列 |
+| **第 2 章** | 哈希结构 | 哈希表、冲突处理 |
+| **第 3 章** | 树形结构 | 二叉树、B树、堆 |
+| **第 4 章** | 图结构 | 有向图、无向图、遍历算法 |
+
---
## 0. 全景图：数据结构是什么？
diff --git a/docs/zh-cn/appendix/1-computer-fundamentals/operating-systems.md b/docs/zh-cn/appendix/1-computer-fundamentals/operating-systems.md
index 739890a..55e56ae 100644
--- a/docs/zh-cn/appendix/1-computer-fundamentals/operating-systems.md
+++ b/docs/zh-cn/appendix/1-computer-fundamentals/operating-systems.md
@@ -1,12 +1,27 @@
# 操作系统：给电脑请个"大管家"
-::: tip 🎯 核心问题
+::: tip 前言
**有了完美的 CPU 和无限的内存，电脑就能直接用了吗？**
在上一章，我们见证了晶体管如何组合成强大的 CPU。但即使你拥有最顶级的硬件，如果直接让它们工作，连在屏幕上显示一个字母都需要写几百行晦涩的机器指令。不仅麻烦，还极其危险——稍有差池，你的代码就可能把别人的数据覆盖掉。
为了解决这些噩梦，**操作系统（Operating System, 简称 OS）**诞生了。它是挡在你和冰冷硬件之间的一层最伟大的"软件"。本章我们将抛开深奥的代码，用通俗的比喻，看看这个"超级管家"是如何把杂乱无章的硬件调教得服服帖帖的。
:::
+**这篇文章会带你学什么？**
+
+学完这章后，你将获得：
+
+- **问题排查能力**：遇到"程序卡死"、"内存不足"时，能从操作系统层面分析原因
+- **术语理解深度**：理解"多进程"、"虚拟内存"、"文件权限"解决的是什么问题
+- **系统观思维**：理解程序不是孤立运行的，而是与操作系统、其他进程、硬件资源密切交互
+- **后续学习基础**：为并发编程、系统调优、容器技术打下基础
+
+| 章节 | 内容 | 核心概念 |
+|-----|------|---------|
+| **第 1 章** | 进程管理 | CPU 时分复用、时间片轮转 |
+| **第 2 章** | 内存管理 | 虚拟内存、分页机制 |
+| **第 3 章** | 文件系统 | 文件组织、目录结构 |
+
---
## 0. 全景图：没有操作系统会怎样？
diff --git a/docs/zh-cn/appendix/1-computer-fundamentals/power-on-to-web.md b/docs/zh-cn/appendix/1-computer-fundamentals/power-on-to-web.md
new file mode 100644
index 0000000..d6035c6
--- /dev/null
+++ b/docs/zh-cn/appendix/1-computer-fundamentals/power-on-to-web.md
@@ -0,0 +1,452 @@
+# 从按下电源到访问网站发生了什么
+
+::: tip 前言
+你有没有想过，当你按下电脑电源键，到最终在浏览器中看到网页，这中间到底发生了什么？
+
+这个过程涉及**硬件启动**、**操作系统加载**、**网络通信**等多个环节。理解这个过程，能帮助你建立对计算机系统的整体认知，也是成为全栈工程师的必经之路。
+:::
+
+**你会学到什么？**
+
+- 电脑从通电到显示桌面的完整过程
+- 操作系统是如何启动的
+- 浏览器是如何工作的
+- 当你访问一个 URL 时，网络请求是如何完成的
+
+---
+
+## 1. 按下电源：硬件的觉醒
+
+### 1.1 电源启动
+
+当你按下电源键，**电源单元（PSU）** 开始工作，把交流电（220V）转换成直流电（12V、5V、3.3V 等），为各个硬件部件供电。
+
+```
+电源按钮 → 电源单元(PSU) → 直流电输出 → 供给主板各部件
+```
+
+### 1.2 主板芯片组唤醒
+
+电源稳定后，**主板芯片组**开始工作，它就像电脑的"总调度员"，负责协调各个硬件部件。
+
+### 1.3 CPU 复位
+
+CPU 接收到复位信号后，把内部所有寄存器和缓存清零，从一个预设的地址开始执行指令。这个地址通常指向 **BIOS/UEFI** 芯片。
+
+
+ 选择查询：
+
+
+
+
+
+
+
+
+ {{ i + 1 }}
+ {{ step.name }}
+
+
+
+
+
+
+
+ {{ steps[currentStep].name }}
+ {{ steps[currentStep].desc }}
+
+
+
+
+
+
+
+
+ {{ doc.text }}
+
+
+ {{ doc.similarity.toFixed(2) }}
+
+
+
+
+
+
+
+
+
+ 初始排序（向量相似度）
+
+ #{{ i + 1 }}
+ {{ doc.text }}
+ {{ doc.similarity.toFixed(2) }}
+
+ →
+
+
+ 重排序后（交叉编码器）
+
+ #{{ i + 1 }}
+ {{ doc.text }}
+ {{ doc.rerankScore.toFixed(2) }}
+
+
+
+
+
+
+ Top-K 值：
+
+
+
+
+
+ #{{ i + 1 }}
+ {{ doc.text }}
+ 已选中
+
+