refactor(ui): refine glass surfaces

features/agent/components/agent-collapsed-rail.tsx

@@ -4,7 +4,6 @@ import { ChevronRight } from "lucide-react";
 import type { PersonaState } from "@/shared/ai-elements/persona";
 import { cn } from "@/lib/utils";
 import {
-  MAP_CONTROL_SURFACE_CLASS_NAME,
   MAP_MAJOR_PANEL_RADIUS_CLASS_NAME
 } from "@/features/map/core/components/map-control-styles";
 import { AgentPersona } from "./agent-persona";
@@ -16,64 +15,25 @@ type AgentCollapsedRailProps = {
 };
 
 export function AgentCollapsedRail({ personaState, statusLabel = "Agent", onExpand }: AgentCollapsedRailProps) {
-  const state = getCollapsedAgentState(statusLabel, personaState);
-
   return (
-    <aside className={cn("agent-rail-enter pointer-events-auto w-[188px] p-2", MAP_MAJOR_PANEL_RADIUS_CLASS_NAME, MAP_CONTROL_SURFACE_CLASS_NAME)}>
-      <div className="agent-panel-control agent-rail-item rounded-2xl p-2">
-        <div className="flex items-center gap-2">
-          <AgentPersona
-            className="h-10 w-10"
-            fallbackClassName="h-10 w-10"
-            state={personaState}
-            statusLabel={statusLabel}
-          />
-          <div className="min-w-0 flex-1">
-            <p className="truncate text-xs font-semibold text-slate-950">HydroAgent</p>
-            <p className="mt-0.5 flex min-w-0 items-center gap-1.5 text-xs font-semibold text-slate-500">
-              <span className={cn("h-1.5 w-1.5 shrink-0 rounded-full", state.dotClassName)} />
-              <span className="truncate" title={statusLabel}>{state.label}</span>
-            </p>
-          </div>
-          <button
-            type="button"
-            aria-label="展开 Agent 面板"
-            title="展开 Agent 面板"
-            onClick={onExpand}
-            className="agent-panel-primary-icon grid h-9 w-9 shrink-0 place-items-center rounded-xl transition"
-          >
-            <ChevronRight size={17} aria-hidden="true" />
-          </button>
-        </div>
-      </div>
+    <aside className={cn("agent-rail-enter glass-control pointer-events-auto w-[136px] p-1.5 shadow-[0_6px_18px_rgba(15,23,42,0.12)]", MAP_MAJOR_PANEL_RADIUS_CLASS_NAME)}>
+      <button
+        type="button"
+        aria-label="展开排水助手面板"
+        title="展开排水助手面板"
+        onClick={onExpand}
+        className="agent-rail-item group flex h-14 w-full items-center justify-center gap-4 rounded-xl bg-white px-3 transition hover:bg-slate-50"
+      >
+        <AgentPersona
+          className="h-12 w-12"
+          fallbackClassName="h-12 w-12"
+          state={personaState}
+          statusLabel={statusLabel}
+        />
+        <span className="agent-panel-primary-icon grid h-8 w-8 shrink-0 place-items-center rounded-lg !border-0 transition group-hover:translate-x-0.5">
+          <ChevronRight size={17} strokeWidth={2.25} aria-hidden="true" />
+        </span>
+      </button>
     </aside>
   );
 }
-
-function getCollapsedAgentState(statusLabel: string, personaState?: PersonaState) {
-  if (personaState === "asleep" || /失败|不可用|错误|降级/.test(statusLabel)) {
-    return {
-      label: "离线",
-      dotClassName: "bg-red-500"
-    };
-  }
-
-  if (personaState === "listening") {
-    return {
-      label: "待确认",
-      dotClassName: "bg-orange-500"
-    };
-  }
-
-  if (personaState === "thinking") {
-    return {
-      label: "处理中",
-      dotClassName: "bg-blue-500"
-    };
-  }
-
-  return {
-    label: "在线",
-    dotClassName: "bg-emerald-500"
-  };
-}

