touyun_liuyun/sysmgr-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(layout): 页签改为下划线式，关闭图标仅当前页签显示

Browse Source 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
liuyun 2026-10-16 11:16:37 +08:00
parent 2a84fe9b33
commit 8478738f3b
1 changed files with 20 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/ty-tabs.vue
View File

@ -2,7 +2,6 @@
<el-tabs <el-tabs
v-if="tabs.length" v-if="tabs.length"
:model-value="activePath" :model-value="activePath"
type="card"
class="ty-tabs" class="ty-tabs"
@tab-change="onTabChange" @tab-change="onTabChange"
> >
@ -10,7 +9,11 @@
<template #label> <template #label>
<span class="ty-tabs__label" @contextmenu.prevent="openMenu($event, tab)"> <span class="ty-tabs__label" @contextmenu.prevent="openMenu($event, tab)">
<span class="ty-tabs__title">{{ tab.title }}</span> <span class="ty-tabs__title">{{ tab.title }}</span>
<span v-if="tab.closable" class="ty-tabs__close" @click.stop="emit('remove', tab.path)"> <span
v-if="tab.closable && tab.path === activePath"
class="ty-tabs__close"
@click.stop="emit('remove', tab.path)"
>
<icon type="iconify" icon="mdi:close" /> <icon type="iconify" icon="mdi:close" />
</span> </span>
</span> </span>
@ -94,52 +97,50 @@ onBeforeUnmount(() => document.removeEventListener('click', closeMenu))
<style scoped lang="scss"> <style scoped lang="scss">
.ty-tabs { .ty-tabs {
@apply px-2 bg-bg-base border-b border-solid; @apply bg-bg-base;
border-color: var(--wm-border-color-light);
:deep(.el-tabs__header) { :deep(.el-tabs__header) {
@apply m-0; @apply m-0 px-2;
} }
:deep(.el-tabs__content) { :deep(.el-tabs__content) {
@apply hidden; @apply hidden;
} }
:deep(.el-tabs__nav) { :deep(.el-tabs__nav-wrap::after) {
@apply border-none; height: 1px;
background: var(--wm-border-color-light);
} }
:deep(.el-tabs__item) { :deep(.el-tabs__item) {
@apply h-8 text-sm text-text-regular; @apply h-9 px-3 text-sm text-text-regular;
border: 1px solid var(--wm-border-color-light); }
border-top: none;
:deep(.el-tabs__item:hover) {
color: var(--el-color-primary);
} }
:deep(.el-tabs__item.is-active) { :deep(.el-tabs__item.is-active) {
color: var(--el-color-primary); color: var(--el-color-primary);
background: var(--el-color-primary-light-9);
} }
:deep(.el-tabs__nav-prev), :deep(.el-tabs__nav-prev),
:deep(.el-tabs__nav-next) { :deep(.el-tabs__nav-next) {
@apply h-8 text-text-regular; @apply h-9 text-text-regular;
} }
} }
.ty-tabs__label { .ty-tabs__label {
@apply inline-flex items-center gap-1; @apply inline-flex items-center gap-1.5;
}
.ty-tabs__title {
@apply truncate;
} }
.ty-tabs__close { .ty-tabs__close {
@apply flex items-center justify-center w-4 h-4 rounded-full text-xs; @apply flex items-center justify-center w-4 h-4 rounded-full text-xs;
color: var(--wm-color-text-placeholder);
&:hover { &:hover {
@apply text-white; color: var(--el-color-danger);
background: var(--wm-color-text-placeholder); @apply bg-bg-page;
} }
} }