diff --git a/nezha-fronted/src/components/common/i18n.js b/nezha-fronted/src/components/common/i18n.js
index 9fb820f06..a9a8076e8 100644
--- a/nezha-fronted/src/components/common/i18n.js
+++ b/nezha-fronted/src/components/common/i18n.js
@@ -1,13 +1,28 @@
import Vue from 'vue'
import locale from 'element-ui/lib/locale'
import VueI18n from 'vue-i18n'
-import messages from './language'
+// import messages from './language'
Vue.use(VueI18n)
// 从localStorage获取语言选择。
const i18n = new VueI18n({
- locale: localStorage.getItem('nz-language') || 'en', // 初始未选择默认 en 英文
- messages
+ locale: localStorage.getItem('nz-language') || 'en' // 初始未选择默认 en 英文
+ // messages
})
locale.i18n((key, value) => i18n.t(key, value)) // 兼容element
+export function loadI18n (i18nData) {
+ if (i18nData) {
+ Object.keys(i18nData).forEach(lang => {
+ i18n.setLocaleMessage(lang, i18nData[lang])
+ })
+ } else {
+ i18nData = localStorage.getItem('nz-i18n-data')
+ if (i18nData) {
+ i18nData = JSON.parse(i18nData)
+ Object.keys(i18nData).forEach(lang => {
+ i18n.setLocaleMessage(lang, i18nData[lang])
+ })
+ }
+ }
+}
export default i18n
diff --git a/nezha-fronted/src/components/common/login.vue b/nezha-fronted/src/components/common/login.vue
index 5c1b97662..22fa1c8e3 100644
--- a/nezha-fronted/src/components/common/login.vue
+++ b/nezha-fronted/src/components/common/login.vue
@@ -7,12 +7,12 @@
-
+
-
+
{{$t('login.verifyTitle')}}
@@ -23,17 +23,8 @@
{{$t('login.verifyContent')}}
{{license.warnInfo}}
diff --git a/nezha-fronted/src/components/common/rightBox/profileBox.vue b/nezha-fronted/src/components/common/rightBox/profileBox.vue
index 734ff5c23..52c6adbed 100644
--- a/nezha-fronted/src/components/common/rightBox/profileBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/profileBox.vue
@@ -37,8 +37,8 @@
placeholder=""
popper-class="right-box-select-top prevent-clickoutside"
size="small">
-
-
+
+
@@ -71,17 +71,17 @@ export default {
type: Object
}
},
- computed: {},
+ computed: {
+ langList () {
+ return this.$store.getters.getLangList
+ }
+ },
mixins: [editRigthBox],
data () {
return {
url: 'sys/user/profile',
rightBox: { profile: { show: false } },
editProfile: {},
- languageList: [
- { value: 'en', label: 'English' },
- { value: 'cn', label: '简体中文' }
- ],
rules: {
name: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
diff --git a/nezha-fronted/src/components/layout/header.vue b/nezha-fronted/src/components/layout/header.vue
index 94177acac..cbffd7976 100644
--- a/nezha-fronted/src/components/layout/header.vue
+++ b/nezha-fronted/src/components/layout/header.vue
@@ -38,12 +38,15 @@
-
+
+ {{lang.name}}
+
+
@@ -209,6 +212,9 @@ export default {
route () {
return this.$route.path
},
+ langList () {
+ return this.$store.getters.getLangList
+ },
breadcrumb () {
if (this.$route.path === '/profile') {
return [
diff --git a/nezha-fronted/src/permission.js b/nezha-fronted/src/permission.js
index b8f89193e..f58a30f30 100644
--- a/nezha-fronted/src/permission.js
+++ b/nezha-fronted/src/permission.js
@@ -3,7 +3,7 @@ import store from './store'
import { get, post } from './http'
import ElementUI from 'element-ui'
import Vue from 'vue'
-import i18n from './components/common/i18n'
+import i18n, { loadI18n } from './components/common/i18n'
import VueResource from 'vue-resource'
Vue.use(VueResource)
@@ -26,6 +26,15 @@ router.beforeEach((to, from, next) => {
})
})
} else if (sessionStorage.getItem('nz-token')) {
+ // 从localStorage加载i18n
+ if (!store.getters.i18nIsReady) {
+ loadI18n()
+ const langList = localStorage.getItem('nz-language-list')
+ if (langList) {
+ store.commit('setLangList', JSON.parse(langList))
+ }
+ store.commit('i18nReady', true)
+ }
new Promise(resolve => {
if (store.getters.menuList.length === 0) {
const configUrl = 'static/config.json?Timestamp=' + new Date().getTime()
diff --git a/nezha-fronted/src/store/index.js b/nezha-fronted/src/store/index.js
index f399e6ee3..6094b6df7 100644
--- a/nezha-fronted/src/store/index.js
+++ b/nezha-fronted/src/store/index.js
@@ -35,7 +35,9 @@ const store = new Vuex.Store({
showTopoScreen: false,
logo: '',
isShrink: localStorage.getItem('nz-left-menu-shrink') == 'true',
- metricsList: []
+ metricsList: [],
+ langList: [],
+ i18nReady: false
},
getters: {
getLinkData (state) {
@@ -71,6 +73,12 @@ const store = new Vuex.Store({
getMetricsList (state) {
return state.metricsList
},
+ getLangList (state) {
+ return state.langList
+ },
+ i18nIsReady (state) {
+ return state.i18nReady
+ }
},
mutations: {
/* 监听对象变化，用于顶部菜单与底部内容的同步 */
@@ -153,6 +161,12 @@ const store = new Vuex.Store({
},
setMetricsList (state, metricsList) {
state.metricsList = [...metricsList]
+ },
+ setLangList (state, langList) {
+ state.langList = langList
+ },
+ i18nReady (state, ready) {
+ state.i18nReady = ready
}
},
actions: {
diff --git a/nezha-fronted/src/store/user.js b/nezha-fronted/src/store/user.js
index e2b95f5d1..4298e0368 100644
--- a/nezha-fronted/src/store/user.js
+++ b/nezha-fronted/src/store/user.js
@@ -1,8 +1,9 @@
-import { post, get } from '../http'
+import { post, get } from '@/http'
import router from '../router'
import bus from '../libs/bus'
-import { sortByOrderNum } from '../permission'
+import { sortByOrderNum } from '@/permission'
import moment from 'moment-timezone'
+import i18n, { loadI18n } from '@/components/common/i18n'
const user = {
state: {
@@ -74,6 +75,32 @@ const user = {
localStorage.setItem('nz-user-name', userList.name)
}
})
+ // 获取用户语言，存进localStorage
+ localStorage.setItem('nz-language', res.data.user.lang || 'en')
+ // 获取国际化内容
+ const getI18nData = new Promise(resolve => get('/sys/i18n/lang').then(response => {
+ if (response.code === 200) {
+ const i18nData = response.data
+ localStorage.setItem('nz-i18n-data', JSON.stringify(i18nData))
+ resolve(i18nData)
+ } else {
+ resolve()
+ }
+ }))
+ // 获取可选语言
+ const getLangList = new Promise(resolve => get('/sys/dict/all?type=lang').then(response => {
+ if (response.code === 200) {
+ const langList = response.data.map(lang => ({ name: lang.name, value: lang.value }))
+ store.commit('setLangList', langList)
+ localStorage.setItem('nz-language-list', JSON.stringify(langList))
+ }
+ resolve()
+ }))
+ Promise.all([getI18nData, getLangList]).then(response => {
+ console.info(response)
+ response[0] && loadI18n(response[0])
+ store.commit('i18nReady', true)
+ })
},
logoutSuccess (store, res) {
sessionStorage.removeItem('nz-username')