From 21fe455fd641d68032654c76c3ac5b3f1302a9b1 Mon Sep 17 00:00:00 2001
From: Starry <zhouzixin@apache.org>
Date: Tue, 21 May 2024 23:11:23 +0800
Subject: [PATCH] fix: browser log display (#396)

---
 src/views/dashboard/related/log/LogTable/Index.vue  |  4 ++--
 .../dashboard/related/log/LogTable/LogBrowser.vue   | 13 +++----------
 .../dashboard/related/log/LogTable/LogDetail.vue    |  4 ++--
 3 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/src/views/dashboard/related/log/LogTable/Index.vue b/src/views/dashboard/related/log/LogTable/Index.vue
index 0162ca5f..8b60f33c 100644
--- a/src/views/dashboard/related/log/LogTable/Index.vue
+++ b/src/views/dashboard/related/log/LogTable/Index.vue
@@ -42,14 +42,14 @@ limitations under the License. -->
       @closed="showDetail = false"
       :title="t('logDetail')"
     >
-      <LogDetail :currentLog="currentLog" />
+      <LogDetail :currentLog="currentLog" :logTemplate="type === 'browser' ? BrowserLogConstants : ServiceLogDetail" />
     </el-dialog>
   </div>
 </template>
 <script lang="ts" setup>
   import { ref } from "vue";
   import { useI18n } from "vue-i18n";
-  import { ServiceLogConstants, BrowserLogConstants } from "./data";
+  import { ServiceLogConstants, BrowserLogConstants, ServiceLogDetail } from "./data";
   import LogBrowser from "./LogBrowser.vue";
   import LogService from "./LogService.vue";
   import LogDetail from "./LogDetail.vue";
diff --git a/src/views/dashboard/related/log/LogTable/LogBrowser.vue b/src/views/dashboard/related/log/LogTable/LogBrowser.vue
index 6f844d39..d8a6d7aa 100644
--- a/src/views/dashboard/related/log/LogTable/LogBrowser.vue
+++ b/src/views/dashboard/related/log/LogTable/LogBrowser.vue
@@ -44,13 +44,6 @@ limitations under the License. -->
   const logItem = ref<any>(null);
 
   function showSelectSpan() {
-    const items: NodeListOf<any> = document.querySelectorAll(".log-item");
-
-    for (const item of items) {
-      item.style.background = "#fff";
-    }
-
-    logItem.value.style.background = "rgba(0, 0, 0, 0.1)";
     emit("select", props.data);
   }
 </script>
@@ -62,15 +55,15 @@ limitations under the License. -->
   }
 
   .log-item.selected {
-    background: rgba(0, 0, 0, 0.04);
+    background: rgb(0 0 0 / 4%);
   }
 
   .log-item:not(.level0):hover {
-    background: rgba(0, 0, 0, 0.04);
+    background: rgb(0 0 0 / 4%);
   }
 
   .log-item:hover {
-    background: rgba(0, 0, 0, 0.04) !important;
+    background: rgb(0 0 0 / 4%) !important;
   }
 
   .log-item > div {
diff --git a/src/views/dashboard/related/log/LogTable/LogDetail.vue b/src/views/dashboard/related/log/LogTable/LogDetail.vue
index cf6def6f..98d89632 100644
--- a/src/views/dashboard/related/log/LogTable/LogDetail.vue
+++ b/src/views/dashboard/related/log/LogTable/LogDetail.vue
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="log-detail">
-    <div class="mb-10 clear rk-flex" v-for="(item, index) in ServiceLogDetail" :key="index">
+    <div class="mb-10 clear rk-flex" v-for="(item, index) in logTemplate" :key="index">
       <span class="g-sm-4 grey">{{ t(item.value) }}:</span>
       <span v-if="['timestamp', 'time'].includes(item.label)" class="g-sm-8 mb-10">
         {{ dateFormat(currentLog[item.label]) }}
@@ -38,11 +38,11 @@ limitations under the License. -->
   import { useI18n } from "vue-i18n";
   import { dateFormat } from "@/utils/dateFormat";
   import { formatJson } from "@/utils/formatJson";
-  import { ServiceLogDetail } from "./data";
 
   /*global defineProps */
   const props = defineProps({
     currentLog: { type: Object as PropType<any>, default: () => ({}) },
+    logTemplate: { type: Object as PropType<any>, default: () => ({}) },
   });
   const { t } = useI18n();
   const logTags = computed(() => {