This commit is contained in:
杨
parent
9d2a481072
commit
567b9d0519
|
|
@ -35,6 +35,7 @@
|
|||
"vue": "^3.5.29",
|
||||
"vue-i18n": "^11.4.2",
|
||||
"vue-router": "^5.0.3",
|
||||
"vuedraggable": "^4.1.0",
|
||||
"xlsx": "^0.18.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -65,6 +65,9 @@ importers:
|
|||
vue-router:
|
||||
specifier: ^5.0.3
|
||||
version: 5.0.3(@vue/compiler-sfc@3.5.29)(pinia@3.0.4(typescript@5.9.3)(vue@3.5.29(typescript@5.9.3)))(vue@3.5.29(typescript@5.9.3))
|
||||
vuedraggable:
|
||||
specifier: ^4.1.0
|
||||
version: 4.1.0(vue@3.5.29(typescript@5.9.3))
|
||||
xlsx:
|
||||
specifier: ^0.18.5
|
||||
version: 0.18.5
|
||||
|
|
@ -2398,6 +2401,9 @@ packages:
|
|||
resolution: {integrity: sha512-LJhUYUvItdQ0LkJTmPeaEObWXAqFyfmP85x0tch/ez9cahmhlBBLbIqDFnvBnUJGagb0JbIQrkBs1wJ+yRYpEw==}
|
||||
engines: {node: '>= 10.0.0', npm: '>= 3.0.0'}
|
||||
|
||||
sortablejs@1.14.0:
|
||||
resolution: {integrity: sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==}
|
||||
|
||||
source-map-js@1.2.1:
|
||||
resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
|
|
@ -2666,6 +2672,11 @@ packages:
|
|||
typescript:
|
||||
optional: true
|
||||
|
||||
vuedraggable@4.1.0:
|
||||
resolution: {integrity: sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==}
|
||||
peerDependencies:
|
||||
vue: ^3.0.1
|
||||
|
||||
webpack-virtual-modules@0.6.2:
|
||||
resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
|
||||
|
||||
|
|
@ -4957,6 +4968,8 @@ snapshots:
|
|||
ip-address: 10.2.0
|
||||
smart-buffer: 4.2.0
|
||||
|
||||
sortablejs@1.14.0: {}
|
||||
|
||||
source-map-js@1.2.1: {}
|
||||
|
||||
speakingurl@14.0.1: {}
|
||||
|
|
@ -5243,6 +5256,11 @@ snapshots:
|
|||
optionalDependencies:
|
||||
typescript: 5.9.3
|
||||
|
||||
vuedraggable@4.1.0(vue@3.5.29(typescript@5.9.3)):
|
||||
dependencies:
|
||||
sortablejs: 1.14.0
|
||||
vue: 3.5.29(typescript@5.9.3)
|
||||
|
||||
webpack-virtual-modules@0.6.2: {}
|
||||
|
||||
which-module@2.0.1: {}
|
||||
|
|
|
|||
|
|
@ -28,16 +28,17 @@ const breadcrumbList = computed<BreadcrumbItem[]>(() => tabsStore.currentBreadcr
|
|||
|
||||
<style scoped lang="scss">
|
||||
.breadcrumb-container {
|
||||
padding: 12px 16px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid var(--el-border-color-light);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
:deep(.el-breadcrumb) {
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
|
||||
.el-breadcrumb__item {
|
||||
.el-breadcrumb__inner {
|
||||
color: #606266;
|
||||
color: var(--el-text-color-regular);
|
||||
font-weight: normal;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -45,17 +46,17 @@ const breadcrumbList = computed<BreadcrumbItem[]>(() => tabsStore.currentBreadcr
|
|||
}
|
||||
|
||||
&.is-link {
|
||||
color: #606266;
|
||||
color: var(--el-text-color-regular);
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.el-breadcrumb__inner {
|
||||
color: #909399;
|
||||
color: var(--el-text-color-primary);
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
color: #909399;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,30 @@
|
|||
<template>
|
||||
<header class="layout-header">
|
||||
<!-- 左侧：Logo 和系统名称 -->
|
||||
<!-- 左侧：Logo、系统名称和菜单收缩按钮 -->
|
||||
<div class="header-left">
|
||||
<div class="logo">
|
||||
<img src="@/assets/images/logo.webp" alt="logo" />
|
||||
<div class="logo-section">
|
||||
<img src="@/assets/images/logo.webp" alt="logo" class="logo-img" />
|
||||
<span class="system-name">Admin System</span>
|
||||
<!-- 菜单收缩按钮 - 在标题右边 -->
|
||||
<el-button
|
||||
class="collapse-btn"
|
||||
:icon="sidebarCollapsed ? Expand : Fold"
|
||||
@click="toggleSidebar"
|
||||
text
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 中间：面包屑导航 -->
|
||||
<div class="header-center">
|
||||
<Breadcrumb />
|
||||
</div>
|
||||
|
||||
<!-- 右侧：功能按钮和用户信息 -->
|
||||
<div class="header-right">
|
||||
<!-- 全屏 -->
|
||||
<el-tooltip :content="isFullscreen ? '退出全屏' : '全屏'">
|
||||
<el-button :icon="isFullscreen ? Crop : FullScreen" circle @click="toggleFullscreen" />
|
||||
<el-button :icon="isFullscreen ? Crop : FullScreen" text @click="toggleFullscreen" />
|
||||
</el-tooltip>
|
||||
|
||||
<!-- 语言选择 -->
|
||||
|
|
@ -21,8 +33,8 @@
|
|||
<!-- 用户信息下拉菜单 -->
|
||||
<el-dropdown @command="handleCommand" class="user-dropdown">
|
||||
<div class="user-info">
|
||||
<el-avatar :size="32" class="user-avatar">
|
||||
<el-icon :size="20"><User /></el-icon>
|
||||
<el-avatar :size="28" class="user-avatar">
|
||||
<el-icon :size="16"><User /></el-icon>
|
||||
</el-avatar>
|
||||
<span class="username">{{ activeUserName }}</span>
|
||||
<el-icon class="dropdown-icon"><ArrowDown /></el-icon>
|
||||
|
|
@ -51,28 +63,38 @@
|
|||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import {
|
||||
Bell,
|
||||
Sunny,
|
||||
Moon,
|
||||
FullScreen,
|
||||
Crop,
|
||||
User,
|
||||
Lock,
|
||||
SwitchButton,
|
||||
ArrowDown
|
||||
ArrowDown,
|
||||
Fold,
|
||||
Expand
|
||||
} from '@element-plus/icons-vue'
|
||||
import { useUserStore } from '@/stores/modules/user'
|
||||
import { useLanguageStore } from '@/stores/modules/language'
|
||||
import LanguageSelect from '@/components/LanguageSelect/index.vue'
|
||||
import Breadcrumb from './Breadcrumb.vue'
|
||||
import { getStorage } from '@/utils/storage'
|
||||
|
||||
const emit = defineEmits(['toggle-sidebar'])
|
||||
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
const languageStore = useLanguageStore()
|
||||
|
||||
// 侧边栏收缩状态
|
||||
const sidebarCollapsed = ref(false)
|
||||
|
||||
// 切换侧边栏
|
||||
const toggleSidebar = () => {
|
||||
sidebarCollapsed.value = !sidebarCollapsed.value
|
||||
emit('toggle-sidebar', sidebarCollapsed.value)
|
||||
}
|
||||
|
||||
// 用户信息 - 使用 userStore 的响应式数据
|
||||
const activeUserName = computed(() => userStore.userInfo?.username || '-')
|
||||
const unreadCount = ref(3) // 未读消息数量
|
||||
|
||||
// 全屏相关
|
||||
const isFullscreen = ref(false)
|
||||
|
|
@ -95,12 +117,6 @@ onMounted(() => {
|
|||
})
|
||||
})
|
||||
|
||||
// 消息通知
|
||||
const handleNotification = () => {
|
||||
ElMessage.info('暂无新消息')
|
||||
unreadCount.value = 0
|
||||
}
|
||||
|
||||
// 用户操作
|
||||
const handleCommand = (command: string) => {
|
||||
switch (command) {
|
||||
|
|
@ -133,13 +149,13 @@ const handleLogout = () => {
|
|||
|
||||
<style scoped lang="scss">
|
||||
.layout-header {
|
||||
height: 60px;
|
||||
height: 50px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid var(--el-border-color-light);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
padding: 0 16px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
@ -150,58 +166,75 @@ const handleLogout = () => {
|
|||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
|
||||
.logo {
|
||||
width: 200px;
|
||||
flex-shrink: 0;
|
||||
|
||||
.logo-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
img {
|
||||
height: 32px;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
|
||||
.logo-img {
|
||||
height: 28px;
|
||||
width: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.system-name {
|
||||
font-size: 18px;
|
||||
font-size: 8px;
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.collapse-btn {
|
||||
padding: 4px 8px;
|
||||
color: var(--el-text-color-regular);
|
||||
flex-shrink: 0;
|
||||
margin-left: auto;
|
||||
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-center {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
// justify-content: center;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
.notification-badge {
|
||||
:deep(.el-badge__content) {
|
||||
transform: translateY(-50%) translateX(50%);
|
||||
}
|
||||
}
|
||||
gap: 8px;
|
||||
min-width: 200px;
|
||||
justify-content: flex-end;
|
||||
|
||||
.el-button {
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 8px;
|
||||
padding: 4px 8px;
|
||||
color: var(--el-text-color-regular);
|
||||
|
||||
&:hover {
|
||||
background: var(--el-fill-color-light);
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.user-dropdown {
|
||||
margin-left: 8px;
|
||||
cursor: pointer;
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 4px 8px;
|
||||
gap: 6px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
transition: background 0.3s;
|
||||
|
||||
|
|
@ -214,9 +247,9 @@ const handleLogout = () => {
|
|||
}
|
||||
|
||||
.username {
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
color: var(--el-text-color-primary);
|
||||
max-width: 100px;
|
||||
max-width: 80px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
|
|
|||
|
|
@ -1,20 +1,17 @@
|
|||
<template>
|
||||
<section class="layout">
|
||||
<!-- 顶部导航栏：固定在顶部 -->
|
||||
<Header />
|
||||
<Header @toggle-sidebar="handleToggleSidebar" />
|
||||
|
||||
<!-- 主体内容区域 -->
|
||||
<section class="main-container">
|
||||
<section class="main-container" :class="{ 'is-collapsed': sidebarCollapsed }">
|
||||
<!-- 左侧侧边菜单：固定在左侧 -->
|
||||
<Sidebar />
|
||||
<Sidebar :collapsed="sidebarCollapsed" />
|
||||
|
||||
<!-- 右侧内容区：面包屑 + 页签 + 主体内容 -->
|
||||
<!-- 右侧内容区：页签 + 主体内容 -->
|
||||
<section class="content-container">
|
||||
<!-- 面包屑导航 -->
|
||||
<!-- <Breadcrumb />-->
|
||||
|
||||
<!-- 页签标签栏 -->
|
||||
<!-- <Tabs />-->
|
||||
<!-- <Tabs /> -->
|
||||
|
||||
<!-- 主体内容区 -->
|
||||
<main class="main-content">
|
||||
|
|
@ -42,11 +39,17 @@ defineOptions({
|
|||
})
|
||||
import Header from './Header.vue'
|
||||
import Sidebar from './Sidebar.vue'
|
||||
// import Breadcrumb from './Breadcrumb.vue'
|
||||
// import Tabs from './Tabs.vue'
|
||||
import Tabs from './Tabs.vue'
|
||||
|
||||
const route = useRoute()
|
||||
console.log('route.path', route)
|
||||
|
||||
// 侧边栏收缩状态
|
||||
const sidebarCollapsed = ref(false)
|
||||
|
||||
// 切换侧边栏
|
||||
const handleToggleSidebar = (collapsed: boolean) => {
|
||||
sidebarCollapsed.value = collapsed
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
@ -58,8 +61,15 @@ console.log('route.path', route)
|
|||
|
||||
.main-container {
|
||||
display: flex;
|
||||
height: calc(100vh - 60px);
|
||||
margin-top: 60px;
|
||||
height: calc(100vh - 50px);
|
||||
margin-top: 50px;
|
||||
transition: margin-left 0.3s ease;
|
||||
|
||||
&.is-collapsed {
|
||||
.content-container {
|
||||
margin-left: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
.content-container {
|
||||
flex: 1;
|
||||
|
|
@ -67,6 +77,7 @@ console.log('route.path', route)
|
|||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
margin-left: 200px;
|
||||
transition: margin-left 0.3s ease;
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
<template>
|
||||
<aside class="sidebar">
|
||||
<aside class="sidebar" :class="{ 'is-collapsed': collapsed }">
|
||||
<!-- 菜单区域 -->
|
||||
<el-menu
|
||||
class="sidebar-menu"
|
||||
:unique-opened="true"
|
||||
:default-active="activeMenu"
|
||||
:collapse="collapsed"
|
||||
router
|
||||
>
|
||||
<template v-for="menu in menuList" :key="menu.id">
|
||||
|
|
@ -50,6 +51,10 @@ import {
|
|||
} from '@element-plus/icons-vue'
|
||||
import { useUserStore } from '@/stores/modules/user'
|
||||
|
||||
defineProps<{
|
||||
collapsed?: boolean
|
||||
}>()
|
||||
|
||||
const route = useRoute()
|
||||
const userStore = useUserStore()
|
||||
|
||||
|
|
@ -88,12 +93,31 @@ const iconMap: Record<string, any> = {
|
|||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
z-index: 999;
|
||||
transition: width 0.3s ease;
|
||||
|
||||
&.is-collapsed {
|
||||
width: 64px;
|
||||
|
||||
:deep(.el-menu--collapse) {
|
||||
width: 64px;
|
||||
|
||||
.el-sub-menu__title,
|
||||
.el-menu-item {
|
||||
padding-left: 20px !important;
|
||||
padding-right: 20px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-menu {
|
||||
height: 100%;
|
||||
border: none;
|
||||
background: transparent;
|
||||
|
||||
&:not(.el-menu--collapse) {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
:deep(.el-menu-item) {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
|
|
|
|||
|
|
@ -1,52 +1,180 @@
|
|||
<template>
|
||||
<div class="tabs-container">
|
||||
<el-tabs v-model="tabsStore.activeTab" type="card" closable @tab-click="handleTabClick"
|
||||
@tab-remove="handleTabRemove">
|
||||
<el-tab-pane v-for="(tab, index) in tabsStore.tabs" :key="tab.path" :label="tab.title" :name="tab.path">
|
||||
<template #label>
|
||||
<div class="tab-label" :class="{ 'is-context-active': contextMenuPath === tab.path }" draggable="true"
|
||||
@dragstart="handleDragStart($event, index)" @dragover.prevent="handleDragOver($event, index)"
|
||||
@drop="handleDrop($event, index)" @dragend="handleDragEnd"
|
||||
@contextmenu.prevent="handleContextMenu($event, tab.path)">
|
||||
<span class="tab-text">{{ tab.title }}</span>
|
||||
<!-- 左侧滚动按钮 -->
|
||||
<button class="scroll-btn scroll-btn-left" @click="scrollLeft" :class="{ 'is-disabled': !canScrollLeft }">
|
||||
<el-icon><ArrowLeft /></el-icon>
|
||||
</button>
|
||||
|
||||
<!-- 标签列表区域 -->
|
||||
<div class="tabs-scroll-area" ref="tabsContainerRef">
|
||||
<draggable
|
||||
v-model="tabsList"
|
||||
item-key="path"
|
||||
class="tabs-list"
|
||||
:animation="300"
|
||||
ghost-class="ghost"
|
||||
chosen-class="chosen"
|
||||
drag-class="drag"
|
||||
handle=".tab-label"
|
||||
@end="handleDragEnd"
|
||||
>
|
||||
<template #item="{ element: tab }">
|
||||
<div
|
||||
class="tab-item"
|
||||
:class="{ 'is-active': tabsStore.activeTab === tab.path }"
|
||||
@click="handleTabClick(tab)"
|
||||
@contextmenu.prevent="handleContextMenu($event, tab.path)"
|
||||
>
|
||||
<div class="tab-label">
|
||||
<span class="tab-text">{{ tab.title }}</span>
|
||||
</div>
|
||||
<span
|
||||
v-if="tab.path !== '/dashboard'"
|
||||
class="tab-close"
|
||||
@click.stop="handleTabRemove(tab.path)"
|
||||
>
|
||||
<el-icon><Close /></el-icon>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<!-- 右键菜单 -->
|
||||
<el-dropdown popper-class="el-droMenu" :popper-style="style" ref="contextMenuRef" trigger="contextmenu"
|
||||
@command="handleContextMenuCommand" @visible-change="handleMenuVisibleChange">
|
||||
<span class="context-menu-trigger"></span>
|
||||
</draggable>
|
||||
</div>
|
||||
|
||||
<!-- 右侧滚动按钮 -->
|
||||
<button class="scroll-btn scroll-btn-right" @click="scrollRight" :class="{ 'is-disabled': !canScrollRight }">
|
||||
<el-icon><ArrowRight /></el-icon>
|
||||
</button>
|
||||
|
||||
<!-- 当前页面下拉菜单 -->
|
||||
<el-dropdown trigger="click" @command="handleDropdownCommand" placement="bottom-end" ref="pageDropdownRef">
|
||||
<button class="current-page-btn" @click.stop="togglePageDropdown">
|
||||
<el-icon><MoreFilled /></el-icon>
|
||||
</button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="refresh">刷新当前页</el-dropdown-item>
|
||||
<el-dropdown-item command="close">关闭当前</el-dropdown-item>
|
||||
<el-dropdown-item command="closeOther">关闭其他</el-dropdown-item>
|
||||
<el-dropdown-item command="closeLeft">关闭左侧</el-dropdown-item>
|
||||
<el-dropdown-item command="closeRight">关闭右侧</el-dropdown-item>
|
||||
<el-dropdown-item command="closeAll" divided>关闭全部</el-dropdown-item>
|
||||
<div class="dropdown-header">已打开的页面</div>
|
||||
<el-dropdown-menu class="page-dropdown-menu">
|
||||
<el-dropdown-item
|
||||
v-for="tab in tabsStore.tabs"
|
||||
:key="tab.path"
|
||||
:command="tab.path"
|
||||
:class="{ 'is-active-item': tabsStore.activeTab === tab.path }"
|
||||
>
|
||||
<span class="dropdown-item-text">{{ tab.title }}</span>
|
||||
<el-icon
|
||||
v-if="tab.path !== '/dashboard'"
|
||||
class="dropdown-item-close"
|
||||
@click.stop="handleTabRemove(tab.path)"
|
||||
>
|
||||
<Close />
|
||||
</el-icon>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
|
||||
<!-- 右键菜单 -->
|
||||
<teleport to="body">
|
||||
<div
|
||||
v-if="contextMenuVisible"
|
||||
class="context-menu-dropdown"
|
||||
:style="contextMenuStyle"
|
||||
@click.stop
|
||||
>
|
||||
<div class="context-menu-item" @click="handleContextMenuCommand('refresh')">
|
||||
<el-icon><Refresh /></el-icon>
|
||||
<span>刷新当前页</span>
|
||||
</div>
|
||||
<div class="context-menu-item" @click="handleContextMenuCommand('close')">
|
||||
<el-icon><Close /></el-icon>
|
||||
<span>关闭当前</span>
|
||||
</div>
|
||||
<div class="context-menu-item" @click="handleContextMenuCommand('closeOther')">
|
||||
<el-icon><Switch /></el-icon>
|
||||
<span>关闭其他</span>
|
||||
</div>
|
||||
<div class="context-menu-item" @click="handleContextMenuCommand('closeLeft')">
|
||||
<el-icon><ArrowLeft /></el-icon>
|
||||
<span>关闭左侧</span>
|
||||
</div>
|
||||
<div class="context-menu-item" @click="handleContextMenuCommand('closeRight')">
|
||||
<el-icon><ArrowRight /></el-icon>
|
||||
<span>关闭右侧</span>
|
||||
</div>
|
||||
<div class="context-menu-divider"></div>
|
||||
<div class="context-menu-item" @click="handleContextMenuCommand('closeAll')">
|
||||
<el-icon><FolderRemove /></el-icon>
|
||||
<span>关闭全部</span>
|
||||
</div>
|
||||
</div>
|
||||
</teleport>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useTabsStore } from '@/stores/modules/tabs'
|
||||
import type { TabItem } from '@/stores/modules/tabs'
|
||||
import draggable from 'vuedraggable'
|
||||
import { Close, Refresh, Switch, ArrowLeft, ArrowRight, FolderRemove, MoreFilled } from '@element-plus/icons-vue'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const tabsStore = useTabsStore()
|
||||
const contextMenuRef = ref()
|
||||
const tabsContainerRef = ref<HTMLElement>()
|
||||
const pageDropdownRef = ref()
|
||||
|
||||
// 当前右键点击的页签路径
|
||||
let contextMenuPath = ''
|
||||
// 右键菜单状态
|
||||
const contextMenuVisible = ref(false)
|
||||
const contextMenuX = ref(0)
|
||||
const contextMenuY = ref(0)
|
||||
const contextMenuPath = ref('')
|
||||
|
||||
// 拖拽相关
|
||||
let dragIndex: number | null = null
|
||||
let dropIndex: number | null = null
|
||||
// 滚动状态
|
||||
const canScrollLeft = ref(false)
|
||||
const canScrollRight = ref(false)
|
||||
|
||||
// 计算右键菜单样式
|
||||
const contextMenuStyle = computed(() => ({
|
||||
left: contextMenuX.value + 'px',
|
||||
top: contextMenuY.value + 'px'
|
||||
}))
|
||||
|
||||
// 双向绑定tabs列表用于拖拽
|
||||
const tabsList = computed({
|
||||
get: () => tabsStore.tabs,
|
||||
set: (val) => tabsStore.setTabs(val)
|
||||
})
|
||||
|
||||
// 检查滚动状态
|
||||
const checkScroll = () => {
|
||||
if (tabsContainerRef.value) {
|
||||
const { scrollLeft, scrollWidth, clientWidth } = tabsContainerRef.value
|
||||
canScrollLeft.value = scrollLeft > 0
|
||||
canScrollRight.value = scrollLeft + clientWidth < scrollWidth - 1
|
||||
}
|
||||
}
|
||||
|
||||
// 向左滚动
|
||||
const scrollLeft = () => {
|
||||
if (tabsContainerRef.value && canScrollLeft.value) {
|
||||
tabsContainerRef.value.scrollBy({ left: -200, behavior: 'smooth' })
|
||||
setTimeout(checkScroll, 300)
|
||||
}
|
||||
}
|
||||
|
||||
// 向右滚动
|
||||
const scrollRight = () => {
|
||||
if (tabsContainerRef.value && canScrollRight.value) {
|
||||
tabsContainerRef.value.scrollBy({ left: 200, behavior: 'smooth' })
|
||||
setTimeout(checkScroll, 300)
|
||||
}
|
||||
}
|
||||
|
||||
// 切换当前页面下拉菜单
|
||||
const togglePageDropdown = () => {
|
||||
if (pageDropdownRef.value) {
|
||||
pageDropdownRef.value.handleOpen()
|
||||
}
|
||||
}
|
||||
|
||||
// 组件挂载后，检查是否需要跳转到保存的激活页面
|
||||
onMounted(() => {
|
||||
|
|
@ -57,28 +185,68 @@ onMounted(() => {
|
|||
router.replace({ path: targetTab.path, query: targetTab.query })
|
||||
}
|
||||
}
|
||||
|
||||
// 初始检查滚动状态
|
||||
nextTick(checkScroll)
|
||||
|
||||
// 添加滚动监听
|
||||
tabsContainerRef.value?.addEventListener('scroll', checkScroll)
|
||||
|
||||
// 全局左键点击关闭右键菜单
|
||||
document.addEventListener('click', handleGlobalClick)
|
||||
// 全局右键监听，如果右键在其他tab上，关闭当前右键菜单
|
||||
document.addEventListener('contextmenu', handleGlobalContextMenu)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
tabsContainerRef.value?.removeEventListener('scroll', checkScroll)
|
||||
document.removeEventListener('click', handleGlobalClick)
|
||||
document.removeEventListener('contextmenu', handleGlobalContextMenu)
|
||||
})
|
||||
|
||||
// 全局左键点击处理 - 关闭右键菜单
|
||||
const handleGlobalClick = (e: MouseEvent) => {
|
||||
closeContextMenu()
|
||||
closePageDropdown()
|
||||
}
|
||||
|
||||
// 全局右键菜单处理 - 如果右键在其他位置，关闭当前右键菜单
|
||||
const handleGlobalContextMenu = (e: MouseEvent) => {
|
||||
// 检查右键点击是否在tabs区域内
|
||||
const target = e.target as HTMLElement
|
||||
const tabItem = target.closest('.tab-item')
|
||||
|
||||
// 如果右键不在任何一个tab上，关闭右键菜单
|
||||
if (!tabItem) {
|
||||
closeContextMenu()
|
||||
}
|
||||
}
|
||||
|
||||
// 监听路由变化，自动添加页签
|
||||
watch(
|
||||
() => route.fullPath,
|
||||
(newPath) => {
|
||||
() => {
|
||||
if (route.meta?.title && !route.meta?.isAuthPage) {
|
||||
tabsStore.addTab({
|
||||
title: route.meta.title as string,
|
||||
path: route.path,
|
||||
query: route.query
|
||||
})
|
||||
// 路由变化后检查滚动
|
||||
nextTick(checkScroll)
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
// 页签点击
|
||||
const handleTabClick = (tab: any) => {
|
||||
const targetTab = tabsStore.tabs.find(item => item.path === tab.paneName)
|
||||
if (targetTab) {
|
||||
router.push({ path: targetTab.path, query: targetTab.query })
|
||||
const handleTabClick = (tab: TabItem) => {
|
||||
// 点击时关闭右键菜单
|
||||
closeContextMenu()
|
||||
|
||||
tabsStore.setActiveTab(tab.path)
|
||||
if (tab.path !== route.path) {
|
||||
router.push({ path: tab.path, query: tab.query })
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -92,11 +260,32 @@ const handleTabRemove = (path: any) => {
|
|||
router.push({ path: targetTab.path, query: targetTab.query })
|
||||
}
|
||||
}
|
||||
// 关闭后检查滚动状态
|
||||
nextTick(checkScroll)
|
||||
}
|
||||
|
||||
// 下拉菜单命令处理
|
||||
const handleDropdownCommand = (path: string) => {
|
||||
handleTabClick({ path, title: '', query: {} })
|
||||
}
|
||||
|
||||
// 关闭当前页面下拉菜单
|
||||
const closePageDropdown = () => {
|
||||
if (pageDropdownRef.value) {
|
||||
pageDropdownRef.value.handleClose()
|
||||
}
|
||||
}
|
||||
|
||||
// 拖拽结束
|
||||
const handleDragEnd = () => {
|
||||
// tabsStore.setTabs 已经通过 computed 自动调用
|
||||
}
|
||||
|
||||
// 右键菜单命令处理
|
||||
const handleContextMenuCommand = (command: string) => {
|
||||
const currentPath = contextMenuPath || tabsStore.activeTab
|
||||
// 使用右键选中的路径，如果没有则用当前激活的标签
|
||||
const currentPath = contextMenuPath.value || tabsStore.activeTab
|
||||
closeContextMenu()
|
||||
|
||||
switch (command) {
|
||||
case 'refresh':
|
||||
|
|
@ -105,21 +294,63 @@ const handleContextMenuCommand = (command: string) => {
|
|||
case 'close':
|
||||
if (currentPath) {
|
||||
handleTabRemove(currentPath)
|
||||
// 关闭后如果当前路由被关闭，跳转到新的激活页签
|
||||
if (currentPath === route.path && tabsStore.activeTab) {
|
||||
const newTab = tabsStore.tabs.find(item => item.path === tabsStore.activeTab)
|
||||
if (newTab) {
|
||||
router.push({ path: newTab.path, query: newTab.query })
|
||||
}
|
||||
}
|
||||
}
|
||||
break
|
||||
case 'closeOther':
|
||||
if (currentPath) {
|
||||
tabsStore.closeOtherTabs(currentPath)
|
||||
// 关闭其他后如果当前路由被关闭，跳转到右键选中的页面
|
||||
if (currentPath !== tabsStore.activeTab && tabsStore.activeTab) {
|
||||
const newTab = tabsStore.tabs.find(item => item.path === tabsStore.activeTab)
|
||||
if (newTab) {
|
||||
router.push({ path: newTab.path, query: newTab.query })
|
||||
}
|
||||
}
|
||||
}
|
||||
break
|
||||
case 'closeLeft':
|
||||
if (currentPath) {
|
||||
// 关闭左侧前，检查当前页面是否会被关闭（即当前页面是否在关闭范围内）
|
||||
const currentIndex = tabsStore.tabs.findIndex(item => item.path === route.path)
|
||||
const rightClickIndex = tabsStore.tabs.findIndex(item => item.path === currentPath)
|
||||
// 如果当前页面索引大于右键点击的索引，说明当前页面会被关闭
|
||||
const willCloseCurrentPage = currentIndex > rightClickIndex
|
||||
|
||||
tabsStore.closeLeftTabs(currentPath)
|
||||
|
||||
// 如果当前页面被关闭了，跳转到右键选中的页面
|
||||
if (willCloseCurrentPage) {
|
||||
const targetTab = tabsStore.tabs.find(item => item.path === currentPath)
|
||||
if (targetTab) {
|
||||
router.push({ path: targetTab.path, query: targetTab.query })
|
||||
}
|
||||
}
|
||||
}
|
||||
break
|
||||
case 'closeRight':
|
||||
if (currentPath) {
|
||||
// 关闭右侧前，检查当前页面是否会被关闭（即当前页面是否在关闭范围内）
|
||||
const currentIndex = tabsStore.tabs.findIndex(item => item.path === route.path)
|
||||
const rightClickIndex = tabsStore.tabs.findIndex(item => item.path === currentPath)
|
||||
// 如果当前页面索引小于右键点击的索引，说明当前页面会被关闭
|
||||
const willCloseCurrentPage = currentIndex < rightClickIndex
|
||||
|
||||
tabsStore.closeRightTabs(currentPath)
|
||||
|
||||
// 如果当前页面被关闭了，跳转到右键选中的页面
|
||||
if (willCloseCurrentPage) {
|
||||
const targetTab = tabsStore.tabs.find(item => item.path === currentPath)
|
||||
if (targetTab) {
|
||||
router.push({ path: targetTab.path, query: targetTab.query })
|
||||
}
|
||||
}
|
||||
}
|
||||
break
|
||||
case 'closeAll':
|
||||
|
|
@ -129,152 +360,184 @@ const handleContextMenuCommand = (command: string) => {
|
|||
}
|
||||
}
|
||||
|
||||
// 处理右键菜单显示/隐藏
|
||||
const handleMenuVisibleChange = (visible: boolean) => {
|
||||
if (!visible) {
|
||||
contextMenuPath = ''
|
||||
}
|
||||
}
|
||||
const style = ref('')
|
||||
// 处理右键菜单点击
|
||||
// 处理右键菜单显示 - 不再激活标签，只记录右键点击的路径
|
||||
const handleContextMenu = (e: MouseEvent, path: string) => {
|
||||
contextMenuPath = path
|
||||
// 右键时激活该标签并跳转
|
||||
tabsStore.setActiveTab(path)
|
||||
const targetTab = tabsStore.tabs.find(item => item.path === path)
|
||||
if (targetTab && path !== route.path) {
|
||||
router.push({ path: targetTab.path, query: targetTab.query })
|
||||
}
|
||||
// 手动触发 dropdown
|
||||
const dropdown = contextMenuRef.value
|
||||
if (dropdown) {
|
||||
// 获取 dropdown 实例
|
||||
const dropdownInstance = dropdown
|
||||
// 计算菜单位置
|
||||
const x = e.clientX
|
||||
const y = e.clientY
|
||||
// 使用 Element Plus 的内部方法显示菜单
|
||||
dropdownInstance?.handleOpen()
|
||||
// 设置菜单位置
|
||||
nextTick().then(() => {
|
||||
const menu = document.querySelector('.el-droMenu')
|
||||
if (menu) {
|
||||
style.value = `position: fixed; z-index: 9999; left: ${x}px; top: ${y}px;`
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 拖拽开始
|
||||
const handleDragStart = (e: DragEvent, index: number) => {
|
||||
dragIndex = index
|
||||
if (e.dataTransfer) {
|
||||
e.dataTransfer.effectAllowed = 'move'
|
||||
e.dataTransfer.setData('text/plain', index.toString())
|
||||
}
|
||||
// 添加拖拽样式
|
||||
const target = e.target as HTMLElement
|
||||
target.classList.add('dragging')
|
||||
}
|
||||
|
||||
// 拖拽经过
|
||||
const handleDragOver = (e: DragEvent, index: number) => {
|
||||
e.preventDefault()
|
||||
if (e.dataTransfer) {
|
||||
e.dataTransfer.dropEffect = 'move'
|
||||
e.stopPropagation()
|
||||
|
||||
// 先关闭可能打开的当前页面下拉菜单
|
||||
closePageDropdown()
|
||||
|
||||
// 记录右键点击的路径用于后续操作
|
||||
contextMenuPath.value = path
|
||||
|
||||
// 计算菜单位置，确保不超出屏幕
|
||||
const menuWidth = 160
|
||||
const menuHeight = 240
|
||||
let x = e.clientX
|
||||
let y = e.clientY
|
||||
|
||||
// 如果右边空间不够，往左显示
|
||||
if (x + menuWidth > window.innerWidth) {
|
||||
x = window.innerWidth - menuWidth - 10
|
||||
}
|
||||
dropIndex = index
|
||||
|
||||
// 如果下面空间不够，往上显示
|
||||
if (y + menuHeight > window.innerHeight) {
|
||||
y = window.innerHeight - menuHeight - 10
|
||||
}
|
||||
|
||||
// 确保最小值
|
||||
x = Math.max(10, x)
|
||||
y = Math.max(10, y)
|
||||
|
||||
contextMenuX.value = x
|
||||
contextMenuY.value = y
|
||||
contextMenuVisible.value = true
|
||||
}
|
||||
|
||||
// 拖拽结束
|
||||
const handleDragEnd = (e: DragEvent) => {
|
||||
const target = e.target as HTMLElement
|
||||
target.classList.remove('dragging')
|
||||
dragIndex = null
|
||||
dropIndex = null
|
||||
}
|
||||
|
||||
// 拖拽放置
|
||||
const handleDrop = (e: DragEvent, index: number) => {
|
||||
e.preventDefault()
|
||||
if (dragIndex === null || dragIndex === index) {
|
||||
return
|
||||
}
|
||||
|
||||
// 重新排序 tabs
|
||||
const newTabs = [...tabsStore.tabs]
|
||||
const [draggedTab] = newTabs.splice(dragIndex, 1)
|
||||
if (draggedTab) {
|
||||
newTabs.splice(index, 0, draggedTab)
|
||||
// 更新 store
|
||||
tabsStore.setTabs(newTabs)
|
||||
}
|
||||
|
||||
// 移除拖拽样式
|
||||
const target = e.target as HTMLElement
|
||||
target.classList.remove('dragging')
|
||||
// 关闭右键菜单
|
||||
const closeContextMenu = () => {
|
||||
contextMenuVisible.value = false
|
||||
contextMenuPath.value = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.tabs-container {
|
||||
height: 50px;
|
||||
height: 42px;
|
||||
box-sizing: content-box;
|
||||
background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
|
||||
background: var(--el-bg-color);
|
||||
border-bottom: 1px solid var(--el-border-color-light);
|
||||
padding: 8px 20px 0;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
padding: 0 40px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
:deep(.el-tabs) {
|
||||
.el-tabs__header {
|
||||
margin: 0;
|
||||
border: none;
|
||||
.scroll-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--el-fill-color-light);
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
color: var(--el-text-color-secondary);
|
||||
transition: all 0.2s ease;
|
||||
z-index: 5;
|
||||
|
||||
&:hover:not(.is-disabled) {
|
||||
background: var(--el-fill-color);
|
||||
color: var(--el-color-primary);
|
||||
border-color: var(--el-color-primary-light-5);
|
||||
}
|
||||
|
||||
.el-tabs__nav-scroll {
|
||||
overflow: visible !important;
|
||||
|
||||
&.is-disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.el-tabs__nav {
|
||||
border: none !important;
|
||||
gap: 4px;
|
||||
|
||||
&.scroll-btn-left {
|
||||
left: 6px;
|
||||
}
|
||||
|
||||
&.scroll-btn-right {
|
||||
right: 66px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-tabs__item {
|
||||
border: 1px solid var(--el-border-color-lighter) !important;
|
||||
border-bottom: none !important;
|
||||
margin-right: 0;
|
||||
border-radius: 8px 8px 0 0;
|
||||
background: linear-gradient(180deg, #f8f9fb 0%, #f0f2f5 100%);
|
||||
color: #5a5e66;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
padding: 0 18px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.tabs-scroll-area {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 顶部渐变装饰
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, var(--el-color-primary), var(--el-color-primary-light-3));
|
||||
transform: scaleX(0);
|
||||
transition: transform 0.3s ease;
|
||||
border-radius: 8px 8px 0 0;
|
||||
.tabs-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
gap: 2px;
|
||||
min-width: max-content;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
padding: 0 12px;
|
||||
background: var(--el-fill-color-light);
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
border-bottom: none;
|
||||
border-radius: 4px 4px 0 0;
|
||||
color: var(--el-text-color-regular);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: all 0.2s ease;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
|
||||
.tab-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: grab;
|
||||
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
}
|
||||
|
||||
// 底部白色边框效果
|
||||
.tab-text {
|
||||
max-width: 120px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tab-close {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 6px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
font-size: 12px;
|
||||
opacity: 0.6;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
background: var(--el-color-danger-light-9);
|
||||
color: var(--el-color-danger);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--el-fill-color);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background: #fff;
|
||||
color: var(--el-color-primary);
|
||||
border-color: var(--el-border-color);
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
|
@ -283,113 +546,134 @@ const handleDrop = (e: DragEvent, index: number) => {
|
|||
right: 0;
|
||||
height: 2px;
|
||||
background: #fff;
|
||||
transform: scaleX(0);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
background: linear-gradient(180deg, #fff 0%, #f5f7fa 100%);
|
||||
border-color: var(--el-color-primary-light-6) !important;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
transform: translateY(-2px);
|
||||
|
||||
&::before {
|
||||
transform: scaleX(0.7);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active,
|
||||
&.is-context-active {
|
||||
background: #fff;
|
||||
color: var(--el-color-primary);
|
||||
// border-bottom: 1px solid #fff !important;
|
||||
border-color: var(--el-color-primary-light-4) !important;
|
||||
box-shadow: 0 4px 16px rgba(var(--el-color-primary-rgb), 0.15);
|
||||
font-weight: 500;
|
||||
z-index: 2;
|
||||
|
||||
&::before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
// 右键选中时的特殊样式
|
||||
&.is-context-active:not(.is-active) {
|
||||
background: linear-gradient(180deg, #fff 0%, #f0f7ff 100%);
|
||||
border-color: var(--el-color-primary-light-5) !important;
|
||||
}
|
||||
|
||||
// 关闭按钮样式
|
||||
.el-icon-close {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 12px;
|
||||
margin-left: 6px;
|
||||
vertical-align: middle;
|
||||
|
||||
&:hover {
|
||||
background: var(--el-color-danger);
|
||||
color: #fff;
|
||||
transform: scale(1.15) rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
// 拖拽样式
|
||||
.tab-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
gap: 6px;
|
||||
|
||||
.tab-text {
|
||||
display: inline-block;
|
||||
max-width: 150px;
|
||||
overflow: auto;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&.dragging {
|
||||
opacity: 0.5;
|
||||
cursor: move;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-tabs__nav-wrap::after {
|
||||
display: none;
|
||||
// 拖拽动画样式
|
||||
&.ghost {
|
||||
opacity: 0.5;
|
||||
background: var(--el-color-primary-light-9);
|
||||
border: 1px dashed var(--el-color-primary);
|
||||
}
|
||||
|
||||
// 左右滚动按钮样式
|
||||
.el-tabs__nav-prev,
|
||||
.el-tabs__nav-next {
|
||||
width: 32px;
|
||||
line-height: 38px;
|
||||
color: var(--el-text-color-secondary);
|
||||
transition: all 0.2s ease;
|
||||
border-radius: 4px;
|
||||
&.chosen {
|
||||
opacity: 0.8;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
background: var(--el-fill-color-light);
|
||||
}
|
||||
&.drag {
|
||||
opacity: 1;
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
|
||||
transform: translateY(-4px) scale(1.02);
|
||||
}
|
||||
}
|
||||
|
||||
.context-menu-trigger {
|
||||
display: none;
|
||||
.current-page-btn {
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--el-fill-color-light);
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
color: var(--el-text-color-secondary);
|
||||
transition: all 0.2s ease;
|
||||
padding: 0;
|
||||
|
||||
&:hover {
|
||||
background: var(--el-fill-color);
|
||||
color: var(--el-color-primary);
|
||||
border-color: var(--el-color-primary-light-5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 右键菜单下拉
|
||||
.context-menu-dropdown {
|
||||
position: fixed;
|
||||
z-index: 999999;
|
||||
background: var(--el-bg-color);
|
||||
border: 1px solid var(--el-border-color-light);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
padding: 4px 0;
|
||||
min-width: 160px;
|
||||
|
||||
.context-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
font-size: 13px;
|
||||
color: var(--el-text-color-regular);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
background: var(--el-fill-color-light);
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.context-menu-divider {
|
||||
height: 1px;
|
||||
background: var(--el-border-color-light);
|
||||
margin: 4px 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 当前页面下拉菜单
|
||||
.dropdown-header {
|
||||
padding: 8px 12px;
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
border-bottom: 1px solid var(--el-border-color-light);
|
||||
background: var(--el-fill-color-lighter);
|
||||
}
|
||||
|
||||
.page-dropdown-menu {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
|
||||
:deep(.el-dropdown-menu__item) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-right: 12px;
|
||||
|
||||
&.is-active-item {
|
||||
background: var(--el-color-primary-light-9);
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.dropdown-item-text {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dropdown-item-close {
|
||||
margin-left: 8px;
|
||||
font-size: 12px;
|
||||
opacity: 0.6;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
color: var(--el-color-danger);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -41,35 +41,35 @@ export const useTabsStore = defineStore('tabs', () => {
|
|||
|
||||
/**
|
||||
* 从菜单中查找当前路由的面包屑路径
|
||||
* 逻辑：
|
||||
* - 第一个永远是一级菜单的名字
|
||||
* - 点击一级菜单会跳转到第一个二级菜单
|
||||
*/
|
||||
const findBreadcrumbPath = (path: string): BreadcrumbItem[] => {
|
||||
const list: BreadcrumbItem[] = []
|
||||
|
||||
// 添加首页
|
||||
list.push({
|
||||
title: '首页',
|
||||
path: '/dashboard'
|
||||
})
|
||||
|
||||
// 如果是首页，直接返回
|
||||
// 如果是首页，直接返回首页
|
||||
if (path === '/dashboard') {
|
||||
list.push({
|
||||
title: '首页',
|
||||
path: '/dashboard'
|
||||
})
|
||||
return list
|
||||
}
|
||||
|
||||
// 从菜单中查找当前路由的层级信息
|
||||
const findMenuPath = (menus: any[], targetPath: string, currentPath: any[] = []): any[] | null => {
|
||||
const findMenuPath = (menus: any[], targetPath: string, parentMenu: any = null): any => {
|
||||
for (const menu of menus) {
|
||||
const menuPath = menu.path || menu.api || `/menu-${menu.id}`
|
||||
const newPath = [...currentPath, menu]
|
||||
|
||||
if (menuPath === targetPath) {
|
||||
return newPath
|
||||
return { current: menu, parent: parentMenu }
|
||||
}
|
||||
|
||||
// 兼容 children 和 son 两种子菜单字段名
|
||||
const subMenus = menu.children || menu.son
|
||||
if (subMenus && subMenus.length > 0) {
|
||||
const result = findMenuPath(subMenus, targetPath, newPath)
|
||||
const result = findMenuPath(subMenus, targetPath, menu)
|
||||
if (result) {
|
||||
return result
|
||||
}
|
||||
|
|
@ -78,23 +78,41 @@ export const useTabsStore = defineStore('tabs', () => {
|
|||
return null
|
||||
}
|
||||
|
||||
const menuPath = findMenuPath(userStore.sideMenu, path)
|
||||
console.log('menuPath:', menuPath);
|
||||
const menuResult = findMenuPath(userStore.sideMenu, path)
|
||||
|
||||
if (menuPath) {
|
||||
console.log('list:', menuPath)
|
||||
menuPath.forEach((menu: any, index: number) => {
|
||||
// 跳过第一个（首页已添加）
|
||||
if (index === 0 && menu.label === '首页') {
|
||||
return
|
||||
}
|
||||
if (menuResult) {
|
||||
const { current, parent } = menuResult
|
||||
|
||||
// 如果存在父级菜单（一级菜单）
|
||||
if (parent) {
|
||||
// 获取第一个二级菜单的路径
|
||||
const firstChildMenus = parent.children || parent.son
|
||||
const firstChildPath = firstChildMenus && firstChildMenus.length > 0
|
||||
? (firstChildMenus[0].path || firstChildMenus[0].api || `/menu-${firstChildMenus[0].id}`)
|
||||
: parent.path || parent.api || `/menu-${parent.id}`
|
||||
|
||||
// 第一个面包屑是一级菜单的名字，但点击跳转第一个二级菜单
|
||||
list.push({
|
||||
title: menu.label,
|
||||
path: menu.path || menu.api || `/menu-${menu.id}`
|
||||
title: parent.label,
|
||||
path: firstChildPath
|
||||
})
|
||||
}
|
||||
|
||||
// 添加当前菜单（二级菜单）
|
||||
list.push({
|
||||
title: current.label,
|
||||
path: current.path || current.api || `/menu-${current.id}`
|
||||
})
|
||||
}
|
||||
;
|
||||
|
||||
// 如果没有找到菜单信息，默认添加首页
|
||||
if (list.length === 0) {
|
||||
list.push({
|
||||
title: '首页',
|
||||
path: '/dashboard'
|
||||
})
|
||||
}
|
||||
|
||||
return list
|
||||
}
|
||||
|
||||
|
|
@ -104,7 +122,6 @@ export const useTabsStore = defineStore('tabs', () => {
|
|||
const existIndex = tabs.value.findIndex(item => item.path === tab.path)
|
||||
// 计算面包屑路径
|
||||
const breadcrumbs = findBreadcrumbPath(tab.path)
|
||||
console.log('aaaaaaaaaaaaa:', breadcrumbs);
|
||||
|
||||
if (existIndex === -1) {
|
||||
// 新标签页，添加到列表
|
||||
|
|
|
|||
Loading…
Reference in New Issue