docs: update stage naming and enhance content presentation

- Rename "Stage 0" to "新手入门" for better clarity
- Improve stage introduction layout with styled cards and tags
- Add visual step progress bars in guide sections
- Enhance terminology sections with card components and navigation
- Update appendix sections with better organization and styling

docs/guide/introduction.md

@@ -2,7 +2,7 @@
 
 2025年，被很多人视为AI编程的元年。越来越多的人开始用AI写代码，但往往做出来的还停留在玩具层面——不知道如何用Vibe Coding组织开发流程，不知道该选哪些工具，更不清楚从原型到上线中间还差哪些关键步骤。
 
-我们采用循序渐进的**三阶段实战路径**：第零阶段通过小游戏快速上手AI编程，第一阶段掌握Vibe Coding工作方式并完成Web应用原型，第二阶段学习全栈开发与部署上线，第三阶段构建跨平台复杂应用。
+我们采用循序渐进的**三阶段实战路径**：新手入门阶段通过小游戏快速上手AI编程，第一阶段掌握Vibe Coding工作方式并完成Web应用原型，第二阶段学习全栈开发与部署上线，第三阶段构建跨平台复杂应用。
 
 每个阶段都配有完整项目实战，让你在真实挑战中从玩具走向产品，最终具备**将任何想法落地为可用应用**的能力。
 
@@ -24,8 +24,8 @@
 
 | 章节                                                                           | 关键内容                               | 状态 |
 | :----------------------------------------------------------------------------- | :------------------------------------- | :--- |
-| [前言：学习地图](/stage-0/0.1-learning-map/)                                   | 整体学习路径导览                       | ✅   |
-| [初级一：AI 时代，会说话就会编程](/stage-0/0.2-ai-capabilities-through-games/) | 通过贪吃蛇等案例初步感受 AI 编程的能力 | ✅   |
+| [新手入门：学习地图](/stage-0/0.1-learning-map/)                                   | 整体学习路径导览                       | ✅   |
+| [新手入门：AI 时代，会说话就会编程](/stage-0/0.2-ai-capabilities-through-games/) | 通过贪吃蛇等案例初步感受 AI 编程的能力 | ✅   |
 
 ### 一、AI 产品经理
 

docs/index.md

@@ -37,7 +37,7 @@ features:
 <div class="stage-container">
   <div class="stage-card">
     <div class="stage-icon">🌱</div>
-    <h3>Stage 0: 纯新手</h3>
+    <h3>Stage 0: 新手入门</h3>
     <p>适合产品、运营及非技术背景。通过做游戏理解 AI 编程逻辑，建立信心。</p>
     <a href="./stage-0/0.1-learning-map/">查看详情 →</a>
   </div>

docs/stage-0/0.1-learning-map/index.md

@@ -20,21 +20,131 @@ AI coding的出现正在改写传统编程学习的规则。你不再需要花
 
 ## 三个阶段的成长路径：从“会用 AI”到“会做 AI 产品”
 
-::: info 🎮 第零阶段：体验 AI 编程的魔力
-通过贪吃蛇等小游戏，你将第一次**体验到 AI 辅助编程的能力与边界**。这个阶段**不需要任何编程基础**，只需要你愿意动手尝试——看着 AI 在几分钟内帮你生成一个可玩的游戏，你会直观感受到 **vibecoding 的强大**。
-:::
+<div class="stage-intro">
+  <div class="stage-card">
+    <div class="stage-icon">🎮</div>
+    <h3>新手入门</h3>
+    <p class="stage-role">体验 AI 编程</p>
+    <div class="stage-tags">
+      <span>贪吃蛇小游戏</span>
+      <span>零基础上手</span>
+      <span>Vibecoding 初体验</span>
+      <span>几分钟生成</span>
+    </div>
+  </div>
+</div>
 
