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