Add ToolsFramework #32
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="vite/client" />
|
||||||
|
/// <reference types="./ant-design" />
|
||||||
|
|
||||||
interface ImportMetaEnv {
|
interface ImportMetaEnv {
|
||||||
readonly VITE_API_URL: string
|
readonly VITE_API_URL: string
|
||||||
@@ -16,6 +17,7 @@ type RouteHandle = {
|
|||||||
titlePrefix?: string
|
titlePrefix?: string
|
||||||
title?: string
|
title?: string
|
||||||
titlePostfix?: string
|
titlePostfix?: string
|
||||||
|
icon?: IconComponent
|
||||||
}
|
}
|
||||||
|
|
||||||
type _Response<T> = {
|
type _Response<T> = {
|
||||||
@@ -1,7 +1,127 @@
|
|||||||
import React from 'react'
|
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 = () => {
|
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
|
export default ToolsFramework
|
||||||
|
|||||||
@@ -26,6 +26,7 @@ const routes: RouteObject[] = [
|
|||||||
Component: React.lazy(() => import('@/pages/tools')),
|
Component: React.lazy(() => import('@/pages/tools')),
|
||||||
handle: {
|
handle: {
|
||||||
name: '全部工具',
|
name: '全部工具',
|
||||||
|
icon: React.lazy(() => import('~icons/fatweb/logo.jsx')),
|
||||||
menu: true,
|
menu: true,
|
||||||
auth: false
|
auth: false
|
||||||
}
|
}
|
||||||
@@ -34,11 +35,57 @@ const routes: RouteObject[] = [
|
|||||||
path: 'translation',
|
path: 'translation',
|
||||||
id: 'tools-translation',
|
id: 'tools-translation',
|
||||||
Component: React.lazy(() => import('@/pages/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: {
|
handle: {
|
||||||
name: '翻译',
|
name: '翻译',
|
||||||
menu: true,
|
menu: true,
|
||||||
auth: 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: {
|
||||||
|
|||||||
Reference in New Issue
Block a user