feat: initialize drainage network frontend

2026-07-10 16:16:17 +08:00
commit 66de96d9e4
133 changed files with 33057 additions and 0 deletions
@@ -0,0 +1,86 @@
+import type { LucideIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  MAP_ICON_CELL_RADIUS_CLASS_NAME,
+  MAP_MAJOR_PANEL_RADIUS_CLASS_NAME,
+  MAP_READABLE_RADIUS_CLASS_NAME,
+  MAP_READABLE_SURFACE_CLASS_NAME,
+  MAP_TOOL_PANEL_SURFACE_CLASS_NAME
+} from "./map-control-styles";
+
+export type MapLegendItem = {
+  id: string;
+  label: string;
+  description?: string;
+  color: string;
+  icon?: LucideIcon;
+  shape?: "line" | "dot" | "square";
+};
+
+type MapLegendProps = {
+  title?: string;
+  items: MapLegendItem[];
+  className?: string;
+};
+
+export function MapLegend({ title = "图例", items, className = "" }: MapLegendProps) {
+  return (
+    <section
+      aria-label={title}
+      className={cn(
+        "pointer-events-auto w-[236px] p-3",
+        MAP_MAJOR_PANEL_RADIUS_CLASS_NAME,
+        MAP_TOOL_PANEL_SURFACE_CLASS_NAME,
+        className
+      )}
+    >
+      <h2 className="px-1 text-sm font-semibold leading-tight text-slate-950">{title}</h2>
+      <p className="mt-0.5 px-1 text-xs text-slate-500">业务图层语义</p>
+      <MapLegendList items={items} className="mt-3" />
+    </section>
+  );
+}
+
+type MapLegendListProps = {
+  items: MapLegendItem[];
+  className?: string;
+  showStatusDot?: boolean;
+};
+
+export function MapLegendList({ items, className = "", showStatusDot = false }: MapLegendListProps) {
+  return (
+    <ul className={cn("space-y-1.5", className)}>
+      {items.map((item) => {
+        const Icon = item.icon;
+
+        return (
+          <li
+            key={item.id}
+            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} />}
+            </span>
+            <span className="min-w-0 flex-1">
+              <span className="block truncate font-semibold">{item.label}</span>
+              {item.description ? <span className="block truncate text-xs text-slate-500">{item.description}</span> : null}
+            </span>
+            {showStatusDot ? <span className="h-2 w-2 rounded-full bg-emerald-500" aria-hidden="true" /> : null}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+export function MapLegendSwatch({ color, shape = "dot" }: Pick<MapLegendItem, "color" | "shape">) {
+  if (shape === "line") {
+    return <span className="h-1 w-6 rounded-full" style={{ backgroundColor: color }} />;
+  }
+
+  if (shape === "square") {
+    return <span className="h-4 w-4 rounded-sm" style={{ backgroundColor: color }} />;
+  }
+
+  return <span className="h-4 w-4 rounded-full ring-2 ring-white" style={{ backgroundColor: color }} />;
+}