Merge pull request #443 from jamebal/dev

perf: 优化文件排序操作

src/components/ShowFile/ShowFile.vue

@@ -259,44 +259,45 @@
               </template>
 
             </el-autocomplete>
-            <el-dropdown size="medium" style="height: 40px;" @command="contextmenuClick" >
+            <sort-dropdown :sortable="sortable" @sort-change="handleSortChange" />
-              <div>
+<!--            <el-dropdown size="medium" style="height: 40px;" @command="handleSortChange" >-->
-                <el-button round type="text" class="sort">
+<!--              <div>-->
-                  <svg-icon
+<!--                <el-button round type="text" class="sort">-->
-                    v-if="sortable.order === 'descending'"
+<!--                  <svg-icon-->
-                    icon-class="sort-amount-down-solid"
+<!--                    v-if="sortable.order === 'descending'"-->
-                  />
+<!--                    icon-class="sort-amount-down-solid"-->
-                  <svg-icon v-else icon-class="sort-amount-up-alt-solid" />
+<!--                  />-->
-                  <span class="sort-name">{{ sortName }}</span>
+<!--                  <svg-icon v-else icon-class="sort-amount-up-alt-solid" />-->
-                </el-button>
+<!--                  <span class="sort-name">{{ sortName }}</span>-->
-              </div>
+<!--                </el-button>-->
-              <el-dropdown-menu slot="dropdown">
+<!--              </div>-->
-                <el-dropdown-item command="orderName">
+<!--              <el-dropdown-menu slot="dropdown">-->
-                  <span :class="{ 'al-file-sort-item': true, active: sortable.prop === 'name' }" >
+<!--                <el-dropdown-item command="orderName">-->
-                    <i :class="{ 'al-file-sort-item-icon': true, 'el-icon-top': sortable.order === 'ascending', 'el-icon-bottom': sortable.order === 'descending' }" ></i>
+<!--                  <span :class="{ 'al-file-sort-item': true, active: sortable.prop === 'name' }" >-->
-                    <span>名称</span>
+<!--                    <i :class="{ 'al-file-sort-item-icon': true, 'el-icon-top': sortable.order === 'ascending', 'el-icon-bottom': sortable.order === 'descending' }" ></i>-->
-                  </span>
+<!--                    <span>名称</span>-->
-                </el-dropdown-item>
+<!--                  </span>-->
-                <el-dropdown-item command="orderSize">
+<!--                </el-dropdown-item>-->
-                  <span :class="{ 'al-file-sort-item': true, active: sortable.prop === 'size' }" >
+<!--                <el-dropdown-item command="orderSize">-->
-                    <i :class="{ 'al-file-sort-item-icon': true, 'el-icon-top': sortable.order === 'ascending', 'el-icon-bottom': sortable.order === 'descending' }" ></i>
+<!--                  <span :class="{ 'al-file-sort-item': true, active: sortable.prop === 'size' }" >-->
-                    <span>大小</span>
+<!--                    <i :class="{ 'al-file-sort-item-icon': true, 'el-icon-top': sortable.order === 'ascending', 'el-icon-bottom': sortable.order === 'descending' }" ></i>-->
-                  </span>
+<!--                    <span>大小</span>-->
-                </el-dropdown-item>
+<!--                  </span>-->
-                <el-dropdown-item command="orderUploadDate">
+<!--                </el-dropdown-item>-->
-                  <span :class="{ 'al-file-sort-item': true, active: sortable.prop === 'uploadDate' }" >
+<!--                <el-dropdown-item command="orderUploadDate">-->
-                    <i :class="{ 'al-file-sort-item-icon': true, 'el-icon-top': sortable.order === 'ascending', 'el-icon-bottom': sortable.order === 'descending' }" ></i>
+<!--                  <span :class="{ 'al-file-sort-item': true, active: sortable.prop === 'uploadDate' }" >-->
-                    <span>上传时间</span>
+<!--                    <i :class="{ 'al-file-sort-item-icon': true, 'el-icon-top': sortable.order === 'ascending', 'el-icon-bottom': sortable.order === 'descending' }" ></i>-->
-                  </span>
+<!--                    <span>上传时间</span>-->
-                </el-dropdown-item>
+<!--                  </span>-->
-                <el-dropdown-item command="orderUpdateDate">
+<!--                </el-dropdown-item>-->
-                  <span :class="{ 'al-file-sort-item': true, active: sortable.prop === 'updateDate', }">
+<!--                <el-dropdown-item command="orderUpdateDate">-->
-                    <i :class="{ 'al-file-sort-item-icon': true, 'el-icon-top': sortable.order === 'ascending', 'el-icon-bottom': sortable.order === 'descending'}"></i>
+<!--                  <span :class="{ 'al-file-sort-item': true, active: sortable.prop === 'updateDate', }">-->
-                    <span>修改时间</span>
+<!--                    <i :class="{ 'al-file-sort-item-icon': true, 'el-icon-top': sortable.order === 'ascending', 'el-icon-bottom': sortable.order === 'descending'}"></i>-->
-                  </span>
+<!--                    <span>修改时间</span>-->
-                </el-dropdown-item>
+<!--                  </span>-->
-              </el-dropdown-menu>
+<!--                </el-dropdown-item>-->
-            </el-dropdown>
+<!--              </el-dropdown-menu>-->
+<!--            </el-dropdown>-->
             <el-button round type="text" class="vmode" @click="changeVmode">
               <svg-icon :icon-class="grid ? 'list' : 'grid'" />
             </el-button>
