docs: update content and components across multiple files

- Refine chapter introductions in zh-cn docs for clarity and conciseness
- Update navigation links to include '/easy-vibe' prefix
- Simplify UI components (ChapterIntroduction, ContextWindowVisualizer)
- Add new agent-related demo components (AgentMemoryDemo, AgentToolUseDemo)
- Improve context compression demo with better visuals and metrics
- Adjust styling and layout across various components

docs/zh-cn/appendix/intro.md

@@ -10,47 +10,47 @@
 
 <NavGrid>
   <NavCard
-    href="/zh-cn/appendix/prompt-engineering/"
+    href="/easy-vibe/zh-cn/appendix/prompt-engineering/"
     title="提示词工程"
     description="掌握与 AI 高效对话的技巧，解锁大模型的潜力"
   />
   <NavCard
-    href="/zh-cn/appendix/ai-evolution"
+    href="/easy-vibe/zh-cn/appendix/ai-evolution"
     title="人工智能进化史"
     description="回顾 AI 发展历程中的关键里程碑，理解技术演进脉络"
   />
   <NavCard
-    href="/zh-cn/appendix/llm-intro"
+    href="/easy-vibe/zh-cn/appendix/llm-intro"
     title="大语言模型"
     description="深入浅出解析大语言模型（LLM）的工作原理与应用"
   />
   <NavCard
-    href="/zh-cn/appendix/vlm-intro"
+    href="/easy-vibe/zh-cn/appendix/vlm-intro"
     title="多模态大模型"
     description="探索能够处理图像、音频等多种数据模态的先进模型"
   />
   <NavCard
-    href="/zh-cn/appendix/image-gen-intro"
+    href="/easy-vibe/zh-cn/appendix/image-gen-intro"
     title="AI 绘画原理"
     description="揭秘 AI 图像生成的底层逻辑与技术实现"
   />
   <NavCard
-    href="/zh-cn/appendix/audio-intro"
+    href="/easy-vibe/zh-cn/appendix/audio-intro"
     title="AI 音频模型"
     description="了解 AI 在语音合成、识别与音乐生成领域的应用"
   />
   <NavCard
-    href="/zh-cn/appendix/context-engineering"
+    href="/easy-vibe/zh-cn/appendix/context-engineering"
     title="上下文工程"
     description="学习如何优化上下文管理，提升 AI 任务的长程连贯性"
   />
   <NavCard
-    href="/zh-cn/appendix/agent-intro"
+    href="/easy-vibe/zh-cn/appendix/agent-intro"
     title="Agent 智能体"
     description="探索具备自主决策与执行能力的 AI 智能体架构"
   />
   <NavCard
-    href="/zh-cn/appendix/ai-capability-dictionary"
+    href="/easy-vibe/zh-cn/appendix/ai-capability-dictionary"
     title="AI 能力词典"
     description="AI 领域常用术语与核心概念的速查手册"
   />
@@ -62,32 +62,32 @@
 
 <NavGrid>
   <NavCard
-    href="/zh-cn/appendix/web-basics"
+    href="/easy-vibe/zh-cn/appendix/web-basics"
     title="HTML/CSS/JS 基础"
     description="构建 Web 页面的三大基石，前端开发的入门必修课"
   />
   <NavCard
-    href="/zh-cn/appendix/frontend-evolution"
+    href="/easy-vibe/zh-cn/appendix/frontend-evolution"
     title="前端进化史"
     description="了解前端技术栈的演变历程，把握技术发展趋势"
   />
   <NavCard
-    href="/zh-cn/appendix/frontend-performance"
+    href="/easy-vibe/zh-cn/appendix/frontend-performance"
     title="前端性能优化"
     description="学习提升网页加载速度与交互流畅度的关键策略"
   />
   <NavCard
-    href="/zh-cn/appendix/canvas-intro"
+    href="/easy-vibe/zh-cn/appendix/canvas-intro"
     title="Canvas 2D 入门"
     description="掌握 Canvas 绘图 API，实现炫酷的图形与动画效果"
   />
   <NavCard
-    href="/zh-cn/appendix/url-to-browser"
+    href="/easy-vibe/zh-cn/appendix/url-to-browser"
     title="URL 到浏览器显示"
     description="全链路解析浏览器渲染页面的完整过程"
   />
   <NavCard
-    href="/zh-cn/appendix/browser-devtools/"
+    href="/easy-vibe/zh-cn/appendix/browser-devtools/"
     title="浏览器调试器"
     description="熟练使用开发者工具，高效定位与解决前端问题"
   />
@@ -99,42 +99,42 @@
 
 <NavGrid>
   <NavCard
