feat(web): add remote start transaction feature and QR code scanning for charging

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

@@ -0,0 +1,627 @@
+"use client";
+
+import { useState, useEffect, useRef, Fragment } from "react";
+import { useSearchParams } from "next/navigation";
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { Button, Chip, Modal, Spinner } from "@heroui/react";
+import {
+  ThunderboltFill,
+  PlugConnection,
+  CreditCard,
+  Check,
+  QrCode,
+  Xmark,
+} from "@gravity-ui/icons";
+import { api } from "@/lib/api";
+
+// ── Status maps (same as charge-points page) ────────────────────────────────
+
+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-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",
+};
+
+// ── Step indicator ───────────────────────────────────────────────────────────
+
+function StepBar({ step, onGoBack }: { step: number; onGoBack: (target: number) => void }) {
+  const labels = ["选择充电桩", "选择充电口", "选择储值卡"];
+  return (
+    <div className="flex w-full items-start">
+      {labels.map((label, i) => {
+        const idx = i + 1;
+        const isActive = step === idx;
+        const isDone = idx < step;
+        const isLast = i === labels.length - 1;
+        return (
+          <Fragment key={i}>
+            <button
+              type="button"
+              onClick={() => isDone && onGoBack(idx)}
+              disabled={!isDone}
+              className={[
+                "flex shrink-0 flex-col items-center gap-2",
+                isDone ? "cursor-pointer" : "cursor-default",
+              ].join(" ")}
+            >
+              <span
+                className={[
+                  "flex size-7 items-center justify-center rounded-full text-xs font-semibold ring-2 ring-offset-2 ring-offset-background transition-all",
+                  isActive
+                    ? "bg-accent text-accent-foreground ring-accent"
+                    : isDone
+                      ? "bg-success text-white ring-success"
+                      : "bg-surface-tertiary text-muted ring-transparent",
+                ].join(" ")}
+              >
+                {isDone ? <Check className="size-3.5" /> : idx}
+              </span>
+              <span
+                className={[
+                  "text-[11px] font-medium leading-none whitespace-nowrap",
+                  isActive ? "text-accent" : isDone ? "text-foreground" : "text-muted",
+                ].join(" ")}
+              >
+                {label}
+              </span>
+            </button>
+            {!isLast && (
+              <div className="flex-1 pt-3.5">
+                <span
+                  className={[
+                    "block h-px w-full transition-colors",
+                    isDone ? "bg-success" : "bg-border",
+                  ].join(" ")}
+                />
+              </div>
+            )}
+          </Fragment>
+        );
+      })}
+    </div>
+  );
+}
+
+// ── QR Scanner ───────────────────────────────────────────────────────────────
+
+type ScannerProps = {
+  onResult: (raw: string) => void;
+  onClose: () => void;
+};
+
+function QrScanner({ onResult, onClose }: ScannerProps) {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const streamRef = useRef<MediaStream | null>(null);
+  const scanningRef = useRef(true);
+  const mountedRef = useRef(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    mountedRef.current = true;
+    scanningRef.current = true;
+    let detector: any = null;
+
+    async function start() {
+      let stream: MediaStream;
+      try {
+        stream = await navigator.mediaDevices.getUserMedia({
+          video: { facingMode: "environment" },
+        });
+      } catch (err: any) {
+        if (mountedRef.current) setError("无法访问摄像头：" + (err?.message ?? "未知错误"));
+        return;
+      }
+
+      if (!mountedRef.current) {
+        stream.getTracks().forEach((t) => t.stop());
+        return;
+      }
+
+      streamRef.current = stream;
+
+      if (videoRef.current) {
+        videoRef.current.srcObject = stream;
+        try {
+          await videoRef.current.play();
+        } catch (err: any) {
+          // AbortError fires when the element is removed mid-play (e.g. Modal animation).
+          // It is not a real error — just bail out silently.
+          if (err?.name === "AbortError") return;
+          if (mountedRef.current) setError("无法播放摄像头画面：" + (err?.message ?? "未知错误"));
+          return;
+        }
+      }
+
+      if (!mountedRef.current) return;
+
+      if (!("BarcodeDetector" in window)) {
+        if (mountedRef.current) setError("当前浏览器不支持实时扫描，请升级至最新版本");
+        return;
+      }
+
+      detector = new (window as any).BarcodeDetector({ formats: ["qr_code"] });
+
+      const scan = async () => {
+        if (!scanningRef.current || !videoRef.current) return;
+        try {
+          const codes: Array<{ rawValue: string }> = await detector.detect(videoRef.current);
+          if (codes.length > 0) {
+            onResult(codes[0].rawValue);
+            return;
+          }
+        } catch {}
+        requestAnimationFrame(scan);
+      };
+      requestAnimationFrame(scan);
+    }
+
+    start();
+
+    return () => {
+      mountedRef.current = false;
+      scanningRef.current = false;
+      streamRef.current?.getTracks().forEach((t) => t.stop());
+      streamRef.current = null;
+    };
+  }, [onResult]);
+
+  return (
+    <div className="relative h-full w-full overflow-hidden bg-black">
+      {error ? (
+        <div className="flex h-full flex-col items-center justify-center gap-3 p-6 text-center">
+          <p className="text-sm text-danger">{error}</p>
+        </div>
+      ) : (
+        <>
+          {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
+          <video ref={videoRef} className="h-full w-full object-cover" playsInline muted />
+          {/* Aim overlay */}
+          <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+            <div className="size-56 rounded-2xl border-2 border-white/80 shadow-[0_0_0_9999px_rgba(0,0,0,0.45)]" />
+          </div>
+          <p className="absolute bottom-8 left-0 right-0 text-center text-sm text-white/80">
+            将二维码对准框内
+          </p>
+        </>
+      )}
+      {/* Close button — overlaid top-right */}
+      <button
+        type="button"
+        onClick={onClose}
+        className="absolute right-4 top-4 flex size-9 items-center justify-center rounded-full bg-black/50 text-white backdrop-blur-sm hover:bg-black/70"
+        aria-label="关闭扫描"
+      >
+        <Xmark className="size-5" />
+      </button>
+    </div>
+  );
+}
+
+// ── Main Page ────────────────────────────────────────────────────────────────
+
+export default function ChargePage() {
+  const searchParams = useSearchParams();
+
+  const [step, setStep] = useState(1);
+  const [selectedCpId, setSelectedCpId] = useState<string | null>(null);
+  const [selectedConnectorId, setSelectedConnectorId] = useState<number | null>(null);
+  const [selectedIdTag, setSelectedIdTag] = useState<string | null>(null);
+  const [showScanner, setShowScanner] = useState(false);
+  const [scanError, setScanError] = useState<string | null>(null);
+  const [startResult, setStartResult] = useState<"success" | "error" | null>(null);
+  const [startError, setStartError] = useState<string | null>(null);
+
+  // Detect mobile
+  const [isMobile, setIsMobile] = useState(false);
+  useEffect(() => {
+    setIsMobile(/Mobi|Android|iPhone|iPad/i.test(navigator.userAgent));
+  }, []);
+
+  // Pre-fill from URL params (QR code redirect)
+  useEffect(() => {
+    const cpId = searchParams.get("cpId");
+    const connector = searchParams.get("connector");
+    if (cpId) {
+      setSelectedCpId(cpId);
+      if (connector && !Number.isNaN(Number(connector))) {
+        setSelectedConnectorId(Number(connector));
+        setStep(3);
+      } else {
+        setStep(2);
+      }
+    }
+  }, [searchParams]);
+
+  const { data: chargePoints = [], isLoading: cpLoading } = useQuery({
+    queryKey: ["chargePoints"],
+    queryFn: () => api.chargePoints.list().catch(() => []),
+    refetchInterval: 5_000,
+  });
+
+  const { data: idTags = [], isLoading: tagsLoading } = useQuery({
+    queryKey: ["idTags"],
+    queryFn: () => api.idTags.list().catch(() => []),
+  });
+
+  const selectedCp = chargePoints.find((cp) => cp.id === selectedCpId) ?? null;
+  const myTags = idTags.filter((t) => t.status === "Accepted");
+
+  const startMutation = useMutation({
+    mutationFn: async () => {
+      if (!selectedCp || selectedConnectorId === null || !selectedIdTag) {
+        throw new Error("请先完成所有选择");
+      }
+      return api.transactions.remoteStart({
+        chargePointIdentifier: selectedCp.chargePointIdentifier,
+        connectorId: selectedConnectorId,
+        idTag: selectedIdTag,
+      });
+    },
+    onSuccess: () => {
+      setStartResult("success");
+    },
+    onError: (err: Error) => {
+      setStartResult("error");
+      const msg = err.message ?? "";
+      if (msg.includes("offline")) setStartError("充电桩当前不在线，请稍后再试");
+      else if (msg.includes("not accepted")) setStartError("充电桩未启用，请联系管理员");
+      else if (msg.includes("idTag")) setStartError("储值卡无效或无权使用");
+      else setStartError("启动失败：" + msg);
+    },
+  });
+
+  function resetAll() {
+    setStep(1);
+    setSelectedCpId(null);
+    setSelectedConnectorId(null);
+    setSelectedIdTag(null);
+    setStartResult(null);
+    setStartError(null);
+  }
+
+  function handleScanResult(raw: string) {
+    setShowScanner(false);
+    setScanError(null);
+    try {
+      // Support both helios:// scheme and https:// web URLs
+      const url = new URL(raw);
+      const cpId = url.searchParams.get("cpId");
+      const connector = url.searchParams.get("connector");
+      if (!cpId) {
+        setScanError("二维码内容无效，缺少充电桩信息");
+        return;
+      }
+      setSelectedCpId(cpId);
+      if (connector && !Number.isNaN(Number(connector))) {
+        setSelectedConnectorId(Number(connector));
+        setStep(3);
+      } else {
+        setSelectedConnectorId(null);
+        setStep(2);
+      }
+    } catch {
+      setScanError("二维码内容格式错误");
+    }
+  }
+
+  // ── Success screen ─────────────────────────────────────────────────────────
+  if (startResult === "success") {
+    return (
+      <div className="flex flex-col items-center justify-center gap-6 py-20 text-center">
+        <div className="flex size-16 items-center justify-center rounded-full bg-success/10">
+          <Check className="size-8 text-success" />
+        </div>
+        <div>
+          <h2 className="text-xl font-semibold text-foreground">充电指令已发送</h2>
+          <p className="mt-1.5 text-sm text-muted">
+            充电桩正在响应，充电将自动开始
+            <br />
+            你可以在"充电记录"中查看进度
+          </p>
+        </div>
+        <Button onPress={resetAll}>再次充电</Button>
+      </div>
+    );
+  }
+
+  // ── Main UI ────────────────────────────────────────────────────────────────
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div>
+          <h1 className="text-xl font-semibold text-foreground">立即充电</h1>
+          <p className="mt-0.5 text-sm text-muted">选择充电桩和储值卡，远程启动充电</p>
+        </div>
+
+        {/* QR scan button — mobile only */}
+        {isMobile && (
+          <Button
+            size="sm"
+            variant="secondary"
+            onPress={() => {
+              setScanError(null);
+              setShowScanner(true);
+            }}
+            isDisabled={showScanner}
+          >
+            <QrCode className="size-4" />
+            扫码充电
+          </Button>
+        )}
+      </div>
+
+      {/* QR Scanner Modal */}
+      <Modal
+        isOpen={showScanner}
+        onOpenChange={(open) => {
+          if (!open) setShowScanner(false);
+        }}
+      >
+        <Modal.Backdrop>
+          <Modal.Container scroll="outside" size="full">
+            <Modal.Dialog className="h-full overflow-hidden p-0">
+              <QrScanner onResult={handleScanResult} onClose={() => setShowScanner(false)} />
+            </Modal.Dialog>
+          </Modal.Container>
+        </Modal.Backdrop>
+      </Modal>
+
+      {scanError && <p className="text-sm text-danger">{scanError}</p>}
+
+      {/* Step bar */}
+      <StepBar step={step} onGoBack={(t) => setStep(t)} />
+
+      {/* ── Step 1: Select charge point ──────────────────────────────── */}
+      {step === 1 && (
+        <div className="space-y-3">
+          {cpLoading ? (
+            <div className="flex justify-center py-12">
+              <Spinner />
+            </div>
+          ) : chargePoints.filter((cp) => cp.registrationStatus === "Accepted").length === 0 ? (
+            <div className="rounded-xl border border-border px-6 py-12 text-center">
+              <PlugConnection className="mx-auto mb-2 size-8 text-muted" />
+              <p className="text-sm text-muted">暂无可用充电桩</p>
+            </div>
+          ) : (
+            <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
+              {chargePoints
+                .filter((cp) => cp.registrationStatus === "Accepted")
+                .map((cp) => {
+                  const online =
+                    !!cp.lastHeartbeatAt &&
+                    Date.now() - new Date(cp.lastHeartbeatAt).getTime() < 120_000;
+                  const availableCount = cp.connectors.filter(
+                    (c) => c.status === "Available",
+                  ).length;
+                  const disabled = !online || availableCount === 0;
+                  return (
+                    <button
+                      key={cp.id}
+                      type="button"
+                      disabled={disabled}
+                      onClick={() => {
+                        setSelectedCpId(cp.id);
+                        setSelectedConnectorId(null);
+                        setStep(2);
+                      }}
+                      className={[
+                        "flex flex-col gap-2.5 rounded-xl border p-4 text-left transition-all",
+                        disabled
+                          ? "cursor-not-allowed opacity-50 border-border"
+                          : "cursor-pointer border-border hover:border-accent hover:bg-accent/5",
+                        selectedCpId === cp.id ? "border-accent bg-accent/10" : "",
+                      ].join(" ")}
+                    >
+                      <div className="flex items-center justify-between gap-2">
+                        <span className="font-medium text-foreground truncate">
+                          {cp.chargePointIdentifier}
+                        </span>
+                        <Chip size="sm" color={online ? "success" : "default"} variant="soft">
+                          {online ? "在线" : "离线"}
+                        </Chip>
+                      </div>
+                      {(cp.chargePointVendor || cp.chargePointModel) && (
+                        <span className="text-xs text-muted">
+                          {[cp.chargePointVendor, cp.chargePointModel].filter(Boolean).join(" · ")}
+                        </span>
+                      )}
+                      <div className="flex flex-wrap items-center gap-2">
+                        <span className="flex items-center gap-1 text-xs text-muted">
+                          <PlugConnection className="size-3" />
+                          {availableCount}/{cp.connectors.length} 接口空闲
+                        </span>
+                        {cp.feePerKwh > 0 && (
+                          <span className="text-xs text-muted">
+                            · ¥{(cp.feePerKwh / 100).toFixed(2)}/kWh
+                          </span>
+                        )}
+                        {cp.feePerKwh === 0 && <span className="text-xs text-success">· 免费</span>}
+                      </div>
+                    </button>
+                  );
+                })}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* ── Step 2: Select connector ──────────────────────────────────── */}
+      {step === 2 && (
+        <div className="space-y-3">
+          {selectedCp && (
+            <p className="text-sm text-muted">
+              充电桩：
+              <span className="font-medium text-foreground">
+                {selectedCp.chargePointIdentifier}
+              </span>
+            </p>
+          )}
+
+          {selectedCp && selectedCp.connectors.filter((c) => c.connectorId > 0).length === 0 ? (
+            <div className="rounded-xl border border-border px-6 py-12 text-center">
+              <PlugConnection className="mx-auto mb-2 size-8 text-muted" />
+              <p className="text-sm text-muted">该充电桩暂无接口信息</p>
+            </div>
+          ) : (
+            <div className="grid gap-2 grid-cols-2 sm:grid-cols-3 lg:grid-cols-4">
+              {selectedCp?.connectors
+                .filter((c) => c.connectorId > 0)
+                .sort((a, b) => a.connectorId - b.connectorId)
+                .map((conn) => {
+                  const available = conn.status === "Available";
+                  return (
+                    <button
+                      key={conn.id}
+                      type="button"
+                      disabled={!available}
+                      onClick={() => {
+                        if (available) {
+                          setSelectedConnectorId(conn.connectorId);
+                          setStep(3);
+                        }
+                      }}
+                      className={[
+                        "flex flex-col gap-2 rounded-xl border p-4 text-left transition-all",
+                        !available
+                          ? "cursor-not-allowed opacity-50 border-border"
+                          : "cursor-pointer border-border hover:border-accent hover:bg-accent/5",
+                        selectedConnectorId === conn.connectorId
+                          ? "border-accent bg-accent/10"
+                          : "",
+                      ].join(" ")}
+                    >
+                      <div className="flex items-center justify-between">
+                        <span className="font-medium text-foreground">
+                          接口 #{conn.connectorId}
+                        </span>
+                        <span
+                          className={`size-2 rounded-full ${statusDotClass[conn.status] ?? "bg-warning"}`}
+                        />
+                      </div>
+                      <span className="text-xs text-muted">
+                        {statusLabelMap[conn.status] ?? conn.status}
+                      </span>
+                    </button>
+                  );
+                })}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* ── Step 3: Select ID tag + start ────────────────────────────── */}
+      {step === 3 && (
+        <div className="space-y-5">
+          <div className="flex flex-wrap gap-3 text-sm text-muted">
+            {selectedCp && (
+              <span>
+                充电桩：
+                <span className="font-medium text-foreground">
+                  {selectedCp.chargePointIdentifier}
+                </span>
+              </span>
+            )}
+            {selectedConnectorId !== null && (
+              <span>
+                接口：
+                <span className="font-medium text-foreground">#{selectedConnectorId}</span>
+              </span>
+            )}
+          </div>
+
+          {tagsLoading ? (
+            <div className="flex justify-center py-12">
+              <Spinner />
+            </div>
+          ) : myTags.length === 0 ? (
+            <div className="rounded-xl border border-border px-6 py-12 text-center">
+              <CreditCard className="mx-auto mb-2 size-8 text-muted" />
+              <p className="text-sm text-muted">你还没有可用的储值卡</p>
+              <p className="mt-1 text-xs text-muted">请前往"储值卡"页面领取或添加</p>
+            </div>
+          ) : (
+            <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
+              {myTags.map((tag) => (
+                <button
+                  key={tag.idTag}
+                  type="button"
+                  onClick={() => setSelectedIdTag(tag.idTag)}
+                  className={[
+                    "flex flex-col gap-1.5 rounded-xl border p-4 text-left transition-all cursor-pointer",
+                    "border-border hover:border-accent hover:bg-accent/5",
+                    selectedIdTag === tag.idTag ? "border-accent bg-accent/10" : "",
+                  ].join(" ")}
+                >
+                  <div className="flex items-center justify-between">
+                    <span className="font-mono text-sm font-medium text-foreground">
+                      {tag.idTag}
+                    </span>
+                    {selectedIdTag === tag.idTag && (
+                      <Check className="size-4 shrink-0 text-accent" />
+                    )}
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span className="text-xs text-muted">余额</span>
+                    <span className="text-xs font-medium text-foreground">
+                      ¥{(tag.balance / 100).toFixed(2)}
+                    </span>
+                  </div>
+                </button>
+              ))}
+            </div>
+          )}
+
+          {startResult === "error" && (
+            <p className="text-sm text-danger">{startError ?? "启动失败，请重试"}</p>
+          )}
+
+          <div className="flex gap-3">
+            <Button
+              variant="secondary"
+              onPress={() => {
+                setStep(2);
+                setStartResult(null);
+                setStartError(null);
+              }}
+            >
+              返回
+            </Button>
+            <Button
+              isDisabled={!selectedIdTag || startMutation.isPending}
+              onPress={() => startMutation.mutate()}
+            >
+              {startMutation.isPending ? (
+                <Spinner size="sm" />
+              ) : (
+                <ThunderboltFill className="size-4" />
+              )}
+              {startMutation.isPending ? "发送中…" : "启动充电"}
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}