lunanting/jmalcloud-view
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #236 from jamebal/search

Browse Source 
perf: 优化ctrl/shift选中文件的操作
This commit is contained in:
jmal 2024-07-16 17:48:56 +08:00 committed by GitHub
commit 51ddec4e3d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 182 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
src/components/SearchDialog/index.vue
View File

@ -1,7 +1,78 @@
<template> <template>
<div> <div>
<el-dialog style="{'font-weight': 600}" :visible.sync="searchDialogVisible" @close="searchDialogClose"> <el-dialog style="{'font-weight': 600}" :show-close="false" :visible.sync="searchDialogVisible" @close="searchDialogClose">
<div> <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> </div>
</el-dialog> </el-dialog>
</div> </div>
@ -52,10 +123,24 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
>>> .el-dialog { >>> .el-dialog {
.el-dialog__body {
padding: 0;
}
.el-dialog__header {
display: none;
}
max-width: 460px; max-width: 460px;
.el-dialog__title { .el-dialog__title {
font-weight: 600; font-weight: 600;
} }
} }
.search-container {
display: flex;
flex-direction: column;
.column {
padding: 20px;
}
}
</style> </style>

171
src/components/ShowFile/ShowFile.vue
View File

@ -277,7 +277,7 @@
item.operation === 'unFavorite' || item.operation === 'favorite' item.operation === 'unFavorite' || item.operation === 'favorite'
" "
class="menu-option" class="menu-option"
@click="menusOperations(item.operation)" @click="menusOperations(item.operation, $event)"
@mouseover.prevent.stop=" @mouseover.prevent.stop="
menuFavoriteOver(index, rowContextData.isFavorite) menuFavoriteOver(index, rowContextData.isFavorite)
" "
@ -290,17 +290,18 @@
<span class="menuitem text">{{ item.label }}</span> <span class="menuitem text">{{ item.label }}</span>
</label> </label>
</li> </li>
<li v-else @click="menusOperations(item.operation)"> <li v-else @click="menusOperations(item.operation, $event)">
<label class="menuitem"> <label class="menuitem">
<svg-icon :icon-class="item.iconClass" /> <svg-icon :icon-class="item.iconClass" />
<span class="menuitem text">{{ item.label }}</span> <span class="menuitem text">{{ item.label }}</span>
<span v-if="item.shortcut" style="position: absolute;right: 10px;"> <span v-if="item.shortcut" style="position: absolute;right: 10px;">
<kbd>{{ item.shortcut }}</kbd> <kbd v-for="key in item.shortcut" :style="{fontSize: key === '⌘' ? '14px' : '12px'}">{{ key }}</kbd>
</span> </span>
</label> </label>
</li> </li>
</ul> </ul>
</e-vue-contextmenu> </e-vue-contextmenu>
<!--list布局--> <!--list布局-->
<div <div
v-show="fileList.length > 0" v-show="fileList.length > 0"
@ -334,7 +335,6 @@
@row-dblclick="dblclick" @row-dblclick="dblclick"
@sort-change="sortChange" @sort-change="sortChange"
@table-body-scroll="tableBodyScroll" @table-body-scroll="tableBodyScroll"
@select="pinSelect"
> >
<template v-for="(item, index) in tableHead"> <template v-for="(item, index) in tableHead">
<pl-table-column <pl-table-column
@ -511,8 +511,8 @@
? 'solid 1px #409eff' ? 'solid 1px #409eff'
: '', : '',
}" }"
@click="gridItemClick(item)" @click="gridItemClick(item, $event)"
@dblclick="fileClick(item)" @dblclick="fileClick(item, $event)"
@contextmenu.prevent="rowContextmenu(item)" @contextmenu.prevent="rowContextmenu(item)"
> >
<div <div
@ -790,6 +790,7 @@
<script> <script>
import SearchDialog from '@/components/SearchDialog/index.vue' import SearchDialog from '@/components/SearchDialog/index.vue'
import { fileOperations } from '@/utils/file-operations'
import { mapGetters, mapState } from 'vuex' import { mapGetters, mapState } from 'vuex'
import { formatSize, formatTime } from '@/utils/number' import { formatSize, formatTime } from '@/utils/number'
import { getElementToPageLeft } from '@/utils/dom' import { getElementToPageLeft } from '@/utils/dom'
@ -906,20 +907,20 @@ export default {
type: Array, type: Array,
default: function() { default: function() {
return [ return [
{ iconClass: 'menu-open', label: '打开', operation: 'open' }, fileOperations.open,
{ iconClass: 'share', label: '分享', operation: 'share' }, { iconClass: 'share', label: '分享', operation: 'share' },
{ iconClass: 'tag', label: '标签', operation: 'tag' }, { iconClass: 'tag', label: '标签', operation: 'tag' },
{ iconClass: 'menu-favorite', label: '收藏', operation: 'favorite' }, { iconClass: 'menu-favorite', label: '收藏', operation: 'favorite' },
{ {
iconClass: 'menu-details', iconClass: 'menu-details',
label: '详情', label: '详情',
shortcut: "space", shortcut: ["space"],
operation: 'details', operation: 'details',
}, },
{ iconClass: 'menu-rename', label: '重命名', operation: 'rename', shortcut: 'F2' }, fileOperations.rename,
{ iconClass: 'menu-copy', label: '移动或复制', operation: 'copy' }, fileOperations.copy,
{ iconClass: 'menu-download', label: '下载', operation: 'download' }, fileOperations.download,
{ iconClass: 'menu-remove', label: '删除', operation: 'remove' }, fileOperations.remove,
] ]
}, },
}, },
@ -933,9 +934,9 @@ export default {
operation: 'deselect', operation: 'deselect',
}, },
{ iconClass: 'tag', label: '标签', operation: 'tag' }, { iconClass: 'tag', label: '标签', operation: 'tag' },
{ iconClass: 'menu-copy', label: '移动或复制', operation: 'copy' }, fileOperations.copy,
{ iconClass: 'menu-download', label: '下载', operation: 'download' }, fileOperations.download,
{ iconClass: 'menu-remove', label: '删除', operation: 'remove' }, fileOperations.remove,
] ]
}, },
}, },
@ -1068,11 +1069,9 @@ export default {
drawerShowTime: 0, // drawer显示的时间 drawerShowTime: 0, // drawer显示的时间
rowStyleExecuting: false, rowStyleExecuting: false,
selectRowData: [], selectRowData: [],
selectOrgin: -1, // 选择起点(主要用于按住shift键多选) selectOrigin: -1, // 选择起点(主要用于按住shift键多选)
selectEnd: -1, // 选择终点 selectEnd: -1, // 选择终点
selectPin: false, // 默认false,不按住
inputting: false, // 是否正在输入 inputting: false, // 是否正在输入
isCmd: false, // 是否按住了command(control)键
dragElementList: [], dragElementList: [],
drawFlag: false, drawFlag: false,
fileListScrollTop: 0, fileListScrollTop: 0,
@ -1344,14 +1343,15 @@ export default {
return suffix ? chineseLength + suffix.length + 1 : chineseLength return suffix ? chineseLength + suffix.length + 1 : chineseLength
}, },
keydown(event) { checkCmdKey(event) {
const isMac = navigator.platform.startsWith('Mac') const isMac = navigator.platform.startsWith('Mac')
const { keyCode, ctrlKey, metaKey } = event const { ctrlKey, metaKey } = event
this.isCmd = (isMac && metaKey) || (!isMac && ctrlKey) return (isMac && metaKey) || (!isMac && ctrlKey)
// shift },
if (event.keyCode === 16 && event.shiftKey) { keydown(event) {
this.selectPin = true const { keyCode } = event
} const isCmd = this.checkCmdKey(event)
console.log('keydown', 'keyCode', keyCode, 'isCmd', isCmd)
// space // space
if (keyCode === 32) { if (keyCode === 32) {
if (!this.inputting && this.selectRowData.length > 0 && !this.drawer) { if (!this.inputting && this.selectRowData.length > 0 && !this.drawer) {
@ -1370,8 +1370,16 @@ export default {
event.preventDefault() event.preventDefault()
event.stopPropagation() event.stopPropagation()
} }
// Del
if (keyCode === 8) {
if (!this.inputting && this.selectRowData.length > 0) {
this.removeOperation()
event.preventDefault()
event.stopPropagation()
}
}
// ctrl + A / cmd + A // ctrl + A / cmd + A
if (this.isCmd && keyCode === 65) { if (isCmd && keyCode === 65) {
if (this.inputting || this.editingIndex !== -1) { if (this.inputting || this.editingIndex !== -1) {
event.target.select() event.target.select()
} else { } else {
@ -1385,22 +1393,16 @@ export default {
} }
} }
// ctrl + P / cmd + P // ctrl + P / cmd + P
if (this.isCmd && keyCode === 80) { // if (isCmd && keyCode === 80) {
if (!this.inputting && this.editingIndex === -1) { // if (!this.inputting && this.editingIndex === -1) {
this.searchDialogVisible = true // this.searchDialogVisible = true
event.preventDefault() // event.preventDefault()
event.stopPropagation() // event.stopPropagation()
} // }
} // }
}, },
keyup(event) { keyup(event) {
const isMac = navigator.platform.startsWith('Mac') const { keyCode } = event
const { keyCode, ctrlKey, metaKey } = event
this.isCmd = (isMac && metaKey) || (!isMac && ctrlKey)
// 松开shift键
if (keyCode === 16) {
this.selectPin = false
}
// space // space
if (keyCode === 32) { if (keyCode === 32) {
if (this.drawer && Date.now() - this.drawerShowTime >= 500) { if (this.drawer && Date.now() - this.drawerShowTime >= 500) {
@ -1459,16 +1461,16 @@ export default {
this.onCreateFilename = '' this.onCreateFilename = ''
}, 2000) }, 2000)
}, },
gridItemClick(row) { gridItemClick(row, event) {
if (this.selectFile) { if (this.selectFile) {
this.fileClick(row) this.fileClick(row, event)
} }
if (this.isCmd) { if (this.checkCmdKey(event)) {
this.pinSelect(null, row) this.pinSelect(row, event)
this.$refs.fileListTable.toggleRowSelection([{ row: row }]) this.$refs.fileListTable.toggleRowSelection([{ row: row }])
return return
} }
this.pinSelect(null, row) this.pinSelect(row, event)
}, },
containerResize() { containerResize() {
const container = document.querySelector('.dashboard-container') const container = document.querySelector('.dashboard-container')
@ -1564,7 +1566,7 @@ export default {
!_this.selectRowData.includes(_this.fileList[throughRow.rowIndex]) !_this.selectRowData.includes(_this.fileList[throughRow.rowIndex])
) { ) {
_this.editingIndex = -1 _this.editingIndex = -1
if (!_this.isCmd && !_this.selectPin) { if (!_this.checkCmdKey(e) && !e.shiftKey) {
_this.$refs.fileListTable.clearSelection() _this.$refs.fileListTable.clearSelection()
_this.$refs.fileListTable.toggleRowSelection([ _this.$refs.fileListTable.toggleRowSelection([
{ row: _this.fileList[throughRow.rowIndex], selected: true }, { row: _this.fileList[throughRow.rowIndex], selected: true },
@ -1578,7 +1580,7 @@ export default {
if (evt.button !== 0) { if (evt.button !== 0) {
return return
} }
if (!_this.isCmd && !_this.selectPin) { if (!_this.checkCmdKey(e) && !e.shiftKey) {
const index = elPath.findIndex( const index = elPath.findIndex(
el => el =>
el.className === itemClassName || el.className === itemClassName ||
@ -1918,7 +1920,7 @@ export default {
return false return false
} }
// 正在选区获取按住关键键时禁止拖拽 // 正在选区获取按住关键键时禁止拖拽
if (_this.drawFlag || _this.isCmd || _this.selectPin) { if (_this.drawFlag || _this.checkCmdKey(e) || e.shiftKey) {
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
return return
@ -2913,18 +2915,18 @@ export default {
// // 画矩形选取 // // 画矩形选取
// this.darwRectangle() // this.darwRectangle()
}, },
pinSelect(rows, row) { pinSelect(row, event) {
if (this.selectPin && this.selectOrgin > -1) { if (event.shiftKey && this.selectOrigin > -1) {
const orgin = this.selectOrgin const origin = this.selectOrigin
this.selectEnd = row.index this.selectEnd = row.index
let diff = this.selectEnd - orgin let diff = this.selectEnd - origin
// 先清除选中 // 先清除选中
this.$refs.fileListTable.clearSelection() this.$refs.fileListTable.clearSelection()
if (diff === 0) { if (diff === 0) {
this.selectOrgin = -1 this.selectOrigin = -1
} }
if (diff > 0) { if (diff > 0) {
for (let i = orgin; i <= this.selectEnd; i++) { for (let i = origin; i <= this.selectEnd; i++) {
this.$refs.fileListTable.toggleRowSelection([ this.$refs.fileListTable.toggleRowSelection([
{ row: this.fileList[i], selected: true }, { row: this.fileList[i], selected: true },
]) ])
@ -2932,7 +2934,7 @@ export default {
} }
} }
if (diff < 0) { if (diff < 0) {
for (let i = this.selectEnd; i <= orgin; i++) { for (let i = this.selectEnd; i <= origin; i++) {
this.$refs.fileListTable.toggleRowSelection([ this.$refs.fileListTable.toggleRowSelection([
{ row: this.fileList[i], selected: true }, { row: this.fileList[i], selected: true },
]) ])
@ -3019,26 +3021,11 @@ export default {
} }
return sizeSum return sizeSum
}, },
selectAll(checked) {
this.isSelectAll = checked
if (checked) {
this.fileList.forEach(row => {
this.selectRowData.push(row)
})
} else {
this.isIndeterminate = false
}
},
// 收集选中的index值作为数组 传递给rowRed判断变换样式 // 收集选中的index值作为数组 传递给rowRed判断变换样式
handleSelectionChange(rows) { handleSelectionChange(rows) {
// 起点 // 起点
if (rows.length > 0) { if (rows.length > 0) {
if (!this.selectPin) { this.selectOrigin = rows[0].index
this.selectOrgin = rows[0].index
}
if (this.selectPin) {
return
}
this.rowContextData = rows[0] this.rowContextData = rows[0]
} }
this.$refs.fileListTable.tableSelectData = rows this.$refs.fileListTable.tableSelectData = rows
@ -3121,13 +3108,14 @@ export default {
this.highlightFavorite(isFavorite, false) this.highlightFavorite(isFavorite, false)
}, },
//双击 //双击
dblclick(row) { dblclick(row, column, cell, event) {
this.fileClick(row) this.fileClick(row, event)
}, },
// 单元格点击事件 // 单元格点击事件
cellClick(row, column) { cellClick(row, column, cell, event) {
console.log('cellClick', row, column, cell, event)
if (this.selectFile) { if (this.selectFile) {
this.fileClick(row) this.fileClick(row, event)
return return
} }
clearTimeout(this.Loop) clearTimeout(this.Loop)
@ -3140,12 +3128,12 @@ export default {
} }
} }
} }
if (this.isCmd) { if (this.checkCmdKey(event)) {
this.pinSelect(null, row) this.pinSelect(row, event)
this.$refs.fileListTable.toggleRowSelection([{ row: row }]) this.$refs.fileListTable.toggleRowSelection([{ row: row }])
return return
} }
this.pinSelect(null, row) this.pinSelect(row, event)
} }
}, },
// 选取输入框部分内容 // 选取输入框部分内容
@ -3278,7 +3266,7 @@ export default {
) )
} }
if (!row.isFolder && this.queryFileType !== 'trash') { if (!row.isFolder && this.queryFileType !== 'trash') {
this.menus.splice(-2, 0, { iconClass: 'duplicate', label: '创建副本', operation: 'duplicate'}) this.menus.splice(-2, 0, fileOperations.duplicate)
} }
if ((row.isShare && !row.shareBase) || row.ossFolder) { if ((row.isShare && !row.shareBase) || row.ossFolder) {
// 删除分享选项 // 删除分享选项
@ -3325,18 +3313,18 @@ export default {
) )
if (file.operationPermissionList && file.operationPermissionList.length > 0) { if (file.operationPermissionList && file.operationPermissionList.length > 0) {
if (file.operationPermissionList.indexOf('PUT') > -1) { if (file.operationPermissionList.indexOf('PUT') > -1) {
this.menus.splice(this.menus.length - 1, 0, { iconClass: 'menu-rename', label: '重命名', operation: 'rename'}) this.menus.splice(this.menus.length - 1, 0, fileOperations.rename)
} }
if (file.operationPermissionList.indexOf('UPLOAD') > -1) { if (file.operationPermissionList.indexOf('UPLOAD') > -1) {
if (file.operationPermissionList.indexOf('DELETE') > -1) { if (file.operationPermissionList.indexOf('DELETE') > -1) {
this.menus.splice(this.menus.length - 1, 0, { iconClass: 'menu-copy',label: '移动或复制', operation: 'copy'}) this.menus.splice(this.menus.length - 1, 0, fileOperations.copy)
} }
if (!file.isFolder) { if (!file.isFolder) {
this.menus.splice(this.menus.length - 1, 0, { iconClass: 'duplicate', label: '创建副本', operation: 'duplicate'}) this.menus.splice(this.menus.length - 1, 0, fileOperations.duplicate)
} }
} }
if (file.operationPermissionList.indexOf('DELETE') > -1) { if (file.operationPermissionList.indexOf('DELETE') > -1) {
this.menus.splice(this.menus.length, 0, { iconClass: 'menu-remove', label: '删除', operation: 'remove'}) this.menus.splice(this.menus.length, 0, fileOperations.remove)
} }
} }
this.setMenusCopyDownLoadLinks(file) this.setMenusCopyDownLoadLinks(file)
@ -3500,7 +3488,7 @@ export default {
}) })
}, },
// 列表右键菜单操作 // 列表右键菜单操作
menusOperations(operation) { menusOperations(operation, event) {
switch (operation) { switch (operation) {
case 'share': case 'share':
// 分配标签 // 分配标签
@ -3525,7 +3513,7 @@ export default {
break break
case 'open': case 'open':
// 打开 // 打开
this.fileClick(this.rowContextData) this.fileClick(this.rowContextData, event)
break break
case 'deselect': case 'deselect':
// 取消选定 // 取消选定
@ -3561,9 +3549,7 @@ export default {
break break
case 'remove': case 'remove':
// 删除 // 删除
this.permanentDelete = false this.removeOperation()
this.selectDeleteFile = this.getSelectDeleteList()
this.deleteConfirmVisible = true
break break
case 'sweep': case 'sweep':
// 清空回收站 // 清空回收站
@ -3579,6 +3565,11 @@ export default {
clearTreeNode() { clearTreeNode() {
// 清空文件树 // 清空文件树
}, },
removeOperation() {
this.permanentDelete = false
this.selectDeleteFile = this.getSelectDeleteList()
this.deleteConfirmVisible = true
},
// 加载下一级文件树 // 加载下一级文件树
directoryTreeLoadNode(node, resolve) { directoryTreeLoadNode(node, resolve) {
let fileId = null let fileId = null
@ -4122,7 +4113,7 @@ export default {
}) })
}, },
// 点击文件或文件夹 // 点击文件或文件夹
fileClick(row) { fileClick(row, event) {
if (this.queryFileType === 'trash') { if (this.queryFileType === 'trash') {
return return
} }
@ -4190,7 +4181,7 @@ export default {
if (selectData.length < 1 || selectData[0].id !== row.id) { if (selectData.length < 1 || selectData[0].id !== row.id) {
this.$refs.fileListTable.clearSelection() this.$refs.fileListTable.clearSelection()
this.$refs.fileListTable.toggleRowSelection([{ row: row }]) this.$refs.fileListTable.toggleRowSelection([{ row: row }])
this.pinSelect(null, row) this.pinSelect(row, event)
} else { } else {
this.$refs.fileListTable.clearSelection() this.$refs.fileListTable.clearSelection()
selectFile = {} selectFile = {}

1
src/styles/home-index.scss
View File

@ -132,6 +132,7 @@
>>> .ctx-menu-container { >>> .ctx-menu-container {
border: 0 solid rgba(0, 0, 0, 0); border: 0 solid rgba(0, 0, 0, 0);
min-width: 160px;
} }
.menu-triangle-bottom { .menu-triangle-bottom {

7
src/styles/index.scss
View File

@ -228,14 +228,15 @@ input {
} }
kbd { kbd {
display: inline-block; display: inline-block;
padding: 5px 5px; margin-left: 3px;
font: 14px var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace); padding: 4px 4px;
font: 12px var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace);
line-height: 10px; line-height: 10px;
color: #1f2328; color: #1f2328;
vertical-align: middle; vertical-align: middle;
background-color: #f6f8fa; background-color: #f6f8fa;
border: solid 1px rgba(175, 184, 193, .2); border: solid 1px rgba(175, 184, 193, .2);
border-radius: 6px; border-radius: 3px;
-webkit-box-shadow: inset 0 -1px 0 rgba(175, 184, 193, .2); -webkit-box-shadow: inset 0 -1px 0 rgba(175, 184, 193, .2);
box-shadow: inset 0 -1px 0 rgba(175, 184, 193, .2); box-shadow: inset 0 -1px 0 rgba(175, 184, 193, .2);
} }

9
src/utils/file-operations.js Normal file
View File

@ -0,0 +1,9 @@
export const fileOperations = {
open: { iconClass: 'menu-open', label: '打开', operation: 'open' },
remove: { iconClass: 'menu-remove', label: '删除', operation: 'remove', shortcut: ['Del'] },
duplicate: { iconClass: 'duplicate', label: '创建副本', operation: 'duplicate' },
download: { iconClass: 'menu-download', label: '下载', operation: 'download' },
copy: { iconClass: 'menu-copy', label: '移动或复制', operation: 'copy' },
rename: { iconClass: 'menu-rename', label: '重命名', operation: 'rename', shortcut: ['F2'] },
//copyKey: { iconClass: 'menu-copy', label: '复制', operation: 'copyKey', shortcut: [navigator.platform.startsWith('Mac') ? '⌘' : 'Ctrl', 'C'] },
}