From f08bb8e2f0d068ff4d1574ca4279bd19fcc96779 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Thu, 16 Jul 2020 18:11:56 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=8F=B3=E9=94=AE=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E5=8A=9F=E8=83=BD:=20*=E5=88=87=E6=8D=A2=E8=A7=86?=
 =?UTF-8?q?=E5=9B=BE(=E5=88=97=E8=A1=A8/=E7=BC=A9=E7=95=A5=E5=9B=BE)=20*?=
 =?UTF-8?q?=E6=8E=92=E5=BA=8F=20*=E6=96=B0=E5=BB=BA=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                              |   2 +-
 src/components/ShowFile/ShowFile.vue      | 388 +++++++++++++++-------
 src/components/preview/SimTextPreview.vue |   8 +-
 src/icons/svg/menu-ascending.svg          |   1 +
 src/icons/svg/menu-descending.svg         |   1 +
 src/icons/svg/menu-empty.svg              |   1 +
 src/icons/svg/menu-null.svg               |   1 +
 src/utils/file-type.js                    |   2 +-
 src/views/home/index.vue                  |  27 +-
 src/views/recently/index.vue              |   2 +-
 10 files changed, 310 insertions(+), 123 deletions(-)
 create mode 100644 src/icons/svg/menu-ascending.svg
 create mode 100644 src/icons/svg/menu-descending.svg
 create mode 100644 src/icons/svg/menu-empty.svg
 create mode 100644 src/icons/svg/menu-null.svg

diff --git a/package.json b/package.json
index 44af237..36c04fa 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
     "pinyin": "^2.9.1",
-    "pl-table": "2.5.8",
+    "pl-table": "2.7.5",
     "scriptjs": "^2.5.9",
     "sortablejs": "^1.10.2",
     "spark-md5": "^3.0.0",
diff --git a/src/components/ShowFile/ShowFile.vue b/src/components/ShowFile/ShowFile.vue
index 89db765..5ca9043 100644
--- a/src/components/ShowFile/ShowFile.vue
+++ b/src/components/ShowFile/ShowFile.vue
@@ -1,17 +1,17 @@
 <template>
   <div>
-    <div class="dashboard-container" v-resize="containerResize" v-contextmenu:homeContextmenu>
+    <div class="dashboard-container" v-resize="containerResize">
       <v-contextmenu ref="homeContextmenu" :disabled="contextmenuDisabled">
         <div v-for="item of contextMenus" :key="item.operation">
           <!-- 一级菜单 -->
-          <v-contextmenu-item v-if="!item.child" :divider="item.divider?true:false" @click="item.onClick()">
+          <v-contextmenu-item v-if="!item.child" :divider="item.divider?true:false" @click="contextmenuClick(item.operation)">
             <svg-icon v-if="item.iconClass" :icon-class="item.iconClass"></svg-icon>
             {{item.label}}
           </v-contextmenu-item>
           <v-contextmenu-submenu v-if="item.child" :title="item.label">
             <!-- 二级菜单 -->
             <div v-for="itemSecond of item.child" :key="itemSecond.operation">
-              <v-contextmenu-item v-if="!itemSecond.child" :divider="itemSecond.divider?true:false" @click="itemSecond.onClick()">
+              <v-contextmenu-item v-if="!itemSecond.child" :divider="itemSecond.divider?true:false" @click="contextmenuClick(itemSecond.operation)">
                 <svg-icon v-if="itemSecond.iconClass" :icon-class="itemSecond.iconClass"></svg-icon>
                 {{itemSecond.label}}
               </v-contextmenu-item>
@@ -124,75 +124,6 @@
         </ul>
       </e-vue-contextmenu>
 
