加入教程数据统计

2026-01-22 17:31:03 +01:00 · 2020-02-01 18:00:33 +08:00
parent 1654f0346d
commit 83af0786e0
13 changed files with 100 additions and 13 deletions
--- a/frontend/src/components/Config/ConfigList.vue
+++ b/frontend/src/components/Config/ConfigList.vue
@@ -477,6 +477,7 @@ export default {
          } else if (currentStep === 12) {
            this.activeTab = 'settings'
          }
+          this.$utils.tour.prevStep('spider-detail-confg', currentStep)
        },
        onNextStep: (currentStep) => {
          if (currentStep === 9) {
@@ -486,6 +487,7 @@ export default {
          } else if (currentStep === 11) {
            this.activeTab = 'spiderfile'
          }
+          this.$utils.tour.nextStep('spider-detail-config', currentStep)
        }
      }
    }
--- a/frontend/src/components/File/FileList.vue
+++ b/frontend/src/components/File/FileList.vue
@@ -203,18 +203,7 @@ export default {
      dirDialogVisible: false,
      fileDialogVisible: false,
      nodeExpandedDict: {},
-      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')
-        }
-      }
+      isShowDeleteNav: false
    }
  },
  computed: {
--- a/frontend/src/i18n/zh.js
+++ b/frontend/src/i18n/zh.js
@@ -480,6 +480,9 @@ docker run -d --restart always --name crawlab_worker \\
  'The parameters which will be passed into the spider program.': '将被传入爬虫程序里的参数',
  'The description for the schedule': '定时任务的描述',
  'Once you have filled all fields, click this button to submit.': '当您填完所有字段，请点击这个按钮来提交定时任务',
+  'Here you can set your password.': '这里您可以设置您的密码',
+  'In this tab you can configure your notification settings.': '在这个标签中，您可以配置您的消息通知配置',
+  'Here you can add/edit/delete global environment variables which will be passed into your spider programs.': '这里您可以添加/修改/删除全局环境变量，它们会被传入爬虫程序中',

  // 其他
  'Star crawlab-team/crawlab on GitHub': '在 GitHub 上为 Crawlab 加星吧'
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -15,6 +15,7 @@ import site from './modules/site'
 import stats from './modules/stats'
 import setting from './modules/setting'
 import version from './modules/version'
+import tour from './modules/tour'
 import getters from './getters'

 Vue.use(Vuex)
@@ -35,6 +36,7 @@ const store = new Vuex.Store({
    site,
    setting,
    version,
+    tour,
    // 统计
    stats
  },
--- a/frontend/src/store/modules/tour.js
+++ b/frontend/src/store/modules/tour.js
@@ -0,0 +1,34 @@
+const state = {
+  tourFinishSteps: {
+    'spider-list': 3,
+    'spider-list-add': 8,
+    'spider-detail': 9,
+    'spider-detail-config': 12,
+    'task-list': 4,
+    'task-detail': 7,
+    'node-detail': 4,
+    'schedule-list': 1,
+    'schedule-list-add': 8,
+    'setting': 2
+  },
+  tourSteps: {}
+}
+
+const getters = {}
+
+const mutations = {
+  SET_TOUR_STEP: (state, payload) => {
+    const { tourName, step } = payload
+    state.tourSteps[tourName] = step
+  }
+}
+
+const actions = {}
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  mutations,
+  actions
+}
--- a/frontend/src/utils/tour.js
+++ b/frontend/src/utils/tour.js
@@ -1,4 +1,6 @@
 import i18n from '../i18n'
+import store from '../store'
+import stats from './stats'

 export default {
  isFinishedTour: (tourName) => {
@@ -26,6 +28,29 @@ export default {
    }
    data[tourName] = 1
    localStorage.setItem('tour', JSON.stringify(data))
+
+    // 发送统计数据
+    const finalStep = store.state.tour.tourFinishSteps[tourName]
+    const currentStep = store.state.tour.tourSteps[tourName]
+    if (currentStep === finalStep) {
+      stats.sendEv('教程', '完成', tourName)
+    } else {
+      stats.sendEv('教程', '跳过', tourName)
+    }
+  },
+  nextStep: (tourName, currentStep) => {
+    store.commit('tour/SET_TOUR_STEP', {
+      tourName,
+      step: currentStep + 1
+    })
+    stats.sendEv('教程', '下一步', tourName)
+  },
+  prevStep: (tourName, currentStep) => {
+    store.commit('tour/SET_TOUR_STEP', {
+      tourName,
+      step: currentStep - 1
+    })
+    stats.sendEv('教程', '上一步', tourName)
  },
  getOptions: (isShowHighlight) => {
    return {
--- a/frontend/src/views/node/NodeDetail.vue
+++ b/frontend/src/views/node/NodeDetail.vue
@@ -86,11 +86,13 @@ export default {
          if (currentStep === 3) {
            this.activeTabName = 'overview'
          }
+          this.$utils.tour.prevStep('node-detail', currentStep)
        },
        onNextStep: (currentStep) => {
          if (currentStep === 2) {
            this.activeTabName = 'installation'
          }
+          this.$utils.tour.nextStep('node-detail', currentStep)
        }
      }
    }
@@ -123,6 +125,7 @@ export default {
  mounted () {
    if (!this.$utils.tour.isFinishedTour('node-detail')) {
      this.$tours['node-detail'].start()
+      this.$st.sendEv('教程', '开始', 'node-detail')
    }
  }
 }
--- a/frontend/src/views/schedule/ScheduleList.vue
+++ b/frontend/src/views/schedule/ScheduleList.vue
@@ -281,6 +281,7 @@ export default {
          if (currentStep === 2) {
            this.dialogVisible = false
          }
+          this.$utils.tour.prevStep('schedule-list', currentStep)
        },
        onNextStep: (currentStep) => {
          if (currentStep === 1) {
@@ -288,6 +289,7 @@ export default {
            this.dialogVisible = true
            this.$store.commit('schedule/SET_SCHEDULE_FORM', { node_ids: [] })
          }
+          this.$utils.tour.nextStep('schedule-list', currentStep)
        }
      },
      tourAddSteps: [
@@ -365,6 +367,7 @@ export default {
          } else if (currentStep === 6) {
            this.isShowCron = true
          }
+          this.$utils.tour.prevStep('schedule-list-add', currentStep)
        },
        onNextStep: (currentStep) => {
          if (currentStep === 3) {
@@ -372,6 +375,7 @@ export default {
          } else if (currentStep === 5) {
            this.isShowCron = false
          }
+          this.$utils.tour.nextStep('schedule-list-add', currentStep)
        }
      }
    }
@@ -418,6 +422,7 @@ export default {
      if (!this.$utils.tour.isFinishedTour('schedule-list-add')) {
        setTimeout(() => {
          this.$tours['schedule-list-add'].start()
+          this.$st.sendEv('教程', '开始', 'schedule-list-add')
        }, 500)
      }
    },
@@ -528,6 +533,7 @@ export default {
    if (!this.isDisabledSpiderSchedule) {
      if (!this.$utils.tour.isFinishedTour('schedule-list')) {
        this.$tours['schedule-list'].start()
+        this.$st.sendEv('教程', '开始', 'schedule-list')
      }
    }
  }
--- a/frontend/src/views/setting/Setting.vue
+++ b/frontend/src/views/setting/Setting.vue
@@ -180,6 +180,7 @@ export default {
          } else if (currentStep === 2) {
            this.activeName = 'notify'
          }
+          this.$utils.tour.prevStep('setting', currentStep)
        },
        onNextStep: (currentStep) => {
          if (currentStep === 0) {
@@ -187,8 +188,9 @@ export default {
          } else if (currentStep === 1) {
            this.activeName = 'global-variable'
          }
+          this.$utils.tour.nextStep('setting', currentStep)
        }
-      },
+      }
    }
  },
  computed: {
@@ -260,6 +262,7 @@ export default {
  mounted () {
    if (!this.$utils.tour.isFinishedTour('setting')) {
      this.$tours['setting'].start()
+      this.$st.sendEv('教程', '开始', 'setting')
    }
  }
 }
--- a/frontend/src/views/spider/SpiderDetail.vue
+++ b/frontend/src/views/spider/SpiderDetail.vue
@@ -143,6 +143,7 @@ export default {
          } else if (currentStep === 9) {
            this.activeTabName = 'environment'
          }
+          this.$utils.tour.prevStep('spider-detail', currentStep)
        },
        onNextStep: (currentStep) => {
          if (currentStep === 4) {
@@ -152,6 +153,7 @@ export default {
          } else if (currentStep === 8) {
            this.activeTabName = 'schedules'
          }
+          this.$utils.tour.nextStep('spider-detail', currentStep)
        }
      }
    }
