增加翻译

package.json

@@ -38,6 +38,7 @@
     "vant": "^4.6.4",
     "vconsole": "^3.15.0",
     "vue": "^3.2.47",
+    "vue-i18n": "^10.0.1",
     "vue-router": "^4.1.6",
     "vue3-clipboard": "^1.0.0",
     "vue3-tree-org": "^4.2.2",

src/lang/cn.js

@@ -0,0 +1,7 @@
+export default {
+  // tabbar
+  tabbar: {
+    home: '首页',
+    my: '我的',
+  },
+}

src/lang/en.js

@@ -0,0 +1,6 @@
+export default {
+  tabbar: {
+    home: 'home',
+    my: 'my',
+  },
+}

src/lang/index.js

@@ -0,0 +1,15 @@
+import { createI18n } from 'vue-i18n'
+// 语言包
+import zhCn from './cn'
+import en from './en'
+
+const i18n = createI18n({
+  globalInjection: true, //全局生效$t
+  legacy: false, // 设置为 false，启用 composition API 模式
+  locale: sessionStorage.getItem('localeLang') || 'zhCn',
+  messages: {
+    zhCn,
+    en,
+  },
+})
+export default i18n

src/main.js

@@ -17,6 +17,9 @@ import svgIcon from "@/components/SvgIcon.vue";
 //引入注册脚本
 import 'virtual:svg-icons-register'
 
