@zat-design/sisyphus-react 4.5.9 → 4.5.10-beta.2

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

@@ -1,95 +1,85 @@
-import _cloneDeep from "lodash/cloneDeep";
-import { useMemo, useRef, useContext } from 'react';
-import { Menu } from 'antd';
-import { useDeepCompareEffect, useSetState } from 'ahooks';
-import { CaretDownOutlined } from '@ant-design/icons';
-import classnames from 'classnames';
-import { Link as RouterLink } from 'react-router-dom';
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useContext } from "react";
+import { Menu } from "antd";
+import { useDeepCompareEffect, useSetState } from "ahooks";
+import { CaretDownOutlined } from "@ant-design/icons";
+import classnames from "classnames";
+import { Link as RouterLink } from "react-router-dom";
+import cloneDeep from "lodash/cloneDeep";
 import { LayoutContext } from "../../../../index";
 import { getIdsByPathName, findMenuItemByKey } from "../../../../utils";
 import { canOpenAsTab } from "../../../TabsManager/utils";
 import ProIcon from "../../../../../ProIcon";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const Link = RouterLink;
-const OpenMenu = props => {
-  const {
-    className,
-    dataSource,
-    style,
-    onMenuClick,
-    textVisible = true
-  } = props;
-  const {
-    menus,
-    sideMenu
-  } = dataSource || {};
+const OpenMenu = (props) => {
+  var _a;
+  const { className, dataSource, style, onMenuClick, textVisible = true } = props;
+  const { menus, sideMenu } = dataSource || {};
   const linkRef = useRef(null);
-  // 通过URL匹配对应的ID用于回显
-  const [{
-    selectedKeys,
-    openKeys,
-    router
-  }, setState] = useSetState({
+  const [{ selectedKeys, openKeys, router }, setState] = useSetState({
     selectedKeys: [],
     openKeys: [],
-    router: ''
+    router: ""
   });
   const query = new URLSearchParams(window.location.search);
   const layoutContext = useContext(LayoutContext);
-  const layoutSelectedPath = layoutContext?.selectedPath;
-  const layoutOnSelected = layoutContext?.onSelected;
-  const layoutTarget = layoutContext?.target;
+  const layoutSelectedPath = layoutContext == null ? void 0 : layoutContext.selectedPath;
+  const layoutOnSelected = layoutContext == null ? void 0 : layoutContext.onSelected;
+  const layoutTarget = layoutContext == null ? void 0 : layoutContext.target;
   const cls = classnames({
-    'pro-layout-open-menu': true,
-    'pro-layout-menu-text-hidden': textVisible === false,
+    "pro-layout-open-menu": true,
+    "pro-layout-menu-text-hidden": textVisible === false,
     [`${className}`]: className
   });
-
-  // 默认激活菜单优先取selectedPath或activeMenu，默认取pathName进行匹配
-  // 特殊处理：如果layoutSelectedPath是'##EMPTY##'，表示有意清空选中状态
-  const preferredPath = query.get('activeMenu') || (layoutSelectedPath === '##EMPTY##' ? null : layoutSelectedPath) || window.location.pathname;
-  const selectKeyIdPath = preferredPath ? getIdsByPathName(menus, preferredPath)?.map(item => String(item)) || [] : [];
+  const preferredPath = 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);
+    const result = cloneDeep(menus);
     if (!Array.isArray(result) || !result.length) {
       return [];
     }
-    const menuDeep = data => {
-      data.forEach(item => {
-        // 是否是第一级菜单，展开模式一级菜单有icon, 收起模式二级菜单有icon
-        const isFirstMenu = item.keyIdPath?.length === 1 || sideMenu && item.keyIdPath?.length === 2;
-        // 第一级菜单显示icon
-        item.label = /*#__PURE__*/_jsxs("div", {
-          className: classnames({
-            'pro-layout-open-menu-lv1': isFirstMenu
-          }),
-          children: [/*#__PURE__*/_jsx(_Fragment, {
-            children: item.imgUrl && isFirstMenu ? /*#__PURE__*/_jsx("img", {
-              className: "pro-layout-icon",
-              src: selectKeyIdPath[0] === String(item.id) ? item.imgActiveUrl || item.imgUrl : item.imgUrl,
-              alt: "icon"
-            }) : item.icon && isFirstMenu ? /*#__PURE__*/_jsx(ProIcon, {
-              type: item.icon || '',
-              size: "20px"
-            }) : /*#__PURE__*/_jsx("span", {
-              className: classnames({
-                'pro-layout-icon': true,
-                'pro-layout-icon-empty': isFirstMenu
-              })
-            })
-          }), /*#__PURE__*/_jsx("h2", {
-            children: item.name
-          })]
-        });
+    const menuDeep = (data) => {
+      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",
+          {
+            className: classnames({
+              "pro-layout-open-menu-lv1": isFirstMenu
+            }),
+            children: [
+              /* @__PURE__ */ jsx(Fragment, { children: item.imgUrl && isFirstMenu ? /* @__PURE__ */ jsx(
+                "img",
+                {
+                  className: "pro-layout-icon",
+                  src: selectedRootKey === String(item.id) ? item.imgActiveUrl || item.imgUrl : item.imgUrl,
+                  alt: "icon"
+                }
+              ) : item.icon && isFirstMenu ? /* @__PURE__ */ jsx(ProIcon, { type: item.icon || "", size: "20px" }) : /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: classnames({
+                    "pro-layout-icon": true,
+                    "pro-layout-icon-empty": isFirstMenu
+                  })
+                }
+              ) }),
+              /* @__PURE__ */ jsx("h2", { children: item.name })
+            ]
+          }
+        );
         item.key = String(item.id);
         item.router = item.redirectUrl || item.router || item.url;
-        Object.keys(item).filter(keyItem => !['label', 'key', 'children', 'onTitleClick', 'router'].includes(keyItem)).forEach(_keyItem => {
+        Object.keys(item).filter(
+          (keyItem) => !["label", "key", "children", "onTitleClick", "router"].includes(keyItem)
+        ).forEach((_keyItem) => {
           delete item[_keyItem];
         });
-        if (Array.isArray(item?.children) && item?.children?.length > 0) {
-          const _item = item?.children[0];
-          // 移除不需要显示的菜单
-          if (_item?.hideInMenu || ['TAB', 'QUERY', 'BUTTON'].includes(_item?.type)) {
+        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);
@@ -102,7 +92,7 @@ const OpenMenu = props => {
     };
     menuDeep(result);
     return result;
-  }, [dataSource]);
+  }, [dataSource, selectedRootKey]);
   useDeepCompareEffect(() => {
     if (Array.isArray(selectKeyIdPath)) {
       const newState = {
@@ -114,84 +104,68 @@ const OpenMenu = props => {
       setState(newState);
     }
   }, [menus, selectKeyIdPath]);
-
-  // 折叠模式默认展开全部菜单
   useDeepCompareEffect(() => {
     if (sideMenu) {
-      const keys = menus.map(item => String(item.id));
+      const keys = menus.map((item) => String(item.id));
       setState({
         openKeys: keys
       });
     }
   }, [sideMenu]);
-  return /*#__PURE__*/_jsxs("div", {
-    className: cls,
-    style: style,
-    children: [/*#__PURE__*/_jsx(Menu, {
-      mode: "inline",
-      selectedKeys: selectedKeys,
-      openKeys: openKeys,
-      items: itemsTransform,
-      inlineIndent: 14,
-      expandIcon: /*#__PURE__*/_jsx(CaretDownOutlined, {}),
-      onOpenChange: openKeys => {
-        setState({
-          openKeys
-        });
-      },
-      onClick: ({
-        item,
-        keyPath,
-        key,
-        domEvent
-      }) => {
-        // 查找完整的菜单项数据
-        const menuItem = findMenuItemByKey(menus, key);
-        const menuKeyPath = menuItem?.keyIdPath ? menuItem.keyIdPath.map(id => String(id)) : keyPath;
-
-        // 调用用户传入的onMenuClick回调，获取返回值（是否应该激活菜单）
-        let shouldActivate = true;
-        if (onMenuClick) {
-          const result = onMenuClick({
-            item: menuItem,
-            key,
-            keyPath: menuKeyPath
-          });
-          // 如果返回 false，表示不应该激活菜单
-          if (result === false) {
-            shouldActivate = false;
-          }
-        }
-
-        // 可入签节点（叶子 + 根节点特例）才设置选中状态和路径
-        // 并且只有在 shouldActivate 为 true 时才设置
-        if (menuItem && canOpenAsTab(menuItem) && shouldActivate) {
+  return /* @__PURE__ */ jsxs("div", { className: cls, style, children: [
+    /* @__PURE__ */ jsx(
+      Menu,
+      {
+        mode: "inline",
+        selectedKeys,
+        openKeys,
+        items: itemsTransform,
+        inlineIndent: 14,
+        expandIcon: /* @__PURE__ */ jsx(CaretDownOutlined, {}),
+        onOpenChange: (openKeys2) => {
           setState({
-            selectedKeys: keyPath,
-            router: item?.props?.router
+            openKeys: openKeys2
           });
-          layoutOnSelected?.({
-            selectedPath: item?.props?.router
-          });
-          if (layoutTarget) {
-            window.open(item?.props?.router, layoutTarget);
-          } else {
-            setTimeout(() => {
-              // 路由变更，且不再demo文档中
-              if (!window.location.href.includes('~demos/prolayout')) {
-                linkRef.current.click();
-              }
-            }, 100);
+        },
+        onClick: ({ keyPath, key }) => {
+          const menuItem = findMenuItemByKey(menus, key);
+          const menuKeyPath = (menuItem == null ? void 0 : menuItem.keyIdPath) ? menuItem.keyIdPath.map((id) => String(id)) : keyPath;
+          const menuRouter = (menuItem == null ? void 0 : menuItem.redirectUrl) || (menuItem == null ? void 0 : menuItem.router) || (menuItem == null ? void 0 : menuItem.url);
+          let shouldActivate = true;
+          if (onMenuClick) {
+            const result = onMenuClick({ item: menuItem, key, keyPath: menuKeyPath });
+            if (result === false) {
+              shouldActivate = false;
+            }
+          }
+          if (menuItem && canOpenAsTab(menuItem) && shouldActivate) {
+            setState({
+              selectedKeys: keyPath,
+              router: menuRouter
+            });
+            layoutOnSelected == null ? void 0 : layoutOnSelected({
+              selectedPath: menuRouter
+            });
+            if (layoutTarget) {
+              window.open(menuRouter, layoutTarget);
+            } else {
+              setTimeout(() => {
+                if (!window.location.href.includes("~demos/prolayout")) {
+                  linkRef.current.click();
+                }
+              }, 100);
+            }
           }
+        },
+        style: {
+          height: dataSource.sideMenu ? "auto" : `calc(100vh - ${(dataSource == null ? void 0 : dataSource.height) || 0}px)`
         }
-      },
-      style: {
-        height: dataSource.sideMenu ? 'auto' : `calc(100vh - ${dataSource?.height || 0}px)`
       }
-    }), /*#__PURE__*/_jsx(Link, {
-      to: router,
-      ref: linkRef
-    })]
-  });
+    ),
+    /* @__PURE__ */ jsx(Link, { to: router, ref: linkRef })
+  ] });
+};
+var OpenMenu_default = OpenMenu;
+export {
+  OpenMenu_default as default
 };
-export default OpenMenu;

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

@@ -1 +0,0 @@
-export {};

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

@@ -1,44 +1,36 @@
-import { useRef } from 'react';
-import classnames from 'classnames';
-import { useSize } from 'ahooks';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import classnames from "classnames";
+import { useSize } from "ahooks";
 import OpenMenu from "../OpenMenu";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const SideMenu = props => {
-  const {
-    dataSource,
-    onMenuClick
-  } = props;
+const SideMenu = (props) => {
+  const { dataSource, onMenuClick } = props;
   const ref = useRef(null);
   const size = useSize(ref);
-  const {
-    menus,
-    iconfontUrl,
-    notice,
-    collapsed,
-    headerHeight
-  } = dataSource;
+  const { menus, iconfontUrl, notice, collapsed, headerHeight } = dataSource;
   const cls = classnames({
-    'pro-layout-sider-menu': true
+    "pro-layout-sider-menu": true
   });
-  return /*#__PURE__*/_jsxs("div", {
-    className: cls,
-    children: [/*#__PURE__*/_jsx("h2", {
-      ref: ref,
-      children: menus?.name || ''
-    }), /*#__PURE__*/_jsx("div", {
-      children: /*#__PURE__*/_jsx(OpenMenu, {
+  return /* @__PURE__ */ jsxs("div", { className: cls, children: [
+    /* @__PURE__ */ jsx("h2", { ref, children: (menus == null ? void 0 : menus.name) || "" }),
+    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+      OpenMenu,
+      {
         className: "pro-layout-sider-menu-list",
-        onMenuClick: onMenuClick,
+        onMenuClick,
         dataSource: {
-          menus: menus?.children || [],
+          menus: (menus == null ? void 0 : menus.children) || [],
           iconfontUrl,
           sideMenu: true
         },
         style: {
-          height: `calc(100vh - ${headerHeight + (notice ? 32 : 0) + (size?.height || 0) + 12}px)`
+          height: `calc(100vh - ${headerHeight + (notice ? 32 : 0) + ((size == null ? void 0 : size.height) || 0) + 12}px)`
         }
-      })
-    })]
-  });
+      }
+    ) })
+  ] });
+};
+var SideMenu_default = SideMenu;
+export {
+  SideMenu_default as default
 };
-export default SideMenu;

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

@@ -1,27 +1,28 @@
-import { useEffect, useRef, useState, useCallback } from 'react';
-import classnames from 'classnames';
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState, useCallback } from "react";
+import classnames from "classnames";
 import OpenMenu from "./OpenMenu";
-import FoldMenu from "./FoldMenu"; // 折叠后菜单
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const iconfontCache = new Set();
-const loadIconfontScript = url => {
-  if (!url || iconfontCache.has(url)) return;
-  if (typeof document === 'undefined') return;
-  const script = document.createElement('script');
-  script.setAttribute('src', url);
+import FoldMenu from "./FoldMenu";
+const iconfontCache = /* @__PURE__ */ new Set();
+const loadIconfontScript = (url) => {
+  if (!url || iconfontCache.has(url))
+    return;
+  if (typeof document === "undefined")
+    return;
+  const script = document.createElement("script");
+  script.setAttribute("src", url);
   iconfontCache.add(url);
   document.body.appendChild(script);
 };
-
-// 菜单宽度配置
 const MENU_CONFIG = {
   TRANSITION_DURATION: 300,
   // 宽度过渡时长(ms)
   TEXT_VISIBLE_THRESHOLD: 150,
   // 文字显示阈值(px, 约68%展开)
-  FULL_WIDTH: 219 // 完全展开宽度(px)
+  FULL_WIDTH: 219
+  // 完全展开宽度(px)
 };
-const Menu = props => {
+const Menu = (props) => {
   const {
     headerHeight,
     dataSource,
@@ -36,7 +37,6 @@ const Menu = props => {
   } = props || {};
   let menus = [];
   const menuRef = useRef(null);
-  // 整合所有动画相关的refs
   const animationStateRef = useRef({
     timer: null,
     observer: null,
@@ -46,8 +46,6 @@ const Menu = props => {
   useEffect(() => {
     loadIconfontScript(iconfontUrl);
   }, [iconfontUrl]);
-
-  // 提取清理逻辑
   const cleanupAnimation = useCallback(() => {
     const state = animationStateRef.current;
     if (state.timer) {
@@ -58,117 +56,122 @@ const Menu = props => {
       try {
         state.observer.disconnect();
       } catch (e) {
-        console.warn('ResizeObserver disconnect failed:', e);
+        console.warn("ResizeObserver disconnect failed:", e);
       }
       state.observer = null;
     }
   }, []);
-
-  // 触发文字显示
   const showMenuText = useCallback(() => {
     const state = animationStateRef.current;
-    if (state.hasTriggered) return;
+    if (state.hasTriggered)
+      return;
     state.hasTriggered = true;
     setIsOpenMenuTextVisible(true);
-    // 延迟清理，避免回调内竞态
     setTimeout(cleanupAnimation, 0);
   }, [cleanupAnimation]);
-
-  // ResizeObserver 监听宽度变化，提前显示文字
   useEffect(() => {
+    var _a, _b;
     const state = animationStateRef.current;
     state.hasTriggered = false;
-
-    // 折叠态：清理并隐藏文字
     if (!collapsed) {
       setIsOpenMenuTextVisible(false);
       cleanupAnimation();
       return;
     }
-
-    // 检查是否已展开
-    const currentWidth = menuRef.current?.getBoundingClientRect?.().width ?? 0;
+    const currentWidth = ((_b = (_a = menuRef.current) == null ? void 0 : _a.getBoundingClientRect) == null ? void 0 : _b.call(_a).width) ?? 0;
     if (currentWidth >= MENU_CONFIG.FULL_WIDTH) {
       state.hasTriggered = true;
       setIsOpenMenuTextVisible(true);
       return;
     }
-
-    // 创建 ResizeObserver
-    const supportsResizeObserver = typeof ResizeObserver !== 'undefined';
+    const supportsResizeObserver = typeof ResizeObserver !== "undefined";
     if (supportsResizeObserver && menuRef.current) {
-      state.observer = new ResizeObserver(entries => {
-        const width = entries[0]?.contentRect.width ?? 0;
+      state.observer = new ResizeObserver((entries) => {
+        var _a2;
+        const width = ((_a2 = entries[0]) == null ? void 0 : _a2.contentRect.width) ?? 0;
         if (width >= MENU_CONFIG.TEXT_VISIBLE_THRESHOLD) {
           showMenuText();
         }
       });
       state.observer.observe(menuRef.current);
     }
-
-    // Fallback：定时器保底
     state.timer = setTimeout(showMenuText, MENU_CONFIG.TRANSITION_DURATION);
     return cleanupAnimation;
   }, [collapsed, cleanupAnimation, showMenuText]);
   const menuCls = classnames({
-    'pro-layout-menu': true,
-    'pro-layout-menu-open': collapsed
+    "pro-layout-menu": true,
+    "pro-layout-menu-open": collapsed
   });
   if (Array.isArray(dataSource)) {
     menus = dataSource;
   } else if (dataSource) {
-    menus = dataSource?.menus;
+    menus = dataSource == null ? void 0 : dataSource.menus;
   }
-  if (pure?.leftMenu || pure === true) {
-    return /*#__PURE__*/_jsx(_Fragment, {});
+  if ((pure == null ? void 0 : pure.leftMenu) || pure === true) {
+    return /* @__PURE__ */ jsx(Fragment, {});
   }
-  return /*#__PURE__*/_jsxs("div", {
-    ref: menuRef,
-    className: menuCls,
-    style: {
-      top: notice ? 96 + headerHeight - 64 : headerHeight
-    },
-    onTransitionEnd: e => {
-      // Fallback：确保宽度过渡结束后文字一定显示
-      if (e.propertyName === 'width' && e.target === menuRef.current && collapsed) {
-        showMenuText();
-      }
-    },
-    children: [sideMenuHeaderRender, /*#__PURE__*/_jsx(OpenMenu, {
-      dataSource: {
-        menus,
-        iconfontUrl,
-        height: headerHeight + (notice ? 32 : 0) + 48
-      },
-      onMenuClick: onMenuClick,
-      textVisible: isOpenMenuTextVisible,
-      style: {
-        display: collapsed ? 'block' : 'none'
-      }
-    }), /*#__PURE__*/_jsx(FoldMenu, {
-      dataSource: {
-        menus,
-        iconfontUrl,
-        height: headerHeight + (notice ? 32 : 0) + 48,
-        notice,
-        collapsed,
-        headerHeight
-      },
-      onMenuClick: onMenuClick,
-      style: {
-        display: collapsed ? 'none' : 'block',
-        height: `calc(100vh - ${headerHeight + (notice ? 32 : 0) + 48 || 0}px)`
-      }
-    }), sideMenuFooterRender || /*#__PURE__*/_jsx("div", {
-      className: "pro-layout-menu-collapsed",
-      onClick: () => {
-        setIsOpenMenuTextVisible(false);
-        onToggle?.();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: menuRef,
+      className: menuCls,
+      style: { top: notice ? 96 + headerHeight - 64 : headerHeight },
+      onTransitionEnd: (e) => {
+        if (e.propertyName === "width" && e.target === menuRef.current && collapsed) {
+          showMenuText();
+        }
       },
-      children: /*#__PURE__*/_jsx("div", {
-        className: "pro-layout-arrow "
-      })
-    })]
-  });
+      children: [
+        sideMenuHeaderRender,
+        /* @__PURE__ */ jsx(
+          OpenMenu,
+          {
+            dataSource: {
+              menus,
+              iconfontUrl,
+              height: headerHeight + (notice ? 32 : 0) + 48
+            },
+            onMenuClick,
+            textVisible: isOpenMenuTextVisible,
+            style: {
+              display: collapsed ? "block" : "none"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FoldMenu,
+          {
+            dataSource: {
+              menus,
+              iconfontUrl,
+              height: headerHeight + (notice ? 32 : 0) + 48,
+              notice,
+              collapsed,
+              headerHeight
+            },
+            onMenuClick,
+            style: {
+              display: collapsed ? "none" : "block",
+              height: `calc(100vh - ${(headerHeight ?? 0) + (notice ? 32 : 0) + 48}px)`
+            }
+          }
+        ),
+        sideMenuFooterRender || /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "pro-layout-menu-collapsed",
+            onClick: () => {
+              setIsOpenMenuTextVisible(false);
+              onToggle == null ? void 0 : onToggle();
+            },
+            children: /* @__PURE__ */ jsx("div", { className: "pro-layout-arrow " })
+          }
+        )
+      ]
+    }
+  );
+};
+var Menu_default = Menu;
+export {
+  Menu_default as default
 };
-export default Menu;