From 01fa56014f489554e33f8c2089d9809795076101 Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Mon, 21 Aug 2023 17:24:08 +0800
Subject: [PATCH] feat: update sankey style

---
 .../related/topology/components/PodTopology.vue          | 9 +++++----
 .../dashboard/related/topology/components/Sankey.vue     | 6 +++---
 .../dashboard/related/topology/components/Settings.vue   | 1 +
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/views/dashboard/related/topology/components/PodTopology.vue b/src/views/dashboard/related/topology/components/PodTopology.vue
index a987f56b..fb5409da 100644
--- a/src/views/dashboard/related/topology/components/PodTopology.vue
+++ b/src/views/dashboard/related/topology/components/PodTopology.vue
@@ -266,7 +266,6 @@ limitations under the License. -->
 <style lang="scss" scoped>
   .sankey {
     margin-top: 10px;
-    background-color: #333840 !important;
     color: #ddd;
   }
 
@@ -276,7 +275,8 @@ limitations under the License. -->
     right: 10px;
     width: 400px;
     height: 600px;
-    background-color: #2b3037;
+    border: 1px solid #eee;
+    background-color: $theme-background;
     overflow: auto;
     padding: 10px 15px;
     border-radius: 3px;
@@ -284,6 +284,7 @@ limitations under the License. -->
     transition: all 0.5ms linear;
     z-index: 99;
     text-align: left;
+    box-shadow: #eee 1px 2px 10px;
   }
 
   .tool {
@@ -300,8 +301,8 @@ limitations under the License. -->
     text-align: center;
     cursor: pointer;
     transition: all 0.5ms linear;
-    background-color: #252a2f99;
-    color: #ddd;
+    background: rgb(0 0 0 / 30%);
+    color: $text-color;
     display: inline-block;
     border-radius: 3px;
   }
diff --git a/src/views/dashboard/related/topology/components/Sankey.vue b/src/views/dashboard/related/topology/components/Sankey.vue
index 51ba4823..e749f5b2 100644
--- a/src/views/dashboard/related/topology/components/Sankey.vue
+++ b/src/views/dashboard/related/topology/components/Sankey.vue
@@ -51,16 +51,16 @@ limitations under the License. -->
         data: topologyStore.nodes,
         links: topologyStore.calls,
         label: {
-          color: "#fff",
+          color: "#666",
           formatter: (param: any) => param.data.name,
         },
-        color: ["#3fe1da", "#6be6c1", "#3fcfdc", "#626c91", "#3fbcde", "#a0a7e6", "#3fa9e1", "#96dee8", "#bf99f8"],
+        color: ["#6be6c1", "#3fcfdc", "#626c91", "#3fbcde", "#a0a7e6", "#3fa9e1", "#96dee8", "#bf99f8"],
         itemStyle: {
           borderWidth: 0,
         },
         lineStyle: {
           color: "source",
-          opacity: 0.12,
+          opacity: 0.3,
         },
         tooltip: {
           position: "bottom",
diff --git a/src/views/dashboard/related/topology/components/Settings.vue b/src/views/dashboard/related/topology/components/Settings.vue
index e62c07ef..168b3d2e 100644
--- a/src/views/dashboard/related/topology/components/Settings.vue
+++ b/src/views/dashboard/related/topology/components/Settings.vue
@@ -619,6 +619,7 @@ limitations under the License. -->
   .label {
     font-size: $font-size-smaller;
     margin-top: 10px;
+    color: #666;
   }
 
   .legend-btn {