导航

package.json

@@ -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": {

pnpm-lock.yaml

@@ -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: {}

src/components/layout/Breadcrumb.vue

@@ -28,16 +28,17 @@ const breadcrumbList = computed<BreadcrumbItem[]>(() => tabsStore.currentBreadcr
 
 <style scoped lang="scss">
 .breadcrumb-container {
-  padding: 12px 16px;
+  display: flex;
-  background: #fff;
+  align-items: center;
-  border-bottom: 1px solid var(--el-border-color-light);
+  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);
           }
         }
       }

src/components/layout/Header.vue

@@ -1,18 +1,30 @@
 <template>
   <header class="layout-header">
-    <!-- 左侧：Logo 和系统名称 -->
+    <!-- 左侧：Logo、系统名称和菜单收缩按钮 -->
     <div class="header-left">
-      <div class="logo">
+      <div class="logo-section">
-        <img src="@/assets/images/logo.webp" alt="logo" />
+        <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-avatar :size="28" class="user-avatar">
-            <el-icon  :size="20"><User /></el-icon>
+            <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;
+    width: 200px;
+    flex-shrink: 0;
     
-    .logo {
+    .logo-section {
       display: flex;
       align-items: center;
-      gap: 10px;
+      gap: 8px;
+      width: 100%;
       
-      img {
+      .logo-img {
-        height: 32px;
+        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;
+    gap: 8px;
-
+    min-width: 200px;
-    .notification-badge {
+    justify-content: flex-end;
-      :deep(.el-badge__content) {
-        transform: translateY(-50%) translateX(50%);
-      }
-    }
 
     .el-button {
-      border: none;
+      padding: 4px 8px;
-      background: transparent;
-      padding: 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;
+        gap: 6px;
-        padding: 4px 8px;
+        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;

src/components/layout/Layout.vue

@@ -1,18 +1,15 @@
 <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 /> -->
 
@@ -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);
+    height: calc(100vh - 50px);
-    margin-top: 60px;
+    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;

src/components/layout/Sidebar.vue

@@ -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;

src/components/layout/Tabs.vue

@@ -1,52 +1,180 @@
 <template>
   <div class="tabs-container">
-    <el-tabs v-model="tabsStore.activeTab" type="card" closable @tab-click="handleTabClick"
+    <!-- 左侧滚动按钮 -->
-      @tab-remove="handleTabRemove">
+    <button class="scroll-btn scroll-btn-left" @click="scrollLeft" :class="{ 'is-disabled': !canScrollLeft }">
-      <el-tab-pane v-for="(tab, index) in tabsStore.tabs" :key="tab.path" :label="tab.title" :name="tab.path">
+      <el-icon><ArrowLeft /></el-icon>
-        <template #label>
+    </button>
-          <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"
+    <div class="tabs-scroll-area" ref="tabsContainerRef">
-            @contextmenu.prevent="handleContextMenu($event, tab.path)">
+      <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>
+      </draggable>
-    </el-tabs>
+    </div>
     
-    <!-- 右键菜单 -->
+    <!-- 右侧滚动按钮 -->
-    <el-dropdown popper-class="el-droMenu" :popper-style="style" ref="contextMenuRef" trigger="contextmenu"
+    <button class="scroll-btn scroll-btn-right" @click="scrollRight" :class="{ 'is-disabled': !canScrollRight }">
-      @command="handleContextMenuCommand" @visible-change="handleMenuVisibleChange">
+      <el-icon><ArrowRight /></el-icon>
-      <span class="context-menu-trigger"></span>
+    </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>
+        <div class="dropdown-header">已打开的页面</div>
-          <el-dropdown-item command="refresh">刷新当前页</el-dropdown-item>
+        <el-dropdown-menu class="page-dropdown-menu">
-          <el-dropdown-item command="close">关闭当前</el-dropdown-item>
+          <el-dropdown-item 
-          <el-dropdown-item command="closeOther">关闭其他</el-dropdown-item>
+            v-for="tab in tabsStore.tabs" 
-          <el-dropdown-item command="closeLeft">关闭左侧</el-dropdown-item>
+            :key="tab.path"
-          <el-dropdown-item command="closeRight">关闭右侧</el-dropdown-item>
+            :command="tab.path"
-          <el-dropdown-item command="closeAll" divided>关闭全部</el-dropdown-item>
+            :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
+const canScrollLeft = ref(false)
-let dropIndex: number | null = null
+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 handleTabClick = (tab: TabItem) => {
-  const targetTab = tabsStore.tabs.find(item => item.path === tab.paneName)
+  // 点击时关闭右键菜单
-  if (targetTab) {
+  closeContextMenu()
-    router.push({ path: targetTab.path, query: targetTab.query })
+  
+  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.stopPropagation()
-    e.dataTransfer.dropEffect = 'move'
+  
-  }
+  // 先关闭可能打开的当前页面下拉菜单
-  dropIndex = index
+  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
   }
   
-// 拖拽结束
+  // 如果下面空间不够，往上显示
-const handleDragEnd = (e: DragEvent) => {
+  if (y + menuHeight > window.innerHeight) {
-  const target = e.target as HTMLElement
+    y = window.innerHeight - menuHeight - 10
-  target.classList.remove('dragging')
-  dragIndex = null
-  dropIndex = null
   }
   
-// 拖拽放置
+  // 确保最小值
-const handleDrop = (e: DragEvent, index: number) => {
+  x = Math.max(10, x)
-  e.preventDefault()
+  y = Math.max(10, y)
-  if (dragIndex === null || dragIndex === index) {
+  
-    return
+  contextMenuX.value = x
+  contextMenuY.value = y
+  contextMenuVisible.value = true
 }
 
-  // 重新排序 tabs
+// 关闭右键菜单
-  const newTabs = [...tabsStore.tabs]
+const closeContextMenu = () => {
-  const [draggedTab] = newTabs.splice(dragIndex, 1)
+  contextMenuVisible.value = false
-  if (draggedTab) {
+  contextMenuPath.value = ''
-    newTabs.splice(index, 0, draggedTab)
-    // 更新 store
-    tabsStore.setTabs(newTabs)
-  }
-
-  // 移除拖拽样式
-  const target = e.target as HTMLElement
-  target.classList.remove('dragging')
 }
 </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;
+  padding: 0 40px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
   position: relative;
   z-index: 10;
+  display: flex;
+  align-items: center;
 
-  :deep(.el-tabs) {
+  .scroll-btn {
-    .el-tabs__header {
+    position: absolute;
-      margin: 0;
+    top: 50%;
-      border: none;
+    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 {
+    &.is-disabled {
-      overflow: visible !important;
+      opacity: 0.4;
+      cursor: not-allowed;
     }
     
-    .el-tabs__nav {
+    &.scroll-btn-left {
-      border: none !important;
+      left: 6px;
-      gap: 4px;
     }
     
-    .el-tabs__item {
+    &.scroll-btn-right {
-      border: 1px solid var(--el-border-color-lighter) !important;
+      right: 66px;
-      border-bottom: none !important;
+    }
-      margin-right: 0;
+  }
-      border-radius: 8px 8px 0 0;
+
-      background: linear-gradient(180deg, #f8f9fb 0%, #f0f2f5 100%);
+  .tabs-scroll-area {
-      color: #5a5e66;
+    flex: 1;
-      height: 38px;
+    height: 100%;
-      line-height: 38px;
+    overflow-x: auto;
-      padding: 0 18px;
+    overflow-y: hidden;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  .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.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: all 0.2s ease;
-      position: relative;
+    white-space: nowrap;
-      overflow: hidden;
+    flex-shrink: 0;
 
-      // 顶部渐变装饰
+    .tab-label {
-      &::before {
+      display: flex;
-        content: '';
+      align-items: center;
-        position: absolute;
+      cursor: grab;
-        top: 0;
+      
-        left: 0;
+      &:active {
-        right: 0;
+        cursor: grabbing;
-        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;
     }
 
-      // 底部白色边框效果
+    .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);
+    &.ghost {
-        background: linear-gradient(180deg, #fff 0%, #f5f7fa 100%);
+      opacity: 0.5;
-        border-color: var(--el-color-primary-light-6) !important;
+      background: var(--el-color-primary-light-9);
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+      border: 1px dashed var(--el-color-primary);
+    }
+
+    &.chosen {
+      opacity: 0.8;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
       transform: translateY(-2px);
-
-        &::before {
-          transform: scaleX(0.7);
     }
 
-        &::after {
+    &.drag {
-          transform: scaleX(1);
+      opacity: 1;
+      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+      transform: translateY(-4px) scale(1.02);
     }
   }
 
-      &.is-active,
+  .current-page-btn {
-      &.is-context-active {
+    position: absolute;
-        background: #fff;
+    right: 6px;
-        color: var(--el-color-primary);
+    top: 50%;
-        // border-bottom: 1px solid #fff !important;
+    transform: translateY(-50%);
-        border-color: var(--el-color-primary-light-4) !important;
+    width: 28px;
-        box-shadow: 0 4px 16px rgba(var(--el-color-primary-rgb), 0.15);
+    height: 28px;
-        font-weight: 500;
+    display: flex;
-        z-index: 2;
+    align-items: center;
-
+    justify-content: center;
-        &::before {
+    background: var(--el-fill-color-light);
-          transform: scaleX(1);
+    border: 1px solid var(--el-border-color-light);
-        }
+    border-radius: 4px;
-
+    cursor: pointer;
-        &::after {
+    color: var(--el-text-color-secondary);
-          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;
+    padding: 0;
-        margin-left: 6px;
-        vertical-align: middle;
     
     &:hover {
-          background: var(--el-color-danger);
+      background: var(--el-fill-color);
-          color: #fff;
+      color: var(--el-color-primary);
-          transform: scale(1.15) rotate(90deg);
+      border-color: var(--el-color-primary-light-5);
+    }
   }
 }
 
-      // 拖拽样式
+// 右键菜单下拉
-      .tab-label {
+.context-menu-dropdown {
-        display: inline-flex;
+  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;
-        width: 100%;
+    gap: 8px;
-        height: 100%;
+    padding: 8px 16px;
-        gap: 6px;
+    font-size: 13px;
+    color: var(--el-text-color-regular);
+    cursor: pointer;
+    transition: all 0.15s ease;
     
-        .tab-text {
+    &:hover {
-          display: inline-block;
+      background: var(--el-fill-color-light);
-          max-width: 150px;
+      color: var(--el-color-primary);
-          overflow: auto;
+    }
+    
+    .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;
     }
     
-        &.dragging {
+    .dropdown-item-close {
-          opacity: 0.5;
+      margin-left: 8px;
-          cursor: move;
+      font-size: 12px;
-        }
+      opacity: 0.6;
-      }
-    }
-
-    .el-tabs__nav-wrap::after {
-      display: none;
-    }
-
-    // 左右滚动按钮样式
-    .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;
       
       &:hover {
-        color: var(--el-color-primary);
+        opacity: 1;
-        background: var(--el-fill-color-light);
+        color: var(--el-color-danger);
       }
     }
   }
-
-  .context-menu-trigger {
-    display: none;
-  }
 }
 </style>

src/stores/modules/tabs.ts

@@ -41,35 +41,35 @@ export const useTabsStore = defineStore('tabs', () => {
 
   /**
    * 从菜单中查找当前路由的面包屑路径
+   * 逻辑：
+   * - 第一个永远是一级菜单的名字
+   * - 点击一级菜单会跳转到第一个二级菜单
    */
   const findBreadcrumbPath = (path: string): BreadcrumbItem[] => {
     const list: BreadcrumbItem[] = []
 
-    // 添加首页
+    // 如果是首页，直接返回首页
+    if (path === '/dashboard') {
       list.push({
         title: '首页',
         path: '/dashboard'
       })
-
-    // 如果是首页，直接返回
-    if (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)
+    const menuResult = findMenuPath(userStore.sideMenu, path)
-    console.log('menuPath:', menuPath);
 
-    if (menuPath) {
+    if (menuResult) {
-    console.log('list:', menuPath)
+      const { current, parent } = menuResult
-      menuPath.forEach((menu: any, index: number) => {
+      
-        // 跳过第一个（首页已添加）
+      // 如果存在父级菜单（一级菜单）
-        if (index === 0 && menu.label === '首页') {
+      if (parent) {
-          return
+        // 获取第一个二级菜单的路径
-        }
+        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,
+          title: parent.label,
-          path: menu.path || menu.api || `/menu-${menu.id}`
+          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) {
       // 新标签页，添加到列表