FatttSnake/oxygen-ui
1
0
Fork 0
Code Pull Requests Activity

Optimize router

Browse Source
This commit is contained in:
Fat Snake
2023-10-17 11:32:39 +08:00
parent a090327429
commit 75962aafc9
5 changed files with 91 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/global.d.ts vendored
View File

@@ -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 = {

16
src/pages/ToolsFramework.tsx
View File

@@ -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' ? (

34
src/router/home.tsx Normal file
View File

@@ -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

89
src/router/index.tsx
View File

@@ -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: '工具',
title: '工具',
auth: false
}
name: '工具',
title: '工具',
auth: false
},
{
path: '',
id: 'homeFramework',
Component: React.lazy(() => import('@/pages/HomeFramework')),
children: [
{
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
}
}
]
component: React.lazy(() => import('@/pages/HomeFramework')),
children: home
},
{
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

42
src/router/tools.tsx
View File

@@ -1,8 +1,6 @@
import React from 'react'
const defaultTitle = '氮工具'
export const toolsJsonObjects: ToolsJsonObject[] = [
export const tools: RouteJsonObject[] = [
{
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