286 lines
13 KiB
TypeScript
286 lines
13 KiB
TypeScript
import { Check, Copy, Database, X } from "lucide-react";
|
|
import type { ComponentType } from "react";
|
|
import { useEffect, useRef, useState } from "react";
|
|
import type { WorkbenchAccess } from "../api/request-context";
|
|
import {
|
|
MAP_FOCUS_SURFACE_CLASS_NAME,
|
|
MAP_MAJOR_PANEL_RADIUS_CLASS_NAME,
|
|
showMapNotice
|
|
} from "@/features/map/core";
|
|
import { cn } from "@/shared/ui/cn";
|
|
import { Disclosure } from "@/shared/ui/disclosure";
|
|
import {
|
|
StatusBadge,
|
|
StatusDot,
|
|
type StatusTone
|
|
} from "@/shared/ui/status";
|
|
import type { WaterNetworkSourceId } from "../map/sources";
|
|
import type { DetailFeature } from "../types";
|
|
import { useElementGisProperties } from "../hooks/use-element-gis-properties";
|
|
import {
|
|
getFeaturePanelModel,
|
|
type FeaturePanelBadgeTone
|
|
} from "../utils/feature-properties";
|
|
import { presentGisAttributeGroup } from "../utils/gis-attribute-presentation";
|
|
import {
|
|
PipeFeatureIcon,
|
|
JunctionFeatureIcon,
|
|
PumpFeatureIcon,
|
|
ReservoirFeatureIcon,
|
|
ScadaFeatureIcon,
|
|
ValveFeatureIcon,
|
|
type SupplyFeatureIconProps
|
|
} from "./supply-feature-icons";
|
|
import { FeaturePropertyList } from "./feature-property-list";
|
|
|
|
type FeaturePopoverProps = {
|
|
feature: DetailFeature | null;
|
|
projectId: string | null;
|
|
getAccessToken?: WorkbenchAccess;
|
|
onClose: () => void;
|
|
};
|
|
|
|
const FEATURE_LAYER_META: Partial<Record<
|
|
WaterNetworkSourceId,
|
|
{
|
|
icon: ComponentType<SupplyFeatureIconProps>;
|
|
label: string;
|
|
headerClassName: string;
|
|
labelClassName: string;
|
|
iconClassName: string;
|
|
}
|
|
>> = {
|
|
pipes: { icon: PipeFeatureIcon, label: "管线", headerClassName: "bg-teal-50/70", labelClassName: "text-teal-800", iconClassName: "bg-teal-700 text-white ring-teal-900/10" },
|
|
junctions: { icon: JunctionFeatureIcon, label: "节点", headerClassName: "bg-[var(--action-soft)]/70", labelClassName: "text-[var(--action-blue-pressed)]", iconClassName: "bg-sky-700 text-white ring-sky-900/10" },
|
|
valves: { icon: ValveFeatureIcon, label: "阀门", headerClassName: "bg-[var(--action-soft)]/70", labelClassName: "text-[var(--action-blue-pressed)]", iconClassName: "bg-[var(--action-blue)] text-white ring-[var(--action-blue)]/10" },
|
|
reservoirs: { icon: ReservoirFeatureIcon, label: "水库", headerClassName: "bg-sky-50/70", labelClassName: "text-sky-900", iconClassName: "bg-sky-800 text-white ring-sky-900/10" },
|
|
scada: { icon: ScadaFeatureIcon, label: "SCADA", headerClassName: "bg-[var(--surface-reading)]/80", labelClassName: "text-slate-800", iconClassName: "bg-slate-700 text-white ring-slate-900/10" },
|
|
pumps: { icon: PumpFeatureIcon, label: "泵", headerClassName: "bg-cyan-50/70", labelClassName: "text-cyan-800", iconClassName: "bg-cyan-800 text-white ring-cyan-900/10" },
|
|
tanks: { icon: ReservoirFeatureIcon, label: "水箱", headerClassName: "bg-teal-50/70", labelClassName: "text-teal-800", iconClassName: "bg-teal-700 text-white ring-teal-900/10" },
|
|
water_quality_monitoring_points: { icon: ScadaFeatureIcon, label: "水质监测点", headerClassName: "bg-teal-50/70", labelClassName: "text-teal-800", iconClassName: "bg-teal-700 text-white ring-teal-900/10" }
|
|
};
|
|
|
|
const SOURCE_GIS_LAYER_META = {
|
|
icon: JunctionFeatureIcon,
|
|
label: "GIS 交付要素",
|
|
headerClassName: "bg-[var(--surface-reading)]/80",
|
|
labelClassName: "text-slate-700",
|
|
iconClassName: "bg-slate-600 text-white ring-slate-900/10"
|
|
};
|
|
|
|
const badgeTones = {
|
|
active: "success",
|
|
inactive: "neutral",
|
|
warning: "warning",
|
|
critical: "danger",
|
|
info: "info"
|
|
} satisfies Record<FeaturePanelBadgeTone, StatusTone>;
|
|
|
|
export function FeaturePopover({
|
|
feature,
|
|
projectId,
|
|
getAccessToken,
|
|
onClose
|
|
}: FeaturePopoverProps) {
|
|
const [copiedId, setCopiedId] = useState<string | null>(null);
|
|
const [expandedGisFeatureKey, setExpandedGisFeatureKey] = useState<string | null>(null);
|
|
const copyResetTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
const gisProperties = useElementGisProperties(feature, projectId, getAccessToken);
|
|
const featureKey = feature ? `${feature.layer}:${feature.id}` : null;
|
|
const gisExpanded = featureKey !== null && expandedGisFeatureKey === featureKey;
|
|
|
|
useEffect(() => () => {
|
|
if (copyResetTimeoutRef.current) {
|
|
clearTimeout(copyResetTimeoutRef.current);
|
|
}
|
|
}, []);
|
|
|
|
if (!feature) {
|
|
return null;
|
|
}
|
|
|
|
const panelModel = getFeaturePanelModel(feature.layer, feature.properties, feature.id);
|
|
const layerMeta = FEATURE_LAYER_META[feature.layer] ?? SOURCE_GIS_LAYER_META;
|
|
const LayerIcon = layerMeta.icon;
|
|
const copied = copiedId === panelModel.id;
|
|
const canCopy = panelModel.id !== "暂无";
|
|
|
|
const handleCopyId = async () => {
|
|
try {
|
|
if (!navigator.clipboard) {
|
|
throw new Error("Clipboard API unavailable");
|
|
}
|
|
|
|
await navigator.clipboard.writeText(panelModel.id);
|
|
setCopiedId(panelModel.id);
|
|
|
|
if (copyResetTimeoutRef.current) {
|
|
clearTimeout(copyResetTimeoutRef.current);
|
|
}
|
|
|
|
copyResetTimeoutRef.current = setTimeout(() => setCopiedId(null), 1500);
|
|
} catch {
|
|
showMapNotice({
|
|
tone: "error",
|
|
title: "无法复制编号",
|
|
message: "请手动选择编号后复制。"
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<aside
|
|
aria-label="要素属性"
|
|
className={cn(
|
|
"pointer-events-auto absolute left-1/2 top-[92px] z-[60] flex max-h-[calc(100dvh-116px)] -translate-x-1/2 flex-col overflow-hidden transition-[width] duration-200 motion-reduce:transition-none",
|
|
gisExpanded
|
|
? "w-[min(560px,calc(100vw-24px))]"
|
|
: "w-[min(380px,calc(100vw-24px))]",
|
|
MAP_FOCUS_SURFACE_CLASS_NAME,
|
|
MAP_MAJOR_PANEL_RADIUS_CLASS_NAME
|
|
)}
|
|
>
|
|
<header className={cn("px-4 pb-3 pt-4", layerMeta.headerClassName)}>
|
|
<div className="grid grid-cols-[48px_minmax(0,1fr)_auto] items-start gap-3">
|
|
<span className={cn("grid h-12 w-12 place-items-center rounded-full ring-1", layerMeta.iconClassName)} aria-hidden="true">
|
|
<LayerIcon size={24} />
|
|
</span>
|
|
|
|
<div className="min-w-0">
|
|
<div className="flex min-w-0 flex-nowrap items-center gap-1.5">
|
|
<span className={cn("min-w-0 truncate text-xs font-semibold", layerMeta.labelClassName)}>{layerMeta.label}</span>
|
|
{panelModel.badge ? (
|
|
<StatusBadge
|
|
tone={badgeTones[panelModel.badge.tone]}
|
|
icon={<StatusDot tone={badgeTones[panelModel.badge.tone]} />}
|
|
>
|
|
{panelModel.badge.label}
|
|
</StatusBadge>
|
|
) : null}
|
|
</div>
|
|
<h3 className="mt-1 truncate text-base font-semibold text-slate-950">{feature.title}</h3>
|
|
<p className="mt-0.5 truncate text-xs text-slate-600 tabular-nums">编号 {panelModel.id}</p>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-0.5">
|
|
{canCopy ? (
|
|
<button type="button" aria-label={copied ? "编号已复制" : "复制编号"} title={copied ? "编号已复制" : "复制编号"} onClick={() => void handleCopyId()} className="relative grid h-10 w-10 shrink-0 place-items-center rounded-xl text-[var(--ink-muted)] [@media(hover:hover)]:hover:bg-[var(--surface-reading)]/70 [@media(hover:hover)]:hover:text-slate-950">
|
|
<Copy size={15} aria-hidden="true" className={cn("absolute transition-[opacity,transform] duration-150", copied ? "scale-90 opacity-0" : "scale-100 opacity-100")} />
|
|
<Check size={16} aria-hidden="true" className={cn("status-tone-success absolute text-[var(--status-foreground)] transition-[opacity,transform] duration-150", copied ? "scale-100 opacity-100" : "scale-90 opacity-0")} />
|
|
</button>
|
|
) : null}
|
|
<button type="button" aria-label="关闭要素信息" title="关闭要素信息" onClick={onClose} className="grid h-10 w-10 shrink-0 place-items-center rounded-xl text-[var(--ink-muted)] [@media(hover:hover)]:hover:bg-[var(--surface-reading)]/70 [@media(hover:hover)]:hover:text-slate-950">
|
|
<X size={16} aria-hidden="true" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="min-h-0 overflow-y-auto overscroll-contain px-4 py-3">
|
|
{panelModel.attributes.length > 0 ? (
|
|
<>
|
|
<div className="mb-2 flex items-center gap-2 text-xs font-semibold text-[var(--ink-muted)]">
|
|
<Database size={14} aria-hidden="true" />
|
|
设施属性
|
|
</div>
|
|
<FeaturePropertyList entries={panelModel.attributes} variant="popover" />
|
|
</>
|
|
) : (
|
|
<p className="py-3 text-center text-sm text-[var(--ink-muted)]">暂无可展示属性</p>
|
|
)}
|
|
|
|
{gisProperties.groups.length > 0 || gisProperties.status === "error" ? (
|
|
<Disclosure
|
|
key={featureKey}
|
|
className="mt-2 border-t border-[var(--surface-divider)] pt-1"
|
|
onToggle={(event) => {
|
|
if (event.target === event.currentTarget) {
|
|
setExpandedGisFeatureKey(event.currentTarget.open ? featureKey : null);
|
|
}
|
|
}}
|
|
label={(
|
|
<span className="flex min-w-0 flex-1 items-center justify-between gap-3">
|
|
<span>GIS 台账属性</span>
|
|
<span className="shrink-0 text-[11px] font-normal text-[var(--ink-muted)]">
|
|
{gisProperties.status === "error"
|
|
? "读取失败"
|
|
: `${gisProperties.groups.length} 份`}
|
|
</span>
|
|
</span>
|
|
)}
|
|
>
|
|
<div className="pb-1 pl-6">
|
|
{gisProperties.status === "error" ? (
|
|
<p className="py-3 text-xs text-rose-700">GIS 台账属性暂时无法读取</p>
|
|
) : gisProperties.groups.map((group) => {
|
|
const presentation = presentGisAttributeGroup(group);
|
|
return (
|
|
<Disclosure
|
|
key={`${group.layer_key}:${group.source_fid}`}
|
|
className="border-b border-[var(--surface-divider)] last:border-b-0"
|
|
label={(
|
|
<span className="min-w-0">
|
|
<span className="flex min-w-0 items-center gap-2">
|
|
<span className="truncate text-slate-700">{group.layer_name}</span>
|
|
<span className="shrink-0 rounded-full bg-[var(--surface-control)] px-1.5 py-0.5 text-[10px] font-medium text-[var(--ink-muted)]">
|
|
{presentation.datasetRole}
|
|
</span>
|
|
</span>
|
|
<span className="block text-[11px] font-normal text-[var(--ink-muted)] tabular-nums">
|
|
{group.source_date} · {presentation.usefulCount} 个有效字段
|
|
</span>
|
|
</span>
|
|
)}
|
|
>
|
|
<div className="space-y-2 pb-3 pl-6">
|
|
<p className="text-[11px] leading-5 text-[var(--ink-muted)]">
|
|
{presentation.description}
|
|
</p>
|
|
{presentation.summary.length > 0 ? (
|
|
<dl className="grid grid-cols-2 gap-1.5 sm:grid-cols-3">
|
|
{presentation.summary.map((entry) => (
|
|
<div key={entry.key} className="min-w-0 rounded-lg border border-[var(--surface-divider)] bg-[var(--surface-reading)]/70 px-2.5 py-2">
|
|
<dt className="truncate text-[10px] font-medium text-[var(--ink-muted)]">{entry.label}</dt>
|
|
<dd className="mt-0.5 truncate text-xs font-semibold text-slate-800" title={entry.value}>{entry.value}</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
) : null}
|
|
{presentation.sections.map((section) => (
|
|
<Disclosure
|
|
key={section.id}
|
|
className="border-t border-[var(--surface-divider)]"
|
|
label={`${section.label} · ${section.entries.length} 项`}
|
|
>
|
|
<div className="pb-2 pl-6">
|
|
<FeaturePropertyList entries={section.entries} variant="popover" />
|
|
</div>
|
|
</Disclosure>
|
|
))}
|
|
<Disclosure
|
|
className="border-t border-[var(--surface-divider)]"
|
|
label={`全部原始字段 · ${presentation.rawCount} 项`}
|
|
>
|
|
<div className="pb-2 pl-6">
|
|
<p className="pb-2 text-[11px] leading-5 text-[var(--ink-muted)]">
|
|
包含源系统编码、空值和兼容字段，仅用于核对原始数据。
|
|
</p>
|
|
<FeaturePropertyList entries={presentation.rawEntries} variant="popover" />
|
|
</div>
|
|
</Disclosure>
|
|
</div>
|
|
</Disclosure>
|
|
);
|
|
})}
|
|
</div>
|
|
</Disclosure>
|
|
) : null}
|
|
</div>
|
|
|
|
<span className="sr-only" aria-live="polite">
|
|
{copied ? "编号已复制" : ""}
|
|
</span>
|
|
</aside>
|
|
);
|
|
}
|