From 012811712b976fde6675aaff4a8a21c06b88406d Mon Sep 17 00:00:00 2001
From: Asoka <iiloli@88.com>
Date: Thu, 5 Jun 2025 13:32:23 +0800
Subject: [PATCH] =?UTF-8?q?add=20=E4=B8=80=E7=BA=A7=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/navBars/topBar/index.vue |  10 +-
 src/layout/navMenu/horizontal.vue   | 233 +++++++++++++++++++++++++---
 src/theme/element.scss              |  12 +-
 3 files changed, 215 insertions(+), 40 deletions(-)

diff --git a/src/layout/navBars/topBar/index.vue b/src/layout/navBars/topBar/index.vue
index 4fb0ff1..bc19d7a 100644
--- a/src/layout/navBars/topBar/index.vue
+++ b/src/layout/navBars/topBar/index.vue
@@ -3,9 +3,8 @@
     <div class="left-section">
       <Logo v-if="setIsShowLogo" />
     </div>
-
-    <Horizontal :menuList="state.menuList" />
     <div class="right-section">
+      <Horizontal :menuList="state.menuList" />
       <User />
     </div>
   </div>
@@ -81,11 +80,8 @@ const filterRoutesFun = <T extends RouteItem>(arr: T[]): T[] => {
     .filter((item: T) => !item.meta?.isHide)
     .map((item: T) => {
       item = Object.assign({}, item)
-      // 移除 children 以避免下拉菜单效果
-      // if (item.children) item.children = filterRoutesFun(item.children)
-      if (item.children) {
-        delete (item as any).children // 删除子菜单数据以避免下拉效果
-      }
+      // 恢复子菜单数据处理，支持下拉菜单功能
+      if (item.children) item.children = filterRoutesFun(item.children)
       return item
     })
 }
diff --git a/src/layout/navMenu/horizontal.vue b/src/layout/navMenu/horizontal.vue
index b834fe2..4973b07 100644
--- a/src/layout/navMenu/horizontal.vue
+++ b/src/layout/navMenu/horizontal.vue
@@ -1,25 +1,34 @@
 <template>
   <div class="el-menu-horizontal-warp">
-    <el-menu router :default-active="state.defaultActive" background-color="transparent" mode="horizontal">
-      <template v-for="val in menuLists">
-        <el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
-          <template #title>
-            <SvgIcon :name="val.meta.icon" />
-            <span>{{ $t(val.meta.title) + '111111'}}</span>
-          </template>
-          <SubItem :chil="val.children" />
-        </el-sub-menu>
-
-        <template v-else>
-          <el-menu-item :index="val.path" :key="val.path">
-            <template #title v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
-              <SvgIcon :name="val.meta.icon" />
-              {{ $t(val.meta.title) + '222222' }}
-            </template>
-          </el-menu-item>
-        </template>
+    <!-- 将四个模块合并为一个下拉菜单，类似语言切换 -->
+    <el-dropdown 
+      :show-timeout="70" 
+      :hide-timeout="50" 
+      trigger="click"
+      @command="onModuleCommand"
+      class="module-dropdown"
+    >
+      <div class="module-selector">
+        <SvgIcon :name="currentModule.icon" />
+        <span class="module-title">{{ currentModule.title }}</span>
+        <el-icon class="el-icon--right">
+          <ele-ArrowDown />
+        </el-icon>
+      </div>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item 
+            v-for="module in moduleList" 
+            :key="module.path"
+            :command="module.path"
+            :class="{ 'is-active': isCurrentModule(module.path) }"
+          >
+            <SvgIcon :name="module.icon" class="dropdown-icon" />
+            {{ module.title }}
+          </el-dropdown-item>
+        </el-dropdown-menu>
       </template>
-    </el-menu>
+    </el-dropdown>
   </div>
 </template>
 
@@ -27,6 +36,7 @@
 import { defineAsyncComponent, reactive, computed, onBeforeMount } from 'vue'
 import { useRoute, onBeforeRouteUpdate, RouteRecordRaw, useRouter } from 'vue-router'
 import { storeToRefs } from 'pinia'
