diff --git a/src/components/DateCalendar.vue b/src/components/DateCalendar.vue
index 822ac88d..0ea3e13b 100755
--- a/src/components/DateCalendar.vue
+++ b/src/components/DateCalendar.vue
@@ -451,7 +451,7 @@ limitations under the License. -->
   }
 
   .calendar + .calendar {
-    border-left: solid 1px #eaeaea;
+    border-left: solid 1px var(--sw-border-color-light);
     margin-left: 5px;
     padding-left: 5px;
   }
@@ -464,7 +464,7 @@ limitations under the License. -->
   }
 
   .calendar-head a {
-    color: #666;
+    color: var(--sw-topology-color);
     cursor: pointer;
     display: inline-block;
     text-align: center;
@@ -568,7 +568,7 @@ limitations under the License. -->
 
   .calendar-hour {
     display: inline-block;
-    border: 1px solid #e6e5e5;
+    border: 1px solid var(--sw-border-color-light);
     color: #9e9e9e;
   }
 
diff --git a/src/components/TimePicker.vue b/src/components/TimePicker.vue
index b7d71b3e..f3ff4bc4 100755
--- a/src/components/TimePicker.vue
+++ b/src/components/TimePicker.vue
@@ -447,7 +447,7 @@ limitations under the License. -->
       width: 100px;
       height: 100%;
       padding: 5px;
-      border-right: solid 1px #eaeaea;
+      border-right: solid 1px var(--sw-border-color-light);
     }
 
     &__shortcut {
@@ -457,7 +457,7 @@ limitations under the License. -->
       background-color: transparent;
       line-height: 34px;
       font-size: $font-size-smaller;
-      color: #666;
+      color: var(--sw-topology-color);
       text-align: left;
       outline: none;
       cursor: pointer;
@@ -532,6 +532,6 @@ limitations under the License. -->
   }
 
   .datepicker__buttons .datepicker__button-cancel {
-    background: #666;
+    background: var(--sw-topology-color);
   }
 </style>
diff --git a/src/views/dashboard/related/topology/service/ServiceMap.vue b/src/views/dashboard/related/topology/service/ServiceMap.vue
index 111f2380..e6bb226e 100644
--- a/src/views/dashboard/related/topology/service/ServiceMap.vue
+++ b/src/views/dashboard/related/topology/service/ServiceMap.vue
@@ -13,13 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <div
-    ref="chart"
-    class="micro-topo-chart"
-    v-loading="loading"
-    element-loading-background="rgba(0, 0, 0, 0)"
-    :style="`height: ${height}px`"
-  >
+  <div ref="chart" class="micro-topo-chart" v-loading="loading" :style="`height: ${height}px`">
     <svg class="svg-topology" :width="width - 100" :height="height" @click="svgEvent">
       <g class="svg-graph" :transform="`translate(${diff[0]}, ${diff[1]})`">
         <g
@@ -224,6 +218,7 @@ limitations under the License. -->
     svg.value.call(zoom(d3, graph.value, diff.value));
   }
   async function freshNodes() {
+    loading.value = true;
     topologyStore.setNode(null);
     topologyStore.setLink(null);
     const resp = await getTopology();
@@ -637,12 +632,6 @@ limitations under the License. -->
       if (!(oldVal[0] && newVal[0])) {
         return;
       }
-      if (oldVal[0].id === newVal[0].id && !oldVal[1]) {
-        return;
-      }
-      if (oldVal[0].id === newVal[0].id && oldVal[1].id === newVal[1].id) {
-        return;
-      }
       freshNodes();
       hierarchyRelated.value = false;
     },