fix: improve mobile workbench controls

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