fix(web): 修复当跳往扩展页面的导航项位于已有导航项的下面时，此扩展页面的导航结构不显示的问题 (#1393)

![img_v3_02dl_5906595d-858e-42f4-a7bb-b244b6ce3ceg](https://github.com/user-attachments/assets/f609d4ad-88aa-4764-b603-a01e8b231d9d) 主要逻辑： 1. 如果一个导航项的任何一个子项被选中，那么一个导航项也会被选中，而即使此导航项本身的path和当前path没有关系 2. 大屏幕的侧边栏显示的子导航为第一个被选中的一级导航项的子项
PKUHPC · Aug 12, 2024 · d3de802 · d3de802
1 parent acb1992
commit d3de802
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 32 deletions.
diff --git a/.changeset/eighty-pandas-roll.md b/.changeset/eighty-pandas-roll.md
@@ -0,0 +1,5 @@
+---
+"@scow/lib-web": patch
+---
+
+UI扩展修复当跳往扩展页面的导航项位于已有导航项的下面时，此扩展页面的导航结构不显示的问题
diff --git 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
@@ -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);
   };

diff --git 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,19 @@ export const BaseLayout: React.FC<PropsWithChildren<Props>> = ({
 
   const finalRoutes = finalRoutesData ?? routes;
 
-  const firstLevelRoute = finalRoutes.find((x) => match(x, router.asPath));
+  const activeKeys = useMemo(() =>
+    finalRoutes
+      ? [...calcActiveKeys(finalRoutes, router.asPath)]
+      : []
+  , [finalRoutes, router.asPath]);
+
+  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 +201,13 @@ export const BaseLayout: React.FC<PropsWithChildren<Props>> = ({
         languageId={languageId}
         right={headerRightContent}
         navbarLinks={[...extensionNavbarLinks ?? [], ...headerNavbarLinks ?? []]}
+        activeKeys={activeKeys}
       />
       <StyledLayout>
         {
           hasSidebar ? (
             <SideNav
+              activeKeys={activeKeys}
               pathname={router.asPath}
               collapsed={sidebarCollapsed}
               routes={sidebarRoutes}

diff --git a/libs/web/src/layouts/base/SideNav/index.tsx b/libs/web/src/layouts/base/SideNav/index.tsx
@@ -15,7 +15,7 @@
 import { arrayContainsElement } from "@scow/utils";
 import { Layout, Menu } from "antd";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { calcSelectedKeys, createMenuItems } from "src/layouts/base/common";
+import { createMenuItems } from "src/layouts/base/common";
 import { antdBreakpoints } from "src/layouts/base/constants";
 import { NavItemProps } from "src/layouts/base/types";
 import { styled } from "styled-components";
@@ -32,6 +32,7 @@ interface Props {
 
   routes: NavItemProps[];
   pathname: string;
+  activeKeys: string[];
 
 }
 
@@ -78,7 +79,7 @@ function getAllParentKeys(routes: NavItemProps[]): string[] {
 }
 
 export const SideNav: React.FC<Props> = ({
-  collapsed, routes, setCollapsed, pathname,
+  collapsed, routes, setCollapsed, pathname, activeKeys,
 }) => {
 
   const parentKeys = useMemo(() => getAllParentKeys(routes), [routes]);
@@ -118,14 +119,12 @@ export const SideNav: React.FC<Props> = ({
 
   }, [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<Props> = ({
       >
         <Menu
           mode="inline"
-          selectedKeys={selectedKeys}
+          selectedKeys={activeKeys}
           {
             ...collapsed
               ? undefined

diff --git a/libs/web/src/layouts/base/common.tsx b/libs/web/src/layouts/base/common.tsx
@@ -80,19 +80,26 @@ export function createMenuItems(
   return items;
 }
 
-export function calcSelectedKeys(links: NavItemProps[], pathname: string) {
+export function calcActiveKeys(links: NavItemProps[], pathname: string): Set<string> {
 
-  return links.reduce((prev, curr) => {
-    if (arrayContainsElement(curr.children)) {
-      prev.push(...calcSelectedKeys(curr.children, pathname));
+  const selectedKeys = new Set<string>();
+
+  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
@@ -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<Props> = ({
-  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<Props> = ({
         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<Props> = ({
               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
@@ -86,6 +86,7 @@ interface Props {
   languageId: string;
   right?: React.ReactNode;
   navbarLinks?: HeaderNavbarLink[];
+  activeKeys: string[];
 }
 
 
@@ -94,7 +95,7 @@ export const Header: React.FC<Props> = ({
   setSidebarCollapsed, sidebarCollapsed,
   pathname, user, logout,
   basePath, userLinks,
-  languageId,
+  languageId, activeKeys,
   navbarLinks, right,
 }) => {
 
@@ -132,6 +133,7 @@ export const Header: React.FC<Props> = ({
       <MenuPart>
         <BigScreenMenu
           pathname={pathname}
+          activeKeys={activeKeys}
           routes={routes}
         />
         <MenuPartPlaceholder />