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

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

@@ -1,11 +1,11 @@
-import { useState } from 'react';
-import classNames from 'classnames';
-import { Popover, Tooltip } from 'antd';
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import classNames from "classnames";
+import { Popover, Tooltip } from "antd";
 import { ProIcon } from "../../../../index";
 import logoImg from "../../../images/logoImg.png";
 import appsIcon from "../../../../assets/apps.svg";
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const Header = props => {
+const Header = (props) => {
   const {
     headerHeight,
     pure,
@@ -17,157 +17,124 @@ const Header = props => {
     appsOptions
   } = props;
   const [appsPopoverOpen, setAppsPopoverOpen] = useState(false);
-  if (pure === true || pure?.topMenu) {
-    return /*#__PURE__*/_jsx(_Fragment, {});
+  if (pure === true || (pure == null ? void 0 : pure.topMenu)) {
+    return /* @__PURE__ */ jsx(Fragment, {});
   }
-
-  // 判断是否为分组模式
-  const isGroupMode = Array.isArray(appsOptions) && appsOptions.length > 0 && 'options' in appsOptions[0];
-
-  // 处理应用点击事件
-  const handleAppsClick = option => {
-    option.onChange?.(option.value, option);
+  const isGroupMode = Array.isArray(appsOptions) && appsOptions.length > 0 && "options" in appsOptions[0];
+  const handleAppsClick = (option) => {
+    var _a;
+    (_a = option.onChange) == null ? void 0 : _a.call(option, option.value, option);
     setAppsPopoverOpen(false);
   };
-
-  // 渲染扁平应用列表
   const renderFlatApps = () => {
     const options = appsOptions;
-    return /*#__PURE__*/_jsx("div", {
-      className: "pro-layout-header-apps-list",
-      children: options.map(option => {
-        const labelText = typeof option.label === 'string' ? option.label : '';
-        const needTooltip = labelText.length > 5;
-        const displayText = needTooltip ? labelText.substring(0, 5) + '...' : labelText;
-        if (needTooltip) {
-          return /*#__PURE__*/_jsx(Tooltip, {
-            title: labelText,
-            placement: "top",
-            children: /*#__PURE__*/_jsxs("div", {
-              className: "pro-layout-header-apps-item",
-              onClick: () => handleAppsClick(option),
-              children: [option.icon && /*#__PURE__*/_jsx("span", {
-                className: "pro-layout-header-apps-item-icon",
-                children: option.icon
-              }), /*#__PURE__*/_jsx("span", {
-                className: "pro-layout-header-apps-item-label",
-                children: displayText
-              })]
-            })
-          }, option.value);
-        }
-        return /*#__PURE__*/_jsxs("div", {
+    return /* @__PURE__ */ jsx("div", { className: "pro-layout-header-apps-list", children: options.map((option) => {
+      const labelText = typeof option.label === "string" ? option.label : "";
+      const needTooltip = labelText.length > 5;
+      const displayText = needTooltip ? labelText.substring(0, 5) + "..." : labelText;
+      if (needTooltip) {
+        return /* @__PURE__ */ jsx(Tooltip, { title: labelText, placement: "top", children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "pro-layout-header-apps-item",
+            onClick: () => handleAppsClick(option),
+            children: [
+              option.icon && /* @__PURE__ */ jsx("span", { className: "pro-layout-header-apps-item-icon", children: option.icon }),
+              /* @__PURE__ */ jsx("span", { className: "pro-layout-header-apps-item-label", children: displayText })
+            ]
+          }
+        ) }, option.value);
+      }
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
           className: "pro-layout-header-apps-item",
           onClick: () => handleAppsClick(option),
-          children: [option.icon && /*#__PURE__*/_jsx("span", {
-            className: "pro-layout-header-apps-item-icon",
-            children: option.icon
-          }), /*#__PURE__*/_jsx("span", {
-            className: "pro-layout-header-apps-item-label",
-            children: displayText
-          })]
-        }, option.value);
-      })
-    });
+          children: [
+            option.icon && /* @__PURE__ */ jsx("span", { className: "pro-layout-header-apps-item-icon", children: option.icon }),
+            /* @__PURE__ */ jsx("span", { className: "pro-layout-header-apps-item-label", children: displayText })
+          ]
+        },
+        option.value
+      );
+    }) });
   };
-
-  // 渲染分组应用列表
   const renderGroupApps = () => {
     const groups = appsOptions;
-    return /*#__PURE__*/_jsx("div", {
-      className: "pro-layout-header-apps-groups",
-      children: groups.map(group => /*#__PURE__*/_jsxs("div", {
-        className: "pro-layout-header-apps-group",
-        children: [/*#__PURE__*/_jsx("div", {
-          className: "pro-layout-header-apps-group-title",
-          children: group.label
-        }), /*#__PURE__*/_jsx("div", {
-          className: "pro-layout-header-apps-list",
-          children: group.options.map(option => {
-            const labelText = typeof option.label === 'string' ? option.label : '';
-            const needTooltip = labelText.length > 5;
-            const displayText = needTooltip ? labelText.substring(0, 5) + '...' : labelText;
-            if (needTooltip) {
-              return /*#__PURE__*/_jsx(Tooltip, {
-                title: labelText,
-                placement: "top",
-                children: /*#__PURE__*/_jsxs("div", {
-                  className: "pro-layout-header-apps-item",
-                  onClick: () => handleAppsClick(option),
-                  children: [option.icon && /*#__PURE__*/_jsx("span", {
-                    className: "pro-layout-header-apps-item-icon",
-                    children: option.icon
-                  }), /*#__PURE__*/_jsx("span", {
-                    className: "pro-layout-header-apps-item-label",
-                    children: displayText
-                  })]
-                })
-              }, option.value);
-            }
-            return /*#__PURE__*/_jsxs("div", {
+    return /* @__PURE__ */ jsx("div", { className: "pro-layout-header-apps-groups", children: groups.map((group) => /* @__PURE__ */ jsxs("div", { className: "pro-layout-header-apps-group", children: [
+      /* @__PURE__ */ jsx("div", { className: "pro-layout-header-apps-group-title", children: group.label }),
+      /* @__PURE__ */ jsx("div", { className: "pro-layout-header-apps-list", children: group.options.map((option) => {
+        const labelText = typeof option.label === "string" ? option.label : "";
+        const needTooltip = labelText.length > 5;
+        const displayText = needTooltip ? labelText.substring(0, 5) + "..." : labelText;
+        if (needTooltip) {
+          return /* @__PURE__ */ jsx(Tooltip, { title: labelText, placement: "top", children: /* @__PURE__ */ jsxs(
+            "div",
+            {
               className: "pro-layout-header-apps-item",
               onClick: () => handleAppsClick(option),
-              children: [option.icon && /*#__PURE__*/_jsx("span", {
-                className: "pro-layout-header-apps-item-icon",
-                children: option.icon
-              }), /*#__PURE__*/_jsx("span", {
-                className: "pro-layout-header-apps-item-label",
-                children: displayText
-              })]
-            }, option.value);
-          })
-        })]
-      }, group.value))
-    });
+              children: [
+                option.icon && /* @__PURE__ */ jsx("span", { className: "pro-layout-header-apps-item-icon", children: option.icon }),
+                /* @__PURE__ */ jsx("span", { className: "pro-layout-header-apps-item-label", children: displayText })
+              ]
+            }
+          ) }, option.value);
+        }
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "pro-layout-header-apps-item",
+            onClick: () => handleAppsClick(option),
+            children: [
+              option.icon && /* @__PURE__ */ jsx("span", { className: "pro-layout-header-apps-item-icon", children: option.icon }),
+              /* @__PURE__ */ jsx("span", { className: "pro-layout-header-apps-item-label", children: displayText })
+            ]
+          },
+          option.value
+        );
+      }) })
+    ] }, group.value)) });
   };
