Industrial-image-management-system---web/src/utils/menuConverter.ts

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