jumpserver · BaiJiangJie · Jun 3, 2024 · Jun 3, 2024
diff --git a/ui/package.json b/ui/package.json
@@ -15,6 +15,7 @@
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/vue-fontawesome": "^2.0.10",
+    "axios": "^1.7.2",
     "core-js": "^3.26.1",
     "element-ui": "^2.15.12",
     "nora-zmodemjs": "^1.1.1",
@@ -26,6 +27,7 @@
     "vue-router": "^3.5.2",
     "vue-runtime-helpers": "^1.1.2",
     "vuejs-logger": "^1.5.5",
+    "vuex": "^4.1.0",
     "word-wrap": "1.2.5",
     "xterm": "^4.19.0",
     "xterm-addon-fit": "^0.5.0",

diff --git a/ui/src/components/Terminal.vue b/ui/src/components/Terminal.vue
@@ -2,7 +2,7 @@
   <div>
     <div id="term"></div>
     <el-dialog
-        :title="this.$t('Terminal.UploadTitle')"
+        :title="this.$t('UploadTitle')"
         :visible.sync="zmodeDialogVisible"
         :close-on-press-escape="false"
         :close-on-click-modal="false"
@@ -12,12 +12,12 @@
         <el-upload drag action="#" :auto-upload="false" :multiple="false" ref="upload"
                    :on-change="handleFileChange">
           <i class="el-icon-upload"></i>
-          <div class="el-upload__text">{{ this.$t('Terminal.UploadTips') }}</div>
+          <div class="el-upload__text">{{ this.$t('UploadTips') }}</div>
         </el-upload>
       </el-row>
       <div slot="footer">
-        <el-button @click="closeZmodemDialog">{{ this.$t('Terminal.Cancel') }}</el-button>
-        <el-button type="primary" @click="uploadSubmit">{{ this.$t('Terminal.Upload') }}</el-button>
+        <el-button @click="closeZmodemDialog">{{ this.$t('Cancel') }}</el-button>
+        <el-button type="primary" @click="uploadSubmit">{{ this.$t('Upload') }}</el-button>
       </div>
     </el-dialog>
   </div>
