torchv-translate 1.0.0

package/extend/vue/vue3/LanguageSelect.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="LanguageSelect ignore">
+    <!-- 使用作用域插槽，将组件内部的数据和方法传递给父组件 -->
+    <slot 
+      :LanguageSelectLanguageList="LanguageSelectLanguageList"
+      :LanguageSelectOnChange="LanguageSelectOnChange"
+    >
+      <!-- 原生 select 实现 -->
+      <select
+        v-model="language"
+        @change="LanguageSelectOnChange"
+        class="ignore"
+      >
+        <option value="" disabled>Please select language</option>
+        <option v-for="option in LanguageSelectLanguageList" :key="option.id" :value="option.id">
+          {{ option.name }}
+        </option>
+      </select>
+    </slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, h } from 'vue';
+
+// 定义语言选项类型
+interface LanguageOption {
+  id: string;
+  name: string;
+}
+
+// 选中的语言ID（双向绑定值）
+const language = ref<string | null>(null);
+
+// 语言选项列表
+const LanguageSelectLanguageList = ref<LanguageOption[]>([]);
+
+// 处理语言选择变化
+const LanguageSelectOnChange = (event: Event) => {
+  // 从事件对象中获取选中的值
+  const target = event.target as HTMLSelectElement;
+  const value = target.value;
+  
+  language.value = value;
+  window.translate.selectLanguageTag.selectOnChange({
+    target: {
+      value: value
+    }
+  });
+};
+
+onMounted(() => {
+  // 保留原有的初始化逻辑
+  if (typeof (translate) == 'object' && typeof (translate.vue3) == 'object' && typeof (translate.vue3.isUse) == 'boolean' && translate.vue3.isUse == true) {
+    // 正常，需要的，需要加载多语言切换Select
+  } else {
+    // 不需要显示
+    return;
+  }
+
+  translate.time.log(translate.vue3.isUse);
+
+  // 重写渲染语言下拉列表出现时的函数
+  translate.selectLanguageTag.render = function () {
+    if (translate.selectLanguageTag.alreadyRender) {
+      return;
+    }
+    translate.selectLanguageTag.alreadyRender = true;
+
+    // 判断如果不显示select选择语言，直接就隐藏掉
+    if (!translate.selectLanguageTag.show) {
+      return;
+    }
+
+    // 从服务器加载支持的语言库
+    if (typeof (translate.request.api.language) == 'string' && translate.request.api.language.length > 0) {
+      // 从接口加载语种
+      translate.request.post(translate.request.api.language, {}, function (data) {
+        if (data.result == 0) {
+          console.log('load language list error : ' + data.info);
+          return;
+        }
+        translate.request.api.language = data.list; // 进行缓存
+        translate.selectLanguageTag.customUI(data.list);
+      }, null);
+    } else if (typeof (translate.request.api.language) == 'object') {
+      // 无网络环境下，自定义显示语种
+      translate.selectLanguageTag.customUI(translate.request.api.language);
+    }
+
+    // 显示切换语言
+    const TranslateJsSelectLanguages = document.getElementsByClassName('LanguageSelect');
+    for (let li = 0; li < TranslateJsSelectLanguages.length; li++) {
+      TranslateJsSelectLanguages[li].style.display = 'block';
+    }
+  }
+
+  // 处理语言列表数据
+  translate.selectLanguageTag.customUI = function (externalLanguageList) {
+    // 整理允许显示的语种
+    const allowLanguageList: LanguageOption[] = [];
+
+    // 判断 selectLanguageTag.languages 中允许使用哪些
+    if (translate.selectLanguageTag.languages.length > 0) {
+      // 设置了自定义显示的语言
+      // 都转小写判断
+      const langs_indexof = (',' + translate.selectLanguageTag.languages + ',').toLowerCase();
+
+      for (let i = 0; i < externalLanguageList.length; i++) {
+        if (langs_indexof.indexOf(',' + externalLanguageList[i].id.toLowerCase() + ',') < 0) {
+          // 没发现，那不显示这个语种，调出
+          continue;
+        }
+        allowLanguageList.push(externalLanguageList[i]);
+      }
+
+    } else {
+      // 显示所有
+      allowLanguageList.push(...externalLanguageList);
+    }
+    // 赋予带渲染到界面的语言列表数据
+    LanguageSelectLanguageList.value = allowLanguageList;
+
+    // 显示上一次切换后的语种
+    language.value = translate.language.getCurrent();
+  }
+
+  // 渲染语言下拉列表出现
+  translate.selectLanguageTag.refreshRender();
+});
+</script>
+
+<style scoped>
+/* 避免被遮挡无法操作，设置z-index较高 */
+.LanguageSelect {
+  z-index: 2147483583;
+  display: none;
+}
+</style>

