feat(navMenuHorizontal): add secondary menu navigation and styling fixes; align submenu to left, dropdown to right, and correct icon alignment
This commit is contained in:
parent
1bf9c07ab7
commit
c23a89d222
@ -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); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user