From 8512f4ae542325e15058c9fabb019db6ef1000ef Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期五, 17 九月 2021 15:13:33 +0800
Subject: [PATCH] 添加i18n国际化
---
src/components/langSelect/index.vue | 38 +++++++++
src/lang/index.ts | 43 ++++++++++
src/lang/zh.js | 19 ++++
vue.config.js | 2
src/lang/en.js | 21 +++++
src/pages/index/App.vue | 41 +++++++---
src/pages/library/components/carList.vue | 4
src/components/licence/index.vue | 6
src/pages/index/main.ts | 19 +++-
package.json | 1
10 files changed, 168 insertions(+), 26 deletions(-)
diff --git a/package.json b/package.json
index 96c6769..99373e8 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
"stylus-loader": "^3.0.2",
"vue": "^2.6.11",
"vue-awesome-swiper": "^3.1.3",
+ "vue-i18n": "^8.25.1",
"vue-js-toggle-button": "^1.3.3",
"vue-photo-preview": "^1.1.3",
"vue-qrcode-component": "^2.1.1",
diff --git a/src/components/langSelect/index.vue b/src/components/langSelect/index.vue
new file mode 100644
index 0000000..71cf13e
--- /dev/null
+++ b/src/components/langSelect/index.vue
@@ -0,0 +1,38 @@
+<template>
+ <el-dropdown trigger="click" class="international" @command="handleSetLanguage">
+ <div>
+ {{btn}}
+ </div>
+ <el-dropdown-menu slot="dropdown">
+ <el-dropdown-item :disabled="language==='zh'" command="zh">
+ 绠�浣撲腑鏂�
+ </el-dropdown-item>
+ <el-dropdown-item :disabled="language==='en'" command="en">
+ English
+ </el-dropdown-item>
+ </el-dropdown-menu>
+ </el-dropdown>
+</template>
+
+<script>
+export default {
+ computed: {
+ language() {
+ return this.$i18n.locale
+ },
+ btn() {
+ return this.language == 'en' ? 'English': '绠�浣撲腑鏂�'
+ },
+ },
+ methods: {
+ handleSetLanguage(lang) {
+ this.$i18n.locale = lang
+ sessionStorage.setItem("language", lang);
+ // this.$message({
+ // message: 'Switch Language Success',
+ // type: 'success'
+ // })
+ }
+ }
+}
+</script>
diff --git a/src/components/licence/index.vue b/src/components/licence/index.vue
index 3bb0a6e..fc05242 100644
--- a/src/components/licence/index.vue
+++ b/src/components/licence/index.vue
@@ -177,7 +177,7 @@
if (rsp && rsp.success) {
if (rsp.data.License.Expires === 0) {
this.authStatus = 'unregistered'
- this.tip = '鏈巿鏉�, 鐐瑰嚮娉ㄥ唽'
+ this.tip = this.$t('licence.register')
} else {
this.authStatus = 'registered'
this.registe.company = rsp.data.License.RegCode.Company
@@ -187,9 +187,9 @@
this.expireTime = rsp.data.License.Expires
this.expired = rsp.data.Expired
if (this.expired) {
- this.tip = '鎺堟潈宸茶繃鏈�'
+ this.tip = this.$t('licence.expired')
} else {
- this.tip = '宸叉巿鏉�'
+ this.tip = this.$t('licence.authorized')
}
}
}
diff --git a/src/lang/en.js b/src/lang/en.js
new file mode 100644
index 0000000..e3fac98
--- /dev/null
+++ b/src/lang/en.js
@@ -0,0 +1,21 @@
+export default {
+ login:{
+ unauthorized:"Unauthorized",
+ authorized:"Authorized",
+ company:"Basic Technology",
+ aios:"Operating System"
+ },
+ button:{
+ login:"Login"
+ },
+ placeholder: {
+ enterUsername:"Please enter username",
+ enterPassword:"Please enter password",
+ },
+ licence:{
+ unauthorized:"unauthorized",
+ register:"sing up",
+ authorized:"authorized",
+ expired:"expired",
+ }
+}
\ No newline at end of file
diff --git a/src/lang/index.ts b/src/lang/index.ts
new file mode 100644
index 0000000..8b22950
--- /dev/null
+++ b/src/lang/index.ts
@@ -0,0 +1,43 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
+import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN' // element-ui lang
+import enLocale from './en'
+import zhLocale from './zh'
+
+Vue.use(VueI18n)
+
+const messages = {
+ en: {
+ ...enLocale,
+ ...elementEnLocale,
+ },
+ zh: {
+ ...zhLocale,
+ ...elementZhLocale,
+ },
+}
+export function getLanguage() {
+ const chooseLanguage = sessionStorage.getItem('language')
+ if (chooseLanguage) return chooseLanguage
+
+ // if has not choose language
+ const language = 'zh'
+
+ const locales = Object.keys(messages)
+ for (const locale of locales) {
+ if (language.indexOf(locale) > -1) {
+ return locale
+ }
+ }
+ return 'en'
+}
+const i18n = new VueI18n({
+ // set locale
+ // options: en | zh | es
+ locale: getLanguage(),
+ // set locale messages
+ messages,
+})
+
+export default i18n
diff --git a/src/lang/zh.js b/src/lang/zh.js
new file mode 100644
index 0000000..3dad09b
--- /dev/null
+++ b/src/lang/zh.js
@@ -0,0 +1,19 @@
+export default {
+ login:{
+ company:"鍖椾含璐濇�濈鎶�鏈湁闄愬叕鍙�",
+ aios:"浜哄伐鏅鸿兘鎿嶄綔绯荤粺"
+ },
+ button:{
+ login:"鐧诲綍"
+ },
+ placeholder: {
+ enterUsername:"璇疯緭鍏ョ敤鎴峰悕",
+ enterPassword:"璇疯緭鍏ュ瘑鐮�",
+ },
+ licence:{
+ unauthorized:"鏈巿鏉�",
+ register:"鏈巿鏉�, 鐐瑰嚮娉ㄥ唽",
+ authorized:"宸叉巿鏉�",
+ expired:"鎺堟潈杩囨湡",
+ }
+}
diff --git a/src/pages/index/App.vue b/src/pages/index/App.vue
index 2d1738b..2a3a431 100644
--- a/src/pages/index/App.vue
+++ b/src/pages/index/App.vue
@@ -3,6 +3,9 @@
<div class="web-site">
<a href="http://www.smartai.com" target="_blank">www.smartai.com</a>
</div>
+
+ <!-- 鎺堟潈淇℃伅 -->
+ <lang-select class="lang-select"/>
<licence />
<div class="right-bg" style>
<particle-network />
@@ -12,7 +15,7 @@
<img src="/images/login-logo.png" alt width="105px" height="105px" />
</div>
<div class="login-com">
- <span>鍖椾含璐濇�濈鎶�鏈湁闄愬叕鍙�</span>
+ <span>{{ $t('login.company') }}</span>
</div>
<div class="login-form">
<el-form
@@ -24,7 +27,7 @@
class="demo-ruleForm"
>
<el-form-item prop="loginName">
- <el-input v-model="user.loginName" style="width:280px" placeholder="璇疯緭鍏ョ敤鎴峰悕">
+ <el-input v-model="user.loginName" style="width:280px" :placeholder="$t('placeholder.enterUsername')">
<i slot="prefix" class="iconfont iconyonghu1"></i>
</el-input>
</el-form-item>
@@ -35,20 +38,20 @@
v-model="user.password"
autocomplete="off"
style="width:280px"
- placeholder="璇疯緭鍏ュ瘑鐮�"
+ :placeholder="$t('placeholder.enterPassword')"
>
<i slot="prefix" class="iconfont iconmima"></i>
</el-input>
</el-form-item>
<el-form-item>
- <el-button ref="submit" type="warning" @click="systemLogin()" style="width:280px">鐧诲綍</el-button>
+ <el-button ref="submit" type="warning" @click="systemLogin()" style="width:280px">{{ $t('button.login') }}</el-button>
</el-form-item>
</el-form>
</div>
<!-- <p class="gradient-text gradient-text-one">鈥斺�斺�� {{serverTitle || 'SmartAI 鈥� ReID'}} 鈥斺�斺��</p> -->
<p class="gradient-text gradient-text-one">
鈥斺��
- <b>SmartAI</b> 浜哄伐鏅鸿兘鎿嶄綔绯荤粺 鈥斺��
+ <b>SmartAI</b> {{ $t('login.aios') }} 鈥斺��
</p>
<p
class="gradient-text gradient-text-one"
@@ -59,9 +62,10 @@
</template>
<script>
-import { tologin, getLoginUserData, getServerName } from './api.ts'
+import { tologin, getLoginUserData, getServerName } from './api.ts';
import ParticleNetwork from './ParticleNetwork'
import Licence from '@/components/licence'
+import LangSelect from '@/components/langSelect'
import { getMenuListData } from "@/api/utils";
export default {
@@ -71,7 +75,16 @@
},
components: {
ParticleNetwork,
- Licence
+ Licence,
+ LangSelect
+ },
+ computed: {
+ rules() {
+ return {
+ loginName: [{ required: true, message: this.$t('placeholder.enterUsername'), trigger: 'change' } ],
+ password: [{ required: true, message: this.$t('placeholder.enterPassword'), trigger: 'change' }]
+ }
+ },
},
data: () => ({
serverTitle: "",
@@ -81,12 +94,7 @@
rememberMe: false
},
nullRule: {},
- rules: {
- loginName: [
- { required: true, message: '璇疯緭鍏ョ敤鎴峰悕', trigger: 'change' }
- ],
- password: [{ required: true, message: '璇疯緭鍏ュ瘑鐮�', trigger: 'change' }]
- },
+
loading: '',
vLoading: false,
currentHeight: 1057,
@@ -259,6 +267,13 @@
color: #6170e1;
letter-spacing: 6.15px;
}
+.lang-select {
+ float: right;
+ color: white !important;
+ font-size: 14px;
+ margin: 13px;
+ cursor: pointer;
+}
.left-bg {
position: absolute;
top: 29%;
diff --git a/src/pages/index/main.ts b/src/pages/index/main.ts
index 723ff6a..1a04451 100644
--- a/src/pages/index/main.ts
+++ b/src/pages/index/main.ts
@@ -1,13 +1,18 @@
-import Vue from 'vue';
-import App from './App.vue';
+import Vue from 'vue'
+import App from './App.vue'
-import ElementUI from 'element-ui';
-import 'element-ui/lib/theme-chalk/index.css';
-import "@/assets/css/element-variables.scss";
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+import '@/assets/css/element-variables.scss'
-Vue.use(ElementUI)
+import i18n from '@/lang'
+
+Vue.use(ElementUI, {
+ i18n: (key, value) => i18n.t(key, value),
+})
new Vue({
el: '#app',
- render: h => h(App)
+ i18n,
+ render: (h) => h(App),
})
diff --git a/src/pages/library/components/carList.vue b/src/pages/library/components/carList.vue
index 5076a5b..3470973 100644
--- a/src/pages/library/components/carList.vue
+++ b/src/pages/library/components/carList.vue
@@ -1515,8 +1515,8 @@
}
}
.plateAttach {
- width: calc(100% -40px);
- height: calc(100% -40px);
+ width: calc(100% - 40px);
+ height: calc(100% - 40px);
padding: 20px;
p {
margin-top: 20px;
diff --git a/vue.config.js b/vue.config.js
index f623575..850cc39 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -41,7 +41,7 @@
})
// const serverUrl = "http://58.118.225.79:41243" // 缇婁簲
-const serverUrl = "http://192.168.20.117:7009"
+const serverUrl = "http://192.168.20.189:7009"
module.exports = {
pages,
--
Gitblit v1.8.0