From 13b2693f291903349ebaffa661092e2747141f1c Mon Sep 17 00:00:00 2001
From: Starry <codeprince2020@163.com>
Date: Wed, 17 Apr 2024 09:53:43 +0800
Subject: [PATCH] fix: css details (#391)

---
 src/views/dashboard/controls/Trace.vue              |  2 +-
 src/views/dashboard/related/demand-log/Content.vue  | 13 +++++++++++++
 src/views/dashboard/related/trace/TraceList.vue     |  3 ++-
 .../related/trace/components/D3Graph/Index.vue      |  1 +
 4 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/views/dashboard/controls/Trace.vue b/src/views/dashboard/controls/Trace.vue
index 4db7e77a..61f3907b 100644
--- a/src/views/dashboard/controls/Trace.vue
+++ b/src/views/dashboard/controls/Trace.vue
@@ -183,7 +183,7 @@ limitations under the License. -->
   .trace-line {
     position: relative;
     width: 2px;
-    height: 900px;
+    height: 100%;
     background-color: #e8e8e8;
     cursor: ew-resize;
 
diff --git a/src/views/dashboard/related/demand-log/Content.vue b/src/views/dashboard/related/demand-log/Content.vue
index 5432498b..72d822f4 100644
--- a/src/views/dashboard/related/demand-log/Content.vue
+++ b/src/views/dashboard/related/demand-log/Content.vue
@@ -25,11 +25,14 @@ limitations under the License. -->
 <script lang="ts" setup>
   import { onMounted, ref, onUnmounted, watch, toRaw } from "vue";
   import { useDemandLogStore } from "@/store/modules/demand-log";
+  import { useAppStoreWithOut } from "@/store/modules/app";
+  import { Themes } from "@/constants/data";
 
   /*global Nullable */
   const demandLogStore = useDemandLogStore();
   const monacoInstance = ref();
   const logContent = ref<Nullable<HTMLDivElement>>(null);
+  const appStore = useAppStoreWithOut();
 
   onMounted(() => {
     init();
@@ -50,6 +53,7 @@ limitations under the License. -->
       wordWrap: true,
       minimap: { enabled: false },
       readonly: true,
+      theme: getTheme(),
     });
     toRaw(monacoInstance.value).updateOptions({ readOnly: true });
     editorLayout();
@@ -64,6 +68,9 @@ limitations under the License. -->
       width: width,
     });
   }
+  function getTheme() {
+    return appStore.theme === Themes.Dark ? "vs-dark" : "vs";
+  }
   onUnmounted(() => {
     if (!toRaw(monacoInstance.value)) {
       return;
@@ -72,6 +79,12 @@ limitations under the License. -->
     monacoInstance.value = null;
     demandLogStore.setLogs("");
   });
+  watch(
+    () => appStore.theme,
+    () => {
+      toRaw(monacoInstance.value).updateOptions({ theme: getTheme() });
+    },
+  );
   watch(
     () => demandLogStore.logs,
     () => {
diff --git a/src/views/dashboard/related/trace/TraceList.vue b/src/views/dashboard/related/trace/TraceList.vue
index 6013cbe4..e9eb6625 100644
--- a/src/views/dashboard/related/trace/TraceList.vue
+++ b/src/views/dashboard/related/trace/TraceList.vue
@@ -164,7 +164,8 @@ limitations under the License. -->
   }
 
   .trace-t-wrapper {
-    overflow: hidden;
+    overflow-x: hidden;
+    overflow-y: scroll;
     border-right: 1px solid var(--sw-trace-list-border);
   }
 
diff --git a/src/views/dashboard/related/trace/components/D3Graph/Index.vue b/src/views/dashboard/related/trace/components/D3Graph/Index.vue
index 9d67f468..fda33eca 100644
--- a/src/views/dashboard/related/trace/components/D3Graph/Index.vue
+++ b/src/views/dashboard/related/trace/components/D3Graph/Index.vue
@@ -75,6 +75,7 @@ limitations under the License. -->
     if (!traceGraph.value) {
       return;
     }
+    d3.selectAll(".d3-tip").remove();
     if (props.type === "List") {
       tree.value = new ListGraph(traceGraph.value, handleSelectSpan);
       tree.value.init({ label: "TRACE_ROOT", children: segmentId.value }, props.data, fixSpansSize.value);