features/agent/components/agent-command-panel.tsx

@@ -1,15 +1,16 @@
 "use client";
 
 import {
-  Bolt,
+  Activity,
   CheckCircle2,
   ChevronsUpDown,
   ChevronLeft,
-  Gauge,
+  DatabaseZap,
+  GitMerge,
   History,
+  MapPinned,
   Plus,
-  SendHorizontal,
-  Sparkles
+  SendHorizontal
 } from "lucide-react";
 import { AnimatePresence, MotionConfig, motion } from "motion/react";
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -40,7 +41,7 @@ import {
 import { Button } from "@/shared/ui/button";
 import { cn } from "@/lib/utils";
 import {
-  MAP_CONTROL_SURFACE_CLASS_NAME,
+  MAP_TOOL_PANEL_SURFACE_CLASS_NAME,
   MAP_MAJOR_PANEL_RADIUS_CLASS_NAME
 } from "@/features/map/core/components/map-control-styles";
 import type { AgentChatSessionSummary } from "../api/client";
@@ -100,6 +101,13 @@ const AGENT_PROMPT_SUGGESTIONS = [
   "当前管网哪些区域可能存在雨污混接，判断依据是什么？"
 ] as const;
 
+const AGENT_CAPABILITIES = [
+  { icon: DatabaseZap, label: "监测质量诊断" },
+  { icon: Activity, label: "异常状态研判" },
+  { icon: GitMerge, label: "雨污混接识别" },
+  { icon: MapPinned, label: "GIS 地图联动" }
+] as const;
+
 export function AgentCommandPanel({
   collapsing = false,
   personaState,
@@ -155,13 +163,14 @@ export function AgentCommandPanel({
       <aside
         className={cn(
           "pointer-events-auto flex h-full min-h-0 w-full flex-col overflow-hidden",
+          "agent-panel-shell",
           MAP_MAJOR_PANEL_RADIUS_CLASS_NAME,
-          MAP_CONTROL_SURFACE_CLASS_NAME,
+          MAP_TOOL_PANEL_SURFACE_CLASS_NAME,
           collapsing ? "agent-panel-collapse" : "agent-panel-enter"
         )}
       >
       <Agent className="flex h-full min-h-0 flex-col border-0 bg-transparent">
-        <div className="agent-panel-band border-b border-white/70">
+        <div className="agent-panel-band border-b border-slate-200">
           <div className="flex items-center justify-between gap-3 px-4 py-3">
             <div className="flex min-w-0 flex-1 items-center gap-3 text-slate-900">
               <AgentPersona
@@ -175,7 +184,7 @@ export function AgentCommandPanel({
                 <div className="min-w-0">
                   <div className="flex min-w-0 items-center gap-2">
                     <p className="shrink-0 text-xs font-semibold uppercase text-slate-500">对话主题</p>
-                    <span className="inline-flex h-6 shrink-0 items-center gap-1.5 rounded-lg border border-slate-200/70 bg-[var(--glass-readable)] px-2 text-xs font-semibold text-slate-600">
+                    <span className="inline-flex h-6 shrink-0 items-center gap-1.5 rounded-lg border border-slate-200 bg-slate-50 px-2 text-xs font-semibold text-slate-600">
                       <span className={cn("h-1.5 w-1.5 rounded-full", getAgentConnectionClassName(statusLabel))} />
                       {getAgentConnectionLabel(statusLabel)}
                     </span>
@@ -273,7 +282,7 @@ export function AgentCommandPanel({
 
         <AgentContent className="flex min-h-0 flex-1 flex-col gap-0 p-0">
           <Conversation className="agent-panel-conversation min-h-0">
-            <ConversationContent className="gap-4 p-3">
+            <ConversationContent className={cn("gap-4 p-3", messages.length === 0 && "min-h-full")}>
               <AnimatePresence mode="popLayout" initial={false}>
                 {messages.length > 0 ? (
                   <BackendMessageList
@@ -288,13 +297,17 @@ export function AgentCommandPanel({
                 ) : (
                   <motion.div
                     key="empty"
-                    className="w-full"
+                    className="flex flex-1 items-center justify-center px-5 py-10"
                     initial="initial"
                     animate="animate"
                     exit="exit"
                     variants={agentPanelItemVariants}
                   >
-                    <AgentEmptyState statusLabel={statusLabel} />
+                    <AgentEmptyState
+                      personaState={personaState}
+                      statusLabel={statusLabel}
+                      streaming={streaming}
+                    />
                   </motion.div>
                 )}
               </AnimatePresence>
@@ -312,22 +325,25 @@ export function AgentCommandPanel({
           </Conversation>
         </AgentContent>
 
-        <div className="agent-panel-band space-y-2 border-t border-white/70 p-3">
-          <Suggestions aria-label="推荐问题" role="group" className="px-0.5">
-            {AGENT_PROMPT_SUGGESTIONS.map((suggestion) => (
-              <Suggestion
-                key={suggestion}
-                suggestion={suggestion}
-                disabled={streaming}
-                onClick={submitPrompt}
-                className="max-w-full border-slate-200/80 bg-[var(--glass-readable)] text-slate-600 shadow-none hover:border-blue-200 hover:bg-blue-50 hover:text-blue-700"
-              >
-                <span className="truncate">{suggestion}</span>
-              </Suggestion>
-            ))}
-          </Suggestions>
+        <div className="agent-panel-band relative border-t border-slate-200 p-3">
+          {messages.length === 0 && !streaming ? (
+            <div className="pointer-events-none absolute inset-x-0 bottom-full z-10 bg-gradient-to-t from-white/95 via-white/80 to-transparent px-3 pb-2 pt-5">
+              <Suggestions aria-label="推荐问题" role="group" className="pointer-events-auto px-0.5">
+                {AGENT_PROMPT_SUGGESTIONS.map((suggestion) => (
+                  <Suggestion
+                    key={suggestion}
+                    suggestion={suggestion}
+                    onClick={submitPrompt}
+                    className="max-w-full border-slate-200 bg-white text-slate-600 shadow-sm hover:border-blue-200 hover:bg-blue-50 hover:text-blue-700"
+                  >
+                    <span className="truncate">{suggestion}</span>
+                  </Suggestion>
+                ))}
+              </Suggestions>
+            </div>
+          ) : null}
           <PromptInput
-            className="agent-panel-control rounded-2xl shadow-sm"
+            className="agent-panel-control overflow-hidden rounded-2xl shadow-sm transition-[border-color,box-shadow] has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-1 has-[[data-slot=input-group-control]:focus-visible]:ring-ring [&>[data-slot=input-group]]:rounded-[inherit] [&>[data-slot=input-group]]:border-0 [&>[data-slot=input-group]]:shadow-none [&>[data-slot=input-group]]:!ring-0"
             onSubmit={(message) => {
               const nextPrompt = message.text.trim();
               if (nextPrompt) {
@@ -343,10 +359,7 @@ export function AgentCommandPanel({
                 placeholder="输入调度问题，Agent 将通过后端会话流式响应"
               />
             </PromptInputBody>
-            <PromptInputFooter>
-              <span className="min-w-0 flex-1 truncate text-xs text-slate-500" title={statusLabel}>
-                {statusLabel}
-              </span>
+            <PromptInputFooter className="justify-end">
               <div className="flex shrink-0 items-center gap-1.5">
                 <AgentModelSelect
                   models={modelOptions}
@@ -494,25 +507,25 @@ function AgentModelSelect({
         <Button
           type="button"
           variant="outline"
-          className="h-8 w-[126px] shrink-0 justify-between rounded-md border-transparent bg-transparent px-2 text-xs text-slate-600 shadow-none hover:bg-white/80"
+          className="h-8 w-24 shrink-0 justify-between gap-1.5 rounded-md border-transparent bg-transparent px-1.5 text-xs text-slate-600 shadow-none hover:bg-slate-50"
           disabled={!onValueChange}
           aria-label="选择 Agent 模型"
         >
-          <span className="flex min-w-0 items-center gap-1.5">
-            <ModelIcon model={selectedModel} size={13} />
-            <span className="truncate">{selectedModel?.label ?? "模型"}</span>
+          <span className="flex min-w-0 flex-1 items-center gap-1">
+            <ModelIcon model={selectedModel} size={selectedModel?.icon === "bolt" ? 15 : 14} />
+            <span className="shrink-0">{selectedModel?.label ?? "模型"}</span>
           </span>
-          <ChevronsUpDown size={13} className="shrink-0 opacity-50" aria-hidden="true" />
+          <ChevronsUpDown size={12} className="shrink-0 opacity-50" aria-hidden="true" />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent
         side="top"
         align="end"
         sideOffset={8}
-        className="agent-panel-control w-72 rounded-xl p-2 shadow-lg"
+        className="agent-panel-control w-[230px] rounded-xl p-2 shadow-lg"
       >
         <DropdownMenuLabel className="px-2 pb-2 pt-1 text-xs text-slate-500">
-          Agent 模型
+          模型选择
         </DropdownMenuLabel>
         <div className="space-y-1">
           {models.map((model) => {
@@ -522,12 +535,12 @@ function AgentModelSelect({
                 key={model.id}
                 className={cn(
                   "rounded-lg border border-transparent px-2.5 py-2 focus:bg-slate-50",
-                  selected && "glass-agent border-violet-200 focus:bg-violet-50"
+                  selected && "border-violet-200 bg-violet-50 focus:bg-violet-50"
                 )}
                 onSelect={() => onValueChange?.(model.id)}
               >
-                <span className="grid h-8 w-8 shrink-0 place-items-center rounded-md bg-white text-slate-600 shadow-sm">
-                  <ModelIcon model={model} size={15} />
+                <span className="ml-0.5 shrink-0 pt-0.5">
+                  <ModelIcon model={model} size={model.icon === "bolt" ? 18 : 16} />
                 </span>
                 <span className="min-w-0 flex-1">
                   <span className="block truncate text-sm font-semibold text-slate-800">{model.label}</span>
@@ -552,25 +565,86 @@ function getAgentConnectionClassName(statusLabel: string) {
 }
 
 function ModelIcon({ model, size }: { model?: AgentModelOption; size: number }) {
-  return model?.icon === "bolt" ? (
-    <Bolt size={size} className="text-amber-500" aria-hidden="true" />
-  ) : (
-    <Sparkles size={size} className="text-violet-500" aria-hidden="true" />
+  return model?.icon === "bolt" ? <FastModelIcon size={size} /> : <ExpertModelIcon size={size} />;
+}
+
+function FastModelIcon({ size }: { size: number }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      className="text-sky-600"
+      aria-hidden="true"
+    >
+      <path
+        d="M10.67 21c-.35 0-.62-.31-.57-.66L11 14H7.5c-.88 0-.33-.75-.31-.78 1.26-2.23 3.15-5.53 5.65-9.93.1-.18.3-.29.5-.29.35 0 .62.31.57.66l-.9 6.34h3.51c.4 0 .62.19.4.66-3.29 5.74-5.2 9.09-5.75 10.05-.1.18-.29.29-.5.29"
+        fill="currentColor"
+      />
+    </svg>
   );
 }
 
-function AgentEmptyState({ statusLabel }: { statusLabel: string }) {
+function ExpertModelIcon({ size }: { size: number }) {
   return (
-    <Message from="assistant" className="max-w-full">
-      <MessageContent className="agent-panel-message w-full rounded-2xl p-3 text-sm leading-6 text-slate-600 shadow-sm">
-        <div className="flex items-center gap-2">
-          <Gauge size={15} className="text-blue-600" aria-hidden="true" />
-          <p className="font-semibold text-slate-900">等待调度任务</p>
-        </div>
-        <p className="mt-2">后端会话已接入，新的任务会在这里形成证据、计划、预览和确认记录。</p>
-        <p className="mt-1 text-xs text-slate-500">{statusLabel}</p>
-      </MessageContent>
-    </Message>
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      className="text-violet-600"
+      aria-hidden="true"
+    >
+      <path
+        d="m19.46 8 .79-1.75L22 5.46c.39-.18.39-.73 0-.91l-1.75-.79L19.46 2c-.18-.39-.73-.39-.91 0l-.79 1.75-1.76.79c-.39.18-.39.73 0 .91l1.75.79.79 1.76c.18.39.74.39.92 0M11.5 9.5 9.91 6c-.35-.78-1.47-.78-1.82 0L6.5 9.5 3 11.09c-.78.36-.78 1.47 0 1.82l3.5 1.59L8.09 18c.36.78 1.47.78 1.82 0l1.59-3.5 3.5-1.59c.78-.36.78-1.47 0-1.82zm7.04 6.5-.79 1.75-1.75.79c-.39.18-.39.73 0 .91l1.75.79.79 1.76c.18.39.73.39.91 0l.79-1.75 1.76-.79c.39-.18.39-.73 0-.91l-1.75-.79-.79-1.76c-.18-.39-.74-.39-.92 0"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+function AgentEmptyState({
+  personaState,
+  statusLabel,
+  streaming
+}: {
+  personaState?: PersonaState;
+  statusLabel: string;
+  streaming: boolean;
+}) {
+  return (
+    <section
+      aria-labelledby="agent-empty-state-title"
+      className="mx-auto flex w-full max-w-sm flex-col items-center rounded-2xl border border-slate-200 bg-white p-4 text-center shadow-sm sm:p-5"
+    >
+      <AgentPersona
+        className="mb-3 h-20 w-20"
+        fallbackClassName="h-20 w-20 rounded-2xl"
+        state={personaState}
+        statusLabel={statusLabel}
+        streaming={streaming}
+      />
+      <p id="agent-empty-state-title" className="text-base font-semibold text-slate-900">
+        从一个问题开始
+      </p>
+      <p className="mt-1.5 max-w-72 text-xs leading-5 text-slate-500">
+        描述分析目标，或选择下方推荐问题。Agent 会整理证据并给出下一步建议。
+      </p>
+      <ul className="mt-4 grid w-full grid-cols-2 gap-2" aria-label="Agent 分析能力">
+        {AGENT_CAPABILITIES.map(({ icon: Icon, label }) => (
+          <li
+            key={label}
+            className="flex min-h-16 flex-col items-center justify-center gap-1.5 rounded-xl border border-slate-200 bg-slate-50 px-2 py-3 text-xs font-semibold text-slate-700 min-[420px]:min-h-14 min-[420px]:flex-row min-[420px]:gap-2"
+          >
+            <span className="grid h-8 w-8 shrink-0 place-items-center rounded-lg border border-slate-200 bg-white text-slate-600">
+              <Icon size={16} strokeWidth={1.8} aria-hidden="true" />
+            </span>
+            <span className="whitespace-nowrap">{label}</span>
+          </li>
+        ))}
+      </ul>
+    </section>
   );
 }
 

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

@@ -11,6 +11,9 @@ export const MAP_ICON_CELL_RADIUS_CLASS_NAME = "rounded-lg";
 export const MAP_CONTROL_SURFACE_CLASS_NAME =
   "glass-control border";
 
+export const MAP_AIR_SURFACE_CLASS_NAME =
+  "glass-air border";
+
 export const MAP_TOOL_PANEL_SURFACE_CLASS_NAME =
   "glass-panel border";
 

features/map/core/components/scale-line.tsx

@@ -3,7 +3,7 @@
 import type { Map as MapLibreMap } from "maplibre-gl";
 import { type RefObject, useEffect, useState } from "react";
 import { cn } from "@/lib/utils";
-import { MAP_CONTROL_SURFACE_CLASS_NAME } from "./map-control-styles";
+import { MAP_AIR_SURFACE_CLASS_NAME } from "./map-control-styles";
 
 type ScaleLineState = {
   label: string;
@@ -102,7 +102,7 @@ export function MapScaleLine({
       aria-label={`比例尺 ${scale.label}，${coordinateLabel}`}
       className={cn(
         "pointer-events-none inline-flex w-auto max-w-full select-none items-center gap-2.5 overflow-hidden rounded-none rounded-tl-xl border-b-0 border-r-0 px-2.5 py-1.5 text-xs font-semibold leading-none text-slate-800",
-        MAP_CONTROL_SURFACE_CLASS_NAME,
+        MAP_AIR_SURFACE_CLASS_NAME,
         className
       )}
     >

features/workbench/components/feature-popover.tsx

@@ -46,12 +46,12 @@ const FEATURE_LAYER_META: Record<
     iconClassName: string;
   }
 > = {
-  conduits: { icon: ConduitFeatureIcon, label: "管渠", headerClassName: "glass-normal", labelClassName: "text-teal-800", iconClassName: "bg-teal-700 text-white ring-teal-900/10" },
-  junctions: { icon: JunctionFeatureIcon, label: "检查井", headerClassName: "glass-info", labelClassName: "text-blue-800", iconClassName: "bg-sky-700 text-white ring-sky-900/10" },
-  orifices: { icon: OrificeFeatureIcon, label: "孔口", headerClassName: "bg-[var(--glass-readable)]", labelClassName: "text-slate-700", iconClassName: "bg-slate-600 text-white ring-slate-900/10" },
-  outfalls: { icon: OutfallFeatureIcon, label: "排放口", headerClassName: "glass-info", labelClassName: "text-blue-800", iconClassName: "bg-slate-700 text-white ring-slate-900/10" },
-  pumps: { icon: PumpFeatureIcon, label: "泵", headerClassName: "glass-normal", labelClassName: "text-teal-800", iconClassName: "bg-cyan-800 text-white ring-cyan-950/10" },
-  scada: { icon: JunctionFeatureIcon, label: "SCADA 测点", headerClassName: "glass-info", labelClassName: "text-blue-800", iconClassName: "bg-blue-700 text-white ring-blue-900/10" }
+  conduits: { icon: ConduitFeatureIcon, 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-blue-50/70", labelClassName: "text-blue-800", iconClassName: "bg-sky-700 text-white ring-sky-900/10" },
+  orifices: { icon: OrificeFeatureIcon, label: "孔口", headerClassName: "bg-slate-50/70", labelClassName: "text-slate-700", iconClassName: "bg-slate-600 text-white ring-slate-900/10" },
+  outfalls: { icon: OutfallFeatureIcon, label: "排放口", headerClassName: "bg-blue-50/70", labelClassName: "text-blue-800", iconClassName: "bg-slate-700 text-white ring-slate-900/10" },
+  pumps: { icon: PumpFeatureIcon, label: "泵", headerClassName: "bg-teal-50/70", labelClassName: "text-teal-800", iconClassName: "bg-cyan-800 text-white ring-cyan-950/10" },
+  scada: { icon: JunctionFeatureIcon, label: "SCADA 测点", headerClassName: "bg-blue-50/70", labelClassName: "text-blue-800", iconClassName: "bg-blue-700 text-white ring-blue-900/10" }
 };
 
 const BADGE_CLASS_NAMES: Record<FeaturePanelBadgeTone, string> = {
@@ -128,7 +128,7 @@ export function FeaturePopover({ feature, onClose }: FeaturePopoverProps) {
   return (
     <aside
       className={cn(
-        "glass-focus pointer-events-auto absolute left-1/2 top-[92px] z-20 w-[min(380px,calc(100vw-24px))] -translate-x-1/2 overflow-hidden border",
+        "pointer-events-auto absolute left-1/2 top-[92px] z-20 w-[min(380px,calc(100vw-24px))] -translate-x-1/2 overflow-hidden bg-white/[0.94] shadow-2xl shadow-blue-950/20 ring-1 ring-white/80 backdrop-blur-xl",
         MAP_MAJOR_PANEL_RADIUS_CLASS_NAME
       )}
     >
@@ -218,7 +218,7 @@ function ScadaFeaturePopover({ feature, copied, canCopy, onCopy, onClose }: Scad
   return (
     <aside
       className={cn(
-        "glass-focus pointer-events-auto absolute left-1/2 top-[92px] z-20 w-[min(380px,calc(100vw-24px))] border",
+        "pointer-events-auto absolute left-1/2 top-[92px] z-20 w-[min(380px,calc(100vw-24px))] bg-white/[0.94] shadow-2xl shadow-blue-950/20 ring-1 ring-white/80 backdrop-blur-xl",
         "-translate-x-1/2 overflow-hidden",
         MAP_MAJOR_PANEL_RADIUS_CLASS_NAME
       )}
@@ -232,7 +232,8 @@ function ScadaFeaturePopover({ feature, copied, canCopy, onCopy, onClose }: Scad
                 {formatFeaturePropertyValue("device_type_name", properties.device_type_name)}
               </span>
               <span className={cn(
-                "inline-flex shrink-0 items-center gap-1.5 rounded-full bg-[var(--glass-menu)] px-2 py-0.5 text-xs font-semibold ring-1 ring-inset",
+                "inline-flex shrink-0 items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-semibold ring-1 ring-inset",
+                active ? "bg-emerald-500/10" : "bg-slate-500/10",
                 active ? "text-emerald-700 ring-emerald-600/20" : "text-slate-600 ring-slate-500/20"
               )}>
                 <span className={cn("h-1.5 w-1.5 rounded-full", active ? "bg-emerald-500" : "bg-slate-400")} />
@@ -288,8 +289,8 @@ function ScadaFeaturePopover({ feature, copied, canCopy, onCopy, onClose }: Scad
 
 function getScadaPresentation(rawTypeId: unknown) {
   const typeId = Number(rawTypeId);
-  if (typeId === 72) return { iconPath: SCADA_ICON_PATHS.waterQuality, headerClassName: "glass-normal", labelClassName: "text-teal-800" };
-  if (typeId === 58) return { iconPath: SCADA_ICON_PATHS.radarLevel, headerClassName: "glass-info", labelClassName: "text-blue-800" };
-  if (typeId === 45) return { iconPath: SCADA_ICON_PATHS.ultrasonicFlow, headerClassName: "glass-warning", labelClassName: "text-orange-800" };
-  return { iconPath: SCADA_ICON_PATHS.unknown, headerClassName: "bg-[var(--glass-readable)]", labelClassName: "text-slate-700" };
+  if (typeId === 72) return { iconPath: SCADA_ICON_PATHS.waterQuality, headerClassName: "bg-teal-50/70", labelClassName: "text-teal-800" };
+  if (typeId === 58) return { iconPath: SCADA_ICON_PATHS.radarLevel, headerClassName: "bg-blue-50/70", labelClassName: "text-blue-800" };
+  if (typeId === 45) return { iconPath: SCADA_ICON_PATHS.ultrasonicFlow, headerClassName: "bg-orange-50/70", labelClassName: "text-orange-800" };
+  return { iconPath: SCADA_ICON_PATHS.unknown, headerClassName: "bg-slate-50/70", labelClassName: "text-slate-700" };
 }

features/workbench/components/scheduled-condition-feed.tsx

@@ -242,10 +242,10 @@ export function ScheduledConditionFeed({
         "scheduled-feed-panel-shell pointer-events-auto max-w-[calc(100vw-6rem)] overflow-hidden p-3 motion-reduce:transition-none",
         expanded ? "flex max-h-[calc(100dvh-8rem)] w-[880px] flex-col 2xl:w-[960px]" : "w-[432px]",
         "rounded-2xl border",
-        "glass-control"
+        expanded ? "glass-panel" : "glass-control"
       )}
     >
-      <header className={cn("flex items-center gap-2.5 px-2.5 py-2", "rounded-xl", MAP_READABLE_SURFACE_STRONG_CLASS_NAME)}>
+      <header className={cn("flex items-center gap-2.5 px-2.5 py-2", "rounded-xl", expanded ? "bg-white/30" : MAP_READABLE_SURFACE_STRONG_CLASS_NAME)}>
         <span className={cn("grid h-8 w-8 shrink-0 place-items-center bg-blue-50 text-blue-700", "rounded-lg")}>
           <CalendarClock size={17} aria-hidden="true" />
         </span>
@@ -607,7 +607,7 @@ function ConditionDetailSkeleton() {
     <DetailScroll>
       <div
         className={cn(
-          "relative min-h-[420px] overflow-hidden border border-slate-200/80 bg-[var(--glass-menu)] px-4 py-3",
+          "relative min-h-[420px] overflow-hidden border border-slate-200/60 bg-white/30 px-4 py-3",
           "rounded-xl"
         )}
         role="status"

features/workbench/hooks/use-workbench-agent.ts

@@ -307,7 +307,7 @@ export function useWorkbenchAgent({ onUiEnvelope, onFrontendAction }: UseWorkben
     setSelectedModel((current) => current || backendConnection.defaultModel || backendConnection.models[0]?.id || "");
     if (chatRef.current.status === "ready") {
       setRuntimeAvailability("connected");
-      setStatusLabel("Agent 后端已连接");
+      setStatusLabel("准备就绪");
     }
   }, [backendConnection]);
 

features/workbench/map-workbench-page.tsx

@@ -57,6 +57,7 @@ import type { DetailFeature, ScheduledConditionItem, ScheduledConditionRecord, W
 import { createAlertQueueConversationPrompt } from "./utils/scheduled-condition-prompts";
 
 const HEADER_DATA_TIME_STEP_MINUTES = 5;
+const INITIAL_HEADER_DATA_TIME = "同步中";
 
 function formatHeaderDataTime(date: Date) {
   const snappedMinutes = Math.floor(date.getMinutes() / HEADER_DATA_TIME_STEP_MINUTES) * HEADER_DATA_TIME_STEP_MINUTES;
@@ -85,9 +86,7 @@ export function MapWorkbenchPage() {
   const mapContainerRef = useRef<HTMLDivElement | null>(null);
   const [detailFeature, setDetailFeature] = useState<DetailFeature | null>(null);
   const [impactVisible, setImpactVisible] = useState(false);
-  const [isLargeScreen, setIsLargeScreen] = useState(
-    () => typeof window !== "undefined" && window.matchMedia("(min-width: 1024px)").matches
-  );
+  const [isLargeScreen, setIsLargeScreen] = useState(false);
   const [activeToolId, setActiveToolId] = useState<ToolbarToolId | null>(null);
   const [conditionFeedVisible, setConditionFeedVisible] = useState(true);
   const [conditionFeedMounted, setConditionFeedMounted] = useState(true);
@@ -107,7 +106,7 @@ export function MapWorkbenchPage() {
   const [agentUiResults, setAgentUiResults] = useState<AgentUiResult[]>([]);
   const [scheduledConditions, setScheduledConditions] = useState<ScheduledConditionItem[]>([]);
   const [scheduledConditionsLoading, setScheduledConditionsLoading] = useState(true);
-  const [headerDataTime, setHeaderDataTime] = useState(() => formatHeaderDataTime(new Date()));
+  const [headerDataTime, setHeaderDataTime] = useState(INITIAL_HEADER_DATA_TIME);
   const baseLayerOptions = useMemo(
     () =>
       BASE_LAYER_OPTIONS.map((option) => ({