+import { useI18n } from 'vue-i18n'
 import { useRoutesList } from '/@/stores/routesList'
 import { useThemeConfig } from '/@/stores/themeConfig'
 import other from '/@/utils/other'
@@ -35,9 +45,10 @@ import { treeToList, listToTree, filterList } from '/@/utils/tree'
 import { cloneDeep } from 'lodash-es'
 
 const router = useRouter()
+const { t } = useI18n()
 
 // 引入组件
-// const SubItem = defineAsyncComponent(() => import('/@/layout/navMenu/subItem.vue')) // 已移除下拉菜单，不再需要
+// const SubItem = defineAsyncComponent(() => import('/@/layout/navMenu/subItem.vue')) // 使用el-dropdown替代
 
 // 定义父组件传过来的值
 const props = defineProps({
@@ -56,12 +67,35 @@ const { themeConfig } = storeToRefs(storesThemeConfig)
 const route = useRoute()
 const state = reactive({
   defaultActive: '' as string | undefined,
+  currentModulePath: '' as string,
 })
 
 // 获取父级菜单数据
 const menuLists = computed(() => {
   return <RouteItems>props.menuList
 })
+
+// 模块列表 - 将顶级菜单转换为模块选项
+const moduleList = computed(() => {
+  return menuLists.value.map(item => ({
+    path: item.path,
+    title: item.meta?.title ? t(item.meta.title) : '未命名模块',
+    icon: item.meta?.icon || 'ele-Menu'
+  }))
+})
+
+// 当前选中的模块
+const currentModule = computed(() => {
+  const current = moduleList.value.find(module => 
+    state.currentModulePath === module.path || 
+    route.path.startsWith(module.path)
+  )
+  return current || moduleList.value[0] || { 
+    path: '', 
+    title: '选择模块', 
+    icon: 'ele-Menu' 
+  }
+})
 // 路由过滤递归函数
 const filterRoutesFun = <T extends RouteItem>(arr: T[]): T[] => {
   return arr
@@ -124,14 +158,80 @@ const setCurrentRouterHighlight = (currentRoute: RouteToFrom) => {
 const onALinkClick = (val: RouteItem) => {
   other.handleOpenLink(val)
 }
+
+// 处理模块切换命令
+const onModuleCommand = (path: string) => {
+  // 更新当前模块路径
+  state.currentModulePath = path
+  
+  // 查找选中的模块
+  const selectedModule = menuLists.value.find(item => item.path === path)
+  if (!selectedModule) return
+  
+  // 如果是外部链接，使用原有的处理方式
+  if (selectedModule.meta?.isLink && !selectedModule.meta?.isIframe) {
+    onALinkClick(selectedModule)
+    return
+  }
+
+  // 如果模块有子菜单，跳转到第一个可用的子菜单
+  if (selectedModule.children && selectedModule.children.length > 0) {
+    const firstChild = selectedModule.children.find((child: RouteItem) => !child.meta?.isHide)
+    if (firstChild) {
+      router.push(firstChild.path)
+    } else {
+      router.push(selectedModule.path)
+    }
+  } else {
+    // 没有子菜单，直接跳转到模块根路径
+    router.push(selectedModule.path)
+  }
+
+  // 触发相关事件，保持原有的菜单切换效果
+  mittBus.emit('getBreadcrumbIndexSetFilterRoutes')
+  if (themeConfig.value.layout === 'classic' && themeConfig.value.isClassicSplitMenu) {
+    mittBus.emit('setSendClassicChildren', setSendClassicChildren(path))
+  }
+}
+
+// 判断是否为当前模块
+const isCurrentModule = (path: string): boolean => {
+  return state.currentModulePath === path || route.path.startsWith(path)
+}
 // 页面加载前
 onBeforeMount(() => {
   setCurrentRouterHighlight(route)
+  // 初始化当前模块
+  initCurrentModule()
 })
+
+// 初始化当前模块
+const initCurrentModule = () => {
+  // 根据当前路由确定所属模块
+  const currentPath = route.path
+  const matchedModule = menuLists.value.find(module => 
+    currentPath.startsWith(module.path) && module.path !== '/'
+  )
+  if (matchedModule) {
+    state.currentModulePath = matchedModule.path
+  } else if (menuLists.value.length > 0) {
+    // 如果没有匹配的模块，默认选择第一个
+    state.currentModulePath = menuLists.value[0].path
+  }
+}
 // 路由更新时
 onBeforeRouteUpdate((to) => {
   // 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G
   setCurrentRouterHighlight(to)
+  
+  // 更新当前模块
+  const matchedModule = menuLists.value.find(module => 
+    to.path.startsWith(module.path) && module.path !== '/'
+  )
+  if (matchedModule) {
+    state.currentModulePath = matchedModule.path
+  }
+  
   // 修复经典布局开启切割菜单时，点击tagsView后左侧导航菜单数据不变的问题
   let { layout, isClassicSplitMenu } = themeConfig.value
   if (layout === 'classic' && isClassicSplitMenu) {
@@ -145,17 +245,100 @@ onBeforeRouteUpdate((to) => {
   flex: 1;
   overflow: hidden;
   margin-right: 30px;
+  display: flex;
+  align-items: center;
+  height: 100%;
+
+  .module-dropdown {
+    .module-selector {
+      height: 50px;
+      line-height: 50px;
+      padding: 0 10px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      color: var(--next-bg-topBarColor);
+      background: transparent;
+      border: none;
+      border-radius: 6px;
+      font-size: 14px;
+      transition: all 0.3s;
+      white-space: nowrap;
+
+      .module-title {
+        font-weight: 500;
+      }
+
+      &:hover {
+        background: var(--next-color-user-hover);
+        color: var(--next-bg-topBarColor);
+      }
+    }
+  }
+
+  // 下拉菜单样式
+  :deep(.el-dropdown-menu) {
+    border-radius: 8px;
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+    border: 1px solid var(--el-border-color-light);
+    min-width: 180px;
+    
+    .el-dropdown-menu__item {
+      display: flex;
+      align-items: center;
+      padding: 12px 16px;
+      transition: all 0.3s;
+      border-radius: 6px;
+      margin: 4px 6px;
+      
+      .dropdown-icon {
+        margin-right: 10px;
+        font-size: 16px;
+        width: 16px;
+        height: 16px;
+      }
+      
+      &:hover {
+        background: var(--next-color-user-hover);
+        color: var(--next-bg-topBarColor);
+      }
+      
+      &.is-active {
+        background: var(--next-color-user-hover);
+        color: var(--next-bg-topBarColor);
+        font-weight: 600;
+
+        .dropdown-icon {
+          color: var(--next-bg-topBarColor);
+        }
+      }
+    }
+  }
+
+  // 兼容原有样式
   :deep(.el-scrollbar__bar.is-vertical) {
     display: none;
   }
   :deep(a) {
     width: 100%;
   }
-  .el-menu.el-menu--horizontal {
-    display: flex;
-    height: 100%;
-    width: 100%;
-    box-sizing: border-box;
+
+  // 响应式设计
+  @media (max-width: 768px) {
+    .module-dropdown {
+      .module-selector {
+        padding: 0 12px;
+        height: 40px;
+        line-height: 40px;
+        font-size: 14px;
+        
+        .module-title {
+          margin-left: 6px;
+          margin-right: 6px;
+        }
+      }
+    }
   }
 }
 </style>
diff --git a/src/theme/element.scss b/src/theme/element.scss
index 1238425..9539059 100644
--- a/src/theme/element.scss
+++ b/src/theme/element.scss
@@ -385,17 +385,13 @@
   padding: 0px;
 }
 
-/* 隐藏水平菜单的下拉效果 */
+/* 水平菜单下拉样式优化 */
 .el-menu--horizontal {
   .el-sub-menu .el-sub-menu__icon-arrow {
-    display: none !important; /* 隐藏下拉箭头 */
+    transition: transform 0.3s;
   }
   
-  .el-sub-menu__title:hover + .el-menu {
-    display: none !important; /* 隐藏下拉菜单 */
-  }
-  
-  .el-popper.is-pure.is-light {
-    display: none !important; /* 完全隐藏下拉弹出层 */
+  .el-sub-menu.is-opened .el-sub-menu__icon-arrow {
+    transform: rotate(180deg);
   }
 }