From 3af510a417e7eb8985b251864b3e5c09cbf27029 Mon Sep 17 00:00:00 2001
From: Marvin Zhang <tikazyq@gmail.com>
Date: Tue, 26 Mar 2019 19:33:03 +0800
Subject: [PATCH] updated Multi Language for a few pages

---
 frontend/src/components/FileList/FileList.vue |  2 +-
 .../src/components/InfoView/NodeInfoView.vue  | 18 ++---
 .../components/InfoView/SpiderInfoView.vue    | 44 +++++------
 .../components/Overview/SpiderOverview.vue    |  4 +-
 .../src/components/Overview/TaskOverview.vue  |  6 +-
 .../components/TableView/TaskTableView.vue    | 16 ++--
 frontend/src/i18n/zh.js                       | 73 ++++++++++++++++++-
 frontend/src/views/node/NodeDetail.vue        | 13 +++-
 frontend/src/views/spider/SpiderDetail.vue    | 11 ++-
 frontend/src/views/spider/SpiderList.vue      | 45 +++++-------
 frontend/src/views/task/TaskDetail.vue        |  6 +-
 frontend/src/views/task/TaskList.vue          | 36 ++++-----
 12 files changed, 174 insertions(+), 100 deletions(-)

diff --git a/frontend/src/components/FileList/FileList.vue b/frontend/src/components/FileList/FileList.vue
index f1850b21..20a43bec 100644
--- a/frontend/src/components/FileList/FileList.vue
+++ b/frontend/src/components/FileList/FileList.vue
@@ -17,7 +17,7 @@
       </div>
       <!--action-->
       <div class="action-container">
-        <el-button type="success" size="mini">Choose Folder</el-button>
+        <el-button type="success" size="mini">{{$t('Choose Folder')}}</el-button>
       </div>
 
     </div>
diff --git a/frontend/src/components/InfoView/NodeInfoView.vue b/frontend/src/components/InfoView/NodeInfoView.vue
index 109bb288..b784aec0 100644
--- a/frontend/src/components/InfoView/NodeInfoView.vue
+++ b/frontend/src/components/InfoView/NodeInfoView.vue
@@ -6,23 +6,23 @@
                ref="nodeForm"
                class="node-form"
                label-position="right">
-        <el-form-item label="Node Name">
-          <el-input v-model="nodeForm.name" placeholder="Node Name" disabled></el-input>
+        <el-form-item :label="$t('Node Name')">
+          <el-input v-model="nodeForm.name" :placeholder="$t('Node Name')" disabled></el-input>
         </el-form-item>
-        <el-form-item label="Node IP" prop="ip" required>
-          <el-input v-model="nodeForm.ip" placeholder="Node IP" :disabled="isView"></el-input>
+        <el-form-item :label="$t('Node IP')" prop="ip" required>
+          <el-input v-model="nodeForm.ip" :placeholder="$t('Node IP')" :disabled="isView"></el-input>
         </el-form-item>
-        <el-form-item label="Node Port" prop="port" required>
-          <el-input v-model="nodeForm.port" placeholder="Node Port" :disabled="isView"></el-input>
+        <el-form-item :label="$t('Node Port')" prop="port" required>
+          <el-input v-model="nodeForm.port" :placeholder="$t('Node Port')" :disabled="isView"></el-input>
         </el-form-item>
-        <el-form-item label="Description">
-          <el-input type="textarea" v-model="nodeForm.description" placeholder="Description" :disabled="isView">
+        <el-form-item :label="$t('Description')">
+          <el-input type="textarea" v-model="nodeForm.description" :placeholder="$t('Description')" :disabled="isView">
           </el-input>
         </el-form-item>
       </el-form>
     </el-row>
     <el-row class="button-container" v-if="!isView">
-      <el-button type="success" @click="onSave">Save</el-button>
+      <el-button type="success" @click="onSave">{{$t('Save')}}</el-button>
     </el-row>
   </div>
 </template>
diff --git a/frontend/src/components/InfoView/SpiderInfoView.vue b/frontend/src/components/InfoView/SpiderInfoView.vue
index 7c82a6d0..676890dd 100644
--- a/frontend/src/components/InfoView/SpiderInfoView.vue
+++ b/frontend/src/components/InfoView/SpiderInfoView.vue
@@ -6,64 +6,64 @@
                ref="spiderForm"
                class="spider-form"
                label-position="right">
