src/global.d.ts

@@ -10,9 +10,10 @@ interface ImportMeta {
     readonly env: ImportMetaEnv
 }
 
-type ToolsJsonObject = {
+type RouteJsonObject = {
     path: string
-    id: string
+    id?: string
+    element?: React.JSX.Element
     component?: React.ComponentType
     name?: string
     titlePrefix?: string
@@ -21,7 +22,7 @@ type ToolsJsonObject = {
     icon?: IconComponent
     menu?: boolean
     auth?: boolean
-    children?: ToolsJsonObject[]
+    children?: RouteJsonObject[]
 }
 
 type RouteHandle = {

src/pages/ToolsFramework.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import FitFullScreen from '@/components/common/FitFullScreen'
 import '@/assets/css/pages/tools-framework.scss'
 import Icon from '@ant-design/icons'
-import { toolsJsonObjects } from '@/router/tools'
+import { tools } from '@/router/tools'
 import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
 import { getLocalStorage, getRedirectUrl, setLocalStorage } from '@/utils/common'
 import { getLoginStatus, logout } from '@/utils/auth'
@@ -88,14 +88,14 @@ const ToolsFramework: React.FC = () => {
                                         }
                                     >
                                         <div className={'icon-box'}>
-                                            {toolsJsonObjects[0].icon ? (
+                                            {tools[0].icon ? (
                                                 <Icon
                                                     className={'icon'}
-                                                    component={toolsJsonObjects[0].icon}
+                                                    component={tools[0].icon}
                                                 />
                                             ) : undefined}
                                         </div>
-                                        <span className={'text'}>{toolsJsonObjects[0].name}</span>
+                                        <span className={'text'}>{tools[0].name}</span>
                                     </NavLink>
                                 </div>
                             </li>
@@ -108,14 +108,14 @@ const ToolsFramework: React.FC = () => {
                                         }
                                     >
                                         <div className={'icon-box'}>
-                                            {toolsJsonObjects[1].icon ? (
+                                            {tools[1].icon ? (
                                                 <Icon
                                                     className={'icon'}
-                                                    component={toolsJsonObjects[1].icon}
+                                                    component={tools[1].icon}
                                                 />
                                             ) : undefined}
                                         </div>
-                                        <span className={'text'}>{toolsJsonObjects[1].name}</span>
+                                        <span className={'text'}>{tools[1].name}</span>
                                     </NavLink>
                                 </div>
                             </li>
@@ -132,7 +132,7 @@ const ToolsFramework: React.FC = () => {
                                 ref={hideScrollbarRef}
                             >
                                 <ul>
-                                    {toolsJsonObjects.map((tool) => {
+                                    {tools.map((tool) => {
                                         return tool.menu &&
                                             tool.id !== 'tools' &&
                                             tool.id !== 'tools-all' ? (

src/router/home.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+
+const home: RouteJsonObject[] = [
+    {
+        path: '',
+        id: 'home',
+        component: React.lazy(() => import('@/pages/home')),
+        name: '主页',
+        menu: true,
+        auth: false
+    },
+    {
+        path: 'https://blog.fatweb.top',
+        id: 'url-blog',
+        name: '博客',
+        menu: true
+    },
+    {
+        path: '/tools',
+        id: 'url-tools',
+        children: [
+            {
+                path: 'translation',
+                id: 'url-tools-translation',
+                name: '翻译',
+                menu: true
+            }
+        ],
+        name: '工具',
+        menu: true
+    }
+]
+
+export default home

src/router/index.tsx

@@ -1,74 +1,36 @@
 import React from 'react'
 import tools from '@/router/tools'
+import home from '@/router/home'
 
-const routes: RouteObject[] = [
+const root: RouteJsonObject[] = [
     {
         path: '/',
-        Component: React.lazy(() => import('@/AuthRoute')),
+        component: React.lazy(() => import('@/AuthRoute')),
         children: [
             {
                 path: '/login',
                 id: 'login',
-                Component: React.lazy(() => import('@/pages/Login'))
+                component: React.lazy(() => import('@/pages/Login'))
             },
             {
                 path: '/loading',
                 id: 'loading',
-                Component: React.lazy(() => import('@/components/common/LoadingMask'))
+                component: React.lazy(() => import('@/components/common/LoadingMask'))
             },
             {
                 path: '/tools',
                 id: 'toolsFramework',
-                Component: React.lazy(() => import('@/pages/ToolsFramework')),
+                component: React.lazy(() => import('@/pages/ToolsFramework')),
                 children: tools,
-                handle: {
+                name: '工具',
-                    name: '工具',
+                title: '工具',
-                    title: '工具',
+                auth: false
-                    auth: false
-                }
             },
             {
                 path: '',
                 id: 'homeFramework',
-                Component: React.lazy(() => import('@/pages/HomeFramework')),
+                component: React.lazy(() => import('@/pages/HomeFramework')),
-                children: [
+                children: home
-                    {
-                        path: '',
-                        id: 'home',
-                        Component: React.lazy(() => import('@/pages/home')),
-                        handle: {
-                            name: '主页',
-                            menu: true,
-                            auth: false
-                        }
-                    },
-                    {
-                        path: 'https://blog.fatweb.top',
-                        id: 'url-blog',
-                        handle: {
-                            name: '博客',
-                            menu: true
-                        }
-                    },
-                    {
-                        path: '/tools',
-                        id: 'url-tools',
-                        children: [
-                            {
-                                path: 'translation',
-                                id: 'url-tools-translation',
-                                handle: {
-                                    name: '翻译',
-                                    menu: true
-                                }
-                            }
-                        ],
-                        handle: {
-                            name: '工具',
-                            menu: true
-                        }
-                    }
-                ]
             },
             {
                 path: '*',
@@ -78,5 +40,34 @@ const routes: RouteObject[] = [
     }
 ]
 
+const mapJsonToRoute = (jsonObject: RouteJsonObject[]): RouteObject[] => {
+    return jsonObject.map((value) => ({
+        path: value.path,
+        id: value.id,
+        element: value.element,
+        Component: value.component,
+        handle: {
+            name: value.name,
+            titlePrefix: value.titlePrefix,
+            title: value.title,
+            titlePostfix: value.titlePostfix,
+            icon: value.icon,
+            menu: value.menu,
+            auth: value.auth
+        },
+        children:
+            value.children &&
+            mapJsonToRoute(value.children).map((sub) => {
+                const handle = sub.handle as RouteHandle
+                if (!handle.title) {
+                    handle.title = value.title
+                }
+                return sub
+            })
+    }))
+}
+
+const routes = mapJsonToRoute(root)
+
 const router = createBrowserRouter(routes)
 export default router

src/router/tools.tsx

@@ -1,8 +1,6 @@
 import React from 'react'
 
-const defaultTitle = '氮工具'
+export const tools: RouteJsonObject[] = [
-
-export const toolsJsonObjects: ToolsJsonObject[] = [
     {
         path: '',
         id: 'tools',
@@ -277,41 +275,11 @@ export const toolsJsonObjects: ToolsJsonObject[] = [
                 auth: false
             }
         ]
+    },
+    {
+        path: '*',
+        element: <Navigate to="/tools" replace />
     }
 ]
 
-const tools: RouteObject[] = toolsJsonObjects.map((value) => ({
-    path: value.path,
-    id: value.id,
-    Component: value.component,
-    handle: {
-        name: value.name,
-        titlePrefix: value.titlePrefix,
-        title: value.title ?? defaultTitle,
-        titlePostfix: value.titlePostfix,
-        icon: value.icon,
-        menu: value.menu,
-        auth: value.auth
-    },
-    children: value.children?.map((value) => ({
-        path: value.path,
-        id: value.id,
-        Component: value.component,
-        handle: {
-            name: value.name,
-            titlePrefix: value.titlePrefix,
-            title: value.title ?? defaultTitle,
-            titlePostfix: value.titlePostfix,
-            icon: value.icon,
-            menu: value.menu,
-            auth: value.auth
-        }
-    }))
-}))
-
-tools.push({
-    path: '*',
-    element: <Navigate to="/tools" replace />
-})
-
 export default tools