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

DEVELOPMENT.md

@@ -561,10 +561,11 @@ main.tsx
             │       ├── useMeta() ───── GET /api/meta（应用生命周期内缓存）
             │       └── TargetGroup[]（Card 包裹 PrimaryTable，headerBordered）
             │           └── PrimaryTable ← createTargetTableColumns(checkerTypes)
-            │   └── TargetDetailDrawer（目标详情抽屉，width=52%）
-            │       └── useTargetDetail() ── 按需发起 metrics + history 查询
-            │           ├── OverviewTab → Descriptions（直接展示）+ 4×2 统计卡片 + TrendChart
-            │           └── HistoryTab  → PrimaryTable（分页历史记录）
+             │   └── TargetDetailDrawer（目标详情抽屉，width=52%，TDesign 生命周期控制）
+             │       └── useTargetDetail() ── 按需发起 metrics 查询，history 延迟到记录 Tab 激活后请求
+             │           ├── activeTab 受控 Tabs 状态，每次打开重置为 overview
+             │           ├── OverviewTab → Descriptions（直接展示）+ 4×2 统计卡片 + TrendChart
+             │           └── HistoryTab  → PrimaryTable（分页历史记录，TabPanel 懒渲染 + destroyOnHide=false）
             └── ReactQueryDevtools（开发工具，仅开发环境）
 ```
 
@@ -579,8 +580,9 @@ hooks/use-queries.ts（全局面板级查询）
 
 hooks/use-target-detail.ts（Drawer 状态与详情级条件查询）
 ├── 内部复用 useDashboard(false) 的缓存来查找 selectedTarget
+├── activeTab 受控 Tabs 状态（每次 openDrawer 重置为 overview）
 ├── useTargetMetrics(/api/targets/:id/metrics)（条件查询：enabled 仅当 Drawer 打开且时间范围有效）
-└── useQuery(/api/targets/:id/history)（条件查询：含分页）
+└── useQuery(/api/targets/:id/history)（条件查询：enabled 仅当 Drawer 打开 + 时间范围有效 + activeTab=history）
 ```
 
 ### 2.3 TanStack Query 数据层
@@ -679,19 +681,19 @@ export function TargetGroup({ name, targets, onTargetClick }: TargetGroupProps)
 
 #### 现有组件清单
 
-| 组件                 | 文件                                | 用途                                                        |
-| -------------------- | ----------------------------------- | ----------------------------------------------------------- |
-| `App`                | `app.tsx`                           | 根组件，Layout + HeadMenu 骨架、刷新倒计时、Skeleton 加载   |
-| `ErrorBoundary`      | `components/ErrorBoundary.tsx`      | React 错误边界，捕获渲染异常并展示降级 UI                   |
-| `SummaryCards`       | `components/SummaryCards.tsx`       | 总览统计卡片（单 Card 内嵌居中 Statistic，无 shadow）       |
-| `TargetBoard`        | `components/TargetBoard.tsx`        | 按分组渲染目标表格列表（Space 24px 间距）                   |
-| `TargetGroup`        | `components/TargetGroup.tsx`        | 单个分组 Card（title+actions+headerBordered）+ PrimaryTable |
-| `TargetDetailDrawer` | `components/TargetDetailDrawer.tsx` | 目标详情抽屉（width=52%）、时间选择器单行布局和 Tab 切换    |
-| `OverviewTab`        | `components/OverviewTab.tsx`        | 目标详情概览（Descriptions 直接展示 + 4×2 统计卡片 + 趋势） |
-| `HistoryTab`         | `components/HistoryTab.tsx`         | 目标历史记录表格和分页                                      |
-| `TrendChart`         | `components/TrendChart.tsx`         | Recharts 双轴折线图（耗时/可用率）                          |
-| `StatusDot`          | `components/StatusDot.tsx`          | 圆形状态指示点（绿/红）                                     |
-| `StatusBar`          | `components/StatusBar.tsx`          | 最近采样状态条（多色块 + Tooltip 提示时间和状态）           |
+| 组件                 | 文件                                | 用途                                                                                                   |
+| -------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------ |
+| `App`                | `app.tsx`                           | 根组件，Layout + HeadMenu 骨架、刷新倒计时、Skeleton 加载                                              |
+| `ErrorBoundary`      | `components/ErrorBoundary.tsx`      | React 错误边界，捕获渲染异常并展示降级 UI                                                              |
+| `SummaryCards`       | `components/SummaryCards.tsx`       | 总览统计卡片（单 Card 内嵌居中 Statistic，无 shadow）                                                  |
+| `TargetBoard`        | `components/TargetBoard.tsx`        | 按分组渲染目标表格列表（Space 24px 间距）                                                              |
+| `TargetGroup`        | `components/TargetGroup.tsx`        | 单个分组 Card（title+actions+headerBordered）+ PrimaryTable                                            |
+| `TargetDetailDrawer` | `components/TargetDetailDrawer.tsx` | 目标详情抽屉（width=52%、TDesign 生命周期控制、preventScrollThrough、受控 Tabs、记录 TabPanel 懒渲染） |
+| `OverviewTab`        | `components/OverviewTab.tsx`        | 目标详情概览（Descriptions 直接展示 + 4×2 统计卡片 + 趋势）                                            |
+| `HistoryTab`         | `components/HistoryTab.tsx`         | 目标历史记录表格和分页                                                                                 |
+| `TrendChart`         | `components/TrendChart.tsx`         | Recharts 双轴折线图（耗时/可用率）                                                                     |
+| `StatusDot`          | `components/StatusDot.tsx`          | 圆形状态指示点（绿/红）                                                                                |
+| `StatusBar`          | `components/StatusBar.tsx`          | 最近采样状态条（多色块 + Tooltip 提示时间和状态）                                                      |
 
 ### 2.5 新增功能开发步骤