-        <el-form-item label="Spider ID">
-          <el-input v-model="spiderForm._id" placeholder="Spider ID" disabled></el-input>
+        <el-form-item :label="$t('Spider ID')">
+          <el-input v-model="spiderForm._id" :placeholder="$t('Spider ID')" disabled></el-input>
         </el-form-item>
-        <el-form-item label="Spider Name">
-          <el-input v-model="spiderForm.name" placeholder="Spider Name" :disabled="isView"></el-input>
+        <el-form-item :label="$t('Spider Name')">
+          <el-input v-model="spiderForm.name" :placeholder="$t('Spider Name')" :disabled="isView"></el-input>
         </el-form-item>
-        <el-form-item label="Source Folder">
-          <el-input v-model="spiderForm.src" placeholder="Source Folder" disabled></el-input>
+        <el-form-item :label="$t('Source Folder')">
+          <el-input v-model="spiderForm.src" :placeholder="$t('Source Folder')" disabled></el-input>
         </el-form-item>
-        <el-form-item label="Execute Command" prop="cmd" required :inline-message="true">
-          <el-input v-model="spiderForm.cmd" placeholder="Execute Command"
+        <el-form-item :label="$t('Execute Command')" prop="cmd" required :inline-message="true">
+          <el-input v-model="spiderForm.cmd" :placeholder="$t('Execute Command')"
                     :disabled="isView"></el-input>
         </el-form-item>
-        <el-form-item label="Results Collection">
-          <el-input v-model="spiderForm.col" placeholder="Results Collection"
+        <el-form-item :label="$t('Results Collection')">
+          <el-input v-model="spiderForm.col" :placeholder="$t('Results Collection')"
                     :disabled="isView"></el-input>
         </el-form-item>
-        <el-form-item label="Spider Type">
-          <el-select v-model="spiderForm.type" placeholder="Select Spider Type" :disabled="isView" clearable>
+        <el-form-item :label="$t('Spider Type')">
+          <el-select v-model="spiderForm.type" :placeholder="$t('Spider Type')" :disabled="isView" clearable>
             <el-option value="scrapy" label="Scrapy"></el-option>
             <el-option value="pyspider" label="PySpider"></el-option>
             <el-option value="webmagic" label="WebMagic"></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="Language">
-          <el-select v-model="spiderForm.lang" placeholder="Select Language" :disabled="isView" clearable>
+        <el-form-item :label="$t('Language')">
+          <el-select v-model="spiderForm.lang" :placeholder="$t('Language')" :disabled="isView" clearable>
             <el-option value="python" label="Python"></el-option>
             <el-option value="javascript" label="JavaScript"></el-option>
             <el-option value="java" label="Java"></el-option>
             <el-option value="go" label="Go"></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="Schedule Enabled">
+        <el-form-item :label="$t('Schedule Enabled')">
           <el-switch v-model="spiderForm.cron_enabled" :disabled="isView">
           </el-switch>
         </el-form-item>
-        <el-form-item label="Schedule Cron" v-if="spiderForm.cron_enabled"
+        <el-form-item :label="$t('Schedule Cron')" v-if="spiderForm.cron_enabled"
                       prop="cron"
                       :rules="cronRules"
                       :inline-message="true">
           <template slot="label">
-            <el-tooltip content="Cron Format: [second] [minute] [hour] [day of month] [month] [day of week]"
+            <el-tooltip :content="$t('Cron Format: [second] [minute] [hour] [day of month] [month] [day of week]')"
                         placement="top">
               <span>
-                Schedule Cron
+                {{$t('Schedule Cron')}}
                 <i class="fa fa-exclamation-circle"></i>
               </span>
             </el-tooltip>
           </template>
-          <el-input v-model="spiderForm.cron" placeholder="Schedule Cron"
+          <el-input v-model="spiderForm.cron" :placeholder="$t('Schedule Cron')"
                     :disabled="isView"></el-input>
         </el-form-item>
       </el-form>
     </el-row>
     <el-row class="button-container" v-if="!isView">
