添加爬虫列表教程

docker-compose.yml

@@ -60,3 +60,8 @@ services:
     #   - "/opt/crawlab/redis/data:/data"  # make data persistent 持久化
     # ports:
     #   - "6379:6379"  # expose port to host machine 暴露接口到宿主机
+  # splash:  # use Splash to run spiders on dynamic pages
+  #   image: scrapinghub/splash
+  #   container_name: splash
+  #   ports:
+  #     - "8050:8050"

frontend/src/App.vue

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

frontend/src/i18n/zh.js

@@ -413,8 +413,17 @@ docker run -d --restart always --name crawlab_worker \\
   'Finish': '结束',
   'Click to add a new spider': '点击并添加爬虫',
   'You can view your created spiders here.<br>Click a table row to view <strong>spider details</strong>.': '您可以查看创建的爬虫<br>点击行来查看<strong>爬虫详情</strong>',
-  'View a list of <strong>Configurable Spiders</strong>': '查看<strong>自定义爬虫</strong>列表',
-  'View a list of <strong>Customized Spiders</strong>': '查看<strong>可配置爬虫</strong>列表',
+  'View a list of <strong>Configurable Spiders</strong>': '查看<strong>可配置爬虫</strong>列表',
+  'View a list of <strong>Customized Spiders</strong>': '查看<strong>自定义爬虫</strong>列表',
+  '<strong>Customized Spider</strong> is a highly customized spider, which is able to run on any programming language and any web crawler framework.': '<strong>自定义爬虫</strong>是高度自定义化的爬虫，能够运行任何编程语言和爬虫框架',
+  '<strong>Configurable Spider</strong> is a spider defined by config data, aimed at streamlining spider development and improving dev efficiency.': '<strong>可配置爬虫</strong>被配置数据所定义，旨在将爬虫开发流程化以及提高爬虫开发效率',
+  'Unique identifier for the spider': '爬虫的唯一识别符',
+  'How the spider is displayed on Crawlab': '爬虫在 Crawlab 上的展示名称',
+  'A shell command to be executed when the spider is triggered to run (only available for <strong>Customized Spider</strong>': '当爬虫被触发时执行的一行 Shell 命令（仅<strong>自定义爬虫</strong>有效）',
+  'Where the results are stored in the database': '抓取结果在数据库中储存的位置',
+  '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': '点击并确认添加爬虫',
 
   // 其他
   'Star crawlab-team/crawlab on GitHub': '在 GitHub 上为 Crawlab 加星吧'

frontend/src/utils/tour.js

@@ -27,13 +27,15 @@ export default {
     data[tourName] = 1
     localStorage.setItem('tour', JSON.stringify(data))
   },
-  options: {
-    labels: {
-      buttonSkip: i18n.t('Skip'),
-      buttonPrevious: i18n.t('Previous'),
-      buttonNext: i18n.t('Next'),
-      buttonStop: i18n.t('Finish')
-    },
-    highlight: true
+  getOptions: (isShowHighlight) => {
+    return {
+      labels: {
+        buttonSkip: i18n.t('Skip'),
+        buttonPrevious: i18n.t('Previous'),
+        buttonNext: i18n.t('Next'),
+        buttonStop: i18n.t('Finish')
+      },
+      highlight: isShowHighlight
+    }
   }
 }

frontend/src/views/spider/SpiderList.vue

@@ -2,10 +2,16 @@
   <div class="app-container">
     <!--tour-->
     <v-tour
-      name="spider-list-tour"
+      name="spider-list"
       :steps="tourSteps"
       :callbacks="tourCallbacks"
-      :options="$utils.tour.options"
+      :options="$utils.tour.getOptions(true)"
+    />
+    <v-tour
+      name="spider-list-add"
+      :steps="tourAddSteps"
+      :callbacks="tourAddCallbacks"
+      :options="$utils.tour.getOptions(true)"
     />
     <!--./tour-->
 
@@ -47,16 +53,16 @@
         <el-tab-pane name="customized" :label="$t('Customized')">
           <el-form :model="spiderForm" ref="addCustomizedForm" inline-message label-width="120px">
             <el-form-item :label="$t('Spider Name')" prop="name" required>
-              <el-input v-model="spiderForm.name" :placeholder="$t('Spider Name')"/>
+              <el-input id="spider-name" v-model="spiderForm.name" :placeholder="$t('Spider Name')"/>
             </el-form-item>
             <el-form-item :label="$t('Display Name')" prop="display_name" required>
-              <el-input v-model="spiderForm.display_name" :placeholder="$t('Display Name')"/>
+              <el-input id="display-name" v-model="spiderForm.display_name" :placeholder="$t('Display Name')"/>
             </el-form-item>
             <el-form-item :label="$t('Execute Command')" prop="cmd" required>
