fix: 合并图例到批次栏,压缩间距,最大化表格可见行数
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
kkfluous
2026-04-02 11:59:06 +08:00
parent ae42893d3e
commit 460d17f07f

View File

@@ -320,40 +320,30 @@ export default function MonitoringView() {
</div> </div>
</div> </div>
{/* Batch selector */} {/* Batch selector + legend */}
<div className="flex-shrink-0 px-3 py-1.5 border-b border-slate-800/60 flex items-center gap-1.5 overflow-x-auto no-scrollbar"> <div className="flex-shrink-0 px-3 py-1 border-b border-slate-800/60 flex items-center justify-between">
<div className="flex items-center gap-1 overflow-x-auto no-scrollbar">
<button <button
onClick={() => setFilterTargetName('All')} onClick={() => setFilterTargetName('All')}
className={`px-2.5 py-1 rounded-md text-[9px] font-bold transition-all whitespace-nowrap ${filterTargetName === 'All' ? 'bg-blue-600 text-white' : 'bg-slate-800 text-slate-400 hover:bg-slate-700'}`} className={`px-2 py-0.5 rounded text-[8px] font-bold transition-all whitespace-nowrap ${filterTargetName === 'All' ? 'bg-blue-600 text-white' : 'bg-slate-800 text-slate-400 hover:bg-slate-700'}`}
></button> ></button>
{filterOptions.targetNames.map(n => ( {filterOptions.targetNames.map(n => (
<button <button
key={n} key={n}
onClick={() => setFilterTargetName(filterTargetName === n ? 'All' : n)} onClick={() => setFilterTargetName(filterTargetName === n ? 'All' : n)}
className={`px-2.5 py-1 rounded-md text-[9px] font-bold transition-all whitespace-nowrap ${filterTargetName === n ? 'bg-blue-600 text-white' : 'bg-slate-800 text-slate-400 hover:bg-slate-700'}`} className={`px-2 py-0.5 rounded text-[8px] font-bold transition-all whitespace-nowrap ${filterTargetName === n ? 'bg-blue-600 text-white' : 'bg-slate-800 text-slate-400 hover:bg-slate-700'}`}
>{n.replace(/交投|羚牛|恒运/, '').replace(/辆/, '台')}</button> >{n.replace(/交投|羚牛|恒运/, '').replace(/辆/, '台')}</button>
))} ))}
</div> </div>
<div className="flex items-center gap-2 text-[8px] text-slate-500 flex-shrink-0 ml-2">
<span className="flex items-center gap-0.5"><span className="w-1.5 h-1.5 rounded-full bg-green-500 inline-block"></span>线</span>
<span className="flex items-center gap-0.5"><span className="w-1.5 h-1.5 rounded-full bg-slate-500 inline-block"></span>线</span>
<span className="flex items-center gap-0.5"><span className="w-1.5 h-1.5 rounded-full bg-amber-400 inline-block"></span></span>
</div>
</div>
{/* Table Area */} {/* Table Area */}
<div className="flex-1 overflow-hidden flex flex-col"> <div className="flex-1 overflow-hidden flex flex-col">
<div className="px-3 py-1.5 border-b border-slate-800/60 flex justify-end items-center flex-shrink-0">
<div className="flex items-center gap-3 text-[9px] text-slate-500">
<div className="flex items-center gap-1">
<div className="w-1.5 h-1.5 rounded-full bg-green-500"></div>
<span>线</span>
</div>
<div className="flex items-center gap-1">
<div className="w-1.5 h-1.5 rounded-full bg-slate-500"></div>
<span>线</span>
</div>
<div className="flex items-center gap-1">
<div className="w-1.5 h-1.5 rounded-full bg-amber-400"></div>
<span></span>
</div>
<span className="text-slate-600">{new Date().toLocaleTimeString()}</span>
</div>
</div>
<div className="flex-1 overflow-auto relative"> <div className="flex-1 overflow-auto relative">
{fullscreenLoading && ( {fullscreenLoading && (