i18n-jsautotranslate 3.18.72 → 3.18.74

package/ArcoDesign/Vue3/README.md

@@ -5,14 +5,14 @@ http://translate.zvo.cn/4041.html
 
 ## 页面上出现语言切换的Select下拉切换菜单
 
-#### 效果
+### 效果
 见下图右上角的多语言切换  
 ![](./resource/preview.png)
 
-#### 代码
+### 代码
 
 比如要在 index.vue 页面上显示切换语言的 select 下拉菜单，那么 index.vue 页面中，要进行的操作：  
-先在 index.vue 中，加入一行导入 ArcoDesign 的多语言切换Select 
+先在 index.vue 中，加入一行导入此UI框架的多语言切换Select 
 ````import LanguageSelect from 'i18n-jsautotranslate/ArcoDesign/Vue3/LanguageSelect.vue';````  
 然后在要显示select菜单的位置，直接加入  
 ````<LanguageSelect/>````  

package/index.js

@@ -14,7 +14,7 @@ var translate = {
 	 * 格式：major.minor.patch.date
 	 */
 	// AUTO_VERSION_START
-	version: '3.18.72.20251010',
+	version: '3.18.75.20251011',
 	// AUTO_VERSION_END
 	/*
 		当前使用的版本，默认使用v2. 可使用 setUseVersion2(); 
@@ -97,6 +97,61 @@ var translate = {
 
 			translate.selectLanguageTag.render();
 		},
+		/*
+			自定义语种 translate.selectLanguageTag.languages 的处理，进行按顺序筛选出来
+	
+			@param languageList 当前支持的所有语种列表，传入格式如：
+			[
+				{id: 'english', name: 'English', serviceId: 'en'}, 
+				{id: 'korean', name: '한국어', serviceId: 'ko'},
+				...
+			]
+
+			返回值是将当前翻译通道所支持的语种进行按顺序筛选完后的结果返回。
+			比如 
+			translate.selectLanguageTag.languages = 'english,chinese_simplified,korean';
+			那么这里返回的便是
+
+			[
+				{id: 'english', name: 'English', serviceId: 'en'}, 
+				{id: 'chinese_simplified', name: '简体中文', serviceId: 'zh-CHS'},
+				{id: 'korean', name: '한국어', serviceId: 'ko'}
+			]
+	
+			如果 translate.selectLanguageTag.languages 未设置，那么这里将返回当前支持的所有语种
+		*/
+		customLanguagesHandle:function(languageList){
+			if(translate.selectLanguageTag.languages.length > 0){
+				//设置了自定义显示的语言，需要重新根据自定义的语言进行过滤，同时顺序也要保持跟它一致
+
+				//都转小写判断
+				var divLanguages = translate.selectLanguageTag.languages.toLowerCase();
+				var divArray = divLanguages.split(',');
+				
+				//将支持的语种 languageList 转化为 map 形态
+				if(typeof(translate.selectLanguageTag.supportLanguageMap) == 'undefined'){
+					translate.selectLanguageTag.supportLanguageMap = new Map();
+					for(var si = 0; si<languageList.length; si++){
+						if(typeof(languageList[si]) != 'undefined' && typeof(languageList[si].id)){
+							translate.selectLanguageTag.supportLanguageMap.set(languageList[si].id, languageList[si]);
+						}
+					}
+					//console.log(translate.selectLanguageTag.supportLanguageMap)
+				}
+
+
+				//重新组合要显示的语种
+				var newLangs = [];
+				for(var i = 0; i<divArray.length; i++){
+					if(divArray[i].length > 0 && translate.selectLanguageTag.supportLanguageMap.get(divArray[i]) != null){
+						newLangs.push(translate.selectLanguageTag.supportLanguageMap.get(divArray[i]));
+					}
+				}
+				return newLangs;
+			}
+
+			return languageList;
+		},
 
 		/*
 			自定义切换语言的样式渲染 v3.2.4 增加
@@ -111,24 +166,13 @@ var translate = {
 			selectLanguage.id = translate.selectLanguageTag.documentId+'SelectLanguage';
 			selectLanguage.className = translate.selectLanguageTag.documentId+'SelectLanguage';
 			var to = translate.language.getCurrent();
+
+
 			for(var i = 0; i<languageList.length; i++){
 				var option = document.createElement("option"); 
 			    option.setAttribute("value",languageList[i].id);
 
-			    //判断 selectLanguageTag.languages 中允许使用哪些
-
-				if(translate.selectLanguageTag.languages.length > 0){
-					//设置了自定义显示的语言
-
-					//都转小写判断
-					var langs_indexof = (','+translate.selectLanguageTag.languages+',').toLowerCase();
-					//console.log(langs_indexof)
-					if(langs_indexof.indexOf(','+languageList[i].id.toLowerCase()+',') < 0){
-						//没发现，那不显示这个语种，调出
-						continue
-					}
-				}
-
+			    
 				/*判断默认要选中哪个语言*/
 
 			    if(to != null && typeof(to) != 'undefined' && to.length > 0){
@@ -197,11 +241,11 @@ var translate = {
 					}
 					//console.log(data.list);
 					translate.request.api.language = data.list; //进行缓存，下一次切换语言渲染的时候直接从缓存取，就不用在通过网络加载了
-					translate.selectLanguageTag.customUI(data.list);
+					translate.selectLanguageTag.customUI(translate.selectLanguageTag.customLanguagesHandle(data.list));
 				}, null);
 			}else if(typeof(translate.request.api.language) == 'object'){
 				//无网络环境下，自定义显示语种
-				translate.selectLanguageTag.customUI(translate.request.api.language);
+				translate.selectLanguageTag.customUI(translate.selectLanguageTag.customLanguagesHandle(translate.request.api.language));
 			}
 		}
 	},
