feat: 页面标签组件样式更新

src/components/pageTabs/PageTabs.module.less

@@ -19,7 +19,11 @@
     height: 100%;
     user-select: none;
     transition: all 0.15s ease;
-    padding: 0 8px 0 14px;
+    border-radius: 5px;
+
+    &:not(:first-child) {
+      margin-left: -9px;
+    }
 
     &:global(:not(.dragging)) {
       cursor: pointer;
@@ -123,16 +127,19 @@
   }
 
   .tabClose {
-    flex-shrink: 0;
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    z-index: 2;
     width: 16px;
     height: 16px;
     line-height: 16px;
     font-size: 10px;
     text-align: center;
-    margin-right: 12px;
     color: rgba(0, 0, 0, 0.45);
     border-radius: 50%;
     cursor: pointer;
+    transform: translateY(-50%);
     transition: all 0.15s;
 
     &:hover {
@@ -152,9 +159,8 @@
   .tabTitle {
     position: relative;
     z-index: 2;
-    flex: 1;
     min-width: 0;
-    padding: 2px 8px;
+    padding: 2px 32px 2px 18px;
     font-size: 13px;
     color: rgba(0, 0, 0, 0.65);
     white-space: nowrap;

src/components/pageTabs/PageTabs.tsx

@@ -71,15 +71,13 @@ const PageTabs = defineComponent({
                 </svg>
               </div>
 
-              <div class={styles.tabTitleCon}>
-                {/* 标签文字（flex 子元素，与关闭按钮同行） */}
-                <span class={styles.tabTitle}>{tab.title}</span>
-              </div>
+              {/* 标签文字（flex 子元素，与关闭按钮同行） */}
+              <div class={styles.tabTitle}>{tab.title}</div>
 
               {/* 关闭按钮（flex 子元素，不参与 shrink） */}
-              <span class={styles.tabClose} onClick={(e: Event) => handleClose(tab.path, e)}>
+              <div class={styles.tabClose} onClick={(e: Event) => handleClose(tab.path, e)}>
                 ✕
-              </span>
+              </div>
             </div>
           );
         })}