From 1b38a58d4525dd944449db4720b374a690fcb2e9 Mon Sep 17 00:00:00 2001
From: ngfchl <ngfchl@users.noreply.github.com>
Date: Mon, 6 Jul 2026 20:38:53 +0800
Subject: [PATCH] style: compact realtime log viewer

---
 web/static/index.html | 43 ++++++++++++++++++++++++++++++++++++-------
 1 file changed, 36 insertions(+), 7 deletions(-)

diff --git a/web/static/index.html b/web/static/index.html
index d63f43f..fe2fdd7 100644
--- a/web/static/index.html
+++ b/web/static/index.html
@@ -57,11 +57,38 @@
   .chat-item .time { flex-shrink: 0; font-size: 11px; color: #9ca3af; }
   .chat-item .text { font-size: 13px; color: #374151; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
 
-  .log-window { flex: 1; background: #0f172a; color: #d1d5db; border-radius: 10px; padding: 10px; overflow-y: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; }
-  .log-line { white-space: pre-wrap; line-height: 1.55; padding: 2px 0; border-bottom: 1px dashed rgba(255,255,255,.04); }
-  .log-line.INFO { color: #d1d5db; }
-  .log-line.WARNING { color: #fbbf24; }
-  .log-line.ERROR { color: #f87171; }
+  .log-window {
+    flex: 1;
+    background: #0b1020;
+    color: #cbd5e1;
+    border: 1px solid #1e293b;
+    border-radius: 8px;
+    padding: 4px 6px;
+    overflow: auto;
+    font-family: Consolas, Monaco, 'Courier New', monospace;
+    font-size: 11px;
+    line-height: 1.25;
+  }
+  .log-line {
+    display: grid;
+    grid-template-columns: 68px 46px minmax(0, 1fr);
+    gap: 6px;
+    align-items: baseline;
+    min-height: 16px;
+    padding: 1px 2px;
+    white-space: nowrap;
+    border-bottom: 1px solid rgba(148,163,184,.08);
+  }
+  .log-line:hover { background: rgba(148,163,184,.08); }
+  .log-time { color: #64748b; }
+  .log-level { font-weight: 700; text-align: center; border-radius: 3px; padding: 0 3px; }
+  .log-msg { overflow: hidden; text-overflow: ellipsis; }
+  .log-line.INFO .log-level { color: #93c5fd; background: rgba(59,130,246,.12); }
+  .log-line.WARNING .log-level { color: #fbbf24; background: rgba(245,158,11,.12); }
+  .log-line.ERROR .log-level { color: #f87171; background: rgba(239,68,68,.14); }
+  .log-line.INFO .log-msg { color: #cbd5e1; }
+  .log-line.WARNING .log-msg { color: #fde68a; }
+  .log-line.ERROR .log-msg { color: #fecaca; }
 
   .ban-section { height: 212px; }
   .ban-section .el-card__body { height: 100%; padding: 12px; display: flex; flex-direction: column; }
@@ -144,8 +171,10 @@
         </div>
         <div class="log-window" ref="logScroll">
           <div v-if="logs.length === 0" class="log-line">等待日志...</div>
-          <div v-for="(item, i) in logs" :key="i" class="log-line" :class="item.level">
-            [{{ formatTime(item.time) }}] [{{ item.level }}] {{ compactLog(item.message) }}
+          <div v-for="(item, i) in logs" :key="i" class="log-line" :class="item.level" :title="compactLog(item.message)">
+            <span class="log-time">{{ formatTime(item.time) }}</span>
+            <span class="log-level">{{ item.level }}</span>
+            <span class="log-msg">{{ compactLog(item.message) }}</span>
           </div>
         </div>
       </el-card>