@@ -393,12 +393,12 @@ export default {
               this.zmodemStatus = true
               if (!this.enableZmodem) {
                 // 等待用户 rz sz 文件传输
-                this.$message(this.$t("Terminal.WaitFileTransfer"));
+                this.$message(this.$t("WaitFileTransfer"));
               }
               break
             case zmodemEnd:
               if (!this.enableZmodem && this.zmodemStatus) {
-                this.$message(this.$t("Terminal.EndFileTransfer"));
+                this.$message(this.$t("EndFileTransfer"));
                 this.term.write("\r\n")
               }
               this.zmodemStatus = false
@@ -428,10 +428,10 @@ export default {
           switch (eventName) {
             case 'sync_user_preference':
               if (errMsg === '' || errMsg === null) {
-                const successNotify = this.$t("Terminal.SyncUserPreferenceSuccess")
+                const successNotify = this.$t("SyncUserPreferenceSuccess")
                 this.$message.success(successNotify)
               } else {
-                const errNotify = `${this.$t("Terminal.SyncUserPreferenceFailed")}: ${errMsg}`
+                const errNotify = `${this.$t("SyncUserPreferenceFailed")}: ${errMsg}`
                 this.$message.error(errNotify);
               }
               break
@@ -554,7 +554,7 @@ export default {
         const buffer = [];
         const detail = xfer.get_details();
         if (detail.size >= MAX_TRANSFER_SIZE) {
-          const msg = this.$t("Terminal.ExceedTransferSize") + ": " + bytesHuman(MAX_TRANSFER_SIZE)
+          const msg = this.$t("ExceedTransferSize") + ": " + bytesHuman(MAX_TRANSFER_SIZE)
           this.$log.debug(msg)
           this.$message(msg)
           xfer.skip();
@@ -566,7 +566,7 @@ export default {
         });
         xfer.accept().then(() => {
           this.saveToDisk(xfer, buffer);
-          this.$message(this.$t("Terminal.DownloadSuccess") + " " + detail.name)
+          this.$message(this.$t("DownloadSuccess") + " " + detail.name)
           this.term.write("\r\n")
           this.zmodeSession.abort();
         }, console.error.bind(console));
@@ -591,15 +591,15 @@ export default {
       } else {
         percent = Math.round(offset / total * 100);
       }
-      let msg = this.$t('Terminal.Download') + ' ' + name + ': ' + bytesHuman(total) + ' ' + percent + "%"
+      let msg = this.$t('Download') + ' ' + name + ': ' + bytesHuman(total) + ' ' + percent + "%"
       this.term.write("\r" + msg);
     },
     updateSendProgress(xfer, percent) {
       let detail = xfer.get_details();
       let name = detail.name;
       let total = detail.size;
       percent = Math.round(percent);
-      let msg = this.$t('Terminal.Upload') + ' ' + name + ': ' + bytesHuman(total) + ' ' + percent + "%"
+      let msg = this.$t('Upload') + ' ' + name + ': ' + bytesHuman(total) + ' ' + percent + "%"
       this.term.write("\r" + msg);
     },
     handleSendSession(zsession) {
@@ -616,17 +616,17 @@ export default {
 
     uploadSubmit() {
       if (this.fileList.length === 0) {
-        this.$message(this.$t("Terminal.MustSelectOneFile"))
+        this.$message(this.$t("MustSelectOneFile"))
         return;
       }
       if (this.fileList.length !== 1) {
-        this.$message(this.$t("Terminal.MustOneFile"))
+        this.$message(this.$t("MustOneFile"))
         return;
       }
       const selectFile = this.fileList[0]
       if (selectFile.size >= MAX_TRANSFER_SIZE) {
         this.$log.debug(selectFile)
-        const msg = this.$t("Terminal.ExceedTransferSize") + ": " + bytesHuman(MAX_TRANSFER_SIZE)
+        const msg = this.$t("ExceedTransferSize") + ": " + bytesHuman(MAX_TRANSFER_SIZE)
         this.$message(msg)
         return;
       }
@@ -648,7 +648,7 @@ export default {
             },
             on_file_complete: (obj) => {
               this.$log.debug("file_complete", obj);
-              this.$message(this.$t('Terminal.UploadSuccess') + ' ' + obj.name)
+              this.$message(this.$t('UploadSuccess') + ' ' + obj.name)
             },
           }
       ).then(this.zmodeSession.close.bind(this.zmodeSession),

diff --git a/ui/src/components/ThemeConfig.vue b/ui/src/components/ThemeConfig.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-dialog
-      :title="this.$t('Terminal.Theme')"
+      :title="this.$t('Theme')"
       :visible.sync="iVisible"
       width="50%"
       class="theme-dialog"
@@ -10,12 +10,12 @@
       <div class="content">
         <el-form :inline="true" >
           <el-form-item style="width: 73%">
-            <el-select v-model="theme" :placeholder="this.$t('Terminal.SelectTheme')">
+            <el-select v-model="theme" :placeholder="this.$t('SelectTheme')">
               <el-option v-for="item in themes" :key="item" :label="item" :value="item"></el-option>
             </el-select>
           </el-form-item>
           <el-form-item style="width: 20%" v-loading="loading" >
-            <el-button class="sync-btn" @click="syncTheme">{{ this.$t('Terminal.Sync') }}</el-button>
+            <el-button class="sync-btn" @click="syncTheme">{{ this.$t('Sync') }}</el-button>
           </el-form-item>
         </el-form>
           <div v-if="Object.keys(colors).length > 0">

diff --git a/ui/src/guards.js b/ui/src/guards.js
@@ -0,0 +1,39 @@
+/* eslint-disable no-unused-vars */
+import router from './router'
+import store from '../store'
+
+function onI18nLoaded() {
+  return new Promise(resolve => {
+    const load = store.state.i18nLoaded
+    if (load) {
+      resolve()
+    }
+    const itv = setInterval(() => {
+      const load = store.state.i18nLoaded
+      if (load) {
+        clearInterval(itv)
+        resolve()
+      }
+    }, 100)
+  })
+}
+
+export async function startup({ to, from, next }) {
+  if (store.getters.inited) {
+    return true
+  }
+  await store.dispatch('init')
+  await onI18nLoaded()
+  return true
+}
+
+router.beforeEach(async(to, from, next) => {
+  try {
+    await startup({ to, from, next })
+    next()
+  } catch (e) {
+    console.log('Start service error: ' + e)
+  }
+})
+
+
diff --git a/ui/src/i18n/i18n.js b/ui/src/i18n/i18n.js
@@ -1,10 +1,13 @@
 // i18n.js
 import Vue from 'vue'
+import axios from 'axios'
+import store from '../../store'
 import locale from 'element-ui/lib/locale'
 import VueI18n from 'vue-i18n'
 import messages from './langs'
 import date from './date'
 import VueCookies from 'vue-cookies'
+import {BASE_URL} from "@/utils/common";
 
 Vue.use(VueI18n)
 
@@ -24,4 +27,23 @@ const i18n = new VueI18n({
 })
 locale.i18n((key, value) => i18n.t(key, value)) // 重点: 为了实现element插件的多语言切换
 
+
+
+axios.get(`${BASE_URL}/api/v1/settings/i18n/koko/?lang=${lang}&flat=0`)
+    .then((res) => {
+      if (res.status !== 200) {
+        return
+      }
+      const data = res.data
+      for (const key in data) {
+        // eslint-disable-next-line no-prototype-builtins
+        if (data.hasOwnProperty(key)) {
+          i18n.mergeLocaleMessage(key, data[key])
+        }
+      }
+    })
+    .finally(() => {
+      store.dispatch('setI18nLoaded', true)
+    })
+
 export default i18n
diff --git a/ui/src/i18n/langs/en.json b/ui/src/i18n/langs/en.json
@@ -1,56 +1,2 @@
 {
-  "Terminal": {
-    "ShareUser": "ForUser",
-    "ShareUserHelpText": "If left blank, everyone could join the session.",
-    "GetShareUser": "Enter username",
-    "UploadSuccess": "Upload success",
-    "MustSelectOneFile": "Must select one file",
-    "MustOneFile": "Only support to select one file",
-    "DownloadSuccess": "Download success",
-    "Download": "Download",
-    "Upload": "Upload",
-    "Cancel": "Cancel",
-    "UploadTitle": "file upload",
-    "UploadTips": "Drag file here or click to upload",
-    "Share": "Share",
-    "CopyShareURLSuccess": "Copy Share URL Success",
-    "ThemeConfig": "Theme",
-    "OnlineUsers": "Online Users",
-    "User": "User",
-    "VerifyCode": "Verify Code",
-    "LinkAddr": "Link",
-    "ExpiredTime": "Expired",
-    "SelectAction": "Select",
-    "CreateSuccess": "Success",
-    "CreateLink": "Create Share Link",
-    "CopyLink": "Copy Link Address and Code",
-    "NoLink": "No Link",
-    "ConfirmBtn": "Confirm",
-    "Settings": "Settings",
-    "Theme": "Theme",
-    "SelectTheme": "Select Theme",
-    "ThemeColors": "Theme Colors",
-    "ExceedTransferSize": "exceed max transfer size",
-    "WaitFileTransfer": "Wait file transfer to finish",
-    "EndFileTransfer": "File transfer end",
-    "ReadOnly": "Read-Only",
-    "Writable" : "Writable",
-    "ActionPerm": "Actions",
-    "Self": "Self",
-    "RemoveShareUser": "You have been removed from the shared session.",
-    "JoinShare": "Join Session",
-    "LeaveShare": "Leave Session",
-    "Remove": "Remove",
-    "RemoveShareUserConfirm": "Are you sure to remove the user from the shared session?",
-    "Minute": "Minute",
-    "Minutes": "Minutes",
-    "PauseSession" : "Pause Session",
-    "ResumeSession" : "Resume Session",
-    "SyncUserPreferenceSuccess": "Sync user preference success",
-    "SyncUserPreferenceFailed": "Sync user preference failed",
-    "Sync": "Sync"
-  },
-  "Message": {
-    "InputVerifyCode": "Input Verify Code"
-  }
 }
diff --git a/ui/src/i18n/langs/index.js b/ui/src/i18n/langs/index.js
@@ -1,21 +1,29 @@
 import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
+import zhTWLocale from 'element-ui/lib/locale/lang/zh-TW'
 import enLocale from 'element-ui/lib/locale/lang/en'
 import jaLocale from 'element-ui/lib/locale/lang/ja'
 import zh from './zh.json'
+import zhHant from './zh_Hant.json'
 import en from './en.json'
 import ja from './ja.json'
 
-export default {
-  zh: {
-    ...zhLocale,
-    ...zh
-  },
-  en: {
-    ...enLocale,
-    ...en
-  },
-  ja: {
-    ...jaLocale,
-    ...ja
-  }
+const messages = {
+    zh: {
+        ...zhLocale,
+        ...zh
+    },
+    zh_hant: {
+        ...zhTWLocale,
+        ...zhHant
+    },
+    en: {
+        ...enLocale,
+        ...en
+    },
+    ja: {
+        ...jaLocale,
+        ...ja
+    }
 }
+
+export default messages
diff --git a/ui/src/i18n/langs/ja.json b/ui/src/i18n/langs/ja.json
@@ -1,56 +1,2 @@
 {
-  "Terminal": {
-    "ShareUser": "共有ユーザー",
-    "ShareUserHelpText": "ユーザーが選択されていません。つまり、すべての人が参加できます。",
-    "GetShareUser": "ユーザー名の入力",
-    "UploadSuccess": "アップロード成功",
-    "MustSelectOneFile": "ファイルを選択する必要があります",
-    "MustOneFile": "ファイルを1つだけ選択できます",
-    "DownloadSuccess": "ダウンロードに成功しました",
-    "Download": "ダウンロード",
-    "Upload": "アップロード",
-    "Cancel": "キャンセル",
-    "UploadTitle": "ファイルのアップロード",
-    "UploadTips": "ファイルをここにドラッグするか、アップロードをクリックします",
-    "Share": "シェア",
-    "CopyShareURLSuccess": "レプリケーション共有住所成功",
-    "ThemeConfig": "テーマ",
-    "OnlineUsers": "オンラインスタッフ",
-    "User": "ユーザー",
-    "VerifyCode": "認証コード",
-    "LinkAddr": "リンク先",
-    "ExpiredTime": "有効期限",
-    "SelectAction": "選択してください",
-    "CreateSuccess": "作成に成功しました",
-    "CreateLink": "シェアリンクの作成",
-    "CopyLink": "リンクと認証コードのコピー",
-    "NoLink": "住所なし",
-    "ConfirmBtn": "確定",
-    "Settings": "設定",
-    "Theme": "テーマ",
-    "SelectTheme": "テーマを選択してください",
-    "ThemeColors": "テーマカラー",
-    "ExceedTransferSize": "最大転送サイズを超えています",
-    "WaitFileTransfer": "ファイル転送終了待ち",
-    "EndFileTransfer": "ファイル転送終了",
-    "ReadOnly": "読み取り専用",
-    "Writable" : "書き込み可能",
-    "ActionPerm": "アクション権限",
-    "Self": "自分",
-    "RemoveShareUser": "あなたはすでに共有セッションから削除されました」という意味です",
-    "JoinShare": "共有セッションに参加",
-    "LeaveShare": "共有セッションから退出",
-    "Remove": "削除",
-    "RemoveShareUserConfirm": "共有セッションから削除してもよろしいですか？",
-    "Minute": "分間",
-    "Minutes": "分間",
-    "PauseSession" : "セッションを一時停止",
-    "ResumeSession" : "セッションを再開",
-    "SyncUserPreferenceSuccess": "ユーザー設定の同期に成功しました",
-    "SyncUserPreferenceFailed": "ユーザー設定の同期に失敗しました",
-    "Sync": "同期"
-  },
-  "Message": {
-    "InputVerifyCode": "認証コードを入力してください"
-  }
 }