feat: 添加信息和指标组件以增强充电订单和计量信息的展示

apps/web/app/dashboard/page.tsx

@@ -2,15 +2,13 @@
 
 import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
-import { Button, Card, Spinner } from "@heroui/react";
+import { Button, Spinner } from "@heroui/react";
 import Link from "next/link";
 import {
   Thunderbolt,
-  PlugConnection,
   CreditCard,
   ChartColumn,
   TagDollar,
-  Person,
   ArrowRotateRight,
   TriangleExclamation,
 } from "@gravity-ui/icons";
@@ -27,6 +25,7 @@ import {
   type ChartDataPoint,
 } from "@/lib/api";
 import { BanknoteArrowDown, EvCharger, Plug, Users } from "lucide-react";
+import MetricIndicator from "@/components/metric-indicator";
 
 // ── Helpers ────────────────────────────────────────────────────────────────
 
@@ -72,24 +71,20 @@ function StatCard({
 }) {
   const s = colorStyles[color];
   return (
-    <Card className={`border-t-2 ${s.border}`}>
-      <Card.Content className="flex flex-col gap-3">
-        <div className="flex items-start justify-between gap-2">
-          <p className="text-sm text-muted">{title}</p>
-          {Icon && (
-            <div className={`flex size-9 shrink-0 items-center justify-center rounded-xl ${s.bg}`}>
-              <Icon className={`size-4.5 ${s.icon}`} />
-            </div>
-          )}
-        </div>
-        <p className="text-3xl font-bold tabular-nums leading-none text-foreground">{value}</p>
-        {footer && (
-          <div className="flex flex-wrap items-center gap-x-1.5 gap-y-1 text-xs text-muted">
-            {footer}
+    <MetricIndicator
+      title={title}
+      value={value}
+      color={s.border}
+      valueClassName="text-3xl font-bold tabular-nums leading-none text-foreground"
+      icon={
+        Icon ? (
+          <div className={`flex size-9 shrink-0 items-center justify-center rounded-xl ${s.bg}`}>
+            <Icon className={`size-4.5 ${s.icon}`} />
           </div>
-        )}
-      </Card.Content>
-    </Card>
+        ) : undefined
+      }
+      footer={footer}
+    />
   );
 }