i18n-jsautotranslate 3.18.77 → 3.18.84

package/README.md

@@ -17,12 +17,10 @@
 </h4> 
 
 # 特性说明
-* **使用极其简单。** 直接加入几行 JavaScript 代码即可让其拥有上百种语言切换能力。
-* **不增加工作量。** 无需改造页面本身植入大量垃圾代码变得臃肿，也不需要配置各种语种的语言文件，因为它会直接扫描你的DOM自动识别并翻译显示，它不需要你到某某网站登录去申请什么key，它是开源开放的，拿来就能用。
-* **极其灵活扩展。** 您可指定它[只翻译某些指定区域的元素](http://translate.zvo.cn/4063.html)、[自定义切换语言方式及美化](http://translate.zvo.cn/4056.html)、[某些id、class、tag不被翻译](https://translate.zvo.cn/4061.html)、[自定义翻译术语](https://translate.zvo.cn/4070.html) ...... 只要你想的，它都能做到。做不到的，你找我我来让它做到！
-* **自动切换语种。** [自动根据用户的语言喜好及所在的国家切换到这个语种进行浏览](http://translate.zvo.cn/4065.html)
-* **极速翻译能力。** [内置三层缓存、预加载机制，毫秒级瞬间翻译的能力。它并不是你理解的大模型蜗牛似的逐个字往外出的那样](http://translate.zvo.cn/4026.html)
-* **永久开源免费。** 采用MIT开源协议，您可永久免费使用。[另外你可以用它来做某些系统的三方插件直接售卖盈利](http://translate.zvo.cn/4036.html)
+* **使用极其简单。** 直接加入几行 JavaScript 代码即可让其拥有上百种语言切换能力，不增加工作量，无需改造页面本身植入大量垃圾代码变得臃肿，也不需要配置各种语种的语言文件，因为它会直接扫描你的DOM自动识别并翻译显示，它不需要你到某某网站登录去申请什么key，它是开源开放的，拿来就能用。
+* **极其灵活扩展。** 您可指定它[只翻译某些指定区域的元素](http://translate.zvo.cn/4063.html)、[自定义切换语言方式及美化](http://translate.zvo.cn/4056.html)、[某些id、class、tag不被翻译](https://translate.zvo.cn/4061.html)、[自定义翻译术语](https://translate.zvo.cn/4070.html)、[自动根据用户的语言喜好及所在的国家切换到这个语种进行浏览](http://translate.zvo.cn/4065.html)、 ...... 只要你想的，它都能做到。做不到的，你找我我来让它做到！
+* **极速翻译能力。** [采用多线程加速，内置三层缓存、预加载机制、文本预处理清洗等，提供毫秒级瞬间翻译的能力。](http://translate.zvo.cn/4026.html)
+* **永久开源免费。** 采用MIT开源协议，您可永久免费使用。[另外你可以用它来做某些系统的三方插件、浏览器插件...等等，进行售卖盈利](http://translate.zvo.cn/4036.html)
 * **搜索引擎友好。** 完全不影响你本身网站搜索引擎的收录。爬虫所爬取的网页源代码，它不会对其进行任何改动，你可完全放心。
 * **支持私有部署。** [在某些政府机关及大集团内部项目中，对数据隐私及安全保密有强要求场景、或者完全不通外网的场景，可以自行私有部署翻译API服务](http://translate.zvo.cn/391129.html) 
 * **全球网络节点。** 美洲、亚洲、欧洲 ... 都有网络节点，它能自动适配最快节点，每间隔1分钟自动获取一次延迟最小的节点进行接入使用，使全球范围使用都可高效稳定。

package/index.js

@@ -14,7 +14,7 @@ var translate = {
 	 * 格式：major.minor.patch.date
 	 */
 	// AUTO_VERSION_START
-	version: '3.18.77.20251020',
+	version: '3.18.84.20251024',
 	// AUTO_VERSION_END
 	/*
 		当前使用的版本，默认使用v2. 可使用 setUseVersion2(); 
@@ -234,14 +234,14 @@ var translate = {
 			//从服务器加载支持的语言库
 			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){
-						translate.log('load language list error : '+data.info);
+				translate.request.post(translate.request.api.language, {}, function(responseData, requestData){
+					if(responseData.result == 0){
+						translate.log('load language list error : '+responseData.info);
 						return;
 					}
 					//console.log(data.list);
-					translate.request.api.language = data.list; //进行缓存，下一次切换语言渲染的时候直接从缓存取，就不用在通过网络加载了
-					translate.selectLanguageTag.customUI(translate.selectLanguageTag.customLanguagesHandle(data.list));
+					translate.request.api.language = responseData.list; //进行缓存，下一次切换语言渲染的时候直接从缓存取，就不用在通过网络加载了
+					translate.selectLanguageTag.customUI(translate.selectLanguageTag.customLanguagesHandle(responseData.list));
 				}, null);
 			}else if(typeof(translate.request.api.language) == 'object'){
 				//无网络环境下，自定义显示语种
@@ -1478,6 +1478,7 @@ var translate = {
 						}else{
 							//判断是否是 translate.element.tagAttribute 自定义翻译属性的
 							var divTagAttribute = translate.element.tagAttribute[mutation.target.nodeName.toLowerCase()];
+							//console.log('divTagAttribute:'+divTagAttribute);
 							if(typeof(divTagAttribute) !== 'undefined' && divTagAttribute.attribute.indexOf(mutation.attributeName) > -1 && divTagAttribute.condition(mutation.target)){
 								//是自定义翻译这个属性的，以及判定是否达到翻译条件
 								//条件满足，允许翻译
@@ -1651,12 +1652,15 @@ var translate = {
 		constructor(){
 			/*
 			 * 任务列表
-			 * 一维数组 [hash] = tasks;  tasks 是多个task的数组集合
-			 * 二维数组 [task,task,...]，存放多个 task，每个task是一个替换。这里的数组是同一个nodeValue的多个task替换
-			 * 三维数组 task['originalText'] 、 task['resultText'] 存放要替换的字符串
-			 		   task['attribute'] 存放要替换的属性，比如 a标签的title属性。 如果是直接替换node.nodeValue ，那这个没有
+			 * map
+			 * key: node
+			 * value: [task,task,...]  是多个task的数组集合，存放多个 task，每个task是一个替换。这里的数组是同一个nodeValue的多个task替换
+			 * 				每个 task:  
+			 					task['originalText'] 
+			 					task['resultText'] 存放要替换的字符串
+			 					task['attribute'] 存放要替换的属性，比如 a标签的title属性。 如果是直接替换node.nodeValue ，那这个没有
 			 */
-			this.taskQueue = [];
+			this.taskQueue = new Map();
 			
 			/*
 			 * 要进行翻译的node元素，
@@ -1674,13 +1678,14 @@ var translate = {
 		 * attribute: 要替换的是哪个属性，比如 a标签的title属性，这里便是传入title。如果不是替换属性，这里不用传入，或者传入null
 		 */
 		add(node, originalText, resultText, attribute){
+			//console.log('renderTask.add : originalText:'+originalText+', resultText:'+resultText+', attribute:'+attribute+', node:');
+			//console.log(node);
 			var nodeAnaly = translate.element.nodeAnalyse.get(node, attribute); //node解析
 			//var hash = translate.util.hash(translate.element.getTextByNode(node)); 	//node中内容的hash
 			var hash = translate.util.hash(nodeAnaly['text']);
 			//console.log('--------------'+hash);
 			//console.log(nodeAnaly);
-			//console.log(node);
-			//console.log('originalText:'+originalText+', resultText:'+resultText+', attribute:'+attribute);
+
 			/****** 加入翻译的元素队列  */
 			if(typeof(this.nodes[hash]) == 'undefined'){
 				this.nodes[hash] = new Array();
@@ -1689,7 +1694,8 @@ var translate = {
 			//console.log(node)
 			
 			/****** 加入翻译的任务队列  */
-			var tasks = this.taskQueue[hash];
+			//var tasks = this.taskQueue[hash];
+			var tasks = this.taskQueue.get(node);
 			if(tasks == null || typeof(tasks) == 'undefined'){
 				//console.log(node.nodeValue);
 				tasks = new Array(); //任务列表，存放多个 task，每个task是一个替换。这里的数组是同一个nodeValue的多个task替换
@@ -1720,18 +1726,19 @@ var translate = {
 
 			//console.log(task);
 			tasks.push(task);
-			this.taskQueue[hash] = tasks;
+			//this.taskQueue[hash] = tasks;
+			this.taskQueue.set(node, tasks);
 			/****** 加入翻译的任务队列 end  */
 		}
 		//进行替换渲染任务，对页面进行渲染替换翻译
 		execute(){
 			//先对tasks任务队列的替换词进行排序，将同一个node的替换词有大到小排列，避免先替换了小的，大的替换时找不到
-			for(var hash in this.taskQueue){
-				if (!this.taskQueue.hasOwnProperty(hash)) {
+			//for(var hash in this.taskQueue){
+			for (let node of this.taskQueue.keys()) {
+				var tasks = this.taskQueue.get(node);
+				if (tasks == null) {
 		    		continue;
 		    	}
-
-				var tasks = this.taskQueue[hash];
 				if(typeof(tasks) == 'function'){
 					//进行异常的预处理调出
 					continue;
@@ -1740,7 +1747,8 @@ var translate = {
 				//进行排序,将原字符串长的放前面，避免造成有部分不翻译的情况（bug是先翻译了短的，导致长的被打断而无法进行适配）
 				tasks.sort((a, b) => b.originalText.length - a.originalText.length);
 				
-				this.taskQueue[hash] = tasks;
+				//this.taskQueue[hash] = tasks;
+				this.taskQueue.set(node, tasks);
 			}
 			
 			//console.log('===========task=========');
@@ -1757,10 +1765,21 @@ var translate = {
 		    		continue;
 		    	}
 		    	
-				var tasks = this.taskQueue[hash]; //取出当前node元素对应的替换任务
+				//var tasks = this.taskQueue[hash]; //取出当前node元素对应的替换任务
 				//var tagName = this.nodes[hash][0].nodeName; //以下节点的tag name
 				//console.log(tasks);
 				for(var node_index = 0; node_index < this.nodes[hash].length; node_index++){
+					//当前翻译的node
+					var node = this.nodes[hash][node_index];
+
+					//取出当前node元素对应的替换任务
+					var tasks = this.taskQueue.get(node);
+					//console.log(tasks);
+					if (tasks == null) {
+						translate.log('WARNING : renderTask.execute 中，this.taskQueue.get(node) == null ，理论上要进行替换任务，就应该会有内容的，数据在理论上出现异常');
+			    		continue;
+			    	}
+
 					//对这个node元素进行替换翻译字符
 					for(var task_index=0; task_index<tasks.length; task_index++){
 						var task = tasks[task_index];
@@ -1795,13 +1814,22 @@ var translate = {
 
 						// translate.node 记录
 						
-						var translateNode; //当前操作的，要记录入 translate.node 中的，进行翻译的node
+						var translateNode = null; //当前操作的，要记录入 translate.node 中的，进行翻译的node
 						var translateNode_attribute = ''; //当前操作的是node中的哪个attribute，如果没有是node本身则是空字符串
 						if(typeof(task['attribute']) === 'string' && task['attribute'].length > 0){
 							//当前渲染任务是针对的元素的某个属性，这是要取出这个元素的具体属性，作为一个目的 node 来进行加入 translate.node 
-							//是操作的元素的某个属性
-							translateNode = this.nodes[hash][node_index].getAttributeNode(task['attribute']);
-							translateNode_attribute = task['attribute'];
+							//是操作的元素的某个属性,这时要判断 是否是 input、textarea 的value属性
+							if(task['attribute'] === 'value'){
+								var nodeNameLowerCase = translate.element.getNodeName(this.nodes[hash][node_index]).toLowerCase();
+								if((nodeNameLowerCase === 'input' || nodeNameLowerCase === 'textarea')){
+									translateNode = this.nodes[hash][node_index];
+									translateNode_attribute = 'value';
+								}
+							}
+							if(translateNode === null){
+								translateNode = this.nodes[hash][node_index].getAttributeNode(task['attribute']);
+								translateNode_attribute = task['attribute'];
+							}
 						}else{
 							//操作的就是node本身
 							translateNode = this.nodes[hash][node_index];
@@ -1817,8 +1845,9 @@ var translate = {
 						}
 
 						//渲染页面进行翻译显示
-						//console.log(task.originalText+' ('+task['attribute']+') --> ' + task.resultText);
-						var analyseSet = translate.element.nodeAnalyse.set(this.nodes[hash][task_index], task.originalText, task.resultText, task['attribute']);
+						//console.log(task.originalText+' ('+task['attribute']+') --> ' + task.resultText+', node:');
+						//console.log(node);
+						var analyseSet = translate.element.nodeAnalyse.set(node, task.originalText, task.resultText, task['attribute']);
 						//console.log(analyseSet);
 
 						if(translate.node.data.get(translateNode) != null){
@@ -3127,38 +3156,38 @@ var translate = {
 				//text:JSON.stringify(translateTextArray[lang])
 				text:encodeURIComponent(JSON.stringify(translateTextArray[lang]))
 			};
-			translate.request.post(url, data, function(data){
+			translate.request.post(url, data, function(responseData, requestData){
 				//console.log(data); 
 				//console.log(translateTextArray[data.from]);
 
 				//针对 giteeai 增加了账户余额、账户是否激活的拍的判定，所以增加了 401 这个参数，凡是账户异常的，参数值是 401~499 之间。所以只要不是1都是失败
-				if(data.result != 1){
-					if(typeof(translate.translateRequest[uuid]) == 'object' && typeof(translate.translateRequest[uuid][data.from]) == 'object'){
-						translate.translateRequest[uuid][data.from]['result'] = 2;
-						translate.translateRequest[uuid][data.from].executeFinish = 1; //1是执行完毕
-						translate.translateRequest[uuid][data.from].stoptime = Math.floor(Date.now() / 1000);
+				if(responseData.result != 1){
+					if(typeof(translate.translateRequest[uuid]) == 'object' && typeof(translate.translateRequest[uuid][requestData.from]) == 'object'){
+						translate.translateRequest[uuid][requestData.from]['result'] = 2;
+						translate.translateRequest[uuid][requestData.from].executeFinish = 1; //1是执行完毕
+						translate.translateRequest[uuid][requestData.from].stoptime = Math.floor(Date.now() / 1000);
 					}else{
-						translate.log('WARINNG!!! translate.translateRequest[uuid][data.from] is not object');
+						translate.log('WARINNG!!! translate.translateRequest[uuid][requestData.from] is not object');
 					}
 
 					//为了兼容 v3.14以前的translate.service 版本，做了判断
 					var from = '';
-					if(typeof(data.from) != 'undefined' && data.from != null){
-						from = data.from;
+					if(typeof(requestData.from) != 'undefined' && requestData.from != null){
+						from = requestData.from;
 					}
 					var to = '';
-					if(typeof(data.to) != 'undefined' && data.to != null){
-						to = data.to;
+					if(typeof(requestData.to) != 'undefined' && requestData.to != null){
+						to = requestData.to;
 					}else{
 						to = translate.to;
 					}
-					translate.waitingExecute.isAllExecuteFinish(uuid, from, to, 0, data.info);
+					translate.waitingExecute.isAllExecuteFinish(uuid, from, to, 0, responseData.info);
 					
 
 					translate.log('=======ERROR START=======');
-					translate.log(translateTextArray[data.from]);
+					translate.log(translateTextArray[requestData.from]);
 					//console.log(encodeURIComponent(JSON.stringify(translateTextArray[data.from])));
-					translate.log('response : '+data.info);
+					translate.log('response : '+responseData.info);
 					translate.log('=======ERROR END  =======');
 					//translate.temp_executeFinishNumber++; //记录执行完的次数
 					return;
@@ -3175,11 +3204,11 @@ var translate = {
 				//console.log('response:'+uuid);
 				let task = new translate.renderTask();
 				//遍历 translateHashArray
-				for(var i=0; i<translateHashArray[data.from].length; i++){
+				for(var i=0; i<translateHashArray[responseData.from].length; i++){
 					//翻译前的语种，如 english
-					var lang = data.from;	
+					var lang = responseData.from;	
 					//翻译后的内容
-					var text = data.text[i];	
+					var text = responseData.text[i];	
 					//如果text为null，那么这个可能是一次翻译字数太多，为了保持数组长度，拼上的null
 					if(text == null){
 						continue;
@@ -3187,14 +3216,14 @@ var translate = {
 
 					// v3.0.3 添加，避免像是 JavaScript 被错误翻译为 “JavaScript的” ，然后出现了多个句子中都出现了Javascript时，会出现翻译后文本重复的问题
 					// 这里就是验证一下，翻译后的文本，是否会完全包含翻以前的文本，如果包含了，那么强制将翻译后的文本赋予翻译前的原始文本（也就是不被翻译）
-					if(text.toLowerCase().indexOf(translateTextArray[data.from][i].toLowerCase()) > -1){
+					if(text.toLowerCase().indexOf(translateTextArray[responseData.from][i].toLowerCase()) > -1){
 						//发现了，那么强制赋予翻以前内容
-						text = translateTextArray[data.from][i];
+						text = translateTextArray[responseData.from][i];
 					}
 
 
 					//翻译前的hash对应下标
-					var hash = translateHashArray[data.from][i];	
+					var hash = translateHashArray[responseData.from][i];	
 					var cacheHash = translate.nodeQueue[uuid]['list'][lang][hash]['cacheHash'];
 
 
@@ -3224,10 +3253,10 @@ var translate = {
 					*/
 					
 					//将翻译结果以 key：hash  value翻译结果的形式缓存
-					translate.storage.set('hash_'+data.to+'_'+cacheHash,text);
+					translate.storage.set('hash_'+responseData.to+'_'+cacheHash,text);
 					//如果离线翻译启用了全部提取，那么还要存入离线翻译指定存储
 					if(translate.offline.fullExtract.isUse){
-						translate.offline.fullExtract.set(hash, originalWord, data.to, text);
+						translate.offline.fullExtract.set(hash, originalWord, responseData.to, text);
 					}
 				}
 				task.execute(); //执行渲染任务
@@ -3237,7 +3266,7 @@ var translate = {
 				translate.translateRequest[uuid][lang].executeFinish = 1; //1是执行完毕
 				translate.translateRequest[uuid][lang].stoptime = Math.floor(Date.now() / 1000);
 				setTimeout(function(){
-					translate.waitingExecute.isAllExecuteFinish(uuid, data.from, data.to, 1, '');
+					translate.waitingExecute.isAllExecuteFinish(uuid, responseData.from, responseData.to, 1, '');
 				},5);
 			}, function(xhr){
 				translate.translateRequest[uuid][xhr.data.from].executeFinish = 1; //1是执行完毕
@@ -3307,6 +3336,7 @@ var translate = {
 			这是一个map，为了兼容es5，这里设置为null，在 translate.execute 中在进行初始化
 
 			key: node ,进行翻译的文本的node， 如果是 div 的 title属性进行的翻译，那这个node是定位在 title 上的node，而不是 div 这个依附的元素
+					注意，如果是对 input、textarea 的value进行翻译，而 value是通过js赋予的，那么这个value属性的值并不是一个单独的node，所以是为空的，此时要记录的node便是  input、textarea 这个node本身。
 			value: 这是一个对像
 				其中，key的取值有这几种：
 				translate_default_value: 如果当前翻译的是元素本身的值或node节点本身的值(nodeValue)，那么这里的key就是固定的 translate_default_value
@@ -3628,6 +3658,7 @@ var translate = {
 
 				参数：
 					node 当前翻译的node元素
+						注意，如果是对 input、textarea 的value进行翻译，而 value是通过js赋予的，那么这个value属性的值并不是一个单独的node，所以是为空的，此时要记录的node便是  input、textarea 这个node本身。
 					originalText 翻译之前的内容文本
 					resultText 翻译之后的内容文本
 					attribute 存放要替换的属性，比如 a标签的title属性。 如果是直接替换node.nodeValue ，那这个没有
@@ -3649,6 +3680,7 @@ var translate = {
 					返回结果是一个数组。其中：
 						['text']:要进行翻译的text内容文本
 						['node']:要进行翻译的目标node
+									注意，如果是对 input、textarea 的value进行翻译，而 value是通过js赋予的，那么这个value属性的值并不是一个单独的node，所以是为空的，此时要记录的node便是  input、textarea 这个node本身。
 				2. 传入 node、originalText、 resultText
 					则是进行翻译之后的渲染显示
 
@@ -3657,7 +3689,8 @@ var translate = {
 				返回结果是一个数组，其中：
 					resultText: 翻译完成之后的text内容文本。 当使用 translate.element.nodeAnalyse.set 时才会有这个参数返回。 注意，如果返回的是空字符串，那么则是翻译结果进行替换时，并没有成功替换，应该是翻译的过程中，这个node的值被其他js又赋予其他内容了。
 					text : 要进行翻译的text内容文本，当使用 translate.element.nodeAnalyse.get 时才会有这个参数的返回
-					node: 进行翻译的目标node
+					node: 要进行翻译的目标node
+							注意，如果是对 input、textarea 的value进行翻译，而 value是通过js赋予的，那么这个value属性的值并不是一个单独的node，所以是为空的，此时要记录的node便是  input、textarea 这个node本身。
 			*/
 			analyse:function(node, originalText, resultText, attribute){
 				var result = new Array(); //返回的结果
@@ -3665,13 +3698,15 @@ var translate = {
 				result['text'] = '';
 
 				var nodename = translate.element.getNodeName(node);
-
+				//console.log('nodeAnalyse.analyse: NodeName:'+nodename+', originalText:'+originalText+', resultText:'+resultText+', attribute:'+attribute+', node:');
+				//console.log(node)
+				
 				if(attribute != null && typeof(attribute) == 'string' && attribute.length > 0){
 					//这个node有属性，替换的是node的属性，而不是nodeValue
 
 					var nodeAttributeValue; //这个 attribute 属性的值
-					if(nodename == 'INPUT' && attribute.toLowerCase() == 'value'){
-						//如果是input 的value属性，那么要直接获取，而非通过 attribute ，不然用户自己输入的通过 attribute 是获取不到的 -- catl 赵阳 提出
+					if((nodename === 'INPUT' || nodename === 'TEXTAREA') && attribute.toLowerCase() == 'value'){
+						//如果是input\textarea 的value属性，那么要直接获取，而非通过 attribute ，不然用户自己输入的通过 attribute 是获取不到的 -- catl 赵阳 提出
 						
 						nodeAttributeValue = node.value;
 					}else{
@@ -3687,7 +3722,7 @@ var translate = {
 							var resultShowText = translate.util.textReplace(nodeAttributeValue, originalText, resultText, translate.to);
 							translate.element.nodeAnalyse.analyseReplaceBefore_DateToTranslateNode(node, attribute, resultShowText);
 
-							if(nodename == 'INPUT' && attribute.toLowerCase() == 'value'){
+							if((nodename === 'INPUT' || nodename === 'TEXTAREA') && attribute.toLowerCase() == 'value'){
 								//input 的value 对于用户输入的必须用 .value 操作
 								node.value = resultShowText;
 							}else{
@@ -3720,6 +3755,8 @@ var translate = {
 					return result;
 				}
 
+				
+
 				//正常的node ，typeof 都是 object
 
 				/* 这里是通用方法，不应该有限制
@@ -3895,13 +3932,25 @@ var translate = {
 				resultShowText: translate.element.nodeAnalyse.analyse 进行设置翻译后的文本渲染时，提前计算好这个node显示的所有文本，然后在赋予 dom，这里是计算好的node要整体显示的文本
 			*/	
 			analyseReplaceBefore_DateToTranslateNode:function(node, attribute, resultShowText){
-				var translateNode; //当前操作的，要记录入 translate.node 中的，进行翻译的node
+				//console.log('analyseReplaceBefore_DateToTranslateNode: attribute:'+attribute+', resultShowText:'+resultShowText+', node:');
+				//console.log(node);
+
+				var translateNode = null; //当前操作的，要记录入 translate.node 中的，进行翻译的node
 				var translateNode_attribute = ''; //当前操作的是node中的哪个attribute，如果没有是node本身则是空字符串
 
 				if(typeof(attribute) === 'string' && attribute.length > 0){
-					//是操作的元素的某个属性
-					translateNode = node.getAttributeNode(attribute);
-					translateNode_attribute = attribute;
+					//是操作的元素的某个属性,这时要判断 是否是 input、textarea 的value属性
+					if(attribute !== null && attribute === 'value'){
+						var nodeNameLowerCase = translate.element.getNodeName(node).toLowerCase();
+						if((nodeNameLowerCase === 'input' || nodeNameLowerCase === 'textarea')){
+							translateNode = node;
+							translateNode_attribute = 'value';
+						}
+					}
+					if(translateNode === null){
+						translateNode = node.getAttributeNode(attribute);
+						translateNode_attribute = attribute;
+					}
 				}else{
 					//操作的就是node本身
 					translateNode = node;
@@ -3941,7 +3990,10 @@ var translate = {
 				}
 			}
 		},
-		//向下遍历node
+		/*
+			向下遍历node
+			其中如果使用了自定义 textarea 、input 的 value 属性，则认为是 node 本身进行挂钩，而非其 value 值（value值并不是个node）
+		*/
 		whileNodes:function(uuid, node){
 			if(node == null || typeof(node) == 'undefined'){
 				return;
@@ -3977,6 +4029,7 @@ var translate = {
 			if(typeof(translate.element.tagAttribute[nodeNameLowerCase]) != 'undefined'){
 				//console.log('find:'+nodeNameLowerCase);
 				//console.log(translate.element.tagAttribute[nodeNameLowerCase]);
+				//console.log(translate.element.tagAttribute[nodeNameLowerCase].attribute);
 
 				for(var attributeName_index in translate.element.tagAttribute[nodeNameLowerCase].attribute){
 					if (!translate.element.tagAttribute[nodeNameLowerCase].attribute.hasOwnProperty(attributeName_index)) {
@@ -3990,11 +4043,13 @@ var translate = {
 					//console.log(attributeName);
 					//console.log(node.getAttribute(attributeName));
 
-
-					if(nodeNameLowerCase == 'input' && attributeName.toLowerCase() == 'value'){
+					//是否是 input、 textarea 的 value ，如果是 则是 true
+					var isInputValue = false;
+					if((nodeNameLowerCase === 'input' || nodeNameLowerCase === 'textarea') && attributeName.toLowerCase() == 'value'){
 						//如果是input 的value属性，那么要直接获取，而非通过 attribute ，不然用户自己输入的通过 attribute 是获取不到的 - catl 赵阳 提出
 						attributeValue = node.value;
 						DOMPropOrHTMLAttr = 'DOMProperty';
+						isInputValue = true;
 					}else{
 						/*
 						 * 默认是 HtmlAtrribute 也就是 HTML特性。取值有两个:
@@ -4019,10 +4074,10 @@ var translate = {
 					//	//这个tag标签没有这个 attribute，忽略
 					//	continue
 					//}
-					//判断当前元素是否在ignore忽略的tag、id、class name中   v3.15.7 增加					
+					//判断当前元素是否在ignore忽略的tag、id、class name中   v3.15.7 增加	
 					if(!translate.ignore.isIgnore(node)){
 						//加入翻译
-						translate.addNodeToQueue(uuid, node.getAttributeNode(attributeName), attributeValue, '');
+						translate.addNodeToQueue(uuid, isInputValue? node:node.getAttributeNode(attributeName), attributeValue, isInputValue? 'value':'');
 					}
 				}
 			}
@@ -4226,9 +4281,12 @@ var translate = {
 	 * text 当前要翻译的目标文本
 	 * attribute 是否是元素的某个属性。比如 a标签中的title属性， a.title 再以node参数传入时是string类型的，本身并不是node类型，所以就要传入这个 attribute=title 来代表这是a标签的title属性。同样第二个参数node传入的也不能是a.title，而是传入a这个node元素
 	 			如果不穿或者传入 '' 空字符串，则代表不是 attribute 属性，而是nodeValue 本身
+	 			注意， textarea、input 标签的 value 属性的特殊性，如果 node 是textarea、input ，那么value时这个 attribute 要传递 'value' 进来的
 	 */
 	addNodeToQueue:function(uuid, node, text, attribute){
-		//console.log(text)
+		//console.log('addNodeToQueue - params: uuid:'+uuid+', text:'+text+', attribute:'+attribute+', node:');
+		//console.log(node);
+		
 		if(node == null || text == null || text.length == 0){
 			return;
 		}
@@ -4236,10 +4294,10 @@ var translate = {
 
 		//console.log('find tag ignore : '+node.nodeValue+', '+node.nodeName+", "+node.nodeType+", "+node.tagName);
 		//console.log('addNodeToQueue into -- node:'+node+', text:'+text+', attribute:'+attribute);
-		var nodename = translate.element.getNodeName(node);
+		var nodename = translate.element.getNodeName(node).toLowerCase();
 		
 		//判断如果是被 <!--  --> 注释的区域，不进行翻译
-		if(nodename.toLowerCase() == '#comment'){
+		if(nodename == '#comment'){
 			return;
 		}
 		//console.log('\t\t'+text);
@@ -4281,9 +4339,14 @@ var translate = {
 		var translateNode; //当前操作的，要记录入 translate.node 中的，进行翻译的node
 		var translateNode_attribute = ''; //当前操作的是node中的哪个attribute，如果没有是node本身则是空字符串
 		if(typeof(attribute) === 'string' && attribute.length > 0){
-			//是操作的元素的某个属性
-			translateNode = node.getAttributeNode(attribute);
-			translateNode_attribute = attribute;
+			//是操作的元素的某个属性,这时要判断 是否是 input、textarea 的value属性
+			if((nodename === 'input' || nodename === 'textarea') && attribute !== null && attribute === 'value'){
+				translateNode = node;
+				translateNode_attribute = 'value';
+			}else{
+				translateNode = node.getAttributeNode(attribute);
+				translateNode_attribute = attribute;
+			}
 		}else{
 			//操作的就是node本身
 			translateNode = node;
@@ -4381,7 +4444,7 @@ var translate = {
 			//console.log(textArray);
 			textArray = translate.nomenclature.dispose(textArray, temporaryIgnoreTexts[ti], temporaryIgnoreTexts[ti], {
 				node:translateNode,
-				attribute:''
+				attribute:translateNode_attribute
 			}).texts;
 			//console.log(textArray);
 		}
@@ -4410,7 +4473,7 @@ var translate = {
 				//console.log(textArray);
 				var nomenclatureDispose = translate.nomenclature.dispose(textArray, nomenclatureKey, nomenclatureValue, {
 					node:translateNode,
-					attribute:''
+					attribute:translateNode_attribute
 				});
 				
 				textArray = nomenclatureDispose.texts;
@@ -6188,16 +6251,16 @@ var translate = {
 		}
 
 		//如果用户浏览器没读到默认语言，或者默认语言没有对应到translate.js支持的语种，那么在采用ip识别的方式
-		translate.request.post(translate.request.api.ip, {}, function(data){
-			//console.log(data); 
-			if(data.result == 0){
+		translate.request.post(translate.request.api.ip, {}, function(responseData, requestData){
+			//console.log(responseData); 
+			if(responseData.result != 1){
 				translate.log('==== ERROR 获取当前用户所在区域异常 ====');
 				translate.log(data.info);
 				translate.log('==== ERROR END ====');
 			}else{
-				translate.storage.set('to',data.language);	//设置目标翻译语言
-				translate.to = data.language; //设置目标语言
-				translate.selectLanguageTag
+				translate.storage.set('to',responseData.language);	//设置目标翻译语言
+				translate.to = responseData.language; //设置目标语言
+				//translate.selectLanguageTag
 				translate.execute(); //执行翻译
 			}
 		}, null);
@@ -7276,7 +7339,7 @@ var translate = {
 
 					if(serviceName.toLowerCase() == 'giteeai'){
 						//设定翻译接口为GiteeAI的
-						translate.request.api.host=['https://giteeai.zvo.cn/','https://deutsch.enterprise.api.translate.zvo.cn:1000/','https://api.translate.zvo.cn:1000/'];
+						translate.request.api.host=['https://giteeai.zvo.cn/','https://deutsch.enterprise.api.translate.zvo.cn:1000/','https://api.translate.zvo.cn:1000/', 'https://america.api.translate.zvo.cn:1000/'];
 						return;
 					}
 					if(serviceName.toLowerCase() == 'siliconflow'){
@@ -7869,7 +7932,11 @@ var translate = {
 		 * 			to: "chinese_traditional
 		 * 		}
 		 * 		
-		 * @param func 请求完成的回调，传入如 function(data){ console.log(data); }
+		 * @param func 请求完成的回调，也就是只要响应码是 200 ，则会触发这个方法。 传入如 function(responseData, requestData){ console.log(responseData); }
+		 * 				其中的参数：
+		 * 					responseData 响应的数据
+		 * 					requestData post请求所携带的数据
+		 * 				注意，是响应数据是第一个参数，请求数据是第二个参数。 以向前兼容
 		 * @param abnormalFunc 响应异常所执行的方法，响应码不是200就会执行这个方法 ,传入如 function(xhr){}  另外这里的 xhr 会额外有个参数  xhr.requestURL 返回当前请求失败的url
 		 */
 		post:function(path, data, func, abnormalFunc){
@@ -7913,7 +7980,10 @@ var translate = {
 		 * url 请求的url或者path（path，传入的是translate.request.api.translate 这种的，需要使用 getUrl 来组合真正请求的url ）
 		 * data 请求的数据，如 {"author":"管雷鸣",'site':'www.guanleiming.com'} 
 		 * appendXhrData 附加到 xhr.data 中的对象数据，传入比如  {"from":"english","to":"japanese"} ，他会直接赋予 xhr.data
-		 * func 请求完成的回调，传入如 function(data){}
+		 * func 请求完成的回调，也就是只要响应码是 200 ，则会触发这个方法。 传入如 function(requestData, responseData){ console.log(responseData); }
+		 * 				其中的参数：
+		 * 					requestData post请求所携带的数据
+		 * 					responseData 响应的数据
 		 * method 请求方式，可传入 post、get
 		 * isAsynchronize 是否是异步请求， 传入 true 是异步请求，传入false 是同步请求。 如果传入false，则本方法返回xhr
 		 * headers 设置请求的header，传入如 {'content-type':'application/x-www-form-urlencoded'};
@@ -8022,10 +8092,10 @@ var translate = {
 				        	}
 			        	}
 			        	
-			        	if(json == null){
+			        	if(json === null){
 			        		func(xhr.responseText);
 			        	}else{
-			        		func(json);
+			        		func(json, xhr.data);
 			        	}
 			        }else{
 			        	if(showErrorLog){
@@ -8178,34 +8248,34 @@ var translate = {
 				text:encodeURIComponent(JSON.stringify(apiTranslateText))
 			};
 			//console.log(apiTranslateText);
-			translate.request.post(url, data, function(resultData){
-				//console.log(resultData); 
+			translate.request.post(url, data, function(responseData, requestData){
+				//console.log(responseData); 
 				//console.log(data); 
-				if(resultData.result == 0){
+				if(responseData.result != 1){
 					translate.log('=======ERROR START=======');
-					translate.log('from : '+resultData.from);
-					translate.log('to : '+resultData.to);
+					translate.log('from : '+requestData.from);
+					translate.log('to : '+requestData.to);
 					translate.log('translate text array : '+texts);
-					translate.log('response : '+resultData.info);
+					translate.log('response error info: '+responseData.info);
 					translate.log('=======ERROR END  =======');
 					//return;
 				}
 
-				for(var i = 0; i < resultData.text.length; i++){
+				for(var i = 0; i < responseData.text.length; i++){
 					//将翻译结果以 key：hash  value翻译结果的形式缓存
 					var hash = translate.util.hash(apiTranslateText[i]);
-					translate.storage.set('hash_'+to+'_'+hash, resultData.text[i]);
+					translate.storage.set('hash_'+to+'_'+hash, responseData.text[i]);
 					//如果离线翻译启用了全部提取，那么还要存入离线翻译指定存储
 					if(translate.offline.fullExtract.isUse){
-						translate.offline.fullExtract.set(hash, apiTranslateText[i], data.to, resultData.text[i]);
+						translate.offline.fullExtract.set(hash, apiTranslateText[i], data.to, responseData.text[i]);
 					}
 
 					//进行组合数据到 translateResultArray
-					translateResultArray[apiTranslateArray[hash]] = resultData.text[i];
+					translateResultArray[apiTranslateArray[hash]] = responseData.text[i];
 				}
-				resultData.text = translateResultArray;			
+				responseData.text = translateResultArray;			
 
-				func(resultData);
+				func(responseData);
 			}, null);
 		},
 		listener:{
@@ -8734,7 +8804,20 @@ var translate = {
 				//translate.element.nodeAnalyse.analyse(key, analyse.text, translate.node.get(key).originalText, translate.node.get(key).attribute);
 				
 				//标注此次改动是有 translate.js 导致的 -- 这里就不用标记了，因为先已经移除了 translate.listener.observer 监听，所以不会再监听到还原的操作了
-				key.nodeValue = translate.node.get(key).originalText;
+				
+				//是否是 input、 textarea 的 value ，如果是 则是 true
+				var isInputValue = false;
+				if(typeof(translate.node.get(key).attribute) === 'string' && translate.node.get(key).attribute === 'value'){
+					//可能是input\textarea 的value
+					var nodename = translate.element.getNodeName(key).toLowerCase();
+					if(nodename === 'input' || nodename === 'textarea'){
+						key.value = translate.node.get(key).originalText;
+						isInputValue = true;
+					}
+				}	
+				if(!isInputValue){
+					key.nodeValue = translate.node.get(key).originalText;
+				}
 			//}
 		}
 
@@ -8806,10 +8889,13 @@ var translate = {
 				to:translate.to,
 				text:encodeURIComponent(JSON.stringify([translateText]))
 			};
-			translate.request.post(url, data, function(data) {
-				if (data.result == 0) return;
+			translate.request.post(url, data, function(responseData, requestData) {
+				if (responseData.result != 1){
+					translate.log('translate.selectionTranslate network response error : '+responseData.info);
+					return;
+				};
 				let curTooltipEle = document.querySelector('#translateTooltip')
-				curTooltipEle.innerText = data.text[0];
+				curTooltipEle.innerText = responseData.text[0];
 				curTooltipEle.style.top =selectionY+20+"px";
 				curTooltipEle.style.left = selectionX+50+"px" ;
 				curTooltipEle.style.display = "";
@@ -9014,6 +9100,8 @@ var translate = {
 				if(translate.progress.api.isTip){
 					//translate.listener.execute.renderStartByApi.push(function(uuid, from, to){
 					translate.lifecycle.execute.translateNetworkBefore.push(function(data){
+						//var startTime = new Date().getTime();
+
 						//取出当前变动的node，对应的元素
 						var elements = translate.element.nodeToElement(data.nodes);
 						//console.log(elements)
@@ -9032,10 +9120,15 @@ var translate = {
 						//console.log(sortRects);
 
 					    //去重
-					    sortRects = translate.visual.filterNodeRepeat(sortRects);
-					    //console.log(sortRects);
+					    var repeatRects = translate.visual.filterNodeRepeat(sortRects);
+					    //console.log(repeatRects);
 
-						var rectLineSplit = translate.visual.filterRectsByLineInterval(rectsOneArray, 2);
+					    //去除空间重叠
+					    var spaceEORects = translate.visual.rectsSpaceEliminateOverlap(repeatRects);
+					    //console.log(spaceEORects);
+					    //console.log('计算耗时：'+(new Date().getTime() - startTime));
+
+						var rectLineSplit = translate.visual.filterRectsByLineInterval(spaceEORects, 2);
 						for(var r = 0; r<rectLineSplit.length; r++){
 					    	if(typeof(rectLineSplit[r].node.className) === 'string' && rectLineSplit[r].node.className.indexOf('translate_api_in_progress') > -1){
 					    		//已经存在了，就不继续加了
@@ -9043,6 +9136,7 @@ var translate = {
 					    		rectLineSplit[r].node.className = rectLineSplit[r].node.className+' translate_api_in_progress';	
 					    	}
 						}
+						//console.log('计算+渲染耗时：'+(new Date().getTime() - startTime));
 					});
 					
 					translate.lifecycle.execute.translateNetworkAfter.push(function(data){
@@ -10035,6 +10129,50 @@ var translate = {
 		    
 		    return filtered;
 		},
+		/*
+			对排重并按照top排序后的 rect 坐标进行空间的重叠处理（按高度进行判定，避免一行出现两个）
+			它可以紧紧挨着，但不允许出现重叠情况
+
+			@param rects 一维的矩形信息数组（包含node和坐标信息），也就是 translate.visual.filterNodeRepeat(sortRects); 去重后取得的信息。
+						注意，它必须要经过这几步处理才行：
+							var sortRects = translate.visual.coordinateSort(rectsOneArray); //排序
+						    sortRects = translate.visual.filterNodeRepeat(sortRects); //去重
+			@return 返回排除重叠的坐标数组。
+
+		*/
+		rectsSpaceEliminateOverlap: function(rects){
+			for(var i = rects.length-1; i > -1; i--){
+				//是第一个，那么就不需要再向上判定了
+				if(i == 0){
+					continue;
+				}
+				
+				//如果上一个坐标的底部大于当前坐标的顶部，那么高度就已经产生重叠了，将排除当前元素，移除当前元素
+				if(rects[i-1].bottom > rects[i].top){
+					//console.log('---移除第'+i);
+					//console.log(rects[i]);
+					rects.splice(i, 1);
+				}
+			}
+
+			/*
+			//检查
+			for(var i = rects.length-1; i > -1; i--){
+				//是第一个，那么就不需要再向上判定了
+				if(i == 0){
+					continue;
+				}
+				
+				//如果上一个坐标的底部大于当前坐标的顶部，那么高度就已经产生重叠了，将排除当前元素，移除当前元素
+				if(rects[i-1].bottom > rects[i].top){
+					console.log('---发现漏掉的，第'+i);
+					console.log(rects[i]);
+				}
+			}
+			*/
+
+			return rects;
+		},
 		/*
 			对一组坐标进行排序
 			按开始坐标从左到右、从上到下排序
@@ -10053,13 +10191,15 @@ var translate = {
 		  return sortedRects;
 		},
 		/*
-			对一组坐标进行去重处理，同一个node，只会取从下标0开始往后的第一个
+			对一组坐标进行处理，过滤
+			1. 同一个node，只会取从下标0开始往后的第一个，对 node 进行排重
+			2. 对 rects 中的坐标进行计算大小，计算出当前的平均数（面积），然后移除小于平均数5倍的 rects 元素。 比如平均面积是 10， 则具体的rect面积小于 2 的则删掉
+
 			@param rects translate.visual.getRects 获取到的坐标数据，经过 translate.visual.rectsToOneArray(rects); 处理后得到的一维数组，可以直接传入，也可以进行 translate.visual.coordinateSort(rectsOneArray); 排序处理后传入
 		*/
 		filterNodeRepeat:function(rects){
 			var map = new Map(); //key是node，value随便
-			//console.log(rects);
-
+			
 			var deleteIndexArray = [];
 			for(var i = 0; i < rects.length; i++){
 				if(map.get(rects[i].node) != null){
@@ -10075,8 +10215,32 @@ var translate = {
 				//console.log(deleteIndexArray[di]);
 				rects.splice(deleteIndexArray[di], 1); // 从索引 deleteIndexArray[di] 开始，删除1个元素
 			}
-
 			map = undefined;
+
+
+			// 计算面积
+			var areaSizeArray = []; //其中下标跟 rects 一一对应，这里存的是面积大小
+			for(var i = 0; i < rects.length; i++){
+				areaSizeArray[i] = rects[i].height * rects[i].width;
+			}
+			// 1. 计算面积总和
+			const sum = areaSizeArray.reduce((acc, val) => acc + val, 0);
+			// 2. 计算平均值
+			const avg = sum / areaSizeArray.length;
+			// 3. 计算阈值（平均值的20%）
+			const threshold = avg * 0.2;
+			// 4. 收集需要删除的下标
+			const indicesToRemove = [];
+			for (let i = 0; i < areaSizeArray.length; i++) {
+			  if (areaSizeArray[i] < threshold) {
+			    indicesToRemove.push(i);
+			  }
+			}
+			//5. 移除面积极小的rects元素
+			for(var di = indicesToRemove.length-1; di > -1; di--){
+				rects.splice(indicesToRemove[di], 1);
+			}
+
 			return rects;
 		},
 		/**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "i18n-jsautotranslate",
-  "version": "3.18.77",
+  "version": "3.18.84",
   "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": {
@@ -15,7 +15,9 @@
   "files": [
     "index.js",
     "ArcoDesign/Vue3/LanguageSelect.vue",
-    "vue/**",
+    "vue/vue3/LanguageSelect.vue",
+    "vue/vue3/translateVue3TS.ts",
+    "vue/vue3/translate.ts",
     "naiveUI/LanguageSelect.vue"
   ],
   "homepage": "https://github.com/xnx3/translate#readme",

package/vue/vue3/README.md

@@ -1,18 +1,19 @@
 VUE3 中 使用 translate.js
 
-## [修改] package.json 文件 
+## 第一步：修改 package.json 文件 
 dependencies 中增加
 ````
-"i18n-jsautotranslate": "^3.18.76",
+"i18n-jsautotranslate": "^3.18.77",
 ````
+然后执行 ````npm install```` (或 ````yarn install```` 或 ````pnpm install```` 等等)
 
-## [新增] translate.js (或ts) 文件
+## 第二步：增加 translate.js (或ts) 文件
 比如，在你项目的 utils 目录（或其他什么目录都行）下，新增 translate.js (或.ts 只是后缀自己改一下就行) 文件。  
-此文件源码：  [Github](https://raw.githubusercontent.com/xnx3/translate/refs/heads/master/extend/vue/vue3/translate.ts) | [Gitee](https://gitee.com/mail_osc/translate/blob/master/extend/vue/vue3/translate.ts)  
+[此文件源码点此查看](./translate.ts)  
 这个文件也是你当前项目对翻译进行各种自定义微调所在。  
 有什么要设置的，比如设置使用你私有部署的翻译服务器提供翻译服务、设置哪些文字不进行翻译、设置自定义术语 ……等等
 
-## [修改] main.js (或ts) 文件
+## 第三步：修改 main.js (或ts) 文件
 首先导入 上一步新建的文件，也就是新增一行 import : 
 ````
 import {translateJsVueUseModel} from './utils/translate' // 多语言切换, 导入translate插件
@@ -33,17 +34,19 @@ app.use(translateJsVueUseModel);   //注释掉，即可停用多语言切换能
 app.mount('#app');
 ````
 
-## 页面上出现语言切换的Select下拉切换菜单
+## 第四步：在页面上出现Select下拉切换语言菜单
 
-文档参见： [Github文档](https://github.com/xnx3/translate/tree/master/extend/vue/vue3/LanguageSelect.md) | [Gitee文档](https://gitee.com/mail_osc/translate/tree/master/extend/vue/vue3/LanguageSelect.md)  
+文档参见： [./LanguageSelect.md](./LanguageSelect.md)
   
 
 另外，我们针对部分UI框架，进行了适配，你可以直接快速使用
-* ArcoDesign - [Github](https://github.com/xnx3/translate/tree/master/extend/ArcoDesign/Vue3) | [Gitee](https://gitee.com/mail_osc/translate/tree/master/extend/ArcoDesign/Vue3)
-* naiveUI - [Github](https://github.com/xnx3/translate/tree/master/extend/naiveUI) | [Gitee](https://gitee.com/mail_osc/translate/tree/master/extend/naiveUI)
+*  [ArcoDesign](../../ArcoDesign/Vue3/README.md)
+*  [naiveUI](../../naiveUI/README.md)
   
 如果你使用的别的UI框架，可以 [联系我](http://translate.zvo.cn/4030.html) 沟通，目前正在增加其他主流UI框架的，没准你要的就恰好有了，或者直接针对你当前使用的进行新适配。  
 
+## 第五步：DEMO参考示例
+参见： [demo/README.md](./demo/README.md)
 
 ## 注意
-比如你vue页面中有个按钮，点击后触发切换为某种语言，正常使用是 `translate.changeLanguage('english');`  而在vue代码中如果提示 `translate 不存在` ，那么你触发时前面额外加个windows.即可 ： `window.translate.changeLanguage('english');`
+比如你vue页面中有个按钮，点击后触发切换为某种语言，正常使用是 `translate.changeLanguage('english');`  而在vue代码中如果提示 `translate not find` ，那么你触发时前面额外加个windows.即可 ： `window.translate.changeLanguage('english');`

package/vue/vue3/translate.ts

@@ -1,4 +1,5 @@
-import {translateJsVueUseModel, translate} from './translateVue3TS' // 导入 translate 的 VUE3 的 ts 插件
+import {translateJsVueUseModel, translate} from 'i18n-jsautotranslate/vue/vue3/translateVue3TS.ts';  // 导入 translate 的 VUE3 的 ts 插件
+
 
 /*
     

package/vue/vue3/LanguageSelect.md

@@ -1,132 +0,0 @@
-# VUE3
-
-## 接入 vue3 方式使用 translate.js
-http://translate.zvo.cn/4041.html
-
-## 页面上出现语言切换的Select下拉切换菜单
-
-### 效果
-见下图右上角的多语言切换  
-![](./resource/preview.png)  
-这个多语言切换的 Select 很原始，你可以对它使用CSS进行美化、或自定义其html显示方式。具体可参考以下文档。  
-另外如果你用其他UI框架，也可以直接进行使用：  
-* ArcoDesign - [Github](https://github.com/xnx3/translate/tree/master/extend/ArcoDesign/Vue3) | [Gitee](https://gitee.com/mail_osc/translate/tree/master/extend/ArcoDesign/Vue3)
-* naiveUI - [Github](https://github.com/xnx3/translate/tree/master/extend/naiveUI) | [Gitee](https://gitee.com/mail_osc/translate/tree/master/extend/naiveUI)
-
-### 代码
-
-比如要在 index.vue 页面上显示切换语言的 select 下拉菜单，那么 index.vue 页面中，要进行的操作：  
-先在 index.vue 中，加入一行，导入此UI框架的多语言切换Select 
-````import LanguageSelect from 'i18n-jsautotranslate/vue/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/vue/vue3/LanguageSelect.vue';
-</script>
-
-<style scoped>
-.LanguageSelect {
-  position: fixed;
-  top: 20px;
-  right: 80px;
-}
-</style>
-````
-
-### 自定义切换语言的html代码
-修改
-````
-<LanguageSelect/>
-````
-为：
-````
-<script setup>
-//获取该用户之前是否有切换过语言，获取其最后一次切换的是什么语种，详细参考： http://translate.zvo.cn/4074.html
-const language = window.translate.language.getCurrent(); 
-</script>
-<LanguageSelect>
-  <!-- 使用作用域插槽，直接使用子组件传递过来的数据和方法 -->
-  <template #default="{ LanguageSelectLanguageList, LanguageSelectOnChange }">
-      <select
-        v-model="language"
-        @change="LanguageSelectOnChange"
-        class="ignore LanguageSelect"
-      >
-        <option value="" disabled>Please select language</option>
-        <option v-for="option in LanguageSelectLanguageList" :key="option.id" :value="option.id">
-          {{ option.name }}
-        </option>
-      </select>
-  </template>
-</LanguageSelect>
-````
-
-完整的示例代码如下：
-````
-<template>
-  <div class="login">
-    <h3 class="login-logo">
-      Logo
-    </h3>
-
-    <!-- 多语言切换的 Select 下拉选择 -->
-    <LanguageSelect>
-      <!-- 使用作用域插槽，直接使用子组件传递过来的数据和方法 -->
-      <template #default="{ LanguageSelectLanguageList, LanguageSelectOnChange }">
-          <select
-            v-model="language"
-            @change="LanguageSelectOnChange"
-            class="ignore LanguageSelect"
-          >
-            <option value="" disabled>Please select language</option>
-            <option v-for="option in LanguageSelectLanguageList" :key="option.id" :value="option.id">
-              {{ option.name }}
-            </option>
-          </select>
-      </template>
-    </LanguageSelect>
-  </div>
-</template>
-
-<script setup>
-import { computed, ref } from 'vue'
-import LanguageSelect from 'i18n-jsautotranslate/vue/vue3/LanguageSelect.vue';
-
-//获取该用户之前是否有切换过语言，获取其最后一次切换的是什么语种，详细参考： http://translate.zvo.cn/4074.html
-const language = window.translate.language.getCurrent(); 
-</script>
-
-<style scoped>
-.LanguageSelect {
-  position: fixed;
-  top: 20px;
-  right: 80px;
-}
-</style>
-````