refactor: 重构 Drawer 布局，合并趋势 tab、优化时间选择器和记录表格

- 移除 Drawer 底部确定/取消按钮
- 快捷时间段按钮中文化，时间选择器分两行显示
- DateRangePicker 时间精度改为分钟级
- 三 tab 合并为两 tab，趋势图移入概览面板并添加小标题分隔
- 记录表格：状态列改用 StatusDot，详情列合并错误信息，时间格式统一，耗时单位移至列标题
- 切换目标时通过 key 重置 Drawer 组件状态
- StatusDonut 居中，Tab 内容区域添加 padding
- 同步更新 openspec specs

src/web/app.tsx

@@ -42,6 +42,7 @@ export function App() {
       )}
 
       <TargetDetailDrawer
+        key={selectedTarget?.id}
         target={selectedTarget}
         trendData={trendData}
         trendLoading={trendLoading}

src/web/components/TargetDetailDrawer.tsx

@@ -34,49 +34,53 @@ interface TargetDetailDrawerProps {
 }
 
 const TIME_SHORTCUTS = [
-  { label: "1h", hours: 1, value: "1h" },
-  { label: "6h", hours: 6, value: "6h" },
-  { label: "24h", hours: 24, value: "24h" },
-  { label: "7d", hours: 168, value: "7d" },
+  { label: "1小时", hours: 1, value: "1h" },
+  { label: "6小时", hours: 6, value: "6h" },
+  { label: "24小时", hours: 24, value: "24h" },
+  { label: "7天", hours: 168, value: "7d" },
 ] as const;
 
+const SECTION_TITLE_STYLE: React.CSSProperties = {
+  fontSize: 14,
+  fontWeight: 600,
+  color: "var(--td-text-color-primary)",
+  margin: "16px 0 8px",
+};
+
 const HISTORY_COLUMNS = [
   {
     colKey: "matched",
-    title: "状态",
-    width: 72,
+    title: "#",
+    width: 40,
     cell: ({ row }: { row: CheckResult; rowIndex: number; col: unknown; colIndex: number }) => (
-      <Tag theme={row.matched ? "success" : "danger"} size="small">
-        {row.matched ? "UP" : "DOWN"}
-      </Tag>
+      <StatusDot up={!!row.matched} />
     ),
   },
   {
     colKey: "timestamp",
     title: "时间",
-    width: 170,
+    width: 180,
+    cell: ({ row }: { row: CheckResult; rowIndex: number; col: unknown; colIndex: number }) => {
+      const d = new Date(row.timestamp);
+      const pad = (n: number) => String(n).padStart(2, "0");
+      return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+    },
+  },
+  {
+    colKey: "durationMs",
+    title: "耗时(ms)",
+    width: 96,
+    align: "center" as const,
     cell: ({ row }: { row: CheckResult; rowIndex: number; col: unknown; colIndex: number }) =>
-      new Date(row.timestamp).toLocaleString("zh-CN"),
+      row.durationMs !== null ? Math.round(row.durationMs) : "-",
   },
   {
     colKey: "statusDetail",
     title: "详情",
-    width: 100,
-    cell: ({ row }: { row: CheckResult; rowIndex: number; col: unknown; colIndex: number }) => row.statusDetail ?? "-",
-  },
-  {
-    colKey: "durationMs",
-    title: "耗时",
-    width: 80,
-    align: "right" as const,
-    cell: ({ row }: { row: CheckResult; rowIndex: number; col: unknown; colIndex: number }) =>
-      row.durationMs !== null ? `${Math.round(row.durationMs)}ms` : "-",
-  },
-  {
-    colKey: "failure",
-    title: "错误信息",
-    cell: ({ row }: { row: CheckResult; rowIndex: number; col: unknown; colIndex: number }) =>
-      row.failure?.message ?? "",
+    cell: ({ row }: { row: CheckResult; rowIndex: number; col: unknown; colIndex: number }) => {
+      const parts = [row.statusDetail, row.failure?.message].filter(Boolean);
+      return parts.length > 0 ? parts.join("：") : "-";
+    },
   },
 ];
 
@@ -129,6 +133,7 @@ export function TargetDetailDrawer({
       visible={!!target}
       placement="right"
       size="60%"
+      footer={false}
       onClose={onClose}
       header={
         <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
@@ -140,23 +145,32 @@ export function TargetDetailDrawer({
         </div>
       }
     >
-      <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 16 }}>
+      <div style={{ marginBottom: 16 }}>
         <RadioGroup
+          theme="button"
           variant="default-filled"
           value={activeShortcut}
           options={TIME_SHORTCUTS.map((s) => ({ label: s.label, value: s.value }))}
           onChange={handleShortcut}
         />
+      </div>
+      <div style={{ marginBottom: 16 }}>
         <DateRangePicker
           mode="date"
           enableTimePicker
+          format="YYYY-MM-DD HH:mm"
+          valueType="YYYY-MM-DD HH:mm"
+          defaultTime={["00:00:00", "23:59:00"]}
+          timePickerProps={{ format: "HH:mm", steps: [1, 1, 60] }}
+          style={{ width: "100%" }}
           value={timeFrom && timeTo ? [timeFrom, timeTo] : undefined}
           onChange={handleDateRangeChange}
         />
       </div>
 
-      <Tabs value={activeTab} onChange={(val: TabValue) => setActiveTab(val)}>
+      <Tabs className="drawer-tabs" value={activeTab} onChange={(val: TabValue) => setActiveTab(val)}>
         <Tabs.TabPanel value="overview" label="概览">
+          <h4 style={{ ...SECTION_TITLE_STYLE, marginTop: 0 }}>统计</h4>
           <Row gutter={16} style={{ marginBottom: 16 }}>
             <Col span={3}>
               <Statistic title="总检查" value={totalChecks} color="blue" />
@@ -172,6 +186,13 @@ export function TargetDetailDrawer({
             </Col>
           </Row>
 
+          <h4 style={SECTION_TITLE_STYLE}>趋势</h4>
+          {trendLoading ? <Skeleton animation="gradient" /> : <TrendChart data={trendData} loading={false} />}
+
+          <h4 style={SECTION_TITLE_STYLE}>状态分布</h4>
+          <StatusDonut up={upChecks} down={downChecks} />
+
+          <h4 style={SECTION_TITLE_STYLE}>基本信息</h4>
           <Descriptions
             items={[
               { label: "目标地址", content: target.target },
@@ -182,14 +203,7 @@ export function TargetDetailDrawer({
               },
               { label: "状态详情", content: target.latestCheck?.statusDetail ?? "-" },
             ]}
-            style={{ marginBottom: 16 }}
           />
-
-          <StatusDonut up={upChecks} down={downChecks} />
-        </Tabs.TabPanel>
-
-        <Tabs.TabPanel value="trend" label="趋势">
-          {trendLoading ? <Skeleton animation="gradient" /> : <TrendChart data={trendData} loading={false} />}
         </Tabs.TabPanel>
 
         <Tabs.TabPanel value="history" label="记录">

src/web/styles.css

@@ -45,6 +45,9 @@
   position: relative;
   display: flex;
   justify-content: center;
+  align-items: center;
+  width: fit-content;
+  margin: 0 auto;
 }
 
 .donut-center-label {
@@ -68,6 +71,10 @@
   font-size: 0.85rem;
 }
 
+.drawer-tabs .t-tab-panel {
+  padding: 15px;
+}
+
 .row-down {
   background: color-mix(in srgb, var(--td-error-color) 6%, transparent) !important;
 }