updated Multi Language for a few pages

frontend/src/components/Breadcrumb/index.vue

@@ -3,8 +3,8 @@
     <transition-group name="breadcrumb">
       <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
         <span v-if="item.redirect==='noredirect'||index==levelList.length-1"
-              class="no-redirect">{{ item.meta.title }}</span>
-        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
+              class="no-redirect">{{$t(item.meta.title) }}</span>
+        <a v-else @click.prevent="handleLink(item)">{{ $t(item.meta.title) }}</a>
       </el-breadcrumb-item>
     </transition-group>
   </el-breadcrumb>

frontend/src/components/InfoView/NodeInfoView.vue

@@ -51,7 +51,7 @@ export default {
         if (valid) {
           this.$store.dispatch('node/editNode')
             .then(() => {
-              this.$message.success('Node has been saved successfully')
+              this.$message.success(this.$t('Node info has been saved successfully'))
             })
         }
       })

frontend/src/components/InfoView/SpiderInfoView.vue

@@ -116,14 +116,14 @@ export default {
       const row = this.spiderForm
       this.$refs['spiderForm'].validate(res => {
         if (res) {
-          this.$confirm('Are you sure to run this spider?', 'Notice', {
-            confirmButtonText: 'Confirm',
-            cancelButtonText: 'Cancel'
+          this.$confirm(this.$t('Are you sure to run this spider?'), this.$t('Notification'), {
+            confirmButtonText: this.$t('Confirm'),
+            cancelButtonText: this.$t('Cancel')
           })
             .then(() => {
               this.$store.dispatch('spider/crawlSpider', row._id)
                 .then(() => {
-                  this.$message.success(`Running spider "${row._id}" has been scheduled`)
+                  this.$message.success(this.$t(`Spider task has been scheduled`))
                 })
             })
         }
@@ -133,14 +133,14 @@ export default {
       const row = this.spiderForm
       this.$refs['spiderForm'].validate(res => {
         if (res) {
-          this.$confirm('Are you sure to deploy this spider?', 'Notice', {
-            confirmButtonText: 'Confirm',
-            cancelButtonText: 'Cancel'
+          this.$confirm(this.$t('Are you sure to deploy this spider?'), this.$t('Notification'), {
+            confirmButtonText: this.$t('Confirm'),
+            cancelButtonText: this.$t('Cancel')
           })
             .then(() => {
               this.$store.dispatch('spider/deploySpider', row._id)
                 .then(() => {
-                  this.$message.success(`Spider "${row._id}" has been deployed`)
+                  this.$message.success(this.$t(`Spider has been deployed`))
                 })
             })
         }
@@ -151,7 +151,7 @@ export default {
         if (res) {
           this.$store.dispatch('spider/editSpider')
             .then(() => {
-              this.$message.success('Spider info has been saved successfully')
+              this.$message.success(this.$t('Spider info has been saved successfully'))
             })
             .catch(error => {
               this.$message.error(error)

frontend/src/components/Overview/NodeOverview.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>
 

frontend/src/i18n/zh.js

@@ -1,4 +1,15 @@
 export default {
+  // 菜单
+  'Home': '主页',
+  'Nodes': '节点',
+  'Node Detail': '节点详情',
+  'Spiders': '爬虫',
+  'Spider Detail': '爬虫详情',
+  'Task': '任务',
+  'Tasks': '任务',
+  'Task Detail': '任务详情',
+  'Deploys': '部署',
+
   // 标签
   Overview: '概览',
   Files: '文件',
@@ -33,6 +44,13 @@ export default {
   View: '查看',
   Edit: '编辑',
   Remove: '删除',
+  Confirm: '确认',
+
+  // 主页
+  'Total Tasks': '总任务数',
+  'Active Nodes': '在线节点',
+  'Total Deploys': '总部署数',
+  'Daily New Tasks': '每日新增任务数',
 
   // 节点
   'Node Info': '节点信息',
@@ -41,21 +59,14 @@ export default {
   'Node Port': '节点端口',
   'Description': '描述',
 
-  // 任务
-  'Task Info': '任务信息',
-  'Task ID': '任务ID',
-  'Status': '状态',
-  'Log File Path': '日志文件路径',
-  'Create Timestamp': '创建时间',
-  'Finish Timestamp': '完成时间',
-  'Duration (sec)': '用时(秒)',
-  'Error Message': '错误信息',
+  // 节点列表
+  'IP': 'IP地址',
+  'Port': '端口',
 
-  // 任务列表
-  'Node': '节点',
-  'Create Time': '创建时间',
-  'Start Time': '开始时间',
-  'Finish Time': '结束时间',
+  // 节点状态
+  Online: '在线',
+  Offline: '在线',
+  Unavailable: '未知',
 
   // 爬虫
   'Spider Info': '爬虫信息',
@@ -74,6 +85,25 @@ export default {
   'Last Run': '上次运行',
   'Action': '操作',
 
+  // 任务
+  'Task Info': '任务信息',
+  'Task ID': '任务ID',
+  'Status': '状态',
+  'Log File Path': '日志文件路径',
+  'Create Timestamp': '创建时间',
+  'Finish Timestamp': '完成时间',
+  'Duration (sec)': '用时(秒)',
+  'Error Message': '错误信息',
+
+  // 任务列表
+  'Node': '节点',
+  'Create Time': '创建时间',
+  'Start Time': '开始时间',
+  'Finish Time': '结束时间',
+
+  // 部署
+  'Time': '时间',
+
   // 文件
   'Choose Folder': '选择文件',
 
@@ -84,4 +114,17 @@ export default {
 
   // 搜索
   Search: '搜索',
+
+  // 下拉框
+  User: '用户',
+  Logout: '退出登录',
+
+  // 弹出框
+  Notification: '提示',
+  'Are you sure to delete this node?': '你确定要删除该节点?',
+  'Are you sure to run this spider?': '你确定要运行该爬虫?',
+  'Node info has been saved successfully': '节点信息已成功保存',
+  'Are you sure to deploy this spider?': '你确定要部署该爬虫?',
+  'Are you sure to delete this spider?': '你确定要删除该爬虫?',
+  'Spider info has been saved successfully': '爬虫信息已成功保存',
 }

frontend/src/views/deploy/DeployList.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">
@@ -47,15 +47,15 @@
         <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="160">
+      <el-table-column :label="$t('Action')" align="center" width="160">
         <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>

frontend/src/views/home/Home.vue

@@ -9,7 +9,7 @@
             </el-col>
             <el-col :span="18" class="text-col">
               <el-row>
-                <label class="label">{{m.label}}</label>
+                <label class="label">{{$t(m.label)}}</label>
               </el-row>
               <el-row>
                 <div class="value">{{overviewStats[m.name]}}</div>
@@ -21,7 +21,7 @@
     </el-row>
     <el-row>
       <el-card shadow="hover">
-        <h4 class="title">Daily New Tasks</h4>
+        <h4 class="title">{{$t('Daily New Tasks')}}</h4>
         <div id="echarts-daily-tasks" class="echarts-box"></div>
       </el-card>
     </el-row>

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

@@ -9,7 +9,7 @@
       </span>
       <el-dropdown-menu slot="dropdown" class="user-dropdown">
         <el-dropdown-item>
-          <span style="display:block;" @click="logout">LogOut</span>
+          <span style="display:block;" @click="logout">{{$t('Logout')}}</span>
         </el-dropdown-item>
       </el-dropdown-menu>
     </el-dropdown>

frontend/src/views/layout/components/Sidebar/SidebarItem.vue

@@ -6,14 +6,14 @@
       <app-link :to="resolvePath(onlyOneChild.path)">
         <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
           <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon||item.meta.icon"
-                :title="onlyOneChild.meta.title"/>
+                :title="$t(onlyOneChild.meta.title)"/>
         </el-menu-item>
       </app-link>
     </template>
 
     <el-submenu v-else :index="resolvePath(item.path)">
       <template slot="title">
-        <item v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title"/>
+        <item v-if="item.meta" :icon="item.meta.icon" :title="$t(item.meta.title)"/>
       </template>
 
       <template v-for="child in item.children">
@@ -26,7 +26,7 @@
             class="nest-menu"/>
         <app-link v-else :to="resolvePath(child.path)" :key="child.name">
           <el-menu-item :index="resolvePath(child.path)">
-            <item v-if="child.meta" :icon="child.meta.icon" :title="child.meta.title"/>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="$t(child.meta.title)"/>
           </el-menu-item>
         </app-link>
       </template>

frontend/src/views/node/NodeList.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,34 +26,34 @@
       <template v-for="col in columns">
         <el-table-column v-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="info" v-if="scope.row.status === 'offline'">Offline</el-tag>
-            <el-tag type="success" v-else-if="scope.row.status === 'online'">Online</el-tag>
-            <el-tag type="danger" v-else>Unavailable</el-tag>
+            <el-tag type="info" v-if="scope.row.status === 'offline'">{{$t('Offline')}}</el-tag>
+            <el-tag type="success" v-else-if="scope.row.status === 'online'">{{$t('Online')}}</el-tag>
+            <el-tag type="danger" v-else>{{$t('Unavailable')}}</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="160">
+      <el-table-column :label="$t('Action')" align="center" width="160">
         <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="Edit" 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>
         </template>
@@ -165,9 +165,9 @@ export default {
       this.dialogVisible = true
     },
     onRemove (row) {
-      this.$confirm('Are you sure to delete this node?', 'Notification', {
-        confirmButtonText: 'Confirm',
-        cancelButtonText: 'Cancel',
+      this.$confirm(this.$t('Are you sure to delete this node?'), this.$t('Notification'), {
+        confirmButtonText: this.$t('Confirm'),
+        cancelButtonText: this.$t('Cancel'),
         type: 'warning'
       }).then(() => {
         this.$store.dispatch('node/deleteNode', row._id)

frontend/src/views/result/ResultList.vue

@@ -228,9 +228,9 @@ export default {
       this.dialogVisible = true
     },
     onRemove (row) {
-      this.$confirm('Are you sure to delete this spider?', 'Notification', {
-        confirmButtonText: 'Confirm',
-        cancelButtonText: 'Cancel',
+      this.$confirm(this.$t('Are you sure to delete this spider?)', this.$t('Notification'), {
+        confirmButtonText: this.$t('Confirm'),
+        cancelButtonText: this.$t('Cancel'),
         type: 'warning'
       }).then(() => {
         this.$store.dispatch('spider/deleteSpider', row._id)

frontend/src/views/spider/SpiderList.vue

@@ -219,9 +219,9 @@ export default {
       this.dialogVisible = true
     },
     onRemove (row) {
-      this.$confirm('Are you sure to delete this spider?', 'Notification', {
-        confirmButtonText: 'Confirm',
-        cancelButtonText: 'Cancel',
+      this.$confirm(this.$t('Are you sure to delete this spider?'), this.$t('Notification'), {
+        confirmButtonText: this.$t('Confirm'),
+        cancelButtonText: this.$t('Cancel'),
         type: 'warning'
       }).then(() => {
         this.$store.dispatch('spider/deleteSpider', row._id)
@@ -234,9 +234,9 @@ export default {
       })
     },
     onDeploy (row) {
-      this.$confirm('Are you sure to deploy this spider?', 'Notification', {
-        confirmButtonText: 'Confirm',
-        cancelButtonText: 'Cancel',
+      this.$confirm(this.$t('Are you sure to deploy this spider?'), this.$t('Notification'), {
+        confirmButtonText: this.$t('Confirm'),
+        cancelButtonText: this.$t('Cancel'),
         type: 'warning'
       }).then(() => {
         this.$store.dispatch('spider/deploySpider', row._id)
@@ -249,14 +249,14 @@ export default {
       })
     },
     onCrawl (row) {
-      this.$confirm('Are you sure to run this spider', 'Notice', {
-        confirmButtonText: 'Confirm',
-        cancelButtonText: 'Cancel'
+      this.$confirm(this.$t('Are you sure to run this spider?'), this.$t('Notification'), {
+        confirmButtonText: this.$t('Confirm'),
+        cancelButtonText: this.$t('Cancel')
       })
         .then(() => {
           this.$store.dispatch('spider/crawlSpider', row._id)
             .then(() => {
-              this.$message.success(`Running spider "${row._id}" has been scheduled`)
+              this.$message.success(this.$t(`Spider task has been scheduled`))
             })
         })
     },
@@ -290,15 +290,15 @@ export default {
       this.dialogVisible = true
     },
     onDeployAll () {
-      this.$confirm('Are you sure to deploy all spiders to active nodes?', 'Notice', {
-        confirmButtonText: 'Confirm',
-        cancelButtonText: 'Cancel',
+      this.$confirm(this.$t('Are you sure to deploy all spiders to active nodes?'), this.$t('Notification'), {
+        confirmButtonText: this.$t('Confirm'),
+        cancelButtonText: this.$t('Cancel'),
         type: 'warning'
       })
         .then(() => {
           this.$store.dispatch('spider/deployAll')
             .then(() => {
-              this.$message.success('Deployed all spiders successfully')
+              this.$message.success(this.$t('Deployed all spiders successfully'))
             })
         })
     }

frontend/src/views/task/TaskList.vue

@@ -166,9 +166,9 @@ export default {
       this.$store.dispatch('task/getTaskList')
     },
     onRemove (row) {
-      this.$confirm('Are you sure to delete this task?', 'Notification', {
-        confirmButtonText: 'Confirm',
-        cancelButtonText: 'Cancel',
+      this.$confirm(this.$t('Are you sure to delete this task?'), this.$t('Notification'), {
+        confirmButtonText: this.$t('Confirm'),
+        cancelButtonText: this.$t('Cancel'),
         type: 'warning'
       }).then(() => {
         this.$store.dispatch('task/deleteTask', row._id)