From 6e4005111db58ca10f10e9aa4bca4aec57363736 Mon Sep 17 00:00:00 2001
From: vben <anncwb@126.com>
Date: Sat, 24 Oct 2020 00:29:33 +0800
Subject: [PATCH] perf: tabs optimization

---
 src/layouts/default/multitabs/index.less | 31 ++++++++++++-------------------
 src/layouts/default/multitabs/index.tsx  |  1 +
 2 files changed, 13 insertions(+), 19 deletions(-)

diff --git a/src/layouts/default/multitabs/index.less b/src/layouts/default/multitabs/index.less
index da89822..59674aa 100644
--- a/src/layouts/default/multitabs/index.less
+++ b/src/layouts/default/multitabs/index.less
@@ -7,19 +7,6 @@
     height: @multiple-height;
   }
 
-  // .ant-tabs:not(.ant-tabs-card) {
-  //   .ant-tabs-nav-container {
-  //     height: @multiple-height;
-  //     background: @white;
-  //   }
-
-  //   .ant-tabs-tab {
-  //     font-size: 14px;
-  //     line-height: 1.5515;
-  //     background: @white;
-  //   }
-  // }
-
   .ant-tabs.ant-tabs-card {
     .ant-tabs-card-bar {
       height: @multiple-height;
@@ -39,14 +26,21 @@
         line-height: calc(@multiple-height - 2px);
         color: @text-color-call-out;
         background: @white;
-        border: 1px solid @border-color-shallow-dark;
-        border-radius: 4px 4px 0 0;
+        border: 1px solid darken(@border-color-light, 6%);
+        border-radius: 2px 2px 0 0;
         transition: none;
 
         .ant-tabs-close-x {
+          // display: none;
           color: inherit;
         }
 
+        &:hover {
+          .ant-tabs-close-x {
+            display: block;
+          }
+        }
+
         > div {
           display: flex;
           justify-content: center;
@@ -72,7 +66,7 @@
 
         &:hover::before {
           transform: scaleX(1);
-          transition: transform 0.4s ease;
+          transition: transform 0.3s ease;
           transform-origin: bottom left;
         }
       }
@@ -80,14 +74,13 @@
       .ant-tabs-tab-active {
         height: calc(@multiple-height - 3px);
         color: @white;
-        // background: @primary-color;
         background: linear-gradient(
           118deg,
-          rgba(@primary-color, 0.8),
+          rgba(@primary-color, 0.7),
           rgba(@primary-color, 1)
         ) !important;
         border: 0;
-        box-shadow: 0 0 6px 1px rgba(@primary-color, 0.4);
+        box-shadow: 0 0 6px 1px rgba(@primary-color, 0.7);
 
         &::before {
           display: none;
diff --git a/src/layouts/default/multitabs/index.tsx b/src/layouts/default/multitabs/index.tsx
index 9cceb7e..09c7c52 100644
--- a/src/layouts/default/multitabs/index.tsx
+++ b/src/layouts/default/multitabs/index.tsx
@@ -148,6 +148,7 @@ export default defineComponent({
           <Tabs
             type="editable-card"
             size="small"
+            animated={false}
             hideAdd={true}
             tabBarGutter={2}
             activeKey={unref(activeKeyRef)}
--
libgit2 0.23.3