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

feat(layout): 多页签改用 Element Plus tabs（滚动箭头更优雅）

Browse Source 
- ty-tabs 重构为 el-tabs type=card，自带左右滚动
- 保留右键关闭其他/左侧/右侧/全部与首页不可关闭

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
liuyun 2026-10-16 11:11:42 +08:00
parent 06e5ba4515
commit dd58c6203d
2 changed files with 84 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components.d.ts vendored
View File

@ -48,6 +48,8 @@ declare module 'vue' {
ElSwitch: typeof import('element-plus/es')['ElSwitch']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElTabPane: typeof import('element-plus/es')['ElTabPane']
ElTabs: typeof import('element-plus/es')['ElTabs']
ElTag: typeof import('element-plus/es')['ElTag']
ElTree: typeof import('element-plus/es')['ElTree']
ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
@ -114,6 +116,8 @@ declare global {
const ElSwitch: typeof import('element-plus/es')['ElSwitch']
const ElTable: typeof import('element-plus/es')['ElTable']
const ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
const ElTabPane: typeof import('element-plus/es')['ElTabPane']
const ElTabs: typeof import('element-plus/es')['ElTabs']
const ElTag: typeof import('element-plus/es')['ElTag']
const ElTree: typeof import('element-plus/es')['ElTree']
const ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']

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

@ -1,30 +1,33 @@
<template>
<div v-if="tabs.length" class="ty-tabs">
<div
v-for="tab in tabs"
:key="tab.path"
class="ty-tabs__item"
:class="{ 'is-active': tab.path === activePath }"
@click="emit('click', tab.path)"
@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)">
<icon type="iconify" icon="mdi:close" />
</span>
</div>
<el-tabs
v-if="tabs.length"
:model-value="activePath"
type="card"
class="ty-tabs"
@tab-change="onTabChange"
>
<el-tab-pane v-for="tab in tabs" :key="tab.path" :name="tab.path">
<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)">
<icon type="iconify" icon="mdi:close" />
</span>
</span>
</template>
</el-tab-pane>
</el-tabs>
<div
v-if="menu.visible"
class="ty-tabs__context-menu"
:style="{ left: `${menu.x}px`, top: `${menu.y}px` }"
@click.stop
>
<div class="ty-tabs__context-item" @click="onMenu('close-others')">关闭其他</div>
<div class="ty-tabs__context-item" @click="onMenu('close-left')">关闭左侧</div>
<div class="ty-tabs__context-item" @click="onMenu('close-right')">关闭右侧</div>
<div class="ty-tabs__context-item" @click="onMenu('close-all')">关闭全部</div>
</div>
<div
v-if="menu.visible"
class="ty-tabs__context-menu"
:style="{ left: `${menu.x}px`, top: `${menu.y}px` }"
@click.stop
>
<div class="ty-tabs__context-item" @click="onMenu('close-others')">关闭其他</div>
<div class="ty-tabs__context-item" @click="onMenu('close-left')">关闭左侧</div>
<div class="ty-tabs__context-item" @click="onMenu('close-right')">关闭右侧</div>
<div class="ty-tabs__context-item" @click="onMenu('close-all')">关闭全部</div>
</div>
</template>
@ -52,6 +55,10 @@ const emit = defineEmits<{
const menu = reactive({ visible: false, x: 0, y: 0, path: '' })
function onTabChange(name: string | number): void {
emit('click', String(name))
}
function openMenu(e: MouseEvent, tab: TabItem): void {
menu.x = e.clientX
menu.y = e.clientY
@ -87,43 +94,63 @@ onBeforeUnmount(() => document.removeEventListener('click', closeMenu))
<style scoped lang="scss">
.ty-tabs {
@apply flex items-center gap-1 overflow-x-auto px-2 h-9 bg-bg-base border-b border-solid;
@apply px-2 bg-bg-base border-b border-solid;
border-color: var(--wm-border-color-light);
&__item {
@apply flex flex-shrink-0 cursor-pointer items-center gap-1 h-7 px-2.5 rounded-base text-sm text-text-regular;
&:hover {
@apply bg-bg-page;
}
&.is-active {
color: var(--el-color-primary);
background: var(--el-color-primary-light-9);
}
:deep(.el-tabs__header) {
@apply m-0;
}
&__close {
@apply flex items-center justify-center w-4 h-4 rounded-full text-xs;
&:hover {
@apply text-white;
background: var(--wm-color-text-placeholder);
}
:deep(.el-tabs__content) {
@apply hidden;
}
&__context-menu {
@apply fixed z-50 min-w-[110px] py-1 bg-bg-base rounded-base border border-solid;
border-color: var(--wm-border-color-light);
box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
:deep(.el-tabs__nav) {
@apply border-none;
}
&__context-item {
@apply cursor-pointer py-1.5 px-3.5 text-sm text-text-regular;
:deep(.el-tabs__item) {
@apply h-8 text-sm text-text-regular;
}
&:hover {
@apply bg-bg-page;
}
:deep(.el-tabs__item.is-active) {
color: var(--el-color-primary);
}
:deep(.el-tabs__nav-prev),
:deep(.el-tabs__nav-next) {
@apply h-8 text-text-regular;
}
}
.ty-tabs__label {
@apply inline-flex items-center gap-1;
}
.ty-tabs__title {
@apply truncate;
}
.ty-tabs__close {
@apply flex items-center justify-center w-4 h-4 rounded-full text-xs;
&:hover {
@apply text-white;
background: var(--wm-color-text-placeholder);
}
}
.ty-tabs__context-menu {
@apply fixed z-50 min-w-[110px] py-1 bg-bg-base rounded-base border border-solid;
border-color: var(--wm-border-color-light);
box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}
.ty-tabs__context-item {
@apply cursor-pointer py-1.5 px-3.5 text-sm text-text-regular;
&:hover {
@apply bg-bg-page;
}
}
</style>