feat: Implement global design system with dark mode, animations, and add a new LiveLogViewer component.
This commit is contained in:
@@ -152,8 +152,8 @@ export default function LiveLogViewer({
|
|||||||
<button
|
<button
|
||||||
onClick={() => isPaused ? handleResume() : setIsPaused(true)}
|
onClick={() => isPaused ? handleResume() : setIsPaused(true)}
|
||||||
className={`p-1.5 rounded-lg transition-colors ${isPaused
|
className={`p-1.5 rounded-lg transition-colors ${isPaused
|
||||||
? 'bg-yellow-500/20 text-yellow-400 hover:bg-yellow-500/30'
|
? 'bg-yellow-500/20 text-yellow-400 hover:bg-yellow-500/30'
|
||||||
: 'bg-slate-700 text-slate-400 hover:bg-slate-600'
|
: 'bg-slate-700 text-slate-400 hover:bg-slate-600'
|
||||||
}`}
|
}`}
|
||||||
title={isPaused ? '继续' : '暂停'}
|
title={isPaused ? '继续' : '暂停'}
|
||||||
>
|
>
|
||||||
@@ -169,8 +169,8 @@ export default function LiveLogViewer({
|
|||||||
<button
|
<button
|
||||||
onClick={() => setAutoScroll(!autoScroll)}
|
onClick={() => setAutoScroll(!autoScroll)}
|
||||||
className={`p-1.5 rounded-lg transition-colors ${autoScroll
|
className={`p-1.5 rounded-lg transition-colors ${autoScroll
|
||||||
? 'bg-blue-500/20 text-blue-400'
|
? 'bg-blue-500/20 text-blue-400'
|
||||||
: 'bg-slate-700 text-slate-400'
|
: 'bg-slate-700 text-slate-400'
|
||||||
}`}
|
}`}
|
||||||
title={autoScroll ? '自动滚动: 开' : '自动滚动: 关'}
|
title={autoScroll ? '自动滚动: 开' : '自动滚动: 关'}
|
||||||
>
|
>
|
||||||
@@ -182,7 +182,8 @@ export default function LiveLogViewer({
|
|||||||
{/* Log Content */}
|
{/* Log Content */}
|
||||||
<div
|
<div
|
||||||
ref={logContainerRef}
|
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 ? (
|
{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">
|
||||||
|
|||||||
@@ -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';
|
@import 'tailwindcss';
|
||||||
|
|
||||||
/* TailwindCSS 4 Theme Configuration */
|
/* TailwindCSS 4 Theme Configuration */
|
||||||
|
|||||||
Reference in New Issue
Block a user