文本查看编辑器

2020-03-29 15:49:51 +08:00 · 2020-03-29 15:49:51 +08:00 · edf64e4b5f
commit edf64e4b5f
parent 3086cc8a2c
21 changed files with 809 additions and 173 deletions
--- a/package.json
+++ b/package.json
@ -1,8 +1,8 @@
 {
-  "name": "vue-admin-template",
+  "name": "jmal-cloud-view",
  "version": "4.2.1",
-  "description": "A vue admin template with Element UI & axios & iconfont & permission control & lint",
-  "author": "Pan <panfree23@gmail.com>",
+  "description": "jmal cloud",
+  "author": "Jmal <zhushilun084@163.com>",
  "license": "MIT",
  "scripts": {
    "dev": "vue-cli-service serve",
@ -38,6 +38,7 @@
    "vant": "^2.5.0",
    "vonic": "^1.1.3",
    "vue": "2.6.10",
+    "vue-codemirror-lite": "^1.0.4",
    "vue-grid-layout": "^2.3.7",
    "vue-router": "3.0.6",
    "vue-simple-uploader": "^0.7.4",
--- a/src/api/upload-api.js
+++ b/src/api/upload-api.js
@ -135,7 +135,10 @@ export default {
    return request({
      url: 'share/cancel',
      method: 'delete',
-      params
+      params,
+      paramsSerializer: function(params) {
+        return qs.stringify(params, { arrayFormat: 'repeat' })
+      }
    })
  },
  // 分享列表
@ -162,4 +165,12 @@ export default {
      params
    })
  },
+  // 访问分享链接里的文件夹
+  previewText: function(params) {
+    return request({
+      url: '/preview/text',
+      method: 'get',
+      params
+    })
+  },
 }
--- a/src/components/ShowFile/ShowFile.vue
+++ b/src/components/ShowFile/ShowFile.vue
@ -328,6 +328,7 @@
      :total="pagination.total"
      @current-change="currentChange">
    </el-pagination>
+    <sim-text-preview :file="textPreviewRow" :status.sync="textPreviewVisible"></sim-text-preview>
  </div>
 </template>

@ -341,16 +342,18 @@
  // import defaultSettings from '@/settings'
  import { getPath, getPathList, setPath, removePath } from '@/utils/path'
  import { strlen, substring10, formatTime, formatSize } from '@/utils/number'
+  import { suffix } from '@/utils/file-type'
  import Bus from '@/assets/js/bus'
-  import api from '@/api/upload-api'
+  import api from '@/api/file-api'
  import BreadcrumbFilePath from "@/components/Breadcrumb/BreadcrumbFilePath";
  import IconFile from "@/components/Icon/IconFile";
  import EmptyFile from "@/components/EmptyFile";
+  import SimTextPreview from "@/components/SimTextPreview/SimTextPreview";
  import Clipboard from 'clipboard';

  export default {
    name: 'ShowFile',
-    components: { IconFile, BreadcrumbFilePath,EmptyFile},
+    components: {SimTextPreview, IconFile, BreadcrumbFilePath,EmptyFile},
    props: {
      emptyStatus: {
        'type': String,
@ -530,6 +533,8 @@
        shareLink: '',
        shareFileName: '',
        generateShareLinkLoading: true,
+        textPreviewVisible : false,
+        textPreviewRow: {},
      }
    },
    computed: {
@ -549,20 +554,6 @@
        this.preliminaryRowData()
      })

