i18n-jsautotranslate 3.18.66 → 3.18.72

package/ArcoDesign/Vue3/README.md

@@ -0,0 +1,57 @@
+# ArcoDesign
+
+## 接入 vue3 方式使用 translate.js
+http://translate.zvo.cn/4041.html
+
+## 页面上出现语言切换的Select下拉切换菜单
+
+#### 效果
+见下图右上角的多语言切换  
+![](./resource/preview.png)
+
+#### 代码
+
+比如要在 index.vue 页面上显示切换语言的 select 下拉菜单，那么 index.vue 页面中，要进行的操作：  
+先在 index.vue 中，加入一行导入 ArcoDesign 的多语言切换Select 
+````import LanguageSelect from 'i18n-jsautotranslate/ArcoDesign/Vue3/LanguageSelect.vue';````  
+然后在要显示select菜单的位置，直接加入  
+````<LanguageSelect/>````  
+即可。  
+最后，可以使用css样式来进行自定义美化，比如要将这个语言切换放到页面的右上角：
+````
+/* 多语言切换Select */
+.LanguageSelect {
+	position: fixed;
+	top: 20px;
+	right: 80px;
+}
+````
+注意，这个多语言切换的 select ，它的class 名字为 LanguageSelect  
+
+完整的示例代码如下：
+````
+<template>
+  <div class="login">
+    <h3 class="login-logo">
+      Logo
+    </h3>
+
+    <!-- 多语言切换的 Select 下拉选择 -->
+    <LanguageSelect/>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import LanguageSelect from 'i18n-jsautotranslate/ArcoDesign/Vue3/LanguageSelect.vue';
+</script>
+
+<style scoped>
+.LanguageSelect {
+  position: fixed;
+  top: 20px;
+  right: 80px;
+}
+</style>
+````
+

package/index.js

