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

README.md

@@ -6,6 +6,21 @@ _这是一个毕业设计项目，旨在尝试实现一个完整的电动汽车
 
 Helios EVCS 是一个全栈解决方案，用于管理和监控电动汽车充电基础设施。项目包含 CSMS（充电管理系统）的前端应用和后端服务。并设计了一个基于 ESP32 的，可演示用的充电桩终端固件和 PCB 设计。
 
+## 已知问题
+
+在设计实践的过程中，目前已发现硬件设计存在下列问题，未来可能会修复，也可能不会。现在进行了软件修补的方案在列表中有说明。如果修复了硬件则会划掉那一项。
+
+### 严重
+
+- [ ] SW3、SW4 两个 CC 模拟开关在 PCB 布局上放反了，目前在引脚定义中对调了两个 IO。
+- [ ] SW3、SW4 没有绿波电龙，在当前电磁环境下出现了强烈的干扰，目前在固件中加了积分滤波算法来稳定开关状态。
+- [ ] KEY1、KEY2 连接的 Input Only GPIO，错误地设计为低电平有效，同时硬件上没有上拉电阻，所以两个按钮完全无效。软件无法解决这个问题，因此调整了刷卡充电的逻辑。
+
+### 优化
+
+- [ ] IM1281C 的两根负载线如采用单芯铜线，弯折后很难装配，需要灵活控制下长度，或者在 IM1281C 焊接之前先把先穿好。
+- [ ] 可以设计螺丝孔位来在背部安装亚克力面板，防止误触背面的交流电焊盘。
+
 ## 🏗️ 项目结构
 
 ```

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>

hardware/firmware/src/main.cpp

@@ -930,6 +930,10 @@ void setup()
   strncpy(ocpp_password, p.c_str(), sizeof(ocpp_password) - 1);
   ocpp_password[sizeof(ocpp_password) - 1] = '\0';
 
+  // 禁用 Wi-Fi 自动休眠
+  WiFi.setSleep(false);
+  WiFi.setAutoReconnect(true);
+
   WiFiManager wm;
   wm.setSaveConfigCallback(saveConfigCallback);
   wm.setSaveParamsCallback(saveConfigCallback);