/** * 菜单数据转换工具,将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, name, 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)) }