feat: 页面标签组件优化

src/components/pageTabs/PageTabs.module.less

@@ -19,7 +19,6 @@
     height: 100%;
     user-select: none;
     transition: all 0.15s ease;
-    border-radius: 5px;
 
     &:not(:first-child) {
       margin-left: -9px;
@@ -40,6 +39,14 @@
             opacity: 0;
           }
         }
+
+        .tabContent {
+          background-color: rgba(0, 0, 0, 0.06);
+        }
+      }
+
+      .tabClose:hover {
+        color: rgba(0, 0, 0, 0.85);
       }
     }
 
@@ -70,12 +77,6 @@
         }
       }
     }
-
-    &:not(.tabItemActive) {
-      .tabTitleCon:hover {
-        background-color: rgba(0, 0, 0, 0.06);
-      }
-    }
   }
 
   .divider {
@@ -126,11 +127,33 @@
     transition: fill 0.15s;
   }
 
-  .tabClose {
+  // 仅包裹文字 + 关闭按钮，通过 margin 收在 tab 内部
-    position: absolute;
+  .tabContent {
-    right: 12px;
+    position: relative;
-    top: 50%;
+    height: 28px;
     z-index: 2;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    width: fit-content;
+    max-width: 100%;
+    margin: 0 10px 0 10px;
+    padding: 2px 2px 2px 8px;
+    border-radius: 8px;
+    transition: background-color 0.35s;
+  }
+
+  .tabTitle {
+    min-width: 0;
+    font-size: 13px;
+    color: rgba(0, 0, 0, 0.65);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .tabClose {
+    flex-shrink: 0;
     width: 16px;
     height: 16px;
     line-height: 16px;
@@ -139,32 +162,6 @@
     color: rgba(0, 0, 0, 0.45);
     border-radius: 50%;
     cursor: pointer;
-    transform: translateY(-50%);
     transition: all 0.15s;
-
-    &:hover {
-      color: rgba(0, 0, 0, 0.85);
-      background-color: rgba(0, 0, 0, 0.06);
-    }
-  }
-
-  .tabTitleCon {
-    height: 28px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 4px;
-  }
-
-  .tabTitle {
-    position: relative;
-    z-index: 2;
-    min-width: 0;
-    padding: 2px 32px 2px 18px;
-    font-size: 13px;
-    color: rgba(0, 0, 0, 0.65);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
   }
 }

src/components/pageTabs/PageTabs.tsx

@@ -71,12 +71,12 @@ const PageTabs = defineComponent({
                 </svg>
               </div>
 
-              {/* 标签文字（flex 子元素，与关闭按钮同行） */}
+              {/* 标签内容：hover 背景包裹文字 + 关闭按钮 */}
-              <div class={styles.tabTitle}>{tab.title}</div>
+              <div class={styles.tabContent}>
-
+                <div class={styles.tabTitle}>{tab.title}</div>
-              {/* 关闭按钮（flex 子元素，不参与 shrink） */}
+                <div class={styles.tabClose} onClick={(e: Event) => handleClose(tab.path, e)}>
-              <div class={styles.tabClose} onClick={(e: Event) => handleClose(tab.path, e)}>
+                  ✕
-                ✕
+                </div>
               </div>
             </div>
           );