-::: tip 🛠️ 第一阶段：掌握产品开发的完整闭环
-学会使用 **AI IDE（如 Cursor、Claude 等工具）**将想法转化为可运行的 Web 应用原型。你将学习如何**拆解需求、设计多页面应用、接入 AI 能力**（文本生成、图像处理等），并用模拟数据完成一个完整的产品 demo。这个阶段结束时，你能**独立完成一个像“霍格沃茨画像”那样接入 AI 能力的前端应用**。
-:::
+<div class="stage-grid">
+  <div class="stage-card">
+    <div class="stage-icon">🛠️</div>
+    <h3>第一阶段</h3>
+    <p class="stage-role">产品经理 / 运营</p>
+    <div class="stage-tags">
+      <span>AI IDE (Cursor/Claude)</span>
+      <span>需求拆解 & 原型</span>
+      <span>接入 AI 能力</span>
+      <span>完整 Demo 开发</span>
+    </div>
+  </div>
+  <div class="stage-card">
+    <div class="stage-icon">💻</div>
+    <h3>第二阶段</h3>
+    <p class="stage-role">初中级开发 / 独立开发者</p>
+    <div class="stage-tags">
+      <span>Figma 到代码</span>
+      <span>Supabase 数据库</span>
+      <span>Stripe 支付集成</span>
+      <span>Dify 知识库</span>
+    </div>
+  </div>
+  <div class="stage-card">
+    <div class="stage-icon">🚀</div>
+    <h3>第三阶段</h3>
+    <p class="stage-role">高级开发 / 架构师</p>
+    <div class="stage-tags">
+      <span>Web/小程序/多端</span>
+      <span>MCP 高级工具</span>
+      <span>RAG & LangGraph</span>
+      <span>高级工程师思维</span>
+    </div>
+  </div>
+</div>
 
-::: warning 💻 第二阶段：成为能上线产品的工程师
-这是质的飞跃。你将学习**现代 Web 开发的核心技能**：从 **Figma 设计稿**到组件化前端实现，从 **Supabase 数据库**到 API 接口开发，从 Git 版本管理到 **Zeabur 部署上线**。更重要的是，你将学会**集成支付系统（如 Stripe）**，让你的应用具备真实的商业价值。通过 **Dify** 等工具，你还将掌握知识库与工作流的构建，为应用注入更强的 AI 能力。
-:::
+<style>
+.stage-intro {
+  margin: 20px auto;
+  max-width: 400px;
+}
 
