63 lines
1.6 KiB
Vue
63 lines
1.6 KiB
Vue
|
<script lang="ts" setup>
|
||
|
|
import { ref, Ref } from 'vue';
|
||
|
|
import { RouteRecordRaw } from 'vue-router';
|
||
|
|
import { useI18n } from 'vue-i18n';
|
||
|
|
import { useRole } from 'src/composables/useRole';
|
||
|
|
import routes from 'src/router/routes';
|
||
|
|
|
||
|
|
const { t } = useI18n();
|
||
|
|
const { hasAny } = useRole();
|
||
|
|
|
||
|
|
const mainRoute = routes.find(route => route.path === '/');
|
||
|
|
const modules: RouteRecordRaw[] = mainRoute && mainRoute.children || []
|
||
|
|
|
||
|
|
interface MenuItem {
|
||
|
|
path: string;
|
||
|
|
title?: string;
|
||
|
|
icon?: string;
|
||
|
|
roles: string[];
|
||
|
|
}
|
||
|
|
|
||
|
|
interface ItemMeta {
|
||
|
|
title?: string;
|
||
|
|
icon?: string;
|
||
|
|
roles?: string[];
|
||
|
|
}
|
||
|
|
|
||
|
|
const items: Ref<MenuItem[]> = ref([]);
|
||
|
|
for (const module of modules) {
|
||
|
|
const item: MenuItem = {
|
||
|
|
path: module.path,
|
||
|
|
roles: []
|
||
|
|
};
|
||
|
|
|
||
|
|
if (module.meta) {
|
||
|
|
const meta: ItemMeta = module.meta;
|
||
|
|
item.title = meta.title;
|
||
|
|
item.icon = meta.icon;
|
||
|
|
item.roles = meta.roles || [];
|
||
|
|
}
|
||
|
|
|
||
|
|
items.value.push(item);
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<q-list padding>
|
||
|
|
<template v-for="route in items" :key="route.title">
|
||
|
|
<q-item
|
||
|
|
clickable
|
||
|
|
v-ripple
|
||
|
|
:to="{ path: route.path }"
|
||
|
|
v-if="!route.roles.length || hasAny(route.roles)"
|
||
|
|
active-class="text-orange"
|
||
|
|
>
|
||
|
|
<q-item-section avatar :if="route.icon">
|
||
|
|
<q-icon :name="route.icon" />
|
||
|
|
</q-item-section>
|
||
|
|
<q-item-section>{{ t(`pages.${route.title}`) }}</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
</template>
|
||
|
|
</q-list>
|
||
|
|
</template>
|