-      <el-dialog
-        class="open-file-dialog"
-        title="提示"
-        top="35vh"
-        :visible.sync="openCompressionVisible">
-        <svg-icon icon-class="open-folder"></svg-icon> <span class="dialog-msg">查看压缩文件</span>
-        <span slot="footer" class="dialog-footer">
-        <el-button size="small" @click="unzipTo(openingFile)">解压到...</el-button>
-      <el-button size="small" @click="unzip(openingFile,openingFile.id,false)">解压到当前目录</el-button>
-      <el-button size="small" type="primary" @click=compressionFilePreview(openingFile)>预览</el-button>
-      </span>
-      </el-dialog>
-
-      <message-dialog
-        title="提示"
-        content="此文件不支持预览, 是否下载该文件?"
-        :show.sync="notPreviewDialogVisible"
-        operatButtonText="强行使用文本编辑器打开"
-        confirmButtonText="下载"
-        @operating="forciblyOpen(openingFile)"
-        @confirm="determineDownload(openingFile)"
-      >
-      </message-dialog>
-
-      <!--展示压缩文件-->
-      <el-dialog :title="'预览:'+compressedFileName" :visible.sync="compressedFileVisible">
-        <file-tree :directoryTreeData="compressedFileData" :tempDir="compressedFileTempDir"></file-tree>
-      </el-dialog>
-
-      <!--移动或复制弹出框-->
-      <el-dialog
-        :title="titlePrefix+selectTreeNode.showName"
-        :visible.sync="dialogMoveOrCopyVisible"
-        @close="clearTreeNode"
-      >
-        <el-tree
-          ref="directoryTree"
-          :data="directoryTreeData"
-          node-key="id"
-          :props="directoryTreeProps"
-          :load="directoryTreeLoadNode"
-          :highlight-current="true"
-          :default-expanded-keys="['0']"
-          :render-content="renderContent"
-          hight="100"
-          lazy
-          @node-click="treeNodeClick"
-          @node-expand="treeNodeExpand"
-        >
-        </el-tree>
-        <div slot="footer" class="dialog-footer">
-          <el-button size="small" @click="fileTreeAndNewFolder"><i class="el-icon-folder-add"></i>&nbsp;&nbsp;新建文件夹</el-button>
-          <el-button v-if="!unzipOperating" size="small" type="primary" @click="moveFileTree">移 动</el-button>
-          <el-button v-if="!unzipOperating" size="small" type="primary" @click="copyFileTree">复制</el-button>
-          <el-button v-if="unzipOperating" size="small" type="primary" @click="confirmUnzip">解压</el-button>
-          <el-button size="small" @click="dialogMoveOrCopyVisible = false">取 消</el-button>
-        </div>
-      </el-dialog>
-
-      <!--分享-->
-      <el-dialog :title="'分享:'+shareFileName" :visible.sync="shareDialog" center>
-        <div v-loading="generateShareLinkLoading">
-          <el-input readonly="readonly" v-model="shareLink"></el-input>
-          <div slot="footer" class="dialog-footer share-dialog-footer">
-            <el-button type="primary" class="tag-share-link" @click="copyShareLink" :data-clipboard-text="shareLink">复制链接</el-button>
-          </div>
-        </div>
-      </el-dialog>
-
       <!--<div class="dashboard-text">path: {{ path }}</div>-->
 
       <!--list布局-->
@@ -206,10 +137,10 @@
           :default-sort="sortable"
           :highlight-current-row="false"
           empty-text="无文件"
-          :datas="fileList"
           :use-virtual="true"
+          :row-height="50"
           :border="false"
-          :excess-rows="3"
+          :excess-rows="10"
           :pagination-show="false"
           style="width: 100%;margin: 20px 0 0 0;"
           :row-style="rowStyle"
@@ -264,7 +195,7 @@
             >
               <template slot-scope="scope">
                 <el-col v-if="scope.row.index === editingIndex" :span="10">
-                  <el-input v-focus v-model="renameFileName" placeholder="" size="small" :clearable="true" @focus="renameInputFocus($event,scope.row)" @keyup.enter.native="rowRename(renameFileName, scope.row)">
+                  <el-input v-focus v-model="renameFileName" placeholder="" size="small" :clearable="true" @focus="renameInputFocus($event,scope.row.suffix)" @keyup.enter.native="rowRename(renameFileName, scope.row)">
                   </el-input>
                   <el-button
                     v-loading="renameLoading"
