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

pnpm-lock.yaml

@@ -20,12 +20,12 @@ importers:
       china-area-data:
         specifier: ^5.0.1
         version: 5.0.1
-      cropperjs:
-        specifier: ^1.6.2
-        version: 1.6.2
       dayjs:
         specifier: ^1.11.21
         version: 1.11.21
+      echarts:
+        specifier: ^5.6.0
+        version: 5.6.0
       express:
         specifier: ^5.2.1
         version: 5.2.1
@@ -1150,6 +1150,9 @@ packages:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
 
+  echarts@5.6.0:
+    resolution: {integrity: sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==}
+
   ee-first@1.1.1:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
 
@@ -2096,6 +2099,9 @@ packages:
     peerDependencies:
       typescript: '>=4.2.0'
 
+  tslib@2.3.0:
+    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
+
   type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
@@ -2258,6 +2264,9 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
+  zrender@5.6.1:
+    resolution: {integrity: sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==}
+
 snapshots:
 
   '@ant-design/colors@6.0.0':
@@ -3330,6 +3339,11 @@ snapshots:
       es-errors: 1.3.0
       gopd: 1.2.0
 
+  echarts@5.6.0:
+    dependencies:
+      tslib: 2.3.0
+      zrender: 5.6.1
+
   ee-first@1.1.1: {}
 
   electron-to-chromium@1.5.395: {}
@@ -4325,6 +4339,8 @@ snapshots:
     dependencies:
       typescript: 5.9.3
 
+  tslib@2.3.0: {}
+
   type-check@0.4.0:
     dependencies:
       prelude-ls: 1.2.1
@@ -4459,3 +4475,7 @@ snapshots:
       yargs-parser: 21.1.1
 
   yocto-queue@0.1.0: {}
+
+  zrender@5.6.1:
+    dependencies:
+      tslib: 2.3.0

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 子元素，与关闭按钮同行） */}
-                {/* 标签文字（flex 子元素，与关闭按钮同行） */}
+              <div class={styles.tabTitle}>{tab.title}</div>
-                <span class={styles.tabTitle}>{tab.title}</span>
-              </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>
           );
         })}