-
-  // 渲染Popover内容
   const renderAppsContent = () => {
-    if (!appsOptions || appsOptions.length === 0) return null;
+    if (!appsOptions || appsOptions.length === 0)
+      return null;
     return isGroupMode ? renderGroupApps() : renderFlatApps();
   };
-  return /*#__PURE__*/_jsxs("div", {
-    className: classNames({
-      'pro-layout-header': true,
-      'pro-layout-header-pure': typeof pure !== 'boolean' ? pure?.topMenu : pure
-    }),
-    style: {
-      height: headerHeight
-    },
-    children: [appsOptions && appsOptions.length > 0 && /*#__PURE__*/_jsx(Popover, {
-      content: renderAppsContent(),
-      trigger: "hover",
-      placement: "bottomLeft",
-      open: appsPopoverOpen,
-      onOpenChange: setAppsPopoverOpen,
-      classNames: {
-        root: 'pro-layout-header-apps-popover'
-      },
-      align: {
-        offset: [30, -10]
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames({
+        "pro-layout-header": true,
+        "pro-layout-header-pure": typeof pure !== "boolean" ? pure == null ? void 0 : pure.topMenu : pure
+      }),
+      style: {
+        height: headerHeight
       },
-      children: /*#__PURE__*/_jsx("div", {
-        className: "pro-layout-header-apps-trigger",
-        children: /*#__PURE__*/_jsx(ProIcon, {
-          src: appsIcon,
-          size: "20px"
-        })
-      })
-    }), headerTitleRender || /*#__PURE__*/_jsxs("div", {
-      className: "pro-layout-header-logo",
-      children: [/*#__PURE__*/_jsx("span", {
-        children: logo || /*#__PURE__*/_jsx("img", {
-          className: "default-logo",
-          src: logoImg,
-          alt: "logo"
-        })
-      }), title ? /*#__PURE__*/_jsx("h4", {
-        children: title
-      }) : null]
-    }), headerContentRender || null, rightContentRender ? /*#__PURE__*/_jsx("div", {
-      className: "pro-layout-header-actions",
-      children: rightContentRender
-    }) : null]
-  });
+      children: [
+        appsOptions && appsOptions.length > 0 && /* @__PURE__ */ jsx(
+          Popover,
+          {
+            content: renderAppsContent(),
+            trigger: "hover",
+            placement: "bottomLeft",
+            open: appsPopoverOpen,
+            onOpenChange: setAppsPopoverOpen,
+            classNames: { root: "pro-layout-header-apps-popover" },
+            align: { offset: [30, -10] },
+            children: /* @__PURE__ */ jsx("div", { className: "pro-layout-header-apps-trigger", children: /* @__PURE__ */ jsx(ProIcon, { src: appsIcon, size: "20px" }) })
+          }
+        ),
+        headerTitleRender || /* @__PURE__ */ jsxs("div", { className: "pro-layout-header-logo", children: [
+          /* @__PURE__ */ jsx("span", { children: logo || /* @__PURE__ */ jsx("img", { className: "default-logo", src: logoImg, alt: "logo" }) }),
+          title ? /* @__PURE__ */ jsx("h4", { children: title }) : null
+        ] }),
+        headerContentRender || null,
+        rightContentRender ? /* @__PURE__ */ jsx("div", { className: "pro-layout-header-actions", children: rightContentRender }) : null
+      ]
+    }
+  );
+};
+var Header_default = Header;
+export {
+  Header_default as default
 };