@@ -432,6 +363,88 @@
         </el-form-item>
       </el-form>
     </el-drawer>
+
+    <el-dialog
+      class="open-file-dialog"
+      title="提示"
+      top="35vh"
+      :visible.sync="openCompressionVisible">
+      <svg-icon icon-class="open-folder"></svg-icon> <span class="dialog-msg">查看压缩文件</span>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="unzipTo(openingFile)">解压到...</el-button>
+      <el-button size="small" @click="unzip(openingFile,openingFile.id,false)">解压到当前目录</el-button>
+      <el-button size="small" type="primary" @click=compressionFilePreview(openingFile)>预览</el-button>
+      </span>
+    </el-dialog>
+
+    <message-dialog
+      title="提示"
+      content="此文件不支持预览, 是否下载该文件?"
+      :show.sync="notPreviewDialogVisible"
+      operatButtonText="强行使用文本编辑器打开"
+      confirmButtonText="下载"
+      @operating="forciblyOpen(openingFile)"
+      @confirm="determineDownload(openingFile)"
+    >
+    </message-dialog>
+
+    <!--展示压缩文件-->
+    <el-dialog :title="'预览:'+compressedFileName" :visible.sync="compressedFileVisible">
+      <file-tree :directoryTreeData="compressedFileData" :tempDir="compressedFileTempDir"></file-tree>
+    </el-dialog>
+
+    <!--移动或复制弹出框-->
+    <el-dialog
+      :title="titlePrefix+selectTreeNode.showName"
+      :visible.sync="dialogMoveOrCopyVisible"
+      @close="clearTreeNode"
+    >
+      <el-tree
+        ref="directoryTree"
+        :data="directoryTreeData"
+        node-key="id"
+        :props="directoryTreeProps"
+        :load="directoryTreeLoadNode"
+        :highlight-current="true"
+        :default-expanded-keys="['0']"
+        :render-content="renderContent"
+        hight="100"
+        lazy
+        @node-click="treeNodeClick"
+        @node-expand="treeNodeExpand"
+      >
+      </el-tree>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="small" @click="fileTreeAndNewFolder"><i class="el-icon-folder-add"></i>&nbsp;&nbsp;新建文件夹</el-button>
+        <el-button v-if="!unzipOperating" size="small" type="primary" @click="moveFileTree">移 动</el-button>
+        <el-button v-if="!unzipOperating" size="small" type="primary" @click="copyFileTree">复制</el-button>
+        <el-button v-if="unzipOperating" size="small" type="primary" @click="confirmUnzip">解压</el-button>
+        <el-button size="small" @click="dialogMoveOrCopyVisible = false">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <!--分享-->
+    <el-dialog :title="'分享:'+shareFileName" :visible.sync="shareDialog" center>
+      <div v-loading="generateShareLinkLoading">
+        <el-input readonly="readonly" v-model="shareLink"></el-input>
+        <div slot="footer" class="dialog-footer share-dialog-footer">
+          <el-button type="primary" class="tag-share-link" @click="copyShareLink" :data-clipboard-text="shareLink">复制链接</el-button>
+        </div>
+      </div>
+    </el-dialog>
+
+    <el-dialog
+      class="new-text-file-dialog"
+      title="新建文本文件"
+      :show-close="false"
+      :visible.sync="newTextFileDialog">
+        <el-input ref="newTextFileName" size="small" v-model="newTextFileName" class="dialog-msg" @focus="renameInputFocus($event,'')" :clearable="true"></el-input>
+        <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="newTextFileDialog=false">取消</el-button>
+        <el-button size="small" type="primary" @click="createTextFile(newTextFileName)" v-loading="createTextFileLoading" @keyup.enter.native="createTextFile(newTextFileName)">确定</el-button>
+      </span>
+    </el-dialog>
+
   </div>
 </template>
 
@@ -567,6 +580,10 @@
             { iconClass: 'menu-remove', label: '删除', operation: 'remove' }
           ]
         }
