From 496ceb10272937cf4a572e1dbcfc2771d9d3add3 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Tue, 16 Jul 2024 15:48:57 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96ctrl/shift=E9=80=89?=
 =?UTF-8?q?=E4=B8=AD=E6=96=87=E4=BB=B6=E7=9A=84=E6=93=8D=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SearchDialog/index.vue |  89 ++++++++++++++++-
 src/components/ShowFile/ShowFile.vue  | 139 ++++++++++++--------------
 2 files changed, 151 insertions(+), 77 deletions(-)

diff --git a/src/components/SearchDialog/index.vue b/src/components/SearchDialog/index.vue
index f7beea1..2bc9fb0 100644
--- a/src/components/SearchDialog/index.vue
+++ b/src/components/SearchDialog/index.vue
@@ -1,7 +1,78 @@
 <template>
   <div>
-    <el-dialog style="{'font-weight': 600}" :visible.sync="searchDialogVisible" @close="searchDialogClose">
-      <div>
+    <el-dialog style="{'font-weight': 600}" :show-close="false" :visible.sync="searchDialogVisible" @close="searchDialogClose">
+      <div class="search-container">
+        <div class="header column">
+          header
+        </div>
+        <div class="operation column">
+          operation
+        </div>
+        <div class="content column">
+          <div>
+            content1
+          </div>
+          <div>
+            content1
+          </div>
+          <div>
+            content1
+          </div>
+          <div>
+            content1
+          </div>
+          <div>
+            content1
+          </div>
+          <div>
+            content1
+          </div>
+          <div>
+            content1
+          </div>
+          <div>
+            content1
+          </div>
+          <div>
+            content1
+          </div>
+          <div>
+            content1
+          </div>
+          <div>
+            content1
+          </div>
+          <div>
+            content1
+          </div>
+          <div>
+            content1
+          </div>
+          <div>
+            content1
+          </div>
+          <div>
+            content1
+          </div>
+          <div>
+            content1
+          </div>
+          <div>
+            content1
+          </div><div>
+          content1
+        </div><div>
+          content1
+        </div>
+          <div>
+            content1
+          </div>
+
+
+        </div>
+        <div class="footer column">
+          footer
+        </div>
       </div>
     </el-dialog>
   </div>
@@ -52,10 +123,24 @@ export default {
 <style lang="scss" scoped>
 
 >>> .el-dialog {
+  .el-dialog__body {
+    padding: 0;
+  }
+  .el-dialog__header {
+    display: none;
+  }
   max-width: 460px;
 
   .el-dialog__title {
     font-weight: 600;
   }
 }
+
+.search-container {
+  display: flex;
+  flex-direction: column;
+  .column {
+    padding: 20px;
+  }
+}
 </style>
diff --git a/src/components/ShowFile/ShowFile.vue b/src/components/ShowFile/ShowFile.vue
index c59447e..2313ef0 100644
--- a/src/components/ShowFile/ShowFile.vue
+++ b/src/components/ShowFile/ShowFile.vue
@@ -277,7 +277,7 @@
               item.operation === 'unFavorite' || item.operation === 'favorite'
             "
             class="menu-option"
-            @click="menusOperations(item.operation)"
+            @click="menusOperations(item.operation, $event)"
             @mouseover.prevent.stop="
               menuFavoriteOver(index, rowContextData.isFavorite)
             "
@@ -290,7 +290,7 @@
               <span class="menuitem text">{{ item.label }}</span>
             </label>
           </li>
-          <li v-else @click="menusOperations(item.operation)">
+          <li v-else @click="menusOperations(item.operation, $event)">
             <label class="menuitem">
               <svg-icon :icon-class="item.iconClass" />
               <span class="menuitem text">{{ item.label }}</span>
@@ -334,7 +334,6 @@
           @row-dblclick="dblclick"
           @sort-change="sortChange"
           @table-body-scroll="tableBodyScroll"
-          @select="pinSelect"
         >
           <template v-for="(item, index) in tableHead">
             <pl-table-column
@@ -511,8 +510,8 @@
                       ? 'solid 1px #409eff'
                       : '',
                   }"
-                  @click="gridItemClick(item)"
-                  @dblclick="fileClick(item)"
+                  @click="gridItemClick(item, $event)"
+                  @dblclick="fileClick(item, $event)"
                   @contextmenu.prevent="rowContextmenu(item)"
                 >
                   <div
