@zat-design/sisyphus-react 3.4.2-beta.3 → 3.4.2-beta.31

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

@@ -2,18 +2,18 @@
 @import (reference) '~antd/es/style/themes/index.less';
 
 .pro-layout-sider-menu {
-  width     : 220px;
+  width: 220px;
   background: #fff;
 
   h2 {
     margin-bottom: 0;
-    padding      : 16px 16px 8px;
-    color        : var(--zaui-text, #343434);
-    color        : var(--zaui-text);
-    font-weight  : 500;
-    font-size    : var(--zaui-font-size-lg, 16px);
-    line-height  : inherit;
-    text-align   : left;
+    padding: 16px 16px 8px;
+    color: var(--zaui-text, #343434);
+    color: var(--zaui-text);
+    font-weight: 500;
+    font-size: var(--zaui-font-size-lg, 16px);
+    line-height: inherit;
+    text-align: left;
   }
 
   .pro-layout-open-menu {
@@ -33,15 +33,22 @@
       }
 
       .@{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 {
-            color  : var(--zaui-text);
             padding: 0;
+            padding-right: 12px;
+            color: var(--zaui-text);
           }
 
           .pro-layout-open-menu-lv1 {
             h2 {
-              color      : var(--zaui-text);
+              padding-right: 26px;
+              color: var(--zaui-text);
               font-weight: 500;
             }
           }
@@ -53,19 +60,19 @@
           &.pro-layout-icon-empty {
             display: none;
 
-            &~h2 {
+            & ~ h2 {
               margin-left: var(--zaui-space-size-md, 16px);
             }
           }
         }
 
         .pro-layout-icon {
-          fill : currentColor;
           color: var(--zaui-text, #343434) !important;
+          fill: currentColor;
         }
 
         &.@{ant-prefix}-menu-sub {
-          overflow  : hidden;
+          overflow: hidden;
           background: #fff;
         }
 
@@ -74,8 +81,8 @@
 
         .@{ant-prefix}-menu-submenu-title:hover,
         .@{ant-prefix}-menu-item:hover {
+          color: #fff;
           background-color: #f2f2f2;
-          color           : #fff;
         }
 
         .@{ant-prefix}-menu-item {
@@ -87,15 +94,13 @@
         }
 
         .@{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 {
-          padding-top   : 10px;
+        &.@{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: 10px;
           padding-bottom: 10px;
-          min-height    : 40px;
         }
       }
     }
   }
-
-
 }

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

@@ -44,7 +44,7 @@
         display: inline-block;
         white-space: nowrap;
         opacity: 0;
-        transition: opacity 0.5s cubic-bezier(0.645, 0.045, 0.355, 1), color 0.5s;
+        transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), color 0.3s;
       }
     }
   }
@@ -129,7 +129,7 @@
     width: 48px;
     height: 48px;
     background: #292f3b;