+      },
+      contextMenus: {
+        type: Array,
+        default: ()=> []
       }
     },
     data() {
@@ -623,22 +640,6 @@
         menusIsMultiple: false,
         menus: [],
         contextmenuDisabled: false,
-        contextMenus: [
-          { label: '查看', operation: 'viewMode' ,child: [
-              { iconClass: this.grid?'':'menu-point', label: '列表', operation: 'list' , onClick: ()=>{this.grid=true;this.changeVmode()}},
-              { iconClass: this.grid?'menu-point':'', label: '缩略图', operation: 'grid', onClick: ()=>{this.grid=false;this.changeVmode()}},
-            ]
-          },
-          { label: '排列方式', operation: 'arrangement' ,child: [
-              { label: '名称', operation: 'orderName' , onClick: ()=>{}},
-              { label: '大小', operation: 'orderSize', onClick: ()=>{}},
-              { label: '日期', operation: 'orderDate', onClick: ()=>{}},
-            ]
-          },
-          { label: '刷新', operation: 'refresh' ,onClick: ()=>{this.getFileList()}},
-          { divider: true, operation: 'divider' },
-          { label: '新建文件', operation: 'createFile' ,onClick: ()=>{}},
-        ],
         rowContextData: {},
         tableLoading: true,
         finished: false,
@@ -672,6 +673,9 @@
         allChecked: false,
         summaries: '',
         shareDialog: false,
+        newTextFileDialog: false,
+        newTextFileName: '',
+        createTextFileLoading: false,
         shareLink: '',
         shareFileName: '',
         generateShareLinkLoading: true,
@@ -783,7 +787,6 @@
         }else{
           this.grid = true
         }
-        this.loadContextMenusViewMode()
       }
 
       // 加载url上的path
@@ -1014,13 +1017,12 @@
           }
         }
 
-        // 添加grid视图的scroll事件
-        document.querySelector('.van-grid').onscroll = function (e) {
-          _this.tableBodyScroll(null,e)
-        }
-
-        let scrollDiv = document.querySelector('.ant-table-scroll')
+        let scrollDiv = document.querySelector('.el-table__body-wrapper')
         if(_this.grid){
+          // 添加grid视图的scroll事件
+          document.querySelector('.van-grid').onscroll = function (e) {
+            _this.tableBodyScroll(null,e)
+          }
           scrollDiv = document.querySelector('.van-grid')
         }
         // 禁止滚动
@@ -1418,22 +1420,23 @@
         this.$router.push(`/markdown/editor`)
       },
       newFolder() {
-        this.newFolderName = this.getNewFolderName(this.fileList,'新建文件夹')
+        this.newFolderName = this.getNewFileName(this.fileList,'新建文件夹')
         this.showNewFolder = true
         this.$nextTick(()=>{
           this.$refs.newFolderName.focus()
           this.$refs.newFolderName.select()
         })
       },
-      getNewFolderName(fileList,newFolderName){
+      getNewFileName(fileList,newFolderName){
         let append = 0
         let filenameList = []
         fileList.forEach(file => {
           filenameList.push(file.name || file.label)
         })
+        const newName = newFolderName
         while(filenameList.includes(newFolderName)){
           append += 1
-          newFolderName = '新建文件夹' + append
+          newFolderName = newName + append
         }
         return newFolderName
       },
@@ -1495,6 +1498,39 @@
           });
         }
       },
+      // 新建文本文件
+      createTextFile(newFileName){
+        if(newFileName){
+          if(/[\/\\"<>\?\*]/gi.test(newFileName)){
+            this.$message({
+              message: '文件名不能包含以下字字符:<,>,|,*,?,,/',
+              type: 'warning'
+            });
+            return;
+          }
+          this.createTextFileLoading = true
+          api.addFile({
+            fileName: newFileName,
+            isFolder: false,
+            username: this.$store.state.user.name,
+            parentPath: this.path
+          }).then((res)=>{
+            this.createTextFileLoading = false
+
+            // 打开编辑器
+            // let path = res.data.path
+            // path = '/' +  path.substring(0,path.length - res.data.name.length)
+            this.textPreviewRow = res.data
+            this.textPreviewVisible = true
+
+            this.$message.success(`新建文件成功`)
+            this.newTextFileDialog = false
+          }).catch(()=>{
+
+          })
+
+        }
+      },
       searchFileByKeyWord(key) {
         this.searchFile(key)
       },
@@ -1515,22 +1551,47 @@
         this.rowDrop()
         // 画矩形选取
         this.darwRectangle()
-        // 修改菜单查看状态
-        this.loadContextMenusViewMode()
+        this.loadContextMenus()
       },
