146 lines
5.1 KiB
TypeScript
146 lines
5.1 KiB
TypeScript
import type { Ref } from 'vue';
|
||
import type { MenuInst, MenuOption } from 'naive-ui';
|
||
import { createGetRoutes } from 'virtual:meta-layouts';
|
||
import { RouterLink, type RouteRecordRaw } from 'vue-router';
|
||
import IconMenuRounded from '~icons/material-symbols/menu-rounded';
|
||
|
||
export function useMetaLayoutsNMenuOptions({ menuInstRef }: { menuInstRef: Ref<MenuInst | null> }) {
|
||
// 路由转换为菜单树的辅助函数
|
||
function convertRoutesToNMenuOptions(routes: Readonly<RouteRecordRaw[]>): MenuOption[] {
|
||
const menuMap = new Map<string, MenuOption>();
|
||
const rootMenus: MenuOption[] = [];
|
||
|
||
// 过滤和排序路由
|
||
const validRoutes = routes
|
||
.filter((route) => {
|
||
// 过滤掉不需要显示的路由
|
||
if (route.meta?.hideInMenu === true || route.meta?.layout === false) {
|
||
return false;
|
||
}
|
||
// 过滤掉通配符路径
|
||
if (route.path.includes('*')) {
|
||
return false;
|
||
}
|
||
// 根据环境变量判断是否显示 /demos 开头的路由
|
||
if (route.path.startsWith('/demos') && import.meta.env.VITE_MENU_SHOW_DEMOS !== 'true') {
|
||
return false;
|
||
}
|
||
return true;
|
||
})
|
||
// 排序路由，确保父路由总是在子路由之前，同级路由则根据 `meta.order` 排序
|
||
.sort((a: RouteRecordRaw, b: RouteRecordRaw) => {
|
||
const pathA = a.path;
|
||
const pathB = b.path;
|
||
const segmentsA = pathA.split('/').filter(Boolean);
|
||
const segmentsB = pathB.split('/').filter(Boolean);
|
||
const parentAPath = `/${segmentsA.slice(0, -1).join('/')}`;
|
||
const parentBPath = `/${segmentsB.slice(0, -1).join('/')}`;
|
||
|
||
// 如果不是同级路由，则按路径排序，确保父路由在前
|
||
if (parentAPath !== parentBPath) {
|
||
return pathA.localeCompare(pathB);
|
||
}
|
||
|
||
// 同级路由，处理 `meta.order`
|
||
const orderA = a.meta?.order;
|
||
const orderB = b.meta?.order;
|
||
const hasOrderA = orderA !== undefined;
|
||
const hasOrderB = orderB !== undefined;
|
||
|
||
// 当一个有 order 而另一个没有时，有 order 的排在前面
|
||
if (hasOrderA !== hasOrderB) {
|
||
return hasOrderA ? -1 : 1;
|
||
}
|
||
|
||
// 当两个都有 order 时，按 order 值升序排序
|
||
if (hasOrderA && hasOrderB) {
|
||
const orderDiff = orderA - orderB;
|
||
if (orderDiff !== 0) {
|
||
return orderDiff;
|
||
}
|
||
}
|
||
|
||
// order 相同或都没有 order，按路径字母顺序排序
|
||
return pathA.localeCompare(pathB);
|
||
});
|
||
|
||
// 构建菜单树
|
||
for (const route of validRoutes) {
|
||
const pathSegments = route.path.split('/').filter(Boolean);
|
||
const routeName = route.name as string;
|
||
const text = te(routeName) ? t(routeName) : route.meta?.title || routeName;
|
||
|
||
const menuOption: MenuOption = {
|
||
label: () =>
|
||
route.meta?.link === false ? text : <RouterLink to={route}>{text}</RouterLink>,
|
||
key: route.path,
|
||
icon: () => <IconMenuRounded style="width: 1em; height: 1em;" />,
|
||
};
|
||
|
||
// 如果是根路径或只有一级路径，直接添加到根菜单
|
||
if (pathSegments.length === 0 || pathSegments.length === 1) {
|
||
rootMenus.push(menuOption);
|
||
menuMap.set(route.path, menuOption);
|
||
} else {
|
||
// 多级路径，需要创建或找到父菜单
|
||
let currentPath = '';
|
||
for (let i = 0; i < pathSegments.length - 1; i++) {
|
||
currentPath += `/${pathSegments[i]}`;
|
||
}
|
||
|
||
// 将当前菜单项添加到父菜单
|
||
const parentPath = currentPath;
|
||
const parent = menuMap.get(parentPath);
|
||
if (parent) {
|
||
if (!parent.children) {
|
||
parent.children = [];
|
||
}
|
||
parent.children.push(menuOption);
|
||
} else {
|
||
consola.warn(`未找到父菜单项: ${parentPath}，无法将子菜单项添加到其下。`);
|
||
}
|
||
|
||
menuMap.set(route.path, menuOption);
|
||
}
|
||
}
|
||
|
||
return rootMenus;
|
||
}
|
||
|
||
const router = useRouter();
|
||
|
||
const { t, te } = useI18n({
|
||
inheritLocale: true,
|
||
useScope: 'local',
|
||
missing: (locale, key) => {
|
||
consola.warn(`菜单翻译缺失: locale=${locale}, key=${key}`);
|
||
return key;
|
||
},
|
||
fallbackRoot: true,
|
||
messages: locales4RouteMessages,
|
||
});
|
||
|
||
// 获取路由表但是不包含布局路由
|
||
const routes = createGetRoutes(router)();
|
||
|
||
const options = computed(() => convertRoutesToNMenuOptions(routes));
|
||
const selectedKey = ref('');
|
||
|
||
watch(
|
||
() => router.currentRoute.value.path,
|
||
(newPath) => {
|
||
selectedKey.value = newPath;
|
||
menuInstRef.value?.showOption(newPath); // 展开菜单，确保设定的元素被显示，如果不传入 key 会展示当前选中元素
|
||
},
|
||
{ immediate: true },
|
||
);
|
||
|
||
// console.debug('原始路由:', JSON.stringify(routes, null, 0));
|
||
// console.debug('转换后的菜单:', JSON.stringify(menuOptions.value, null, 0));
|
||
return {
|
||
options,
|
||
selectedKey,
|
||
// expanded-keys // 展开的子菜单标识符数组，如果设定了，菜单的展开将会进入受控状态，default-expanded-keys 不会生效
|
||
};
|
||
}
|