-::: danger 🚀 第三阶段：构建跨平台的复杂应用
-掌握**多平台开发能力**，将同一个应用部署到 Web、微信小程序、安卓等多个平台。学习 **MCP 等高级工具**扩展 IDE 能力，深入理解 **RAG 原理**并使用 **LangGraph** 等框架设计复杂的 AI 工作流。这个阶段你将具备**高级工程师的思维方式和工具链**。
-:::
+.stage-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 12px;
+  margin: 16px 0;
+}
+
+.stage-card {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 10px;
+  padding: 12px;
+  background-color: var(--vp-c-bg-soft);
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  height: 100%;
+}
+
+.stage-card:hover {
+  transform: translateY(-2px);
+  background-color: var(--vp-c-bg-mute);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
+  border-color: var(--vp-c-brand);
+}
+
+.stage-icon {
+  font-size: 2rem;
+  margin-bottom: 8px;
+  line-height: 1;
+}
+
+.stage-card h3 {
+  margin: 0 0 4px 0 !important;
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.stage-role {
+  margin: 0 0 8px 0 !important;
+  font-size: 0.8rem;
+  color: var(--vp-c-text-2);
+  font-weight: 500;
+}
+
+.stage-tags {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 4px;
+}
+
+.stage-tags span {
+  font-size: 0.7rem;
+  padding: 1px 6px;
+  border-radius: 3px;
+  background-color: var(--vp-c-bg-alt);
+  color: var(--vp-c-text-2);
+  border: 1px solid var(--vp-c-divider);
+}
+
+.stage-card:hover .stage-tags span {
+  background-color: var(--vp-c-bg);
+  border-color: var(--vp-c-brand-dimm);
+  color: var(--vp-c-brand-dark);
+}
+</style>
 
 ## 你将获得的核心能力
 

docs/stage-0/0.2-ai-capabilities-through-games/index.md

@@ -40,7 +40,45 @@
 
 AI 出现之后,第一次给了普通人一个全新的可能：你不需要会写代码,只需要学会对 AI 说清楚你想要什么。来自 GitHub Copilot 的[数据显示](https://www.wearetenet.com/blog/github-copilot-usage-data-statistics),超过1500万开发者正在用AI辅助编程,平均46%的代码都是AI生成的! 在Java项目中这个比例能达到61%。
 
-让人真正兴奋的是效率的飞跃：开发者完成任务的速度提升了 55%。原本需要 9.6 天才能提交的代码，现在只要 2.4 天就能搞定。 这种肉眼可见的效率提升，说明 AI 不再只是一个“可选工具”，而是正在成为开发流程中不可或缺的编程助手。采用率的数据也印证了这一点：在获得访问权限的当天，就有 81% 的开发者第一时间完成安装并开始使用；其中 96% 的人更是在当天就开始采纳 AI 提供的代码建议。换句话说，开发者几乎是立刻把 AI 融入了日常编码工作。
+<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
+  <template #header>
+    <div style="display: flex; align-items: center; gap: 8px;">
+      <span style="font-size: 20px;">🚀</span>
+      <span style="font-weight: bold; font-size: 16px;">效率与采用率的飞跃</span>
+    </div>
+  </template>
+  
+  <el-row :gutter="20" style="margin-bottom: 24px;">
+    <el-col :span="6" :xs="12">
+      <div style="text-align: center; padding: 10px;">
+        <div style="color: #409EFF; font-size: 24px; font-weight: bold;">55%</div>
+        <div style="color: #909399; font-size: 12px; margin-top: 4px;">速度提升</div>
+      </div>
+    </el-col>
+    <el-col :span="6" :xs="12">
+      <div style="text-align: center; padding: 10px;">
+        <div style="color: #67C23A; font-size: 24px; font-weight: bold;">2.4 <span style="font-size: 14px;">天</span></div>
+        <div style="color: #909399; font-size: 12px; margin-top: 4px;">任务耗时 (原9.6天)</div>
+      </div>
+    </el-col>
+    <el-col :span="6" :xs="12">
+      <div style="text-align: center; padding: 10px;">
+        <div style="color: #E6A23C; font-size: 24px; font-weight: bold;">81%</div>
+        <div style="color: #909399; font-size: 12px; margin-top: 4px;">首日安装率</div>
+      </div>
+    </el-col>
+    <el-col :span="6" :xs="12">
+      <div style="text-align: center; padding: 10px;">
+        <div style="color: #F56C6C; font-size: 24px; font-weight: bold;">96%</div>
+        <div style="color: #909399; font-size: 12px; margin-top: 4px;">建议采纳率</div>
+      </div>
+    </el-col>
+  </el-row>
+
+  <div style="line-height: 1.8; color: #606266;">
+    让人真正兴奋的是效率的飞跃：开发者完成任务的速度提升了 <b>55%</b>。原本需要 9.6 天才能提交的代码，现在只要 <b>2.4 天</b>就能搞定。 这种肉眼可见的效率提升，说明 AI 不再只是一个“可选工具”，而是正在成为开发流程中不可或缺的编程助手。采用率的数据也印证了这一点：在获得访问权限的当天，就有 <b>81%</b> 的开发者第一时间完成安装并开始使用；其中 <b>96%</b> 的人更是在当天就开始采纳 AI 提供的代码建议。换句话说，开发者几乎是立刻把 AI 融入了日常编码工作。
+  </div>
+</el-card>
 
 对于普通人来说,这个趋势更有意义:如果专业程序员都在大量依赖AI写代码,那我们这些**不会编程的人,为什么不能直接跟AI对话来实现自己的想法呢**?
 

docs/stage-1/1.1-introduction-to-ai-ide/index.md

@@ -2,14 +2,23 @@
 
 ## 本章导读
 
-还记得上一章里，你用 AI 生成的第一个贪吃蛇游戏吗？它说明只用自然语言，已经可以让 AI 搭出一个完整、可运行的原型。与此同时，在 z.ai 这样的网页 IDE 里进行开发时，你可能会感受到限制：项目一变大，代码管理和调试就不顺手，对话次数有最终上限。
+::: info 🎯 学习目标
+本章将围绕本地开发环境展开讲解：你将学会从 z.ai 过渡到本地的开发环境，学会在自己的电脑上搭建完整的开发环境，理解什么是 IDE、什么是 AI IDE，以及如何在日常开发中高效地使用它们。
+:::
 
-这些问题主要来源于工具形态本身，而不是 AI 能力的不足。本章将围绕本地开发环境展开讲解：你将学会从 z.ai 过渡到本地的开发环境，学会在自己的电脑上搭建完整的开发环境，理解什么是 IDE、什么是 AI IDE，以及如何在日常开发中高效地使用它们。
+- 预计时间：约 **1 天**，可分多次完成
+- 预期产出：使用 Trae 产出 **1 个自创小游戏**
 
-最后，我们会在本地 AI IDE 中复现类似 z.ai 贪吃蛇游戏的实战流程，完成一个由你亲自设计的小游戏。
-
-- 预计时间：约一天，可分多次完成
-- 预期产出：使用 Trae 产出 1 个自创小游戏
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="0" :items="[
+      { title: '环境认知', description: '理解 IDE 与 AI IDE' },
+      { title: '本地实战', description: 'Trae 打造贪吃蛇' },
+      { title: '工具详解', description: '熟悉 IDE 界面' },
+      { title: '沟通技巧', description: '高效与 AI 对话' }
+    ]" />
+  </ClientOnly>
+</div>
 
 ## 1. 写代码需要什么环境和工具
 
@@ -144,6 +153,17 @@ Cline 是 VS Code（Visual Studio Code）的一款 AI 编程 Agent 插件，可
 
 ![](images/image14.png)
 
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="1" :items="[
+      { title: '环境认知', description: '理解 IDE 与 AI IDE' },
+      { title: '本地实战', description: 'Trae 打造贪吃蛇' },
+      { title: '工具详解', description: '熟悉 IDE 界面' },
+      { title: '沟通技巧', description: '高效与 AI 对话' }
+    ]" />
+  </ClientOnly>
+</div>
+
 ## 4. 实战：用 AI IDE 在本地生成贪吃蛇游戏
 
 前面讲的主要是“概念”和“差异”。这一小节，我们通过一次完整的实战，把抽象概念落到具体操作上：**新建一个空文件夹 → 用 AI IDE 打开 → 在侧边栏聊天，让它用 React 帮你从零生成一个贪吃蛇游戏。** 这里以上面介绍的 Trae 为例，首先需要安装和简单理解什么是 Trae。
