Optimize tools route. Optimize multiple menu stylesheet.

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 {
+          a.active {
-            background-color: #4E47BB;
+            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;
+        }
       }
     }
   }

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

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,12 +13,16 @@ 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' : ''
                                     }
@@ -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' ? (
+                                    route.id !== 'tools' &&
-                                    <li className={'item'} key={route.id}>
+                                    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' : ''
                                             }
                                         >
+                                            {(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,6 +117,8 @@ const ToolsFramework: React.FC = () => {
                                                                         : ''
                                                                 }
                                                             >
+                                                                {(subRoute.handle as RouteHandle)
+                                                                    .icon ? (
                                                                     <Icon
                                                                         className={'icon'}
                                                                         component={
@@ -93,6 +127,7 @@ const ToolsFramework: React.FC = () => {
                                                                             ).icon
                                                                         }
                                                                     />
+                                                                ) : undefined}
                                                                 <span className={'text'}>
                                                                     {
                                                                         (
@@ -102,18 +137,12 @@ const ToolsFramework: React.FC = () => {
                                                                 </span>
                                                             </NavLink>
                                                         </li>
-                                                    ) : (
+                                                    ) : undefined
-                                                        <></>
-                                                    )
                                                 })}
                                             </ul>
-                                        ) : (
+                                        ) : undefined}
-                                            <></>
-                                        )}
                                     </li>
-                                ) : (
+                                ) : undefined
-                                    <></>
-                                )
                             })}
                         </ul>
                     </div>

src/pages/tools/All.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const All: React.FC = () => {
+    return <></>
+}
+
+export default All

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: [
+                children: tools,
-                    {
-                        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
-                        }
-                    }
-                ],
                 handle: {
                     name: '工具',
                     title: '工具',

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