-    href="/zh-cn/appendix/backend-evolution"
+    href="/easy-vibe/zh-cn/appendix/backend-evolution"
     title="后端进化史"
     description="从单体到微服务，探索后端架构的演进之路"
   />
   <NavCard
-    href="/zh-cn/appendix/backend-languages"
+    href="/easy-vibe/zh-cn/appendix/backend-languages"
     title="后端编程语言"
     description="对比主流后端语言的特性与适用场景，选择最佳技术栈"
   />
   <NavCard
-    href="/zh-cn/appendix/database-intro"
+    href="/easy-vibe/zh-cn/appendix/database-intro"
     title="数据库原理"
     description="理解数据库核心原理，掌握数据存储与检索的艺术"
   />
   <NavCard
-    href="/zh-cn/appendix/cache-design"
+    href="/easy-vibe/zh-cn/appendix/cache-design"
     title="系统缓存设计"
     description="学习缓存策略，提升系统的高并发处理能力"
   />
   <NavCard
-    href="/zh-cn/appendix/queue-design"
+    href="/easy-vibe/zh-cn/appendix/queue-design"
     title="消息队列设计"
     description="掌握消息队列在解耦、削峰填谷中的关键作用"
   />
   <NavCard
-    href="/zh-cn/appendix/auth-design"
+    href="/easy-vibe/zh-cn/appendix/auth-design"
     title="鉴权原理与实战"
     description="构建安全的身份认证与权限管理系统"
   />
   <NavCard
-    href="/zh-cn/appendix/tracking-design"
+    href="/easy-vibe/zh-cn/appendix/tracking-design"
     title="埋点设计"
     description="科学设计数据埋点，为产品决策提供数据支持"
   />
   <NavCard
-    href="/zh-cn/appendix/operations"
+    href="/easy-vibe/zh-cn/appendix/operations"
     title="线上运维"
     description="掌握系统部署、监控与故障排查的运维技能"
   />
@@ -146,32 +146,32 @@
 
 <NavGrid>
   <NavCard
-    href="/zh-cn/appendix/api-intro"
+    href="/easy-vibe/zh-cn/appendix/api-intro"
     title="API 入门"
     description="API 接口设计与开发的基础知识"
   />
   <NavCard
-    href="/zh-cn/appendix/ide-intro/"
+    href="/easy-vibe/zh-cn/appendix/ide-intro/"
     title="IDE 原理"
     description="了解集成开发环境（IDE）的内部工作机制"
   />
   <NavCard
-    href="/zh-cn/appendix/terminal-intro"
+    href="/easy-vibe/zh-cn/appendix/terminal-intro"
     title="终端入门"
     description="掌握命令行终端的基本操作，提升开发效率"
   />
   <NavCard
-    href="/zh-cn/appendix/git-intro"
+    href="/easy-vibe/zh-cn/appendix/git-intro"
     title="Git 详细介绍"
     description="深入理解 Git 版本控制原理与高级用法"
   />
   <NavCard
-    href="/zh-cn/appendix/computer-networks"
+    href="/easy-vibe/zh-cn/appendix/computer-networks"
     title="计算机网络"
     description="网络协议与通信原理的基础知识"
   />
   <NavCard
-    href="/zh-cn/appendix/deployment"
+    href="/easy-vibe/zh-cn/appendix/deployment"
     title="部署与上线"
     description="应用部署发布的完整流程与最佳实践"
   />

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

@@ -3,13 +3,9 @@
 这是一个**基于项目制学习**的学习教程。我们鼓励你跟随步骤一步步操作，并尝试复现结果。
 不要担心犯错或修改内容，我们永远相信你可以做到，请你永远记住：
 
-<el-card shadow="hover" style="border-radius: 16px; border: 2px dashed #FFB6C1; background-color: #FFF0F5; margin: 20px 0;">
-  <div style="text-align: center;">
-    <div style="font-size: 24px; font-weight: 600; color: #595959;">
-       完成比完美更重要 🐣
-    </div>
-  </div>
-</el-card>
+<div style="display: inline-block; padding: 8px 20px; border-radius: 8px; border: 1px dashed #FFB6C1; background: linear-gradient(135deg, #FFF0F5 0%, #FFE4EC 100%); margin: 12px 0;">
+  <span style="font-size: 15px; font-weight: 500; color: #666;">完成比完美更重要 🐣</span>
+</div>
 
 <script setup>
 const duration = '约 <strong>4 小时</strong>，可分多次完成'

docs/zh-cn/stage-0/intro.md

@@ -12,12 +12,12 @@
 
 <NavGrid>
   <NavCard
