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
ref={logContainerRef}
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 ? (
<div className="flex items-center justify-center h-full text-slate-500">
@@ -193,17 +193,17 @@ export default function LiveLogViewer({
logs.map((log, index) => (
<div
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={`flex-shrink-0 uppercase font-semibold w-16 ${levelColors[log.level] || 'text-slate-400'}`}>
[{log.level}]
<span className="text-slate-500 flex-shrink-0 font-medium">{log.timestamp}</span>
<span className={`flex-shrink-0 uppercase font-bold w-20 text-center rounded-[4px] px-1 ${levelColors[log.level] || 'text-slate-400'}`}>
{log.level}
</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 && (
<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>
))
)}