98 lines
3.1 KiB
Vue
98 lines
3.1 KiB
Vue
<template>
|
|
<aside class="w-60 bg-base-100 border-r border-base-200">
|
|
<div class="flex items-center p-4 outline-none select-none">
|
|
<div class="w-12 h-12 rounded-full">
|
|
<img src='@/assets/logo.svg' class="">
|
|
</div>
|
|
<div class="p-0 text-2xl font-bold text-center">OpenTeam</div>
|
|
</div>
|
|
|
|
|
|
<ul class="menu p-4 w-60 min-h-full bg-base-100 text-base-content">
|
|
<li v-for="item in menuItems" :key="item.label">
|
|
<template v-if="item.type === 'link'">
|
|
<router-link :to="item.to" :class="{ 'active': isActive(item.to) }">
|
|
<component :is="item.icon" class="w-4" />
|
|
{{ item.label }}
|
|
|
|
</router-link>
|
|
</template>
|
|
<template v-else-if="item.type === 'title'">
|
|
<span class="menu-title">
|
|
<span>{{ item.label }}</span>
|
|
</span>
|
|
</template>
|
|
<template v-else-if="item.type === 'submenu'">
|
|
<details :open="item.open">
|
|
<summary>
|
|
<component :is="item.icon" class="w-4" />
|
|
{{ item.label }}
|
|
<div v-if="item.badge" class="badge badge-sm">{{ item.badge }}</div>
|
|
</summary>
|
|
<ul>
|
|
<li v-for="subItem in item.children" :key="subItem.label">
|
|
<router-link :to="subItem.to" :class="{ 'active': isActive(subItem.to) }">
|
|
<component :is="subItem.icon" class="w-4" />
|
|
{{ subItem.label }}
|
|
</router-link>
|
|
</li>
|
|
</ul>
|
|
</details>
|
|
</template>
|
|
</li>
|
|
</ul>
|
|
</aside>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
LayoutDashboardIcon,
|
|
ShieldPlus,
|
|
UsersRoundIcon,
|
|
KeyRoundIcon,
|
|
MessageSquareIcon,
|
|
SettingsIcon,
|
|
UserIcon,
|
|
CommandIcon,
|
|
BracesIcon,
|
|
} from 'lucide-vue-next'
|
|
import { ref, reactive, onMounted ,computed} from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import {routes,generateMenuItemsFromRoutes}from '@/utils/router_menu.js'
|
|
import { useAuthStore } from '@/stores/auth.js';
|
|
|
|
const authStore = useAuthStore();
|
|
const userrole = computed(() => {
|
|
const user = authStore.user;
|
|
return user ? user.role : 0;
|
|
});
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
// 判断当前路由是否激活菜单项
|
|
const isActive = (path) => {
|
|
return route.path === path;
|
|
// return router.currentRoute.value.fullPath.startsWith(path);
|
|
};
|
|
|
|
let menuItems = reactive([
|
|
{ type: 'link', label: 'Overview', to: '/dashboard/overview', icon: LayoutDashboardIcon },
|
|
{ type: 'title', label: 'Apps' },
|
|
{ type: 'link', label: 'Tokens', to: '/dashboard/tokens', icon: BracesIcon },
|
|
{
|
|
type: 'submenu', label: 'Manager', icon: CommandIcon, open: true, badge: 'Admin',
|
|
children: [
|
|
{ label: 'Users', to: '/dashboard/manager/users', icon: UsersRoundIcon },
|
|
{ label: 'ApiKeys', to: '/dashboard/manager/keys', icon: KeyRoundIcon },
|
|
],
|
|
},
|
|
{
|
|
type: 'submenu', label: 'Settings', icon: SettingsIcon,open: false,
|
|
children: [
|
|
{ label: 'Profile', to: '/dashboard/settings/profile', icon: UserIcon },
|
|
]
|
|
},
|
|
]);
|
|
menuItems = computed(() => generateMenuItemsFromRoutes(routes, userrole.value));
|
|
|
|
</script> |