OrgTJWater/next-tjwater-drainage-frontend
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(map): refine layer and zoom controls

Browse Source
This commit is contained in:
jiang
2026-07-10 18:52:01 +08:00
parent 513c403017
commit 3a44de941d
2 changed files with 46 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
features/map/core/components/layer-panel.tsx
+8 -13
View File
@@ -46,7 +46,7 @@ function LayerVisibilitySection({ items, onToggleLayer }: LayerVisibilitySection
return (
<div>
<div className="mb-1.5 px-1 text-xs font-semibold text-slate-500">业务图层</div>
<div className="space-y-1.5">
<div className="grid grid-cols-3 gap-2">
{items.map((item) => {
const Icon = item.visible ? Eye : EyeOff;
const disabled = item.disabled || item.locked;
@@ -57,33 +57,28 @@ function LayerVisibilitySection({ items, onToggleLayer }: LayerVisibilitySection
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(
"flex min-h-12 w-full items-center gap-3 border px-2.5 text-left text-sm transition duration-150",
"relative flex min-h-[76px] w-full flex-col items-center justify-center gap-1.5 border px-1.5 py-2 text-center transition duration-150 active:translate-y-px active:scale-[0.98]",
MAP_COMPACT_RADIUS_CLASS_NAME,
item.visible
? "border-blue-100 bg-white/95 text-slate-900"
: "border-white/70 bg-white/95 text-slate-500 hover:border-slate-200 hover:bg-white",
? "border-blue-200 bg-blue-50/90 text-blue-950 shadow-sm shadow-blue-950/5"
: "border-white/70 bg-white/90 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",
"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="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>
<span
className={cn("h-2.5 w-2.5 rounded-full", item.visible ? "bg-blue-600" : "bg-slate-300")}
aria-hidden="true"
/>
<span className="block w-full truncate text-xs font-semibold leading-tight">{item.label}</span>
</button>
);
})}
features/map/core/components/zoom.tsx
+38 -23
View File
@@ -36,34 +36,49 @@ export function MapZoom({ mapRef, mapReady, onHome, className = "" }: MapZoomPro
return (
<TooltipProvider delayDuration={180}>
<div
role="group"
aria-label="地图缩放"
className={cn(
"pointer-events-auto flex w-[46px] flex-col p-[3px]",
MAP_CONTROL_RADIUS_CLASS_NAME,
MAP_CONTROL_SURFACE_CLASS_NAME,
"pointer-events-auto flex w-[46px] flex-col gap-2",
className
)}
>
<ControlButton
icon={Plus}
label="放大"
disabled={!mapReady}
onClick={handleZoomIn}
/>
<Divider />
<ControlButton
icon={Minus}
label="缩小"
disabled={!mapReady}
onClick={handleZoomOut}
/>
<Divider />
<ControlButton
icon={Home}
label="缩放到全局"
disabled={!mapReady}
onClick={onHome}
/>
<div
className={cn(
"flex flex-col p-[3px]",
MAP_CONTROL_RADIUS_CLASS_NAME,
MAP_CONTROL_SURFACE_CLASS_NAME
)}
>
<ControlButton
icon={Plus}
label="放大"
disabled={!mapReady}
onClick={handleZoomIn}
/>
<Divider />
<ControlButton
icon={Minus}
label="缩小"
disabled={!mapReady}
onClick={handleZoomOut}
/>
</div>
<div
className={cn(
"p-[3px]",
MAP_CONTROL_RADIUS_CLASS_NAME,
MAP_CONTROL_SURFACE_CLASS_NAME
)}
>
<ControlButton
icon={Home}
label="缩放到全局"
disabled={!mapReady}
onClick={onHome}
/>
</div>
</div>
</TooltipProvider>
);