refactor: 前端视觉重构 — Layout/HeadMenu 骨架、SummaryCards 合并、Card 分组、Drawer 概览重设计

src/web/components/TargetGroup.tsx

@@ -1,11 +1,9 @@
 import type { PrimaryTableCol } from "tdesign-react";
 
-import { PrimaryTable } from "tdesign-react";
+import { Card, PrimaryTable, Space, Tag } from "tdesign-react";
 
 import type { TargetStatus } from "../../shared/api";
 
-import { GroupHeader } from "./GroupHeader";
-
 interface TargetGroupProps {
   columns: Array<PrimaryTableCol<TargetStatus>>;
   name: string;
@@ -16,12 +14,24 @@ interface TargetGroupProps {
 export function TargetGroup({ columns, name, onTargetClick, targets }: TargetGroupProps) {
   const up = targets.filter((t) => t.latestCheck?.matched).length;
   const down = targets.length - up;
+  const displayName = name === "default" ? "默认分组" : name;
 
   return (
-    <div>
-      <GroupHeader down={down} name={name} total={targets.length} up={up} />
+    <Card
+      actions={
+        <Space size={8}>
+          <Tag theme="success" title="正常" variant="light">
+            {up}
+          </Tag>
+          <Tag theme="danger" title="异常" variant="light">
+            {down}
+          </Tag>
+        </Space>
+      }
+      headerBordered
+      title={displayName}
+    >
       <PrimaryTable
-        bordered
         className="clickable-table"
         columns={columns}
         data={targets}
@@ -36,6 +46,6 @@ export function TargetGroup({ columns, name, onTargetClick, targets }: TargetGro
         size="small"
         stripe
       />
-    </div>
+    </Card>
   );
 }