添加fancytree

package.json

@@ -26,8 +26,10 @@
     "highlightjs-line-numbers.js": "^2.7.0",
     "htmlhint": "^0.13.0",
     "jquery": "^1.12.4",
+    "jquery.fancytree": "^2.35.0",
     "js-cookie": "2.2.0",
     "jshint": "^2.11.1",
+    "less-loader": "^6.1.0",
     "lib-flexible": "^0.3.2",
     "mavon-editor": "^2.7.7",
     "monaco-editor-vue": "^1.0.10",

src/components/MonacoEditorVue/index.js

@@ -31,6 +31,8 @@ export default {
 
     value() {
       this.editor && this.value !== this._getValue() && this._setValue(this.value);
+      // 滚动到顶部
+      this.editor.setScrollPosition({scrollTop: 0,scrollLeft: 0});
     },
 
     language() {

src/components/preview/SimTextPreview.vue

@@ -50,7 +50,7 @@
   import api from '@/api/file-api'
   import markdownApi from '@/api/markdown-api'
 
-  import { lineWrapping } from '@/utils/file-type'
+  import { lineWrapping,suffix } from '@/utils/file-type'
 
   import MonacoEditor from '../MonacoEditorVue'
   import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
@@ -153,16 +153,14 @@
           dangerouslyUseHTMLString: true,
           message: '<span>&nbsp;&nbsp;正在加载数据...</span>'
         })
-        let suffix = file.suffix
-
         let languages = monaco.languages.getLanguages();
-        const languagesIndex = languages.findIndex(item => item.extensions && item.extensions.includes('.'+suffix))
+        const languagesIndex = languages.findIndex(item => item.extensions && item.extensions.includes('.'+file.suffix))
         if(languagesIndex > -1){
           this.language = languages[languagesIndex].id
         }else{
           this.language = this.defalutLanguage
         }
