@zat-design/sisyphus-react 3.4.2-beta.2 → 3.4.2-beta.21

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

@@ -1,36 +1,35 @@
 @root-entry-name: 'default';
 @import (reference) '~antd/es/style/themes/index.less';
-@import "../FoldMenu/style/index.less";
-@import "../OpenMenu/style/index.less";
-@import "../SideMenu/style/index.less";
+@import '../FoldMenu/style/index.less';
+@import '../OpenMenu/style/index.less';
+@import '../SideMenu/style/index.less';
 
 /** 侧边栏 + 内容区 */
 .pro-layout-row {
   flex-direction: column;
 
-
   .pro-layout-menu-open {
-    .pro-layout-arrow  {
+    .pro-layout-arrow {
       transform: rotate(225deg);
     }
   }
 
   .pro-layout-arrow {
-    width           : 10px;
-    height          : 10px;
+    width: 10px;
+    height: 10px;
+    margin-left: -5px;
     background-color: transparent;
     /* 模块背景为透明 */
-    border-color    : #fff;
-    border-style    : solid;
-    border-width    : 2px 2px 0 0;
-    margin-left     : -5px;
-    transform       : rotate(45deg);
+    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;
+      display: flex;
+      align-items: center;
       justify-content: center;
 
       div {
@@ -42,11 +41,10 @@
       }
 
       h2 {
-        display    : inline-block;
+        display: inline-block;
         white-space: nowrap;
-        opacity    : 0;
-        transition : opacity 0.5s cubic-bezier(0.645, 0.045, 0.355, 1),
-          color 0.5s;
+        opacity: 0;
+        transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), color 0.3s;
       }
     }
   }
