added Multi Language support

frontend/package.json

@@ -24,6 +24,7 @@
     "path": "^0.12.7",
     "vue": "^2.5.22",
     "vue-codemirror-lite": "^1.0.4",
+    "vue-i18n": "^8.9.0",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1"
   },

frontend/src/components/InfoView/TaskInfoView.vue

@@ -6,31 +6,31 @@
                ref="nodeForm"
                class="node-form"
                label-position="right">
-        <el-form-item label="Task ID">
+        <el-form-item :label="$t('Task ID')">
           <el-input v-model="taskForm._id" placeholder="Task ID" disabled></el-input>
         </el-form-item>
-        <el-form-item label="Status">
-          <el-tag type="success" v-if="taskForm.status === 'SUCCESS'">SUCCESS</el-tag>
-          <el-tag type="warning" v-else-if="taskForm.status === 'STARTED'">STARTED</el-tag>
-          <el-tag type="danger" v-else-if="taskForm.status === 'FAILURE'">FAILURE</el-tag>
-          <el-tag type="info" v-else>{{taskForm.status}}</el-tag>
+        <el-form-item :label="$t('Status')">
+          <el-tag type="success" v-if="taskForm.status === 'SUCCESS'">{{$t('SUCCESS')}}</el-tag>
+          <el-tag type="warning" v-else-if="taskForm.status === 'STARTED'">{{$t('STARTED')}}</el-tag>
+          <el-tag type="danger" v-else-if="taskForm.status === 'FAILURE'">{{$t('FAILURE')}}</el-tag>
+          <el-tag type="info" v-else>{{$t(taskForm.status)}}</el-tag>
         </el-form-item>
         <!--<el-form-item label="Spider Version">-->
         <!--<el-input v-model="taskForm.spider_version" placeholder="Spider Version" disabled></el-input>-->
         <!--</el-form-item>-->
-        <el-form-item label="Log File Path">
+        <el-form-item :label="$t('Log File Path')">
           <el-input v-model="taskForm.log_file_path" placeholder="Log File Path" disabled></el-input>
         </el-form-item>
-        <el-form-item label="Create Timestamp">
+        <el-form-item :label="$t('Create Timestamp')">
           <el-input v-model="taskForm.create_ts" placeholder="Create Timestamp" disabled></el-input>
         </el-form-item>
-        <el-form-item label="Finish Timestamp">
+        <el-form-item :label="$t('Finish Timestamp')">
           <el-input v-model="taskForm.finish_ts" placeholder="Finish Timestamp" disabled></el-input>
         </el-form-item>
-        <el-form-item label="Duration (sec)">
+        <el-form-item :label="$t('Duration (sec)')">
           <el-input v-model="taskForm.duration" placeholder="Duration" disabled></el-input>
         </el-form-item>
-        <el-form-item label="Error Message" v-if="taskForm.status === 'FAILURE'">
+        <el-form-item :label="$t('Error Message')" v-if="taskForm.status === 'FAILURE'">
           <div class="error-message">
             {{taskForm.result}}
           </div>

frontend/src/i18n/en.js

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

frontend/src/i18n/index.js

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

frontend/src/i18n/zh.js

@@ -0,0 +1,16 @@
+export default {
+  // 状态
+  PENDING: '待定',
+  STARTED: '已开始',
+  SUCCESS: '成功',
+  FAILURE: '错误',
+
+  // 任务
+  'Task ID': '任务ID',
+  'Status': '状态',
+  'Log File Path': '日志文件路径',
+  'Create Timestamp': '创建时间',
+  'Finish Timestamp': '完成时间',
+  'Duration (sec)': '用时(秒)',
+  'Error Message': '错误信息'
+}

frontend/src/main.js

@@ -20,6 +20,7 @@ import '@/icons' // icon
 import '@/permission' // permission control
 
 import request from './api/request'
+import i18n from './i18n'
 
 Vue.use(ElementUI, { locale })
 
