feat(web): charge point details page

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

@@ -0,0 +1,596 @@
+"use client";
+
+import { use, useCallback, useEffect, useState } from "react";
+import Link from "next/link";
+import {
+  Button,
+  Chip,
+  Input,
+  Label,
+  ListBox,
+  Modal,
+  Pagination,
+  Select,
+  Spinner,
+  Table,
+  TextField,
+} from "@heroui/react";
+import { ArrowLeft, Pencil, PlugConnection } from "@gravity-ui/icons";
+import { api, type ChargePointDetail, type PaginatedTransactions } from "@/lib/api";
+
+// ── Status maps ────────────────────────────────────────────────────────────
+
+const statusLabelMap: Record<string, string> = {
+  Available: "空闲",
+  Charging: "充电中",
+  Preparing: "准备中",
+  Finishing: "结束中",
+  SuspendedEV: "EV 暂停",
+  SuspendedEVSE: "EVSE 暂停",
+  Reserved: "已预约",
+  Faulted: "故障",
+  Unavailable: "不可用",
+  Occupied: "占用",
+};
+
+const statusDotClass: Record<string, string> = {
+  Available: "bg-success",
+  Charging: "bg-[var(--accent)] animate-pulse",
+  Preparing: "bg-warning animate-pulse",
+  Finishing: "bg-warning",
+  SuspendedEV: "bg-warning",
+  SuspendedEVSE: "bg-warning",
+  Reserved: "bg-warning",
+  Faulted: "bg-danger",
+  Unavailable: "bg-danger",
+  Occupied: "bg-warning",
+};
+
+const registrationColorMap: Record<string, "success" | "warning" | "danger"> = {
+  Accepted: "success",
+  Pending: "warning",
+  Rejected: "danger",
+};
+
+const TX_LIMIT = 10;
+
+// ── Helpers ────────────────────────────────────────────────────────────────
+
+function formatDuration(start: string, stop: string | null): string {
+  if (!stop) return "进行中";
+  const ms = new Date(stop).getTime() - new Date(start).getTime();
+  const min = Math.floor(ms / 60000);
+  if (min < 60) return `${min} 分钟`;
+  const h = Math.floor(min / 60);
+  const m = min % 60;
+  return `${h}h ${m}m`;
+}
+
+function relativeTime(iso: string): string {
+  const diff = Date.now() - new Date(iso).getTime();
+  const s = Math.floor(diff / 1000);
+  if (s < 60) return `${s} 秒前`;
+  const m = Math.floor(s / 60);
+  if (m < 60) return `${m} 分钟前`;
+  const h = Math.floor(m / 60);
+  if (h < 24) return `${h} 小时前`;
+  const d = Math.floor(h / 24);
+  return `${d} 天前`;
+}
+
+// ── Edit form type ─────────────────────────────────────────────────────────
+
+type EditForm = {
+  chargePointVendor: string;
+  chargePointModel: string;
+  registrationStatus: "Accepted" | "Pending" | "Rejected";
+  feePerKwh: string;
+};
+
+// ── Component ──────────────────────────────────────────────────────────────
+
+export default function ChargePointDetailPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = use(params);
+
+  const [cp, setCp] = useState<ChargePointDetail | null>(null);
+  const [notFound, setNotFound] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  // transactions
+  const [txData, setTxData] = useState<PaginatedTransactions | null>(null);
+  const [txPage, setTxPage] = useState(1);
+  const [txLoading, setTxLoading] = useState(true);
+
+  // edit modal
+  const [editOpen, setEditOpen] = useState(false);
+  const [editBusy, setEditBusy] = useState(false);
+  const [editForm, setEditForm] = useState<EditForm>({
+    chargePointVendor: "",
+    chargePointModel: "",
+    registrationStatus: "Pending",
+    feePerKwh: "0",
+  });
+
+  const loadCp = useCallback(async () => {
+    setLoading(true);
+    try {
+      const data = await api.chargePoints.get(id);
+      setCp(data);
+    } catch {
+      setNotFound(true);
+    } finally {
+      setLoading(false);
+    }
+  }, [id]);
+
+  const loadTx = useCallback(
+    async (p: number) => {
+      setTxLoading(true);
+      try {
+        const data = await api.transactions.list({
+          page: p,
+          limit: TX_LIMIT,
+          chargePointId: id,
+        });
+        setTxData(data);
+      } finally {
+        setTxLoading(false);
+      }
+    },
+    [id],
+  );
+
+  useEffect(() => {
+    loadCp();
+  }, [loadCp]);
+
+  useEffect(() => {
+    loadTx(txPage);
+  }, [txPage, loadTx]);
+
+  const openEdit = () => {
+    if (!cp) return;
+    setEditForm({
+      chargePointVendor: cp.chargePointVendor ?? "",
+      chargePointModel: cp.chargePointModel ?? "",
+      registrationStatus: cp.registrationStatus as EditForm["registrationStatus"],
+      feePerKwh: String(cp.feePerKwh),
+    });
+    setEditOpen(true);
+  };
+
+  const handleEditSubmit = async () => {
+    if (!cp) return;
+    setEditBusy(true);
+    try {
+      const fee = Math.max(0, Math.round(Number(editForm.feePerKwh) || 0));
+      const updated = await api.chargePoints.update(cp.id, {
+        chargePointVendor: editForm.chargePointVendor,
+        chargePointModel: editForm.chargePointModel,
+        registrationStatus: editForm.registrationStatus,
+        feePerKwh: fee,
+      });
+      setCp((prev) => (prev ? { ...prev, ...updated, connectors: prev.connectors } : prev));
+      setEditOpen(false);
+    } finally {
+      setEditBusy(false);
+    }
+  };
+
+  // Online if last heartbeat within 3× interval
+  const isOnline =
+    cp?.lastHeartbeatAt != null &&
+    Date.now() - new Date(cp.lastHeartbeatAt).getTime() < (cp.heartbeatInterval ?? 60) * 3 * 1000;
+
+  // ── Render: loading / not found ──────────────────────────────────────────
+
+  if (loading) {
+    return (
+      <div className="flex h-48 items-center justify-center">
+        <Spinner />
+      </div>
+    );
+  }
+
+  if (notFound || !cp) {
+    return (
+      <div className="space-y-4">
+        <Link
+          href="/dashboard/charge-points"
+          className="inline-flex items-center gap-1.5 text-sm text-muted hover:text-foreground"
+        >
+          <ArrowLeft className="size-4" />
+          充电桩管理
+        </Link>
+        <p className="text-sm text-danger">充电桩不存在或已被删除。</p>
+      </div>
+    );
+  }
+
+  const sortedConnectors = [...cp.connectors].sort((a, b) => a.connectorId - b.connectorId);
+
+  // ── Render ───────────────────────────────────────────────────────────────
+
+  return (
+    <div className="space-y-6">
+      {/* Breadcrumb back */}
+      <Link
+        href="/dashboard/charge-points"
+        className="inline-flex items-center gap-1.5 text-sm text-muted hover:text-foreground"
+      >
+        <ArrowLeft className="size-4" />
+        充电桩管理
+      </Link>
+
+      {/* Header */}
+      <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">
+              {cp.chargePointIdentifier}
+            </h1>
+            <Chip
+              color={registrationColorMap[cp.registrationStatus] ?? "warning"}
+              size="sm"
+              variant="soft"
+            >
+              {cp.registrationStatus}
+            </Chip>
+            <div className="flex items-center gap-1.5">
+              <span
+                className={`size-2 rounded-full ${isOnline ? "bg-success animate-pulse" : "bg-muted"}`}
+              />
+              <span className="text-xs text-muted">{isOnline ? "在线" : "离线"}</span>
+            </div>
+          </div>
+          {(cp.chargePointVendor || cp.chargePointModel) && (
+            <p className="text-sm text-muted">
+              {[cp.chargePointVendor, cp.chargePointModel].filter(Boolean).join(" · ")}
+            </p>
+          )}
+        </div>
+        <Button size="sm" variant="secondary" onPress={openEdit}>
+          <Pencil className="size-4" />
+          编辑
+        </Button>
+      </div>
+
+      {/* Info grid */}
+      <div className="grid gap-4 md:grid-cols-2">
+        {/* Device info */}
+        <div className="rounded-xl border border-border bg-surface p-4">
+          <h2 className="mb-3 text-sm font-semibold text-foreground">设备信息</h2>
+          <dl className="divide-y divide-border">
+            {[
+              { label: "品牌", value: cp.chargePointVendor },
+              { label: "型号", value: cp.chargePointModel },
+              { label: "序列号", value: cp.chargePointSerialNumber },
+              { label: "固件版本", value: cp.firmwareVersion },
+              { label: "电表型号", value: cp.meterType },
+              { label: "电表序列号", value: cp.meterSerialNumber },
+              { label: "ICCID", value: cp.iccid },
+              { label: "IMSI", value: cp.imsi },
+            ].map(({ label, value }) => (
+              <div key={label} className="flex items-center justify-between gap-4 py-2">
+                <dt className="shrink-0 text-sm text-muted">{label}</dt>
+                <dd className="truncate text-sm text-foreground">
+                  {value ?? <span className="text-muted">—</span>}
+                </dd>
+              </div>
+            ))}
+          </dl>
+        </div>
+
+        {/* Operation info */}
+        <div className="rounded-xl border border-border bg-surface p-4">
+          <h2 className="mb-3 text-sm font-semibold text-foreground">运行配置</h2>
+          <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>
+                <Chip
+                  color={registrationColorMap[cp.registrationStatus] ?? "warning"}
+                  size="sm"
+                  variant="soft"
+                >
+                  {cp.registrationStatus}
+                </Chip>
+              </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">
+                {cp.feePerKwh > 0 ? (
+                  <span>
+                    {cp.feePerKwh} 分/kWh
+                    <span className="ml-1 text-xs text-muted">
+                      (¥{(cp.feePerKwh / 100).toFixed(2)}/kWh)
+                    </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">
+                {cp.heartbeatInterval != null ? (
+                  `${cp.heartbeatInterval} 秒`
+                ) : (
+                  <span className="text-muted">—</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-right text-sm text-foreground">
+                {cp.lastHeartbeatAt ? (
+                  <span title={new Date(cp.lastHeartbeatAt).toLocaleString("zh-CN")}>
+                    {relativeTime(cp.lastHeartbeatAt)}
+                  </span>
+                ) : (
+                  <span className="text-muted">—</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-right text-sm text-foreground">
+                {cp.lastBootNotificationAt ? (
+                  <span title={new Date(cp.lastBootNotificationAt).toLocaleString("zh-CN")}>
+                    {relativeTime(cp.lastBootNotificationAt)}
+                  </span>
+                ) : (
+                  <span className="text-muted">—</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">
+                {new Date(cp.createdAt).toLocaleDateString("zh-CN")}
+              </dd>
+            </div>
+          </dl>
+        </div>
+      </div>
+
+      {/* Connectors */}
+      {sortedConnectors.length > 0 && (
+        <div className="space-y-3">
+          <h2 className="text-sm font-semibold text-foreground">接口状态</h2>
+          <div className="flex flex-wrap gap-3">
+            {sortedConnectors.map((conn) => (
+              <div
+                key={conn.id}
+                className="flex min-w-40 flex-col gap-2 rounded-xl border border-border bg-surface p-3"
+              >
+                <div className="flex items-center gap-2">
+                  <PlugConnection className="size-4 shrink-0 text-muted" />
+                  <span className="text-sm font-medium text-foreground">
+                    接口 #{conn.connectorId}
+                  </span>
+                  <span className="ml-auto flex items-center gap-1">
+                    <span
+                      className={`size-2 shrink-0 rounded-full ${statusDotClass[conn.status] ?? "bg-warning"}`}
+                    />
+                    <span className="text-xs text-muted">
+                      {statusLabelMap[conn.status] ?? conn.status}
+                    </span>
+                  </span>
+                </div>
+                {conn.errorCode && conn.errorCode !== "NoError" && (
+                  <p className="text-xs text-danger">错误: {conn.errorCode}</p>
+                )}
+                {conn.info && <p className="text-xs text-muted">{conn.info}</p>}
+                <p className="text-xs text-muted">
+                  更新于{" "}
+                  {new Date(conn.lastStatusAt).toLocaleString("zh-CN", {
+                    month: "2-digit",
+                    day: "2-digit",
+                    hour: "2-digit",
+                    minute: "2-digit",
+                  })}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Transactions */}
+      <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <h2 className="text-sm font-semibold text-foreground">充电记录</h2>
+          {txData && <span className="text-xs text-muted">共 {txData.total} 条</span>}
+        </div>
+
+        <Table>
+          <Table.ScrollContainer>
+            <Table.Content aria-label="充电记录">
+              <Table.Header>
+                <Table.Column isRowHeader>ID</Table.Column>
+                <Table.Column>接口</Table.Column>
+                <Table.Column>充电卡</Table.Column>
+                <Table.Column>开始时间</Table.Column>
+                <Table.Column>时长</Table.Column>
+                <Table.Column>用电量</Table.Column>
+                <Table.Column>费用</Table.Column>
+                <Table.Column>停止原因</Table.Column>
+              </Table.Header>
+              <Table.Body
+                renderEmptyState={() => (
+                  <div className="py-8 text-center text-sm text-muted">
+                    {txLoading ? "加载中…" : "暂无充电记录"}
+                  </div>
+                )}
+              >
+                {(txData?.data ?? []).map((tx) => (
+                  <Table.Row key={tx.id} id={tx.id}>
+                    <Table.Cell className="font-mono text-sm text-muted">#{tx.id}</Table.Cell>
+                    <Table.Cell>
+                      {tx.connectorNumber != null ? (
+                        `#${tx.connectorNumber}`
+                      ) : (
+                        <span className="text-muted">—</span>
+                      )}
+                    </Table.Cell>
+                    <Table.Cell className="font-mono">{tx.idTag}</Table.Cell>
+                    <Table.Cell className="tabular-nums text-sm">
+                      {new Date(tx.startTimestamp).toLocaleString("zh-CN", {
+                        month: "2-digit",
+                        day: "2-digit",
+                        hour: "2-digit",
+                        minute: "2-digit",
+                      })}
+                    </Table.Cell>
+                    <Table.Cell>{formatDuration(tx.startTimestamp, tx.stopTimestamp)}</Table.Cell>
+                    <Table.Cell className="tabular-nums">
+                      {tx.energyWh != null ? (
+                        `${(tx.energyWh / 1000).toFixed(2)} kWh`
+                      ) : (
+                        <span className="text-muted">—</span>
+                      )}
+                    </Table.Cell>
+                    <Table.Cell className="tabular-nums">
+                      {tx.chargeAmount != null ? (
+                        `¥${(tx.chargeAmount / 100).toFixed(2)}`
+                      ) : (
+                        <span className="text-muted">—</span>
+                      )}
+                    </Table.Cell>
+                    <Table.Cell>
+                      {tx.stopReason ?? <span className="text-muted">—</span>}
+                    </Table.Cell>
+                  </Table.Row>
+                ))}
+              </Table.Body>
+            </Table.Content>
+          </Table.ScrollContainer>
+        </Table>
+
+        {txData && txData.totalPages > 1 && (
+          <div className="flex justify-center">
+            <Pagination size="sm">
+              <Pagination.Content>
+                <Pagination.Item>
+                  <Pagination.Previous
+                    isDisabled={txPage === 1}
+                    onPress={() => setTxPage((p) => Math.max(1, p - 1))}
+                  >
+                    <Pagination.PreviousIcon />
+                    上一页
+                  </Pagination.Previous>
+                </Pagination.Item>
+                {Array.from({ length: txData.totalPages }, (_, i) => i + 1).map((p) => (
+                  <Pagination.Item key={p}>
+                    <Pagination.Link isActive={p === txPage} onPress={() => setTxPage(p)}>
+                      {p}
+                    </Pagination.Link>
+                  </Pagination.Item>
+                ))}
+                <Pagination.Item>
+                  <Pagination.Next
+                    isDisabled={txPage === txData.totalPages}
+                    onPress={() => setTxPage((p) => Math.min(txData.totalPages, p + 1))}
+                  >
+                    下一页
+                    <Pagination.NextIcon />
+                  </Pagination.Next>
+                </Pagination.Item>
+              </Pagination.Content>
+            </Pagination>
+          </div>
+        )}
+      </div>
+
+      {/* Edit modal */}
+      <Modal
+        isOpen={editOpen}
+        onOpenChange={(open) => {
+          if (!editBusy) setEditOpen(open);
+        }}
+      >
+        <Modal.Backdrop>
+          <Modal.Container scroll="outside">
+            <Modal.Dialog className="sm:max-w-md">
+              <Modal.CloseTrigger />
+              <Modal.Header>
+                <Modal.Heading>编辑充电桩</Modal.Heading>
+              </Modal.Header>
+              <Modal.Body className="space-y-3">
+                <div className="grid grid-cols-2 gap-3">
+                  <TextField fullWidth>
+                    <Label className="text-sm font-medium">品牌</Label>
+                    <Input
+                      placeholder="Unknown"
+                      value={editForm.chargePointVendor}
+                      onChange={(e) =>
+                        setEditForm((f) => ({ ...f, chargePointVendor: e.target.value }))
+                      }
+                    />
+                  </TextField>
+                  <TextField fullWidth>
+                    <Label className="text-sm font-medium">型号</Label>
+                    <Input
+                      placeholder="Unknown"
+                      value={editForm.chargePointModel}
+                      onChange={(e) =>
+                        setEditForm((f) => ({ ...f, chargePointModel: e.target.value }))
+                      }
+                    />
+                  </TextField>
+                </div>
+                <div className="space-y-1.5">
+                  <Label className="text-sm font-medium">注册状态</Label>
+                  <Select
+                    fullWidth
+                    selectedKey={editForm.registrationStatus}
+                    onSelectionChange={(key) =>
+                      setEditForm((f) => ({
+                        ...f,
+                        registrationStatus: String(key) as EditForm["registrationStatus"],
+                      }))
+                    }
+                  >
+                    <Select.Trigger>
+                      <Select.Value />
+                      <Select.Indicator />
+                    </Select.Trigger>
+                    <Select.Popover>
+                      <ListBox>
+                        <ListBox.Item id="Accepted">Accepted</ListBox.Item>
+                        <ListBox.Item id="Pending">Pending</ListBox.Item>
+                        <ListBox.Item id="Rejected">Rejected</ListBox.Item>
+                      </ListBox>
+                    </Select.Popover>
+                  </Select>
+                </div>
+                <TextField fullWidth>
+                  <Label className="text-sm font-medium">电价（分/kWh）</Label>
+                  <Input
+                    type="number"
+                    min="0"
+                    step="1"
+                    placeholder="0"
+                    value={editForm.feePerKwh}
+                    onChange={(e) => setEditForm((f) => ({ ...f, feePerKwh: e.target.value }))}
+                  />
+                </TextField>
+              </Modal.Body>
+              <Modal.Footer className="flex justify-end gap-2">
+                <Button variant="ghost" onPress={() => setEditOpen(false)}>
+                  取消
+                </Button>
+                <Button isDisabled={editBusy} onPress={handleEditSubmit}>
+                  {editBusy ? <Spinner size="sm" /> : "保存"}
+                </Button>
+              </Modal.Footer>
+            </Modal.Dialog>
+          </Modal.Container>
+        </Modal.Backdrop>
+      </Modal>
+    </div>
+  );
+}

apps/web/app/dashboard/charge-points/page.tsx

@@ -3,6 +3,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Button, Chip, Input, Label, ListBox, Modal, Select, Spinner, Table, TextField } from "@heroui/react";
 import { Plus, Pencil, PlugConnection, TrashBin } from "@gravity-ui/icons";
+import Link from "next/link";
 import { api, type ChargePoint } from "@/lib/api";
 
 
@@ -273,8 +274,13 @@ export default function ChargePointsPage() {
               )}
               {chargePoints.map((cp) => (
                 <Table.Row key={cp.id} id={String(cp.id)}>
-                  <Table.Cell className="font-mono font-medium">
-                    {cp.chargePointIdentifier}
+                  <Table.Cell>
+                    <Link
+                      href={`/dashboard/charge-points/${cp.id}`}
+                      className="font-mono font-medium text-accent hover:underline"
+                    >
+                      {cp.chargePointIdentifier}
+                    </Link>
                   </Table.Cell>
                   <Table.Cell>
                     {cp.chargePointVendor && cp.chargePointModel ? (
@@ -331,7 +337,7 @@ export default function ChargePointsPage() {
                                 statusDotClass[conn.status] ?? "bg-warning"
                               }`}
                             />
-                            <span className="text-xs text-foreground">
+                            <span className="text-xs text-foreground text-nowrap">
                               {statusLabelMap[conn.status] ?? conn.status}
                             </span>
                           </div>