added tour for SpiderList

frontend/src/App.vue

@@ -139,4 +139,21 @@ export default {
     border-color: #f56c6c;
     color: #fff;
   }
+
+  .v-tour__target--highlighted {
+    box-shadow: 0 0 0 4px #f56c6c !important;
+  }
+
+  .v-step__button {
+    background: #67c23a !important;
+    border: none !important;
+    color: white !important;
+  }
+
+  .v-step__button:hover {
+    background: #67c23a !important;
+    border: none !important;
+    color: white !important;
+    opacity: 0.9 !important;
+  }
 </style>

frontend/src/i18n/zh.js

@@ -407,7 +407,14 @@ docker run -d --restart always --name crawlab_worker \\
 `,
 
   // 教程
+  'Skip': '跳过',
+  'Previous': '上一步',
+  'Next': '下一步',
+  '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>列表',
 
   // 其他
   'Star crawlab-team/crawlab on GitHub': '在 GitHub 上为 Crawlab 加星吧'

frontend/src/utils/tour.js

@@ -1,3 +1,5 @@
+import i18n from '../i18n'
+
 export default {
   isFinishedTour: (tourName) => {
     if (!localStorage.getItem('tour')) {
@@ -24,5 +26,14 @@ 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
   }
 }

frontend/src/views/spider/SpiderList.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="app-container">
     <!--tour-->
-    <v-tour name="spider-list-tour" :steps="tourSteps" :callbacks="tourCallbacks"></v-tour>
+    <v-tour
+      name="spider-list-tour"
+      :steps="tourSteps"
+      :callbacks="tourCallbacks"
+      :options="$utils.tour.options"
+    />
     <!--./tour-->
 
     <!--import popup-->
@@ -168,10 +173,10 @@
       <!--./filter-->
 
       <!--tabs-->
-      <el-tabs v-model="filter.type" @tab-click="onClickTab">
-        <el-tab-pane :label="$t('All')" name="all"></el-tab-pane>
-        <el-tab-pane :label="$t('Customized')" name="customized"></el-tab-pane>
-        <el-tab-pane :label="$t('Configurable')" name="configurable"></el-tab-pane>
+      <el-tabs v-model="filter.type" @tab-click="onClickTab" class="tabs">
+        <el-tab-pane :label="$t('All')" name="all" class="all"></el-tab-pane>
+        <el-tab-pane :label="$t('Customized')" name="customized" class="customized"></el-tab-pane>
+        <el-tab-pane :label="$t('Configurable')" name="configurable" class="configuable"></el-tab-pane>
       </el-tabs>
       <!--./tabs-->
 
@@ -345,10 +350,31 @@ export default {
       fileList: [],
       spiderType: 'customized',
       tourSteps: [
+        {
+          target: '#tab-customized',
+          content: this.$t('View a list of <strong>Customized Spiders</strong>'),
+          params: {
+            highlight: false
+          }
+        },
+        {
+          target: '#tab-configurable',
+          content: this.$t('View a list of <strong>Configurable Spiders</strong>'),
+          params: {
+            highlight: false
+          }
+        },
+        {
+          target: '.table',
+          content: this.$t('You can view your created spiders here.<br>Click a table row to view <strong>spider details</strong>.'),
+          params: {
+            placement: 'top'
+          }
+        },
         {
           target: '.btn.add',
           content: this.$t('Click to add a new spider')
-        }
+        },
       ],
       tourCallbacks: {
         onStop: () => {