-        if(lineWrapping.includes(suffix)) {
+        if(lineWrapping.includes(file.suffix)) {
           this.options.wordWrap = 'wordWrapColumn'
           this.lineWrapping = true
         }else{
@@ -200,6 +198,12 @@
     },
     methods:{
       treeNodeClick(row) {
+        if(row.isFolder){
+          return
+        }
+        if(!suffix.simText.includes(row.suffix)){
+          return
+        }
         this.loading = this.$message({
           iconClass: 'el-icon-loading',
           type: 'info',
@@ -207,22 +211,19 @@
           dangerouslyUseHTMLString: true,
           message: '<span>&nbsp;&nbsp;正在加载数据...</span>'
         })
-        let suffix = row.suffix
-
         let languages = monaco.languages.getLanguages();
-        const languagesIndex = languages.findIndex(item => item.extensions && item.extensions.includes('.'+suffix))
+        const languagesIndex = languages.findIndex(item => item.extensions && item.extensions.includes('.'+row.suffix))
         if(languagesIndex > -1){
           this.language = languages[languagesIndex].id
         }else{
           this.language = this.defalutLanguage
         }
-        if(lineWrapping.includes(suffix)) {
+        if(lineWrapping.includes(row.suffix)) {
           this.options.wordWrap = 'wordWrapColumn'
           this.lineWrapping = true
         }else{
           this.options.wordWrap = ''
         }
-        console.log(row)
         api.previewTextByPath({
           path: row.path,
           username: this.$store.state.user.name
@@ -446,10 +447,26 @@
       border-top: 1px solid #ccc;
       display: flex;
       .file-contents{
+        background: #1e1e1e;
         width: 300px;
-        height: 500px;
+        /*overflow: auto;*/
         overflow-y: scroll;
         overflow-x: hidden;
+
+        .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
+          background-color: #2f2f2f;
+        }
+
+        .el-tree {
+          background: #1e1e1e;
+          color: #c5c5c5;
+
+          .el-tree-node__content:hover{
+            background-color: #2f2f2f;
+          }
+
+        }
+
         .svg-icon {
           font-size: 18px;
         }
@@ -461,5 +478,15 @@
     }
   }
 
+  ::-webkit-scrollbar-thumb {
+    border: unset!important;
+    background-color: #565656!important;
+    -webkit-border-radius: unset!important;
+  }
+
+  ::-webkit-scrollbar-track-piece {
+    background-color: unset!important;
+    -webkit-border-radius: 3px;
+  }
 
 </style>

src/utils/file-type.js

@@ -5,7 +5,7 @@ export const suffix = {
     'vue','asp','jsp',
     'xml','xsl','iml','m','bas','prg','cmd',
     'sass','sas','php','lst','key','pem','log',
-    'cmake','db','gradle','bat'
+    'cmake','db','gradle','bat',''
   ],
   compressedFile: [
     'zip','tar','jar','tar.gz','tgz','tar.bz2'

src/views/demo/index.vue

@@ -1,10 +1,20 @@
 <template>
-  <div class="dir-tree">
-    <file-tree :directoryTreeData="compressedFileData"></file-tree>
+  <div id="dir-tree">
+    <!--<file-tree :directoryTreeData="compressedFileData"></file-tree>-->
   </div>
 </template>
 
 <script>
+
+  import $ from "jquery";
+
+  import 'jquery.fancytree/dist/skin-lion/ui.fancytree.less';  // CSS or LESS
+
+  import {createTree} from 'jquery.fancytree';
+
+  import 'jquery.fancytree/dist/modules/jquery.fancytree.edit';
+  import 'jquery.fancytree/dist/modules/jquery.fancytree.filter';
+
   import api from '@/api/file-api'
   import FileTree from"@/components/FileTree"
   export default {
@@ -15,6 +25,18 @@
       }
     },
     mounted() {
+
+      const tree = createTree('#dir-tree', {
+        extensions: ['edit', 'filter'],
+        source: [ { "title": "Node 1", "key": "1" },
+          {"title": "Folder 2","key": "2","folder": true,"children": [
+              { "title": "Node 2.1", "key": "3" },
+              { "title": "Node 2.2", "key": "4" }
+            ]}
+        ]
+      });
+
+
       api.listfiles({
         username: this.$store.state.user.name,
         path: "",
@@ -31,75 +53,10 @@
 </script>
 
 <style lang="scss" scoped>
-  .dir-tree{
+  #dir-tree{
     height: 500px;
     width: 250px;
     overflow: auto;
   }
 </style>
 
-
-<!--<template>-->
-<!--  <a-directory-tree-->
-<!--    :treeData="treeData"-->
-<!--    :replaceFields="replaceFields"-->
-<!--    :loadData="onLoadData"-->
-<!--    @select="onSelect"-->
-<!--    @expand="onExpand">-->
-<!--  </a-directory-tree>-->
-<!--</template>-->
-<!--<script>-->
-<!--  import api from '@/api/file-api'-->
-<!--  import IconFile from "@/components/Icon/IconFile"-->
-<!--  import { iconClass,suffix } from '@/utils/file-type'-->
-<!--  export default {-->
-<!--    components: {IconFile},-->
-<!--    mounted() {-->
-<!--      this.listFile()-->
-<!--    },-->
-<!--    data(){-->
-<!--      return ({-->
-<!--        treeData: [],-->
-<!--        replaceFields: {-->
-<!--          key: 'path',-->
-<!--          title: 'name',-->
-<!--        }-->
-<!--      })-->
-<!--    },-->
-<!--    methods: {-->
-<!--      listFile(){-->
-<!--        api.listfiles({-->
-<!--          username: this.$store.state.user.name,-->
-<!--          path: "",-->
-<!--        }).then(res => {-->
-<!--          this.treeData = res.data.map(data => {-->
-<!--            data.slots = { icon: 'meh' }-->
-<!--            return data-->
-<!--          })-->
-<!--        })-->
-<!--      },-->
-<!--      onLoadData(treeNode){-->
-<!--        return new Promise(resolve => {-->
-<!--          if (treeNode.dataRef.children) {-->
-<!--            resolve();-->
-<!--            return;-->
-<!--          }-->
-<!--          api.listfiles({-->
-<!--            username: this.$store.state.user.name,-->
-<!--            path: treeNode.dataRef.path,-->
-<!--          }).then(res => {-->
-<!--            treeNode.dataRef.children = res.data-->
-<!--            this.treeData = [...this.treeData]-->
-<!--            resolve()-->
-<!--          })-->
-<!--        });-->
-<!--      },-->
-<!--      onSelect(keys, event) {-->
-<!--        console.log('Trigger Select', keys, event);-->
-<!--      },-->
-<!--      onExpand() {-->
-<!--        console.log('Trigger Expand');-->
-<!--      },-->
-<!--    },-->
-<!--  };-->
-<!--</script>-->