feat: 优化web

web/lib/hooks/use-api.ts

@@ -0,0 +1,60 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+type UseApiState<T> = {
+  data: T | null;
+  loading: boolean;
+  error: string | null;
+};
+
+/**
+ * 通用数据获取 hook，封装 loading / error / data 状态 + AbortController 取消。
+ *
+ * @param fetcher 返回 Promise 的数据获取函数，接收 AbortSignal
+ * @param deps 依赖数组，变化时重新请求
+ */
+export function useApi<T>(
+  fetcher: (signal?: AbortSignal) => Promise<T>,
+  deps: unknown[] = [],
+): UseApiState<T> & { refetch: () => void } {
+  const [state, setState] = useState<UseApiState<T>>({
+    data: null,
+    loading: true,
+    error: null,
+  });
+
+  const abortRef = useRef<AbortController | null>(null);
+  const fetcherRef = useRef(fetcher);
+  fetcherRef.current = fetcher;
+
+  const load = useCallback(() => {
+    abortRef.current?.abort();
+    const ac = new AbortController();
+    abortRef.current = ac;
+
+    setState((s) => ({ ...s, loading: true, error: null }));
+
+    fetcherRef
+      .current(ac.signal)
+      .then((data) => {
+        if (!ac.signal.aborted) {
+          setState({ data, loading: false, error: null });
+        }
+      })
+      .catch((e: unknown) => {
+        if (!ac.signal.aborted) {
+          setState({ data: null, loading: false, error: e instanceof Error ? e.message : String(e) });
+        }
+      });
+  }, deps);
+
+  useEffect(() => {
+    load();
+    return () => {
+      abortRef.current?.abort();
+    };
+  }, [load]);
+
+  return { ...state, refetch: load };
+}