80 lines
2.2 KiB
Vue
80 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import type { MenuItem } from 'primevue/menuitem';
|
|
|
|
import { createGetRoutes } from '@/plugins/router';
|
|
|
|
const router = useRouter();
|
|
|
|
type MenuItemWithRoute = MenuItem & { routeName?: string };
|
|
const menuItems = computed(() => {
|
|
let flatArray: MenuItemWithRoute[] = createGetRoutes(router)()
|
|
.filter((route) => !route.path.includes('/:'))
|
|
.filter((route) => !route.meta.hidden)
|
|
.map((route) => ({
|
|
id: route.path,
|
|
label: route.meta.title || `${(route.name as string) || route.path}`,
|
|
routeName: route.name as string,
|
|
}));
|
|
|
|
flatArray = flatArray.map((item /* index */) => {
|
|
let id = item.id;
|
|
if (flatArray.some((item) => item.id.startsWith(`${id}/`))) {
|
|
id = `${id}/index`;
|
|
}
|
|
// 去掉最前面的 /
|
|
id = id.replace(/^\//, '');
|
|
|
|
let parentId = id.replace(/\/[^/]+$/, '');
|
|
if (parentId === id) {
|
|
parentId = '_ROOT_';
|
|
}
|
|
return {
|
|
...item,
|
|
parentId,
|
|
};
|
|
});
|
|
const groupItems = flatArray.reduce(
|
|
(acc, flatArrItem) => {
|
|
if (
|
|
!acc.some((item) => item.id === flatArrItem.parentId) && //
|
|
flatArrItem.parentId !== '_ROOT_'
|
|
) {
|
|
let groupItemParentId = flatArrItem.parentId.replace(/\/[^/]+$/, '');
|
|
if (groupItemParentId === flatArrItem.parentId) groupItemParentId = '_ROOT_';
|
|
acc.push({
|
|
id: flatArrItem.parentId,
|
|
label: `Group ${flatArrItem.parentId}`,
|
|
parentId: groupItemParentId,
|
|
});
|
|
}
|
|
return acc;
|
|
},
|
|
[] as Record<string, string>[],
|
|
);
|
|
console.debug(`groupItems :>> `, groupItems);
|
|
const tree = arrayToTree(flatArray.concat(groupItems), { id: 'id', parentId: 'parentId', rootId: '_ROOT_' });
|
|
|
|
// 递归把 children 改为 items
|
|
function _convertChildrenToItems(tree: MenuItemWithRoute[]) {
|
|
return tree.map((item) => {
|
|
if (item.children.length) {
|
|
item.items = _convertChildrenToItems(item.children);
|
|
} else {
|
|
item.command = (/* event */) => {
|
|
router.push({ name: item.routeName as never });
|
|
};
|
|
}
|
|
delete item.children;
|
|
return item;
|
|
});
|
|
}
|
|
return _convertChildrenToItems(tree);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<PanelMenu :model="menuItems" />
|
|
</template>
|
|
|
|
<style lang="scss" scoped></style>
|