20260808172837

code/fms/fms-vue/src/layouts/components/AppTabs.vue

@@ -291,7 +291,6 @@ function refreshTab(key) {
 
 /* ---- 标签项（浅灰高亮，与侧栏选中语言统一） ---- */
 .tab-item {
-  position: relative;
   display: flex;
   flex: none;
   min-width: 72px;
@@ -299,29 +298,34 @@ function refreshTab(key) {
   align-items: center;
   overflow: hidden;
   border-radius: 8px;
-  background: #f4f4f5;
+  background: #ffffff;
   color: #71717a;
+  box-shadow:
+    inset 0 0 0 1px #e4e4e7,
+    0 1px 2px rgb(0 0 0 / 6%),
+    0 1px 1px rgb(0 0 0 / 4%);
   transition:
     background-color 0.15s ease,
     color 0.15s ease;
 
   &:hover {
-    background: #f4f4f5;
-    color: #3f3f46;
-  }
-
-  /* 选中态：纯白凸起药丸（inset 描边 + 轻投影，边缘利落不脏）；关闭 X 作为会话标签的强区分信号 */
-  &--active {
-    color: #27272a;
-    font-weight: 500;
     background: #ffffff;
+    color: #3f3f46;
     box-shadow:
       inset 0 0 0 1px #e4e4e7,
       0 1px 2px rgb(0 0 0 / 6%),
       0 1px 1px rgb(0 0 0 / 4%);
+  }
+
+  /* 选中态：浅灰高亮，无边框 */
+  &--active {
+    color: #27272a;
+    font-weight: 500;
+    background: #f4f4f5;
+    box-shadow: none;
 
     &:hover {
-      background: #ffffff;
+      background: #f4f4f5;
       color: #27272a;
     }
 
@@ -348,7 +352,6 @@ function refreshTab(key) {
     padding: 0 8px;
     font-size: 13px;
     overflow: hidden;
-    transition: padding-right 0.15s ease;
 
     span {
       white-space: nowrap;
@@ -357,20 +360,17 @@ function refreshTab(key) {
     }
   }
 
-  /* 仅可关闭标签预留右侧 X 空间；不可关闭（如工作台）保持对称居中 */
+  /* 有关闭按钮的 tab，缩小右侧 padding */
   &--closable &__select {
-    padding-right: 24px;
+    padding-right: 4px;
   }
 
   &__close {
-    position: absolute;
-    top: 0;
-    right: 2px;
-    bottom: 0;
     display: grid;
     flex: none;
-    width: 22px;
+    width: 18px;
     padding: 0;
+    margin-right: 2px;
     place-items: center;
     border-radius: 4px;
     color: #a1a1aa;