@zat-design/sisyphus-react 3.4.1 → 3.4.2-beta.10

package/lib/ProLayout/style/index.less

@@ -1,16 +1,15 @@
 @root-entry-name: 'default';
 @import (reference) '~antd/es/style/themes/index.less';
 
-@import "../components/Layout/index.less";
-@import "../components/ProCollapse/style/index.less";
-@import "../components/ProFooter/style/index.less";
-@import "../components/ProHeader/style/index.less";
-
+@import '../components/Layout/index.less';
+@import '../components/ProCollapse/style/index.less';
+@import '../components/ProFooter/style/index.less';
+@import '../components/ProHeader/style/index.less';
 
 .pro-layout {
-  display       : flex;
+  display: flex;
   flex-direction: column;
-  background    : var(--zaui-base-bg, #ffffff);
+  background: var(--zaui-base-bg, #ffffff);
 
   .pro-layout-menu-open {
     .pro-layout-open-menu-lv1 {
@@ -23,6 +22,76 @@
   // light模式
   &.pro-layout-light {
 
+    // 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-border-radius, 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,
     .pro-layout-menu {
@@ -30,80 +99,92 @@
     }
 
     .pro-layout-open-menu .@{ant-prefix}-menu-title-content div .pro-layout-icon {
-      color   : var(--zaui-text, #343434);
       position: relative;
-      z-index : 1;
+      z-index: 1;
+      color: var(--zaui-text, #343434);
     }
-
-    .pro-layout-menu-fold-list {
-      li {
-        position: relative;
-
-        &>div {
+    .pro-layout-menu-fold {
+      .pro-layout-menu-fold-list {
+        border-right: 1px solid #f0f0f0;
+        li {
           position: relative;
-          z-index : 1;
-        }
 
-        &.active {
-          background: transparent;
-
-          div .pro-layout-icon {
-            color: #fff;
+          & > div {
+            position: relative;
+            z-index: 1;
           }
 
-          &::before {
-            content         : '';
-            border-radius   : var(--zaui-border-radius, 4px);
-            background-color: var(--zaui-brand, #006aff);
-            height          : 38px;
-            position        : absolute;
-            left            : 5px;
-            top             : 4px;
-            width           : calc(100% - 10px);
-            opacity         : 1 !important;
+          &.active {
+            background: transparent;
+            border-radius: var(--zaui-border-radius, 8px);
+
+            div .pro-layout-icon {
+              color: #fff;
+            }
+
+            &::before {
+              position: absolute;
+              top: 4px;
+              left: 5px;
+              width: calc(100% - 10px);
+              height: 38px;
+              background-color: var(--zaui-brand, #006aff);
+              border-radius: var(--zaui-border-radius, 8px);
+              opacity: 1 !important;
+              content: '';
+            }
           }
-        }
 
-        &:hover {
-          background: transparent;
-
-          &::before {
-            content         : '';
-            border-radius   : var(--zaui-border-radius, 4px);
-            background-color: var(--zaui-brand, #006aff);
-            height          : 38px;
-            position        : absolute;
-            left            : 5px;
-            top             : 4px;
-            width           : calc(100% - 10px);
-            opacity         : 0.08;
+          &:hover {
+            background: transparent;
+
+            &::before {
+              position: absolute;
+              top: 4px;
+              left: 5px;
+              width: calc(100% - 10px);
+              height: 38px;
+              background-color: var(--zaui-brand, #006aff);
+              border-radius: var(--zaui-border-radius, 8px);
+              opacity: 0.08;
+              content: '';
+            }
           }
 
-        }
-
-        div .pro-layout-icon {
-          color: var(--zaui-text, #343434);
+          div .pro-layout-icon {
+            color: var(--zaui-text, #343434);
+          }
         }
       }
     }
 
-
-    .pro-layout-menu-fold-list li.active {
-      border-radius: var(--zaui-border-radius, 4px);
-    }
-
     .pro-layout-menu-collapsed {
       position: relative;
+      background: var(--zaui-base-bg, #fff);
+      border-right: 1px solid #f0f0f0;
+      &:hover {
+        background: transparent !important;
+      }
+      &:hover::after {
+        position: absolute;
+        top: 5px;
+        left: 5px;
+        width: calc(100% - 10px);
+        height: 40px;
+        background-color: var(--zaui-brand, #006aff);
+        border-radius: var(--zaui-border-radius, 8px);
+        opacity: 0.08;
+        content: '';
+      }
 
       &::before {
-        content   : '';
-        height    : 1px;
-        background: #DEE0E3;
-        width     : calc(100% - 16px);
-        position  : absolute;
-        top       : 0;
-        left      : var(--zaui-space-size-sm, 8px);
-
+        position: absolute;
+        top: 0;
+        left: var(--zaui-space-size-sm, 8px);
+        width: calc(100% - 16px);
+        height: 1px;
+        background: #dee0e3;
+        content: '';
       }
     }
 
@@ -112,45 +193,50 @@
         border-color: var(--zaui-text, #343434);
       }
     }
-
-    .pro-layout-menu-collapsed {
-      background: var(--zaui-base-bg, #fff);
-    }
-
     .@{ant-prefix}-menu-root {
       overflow-x: hidden !important;
     }
 
     .anticon-caret-down {
-      color: #CACACA !important;
+      color: #999 !important;
     }
 
     .pro-layout-row .pro-layout-menu {
       background: var(--zaui-base-bg, #ffffff);
     }
 
-    .pro-layout-open-menu .@{ant-prefix}-menu-root>.@{ant-prefix}-menu-submenu .@{ant-prefix}-menu-sub {
+    .pro-layout-open-menu
+      .@{ant-prefix}-menu-root
+      > .@{ant-prefix}-menu-submenu
+      .@{ant-prefix}-menu-sub {
       background: var(--zaui-base-bg, #ffffff);
     }
 
     .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: 0;
+      }
     }
 
     .pro-layout-open-menu .@{ant-prefix}-menu-item:hover,
     .pro-layout-open-menu .@{ant-prefix}-menu-submenu-title:hover {
+      position: relative;
       background: transparent;
-      position  : relative;
 
       &:before {
-        content         : '';
-        border-radius   : var(--zaui-border-radius, 4px);
+        position: absolute;
+        left: var(--zaui-space-size-sm, 8px);
+        width: calc(100% - 16px);
+        min-height: 38px;
+        height: 80%;
         background-color: var(--zaui-brand, #006aff);
-        opacity         : 0.08;
-        height          : 38px;
-        position        : absolute;
-        left            : var(--zaui-space-size-sm, 8px);
-        width           : calc(100% - 16px);
+        border-radius: var(--zaui-border-radius, 8px);
+        opacity: 0.08;
+        content: '';
       }
     }
 
@@ -175,18 +261,18 @@
 
   /** 内容区 */
   .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-lg, 32px);
-    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-lg, 32px);
+    transition: all 0.24s ease;
 
     &.pro-layout-has-notice {
-      margin-top: 80px;
       min-height: calc(100vh - 80px);
+      margin-top: 80px;
     }
   }
 
@@ -208,7 +294,7 @@
     }
   }
 
-  .pro-layout-header-pure+.pro-layout-row {
+  .pro-layout-header-pure + .pro-layout-row {
     .pro-layout-sider-new-nav {
       top: 0 !important;
     }

package/lib/ProTable/components/RenderColumn/index.d.ts

@@ -5,7 +5,7 @@ interface Props {
     value?: any;
     currentValue?: any;
     copyable?: boolean;
-    originalTip?: boolean;
+    originalDiffTip?: boolean;
     ellipsis?: any;
     width?: number | string;
     originalValue?: any;

package/lib/ProTable/components/RenderColumn/index.js

@@ -22,10 +22,10 @@ var RenderColumn = function RenderColumn(props) {
     ellipsis = props.ellipsis,
     width = props.width,
     originalValue = props.originalValue,
-    originalTip = props.originalTip;
+    originalDiffTip = props.originalDiffTip;
   if (originalValue !== undefined) {
     var renderNode = value ? node : '-';
-    if (ellipsis || originalTip) {
+    if (ellipsis || originalDiffTip) {
       if (ellipsis) {
         renderNode = (0, _jsxRuntime.jsx)(Text, {
           style: {
@@ -42,7 +42,7 @@ var RenderColumn = function RenderColumn(props) {
         style: {
           width: width
         },
-        title: originalTip ? (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        title: originalDiffTip ? (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
           children: ["\u521D\u59CB\u503C\uFF1A", originalValue, (0, _jsxRuntime.jsx)("br", {}), ellipsis ? "\u5F53\u524D\u503C\uFF1A".concat(currentValue) : undefined]
         }) : node,
         children: renderNode

package/lib/ProTable/propsType.d.ts

@@ -26,7 +26,7 @@ export interface ProTableColumn extends Omit<ColumnType<any>, 'dataIndex'> {
     precision?: number;
     code?: string | string[] | ((text: any, record: any) => string);
     copyable?: boolean;
-    originalTip?: boolean;
+    originalDiffTip?: boolean;
     prefix?: string | ReactNode | ((value: any, record?: any, index?: number) => any);
     suffix?: string | ReactNode | ((value: any, record?: any, index?: number) => any);
     tooltip?: ReactNode | {

package/lib/ProTable/style/index.less

@@ -177,7 +177,7 @@
       margin-left: -8px;
       padding: var(--zaui-space-size-xs, 4px) var(--zaui-space-size-sm, 8px);
       background: var(--zaui-contract-bg, #fffaa1);
-      border-radius: var(--zaui-border-radius, 4px);
+      border-radius: var(--zaui-border-radius, 8px);
     }
 
     .varied-cell.empty-cell {
@@ -432,7 +432,7 @@
   .@{ant-prefix}-pagination .@{ant-prefix}-pagination-item-active a {
     color: #ffffff;
     background: var(--zaui-brand, #006aff) !important;
-    border-radius: var(--zaui-border-radius, 4px);
+    border-radius: var(--zaui-border-radius, 8px);
   }
 
   .pro-table-footer {

package/lib/ProTable/utils.js

@@ -64,8 +64,8 @@ var formatColumn = exports.formatColumn = function formatColumn(column, original
     prefix = column.prefix,
     suffix = column.suffix,
     dataIndex = column.dataIndex,
-    _column$originalTip = column.originalTip,
-    originalTip = _column$originalTip === void 0 ? true : _column$originalTip;
+    _column$originalDiffT = column.originalDiffTip,
+    originalDiffTip = _column$originalDiffT === void 0 ? true : _column$originalDiffT;
   // 前缀处理
   var prefixNode = function prefixNode(value, record, index) {
     if (!prefix) {
@@ -129,7 +129,7 @@ var formatColumn = exports.formatColumn = function formatColumn(column, original
         node: renderValue,
         value: value,
         currentValue: renderValue,
-        originalTip: originalTip
+        originalDiffTip: originalDiffTip
       });
     };
     // 千分位, 千分位带CNY前缀
@@ -158,7 +158,7 @@ var formatColumn = exports.formatColumn = function formatColumn(column, original
         node: node,
         value: value,
         currentValue: renderValue,
-        originalTip: originalTip
+        originalDiffTip: originalDiffTip
       });
     };
   } else if (['datePicker', 'date', 'dateTime', 'dateStartTime', 'dateEndTime', 'dateStartEndTime'].includes(valueType)) {
@@ -210,7 +210,7 @@ var formatColumn = exports.formatColumn = function formatColumn(column, original
         node: node,
         value: value,
         currentValue: renderValue,
-        originalTip: originalTip
+        originalDiffTip: originalDiffTip
       });
     };
   } else if (['enumName', 'enumCodeName'].includes(valueType)) {
@@ -231,7 +231,7 @@ var formatColumn = exports.formatColumn = function formatColumn(column, original
         node: node,
         value: value,
         currentValue: renderValue,
-        originalTip: originalTip
+        originalDiffTip: originalDiffTip
       });
     };
   } else if (precision || prefix || suffix) {
@@ -257,7 +257,7 @@ var formatColumn = exports.formatColumn = function formatColumn(column, original
         node: node,
         value: value,
         currentValue: renderValue,
-        originalTip: originalTip
+        originalDiffTip: originalDiffTip
       });
     };
   } else if (valueType === 'address') {
@@ -329,7 +329,7 @@ var formatColumn = exports.formatColumn = function formatColumn(column, original
           node: value,
           value: value,
           currentValue: value || '-',
-          originalTip: originalTip
+          originalDiffTip: originalDiffTip
         }), suffixNode(value, record, index)]
       });
     };
@@ -351,7 +351,7 @@ var formatColumn = exports.formatColumn = function formatColumn(column, original
         node: node,
         value: value,
         currentValue: value || '-',
-        originalTip: originalTip
+        originalDiffTip: originalDiffTip
       });
     };
   }

package/lib/ProTabs/style/index.less

@@ -70,9 +70,11 @@
 .pro-tabs-tab {
   .pro-tabs-card {
     .@{ant-prefix}-tag {
+      min-width: 22px;
       margin-right: 0;
       padding: 0 var(--zaui-space-size-xs, 4px);
-      border-radius: 10px;
+      text-align: center;
+      border-radius: 12px;
     }
 
     .@{ant-prefix}-space-item {

package/lib/ProThemeTools/component/PrdTools/index.d.ts

@@ -1,3 +1,3 @@
 import type { DevToolsPropsType } from '../../propsType';
-declare const PrdTools: ({ onReset, onClose, setState, visible, state, tableBorder, tableStripe, prefixCls, }: DevToolsPropsType) => JSX.Element;
+declare const PrdTools: ({ onReset, onClose, setState, open, state, tableBorder, tableStripe, prefixCls, }: DevToolsPropsType) => JSX.Element;
 export default PrdTools;

package/lib/ProThemeTools/component/PrdTools/index.js

@@ -24,7 +24,7 @@ var PrdTools = function PrdTools(_ref) {
   var onReset = _ref.onReset,
     onClose = _ref.onClose,
     setState = _ref.setState,
-    visible = _ref.visible,
+    open = _ref.open,
     state = _ref.state,
     tableBorder = _ref.tableBorder,
     tableStripe = _ref.tableStripe,
@@ -68,7 +68,7 @@ var PrdTools = function PrdTools(_ref) {
     title: "".concat(_locale.default.ProThemeTools.title),
     placement: "right",
     onClose: onClose,
-    open: visible,
+    open: open,
     closable: false,
     children: [(0, _jsxRuntime.jsx)("div", {
       className: "pro-drawer-close",

package/lib/ProThemeTools/component/PrdTools/style/index.less

@@ -29,7 +29,7 @@
       width        : 4px;
       height       : 14px;
       background   : var(--zaui-brand, #006aff);
-      border-radius: var(zaui-border-radius-card, 2px);
+      border-radius: var(zaui-border-radius-card, 4px);
     }
   }
 

package/lib/ProThemeTools/index.js

@@ -10,13 +10,14 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/obje
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _icons = require("@ant-design/icons");
 var _antd = require("antd");
 var _react = require("react");
 var _ahooks = require("ahooks");
+var _reactSvg = require("react-svg");
 var _lodash = require("lodash");
 var _classnames2 = _interopRequireDefault(require("classnames"));
 var _index = require("./utils/index");
+var _setting = _interopRequireDefault(require("../assets/setting.svg"));
 var _component = require("./component");
 var _locale = _interopRequireDefault(require("../locale"));
 var _excluded = ["size", "className", "cacheTime", "color", "mode", "iconFollowTheme", "prefixCls", "tableBorder", "tableStripe", "theme", "onChange"];
@@ -54,24 +55,18 @@ var ProThemeTools = function ProThemeTools(_ref) {
     theme = _ref$theme === void 0 ? {} : _ref$theme,
     onChange = _ref.onChange,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _useState = (0, _react.useState)(false),
+  var _useToggle = (0, _ahooks.useToggle)(false),
+    _useToggle2 = (0, _slicedToArray2.default)(_useToggle, 2),
+    visible = _useToggle2[0],
+    toggle = _useToggle2[1].toggle;
+  var _useState = (0, _react.useState)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultThemeConfig), (0, _index.getMapHumpCase)(theme))),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    visible = _useState2[0],
-    setVisible = _useState2[1];
-  var _useState3 = (0, _react.useState)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultThemeConfig), (0, _index.getMapHumpCase)(theme))),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    state = _useState4[0],
-    setState = _useState4[1];
+    state = _useState2[0],
+    setState = _useState2[1];
   var previousState = (0, _ahooks.usePrevious)(state);
   var zauiBrand = state.zauiBrand,
     zauiStripe = state.zauiStripe,
     zauiTableBorder = state.zauiTableBorder;
-  var showDrawer = function showDrawer() {
-    setVisible(true);
-  };
-  var onClose = function onClose() {
-    setVisible(false);
-  };
   // 重置
   var onReset = function onReset() {
     setState((0, _objectSpread2.default)((0, _objectSpread2.default)({}, state), defaultThemeConfig));
@@ -184,24 +179,21 @@ var ProThemeTools = function ProThemeTools(_ref) {
     'pro-theme-tools': true,
     'pro-theme-tools-follow': iconFollowTheme
   }, className, className));
-  return (0, _jsxRuntime.jsxs)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({
-    className: cls
-  }, props), {}, {
-    children: [(0, _jsxRuntime.jsx)(_icons.SettingOutlined, {
-      style: {
-        fontSize: "".concat(size, "px"),
-        color: color
-      },
-      onClick: function onClick() {
-        showDrawer();
-      }
+  return (0, _jsxRuntime.jsxs)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+    children: [(0, _jsxRuntime.jsx)("div", {
+      className: cls,
+      onClick: toggle,
+      children: (0, _jsxRuntime.jsx)(_reactSvg.ReactSVG, {
+        className: "setting-icon",
+        src: _setting.default
+      })
     }), (0, _jsxRuntime.jsx)(_component.PrdTools, {
       prefixCls: prefixCls,
       onReset: onReset,
-      onClose: onClose,
+      onClose: toggle,
       onCopy: onCopy,
       setState: setState,
-      visible: visible,
+      open: visible,
       state: state,
       tableBorder: tableBorder,
       tableStripe: tableStripe

package/lib/ProThemeTools/propsType.d.ts

@@ -3,7 +3,7 @@ export interface DevToolsPropsType {
     onClose: () => void;
     onCopy?: () => void;
     setState: any;
-    visible: boolean;
+    open: boolean;
     state: LocalThemeConfigPropsType;
     /** 是否有表格边框 */
     tableBorder?: boolean;