-    href="/zh-cn/stage-0/0.1-learning-map/"
+    href="/easy-vibe/zh-cn/stage-0/0.1-learning-map/"
     title="1. 学习地图"
     description="了解整个学习路径，明确每个阶段的目标和收获。"
   />
   <NavCard
-    href="/zh-cn/stage-0/0.2-ai-capabilities-through-games/"
+    href="/easy-vibe/zh-cn/stage-0/0.2-ai-capabilities-through-games/"
     title="2. AI 时代，会说话就会编程"
     description="通过贪吃蛇等小游戏，体验 AI 编程的魅力，打破对编程的恐惧。"
   />
@@ -29,32 +29,32 @@
 
 <NavGrid>
   <NavCard
-    href="/zh-cn/stage-1/1.1-introduction-to-ai-ide/"
+    href="/easy-vibe/zh-cn/stage-1/1.1-introduction-to-ai-ide/"
     title="1. 认识 AI IDE 工具"
     description="了解当前主流的 AI 编程工具，选择最适合你的开发搭档。"
   />
   <NavCard
-    href="/zh-cn/stage-1/1.2-building-prototype/"
+    href="/easy-vibe/zh-cn/stage-1/1.2-building-prototype/"
     title="2. 动手做出原型"
     description="学习如何快速将产品想法转化为可视化的原型，进行低成本试错。"
   />
   <NavCard
-    href="/zh-cn/stage-1/1.3-integrating-ai-capabilities/"
+    href="/easy-vibe/zh-cn/stage-1/1.3-integrating-ai-capabilities/"
     title="3. 给原型加上 AI 能力"
     description="通过集成简单的 AI API，让你的原型具备智能交互能力。"
   />
   <NavCard
-    href="/zh-cn/stage-1/1.4-complete-project-practice/"
+    href="/easy-vibe/zh-cn/stage-1/1.4-complete-project-practice/"
     title="4. 完整项目实战"
     description="综合运用所学知识，从 0 到 1 完成一个完整的产品原型开发。"
   />
   <NavCard
-    href="/zh-cn/stage-1/appendix-a-product-thinking/"
+    href="/easy-vibe/zh-cn/stage-1/appendix-a-product-thinking/"
     title="附录 A：产品思维补充"
     description="补充产品经理必备的思维模型，提升需求分析与产品设计能力。"
   />
   <NavCard
-    href="/zh-cn/stage-1/appendix-b-common-errors/"
+    href="/easy-vibe/zh-cn/stage-1/appendix-b-common-errors/"
     title="附录 B：常见报错及解决方案"
     description="汇总开发过程中常见的报错信息及解决方法，助你快速排查问题。"
   />

docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md

@@ -13,9 +13,7 @@ const duration = '约 <strong>1 天</strong>'
 
 <ChapterIntroduction :duration="duration" :tags="['API', '文本模型', '文生图', '原型集成']" coreOutput="原型接入 1 个文本模型 + 1 个图像模型（可选）" expectedOutput="可调用真实 API 的 AI 原型">
 
-在上一节中，你已经做出了一个「能跑起来」的产品原型；但只靠静态页面和前端逻辑，它离“能真正帮你提高效率”还差一步：把 AI 能力接进来。
-
-本章会用非常务实的视角讲清楚一件事：**接入任何 AI API，本质上都是“拿到 API Key + 读懂官方示例 + 让 AI 帮你落到代码里”**。你会以 DeepSeek 作为文本模型示例，并从多个图像生成服务中挑一个集成到自己的原型里。
+上一节搭好的原型目前还只是静态页面。本章**接入真实 AI 能力**：拿到 API Key、读懂官方示例、让 AI IDE 帮你集成到代码里。以 DeepSeek 文本模型为例，并可选接入图像生成服务。
 
 </ChapterIntroduction>
 

docs/zh-cn/stage-1/1.4-complete-project-practice/index.md

@@ -13,16 +13,9 @@ const duration = '约 <strong>3 天</strong>'
 
 <ChapterIntroduction :duration="duration" :tags="['产品思维', '模拟数据', '交互完善', 'LocalStorage']" coreOutput="1 个功能完备的 AI 产品原型" expectedOutput="包含完整链路与真实数据的 Web 应用">
 
-在前面的课程中，你已经完成了“业务分析”、“原型搭建”和“AI 能力接入”。现在的你，手中应该有一个能跑通基本流程的 Demo。
+接入 AI 后的 Demo 已经可以调用真实能力，但离真正的"产品"还差几步：页面刷新数据丢失、报错直接白屏、列表只有测试数据、用户操作无法撤销...
 
