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

Optimize route

Browse Source
This commit is contained in:
Fat Snake
2023-11-01 09:39:22 +08:00
parent b314a9f801
commit 33b664816e
7 changed files with 41 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/common/sidebar/SidebarItem.tsx
View File

@@ -7,6 +7,7 @@ type ItemProps = {
text?: string text?: string
path: string path: string
children?: React.ReactNode children?: React.ReactNode
end?: boolean
} }
const SidebarItem: React.FC<ItemProps> = (props) => { const SidebarItem: React.FC<ItemProps> = (props) => {
@@ -34,8 +35,8 @@ const SidebarItem: React.FC<ItemProps> = (props) => {
<li className={'item'}> <li className={'item'}>
<div className={'menu-bt'} onMouseEnter={showSubmenu}> <div className={'menu-bt'} onMouseEnter={showSubmenu}>
<NavLink <NavLink
end={props.end}
to={props.path} to={props.path}
end
className={({ isActive, isPending }) => className={({ isActive, isPending }) =>
isPending ? 'pending' : isActive ? 'active' : '' isPending ? 'pending' : isActive ? 'active' : ''
} }

2
src/global.d.ts vendored
View File

@@ -12,7 +12,7 @@ interface ImportMeta {
type RouteJsonObject = { type RouteJsonObject = {
path: string path: string
absolutePath?: string absolutePath: string
id?: string id?: string
element?: React.JSX.Element element?: React.JSX.Element
component?: React.ComponentType component?: React.ComponentType

6
src/pages/ToolsFramework.tsx
View File

@@ -24,11 +24,13 @@ const ToolsFramework: React.FC = () => {
<Sidebar title={'氮工具'} onSidebarSwitch={handleOnSidebarSwitch}> <Sidebar title={'氮工具'} onSidebarSwitch={handleOnSidebarSwitch}>
<SidebarItemList> <SidebarItemList>
<SidebarItem <SidebarItem
end
path={''} path={''}
icon={tools[0].icon} icon={tools[0].icon}
text={tools[0].name} text={tools[0].name}
></SidebarItem> ></SidebarItem>
<SidebarItem <SidebarItem
end
path={'all'} path={'all'}
icon={tools[1].icon} icon={tools[1].icon}
text={tools[1].name} text={tools[1].name}
@@ -42,7 +44,7 @@ const ToolsFramework: React.FC = () => {
tool.id !== 'tools' && tool.id !== 'tools' &&
tool.id !== 'tools-all' ? ( tool.id !== 'tools-all' ? (
<SidebarItem <SidebarItem
path={tool.path} path={tool.absolutePath}
icon={tool.icon} icon={tool.icon}
text={tool.name} text={tool.name}
key={tool.id} key={tool.id}
@@ -51,7 +53,7 @@ const ToolsFramework: React.FC = () => {
? tool.children.map((subTool) => { ? tool.children.map((subTool) => {
return ( return (
<SidebarItem <SidebarItem
path={`${tool.path}/${subTool.path}`} path={subTool.absolutePath}
text={subTool.name} text={subTool.name}
key={subTool.id} key={subTool.id}
/> />

2
src/pages/UserFramework.tsx
View File

@@ -16,7 +16,7 @@ const ToolsFramework: React.FC = () => {
{user.map((value) => { {user.map((value) => {
return value.menu ? ( return value.menu ? (
<SidebarItem <SidebarItem
path={value.path} path={value.absolutePath}
icon={value.icon} icon={value.icon}
text={value.name} text={value.name}
key={value.id} key={value.id}

2
src/router/home.tsx
View File

@@ -12,6 +12,7 @@ const home: RouteJsonObject[] = [
}, },
{ {
path: 'https://blog.fatweb.top', path: 'https://blog.fatweb.top',
absolutePath: 'https://blog.fatweb.top',
id: 'url-blog', id: 'url-blog',
name: '博客', name: '博客',
menu: true menu: true
@@ -23,6 +24,7 @@ const home: RouteJsonObject[] = [
children: [ children: [
{ {
path: 'translation', path: 'translation',
absolutePath: '/tools/translation',
id: 'url-tools-translation', id: 'url-tools-translation',
name: '翻译', name: '翻译',
menu: true menu: true

2
src/router/index.tsx
View File

@@ -36,6 +36,7 @@ const setTitle = (jsonObject: RouteJsonObject[], title: string): RouteJsonObject
const root: RouteJsonObject[] = [ const root: RouteJsonObject[] = [
{ {
path: '/', path: '/',
absolutePath: '/',
component: React.lazy(() => import('@/AuthRoute')), component: React.lazy(() => import('@/AuthRoute')),
children: [ children: [
{ {
@@ -77,6 +78,7 @@ const root: RouteJsonObject[] = [
}, },
{ {
path: '*', path: '*',
absolutePath: '*',
element: <Navigate to="/" replace /> element: <Navigate to="/" replace />
} }
] ]

29
src/router/tools.tsx
View File

@@ -34,6 +34,7 @@ export const tools: RouteJsonObject[] = [
children: [ children: [
{ {
path: '1', path: '1',
absolutePath: '/tools/translation/1',
id: '1', id: '1',
name: '翻译1', name: '翻译1',
icon: React.lazy(() => import('~icons/fatweb/logo.jsx')), icon: React.lazy(() => import('~icons/fatweb/logo.jsx')),
@@ -42,6 +43,7 @@ export const tools: RouteJsonObject[] = [
}, },
{ {
path: '2', path: '2',
absolutePath: '/tools/translation/2',
id: '2', id: '2',
name: '翻译2', name: '翻译2',
menu: true, menu: true,
@@ -51,6 +53,7 @@ export const tools: RouteJsonObject[] = [
}, },
{ {
path: 'translation-', path: 'translation-',
absolutePath: '/tools/translation-',
id: 'tools-translation-', id: 'tools-translation-',
component: React.lazy(() => import('@/pages/tools/Translation')), component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译-', name: '翻译-',
@@ -60,6 +63,7 @@ export const tools: RouteJsonObject[] = [
children: [ children: [
{ {
path: '1-', path: '1-',
absolutePath: '/tools/translation-/1-',
id: '1-', id: '1-',
name: '翻译1-', name: '翻译1-',
menu: true, menu: true,
@@ -67,6 +71,7 @@ export const tools: RouteJsonObject[] = [
}, },
{ {
path: '2-', path: '2-',
absolutePath: '/tools/translation-/2-',
id: '2-', id: '2-',
name: '翻译2-', name: '翻译2-',
menu: true, menu: true,
@@ -76,6 +81,7 @@ export const tools: RouteJsonObject[] = [
}, },
{ {
path: 'translation--', path: 'translation--',
absolutePath: '/tools/translation--',
id: 'tools-translation--', id: 'tools-translation--',
component: React.lazy(() => import('@/pages/tools/Translation')), component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译--', name: '翻译--',
@@ -85,6 +91,7 @@ export const tools: RouteJsonObject[] = [
}, },
{ {
path: 'translation--1', path: 'translation--1',
absolutePath: '/tools/translation--1',
id: 'tools-translation--1', id: 'tools-translation--1',
component: React.lazy(() => import('@/pages/tools/Translation')), component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译--1', name: '翻译--1',
@@ -94,6 +101,7 @@ export const tools: RouteJsonObject[] = [
}, },
{ {
path: 'translation--2', path: 'translation--2',
absolutePath: '/tools/translation--2',
id: 'tools-translation--2', id: 'tools-translation--2',
component: React.lazy(() => import('@/pages/tools/Translation')), component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译--2', name: '翻译--2',
@@ -103,6 +111,7 @@ export const tools: RouteJsonObject[] = [
}, },
{ {
path: 'translation--3', path: 'translation--3',
absolutePath: '/tools/translation--3',
id: 'tools-translation--3', id: 'tools-translation--3',
component: React.lazy(() => import('@/pages/tools/Translation')), component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译--3', name: '翻译--3',
@@ -112,6 +121,7 @@ export const tools: RouteJsonObject[] = [
}, },
{ {
path: 'translation--4', path: 'translation--4',
absolutePath: '/tools/translation--4',
id: 'tools-translation--4', id: 'tools-translation--4',
component: React.lazy(() => import('@/pages/tools/Translation')), component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译--4', name: '翻译--4',
@@ -121,6 +131,7 @@ export const tools: RouteJsonObject[] = [
}, },
{ {
path: 'translation--5', path: 'translation--5',
absolutePath: '/tools/translation--5',
id: 'tools-translation--5', id: 'tools-translation--5',
component: React.lazy(() => import('@/pages/tools/Translation')), component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译--5', name: '翻译--5',
@@ -130,6 +141,7 @@ export const tools: RouteJsonObject[] = [
}, },
{ {
path: 'translation--6', path: 'translation--6',
absolutePath: '/tools/translation--6',
id: 'tools-translation--6', id: 'tools-translation--6',
component: React.lazy(() => import('@/pages/tools/Translation')), component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译--6', name: '翻译--6',
@@ -139,6 +151,7 @@ export const tools: RouteJsonObject[] = [
}, },
{ {
path: 'translation--7', path: 'translation--7',
absolutePath: '/tools/translation--7',
id: 'tools-translation--7', id: 'tools-translation--7',
component: React.lazy(() => import('@/pages/tools/Translation')), component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译--7', name: '翻译--7',
@@ -148,6 +161,7 @@ export const tools: RouteJsonObject[] = [
}, },
{ {
path: 'translation--8', path: 'translation--8',
absolutePath: '/tools/translation--8',
id: 'tools-translation--8', id: 'tools-translation--8',
component: React.lazy(() => import('@/pages/tools/Translation')), component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译--8', name: '翻译--8',
@@ -157,6 +171,7 @@ export const tools: RouteJsonObject[] = [
}, },
{ {
path: 'translation--9', path: 'translation--9',
absolutePath: '/tools/translation--9',
id: 'tools-translation--9', id: 'tools-translation--9',
component: React.lazy(() => import('@/pages/tools/Translation')), component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译--9', name: '翻译--9',
@@ -166,6 +181,7 @@ export const tools: RouteJsonObject[] = [
}, },
{ {
path: 'translation--10', path: 'translation--10',
absolutePath: '/tools/translation--10',
id: 'tools-translation--10', id: 'tools-translation--10',
component: React.lazy(() => import('@/pages/tools/Translation')), component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译--10', name: '翻译--10',
@@ -175,6 +191,7 @@ export const tools: RouteJsonObject[] = [
}, },
{ {
path: 'translation--1-', path: 'translation--1-',
absolutePath: '/tools/translation--1-',
id: 'tools-translation--1-', id: 'tools-translation--1-',
component: React.lazy(() => import('@/pages/tools/Translation')), component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译--1-', name: '翻译--1-',
@@ -184,6 +201,7 @@ export const tools: RouteJsonObject[] = [
}, },
{ {
path: 'translation--2-', path: 'translation--2-',
absolutePath: '/tools/translation--2-',
id: 'tools-translation--2-', id: 'tools-translation--2-',
component: React.lazy(() => import('@/pages/tools/Translation')), component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译--2-', name: '翻译--2-',
@@ -193,6 +211,7 @@ export const tools: RouteJsonObject[] = [
}, },
{ {
path: 'translation--3-', path: 'translation--3-',
absolutePath: '/tools/translation--3-',
id: 'tools-translation--3-', id: 'tools-translation--3-',
component: React.lazy(() => import('@/pages/tools/Translation')), component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译--3-', name: '翻译--3-',
@@ -202,6 +221,7 @@ export const tools: RouteJsonObject[] = [
}, },
{ {
path: 'translation--4-', path: 'translation--4-',
absolutePath: '/tools/translation--4-',
id: 'tools-translation--4-', id: 'tools-translation--4-',
component: React.lazy(() => import('@/pages/tools/Translation')), component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译--4-', name: '翻译--4-',
@@ -211,6 +231,7 @@ export const tools: RouteJsonObject[] = [
}, },
{ {
path: 'translation--5-', path: 'translation--5-',
absolutePath: '/tools/translation--5-',
id: 'tools-translation--5-', id: 'tools-translation--5-',
component: React.lazy(() => import('@/pages/tools/Translation')), component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译--5-', name: '翻译--5-',
@@ -220,6 +241,7 @@ export const tools: RouteJsonObject[] = [
}, },
{ {
path: 'translation--6-', path: 'translation--6-',
absolutePath: '/tools/translation--6-',
id: 'tools-translation--6-', id: 'tools-translation--6-',
component: React.lazy(() => import('@/pages/tools/Translation')), component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译--6-', name: '翻译--6-',
@@ -229,6 +251,7 @@ export const tools: RouteJsonObject[] = [
}, },
{ {
path: 'translation--7-', path: 'translation--7-',
absolutePath: '/tools/translation--7-',
id: 'tools-translation--7-', id: 'tools-translation--7-',
component: React.lazy(() => import('@/pages/tools/Translation')), component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译--7-', name: '翻译--7-',
@@ -238,6 +261,7 @@ export const tools: RouteJsonObject[] = [
}, },
{ {
path: 'translation--8-', path: 'translation--8-',
absolutePath: '/tools/translation--8-',
id: 'tools-translation--8-', id: 'tools-translation--8-',
component: React.lazy(() => import('@/pages/tools/Translation')), component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译--8-', name: '翻译--8-',
@@ -247,6 +271,7 @@ export const tools: RouteJsonObject[] = [
}, },
{ {
path: 'translation--9-', path: 'translation--9-',
absolutePath: '/tools/translation--9-',
id: 'tools-translation--9-', id: 'tools-translation--9-',
component: React.lazy(() => import('@/pages/tools/Translation')), component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译--9-', name: '翻译--9-',
@@ -256,6 +281,7 @@ export const tools: RouteJsonObject[] = [
}, },
{ {
path: 'translation--10-', path: 'translation--10-',
absolutePath: '/tools/translation--10-',
id: 'tools-translation--10-', id: 'tools-translation--10-',
component: React.lazy(() => import('@/pages/tools/Translation')), component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译--10-', name: '翻译--10-',
@@ -265,6 +291,7 @@ export const tools: RouteJsonObject[] = [
children: [ children: [
{ {
path: '1-1', path: '1-1',
absolutePath: '/tools/translation--10-/1-1',
id: '1-1', id: '1-1',
name: '翻译1-', name: '翻译1-',
menu: true, menu: true,
@@ -272,6 +299,7 @@ export const tools: RouteJsonObject[] = [
}, },
{ {
path: '2-1', path: '2-1',
absolutePath: '/tools/translation--10-/2-1',
id: '2-1', id: '2-1',
name: '翻译2-', name: '翻译2-',
menu: true, menu: true,
@@ -281,6 +309,7 @@ export const tools: RouteJsonObject[] = [
}, },
{ {
path: '*', path: '*',
absolutePath: '*',
element: <Navigate to="/tools" replace /> element: <Navigate to="/tools" replace />
} }
] ]