Browse Source

```
feat(i18n): 完善国际化支持并优化页面布局

- 为多个页面和组件添加国际化翻译支持,包括菜单项、按钮文本及路由标题
- 替换硬编码文本为 i18n 翻译字段,支持中英文切换
- 调整部分页面容器类名,移除不必要的 container 类
- 更新路由配置中的标题引用方式以适配国际化
- 引入 vue-i18n 的 useI18n 并在 Breadcrumb 组件中使用 t 函数处理路由标题显示
```

zhangningning 1 tuần trước cách đây
mục cha
commit
8ee7410b64

+ 3 - 3
src/App.vue

@@ -6,9 +6,9 @@
         <div class="header-content">
           <div class="logo" @click="$router.push('/')">{{ $t('common.title') }}</div>
           <el-menu :default-active="activeIndex" mode="horizontal" :ellipsis="false" class="meauList">
-            <el-menu-item index="1" @click="$router.push('/')">AI工作流</el-menu-item>
+            <el-menu-item index="1" @click="$router.push('/')">AI{{ $t('common.gongzuoliu') }}</el-menu-item>
             <!-- <el-menu-item index="2" @click="$router.push('/my-learning')">工作流交易</el-menu-item> -->
-            <el-menu-item index="2" @click="goMyLearning">工作流交易</el-menu-item>
+            <el-menu-item index="2" @click="goMyLearning">{{ $t('common.gongzuoliu_trade') }}</el-menu-item>
             <el-menu-item index="3" @click="$router.push('/my-learning')">学习教程系统</el-menu-item>
             <el-menu-item index="4" @click="$router.push('/my-learning')">学习笔记</el-menu-item>
             <el-menu-item index="5" @click="$router.push('/my-learning')">积分商城</el-menu-item>
@@ -29,7 +29,7 @@
               </template>
             </el-dropdown>
             <!-- 打开登录弹框 -->
-            <el-button type="text" @click="openLoginDialog" v-if="!appStore.token">登录</el-button>  
+            <el-button type="text" @click="openLoginDialog" v-if="!appStore.token">{{ $t('common.login') }}</el-button>  
             <LangSwitch />
           </div>
         </div>

+ 5 - 2
src/components/Breadcrumb.vue

@@ -1,7 +1,7 @@
 <!-- src/components/Breadcrumb.vue -->
 <template>
   <el-breadcrumb separator="/" class="app-breadcrumb">
-    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+    <el-breadcrumb-item :to="{ path: '/' }">{{ $t('common.home') }}</el-breadcrumb-item>
     <el-breadcrumb-item
       v-for="item in breadcrumbItems"
       :key="item.path"
@@ -15,6 +15,8 @@
 <script setup>
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n' 
+const { t } = useI18n() // 获取t函数// 导入useI18n
 
 const route = useRoute()
 
@@ -31,7 +33,8 @@ const breadcrumbItems = computed(() => {
     if (matchedRoute.path === '/') return
     
     // 获取路由标题
-    const title = matchedRoute.meta.title
+    // 使用 $t() 函数翻译标题
+    const title = t(matchedRoute.meta.title)
     
     // 构造完整路径
     let path = matchedRoute.path

+ 14 - 1
src/locales/en.js

@@ -1,8 +1,21 @@
 export default {
   common: {
+    home: 'Home',
     title: 'Boom Ai',
     logout: 'Logout',
+    login: 'Login',
+    qingshuruyaosousuodegongzuoliu: 'Please input the workflow to search',
+    shousuo: 'Search',
+    chuangjiangongzuoliu: 'Create Workflow',
+
+
+    gongzuoliu: 'Workflow',
+    gongzuoliu_trade: 'Workflow Trade',
   },
-  home: {
+  // 添加路由标题翻译
+  route: {
+    courseDetail: 'Course Detail',
+    myLearning: 'My Learning',
+    myLearningCourseDetail: 'My Learning Course Detail'
   }
 }

+ 15 - 2
src/locales/zh-CN.js

@@ -1,10 +1,23 @@
 export default {
   // 通用模块
   common: {
+    home: '首页',
     title: '暴米Ai',
     logout: '注销',
+    login: '登录',
+    qingshuruyaosousuodegongzuoliu: '请输入要搜索的工作流',
+    shousuo: '搜索',
+    chuangjiangongzuoliu: '创建工作流',
+
+    gongzuoliu: '工作流',
+    gongzuoliu_trade: '工作流交易',
   },
-  // 页面模块(可按业务拆分)
-  home: {
+  // 添加路由标题翻译
+  route: {
+
+
+    courseDetail: '课程详情',
+    myLearning: '我的学习',
+    myLearningCourseDetail: '我的学习课程详情'
   }
 }

+ 1 - 1
src/pages/CourseDetail.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="course-detail-page container" v-if="currentCourse">
+  <div class="course-detail-page" v-if="currentCourse">
     <!-- <el-page-header @back="goBack">
       <template #content>{{ currentCourse.title }}</template>
     </el-page-header> -->

+ 4 - 4
src/pages/Home.vue

@@ -25,7 +25,7 @@
       <div class="platforms">
         <div class="platform-item" @click="activePlatform = 'n8n'" :class="{'active': activePlatform === 'n8n'}">
           <img :src="n8Icon" alt="" class="platform-icon n8n-icon">
-          <span class="platform-name">n8n平台</span>
+          <span class="platform-name">n8n</span>
         </div>
         <div class="platform-item" @click="activePlatform = 'coze'" :class="{'active': activePlatform === 'coze'}">
           <img :src="cozeIcon" alt="" class="platform-icon n8n-icon">
@@ -46,17 +46,17 @@
         <div class="search-input-container flex_1 gradient">
           <input
             type="text"
-            placeholder="请输入要搜索的工作流"
+            :placeholder="$t('common.qingshuruyaosousuodegongzuoliu')"
             class="search-input"
           />
           <button class="search-btn gradient">
             <img :src="searchIcon" alt="" class="icon-search">
-            搜索
+            {{$t('common.shousuo')}}
           </button>
         </div>
         <button class="create-btn gradient">
           <img :src="addIcon" alt="" class="icon-add">
-          创建工作流
+          {{$t('common.chuangjiangongzuoliu')}}
         </button>
       </div>
     </div>

+ 1 - 1
src/pages/MyLearning.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="my-learning-page container">
+  <div class="my-learning-page">
     <!-- <el-page-header content="我的学习"></el-page-header> -->
     <!-- <Breadcrumb /> -->
     

+ 4 - 4
src/router/index.js

@@ -15,25 +15,25 @@ const routes = [
     path: '/course/:id',
     name: 'CourseDetail',
     component: CourseDetail,
-    meta: { title: '课程详情' }
+    meta: { title: 'route.courseDetail' }
   },
   {
     path: '/my-learning',
     name: 'MyLearningHome',
     component: MyLearningHome,
-    meta: { title: '我的学习' },
+    meta: { title: 'route.myLearning' },
     children: [
       {
         path: '',
         name: 'MyLearning',
         component: MyLearning,
-        meta: { title: '我的学习' }
+        meta: { title: 'route.myLearning' }
       },
       {
         path: '/my-learning/course/:id',
         name: 'MyLearningCourseDetail',
         component: CourseDetail,
-        meta: { title: '我的学习课程详情' }
+        meta: { title: 'route.myLearningCourseDetail' }
       }
     ]
   }