feat(workbench): expand SCADA monitoring and investigation presentation

2026-11-07 19:50:14 +08:00
parent 0801e161ec
commit ba71e2d529
133 changed files with 6754 additions and 1438 deletions
@@ -0,0 +1,87 @@
+import { useState } from "react";
+import { dismissMapNotice, showMapNotice, type MapNoticeOptions } from "@/features/map/core";
+import { Button } from "@/shared/ui/button";
+
+const samples = [
+  { key: "info", label: "信息通知", tone: "info", title: "地图视图已更新", message: "已切换到当前项目的管网视图。", lifetime: "3.2 秒后关闭" },
+  { key: "success", label: "成功通知", tone: "success", title: "操作已完成", message: "当前管网视图已导出，可以继续分析。", lifetime: "3.2 秒后关闭" },
+  { key: "warning", label: "警告通知", tone: "warning", title: "部分监测数据延迟", message: "最新读数尚未到达，请稍后查看。", lifetime: "手动关闭" },
+  { key: "error", label: "错误通知", tone: "error", title: "管网数据加载失败", message: "暂时无法连接数据源，请检查连接后重试。", lifetime: "手动关闭" },
+  { key: "loading", label: "加载通知", tone: "loading", title: "正在加载管网", message: "正在准备图层和监测数据，请稍候。", lifetime: "等待完成" }
+] satisfies (MapNoticeOptions & { key: string; label: string; lifetime: string })[];
+
+const extraKeys = ["report", "task", "long", ...Array.from({ length: 6 }, (_, index) => `batch-${index}`)];
+const noticeId = (key: string) => `dev-notice:${key}`;
+
+export function NoticeDevTools() {
+  const [feedback, setFeedback] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  function showLinked(key: string, target: "报告" | "任务", message?: string) {
+    showMapNotice({
+      id: noticeId(key),
+      tone: target === "报告" ? "success" : "warning",
+      title: `${target === "报告" ? "调查报告已更新" : "调查任务待处理"} · 测试`,
+      message: message ?? (target === "报告"
+        ? "城南片区压力异常调查报告已更新，可查看分析结论与处置建议。"
+        : "新收到一项管网异常调查任务，请查看现场情况与待办事项。"),
+      actionLabel: `查看${target}`,
+      onAction: () => setFeedback(`已触发“查看${target}”测试操作，通知仍保留。`)
+    });
+  }
+
+  function clearSamples() {
+    [...samples.map((sample) => sample.key), ...extraKeys].forEach((key) => dismissMapNotice(noticeId(key)));
+    setLoading(false);
+    setFeedback("已清除测试通知。");
+  }
+
+  return (
+    <section aria-label="通知测试" className="space-y-5">
+      <p className="text-xs leading-5 text-muted-foreground">
+        本地样例，仅当前页面生效。报告和任务入口只记录点击反馈，不创建真实业务数据。
+      </p>
+      <div className="space-y-2">
+        <h3 className="text-xs font-semibold">通知类型</h3>
+        <div className="grid grid-cols-2 gap-2">
+          {samples.map(({ key, label, lifetime, ...options }) => (
+            <Button key={key} type="button" variant="outline" aria-label={`测试${label}`}
+              className="h-auto min-h-14 flex-col items-start gap-1 px-3 py-2 text-xs"
+              onClick={() => {
+                showMapNotice({ ...options, id: noticeId(key), title: `${options.title} · 测试` });
+                if (key === "loading") setLoading(true);
+              }}>
+              <span>{label}</span>
+              <span className="font-normal text-muted-foreground">{lifetime}</span>
+            </Button>
+          ))}
+        </div>
+        <Button type="button" variant="ghost" size="sm" disabled={!loading}
+          onClick={() => {
+            showMapNotice({ id: noticeId("loading"), tone: "success", title: "管网加载完成 · 测试", message: "图层和监测数据已准备就绪。" });
+            setLoading(false);
+          }}>模拟加载完成</Button>
+      </div>
+      <div className="space-y-2 border-t border-border pt-4">
+        <h3 className="text-xs font-semibold">报告与任务入口</h3>
+        <p className="text-xs leading-5 text-muted-foreground">带操作入口的通知保留至手动关闭，点击查看后继续保留。</p>
+        <div className="flex flex-wrap gap-2">
+          <Button type="button" size="sm" variant="outline" onClick={() => showLinked("report", "报告")}>测试报告通知</Button>
+          <Button type="button" size="sm" variant="outline" onClick={() => showLinked("task", "任务")}>测试任务通知</Button>
+        </div>
+      </div>
+      <div className="space-y-2 border-t border-border pt-4">
+        <h3 className="text-xs font-semibold">布局与堆叠</h3>
+        <div className="flex flex-wrap gap-2">
+          <Button type="button" size="sm" variant="outline" onClick={() => showLinked("long", "报告",
+            "城南供水片区夜间压力持续下降，多处监测点出现关联异常。调查报告已整理受影响管段、关键监测读数、候选原因和后续核查建议，请结合现场情况查看并安排处置。关联编号：SCADA-PRESSURE-20261107-REPORT-000128。")}>测试长文本通知</Button>
+          <Button type="button" size="sm" variant="outline" onClick={() => {
+            Array.from({ length: 6 }, (_, index) => showLinked(`batch-${index}`, index % 2 ? "任务" : "报告", `第 ${index + 1} 条测试通知。手动关闭当前通知后，可继续查看其余通知。`));
+          }}>连续 6 条通知</Button>
+        </div>
+      </div>
+      <Button type="button" variant="outline" size="sm" onClick={clearSamples}>清除测试通知</Button>
+      {feedback ? <p role="status" className="text-xs leading-5 text-muted-foreground">{feedback}</p> : null}
+    </section>
+  );
+}