feat: dark mode

This commit is contained in:
2025-06-29 09:21:29 +08:00
parent 2a0115ea17
commit 81d73cf17c
10 changed files with 139 additions and 190 deletions
+12 -12
View File
@@ -101,21 +101,21 @@ export default function DecodePage() {
return (
<div className="max-w-4xl mx-auto p-6">
<h1 className="text-2xl font-bold text-gray-800 mb-6">Base64 日志解码器</h1>
<h1 className="text-2xl font-bold text-gray-800 dark:text-white mb-6">Base64 日志解码器</h1>
{/* 文件上传区域 */}
<div className="mb-8">
<div className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
<label className="block mb-4 text-sm font-medium text-gray-700">
<div className="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-6 text-center">
<label className="block mb-4 text-sm font-medium text-gray-700 dark:text-gray-300">
选择日志文件:
</label>
<input
type="file"
accept=".txt,.log"
onChange={handleFileChange}
className="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4
className="block w-full text-sm text-gray-500 dark:text-gray-400 file:mr-4 file:py-2 file:px-4
file:rounded-md file:border-0 file:text-sm file:font-semibold
file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100
file:bg-blue-50 dark:file:bg-blue-900/50 file:text-blue-700 dark:file:text-blue-300 hover:file:bg-blue-100 dark:hover:file:bg-blue-800/50
cursor-pointer"
/>
</div>
@@ -123,7 +123,7 @@ export default function DecodePage() {
{/* 错误提示 */}
{errorMessage && (
<div className="mb-6 p-4 bg-red-50 text-red-600 rounded-md">
<div className="mb-6 p-4 bg-red-50 dark:bg-red-900/50 text-red-600 dark:text-red-300 rounded-md">
{errorMessage}
</div>
)}
@@ -131,20 +131,20 @@ export default function DecodePage() {
{/* 解码结果 */}
{decodedLines.length > 0 && (
<div className="space-y-2">
<h2 className="text-lg font-semibold text-gray-700 mb-4">解码结果:</h2>
<h2 className="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-4">解码结果:</h2>
<div
ref={resultRef}
className="bg-white shadow rounded-lg overflow-auto max-h-[600px]"
className="bg-white dark:bg-gray-800 shadow rounded-lg overflow-auto max-h-[600px]"
>
<div className="divide-y divide-gray-100">
<div className="divide-y divide-gray-100 dark:divide-gray-700">
{decodedLines.map((line, index) => (
<div
key={index}
className={`py-1.5 px-4 hover:bg-gray-50 leading-tight ${
line.isError ? 'bg-red-50' : ''
className={`py-1.5 px-4 hover:bg-gray-50 dark:hover:bg-gray-700 leading-tight ${
line.isError ? 'bg-red-50 dark:bg-red-900/30' : ''
}`}
>
<pre className="whitespace-pre-wrap font-mono text-sm text-gray-800">
<pre className="whitespace-pre-wrap font-mono text-sm text-gray-800 dark:text-gray-200">
{line.content}
</pre>
</div>