51 lines
1.4 KiB
Vue
51 lines
1.4 KiB
Vue
<script setup>
|
|
import { useRouter } from 'vue-router'
|
|
import { userStore } from '@/stores/user'
|
|
|
|
const store = userStore()
|
|
const router = useRouter()
|
|
|
|
// 菜单点击事件
|
|
const menuClick = (menu) => {
|
|
router.push(menu.path)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="sider-menu">
|
|
<div class="logo"></div>
|
|
<a-menu theme="dark" mode="inline" v-model:selectedKeys="store.selectKey">
|
|
<template v-for="menu in store.userMenus" :key="menu.id">
|
|
<!-- 0 目录 顶层菜单 -->
|
|
<template v-if="menu.type === 0">
|
|
<a-sub-menu :key="menu.id">
|
|
<template #icon>
|
|
<component :is="$loadIconCpn(menu.meta.icon)"></component>
|
|
</template>
|
|
<template #title>{{ menu.name }}</template>
|
|
<!-- 1 组件 子菜单项 -->
|
|
<template v-for="sub in menu.children" :key="sub.id">
|
|
<a-menu-item @click="menuClick(sub)">
|
|
<template #icon>
|
|
<component :is="$loadIconCpn(sub.meta.icon)"></component>
|
|
</template>
|
|
<span>{{ sub.name }}</span>
|
|
</a-menu-item>
|
|
</template>
|
|
</a-sub-menu>
|
|
</template>
|
|
</template>
|
|
</a-menu>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.logo {
|
|
display: flex;
|
|
height: 32px;
|
|
background: rgba(255, 255, 255, 0.3) url('@/assets/img/fastapi.svg');
|
|
margin: 16px;
|
|
background-size: 100% 100%;
|
|
}
|
|
</style>
|