torchv-translate 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +284 -0
- package/extend/ArcoDesign/Vue3/LanguageSelect.vue +146 -0
- package/extend/naiveUI/LanguageSelect.vue +145 -0
- package/extend/vue/vue3/LanguageSelect.vue +139 -0
- package/extend/vue/vue3/translate.ts +63 -0
- package/extend/vue/vue3/translateVue3TS.ts +93 -0
- package/index.js +12 -0
- package/package.json +34 -0
- package/translate.js/translate.js +12101 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 xnx3
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,284 @@
|
|
|
1
|
+
|
|
2
|
+
<h1 align="center">
|
|
3
|
+
translate.js
|
|
4
|
+
</h1>
|
|
5
|
+
<h4 align="center">
|
|
6
|
+
AI i18n,两行js实现html全自动翻译。 <br/>
|
|
7
|
+
交给AI,无需改动页面、无语言配置文件、无API Key、对SEO友好!
|
|
8
|
+
</h4>
|
|
9
|
+
<h4 align="center">
|
|
10
|
+
简体中文 |
|
|
11
|
+
<a href="http://translate.zvo.cn/index.html?language=chinese_traditional">繁體中文</a> |
|
|
12
|
+
<a href="http://translate.zvo.cn/index.html?language=english">English</a> |
|
|
13
|
+
<a href="http://translate.zvo.cn/index.html?language=japanese">日語</a> |
|
|
14
|
+
<a href="http://translate.zvo.cn/index.html?language=russian">Русский</a> |
|
|
15
|
+
<a href="http://translate.zvo.cn/index.html?language=german">deutsch</a> |
|
|
16
|
+
<a href="http://translate.zvo.cn/index.html?language=french">Français</a>
|
|
17
|
+
</h4>
|
|
18
|
+
|
|
19
|
+
# 特性说明
|
|
20
|
+
* **使用极其简单。** 直接加入几行 JavaScript 代码即可让其拥有上百种语言切换能力,不增加工作量,无需改造页面本身植入大量垃圾代码变得臃肿,也不需要配置各种语种的语言文件,因为它会直接扫描你的DOM自动识别并翻译显示,它不需要你到某某网站登录去申请什么key,它是开源开放的,拿来就能用。
|
|
21
|
+
* **极其灵活扩展。** 您可指定它[只翻译某些指定区域的元素](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)、 ...... 只要你想的,它都能做到。做不到的,你找我我来让它做到!
|
|
22
|
+
* **极速翻译能力。** [采用多线程加速,内置三层缓存、预加载机制、文本预处理清洗等,提供毫秒级瞬间翻译的能力。](http://translate.zvo.cn/4026.html)
|
|
23
|
+
* **永久开源免费。** 采用MIT开源协议,您可永久免费使用。[另外你可以用它来做某些系统的三方插件、浏览器插件...等等,进行售卖盈利](http://translate.zvo.cn/4036.html)
|
|
24
|
+
* **搜索引擎友好。** 完全不影响你本身网站搜索引擎的收录。爬虫所爬取的网页源代码,它不会对其进行任何改动,你可完全放心。
|
|
25
|
+
* **支持私有部署。** [在某些政府机关及大集团内部项目中,对数据隐私及安全保密有强要求场景、或者完全不通外网的场景,可以自行私有部署翻译API服务](http://translate.zvo.cn/391129.html)
|
|
26
|
+
* **全球网络节点。** 美洲、亚洲、欧洲 ... 都有网络节点,它能自动适配最快节点,每间隔1分钟自动获取一次延迟最小的节点进行接入使用,使全球范围使用都可高效稳定。
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
# 体验
|
|
31
|
+
### 拿别人的网站试试效果
|
|
32
|
+
|
|
33
|
+

|
|
34
|
+
|
|
35
|
+
1. 随便打开一个网页
|
|
36
|
+
2. 右键 - 审查元素
|
|
37
|
+
3. 粘贴入以下代码:
|
|
38
|
+
```` var head= document.getElementsByTagName('head')[0]; var script= document.createElement('script'); script.type= 'text/javascript'; script.src= 'https://res.zvo.cn/translate/inspector_v2.js'; head.appendChild(script); ````
|
|
39
|
+
4. Enter 回车键 , 执行
|
|
40
|
+
5. 在当前网页的左上角,就出现了一个大大的切换语言,切换试试看。
|
|
41
|
+
|
|
42
|
+
### 在线体验Demo
|
|
43
|
+
http://res.zvo.cn/translate/demo.html
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
# 使用
|
|
47
|
+
|
|
48
|
+
### 快速接入
|
|
49
|
+
在网页最末尾, ````</html>```` 之前,加入以下代码,一般在页面的最底部,就会选择语言的 select 切换标签 :
|
|
50
|
+
|
|
51
|
+
````
|
|
52
|
+
<script src="https://cdn.staticfile.net/translate.js/3.18.66/translate.js"></script>
|
|
53
|
+
<script>
|
|
54
|
+
translate.language.setLocal('chinese_simplified'); //设置本地语种(当前网页的语种)。如果不设置,默认自动识别当前网页显示文字的语种。 可填写如 'english'、'chinese_simplified' 等
|
|
55
|
+
translate.service.use('client.edge'); //设置机器翻译服务通道,相关说明参考 http://translate.zvo.cn/545867.html
|
|
56
|
+
translate.listener.start(); //开启页面元素动态监控,js改变的内容也会被翻译,参考文档: http://translate.zvo.cn/4067.html
|
|
57
|
+
translate.execute();//完成翻译初始化,进行翻译
|
|
58
|
+
</script>
|
|
59
|
+
````
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
### 更深入使用
|
|
63
|
+
|
|
64
|
+
1. [快速使用 - 让你最快看到效果,了解它翻译的原理](http://translate.zvo.cn/532777.html)
|
|
65
|
+
1. [常见问题 - 我有多个页面,怎么都能每个页面都能翻译](http://translate.zvo.cn/547814.html)
|
|
66
|
+
1. [最优体验 - 打开新页面后先显示原文1秒然后再显示译文,如何不显示原文?](http://translate.zvo.cn/549731.html)
|
|
67
|
+
1. [项目上线 - 更换更稳定响应更快翻译更好的大模型翻译通道](http://translate.zvo.cn/545867.html)
|
|
68
|
+
|
|
69
|
+
它支持极其丰富的微调扩展方式,可参考下面的**微调指令**
|
|
70
|
+
|
|
71
|
+
### 微调指令
|
|
72
|
+
它有极其丰富的扩展指令,让你可以对它进行各种精准控制,满足各种难缠客户的各种脑洞要求。(如果满足不了,可提出来,我们加)
|
|
73
|
+
|
|
74
|
+
* **[切换语言select选择框的自定义设置](https://translate.zvo.cn/41541.html)**,设置切换语言选择框位置、CSS美化、是否出现、显示的语种、触发后的自定义、以及重写等。
|
|
75
|
+
* **[设置默认翻译为什么语种进行显示](http://translate.zvo.cn/4071.html)**,用户第一次打开时,默认以什么语种显示。
|
|
76
|
+
* **[自定义翻译术语](http://translate.zvo.cn/41555.html)**,如果你感觉某些翻译不太符合你的预期,可进行针对性的定义某些词或句子的翻译结果,进行自定义术语库
|
|
77
|
+
* **[翻译完后自动触发执行](http://translate.zvo.cn/4069.html)**,当翻译完成后会自动触发执行您的某个方法,以便您来做自定义扩展。
|
|
78
|
+
* **[指定翻译服务接口](http://translate.zvo.cn/4068.html)**,如果你不想用我们开源免费的翻译服务接口,使用您自己私有部署的、或者您自己二次开发对接的某个翻译服务,可通过此来指定自己的翻译接口。
|
|
79
|
+
* **[监控页面动态渲染的文本进行自动翻译](http://translate.zvo.cn/4067.html)**,如果页面用 JavaScript 的地方比较多,内容都是随时用JS来控制显示的,比如 VUE、React 等框架做的应用,它可以实时监控DOM中文字的变动,当发生变动后立即识别并进行翻译。
|
|
80
|
+
* **[设置本地语种(当前网页的语种)](http://translate.zvo.cn/4066.html)**,手动指定当前页面的语言。如果不设置,它会自动识别当前网页的文本,取当前网页文本中,出现频率最高的语种为默认语种。
|
|
81
|
+
* **[自动切换为用户所使用的语种](http://translate.zvo.cn/4065.html)**,用户第一次打开网页时,自动判断当前用户所使用的语种、以及所在的国家,来自动进行切换为这个语种。
|
|
82
|
+
* **[主动进行语言切换](http://translate.zvo.cn/4064.html)**,开放一个方法提供程序调用,只需传入翻译的目标语言,即可快速切换到指定语种
|
|
83
|
+
* **[只翻译指定的元素](http://translate.zvo.cn/4063.html)**,指定要翻译的元素的集合,可传入一个或多个元素。如果不设置此,默认翻译整个网页。
|
|
84
|
+
* **[翻译时忽略指定的id](http://translate.zvo.cn/4062.html)**,翻译时追加上自己想忽略不进行翻译的id的值,凡是在这里面的,都不进行翻译,也就是当前元素以及其子元素都不会被翻译。
|
|
85
|
+
* **[翻译时忽略指定的class属性](http://translate.zvo.cn/4061.html)**,翻译时追加上自己想忽略不进行翻译的class标签,凡是在这里面的,都不进行翻译,也就是当前元素以及其子元素都不会被翻译。
|
|
86
|
+
* **[翻译时忽略指定的tag标签](http://translate.zvo.cn/4060.html)**,翻译时追加上自己想忽略不进行翻译的tag标签,凡是在这里面的,都不进行翻译,也就是当前元素以及其子元素都不会被翻译。
|
|
87
|
+
* **[翻译时忽略指定的文字不翻译](http://translate.zvo.cn/283381.html)**,翻译时追加上自己想忽略不进行翻译的文字(支持配置字符串和正则表达式),凡是在这里面的,都不进行翻译。
|
|
88
|
+
* **[对网页中图片进行翻译](http://translate.zvo.cn/4055.html)**,在进行翻译时,对其中的图片也会一起进行翻译。
|
|
89
|
+
* **[鼠标划词翻译](http://translate.zvo.cn/4072.html)**,鼠标在网页中选中一段文字,会自动出现对应翻译后的文本
|
|
90
|
+
* **[获取当前显示的是什么语种](http://translate.zvo.cn/4074.html)**,如果用户切换为英语进行浏览,那么这个方法将返回翻译的目标语种。
|
|
91
|
+
* **[根据URL传参控制以何种语种显示](http://translate.zvo.cn/41929.html)**,设置可以根据当前访问url的某个get参数来控制使用哪种语言显示。
|
|
92
|
+
* **[离线翻译及自动生成配置](http://translate.zvo.cn/4076.html)**,其实它也就是传统 i18n 的能力,有语言配置文件提供翻译结果。
|
|
93
|
+
* **[手动调用接口进行翻译操作](http://translate.zvo.cn/4077.html)**,通过JavaScript调用一个方法,传入翻译文本进行翻译,并获得翻译结果
|
|
94
|
+
* **[元素的内容整体翻译能力配置](http://translate.zvo.cn/4078.html)**,对node节点的文本拿来进行整体翻译处理,而不再拆分具体语种,提高翻译语句阅读通顺程度
|
|
95
|
+
* **[翻译接口响应捕获处理](http://translate.zvo.cn/4079.html)**,对翻译API接口的响应进行捕获,进行一些自定义扩展
|
|
96
|
+
* **[清除历史翻译语种的缓存](http://translate.zvo.cn/4080.html)**,清除掉你上个页面所记忆的翻译语种,从而达到切换页面时不会按照上个页面翻译语种自动进行翻译的目的。
|
|
97
|
+
* **[网页ajax请求触发自动翻译](http://translate.zvo.cn/4086.html)**,监听当前网页中所有的ajax请求,当请求结束后,自动触发翻译
|
|
98
|
+
* **[设置只对指定语种进行翻译](http://translate.zvo.cn/4085.html)**,翻译时只会翻译在这里设置的语种,未在里面的语种将不会被翻译。
|
|
99
|
+
* **[识别字符串语种及分析](http://translate.zvo.cn/43128.html)**,对字符串进行分析,识别出都有哪些语种,每个语种的字符是什么、每个语种包含的字符数是多少
|
|
100
|
+
* **[重写一级缓存(浏览器缓存)](http://translate.zvo.cn/4082.html)**,你如果不想使用默认的 localStorage 的缓存,您完全可以对其重写,设置自己想使用的缓存方式
|
|
101
|
+
* **[设置使用的翻译服务 translate.service.use](http://translate.zvo.cn/4081.html)**,目前有自有的服务器提供翻译API方式、无自己服务器API的方式两种。
|
|
102
|
+
* **[启用企业级稳定翻译](http://translate.zvo.cn/4087.html)**,独立于开源版本的翻译通道之外,仅对少数用户开放,提供企业级的稳定、高速、以及更多网络分发节点。
|
|
103
|
+
* **[增加对指定标签的属性进行翻译](http://translate.zvo.cn/231504.html)**,可以增加对指定html标签的某个或某些属性进行翻译。比如element、vue 等框架,有些自定义的标签属性,想让其也正常翻译
|
|
104
|
+
* **[本地语种也进行强制翻译](http://translate.zvo.cn/289574.html)**,切换为中文时,即使本地语种设置的是中文,网页中只要不是中文的元素,都会被翻译为要显示的语种
|
|
105
|
+
* **[自定义通过翻译API进行时的监听事件](http://translate.zvo.cn/379207.html)**,当通过翻译API进行文本翻译时的整个过程进行监听,做一些自定义处理,比如翻译API请求前要做些什么、请求翻译API完成并在DOM渲染完毕后触发些什么。
|
|
106
|
+
* **[启用翻译中的遮罩层](http://translate.zvo.cn/407105.html)**,在进行通过翻译API进行翻译时,相关元素上面显示一层加载中的动画效果,让用户知道这段文本正在进行处理中
|
|
107
|
+
* **[对JS对象及代码进行翻译](http://translate.zvo.cn/452991.html)**,可对JavaScript 对象、以及 JavaScript 代码进行翻译。
|
|
108
|
+
* **[网络请求自定义附加参数](http://translate.zvo.cn/471711.html)**,追加上一些自定义的参数传递到后端翻译服务。主要用于定制扩展使用。
|
|
109
|
+
* **[网络请求数据拦截并翻译](http://translate.zvo.cn/479724.html)**,当用户触发网络请求时,它可以针对ajax、fetch请求中的某个参数,进行拦截,并进行翻译,将翻译后的文本赋予这个参数,然后再放开请求。
|
|
110
|
+
* **[翻译排队执行](http://translate.zvo.cn/479742.html)**,避免接入时的异常设置,导致非常频繁的去执行扫描及翻译的情况。
|
|
111
|
+
* **[翻译相关网络请求的自定义控制](http://translate.zvo.cn/521713.html)**,进行翻译的时候,会有一些初始化、多节点测速、当前支持语种、等请求,可以通过提前配置的方式,不在发起这几个网络请求,以及对翻译接口请求进行转发修改等。
|
|
112
|
+
* **[获取翻译区域显示的原始文本](http://translate.zvo.cn/513197.html)**,获取翻译区域的原始文本,翻译前的文本。这里会把空白符等过滤掉,只返回纯显示的文本
|
|
113
|
+
* **[重写语种识别策略](http://translate.zvo.cn/513538.html)**,识别当前语种、或某个元素是什么语种的计算方式
|
|
114
|
+
* **[进行翻译的生命周期监控及触发](http://translate.zvo.cn/540189.html)**,监控执行翻译 translate.execute(); 之后,它会进行的一系列动作,可以针对其某一刻,进行触发自定义方法。
|
|
115
|
+
* **[网页打开时自动隐藏文字,翻译完成后显示译文](https://translate.zvo.cn/549731.html)**,避免这种情况:刷新当前页面后,会先显示原本的文本,然后再翻译为切换为的语种,体验效果有点欠缺。
|
|
116
|
+
|
|
117
|
+
### 框架中使用
|
|
118
|
+
|
|
119
|
+
* [Vue](https://translate.zvo.cn/4041.html) | [vue2 demo](https://lruihao.github.io/vue-el-demo/#/translate-js)
|
|
120
|
+
* [React](extend/react/) | [React 18 Demo](https://tatsukimengchen.github.io/react-translate-js-demo/)
|
|
121
|
+
* [Uniapp]() | [打包APP使用的说明及Demo](extend/uniapp/)
|
|
122
|
+
* [Layui](extend/layui/) | [Demo](https://res.zvo.cn/translate/else/layui_exts/demo.html)
|
|
123
|
+
|
|
124
|
+
|
|
125
|
+
### 帮你集成
|
|
126
|
+
正常情况,你稍微懂一点JavaScript,就可以非常方便的进行使用了。你还可以加我们讨论QQ群等进行讨论各种不同的使用方式等。
|
|
127
|
+
如果使用时遇到的一些意外情况,我们可以给你进行协助:
|
|
128
|
+
* [你在使用时遇到BUG,文档就是这么说的,但是它没生效,可以反馈我,我免费帮你排查、解决](http://translate.zvo.cn/4032.html)
|
|
129
|
+
* [你不懂JavaScript,或者你没有时间去集成它,我们可以有偿帮你完成接入集成](http://translate.zvo.cn/4025.html)
|
|
130
|
+
* [你们的项目是内网形态,没有提供公网访问,想要我支持参与,我也可以出差去你们公司实地进行参与调试、指导、配合,完成接入集成工作。可联系我](http://translate.zvo.cn/4030.html)
|
|
131
|
+
|
|
132
|
+
# 扩展分支
|
|
133
|
+
translate.js 衍生了一系列扩展能力,在其他各个不同的领域,默默对当前的现状进行着改变。
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
### 分支:浏览器翻译插件
|
|
137
|
+
提供整体的浏览器翻译插件的全套方案,您如果是开发者,完全可以拿去将界面美化包装一下,而后直接提交应用市场进行售卖盈利。
|
|
138
|
+
[浏览器插件的源码](extend/chrome_plugin/) | [能直接安装到浏览器的插件Demo](http://translate.zvo.cn/4037.html)
|
|
139
|
+
|
|
140
|
+
### 分支:HTML文件翻译API
|
|
141
|
+
提供开放API接口,传入html文件(html源代码)及要翻译为的语言即可拿到翻译后的html源码。完美支持识别各种复杂及不规范html代码,支持翻译前的微调,比如不翻译某个区域、图片翻译、js语法操作html文件中的元素进行增删改等。
|
|
142
|
+
[详细说明](http://translate.zvo.cn/4022.html) | [Demo](http://doc.zvo.cn/tcdn/api/doc.html)
|
|
143
|
+
|
|
144
|
+
### 分支:翻译服务私有部署
|
|
145
|
+
1. 提供文本翻译API,可为 translate.js 提供翻译接口支持。
|
|
146
|
+
2. 可使用在线大模型 [GiteeAI](https://ai.gitee.com/?source=translate.js) 、或内网私有部署大模型(qwen3、glm、deepseek、
|
|
147
|
+
Hunyuan-MT ...) 转为统一的文本翻译API输出。
|
|
148
|
+
3. 内置内存加速、多线程加速、鉴权、译文调整、统计 ...等多项能力。
|
|
149
|
+
[开放的文本翻译API](http://api.zvo.cn/translate/service/20250814/translate.json.html) | [linux上私有部署](http://translate.zvo.cn/391129.html)
|
|
150
|
+
|
|
151
|
+
### 分支:源站翻译及域名分发
|
|
152
|
+
将您现有的网站,翻译成全新的小语种网站,小语种网站可以分别绑定域名并支持搜索引擎收录和排名。而您的源站无需任何改动。也就是你可以将你朋友的网站,翻译为小语种网站,绑定上自己的域名,提供对外访问。而你无需向你朋友取得任何的如账号等相关权限
|
|
153
|
+
[更多介绍及视频说明](https://translate.zvo.cn/236896.html) | [私有部署](http://translate.zvo.cn/236899.html) | [某个网站的Demo](http://http.qiye1.wang.market.zvo.cn/index.html)
|
|
154
|
+
|
|
155
|
+
### 分支:文本翻译大模型
|
|
156
|
+
[https://huggingface.co/xnx3/translate100](https://huggingface.co/xnx3/translate100) 是一个用于翻译任务的 seq-to-seq 架构、基于 Transformer 的神经机器翻译模型,由m2m100(12B)经过蒸馏(small100)及各种处理后,得到的可以完全适配 translate.js 的一键部署应用。
|
|
157
|
+
它的翻译能力很一般,它最大的特点是在超低配置的终端(1核2G内存)运行使用、及做到适配全球主流的上百个语言。
|
|
158
|
+
它在CPU(Intel 7700k)上可以达到43token/s,在淘宝100块钱就能买到的p106显卡上可以达到90tokens/s
|
|
159
|
+
它的初衷,是我们针对私有化部署场景,采用qwen3 8~32B 做主要翻译时,针对千问大模型处理不了的部分,又做的一层保障,将qwen3翻译不达标的文本再交由 translate100 来进行最后的翻译,以完成大模型翻译的可靠稳定性闭环,避免返回翻译失败。
|
|
160
|
+
当然,你也可以部署它后,通过它开放的文本翻译API,来进行使用。 它最大的优势是对硬件要求极低极低,完全无需联网就能使用。
|
|
161
|
+
(注意,https://huggingface.co/xnx3/translate100 这个链接需要科学上网才能打开)
|
|
162
|
+
|
|
163
|
+
[开放的文本翻译API(它跟translate.js 使用的翻译API是完全一致的)](http://api.zvo.cn/translate/service/20250814/translate.json.html) | [私有部署](https://huggingface.co/xnx3/translate100)
|
|
164
|
+
|
|
165
|
+
|
|
166
|
+
|
|
167
|
+
# 谁在使用
|
|
168
|
+
|
|
169
|
+
开源项目:
|
|
170
|
+
* [DzzOffice](http://www.dzzoffice.com/index.php?mod=dzzmarket&op=view&mid=58) 开源办公套件,搭建自己的类似“Google企业应用套件”、“微软Office365”的企业协同办公平台
|
|
171
|
+
* [ModStart](https://modstart.com/m/WebTranslate) 基于 Laravel 的模块化全栈开发框架
|
|
172
|
+
* [管伊佳ERP](https://gitee.com/jishenghua/JSH_ERP) 国产开源ERP系统关注度第一,专注进销存、生产、总账
|
|
173
|
+
* [FixIt](https://github.com/hugo-fixit/cmpt-translate) 一款简洁、优雅且先进的Hugo 博客主题
|
|
174
|
+
* [Z-Blog](https://app.zblogcn.com/?id=49226) 易用的博客程序,功能丰富,模板多样,助轻松搭建个性博客。
|
|
175
|
+
* [Discuz](https://addon.dismall.com/plugins/domi_translate.html) 知名论坛系统,功能强大,插件众多,打造活跃互动的网络社区。
|
|
176
|
+
* [Pear Admin Layui](https://gitee.com/pear-admin/Pear-Admin-Layui/tree/i18n/) Pear Admin Layui 是基于 Layui 的后台管理模板,简洁美观,实用高效。
|
|
177
|
+
* [kefu.js](https://gitee.com/mail_osc/kefu.js) 开源js聊天界面插件,方便快捷,助力网站沟通服务。
|
|
178
|
+
* [Layui](https://gitee.com/mail_osc/translate_layui) 简洁好用的前端框架,组件丰富,上手容易,广受开发者青睐。
|
|
179
|
+
* [wangmarket CMS](http://cms.zvo.cn) 开源的SAAS云建站系统,可私有部署,可通过后台任意开通多个网站,每个网站独立管理
|
|
180
|
+
* [易优CMS](https://www.eyoucms.com/mall/plus/29751.html) 功能强大的内容管理系统,操作简便,模板随心选。
|
|
181
|
+
* [迅睿CMS](https://www.xunruicms.com/shop/1285.html) 一款功能完善的内容管理系统,性能卓越,易于使用。
|
|
182
|
+
* [chanyue-cms](https://gitee.com/yanyutao0402/chanyue-cms) 基于Node、Express、MySQL、Vue3研发的高质量实用型CMS系统
|
|
183
|
+
* [phpok cms](https://gitee.com/phpok/phpok) 极其自由的企业站程序,支持各种自定义配置。
|
|
184
|
+
* [RPCMS](https://app.rpcms.cn/app/149.html) 轻量型php内容管理系统,小型、轻量,但功能丰富,可扩展性强。
|
|
185
|
+
* [Masuit.MyBlogs](https://gitee.com/masuit/Masuit.MyBlogs) 高性能高安全性低占用的个人博客系统
|
|
186
|
+
|
|
187
|
+
...
|
|
188
|
+
|
|
189
|
+
| | | | | |
|
|
190
|
+
| ------------ | ------------ |------------ |------------ |------------ |
|
|
191
|
+
| 高校 | 清华大学 | 北京理工大学 | 西苏格兰大学 | 中国美术学院 | 亚利桑那州立大学|
|
|
192
|
+
| 集团 | 中国一汽 | 京东 | 中兴 | 中国铁建 | 长城汽车 |
|
|
193
|
+
| 科研 | 国家生物信息中心 | 德国科工创新院 | 中科能研电力技术研究院 | 国家新能源汽车技术创新中心 | 北方华创 |
|
|
194
|
+
| 云厂商 | 指点云 | 每刻云 | 雨云 | DOGSSL | 多彩云 |
|
|
195
|
+
| 开源 | Gitee | DzzOffice | Discuz | wangmarket | 管伊佳ERP |
|
|
196
|
+
| 协会 | 中国国际环保展览会 | 国际研发方法协会 | 中国内燃机学会 | 深圳市智慧城市产业协会 | 山东省社会组织总会 |
|
|
197
|
+
| 平台 | 东盟 | ESG国际服务平台 | 安徽省外贸综合服务平台 | 湖南企业国际化经营服务平台 | 中亚采招网 |
|
|
198
|
+
|
|
199
|
+
...
|
|
200
|
+
|
|
201
|
+
如果您有开源项目,比如文档、cms、UI 框架、后台管理框架、等等,需要采用此进行多语言切换,欢迎喊我,无偿提供全程接入讨论及遇到的问题跟随优化,希望我们的开源项目能互相产生作用一起越来越好。如果你的项目在这个列表中没有,欢迎联系我说明,我给加入进去。如果您不想出现在这里,也联系我,我给隐去。
|
|
202
|
+
|
|
203
|
+
|
|
204
|
+
|
|
205
|
+
|
|
206
|
+
|
|
207
|
+
# 项目历程
|
|
208
|
+
* **2021年**,translate 翻译服务项目创建,最初为简化Google网页翻译JS进行了封装,可以更简单进行使用,但是因为扩展极其有限,文档也没那么好,于是开始了重构。
|
|
209
|
+
* **2022年初**,完全脱离Google网页翻译JS,从底层判断开始进行了全部重构,推出 2.0 版本,在加载js的资源大小上降低了95%,更快加载,同时内置了多层缓存、多种自定义方式等能力,使用更加灵活、翻译速度更加高效,极大提高了用户使用体验。 年底,我们翻译服务的cdn源 translate.js 的月请求次数超过了一千万次。
|
|
210
|
+
* **2023年**,翻译服务再次迎来大的变化,不仅仅只是对网页使用js来进行翻译,它还增加了翻译内容分发的能力,我们暂且简单将其称之为TCDN,它具备了CDN内容分发的一些能力,比如可以通过后台添加一个源站,然后绑定不同的域名,可以设置每个域名对应着源站的哪种语言,这样访问时打开的就直接是翻译后的网页,如果查看网页源代码,会发现html源码本身就是已经被翻译过的,不在局限于js端进行翻译,而是通过服务端主动进行翻译,并进行缓存,用户访问请求时,直接将翻译结果输出给用户展示,极大提高了用户使用体验、每种语种也都可以在相应国家搜索引擎收录、并且系统因具备CDN的基本能力,如果网站有更新,还可以通过后台快速更新源站或者访问目标站点、或者指定访问url的网页翻译缓存。
|
|
211
|
+
同样的能力,我们发现友商收费标注是一个站点20种翻译语种的情况是一万二每年,而我们这个支持七八十种语种(取决于 translaet.service 后端对接的翻译服务支持的语种数量),一台服务器可承载数千个源站提供服务!
|
|
212
|
+
* **2023年中旬**,我们开源公开的翻译服务 translate.service 月请求量已达到1.5亿次!并再以非常恐怖的速度在增长。
|
|
213
|
+
* **2024年底**,我们开源公开的翻译服务 translate.service 日请求量已超过10亿次! 压力太过巨大,放开翻译服务的私有化部署能力,有各地网络公司可以以非常低廉的价格私有化部署,给其客户提供服务。
|
|
214
|
+
* **2025年中旬**,私有化部署的翻译服务跟开源中国GiteeAI进行联合开发定制,内置GiteeAI大模型算力的自助接入及自动化配置部署,有开源中国提供高可靠稳定的算力支持,翻译质量超过传统的神经网络翻译,使小微网络公司可以以超低的投入就能完成传统技术开发到AI的转型。
|
|
215
|
+
发布翻译大模型 [https://huggingface.co/xnx3/translate100](https://huggingface.co/xnx3/translate100) 主要针对低端超低配置主机及边缘设备等场景。
|
|
216
|
+
|
|
217
|
+
|
|
218
|
+
# 结构图示
|
|
219
|
+
[](http://doc.zvo.cn/translate.js/home.html)
|
|
220
|
+
|
|
221
|
+
# 优秀开源项目及社区推荐
|
|
222
|
+
[Featbit](https://github.com/featbit/featbit) 一个100%开源的 Feature flags / Feature Management 平台工具
|
|
223
|
+
[IoTSharp](https://gitee.com/IoTSharp) IoTSharp 是一个 基于.Net Core 开源的物联网基础平台, 支持 HTTP、MQTT 、CoAp 协议
|
|
224
|
+
[流之云](https://gitee.com/ntdgg) 信息化、数字化服务提供商
|
|
225
|
+
[IMAI.WORK](https://gitee.com/tsinghua-open/imaiwork) 全自动AI获客,如AI直播、微信群发、朋友圈营销、自动加微、智能对话 ... 完整的AI营销自动化解决方案。
|
|
226
|
+
|
|
227
|
+
# 我的其他开源项目
|
|
228
|
+
|
|
229
|
+
| 开源项目 | star数量 | 仓库 |
|
|
230
|
+
| --- | --- | --- |
|
|
231
|
+
| 可私有部署 SAAS 建站系统 |  | https://gitee.com/mail_osc/wangmarket |
|
|
232
|
+
| Datax 的 华为云OBS 插件 |  | https://gitee.com/HuaweiCloudDeveloper/obs-datax-plugins |
|
|
233
|
+
| 扒网站工具 |  | https://gitee.com/mail_osc/templatespider |
|
|
234
|
+
| 文件上传工具类,OBS存储 |  | https://gitee.com/mail_osc/FileUpload |
|
|
235
|
+
| 智能客服机器人 |  | https://gitee.com/leimingyun/chatbot |
|
|
236
|
+
| 结合云存储做网站无需服务器 |  | [huaweicloud-obs-website-wangmarket-cms](https://gitee.com/HuaweiCloudDeveloper/huaweicloud-obs-website-wangmarket-cms) |
|
|
237
|
+
| kefu.js 在线聊天的前端 |  | https://gitee.com/mail_osc/kefu.js |
|
|
238
|
+
| 轻量级js消息提醒组件 |  | https://gitee.com/mail_osc/msg |
|
|
239
|
+
| js 实现 html 全自动翻译 |  | https://gitee.com/mail_osc/translate |
|
|
240
|
+
| 代码生成器,自动写代码 |  | https://gitee.com/mail_osc/writecode |
|
|
241
|
+
| Java日志存储及读取 |  | https://gitee.com/mail_osc/log |
|
|
242
|
+
| Layui的国际化支持组件 |  | https://gitee.com/mail_osc/translate_layui |
|
|
243
|
+
| Java8轻量级http请求类 |  | https://gitee.com/mail_osc/http.java |
|
|
244
|
+
| Java版按键精灵,游戏辅助开发 |  | https://gitee.com/mail_osc/xnx3 |
|
|
245
|
+
| js的WebSocket框架封装 |  | https://gitee.com/mail_osc/websocket.js |
|
|
246
|
+
| js邮件发送模块 |  | https://gitee.com/mail_osc/email.java |
|
|
247
|
+
| WEB 端浏览器通知提醒工具类 |  | https://gitee.com/mail_osc/notification.js |
|
|
248
|
+
| JS中文转拼音工具类 |  | https://gitee.com/mail_osc/pinyin.js |
|
|
249
|
+
| Java-微信常用工具类 |  | https://gitee.com/mail_osc/xnx3_weixin |
|
|
250
|
+
| QQ寻仙的游戏辅助软件 |  | https://gitee.com/mail_osc/xunxian |
|
|
251
|
+
| 私有化部署 SAAS商城 |  | https://gitee.com/leimingyun/wangmarket_shop |
|
|
252
|
+
| Java开发框架及规章约束 |  | https://gitee.com/leimingyun/wm |
|
|
253
|
+
| SAAS客服系统 |  | https://gitee.com/leimingyun/yunkefu |
|
|
254
|
+
| 根据标准的 JavaDoc 生成接口文档 |  | https://gitee.com/leimingyun/javadoc |
|
|
255
|
+
| 用sql方式使用Elasticsearch |  | https://gitee.com/leimingyun/elasticsearch |
|
|
256
|
+
| Java应用全自动部署及更新 |  | https://gitee.com/leimingyun/sftp-ssh-autopublish |
|
|
257
|
+
| 智能聊天机器人 |  | https://gitee.com/leimingyun/aichat |
|
|
258
|
+
| 自动备份文件到华为云 OBS |  | https://gitee.com/leimingyun/yunbackups |
|
|
259
|
+
| Java打印及预览的工具类 |  | https://gitee.com/leimingyun/printJframe |
|
|
260
|
+
…………
|
|
261
|
+
|
|
262
|
+
# 交流
|
|
263
|
+
如果您在使用过程中遇到任何异常情况,请详细说一下您遇到的问题。如果可以,请写下您的网站,以便我们可以更全面地测试,以便快速找到问题所在
|
|
264
|
+
作者微信:xnx3com(使用交流可加QQ群进行,我看微信很不及时)
|
|
265
|
+
Telegram : [untran](https://t.me/untran)
|
|
266
|
+
交流QQ群:181781514(已满)
|
|
267
|
+
交流QQ群:641047127(已满)
|
|
268
|
+
交流QQ群:240567964(已满)
|
|
269
|
+
交流QQ群:1034085260(已满)
|
|
270
|
+
交流QQ群:1017938586
|
|
271
|
+
交流QQ群:749330213
|
|
272
|
+
作者邮箱:921153866@qq.com
|
|
273
|
+
微信公众号:wangmarket
|
|
274
|
+
github: [https://github.com/xnx3/translate](https://github.com/xnx3/translate)
|
|
275
|
+
gitee: [https://gitee.com/mail_osc/translate](https://gitee.com/mail_osc/translate)
|
|
276
|
+
|
|
277
|
+
|
|
278
|
+
# 商业化声明
|
|
279
|
+
我完全允许你拿我的开源项目进行商业化包装盈利,而无需给我支付任何费用!
|
|
280
|
+
你能拿来赚钱,那是你的本事。
|
|
281
|
+
而我的开源项目能帮你赚钱,我会很荣幸,我能造福社会。
|
|
282
|
+
你在用它进行商业化盈利的时候,遇到问题也完全可以大方的向我求助,用它赚钱并不是什么偷偷摸摸的事情,技术能用来养家糊口改善生活是值得点赞的。
|
|
283
|
+
而且如果你不放心,我还可以白纸黑字盖章,送你一个定心丸。
|
|
284
|
+
说这么多,是体现一个态度,开源就是开源,我不会想法绑架你。我们可以在一起以最纯粹的状态交流,让生活更美好。
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="LanguageSelect ignore">
|
|
3
|
+
<!-- Arco Design 选择器组件 -->
|
|
4
|
+
<a-select
|
|
5
|
+
v-model="language"
|
|
6
|
+
value-key="id"
|
|
7
|
+
@change="LanguageSelectOnChange"
|
|
8
|
+
popup-class="ignore"
|
|
9
|
+
placeholder="please select language"
|
|
10
|
+
>
|
|
11
|
+
<!-- 语言选项列表(使用Select的子组件Option) -->
|
|
12
|
+
<a-select-option
|
|
13
|
+
class="ignore"
|
|
14
|
+
v-for="item in languageList"
|
|
15
|
+
:key="item.id"
|
|
16
|
+
:label="item.name"
|
|
17
|
+
:value="item.id"
|
|
18
|
+
/>
|
|
19
|
+
</a-select>
|
|
20
|
+
</div>
|
|
21
|
+
</template>
|
|
22
|
+
|
|
23
|
+
<script setup lang="ts">
|
|
24
|
+
import { ref, onMounted } from 'vue';
|
|
25
|
+
// 需要同时导入Select和Option组件
|
|
26
|
+
import { Select as ASelect, Option as ASelectOption } from '@arco-design/web-vue';
|
|
27
|
+
//import translate from 'torchv-translate'
|
|
28
|
+
|
|
29
|
+
// 定义语言选项类型
|
|
30
|
+
interface LanguageOption {
|
|
31
|
+
id: string;
|
|
32
|
+
name: string;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
// 选中的语言ID(双向绑定值)
|
|
36
|
+
const language = ref<string | null>(null);
|
|
37
|
+
/*
|
|
38
|
+
语言选项列表
|
|
39
|
+
其中的值为:
|
|
40
|
+
{ id: 'zh-CN', name: '简体中文' },
|
|
41
|
+
{ id: 'en-US', name: 'English' },
|
|
42
|
+
*/
|
|
43
|
+
const languageList = ref<LanguageOption[]>([]);
|
|
44
|
+
|
|
45
|
+
// 处理语言选择变化
|
|
46
|
+
const LanguageSelectOnChange = (value: string) => {
|
|
47
|
+
window.translate.selectLanguageTag.selectOnChange({
|
|
48
|
+
target: {
|
|
49
|
+
value: value
|
|
50
|
+
}
|
|
51
|
+
});
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
onMounted(() => {
|
|
55
|
+
if(typeof(translate) == 'object' && typeof(translate.vue3) == 'object' && typeof(translate.vue3.isUse) == 'boolean' && translate.vue3.isUse == true){
|
|
56
|
+
//正常,需要的,需要加载多语言切换Select
|
|
57
|
+
}else{
|
|
58
|
+
//不需要显示
|
|
59
|
+
return;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
translate.time.log(translate.vue3.isUse);
|
|
63
|
+
|
|
64
|
+
//重写渲染语言下拉列表出现时的函数,这里是为了把默认创建的 <div id="translate" 这个给去掉,其他无改变
|
|
65
|
+
translate.selectLanguageTag.render = function(){ //v2增加
|
|
66
|
+
if(translate.selectLanguageTag.alreadyRender){
|
|
67
|
+
return;
|
|
68
|
+
}
|
|
69
|
+
translate.selectLanguageTag.alreadyRender = true;
|
|
70
|
+
|
|
71
|
+
//判断如果不显示select选择语言,直接就隐藏掉
|
|
72
|
+
if(!translate.selectLanguageTag.show){
|
|
73
|
+
return;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
//从服务器加载支持的语言库
|
|
77
|
+
if(typeof(translate.request.api.language) == 'string' && translate.request.api.language.length > 0){
|
|
78
|
+
//从接口加载语种
|
|
79
|
+
translate.request.post(translate.request.api.language, {}, function(data){
|
|
80
|
+
if(data.result == 0){
|
|
81
|
+
console.log('load language list error : '+data.info);
|
|
82
|
+
return;
|
|
83
|
+
}
|
|
84
|
+
translate.request.api.language = data.list; //进行缓存,下一次切换语言渲染的时候直接从缓存取,就不用在通过网络加载了
|
|
85
|
+
translate.selectLanguageTag.customUI(data.list);
|
|
86
|
+
}, null);
|
|
87
|
+
}else if(typeof(translate.request.api.language) == 'object'){
|
|
88
|
+
//无网络环境下,自定义显示语种
|
|
89
|
+
translate.selectLanguageTag.customUI(translate.request.api.language);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
//显示切换语言
|
|
93
|
+
var TranslateJsSelectLanguages = document.getElementsByClassName('LanguageSelect');
|
|
94
|
+
for(var li = 0; li<TranslateJsSelectLanguages.length; li++){
|
|
95
|
+
TranslateJsSelectLanguages[li].style.display = 'block';
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
//languageList 便是当前支持的能切换的语种,你可以 console.log(languageList); 打印出来看看
|
|
100
|
+
translate.selectLanguageTag.customUI = function(externalLanguageList){
|
|
101
|
+
//整理允许显示的语种
|
|
102
|
+
var allowLanguageList: LanguageOption[] = [];
|
|
103
|
+
|
|
104
|
+
//判断 selectLanguageTag.languages 中允许使用哪些
|
|
105
|
+
if(translate.selectLanguageTag.languages.length > 0){
|
|
106
|
+
//设置了自定义显示的语言
|
|
107
|
+
//都转小写判断
|
|
108
|
+
var langs_indexof = (','+translate.selectLanguageTag.languages+',').toLowerCase();
|
|
109
|
+
|
|
110
|
+
for(var i = 0; i<externalLanguageList.length; i++){
|
|
111
|
+
if(langs_indexof.indexOf(','+externalLanguageList[i].id.toLowerCase()+',') < 0){
|
|
112
|
+
//没发现,那不显示这个语种,调出
|
|
113
|
+
continue
|
|
114
|
+
}
|
|
115
|
+
allowLanguageList.push(externalLanguageList[i]);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
}else{
|
|
119
|
+
//显示所有
|
|
120
|
+
allowLanguageList = externalLanguageList;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
//赋予带渲染到界面的语言列表数据
|
|
124
|
+
languageList.value = allowLanguageList;
|
|
125
|
+
|
|
126
|
+
//显示上一次切换后的语种
|
|
127
|
+
language.value = translate.language.getCurrent();
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
//渲染语言下拉列表出现
|
|
131
|
+
translate.selectLanguageTag.refreshRender();
|
|
132
|
+
//显示上一次切换后的语种
|
|
133
|
+
//language.value = translate.language.getCurrent();
|
|
134
|
+
});
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
</script>
|
|
138
|
+
|
|
139
|
+
<style scoped>
|
|
140
|
+
/* 避免被遮挡无法操作,设置z-index较高 */
|
|
141
|
+
.LanguageSelect {
|
|
142
|
+
z-index: 2147483583;
|
|
143
|
+
display:none;
|
|
144
|
+
}
|
|
145
|
+
</style>
|
|
146
|
+
|
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="LanguageSelect ignore">
|
|
3
|
+
<!-- 使用作用域插槽,将组件内部的数据和方法传递给父组件 -->
|
|
4
|
+
<slot
|
|
5
|
+
:LanguageSelectLanguageList="LanguageSelectLanguageList"
|
|
6
|
+
:LanguageSelectOnChange="LanguageSelectOnChange"
|
|
7
|
+
:LanguageSelectRenderLabel="LanguageSelectRenderLabel"
|
|
8
|
+
>
|
|
9
|
+
<!-- 默认的n-select实现 -->
|
|
10
|
+
<n-select
|
|
11
|
+
v-model:value="language"
|
|
12
|
+
@update:value="LanguageSelectOnChange"
|
|
13
|
+
placeholder="Please select language"
|
|
14
|
+
:options="LanguageSelectLanguageList"
|
|
15
|
+
label-field="name"
|
|
16
|
+
value-field="id"
|
|
17
|
+
class="ignore"
|
|
18
|
+
:render-label="LanguageSelectRenderLabel"
|
|
19
|
+
/>
|
|
20
|
+
</slot>
|
|
21
|
+
</div>
|
|
22
|
+
</template>
|
|
23
|
+
|
|
24
|
+
<script setup lang="ts">
|
|
25
|
+
import { ref, onMounted, defineProps } from 'vue';
|
|
26
|
+
import { h } from 'vue';
|
|
27
|
+
import { NSelect } from 'naive-ui';
|
|
28
|
+
|
|
29
|
+
// 定义语言选项类型
|
|
30
|
+
interface LanguageOption {
|
|
31
|
+
id: string;
|
|
32
|
+
name: string;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
// 选中的语言ID(双向绑定值)
|
|
37
|
+
const language = ref<string | null>(null);
|
|
38
|
+
|
|
39
|
+
// 语言选项列表
|
|
40
|
+
const LanguageSelectLanguageList = ref<LanguageOption[]>([]);
|
|
41
|
+
|
|
42
|
+
// 处理语言选择变化
|
|
43
|
+
const LanguageSelectOnChange = (value: string) => {
|
|
44
|
+
language.value = value;
|
|
45
|
+
window.translate.selectLanguageTag.selectOnChange({
|
|
46
|
+
target: {
|
|
47
|
+
value: value
|
|
48
|
+
}
|
|
49
|
+
});
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
// 自定义渲染标签函数
|
|
53
|
+
const LanguageSelectRenderLabel = (option: LanguageOption) => {
|
|
54
|
+
const { name } = option;
|
|
55
|
+
return h('span', { class: 'ignore' }, name);
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
onMounted(() => {
|
|
59
|
+
// 保留原有的初始化逻辑
|
|
60
|
+
if (typeof (translate) == 'object' && typeof (translate.vue3) == 'object' && typeof (translate.vue3.isUse) == 'boolean' && translate.vue3.isUse == true) {
|
|
61
|
+
// 正常,需要的,需要加载多语言切换Select
|
|
62
|
+
} else {
|
|
63
|
+
// 不需要显示
|
|
64
|
+
return;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
translate.time.log(translate.vue3.isUse);
|
|
68
|
+
|
|
69
|
+
// 重写渲染语言下拉列表出现时的函数
|
|
70
|
+
translate.selectLanguageTag.render = function () {
|
|
71
|
+
if (translate.selectLanguageTag.alreadyRender) {
|
|
72
|
+
return;
|
|
73
|
+
}
|
|
74
|
+
translate.selectLanguageTag.alreadyRender = true;
|
|
75
|
+
|
|
76
|
+
// 判断如果不显示select选择语言,直接就隐藏掉
|
|
77
|
+
if (!translate.selectLanguageTag.show) {
|
|
78
|
+
return;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
// 从服务器加载支持的语言库
|
|
82
|
+
if (typeof (translate.request.api.language) == 'string' && translate.request.api.language.length > 0) {
|
|
83
|
+
// 从接口加载语种
|
|
84
|
+
translate.request.post(translate.request.api.language, {}, function (data) {
|
|
85
|
+
if (data.result == 0) {
|
|
86
|
+
console.log('load language list error : ' + data.info);
|
|
87
|
+
return;
|
|
88
|
+
}
|
|
89
|
+
translate.request.api.language = data.list; // 进行缓存
|
|
90
|
+
translate.selectLanguageTag.customUI(data.list);
|
|
91
|
+
}, null);
|
|
92
|
+
} else if (typeof (translate.request.api.language) == 'object') {
|
|
93
|
+
// 无网络环境下,自定义显示语种
|
|
94
|
+
translate.selectLanguageTag.customUI(translate.request.api.language);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
// 显示切换语言
|
|
98
|
+
const TranslateJsSelectLanguages = document.getElementsByClassName('LanguageSelect');
|
|
99
|
+
for (let li = 0; li < TranslateJsSelectLanguages.length; li++) {
|
|
100
|
+
TranslateJsSelectLanguages[li].style.display = 'block';
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
// 处理语言列表数据
|
|
105
|
+
translate.selectLanguageTag.customUI = function (externalLanguageList) {
|
|
106
|
+
// 整理允许显示的语种
|
|
107
|
+
const allowLanguageList: LanguageOption[] = [];
|
|
108
|
+
|
|
109
|
+
// 判断 selectLanguageTag.languages 中允许使用哪些
|
|
110
|
+
if (translate.selectLanguageTag.languages.length > 0) {
|
|
111
|
+
// 设置了自定义显示的语言
|
|
112
|
+
// 都转小写判断
|
|
113
|
+
const langs_indexof = (',' + translate.selectLanguageTag.languages + ',').toLowerCase();
|
|
114
|
+
|
|
115
|
+
for (let i = 0; i < externalLanguageList.length; i++) {
|
|
116
|
+
if (langs_indexof.indexOf(',' + externalLanguageList[i].id.toLowerCase() + ',') < 0) {
|
|
117
|
+
// 没发现,那不显示这个语种,调出
|
|
118
|
+
continue;
|
|
119
|
+
}
|
|
120
|
+
allowLanguageList.push(externalLanguageList[i]);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
} else {
|
|
124
|
+
// 显示所有
|
|
125
|
+
allowLanguageList.push(...externalLanguageList);
|
|
126
|
+
}
|
|
127
|
+
// 赋予带渲染到界面的语言列表数据
|
|
128
|
+
LanguageSelectLanguageList.value = allowLanguageList;
|
|
129
|
+
|
|
130
|
+
// 显示上一次切换后的语种
|
|
131
|
+
language.value = translate.language.getCurrent();
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
// 渲染语言下拉列表出现
|
|
135
|
+
translate.selectLanguageTag.refreshRender();
|
|
136
|
+
});
|
|
137
|
+
</script>
|
|
138
|
+
|
|
139
|
+
<style scoped>
|
|
140
|
+
/* 避免被遮挡无法操作,设置z-index较高 */
|
|
141
|
+
.LanguageSelect {
|
|
142
|
+
z-index: 2147483583;
|
|
143
|
+
display: none;
|
|
144
|
+
}
|
|
145
|
+
</style>
|