feat(邀请BDLeader、BD、代理): 搜索对接防抖功能，并为防抖功能新增第一次立即执行功能

src/utils/useDebounce.js

@@ -1,43 +1,57 @@
-import { getCurrentInstance, onUnmounted } from 'vue';
+import { getCurrentInstance, onUnmounted } from 'vue'
 
 // 防抖
-export function useDebounce(fn, delay = 500) {
+export function useDebounce(fn, delay = 500, immediate = false) {
-  let timer = null;
+  let timer = null
-  let instance = getCurrentInstance(); // 获取当前组件实例
+  let instance = getCurrentInstance() // 获取当前组件实例
 
   const debounced = (...args) => {
-    if (timer) clearTimeout(timer);
+    if (timer) clearTimeout(timer)
+
+    if (immediate && !timer) {
+      // 立即执行
+      fn.apply(this, args)
+    }
+
     timer = setTimeout(() => {
-      fn(...args);
+      if (!immediate) fn.apply(this, args)
-    }, delay);
+      timer = null // 清理timer引用
-  };
+    }, delay)
+  }
+
+  // 取消防抖执行
+  debounced.cancel = () => {
+    clearTimeout(timer)
+    timer = null
+  }
+
+  // 立即执行
+  debounced.flush = (...args) => {
+    clearTimeout(timer)
+    timer = null
+    fn.apply(this, args)
+  }
+
   if (instance) {
     // 自动注册卸载钩子（仅组件内生效）
     onUnmounted(() => {
-      clearTimeout(timer); // 清理定时器
+      debounced.cancel()
-      timer = null;
+    })
-    });
-  } else {
-    // 非组件环境返回手动清理方法
-    debounced.cancel = () => {
-      clearTimeout(timer);
-      timer = null;
-    };
   }
 
-  return debounced;
+  return debounced
 }
 
 // 节流
 export function useThrottle(fn, delay = 1000) {
-  let lastCall = 0;
+  let lastCall = 0
 
   const throttled = (...args) => {
-    const now = Date.now();
+    const now = Date.now()
-    if (now - lastCall < delay) return;
+    if (now - lastCall < delay) return
-    lastCall = now;
+    lastCall = now
-    fn(...args);
+    fn(...args)
-  };
+  }
 
-  return throttled;
+  return throttled
 }

src/views/Invitation/inviteAgency.vue

@@ -218,9 +218,12 @@
 </template>
 
 <script setup>
+import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import GeneralHeader from '@/components/GeneralHeader.vue'
+import { setDocumentDirection } from '@/locales/i18n'
 import { showError, showSuccess } from '@/utils/toast.js'
+import { useDebounce } from '@/utils/useDebounce'
+
 import { searchUser } from '@/api/userInfo'
 import {
   invitedList,
@@ -229,8 +232,8 @@ import {
   handleInvite,
   cancelInvite,
 } from '@/api/bdCenter.js'
-import { computed, onMounted, ref } from 'vue'
+
-import { setDocumentDirection } from '@/locales/i18n'
+import GeneralHeader from '@/components/GeneralHeader.vue'
 
 const { t, locale } = useI18n()
 
@@ -278,19 +281,28 @@ const handleInputChange = () => {
   }
 }
 
