feat(appendix): 添加多个交互式演示组件，完善 AI/Infra 等章节内容

- 新增 Vibe Coding 全栈相关演示组件 (DeveloperSkillShift, FrontendTriad, BackendCore 等)
- 新增 RAG 相关组件 (RAGPipeline, ChunkingStrategy, Retrieval 等)
- 新增 Embedding & Vector 相关组件 (EmbeddingConcept, VectorSimilarity 等)
- 新增 AI Native App 设计组件 (AINativeArch, PromptDesign 等)
- 新增 Infrastructure as Code 组件 (IaCConcept, TerraformWorkflow 等)
- 新增 DNS & HTTPS 演示组件 (DnsResolution, HttpsHandshake 等)
- 新增 Model Finetuning 组件 (FinetuningPipeline 等)
- 更新多个章节的 markdown 内容，集成交互式演示

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 章** | 数据传输 | 序列化、压缩 |
 
 在开始之前，我们需要先明确一个经常被新手忽略的物理事实：