更新依赖安装逻辑

frontend/src/components/Node/NodeInstallation.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="node-installation">
+    <el-form inline>
+      <el-form-item>
+        <el-input
+          v-model="depName"
+          style="width: 240px"
+          :placeholder="$t('Search Dependencies')"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button icon="el-icon-search" type="success" @click="getDepList">
+          {{$t('Search')}}
+        </el-button>
+      </el-form-item>
+    </el-form>
+    <el-tabs v-model="activeTab">
+      <el-tab-pane v-for="lang in langList" :key="lang.name" :label="lang.name" :name="lang.executable_name"/>
+    </el-tabs>
+    <template v-if="activeLang.installed">
+      <el-table
+        :data="depList"
+        :empty-text="depName ? $t('No Data') : $t('Please search dependencies')"
+        v-loading="loading"
+      >
+        <el-table-column
+          :label="$t('Name')"
+          prop="name"
+        />
+        <el-table-column
+          :label="$t('Version')"
+          prop="version"
+        />
+        <el-table-column
+          :label="$t('Description')"
+          prop="description"
+        />
+        <el-table-column
+          :label="$t('Installed')"
+          prop="installed"
+        />
+      </el-table>
+    </template>
+    <template v-else>
+      <div class="install-wrapper">
+        <h3>{{activeLang.name + $t(' is not installed, do you want to install it?')}}</h3>
+        <el-button type="primary" style="width: 240px;font-weight: bolder;font-size: 18px">
+          {{$t('Install')}}
+        </el-button>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import {
+  mapState
+} from 'vuex'
+
+export default {
+  name: 'NodeInstallation',
+  data () {
+    return {
+      activeTab: '',
+      langList: [],
+      depName: '',
+      depList: [],
+      loading: false
+    }
+  },
+  computed: {
+    ...mapState('node', [
+      'nodeForm'
+    ]),
+    activeLang () {
+      for (let i = 0; i < this.langList.length; i++) {
+        if (this.langList[i].executable_name === this.activeTab) {
+          return this.langList[i]
+        }
+      }
+      return {}
+    }
+  },
+  methods: {
+    async getDepList () {
+      const res = await this.$request.get(`/nodes/${this.nodeForm._id}/deps`, {
+        lang: this.activeLang.executable_name,
+        dep_name: this.depName
+      })
+      this.depList = res.data.data
+    }
+  },
+  async created () {
+    const arr = this.$route.path.split('/')
+    const id = arr[arr.length - 1]
+    const res = await this.$request.get(`/nodes/${id}/langs`)
+    this.langList = res.data.data
+    this.activeTab = this.langList[0].executable_name || ''
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

frontend/src/i18n/zh.js

@@ -65,6 +65,7 @@ export default {
   'Back': '返回',
   'New File': '新建文件',
   'Rename': '重命名',
+  'Install': '安装',
 
   // 主页
   'Total Tasks': '总任务数',
@@ -85,6 +86,8 @@ export default {
   'Node Network': '节点拓扑图',
   'Master': '主节点',
   'Worker': '工作节点',
+  'Installation': '安装',
+  'Search Dependencies': '搜索依赖',
 
   // 节点列表
   'IP': 'IP地址',
@@ -290,7 +293,10 @@ export default {
   'NOTE: When uploading a zip file, please zip your spider files from the ROOT DIRECTORY.': '注意: 上传 zip 文件时，请从 根目录 下开始压缩爬虫文件。',
   'English': 'English',
   'Are you sure to delete the schedule task?': '确定删除定时任务?',
+  ' is not installed, do you want to install it?': ' 还没有安装，您是否打算安装它?',
   'Disclaimer': '免责声明',
+  'Please search dependencies': '请搜索依赖',
+  'No Data': '暂无数据',
 
   // 登录
   'Sign in': '登录',

frontend/src/store/modules/node.js

@@ -3,7 +3,7 @@ import request from '../../api/request'
 const state = {
   // NodeList
   nodeList: [],
-  nodeForm: { _id: {} },
+  nodeForm: {},
 
   // spider to deploy/run
   activeSpider: {}

frontend/src/views/node/NodeDetail.vue

@@ -13,6 +13,9 @@
       <el-tab-pane :label="$t('Overview')" name="overview">
         <node-overview></node-overview>
       </el-tab-pane>
+      <el-tab-pane :label="$t('Installation')" name="installation">
+        <node-installation></node-installation>
+      </el-tab-pane>
       <el-tab-pane :label="$t('Deployed Spiders')" name="spiders" v-if="false">
         {{$t('Deployed Spiders')}}
       </el-tab-pane>
@@ -25,11 +28,13 @@ import {
   mapState
 } from 'vuex'
 import NodeOverview from '../../components/Overview/NodeOverview'
+import NodeInstallation from '../../components/Node/NodeInstallation'
 
 export default {
   name: 'NodeDetail',
   components: {
-    NodeOverview
+    NodeOverview,
+    NodeInstallation
   },
   data () {
     return {
@@ -43,7 +48,9 @@ export default {
     ])
   },
   methods: {
-    onTabClick () {
+    onTabClick (name) {
+      if (name === 'installation') {
+      }
     },
     onNodeChange (id) {
       this.$router.push(`/nodes/${id}`)