+// i18n 国际化
+import i18n from '@/lang/index'
+
 /* import { Buffer } from 'buffer'; */
 import * as buffer from 'buffer'
 if(typeof(window.global)==="undefined"){
@@ -42,4 +45,5 @@ setupStore(app)
 app.component('svg-icon', svgIcon)
 app.use(vue3TreeOrg)
 app.use(router)
+app.use(i18n)
 app.mount('#app')

src/store/modules/i18n.js

@@ -0,0 +1,20 @@
+import { defineStore } from 'pinia'
+import i18n from "../../lang/index.js";
+
+const useLocaleStore = defineStore('locale', {
+  state: () => {
+    return {
+      locale: localStorage.getItem('lang') || 'zhCn',
+    }
+  },
+  actions: {
+    SET_LOCALE(locale) {
+      this.locale = locale
+      localStorage.setItem('lang', locale)
+      i18n.global.locale.value = locale
+    },
+  },
+  getters: {},
+})
+
+export default useLocaleStore

src/views/tabbar/Home.vue

@@ -1,21 +1,22 @@
 <script setup>
 import {ref,computed} from 'vue'
 import { useRouter } from "vue-router";
-import {apiMenuList} from '@/api/user'
+import {apiMenuList, _apiLogin} from '@/api/user'
 import {getStaticImg} from '@/hooks/common'
 import {useCachedViewsStore} from '@/store/modules/cachedViews'
 import { showToast } from 'vant';
 import { useWindowSize } from '@vueuse/core'
 import {usePublicSettingStore} from '@/store/modules/publicSetting'
-import {_apiLogin} from '@/api/user'
-const publicSettingStore = usePublicSettingStore()
-
+import useLocaleStore from "@/store/modules/i18n";
 
+const publicSettingStore = usePublicSettingStore()
 const { width } = useWindowSize()
 const cachedViewsStore=useCachedViewsStore()
 cachedViewsStore.removeCaches(-1)
-
+const localeStore = useLocaleStore()
 const router=useRouter()
+const temp = localeStore.locale === 'zhCn' ? 'zh' : 'en'; //根据当前i18n语言设置表格默认语言
+const language_version=ref(temp)//语言版本 zh en 
 
 function goNext(path){
     if(!path){
@@ -30,12 +31,13 @@ if(!localStorage.getItem('token')){
     router.replace('/login')
 }
 
-const language_version=ref('zh')//语言版本 zh en 
 function languageVersionChange(){
     if(language_version.value==='zh'){
         language_version.value='en'
+        localeStore.SET_LOCALE('en')
     }else{
         language_version.value='zh'
+        localeStore.SET_LOCALE('zhCn')
     }
 }
 const topImg=computed(()=>{
@@ -56,15 +58,16 @@ const topImg=computed(()=>{
     return url
 })
 /**
- * name 显示的名称
+ * zhName 显示的中文版名称
+ * enName 显示的英文版名称
  * key 对应接口中的 name
  * level 说明该菜单在数据中的第几级查找
- * type 类型 zh中文 en英文
+ * type 类型 zh中文 en英文 ==> 默认中文点击切换
  */
 const menuConfig=[
     // {
-    //     name:'中文研报',
-    //     des:'研报一体化管理',
+    //     zhName:'中文研报',
+    //     zhDes:'研报一体化管理',
     //     key:'研报列表',
     //     type:'zh',
     //     level:2,
@@ -74,10 +77,12 @@ const menuConfig=[
     //     show:false
     // },
     // {
-    //     name:'English Research Report',
-    //     des:'Integrated Research Report Management',
+    //     zhName:'英文研报',
+    //     zhDes:'支持共享协作编辑',
+    //     enName:'English Research Report',
+    //     enDes:'Integrated Research Report Management',
     //     key:'英文研报',
-    //     type:'en',
+    //     type:'zh',
     //     level:2,
     //     path:'/reportEn/list',
     //     icon:getStaticImg('tabbar/icon_report.png'),
@@ -85,8 +90,10 @@ const menuConfig=[
     //     show:false
     // },
     {
-        name:'智能PPT',
-        des:"支持共享协作编辑",
+        zhName:'智能PPT',
+        zhDes:"支持共享协作编辑",
+        enName:'PPT Slides',
+        enDes:'Support for collaborative editing',
         key:'智能ppt',
         type:'zh',
         level:1,
@@ -96,10 +103,12 @@ const menuConfig=[
         show:false
     },
     {
-        name:'PPT in English',
-        des:'Support for collaborative editing',
+        zhName:'英文ppt',
+        zhDes:'支持共享协作编辑',
+        enName:'ppt in English',
+        enDes:'Support for collaborative editing',
         key:'英文ppt',
-        type:'en',
+        type:'zh',
         level:1,
         path:'/ppten/index',
         icon:getStaticImg('tabbar/icon_PPT.png'),
@@ -107,8 +116,8 @@ const menuConfig=[
         show:false
     },
     // {
-    //     name:'数据源',
-    //     des:'数据对接与整合',
+    //     zhName:'数据源',
+    //     zhDes:'数据对接与整合',
     //     key:'数据源',
     //     type:'zh',
     //     level:1,
@@ -118,8 +127,10 @@ const menuConfig=[
     //     show:false
     // },
     {
-        name:'指标库',
-        des:'数据归类与分析',
+        zhName:'指标库',
+        zhDes:'数据归类与分析',
+        enName:'Indics',
+        enDes:'Support for collaborative editing',
         key:'指标库',
         type:'zh',
         level:1,
@@ -129,8 +140,8 @@ const menuConfig=[
         show:false
     },
     // {
-    //     name:'预测指标',
-    //     des:'模型预测趋势',
+    //     zhName:'预测指标',
+    //     zhDes:'模型预测趋势',
     //     key:'预测指标',
     //     type:'zh',
     //     level:1,
@@ -140,8 +151,10 @@ const menuConfig=[
     //     show:false
     // },
     {
-        name:'图库',
-        des:'数据可视化平台',
+        zhName:'图库',
+        zhDes:'数据可视化平台',
+        enName:'Charts',
+        enDes:'Support for collaborative editing',
         key:'图库',
         type:'zh',
         level:1,
@@ -151,8 +164,10 @@ const menuConfig=[
         show:false
     },
     {
-        name:'我的图库',
-        des:'图表收藏',
+        zhName:'我的图库',
+        zhDes:'图表收藏',
+        enName:'My Charts',
+        enDes:'Support for collaborative editing',
         key:'我的投研',
         type:'zh',
         level:1,
@@ -161,46 +176,51 @@ const menuConfig=[
         backgroundColor:'#F5FAFF',
         show:false
     },
-    // {
-    //     name:'表格',
-    //     des:'快速建立平衡表',
-    //     key:'表格',
-    //     type:'zh',
-    //     level:1,
-    //     path:'',
-    //     icon:getStaticImg('tabbar/icon_table.png'),
-    //     backgroundColor:'#FFFBF6',
-    //     show:false
-    // },
+    {
+        zhName:'表格',
+        zhDes:'快速建立平衡表',
+        enName:'Tables',
+        enDes:'Quickly establish a balance sheet',
+        key:'表格',
+        type:'zh',
+        level:1,
+        path:'',
+        icon:getStaticImg('tabbar/icon_table.png'),
+        backgroundColor:'#FFFBF6',
+        show:false
+    },
 ]
-const menuOpts=computed(()=>{
-    // 过滤中英文
-    let arr=menuConfig.filter(item=>item.type===language_version.value)
-    
-    // 根据菜单数据权限过滤
-    arr.forEach(item=>{
-        if(item.level===1){
-            resMenuList.value.forEach(f=>{
-                if(f.name.trim()===item.key){
-                    item.show=true
-                }
-            })
-        }
-        if(item.level===2){
-            resMenuList.value.forEach(f=>{
-                const arr=f.children||[]
-                arr.forEach(s=>{
-                    if(s.name.trim()===item.key){
-                        item.show=true
-                    }
-                })
-            })
-        }
-    })
 
-    arr=arr.filter(item=>item.show)
-    return arr||[]
-})
+// 新增一个用于映射语言版本的函数
+function mapMenuToLanguage(item, language) {
+    if (language === 'zh') {
+        return { ...item, name: item.zhName, des: item.zhDes, type: 'zh' };
+    } else {
+        return { ...item, name: item.enName, des: item.enDes, type: 'en' };
+    }
+}
+
+// 过滤出有权限的菜单项
+const filteredMenuConfig = computed(() => {
+    return menuConfig.filter(item => {
+        // 根据菜单数据权限过滤
+        const hasPermission = resMenuList.value.some(f => {
+            if (item.level === 1) {
+                return f.name.trim() === item.key;
+            } else if (item.level === 2) {
+                return (f.children || []).some(s => s.name.trim() === item.key);
+            }
+            return false;
+        });
+        return hasPermission;
+    });
+});
+
+// 根据当前语言版本过滤并映射菜单项
+const menuOpts = computed(() => {
+    return filteredMenuConfig.value.map(item => mapMenuToLanguage(item, language_version.value));
+});
+
 
 // 获取菜单权限数据
 const resMenuList=ref([])

src/views/tabbar/Index.vue

@@ -1,25 +1,29 @@
 <script setup>
 import {getStaticImg} from '@/hooks/common.js'
 import { useRouter } from 'vue-router'
+import {getCurrentInstance, computed} from 'vue'
+const { appContext : { config: { globalProperties } } } = getCurrentInstance();
 
 const router=useRouter()
 
-const tabbarList=[
-    {
-        name:"home",
-        icon:getStaticImg('tabbar/home.png'),
-        iconActive:getStaticImg('tabbar/home-s.png'),
-        text:'首页',
-        path:"/tabbar/home"
-    },
-    {
-        name:"user",
-        icon:getStaticImg('tabbar/user.png'),
-        iconActive:getStaticImg('tabbar/user-s.png'),
-        text:'我的',
-        path:"/tabbar/user"
-    }
-]
+const tabbarList = computed(() => {
+    return [
+        {
+            name:"home",
+            icon:getStaticImg('tabbar/home.png'),
+            iconActive:getStaticImg('tabbar/home-s.png'),
+            text: globalProperties.$t('tabbar.home'),
+            path:"/tabbar/home"
+        },
+        {
+            name:"user",
+            icon:getStaticImg('tabbar/user.png'),
+            iconActive:getStaticImg('tabbar/user-s.png'),
+            text:globalProperties.$t('tabbar.my'),
+            path:"/tabbar/user"
+        }
+    ]
+})
 
 function goPage(item){
     router.replace(item.path)