-      loadContextMenusViewMode(){
-        // 加载菜单查看状态
+      // 加载菜单查看状态
+      loadContextMenus(){
+        if(this.contextMenus.length < 1){
+          this.contextmenuDisabled = true
+          return
+        }
+        let container = document.querySelector('.dashboard-container')
+        if(this.$refs.homeContextmenu.references.length === 0){
+          this.$refs.homeContextmenu.addRef({el:container,vnode: container})
+        }
         const viewModeIndex = this.contextMenus.findIndex(item=>item.operation==='viewMode')
+        const arrangementModeIndex = this.contextMenus.findIndex(item=>item.operation==='arrangement')
         if(viewModeIndex > -1){
           const child = this.contextMenus[viewModeIndex].child
           if(this.grid){
-            child[0].iconClass = ''
+            child[0].iconClass = 'menu-empty'
             child[1].iconClass = 'menu-point'
           }else{
             child[0].iconClass = 'menu-point'
-            child[1].iconClass = ''
+            child[1].iconClass = 'menu-empty'
           }
         }
+        if(arrangementModeIndex > -1){
+          const child = this.contextMenus[arrangementModeIndex].child
+          const prop = this.sortable.prop
+          child.forEach(item=>{
+            const orderProp = item.orderProp
+            if(orderProp === prop){
+              child.map(item=>{
+                if(orderProp === item.orderProp){
+                  item.iconClass = 'menu-'+this.sortable.order
+                }else{
+                  item.iconClass = 'menu-null'
+                }
+                return item
+              })
+            }
+          })
+        }
       },
       // 请求之前的准备
       beforeLoadData(onLoad){
@@ -1554,6 +1615,7 @@
           this.fileList.map((item,index) => {
             item.index = index
           })
+          this.$refs.fileListTable.reloadData(this.fileList)
         }
         // 数据全部加载完成
         if (this.fileList.length >= res.count) {
@@ -1569,6 +1631,8 @@
         })
         // 使列表可拖拽
         this.rowDrop()
+        // 加载菜单状态
+        this.loadContextMenus()
         // 使列表滑到顶部
         if(!onLoad && !this.grid){
           if(this.fileListScrollTop > 0){
@@ -1702,12 +1766,27 @@
         }
         this.changeSelectedStyle(this.$refs.fileListTable.tableSelectData)
       },
+      sortChangeOfMenu(prop,headerIndex) {
+        let tableHeader = document.querySelector('.el-table__header thead tr')
+        // 去掉table-header上所有排序高亮
+        tableHeader.childNodes.forEach(el=>{
+          if(el.className.indexOf('is-sortable') > -1){
+            this.removeClass(el,"descending")
+            this.removeClass(el,"ascending")
+          }
+        })
+        // 重新加上排序高亮
+        let order = this.sortable.order === 'ascending'?'descending':'ascending'
+        this.addClass(tableHeader.children[headerIndex],order)
+        this.orderCustom = true
+        this.sortChange({prop: prop,order: order})
+      },
       sortChange(column) {
-        console.log(column)
+        let {prop,order} = column
         this.rowDrop()
         if(this.orderCustom || this.listModeSearch){
-          this.sortable.prop = column.prop
-          this.sortable.order = column.order
+          this.sortable.prop = prop
+          this.sortable.order = order
           this.pagination.pageIndex = 1
           if(this.listModeSearch){
             this.searchFile(this.searchFileName)
@@ -1716,6 +1795,16 @@
           }
         }
       },
