添加节点详情教程

frontend/src/components/Node/NodeInstallation.vue

@@ -1,16 +1,20 @@
 <template>
   <div class="node-installation">
-    <el-form inline>
+    <el-form class="search-form" inline>
       <el-form-item>
-        <el-autocomplete size="small" clearable @clear="onSearch"
-                         v-if="activeLang.executable_name === 'python'"
-                         v-model="depName"
-                         style="width: 240px"
-                         :placeholder="$t('Search Dependencies')"
-                         :fetchSuggestions="fetchAllDepList"
-                         :minlength="2"
-                         @select="onSearch"
-        ></el-autocomplete>
+        <el-autocomplete
+          class="search-box"
+          size="small"
+          clearable
+          v-if="activeLang.executable_name === 'python'"
+          v-model="depName"
+          style="width: 240px"
+          :placeholder="$t('Search Dependencies')"
+          :fetchSuggestions="fetchAllDepList"
+          :minlength="2"
+          @select="onSearch"
+          @clear="onSearch"
+        />
         <el-input
           v-else
           v-model="depName"

frontend/src/components/Overview/NodeOverview.vue

@@ -2,14 +2,16 @@
   <el-row>
     <el-col :span="12">
       <!--last tasks-->
-      <el-row>
+      <el-row class="latest-tasks-wrapper">
         <task-table-view :title="$t('Latest Tasks')"/>
       </el-row>
     </el-col>
 
     <el-col :span="12">
-      <!--basic info-->
-      <node-info-view/>
+      <el-row class="node-info-view-wrapper">
+        <!--basic info-->
+        <node-info-view/>
+      </el-row>
     </el-col>
   </el-row>
 </template>

frontend/src/i18n/zh.js

@@ -460,6 +460,11 @@ docker run -d --restart always --name crawlab_worker \\
   'Here you can view the log<br> details for the task. The<br> log is automatically updated.': '这里您可以查看该任务<br>的日志详情，日志是<br>自动更新的',
   'Here you can view the results scraped by the spider.<br><br><strong>Note:</strong> If you find your results here are empty, please refer to the <a href="https://docs.crawlab.cn/Integration/" target="_blank" style="color: #409EFF">Documentation (Chinese)</a> about how to integrate your spider into Crawlab.': '这里您可以查看爬虫抓取下来的结果<br><br><strong>注意:</strong> 如果这里结果是空的，请参考 <a href="https://docs.crawlab.cn/Integration/" target="_blank" style="color: #409EFF">相关文档</a> 来集成您的爬虫到 Crawlab',
   'You can download your results as a CSV file by clicking this button.': '您可以点击下载结果为 CSV 文件',
+  'Switch between different nodes.': '在节点间切换',
+  'You can view the latest executed spider tasks.': '您可以查看最近执行过的爬虫任务',
+  'This is the detailed node info.': '这是节点详情',
+  'Here you can install<br> dependencies and modules<br> that are required<br> in your spiders.': '这里您可以安装您爬虫中<br>需要的依赖或模块',
+  'You can search dependencies in the search box and install them by clicking the "Install" button below.': '您可以在搜索框中搜索依赖并点击下面的"安装"按钮来进行安装',
 
   // 其他
   'Star crawlab-team/crawlab on GitHub': '在 GitHub 上为 Crawlab 加星吧'

frontend/src/views/node/NodeDetail.vue

@@ -1,5 +1,14 @@
 <template>
   <div class="app-container">
+    <!--tour-->
+    <v-tour
+      name="node-detail"
+      :steps="tourSteps"
+      :callbacks="tourCallbacks"
+      :options="$utils.tour.getOptions(true)"
+    />
+    <!--./tour-->
+
     <!--selector-->
     <div class="selector">
       <label class="label">{{$t('Node')}}: </label>
@@ -38,7 +47,52 @@ export default {
   },
   data () {
     return {
-      activeTabName: 'overview'
+      activeTabName: 'overview',
+      tourSteps: [
+        // overview
+        {
+          target: '.selector',
+          content: this.$t('Switch between different nodes.')
+        },
+        {
+          target: '.latest-tasks-wrapper',
+          content: this.$t('You can view the latest executed spider tasks.'),
+          params: {
+            placement: 'right'
+          }
+        },
+        {
+          target: '.node-info-view-wrapper',
+          content: this.$t('This is the detailed node info.'),
+          params: {
+            placement: 'left'
+          }
+        },
+        // installation
+        {
+          target: '#tab-installation',
+          content: this.$t('Here you can install<br> dependencies and modules<br> that are required<br> in your spiders.')
+        },
+        {
+          target: '.search-box',
+          content: this.$t('You can search dependencies in the search box and install them by clicking the "Install" button below.')
+        }
+      ],
+      tourCallbacks: {
+        onStop: () => {
+          this.$utils.tour.finishTour('node-detail')
+        },
+        onPreviousStep: (currentStep) => {
+          if (currentStep === 3) {
+            this.activeTabName = 'overview'
+          }
+        },
+        onNextStep: (currentStep) => {
+          if (currentStep === 2) {
+            this.activeTabName = 'installation'
+          }
+        }
+      }
     }
   },
   computed: {
@@ -65,6 +119,11 @@ export default {
 
     // get node task list
     this.$store.dispatch('node/getTaskList', this.$route.params.id)
+  },
+  mounted () {
+    if (!this.$utils.tour.isFinishedTour('node-detail')) {
+      this.$tours['node-detail'].start()
+    }
   }
 }
 </script>