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

src/web/components/StatusBar.tsx

@@ -1,6 +1,12 @@
+import { Tooltip } from "tdesign-react";
+
+import type { RecentSample } from "../../shared/api";
+
+import { formatRelativeTime } from "../utils/time";
+
 interface StatusBarProps {
   maxSlots?: number;
-  samples: Array<{ up: boolean }>;
+  samples: RecentSample[];
 }
 
 export function StatusBar({ maxSlots = 30, samples }: StatusBarProps) {
@@ -9,10 +15,13 @@ export function StatusBar({ maxSlots = 30, samples }: StatusBarProps) {
     const sample = samples[i];
     if (sample) {
       blocks.push(
-        <span
-          className={`status-bar-block ${sample.up ? "status-bar-block--up" : "status-bar-block--down"}`}
+        <Tooltip
+          content={`${formatRelativeTime(sample.timestamp)}，${sample.up ? "正常" : "异常"}`}
           key={i}
-        />,
+          placement="top"
+        >
+          <span className={`status-bar-block ${sample.up ? "status-bar-block--up" : "status-bar-block--down"}`} />
+        </Tooltip>,
       );
     } else {
       blocks.push(<span className="status-bar-block status-bar-block--empty" key={i} />);