@zat-design/sisyphus-react 3.0.13

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

@@ -0,0 +1,127 @@
+  /** 顶部 */
+  .pro-layout-header {
+    position       : fixed;
+    top            : 0;
+    z-index        : 102;
+    display        : flex;
+    flex-direction : row;
+    align-items    : center;
+    justify-content: space-between;
+    width          : 100%;
+    height         : 48px;
+    padding        : 0 32px 0px 0px;
+    line-height    : 48px;
+    background     : var(--zaui-base-bg, #ffffff);
+    box-shadow     : 0px 12px 8px 0px rgba(0, 55, 93, 0.04),
+      0px 2px 4px 0px rgba(0, 55, 93, 0.06);
+
+    .pro-layout-header-actions {
+      .ant-avatar {
+        background: var(--zaui-brand, #006aff);
+      }
+    }
+
+    .pro-layout-header-logo {
+      display    : flex;
+      flex       : 200px;
+      align-items: center;
+      width      : 200px;
+      padding    : 0;
+      background : var(--zaui-base-bg, #ffffff);
+
+      span {
+        display        : flex;
+        align-items    : center;
+        justify-content: center;
+        width          : 220px;
+      }
+
+      .default-logo {
+        display: inline-block;
+        width  : 120px;
+        height : auto;
+      }
+
+      h4 {
+        font-size   : 16px;
+        font-weight : 600;
+        color       : #1D2129;
+        padding-left: 16px;
+        position    : relative;
+        margin      : 0;
+
+        &::before {
+          content   : '';
+          width     : 1px;
+          height    : 19px;
+          background: #DEE0E3;
+          position  : absolute;
+          left      : 0;
+          top       : 50%;
+          transform : translateY(-50%);
+        }
+      }
+
+      a {
+        color: rgba(0, 0, 0, 0.85);
+      }
+
+      .pro-layout-icon {
+        width : 200px;
+        height: 48px;
+      }
+    }
+
+    &-logo {
+      height          : 48px;
+      padding         : 5px 0;
+      text-align      : center;
+      background-color: #081838;
+      transition      : width 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
+
+      >a {
+        display        : flex;
+        align-items    : center;
+        text-decoration: none;
+
+        &:hover,
+        &:visited {
+          text-decoration: none !important;
+        }
+      }
+
+      img {
+        height: 33px;
+      }
+
+      h1 {
+        margin      : 0.67em 0;
+        padding-left: 12px;
+        color       : var(--zaui-text, #343434);
+        font-size   : 18px;
+      }
+    }
+
+    &-content {
+      flex: auto;
+    }
+
+    &-actions {
+      display    : flex;
+      align-items: center;
+      float      : right;
+
+      >.pro-layout-icon {
+        width       : 26px;
+        height      : 26px;
+        margin-right: 30px;
+        color       : var(--zaui-text, #343434);
+        cursor      : pointer;
+        transition  : width 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
+
+        &:hover {
+          color: var(--zaui-text, #343434);
+        }
+      }
+    }
+  }

package/es/ProLayout/components/Layout/Icon/Icon.d.ts

@@ -0,0 +1,10 @@
+import type { FC } from 'react';
+import React from 'react';
+export interface IconProps {
+    type: string;
+    iconfontUrl: string;
+    style?: any;
+    onClick?: React.MouseEventHandler<SVGSVGElement>;
+}
+declare const Icon: FC<IconProps>;
+export default Icon;

package/es/ProLayout/components/Layout/Icon/Icon.js

@@ -0,0 +1,31 @@
+import React, { useEffect } from 'react';
+var customCache = new Set();
+var Icon = function Icon(props) {
+  // @ts-ignore
+  var type = props.type,
+    onClick = props.onClick,
+    style = props.style,
+    _props$iconfontUrl = props.iconfontUrl,
+    iconfontUrl = _props$iconfontUrl === void 0 ? '//at.alicdn.com/t/font_3000529_v88n7r0v7ae.js' : _props$iconfontUrl;
+  var loadSymbol = function loadSymbol(scriptUrl) {
+    if (typeof document !== 'undefined' && typeof window !== 'undefined' && typeof document.createElement === 'function' && typeof scriptUrl === 'string' && scriptUrl.length && !customCache.has(scriptUrl)) {
+      var script = document.createElement('script');
+      script.setAttribute('src', scriptUrl);
+      script.setAttribute('data-namespace', scriptUrl);
+      customCache.add(scriptUrl);
+      document.body.appendChild(script);
+    }
+  };
+  useEffect(function () {
+    loadSymbol(iconfontUrl);
+  }, []);
+  return /*#__PURE__*/React.createElement("svg", {
+    className: "pro-layout-icon",
+    "aria-hidden": "true",
+    onClick: onClick,
+    style: style
+  }, /*#__PURE__*/React.createElement("use", {
+    xlinkHref: "#icon-".concat(type)
+  }));
+};
+export default Icon;

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

@@ -0,0 +1,2 @@
+import Icon from './Icon';
+export default Icon;

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

@@ -0,0 +1,2 @@
+import Icon from './Icon';
+export default Icon;

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

@@ -0,0 +1,7 @@
+.pro-layout-icon {
+  width: 20px;
+  height: 20px;
+  overflow: hidden;
+  vertical-align: middle;
+  fill: currentColor;
+}

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

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

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

@@ -0,0 +1,98 @@
+import "antd/es/tooltip/style";
+import _Tooltip from "antd/es/tooltip";
+import "antd/es/popover/style";
+import _Popover from "antd/es/popover";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React from 'react';
+import { Link } from 'react-router-dom';
+import classnames from 'classnames';
+import { Icon } from '../../index';
+import SideMenu from '../SideMenu';
+import { getUrlParams, getPathNameKey } from '../../../../utils';
+var FoldMenu = function FoldMenu(props) {
+  var style = props.style,
+    dataSource = props.dataSource;
+  var menus = dataSource.menus,
+    iconfontUrl = dataSource.iconfontUrl,
+    notice = dataSource.notice,
+    collapsed = dataSource.collapsed,
+    headerHeight = dataSource.headerHeight;
+  var pathNamePrefix = "/".concat(window.location.pathname.split('/')[1]);
+  var noticeCls = classnames({
+    'pro-layout-menu-tooltip': true,
+    'pro-layout-menu-tooltip-has-notice': notice,
+    'pro-layout-menu-tooltip-nav-open': collapsed
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pro-layout-menu-fold",
+    style: _objectSpread({}, style)
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: "pro-layout-menu-fold-list",
+    style: _objectSpread({}, style)
+  }, menus.map(function (item, index) {
+    var _url$split;
+    var id = item.id,
+      url = item.url,
+      name = item.name,
+      icon = item.icon,
+      imgUrl = item.imgUrl,
+      imgActiveUrl = item.imgActiveUrl,
+      hideInMenu = item.hideInMenu,
+      children = item.children;
+    // 隐藏菜单
+    if (hideInMenu) {
+      return null;
+    }
+    var selectedMenu = getUrlParams('activeMenu');
+    // 取第一级
+    var currentKeyIdPath = getPathNameKey({
+      menus: menus,
+      pathName: selectedMenu || window.location.pathname // 优先匹配URL中定位菜单
+    }) || [];
+    var cls = classnames({
+      active: currentKeyIdPath.includes(id)
+    });
+    // 是否包含子级菜单
+    var hasChildrenMenu = Array.isArray(children) && children.length;
+    // 一级li Dom节点
+    var LiNode = /*#__PURE__*/React.createElement("li", {
+      key: "".concat(id, "-").concat(name),
+      id: url === null || url === void 0 ? void 0 : (_url$split = url.split('/')) === null || _url$split === void 0 ? void 0 : _url$split[1],
+      className: "".concat(cls, " pro-layout-menu-fold-li")
+    }, /*#__PURE__*/React.createElement("div", null, imgUrl ? /*#__PURE__*/React.createElement("img", {
+      className: "pro-layout-icon",
+      src: pathNamePrefix === url ? imgActiveUrl || imgUrl : imgUrl,
+      alt: "icon"
+    }) : /*#__PURE__*/React.createElement(Icon, {
+      type: icon || '',
+      iconfontUrl: iconfontUrl || ''
+    }), /*#__PURE__*/React.createElement("h2", null, name)));
+    return hasChildrenMenu ? /*#__PURE__*/React.createElement(_Popover, {
+      key: "".concat(id, "-").concat(name),
+      mouseEnterDelay: 0,
+      content: /*#__PURE__*/React.createElement(SideMenu, {
+        dataSource: _objectSpread(_objectSpread({}, dataSource), {}, {
+          menus: item
+        })
+      }),
+      color: "#fff",
+      overlayClassName: noticeCls,
+      overlayInnerStyle: {
+        marginTop: headerHeight - 48,
+        height: "calc(100vh - ".concat(headerHeight + (notice ? 32 : 0), "px)")
+      },
+      placement: "rightTop"
+    }, LiNode) : !collapsed ? /*#__PURE__*/React.createElement(_Tooltip, {
+      placement: "right",
+      title: name,
+      key: item.redirectUrl || item.url
+    }, /*#__PURE__*/React.createElement(Link, {
+      to: item.redirectUrl || item.url,
+      key: item.redirectUrl || item.url
+    }, LiNode)) : /*#__PURE__*/React.createElement(Link, {
+      to: item.redirectUrl || item.url,
+      key: item.redirectUrl || item.url
+    }, LiNode);
+  })));
+};
+export default FoldMenu;

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

@@ -0,0 +1,100 @@
+.pro-layout-menu-fold-list {
+  padding-top: 4px;
+  overflow-y : auto;
+
+  li {
+    width        : 100%;
+    min-height   : 48px;
+    padding      : 12px;
+    overflow     : hidden;
+    text-overflow: ellipsis;
+
+    div {
+      display        : flex;
+      align-items    : top;
+      justify-content: left;
+      color          : var(--zaui-text, #343434);
+
+      .pro-layout-icon {
+        flex     : 0 0 20px;
+        width    : 20px;
+        height   : 20px;
+        min-width: 20px;
+        color    : #fff;
+      }
+
+      h2 {
+        flex-grow    : 1;
+        margin-bottom: 0;
+        opacity      : 1;
+        transition   : opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
+          margin 0.3s, color 0.3s;
+        display: none;
+      }
+    }
+
+    &:hover {
+      background: var(--ant-primary-8, #003eb3);
+    }
+
+    i {
+      display: inline-block;
+      width  : 19px;
+      color  : #909090;
+    }
+
+    h2 {
+      display     : inline-block;
+      padding-left: 8px;
+      color       : var(--zaui-base-bg, #ffffff);
+      font-weight : normal;
+      font-size   : 14px;
+    }
+
+    &.active {
+      background-color: var(--zaui-brand, #006AFF);
+
+      a {
+        h2 {
+          color: var(--zaui-base-bg, #ffffff);
+        }
+      }
+    }
+  }
+}
+
+.pro-layout-menu-tooltip {
+  top       : 48px !important;
+  transform : none !important;
+  transition: none !important
+}
+
+.pro-layout-menu-tooltip.pro-layout-menu-tooltip-has-notice {
+  top: 80px !important
+}
+
+.pro-layout-menu-tooltip.pro-layout-menu-tooltip-nav-open.ant-popover-placement-rightBottom,
+.pro-layout-menu-tooltip.pro-layout-menu-tooltip-nav-open.ant-popover-placement-rightTop {
+  left: 220px !important
+}
+
+.pro-layout-menu-tooltip.ant-popover-placement-rightBottom,
+.pro-layout-menu-tooltip.ant-popover-placement-rightTop {
+  position    : fixed;
+  z-index     : 1051;
+  left        : 49px !important;
+  padding-left: 0
+}
+
+.pro-layout-menu-tooltip .ant-popover-inner-content {
+  padding: 0
+}
+
+.pro-layout-menu-tooltip .ant-popover-content>.ant-popover-arrow {
+  display: none
+}
+
+.pro-layout-menu-tooltip .ant-popover-content .ant-popover-inner {
+  padding      : 0;
+  // box-shadow: 0 0 0
+}

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

@@ -0,0 +1,3 @@
+import type { OpenMenuPropsType } from './propsType';
+declare const OpenMenu: (props: OpenMenuPropsType) => JSX.Element;
+export default OpenMenu;

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

@@ -0,0 +1,144 @@
+import "antd/es/menu/style";
+import _Menu from "antd/es/menu";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useMemo } from 'react';
+import { useDeepCompareEffect, useSetState } from 'ahooks';
+import { CaretDownOutlined } from '@ant-design/icons';
+import { useHistory } from 'react-router-dom';
+import classnames from 'classnames';
+import { cloneDeep } from 'lodash';
+import { getIdsByPathName } from '../../../../utils';
+import { Icon } from '../../index';
+var OpenMenu = function OpenMenu(props) {
+  var _getIdsByPathName, _history$location, _history$location$que;
+  var className = props.className,
+    dataSource = props.dataSource,
+    style = props.style,
+    _props$theme = props.theme,
+    theme = _props$theme === void 0 ? 'dark' : _props$theme,
+    otherProps = props.otherProps;
+  var _ref = dataSource || {},
+    menus = _ref.menus,
+    sideMenu = _ref.sideMenu;
+  // 通过URL匹配对应的ID用于回显
+  var _useSetState = useSetState({
+      selectedKeys: [],
+      openKeys: []
+    }),
+    _useSetState2 = _slicedToArray(_useSetState, 2),
+    _useSetState2$ = _useSetState2[0],
+    selectedKeys = _useSetState2$.selectedKeys,
+    openKeys = _useSetState2$.openKeys,
+    setState = _useSetState2[1];
+  var history = useHistory();
+  var cls = classnames(_defineProperty({
+    'pro-layout-open-menu': true
+  }, "".concat(className), className));
+  // 默认激活菜单优先取activeMenu中，默认取pathName进行匹配
+  var selectKeyIdPath = ((_getIdsByPathName = getIdsByPathName(menus, history === null || history === void 0 ? void 0 : (_history$location = history.location) === null || _history$location === void 0 ? void 0 : (_history$location$que = _history$location.query) === null || _history$location$que === void 0 ? void 0 : _history$location$que.activeMenu)) === null || _getIdsByPathName === void 0 ? void 0 : _getIdsByPathName.map(function (item) {
+    return String(item);
+  })) || [];
+  var itemsTransform = useMemo(function () {
+    var result = cloneDeep(menus);
+    if (!Array.isArray(result) || !result.length) {
+      return [];
+    }
+    var menuDeep = function menuDeep(data) {
+      data.forEach(function (item) {
+        var _item$children;
+        // 是否是第一级菜单，展开模式一级菜单有icon, 收起模式二级菜单有icon
+        var isFirstMenu = item.keyIdPath.length === 1 || sideMenu && item.keyIdPath.length === 2;
+        // 第一级菜单显示icon
+        item.label = /*#__PURE__*/React.createElement("div", {
+          className: classnames({
+            'pro-layout-open-menu-lv1': isFirstMenu
+          })
+        }, /*#__PURE__*/React.createElement(React.Fragment, null, item.imgUrl && isFirstMenu ? /*#__PURE__*/React.createElement("img", {
+          className: "pro-layout-icon",
+          src: selectKeyIdPath[0] === String(item.id) ? item.imgActiveUrl || item.imgUrl : item.imgUrl,
+          alt: "icon"
+        }) : item.icon && isFirstMenu ? /*#__PURE__*/React.createElement(Icon, {
+          type: item.icon || '',
+          iconfontUrl: (dataSource === null || dataSource === void 0 ? void 0 : dataSource.iconfontUrl) || ''
+        }) : /*#__PURE__*/React.createElement("span", {
+          className: classnames({
+            'pro-layout-icon': true,
+            'pro-layout-icon-empty': isFirstMenu
+          })
+        })), /*#__PURE__*/React.createElement("h2", null, item.name));
+        item.key = String(item.id);
+        item.router = item.redirectUrl || item.router || item.url;
+        Object.keys(item).filter(function (keyItem) {
+          return !['label', 'key', 'children', 'onTitleClick', 'router'].includes(keyItem);
+        }).forEach(function (_keyItem) {
+          delete item[_keyItem];
+        });
+        if (Array.isArray(item === null || item === void 0 ? void 0 : item.children) && (item === null || item === void 0 ? void 0 : (_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length) > 0) {
+          var _item = item === null || item === void 0 ? void 0 : item.children[0];
+          // 移除不需要显示的菜单
+          if ((_item === null || _item === void 0 ? void 0 : _item.hideInMenu) || ['TAB', 'QUERY', 'BUTTON'].includes(_item === null || _item === void 0 ? void 0 : _item.type)) {
+            delete item.children;
+          } else {
+            menuDeep(item.children);
+          }
+        } else {
+          delete item.children;
+        }
+      });
+      return data;
+    };
+    menuDeep(result);
+    return result;
+  }, [dataSource]);
+  useDeepCompareEffect(function () {
+    if (Array.isArray(selectKeyIdPath) && selectKeyIdPath.length) {
+      setState({
+        selectedKeys: selectKeyIdPath,
+        openKeys: selectKeyIdPath.slice(0, 2)
+      });
+    }
+  }, [menus]);
+  // 折叠模式默认展开全部菜单
+  useDeepCompareEffect(function () {
+    if (sideMenu) {
+      var keys = menus.map(function (item) {
+        return String(item.id);
+      });
+      setState({
+        openKeys: keys
+      });
+    }
+  }, [sideMenu]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: cls,
+    style: style
+  }, /*#__PURE__*/React.createElement(_Menu, {
+    mode: "inline",
+    theme: theme,
+    selectedKeys: selectedKeys,
+    openKeys: openKeys,
+    items: itemsTransform,
+    inlineIndent: 14,
+    expandIcon: /*#__PURE__*/React.createElement(CaretDownOutlined, null),
+    onOpenChange: function onOpenChange(openKeys) {
+      setState({
+        openKeys: openKeys
+      });
+    },
+    onClick: function onClick(_ref2) {
+      var _item$props;
+      var item = _ref2.item,
+        keyPath = _ref2.keyPath;
+      setState({
+        selectedKeys: keyPath
+      });
+      history.push(item === null || item === void 0 ? void 0 : (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.router);
+    },
+    style: {
+      height: dataSource.sideMenu ? 'auto' : "calc(100vh - ".concat((dataSource === null || dataSource === void 0 ? void 0 : dataSource.height) || 0, "px)"),
+      color: 'red'
+    }
+  }));
+};
+export default OpenMenu;

package/es/ProLayout/components/Layout/Menu/OpenMenu/propsType.d.ts

@@ -0,0 +1,14 @@
+export interface OpenMenuPropsType {
+    dataSource: {
+        menus: any;
+        iconfontUrl: string;
+        height?: number;
+        /** 是否是折叠模式的菜单 */
+        sideMenu?: boolean;
+    };
+    [key: string]: any;
+}
+export interface StatePropsType {
+    selectedKeys: string[];
+    openKeys: string[];
+}

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

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