/** * 菜单数据转换工具,将API返回的菜单数据转换为前端使用的格式 */ // API返回的菜单项类型 export interface ApiMenuItem { menuId: string; parentId: string; menuName: string; menuType: string; // 'catalog' | 'route' orderNum: number; visible: string; children?: ApiMenuItem[]; [key: string]: any; // 其他可能的字段 } // 前端需要的菜单项类型 export interface FrontendMenuItem { id: number | string; parentId: number | string; title: string; type: number; // 1表示目录,2表示菜单 path: string; name: string; component: string; icon: string; isExternal: boolean; isCache: boolean; isHidden: boolean; sort: number; children?: FrontendMenuItem[]; } /** * 转换菜单类型: catalog -> 1, route -> 2 */ const convertMenuType = (menuType: string): number => { switch (menuType.toLowerCase()) { case 'catalog': return 1; case 'route': return 2; case 'button': return 3; default: // 默认为菜单类型 return 2; } } /** * 是否隐藏: '0' -> false, '1' -> true */ const convertVisible = (visible: string): boolean => { return visible === '1'; // '1'为隐藏,'0'为显示 } /** * 转换单个菜单项 */ const convertMenuItem = (apiItem: ApiMenuItem): FrontendMenuItem => { // 根据menuType生成默认的path和component let path = ''; let component = ''; let name = ''; // 简单的名称生成,去掉空格,保持首字母大写,非首字母小写 const generateName = (menuName: string): string => { return menuName.replace(/\s+/g, '') .replace(/^./, (match) => match.toUpperCase()) .replace(/[\u4e00-\u9fa5]/g, ''); // 移除中文字符 }; if (apiItem.menuType.toLowerCase() === 'catalog') { path = `/${apiItem.menuName.toLowerCase().replace(/\s+/g, '-')}`; component = 'Layout'; name = generateName(apiItem.menuName); } else { // 假设route类型菜单都在某个catalog下 const parentName = apiItem.menuName.toLowerCase().replace(/\s+/g, '-'); path = `/system/${parentName}`; component = `system/${parentName}/index`; name = `System${generateName(apiItem.menuName)}`; } return { id: apiItem.menuId, parentId: apiItem.parentId, title: apiItem.menuName, type: convertMenuType(apiItem.menuType), path: path, name: name, component: component, icon: 'settings', // 默认图标 isExternal: false, isCache: false, isHidden: convertVisible(apiItem.visible), sort: apiItem.orderNum || 0, children: apiItem.children ? apiItem.children.map(child => convertMenuItem(child)) : [] }; } /** * 转换API返回的菜单数据为前端需要的格式 */ export const convertMenuData = (apiMenuData: ApiMenuItem[]): FrontendMenuItem[] => { return apiMenuData.map(item => convertMenuItem(item)); }