From 05817cd9158d0d59b3bbd626936f3d78832c9948 Mon Sep 17 00:00:00 2001
From: yzygyin <1446680116@qq.com>
Date: Fri, 15 Nov 2024 14:53:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E3=80=90=E5=91=8A=E8=AD=A6=E7=AD=96?=
 =?UTF-8?q?=E7=95=A5=E3=80=91=E6=95=B0=E6=8D=AE=E9=A2=84=E8=A7=88=E6=A0=BC?=
 =?UTF-8?q?=E5=BC=8F=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../strategy-view/strategy-view-log.vue       | 35 +++++++++++++++----
 1 file changed, 29 insertions(+), 6 deletions(-)

diff --git a/bkmonitor/webpack/src/monitor-pc/pages/strategy-config/strategy-config-set/strategy-view/strategy-view-log.vue b/bkmonitor/webpack/src/monitor-pc/pages/strategy-config/strategy-config-set/strategy-view/strategy-view-log.vue
index ac65b40db6..6b0e89bf7c 100644
--- a/bkmonitor/webpack/src/monitor-pc/pages/strategy-config/strategy-config-set/strategy-view/strategy-view-log.vue
+++ b/bkmonitor/webpack/src/monitor-pc/pages/strategy-config/strategy-config-set/strategy-view/strategy-view-log.vue
@@ -63,17 +63,25 @@
       :width="700"
       :title="detailTitle"
     >
-      <pre class="log-content">
-        {{ logDetail }}
-      </pre>
+        <JsonViewer
+          class="log-content"
+          :preview-mode="true"
+          :value="logDetail"
+        />
     </bk-dialog>
   </div>
 </template>
 <script lang="ts">
 import dayjs from 'dayjs';
 import { Component, Emit, Prop, Vue } from 'vue-property-decorator';
+import JsonViewer from 'vue-json-viewer';
 
-@Component({ name: 'strategy-view-log' })
+@Component({
+  name: 'strategy-view-log',
+  components: {
+    JsonViewer
+  }
+ })
 export default class StrategyViewLog extends Vue {
   @Prop({ default: () => [], type: Array }) private readonly data!: any[];
   @Prop({ default: false, type: Boolean }) private readonly isLast!: boolean;
@@ -104,7 +112,14 @@ export default class StrategyViewLog extends Vue {
     }
   }
   handleShowDetai(row) {
-    this.logDetail = row.content || row['event.content'];
+    const content = row.content || row['event.content']
+    this.logDetail = (() => {
+      try {
+        return JSON.parse(content);
+      } catch {
+        return content;
+      }
+    })();
     this.showLogDetail = true;
   }
 
@@ -135,11 +150,19 @@ export default class StrategyViewLog extends Vue {
 
   &-content {
     height: 380px;
-    padding: 15px 20px;
+    padding: 15px 20px;  
     overflow: auto;
     word-break: break-all;
     background: #f5f6fa;
     border-radius: 2px;
+
+    &.jv-light {
+      background: #f5f6fa;
+    }
+
+    :deep(.jv-code) {
+      padding: 0;
+    }
   }
 }