ngfchl/tg-spam-guard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: compact realtime log viewer

Browse Source
This commit is contained in:
ngfchl
2026-07-06 20:38:53 +08:00
parent f65426f82c
commit 1b38a58d45
1 changed files with 36 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/static/index.html
+36 -7
View File
@@ -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>