加入爬虫详情教程

frontend/src/views/schedule/ScheduleList.vue

@@ -108,7 +108,7 @@
     <!--<vcrontab @hide="showCron=false" @fill="onCrontabFill" :expression="expression"></vcrontab>-->
     <!--</el-dialog>-->
 
-    <el-card style="border-radius: 0">
+    <el-card style="border-radius: 0" class="schedule-list">
       <!--filter-->
       <div class="filter">
         <div class="right">

frontend/src/views/spider/SpiderDetail.vue

@@ -1,9 +1,18 @@
 <template>
   <div class="app-container">
+    <!--tour-->
+    <v-tour
+      name="spider-detail"
+      :steps="tourSteps"
+      :callbacks="tourCallbacks"
+      :options="$utils.tour.getOptions(true)"
+    />
+    <!--./tour-->
+
     <!--selector-->
     <div class="selector">
       <label class="label">{{$t('Spider')}}: </label>
-      <el-select v-model="spiderForm._id" @change="onSpiderChange">
+      <el-select id="spider-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>
     </div>
@@ -62,7 +71,89 @@ export default {
   },
   data () {
     return {
-      activeTabName: 'overview'
+      activeTabName: 'overview',
+      tourSteps: [
+        // top bar
+        {
+          target: '.el-tabs__nav.is-top',
+          content: this.$t('You can switch to each section of the spider detail.')
+        },
+        {
+          target: '#spider-select',
+          content: this.$t('You can switch to different spider using this selector.')
+        },
+        // overview
+        {
+          target: '.task-table-view',
+          content: this.$t('You can view latest tasks for this spider and click each row to view task detail.'),
+          params: {
+            placement: 'right'
+          }
+        },
+        {
+          target: '.spider-form',
+          content: this.$t('You can edit the detail info for this spider.'),
+          params: {
+            placement: 'left'
+          }
+        },
+        {
+          target: '.button-container',
+          content: this.$t('Here you can action on the spider, including running a task, uploading a zip file and save the spider info.'),
+          params: {
+            placement: 'top'
+          }
+        },
+        // file
+        {
+          target: '.tree',
+          content: this.$t('File navigation panel.<br><br>You can right click on <br>each item to create or delete<br> a file/directory.')
+        },
+        {
+          target: '.add-btn',
+          content: this.$t('Click to add a file or directory<br> on the root directory.')
+        },
+        {
+          target: '.main-content',
+          content: this.$t('You can edit, save, rename<br> and delete the selected file <br>in this box.'),
+          params: {
+            placement: 'left'
+          }
+        },
+        // environment
+        {
+          target: '.environment-list',
+          content: this.$t('Here you can add environment variables that will be passed to the spider program when running a task.')
+        },
+        // schedules
+        {
+          target: '.schedule-list',
+          content: this.$t('You can add, edit and delete schedules (cron jobs) for the spider.')
+        }
+      ],
+      tourCallbacks: {
+        onStop: () => {
+          this.$utils.tour.finishTour('spider-detail')
+        },
+        onPreviousStep: (currentStep) => {
+          if (currentStep === 5) {
+            this.activeTabName = 'overview'
+          } else if (currentStep === 8) {
+            this.activeTabName = 'files'
+          } else if (currentStep === 9) {
+            this.activeTabName = 'environment'
+          }
+        },
+        onNextStep: (currentStep) => {
+          if (currentStep === 4) {
+            this.activeTabName = 'files'
+          } else if (currentStep === 7) {
+            this.activeTabName = 'environment'
+          } else if (currentStep === 8) {
+            this.activeTabName = 'schedules'
+          }
+        }
+      }
     }
   },
   computed: {
@@ -121,6 +212,11 @@ export default {
     // if (this.spiderForm.type === 'configurable') {
     // this.activeTabName = 'config'
     // }
+  },
+  mounted () {
+    if (!this.$utils.tour.isFinishedTour('spider-detail')) {
+      this.$tours['spider-detail'].start()
+    }
   }
 }
 </script>