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,42 +0,0 @@
-# Appendix
-
-Knowledge base for AI, Frontend, Backend, and General Skills.
-
-## Content Overview
-
-### AI Basics
- [Prompt Engineering](/en-us/appendix/prompt-engineering)
- [AI Evolution](/en-us/appendix/ai-evolution)
- [LLM Introduction](/en-us/appendix/llm-intro)
- [VLM Introduction](/en-us/appendix/vlm-intro)
- [AI Image Generation](/en-us/appendix/image-gen-intro)
- [AI Audio Models](/en-us/appendix/audio-intro)
- [Context Engineering](/en-us/appendix/context-engineering)
- [AI Agents](/en-us/appendix/agent-intro)
- [AI Capability Dictionary](/en-us/appendix/ai-capability-dictionary)
-
-### Frontend Development
- [Web Basics (HTML/CSS/JS)](/en-us/appendix/web-basics)
- [Frontend Evolution](/en-us/appendix/frontend-evolution)
- [Frontend Performance](/en-us/appendix/frontend-performance)
- [Canvas 2D](/en-us/appendix/canvas-intro)
- [URL to Browser](/en-us/appendix/url-to-browser)
- [Browser DevTools](/en-us/appendix/browser-devtools)
-
-### Backend Development
- [Backend Evolution](/en-us/appendix/backend-evolution)
- [Backend Languages](/en-us/appendix/backend-languages)
- [Database Principles](/en-us/appendix/database-intro)
- [Cache Design](/en-us/appendix/cache-design)
- [Message Queues](/en-us/appendix/queue-design)
- [Authentication](/en-us/appendix/auth-design)
- [Tracking Design](/en-us/appendix/tracking-design)
- [Operations](/en-us/appendix/operations)
-
-### General Skills
- [API Introduction](/en-us/appendix/api-intro)
- [IDE Introduction](/en-us/appendix/ide-intro)
- [Terminal Introduction](/en-us/appendix/terminal-intro)
- [Git Introduction](/en-us/appendix/git-intro)
- [Computer Networks](/en-us/appendix/computer-networks)
- [Deployment](/en-us/appendix/deployment)
@@ -0,0 +1,186 @@
+# Appendix
+
+Welcome to the **Appendix** section! This is a collection of artificial intelligence fundamentals and full-stack development basics, serving as an important reference library during your learning journey.
+
+## Content Categories
+
+### AI Fundamentals
+
+Understand the core concepts, development history, and cutting-edge technical principles of artificial intelligence:
+<NavGrid>
+  <NavCard
+    href="/en-us/appendix/prompt-engineering/"
+    title="Prompt Engineering"
+    description="Master the art of efficient dialogue with AI to unlock the potential of large models"
+  />
+  <NavCard
+    href="/en-us/appendix/ai-evolution"
+    title="AI Evolution History"
+    description="Review key milestones in AI development and understand the trajectory of technological evolution"
+  />
+  <NavCard
+    href="/en-us/appendix/llm-intro"
+    title="Large Language Models"
+    description="Deep yet accessible explanation of how Large Language Models (LLMs) work and their applications"
+  />
+  <NavCard
+    href="/en-us/appendix/vlm-intro"
+    title="Multimodal Large Models"
+    description="Explore advanced models capable of processing multiple data modalities such as images and audio"
+  />
+  <NavCard
+    href="/en-us/appendix/image-gen-intro"
+    title="AI Image Generation Principles"
+    description="Uncover the underlying logic and technical implementation of AI image generation"
+  />
+  <NavCard
+    href="/en-us/appendix/audio-intro"
+    title="AI Audio Models"
+    description="Understand AI applications in speech synthesis, recognition, and music generation"
+  />
+  <NavCard
+    href="/en-us/appendix/context-engineering"
+    title="Context Engineering"
+    description="Learn how to optimize context management to improve long-range coherence of AI tasks"
+  />
+  <NavCard
+    href="/en-us/appendix/agent-intro"
+    title="Agent Intelligence"
+    description="Explore AI agent architectures with autonomous decision-making and execution capabilities"
+  />
+  <NavCard
+    href="/en-us/appendix/ai-capability-dictionary"
+    title="AI Capability Dictionary"
+    description="A quick reference handbook for commonly used terms and core concepts in the AI field"
+  />
+</NavGrid>
+
+
+### Frontend Basics
+
+Solidify the technical foundation of frontend development:
+<NavGrid>
+  <NavCard
+    href="/en-us/appendix/web-basics"
+    title="HTML/CSS/JS Basics"
+    description="The three pillars of building web pages, essential for frontend development beginners"
+  />
+  <NavCard
+    href="/en-us/appendix/frontend-evolution"
+    title="Frontend Evolution History"
+    description="Understand the evolution of frontend technology stacks and grasp technology development trends"
+  />
+  <NavCard
+    href="/en-us/appendix/frontend-performance"
+    title="Frontend Performance Optimization"
+    description="Learn key strategies to improve webpage loading speed and interaction smoothness"
+  />
+  <NavCard
+    href="/en-us/appendix/canvas-intro"
+    title="Canvas 2D Basics"
+    description="Master the Canvas drawing API to achieve cool graphics and animation effects"
+  />
+  <NavCard
+    href="/en-us/appendix/url-to-browser"
+    title="From URL to Browser Display"
+    description="Full-chain analysis of the complete process of browser rendering pages"
+  />
+  <NavCard
+    href="/en-us/appendix/browser-devtools/"
+    title="Browser DevTools"
+    description="Proficiently use developer tools to efficiently locate and solve frontend issues"
+  />
+</NavGrid>
+
+
+### Backend Basics
+
+Master the core concepts of backend development:
+<NavGrid>
+  <NavCard
+    href="/en-us/appendix/backend-evolution"
+    title="Backend Evolution History"
+    description="From monolithic to microservices, exploring the evolution of backend architecture"
+  />
+  <NavCard
+    href="/en-us/appendix/backend-languages"
+    title="Backend Programming Languages"
+    description="Compare the characteristics and applicable scenarios of mainstream backend languages to choose the best technology stack"
+  />
+  <NavCard
+    href="/en-us/appendix/database-intro"
+    title="Database Principles"
+    description="Understand core database principles and master the art of data storage and retrieval"
+  />
+  <NavCard
+    href="/en-us/appendix/cache-design"
+    title="System Cache Design"
+    description="Learn caching strategies to improve system high-concurrency processing capabilities"
+  />
+  <NavCard
+    href="/en-us/appendix/queue-design"
+    title="Message Queue Design"
+    description="Master the key role of message queues in decoupling and peak shaving"
+  />
+  <NavCard
+    href="/en-us/appendix/auth-design"
+    title="Authentication Principles & Practice"
+    description="Build secure identity authentication and permission management systems"
+  />
+  <NavCard
+    href="/en-us/appendix/tracking-design"
+    title="Tracking Design"
+    description="Scientifically design data tracking to provide data support for product decisions"
+  />
+  <NavCard
+    href="/en-us/appendix/operations"
+    title="Online Operations"
+    description="Master operations skills for system deployment, monitoring, and troubleshooting"
+  />
+</NavGrid>
+
+
+### General Skills
+
+Basic knowledge of software development:
+<NavGrid>
+  <NavCard
+    href="/en-us/appendix/api-intro"
+    title="API Basics"
+    description="Basic knowledge of API interface design and development"
+  />
+  <NavCard
+    href="/en-us/appendix/ide-intro/"
+    title="IDE Principles"
+    description="Understand the internal working mechanism of Integrated Development Environments (IDEs)"
+  />
+  <NavCard
+    href="/en-us/appendix/terminal-intro"
+    title="Terminal Basics"
+    description="Master basic command-line terminal operations to improve development efficiency"
+  />
+  <NavCard
+    href="/en-us/appendix/git-intro"
+    title="Git Detailed Introduction"
+    description="Deeply understand Git version control principles and advanced usage"
+  />
+  <NavCard
+    href="/en-us/appendix/computer-networks"
+    title="Computer Networks"
+    description="Basic knowledge of network protocols and communication principles"
+  />
+  <NavCard
+    href="/en-us/appendix/deployment"
+    title="Deployment & Launch"
+    description="Complete process and best practices for application deployment and release"
+  />
+</NavGrid>
+
+
+## Usage Suggestions
+
+- Use as reference material during the learning process, consult as needed
+- When encountering unfamiliar technical concepts, look for explanations here first
+- Recommended to read through once to establish a complete knowledge system
+
+This is your technical knowledge treasure trove, always welcome to consult!
@@ -1,19 +0,0 @@
-# AI Product Manager
-
-Welcome to the AI Product Manager stage. Here, you will start from scratch and master the Vibe Coding workflow to become a super individual capable of independent product design.
-
-## Stage Overview
-
-### Getting Started
-Suitable for product, operations, and non-technical backgrounds. Understand AI programming logic through games and build confidence.
-
- 1. Learning Map (Coming Soon)
- 2. If you can speak, you can code (Coming Soon)
-
-### Product Manager
-Master the Vibe Coding workflow. Learn to break down requirements and independently complete high-fidelity web application prototypes.
-
- 1. Introduction to AI IDE (Coming Soon)
- 2. Building a Prototype (Coming Soon)
- 3. Integrating AI Capabilities (Coming Soon)
- 4. Complete Project Practice (Coming Soon)
@@ -0,0 +1,66 @@
+# Novice & Product Prototype
+
+Welcome to the **AI Product Manager** stage! This is the starting point of the Easy-Vibe tutorial, designed for learners with zero programming background.
+
+## What You Will Learn
+
+In this stage, you will start from scratch and master the Vibe Coding workflow to become a super individual capable of independent product design.
+
+### Getting Started
+
+Suitable for product managers, operations staff, and non-technical backgrounds. Understand AI programming logic through games and build confidence:
+<NavGrid>
+  <NavCard
+    href="/en-us/stage-0/0.1-learning-map/"
+    title="Learning Map"
+    description="Understand the entire learning path and clarify the goals and outcomes of each stage"
+  />
+  <NavCard
+    href="/en-us/stage-0/0.2-ai-capabilities-through-games/"
+    title="AI Era: If You Can Speak, You Can Code"
+    description="Experience the charm of AI programming through games like Snake, breaking the fear of coding"
+  />
+</NavGrid>
+
+
+### Product Manager
+
+Master the Vibe Coding workflow. Learn to break down requirements and independently complete high-fidelity web application prototypes:
+<NavGrid>
+  <NavCard
+    href="/en-us/stage-1/1.1-introduction-to-ai-ide/"
+    title="Introduction to AI IDE Tools"
+    description="Learn about current mainstream AI programming tools and choose the best development partner for you"
+  />
+  <NavCard
+    href="/en-us/stage-1/1.2-building-prototype/"
+    title="Building a Prototype"
+    description="Learn how to quickly transform product ideas into visual prototypes for low-cost trial and error"
+  />
+  <NavCard
+    href="/en-us/stage-1/1.3-integrating-ai-capabilities/"
+    title="Integrating AI Capabilities"
+    description="Make your prototype intelligent by integrating simple AI APIs"
+  />
+  <NavCard
+    href="/en-us/stage-1/1.4-complete-project-practice/"
+    title="Complete Project Practice"
+    description="Comprehensively apply what you've learned to complete a full product prototype development from 0 to 1"
+  />
+</NavGrid>
+
+
+## Who Is This For
+
+- Product managers and operations staff with zero programming background
+- Entrepreneurs who want to quickly validate ideas
+- Non-technical people interested in AI programming
+- Designers looking to enhance their prototyping skills
+
+## Learning Path
+
+```
+Getting Started → Product Manager Basics → AI Capability Integration → Complete Project Practice
+```
+
+Ready to start your AI programming journey? Click the left navigation to begin learning!
@@ -1,37 +0,0 @@
-# Full-Stack Development
-
-Deep dive into full-stack development. Frontend componentization, database design, backend API development, and deployment.
-
-## Stage Overview
-
-### Frontend Development
-Master modern frontend development with component libraries and design tools.
-
- [Frontend 0: Lovart Assets](/en-us/stage-2/frontend/2.0-lovart-assets/)
- [Frontend 1: Figma & MasterGo](/en-us/stage-2/frontend/2.1-figma-mastergo/)
- [Frontend 2: UI Design](/en-us/stage-2/frontend/2.2-ui-design/)
- [Frontend 3: Multi-Product UI](/en-us/stage-2/frontend/2.3-multi-product-ui/)
- [Frontend 4: Hogwarts Portraits](/en-us/stage-2/frontend/2.4-hogwarts-portraits/chapter4-lets-build-hogwarts-portraits)
-
-### Backend & Full-Stack
-Learn API design, database management, and deployment strategies.
-
- [Backend 1: What is API](/en-us/stage-2/backend/2.1-what-is-api/extra2/extra2-what-is-api)
- [Backend 2: Database & Supabase](/en-us/stage-2/backend/2.2-database-supabase/chapter5/chapter5-from-database-to-supabase)
- [Backend 3: AI Interface Code](/en-us/stage-2/backend/2.3-ai-interface-code/)
- [Backend 4: Git Workflow](/en-us/stage-2/backend/2.4-git-workflow/extra1/extra1-what-is-git-and-what-is-github)
- [Backend 5: Zeabur Deployment](/en-us/stage-2/backend/2.5-zeabur-deployment/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications)
- [Backend 6: Modern CLI Tools](/en-us/stage-2/backend/2.6-modern-cli/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development)
- [Backend 7: Stripe Payment](/en-us/stage-2/backend/2.7-stripe-payment/)
-
-### Assignments
-Practical projects to apply your full-stack skills.
-
- [Assignment 1: Full-Stack App](/en-us/stage-2/assignments/2.1-fullstack-app/)
- [Assignment 2: Modern Frontend + Trae](/en-us/stage-2/assignments/2.2-modern-frontend-trae/)
-
-### AI Capabilities
-Integrate AI features like knowledge bases and multimodal APIs.
-
- [AI 1: Dify & Knowledge Base](/en-us/stage-2/ai-capabilities/2.1-dify-knowledge-base/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration)
- [AI 2: Multimodal API](/en-us/stage-2/ai-capabilities/2.2-multimodal-api/extra3/extra3-ai-capability-starter-handbook)
@@ -0,0 +1,126 @@
+# Full-Stack Development
+
+Welcome to the **Full-Stack Development** stage! Here, you will dive deep into full-stack development, mastering frontend componentization, database design, backend API development, and deployment.
+
+## What You Will Learn
+
+### Frontend Development
+
+Master modern frontend development and learn to use component libraries and design tools:
+<NavGrid>
+  <NavCard
+    href="#"
+    title="Frontend 0: Using Lovart for Assets"
+    description="Learn how to use AI tools like Lovart to quickly generate high-quality game assets and UI resources"
+  />
+  <NavCard
+    href="#"
+    title="Frontend 1: Figma & MasterGo Basics"
+    description="Master the basic operations of professional UI design tools and the workflow from design to code"
+  />
+  <NavCard
+    href="#"
+    title="Frontend 2: Building Your First Modern App - UI Design"
+    description="Design a modern web application interface from scratch, practicing UI design principles"
+  />
+  <NavCard
+    href="#"
+    title="Frontend 3: UI Design Guidelines & Multi-Product UI"
+    description="Learn mainstream UI design guidelines to improve product design consistency and aesthetics"
+  />
+  <NavCard
+    href="#"
+    title="Frontend 4: Let's Build Hogwarts Portraits"
+    description="Practical project: Build an interactive Hogwarts portrait application using AI-generated images"
+  />
+</NavGrid>
+
+
+### Backend & Full-Stack
+
+Learn API design, database management, and application deployment strategies:
+<NavGrid>
+  <NavCard
+    href="#"
+    title="Backend 1: What is API"
+    description="Understand the core concept of APIs, the bridge between frontend and backend"
+  />
+  <NavCard
+    href="#"
+    title="Backend 2: From Database to Supabase"
+    description="Master relational database basics and learn to use Supabase, a modern BaaS platform"
+  />
+  <NavCard
+    href="#"
+    title="Backend 3: AI-Assisted Interface Code & Documentation"
+    description="Use AI to assist in generating backend interface code and standard API documentation"
+  />
+  <NavCard
+    href="#"
+    title="Backend 4: Git Workflow"
+    description="Master core operations and collaboration workflows of the Git version control system"
+  />
+  <NavCard
+    href="#"
+    title="Backend 5: Zeabur Deployment"
+    description="Learn to quickly deploy your full-stack applications to the cloud using Zeabur"
+  />
+  <NavCard
+    href="#"
+    title="Backend 6: Modern CLI Development Tools"
+    description="Explore modern CLI tools to enhance command-line development experience"
+  />
+  <NavCard
+    href="#"
+    title="Backend 7: Integrating Stripe Payment Systems"
+    description="Practical: Integrate Stripe payment functionality into your application for monetization"
+  />
+</NavGrid>
+
+
+### Assignments
+
+Consolidate your full-stack development skills through practical projects:
+<NavGrid>
+  <NavCard
+    href="#"
+    title="Assignment 1: Building Your First Modern App - Full-Stack"
+    description="Comprehensively apply what you've learned to independently complete a fully functional full-stack application"
+  />
+  <NavCard
+    href="#"
+    title="Assignment 2: Modern Frontend Component Library + Trae"
+    description="Use modern component libraries with Trae IDE to efficiently build complex frontend interfaces"
+  />
+</NavGrid>
+
+
+### AI Capabilities Extension
+<NavGrid>
+  <NavCard
+    href="#"
+    title="AI 1: Dify Basics & Knowledge Base Integration"
+    description="Learn to build AI applications using Dify and integrate private knowledge bases"
+  />
+  <NavCard
+    href="#"
+    title="AI 2: AI Dictionary Query & Multimodal API Integration"
+    description="Explore more AI capabilities, integrating vision, voice, and other multimodal APIs"
+  />
+</NavGrid>
+
+
+## Who Is This For
+
+- Developers with some programming foundation who want to systematically learn full-stack development
+- Learners transitioning from product manager to full-stack engineer
+- Junior to intermediate developers who want to master modern development tools and workflows
+- Entrepreneurs who want to independently develop complete products
+
+## Prerequisites
+
+- Complete the "Novice & Product Prototype" stage, or have equivalent basic knowledge
+- Understand basic HTML/CSS/JavaScript concepts
+- Have preliminary knowledge of AI programming tools
+
+Ready to dive deep into full-stack development? Click the left navigation to begin learning!
@@ -1,30 +0,0 @@
-# Advanced Development
-
-Build complex cross-platform applications. WeChat Mini-Program practice, challenge higher-level AI-native application development.
-
-## Stage Overview
-
-### Core Skills
-Advanced AI coding skills and long-running task management.
-
- [Advanced 1: MCP & ClaudeCode Skills](/en-us/stage-3/core-skills/3.1-mcp-claudecode-skills/)
- [Advanced 2: Long-running Tasks](/en-us/stage-3/core-skills/3.2-long-running-tasks/)
-
-### Cross-Platform Development
-Build apps for WeChat, Android, and iOS.
-
- [Advanced 3: WeChat Mini-Program](/en-us/stage-3/cross-platform/3.3-wechat-miniprogram/)
- [Advanced 4: WeChat Mini-Program (Backend)](/en-us/stage-3/cross-platform/3.4-wechat-miniprogram-backend/)
- [Advanced 5: Android App](/en-us/stage-3/cross-platform/3.5-android-app/)
- [Advanced 6: iOS App](/en-us/stage-3/cross-platform/3.6-ios-app/)
-
-### Personal Brand
-Build your personal website and blog.
-
- [Advanced 7: Personal Website & Blog](/en-us/stage-3/personal-brand/3.7-personal-website-blog/)
-
-### AI Advanced
-Deep dive into RAG and advanced agent workflows.
-
- [Advanced AI 1: What is RAG](/en-us/stage-3/ai-advanced/3.a1-rag-introduction/extra5-what-is-rag-and-how-does-it-work-and-future)
- [Advanced AI 2: Advanced RAG with LangGraph](/en-us/stage-3/ai-advanced/3.a2-langgraph-advanced-rag/)
@@ -0,0 +1,93 @@
+# Advanced Development
+
+Welcome to the **Advanced Development** stage! Here, you will build complex cross-platform applications, master WeChat Mini Program development, and challenge yourself with more advanced AI-native application development.
+
+## What You Will Learn
+
+### Core Skills
+
+Deeply master the MCP protocol and Claude Code advanced techniques to improve development efficiency:
+<NavGrid>
+  <NavCard
+    href="#"
+    title="Advanced 1: MCP & ClaudeCode Skills"
+    description="Master Model Context Protocol (MCP) to extend the capabilities of AI programming tools"
+  />
+  <NavCard
+    href="#"
+    title="Advanced 2: Long-Running Tasks"
+    description="Learn how to make AI coding tools handle long-running complex tasks"
+  />
+</NavGrid>
+
+
+### Cross-Platform Development
+
+Build WeChat Mini Programs, Android, and iOS applications to achieve cross-platform coverage:
+<NavGrid>
+  <NavCard
+    href="#"
+    title="Advanced 3: Building WeChat Mini Programs"
+    description="Develop WeChat Mini Programs from scratch, mastering core mini program development workflows"
+  />
+  <NavCard
+    href="#"
+    title="Advanced 4: WeChat Mini Programs with Backend"
+    description="Build complete WeChat Mini Program applications with backend support"
+  />
+  <NavCard
+    href="#"
+    title="Advanced 5: Building Android Apps"
+    description="Use modern cross-platform frameworks to build Android native applications"
+  />
+  <NavCard
+    href="#"
+    title="Advanced 6: Building iOS Apps"
+    description="Develop and publish iOS applications, mastering iOS ecosystem development standards"
+  />
+</NavGrid>
+
+
+### Personal Brand
+
+Build your own personal website and tech blog to establish personal influence:
+<NavGrid>
+  <NavCard
+    href="#"
+    title="Advanced 7: Building Your Personal Website & Academic Blog"
+    description="Use modern technology stacks to build high-performance, visually appealing personal blogs"
+  />
+</NavGrid>
+
+
+### Advanced AI Capabilities
+
+Explore advanced AI technologies like RAG and LangGraph to build complex AI application workflows:
+<NavGrid>
+  <NavCard
+    href="#"
+    title="Advanced AI 1: What is RAG and How It Works"
+    description="Deeply understand the principles of Retrieval-Augmented Generation (RAG) and its value in AI applications"
+  />
+  <NavCard
+    href="#"
+    title="Advanced AI 2: Advanced RAG & Workflow Orchestration - LangGraph"
+    description="Learn to use LangGraph to orchestrate complex AI workflows and build advanced RAG systems"
+  />
+</NavGrid>
+
+
+## Who Is This For
+
+- Advanced developers with full-stack development experience who want to challenge more complex applications
+- Engineers who want to master cross-platform development technologies
+- Explorers who want to deeply understand AI-native application development
+- Tech bloggers who want to build their personal technical brand
+
+## Prerequisites
+
+- Complete the "Full-Stack Development" stage, or have full-stack development experience
+- Familiar with frontend frameworks (such as React/Vue) and backend development
+- Understand basic AI concepts and API usage
+
+Ready to challenge advanced development? Click the left navigation to begin learning!