fix: 调整npm-dashboard的tab的实现逻辑

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

@@ -1,22 +1,42 @@
 .npm-tabs {
-  .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
+  position: relative;
-    padding-left: 20px;
+
-  }
+  .npm-tabs__active-bar {
-  .el-tabs__nav-wrap::after {
+    position: absolute;
-    height: 1px;
-    background-color: #E2E5EC;
-  }
-  .el-tabs--top .el-tabs__item {
-    padding: 0;
-  }
-  .el-tabs__active-bar.is-top {
-    top: 0;
     height: 3px;
-    border-radius: 5px 2.5px 0 0;
+    top: 0;
+    background-color: #046EC9;
+    border-radius: 5px 5px 0 0;
+    transition: all linear .2s;
   }
+  .el-tabs.el-tabs--border-card {
+    position: absolute;
+    top: 3px;
+    width: 100%;
+    border: none;
+    box-shadow: none;
+
+    &>.el-tabs__header {
+      background-color: white;
+      border-color: #E2E5EC;
+
+      .el-tabs__nav-wrap {
+        padding-left: 27px;
+      }
+      .el-tabs__item:first-child {
+       margin-left: 0;
+      }
+    }
+    .el-tabs__content {
+      display: none;
+    }
+  }
+
   .el-tabs__item.is-top {
+    height: 35px;
+    line-height: 35px;
+
     .npm-tab__label {
-      padding: 0 20px;
       color: #353636;
       font-size: 14px;
       font-weight: bold;
@@ -31,7 +51,6 @@
     &.is-active {
       .npm-tab__label {
         color: #353636;
-        box-shadow: 1px 0 0 0 #E2E5EC, inset 1px 0 0 #E2E5EC;
 
         i {
           color: #046EC9;

src/views/charts2/charts/NpmTabs.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="npm-tabs">
-    <el-tabs v-model="currentTab" ref="elTabs">
+    <div class="npm-tabs__active-bar"></div>
+    <el-tabs v-model="currentTab" ref="elTabs" type="border-card">
       <el-tab-pane>
         <template #label>
           <div class="npm-tab__label">
@@ -34,21 +35,29 @@ export default {
   name: 'NpmTabs',
   data () {
     return {
-      currentTab: 0
+      currentTab: 0,
+      leftOffset: 27
     }
   },
   watch: {
     currentTab (n) {
+      this.$nextTick(() => {
+        this.handleActiveBar(n)
+      })
       this.$emit('tabChange', n)
     }
   },
+  methods: {
+    handleActiveBar (index) {
+      const { offsetLeft, clientWidth, clientLeft } = document.querySelector('.npm-tabs .el-tabs__item.is-active')
+      const activeBar = document.querySelector('.npm-tabs .npm-tabs__active-bar')
+      activeBar.style.width = `${clientWidth + 2}px`
+      activeBar.style.left = `${offsetLeft + this.leftOffset + clientLeft - 1}px`
+    }
+  },
   mounted () {
-    // 修正字体改变导致的active-bar宽度计算偏差
     setTimeout(() => {
-      const activeTab = document.querySelector('.npm-tabs .el-tabs__item.is-active')
+      this.handleActiveBar(0)
-      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)
   }
 }