feat: Drawer 响应式默认宽度与拖拽调整，统计卡片上下布局优化

Drawer 宽度从固定百分比改为按视口响应式默认值（6段断点），宽屏占比更小、窄屏占比更大。

启用 TDesign sizeDraggable 原生拖拽调整能力，配置 min/max 视口安全边界，不持久化拖拽宽度。

概览统计卡片改为 TDesign Statistic 上下布局（与 SummaryCards 一致），提升窄屏视觉体验。

Drawer header 间距调大，MutationObserver polyfill 补全。

src/web/components/OverviewTab.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 
-import { Col, Descriptions, Divider, Row, Skeleton, Space, Statistic, Typography } from "tdesign-react";
+import { Col, Descriptions, Divider, Row, Skeleton, Space, Statistic } from "tdesign-react";
 
 import type { TargetMetricsResponse, TargetStatus } from "../../shared/api";
 
@@ -97,11 +97,8 @@ export function OverviewTab({ metricsData, metricsLoading, target }: OverviewTab
 
 function OverviewStatItem({ color, suffix, title, value }: OverviewStatItemProps) {
   return (
-    <div className="overview-stat-card">
-      <div className="overview-stat-item">
-        <Typography.Text theme="secondary">{title}</Typography.Text>
-        <Statistic className="overview-stat-value" color={color} suffix={suffix} value={value} />
-      </div>
+    <div className="overview-stat-card summary-stat-col">
+      <Statistic color={color} suffix={suffix} title={title} value={value} />
     </div>
   );
 }

src/web/components/TargetDetailDrawer.tsx

@@ -1,6 +1,6 @@
 import type { TabValue } from "tdesign-react";
 
-import { useCallback, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { DateRangePicker, Drawer, RadioGroup, Space, Tabs, Tag, Typography } from "tdesign-react";
 
 import type { HistoryResponse, TargetMetricsResponse, TargetStatus } from "../../shared/api";
@@ -72,13 +72,23 @@ export function TargetDetailDrawer({
 
   const isUp = target?.latestCheck?.matched;
 
+  const dragLimits = useMemo(() => {
+    const viewportWidth = window.innerWidth;
+    const safeGap = 24;
+    return {
+      max: Math.min(1200, Math.max(360, viewportWidth - safeGap)),
+      min: 360,
+    };
+  }, []);
+
   return (
     <Drawer
       attach="body"
+      className="target-detail-drawer"
       footer={false}
       header={
         target ? (
-          <Space align="center" size={8}>
+          <Space align="center" size={12}>
             <StatusDot up={!!isUp} />
             <Typography.Text strong>{target.name}</Typography.Text>
             <Tag size="small" theme="primary" variant="light-outline">
@@ -92,7 +102,8 @@ export function TargetDetailDrawer({
       preventScrollThrough
       showInAttachedElement={false}
       showOverlay
-      size="55%"
+      size="var(--target-detail-drawer-width)"
+      sizeDraggable={dragLimits}
       visible={!!target}
     >
       <Space className="full-width" direction="vertical" size={16}>

src/web/styles.css

@@ -170,28 +170,46 @@
   min-width: 360px;
 }
 
+.target-detail-drawer {
+  --target-detail-drawer-width: calc(100vw - 16px);
+}
+
+@media (min-width: 640px) {
+  .target-detail-drawer {
+    --target-detail-drawer-width: 86vw;
+  }
+}
+
+@media (min-width: 768px) {
+  .target-detail-drawer {
+    --target-detail-drawer-width: 82vw;
+  }
+}
+
+@media (min-width: 1024px) {
+  .target-detail-drawer {
+    --target-detail-drawer-width: 68vw;
+  }
+}
+
+@media (min-width: 1440px) {
+  .target-detail-drawer {
+    --target-detail-drawer-width: 58vw;
+  }
+}
+
+@media (min-width: 1920px) {
+  .target-detail-drawer {
+    --target-detail-drawer-width: min(50vw, 960px);
+  }
+}
+
 .overview-stat-card {
   background: var(--td-bg-color-container-hover);
   border-radius: var(--td-radius-default);
   padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xl);
 }
 
-.overview-stat-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--td-comp-margin-m);
-}
-
-.overview-stat-value {
-  font-size: var(--td-font-size-body-medium);
-  text-align: right;
-}
-
-.overview-stat-value .t-statistic-content {
-  font-size: var(--td-font-size-body-medium);
-}
-
 .summary-stat-col {
   text-align: center;
 }