fetch & merge menu data

mock/menu.json

@@ -1,7 +1,7 @@
 [
     {
-        "id": "22582728306196480",
-        "parentId": "",
+        "id": 1100,
+        "parentId": 0,
         "name": "首页",
         "icon": "HomeOutlined",
         "type":0,
@@ -11,8 +11,8 @@
         "visible":true
     }, 
     {
-        "id": "custom-made",
-        "parentId": "",
+        "id": 1200,
+        "parentId": 0,
         "name": "定制选品",
         "icon": "BgColorsOutlined",
         "type":0,
@@ -23,8 +23,8 @@
     },
 
     {
-        "id": "custom-product",
-        "parentId": "custom-made",
+        "id": 1210,
+        "parentId": 1200,
         "name": "定制商品",
         "icon": "",
         "type":2,
@@ -35,8 +35,8 @@
         "visible":true
     },
     {
-        "id": "sample",
-        "parentId": "custom-product",
+        "id": 1211,
+        "parentId": 1210,
         "name": "样机",
         "icon": "",
         "type":0,
@@ -47,8 +47,8 @@
         "visible":true
     },
     {
-        "id": "material",
-        "parentId": "custom-product",
+        "id": 1212,
+        "parentId": 1210,
         "name": "素材",
         "icon": "",
         "type":0,
@@ -59,8 +59,8 @@
         "visible":true
     },
     {
-        "id": "shape",
-        "parentId": "custom-product",
+        "id": 1213,
+        "parentId": 1210,
         "name": "款式",
         "icon": "",
         "type":0,
@@ -71,8 +71,8 @@
         "visible":true
     },
     {
-        "id": "finished",
-        "parentId": "custom-product",
+        "id": 1214,
+        "parentId": 1210,
         "name": "成品",
         "icon": "",
         "type":0,
@@ -85,8 +85,8 @@
 
 
     {
-        "id": "template",
-        "parentId": "custom-made",
+        "id": 1220,
+        "parentId": 1200,
         "name": "模板配置",
         "icon": "",
         "type":2,
@@ -97,8 +97,8 @@
         "visible":true
     },
     {
-        "id": "dict",
-        "parentId": "template",
+        "id": 1221,
+        "parentId": 1220,
         "name": "数据字典",
         "icon": "",
         "type":0,
@@ -109,8 +109,8 @@
         "visible":true
     },
     {
-        "id": "xp-template",
-        "parentId": "template",
+        "id": 1222,
+        "parentId": 1220,
         "name": "虾皮模板",
         "icon": "",
         "type":0,
@@ -121,8 +121,8 @@
         "visible":true
     },
     {
-        "id": "rules",
-        "parentId": "template",
+        "id":1223,
+        "parentId": 1220,
         "name": "规则引擎",
         "icon": "",
         "type":0,
@@ -135,8 +135,8 @@
 
 
     {
-        "id": "platform-product",
-        "parentId": "custom-made",
+        "id": 1230,
+        "parentId": 1200,
         "name": "平台商品",
         "icon": "",
         "type":2,
@@ -147,8 +147,8 @@
         "visible":true
     },
     {
-        "id": "xiapi",
-        "parentId": "platform-product",
+        "id": 1231,
+        "parentId": 1230,
         "name": "虾皮",
         "icon": "",
         "type":0,
@@ -159,8 +159,8 @@
         "visible":true
     },
     {
-        "id": "amazone",
-        "parentId": "platform-product",
+        "id": 1232,
+        "parentId": 1230,
         "name": "亚马逊",
         "icon": "",
         "type":0,
@@ -172,8 +172,8 @@
     },
 
     {
-        "id": "sds",
-        "parentId": "custom-made",
+        "id": 1240,
+        "parentId": 1200,
         "name": "SDS商品",
         "icon": "",
         "type":2,
@@ -184,8 +184,8 @@
         "visible":true
     },
     {
-        "id": "xiapi",
-        "parentId": "sds",
+        "id": 1241,
+        "parentId": 1240,
         "name": "成品库",
         "icon": "",
         "type":0,
@@ -196,8 +196,8 @@
         "visible":true
     },
     {
-        "id": "sds-shape",
-        "parentId": "sds",
+        "id": 1242,
+        "parentId": 1240,
         "name": "款式",
         "icon": "",
         "type":0,
@@ -208,8 +208,8 @@
         "visible":true
     },
     {
-        "id": "pattern-material",
-        "parentId": "sds",
+        "id": 1243,
+        "parentId": 1240,
         "name": "图案素材",
         "icon": "",
         "type":0,
@@ -222,8 +222,8 @@
 
 
     {
-        "id": "ai",
-        "parentId": "",
+        "id": 1300,
+        "parentId": 0,
         "name": "AI应用",
         "icon": "HighlightOutlined",
         "type":0,
@@ -233,8 +233,8 @@
         "visible":true
     },
     {
-        "id": "makeup",
-        "parentId": "ai",
+        "id": 1310,
+        "parentId": 1300,
         "name": "AI 作图",
         "icon": "",
         "type":0,
@@ -245,8 +245,8 @@
         "visible":true
     },
     {
-        "id": "background",
-        "parentId": "ai",
+        "id":1320,
+        "parentId": 1300,
         "name": "AI 画背景",
         "icon": "",
         "type":0,
@@ -257,8 +257,8 @@
         "visible":true
     },
     {
-        "id": "fission",
-        "parentId": "ai",
+        "id": 1330,
+        "parentId": 1300,
         "name": "图片裂变",
         "icon": "",
         "type":0,
@@ -269,8 +269,8 @@
         "visible":true
     },
     {
-        "id": "outline",
-        "parentId": "ai",
+        "id": 1340,
+        "parentId": 1300,
         "name": "轮廓出图",
         "icon": "",
         "type":0,
@@ -281,8 +281,8 @@
         "visible":true
     },
     {
-        "id": "white-background",
-        "parentId": "ai",
+        "id": 1350,
+        "parentId": 1300,
         "name": "一键白底",
         "icon": "",
         "type":0,
@@ -293,8 +293,8 @@
         "visible":true
     },
     {
-        "id": "ps",
-        "parentId": "ai",
+        "id": 1360,
+        "parentId": 1300,
         "name": "AI P图",
         "icon": "",
         "type":0,
@@ -305,8 +305,8 @@
         "visible":true
     },
     {
-        "id": "try",
-        "parentId": "ai",
+        "id": 1370,
+        "parentId": 1300,
         "name": "AI 试装",
         "icon": "",
         "type":0,
@@ -317,8 +317,8 @@
         "visible":true
     },
     {
-        "id": "makeup2",
-        "parentId": "ai",
+        "id": 1380,
+        "parentId": 1300,
         "name": "AI 作图2",
         "icon": "",
         "type":0,
@@ -329,8 +329,8 @@
         "visible":true
     },
     {
-        "id": "smart-libs",
-        "parentId": "ai",
+        "id": 1390,
+        "parentId": 1300,
         "name": "旺嘉智库",
         "icon": "",
         "type":0,

src/layout/index.tsx

@@ -37,6 +37,8 @@ const BasicLayout: React.FC = () => {
     { manual: true }
   );
 
+  const { data: menuList, run: listMenus} = useRequest(userService.listMenus, { manual: true });
+
   const formatMenus = (
     menus: Menu[],
     menuGroup: Record<string, Menu[]>,
@@ -69,12 +71,12 @@ const BasicLayout: React.FC = () => {
       return;
     }
     getCurrentUserProfile();
-  }, [refreshToken, getCurrentUserProfile, navigate]);
+    listMenus();
+  }, [refreshToken, getCurrentUserProfile, listMenus, navigate]);
 
   useEffect(() => {
-    if (!currentUserProfile) return;
+    if (!currentUserProfile || !menuList?.data) return;
     const menus:Array<Menu> = menuData as Array<Menu> ;
-    console.log(menus);
 
     const menuGroup = menus.reduce<Record<string, Menu[]>>((prev, menu) => {
       if (!menu.parentId) {
@@ -89,11 +91,31 @@ const BasicLayout: React.FC = () => {
       return prev;
     }, {});
 
-
     const routes: Menu[] = [];
 
     const formatedMenus = formatMenus(menus.filter(o => !o.parentId), menuGroup, routes);
-    setMenus(formatedMenus);
+    console.log(formatedMenus);
+    console.log(menuList.data);
+
+    const fixAndPushMenu = (item: Menu) => {
+      if(!item.parentPaths) {
+        item.parentPaths = []
+      }
+      if(!item.path.startsWith('/')) {
+        item.path = `/${item.path}`
+      }
+      item.path = [...item.parentPaths, item.path].join('')
+      routes.push(item)
+      if(item.children && item.children.length > 0) {
+        item.children.forEach(it => {
+          it.parentPaths = [...item.parentPaths||[], item.path]
+          fixAndPushMenu(it)
+        })
+      }
+    }
+    menuList.data.forEach(item => fixAndPushMenu(item))
+    setMenus([...formatedMenus, ...menuList.data]);
+    debugger
     console.log('components', components);
     replaceRoutes('*', [
       ...routes.map(menu => ({
@@ -131,7 +153,8 @@ const BasicLayout: React.FC = () => {
 
     // replace一下当前路由，为了触发路由匹配
     router.navigate(`${location.pathname}${location.search}`, { replace: true });
-  }, [ currentUserProfile, setCurrentUser ]);
+  }, [ currentUserProfile, menuList, setCurrentUser ]);
+
   useEffect(() => {
     function storageChange(e: StorageEvent) {
       if (e.key === useGlobalStore.persist.getOptions().name) {
@@ -146,13 +169,7 @@ const BasicLayout: React.FC = () => {
     }
   }, []);
 
-  if (loading || !currentUser) {
-    return (
-      <GloablLoading />
-    )
-  }
-
-  return (
+  return (loading || !currentUser)? (<GloablLoading />) : (
     <div>
       <div key={lang} className='bg-primary overflow-hidden'>
         <Header />

src/models/user.data.ts

@@ -58,8 +58,8 @@ export interface UserDTO {
 }
 
 export interface Menu {
-    id: string;
-    parentId?: string;
+    id: number;
+    parentId?: number;
     name?: string;
     icon?: string;
     visible?: boolean;

src/pages/login/index.tsx

@@ -4,20 +4,14 @@ import { LockOutlined, UserOutlined } from '@ant-design/icons';
 import { Button, Form, Input, Carousel } from 'antd';
 import { useNavigate } from 'react-router-dom';
 import { useRequest } from '@/hooks/use-request';
-import { useUserStore } from '@/store/global/user';
 import { useGlobalStore } from '@/store/global';
 import loginService from '@/request/service/auth';
-import userService from '@/request/service/user';
 import { LoginDTO } from '@/models';
 import './index.css'
 
 const Login = () => {
   const navigate = useNavigate();
-  const { runAsync: listMenus } = useRequest(userService.listMenus, { manual: true });
-  const { runAsync: getProfile } = useRequest(userService.getProfile, { manual: true });
   const { runAsync: login, loading } = useRequest(loginService.login, { manual: true });
-  const { runAsync: rerefshToken } = useRequest(loginService.rerefshToken, { manual: true });
-  const { setCurrentUser } = useUserStore();
   const { setToken, setRefreshToken } = useGlobalStore();
   const onFinish = async (values: LoginDTO) => {
     values.captchaVerification = "jKXK3cg440w2wbLQWBHOjDURNqT5sfMsQmkwMAEvzapLhQZh7YiMlEah/WhVXqygFmNO4SXEC4MzkjoRqgYK7A=="
@@ -29,10 +23,6 @@ const Login = () => {
     // data.data.avatarUrl = 'https://test.vogocm.com:9010/eshop/eshop_img/2023/5/24/43853633d16749bfb291f81bebb73451_20230524150631A001.jpg';
     setRefreshToken(data.refreshToken);
     setToken(data.accessToken);
-    // const [ _, { data: menus } ] = await listMenus();
-    // const [err, {data: profile}] = await getProfile();
-    // const [ error, {data: tokenData}] = await rerefshToken(data.refreshToken)
-    // setCurrentUser(profile)
     navigate('/');
   };
 

src/request/service/user.ts

@@ -3,7 +3,7 @@ import { Menu, User } from '@/models';
 
 export default {
     listMenus: () => {
-        return request.get<Menu>('/admin-api/system/auth/list-menus');
+        return request.get<Menu[]>('/admin-api/system/auth/list-menus');
     },
 
     getProfile: () => {