From a476d34da2dba1e297212b5cd99138b7439b7c47 Mon Sep 17 00:00:00 2001
From: PleasePerfunctory <47876885+PleasePerfunctory@users.noreply.github.com>
Date: Mon, 7 Nov 2022 18:53:57 +0800
Subject: [PATCH] New language switching function on the front page (#921)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: Added Internationalization(vue-i18n)

* feat: Adding an Internationalization Instance

Co-authored-by: 冯建军 <fengjj@data4truth.com>
---
 hippo4j-server/hippo4j-ui/package.json        |  3 +-
 .../src/layout/components/Navbar.vue          | 10 +--
 .../hippo4j-ui/src/locale/config.js           | 30 +++++++++
 hippo4j-server/hippo4j-ui/src/locale/index.js | 10 +++
 .../hippo4j-ui/src/locale/lang/en.js          | 31 ++++++++++
 .../hippo4j-ui/src/locale/lang/zh.js          | 28 +++++++++
 .../hippo4j-ui/src/locale/langChange.vue      | 62 +++++++++++++++++++
 hippo4j-server/hippo4j-ui/src/main.js         |  3 +
 .../src/views/hippo4j/threadpool/index.vue    | 22 +++----
 .../hippo4j-ui/src/views/login/index.vue      |  6 +-
 hippo4j-server/hippo4j-ui/vue.config.js       |  2 +-
 11 files changed, 187 insertions(+), 20 deletions(-)
 create mode 100644 hippo4j-server/hippo4j-ui/src/locale/config.js
 create mode 100644 hippo4j-server/hippo4j-ui/src/locale/index.js
 create mode 100644 hippo4j-server/hippo4j-ui/src/locale/lang/en.js
 create mode 100644 hippo4j-server/hippo4j-ui/src/locale/lang/zh.js
 create mode 100644 hippo4j-server/hippo4j-ui/src/locale/langChange.vue

diff --git a/hippo4j-server/hippo4j-ui/package.json b/hippo4j-server/hippo4j-ui/package.json
index bbe30325..9adc89b8 100755
--- a/hippo4j-server/hippo4j-ui/package.json
+++ b/hippo4j-server/hippo4j-ui/package.json
@@ -59,6 +59,7 @@
     "vue": "2.6.10",
     "vue-cookie": "^1.1.4",
     "vue-count-to": "1.0.13",
+    "vue-i18n": "^6.1.3",
     "vue-router": "3.0.2",
     "vue-splitpane": "1.0.4",
     "vue2-jsoneditor": "^1.0.6",
@@ -68,7 +69,7 @@
   "devDependencies": {
     "@babel/core": "7.0.0",
     "@babel/register": "7.0.0",
-    "@vue/cli-plugin-babel": "3.5.3",
+    "@vue/cli-plugin-babel": "~4",
     "@vue/cli-plugin-eslint": "3.5.1",
     "@vue/cli-plugin-unit-jest": "3.5.3",
     "@vue/cli-service": "3.5.3",
diff --git a/hippo4j-server/hippo4j-ui/src/layout/components/Navbar.vue b/hippo4j-server/hippo4j-ui/src/layout/components/Navbar.vue
index 612126a8..283431ff 100755
--- a/hippo4j-server/hippo4j-ui/src/layout/components/Navbar.vue
+++ b/hippo4j-server/hippo4j-ui/src/layout/components/Navbar.vue
@@ -18,7 +18,7 @@
         <!--        </el-tooltip>-->
 
       </template>
-
+      <langChange />
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
           <img src="../../../public/hippo4j.gif" class="user-avatar">
@@ -32,7 +32,7 @@
             <el-dropdown-item>Dashboard</el-dropdown-item>
           </router-link>
           <el-dropdown-item divided>
-            <span style="display:block;" @click="logout">Log Out</span>
+            <span style="display:block;" @click="logout">{{ $t('system.logOut') }}</span>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
@@ -45,12 +45,14 @@
   import Breadcrumb from '@/components/Breadcrumb'
   import Hamburger from '@/components/Hamburger'
   import ErrorLog from '@/components/ErrorLog'
+  import langChange from '@/locale/langChange'
 
   export default {
     components: {
       Breadcrumb,
       Hamburger,
-      ErrorLog
+      ErrorLog,
+      langChange
     },
     computed: {
       ...mapGetters([
@@ -106,7 +108,7 @@
       float: right;
       height: 100%;
       line-height: 50px;
-
+      display: flex;
       &:focus {
         outline: none;
       }
diff --git a/hippo4j-server/hippo4j-ui/src/locale/config.js b/hippo4j-server/hippo4j-ui/src/locale/config.js
new file mode 100644
index 00000000..3262ac6d
--- /dev/null
+++ b/hippo4j-server/hippo4j-ui/src/locale/config.js
@@ -0,0 +1,30 @@
+// 导入elementUi默认中英文语言包
+import elZh from 'element-ui/lib/locale/lang/zh-CN'
+import elEn from 'element-ui/lib/locale/lang/en'
+
+import zh from './lang/zh'
+import en from './lang/en'
+
+const lang = localStorage.getItem('locale_lang')
+
+export const i18nConfig = {
+  locale: lang || 'en', // 默认语种
+  messages: {
+    zh: { ...zh, ...elZh }, // 中文包
+    en: { ...en, ...elEn } // 英文包
+  }
+}
+
+
+export const langSelectList = () => {
+  return [
+    {
+      lang: 'zh',
+      name: '中文'
+    },
+    {
+      lang: 'en',
+      name: 'English'
+    }
+  ]
+}
diff --git a/hippo4j-server/hippo4j-ui/src/locale/index.js b/hippo4j-server/hippo4j-ui/src/locale/index.js
new file mode 100644
index 00000000..408134bc
--- /dev/null
+++ b/hippo4j-server/hippo4j-ui/src/locale/index.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+
+import { i18nConfig } from './config'
+
+Vue.use(VueI18n)
+
+const i18n = new VueI18n(i18nConfig)
+
+export default i18n
diff --git a/hippo4j-server/hippo4j-ui/src/locale/lang/en.js b/hippo4j-server/hippo4j-ui/src/locale/lang/en.js
new file mode 100644
index 00000000..f581c3bb
--- /dev/null
+++ b/hippo4j-server/hippo4j-ui/src/locale/lang/en.js
@@ -0,0 +1,31 @@
+export default {
+  // 系统
+  system: {
+    login: 'Login Form',
+    username: 'Username',
+    password: 'Password',
+    logOut: 'Log Out'
+  },
+
+  // 公共
+  common: {
+    search: 'Search',
+    addition: 'Addition',
+    serialNumber: 'Serial Number',
+    operation: 'Operation',
+    edit: 'Edit',
+    delete: 'Delete',
+    cancel: 'Cancel',
+    confirm: 'Confirm'
+  },
+
+  // 线程池
+  threadPool: {
+    tenant: 'Tenant',
+    project: 'Project',
+    threadPool: 'Thread Pool',
+
+
+  }
+  
+}
diff --git a/hippo4j-server/hippo4j-ui/src/locale/lang/zh.js b/hippo4j-server/hippo4j-ui/src/locale/lang/zh.js
new file mode 100644
index 00000000..f12d91c6
--- /dev/null
+++ b/hippo4j-server/hippo4j-ui/src/locale/lang/zh.js
@@ -0,0 +1,28 @@
+export default {
+  // 系统
+  system: {
+    login: '登 陆',
+    username: '用户名',
+    password: '密码',
+    logOut: '注销'
+  },
+
+  // 公共
+  common: {
+    search: '搜索',
+    addition: '添加',
+    serialNumber: '序号',
+    operation: '操作',
+    edit: '编辑',
+    delete: '删除',
+    cancel: '取消',
+    confirm: '确认'
+  },
+
+  // 线程池
+  threadPool: {
+    tenant: '租户',
+    project: '项目',
+    threadPool: '线程池',
+  }
+}
diff --git a/hippo4j-server/hippo4j-ui/src/locale/langChange.vue b/hippo4j-server/hippo4j-ui/src/locale/langChange.vue
new file mode 100644
index 00000000..c14dbe3c
--- /dev/null
+++ b/hippo4j-server/hippo4j-ui/src/locale/langChange.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="lang-drop-wrap">
+    <el-dropdown @command="selectedLang" trigger="click">
+      <span class="el-dropdown-link">
+        {{ currentLangName }}
+        <i class="el-icon-arrow-down el-icon--right"></i>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item
+          v-for="item in langSelectList"
+          :key="item.lang"
+          :command="item.lang"
+        >
+          <span class="dropdown-item-text" :data-active="item.lang === currentLang">{{ item.name }}</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+  </div>
+</template>
+<script>
+import { langSelectList } from './config'
+export default {
+  data() {
+    return {
+      langSelectList: langSelectList(),
+      currentLang: ''
+    }
+  },
+  mounted() {
+    const lang = this.$i18n.locale
+    this.currentLang = lang || null
+  },
+  computed: {
+    currentLangName() {
+      const langItem = this.langSelectList.find(item => item.lang === this.currentLang)
+      return langItem?.name || '选择语言'
+    }
+  },
+  methods: {
+    // 选择语言
+    selectedLang(value) {
+      this.currentLang = value
+      this.$i18n.locale = value
+      localStorage.setItem('locale_lang', value)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .lang-drop-wrap{
+    height: 100%;
+    margin-right: 15px;
+    .el-dropdown-link{
+      cursor: pointer;
+    }
+  }
+  .dropdown-item-text{
+    &[data-active=true] {
+      color: var(--jjext-color-dropdown-text) !important;
+    }
+  }
+</style>
diff --git a/hippo4j-server/hippo4j-ui/src/main.js b/hippo4j-server/hippo4j-ui/src/main.js
index 28d415d5..44f539b8 100755
--- a/hippo4j-server/hippo4j-ui/src/main.js
+++ b/hippo4j-server/hippo4j-ui/src/main.js
@@ -17,6 +17,7 @@ import './icons'; // icon
 import './permission'; // permission control
 // import './utils/error-log' // error log
 
+import i18n from '@/locale'
 import * as filters from './filters'; // global filters
 import echarts from 'echarts';
 Vue.prototype.$echarts = echarts;
@@ -25,6 +26,7 @@ Vue.prototype.$cookie = cookie;
 
 Vue.use(Element, {
   size: Cookies.get('size') || 'medium', // set element-ui default size
+  i18n: (key, value) => i18n.t(key, value)
 });
 
 // register global utility filters
@@ -38,5 +40,6 @@ new Vue({
   el: '#app',
   router,
   store,
+  i18n,
   render: (h) => h(App),
 });
diff --git a/hippo4j-server/hippo4j-ui/src/views/hippo4j/threadpool/index.vue b/hippo4j-server/hippo4j-ui/src/views/hippo4j/threadpool/index.vue
index 267cc30a..f6505f24 100755
--- a/hippo4j-server/hippo4j-ui/src/views/hippo4j/threadpool/index.vue
+++ b/hippo4j-server/hippo4j-ui/src/views/hippo4j/threadpool/index.vue
@@ -3,7 +3,7 @@
     <div class="filter-container">
       <el-select
         v-model="listQuery.tenantId"
-        placeholder="租户"
+        :placeholder="$t('threadPool.tenant')"
         style="width: 220px"
         filterable
         class="filter-item"
@@ -18,7 +18,7 @@
       </el-select>
       <el-select
         v-model="listQuery.itemId"
-        placeholder="项目"
+        :placeholder="$t('threadPool.project')"
         style="width: 220px"
         filterable
         class="filter-item"
@@ -33,7 +33,7 @@
       </el-select>
       <el-select
         v-model="listQuery.tpId"
-        placeholder="线程池"
+        :placeholder="$t('threadPool.threadPool')"
         style="width: 220px"
         filterable
         class="filter-item"
@@ -53,7 +53,7 @@
         icon="el-icon-search"
         @click="fetchData"
       >
-        搜索
+        {{ $t('common.search') }}
       </el-button>
       <el-button
         class="filter-item"
@@ -63,7 +63,7 @@
         @click="handleCreate"
         :disabled="isEditDisabled"
       >
-        添加
+        {{ $t('common.addition') }}
       </el-button>
     </div>
     <el-table
@@ -74,7 +74,7 @@
       fit
       highlight-current-row
     >
-      <el-table-column fixed label="序号" width="80">
+      <el-table-column fixed :label="$t('common.serialNumber')" width="80">
         <template slot-scope="scope">{{ scope.$index + 1 }}</template>
       </el-table-column>
       <el-table-column label="租户" width="150">
@@ -129,16 +129,16 @@
         <template slot-scope="scope">{{ scope.row.gmtModified }}</template>
       </el-table-column>
       <el-table-column
-        label="操作"
+        :label="$t('common.operation')"
         fixed="right"
         width="90"
         align="center"
         class-name="small-padding fixed-width"
       >
         <template slot-scope="{ row }">
-          <el-button type="text" size="small" @click="handleUpdate(row)"> 编辑 </el-button>
+          <el-button type="text" size="small" @click="handleUpdate(row)"> {{ $t('common.edit') }} </el-button>
           <el-button size="small" :disabled="isEditDisabled" type="text" @click="handleDelete(row)">
-            删除
+            {{ $t('common.delete') }}
           </el-button>
         </template>
       </el-table-column>
@@ -327,9 +327,9 @@
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogFormVisible = false"> 取消 </el-button>
+        <el-button @click="dialogFormVisible = false"> {{ $t('common.cancel') }} </el-button>
         <el-button type="primary" @click="dialogStatus === 'create' ? createData() : updateData()">
-          确认
+          {{ $t('common.confirm') }}
         </el-button>
       </div>
     </el-dialog>
diff --git a/hippo4j-server/hippo4j-ui/src/views/login/index.vue b/hippo4j-server/hippo4j-ui/src/views/login/index.vue
index 19fa52d5..7710cf18 100755
--- a/hippo4j-server/hippo4j-ui/src/views/login/index.vue
+++ b/hippo4j-server/hippo4j-ui/src/views/login/index.vue
@@ -9,7 +9,7 @@
       label-position="left"
     >
       <div class="title-container">
-        <h3 class="title">Login Form</h3>
+        <h3 class="title">{{ $t('system.login') }}</h3>
       </div>
 
       <el-form-item prop="username">
@@ -19,7 +19,7 @@
         <el-input
           ref="username"
           v-model="loginForm.username"
-          placeholder="Username"
+          :placeholder="$t('system.username')"
           name="username"
           type="text"
           tabindex="1"
@@ -37,7 +37,7 @@
             ref="password"
             v-model="loginForm.password"
             :type="passwordType"
-            placeholder="Password"
+            :placeholder="$t('system.password')"
             name="password"
             tabindex="2"
             autocomplete="on"
diff --git a/hippo4j-server/hippo4j-ui/vue.config.js b/hippo4j-server/hippo4j-ui/vue.config.js
index 8eff1b83..d54aa0c9 100755
--- a/hippo4j-server/hippo4j-ui/vue.config.js
+++ b/hippo4j-server/hippo4j-ui/vue.config.js
@@ -35,7 +35,7 @@ module.exports = {
     },
     proxy: {
       '/hippo4j/v1/cs': {
-        target: `http://127.0.0.1:6691/hippo4j/v1/cs`,
+        target: `http://console.hippo4j.cn:80/hippo4j/v1/cs`,
         changOrigin: true,
         secure: false,
         pathRewrite: {