feat(web): add tooltip for charge point status with online/offline indication

This commit is contained in:
2026-03-11 22:01:43 +08:00
parent 02a361488b
commit 279e453ad6
2 changed files with 29 additions and 7 deletions

View File

@@ -13,6 +13,7 @@ import {
Spinner,
Table,
TextField,
Tooltip,
} from "@heroui/react";
import {
Plus,
@@ -424,12 +425,33 @@ export default function ChargePointsPage() {
{chargePoints.map((cp) => (
<Table.Row key={cp.id} id={String(cp.id)} className={"group"}>
<Table.Cell>
<Link
href={`/dashboard/charge-points/${cp.id}`}
className="font-medium text-accent"
>
{cp.chargePointIdentifier}
</Link>
<Tooltip delay={0}>
<Tooltip.Trigger>
<div className="flex items-center gap-2">
<span
className={`size-2 shrink-0 rounded-full ${
cp.lastHeartbeatAt &&
dayjs().diff(dayjs(cp.lastHeartbeatAt), "second") < 120
? "bg-success"
: "bg-gray-300"
}`}
/>
<Link
href={`/dashboard/charge-points/${cp.id}`}
className="font-medium text-accent"
>
{cp.chargePointIdentifier}
</Link>
</div>
</Tooltip.Trigger>
<Tooltip.Content placement="start">
{cp.lastHeartbeatAt
? dayjs().diff(dayjs(cp.lastHeartbeatAt), "second") < 120
? "在线"
: "离线"
: "从未连接"}
</Tooltip.Content>
</Tooltip>
</Table.Cell>
{isAdmin && (
<Table.Cell>

View File

@@ -265,7 +265,7 @@ export default function ChargePage() {
});
const selectedCp = chargePoints.find((cp) => cp.id === selectedCpId) ?? null;
const myTags = idTags.filter((t) => t.status === "Accepted");
const myTags = idTags?.filter((t) => t.status === "Accepted") ?? [];
const startMutation = useMutation({
mutationFn: async () => {