feat: refactor landing pages with ArticleGrid component and fix navigation

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

 <div class="stage-container">
-  <a :href="base + 'zh-cn/stage-0/0.1-learning-map/'" class="stage-card">
-    <div class="stage-icon">🌱</div>
-    <h3>Stage 0: 新手入门</h3>
-    <p>适合产品、运营及非技术背景。通过做游戏理解 AI 编程逻辑，建立信心。</p>
-    <span>查看详情 →</span>
-  </a>
-  <a :href="base + 'zh-cn/stage-1/1.1-introduction-to-ai-ide/'" class="stage-card">
+  <a :href="base + 'zh-cn/stage-0/'" class="stage-card">
    <div class="stage-icon">🎨</div>
    <h3>Stage 1: AI 产品经理</h3>
-    <p>掌握 Vibe Coding 工作流。学会拆解需求，独立完成高保真 Web 应用原型。</p>
+    <p>适合产品、运营及非技术背景。从做游戏建立信心，到掌握 Vibe Coding 工作流，独立完成高保真 Web 应用原型。</p>
    <span>查看详情 →</span>
  </a>
-  <a :href="base + 'zh-cn/stage-2/frontend/2.0-lovart-assets/'" class="stage-card">
+  <a :href="base + 'zh-cn/stage-2/'" class="stage-card">
    <div class="stage-icon">💻</div>
    <h3>Stage 2: 初中级开发</h3>
    <p>深入全栈开发。前端组件化、数据库设计、后端 API 开发与部署上线。</p>
    <span>查看详情 →</span>
  </a>
-  <a :href="base + 'zh-cn/stage-3/core-skills/3.1-mcp-claudecode-skills/'" class="stage-card">
+  <a :href="base + 'zh-cn/stage-3/'" class="stage-card">
    <div class="stage-icon">🚀</div>
    <h3>Stage 3: 高级开发</h3>
    <p>构建复杂跨平台应用。微信小程序实战，挑战更高阶的 AI 原生应用开发。</p>