-但 Demo 和真正的“产品”之间，还隔着一条鸿沟：
-
-- 页面是不是一刷新就没了？
-- 报错的时候是不是直接白屏？
-- 列表里是不是只有一条“测试数据”？
-- 用户点错了有没有后悔药（撤销/删除）？
-
-本章我们将进行最后的冲刺，把手中的 Demo 打磨成一个**“拿得出手”的完整产品原型**。我们将学习如何补全缺失的链路、如何用 AI 生成逼真的模拟数据，以及如何通过快速反馈来迭代产品。
+本章将帮你补全这些缺失的链路，用 AI 生成逼真的模拟数据，把 Demo 打磨成**拿得出手的完整原型**。
 
 </ChapterIntroduction>
 

docs/zh-cn/stage-2/intro.md

@@ -10,27 +10,27 @@
 
 <NavGrid>
   <NavCard
-    href="/zh-cn/stage-2/frontend/2.0-lovart-assets/"
+    href="/easy-vibe/zh-cn/stage-2/frontend/2.0-lovart-assets/"
     title="前端零：使用 Lovart 生产素材"
     description="学习如何使用 Lovart 等 AI 工具快速生成高质量的游戏素材与 UI 资源"
   />
   <NavCard
-    href="/zh-cn/stage-2/frontend/2.1-figma-mastergo/"
+    href="/easy-vibe/zh-cn/stage-2/frontend/2.1-figma-mastergo/"
     title="前端一：Figma 与 MasterGo 入门"
     description="掌握专业 UI 设计工具的基础操作，从设计稿到代码的协作流程"
   />
   <NavCard
-    href="/zh-cn/stage-2/frontend/2.2-ui-design/"
+    href="/easy-vibe/zh-cn/stage-2/frontend/2.2-ui-design/"
     title="前端二：构建第一个现代应用程序 - UI 设计"
     description="从零开始设计一个现代 Web 应用的界面，实践 UI 设计原则"
   />
   <NavCard
-    href="/zh-cn/stage-2/frontend/2.3-multi-product-ui/"
+    href="/easy-vibe/zh-cn/stage-2/frontend/2.3-multi-product-ui/"
     title="前端三：参考 UI 设计规范与多产品 UI 设计"
     description="学习主流 UI 设计规范，提升产品设计的一致性与美感"
   />
   <NavCard
-    href="/zh-cn/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits"
+    href="/easy-vibe/zh-cn/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits"
     title="前端四：一起做霍格沃茨画像"
     description="实战项目：结合 AI 生成的图像，构建一个交互式的霍格沃茨画像应用"
   />
@@ -42,37 +42,37 @@
 
 <NavGrid>
   <NavCard
-    href="/zh-cn/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api"
+    href="/easy-vibe/zh-cn/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api"
     title="后端一：什么是 API"
     description="理解 API 的核心概念，它是前后端交互的桥梁"
   />
   <NavCard
-    href="/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase"
+    href="/easy-vibe/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase"
     title="后端二：从数据库到 Supabase"
     description="掌握关系型数据库基础，并学习使用 Supabase 这一现代 BaaS 平台"
   />
   <NavCard
-    href="/zh-cn/stage-2/backend/2.3-ai-interface-code/"
+    href="/easy-vibe/zh-cn/stage-2/backend/2.3-ai-interface-code/"
     title="后端三：大模型辅助编写接口代码与接口文档"
     description="利用 AI 辅助生成后端接口代码及标准的接口文档，提升开发效率"
   />
   <NavCard
-    href="/zh-cn/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github"
+    href="/easy-vibe/zh-cn/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github"
     title="后端四：Git 工作流"
     description="掌握 Git 版本控制系统的核心操作与协作流程"
   />
   <NavCard
-    href="/zh-cn/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications"
+    href="/easy-vibe/zh-cn/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications"
     title="后端五：Zeabur 部署"
     description="学习使用 Zeabur 快速部署你的全栈应用到云端"
   />
   <NavCard
-    href="/zh-cn/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development"
+    href="/easy-vibe/zh-cn/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development"
     title="后端六：现代 CLI 开发工具"
     description="探索现代 CLI 工具，提升命令行环境下的开发体验"
   />
   <NavCard
-    href="/zh-cn/stage-2/backend/2.7-stripe-payment/"
+    href="/easy-vibe/zh-cn/stage-2/backend/2.7-stripe-payment/"
     title="后端七：如何集成 Stripe 等收费系统"
     description="实战：为你的应用集成 Stripe 支付功能，实现商业化变现"
   />
@@ -84,12 +84,12 @@
 
 <NavGrid>
   <NavCard
