feat(workbench): integrate runtime data and map tooling

src/features/map/core/components/legend.tsx

@@ -1,11 +1,8 @@
 import type { LucideIcon } from "lucide-react";
 import { cn } from "@/shared/ui/cn";
-import { StatusDot } from "@/shared/ui/status";
 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";
 
@@ -14,9 +11,15 @@ export type MapLegendItem = {
   label: string;
   description?: string;
   color: string;
+  layerControlId?: string;
+  group?: string;
+  groupLabel?: string;
+  groupDescription?: string;
+  groupLayout?: "list" | "grid";
   icon?: LucideIcon;
   imageSrc?: string;
-  shape?: "line" | "dashed-line" | "dash-dot-line" | "dot" | "ring" | "square";
+  lineWidth?: number;
+  shape?: "line" | "dashed-line" | "dash-dot-line" | "dot" | "ring" | "square" | "area";
 };
 
 type MapLegendProps = {
@@ -37,7 +40,7 @@ export function MapLegend({ title = "图例", items, className = "" }: MapLegend
       )}
     >
       <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>
+      <p className="mt-0.5 px-1 text-xs text-slate-500">当前地图符号与分级</p>
       <MapLegendList items={items} className="mt-3" />
     </section>
   );
@@ -46,44 +49,134 @@ export function MapLegend({ title = "图例", items, className = "" }: MapLegend
 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;
+export function MapLegendList({ items, className = "" }: MapLegendListProps) {
+  const groups = groupLegendItems(items);
 
-        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">
-              {item.imageSrc ? <img src={item.imageSrc} alt="" width={24} height={24} /> : Icon ? <Icon size={15} style={{ color: item.color }} /> : <MapLegendSwatch color={item.color} shape={item.shape} />}
-            </span>
+  if (groups.length === 0) {
+    return (
+      <div className={cn("surface-well rounded-xl border px-3 py-4 text-center", className)}>
+        <p className="text-xs font-semibold text-slate-700">暂无可见业务图层</p>
+        <p className="mt-1 text-[11px] leading-relaxed text-slate-500">请先在图层面板中打开需要查看的内容。</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("space-y-2", className)}>
+      {groups.map((group) => (
+        <section
+          key={group.id}
+          aria-label={group.label}
+          className="surface-well overflow-hidden rounded-xl border"
+        >
+          <div className="flex min-h-10 items-center gap-2 px-2.5 py-1.5">
             <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 className="block truncate text-xs font-semibold text-slate-700">{group.label}</span>
+              {group.description ? (
+                <span className="mt-0.5 block truncate text-[10px] leading-tight text-slate-500">
+                  {group.description}
+                </span>
+              ) : null}
             </span>
-            {showStatusDot ? <StatusDot tone="success" size="md" /> : null}
-          </li>
-        );
-      })}
-    </ul>
+            <span className="shrink-0 rounded-full bg-white/75 px-2 py-0.5 text-[10px] font-medium tabular-nums text-slate-500 shadow-xs shadow-slate-950/5">
+              {group.items.length} 类
+            </span>
+          </div>
+          <ul
+            className={cn(
+              "border-t border-slate-200/70",
+              group.layout === "grid"
+                ? "grid grid-cols-2 gap-px bg-slate-200/70"
+                : "divide-y divide-slate-200/70 bg-white/45"
+            )}
+          >
+            {group.items.map((item) => (
+              <LegendItem key={item.id} item={item} compact={group.layout === "grid"} />
+            ))}
+          </ul>
+        </section>
+      ))}
+    </div>
   );
 }
 
-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 }} />;
-  }
+function groupLegendItems(items: MapLegendItem[]) {
+  const groups = new Map<string, {
+    id: string;
+    label: string;
+    description?: string;
+    layout: "list" | "grid";
+    items: MapLegendItem[];
+  }>();
+  items.forEach((item) => {
+    const id = item.group ?? "legend";
+    const existing = groups.get(id);
+    if (existing) {
+      existing.items.push(item);
+      return;
+    }
+    groups.set(id, {
+      id,
+      label: item.groupLabel ?? "地图符号",
+      description: item.groupDescription,
+      layout: item.groupLayout ?? "list",
+      items: [item]
+    });
+  });
+  return [...groups.values()];
+}
 
-  if (shape === "dashed-line" || shape === "dash-dot-line") {
+function LegendItem({ item, compact }: { item: MapLegendItem; compact: boolean }) {
+  const Icon = item.icon;
+  return (
+    <li
+      className={cn(
+        "flex items-center text-slate-700",
+        compact ? "min-h-11 gap-2 bg-white/70 px-2 py-1.5" : "min-h-9 gap-2.5 px-2.5 py-1.5"
+      )}
+    >
+      <span
+        aria-hidden="true"
+        className={cn(
+          "grid shrink-0 place-items-center bg-slate-50 shadow-inner shadow-slate-950/5",
+          MAP_ICON_CELL_RADIUS_CLASS_NAME,
+          compact ? "h-7 w-7" : "h-7 w-9"
+        )}
+      >
+        {item.imageSrc ? (
+          <img src={item.imageSrc} alt="" width={24} height={24} />
+        ) : Icon ? (
+          <Icon size={15} style={{ color: item.color }} />
+        ) : (
+          <MapLegendSwatch color={item.color} shape={item.shape} lineWidth={item.lineWidth} />
+        )}
+      </span>
+      <span className="min-w-0 flex-1">
+        <span className="block truncate text-[11px] font-semibold leading-tight">{item.label}</span>
+        {compact && item.description ? (
+          <span className="mt-0.5 block truncate text-[10px] leading-tight text-slate-500">{item.description}</span>
+        ) : null}
+      </span>
+      {!compact && item.description ? (
+        <span className="shrink-0 text-[10px] text-slate-500">{item.description}</span>
+      ) : null}
+    </li>
+  );
+}
+
+export function MapLegendSwatch({
+  color,
+  shape = "dot",
+  lineWidth = 3
+}: Pick<MapLegendItem, "color" | "shape" | "lineWidth">) {
+  if (shape === "line" || shape === "dashed-line" || shape === "dash-dot-line") {
+    const dashArray = shape === "dashed-line" ? "5 3" : shape === "dash-dot-line" ? "8 3 2 3" : undefined;
     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 width="28" height="12" viewBox="0 0 28 12" aria-hidden="true">
+        <line x1="2" y1="6" x2="26" y2="6" stroke="white" strokeWidth={lineWidth + 3} strokeLinecap="round" strokeDasharray={dashArray} />
+        <line x1="2" y1="6" x2="26" y2="6" stroke={color} strokeWidth={lineWidth} strokeLinecap="round" strokeDasharray={dashArray} />
       </svg>
     );
   }
@@ -92,6 +185,15 @@ export function MapLegendSwatch({ color, shape = "dot" }: Pick<MapLegendItem, "c
     return <span className="h-4 w-4 rounded-sm" style={{ backgroundColor: color }} />;
   }
 
+  if (shape === "area") {
+    return (
+      <span
+        className="h-4 w-5 rounded-[4px] border"
+        style={{ backgroundColor: `${color}24`, borderColor: color }}
+      />
+    );
+  }
+
   if (shape === "ring") {
     return <span className="h-4 w-4 rounded-full border-[3px] bg-white" style={{ borderColor: color }} />;
   }