文本编辑器添加文件目录

babel.config.js

@@ -7,6 +7,7 @@ module.exports = {
       libraryName: 'vant',
       libraryDirectory: 'es',
       style: true
-    }, 'vant']
+    }, 'vant'],
+    ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }]
   ]
 }

package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@moefe/vue-aplayer": "^2.0.0-beta.5",
+    "ant-design-vue": "^1.6.2",
     "axios": "0.18.1",
     "clipboard": "^2.0.6",
     "cropperjs": "^1.5.6",

src/components/FileTree/index.vue

@@ -58,7 +58,9 @@
           let keys = []
           this.directoryTreeData.forEach(file => {
             if(!file.isLeaf){
-              keys.push(file.path)
+              if(keys.length < 1){
+                keys.push(file.path)
+              }
             }
           })
           return keys

src/components/preview/SimTextPreview.vue

@@ -356,7 +356,8 @@
 
     /deep/.content {
       border-top: unset!important;
-      background-color: #1e1e1e;
+      /*background-color: #1e1e1e;*/
+      background-color: #fff;
       .editor_main_storey {
         display: inline-block;
         position: absolute;
@@ -445,7 +446,16 @@
       border-top: 1px solid #ccc;
       display: flex;
       .file-contents{
-        width: 250px;
+        width: 300px;
+        height: 500px;
+        overflow-y: scroll;
+        overflow-x: hidden;
+        .svg-icon {
+          font-size: 18px;
+        }
+        /deep/.el-tree-node>.el-tree-node__children{
+          overflow: unset;
+        }
       }
 
     }

src/main.js

@@ -17,6 +17,11 @@ import VueWechatTitle from 'vue-wechat-title'
 // import 'we-vue/lib/style.css'
 import { Popup,Search, Button, Cell, CellGroup, Image, List, PullRefresh, SwipeCell, Col, Row, Divider, Sticky, NavBar, Icon, Tabbar, TabbarItem, ActionSheet, Field, Overlay, Checkbox, CheckboxGroup, Grid, GridItem} from 'vant';
 
+
+// ant-design-vue
+import { Tree } from 'ant-design-vue';
+Vue.use(Tree)
+
 // mavonEditor
 import mavonEditor from 'mavon-editor'
 import 'mavon-editor/dist/css/index.css'

src/router/index.js

@@ -166,18 +166,18 @@ export const constantRoutes = [
     ]
   },
 