-      <el-button type="danger" @click="onRun">Run</el-button>
-      <el-button type="primary" @click="onDeploy">Deploy</el-button>
-      <el-button type="success" @click="onSave">Save</el-button>
+      <el-button type="danger" @click="onRun">{{$t('Run')}}</el-button>
+      <el-button type="primary" @click="onDeploy">{{$t('Deploy')}}</el-button>
+      <el-button type="success" @click="onSave">{{$t('Save')}}</el-button>
     </el-row>
   </div>
 </template>
diff --git a/frontend/src/components/Overview/SpiderOverview.vue b/frontend/src/components/Overview/SpiderOverview.vue
index 166bd3ae..52c265a6 100644
--- a/frontend/src/components/Overview/SpiderOverview.vue
+++ b/frontend/src/components/Overview/SpiderOverview.vue
@@ -3,12 +3,12 @@
     <el-col :span="12">
       <!--last tasks-->
       <el-row>
-        <task-table-view title="Latest Tasks"/>
+        <task-table-view :title="$t('Latest Tasks')"/>
       </el-row>
 
       <!--last deploys-->
       <el-row v-if="false">
-        <deploy-table-view title="Latest Deploys"/>
+        <deploy-table-view :title="$t('Latest Deploys')"/>
       </el-row>
     </el-col>
 
diff --git a/frontend/src/components/Overview/TaskOverview.vue b/frontend/src/components/Overview/TaskOverview.vue
index 32a5fa00..d306bb41 100644
--- a/frontend/src/components/Overview/TaskOverview.vue
+++ b/frontend/src/components/Overview/TaskOverview.vue
@@ -2,7 +2,7 @@
   <el-row>
     <el-col :span="12" style="padding-right: 20px;">
       <el-row>
-        <h4 class="title">Task Info</h4>
+        <h4 class="title">{{$t('Task Info')}}</h4>
         <task-info-view/>
       </el-row>
       <el-row style="border-bottom:1px solid #e4e7ed;margin:0 0 20px 0;padding-bottom:20px;"/>
@@ -10,11 +10,11 @@
 
     <el-col :span="12">
       <el-row>
-        <h4 class="title spider-title" @click="onClickSpiderTitle">Spider Info</h4>
+        <h4 class="title spider-title" @click="onClickSpiderTitle">{{$t('Spider Info')}}</h4>
         <spider-info-view :is-view="true"/>
       </el-row>
       <el-row>
-        <h4 class="title node-title" @click="onClickNodeTitle">Node Info</h4>
+        <h4 class="title node-title" @click="onClickNodeTitle">{{$t('Node Info')}}</h4>
         <node-info-view :is-view="true"/>
       </el-row>
     </el-col>
diff --git a/frontend/src/components/TableView/TaskTableView.vue b/frontend/src/components/TableView/TaskTableView.vue
index 83ffc2a7..6325f863 100644
--- a/frontend/src/components/TableView/TaskTableView.vue
+++ b/frontend/src/components/TableView/TaskTableView.vue
@@ -5,28 +5,28 @@
       <el-button type="success" plain class="small-btn" size="mini" icon="fa fa-refresh" @click="onRefresh"></el-button>
     </el-row>
     <el-table border height="480px" :data="taskList">
-      <el-table-column property="node" label="Node" width="220" align="center">
+      <el-table-column property="node" :label="$t('Node')" width="220" align="center">
         <template slot-scope="scope">
           <a class="a-tag" @click="onClickNode(scope.row)">{{scope.row.node_id}}</a>
         </template>
       </el-table-column>
-      <el-table-column property="spider_name" label="Spider" width="80" align="center">
+      <el-table-column property="spider_name" :label="$t('Spider')" width="80" align="center">
         <template slot-scope="scope">
           <a class="a-tag" @click="onClickSpider(scope.row)">{{scope.row.spider_name}}</a>
         </template>
       </el-table-column>
-      <el-table-column label="Status"
+      <el-table-column :label="$t('Status')"
                        align="center"
                        width="100">
         <template slot-scope="scope">
