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

apps/web/app/dashboard/charge-points/[id]/page.tsx

@@ -16,10 +16,11 @@ import {
   Table,
   TextField,
 } from "@heroui/react";
-import { ArrowLeft, Pencil, PlugConnection, ArrowRotateRight } from "@gravity-ui/icons";
+import { ArrowLeft, Pencil, ArrowRotateRight } from "@gravity-ui/icons";
 import { api } from "@/lib/api";
 import { useSession } from "@/lib/auth-client";
 import dayjs from "@/lib/dayjs";
+import InfoSection from "@/components/info-section";
 import { Plug } from "lucide-react";
 
 // ── Status maps ────────────────────────────────────────────────────────────
@@ -270,8 +271,7 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
       <div className="grid gap-4 md:grid-cols-2">
         {/* Device info — admin only */}
         {isAdmin && (
-          <div className="rounded-xl border border-border bg-surface p-4">
-            <h2 className="mb-3 text-sm font-semibold text-foreground">设备信息</h2>
+          <InfoSection title="设备信息">
             <dl className="divide-y divide-border">
               {[
                 { label: "品牌", value: cp.chargePointVendor },
@@ -291,13 +291,12 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
                 </div>
               ))}
             </dl>
-          </div>
+          </InfoSection>
         )}
 
         {/* Operation info — admin only */}
         {isAdmin && (
-          <div className="rounded-xl border border-border bg-surface p-4">
-            <h2 className="mb-3 text-sm font-semibold text-foreground">运行配置</h2>
+          <InfoSection title="运行配置">
             <dl className="divide-y divide-border">
               <div className="flex items-center justify-between gap-4 py-2">
                 <dt className="shrink-0 text-sm text-muted">注册状态</dt>
@@ -369,13 +368,12 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
                 </dd>
               </div>
             </dl>
-          </div>
+          </InfoSection>
         )}
 
         {/* Fee info — user only */}
         {!isAdmin && (
-          <div className="rounded-xl border border-border bg-surface p-4">
-            <h2 className="mb-3 text-sm font-semibold text-foreground">电价信息</h2>
+          <InfoSection title="电价信息">
             <dl className="divide-y divide-border">
               <div className="flex items-center justify-between gap-4 py-2">
                 <dt className="shrink-0 text-sm text-muted">单位电价</dt>
@@ -404,7 +402,7 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
                 </dd>
               </div>
             </dl>
-          </div>
+          </InfoSection>
         )}
       </div>
 

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 && (
+    <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>
-          )}
-        </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}
-          </div>
-        )}
-      </Card.Content>
-    </Card>
+        ) : undefined
+      }
+      footer={footer}
+    />
   );
 }
 

apps/web/app/dashboard/transactions/[id]/page.tsx

@@ -4,11 +4,35 @@ import { use, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useQuery } from "@tanstack/react-query";
-import { Button, Chip, Modal, Spinner } from "@heroui/react";
+import { Alert, Button, Chip, Modal, Spinner } from "@heroui/react";
 import { ArrowLeft, ArrowRotateRight, TrashBin } from "@gravity-ui/icons";
 import { APIError, api } from "@/lib/api";
 import { useSession } from "@/lib/auth-client";
 import dayjs from "@/lib/dayjs";
