perf: optimal drag upload functionality and clean up context menu options
This commit is contained in:
parent
43cb3fd184
commit
260ce945cd
@ -21,7 +21,7 @@
|
|||||||
</v-contextmenu-item>
|
</v-contextmenu-item>
|
||||||
<v-contextmenu-submenu
|
<v-contextmenu-submenu
|
||||||
v-if="item.child"
|
v-if="item.child"
|
||||||
:disabled="item.homeDisable && (!path || path.length < 2)"
|
:disabled="item.operation === 'create' && isNotUploadAllowed"
|
||||||
:title="item.label"
|
:title="item.label"
|
||||||
>
|
>
|
||||||
<!-- 二级菜单 -->
|
<!-- 二级菜单 -->
|
||||||
@ -91,7 +91,7 @@
|
|||||||
<el-popover
|
<el-popover
|
||||||
popper-class="upload-file"
|
popper-class="upload-file"
|
||||||
v-if="showUploadButton"
|
v-if="showUploadButton"
|
||||||
v-show="!(isRootPath && homeHidden)"
|
v-show="!isNotUploadAllowed"
|
||||||
v-model="isShowNewFolder"
|
v-model="isShowNewFolder"
|
||||||
placement="bottom"
|
placement="bottom"
|
||||||
trigger="hover"
|
trigger="hover"
|
||||||
@ -839,6 +839,8 @@ import { formatSize, formatTime } from '@/utils/number'
|
|||||||
import EditElement from '@/views/markdown/EditElement'
|
import EditElement from '@/views/markdown/EditElement'
|
||||||
import Clipboard from 'clipboard'
|
import Clipboard from 'clipboard'
|
||||||
|
|
||||||
|
import { isNotDragUploadAllowed } from '@/components/SimpleUploader/dragUploadUtils'
|
||||||
|
|
||||||
import _ from 'lodash'
|
import _ from 'lodash'
|
||||||
import path from 'path'
|
import path from 'path'
|
||||||
import { mapGetters, mapState } from 'vuex'
|
import { mapGetters, mapState } from 'vuex'
|
||||||
@ -878,10 +880,6 @@ export default {
|
|||||||
type: Number,
|
type: Number,
|
||||||
default: 106,
|
default: 106,
|
||||||
},
|
},
|
||||||
homeHidden: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
showUploadButton: {
|
showUploadButton: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true,
|
default: true,
|
||||||
@ -1162,15 +1160,15 @@ export default {
|
|||||||
return '名称'
|
return '名称'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
isNotUploadAllowed() {
|
||||||
|
return isNotDragUploadAllowed(this.$route)
|
||||||
|
},
|
||||||
searchOptionBtnClass() {
|
searchOptionBtnClass() {
|
||||||
return this.hasSearchFilterOption ? 'search-option-btn search-option-btn-active' : 'search-option-btn'
|
return this.hasSearchFilterOption ? 'search-option-btn search-option-btn-active' : 'search-option-btn'
|
||||||
},
|
},
|
||||||
cmdKey() {
|
cmdKey() {
|
||||||
return navigator.platform.startsWith('Mac') ? '⌘' : 'Ctrl'
|
return navigator.platform.startsWith('Mac') ? '⌘' : 'Ctrl'
|
||||||
},
|
},
|
||||||
isRootPath() {
|
|
||||||
return !this.$route.query.path || this.$route.query.path.length < 2
|
|
||||||
},
|
|
||||||
fileClipboard() {
|
fileClipboard() {
|
||||||
return store.getters.fileClipboard
|
return store.getters.fileClipboard
|
||||||
},
|
},
|
||||||
|
|||||||
43
src/components/SimpleUploader/dragUploadUtils.js
Normal file
43
src/components/SimpleUploader/dragUploadUtils.js
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
// utils/dragUploadUtils.js
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 拖拽上传相关工具函数
|
||||||
|
*/
|
||||||
|
|
||||||
|
// 特殊路由 - 完全禁止拖拽上传
|
||||||
|
const SPECIAL_ROUTES = ['/recently', '/document', '/audio', '/image', '/video']
|
||||||
|
|
||||||
|
// 禁用拖拽路由 - 需要特定条件才允许
|
||||||
|
const NO_DRAG_ROUTES = ['/favorite', '/mount', '/trash', '/tag']
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 检查是否禁止拖拽上传
|
||||||
|
* @param {Object} route - 路由对象 { path, query }
|
||||||
|
* @returns {boolean}
|
||||||
|
*/
|
||||||
|
export function isNotDragUploadAllowed(route) {
|
||||||
|
if (!route) return false
|
||||||
|
|
||||||
|
const { path, query = {} } = route
|
||||||
|
const { keyword, searchOpenFolder } = query || {}
|
||||||
|
|
||||||
|
// 标准化路径
|
||||||
|
const normalizedPath = path ? path.replace(/\/$/, '') : ''
|
||||||
|
|
||||||
|
// 三种禁用拖拽的条件
|
||||||
|
const isSpecialRoute = SPECIAL_ROUTES.includes(normalizedPath)
|
||||||
|
const isNoDragRoute = NO_DRAG_ROUTES.includes(normalizedPath) && !query.path
|
||||||
|
const isSearchWithoutFolder = keyword && !searchOpenFolder
|
||||||
|
|
||||||
|
return isSpecialRoute || isNoDragRoute || isSearchWithoutFolder
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 检查是否允许拖拽上传
|
||||||
|
* @param {Object} route - 路由对象 { path, query }
|
||||||
|
* @returns {boolean}
|
||||||
|
*/
|
||||||
|
export function isDragUploadAllowed(route) {
|
||||||
|
return !isNotDragUploadAllowed(route)
|
||||||
|
}
|
||||||
|
|
||||||
@ -118,7 +118,8 @@ import SparkMD5 from 'spark-md5'
|
|||||||
import api from '@/api/file-api'
|
import api from '@/api/file-api'
|
||||||
import {formatNetSpeed} from '@/utils/number'
|
import {formatNetSpeed} from '@/utils/number'
|
||||||
import {mapState} from 'vuex'
|
import {mapState} from 'vuex'
|
||||||
import {encodeIfNeeded} from "@/utils/path";
|
import {encodeIfNeeded} from "@/utils/path"
|
||||||
|
import { isDragUploadAllowed } from './dragUploadUtils'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {},
|
components: {},
|
||||||
@ -189,7 +190,7 @@ export default {
|
|||||||
fileListScrollTop: 0,
|
fileListScrollTop: 0,
|
||||||
dragoverLoop: null,
|
dragoverLoop: null,
|
||||||
successMsg: null,
|
successMsg: null,
|
||||||
enableDragUpload: false,// 是否启用拖拽上传
|
enableDragUpload: true,// 是否启用拖拽上传
|
||||||
uploader: null,
|
uploader: null,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -198,8 +199,7 @@ export default {
|
|||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
$route(route) {
|
$route(route) {
|
||||||
// 只有首页才启用拖拽上传
|
this.checkDrag(route)
|
||||||
this.enableDragUpload = route.path === '/'
|
|
||||||
},
|
},
|
||||||
message(msg) {
|
message(msg) {
|
||||||
switch (msg.event) {
|
switch (msg.event) {
|
||||||
@ -233,7 +233,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.enableDragUpload = this.$route.path === '/'
|
this.checkDrag(this.$route)
|
||||||
let that = this
|
let that = this
|
||||||
let dropbox = document.body
|
let dropbox = document.body
|
||||||
|
|
||||||
@ -280,6 +280,9 @@ export default {
|
|||||||
destroyed() {
|
destroyed() {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
checkDrag(route) {
|
||||||
|
this.enableDragUpload = isDragUploadAllowed(route)
|
||||||
|
},
|
||||||
onStorageTypeChange(chunkSize) {
|
onStorageTypeChange(chunkSize) {
|
||||||
localStorage.setItem('uploader_chunk_size', chunkSize)
|
localStorage.setItem('uploader_chunk_size', chunkSize)
|
||||||
if (this.options.chunkSize !== chunkSize && !this.panelShow) {
|
if (this.options.chunkSize !== chunkSize && !this.panelShow) {
|
||||||
|
|||||||
@ -9,7 +9,6 @@
|
|||||||
:defaultSort="sortable"
|
:defaultSort="sortable"
|
||||||
:queryCondition="queryCondition"
|
:queryCondition="queryCondition"
|
||||||
:contextMenus="contextMenus"
|
:contextMenus="contextMenus"
|
||||||
homeHidden
|
|
||||||
>
|
>
|
||||||
</show-file>
|
</show-file>
|
||||||
</div>
|
</div>
|
||||||
@ -39,7 +38,7 @@
|
|||||||
},
|
},
|
||||||
{ label: '刷新', operation: 'refresh'},
|
{ label: '刷新', operation: 'refresh'},
|
||||||
{ divider: true, operation: 'divider' },
|
{ divider: true, operation: 'divider' },
|
||||||
{ label: '新建', operation: 'create' , homeDisable: true, child: createFiles
|
{ label: '新建', operation: 'create' , child: createFiles
|
||||||
},
|
},
|
||||||
{ divider: true, operation: 'divider' },
|
{ divider: true, operation: 'divider' },
|
||||||
{ label: '写文章', operation: 'createMarkdownFile'},
|
{ label: '写文章', operation: 'createMarkdownFile'},
|
||||||
|
|||||||
@ -39,7 +39,7 @@ export default {
|
|||||||
},
|
},
|
||||||
{ label: '刷新', operation: 'refresh'},
|
{ label: '刷新', operation: 'refresh'},
|
||||||
{ divider: true, operation: 'divider' },
|
{ divider: true, operation: 'divider' },
|
||||||
{ label: '新建', operation: 'create' , homeDisable: true, child: createFiles
|
{ label: '新建', operation: 'create' , child: createFiles
|
||||||
},
|
},
|
||||||
{ divider: true, operation: 'divider' },
|
{ divider: true, operation: 'divider' },
|
||||||
{ label: '写文章', operation: 'createMarkdownFile'},
|
{ label: '写文章', operation: 'createMarkdownFile'},
|
||||||
|
|||||||
@ -39,7 +39,7 @@ export default {
|
|||||||
},
|
},
|
||||||
{ label: '刷新', operation: 'refresh'},
|
{ label: '刷新', operation: 'refresh'},
|
||||||
{ divider: true, operation: 'divider' },
|
{ divider: true, operation: 'divider' },
|
||||||
{ label: '新建', operation: 'create' , homeDisable: true, child: createFiles
|
{ label: '新建', operation: 'create' , child: createFiles
|
||||||
},
|
},
|
||||||
{ divider: true, operation: 'divider' },
|
{ divider: true, operation: 'divider' },
|
||||||
{ label: '写文章', operation: 'createMarkdownFile'},
|
{ label: '写文章', operation: 'createMarkdownFile'},
|
||||||
|
|||||||
@ -38,7 +38,7 @@ export default {
|
|||||||
},
|
},
|
||||||
{ label: '刷新', operation: 'refresh'},
|
{ label: '刷新', operation: 'refresh'},
|
||||||
{ divider: true, operation: 'divider' },
|
{ divider: true, operation: 'divider' },
|
||||||
{ label: '新建', operation: 'create' , homeDisable: true, child: createFiles
|
{ label: '新建', operation: 'create' , child: createFiles
|
||||||
},
|
},
|
||||||
{ divider: true, operation: 'divider' },
|
{ divider: true, operation: 'divider' },
|
||||||
{ label: '写文章', operation: 'createMarkdownFile'},
|
{ label: '写文章', operation: 'createMarkdownFile'},
|
||||||
|
|||||||
@ -39,7 +39,7 @@ export default {
|
|||||||
},
|
},
|
||||||
{ label: '刷新', operation: 'refresh'},
|
{ label: '刷新', operation: 'refresh'},
|
||||||
{ divider: true, operation: 'divider' },
|
{ divider: true, operation: 'divider' },
|
||||||
{ label: '新建', operation: 'create' , homeDisable: true, child: createFiles
|
{ label: '新建', operation: 'create' , child: createFiles
|
||||||
},
|
},
|
||||||
{ divider: true, operation: 'divider' },
|
{ divider: true, operation: 'divider' },
|
||||||
{ label: '写文章', operation: 'createMarkdownFile'},
|
{ label: '写文章', operation: 'createMarkdownFile'},
|
||||||
|
|||||||
@ -9,7 +9,6 @@
|
|||||||
:defaultSort="sortable"
|
:defaultSort="sortable"
|
||||||
:queryCondition="queryCondition"
|
:queryCondition="queryCondition"
|
||||||
:contextMenus="contextMenus"
|
:contextMenus="contextMenus"
|
||||||
homeHidden
|
|
||||||
>
|
>
|
||||||
</show-file>
|
</show-file>
|
||||||
</div>
|
</div>
|
||||||
@ -39,7 +38,7 @@
|
|||||||
},
|
},
|
||||||
{ label: '刷新', operation: 'refresh'},
|
{ label: '刷新', operation: 'refresh'},
|
||||||
{ divider: true, operation: 'divider' },
|
{ divider: true, operation: 'divider' },
|
||||||
{ label: '新建', operation: 'create' , homeDisable: true, child: createFiles
|
{ label: '新建', operation: 'create' , child: createFiles
|
||||||
},
|
},
|
||||||
{ divider: true, operation: 'divider' },
|
{ divider: true, operation: 'divider' },
|
||||||
{ label: '写文章', operation: 'createMarkdownFile'},
|
{ label: '写文章', operation: 'createMarkdownFile'},
|
||||||
|
|||||||
@ -37,7 +37,7 @@
|
|||||||
},
|
},
|
||||||
{ label: '刷新', operation: 'refresh'},
|
{ label: '刷新', operation: 'refresh'},
|
||||||
{ divider: true, operation: 'divider' },
|
{ divider: true, operation: 'divider' },
|
||||||
{ label: '新建', operation: 'create' , homeDisable: true, child: createFiles},
|
{ label: '新建', operation: 'create' , child: createFiles},
|
||||||
{ divider: true, operation: 'divider' },
|
{ divider: true, operation: 'divider' },
|
||||||
{ label: '写文章', operation: 'createMarkdownFile'},
|
{ label: '写文章', operation: 'createMarkdownFile'},
|
||||||
]
|
]
|
||||||
|
|||||||
@ -8,7 +8,6 @@
|
|||||||
:defaultSort="sortable"
|
:defaultSort="sortable"
|
||||||
:queryCondition="queryCondition"
|
:queryCondition="queryCondition"
|
||||||
:contextMenus="contextMenus"
|
:contextMenus="contextMenus"
|
||||||
homeHidden
|
|
||||||
>
|
>
|
||||||
</show-file>
|
</show-file>
|
||||||
</div>
|
</div>
|
||||||
@ -38,7 +37,7 @@ export default {
|
|||||||
},
|
},
|
||||||
{ label: '刷新', operation: 'refresh'},
|
{ label: '刷新', operation: 'refresh'},
|
||||||
{ divider: true, operation: 'divider' },
|
{ divider: true, operation: 'divider' },
|
||||||
{ label: '新建', operation: 'create' , homeDisable: true, child: createFiles
|
{ label: '新建', operation: 'create' , child: createFiles
|
||||||
},
|
},
|
||||||
{ divider: true, operation: 'divider' },
|
{ divider: true, operation: 'divider' },
|
||||||
{ label: '写文章', operation: 'createMarkdownFile'},
|
{ label: '写文章', operation: 'createMarkdownFile'},
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user