diff --git a/mindinsight/ui/src/components/debuggerGridTableSimple.vue b/mindinsight/ui/src/components/debugger-grid-table-simple.vue
similarity index 100%
rename from mindinsight/ui/src/components/debuggerGridTableSimple.vue
rename to mindinsight/ui/src/components/debugger-grid-table-simple.vue
diff --git a/mindinsight/ui/src/components/gridTableSimple.vue b/mindinsight/ui/src/components/grid-table-simple.vue
similarity index 100%
rename from mindinsight/ui/src/components/gridTableSimple.vue
rename to mindinsight/ui/src/components/grid-table-simple.vue
diff --git a/mindinsight/ui/src/components/histogramUnit.vue b/mindinsight/ui/src/components/histogram-unit.vue
similarity index 100%
rename from mindinsight/ui/src/components/histogramUnit.vue
rename to mindinsight/ui/src/components/histogram-unit.vue
diff --git a/mindinsight/ui/src/components/multiselectGroup.vue b/mindinsight/ui/src/components/multiselect-group.vue
similarity index 100%
rename from mindinsight/ui/src/components/multiselectGroup.vue
rename to mindinsight/ui/src/components/multiselect-group.vue
diff --git a/mindinsight/ui/src/mixins/autoUpdate.vue b/mindinsight/ui/src/mixins/auto-update.vue
similarity index 95%
rename from mindinsight/ui/src/mixins/autoUpdate.vue
rename to mindinsight/ui/src/mixins/auto-update.vue
index a519706e..5313283c 100644
--- a/mindinsight/ui/src/mixins/autoUpdate.vue
+++ b/mindinsight/ui/src/mixins/auto-update.vue
@@ -114,6 +114,11 @@ export default {
       clearInterval(this.autoUpdateTimer);
       this.autoUpdateTimer = null;
     }
+    // Stop refreshing
+    if (this.isReloading) {
+      this.$store.commit('setIsReload', false);
+      this.isReloading = false;
+    }
   },
 };
 </script>
diff --git a/mindinsight/ui/src/mixins/commonGraph.vue b/mindinsight/ui/src/mixins/common-graph.vue
similarity index 100%
rename from mindinsight/ui/src/mixins/commonGraph.vue
rename to mindinsight/ui/src/mixins/common-graph.vue
diff --git a/mindinsight/ui/src/mixins/debuggerMixin.vue b/mindinsight/ui/src/mixins/debugger-mixin.vue
similarity index 100%
rename from mindinsight/ui/src/mixins/debuggerMixin.vue
rename to mindinsight/ui/src/mixins/debugger-mixin.vue
diff --git a/mindinsight/ui/src/mixins/modelData.vue b/mindinsight/ui/src/mixins/model-data.vue
similarity index 100%
rename from mindinsight/ui/src/mixins/modelData.vue
rename to mindinsight/ui/src/mixins/model-data.vue
diff --git a/mindinsight/ui/src/mixins/smallMap.vue b/mindinsight/ui/src/mixins/small-map.vue
similarity index 100%
rename from mindinsight/ui/src/mixins/smallMap.vue
rename to mindinsight/ui/src/mixins/small-map.vue
diff --git a/mindinsight/ui/src/views/debugger/debugger.vue b/mindinsight/ui/src/views/debugger/debugger.vue
index 8e422ea4..aac12448 100644
--- a/mindinsight/ui/src/views/debugger/debugger.vue
+++ b/mindinsight/ui/src/views/debugger/debugger.vue
@@ -621,11 +621,11 @@ limitations under the License.
 <script>
 import {select, selectAll, zoom, dispatch} from 'd3';
 import 'd3-graphviz';
-import debuggerGridTable from '../../components/debuggerGridTableSimple.vue';
+import debuggerGridTable from '../../components/debugger-grid-table-simple.vue';
 const d3 = {select, selectAll, zoom, dispatch};
 import RequestService from '@/services/request-service';
