From 275e74936592347a8813db21742f07480ec6b801 Mon Sep 17 00:00:00 2001 From: marvzhang Date: Thu, 30 Jan 2020 09:56:45 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=88=AC=E8=99=AB=E5=88=97?= =?UTF-8?q?=E8=A1=A8=E6=95=99=E7=A8=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docker-compose.yml | 5 + frontend/src/App.vue | 4 +- frontend/src/i18n/zh.js | 13 ++- frontend/src/utils/tour.js | 18 ++-- frontend/src/views/spider/SpiderList.vue | 116 ++++++++++++++++++++--- 5 files changed, 134 insertions(+), 22 deletions(-) diff --git a/docker-compose.yml b/docker-compose.yml index ac5c2dab..637083b2 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -60,3 +60,8 @@ services: # - "/opt/crawlab/redis/data:/data" # make data persistent 持久化 # ports: # - "6379:6379" # expose port to host machine 暴露接口到宿主机 + # splash: # use Splash to run spiders on dynamic pages + # image: scrapinghub/splash + # container_name: splash + # ports: + # - "8050:8050" diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 66f45829..1e771837 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -141,7 +141,9 @@ export default { } .v-tour__target--highlighted { - box-shadow: 0 0 0 4px #f56c6c !important; + box-shadow: none !important; + /*box-shadow: 0 0 0 4px #f56c6c !important;*/ + border: 3px solid #f56c6c; } .v-step__button { diff --git a/frontend/src/i18n/zh.js b/frontend/src/i18n/zh.js index ca15cdb7..a7e06890 100644 --- a/frontend/src/i18n/zh.js +++ b/frontend/src/i18n/zh.js @@ -413,8 +413,17 @@ docker run -d --restart always --name crawlab_worker \\ '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': '查看可配置爬虫列表', + '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': '点击并确认添加爬虫', // 其他 'Star crawlab-team/crawlab on GitHub': '在 GitHub 上为 Crawlab 加星吧' diff --git a/frontend/src/utils/tour.js b/frontend/src/utils/tour.js index ebe592ae..e7843f35 100644 --- a/frontend/src/utils/tour.js +++ b/frontend/src/utils/tour.js @@ -27,13 +27,15 @@ 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 + 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/spider/SpiderList.vue b/frontend/src/views/spider/SpiderList.vue index 7cd93dc5..d01b657f 100644 --- a/frontend/src/views/spider/SpiderList.vue +++ b/frontend/src/views/spider/SpiderList.vue @@ -2,10 +2,16 @@
+ @@ -47,16 +53,16 @@ - + - + - + - + - + {{$t('Upload')}} @@ -99,7 +105,7 @@ - +
- {{$t('Add')}} + {{$t('Add')}}
@@ -374,12 +380,94 @@ export default { { target: '.btn.add', content: this.$t('Click to add a new spider') - }, + } ], tourCallbacks: { onStop: () => { this.$utils.tour.finishTour('spider-list') } + }, + tourAddSteps: [ + { + target: '#tab-customized', + content: this.$t('Customized Spider is a highly customized spider, which is able to run on any programming language and any web crawler framework.'), + params: { + placement: 'bottom', + highlight: false + } + }, + { + target: '#tab-configurable', + content: this.$t('Configurable Spider is a spider defined by config data, aimed at streamlining spider development and improving dev efficiency.'), + params: { + placement: 'bottom', + highlight: false + } + }, + { + target: '#spider-name', + content: this.$t('Unique identifier for the spider'), + params: { + placement: 'right' + } + }, + { + target: '#display-name', + content: this.$t('How the spider is displayed on Crawlab'), + params: { + placement: 'right' + } + }, + { + target: '#cmd', + content: this.$t('A shell command to be executed when the spider is triggered to run (only available for Customized Spider'), + params: { + placement: 'right' + } + }, + { + target: '#col', + content: this.$t('Where the results are stored in the database'), + params: { + placement: 'right' + } + }, + { + target: '#upload', + content: this.$t('Upload a zip file containing all spider files to create the spider (only available for Customized Spider)'), + params: { + placement: 'right' + } + }, + { + target: '#template', + content: this.$t('The spider template to create from (only available for Configurable Spider)'), + params: { + placement: 'right' + } + }, + { + target: '#add', + content: this.$t('Click to confirm to add the spider'), + params: { + placement: 'right' + } + } + ], + tourAddCallbacks: { + onStop: () => { + this.$utils.tour.finishTour('spider-list-add') + }, + onPreviousStep: (currentStep) => { + if (currentStep === 7) { + this.spiderType = 'customized' + } + }, + onNextStep: (currentStep) => { + if (currentStep === 6) { + this.spiderType = 'configurable' + } + } } } }, @@ -424,6 +512,12 @@ export default { template: this.templateList[0] }) this.addDialogVisible = true + + setTimeout(() => { + if (!this.$utils.tour.isFinishedTour('spider-list-add')) { + this.$tours['spider-list-add'].start() + } + }, 300) }, onAddConfigurable () { this.$refs['addConfigurableForm'].validate(async res => { @@ -656,7 +750,7 @@ export default { }) if (!this.$utils.tour.isFinishedTour('spider-list')) { - this.$tours['spider-list-tour'].start() + this.$tours['spider-list'].start() } } }