@@ -209,7 +229,9 @@ Trae 分为国际版和中国版。国际版需要能够访问海外网络，但
 
 如果执行过程中遇到问题，AI 会在对话里展示报错和处理方案，你可以继续通过对话让它调整，而不必自己记住所有命令细节。
 
-⚠️ 需要注意的是，例如下图所示，**有时候 AI Agent 会在执行的过程中暂停，这是因为它需要等待你输入一些信息进行交互**，比如输入创建的名字，或者回车确认指令执行。或者点击指令进行执行。一般情况我们直接回车即可，如果你不确定这步需要做什么，你可以截图当前界面询问大模型应该如何操作。
+::: warning ⚠️ 需要注意
+例如下图所示，**有时候 AI Agent 会在执行的过程中暂停，这是因为它需要等待你输入一些信息进行交互**，比如输入创建的名字，或者回车确认指令执行。或者点击指令进行执行。一般情况我们直接回车即可，如果你不确定这步需要做什么，你可以截图当前界面询问大模型应该如何操作。
+:::
 
 如图所示，这里我们需要点击 Run 进行确认：
 ![](images/index-2026-01-09-10-52-55.png)
@@ -312,6 +334,17 @@ AI 会根据你的描述，直接修改 React 组件和样式。保存后刷新
 
 ![](images/index-2026-01-09-11-00-57.png)
 
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="2" :items="[
+      { title: '环境认知', description: '理解 IDE 与 AI IDE' },
+      { title: '本地实战', description: 'Trae 打造贪吃蛇' },
+      { title: '工具详解', description: '熟悉 IDE 界面' },
+      { title: '沟通技巧', description: '高效与 AI 对话' }
+    ]" />
+  </ClientOnly>
+</div>
+
 ## 5. 界面上每个按钮是干什么的
 
 在上述操作中，我们已经快速跑通了最小程序生成闭环，但我们仍然对 IDE 不能说得上熟悉。为了彻底熟悉这个之后与我们长期相处的工具。我们会在这一节中对 IDE 的每个细节环节进行深入解释，首先从界面开始，不同 AI IDE 的界面略有差异，但大部分都延续了 [VS Code 的布局](https://code.visualstudio.com/docs/getstarted/getting-started)。
@@ -338,6 +371,17 @@ AI 会根据你的描述，直接修改 React 组件和样式。保存后刷新
 
 **更具体的详细内容解释，请查看本篇文章的[附录二](#appendix-2-vscode-menu)。**
 
+<div style="margin: 50px 0;">
+  <ClientOnly>
+    <StepBar :active="3" :items="[
+      { title: '环境认知', description: '理解 IDE 与 AI IDE' },
+      { title: '本地实战', description: 'Trae 打造贪吃蛇' },
+      { title: '工具详解', description: '熟悉 IDE 界面' },
+      { title: '沟通技巧', description: '高效与 AI 对话' }
+    ]" />
+  </ClientOnly>
+</div>
+
 ## 6. 怎么跟 AI 说话才有效
 
 随着 AI 能力越来越强，我们已经可以把很多“让程序员写代码”的工作交给 AI 来完成。  
@@ -499,29 +543,75 @@ AI 很认真地给了你一段代码，你也老老实实地复制进去了，
 
 ## 8. 📚 作业：用本地 AI IDE 做一个更复杂的游戏
 
+<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
+  <template #header>
+    <div style="font-weight: bold; font-size: 16px;">🚀 挑战任务：打造你的专属游戏</div>
+  </template>
+
 你已经用本地 AI IDE 做过一个贪吃蛇。现在请你再挑战一个更复杂一点的小游戏，完整走一遍“描述需求 → 生成项目 → 本地运行 → 调试迭代”的流程。
 
-1. 选择一个比贪吃蛇更复杂的游戏：
+1. **选择一个比贪吃蛇更复杂的游戏**：
    - 可以是“俄罗斯方块”“打地鼠”“扫雷”“2048””飞机大战“之类
    - 或者你自己想象的一个简单原创游戏
-2. 必须用本地 AI IDE 来完成整个过程：
+2. **必须用本地 AI IDE 来完成整个过程**：
    - 新建一个空文件夹，用 AI IDE 打开
    - 在侧边栏聊天里描述清楚你的游戏需求
    - 让 AI 负责创建文件、搭建项目结构和实现主要逻辑
    - 在本地启动开发服务器，确保游戏可以正常运行
-3. 有基本的“可玩性”和反馈：
+3. **有基本的“可玩性”和反馈**：
    - 至少包含开始、进行中、结束三种状态
    - 玩家有明确的操作方式（键盘或鼠标）
    - 屏幕上有清晰的得分或进度反馈
-4. 至少进行 2 轮以上的迭代：
+4. **至少进行 2 轮以上的迭代**：
    - 第一轮让 AI 做出“能玩”的版本
    - 第二轮以后，逐步提出具体改进（样式、难度、交互优化等）
+</el-card>
 
 # 附录一：常见计算机术语速查表
 
+<el-card id="appendix-1-map" shadow="hover" style="margin-top: 40px; margin-bottom: 20px; border-left: 5px solid #409EFF;">
+  <div style="font-weight: bold; margin-bottom: 10px;">🗺️ 术语地图：你将在这里遇到...</div>
+  <el-row :gutter="20">
+    <el-col :span="6">
+      <a href="#term-tool-ui" style="text-decoration: none; color: inherit;">🖥️ <b>工具界面</b></a><br/>
+      <span style="font-size: 12px; color: #909399">IDE / 终端 / 面板</span>
+    </el-col>
+    <el-col :span="6">
+      <a href="#term-network" style="text-decoration: none; color: inherit;">🌐 <b>网络服务</b></a><br/>
+      <span style="font-size: 12px; color: #909399">URL / 端口 / 本地</span>
+    </el-col>
+    <el-col :span="6">
+      <a href="#term-frontend-backend" style="text-decoration: none; color: inherit;">⚙️ <b>前后端</b></a><br/>
+      <span style="font-size: 12px; color: #909399">API / JSON / 接口</span>
+    </el-col>
+    <el-col :span="6">
+      <a href="#term-code-basic" style="text-decoration: none; color: inherit;">📝 <b>代码基础</b></a><br/>
+      <span style="font-size: 12px; color: #909399">变量 / 函数 / 组件</span>
+    </el-col>
+  </el-row>
+  <el-row :gutter="20" style="margin-top: 10px;">
+    <el-col :span="6">
+      <a href="#term-debug" style="text-decoration: none; color: inherit;">🐞 <b>调试查错</b></a><br/>
+      <span style="font-size: 12px; color: #909399">Bug / 断点 / 日志</span>
+    </el-col>
+    <el-col :span="6">
+      <a href="#term-project" style="text-decoration: none; color: inherit;">📂 <b>项目管理</b></a><br/>
+      <span style="font-size: 12px; color: #909399">Git / 仓库 / 提交</span>
+    </el-col>
+    <el-col :span="6">
+      <a href="#term-ai-tool" style="text-decoration: none; color: inherit;">🤖 <b>AI 工具</b></a><br/>
+      <span style="font-size: 12px; color: #909399">Agent / 模型 / Key</span>
+    </el-col>
+    <el-col :span="6">
+      <a href="#term-browser" style="text-decoration: none; color: inherit;">🛠️ <b>浏览器</b></a><br/>
+      <span style="font-size: 12px; color: #909399">DevTools / 控制台</span>
+    </el-col>
+  </el-row>
+</el-card>
+
 这一部分不需要刻意背诵，更重要的是先在脑子里建立一个印象。
 
-## 一、和“工具界面”有关的词
+## <span id="term-tool-ui">[一、和“工具界面”有关的词](#appendix-1-map)</span>
 
 ### 1. IDE、编辑器、终端
 
@@ -584,7 +674,7 @@ AI 很认真地给了你一段代码，你也老老实实地复制进去了，
 - 显示有没有错误、当前 Git 分支是什么。  
   可以把它当作“当前编辑环境的一张小体检单”。
 
-## 二、和“网页 / 网络 / 服务”有关的词
+## <span id="term-network">[二、和“网页 / 网络 / 服务”有关的词](#appendix-1-map)</span>
 
 ### 1. URL、http、端口、本地服务
 
@@ -622,7 +712,7 @@ AI 很认真地给了你一段代码，你也老老实实地复制进去了，
 - 游戏服务：负责管理对局、存档、排行榜等。  
   在终端里执行 `npm run dev` 启动项目，本质上就是“在本地开了一个网页服务”。
 
-## 三、和“前端 / 后端 / 数据”有关的词
+## <span id="term-frontend-backend">[三、和“前端 / 后端 / 数据”有关的词](#appendix-1-map)</span>
 
 ### 1. 前端、后端
 
@@ -673,7 +763,7 @@ AI 很认真地给了你一段代码，你也老老实实地复制进去了，
 
 可以理解成“机器版的键值对记事本”，前后端经常用它来交换数据。
 
-## 四、和“写代码本身”有关的词
+## <span id="term-code-basic">[四、和“写代码本身”有关的词](#appendix-1-map)</span>
 
 ### 1. 变量、标识符、状态
 
@@ -755,7 +845,7 @@ function sayHello(name) {
 - 后端：Django、Spring Boot 等。  
   你等于是在“现成的骨架上填内容”，比从头造轮子轻松很多。
 
-## 五、和“调试 / 查错”有关的词
+## <span id="term-debug">[五、和“调试 / 查错”有关的词](#appendix-1-map)</span>
 
 ### 1. Bug、报错、日志 / console.log
 
@@ -822,7 +912,7 @@ console.log('当前分数', score)
 - 调试时某个时间点内存 / 变量的整体情况。  
   你先记住这个比喻就够用：**快照 ≈ 某一刻状态的留影**。
 
-## 六、和“项目 / 文件 / 版本控制”有关的词
+## <span id="term-project">[六、和“项目管理”有关的词](#appendix-1-map)</span>
 
 ### 1. 项目、工作区、文件夹
 
@@ -858,7 +948,7 @@ VS Code / Trae 用来描述“当前这一次打开了一组什么东西”的
 - Git 会把这一刻的状态存下来。  
   这一次动作就叫“做了一次 commit”。
 
-## 七、和“AI 开发工具”有关的词
+## <span id="term-ai-tool">[七、和“AI 开发工具”有关的词](#appendix-1-map)</span>
 
 ### 1. AI IDE、Agent、SOLO 模式
 
@@ -905,7 +995,7 @@ VS Code / Trae 用来描述“当前这一次打开了一组什么东西”的
 - 不能发到公开的地方（仓库、截图、群聊），别人拿到就可以冒用你的账号；
 - 在工具里填 API Key，就等于“把钥匙插进锁里”，之后工具就能帮你调用对应的 AI 服务。
 
-## 八、和“浏览器 / 开发者工具”有关的词
+## <span id="term-browser">[八、和“浏览器 / 开发者工具”有关的词](#appendix-1-map)</span>
 
 **Chrome（谷歌浏览器）**  
 现在前端开发最常用的浏览器之一：
@@ -947,7 +1037,19 @@ VS Code / Trae 用来描述“当前这一次打开了一组什么东西”的
 
 # 附录二： Visual Studio Code 菜单栏解析
 
-## Title Bar（标题栏）：窗口信息与全局入口
+<el-card id="appendix-2-map" shadow="hover" style="margin-top: 40px; margin-bottom: 20px; border-left: 5px solid #67C23A;">
+  <div style="font-weight: bold; margin-bottom: 10px;">🧭 界面导航：VS Code 核心区域</div>
+  <div style="display: flex; flex-wrap: wrap; gap: 10px;">
+    <a href="#vscode-title-bar" style="text-decoration: none;"><el-tag effect="plain" style="cursor: pointer;">Title Bar (标题栏)</el-tag></a>
+    <a href="#vscode-activity-bar" style="text-decoration: none;"><el-tag effect="plain" style="cursor: pointer;">Activity Bar (活动栏)</el-tag></a>
+    <a href="#vscode-side-bar" style="text-decoration: none;"><el-tag effect="plain" style="cursor: pointer;">Side Bar (侧边栏)</el-tag></a>
+    <a href="#vscode-editor" style="text-decoration: none;"><el-tag effect="plain" style="cursor: pointer;">Editor (编辑区)</el-tag></a>
+    <a href="#vscode-panel" style="text-decoration: none;"><el-tag effect="plain" style="cursor: pointer;">Panel (底部面板)</el-tag></a>
+    <a href="#vscode-status-bar" style="text-decoration: none;"><el-tag effect="plain" style="cursor: pointer;">Status Bar (状态栏)</el-tag></a>
+  </div>
+</el-card>
+
+## <span id="vscode-title-bar">[Title Bar（标题栏）：窗口信息与全局入口](#appendix-2-map)</span>
 
 标题栏位于窗口最上方，主要用于展示当前窗口信息并提供窗口级控制。常见细节包括：
 
@@ -1142,7 +1244,7 @@ VS Code / Trae 用来描述“当前这一次打开了一组什么东西”的
 - **Contact Us（联系我们）**：官方联系入口。
 - **Help Document（帮助文档）**：打开官方帮助文档与使用指南。
 
-## Activity Bar（活动栏）：主要视图的切换区
+## <span id="vscode-activity-bar">[Activity Bar（活动栏）：主要视图的切换区](#appendix-2-map)</span>
 
 活动栏位于界面最左侧，以图标形式提供核心功能视图入口，用于切换左侧工具面板。常见图标与作用如下：
 
@@ -1167,7 +1269,7 @@ VS Code / Trae 用来描述“当前这一次打开了一组什么东西”的
 
 补充说明：再次点击同一图标通常可切换该视图的展开/收起；将鼠标悬停在图标上通常可看到视图名称与快捷键提示。AI IDE 往往会在此处增加 AI 相关入口（如 Chat/Agents/Project Context），用于打开对话面板或启用项目级分析能力。
 
-## Side Bar（侧边栏）：当前视图的具体内容区
+## <span id="vscode-side-bar">[Side Bar（侧边栏）：当前视图的具体内容区](#appendix-2-map)</span>
 
 侧边栏位于活动栏右侧，用于展示当前选中视图的具体内容。它会随活动栏切换而变化，常见细节包括：
 
@@ -1184,7 +1286,7 @@ VS Code / Trae 用来描述“当前这一次打开了一组什么东西”的
 
 侧边栏中的信息会根据活动栏的选择而切换显示的内容。其通常以可折叠分区组织，便于在同一位置呈现多类信息（是否出现某些分区取决于语言与扩展）。
 
-## Editor Groups（编辑器分组/编辑区）：文件编辑与分屏布局
+## <span id="vscode-editor">[Editor Groups（编辑器分组/编辑区）：文件编辑与分屏布局](#appendix-2-map)</span>
 
 编辑器区域位于界面中部，是代码与文本编辑的核心区域，包含文件标签管理与分组布局能力。常见细节包括：
 
@@ -1219,7 +1321,7 @@ Minimap 位于编辑器右侧，是当前文件内容的缩略预览，用于快
 - 快速滚动与跳转  
   在 Minimap 上点击或拖动通常可以快速跳转到对应位置，减少反复滚动带来的时间成本。
 
-## Panel（面板/底部面板）：运行、诊断与调试输出集中区
+## <span id="vscode-panel">[Panel（面板/底部面板）：运行、诊断与调试输出集中区](#appendix-2-map)</span>
 
 Panel 通常位于窗口底部（布局可调整），用于承载运行命令与各种输出信息。常见标签页与用途如下：
 
@@ -1235,7 +1337,7 @@ Panel 通常位于窗口底部（布局可调整），用于承载运行命令
 - Debug Console（调试控制台）  
   调试会话期间用于显示调试输出与交互信息，与断点、变量查看等功能配合使用。
 
-## Status Bar（状态栏）：编辑状态与上下文信息汇总
+## <span id="vscode-status-bar">[Status Bar（状态栏）：编辑状态与上下文信息汇总](#appendix-2-map)</span>
 
 状态栏位于窗口最底部，汇总展示当前文件与环境的关键状态，并提供快捷入口。常见细节包括：