添加右键菜单功能:

*切换视图(列表/缩略图)
*排序
*新建文件

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",

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事件
+        let scrollDiv = document.querySelector('.el-table__body-wrapper')
-        document.querySelector('.van-grid').onscroll = function (e) {
-          _this.tableBodyScroll(null,e)
-        }
-
-        let scrollDiv = document.querySelector('.ant-table-scroll')
         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.loadContextMenus()
-        this.loadContextMenusViewMode()
       },
-      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.prop = prop
-          this.sortable.order = column.order
+          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 {
+  /deep/.plTableBox .el-table .el-table__header {
-    background-color: #FFFFFF;
+    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>
 

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()

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>

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>

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>

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>

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'

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'},
+      ]
     }
   },
 }

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>