1Panel-dev/1Panel
1
1
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-10-14 17:37:55 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: Add debounce effect to file selection (#10330)

Browse source
This commit is contained in:
ssongliu 2025-09-10 17:04:52 +08:00 • committed by GitHub
parent 8bdf02c4c0
commit c5f70eae4c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 38 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
frontend/src/components/file-list/index.vue
View file

@ -45,8 +45,14 @@
{{ $t('commons.button.createNewFile') }} {{ $t('commons.button.createNewFile') }}
</el-button> </el-button>
</div> </div>
<div> <div v-loading="loading">
<el-table :data="data" highlight-current-row height="40vh" @row-click="openDir" class="cursor-pointer"> <el-table
:data="data"
highlight-current-row
height="40vh"
@row-click="handleRowClick"
class="cursor-pointer"
>
<el-table-column prop="name" show-overflow-tooltip fix> <el-table-column prop="name" show-overflow-tooltip fix>
<template #default="{ row }"> <template #default="{ row }">
<svg-icon <svg-icon
@ -129,7 +135,7 @@ import { onUpdated, reactive, ref } from 'vue';
import i18n from '@/lang'; import i18n from '@/lang';
import { MsgSuccess, MsgWarning } from '@/utils/message'; import { MsgSuccess, MsgWarning } from '@/utils/message';
import { useSearchableForSelect } from '@/views/host/file-management/hooks/searchable'; import { useSearchableForSelect } from '@/views/host/file-management/hooks/searchable';
import { computeSize } from '@/utils/util'; import { computeSize, debounce } from '@/utils/util';
const data = ref([]); const data = ref([]);
const loading = ref(false); const loading = ref(false);
@ -200,12 +206,19 @@ const openDir = async (row: File.File, column: any, event: any) => {
} else { } else {
req.path = req.path + '/' + name; req.path = req.path + '/' + name;
} }
await search(req); loading.value = true;
if (form.isAll || form.dir) { await search(req)
selectRow.value.path = req.path; .then(() => {
} else { loading.value = false;
selectRow.value.path = ''; if (form.isAll || form.dir) {
} selectRow.value.path = req.path;
} else {
selectRow.value.path = '';
}
})
.catch(() => {
loading.value = false;
});
return; return;
} }
if (!form.isAll && !form.dir) { if (!form.isAll && !form.dir) {
@ -214,6 +227,10 @@ const openDir = async (row: File.File, column: any, event: any) => {
} }
selectRow.value.path = ''; 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) => { const jump = async (index: number) => {
oldUrl.value = req.path; oldUrl.value = req.path;

12
frontend/src/utils/util.ts
View file

@ -29,6 +29,18 @@ export function randomNum(min: number, max: number): number {
return num; 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() { export function getBrowserLang() {
let browserLang = navigator.language ? navigator.language : navigator.browserLanguage; let browserLang = navigator.language ? navigator.language : navigator.browserLanguage;
let defaultBrowserLang = ''; let defaultBrowserLang = '';