feat(workbench): refine operational interface

features/map/core/components/base-layers-control.tsx

@@ -194,7 +194,7 @@ export function BaseLayersControl({
             ) : (
               <Map size={18} aria-hidden="true" className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
             )}
-            <span className="absolute bottom-1 left-1 right-1 rounded bg-white/95 px-1 py-0.5 text-xs font-semibold leading-none text-slate-800 shadow-sm">
+            <span className="absolute bottom-1 left-1 right-1 rounded bg-[var(--glass-menu)] px-1 py-0.5 text-xs font-semibold leading-none text-slate-800 shadow-sm">
               {activeLayer?.label ?? title}
             </span>
           </span>

features/map/core/components/control-panel.tsx

@@ -83,7 +83,7 @@ export function MapModeButton({ icon: Icon, label, active = false, disabled = fa
       className={cn(
         "flex h-14 flex-col items-center justify-center gap-1 text-xs font-semibold transition duration-150",
         MAP_COMPACT_RADIUS_CLASS_NAME,
-        active ? "bg-blue-600 text-white shadow-sm" : "bg-white/95 text-slate-600 hover:text-blue-700",
+        active ? "bg-blue-600 text-white shadow-sm" : "bg-[var(--glass-menu)] text-slate-600 hover:text-blue-700",
         disabled && "cursor-not-allowed opacity-55 hover:text-slate-600"
       )}
     >
@@ -164,7 +164,7 @@ export function MapActionRow({
           ? "border-blue-600 bg-blue-600 text-white shadow-lg shadow-blue-600/25 hover:bg-blue-700"
           : strong
             ? "border-blue-100 bg-blue-50/95 text-blue-800"
-            : "border-white/70 bg-white/95 text-slate-700 hover:border-blue-100 hover:bg-white hover:text-blue-700",
+            : "border-transparent bg-[var(--glass-menu)] text-slate-700 hover:border-blue-100 hover:bg-white hover:text-blue-700",
         isDanger && "hover:border-red-100 hover:text-red-700",
         selected && !isPrimary && "border-blue-200 bg-blue-50 text-blue-800",
         muted && "opacity-70",

features/map/core/components/layer-control.tsx

@@ -69,8 +69,8 @@ export function MapLayerControl({
                 "flex min-h-12 w-full items-center gap-3 border px-2.5 text-left text-sm transition duration-150",
                 MAP_COMPACT_RADIUS_CLASS_NAME,
                 item.visible
-                  ? "border-blue-100 bg-white/95 text-slate-900 shadow-md shadow-blue-950/10"
-                  : "border-white/70 bg-white/95 text-slate-500 hover:border-slate-200 hover:bg-white",
+                  ? "border-blue-100 bg-[var(--glass-menu)] text-slate-900 shadow-md shadow-blue-950/10"
+                  : "border-transparent bg-[var(--glass-readable)] text-slate-500 hover:border-slate-200 hover:bg-white",
                 disabled && "cursor-not-allowed opacity-60 hover:bg-transparent"
               )}
             >

features/map/core/components/layer-panel.tsx

@@ -65,7 +65,7 @@ function LayerVisibilitySection({ items, onToggleLayer }: LayerVisibilitySection
                 MAP_COMPACT_RADIUS_CLASS_NAME,
                 item.visible
                   ? "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",
+                  : "border-transparent bg-[var(--glass-readable)] text-slate-500 hover:border-slate-200 hover:bg-white",
                 disabled && "cursor-not-allowed opacity-60 hover:bg-transparent"
               )}
             >

features/map/core/components/map-control-styles.ts

@@ -2,23 +2,23 @@ export const MAP_MAJOR_PANEL_RADIUS_CLASS_NAME = "rounded-2xl";
 
 export const MAP_CONTROL_RADIUS_CLASS_NAME = "rounded-xl";
 
-export const MAP_READABLE_RADIUS_CLASS_NAME = "rounded-xl";
+export const MAP_READABLE_RADIUS_CLASS_NAME = MAP_CONTROL_RADIUS_CLASS_NAME;
 
-export const MAP_COMPACT_RADIUS_CLASS_NAME = "rounded-xl";
+export const MAP_COMPACT_RADIUS_CLASS_NAME = MAP_CONTROL_RADIUS_CLASS_NAME;
 
 export const MAP_ICON_CELL_RADIUS_CLASS_NAME = "rounded-lg";
 
 export const MAP_CONTROL_SURFACE_CLASS_NAME =
-  "border border-white/75 bg-white/95 shadow-lg shadow-slate-900/20 ring-1 ring-slate-900/5 backdrop-blur-xl";
+  "glass-control border";
 
 export const MAP_TOOL_PANEL_SURFACE_CLASS_NAME =
-  "border border-white/70 bg-white/80 shadow-2xl shadow-blue-950/20 backdrop-blur-xl";
+  "glass-panel border";
 
 export const MAP_READABLE_SURFACE_CLASS_NAME =
-  "border border-white/70 bg-white/95";
+  "border border-transparent bg-[var(--glass-readable)]";
 
 export const MAP_READABLE_SURFACE_STRONG_CLASS_NAME =
-  "border border-white/80 bg-white/95";
+  "border border-transparent bg-[var(--glass-menu)]";
 
 export const MAP_CONTROL_HOVER_CLASS_NAME =
   "hover:bg-blue-100/70 hover:text-blue-700 hover:ring-1 hover:ring-blue-200/80 active:bg-blue-100";

features/map/core/components/measure-panel.tsx

@@ -72,7 +72,7 @@ export function MapMeasurePanel({
   return (
     <div className="space-y-3">
       <MapPanelSection title="模式">
-        <div className={cn("grid grid-cols-3 gap-1.5 border border-white/60 bg-white/80 p-1.5", MAP_READABLE_RADIUS_CLASS_NAME)}>
+        <div className={cn("grid grid-cols-3 gap-1.5 border border-transparent bg-[var(--glass-readable)] p-1.5", MAP_READABLE_RADIUS_CLASS_NAME)}>
           {modes.map((mode) => (
             <MapModeButton
               key={mode.id}
@@ -121,7 +121,7 @@ export function MapMeasurePanel({
                   MAP_COMPACT_RADIUS_CLASS_NAME,
                   unit.id === activeUnitId
                     ? "bg-blue-600 text-white"
-                    : "bg-white/95 text-slate-600 hover:text-blue-700"
+                    : "bg-[var(--glass-menu)] text-slate-600 hover:text-blue-700"
                 )}
               >
                 {unit.label}

features/map/core/components/notice.tsx

@@ -45,11 +45,11 @@ const sonnerPositions: Record<MapNoticePosition, SonnerPosition> = {
 };
 
 const toneClassNames: Record<MapNoticeTone, string> = {
-  info: "border-white/80 bg-white/95 text-slate-900",
-  success: "border-white/80 bg-white/95 text-slate-900",
-  warning: "border-white/80 bg-white/95 text-slate-900",
-  error: "border-white/80 bg-white/95 text-slate-900",
-  loading: "border-white/80 bg-white/95 text-slate-900"
+  info: "glass-menu text-slate-900",
+  success: "glass-menu text-slate-900",
+  warning: "glass-menu text-slate-900",
+  error: "glass-menu text-slate-900",
+  loading: "glass-menu text-slate-900"
 };
 
 const iconClassNames: Record<MapNoticeTone, string> = {
@@ -232,7 +232,7 @@ function MapNoticeFrame({ tone, children }: { tone: MapNoticeTone; children: Rea
     <div
       role={tone === "error" || tone === "warning" ? "alert" : "status"}
       className={cn(
-        "relative flex w-[min(420px,calc(100vw-24px))] items-start gap-2.5 overflow-hidden border py-2.5 pl-3 pr-10 text-sm shadow-lg shadow-slate-900/20 backdrop-blur-xl",
+        "relative flex w-[min(420px,calc(100vw-24px))] items-start gap-2.5 overflow-hidden border py-2.5 pl-3 pr-10 text-sm",
         MAP_READABLE_RADIUS_CLASS_NAME,
         toneClassNames[tone]
       )}