From c23a89d22247f3664d8fddd74f764bffd07b384c Mon Sep 17 00:00:00 2001
From: Asoka <iiloli@88.com>
Date: Thu, 5 Jun 2025 14:21:39 +0800
Subject: [PATCH] feat(navMenuHorizontal): add secondary menu navigation and
 styling fixes; align submenu to left, dropdown to right, and correct icon
 alignment

---
 src/layout/navMenu/horizontal.vue | 231 ++++++++++++++++++++----------
 1 file changed, 153 insertions(+), 78 deletions(-)

diff --git a/src/layout/navMenu/horizontal.vue b/src/layout/navMenu/horizontal.vue
index 4973b07..69fd006 100644
--- a/src/layout/navMenu/horizontal.vue
+++ b/src/layout/navMenu/horizontal.vue
@@ -1,5 +1,22 @@
 <template>
   <div class="el-menu-horizontal-warp">
+    <!-- 新增二级菜单导航 -->
+    <el-menu
+      class="sub-menu"
+      mode="horizontal"
+      :default-active="currentSubMenuPath"
+      background-color="transparent"
+      @select="onSubMenuClick"
+    >
+      <el-menu-item
+        v-for="item in subMenuList"
+        :index="item.path"
+        :key="item.path"
+      >
+        <SvgIcon :name="item.meta?.icon" class="submenu-icon" :size="20" />
+        <span>{{ $t(item.meta?.title) }}</span>
+      </el-menu-item>
+    </el-menu>
     <!-- 将四个模块合并为一个下拉菜单，类似语言切换 -->
     <el-dropdown 
       :show-timeout="70" 
@@ -9,7 +26,7 @@
       class="module-dropdown"
     >
       <div class="module-selector">
-        <SvgIcon :name="currentModule.icon" />
+        <SvgIcon :name="currentModule.icon" :size="20" />
         <span class="module-title">{{ currentModule.title }}</span>
         <el-icon class="el-icon--right">
           <ele-ArrowDown />
@@ -174,26 +191,65 @@ const onModuleCommand = (path: string) => {
     return
   }
 
-  // 如果模块有子菜单，跳转到第一个可用的子菜单
+  // 如果模块有子菜单，跳转到第一个可用的子菜单，并更新左侧菜单
   if (selectedModule.children && selectedModule.children.length > 0) {
     const firstChild = selectedModule.children.find((child: RouteItem) => !child.meta?.isHide)
     if (firstChild) {
       router.push(firstChild.path)
+      // 更新左侧显示二级子菜单的子项
+      mittBus.emit('setSendColumnsChildren', setSendSubMenuChildren(firstChild.path))
     } else {
       router.push(selectedModule.path)
+      mittBus.emit('setSendColumnsChildren', { children: [] })
     }
   } else {
-    // 没有子菜单，直接跳转到模块根路径
     router.push(selectedModule.path)
+    mittBus.emit('setSendColumnsChildren', { children: [] })
   }
 
-  // 触发相关事件，保持原有的菜单切换效果
+  // 更新水平菜单和经典布局下的左侧菜单
   mittBus.emit('getBreadcrumbIndexSetFilterRoutes')
   if (themeConfig.value.layout === 'classic' && themeConfig.value.isClassicSplitMenu) {
     mittBus.emit('setSendClassicChildren', setSendClassicChildren(path))
   }
 }
 
