From bc82572fa83a5fea5d1b20c91237b34bd35e7937 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Thu, 12 Oct 2023 01:51:56 +0800 Subject: [PATCH] Optimize tools route. Optimize multiple menu stylesheet. --- src/assets/css/pages/tools-framework.scss | 18 +++- src/global.d.ts | 11 +++ src/pages/ToolsFramework.tsx | 83 +++++++++++------ src/pages/tools/All.tsx | 7 ++ src/router/index.tsx | 71 +-------------- src/router/tools.tsx | 106 ++++++++++++++++++++++ 6 files changed, 196 insertions(+), 100 deletions(-) create mode 100644 src/pages/tools/All.tsx create mode 100644 src/router/tools.tsx diff --git a/src/assets/css/pages/tools-framework.scss b/src/assets/css/pages/tools-framework.scss index c1214eb..c23a522 100644 --- a/src/assets/css/pages/tools-framework.scss +++ b/src/assets/css/pages/tools-framework.scss @@ -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; + } } } } diff --git a/src/global.d.ts b/src/global.d.ts index aa1a600..ac9c459 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -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 diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx index f59a243..7c2ef8b 100644 --- a/src/pages/ToolsFramework.tsx +++ b/src/pages/ToolsFramework.tsx @@ -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 = () => { <>
-
氦工具
+
氮工具
    +
  • +
    +
  • - isPending ? ' pending' : isActive ? ' active' : '' + isPending ? 'pending' : isActive ? 'active' : '' } > {routeChildren ? ( @@ -36,29 +39,58 @@ const ToolsFramework: React.FC = () => { {(routeChildren[0].handle as RouteHandle).name} + ) : ( + '主页' + )} + +
    • +
  • + + isPending ? ' pending' : isActive ? ' active' : '' + } + > + {routeChildren ? ( + <> + + + {(routeChildren[1].handle as RouteHandle).name} + + ) : ( '全部工具' )} -
    • {routeChildren?.map((route) => { return (route.handle as RouteHandle).menu && - route.id !== 'tools' ? ( -
  • + route.id !== 'tools' && + route.id !== 'tools-all' ? ( +
  • isPending ? 'pending' : isActive ? 'active' : '' } > - + {(route.handle as RouteHandle).icon ? ( + + ) : undefined} {(route.handle as RouteHandle).name} @@ -85,14 +117,17 @@ const ToolsFramework: React.FC = () => { : '' } > - + {(subRoute.handle as RouteHandle) + .icon ? ( + + ) : undefined} { ( @@ -102,18 +137,12 @@ const ToolsFramework: React.FC = () => {
    • - ) : ( - <> - ) + ) : undefined })}
- ) : ( - <> - )} + ) : undefined} - ) : ( - <> - ) + ) : undefined })}
diff --git a/src/pages/tools/All.tsx b/src/pages/tools/All.tsx new file mode 100644 index 0000000..85e812d --- /dev/null +++ b/src/pages/tools/All.tsx @@ -0,0 +1,7 @@ +import React from 'react' + +const All: React.FC = () => { + return <> +} + +export default All diff --git a/src/router/index.tsx b/src/router/index.tsx index 6c152d4..ea360d9 100644 --- a/src/router/index.tsx +++ b/src/router/index.tsx @@ -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: '工具', diff --git a/src/router/tools.tsx b/src/router/tools.tsx new file mode 100644 index 0000000..43ea3f6 --- /dev/null +++ b/src/router/tools.tsx @@ -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