feat(国际化): 添加学习系统页面的多语言支持

将学习系统页面中的静态文本替换为多语言翻译，包括学习阶段、课程分类和技能标签的筛选器标签及操作按钮

src/locales/en.js

@@ -125,6 +125,7 @@ export default {
     fileTypeNotAllow:"File type not allowed, only support upload",
     personalNotes:"Personal Notes",
     balanceNotEnough:"Balance not enough, cannot convert ",
+    search:"Search",
   },
   login: {
     smsLogin: 'Captcha Login',
@@ -160,11 +161,53 @@ export default {
 
 
 
+
     
     courseDetail: 'Course Detail',
     myLearning: 'My Learning',
     myLearningCourseDetail: 'My Learning Course Detail'
   },
+  // 学习系统模块
+  learningSystem: {
+    heroBadge: 'AI Workflow Learning Platform',
+    heroBadgeSub: '4 Major Platforms',
+    heroTitle1: 'Systematic Learning',
+    heroTitle2: 'AI Workflow',
+    heroTitle3: 'Unlock Infinite Possibilities',
+    heroDesc1: 'From beginner to expert, covering n8n, Coze, Dify, FastGPT four platforms',
+    heroDesc2: 'Help you become an AI automation expert',
+    heroBtn1: 'Start Learning Now',
+    heroBtn2: 'View Course System',
+    heroStat1: 'Learning Users',
+    heroStat2: 'Quality Courses',
+    heroStat3: 'Satisfaction Rate',
+    previewTitle: 'Learning Path Preview',
+    previewLive: 'Live',
+    previewCompleted: 'Completed',
+    previewInProgress: 'In Progress',
+    filterTitle: 'Filter Courses',
+    courseCount: 'Courses',
+    learnedCount: 'Learners',
+    difficulty: 'Difficulty',
+    previewNow: 'Preview Now',
+    startLearning: 'Learn Now',
+    hotLevel1: 'Hot',
+    hotLevel2: 'Rising',
+    hotLabel1: 'Popular Course',
+    hotLabel2: 'Hot Recommendation',
+    hotLabel3: 'New Course',
+    stageBasic: 'Beginner',
+    stageIntermediate: 'Intermediate',
+    stageAdvanced: 'Advanced',
+    stageAll: 'All Levels',
+    previewCourse1: 'n8n Automation Intro',
+    previewCourse2: 'Coze Bot Development',
+    previewCourse3: 'Dify RAG Application',
+    reviewCount: 'reviews',
+    chapterCount: 'chapters',
+    courseDetail: 'Course Detail',
+    tenThousand: 'k'
+  },
   workflowTrade: {
     signUpSuccess: 'Sign Up Success',
     signUpFailed: 'Sign Up Failed, please try again later',

src/locales/zh-CN.js

@@ -130,6 +130,7 @@ export default {
     fileTypeNotAllow:"文件类型不允许，仅支持上传",
     personalNotes:"个人笔记",
     balanceNotEnough:"余额不足，无法转换",
+    search:"搜索",
   },
   login: {
     smsLogin: '验证码登录',
@@ -164,10 +165,52 @@ export default {
 
 
 
+
     courseDetail: '课程详情',
     myLearning: '我的学习',
     myLearningCourseDetail: '我的学习课程详情'
   },
+  // 学习系统模块
+  learningSystem: {
+    heroBadge: 'AI 工作流学习平台',
+    heroBadgeSub: '4大主流平台',
+    heroTitle1: '系统学习',
+    heroTitle2: 'AI 工作流',
+    heroTitle3: '解锁无限可能',
+    heroDesc1: '从入门到精通，涵盖 n8n、Coze、Dify、FastGPT 四大平台',
+    heroDesc2: '助您成为 AI 自动化领域专家',
+    heroBtn1: '立即开始学习',
+    heroBtn2: '查看课程体系',
+    heroStat1: '学习用户',
+    heroStat2: '精品课程',
+    heroStat3: '好评率',
+    previewTitle: '学习路径预览',
+    previewLive: '实时',
+    previewCompleted: '已完成',
+    previewInProgress: '进行中',
+    filterTitle: '筛选课程',
+    courseCount: '门课程',
+    learnedCount: '人学过',
+    difficulty: '难度',
+    previewNow: '立即预览',
+    startLearning: '开始学习',
+    hotLevel1: '热门',
+    hotLevel2: '上升',
+    hotLabel1: '爆款课程',
+    hotLabel2: '热门推荐',
+    hotLabel3: '新课上线',
+    stageBasic: '入门级',
+    stageIntermediate: '进阶级',
+    stageAdvanced: '高级',
+    stageAll: '全阶段',
+    previewCourse1: 'n8n 自动化入门',
+    previewCourse2: 'Coze Bot 开发',
+    previewCourse3: 'Dify RAG 应用',
+    reviewCount: '人评价',
+    chapterCount: '节课程',
+    courseDetail: '课程详情',
+    tenThousand: '万'
+  },
   workflowTrade: {
     signUpSuccess: '报名成功',
     signUpFailed: '报名失败，请稍后重试',

src/pages/LearningSystem/LearningSystem.vue

@@ -25,45 +25,45 @@
           <div class="ls-hero-left">
             <div class="ls-hero-badge">
               <span class="ls-badge-dot"></span>
-              <span>AI 工作流学习平台</span>
+              <span>{{ $t('learningSystem.heroBadge') }}</span>
               <span class="ls-badge-sep">|</span>
-              <span class="ls-badge-sub">4大主流平台</span>
+              <span class="ls-badge-sub">{{ $t('learningSystem.heroBadgeSub') }}</span>
             </div>
 
             <h1 class="ls-hero-title">
-              系统学习<br/>
-              <em class="ls-title-em">AI 工作流</em><br/>
-              解锁无限可能
+              {{ $t('learningSystem.heroTitle1') }}<br/>
+              <em class="ls-title-em">{{ $t('learningSystem.heroTitle2') }}</em><br/>
+              {{ $t('learningSystem.heroTitle3') }}
             </h1>
 
             <p class="ls-hero-desc">
-              从入门到精通，涵盖 n8n、Coze、Dify、FastGPT 四大平台<br/>
-              助您成为 AI 自动化领域专家
+              {{ $t('learningSystem.heroDesc1') }}<br/>
+              {{ $t('learningSystem.heroDesc2') }}
             </p>
 
             <div class="ls-hero-cta">
               <button class="ls-btn-primary" @click="scrollToCourses">
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="white"><path d="M8 5v14l11-7z"/></svg>
-                立即开始学习
+                {{ $t('learningSystem.heroBtn1') }}
               </button>
               <button class="ls-btn-ghost">
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v4l3 3"/></svg>
-                查看课程体系
+                {{ $t('learningSystem.heroBtn2') }}
               </button>
             </div>
 
             <div class="ls-hero-stats">
               <div class="ls-stat-card">
                 <span class="ls-stat-n">50,000+</span>
-                <span class="ls-stat-l">学习用户</span>
+                <span class="ls-stat-l">{{ $t('learningSystem.heroStat1') }}</span>
               </div>
               <div class="ls-stat-card">
                 <span class="ls-stat-n">200+</span>
-                <span class="ls-stat-l">精品课程</span>
+                <span class="ls-stat-l">{{ $t('learningSystem.heroStat2') }}</span>
               </div>
               <div class="ls-stat-card">
                 <span class="ls-stat-n">98.6%</span>
-                <span class="ls-stat-l">好评率</span>
+                <span class="ls-stat-l">{{ $t('learningSystem.heroStat3') }}</span>
               </div>
             </div>
           </div>
@@ -74,10 +74,10 @@
                 <div class="ls-pc-dots">
                   <span class="d-r"></span><span class="d-y"></span><span class="d-g"></span>
                 </div>
-                <span class="ls-pc-title">学习路径预览</span>
+                <span class="ls-pc-title">{{ $t('learningSystem.previewTitle') }}</span>
                 <span class="ls-pc-live">
                   <span class="ls-pc-live-dot"></span>
-                  实时
+                  {{ $t('learningSystem.previewLive') }}
                 </span>
               </div>
               <div class="ls-pc-items">
@@ -126,7 +126,7 @@
             <div class="ls-filter-icon-wrap">
               <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>
             </div>
-            <h2 class="ls-filter-title">筛选课程</h2>
+            <h2 class="ls-filter-title">{{ $t('learningSystem.filterTitle') }}</h2>
             <span class="ls-filter-count" v-if="listTotal > 0">{{ listTotal }}</span>
           </div>
 
@@ -135,17 +135,17 @@
             <div class="ls-filter-label">
               <span class="ls-label-dot" style="background: linear-gradient(135deg,#0055FE,#60a5fa)"></span>
               <span class="ls-label-icon">📚</span>
-              学习阶段
+              {{$t('common.studyStage')}}
             </div>
             <div class="ls-filter-tags" :class="{ 'is-expanded': expandedFilters.studyStage }">
               <span class="ls-tag" :class="{ 'is-active': searchFom.studyStage === '' }"
-                @click="selectFilter('studyStage', '')">全部</span>
+                @click="selectFilter('studyStage', '')">{{$t('common.all')}}</span>
               <span v-for="item in bus_study_stage" :key="item.dictValue"
                 class="ls-tag" :class="{ 'is-active': searchFom.studyStage === item.dictValue }"
                 @click="selectFilter('studyStage', item.dictValue)">{{ item.dictLabel }}</span>
             </div>
             <button class="ls-filter-expand" @click="expandedFilters.studyStage = !expandedFilters.studyStage">
-              {{ expandedFilters.studyStage ? '收起' : '展开' }}
+              {{ expandedFilters.studyStage ? $t('common.collapse') : $t('common.expand') }}
               <svg :class="{ 'is-expanded': expandedFilters.studyStage }" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
             </button>
           </div>
@@ -157,17 +157,17 @@
             <div class="ls-filter-label">
               <span class="ls-label-dot" style="background: linear-gradient(135deg,#7c3aed,#c084fc)"></span>
               <span class="ls-label-icon">🗂️</span>
-              课程分类
+              {{$t('common.courseCategory')}}
             </div>
             <div class="ls-filter-tags" :class="{ 'is-expanded': expandedFilters.courseCategory }">
               <span class="ls-tag" :class="{ 'is-active': searchFom.courseCategory === '' }"
-                @click="selectFilter('courseCategory', '')">全部</span>
+                @click="selectFilter('courseCategory', '')">{{$t('common.all')}}</span>
               <span v-for="item in bus_course_category" :key="item.dictValue"
                 class="ls-tag" :class="{ 'is-active': searchFom.courseCategory === item.dictValue }"
                 @click="selectFilter('courseCategory', item.dictValue)">{{ item.dictLabel }}</span>
             </div>
             <button class="ls-filter-expand" @click="expandedFilters.courseCategory = !expandedFilters.courseCategory">
-              {{ expandedFilters.courseCategory ? '收起' : '展开' }}
+              {{ expandedFilters.courseCategory ? $t('common.collapse') : $t('common.expand') }}
               <svg :class="{ 'is-expanded': expandedFilters.courseCategory }" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
             </button>
           </div>
@@ -179,17 +179,17 @@
             <div class="ls-filter-label">
               <span class="ls-label-dot" style="background: linear-gradient(135deg,#C832FA,#f472b6)"></span>
               <span class="ls-label-icon">🏷️</span>
-              技能标签
+              {{$t('common.skillTag')}}
             </div>
             <div class="ls-filter-tags" :class="{ 'is-expanded': expandedFilters.skillTag }">
               <span class="ls-tag" :class="{ 'is-active': searchFom.skillTag === '' }"
-                @click="selectFilter('skillTag', '')">全部</span>
+                @click="selectFilter('skillTag', '')">{{$t('common.all')}}</span>
               <span v-for="item in bus_skill_tag" :key="item.dictValue"
                 class="ls-tag" :class="{ 'is-active': searchFom.skillTag === item.dictValue }"
                 @click="selectFilter('skillTag', item.dictValue)">{{ item.dictLabel }}</span>
             </div>
             <button class="ls-filter-expand" @click="expandedFilters.skillTag = !expandedFilters.skillTag">
-              {{ expandedFilters.skillTag ? '收起' : '展开' }}
+              {{ expandedFilters.skillTag ? $t('common.collapse') : $t('common.expand') }}
               <svg :class="{ 'is-expanded': expandedFilters.skillTag }" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
             </button>
           </div>
@@ -202,17 +202,17 @@
           <div v-if="list.length > 0" class="ls-list-banner">
             <div class="ls-list-banner-item">
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
-              <span><strong>{{ listTotal }}</strong> 门课程</span>
+              <span><strong>{{ listTotal }}</strong> {{ $t('learningSystem.courseCount') }}</span>
             </div>
             <div class="ls-list-banner-divider"></div>
             <div class="ls-list-banner-item">
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
-              <span><strong>50,000+</strong> 学习用户</span>
+              <span><strong>50,000+</strong> {{ $t('learningSystem.heroStat1') }}</span>
             </div>
             <div class="ls-list-banner-divider"></div>
             <div class="ls-list-banner-item">
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
-              <span>好评率 <strong>98.6%</strong></span>
+              <span>{{ $t('learningSystem.heroStat3') }} <strong>98.6%</strong></span>
             </div>
           </div>
 
@@ -244,7 +244,7 @@
                   <div class="ls-card-play-circle">
                     <svg width="22" height="22" viewBox="0 0 24 24" fill="white"><path d="M8 5v14l11-7z"/></svg>
                   </div>
-                  <span class="ls-card-overlay-text">立即预览</span>
+                  <span class="ls-card-overlay-text">{{ $t('learningSystem.previewNow') }}</span>
                 </div>
               </div>
 
@@ -272,7 +272,7 @@
                       </span>
                     </div>
                     <span class="ls-card-rating-score">{{ getCourseRating(item.viewCount).toFixed(1) }}</span>
-                    <span class="ls-card-review-count">({{ getReviewCount(item.viewCount) }}人评价)</span>
+                    <span class="ls-card-review-count">({{ getReviewCount(item.viewCount) }} {{ $t('learningSystem.reviewCount') }})</span>
                   </div>
 
                   <!-- 课程简介 -->
@@ -287,18 +287,18 @@
                     <span class="ls-card-info-sep">·</span>
                     <span class="ls-card-info-item">
                       <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg>
-                      {{ getChapterCount(item.courseId, item.studyStage) }}节课程
+                      {{ getChapterCount(item.courseId, item.studyStage) }} {{ $t('learningSystem.chapterCount') }}
                     </span>
                     <span class="ls-card-info-sep">·</span>
                     <span class="ls-card-info-item">
                       <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
-                      {{ formatViewCount(item.viewCount) }}人学过
+                      {{ formatViewCount(item.viewCount) }}{{ $t('learningSystem.learnedCount') }}
                     </span>
                   </div>
 
                   <!-- 难度指示器 -->
                   <div class="ls-card-difficulty">
-                    <span class="ls-card-difficulty-label">难度</span>
+                    <span class="ls-card-difficulty-label">{{ $t('learningSystem.difficulty') }}</span>
                     <div class="ls-card-difficulty-dots">
                       <span v-for="i in 3" :key="i" class="ls-diff-dot"
                         :class="i <= getDifficultyLevel(item.studyStage) ? 'is-active' : ''">
@@ -323,7 +323,7 @@
                   </div>
                   <button class="ls-card-action-btn" @click.stop.prevent="goDetail(item)">
                     <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
-                    开始学习
+                    {{ $t('learningSystem.startLearning') }}
                   </button>
                 </div>
               </div>
@@ -366,9 +366,9 @@ const isChildRoute = computed(() => route.matched.length > 1)
 
 // Hero 预览卡片数据（静态展示）
 const previewCourses = [
-  { emoji: '🔧', name: 'n8n 自动化入门', progress: 100, bgColor: 'linear-gradient(135deg,#0055FE,#60a5fa)', barColor: 'linear-gradient(90deg,#0055FE,#60a5fa)', cls: 'b-green', label: '已完成' },
-  { emoji: '🤖', name: 'Coze Bot 开发', progress: 78, bgColor: 'linear-gradient(135deg,#7c3aed,#c084fc)', barColor: 'linear-gradient(90deg,#7c3aed,#c084fc)', cls: 'b-purple', label: '进行中' },
-  { emoji: '🧠', name: 'Dify RAG 应用', progress: 45, bgColor: 'linear-gradient(135deg,#C832FA,#f472b6)', barColor: 'linear-gradient(90deg,#C832FA,#f472b6)', cls: 'b-pink', label: '进行中' },
+  { emoji: '🔧', name: t('learningSystem.previewCourse1'), progress: 100, bgColor: 'linear-gradient(135deg,#0055FE,#60a5fa)', barColor: 'linear-gradient(90deg,#0055FE,#60a5fa)', cls: 'b-green', label: t('learningSystem.previewCompleted') },
+  { emoji: '🤖', name: t('learningSystem.previewCourse2'), progress: 78, bgColor: 'linear-gradient(135deg,#7c3aed,#c084fc)', barColor: 'linear-gradient(90deg,#7c3aed,#c084fc)', cls: 'b-purple', label: t('learningSystem.previewInProgress') },
+  { emoji: '🧠', name: t('learningSystem.previewCourse3'), progress: 45, bgColor: 'linear-gradient(135deg,#C832FA,#f472b6)', barColor: 'linear-gradient(90deg,#C832FA,#f472b6)', cls: 'b-pink', label: t('learningSystem.previewInProgress') },
 ]
 
 // 筛选展开状态
@@ -443,7 +443,7 @@ const goDetail = (item) => {
   if (!isLogin({ callback: openLoginDialog, t })) return
   router.push({
     path: `/learning-system/detail/${item.courseId}`,
-    query: { courseId: item.courseId, metaTitle: item.courseTitle || '课程详情' }
+    query: { courseId: item.courseId, metaTitle: item.courseTitle || t('learningSystem.courseDetail') }
   })
 }
 
@@ -457,17 +457,17 @@ const scrollToCourses = () => {
 // 获取热度徽章文字（图片上方）
 const getHotLevel = (viewCount) => {
   const v = viewCount || 0
-  if (v >= 100) return '热门'
-  if (v >= 30) return '上升'
+  if (v >= 100) return t('learningSystem.hotLevel1')
+  if (v >= 30) return t('learningSystem.hotLevel2')
   return ''
 }
 
 // 获取热度标签文字（底部）
 const getHotLabel = (viewCount) => {
   const v = viewCount || 0
-  if (v >= 100) return '爆款课程'
-  if (v >= 30) return '热门推荐'
-  return '新课上线'
+  if (v >= 100) return t('learningSystem.hotLabel1')
+  if (v >= 30) return t('learningSystem.hotLabel2')
+  return t('learningSystem.hotLabel3')
 }
 
 // 获取热度样式类
@@ -481,7 +481,7 @@ const getHotClass = (viewCount) => {
 // 格式化浏览量
 const formatViewCount = (viewCount) => {
   const v = viewCount || 0
-  if (v >= 10000) return (v / 10000).toFixed(1) + '万'
+  if (v >= 10000) return (v / 10000).toFixed(1) + t('learningSystem.tenThousand')
   if (v >= 1000) return (v / 1000).toFixed(1) + 'k'
   return v.toString()
 }
@@ -489,11 +489,11 @@ const formatViewCount = (viewCount) => {
 // 获取学习阶段名称
 const getStageName = (studyStage) => {
   const stageMap = {
-    'basic': '入门级',
-    'intermediate': '进阶级',
-    'advanced': '高级',
+    'basic': t('learningSystem.stageBasic'),
+    'intermediate': t('learningSystem.stageIntermediate'),
+    'advanced': t('learningSystem.stageAdvanced'),
   }
-  return stageMap[studyStage] || '全阶段'
+  return stageMap[studyStage] || t('learningSystem.stageAll')
 }
 
 // 获取学习阶段样式类