@@ -14,7 +14,7 @@ var translate = {
 	 * 格式：major.minor.patch.date
 	 */
 	// AUTO_VERSION_START
-	version: '3.18.66.20250930',
+	version: '3.18.72.20251010',
 	// AUTO_VERSION_END
 	/*
 		当前使用的版本，默认使用v2. 可使用 setUseVersion2(); 
@@ -73,6 +73,11 @@ var translate = {
 		*/
 		languages:'',
 		alreadyRender:false, //当前是否已渲染过了 true为是 v2.2增加
+
+		changeLanguageBeforeLoadOfflineFile: function(path){
+
+		},
+
 		selectOnChange:function(event){
 			var language = event.target.value;
 			translate.changeLanguage(language);
@@ -950,7 +955,22 @@ var translate = {
 		},
 	},
 
+	//已转为 offline ，这个是对旧版做兼容
 	office:{
+		export:function(){
+			console.log('请使用最新版本的 translate.offline.export , 而不是 translate.office.export');
+		},
+		showPanel:function(){
+			console.log('请使用最新版本的 translate.offline.showPanel , 而不是 translate.office.export');
+		},
+		append:function(to, properties){
+			translate.offline.append(to, properties);
+		},
+		fullExtract:{
+			isUse:false
+		}
+	},
+	offline:{
 		/*
 			网页上翻译之后，自动导出当前页面的术语库
 			
@@ -996,7 +1016,7 @@ var translate = {
 
 			if(text.length > 0){
 				//有内容
-				text = 'translate.office.append(\''+translate.language.getCurrent()+'\',`'+text+'\n`);';
+				text = 'translate.offline.append(\''+translate.language.getCurrent()+'\',`'+text+'\n`);';
 				//console.log(text);
 				translate.util.loadMsgJs();
 				msg.popups({
@@ -1021,7 +1041,7 @@ var translate = {
 			//导出按钮
 			let button = document.createElement('button');
 			button.onclick = function() {
-			  translate.office.export();
+			  translate.offline.export();
 			};
 			button.innerHTML = '导出配置信息';
 			button.setAttribute('style', 'margin-left: 72px; margin-top: 30px; margin-bottom: 20px; font-size: 25px; background-color: blue; padding: 15px; padding-top: 3px; padding-bottom: 3px; border-radius: 3px;');
@@ -1084,7 +1104,7 @@ var translate = {
 		
 		//全部提取能力（整站的离线翻译数据提取）
 		fullExtract:{
-			/*js translate.office.fullExtract.set start*/
+			/*js translate.offline.fullExtract.set start*/
 			/*
 				将翻译的结果加入
 				hash: 翻译前的文本的hash
@@ -1106,9 +1126,9 @@ var translate = {
 				obj[toLanguage] = translateText;
 				await translate.storage.IndexedDB.set('hash_'+hash, obj);
 			},
-			/*js translate.office.fullExtract.set end*/
+			/*js translate.offline.fullExtract.set end*/
 
-			/*js translate.office.fullExtract.export start*/
+			/*js translate.offline.fullExtract.export start*/
 			/*
 				将存储的数据导出为 txt 文件下载下来
 			*/
@@ -1121,7 +1141,7 @@ var translate = {
 					translate.log('error : to param not find, example: "english"');
 					return;
 				}
-				var text = 'translate.office.append(\'';
+				var text = 'translate.offline.append(\''+to+'\',`';
 				
 				var data = await translate.storage.IndexedDB.list('hash_*');
 				for(var i in data){
@@ -1141,7 +1161,7 @@ var translate = {
 				link.click();
 				URL.revokeObjectURL(url);
 			},
-			/*js translate.office.fullExtract.export end*/
+			/*js translate.offline.fullExtract.export end*/
 
 			/*
 				是否启用全部提取的能力
@@ -2413,7 +2433,7 @@ var translate = {
 		
 		if(all.length > 500){
 			translate.log('------tip------');
-			translate.log('translate.execute( docs ) 传入的docs.length 过大，超过500，这很不正常，当前 docs.length : '+all.length+' ,如果你感觉真的没问题，请联系作者 http://translate.zvo.cn/43006.html 说明情况，根据你的情况进行分析。 当前只取前500个元素进行翻译');
+			translate.log('translate.execute( docs ) 传入的docs.length 过大，超过1500，这很不正常，当前 docs.length : '+all.length+' ,如果你感觉真的没问题，请联系作者 http://translate.zvo.cn/43006.html 说明情况，根据你的情况进行分析。 当前只取前1500个元素进行翻译');
 		}
 
 		//初始化 translate.element.tagAttribute ，主要针对 v3.17.10 版本的适配调整，对 translate.element.tagAttribute  的设置做了改变，做旧版本的适配
@@ -2439,7 +2459,7 @@ var translate = {
 
 		translate.time.log('开始扫描要翻译区域的元素');
 		//检索目标内的node元素
-		for(var i = 0; i< all.length & i < 500; i++){
+		for(var i = 0; i< all.length & i < 1500; i++){
 			var node = all[i];
 			translate.element.whileNodes(uuid, node);	
 		}
@@ -3162,8 +3182,8 @@ var translate = {
 					//将翻译结果以 key：hash  value翻译结果的形式缓存
 					translate.storage.set('hash_'+data.to+'_'+cacheHash,text);
 					//如果离线翻译启用了全部提取，那么还要存入离线翻译指定存储
-					if(translate.office.fullExtract.isUse){
-						translate.office.fullExtract.set(hash, originalWord, data.to, text);
+					if(translate.offline.fullExtract.isUse){
+						translate.offline.fullExtract.set(hash, originalWord, data.to, text);
 					}
 				}
 				task.execute(); //执行渲染任务
@@ -8138,8 +8158,8 @@ var translate = {
 					var hash = translate.util.hash(apiTranslateText[i]);
 					translate.storage.set('hash_'+to+'_'+hash, resultData.text[i]);
 					//如果离线翻译启用了全部提取，那么还要存入离线翻译指定存储
-					if(translate.office.fullExtract.isUse){
-						translate.office.fullExtract.set(hash, apiTranslateText[i], data.to, resultData.text[i]);
+					if(translate.offline.fullExtract.isUse){
+						translate.offline.fullExtract.set(hash, apiTranslateText[i], data.to, resultData.text[i]);
 					}
 
 					//进行组合数据到 translateResultArray
@@ -9315,20 +9335,99 @@ var translate = {
 
 			obj: js对象
 			formatSupplementaryCharLength: 对这个js对象进行格式化自动补充字符的长度，比如 2、 4
+
+			2025.10.10 优化传入参数
+			obj:{
+				jsObject: 原本的obj参数， 也就是js对象
+				formatSupplementaryCharLength: 对这个js对象进行格式化自动补充字符的长度，比如 2、 4 ,默认不设置则是4
+				functionBodyHandle: 针对值是function函数类型时，可以自定义对函数体的源码进行处理，它是传入 function 类型的，比如：
+						functionBodyHandle: function(functionBody){
+							functionBody = functionBody+'123';
+							return functionBody;
+						}
+						传入值是函数体的string类型的源码内容
+						返回值是修改过后最新的函数体的string类型的源码内容
+						这是 2025.10.10 新增参数，应对layui的 i18n 全自动翻译函数体中的字符串文本
+			}
 		*/
 		objToString:function(obj, formatSupplementaryCharLength){
+			if(typeof(obj) === 'object'){
+				if(typeof(obj.jsObject) === 'object'){
+					//是 2025.10.10 以后的新版本
+				}else{
+					//是 2025.10.10 以前的旧版本
+					var newObj = {
+						jsObject: obj
+					}
+					obj = newObj;
+				}
+			}else{
+				obj = {};
+			}
+			if(typeof(formatSupplementaryCharLength) === 'number'){
+				obj.formatSupplementaryCharLength = formatSupplementaryCharLength;
+			}
+			//未设置，就赋予默认值4
+			if(typeof(obj.formatSupplementaryCharLength) !== 'number'){
+				obj.formatSupplementaryCharLength = 4; 
+			}
+
 			// 自定义replacer函数，将函数转换为字符串
-			const jsonStr = JSON.stringify(obj, (key, value) => {
+			let jsonStr = JSON.stringify(obj.jsObject, (key, value) => {
 			  if (typeof value === 'function') {
 			    // 将函数转换为其源代码字符串
-			    return value.toString();
+			    var funcString = value.toString();
+			    if(typeof(funcString) === 'string' && funcString.length > 0){
+			    	funcString = funcString.replace(/\n/g, '___TRANSLATEJS_LINE_BREAK___');	
+			    }
+			    return funcString;
+			  }else{
+			  	return value;
 			  }
-			  return value;
-			}, formatSupplementaryCharLength);
 
-			// 将转义的\n替换为实际的换行符
-			const formattedStr = jsonStr.replace(/\\n/g, '\n');
-			return formattedStr;
+	          return result;
+			}, obj.formatSupplementaryCharLength);
+
+
+			//对 function 的函数体进行处理
+			// 将转义的\n替换为实际的换行符 -- 20251009 优化，去掉换行符替换，layui 工具中发现这样会将原本文本中的换行符替换掉，而是调整为仅仅针对function方法进行针对替换
+			// 逐行判断，判断其中哪一行的value是function，要将function的字符串格式变为function函数格式
+			if(jsonStr.indexOf('___TRANSLATEJS_LINE_BREAK___') > -1){
+				const lines = jsonStr.split('\n');
+			    for(var li = 0; li<lines.length; li++){
+			    	// 检查当前行是否包含特定标记
+			        if (lines[li].includes('___TRANSLATEJS_LINE_BREAK___')) {
+			        	lines[li] = lines[li].replace(/___TRANSLATEJS_LINE_BREAK___/g, '\n'); //将其替换为原本的换行符
+
+			            // 查找值部分（假设格式是 "key": "function..."）
+			            const valueMatch = lines[li].match(/"[^"]+":\s*"([^"]+)"/);
+			            if (valueMatch && valueMatch[1]) {
+			                // 替换换行标记为实际换行
+			                let functionStr = valueMatch[1].replace(/___TRANSLATEJS_LINE_BREAK___/g, '\n');
+			                
+			                // 将函数字符串转换为实际函数
+			                try {
+			                    // 使用Function构造函数创建函数更安全一些
+			                    const functionParts = functionStr.match(/function\s*([^\(]*)\(([^)]*)\)\s*\{([\s\S]*)\}/);
+			                    
+			                    if (functionParts) {
+			                        var [, name, params, body] = functionParts;
+			                        if(typeof(obj.functionBodyHandle) === 'function'){
+			                        	body = obj.functionBodyHandle(body);
+			                        }
+			                        // 替换原行中的字符串为函数表达式
+			                        lines[li] = lines[li].replace(`"${valueMatch[1]}"`, `function${name}(${params}){${body}}`);
+			                    }
+			                } catch (e) {
+			                    console.error('转换函数时出错:', e);
+			                }
+			            }
+			        }
+			    }
+			 	jsonStr = lines.join('\n');   
+			}
+		    
+			return jsonStr;
 		}
 	},
 	/*js dispose end*/
@@ -10937,7 +11036,7 @@ var nodeuuid = {
 //延迟触发，方便拦截自定义
 setTimeout(function(){
 	translate.log('------ translate.js ------\nTwo lines of js html automatic translation, page without change, no language configuration file, no API Key, SEO friendly! Open warehouse : https://github.com/xnx3/translate \n两行js实现html全自动翻译。 无需改动页面、无语言配置文件、无API Key、对SEO友好！完全开源，代码仓库：https://gitee.com/mail_osc/translate');
-}, 1000);
+}, 3000);
 /*js copyright-notice end*/
 
 //初始化

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "i18n-jsautotranslate",
-  "version": "3.18.66",
+  "version": "3.18.72",
   "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": {

package/vue/vue3/translate.ts

@@ -7,48 +7,55 @@ import {translateJsVueUseModel, translate} from './translateVue3TS' // 导入 tr
         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;
+    //打印包含具体执行时间的debug日志
+    //translate.time.use = true;
+    //window.translate.time.printTime = 100;
 
-// 针对翻译动作的性能监控 https://translate.zvo.cn/549733.html
-translate.time.execute.start(); 
+    // 针对翻译动作的性能监控 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'; 
+    // 设置当前切换所支持的语言 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');
+    // 设置本地语种（当前网页的语种） ，如果你网页语种很多，比如国际化论坛，哪个国家发言的都有，那这里你可以不用设置，交给 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/391129.html
+    // 注意，如果你用开源版本，请不要启用此，不然请求过快，会触发接口风控保护，禁用你的终端
+    //translate.waitingExecute.use = false;
 
-// 翻译时忽略指定的文字不翻译 http://translate.zvo.cn/283381.html
-translate.ignore.text.push('ContiNew Admin'); 
+    // 本地语种也进行强制翻译 http://translate.zvo.cn/289574.html
+    //translate.language.translateLocal = true;
 
-// 网页打开时自动隐藏文字，翻译完成后显示译文 http://translate.zvo.cn/549731.html
-// 注意，如果不启用本多语言切换能力，这个要注释掉，不然你网页的文本是会被隐藏的
-//window.translate.visual.webPageLoadTranslateBeforeHiddenText({inHeadTip: false});
+    // 翻译时忽略指定的文字不翻译 http://translate.zvo.cn/283381.html
+    //translate.ignore.text.push('xxxxx'); 
 
-// 启用翻译中的遮罩层 http://translate.zvo.cn/407105.html
-window.translate.progress.api.startUITip();
+    // 网页打开时自动隐藏文字，翻译完成后显示译文 http://translate.zvo.cn/549731.html
+    // 注意，如果不启用本多语言切换能力，这个要注释掉，不然你网页的文本是会被隐藏的
+    //window.translate.visual.webPageLoadTranslateBeforeHiddenText({inHeadTip: false});
 
-// 设置采用开源免费的 client.edge 无服务端翻译服务通道，无需任何注册接入即可直接使用 http://translate.zvo.cn/4081.html
-translate.service.use('client.edge');
+    // 启用翻译中的遮罩层 http://translate.zvo.cn/407105.html
+    window.translate.progress.api.startUITip();
 
-// 网页ajax请求触发自动翻译 http://translate.zvo.cn/4086.html
-translate.request.listener.start();
+    // 设置采用开源免费的 client.edge 无服务端翻译服务通道，无需任何注册接入即可直接使用 http://translate.zvo.cn/4081.html
+    translate.service.use('client.edge');
 
-// 开启页面元素动态监控，js改变的内容也会被翻译，参考文档： http://translate.zvo.cn/4067.html
-translate.listener.start();
+    // 网页ajax请求触发自动翻译 http://translate.zvo.cn/4086.html
+    translate.request.listener.start();
 
-// 元素的内容整体翻译能力配置 ，提高翻译的语义 http://translate.zvo.cn/4078.html
-translate.whole.enableAll();
+    // 开启页面元素动态监控，js改变的内容也会被翻译，参考文档： http://translate.zvo.cn/4067.html
+    translate.listener.start();
 
-//触发翻译执行，有关这个的说明可参考 http://translate.zvo.cn/547814.html
-translate.execute(); 
+    // 元素的内容整体翻译能力配置 ，提高翻译的语义 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/vue/vue3/translateVue3TS.ts

@@ -1,13 +1,6 @@
 import { nextTick } from 'vue';
 import translate from 'i18n-jsautotranslate'
 
-/*
-
-  因为这个文件没什么需要用户单独设置的，只是整体对vue的适配，所以这个文件后续调好了会放到 npm 上，当前因为下面DOM渲染完毕触发的问题没有精准触发，所以暂时先放到这里进行方便优化调试
-
-
-*/
-
 //vue3框架的一些单独设置
 translate.vue3 = {
   /*
@@ -16,8 +9,18 @@ translate.vue3 = {
       false则不会再dom渲染完后自动进行翻译,自然也不会显示 select 选择语言
   */
   isExecute: false, 
+  /*
+    是否在vue入口文件中 调用了 translateJsVueUseModel 插件 app.use(translateJsVueUseModel) 
+    有则是true，没有则是false
+  */
+  isUse: false,
+  /* 
+    用户自定义配置，将在 app.use(translateJsVueUseModel)  时触发这个方法的执行
+  */
+  config: function(app){}
 }
-//如果网页上有 translate.execute() 代码的触发，那么就设置 isExecute 为 true
+
+//如果 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;
@@ -25,16 +28,22 @@ translate.lifecycle.execute.trigger.push(function(data){
       return false;  
   }
 });
-translate.time.log('设置vue3初始化配置 - translate.vue3');
 
 //将 translate 参数挂载到 window 上，方便在全局调用
 if(typeof(window.translate) === 'undefined'){
   window.translate = translate;
 }
-translate.time.log('将 translate 参数挂载到 window 上，方便在全局调用');
+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) {
@@ -53,22 +62,13 @@ const translateJsVueUseModel = {
           
           */
 
-
           if(translate.vue3.isExecute){
             translate.time.log('组件渲染完成，触发 translate.execute();');
 
             //对vue3的某些第三方组件进行容错处理
             translate.faultTolerance.documentCreateTextNode.use(); //对VUE的某些组件频繁渲染dom进行容错
             translate.time.log('对vue3的某些第三方组件进行容错处理 - translate.faultTolerance.documentCreateTextNode.use();');
-
-            console.log(translate.getDocuments());
             translate.execute();
-            setTimeout(() => {
-              translate.execute();
-            }, 100);
-            setTimeout(() => {
-              translate.execute();
-            }, 2000);
           }else{
             translate.time.log('组件渲染完成，但未发现translate.execute();存在，不进行翻译');
           }