@@ -188,6 +190,7 @@ export default {
        if (!this.$utils.tour.isFinishedTour('spider-detail-config')) {
          setTimeout(() => {
            this.$tours['spider-detail-config'].start()
+            this.$st.sendEv('教程', '开始', 'spider-detail-config')
          }, 100)
        }
      }
@@ -222,6 +225,7 @@ export default {
  mounted () {
    if (!this.$utils.tour.isFinishedTour('spider-detail')) {
      this.$tours['spider-detail'].start()
+      this.$st.sendEv('教程', '开始', 'spider-detail')
    }
  }
 }
--- a/frontend/src/views/spider/SpiderList.vue
+++ b/frontend/src/views/spider/SpiderList.vue
@@ -386,6 +386,12 @@ export default {
      tourCallbacks: {
        onStop: () => {
          this.$utils.tour.finishTour('spider-list')
+        },
+        onPreviousStep: (currentStep) => {
+          this.$utils.tour.prevStep('spider-list', currentStep)
+        },
+        onNextStep: (currentStep) => {
+          this.$utils.tour.nextStep('spider-list', currentStep)
        }
      },
      tourAddSteps: [
@@ -463,11 +469,13 @@ export default {
          if (currentStep === 7) {
            this.spiderType = 'customized'
          }
+          this.$utils.tour.prevStep('spider-list-add', currentStep)
        },
        onNextStep: (currentStep) => {
          if (currentStep === 6) {
            this.spiderType = 'configurable'
          }
+          this.$utils.tour.nextStep('spider-list-add', currentStep)
        }
      }
    }