-  // {
+  {
-  //   path: '/demo',
+    path: '/demo',
-  //   component: Layout,
+    component: Layout,
-  //   children: [
+    children: [
-  //     {
+      {
-  //       path: 'index',
+        path: 'index',
-  //       name: 'demo',
+        name: 'demo',
-  //       component: () => import('@/views/demo/index'),
+        component: () => import('@/views/demo/index'),
-  //       meta: { title: 'demo', icon: 'example' }
+        meta: { title: 'demo', icon: 'example' }
-  //     }
+      }
-  //   ]
+    ]
-  // },
+  },
 
   {
     path: '/markdown',

src/views/demo/index.vue

@@ -1,105 +1,105 @@
 <template>
-  <div id="app">
+  <div class="dir-tree">
-    <MonacoEditor
+    <file-tree :directoryTreeData="compressedFileData"></file-tree>
-      width="800"
-      height="500"
-      theme="vs-dark"
-      language="json"
-      :diffEditor="diffEditor"
-      original="..."
-      :value="value"
-      :options="options"
-      @change="onChange"
-    ></MonacoEditor>
   </div>
 </template>
 
 <script>
-  import { MonacoEditor,monaco} from 'monaco-editor-vue';
+  import api from '@/api/file-api'
+  import FileTree from"@/components/FileTree"
   export default {
-    name: "App",
+    components: {FileTree},
-    components: {
-      MonacoEditor
-    },
     data() {
       return {
-        options: {
+        compressedFileData: []
-          //Monaco Editor Options
-        },
-        diffEditor: false,
-        value: "{\n" +
-          "\t\"type\": \"team\",\n" +
-          "\t\"test\": {\n" +
-          "\t\t\"testPage\": \"tools/testing/run-tests.htm\",\n" +
-          "\t\t\"enabled\": true\n" +
-          "\t},\n" +
-          "    \"search\": {\n" +
-          "        \"excludeFolders\": [\n" +
-          "\t\t\t\".git\",\n" +
-          "\t\t\t\"node_modules\",\n" +
-          "\t\t\t\"tools/bin\",\n" +
-          "\t\t\t\"tools/counts\",\n" +
-          "\t\t\t\"tools/policheck\",\n" +
-          "\t\t\t\"tools/tfs_build_extensions\",\n" +
-          "\t\t\t\"tools/testing/jscoverage\",\n" +
-          "\t\t\t\"tools/testing/qunit\",\n" +
-          "\t\t\t\"tools/testing/chutzpah\",\n" +
-          "\t\t\t\"server.net\"\n" +
-          "        ]\n" +
-          "    },\n" +
-          "\t\"languages\": {\n" +
-          "\t\t\"vs.languages.typescript\": {\n" +
-          "\t\t\t\"validationSettings\": [{\n" +
-          "\t\t\t\t\"scope\":\"/\",\n" +
-          "\t\t\t\t\"noImplicitAny\":true,\n" +
-          "\t\t\t\t\"noLib\":false,\n" +
-          "\t\t\t\t\"extraLibs\":[],\n" +
-          "\t\t\t\t\"semanticValidation\":true,\n" +
-          "\t\t\t\t\"syntaxValidation\":true,\n" +
-          "\t\t\t\t\"codeGenTarget\":\"ES5\",\n" +
-          "\t\t\t\t\"moduleGenTarget\":\"\",\n" +
-          "\t\t\t\t\"lint\": {\n" +
-          "                    \"emptyBlocksWithoutComment\": \"warning\",\n" +
-          "                    \"curlyBracketsMustNotBeOmitted\": \"warning\",\n" +
-          "                    \"comparisonOperatorsNotStrict\": \"warning\",\n" +
-          "                    \"missingSemicolon\": \"warning\",\n" +
-          "                    \"unknownTypeOfResults\": \"warning\",\n" +
-          "                    \"semicolonsInsteadOfBlocks\": \"warning\",\n" +
-          "                    \"functionsInsideLoops\": \"warning\",\n" +
-          "                    \"functionsWithoutReturnType\": \"warning\",\n" +
-          "                    \"tripleSlashReferenceAlike\": \"warning\",\n" +
-          "                    \"unusedImports\": \"warning\",\n" +
-          "                    \"unusedVariables\": \"warning\",\n" +
-          "                    \"unusedFunctions\": \"warning\",\n" +
-          "                    \"unusedMembers\": \"warning\"\n" +
-          "                }\n" +
-          "\t\t\t}, \n" +
-          "\t\t\t{\n" +
-          "\t\t\t\t\"scope\":\"/client\",\n" +
-          "\t\t\t\t\"baseUrl\":\"/client\",\n" +
-          "\t\t\t\t\"moduleGenTarget\":\"amd\"\n" +
-          "\t\t\t},\n" +
-          "\t\t\t{\n" +
-          "\t\t\t\t\"scope\":\"/server\",\n" +
-          "\t\t\t\t\"moduleGenTarget\":\"commonjs\"\n" +
-          "\t\t\t},\n" +
-          "\t\t\t{\n" +
-          "\t\t\t\t\"scope\":\"/build\",\n" +
-          "\t\t\t\t\"moduleGenTarget\":\"commonjs\"\n" +
-          "\t\t\t},\n" +
-          "\t\t\t{\n" +
-          "\t\t\t\t\"scope\":\"/node_modules/nake\",\n" +
-          "\t\t\t\t\"moduleGenTarget\":\"commonjs\"\n" +
-          "\t\t\t}],\n" +
-          "\t\t\t\"allowMultipleWorkers\": true\n" +
-          "\t\t}\n" +
-          "\t}\n" +
-          "}",
       }
     },
+    mounted() {
+      api.listfiles({
+        username: this.$store.state.user.name,
+        path: "",
+        tempDir: this.tempDir
+      }).then(res => {
+        this.compressedFileData = res.data
+      })
+    },
+    computed: {
+    },
     methods: {
-      onChange(value) {
-      }
     }
-  };
+  }
 </script>
+
+<style lang="scss" scoped>
+  .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>-->