-    href="/zh-cn/stage-2/assignments/2.1-fullstack-app/"
+    href="/easy-vibe/zh-cn/stage-2/assignments/2.1-fullstack-app/"
     title="大作业 1：构建第一个现代应用程序 - 全栈应用"
     description="综合运用所学知识，独立完成一个功能完整的全栈应用开发"
   />
   <NavCard
-    href="/zh-cn/stage-2/assignments/2.2-modern-frontend-trae/"
+    href="/easy-vibe/zh-cn/stage-2/assignments/2.2-modern-frontend-trae/"
     title="大作业 2：现代前端组件库 + Trae 实战"
     description="使用现代组件库与 Trae IDE，高效构建复杂的前端界面"
   />
@@ -99,12 +99,12 @@
 
 <NavGrid>
   <NavCard
-    href="/zh-cn/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration"
+    href="/easy-vibe/zh-cn/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration"
     title="AI 一：Dify 入门与知识库集成"
     description="学习使用 Dify 构建 AI 应用，并集成私有知识库"
   />
   <NavCard
-    href="/zh-cn/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook"
+    href="/easy-vibe/zh-cn/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook"
     title="AI 二：学会查询 AI 词典与集成多模态 API"
     description="探索更多 AI 能力，集成视觉、语音等多模态 API"
   />

docs/zh-cn/stage-3/intro.md

@@ -10,12 +10,12 @@
 
 <NavGrid>
   <NavCard
-    href="/zh-cn/stage-3/core-skills/3.1-mcp-claudecode-skills/"
+    href="/easy-vibe/zh-cn/stage-3/core-skills/3.1-mcp-claudecode-skills/"
     title="高级一：MCP 与 ClaudeCode Skills"
     description="掌握 Model Context Protocol (MCP)，扩展 AI 编程工具的能力边界"
   />
   <NavCard
-    href="/zh-cn/stage-3/core-skills/3.2-long-running-tasks/"
+    href="/easy-vibe/zh-cn/stage-3/core-skills/3.2-long-running-tasks/"
     title="高级二：如何让 Coding Tools 长时间工作"
     description="学习如何让 AI 编码工具处理长时间运行的复杂任务"
   />
@@ -27,22 +27,22 @@
 
 <NavGrid>
   <NavCard
-    href="/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/"
+    href="/easy-vibe/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/"
     title="高级三：如何构建微信小程序"
     description="从零开始开发微信小程序，掌握小程序开发的核心流程"
   />
   <NavCard
-    href="/zh-cn/stage-3/cross-platform/3.4-wechat-miniprogram-backend/"
+    href="/easy-vibe/zh-cn/stage-3/cross-platform/3.4-wechat-miniprogram-backend/"
     title="高级四：如何构建微信小程序（包含后端）"
     description="构建带有后端支持的完整微信小程序应用"
   />
   <NavCard
-    href="/zh-cn/stage-3/cross-platform/3.5-android-app/"
+    href="/easy-vibe/zh-cn/stage-3/cross-platform/3.5-android-app/"
     title="高级五：如何构建安卓程序"
     description="使用现代跨平台框架构建 Android 原生应用"
   />
   <NavCard
-    href="/zh-cn/stage-3/cross-platform/3.6-ios-app/"
+    href="/easy-vibe/zh-cn/stage-3/cross-platform/3.6-ios-app/"
     title="高级六：如何构建 iOS 程序"
     description="开发并发布 iOS 应用，掌握 iOS 生态的开发规范"
   />
@@ -54,7 +54,7 @@
 
 <NavGrid>
   <NavCard
-    href="/zh-cn/stage-3/personal-brand/3.7-personal-website-blog/"
+    href="/easy-vibe/zh-cn/stage-3/personal-brand/3.7-personal-website-blog/"
     title="高级七：如何构建属于自己的个人网页与学术博客"
     description="使用现代化技术栈搭建高性能、高颜值的个人博客"
   />
@@ -66,12 +66,12 @@
 
 <NavGrid>
   <NavCard
-    href="/zh-cn/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future"
+    href="/easy-vibe/zh-cn/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future"
     title="高级 AI 一：什么是 RAG 以及它如何工作"
     description="深入理解检索增强生成 (RAG) 的原理及其在 AI 应用中的价值"
   />
   <NavCard
-    href="/zh-cn/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/"
+    href="/easy-vibe/zh-cn/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/"
     title="高级 AI 二：中高级 RAG 与工作流编排 - 以 LangGraph 为例"
     description="学习使用 LangGraph 编排复杂的 AI 工作流，构建高级 RAG 系统"
   />