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

Optimize tools route. Optimize multiple menu stylesheet.

Browse Source
This commit is contained in:
Fat Snake
2023-10-12 01:51:56 +08:00
parent 41b0cb6d3e
commit bc82572fa8
6 changed files with 196 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/assets/css/pages/tools-framework.scss
View File

@@ -3,6 +3,7 @@
.left-panel { .left-panel {
width: 16%; width: 16%;
background-color: constants.$origin-color; background-color: constants.$origin-color;
user-select: none;
.title { .title {
font-size: 2em; font-size: 2em;
@@ -20,12 +21,16 @@
margin: 4px 14px; margin: 4px 14px;
&.item { &.item {
font-size: 1.6em; font-size: 1.4em;
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
:hover { a.active {
background-color: #4E47BB; color: constants.$origin-color;
background-color: constants.$main-color;
}
a.pending {
background-color: #123213;
} }
} }
@@ -41,12 +46,13 @@
.text { .text {
flex: 1; flex: 1;
text-align: center; margin-left: 10px;
} }
} }
.separate { .separate {
height: 0; height: 0;
margin: 10px 0;
border: { border: {
width: 1px; width: 1px;
color: constants.$font-secondary-color; color: constants.$font-secondary-color;
@@ -54,6 +60,10 @@
}; };
opacity: 0.4; opacity: 0.4;
} }
&.item:hover {
background-color: constants.$background-color;
}
} }
} }
} }

11
src/global.d.ts vendored
View File

@@ -10,6 +10,17 @@ interface ImportMeta {
readonly env: ImportMetaEnv readonly env: ImportMetaEnv
} }
type ToolsJsonObject = {
path: string
id: string
component?: React.ComponentType
name?: string
icon?: IconComponent
menu?: boolean
auth?: boolean
children?: ToolsJsonObject[]
}
type RouteHandle = { type RouteHandle = {
name?: string name?: string
menu?: boolean menu?: boolean

59
src/pages/ToolsFramework.tsx
View File

@@ -2,7 +2,6 @@ import React from 'react'
import FitFullScreen from '@/components/common/FitFullScreen' import FitFullScreen from '@/components/common/FitFullScreen'
import '@/assets/css/pages/tools-framework.scss' import '@/assets/css/pages/tools-framework.scss'
import router from '@/router' import router from '@/router'
import { NavLink } from 'react-router-dom'
import Icon from '@ant-design/icons' import Icon from '@ant-design/icons'
const ToolsFramework: React.FC = () => { const ToolsFramework: React.FC = () => {
@@ -14,14 +13,18 @@ const ToolsFramework: React.FC = () => {
<> <>
<FitFullScreen className={'flex-horizontal'}> <FitFullScreen className={'flex-horizontal'}>
<div className={'left-panel'}> <div className={'left-panel'}>
<div className={'title'}>氦工具</div> <div className={'title'}>氮工具</div>
<div className={'content'}> <div className={'content'}>
<ul> <ul>
<li>
<div style={{ marginTop: '0' }} className={'separate'} />
</li>
<li className={'item'}> <li className={'item'}>
<NavLink <NavLink
to={''} to={''}
end
className={({ isActive, isPending }) => className={({ isActive, isPending }) =>
isPending ? ' pending' : isActive ? ' active' : '' isPending ? 'pending' : isActive ? 'active' : ''
} }
> >
{routeChildren ? ( {routeChildren ? (
@@ -36,29 +39,58 @@ const ToolsFramework: React.FC = () => {
{(routeChildren[0].handle as RouteHandle).name} {(routeChildren[0].handle as RouteHandle).name}
</span> </span>
</> </>
) : (
'主页'
)}
</NavLink>
</li>
<li className={'item'}>
<NavLink
to={'all'}
className={({ isActive, isPending }) =>
isPending ? ' pending' : isActive ? ' active' : ''
}
>
{routeChildren ? (
<>
<Icon
className={'icon'}
component={
(routeChildren[1].handle as RouteHandle).icon
}
/>
<span className={'text'}>
{(routeChildren[1].handle as RouteHandle).name}
</span>
</>
) : ( ) : (
'全部工具' '全部工具'
)} )}
</NavLink> </NavLink>
<div className={'home'}></div>
</li> </li>
<li> <li>
<div className={'separate'} /> <div className={'separate'} />
</li> </li>
{routeChildren?.map((route) => { {routeChildren?.map((route) => {
return (route.handle as RouteHandle).menu && return (route.handle as RouteHandle).menu &&
route.id !== 'tools' ? ( route.id !== 'tools' &&
<li className={'item'} key={route.id}> route.id !== 'tools-all' ? (
<li
className={route.children ? 'multiple-item' : 'item'}
key={route.id}
>
<NavLink <NavLink
to={route.path ?? ''} to={route.path ?? ''}
className={({ isActive, isPending }) => className={({ isActive, isPending }) =>
isPending ? 'pending' : isActive ? 'active' : '' isPending ? 'pending' : isActive ? 'active' : ''
} }
> >
{(route.handle as RouteHandle).icon ? (
<Icon <Icon
className={'icon'} className={'icon'}
component={(route.handle as RouteHandle).icon} component={(route.handle as RouteHandle).icon}
/> />
) : undefined}
<span className={'text'}> <span className={'text'}>
{(route.handle as RouteHandle).name} {(route.handle as RouteHandle).name}
</span> </span>
@@ -85,6 +117,8 @@ const ToolsFramework: React.FC = () => {
: '' : ''
} }
> >
{(subRoute.handle as RouteHandle)
.icon ? (
<Icon <Icon
className={'icon'} className={'icon'}
component={ component={
@@ -93,6 +127,7 @@ const ToolsFramework: React.FC = () => {
).icon ).icon
} }
/> />
) : undefined}
<span className={'text'}> <span className={'text'}>
{ {
( (
@@ -102,18 +137,12 @@ const ToolsFramework: React.FC = () => {
</span> </span>
</NavLink> </NavLink>
</li> </li>
) : ( ) : undefined
<></>
)
})} })}
</ul> </ul>
) : ( ) : undefined}
<></>
)}
</li> </li>
) : ( ) : undefined
<></>
)
})} })}
</ul> </ul>
</div> </div>

