feat: 菜单添加图标

src/utils/menuUtils.tsx

@@ -1,6 +1,6 @@
-import * as IconPark from "@icon-park/react";
-import { Spin } from "antd";
-import React from "react";
+import * as IconPark from '@icon-park/react';
+import { Spin } from 'antd';
+import React from 'react';
 
 // 动态构造 iconMap
 const iconMap: Record<string, React.ReactNode> = {};
@@ -10,8 +10,8 @@ const allIcons = Object.keys(IconPark);
 allIcons.forEach((iconName) => {
   // 排除不需要的属性（如默认导出等）
   if (
-    iconName !== "default" &&
-    typeof IconPark[iconName as keyof typeof IconPark] === "function"
+    iconName !== 'default' &&
+    typeof IconPark[iconName as keyof typeof IconPark] === 'function'
   ) {
     const IconComponent = IconPark[
       iconName as keyof typeof IconPark
@@ -19,7 +19,8 @@ allIcons.forEach((iconName) => {
     iconMap[iconName] = <IconComponent theme="outline" size="16" />;
   }
 });
-import type { MenuVO } from "@/services/system/menu";
+
+import type { MenuVO } from '@/services/system/menu';
 
 export const loopMenuItem = (menus: MenuVO[], pId: number | string): any[] => {
   return menus.map((item) => {
@@ -28,7 +29,7 @@ export const loopMenuItem = (menus: MenuVO[], pId: number | string): any[] => {
       // 防止配置了路由，但本地暂未添加对应的页面，产生的错误
       Component = React.lazy(() => {
         const importComponent = () => import(`@/pages/${item.component}`);
-        const import404 = () => import("@/pages/404");
+        const import404 = () => import('@/pages/404');
         return importComponent().catch(import404);
       });
     }
@@ -36,18 +37,23 @@ export const loopMenuItem = (menus: MenuVO[], pId: number | string): any[] => {
     const routeItem: any = {
       path: item.path,
       name: item.name,
-      icon: "",
       id: item.id,
+      icon: '',
       parentId: pId,
       hideInMenu: !item.visible,
       children: [],
     };
 
+    // 如果菜单项有图标且图标存在于图标映射中，则添加图标
+    if (item.icon && iconMap[item.icon]) {
+      routeItem.icon = iconMap[item.icon];
+    }
+
     // 只有当 Component 存在时才添加 element 属性
     if (Component) {
       routeItem.element = (
         <React.Suspense
-          fallback={<Spin style={{ width: "100%", height: "100%" }} />}
+          fallback={<Spin style={{ width: '100%', height: '100%' }} />}
         >
           <Component />
         </React.Suspense>