fix: 修正npm-dashboard的tab的活动条的偏差

src/assets/css/components/views/charts2/npmTabs.scss

@@ -2,6 +2,10 @@
   .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
     padding-left: 20px;
   }
+  .el-tabs__nav-wrap::after {
+    height: 1px;
+    background-color: #E2E5EC;
+  }
   .el-tabs--top .el-tabs__item {
     padding: 0;
   }
@@ -27,7 +31,7 @@
     &.is-active {
       .npm-tab__label {
         color: #353636;
-        box-shadow: 1px 0 0px 0px #E2E5EC, inset 1px 0 0 #E2E5EC;
+        box-shadow: 1px 0 0 0 #E2E5EC, inset 1px 0 0 #E2E5EC;
 
         i {
           color: #046EC9;

src/views/charts2/Chart.vue

@@ -19,7 +19,7 @@
     ></network-overview-tabs>
     <npm-tabs
         v-else-if="chart.type === typeMapping.npm.npmTabs"
-        @tabChange="index => $emit('tabChange', index)"
+        @tabChange="npmTabChange"
     ></npm-tabs>
     <npm-network-quantity
         v-else-if="chart.type === typeMapping.npm.npmNetworkQuantity"
@@ -59,6 +59,11 @@ export default {
       loading: false,
       isNoData: false
     }
+  },
+  methods: {
+    npmTabChange (index) {
+      this.$emit('npmTabChange', index)
+    }
   }
 }
 </script>

src/views/charts2/ChartList.vue

@@ -25,7 +25,7 @@
             v-if="item.type === typeMapping.npm.npmTabs || item.params.tabIndex === npmTabIndex"
             :id="item.id"
             :chart="item"
-            @tabChange="index => { this.npmTabIndex = index }"
+            @npmTabChange="npmTabChange"
           ></chart>
         </template>
         <chart
@@ -72,6 +72,11 @@ export default {
         this.layout = [...n]
       }
     }
+  },
+  methods: {
+    npmTabChange (index) {
+      this.npmTabIndex = parseInt(index)
+    }
   }
 }
 </script>

src/views/charts2/charts/NpmTabs.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="npm-tabs">
-    <el-tabs @tab-change="tabChange">
+    <el-tabs v-model="currentTab" ref="elTabs">
       <el-tab-pane>
         <template #label>
           <div class="npm-tab__label">
@@ -32,10 +32,24 @@
 <script>
 export default {
   name: 'NpmTabs',
-  methods: {
+  data () {
-    tabChange (index) {
+    return {
-      this.$emit('tabChange', index)
+      currentTab: 0
     }
+  },
+  watch: {
+    currentTab (n) {
+      this.$emit('tabChange', n)
+    }
+  },
+  mounted () {
+    // 修正字体改变导致的active-bar宽度计算偏差
+    setTimeout(() => {
+      const activeTab = document.querySelector('.npm-tabs .el-tabs__item.is-active')
+      const activeTabStyle = window.getComputedStyle(activeTab)
+      const activeBar = document.querySelector('.npm-tabs .el-tabs__active-bar')
+      activeBar.style.width = `${parseFloat(activeTabStyle.width) - parseFloat(activeTabStyle.paddingLeft)}px`
+    }, 200)
   }
 }
 </script>