Merge branch 'main' of http://182.92.203.107:3000/libingkun/skyeyesystem

frontend/Skyeye-sys-ui/package.json

@@ -32,6 +32,7 @@
     "sockjs-client": "^1.5.1",
     "stompjs": "^2.3.3",
     "vue": "^2.6.11",
+    "vue-i18n": "^8.28.2",
     "vue-router": "^3.1.5",
     "vuex": "^3.1.2",
     "vuex-persistedstate": "^4.1.0"

frontend/Skyeye-sys-ui/src/lang/en.js

@@ -0,0 +1,29 @@
+// English translations
+export default {
+  app: {
+    title: 'Skyeye Twin System',
+  },
+  header: {
+    login: 'Login',
+    logout: 'Logout',
+  },
+  login: {
+    username: 'Please enter username',
+    password: 'Please enter password',
+    title: 'Login',
+    submit: 'Log In',
+    validation: {
+      required: 'Cannot be empty',
+      passwordMin: 'Password must be at least 6 characters',
+    },
+  },
+  common: {
+    capsLockOn: 'Caps lock is On',
+  },
+  menu: {
+    device: 'Device Management',
+    task: 'Task Management',
+    picture: 'Picture Management',
+    user: 'User Management'
+  }
+}

frontend/Skyeye-sys-ui/src/lang/index.js

@@ -0,0 +1,21 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+import zh from './zh';
+import en from './en';
+Vue.use(VueI18n)
+
+// load locale messages
+const messages = {
+  zh,
+  en,
+}
+
+const locale = localStorage.getItem('locale') || 'zh'
+
+const i18n = new VueI18n({
+  locale,
+  fallbackLocale: 'zh',
+  messages,
+})
+
+export default i18n

frontend/Skyeye-sys-ui/src/lang/zh.js

@@ -0,0 +1,29 @@
+// Chinese translations
+export default {
+  app: {
+    title: '空域快视系统',
+  },
+  header: {
+    login: '登录',
+    logout: '退出登录',
+  },
+  login: {
+    username: '请输入用户名',
+    password: '请输入用户密码',
+    title: '登录',
+    submit: '登 录',
+    validation: {
+      required: '不能为空',
+      passwordMin: '密码不少于6位字符',
+    },
+  },
+  common: {
+    capsLockOn: '大写锁定已打开',
+  },
+  menu: {
+    device: '设备管理',
+    task: '任务管理',
+    picture: '图片管理',
+    user: '用户管理'
+  }
+}

frontend/Skyeye-sys-ui/src/layout/components/header-nav/index.js