-    transition: all 0.25s ease;
+    transition: all 0.3s ease;
   }
 
   .pro-layout-menu .pro-layout-menu-collapsed:hover {

package/lib/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/lib/ProLayout/components/ProCollapse/index.js

@@ -11,6 +11,9 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _antd = require("antd");
 var _icons = require("@ant-design/icons");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _reactSvg = require("react-svg");
+var _lodash = require("lodash");
+var _fold = _interopRequireDefault(require("../../../assets/fold.svg"));
 var Panel = _antd.Collapse.Panel;
 var ProCollapse = function ProCollapse(props) {
   var title = props.title,
@@ -30,13 +33,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 = (0, _classnames.default)((0, _defineProperty2.default)({
     '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
@@ -47,6 +48,7 @@ var ProCollapse = function ProCollapse(props) {
     children: children
   });
   var renderPanel = function renderPanel() {
+    var _title = title;
     if (level === '2') {
       var level2Panel = (0, _classnames.default)({
         'pro-collapse-level2-collapse': towCollapse,
@@ -58,7 +60,7 @@ var ProCollapse = function ProCollapse(props) {
         hasCollapse.collapsible = 'disabled';
       }
       return (0, _jsxRuntime.jsx)(Panel, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
-        header: title,
+        header: _title,
         className: level2Panel,
         extra: (0, _jsxRuntime.jsx)("div", {
           className: "extra-info",
@@ -69,8 +71,20 @@ var ProCollapse = function ProCollapse(props) {
         children: content
       }), "1");
     }
+    if (icon) {
+      _title = (0, _jsxRuntime.jsxs)(_antd.Space, {
+        size: 8,
+        align: "center",
+        children: [(0, _jsxRuntime.jsx)("div", {
+          className: "pro-collapse-icon",
+          children: (0, _lodash.isBoolean)(icon) ? (0, _jsxRuntime.jsx)(_reactSvg.ReactSVG, {
+            src: _fold.default
+          }) : icon
+        }), title]
+      });
+    }
     return (0, _jsxRuntime.jsx)(Panel, (0, _objectSpread2.default)((0, _objectSpread2.default)({
-      header: title,
+      header: _title,
       className: "pro-collapse-panel",
       extra: (0, _jsxRuntime.jsx)("div", {
         className: "extra-info",

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

@@ -2,34 +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-panel{
-      .@{ant-prefix}-collapse-header{
-        border-radius: var(--zaui-border-radius, 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 {
@@ -51,7 +40,7 @@
   }
 
   .@{ant-prefix}-collapse-expand-icon {
-    color: #c5c7cd;
+    color: #999;
   }
 
   &.@{ant-prefix}-collapse-borderless
@@ -73,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 {
@@ -106,10 +96,14 @@
     }
 
     .pro-collapse-content {
-      padding-top: var(--zaui-space-size-sm, 8px) !important;
+      padding: var(--zaui-space-size-sm, 8px) 0 !important;
     }
 
     .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: 1px solid #dee0e3;
@@ -163,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/lib/ProLayout/components/ProFooter/index.js

@@ -18,7 +18,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/lib/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/lib/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 {
@@ -101,11 +102,11 @@
   &.pro-header-fixed {
     position: sticky;
     z-index: 101;
-    box-shadow: 0px 1px 2px 0px rgba(0, 55, 93, 0.1);
+    box-shadow: 0px 2px 4px 0px rgba(0, 55, 93, 0.2);
   }
 
   &.pro-header-shadow {
-    box-shadow: 0px 1px 2px 0px rgba(0, 55, 93, 0.1);
+    box-shadow: 0px 2px 4px 0px rgba(0, 55, 93, 0.2);
   }
 
   .@{ant-prefix}-breadcrumb {
@@ -216,7 +217,7 @@
   .pro-header-nav {
     position: relative;
     display: flex;
-    background: #f7f9fc;
+    background: #fafafa;
     border-top: 1px solid #f2f2f2;
 
     &.pro-header-nav-open {

package/lib/ProLayout/style/index.less

@@ -21,7 +21,76 @@
 
   // light模式
   &.pro-layout-light {
-    .pro-layout-menu-collapsed {
+
+    // pro-collapse折叠调整
+    .pro-collapse {
+      border-radius:  var(--zaui-border-radius, 8px);
+      &.@{ant-prefix}-collapse-borderless{
+        background: #fff;
+      }
+      &.pro-collapse-no-title{
+        .pro-collapse-content{
+          border-radius:  var(--zaui-border-radius, 8px) !important;
+          padding: var(--zaui-space-size-md, 16px);
+        }
+        .pro-header-no-describe{
+          padding: 0 !important;
+        }
+      }
+      .@{ant-prefix}-collapse-item-active{
+        &.pro-collapse-panel{
+          .@{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: var(--zaui-space-size-md, 16px);
+       
+        .pro-form{
+          margin-bottom: 0;
+        }
+      }
+      &.pro-collapse-level2{
+        .pro-collapse-panel  .@{ant-prefix}-collapse-header{
+          background: #fff;
+        }
+        .pro-collapse-content{
+          padding-bottom: var(--zaui-space-size-sm, 8px);
+        }
+      }
+      
+      .pro-collapse-panel{
+        .@{ant-prefix}-collapse-header{
+          border-radius: var(--zaui-border-radius, 8px) !important;
+          background: #E4F2FE;
+        }
+     
+      }
+    }
+
+    // pro-header调整
+    .pro-header{
+      &.pro-header-no-describe{
+        padding: var(--zaui-space-size-md, 16px) !important;
+        .pro-header-top{
+          padding-bottom: 0;
+        }
+      }
+      &.pro-header-has-describe{
+        .pro-header-nav-open{
+          border-radius: 0 0 var(--zaui-border-radius, 8px) var(--zaui-border-radius, 8px);
+        }
+      }
+      border-radius: 0 0 var(--zaui-border-radius, 8px) var(--zaui-border-radius, 8px);
+    }
+
+
+    .pro-layout-content {
+      padding: 0 var(--zaui-space-size-md, 16px);
+      background: #f3f5f8;
     }
 
     .pro-layout-menu-open,
@@ -129,7 +198,7 @@
     }
 
     .anticon-caret-down {
-      color: #cacaca !important;
+      color: #999 !important;
     }
 
     .pro-layout-row .pro-layout-menu {
@@ -145,10 +214,17 @@
 
     .pro-layout-open-menu .@{ant-prefix}-menu-title-content div h2 {
       color: var(--zaui-text, #343434);
+      padding-right: 26px;
+    }
+    .@{ant-prefix}-menu-item-only-child{
+      .@{ant-prefix}-menu-title-content div h2{
+        padding-right: 16px;
+      }
     }
 
     .pro-layout-open-menu .@{ant-prefix}-menu-item:hover,
-    .pro-layout-open-menu .@{ant-prefix}-menu-submenu-title:hover {
+    .pro-layout-open-menu .@{ant-prefix}-menu-submenu-title:hover,
+    .pro-layout-open-menu .@{ant-prefix}-menu-item-selected{
       position: relative;
       background: transparent;
 
@@ -156,7 +232,8 @@
         position: absolute;
         left: var(--zaui-space-size-sm, 8px);
         width: calc(100% - 16px);
-        height: 38px;
+        min-height: 38px;
+        height: 80%;
         background-color: var(--zaui-brand, #006aff);
         border-radius: var(--zaui-border-radius, 8px);
         opacity: 0.08;
@@ -165,6 +242,7 @@
     }
 
     .pro-layout-open-menu .@{ant-prefix}-menu-item-selected {
+      padding-right: 16px;
       &::after {
         display: none;
       }
@@ -192,7 +270,7 @@
     margin-top: 48px;
     margin-left: 48px;
     padding: 0 var(--zaui-space-size-lg, 32px);
-    transition: all 0.3s ease-in-out;
+    transition: all 0.24s ease;
 
     &.pro-layout-has-notice {
       min-height: calc(100vh - 80px);

package/lib/ProStep/components/Item/index.js

@@ -30,7 +30,8 @@ var _default = exports.default = function _default(_ref) {
     id: id,
     children: !register || collapse && collapseItem && title ? (0, _jsxRuntime.jsx)(_ProCollapse.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({
       id: id,
-      title: title
+      title: title,
+      icon: true
     }, restProps), {}, {
       children: children
     })) : children