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,101 @@
+import type { LucideIcon } from "lucide-react";
+import { Download, ListChecks, MapPinned, Plus, Share2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import {
+  MapActionRow,
+  MapPanelSection
+} from "./control-panel";
+import {
+  MAP_READABLE_RADIUS_CLASS_NAME,
+  MAP_READABLE_SURFACE_CLASS_NAME
+} from "./map-control-styles";
+
+export type MapAnnotationItem = {
+  id: string;
+  label: string;
+  description: string;
+  icon?: LucideIcon;
+  status?: string;
+  selected?: boolean;
+  muted?: boolean;
+  onClick?: () => void;
+};
+
+export type MapAnnotationShareAction = {
+  id: string;
+  label: string;
+  description: string;
+  icon?: LucideIcon;
+  onClick?: () => void;
+};
+
+export type MapAnnotationPanelProps = {
+  annotations: MapAnnotationItem[];
+  shareActions?: MapAnnotationShareAction[];
+  emptyText?: string;
+};
+
+export function MapAnnotationPanel({
+  annotations,
+  shareActions = [],
+  emptyText = "暂无标注"
+}: MapAnnotationPanelProps) {
+  return (
+    <div className="space-y-3">
+      <MapPanelSection title="标注列表">
+        {annotations.length > 0 ? (
+          annotations.map((annotation) => (
+            <MapActionRow
+              key={annotation.id}
+              icon={annotation.icon ?? getDefaultAnnotationIcon(annotation.status)}
+              label={annotation.label}
+              description={annotation.description}
+              status={annotation.status}
+              selected={annotation.selected}
+              muted={annotation.muted}
+              onClick={annotation.onClick}
+            />
+          ))
+        ) : (
+          <div className={cn("px-3 py-2 text-xs text-slate-500", MAP_READABLE_RADIUS_CLASS_NAME, MAP_READABLE_SURFACE_CLASS_NAME)}>
+            {emptyText}
+          </div>
+        )}
+      </MapPanelSection>
+
+      {shareActions.length > 0 ? (
+        <MapPanelSection title="共享">
+          {shareActions.map((action) => (
+            <MapActionRow
+              key={action.id}
+              icon={action.icon ?? getDefaultShareIcon(action.id)}
+              label={action.label}
+              description={action.description}
+              onClick={action.onClick}
+            />
+          ))}
+        </MapPanelSection>
+      ) : null}
+    </div>
+  );
+}
+
+function getDefaultAnnotationIcon(status?: string) {
+  if (status) {
+    return ListChecks;
+  }
+
+  return MapPinned;
+}
+
+function getDefaultShareIcon(actionId: string) {
+  if (actionId.includes("export") || actionId.includes("download")) {
+    return Download;
+  }
+
+  if (actionId.includes("share")) {
+    return Share2;
+  }
+
+  return Plus;
+}