From c5f70eae4cdaeb8730aea514bb6fb182f7577484 Mon Sep 17 00:00:00 2001
From: ssongliu <73214554+ssongliu@users.noreply.github.com>
Date: Wed, 10 Sep 2025 17:04:52 +0800
Subject: [PATCH] feat: Add debounce effect to file selection (#10330)

---
 frontend/src/components/file-list/index.vue | 35 +++++++++++++++------
 frontend/src/utils/util.ts                  | 12 +++++++
 2 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/file-list/index.vue b/frontend/src/components/file-list/index.vue
index 3fe6944be..9f681426f 100644
--- a/frontend/src/components/file-list/index.vue
+++ b/frontend/src/components/file-list/index.vue
@@ -45,8 +45,14 @@
                 {{ $t('commons.button.createNewFile') }}
             </el-button>
         </div>
-        <div>
-            <el-table :data="data" highlight-current-row height="40vh" @row-click="openDir" class="cursor-pointer">
+        <div v-loading="loading">
+            <el-table
+                :data="data"
+                highlight-current-row
+                height="40vh"
+                @row-click="handleRowClick"
+                class="cursor-pointer"
+            >
                 <el-table-column prop="name" show-overflow-tooltip fix>
                     <template #default="{ row }">
                         <svg-icon
@@ -129,7 +135,7 @@ import { onUpdated, reactive, ref } from 'vue';
 import i18n from '@/lang';
 import { MsgSuccess, MsgWarning } from '@/utils/message';
 import { useSearchableForSelect } from '@/views/host/file-management/hooks/searchable';
-import { computeSize } from '@/utils/util';
+import { computeSize, debounce } from '@/utils/util';
 
 const data = ref([]);
 const loading = ref(false);
@@ -200,12 +206,19 @@ const openDir = async (row: File.File, column: any, event: any) => {
         } else {
             req.path = req.path + '/' + name;
         }
-        await search(req);
-        if (form.isAll || form.dir) {
-            selectRow.value.path = req.path;
-        } else {
-            selectRow.value.path = '';
-        }
+        loading.value = true;
+        await search(req)
+            .then(() => {
+                loading.value = false;
+                if (form.isAll || form.dir) {
+                    selectRow.value.path = req.path;
+                } else {
+                    selectRow.value.path = '';
+                }
+            })
+            .catch(() => {
+                loading.value = false;
+            });
         return;
     }
     if (!form.isAll && !form.dir) {
@@ -214,6 +227,10 @@ const openDir = async (row: File.File, column: any, event: any) => {
     }
     selectRow.value.path = '';
 };
+const handleRowClick = (row: File.File, column: any, event: any) => {
+    debouncedOpenDir(row, column, event);
+};
+const debouncedOpenDir = debounce(openDir, 300);
 
 const jump = async (index: number) => {
     oldUrl.value = req.path;
diff --git a/frontend/src/utils/util.ts b/frontend/src/utils/util.ts
index 70cf13dbe..72fa9e065 100644
--- a/frontend/src/utils/util.ts
+++ b/frontend/src/utils/util.ts
@@ -29,6 +29,18 @@ export function randomNum(min: number, max: number): number {
     return num;
 }
 
+export function debounce(func: Function, wait: number) {
+    let timeout: NodeJS.Timeout | null = null;
+    return function executedFunction(...args: any[]) {
+        const later = () => {
+            if (timeout) clearTimeout(timeout);
+            func(...args);
+        };
+        if (timeout) clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+    };
+}
+
 export function getBrowserLang() {
     let browserLang = navigator.language ? navigator.language : navigator.browserLanguage;
     let defaultBrowserLang = '';