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/csms/src/index.ts

@@ -91,9 +91,18 @@ app.get(
   '/ocpp/:chargePointId',
   async (c, next) => {
     const chargePointId = c.req.param('chargePointId')
+    const connInfo = getConnInfo(c)
+    const remoteAddr = connInfo.remote.address
     const authHeader = c.req.header('Authorization')
 
+    console.info(
+      `[OCPP][AUTH][BEGIN] cp=${chargePointId} remote=${remoteAddr} hasAuthHeader=${Boolean(authHeader)}`,
+    )
+
     if (!authHeader?.startsWith('Basic ')) {
+      console.warn(
+        `[OCPP][AUTH][REJECT] cp=${chargePointId} remote=${remoteAddr} reason=missing_or_invalid_scheme`,
+      )
       c.header('WWW-Authenticate', 'Basic realm="OCPP"')
       return c.json({ error: 'Unauthorized' }, 401)
     }
@@ -106,10 +115,16 @@ app.get(
       id = decoded.slice(0, colonIdx)
       password = decoded.slice(colonIdx + 1)
     } catch {
+      console.warn(
+        `[OCPP][AUTH][REJECT] cp=${chargePointId} remote=${remoteAddr} reason=invalid_authorization_header`,
+      )
       return c.json({ error: 'Invalid Authorization header' }, 400)
     }
 
     if (id !== chargePointId) {
+      console.warn(
+        `[OCPP][AUTH][REJECT] cp=${chargePointId} remote=${remoteAddr} reason=identity_mismatch authId=${id}`,
+      )
       return c.json({ error: 'Unauthorized' }, 401)
     }
 
@@ -121,9 +136,14 @@ app.get(
       .limit(1)
 
     if (!cp?.passwordHash || !(await verifyOcppPassword(password, cp.passwordHash))) {
+      console.warn(
+        `[OCPP][AUTH][REJECT] cp=${chargePointId} remote=${remoteAddr} reason=bad_credentials_or_missing_cp`,
+      )
       return c.json({ error: 'Unauthorized' }, 401)
     }
 
+    console.info(`[OCPP][AUTH][PASS] cp=${chargePointId} remote=${remoteAddr}`)
+
     await next()
   },
   upgradeWebSocket((c) => {

apps/csms/src/ocpp/actions/authorize.ts

@@ -9,6 +9,11 @@ import type {
   OcppConnectionContext,
 } from "../types.ts";
 
+function shortIdTag(idTagValue: string): string {
+  if (idTagValue.length <= 8) return idTagValue;
+  return `${idTagValue.slice(0, 4)}...${idTagValue.slice(-4)}`;
+}
+
 /**
  * Shared helper — resolves idTagInfo from the database.
  * Used by Authorize, StartTransaction, and StopTransaction.
@@ -56,9 +61,14 @@ export async function resolveIdTagInfo(
 
 export async function handleAuthorize(
   payload: AuthorizeRequest,
-  _ctx: OcppConnectionContext,
+  ctx: OcppConnectionContext,
 ): Promise<AuthorizeResponse> {
+  console.info(
+    `[OCPP][ACTION][Authorize][BEGIN] cp=${ctx.chargePointIdentifier} idTag=${shortIdTag(payload.idTag)}`,
+  );
   const idTagInfo = await resolveIdTagInfo(payload.idTag);
-  console.log(`[OCPP] Authorize idTag=${payload.idTag} -> ${idTagInfo.status}`);
+  console.info(
+    `[OCPP][ACTION][Authorize][END] cp=${ctx.chargePointIdentifier} idTag=${shortIdTag(payload.idTag)} status=${idTagInfo.status}`,
+  );
   return { idTagInfo };
 }

apps/csms/src/ocpp/actions/boot-notification.ts

@@ -12,6 +12,10 @@ export async function handleBootNotification(
   payload: BootNotificationRequest,
   ctx: OcppConnectionContext,
 ): Promise<BootNotificationResponse> {
+  console.info(
+    `[OCPP][ACTION][BootNotification][BEGIN] cp=${ctx.chargePointIdentifier} vendor=${payload.chargePointVendor} model=${payload.chargePointModel} fw=${payload.firmwareVersion ?? 'n/a'}`,
+  )
+
   const db = useDrizzle()
   const { heartbeatInterval } = await getOcpp16jSettings()
 
@@ -57,7 +61,9 @@ export async function handleBootNotification(
   const status = cp.registrationStatus
   ctx.isRegistered = status === 'Accepted'
 
-  console.log(`[OCPP] BootNotification ${ctx.chargePointIdentifier} status=${status}`)
+  console.info(
+    `[OCPP][ACTION][BootNotification][END] cp=${ctx.chargePointIdentifier} status=${status} heartbeatInterval=${heartbeatInterval}`,
+  )
 
   return {
     currentTime: dayjs().toISOString(),

apps/csms/src/ocpp/actions/heartbeat.ts

@@ -12,18 +12,25 @@ export async function handleHeartbeat(
   _payload: HeartbeatRequest,
   ctx: OcppConnectionContext,
 ): Promise<HeartbeatResponse> {
+  const now = dayjs()
+  console.info(`[OCPP][ACTION][Heartbeat][BEGIN] cp=${ctx.chargePointIdentifier}`)
+
   const db = useDrizzle()
 
   await db
     .update(chargePoint)
     .set({
-      lastHeartbeatAt: dayjs().toDate(),
+      lastHeartbeatAt: now.toDate(),
       transportStatus: 'online',
-      updatedAt: dayjs().toDate(),
+      updatedAt: now.toDate(),
     })
     .where(eq(chargePoint.chargePointIdentifier, ctx.chargePointIdentifier))
 
+  console.info(
+    `[OCPP][ACTION][Heartbeat][END] cp=${ctx.chargePointIdentifier} currentTime=${now.toISOString()}`,
+  )
+
   return {
-    currentTime: dayjs().toISOString(),
+    currentTime: now.toISOString(),
   }
 }

apps/csms/src/ocpp/actions/meter-values.ts

@@ -8,6 +8,10 @@ export async function handleMeterValues(
   payload: MeterValuesRequest,
   ctx: OcppConnectionContext,
 ): Promise<MeterValuesResponse> {
+  console.info(
+    `[OCPP][ACTION][MeterValues][BEGIN] cp=${ctx.chargePointIdentifier} connector=${payload.connectorId} txId=${payload.transactionId ?? 'n/a'} meterValueCount=${payload.meterValue.length}`,
+  );
+
   const db = useDrizzle();
 
   const [cp] = await db
@@ -48,5 +52,9 @@ export async function handleMeterValues(
     await db.insert(meterValue).values(records);
   }
 
+  console.info(
+    `[OCPP][ACTION][MeterValues][END] cp=${ctx.chargePointIdentifier} connector=${payload.connectorId} txId=${payload.transactionId ?? 'n/a'} inserted=${records.length}`,
+  );
+
   return {};
 }

apps/csms/src/ocpp/actions/start-transaction.ts

@@ -9,10 +9,19 @@ import type {
 } from "../types.ts";
 import { resolveIdTagInfo } from "./authorize.ts";
 
+function shortIdTag(idTagValue: string): string {
+  if (idTagValue.length <= 8) return idTagValue;
+  return `${idTagValue.slice(0, 4)}...${idTagValue.slice(-4)}`;
+}
+
 export async function handleStartTransaction(
   payload: StartTransactionRequest,
   ctx: OcppConnectionContext,
 ): Promise<StartTransactionResponse> {
+  console.info(
+    `[OCPP][ACTION][StartTransaction][BEGIN] cp=${ctx.chargePointIdentifier} connector=${payload.connectorId} idTag=${shortIdTag(payload.idTag)} meterStart=${payload.meterStart} timestamp=${payload.timestamp}`,
+  );
+
   const db = useDrizzle();
 
   // Resolve idTag authorization
@@ -78,8 +87,8 @@ export async function handleStartTransaction(
   }
 
   console.log(
-    `[OCPP] StartTransaction cp=${ctx.chargePointIdentifier} connector=${payload.connectorId} ` +
+    `[OCPP][ACTION][StartTransaction][END] cp=${ctx.chargePointIdentifier} connector=${payload.connectorId} ` +
-      `idTag=${payload.idTag} status=${idTagInfo.status} txId=${tx.id}`,
+      `idTag=${shortIdTag(payload.idTag)} status=${idTagInfo.status} txId=${tx.id} rejected=${rejected}`,
   );
 
   return { transactionId: tx.id, idTagInfo };

apps/csms/src/ocpp/actions/status-notification.ts

@@ -42,6 +42,10 @@ export async function handleStatusNotification(
   payload: StatusNotificationRequest,
   ctx: OcppConnectionContext,
 ): Promise<StatusNotificationResponse> {
+  console.info(
+    `[OCPP][ACTION][StatusNotification][BEGIN] cp=${ctx.chargePointIdentifier} connector=${payload.connectorId} status=${payload.status} errorCode=${payload.errorCode}`,
+  )
+
   const db = useDrizzle()
 
   // Retrieve the internal charge point id
@@ -52,6 +56,9 @@ export async function handleStatusNotification(
     .limit(1)
 
   if (!cp) {
+    console.error(
+      `[OCPP][ACTION][StatusNotification][ERROR] cp=${ctx.chargePointIdentifier} reason=charge_point_not_found`,
+    )
     throw new Error(`ChargePoint not found: ${ctx.chargePointIdentifier}`)
   }
 
@@ -101,5 +108,9 @@ export async function handleStatusNotification(
     })
   }
 
+  console.info(
+    `[OCPP][ACTION][StatusNotification][END] cp=${ctx.chargePointIdentifier} connector=${payload.connectorId} status=${connStatus} errorCode=${connErrorCode} historySaved=${Boolean(upsertedConnector)}`,
+  )
+
   return {}
 }

apps/csms/src/ocpp/actions/stop-transaction.ts

@@ -14,8 +14,12 @@ import { resolveIdTagInfo } from "./authorize.ts";
 
 export async function handleStopTransaction(
   payload: StopTransactionRequest,
-  _ctx: OcppConnectionContext,
+  ctx: OcppConnectionContext,
 ): Promise<StopTransactionResponse> {
+  console.info(
+    `[OCPP][ACTION][StopTransaction][BEGIN] cp=${ctx.chargePointIdentifier} txId=${payload.transactionId} meterStop=${payload.meterStop} reason=${payload.reason ?? 'none'} timestamp=${payload.timestamp}`,
+  );
+
   const db = useDrizzle();
 
   // Update the transaction record
@@ -37,7 +41,9 @@ export async function handleStopTransaction(
     .returning();
 
   if (!tx) {
-    console.warn(`[OCPP] StopTransaction: transaction ${payload.transactionId} not found`);
+    console.warn(
+      `[OCPP][ACTION][StopTransaction][MISS] cp=${ctx.chargePointIdentifier} txId=${payload.transactionId} reason=transaction_not_found`,
+    );
     return {};
   }
 
@@ -182,7 +188,7 @@ export async function handleStopTransaction(
   }
 
   console.log(
-    `[OCPP] StopTransaction txId=${payload.transactionId} ` +
+    `[OCPP][ACTION][StopTransaction][END] cp=${ctx.chargePointIdentifier} txId=${payload.transactionId} ` +
       `reason=${payload.reason ?? "none"} energyWh=${energyWh} ` +
       `feeFen=${feeFen} (elec=${electricityFen ?? "flat"} svc=${serviceFeeFen ?? "-"})`,
   );

apps/csms/src/ocpp/handler.ts

@@ -101,6 +101,59 @@ const actionHandlers: ActionHandlerMap = {
   StopTransaction: handleStopTransaction,
 }
 
+function shortId(value: string): string {
+  return value.length <= 12 ? value : `${value.slice(0, 8)}...${value.slice(-4)}`
+}
+
+function summarizeCallPayload(action: string, payload: unknown): Record<string, unknown> {
+  const p = payload as Record<string, unknown>
+  switch (action) {
+    case 'BootNotification':
+      return {
+        chargePointVendor: p.chargePointVendor,
+        chargePointModel: p.chargePointModel,
+        firmwareVersion: p.firmwareVersion ?? null,
+      }
+    case 'Authorize':
+      return {
+        idTag: typeof p.idTag === 'string' ? shortId(p.idTag) : undefined,
+      }
+    case 'Heartbeat':
+      return {}
+    case 'StatusNotification':
+      return {
+        connectorId: p.connectorId,
+        status: p.status,
+        errorCode: p.errorCode,
+        timestamp: p.timestamp ?? null,
+      }
+    case 'StartTransaction':
+      return {
+        connectorId: p.connectorId,
+        idTag: typeof p.idTag === 'string' ? shortId(p.idTag) : undefined,
+        meterStart: p.meterStart,
+        timestamp: p.timestamp,
+      }
+    case 'StopTransaction':
+      return {
+        transactionId: p.transactionId,
+        meterStop: p.meterStop,
+        reason: p.reason ?? null,
+        timestamp: p.timestamp,
+      }
+    case 'MeterValues':
+      return {
+        connectorId: p.connectorId,
+        transactionId: p.transactionId ?? null,
+        meterValueCount: Array.isArray(p.meterValue) ? p.meterValue.length : 0,
+      }
+    default:
+      return {
+        keys: p && typeof p === 'object' ? Object.keys(p).slice(0, 20) : [],
+      }
+  }
+}
+
 function sendCallResult(ws: WSContext, uniqueId: string, payload: unknown): void {
   ws.send(JSON.stringify([OCPP_MESSAGE_TYPE.CALLRESULT, uniqueId, payload]))
 }
@@ -162,9 +215,17 @@ export async function sendOcppCall<TPayload extends Record<string, unknown>, TRe
   const uniqueId =
     typeof timeoutOrOptions === 'number' ? crypto.randomUUID() : (timeoutOrOptions.uniqueId ?? crypto.randomUUID())
 
+  console.info(
+    `[OCPP][TX][CALL] cp=${chargePointIdentifier} action=${action} uniqueId=${uniqueId} timeoutMs=${timeoutMs}`,
+    summarizeCallPayload(action, payload),
+  )
+
   const resultPromise = new Promise<TResult>((resolve, reject) => {
     const timeout = setTimeout(async () => {
       pendingCalls.delete(uniqueId)
+      console.warn(
+        `[OCPP][TX][TIMEOUT] cp=${chargePointIdentifier} action=${action} uniqueId=${uniqueId} timeoutMs=${timeoutMs}`,
+      )
       await updateTransportState(chargePointIdentifier, {
         transportStatus: getCommandChannelStatus(chargePointIdentifier),
         lastCommandStatus: 'Timeout',
@@ -176,7 +237,12 @@ export async function sendOcppCall<TPayload extends Record<string, unknown>, TRe
     pendingCalls.set(uniqueId, {
       chargePointIdentifier,
       action,
-      resolve: (response) => resolve(response as TResult),
+      resolve: (response) => {
+        console.info(
+          `[OCPP][TX][CALLRESULT] cp=${chargePointIdentifier} action=${action} uniqueId=${uniqueId}`,
+        )
+        resolve(response as TResult)
+      },
       reject,
       timeout,
     })
@@ -195,6 +261,10 @@ export async function sendOcppCall<TPayload extends Record<string, unknown>, TRe
       lastCommandStatus: 'Error',
       lastCommandAt: dayjs().toDate(),
     })
+    console.error(
+      `[OCPP][TX][SEND_ERROR] cp=${chargePointIdentifier} action=${action} uniqueId=${uniqueId}`,
+      error,
+    )
     throw error instanceof Error ? error : new Error('CommandSendFailed')
   }
 
@@ -219,6 +289,9 @@ export function createOcppHandler(chargePointIdentifier: string, remoteAddr?: st
     async onOpen(_evt: Event, ws: WSContext) {
       const subProtocol = ws.protocol ?? 'unknown'
       if (!isSupportedOCPP(subProtocol)) {
+        console.warn(
+          `[OCPP][WS][OPEN_REJECT] cp=${chargePointIdentifier} session=${sessionId} subProtocol=${subProtocol} reason=unsupported_subprotocol`,
+        )
         ws.close(1002, 'Unsupported subprotocol')
         return
       }
@@ -246,12 +319,14 @@ export function createOcppHandler(chargePointIdentifier: string, remoteAddr?: st
         connectionSessionId: sessionId,
         lastWsConnectedAt: dayjs().toDate(),
       })
-      console.log(
+      console.info(
-        `[OCPP] ${chargePointIdentifier} connected` +
+        `[OCPP][WS][OPEN] cp=${chargePointIdentifier} session=${sessionId} subProtocol=${subProtocol} registered=${ctx.isRegistered}` +
-          (remoteAddr ? ` from ${remoteAddr}` : ''),
+          (remoteAddr ? ` remote=${remoteAddr}` : ''),
       )
       if (previous && previous.sessionId !== sessionId) {
-        console.log(`[OCPP] ${chargePointIdentifier} replaced previous connection`)
+        console.info(
+          `[OCPP][WS][REPLACE] cp=${chargePointIdentifier} oldSession=${previous.sessionId} newSession=${sessionId}`,
+        )
       }
     },
 
@@ -260,6 +335,9 @@ export function createOcppHandler(chargePointIdentifier: string, remoteAddr?: st
       try {
         const current = ocppConnections.get(chargePointIdentifier)
         if (!current || current.sessionId !== sessionId) {
+          console.warn(
+            `[OCPP][WS][STALE] cp=${chargePointIdentifier} session=${sessionId} activeSession=${current?.sessionId ?? 'none'}`,
+          )
           try {
             ws.close(1008, 'Stale connection')
           } catch {
@@ -288,6 +366,23 @@ export function createOcppHandler(chargePointIdentifier: string, remoteAddr?: st
         const [messageType, msgUniqueId] = message
         uniqueId = String(msgUniqueId)
 
+        if (messageType === OCPP_MESSAGE_TYPE.CALL) {
+          const [, , action, payload] = message as OcppCall
+          console.info(
+            `[OCPP][RX][CALL] cp=${chargePointIdentifier} session=${sessionId} action=${action} uniqueId=${uniqueId}`,
+            summarizeCallPayload(action, payload),
+          )
+        } else if (messageType === OCPP_MESSAGE_TYPE.CALLRESULT) {
+          console.info(
+            `[OCPP][RX][CALLRESULT] cp=${chargePointIdentifier} session=${sessionId} uniqueId=${uniqueId}`,
+          )
+        } else if (messageType === OCPP_MESSAGE_TYPE.CALLERROR) {
+          const [, , errorCode, errorDescription] = message as OcppCallErrorMessage
+          console.warn(
+            `[OCPP][RX][CALLERROR] cp=${chargePointIdentifier} session=${sessionId} uniqueId=${uniqueId} code=${errorCode} desc=${errorDescription}`,
+          )
+        }
+
         if (messageType === OCPP_MESSAGE_TYPE.CALLRESULT) {
           const [, responseUniqueId, payload] = message as OcppCallResultMessage
           const pending = pendingCalls.get(responseUniqueId)
@@ -314,6 +409,9 @@ export function createOcppHandler(chargePointIdentifier: string, remoteAddr?: st
             lastCommandStatus: errorCode === 'InternalError' ? 'Error' : 'Rejected',
             lastCommandAt: dayjs().toDate(),
           })
+          console.warn(
+            `[OCPP][TX][REJECTED] cp=${pending.chargePointIdentifier} action=${pending.action} uniqueId=${responseUniqueId} code=${errorCode} desc=${errorDescription}`,
+          )
           pending.reject(new Error(`${errorCode}:${errorDescription}`))
           return
         }
@@ -324,6 +422,9 @@ export function createOcppHandler(chargePointIdentifier: string, remoteAddr?: st
 
         // Enforce BootNotification before any other action
         if (!ctx.isRegistered && action !== 'BootNotification') {
+          console.warn(
+            `[OCPP][RX][REJECT] cp=${chargePointIdentifier} session=${sessionId} action=${action} uniqueId=${uniqueId} reason=boot_notification_required`,
+          )
           sendCallError(
             ws,
             uniqueId,
@@ -335,6 +436,9 @@ export function createOcppHandler(chargePointIdentifier: string, remoteAddr?: st
 
         const handler = actionHandlers[action as keyof ActionHandlerMap]
         if (!handler) {
+          console.warn(
+            `[OCPP][RX][NOT_IMPLEMENTED] cp=${chargePointIdentifier} session=${sessionId} action=${action} uniqueId=${uniqueId}`,
+          )
           sendCallError(ws, uniqueId, 'NotImplemented', `Action '${action}' is not implemented`)
           return
         }
@@ -343,9 +447,15 @@ export function createOcppHandler(chargePointIdentifier: string, remoteAddr?: st
           handler as (payload: unknown, ctx: OcppConnectionContext) => Promise<unknown>
         )(payload, ctx)
 
+        console.info(
+          `[OCPP][TX][CALLRESULT] cp=${chargePointIdentifier} session=${sessionId} action=${action} uniqueId=${uniqueId}`,
+        )
         sendCallResult(ws, uniqueId, response)
       } catch (err) {
-        console.error(`[OCPP] Error handling message from ${chargePointIdentifier} (uniqueId=${uniqueId}):`, err)
+        console.error(
+          `[OCPP][RX][ERROR] cp=${chargePointIdentifier} session=${sessionId} uniqueId=${uniqueId}`,
+          err,
+        )
         sendCallError(ws, uniqueId, 'InternalError', 'Internal server error')
       }
     },
@@ -359,7 +469,9 @@ export function createOcppHandler(chargePointIdentifier: string, remoteAddr?: st
           lastWsDisconnectedAt: dayjs().toDate(),
         })
       }
-      console.log(`[OCPP] ${chargePointIdentifier} disconnected (code=${evt.code})`)
+      console.info(
+        `[OCPP][WS][CLOSE] cp=${chargePointIdentifier} session=${sessionId} code=${evt.code} activeSession=${current?.sessionId ?? 'none'}`,
+      )
     },
   }
 }

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"
                           >
-                            <p className="text-xs font-medium text-foreground">
+                            <div className="flex w-full items-center justify-between gap-2">
-                              接口 #{conn.connectorId}
+                              <p className="text-xs font-medium text-foreground">
-                            </p>
+                                接口 #{conn.connectorId}
-                            <QRCodeSVG value={url} size={120} className="rounded" />
+                              </p>
+                              <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>
@@ -583,174 +680,184 @@ export default function ChargePointsPage() {
 
                 return (
                   <Table.Row key={cp.id} id={String(cp.id)} className={"group"}>
-                  <Table.Cell>
+                    <Table.Cell>
-                    <Tooltip delay={0}>
+                      <Tooltip delay={0}>
-                      <Tooltip.Trigger>
+                        <Tooltip.Trigger>
-                        <div className="flex items-center gap-2">
+                          <div className="flex items-center gap-2">
-                          <span
+                            <span
-                            className={`size-2 shrink-0 rounded-full ${
+                              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">
+                              <Link
+                                href={`/dashboard/charge-points/${cp.id}`}
+                                className="font-medium text-accent"
+                              >
+                                {cp.deviceName ?? cp.chargePointIdentifier}
+                              </Link>
+                              {isAdmin && cp.deviceName && (
+                                <span className="font-mono text-xs text-muted">
+                                  {cp.chargePointIdentifier}
+                                </span>
+                              )}
+                            </div>
+                          </div>
+                        </Tooltip.Trigger>
+                        <Tooltip.Content placement="start">
+                          {online
+                            ? "在线"
+                            : commandChannelUnavailable
+                              ? "通道异常"
+                              : cp.lastHeartbeatAt
+                                ? "离线"
+                                : "从未连接"}
+                        </Tooltip.Content>
+                      </Tooltip>
+                    </Table.Cell>
+                    {isAdmin && (
+                      <Table.Cell>
+                        {cp.chargePointVendor || cp.chargePointModel ? (
                           <div className="flex flex-col">
-                            <Link
+                            {cp.chargePointVendor && (
-                              href={`/dashboard/charge-points/${cp.id}`}
+                              <span className="text-xs text-muted font-medium">
-                              className="font-medium text-accent"
+                                {cp.chargePointVendor}
-                            >
-                              {cp.deviceName ?? cp.chargePointIdentifier}
-                            </Link>
-                            {isAdmin && cp.deviceName && (
-                              <span className="font-mono text-xs text-muted">
-                                {cp.chargePointIdentifier}
                               </span>
                             )}
+                            {cp.chargePointModel && (
+                              <span className="text-sm text-foreground">{cp.chargePointModel}</span>
+                            )}
                           </div>
-                        </div>
+                        ) : (
-                      </Tooltip.Trigger>
+                          <span className="text-muted">—</span>
-                      <Tooltip.Content placement="start">
+                        )}
-                        {online ? "在线" : commandChannelUnavailable ? "通道异常" : cp.lastHeartbeatAt ? "离线" : "从未连接"}
+                      </Table.Cell>
-                      </Tooltip.Content>
+                    )}
-                    </Tooltip>
+                    {isAdmin && (
-                  </Table.Cell>
+                      <Table.Cell>
-                  {isAdmin && (
+                        <Chip
+                          color={registrationColorMap[cp.registrationStatus] ?? "warning"}
+                          size="sm"
+                          variant="soft"
+                        >
+                          {cp.registrationStatus}
+                        </Chip>
+                      </Table.Cell>
+                    )}
                     <Table.Cell>
-                      {cp.chargePointVendor || cp.chargePointModel ? (
+                      {cp.pricingMode === "tou" ? (
-                        <div className="flex flex-col">
+                        <span className="text-accent font-medium">峰谷电价</span>
-                          {cp.chargePointVendor && (
+                      ) : cp.feePerKwh > 0 ? (
-                            <span className="text-xs text-muted font-medium">
+                        <span>
-                              {cp.chargePointVendor}
+                          {cp.feePerKwh} 分
-                            </span>
+                          <span className="ml-1 text-xs text-muted">
-                          )}
+                            (¥{(cp.feePerKwh / 100).toFixed(2)}/kWh)
-                          {cp.chargePointModel && (
+                          </span>
-                            <span className="text-sm text-foreground">{cp.chargePointModel}</span>
+                        </span>
-                          )}
+                      ) : (
+                        <span className="text-muted">免费</span>
+                      )}
+                    </Table.Cell>
+                    <Table.Cell>
+                      {cp.lastHeartbeatAt ? (
+                        dayjs(cp.lastHeartbeatAt).format("YYYY/M/D HH:mm:ss")
+                      ) : (
+                        <span className="text-muted">—</span>
+                      )}
+                    </Table.Cell>
+                    <Table.Cell>
+                      {cp.chargePointStatus ? (
+                        <div className="flex items-center gap-1.5">
+                          <span
+                            className={`size-1.5 shrink-0 rounded-full ${statusDotClass[cp.chargePointStatus] ?? "bg-warning"}`}
+                          />
+                          <span className="text-sm text-foreground text-nowrap">
+                            {cp.chargePointStatus === "Available"
+                              ? "正常"
+                              : (statusLabelMap[cp.chargePointStatus] ?? cp.chargePointStatus)}
+                          </span>
                         </div>
                       ) : (
                         <span className="text-muted">—</span>
                       )}
                     </Table.Cell>
-                  )}
-                  {isAdmin && (
                     <Table.Cell>
-                      <Chip
+                      <ConnectorCell connectors={cp.connectors} />
-                        color={registrationColorMap[cp.registrationStatus] ?? "warning"}
-                        size="sm"
-                        variant="soft"
-                      >
-                        {cp.registrationStatus}
-                      </Chip>
                     </Table.Cell>
-                  )}
+                    {isAdmin && (
-                  <Table.Cell>
+                      <Table.Cell>
-                    {cp.pricingMode === "tou" ? (
+                        <div className="flex items-center gap-1">
-                      <span className="text-accent font-medium">峰谷电价</span>
-                    ) : cp.feePerKwh > 0 ? (
-                      <span>
-                        {cp.feePerKwh} 分
-                        <span className="ml-1 text-xs text-muted">
-                          (¥{(cp.feePerKwh / 100).toFixed(2)}/kWh)
-                        </span>
-                      </span>
-                    ) : (
-                      <span className="text-muted">免费</span>
-                    )}
-                  </Table.Cell>
-                  <Table.Cell>
-                    {cp.lastHeartbeatAt ? (
-                      dayjs(cp.lastHeartbeatAt).format("YYYY/M/D HH:mm:ss")
-                    ) : (
-                      <span className="text-muted">—</span>
-                    )}
-                  </Table.Cell>
-                  <Table.Cell>
-                    {cp.chargePointStatus ? (
-                      <div className="flex items-center gap-1.5">
-                        <span
-                          className={`size-1.5 shrink-0 rounded-full ${statusDotClass[cp.chargePointStatus] ?? "bg-warning"}`}
-                        />
-                        <span className="text-sm text-foreground text-nowrap">
-                          {cp.chargePointStatus === "Available"
-                            ? "正常"
-                            : (statusLabelMap[cp.chargePointStatus] ?? cp.chargePointStatus)}
-                        </span>
-                      </div>
-                    ) : (
-                      <span className="text-muted">—</span>
-                    )}
-                  </Table.Cell>
-                  <Table.Cell>
-                    <ConnectorCell connectors={cp.connectors} />
-                  </Table.Cell>
-                  {isAdmin && (
-                    <Table.Cell>
-                      <div className="flex items-center gap-1">
-                        <Button
-                          isIconOnly
-                          size="sm"
-                          variant="tertiary"
-                          onPress={() => openEdit(cp)}
-                        >
-                          <Pencil className="size-4" />
-                        </Button>
-                        <Button
-                          isIconOnly
-                          size="sm"
-                          variant="tertiary"
-                          onPress={() => setQrTarget(cp)}
-                          aria-label="查看二维码"
-                        >
-                          <QrCode className="size-4" />
-                        </Button>
-                        <Modal>
                           <Button
                             isIconOnly
                             size="sm"
-                            variant="danger-soft"
+                            variant="tertiary"
-                            onPress={() => setDeleteTarget(cp)}
+                            onPress={() => openEdit(cp)}
                           >
-                            <TrashBin className="size-4" />
+                            <Pencil className="size-4" />
                           </Button>
-                          <Modal.Backdrop>
+                          <Button
-                            <Modal.Container scroll="outside">
+                            isIconOnly
-                              <Modal.Dialog className="sm:max-w-96">
+                            size="sm"
-                                <Modal.CloseTrigger />
+                            variant="tertiary"
-                                <Modal.Header>
+                            onPress={() => setQrTarget(cp)}
-                                  <Modal.Heading>确认删除充电桩</Modal.Heading>
+                            aria-label="查看二维码"
-                                </Modal.Header>
+                          >
-                                <Modal.Body>
+                            <QrCode className="size-4" />
-                                  <p className="text-sm text-muted">
+                          </Button>
-                                    将删除充电桩{" "}
+                          <Modal>
-                                    <span className="font-medium text-foreground">
+                            <Button
-                                      {cp.deviceName ?? cp.chargePointIdentifier}
+                              isIconOnly
-                                    </span>
+                              size="sm"
-                                    {cp.deviceName && (
+                              variant="danger-soft"
-                                      <span className="font-mono ml-1 text-xs text-muted">
+                              onPress={() => setDeleteTarget(cp)}
-                                        ({cp.chargePointIdentifier})
+                            >
+                              <TrashBin className="size-4" />
+                            </Button>
+                            <Modal.Backdrop>
+                              <Modal.Container scroll="outside">
+                                <Modal.Dialog className="sm:max-w-96">
+                                  <Modal.CloseTrigger />
+                                  <Modal.Header>
+                                    <Modal.Heading>确认删除充电桩</Modal.Heading>
+                                  </Modal.Header>
+                                  <Modal.Body>
+                                    <p className="text-sm text-muted">
+                                      将删除充电桩{" "}
+                                      <span className="font-medium text-foreground">
+                                        {cp.deviceName ?? cp.chargePointIdentifier}
                                       </span>
-                                    )}
+                                      {cp.deviceName && (
-                                    及其所有连接器和充电记录，此操作不可恢复。
+                                        <span className="font-mono ml-1 text-xs text-muted">
-                                  </p>
+                                          ({cp.chargePointIdentifier})
-                                </Modal.Body>
+                                        </span>
-                                <Modal.Footer className="flex justify-end gap-2">
+                                      )}
-                                  <Button slot="close" variant="ghost">
+                                      及其所有连接器和充电记录，此操作不可恢复。
-                                    取消
+                                    </p>
-                                  </Button>
+                                  </Modal.Body>
-                                  <Button
+                                  <Modal.Footer className="flex justify-end gap-2">
-                                    slot="close"
+                                    <Button slot="close" variant="ghost">
-                                    variant="danger"
+                                      取消
-                                    isDisabled={deleting}
+                                    </Button>
-                                    onPress={handleDelete}
+                                    <Button
-                                  >
+                                      slot="close"
-                                    {deleting ? <Spinner size="sm" /> : "确认删除"}
+                                      variant="danger"
-                                  </Button>
+                                      isDisabled={deleting}
-                                </Modal.Footer>
+                                      onPress={handleDelete}
-                              </Modal.Dialog>
+                                    >
-                            </Modal.Container>
+                                      {deleting ? <Spinner size="sm" /> : "确认删除"}
-                          </Modal.Backdrop>
+                                    </Button>
-                        </Modal>
+                                  </Modal.Footer>
-                      </div>
+                                </Modal.Dialog>
-                    </Table.Cell>
+                              </Modal.Container>
-                  )}
+                            </Modal.Backdrop>
+                          </Modal>
+                        </div>
+                      </Table.Cell>
+                    )}
                   </Table.Row>
                 );
               })}

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