加入任务详情教程

frontend/src/components/Overview/TaskOverview.vue

@@ -1,7 +1,7 @@
 <template>
   <el-row>
     <el-col :span="12" style="padding-right: 20px;">
-      <el-row>
+      <el-row class="task-info-overview-wrapper wrapper">
         <h4 class="title">{{$t('Task Info')}}</h4>
         <task-info-view/>
       </el-row>
@@ -9,12 +9,16 @@
     </el-col>
 
     <el-col :span="12">
-      <el-row>
-        <h4 class="title spider-title" @click="onClickSpiderTitle">{{$t('Spider Info')}}</h4>
+      <el-row class="task-info-spider-wrapper wrapper">
+        <h4 class="title spider-title" @click="onClickSpiderTitle">
+          <i class="fa fa-search" style="margin-right: 5px"></i>
+          {{$t('Spider Info')}}</h4>
         <spider-info-view :is-view="true"/>
       </el-row>
-      <el-row>
-        <h4 class="title node-title" @click="onClickNodeTitle">{{$t('Node Info')}}</h4>
+      <el-row class="task-info-node-wrapper wrapper">
+        <h4 class="title node-title" @click="onClickNodeTitle">
+          <i class="fa fa-search" style="margin-right: 5px"></i>
+          {{$t('Node Info')}}</h4>
         <node-info-view :is-view="true"/>
       </el-row>
     </el-col>
@@ -67,6 +71,12 @@ export default {
 <style scoped>
   .title {
     margin: 10px 0 3px 0;
+    text-align: center;
+    display: inline-block;
+  }
+
+  .wrapper {
+    text-align: center;
   }
 
   .spider-form {
@@ -79,13 +89,17 @@ export default {
     text-align: right;
   }
 
-  .title {
-    text-align: center;
-  }
-
   .node-title,
   .spider-title {
-    text-decoration: underline;
     cursor: pointer;
   }
+
+  .node-title:hover,
+  .spider-title:hover {
+    text-decoration: underline;
+  }
+
+  .title > i {
+    color: grey;
+  }
 </style>

frontend/src/views/task/TaskDetail.vue

@@ -1,5 +1,14 @@
 <template>
   <div class="app-container">
+    <!--tour-->
+    <v-tour
+      name="task-detail"
+      :steps="tourSteps"
+      :callbacks="tourCallbacks"
+      :options="$utils.tour.getOptions(true)"
+    />
+    <!--./tour-->
+
     <!--tabs-->
     <el-tabs v-model="activeTabName" @tab-click="onTabClick" type="card">
       <el-tab-pane :label="$t('Overview')" name="overview">
@@ -12,7 +21,7 @@
       </el-tab-pane>
       <el-tab-pane :label="$t('Results')" name="results">
         <div class="button-group">
-          <el-button type="primary" icon="el-icon-download" @click="downloadCSV">
+          <el-button class="btn-download" type="primary" icon="el-icon-download" @click="downloadCSV">
             {{$t('Download CSV')}}
           </el-button>
         </div>
@@ -48,7 +57,80 @@ export default {
     return {
       activeTabName: 'overview',
       handle: undefined,
-      taskLog: ''
+      taskLog: '',
+
+      // tutorial
+      tourSteps: [
+        // overview
+        {
+          target: '.task-info-overview-wrapper',
+          content: this.$t('This is the info of the task detail.'),
+          params: {
+            placement: 'right'
+          }
+        },
+        {
+          target: '.task-info-spider-wrapper',
+          content: this.$t('This is the spider info of the task.'),
+          params: {
+            placement: 'left'
+          }
+        },
+        {
+          target: '.spider-title',
+          content: this.$t('You can click to view the spider detail for the task.'),
+          params: {
+            placement: 'left'
+          }
+        },
+        {
+          target: '.task-info-node-wrapper',
+          content: this.$t('This is the node info of the task.'),
+          params: {
+            placement: 'left'
+          }
+        },
+        {
+          target: '.node-title',
+          content: this.$t('You can click to view the node detail for the task.'),
+          params: {
+            placement: 'left'
+          }
+        },
+        // log
+        {
+          target: '#tab-log',
+          content: this.$t('Here you can view the log<br> details for the task. The<br> log is automatically updated.')
+        },
+        // results
+        {
+          target: '#tab-results',
+          content: this.$t('Here you can view the results scraped by the spider.<br><br><strong>Note:</strong> If you find your results here are empty, please refer to the <a href="https://docs.crawlab.cn/Integration/" target="_blank" style="color: #409EFF">Documentation (Chinese)</a> about how to integrate your spider into Crawlab.')
+        },
+        {
+          target: '.btn-download',
+          content: this.$t('You can download your results as a CSV file by clicking this button.')
+        }
+      ],
+      tourCallbacks: {
+        onStop: () => {
+          this.$utils.tour.finishTour('task-detail')
+        },
+        onPreviousStep: (currentStep) => {
+          if (currentStep === 5) {
+            this.activeTabName = 'overview'
+          } else if (currentStep === 6) {
+            this.activeTabName = 'log'
+          }
+        },
+        onNextStep: (currentStep) => {
+          if (currentStep === 4) {
+            this.activeTabName = 'log'
+          } else if (currentStep === 5) {
+            this.activeTabName = 'results'
+          }
+        }
+      }
     }
   },
   computed: {
@@ -116,6 +198,11 @@ export default {
       this.getTaskLog()
     }, 5000)
   },
+  mounted () {
+    if (!this.$utils.tour.isFinishedTour('task-detail')) {
+      this.$tours['task-detail'].start()
+    }
+  },
   destroyed () {
     clearInterval(this.handle)
   }