@@ -1068,11 +1067,9 @@ export default {
       drawerShowTime: 0, // drawer显示的时间
       rowStyleExecuting: false,
       selectRowData: [],
-      selectOrgin: -1, // 选择起点(主要用于按住shift键多选)
+      selectOrigin: -1, // 选择起点(主要用于按住shift键多选)
       selectEnd: -1, // 选择终点
-      selectPin: false, // 默认false,不按住
       inputting: false, // 是否正在输入
-      isCmd: false, // 是否按住了command(control)键
       dragElementList: [],
       drawFlag: false,
       fileListScrollTop: 0,
@@ -1344,14 +1341,15 @@ export default {
 
       return suffix ? chineseLength + suffix.length + 1 : chineseLength
     },
-    keydown(event) {
+    checkCmdKey(event) {
       const isMac = navigator.platform.startsWith('Mac')
-      const { keyCode, ctrlKey, metaKey } = event
-      this.isCmd = (isMac && metaKey) || (!isMac && ctrlKey)
-      // shift
-      if (event.keyCode === 16 && event.shiftKey) {
-        this.selectPin = true
-      }
+      const { ctrlKey, metaKey } = event
+      return (isMac && metaKey) || (!isMac && ctrlKey)
+    },
+    keydown(event) {
+      const { keyCode } = event
+      const isCmd = this.checkCmdKey(event)
+      console.log('keydown', 'keyCode', keyCode, 'isCmd', isCmd)
       // space
       if (keyCode === 32) {
         if (!this.inputting && this.selectRowData.length > 0 && !this.drawer) {
@@ -1370,8 +1368,16 @@ export default {
         event.preventDefault()
         event.stopPropagation()
       }
+      // Del
+      if (keyCode === 8) {
+        if (!this.inputting && this.selectRowData.length > 0) {
+          this.removeOperation()
+          event.preventDefault()
+          event.stopPropagation()
+        }
+      }
       // ctrl + A / cmd + A
-      if (this.isCmd && keyCode === 65) {
+      if (isCmd && keyCode === 65) {
         if (this.inputting || this.editingIndex !== -1) {
           event.target.select()
         } else {
@@ -1385,22 +1391,16 @@ export default {
         }
       }
       // ctrl + P / cmd + P
-      if (this.isCmd && keyCode === 80) {
-        if (!this.inputting && this.editingIndex === -1) {
-          this.searchDialogVisible = true
-          event.preventDefault()
-          event.stopPropagation()
-        }
-      }
+      // if (isCmd && keyCode === 80) {
+      //   if (!this.inputting && this.editingIndex === -1) {
+      //     this.searchDialogVisible = true
+      //     event.preventDefault()
+      //     event.stopPropagation()
+      //   }
+      // }
     },
     keyup(event) {
-      const isMac = navigator.platform.startsWith('Mac')
-      const { keyCode, ctrlKey, metaKey } = event
-      this.isCmd = (isMac && metaKey) || (!isMac && ctrlKey)
-      // 松开shift键
-      if (keyCode === 16) {
-        this.selectPin = false
-      }
+      const { keyCode } = event
       // space
       if (keyCode === 32) {
         if (this.drawer && Date.now() - this.drawerShowTime >= 500) {
@@ -1459,16 +1459,16 @@ export default {
         this.onCreateFilename = ''
       }, 2000)
     },
-    gridItemClick(row) {
+    gridItemClick(row, event) {
       if (this.selectFile) {
-        this.fileClick(row)
+        this.fileClick(row, event)
       }
-      if (this.isCmd) {
-        this.pinSelect(null, row)
+      if (this.checkCmdKey(event)) {
+        this.pinSelect(row, event)
         this.$refs.fileListTable.toggleRowSelection([{ row: row }])
         return
       }
-      this.pinSelect(null, row)
+      this.pinSelect(row, event)
     },
     containerResize() {
       const container = document.querySelector('.dashboard-container')
@@ -1564,7 +1564,7 @@ export default {
             !_this.selectRowData.includes(_this.fileList[throughRow.rowIndex])
           ) {
             _this.editingIndex = -1
-            if (!_this.isCmd && !_this.selectPin) {
+            if (!_this.checkCmdKey(e) && !e.shiftKey) {
               _this.$refs.fileListTable.clearSelection()
               _this.$refs.fileListTable.toggleRowSelection([
                 { row: _this.fileList[throughRow.rowIndex], selected: true },
@@ -1578,7 +1578,7 @@ export default {
         if (evt.button !== 0) {
           return
         }
-        if (!_this.isCmd && !_this.selectPin) {
+        if (!_this.checkCmdKey(e) && !e.shiftKey) {
           const index = elPath.findIndex(
             el =>
               el.className === itemClassName ||
@@ -1918,7 +1918,7 @@ export default {
           return false
         }
         // 正在选区获取按住关键键时禁止拖拽
-        if (_this.drawFlag || _this.isCmd || _this.selectPin) {
+        if (_this.drawFlag || _this.checkCmdKey(e) || e.shiftKey) {
           e.preventDefault()
           e.stopPropagation()
           return
@@ -2913,18 +2913,18 @@ export default {
       // // 画矩形选取
       // this.darwRectangle()
     },
-    pinSelect(rows, row) {
-      if (this.selectPin && this.selectOrgin > -1) {
-        const orgin = this.selectOrgin
+    pinSelect(row, event) {
+      if (event.shiftKey && this.selectOrigin > -1) {
+        const origin = this.selectOrigin
         this.selectEnd = row.index
-        let diff = this.selectEnd - orgin
+        let diff = this.selectEnd - origin
         // 先清除选中
         this.$refs.fileListTable.clearSelection()
         if (diff === 0) {
-          this.selectOrgin = -1
+          this.selectOrigin = -1
         }
         if (diff > 0) {
-          for (let i = orgin; i <= this.selectEnd; i++) {
+          for (let i = origin; i <= this.selectEnd; i++) {
             this.$refs.fileListTable.toggleRowSelection([
               { row: this.fileList[i], selected: true },
             ])
@@ -2932,7 +2932,7 @@ export default {
           }
         }
         if (diff < 0) {
-          for (let i = this.selectEnd; i <= orgin; i++) {
+          for (let i = this.selectEnd; i <= origin; i++) {
             this.$refs.fileListTable.toggleRowSelection([
               { row: this.fileList[i], selected: true },
             ])
@@ -3019,26 +3019,11 @@ export default {
       }
       return sizeSum
     },
-    selectAll(checked) {
-      this.isSelectAll = checked
-      if (checked) {
-        this.fileList.forEach(row => {
-          this.selectRowData.push(row)
-        })
-      } else {
-        this.isIndeterminate = false
-      }
-    },
     // 收集选中的index值作为数组 传递给rowRed判断变换样式
     handleSelectionChange(rows) {
       // 起点
       if (rows.length > 0) {
-        if (!this.selectPin) {
-          this.selectOrgin = rows[0].index
-        }
-        if (this.selectPin) {
-          return
-        }
+        this.selectOrigin = rows[0].index
         this.rowContextData = rows[0]
       }
       this.$refs.fileListTable.tableSelectData = rows
@@ -3121,13 +3106,14 @@ export default {
       this.highlightFavorite(isFavorite, false)
     },
     //双击
-    dblclick(row) {
-      this.fileClick(row)
+    dblclick(row, column, cell, event) {
+      this.fileClick(row, event)
     },
     // 单元格点击事件
-    cellClick(row, column) {
+    cellClick(row, column, cell, event) {
+      console.log('cellClick', row, column, cell, event)
       if (this.selectFile) {
-        this.fileClick(row)
+        this.fileClick(row, event)
         return
       }
       clearTimeout(this.Loop)
@@ -3140,12 +3126,12 @@ export default {
             }
           }
         }
-        if (this.isCmd) {
-          this.pinSelect(null, row)
+        if (this.checkCmdKey(event)) {
+          this.pinSelect(row, event)
           this.$refs.fileListTable.toggleRowSelection([{ row: row }])
           return
         }
-        this.pinSelect(null, row)
+        this.pinSelect(row, event)
       }
     },
     // 选取输入框部分内容
@@ -3500,7 +3486,7 @@ export default {
       })
     },
     // 列表右键菜单操作
-    menusOperations(operation) {
+    menusOperations(operation, event) {
       switch (operation) {
         case 'share':
           // 分配标签
@@ -3525,7 +3511,7 @@ export default {
           break
         case 'open':
           // 打开
-          this.fileClick(this.rowContextData)
+          this.fileClick(this.rowContextData, event)
           break
         case 'deselect':
           // 取消选定
@@ -3561,9 +3547,7 @@ export default {
           break
         case 'remove':
           // 删除
-          this.permanentDelete = false
-          this.selectDeleteFile = this.getSelectDeleteList()
-          this.deleteConfirmVisible = true
+          this.removeOperation()
           break
         case 'sweep':
           // 清空回收站
@@ -3579,6 +3563,11 @@ export default {
     clearTreeNode() {
       // 清空文件树
     },
+    removeOperation() {
+      this.permanentDelete = false
+      this.selectDeleteFile = this.getSelectDeleteList()
+      this.deleteConfirmVisible = true
+    },
     // 加载下一级文件树
     directoryTreeLoadNode(node, resolve) {
       let fileId = null
@@ -4122,7 +4111,7 @@ export default {
         })
     },
     // 点击文件或文件夹
-    fileClick(row) {
+    fileClick(row, event) {
       if (this.queryFileType === 'trash') {
         return
       }
@@ -4190,7 +4179,7 @@ export default {
           if (selectData.length < 1 || selectData[0].id !== row.id) {
             this.$refs.fileListTable.clearSelection()
             this.$refs.fileListTable.toggleRowSelection([{ row: row }])
-            this.pinSelect(null, row)
+            this.pinSelect(row, event)
           } else {
             this.$refs.fileListTable.clearSelection()
             selectFile = {}