-          <el-tag type="success" v-if="scope.row.status === 'SUCCESS'">SUCCESS</el-tag>
-          <el-tag type="warning" v-else-if="scope.row.status === 'STARTED'">STARTED</el-tag>
-          <el-tag type="danger" v-else-if="scope.row.status === 'FAILURE'">FAILURE</el-tag>
-          <el-tag type="info" v-else>{{scope.row['status']}}</el-tag>
+          <el-tag type="success" v-if="scope.row.status === 'SUCCESS'">{{$t('SUCCESS')}}</el-tag>
+          <el-tag type="warning" v-else-if="scope.row.status === 'STARTED'">{{$t('STARTED')}}</el-tag>
+          <el-tag type="danger" v-else-if="scope.row.status === 'FAILURE'">{{$t('FAILURE')}}</el-tag>
+          <el-tag type="info" v-else>{{$t(scope.row['status'])}}</el-tag>
         </template>
       </el-table-column>
       <!--<el-table-column property="create_ts" label="Create Time" width="auto" align="center"></el-table-column>-->
-      <el-table-column property="create_ts" label="Create Time" width="auto" align="center">
+      <el-table-column property="create_ts" :label="$t('Create Time')" width="auto" align="center">
         <template slot-scope="scope">
           <a href="javascript:" class="a-tag" @click="onClickTask(scope.row)">{{scope.row.create_ts}}</a>
         </template>
diff --git a/frontend/src/i18n/zh.js b/frontend/src/i18n/zh.js
index 89eb2e99..4a401437 100644
--- a/frontend/src/i18n/zh.js
+++ b/frontend/src/i18n/zh.js
@@ -1,16 +1,87 @@
 export default {
+  // 标签
+  Overview: '概览',
+  Files: '文件',
+  'Deployed Spiders': '已部署爬虫',
+  'Log': '日志',
+  'Results': '结果',
+
+  // 选择
+  Spider: '爬虫',
+
+  // 块标题
+  'Latest Tasks': '最近任务',
+  'Latest Deploys': '最近部署',
+
   // 状态
   PENDING: '待定',
   STARTED: '已开始',
   SUCCESS: '成功',
   FAILURE: '错误',
+  UNAVAILABLE: '未知',
+
+  // 操作
+  Run: '运行',
+  Deploy: '部署',
+  Save: '保存',
+  Cancel: '取消',
+  Import: '导入',
+  Submit: '提交',
+  'Import Spiders': '导入爬虫',
+  'Deploy All': '部署所有爬虫',
+  Refresh: '刷新',
+  View: '查看',
+  Edit: '编辑',
+  Remove: '删除',
+
+  // 节点
+  'Node Info': '节点信息',
+  'Node Name': '节点名称',
+  'Node IP': '节点IP',
+  'Node Port': '节点端口',
+  'Description': '描述',
 
   // 任务
+  'Task Info': '任务信息',
   'Task ID': '任务ID',
   'Status': '状态',
   'Log File Path': '日志文件路径',
   'Create Timestamp': '创建时间',
   'Finish Timestamp': '完成时间',
   'Duration (sec)': '用时(秒)',
-  'Error Message': '错误信息'
+  'Error Message': '错误信息',
+
+  // 任务列表
+  'Node': '节点',
+  'Create Time': '创建时间',
+  'Start Time': '开始时间',
+  'Finish Time': '结束时间',
+
+  // 爬虫
+  'Spider Info': '爬虫信息',
+  'Spider ID': '爬虫ID',
+  'Spider Name': '爬虫名称',
+  'Source Folder': '代码目录',
+  'Execute Command': '执行命令',
+  'Results Collection': '结果集',
+  'Spider Type': '爬虫类型',
+  'Language': '语言',
+  'Schedule Enabled': '是否开启定时任务',
+  'Schedule Cron': '定时任务',
+
+  // 爬虫列表
+  'Name': '名称',
+  'Last Run': '上次运行',
+  'Action': '操作',
+
+  // 文件
+  'Choose Folder': '选择文件',
+
+  // 导入
+  'Import Spider': '导入爬虫',
+  'Source URL': '来源URL',
+  'Source Type': '来源类别',
+
+  // 搜索
+  Search: '搜索',
 }
diff --git a/frontend/src/views/node/NodeDetail.vue b/frontend/src/views/node/NodeDetail.vue
index 56906b05..e95eb472 100644
--- a/frontend/src/views/node/NodeDetail.vue
+++ b/frontend/src/views/node/NodeDetail.vue
@@ -2,7 +2,7 @@
   <div class="app-container">
     <!--selector-->
     <div class="selector">
