@zat-design/sisyphus-react 4.2.0-beta.2 → 4.2.0-beta.3

package/lib/ProLayout/components/Layout/Menu/OpenMenu/style/index.less

@@ -1,177 +0,0 @@
-@import '../../../../../../style/variables.less';
-
-.pro-layout-open-menu {
-  // 展开动画期间（Menu 传入 textVisible=false）隐藏文字，避免”挤压式逐字出现”；宽度过渡结束后再淡入
-  &.pro-layout-menu-text-hidden {
-    .@{ant-prefix}-menu-title-content {
-      div {
-        h2 {
-          opacity: 0 !important;
-          transition: none !important; // 确保隐藏时无过渡动画
-        }
-      }
-    }
-  }
-
-  .@{ant-prefix}-menu-root {
-    overflow-y: auto !important;
-
-    & > .@{ant-prefix}-menu-submenu > .@{ant-prefix}-menu-submenu-title,
-    & > .@{ant-prefix}-menu-item.@{ant-prefix}-menu-item-only-child {
-      padding-left: 16px !important;
-    }
-
-    & > .@{ant-prefix}-menu-submenu {
-      & > .@{ant-prefix}-menu-sub > .@{ant-prefix}-menu-submenu > .@{ant-prefix}-menu-submenu-title,
-      & > .@{ant-prefix}-menu-item-only-child,
-      & > .@{ant-prefix}-menu-sub > .@{ant-prefix}-menu-item-only-child {
-        padding-left: 16px !important;
-      }
-    }
-
-    & > .@{ant-prefix}-menu-item-only-child {
-      height: auto;
-      min-height: 48px;
-      margin: 0;
-      padding-top: 12px;
-      padding-bottom: calc(
-        var(--zaui-space-size-md; 16px) * var(--zaui-size; 1) - var(--zaui-space-size-xs; 4px) *
-          var(--zaui-size; 1)
-      );
-
-      h2 {
-        height: auto !important;
-        line-height: initial !important;
-        white-space: pre-wrap;
-      }
-    }
-
-    .@{ant-prefix}-menu-item {
-      padding-left: 30px !important;
-
-      &::after {
-        display: none;
-      }
-    }
-  }
-
-  .@{ant-prefix}-menu-inline {
-    .@{ant-prefix}-menu-submenu-title {
-      margin: 0;
-    }
-  }
-
-  .@{ant-prefix}-menu-item,
-  .@{ant-prefix}-menu-submenu-title {
-    &:hover {
-      background: transparent;
-    }
-  }
-
-
-  .@{ant-prefix}-menu-item-selected {
-    background: transparent !important;
-
-    h2 {
-      color: var(--zaui-brand, #006aff) !important;
-    }
-  }
-
-  .@{ant-prefix}-menu-sub.@{ant-prefix}-menu-inline > .@{ant-prefix}-menu-item,
-  .@{ant-prefix}-menu-submenu-title {
-    height: auto !important;
-    min-height: 48px;
-    margin: 0;
-    padding: 12px 0;
-    line-height: initial !important;
-    white-space: pre-wrap;
-  }
-
-  .@{ant-prefix}-menu-title-content {
-    div {
-      display: flex;
-      align-items: center;
-      justify-content: left;
-
-      .pro-layout-icon {
-        flex: 0 0 20px;
-        width: 20px;
-        height: 20px;
-        color: var(--zaui-text, #343434);
-      }
-
-      h2 {
-        display: inline-block;
-        flex-grow: 1;
-        margin-bottom: 0;
-        padding-left: 12px;
-        color: var(--zaui-text, #343434);
-        font-weight: 400;
-        font-size: var(--zaui-font-size-md, 14px);
-        opacity: 1;
-        // 修改：添加 150ms 的 opacity 淡入动画，消除"突然出现"的卡顿感
-        transition: opacity 0.15s ease-out, margin 0.3s, color 0.3s;
-      }
-    }
-  }
-
-  .anticon-caret-down {
-    top: auto;
-    color: #999;
-    transform: rotateZ(0deg);
-    transition: all 0.1s ease-in;
-  }
-
-  .@{ant-prefix}-menu-submenu-open {
-    .anticon-caret-down {
-      color: var(--zaui-text, #343434);
-      transform: rotateZ(180deg);
-    }
-
-    .@{ant-prefix}-menu-submenu-inline {
-      .anticon-caret-down {
-        color: #999;
-        transform: rotateZ(0deg);
-      }
-
-      &.@{ant-prefix}-menu-submenu-open {
-        .anticon-caret-down {
-          color: var(--zaui-text, #343434);
-          transform: rotateZ(180deg);
-        }
-      }
-    }
-  }
-
-  .@{ant-prefix}-menu-submenu:hover
-    > .@{ant-prefix}-menu-submenu-title
-    > .@{ant-prefix}-menu-submenu-expand-icon {
-    color: var(--zaui-text, #343434);
-  }
-
- .@{ant-prefix}-menu-item-selected{
-  .@{ant-prefix}-menu-title-content{
-    h2{
-      font-weight: bold !important;
-    }
-  }
- }
-
-  // 父级菜单不展示选中态，仅最后一级菜单显示选中高亮
-  .@{ant-prefix}-menu-submenu-selected {
-    & > .@{ant-prefix}-menu-submenu-title {
-      background: transparent !important;
-
-      .@{ant-prefix}-menu-title-content div {
-        .pro-layout-icon {
-          color: var(--zaui-text, #343434);
-        }
-
-        h2 {
-          color: var(--zaui-text, #343434);
-          font-weight: 400;
-        }
-      }
-    }
-  }
-}

package/lib/ProLayout/components/Layout/Menu/SideMenu/index.d.ts

@@ -1,3 +0,0 @@
-import type { FC } from 'react';
-declare const SideMenu: FC<any>;
-export default SideMenu;

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

@@ -1,47 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _ahooks = require("ahooks");
-var _OpenMenu = _interopRequireDefault(require("../OpenMenu"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var SideMenu = props => {
-  var dataSource = props.dataSource,
-    onMenuClick = props.onMenuClick;
-  var ref = (0, _react.useRef)(null);
-  var size = (0, _ahooks.useSize)(ref);
-  var menus = dataSource.menus,
-    iconfontUrl = dataSource.iconfontUrl,
-    notice = dataSource.notice,
-    collapsed = dataSource.collapsed,
-    headerHeight = dataSource.headerHeight;
-  var cls = (0, _classnames.default)({
-    'pro-layout-sider-menu': true
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: cls,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
-      ref: ref,
-      children: (menus === null || menus === void 0 ? void 0 : menus.name) || ''
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_OpenMenu.default, {
-        className: "pro-layout-sider-menu-list",
-        onMenuClick: onMenuClick,
-        dataSource: {
-          menus: (menus === null || menus === void 0 ? void 0 : menus.children) || [],
-          iconfontUrl,
-          sideMenu: true
-        },
-        style: {
-          height: `calc(100vh - ${headerHeight + (notice ? 32 : 0) + ((size === null || size === void 0 ? void 0 : size.height) || 0) + 12}px)`
-        }
-      })
-    })]
-  });
-};
-var _default = exports.default = SideMenu;

package/lib/ProLayout/components/Layout/Menu/SideMenu/style/index.less

@@ -1,124 +0,0 @@
-@import '../../../../../../style/variables.less';
-
-.pro-layout-sider-menu {
-  width: 220px;
-  background: #fff;
-  border-radius: 8px;
-
-  h2 {
-    margin-bottom: 0;
-    padding: 16px 16px 8px;
-    color: var(--zaui-text, #343434);
-    font-weight: 500;
-    font-size: var(--zaui-font-size-lg, 16px);
-    line-height: inherit;
-    text-align: left;
-  }
-
-  .pro-layout-open-menu {
-    &.pro-layout-sider-menu-list {
-      overflow-y: auto;
-
-      .@{ant-prefix}-menu-item-selected {
-        background-color: transparent !important;
-
-        h2 {
-          color: var(--zaui-brand, #006aff) !important;
-        }
-
-        &::after {
-          display: none;
-        }
-      }
-
-      .@{ant-prefix}-menu {
-        .@{ant-prefix}-menu-item-only-child{
-          .@{ant-prefix}-menu-title-content  .pro-layout-open-menu-lv1 h2{
-            padding-right: 0;
-          }
-        }
-        .@{ant-prefix}-menu-title-content {
-          div h2 {
-            padding: 0;
-            padding-right: 12px;
-            color: var(--zaui-text);
-          }
-
-          .pro-layout-open-menu-lv1 {
-            h2 {
-              padding-right: 26px;
-              color: var(--zaui-text);
-              font-weight: 500;
-            }
-          }
-        }
-
-        .@{ant-prefix}-menu-title-content div .pro-layout-icon {
-          margin-right: 12px;
-
-          &.pro-layout-icon-empty {
-            display: none;
-
-            & ~ h2 {
-              margin-left: 32px;
-            }
-          }
-        }
-
-        .pro-layout-icon {
-          color: var(--zaui-text, #343434) !important;
-          fill: currentColor;
-        }
-
-        &.@{ant-prefix}-menu-sub {
-          overflow: hidden;
-          background: #fff;
-        }
-
-        overflow-x: hidden;
-        overflow-y: auto;
-
-        // 与展开态一致：hover 使用透明背景 + 左侧品牌色半透明条
-        .@{ant-prefix}-menu-submenu-title:hover,
-        .@{ant-prefix}-menu-item:hover,
-        .@{ant-prefix}-menu-item-selected {
-          position: relative;
-          background-color: transparent !important;
-
-          &::before {
-            position: absolute;
-            left: var(--zaui-space-size-sm, 8px);
-            right: var(--zaui-space-size-sm, 8px);
-            width: auto;
-            min-height: 38px;
-            height: 80%;
-            background-color: var(--zaui-brand, #006aff);
-            border-radius: var(--zaui-border-radius, 8px);
-            opacity: 0.08;
-            content: '';
-          }
-        }
-
-        .@{ant-prefix}-menu-item {
-          margin: 0;
-        }
-
-        .anticon-caret-down {
-          color: #909090;
-        }
-
- 
-
-        .@{ant-prefix}-menu-submenu-title,
-        &.@{ant-prefix}-menu-root > .@{ant-prefix}-menu-item-only-child,
-        &.@{ant-prefix}-menu-sub.@{ant-prefix}-menu-inline > .@{ant-prefix}-menu-item {
-          min-height: 40px;
-          padding-top: 8px;
-          padding-bottom: 8px;
-          width: 100%;
-          border-radius: 0;
-        }
-      }
-    }
-  }
-}

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

@@ -1,4 +0,0 @@
-import type { FC } from 'react';
-import type { ProLayoutType } from '../../../propTypes';
-declare const Menu: FC<ProLayoutType>;
-export default Menu;

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

@@ -1,178 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _OpenMenu = _interopRequireDefault(require("./OpenMenu"));
-var _FoldMenu = _interopRequireDefault(require("./FoldMenu"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } // 折叠后菜单
-// 菜单宽度配置
-var MENU_CONFIG = {
-  TRANSITION_DURATION: 300,
-  // 宽度过渡时长(ms)
-  TEXT_VISIBLE_THRESHOLD: 150,
-  // 文字显示阈值(px, 约68%展开)
-  FULL_WIDTH: 219 // 完全展开宽度(px)
-};
-var Menu = props => {
-  var _ref = props || {},
-    headerHeight = _ref.headerHeight,
-    dataSource = _ref.dataSource,
-    iconfontUrl = _ref.iconfontUrl,
-    collapsed = _ref.collapsed,
-    notice = _ref.notice,
-    onToggle = _ref.onToggle,
-    pure = _ref.pure,
-    sideMenuFooterRender = _ref.sideMenuFooterRender,
-    sideMenuHeaderRender = _ref.sideMenuHeaderRender,
-    onMenuClick = _ref.onMenuClick;
-  var menus = [];
-  var menuRef = (0, _react.useRef)(null);
-  // 整合所有动画相关的refs
-  var animationStateRef = (0, _react.useRef)({
-    timer: null,
-    observer: null,
-    hasTriggered: false
-  });
-  var _useState = (0, _react.useState)(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isOpenMenuTextVisible = _useState2[0],
-    setIsOpenMenuTextVisible = _useState2[1];
-
-  // 提取清理逻辑
-  var cleanupAnimation = (0, _react.useCallback)(() => {
-    var state = animationStateRef.current;
-    if (state.timer) {
-      clearTimeout(state.timer);
-      state.timer = null;
-    }
-    if (state.observer) {
-      try {
-        state.observer.disconnect();
-      } catch (e) {
-        console.warn('ResizeObserver disconnect failed:', e);
-      }
-      state.observer = null;
-    }
-  }, []);
-
-  // 触发文字显示
-  var showMenuText = (0, _react.useCallback)(() => {
-    var state = animationStateRef.current;
-    if (state.hasTriggered) return;
-    state.hasTriggered = true;
-    setIsOpenMenuTextVisible(true);
-    // 延迟清理，避免回调内竞态
-    setTimeout(cleanupAnimation, 0);
-  }, [cleanupAnimation]);
-
-  // ResizeObserver 监听宽度变化，提前显示文字
-  (0, _react.useEffect)(() => {
-    var _menuRef$current$getB, _menuRef$current, _menuRef$current$getB2;
-    var state = animationStateRef.current;
-    state.hasTriggered = false;
-
-    // 折叠态：清理并隐藏文字
-    if (!collapsed) {
-      setIsOpenMenuTextVisible(false);
-      cleanupAnimation();
-      return;
-    }
-
-    // 检查是否已展开
-    var currentWidth = (_menuRef$current$getB = (_menuRef$current = menuRef.current) === null || _menuRef$current === void 0 || (_menuRef$current$getB2 = _menuRef$current.getBoundingClientRect) === null || _menuRef$current$getB2 === void 0 ? void 0 : _menuRef$current$getB2.call(_menuRef$current).width) !== null && _menuRef$current$getB !== void 0 ? _menuRef$current$getB : 0;
-    if (currentWidth >= MENU_CONFIG.FULL_WIDTH) {
-      state.hasTriggered = true;
-      setIsOpenMenuTextVisible(true);
-      return;
-    }
-
-    // 创建 ResizeObserver
-    var supportsResizeObserver = typeof ResizeObserver !== 'undefined';
-    if (supportsResizeObserver && menuRef.current) {
-      state.observer = new ResizeObserver(entries => {
-        var _entries$0$contentRec, _entries$;
-        var width = (_entries$0$contentRec = (_entries$ = entries[0]) === null || _entries$ === void 0 ? void 0 : _entries$.contentRect.width) !== null && _entries$0$contentRec !== void 0 ? _entries$0$contentRec : 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]);
-  var menuCls = (0, _classnames.default)({
-    'pro-layout-menu': true,
-    'pro-layout-menu-open': collapsed
-  });
-  if (Array.isArray(dataSource)) {
-    menus = dataSource;
-  } else if (dataSource) {
-    menus = dataSource === null || dataSource === void 0 ? void 0 : dataSource.menus;
-  }
-  if (pure !== null && pure !== void 0 && pure.leftMenu || pure === true) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_OpenMenu.default, {
-      dataSource: {
-        menus,
-        iconfontUrl,
-        height: headerHeight + (notice ? 32 : 0) + 48
-      },
-      onMenuClick: onMenuClick,
-      textVisible: isOpenMenuTextVisible,
-      style: {
-        display: collapsed ? 'block' : 'none'
-      }
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FoldMenu.default, {
-      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__*/(0, _jsxRuntime.jsx)("div", {
-      className: "pro-layout-menu-collapsed",
-      onClick: () => {
-        setIsOpenMenuTextVisible(false);
-        onToggle === null || onToggle === void 0 || onToggle();
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "pro-layout-arrow "
-      })
-    })]
-  });
-};
-var _default = exports.default = Menu;

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

@@ -1,136 +0,0 @@
-@import '../FoldMenu/style/index.less';
-@import '../OpenMenu/style/index.less';
-@import '../SideMenu/style/index.less';
-
-/** 侧边栏 + 内容区 */
-.pro-layout-row {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-
-  .pro-layout-menu-open {
-    .pro-layout-arrow {
-      transform: rotate(225deg);
-    }
-  }
-
-  .pro-layout-arrow {
-    width: 10px;
-    height: 10px;
-    margin-left: -5px;
-    background-color: transparent;
-    /* 模块背景为透明 */
-    border-color: #fff;
-    border-style: solid;
-    border-width: 2px 2px 0 0;
-    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;
-
-      .pro-layout-content {
-        margin-left: 0 !important;
-      }
-
-      &.pro-layout-content-left-pure {
-        margin-left: 0 !important;
-      }
-    }
-  }
-
-  &.pro-layout-row-has-notice {
-    .pro-layout-menu {
-      top: 96px;
-
-      #nav-list {
-        height: calc(100vh - 144px);
-      }
-    }
-
-    .pro-layout-content {
-      margin-top: 96px;
-    }
-  }
-
-  .pro-layout-menu {
-    position: fixed;
-    top: 64px;
-    left: 0;
-    z-index: 50;
-    width: 48px;
-    height: 100vh;
-    min-height: 100%;
-    padding: 0;
-    overflow-x: hidden;
-    overflow-y: auto;
-    background-color: #F7F9FD;
-    transition: background 0.3s, width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
-
-    &.pro-layout-menu-open {
-      width: 220px;
-      background-color: #F7F9FD;
-    }
-  }
-
-  .pro-layout-menu.pro-layout-menu-open .pro-layout-menu-collapsed {
-    left: 0;
-    width: 220px;
-  }
-
-  .pro-layout-menu.pro-layout-menu-open .pro-layout-menu-collapsed img {
-    transform: rotate(-180deg);
-  }
-
-  .pro-layout-menu .pro-layout-menu-collapsed {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    z-index: 2;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 48px;
-    height: 48px;
-    background: #F7F9FD;
-    transition: all 0.3s ease;
-  }
-
-  .pro-layout-menu .pro-layout-menu-collapsed:hover {
-    background-color: rgba(0, 106, 255, 0.08);
-  }
-
-  .pro-layout-menu .pro-layout-menu-collapsed img {
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-  }
-
-  .pro-layout-menu-open ~ .pro-layout-content {
-    margin-left: 220px !important;
-  }
-}

package/lib/ProLayout/components/Layout/Notice/index.d.ts

@@ -1,4 +0,0 @@
-import type { FC } from 'react';
-import type { ProLayoutType } from '../../../propTypes';
-declare const Notice: FC<ProLayoutType>;
-export default Notice;