+      removeClass(el,className){
+        const str = el.className
+        if(str.indexOf(className) > -1){
+          el.className = str.replace(className,"")
+        }
+      },
+      addClass(el,className){
+        const str = el.className
+        el.className = el.className +" "+className
+      },
       getSummaries(param) {
         // 合计
         const { columns, data } = param
@@ -1908,9 +1997,9 @@
         }
       },
       // 选取输入框部分内容
-      renameInputFocus(event,row) {
+      renameInputFocus(event,suffix) {
         event.currentTarget.selectionStart = 0
-        event.currentTarget.selectionEnd = event.currentTarget.value.length - row.suffix.length - 1
+        event.currentTarget.selectionEnd = event.currentTarget.value.length - suffix.length===0?0:suffix.length - 1
       },
       // 重命名
       rowRename(newFileName, row) {
@@ -2082,18 +2171,57 @@
         }
       },
       show() {
+        const that = this
         this.contextmenuDisabled = true
+        setTimeout(function() {
+          that.contextmenuDisabled = false
+        }, 1000)
       },
       hide() {
+        console.log('菜单隐藏了')
         const that = this
         this.isJustHideMenus = true
         setTimeout(function() {
           that.isJustHideMenus = false
         }, 100)
         this.cellMouseIndex = -1
-        this.contextmenuDisabled = false
       },