@@ -29,6 +30,7 @@ Vue.prototype.$request = request
 
 const app = new Vue({
   el: '#app',
+  i18n,
   router,
   store,
   render: h => h(App)

frontend/src/store/index.js

@@ -9,6 +9,7 @@ import spider from './modules/spider'
 import deploy from './modules/deploy'
 import task from './modules/task'
 import file from './modules/file'
+import lang from './modules/lang'
 import getters from './getters'
 
 Vue.use(Vuex)
@@ -23,7 +24,8 @@ const store = new Vuex.Store({
     spider,
     deploy,
     task,
-    file
+    file,
+    lang
   },
   getters
 })

frontend/src/store/modules/lang.js

@@ -0,0 +1,31 @@
+const state = {
+  lang: window.localStorage.getItem('lang') || 'en'
+}
+
+const getters = {
+  lang (state) {
+    if (state.lang === 'en') {
+      return 'English'
+    } else if (state.lang === 'zh') {
+      return '中文'
+    } else {
+      return state.lang
+    }
+  }
+}
+
+const mutations = {
+  SET_LANG (state, value) {
+    state.lang = value
+  }
+}
+
+const actions = {}
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  mutations,
+  actions
+}

frontend/src/views/layout/components/Navbar.vue

@@ -1,24 +1,32 @@
 <template>
   <div class="navbar">
     <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
-    <breadcrumb/>
+    <breadcrumb class="breadcrumb"/>
     <el-dropdown class="avatar-container" trigger="click">
-      <div class="avatar-wrapper">
-        <img src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80"
-             class="user-avatar">
-        <i class="el-icon-caret-bottom"/>
-      </div>
+      <span class="el-dropdown-link">
+        {{$t('User')}}
+        <i class="el-icon-arrow-down el-icon--right"></i>
+      </span>
       <el-dropdown-menu slot="dropdown" class="user-dropdown">
-        <!--<router-link class="inlineBlock" to="/">-->
-        <!--<el-dropdown-item>-->
-        <!--Home-->
-        <!--</el-dropdown-item>-->
-        <!--</router-link>-->
-        <el-dropdown-item divided>
+        <el-dropdown-item>
           <span style="display:block;" @click="logout">LogOut</span>
         </el-dropdown-item>
       </el-dropdown-menu>
     </el-dropdown>
+    <el-dropdown class="lang-list" trigger="click">
+      <span class="el-dropdown-link">
+        {{$t($store.getters['lang/lang'])}}
+        <i class="el-icon-arrow-down el-icon--right"></i>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item @click.native="setLang('en')">
+          <span>English</span>
+        </el-dropdown-item>
+        <el-dropdown-item @click.native="setLang('zh')">
+          <span>中文</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
   </div>
 </template>
 
@@ -44,6 +52,11 @@ export default {
     },
     logout () {
       this.$router.push('/login')
+    },
+    setLang (lang) {
+      window.localStorage.setItem('lang', lang)
+      this.$i18n.locale = lang
+      this.$store.commit('lang/SET_LANG', lang)
     }
   }
 }
@@ -62,6 +75,15 @@ export default {
       padding: 0 10px;
     }
 
+    .lang-list {
+      cursor: pointer;
+      display: inline-block;
+      float: right;
+      margin-right: 35px;
+      /*position: absolute;*/
+      /*right: 80px;*/
+    }
+
     .screenfull {
       position: absolute;
       right: 90px;
@@ -70,30 +92,13 @@ export default {
     }
 
     .avatar-container {
+      cursor: pointer;
       height: 50px;
       display: inline-block;
-      position: absolute;
-      right: 35px;
-
-      .avatar-wrapper {
-        cursor: pointer;
-        margin-top: 5px;
-        position: relative;
-        line-height: initial;
-
-        .user-avatar {
-          width: 40px;
-          height: 40px;
-          border-radius: 10px;
-        }
-
-        .el-icon-caret-bottom {
-          position: absolute;
-          right: -20px;
-          top: 25px;
-          font-size: 12px;
-        }
-      }
+      float: right;
+      margin-right: 35px;
+      /*position: absolute;*/
+      /*right: 35px;*/
     }
   }
 </style>

frontend/yarn.lock

@@ -8433,6 +8433,11 @@ vue-hot-reload-api@^2.3.0:
   version "2.3.2"
   resolved "http://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.2.tgz#1fcc1495effe08a790909b46bf7b5c4cfeb6f21b"
 
+vue-i18n@^8.9.0:
+  version "8.9.0"
+  resolved "http://registry.npm.taobao.org/vue-i18n/download/vue-i18n-8.9.0.tgz#5f084001fe5b4c7ad8c00ee5f11396a88ff2e55b"
+  integrity sha1-XwhAAf5bTHrYwA7l8ROWqI/y5Vs=
+
 vue-jest@^3.0.2:
   version "3.0.3"
   resolved "http://registry.npm.taobao.org/vue-jest/download/vue-jest-3.0.3.tgz#80f664712f2678b1d8bb3af0f2c0bef5efa8de31"