From d5b16afdf7cf839ccadddf5f0cbe21b79721d591 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Mon, 18 Jul 2022 16:09:13 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=AD=A3npm-dashboard=E7=9A=84?=
 =?UTF-8?q?tab=E7=9A=84=E6=B4=BB=E5=8A=A8=E6=9D=A1=E7=9A=84=E5=81=8F?=
 =?UTF-8?q?=E5=B7=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../css/components/views/charts2/npmTabs.scss |  6 ++++-
 src/views/charts2/Chart.vue                   |  7 +++++-
 src/views/charts2/ChartList.vue               |  7 +++++-
 src/views/charts2/charts/NpmTabs.vue          | 22 +++++++++++++++----
 4 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/src/assets/css/components/views/charts2/npmTabs.scss b/src/assets/css/components/views/charts2/npmTabs.scss
index 5ede7050..4bfb3697 100644
--- a/src/assets/css/components/views/charts2/npmTabs.scss
+++ b/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;
diff --git a/src/views/charts2/Chart.vue b/src/views/charts2/Chart.vue
index 84c27b1d..39a2f2dc 100644
--- a/src/views/charts2/Chart.vue
+++ b/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>
diff --git a/src/views/charts2/ChartList.vue b/src/views/charts2/ChartList.vue
index b5e7efb1..bfdbcf17 100644
--- a/src/views/charts2/ChartList.vue
+++ b/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>
diff --git a/src/views/charts2/charts/NpmTabs.vue b/src/views/charts2/charts/NpmTabs.vue
index a131e6b5..80006c14 100644
--- a/src/views/charts2/charts/NpmTabs.vue
+++ b/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>