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

2021-11-02 18:34:01 +08:00
parent 3094e94b0c
commit 17bdd7aba3
7 changed files with 90 additions and 28 deletions
--- 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
--- a/nezha-fronted/src/components/common/login.vue
+++ b/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>
--- 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">
-              <template v-for="item in languageList">
-                <el-option :key="item.value" :label="item.label" :value="item.value"></el-option>
+              <template v-for="item in langList">
+                <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' }
--- a/nezha-fronted/src/components/layout/header.vue
+++ b/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 [
--- 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()
--- 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: {
--- 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')