From 8bac413237f3cc27537242d97507c4922000d667 Mon Sep 17 00:00:00 2001
From: sanbuphy <physicoada@gmail.com>
Date: Thu, 26 Feb 2026 12:59:01 +0800
Subject: [PATCH] feat: add i18n support for ChapterIntroduction component

- Add chapter-introduction locale files for zh-cn and en
- Update ChapterIntroduction.vue to use useI18n composable
- Fix import paths in ChapterIntroduction.vue
---
 .../theme/components/ChapterIntroduction.vue  | 12 ++--
 .../locales/chapter-introduction/index.js     | 14 +++++
 docs/en/appendix/index.md                     | 58 +++++++++----------
 .../1.1-introduction-to-ai-ide/index.md       |  6 +-
 4 files changed, 54 insertions(+), 36 deletions(-)
 create mode 100644 docs/.vitepress/theme/locales/chapter-introduction/index.js

diff --git a/docs/.vitepress/theme/components/ChapterIntroduction.vue b/docs/.vitepress/theme/components/ChapterIntroduction.vue
index ece524d..b1b3cef 100644
--- a/docs/.vitepress/theme/components/ChapterIntroduction.vue
+++ b/docs/.vitepress/theme/components/ChapterIntroduction.vue
@@ -1,5 +1,9 @@
 <script setup>
 import { computed } from 'vue'
