加入爬虫详情教程

frontend/src/App.vue

@@ -143,7 +143,7 @@ export default {
   .v-tour__target--highlighted {
     box-shadow: none !important;
     /*box-shadow: 0 0 0 4px #f56c6c !important;*/
-    border: 3px solid #f56c6c;
+    border: 3px solid #f56c6c !important;
   }
 
   .v-step__button {

frontend/src/components/File/FileList.vue

@@ -34,6 +34,7 @@
       class="file-tree-wrapper"
     >
       <el-tree
+        class="tree"
         :data="computedFileTree"
         ref="tree"
         node-key="path"
@@ -87,33 +88,33 @@
           </el-popover>
         </span>
       </el-tree>
-      <el-popover trigger="click" placement="right"
-                  popper-class="create-item-popover" :visible-arrow="false">
-        <ul class="action-item-list">
-          <li class="action-item" @click="fileDialogVisible = true">
-            <font-awesome-icon icon="file-alt" color="rgba(3,47,98,.5)"/>
-            <span class="action-item-text">{{$t('Create File')}}</span>
-          </li>
-          <li class="action-item" @click="dirDialogVisible = true">
-            <font-awesome-icon :icon="['fa', 'folder']" color="rgba(3,47,98,.5)"/>
-            <span class="action-item-text">{{$t('Create Directory')}}</span>
-          </li>
-        </ul>
-        <div
-          class="add-btn-wrapper"
-          slot="reference"
-        >
+      <div
+        class="add-btn-wrapper"
+      >
+        <el-popover trigger="click" placement="right"
+                    popper-class="create-item-popover" :visible-arrow="false">
+          <ul class="action-item-list">
+            <li class="action-item" @click="fileDialogVisible = true">
+              <font-awesome-icon icon="file-alt" color="rgba(3,47,98,.5)"/>
+              <span class="action-item-text">{{$t('Create File')}}</span>
+            </li>
+            <li class="action-item" @click="dirDialogVisible = true">
+              <font-awesome-icon :icon="['fa', 'folder']" color="rgba(3,47,98,.5)"/>
+              <span class="action-item-text">{{$t('Create Directory')}}</span>
+            </li>
+          </ul>
           <el-button
             class="add-btn"
             size="small"
             type="primary"
             icon="el-icon-plus"
+            slot="reference"
             @click="onEmptyClick"
           >
             {{$t('Add')}}
           </el-button>
-        </div>
-      </el-popover>
+        </el-popover>
+      </div>
     </div>
 
     <div class="main-content">
@@ -202,7 +203,18 @@ export default {
       dirDialogVisible: false,
       fileDialogVisible: false,
       nodeExpandedDict: {},
-      isShowDeleteNav: false
+      isShowDeleteNav: false,
+      tourSteps: [
+        {
+          target: '.add-btn',
+          content: this.$t('You can add a file or directory')
+        }
+      ],
+      tourCallbacks: {
+        onStop: () => {
+          this.$utils.tour.finishTour('spider-detail-file-list')
+        }
+      }
     }
   },
   computed: {

frontend/src/i18n/zh.js

@@ -424,6 +424,16 @@ docker run -d --restart always --name crawlab_worker \\
   'Upload a zip file containing all spider files to create the spider (only available for <strong>Customized Spider</strong>)': '上传一个包含所有爬虫文件的 zip 文件，然后创建爬虫（仅<strong>自定义爬虫</strong>有效）',
   'The spider template to create from (only available for <strong>Configurable Spider</strong>)': '创建爬虫时引用的模版（仅<strong>可配置爬虫</strong>有效）',
   'Click to confirm to add the spider': '点击并确认添加爬虫',
+  'You can switch to each section of the spider detail.': '您可以切换到爬虫详情的每一个部分',
+  'You can switch to different spider using this selector.': '您可以通过这个选择器切换不同的爬虫',
+  'You can view latest tasks for this spider and click each row to view task detail.': '您可以查看最近的爬虫任务以及点击行来查看任务详情',
+  'You can edit the detail info for this spider.': '您可以编辑爬虫详情信息',
+  'Here you can action on the spider, including running a task, uploading a zip file and save the spider info.': '这里您可以对爬虫进行操作，包括运行爬虫任务、上传 zip 文件以及保存爬虫信息',
+  'File navigation panel.<br><br>You can right click on <br>each item to create or delete<br> a file/directory.': '文件导航栏<br><br>您可以右键点击一个元素<br>来添加或删除文件/文件夹',
+  'Click to add a file or directory<br> on the root directory.': '点击并添加一个文件<br>或文件夹',
+  'You can edit, save, rename<br> and delete the selected file <br>in this box.': '在这个栏位中，您可以<br>编辑、保存、重命名、<br>删除所选择的文件',
+  'Here you can add environment variables that will be passed to the spider program when running a task.': '这里您可以添加环境变量，这些环境变量会被传入运行的爬虫程序中',
+  'You can add, edit and delete schedules (cron jobs) for the spider.': '您可以添加、修改、删除爬虫的定时任务',
 
   // 其他
   'Star crawlab-team/crawlab on GitHub': '在 GitHub 上为 Crawlab 加星吧'

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>