chore: detail api

src/pages/cluster-management/apis/index.ts

@@ -106,10 +106,14 @@ export async function deleteCredential(id: number) {
 
 // ===================== Cluster =====================
 
-export async function queryClusterList(params: Global.SearchParams) {
+export async function queryClusterList(
+  params: Global.SearchParams,
+  options?: any
+) {
   return request<Global.PageResponse<ClusterListItem>>(`${CLUSTERS_API}`, {
     method: 'GET',
-    params
+    params,
+    cancelToken: options?.token
   });
 }
 

src/pages/cluster-management/services/use-query-cluster-list.tsx

@@ -0,0 +1,67 @@
+import { createAxiosToken } from '@/hooks/use-chunk-request';
+import { useRequest } from 'ahooks';
+import { message } from 'antd';
+import { CancelTokenSource } from 'axios';
+import { useEffect, useRef, useState } from 'react';
+import { queryClusterList } from '../apis';
+import { ClusterListItem } from '../config/types';
+
+/**
+ *
+ * @returns loading, fetch, dataList
+ */
+export const useQueryClusterList = () => {
+  const axiosTokenRef = useRef<CancelTokenSource | null>(null);
+  const [dataList, setDataList] = useState<
+    Array<Partial<ClusterListItem> & { label: string; value: number }>
+  >([]);
+
+  const {
+    runAsync: fetchData,
+    loading,
+    cancel
+  } = useRequest(
+    async (params: { page: number; perPage?: number }) => {
+      axiosTokenRef.current?.cancel();
+      axiosTokenRef.current = createAxiosToken();
+      const res = await queryClusterList(params, {
+        token: axiosTokenRef.current.token
+      });
+      setDataList(
+        res.items?.map((item: ClusterListItem) => ({
+          ...item,
+          label: item.name,
+          value: item.id
+        })) || []
+      );
+      return res.items || [];
+    },
+    {
+      manual: true,
+      onSuccess: (response) => {},
+      onError: (error) => {
+        message.error(error?.message || 'Failed to fetch cluster list');
+        setDataList([]);
+      }
+    }
+  );
+
+  const cancelRequest = () => {
+    cancel();
+    axiosTokenRef.current?.cancel();
+  };
+
+  useEffect(() => {
+    return () => {
+      cancel();
+      axiosTokenRef.current?.cancel();
+    };
+  }, []);
+
+  return {
+    loading,
+    clusterList: dataList,
+    cancelRequest,
+    fetchClusterList: fetchData
+  };
+};