@@ -517,6 +525,7 @@ export default {
      setTimeout(() => {
        if (!this.$utils.tour.isFinishedTour('spider-list-add')) {
          this.$tours['spider-list-add'].start()
+          this.$st.sendEv('教程', '开始', 'spider-list-add')
        }
      }, 300)
    },
@@ -751,6 +760,7 @@ export default {

    if (!this.$utils.tour.isFinishedTour('spider-list')) {
      this.$tours['spider-list'].start()
+      this.$st.sendEv('教程', '开始', 'spider-list')
    }
  }
 }
--- a/frontend/src/views/task/TaskDetail.vue
+++ b/frontend/src/views/task/TaskDetail.vue
@@ -122,6 +122,7 @@ export default {
          } else if (currentStep === 6) {
            this.activeTabName = 'log'
          }
+          this.$utils.tour.prevStep('task-detail', currentStep)
        },
        onNextStep: (currentStep) => {
          if (currentStep === 4) {
@@ -129,6 +130,7 @@ export default {
          } else if (currentStep === 5) {
            this.activeTabName = 'results'
          }
+          this.$utils.tour.nextStep('task-detail', currentStep)
        }
      }
    }
@@ -201,6 +203,7 @@ export default {
  mounted () {
    if (!this.$utils.tour.isFinishedTour('task-detail')) {
      this.$tours['task-detail'].start()
+      this.$st.sendEv('教程', '开始', 'task-detail')
    }
  },
  destroyed () {
--- a/frontend/src/views/task/TaskList.vue
+++ b/frontend/src/views/task/TaskList.vue
@@ -236,8 +236,10 @@ export default {
          this.$utils.tour.finishTour('task-list')
        },
        onPreviousStep: (currentStep) => {
+          this.$utils.tour.prevStep('task-list', currentStep)
        },
        onNextStep: (currentStep) => {
+          this.$utils.tour.nextStep('task-list', currentStep)
        }
      }
    }
@@ -401,6 +403,7 @@ export default {

    if (!this.$utils.tour.isFinishedTour('task-list')) {
      this.$tours['task-list'].start()
+      this.$st.sendEv('教程', '开始', 'task-list')
    }
  },
  destroyed () {