-      // 加载路径
-      // const pathList = getPathList()
-      // if (pathList && pathList !== 'undefined') {
-      //   const res = JSON.parse(pathList)
-      //   const list = []
-      //   res.forEach(function(element) {
-      //     const item0 = {}
-      //     item0['folder'] = element.folder + ''
-      //     item0['index'] = element.index
-      //     list.push(item0)
-      //   })
-      //   this.pathList = list
-      // }
-
      if (window.history && window.history.pushState) {
        history.pushState(null, null, document.URL);
        window.addEventListener('popstate', this.goBack, false);
@ -1861,7 +1852,6 @@
      },
      // 点击文件或文件夹
      fileClick(row) {
-        console.log(row)
        if (row.isFolder) {
          // 打开文件夹
          if (this.listModeSearch) {
@ -1901,16 +1891,21 @@
            // this.getFileList()
          }
        } else {
+          if(suffix.simText.includes(row.suffix)){
+            this.textPreviewRow = row
+            this.textPreviewVisible = true
+            return
+          }
          if(row.contentType.includes('text')){
            // let routeData = this.$router.resolve({path: '/public/articles/article',query: {mark: row.id}})
            // window.open(routeData.href, '_blank');
            this.$router.push(`/public/articles/article?mark=${row.id}`)
-          }else{
-            // 打开文件
-            const fileIds = [row.id]
-            let url = process.env.VUE_APP_BASE_FILE_API + 'preview/' + row.name + '?jmal-token=' + this.$store.state.user.token + '&fileIds=' + fileIds
-            window.open(url, '_blank')
+            return
          }
+          // 打开文件
+          const fileIds = [row.id]
+          let url = process.env.VUE_APP_BASE_FILE_API + 'preview/' + row.name + '?jmal-token=' + this.$store.state.user.token + '&fileIds=' + fileIds
+          window.open(url, '_blank')
          // const fileIds = [row.id]
          // let url = 'http://localhost:10010/preview/' + row.name + '?jmal-token=' + this.$store.state.user.token + '&fileIds=' + fileIds
          // url = process.env.VUE_APP_BASE_PRIVIEW_API+'/onlinePreview?url='+encodeURIComponent(url);
@ -1923,7 +1918,33 @@
 </script>

 <style lang="scss" scoped>
+  @import "src/styles/index";
  @import "src/styles/home-index";
-
+  /*/deep/.el-table__body-wrapper::-webkit-scrollbar {*/
+    /*!*滚动条整体样式*!*/
+    /*width : 10px;  !*高宽分别对应横竖滚动条的尺寸*!*/
+    /*height: 1px;*/
+  /*}*/
+  /*/deep/.el-table__body-wrapper::-webkit-scrollbar-thumb {*/
+    /*!*滚动条里面小方块*!*/
+    /*border-radius   : 10px;*/
+    /*background-color: skyblue;*/
+    /*background-image: -webkit-linear-gradient(*/
+        /*45deg,*/
+        /*rgba(255, 255, 255, 0.2) 25%,*/
+        /*transparent 25%,*/
+        /*transparent 50%,*/
+        /*rgba(255, 255, 255, 0.2) 50%,*/
+        /*rgba(255, 255, 255, 0.2) 75%,*/
+        /*transparent 75%,*/
+        /*transparent*/
+    /*);*/
+  /*}*/
+  /*/deep/.el-table__body-wrapper::-webkit-scrollbar-track {*/
+    /*!*滚动条里面轨道*!*/
+    /*box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);*/
+    /*background   : #ededed;*/
+    /*border-radius: 10px;*/
+  /*}*/
 </style>

--- a/src/components/SimTextPreview/SimTextPreview.vue
+++ b/src/components/SimTextPreview/SimTextPreview.vue
@ -0,0 +1,222 @@
+<template>
+  <el-dialog v-bind="$attrs" v-on="$listeners"
+             :visible.sync="textPreviewVisible"
+             :title="file.name"
+             :close-on-click-modal="false"
+             @close="closeDialog"
+             :before-close="handleClose"
+             dialogDragWidth v-dialogDrag="{ x: transformX, y: transformY }">
+    <div slot="title" class="header-title">
+          <span class="title-name">{{file.name}}</span>
+        <div class="title-extension">
+          <el-button v-if="isShowUpdateBtn" @click="update" :loading="updating">Ctrl-S 保存</el-button>
+          <!-- <el-button @click="changePreviewMode">{{previewMode?'预览模式':'源码模式'}}</el-button> -->
+        </div>
+    </div>
+    <div class="content">
+      <vue-code-mirror
+        :value="content"
+        :options="options"
+        ref="myEditor"
+        @change="change"
+        @save="save"
+      >
+      </vue-code-mirror>
+    </div>
+  </el-dialog>
+</template>
+<script>
+
+  import { modeInfo,lineWrapping } from '@/utils/file-type'
+
+  let CodeMirror = require('codemirror/lib/codemirror.js')
+
+  import '@/utils/directives.js'
+  import api from '@/api/file-api.js'
+  import markdownApi from '@/api/markdown-api'
+  import VueCodeMirror from '@/components/VueCodemirror/VueCodeMirror'
+
+  export default {
+    name: "SimTextPreview",
+    components: {
+      VueCodeMirror,
+    },
+    props: {
+      file: {
+        type: Object,
+        default: function () {
+          return {}
+        }
+      },
+      status: {
+        type: Boolean,
+        default: function () {
+          return false
+        }
+      }
+    },
+    computed: {
+      options: function () {
+        return {
+          mode: this.codeMode,
+          // tabSize: 2,
+          styleActiveLine: true,
+          lineNumbers: true,
+          lineWrapping: this.lineWrapping,
+          readOnly: this.readOnly,
+          theme: 'idea',
+          extraKeys: {'Ctrl-Z': 'autocomplete'},
+        }
+      }
+    },
+    data(){
+      return{
+        textPreviewVisible: false,
+        transformX: (document.body.clientWidth-900)/2,
+        transformY: 150,
+        content: '',
+        newContent: '',
+        codeMode: 'javascript',
+        previewMode: true,
+        lineWrapping: false,
+        readOnly: this.$store.state.user.token ? false : true,
+        isShowUpdateBtn: false,
+        updating: false,
+        loading: {},
+      }
+    },
+    watch: { //监听file的变化，进行相应的操作即可
+      file: function (a) {
+        this.loading = this.$message({
+          iconClass: 'el-icon-loading',
+          type: 'info',
+          duration: 0,
+          dangerouslyUseHTMLString: true,
+          message: '<span>&nbsp;&nbsp;正在加载数据...</span>'
+        })
+
+        this.codeMode = 'javascript'
+        let suffix = a.suffix
+        const modeIndex =  modeInfo.findIndex(item => item.ext && item.ext.includes(suffix))
+        if(modeIndex > -1){
+          const mode = modeInfo[modeIndex].mode
+          if(CodeMirror.modes.hasOwnProperty(mode)){
+            this.codeMode = mode
+          }else{
+            this.$message.warning("暂不支持的文件类型:",modeInfo[modeIndex].mime)
+          }
+        }
+        if(lineWrapping.includes(suffix)){
+          this.lineWrapping = true
+        }
+        api.previewText({
+          id: a.id,
+          username: this.$store.state.user.name
+        }).then((res)=>{
+            this.loading.close()
+            this.textPreviewVisible = true
+            this.content = res.data.contentText
+        }).catch(() => {
+          this.loading.close()
+        })
+      },
+      status: function(visible) {
+        if(visible && this.loading.closed){
+          this.textPreviewVisible = true
+        }
+      }
+    },
+    methods:{
+      handleClose(done) {
+        if(this.isShowUpdateBtn){
+          this.$confirm('是否保存修改？')
+          .then(_ => {
+            done();
+            this.update()
+          })
+          .catch(_ => {
+            done();
+          });
+        }else{
+          done()
+        }
+      },
+      closeDialog(done) {
+        this.$emit('update:status', this.textPreviewVisible)
+        this.isShowUpdateBtn = false
+      },
+      change(code) {
+        this.isShowUpdateBtn = true
+        this.newContent = code
+      },
+      save(code,q) {
+        if(this.isShowUpdateBtn){
+          this.newContent = code
+          this.update()
+        }
+      },
+      update() {
+        this.updating = true
+        markdownApi.editMarkdown({
+            fileId: this.file.id,
+            userId: this.$store.state.user.userId,
+            username: this.$store.state.user.name,
+            filename: this.file.name,
+            contentText: this.newContent
+          }).then(() => {
+            this.updating = false
+            this.isShowUpdateBtn = false
+            this.$message({
+              message: "更新成功",
+              type: 'success',
+              duration : 1000
+            });
+          })  
+      },
+      changePreviewMode() {
+        this.previewMode = !this.previewMode
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  @import "src/styles/markdown";
+  /deep/.el-dialog {
+    width: 900px;
+    margin: 0 !important;
+    /*.content {*/
+      /*height: 600px;*/
+      /*overflow: scroll;*/
+    /*}*/
+    .el-dialog__header {
+      padding: 5px 20px 5px;
+      .el-dialog__headerbtn {
+        top: 16px;
+        right: 16px;
+      }
+      .title-name {
+        line-height: 40px;
+      }
+      .title-extension {
+        float: right;
+        margin-right: 30px;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-pack: end;
+        -ms-flex-pack: end;
+        justify-content: flex-end;
+      }
+    }
+    .el-dialog__body {
+      padding: 0;
+    }
+    .content {
+      border-top: 1px solid #ccc;
+    }
+  }
+  /deep/.CodeMirror {
+    height: 640px;
+  }
+
+</style>
--- a/src/components/SimpleUploader/globalUploader.vue
+++ b/src/components/SimpleUploader/globalUploader.vue
@ -84,7 +84,7 @@
 import Bus from '@/assets/js/bus'
 import $ from 'jquery'
 import SparkMD5 from 'spark-md5'
-import api from '@/api/upload-api'
+import api from '@/api/file-api'
 import { formatNetSpeed } from '@/utils/number'

 export default {
--- a/src/components/VueCodemirror/VueCodeMirror.vue
+++ b/src/components/VueCodemirror/VueCodeMirror.vue
@ -0,0 +1,167 @@
+<template>
+  <div class="vue-codemirror-wrap">
+    <textarea @keydown="onKeyDown"></textarea>
+  </div>
+</template>
+
+<script>
+
+  // htmlmixed mode
+  require('codemirror/mode/vue/vue.js')
+  require('codemirror/mode/xml/xml.js')
+  require('codemirror/mode/javascript/javascript.js')
+  require('codemirror/mode/css/css.js')
+  require('codemirror/mode/shell/shell.js')
+  require('codemirror/mode/yaml/yaml.js')
+  require('codemirror/mode/swift/swift.js')
+  require('codemirror/mode/sql/sql.js')
+  require('codemirror/mode/sass/sass.js')
+  require('codemirror/mode/sas/sas.js')
+  require('codemirror/mode/php/php.js')
+  require('codemirror/mode/css/css.js')
+  require('codemirror/mode/markdown/markdown.js')
+  require('codemirror/mode/go/go.js')
+  require('codemirror/mode/dart/dart.js')
+  // require('codemirror/mode/clike/clike.js')
+
+  // theme
+  require('codemirror/theme/idea.css')
+  require('codemirror/theme/ayu-dark.css')
+  require('codemirror/theme/3024-day.css')
+  require('codemirror/theme/3024-night.css')
+
+  // require hint addon for javacript
+  require('codemirror/addon/hint/show-hint.js')
+  require('codemirror/addon/hint/show-hint.css')
+  require('codemirror/addon/hint/javascript-hint.js')
+
+  // Crtl-F 搜索
+  import 'codemirror/addon/dialog/dialog';
+  import 'codemirror/addon/scroll/annotatescrollbar';
+  import 'codemirror/addon/search/matchesonscrollbar';
+  import 'codemirror/addon/search/jump-to-line';
+  import 'codemirror/addon/search/search';
+  import 'codemirror/addon/search/searchcursor';
+
+  let CodeMirror = require('codemirror/lib/codemirror.js')
+  require('codemirror/lib/codemirror.css')
+  export default {
+    name: 'VueCodemirror',
+    props: {
+      value: {
+        type: String,
+        default: ''
+      },
+      options: {
+        type: Object,
+        default: function () {
+          return {
+            mode: 'text/javascript',
+            lineNumbers: true,
+            lineWrapping: true
+          }
+        }
+      },
+    },
+    data: function () {
+      return {
+        skipNextChangeEvent: false,
+        nowValue: ''
+      }
+    },
+    ready: function () {
+      console.log(6789)
+      let that = this
+      this.editor = CodeMirror.fromTextArea(this.$el.querySelector('textarea'), this.options)
+      this.editor.setValue(this.value)
+      this.editor.on('change', function(cm) {
+        if (that.skipNextChangeEvent) {
+          that.skipNextChangeEvent = false
+          return
+        }
+        that.nowValue = cm.getValue()
+        if (!!that.$emit) {
+          that.$emit('change', cm.getValue())
+        }
+      })
+    },
+    beforeMount(){
+      this.onKeyDown = this.onKeyDown.bind(this);
+      document.addEventListener('keydown', this.onKeyDown);
+    },
+    mounted: function () {
+      let that = this
+      this.editor = CodeMirror.fromTextArea(this.$el.querySelector('textarea'), this.options)
+      this.editor.setValue(this.value)
+      this.editor.on('change', function(cm) {
+        if (that.skipNextChangeEvent) {
+          that.skipNextChangeEvent = false
+          return
+        }
+        that.nowValue = cm.getValue()
+        if (!!that.$emit) {
+          that.$emit('change', cm.getValue())
+          that.$emit('input', cm.getValue())
+        }
+      })
+      this.$nextTick(()=>{
+        this.editor.clearHistory();
+      })
+    },
+    watch: {
+      'value': function (newVal, oldVal) {
+        var editorValue = this.editor.getValue()
+        if (newVal !== editorValue) {
+          this.skipNextChangeEvent = true
+          var scrollInfo = this.editor.getScrollInfo()
+          this.editor.setValue(newVal)
+          // this.editor.scrollTo(scrollInfo.left, scrollInfo.top)
+        }
+        this.editor.clearHistory();
+      },
+      'options': function (newOptions, oldVal) {
+        if (typeof newOptions === 'object') {
+          for (const optionName in newOptions) {
+            if (newOptions.hasOwnProperty(optionName)) {
+              this.editor.setOption(optionName, newOptions[optionName])
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      onKeyDown(event) {
+        const isMac = navigator.platform.startsWith('Mac');
+        const {key, code, keyCode, ctrlKey, metaKey} = event;
+        const isCmd = isMac && metaKey || !isMac && ctrlKey;
+        if (!isCmd) {
+          return;
+        }
+        const isS = key === 's' || code === 'KeyS' || keyCode === 83;
+        if (isS && this.editor) {
+          if(this.nowValue !== ''){
+            this.$emit('save', this.nowValue)
+          }
+          event.stopPropagation();
+          event.preventDefault();
+        }
+        const isF = key === 'f' || code === 'KeyF' || keyCode === 70;
+        if (isF && this.editor) {
+          this.editor.execCommand('find');
+          event.preventDefault();
+        }
+      },
+    },
+    beforeDestroy: function () {
+      if (this.editor) {
+        this.editor.toTextArea()
+      }
+    }
+  }
+</script>
+
+<style>
+  .CodeMirror-code {
+    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  }
+</style>
--- a/src/main.js
+++ b/src/main.js
@ -80,14 +80,6 @@ Vue.use(EVueContextmenu)

 Vue.config.productionTip = false

-import plTable from 'pl-table'
-
-import 'pl-table/themes/index.css' // 引入样式（必须引入)，请查看webpack是否配置了url-loader对woff，ttf文件的引用,不配置会报错哦
-
-// import 'pl-table/themes/plTableStyle.css' // 默认表格样式很丑 引入这个样式就可以好看啦（如果你不喜欢这个样式，就不要引入，不引入就跟ele表格样式一样）
-
-Vue.use(plTable);
-
 new Vue({
  el: '#app',
  router,
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@ -12,6 +12,34 @@ body {
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
 }

+/deep/::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 12px;
+  height: 10px;
+}
+/deep/::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  height: 30px;
+  background-color: #c0c0c0;
+  -webkit-border-radius: 7px;
+  outline: 2px solid #fff;
+  outline-offset: -2px;
+  border: 2px solid #fff;
+}
+/deep/::-webkit-scrollbar-thumb:hover {
+  background-color: #999;
+}
+/deep/::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  /*box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);*/
+  /*background   : #ffffff;*/
+  /*border-radius: 10px;*/
+}
+/deep/::-webkit-scrollbar-track-piece {
+  background-color: #fff;
+  -webkit-border-radius: 3px;
+}
+
 label {
  font-weight: 700;
 }
--- a/src/styles/markdown.scss
+++ b/src/styles/markdown.scss
@ -183,6 +183,12 @@
  -ms-flex-direction: column;
  flex-direction: column;
 }
+::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 10px;
+}
+

@media only screen and (max-width: 768px){
  /deep/ .right-bj {
--- a/src/utils/directives.js
+++ b/src/utils/directives.js
@ -0,0 +1,86 @@
+
+import Vue from 'vue'
+
+// v-dialogDrag: 弹窗拖拽
+Vue.directive('dialogDrag', {
+  bind(el, binding, vnode, oldVnode) {
+    // 获取拖拽内容头部
+    const dialogHeaderEl = el.querySelector('.el-dialog__header');
+    const dragDom = el.querySelector('.el-dialog');
+    dragDom.style.transform="translate("+binding.value.x+"px,"+binding.value.y+"px)";
+    dialogHeaderEl.style.cursor = 'move';
+    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
+    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
+    // 鼠标按下事件
+    dialogHeaderEl.onmousedown = (e) => {
+      // 鼠标按下，计算当前元素距离可视区的距离 (鼠标点击位置距离可视窗口的距离)
+      const disX = e.clientX - dialogHeaderEl.offsetLeft;
+      const disY = e.clientY - dialogHeaderEl.offsetTop;
+      // 获取到的值带px 正则匹配替换
+      let styL, styT;
+      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
+      if (sty.left.includes('%')) {
+        styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)+binding.value.x;
+        styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)+binding.value.y;
+      } else {
+        styL = +sty.left.replace(/\px/g, '')+binding.value.x;
+        styT = +sty.top.replace(/\px/g, '')+binding.value.y;
+      };
+      // 鼠标拖拽事件
+      document.onmousemove = function (e) {
+        // 通过事件委托，计算移动的距离 （开始拖拽至结束拖拽的距离）
+        const l = e.clientX - disX;
+        const t = e.clientY - disY;
+        let finallyL = l + styL;
+        let finallyT = t + styT;
+        // 边界值判定 注意clientWidth scrollWidth区别 要减去之前的top left值
+        if (finallyL < 0) {////顶部
+          finallyL = 0
+        } else if (finallyL > dragDom.offsetParent.clientWidth - dragDom.clientWidth) {///底部
+          finallyL = dragDom.offsetParent.clientWidth - dragDom.clientWidth
+        }
+
+        if (finallyT < 0) {////顶部
+          finallyT = 0
+        } else if (finallyT > dragDom.offsetParent.clientHeight - dragDom.clientHeight) (///底部
+          finallyT = dragDom.offsetParent.clientHeight - dragDom.clientHeight
+        )
+        binding.value.x=finallyL;
+        binding.value.y=finallyT;
+        dragDom.style.transform="translate("+finallyL+"px,"+finallyT+"px)";
+        //将此时的位置传出去
+        //binding.value({x:e.pageX,y:e.pageY})
+      };
+      document.onmouseup = function (e) {
+        document.onmousemove = null;
+        document.onmouseup = null;
+      };
+    }
+  }
+})
+
+// v-dialogDragWidth: 弹窗宽度拖大 拖小
+Vue.directive('dialogDragWidth', {
+  bind(el, binding, vnode, oldVnode) {
+    const dragDom = binding.value.$el.querySelector('.el-dialog')
+
+    el.onmousedown = (e) => {
+      // 鼠标按下，计算当前元素距离可视区的距离
+      const disX = e.clientX - el.offsetLeft
+
+      document.onmousemove = function(e) {
+        e.preventDefault() // 移动时禁用默认事件
+
+        // 通过事件委托，计算移动的距离
+        const l = e.clientX - disX
+        dragDom.style.width = `${l}px`
+      }
+
+      document.onmouseup = function(e) {
+        document.onmousemove = null
+        document.onmouseup = null
+      }
+    }
+  }
+})
+
--- a/src/utils/file-type.js
+++ b/src/utils/file-type.js
@ -0,0 +1,176 @@
+export const suffix = {
+  simText: [
+    'swift','ymal','yml','dart','vue','txt',
+    'go','html','htm','asp','jsp','js','css',
+    'xml','iml','json','properties','md',
+    'gitignore','java','py','c','cpp',
+    'sql','sh','bat','m','bas','prg','cmd',
+    'sass','sas','php','class'
+  ]
+}
+
+// 不换行
+export const lineWrapping = [
+  'txt'
+]
+
+export const modeInfo = [
+  {name: "APL", mime: "text/apl", mode: "apl", ext: ["dyalog", "apl"]},
+  {name: "PGP", mimes: ["application/pgp", "application/pgp-encrypted", "application/pgp-keys", "application/pgp-signature"], mode: "asciiarmor", ext: ["asc", "pgp", "sig"]},
+  {name: "ASN.1", mime: "text/x-ttcn-asn", mode: "asn.1", ext: ["asn", "asn1"]},
+  {name: "Asterisk", mime: "text/x-asterisk", mode: "asterisk", file: /^extensions\.conf$/i},
+  {name: "Brainfuck", mime: "text/x-brainfuck", mode: "brainfuck", ext: ["b", "bf"]},
+  {name: "C", mime: "text/x-csrc", mode: "clike", ext: ["c", "h", "ino"]},
+  {name: "C++", mime: "text/x-c++src", mode: "clike", ext: ["cpp", "c++", "cc", "cxx", "hpp", "h++", "hh", "hxx"], alias: ["cpp"]},
+  {name: "Cobol", mime: "text/x-cobol", mode: "cobol", ext: ["cob", "cpy"]},
+  {name: "C#", mime: "text/x-csharp", mode: "clike", ext: ["cs"], alias: ["csharp", "cs"]},
+  {name: "Clojure", mime: "text/x-clojure", mode: "clojure", ext: ["clj", "cljc", "cljx"]},
+  {name: "ClojureScript", mime: "text/x-clojurescript", mode: "clojure", ext: ["cljs"]},
+  {name: "Closure Stylesheets (GSS)", mime: "text/x-gss", mode: "css", ext: ["gss"]},
+  {name: "CMake", mime: "text/x-cmake", mode: "cmake", ext: ["cmake", "cmake.in"], file: /^CMakeLists.txt$/},
+  {name: "CoffeeScript", mimes: ["application/vnd.coffeescript", "text/coffeescript", "text/x-coffeescript"], mode: "coffeescript", ext: ["coffee"], alias: ["coffee", "coffee-script"]},
+  {name: "Common Lisp", mime: "text/x-common-lisp", mode: "commonlisp", ext: ["cl", "lisp", "el"], alias: ["lisp"]},
+  {name: "Cypher", mime: "application/x-cypher-query", mode: "cypher", ext: ["cyp", "cypher"]},
+  {name: "Cython", mime: "text/x-cython", mode: "python", ext: ["pyx", "pxd", "pxi"]},
+  {name: "Crystal", mime: "text/x-crystal", mode: "crystal", ext: ["cr"]},
+  {name: "CSS", mime: "text/css", mode: "css", ext: ["css"]},
+  {name: "CQL", mime: "text/x-cassandra", mode: "sql", ext: ["cql"]},
+  {name: "D", mime: "text/x-d", mode: "d", ext: ["d"]},
+  {name: "Dart", mimes: ["application/dart", "text/x-dart"], mode: "dart", ext: ["dart"]},
+  {name: "diff", mime: "text/x-diff", mode: "diff", ext: ["diff", "patch"]},
+  {name: "Django", mime: "text/x-django", mode: "django"},
+  {name: "Dockerfile", mime: "text/x-dockerfile", mode: "dockerfile", file: /^Dockerfile$/},
+  {name: "DTD", mime: "application/xml-dtd", mode: "dtd", ext: ["dtd"]},
+  {name: "Dylan", mime: "text/x-dylan", mode: "dylan", ext: ["dylan", "dyl", "intr"]},
+  {name: "EBNF", mime: "text/x-ebnf", mode: "ebnf"},
+  {name: "ECL", mime: "text/x-ecl", mode: "ecl", ext: ["ecl"]},
+  {name: "edn", mime: "application/edn", mode: "clojure", ext: ["edn"]},
+  {name: "Eiffel", mime: "text/x-eiffel", mode: "eiffel", ext: ["e"]},
+  {name: "Elm", mime: "text/x-elm", mode: "elm", ext: ["elm"]},
+  {name: "Embedded Javascript", mime: "application/x-ejs", mode: "htmlembedded", ext: ["ejs"]},
+  {name: "Embedded Ruby", mime: "application/x-erb", mode: "htmlembedded", ext: ["erb"]},
+  {name: "Erlang", mime: "text/x-erlang", mode: "erlang", ext: ["erl"]},
+  {name: "Esper", mime: "text/x-esper", mode: "sql"},
+  {name: "Factor", mime: "text/x-factor", mode: "factor", ext: ["factor"]},
+  {name: "FCL", mime: "text/x-fcl", mode: "fcl"},
+  {name: "Forth", mime: "text/x-forth", mode: "forth", ext: ["forth", "fth", "4th"]},
+  {name: "Fortran", mime: "text/x-fortran", mode: "fortran", ext: ["f", "for", "f77", "f90", "f95"]},
+  {name: "F#", mime: "text/x-fsharp", mode: "mllike", ext: ["fs"], alias: ["fsharp"]},
+  {name: "Gas", mime: "text/x-gas", mode: "gas", ext: ["s"]},
+  {name: "Gherkin", mime: "text/x-feature", mode: "gherkin", ext: ["feature"]},
+  {name: "GitHub Flavored Markdown", mime: "text/x-gfm", mode: "gfm", file: /^(readme|contributing|history).md$/i},
+  {name: "Go", mime: "text/x-go", mode: "go", ext: ["go"]},
+  {name: "Groovy", mime: "text/x-groovy", mode: "groovy", ext: ["groovy", "gradle"], file: /^Jenkinsfile$/},
+  {name: "HAML", mime: "text/x-haml", mode: "haml", ext: ["haml"]},
+  {name: "Haskell", mime: "text/x-haskell", mode: "haskell", ext: ["hs"]},
+  {name: "Haskell (Literate)", mime: "text/x-literate-haskell", mode: "haskell-literate", ext: ["lhs"]},
+  {name: "Haxe", mime: "text/x-haxe", mode: "haxe", ext: ["hx"]},
+  {name: "HXML", mime: "text/x-hxml", mode: "haxe", ext: ["hxml"]},
+  {name: "ASP.NET", mime: "application/x-aspx", mode: "htmlembedded", ext: ["aspx"], alias: ["asp", "aspx"]},
+  {name: "HTML", mime: "text/html", mode: "htmlmixed", ext: ["html", "htm", "handlebars", "hbs"], alias: ["xhtml"]},
+  {name: "HTTP", mime: "message/http", mode: "http"},
+  {name: "IDL", mime: "text/x-idl", mode: "idl", ext: ["pro"]},
+  {name: "Pug", mime: "text/x-pug", mode: "pug", ext: ["jade", "pug"], alias: ["jade"]},
+  {name: "Java", mime: "text/x-java", mode: "clike", ext: ["java"]},
+  {name: "Java Server Pages", mime: "application/x-jsp", mode: "htmlembedded", ext: ["jsp"], alias: ["jsp"]},
+  {name: "JavaScript", mimes: ["text/javascript", "text/ecmascript", "application/javascript", "application/x-javascript", "application/ecmascript"],
+    mode: "javascript", ext: ["js"], alias: ["ecmascript", "js", "node"]},
+  {name: "JSON", mimes: ["application/json", "application/x-json"], mode: "javascript", ext: ["json", "map"], alias: ["json5"]},
+  {name: "JSON-LD", mime: "application/ld+json", mode: "javascript", ext: ["jsonld"], alias: ["jsonld"]},
+  {name: "JSX", mime: "text/jsx", mode: "jsx", ext: ["jsx"]},
+  {name: "Jinja2", mime: "text/jinja2", mode: "jinja2", ext: ["j2", "jinja", "jinja2"]},
+  {name: "Julia", mime: "text/x-julia", mode: "julia", ext: ["jl"]},
+  {name: "Kotlin", mime: "text/x-kotlin", mode: "clike", ext: ["kt"]},
+  {name: "LESS", mime: "text/x-less", mode: "css", ext: ["less"]},
+  {name: "LiveScript", mime: "text/x-livescript", mode: "livescript", ext: ["ls"], alias: ["ls"]},
+  {name: "Lua", mime: "text/x-lua", mode: "lua", ext: ["lua"]},
+  {name: "Markdown", mime: "text/x-markdown", mode: "markdown", ext: ["markdown", "md", "mkd"]},
+  {name: "mIRC", mime: "text/mirc", mode: "mirc"},
+  {name: "MariaDB SQL", mime: "text/x-mariadb", mode: "sql"},
+  {name: "Mathematica", mime: "text/x-mathematica", mode: "mathematica", ext: ["m", "nb", "wl", "wls"]},
+  {name: "Modelica", mime: "text/x-modelica", mode: "modelica", ext: ["mo"]},
+  {name: "MUMPS", mime: "text/x-mumps", mode: "mumps", ext: ["mps"]},
+  {name: "MS SQL", mime: "text/x-mssql", mode: "sql"},
+  {name: "mbox", mime: "application/mbox", mode: "mbox", ext: ["mbox"]},
+  {name: "MySQL", mime: "text/x-mysql", mode: "sql"},
+  {name: "Nginx", mime: "text/x-nginx-conf", mode: "nginx", file: /nginx.*\.conf$/i},
+  {name: "NSIS", mime: "text/x-nsis", mode: "nsis", ext: ["nsh", "nsi"]},
+  {name: "NTriples", mimes: ["application/n-triples", "application/n-quads", "text/n-triples"],
+    mode: "ntriples", ext: ["nt", "nq"]},
+  {name: "Objective-C", mime: "text/x-objectivec", mode: "clike", ext: ["m"], alias: ["objective-c", "objc"]},
+  {name: "Objective-C++", mime: "text/x-objectivec++", mode: "clike", ext: ["mm"], alias: ["objective-c++", "objc++"]},
+  {name: "OCaml", mime: "text/x-ocaml", mode: "mllike", ext: ["ml", "mli", "mll", "mly"]},
+  {name: "Octave", mime: "text/x-octave", mode: "octave", ext: ["m"]},
+  {name: "Oz", mime: "text/x-oz", mode: "oz", ext: ["oz"]},
+  {name: "Pascal", mime: "text/x-pascal", mode: "pascal", ext: ["p", "pas"]},
+  {name: "PEG.js", mime: "null", mode: "pegjs", ext: ["jsonld"]},
+  {name: "Perl", mime: "text/x-perl", mode: "perl", ext: ["pl", "pm"]},
+  {name: "PHP", mimes: ["text/x-php", "application/x-httpd-php", "application/x-httpd-php-open"], mode: "php", ext: ["php", "php3", "php4", "php5", "php7", "phtml"]},
+  {name: "Pig", mime: "text/x-pig", mode: "pig", ext: ["pig"]},
+  {name: "Plain Text", mime: "text/plain", mode: "null", ext: ["txt", "text", "conf", "def", "list", "log"]},
+  {name: "PLSQL", mime: "text/x-plsql", mode: "sql", ext: ["pls"]},
+  {name: "PostgreSQL", mime: "text/x-pgsql", mode: "sql"},
+  {name: "PowerShell", mime: "application/x-powershell", mode: "powershell", ext: ["ps1", "psd1", "psm1"]},
+  {name: "Properties files", mime: "text/x-properties", mode: "properties", ext: ["properties", "ini", "in"], alias: ["ini", "properties"]},
+  {name: "ProtoBuf", mime: "text/x-protobuf", mode: "protobuf", ext: ["proto"]},
+  {name: "Python", mime: "text/x-python", mode: "python", ext: ["BUILD", "bzl", "py", "pyw"], file: /^(BUCK|BUILD)$/},
+  {name: "Puppet", mime: "text/x-puppet", mode: "puppet", ext: ["pp"]},
+  {name: "Q", mime: "text/x-q", mode: "q", ext: ["q"]},
+  {name: "R", mime: "text/x-rsrc", mode: "r", ext: ["r", "R"], alias: ["rscript"]},
+  {name: "reStructuredText", mime: "text/x-rst", mode: "rst", ext: ["rst"], alias: ["rst"]},
+  {name: "RPM Changes", mime: "text/x-rpm-changes", mode: "rpm"},
+  {name: "RPM Spec", mime: "text/x-rpm-spec", mode: "rpm", ext: ["spec"]},
+  {name: "Ruby", mime: "text/x-ruby", mode: "ruby", ext: ["rb"], alias: ["jruby", "macruby", "rake", "rb", "rbx"]},
+  {name: "Rust", mime: "text/x-rustsrc", mode: "rust", ext: ["rs"]},
+  {name: "SAS", mime: "text/x-sas", mode: "sas", ext: ["sas"]},
+  {name: "Sass", mime: "text/x-sass", mode: "sass", ext: ["sass"]},
+  {name: "Scala", mime: "text/x-scala", mode: "clike", ext: ["scala"]},
+  {name: "Scheme", mime: "text/x-scheme", mode: "scheme", ext: ["scm", "ss"]},
+  {name: "SCSS", mime: "text/x-scss", mode: "css", ext: ["scss"]},
+  {name: "Shell", mimes: ["text/x-sh", "application/x-sh"], mode: "shell", ext: ["sh", "ksh", "bash"], alias: ["bash", "sh", "zsh"], file: /^PKGBUILD$/},
+  {name: "Sieve", mime: "application/sieve", mode: "sieve", ext: ["siv", "sieve"]},
+  {name: "Slim", mimes: ["text/x-slim", "application/x-slim"], mode: "slim", ext: ["slim"]},
+  {name: "Smalltalk", mime: "text/x-stsrc", mode: "smalltalk", ext: ["st"]},
+  {name: "Smarty", mime: "text/x-smarty", mode: "smarty", ext: ["tpl"]},
+  {name: "Solr", mime: "text/x-solr", mode: "solr"},
+  {name: "SML", mime: "text/x-sml", mode: "mllike", ext: ["sml", "sig", "fun", "smackspec"]},
+  {name: "Soy", mime: "text/x-soy", mode: "soy", ext: ["soy"], alias: ["closure template"]},
+  {name: "SPARQL", mime: "application/sparql-query", mode: "sparql", ext: ["rq", "sparql"], alias: ["sparul"]},
+  {name: "Spreadsheet", mime: "text/x-spreadsheet", mode: "spreadsheet", alias: ["excel", "formula"]},
+  {name: "SQL", mime: "text/x-sql", mode: "sql", ext: ["sql"]},
+  {name: "SQLite", mime: "text/x-sqlite", mode: "sql"},
+  {name: "Squirrel", mime: "text/x-squirrel", mode: "clike", ext: ["nut"]},
+  {name: "Stylus", mime: "text/x-styl", mode: "stylus", ext: ["styl"]},
+  {name: "Swift", mime: "text/x-swift", mode: "swift", ext: ["swift"]},
+  {name: "sTeX", mime: "text/x-stex", mode: "stex"},
+  {name: "LaTeX", mime: "text/x-latex", mode: "stex", ext: ["text", "ltx", "tex"], alias: ["tex"]},
+  {name: "SystemVerilog", mime: "text/x-systemverilog", mode: "verilog", ext: ["v", "sv", "svh"]},
+  {name: "Tcl", mime: "text/x-tcl", mode: "tcl", ext: ["tcl"]},
+  {name: "Textile", mime: "text/x-textile", mode: "textile", ext: ["textile"]},
+  {name: "TiddlyWiki ", mime: "text/x-tiddlywiki", mode: "tiddlywiki"},
+  {name: "Tiki wiki", mime: "text/tiki", mode: "tiki"},
+  {name: "TOML", mime: "text/x-toml", mode: "toml", ext: ["toml"]},
+  {name: "Tornado", mime: "text/x-tornado", mode: "tornado"},
+  {name: "troff", mime: "text/troff", mode: "troff", ext: ["1", "2", "3", "4", "5", "6", "7", "8", "9"]},
+  {name: "TTCN", mime: "text/x-ttcn", mode: "ttcn", ext: ["ttcn", "ttcn3", "ttcnpp"]},
+  {name: "TTCN_CFG", mime: "text/x-ttcn-cfg", mode: "ttcn-cfg", ext: ["cfg"]},
+  {name: "Turtle", mime: "text/turtle", mode: "turtle", ext: ["ttl"]},
+  {name: "TypeScript", mime: "application/typescript", mode: "javascript", ext: ["ts"], alias: ["ts"]},
+  {name: "TypeScript-JSX", mime: "text/typescript-jsx", mode: "jsx", ext: ["tsx"], alias: ["tsx"]},
+  {name: "Twig", mime: "text/x-twig", mode: "twig"},
+  {name: "Web IDL", mime: "text/x-webidl", mode: "webidl", ext: ["webidl"]},
+  {name: "VB.NET", mime: "text/x-vb", mode: "vb", ext: ["vb"]},
+  {name: "VBScript", mime: "text/vbscript", mode: "vbscript", ext: ["vbs"]},
+  {name: "Velocity", mime: "text/velocity", mode: "velocity", ext: ["vtl"]},
+  {name: "Verilog", mime: "text/x-verilog", mode: "verilog", ext: ["v"]},
+  {name: "VHDL", mime: "text/x-vhdl", mode: "vhdl", ext: ["vhd", "vhdl"]},
+  {name: "Vue.js Component", mimes: ["script/x-vue", "text/x-vue"], mode: "vue", ext: ["vue"]},
+  {name: "XML", mimes: ["application/xml", "text/xml"], mode: "xml", ext: ["xml", "xsl", "xsd", "svg"], alias: ["rss", "wsdl", "xsd"]},
+  {name: "XQuery", mime: "application/xquery", mode: "xquery", ext: ["xy", "xquery"]},
+  {name: "Yacas", mime: "text/x-yacas", mode: "yacas", ext: ["ys"]},
+  {name: "YAML", mimes: ["text/x-yaml", "text/yaml"], mode: "yaml", ext: ["yaml", "yml"], alias: ["yml"]},
+  {name: "Z80", mime: "text/x-z80", mode: "z80", ext: ["z80"]},
+  {name: "mscgen", mime: "text/x-mscgen", mode: "mscgen", ext: ["mscgen", "mscin", "msc"]},
+  {name: "xu", mime: "text/x-xu", mode: "mscgen", ext: ["xu"]},
+  {name: "msgenny", mime: "text/x-msgenny", mode: "mscgen", ext: ["msgenny"]}
+];
--- a/src/views/demo/index.vue
+++ b/src/views/demo/index.vue
@ -1,117 +1,29 @@
 <template>
-  <!-- 使用 useVirtual 属性开启虚拟滚动 使用虚拟滚动时，必须要固定表格高度和行高 -->
-  <!-- 1. 使用格式外层必须包含一层父级元素，且必须设置高度 2. this.$refs.plTable.setHeight() // 当窗口高度变化或者外层高度变化，就调用该方法 -->
-  <div style="height: 100%;width: 100%;overflow: auto">
-    <div style="color:red;">pl-table在线预览，更多玩法请看文档哦，欢迎Star</div>
-    <span slot="footer" class="dialog-footer">
-          <el-button @click="clearSelection">清除选中</el-button>
-          <el-button @click="setData(2)">变化数据为2条</el-button>
-          <el-button @click="setData(1000)">变化数据为1000条</el-button>
-      </span>
-    <p style="color: red">我是Y轴虚拟</p>
-    <div style="height: 400px;width: 100%">
-      <!--<pl-table :datas="tableData" height="400" useVirtual
-      注意点： 表格插件并不需要height属性字段(跟ele不同)，因为涉及分页组件。里面会去计算高度，只需要父级外层设置高度即可
-      row-height属性很重要 请看表格属性列表
-      -->
-      <pl-table :datas="data.tableData"
-                ref="plTable"
-                big-data-checkbox
-                fixed-columns-roll
-                header-drag-style
-                show-summary
-                :total-option="[{ label: '地址' }]"
-                use-virtual
-                :row-height="50">
-        <template slot="empty">
-          没有查询到符合条件的记录
-        </template>
-        <pl-table-column type="selection" width="55"/>
-        <pl-table-column type="index" width="100" fixed/>
-        <!--show-overflow-tooltip属性代表超出则内容部分给出提示框-->
-        <pl-table-column
-          v-for="item in columns"
-          :key="item.id"
-          :resizable="item.resizable"
-          :show-overflow-tooltip="item.showOverflowTooltip"
-          :prop="item.prop"
-          :label="item.label"
-          :fixed="item.fixed"
-          :width="item.width"/>
-      </pl-table>
-    </div>
-    <p style="margin-top: 20px;color: red">我是X + Y轴同时虚拟</p>
-    <div style="height:400px">
-      <plx-table-grid :datas="data.tableData"  ref="plTable2">
-        <plx-table-column type="selection" width="55" fixed="left"/>
-        <plx-table-column type="index" width="100" fixed="left"/>
-        <plx-table-column
-          v-for="item in columns2"
-          :key="item.id"
-          :resizable="item.resizable"
-          :prop="item.prop"
-          :label="item.label"
-          :fixed="item.fixed"
-          :width="item.width"/>
-      </plx-table-grid>
-    </div>
-  </div>
-</template>
+  <el-dialog :visible.sync="testDialog" title="测试弹框拖拽" dialogDragWidth v-dialogDrag="{ x: transformX, y: transformY }">

+  </el-dialog>
+</template>
 <script>
+  import '@/utils/directives.js'
  export default {
-    data() {
-      return {
-        columns: [
-          {prop: 'date', label: '日期', width: 120},
-          {prop: 'address', label: '地址', width: 100, showOverflowTooltip: true},
-          {prop: 'address', label: '噜噜噜', width: 230, showOverflowTooltip: true},
-          {prop: 'address', label: '娃哈哈', width: 100, showOverflowTooltip: true},
-          {prop: 'address', label: '地址', width: 100, showOverflowTooltip: true},
-          {prop: 'address', label: '挖挖掘机挖掘机挖掘机掘机', width: 100},
-          {prop: 'address', label: '娃哈哈', width: 100, showOverflowTooltip: true},
-          {prop: 'address', label: '娃哈哈', width: 100, showOverflowTooltip: true},
-          {prop: 'address', label: '噜噜噜', width: 230, showOverflowTooltip: true},
-          {prop: 'address', label: '娃哈哈', width: 100, showOverflowTooltip: true},
-          {prop: 'address', label: '地址', width: 100, showOverflowTooltip: true},
-          {prop: 'address', label: '挖挖掘机挖掘机挖掘机掘机', width: 100},
-          {prop: 'address', label: '娃哈哈', width: 100, showOverflowTooltip: true},
-          {prop: 'address', label: '娃哈哈', width: 100, showOverflowTooltip: true},
-          {prop: 'address', label: '噜噜噜', width: 230, showOverflowTooltip: true},
-          {prop: 'address', label: '娃哈哈', width: 100, showOverflowTooltip: true}
-        ],
-        columns2: Array.from({ length: 500 }, (_, idx) => ({
-          prop: 'address', label: '地址' + idx, width: 200, showOverflow: true, sortable: true, fixed: ''
-        })),
-        data: {
-          tableData:Array.from({ length: 10000 }, (_, idx) => ({
-            id: idx + 1,
-            date: '2016-05-03',
-            name: 1,
-            ab: '欢迎使用pl-table',
-            address: 1 + idx
-          }))
-        }
+    name: "testDialog",
+    data(){
+      return{
+        testDialog: true,
+        transformX: (document.body.clientWidth-500)/2,
+        transformY: 200,
      }
    },
-    mounted () {
-    },
-    methods: {
-      clearSelection () {
-        this.$refs.plTable.clearSelection()
-        this.$refs.plTable2.clearSelection()
-      },
-      setData (num) {
-        this.data.tableData = Array.from({ length: num }, (_, idx) => ({
-          id: idx + 1,
-          date: '2016-05-03',
-          name: 1,
-          ab: '欢迎使用pl-table',
-          address: 1 + idx
-        }))
+    methods:{
+      open:function () {
+        this.testDialog=true
      }
    }
  }
 </script>
 <style>
+  .el-dialog{
+    margin: 0 !important;
+    /*transform: translate(366px, 140px);*/
+  }
 </style>
--- a/src/views/favorite/index.vue
+++ b/src/views/favorite/index.vue
@ -23,7 +23,7 @@
    data() {
      return {
        sortable: {
-          prop: 'updateDate', order: 'ascending'
+          prop: 'updateDate', order: 'descending'
        },
        queryCondition: {
          isFavorite: true
--- a/src/views/home/mobile/index.vue
+++ b/src/views/home/mobile/index.vue
@ -166,7 +166,7 @@
  import 'vant/lib/checkbox-group/style';

  import {formatSize, formatTime, strlen, substring10} from '@/utils/number'
-  import api from '@/api/upload-api'
+  import api from '@/api/file-api'
  import IconFile from "../../../components/Icon/IconFile";
  import Bus from '@/assets/js/bus'
  import {Dialog, Notify, Toast} from 'vant';
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@ -74,8 +74,8 @@ export default {
    }
    return {
      loginForm: {
-        username: 'jmal',
-        password: '123456'
+        username: '',
+        password: ''
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
--- a/src/views/markdown/index.vue
+++ b/src/views/markdown/index.vue
@ -27,7 +27,7 @@

 <script>
  import markdownApi from '@/api/markdown-api'
-  import uploadApi from '@/api/upload-api'
+  import uploadApi from '@/api/file-api'
  export default {
    data() {
      return {
--- a/src/views/public/article/index.vue
+++ b/src/views/public/article/index.vue
@ -211,6 +211,7 @@
  }
 </script>
 <style lang="scss" scoped>
+  @import "src/styles/index";
  @import "src/styles/markdown";
  @import "src/styles/articles";
  /deep/ .el-backtop {
--- a/src/views/public/articles/index.vue
+++ b/src/views/public/articles/index.vue
@ -40,7 +40,7 @@
                    <div class="new-meta-box">
                      <div class="new-meta-item author">
                        <a href="http://blog.jmal.com" rel="nofollow">
-                          <img :src="article.avatar" :data-original="article.avatar">
+                          <img :src="imageUrl+article.avatar" :data-original="imageUrl+article.avatar">
                          <p>{{article.username}}</p>
                        </a>
                      </div>
@ -205,6 +205,7 @@
    components: { AlBackTop, AlLoading },
    data() {
      return {
+        imageUrl: process.env.VUE_APP_BASE_API + '/public/s/view/thumbnail?id=',
        isLoading: true,
        pageTitle: "文章列表",
        articleList: [],
@ -253,6 +254,7 @@
  }
 </script>
 <style lang="scss" scoped>
+  @import "src/styles/index";
  @import "src/styles/markdown";
  @import "src/styles/articles";
  .l_side {
--- a/src/views/public/share/shareList.vue
+++ b/src/views/public/share/shareList.vue
@ -235,7 +235,7 @@
  import { getPath, getPathList, setPath, removePath } from '@/utils/path'
  import { strlen, substring10, formatTime, formatSize } from '@/utils/number'
  import Bus from '@/assets/js/bus'
-  import api from '@/api/upload-api'
+  import api from '@/api/file-api'
  import BreadcrumbFilePath from "@/components/Breadcrumb/BreadcrumbFilePath";
  import IconFile from "@/components/Icon/IconFile";
  import AlLoading from "@/components/loading/AlLoading";
--- a/src/views/share/index.vue
+++ b/src/views/share/index.vue
@ -76,7 +76,7 @@
        >
          <template slot="header">
            <div v-if="item.label === ''" class="cancel-share-header">
-              <span class="header-font">{{sumFileAndFolder}}</span><el-button icon="el-icon-my-export">取消分享</el-button>
+              <span class="header-font">{{sumFileAndFolder}}</span><el-button icon="el-icon-my-export" @click="cancelShare(false)">取消分享</el-button>
            </div>
          </template>
          <template slot-scope="scope">
@ -152,7 +152,7 @@
  import EmptyFile from "@/components/EmptyFile";
  import IconFile from "@/components/Icon/IconFile";
  import { strlen, substring10, formatTime, formatSize } from '@/utils/number'
-  import api from '@/api/upload-api'
+  import api from '@/api/file-api'
  import Clipboard from 'clipboard';
  export default {
    components: { ShowFile, EmptyFile, IconFile },
@ -436,14 +436,25 @@
      },
      // 取消分享
      cancelShare(row) {
-        console.log(row)
-        this.fileList.splice(row.index,1)
-        // api.cancelShareLink({
-        //   userId: this.$store.state.user.userId,
-        //   shareId: row.id
-        // }).then(() => {
-        //   this.fileList.splice(row.index,1)
-        // })
+        let shareIds = []
+        if(row){
+          shareIds.push(row.id)
+        } else {
+          this.selectRowData.forEach(row => {
+            shareIds.push(row.id)
+          })
+        }
+        console.log(shareIds)
+        api.cancelShareLink({
+          userId: this.$store.state.user.userId,
+          shareId: shareIds
+        }).then(() => {
+          if(shareIds.length === 1){
+            this.fileList.splice(row.index,1)
+          }else{
+            this.getFileList()
+          }
+        })
      },
      // 点击文件或文件夹
      fileClick(row) {
--- a/vue.config.js
+++ b/vue.config.js
@ -8,22 +8,22 @@ function resolve(dir) {

 const name = defaultSettings.title || 'jmalCloud' // page title

-// If your port is set to 80,
-// use administrator privileges to execute the command line.
-// For example, Mac: sudo npm run
-// You can change the port by the following methods:
-// port = 9528 npm run dev OR npm run dev --port = 9528
+//如果您的端口设置为80，
+//使用管理员权限执行命令行。
+//例如，Mac：sudo npm run
+//您可以通过以下方法更改端口：
+// port = 9528 npm run dev或npm run dev --port = 9528
 const port = process.env.port || process.env.npm_config_port || 9528 // dev port

-// All configuration item explanations can be find in https://cli.vuejs.org/config/
+//所有配置项说明均可在https://cli.vuejs.org/config/中找到
 module.exports = {
-  /**
-   * You will need to set publicPath if you plan to deploy your site under a sub path,
-   * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
-   * then publicPath should be set to "/bar/".
-   * In most cases please use '/' !!!
-   * Detail: https://cli.vuejs.org/config/#publicpath
-   */
+/**
+  *如果您打算在子路径下部署网站，则需要设置publicPath，
+  *例如GitHub Pages。如果您打算将网站部署到https://foo.github.io/bar/，
+  *然后publicPath应该设置为“ / bar /”。
+  *在大多数情况下，请使用'/'！
+  *详细信息：https://cli.vuejs.org/config/#publicpath
+*/       
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'static',
@ -65,8 +65,8 @@ module.exports = {
    // before: require('./mock/mock-server.js')
  },
  configureWebpack: {
-    // provide the app's title in webpack's name field, so that
-    // it can be accessed in index.html to inject the correct title.
+    //在webpack的名称字段中提供应用程序的标题，以便
+    //可以在index.html中对其进行访问以注入正确的标题。
    name: name,
    resolve: {
      alias: {