fix: 调整卡片内边距，优化图表和延迟显示的布局

src/components/ui/card.tsx

@@ -23,7 +23,7 @@ const CardHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    className={cn("flex flex-col space-y-1.5 p-4", className)}
     {...props}
   />
 ));
@@ -57,7 +57,7 @@ const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  <div ref={ref} className={cn("p-4 pt-0", className)} {...props} />
 ));
 CardContent.displayName = "CardContent";
 
@@ -67,7 +67,7 @@ const CardFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
+    className={cn("flex items-center p-4 pt-0", className)}
     {...props}
   />
 ));

src/components/ui/tooltip.tsx

@@ -0,0 +1,79 @@
+import { useCallback } from "react";
+
+interface CustomTooltipProps {
+  active?: boolean;
+  payload?: any[];
+  label?: any;
+  chartConfig?: any;
+  labelFormatter?: (label: any) => string;
+}
+
+export const CustomTooltip = ({
+  active,
+  payload,
+  label,
+  chartConfig,
+  labelFormatter,
+}: CustomTooltipProps) => {
+  const defaultLabelFormatter = useCallback((value: any) => {
+    const date = new Date(value);
+    return date.toLocaleString([], {
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+    });
+  }, []);
+
+  if (active && payload && payload.length) {
+    return (
+      <div className="bg-background/80 p-3 border rounded-lg shadow-lg max-w-xs">
+        <p className="text-xs font-medium text-muted-foreground mb-2">
+          {labelFormatter
+            ? labelFormatter(label)
+            : defaultLabelFormatter(label)}
+        </p>
+        <div className="space-y-1">
+          {payload.map((item: any, index: number) => {
+            const series = chartConfig?.series
+              ? chartConfig.series.find((s: any) => s.dataKey === item.dataKey)
+              : {
+                  dataKey: chartConfig?.dataKey || item.dataKey,
+                  tooltipLabel: chartConfig?.tooltipLabel || item.name,
+                  tooltipFormatter: chartConfig?.tooltipFormatter,
+                };
+
+            let value = item.value;
+            if (series?.tooltipFormatter) {
+              value = series.tooltipFormatter(value, item.payload);
+            } else if (typeof value === "number") {
+              value = `${value.toFixed(0)}ms`;
+            } else {
+              value = value?.toString() || "-";
+            }
+
+            return (
+              <div
+                key={`${item.dataKey}-${index}`}
+                className="flex justify-between items-center">
+                <div className="flex items-center gap-2">
+                  <div
+                    className="w-3 h-3 rounded-sm"
+                    style={{ backgroundColor: item.color }}
+                  />
+                  <span className="text-sm font-medium text-foreground">
+                    {series?.tooltipLabel || item.name || item.dataKey}:
+                  </span>
+                </div>
+                <span className="text-sm font-bold ml-2">{value}</span>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+
+  return null;
+};