From 6a7cae831975441ffbf220bba967fd1da8fe84f2 Mon Sep 17 00:00:00 2001 From: FatttSnake Date: Thu, 12 Oct 2023 16:18:24 +0800 Subject: [PATCH] Optimize submenu in ToolsFramework. Optimize code --- src/AuthRoute.tsx | 8 +- src/assets/css/constants.scss | 7 +- src/assets/css/pages/tools-framework.scss | 88 +++++++--- src/components/common/FitCenter.tsx | 2 +- src/components/common/FitFullScreen.tsx | 2 +- src/components/common/Indicator.tsx | 2 +- src/global.d.ts | 3 + src/pages/HomeFramework.tsx | 20 +-- src/pages/ToolsFramework.tsx | 199 ++++++++++++---------- src/router/tools.tsx | 11 +- src/utils/common.ts | 6 +- 11 files changed, 214 insertions(+), 134 deletions(-) diff --git a/src/AuthRoute.tsx b/src/AuthRoute.tsx index 88565bc..7335e5e 100644 --- a/src/AuthRoute.tsx +++ b/src/AuthRoute.tsx @@ -16,9 +16,9 @@ const AuthRoute = () => { if (matches.some(({ handle }) => (handle as RouteHandle)?.auth) && !isLogin) { return ( ((props, ref return ( <>
= (props) => { return (
  • diff --git a/src/global.d.ts b/src/global.d.ts index ac9c459..e64304b 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -15,6 +15,9 @@ type ToolsJsonObject = { id: string component?: React.ComponentType name?: string + titlePrefix?: string + title?: string + titlePostfix?: string icon?: IconComponent menu?: boolean auth?: boolean diff --git a/src/pages/HomeFramework.tsx b/src/pages/HomeFramework.tsx index e7c93fc..d63978e 100644 --- a/src/pages/HomeFramework.tsx +++ b/src/pages/HomeFramework.tsx @@ -84,7 +84,7 @@ const HomeFramework: React.FC = () => { >
    -
    +
    FatWeb @@ -115,11 +115,9 @@ const HomeFramework: React.FC = () => { key={subRoute.id} > { })}
    {
    -
    +
      {routeChildren?.map((route) => { return ( diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx index 7c2ef8b..a0dff56 100644 --- a/src/pages/ToolsFramework.tsx +++ b/src/pages/ToolsFramework.tsx @@ -1,13 +1,38 @@ import React from 'react' import FitFullScreen from '@/components/common/FitFullScreen' import '@/assets/css/pages/tools-framework.scss' -import router from '@/router' import Icon from '@ant-design/icons' +import { toolsJsonObjects } from '@/router/tools.tsx' +import _ from 'lodash' const ToolsFramework: React.FC = () => { - const frameworkRoute = useMatches()[1] - const routeId = frameworkRoute.id - const routeChildren = router.routes[0].children?.find((value) => value.id === routeId)?.children + const location = useLocation() + + const [multipleMenuShown, setMultipleMenuShown] = useState( + toolsJsonObjects.map((value) => ({ + id: value.id, + path: value.path, + shown: `${location.pathname}/`.startsWith(`/tools/${value.path}/`) + })) + ) + + useEffect(() => { + const temp = _.clone(multipleMenuShown) + temp.forEach((value) => { + value.shown = `${location.pathname}/`.startsWith(`/tools/${value.path}/`) + }) + setMultipleMenuShown(temp) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [location]) + + const switchSubmenu = (menuId: string) => { + return () => { + const temp = _.clone(multipleMenuShown) + const menu = temp.find(({ id }) => id === menuId) + menu && (menu.shown = !menu.shown) + setMultipleMenuShown(temp) + } + } return ( <> @@ -20,92 +45,93 @@ const ToolsFramework: React.FC = () => {
    • - - isPending ? 'pending' : isActive ? 'active' : '' - } - > - {routeChildren ? ( - <> - - - {(routeChildren[0].handle as RouteHandle).name} - - - ) : ( - '主页' - )} - +
      + + isPending ? 'pending' : isActive ? 'active' : '' + } + > + + {toolsJsonObjects[0].name} + +
    • - - isPending ? ' pending' : isActive ? ' active' : '' - } - > - {routeChildren ? ( - <> - - - {(routeChildren[1].handle as RouteHandle).name} - - - ) : ( - '全部工具' - )} - +
      + + isPending ? ' pending' : isActive ? ' active' : '' + } + > + + {toolsJsonObjects[1].name} + +
      • - {routeChildren?.map((route) => { - return (route.handle as RouteHandle).menu && - route.id !== 'tools' && - route.id !== 'tools-all' ? ( + {toolsJsonObjects.map((tool) => { + return tool.menu && + tool.id !== 'tools' && + tool.id !== 'tools-all' ? (
    • id === tool.id + )?.shown ?? false + ? ' show' + : '' + }` + : 'item' + } + key={tool.id} > - - isPending ? 'pending' : isActive ? 'active' : '' - } - > - {(route.handle as RouteHandle).icon ? ( - +
      + {tool.children ? ( +
      + +
      ) : undefined} - - {(route.handle as RouteHandle).name} - - - {route.children ? ( + + isPending ? 'pending' : isActive ? 'active' : '' + } + > + {tool.children ? undefined : tool.icon ? ( + + ) : undefined} + {tool.name} + +
      + {tool.children ? (
        - {route.children.map((subRoute) => { - return (subRoute.handle as RouteHandle).menu ? ( -
      • + {tool.children.map((subTool) => { + return subTool.menu ? ( +
      • { : '' } > - {(subRoute.handle as RouteHandle) - .icon ? ( + {subTool.icon ? ( ) : undefined} - { - ( - subRoute.handle as RouteHandle - ).name - } + {subTool.name}
        • diff --git a/src/router/tools.tsx b/src/router/tools.tsx index 43ea3f6..5c675d2 100644 --- a/src/router/tools.tsx +++ b/src/router/tools.tsx @@ -1,6 +1,8 @@ import React from 'react' -const toolsJsonObjects: ToolsJsonObject[] = [ +const defaultTitle = '氮工具' + +export const toolsJsonObjects: ToolsJsonObject[] = [ { path: '', id: 'tools', @@ -15,6 +17,7 @@ const toolsJsonObjects: ToolsJsonObject[] = [ id: 'tools-all', component: React.lazy(() => import('@/pages/tools')), name: '全部工具', + titlePostfix: ' - 全部工具', icon: React.lazy(() => import('~icons/fatweb/logo.jsx')), menu: true, auth: false @@ -86,6 +89,9 @@ const tools: RouteObject[] = toolsJsonObjects.map((value) => ({ Component: value.component, handle: { name: value.name, + titlePrefix: value.titlePrefix, + title: value.title ?? defaultTitle, + titlePostfix: value.titlePostfix, icon: value.icon, menu: value.menu, auth: value.auth @@ -96,6 +102,9 @@ const tools: RouteObject[] = toolsJsonObjects.map((value) => ({ Component: value.component, handle: { name: value.name, + titlePrefix: value.titlePrefix, + title: value.title ?? defaultTitle, + titlePostfix: value.titlePostfix, icon: value.icon, menu: value.menu, auth: value.auth diff --git a/src/utils/common.ts b/src/utils/common.ts index 96f1784..7d0f9ce 100644 --- a/src/utils/common.ts +++ b/src/utils/common.ts @@ -18,14 +18,14 @@ export function setCookie( daysToLive: number | null, path: string | null ): void { - let cookie = name + '=' + encodeURIComponent(value) + let cookie = `${name}=${encodeURIComponent(value)}` if (typeof daysToLive === 'number') { cookie = `${cookie}; max-age=${daysToLive * 24 * 60 * 60}` } if (typeof path === 'string') { - cookie += '; path=' + path + cookie = `${cookie}; path=${path}` } document.cookie = cookie @@ -61,7 +61,7 @@ export function getToken(): string | null { } export function removeCookie(name: string): void { - document.cookie = name + '=; max-age=0' + document.cookie = `${name}=; max-age=0` } export function removeLocalStorage(name: string): void {