fix: fix console log level alignment and mobile layout issue (AstrBotDevs#7988)

* fix: fix console log level alignment and mobile layout issue

* Update ConsoleDisplayer.vue

Author: lingyun14beta

dashboard/src/components/shared/ConsoleDisplayer.vue

@@ -23,7 +23,7 @@ import { EventSourcePolyfill } from 'event-source-polyfill';
       ></v-btn>
     </div>
 
-    <div id="term" style="background-color: #1e1e1e; padding: 16px; border-radius: 8px; overflow-y:auto; height: 100%">
+    <div id="term" class="console-term">
     </div>
   </div>
 </template>
@@ -279,6 +279,36 @@ export default {
       this.isFullscreen = !!document.fullscreenElement;
     },
 
+    appendLogContent(element, log) {
+      const levelMatch = log.match(/\[(DEBG|INFO|WARN|ERRO|CRIT|DEBUG|WARNING|ERROR|CRITICAL)\]/);
+      if (!levelMatch) {
+        element.innerText = `${log}`;
+        return;
+      }
+
+      const levelStart = levelMatch.index;
+      const levelEnd = levelStart + levelMatch[0].length;
+      const prefix = log.slice(0, levelStart).trimEnd();
+      const message = log.slice(levelEnd).trimStart();
+
+      const prefixSpan = document.createElement('span');
+      prefixSpan.className = 'console-log-prefix';
+      prefixSpan.innerText = prefix;
+
+      const levelSpan = document.createElement('span');
+      levelSpan.className = 'console-log-level';
+      levelSpan.innerText = levelMatch[0];
+
+      const messageSpan = document.createElement('span');
+      messageSpan.className = 'console-log-message';
+      messageSpan.innerText = message;
+
+      element.classList.add('console-log-line--structured');
+      element.appendChild(prefixSpan);
+      element.appendChild(levelSpan);
+      element.appendChild(messageSpan);
+    },
+
     printLog(log) {
       let ele = document.getElementById('term')
       if (!ele) {
@@ -297,7 +327,7 @@ export default {
 
       span.style = style
       span.classList.add('console-log-line', 'fade-in')
-      span.innerText = `${log}`;
+      this.appendLogContent(span, log);
       ele.appendChild(span)
       if (this.autoScroll) {
         ele.scrollTop = ele.scrollHeight
@@ -328,18 +358,60 @@ export default {
   margin-left: 20px;
 }
 
+.console-term {
+  background-color: #1e1e1e;
+  border-radius: 8px;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: auto;
+  padding: 16px;
+}
+
 .fullscreen-btn {
     color: rgba(255, 255, 255, 0.7) !important; /* 提高在深色背景下的对比度 */
 }
 
 :deep(.console-log-line) {
   display: block;
-  margin-bottom: 2px;
+  margin: 0 0 2px;
   font-family: SFMono-Regular, Menlo, Monaco, Consolas, var(--astrbot-font-cjk-mono), monospace;
   font-size: 12px;
   white-space: pre-wrap;
 }
 
+:deep(.console-log-line--structured) {
+  display: grid;
+  grid-template-columns: max-content max-content minmax(0, 1fr);
+  column-gap: 8px;
+  align-items: start;
+  white-space: normal;
+}
+
+:deep(.console-log-prefix),
+:deep(.console-log-level),
+:deep(.console-log-message) {
+  min-width: 0;
+  white-space: pre-wrap;
+}
+
+:deep(.console-log-level) {
+  font-variant-numeric: tabular-nums;
+}
+
+:deep(.console-log-message) {
+  overflow-wrap: anywhere;
+}
+
+@media (max-width: 768px) {
+  :deep(.console-log-line--structured) {
+    grid-template-columns: 1fr;
+  }
+  :deep(.console-log-prefix:empty),
+  :deep(.console-log-level:empty) {
+    display: none;
+  }
+}
+
 :deep(.fade-in) {
   animation: fadeIn 0.3s;
 }