From 0f319312a0d62f51a56d7cf9297d69869a7bc442 Mon Sep 17 00:00:00 2001
From: kyx236 <kyxjames23@gmail.com>
Date: Sat, 31 Jan 2026 03:58:37 +0800
Subject: [PATCH] feat: Implement global design system with dark mode,
 animations, and add a new LiveLogViewer component.

---
 frontend/src/components/LiveLogViewer.tsx | 11 ++++++-----
 frontend/src/index.css                    |  2 +-
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/LiveLogViewer.tsx b/frontend/src/components/LiveLogViewer.tsx
index 4fa0a07..7df401c 100644
--- a/frontend/src/components/LiveLogViewer.tsx
+++ b/frontend/src/components/LiveLogViewer.tsx
@@ -152,8 +152,8 @@ export default function LiveLogViewer({
                     <button
                         onClick={() => isPaused ? handleResume() : setIsPaused(true)}
                         className={`p-1.5 rounded-lg transition-colors ${isPaused
-                                ? 'bg-yellow-500/20 text-yellow-400 hover:bg-yellow-500/30'
-                                : 'bg-slate-700 text-slate-400 hover:bg-slate-600'
+                            ? 'bg-yellow-500/20 text-yellow-400 hover:bg-yellow-500/30'
+                            : 'bg-slate-700 text-slate-400 hover:bg-slate-600'
                             }`}
                         title={isPaused ? '继续' : '暂停'}
                     >
@@ -169,8 +169,8 @@ export default function LiveLogViewer({
                     <button
                         onClick={() => setAutoScroll(!autoScroll)}
                         className={`p-1.5 rounded-lg transition-colors ${autoScroll
-                                ? 'bg-blue-500/20 text-blue-400'
-                                : 'bg-slate-700 text-slate-400'
+                            ? 'bg-blue-500/20 text-blue-400'
+                            : 'bg-slate-700 text-slate-400'
                             }`}
                         title={autoScroll ? '自动滚动: 开' : '自动滚动: 关'}
                     >
@@ -182,7 +182,8 @@ export default function LiveLogViewer({
             {/* Log Content */}
             <div
                 ref={logContainerRef}
-                className="h-80 overflow-y-auto p-3 font-mono text-xs space-y-0.5"
+                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"
             >
                 {logs.length === 0 ? (
                     <div className="flex items-center justify-center h-full text-slate-500">
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 30a4442..77b6d5c 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@300;400;500;600;700&display=swap');
 @import 'tailwindcss';
 
 /* TailwindCSS 4 Theme Configuration */