From 6205a8f74e2dff380f333fac76bf59a3902a3a2f Mon Sep 17 00:00:00 2001
From: marvzhang <tikazyq@163.com>
Date: Sat, 1 Feb 2020 11:58:12 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A0=E5=85=A5=E4=BB=BB=E5=8A=A1=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E6=95=99=E7=A8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/task/TaskList.vue | 58 ++++++++++++++++++++++++++--
 1 file changed, 55 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/task/TaskList.vue b/frontend/src/views/task/TaskList.vue
index b6001a5e..51b52547 100644
--- a/frontend/src/views/task/TaskList.vue
+++ b/frontend/src/views/task/TaskList.vue
@@ -1,10 +1,19 @@
 <template>
   <div class="app-container">
+    <!--tour-->
+    <v-tour
+      name="task-list"
+      :steps="tourSteps"
+      :callbacks="tourCallbacks"
+      :options="$utils.tour.getOptions(true)"
+    />
+    <!--./tour-->
+
     <el-card style="border-radius: 0">
       <!--filter-->
       <div class="filter">
         <div class="left">
-          <el-form :model="filter" label-width="100px" label-position="right" inline>
+          <el-form class="filter-form" :model="filter" label-width="100px" label-position="right" inline>
             <el-form-item prop="node_id" :label="$t('Node')">
               <el-select v-model="filter.node_id" size="small" :placeholder="$t('Node')" @change="onFilterChange">
                 <el-option value="" :label="$t('All')"/>
@@ -29,7 +38,7 @@
           </el-form>
         </div>
         <div class="right">
-          <el-button @click="onRemoveMultipleTask" size="small" type="danger">
+          <el-button class="btn-delete" @click="onRemoveMultipleTask" size="small" type="danger">
             删除任务
           </el-button>
         </div>
@@ -191,7 +200,46 @@ export default {
         // { name: 'avg_num_results', label: 'Average Results Count per Second', width: '80' }
       ],
 
-      multipleSelection: []
+      multipleSelection: [],
+
+      // tutorial
+      tourSteps: [
+        {
+          target: '.filter-form',
+          content: this.$t('You can filter tasks from this area.')
+        },
+        {
+          target: '.table',
+          content: this.$t('This is a list of spider tasks executed sorted in a descending order.')
+        },
+        {
+          target: '.table .el-table__body-wrapper tr:nth-child(1)',
+          content: this.$t('Click the row to or the view button to view the task detail.')
+        },
+        {
+          target: '.table tr td:nth-child(1)',
+          content: this.$t('Tick and select the tasks you would like to delete in batches.'),
+          params: {
+            placement: 'right'
+          }
+        },
+        {
+          target: '.btn-delete',
+          content: this.$t('Click this button to delete selected tasks.'),
+          params: {
+            placement: 'left'
+          }
+        }
+      ],
+      tourCallbacks: {
+        onStop: () => {
+          this.$utils.tour.finishTour('task-list')
+        },
+        onPreviousStep: (currentStep) => {
+        },
+        onNextStep: (currentStep) => {
+        }
+      }
     }
   },
   computed: {
@@ -350,6 +398,10 @@ export default {
     this.handle = setInterval(() => {
       this.$store.dispatch('task/getTaskList')
     }, 5000)
+
+    if (!this.$utils.tour.isFinishedTour('task-list')) {
+      this.$tours['task-list'].start()
+    }
   },
   destroyed () {
     clearInterval(this.handle)