+import { useI18n } from '../composables/useI18n.js'
+import chapterIntroductionLocale from '../locales/chapter-introduction/index.js'
+
+const { t } = useI18n(chapterIntroductionLocale)
 
 const props = defineProps({
   duration: {
@@ -40,7 +44,7 @@ const hasTags = computed(() => props.tags && props.tags.length > 0)
     <div class="objective-section">
       <div class="objective-label">
         <span class="icon">🎯</span>
-        <span class="title">本章学习目标</span>
+        <span class="title">{{ t('title') }}</span>
       </div>
       <div class="content">
         <!-- If tags are provided, show tags list -->
@@ -82,7 +86,7 @@ const hasTags = computed(() => props.tags && props.tags.length > 0)
         </div>
         <div class="card-content">
           <div class="card-label">
-            预计耗时
+            {{ t('duration') }}
           </div>
           <div
             class="card-value"
@@ -101,7 +105,7 @@ const hasTags = computed(() => props.tags && props.tags.length > 0)
         </div>
         <div class="card-content">
           <div class="card-label">
-            预期产出
+            {{ t('output') }}
           </div>
           <div class="output-container">
             <div
@@ -129,7 +133,7 @@ const hasTags = computed(() => props.tags && props.tags.length > 0)
         </div>
         <div class="card-content">
           <div class="card-label">
-            课后任务
+            {{ t('assignment') }}
           </div>
           <div
             class="card-value"
diff --git a/docs/.vitepress/theme/locales/chapter-introduction/index.js b/docs/.vitepress/theme/locales/chapter-introduction/index.js
new file mode 100644
index 0000000..0d83876
--- /dev/null
+++ b/docs/.vitepress/theme/locales/chapter-introduction/index.js
@@ -0,0 +1,14 @@
+export default {
+  'zh-cn': {
+    title: '本章学习目标',
+    duration: '预计耗时',
+    output: '预期产出',
+    assignment: '课后任务'
+  },
+  'en': {
+    title: 'Learning Objectives',
+    duration: 'Estimated Time',
+    output: 'Expected Output',
+    assignment: 'Assignment'
+  }
+}
diff --git a/docs/en/appendix/index.md b/docs/en/appendix/index.md
index 78598d4..f8622f5 100644
--- a/docs/en/appendix/index.md
+++ b/docs/en/appendix/index.md
@@ -9,47 +9,47 @@ Welcome to the **Appendix** section! This is a collection of artificial intellig
 Understand the core concepts, development history, and cutting-edge technical principles of artificial intelligence:
 <NavGrid>
   <NavCard
-    href="/en/appendix/prompt-engineering/"
+    href="/zh-cn/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/appendix/ai-evolution"
+    href="/zh-cn/appendix/ai-evolution"
     title="AI Evolution History"
     description="Review key milestones in AI development and understand the trajectory of technological evolution"
   />
   <NavCard
-    href="/en/appendix/llm-intro"
+    href="/zh-cn/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/appendix/vlm-intro"
+    href="/zh-cn/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/appendix/image-gen-intro"
+    href="/zh-cn/appendix/image-gen-intro"
     title="AI Image Generation Principles"
     description="Uncover the underlying logic and technical implementation of AI image generation"
   />
   <NavCard
-    href="/en/appendix/audio-intro"
+    href="/zh-cn/appendix/audio-intro"
     title="AI Audio Models"
     description="Understand AI applications in speech synthesis, recognition, and music generation"
   />
   <NavCard
-    href="/en/appendix/context-engineering"
+    href="/zh-cn/appendix/context-engineering"
     title="Context Engineering"
     description="Learn how to optimize context management to improve long-range coherence of AI tasks"
   />
   <NavCard
-    href="/en/appendix/agent-intro"
+    href="/zh-cn/appendix/agent-intro"
     title="Agent Intelligence"
     description="Explore AI agent architectures with autonomous decision-making and execution capabilities"
   />
   <NavCard
-    href="/en/appendix/ai-capability-dictionary"
+    href="/zh-cn/appendix/ai-capability-dictionary"
     title="AI Capability Dictionary"
     description="A quick reference handbook for commonly used terms and core concepts in the AI field"
   />
@@ -61,32 +61,32 @@ Understand the core concepts, development history, and cutting-edge technical pr
 Solidify the technical foundation of frontend development:
 <NavGrid>
   <NavCard
-    href="/en/appendix/web-basics"
+    href="/zh-cn/appendix/web-basics"
     title="HTML/CSS/JS Basics"
     description="The three pillars of building web pages, essential for frontend development beginners"
   />
   <NavCard
-    href="/en/appendix/frontend-evolution"
+    href="/zh-cn/appendix/frontend-evolution"
     title="Frontend Evolution History"
     description="Understand the evolution of frontend technology stacks and grasp technology development trends"
   />
   <NavCard
-    href="/en/appendix/frontend-performance"
+    href="/zh-cn/appendix/frontend-performance"
     title="Frontend Performance Optimization"
     description="Learn key strategies to improve webpage loading speed and interaction smoothness"
   />
   <NavCard
-    href="/en/appendix/canvas-intro"
+    href="/zh-cn/appendix/canvas-intro"
     title="Canvas 2D Basics"
     description="Master the Canvas drawing API to achieve cool graphics and animation effects"
   />
   <NavCard
-    href="/en/appendix/url-to-browser"
+    href="/zh-cn/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/appendix/browser-devtools/"
+    href="/zh-cn/appendix/browser-devtools/"
     title="Browser DevTools"
     description="Proficiently use developer tools to efficiently locate and solve frontend issues"
   />
@@ -98,42 +98,42 @@ Solidify the technical foundation of frontend development:
 Master the core concepts of backend development:
 <NavGrid>
   <NavCard
-    href="/en/appendix/backend-evolution"
+    href="/zh-cn/appendix/backend-evolution"
     title="Backend Evolution History"
     description="From monolithic to microservices, exploring the evolution of backend architecture"
   />
   <NavCard
-    href="/en/appendix/backend-languages"
+    href="/zh-cn/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/appendix/database-intro"
+    href="/zh-cn/appendix/database-intro"
     title="Database Principles"
     description="Understand core database principles and master the art of data storage and retrieval"
   />
   <NavCard
-    href="/en/appendix/cache-design"
+    href="/zh-cn/appendix/cache-design"
     title="System Cache Design"
     description="Learn caching strategies to improve system high-concurrency processing capabilities"
   />
   <NavCard
-    href="/en/appendix/queue-design"
+    href="/zh-cn/appendix/queue-design"
     title="Message Queue Design"
     description="Master the key role of message queues in decoupling and peak shaving"
   />
   <NavCard
-    href="/en/appendix/auth-design"
+    href="/zh-cn/appendix/auth-design"
     title="Authentication Principles & Practice"
     description="Build secure identity authentication and permission management systems"
   />
   <NavCard
-    href="/en/appendix/tracking-design"
+    href="/zh-cn/appendix/tracking-design"
     title="Tracking Design"
     description="Scientifically design data tracking to provide data support for product decisions"
   />
   <NavCard
-    href="/en/appendix/operations"
+    href="/zh-cn/appendix/operations"
     title="Online Operations"
     description="Master operations skills for system deployment, monitoring, and troubleshooting"
   />
@@ -145,32 +145,32 @@ Master the core concepts of backend development:
 Basic knowledge of software development:
 <NavGrid>
   <NavCard
-    href="/en/appendix/api-intro"
+    href="/zh-cn/appendix/api-intro"
     title="API Basics"
     description="Basic knowledge of API interface design and development"
   />
   <NavCard
-    href="/en/appendix/ide-intro/"
+    href="/zh-cn/appendix/ide-intro/"
     title="IDE Principles"
     description="Understand the internal working mechanism of Integrated Development Environments (IDEs)"
   />
   <NavCard
-    href="/en/appendix/terminal-intro"
+    href="/zh-cn/appendix/terminal-intro"
     title="Terminal Basics"
     description="Master basic command-line terminal operations to improve development efficiency"
   />
   <NavCard
-    href="/en/appendix/git-intro"
+    href="/zh-cn/appendix/git-intro"
     title="Git Detailed Introduction"
     description="Deeply understand Git version control principles and advanced usage"
   />
   <NavCard
-    href="/en/appendix/computer-networks"
+    href="/zh-cn/appendix/computer-networks"
     title="Computer Networks"
     description="Basic knowledge of network protocols and communication principles"
   />
   <NavCard
-    href="/en/appendix/deployment"
+    href="/zh-cn/appendix/deployment"
     title="Deployment & Launch"
     description="Complete process and best practices for application deployment and release"
   />
diff --git a/docs/en/stage-1/1.1-introduction-to-ai-ide/index.md b/docs/en/stage-1/1.1-introduction-to-ai-ide/index.md
index fd68f78..54900cc 100644
--- a/docs/en/stage-1/1.1-introduction-to-ai-ide/index.md
+++ b/docs/en/stage-1/1.1-introduction-to-ai-ide/index.md
@@ -757,7 +757,7 @@ In the next chapter, we'll shift focus from "knowing how to use tools" to "makin
       <span style="font-size: 12px; color: #909399">When you see computer terms you don't understand, quickly look up their meanings here. Recommended to read through once.</span>
     </el-col>
     <el-col :span="12">
-      <a href="/en/appendix/2-development-tools/ide-basics" style="text-decoration: none; color: inherit;"><b>Appendix 2: Visual Studio Code Menu Bar Analysis</b></a><br/>
+      <a href="/zh-cn/appendix/2-development-tools/ide-basics" style="text-decoration: none; color: inherit;"><b>Appendix 2: Visual Studio Code Menu Bar Analysis</b></a><br/>
       <span style="font-size: 12px; color: #909399">When you don't know what the AI IDE interface is for, use the following content to consult with AI, or view directly.</span>
     </el-col>
   </el-row>
@@ -1238,9 +1238,9 @@ If you encounter new words in the learning process later, you can also have AI a
 
 To help everyone understand the meaning of each option, here we provide an in-depth analysis of the menu bar:
 
-![](../../../en/appendix/2-development-tools/editors-and-ai/images/index-2026-01-09-11-35-55.png)
+![](../../../zh-cn/appendix/2-development-tools/editors-and-ai/images/index-2026-01-09-11-35-55.png)
 
-![](../../../en/appendix/2-development-tools/editors-and-ai/images/index-2026-01-09-11-36-23.png)
+![](../../../zh-cn/appendix/2-development-tools/editors-and-ai/images/index-2026-01-09-11-36-23.png)
 
 <details class="custom-block details" id="vscode-file-menu">
   <summary>File: Project and File Open/Save/Workspace Management</summary>