From bca7a0f6e027b08c04ca3deb5f3d30fd3c98bbb1 Mon Sep 17 00:00:00 2001 From: Chen Junda Date: Sun, 11 Aug 2024 10:46:44 +0800 Subject: [PATCH 1/4] fix --- .changeset/eighty-pandas-roll.md | 5 ++++ libs/web/src/layouts/base/BaseLayout.tsx | 15 +++++++++-- libs/web/src/layouts/base/SideNav/index.tsx | 13 +++++----- libs/web/src/layouts/base/common.tsx | 25 ++++++++++++------- .../src/layouts/base/header/BigScreenMenu.tsx | 19 ++++++-------- libs/web/src/layouts/base/header/index.tsx | 4 ++- 6 files changed, 51 insertions(+), 30 deletions(-) create mode 100644 .changeset/eighty-pandas-roll.md diff --git a/.changeset/eighty-pandas-roll.md b/.changeset/eighty-pandas-roll.md new file mode 100644 index 0000000000..8982ba345c --- /dev/null +++ b/.changeset/eighty-pandas-roll.md @@ -0,0 +1,5 @@ +--- +"@scow/lib-web": patch +--- + +当 UI 扩展的导航项位于已有导航项下面时，正确显示导航结构 diff --git a/libs/web/src/layouts/base/BaseLayout.tsx b/libs/web/src/layouts/base/BaseLayout.tsx index a597aa3371..55f1ceffe7 100644 --- a/libs/web/src/layouts/base/BaseLayout.tsx +++ b/libs/web/src/layouts/base/BaseLayout.tsx @@ -24,9 +24,9 @@ import { NavbarLink, navbarLinksRoute } from "src/extensions/navbarLinks"; import { fromNavItemProps, rewriteNavigationsRoute, toNavItemProps } from "src/extensions/navigations"; import { callExtensionRoute } from "src/extensions/routes"; import { UiExtensionStoreData } from "src/extensions/UiExtensionStore"; +import { calcActiveKeys } from "src/layouts/base/common"; import { Footer } from "src/layouts/base/Footer"; import { Header, HeaderNavbarLink } from "src/layouts/base/header"; -import { match } from "src/layouts/base/matchers"; import { SideNav } from "src/layouts/base/SideNav"; import { NavItemProps, UserInfo, UserLink } from "src/layouts/base/types"; import { useDarkMode } from "src/layouts/darkMode"; @@ -126,12 +126,21 @@ export const BaseLayout: React.FC> = ({ const finalRoutes = finalRoutesData ?? routes; - const firstLevelRoute = finalRoutes.find((x) => match(x, router.asPath)); + const activeKeys = useMemo(() => + finalRoutes + ? [...calcActiveKeys(finalRoutes, router.asPath)] + : [] + , [finalRoutes, router.asPath]); + + console.log(activeKeys); + + const firstLevelRoute = finalRoutes.find((x) => activeKeys.includes(x.path)); const sidebarRoutes = md ? firstLevelRoute?.children : finalRoutes; const hasSidebar = arrayContainsElement(sidebarRoutes); + // navbar links const { data: extensionNavbarLinks } = useAsync({ promiseFn: useCallback(async () => { @@ -194,11 +203,13 @@ export const BaseLayout: React.FC> = ({ languageId={languageId} right={headerRightContent} navbarLinks={[...extensionNavbarLinks ?? [], ...headerNavbarLinks ?? []]} + activeKeys={activeKeys} /> { hasSidebar ? ( = ({ - collapsed, routes, setCollapsed, pathname, + collapsed, routes, setCollapsed, pathname, activeKeys, }) => { const parentKeys = useMemo(() => getAllParentKeys(routes), [routes]); @@ -118,14 +119,12 @@ export const SideNav: React.FC = ({ }, [openKeys, parentKeys]); - const selectedKeys = useMemo(() => calcSelectedKeys(routes, pathname), [routes, pathname]); - // 账户管理页面，联动横向菜单栏展开相应的侧面菜单栏 useEffect(() => { if (menuFocusedRef.current) { - setOpenKeys([selectedKeys[1]]); + setOpenKeys([activeKeys[1]]); } - }, [selectedKeys]); + }, [activeKeys]); useEffect(() => { if (window.innerWidth <= antdBreakpoints[breakpoint]) { @@ -152,7 +151,7 @@ export const SideNav: React.FC = ({ > { - return links.reduce((prev, curr) => { - if (arrayContainsElement(curr.children)) { - prev.push(...calcSelectedKeys(curr.children, pathname)); + const selectedKeys = new Set(); + + for (const link of links) { + if (arrayContainsElement(link.children)) { + const childrenSelectedKeys = calcActiveKeys(link.children, pathname); + for (const childKey of childrenSelectedKeys) { + selectedKeys.add(childKey); + } } + if ( - (curr.path === "/" && pathname === "/") || - (curr.path !== "/" && curr.path !== "" && match(curr, pathname)) + link.children?.some((x) => selectedKeys.has(x.path)) || + (link.path === "/" && pathname === "/") || + (link.path !== "/" && link.path !== "" && match(link, pathname)) ) { - prev.push(curr.path); + selectedKeys.add(link.path); } + } - return prev; - }, [] as string[]); + return selectedKeys; } diff --git a/libs/web/src/layouts/base/header/BigScreenMenu.tsx b/libs/web/src/layouts/base/header/BigScreenMenu.tsx index 8e3210ed4a..be1784e344 100644 --- a/libs/web/src/layouts/base/header/BigScreenMenu.tsx +++ b/libs/web/src/layouts/base/header/BigScreenMenu.tsx @@ -14,9 +14,9 @@ import { arrayContainsElement } from "@scow/utils"; import { Menu } from "antd"; -import Router from "next/router"; -import React, { useMemo } from "react"; -import { calcSelectedKeys, createMenuItems, EXTERNAL_URL_PREFIX } from "src/layouts/base/common"; +import { useRouter } from "next/router"; +import React from "react"; +import { createMenuItems, EXTERNAL_URL_PREFIX } from "src/layouts/base/common"; import { antdBreakpoints } from "src/layouts/base/constants"; import { NavItemProps } from "src/layouts/base/types"; import { styled } from "styled-components"; @@ -41,17 +41,14 @@ interface Props { routes?: NavItemProps[]; className?: string; pathname: string; + activeKeys: string[]; } export const BigScreenMenu: React.FC = ({ - routes, className, pathname, + routes, className, pathname, activeKeys, }) => { - const selectedKeys = useMemo(() => - routes - ? calcSelectedKeys(routes, pathname) - : [] - , [routes, pathname]); + const router = useRouter(); const handleMenuClick = (e: any) => { const clickedRoute = routes?.find((route) => route.path === e.key); @@ -64,7 +61,7 @@ export const BigScreenMenu: React.FC = ({ if (EXTERNAL_URL_PREFIX.some((pref) => target.startsWith(pref))) { window.location.href = target; } else { - void Router.push(target); + void router.push(target); } } } @@ -79,7 +76,7 @@ export const BigScreenMenu: React.FC = ({ style={{ minWidth: 0, flex: "auto", border: 0 }} theme="light" mode="horizontal" - selectedKeys={selectedKeys} + selectedKeys={activeKeys} onClick={handleMenuClick} items={createMenuItems(routes, true)} /> diff --git a/libs/web/src/layouts/base/header/index.tsx b/libs/web/src/layouts/base/header/index.tsx index 9a0e09964c..0742baa3c0 100644 --- a/libs/web/src/layouts/base/header/index.tsx +++ b/libs/web/src/layouts/base/header/index.tsx @@ -86,6 +86,7 @@ interface Props { languageId: string; right?: React.ReactNode; navbarLinks?: HeaderNavbarLink[]; + activeKeys: string[]; } @@ -94,7 +95,7 @@ export const Header: React.FC = ({ setSidebarCollapsed, sidebarCollapsed, pathname, user, logout, basePath, userLinks, - languageId, + languageId, activeKeys, navbarLinks, right, }) => { @@ -132,6 +133,7 @@ export const Header: React.FC = ({ From 8efa35d26159e26913d5ca2d9262bac909aa4c76 Mon Sep 17 00:00:00 2001 From: Chen Junda Date: Sun, 11 Aug 2024 10:48:37 +0800 Subject: [PATCH 2/4] remove log --- libs/web/src/layouts/base/BaseLayout.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/libs/web/src/layouts/base/BaseLayout.tsx b/libs/web/src/layouts/base/BaseLayout.tsx index 55f1ceffe7..0cfedf8bc8 100644 --- a/libs/web/src/layouts/base/BaseLayout.tsx +++ b/libs/web/src/layouts/base/BaseLayout.tsx @@ -132,8 +132,6 @@ export const BaseLayout: React.FC> = ({ : [] , [finalRoutes, router.asPath]); - console.log(activeKeys); - const firstLevelRoute = finalRoutes.find((x) => activeKeys.includes(x.path)); const sidebarRoutes = md ? firstLevelRoute?.children : finalRoutes; From ac1682aab06ffe1eeaf349a20d3033bfc9552dad Mon Sep 17 00:00:00 2001 From: Chen Junda Date: Sun, 11 Aug 2024 10:50:27 +0800 Subject: [PATCH 3/4] update changeset --- .changeset/eighty-pandas-roll.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/eighty-pandas-roll.md b/.changeset/eighty-pandas-roll.md index 8982ba345c..c4980f97f8 100644 --- a/.changeset/eighty-pandas-roll.md +++ b/.changeset/eighty-pandas-roll.md @@ -2,4 +2,4 @@ "@scow/lib-web": patch --- -当 UI 扩展的导航项位于已有导航项下面时，正确显示导航结构 +UI扩展修复当跳往扩展页面的导航项位于已有导航项的下面时，此扩展页面的导航结构不显示的问题 From c2c39e7ea4d29d42e329b2f7049095c6efdb9c98 Mon Sep 17 00:00:00 2001 From: Chen Junda Date: Mon, 12 Aug 2024 18:45:13 +0800 Subject: [PATCH 4/4] =?UTF-8?q?=E4=BF=AE=E5=A4=8DextensionName=E4=B8=BA?= =?UTF-8?q?=E9=9C=80=E8=A6=81encode=E7=9A=84=E5=AD=97=E7=AC=A6=E6=97=B6?= =?UTF-8?q?=E4=B8=8D=E5=8C=B9=E9=85=8D=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/portal-web/config/portal.yaml | 2 +- libs/web/src/extensions/navigations.tsx | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/apps/portal-web/config/portal.yaml b/apps/portal-web/config/portal.yaml index 84f0bbc012..0d104fde63 100644 --- a/apps/portal-web/config/portal.yaml +++ b/apps/portal-web/config/portal.yaml @@ -84,5 +84,5 @@ shell: true # children: [] uiExtension: - - name: test1 + - name: test测试 url: http://localhost:16566 diff --git a/libs/web/src/extensions/navigations.tsx b/libs/web/src/extensions/navigations.tsx index a6ce70be56..500179930d 100644 --- a/libs/web/src/extensions/navigations.tsx +++ b/libs/web/src/extensions/navigations.tsx @@ -94,7 +94,9 @@ export const toNavItemProps = ( if (isUrl(returnedPath)) { return returnedPath; } const parts = ["/extensions"]; - if (extensionName) { parts.push(extensionName); } + if (extensionName) { + parts.push(encodeURIComponent(extensionName)); + } parts.push(returnedPath); return join(...parts); };