@@ -7249,10 +7293,8 @@ var translate = {
 		//客户端方式的edge提供机器翻译服务
 		edge:{
 			api:{ //edge浏览器的翻译功能
-				auth:'https://edge.microsoft.com/translate/auth', //auth授权拉取
-				translate:'https://api.cognitive.microsofttranslator.com/translate?from={from}&to={to}&api-version=3.0&includeSentenceLength=true' //翻译接口
+				translate:'https://edge.microsoft.com/translate/translatetext?from={from}&to={to}&isEnterpriseClient=false' //翻译接口
 			},
-
 			language:{
 
 				json:[{"id":"ukrainian","name":"Україна","serviceId":"uk"},{"id":"norwegian","name":"Norge","serviceId":"no"},{"id":"welsh","name":"Iaith Weleg","serviceId":"cy"},{"id":"dutch","name":"nederlands","serviceId":"nl"},{"id":"japanese","name":"日本語","serviceId":"ja"},{"id":"filipino","name":"Pilipino","serviceId":"fil"},{"id":"english","name":"English","serviceId":"en"},{"id":"lao","name":"ກະຣຸນາ","serviceId":"lo"},{"id":"telugu","name":"తెలుగుName","serviceId":"te"},{"id":"romanian","name":"Română","serviceId":"ro"},{"id":"nepali","name":"नेपालीName","serviceId":"ne"},{"id":"french","name":"Français","serviceId":"fr"},{"id":"haitian_creole","name":"Kreyòl ayisyen","serviceId":"ht"},{"id":"czech","name":"český","serviceId":"cs"},{"id":"swedish","name":"Svenska","serviceId":"sv"},{"id":"russian","name":"Русский язык","serviceId":"ru"},{"id":"malagasy","name":"Malagasy","serviceId":"mg"},{"id":"burmese","name":"ဗာရမ်","serviceId":"my"},{"id":"pashto","name":"پښتوName","serviceId":"ps"},{"id":"thai","name":"คนไทย","serviceId":"th"},{"id":"armenian","name":"Արմենյան","serviceId":"hy"},{"id":"chinese_simplified","name":"简体中文","serviceId":"zh-CHS"},{"id":"persian","name":"Persian","serviceId":"fa"},{"id":"chinese_traditional","name":"繁體中文","serviceId":"zh-CHT"},{"id":"kurdish","name":"Kurdî","serviceId":"ku"},{"id":"turkish","name":"Türkçe","serviceId":"tr"},{"id":"hindi","name":"हिन्दी","serviceId":"hi"},{"id":"bulgarian","name":"български","serviceId":"bg"},{"id":"malay","name":"Malay","serviceId":"ms"},{"id":"swahili","name":"Kiswahili","serviceId":"sw"},{"id":"oriya","name":"ଓଡିଆ","serviceId":"or"},{"id":"icelandic","name":"ÍslandName","serviceId":"is"},{"id":"irish","name":"Íris","serviceId":"ga"},{"id":"khmer","name":"ភាសា​ខ្មែរName","serviceId":"km"},{"id":"gujarati","name":"ગુજરાતી","serviceId":"gu"},{"id":"slovak","name":"Slovenská","serviceId":"sk"},{"id":"kannada","name":"ಕನ್ನಡ್Name","serviceId":"kn"},{"id":"hebrew","name":"היברית","serviceId":"he"},{"id":"hungarian","name":"magyar","serviceId":"hu"},{"id":"marathi","name":"मराठीName","serviceId":"mr"},{"id":"tamil","name":"தாமில்","serviceId":"ta"},{"id":"estonian","name":"eesti keel","serviceId":"et"},{"id":"malayalam","name":"മലമാലം","serviceId":"ml"},{"id":"inuktitut","name":"ᐃᓄᒃᑎᑐᑦ","serviceId":"iu"},{"id":"arabic","name":"بالعربية","serviceId":"ar"},{"id":"deutsch","name":"Deutsch","serviceId":"de"},{"id":"slovene","name":"slovenščina","serviceId":"sl"},{"id":"bengali","name":"বেঙ্গালী","serviceId":"bn"},{"id":"urdu","name":"اوردو","serviceId":"ur"},{"id":"azerbaijani","name":"azerbaijani","serviceId":"az"},{"id":"portuguese","name":"português","serviceId":"pt"},{"id":"samoan","name":"lifiava","serviceId":"sm"},{"id":"afrikaans","name":"afrikaans","serviceId":"af"},{"id":"tongan","name":"汤加语","serviceId":"to"},{"id":"greek","name":"ελληνικά","serviceId":"el"},{"id":"indonesian","name":"IndonesiaName","serviceId":"id"},{"id":"spanish","name":"Español","serviceId":"es"},{"id":"danish","name":"dansk","serviceId":"da"},{"id":"amharic","name":"amharic","serviceId":"am"},{"id":"punjabi","name":"ਪੰਜਾਬੀName","serviceId":"pa"},{"id":"albanian","name":"albanian","serviceId":"sq"},{"id":"lithuanian","name":"Lietuva","serviceId":"lt"},{"id":"italian","name":"italiano","serviceId":"it"},{"id":"vietnamese","name":"Tiếng Việt","serviceId":"vi"},{"id":"korean","name":"한국어","serviceId":"ko"},{"id":"maltese","name":"Malti","serviceId":"mt"},{"id":"finnish","name":"suomi","serviceId":"fi"},{"id":"catalan","name":"català","serviceId":"ca"},{"id":"croatian","name":"hrvatski","serviceId":"hr"},{"id":"bosnian","name":"bosnian","serviceId":"bs-Latn"},{"id":"polish","name":"Polski","serviceId":"pl"},{"id":"latvian","name":"latviešu","serviceId":"lv"},{"id":"maori","name":"Maori","serviceId":"mi"}],
@@ -7282,105 +7324,102 @@ var translate = {
 			translate:function(path, data, func, abnormalFunc){
 				var textArray = JSON.parse(decodeURIComponent(data.text));
 				let translateTextArray = translate.util.split(textArray, 40000, 900);
+
+
+				var appendXhrData = {
+					"from":data.from+'',
+					"to":data.to,
+					"text":data.text
+				};
+				var from = data.from;
+				if(from != 'auto'){
+					if(from == 'romance'){
+						//这里额外加了一个罗曼语族(romance)会自动认为是法语(fr)
+						from = 'fr';
+					}else{
+						from = translate.service.edge.language.getMap()[data.from];
+					}
+				}
 				
-				translate.request.send(translate.service.edge.api.auth, {},{}, function(auth){
-					var appendXhrData = {
-						"from":data.from+'',
-						"to":data.to,
-						"text":data.text
-					};
-					var from = data.from;
-					if(from != 'auto'){
-						if(from == 'romance'){
-							//这里额外加了一个罗曼语族(romance)会自动认为是法语(fr)
-							from = 'fr';
-						}else{
-							from = translate.service.edge.language.getMap()[data.from];
-						}
+				var to = translate.service.edge.language.getMap()[data.to];
+				var transUrl = translate.service.edge.api.translate.replace('{from}',from).replace('{to}',to);
+
+				//如果翻译量大，要拆分成多次翻译请求
+				for(var tai = 0; tai<translateTextArray.length; tai++){
+					/*
+					var json = [];
+					for(var i = 0; i<translateTextArray[tai].length; i++){
+						json.push({"Text":translateTextArray[tai][i]});
 					}
-					
-					var to = translate.service.edge.language.getMap()[data.to];
-					var transUrl = translate.service.edge.api.translate.replace('{from}',from).replace('{to}',to);
-
-					//如果翻译量大，要拆分成多次翻译请求
-					for(var tai = 0; tai<translateTextArray.length; tai++){
-						var json = [];
-						for(var i = 0; i<translateTextArray[tai].length; i++){
-							json.push({"Text":translateTextArray[tai][i]});
-						}
+					*/
 
-						translate.request.send(transUrl, JSON.stringify(json), appendXhrData, function(result){
-							var d = {};
-							d.info = 'SUCCESS';
-							d.result = 1;
-							d.from = data.from;
-							d.to = data.to;
-							d.text = [];
-							for(var t = 0; t < result.length; t++){
-								d.text.push(result[t].translations[0].text);
-							}
-							
+					translate.request.send(transUrl, JSON.stringify(translateTextArray[tai]), appendXhrData, function(result){
+						var d = {};
+						d.info = 'SUCCESS';
+						d.result = 1;
+						d.from = data.from;
+						d.to = data.to;
+						d.text = [];
+						for(var t = 0; t < result.length; t++){
+							d.text.push(result[t].translations[0].text);
+						}
+						
 
-							//判断当前翻译是否又被拆分过，比如一次超过5万字符的话就要拆分成多次请求了
-							if(translateTextArray.length > 1){
-								//这一次翻译呗拆分了多次请求，那么要进行补全数组，使数组个数能一致
+						//判断当前翻译是否又被拆分过，比如一次超过5万字符的话就要拆分成多次请求了
+						if(translateTextArray.length > 1){
+							//这一次翻译呗拆分了多次请求，那么要进行补全数组，使数组个数能一致
 
-								/*
+							/*
 
-									注意这里根据数组的长度来判断当前属于第几个数组，
-									有几率会是拆分的数组，其中有两组的长度是一样的，
-									这样的话是有问题的，只不过几率很小，就先这样了
-									但终归还是留了个坑 -- 记录
+								注意这里根据数组的长度来判断当前属于第几个数组，
+								有几率会是拆分的数组，其中有两组的长度是一样的，
+								这样的话是有问题的，只不过几率很小，就先这样了
+								但终归还是留了个坑 -- 记录
 
-								*/
+							*/
 
-								var currentIndex = -1;	//当前翻译请求属于被拆分的第几个的数组下标，从0开始的
-								for(var cri = 0; cri < translateTextArray.length; cri++){
-									if(translateTextArray[cri].length - d.text.length == 0){
-										currentIndex = cri;
-										break;
-									}
+							var currentIndex = -1;	//当前翻译请求属于被拆分的第几个的数组下标，从0开始的
+							for(var cri = 0; cri < translateTextArray.length; cri++){
+								if(translateTextArray[cri].length - d.text.length == 0){
+									currentIndex = cri;
+									break;
 								}
+							}
 
-								//进行对前后进行补齐数组
-								if(currentIndex < 0){
-									translate.log('------ERROR--------');
-									translate.log('翻译内容过多，进行拆分，但拆分判断出现异常，currentIndex：-1 请联系 http://translate.zvo.cn/43006.html 说明');
-								}
-								//前插入空数组填充
-								for(var addbeforei = 0; addbeforei<currentIndex; addbeforei++){
-									var beforeItemArrayLength = translateTextArray[addbeforei].length;
-									//console.log('beforeItemArrayLength:'+beforeItemArrayLength);
-									for(var bi = 0; bi < beforeItemArrayLength; bi++){
-										d.text.unshift(null);
-									}
+							//进行对前后进行补齐数组
+							if(currentIndex < 0){
+								translate.log('------ERROR--------');
+								translate.log('翻译内容过多，进行拆分，但拆分判断出现异常，currentIndex：-1 请联系 http://translate.zvo.cn/43006.html 说明');
+							}
+							//前插入空数组填充
+							for(var addbeforei = 0; addbeforei<currentIndex; addbeforei++){
+								var beforeItemArrayLength = translateTextArray[addbeforei].length;
+								//console.log('beforeItemArrayLength:'+beforeItemArrayLength);
+								for(var bi = 0; bi < beforeItemArrayLength; bi++){
+									d.text.unshift(null);
 								}
-								//后插入空数组填充
-								for(var addafteri = translateTextArray.length-1; addafteri>currentIndex; addafteri--){
-									var afterItemArrayLength = translateTextArray[addafteri].length;
-									for(var bi = 0; bi < afterItemArrayLength; bi++){
-										d.text.push(null);
-									}
+							}
+							//后插入空数组填充
+							for(var addafteri = translateTextArray.length-1; addafteri>currentIndex; addafteri--){
+								var afterItemArrayLength = translateTextArray[addafteri].length;
+								for(var bi = 0; bi < afterItemArrayLength; bi++){
+									d.text.push(null);
 								}
-								
 							}
 							
-							func(d);
-						}, 'post', true, {'Authorization':'Bearer '+auth, 'Content-Type':'application/json'}, abnormalFunc, true);
+						}
 						
-
-					}
-					//console.log('translateResultArray')
-					//console.log(translateResultArray);
+						func(d);
+					}, 'post', true, {
+						'Content-Type':'application/json'
+					}, abnormalFunc, true);
 					
 
-				}, 'get', true, {'content-type':'application/x-www-form-urlencoded'}, function(xhr){
-					translate.log('---------error--------');
-					translate.log('edge translate service error, http code : '+xhr.status + ', response text : '+xhr.responseText);
-				}, true);
+				}
 
 
 				
+				
 
 				
 			}
@@ -7923,7 +7962,6 @@ var translate = {
 					params = params + index + '=' + data[index];
 				}
 			}
-			
 			if(url.indexOf('https://') == 0 || url.indexOf('http://') == 0){
 				//采用的url绝对路径
 			}else{
@@ -8302,13 +8340,12 @@ var translate = {
 				        		}
 				        	}
 				        	//client.edge 判断   translate.service.edge可能会被精简translate.js定制时给直接干掉，所以提前加个判断
-				        	if(typeof(translate.service.edge) != 'undefined' && url.indexOf(translate.service.edge.api.auth) > -1){
-				        		ignoreUrl = true;
-				        	}
-				        	if(url.indexOf('.microsofttranslator.com/translate') > -1){
-				        		ignoreUrl = true;
+				        	if(typeof(translate.service.edge) != 'undefined'){
+				        		if(url.indexOf('edge.microsoft.com/translate/translatetext') > -1){
+					        		ignoreUrl = true;
+					        	}
 				        	}
-
+				        	
 				        	if(ignoreUrl){
 				        		//console.log('忽略：'+url);
 								continue;

package/naiveUI/LanguageSelect.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="LanguageSelect ignore">
+    <!-- 使用作用域插槽，将组件内部的数据和方法传递给父组件 -->
+    <slot 
+      :LanguageSelectLanguageList="LanguageSelectLanguageList"
+      :LanguageSelectOnChange="LanguageSelectOnChange"
+      :LanguageSelectRenderLabel="LanguageSelectRenderLabel"
+    >
+      <!-- 默认的n-select实现 -->
+      <n-select
+        v-model:value="language"
+        @update:value="LanguageSelectOnChange"
+        placeholder="Please select language"
+        :options="LanguageSelectLanguageList"
+        label-field="name"
+        value-field="id"
+        class="ignore"
+        :render-label="LanguageSelectRenderLabel"
+      />
+    </slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, defineProps } from 'vue';
+import { h } from 'vue';
+import { NSelect } from 'naive-ui';
+
+// 定义语言选项类型
+interface LanguageOption {
+  id: string;
+  name: string;
+}
+
+
+// 选中的语言ID（双向绑定值）
+const language = ref<string | null>(null);
+
+// 语言选项列表
+const LanguageSelectLanguageList = ref<LanguageOption[]>([]);
+
+// 处理语言选择变化
+const LanguageSelectOnChange = (value: string) => {
+  language.value = value;
+  window.translate.selectLanguageTag.selectOnChange({
+    target: {
+      value: value
+    }
+  });
+};
+
+// 自定义渲染标签函数
+const LanguageSelectRenderLabel = (option: LanguageOption) => {
+  const { name } = option;
+  return h('span', { class: 'ignore' }, name);
+};
+
+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/naiveUI/README.md

@@ -0,0 +1,126 @@
+# Naive UI
+
+## 接入 vue3 方式使用 translate.js
+http://translate.zvo.cn/4041.html
+
+## 页面上出现语言切换的Select下拉切换菜单
+
+### 效果
+见下图右上角的多语言切换  
+![](./resource/preview.png)
+
+### 代码
+
+比如要在 index.vue 页面上显示切换语言的 select 下拉菜单，那么 index.vue 页面中，要进行的操作：  
+先在 index.vue 中，加入一行，导入此UI框架的多语言切换Select 
+````import LanguageSelect from 'i18n-jsautotranslate/naiveUI/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/naiveUI/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, LanguageSelectRenderLabel }">
+    <n-select
+      v-model:value="language"
+      @update:value="LanguageSelectOnChange"
+      :options="LanguageSelectLanguageList"
+      label-field="name"
+      value-field="id"
+      class="ignore"
+      placeholder="请选择语言"
+      :render-label="LanguageSelectRenderLabel"
+    />
+  </template>
+</LanguageSelect>
+````
+
+完整的示例代码如下：
+````
+<template>
+  <div class="login">
+    <h3 class="login-logo">
+      Logo
+    </h3>
+
+    <!-- 多语言切换的 Select 下拉选择 -->
+    <LanguageSelect>
+      <template #default="{ LanguageSelectLanguageList, LanguageSelectOnChange, LanguageSelectRenderLabel }">
+        <n-select
+          v-model:value="language"
+          @update:value="LanguageSelectOnChange"
+          :options="LanguageSelectLanguageList"
+          label-field="name"
+          value-field="id"
+          class="ignore"
+          placeholder="请选择语言"
+          :render-label="LanguageSelectRenderLabel"
+        />
+      </template>
+    </LanguageSelect>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import LanguageSelect from 'i18n-jsautotranslate/naiveUI/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>
+````

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "i18n-jsautotranslate",
-  "version": "3.18.72",
+  "version": "3.18.74",
   "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": {
@@ -14,8 +14,9 @@
   ],
   "files": [
     "index.js",
-    "ArcoDesign/**",
-    "vue/**"
+    "ArcoDesign/Vue3/LanguageSelect.vue",
+    "vue/**",
+    "naiveUI/LanguageSelect.vue"
   ],
   "homepage": "https://github.com/xnx3/translate#readme",
   "bugs": {

package/vue/vue3/README.md

@@ -0,0 +1,45 @@
+VUE3 中 使用 translate.j
+
+## [修改] package.json 文件 
+dependencies 中增加
+````
+"i18n-jsautotranslate": "^3.18.73",
+````
+
+## [新增] 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)  
+这个文件也是你当前项目对翻译进行各种自定义微调所在。  
+有什么要设置的，比如设置使用你私有部署的翻译服务器提供翻译服务、设置哪些文字不进行翻译、设置自定义术语 ……等等
+
+## [修改] main.js (或ts) 文件
+首先导入 上一步新建的文件，也就是新增一行 import : 
+````
+import {translateJsVueUseModel} from './utils/translate' // 多语言切换, 导入translate插件
+````
+  
+然后在 ````const app = createApp(App)```` 跟 ````app.mount('#app')```` 的中间，新增 ````app.use(translateJsVueUseModel);````  
+
+改好的 main.js 文件如下图所示：  
+````
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import {translateJsVueUseModel} from './utils/translate' // 多语言切换, 导入translate插件
+
+const app = createApp(App);
+app.use(router);
+app.use(translateJsVueUseModel);   //注释掉，即可停用多语言切换能力
+app.mount('#app');
+````
+
+## 页面上出现语言切换的Select下拉切换菜单
+这里，我们针对部分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)
+  
+如果你使用的别的UI框架，可以 [联系我](4030.html) 沟通，目前正在增加其他主流UI框架的，没准你要的就恰好有了，或者直接针对你当前使用的进行新适配。  
+
+
+## 注意
+比如你vue页面中有个按钮，点击后触发切换为某种语言，正常使用是 `translate.changeLanguage('english');`  而在vue代码中如果提示 `translate 不存在` ，那么你触发时前面额外加个windows.即可 ： `window.translate.changeLanguage('english');`