From ebe6cdc7f188a2c60692bd20f36e4bc3dd82128c Mon Sep 17 00:00:00 2001
From: Huarch <huarch97@outlook.com>
Date: Tue, 21 Jul 2026 12:35:36 +0800
Subject: [PATCH] fix: improve mobile workbench controls

---
 app/layout.tsx                                |  7 ++-
 features/map/core/components/notice.tsx       |  6 +-
 .../components/workbench-top-bar-menus.tsx    | 20 +++----
 .../components/workbench-top-bar-styles.ts    |  7 +++
 .../components/workbench-top-bar.tsx          | 22 ++++----
 features/workbench/map-workbench-page.tsx     | 56 ++++++++-----------
 features/workbench/map/camera.test.ts         |  2 +-
 features/workbench/map/camera.ts              |  2 +-
 tests/browser/agent-panel-resize.e2e.ts       | 31 +++++++++-
 tests/browser/map-notice-position.e2e.ts      | 19 +++++++
 tests/browser/workbench-top-bar-mobile.e2e.ts | 34 +++++++++++
 11 files changed, 144 insertions(+), 62 deletions(-)
 create mode 100644 features/workbench/components/workbench-top-bar-styles.ts
 create mode 100644 tests/browser/map-notice-position.e2e.ts
 create mode 100644 tests/browser/workbench-top-bar-mobile.e2e.ts

diff --git a/app/layout.tsx b/app/layout.tsx
index 1446548..74495db 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,4 +1,4 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import { MapToaster } from "@/features/map/core/components/notice";
 import "katex/dist/katex.min.css";
 import "streamdown/styles.css";
@@ -9,6 +9,11 @@ export const metadata: Metadata = {
   description: "Agent 编排型沉浸式排水管网业务工作台"
 };
 
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1
+};
+
 export default function RootLayout({
   children
 }: Readonly<{
diff --git a/features/map/core/components/notice.tsx b/features/map/core/components/notice.tsx
index 3fbb543..75490b6 100644
--- a/features/map/core/components/notice.tsx
+++ b/features/map/core/components/notice.tsx
@@ -31,7 +31,7 @@ type SonnerPosition = NonNullable<ComponentProps<typeof Toaster>["position"]>;
 const DEFAULT_POSITION: MapNoticePosition = "top-center";
 
 const positionClassNames: Record<MapNoticePosition, string> = {
-  "top-center": "top-[84px]",
+  "top-center": "!left-1/2 !right-auto top-[84px] [translate:-50%_0]",
   "top-right": "top-[84px] right-[72px]",
   "bottom-left": "bottom-12 left-4",
   "bottom-right": "bottom-12 right-4"
@@ -120,7 +120,7 @@ export function showMapNotice(options: MapNoticeOptions) {
           MAP_ICON_CELL_RADIUS_CLASS_NAME
         )
       },
-      className: cn("!fixed !z-[60]", positionClassNames[position])
+      className: cn("!fixed !z-[60] !w-[min(420px,calc(100vw-24px))]", positionClassNames[position])
     }
   );
 }
@@ -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",
+        "relative flex w-full items-start gap-2.5 overflow-hidden border py-2.5 pl-3 pr-10 text-sm",
         MAP_READABLE_RADIUS_CLASS_NAME,
         toneClassNames[tone]
       )}
diff --git a/features/workbench/components/workbench-top-bar-menus.tsx b/features/workbench/components/workbench-top-bar-menus.tsx
index 1d20343..e29e4ed 100644
--- a/features/workbench/components/workbench-top-bar-menus.tsx
+++ b/features/workbench/components/workbench-top-bar-menus.tsx
@@ -37,6 +37,11 @@ import {
   DropdownMenuTrigger
 } from "@/shared/ui/dropdown-menu";
 import type { WorkbenchAlert, WorkbenchScenario, WorkbenchUser } from "../types";