7
src/pages/tools/All.tsx Normal file
View File

@@ -0,0 +1,7 @@
import React from 'react'
const All: React.FC = () => {
return <></>
}
export default All

71
src/router/index.tsx
View File

@@ -1,4 +1,5 @@
import React from 'react' import React from 'react'
import tools from '@/router/tools'
const routes: RouteObject[] = [ const routes: RouteObject[] = [
{ {
@@ -19,75 +20,7 @@ const routes: RouteObject[] = [
path: '/tools', path: '/tools',
id: 'toolsFramework', id: 'toolsFramework',
Component: React.lazy(() => import('@/pages/ToolsFramework')), Component: React.lazy(() => import('@/pages/ToolsFramework')),
children: [ children: tools,
{
path: '',
id: 'tools',
Component: React.lazy(() => import('@/pages/tools')),
handle: {
name: '全部工具',
icon: React.lazy(() => import('~icons/fatweb/logo.jsx')),
menu: true,
auth: false
}
},
{
path: 'translation',
id: 'tools-translation',
Component: React.lazy(() => import('@/pages/tools/Translation')),
children: [
{
path: '1',
id: '1',
handle: {
name: '翻译1',
menu: true
}
},
{
path: '2',
id: '2',
handle: {
name: '翻译2',
menu: true
}
}
],
handle: {
name: '翻译',
menu: true,
auth: true
}
},
{
path: 'translation-',
id: 'tools-translation-',
Component: React.lazy(() => import('@/pages/tools/Translation')),
children: [
{
path: '1-',
id: '1-',
handle: {
name: '翻译1-',
menu: true
}
},
{
path: '2-',
id: '2-',
handle: {
name: '翻译2-',
menu: true
}
}
],
handle: {
name: '翻译-',
menu: true,
auth: true
}
}
],
handle: { handle: {
name: '工具', name: '工具',
title: '工具', title: '工具',

106
src/router/tools.tsx Normal file
View File

@@ -0,0 +1,106 @@
import React from 'react'
const toolsJsonObjects: ToolsJsonObject[] = [
{
path: '',
id: 'tools',
component: React.lazy(() => import('@/pages/tools')),
name: '主页',
icon: React.lazy(() => import('~icons/fatweb/logo.jsx')),
menu: true,
auth: false
},
{
path: 'all',
id: 'tools-all',
component: React.lazy(() => import('@/pages/tools')),
name: '全部工具',
icon: React.lazy(() => import('~icons/fatweb/logo.jsx')),
menu: true,
auth: false
},
{
path: 'translation',
id: 'tools-translation',
component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译',
icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
menu: true,
auth: false,
children: [
{
path: '1',
id: '1',
name: '翻译1',
menu: true,
auth: false
},
{
path: '2',
id: '2',
name: '翻译2',
menu: true,
auth: false
}
]
},
{
path: 'translation-',
id: 'tools-translation-',
component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译-',
icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
menu: true,
auth: false,
children: [
{
path: '1-',
id: '1-',
name: '翻译1-',
menu: true,
auth: false
},
{
path: '2-',
id: '2-',
name: '翻译2-',
menu: true,
auth: false
}
]
},
{
path: 'translation--',
id: 'tools-translation--',
component: React.lazy(() => import('@/pages/tools/Translation')),
name: '翻译--',
icon: React.lazy(() => import('~icons/fatweb/jenkins.jsx')),
menu: true,
auth: false
}
]
const tools: RouteObject[] = toolsJsonObjects.map((value) => ({
path: value.path,
id: value.id,
Component: value.component,
handle: {
name: value.name,
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,
icon: value.icon,
menu: value.menu,
auth: value.auth
}
}))
}))
export default tools