feat: add nprogress

package.json

@@ -31,12 +31,14 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.11.1",
+    "react-transition-group": "^4.4.5",
     "react-virtualized": "^9.22.5"
   },
   "devDependencies": {
     "@types/node": "^20.1.0",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
+    "@types/react-transition-group": "^4.4.10",
     "@types/react-virtualized": "^9.21.21",
     "@typescript-eslint/eslint-plugin": "^5.57.1",
     "@typescript-eslint/parser": "^5.57.1",

src/layouts/BasicLayout/index.tsx

@@ -1,13 +1,10 @@
 import React from 'react';
 import { Dropdown } from 'antd';
 import {
-  ChromeFilled,
-  CrownFilled,
   SmileFilled,
-  TabletFilled,
   LogoutOutlined,
 } from '@ant-design/icons';
-import { useOutlet, useLocation } from 'react-router-dom';
+import { useOutlet, useLocation, useNavigate } from 'react-router-dom';
 import { ProLayout } from '@ant-design/pro-components';
 
 const routes =  [
@@ -17,87 +14,16 @@ const routes =  [
     icon: <SmileFilled />,
   },
   {
-    path: '/admin',
-    name: '管理页',
-    icon: <CrownFilled />,
-    access: 'canAdmin',
-    component: './Admin',
-    routes: [
-      {
-        path: '/admin/sub-page1',
-        name: '一级页面',
-        icon: 'https://gw.alipayobjects.com/zos/antfincdn/upvrAjAPQX/Logo_Tech%252520UI.svg',
-        component: './Welcome',
-      },
-      {
-        path: '/admin/sub-page2',
-        name: '二级页面',
-        icon: <CrownFilled />,
-        component: './Welcome',
-      },
-      {
-        path: '/admin/sub-page3',
-        name: '三级页面',
-        icon: <CrownFilled />,
-        component: './Welcome',
-      },
-    ],
-  },
-  {
-    name: '列表页',
-    icon: <TabletFilled />,
-    path: '/list',
-    component: './ListTableList',
-    routes: [
-      {
-        path: '/list/sub-page',
-        name: '列表页面',
-        icon: <CrownFilled />,
-        routes: [
-          {
-            path: 'sub-sub-page1',
-            name: '一一级列表页面',
-            icon: <CrownFilled />,
-            component: './Welcome',
-          },
-          {
-            path: 'sub-sub-page2',
-            name: '一二级列表页面',
-            icon: <CrownFilled />,
-            component: './Welcome',
-          },
-          {
-            path: 'sub-sub-page3',
-            name: '一三级列表页面',
-            icon: <CrownFilled />,
-            component: './Welcome',
-          },
-        ],
-      },
-      {
-        path: '/list/sub-page2',
-        name: '二级列表页面',
-        icon: <CrownFilled />,
-        component: './Welcome',
-      },
-      {
-        path: '/list/sub-page3',
-        name: '三级列表页面',
-        icon: <CrownFilled />,
-        component: './Welcome',
-      },
-    ],
-  },
-  {
-    path: 'https://ant.design',
-    name: 'Ant Design 官网外链',
-    icon: <ChromeFilled />,
+    path: '/map',
+    name: '地图',
+    icon: <SmileFilled />,
   },
 ];
 
 export const BasicLayout: React.FC = () => {
   const outlet = useOutlet();
   const location = useLocation();
+  const navigate = useNavigate();
 
   return (
     <ProLayout
@@ -126,9 +52,6 @@ export const BasicLayout: React.FC = () => {
       ]}
       location={location}
       siderMenuType="group"
-      menu={{
-        collapsedShowGroupTitle: true,
-      }}
       fixSiderbar={true}
       layout="mix"
       avatarProps={{
@@ -153,7 +76,11 @@ export const BasicLayout: React.FC = () => {
           );
         },
       }}
-      onMenuHeaderClick={(e: any) => console.log(e)}
+      menuProps={{
+        onClick: (info: any) => {
+          navigate(info.key);
+        }
+      }}
       route={{
         path: '/',
         routes,

src/main.tsx

@@ -1,11 +1,9 @@
-import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
 import '@unocss/reset/tailwind.css'
+import 'nprogress/nprogress.css'
 import 'uno.css'
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+  <App />,
 )

src/routers/LazyLoad.tsx

@@ -1,7 +1,7 @@
 import React, { Suspense } from 'react';
 import { Spin } from 'antd';
 
-const LazyLoad = (Comp: React.LazyExoticComponent<any>): React.ReactNode => {
+export const LazyLoad = (Comp: React.LazyExoticComponent<any>): React.ReactNode => {
   return (
     <Suspense
       fallback={

src/routers/index.tsx

@@ -1,10 +1,12 @@
-import { useRoutes, Navigate } from 'react-router-dom';
+import React from 'react';
+import { CSSTransition, TransitionGroup } from 'react-transition-group'
+import { useNProgress } from '@rcuse/integrations';
+import { useRoutes, useLocation, Navigate } from 'react-router-dom';
 import Login from '@/pages/login';
 import { BasicLayout } from '@/layouts/BasicLayout';
+import { LazyLoad } from './LazyLoad';
 
 import type { RouteObject } from './types';
-import lazyLoad from "@/routers/LazyLoad.tsx";
-import React from "react";
 
 // * 导入所有router
 const metaRouters: Record<string, RouteObject[]> = import.meta.glob(
@@ -25,6 +27,14 @@ export const rootRouter: RouteObject[] = [
     element: <BasicLayout />,
     children: [
       ...routerArray,
+      {
+        path: '/map',
+        element: LazyLoad(React.lazy(() => import('@/pages/map'))),
+        meta: {
+          title: "全景地图",
+          key: "map"
+        }
+      },
     ],
   },
   {
@@ -39,18 +49,29 @@ export const rootRouter: RouteObject[] = [
       title: '登录页',
     }
   },
-  {
-    path: '/map',
-    element: lazyLoad(React.lazy(() => import('@/pages/map'))),
-    meta: {
-      title: "全景地图",
-      key: "map"
-    }
-  },
 ];
 
 const Router = () => {
-  return useRoutes(rootRouter);
+  const location = useLocation();
+  const { start, done } = useNProgress();
+
+  return (
+    <TransitionGroup>
+      <CSSTransition
+        classNames="fade"
+        key={location.key}
+        onEnter={() => {
+          start();
+        }}
+        onEntered={() => {
+          done()
+        }}
+        timeout={1200}
+      >
+        {useRoutes(rootRouter)}
+      </CSSTransition>
+    </TransitionGroup>
+  )
 };
 
 export default Router;