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: 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));
}