feat: ✨ 添加用户管理模块,修改meta参数,支持自定义图标大小

apps/admin/src/layout/menu/index.tsx

@@ -44,21 +44,21 @@ const LayoutMenu = (props: any) => {
     setOpenKeys(getOpenKeys(pathname));
   }, [pathname]);
 
-  const addIcon = (icon?: string) => {
+  const addIcon = (icon?: string, iconSize?: number) => {
     if (!icon) return null;
     return (
       <span className='anticon'>
-        <SvgIcon name={icon} size={16} />
+        <SvgIcon name={icon} size={iconSize || 16} />
       </span>
     );
   };
 
   const getMenuItem = (data: AppMenu[], list: MenuItem[] = []) => {
     data.forEach((item: AppMenu) => {
       if (!item?.children?.length) {
-        return list.push(getItem(item.name, item.path, addIcon(item.icon)));
+        return list.push(getItem(item.name, item.path, addIcon(item.icon, item.iconSize)));
       }
-      list.push(getItem(item.name, item.path, addIcon(item.icon), getMenuItem(item.children)));
+      list.push(getItem(item.name, item.path, addIcon(item.icon, item.iconSize), getMenuItem(item.children)));
     });
     return list;
   };

apps/admin/src/router/guard/guardRoute.tsx

@@ -20,5 +20,5 @@ export const GuardRoute = ({ children }: { children: ReactNode }) => {
     return <Navigate to={`/login?redirect=${pathname}`} replace />;
   }
 
-  return children;
+  return <>{children}</>;
 };

apps/admin/src/router/guard/index.tsx

@@ -3,7 +3,7 @@ import { BasicLayout } from '@/layout';
 import { GuardRoute } from './guardRoute';
 
 export const LayoutGuard = () => (
-    <GuardRoute>
-      <BasicLayout />
-    </GuardRoute>
+  <GuardRoute>
+    <BasicLayout />
+  </GuardRoute>
 );

apps/admin/src/router/routes/user.tsx

@@ -0,0 +1,38 @@
+import { lazy } from 'react';
+
+import { LazyLoad } from '@/components/LazyLoad';
+
+import { LayoutGuard } from '../guard';
+
+import type { RouteObject } from '../types';
+
+// user module page
+const UserRoute: RouteObject = {
+  path: '/user',
+  element: <LayoutGuard />,
+  meta: {
+    title: '用户管理',
+    icon: 'ic_user',
+    orderNo: 2,
+    iconSize: 20,
+  },
+  children: [
+    {
+      path: 'user-list',
+      element: LazyLoad(lazy(() => import('@/views/user/list'))),
+      meta: {
+        title: '用户列表',
+        key: 'userList',
+      },
+    },
+    {
+      path: 'add-user',
+      element: LazyLoad(lazy(() => import('@/views/user/addUser'))),
+      meta: {
+        title: '添加用户',
+        key: 'addUser',
+      },
+    },
+  ],
+};
+export default UserRoute;

apps/admin/src/router/types.ts

@@ -2,36 +2,38 @@ import type { ReactNode } from 'react';
 import type { LoaderFunction } from 'react-router-dom';
 
 export interface MetaProps {
-  title: string
-  key?: string
-  icon?: string
-  affix?: boolean
-  keepAlive?: boolean
-  orderNo?: number
-  hideMenu?: boolean
-  hideChildrenInMenu?: boolean
+  title: string;
+  key?: string;
+  icon?: string;
+  iconSize?: number;
+  affix?: boolean;
+  keepAlive?: boolean;
+  orderNo?: number;
+  hideMenu?: boolean;
+  hideChildrenInMenu?: boolean;
 }
 
 export interface RouteObject {
-  id?: string
-  loader?: LoaderFunction
-  element?: ReactNode
-  path?: string
-  fullPath?: string
-  children?: RouteObject[]
-  index?: false
-  meta?: MetaProps
+  id?: string;
+  loader?: LoaderFunction;
+  element?: ReactNode;
+  path?: string;
+  fullPath?: string;
+  children?: RouteObject[];
+  index?: false;
+  meta?: MetaProps;
 }
 
 export interface AppMenu {
-  name: string
-  path: string
-  children?: AppMenu[]
-  disabled?: boolean
-  icon?: string
-  affix?: boolean
-  orderNo?: number
-  hideMenu?: boolean
-  hideChildrenInMenu?: boolean
-  hideBreadcrumb?: boolean
+  name: string;
+  path: string;
+  children?: AppMenu[];
+  disabled?: boolean;
+  icon?: string;
+  iconSize?: number;
+  affix?: boolean;
+  orderNo?: number;
+  hideMenu?: boolean;
+  hideChildrenInMenu?: boolean;
+  hideBreadcrumb?: boolean;
 }

apps/admin/src/views/user/addUser/index.tsx

@@ -0,0 +1,16 @@
+import type { FC } from 'react';
+
+interface PAddUser {
+  onAdd?: (user: any) => void;
+}
+
+const AddUser: FC<PAddUser> = ({ onAdd = () => {} }) => {
+  console.log(onAdd);
+
+  return (
+    <div>
+      <div>添加用户</div>
+    </div>
+  );
+};
+export default AddUser;

apps/admin/src/views/user/index.tsx

@@ -0,0 +1,23 @@
+import type { FC } from 'react';
+
+interface PUser {
+  id: number;
+  name: string;
+  email: string;
+  avatar: string;
+}
+
+const User: FC<PUser> = ({ id, name, email, avatar }) => {
+  console.log(id, name, email, avatar);
+
+  return (
+    <div>
+      <div>{id}</div>
+      <div>{name}</div>
+      <div>{email}</div>
+      <div>{avatar}</div>
+    </div>
+  );
+};
+
+export default User;

apps/admin/src/views/user/list/index.tsx

@@ -0,0 +1,20 @@
+import type { FC } from 'react';
+
+interface PUSerList {
+  data?: {
+    id: number;
+    name: string;
+    email: string;
+    avatar: string;
+  };
+}
+
+const UserList: FC<PUSerList> = ({ data = { id: 0, name: '', email: '', avatar: '' } }) => (
+  <div>
+    <div>{data.id}</div>
+    <div>{data.name}</div>
+    <div>{data.email}</div>
+    <div>{data.avatar}</div>
+  </div>
+);
+export default UserList;