-      // 菜单操作
+      // 全局右键菜单操作
+      contextmenuClick(operation) {
+        console.log(operation)
+        switch (operation) {
+          case 'vmode-list':
+            this.grid=true;this.changeVmode()
+            break
+          case 'vmode-grid':
+            this.grid=false;this.changeVmode()
+            break
+          case 'orderName':
+            this.sortChangeOfMenu('name',2)
+            break
+          case 'orderSize':
+            this.sortChangeOfMenu('size',5)
+            break
+          case 'orderUpdate':
+            this.sortChangeOfMenu('update',6)
+            break
+          case 'refresh':
+            this.getFileList()
+            break
+          case 'createTextFile':
+            this.newTextFileName = this.getNewFileName(this.fileList,'未命名文件')
+            this.newTextFileDialog = true
+            this.$nextTick(()=>{
+              this.$refs.newTextFileName.focus()
+              this.$refs.newTextFileName.select()
+            })
+            break
+          case 'createMarkdownFile':
+            this.newDocument()
+            break
+        }
+      },
+      // 列表右键菜单操作
       menusOperations(operation) {
         switch (operation) {
           case 'share':
@@ -2189,7 +2317,7 @@
         }
 
         let childNodes = this.$refs.directoryTree.store.currentNode.childNodes
-        let newFolderName = this.getNewFolderName(childNodes,'新建文件夹')
+        let newFolderName = this.getNewFileName(childNodes,'新建文件夹')
         let newNode = {
           id: newNodeId,
           newFolder: true,
@@ -2734,8 +2862,13 @@
   .table-file-name:hover {
     color: #19ACF9;
   }
-  /deep/.plTableBox .el-table .el-table__header th {
-    background-color: #FFFFFF;
+  /deep/.plTableBox .el-table .el-table__header {
+    th {
+      background-color: #FFFFFF;
+    }
+    .is-sortable:hover {
+      background-color: #f5f7fa;
+    }
   }
   /deep/.el-table td {
     height: 50px!important;
@@ -2776,10 +2909,29 @@
       margin-left: 10px;
     }
   }
-  >>>.v-contextmenu-item{
+  >>>.v-contextmenu-item {
     .svg-icon {
       font-size: 14px;
     }
   }
+  >>>.new-text-file-dialog {
+    height: 350px;
+    top: calc(50% - 175px);
+    .el-dialog {
+      width: 420px;
+      .el-dialog__header {
+        padding: 15px 20px 15px;
+      }
+      .dialog-footer {
+        .el-loading-spinner {
+          margin-top: -13px;
+          .circular {
+            height: 26px;
+            width: 26px;
+          }
+        }
+      }
+    }
+  }
 </style>
 
diff --git a/src/components/preview/SimTextPreview.vue b/src/components/preview/SimTextPreview.vue
index d6e3116..a23bf76 100644
--- a/src/components/preview/SimTextPreview.vue
+++ b/src/components/preview/SimTextPreview.vue
@@ -204,6 +204,7 @@
     },
     watch: { //监听file的变化，进行相应的操作即可
       file(file) {
+        console.log('watch file',file)
         if(!file.path){
           return
         }
@@ -232,13 +233,18 @@
         }
         if(this.filepath){
           request = 'previewTextByPath'
+          file.path = this.filepath
           this.options.readOnly = true
         }
+        if(!file.id){
+          request = 'previewTextByPath'
+        }
+        console.log(request,file)
         api[request]({
           shareId: this.shareId,
           fileId: file.id,
           id: file.id,
-          path: this.filepath,
+          path: file.path,
           username: this.$store.state.user.name
         }).then((res)=>{
           this.loading.close()
diff --git a/src/icons/svg/menu-ascending.svg b/src/icons/svg/menu-ascending.svg
new file mode 100644
index 0000000..62311d6
--- /dev/null
+++ b/src/icons/svg/menu-ascending.svg
@@ -0,0 +1 @@
+<svg t="1594880794293" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14894" width="128" height="128"><path d="M511.312276578978 88.1808433189704l0.6877234210219808 2.0673096839149364e-16c16.790879048273123 5.512825823773165e-15 30.93141603177743 11.537367283354323 34.76106721201714 26.71073077640788l162.41445138265297 278.18536518140746c9.721231245529106 16.64439644235148 3.731582316953196 38.09913269780795-13.403158441830922 47.87001906398847-16.64439644235148 9.47543839830465-38.886166360132734 4.173512890750705-48.60739760566187-12.470883551600767l-99.3735515816436-170.22147772707052-2.1169251163288949e-13 646.7604292406025c-3.3076954942638982e-15 9.672817502893997-4.173512890750726 18.410877359525262-10.703161256410691 24.744387998612172-6.4365450144385745 6.343441663217185-15.278880624437798 10.261230682613158-25.034870454422897 10.26123068261315-0.01986204826056262-6.460342762234176e-18-0.037241340488554917-1.2920685524468352e-17-0.0546206327165472-1.7227580699291136e-17-19.1941868878012-6.6153909885277964e-15-35.787686831484976-15.662466431469927-35.78892820950126-34.958446316606505l2.1169251163288949e-13-646.8100843612542-99.37231020362738 170.2227191050867c-9.721231245529122 16.69529294101916-32.01141490594551 21.9959770705568-48.60739760566188 12.470883551600744-17.134740758784105-9.76964498816424-23.12438968736001-31.22686399965329-13.4031584418309-47.87001906398847l162.41445138265323-278.18536518140746c3.7812374376046116-14.925087889796524 17.576671332581643-26.36562768788059 34.07334379099518-26.709489398391565z" p-id="14895"></path></svg>
diff --git a/src/icons/svg/menu-descending.svg b/src/icons/svg/menu-descending.svg
new file mode 100644
index 0000000..508fd2c
--- /dev/null
+++ b/src/icons/svg/menu-descending.svg
@@ -0,0 +1 @@
+<svg t="1594880978091" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="33015" width="128" height="128"><path d="M515.594312 1002.659392C515.350826 1002.664235 515.106912 1002.666667 514.862596 1002.666667 497.328273 1002.666667 482.617269 990.616277 478.608439 974.83479L478.608439 974.83479 309.252489 684.725118C299.110965 667.352516 305.351138 644.979989 323.207396 634.783964 340.541436 624.886127 363.766543 630.416329 373.915718 647.802042L477.529263 825.293833 477.529263 79.127543C477.529263 69.05915 481.85869 59.943931 488.690069 53.34581 495.219947 46.832316 504.55328 42.666667 514.862596 42.666667 534.878221 42.666667 552.195929 58.990757 552.195929 79.127543L552.195929 825.293833 655.809474 647.802042C665.958649 630.416329 689.183756 624.886127 706.517795 634.783964 724.374053 644.979989 730.614226 667.352516 720.472704 684.725118L551.116752 974.83479 551.116752 974.83479C547.163855 990.396087 532.805343 1002.329677 515.594863 1002.659652Z" p-id="33016"></path></svg>
diff --git a/src/icons/svg/menu-empty.svg b/src/icons/svg/menu-empty.svg
new file mode 100644
index 0000000..38c3dac
--- /dev/null
+++ b/src/icons/svg/menu-empty.svg
@@ -0,0 +1 @@
+<svg t="1594804403874" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2491" width="128" height="128"><path d="M512 426.4m-122.56 0a122.56 122.56 0 1 0 245.12 0 122.56 122.56 0 1 0-245.12 0Z" fill="#ffffff" fill-opacity="0" p-id="2492"></path></svg>
diff --git a/src/icons/svg/menu-null.svg b/src/icons/svg/menu-null.svg
new file mode 100644
index 0000000..38c3dac
--- /dev/null
+++ b/src/icons/svg/menu-null.svg
@@ -0,0 +1 @@
+<svg t="1594804403874" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2491" width="128" height="128"><path d="M512 426.4m-122.56 0a122.56 122.56 0 1 0 245.12 0 122.56 122.56 0 1 0-245.12 0Z" fill="#ffffff" fill-opacity="0" p-id="2492"></path></svg>
diff --git a/src/utils/file-type.js b/src/utils/file-type.js
index 693900a..9a77c54 100644
--- a/src/utils/file-type.js
+++ b/src/utils/file-type.js
@@ -5,7 +5,7 @@ export const suffix = {
     'vue','asp','jsp','TXT',
     'xml','xsl','iml','m','bas','prg','cmd',
     'sass','sas','php','lst','key','pem','log',
-    'cmake','db','gradle','bat','','conf'
+    'cmake','db','gradle','bat','','conf','dart'
   ],
   compressedFile: [
     'zip','tar','jar','tar.gz','tgz','tar.bz2'
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index f283bcb..3dcc7b0 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,6 +1,11 @@
 <template>
   <div>
-    <show-file :defaultGrid="false"></show-file>
+    <show-file
+      :defaultGrid="false"
+      :orderCustom="true"
+      :contextMenus="contextMenus"
+      :sortable="sortable">
+    </show-file>
   </div>
 </template>
 
@@ -11,6 +16,26 @@ export default {
   components: {ShowFile},
   data() {
     return {
+      sortable: {
+        prop: 'name', order: 'ascending'
+      },
+      contextMenus: [ // contextmenuClick
+        { label: '查看', operation: 'viewMode' ,child: [
+            { iconClass: this.grid?'':'menu-point', label: '列表', operation: 'vmode-list'},
+            { iconClass: this.grid?'menu-point':'', label: '缩略图', operation: 'vmode-grid'},
+          ]
+        },
+        { label: '排列方式', operation: 'arrangement' ,child: [
+            { label: '名称', operation: 'orderName', orderProp: 'name'},
+            { label: '大小', operation: 'orderSize', orderProp: 'size'},
+            { label: '日期', operation: 'orderUpdateDate', orderProp: 'updateDate'},
+          ]
+        },
+        { label: '刷新', operation: 'refresh'},
+        { divider: true, operation: 'divider' },
+        { label: '新建文件', operation: 'createTextFile'},
+        { label: '新建文档', operation: 'createMarkdownFile'},
+      ]
     }
   },
 }
diff --git a/src/views/recently/index.vue b/src/views/recently/index.vue
index 1829c73..6e4acb5 100644
--- a/src/views/recently/index.vue
+++ b/src/views/recently/index.vue
@@ -2,9 +2,9 @@
   <div>
     <show-file
       :defaultGrid="false"
+      :orderCustom="true"
       :sortable="sortable"
       :queryCondition="queryCondition"
-      :orderCustom="true"
       :showNavigation="true"
     ></show-file>
   </div>