From 7dfeb859e26fc0c396103a0a5bde1a725fd1a25a Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Tue, 24 Feb 2026 16:30:49 +0800
Subject: [PATCH] refactor: query dashboard data

---
 src/hooks/use-query-data-list.ts              |  9 ++---
 src/pages/dashboard/index.tsx                 | 40 ++++---------------
 .../dashboard/services/use-query-dashboard.ts | 25 ++++++++++++
 3 files changed, 37 insertions(+), 37 deletions(-)
 create mode 100644 src/pages/dashboard/services/use-query-dashboard.ts

diff --git a/src/hooks/use-query-data-list.ts b/src/hooks/use-query-data-list.ts
index 8d2a64c3..f43b2db6 100644
--- a/src/hooks/use-query-data-list.ts
+++ b/src/hooks/use-query-data-list.ts
@@ -92,7 +92,7 @@ export function useQueryData<Detail, Params = any>(option: {
   key: string;
   delay?: number;
   fetchDetail: (params: Params, options?: any) => Promise<Detail>;
-  getData?: (response: Detail) => any;
+  getData?: (response: Detail, params?: any) => any;
   errorMsg?: string;
 }): {
   loading: boolean;
@@ -123,7 +123,7 @@ export function useQueryData<Detail, Params = any>(option: {
         });
       }
 
-      setDetailData(getData ? getData(res) : res);
+      setDetailData(getData ? getData(res, params) : res);
 
       return res;
     },
@@ -132,7 +132,7 @@ export function useQueryData<Detail, Params = any>(option: {
       onSuccess: () => {},
       onError: (error) => {
         message.error(
-          error?.message || errorMsg || `Failed to fetch ${key} list`
+          error?.message || errorMsg || `Failed to fetch ${key} data`
         );
         setDetailData({} as Detail);
       }
@@ -146,8 +146,7 @@ export function useQueryData<Detail, Params = any>(option: {
 
   useEffect(() => {
     return () => {
-      cancel();
-      axiosTokenRef.current?.cancel();
+      cancelRequest();
     };
   }, []);
 
diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
index 62f640e1..5695a7ae 100644
--- a/src/pages/dashboard/index.tsx
+++ b/src/pages/dashboard/index.tsx
@@ -1,46 +1,22 @@
-import { useMemoizedFn } from 'ahooks';
 import { Spin } from 'antd';
-import { omit } from 'lodash';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import PageBox from '../_components/page-box';
-import { queryDashboardData } from './apis';
 import DashboardInner from './components/dahboard-inner';
 import DashboardContext from './config/dashboard-context';
-import { DashboardProps } from './config/types';
+import useQueryDashboard from './services/use-query-dashboard';
 
 const Dashboard: React.FC = () => {
-  const [data, setData] = useState<DashboardProps>({} as DashboardProps);
-  const [loading, setLoading] = useState(false);
-
-  const fetchDashboardData = useMemoizedFn(
-    async (params?: { cluster_id?: number }) => {
-      try {
-        setLoading(true);
-        const res = await queryDashboardData(params);
-        setData((prev) => {
-          return params?.cluster_id
-            ? {
-                ...omit(prev, ['system_load']),
-                system_load: res.system_load
-              }
-            : res;
-        });
-      } catch (error) {
-        setData({} as DashboardProps);
-      } finally {
-        setLoading(false);
-      }
-    }
-  );
+  const { fetchData, loading, data, cancelRequest } = useQueryDashboard();
 
   useEffect(() => {
-    fetchDashboardData();
+    fetchData({});
+    return () => {
+      cancelRequest();
+    };
   }, []);
 
   return (
-    <DashboardContext.Provider
-      value={{ ...data, fetchData: fetchDashboardData }}
-    >
+    <DashboardContext.Provider value={{ ...data, fetchData: fetchData }}>
       <PageBox>
         <Spin spinning={loading} style={{ minHeight: 300 }}>
           <DashboardInner />
diff --git a/src/pages/dashboard/services/use-query-dashboard.ts b/src/pages/dashboard/services/use-query-dashboard.ts
new file mode 100644
index 00000000..95001f58
--- /dev/null
+++ b/src/pages/dashboard/services/use-query-dashboard.ts
@@ -0,0 +1,25 @@
+import { useQueryData } from '@/hooks/use-query-data-list';
+import { omit } from 'lodash';
+import { queryDashboardData } from '../apis';
+
+export default function useQueryDashboard() {
+  const { detailData, loading, fetchData, cancelRequest } = useQueryData({
+    key: 'dashboard',
+    fetchDetail: queryDashboardData,
+    getData(response, params) {
+      return params?.cluster_id
+        ? {
+            ...omit(detailData, ['system_load']),
+            system_load: response.system_load
+          }
+        : response;
+    }
+  });
+
+  return {
+    loading,
+    data: detailData,
+    cancelRequest,
+    fetchData
+  };
+}