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

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: {
-    tabChange (index) {
-      this.$emit('tabChange', index)
+  data () {
+    return {
+      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>