fix: improve mobile workbench controls

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)}>

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";

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>
   );
 }