-export default Header;

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

@@ -1,121 +1,81 @@
-import { useContext } from 'react';
-import { Popover, Tooltip } from 'antd';
-import classnames from 'classnames';
-import { Link as RouterLink } from 'react-router-dom';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { Popover, Tooltip } from "antd";
+import classnames from "classnames";
+import { Link as RouterLink } from "react-router-dom";
 import ProIcon from "../../../../../ProIcon";
 import SideMenu from "../SideMenu";
 import { LayoutContext } from "../../../../index";
 import { getUrlParams, getPathNameKey, findMenuItemByKey } from "../../../../utils";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Link = RouterLink;
-const FoldMenu = props => {
-  const {
-    style,
-    dataSource,
-    onMenuClick
-  } = props;
-  const {
-    menus,
-    iconfontUrl,
-    notice,
-    collapsed,
-    headerHeight
-  } = dataSource;
-  const pathNamePrefix = `/${window.location.pathname.split('/')[1]}`;
+const FoldMenu = (props) => {
+  const { style, dataSource, onMenuClick } = props;
+  const { menus, iconfontUrl, notice, collapsed, headerHeight } = dataSource;
+  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
+    "pro-layout-menu-tooltip": true,
+    "pro-layout-menu-tooltip-has-notice": notice,
+    "pro-layout-menu-tooltip-nav-open": collapsed
   });
