300 lines
9.3 KiB
Vue
300 lines
9.3 KiB
Vue
<template>
|
|
<div class="flex h-full">
|
|
<!-- 一级菜单常驻侧边栏 -->
|
|
<div
|
|
class="relative h-full bg-white text-slate-700 dark:text-slate-300 dark:bg-slate-900 border-r shadow dark:shadow-gray-700"
|
|
:style="{
|
|
width: config.layout_side_collapsed_width + 'px'
|
|
}"
|
|
>
|
|
<el-scrollbar>
|
|
<el-menu
|
|
:collapse="true"
|
|
:collapse-transition="false"
|
|
:default-active="topActive"
|
|
class="border-r-0 w-full"
|
|
unique-opened
|
|
@select="selectTopMenuItem"
|
|
>
|
|
<template v-for="item in routerStore.asyncRouters[0]?.children || []">
|
|
<el-menu-item
|
|
v-if="!item.hidden && (!item.children || item.children.length === 0)"
|
|
:key="item.name"
|
|
:index="item.name"
|
|
class="dark:text-slate-300 overflow-hidden"
|
|
:style="{
|
|
height: config.layout_side_item_height + 'px'
|
|
}"
|
|
>
|
|
<el-icon v-if="item.meta.icon">
|
|
<component :is="item.meta.icon" />
|
|
</el-icon>
|
|
<template v-else>
|
|
{{ item.meta.title[0] }}
|
|
</template>
|
|
<template #title>
|
|
{{ item.meta.title }}
|
|
</template>
|
|
</el-menu-item>
|
|
<template v-else-if="!item.hidden" >
|
|
<el-menu-item
|
|
:key="item.name"
|
|
:index="item.name"
|
|
:class="{'is-active': topActive === item.name}"
|
|
class="dark:text-slate-300 overflow-hidden"
|
|
:style="{
|
|
height: config.layout_side_item_height + 'px'
|
|
}"
|
|
>
|
|
<el-icon v-if="item.meta.icon">
|
|
<component :is="item.meta.icon" />
|
|
</el-icon>
|
|
<template v-else>
|
|
{{ item.meta.title[0] }}
|
|
</template>
|
|
<template #title>
|
|
{{ item.meta.title }}
|
|
</template>
|
|
</el-menu-item>
|
|
</template>
|
|
</template>
|
|
</el-menu>
|
|
</el-scrollbar>
|
|
</div>
|
|
|
|
<!-- 二级菜单并列显示 -->
|
|
<div
|
|
class="relative h-full bg-white text-slate-700 dark:text-slate-300 dark:bg-slate-900 border-r shadow dark:shadow-gray-700 px-2"
|
|
:style="{
|
|
width: layoutSideWidth + 'px'
|
|
}"
|
|
>
|
|
<el-scrollbar>
|
|
<el-menu
|
|
:collapse="isCollapse"
|
|
:collapse-transition="false"
|
|
:default-active="active"
|
|
class="border-r-0 w-full"
|
|
unique-opened
|
|
@select="selectMenuItem"
|
|
>
|
|
<template v-for="item in secondLevelMenus">
|
|
<aside-component
|
|
v-if="!item.hidden"
|
|
:key="item.name"
|
|
:router-info="item"
|
|
/>
|
|
</template>
|
|
</el-menu>
|
|
</el-scrollbar>
|
|
<div
|
|
class="absolute bottom-8 right-2 w-8 h-8 bg-gray-50 dark:bg-slate-800 flex items-center justify-center rounded cursor-pointer"
|
|
:class="isCollapse ? 'right-0 left-0 mx-auto' : 'right-2'"
|
|
@click="toggleCollapse"
|
|
>
|
|
<el-icon v-if="!isCollapse">
|
|
<DArrowLeft />
|
|
</el-icon>
|
|
<el-icon v-else>
|
|
<DArrowRight />
|
|
</el-icon>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import AsideComponent from '@/view/layout/aside/asideComponent/index.vue'
|
|
import { ref, provide, watchEffect, computed } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { useRouterStore } from '@/pinia/modules/router'
|
|
import { useAppStore } from '@/pinia'
|
|
import { storeToRefs } from 'pinia'
|
|
|
|
const appStore = useAppStore()
|
|
const { device, config } = storeToRefs(appStore)
|
|
|
|
defineOptions({
|
|
name: 'SidebarMode'
|
|
})
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const routerStore = useRouterStore()
|
|
const isCollapse = ref(false)
|
|
const active = ref('')
|
|
const topActive = ref('')
|
|
const secondLevelMenus = ref([])
|
|
|
|
const layoutSideWidth = computed(() => {
|
|
if (!isCollapse.value) {
|
|
return config.value.layout_side_width
|
|
} else {
|
|
return config.value.layout_side_collapsed_width
|
|
}
|
|
})
|
|
|
|
|
|
provide('isCollapse', isCollapse)
|
|
|
|
// 更新二级菜单
|
|
const updateSecondLevelMenus = (menuName) => {
|
|
const menu = routerStore.asyncRouters[0]?.children.find(item => item.name === menuName)
|
|
if (menu && menu.children && menu.children.length > 0) {
|
|
secondLevelMenus.value = menu.children
|
|
}
|
|
}
|
|
|
|
// 选择一级菜单
|
|
const selectTopMenuItem = (index) => {
|
|
topActive.value = index
|
|
|
|
// 获取选中的菜单项
|
|
const menu = routerStore.asyncRouters[0]?.children.find(item => item.name === index)
|
|
|
|
// 只有当选中的菜单有子菜单时，才更新二级菜单区域
|
|
if (menu && menu.children && menu.children.length > 0) {
|
|
updateSecondLevelMenus(index)
|
|
|
|
// 导航到第一个可见的子菜单
|
|
const firstVisibleChild = menu.children.find(child => !child.hidden)
|
|
if (firstVisibleChild) {
|
|
navigateToMenuItem(firstVisibleChild.name)
|
|
}
|
|
} else {
|
|
// 如果没有子菜单，直接导航到该菜单，但不更新二级菜单区域
|
|
navigateToMenuItem(index)
|
|
}
|
|
}
|
|
|
|
// 选择二级或更深层级的菜单
|
|
const selectMenuItem = (index) => {
|
|
navigateToMenuItem(index)
|
|
}
|
|
|
|
// 导航到指定菜单
|
|
const navigateToMenuItem = (index) => {
|
|
const query = {}
|
|
const params = {}
|
|
routerStore.routeMap[index]?.parameters &&
|
|
routerStore.routeMap[index]?.parameters.forEach((item) => {
|
|
if (item.type === 'query') {
|
|
query[item.key] = item.value
|
|
} else {
|
|
params[item.key] = item.value
|
|
}
|
|
})
|
|
if (index === route.name) return
|
|
if (index.indexOf('http://') > -1 || index.indexOf('https://') > -1) {
|
|
if (index === 'Iframe') {
|
|
query.url = decodeURIComponent(index)
|
|
router.push({
|
|
name: 'Iframe',
|
|
query,
|
|
params
|
|
})
|
|
return
|
|
} else {
|
|
window.open(index, '_blank')
|
|
return
|
|
}
|
|
} else {
|
|
router.push({ name: index, query, params })
|
|
}
|
|
}
|
|
|
|
const toggleCollapse = () => {
|
|
isCollapse.value = !isCollapse.value
|
|
}
|
|
|
|
|
|
|
|
watchEffect(() => {
|
|
if (route.name === 'Iframe') {
|
|
active.value = decodeURIComponent(route.query.url)
|
|
return
|
|
}
|
|
active.value = route.meta.activeName || route.name
|
|
|
|
// 找到当前路由所属的一级菜单
|
|
const findParentMenu = () => {
|
|
// 首先检查当前路由是否就是一级菜单
|
|
const isTopMenu = routerStore.asyncRouters[0]?.children.some(
|
|
item => !item.hidden && item.name === route.name
|
|
)
|
|
|
|
if (isTopMenu) {
|
|
return route.name
|
|
}
|
|
|
|
for (const topMenu of routerStore.asyncRouters[0]?.children || []) {
|
|
if (topMenu.hidden) continue
|
|
|
|
// 检查当前路由是否是这个一级菜单的子菜单
|
|
if (topMenu.children && topMenu.children.some(child => child.name === route.name)) {
|
|
return topMenu.name
|
|
}
|
|
|
|
// 递归检查更深层级
|
|
const checkChildren = (items) => {
|
|
for (const item of items || []) {
|
|
if (item.name === route.name) {
|
|
return true
|
|
}
|
|
if (item.children && checkChildren(item.children)) {
|
|
return true
|
|
}
|
|
}
|
|
return false
|
|
}
|
|
|
|
if (topMenu.children && checkChildren(topMenu.children)) {
|
|
return topMenu.name
|
|
}
|
|
}
|
|
return null
|
|
}
|
|
|
|
const parentMenu = findParentMenu()
|
|
if (parentMenu) {
|
|
topActive.value = parentMenu
|
|
|
|
// 只有当父菜单有子菜单时，才更新二级菜单区域
|
|
const menu = routerStore.asyncRouters[0]?.children.find(item => item.name === parentMenu)
|
|
if (menu && menu.children && menu.children.length > 0) {
|
|
updateSecondLevelMenus(parentMenu)
|
|
} else {
|
|
// 如果找到的父菜单没有子菜单，保持当前一级菜单高亮，但需要显示一些二级菜单
|
|
// 寻找第一个有子菜单的一级菜单来显示其子菜单
|
|
const firstMenuWithChildren = routerStore.asyncRouters[0].children.find(
|
|
item => !item.hidden && item.children && item.children.length > 0
|
|
)
|
|
|
|
if (firstMenuWithChildren) {
|
|
// 只更新二级菜单区域，但保持当前一级菜单的高亮状态
|
|
updateSecondLevelMenus(firstMenuWithChildren.name)
|
|
}
|
|
}
|
|
} else if (routerStore.asyncRouters[0]?.children?.length > 0) {
|
|
// 如果没有找到父菜单，保持当前路由名称作为高亮，但需要显示一些二级菜单
|
|
// 寻找第一个有子菜单的一级菜单来显示其子菜单
|
|
const firstMenuWithChildren = routerStore.asyncRouters[0].children.find(
|
|
item => !item.hidden && item.children && item.children.length > 0
|
|
)
|
|
|
|
if (firstMenuWithChildren) {
|
|
// 只更新二级菜单区域，高亮状态保持为当前路由
|
|
topActive.value = route.name
|
|
secondLevelMenus.value = firstMenuWithChildren.children
|
|
}
|
|
}
|
|
})
|
|
|
|
watchEffect(() => {
|
|
if (device.value === 'mobile') {
|
|
isCollapse.value = true
|
|
} else {
|
|
isCollapse.value = false
|
|
}
|
|
})
|
|
</script> |