feat(web): 充电桩二维码支持下载导出

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

@@ -32,6 +32,7 @@ import { ScrollFade } from "@/components/scroll-fade";
 import { api, type ChargePoint, type ChargePointCreated } from "@/lib/api";
 import { useSession } from "@/lib/auth-client";
 import dayjs from "@/lib/dayjs";
+import { Download } from "lucide-react";
 
 const statusLabelMap: Record<string, string> = {
   Available: "空闲中",
@@ -128,6 +129,7 @@ export default function ChargePointsPage() {
   const [qrTarget, setQrTarget] = useState<ChargePoint | null>(null);
   const [createdCp, setCreatedCp] = useState<ChargePointCreated | null>(null);
   const [copied, setCopied] = useState(false);
+  const [downloadingQrKey, setDownloadingQrKey] = useState<string | null>(null);
   const {
     data: chargePoints = [],
     refetch: refetchList,
@@ -216,6 +218,66 @@ export default function ChargePointsPage() {
     });
   };
 
+  const handleDownloadConnectorQr = async (
+    chargePointId: string | number,
+    connectorId: number,
+    chargePointIdentifier: string,
+  ) => {
+    const svgId = `connector-qr-${chargePointId}-${connectorId}`;
+    const key = `${chargePointId}-${connectorId}`;
+    const svg = document.getElementById(svgId) as SVGSVGElement | null;
+    if (!svg) return;
+
+    setDownloadingQrKey(key);
+    try {
+      const serializer = new XMLSerializer();
+      const svgText = serializer.serializeToString(svg);
+      const svgBlob = new Blob([svgText], { type: "image/svg+xml;charset=utf-8" });
+      const svgUrl = URL.createObjectURL(svgBlob);
+
+      const image = await new Promise<HTMLImageElement>((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => resolve(img);
+        img.onerror = () => reject(new Error("二维码导出失败"));
+        img.src = svgUrl;
+      });
+
+      const canvas = document.createElement("canvas");
+      canvas.width = 1024;
+      canvas.height = 1024;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) throw new Error("二维码导出失败");
+
+      ctx.fillStyle = "#ffffff";
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
+
+      const pngBlob = await new Promise<Blob>((resolve, reject) => {
+        canvas.toBlob((blob) => {
+          if (blob) resolve(blob);
+          else reject(new Error("二维码导出失败"));
+        }, "image/png");
+      });
+
+      const fileUrl = URL.createObjectURL(pngBlob);
+      const link = document.createElement("a");
+      const safeIdentifier = String(chargePointIdentifier).replace(/[^a-zA-Z0-9_-]/g, "");
+      const safeConnectorId = String(connectorId).replace(/[^a-zA-Z0-9_-]/g, "");
+
+      link.href = fileUrl;
+      link.download = `${safeIdentifier}-connector-${safeConnectorId}.png`;
+      link.rel = "noopener";
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+
+      URL.revokeObjectURL(svgUrl);
+      URL.revokeObjectURL(fileUrl);
+    } finally {
+      setDownloadingQrKey(null);
+    }
+  };
+
   const { data: sessionData } = useSession();
   const isAdmin = sessionData?.user?.role === "admin";
 
@@ -429,15 +491,50 @@ export default function ChargePointsPage() {
                       .sort((a, b) => a.connectorId - b.connectorId)
                       .map((conn) => {
                         const url = `${qrOrigin}/dashboard/charge?cpId=${qrTarget.id}&connector=${conn.connectorId}`;
+                        const downloadKey = `${qrTarget.id}-${conn.connectorId}`;
                         return (
                           <div
                             key={conn.id}
-                            className="flex flex-col items-center gap-2 rounded-xl border border-border p-3"
+                            className="flex flex-col items-center gap-2 rounded-xl border border-border px-2 py-1"
                           >
+                            <div className="flex w-full items-center justify-between gap-2">
                               <p className="text-xs font-medium text-foreground">
                                 接口 #{conn.connectorId}
                               </p>
-                            <QRCodeSVG value={url} size={120} className="rounded" />
+                              <Tooltip delay={0}>
+                                <Tooltip.Content>下载二维码</Tooltip.Content>
+                                <Tooltip.Trigger>
+                                  <Button
+                                    isIconOnly
+                                    size="sm"
+                                    variant="ghost"
+                                    isDisabled={downloadingQrKey === downloadKey}
+                                    onPress={() =>
+                                      handleDownloadConnectorQr(
+                                        qrTarget.id,
+                                        conn.connectorId,
+                                        qrTarget.chargePointIdentifier,
+                                      )
+                                    }
+                                    aria-label={`下载接口 #${conn.connectorId} 二维码`}
+                                    className="h-6 min-h-6 w-6 min-w-6"
+                                  >
+                                    {downloadingQrKey === downloadKey ? (
+                                      <Spinner size="sm" />
+                                    ) : (
+                                      <Download className="size-3.5" />
+                                    )}
+                                  </Button>
+                                </Tooltip.Trigger>
+                              </Tooltip>
+                            </div>
+                            <QRCodeSVG
+                              id={`connector-qr-${qrTarget.id}-${conn.connectorId}`}
+                              value={url}
+                              size={120}
+                              className="rounded"
+                              bgColor="#ffffff"
+                            />
                             <p className="break-all text-center font-mono text-[9px] text-muted leading-tight">
                               {url}
                             </p>
@@ -589,7 +686,11 @@ export default function ChargePointsPage() {
                           <div className="flex items-center gap-2">
                             <span
                               className={`size-2 shrink-0 rounded-full ${
-                              online ? "bg-success" : commandChannelUnavailable ? "bg-warning" : "bg-gray-300"
+                                online
+                                  ? "bg-success"
+                                  : commandChannelUnavailable
+                                    ? "bg-warning"
+                                    : "bg-gray-300"
                               }`}
                             />
                             <div className="flex flex-col">
@@ -608,7 +709,13 @@ export default function ChargePointsPage() {
                           </div>
                         </Tooltip.Trigger>
                         <Tooltip.Content placement="start">
-                        {online ? "在线" : commandChannelUnavailable ? "通道异常" : cp.lastHeartbeatAt ? "离线" : "从未连接"}
+                          {online
+                            ? "在线"
+                            : commandChannelUnavailable
+                              ? "通道异常"
+                              : cp.lastHeartbeatAt
+                                ? "离线"
+                                : "从未连接"}
                         </Tooltip.Content>
                       </Tooltip>
                     </Table.Cell>