20260807173051

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

@@ -212,17 +212,18 @@ function handleTabKeydown(event, index) {
 
 <style lang="scss" scoped>
 .tab-header {
+  position: relative;
   z-index: 15;
   display: flex;
   flex: none;
-  height: 34px;
+  height: 38px;
   align-items: center;
-  gap: 4px;
-  padding: 3px 0;
-  background: #ffffff;
+  gap: 2px;
+  padding: 4px 0;
+  background: transparent;
 }
 
-/* ---- 通用小按钮 ---- */
+/* ---- 滚动按钮（ghost 风格） ---- */
 .tab-btn {
   display: grid;
   flex: none;
@@ -230,7 +231,7 @@ function handleTabKeydown(event, index) {
   height: 28px;
   padding: 0;
   place-items: center;
-  border: 1px solid #e4e4e7;
+  border: 0;
   border-radius: 6px;
   color: #71717a;
   background: transparent;
@@ -262,8 +263,7 @@ function handleTabKeydown(event, index) {
   flex: 1;
   min-width: 0;
   gap: 6px;
-  padding: 2px 0;
-  margin: -2px 0;
+  padding: 0;
   overflow-x: auto;
   overflow-y: visible;
   overscroll-behavior-inline: contain;
@@ -274,35 +274,41 @@ function handleTabKeydown(event, index) {
   }
 }
 
-/* ---- 标签项 ---- */
+/* ---- 标签项（应用 tab 药丸式） ---- */
 .tab-item {
   display: flex;
   flex: none;
-  min-width: 64px;
-  height: 28px;
+  min-width: 72px;
+  height: 30px;
   align-items: center;
   overflow: hidden;
-  border-radius: 6px;
-  background: #f4f4f5;
+  border-radius: 8px;
+  background: transparent;
   color: #71717a;
   transition:
     background-color 0.15s ease,
     color 0.15s ease;
 
+  background: #f4f4f5;
+
   &:hover {
-    background: #f4f4f5;
+    background: #ebebeb;
     color: #3f3f46;
   }
 
+  /* 选中态：实心深色药丸，应用 tab 的醒目语言 */
   &--active {
-    background: #f4f4f5;
-    color: #3f3f46;
+    color: #ffffff;
     font-weight: 500;
-    box-shadow: 0 1px 3px rgb(0 0 0 / 6%), 0 1px 2px rgb(0 0 0 / 4%);
+    background: #18181b;
 
     &:hover {
-      background: #f4f4f5;
-      color: #3f3f46;
+      background: #27272a;
+      color: #ffffff;
+    }
+
+    .tab-item__close:hover {
+      background: rgb(255 255 255 / 12%);
     }
   }
 
@@ -323,27 +329,30 @@ function handleTabKeydown(event, index) {
     justify-content: center;
     padding: 0 8px;
     font-size: 13px;
+    overflow: hidden;
 
     span {
       white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   }
 
   &__close {
     display: grid;
-    width: 18px;
     flex: none;
+    width: 22px;
     padding: 0;
     place-items: center;
     border-radius: 4px;
 
     &:hover {
-      background: rgb(0 0 0 / 6%);
+      background: rgb(0 0 0 / 8%);
     }
 
     .lucide {
-      width: 10px;
-      height: 10px;
+      width: 12px;
+      height: 12px;
       stroke-width: 2;
     }
   }