fix：优化文件管理性能

src/@layouts/styles/_variables.scss

@@ -19,7 +19,7 @@ $layout-horizontal-nav-layout-navbar-z-index: 11 !default;
 $layout-boxed-content-width: 90rem !default;
 
 //  👉Footer
-$layout-vertical-nav-footer-height: 3.5rem !default;
+$layout-vertical-nav-footer-height: 0rem !default;
 
 // 👉 Layout overlay
 $layout-overlay-z-index: 11 !default;

src/components/filebrowser/List.vue

@@ -10,7 +10,6 @@ import type { Context, EndPoints, FileItem } from '@/api/types'
 import store from '@/store'
 import api from '@/api'
 import MediaInfoCard from '@/components/cards/MediaInfoCard.vue'
-import { useDefer } from '@/@core/utils/dom'
 
 // 输入参数
 const inProps = defineProps({
@@ -75,7 +74,7 @@ const nameTestResult = ref<Context>()
 const nameTestDialog = ref(false)
 
 // 延迟加载
-let defer = (_: number) => true
+const defer = (_: number) => true
 
 // 目录过滤
 const dirs = computed(() =>
@@ -115,7 +114,6 @@ async function load() {
   }
   // 加载数据
   items.value = await axiosInstance.value.request(config) ?? []
-  defer = useDefer(items.value.length)
   emit('loading', false)
   loading.value = false
 }
@@ -410,13 +408,11 @@ onMounted(() => {
     </VCardText>
     <VCardText v-else-if="dirs.length || files.length" class="p-0">
       <VList subheader>
-        <VHover
+        <VVirtualScroll class="virtual-scroll-div" :items="[...dirs, ...files]">
-          v-for="(item, index) in [...dirs, ...files]"
+          <template #default="{ item }">
-          :key="index"
+            <VHover>
-        >
               <template #default="hover">
                 <VListItem
-              v-if="defer(index)"
                   v-bind="hover.props"
                   class="px-3 pe-1"
                   @click="changePath(item.path)"
@@ -495,6 +491,8 @@ onMounted(() => {
                 </VListItem>
               </template>
             </VHover>
+          </template>
+        </VVirtualScroll>
       </VList>
     </VCardText>
     <VCardText
@@ -583,4 +581,7 @@ onMounted(() => {
 .v-toolbar{
   background: rgb(var(--v-table-header-background));
 }
+.virtual-scroll-div {
+  height: calc(100vh - 230px);
+}
 </style>

src/views/reorganize/TransferHistoryView.vue

@@ -311,31 +311,6 @@ fixArrayAt()
 </script>
 
 <template>
-  <!-- 底部操作按钮 -->
-  <span>
-    <VFab
-      v-if="selected.length > 0"
-      icon="mdi-trash-can-outline"
-      color="error"
-      location="bottom end"
-      size="x-large"
-      fixed
-      app
-      appear
-      @click="removeHistoryBatch"
-    />
-    <VFab
-      v-if="selected.length > 0"
-      class="mb-2"
-      icon="mdi-redo-variant"
-      location="bottom end"
-      size="x-large"
-      fixed
-      app
-      appear
-      @click="retransferBatch"
-    />
-  </span>
   <VCard class="pb-5">
     <VCardItem>
       <VCardTitle>
@@ -379,6 +354,7 @@ fixArrayAt()
       items-per-page-text="每页条数"
       page-text="{0}-{1} 共 {2} 条"
       loading-text="加载中..."
+      class="data-table-div"
       @update:options="fetchData"
     >
       <template #item.title="{ item }">
@@ -486,10 +462,38 @@ fixArrayAt()
     "
     @close="redoDialog = false"
   />
+  <!-- 底部操作按钮 -->
+  <span>
+    <VFab
+      v-if="selected.length > 0"
+      icon="mdi-trash-can-outline"
+      color="error"
+      location="bottom end"
+      size="x-large"
+      fixed
+      app
+      appear
+      @click="removeHistoryBatch"
+    />
+    <VFab
+      v-if="selected.length > 0"
+      class="mb-2"
+      icon="mdi-redo-variant"
+      location="bottom end"
+      size="x-large"
+      fixed
+      app
+      appear
+      @click="retransferBatch"
+    />
+  </span>
 </template>
 
 <style lang="scss">
 .v-table th {
   white-space: nowrap;
 }
+.data-table-div {
+  height: calc(100vh - 200px);
+}
 </style>