-// 回车搜索
+// 创建防抖版本的搜索函数
-const handleEnterPress = async () => {
+const debouncedSearch = useDebounce(
-  console.log('搜索用户id：', searchQuery.value)
+  async () => {
-  searchResults.value = []
+    console.log('搜索用户id：', searchQuery.value)
-  selectedUser.value = {}
+    searchResults.value = []
-  disInvite.value = true
+    selectedUser.value = {}
-  if (searchQuery.value.trim()) {
+    disInvite.value = true
-    const resSearchUser = await searchUser(searchQuery.value)
+    if (searchQuery.value.trim()) {
-    if (resSearchUser.status && resSearchUser.body) {
+      const resSearchUser = await searchUser(searchQuery.value)
-      let targetUserInfo = { userProfile: resSearchUser.body }
+      if (resSearchUser.status && resSearchUser.body) {
-      searchResults.value.push(targetUserInfo)
+        let targetUserInfo = { userProfile: resSearchUser.body }
+        searchResults.value.push(targetUserInfo)
+      }
     }
-  }
+  },
+  500,
+  true
+)
+
+// 回车防抖搜索
+const handleEnterPress = async () => {
+  debouncedSearch()
 }
 
 // 选择用户

src/views/Invitation/inviteBD.vue

@@ -217,17 +217,20 @@
 </template>
 
 <script setup>
+import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import GeneralHeader from '@/components/GeneralHeader.vue'
+import { setDocumentDirection } from '@/locales/i18n'
 import { showError, showSuccess } from '@/utils/toast.js'
+import { useDebounce } from '@/utils/useDebounce'
+
 import { searchUser } from '@/api/userInfo'
 import {
   invitedList, // 获取已邀请列表
   inviteToBeBD, // 邀请代理
   cancelInvite, // 处理邀请(取消邀请)
 } from '@/api/bdLeaderCenter.js'
-import { computed, onMounted, ref } from 'vue'
+
-import { setDocumentDirection } from '@/locales/i18n'
+import GeneralHeader from '@/components/GeneralHeader.vue'
 
 const { t, locale } = useI18n()
 
@@ -275,19 +278,28 @@ const handleInputChange = () => {
   }
 }
 
-// 回车搜索
+// 创建防抖版本的搜索函数
-const handleEnterPress = async () => {
+const debouncedSearch = useDebounce(
-  console.log('搜索用户id：', searchQuery.value)
+  async () => {
-  searchResults.value = []
+    console.log('搜索用户id：', searchQuery.value)
-  selectedUser.value = {}
+    searchResults.value = []
-  disInvite.value = true
+    selectedUser.value = {}
-  if (searchQuery.value.trim()) {
+    disInvite.value = true
-    const resSearchUser = await searchUser(searchQuery.value)
+    if (searchQuery.value.trim()) {
-    if (resSearchUser.status && resSearchUser.body) {
+      const resSearchUser = await searchUser(searchQuery.value)
-      let targetUserInfo = { userProfile: resSearchUser.body }
+      if (resSearchUser.status && resSearchUser.body) {
-      searchResults.value.push(targetUserInfo)
+        let targetUserInfo = { userProfile: resSearchUser.body }
+        searchResults.value.push(targetUserInfo)
+      }
     }
-  }
+  },
+  500,
+  true
+)
+
+// 回车防抖搜索
+const handleEnterPress = async () => {
+  debouncedSearch()
 }
 
 // 选择用户

src/views/Invitation/inviteBDLeader.vue

@@ -221,6 +221,7 @@ import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { setDocumentDirection } from '@/locales/i18n'
 import { showError, showSuccess } from '@/utils/toast.js'
+import { useDebounce } from '@/utils/useDebounce'
 
 import { searchUser } from '@/api/userInfo'
 import {
@@ -277,19 +278,28 @@ const handleInputChange = () => {
   }
 }
 
-// 回车搜索
+// 创建防抖版本的搜索函数
-const handleEnterPress = async () => {
+const debouncedSearch = useDebounce(
-  console.log('搜索用户id：', searchQuery.value)
+  async () => {
-  searchResults.value = []
+    console.log('搜索用户id：', searchQuery.value)
-  selectedUser.value = {}
+    searchResults.value = []
-  disInvite.value = true
+    selectedUser.value = {}
-  if (searchQuery.value.trim()) {
+    disInvite.value = true
-    const resSearchUser = await searchUser(searchQuery.value)
+    if (searchQuery.value.trim()) {
-    if (resSearchUser.status && resSearchUser.body) {
+      const resSearchUser = await searchUser(searchQuery.value)
-      let targetUserInfo = { userProfile: resSearchUser.body }
+      if (resSearchUser.status && resSearchUser.body) {
-      searchResults.value.push(targetUserInfo)
+        let targetUserInfo = { userProfile: resSearchUser.body }
+        searchResults.value.push(targetUserInfo)
+      }
     }
-  }
+  },
+  500,
+  true
+)
+
+// 回车防抖搜索
+const handleEnterPress = async () => {
+  debouncedSearch()
 }
 
 // 选择用户