feat: 优化路由 搭建赛事管理页面基础 处理部分样式问题 完成赛事列表页面搭建

src/hooks/useThrottleFn.ts

@@ -0,0 +1,46 @@
+import { ref } from 'vue';
+
+/**
+ * 节流函数封装
+ * @param fn 需要节流的函数
+ * @param delay 节流间隔时间(ms)，默认 500
+ * @returns 返回节流后的函数，连续调用时只会在每个 delay 周期内执行一次
+ */
+export function useThrottleFn<T extends (...args: any[]) => any>(
+  fn: T,
+  delay: number = 500,
+): T & { cancel: () => void } {
+  const lastTime = ref<number>(0);
+  let timer: any = null;
+
+  const throttled = function (this: any, ...args: any[]) {
+    const now = Date.now();
+    const remaining = delay - (now - lastTime.value);
+
+    if (remaining <= 0) {
+      // 冷却时间已过，立即执行
+      if (timer) {
+        clearTimeout(timer);
+        timer = null;
+      }
+      lastTime.value = now;
+      fn.apply(this, args);
+    } else if (!timer) {
+      // 冷却时间未过，延后执行
+      timer = setTimeout(() => {
+        lastTime.value = Date.now();
+        timer = null;
+        fn.apply(this, args);
+      }, remaining);
+    }
+  } as T & { cancel: () => void };
+
+  throttled.cancel = () => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+  };
+
+  return throttled;
+}