Add menu in ToolsFramework
This commit is contained in:
8
src/ant-design.d.ts
vendored
Normal file
8
src/ant-design.d.ts
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
import * as React from 'react'
|
||||
import { CustomIconComponentProps } from '@ant-design/icons/es/components/Icon'
|
||||
|
||||
declare global {
|
||||
type IconComponent =
|
||||
| React.ComponentType<CustomIconComponentProps | React.SVGProps<SVGSVGElement>>
|
||||
| React.ForwardRefExoticComponent<CustomIconComponentProps>
|
||||
}
|
||||
43
src/assets/css/pages/tools-framework.scss
Normal file
43
src/assets/css/pages/tools-framework.scss
Normal file
@@ -0,0 +1,43 @@
|
||||
@use "@/assets/css/constants" as constants;
|
||||
|
||||
.left-panel {
|
||||
width: 16%;
|
||||
background-color: constants.$origin-color;
|
||||
|
||||
.title {
|
||||
font-size: 2em;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.6em;
|
||||
padding: 10px;
|
||||
color: constants.$main-color;
|
||||
}
|
||||
|
||||
.content {
|
||||
ul{
|
||||
li {
|
||||
//background-color: #4E47BB;
|
||||
margin: 4px 10px;
|
||||
padding: 4px;
|
||||
&.item {
|
||||
background-color: #4E47BB;
|
||||
}
|
||||
|
||||
.separate {
|
||||
height: 0;
|
||||
border: {
|
||||
width: 1px;
|
||||
color: constants.$font-secondary-color;
|
||||
style: solid;
|
||||
};
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
flex: 1;
|
||||
background-color: constants.$background-color;
|
||||
}
|
||||
2
src/vite-env.d.ts → src/global.d.ts
vendored
2
src/vite-env.d.ts → src/global.d.ts
vendored
@@ -1,4 +1,5 @@
|
||||
/// <reference types="vite/client" />
|
||||
/// <reference types="./ant-design" />
|
||||
|
||||
interface ImportMetaEnv {
|
||||
readonly VITE_API_URL: string
|
||||
@@ -16,6 +17,7 @@ type RouteHandle = {
|
||||
titlePrefix?: string
|
||||
title?: string
|
||||
titlePostfix?: string
|
||||
icon?: IconComponent
|
||||
}
|
||||
|
||||
type _Response<T> = {
|
||||
@@ -1,7 +1,127 @@
|
||||
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 = () => {
|
||||
return <></>
|
||||
const frameworkRoute = useMatches()[1]
|
||||
const routeId = frameworkRoute.id
|
||||
const routeChildren = router.routes[0].children?.find((value) => value.id === routeId)?.children
|
||||
|
||||
return (
|
||||
<>
|
||||
<FitFullScreen className={'flex-horizontal'}>
|
||||
<div className={'left-panel'}>
|
||||
<div className={'title'}>氦工具</div>
|
||||
<div className={'content'}>
|
||||
<ul>
|
||||
<li className={'item'}>
|
||||
<NavLink
|
||||
to={''}
|
||||
className={({ isActive, isPending }) =>
|
||||
isPending ? ' pending' : isActive ? ' active' : ''
|
||||
}
|
||||
>
|
||||
{routeChildren ? (
|
||||
<>
|
||||
<Icon
|
||||
className={'icon'}
|
||||
component={
|
||||
(routeChildren[0].handle as RouteHandle).icon
|
||||
}
|
||||
/>
|
||||
<span className={'text'}>
|
||||
{(routeChildren[0].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}>
|
||||
<NavLink
|
||||
to={route.path ?? ''}
|
||||
className={({ isActive, isPending }) =>
|
||||
isPending ? 'pending' : isActive ? 'active' : ''
|
||||
}
|
||||
>
|
||||
<Icon
|
||||
className={'icon'}
|
||||
component={(route.handle as RouteHandle).icon}
|
||||
/>
|
||||
<span className={'text'}>
|
||||
{(route.handle as RouteHandle).name}
|
||||
</span>
|
||||
</NavLink>
|
||||
{route.children ? (
|
||||
<ul className={'submenu'}>
|
||||
{route.children.map((subRoute) => {
|
||||
return (subRoute.handle as RouteHandle).menu ? (
|
||||
<li className={'item'} key={subRoute.id}>
|
||||
<NavLink
|
||||
to={
|
||||
(route.path ?? '') +
|
||||
'/' +
|
||||
(subRoute.path ?? '')
|
||||
}
|
||||
className={({
|
||||
isActive,
|
||||
isPending
|
||||
}) =>
|
||||
isPending
|
||||
? 'pending'
|
||||
: isActive
|
||||
? 'active'
|
||||
: ''
|
||||
}
|
||||
>
|
||||
<Icon
|
||||
className={'icon'}
|
||||
component={
|
||||
(
|
||||
subRoute.handle as RouteHandle
|
||||
).icon
|
||||
}
|
||||
/>
|
||||
<span className={'text'}>
|
||||
{
|
||||
(
|
||||
subRoute.handle as RouteHandle
|
||||
).name
|
||||
}
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
) : (
|
||||
<></>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</li>
|
||||
) : (
|
||||
<></>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className={'right-panel'}></div>
|
||||
</FitFullScreen>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default ToolsFramework
|
||||
|
||||
@@ -26,6 +26,7 @@ const routes: RouteObject[] = [
|
||||
Component: React.lazy(() => import('@/pages/tools')),
|
||||
handle: {
|
||||
name: '全部工具',
|
||||
icon: React.lazy(() => import('~icons/fatweb/logo.jsx')),
|
||||
menu: true,
|
||||
auth: false
|
||||
}
|
||||
@@ -34,11 +35,57 @@ const routes: RouteObject[] = [
|
||||
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: {
|
||||
|
||||
Reference in New Issue
Block a user