rwadurian/frontend/admin-web/src/hooks/useDashboard.ts

97 lines
2.6 KiB
TypeScript

/**
* 仪表板数据 Hooks
* 使用 React Query 进行数据获取和缓存管理
*/
import { useQuery } from '@tanstack/react-query';
import { dashboardService } from '@/services/dashboardService';
import type { DashboardPeriod } from '@/types';
/** Query Keys */
export const dashboardKeys = {
all: ['dashboard'] as const,
overview: () => [...dashboardKeys.all, 'overview'] as const,
stats: () => [...dashboardKeys.all, 'stats'] as const,
trend: (period: DashboardPeriod) => [...dashboardKeys.all, 'trend', period] as const,
region: () => [...dashboardKeys.all, 'region'] as const,
activities: (limit: number) => [...dashboardKeys.all, 'activities', limit] as const,
};
/**
* 获取仪表板概览数据
*/
export function useDashboardOverview() {
return useQuery({
queryKey: dashboardKeys.overview(),
queryFn: async () => {
const response = await dashboardService.getOverview();
return response.data;
},
staleTime: 30 * 1000, // 30秒后标记为过期
gcTime: 5 * 60 * 1000, // 5分钟后垃圾回收
});
}
/**
* 获取统计卡片数据
*/
export function useDashboardStats() {
return useQuery({
queryKey: dashboardKeys.stats(),
queryFn: async () => {
const response = await dashboardService.getStats();
return response.data.stats;
},
staleTime: 30 * 1000,
gcTime: 5 * 60 * 1000,
});
}
/**
* 获取趋势图表数据
* @param period 时间周期
*/
export function useDashboardTrend(period: DashboardPeriod = '7d') {
return useQuery({
queryKey: dashboardKeys.trend(period),
queryFn: async () => {
const response = await dashboardService.getTrendData(period);
return response.data.trend;
},
staleTime: 60 * 1000, // 1分钟后标记为过期
gcTime: 5 * 60 * 1000,
});
}
/**
* 获取区域分布数据
*/
export function useDashboardRegion() {
return useQuery({
queryKey: dashboardKeys.region(),
queryFn: async () => {
const response = await dashboardService.getRegionDistribution();
return response.data.regions;
},
staleTime: 5 * 60 * 1000, // 5分钟后标记为过期
gcTime: 10 * 60 * 1000,
});
}
/**
* 获取最近活动数据
* @param limit 返回数量限制
*/
export function useDashboardActivities(limit = 5) {
return useQuery({
queryKey: dashboardKeys.activities(limit),
queryFn: async () => {
const response = await dashboardService.getRecentActivities(limit);
return response.data.activities;
},
staleTime: 30 * 1000, // 30秒后标记为过期
gcTime: 5 * 60 * 1000,
refetchInterval: 60 * 1000, // 每分钟自动刷新
});
}