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
This commit is contained in:
@@ -1,5 +1,9 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { computed } from 'vue'
|
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({
|
const props = defineProps({
|
||||||
duration: {
|
duration: {
|
||||||
@@ -40,7 +44,7 @@ const hasTags = computed(() => props.tags && props.tags.length > 0)
|
|||||||
<div class="objective-section">
|
<div class="objective-section">
|
||||||
<div class="objective-label">
|
<div class="objective-label">
|
||||||
<span class="icon">🎯</span>
|
<span class="icon">🎯</span>
|
||||||
<span class="title">本章学习目标</span>
|
<span class="title">{{ t('title') }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<!-- If tags are provided, show tags list -->
|
<!-- If tags are provided, show tags list -->
|
||||||
@@ -82,7 +86,7 @@ const hasTags = computed(() => props.tags && props.tags.length > 0)
|
|||||||
</div>
|
</div>
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<div class="card-label">
|
<div class="card-label">
|
||||||
预计耗时
|
{{ t('duration') }}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="card-value"
|
class="card-value"
|
||||||
@@ -101,7 +105,7 @@ const hasTags = computed(() => props.tags && props.tags.length > 0)
|
|||||||
</div>
|
</div>
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<div class="card-label">
|
<div class="card-label">
|
||||||
预期产出
|
{{ t('output') }}
|
||||||
</div>
|
</div>
|
||||||
<div class="output-container">
|
<div class="output-container">
|
||||||
<div
|
<div
|
||||||
@@ -129,7 +133,7 @@ const hasTags = computed(() => props.tags && props.tags.length > 0)
|
|||||||
</div>
|
</div>
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<div class="card-label">
|
<div class="card-label">
|
||||||
课后任务
|
{{ t('assignment') }}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="card-value"
|
class="card-value"
|
||||||
|
|||||||
@@ -0,0 +1,14 @@
|
|||||||
|
export default {
|
||||||
|
'zh-cn': {
|
||||||
|
title: '本章学习目标',
|
||||||
|
duration: '预计耗时',
|
||||||
|
output: '预期产出',
|
||||||
|
assignment: '课后任务'
|
||||||
|
},
|
||||||
|
'en': {
|
||||||
|
title: 'Learning Objectives',
|
||||||
|
duration: 'Estimated Time',
|
||||||
|
output: 'Expected Output',
|
||||||
|
assignment: 'Assignment'
|
||||||
|
}
|
||||||
|
}
|
||||||
+29
-29
@@ -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:
|
Understand the core concepts, development history, and cutting-edge technical principles of artificial intelligence:
|
||||||
<NavGrid>
|
<NavGrid>
|
||||||
<NavCard
|
<NavCard
|
||||||
href="/en/appendix/prompt-engineering/"
|
href="/zh-cn/appendix/prompt-engineering/"
|
||||||
title="Prompt Engineering"
|
title="Prompt Engineering"
|
||||||
description="Master the art of efficient dialogue with AI to unlock the potential of large models"
|
description="Master the art of efficient dialogue with AI to unlock the potential of large models"
|
||||||
/>
|
/>
|
||||||
<NavCard
|
<NavCard
|
||||||
href="/en/appendix/ai-evolution"
|
href="/zh-cn/appendix/ai-evolution"
|
||||||
title="AI Evolution History"
|
title="AI Evolution History"
|
||||||
description="Review key milestones in AI development and understand the trajectory of technological evolution"
|
description="Review key milestones in AI development and understand the trajectory of technological evolution"
|
||||||
/>
|
/>
|
||||||
<NavCard
|
<NavCard
|
||||||
href="/en/appendix/llm-intro"
|
href="/zh-cn/appendix/llm-intro"
|
||||||
title="Large Language Models"
|
title="Large Language Models"
|
||||||
description="Deep yet accessible explanation of how Large Language Models (LLMs) work and their applications"
|
description="Deep yet accessible explanation of how Large Language Models (LLMs) work and their applications"
|
||||||
/>
|
/>
|
||||||
<NavCard
|
<NavCard
|
||||||
href="/en/appendix/vlm-intro"
|
href="/zh-cn/appendix/vlm-intro"
|
||||||
title="Multimodal Large Models"
|
title="Multimodal Large Models"
|
||||||
description="Explore advanced models capable of processing multiple data modalities such as images and audio"
|
description="Explore advanced models capable of processing multiple data modalities such as images and audio"
|
||||||
/>
|
/>
|
||||||
<NavCard
|
<NavCard
|
||||||
href="/en/appendix/image-gen-intro"
|
href="/zh-cn/appendix/image-gen-intro"
|
||||||
title="AI Image Generation Principles"
|
title="AI Image Generation Principles"
|
||||||
description="Uncover the underlying logic and technical implementation of AI image generation"
|
description="Uncover the underlying logic and technical implementation of AI image generation"
|
||||||
/>
|
/>
|
||||||
<NavCard
|
<NavCard
|
||||||
href="/en/appendix/audio-intro"
|
href="/zh-cn/appendix/audio-intro"
|
||||||
title="AI Audio Models"
|
title="AI Audio Models"
|
||||||
description="Understand AI applications in speech synthesis, recognition, and music generation"
|
description="Understand AI applications in speech synthesis, recognition, and music generation"
|
||||||
/>
|
/>
|
||||||
<NavCard
|
<NavCard
|
||||||
href="/en/appendix/context-engineering"
|
href="/zh-cn/appendix/context-engineering"
|
||||||
title="Context Engineering"
|
title="Context Engineering"
|
||||||
description="Learn how to optimize context management to improve long-range coherence of AI tasks"
|
description="Learn how to optimize context management to improve long-range coherence of AI tasks"
|
||||||
/>
|
/>
|
||||||
<NavCard
|
<NavCard
|
||||||
href="/en/appendix/agent-intro"
|
href="/zh-cn/appendix/agent-intro"
|
||||||
title="Agent Intelligence"
|
title="Agent Intelligence"
|
||||||
description="Explore AI agent architectures with autonomous decision-making and execution capabilities"
|
description="Explore AI agent architectures with autonomous decision-making and execution capabilities"
|
||||||
/>
|
/>
|
||||||
<NavCard
|
<NavCard
|
||||||
href="/en/appendix/ai-capability-dictionary"
|
href="/zh-cn/appendix/ai-capability-dictionary"
|
||||||
title="AI Capability Dictionary"
|
title="AI Capability Dictionary"
|
||||||
description="A quick reference handbook for commonly used terms and core concepts in the AI field"
|
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:
|
Solidify the technical foundation of frontend development:
|
||||||
<NavGrid>
|
<NavGrid>
|
||||||
<NavCard
|
<NavCard
|
||||||
href="/en/appendix/web-basics"
|
href="/zh-cn/appendix/web-basics"
|
||||||
title="HTML/CSS/JS Basics"
|
title="HTML/CSS/JS Basics"
|
||||||
description="The three pillars of building web pages, essential for frontend development beginners"
|
description="The three pillars of building web pages, essential for frontend development beginners"
|
||||||
/>
|
/>
|
||||||
<NavCard
|
<NavCard
|
||||||
href="/en/appendix/frontend-evolution"
|
href="/zh-cn/appendix/frontend-evolution"
|
||||||
title="Frontend Evolution History"
|
title="Frontend Evolution History"
|
||||||
description="Understand the evolution of frontend technology stacks and grasp technology development trends"
|
description="Understand the evolution of frontend technology stacks and grasp technology development trends"
|
||||||
/>
|
/>
|
||||||
<NavCard
|
<NavCard
|
||||||
href="/en/appendix/frontend-performance"
|
href="/zh-cn/appendix/frontend-performance"
|
||||||
title="Frontend Performance Optimization"
|
title="Frontend Performance Optimization"
|
||||||
description="Learn key strategies to improve webpage loading speed and interaction smoothness"
|
description="Learn key strategies to improve webpage loading speed and interaction smoothness"
|
||||||
/>
|
/>
|
||||||
<NavCard
|
<NavCard
|
||||||
href="/en/appendix/canvas-intro"
|
href="/zh-cn/appendix/canvas-intro"
|
||||||
title="Canvas 2D Basics"
|
title="Canvas 2D Basics"
|
||||||
description="Master the Canvas drawing API to achieve cool graphics and animation effects"
|
description="Master the Canvas drawing API to achieve cool graphics and animation effects"
|
||||||
/>
|
/>
|
||||||
<NavCard
|
<NavCard
|
||||||
href="/en/appendix/url-to-browser"
|
href="/zh-cn/appendix/url-to-browser"
|
||||||
title="From URL to Browser Display"
|
title="From URL to Browser Display"
|
||||||
description="Full-chain analysis of the complete process of browser rendering pages"
|
description="Full-chain analysis of the complete process of browser rendering pages"
|
||||||
/>
|
/>
|
||||||
<NavCard
|
<NavCard
|
||||||
href="/en/appendix/browser-devtools/"
|
href="/zh-cn/appendix/browser-devtools/"
|
||||||
title="Browser DevTools"
|
title="Browser DevTools"
|
||||||
description="Proficiently use developer tools to efficiently locate and solve frontend issues"
|
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:
|
Master the core concepts of backend development:
|
||||||
<NavGrid>
|
<NavGrid>
|
||||||
<NavCard
|
<NavCard
|
||||||
href="/en/appendix/backend-evolution"
|
href="/zh-cn/appendix/backend-evolution"
|
||||||
title="Backend Evolution History"
|
title="Backend Evolution History"
|
||||||
description="From monolithic to microservices, exploring the evolution of backend architecture"
|
description="From monolithic to microservices, exploring the evolution of backend architecture"
|
||||||
/>
|
/>
|
||||||
<NavCard
|
<NavCard
|
||||||
href="/en/appendix/backend-languages"
|
href="/zh-cn/appendix/backend-languages"
|
||||||
title="Backend Programming Languages"
|
title="Backend Programming Languages"
|
||||||
description="Compare the characteristics and applicable scenarios of mainstream backend languages to choose the best technology stack"
|
description="Compare the characteristics and applicable scenarios of mainstream backend languages to choose the best technology stack"
|
||||||
/>
|
/>
|
||||||
<NavCard
|
<NavCard
|
||||||
href="/en/appendix/database-intro"
|
href="/zh-cn/appendix/database-intro"
|
||||||
title="Database Principles"
|
title="Database Principles"
|
||||||
description="Understand core database principles and master the art of data storage and retrieval"
|
description="Understand core database principles and master the art of data storage and retrieval"
|
||||||
/>
|
/>
|
||||||
<NavCard
|
<NavCard
|
||||||
href="/en/appendix/cache-design"
|
href="/zh-cn/appendix/cache-design"
|
||||||
title="System Cache Design"
|
title="System Cache Design"
|
||||||
description="Learn caching strategies to improve system high-concurrency processing capabilities"
|
description="Learn caching strategies to improve system high-concurrency processing capabilities"
|
||||||
/>
|
/>
|
||||||
<NavCard
|
<NavCard
|
||||||
href="/en/appendix/queue-design"
|
href="/zh-cn/appendix/queue-design"
|
||||||
title="Message Queue Design"
|
title="Message Queue Design"
|
||||||
description="Master the key role of message queues in decoupling and peak shaving"
|
description="Master the key role of message queues in decoupling and peak shaving"
|
||||||
/>
|
/>
|
||||||
<NavCard
|
<NavCard
|
||||||
href="/en/appendix/auth-design"
|
href="/zh-cn/appendix/auth-design"
|
||||||
title="Authentication Principles & Practice"
|
title="Authentication Principles & Practice"
|
||||||
description="Build secure identity authentication and permission management systems"
|
description="Build secure identity authentication and permission management systems"
|
||||||
/>
|
/>
|
||||||
<NavCard
|
<NavCard
|
||||||
href="/en/appendix/tracking-design"
|
href="/zh-cn/appendix/tracking-design"
|
||||||
title="Tracking Design"
|
title="Tracking Design"
|
||||||
description="Scientifically design data tracking to provide data support for product decisions"
|
description="Scientifically design data tracking to provide data support for product decisions"
|
||||||
/>
|
/>
|
||||||
<NavCard
|
<NavCard
|
||||||
href="/en/appendix/operations"
|
href="/zh-cn/appendix/operations"
|
||||||
title="Online Operations"
|
title="Online Operations"
|
||||||
description="Master operations skills for system deployment, monitoring, and troubleshooting"
|
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:
|
Basic knowledge of software development:
|
||||||
<NavGrid>
|
<NavGrid>
|
||||||
<NavCard
|
<NavCard
|
||||||
href="/en/appendix/api-intro"
|
href="/zh-cn/appendix/api-intro"
|
||||||
title="API Basics"
|
title="API Basics"
|
||||||
description="Basic knowledge of API interface design and development"
|
description="Basic knowledge of API interface design and development"
|
||||||
/>
|
/>
|
||||||
<NavCard
|
<NavCard
|
||||||
href="/en/appendix/ide-intro/"
|
href="/zh-cn/appendix/ide-intro/"
|
||||||
title="IDE Principles"
|
title="IDE Principles"
|
||||||
description="Understand the internal working mechanism of Integrated Development Environments (IDEs)"
|
description="Understand the internal working mechanism of Integrated Development Environments (IDEs)"
|
||||||
/>
|
/>
|
||||||
<NavCard
|
<NavCard
|
||||||
href="/en/appendix/terminal-intro"
|
href="/zh-cn/appendix/terminal-intro"
|
||||||
title="Terminal Basics"
|
title="Terminal Basics"
|
||||||
description="Master basic command-line terminal operations to improve development efficiency"
|
description="Master basic command-line terminal operations to improve development efficiency"
|
||||||
/>
|
/>
|
||||||
<NavCard
|
<NavCard
|
||||||
href="/en/appendix/git-intro"
|
href="/zh-cn/appendix/git-intro"
|
||||||
title="Git Detailed Introduction"
|
title="Git Detailed Introduction"
|
||||||
description="Deeply understand Git version control principles and advanced usage"
|
description="Deeply understand Git version control principles and advanced usage"
|
||||||
/>
|
/>
|
||||||
<NavCard
|
<NavCard
|
||||||
href="/en/appendix/computer-networks"
|
href="/zh-cn/appendix/computer-networks"
|
||||||
title="Computer Networks"
|
title="Computer Networks"
|
||||||
description="Basic knowledge of network protocols and communication principles"
|
description="Basic knowledge of network protocols and communication principles"
|
||||||
/>
|
/>
|
||||||
<NavCard
|
<NavCard
|
||||||
href="/en/appendix/deployment"
|
href="/zh-cn/appendix/deployment"
|
||||||
title="Deployment & Launch"
|
title="Deployment & Launch"
|
||||||
description="Complete process and best practices for application deployment and release"
|
description="Complete process and best practices for application deployment and release"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -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>
|
<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>
|
||||||
<el-col :span="12">
|
<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>
|
<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-col>
|
||||||
</el-row>
|
</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:
|
To help everyone understand the meaning of each option, here we provide an in-depth analysis of the menu bar:
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
<details class="custom-block details" id="vscode-file-menu">
|
<details class="custom-block details" id="vscode-file-menu">
|
||||||
<summary>File: Project and File Open/Save/Workspace Management</summary>
|
<summary>File: Project and File Open/Save/Workspace Management</summary>
|
||||||
|
|||||||
Reference in New Issue
Block a user