feat: Adding an Internationalization Instance

hippo4j-server/hippo4j-ui/src/layout/components/Navbar.vue

@@ -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>

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

@@ -5,8 +5,10 @@ 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: 'en', // 默认语种
+  locale: lang || 'en', // 默认语种
   messages: {
     zh: { ...zh, ...elZh }, // 中文包
     en: { ...en, ...elEn } // 英文包

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

@@ -1,3 +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',
+
+
+  }
   
 }

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

@@ -1,3 +1,28 @@
 export default {
+  // 系统
+  system: {
+    login: '登 陆',
+    username: '用户名',
+    password: '密码',
+    logOut: '注销'
+  },
 
+  // 公共
+  common: {
+    search: '搜索',
+    addition: '添加',
+    serialNumber: '序号',
+    operation: '操作',
+    edit: '编辑',
+    delete: '删除',
+    cancel: '取消',
+    confirm: '确认'
+  },
+
+  // 线程池
+  threadPool: {
+    tenant: '租户',
+    project: '项目',
+    threadPool: '线程池',
+  }
 }

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

@@ -26,6 +26,10 @@ export default {
       currentLang: ''
     }
   },
+  mounted() {
+    const lang = this.$i18n.locale
+    this.currentLang = lang || null
+  },
   computed: {
     currentLangName() {
       const langItem = this.langSelectList.find(item => item.lang === this.currentLang)
@@ -36,6 +40,8 @@ export default {
     // 选择语言
     selectedLang(value) {
       this.currentLang = value
+      this.$i18n.locale = value
+      localStorage.setItem('locale_lang', value)
     }
   }
 }
@@ -44,10 +50,13 @@ export default {
   .lang-drop-wrap{
     height: 100%;
     margin-right: 15px;
-    .dropdown-item-text{
-      &[data-active=true] {
-        color: var(--jjext-color-dropdown-text) !important;
-      }
+    .el-dropdown-link{
+      cursor: pointer;
+    }
+  }
+  .dropdown-item-text{
+    &[data-active=true] {
+      color: var(--jjext-color-dropdown-text) !important;
     }
   }
 </style>

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>

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"