@zat-design/sisyphus-react 4.7.0-beta.2 → 4.7.0

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useContext } from "react";
+import { useContext, useEffect, useState } from "react";
 import { Popover, Tooltip } from "antd";
 import classnames from "classnames";
 import { Link as RouterLink } from "react-router-dom";
@@ -10,149 +10,201 @@ import { getUrlParams, getPathNameKey, findMenuItemByKey } from "../../../../uti
 const Link = RouterLink;
 const FoldMenu = (props) => {
   const { style, dataSource, onMenuClick } = props;
-  const { menus, iconfontUrl, notice, collapsed, headerHeight } = dataSource;
+  const {
+    menus,
+    iconfontUrl,
+    notice,
+    collapsed,
+    headerHeight,
+    collapsedMenuShowLabel = false
+  } = dataSource;
   const pathNamePrefix = `/${window.location.pathname.split("/")[1]}`;
+  const [activeHoverKey, setActiveHoverKey] = useState(null);
+  useEffect(() => {
+    setActiveHoverKey(null);
+  }, [collapsed, collapsedMenuShowLabel]);
+  const handleHoverOpenChange = (key, open) => {
+    setActiveHoverKey((current) => open ? key : current === key ? null : current);
+  };
   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-nav-open": collapsed,
+    "pro-layout-menu-tooltip-show-label": collapsedMenuShowLabel
   });
   const { selectedPath, onSelected, menuSelectedPath } = 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) => {
-    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)
-    });
-    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,
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classnames("pro-layout-menu-fold", {
+        "pro-layout-menu-fold-show-label": collapsedMenuShowLabel
+      }),
+      style: { ...style },
+      children: /* @__PURE__ */ jsx(
+        "ul",
         {
-          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 == 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;
-                }
-              }
-              if (shouldActivate) {
-                onSelected({
-                  selectedPath: toPath
-                });
-              }
-            },
-            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 == 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;
-            }
-          }
-          if (shouldActivate) {
-            onSelected({
-              selectedPath: toPath
+          className: "pro-layout-menu-fold-list",
+          style: { ...style },
+          onScroll: () => setActiveHoverKey(null),
+          children: menus.filter((item) => !item.hideInMenu).map((item, index) => {
+            var _a;
+            const { id, url, name, icon, imgUrl, imgActiveUrl, children } = item;
+            const hoverKey = String(id);
+            const hoverOpen = !collapsed && activeHoverKey === hoverKey;
+            const nameCharacters = Array.from(name || "");
+            const label = collapsedMenuShowLabel && !collapsed && nameCharacters.length > 4 ? `${nameCharacters.slice(0, 4).join("")}...` : name;
+            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)
             });
-          } 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;
-            }
-          }
-          if (shouldActivate) {
-            onSelected({
-              selectedPath: toPath
-            });
-          } else {
-            e.preventDefault();
-            e.stopPropagation();
-          }
-        },
-        children: /* @__PURE__ */ jsx(Link, { to: toPath, children: LiNode })
-      },
-      `${id}-${name}`
-    );
-  }) }) });
+            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", { title: name, "aria-label": name, children: label })
+            ] }) });
+            return hasChildrenMenu ? /* @__PURE__ */ jsx(
+              Popover,
+              {
+                mouseEnterDelay: 0,
+                open: hoverOpen,
+                onOpenChange: (open) => handleHoverOpenChange(hoverKey, open),
+                content: /* @__PURE__ */ jsx(SideMenu, { dataSource: { ...dataSource, menus: item }, onMenuClick }),
+                color: "#fff",
+                classNames: { root: noticeCls },
+                styles: {
+                  // 立即隐藏退场中的旧浮层，避免快速移动时动画叠加。
+                  root: { display: hoverOpen ? void 0 : "none" },
+                  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 == 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;
+                        }
+                      }
+                      if (shouldActivate) {
+                        onSelected({
+                          selectedPath: toPath
+                        });
+                      }
+                    },
+                    children: LiNode
+                  }
+                )
+              },
+              `${id}-${name}`
+            ) : !collapsed ? /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                placement: "right",
+                title: name,
+                mouseEnterDelay: 0,
+                open: hoverOpen,
+                onOpenChange: (open) => handleHoverOpenChange(hoverKey, open),
+                styles: { root: { display: hoverOpen ? void 0 : "none" } },
+                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;
+                        }
+                      }
+                      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;
+                    }
+                  }
+                  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 {

package/es/ProLayout/components/Layout/Menu/FoldMenu/style/index.less

@@ -1,17 +1,33 @@
 @import '../../../../../../style/variables.less';
+@import '../../../../../style/variables.less';
 
 .pro-layout-menu-fold-list {
   padding-top: 4px;
+  overflow-x: hidden;
   overflow-y: auto;
 
+  // 两种宽度共用细滚动条，菜单项不随滚动条出现而挤窄。
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 2px;
+  }
+
+  a {
+    text-decoration: none;
+  }
+
   li {
-    width: 100%;
+    width: @pro-layout-menu-fold-width;
     min-height: 48px;
     padding: 12px;
     overflow: hidden;
     text-overflow: ellipsis;
 
-    div {
+    > div {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -34,8 +50,14 @@
 
       h2 {
         display: none;
-        flex-grow: 1;
-        margin-bottom: 0;
+        margin: 0;
+        padding: 0;
+        color: inherit;
+        font-size: 12px;
+        font-weight: normal;
+        line-height: 17px;
+        text-align: center;
+        white-space: nowrap;
         opacity: 1;
         transition:
           opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
@@ -54,14 +76,6 @@
       color: #909090;
     }
 
-    h2 {
-      display: inline-block;
-      padding-left: var(--zaui-space-size-sm, 8px);
-      color: var(--zaui-base-bg, #ffffff);
-      font-weight: normal;
-      font-size: var(--zaui-font-size-md, 14px);
-    }
-
     &.active {
       background-color: var(--zaui-brand, #006aff);
 
@@ -74,6 +88,27 @@
   }
 }
 
+.pro-layout-menu-fold-show-label .pro-layout-menu-fold-list {
+  padding-top: 8px;
+
+  li {
+    width: @pro-layout-menu-label-width;
+    height: 56px;
+    margin-bottom: 4px;
+    padding: 8px 4px;
+
+    > div {
+      flex-direction: column;
+      gap: 3px;
+
+      h2 {
+        display: block;
+        width: 64px;
+      }
+    }
+  }
+}
+
 .pro-layout-menu-tooltip {
   top: 64px !important;
   transform: none !important;
@@ -92,13 +127,13 @@
 
 .pro-layout-menu-tooltip.pro-layout-menu-tooltip-nav-open.@{ant-prefix}-popover-placement-rightBottom,
 .pro-layout-menu-tooltip.pro-layout-menu-tooltip-nav-open.@{ant-prefix}-popover-placement-rightTop {
-  left: 220px !important;
+  left: @pro-layout-menu-open-width !important;
 }
 
 .pro-layout-menu-tooltip.@{ant-prefix}-popover-placement-rightBottom,
 .pro-layout-menu-tooltip.@{ant-prefix}-popover-placement-rightTop {
   position: fixed;
-  left: 49px !important;
+  left: (@pro-layout-menu-fold-width + 1px) !important;
   z-index: 99;
   padding-left: 0;
 
@@ -111,6 +146,10 @@
   padding: 0;
 }
 
+.pro-layout-menu-tooltip.pro-layout-menu-tooltip-show-label {
+  left: (@pro-layout-menu-label-width + 1px) !important;
+}
+
 .pro-layout-menu-tooltip .@{ant-prefix}-popover-content > .@{ant-prefix}-popover-arrow {
   display: none;
 }

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

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

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

@@ -29,6 +29,7 @@ const Menu = (props) => {
     dataSource,
     iconfontUrl,
     collapsed,
+    collapsedMenuShowLabel = false,
     notice,
     onToggle,
     pure,
@@ -149,6 +150,7 @@ const Menu = (props) => {
               height: headerHeight + (notice ? 32 : 0) + 48,
               notice,
               collapsed,
+              collapsedMenuShowLabel,
               headerHeight
             },
             onMenuClick,

package/es/ProLayout/components/Layout/Menu/style/index.less

@@ -26,34 +26,9 @@
     transform: rotate(45deg);
   }
 
-  &.pro-layout-menu-no-collapsed {
-    .pro-layout-menu-fold-li {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      div {
-        width: 20px;
-      }
-
-      a {
-        width: 20px;
-      }
-
-      h2 {
-        display: inline-block;
-        white-space: nowrap;
-        opacity: 0;
-        transition:
-          opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
-          color 0.3s;
-      }
-    }
-  }
-
   &.pro-layout-menu-collapsed {
     .pro-layout-content {
-      margin-left: 220px !important;
+      margin-left: @pro-layout-menu-open-width !important;
 
       .pro-layout-content {
         margin-left: 0 !important;
@@ -84,7 +59,7 @@
     top: 64px;
     left: 0;
     z-index: 50;
-    width: 48px;
+    width: @pro-layout-menu-fold-size;
     height: 100vh;
     min-height: 100%;
     padding: 0;
@@ -96,14 +71,14 @@
       width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
 
     &.pro-layout-menu-open {
-      width: 220px;
+      width: @pro-layout-menu-open-width;
       background-color: #f7f9fd;
     }
   }
 
   .pro-layout-menu.pro-layout-menu-open .pro-layout-menu-collapsed {
     left: 0;
-    width: 220px;
+    width: @pro-layout-menu-open-width;
   }
 
   .pro-layout-menu.pro-layout-menu-open .pro-layout-menu-collapsed img {
@@ -118,7 +93,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 48px;
+    width: @pro-layout-menu-fold-size;
     height: 48px;
     background: #f7f9fd;
     transition: all 0.3s ease;
@@ -135,6 +110,6 @@
   }
 
   .pro-layout-menu-open ~ .pro-layout-content {
-    margin-left: 220px !important;
+    margin-left: @pro-layout-menu-open-width !important;
   }
 }

package/es/ProLayout/index.js

@@ -31,6 +31,7 @@ const ProLayout = (props) => {
     target,
     onCollapsedChange,
     collapsed: propsCollapsed = false,
+    collapsedMenuShowLabel = false,
     onMenuClick,
     // Header组件需要的props
     headerTitleRender,
@@ -243,6 +244,7 @@ const ProLayout = (props) => {
     dataSource: Array.isArray(menus) ? { menus } : menus,
     iconfontUrl,
     collapsed,
+    collapsedMenuShowLabel,
     notice,
     onToggle: () => {
       toggle();
@@ -275,6 +277,7 @@ const ProLayout = (props) => {
         "pro-layout": true,
         "pro-layout-light": true,
         "pro-layout-pure": typeof pure === "boolean" ? pure : (pure == null ? void 0 : pure.topMenu) || (pure == null ? void 0 : pure.leftMenu),
+        "pro-layout-show-collapsed-menu-label": collapsedMenuShowLabel,
         [`${className}`]: className
       }),
       style: {

package/es/ProLayout/propTypes.d.ts

@@ -218,6 +218,11 @@ interface ProLayoutBaseProps {
      * @default false
      */
     collapsed?: boolean;
+    /**
+     * @description 收起时显示菜单名称并使用 72px 侧栏；默认仅显示图标，宽度 48px
+     * @default false
+     */
+    collapsedMenuShowLabel?: boolean;
     /**
      * @description 菜单拼接路径前缀
      * @default ""

package/es/ProLayout/style/index.less

@@ -1,4 +1,5 @@
 @import '../../style/variables.less';
+@import './variables.less';
 @import '../components/Layout/index.less';
 @import '../components/ProCollapse/style/index.less';
 @import '../components/ProFooter/style/index.less';
@@ -6,6 +7,12 @@
 @import '../components/TabsManager/style/index.less';
 
 .pro-layout {
+  --pro-layout-menu-fold-width: @pro-layout-menu-fold-width;
+
+  &.pro-layout-show-collapsed-menu-label {
+    --pro-layout-menu-fold-width: @pro-layout-menu-label-width;
+  }
+
   display: flex;
   flex-direction: column;
   min-height: 100vh;
@@ -138,6 +145,10 @@
             color: #fff;
           }
 
+          h2 {
+            color: var(--zaui-base-bg, #ffffff);
+          }
+
           &::before {
             position: absolute;
             top: 4px;
@@ -174,6 +185,16 @@
     }
   }
 
+  .pro-layout-menu-fold-show-label .pro-layout-menu-fold-list li {
+    &.active::before,
+    &:hover::before {
+      top: 0;
+      left: 8px;
+      width: calc(100% - 16px);
+      height: 56px;
+    }
+  }
+
   .pro-layout-menu-collapsed {
     background: #f7f9fd;
     border-right: none;
@@ -291,7 +312,7 @@
   .pro-layout-tabs-bar-wrapper {
     // 与 pro-layout-content 对齐：同样的左右边距，无内边距让 tab 从左侧直接对齐
     margin-right: var(--zaui-space-size-md, 16px);
-    margin-left: 48px;
+    margin-left: @pro-layout-menu-fold-size;
     padding: 0;
     // 滚动时固定在 header 和 notice 正下方
     position: sticky;
@@ -314,7 +335,7 @@
 
     // 菜单展开时与内容区同步右移
     &.tabs-menu-open {
-      margin-left: 220px;
+      margin-left: @pro-layout-menu-open-width;
     }
 
     // Tab 存在时展开
@@ -337,7 +358,7 @@
     margin-top: 0;
     margin-right: var(--zaui-space-size-md, 16px);
     margin-bottom: 0;
-    margin-left: 48px;
+    margin-left: @pro-layout-menu-fold-size;
     padding: 0 var(--zaui-space-size-md, 16px);
     background: #ffffff;
     border-top: 1px solid rgb(235 236 238);

package/es/ProLayout/style/variables.less

@@ -0,0 +1,4 @@
+@pro-layout-menu-fold-width: 48px;
+@pro-layout-menu-label-width: 72px;
+@pro-layout-menu-fold-size: var(--pro-layout-menu-fold-width, @pro-layout-menu-fold-width);
+@pro-layout-menu-open-width: 220px;