fix: simplify timeline legend controls

src/features/workbench/operational-timeline/operational-timeline.tsx

@@ -2,8 +2,6 @@ import {
   CalendarClock,
   Check,
   Clock3,
-  Eye,
-  EyeOff,
   OctagonAlert,
   PanelBottomClose,
   PanelBottomOpen,
@@ -176,10 +174,10 @@ export function OperationalTimeline({
                 exit={prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: -4 }}
                 transition={prefersReducedMotion ? { duration: 0 } : { duration: 0.14 }}
               >
-                <div className="grid grid-rows-[18px_repeat(3,1fr)] pr-2 text-[10px] text-slate-500">
+                <div className="grid grid-rows-[18px_repeat(3,1fr)] pr-1.5 text-[10px] text-slate-500">
                   <span />
                   {LANES.map((lane) => (
-                    <span key={lane.id} className="flex items-center font-semibold">
+                    <span key={lane.id} className="flex items-center justify-end font-semibold">
                       {lane.label}
                     </span>
                   ))}
@@ -465,9 +463,8 @@ function TimelineLegend({
   return (
     <div
       aria-label="时间轴图例"
-      className="surface-control ml-auto flex shrink-0 items-center gap-0.5 rounded-xl border border-white/70 p-0.5 shadow-[0_4px_14px_rgba(15,23,42,0.08)]"
+      className="ml-auto flex shrink-0 items-center gap-0.5 px-1"
     >
-      <span className="hidden px-1.5 text-[9px] font-semibold tracking-[0.12em] text-slate-500 xl:inline">图例</span>
       {LEGEND_ITEMS.map((item) => {
         const visible = visibility[item.id];
         return (
@@ -484,17 +481,11 @@ function TimelineLegend({
               })
             }
             className={cn(
-              "inline-flex h-7 items-center gap-1.5 rounded-lg px-1.5 text-[10px] font-medium transition-[color,background-color,opacity] hover:bg-white/80 sm:px-2",
-              visible ? "text-slate-700" : "text-slate-400 opacity-55"
+              "grid h-7 w-7 place-items-center rounded-lg outline-hidden transition-[transform,filter,opacity] hover:scale-110 focus-visible:ring-2 focus-visible:ring-blue-500 active:scale-95",
+              visible ? "opacity-100" : "grayscale opacity-25"
             )}
           >
             <LegendSwatch category={item.id} />
-            <span className="hidden sm:inline">{item.label}</span>
-            {visible ? (
-              <Eye size={12} className="hidden text-slate-400 sm:block" aria-hidden="true" />
-            ) : (
-              <EyeOff size={12} className="hidden text-slate-400 sm:block" aria-hidden="true" />
-            )}
           </button>
         );
       })}
@@ -506,8 +497,8 @@ function LegendSwatch({ category }: { category: OperationalEventCategory }) {
   return (
     <span
       className={cn(
-        "block h-3 w-3 shrink-0 border",
-        category === "plan" && "rounded-[4px] border-blue-400 bg-blue-50",
+        "block h-3.5 w-3.5 shrink-0 border",
+        category === "plan" && "rounded-[4px] border-blue-500 bg-blue-100",
         category === "actual" && "rounded-full border-emerald-300 bg-emerald-500",
         category === "attention" && "rotate-45 rounded-[3px] border-amber-300 bg-amber-100",
         category === "exception" && "rounded-[4px] border-rose-300 bg-rose-500"