+import {
+  compactHeaderTextClassName,
+  headerControlButtonClassName,
+  headerControlIconClassName
+} from "./workbench-top-bar-styles";
 
 const scenarioStatusLabels: Record<WorkbenchScenario["status"], string> = {
   active: "运行中",
@@ -50,11 +55,6 @@ const menuSurfaceClassName = cn(
 );
 const menuReadableRowClassName =
   "surface-well focus:bg-blue-50 focus:text-slate-950";
-const headerControlButtonClassName =
-  "inline-flex h-8 items-center gap-2 rounded-full border border-transparent bg-transparent text-sm font-semibold text-slate-700 transition-colors hover:bg-white/70 hover:text-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600/20 focus-visible:ring-offset-2 data-[state=open]:bg-white/90 data-[state=open]:text-blue-700";
-const headerControlIconClassName =
-  "grid h-5 w-5 shrink-0 place-items-center rounded-full bg-slate-100/80 text-slate-500 transition-colors group-hover:bg-blue-50 group-hover:text-blue-700 group-data-[state=open]:bg-blue-50 group-data-[state=open]:text-blue-700";
-
 export function ScenarioMenu({
   open,
   onOpenChange,
@@ -87,8 +87,8 @@ export function ScenarioMenu({
           <span className={headerControlIconClassName}>
             <SlidersHorizontal size={14} aria-hidden="true" />
           </span>
-          <span className="truncate">场景 · {activeScenarioName}</span>
-          <ChevronDown size={14} className="shrink-0 text-slate-400 transition group-hover:text-blue-600 group-data-[state=open]:rotate-180 group-data-[state=open]:text-blue-600" aria-hidden="true" />
+          <span className={cn(compactHeaderTextClassName, "truncate")}>场景 · {activeScenarioName}</span>
+          <ChevronDown size={14} className="hidden shrink-0 text-slate-400 transition group-hover:text-blue-600 group-data-[state=open]:rotate-180 group-data-[state=open]:text-blue-600 2xl:block" aria-hidden="true" />
         </button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className={cn("w-[340px]", menuSurfaceClassName)}>
@@ -177,7 +177,7 @@ export function AlertMenu({
           >
             <Bell size={14} aria-hidden="true" />
           </span>
-          <span className={compact ? "sr-only" : undefined}>异常处置</span>
+          <span className={compact ? "sr-only" : compactHeaderTextClassName}>异常处置</span>
           {compact ? (
             <span className={cn("absolute right-0 top-0 grid h-4 min-w-4 place-items-center rounded-full border px-1 text-xs font-semibold leading-none", hasAlerts ? "border-red-100 bg-red-50 text-red-800" : "border-slate-200 bg-slate-50 text-slate-500")}>
               {alerts.length}
@@ -282,8 +282,8 @@ export function UserMenu({
           <span className={headerControlIconClassName}>
             <UserRound size={14} aria-hidden="true" />
           </span>
-          <span className="hidden text-sm font-semibold md:inline">{user.name}</span>
-          <ChevronDown size={14} className="hidden shrink-0 text-slate-400 transition group-hover:text-blue-600 group-data-[state=open]:rotate-180 group-data-[state=open]:text-blue-600 sm:block" aria-hidden="true" />
+          <span className={cn(compactHeaderTextClassName, "text-sm font-semibold")}>{user.name}</span>
+          <ChevronDown size={14} className="hidden shrink-0 text-slate-400 transition group-hover:text-blue-600 group-data-[state=open]:rotate-180 group-data-[state=open]:text-blue-600 2xl:block" aria-hidden="true" />
         </button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className={cn("w-72", menuSurfaceClassName)}>
diff --git a/features/workbench/components/workbench-top-bar-styles.ts b/features/workbench/components/workbench-top-bar-styles.ts
new file mode 100644
index 0000000..08bd5da
--- /dev/null
+++ b/features/workbench/components/workbench-top-bar-styles.ts
@@ -0,0 +1,7 @@
+export const headerControlButtonClassName =
+  "inline-flex h-8 items-center gap-2 whitespace-nowrap rounded-full border border-transparent bg-transparent text-sm font-semibold text-slate-700 transition-colors hover:bg-white/70 hover:text-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600/20 focus-visible:ring-offset-2 data-[state=open]:bg-white/90 data-[state=open]:text-blue-700";
+
+export const headerControlIconClassName =
+  "grid h-5 w-5 shrink-0 place-items-center rounded-full bg-slate-100/80 text-slate-500 transition-colors group-hover:bg-blue-50 group-hover:text-blue-700 group-data-[state=open]:bg-blue-50 group-data-[state=open]:text-blue-700";
+
+export const compactHeaderTextClassName = "hidden 2xl:inline";
diff --git a/features/workbench/components/workbench-top-bar.tsx b/features/workbench/components/workbench-top-bar.tsx
index 136032a..3806526 100644
--- a/features/workbench/components/workbench-top-bar.tsx
+++ b/features/workbench/components/workbench-top-bar.tsx
@@ -17,6 +17,11 @@ import {
 import { cn } from "@/lib/utils";
 import type { WorkbenchAlert, WorkbenchScenario, WorkbenchUser } from "../types";
 import { AlertMenu, ScenarioMenu, UserMenu } from "./workbench-top-bar-menus";
+import {
+  compactHeaderTextClassName,
+  headerControlButtonClassName,
+  headerControlIconClassName
+} from "./workbench-top-bar-styles";
 
 export type WorkbenchTopBarProps = {
   dataTime: string;
@@ -45,11 +50,6 @@ export type WorkbenchTopBarProps = {
   onExportConfig: () => void;
 };
 
-const headerControlButtonClassName =
-  "inline-flex h-8 items-center gap-2 rounded-full border border-transparent bg-transparent text-sm font-semibold text-slate-700 transition-colors hover:bg-white/70 hover:text-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600/20 focus-visible:ring-offset-2 data-[state=open]:bg-white/90 data-[state=open]:text-blue-700";
-const headerControlIconClassName =
-  "grid h-5 w-5 shrink-0 place-items-center rounded-full bg-slate-100/80 text-slate-500 transition-colors group-hover:bg-blue-50 group-hover:text-blue-700 group-data-[state=open]:bg-blue-50 group-data-[state=open]:text-blue-700";
-
 type HeaderMenuId = "alerts" | "compact-alerts" | "scenario" | "user";
 
 export function WorkbenchTopBar({
@@ -96,7 +96,7 @@ export function WorkbenchTopBar({
         </div>
       </div>
 
-      <div className="hidden min-w-0 items-center gap-3 text-sm text-slate-700 lg:flex xl:gap-4">
+      <div className="hidden min-w-0 items-center gap-2 text-sm text-slate-700 lg:flex 2xl:gap-4">
         <HeaderReadout icon={Clock3} label="数据时间" value={dataTime} />
         <HeaderDivider />
         <HeaderReadout icon={Box} label="模型版本" value={modelName} />
@@ -144,7 +144,7 @@ export function WorkbenchTopBar({
             className={cn("group px-2 active:scale-95", headerControlButtonClassName, devPanelOpen && "bg-blue-50/80 text-blue-700")}
           >
             <span className={cn(headerControlIconClassName, devPanelOpen && "bg-blue-600/10 text-blue-700")}><FlaskConical size={14} aria-hidden="true" /></span>
-            <span>Dev</span>
+            <span className={compactHeaderTextClassName}>Dev</span>
           </button>
         </div> : null}
         <div className="lg:hidden">
@@ -209,7 +209,7 @@ function TaskTickerToggle({
       >
         <Icon size={14} aria-hidden="true" />
       </span>
-      <span>任务浮条</span>
+      <span className={compactHeaderTextClassName}>任务浮条</span>
     </button>
   );
 }
@@ -240,7 +240,7 @@ function ConditionFeedToggle({
       >
         <CalendarClock size={14} aria-hidden="true" />
       </span>
-      <span>工况任务</span>
+      <span className={compactHeaderTextClassName}>工况任务</span>
     </button>
   );
 }
@@ -249,8 +249,8 @@ function HeaderReadout({ icon: Icon, label, value }: { icon?: LucideIcon; label:
   return (
     <div className="flex min-w-0 items-center gap-1.5 whitespace-nowrap">
       {Icon ? <Icon size={14} className="shrink-0 text-blue-700" aria-hidden="true" /> : null}
-      <span className="text-xs font-medium text-slate-500">{label}</span>
-      <span className="truncate text-sm font-semibold text-slate-800">{value}</span>
+      <span className="hidden text-xs font-medium text-slate-500 2xl:inline">{label}</span>
+      <span className="max-w-16 truncate text-sm font-semibold text-slate-800 2xl:max-w-28">{value}</span>
     </div>
   );
 }
diff --git a/features/workbench/map-workbench-page.tsx b/features/workbench/map-workbench-page.tsx
index 8de080d..7203b61 100644
--- a/features/workbench/map-workbench-page.tsx
+++ b/features/workbench/map-workbench-page.tsx
@@ -12,7 +12,6 @@ import {
   type KeyboardEvent as ReactKeyboardEvent,
   type PointerEvent as ReactPointerEvent
 } from "react";
-import { X } from "lucide-react";
 import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 import {
   AgentCollapsedRail,
@@ -220,6 +219,15 @@ export function MapWorkbenchPage() {
     onUiEnvelope: handleAgentUiEnvelope,
     onFrontendAction: handleFrontendAction
   });
+  function openAgentPanelForViewport() {
+    if (isLargeScreen) {
+      agent.expandPanel();
+      return;
+    }
+
+    agent.openMobilePanel();
+  }
+
   const leftPanelOpen = isLargeScreen && agent.panelOpen;
   const rightPanelOpen = isLargeScreen && (devPanelOpen || shouldShowConditionFeed);
 
@@ -488,7 +496,7 @@ export function MapWorkbenchPage() {
       return;
     }
 
-    agent.expandPanel();
+    openAgentPanelForViewport();
 
     try {
       await agent.submitPrompt(
@@ -931,7 +939,7 @@ export function MapWorkbenchPage() {
             onExpandedChange={setConditionFeedExpanded}
             onFocusRequestHandled={handleConditionFocusRequestHandled}
             onSelectedConditionChange={setSelectedConditionId}
-            onExpandAgent={agent.expandPanel}
+            onExpandAgent={openAgentPanelForViewport}
             onLoadHistorySession={handleLoadAgentHistorySession}
             onSubmitPrompt={agent.submitPrompt}
           />
@@ -963,14 +971,14 @@ export function MapWorkbenchPage() {
         ) : null}
       </div>
 
-      <MobileAgentToggle
-        open={agent.mobileOpen}
-        personaState={agent.personaState}
-        statusLabel={agent.statusLabel}
-        streaming={agent.streaming}
-        onOpen={agent.openMobilePanel}
-        onClose={agent.closeMobilePanel}
-      />
+      {!agent.mobileOpen ? (
+        <MobileAgentToggle
+          personaState={agent.personaState}
+          statusLabel={agent.statusLabel}
+          streaming={agent.streaming}
+          onOpen={agent.openMobilePanel}
+        />
+      ) : null}
 
       {!agent.mobileOpen ? (
         <div className="absolute bottom-20 left-3 right-3 z-30 lg:hidden">
@@ -1111,36 +1119,16 @@ function getScheduledConditionIdFromAlertId(alertId: string) {
 }
 
 function MobileAgentToggle({
-  open,
   personaState,
   statusLabel,
   streaming,
-  onOpen,
-  onClose
+  onOpen
 }: {
-  open: boolean;
   personaState: ComponentProps<typeof AgentPersona>["state"];
   statusLabel: string;
   streaming: boolean;
   onOpen: () => void;
-  onClose: () => void;
 }) {
-  if (open) {
-    return (
-      <div className="absolute bottom-20 right-3 z-40 lg:hidden">
-        <button
-          type="button"
-          aria-label="关闭 Agent 面板"
-          title="关闭 Agent 面板"
-          onClick={onClose}
-          className="agent-panel-icon-button grid h-10 w-10 place-items-center rounded-2xl text-slate-700 transition"
-        >
-          <X size={18} aria-hidden="true" />
-        </button>
-      </div>
-    );
-  }
-
   return (
     <div className="absolute bottom-20 left-3 z-30 lg:hidden">
       <button
@@ -1155,8 +1143,8 @@ function MobileAgentToggle({
         )}
       >
         <AgentPersona
-          className="h-10 w-10"
-          fallbackClassName="h-10 w-10"
+          className="pointer-events-none h-10 w-10"
+          fallbackClassName="pointer-events-none h-10 w-10"
           state={personaState}
           statusLabel={statusLabel}
           streaming={streaming}
diff --git a/features/workbench/map/camera.test.ts b/features/workbench/map/camera.test.ts
index c402d72..94ee59f 100644
--- a/features/workbench/map/camera.test.ts
+++ b/features/workbench/map/camera.test.ts
@@ -65,7 +65,7 @@ describe("fitNetworkBounds", () => {
     expect(options).toMatchObject({
       duration: 600,
       maxZoom: 13,
-      padding: { top: 48, right: 48, bottom: 48, left: 48 }
+      padding: { top: 96, right: 48, bottom: 48, left: 48 }
     });
     expect(options).not.toHaveProperty("zoom");
   });
diff --git a/features/workbench/map/camera.ts b/features/workbench/map/camera.ts
index fd2ad36..0d3f2f2 100644
--- a/features/workbench/map/camera.ts
+++ b/features/workbench/map/camera.ts
@@ -13,7 +13,7 @@ export type NetworkViewParams = {
 
 const WEB_MERCATOR_RADIUS = 6378137;
 const GLOBAL_VIEW_MAX_ZOOM = 13;
-const GLOBAL_VIEW_PADDING: PaddingOptions = { top: 48, right: 48, bottom: 48, left: 48 };
+const GLOBAL_VIEW_PADDING: PaddingOptions = { top: 96, right: 48, bottom: 48, left: 48 };
 export function getWorkbenchPadding(leftPanelOpen: boolean, rightPanelOpen: boolean): PaddingOptions {
   return getWorkbenchCameraPadding(1280, {
     agentOpen: leftPanelOpen,
diff --git a/tests/browser/agent-panel-resize.e2e.ts b/tests/browser/agent-panel-resize.e2e.ts
index 18c0b12..dbb1090 100644
--- a/tests/browser/agent-panel-resize.e2e.ts
+++ b/tests/browser/agent-panel-resize.e2e.ts
@@ -1,7 +1,7 @@
 import { expect, test } from "playwright/test";
 
 test("Agent panel resizes by drag without exceeding half the viewport", async ({ page }) => {
-  await page.goto("/", { waitUntil: "domcontentloaded" });
+  await page.goto("/", { waitUntil: "networkidle" });
 
   const panel = page.locator('aside[aria-label="Agent 命令面板"]');
   const resizeHandle = page.getByRole("separator", { name: "调整 Agent 面板宽度" });
@@ -31,3 +31,32 @@ test("Agent resize handle stays hidden in the mobile layout", async ({ page }) =
 
   await expect(page.getByRole("separator", { name: "调整 Agent 面板宽度" })).toBeHidden();
 });
+
+test.describe("mobile touch layout", () => {
+  test.use({ hasTouch: true, isMobile: true, viewport: { width: 375, height: 812 } });
+
+  test("mobile Agent toggle opens the conversation panel by touch", async ({ page }) => {
+    await page.goto("/", { waitUntil: "networkidle" });
+
+    const openButton = page.getByRole("button", { name: "打开 Agent 面板" });
+    const buttonBox = await openButton.boundingBox();
+    expect(buttonBox).not.toBeNull();
+
+    await page.touchscreen.tap(buttonBox!.x + buttonBox!.width / 2, buttonBox!.y + buttonBox!.height / 2);
+
+    await expect(page.locator('aside[aria-label="Agent 命令面板"]').filter({ visible: true })).toBeVisible();
+    await expect(page.getByRole("button", { name: "关闭 Agent 面板" })).toHaveCount(0);
+  });
+});
+
+test("mobile alert summary opens the Agent conversation panel", async ({ page }) => {
+  await page.clock.setFixedTime(new Date("2026-07-21T10:40:00+08:00"));
+  await page.setViewportSize({ width: 375, height: 812 });
+  await page.goto("/", { waitUntil: "networkidle" });
+
+  await page.getByRole("button", { name: /查看异常处置面板/ }).click();
+  await page.getByRole("button", { name: "工况汇总" }).click();
+
+  await expect(page.locator('aside[aria-label="Agent 命令面板"]').filter({ visible: true })).toBeVisible();
+  await expect(page.getByRole("button", { name: "关闭 Agent 面板" })).toHaveCount(0);
+});
diff --git a/tests/browser/map-notice-position.e2e.ts b/tests/browser/map-notice-position.e2e.ts
new file mode 100644
index 0000000..68013c3
--- /dev/null
+++ b/tests/browser/map-notice-position.e2e.ts
@@ -0,0 +1,19 @@
+import { expect, test } from "playwright/test";
+
+test("map notice is centered in the mobile viewport", async ({ page }) => {
+  await page.setViewportSize({ width: 375, height: 812 });
+  await page.goto("/", { waitUntil: "networkidle" });
+
+  await page.getByRole("button", { name: "打开用户菜单" }).click();
+  await page.getByRole("menuitem", { name: /查看运行状态/ }).click();
+
+  const notice = page.locator('[role="status"]').filter({ hasText: "数据状态" }).first();
+  await expect(notice).toBeVisible();
+
+  const box = await notice.boundingBox();
+  expect(box).not.toBeNull();
+
+  const leftInset = Math.round(box!.x);
+  const rightInset = Math.round(375 - box!.x - box!.width);
+  expect(Math.abs(leftInset - rightInset)).toBeLessThanOrEqual(1);
+});
diff --git a/tests/browser/workbench-top-bar-mobile.e2e.ts b/tests/browser/workbench-top-bar-mobile.e2e.ts
new file mode 100644
index 0000000..2745d53
--- /dev/null
+++ b/tests/browser/workbench-top-bar-mobile.e2e.ts
@@ -0,0 +1,34 @@
+import { expect, test } from "playwright/test";
+
+test("top bar uses compact controls on narrow mobile viewports", async ({ page }) => {
+  await page.setViewportSize({ width: 390, height: 844 });
+  await page.goto("/", { waitUntil: "networkidle" });
+
+  await expect(page.locator('meta[name="viewport"]')).toHaveAttribute(
+    "content",
+    /width=device-width/
+  );
+  await expect(page.getByRole("button", { name: "切换模拟方案" })).toBeHidden();
+  await expect(page.getByRole("button", { name: "切换地图 Dev Panel" })).toBeHidden();
+  await expect(page.getByRole("button", { name: /查看异常处置面板/ })).toBeVisible();
+});
+
+test("top bar keeps text horizontal at the desktop breakpoint", async ({ page }) => {
+  await page.setViewportSize({ width: 1024, height: 844 });
+  await page.goto("/", { waitUntil: "networkidle" });
+
+  const header = page.locator("header").first();
+  await expect(header).toBeVisible();
+  await expect.poll(async () => Math.round((await header.boundingBox())?.height ?? 0)).toBe(56);
+
+  await expect.poll(async () => header.evaluate((element) => {
+    return Array.from(element.querySelectorAll("span"))
+      .filter((span) => {
+        const style = getComputedStyle(span);
+        const rect = span.getBoundingClientRect();
+        return style.display !== "none" && style.visibility !== "hidden" && rect.width > 0 && rect.height > 0;
+      })
+      .map((span) => span.textContent?.trim())
+      .filter((text) => text === "任务浮条" || text === "工况任务" || text === "异常处置").length;
+  })).toBe(0);
+});