-import commonGraph from '../../mixins/commonGraph.vue';
-import debuggerMixin from '../../mixins/debuggerMixin.vue';
+import commonGraph from '../../mixins/common-graph.vue';
+import debuggerMixin from '../../mixins/debugger-mixin.vue';
 import tree from '../../components/tree.vue';
 
 export default {
diff --git a/mindinsight/ui/src/views/explain/xai-metric.vue b/mindinsight/ui/src/views/explain/xai-metric.vue
index a8e9fb93..ffd849b5 100644
--- a/mindinsight/ui/src/views/explain/xai-metric.vue
+++ b/mindinsight/ui/src/views/explain/xai-metric.vue
@@ -331,7 +331,6 @@ export default {
     cellHover(row, column) {
       this.property = column.property;
     },
-    
     /**
      * The logic execute when table cell mouse leave
      */
diff --git a/mindinsight/ui/src/views/train-manage/compare-plate.vue b/mindinsight/ui/src/views/train-manage/compare-plate.vue
index ef98a3a9..19e70e95 100644
--- a/mindinsight/ui/src/views/train-manage/compare-plate.vue
+++ b/mindinsight/ui/src/views/train-manage/compare-plate.vue
@@ -134,8 +134,8 @@ limitations under the License.
 import echarts from 'echarts';
 import RequestService from '../../services/request-service';
 import CommonProperty from '../../common/common-property';
-import multiSelectGroupComponents from '../../components/multiselectGroup.vue';
-import autoUpdate from '../../mixins/autoUpdate.vue';
+import multiSelectGroupComponents from '../../components/multiselect-group.vue';
+import autoUpdate from '../../mixins/auto-update.vue';
 
 export default {
   mixins: [autoUpdate],
diff --git a/mindinsight/ui/src/views/train-manage/graph.vue b/mindinsight/ui/src/views/train-manage/graph.vue
index 220b5c22..01c4ed97 100644
--- a/mindinsight/ui/src/views/train-manage/graph.vue
+++ b/mindinsight/ui/src/views/train-manage/graph.vue
@@ -487,8 +487,8 @@ import RequestService from '@/services/request-service';
 import {select, selectAll, zoom} from 'd3';
 import 'd3-graphviz';
 const d3 = {select, selectAll, zoom};
-import commonGraph from '../../mixins/commonGraph.vue';
-import smallMap from '../../mixins/smallMap.vue';
+import commonGraph from '../../mixins/common-graph.vue';
+import smallMap from '../../mixins/small-map.vue';
 
 export default {
   mixins: [commonGraph, smallMap],
diff --git a/mindinsight/ui/src/views/train-manage/histogram.vue b/mindinsight/ui/src/views/train-manage/histogram.vue
index 766ca362..0dbe1de8 100644
--- a/mindinsight/ui/src/views/train-manage/histogram.vue
+++ b/mindinsight/ui/src/views/train-manage/histogram.vue
@@ -122,12 +122,12 @@ limitations under the License.
 </template>
 
 <script>
-import multiselectGroupComponents from '../../components/multiselectGroup.vue';
+import multiselectGroupComponents from '../../components/multiselect-group.vue';
 import RequestService from '../../services/request-service';
 import CommonProperty from '../../common/common-property';
 import echarts from 'echarts';
 import {format, precisionRound} from 'd3';
-import autoUpdate from '../../mixins/autoUpdate.vue';
+import autoUpdate from '../../mixins/auto-update.vue';
 const d3 = {format, precisionRound};
 export default {
   mixins: [autoUpdate],
@@ -166,11 +166,6 @@ export default {
         this.clearZrData(item);
       });
     }
-    // Stop refreshing
-    if (this.isReloading) {
-      this.$store.commit('setIsReload', false);
-      this.isReloading = false;
-    }
     if (this.changeAxisTimer) {
       clearTimeout(this.changeAxisTimer);
       this.changeAxisTimer = null;
diff --git a/mindinsight/ui/src/views/train-manage/image.vue b/mindinsight/ui/src/views/train-manage/image.vue
index 8c3c645a..00611306 100644
--- a/mindinsight/ui/src/views/train-manage/image.vue
+++ b/mindinsight/ui/src/views/train-manage/image.vue
@@ -141,10 +141,10 @@ limitations under the License.
 </template>
 
 <script>
-import multiselectGroupComponents from '../../components/multiselectGroup.vue';
+import multiselectGroupComponents from '../../components/multiselect-group.vue';
 import RequestService from '../../services/request-service';
 import {basePath} from '@/services/fetcher';
-import autoUpdate from '../../mixins/autoUpdate.vue';
+import autoUpdate from '../../mixins/auto-update.vue';
 export default {
   mixins: [autoUpdate],
   data() {
@@ -168,13 +168,7 @@ export default {
   },
   computed: {},
   watch: {},
-  destroyed() {
-    // Stop refreshing
-    if (this.isReloading) {
-      this.$store.commit('setIsReload', false);
-      this.isReloading = false;
-    }
-  },
+  destroyed() {},
   mounted() {
     if (!this.$route.query || !this.$route.query.train_id) {
       this.$message.error(this.$t('trainingDashboard.invalidId'));
diff --git a/mindinsight/ui/src/views/train-manage/model-traceback.vue b/mindinsight/ui/src/views/train-manage/model-traceback.vue
index df026f6e..3b7943f4 100644
--- a/mindinsight/ui/src/views/train-manage/model-traceback.vue
+++ b/mindinsight/ui/src/views/train-manage/model-traceback.vue
@@ -565,7 +565,7 @@ import RequestService from '../../services/request-service';
 import CommonProperty from '@/common/common-property.js';
 import Echarts from 'echarts';
 import Scatter from '@/components/scatter';
-import modelDataFun from '../../mixins/modelData.vue';
+import modelDataFun from '../../mixins/model-data.vue';
 
 export default {
   mixins: [modelDataFun],
diff --git a/mindinsight/ui/src/views/train-manage/scalar.vue b/mindinsight/ui/src/views/train-manage/scalar.vue
index a94ec677..47df05a7 100644
--- a/mindinsight/ui/src/views/train-manage/scalar.vue
+++ b/mindinsight/ui/src/views/train-manage/scalar.vue
@@ -268,8 +268,8 @@ import echarts from 'echarts';
 import RequestService from '../../services/request-service';
 import CommonProperty from '../../common/common-property';
 import ScalarCompare from './scalar-compare';
-import multiselectGroupComponents from '../../components/multiselectGroup.vue';
-import autoUpdate from '../../mixins/autoUpdate.vue';
+import multiselectGroupComponents from '../../components/multiselect-group.vue';
+import autoUpdate from '../../mixins/auto-update.vue';
 import threshold from '../../mixins/threshold.vue';
 
 export default {
diff --git a/mindinsight/ui/src/views/train-manage/tensor.vue b/mindinsight/ui/src/views/train-manage/tensor.vue
index bc601579..62e97904 100644
--- a/mindinsight/ui/src/views/train-manage/tensor.vue
+++ b/mindinsight/ui/src/views/train-manage/tensor.vue
@@ -181,11 +181,11 @@ limitations under the License.
 </template>
 
 <script>
-import multiselectGroupComponents from '../../components/multiselectGroup.vue';
-import gridTableComponents from '../../components/gridTableSimple';
-import histogramUntil from '../../components/histogramUnit';
+import multiselectGroupComponents from '../../components/multiselect-group.vue';
+import gridTableComponents from '../../components/grid-table-simple';
+import histogramUntil from '../../components/histogram-unit';
 import RequestService from '../../services/request-service';
-import autoUpdate from '../../mixins/autoUpdate.vue';
+import autoUpdate from '../../mixins/auto-update.vue';
 export default {
   mixins: [autoUpdate],
   data() {
@@ -220,11 +220,6 @@ export default {
   watch: {},
   destroyed() {
     window.removeEventListener('resize', this.resizeCallback);
-    // Stop refreshing
-    if (this.isReloading) {
-      this.$store.commit('setIsReload', false);
-      this.isReloading = false;
-    }
 
     // Cancel the delay
     this.originDataArr.forEach((sampleItem) => {
diff --git a/mindinsight/ui/src/views/train-manage/training-dashboard.vue b/mindinsight/ui/src/views/train-manage/training-dashboard.vue
index 7bcc4cda..92b9fdf4 100644
--- a/mindinsight/ui/src/views/train-manage/training-dashboard.vue
+++ b/mindinsight/ui/src/views/train-manage/training-dashboard.vue
@@ -267,7 +267,7 @@ import {select, selectAll, format, precisionRound} from 'd3';
 import 'd3-graphviz';
 const d3 = {select, selectAll, format, precisionRound};
 import echarts from 'echarts';
-import gridTableComponents from '../../components/gridTableSimple';
+import gridTableComponents from '../../components/grid-table-simple';
 export default {
   data() {
     return {