diff --git a/src/components/pageTabs/PageTabs.module.less b/src/components/pageTabs/PageTabs.module.less index f2b13b3..99311f7 100644 --- a/src/components/pageTabs/PageTabs.module.less +++ b/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 { - position: absolute; - right: 12px; - top: 50%; + // 仅包裹文字 + 关闭按钮,通过 margin 收在 tab 内部 + .tabContent { + position: relative; + 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; } } diff --git a/src/components/pageTabs/PageTabs.tsx b/src/components/pageTabs/PageTabs.tsx index 2bffea0..380c9d0 100644 --- a/src/components/pageTabs/PageTabs.tsx +++ b/src/components/pageTabs/PageTabs.tsx @@ -71,12 +71,12 @@ const PageTabs = defineComponent({ - {/* 标签文字(flex 子元素,与关闭按钮同行) */} -
{tab.title}
- - {/* 关闭按钮(flex 子元素,不参与 shrink) */} -
handleClose(tab.path, e)}> - ✕ + {/* 标签内容:hover 背景包裹文字 + 关闭按钮 */} +
+
{tab.title}
+
handleClose(tab.path, e)}> + ✕ +
);