-      <label class="label">Node: </label>
+      <label class="label">{{$t('Node')}}: </label>
       <el-select v-model="nodeForm._id" @change="onNodeChange">
         <el-option v-for="op in nodeList" :key="op._id" :value="op._id" :label="op.name"></el-option>
       </el-select>
@@ -10,11 +10,11 @@
 
     <!--tabs-->
     <el-tabs v-model="activeTabName" @tab-click="onTabClick" type="card">
-      <el-tab-pane label="Overview" name="overview">
+      <el-tab-pane :label="$t('Overview')" name="overview">
         <node-overview></node-overview>
       </el-tab-pane>
-      <el-tab-pane label="Deployed Spiders" name="spiders" v-if="false">
-        Deployed Spiders
+      <el-tab-pane :label="$t('Deployed Spiders')" name="spiders" v-if="false">
+        {{$t('Deployed Spiders')}}
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -79,6 +79,11 @@ export default {
   .selector .el-select {
     padding-left: 10px;
   }
+
+  .label {
+    width: 100px;
+    text-align: right;
+  }
 </style>
 <style lang="scss">
   .selector {
diff --git a/frontend/src/views/spider/SpiderDetail.vue b/frontend/src/views/spider/SpiderDetail.vue
index dfd4f917..ff6a1333 100644
--- a/frontend/src/views/spider/SpiderDetail.vue
+++ b/frontend/src/views/spider/SpiderDetail.vue
@@ -2,7 +2,7 @@
   <div class="app-container">
     <!--selector-->
     <div class="selector">
-      <label class="label">Spider: </label>
+      <label class="label">{{$t('Spider')}}: </label>
       <el-select v-model="spiderForm._id" @change="onSpiderChange">
         <el-option v-for="op in spiderList" :key="op._id" :value="op._id" :label="op.name"></el-option>
       </el-select>
@@ -10,10 +10,10 @@
 
     <!--tabs-->
     <el-tabs v-model="activeTabName" @tab-click="onTabClick" type="card">
-      <el-tab-pane label="Overview" name="overview">
+      <el-tab-pane :label="$t('Overview')" name="overview">
         <spider-overview/>
       </el-tab-pane>
-      <el-tab-pane label="Files" name="files">
+      <el-tab-pane :label="$t('Files')" name="files">
         <file-list/>
       </el-tab-pane>
     </el-tabs>
@@ -91,4 +91,9 @@ export default {
   .selector .el-select {
     padding-left: 10px;
   }
+
+  .label {
+    text-align: right;
+    width: 80px;
+  }
 </style>
diff --git a/frontend/src/views/spider/SpiderList.vue b/frontend/src/views/spider/SpiderList.vue
index 543298bd..700dfc6b 100644
--- a/frontend/src/views/spider/SpiderList.vue
+++ b/frontend/src/views/spider/SpiderList.vue
@@ -2,7 +2,7 @@
   <div class="app-container">
     <!--add popup-->
     <el-dialog
-      title="Import Spider"
+      :title="$t('Import Spider')"
       :visible.sync="dialogVisible"
       width="60%"
       :before-close="onDialogClose">
@@ -10,10 +10,10 @@
                :model="importForm"
                ref="importForm"
                label-position="right">
-        <el-form-item label="Source URL" prop="url" required>
-          <el-input v-model="importForm.url" placeholder="Source URL"></el-input>
+        <el-form-item :label="$t('Source URL')" prop="url" required>
+          <el-input v-model="importForm.url" :placeholder="$t('Source URL')"></el-input>
         </el-form-item>
-        <el-form-item label="Source Type" prop="type" required>
+        <el-form-item :label="$t('Source Type')" prop="type" required>
           <el-select v-model="importForm.type" placeholder="Source Type">
             <el-option value="github" label="Github"></el-option>
             <el-option value="gitlab" label="Gitlab"></el-option>
@@ -22,38 +22,31 @@
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="onCancel">Cancel</el-button>
-        <el-button v-loading="importLoading" type="primary" @click="onImport">Import</el-button>
+        <el-button @click="onCancel">{{$t('Cancel')}}</el-button>
+        <el-button v-loading="importLoading" type="primary" @click="onImport">{{$t('Import')}}</el-button>
       </span>
     </el-dialog>
 
     <!--filter-->
     <div class="filter">
       <el-input prefix-icon="el-icon-search"
-                placeholder="Search"
+                :placeholder="$t('Search')"
                 class="filter-search"
                 v-model="filter.keyword"
                 @change="onSearch">
       </el-input>
       <div class="right">
         <el-button type="primary" icon="fa fa-cloud" @click="onDeployAll">
-          Deploy All
+          {{$t('Deploy All')}}
         </el-button>
         <el-button type="primary" icon="fa fa-download" @click="openImportDialog">
-          Import Spiders
+          {{$t('Import Spiders')}}
         </el-button>
         <el-button type="success"
                    icon="el-icon-refresh"
                    class="btn refresh"
                    @click="onRefresh">
-          Refresh
-        </el-button>
-        <el-button type="primary"
-                   v-if="false"
-                   icon="el-icon-plus"
-                   class="add"
-                   @click="onAdd">
-          Add Spider
+          {{$t('Refresh')}}
         </el-button>
       </div>
     </div>
@@ -66,7 +59,7 @@
       <template v-for="col in columns">
         <el-table-column v-if="col.name === 'type'"
                          :key="col.name"
-                         :label="col.label"
+                         :label="$t(col.label)"
                          :sortable="col.sortable"
                          align="center"
                          :width="col.width">
@@ -79,7 +72,7 @@
         </el-table-column>
         <el-table-column v-else-if="col.name === 'lang'"
                          :key="col.name"
-                         :label="col.label"
+                         :label="$t(col.label)"
                          :sortable="col.sortable"
                          align="center"
                          :width="col.width">
@@ -94,27 +87,27 @@
         <el-table-column v-else
                          :key="col.name"
                          :property="col.name"
-                         :label="col.label"
+                         :label="$t(col.label)"
                          :sortable="col.sortable"
                          align="center"
                          :width="col.width">
         </el-table-column>
       </template>
-      <el-table-column label="Action" align="center" width="250">
+      <el-table-column :label="$t('Action')" align="center" width="250">
         <template slot-scope="scope">
-          <el-tooltip content="View" placement="top">
+          <el-tooltip :content="$t('View')" placement="top">
             <el-button type="primary" icon="el-icon-search" size="mini" @click="onView(scope.row)"></el-button>
           </el-tooltip>
-          <el-tooltip content="Edit" placement="top">
+          <el-tooltip :content="$t('Edit')" placement="top">
             <el-button type="warning" icon="el-icon-edit" size="mini" @click="onView(scope.row)"></el-button>
           </el-tooltip>
-          <el-tooltip content="Remove" placement="top">
+          <el-tooltip :content="$t('Remove')" placement="top">
             <el-button type="danger" icon="el-icon-delete" size="mini" @click="onRemove(scope.row)"></el-button>
           </el-tooltip>
-          <el-tooltip content="Deploy" placement="top">
+          <el-tooltip :content="$t('Deploy')" placement="top">
             <el-button type="primary" icon="fa fa-cloud" size="mini" @click="onDeploy(scope.row)"></el-button>
           </el-tooltip>
-          <el-tooltip content="Run" placement="top">
+          <el-tooltip :content="$t('Run')" placement="top">
             <el-button type="success" icon="fa fa-bug" size="mini" @click="onCrawl(scope.row)"></el-button>
           </el-tooltip>
         </template>
diff --git a/frontend/src/views/task/TaskDetail.vue b/frontend/src/views/task/TaskDetail.vue
index c4968ce4..d9e89826 100644
--- a/frontend/src/views/task/TaskDetail.vue
+++ b/frontend/src/views/task/TaskDetail.vue
@@ -2,17 +2,17 @@
   <div class="app-container">
     <!--tabs-->
     <el-tabs v-model="activeTabName" @tab-click="onTabClick" type="card">
-      <el-tab-pane label="Overview" name="overview">
+      <el-tab-pane :label="$t('Overview')" name="overview">
         <task-overview/>
       </el-tab-pane>
-      <el-tab-pane label="Log" name="log">
+      <el-tab-pane :label="$t('Log')" name="log">
         <div class="log-view">
           <pre>
             {{taskLog}}
           </pre>
         </div>
       </el-tab-pane>
-      <el-tab-pane label="Results" name="results">
+      <el-tab-pane :label="$t('Results')" name="results">
         <general-table-view :data="taskResultsData"
                             :columns="taskResultsColumns"
                             :page-num="resultsPageNum"
diff --git a/frontend/src/views/task/TaskList.vue b/frontend/src/views/task/TaskList.vue
index 94899d6c..49b93458 100644
--- a/frontend/src/views/task/TaskList.vue
+++ b/frontend/src/views/task/TaskList.vue
@@ -3,7 +3,7 @@
     <!--filter-->
     <div class="filter">
       <el-input prefix-icon="el-icon-search"
-                placeholder="Search"
+                :placeholder="$t('Search')"
                 class="filter-search"
                 v-model="filter.keyword"
                 @change="onSearch">
@@ -13,7 +13,7 @@
                    icon="el-icon-refresh"
                    class="refresh"
                    @click="onRefresh">
-          Refresh
+          {{$t('Refresh')}}
         </el-button>
       </div>
     </div>
@@ -26,7 +26,7 @@
       <template v-for="col in columns">
         <el-table-column v-if="col.name === 'spider_name'"
                          :key="col.name"
-                         :label="col.label"
+                         :label="$t(col.label)"
                          :sortable="col.sortable"
                          align="center"
                          :width="col.width">
@@ -36,7 +36,7 @@
         </el-table-column>
         <el-table-column v-else-if="col.name === 'node_id'"
                          :key="col.name"
-                         :label="col.label"
+                         :label="$t(col.label)"
                          :sortable="col.sortable"
                          align="center"
                          :width="col.width">
@@ -46,29 +46,29 @@
         </el-table-column>
         <el-table-column v-else-if="col.name === 'status'"
                          :key="col.name"
-                         :label="col.label"
+                         :label="$t(col.label)"
                          :sortable="col.sortable"
                          align="center"
                          :width="col.width">
           <template slot-scope="scope">
-            <el-tag type="success" v-if="scope.row.status === 'SUCCESS'">SUCCESS</el-tag>
-            <el-tag type="warning" v-else-if="scope.row.status === 'STARTED'">STARTED</el-tag>
-            <el-tag type="danger" v-else-if="scope.row.status === 'FAILURE'">FAILURE</el-tag>
-            <el-tag type="info" v-else>{{scope.row[col.name]}}</el-tag>
+            <el-tag type="success" v-if="scope.row.status === 'SUCCESS'">{{$t('SUCCESS')}}</el-tag>
+            <el-tag type="warning" v-else-if="scope.row.status === 'STARTED'">{{$t('STARTED')}}</el-tag>
+            <el-tag type="danger" v-else-if="scope.row.status === 'FAILURE'">{{$t('FAILURE')}}</el-tag>
+            <el-tag type="info" v-else>{{$t(scope.row[col.name])}}</el-tag>
           </template>
         </el-table-column>
         <el-table-column v-else
                          :key="col.name"
                          :property="col.name"
-                         :label="col.label"
+                         :label="$t(col.label)"
                          :sortable="col.sortable"
                          align="center"
                          :width="col.width">
         </el-table-column>
       </template>
-      <el-table-column label="Action" align="center" width="auto">
+      <el-table-column :label="$t('Action')" align="center" width="auto">
         <template slot-scope="scope">
-          <el-tooltip content="View" placement="top">
+          <el-tooltip :content="$t('View')" placement="top">
             <el-button type="primary" icon="el-icon-search" size="mini" @click="onView(scope.row)"></el-button>
           </el-tooltip>
         </template>
@@ -150,12 +150,12 @@ export default {
           }
           return false
         })
-        // .filter((d, index) => {
-        //   // pagination
-        //   const pageNum = this.pageNum
-        //   const pageSize = this.pageSize
-        //   return (pageSize * (pageNum - 1) <= index) && (index < pageSize * pageNum)
-        // })
+      // .filter((d, index) => {
+      //   // pagination
+      //   const pageNum = this.pageNum
+      //   const pageSize = this.pageSize
+      //   return (pageSize * (pageNum - 1) <= index) && (index < pageSize * pageNum)
+      // })
     }
   },
   methods: {