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

apps/csms/src/routes/transactions.ts

@@ -9,6 +9,80 @@ import type { HonoEnv } from "@/types/hono.ts";
 
 const app = new Hono<HonoEnv>();
 
+/**
+ * POST /api/transactions/remote-start
+ * Send RemoteStartTransaction to a charge point.
+ * Non-admin users can only use their own id-tags.
+ */
+app.post("/remote-start", async (c) => {
+  const currentUser = c.get("user");
+  if (!currentUser) return c.json({ error: "Unauthorized" }, 401);
+
+  const db = useDrizzle();
+  const body = await c.req.json<{
+    chargePointIdentifier: string;
+    connectorId: number;
+    idTag: string;
+  }>().catch(() => null);
+
+  if (
+    !body ||
+    !body.chargePointIdentifier?.trim() ||
+    !Number.isInteger(body.connectorId) ||
+    body.connectorId < 1 ||
+    !body.idTag?.trim()
+  ) {
+    return c.json(
+      { error: "chargePointIdentifier, connectorId (>=1), and idTag are required" },
+      400,
+    );
+  }
+
+  // Non-admin: verify idTag belongs to current user and is Accepted
+  if (currentUser.role !== "admin") {
+    const [tag] = await db
+      .select({ status: idTag.status })
+      .from(idTag)
+      .where(and(eq(idTag.idTag, body.idTag.trim()), eq(idTag.userId, currentUser.id)))
+      .limit(1);
+    if (!tag) return c.json({ error: "idTag not found or not authorized" }, 403);
+    if (tag.status !== "Accepted") return c.json({ error: "idTag is not accepted" }, 400);
+  }
+
+  // Verify charge point exists and is Accepted
+  const [cp] = await db
+    .select({ id: chargePoint.id, registrationStatus: chargePoint.registrationStatus })
+    .from(chargePoint)
+    .where(eq(chargePoint.chargePointIdentifier, body.chargePointIdentifier.trim()))
+    .limit(1);
+
+  if (!cp) return c.json({ error: "ChargePoint not found" }, 404);
+  if (cp.registrationStatus !== "Accepted") {
+    return c.json({ error: "ChargePoint is not accepted" }, 400);
+  }
+
+  // Require the charge point to be online
+  const ws = ocppConnections.get(body.chargePointIdentifier.trim());
+  if (!ws) return c.json({ error: "ChargePoint is offline" }, 503);
+
+  const uniqueId = crypto.randomUUID();
+  ws.send(
+    JSON.stringify([
+      OCPP_MESSAGE_TYPE.CALL,
+      uniqueId,
+      "RemoteStartTransaction",
+      { connectorId: body.connectorId, idTag: body.idTag.trim() },
+    ]),
+  );
+
+  console.log(
+    `[OCPP] RemoteStartTransaction cp=${body.chargePointIdentifier} ` +
+      `connector=${body.connectorId} idTag=${body.idTag} user=${currentUser.id}`,
+  );
+
+  return c.json({ success: true });
+});
+
 /** GET /api/transactions?page=1&limit=20&status=active|completed&chargePointId=... */
 app.get("/", async (c) => {
   const page = Math.max(1, Number(c.req.query("page") ?? 1));

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useQuery } from "@tanstack/react-query";
 import {
   Button,
@@ -14,7 +14,15 @@ import {
   Table,
   TextField,
 } from "@heroui/react";
-import { Plus, Pencil, PlugConnection, TrashBin, ArrowRotateRight } from "@gravity-ui/icons";
+import {
+  Plus,
+  Pencil,
+  PlugConnection,
+  TrashBin,
+  ArrowRotateRight,
+  QrCode,
+} from "@gravity-ui/icons";
+import { QRCodeSVG } from "qrcode.react";
 import Link from "next/link";
 import { ScrollFade } from "@/components/scroll-fade";
 import { api, type ChargePoint } from "@/lib/api";
@@ -108,6 +116,7 @@ export default function ChargePointsPage() {
   const [formBusy, setFormBusy] = useState(false);
   const [deleteTarget, setDeleteTarget] = useState<ChargePoint | null>(null);
   const [deleting, setDeleting] = useState(false);
+  const [qrTarget, setQrTarget] = useState<ChargePoint | null>(null);
   const {
     data: chargePoints = [],
     refetch: refetchList,
@@ -183,6 +192,11 @@ export default function ChargePointsPage() {
   const { data: sessionData } = useSession();
   const isAdmin = sessionData?.user?.role === "admin";
 
+  const [qrOrigin, setQrOrigin] = useState("");
+  useEffect(() => {
+    setQrOrigin(window.location.origin);
+  }, []);
+
   return (
     <div className="space-y-4">
       <div className="flex flex-wrap items-start justify-between gap-3">
@@ -319,6 +333,65 @@ export default function ChargePointsPage() {
         </>
       )}
 
+      {/* QR Code Modal */}
+      {isAdmin && (
+        <Modal
+          isOpen={qrTarget !== null}
+          onOpenChange={(open) => {
+            if (!open) setQrTarget(null);
+          }}
+        >
+          <Modal.Backdrop>
+            <Modal.Container scroll="outside">
+              <Modal.Dialog className="sm:max-w-lg">
+                <Modal.CloseTrigger />
+                <Modal.Header>
+                  <Modal.Heading>{qrTarget?.chargePointIdentifier} — 充电二维码</Modal.Heading>
+                </Modal.Header>
+                <Modal.Body className="space-y-4">
+                  <p className="text-sm text-muted">
+                    将以下二维码张贴在对应充电口上，用户扫码后可直接选卡启动充电。
+                  </p>
+                  {qrTarget &&
+                    qrTarget.connectors.filter((c) => c.connectorId > 0).length === 0 && (
+                      <p className="text-sm text-muted">
+                        该充电桩暂无接口信息，请等待设备上线后再尝试。
+                      </p>
+                    )}
+                  <div className="grid gap-4 grid-cols-2 sm:grid-cols-3">
+                    {qrTarget?.connectors
+                      .filter((c) => c.connectorId > 0)
+                      .sort((a, b) => a.connectorId - b.connectorId)
+                      .map((conn) => {
+                        const url = `${qrOrigin}/dashboard/charge?cpId=${qrTarget.id}&connector=${conn.connectorId}`;
+                        return (
+                          <div
+                            key={conn.id}
+                            className="flex flex-col items-center gap-2 rounded-xl border border-border p-3"
+                          >
+                            <p className="text-xs font-medium text-foreground">
+                              接口 #{conn.connectorId}
+                            </p>
+                            <QRCodeSVG value={url} size={120} className="rounded" />
+                            <p className="break-all text-center font-mono text-[9px] text-muted leading-tight">
+                              {url}
+                            </p>
+                          </div>
+                        );
+                      })}
+                  </div>
+                </Modal.Body>
+                <Modal.Footer className="flex justify-end">
+                  <Button variant="ghost" onPress={() => setQrTarget(null)}>
+                    关闭
+                  </Button>
+                </Modal.Footer>
+              </Modal.Dialog>
+            </Modal.Container>
+          </Modal.Backdrop>
+        </Modal>
+      )}
+
       <Table>
         <Table.ScrollContainer>
           <Table.Content aria-label="充电桩列表" className="min-w-200">
@@ -435,6 +508,15 @@ export default function ChargePointsPage() {
                         >
                           <Pencil className="size-4" />
                         </Button>
+                        <Button
+                          isIconOnly
+                          size="sm"
+                          variant="tertiary"
+                          onPress={() => setQrTarget(cp)}
+                          aria-label="查看二维码"
+                        >
+                          <QrCode className="size-4" />
+                        </Button>
                         <Modal>
                           <Button
                             isIconOnly

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>
+  );
+}

apps/web/components/sidebar.tsx

@@ -10,12 +10,17 @@ import {
   Person,
   PlugConnection,
   Thunderbolt,
+  ThunderboltFill,
   Xmark,
   Bars,
 } from "@gravity-ui/icons";
 import SidebarFooter from "@/components/sidebar-footer";
 import { useSession } from "@/lib/auth-client";
 
+const chargeItems = [
+  { href: "/dashboard/charge", label: "立即充电", icon: ThunderboltFill, adminOnly: false },
+];
+
 const navItems = [
   { href: "/dashboard", label: "概览", icon: Thunderbolt, exact: true, adminOnly: false },
   { href: "/dashboard/charge-points", label: "充电桩", icon: PlugConnection, adminOnly: false },
@@ -49,7 +54,32 @@ function NavContent({
 
       {/* Navigation */}
       <nav className="flex flex-1 flex-col gap-0.5 overflow-y-auto p-3">
+        {/* Primary: Charge */}
         <p className="mb-1 px-2 text-[11px] font-semibold uppercase tracking-widest text-muted">
+          充电
+        </p>
+        {chargeItems.map((item) => {
+          const isActive = pathname === item.href || pathname.startsWith(item.href + "/");
+          const Icon = item.icon;
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              onClick={onNavigate}
+              className={[
+                "flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
+                isActive
+                  ? "bg-accent/10 text-accent"
+                  : "text-muted hover:bg-surface-tertiary hover:text-foreground",
+              ].join(" ")}
+            >
+              <Icon className="size-4 shrink-0" />
+              <span>{item.label}</span>
+              {isActive && <span className="ml-auto h-1.5 w-1.5 rounded-full bg-accent" />}
+            </Link>
+          );
+        })}
+        <p className="mb-1 mt-3 px-2 text-[11px] font-semibold uppercase tracking-widest text-muted">
           管理
         </p>
         {navItems

apps/web/lib/api.ts

@@ -208,6 +208,11 @@ export const api = {
       apiFetch<Transaction & { online: boolean }>(`/api/transactions/${id}/stop`, {
         method: "POST",
       }),
+    remoteStart: (data: { chargePointIdentifier: string; connectorId: number; idTag: string }) =>
+      apiFetch<{ success: true }>("/api/transactions/remote-start", {
+        method: "POST",
+        body: JSON.stringify(data),
+      }),
     delete: (id: number) =>
       apiFetch<{ success: true }>(`/api/transactions/${id}`, { method: "DELETE" }),
   },

apps/web/package.json

@@ -13,8 +13,10 @@
     "@heroui/styles": "3.0.0-beta.8",
     "@internationalized/date": "^3.12.0",
     "@tanstack/react-query": "catalog:",
+    "@types/qrcode": "^1.5.6",
     "better-auth": "catalog:",
     "next": "16.1.6",
+    "qrcode.react": "^4.2.0",
     "react": "19.2.3",
     "react-dom": "19.2.3"
   },