NEZ-1157 feat: 国际化内容改为后端控制

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 英文
+  locale: localStorage.getItem('nz-language') || 'en' // 初始未选择默认 en 英文
-  messages
+  // 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

nezha-fronted/src/components/common/login.vue

@@ -7,12 +7,12 @@
         <div class="login-label"></div>
         <div class="login-input" v-if="!verifyShow">
           <i class="nz-icon nz-icon-user"></i>
-          <input id="usernameInput" v-model="loginData.username" name="userName" autocomplete="on" :placeholder="$t('login.username')" @keydown.enter="login"></input>
+          <input id="usernameInput" v-model="loginData.username" autocomplete="on" name="userName" placeholder="Username" @keydown.enter="login"></input>
         </div>
         <div class="login-label"></div>
         <div class="login-input"  v-if="!verifyShow">
           <i class="nz-icon nz-icon-password"></i>
-          <input v-model="loginData.pin" type="password" name="password" autocomplete="on" :placeholder="$t('login.pin')" @keydown.enter="login"></input>
+          <input v-model="loginData.pin" autocomplete="on" name="password" placeholder="Password" type="password" @keydown.enter="login"></input>
         </div>
         <div class="login-label"  v-if="verifyShow">{{$t('login.verifyTitle')}}</div>
         <div class="login-input"  v-if="verifyShow">
@@ -23,17 +23,8 @@
           {{$t('login.verifyContent')}}
         </div>
         <div class="login-foot">
-          <button  v-if="!verifyShow" id="login" v-loading="loading" :class="{'nz-btn-disabled': !license.valid}" class="login-btn" @click="login">{{$t("login.login")}}</button>
+          <button  v-if="!verifyShow" id="login" v-loading="loading" :class="{'nz-btn-disabled': !license.valid}" class="login-btn" @click="login">Login</button>
           <button  v-if="verifyShow" id="verify" v-loading="loading" :class="{'nz-btn-disabled': !license.valid}" class="login-btn" @click="verify">{{$t("login.verify")}}</button>
-<!--          <div class="login-foot-lang" @click.stop="langListShow = !langListShow">-->
-<!--            <i v-if="lang == 'en'" class="nz-icon nz-icon-lang-en"></i>-->
-<!--            <i v-else-if="lang == 'cn'" class="nz-icon nz-icon-lang-zh"></i>-->
-<!--            <i class="nz-icon nz-icon-arrow-down"></i>-->
-<!--          </div>-->
-<!--          <div class="login-foot-lang-list" v-show="langListShow">-->
-<!--            <i v-if="lang != 'en'" @click="changeLang('en')" class="nz-icon nz-icon-lang-en"></i>-->
-<!--            <i v-if="lang != 'cn'" @click="changeLang('cn')" class="nz-icon nz-icon-lang-zh"></i>-->
-<!--          </div>-->
         </div>
         <div class="login-license">
           <div class="license-warn" v-if="license.warnInfo">{{license.warnInfo}}</div>

nezha-fronted/src/components/common/rightBox/profileBox.vue

@@ -37,8 +37,8 @@
                        placeholder=""
                        popper-class="right-box-select-top prevent-clickoutside"
                        size="small">
-              <template v-for="item in languageList">
+              <template v-for="item in langList">
-                <el-option :key="item.value" :label="item.label" :value="item.value"></el-option>
+                <el-option :key="item.value" :label="item.name" :value="item.value"></el-option>
               </template>
             </el-select>
           </el-form-item>
@@ -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' }

nezha-fronted/src/components/layout/header.vue

@@ -38,12 +38,15 @@
           <i class="nz-icon nz-icon-language-change"></i>
         </div>
         <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
-          <el-dropdown-item>
+          <el-dropdown-item v-for="lang in langList" :key="lang.value">
+            <div :style="language === lang.value ? 'color:#f90' : ''" @click="changeLocal(lang.value)"><i :class="`nz-icon-lang-${lang.value}`" class="nz-icon"></i>{{lang.name}}</div>
+          </el-dropdown-item>
+<!--          <el-dropdown-item>
             <div id="header-to-english" :style="language === 'en'?'color:#f90':''" @click="changeLocal('en')"><i class="nz-icon nz-icon-lang-en"></i>English</div>
           </el-dropdown-item>
           <el-dropdown-item>
             <div id="header-to-chinese" :style="language === 'cn'?'color:#f90':''" @click="changeLocal('cn')"><i class="nz-icon nz-icon-lang-zh"></i>简体中文</div>
-          </el-dropdown-item>
+          </el-dropdown-item>-->
         </el-dropdown-menu>
       </el-dropdown>
       <el-dropdown trigger="click">
@@ -209,6 +212,9 @@ export default {
     route () {
       return this.$route.path
     },
+    langList () {
+      return this.$store.getters.getLangList
+    },
     breadcrumb () {
       if (this.$route.path === '/profile') {
         return [

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()

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: {

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')