fix: refine mobile workbench sheets

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

@@ -2,7 +2,6 @@ import {
   Activity,
   CheckCircle2,
   ChevronsUpDown,
-  ChevronDown,
   ChevronLeft,
   DatabaseZap,
   History,
@@ -16,7 +15,8 @@ import {
   Shield,
   ShieldCheck,
   Square,
-  Volume2
+  Volume2,
+  X
 } from "lucide-react";
 import { AnimatePresence, MotionConfig, motion, useReducedMotion } from "motion/react";
 import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
@@ -292,19 +292,29 @@ export function AgentCommandPanel({
               >
                 <History size={17} aria-hidden="true" />
               </button>
-              <button
+              {presentation === "mobile-sheet" ? (
-                type="button"
+                <button
-                aria-label={presentation === "mobile-sheet" ? "关闭 Agent 面板" : "折叠 Agent 面板"}
+                  type="button"
-                title={presentation === "mobile-sheet" ? "关闭 Agent 面板" : "折叠 Agent 面板"}
+                  aria-label="关闭 Agent 面板"
-                onClick={onCollapse}
+                  title="关闭 Agent 面板"
-                className="agent-panel-icon-button grid h-9 w-9 shrink-0 place-items-center rounded-xl text-slate-600 transition"
+                  onClick={onCollapse}
-              >
+                  className="group grid h-10 w-10 shrink-0 place-items-center rounded-full text-slate-500"
-                {presentation === "mobile-sheet" ? (
+                >
-                  <ChevronDown size={17} aria-hidden="true" />
+                  <span className="surface-control grid h-9 w-9 place-items-center rounded-full shadow-[inset_0_0_0_1px_rgba(148,163,184,0.26),0_4px_12px_rgba(15,33,55,0.10)] transition-[color,background-color,scale] group-active:scale-95 [@media(hover:hover)]:group-hover:bg-blue-50 [@media(hover:hover)]:group-hover:text-blue-700">
-                ) : (
+                    <X size={17} strokeWidth={2.25} aria-hidden="true" />
+                  </span>
+                </button>
+              ) : (
+                <button
+                  type="button"
+                  aria-label="折叠 Agent 面板"
+                  title="折叠 Agent 面板"
+                  onClick={onCollapse}
+                  className="agent-panel-icon-button grid h-9 w-9 shrink-0 place-items-center rounded-xl text-slate-600 transition"
+                >
                   <ChevronLeft size={17} aria-hidden="true" />
-                )}
+                </button>
-              </button>
+              )}
             </div>
             <AnimatePresence initial={false}>
               {historyOpen ? (

src/features/workbench/components/mobile-workbench-sheet-layout.ts

@@ -1,21 +1,17 @@
 import { WORKBENCH_LAYOUT } from "../layout/workbench-layout";
 
-export type MobileWorkbenchSheetSnap = "peek" | "half" | "full";
+export type MobileWorkbenchSheetSnap = "half" | "full";
 
 export function getMobileWorkbenchSheetHeight(
   snap: MobileWorkbenchSheetSnap,
   viewportHeight: number
 ) {
-  if (snap === "peek") {
-    return WORKBENCH_LAYOUT.mobileSheet.peekHeight;
-  }
-
   if (snap === "half") {
     return Math.round(viewportHeight * WORKBENCH_LAYOUT.mobileSheet.halfViewportRatio);
   }
 
   return Math.max(
-    WORKBENCH_LAYOUT.mobileSheet.peekHeight,
+    Math.round(viewportHeight * WORKBENCH_LAYOUT.mobileSheet.halfViewportRatio),
     viewportHeight - WORKBENCH_LAYOUT.mobileSheet.fullTopGap
   );
 }

src/features/workbench/components/mobile-workbench-sheet.test.ts

@@ -2,8 +2,7 @@ import { describe, expect, it } from "vitest";
 import { getMobileWorkbenchSheetHeight } from "./mobile-workbench-sheet-layout";
 
 describe("mobile workbench sheet heights", () => {
-  it("keeps the three deterministic snap heights", () => {
+  it("keeps the two deterministic snap heights", () => {
-    expect(getMobileWorkbenchSheetHeight("peek", 844)).toBe(96);
     expect(getMobileWorkbenchSheetHeight("half", 844)).toBe(439);
     expect(getMobileWorkbenchSheetHeight("full", 844)).toBe(776);
   });

src/features/workbench/components/mobile-workbench-sheet.tsx

@@ -6,7 +6,6 @@ import {
   type PointerEvent,
   type ReactNode
 } from "react";
-import { X } from "lucide-react";
 import { cn } from "@/shared/ui/cn";
 import {
   getMobileWorkbenchSheetHeight,
@@ -22,11 +21,9 @@ type MobileWorkbenchSheetProps = {
   onClose: () => void;
   children: ReactNode;
   className?: string;
-  closing?: boolean;
-  onCloseComplete?: () => void;
 };
 
-const SNAP_ORDER: MobileWorkbenchSheetSnap[] = ["peek", "half", "full"];
+const SNAP_ORDER: MobileWorkbenchSheetSnap[] = ["half", "full"];
 
 export function MobileWorkbenchSheet({
   label,
@@ -34,9 +31,7 @@ export function MobileWorkbenchSheet({
   onSnapChange,
   onClose,
   children,
-  className,
+  className
-  closing = false,
-  onCloseComplete
 }: MobileWorkbenchSheetProps) {
   const pointerStartRef = useRef<{ y: number; height: number } | null>(null);
   const draggedRef = useRef(false);
@@ -87,7 +82,7 @@ export function MobileWorkbenchSheet({
       draggedRef.current = true;
     }
 
-    const minHeight = getMobileWorkbenchSheetHeight("peek", window.innerHeight);
+    const minHeight = getMobileWorkbenchSheetHeight("half", window.innerHeight);
     const maxHeight = getMobileWorkbenchSheetHeight("full", window.innerHeight);
     setDragHeight(Math.min(maxHeight, Math.max(minHeight, start.height + delta)));
   }
@@ -134,7 +129,7 @@ export function MobileWorkbenchSheet({
 
     if (event.key === "Home") {
       event.preventDefault();
-      onSnapChange("peek");
+      onSnapChange("half");
       return;
     }
 
@@ -150,17 +145,11 @@ export function MobileWorkbenchSheet({
       data-snap={snap}
       className={cn(
         "mobile-workbench-sheet acrylic-panel pointer-events-auto absolute bottom-0 left-0 right-0 z-40 flex min-h-0 flex-col overflow-hidden rounded-t-[20px] border-x border-t transition-[height] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] motion-reduce:transition-none lg:hidden",
-        closing && "pointer-events-none",
         className
       )}
-      style={{ height: closing ? 0 : (dragHeight ?? restingHeight) }}
+      style={{ height: dragHeight ?? restingHeight }}
-      onTransitionEnd={(event) => {
-        if (closing && event.propertyName === "height" && event.target === event.currentTarget) {
-          onCloseComplete?.();
-        }
-      }}
     >
-      <div className="relative flex h-7 shrink-0 items-center">
+      <div className="flex h-7 shrink-0 items-center">
         <button
           type="button"
           aria-label={`${label}高度，当前${getSnapLabel(snap)}`}
@@ -173,14 +162,6 @@ export function MobileWorkbenchSheet({
         >
           <span className="h-1 w-10 rounded-full bg-slate-400/70 transition-[width,background-color] group-focus-visible:w-12 group-focus-visible:bg-blue-600" />
         </button>
-        <button
-          type="button"
-          aria-label={`关闭${label}`}
-          className="absolute right-2 grid h-7 w-7 place-items-center rounded-lg text-slate-500 transition hover:bg-blue-50 hover:text-blue-700"
-          onClick={onClose}
-        >
-          <X size={15} aria-hidden="true" />
-        </button>
       </div>
       <div className="min-h-0 flex-1 overscroll-contain">{children}</div>
     </section>
@@ -205,14 +186,10 @@ function getClosestSnap(height: number, viewportHeight: number): MobileWorkbench
       getMobileWorkbenchSheetHeight(closest, viewportHeight) - height
     );
     return candidateDistance < closestDistance ? candidate : closest;
-  }, "peek");
+  }, "half");
 }
 
 function getSnapLabel(snap: MobileWorkbenchSheetSnap) {
-  if (snap === "peek") {
-    return "预览档";
-  }
-
   if (snap === "half") {
     return "半屏档";
   }

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

@@ -4,6 +4,7 @@ import {
   ChevronRight,
   ClipboardList,
   History,
+  X,
   XCircle
 } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
@@ -58,6 +59,7 @@ type ScheduledConditionFeedProps = {
   onFocusRequestHandled?: (requestId: number) => void;
   onSelectedConditionChange?: (conditionId: string | null) => void;
   onExpandAgent: () => void;
+  onClose?: () => void;
   onLoadHistorySession: (sessionId: string) => void | Promise<void>;
   onSubmitPrompt: (prompt: string) => void | Promise<void>;
 };
@@ -79,6 +81,7 @@ export function ScheduledConditionFeed({
   onFocusRequestHandled,
   onSelectedConditionChange,
   onExpandAgent,
+  onClose,
   onLoadHistorySession,
   onSubmitPrompt
 }: ScheduledConditionFeedProps) {
@@ -325,6 +328,19 @@ export function ScheduledConditionFeed({
           />
           <span className="sr-only">{expanded ? "收起工况任务" : "展开工况任务"}</span>
         </button>
+        {mobileSheet && onClose ? (
+          <button
+            type="button"
+            aria-label="关闭工况任务"
+            title="关闭工况任务"
+            onClick={onClose}
+            className="group grid h-10 w-10 shrink-0 place-items-center rounded-full text-slate-500"
+          >
+            <span className="surface-control grid h-9 w-9 place-items-center rounded-full shadow-[inset_0_0_0_1px_rgba(148,163,184,0.26),0_4px_12px_rgba(15,33,55,0.10)] transition-[color,background-color,scale] group-active:scale-95 [@media(hover:hover)]:group-hover:bg-blue-50 [@media(hover:hover)]:group-hover:text-blue-700">
+              <X size={17} strokeWidth={2.25} aria-hidden="true" />
+            </span>
+          </button>
+        ) : null}
       </header>
 
       <div

src/features/workbench/layout/workbench-layout.ts

@@ -21,7 +21,6 @@ export const WORKBENCH_LAYOUT = {
     tickerWidth: 460
   },
   mobileSheet: {
-    peekHeight: 96,
     halfViewportRatio: 0.52,
     fullTopGap: 68
   }

src/features/workbench/map-workbench-page.tsx

@@ -107,7 +107,6 @@ export function MapWorkbenchPage() {
   const [conditionFeedExpanded, setConditionFeedExpanded] = useState(false);
   const [mobileSheet, setMobileSheet] = useState<"agent" | "condition" | null>(null);
   const [mobileSheetSnap, setMobileSheetSnap] = useState<MobileWorkbenchSheetSnap>("half");
-  const [mobileSheetClosing, setMobileSheetClosing] = useState(false);
   const [agentCollapsedForCondition, setAgentCollapsedForCondition] = useState(false);
   const prefersReducedMotion = useReducedMotion();
   const [taskTickerVisible, setTaskTickerVisible] = useState(true);
@@ -149,7 +148,6 @@ export function MapWorkbenchPage() {
       setViewportWidth(window.innerWidth);
       if (mediaQuery.matches) {
         setMobileSheet(null);
-        setMobileSheetClosing(false);
       }
     };
 
@@ -193,24 +191,12 @@ export function MapWorkbenchPage() {
       return;
     }
 
-    setMobileSheetClosing(false);
     setMobileSheet("agent");
     setMobileSheetSnap("half");
   }
 
   const closeMobileSheet = useCallback(() => {
-    if (prefersReducedMotion) {
-      setMobileSheet(null);
-      setMobileSheetClosing(false);
-      return;
-    }
-
-    setMobileSheetClosing(true);
-  }, [prefersReducedMotion]);
-
-  const completeMobileSheetClose = useCallback(() => {
     setMobileSheet(null);
-    setMobileSheetClosing(false);
   }, []);
 
   function handleConditionExpandedChange(nextExpanded: boolean) {
@@ -255,7 +241,6 @@ export function MapWorkbenchPage() {
     }
 
     setConditionFeedExpanded(false);
-    setMobileSheetClosing(false);
     setMobileSheetSnap("half");
     setMobileSheet("condition");
   }
@@ -577,7 +562,6 @@ export function MapWorkbenchPage() {
       setConditionFeedVisible(true);
       setActiveToolId(null);
       if (!isLargeScreen) {
-        setMobileSheetClosing(false);
         setMobileSheet("condition");
         setMobileSheetSnap("half");
       }
@@ -998,17 +982,21 @@ export function MapWorkbenchPage() {
               aria-label="打开 Agent 面板"
               title="打开 Agent 面板"
               onClick={openAgentPanelForViewport}
-              className="acrylic-control grid h-12 w-12 shrink-0 place-items-center rounded-xl border text-violet-700 active:scale-95"
+              className="acrylic-control grid h-11 w-11 shrink-0 place-items-center rounded-xl border text-violet-700 active:scale-95"
             >
-              <AgentPersona className="pointer-events-none h-9 w-9" state={agent.personaState} />
+              <AgentPersona className="pointer-events-none h-8 w-8" state={agent.personaState} />
             </button>
-            <MapToolbar items={toolbarItems} orientation="horizontal" className="justify-center" />
+            <MapToolbar
+              items={toolbarItems}
+              orientation="horizontal"
+              className="h-11 justify-center"
+            />
             <button
               type="button"
               aria-label="打开工况任务"
               title="打开工况任务"
               onClick={toggleConditionFeedForViewport}
-              className="acrylic-control grid h-12 w-12 shrink-0 place-items-center rounded-xl border text-blue-700 active:scale-95"
+              className="acrylic-control grid h-11 w-11 shrink-0 place-items-center rounded-xl border text-blue-700 active:scale-95"
             >
               <CalendarClock size={20} aria-hidden="true" />
             </button>
@@ -1022,8 +1010,6 @@ export function MapWorkbenchPage() {
           snap={mobileSheetSnap}
           onSnapChange={setMobileSheetSnap}
           onClose={closeMobileSheet}
-          closing={mobileSheetClosing}
-          onCloseComplete={completeMobileSheetClose}
         >
           {mobileSheet === "agent" ? (
             <AgentCommandPanel
@@ -1044,6 +1030,7 @@ export function MapWorkbenchPage() {
               onFocusRequestHandled={handleConditionFocusRequestHandled}
               onSelectedConditionChange={setSelectedConditionId}
               onExpandAgent={openAgentPanelForViewport}
+              onClose={closeMobileSheet}
               onLoadHistorySession={handleLoadAgentHistorySession}
               onSubmitPrompt={agent.submitPrompt}
             />

tests/browser/mobile-workbench-sheet.e2e.ts

@@ -3,14 +3,40 @@ import { expect, test } from "playwright/test";
 test.describe("mobile workbench sheet", () => {
   test.use({ viewport: { width: 390, height: 844 } });
 
-  test("supports all snap heights, keyboard control, and Escape close", async ({ page }) => {
+  test("keeps the bottom launcher controls at one height", async ({ page }) => {
+    await page.goto("/", { waitUntil: "domcontentloaded" });
+
+    const agentButton = page.getByRole("button", { name: "打开 Agent 面板" });
+    const mapToolbar = page.locator('nav[aria-label="地图工具"]:visible');
+    const conditionButton = page.getByRole("button", { name: "打开工况任务" });
+    const boxes = await Promise.all([
+      agentButton.boundingBox(),
+      mapToolbar.boundingBox(),
+      conditionButton.boundingBox()
+    ]);
+
+    boxes.forEach((box) => expect(box).not.toBeNull());
+    expect(boxes.map((box) => Math.round(box!.height))).toEqual([44, 44, 44]);
+    expect(boxes.map((box) => Math.round(box!.y))).toEqual([
+      Math.round(boxes[0]!.y),
+      Math.round(boxes[0]!.y),
+      Math.round(boxes[0]!.y)
+    ]);
+  });
+
+  test("supports half and full heights, keyboard control, and Escape close", async ({ page }) => {
     await page.goto("/", { waitUntil: "domcontentloaded" });
     await page.getByRole("button", { name: "打开 Agent 面板" }).click();
 
     const sheet = page.getByRole("region", { name: "Agent 工作台抽屉" });
     const handle = page.getByRole("button", { name: /Agent 工作台抽屉高度/ });
+    const closeButton = page.getByRole("button", { name: "关闭 Agent 面板" });
 
     await expect(sheet).toBeVisible();
+    await expect(closeButton).toHaveCount(1);
+    await expect.poll(async () => Math.round((await closeButton.boundingBox())?.height ?? 0)).toBe(
+      40
+    );
     await expect(sheet).toHaveAttribute("data-snap", "half");
     await expect.poll(async () => Math.round((await sheet.boundingBox())?.height ?? 0)).toBe(439);
     await expect
@@ -42,10 +68,12 @@ test.describe("mobile workbench sheet", () => {
 
     await handle.focus();
     await page.keyboard.press("Home");
-    await expect(sheet).toHaveAttribute("data-snap", "peek");
+    await expect(sheet).toHaveAttribute("data-snap", "half");
-    await expect.poll(async () => Math.round((await sheet.boundingBox())?.height ?? 0)).toBe(96);
+    await expect.poll(async () => Math.round((await sheet.boundingBox())?.height ?? 0)).toBe(439);
 
     await page.keyboard.press("ArrowUp");
+    await expect(sheet).toHaveAttribute("data-snap", "full");
+    await page.keyboard.press("ArrowDown");
     await expect(sheet).toHaveAttribute("data-snap", "half");
     await page.keyboard.press("End");
     await expect(sheet).toHaveAttribute("data-snap", "full");
@@ -62,11 +90,19 @@ test.describe("mobile workbench sheet", () => {
     await page.goto("/", { waitUntil: "domcontentloaded" });
 
     await page.getByRole("button", { name: "打开 Agent 面板" }).click();
-    await expect(page.getByRole("region", { name: "Agent 工作台抽屉" })).toBeVisible();
+    const agentSheet = page.getByRole("region", { name: "Agent 工作台抽屉" });
+    await expect(agentSheet).toBeVisible();
+    await expect.poll(async () => Math.round((await agentSheet.boundingBox())?.height ?? 0)).toBe(
+      439
+    );
     await page.keyboard.press("Escape");
 
     await page.getByRole("button", { name: "打开工况任务" }).click();
-    await expect(page.getByRole("region", { name: "工况任务抽屉" })).toBeVisible();
+    const conditionSheet = page.getByRole("region", { name: "工况任务抽屉" });
+    await expect(conditionSheet).toBeVisible();
+    await expect.poll(async () =>
+      Math.round((await conditionSheet.boundingBox())?.height ?? 0)
+    ).toBe(439);
     await expect(
       page.locator('aside[aria-label="Agent 命令面板"]').filter({ visible: true })
     ).toHaveCount(0);
@@ -78,8 +114,8 @@ test.describe("mobile workbench sheet", () => {
 
     const sheet = page.getByRole("region", { name: "工况任务抽屉" });
     await expect(sheet).toBeVisible();
-    await page.getByRole("button", { name: "关闭工况任务抽屉" }).click();
+    await page.getByRole("button", { name: "关闭工况任务" }).click();
-    await expect(sheet).toBeHidden();
+    expect(await sheet.count()).toBe(0);
     await expect(page.getByRole("button", { name: "打开工况任务" })).toBeVisible();
   });
 

tests/browser/workbench-visual.e2e.ts

@@ -70,6 +70,18 @@ test.describe("neutral blue mist workbench", () => {
     });
   });
 
+  test("mobile launcher keeps Agent, map tools, and conditions visually balanced", async ({
+    page
+  }) => {
+    await page.setViewportSize({ width: 390, height: 844 });
+    await openWorkbench(page);
+
+    await expect(page).toHaveScreenshot("workbench-mobile-launcher-light.png", {
+      animations: "disabled",
+      maxDiffPixelRatio: 0.01
+    });
+  });
+
   test("mobile light basemap shows the Agent half sheet", async ({ page }) => {
     await page.setViewportSize({ width: 390, height: 844 });
     await openWorkbench(page);