-              <el-input v-model="spiderForm.cmd" :placeholder="$t('Execute Command')"/>
+              <el-input id="cmd" v-model="spiderForm.cmd" :placeholder="$t('Execute Command')"/>
             </el-form-item>
             <el-form-item :label="$t('Results')" prop="col" required>
-              <el-input v-model="spiderForm.col" :placeholder="$t('Results')"/>
+              <el-input id="col" v-model="spiderForm.col" :placeholder="$t('Results')"/>
             </el-form-item>
             <el-form-item :label="$t('Upload Zip File')" label-width="120px" name="site">
               <el-upload
@@ -67,7 +73,7 @@
                 :file-list="fileList"
                 :before-upload="beforeUpload"
               >
-                <el-button size="small" type="primary" icon="el-icon-upload">
+                <el-button id="upload" size="small" type="primary" icon="el-icon-upload">
                   {{$t('Upload')}}
                 </el-button>
               </el-upload>
@@ -99,7 +105,7 @@
               <el-input v-model="spiderForm.display_name" :placeholder="$t('Display Name')"/>
             </el-form-item>
             <el-form-item :label="$t('Template')" prop="template" required>
-              <el-select v-model="spiderForm.template" :value="spiderForm.template" :placeholder="$t('Template')">
+              <el-select id="template" v-model="spiderForm.template" :value="spiderForm.template" :placeholder="$t('Template')">
                 <el-option
                   v-for="template in templateList"
                   :key="template"
@@ -113,7 +119,7 @@
             </el-form-item>
           </el-form>
           <div class="actions">
-            <el-button size="small" type="primary" @click="onAddConfigurable">{{$t('Add')}}</el-button>
+            <el-button id="add" size="small" type="primary" @click="onAddConfigurable">{{$t('Add')}}</el-button>
           </div>
         </el-tab-pane>
       </el-tabs>
@@ -374,12 +380,94 @@ export default {
         {
           target: '.btn.add',
           content: this.$t('Click to add a new spider')
-        },
+        }
       ],
       tourCallbacks: {
         onStop: () => {
           this.$utils.tour.finishTour('spider-list')
         }
+      },
+      tourAddSteps: [
+        {
+          target: '#tab-customized',
+          content: this.$t('<strong>Customized Spider</strong> is a highly customized spider, which is able to run on any programming language and any web crawler framework.'),
+          params: {
+            placement: 'bottom',
+            highlight: false
+          }
+        },
+        {
+          target: '#tab-configurable',
+          content: this.$t('<strong>Configurable Spider</strong> is a spider defined by config data, aimed at streamlining spider development and improving dev efficiency.'),
+          params: {
+            placement: 'bottom',
+            highlight: false
+          }
+        },
+        {
+          target: '#spider-name',
+          content: this.$t('Unique identifier for the spider'),
+          params: {
+            placement: 'right'
+          }
+        },
+        {
+          target: '#display-name',
+          content: this.$t('How the spider is displayed on Crawlab'),
+          params: {
+            placement: 'right'
+          }
+        },
+        {
+          target: '#cmd',
+          content: this.$t('A shell command to be executed when the spider is triggered to run (only available for <strong>Customized Spider</strong>'),
+          params: {
+            placement: 'right'
+          }
+        },
+        {
+          target: '#col',
+          content: this.$t('Where the results are stored in the database'),
+          params: {
+            placement: 'right'
+          }
+        },
+        {
+          target: '#upload',
+          content: this.$t('Upload a zip file containing all spider files to create the spider (only available for <strong>Customized Spider</strong>)'),
+          params: {
+            placement: 'right'
+          }
+        },
+        {
+          target: '#template',
+          content: this.$t('The spider template to create from (only available for <strong>Configurable Spider</strong>)'),
+          params: {
+            placement: 'right'
+          }
+        },
+        {
+          target: '#add',
+          content: this.$t('Click to confirm to add the spider'),
+          params: {
+            placement: 'right'
+          }
+        }
+      ],
+      tourAddCallbacks: {
+        onStop: () => {
+          this.$utils.tour.finishTour('spider-list-add')
+        },
+        onPreviousStep: (currentStep) => {
+          if (currentStep === 7) {
+            this.spiderType = 'customized'
+          }
+        },
+        onNextStep: (currentStep) => {
+          if (currentStep === 6) {
+            this.spiderType = 'configurable'
+          }
+        }
       }
     }
   },
@@ -424,6 +512,12 @@ export default {
         template: this.templateList[0]
       })
       this.addDialogVisible = true
+
+      setTimeout(() => {
+        if (!this.$utils.tour.isFinishedTour('spider-list-add')) {
+          this.$tours['spider-list-add'].start()
+        }
+      }, 300)
     },
     onAddConfigurable () {
       this.$refs['addConfigurableForm'].validate(async res => {
@@ -656,7 +750,7 @@ export default {
     })
 
     if (!this.$utils.tour.isFinishedTour('spider-list')) {
-      this.$tours['spider-list-tour'].start()
+      this.$tours['spider-list'].start()
     }
   }
 }