package/extend/vue/vue3/translate.ts

@@ -0,0 +1,63 @@
+import {translateJsVueUseModel, translate} from 'torchv-translate/vue/vue3/translateVue3TS.ts';  // 导入 translate 的 VUE3 的 ts 插件
+
+
+/*
+    
+    translate.js AI 多语言切换模块的自定义配置。
+    如果不想启用，你可以通过以下方式中的任何一种进行禁用
+        1. 直接将所有配置全部注释掉
+        2. 将 /src/main.ts 中的这一行 app.use(translateJsVueUseModel) 注释掉即可。
+
+    这些将会在 app.use(translateJsVueUseModel)  时被执行
+*/
+translate.vue3.config = function(app){
+
+    //打印包含具体执行时间的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/391129.html
+    // 注意，如果你用开源版本，请不要启用此，不然请求过快，会触发接口风控保护，禁用你的终端
+    //translate.waitingExecute.use = false;
+
+    // 本地语种也进行强制翻译 http://translate.zvo.cn/289574.html
+    //translate.language.translateLocal = true;
+
+    // 翻译时忽略指定的文字不翻译 http://translate.zvo.cn/283381.html
+    //translate.ignore.text.push('xxxxx'); 
+
+    // 网页打开时自动隐藏文字，翻译完成后显示译文 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 };

package/extend/vue/vue3/translateVue3TS.ts

@@ -0,0 +1,93 @@
+import { nextTick } from 'vue';
+import translate from 'torchv-translate'
+
+/* 这里不打印 translate.js 的声明 */
+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, 
+  /*
+    是否在vue入口文件中 调用了 translateJsVueUseModel 插件 app.use(translateJsVueUseModel) 
+    有则是true，没有则是false
+  */
+  isUse: false,
+  /* 
+    用户自定义配置，将在 app.use(translateJsVueUseModel)  时触发这个方法的执行
+  */
+  config: function(app){}
+}
+
+//如果 translate.vue3.config 中有 translate.execute() 代码的触发，那么就设置 isExecute 为 true ，同时阻止此次的 translate.execute() 执行，因为此次执行是在vue3的初始化阶段，而不是在dom渲染完毕后触发的，所以这里只是进行一个标记，待 真实 DOM渲染完毕后再来触发。
+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 参数挂载到 window 上，方便在全局调用
+if(typeof(window.translate) === 'undefined'){
+  window.translate = translate;
+}
+translate.time.log('将 translate 参数挂载到 window 上，方便在全局调用及调试');
+
+
+const translateJsVueUseModel = {
+  install(app) {
+    translate.time.log(' app.use(translateJsVueUseModel) ');
+    translate.vue3.isUse = true;
+
+    //触发自定义配置
+    translate.vue3.config(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();
+          }else{
+            translate.time.log('组件渲染完成，但未发现translate.execute();存在，不进行翻译');
+          }
+        });
+      });
+      return root;
+    };
+  }
+};
+
+//export default translateJsVueUseModel;
+export { translateJsVueUseModel, translate };

package/index.js

@@ -0,0 +1,12 @@
+/**
+ * torchv-translate
+ * 一个开源的网页自动翻译解决方案
+ */
+
+// 导入核心翻译引擎
+require('./translate.js/translate.js');
+
+// 导出 translate 对象供外部使用
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = typeof translate !== 'undefined' ? translate : {};
+}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "torchv-translate",
+  "version": "1.0.0",
+  "description": "Two lines of js realize automatic html translation. No need to change the page, no language configuration file, no API key, SEO friendly!",
+  "main": "index.js",
+  "scripts": {
+    "version": "node dev/update-version.js",
+    "postversion": "git push && git push --tags"
+  },
+  "keywords": [
+    "i18n",
+    "translatejs",
+    "i18n-translatejs"
+  ],
+  "files": [
+    "index.js",
+    "translate.js/translate.js",
+    "extend/ArcoDesign/Vue3/LanguageSelect.vue",
+    "extend/vue/vue3/LanguageSelect.vue",
+    "extend/vue/vue3/translateVue3TS.ts",
+    "extend/vue/vue3/translate.ts",
+    "extend/naiveUI/LanguageSelect.vue"
+  ],
+  "homepage": "https://github.com/xnx3/translate#readme",
+  "bugs": {
+    "url": "https://github.com/xnx3/translate/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/xnx3/translate.git"
+  },
+  "author": "管雷鸣",
+  "license": "MIT"
+}