feat(workbench): integrate runtime data and map tooling
This commit is contained in:
@@ -16,6 +16,7 @@ export type MapControlPanelProps = {
|
||||
description?: string;
|
||||
icon: LucideIcon;
|
||||
widthClassName?: string;
|
||||
contentClassName?: string;
|
||||
visible?: boolean;
|
||||
children: ReactNode;
|
||||
};
|
||||
@@ -25,6 +26,7 @@ export function MapControlPanel({
|
||||
description,
|
||||
icon: Icon,
|
||||
widthClassName = "w-[292px]",
|
||||
contentClassName,
|
||||
visible = true,
|
||||
children
|
||||
}: MapControlPanelProps) {
|
||||
@@ -51,7 +53,7 @@ export function MapControlPanel({
|
||||
{description ? <p className="mt-0.5 truncate text-xs text-slate-500">{description}</p> : null}
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative space-y-3">{children}</div>
|
||||
<div className={cn("relative space-y-3", contentClassName)}>{children}</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -11,9 +11,26 @@ export type MapLayerControlItem = {
|
||||
id: string;
|
||||
label: string;
|
||||
description?: string;
|
||||
featureCount?: number;
|
||||
minZoom?: number;
|
||||
visible: boolean;
|
||||
disabled?: boolean;
|
||||
locked?: boolean;
|
||||
group?: string;
|
||||
groupLabel?: string;
|
||||
groupDescription?: string;
|
||||
groupDefaultOpen?: boolean;
|
||||
collection?: string;
|
||||
collectionLabel?: string;
|
||||
visual?: MapLayerControlVisual;
|
||||
};
|
||||
|
||||
export type MapLayerControlVisual = {
|
||||
kind: "line" | "line-stack" | "point" | "ring" | "area" | "image";
|
||||
color?: string;
|
||||
colors?: string[];
|
||||
dashed?: boolean;
|
||||
imageSrc?: string;
|
||||
};
|
||||
|
||||
type MapLayerControlProps = {
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { Check, Eye, EyeOff, Lock, Map } from "lucide-react";
|
||||
import { Check, ChevronRight, Eye, EyeOff, Lock, Map as MapIcon } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { cn } from "@/shared/ui/cn";
|
||||
import type { BaseLayerOption } from "./base-layers-control";
|
||||
import type { MapLayerControlItem } from "./layer-control";
|
||||
import type { MapLayerControlItem, MapLayerControlVisual } from "./layer-control";
|
||||
import {
|
||||
MAP_COMPACT_RADIUS_CLASS_NAME,
|
||||
MAP_ICON_CELL_RADIUS_CLASS_NAME,
|
||||
@@ -43,50 +44,244 @@ type LayerVisibilitySectionProps = {
|
||||
};
|
||||
|
||||
function LayerVisibilitySection({ items, onToggleLayer }: LayerVisibilitySectionProps) {
|
||||
return (
|
||||
<div>
|
||||
<div className="mb-1.5 px-1 text-xs font-semibold text-slate-500">业务图层</div>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{items.map((item) => {
|
||||
const Icon = item.visible ? Eye : EyeOff;
|
||||
const disabled = item.disabled || item.locked;
|
||||
const groups = groupLayerItems(items);
|
||||
const [openGroupIds, setOpenGroupIds] = useState(
|
||||
() => new Set(groups.filter((group) => group.defaultOpen).map((group) => group.id))
|
||||
);
|
||||
|
||||
return (
|
||||
<button
|
||||
key={item.id}
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
aria-pressed={item.visible}
|
||||
aria-label={`${item.label}${item.description ? `，${item.description}` : ""}`}
|
||||
title={item.description}
|
||||
onClick={() => onToggleLayer(item.id, !item.visible)}
|
||||
className={cn(
|
||||
"relative flex min-h-[76px] w-full flex-col items-center justify-center gap-1.5 border px-1.5 py-2 text-center",
|
||||
MAP_COMPACT_RADIUS_CLASS_NAME,
|
||||
item.visible
|
||||
? "border-blue-200 bg-blue-50/90 text-blue-950 shadow-xs shadow-blue-950/5"
|
||||
: "surface-well border-transparent text-slate-500 hover:border-slate-200 hover:bg-white",
|
||||
disabled && "cursor-not-allowed opacity-60 hover:bg-transparent"
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
"grid h-8 w-8 shrink-0 place-items-center transition-colors",
|
||||
MAP_ICON_CELL_RADIUS_CLASS_NAME,
|
||||
item.visible ? "bg-blue-600 text-white" : "bg-slate-100 text-slate-400"
|
||||
)}
|
||||
>
|
||||
{item.locked ? <Lock size={15} aria-hidden="true" /> : <Icon size={15} aria-hidden="true" />}
|
||||
</span>
|
||||
<span className="block w-full truncate text-xs font-semibold leading-tight">{item.label}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
const handleGroupToggle = (groupId: string, open: boolean) => {
|
||||
setOpenGroupIds((current) => {
|
||||
const next = new Set(current);
|
||||
if (open) next.add(groupId);
|
||||
else next.delete(groupId);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{groups.map((group) => (
|
||||
<details
|
||||
key={group.id}
|
||||
open={openGroupIds.has(group.id)}
|
||||
onToggle={(event) => handleGroupToggle(group.id, event.currentTarget.open)}
|
||||
className="surface-well group/layer overflow-hidden rounded-xl border"
|
||||
>
|
||||
<summary className="flex min-h-11 cursor-pointer list-none items-center gap-2 px-2.5 py-1.5 text-left marker:content-none active:scale-[0.99]">
|
||||
<ChevronRight
|
||||
size={14}
|
||||
aria-hidden="true"
|
||||
className="shrink-0 text-slate-400 transition-transform duration-150 ease-out motion-reduce:transition-none group-open/layer:rotate-90"
|
||||
/>
|
||||
<span className="min-w-0 flex-1">
|
||||
<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>
|
||||
<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.filter((item) => item.visible).length}/{group.items.length}
|
||||
</span>
|
||||
</summary>
|
||||
<div className="border-t border-slate-200/70 bg-white/45 p-1.5">
|
||||
{groupLayerItemsByCollection(group.items).map((collection) => (
|
||||
<div key={collection.id} className="not-first:mt-2.5">
|
||||
{collection.label ? (
|
||||
<div className="mb-1 flex items-center gap-2 px-1.5 text-[10px] font-medium text-slate-500">
|
||||
<span className="truncate">{collection.label}</span>
|
||||
<span className="h-px min-w-3 flex-1 bg-slate-200/80" aria-hidden="true" />
|
||||
<span className="shrink-0 tabular-nums">{collection.items.length} 层</span>
|
||||
</div>
|
||||
) : null}
|
||||
<div className="space-y-1">
|
||||
{collection.items.map((item) => (
|
||||
<LayerVisibilityRow
|
||||
key={item.id}
|
||||
item={item}
|
||||
onToggleLayer={onToggleLayer}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</details>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function groupLayerItems(items: MapLayerControlItem[]) {
|
||||
const groups = new Map<string, {
|
||||
id: string;
|
||||
label: string;
|
||||
description?: string;
|
||||
defaultOpen: boolean;
|
||||
items: MapLayerControlItem[];
|
||||
}>();
|
||||
items.forEach((item) => {
|
||||
const id = item.group ?? "business";
|
||||
const existing = groups.get(id);
|
||||
if (existing) {
|
||||
existing.items.push(item);
|
||||
return;
|
||||
}
|
||||
groups.set(id, {
|
||||
id,
|
||||
label: item.groupLabel ?? "业务图层",
|
||||
description: item.groupDescription,
|
||||
defaultOpen: item.groupDefaultOpen ?? true,
|
||||
items: [item]
|
||||
});
|
||||
});
|
||||
return [...groups.values()];
|
||||
}
|
||||
|
||||
function groupLayerItemsByCollection(items: MapLayerControlItem[]) {
|
||||
const collections = new Map<string, {
|
||||
id: string;
|
||||
label?: string;
|
||||
items: MapLayerControlItem[];
|
||||
}>();
|
||||
items.forEach((item) => {
|
||||
const id = item.collection ?? "default";
|
||||
const existing = collections.get(id);
|
||||
if (existing) {
|
||||
existing.items.push(item);
|
||||
return;
|
||||
}
|
||||
collections.set(id, {
|
||||
id,
|
||||
label: item.collectionLabel,
|
||||
items: [item]
|
||||
});
|
||||
});
|
||||
return [...collections.values()];
|
||||
}
|
||||
|
||||
function LayerVisibilityRow({
|
||||
item,
|
||||
onToggleLayer
|
||||
}: {
|
||||
item: MapLayerControlItem;
|
||||
onToggleLayer: (id: string, visible: boolean) => void;
|
||||
}) {
|
||||
const Icon = item.visible ? Eye : EyeOff;
|
||||
const disabled = item.disabled || item.locked;
|
||||
const meta = formatLayerMeta(item);
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
aria-pressed={item.visible}
|
||||
aria-label={`${item.label}${meta ? `，${meta}` : ""}`}
|
||||
title={meta}
|
||||
onClick={() => onToggleLayer(item.id, !item.visible)}
|
||||
className={cn(
|
||||
"flex min-h-12 w-full items-center gap-2.5 border px-2 py-1.5 text-left transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-out motion-reduce:transition-none active:scale-[0.98] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500/60 focus-visible:ring-offset-1",
|
||||
MAP_COMPACT_RADIUS_CLASS_NAME,
|
||||
item.visible
|
||||
? "border-blue-200/90 bg-white text-slate-950 shadow-xs shadow-slate-950/5"
|
||||
: "border-transparent bg-slate-100/55 text-slate-600 [@media(hover:hover)]:hover:border-slate-200 [@media(hover:hover)]:hover:bg-white/75",
|
||||
disabled && "cursor-not-allowed opacity-55 active:scale-100"
|
||||
)}
|
||||
>
|
||||
<LayerVisual visual={item.visual} visible={item.visible} />
|
||||
<span className="min-w-0 flex-1">
|
||||
<span className="block truncate text-xs font-semibold leading-tight">{item.label}</span>
|
||||
{meta ? (
|
||||
<span className="mt-0.5 block truncate text-[10px] leading-tight text-slate-500">
|
||||
{meta}
|
||||
</span>
|
||||
) : null}
|
||||
</span>
|
||||
<span
|
||||
className={cn(
|
||||
"grid h-8 w-8 shrink-0 place-items-center rounded-lg transition-[background-color,color,opacity] duration-150 motion-reduce:transition-none",
|
||||
item.visible ? "bg-blue-50 text-blue-700" : "bg-transparent text-slate-400"
|
||||
)}
|
||||
>
|
||||
{item.locked ? <Lock size={15} aria-hidden="true" /> : <Icon size={15} aria-hidden="true" />}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function formatLayerMeta(item: MapLayerControlItem) {
|
||||
const details = [item.description];
|
||||
if (item.featureCount !== undefined) details.push(formatFeatureCount(item.featureCount));
|
||||
if (item.minZoom !== undefined) details.push(`${item.minZoom} 级起`);
|
||||
return details.filter(Boolean).join(" · ");
|
||||
}
|
||||
|
||||
function formatFeatureCount(count: number) {
|
||||
return `${new Intl.NumberFormat("zh-CN", {
|
||||
notation: count >= 10_000 ? "compact" : "standard",
|
||||
maximumFractionDigits: 1
|
||||
}).format(count)} 要素`;
|
||||
}
|
||||
|
||||
function LayerVisual({
|
||||
visual,
|
||||
visible
|
||||
}: {
|
||||
visual?: MapLayerControlVisual;
|
||||
visible: boolean;
|
||||
}) {
|
||||
const color = visual?.color ?? "#64748B";
|
||||
return (
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={cn(
|
||||
"grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-slate-50 shadow-inner shadow-slate-950/5 transition-opacity duration-150 motion-reduce:transition-none",
|
||||
!visible && "opacity-45"
|
||||
)}
|
||||
>
|
||||
{visual?.kind === "image" && visual.imageSrc ? (
|
||||
<img src={visual.imageSrc} alt="" width={24} height={24} />
|
||||
) : visual?.kind === "line-stack" ? (
|
||||
<svg width="26" height="22" viewBox="0 0 26 22">
|
||||
{(visual.colors?.length ? visual.colors : [color, color, color]).slice(0, 3).map((lineColor, index) => (
|
||||
<g key={`${lineColor}-${index}`}>
|
||||
<line x1="2" y1={5 + index * 6} x2="24" y2={5 + index * 6} stroke="white" strokeWidth={4 + index} strokeLinecap="round" />
|
||||
<line x1="2" y1={5 + index * 6} x2="24" y2={5 + index * 6} stroke={lineColor} strokeWidth={1.5 + index * 0.7} strokeLinecap="round" />
|
||||
</g>
|
||||
))}
|
||||
</svg>
|
||||
) : visual?.kind === "line" ? (
|
||||
<svg width="26" height="12" viewBox="0 0 26 12">
|
||||
<line x1="2" y1="6" x2="24" y2="6" stroke="white" strokeWidth="6" strokeLinecap="round" />
|
||||
<line
|
||||
x1="2"
|
||||
y1="6"
|
||||
x2="24"
|
||||
y2="6"
|
||||
stroke={color}
|
||||
strokeWidth="3"
|
||||
strokeLinecap="round"
|
||||
strokeDasharray={visual.dashed ? "5 3" : undefined}
|
||||
/>
|
||||
</svg>
|
||||
) : visual?.kind === "ring" ? (
|
||||
<span className="h-3.5 w-3.5 rounded-full border-[3px] bg-white" style={{ borderColor: color }} />
|
||||
) : visual?.kind === "area" ? (
|
||||
<span
|
||||
className="h-4 w-5 rounded-[4px] border"
|
||||
style={{ backgroundColor: `${color}24`, borderColor: color }}
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
className="h-3.5 w-3.5 rounded-full"
|
||||
style={{ backgroundColor: color, boxShadow: `0 0 0 2px white, 0 0 0 3px ${color}` }}
|
||||
/>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
type BaseLayerSectionProps = {
|
||||
options: BaseLayerOption[];
|
||||
activeLayerId: string;
|
||||
@@ -98,7 +293,7 @@ function BaseLayerSection({ options, activeLayerId, onSelectLayer }: BaseLayerSe
|
||||
<div>
|
||||
<div className="mb-1.5 flex items-center justify-between px-1">
|
||||
<span className="text-xs font-semibold text-slate-500">底图</span>
|
||||
<Map size={14} aria-hidden="true" className="text-slate-400" />
|
||||
<MapIcon size={14} aria-hidden="true" className="text-slate-400" />
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{options.map((option) => {
|
||||
|
||||
@@ -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 }} />;
|
||||
}
|
||||
|
||||
@@ -1,13 +1,9 @@
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import { Copy, Ruler, Trash2 } from "lucide-react";
|
||||
import { ChevronRight, Copy, Ruler, Trash2 } from "lucide-react";
|
||||
import { cn } from "@/shared/ui/cn";
|
||||
import {
|
||||
MapActionRow,
|
||||
MapModeButton,
|
||||
MapPanelSection
|
||||
} from "./control-panel";
|
||||
import {
|
||||
MAP_COMPACT_RADIUS_CLASS_NAME,
|
||||
MAP_ICON_CELL_RADIUS_CLASS_NAME,
|
||||
MAP_READABLE_RADIUS_CLASS_NAME,
|
||||
MAP_READABLE_SURFACE_CLASS_NAME,
|
||||
MAP_READABLE_SURFACE_STRONG_CLASS_NAME
|
||||
@@ -36,12 +32,18 @@ export type MapMeasureAction = {
|
||||
description: string;
|
||||
icon?: LucideIcon;
|
||||
strong?: boolean;
|
||||
variant?: "default" | "primary";
|
||||
variant?: "default" | "primary" | "active";
|
||||
tone?: "default" | "danger";
|
||||
disabled?: boolean;
|
||||
onClick?: () => void;
|
||||
};
|
||||
|
||||
export type MapMeasureStatus = {
|
||||
label: string;
|
||||
description: string;
|
||||
tone?: "idle" | "active" | "ready" | "disabled";
|
||||
};
|
||||
|
||||
export type MapMeasurePanelProps = {
|
||||
modes: MapMeasureMode[];
|
||||
activeModeId: string;
|
||||
@@ -52,6 +54,7 @@ export type MapMeasurePanelProps = {
|
||||
units: MapMeasureUnit[];
|
||||
activeUnitId: string;
|
||||
actions: MapMeasureAction[];
|
||||
status: MapMeasureStatus;
|
||||
onSelectMode?: (id: string) => void;
|
||||
onSelectUnit?: (id: string) => void;
|
||||
};
|
||||
@@ -66,90 +69,227 @@ export function MapMeasurePanel({
|
||||
units,
|
||||
activeUnitId,
|
||||
actions,
|
||||
status,
|
||||
onSelectMode,
|
||||
onSelectUnit
|
||||
}: MapMeasurePanelProps) {
|
||||
const primaryAction = actions[0];
|
||||
const secondaryActions = actions.slice(1);
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<MapPanelSection title="模式">
|
||||
<div className={cn("surface-well grid grid-cols-3 gap-1.5 border p-1.5", MAP_READABLE_RADIUS_CLASS_NAME)}>
|
||||
<section>
|
||||
<div className="mb-1.5 px-1 text-xs font-semibold text-slate-500 max-lg:hidden">
|
||||
测量类型
|
||||
</div>
|
||||
<div
|
||||
role="group"
|
||||
aria-label="测量类型"
|
||||
className={cn("surface-well grid grid-cols-3 gap-1 border p-1", MAP_READABLE_RADIUS_CLASS_NAME)}
|
||||
>
|
||||
{modes.map((mode) => (
|
||||
<MapModeButton
|
||||
<button
|
||||
key={mode.id}
|
||||
icon={mode.icon}
|
||||
label={mode.label}
|
||||
active={mode.id === activeModeId}
|
||||
type="button"
|
||||
aria-pressed={mode.id === activeModeId}
|
||||
disabled={mode.disabled}
|
||||
onClick={() => onSelectMode?.(mode.id)}
|
||||
/>
|
||||
className={cn(
|
||||
"flex h-10 min-w-0 touch-manipulation items-center justify-center gap-1.5 px-2 text-xs font-semibold transition-[color,background-color,box-shadow,transform] duration-150 ease-out focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[var(--action-focus-ring)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--action-focus-offset)] active:scale-95 motion-reduce:transition-none",
|
||||
MAP_ICON_CELL_RADIUS_CLASS_NAME,
|
||||
mode.id === activeModeId
|
||||
? "bg-blue-600 text-white shadow-[var(--action-shadow-primary)]"
|
||||
: "text-slate-600 [@media(hover:hover)]:hover:bg-white/85 [@media(hover:hover)]:hover:text-blue-700",
|
||||
mode.disabled && "cursor-not-allowed opacity-45 active:scale-100"
|
||||
)}
|
||||
>
|
||||
<mode.icon size={15} strokeWidth={2} aria-hidden="true" className="shrink-0" />
|
||||
<span className="truncate">{mode.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</MapPanelSection>
|
||||
</section>
|
||||
|
||||
<MapPanelSection title="结果">
|
||||
<div className={cn("border border-blue-100 bg-blue-50/95 p-2", MAP_READABLE_RADIUS_CLASS_NAME)}>
|
||||
<div className={cn("p-3", MAP_READABLE_RADIUS_CLASS_NAME, MAP_READABLE_SURFACE_STRONG_CLASS_NAME)}>
|
||||
<div className="min-w-0 border-b border-slate-100 pb-3">
|
||||
<section
|
||||
aria-label="测量读数"
|
||||
className={cn("overflow-hidden", MAP_READABLE_RADIUS_CLASS_NAME, MAP_READABLE_SURFACE_STRONG_CLASS_NAME)}
|
||||
>
|
||||
<div className="px-3.5 py-2.5">
|
||||
<div className="flex min-w-0 items-start justify-between gap-3">
|
||||
<div className="min-w-0 pt-0.5">
|
||||
<div className="text-xs font-semibold text-blue-700">{resultLabel}</div>
|
||||
<div className="mt-1 flex min-w-0 items-baseline gap-1.5 text-slate-950">
|
||||
<span className="truncate text-2xl font-semibold leading-none">{resultValue}</span>
|
||||
<div className="mt-1.5 flex min-w-0 items-baseline gap-1.5 text-slate-950">
|
||||
<span className="truncate text-[32px] font-semibold leading-none tracking-[-0.02em] tabular-nums">
|
||||
{resultValue}
|
||||
</span>
|
||||
<span className="shrink-0 text-xs font-semibold text-slate-500">{resultUnit}</span>
|
||||
</div>
|
||||
</div>
|
||||
{metrics.length > 0 ? (
|
||||
<div className="mt-2 grid grid-cols-[repeat(auto-fit,minmax(92px,1fr))] gap-1.5">
|
||||
{metrics.map((metric) => (
|
||||
<div
|
||||
key={metric.label}
|
||||
className={cn("min-w-0 px-2.5 py-1.5 text-left", MAP_COMPACT_RADIUS_CLASS_NAME, MAP_READABLE_SURFACE_CLASS_NAME)}
|
||||
>
|
||||
<div className="truncate text-xs text-slate-500">{metric.label}</div>
|
||||
<div className="mt-0.5 truncate text-sm font-semibold text-slate-900">{metric.value}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="mt-3 grid grid-cols-[repeat(auto-fit,minmax(0,1fr))] gap-1.5">
|
||||
{units.map((unit) => (
|
||||
<button
|
||||
key={unit.id}
|
||||
type="button"
|
||||
onClick={() => onSelectUnit?.(unit.id)}
|
||||
className={cn(
|
||||
"h-10 text-xs font-semibold",
|
||||
MAP_COMPACT_RADIUS_CLASS_NAME,
|
||||
unit.id === activeUnitId
|
||||
? "bg-blue-600 text-white"
|
||||
: "surface-control text-slate-600 hover:text-blue-700"
|
||||
)}
|
||||
>
|
||||
{unit.label}
|
||||
</button>
|
||||
))}
|
||||
<div
|
||||
role="group"
|
||||
aria-label="测量单位"
|
||||
className={cn("surface-well grid shrink-0 grid-cols-2 gap-1 border p-1", MAP_READABLE_RADIUS_CLASS_NAME)}
|
||||
>
|
||||
{units.map((unit) => (
|
||||
<button
|
||||
key={unit.id}
|
||||
type="button"
|
||||
aria-pressed={unit.id === activeUnitId}
|
||||
onClick={() => onSelectUnit?.(unit.id)}
|
||||
className={cn(
|
||||
"h-10 min-w-10 touch-manipulation px-2 text-xs font-semibold transition-[color,background-color,box-shadow,transform] duration-150 ease-out focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[var(--action-focus-ring)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--action-focus-offset)] active:scale-95 motion-reduce:transition-none",
|
||||
MAP_ICON_CELL_RADIUS_CLASS_NAME,
|
||||
unit.id === activeUnitId
|
||||
? "bg-blue-600 text-white shadow-[var(--action-shadow-primary)]"
|
||||
: "text-slate-600 [@media(hover:hover)]:hover:bg-white/85 [@media(hover:hover)]:hover:text-blue-700"
|
||||
)}
|
||||
>
|
||||
{unit.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</MapPanelSection>
|
||||
|
||||
<MapPanelSection title="操作">
|
||||
{actions.map((action) => (
|
||||
<MapActionRow
|
||||
key={action.id}
|
||||
icon={action.icon ?? getDefaultActionIcon(action.id)}
|
||||
label={action.label}
|
||||
description={action.description}
|
||||
strong={action.strong}
|
||||
variant={action.variant}
|
||||
tone={action.tone}
|
||||
disabled={action.disabled}
|
||||
onClick={action.onClick}
|
||||
{metrics.length > 0 ? (
|
||||
<dl className="grid grid-cols-[repeat(auto-fit,minmax(92px,1fr))] border-t border-slate-200/80">
|
||||
{metrics.map((metric, index) => (
|
||||
<div
|
||||
key={metric.label}
|
||||
className={cn("min-w-0 px-3.5 py-2", index > 0 && "border-l border-slate-200/80")}
|
||||
>
|
||||
<dt className="truncate text-[11px] text-slate-500">{metric.label}</dt>
|
||||
<dd className="mt-0.5 truncate text-sm font-semibold tabular-nums text-slate-900">
|
||||
{metric.value}
|
||||
</dd>
|
||||
</div>
|
||||
))}
|
||||
</dl>
|
||||
) : null}
|
||||
|
||||
<div
|
||||
role="status"
|
||||
className={cn(
|
||||
"flex min-h-10 items-center gap-2.5 border-t px-3.5 py-2",
|
||||
status.tone === "active"
|
||||
? "border-blue-100 bg-blue-50/90"
|
||||
: status.tone === "ready"
|
||||
? "border-emerald-100 bg-emerald-50/80"
|
||||
: "border-slate-200/80 bg-slate-50/75"
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
"h-2 w-2 shrink-0 rounded-full",
|
||||
status.tone === "active"
|
||||
? "bg-blue-600 motion-safe:animate-pulse"
|
||||
: status.tone === "ready"
|
||||
? "bg-emerald-500"
|
||||
: status.tone === "disabled"
|
||||
? "bg-amber-400"
|
||||
: "bg-slate-400"
|
||||
)}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
))}
|
||||
</MapPanelSection>
|
||||
<div className="flex min-w-0 items-baseline gap-2">
|
||||
<div className="shrink-0 text-xs font-semibold text-slate-800">{status.label}</div>
|
||||
<div className="truncate text-[11px] text-slate-500">{status.description}</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{primaryAction ? (
|
||||
<section aria-label="测量操作" className="space-y-2">
|
||||
<MeasureActionButton action={primaryAction} primary />
|
||||
{secondaryActions.length > 0 ? (
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{secondaryActions.map((action) => (
|
||||
<MeasureActionButton key={action.id} action={action} />
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</section>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MeasureActionButton({
|
||||
action,
|
||||
primary = false
|
||||
}: {
|
||||
action: MapMeasureAction;
|
||||
primary?: boolean;
|
||||
}) {
|
||||
const Icon = action.icon ?? getDefaultActionIcon(action.id);
|
||||
const danger = action.tone === "danger";
|
||||
const active = action.variant === "active";
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
title={action.description}
|
||||
data-state={active ? "active" : undefined}
|
||||
disabled={action.disabled}
|
||||
onClick={action.onClick}
|
||||
className={cn(
|
||||
"flex w-full touch-manipulation items-center gap-2 font-semibold transition-[color,background-color,border-color,box-shadow,transform] duration-150 ease-out focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[var(--action-focus-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--action-focus-offset)] active:scale-[0.98] motion-reduce:transition-none",
|
||||
primary ? "h-12 justify-start border px-2.5 text-sm" : "h-10 justify-center border text-xs",
|
||||
MAP_COMPACT_RADIUS_CLASS_NAME,
|
||||
primary
|
||||
? active
|
||||
? "border-blue-300 bg-white text-slate-950 shadow-[0_3px_10px_rgba(37,99,235,0.14)] ring-1 ring-inset ring-blue-100 [@media(hover:hover)]:hover:border-blue-400 [@media(hover:hover)]:hover:bg-blue-50/70"
|
||||
: action.variant === "primary"
|
||||
? "border-slate-200 bg-slate-50/90 text-slate-900 shadow-xs [@media(hover:hover)]:hover:border-slate-300 [@media(hover:hover)]:hover:bg-white"
|
||||
: "border-slate-800 bg-slate-800 text-white shadow-xs [@media(hover:hover)]:hover:border-slate-900 [@media(hover:hover)]:hover:bg-slate-900"
|
||||
: cn(
|
||||
MAP_READABLE_SURFACE_CLASS_NAME,
|
||||
danger
|
||||
? "text-red-600 [@media(hover:hover)]:hover:border-red-200 [@media(hover:hover)]:hover:bg-red-50"
|
||||
: "text-slate-700 [@media(hover:hover)]:hover:border-blue-200 [@media(hover:hover)]:hover:text-blue-700"
|
||||
),
|
||||
action.disabled &&
|
||||
"cursor-not-allowed opacity-45 shadow-none active:scale-100 [@media(hover:hover)]:hover:border-slate-200 [@media(hover:hover)]:hover:bg-transparent [@media(hover:hover)]:hover:text-slate-700"
|
||||
)}
|
||||
>
|
||||
{primary ? (
|
||||
<span
|
||||
className={cn(
|
||||
"grid h-8 w-8 shrink-0 place-items-center rounded-lg",
|
||||
active
|
||||
? "bg-blue-600 text-white"
|
||||
: "bg-white text-slate-700 ring-1 ring-inset ring-slate-200"
|
||||
)}
|
||||
>
|
||||
<Icon size={15} strokeWidth={2.2} aria-hidden="true" />
|
||||
</span>
|
||||
) : (
|
||||
<Icon size={15} strokeWidth={2} aria-hidden="true" />
|
||||
)}
|
||||
{primary ? (
|
||||
<span className="min-w-0 flex-1 text-left">
|
||||
<span className="block truncate text-sm font-semibold leading-4">{action.label}</span>
|
||||
<span className="mt-0.5 block truncate text-[10px] font-medium leading-3 text-slate-500">
|
||||
{action.description}
|
||||
</span>
|
||||
</span>
|
||||
) : (
|
||||
<span>{action.label}</span>
|
||||
)}
|
||||
{primary ? (
|
||||
active ? (
|
||||
<span className="flex shrink-0 items-center gap-1 rounded-full bg-blue-50 px-2 py-1 text-[10px] font-semibold text-blue-700 ring-1 ring-inset ring-blue-200">
|
||||
<span className="h-1.5 w-1.5 rounded-full bg-blue-600 motion-safe:animate-pulse" aria-hidden="true" />
|
||||
进行中
|
||||
</span>
|
||||
) : (
|
||||
<ChevronRight size={16} aria-hidden="true" className="shrink-0 text-slate-400" />
|
||||
)
|
||||
) : null}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function getDefaultActionIcon(actionId: string) {
|
||||
if (actionId.includes("copy")) {
|
||||
return Copy;
|
||||
|
||||
Reference in New Issue
Block a user