OrgTJWater/next-tjwater-drainage-frontend
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(map): refine SCADA feature experience

Browse Source
This commit is contained in:
jiang
2026-07-14 10:48:24 +08:00
parent 0b7e827024
commit 1c85d938a6
35 changed files with 1020 additions and 842 deletions
Download Patch File Download Diff File Expand all files Collapse all files
features/map/core/components/legend.tsx
+16 -2
View File
@@ -1,4 +1,5 @@
import type { LucideIcon } from "lucide-react";
import Image from "next/image";
import { cn } from "@/lib/utils";
import {
MAP_ICON_CELL_RADIUS_CLASS_NAME,
@@ -14,7 +15,8 @@ export type MapLegendItem = {
description?: string;
color: string;
icon?: LucideIcon;
shape?: "line" | "dot" | "square";
imageSrc?: string;
shape?: "line" | "dashed-line" | "dash-dot-line" | "dot" | "ring" | "square";
};
type MapLegendProps = {
@@ -59,7 +61,7 @@ export function MapLegendList({ items, className = "", showStatusDot = false }:
className={cn("flex min-h-10 items-center gap-2.5 px-2.5 py-2 text-sm text-slate-700", MAP_READABLE_RADIUS_CLASS_NAME, MAP_READABLE_SURFACE_CLASS_NAME)}
>
<span className={cn("grid h-7 w-7 shrink-0 place-items-center bg-slate-50", MAP_ICON_CELL_RADIUS_CLASS_NAME)} aria-hidden="true">
{Icon ? <Icon size={15} style={{ color: item.color }} /> : <MapLegendSwatch color={item.color} shape={item.shape} />}
{item.imageSrc ? <Image src={item.imageSrc} alt="" width={24} height={24} /> : Icon ? <Icon size={15} style={{ color: item.color }} /> : <MapLegendSwatch color={item.color} shape={item.shape} />}
</span>
<span className="min-w-0 flex-1">
<span className="block truncate font-semibold">{item.label}</span>
@@ -78,9 +80,21 @@ export function MapLegendSwatch({ color, shape = "dot" }: Pick<MapLegendItem, "c
return <span className="h-1 w-6 rounded-full" style={{ backgroundColor: color }} />;
}
if (shape === "dashed-line" || shape === "dash-dot-line") {
return (
<svg width="24" height="8" viewBox="0 0 24 8" aria-hidden="true">
<line x1="1" y1="4" x2="23" y2="4" stroke={color} strokeWidth="3" strokeDasharray={shape === "dashed-line" ? "5 3" : "8 3 2 3"} />
</svg>
);
}
if (shape === "square") {
return <span className="h-4 w-4 rounded-sm" style={{ backgroundColor: color }} />;
}
if (shape === "ring") {
return <span className="h-4 w-4 rounded-full border-[3px] bg-white" style={{ borderColor: color }} />;
}
return <span className="h-4 w-4 rounded-full ring-2 ring-white" style={{ backgroundColor: color }} />;
}