@@ -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,7 +2804,7 @@ 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
               } else {
                 item.iconClass = 'menu-null'
@@ -2974,7 +2970,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 +3020,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 +3040,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 +3081,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 +3159,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 +3670,9 @@ export default {
       }, 100)
       this.cellMouseIndex = -1
     },
-    // 全局右键菜单操作
+    handleSortChange(command, order) {
-    contextmenuClick(operation) {
+      this.sortable.order = order
-      this.$refs.fileListTable.clearSelection()
+      switch (command) {
-      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
         case 'orderName':
           this.sortChangeOfMenu('name', 1)
           break
@@ -3711,6 +3685,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

src/components/SortDropdown/index.vue

@@ -0,0 +1,133 @@
+<template>
+  <el-dropdown
+    size="medium"
+    style="height: 40px;"
+    @command="handleCommand"
+  >
+    <div>
+      <el-button round type="text" class="sort">
+        <svg-icon
+          v-if="currentSortOrder === 'descending'"
+          icon-class="sort-amount-down-solid"
+        />
+        <svg-icon v-else icon-class="sort-amount-up-alt-solid" />
+        <span class="sort-name">{{ currentSortName }}</span>
+      </el-button>
+    </div>
+    <el-dropdown-menu slot="dropdown">
+      <el-dropdown-item
+        v-for="item in allSortOptions"
+        :key="item.key"
+        :command="item.command"
+        :divided="item.order === 'ascending' && item.key !== 'name-asc'"
+      >
+        <span :class="{ 'al-file-sort-item': true, active: sortable.prop === item.prop && sortable.order === item.order }">
+          <i :class="['al-file-sort-item-icon', (sortable.prop === item.prop && sortable.order === item.order) ? (sortable.order === 'ascending' ? 'el-icon-top' : 'el-icon-bottom') : '']" ></i>
+          <span>{{ item.label }}</span>
+        </span>
+      </el-dropdown-item>
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+
+<script>
+export default {
+  name: 'SortDropdown',
+  props: {
+    // 当前排序状态
+    sortable: {
+      type: Object,
+      required: true,
+      validator(value) {
+        return value && typeof value.prop === 'string' && typeof value.order === 'string'
+      }
+    },
+    // 排序选项配置
+    sortOptions: {
+      type: Array,
+      default: () => [
+        { command: 'orderName', prop: 'name', title: '名称' },
+        { command: 'orderSize', prop: 'size', title: '大小' },
+        { command: 'orderUploadDate', prop: 'uploadDate', title: '上传时间' },
+        { command: 'orderUpdateDate', prop: 'updateDate', title: '修改时间' }
+      ]
+    }
+  },
+  computed: {
+    // 生成完整的排序选项（包含顺序和倒序）
+    allSortOptions() {
+      return this.sortOptions.flatMap(option => [
+        {
+          key: `${option.prop}-asc`,
+          command: `${option.command}-ascending`,
+          prop: option.prop,
+          order: 'ascending',
+          title: option.title,
+          label: `${option.title} - 顺序`
+        },
+        {
+          key: `${option.prop}-desc`,
+          command: `${option.command}-descending`,
+          prop: option.prop,
+          order: 'descending',
+          title: option.title,
+          label: `${option.title} - 倒序`
+        }
+      ])
+    },
+    // 当前排序字段的显示名称
+    currentSortName() {
+      const currentOption = this.sortOptions.find(option => option.prop === this.sortable.prop)
+      return currentOption ? currentOption.title : ''
+    },
+    // 当前排序方向
+    currentSortOrder() {
+      return this.sortable.order
+    }
+  },
+  methods: {
+    handleCommand(command) {
+      const [prop, order] = command.split('-')
+      // 向父组件发送排序数据
+      this.$emit('sort-change', prop, order)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.sort {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.sort-name {
+  margin-left: 4px;
+}
+
+.al-file-sort-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.al-file-sort-item.active {
+  color: #409eff;
+  font-weight: bold;
+}
+
+.al-file-sort-item-icon {
+  margin-right: 8px;
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+
+/* 确保图标和文字垂直对齐 */
+.al-file-sort-item-icon >>> svg {
+  width: 14px;
+  height: 14px;
+  vertical-align: middle;
+}
+</style>

src/styles/home-index.scss

@@ -191,7 +191,7 @@
   color: #19ACF9
 }
 
-.search-class{
+>>> .search-class{
   float: right;
   display: flex;
   justify-content: flex-end;

src/utils/file-operations.js

@@ -20,10 +20,17 @@ export const directLinkSubMenus = [
 ]
 
 export const fileArrangements = [
-  { label: '名称', operation: 'orderName', orderProp: 'name'},
+  { label: '名称 - 顺序', operation: 'orderName-ascending', orderProp: 'name', order: 'ascending'},
-  { label: '大小', operation: 'orderSize', orderProp: 'size'},
+  { label: '名称 - 倒序', operation: 'orderName-descending', orderProp: 'name', order: 'descending'},
-  { label: '上传时间', operation: 'orderUploadDate', orderProp: 'uploadDate'},
+  { divider: true, operation: 'divider' },
-  { label: '修改时间', operation: 'orderUpdateDate', orderProp: 'updateDate'},
+  { 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: 'descending'},
+  { divider: true, operation: 'divider' },
+  { label: '修改时间 - 顺序', operation: 'orderUpdateDate-ascending', orderProp: 'updateDate', order: 'ascending'},
+  { label: '修改时间 - 倒序', operation: 'orderUpdateDate-descending', orderProp: 'updateDate', order: 'descending'},
 ]
 
 export const createFiles = [

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

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

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

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

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

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

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

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

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

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

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

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