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

src/web/components/TargetDetailDrawer.tsx

@@ -11,12 +11,14 @@ import { OverviewTab } from "./OverviewTab";
 import { StatusDot } from "./StatusDot";
 
 interface TargetDetailDrawerProps {
+  activeTab: string;
   historyData: HistoryResponse;
   historyLoading: boolean;
   metricsData: null | TargetMetricsResponse;
   metricsLoading: boolean;
   onClose: () => void;
   onPageChange: (page: number) => void;
+  onTabChange: (tab: string) => void;
   onTimeChange: (from: string, to: string) => void;
   target: null | TargetStatus;
   timeFrom: string;
@@ -31,19 +33,20 @@ const TIME_SHORTCUTS = [
 ] as const;
 
 export function TargetDetailDrawer({
+  activeTab,
   historyData,
   historyLoading,
   metricsData,
   metricsLoading,
   onClose,
   onPageChange,
+  onTabChange,
   onTimeChange,
   target,
   timeFrom,
   timeTo,
 }: TargetDetailDrawerProps) {
   const [activeShortcut, setActiveShortcut] = useState<string>("24h");
-  const [activeTab, setActiveTab] = useState<TabValue>("overview");
 
   const handleShortcut = useCallback(
     (value: string) => {
@@ -67,25 +70,29 @@ export function TargetDetailDrawer({
     [onTimeChange],
   );
 
-  if (!target) return null;
-
-  const isUp = target.latestCheck?.matched;
+  const isUp = target?.latestCheck?.matched;
 
   return (
     <Drawer
+      attach="body"
       footer={false}
       header={
-        <Space align="center" size={8}>
-          <StatusDot up={!!isUp} />
-          <Typography.Text strong>{target.name}</Typography.Text>
-          <Tag size="small" theme="primary" variant="light-outline">
-            {target.type}
-          </Tag>
-        </Space>
+        target ? (
+          <Space align="center" size={8}>
+            <StatusDot up={!!isUp} />
+            <Typography.Text strong>{target.name}</Typography.Text>
+            <Tag size="small" theme="primary" variant="light-outline">
+              {target.type}
+            </Tag>
+          </Space>
+        ) : undefined
       }
       onClose={onClose}
       placement="right"
-      size="52%"
+      preventScrollThrough
+      showInAttachedElement={false}
+      showOverlay
+      size="55%"
       visible={!!target}
     >
       <Space className="full-width" direction="vertical" size={16}>
@@ -109,12 +116,12 @@ export function TargetDetailDrawer({
             valueType="YYYY-MM-DD HH:mm"
           />
         </div>
-        <Tabs onChange={(val: TabValue) => setActiveTab(val)} value={activeTab}>
-          <Tabs.TabPanel className="tab-panel-padded" label="概览" value="overview">
-            <OverviewTab metricsData={metricsData} metricsLoading={metricsLoading} target={target} />
+        <Tabs onChange={(val: TabValue) => onTabChange(String(val))} value={activeTab}>
+          <Tabs.TabPanel className="tab-panel-padded" destroyOnHide={false} label="概览" value="overview">
+            {target && <OverviewTab metricsData={metricsData} metricsLoading={metricsLoading} target={target} />}
           </Tabs.TabPanel>
 
-          <Tabs.TabPanel className="tab-panel-padded" label="记录" value="history">
+          <Tabs.TabPanel className="tab-panel-padded" destroyOnHide={false} label="记录" lazy value="history">
             <HistoryTab historyData={historyData} historyLoading={historyLoading} onPageChange={onPageChange} />
           </Tabs.TabPanel>
         </Tabs>