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

83
src/pages/ToolsFramework.tsx
View File

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