@@ -202,7 +203,18 @@ export default { dirDialogVisible: false, fileDialogVisible: false, nodeExpandedDict: {}, - isShowDeleteNav: false + 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') + } + } } }, computed: { diff --git a/frontend/src/i18n/zh.js b/frontend/src/i18n/zh.js index c9c1d47a..9a7fefe8 100644 --- a/frontend/src/i18n/zh.js +++ b/frontend/src/i18n/zh.js @@ -406,6 +406,35 @@ docker run -d --restart always --name crawlab_worker \\ 更多信息，请参考 [官方文档](https://docs.crawlab.cn)。 `, + // 教程 + 'Skip': '跳过', + 'Previous': '上一步', + 'Next': '下一步', + 'Finish': '结束', + 'Click to add a new spider': '点击并添加爬虫', + 'You can view your created spiders here.
Click a table row to view spider details.': '您可以查看创建的爬虫
点击行来查看爬虫详情', + 'View a list of Configurable Spiders': '查看可配置爬虫列表', + 'View a list of Customized Spiders': '查看自定义爬虫列表', + 'Customized Spider is a highly customized spider, which is able to run on any programming language and any web crawler framework.': '自定义爬虫是高度自定义化的爬虫，能够运行任何编程语言和爬虫框架', + 'Configurable Spider is a spider defined by config data, aimed at streamlining spider development and improving dev efficiency.': '可配置爬虫被配置数据所定义，旨在将爬虫开发流程化以及提高爬虫开发效率', + '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 Customized Spider': '当爬虫被触发时执行的一行 Shell 命令（仅自定义爬虫有效）', + 'Where the results are stored in the database': '抓取结果在数据库中储存的位置', + 'Upload a zip file containing all spider files to create the spider (only available for Customized Spider)': '上传一个包含所有爬虫文件的 zip 文件，然后创建爬虫（仅自定义爬虫有效）', + 'The spider template to create from (only available for Configurable Spider)': '创建爬虫时引用的模版（仅可配置爬虫有效）', + 'Click to confirm to add the spider': '点击并确认添加爬虫', + 'You can switch to each section of the spider detail.': '您可以切换到爬虫详情的每一个部分', + 'You can switch to different spider using this selector.': '您可以通过这个选择器切换不同的爬虫', + 'You can view latest tasks for this spider and click each row to view task detail.': '您可以查看最近的爬虫任务以及点击行来查看任务详情', + 'You can edit the detail info for this spider.': '您可以编辑爬虫详情信息', + 'Here you can action on the spider, including running a task, uploading a zip file and save the spider info.': '这里您可以对爬虫进行操作，包括运行爬虫任务、上传 zip 文件以及保存爬虫信息', + 'File navigation panel.

You can right click on
each item to create or delete
a file/directory.': '文件导航栏

您可以右键点击一个元素
来添加或删除文件/文件夹', + 'Click to add a file or directory
on the root directory.': '点击并添加一个文件
或文件夹', + 'You can edit, save, rename
and delete the selected file
in this box.': '在这个栏位中，您可以
编辑、保存、重命名、
删除所选择的文件', + 'Here you can add environment variables that will be passed to the spider program when running a task.': '这里您可以添加环境变量，这些环境变量会被传入运行的爬虫程序中', + 'You can add, edit and delete schedules (cron jobs) for the 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/store/modules/spider.js b/frontend/src/store/modules/spider.js index ac1fc81b..b6dcf223 100644 --- a/frontend/src/store/modules/spider.js +++ b/frontend/src/store/modules/spider.js @@ -105,15 +105,9 @@ const actions = { }, editSpider ({ state, dispatch }) { return request.post(`/spiders/${state.spiderForm._id}`, state.spiderForm) - .then(() => { - dispatch('getSpiderList') - }) }, deleteSpider ({ state, dispatch }, id) { return request.delete(`/spiders/${id}`) - .then(() => { - dispatch('getSpiderList') - }) }, getSpiderData ({ state, commit }, id) { return request.get(`/spiders/${id}`) 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..e7843f35 --- /dev/null +++ b/frontend/src/utils/tour.js @@ -0,0 +1,41 @@ +import i18n from '../i18n' + +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)) + }, + getOptions: (isShowHighlight) => { + return { + labels: { + buttonSkip: i18n.t('Skip'), + buttonPrevious: i18n.t('Previous'), + buttonNext: i18n.t('Next'), + buttonStop: i18n.t('Finish') + }, + highlight: isShowHighlight + } + } +} 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" > - + @@ -53,10 +59,11 @@ export default { } }, data () { - return { - } + return {} }, async created () { + }, + mounted () { } } diff --git a/frontend/src/views/schedule/ScheduleList.vue b/frontend/src/views/schedule/ScheduleList.vue index c1955dd5..0fb2a7ab 100644 --- a/frontend/src/views/schedule/ScheduleList.vue +++ b/frontend/src/views/schedule/ScheduleList.vue @@ -108,7 +108,7 @@ - +
diff --git a/frontend/src/views/spider/SpiderDetail.vue b/frontend/src/views/spider/SpiderDetail.vue index 46626f63..04d8d102 100644 --- a/frontend/src/views/spider/SpiderDetail.vue +++ b/frontend/src/views/spider/SpiderDetail.vue @@ -1,9 +1,18 @@