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,120 @@
+"use client";
+
+import { Target, TriangleAlert, X } from "lucide-react";
+import { useMemo } from "react";
+import type { DetailFeature } from "../types";
+import {
+  formatFeaturePropertyValue,
+  getLocalizedFeatureProperties
+} from "../utils/feature-properties";
+
+type FeatureInsightPanelProps = {
+  feature: DetailFeature | null;
+  onClose: () => void;
+};
+
+export function FeatureInsightPanel({ feature, onClose }: FeatureInsightPanelProps) {
+  const metrics = useMemo(() => {
+    if (!feature) {
+      return [];
+    }
+
+    if (feature.layer === "pipes") {
+      return [
+        ["管径", formatFeaturePropertyValue("diameter", feature.properties.diameter)],
+        ["长度", formatFeaturePropertyValue("length", feature.properties.length)],
+        ["粗糙系数", formatFeaturePropertyValue("roughness", feature.properties.roughness)],
+        ["状态", formatFeaturePropertyValue("status", feature.properties.status)]
+      ];
+    }
+
+    return [
+      ["高程", formatFeaturePropertyValue("elevation", feature.properties.elevation)],
+      ["需水量", formatFeaturePropertyValue("demand", feature.properties.demand)],
+      ["对象类型", "管网节点"],
+      ["状态", "在线"]
+    ];
+  }, [feature]);
+
+  const propertyEntries = useMemo(() => {
+    if (!feature) {
+      return [];
+    }
+
+    return getLocalizedFeatureProperties(feature.properties);
+  }, [feature]);
+
+  return (
+    <aside className="pointer-events-auto flex h-full min-h-0 flex-col rounded border border-white/60 bg-white/88 shadow-glass backdrop-blur">
+      <div className="border-b border-slate-200/80 p-4">
+        <div className="flex items-start justify-between gap-3">
+          <div>
+            <p className="text-xs font-medium tracking-[0.14em] text-slate-500">要素详情</p>
+            <h2 className="mt-1 text-lg font-semibold text-slate-950">
+              {feature ? feature.title : "选择一个管网对象"}
+            </h2>
+          </div>
+          <button
+            type="button"
+            aria-label="关闭详情"
+            title="关闭详情"
+            onClick={onClose}
+            className="grid h-9 w-9 place-items-center rounded border border-slate-200 bg-white text-slate-500 hover:text-slate-900"
+          >
+            <X size={16} aria-hidden="true" />
+          </button>
+        </div>
+        <p className="mt-2 text-sm text-slate-600">
+          {feature ? feature.subtitle : "点击地图上的管线或节点后，这里会展示属性、SCADA 摘要和 Agent 解释。"}
+        </p>
+      </div>
+
+      <div className="min-h-0 flex-1 overflow-auto p-4">
+        {feature ? (
+          <>
+            <div className="grid grid-cols-2 gap-2">
+              {metrics.map(([label, value]) => (
+                <div key={label} className="rounded border border-slate-200 bg-white p-3">
+                  <p className="text-xs text-slate-500">{label}</p>
+                  <p className="mt-1 truncate text-sm font-semibold text-slate-900">{value}</p>
+                </div>
+              ))}
+            </div>
+
+            <section className="mt-4 rounded border border-orange-100 bg-orange-50/70 p-3">
+              <div className="flex items-center gap-2 text-sm font-semibold text-orange-900">
+                <TriangleAlert size={16} aria-hidden="true" />
+                Agent 解释
+              </div>
+              <p className="mt-2 text-sm leading-6 text-slate-700">
+                该对象来自 GeoServer MVT。当前仅执行前端预览，不会写入样式、模型参数或调度工单。
+              </p>
+            </section>
+
+            <section className="mt-4">
+              <h3 className="text-sm font-semibold text-slate-900">属性</h3>
+              <dl className="mt-2 divide-y divide-slate-100 rounded border border-slate-200 bg-white">
+                {propertyEntries.map((entry) => (
+                  <div key={entry.key} className="grid grid-cols-[110px_1fr] gap-2 px-3 py-2 text-sm">
+                    <dt className="truncate text-slate-500">{entry.label}</dt>
+                    <dd className="truncate font-medium text-slate-800">{entry.value}</dd>
+                  </div>
+                ))}
+              </dl>
+            </section>
+          </>
+        ) : (
+          <div className="flex h-full flex-col items-center justify-center text-center">
+            <div className="grid h-12 w-12 place-items-center rounded border border-slate-200 bg-white text-slate-500">
+              <Target size={22} aria-hidden="true" />
+            </div>
+            <p className="mt-3 text-sm font-medium text-slate-800">等待地图选择</p>
+            <p className="mt-1 max-w-[260px] text-sm leading-6 text-slate-500">
+              选择要素后，可查看基础属性、模拟入口与 Agent 会话联动结果。
+            </p>
+          </div>
+        )}
+      </div>
+    </aside>
+  );
+}