updated file edit

frontend/src/components/File/FileDetail.vue

@@ -3,13 +3,11 @@
     class="file-content"
     :options="options"
     v-model="fileContent"
+    @change="onChange"
   />
 </template>
 
 <script>
-import {
-  mapState
-} from 'vuex'
 import { codemirror } from 'vue-codemirror'
 
 require('codemirror/mode/python/python.js')
@@ -32,8 +30,11 @@ export default {
       internalFileContent: '',
       options: {
         theme: 'darcula',
-        mode: 'python',
-        lineNumbers: true
+        // mode: 'javascript',
+        mode: { name: 'javascript', json: true },
+        lineNumbers: true,
+        line: true,
+        matchBrackets: true
       }
     }
   },
@@ -56,6 +57,10 @@ export default {
 <style scoped>
   .file-content {
     border: 1px solid #eaecef;
+    height: 480px;
+  }
+
+  .file-content >>> .CodeMirror {
     min-height: 100%;
   }
 </style>

frontend/src/components/File/FileList.vue

@@ -2,11 +2,20 @@
   <div class="file-list-container">
     <div class="top-part">
       <!--back-->
-      <div class="action-container" v-if="showFile">
-        <el-button type="primary" size="small" style="margin-right: 10px;" @click="showFile=false">
+      <div class="action-container">
+        <el-button v-if="showFile" type="primary" size="small" style="margin-right: 10px;" @click="onBackFile">
           <font-awesome-icon :icon="['fa', 'arrow-left']"/>
           {{$t('Back')}}
         </el-button>
+        <el-button v-if="showFile" type="primary" size="small" style="margin-right: 10px;" @click="onFileSave">
+          <font-awesome-icon :icon="['fa', 'save']"/>
+          {{$t('Save')}}
+        </el-button>
+        <!--TODO: new files/directories-->
+        <el-button v-if="false" type="primary" size="small" style="margin-right: 10px;">
+          <font-awesome-icon :icon="['fa', 'file-alt']"/>
+          {{$t('New File')}}
+        </el-button>
       </div>
       <!--./back-->
 
@@ -15,16 +24,6 @@
         <div class="file-path">. / {{currentPath}}</div>
       </div>
       <!--./file path-->
-
-      <!--action-->
-      <div class="action-container">
-        <el-button type="primary" size="small">
-          <font-awesome-icon :icon="['fa', 'upload']"/>
-          {{$t('Upload')}}
-        </el-button>
-      </div>
-      <!--./action-->
-
     </div>
 
     <!--file list-->
@@ -38,6 +37,12 @@
               <font-awesome-icon v-if="item.is_dir" :icon="['fa', 'folder']" color="rgba(3,47,98,.5)"/>
               <font-awesome-icon v-else-if="item.path.match(/\.py$/)" :icon="['fab','python']"
                                  color="rgba(3,47,98,.5)"/>
+              <font-awesome-icon v-else-if="item.path.match(/\.js$/)" :icon="['fab','node-js']"
+                                 color="rgba(3,47,98,.5)"/>
+              <font-awesome-icon v-else-if="item.path.match(/\.(java|jar|class)$/)" :icon="['fab','java']"
+                                 color="rgba(3,47,98,.5)"/>
+              <font-awesome-icon v-else-if="item.path.match(/\.go$/)" :icon="['fab','go']"
+                                 color="rgba(3,47,98,.5)"/>
               <font-awesome-icon v-else-if="item.path.match(/\.zip$/)" :icon="['fa','file-archive']"
                                  color="rgba(3,47,98,.5)"/>
               <font-awesome-icon v-else icon="file-alt" color="rgba(3,47,98,.5)"/>
@@ -65,7 +70,7 @@ export default {
     return {
       code: 'var hello = \'world\'',
       isEdit: false,
-      showFile: false,
+      showFile: false
     }
   },
   computed: {
@@ -106,6 +111,7 @@ export default {
       } else {
         // 文件
         this.showFile = true
+        this.$store.commit('file/SET_CURRENT_CONTENT', '')
         this.$store.commit('file/SET_CURRENT_PATH', item.path)
         this.$store.dispatch('file/getFileContent', { path: item.path })
       }
@@ -117,6 +123,16 @@ export default {
       const path = arr.join(sep)
       this.$store.commit('file/SET_CURRENT_PATH', path)
       this.$store.dispatch('file/getFileList', { path: this.currentPath })
+    },
+    onFileSave () {
+      this.$store.dispatch('file/saveFileContent', { path: this.currentPath })
+        .then(() => {
+          this.$message.success(this.$t('Saved file successfully'))
+        })
+    },
+    onBackFile () {
+      this.showFile = false
+      this.onBack()
     }
   }
 }
@@ -125,6 +141,7 @@ export default {
 <style scoped lang="scss">
   .file-list-container {
     height: 100%;
+    min-height: 100%;
 
     .top-part {
       display: flex;

frontend/src/i18n/zh.js

@@ -61,6 +61,8 @@ export default {
   'Upload Zip File': '上传Zip文件',
   'Upload': '上传',
   'Item Threshold': '子项阈值',
+  'Back': '返回',
+  'New File': '新建文件',
 
   // 主页
   'Total Tasks': '总任务数',
@@ -223,5 +225,6 @@ export default {
   'Are you sure to deploy this spider?': '你确定要部署该爬虫?',
   'Are you sure to delete this spider?': '你确定要删除该爬虫?',
   'Spider info has been saved successfully': '爬虫信息已成功保存',
-  'Do you allow us to collect some statistics to improve Crawlab?': '您允许我们收集统计数据以更好地优化Crawlab？'
+  'Do you allow us to collect some statistics to improve Crawlab?': '您允许我们收集统计数据以更好地优化Crawlab？',
+  'Saved file successfully': '成功保存文件'
 }

frontend/src/store/modules/file.js

@@ -42,6 +42,12 @@ const actions = {
       .then(response => {
         commit('SET_FILE_CONTENT', response.data.data)
       })
+  },
+  saveFileContent ({ state, rootState }, payload) {
+    const { path } = payload
+    const spiderId = rootState.spider.spiderForm._id
+    const content = state.fileContent
+    return request.post(`/spiders/${spiderId}/file`, { content, path })
   }
 }