From 96830ca3efbfe84bc24b174c98d64d4ce55e04b7 Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Fri, 10 Nov 2023 23:37:39 +0800
Subject: [PATCH] feat: update

---
 src/layout/components/NavBar.vue                  |  6 +++---
 src/styles/theme.scss                             |  6 ++----
 src/views/dashboard/panel/Tool.vue                | 15 ++++++++-------
 .../related/topology/components/Graph.vue         |  7 +++----
 4 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/src/layout/components/NavBar.vue b/src/layout/components/NavBar.vue
index 8f16e0ee..92bb8a9e 100644
--- a/src/layout/components/NavBar.vue
+++ b/src/layout/components/NavBar.vue
@@ -48,12 +48,12 @@ limitations under the License. -->
         @input="changeTimeRange"
       />
       <span> UTC{{ appStore.utcHour >= 0 ? "+" : "" }}{{ `${appStore.utcHour}:${appStore.utcMin}` }} </span>
-      <span title="refresh" class="ghost ml-5 cp" @click="handleReload">
-        <Icon iconName="retry" :loading="appStore.autoRefresh" class="middle" />
-      </span>
       <span class="ml-5">
         <el-switch v-model="theme" :active-icon="Moon" :inactive-icon="Sunny" inline-prompt @change="changeTheme" />
       </span>
+      <span title="refresh" class="ghost ml-5 cp" @click="handleReload">
+        <Icon iconName="retry" :loading="appStore.autoRefresh" class="middle" />
+      </span>
       <span class="version ml-5 cp">
         <el-popover trigger="hover" width="250" placement="bottom" :content="appStore.version">
           <template #reference>
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
index 7823221f..32f3df24 100644
--- a/src/styles/theme.scss
+++ b/src/styles/theme.scss
@@ -36,12 +36,11 @@ html {
   --sw-table-col: #fff;
   --sw-config-header: aliceblue;
   --sw-topology-color: #666;
-  --sw-topology-operations-bg: #f7f9fa;
   --vis-tooltip-bg: #fff;
   --sw-topology-switch-icon: rgba(0, 0, 0, 0.3);
   --sw-topology-box-shadow: #eee 1px 2px 10px;
   --sw-topology-setting-bg: #fff;
-  --sw-topology-border: 1px solid #000000;
+  --sw-topology-border: 1px solid #999;
 }
 
 html.dark {
@@ -64,12 +63,11 @@ html.dark {
   --sw-table-col: none;
   --sw-config-header: #333;
   --sw-topology-color: #ccc;
-  --sw-topology-operations-bg: #4b4b52;
   --vis-tooltip-bg: #414243;
   --sw-topology-switch-icon: #aaa;
   --sw-topology-box-shadow: 0 0 2px 0 #444;
   --sw-topology-setting-bg: #333;
-  --sw-topology-border: 1px solid #999;
+  --sw-topology-border: 1px solid #666;
 }
 
 .el-table tr {
diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index 1541fb31..f584a057 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="dashboard-tool flex-h">
-    <div :class="isRelation ? 'flex-v' : 'flex-h'">
+    <div :class="isRelation ? 'flex-v' : 'flex-h'" class="tool-selectors">
       <div class="flex-h">
         <div class="selectors-item" v-if="key !== 10">
           <span class="label">$Service</span>
@@ -103,7 +103,7 @@ limitations under the License. -->
           <template #dropdown>
             <el-dropdown-menu>
               <el-dropdown-item @click="clickIcons(t)" v-for="(t, index) in toolIcons" :key="index" :title="t.content">
-                <Icon class="mr-5" size="middle" :iconName="t.name" />
+                <Icon class="mr-5" size="sm" :iconName="t.name" />
                 <span>{{ t.content }}</span>
               </el-dropdown-item>
             </el-dropdown-menu>
@@ -115,7 +115,7 @@ limitations under the License. -->
           </i>
         </el-tooltip>
       </div>
-      <div class="switch">
+      <div class="ml-5">
         <el-switch
           v-model="dashboardStore.editMode"
           active-text="E"
@@ -735,15 +735,15 @@ limitations under the License. -->
 <style lang="scss" scoped>
   .dashboard-tool {
     text-align: right;
-    padding: 3px 5px 5px;
+    padding: 5px;
     background: $dashboard-tool-bg-color;
     border-bottom: 1px solid $border-color;
     justify-content: space-between;
   }
 
-  .switch {
-    padding-top: 2px;
-    margin: 0 10px;
+  .tool-selectors {
+    align-items: center;
+    height: auto;
   }
 
   .label {
@@ -758,6 +758,7 @@ limitations under the License. -->
 
   .tools {
     justify-content: space-between;
+    align-items: center;
     height: auto;
   }
 
diff --git a/src/views/dashboard/related/topology/components/Graph.vue b/src/views/dashboard/related/topology/components/Graph.vue
index b2f384ad..3e732ba4 100644
--- a/src/views/dashboard/related/topology/components/Graph.vue
+++ b/src/views/dashboard/related/topology/components/Graph.vue
@@ -739,11 +739,10 @@ limitations under the License. -->
       position: absolute;
       color: $font-color;
       cursor: pointer;
-      background-color: var(--sw-topology-operations-bg);
-      border-radius: 5px;
+      border: var(--sw-topology-border);
+      border-radius: 3px;
+      background-color: $theme-background;
       padding: 10px 0;
-      border: 1px solid $border-color-primary;
-      box-shadow: --sw-topology-box-shadow;
 
       span {
         display: block;