+// 新增：计算二级菜单列表
+const subMenuList = computed(() => {
+  const module = menuLists.value.find(item => item.path === state.currentModulePath)
+  return module && module.children
+    ? module.children.filter((child: RouteRecordRaw) => !child.meta?.isHide)
+    : []
+})
+
+// 新增：当前选中的二级菜单路径
+const currentSubMenuPath = computed(() => {
+  const sub = subMenuList.value.find((child: RouteRecordRaw) => route.path.startsWith(child.path))
+  return sub?.path || subMenuList.value[0]?.path || ''
+})
+
+// 新增：传送当前二级子级数据到左侧菜单
+const setSendSubMenuChildren = (path: string) => {
+  let res: MittMenu = { children: [] }
+  const module = menuLists.value.find(item => item.path === state.currentModulePath)
+  if (module && module.children) {
+    const sub = module.children.find((child: RouteRecordRaw) => child.path === path)
+    if (sub) {
+      res.item = { ...sub }
+      res.children = sub.children ? [...sub.children] : []
+    }
+  }
+  return res
+}
+
+// 新增：二级菜单点击处理
+const onSubMenuClick = (path: string) => {
+  router.push(path)
+  // 更新左侧菜单
+  mittBus.emit('getBreadcrumbIndexSetFilterRoutes')
+  mittBus.emit('setSendColumnsChildren', setSendSubMenuChildren(path))
+}
+
 // 判断是否为当前模块
 const isCurrentModule = (path: string): boolean => {
   return state.currentModulePath === path || route.path.startsWith(path)
@@ -242,100 +298,119 @@ onBeforeRouteUpdate((to) => {
 
 <style scoped lang="scss">
 .el-menu-horizontal-warp {
-  flex: 1;
-  overflow: hidden;
-  margin-right: 30px;
+  height: 100%;
   display: flex;
   align-items: center;
-  height: 100%;
+  flex: 1;
+  padding: 0 16px;
+  background: var(--el-bg-color);
+  border-bottom: 1px solid var(--el-border-color-light);
 
-  .module-dropdown {
-    .module-selector {
-      height: 50px;
-      line-height: 50px;
-      padding: 0 10px;
-      cursor: pointer;
+  /* 二级菜单，左侧 */
+  .sub-menu {
+    padding: 0 !important;
+    margin: 0 !important;
+    height: 100%;
+    overflow-x: auto;
+    white-space: nowrap;
+    &::-webkit-scrollbar { display: none; }
+
+    .el-menu-item {
+      min-width: 150px;
+      height: 100%;
+      line-height: initial;
+      margin: 0 12px;
+      padding: 0;
+      color: var(--next-bg-topBarColor);
       display: flex;
       align-items: center;
-      gap: 5px;
-      color: var(--next-bg-topBarColor);
-      background: transparent;
-      border: none;
-      border-radius: 6px;
+      gap: 6px;
       font-size: 14px;
-      transition: all 0.3s;
-      white-space: nowrap;
+      border-bottom: 2px solid transparent;
+      transition: color 0.3s, border-color 0.3s;
 
-      .module-title {
-        font-weight: 500;
+      .submenu-icon {
+        margin-top: 0;
+        width: 20px;
+        height: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 4px;
       }
 
-      &:hover {
-        background: var(--next-color-user-hover);
-        color: var(--next-bg-topBarColor);
+      &.is-active {
+        color: var(--el-color-primary);
+        border-color: var(--el-color-primary);
+        font-weight: 600;
       }
+      &:hover { color: var(--el-color-primary); }
     }
   }
 
-  // 下拉菜单样式
-  :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 {
+  /* 模块切换下拉，右侧 */
+  .module-dropdown {
+    flex: none;
+    margin-left: 16px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+
+    .module-selector {
       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;
-      }
-      
+      height: 100%;
+      line-height: initial;
+      padding: 0 12px;
+      gap: 8px;
+      color: var(--next-bg-topBarColor);
+      background: var(--el-bg-color);
+      font-size: 14px;
+      transition: background 0.3s, color 0.3s, border-color 0.3s;
+
+      .module-title { font-weight: 500; }
       &:hover {
-        background: var(--next-color-user-hover);
-        color: var(--next-bg-topBarColor);
+        background: var(--el-color-primary-light-9);
+        color: var(--el-color-primary);
+        border-color: var(--el-color-primary-light-7);
       }
-      
-      &.is-active {
-        background: var(--next-color-user-hover);
-        color: var(--next-bg-topBarColor);
-        font-weight: 600;
+
+      /* ensure module icon and dropdown arrow align */
+      .el-icon, i.el-icon {
+        font-size: 20px;
+        line-height: 20px;
+      }
+    }
+
+    :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;
+        margin: 4px 6px;
+        border-radius: 6px;
+        transition: background 0.3s, color 0.3s;
 
         .dropdown-icon {
-          color: var(--next-bg-topBarColor);
+          margin-right: 10px;
+          font-size: 16px;
+          width: 16px;
+          height: 16px;
         }
-      }
-    }
-  }
-
-  // 兼容原有样式
-  :deep(.el-scrollbar__bar.is-vertical) {
-    display: none;
-  }
-  :deep(a) {
-    width: 100%;
-  }
-
-  // 响应式设计
-  @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;
+        &:hover {
+          background: var(--el-color-primary-light-9);
+          color: var(--el-color-primary);
+        }
+        &.is-active {
+          background: var(--el-color-primary-light-8);
+          color: var(--el-color-primary);
+          font-weight: 600;
+          .dropdown-icon { color: var(--el-color-primary); }
         }
       }
     }