feat: Added Internationalization(vue-i18n)

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",

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">
@@ -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;
       }

hippo4j-server/hippo4j-ui/src/locale/config.js

@@ -0,0 +1,28 @@
+// 导入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'
+
+export const i18nConfig = {
+  locale: 'en', // 默认语种
+  messages: {
+    zh: { ...zh, ...elZh }, // 中文包
+    en: { ...en, ...elEn } // 英文包
+  }
+}
+
+
+export const langSelectList = () => {
+  return [
+    {
+      lang: 'zh',
+      name: '中文'
+    },
+    {
+      lang: 'en',
+      name: 'English'
+    }
+  ]
+}

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

hippo4j-server/hippo4j-ui/src/locale/lang/en.js

@@ -0,0 +1,3 @@
+export default {
+  
+}

hippo4j-server/hippo4j-ui/src/locale/lang/zh.js

@@ -0,0 +1,3 @@
+export default {
+
+}

hippo4j-server/hippo4j-ui/src/locale/langChange.vue

@@ -0,0 +1,53 @@
+<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: ''
+    }
+  },
+  computed: {
+    currentLangName() {
+      const langItem = this.langSelectList.find(item => item.lang === this.currentLang)
+      return langItem?.name || '选择语言'
+    }
+  },
+  methods: {
+    // 选择语言
+    selectedLang(value) {
+      this.currentLang = value
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .lang-drop-wrap{
+    height: 100%;
+    margin-right: 15px;
+    .dropdown-item-text{
+      &[data-active=true] {
+        color: var(--jjext-color-dropdown-text) !important;
+      }
+    }
+  }
+</style>

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),
 });

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