diff --git a/package.json b/package.json index 00c5202..3239c14 100644 --- a/package.json +++ b/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", diff --git a/src/main.ts b/src/main.ts index 4065dfe..ff6a69f 100644 --- a/src/main.ts +++ b/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') diff --git a/src/utils/translate.ts b/src/utils/translate.ts new file mode 100644 index 0000000..db6c2e8 --- /dev/null +++ b/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 }; \ No newline at end of file diff --git a/src/utils/translateVue3TS.ts b/src/utils/translateVue3TS.ts new file mode 100644 index 0000000..cb57666 --- /dev/null +++ b/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 }; diff --git a/src/views/login/index.vue b/src/views/login/index.vue index 3430645..2b8a51f 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -6,6 +6,9 @@ {{ title }} + + +