mygo-kyx/codexautopool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add LiveLogViewer component for real-time log display with SSE streaming, pause/resume, auto-scroll, and log level styling.

Browse Source
This commit is contained in:
kyx236
2026-01-31 04:01:05 +08:00
parent 0f319312a0
commit 94ba61528a
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/components/LiveLogViewer.tsx
View File

@@ -183,7 +183,7 @@ export default function LiveLogViewer({
<div <div
ref={logContainerRef} ref={logContainerRef}
style={{ fontVariantLigatures: 'contextual' }} style={{ fontVariantLigatures: 'contextual' }}
className="h-[500px] overflow-y-auto p-4 text-[14.5px] leading-relaxed space-y-1.5 font-['FiraCode_Nerd_Font','Fira_Code',monospace] selection:bg-blue-500/30" className="h-[550px] overflow-y-auto p-4 text-[15.5px] leading-relaxed space-y-2 font-['FiraCode_Nerd_Font','Fira_Code',monospace] selection:bg-blue-500/30"
> >
{logs.length === 0 ? ( {logs.length === 0 ? (
<div className="flex items-center justify-center h-full text-slate-500"> <div className="flex items-center justify-center h-full text-slate-500">
@@ -193,17 +193,17 @@ export default function LiveLogViewer({
logs.map((log, index) => ( logs.map((log, index) => (
<div <div
key={index} key={index}
className={`flex gap-2 px-2 py-0.5 rounded ${levelBgColors[log.level] || ''}`} className={`flex gap-3 px-2 py-1 rounded transition-colors ${levelBgColors[log.level] || ''} hover:bg-slate-800/40`}
> >
<span className="text-slate-500 flex-shrink-0">{log.timestamp}</span> <span className="text-slate-500 flex-shrink-0 font-medium">{log.timestamp}</span>
<span className={`flex-shrink-0 uppercase font-semibold w-16 ${levelColors[log.level] || 'text-slate-400'}`}> <span className={`flex-shrink-0 uppercase font-bold w-20 text-center rounded-[4px] px-1 ${levelColors[log.level] || 'text-slate-400'}`}>
[{log.level}] {log.level}
</span> </span>
<span className="text-slate-400 flex-shrink-0">[{log.module}]</span> <span className="text-slate-400 flex-shrink-0 opacity-80">[{log.module}]</span>
{log.email && ( {log.email && (
<span className="text-purple-400 flex-shrink-0 truncate max-w-[150px]">{log.email}</span> <span className="text-purple-400 flex-shrink-0 truncate max-w-[180px] font-medium">{log.email}</span>
)} )}
<span className="text-slate-200 flex-1">{log.message}</span> <span className="text-slate-200 flex-1 break-all">{log.message}</span>
</div> </div>
)) ))
)} )}