432 lines
10 KiB
Vue
432 lines
10 KiB
Vue
<template>
|
||
<aside>
|
||
<div class="sidebar-header">
|
||
<div class="logo">
|
||
<img src="@/assets/images/logo.webp" alt="logo" :router="true" />
|
||
<span>Admin System</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 菜单区域 -->
|
||
<el-menu class="menu" :unique-opened="true" :default-active="activeMenu" router>
|
||
<template v-for="menu in staticMenuList" :key="menu.id">
|
||
<!-- 无子菜单 -->
|
||
<el-menu-item v-if="!menu.children || menu.children.length === 0" :index="menu.path">
|
||
<el-icon>
|
||
<component :is="iconMap[menu.icon]" />
|
||
</el-icon>
|
||
<template #title>{{ menu.label }}</template>
|
||
</el-menu-item>
|
||
|
||
<el-sub-menu v-else :index="menu.path">
|
||
<template #title>
|
||
<el-icon>
|
||
<component :is="iconMap[menu.icon]" />
|
||
</el-icon>
|
||
<span>{{ menu.label }}</span>
|
||
</template>
|
||
<el-menu-item v-for="subMenu in menu.children" :key="subMenu.id" :index="subMenu.path">
|
||
<el-icon v-if="subMenu.icon">
|
||
<component :is="iconMap[subMenu.icon]" />
|
||
</el-icon>
|
||
<template #title>{{ subMenu.label }}</template>
|
||
</el-menu-item>
|
||
</el-sub-menu>
|
||
</template>
|
||
</el-menu>
|
||
</aside>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import {
|
||
HomeFilled,
|
||
List,
|
||
UserFilled,
|
||
Platform,
|
||
BellFilled,
|
||
GoodsFilled,
|
||
WarningFilled,
|
||
Tools,
|
||
} from '@element-plus/icons-vue'
|
||
|
||
//获取格式化后的菜单列表
|
||
import { useUserStore } from '@/stores/modules/user'
|
||
|
||
const route = useRoute()
|
||
const userStore = useUserStore()
|
||
const menuList = ref<any[]>([])
|
||
|
||
// 计算当前激活的菜单 index（取路由 fullPath 作为激活标识）
|
||
const activeMenu = computed(() => {
|
||
return route.fullPath // 直接使用完整路径，和你的菜单 path 保持一致
|
||
})
|
||
// 组件挂载时异步加载菜单
|
||
onMounted(async () => {
|
||
menuList.value = userStore.sideMenu || []
|
||
})
|
||
|
||
//图标映射表
|
||
const iconMap: Record<string, any> = {
|
||
HomeFilled,
|
||
List,
|
||
UserFilled,
|
||
Platform,
|
||
BellFilled,
|
||
GoodsFilled,
|
||
WarningFilled,
|
||
Tools,
|
||
}
|
||
|
||
// 菜单假数据，具体要根据实际菜单数据进行调整
|
||
import type { ElMenuItem } from '@/utils/menuFormat'
|
||
|
||
// 抽离后的菜单数据（完全匹配模板中的结构和配置）
|
||
const staticMenuList = ref<ElMenuItem[]>([
|
||
// 首页
|
||
{
|
||
id: 1,
|
||
label: '首页',
|
||
path: 'dashboard', // 对应 el-menu-item 的 index="dashboard"
|
||
icon: 'HomeFilled', // 对应 <HomeFilled /> 图标
|
||
},
|
||
// 模板配置（子菜单）
|
||
// {
|
||
// id: 2,
|
||
// label: '模板配置',
|
||
// path: '2', // 对应 el-sub-menu 的 index="2"
|
||
// icon: 'List', // 对应 <List /> 图标
|
||
// children: [
|
||
// {
|
||
// id: 21,
|
||
// label: '头寸模板',
|
||
// path: '2-1', // 对应 el-menu-item 的 index="2-1"
|
||
// icon: ''
|
||
// // 二级菜单无图标（模板中未设置）
|
||
// }
|
||
// ]
|
||
// },
|
||
// 账户管理（子菜单）
|
||
{
|
||
id: 3,
|
||
label: '账户管理',
|
||
path: 'account', // 对应 el-sub-menu 的 index="account"
|
||
icon: 'UserFilled', // 对应 <UserFilled /> 图标
|
||
children: [
|
||
{
|
||
id: 31,
|
||
label: '客户管理',
|
||
path: '/account/client', // index="client"
|
||
icon: '',
|
||
},
|
||
{
|
||
id: 32,
|
||
label: '代理管理',
|
||
path: '/account/agentList', // index="3-2"
|
||
icon: '',
|
||
},
|
||
{
|
||
id: 33,
|
||
label: '做市商管理',
|
||
path: '/account/market-maker', // index="3-3"
|
||
icon: '',
|
||
},
|
||
{
|
||
id: 34,
|
||
label: '档案管理',
|
||
path: '/account/archives', // index="3-4"
|
||
icon: '',
|
||
},
|
||
{
|
||
id: 35,
|
||
label: '账号管理',
|
||
path: '/account/accountDetail', // index="3-5"
|
||
icon: '',
|
||
},
|
||
],
|
||
},
|
||
// 交易管理（子菜单）
|
||
{
|
||
id: 4,
|
||
label: '交易管理',
|
||
path: '4', // index="4"
|
||
icon: 'Platform', // 对应 <Platform /> 图标
|
||
children: [
|
||
{
|
||
id: 41,
|
||
label: '品种',
|
||
path: '/trade/variety', // index="4-1"
|
||
icon: '',
|
||
},
|
||
{
|
||
id: 42,
|
||
label: '交易时间',
|
||
path: '/trade/group', // index="4-2"
|
||
icon: '',
|
||
},
|
||
{
|
||
id: 43,
|
||
label: '持仓统计',
|
||
path: '/trade/positionStat', // index="4-3"
|
||
icon: '',
|
||
},
|
||
{
|
||
id: 44,
|
||
label: '历史交易',
|
||
path: '/trade/historyTrade', // index="4-4"
|
||
icon: '',
|
||
},
|
||
{
|
||
id: 45,
|
||
label: '交易软件',
|
||
path: '/trade/tradeSoftware', // index="4-5"
|
||
icon: '',
|
||
},
|
||
{
|
||
id: 46,
|
||
label: '节假日时间',
|
||
path: '/trade/time', // index="4-3"
|
||
icon: '',
|
||
},
|
||
],
|
||
},
|
||
// 公告管理
|
||
{
|
||
id: 5,
|
||
label: '公告管理',
|
||
path: '/notice', // index="5"
|
||
icon: 'BellFilled', // 对应 <BellFilled /> 图标
|
||
},
|
||
// 资金管理（子菜单）
|
||
{
|
||
id: 6,
|
||
label: '资金管理',
|
||
path: '6', // index="6"
|
||
icon: 'GoodsFilled', // 对应 <GoodsFilled /> 图标
|
||
children: [
|
||
// {
|
||
// id: 61,
|
||
// label: '存款审核',
|
||
// path: '/funding/deposit', // index="6-1"
|
||
// icon: ''
|
||
// },
|
||
// {
|
||
// id: 62,
|
||
// label: '取款审核',
|
||
// path: '/funding/withdrawal', // index="6-2"
|
||
// icon: ''
|
||
// },
|
||
// {
|
||
// id: 63,
|
||
// label: '取款明细',
|
||
// path: '/funding/withdrawalDetail', // index="6-3"
|
||
// icon: ''
|
||
// },
|
||
// {
|
||
// id: 64,
|
||
// label: '存款明细',
|
||
// path: '/funding/depositDetail', // index="6-4"
|
||
// icon: ''
|
||
// },
|
||
{
|
||
id: 64,
|
||
label: '转账',
|
||
path: '/funding/transfer', // index="6-4"
|
||
icon: '',
|
||
},
|
||
{
|
||
id: 65,
|
||
label: '转账明细',
|
||
path: '/funding/transferDetail', // index="6-5"
|
||
icon: '',
|
||
},
|
||
{
|
||
id: 66,
|
||
label: '资金明细',
|
||
path: '/funding/fundDetail', // index="6-6"
|
||
icon: '',
|
||
},
|
||
// {
|
||
// id: 66,
|
||
// label: '资金流水',
|
||
// path: '/funding/flowDetail', // index="6-6"
|
||
// icon: ''
|
||
// },
|
||
// {
|
||
// id: 67,
|
||
// label: '收款账户列表',
|
||
// path: '/funding/receiverAccount', // index="6-7"
|
||
// icon: ''
|
||
// },
|
||
// {
|
||
// id: 68,
|
||
// label: '存款渠道',
|
||
// path: '/funding/depositChannel', // index="6-8"
|
||
// icon: ''
|
||
// }
|
||
],
|
||
},
|
||
// 系统管理（子菜单）
|
||
{
|
||
id: 7,
|
||
label: '系统管理',
|
||
path: 'system', // index="7"
|
||
icon: 'Tools', // 对应 <Tools /> 图标
|
||
children: [
|
||
{
|
||
id: 71,
|
||
label: '菜单管理',
|
||
path: '/system/menu', // index="6-1"（模板中此处 index 写的是 6-1，保留原配置）
|
||
icon: '',
|
||
},
|
||
{
|
||
id: 72,
|
||
label: '角色管理',
|
||
path: '/system/role', // index="6-2"（模板中此处 index 写的是 6-2，保留原配置）
|
||
icon: '',
|
||
},
|
||
{
|
||
id: 73,
|
||
label: '系统设置',
|
||
path: '/system/setting', // index="6-2"（模板中此处 index 写的是 6-2，保留原配置）
|
||
icon: '',
|
||
},
|
||
],
|
||
},
|
||
// 风控管理
|
||
{
|
||
id: 8,
|
||
label: '风控管理',
|
||
path: '/risk', // index="8"
|
||
icon: 'WarningFilled', // 对应 <WarningFilled /> 图标
|
||
},
|
||
|
||
// 资金管理（子菜单）
|
||
// {
|
||
// id: 9,
|
||
// label: '资金管理',
|
||
// path: 'funding', // index="funding"
|
||
// icon: 'GoodsFilled', // 对应 <GoodsFilled /> 图标
|
||
// children: [
|
||
// //存款/取款/审核记录/ 提现记录/ 充值记录暂时没有
|
||
// //资金明细
|
||
|
||
// ]
|
||
// },
|
||
// 交易统计（子菜单）
|
||
// {
|
||
// id: 10,
|
||
// label: '交易统计归交易管理',
|
||
// path: 'trade', // index="trade"
|
||
// icon: 'ChartBarFilled', // 对应 <ChartBarFilled /> 图标
|
||
// children: [
|
||
// // 持仓统计是辉哥
|
||
// //历史交易
|
||
// //交易软件
|
||
// ]
|
||
// },
|
||
// 账户管理（子菜单）
|
||
// {
|
||
// id: 11,
|
||
// label: '账户管理',
|
||
// path: 'account', // index="account"
|
||
// icon: 'UserFilled', // 对应 <UserFilled /> 图标
|
||
// children: [
|
||
// // 档案管理
|
||
// // 账户管理
|
||
// ]
|
||
// },
|
||
// 个性化交易（子菜单）
|
||
{
|
||
id: 12,
|
||
label: '个性化交易',
|
||
path: 'personalized', // index="personalized"
|
||
icon: 'SettingFilled', // 对应 <SettingFilled /> 图标
|
||
children: [
|
||
// 排行榜放在了app中
|
||
// 跟单记录
|
||
{
|
||
id: 121,
|
||
label: '跟单记录',
|
||
path: '/personalized/followRecord', // index="12-1"
|
||
icon: '',
|
||
},
|
||
// 带单记录
|
||
{
|
||
id: 122,
|
||
label: '带单记录',
|
||
path: '/personalized/leadRecord', // index="12-2"
|
||
icon: '',
|
||
},
|
||
],
|
||
},
|
||
// 代理管理（子菜单）
|
||
{
|
||
id: 13,
|
||
label: '代理管理',
|
||
path: 'agent', // index="agent"
|
||
icon: 'UserFilled', // 对应 <UserFilled /> 图标
|
||
children: [
|
||
//客户列表
|
||
{
|
||
id: 132,
|
||
label: '客户列表',
|
||
path: '/agent/customerList', // index="13-2"
|
||
icon: '',
|
||
},
|
||
//客户交易订单
|
||
{
|
||
id: 133,
|
||
label: '客户交易订单',
|
||
path: '/agent/customerTradeOrder', // index="13-3"
|
||
icon: '',
|
||
},
|
||
//客户资金流水
|
||
{
|
||
id: 135,
|
||
label: '客户资金流水',
|
||
path: '/agent/customerCapitalFlow', // index="13-5"
|
||
icon: '',
|
||
},
|
||
],
|
||
},
|
||
// 通知管理（子菜单）
|
||
{
|
||
id: 14,
|
||
label: '通知管理',
|
||
path: 'notification', // index="notification"
|
||
icon: 'NotificationFilled', // 对应 <NotificationFilled /> 图标
|
||
},
|
||
])
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
aside {
|
||
.sidebar-header {
|
||
height: 60px;
|
||
border-bottom: solid 1px var(--el-menu-border-color);
|
||
padding: 0 10px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.logo {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
img {
|
||
width: 100px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.menu {
|
||
height: 100%;
|
||
border: none;
|
||
|
||
:deep(.el-menu-item.is-active) {
|
||
background-color: var(--el-menu-hover-bg-color);
|
||
}
|
||
}
|
||
}
|
||
</style>
|