From 7654d638d070a59024a866ee46508cb2fdff41dc Mon Sep 17 00:00:00 2001
From: marvzhang <tikazyq@163.com>
Date: Wed, 29 Jan 2020 12:23:10 +0800
Subject: [PATCH] added tour

---
 frontend/package.json                         |  1 +
 frontend/src/i18n/zh.js                       |  3 ++
 frontend/src/main.js                          |  7 +++++
 frontend/src/utils/index.js                   |  4 ++-
 frontend/src/utils/tour.js                    | 28 +++++++++++++++++
 .../views/layout/components/Sidebar/index.vue | 13 ++++++--
 frontend/src/views/spider/SpiderList.vue      | 22 ++++++++++++--
 frontend/yarn.lock                            | 30 +++++++++++++++++++
 8 files changed, 102 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/utils/tour.js

diff --git a/frontend/package.json b/frontend/package.json
index b08c2689..5f80d096 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -40,6 +40,7 @@
     "vue-github-button": "^1.1.2",
     "vue-i18n": "^8.9.0",
     "vue-router": "^3.0.1",
+    "vue-tour": "^1.2.0",
     "vue-virtual-scroll-list": "^1.3.9",
     "vuex": "^3.0.1"
   },
diff --git a/frontend/src/i18n/zh.js b/frontend/src/i18n/zh.js
index c9c1d47a..12d261ca 100644
--- a/frontend/src/i18n/zh.js
+++ b/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 加星吧'
 }
diff --git a/frontend/src/main.js b/frontend/src/main.js
index ca971a49..5d253547 100644
--- a/frontend/src/main.js
+++ b/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
 
 // 百度统计
diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js
index 0578bb07..ab33114f 100644
--- a/frontend/src/utils/index.js
+++ b/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
 }
diff --git a/frontend/src/utils/tour.js b/frontend/src/utils/tour.js
new file mode 100644
index 00000000..27f25824
--- /dev/null
+++ b/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))
+  }
+}
diff --git a/frontend/src/views/layout/components/Sidebar/index.vue b/frontend/src/views/layout/components/Sidebar/index.vue
index 1123d332..1b16c86f 100644
--- a/frontend/src/views/layout/components/Sidebar/index.vue
+++ b/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>
diff --git a/frontend/src/views/spider/SpiderList.vue b/frontend/src/views/spider/SpiderList.vue
index def443b7..7f072784 100644
--- a/frontend/src/views/spider/SpiderList.vue
+++ b/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>
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 05b9aeed..62be84f5 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -4142,6 +4142,11 @@ hash-sum@^1.0.2:
   version "1.0.2"
   resolved "http://registry.npm.taobao.org/hash-sum/download/hash-sum-1.0.2.tgz#33b40777754c6432573c120cc3808bbd10d47f04"
 
+hash-sum@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npm.taobao.org/hash-sum/download/hash-sum-2.0.0.tgz#81d01bb5de8ea4a214ad5d6ead1b523460b0b45a"
+  integrity sha1-gdAbtd6OpKIUrV1urRtSNGCwtFo=
+
 hash.js@^1.0.0, hash.js@^1.0.3:
   version "1.1.7"
   resolved "http://registry.npm.taobao.org/hash.js/download/hash.js-1.1.7.tgz#0babca538e8d4ee4a0f8988d68866537a003cf42"
@@ -5322,6 +5327,11 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
+jump.js@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npm.taobao.org/jump.js/download/jump.js-1.0.2.tgz#e0641b47f40a38f2139c25fda0500bf28e43015a"
+  integrity sha1-4GQbR/QKOPITnCX9oFAL8o5DAVo=
+
 killable@^1.0.0:
   version "1.0.1"
   resolved "http://registry.npm.taobao.org/killable/download/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892"
@@ -6551,6 +6561,11 @@ pn@^1.1.0:
   version "1.1.0"
   resolved "http://registry.npm.taobao.org/pn/download/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
 
+popper.js@^1.16.0:
+  version "1.16.1"
+  resolved "https://registry.npm.taobao.org/popper.js/download/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
+  integrity sha1-KiI8s9x7YhPXQOQDcr5A3kPmWxs=
+
 portfinder@^1.0.20, portfinder@^1.0.9:
   version "1.0.20"
   resolved "http://registry.npm.taobao.org/portfinder/download/portfinder-1.0.20.tgz#bea68632e54b2e13ab7b0c4775e9b41bf270e44a"
@@ -8674,6 +8689,16 @@ vue-template-es2015-compiler@^1.6.0, vue-template-es2015-compiler@^1.8.2:
   version "1.8.2"
   resolved "http://registry.npm.taobao.org/vue-template-es2015-compiler/download/vue-template-es2015-compiler-1.8.2.tgz#dd73e80ba58bb65dd7a8aa2aeef6089cf6116f2a"
 
+vue-tour@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.npm.taobao.org/vue-tour/download/vue-tour-1.2.0.tgz#340bbfec8f3778a9ea0c87176ce3611c69e0a4d4"
+  integrity sha1-NAu/7I83eKnqDIcXbONhHGngpNQ=
+  dependencies:
+    hash-sum "^2.0.0"
+    jump.js "^1.0.2"
+    popper.js "^1.16.0"
+    vue "^2.6.10"
+
 vue-virtual-scroll-list@^1.3.9:
   version "1.3.9"
   resolved "https://registry.npm.taobao.org/vue-virtual-scroll-list/download/vue-virtual-scroll-list-1.3.9.tgz#ba3ce6425374fb323ea83ab33daa2727117808ed"
@@ -8688,6 +8713,11 @@ vue@^2.5.17, vue@^2.5.22:
   version "2.6.6"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.6.tgz#dde41e483c11c46a7bf523909f4f2f816ab60d25"
 
+vue@^2.6.10:
+  version "2.6.11"
+  resolved "https://registry.npm.taobao.org/vue/download/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"
+  integrity sha1-dllNh31LEiNEBuhONSdcbVFBJcU=
+
 vuex@^3.0.1:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.1.0.tgz#634b81515cf0cfe976bd1ffe9601755e51f843b9"