From e694604d353c75520db3f076699b7d7e9b268614 Mon Sep 17 00:00:00 2001 From: jmal Date: Fri, 18 Jul 2025 17:31:44 +0800 Subject: [PATCH 1/3] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E6=8E=92?= =?UTF-8?q?=E5=BA=8F=E6=93=8D=E4=BD=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ShowFile/ShowFile.vue | 138 ++++++++++++-------------- src/components/SortDropdown/index.vue | 137 +++++++++++++++++++++++++ src/utils/file-operations.js | 15 ++- 3 files changed, 214 insertions(+), 76 deletions(-) create mode 100644 src/components/SortDropdown/index.vue diff --git a/src/components/ShowFile/ShowFile.vue b/src/components/ShowFile/ShowFile.vue index 6c765a1..ef32478 100644 --- a/src/components/ShowFile/ShowFile.vue +++ b/src/components/ShowFile/ShowFile.vue @@ -259,44 +259,45 @@ - -
- - - - {{ sortName }} - -
- - - - - 名称 - - - - - - 大小 - - - - - - 上传时间 - - - - - - 修改时间 - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -824,6 +825,7 @@ import SearchOption from '@/components/SearchOption/index.vue' import ShareDialog from '@/components/ShareDialog/index.vue' import DialogFileList from '@/components/ShowFile/DialogFileList.vue' import FileClipboard from '@/components/ShowFile/FileClipboard.vue' +import SortDropdown from '@/components/SortDropdown/index.vue' import TagDialog from '@/components/TagDialog/index.vue' import FileContextmenu from '@/components/VContextmenu/file-contextmenu.vue' import store from '@/store' @@ -844,6 +846,7 @@ import { mapGetters, mapState } from 'vuex' export default { name: 'ShowFile', components: { + SortDropdown, DirectLinkDialog, FileContextmenu, FileClipboard, @@ -2793,13 +2796,6 @@ export default { child[0].iconClass = 'menu-point' child[1].iconClass = 'menu-empty' } - if (child[2]) { - if (localStorage.getItem('showFolderSize') === '1') { - child[2].iconClass = 'duigou' - } else { - child[2].iconClass = 'menu-empty' - } - } } if (arrangementModeIndex > -1) { const child = this.contextMenus[arrangementModeIndex].child @@ -2808,8 +2804,9 @@ export default { const orderProp = item.orderProp if (orderProp === prop) { child.map(item => { - if (orderProp === item.orderProp) { + if (orderProp === item.orderProp && this.sortable.order === item.order) { item.iconClass = 'menu-' + this.sortable.order + console.log('当前排序:', item.order) } else { item.iconClass = 'menu-null' } @@ -2974,7 +2971,6 @@ export default { queryFileType: this.filterOption.type || this.queryFileType, pageIndex: this.pagination.pageIndex, pageSize: this.pagination.pageSize, - showFolderSize: localStorage.getItem('showFolderSize'), type: this.filterOption.type, queryModifyStart: this.filterOption.modifyStart, queryModifyEnd: this.filterOption.modifyEnd, @@ -3025,7 +3021,6 @@ export default { pageIndex: this.pagination.pageIndex, pageSize: this.pagination.pageSize, folder: this.$route.query.folder, - showFolderSize: localStorage.getItem('showFolderSize'), }) .then(res => { this.loadData(res, onLoad) @@ -3046,7 +3041,6 @@ export default { pageIndex: this.pagination.pageIndex, pageSize: this.pagination.pageSize, folder: this.$route.query.folder, - showFolderSize: localStorage.getItem('showFolderSize'), }) .then(res => { this.loadData(res, onLoad) @@ -3088,7 +3082,6 @@ export default { queryCondition: this.queryCondition, pageIndex: this.pagination.pageIndex, pageSize: this.pagination.pageSize, - showFolderSize: localStorage.getItem('showFolderSize'), }) .then(res => { this.loadData(res, onLoad) @@ -3167,7 +3160,7 @@ export default { } }) // 重新加上排序高亮 - let order = this.sortable.order === 'ascending' ? 'descending' : 'ascending' + let order = this.sortable.order if (headerIndex > -1) { this.addClass(tableHeader.children[headerIndex], order) } @@ -3678,27 +3671,9 @@ export default { }, 100) this.cellMouseIndex = -1 }, - // 全局右键菜单操作 - contextmenuClick(operation) { - this.$refs.fileListTable.clearSelection() - switch (operation) { - case 'vmode-list': - this.grid = true - this.changeVmode() - break - case 'vmode-grid': - this.grid = false - this.changeVmode() - break - case 'show-folder-size': - const showFolderSize = localStorage.getItem('showFolderSize') - if (showFolderSize === '1') { - localStorage.setItem('showFolderSize', '0') - } else { - localStorage.setItem('showFolderSize', '1') - } - this.getFileListEnter() - break + handleSortChange(command, order) { + this.sortable.order = order + switch (command) { case 'orderName': this.sortChangeOfMenu('name', 1) break @@ -3711,6 +3686,25 @@ export default { case 'orderUploadDate': this.sortChangeOfMenu('uploadDate', -1) break + } + }, + // 全局右键菜单操作 + contextmenuClick(operation) { + this.$refs.fileListTable.clearSelection() + if (operation.startsWith('order')) { + const [prop, order] = operation.split('-') + this.handleSortChange(prop, order) + return + } + switch (operation) { + case 'vmode-list': + this.grid = true + this.changeVmode() + break + case 'vmode-grid': + this.grid = false + this.changeVmode() + break case 'refresh': this.getFileListEnter() break diff --git a/src/components/SortDropdown/index.vue b/src/components/SortDropdown/index.vue new file mode 100644 index 0000000..41341bc --- /dev/null +++ b/src/components/SortDropdown/index.vue @@ -0,0 +1,137 @@ + + + + + diff --git a/src/utils/file-operations.js b/src/utils/file-operations.js index 0fba291..ab96e03 100644 --- a/src/utils/file-operations.js +++ b/src/utils/file-operations.js @@ -20,10 +20,17 @@ export const directLinkSubMenus = [ ] export const fileArrangements = [ - { label: '名称', operation: 'orderName', orderProp: 'name'}, - { label: '大小', operation: 'orderSize', orderProp: 'size'}, - { label: '上传时间', operation: 'orderUploadDate', orderProp: 'uploadDate'}, - { label: '修改时间', operation: 'orderUpdateDate', orderProp: 'updateDate'}, + { label: '名称 - 顺序', operation: 'orderName-ascending', orderProp: 'name', order: 'ascending'}, + { label: '名称 - 倒序', operation: 'orderName-descending', orderProp: 'name', order: 'descending'}, + { divider: true, operation: 'divider' }, + { label: '大小 - 顺序', operation: 'orderSize-ascending', orderProp: 'size', order: 'ascending'}, + { label: '大小 - 倒序', operation: 'orderSize-descending', orderProp: 'size', order: 'descending'}, + { divider: true, operation: 'divider' }, + { label: '上传时间 - 顺序', operation: 'orderUploadDate-ascending', orderProp: 'uploadDate', order: 'ascending'}, + { label: '上传时间 - 倒序', operation: 'orderUploadDate-descending', orderProp: 'uploadDate', order: 'ascending'}, + { divider: true, operation: 'divider' }, + { label: '修改时间 - 顺序', operation: 'orderUpdateDate-ascending', orderProp: 'updateDate', order: 'ascending'}, + { label: '修改时间 - 倒序', operation: 'orderUpdateDate-descending', orderProp: 'updateDate', order: 'ascending'}, ] export const createFiles = [ From 74b03dac4f47f1fb3f349a40891edafff2ecdf44 Mon Sep 17 00:00:00 2001 From: jmal Date: Fri, 18 Jul 2025 17:31:56 +0800 Subject: [PATCH 2/3] =?UTF-8?q?refactor:=20remove=20'=E6=98=BE=E7=A4=BA?= =?UTF-8?q?=E6=96=87=E4=BB=B6=E5=A4=B9=E5=A4=A7=E5=B0=8F'=20option=20from?= =?UTF-8?q?=20view=20mode=20across=20multiple=20components?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/home-index.scss | 2 +- src/views/favorite/index.vue | 1 - src/views/fileType/audio.vue | 1 - src/views/fileType/document.vue | 1 - src/views/fileType/image.vue | 1 - src/views/fileType/video.vue | 1 - src/views/home/index.vue | 1 - src/views/home/mobile/index.vue | 1 - src/views/mount/index.vue | 1 - src/views/public/share/shareList.vue | 2 -- src/views/recently/index.vue | 1 - src/views/tag/index.vue | 1 - src/views/trash/index.vue | 1 - 13 files changed, 1 insertion(+), 14 deletions(-) diff --git a/src/styles/home-index.scss b/src/styles/home-index.scss index 98d4e27..48cac91 100644 --- a/src/styles/home-index.scss +++ b/src/styles/home-index.scss @@ -191,7 +191,7 @@ color: #19ACF9 } -.search-class{ +>>> .search-class{ float: right; display: flex; justify-content: flex-end; diff --git a/src/views/favorite/index.vue b/src/views/favorite/index.vue index 89d8bbb..3c64562 100644 --- a/src/views/favorite/index.vue +++ b/src/views/favorite/index.vue @@ -33,7 +33,6 @@ { label: '查看', operation: 'viewMode' ,child: [ { iconClass: this.grid?'':'menu-point', label: '列表', operation: 'vmode-list'}, { iconClass: this.grid?'menu-point':'', label: '缩略图', operation: 'vmode-grid'}, - { label: '显示文件夹大小', operation: 'show-folder-size'}, ] }, { label: '排列方式', operation: 'arrangement' ,child: fileArrangements diff --git a/src/views/fileType/audio.vue b/src/views/fileType/audio.vue index 69efe44..5846a05 100644 --- a/src/views/fileType/audio.vue +++ b/src/views/fileType/audio.vue @@ -33,7 +33,6 @@ export default { { label: '查看', operation: 'viewMode' ,child: [ { iconClass: this.grid?'':'menu-point', label: '列表', operation: 'vmode-list'}, { iconClass: this.grid?'menu-point':'', label: '缩略图', operation: 'vmode-grid'}, - { label: '显示文件夹大小', operation: 'show-folder-size'}, ] }, { label: '排列方式', operation: 'arrangement' ,child: fileArrangements diff --git a/src/views/fileType/document.vue b/src/views/fileType/document.vue index 346691a..3f0be3f 100644 --- a/src/views/fileType/document.vue +++ b/src/views/fileType/document.vue @@ -33,7 +33,6 @@ export default { { label: '查看', operation: 'viewMode' ,child: [ { iconClass: this.grid?'':'menu-point', label: '列表', operation: 'vmode-list'}, { iconClass: this.grid?'menu-point':'', label: '缩略图', operation: 'vmode-grid'}, - { label: '显示文件夹大小', operation: 'show-folder-size'}, ] }, { label: '排列方式', operation: 'arrangement' ,child: fileArrangements diff --git a/src/views/fileType/image.vue b/src/views/fileType/image.vue index 1f520e4..dd08c15 100644 --- a/src/views/fileType/image.vue +++ b/src/views/fileType/image.vue @@ -32,7 +32,6 @@ export default { { label: '查看', operation: 'viewMode' ,child: [ { iconClass: this.grid?'':'menu-point', label: '列表', operation: 'vmode-list'}, { iconClass: this.grid?'menu-point':'', label: '缩略图', operation: 'vmode-grid'}, - { label: '显示文件夹大小', operation: 'show-folder-size'}, ] }, { label: '排列方式', operation: 'arrangement' ,child: fileArrangements diff --git a/src/views/fileType/video.vue b/src/views/fileType/video.vue index 625edcf..f5db228 100644 --- a/src/views/fileType/video.vue +++ b/src/views/fileType/video.vue @@ -33,7 +33,6 @@ export default { { label: '查看', operation: 'viewMode' ,child: [ { iconClass: this.grid?'':'menu-point', label: '列表', operation: 'vmode-list'}, { iconClass: this.grid?'menu-point':'', label: '缩略图', operation: 'vmode-grid'}, - { label: '显示文件夹大小', operation: 'show-folder-size'}, ] }, { label: '排列方式', operation: 'arrangement' ,child: fileArrangements diff --git a/src/views/home/index.vue b/src/views/home/index.vue index c25d372..394f893 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -25,7 +25,6 @@ export default { { label: '查看', operation: 'viewMode' ,child: [ { iconClass: this.grid?'':'menu-point', label: '列表', operation: 'vmode-list'}, { iconClass: this.grid?'menu-point':'', label: '缩略图', operation: 'vmode-grid'}, - { label: '显示文件夹大小', operation: 'show-folder-size'}, ] }, { label: '排列方式', operation: 'arrangement' ,child: fileArrangements diff --git a/src/views/home/mobile/index.vue b/src/views/home/mobile/index.vue index c937d86..10704f6 100644 --- a/src/views/home/mobile/index.vue +++ b/src/views/home/mobile/index.vue @@ -905,7 +905,6 @@ export default { pageIndex: this.pagination.pageIndex, pageSize: this.pagination.pageSize, folder: this.$route.query.folder, - showFolderSize: localStorage.getItem('showFolderSize') }).then(res => { this.loadData(res, onLoad) this.listModeSearch = true diff --git a/src/views/mount/index.vue b/src/views/mount/index.vue index 9447104..e324a39 100644 --- a/src/views/mount/index.vue +++ b/src/views/mount/index.vue @@ -33,7 +33,6 @@ { label: '查看', operation: 'viewMode' ,child: [ { iconClass: this.grid?'':'menu-point', label: '列表', operation: 'vmode-list'}, { iconClass: this.grid?'menu-point':'', label: '缩略图', operation: 'vmode-grid'}, - { label: '显示文件夹大小', operation: 'show-folder-size'}, ] }, { label: '排列方式', operation: 'arrangement' ,child: fileArrangements diff --git a/src/views/public/share/shareList.vue b/src/views/public/share/shareList.vue index 43958e3..892311e 100644 --- a/src/views/public/share/shareList.vue +++ b/src/views/public/share/shareList.vue @@ -627,7 +627,6 @@ export default { fileId: fileId, pageIndex: this.pagination.pageIndex, pageSize: this.pagination.pageSize, - showFolderSize: true }).then(res => { this.isLoading = false this.fileList = res.data @@ -649,7 +648,6 @@ export default { share: this.shortId, pageIndex: this.pagination.pageIndex, pageSize: this.pagination.pageSize, - showFolderSize: true }).then(res => { this.isLoading = false if (Object.getPrototypeOf(res.data) === String.prototype) { diff --git a/src/views/recently/index.vue b/src/views/recently/index.vue index a6ddea0..9ccc69a 100644 --- a/src/views/recently/index.vue +++ b/src/views/recently/index.vue @@ -31,7 +31,6 @@ { label: '查看', operation: 'viewMode' ,child: [ { iconClass: this.grid?'':'menu-point', label: '列表', operation: 'vmode-list'}, { iconClass: this.grid?'menu-point':'', label: '缩略图', operation: 'vmode-grid'}, - { label: '显示文件夹大小', operation: 'show-folder-size'}, ] }, { label: '排列方式', operation: 'arrangement' ,child: fileArrangements diff --git a/src/views/tag/index.vue b/src/views/tag/index.vue index bc154f0..515e73c 100644 --- a/src/views/tag/index.vue +++ b/src/views/tag/index.vue @@ -32,7 +32,6 @@ export default { { label: '查看', operation: 'viewMode' ,child: [ { iconClass: this.grid?'':'menu-point', label: '列表', operation: 'vmode-list'}, { iconClass: this.grid?'menu-point':'', label: '缩略图', operation: 'vmode-grid'}, - { label: '显示文件夹大小', operation: 'show-folder-size'}, ] }, { label: '排列方式', operation: 'arrangement' ,child: fileArrangements diff --git a/src/views/trash/index.vue b/src/views/trash/index.vue index 1cd3f47..c5afd57 100644 --- a/src/views/trash/index.vue +++ b/src/views/trash/index.vue @@ -36,7 +36,6 @@ export default { label: '查看', operation: 'viewMode', child: [ { iconClass: this.grid ? '' : 'menu-point', label: '列表', operation: 'vmode-list' }, { iconClass: this.grid ? 'menu-point' : '', label: '缩略图', operation: 'vmode-grid' }, - { label: '显示文件夹大小', operation: 'show-folder-size'}, ] }, { From 2e10b87b0d0051e8e25155422ec5511eb855d050 Mon Sep 17 00:00:00 2001 From: jmal Date: Fri, 18 Jul 2025 17:42:36 +0800 Subject: [PATCH 3/3] fix: correct sorting order for upload and update date options --- src/components/ShowFile/ShowFile.vue | 1 - src/components/SortDropdown/index.vue | 22 +++++++++------------- src/utils/file-operations.js | 4 ++-- 3 files changed, 11 insertions(+), 16 deletions(-) diff --git a/src/components/ShowFile/ShowFile.vue b/src/components/ShowFile/ShowFile.vue index ef32478..7b7e20c 100644 --- a/src/components/ShowFile/ShowFile.vue +++ b/src/components/ShowFile/ShowFile.vue @@ -2806,7 +2806,6 @@ export default { child.map(item => { if (orderProp === item.orderProp && this.sortable.order === item.order) { item.iconClass = 'menu-' + this.sortable.order - console.log('当前排序:', item.order) } else { item.iconClass = 'menu-null' } diff --git a/src/components/SortDropdown/index.vue b/src/components/SortDropdown/index.vue index 41341bc..6164758 100644 --- a/src/components/SortDropdown/index.vue +++ b/src/components/SortDropdown/index.vue @@ -22,7 +22,7 @@ :divided="item.order === 'ascending' && item.key !== 'name-asc'" > - + {{ item.label }} @@ -56,33 +56,29 @@ export default { computed: { // 生成完整的排序选项（包含顺序和倒序） allSortOptions() { - const options = [] - this.sortOptions.forEach(option => { - // 顺序选项 - options.push({ + return this.sortOptions.flatMap(option => [ + { key: `${option.prop}-asc`, command: `${option.command}-ascending`, prop: option.prop, order: 'ascending', title: option.title, label: `${option.title} - 顺序` - }) - // 倒序选项 - options.push({ + }, + { key: `${option.prop}-desc`, command: `${option.command}-descending`, prop: option.prop, order: 'descending', title: option.title, label: `${option.title} - 倒序` - }) - }) - return options + } + ]) }, // 当前排序字段的显示名称 currentSortName() { const currentOption = this.sortOptions.find(option => option.prop === this.sortable.prop) - return currentOption.title + return currentOption ? currentOption.title : '' }, // 当前排序方向 currentSortOrder() { @@ -129,7 +125,7 @@ export default { } /* 确保图标和文字垂直对齐 */ -.al-file-sort-item-icon /deep/ svg { +.al-file-sort-item-icon >>> svg { width: 14px; height: 14px; vertical-align: middle; diff --git a/src/utils/file-operations.js b/src/utils/file-operations.js index ab96e03..cf75a7d 100644 --- a/src/utils/file-operations.js +++ b/src/utils/file-operations.js @@ -27,10 +27,10 @@ export const fileArrangements = [ { label: '大小 - 倒序', operation: 'orderSize-descending', orderProp: 'size', order: 'descending'}, { divider: true, operation: 'divider' }, { label: '上传时间 - 顺序', operation: 'orderUploadDate-ascending', orderProp: 'uploadDate', order: 'ascending'}, - { label: '上传时间 - 倒序', operation: 'orderUploadDate-descending', orderProp: 'uploadDate', order: 'ascending'}, + { label: '上传时间 - 倒序', operation: 'orderUploadDate-descending', orderProp: 'uploadDate', order: 'descending'}, { divider: true, operation: 'divider' }, { label: '修改时间 - 顺序', operation: 'orderUpdateDate-ascending', orderProp: 'updateDate', order: 'ascending'}, - { label: '修改时间 - 倒序', operation: 'orderUpdateDate-descending', orderProp: 'updateDate', order: 'ascending'}, + { label: '修改时间 - 倒序', operation: 'orderUpdateDate-descending', orderProp: 'updateDate', order: 'descending'}, ] export const createFiles = [