@@ -0,0 +1,34 @@
+<script setup>
+const beginnerItems = [
+  { title: '1. 学习地图', link: '/zh-cn/stage-0/0.1-learning-map/', description: '了解整个学习路径，明确每个阶段的目标和收获。' },
+  { title: '2. AI 时代，会说话就会编程', link: '/zh-cn/stage-0/0.2-ai-capabilities-through-games/', description: '通过贪吃蛇等小游戏，体验 AI 编程的魅力，打破对编程的恐惧。' }
+]
+
+const pmItems = [
+  { title: '1. 认识 AI IDE 工具', link: '/zh-cn/stage-1/1.1-introduction-to-ai-ide/', description: '了解当前主流的 AI 编程工具，选择最适合你的开发搭档。' },
+  { title: '2. 动手做出原型', link: '/zh-cn/stage-1/1.2-building-prototype/', description: '学习如何快速将产品想法转化为可视化的原型，进行低成本试错。' },
+  { title: '3. 给原型加上 AI 能力', link: '/zh-cn/stage-1/1.3-integrating-ai-capabilities/', description: '通过集成简单的 AI API，让你的原型具备智能交互能力。' },
+  { title: '4. 完整项目实战', link: '/zh-cn/stage-1/1.4-complete-project-practice/', description: '综合运用所学知识，从 0 到 1 完成一个完整的产品原型开发。' },
+  { title: '附录 A：产品思维补充', link: '/zh-cn/stage-1/appendix-a-product-thinking/', description: '补充产品经理必备的思维模型，提升需求分析与产品设计能力。' },
+  { title: '附录 B：常见报错及解决方案', link: '/zh-cn/stage-1/appendix-b-common-errors/', description: '汇总开发过程中常见的报错信息及解决方法，助你快速排查问题。' },
+  { title: '附录 C：产业多分类场景方向参考', link: '/zh-cn/stage-1/appendix-industry-scenarios/', description: '提供不同行业的 AI 应用场景参考，激发你的产品灵感。' },
+  { title: '扩展阅读 1：7 款主流 Vibe Coding 在线平台实测对比', link: '/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial', description: '深度评测主流 AI 编程平台，助你选择最合适的开发工具。' },
+  { title: '扩展阅读 2：用编程和设计智能体开发网站', link: '/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents', description: '探索使用 AI Agent 自动进行编程和设计的前沿实践。' }
+]
+</script>
+
+# AI 产品经理
+
+欢迎来到 AI 产品经理阶段。在这里，你将从零开始，掌握 Vibe Coding 工作流，成为能够独立完成产品设计的超级个体。
+
+## 新手入门
+
+适合产品、运营及非技术背景。通过做游戏理解 AI 编程逻辑，建立信心。
+
+<ArticleGrid :items="beginnerItems" />
+
+## 产品经理
+
+掌握 Vibe Coding 工作流。学会拆解需求，独立完成高保真 Web 应用原型。
+
+<ArticleGrid :items="pmItems" />
@@ -0,0 +1,57 @@
+<script setup>
+const frontendItems = [
+  { title: '前端零：使用 Lovart 生产素材', link: '/zh-cn/stage-2/frontend/2.0-lovart-assets/', description: '学习如何使用 Lovart 等 AI 工具快速生成高质量的游戏素材与 UI 资源。' },
+  { title: '前端一：Figma 与 MasterGo 入门', link: '/zh-cn/stage-2/frontend/2.1-figma-mastergo/', description: '掌握专业 UI 设计工具的基础操作，从设计稿到代码的协作流程。' },
+  { title: '前端二：构建第一个现代应用程序 - UI 设计', link: '/zh-cn/stage-2/frontend/2.2-ui-design/', description: '从零开始设计一个现代 Web 应用的界面，实践 UI 设计原则。' },
+  { title: '前端三：参考 UI 设计规范与多产品 UI 设计', link: '/zh-cn/stage-2/frontend/2.3-multi-product-ui/', description: '学习主流 UI 设计规范，提升产品设计的一致性与美感。' },
+  { title: '前端四：一起做霍格沃茨画像', link: '/zh-cn/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits', description: '实战项目：结合 AI 生成的图像，构建一个交互式的霍格沃茨画像应用。' }
+]
+
+const backendItems = [
+  { title: '后端一：什么是 API', link: '/zh-cn/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api', description: '理解 API 的核心概念，它是前后端交互的桥梁。' },
+  { title: '后端二：从数据库到 Supabase', link: '/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase', description: '掌握关系型数据库基础，并学习使用 Supabase 这一现代 BaaS 平台。' },
+  { title: '后端三：大模型辅助编写接口代码与接口文档', link: '/zh-cn/stage-2/backend/2.3-ai-interface-code/', description: '利用 AI 辅助生成后端接口代码及标准的接口文档，提升开发效率。' },
+  { title: '后端四：Git 工作流', link: '/zh-cn/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github', description: '掌握 Git 版本控制系统的核心操作与协作流程。' },
+  { title: '后端五：Zeabur 部署', link: '/zh-cn/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications', description: '学习使用 Zeabur 快速部署你的全栈应用到云端。' },
+  { title: '后端六：现代 CLI 开发工具', link: '/zh-cn/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development', description: '探索现代 CLI 工具，提升命令行环境下的开发体验。' },
+  { title: '后端七：如何集成 Stripe 等收费系统', link: '/zh-cn/stage-2/backend/2.7-stripe-payment/', description: '实战：为你的应用集成 Stripe 支付功能，实现商业化变现。' }
+]
+
+const assignmentItems = [
+  { title: '大作业 1：构建第一个现代应用程序 - 全栈应用', link: '/zh-cn/stage-2/assignments/2.1-fullstack-app/', description: '综合运用所学知识，独立完成一个功能完整的全栈应用开发。' },
+  { title: '大作业 2：现代前端组件库 + Trae 实战', link: '/zh-cn/stage-2/assignments/2.2-modern-frontend-trae/', description: '使用现代组件库与 Trae IDE，高效构建复杂的前端界面。' }
+]
+
+const aiItems = [
+  { title: 'AI 一：Dify 入门与知识库集成', link: '/zh-cn/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration', description: '学习使用 Dify 构建 AI 应用，并集成私有知识库。' },
+  { title: 'AI 二：学会查询 AI 词典与集成多模态 API', link: '/zh-cn/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook', description: '探索更多 AI 能力，集成视觉、语音等多模态 API。' }
+]
+</script>
+
+# 初中级开发
+
+深入全栈开发。前端组件化、数据库设计、后端 API 开发与部署上线。
+
+## 前端开发
+
+掌握现代前端开发，学习组件库与设计工具的使用。
+
+<ArticleGrid :items="frontendItems" />
+
+## 后端与全栈
+
+学习 API 设计、数据库管理以及应用部署策略。
+
+<ArticleGrid :items="backendItems" />
+
+## 大作业
+
+通过实战项目巩固你的全栈开发技能。
+
+<ArticleGrid :items="assignmentItems" />
+
+## AI 能力附录
+
+集成知识库、多模态 API 等 AI 功能，提升应用智能化水平。
+
+<ArticleGrid :items="aiItems" />
@@ -0,0 +1,50 @@
+<script setup>
+const coreSkillsItems = [
+  { title: '高级一：MCP 与 ClaudeCode Skills', link: '/zh-cn/stage-3/core-skills/3.1-mcp-claudecode-skills/', description: '掌握 Model Context Protocol (MCP)，扩展 AI 编程工具的能力边界。' },
+  { title: '高级二：如何让 Coding Tools 长时间工作', link: '/zh-cn/stage-3/core-skills/3.2-long-running-tasks/', description: '学习如何让 AI 编码工具处理长时间运行的复杂任务。' }
+]
+
+const crossPlatformItems = [
+  { title: '高级三：如何构建微信小程序', link: '/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/', description: '从零开始开发微信小程序，掌握小程序开发的核心流程。' },
+  { title: '高级四：如何构建微信小程序（包含后端）', link: '/zh-cn/stage-3/cross-platform/3.4-wechat-miniprogram-backend/', description: '构建带有后端支持的完整微信小程序应用。' },
+  { title: '高级五：如何构建安卓程序', link: '/zh-cn/stage-3/cross-platform/3.5-android-app/', description: '使用现代跨平台框架构建 Android 原生应用。' },
+  { title: '高级六：如何构建 iOS 程序', link: '/zh-cn/stage-3/cross-platform/3.6-ios-app/', description: '开发并发布 iOS 应用，掌握 iOS 生态的开发规范。' }
+]
+
+const personalBrandItems = [
+  { title: '高级七：如何构建属于自己的个人网页与学术博客', link: '/zh-cn/stage-3/personal-brand/3.7-personal-website-blog/', description: '使用现代化技术栈搭建高性能、高颜值的个人博客。' }
+]
+
+const aiAdvancedItems = [
+  { title: '高级 AI 一：什么是 RAG 以及它如何工作', link: '/zh-cn/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future', description: '深入理解检索增强生成 (RAG) 的原理及其在 AI 应用中的价值。' },
+  { title: '高级 AI 二：中高级 RAG 与工作流编排 - 以 LangGraph 为例', link: '/zh-cn/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/', description: '学习使用 LangGraph 编排复杂的 AI 工作流，构建高级 RAG 系统。' }
+]
+</script>
+
+# 高级开发
+
+构建复杂跨平台应用。微信小程序实战，挑战更高阶的 AI 原生应用开发。
+
+## 核心技能
+
+深入掌握 MCP 协议与 Claude Code 高级技巧，提升开发效率。
+
+<ArticleGrid :items="coreSkillsItems" />
+
+## 多平台开发
+
+构建微信小程序、Android 和 iOS 应用，实现跨平台覆盖。
+
+<ArticleGrid :items="crossPlatformItems" />
+
+## 个人品牌
+
+打造属于自己的个人网站与技术博客，建立个人影响力。
+
+<ArticleGrid :items="personalBrandItems" />
+
+## AI 能力附录
+
+探索 RAG、LangGraph 等高级 AI 技术，构建复杂的 AI 应用工作流。
+
+<ArticleGrid :items="aiAdvancedItems" />