feat(web): 充电桩二维码支持下载导出
This commit is contained in:
@@ -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">
|
||||
接口 #{conn.connectorId}
|
||||
</p>
|
||||
<QRCodeSVG value={url} size={120} className="rounded" />
|
||||
<div className="flex w-full items-center justify-between gap-2">
|
||||
<p className="text-xs font-medium text-foreground">
|
||||
接口 #{conn.connectorId}
|
||||
</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>
|
||||
<Tooltip delay={0}>
|
||||
<Tooltip.Trigger>
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className={`size-2 shrink-0 rounded-full ${
|
||||
online ? "bg-success" : commandChannelUnavailable ? "bg-warning" : "bg-gray-300"
|
||||
}`}
|
||||
/>
|
||||
<Table.Cell>
|
||||
<Tooltip delay={0}>
|
||||
<Tooltip.Trigger>
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className={`size-2 shrink-0 rounded-full ${
|
||||
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
|
||||
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}
|
||||
{cp.chargePointVendor && (
|
||||
<span className="text-xs text-muted font-medium">
|
||||
{cp.chargePointVendor}
|
||||
</span>
|
||||
)}
|
||||
{cp.chargePointModel && (
|
||||
<span className="text-sm text-foreground">{cp.chargePointModel}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Tooltip.Trigger>
|
||||
<Tooltip.Content placement="start">
|
||||
{online ? "在线" : commandChannelUnavailable ? "通道异常" : cp.lastHeartbeatAt ? "离线" : "从未连接"}
|
||||
</Tooltip.Content>
|
||||
</Tooltip>
|
||||
</Table.Cell>
|
||||
{isAdmin && (
|
||||
) : (
|
||||
<span className="text-muted">—</span>
|
||||
)}
|
||||
</Table.Cell>
|
||||
)}
|
||||
{isAdmin && (
|
||||
<Table.Cell>
|
||||
<Chip
|
||||
color={registrationColorMap[cp.registrationStatus] ?? "warning"}
|
||||
size="sm"
|
||||
variant="soft"
|
||||
>
|
||||
{cp.registrationStatus}
|
||||
</Chip>
|
||||
</Table.Cell>
|
||||
)}
|
||||
<Table.Cell>
|
||||
{cp.chargePointVendor || cp.chargePointModel ? (
|
||||
<div className="flex flex-col">
|
||||
{cp.chargePointVendor && (
|
||||
<span className="text-xs text-muted font-medium">
|
||||
{cp.chargePointVendor}
|
||||
</span>
|
||||
)}
|
||||
{cp.chargePointModel && (
|
||||
<span className="text-sm text-foreground">{cp.chargePointModel}</span>
|
||||
)}
|
||||
{cp.pricingMode === "tou" ? (
|
||||
<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>
|
||||
)}
|
||||
{isAdmin && (
|
||||
<Table.Cell>
|
||||
<Chip
|
||||
color={registrationColorMap[cp.registrationStatus] ?? "warning"}
|
||||
size="sm"
|
||||
variant="soft"
|
||||
>
|
||||
{cp.registrationStatus}
|
||||
</Chip>
|
||||
<ConnectorCell connectors={cp.connectors} />
|
||||
</Table.Cell>
|
||||
)}
|
||||
<Table.Cell>
|
||||
{cp.pricingMode === "tou" ? (
|
||||
<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>
|
||||
{isAdmin && (
|
||||
<Table.Cell>
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
isIconOnly
|
||||
size="sm"
|
||||
variant="danger-soft"
|
||||
onPress={() => setDeleteTarget(cp)}
|
||||
variant="tertiary"
|
||||
onPress={() => openEdit(cp)}
|
||||
>
|
||||
<TrashBin className="size-4" />
|
||||
<Pencil 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">
|
||||
({cp.chargePointIdentifier})
|
||||
<Button
|
||||
isIconOnly
|
||||
size="sm"
|
||||
variant="tertiary"
|
||||
onPress={() => setQrTarget(cp)}
|
||||
aria-label="查看二维码"
|
||||
>
|
||||
<QrCode className="size-4" />
|
||||
</Button>
|
||||
<Modal>
|
||||
<Button
|
||||
isIconOnly
|
||||
size="sm"
|
||||
variant="danger-soft"
|
||||
onPress={() => setDeleteTarget(cp)}
|
||||
>
|
||||
<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>
|
||||
)}
|
||||
及其所有连接器和充电记录，此操作不可恢复。
|
||||
</p>
|
||||
</Modal.Body>
|
||||
<Modal.Footer className="flex justify-end gap-2">
|
||||
<Button slot="close" variant="ghost">
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
slot="close"
|
||||
variant="danger"
|
||||
isDisabled={deleting}
|
||||
onPress={handleDelete}
|
||||
>
|
||||
{deleting ? <Spinner size="sm" /> : "确认删除"}
|
||||
</Button>
|
||||
</Modal.Footer>
|
||||
</Modal.Dialog>
|
||||
</Modal.Container>
|
||||
</Modal.Backdrop>
|
||||
</Modal>
|
||||
</div>
|
||||
</Table.Cell>
|
||||
)}
|
||||
{cp.deviceName && (
|
||||
<span className="font-mono ml-1 text-xs text-muted">
|
||||
({cp.chargePointIdentifier})
|
||||
</span>
|
||||
)}
|
||||
及其所有连接器和充电记录，此操作不可恢复。
|
||||
</p>
|
||||
</Modal.Body>
|
||||
<Modal.Footer className="flex justify-end gap-2">
|
||||
<Button slot="close" variant="ghost">
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
slot="close"
|
||||
variant="danger"
|
||||
isDisabled={deleting}
|
||||
onPress={handleDelete}
|
||||
>
|
||||
{deleting ? <Spinner size="sm" /> : "确认删除"}
|
||||
</Button>
|
||||
</Modal.Footer>
|
||||
</Modal.Dialog>
|
||||
</Modal.Container>
|
||||
</Modal.Backdrop>
|
||||
</Modal>
|
||||
</div>
|
||||
</Table.Cell>
|
||||
)}
|
||||
</Table.Row>
|
||||
);
|
||||
})}
|
||||
|
||||
Reference in New Issue
Block a user