@zat-design/sisyphus-react 4.6.5-beta.6 → 4.6.5

package/es/ProLayout/components/Layout/Menu/FoldMenu/index.js

@@ -2,36 +2,33 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
 import { Popover, Tooltip } from "antd";
 import classnames from "classnames";
-import { Link as RouterLink, useLocation } from "react-router-dom";
+import { Link as RouterLink } from "react-router-dom";
 import ProIcon from "../../../../../ProIcon";
 import SideMenu from "../SideMenu";
 import { LayoutContext } from "../../../../index";
-import { findMenuItemByKey, resolveMenuKeyIdPath } from "../../../../utils";
+import { getUrlParams, getPathNameKey, findMenuItemByKey } from "../../../../utils";
 const Link = RouterLink;
 const FoldMenu = (props) => {
   const { style, dataSource, onMenuClick } = props;
   const { menus, iconfontUrl, notice, collapsed, headerHeight } = dataSource;
-  const location = useLocation();
+  const pathNamePrefix = `/${window.location.pathname.split("/")[1]}`;
   const noticeCls = classnames({
     "pro-layout-menu-tooltip": true,
     "pro-layout-menu-tooltip-has-notice": notice,
     "pro-layout-menu-tooltip-nav-open": collapsed
   });
-  const { selectedPath, onSelected } = useContext(LayoutContext) || {
+  const { selectedPath, onSelected, menuSelectedPath } = useContext(LayoutContext) || {
     selectedPath: "",
     onSelected: () => {
     }
   };
-  const currentKeyIdPath = resolveMenuKeyIdPath({
-    menus,
-    pathname: location.pathname,
-    search: location.search,
-    selectedPath
-  });
   return /* @__PURE__ */ jsx("div", { className: "pro-layout-menu-fold", style: { ...style }, children: /* @__PURE__ */ jsx("ul", { className: "pro-layout-menu-fold-list", style: { ...style }, children: menus.filter((item) => !item.hideInMenu).map((item, index) => {
     var _a;
     const { id, url, name, icon, imgUrl, imgActiveUrl, children } = item;
     const toPath = item.redirectUrl || item.url;
+    const selectedMenu = getUrlParams("activeMenu");
+    const pathToMatch = menuSelectedPath ?? (selectedPath || selectedMenu || window.location.pathname);
+    const currentKeyIdPath = pathToMatch ? getPathNameKey({ menus, pathName: pathToMatch }) || [] : [];
     const cls = classnames({
       active: currentKeyIdPath.includes(id)
     });
@@ -41,7 +38,7 @@ const FoldMenu = (props) => {
         "img",
         {
           className: "pro-layout-icon",
-          src: currentKeyIdPath.includes(id) ? imgActiveUrl || imgUrl : imgUrl,
+          src: pathNamePrefix === url ? imgActiveUrl || imgUrl : imgUrl,
           alt: "icon"
         }
       ) : /* @__PURE__ */ jsx(

package/es/ProLayout/components/Layout/Menu/NormalMenuSelection.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+import type { MenusType } from '../../../propTypes';
+/** 单页路由命中菜单时更新入口，未命中的详情页沿用最近入口。 */
+declare const NormalMenuSelection: ({ menus, children }: {
+    menus: MenusType[];
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export default NormalMenuSelection;

package/es/ProLayout/components/Layout/Menu/NormalMenuSelection.js

@@ -0,0 +1,29 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { useContext, useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { LayoutContext } from "../../../index";
+import { getIdsByPathName } from "../../../utils";
+const NormalMenuSelection = ({ menus, children }) => {
+  const location = useLocation();
+  const context = useContext(LayoutContext);
+  const onSelected = context == null ? void 0 : context.onSelected;
+  const activeMenu = new URLSearchParams(location.search).get("activeMenu");
+  const routeMenuPath = activeMenu || (getIdsByPathName(menus, location.pathname).length ? location.pathname : "");
+  useEffect(() => {
+    if (routeMenuPath)
+      onSelected == null ? void 0 : onSelected({ selectedPath: routeMenuPath });
+  }, [routeMenuPath, onSelected]);
+  if (!context)
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  return /* @__PURE__ */ jsx(
+    LayoutContext.Provider,
+    {
+      value: { ...context, menuSelectedPath: routeMenuPath || context.selectedPath },
+      children
+    }
+  );
+};
+var NormalMenuSelection_default = NormalMenuSelection;
+export {
+  NormalMenuSelection_default as default
+};

package/es/ProLayout/components/Layout/Menu/OpenMenu/index.js

@@ -4,14 +4,15 @@ import { Menu } from "antd";
 import { useDeepCompareEffect, useSetState } from "ahooks";
 import { CaretDownOutlined } from "@ant-design/icons";
 import classnames from "classnames";
-import { Link as RouterLink, useLocation } from "react-router-dom";
+import { Link as RouterLink } from "react-router-dom";
 import cloneDeep from "lodash/cloneDeep";
 import { LayoutContext } from "../../../../index";
-import { findMenuItemByKey, resolveMenuKeyIdPath } from "../../../../utils";
+import { getIdsByPathName, findMenuItemByKey } from "../../../../utils";
 import { canOpenAsTab } from "../../../TabsManager/utils";
 import ProIcon from "../../../../../ProIcon";
 const Link = RouterLink;
 const OpenMenu = (props) => {
+  var _a;
   const { className, dataSource, style, onMenuClick, textVisible = true } = props;
   const { menus, sideMenu } = dataSource || {};
   const linkRef = useRef(null);
@@ -20,7 +21,7 @@ const OpenMenu = (props) => {
     openKeys: [],
     router: ""
   });
-  const location = useLocation();
+  const query = new URLSearchParams(window.location.search);
   const layoutContext = useContext(LayoutContext);
   const layoutSelectedPath = layoutContext == null ? void 0 : layoutContext.selectedPath;
   const layoutOnSelected = layoutContext == null ? void 0 : layoutContext.onSelected;
@@ -30,12 +31,8 @@ const OpenMenu = (props) => {
     "pro-layout-menu-text-hidden": textVisible === false,
     [`${className}`]: className
   });
-  const selectKeyIdPath = resolveMenuKeyIdPath({
-    menus,
-    pathname: location.pathname,
-    search: location.search,
-    selectedPath: layoutSelectedPath
-  }).map((item) => String(item));
+  const preferredPath = (layoutContext == null ? void 0 : layoutContext.menuSelectedPath) ?? (query.get("activeMenu") || (layoutSelectedPath === "##EMPTY##" ? null : layoutSelectedPath) || window.location.pathname);
+  const selectKeyIdPath = preferredPath ? ((_a = getIdsByPathName(menus, preferredPath)) == null ? void 0 : _a.map((item) => String(item))) || [] : [];
   const selectedRootKey = selectKeyIdPath[0];
   const itemsTransform = useMemo(() => {
     const result = cloneDeep(menus);
@@ -43,12 +40,9 @@ const OpenMenu = (props) => {
       return [];
     }
     const menuDeep = (data) => {
-      const visibleItems = data.filter(
-        (item) => !(item == null ? void 0 : item.hideInMenu) && !["TAB", "QUERY", "BUTTON"].includes(item == null ? void 0 : item.type)
-      );
-      visibleItems.forEach((item) => {
-        var _a, _b;
-        const isFirstMenu = ((_a = item.keyIdPath) == null ? void 0 : _a.length) === 1 || sideMenu && ((_b = item.keyIdPath) == null ? void 0 : _b.length) === 2;
+      data.forEach((item) => {
+        var _a2, _b, _c;
+        const isFirstMenu = ((_a2 = item.keyIdPath) == null ? void 0 : _a2.length) === 1 || sideMenu && ((_b = item.keyIdPath) == null ? void 0 : _b.length) === 2;
         item.label = /* @__PURE__ */ jsxs(
           "div",
           {
@@ -83,16 +77,21 @@ const OpenMenu = (props) => {
         ).forEach((_keyItem) => {
           delete item[_keyItem];
         });
-        const visibleChildren = Array.isArray(item == null ? void 0 : item.children) ? menuDeep(item.children) : [];
-        if (visibleChildren.length) {
-          item.children = visibleChildren;
+        if (Array.isArray(item == null ? void 0 : item.children) && ((_c = item == null ? void 0 : item.children) == null ? void 0 : _c.length) > 0) {
+          const _item = item == null ? void 0 : item.children[0];
+          if ((_item == null ? void 0 : _item.hideInMenu) || ["TAB", "QUERY", "BUTTON"].includes(_item == null ? void 0 : _item.type)) {
+            delete item.children;
+          } else {
+            menuDeep(item.children);
+          }
         } else {
           delete item.children;
         }
       });
-      return visibleItems;
+      return data;
     };
-    return menuDeep(result);
+    menuDeep(result);
+    return result;
   }, [dataSource, selectedRootKey]);
   useDeepCompareEffect(() => {
     if (Array.isArray(selectKeyIdPath)) {
@@ -141,7 +140,7 @@ const OpenMenu = (props) => {
           }
           if (menuItem && canOpenAsTab(menuItem) && shouldActivate) {
             setState({
-              selectedKeys: menuKeyPath,
+              selectedKeys: keyPath,
               router: menuRouter
             });
             layoutOnSelected == null ? void 0 : layoutOnSelected({

package/es/ProLayout/components/Layout/Menu/index.d.ts

@@ -1,4 +1,8 @@
-import type { FC } from 'react';
+import type { FC, ReactNode } from 'react';
 import type { ProLayoutType } from '../../../propTypes';
-declare const Menu: FC<ProLayoutType>;
+type MenuProps = Pick<ProLayoutType, 'mode' | 'headerHeight' | 'dataSource' | 'iconfontUrl' | 'collapsed' | 'notice' | 'pure' | 'sideMenuFooterRender' | 'onMenuClick'> & {
+    sideMenuHeaderRender?: ReactNode;
+    onToggle?: () => void;
+};
+declare const Menu: FC<MenuProps>;
 export default Menu;

package/es/ProLayout/components/Layout/Menu/index.js

@@ -3,6 +3,7 @@ import { useEffect, useRef, useState, useCallback } from "react";
 import classnames from "classnames";
 import OpenMenu from "./OpenMenu";
 import FoldMenu from "./FoldMenu";
+import NormalMenuSelection from "./NormalMenuSelection";
 const iconfontCache = /* @__PURE__ */ new Set();
 const loadIconfontScript = (url) => {
   if (!url || iconfontCache.has(url))
@@ -33,7 +34,8 @@ const Menu = (props) => {
     pure,
     sideMenuFooterRender,
     sideMenuHeaderRender,
-    onMenuClick
+    onMenuClick,
+    mode
   } = props || {};
   let menus = [];
   const menuRef = useRef(null);
@@ -110,7 +112,7 @@ const Menu = (props) => {
   if ((pure == null ? void 0 : pure.leftMenu) || pure === true) {
     return /* @__PURE__ */ jsx(Fragment, {});
   }
-  return /* @__PURE__ */ jsxs(
+  const menuDom = /* @__PURE__ */ jsxs(
     "div",
     {
       ref: menuRef,
@@ -170,6 +172,7 @@ const Menu = (props) => {
       ]
     }
   );
+  return mode === "normal" ? /* @__PURE__ */ jsx(NormalMenuSelection, { menus, children: menuDom }) : menuDom;
 };
 var Menu_default = Menu;
 export {

package/es/ProLayout/index.d.ts

@@ -4,6 +4,8 @@ import { useProLayoutTabs } from './components/TabsManager/hooks/useProLayoutTab
 import { useActiveTab } from './components/TabsManager/hooks/useActiveTab';
 interface LayoutContextValue {
     selectedPath: string;
+    /** normal 模式根据当前路由解析后的菜单路径，空字符串表示没有选中项。 */
+    menuSelectedPath?: string;
     onSelected: (params: Partial<ProLayoutStatesType>) => void;
     target: '_blank' | '_parent' | '_self' | '_top';
 }

package/es/ProLayout/index.js

@@ -129,7 +129,7 @@ const ProLayout = (props) => {
     const userData = transformMenus(dataSource, pathPrefix);
     const menuData = Array.isArray(userData) ? userData : (userData == null ? void 0 : userData.menus) || [];
     setState({ menus: menuData });
-  }, [dataSource, pathPrefix]);
+  }, [dataSource]);
   const menuDataSource = useMemo(() => {
     if (Array.isArray(menus) && menus.length > 0) {
       return { menus };
@@ -238,6 +238,7 @@ const ProLayout = (props) => {
     noticeRef: setNoticeElRef
   };
   const menuProps = {
+    mode,
     headerHeight,
     dataSource: Array.isArray(menus) ? { menus } : menus,
     iconfontUrl,

package/es/ProLayout/utils/index.d.ts

@@ -6,16 +6,6 @@ import type { MenusType } from '../propTypes';
  * @return result
  */
 export declare const getIdsByPathName: (menus: any[], activeMenu?: string) => number[];
-interface ResolveMenuKeyIdPathOptions {
-    menus: any[];
-    pathname: string;
-    search?: string;
-    selectedPath?: string;
-}
-/**
- * 统一解析菜单激活路径：显式 activeMenu 优先，其次匹配真实路由，最后回退上次选择。
- */
-export declare const resolveMenuKeyIdPath: ({ menus, pathname, search, selectedPath, }: ResolveMenuKeyIdPathOptions) => number[];
 /**
  * 转换菜单数据源评价keyUrlPath与keyIdPath
  * @param menuData 菜单数据源
@@ -51,4 +41,3 @@ export declare const getPathNameKey: ({ menus, pathName }: {
  * @returns 找到的菜单项数据或null
  */
 export declare const findMenuItemByKey: (menus: any[], key: string) => any;
-export {};

package/es/ProLayout/utils/index.js

@@ -1,34 +1,12 @@
 import isPlainObject from "lodash/isPlainObject";
-const addPathPrefix = (pathPrefix, route) => {
-  if (!route || !pathPrefix || /^(?:[a-z][a-z\d+.-]*:|\/\/)/i.test(route))
-    return route || "";
-  const normalizedPrefix = `/${pathPrefix.replace(/^\/+|\/+$/g, "")}`;
-  if (normalizedPrefix === "/")
-    return route;
-  const match = route.match(/^([^?#]*)(.*)$/);
-  const pathname = (match == null ? void 0 : match[1]) || "";
-  const suffix = (match == null ? void 0 : match[2]) || "";
-  const normalizedPathname = pathname.startsWith("/") ? pathname : `/${pathname}`;
-  const alreadyPrefixed = normalizedPathname === normalizedPrefix || normalizedPathname.startsWith(`${normalizedPrefix}/`);
-  return `${alreadyPrefixed ? normalizedPathname : `${normalizedPrefix}${normalizedPathname}`}${suffix}`;
-};
 const updateBestMatch = (pathName, itemUrl, itemRedirectUrl, keyIdPath, bestMatch) => {
-  const isSameOrNestedPath = (candidate) => {
-    if (!candidate)
-      return false;
-    const normalizedCandidate = candidate.length > 1 ? candidate.replace(/\/+$/, "") : candidate;
-    if (pathName === normalizedCandidate)
-      return true;
-    const boundary = pathName.charAt(normalizedCandidate.length);
-    return pathName.startsWith(normalizedCandidate) && ["/", "?", "#"].includes(boundary);
-  };
-  if (isSameOrNestedPath(itemUrl)) {
+  if (itemUrl && pathName.includes(itemUrl)) {
     const urlLength = itemUrl.length;
     if (!bestMatch || urlLength > bestMatch.urlLength) {
       return { keyIdPath, urlLength };
     }
   }
-  if (isSameOrNestedPath(itemRedirectUrl)) {
+  if (itemRedirectUrl && pathName.includes(itemRedirectUrl)) {
     const urlLength = itemRedirectUrl.length;
     if (!bestMatch || urlLength > bestMatch.urlLength) {
       return { keyIdPath, urlLength };
@@ -36,39 +14,17 @@ const updateBestMatch = (pathName, itemUrl, itemRedirectUrl, keyIdPath, bestMatc
   }
   return bestMatch;
 };
-const getExactMenuKeyIdPath = (menus, pathname) => {
-  const normalizePathname = (value) => {
-    if (!value)
-      return "";
-    const path = value.split(/[?#]/)[0];
-    return path.length > 1 ? path.replace(/\/+$/, "") : path;
-  };
-  const targetPathname = normalizePathname(pathname);
-  for (const item of menus || []) {
-    const routes = [item == null ? void 0 : item.redirectUrl, item == null ? void 0 : item.router, item == null ? void 0 : item.url].map(normalizePathname);
-    if (targetPathname && routes.includes(targetPathname)) {
-      return item.keyIdPath || [];
-    }
-    if (Array.isArray(item == null ? void 0 : item.children) && item.children.length) {
-      const childPath = getExactMenuKeyIdPath(item.children, pathname);
-      if (childPath.length)
-        return childPath;
-    }
-  }
-  return [];
-};
 const getIdsByPathName = (menus, activeMenu) => {
   const _pathName = activeMenu || window.location.pathname;
   let result;
   let bestMatch = null;
   const menuDeep = (menuDeepItem) => {
-    var _a, _b, _c;
+    var _a, _b;
     for (let i = 0; i <= menuDeepItem.length - 1; i++) {
       const item = menuDeepItem[i];
       const itemUrl = ((_a = item == null ? void 0 : item.url) == null ? void 0 : _a.split("?")[0]) || "";
       const itemRedirectUrl = ((_b = item == null ? void 0 : item.redirectUrl) == null ? void 0 : _b.split("?")[0]) || "";
-      const itemRouter = ((_c = item == null ? void 0 : item.router) == null ? void 0 : _c.split("?")[0]) || "";
-      if ((item == null ? void 0 : item.url) === _pathName || item.redirectUrl === _pathName || item.router === _pathName) {
+      if ((item == null ? void 0 : item.url) === _pathName || item.redirectUrl === _pathName) {
         result = item.keyIdPath;
         return;
       }
@@ -81,40 +37,13 @@ const getIdsByPathName = (menus, activeMenu) => {
         continue;
       }
       bestMatch = updateBestMatch(_pathName, itemUrl, itemRedirectUrl, item.keyIdPath, bestMatch);
-      bestMatch = updateBestMatch(_pathName, itemRouter, "", item.keyIdPath, bestMatch);
     }
   };
   menuDeep(menus);
   return result || (bestMatch == null ? void 0 : bestMatch.keyIdPath) || [];
 };
-const resolveMenuKeyIdPath = ({
-  menus,
-  pathname,
-  search = "",
-  selectedPath
-}) => {
-  if (selectedPath === "##EMPTY##")
-    return [];
-  const activeMenu = new URLSearchParams(search).get("activeMenu");
-  const activeMenuPath = activeMenu ? getIdsByPathName(menus, activeMenu) : [];
-  if (activeMenuPath.length)
-    return activeMenuPath;
-  const exactRoutePath = getExactMenuKeyIdPath(menus, pathname);
-  if (exactRoutePath.length)
-    return exactRoutePath;
-  const nestedRoutePath = getIdsByPathName(menus, pathname);
-  if (nestedRoutePath.length)
-    return nestedRoutePath;
-  return selectedPath ? getIdsByPathName(menus, selectedPath) : [];
-};
 const transformMenu = (menuData, pathPrefix) => {
-  const cloneMenuTree = (items) => items.map((item) => ({
-    ...item,
-    keyUrlPath: Array.isArray(item.keyUrlPath) ? [...item.keyUrlPath] : item.keyUrlPath,
-    keyIdPath: Array.isArray(item.keyIdPath) ? [...item.keyIdPath] : item.keyIdPath,
-    children: Array.isArray(item.children) ? cloneMenuTree(item.children) : item.children
-  }));
-  const data = cloneMenuTree(menuData);
+  const data = [...menuData];
   const menuDeep = (menuDeepItem) => {
     var _a, _b, _c;
     if (!Array.isArray(menuDeepItem) || !menuDeepItem.length) {
@@ -122,26 +51,18 @@ const transformMenu = (menuData, pathPrefix) => {
     }
     for (let i = menuDeepItem.length - 1; i >= 0; i -= 1) {
       const item = menuDeepItem[i];
-      item.code = item.code ?? item.id;
-      item.url = addPathPrefix(pathPrefix, item.url);
-      item.redirectUrl = addPathPrefix(pathPrefix, item.redirectUrl);
-      if (item.router)
-        item.router = addPathPrefix(pathPrefix, item.router);
-      const itemRoute = item.redirectUrl || item.url || item.router;
+      item.code = item.code || item.id;
+      item.url = `${pathPrefix}${item.url}`;
+      item.redirectUrl = (item == null ? void 0 : item.redirectUrl) ? `${pathPrefix}${item.redirectUrl}` : "";
       if ((_a = item == null ? void 0 : item.keyUrlPath) == null ? void 0 : _a.length) {
-        if (itemRoute)
-          item.keyUrlPath.push(itemRoute);
-        item.keyUrlPath = item.keyUrlPath.filter(
-          (route, index, routes) => routes.indexOf(route) === index
-        );
+        item.keyUrlPath.push(item.redirectUrl || item.url);
+        item.keyUrlPath = [...new Set(item.keyUrlPath)];
       } else {
-        item.keyUrlPath = itemRoute ? [itemRoute] : [];
+        item.keyUrlPath = [item.redirectUrl || item.url];
       }
       if ((_b = item == null ? void 0 : item.keyIdPath) == null ? void 0 : _b.length) {
         item.keyIdPath.push(item.id);
-        item.keyIdPath = item.keyIdPath.filter(
-          (id, index, ids) => ids.indexOf(id) === index
-        );
+        item.keyIdPath = [...new Set(item.keyIdPath)];
       } else {
         item.keyIdPath = [item.id];
       }
@@ -164,10 +85,8 @@ const transformMenus = (data, pathPrefix) => {
     if (!Array.isArray(data == null ? void 0 : data.menus)) {
       return [];
     }
-    return {
-      ...data,
-      menus: transformMenu(data.menus, pathPrefix)
-    };
+    data.menus = transformMenu(data.menus, pathPrefix);
+    return data;
   }
   if (Array.isArray(data)) {
     return transformMenu(data, pathPrefix);
@@ -197,7 +116,7 @@ const getPathNameKey = ({ menus, pathName }) => {
   let result;
   let bestMatch = null;
   const menuDeep = (menuDeepItem) => {
-    var _a, _b, _c;
+    var _a, _b;
     if (!Array.isArray(menuDeepItem) || !menuDeepItem.length) {
       return;
     }
@@ -208,8 +127,7 @@ const getPathNameKey = ({ menus, pathName }) => {
       }
       const itemUrl = ((_a = item == null ? void 0 : item.url) == null ? void 0 : _a.split("?")[0]) || "";
       const itemRedirectUrl = ((_b = item == null ? void 0 : item.redirectUrl) == null ? void 0 : _b.split("?")[0]) || "";
-      const itemRouter = ((_c = item == null ? void 0 : item.router) == null ? void 0 : _c.split("?")[0]) || "";
-      if ((item == null ? void 0 : item.url) === pathName || (item == null ? void 0 : item.redirectUrl) === pathName || (item == null ? void 0 : item.router) === pathName) {
+      if ((item == null ? void 0 : item.url) === pathName || (item == null ? void 0 : item.redirectUrl) === pathName) {
         result = item.keyIdPath;
         return;
       }
@@ -222,7 +140,6 @@ const getPathNameKey = ({ menus, pathName }) => {
         continue;
       }
       bestMatch = updateBestMatch(pathName, itemUrl, itemRedirectUrl, item.keyIdPath, bestMatch);
-      bestMatch = updateBestMatch(pathName, itemRouter, "", item.keyIdPath, bestMatch);
     }
   };
   menuDeep(menus);
@@ -246,7 +163,6 @@ export {
   getIdsByPathName,
   getPathNameKey,
   getUrlParams,
-  resolveMenuKeyIdPath,
   transformMenu,
   transformMenus
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zat-design/sisyphus-react",
-  "version": "4.6.5-beta.6",
+  "version": "4.6.5",
   "license": "MIT",
   "publishConfig": {
     "access": "public",