OrgTJWater/next-tjwater-frontend
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: simplify timeline legend controls

Browse Source
This commit is contained in:
jiang
2026-08-19 17:15:48 +08:00
parent b91be09f5c
commit b93999646c
1 changed files with 7 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/workbench/operational-timeline/operational-timeline.tsx
+7 -16
View File
@@ -2,8 +2,6 @@ import {
CalendarClock, CalendarClock,
Check, Check,
Clock3, Clock3,
Eye,
EyeOff,
OctagonAlert, OctagonAlert,
PanelBottomClose, PanelBottomClose,
PanelBottomOpen, PanelBottomOpen,
@@ -176,10 +174,10 @@ export function OperationalTimeline({
exit={prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: -4 }} exit={prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: -4 }}
transition={prefersReducedMotion ? { duration: 0 } : { duration: 0.14 }} 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 /> <span />
{LANES.map((lane) => ( {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} {lane.label}
</span> </span>
))} ))}
@@ -465,9 +463,8 @@ function TimelineLegend({
return ( return (
<div <div
aria-label="时间轴图例" 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) => { {LEGEND_ITEMS.map((item) => {
const visible = visibility[item.id]; const visible = visibility[item.id];
return ( return (
@@ -484,17 +481,11 @@ function TimelineLegend({
}) })
} }
className={cn( 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", "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 ? "text-slate-700" : "text-slate-400 opacity-55" visible ? "opacity-100" : "grayscale opacity-25"
)} )}
> >
<LegendSwatch category={item.id} /> <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> </button>
); );
})} })}
@@ -506,8 +497,8 @@ function LegendSwatch({ category }: { category: OperationalEventCategory }) {
return ( return (
<span <span
className={cn( className={cn(
"block h-3 w-3 shrink-0 border", "block h-3.5 w-3.5 shrink-0 border",
category === "plan" && "rounded-[4px] border-blue-400 bg-blue-50", category === "plan" && "rounded-[4px] border-blue-500 bg-blue-100",
category === "actual" && "rounded-full border-emerald-300 bg-emerald-500", category === "actual" && "rounded-full border-emerald-300 bg-emerald-500",
category === "attention" && "rotate-45 rounded-[3px] border-amber-300 bg-amber-100", category === "attention" && "rotate-45 rounded-[3px] border-amber-300 bg-amber-100",
category === "exception" && "rounded-[4px] border-rose-300 bg-rose-500" category === "exception" && "rounded-[4px] border-rose-300 bg-rose-500"