+import InfoSection from "@/components/info-section";
+import MetricIndicator from "@/components/metric-indicator";
+import { BanknoteArrowUp, Clock, EvCharger } from "lucide-react";
+
+const stopReasonLabelMap: Record<string, string> = {
+  EmergencyStop: "紧急停止",
+  EVDisconnected: "车辆断开",
+  HardReset: "硬重启",
+  Local: "本地结束",
+  Other: "其他原因",
+  PowerLoss: "断电结束",
+  Reboot: "重启结束",
+  Remote: "远程结束",
+  SoftReset: "软重启",
+  UnlockCommand: "解锁结束",
+  DeAuthorized: "鉴权拒绝",
+};
+
+const idTagRejectLabelMap: Record<string, string> = {
+  Blocked: "卡片不可用或余额不足",
+  Expired: "卡片已过期",
+  Invalid: "卡片无效",
+  ConcurrentTx: "该卡已有进行中的订单",
+};
 
 function formatDuration(start: string, stop: string | null): string {
   if (!stop) return "进行中";
@@ -128,6 +152,14 @@ export default function TransactionDetailPage({ params }: { params: Promise<{ id
   const amountFen = tx.chargeAmount ?? tx.estimatedCost;
   const isEstimatedEnergy = tx.energyWh == null && tx.liveEnergyWh != null;
   const isEstimatedAmount = tx.chargeAmount == null && tx.estimatedCost != null;
+  const isRejected = tx.stopReason === "DeAuthorized";
+  const stopReasonLabel = tx.stopReason
+    ? (stopReasonLabelMap[tx.stopReason] ?? tx.stopReason)
+    : "—";
+  const rejectReason =
+    tx.idTagStatus && tx.idTagStatus !== "Accepted"
+      ? (idTagRejectLabelMap[tx.idTagStatus] ?? tx.idTagStatus)
+      : "鉴权失败";
 
   return (
     <div className="space-y-6">
@@ -142,8 +174,12 @@ export default function TransactionDetailPage({ params }: { params: Promise<{ id
       <div className="flex flex-wrap items-start justify-between gap-4">
         <div className="space-y-1.5">
           <div className="flex flex-wrap items-center gap-2">
-            <h1 className="font-mono text-2xl font-semibold text-foreground">充电订单#{tx.id}</h1>
-            {tx.stopTimestamp ? (
+            <h1 className="font-mono text-2xl font-semibold text-foreground">订单 #{tx.id}</h1>
+            {isRejected ? (
+              <Chip color="danger" size="sm" variant="soft">
+                已拒绝
+              </Chip>
+            ) : tx.stopTimestamp ? (
               <Chip color="success" size="sm" variant="soft">
                 已完成
               </Chip>
@@ -157,6 +193,11 @@ export default function TransactionDetailPage({ params }: { params: Promise<{ id
                 费用预估
               </Chip>
             )}
+            {tx.stopReason && !isRejected && (
+              <Chip color="default" size="sm" variant="soft">
+                {stopReasonLabel}
+              </Chip>
+            )}
           </div>
           <p className="text-sm text-muted">
             开始于 {formatDateTime(tx.startTimestamp)} · {tx.stopTimestamp ? "时长 " : ""}
@@ -251,89 +292,123 @@ export default function TransactionDetailPage({ params }: { params: Promise<{ id
         </div>
       </div>
 
+      <Alert status={isRejected ? "danger" : tx.stopTimestamp ? "success" : "accent"}>
+        <Alert.Indicator />
+        <Alert.Content>
+          <Alert.Title>
+            {isRejected ? "交易已被系统拒绝" : tx.stopTimestamp ? "本次交易已结束" : "充电进行中"}
+          </Alert.Title>
+          <Alert.Description>
+            {isRejected
+              ? rejectReason
+              : tx.stopTimestamp
+                ? `结束原因：${stopReasonLabel}`
+                : "充电进行中，实际充电量和费用以结束时系统计算为准。"}
+          </Alert.Description>
+        </Alert.Content>
+      </Alert>
+
       <div className="grid gap-4 md:grid-cols-4">
-        <div className="rounded-xl border border-border bg-surface-secondary p-4">
-          <p className="text-xs text-muted">充电量</p>
-          <div className="mt-1 inline-flex items-center gap-1.5">
-            <p className="text-xl font-semibold text-foreground">{formatEnergy(energyWh)}</p>
+        <MetricIndicator
+          title="充电量"
+          color="border-success"
+          icon={<EvCharger className="size-5 text-success" />}
+          value={
+            <span className="inline-flex items-center gap-1.5">
+              {formatEnergy(energyWh)}
               {isEstimatedEnergy && (
                 <span className="rounded bg-warning-soft px-1 py-0.5 text-[10px] font-semibold text-warning leading-none text-nowrap">
                   预估
                 </span>
               )}
-          </div>
-        </div>
-        <div className="rounded-xl border border-border bg-surface-secondary p-4">
-          <p className="text-xs text-muted">总费用</p>
-          <div className="mt-1 inline-flex items-center gap-1.5">
-            <p className="text-xl font-semibold text-foreground">{formatAmount(amountFen)}</p>
+            </span>
+          }
+        />
+        <MetricIndicator
+          title="总费用"
+          color="border-accent"
+          icon={<BanknoteArrowUp className="size-5 text-accent" />}
+          value={
+            <span className="inline-flex items-center gap-1.5">
+              {formatAmount(amountFen)}
               {isEstimatedAmount && (
                 <span className="rounded bg-warning-soft px-1 py-0.5 text-[10px] font-semibold text-warning leading-none text-nowrap">
                   预估
                 </span>
               )}
-          </div>
-        </div>
-        <div className="rounded-xl border border-border bg-surface-secondary p-4">
-          <p className="text-xs text-muted">状态</p>
-          <p className="mt-1 text-xl font-semibold text-foreground">
-            {tx.stopTimestamp ? "已完成" : "进行中"}
-          </p>
-        </div>
-        <div className="rounded-xl border border-border bg-surface-secondary p-4">
-          <p className="text-xs text-muted">停止原因</p>
-          <p className="mt-1 text-xl font-semibold text-foreground">{tx.stopReason ?? "—"}</p>
-        </div>
+            </span>
+          }
+        />
+        <MetricIndicator
+          title="订单状态"
+          icon={<Clock className="size-5 text-foreground" />}
+          color={
+            isRejected ? "border-danger" : tx.stopTimestamp ? "border-success" : "border-warning"
+          }
+          value={isRejected ? "已拒绝" : tx.stopTimestamp ? "已完成" : "进行中"}
+        />
+        <MetricIndicator title="停止原因" value={isRejected ? rejectReason : stopReasonLabel} />
       </div>
 
       <div className="grid gap-4 lg:grid-cols-2">
-        <div className="rounded-xl border border-border bg-surface-secondary">
-          <div className="border-b border-border px-5 py-3.5">
-            <p className="text-sm font-semibold text-foreground">交易信息</p>
+        <InfoSection title="交易信息">
+          <dl className="divide-y divide-border">
+            <div className="flex items-center justify-between gap-4 py-2">
+              <dt className="shrink-0 text-sm text-muted">交易编号</dt>
+              <dd className="font-mono text-sm text-foreground">#{tx.id}</dd>
             </div>
-          <dl className="grid grid-cols-[120px_1fr] gap-x-4 gap-y-3 px-5 py-4 text-sm">
-            <dt className="text-muted">交易编号</dt>
-            <dd className="font-mono text-foreground">#{tx.id}</dd>
-
-            <dt className="text-muted">储值卡</dt>
-            <dd className="font-mono text-foreground">{tx.idTag}</dd>
-
-            <dt className="text-muted">桩编号</dt>
-            <dd className="font-mono text-foreground">{tx.chargePointIdentifier ?? "—"}</dd>
-
-            <dt className="text-muted">连接器</dt>
-            <dd className="text-foreground">{tx.connectorNumber ?? "—"}</dd>
-
-            <dt className="text-muted">开始时间</dt>
-            <dd className="text-foreground">{formatDateTime(tx.startTimestamp)}</dd>
-
-            <dt className="text-muted">结束时间</dt>
-            <dd className="text-foreground">{formatDateTime(tx.stopTimestamp)}</dd>
-
-            <dt className="text-muted">持续时长</dt>
-            <dd className="text-foreground">
+            <div className="flex items-center justify-between gap-4 py-2">
+              <dt className="shrink-0 text-sm text-muted">储值卡</dt>
+              <dd className="font-mono text-sm text-foreground">{tx.idTag}</dd>
+            </div>
+            <div className="flex items-center justify-between gap-4 py-2">
+              <dt className="shrink-0 text-sm text-muted">桩编号</dt>
+              <dd className="font-mono text-sm text-foreground">
+                {tx.chargePointIdentifier ?? "—"}
+              </dd>
+            </div>
+            <div className="flex items-center justify-between gap-4 py-2">
+              <dt className="shrink-0 text-sm text-muted">连接器</dt>
+              <dd className="text-sm text-foreground">{tx.connectorNumber ?? "—"}</dd>
+            </div>
+            <div className="flex items-center justify-between gap-4 py-2">
+              <dt className="shrink-0 text-sm text-muted">开始时间</dt>
+              <dd className="text-right text-sm text-foreground">
+                {formatDateTime(tx.startTimestamp)}
+              </dd>
+            </div>
+            <div className="flex items-center justify-between gap-4 py-2">
+              <dt className="shrink-0 text-sm text-muted">结束时间</dt>
+              <dd className="text-right text-sm text-foreground">
+                {formatDateTime(tx.stopTimestamp)}
+              </dd>
+            </div>
+            <div className="flex items-center justify-between gap-4 py-2">
+              <dt className="shrink-0 text-sm text-muted">持续时长</dt>
+              <dd className="text-sm text-foreground">
                 {formatDuration(tx.startTimestamp, tx.stopTimestamp)}
               </dd>
+            </div>
           </dl>
-        </div>
+        </InfoSection>
 
-        <div className="rounded-xl border border-border bg-surface-secondary">
-          <div className="border-b border-border px-5 py-3.5">
-            <p className="text-sm font-semibold text-foreground">计量与费用</p>
-          </div>
-          <dl className="grid grid-cols-[140px_1fr] gap-x-4 gap-y-3 px-5 py-4 text-sm">
-            <dt className="text-muted">起始表计</dt>
-            <dd className="text-foreground">
+        <InfoSection title="计量与费用">
+          <dl className="divide-y divide-border">
+            <div className="flex items-center justify-between gap-4 py-2">
+              <dt className="shrink-0 text-sm text-muted">起始表计</dt>
+              <dd className="text-sm text-foreground">
                 {tx.startMeterValue != null ? `${tx.startMeterValue} Wh` : "—"}
               </dd>
-
-            <dt className="text-muted">结束表计</dt>
-            <dd className="text-foreground">
+            </div>
+            <div className="flex items-center justify-between gap-4 py-2">
+              <dt className="shrink-0 text-sm text-muted">结束表计</dt>
+              <dd className="text-sm text-foreground">
                 {tx.stopMeterValue != null ? `${tx.stopMeterValue} Wh` : "—"}
               </dd>
-
-            <dt className="text-muted">消耗电量</dt>
-            <dd className="text-foreground">
+            </div>
+            <div className="flex items-center justify-between gap-4 py-2">
+              <dt className="shrink-0 text-sm text-muted">消耗电量</dt>
+              <dd className="text-sm text-foreground">
                 <span className="inline-flex items-center gap-1">
                   {formatEnergy(energyWh)}
                   {isEstimatedEnergy && (
@@ -343,15 +418,18 @@ export default function TransactionDetailPage({ params }: { params: Promise<{ id
                   )}
                 </span>
               </dd>
-
-            <dt className="text-muted">电费</dt>
-            <dd className="text-foreground">{formatAmount(tx.electricityFee)}</dd>
-
-            <dt className="text-muted">服务费</dt>
-            <dd className="text-foreground">{formatAmount(tx.serviceFee)}</dd>
-
-            <dt className="text-muted">总费用</dt>
-            <dd className="text-foreground">
+            </div>
+            <div className="flex items-center justify-between gap-4 py-2">
+              <dt className="shrink-0 text-sm text-muted">电费</dt>
+              <dd className="text-sm text-foreground">{formatAmount(tx.electricityFee)}</dd>
+            </div>
+            <div className="flex items-center justify-between gap-4 py-2">
+              <dt className="shrink-0 text-sm text-muted">服务费</dt>
+              <dd className="text-sm text-foreground">{formatAmount(tx.serviceFee)}</dd>
+            </div>
+            <div className="flex items-center justify-between gap-4 py-2">
+              <dt className="shrink-0 text-sm text-muted">总费用</dt>
+              <dd className="text-sm text-foreground">
                 <span className="inline-flex items-center gap-1">
                   {formatAmount(amountFen)}
                   {isEstimatedAmount && (
@@ -361,8 +439,9 @@ export default function TransactionDetailPage({ params }: { params: Promise<{ id
                   )}
                 </span>
               </dd>
-          </dl>
             </div>
+          </dl>
+        </InfoSection>
       </div>
     </div>
   );

apps/web/components/info-section.tsx

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+
+type InfoSectionProps = {
+  title: string;
+  children: ReactNode;
+};
+
+export default function InfoSection({ title, children }: InfoSectionProps) {
+  return (
+    <div className="rounded-xl border border-border bg-surface p-4">
+      <h2 className="mb-3 text-sm font-semibold text-foreground">{title}</h2>
+      {children}
+    </div>
+  );
+}

apps/web/components/metric-indicator.tsx

@@ -0,0 +1,41 @@
+import type { ReactNode } from "react";
+import { Card } from "@heroui/react";
+
+type MetricIndicatorProps = {
+  title: string;
+  value: ReactNode;
+  hint?: ReactNode;
+  footer?: ReactNode;
+  icon?: ReactNode;
+  color?: string;
+  valueClassName?: string;
+};
+
+export default function MetricIndicator({
+  title,
+  value,
+  hint,
+  footer,
+  icon,
+  color = "border-border",
+  valueClassName = "text-xl font-semibold text-foreground tabular-nums",
+}: MetricIndicatorProps) {
+  return (
+    <Card className={`border-t-2 ${color}`}>
+      <Card.Content className="flex flex-col gap-3">
+        <div className="flex items-start justify-between gap-2">
+          <p className="text-xs text-muted">{title}</p>
+          {icon}
+        </div>
+        <p className={valueClassName}>{value}</p>
+        {footer ? (
+          <div className="flex flex-wrap items-center gap-x-1.5 gap-y-1 text-xs text-muted">
+            {footer}
+          </div>
+        ) : (
+          hint && <div className="text-xs text-muted">{hint}</div>
+        )}
+      </Card.Content>
+    </Card>
+  );
+}