feat: 初步接入 translate.js 的多语言切换能力

目前只是在PC端的登录页面的右上角显示多语言切换入口

package.json

@@ -14,6 +14,7 @@
     "lint:fix": "eslint . --fix"
   },
   "dependencies": {
+    "i18n-jsautotranslate": "3.18.63",
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@arco-design/color": "^0.4.0",
     "@arco-themes/vue-gi-demo": "^0.0.51",

src/main.ts

@@ -27,6 +27,9 @@ import directives from './directives'
 // 状态管理
 import pinia from '@/stores'
 
+// 多语言切换
+import {translateJsVueUseModel} from './utils/translate' // 导入translate插件
+
 // 对特定组件进行默认配置
 Card.props.bordered = false
 
@@ -39,5 +42,6 @@ app.use(pinia)
 app.use(ArcoVue)
 app.use(ArcoVueIcon)
 app.use(directives)
+//app.use(translateJsVueUseModel)   //去掉注释，即可启用多语言切换能力。 具体多语言切换的设置，位于 /src/utils/translate.ts
 
 app.mount('#app')

src/utils/translate.ts

@@ -0,0 +1,54 @@
+import {translateJsVueUseModel, translate} from './translateVue3TS' // 导入 translate 的 VUE3 的 ts 插件
+
+/*
+    
+    translate.js AI 多语言切换模块的自定义配置。
+    如果不想启用，你可以通过以下方式中的任何一种进行禁用
+        1. 直接将所有配置全部注释掉
+        2. 将 /src/main.ts 中的这一行 app.use(translateJsVueUseModel) 注释掉即可。
+
+*/
+
+//打印包含具体执行时间的debug日志
+//translate.time.use = true;
+//window.translate.time.printTime = 100;
+
+// 针对翻译动作的性能监控 https://translate.zvo.cn/549733.html
+//translate.time.execute.start(); 
+
+// 设置当前切换所支持的语言 http://translate.zvo.cn/4056.html
+window.translate.selectLanguageTag.languages = 'chinese_simplified,english,korean,latin,french,russian'; 
+
+// 设置本地语种（当前网页的语种） ，如果你网页语种很多，比如国际化论坛，哪个国家发言的都有，那这里你可以不用设置，交给 translate.js 自动去识别当前网页语种 http://translate.zvo.cn/4066.html
+window.translate.language.setLocal('chinese_simplified');
+
+// 本地语种也进行强制翻译 http://translate.zvo.cn/289574.html
+//translate.language.translateLocal = true;
+
+// 翻译时忽略指定的文字不翻译 http://translate.zvo.cn/283381.html
+translate.ignore.text.push('ContiNew Admin'); 
+
+// 网页打开时自动隐藏文字，翻译完成后显示译文 http://translate.zvo.cn/549731.html
+// 注意，如果不启用本多语言切换能力，这个要注释掉，不然你网页的文本是会被隐藏的
+//window.translate.visual.webPageLoadTranslateBeforeHiddenText({inHeadTip: false});
+
+// 启用翻译中的遮罩层 http://translate.zvo.cn/407105.html
+window.translate.progress.api.startUITip();
+
+// 设置采用开源免费的 client.edge 无服务端翻译服务通道，无需任何注册接入即可直接使用 http://translate.zvo.cn/4081.html
+translate.service.use('client.edge');
+
+// 网页ajax请求触发自动翻译 http://translate.zvo.cn/4086.html
+translate.request.listener.start();
+
+// 开启页面元素动态监控，js改变的内容也会被翻译，参考文档： http://translate.zvo.cn/4067.html
+translate.listener.start();
+
+// 元素的内容整体翻译能力配置 ，提高翻译的语义 http://translate.zvo.cn/4078.html
+translate.whole.enableAll();
+
+//触发翻译执行，有关这个的说明可参考 http://translate.zvo.cn/547814.html
+translate.execute(); 
+
+//导出，其中translateJsVueUseModel为vue插件，translate为js函数
+export { translateJsVueUseModel, translate };

src/utils/translateVue3TS.ts

@@ -0,0 +1,91 @@
+import { nextTick } from 'vue';
+import translate from 'i18n-jsautotranslate'
+
+/*
+
+  因为这个文件没什么需要用户单独设置的，只是整体对vue的适配，所以这个文件后续调好了会放到 npm 上，当前因为下面DOM渲染完毕触发的问题没有精准触发，所以暂时先放到这里进行方便优化调试
+
+
+*/
+
+var originalTrasnalteLog = translate.log;
+translate.log = function(obj){
+  if(typeof(obj) === 'string' && obj.indexOf('- translate.js -') !== -1){
+    //不显示 translate.js 的说明
+  }else{
+    originalTrasnalteLog(obj);
+  }
+}
+
+//vue3框架的一些单独设置
+translate.vue3 = {
+  /*
+      是否有 translate.execute() 代码的触发
+      有则是true，没有则是false
+      false则不会再dom渲染完后自动进行翻译,自然也不会显示 select 选择语言
+  */
+  isExecute: false, 
+}
+//如果网页上有 translate.execute() 代码的触发，那么就设置 isExecute 为 true
+translate.lifecycle.execute.trigger.push(function(data){
+  if(data.executeTriggerNumber === 1){
+      translate.vue3.isExecute = true;
+      translate.time.log('打开页面后，第一次触发 translate.execute() - 设置  translate.vue3.isExecute = true;');
+      return false;  
+  }
+});
+translate.time.log('设置vue3初始化配置 - translate.vue3');
+
+//将 translate 参数挂载到 window 上，方便在全局调用
+if(typeof(window.translate) === 'undefined'){
+  window.translate = translate;
+}
+translate.time.log('将 translate 参数挂载到 window 上，方便在全局调用');
+
+const translateJsVueUseModel = {
+  install(app) {
+    // 直接监听应用挂载完成
+    const originalMount = app.mount;
+    app.mount = function(...args) {
+      const root = originalMount.apply(this, args);
+      // 应用挂载完成后执行
+      // 使用双重nextTick确保DOM完全稳定后再执行翻译
+      // 第一个nextTick确保初始DOM渲染完成
+      nextTick(() => {
+        // 第二个nextTick确保可能的异步更新也完成
+        nextTick(() => {
+          
+          /*
+          
+              这里有问题，应该是vue的DOM渲染完毕后触发，但是实际打断点测试，DOM还没有渲染完就触发了，这里还需要跟踪优化
+          
+          
+          */
+
+
+          if(translate.vue3.isExecute){
+            translate.time.log('组件渲染完成，触发 translate.execute();');
+
+            //对vue3的某些第三方组件进行容错处理
+            translate.faultTolerance.documentCreateTextNode.use(); //对VUE的某些组件频繁渲染dom进行容错
+            translate.time.log('对vue3的某些第三方组件进行容错处理 - translate.faultTolerance.documentCreateTextNode.use();');
+
+            translate.execute();
+            setTimeout(() => {
+              translate.execute();
+            }, 100);
+            setTimeout(() => {
+              translate.execute();
+            }, 2000);
+          }else{
+            translate.time.log('组件渲染完成，但未发现translate.execute();存在，不进行翻译');
+          }
+        });
+      });
+      return root;
+    };
+  }
+};
+
+//export default translateJsVueUseModel;
+export { translateJsVueUseModel, translate };

src/views/login/index.vue

@@ -6,6 +6,9 @@
       <span>{{ title }}</span>
     </h3>
 
+    <!-- 多语言切换的 Select 下拉选择 -->
+    <LanguageSelect/>
+
     <a-row align="stretch" class="login-box">
       <a-col :xs="0" :sm="12" :md="13">
         <div class="login-left">
@@ -100,6 +103,7 @@ import { useAppStore } from '@/stores'
 import { useTenantStore } from '@/stores/modules/tenant'
 import { useDevice } from '@/hooks'
 import { getTenantIdByDomain, getTenantStatus } from '@/apis'
+import LanguageSelect from 'i18n-jsautotranslate/ArcoDesign/Vue3/LanguageSelect.vue';
 
 defineOptions({ name: 'Login' })
 
@@ -542,5 +546,13 @@ onMounted(() => {
       }
     }
   }
+
+  //多语言切换
+  .LanguageSelect {
+    position: fixed;
+    top: 20px;
+    right: 80px;
+    z-index: 999;
+  }
 }
 </style>