added tour

frontend/src/i18n/zh.js

@@ -406,6 +406,9 @@ docker run -d --restart always --name crawlab_worker \\
 更多信息，请参考 [官方文档](https://docs.crawlab.cn)。
 `,
 
+  // 教程
+  'Click to add a new spider': '点击并添加爬虫',
+
   // 其他
   'Star crawlab-team/crawlab on GitHub': '在 GitHub 上为 Crawlab 加星吧'
 }

frontend/src/main.js

@@ -31,6 +31,10 @@ import request from './api/request'
 import i18n from './i18n'
 import utils from './utils'
 
+// vue-tour
+import VueTour from 'vue-tour'
+import 'vue-tour/dist/vue-tour.css'
+
 // code mirror
 Vue.use(codemirror)
 
@@ -45,6 +49,9 @@ Vue.component('font-awesome-icon', FontAwesomeIcon)
 Vue.component('font-awesome-layers', FontAwesomeLayers)
 Vue.component('font-awesome-layers-text', FontAwesomeLayersText)
 
+// vue-tour
+Vue.use(VueTour)
+
 Vue.config.productionTip = false
 
 // 百度统计

frontend/src/utils/index.js

@@ -1,7 +1,9 @@
 import stats from './stats'
 import encrypt from './encrypt'
+import tour from './tour'
 
 export default {
   stats,
-  encrypt
+  encrypt,
+  tour
 }

frontend/src/utils/tour.js

@@ -0,0 +1,28 @@
+export default {
+  isFinishedTour: (tourName) => {
+    if (!localStorage.getItem('tour')) {
+      localStorage.setItem('tour', JSON.stringify({}))
+      return false
+    }
+
+    let data
+    try {
+      data = JSON.parse(localStorage.getItem('tour'))
+    } catch (e) {
+      localStorage.setItem('tour', JSON.stringify({}))
+      return false
+    }
+    return !!data[tourName]
+  },
+  finishTour: (tourName) => {
+    let data
+    try {
+      data = JSON.parse(localStorage.getItem('tour'))
+    } catch (e) {
+      localStorage.setItem('tour', JSON.stringify({}))
+      data = {}
+    }
+    data[tourName] = 1
+    localStorage.setItem('tour', JSON.stringify(data))
+  }
+}

frontend/src/views/layout/components/Sidebar/index.vue

@@ -12,7 +12,13 @@
       :active-text-color="variables.menuActiveText"
       mode="vertical"
     >
-      <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path"/>
+      <sidebar-item
+        v-for="route in routes"
+        :class="route.path.replace('/', '')"
+        :key="route.path"
+        :item="route"
+        :base-path="route.path"
+      />
     </el-menu>
   </el-scrollbar>
 </template>
@@ -53,10 +59,11 @@ export default {
     }
   },
   data () {
-    return {
-    }
+    return {}
   },
   async created () {
+  },
+  mounted () {
   }
 }
 </script>

frontend/src/views/spider/SpiderList.vue

@@ -1,5 +1,9 @@
 <template>
   <div class="app-container">
+    <!--tour-->
+    <v-tour name="spider-list-tour" :steps="tourSteps" :callbacks="tourCallbacks"></v-tour>
+    <!--./tour-->
+
     <!--import popup-->
     <el-dialog
       :title="$t('Import Spider')"
@@ -339,7 +343,18 @@ export default {
         name: [{ required: true, message: 'Required Field', trigger: 'change' }]
       },
       fileList: [],
-      spiderType: 'customized'
+      spiderType: 'customized',
+      tourSteps: [
+        {
+          target: '.btn.add',
+          content: this.$t('Click to add a new spider')
+        }
+      ],
+      tourCallbacks: {
+        onStop: () => {
+          this.$utils.tour.finishTour('spider-list')
+        }
+      }
     }
   },
   computed: {
@@ -609,11 +624,14 @@ export default {
     await this.$store.dispatch('spider/getTemplateList')
   },
   mounted () {
-    console.log(this.spiderForm)
     const vm = this
     this.$nextTick(() => {
       vm.$store.commit('spider/SET_SPIDER_FORM', this.spiderForm)
     })
+
+    if (!this.$utils.tour.isFinishedTour('spider-list')) {
+      this.$tours['spider-list-tour'].start()
+    }
   }
 }
 </script>