feat(docs): add NavGrid/NavCard components and restructure stage pages

- Add NavGrid.vue and NavCard.vue components for better navigation layout - Restructure stage-0 index pages across languages into intro.md with new navigation components - Remove old stage-0 index.md files and update stage-3 pages similarly - Add new dependencies 'claude' and 'codex' to package.json - Improve code formatting in multiple Vue components for better readability - Update documentation content and structure for better user experience
2026-02-01 23:42:12 +08:00
parent a9a5c5c8a7
commit ad95658a11
171 changed files with 16366 additions and 7946 deletions
@@ -1,40 +0,0 @@
-# 附录
-
-人工智能基础与全栈开发基础知识。
-
-## 人工智能基础
- [提示词工程](/zh-tw/appendix/prompt-engineering)
- [人工智能进化史](/zh-tw/appendix/ai-evolution)
- [大语言模型](/zh-tw/appendix/llm-intro)
- [多模态大模型](/zh-tw/appendix/vlm-intro)
- [AI 绘画原理](/zh-tw/appendix/image-gen-intro)
- [AI 音频模型](/zh-tw/appendix/audio-intro)
- [上下文工程](/zh-tw/appendix/context-engineering)
- [Agent 智能体](/zh-tw/appendix/agent-intro)
- [AI 能力词典](/zh-tw/appendix/ai-capability-dictionary)
-
-## 前端开发
- [HTML/CSS/JS 基础](/zh-tw/appendix/web-basics)
- [前端进化史](/zh-tw/appendix/frontend-evolution)
- [前端性能优化](/zh-tw/appendix/frontend-performance)
- [Canvas 2D 入门](/zh-tw/appendix/canvas-intro)
- [URL 到浏览器显示](/zh-tw/appendix/url-to-browser)
- [浏览器调试器](/zh-tw/appendix/browser-devtools)
-
-## 后端开发
- [后端进化史](/zh-tw/appendix/backend-evolution)
- [后端编程语言](/zh-tw/appendix/backend-languages)
- [数据库原理](/zh-tw/appendix/database-intro)
- [系统缓存设计](/zh-tw/appendix/cache-design)
- [消息队列设计](/zh-tw/appendix/queue-design)
- [鉴权原理与实战](/zh-tw/appendix/auth-design)
- [埋点设计](/zh-tw/appendix/tracking-design)
- [线上运维](/zh-tw/appendix/operations)
-
-## 通用技能
- [API 入门](/zh-tw/appendix/api-intro)
- [IDE 原理](/zh-tw/appendix/ide-intro)
- [终端入门](/zh-tw/appendix/terminal-intro)
- [Git 详细介绍](/zh-tw/appendix/git-intro)
- [计算机网络](/zh-tw/appendix/computer-networks)
- [部署与上线](/zh-tw/appendix/deployment)
@@ -0,0 +1,186 @@
+# 附錄
+
+歡迎來到 **附錄** 部分！這裡匯集了人工智能基礎與全棧開發的基礎知識，是你學習過程中的重要參考資料庫。
+
+## 內容分類
+
+### 人工智能基礎
+
+了解人工智能的核心概念、發展歷史及前沿技術原理：
+<NavGrid>
+  <NavCard
+    href="/zh-tw/appendix/prompt-engineering/"
+    title="提示詞工程"
+    description="掌握與 AI 高效對話的技巧，解鎖大模型的潛力"
+  />
+  <NavCard
+    href="/zh-tw/appendix/ai-evolution"
+    title="人工智能進化史"
+    description="回顧 AI 發展歷程中的關鍵里程碑，理解技術演進脈絡"
+  />
+  <NavCard
+    href="/zh-tw/appendix/llm-intro"
+    title="大語言模型"
+    description="深入淺出解析大語言模型（LLM）的工作原理與應用"
+  />
+  <NavCard
+    href="/zh-tw/appendix/vlm-intro"
+    title="多模態大模型"
+    description="探索能夠處理圖像、音頻等多種數據模態的先進模型"
+  />
+  <NavCard
+    href="/zh-tw/appendix/image-gen-intro"
+    title="AI 繪畫原理"
+    description="揭秘 AI 圖像生成的底層邏輯與技術實現"
+  />
+  <NavCard
+    href="/zh-tw/appendix/audio-intro"
+    title="AI 音頻模型"
+    description="了解 AI 在語音合成、識別與音樂生成領域的應用"
+  />
+  <NavCard
+    href="/zh-tw/appendix/context-engineering"
+    title="上下文工程"
+    description="學習如何優化上下文管理，提升 AI 任務的長程連貫性"
+  />
+  <NavCard
+    href="/zh-tw/appendix/agent-intro"
+    title="Agent 智能體"
+    description="探索具備自主決策與執行能力的 AI 智能體架構"
+  />
+  <NavCard
+    href="/zh-tw/appendix/ai-capability-dictionary"
+    title="AI 能力詞典"
+    description="AI 領域常用術語與核心概念的速查手冊"
+  />
+</NavGrid>
+
+
+### 前端基礎
+
+夯實前端開發的技術基礎：
+<NavGrid>
+  <NavCard
+    href="/zh-tw/appendix/web-basics"
+    title="HTML/CSS/JS 基礎"
+    description="構建 Web 頁面的三大基石，前端開發的入門必修課"
+  />
+  <NavCard
+    href="/zh-tw/appendix/frontend-evolution"
+    title="前端進化史"
+    description="了解前端技術棧的演變歷程，把握技術發展趨勢"
+  />
+  <NavCard
+    href="/zh-tw/appendix/frontend-performance"
+    title="前端性能優化"
+    description="學習提升網頁加載速度與交互流暢度的關鍵策略"
+  />
+  <NavCard
+    href="/zh-tw/appendix/canvas-intro"
+    title="Canvas 2D 入門"
+    description="掌握 Canvas 繪圖 API，實現炫酷的圖形與動畫效果"
+  />
+  <NavCard
+    href="/zh-tw/appendix/url-to-browser"
+    title="URL 到瀏覽器顯示"
+    description="全鏈路解析瀏覽器渲染頁面的完整過程"
+  />
+  <NavCard
+    href="/zh-tw/appendix/browser-devtools/"
+    title="瀏覽器調試器"
+    description="熟練使用開發者工具，高效定位與解決前端問題"
+  />
+</NavGrid>
+
+
+### 後端基礎
+
+掌握後端開發的核心概念：
+<NavGrid>
+  <NavCard
+    href="/zh-tw/appendix/backend-evolution"
+    title="後端進化史"
+    description="從單體到微服務，探索後端架構的演進之路"
+  />
+  <NavCard
+    href="/zh-tw/appendix/backend-languages"
+    title="後端編程語言"
+    description="對比主流後端語言的特性與適用場景，選擇最佳技術棧"
+  />
+  <NavCard
+    href="/zh-tw/appendix/database-intro"
+    title="數據庫原理"
+    description="理解數據庫核心原理，掌握數據存儲與檢索的藝術"
+  />
+  <NavCard
+    href="/zh-tw/appendix/cache-design"
+    title="系統緩存設計"
+    description="學習緩存策略，提升系統的高並發處理能力"
+  />
+  <NavCard
+    href="/zh-tw/appendix/queue-design"
+    title="消息隊列設計"
+    description="掌握消息隊列在解耦、削峰填谷中的關鍵作用"
+  />
+  <NavCard
+    href="/zh-tw/appendix/auth-design"
+    title="鑒權原理與實戰"
+    description="構建安全的身份認證與權限管理系統"
+  />
+  <NavCard
+    href="/zh-tw/appendix/tracking-design"
+    title="埋點設計"
+    description="科學設計數據埋點，為產品決策提供數據支持"
+  />
+  <NavCard
+    href="/zh-tw/appendix/operations"
+    title="線上運維"
+    description="掌握系統部署、監控與故障排查的運維技能"
+  />
+</NavGrid>
+
+
+### 通用技術
+
+軟件開發的基礎知識：
+<NavGrid>
+  <NavCard
+    href="/zh-tw/appendix/api-intro"
+    title="API 入門"
+    description="API 接口設計與開發的基礎知識"
+  />
+  <NavCard
+    href="/zh-tw/appendix/ide-intro/"
+    title="IDE 原理"
+    description="了解集成開發環境（IDE）的內部工作機制"
+  />
+  <NavCard
+    href="/zh-tw/appendix/terminal-intro"
+    title="終端入門"
+    description="掌握命令行終端的基本操作，提升開發效率"
+  />
+  <NavCard
+    href="/zh-tw/appendix/git-intro"
+    title="Git 詳細介紹"
+    description="深入理解 Git 版本控制原理與高級用法"
+  />
+  <NavCard
+    href="/zh-tw/appendix/computer-networks"
+    title="計算機網絡"
+    description="網絡協議與通信原理的基礎知識"
+  />
+  <NavCard
+    href="/zh-tw/appendix/deployment"
+    title="部署與上線"
+    description="應用部署發布的完整流程與最佳實踐"
+  />
+</NavGrid>
+
+
+## 使用建議
+
+- 作為學習過程中的參考資料，按需查閱
+- 遇到不熟悉的技術概念時，先來這裡尋找解釋
+- 建議通讀一遍，建立完整的知識體系
+
+這裡是你的技術知識寶庫，隨時歡迎查閱！
@@ -1,24 +0,0 @@
-# AI 產品經理
-
-歡迎來到 AI 產品經理階段。在這裡，你將從零開始，掌握 Vibe Coding 工作流，成為能夠獨立完成產品設計的超級個體。
-
-## 階段概覽
-
-### 新手入門
-適合產品、運營及非技術背景。通過做遊戲理解 AI 編程邏輯，建立信心。
-
- 1. 學習地圖 (即將推出)
- 2. AI 時代，會說話就會編程 (即將推出)
-
-### 產品經理
-掌握 Vibe Coding 工作流。學會拆解需求，獨立完成高保真 Web 應用原型。
-
- 1. 認識 AI IDE 工具 (即將推出)
- 2. 動手做出原型 (即將推出)
- 3. 給原型加上 AI 能力 (即將推出)
- 4. 完整項目實戰 (即將推出)
- 附錄 A：產品思維補充 (即將推出)
- 附錄 B：常見報錯及解決方案 (即將推出)
- 附錄 C：產業多分類場景方向參考 (即將推出)
- 擴展閱讀 1：7 款主流 Vibe Coding 在線平台實測對比 (即將推出)
- 擴展閱讀 2：用編程和設計智能體開發網站 (即將推出)
@@ -0,0 +1,66 @@
+# 新手與產品原型
+
+歡迎來到 **AI 產品經理** 階段！這是 Easy-Vibe 教程的起點，專為零基礎學習者設計。
+
+## 你將學到什麼
+
+在這個階段，你將從零開始，掌握 Vibe Coding 工作流，成為能夠獨立完成產品設計的超級個體。
+
+### 新手入門
+
+適合產品、運營及非技術背景。通過做遊戲理解 AI 編程邏輯，建立信心：
+<NavGrid>
+  <NavCard
+    href="/zh-tw/stage-0/0.1-learning-map/"
+    title="學習地圖"
+    description="了解整個學習路徑，明確每個階段的目標和收穫"
+  />
+  <NavCard
+    href="/zh-tw/stage-0/0.2-ai-capabilities-through-games/"
+    title="AI 時代，會說話就會編程"
+    description="通過貪吃蛇等小遊戲，體驗 AI 編程的魅力，打破對編程的恐懼"
+  />
+</NavGrid>
+
+
+### 產品經理
+
+掌握 Vibe Coding 工作流。學會拆解需求，獨立完成高保真 Web 應用原型：
+<NavGrid>
+  <NavCard
+    href="/zh-tw/stage-1/1.1-introduction-to-ai-ide/"
+    title="認識 AI IDE 工具"
+    description="了解當前主流的 AI 編程工具，選擇最適合你的開發搭檔"
+  />
+  <NavCard
+    href="/zh-tw/stage-1/1.2-building-prototype/"
+    title="動手做出原型"
+    description="學習如何快速將產品想法轉化為可視化的原型，進行低成本試錯"
+  />
+  <NavCard
+    href="/zh-tw/stage-1/1.3-integrating-ai-capabilities/"
+    title="給原型加上 AI 能力"
+    description="通過集成簡單的 AI API，讓你的原型具備智能交互能力"
+  />
+  <NavCard
+    href="/zh-tw/stage-1/1.4-complete-project-practice/"
+    title="完整項目實戰"
+    description="綜合運用所學知識，從 0 到 1 完成一個完整的產品原型開發"
+  />
+</NavGrid>
+
+
+## 適合人群
+
+- 零基礎的產品經理、運營人員
+- 想要快速驗證想法的創業者
+- 對 AI 編程感興趣的非技術背景人士
+- 希望提升原型設計能力的設計師
+
+## 學習路徑
+
+```
+新手入門 → 產品經理基礎 → AI 能力集成 → 完整項目實戰
+```
+
+準備好開始你的 AI 編程之旅了嗎？點擊左側導航開始學習吧！
@@ -1,27 +0,0 @@
-# 初中级开发
-
-深入全栈开发。前端组件化、数据库设计、后端 API 开发与部署上线。
-
-## 前端开发
- [前端零：使用 Lovart 生产素材](/zh-tw/stage-2/frontend/2.0-lovart-assets/)
- [前端一：Figma 与 MasterGo 入门](/zh-tw/stage-2/frontend/2.1-figma-mastergo/)
- [前端二：构建第一个现代应用程序 - UI 设计](/zh-tw/stage-2/frontend/2.2-ui-design/)
- [前端三：参考 UI 设计规范与多产品 UI 设计](/zh-tw/stage-2/frontend/2.3-multi-product-ui/)
- [前端四：一起做霍格沃茨画像](/zh-tw/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits)
-
-## 后端与全栈
- [后端一：什么是 API](/zh-tw/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api)
- [后端二：从数据库到 Supabase](/zh-tw/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase)
- [后端三：大模型辅助编写接口代码与接口文档](/zh-tw/stage-2/backend/2.3-ai-interface-code/)
- [后端四：Git 工作流](/zh-tw/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github)
- [后端五：Zeabur 部署](/zh-tw/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications)
- [后端六：现代 CLI 开发工具](/zh-tw/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development)
- [后端七：如何集成 Stripe 等收费系统](/zh-tw/stage-2/backend/2.7-stripe-payment/)
-
-## 大作业
- [大作业 1：构建第一个现代应用程序 - 全栈应用](/zh-tw/stage-2/assignments/2.1-fullstack-app/)
- [大作业 2：现代前端组件库 + Trae 实战](/zh-tw/stage-2/assignments/2.2-modern-frontend-trae/)
-
-## AI 能力附录
- [AI 一：Dify 入门与知识库集成](/zh-tw/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration)
- [AI 二：学会查询 AI 词典与集成多模态 API](/zh-tw/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook)
@@ -0,0 +1,126 @@
+# 初中級開發
+
+歡迎來到 **初中級開發** 階段！在這裡，你將深入全棧開發，掌握前端組件化、數據庫設計、後端 API 開發與部署上線。
+
+## 你將學到什麼
+
+### 前端開發
+
+掌握現代前端開發，學習組件庫與設計工具的使用：
+<NavGrid>
+  <NavCard
+    href="#"
+    title="前端零：使用 Lovart 生產素材"
+    description="學習如何使用 Lovart 等 AI 工具快速生成高質量的遊戲素材與 UI 資源"
+  />
+  <NavCard
+    href="#"
+    title="前端一：Figma 與 MasterGo 入門"
+    description="掌握專業 UI 設計工具的基礎操作，從設計稿到代碼的協作流程"
+  />
+  <NavCard
+    href="#"
+    title="前端二：構建第一個現代應用程序 - UI 設計"
+    description="從零開始設計一個現代 Web 應用的界面，實踐 UI 設計原則"
+  />
+  <NavCard
+    href="#"
+    title="前端三：參考 UI 設計規範與多產品 UI 設計"
+    description="學習主流 UI 設計規範，提升產品設計的一致性與美感"
+  />
+  <NavCard
+    href="#"
+    title="前端四：一起做霍格沃茨畫像"
+    description="實戰項目：結合 AI 生成的圖像，構建一個交互式的霍格沃茨畫像應用"
+  />
+</NavGrid>
+
+
+### 後端與全棧
+
+學習 API 設計、數據庫管理以及應用部署策略：
+<NavGrid>
+  <NavCard
+    href="#"
+    title="後端一：什麼是 API"
+    description="理解 API 的核心概念，它是前後端交互的橋樑"
+  />
+  <NavCard
+    href="#"
+    title="後端二：從數據庫到 Supabase"
+    description="掌握關係型數據庫基礎，並學習使用 Supabase 這一現代 BaaS 平台"
+  />
+  <NavCard
+    href="#"
+    title="後端三：大模型輔助編寫接口代碼與接口文檔"
+    description="利用 AI 輔助生成後端接口代碼及標準的接口文檔，提升開發效率"
+  />
+  <NavCard
+    href="#"
+    title="後端四：Git 工作流"
+    description="掌握 Git 版本控制系統的核心操作與協作流程"
+  />
+  <NavCard
+    href="#"
+    title="後端五：Zeabur 部署"
+    description="學習使用 Zeabur 快速部署你的全棧應用到雲端"
+  />
+  <NavCard
+    href="#"
+    title="後端六：現代 CLI 開發工具"
+    description="探索現代 CLI 工具，提升命令行環境下的開發體驗"
+  />
+  <NavCard
+    href="#"
+    title="後端七：如何集成 Stripe 等收費系統"
+    description="實戰：為你的應用集成 Stripe 支付功能，實現商業化變現"
+  />
+</NavGrid>
+
+
+### 大作業
+
+通過實戰項目鞏固你的全棧開發技能：
+<NavGrid>
+  <NavCard
+    href="#"
+    title="大作業 1：構建第一個現代應用程序 - 全棧應用"
+    description="綜合運用所學知識，獨立完成一個功能完整的全棧應用開發"
+  />
+  <NavCard
+    href="#"
+    title="大作業 2：現代前端組件庫 + Trae 實戰"
+    description="使用現代組件庫與 Trae IDE，高效構建複雜的前端界面"
+  />
+</NavGrid>
+
+
+### AI 能力擴展
+<NavGrid>
+  <NavCard
+    href="#"
+    title="AI 一：Dify 入門與知識庫集成"
+    description="學習使用 Dify 構建 AI 應用，並集成私有知識庫"
+  />
+  <NavCard
+    href="#"
+    title="AI 二：學會查詢 AI 詞典與集成多模態 API"
+    description="探索更多 AI 能力，集成視覺、語音等多模態 API"
+  />
+</NavGrid>
+
+
+## 適合人群
+
+- 有一定編程基礎，想系統學習全棧開發的開發者
+- 希望從產品經理轉型為全棧工程師的學習者
+- 想要掌握現代開發工具和工作流的初中級開發者
+- 希望獨立開發完整產品的創業者
+
+## 前置要求
+
+- 完成「新手與產品原型」階段，或具備同等基礎知識
+- 了解基本的 HTML/CSS/JavaScript 概念
+- 對 AI 編程工具有初步了解
+
+準備好深入全棧開發了嗎？點擊左側導航開始學習吧！
@@ -1,20 +0,0 @@
-# 高级开发
-
-构建复杂跨平台应用。微信小程序实战，挑战更高阶的 AI 原生应用开发。
-
-## 核心技能
- [高级一：MCP 与 ClaudeCode Skills](/zh-tw/stage-3/core-skills/3.1-mcp-claudecode-skills/)
- [高级二：如何让 Coding Tools 长时间工作](/zh-tw/stage-3/core-skills/3.2-long-running-tasks/)
-
-## 多平台开发
- [高级三：如何构建微信小程序](/zh-tw/stage-3/cross-platform/3.3-wechat-miniprogram/)
- [高级四：如何构建微信小程序（包含后端）](/zh-tw/stage-3/cross-platform/3.4-wechat-miniprogram-backend/)
- [高级五：如何构建安卓程序](/zh-tw/stage-3/cross-platform/3.5-android-app/)
- [高级六：如何构建 iOS 程序](/zh-tw/stage-3/cross-platform/3.6-ios-app/)
-
-## 个人品牌
- [高级七：如何构建属于自己的个人网页与学术博客](/zh-tw/stage-3/personal-brand/3.7-personal-website-blog/)
-
-## AI 能力附录
- [高级 AI 一：什么是 RAG 以及它如何工作](/zh-tw/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future)
- [高级 AI 二：中高级 RAG 与工作流编排 - 以 LangGraph 为例](/zh-tw/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/)
@@ -0,0 +1,93 @@
+# 高級開發
+
+歡迎來到 **高級開發** 階段！在這裡，你將構建複雜跨平台應用，掌握微信小程序實戰，挑戰更高階的 AI 原生應用開發。
+
+## 你將學到什麼
+
+### 核心技能
+
+深入掌握 MCP 協議與 Claude Code 高級技巧，提升開發效率：
+<NavGrid>
+  <NavCard
+    href="#"
+    title="高級一：MCP 與 ClaudeCode Skills"
+    description="掌握 Model Context Protocol (MCP)，擴展 AI 編程工具的能力邊界"
+  />
+  <NavCard
+    href="#"
+    title="高級二：如何讓 Coding Tools 長時間工作"
+    description="學習如何讓 AI 編碼工具處理長時間運行的複雜任務"
+  />
+</NavGrid>
+
+
+### 多平台開發
+
+構建微信小程序、Android 和 iOS 應用，實現跨平台覆蓋：
+<NavGrid>
+  <NavCard
+    href="#"
+    title="高級三：如何構建微信小程序"
+    description="從零開始開發微信小程序，掌握小程序開發的核心流程"
+  />
+  <NavCard
+    href="#"
+    title="高級四：如何構建微信小程序（包含後端）"
+    description="構建帶有後端支持的完整微信小程序應用"
+  />
+  <NavCard
+    href="#"
+    title="高級五：如何構建安卓程序"
+    description="使用現代跨平台框架構建 Android 原生應用"
+  />
+  <NavCard
+    href="#"
+    title="高級六：如何構建 iOS 程序"
+    description="開發並發布 iOS 應用，掌握 iOS 生態的開發規範"
+  />
+</NavGrid>
+
+
+### 個人品牌
+
+打造屬於自己的個人網站與技術博客，建立個人影響力：
+<NavGrid>
+  <NavCard
+    href="#"
+    title="高級七：如何構建屬於自己的個人網頁與學術博客"
+    description="使用現代化技術棧搭建高性能、高顏值的個人博客"
+  />
+</NavGrid>
+
+
+### AI 能力附錄
+
+探索 RAG、LangGraph 等高級 AI 技術，構建複雜的 AI 應用工作流：
+<NavGrid>
+  <NavCard
+    href="#"
+    title="高級 AI 一：什麼是 RAG 以及它如何工作"
+    description="深入理解檢索增強生成 (RAG) 的原理及其在 AI 應用中的價值"
+  />
+  <NavCard
+    href="#"
+    title="高級 AI 二：中高級 RAG 與工作流編排 - 以 LangGraph 為例"
+    description="學習使用 LangGraph 編排複雜的 AI 工作流，構建高級 RAG 系統"
+  />
+</NavGrid>
+
+
+## 適合人群
+
+- 具備全棧開發經驗，想挑戰更複雜應用的高級開發者
+- 希望掌握跨平台開發技術的工程師
+- 想要深入了解 AI 原生應用開發的探索者
+- 希望建立個人技術品牌的技術博主
+
+## 前置要求
+
+- 完成「初中級開發」階段，或具備全棧開發經驗
+- 熟悉前端框架（如 React/Vue）和後端開發
+- 了解基本的 AI 概念和 API 使用
+
+準備好挑戰高級開發了嗎？點擊左側導航開始學習吧！