@@ -81,18 +79,18 @@
   }
 
   .pro-layout-menu {
-    position        : fixed;
-    top             : 48px;
-    left            : 0;
-    z-index         : 99;
-    width           : 48px;
-    height          : 100vh;
-    min-height      : 100%;
-    padding         : 0;
-    overflow-x      : hidden;
-    overflow-y      : auto;
+    position: fixed;
+    top: 48px;
+    left: 0;
+    z-index: 99;
+    width: 48px;
+    height: 100vh;
+    min-height: 100%;
+    padding: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
     background-color: #1a202d;
-    transition      : background .3s, width .3s cubic-bezier(.2, 0, 0, 1) 0s;
+    transition: background 0.3s, width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
 
     &.pro-layout-menu-open {
       width: 220px;
@@ -101,52 +99,50 @@
 
   /** 内容区 */
   .pro-layout-content {
-    flex       : auto;
+    z-index: 1;
+    flex: auto;
+    flex: auto;
+    min-height: calc(100vh - 48px);
+    margin-top: 48px;
     margin-left: 48px;
-    padding    : 0 var(--zaui-space-size-md, 16px);
-    transition : all 0.3s ease-in-out;
-    z-index    : 1;
-    flex       : auto;
-    min-height : calc(100vh - 48px);
-    margin-top : 48px;
+    padding: 0 var(--zaui-space-size-md, 16px);
+    transition: all 0.3s ease-in-out;
   }
 
-
-
   .pro-layout-menu.pro-layout-menu-open .pro-layout-menu-collapsed {
-    left : 0;
-    width: 220px
+    left: 0;
+    width: 220px;
   }
 
   .pro-layout-menu.pro-layout-menu-open .pro-layout-menu-collapsed img {
-    transform: rotate(-180deg)
+    transform: rotate(-180deg);
   }
 
   .pro-layout-menu .pro-layout-menu-collapsed {
-    position       : fixed;
-    bottom         : 0;
-    left           : 0;
-    z-index        : 2;
-    display        : flex;
-    align-items    : center;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 2;
+    display: flex;
+    align-items: center;
     justify-content: center;
-    width          : 48px;
-    height         : 48px;
-    transition     : all .25s ease;
-    background     : #292f3b
+    width: 48px;
+    height: 48px;
+    background: #292f3b;
+    transition: all 0.3s ease;
   }
 
   .pro-layout-menu .pro-layout-menu-collapsed:hover {
-    background-color: rgba(185, 185, 189, .1)
+    background-color: rgba(185, 185, 189, 0.1);
   }
 
   .pro-layout-menu .pro-layout-menu-collapsed img {
     display: inline-block;
-    width  : 20px;
-    height : 20px
+    width: 20px;
+    height: 20px;
   }
 
-  .pro-layout-menu-open~.pro-layout-content {
-    margin-left: 220px !important
+  .pro-layout-menu-open ~ .pro-layout-content {
+    margin-left: 220px !important;
   }
 }

package/es/ProLayout/components/ProCollapse/PropTypes.d.ts

@@ -15,16 +15,16 @@ export interface TitleListProps {
 }
 export interface ProCollapseProps {
     /**
-   * @description       折叠头部模式
-   * @default           default
-   */
-    mode?: 'default' | 'card';
-    /**
     * @description       折叠头部标题
     * @default           -
     */
     title?: string | React.ReactNode;
     /**
+   * @description       标题前图标
+   * @default           -
+   */
+    icon?: React.ReactNode | Boolean;
+    /**
     * @description       折叠头部多个标题
     * @default           []
     */

package/es/ProLayout/components/ProCollapse/index.js

@@ -1,5 +1,7 @@
 import "antd/es/descriptions/style";
 import _Descriptions from "antd/es/descriptions";
+import "antd/es/space/style";
+import _Space from "antd/es/space";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import "antd/es/collapse/style";
@@ -7,6 +9,9 @@ import _Collapse from "antd/es/collapse";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CaretRightOutlined } from '@ant-design/icons';
 import classNames from 'classnames';
+import { ReactSVG } from 'react-svg';
+import { isBoolean } from 'lodash';
+import foldSvg from '../../../assets/fold.svg';
 var Panel = _Collapse.Panel;
 var ProCollapse = function ProCollapse(props) {
   var title = props.title,
@@ -26,13 +31,11 @@ var ProCollapse = function ProCollapse(props) {
     _props$folding = props.folding,
     folding = _props$folding === void 0 ? false : _props$folding,
     collapseProps = props.collapseProps,
-    _props$mode = props.mode,
-    mode = _props$mode === void 0 ? 'default' : _props$mode,
     collapsePanelProps = props.collapsePanelProps,
-    className = props.className;
+    className = props.className,
+    icon = props.icon;
   var cls = classNames(_defineProperty({
     'pro-collapse': true,
-    'pro-collapse-card': mode === 'card',
     'pro-collapse-level2': level === '2',
     'pro-collapse-list': titleList === null || titleList === void 0 ? void 0 : titleList.length,
     'pro-collapse-no-title': !title
@@ -43,6 +46,7 @@ var ProCollapse = function ProCollapse(props) {
     children: children
   });
   var renderPanel = function renderPanel() {
+    var _title = title;
     if (level === '2') {
       var level2Panel = classNames({
         'pro-collapse-level2-collapse': towCollapse,
@@ -54,7 +58,7 @@ var ProCollapse = function ProCollapse(props) {
         hasCollapse.collapsible = 'disabled';
       }
       return _jsx(Panel, _objectSpread(_objectSpread(_objectSpread({
-        header: title,
+        header: _title,
         className: level2Panel,
         extra: _jsx("div", {
           className: "extra-info",
@@ -65,8 +69,20 @@ var ProCollapse = function ProCollapse(props) {
         children: content
       }), "1");
     }
+    if (icon) {
+      _title = _jsxs(_Space, {
+        size: 8,
+        align: "center",
+        children: [_jsx("div", {
+          className: "pro-collapse-icon",
+          children: isBoolean(icon) ? _jsx(ReactSVG, {
+            src: foldSvg
+          }) : icon
+        }), title]
+      });
+    }
     return _jsx(Panel, _objectSpread(_objectSpread({
-      header: title,
+      header: _title,
       className: "pro-collapse-panel",
       extra: _jsx("div", {
         className: "extra-info",

package/es/ProLayout/components/ProCollapse/style/index.less

@@ -2,28 +2,23 @@
 @import (reference) '~antd/es/style/themes/index.less';
 
 .pro-collapse {
-  
-  &.pro-collapse-card {
-    border-radius:  var(--zaui-border-radius, 8px);
-    &.pro-collapse-no-title{
-      .pro-collapse-content{
-        border-radius:  var(--zaui-border-radius, 8px) !important;
-      }
-    }
-    .@{ant-prefix}-collapse-header{
-      border-radius: var(--zaui-border-radius, 8px) var(--zaui-border-radius, 8px) 0 0 !important;
-    }
-    .pro-collapse-content{
-      border-radius: 0 0 var(--zaui-border-radius, 8px) var(--zaui-border-radius, 8px);
-      padding-bottom: var(--zaui-space-size-sm, 8px) !important;
+  .pro-collapse-icon{
+    max-width: 18px;
+    min-width: 16px;
+    img{
+      vertical-align: sub;
     }
   }
 
-
   &.pro-collapse-no-title {
     .@{ant-prefix}-collapse-header {
       display: none !important;
     }
+    .pro-collapse-level2{
+      .@{ant-prefix}-collapse-header {
+        display: block !important;
+      }
+    }
   }
 
   &.@{ant-prefix}-collapse {
@@ -45,7 +40,7 @@
   }
 
   .@{ant-prefix}-collapse-expand-icon {
-    color: #c5c7cd;
+    color: #999;
   }
 
   &.@{ant-prefix}-collapse-borderless
@@ -67,16 +62,17 @@
   }
 
   &.pro-collapse-level2 {
-    margin-bottom: 0;
     background: var(--zaui-base-bg, #ffffff);
-
+    .pro-collapse-panel{
+      margin-bottom: 0;
+    }
     .@{ant-prefix}-collapse-header {
       padding: 0 !important;
       background: var(--zaui-base-bg, #ffffff);
 
       .@{ant-prefix}-collapse-header-text {
         position: relative;
-        padding-left: 12px;
+        padding-left: 15px;
         font-size: var(--zaui-font-size, 14px);
 
         &::before {
@@ -104,9 +100,13 @@
     }
 
     .pro-collapse-level2-collapse {
+      margin-bottom: var(--zaui-space-size-md, 16px);
+      &.@{ant-prefix}-collapse-item-active{
+        margin-bottom: 0;
+      }
       .@{ant-prefix}-collapse-header {
         padding: 0 8px 6px !important;
-        border-bottom: 2px solid #dee0e3;
+        border-bottom: 1px solid #dee0e3;
         margin: 0 -8px;
         .@{ant-prefix}-collapse-arrow{
           right: 8px;
@@ -157,13 +157,16 @@
   }
 
   &.pro-collapse-list {
+    .@{ant-prefix}-descriptions-view{
+      margin: 0 -8px;
+    }
     .@{ant-prefix}-descriptions-row > th,
     .@{ant-prefix}-descriptions-row > td {
       padding: var(--zaui-space-size-sm, 8px) 0;
       background: #fafafa;
 
       &.@{ant-prefix}-descriptions-item {
-        padding-left: var(--zaui-space-size-md, 16px);
+        padding-left: 23px;
       }
     }
 

package/es/ProLayout/components/ProFooter/index.js

@@ -12,7 +12,7 @@ var ProFooter = function ProFooter(props) {
     className = props.className,
     children = props.children,
     _props$zIndex = props.zIndex,
-    zIndex = _props$zIndex === void 0 ? 101 : _props$zIndex,
+    zIndex = _props$zIndex === void 0 ? 99 : _props$zIndex,
     _props$sideDom = props.sideDom,
     sideDom = _props$sideDom === void 0 ? '.pro-layout-sider-nav' : _props$sideDom,
     _props$contentDom = props.contentDom,

package/es/ProLayout/components/ProFooter/style/index.less

@@ -5,7 +5,7 @@
   position: fixed;
   right: 0;
   bottom: 0;
-  z-index: 101;
+  z-index: 98;
   width: 100%;
   padding: calc(var(--zaui-space-size-md; 16px) * var(--zaui-size; 1))
     var(--zaui-space-size-lg, 32px);

package/es/ProLayout/components/ProHeader/style/index.less

@@ -5,6 +5,7 @@
 .pro-header {
   padding: 16px 0 0 0 !important;
   background-color: var(--zaui-base-bg, #ffffff);
+  box-shadow: 2px 3px 8px 0px rgba(0, 55, 93, 0.1);
 
   &.pro-header-no-back.pro-header-has-describe {
     .pro-header-top {
@@ -216,7 +217,7 @@
   .pro-header-nav {
     position: relative;
     display: flex;
-    background: #f7f9fc;
+    background: #fafafa;
     border-top: 1px solid #f2f2f2;
 
     &.pro-header-nav-open {