Add dynamic menu to MainFramework

src/pages/MainFramework.tsx

@@ -1,6 +1,7 @@
 import React, { createContext } from 'react'
 import '@/assets/css/header.scss'
 import LoadingMask from '@/components/LoadingMask.tsx'
+import router from '@/router'
 
 export const MainFrameworkContext = createContext<{
     navbarHiddenState: {
@@ -16,6 +17,8 @@ export const MainFrameworkContext = createContext<{
 
 const MainFramework: React.FC = () => {
     const [navbarHidden, setNavbarHidden] = useState(false)
+    const routeId = useMatches()[1].id
+    const routeChildren = router.routes[0].children?.find((value) => value.id === routeId)?.children
 
     return (
         <>
@@ -26,36 +29,20 @@ const MainFramework: React.FC = () => {
                     </a>
                     <nav>
                         <ul className={'menu'}>
-                            <li className={'item'}>
+                            {routeChildren?.map((route) => {
-                                <NavLink
+                                return (
-                                    to={''}
+                                    <li className={'item'}>
-                                    className={({ isActive, isPending }) =>
+                                        <NavLink
-                                        isPending ? 'pending' : isActive ? 'active' : ''
+                                            to={route.path ?? ''}
-                                    }
+                                            className={({ isActive, isPending }) =>
-                                >
+                                                isPending ? 'pending' : isActive ? 'active' : ''
-                                    主页
+                                            }
-                                </NavLink>
+                                        >
-                            </li>
+                                            {(route.handle as RouteHandle).name}
-                            <li className={'item'}>
+                                        </NavLink>
-                                <NavLink
+                                    </li>
-                                    to={'https://blog.fatweb.top'}
+                                )
-                                    className={({ isActive, isPending }) =>
+                            })}
-                                        isPending ? 'pending' : isActive ? 'active' : ''
-                                    }
-                                >
-                                    博客
-                                </NavLink>
-                            </li>
-                            <li className={'item'}>
-                                <NavLink
-                                    to={'project'}
-                                    className={({ isActive, isPending }) =>
-                                        isPending ? 'pending' : isActive ? 'active' : ''
-                                    }
-                                >
-                                    App
-                                </NavLink>
-                            </li>
                         </ul>
                     </nav>
                 </header>

src/router/index.tsx

@@ -25,6 +25,17 @@ const routes: RouteObject[] = [
                         id: 'home',
                         Component: React.lazy(() => import('@/components/Home')),
                         handle: {
+                            name: '主页',
+                            menu: true,
+                            auth: false
+                        }
+                    },
+                    {
+                        path: 'https://blog.fatweb.top',
+                        id: 'blog',
+                        handle: {
+                            name: '博客',
+                            menu: true,
                             auth: false
                         }
                     },
@@ -33,6 +44,8 @@ const routes: RouteObject[] = [
                         id: 'project',
                         Component: React.lazy(() => import('@/components/Project')),
                         handle: {
+                            name: '项目',
+                            menu: true,
                             auth: false
                         }
                     }

src/vite-env.d.ts

@@ -1,12 +1,14 @@
 /// <reference types="vite/client" />
 
-type Captcha = {
+type RouteHandle = {
-    value: string
+    name?: string
-    base64Src: string
+    menu?: boolean
+    auth?: boolean
 }
 
-type RouteHandle = {
+interface FitFullscreenProps extends PropsWithChildren {
-    auth: boolean
+    zIndex?: number
+    backgroundColor?: string
 }
 
 type _Response<T> = {
@@ -15,6 +17,11 @@ type _Response<T> = {
     data: T | null
 }
 
+type Captcha = {
+    value: string
+    base64Src: string
+}
+
 type Token = {
     token: string
 }