@@ -18,7 +18,7 @@ export default {
     }
     const validatePassword = (rule, value, callback) => {
       if (value.length < 6) {
-        callback(new Error('密码不少于6位字符'))
+        callback(new Error(this.$t('login.validation.passwordMin')))
       } else {
         callback()
       }
@@ -51,7 +51,7 @@ export default {
       loginRules: {
         username: [
           // { required: true, trigger: 'blur', validator: validateUsername }
-          { required: true, message: '请输入用户名', trigger: 'blur' }
+          { required: true, message: this.$t('login.username'), trigger: 'blur' }
         ],
         password: [
           { required: true, trigger: 'blur', validator: validatePassword }
@@ -67,22 +67,22 @@ export default {
       activeIndex: '1',
       menus: [
         {
-          label: "设备管理",
+          key: 'device',
           value: '2',
           show: true
         },
         {
-          label: "任务管理",
+          key: 'task',
           value: '3',
           show: true
         },
         {
-          label: "图片管理",
+          key: 'picture',
           value: '4',
           show: true
         },
         {
-          label: "用户管理",
+          key: 'user',
           value: '5',
           show: true
         },
@@ -175,6 +175,10 @@ export default {
     handleSelect(key) {
       this.SET_MENUS_CHOSE(key)
     },
+    changeLocale(lang) {
+      this.$i18n.locale = lang
+      localStorage.setItem('locale', lang)
+    },
     goHome() {
       this.SET_MENUS_CHOSE('1')
     },

frontend/Skyeye-sys-ui/src/layout/components/header-nav/index.scss

@@ -25,7 +25,7 @@ $light_gray: #eee;
     align-items: center;
 
     .logo {
-      width: 250px;
+      width: 350px;
       height: 32px;
       display: flex;
       justify-content: flex-start;
@@ -129,7 +129,7 @@ $light_gray: #eee;
   }
 
   .header-nav-r {
-    width: 250px;
+    width: 350px;
     display: flex;
     align-items: center;
     justify-content: flex-end;

frontend/Skyeye-sys-ui/src/layout/components/header-nav/index.vue

@@ -4,7 +4,7 @@
       <div class="logo" @click="goHome">
         <img src="@/assets/img/common/logo3.png" alt />
         <!--span :class="tokenKey">灵动孪生智控系统</span-->
-        <span :class="tokenKey">空域快视系统</span>
+        <span :class="tokenKey">{{ $t('app.title') }}</span>
       </div>
     </div>
     <div class="header-nav-c">
@@ -19,14 +19,17 @@
             v-if="item.show"
             :index="item.value"
             :key="item.value"
-            >{{ item.label }}</el-menu-item
+            >{{ $t('menu.' + item.key) }}</el-menu-item
           >
         </template>
       </el-menu>
     </div>
     <ul class="header-nav-r">
+      <!-- <li class="lang-select">
+        <a @click.prevent="changeLocale('zh')">中文</a> | <a @click.prevent="changeLocale('en')">EN</a>
+      </li> -->
       <li v-if="roleIdsLocale.indexOf(2) !== -1">
-        <span class="user-login" @click="showLogin">登录</span>
+        <span class="user-login" @click="showLogin">{{ $t('header.login') }}</span>
       </li>
       <li v-if="roleIdsLocale.indexOf(2) === -1">
         <span class="user-photo">
@@ -42,14 +45,14 @@
             <!-- <el-dropdown-item command="modifyPassword"
               >修改密码</el-dropdown-item
             > -->
-            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
+            <el-dropdown-item command="logout">{{ $t('header.logout') }}</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </li>
     </ul>
 
     <dt-dialog
-      title="登录"
+      :title="$t('header.login')"
       :visible.sync="visible.login"
       top="20vh"
       width="22%"
@@ -70,7 +73,7 @@
             class="username"
             clearable
             v-model="loginForm.username"
-            placeholder="请输入用户名"
+            :placeholder="$t('login.username')"
             name="username"
             type="text"
             size="mini"
@@ -82,7 +85,7 @@
 
         <el-tooltip
           v-model="capsTooltip"
-          content="Caps lock is On"
+          :content="$t('common.capsLockOn')"
           placement="right"
           manual
         >
@@ -93,7 +96,7 @@
               class="password"
               v-model="loginForm.password"
               :type="passwordType"
-              placeholder="请输入用户密码"
+              :placeholder="$t('login.password')"
               name="password"
               tabindex="2"
               size="mini"
@@ -122,8 +125,7 @@
             size="mini"
             style="width: 100%"
             @click.native.prevent="handleLogin"
-            >登 录</el-button
+          >{{ $t('login.submit') }}</el-button>
-          >
         </el-form-item>
       </el-form>
     </dt-dialog>

frontend/Skyeye-sys-ui/src/main.js

@@ -4,6 +4,7 @@
  */
 import Vue from 'vue'
 import appLoader from './App.Loader';
+import i18n from '@/lang/index';
 (async () => {
   await appLoader.install()
   Promise.all([
@@ -17,6 +18,7 @@ import appLoader from './App.Loader';
       el: '#app',
       router,
       store,
+      i18n,
       render: h => h(App)
     })
   })

frontend/Skyeye-sys-ui/src/views/login/index.vue

@@ -12,7 +12,7 @@
       label-position="left"
     >
       <div class="title-container">
-        <h3 class="title">登录</h3>
+        <h3 class="title">{{ $t('login.title') }}</h3>
       </div>
 
       <el-form-item prop="username">
@@ -25,7 +25,7 @@
             ref="username"
             class="username"
             v-model="loginForm.username"
-            placeholder="请输入用户名"
+            :placeholder="$t('login.username')"
             name="username"
             type="text"
             tabindex="1"
@@ -36,7 +36,7 @@
 
       <el-tooltip
         v-model="capsTooltip"
-        content="Caps lock is On"
+        :content="$t('common.capsLockOn')"
         placement="right"
         manual
       >
@@ -52,7 +52,7 @@
               class="password"
               v-model="loginForm.password"
               :type="passwordType"
-              placeholder="请输入用户密码"
+              :placeholder="$t('login.password')"
               name="password"
               tabindex="2"
               autocomplete="on"
@@ -77,7 +77,7 @@
         type="primary"
         round
         @click.native.prevent="handleLogin"
-        >登 录</el-button
+        >{{ $t('login.submit') }}</el-button
       >
     </el-form>
   </div>
@@ -101,7 +101,7 @@ export default {
     }
     const validatePassword = (rule, value, callback) => {
       if (value.length < 6) {
-        callback(new Error('密码不少于6位字符'))
+        callback(new Error(this.$t('login.validation.passwordMin')))
       } else {
         callback()
       }
@@ -117,7 +117,7 @@ export default {
         ],
         password: [
           // { required: true, trigger: 'blur', validator: validatePassword }
-          { required: true, trigger: 'blur', message: '请输入密码' },
+          { required: true, trigger: 'blur', message: this.$t('login.validation.required') },
         ],
       },
       passwordType: 'password',