125 lines
3.3 KiB
Vue
125 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import { createGetRoutes, setupLayoutsResult } from '@/plugins/router';
|
|
import type { MenuItem } from 'primevue/menuitem';
|
|
import { routes } from 'vue-router/auto-routes';
|
|
const router = useRouter();
|
|
|
|
const menuItems = computed(() => {
|
|
let flatArray: MenuItem[] = createGetRoutes(router)()
|
|
.filter((route) => !route.path.includes('/:'))
|
|
.map((route) => ({
|
|
id: route.path,
|
|
label: `${(route.name as string) || route.path}`,
|
|
}));
|
|
|
|
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: MenuItem[]): MenuItem[] {
|
|
return tree.map((item) => {
|
|
if (item.children.length) {
|
|
item.items = _convertChildrenToItems(item.children);
|
|
} else {
|
|
item.command = (event) => {
|
|
router.push({ name: item.label as never });
|
|
};
|
|
}
|
|
delete item.children;
|
|
return item;
|
|
});
|
|
}
|
|
return _convertChildrenToItems(tree);
|
|
});
|
|
|
|
const list = [
|
|
{
|
|
title: 'routes',
|
|
json: routes,
|
|
},
|
|
{
|
|
title: 'setupLayoutsResult',
|
|
json: setupLayoutsResult,
|
|
},
|
|
{
|
|
title: 'createGetRoutes(router)()',
|
|
json: createGetRoutes(router)().map((route) => ({
|
|
...route,
|
|
instances: undefined,
|
|
leaveGuards: undefined,
|
|
updateGuards: undefined,
|
|
enterCallbacks: undefined,
|
|
components: undefined,
|
|
})),
|
|
},
|
|
{
|
|
title: 'router.getRoutes()',
|
|
json: router.getRoutes().map((route) => ({
|
|
...route,
|
|
instances: undefined,
|
|
leaveGuards: undefined,
|
|
updateGuards: undefined,
|
|
enterCallbacks: undefined,
|
|
components: undefined,
|
|
})),
|
|
},
|
|
{
|
|
title: 'menuItems',
|
|
json: menuItems.value,
|
|
},
|
|
];
|
|
</script>
|
|
<template>
|
|
<Tabs value="MenuTest" scrollable>
|
|
<TabList>
|
|
<Tab value="MenuTest"> MenuTest </Tab>
|
|
<Tab v-for="item in list" :key="item.title" :value="item.title">{{ item.title }}</Tab>
|
|
</TabList>
|
|
<TabPanels>
|
|
<TabPanel value="MenuTest">
|
|
<PanelMenu :model="menuItems" />
|
|
</TabPanel>
|
|
<TabPanel v-for="item in list" :key="item.title" :value="item.title">
|
|
<pre>{{ item.json }}</pre>
|
|
</TabPanel>
|
|
</TabPanels>
|
|
</Tabs>
|
|
</template>
|
|
|
|
<style scoped></style>
|