Browse Source

♻️ refactor(dashboard): 重构大数据看板数据请求逻辑

- 替换数据请求库,从ahooks的useRequest迁移到@tanstack/react-query的useQuery
- 更新API客户端命名,统一为单数形式:usersClient→userClient, silverJobsClient→silverJobClient等
- 添加请求错误处理,当返回结果包含code字段时返回默认值0
- 优化请求配置,增加queryKey标识和5分钟数据缓存时间
- 统一修改图标组件,将TrendingUpOutlined替换为RiseOutlined以保持视觉一致性
yourname 7 months ago
parent
commit
6f53eb7071
1 changed files with 83 additions and 58 deletions
  1. 83 58
      src/client/admin/pages/BigScreenDashboard.tsx

+ 83 - 58
src/client/admin/pages/BigScreenDashboard.tsx

@@ -5,7 +5,7 @@ import {
   TeamOutlined,
   BookOutlined,
   FileTextOutlined,
-  TrendingUpOutlined,
+  RiseOutlined,
   ClockCircleOutlined,
   BarChartOutlined,
   PieChartOutlined,
@@ -21,15 +21,15 @@ import {
   RocketOutlined
 } from '@ant-design/icons';
 import { Line, Pie, Column } from '@ant-design/plots';
-import { useRequest } from 'ahooks';
+import { useQuery } from '@tanstack/react-query';
 import dayjs from 'dayjs';
-import { 
-  usersClient, 
-  silverTalentsClient, 
-  silverJobsClient, 
-  silverKnowledgesClient,
-  filesClient,
-  homeIconsClient,
+import {
+  userClient,
+  silverTalentsClient,
+  silverJobClient,
+  silverKnowledgeClient,
+  fileClient,
+  homeIconClient,
   companyCertificationClient
 } from '@/client/api';
 
@@ -49,63 +49,88 @@ const BigScreenDashboard: React.FC = () => {
   }, []);
 
   // 获取用户统计数据
-  const { data: userStats } = useRequest(async () => {
-    const response = await usersClient.$get({
-      query: { page: 1, pageSize: 1 }
-    });
-    const result = await response.json();
-    return { total: result.pagination?.total || 0 };
-  }, {
-    refreshDeps: [],
-    pollingInterval: 30000,
+  const { data: userStats } = useQuery({
+    queryKey: ['dashboard-users'],
+    queryFn: async () => {
+      const response = await userClient.$get({
+        query: { page: 1, pageSize: 1 }
+      });
+      const result = await response.json();
+      if ('code' in result) {
+        return { total: 0 };
+      }
+      return { total: result.pagination?.total || 0 };
+    },
+    refetchInterval: 30000,
+    staleTime: 1000 * 60 * 5, // 5分钟
   });
 
   // 获取银龄人才数据
-  const { data: talentStats } = useRequest(async () => {
-    const response = await silverTalentsClient.$get({
-      query: { page: 1, pageSize: 1 }
-    });
-    const result = await response.json();
-    return { total: result.pagination?.total || 0 };
-  }, {
-    refreshDeps: [],
-    pollingInterval: 30000,
+  const { data: talentStats } = useQuery({
+    queryKey: ['dashboard-talents'],
+    queryFn: async () => {
+      const response = await silverTalentsClient.$get({
+        query: { page: 1, pageSize: 1 }
+      });
+      const result = await response.json();
+      if ('code' in result) {
+        return { total: 0 };
+      }
+      return { total: result.pagination?.total || 0 };
+    },
+    refetchInterval: 30000,
+    staleTime: 1000 * 60 * 5,
   });
 
   // 获取岗位数据
-  const { data: jobStats } = useRequest(async () => {
-    const response = await silverJobsClient.$get({
-      query: { page: 1, pageSize: 1 }
-    });
-    const result = await response.json();
-    return { total: result.pagination?.total || 0 };
-  }, {
-    refreshDeps: [],
-    pollingInterval: 30000,
+  const { data: jobStats } = useQuery({
+    queryKey: ['dashboard-jobs'],
+    queryFn: async () => {
+      const response = await silverJobClient.$get({
+        query: { page: 1, pageSize: 1 }
+      });
+      const result = await response.json();
+      if ('code' in result) {
+        return { total: 0 };
+      }
+      return { total: result.pagination?.total || 0 };
+    },
+    refetchInterval: 30000,
+    staleTime: 1000 * 60 * 5,
   });
 
   // 获取知识库数据
-  const { data: knowledgeStats } = useRequest(async () => {
-    const response = await silverKnowledgesClient.$get({
-      query: { page: 1, pageSize: 1 }
-    });
-    const result = await response.json();
-    return { total: result.pagination?.total || 0 };
-  }, {
-    refreshDeps: [],
-    pollingInterval: 30000,
+  const { data: knowledgeStats } = useQuery({
+    queryKey: ['dashboard-knowledges'],
+    queryFn: async () => {
+      const response = await silverKnowledgeClient.$get({
+        query: { page: 1, pageSize: 1 }
+      });
+      const result = await response.json();
+      if ('code' in result) {
+        return { total: 0 };
+      }
+      return { total: result.pagination?.total || 0 };
+    },
+    refetchInterval: 30000,
+    staleTime: 1000 * 60 * 5,
   });
 
   // 获取文件数据
-  const { data: fileStats } = useRequest(async () => {
-    const response = await filesClient.$get({
-      query: { page: 1, pageSize: 1 }
-    });
-    const result = await response.json();
-    return { total: result.pagination?.total || 0 };
-  }, {
-    refreshDeps: [],
-    pollingInterval: 30000,
+  const { data: fileStats } = useQuery({
+    queryKey: ['dashboard-files'],
+    queryFn: async () => {
+      const response = await fileClient.$get({
+        query: { page: 1, pageSize: 1 }
+      });
+      const result = await response.json();
+      if ('code' in result) {
+        return { total: 0 };
+      }
+      return { total: result.pagination?.total || 0 };
+    },
+    refetchInterval: 30000,
+    staleTime: 1000 * 60 * 5,
   });
 
   // 模拟实时活动数据
@@ -225,7 +250,7 @@ const BigScreenDashboard: React.FC = () => {
               suffix={<Tag color="blue" className="ml-2">人</Tag>}
             />
             <div className="mt-2 text-white opacity-80">
-              <TrendingUpOutlined /> 今日新增: +12人
+              <RiseOutlined /> 今日新增: +12人
             </div>
           </Card>
         </Col>
@@ -239,7 +264,7 @@ const BigScreenDashboard: React.FC = () => {
               suffix={<Tag color="green" className="ml-2">人</Tag>}
             />
             <div className="mt-2 text-white opacity-80">
-              <TrendingUpOutlined /> 活跃占比: 78%
+              <RiseOutlined /> 活跃占比: 78%
             </div>
           </Card>
         </Col>
@@ -253,7 +278,7 @@ const BigScreenDashboard: React.FC = () => {
               suffix={<Tag color="orange" className="ml-2">个</Tag>}
             />
             <div className="mt-2 text-white opacity-80">
-              <TrendingUpOutlined /> 匹配成功率: 85%
+              <RiseOutlined /> 匹配成功率: 85%
             </div>
           </Card>
         </Col>
@@ -267,7 +292,7 @@ const BigScreenDashboard: React.FC = () => {
               suffix={<Tag color="purple" className="ml-2">篇</Tag>}
             />
             <div className="mt-2 text-white opacity-80">
-              <TrendingUpOutlined /> 本月新增: 156篇
+              <RiseOutlined /> 本月新增: 156篇
             </div>
           </Card>
         </Col>