From bf62ea73e61e31fef1a4dbae9a5de441c48d3d40 Mon Sep 17 00:00:00 2001
From: Shu Guang <61069967+shuguangnet@users.noreply.github.com>
Date: Fri, 16 May 2025 18:24:40 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9tab=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/TabLayout.vue | 103 +++++++++++++++++++++++++++-----------
 1 file changed, 74 insertions(+), 29 deletions(-)

diff --git a/src/layouts/TabLayout.vue b/src/layouts/TabLayout.vue
index 6e9237e4..050d3aca 100644
--- a/src/layouts/TabLayout.vue
+++ b/src/layouts/TabLayout.vue
@@ -209,42 +209,73 @@ function getTabKey(target, depth = 0) {
 <style lang="less" scoped>
 .tab-layout {
   background: #fff;
-  padding: 6px 4px 0;
-  margin-bottom: 10px;
-  height: 32px !important;
+  padding: 8px 12px 0;
+  margin-bottom: 12px;
+  height: 40px !important;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
 
   .tab-bar {
     background: #fff;
     margin-bottom: 10px;
+
     :deep(.ant-tabs-bar) {
       margin: 0;
       border: none;
-      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+      background: linear-gradient(to right, rgba(255,255,255,0.95), rgba(255,255,255,0.8));
+      backdrop-filter: blur(10px);
+      border-radius: 8px;
+      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
     }
 
     :deep(.ant-tabs-nav-container) {
-      height: 32px !important;
+      height: 40px !important;
+      padding: 0 4px;
     }
 
     :deep(.ant-tabs-tab) {
-      margin-right: 6px;
-      height: 32px !important;
-      line-height: 32px !important;
-      background: #fafafa;
-      border: 1px solid #f0f0f0;
-      border-radius: 4px;
-      transition: all 0.3s;
+      position: relative;
+      margin: 0 4px;
+      height: 36px !important;
+      line-height: 36px !important;
+      background: rgba(250, 250, 250, 0.8);
+      border: 1px solid rgba(240, 240, 240, 0.6);
+      border-radius: 6px;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       padding: 0 16px;
+      font-size: 14px;
+      font-weight: 500;
+      color: #666;
+
+      &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        border-radius: 6px;
+        padding: 1px;
+        background: linear-gradient(45deg, transparent, rgba(24, 144, 255, 0.1));
+        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+        -webkit-mask-composite: xor;
+        mask-composite: exclude;
+      }
 
       &:hover {
         color: #1890ff;
-        background: #e6f7ff;
+        background: rgba(230, 247, 255, 0.8);
+        transform: translateY(-1px);
+        box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
       }
 
       &.ant-tabs-tab-active {
         background: #fff;
-        border-color: #1890ff;
+        border-color: rgba(24, 144, 255, 0.3);
         color: #1890ff;
+        box-shadow: 0 2px 12px rgba(24, 144, 255, 0.1);
+
+        &::before {
+          background: linear-gradient(45deg, #1890ff20, #40a9ff20);
+        }
       }
 
       .ant-tabs-close-x {
@@ -252,12 +283,19 @@ function getTabKey(target, depth = 0) {
         height: 16px;
         line-height: 16px;
         margin-right: -4px;
-        margin-left: 4px;
-        opacity: 0.45;
+        margin-left: 8px;
+        opacity: 0.4;
+        transition: all 0.3s;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
 
         &:hover {
           opacity: 1;
           color: #ff4d4f;
+          background: rgba(255, 77, 79, 0.1);
+          transform: rotate(90deg);
         }
       }
     }
@@ -268,32 +306,39 @@ function getTabKey(target, depth = 0) {
   }
 }
 
-.breadcrumb {
-  margin-bottom: 12px;
-  padding: 8px 24px;
-  background: #fff;
-  border-radius: 4px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
-}
-
 // 右键菜单样式优化
 :deep(.context-menu) {
-  background: #fff;
-  border-radius: 4px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  background: rgba(255, 255, 255, 0.98);
+  backdrop-filter: blur(10px);
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08),
+              0 2px 4px rgba(0, 0, 0, 0.02);
+  border: 1px solid rgba(240, 240, 240, 0.6);
+  padding: 4px;
 
   .menu-item {
     padding: 8px 16px;
+    margin: 2px;
     cursor: pointer;
-    transition: all 0.3s;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    border-radius: 6px;
+    font-size: 14px;
+    color: #666;
 
     &:hover {
-      background: #e6f7ff;
+      background: rgba(24, 144, 255, 0.08);
       color: #1890ff;
+      transform: translateX(2px);
     }
 
     .anticon {
       margin-right: 8px;
+      font-size: 14px;
+      transition: transform 0.3s;
+    }
+
+    &:hover .anticon {
+      transform: scale(1.1);
     }
   }
 }