From cc5ca261c61dba89a6110c1caeb21f40616ae8c1 Mon Sep 17 00:00:00 2001
From: ZhuRui <GodRuiCollection@163.com>
Date: Mon, 27 Jul 2026 17:08:21 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=A4=84=E7=90=86=E6=8A=A5=E9=94=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/page/PageTabs.module.less |  6 +++---
 src/components/page/PageTabs.tsx         | 10 ++++++----
 src/stores/tabsStore.ts                  | 14 ++------------
 src/types/index.ts                       |  7 +++++++
 4 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/src/components/page/PageTabs.module.less b/src/components/page/PageTabs.module.less
index a9b2287..3a48c49 100644
--- a/src/components/page/PageTabs.module.less
+++ b/src/components/page/PageTabs.module.less
@@ -38,7 +38,7 @@
   }
 
   // ── hover 态（非激活） ──
-  &:not(.active) {
+  &:not(.tabItemActive) {
     &:hover {
       // 自身分隔线消失
       > .divider {
@@ -54,7 +54,7 @@
   }
 
   // ── 激活态 ──
-  &.active {
+  &.tabItemActive {
     z-index: 2;
     // 右侧邻居的分隔线消失
     & + .tabItem {
@@ -164,7 +164,7 @@
 }
 
 // hover 只在非激活标签时生效
-.tabItem:not(.active) {
+.tabItem:not(.tabItemActive) {
   .tabTitleCon:hover {
     background-color: rgba(0, 0, 0, 0.06);
   }
diff --git a/src/components/page/PageTabs.tsx b/src/components/page/PageTabs.tsx
index 35c8248..6ea3cd3 100644
--- a/src/components/page/PageTabs.tsx
+++ b/src/components/page/PageTabs.tsx
@@ -1,6 +1,6 @@
 import { defineComponent, type PropType } from 'vue';
 import { message } from 'ant-design-vue';
-import type { TabView } from '@/stores/tabsStore';
+import type { TabView } from '@/types';
 import styles from './PageTabs.module.less';
 
 /**
@@ -12,7 +12,7 @@ import styles from './PageTabs.module.less';
  * - 标签间分隔线
  * - 关闭按钮
  */
-export default defineComponent({
+const PageTabs = defineComponent({
   name: 'PageTabs',
   props: {
     /** 标签列表 */
@@ -49,7 +49,7 @@ export default defineComponent({
           return (
             <div
               key={tab.path}
-              class={[styles.tabItem, isActive ? styles.active : '', styles.draggable].join(' ')}
+              class={[styles.tabItem, isActive && styles.tabItemActive].filter(Boolean).join(' ')}
               onClick={() => handleClick(tab.path)}
             >
               {/* 分隔线：第一个标签 / 激活标签 / 上一个就是激活的 → 不显示 */}
@@ -59,7 +59,7 @@ export default defineComponent({
               />
 
               {/* Chrome 风格背景：激活态 */}
-              <div class={[styles.tabBg, isActive ? styles.tabBgActive : ''].join(' ')}>
+              <div class={[styles.tabBg, isActive && styles.tabBgActive].filter(Boolean).join(' ')}>
                 <div class={styles.tabBgInner} />
                 {/* 左下曲线 */}
                 <svg class={styles.tabBgCurveBefore} height="7" width="7">
@@ -87,3 +87,5 @@ export default defineComponent({
     );
   },
 });
+
+export default PageTabs;
diff --git a/src/stores/tabsStore.ts b/src/stores/tabsStore.ts
index 9812897..88d376d 100644
--- a/src/stores/tabsStore.ts
+++ b/src/stores/tabsStore.ts
@@ -1,18 +1,8 @@
 import { reactive, computed, toRefs } from 'vue';
 import router from '@/router';
+import type { TabView } from '@/types';
 
-/**
- * 单个页面标签的数据结构（标签 = 已经访问过的页面）
- *
- * path  唯一标识，用于路由激活态判断
- * name  路由组件 name,用于 <keep-alive :include="cachedViews">
- * title 展示在 tab 上的文字
- */
-export interface TabView {
-  path: string;
-  name: string;
-  title: string;
-}
+export type { TabView };
 
 interface TabsState {
   /** 已打开的页面标签列表，按访问顺序累加 */
diff --git a/src/types/index.ts b/src/types/index.ts
index 2de77cc..f0b8112 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -23,6 +23,13 @@ export interface SelectOption {
   disabled?: boolean;
 }
 
+/** 页面标签栏单个 tab 的数据结构 */
+export interface TabView {
+  path: string;
+  name: string;
+  title: string;
+}
+
 // ── 菜单 & 权限 ──
 
 /**