fix: 优化日志样式

Author: yusheng929

resources/logger/index.css

@@ -1,215 +1,200 @@
+:root {
+  --bg-color: #1e1e1e;
+  --container-bg: #252526;
+  --text-color: #d4d4d4;
+  --border-color: #3e3e42;
+  --header-bg: #333333;
+  --accent-color: #007acc;
+
+  --level-debug: #b5cea8;
+  --level-info: #569cd6;
+  --level-mark: #c586c0;
+  --level-warn: #ce9178;
+  --level-error: #f44747;
+  --level-fatal: #d16969;
+}
+
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 
 body {
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, 'Microsoft YaHei';
-  background: linear-gradient(135deg, #c7d2fe 0%, #fbcfe8 50%, #a5f3fc 100%);
-  padding: 20px;
-  min-height: 100vh;
+  font-family: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  padding: 0;
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.5;
 }
 
 .container {
-  max-width: 1400px;
-  margin: 0 auto;
-  background: rgba(255, 255, 255, 0.96);
-  border-radius: 18px;
-  box-shadow: 0 18px 45px rgba(148, 163, 184, 0.45);
-  overflow: hidden;
-  width: fit-content;
+  max-width: 100%;
+  margin: 0;
+  background: var(--bg-color);
+  display: flex;
+  flex-direction: column;
 }
 
 .header {
-  position: relative;
-  padding: 30px;
-  color: #0f172a;
-  overflow: hidden;
-  background: url('../img/logger.png') center/cover no-repeat, #e0f2ff;
-  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
-}
-
-.header h1,
-.header .info {
-  position: relative;
-  z-index: 2;
-}
-
-.header-bg-text {
-  position: absolute;
-  inset: 0;
+  background: var(--header-bg);
+  padding: 10px 20px;
+  border-bottom: 1px solid var(--border-color);
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  justify-content: center;
-  font-size: 92px;
-  font-weight: 800;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: rgba(30, 64, 175, 0.2);
-  filter: blur(2px);
-  pointer-events: none;
-  z-index: 1;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
 }
 
 .header h1 {
-  font-size: 32px;
-  margin-bottom: 15px;
+  font-size: 16px;
   font-weight: 600;
-  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+  color: #fff;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.header h1::before {
+  content: '>';
+  color: var(--accent-color);
+  font-weight: bold;
 }
 
 .info {
   display: flex;
-  gap: 20px;
-  font-size: 14px;
-  opacity: 0.95;
+  gap: 15px;
+  font-size: 12px;
+  color: #cccccc;
 }
 
 .info span {
-  background: rgba(255, 255, 255, 0.2);
-  padding: 6px 12px;
-  border-radius: 6px;
-  backdrop-filter: blur(10px);
+  background: rgba(255, 255, 255, 0.1);
+  padding: 2px 8px;
+  border-radius: 3px;
+}
+
+.header-bg-text {
+  display: none;
 }
 
 .logs-container {
-  padding: 20px;
-  /* 让截图包含全部日志，不使用内部滚动条 */
-  overflow: visible;
+  padding: 10px 0;
 }
 
 .log-item {
-  display: flex;
-  align-items: flex-start;
-  padding: 12px 16px;
-  margin-bottom: 8px;
-  border-radius: 8px;
-  background: #f9fafb;
-  border-left: 4px solid #e5e7eb;
-  transition: all 0.2s ease;
+  padding: 2px 10px;
+  border-left: 3px solid transparent;
+  transition: background-color 0.1s;
   font-size: 13px;
   line-height: 1.6;
 }
 
 .log-item:hover {
-  transform: translateX(4px);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  background-color: #2a2d2e;
+}
+
+.log-content {
+  display: block;
+}
+
+.log-prefix {
+  color: #858585;
+  font-size: 12px;
+  white-space: nowrap;
+  opacity: 0.9;
+  margin-right: 8px;
 }
 
 .log-time {
-  color: #6c757d;
-  font-family: 'Consolas', 'Monaco', monospace;
-  min-width: 100px;
-  margin-right: 12px;
-  font-weight: 500;
+  color: #858585;
 }
 
 .log-level {
-  display: inline-block;
-  padding: 2px 10px;
-  border-radius: 4px;
-  font-weight: 600;
+  font-weight: bold;
   text-transform: uppercase;
-  font-size: 11px;
-  min-width: 60px;
-  text-align: center;
-  margin-right: 12px;
+  font-size: 12px;
 }
 
 .level-debug {
-  background: #9ca3af;
-  color: white;
+  color: var(--level-debug);
 }
 
 .level-info {
-  background: #38bdf8;
-  color: white;
+  color: var(--level-info);
 }
 
 .level-mark {
-  background: #a855f7;
-  color: white;
+  color: var(--level-mark);
 }
 
 .level-warn {
-  background: #facc15;
-  color: #422006;
+  color: var(--level-warn);
 }
 
 .level-error {
-  background: #ef4444;
-  color: white;
+  color: var(--level-error);
 }
 
 .level-fatal {
-  background: #000;
-  color: white;
+  color: var(--level-fatal);
+  background: #5a1d1d;
+  padding: 0 4px;
+  border-radius: 2px;
 }
 
 .log-message {
-  flex: 1;
-  word-break: break-all;
-  color: #212529;
-  font-family: 'Consolas', 'Monaco', monospace;
   white-space: pre-wrap;
+  word-break: break-word;
+  color: #cccccc;
 }
 
-/* 不同日志级别的边框颜色 */
-.log-debug {
-  border-left-color: #d1d5db;
-  background: #f9fafb;
-}
-
-.log-info {
-  border-left-color: #93c5fd;
-  background: #e0f2fe;
-}
-
-.log-mark {
-  border-left-color: #c4b5fd;
-  background: #f3e8ff;
-}
-
-.log-warn {
-  border-left-color: #fcd34d;
-  background: #fef3c7;
+/* Log item border indicators */
+.log-item.log-error {
+  border-left-color: var(--level-error);
+  background: rgba(244, 71, 71, 0.05);
 }
 
-.log-error {
-  border-left-color: #fca5a5;
-  background: #fee2e2;
+.log-item.log-warn {
+  border-left-color: var(--level-warn);
+  background: rgba(206, 145, 120, 0.05);
 }
 
-.log-fatal {
-  border-left-color: #9ca3af;
-  background: #f5f5f5;
+.log-item.log-fatal {
+  border-left-color: var(--level-fatal);
+  background: rgba(209, 105, 105, 0.1);
 }
 
 .footer {
-  background: #f8f9fa;
-  padding: 15px 30px;
+  padding: 5px 20px;
   text-align: center;
-  color: #6c757d;
-  font-size: 12px;
-  border-top: 1px solid #dee2e6;
+  color: #666;
+  font-size: 11px;
+  border-top: 1px solid var(--border-color);
+  background: var(--container-bg);
 }
 
-/* 滚动条样式 */
-.logs-container::-webkit-scrollbar {
-  width: 8px;
+/* Scrollbar */
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
 }
 
-.logs-container::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-radius: 4px;
+::-webkit-scrollbar-track {
+  background: var(--bg-color);
 }
 
-.logs-container::-webkit-scrollbar-thumb {
-  background: #888;
-  border-radius: 4px;
+::-webkit-scrollbar-thumb {
+  background: #424242;
+  border-radius: 5px;
 }
 
-.logs-container::-webkit-scrollbar-thumb:hover {
-  background: #555;
+::-webkit-scrollbar-thumb:hover {
+  background: #4f4f4f;
 }

resources/logger/index.html

@@ -11,7 +11,7 @@
 <body>
   <div class="container">
     <div class="header">
-      <h1>📋 Karin 日志</h1>
+      <h1>Karin 日志</h1>
       <div class="info">
         <span class="date">{{date}}</span>
         <span class="count">共 {{total}} 条日志</span>
@@ -21,9 +21,11 @@ <h1>📋 Karin 日志</h1>
     <div class="logs-container">
       {{each logs}}
       <div class="log-item log-{{$value.level}}">
-        <span class="log-time">{{$value.time}}</span>
-        <span class="log-level level-{{$value.level}}">{{$value.level}}</span>
-        <span class="log-message">{{@ $value.messageHtml}}</span>
+        <div class="log-content">
+          <span class="log-prefix">[<span class="log-time">{{$value.time}}</span>][<span
+              class="log-level level-{{$value.level}}">{{$value.level}}</span>]</span>
+          <span class="log-message">{{@ $value.messageHtml}}</span>
+        </div>
       </div>
       {{/each}}
     </div>

src/apps/logger.ts

@@ -264,7 +264,7 @@ export const logViewer = karin.command(/^#日志\s*(\d+)?$/, async (e) => {
   const match = e.msg.match(/^#日志\s*(\d+)?$/)
   let limit = match && match[1] ? Number(match[1]) : 50
   if (!Number.isFinite(limit) || limit <= 0) limit = 50
-  if (limit > 200) limit = 200
+  if (limit > 1000) limit = 1000
 
   const logs = await getTodayLogs(limit)
   const parsedLogs = logs.map(parseLogLine)