feat: 优化目标详情 Drawer 性能 — TDesign 生命周期控制、Tab 感知延迟加载、滚动穿透修复

src/web/hooks/use-target-detail.ts

@@ -1,4 +1,4 @@
-import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 import { useCallback, useState } from "react";
 
 import type { HistoryResponse, TargetStatus } from "../../shared/api";
@@ -11,11 +11,11 @@ const detailQueryKeys = {
 };
 
 export function useTargetDetail() {
-  const queryClient = useQueryClient();
   const [selectedTargetId, setSelectedTargetId] = useState<null | number>(null);
   const [timeFrom, setTimeFrom] = useState("");
   const [timeTo, setTimeTo] = useState("");
   const [historyPage, setHistoryPage] = useState(1);
+  const [activeTab, setActiveTab] = useState<string>("overview");
 
   const { data: dashboardData } = useDashboard(false);
   const selectedTarget =
@@ -26,7 +26,7 @@ export function useTargetDetail() {
   const metrics = useTargetMetrics(selectedTargetId, timeFrom, timeTo, "1h");
 
   const history = useQuery({
-    enabled: selectedTargetId !== null && !!timeFrom && !!timeTo,
+    enabled: selectedTargetId !== null && !!timeFrom && !!timeTo && activeTab === "history",
     queryFn: () => {
       if (selectedTargetId === null) throw new Error("未选择目标");
       return fetchJson<HistoryResponse>(
@@ -46,13 +46,13 @@ export function useTargetDetail() {
     setTimeFrom(from.toISOString());
     setTimeTo(now.toISOString());
     setHistoryPage(1);
+    setActiveTab("overview");
   }, []);
 
   const closeDrawer = useCallback(() => {
     setSelectedTargetId(null);
-    queryClient.removeQueries({ queryKey: ["metrics"] });
-    queryClient.removeQueries({ queryKey: ["history"] });
-  }, [queryClient]);
+    setActiveTab("overview");
+  }, []);
 
   const handleTimeChange = useCallback((from: string, to: string) => {
     setTimeFrom(from);
@@ -64,9 +64,15 @@ export function useTargetDetail() {
     setHistoryPage(page);
   }, []);
 
+  const handleTabChange = useCallback((tab: string) => {
+    setActiveTab(tab);
+  }, []);
+
   return {
+    activeTab,
     closeDrawer,
     handlePageChange,
+    handleTabChange,
     handleTimeChange,
     historyData: history.data ?? { items: [], page: 1, pageSize: 20, total: 0 },
     historyLoading: history.isLoading,