-  const {
-    selectedPath,
-    onSelected
-  } = useContext(LayoutContext) || {
-    selectedPath: '',
-    onSelected: () => {}
+  const { selectedPath, onSelected } = useContext(LayoutContext) || {
+    selectedPath: "",
+    onSelected: () => {
+    }
   };
-  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) => {
-        const {
-          id,
-          url,
-          name,
-          icon,
-          imgUrl,
-          imgActiveUrl,
-          children
-        } = item;
-        const toPath = item.redirectUrl || item.url;
-        const selectedMenu = getUrlParams('activeMenu');
-        const pathToMatch = selectedPath || selectedMenu || window.location.pathname;
-
-        // 取第一级
-        const currentKeyIdPath = getPathNameKey({
-          menus,
-          pathName: pathToMatch // 优先匹配上下文路径
-        }) || [];
-        const cls = classnames({
-          active: currentKeyIdPath.includes(id)
-        });
-
-        // 是否包含子级菜单
-        const hasChildrenMenu = Array.isArray(children) && children.length;
-
-        // 一级li Dom节点
-        const LiNode = /*#__PURE__*/_jsx("li", {
-          id: url?.split('/')?.[1],
-          className: `${cls} pro-layout-menu-fold-li`,
-          children: /*#__PURE__*/_jsxs("div", {
-            children: [imgUrl ? /*#__PURE__*/_jsx("img", {
-              className: "pro-layout-icon",
-              src: pathNamePrefix === url ? imgActiveUrl || imgUrl : imgUrl,
-              alt: "icon"
-            }) : /*#__PURE__*/_jsx(ProIcon, {
-              type: icon || '',
-              size: "20px",
-              color: currentKeyIdPath.includes(id) ? '#fff' : undefined
-            }), /*#__PURE__*/_jsx("h2", {
-              children: name
-            })]
-          })
-        });
-        return hasChildrenMenu ? /*#__PURE__*/_jsx(Popover, {
-          mouseEnterDelay: 0,
-          content: /*#__PURE__*/_jsx(SideMenu, {
-            dataSource: {
-              ...dataSource,
-              menus: item
-            },
-            onMenuClick: onMenuClick
-          }),
-          color: "#fff",
-          classNames: {
-            root: noticeCls
-          },
-          styles: {
-            content: {
-              marginTop: headerHeight - 64,
-              height: `calc(100vh - ${headerHeight + (notice ? 32 : 0) + 12}px)`,
-              overflow: 'hidden'
-            }
-          },
-          placement: "rightTop",
-          children: /*#__PURE__*/_jsx("span", {
-            onClick: e => {
-              // 查找完整的菜单项数据
+  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 = selectedPath || selectedMenu || window.location.pathname;
+    const currentKeyIdPath = getPathNameKey({
+      menus,
+      pathName: pathToMatch
+      // 优先匹配上下文路径
+    }) || [];
+    const cls = classnames({
+      active: currentKeyIdPath.includes(id)
+    });
+    const hasChildrenMenu = Array.isArray(children) && children.length;
+    const LiNode = /* @__PURE__ */ jsx("li", { id: (_a = url == null ? void 0 : url.split("/")) == null ? void 0 : _a[1], className: `${cls} pro-layout-menu-fold-li`, children: /* @__PURE__ */ jsxs("div", { children: [
+      imgUrl ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          className: "pro-layout-icon",
+          src: pathNamePrefix === url ? imgActiveUrl || imgUrl : imgUrl,
+          alt: "icon"
+        }
+      ) : /* @__PURE__ */ jsx(
+        ProIcon,
+        {
+          type: icon || "",
+          size: "20px",
+          color: currentKeyIdPath.includes(id) ? "#fff" : void 0
+        }
+      ),
+      /* @__PURE__ */ jsx("h2", { children: name })
+    ] }) });
+    return hasChildrenMenu ? /* @__PURE__ */ jsx(
+      Popover,
+      {
+        mouseEnterDelay: 0,
+        content: /* @__PURE__ */ jsx(SideMenu, { dataSource: { ...dataSource, menus: item }, onMenuClick }),
+        color: "#fff",
+        classNames: { root: noticeCls },
+        styles: {
+          content: {
+            marginTop: headerHeight - 64,
+            height: `calc(100vh - ${headerHeight + (notice ? 32 : 0) + 12}px)`,
+            overflow: "hidden"
+          }
+        },
+        placement: "rightTop",
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            onClick: (e) => {
               const menuItem = findMenuItemByKey(menus, String(id));
-              const menuKeyPath = menuItem?.keyIdPath ? menuItem.keyIdPath.map(id => String(id)) : [String(id)];
-
-              // 调用用户传入的onMenuClick回调，获取返回值（是否应该激活菜单）
+              const menuKeyPath = (menuItem == null ? void 0 : menuItem.keyIdPath) ? menuItem.keyIdPath.map((id2) => String(id2)) : [String(id)];
               let shouldActivate = true;
               if (onMenuClick) {
                 const result = onMenuClick({
@@ -123,13 +83,10 @@ const FoldMenu = props => {
                   key: String(id),
                   keyPath: menuKeyPath
                 });
-                // 如果返回 false，表示不应该激活菜单
                 if (result === false) {
                   shouldActivate = false;
                 }
               }
-
-              // 只有在 shouldActivate 为 true 时才设置选中状态
               if (shouldActivate) {
                 onSelected({
                   selectedPath: toPath
@@ -137,84 +94,71 @@ const FoldMenu = props => {
               }
             },
             children: LiNode
-          })
-        }, `${id}-${name}`) : !collapsed ? /*#__PURE__*/_jsx(Tooltip, {
-          placement: "right",
-          title: name,
-          children: /*#__PURE__*/_jsx("span", {
-            onClickCapture: e => {
-              // 查找完整的菜单项数据
-              const menuItem = findMenuItemByKey(menus, String(id));
-              const menuKeyPath = menuItem?.keyIdPath ? menuItem.keyIdPath.map(id => String(id)) : [String(id)];
-
-              // 调用用户传入的onMenuClick回调，获取返回值（是否应该激活菜单）
-              let shouldActivate = true;
-              if (onMenuClick) {
-                const result = onMenuClick({
-                  item: menuItem,
-                  key: String(id),
-                  keyPath: menuKeyPath
-                });
-                // 如果返回 false，表示不应该激活菜单
-                if (result === false) {
-                  shouldActivate = false;
-                }
-              }
-
-              // 只有在 shouldActivate 为 true 时才设置选中状态
-              if (shouldActivate) {
-                onSelected({
-                  selectedPath: toPath
-                });
-              } else {
-                // Capture 阶段拦截，早于 Link 内部导航处理器
-                e.preventDefault();
-                e.stopPropagation();
-              }
-            },
-            children: /*#__PURE__*/_jsx(Link, {
-              to: toPath,
-              children: LiNode
-            })
-          })
-        }, `${id}-${name}`) : /*#__PURE__*/_jsx("span", {
-          onClickCapture: e => {
-            // 查找完整的菜单项数据
-            const menuItem = findMenuItemByKey(menus, String(id));
-            const menuKeyPath = menuItem?.keyIdPath ? menuItem.keyIdPath.map(id => String(id)) : [String(id)];
-
-            // 调用用户传入的onMenuClick回调，获取返回值（是否应该激活菜单）
-            let shouldActivate = true;
-            if (onMenuClick) {
-              const result = onMenuClick({
-                item: menuItem,
-                key: String(id),
-                keyPath: menuKeyPath
-              });
-              // 如果返回 false，表示不应该激活菜单
-              if (result === false) {
-                shouldActivate = false;
-              }
+          }
+        )
+      },
+      `${id}-${name}`
+    ) : !collapsed ? /* @__PURE__ */ jsx(Tooltip, { placement: "right", title: name, children: /* @__PURE__ */ jsx(
+      "span",
+      {
+        onClickCapture: (e) => {
+          const menuItem = findMenuItemByKey(menus, String(id));
+          const menuKeyPath = (menuItem == null ? void 0 : menuItem.keyIdPath) ? menuItem.keyIdPath.map((id2) => String(id2)) : [String(id)];
+          let shouldActivate = true;
+          if (onMenuClick) {
+            const result = onMenuClick({
+              item: menuItem,
+              key: String(id),
+              keyPath: menuKeyPath
+            });
+            if (result === false) {
+              shouldActivate = false;
             }
-
-            // 只有在 shouldActivate 为 true 时才设置选中状态
-            if (shouldActivate) {
-              onSelected({
-                selectedPath: toPath
-              });
-            } else {
-              // Capture 阶段拦截，早于 Link 内部导航处理器
-              e.preventDefault();
-              e.stopPropagation();
+          }
+          if (shouldActivate) {
+            onSelected({
+              selectedPath: toPath
+            });
+          } else {
+            e.preventDefault();
+            e.stopPropagation();
+          }
+        },
+        children: /* @__PURE__ */ jsx(Link, { to: toPath, children: LiNode })
+      }
+    ) }, `${id}-${name}`) : /* @__PURE__ */ jsx(
+      "span",
+      {
+        onClickCapture: (e) => {
+          const menuItem = findMenuItemByKey(menus, String(id));
+          const menuKeyPath = (menuItem == null ? void 0 : menuItem.keyIdPath) ? menuItem.keyIdPath.map((id2) => String(id2)) : [String(id)];
+          let shouldActivate = true;
+          if (onMenuClick) {
+            const result = onMenuClick({
+              item: menuItem,
+              key: String(id),
+              keyPath: menuKeyPath
+            });
+            if (result === false) {
+              shouldActivate = false;
             }
-          },
-          children: /*#__PURE__*/_jsx(Link, {
-            to: toPath,
-            children: LiNode
-          })
-        }, `${id}-${name}`);
-      })
-    })
-  });
+          }
+          if (shouldActivate) {
+            onSelected({
+              selectedPath: toPath
+            });
+          } else {
+            e.preventDefault();
+            e.stopPropagation();
+          }
+        },
+        children: /* @__PURE__ */ jsx(Link, { to: toPath, children: LiNode })
+      },
+      `${id}-${name}`
+    );
+  }) }) });
+};
+var FoldMenu_default = FoldMenu;
+export {
+  FoldMenu_default as default
 };
-export default FoldMenu;