feat: dark mode
This commit is contained in:
+12
-12
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user