Optimize tools route. Optimize multiple menu stylesheet.
This commit is contained in:
@@ -3,6 +3,7 @@
|
||||
.left-panel {
|
||||
width: 16%;
|
||||
background-color: constants.$origin-color;
|
||||
user-select: none;
|
||||
|
||||
.title {
|
||||
font-size: 2em;
|
||||
@@ -20,12 +21,16 @@
|
||||
margin: 4px 14px;
|
||||
|
||||
&.item {
|
||||
font-size: 1.6em;
|
||||
font-size: 1.4em;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
:hover {
|
||||
background-color: #4E47BB;
|
||||
a.active {
|
||||
color: constants.$origin-color;
|
||||
background-color: constants.$main-color;
|
||||
}
|
||||
a.pending {
|
||||
background-color: #123213;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -41,12 +46,13 @@
|
||||
|
||||
.text {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.separate {
|
||||
height: 0;
|
||||
margin: 10px 0;
|
||||
border: {
|
||||
width: 1px;
|
||||
color: constants.$font-secondary-color;
|
||||
@@ -54,6 +60,10 @@
|
||||
};
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
&.item:hover {
|
||||
background-color: constants.$background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
11
src/global.d.ts
vendored
11
src/global.d.ts
vendored
@@ -10,6 +10,17 @@ interface ImportMeta {
|
||||
readonly env: ImportMetaEnv
|
||||
}
|
||||
|
||||
type ToolsJsonObject = {
|
||||
path: string
|
||||
id: string
|
||||
component?: React.ComponentType
|
||||
name?: string
|
||||
icon?: IconComponent
|
||||
menu?: boolean
|
||||
auth?: boolean
|
||||
children?: ToolsJsonObject[]
|
||||
}
|
||||
|
||||
type RouteHandle = {
|
||||
name?: string
|
||||
menu?: boolean
|
||||
|
||||
@@ -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>
|
||||
|
||||
7
src/pages/tools/All.tsx
Normal file
7
src/pages/tools/All.tsx
Normal file
@@ -0,0 +1,7 @@
|
||||
import React from 'react'
|
||||
|
||||
const All: React.FC = () => {
|
||||
return <></>
|
||||
}
|
||||
|
||||
export default All
|
||||
@@ -1,4 +1,5 @@
|
||||
import React from 'react'
|
||||
import tools from '@/router/tools'
|
||||
|
||||
const routes: RouteObject[] = [
|
||||
{
|
||||
@@ -19,75 +20,7 @@ const routes: RouteObject[] = [
|
||||
path: '/tools',
|
||||
id: 'toolsFramework',
|
||||
Component: React.lazy(() => import('@/pages/ToolsFramework')),
|
||||
children: [
|
||||
{
|
||||
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
|
||||
}
|
||||
}
|
||||
],
|
||||
children: tools,
|
||||
handle: {
|
||||
name: '工具',
|
||||
title: '工具',
|
||||
|
||||
106
src/router/tools.tsx
Normal file
106
src/router/tools.tsx
Normal 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
|
||||
Reference in New Issue
Block a user