From d05caa6c4ebec64368b5de0a581e4a82ac0c2a15 Mon Sep 17 00:00:00 2001
From: piexian <64474352+piexian@users.noreply.github.com>
Date: Thu, 7 May 2026 23:29:42 +0800
Subject: [PATCH 1/3] fix(dashboard): make console ANSI colors theme-aware

Switch logColorAnsiMap from static data to a computed property that picks
light or dark palette based on uiTheme, and watch it to re-render
already-displayed logs on theme change.
---
 .../components/shared/ConsoleDisplayer.vue    | 85 ++++++++++++-------
 1 file changed, 53 insertions(+), 32 deletions(-)

diff --git a/dashboard/src/components/shared/ConsoleDisplayer.vue b/dashboard/src/components/shared/ConsoleDisplayer.vue
index 8789925cac..f493fe8786 100644
--- a/dashboard/src/components/shared/ConsoleDisplayer.vue
+++ b/dashboard/src/components/shared/ConsoleDisplayer.vue
@@ -29,22 +29,36 @@ import { EventSourcePolyfill } from 'event-source-polyfill';
 </template>
 
 <script>
+import { useCustomizerStore } from '@/stores/customizer';
+
+const lightColorAnsiMap = {
+  '': 'color: #39C5BB; font-weight: bold;',
+  '': 'color: #00FFFF; font-weight: bold;',
+  '': 'color: #FFFF00; font-weight: bold;',
+  '': 'color: #FF0000;',
+  '': 'color: #FF0000; font-weight: bold;',
+  '': 'color: inherit; font-weight: normal;',
+  '': 'color: #00FF00;',
+  'default': 'color: #FFFFFF;'
+};
+
+const darkColorAnsiMap = {
+  '': 'color: #6cb6d9; font-weight: bold;',
+  '': 'color: #72c4cc; font-weight: bold;',
+  '': 'color: #d4b95e; font-weight: bold;',
+  '': 'color: #d46a6a;',
+  '': 'color: #e06060; font-weight: bold;',
+  '': 'color: inherit; font-weight: normal;',
+  '': 'color: #6cc070;',
+  'default': 'color: #c8c8c8;'
+};
+
 export default {
   name: 'ConsoleDisplayer',
   data() {
     return {
       autoScroll: true,
       isFullscreen: false,
-      logColorAnsiMap: {
-        '\u001b[1;34m': 'color: #6cb6d9; font-weight: bold;',
-        '\u001b[1;36m': 'color: #72c4cc; font-weight: bold;',
-        '\u001b[1;33m': 'color: #d4b95e; font-weight: bold;',
-        '\u001b[31m': 'color: #d46a6a;',
-        '\u001b[1;31m': 'color: #e06060; font-weight: bold;',
-        '\u001b[0m': 'color: inherit; font-weight: normal;',
-        '\u001b[32m': 'color: #6cc070;',
-        'default': 'color: #c8c8c8;'
-      },
       logLevels: ['DEBUG', 'INFO', 'WARNING', 'ERROR', 'CRITICAL'],
       selectedLevels: [0, 1, 2, 3, 4],
       levelColors: {
@@ -57,16 +71,20 @@ export default {
       localLogCache: [],
       eventSource: null,
       retryTimer: null,
-      retryAttempts: 0,           
-      maxRetryAttempts: 10,       
-      baseRetryDelay: 1000,       
-      lastEventId: null,          
+      retryAttempts: 0,
+      maxRetryAttempts: 10,
+      baseRetryDelay: 1000,
+      lastEventId: null,
     }
   },
   computed: {
     commonStore() {
       return useCommonStore();
     },
+    logColorAnsiMap() {
+      const customizerStore = useCustomizerStore();
+      return customizerStore.uiTheme === 'PurpleThemeDark' ? darkColorAnsiMap : lightColorAnsiMap;
+    },
   },
   props: {
     historyNum: {
@@ -84,6 +102,9 @@ export default {
         this.refreshDisplay();
       },
       deep: true
+    },
+    logColorAnsiMap() {
+      this.refreshDisplay();
     }
   },
   async mounted() {
@@ -111,15 +132,15 @@ export default {
       }
 
       console.log(`正在连接日志流... (尝试次数: ${this.retryAttempts})`);
-      
+
       const token = localStorage.getItem('token');
 
       this.eventSource = new EventSourcePolyfill('/api/live-log', {
         headers: {
             'Authorization': token ? `Bearer ${token}` : ''
         },
-        heartbeatTimeout: 300000, 
-        withCredentials: true 
+        heartbeatTimeout: 300000,
+        withCredentials: true
       });
 
       this.eventSource.onopen = () => {
@@ -152,7 +173,7 @@ export default {
         } else {
             console.warn('日志流连接错误:', err);
         }
-        
+
         if (this.eventSource) {
             this.eventSource.close();
             this.eventSource = null;
@@ -160,14 +181,14 @@ export default {
 
         if (this.retryAttempts >= this.maxRetryAttempts) {
             console.error('❌ 已达到最大重试次数，停止重连。请刷新页面重试。');
-            return; 
+            return;
         }
 
         const delay = Math.min(
             this.baseRetryDelay * Math.pow(2, this.retryAttempts),
             30000
         );
-        
+
         console.log(`⏳ ${delay}ms 后尝试第 ${this.retryAttempts + 1} 次重连...`);
 
         if (this.retryTimer) {
@@ -177,11 +198,11 @@ export default {
 
         this.retryTimer = setTimeout(async () => {
           this.retryAttempts++;
-          
+
           if (!this.lastEventId) {
              await this.fetchLogHistory();
           }
-          
+
           this.connectSSE();
         }, delay);
       };
@@ -194,16 +215,16 @@ export default {
 
       newLogs.forEach(log => {
 
-        const exists = this.localLogCache.some(existing => 
-          existing.time === log.time && 
+        const exists = this.localLogCache.some(existing =>
+          existing.time === log.time &&
           existing.data === log.data &&
           existing.level === log.level
         );
-        
+
         if (!exists) {
             this.localLogCache.push(log);
             hasUpdate = true;
-            
+
             if (this.isLevelSelected(log.level)) {
               this.printLog(log.data);
             }
@@ -212,7 +233,7 @@ export default {
 
       if (hasUpdate) {
         this.localLogCache.sort((a, b) => a.time - b.time);
-        
+
         const maxSize = this.commonStore.log_cache_max_len || 200;
         if (this.localLogCache.length > maxSize) {
            this.localLogCache.splice(0, this.localLogCache.length - maxSize);
@@ -230,7 +251,7 @@ export default {
         console.error('Failed to fetch log history:', err);
       }
     },
-    
+
     getLevelColor(level) {
       return this.levelColors[level] || 'grey';
     },
@@ -249,7 +270,7 @@ export default {
       const termElement = document.getElementById('term');
       if (termElement) {
         termElement.innerHTML = '';
-        
+
         if (this.localLogCache && this.localLogCache.length > 0) {
           this.localLogCache.forEach(logItem => {
             if (this.isLevelSelected(logItem.level)) {
@@ -314,13 +335,13 @@ export default {
       if (!ele) {
         return;
       }
-      
+
       let span = document.createElement('pre')
       let style = this.logColorAnsiMap['default']
       for (let key in this.logColorAnsiMap) {
         if (log.startsWith(key)) {
           style = this.logColorAnsiMap[key]
-          log = log.replace(key, '').replace('\u001b[0m', '')
+          log = log.replace(key, '').replace('', '')
           break
         }
       }
@@ -366,7 +387,7 @@ export default {
 }
 
 .fullscreen-btn {
-    color: rgba(255, 255, 255, 0.7) !important; /* 提高在深色背景下的对比度 */
+    color: rgba(255, 255, 255, 0.7) !important;
 }
 
 :deep(.console-log-line) {

From c4d1dfa73a8758bc7ec7093c6ccd5bf86623f08e Mon Sep 17 00:00:00 2001
From: piexian <64474352+piexian@users.noreply.github.com>
Date: Thu, 7 May 2026 23:53:02 +0800
Subject: [PATCH 2/3] =?UTF-8?q?fix(dashboard):=20use=20=1B=20escapes=20in?=
 =?UTF-8?q?=20console=20ANSI=20color=20maps?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace literal ESC control characters with  Unicode escape
sequences for editor readability and tooling safety.
---
 .../components/shared/ConsoleDisplayer.vue    | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/dashboard/src/components/shared/ConsoleDisplayer.vue b/dashboard/src/components/shared/ConsoleDisplayer.vue
index f493fe8786..53285edfe5 100644
--- a/dashboard/src/components/shared/ConsoleDisplayer.vue
+++ b/dashboard/src/components/shared/ConsoleDisplayer.vue
@@ -32,24 +32,24 @@ import { EventSourcePolyfill } from 'event-source-polyfill';
 import { useCustomizerStore } from '@/stores/customizer';
 
 const lightColorAnsiMap = {
-  '': 'color: #39C5BB; font-weight: bold;',
-  '': 'color: #00FFFF; font-weight: bold;',
-  '': 'color: #FFFF00; font-weight: bold;',
-  '': 'color: #FF0000;',
-  '': 'color: #FF0000; font-weight: bold;',
-  '': 'color: inherit; font-weight: normal;',
-  '': 'color: #00FF00;',
+  '\u001b[1;34m': 'color: #39C5BB; font-weight: bold;',
+  '\u001b[1;36m': 'color: #00FFFF; font-weight: bold;',
+  '\u001b[1;33m': 'color: #FFFF00; font-weight: bold;',
+  '\u001b[31m': 'color: #FF0000;',
+  '\u001b[1;31m': 'color: #FF0000; font-weight: bold;',
+  '\u001b[0m': 'color: inherit; font-weight: normal;',
+  '\u001b[32m': 'color: #00FF00;',
   'default': 'color: #FFFFFF;'
 };
 
 const darkColorAnsiMap = {
-  '': 'color: #6cb6d9; font-weight: bold;',
-  '': 'color: #72c4cc; font-weight: bold;',
-  '': 'color: #d4b95e; font-weight: bold;',
-  '': 'color: #d46a6a;',
-  '': 'color: #e06060; font-weight: bold;',
-  '': 'color: inherit; font-weight: normal;',
-  '': 'color: #6cc070;',
+  '\u001b[1;34m': 'color: #6cb6d9; font-weight: bold;',
+  '\u001b[1;36m': 'color: #72c4cc; font-weight: bold;',
+  '\u001b[1;33m': 'color: #d4b95e; font-weight: bold;',
+  '\u001b[31m': 'color: #d46a6a;',
+  '\u001b[1;31m': 'color: #e06060; font-weight: bold;',
+  '\u001b[0m': 'color: inherit; font-weight: normal;',
+  '\u001b[32m': 'color: #6cc070;',
   'default': 'color: #c8c8c8;'
 };
 
@@ -341,7 +341,7 @@ export default {
       for (let key in this.logColorAnsiMap) {
         if (log.startsWith(key)) {
           style = this.logColorAnsiMap[key]
-          log = log.replace(key, '').replace('', '')
+          log = log.replace(key, '').replace('\u001b[0m', '')
           break
         }
       }

From eeee13da7c895521fc42d76c5974b6b47f145ee6 Mon Sep 17 00:00:00 2001
From: piexian <64474352+piexian@users.noreply.github.com>
Date: Fri, 12 Jun 2026 07:37:01 +0800
Subject: [PATCH 3/3] fix(dashboard): use centralized dark theme getter

---
 dashboard/src/components/shared/ConsoleDisplayer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dashboard/src/components/shared/ConsoleDisplayer.vue b/dashboard/src/components/shared/ConsoleDisplayer.vue
index 70c4e5eadd..574b49ccac 100644
--- a/dashboard/src/components/shared/ConsoleDisplayer.vue
+++ b/dashboard/src/components/shared/ConsoleDisplayer.vue
@@ -83,7 +83,7 @@ export default {
     },
     logColorAnsiMap() {
       const customizerStore = useCustomizerStore();
-      return customizerStore.uiTheme === 'PurpleThemeDark' ? darkColorAnsiMap : lightColorAnsiMap;
+      return customizerStore.isDark ? darkColorAnsiMap : lightColorAnsiMap;
     },
   },
   props: {