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

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,118 +292,156 @@ 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>
-            {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>
-            {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>
+        <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>
+              )}
+            </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>
+              )}
+            </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>
-          </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">
-              {formatDuration(tx.startTimestamp, tx.stopTimestamp)}
-            </dd>
+        <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>
+            <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">
-              {tx.startMeterValue != null ? `${tx.startMeterValue} Wh` : "—"}
-            </dd>
-
-            <dt className="text-muted">结束表计</dt>
-            <dd className="text-foreground">
-              {tx.stopMeterValue != null ? `${tx.stopMeterValue} Wh` : "—"}
-            </dd>
-
-            <dt className="text-muted">消耗电量</dt>
-            <dd className="text-foreground">
-              <span className="inline-flex items-center gap-1">
-                {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>
-                )}
-              </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">
-              <span className="inline-flex items-center gap-1">
-                {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>
-                )}
-              </span>
-            </dd>
+        <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>
+            </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>
+            </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 && (
+                    <span className="rounded bg-warning-soft px-1 py-0.5 text-[10px] font-semibold text-warning leading-none text-nowrap">
+                      预估
+                    </span>
+                  )}
+                </span>
+              </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.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 && (
+                    <span className="rounded bg-warning-soft px-1 py-0.5 text-[10px] font-semibold text-warning leading-none text-nowrap">
+                      预估
+                    </span>
+                  )}
+                </span>
+              </dd>
+            </div>
           </dl>
-        </div>
+        </InfoSection>
       </div>
     </div>
   );