337 lines
6.6 KiB
Vue
337 lines
6.6 KiB
Vue
<template>
|
||
<el-menu router :default-active="$route.path" :collapse="false" unique-opened background-color="#304156"
|
||
text-color="#bfcbd9" active-text-color="#409EFF">
|
||
<!-- 一级菜单 -->
|
||
<el-sub-menu v-for="item in filteredMenuData" :key="item.path" :index="item.path">
|
||
<template #title>
|
||
<el-icon>
|
||
<component :is="item.icon" />
|
||
</el-icon>
|
||
<span>{{ item.title }}</span>
|
||
</template>
|
||
|
||
<!-- 二级菜单 -->
|
||
<el-menu-item v-for="child in item.children" :key="child.path" :index="child.path">
|
||
{{ child.title }}
|
||
</el-menu-item>
|
||
</el-sub-menu>
|
||
</el-menu>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { shallowRef, computed, onMounted, watch } from 'vue'
|
||
import { Document as DocIcon, Setting, User, Message, ShoppingCart, Shop, Connection, Notebook, Box, TrendCharts, HomeFilled, Monitor } from '@element-plus/icons-vue'
|
||
import { hasPermission, getUserPermissions } from '@/utils/permission'
|
||
|
||
const menuData = shallowRef([
|
||
{
|
||
title: '系统管理',
|
||
path: '/system',
|
||
icon: Setting,
|
||
children: [
|
||
{
|
||
title: '配置列表',
|
||
path: '/SettledConfig/list',
|
||
permission: 'settled:config:list'
|
||
},
|
||
{
|
||
title: '会员开通记录',
|
||
path: '/SettledConfig/memberRecord',
|
||
permission: 'settled:member:record'
|
||
},
|
||
{
|
||
title: '用户列表',
|
||
path: '/user/list',
|
||
permission: 'user:list:view'
|
||
},
|
||
{
|
||
title: '角色管理',
|
||
path: '/user/role',
|
||
permission: 'user:role:manage'
|
||
},
|
||
{
|
||
title: '权限管理',
|
||
path: '/user/permission',
|
||
permission: 'user:permission:manage'
|
||
},
|
||
{
|
||
title: '邀请列表',
|
||
path: '/invitation/list',
|
||
permission: 'invitation:list:view'
|
||
},
|
||
{
|
||
title: '运行日志',
|
||
path: '/log/runningLog/list',
|
||
permission: 'log:running:view'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
title: '店铺管理',
|
||
path: '/shop',
|
||
icon: Shop,
|
||
children: [
|
||
{
|
||
title: '店铺列表',
|
||
path: '/shop/list',
|
||
permission: 'shop:list:view'
|
||
},
|
||
{
|
||
title: '价格模板',
|
||
path: '/shop/priceTemplate'
|
||
},
|
||
{
|
||
title: '发布商品数据',
|
||
path: '/shop/shopPublishedData'
|
||
},,
|
||
{
|
||
title: '店铺商品',
|
||
path: '/shop/pddGoods'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
title: '书品管理',
|
||
path: '/book',
|
||
icon: Notebook,
|
||
children: [
|
||
{
|
||
title: '选品中心',
|
||
path: '/book/selection/center',
|
||
permission: 'book:selection:view'
|
||
},
|
||
{
|
||
title: '自营书品',
|
||
path: '/book/shopGoods',
|
||
// permission: 'book:shopGoods:view'
|
||
},
|
||
{
|
||
title: '书品中心',
|
||
path: '/book/shopGoodsAll',
|
||
// permission: 'book:shopGoodsAll:view'
|
||
},
|
||
{
|
||
title: '过滤设置',
|
||
path: '/book/filterSet',
|
||
// permission: 'book:filterSet:view'
|
||
},
|
||
{
|
||
title: '已发布书品管理',
|
||
path: '/book/shopGoodsPublished'
|
||
// permission: 'book:shopGoodsPublished:view'
|
||
},
|
||
{
|
||
title: '书品导入任务列表',
|
||
path: '/book/excelTask'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
title: '仓储管理',
|
||
path: '/warehouse',
|
||
icon: Box,
|
||
children: [
|
||
{
|
||
title: '货区管理',
|
||
path: '/warehouse/depot/list',
|
||
permission: 'warehouse:depot:view'
|
||
},
|
||
{
|
||
title: '物流模板',
|
||
path: '/warehouse/logistics'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
title: '订单中心',
|
||
path: '/order',
|
||
icon: Box,
|
||
children: [
|
||
{
|
||
title: '订单信息',
|
||
path: '/order/shopOrder'
|
||
// 移除权限要求，让所有用户都能看到
|
||
}
|
||
]
|
||
},
|
||
{
|
||
title: '工具管理',
|
||
path: '/tools',
|
||
icon: DocIcon,
|
||
children: [
|
||
{
|
||
title: '卡密列表',
|
||
path: '/tools/cards/list',
|
||
permission: 'cards:list:view'
|
||
},
|
||
{
|
||
title: '活跃卡密列表',
|
||
path: '/tools/cards/activeCardsList',
|
||
permission: 'cards:active:view'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
title: '审核管理',
|
||
path: '/examine',
|
||
children: [
|
||
{
|
||
title: '违规列表',
|
||
path: '/examine/violation/list'
|
||
},
|
||
{
|
||
title: '图书审核管理',
|
||
path: '/bookAudit'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
title: '任务管理',
|
||
path: '/task',
|
||
icon: TrendCharts,
|
||
children: [
|
||
{
|
||
title: '任务列表',
|
||
path: '/task/list',
|
||
permission: 'task:list:view'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
title: '功能模块',
|
||
path: '/useModule',
|
||
children: [
|
||
{
|
||
title: '服务列表',
|
||
path: '/useModule/vas/list',
|
||
permission: 'vas:list:view'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
title: '钱包',
|
||
path: '/purse',
|
||
icon: TrendCharts,
|
||
children: [
|
||
{
|
||
title: '用户充值',
|
||
path: '/purse/userRecharge',
|
||
// permission: 'purse:userRecharge:view'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
title: '申请入驻',
|
||
path: '/audit',
|
||
children: [
|
||
{
|
||
title: '审核',
|
||
path: '/audit/audit',
|
||
}
|
||
]
|
||
},
|
||
{
|
||
title: '升级完整版',
|
||
path: '/NewUser',
|
||
children: [
|
||
{
|
||
title: '升级完整版',
|
||
path: '/NewUser'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
title: '监控中心',
|
||
path: '/monitor',
|
||
icon: Monitor,
|
||
children: [
|
||
{
|
||
title: '监控大屏',
|
||
path: '/monitor/dashboard',
|
||
permission: 'monitor:dashboard:view'
|
||
}
|
||
]
|
||
}
|
||
])
|
||
|
||
// 过滤菜单数据，只显示有权限的菜单项
|
||
const filteredMenuData = computed(() => {
|
||
const permissions = getUserPermissions()
|
||
console.log('当前用户权限:', permissions)
|
||
|
||
return menuData.value.map(menu => {
|
||
// 过滤子菜单
|
||
const filteredChildren = menu.children.filter(child => {
|
||
// 如果子菜单有权限要求，检查权限
|
||
if (child.permission) {
|
||
const hasAuth = hasPermission(child.permission)
|
||
console.log(`菜单权限检查: ${child.title} (${child.permission}) = ${hasAuth}`)
|
||
return hasAuth
|
||
}
|
||
// 没有权限要求的菜单项默认显示
|
||
return true
|
||
})
|
||
|
||
// 返回新的菜单对象，避免修改原始数据
|
||
return {
|
||
...menu,
|
||
children: filteredChildren
|
||
}
|
||
}).filter(menu => {
|
||
// 只显示有子菜单的父菜单
|
||
return menu.children.length > 0
|
||
})
|
||
})
|
||
|
||
// 监听权限变化
|
||
watch(() => getUserPermissions(), (newPermissions) => {
|
||
console.log('权限数据更新:', newPermissions)
|
||
}, { deep: true })
|
||
</script>
|
||
|
||
<style scoped>
|
||
.el-menu {
|
||
height: 100%;
|
||
border-right: none;
|
||
}
|
||
|
||
.el-menu-item.is-active {
|
||
background-color: #263445 !important;
|
||
}
|
||
|
||
:deep(.el-menu) {
|
||
border-right: none;
|
||
}
|
||
|
||
:deep(.el-sub-menu.is-opened) {
|
||
|
||
>.el-sub-menu__title,
|
||
.el-menu-item {
|
||
background-color: #1a1a1a !important;
|
||
}
|
||
}
|
||
|
||
:deep(.el-menu-item):hover,
|
||
:deep(.el-sub-menu__title):hover {
|
||
background-color: #1a1a1a !important;
|
||
}
|
||
|
||
:deep(.el-menu-item.is-active) {
|
||
background-color: #1a1a1a !important;
|
||
color: var(--el-menu-active-color);
|
||
}
|
||
|
||
:deep(.el-menu-item.is-active + .el-sub-menu .el-sub-menu__title),
|
||
:deep(.el-menu-item.is-active)~.el-sub-menu .el-sub-menu__title {
|
||
background-color: #1a1a1a !important;
|
||
}
|
||
|
||
:deep(.el-sub-menu) {
|
||
&.is-active {
|
||
>.el-sub-menu__title {
|
||
background-color: #1a1a1a !important;
|
||
}
|
||
}
|
||
}
|
||
</style>
|