From 8bad14309dbdebb34e3ad56c25b647969685226f Mon Sep 17 00:00:00 2001
From: zhengkunwang223 <1paneldev@sina.com>
Date: Tue, 9 Sep 2025 14:14:14 +0800
Subject: [PATCH] perf: Optimize the display of HTML-type logs

---
 .../log/custom-hightlight/index.vue           | 57 ++++++++++++++-----
 frontend/src/components/log/file/index.vue    |  5 +-
 2 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/log/custom-hightlight/index.vue b/frontend/src/components/log/custom-hightlight/index.vue
index 5fc82c46ec64..cf1d20d48d26 100644
--- a/frontend/src/components/log/custom-hightlight/index.vue
+++ b/frontend/src/components/log/custom-hightlight/index.vue
@@ -1,11 +1,10 @@
 <template>
     <span v-for="(token, index) in tokens" :key="index" :class="['token', token.type]" :style="{ color: token.color }">
-        <span v-if="token.type != 'html'" class="whitespace-pre">{{ token.text }}</span>
-        <span v-else v-html="token.text" class="whitespace-pre"></span>
+        <span class="whitespace-pre">{{ token.text }}</span>
     </span>
 </template>
 <script setup lang="ts">
-import anser from 'anser';
+import { ansiToJson } from 'anser';
 interface TokenRule {
     type: string;
     pattern: RegExp;
@@ -277,19 +276,51 @@ const getContainerRules = (containerName?: string): TokenRule[] => {
     return [...specificRules, ...commonContainerRules];
 };
 
-function hasANSICodes(text: string) {
-    const ansiRegex = /\x1b\[[0-9;]*[mK]/;
-    return ansiRegex.test(text);
-}
-
 function tokenizeLog(log: string): Token[] {
-    if (hasANSICodes(log)) {
-        const html = anser.ansiToHtml(log);
+    if (
+        log.indexOf('<div') !== -1 ||
+        log.indexOf('<span') !== -1 ||
+        log.indexOf('<p>') !== -1 ||
+        log.indexOf('<img') !== -1 ||
+        log.indexOf('</div>') !== -1 ||
+        log.indexOf('</span>') !== -1 ||
+        log.indexOf('<script>') !== -1
+    ) {
         return [
             {
-                text: html,
-                type: 'html',
-                color: '',
+                text: log,
+                type: 'plain',
+                color: '#666666',
+            },
+        ];
+    }
+
+    if (log.indexOf('\x1b[') !== -1) {
+        try {
+            const parsed = ansiToJson(log, { json: true, remove_empty: true });
+            return parsed.map((item: any) => ({
+                text: item.content,
+                type: 'ansi',
+                color: item.fg ? `rgb(${item.fg})` : '#666666',
+            }));
+        } catch (error) {
+            return [
+                {
+                    text: log,
+                    type: 'plain',
+                    color: '#666666',
+                },
+            ];
+        }
+    }
+
+    const textLength = log.length;
+    if (textLength > 5000) {
+        return [
+            {
+                text: log,
+                type: 'plain',
+                color: '#666666',
             },
         ];
     }
diff --git a/frontend/src/components/log/file/index.vue b/frontend/src/components/log/file/index.vue
index 80043ecc6ad4..29aecef0b0da 100644
--- a/frontend/src/components/log/file/index.vue
+++ b/frontend/src/components/log/file/index.vue
@@ -490,15 +490,16 @@ defineExpose({ changeTail, onDownload, clearLog });
     left: 0;
     right: 0;
     will-change: transform;
+    width: max-content;
+    min-width: 100%;
 }
 
 .log-item {
-    width: 100%;
+    min-width: 100%;
     padding: 5px;
     color: #f5f5f5;
     box-sizing: border-box;
     white-space: nowrap;
-    overflow: hidden;
 }
 
 .log-content {