feature-admin-search-add-debounce (#1336)

* Draft MR

* feature admin search add debounce

---------

Co-authored-by: jiuling <[email protected]>

Author: ice201508

frontend/src/components/admin_next/models/AdminModelList.vue

@@ -12,7 +12,7 @@
         :placeholder="$t('admin.search') + ' ' + $t('admin.name') + ' / ' + $t('admin.owner')"
         size="large"
         :prefix-icon="Search"
-        @input="searchModels"
+        @input="debouncedSearch"
       />
     </div>
     <Table
@@ -100,7 +100,8 @@
 
 <script setup>
   import { Container, Pagination, Table } from '../admin_component'
-  import { ref, onMounted, inject } from 'vue'
+  import { ref, onMounted, onUnmounted, inject } from 'vue'
+  import { debounce } from 'lodash'
   import { Search } from '@element-plus/icons-vue'
   import { ElMessage } from 'element-plus'
   import useFetchApi from '../../../packs/useFetchApi'
@@ -131,6 +132,12 @@
     fetchModels()
   }
 
+  const debouncedSearch = debounce(searchModels, 500)
+
+  onUnmounted(() => {
+    debouncedSearch.cancel()
+  })
+
   const showDetail = (path) => {
     window.location.href = `/admin_panel/models/${path}`
   }

frontend/src/components/admin_next/users/AdminUserList.vue

@@ -3,7 +3,7 @@
     <!-- search & filter -->
     <div class="flex items-center gap-3 w-full">
       <el-input v-model="keyword" :placeholder="$t('admin.name') + ',' + $t('admin.email') + ',' + $t('admin.phone')" size="large" :prefix-icon="Search"
-        @input="searchUsers" />
+        @input="debouncedSearch" />
     </div>
     <Table
       :data="users"
@@ -51,7 +51,8 @@
 
 <script setup>
 import { Container, Pagination, Table } from '../admin_component'
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
+import { debounce } from 'lodash'
 import { Search } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
 import useFetchApi from '../../../packs/useFetchApi'
@@ -77,6 +78,12 @@ const searchUsers = () => {
   fetchUsers()
 }
 
+const debouncedSearch = debounce(searchUsers, 500)
+
+onUnmounted(() => {
+  debouncedSearch.cancel()
+})
+
 const showDetail = (row) => {
   window.location.href = `/admin_panel/users/${row.username}`
 }