feat(docs): restructure appendix content into organized directories

- Move standalone AI-related files into 8-artificial-intelligence directory - Move development tools content into 2-development-tools directory - Move server/backend content into 4-server-and-backend directory - Create new index files for each section - Update .gitignore to exclude old backup directories - Update theme imports for new component locations
2026-02-15 01:57:52 +08:00
parent 004496f1d5
commit 07d82d046b
120 changed files with 409 additions and 405 deletions
@@ -344,7 +344,7 @@ export default defineConfig({
            text: '高级开发',
            link: '/zh-cn/stage-3/intro'
          },
-          { text: '附录', link: '/zh-cn/appendix/intro' }
+          { text: '附录', link: '/zh-cn/appendix/index' }
        ],
        sidebar: {
          '/zh-cn/stage-0/': productManagerSidebar,
@@ -570,152 +570,155 @@ export default defineConfig({
          ],
          '/zh-cn/appendix/': [
            {
-              text: '人工智能基础',
+              text: '一、计算机是怎么回事',
              collapsed: false,
              items: [
-                {
-                  text: '提示词工程',
-                  link: '/zh-cn/appendix/prompt-engineering'
-                },
-                {
-                  text: '人工智能进化史',
-                  link: '/zh-cn/appendix/ai-evolution'
-                },
-                { text: '大语言模型', link: '/zh-cn/appendix/llm-intro' },
-                { text: '多模态大模型', link: '/zh-cn/appendix/vlm-intro' },
-                {
-                  text: 'AI 绘画原理',
-                  link: '/zh-cn/appendix/image-gen-intro'
-                },
-                { text: 'AI 音频模型', link: '/zh-cn/appendix/audio-intro' },
-                {
-                  text: '上下文工程',
-                  link: '/zh-cn/appendix/context-engineering'
-                },
-                { text: 'Agent 智能体', link: '/zh-cn/appendix/agent-intro' },
-                {
-                  text: 'AI 能力词典',
-                  link: '/zh-cn/appendix/ai-capability-dictionary'
-                }
+                { text: '从晶体管到 CPU', link: '/zh-cn/appendix/1-computer-fundamentals/transistor-to-cpu' },
+                { text: '操作系统（进程 / 内存 / 文件系统）', link: '/zh-cn/appendix/1-computer-fundamentals/operating-systems' },
+                { text: '数据的编码、存储与传输', link: '/zh-cn/appendix/1-computer-fundamentals/data-encoding-storage' },
+                { text: '网络：两台电脑如何对话', link: '/zh-cn/appendix/1-computer-fundamentals/computer-networks' },
+                { text: '数据结构', link: '/zh-cn/appendix/1-computer-fundamentals/data-structures' },
+                { text: '算法思维入门', link: '/zh-cn/appendix/1-computer-fundamentals/algorithm-thinking' },
+                { text: '编程语言图谱', link: '/zh-cn/appendix/1-computer-fundamentals/programming-languages' },
+                { text: '类型系统与编译原理入门', link: '/zh-cn/appendix/1-computer-fundamentals/type-systems-compilers' }
              ]
            },
            {
-              text: '前端开发',
+              text: '二、开发环境与工具',
              collapsed: false,
              items: [
-                {
-                  text: 'HTML/CSS/JS 基础',
-                  link: '/zh-cn/appendix/web-basics'
-                },
-                {
-                  text: '前端进化史',
-                  link: '/zh-cn/appendix/frontend-evolution'
-                },
-                {
-                  text: '前端性能优化',
-                  link: '/zh-cn/appendix/frontend-performance'
-                },
-                {
-                  text: 'Canvas 2D 入门',
-                  link: '/zh-cn/appendix/canvas-intro'
-                },
-                {
-                  text: 'URL 到浏览器显示',
-                  link: '/zh-cn/appendix/url-to-browser'
-                },
-                {
-                  text: '浏览器调试器',
-                  link: '/zh-cn/appendix/browser-devtools'
-                },
-                {
-                  text: '浏览器渲染原理',
-                  link: '/zh-cn/appendix/browser-rendering-pipeline'
-                },
-                {
-                  text: '前端路由原理',
-                  link: '/zh-cn/appendix/frontend-routing'
-                },
-                {
-                  text: '组件状态管理',
-                  link: '/zh-cn/appendix/component-state-management'
-                },
-                {
-                  text: '前端工程化',
-                  link: '/zh-cn/appendix/frontend-engineering'
-                }
+                { text: '命令行与 Shell 脚本', link: '/zh-cn/appendix/2-development-tools/command-line-shell' },
+                { text: '编辑器与 AI 编程助手', link: '/zh-cn/appendix/2-development-tools/editors-and-ai' },
+                { text: 'Git：代码的时光机', link: '/zh-cn/appendix/2-development-tools/git-version-control' },
+                { text: '环境变量与 PATH', link: '/zh-cn/appendix/2-development-tools/environment-path' },
+                { text: '端口与 localhost', link: '/zh-cn/appendix/2-development-tools/ports-localhost' },
+                { text: 'SSH 与密钥认证', link: '/zh-cn/appendix/2-development-tools/ssh-authentication' },
+                { text: '包管理器（npm / pip / cargo）', link: '/zh-cn/appendix/2-development-tools/package-managers' },
+                { text: '调试的艺术', link: '/zh-cn/appendix/2-development-tools/debugging-art/' },
+                { text: '正则表达式', link: '/zh-cn/appendix/2-development-tools/regex' }
              ]
            },
            {
-              text: '后端开发',
+              text: '三、浏览器与前端',
              collapsed: false,
              items: [
-                {
-                  text: '后端进化史',
-                  link: '/zh-cn/appendix/backend-evolution'
-                },
-                {
-                  text: '后端分层架构',
-                  link: '/zh-cn/appendix/backend-layered-architecture'
-                },
-                {
-                  text: '后端编程语言',
-                  link: '/zh-cn/appendix/backend-languages'
-                },
-                {
-                  text: '并发编程模型',
-                  link: '/zh-cn/appendix/concurrency-models'
-                },
-                {
-                  text: '接口设计规范',
-                  link: '/zh-cn/appendix/api-design'
-                },
-                { text: '数据库原理', link: '/zh-cn/appendix/database-intro' },
-                { text: '系统缓存设计', link: '/zh-cn/appendix/cache-design' },
-                { text: '消息队列设计', link: '/zh-cn/appendix/queue-design' },
-                { text: '鉴权原理与实战', link: '/zh-cn/appendix/auth-design' },
-                {
-                  text: '网关与反向代理',
-                  link: '/zh-cn/appendix/gateway-proxy'
-                },
-                {
-                  text: '负载均衡策略',
-                  link: '/zh-cn/appendix/load-balancing'
-                },
-                { text: '埋点设计', link: '/zh-cn/appendix/tracking-design' },
-                { text: '线上运维', link: '/zh-cn/appendix/operations' }
+                { text: 'JavaScript 语言深入', link: '/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive' },
+                { text: 'TypeScript：给 JS 加上类型系统', link: '/zh-cn/appendix/3-browser-and-frontend/typescript' },
+                { text: '前端框架对比（React / Vue / Svelte / Angular）', link: '/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks' },
+                { text: '浏览器是一个操作系统', link: '/zh-cn/appendix/3-browser-and-frontend/browser-as-os' },
+                { text: '浏览器渲染管道', link: '/zh-cn/appendix/3-browser-and-frontend/browser-as-os-rendering' },
+                { text: 'HTML / CSS 布局体系', link: '/zh-cn/appendix/3-browser-and-frontend/html-css-layout' },
+                { text: 'JavaScript 运行时', link: '/zh-cn/appendix/3-browser-and-frontend/javascript-runtime' },
+                { text: '前端框架的本质', link: '/zh-cn/appendix/3-browser-and-frontend/frontend-framework-nature' },
+                { text: '状态管理哲学', link: '/zh-cn/appendix/3-browser-and-frontend/state-management' },
+                { text: '路由与导航', link: '/zh-cn/appendix/3-browser-and-frontend/routing-navigation' },
+                { text: '图形与动画（Canvas / SVG / WebGL）', link: '/zh-cn/appendix/3-browser-and-frontend/graphics-animation' },
+                { text: '实时通信（WebSocket / SSE）', link: '/zh-cn/appendix/3-browser-and-frontend/realtime-communication' },
+                { text: '网页性能的度量与优化', link: '/zh-cn/appendix/3-browser-and-frontend/web-performance' },
+                { text: '前端工程化全貌', link: '/zh-cn/appendix/3-browser-and-frontend/frontend-engineering' },
+                { text: '无障碍与国际化', link: '/zh-cn/appendix/3-browser-and-frontend/a11n-i18n' }
              ]
            },
            {
-              text: '云计算与服务',
+              text: '四、服务器与后端',
              collapsed: false,
              items: [
-                {
-                  text: '云服务基础',
-                  link: '/zh-cn/appendix/cloud-services'
-                },
-                {
-                  text: 'IAM 权限管理',
-                  link: '/zh-cn/appendix/cloud-iam'
-                },
-                {
-                  text: '对象存储与 CDN',
-                  link: '/zh-cn/appendix/cloud-storage-cdn'
-                }
+                { text: '后端语言对比（Node.js / Go / Java / Rust）', link: '/zh-cn/appendix/4-server-and-backend/backend-languages' },
+                { text: '客户端语言对比（Swift / Kotlin / Dart）', link: '/zh-cn/appendix/4-server-and-backend/client-languages' },
+                { text: '跨平台方案对比（React Native / Flutter / Electron / Tauri）', link: '/zh-cn/appendix/4-server-and-backend/cross-platform' },
+                { text: 'HTTP 协议', link: '/zh-cn/appendix/4-server-and-backend/http-protocol' },
+                { text: '一个请求的完整旅程', link: '/zh-cn/appendix/4-server-and-backend/request-journey' },
+                { text: 'Web 框架的本质', link: '/zh-cn/appendix/4-server-and-backend/web-frameworks' },
+                { text: 'API 设计哲学（REST / GraphQL / gRPC）', link: '/zh-cn/appendix/4-server-and-backend/api-design' },
+                { text: 'API 入门', link: '/zh-cn/appendix/4-server-and-backend/api-intro' },
+                { text: '序列化与数据格式', link: '/zh-cn/appendix/4-server-and-backend/serialization' },
+                { text: '认证与授权体系', link: '/zh-cn/appendix/4-server-and-backend/auth-authorization' },
+                { text: '并发、异步与多线程', link: '/zh-cn/appendix/4-server-and-backend/concurrency-async' },
+                { text: '缓存的层次与策略', link: '/zh-cn/appendix/4-server-and-backend/caching' },
+                { text: '消息队列与事件驱动', link: '/zh-cn/appendix/4-server-and-backend/message-queues' },
+                { text: '异步任务队列与生产消费模型', link: '/zh-cn/appendix/4-server-and-backend/async-task-queues' },
+                { text: '限流与背压控制', link: '/zh-cn/appendix/4-server-and-backend/rate-limiting-backpressure' },
+                { text: '搜索引擎原理', link: '/zh-cn/appendix/4-server-and-backend/search-engines' },
+                { text: '文件存储与对象存储', link: '/zh-cn/appendix/4-server-and-backend/file-storage' },
+                { text: '后端分层架构', link: '/zh-cn/appendix/4-server-and-backend/backend-layered-architecture' }
              ]
            },
            {
-              text: '通用技能',
+              text: '五、数据',
              collapsed: false,
              items: [
-                { text: 'API 入门', link: '/zh-cn/appendix/api-intro' },
-                { text: 'IDE 原理', link: '/zh-cn/appendix/ide-intro' },
-                { text: '终端入门', link: '/zh-cn/appendix/terminal-intro' },
-                { text: 'Git 详细介绍', link: '/zh-cn/appendix/git-intro' },
-                {
-                  text: '计算机网络',
-                  link: '/zh-cn/appendix/computer-networks'
-                },
-                { text: '部署与上线', link: '/zh-cn/appendix/deployment' }
+                { text: 'SQL', link: '/zh-cn/appendix/5-data/sql' },
+                { text: '数据库原理（索引 / 事务 / 查询优化）', link: '/zh-cn/appendix/5-data/database-fundamentals' },
+                { text: '数据模型全景（文档 / 图 / 时序 / 向量）', link: '/zh-cn/appendix/5-data/data-models' },
+                { text: '数据埋点与用户行为采集', link: '/zh-cn/appendix/5-data/data-tracking' },
+                { text: '数据分析基础（统计 / 指标 / 漏斗）', link: '/zh-cn/appendix/5-data/data-analysis' },
+                { text: 'A/B 测试与实验驱动', link: '/zh-cn/appendix/5-data/ab-testing' },
+                { text: '数据可视化与仪表盘', link: '/zh-cn/appendix/5-data/data-visualization' },
+                { text: '数据治理与数据质量', link: '/zh-cn/appendix/5-data/data-governance' }
+              ]
+            },
+            {
+              text: '六、架构与系统设计',
+              collapsed: false,
+              items: [
+                { text: '从单体到微服务的演进', link: '/zh-cn/appendix/6-architecture-and-system-design/monolith-to-microservices' },
+                { text: '分布式系统的挑战', link: '/zh-cn/appendix/6-architecture-and-system-design/distributed-systems' },
+                { text: '高可用与容灾', link: '/zh-cn/appendix/6-architecture-and-system-design/high-availability' },
+                { text: '系统设计方法论', link: '/zh-cn/appendix/6-architecture-and-system-design/system-design-methodology' }
+              ]
+            },
+            {
+              text: '七、基础设施与运维',
+              collapsed: false,
+              items: [
+                { text: 'Linux 基础', link: '/zh-cn/appendix/7-infrastructure-and-operations/linux-basics' },
+                { text: 'Docker 容器化', link: '/zh-cn/appendix/7-infrastructure-and-operations/docker-containers' },
+                { text: 'Kubernetes 编排', link: '/zh-cn/appendix/7-infrastructure-and-operations/kubernetes' },
+                { text: 'CI / CD 自动化', link: '/zh-cn/appendix/7-infrastructure-and-operations/ci-cd' },
+                { text: '域名、DNS 与 HTTPS', link: '/zh-cn/appendix/7-infrastructure-and-operations/dns-https' },
+                { text: '负载均衡与网关', link: '/zh-cn/appendix/7-infrastructure-and-operations/load-balancing-gateway' },
+                { text: '网关与反向代理', link: '/zh-cn/appendix/7-infrastructure-and-operations/gateway-proxy' },
+                { text: '云平台实战', link: '/zh-cn/appendix/7-infrastructure-and-operations/cloud-platforms' },
+                { text: 'IAM 权限管理', link: '/zh-cn/appendix/7-infrastructure-and-operations/cloud-iam' },
+                { text: '对象存储与 CDN', link: '/zh-cn/appendix/7-infrastructure-and-operations/cloud-storage-cdn' },
+                { text: '基础设施即代码', link: '/zh-cn/appendix/7-infrastructure-and-operations/infrastructure-as-code' },
+                { text: '监控、日志与告警', link: '/zh-cn/appendix/7-infrastructure-and-operations/monitoring-logging' },
+                { text: '故障排查与应急响应', link: '/zh-cn/appendix/7-infrastructure-and-operations/incident-response' }
+              ]
+            },
+            {
+              text: '八、人工智能',
+              collapsed: false,
+              items: [
+                { text: 'AI 简史与核心概念', link: '/zh-cn/appendix/8-artificial-intelligence/ai-history' },
+                { text: '神经网络与深度学习', link: '/zh-cn/appendix/8-artificial-intelligence/neural-networks' },
+                { text: 'Transformer 与注意力机制', link: '/zh-cn/appendix/8-artificial-intelligence/transformer-attention' },
+                { text: '大语言模型的工作原理', link: '/zh-cn/appendix/8-artificial-intelligence/llm-principles' },
+                { text: '提示词工程', link: '/zh-cn/appendix/8-artificial-intelligence/prompt-engineering' },
+                { text: '上下文工程', link: '/zh-cn/appendix/8-artificial-intelligence/context-engineering' },
+                { text: '多模态模型（视觉 / 音频 / 视频）', link: '/zh-cn/appendix/8-artificial-intelligence/multimodal-models' },
+                { text: '图像生成原理', link: '/zh-cn/appendix/8-artificial-intelligence/image-generation' },
+                { text: '语音合成与识别', link: '/zh-cn/appendix/8-artificial-intelligence/speech-synthesis-recognition' },
+                { text: 'Embedding 与向量检索', link: '/zh-cn/appendix/8-artificial-intelligence/embedding-vector-retrieval' },
+                { text: 'RAG 架构', link: '/zh-cn/appendix/8-artificial-intelligence/rag' },
+                { text: 'AI Agent 与工具调用', link: '/zh-cn/appendix/8-artificial-intelligence/ai-agents' },
+                { text: 'AI 协议（MCP 等）', link: '/zh-cn/appendix/8-artificial-intelligence/ai-protocols' },
+                { text: '模型微调与部署', link: '/zh-cn/appendix/8-artificial-intelligence/model-finetuning-deployment' },
+                { text: 'AI 原生应用设计', link: '/zh-cn/appendix/8-artificial-intelligence/ai-native-app-design' },
+                { text: 'AI 能力词典', link: '/zh-cn/appendix/8-artificial-intelligence/ai-capability-dictionary' }
+              ]
+            },
+            {
+              text: '九、工程素养',
+              collapsed: false,
+              items: [
+                { text: '代码质量与重构', link: '/zh-cn/appendix/9-engineering-excellence/code-quality-refactoring' },
+                { text: '测试策略', link: '/zh-cn/appendix/9-engineering-excellence/testing-strategies' },
+                { text: '设计模式', link: '/zh-cn/appendix/9-engineering-excellence/design-patterns' },
+                { text: '安全思维与攻防基础', link: '/zh-cn/appendix/9-engineering-excellence/security-thinking' },
+                { text: '技术文档写作', link: '/zh-cn/appendix/9-engineering-excellence/technical-writing' },
+                { text: '开源协作', link: '/zh-cn/appendix/9-engineering-excellence/open-source-collaboration' },
+                { text: '技术选型方法论', link: '/zh-cn/appendix/9-engineering-excellence/technology-selection' }
              ]
            }
          ]
@@ -81,6 +81,12 @@ import AudioWaveformDemo from './components/appendix/audio-intro/AudioWaveformDe
 import AudioTokenizationDemo from './components/appendix/audio-intro/AudioTokenizationDemo.vue'
 import SpectrogramViz from './components/appendix/audio-intro/SpectrogramViz.vue'
 import AutoregressiveAudioDemo from './components/appendix/audio-intro/AutoregressiveAudioDemo.vue'
+import AudioQuickStartDemo from './components/appendix/audio-intro/AudioQuickStartDemo.vue'
+import MelSpectrogramDemo from './components/appendix/audio-intro/MelSpectrogramDemo.vue'
+import TTSPipelineDemo from './components/appendix/audio-intro/TTSPipelineDemo.vue'
+import VoiceCloningDemo from './components/appendix/audio-intro/VoiceCloningDemo.vue'
+import ASRvsTTSDemo from './components/appendix/audio-intro/ASRvsTTSDemo.vue'
+import EmotionControlDemo from './components/appendix/audio-intro/EmotionControlDemo.vue'

 // Web Basics Components
 import WebTechTriad from './components/appendix/web-basics/WebTechTriad.vue'
@@ -122,6 +128,9 @@ import TcpHandshakeDemo from './components/appendix/web-basics/TcpHandshakeDemo.
 import UrlParserDemo from './components/appendix/web-basics/UrlParserDemo.vue'
 import HttpExchangeDemo from './components/appendix/web-basics/HttpExchangeDemo.vue'
 import BrowserRenderingDemo from './components/appendix/web-basics/BrowserRenderingDemo.vue'
+
+// URL to Browser Components
+import UrlToBrowserQuickStart from './components/appendix/url-to-browser/UrlToBrowserQuickStart.vue'
 import FrontendEvolutionDemo from './components/appendix/web-basics/FrontendEvolutionDemo.vue'
 import SliceRequestDemo from './components/appendix/web-basics/SliceRequestDemo.vue'
 import ResponsiveGridDemo from './components/appendix/web-basics/ResponsiveGridDemo.vue'
@@ -550,10 +559,17 @@ export default {
    app.component('AudioTokenizationDemo', AudioTokenizationDemo)
    app.component('SpectrogramViz', SpectrogramViz)
    app.component('AutoregressiveAudioDemo', AutoregressiveAudioDemo)
+    app.component('AudioQuickStartDemo', AudioQuickStartDemo)
+    app.component('MelSpectrogramDemo', MelSpectrogramDemo)
+    app.component('TTSPipelineDemo', TTSPipelineDemo)
+    app.component('VoiceCloningDemo', VoiceCloningDemo)
+    app.component('ASRvsTTSDemo', ASRvsTTSDemo)
+    app.component('EmotionControlDemo', EmotionControlDemo)

    // Web Basics Components Registration
    app.component('WebTechTriad', WebTechTriad)
    app.component('UrlToBrowserDemo', UrlToBrowserDemo)
+    app.component('UrlToBrowserQuickStart', UrlToBrowserQuickStart)
    app.component('GitWorkflowDemo', GitWorkflowDemo)
    app.component('GitThreeAreasDemo', GitThreeAreasDemo)
    app.component('GitStorageDemo', GitStorageDemo)
@@ -0,0 +1,3 @@
+# 算法思维入门
+
+> 待实现
@@ -1,5 +1,4 @@
-# 计算机网络:互联网的运作原理
-
+# 网络：两台电脑如何对话
 ::: tip 🎯 核心问题
 **当你在浏览器输入 www.baidu.com 并按下回车,到底发生了什么?** 这个简单动作背后,其实隐藏着一个庞大的"快递系统":从填写订单(URL)到查询地址簿(DNS),从建立运输通道(TCP)到快递员送货(HTTP),最终在你屏幕上展示(渲染)。本章带你完整理解这个神奇的过程。
 :::
@@ -0,0 +1,3 @@
+# 数据的编码、存储与传输
+
+> 待实现
@@ -0,0 +1,3 @@
+# 数据结构
+
+> 待实现
@@ -0,0 +1,3 @@
+# 操作系统（进程 / 内存 / 文件系统）
+
+> 待实现
@@ -0,0 +1,3 @@
+# 编程语言图谱
+
+> 待实现
@@ -0,0 +1,3 @@
+# 从晶体管到 CPU
+
+> 待实现
@@ -0,0 +1,3 @@
+# 类型系统与编译原理入门
+
+> 待实现
@@ -1,5 +1,4 @@
-# 终端原理 (Introduction to Terminal Principles)
-
+# 命令行与 Shell 脚本
 > 💡 **学习指南**：本章节旨在为零基础读者提供一个关于终端（Terminal）工作原理的系统性认知。无需具备计算机专业背景，我们将通过交互式演示，由浅入深地解析终端的运行机制。

 ## 0. 快速上手：如何打开终端？
@@ -0,0 +1,2 @@
+# 调试的艺术
+> 待实现
@@ -0,0 +1,3 @@
+# 编辑器与 AI 编程助手
+
+> 待实现
@@ -0,0 +1,3 @@
+# 环境变量与 PATH
+
+> 待实现
@@ -1,5 +1,4 @@
-# Git 版本控制:代码世界的时光机
-
+# Git：代码的时光机
 ::: tip 🎯 核心问题
 **写代码时最怕什么?** 写错了想回退、改崩了想重来、多人同时改同一个文件...这些头疼的事,Git 都能帮你搞定!它就像是代码世界的"时光机",让你随时回到过去,又能和队友在各自的"平行宇宙"里安全开发。
 :::
@@ -181,9 +181,9 @@ onMounted(() => {

 为了方便大家理解每个选项的含义，在这里我们对菜单栏进行深入解析：

-![](images/index-2026-01-09-11-35-55.png)
+![](editors-and-ai/images/index-2026-01-09-11-35-55.png)

-![](images/index-2026-01-09-11-36-23.png)
+![](editors-and-ai/images/index-2026-01-09-11-36-23.png)

 <details class="custom-block details" id="vscode-file-menu">
  <summary>File（文件）：项目与文件的打开/保存/工作区管理</summary>
@@ -0,0 +1,3 @@
+# 包管理器（npm / pip / cargo）
+
+> 待实现
@@ -0,0 +1,3 @@
+# 端口与 localhost
+
+> 待实现
@@ -0,0 +1,3 @@
+# 正则表达式
+
+> 待实现
@@ -0,0 +1,3 @@
+# SSH 与密钥认证
+
+> 待实现
@@ -0,0 +1,3 @@
+# 无障碍与国际化
+
+> 待实现
@@ -1,5 +1,4 @@
-# 浏览器渲染管线与事件循环
-
+# 浏览器渲染管道
 ::: tip 🎯 核心问题
 **为什么有些网页流畅如丝，有些却卡成PPT？** 浏览器是怎么把一堆HTML、CSS、JavaScript代码变成你眼前看到的网页的？本章将带你深入浏览器的"车间"，理解它的工作流程，从而写出性能更好的网页。
 :::
@@ -1,8 +1,4 @@
-# 从 URL 到网页显示：一次网络"快递"之旅
-
-<script setup>
-import UrlToBrowserQuickStart from '../../.vitepress/theme/components/appendix/url-to-browser/UrlToBrowserQuickStart.vue'
-</script>
+# 浏览器是一个操作系统

 > **学习指南**：本章节无需编程基础。我们将用**"网购"**的生活化比喻，配合**真实的技术过程**，带你一步步理解浏览器如何将一行网址变成丰富多彩的页面。

@@ -1,5 +1,4 @@
-# 前端工程化与构建流水线
-
+# 前端工程化全貌
 ::: tip 🎯 核心问题
 **如何把你写的代码，变成用户浏览器能跑的网站？** 这就像是问：如何把原材料变成成品，还要保证质量、控制成本？本章将带你深入理解前端工程化的核心概念和构建流程。
 :::
@@ -0,0 +1,3 @@
+# 前端框架的本质
+
+> 待实现
@@ -1,5 +1,4 @@
-# 前端开发演进史:从"贴海报"到"搭乐高"
-
+# 前端框架对比（React / Vue / Svelte / Angular）
 ::: tip 🎯 核心问题
 **为什么网页越来越复杂?前端技术为什么要不断演进?** 这个问题会带你理解从简单网页到现代 Web 应用的技术演变之路。
 :::
@@ -1,5 +1,4 @@
-# Canvas 2D 入门:从像素到动画
-
+# 图形与动画（Canvas / SVG / WebGL）
 ::: tip 🎯 核心问题
 **如何在网页上画图、做动画、甚至开发游戏?** Canvas 提供了一个强大的 2D 绘图能力,让你用代码创造视觉内容。
 :::
@@ -1,5 +1,4 @@
-# HTML/CSS/JavaScript 基础 (Web Basics)
-
+# HTML / CSS 布局体系
 ::: tip 🎯 核心问题
 **网页是怎么做出来的？为什么有的网页只有文字，有的却像应用一样可以交互？** 这个问题会引出 Web 开发的三大基石，让你理解每一个网页背后的结构。
 :::
@@ -0,0 +1,3 @@
+# JavaScript 语言深入
+
+> 待实现
@@ -0,0 +1,3 @@
+# JavaScript 运行时
+
+> 待实现
@@ -0,0 +1,3 @@
+# 实时通信（WebSocket / SSE）
+
+> 待实现
@@ -1,5 +1,4 @@
-# 前端路由：单页应用的导航系统
-
+# 路由与导航
 ::: tip 🎯 核心问题
 **为什么有些网站切换页面时不会白屏刷新，像 App 一样流畅？** 这就是前端路由的魔法。本章将带你从传统网站的"翻书式跳转"，进入到单页应用的"幻灯片切换"世界，理解前端路由如何让用户体验提升一个档次。
 :::
@@ -1,5 +1,4 @@
-# 组件化与状态管理模式总览
-
+# 状态管理哲学
 ::: tip 🎯 核心问题
 **当应用越来越大，组件之间该如何优雅地共享和同步数据？** 你可能会遇到这样的困境：用户在商品页添加了购物车，但头部的购物车数量没更新；两个不相关的组件需要同一份数据，却不知道该怎么传递。本章将带你从"混乱的数据传递"进化到"清晰的状态管理"。
 :::
@@ -0,0 +1,3 @@
+# TypeScript：给 JS 加上类型系统
+
+> 待实现
@@ -1,5 +1,4 @@
-# 前端性能优化
-
+# 网页性能的度量与优化
 ::: tip 🎯 核心问题
 **为什么你的网页加载很慢，用户还在疯狂抱怨卡顿？** 这就像是问：为什么餐厅上菜慢、顾客等得不耐烦？本章将带你深入理解前端性能优化的核心概念，让你的网页"飞"起来。
 :::
@@ -1,5 +1,4 @@
-# API 设计与错误处理:请求、响应与状态码结构
-
+# API 设计哲学（REST / GraphQL / gRPC）
 ::: tip 🎯 核心问题
 **前后端如何高效对话?** 这就像问:餐厅的菜单怎么设计,客人一看就懂?服务员怎么记单,不会出错?上菜怎么规范,客人满意?API 设计解决的就是"对话规则"的问题。
 :::
@@ -1,5 +1,4 @@
 # API 入门
-
 <ApiQuickStartDemo />

 👆 看见了吗？点一下按钮，230 毫秒后，一句格言就回来了。
@@ -0,0 +1,3 @@
+# 异步任务队列与生产消费模型
+
+> 待实现
@@ -1,5 +1,4 @@
-# 鉴权原理与实战：从 HTTP Basic 到 JWT (Interactive Guide to Authentication)
-
+# 认证与授权体系
 > 💡 **学习指南**：本章节带你深入理解后端系统的"门禁系统"——鉴权与授权。我们将从最基础的"你是谁"讲起，一步步掌握 Session、JWT、OAuth2.0 等现代鉴权方案。

 <AuthEvolutionDemo />
@@ -1,5 +1,4 @@
-# 后端编程语言选型指南：从问题出发做决策
-
+# 后端语言对比（Node.js / Go / Java / Rust）
 ::: tip 🎯 核心问题
 **"我们后端该用什么语言？"** 这就像问："我应该买什么工具？" 答案永远不是"最好的"，而是"最适合你的"。本章将带你全面了解主流后端编程语言的特点、应用场景和选择策略，帮助你做出明智的决策。
 :::
@@ -1,5 +1,4 @@
-# 后端分层架构:Controller / Service / Repository / Domain
-
+# 后端分层架构
 ::: tip 🎯 核心问题
 **代码越写越乱,怎么组织才能清晰易懂?** 这就像问:你是把所有食材、厨具、调料都扔在一个抽屉里,还是用橱柜、冰箱、抽屉分类摆放?分层架构就是让代码"物归其位"的方法。
 :::
@@ -1,5 +1,4 @@
-# 缓存系统设计：从零到高性能架构
-
+# 缓存的层次与策略
 ::: tip 🎯 核心问题
 **为什么有些网站打开只需 50 毫秒，而有些却要等 5 秒？** 这就像问：为什么从书包拿书只要 1 秒，而要去图书馆找书要 10 分钟？答案就是——缓存。本章将带你深入理解缓存的核心原理、设计模式和实战技巧，让你的系统性能提升 100 倍。
 :::
@@ -0,0 +1,3 @@
+# 客户端语言对比（Swift / Kotlin / Dart）
+
+> 待实现
@@ -1,5 +1,4 @@
-# 进程 / 线程 / 协程与服务并发模型
-
+# 并发、异步与多线程
 > 💡 **学习指南**：并发编程是很多后端工程师的"阿喀琉斯之踵"——面试被问倒、线上出 Bug、性能调优没思路。本章节会围绕一个核心问题展开：**当10万个用户同时请求你的服务，你的代码会崩吗？**

 在开始之前，建议你先补两块"基础砖"：
@@ -0,0 +1,3 @@
+# 跨平台方案对比（React Native / Flutter / Electron / Tauri）
+
+> 待实现
@@ -0,0 +1,3 @@
+# 文件存储与对象存储
+
+> 待实现
@@ -0,0 +1,3 @@
+# HTTP 协议
+
+> 待实现
@@ -1,5 +1,4 @@
-# 消息队列设计:从系统解耦到高可用架构
-
+# 消息队列与事件驱动
 ::: tip 🎯 核心问题
 **当系统耦合严重、流量突增时,如何保证核心链路稳定?** 消息队列是现代分布式系统的"缓冲器"和"解耦器"。本文通过真实案例(餐厅叫号、快递分拣、秒杀系统)深入理解消息队列的设计哲学和工程实践。
 :::
@@ -0,0 +1,3 @@
+# 限流与背压控制
+
+> 待实现
@@ -0,0 +1,3 @@
+# 一个请求的完整旅程
+
+> 待实现
@@ -0,0 +1,3 @@
+# 搜索引擎原理
+
+> 待实现
@@ -0,0 +1,3 @@
+# 序列化与数据格式
+
+> 待实现
@@ -1,5 +1,4 @@
-# 后端架构演进：从单机到云原生
-
+# Web 框架的本质
 ::: tip 🎯 核心问题
 **代码写好了,怎么让全世界的人都能访问?** 这就像问:你是想开一家路边小摊,还是经营一家跨国连锁餐厅?后端架构的选择,决定了你的"餐厅"能服务多少顾客。
 :::
@@ -0,0 +1,3 @@
+# A/B 测试与实验驱动
+
+> 待实现
@@ -0,0 +1,3 @@
+# 数据分析基础（统计 / 指标 / 漏斗）
+
+> 待实现
@@ -0,0 +1,3 @@
+# 数据治理与数据质量
+
+> 待实现
@@ -0,0 +1,3 @@
+# 数据模型全景（文档 / 图 / 时序 / 向量）
+
+> 待实现
@@ -1,5 +1,4 @@
-# 埋点设计：从原理到实战 (Interactive Guide to Event Tracking)
-
+# 数据埋点与用户行为采集
 > 💡 **学习指南**：本章节带你深入理解数据采集的基石——埋点设计。我们将从最基础的"为什么要埋点"讲起，一步步掌握埋点方案、数据模型、处理流程，以及实战中的坑与解决方案。

 <TrackingOverviewDemo />
@@ -0,0 +1,3 @@
+# 数据可视化与仪表盘
+
+> 待实现
@@ -1,5 +1,4 @@
-# 数据库原理入门：为什么淘宝能在 0.01 秒内找到你的订单？
-
+# 数据库原理（索引 / 事务 / 查询优化）
 ::: tip 🎯 核心问题
 **为什么你的 Excel 查询要 10 秒，而淘宝搜索只要 0.01 秒？** 当数据从"几千条"变成"十亿条"，从"单人使用"变成"千万人同时访问"，Excel 就不够用了。数据库就是为解决这个问题而生的——它是专门处理海量数据、高并发访问的"超级 Excel"。本章将带你从零开始理解数据库的核心原理。
 :::
@@ -0,0 +1,3 @@
+# SQL
+
+> 待实现
@@ -0,0 +1,3 @@
+# 分布式系统的挑战
+
+> 待实现
@@ -0,0 +1,3 @@
+# 高可用与容灾
+
+> 待实现
@@ -0,0 +1,3 @@
+# 从单体到微服务的演进
+
+> 待实现
@@ -0,0 +1,3 @@
+# 系统设计方法论
+
+> 待实现
@@ -1,5 +1,4 @@
-# 服务上线之旅：从零开始的完整指南
-
+# CI / CD 自动化
 ::: tip 🎯 核心问题
 **代码在本地跑得好好的，怎么让全世界的人都能访问？**
 :::
@@ -1,5 +1,4 @@
-# 云账号与权限管理模型：IAM / RAM 角色与权限关系
-
+# 云身份与权限管理
 > **学习指南**：提示词工程解决的是"怎么把话说清楚"，云账号权限管理解决的是"谁能做什么事"。本章节会围绕一个问题展开：**在云端世界里，如何既能方便地授权，又不把钥匙交给不该给的人？**

 在开始之前，建议你先补两块"基础砖"：
@@ -1,5 +1,4 @@
-# 云服务厂商入门指南 (Cloud Services Guide)
-
+# 云平台实战
 > **学习指南**：云服务厂商不是"买服务器的网站"，而是"像水电公司一样提供计算能力的基础设施"。本章节会围绕一个核心问题展开：**从零开始，如何理解并使用云服务？** 我们会用真实场景、生动类比和实战步骤，帮你建立云服务的完整认知地图。

 在开始之前，建议你先了解：
@@ -1,5 +1,4 @@
-# 对象存储 + CDN 加速路径：从上传到用户访问
-
+# 对象存储与 CDN
 > 💡 **学习指南**：本文会带你走完一条完整的链路——从文件上传到用户下载。你会看到对象存储如何像"智能仓库"一样管理海量文件，CDN 如何像"快递网点"一样把内容送到用户家门口，以及这中间有哪些"坑"等着你跳进去。建议先了解基础的 HTTP 请求和 DNS 解析原理。

 在开始之前，建议你先补几块"基础砖"：
@@ -0,0 +1,3 @@
+# 域名、DNS 与 HTTPS
+
+> 待实现
@@ -0,0 +1,3 @@
+# Docker 容器化
+
+> 待实现
@@ -1,5 +1,4 @@
-# 反向代理与网关:Nginx / API Gateway 在系统中的位置
-
+# 网关与反向代理
 ::: tip 🎯 核心问题
 **在高并发的互联网架构中,如何把流量安全、高效地送到正确的服务?** 反向代理解决"流量怎么分发",API网关解决"请求怎么处理"。本文通过真实案例(前台接待、保安系统、智能路由)深入理解网关的设计哲学和工程实践。
 :::
@@ -0,0 +1,3 @@
+# 故障排查与应急响应
+
+> 待实现
@@ -0,0 +1,3 @@
+# 基础设施即代码
+
+> 待实现
@@ -0,0 +1,3 @@
+# Kubernetes 编排
+
+> 待实现
@@ -0,0 +1,3 @@
+# Linux 基础
+
+> 待实现
@@ -1,5 +1,4 @@
-# 负载均衡与多实例部署
-
+# 负载均衡与网关
 ::: tip 🎯 核心问题
 **当单台服务器扛不住时,如何把流量"聪明地"分配到多个服务器实例?** 负载均衡是现代分布式系统的"分发员"。本文通过真实案例(奶茶店收银、快递分拣、交通指挥)深入理解负载均衡的设计哲学和工程实践。
 :::
@@ -1,5 +1,4 @@
-# 线上运维：从监控到故障排查 (Interactive Guide to Operations)
-
+# 监控、日志与告警
 > 💡 **学习指南**：本章节无需编程基础，通过交互式演示带你了解运维的完整知识体系。从监控告警到故障排查，从容量规划到自动化运维，全面掌握线上系统运维技能。

 ## 0. 引言：系统上线只是开始
@@ -1,5 +1,4 @@
-# Agent 智能体入门 (Interactive Intro to AI Agent)
-
+# AI Agent 与工具调用
 > 💡 **学习指南**：本章节无需编程基础，通过交互式演示带你深入了解 AI Agent（智能体）的工作原理。我们将从最基本的"工具调用"讲起，一直到 Agent 是如何规划、记忆和协作的。

 <AgentQuickStartDemo />
@@ -1,5 +1,4 @@
-# AI 词典：主流模型、产品形态与应用场景一览
-
+# AI 能力词典
 随着生成式 AI 技术在各类产品和业务场景中的广泛落地，一个越来越现实的问题摆在每个我们面前： **到底有哪些 AI 能力可以用？** 在具体的需求里，又 **该选择哪一种能力、哪一类模型或哪一个产品来承载？**

 面对这种困惑，最直观的做法或许是 “临时抱佛脚”：**遇到需求再搜索市面上云服务厂商的产品 API，或者是对应模型，搜索市面上的商业级解决方案对照文档与 Demo进行处理** 。看到图片需求就想到图像生成，碰到文本任务就找来大模型，涉及语音交互就想起 ASR 和 TTS，再在海量 API 与服务中货比三家。然而，把零散的产品堆在一起，与在企业级场景中系统性地规划、选型和组合 AI 能力，是两件截然不同的事情。仅靠临时查资料与经验判断，会带来能力认知碎片化、方案设计随意、能力复用困难等一系列严峻挑战。
@@ -1,5 +1,4 @@
-# 人工智能进化史：从"教它规则"到"让它创造"
-
+# AI 简史与核心概念
 > 💡 **学习指南**：本章节通过交互式演示，带你回顾 AI 如何从“只会算数的机器”进化成“能写诗的艺术家”。
 >
 > 我们将聚焦于三次核心的思维跃迁：从**教它规则**，到**让它模仿**，最终实现**让它创造**。同时，我们也会梳理关键的历史节点，带你理清技术发展的脉络。
@@ -0,0 +1,3 @@
+# AI 原生应用设计
+
+> 待实现
@@ -0,0 +1,3 @@
+# AI 协议（MCP 等）
+
+> 待实现
@@ -1,5 +1,4 @@
-# 上下文工程入门 (Context Engineering)
-
+# 上下文工程
 > 💡 **学习指南**：提示词工程解决的是“怎么把话说清楚”，上下文工程解决的是“让模型在合适的时刻看到合适的信息”。本章节会围绕一个问题展开：**在有限的上下文窗口里，如何既让模型懂你，又不把钱烧光？**

 在开始之前，建议你先补两块“基础砖”：
@@ -0,0 +1,3 @@
+# Embedding 与向量检索
+
+> 待实现
@@ -1,5 +1,4 @@
-# AI 绘画与生图模型入门 (Image Generation Intro)
-
+# 图像生成原理
 > 💡 **学习指南**：提示词工程是“教 AI 说话”，而生图模型则是“教 AI 做梦”。本章节将带你拆解 AI 画笔背后的魔法——它是如何从一堆毫无意义的噪点中，变出足以乱真的艺术品的？

 在开始之前，建议你先体验一下“神笔马良”的感觉。
@@ -22,7 +22,7 @@ AI 本质上是一个**概率预测机器**（Next Token Predictor），它不

 当我们谈论“工程”时，我们强调的是：**可复现、可验证、可转移**。

-![](images/image7.png)
+![](prompt-engineering/images/image7.png)

 AI 模型像一个**黑盒子**：我们知道输入（提示词）和输出（回答），但很难完全掌控中间发生了什么。

@@ -69,7 +69,7 @@ AI 模型像一个**黑盒子**：我们知道输入（提示词）和输出（

 大多数传统大模型（如 GPT-3.5, Llama 2）属于此类。它们**直觉式地反应**，说完上句接下句，不做深层逻辑推演。

-![](images/image14.png)
+![](prompt-engineering/images/image14.png)

 - **特点**：快，但容易在复杂逻辑上犯错。
 - **策略**：需要你把步骤拆解得非常细（Chain of Thought），一步步喂给它。
@@ -78,7 +78,7 @@ AI 模型像一个**黑盒子**：我们知道输入（提示词）和输出（

 新一代模型（如 o1, R1）在回答前会进行“隐式推理”。

-![](images/image13.png)
+![](prompt-engineering/images/image13.png)

 - **特点**：慢，但逻辑能力强，能自我纠错。
 - **策略**：通常不需要复杂的 Prompt 技巧，直接说清楚目标即可，过多的“指手画脚”反而可能干扰它。
@@ -356,7 +356,7 @@ AI 最容易犯的毛病就是**不懂装懂**。

 我们推荐使用 [SiliconFlow Playground](https://cloud.siliconflow.com/me/playground/chat)（或任何你习惯的 LLM 平台），按照下面的**3 个挑战**来验证你学到的技巧。

-![](images/image15.png)
+![](prompt-engineering/images/image15.png)

 > **💡 操作提示**：点击右侧侧边栏的 "Add Model for Comparison"，可以左右分屏对比两个模型（比如 Qwen-Max vs Llama-3）对同一个 Prompt 的反应。

@@ -1,5 +1,4 @@
-# 大语言模型入门 (Interactive Intro to LLM)
-
+# 大语言模型的工作原理
 > 💡 **学习指南**：本章节无需编程基础，通过交互式演示带你深入了解大语言模型（LLM）的底层工作原理。我们将从最基础的分词讲起，一直到 GPT 是如何训练和推理的。

 <LlmQuickStartDemo />
@@ -0,0 +1,3 @@
+# 模型微调与部署
+
+> 待实现
@@ -1,5 +1,4 @@
-# 多模态大模型入门 (VLM Intro)
-
+# 多模态模型（视觉 / 音频 / 视频）
 > 💡 **学习指南**：本章节无需深厚的计算机视觉背景，通过交互式演示带你理解 AI 是如何拥有“眼睛”的。我们将揭秘 GPT-4V、Qwen-VL 等模型背后的核心原理。

 <VlmQuickStartDemo />
@@ -0,0 +1,3 @@
+# 神经网络与深度学习
+
+> 待实现
@@ -0,0 +1,3 @@
+# 提示词工程
+
+> 待实现
--- a/Show More
+++ b/Show More