@zat-design/sisyphus-react 3.9.5-beta.9 → 3.9.6

package/dist/index.esm.css

@@ -854,7 +854,7 @@
   background: var(--zaui-disabled-bg);
 }
 .pro-header {
-  padding: 16px 0 0 0 !important;
+  padding: 10px 0 0 0 !important;
   background-color: var(--zaui-base-bg, #ffffff);
   -webkit-box-shadow: 2px 3px 8px 0px rgba(0, 55, 93, 0.1);
           box-shadow: 2px 3px 8px 0px rgba(0, 55, 93, 0.1);
@@ -881,9 +881,44 @@
 .pro-header.pro-header-fixed.pro-header-no-describe .pro-header-top {
   padding-bottom: calc(var(--zaui-space-size-md, 16px) * var(--zaui-size, 1) - var(--zaui-space-size-xs, 4px) * var(--zaui-size, 1));
 }
+.pro-header .pro-header-describe {
+  -webkit-transition: height 0.2s ease-in-out;
+  transition: height 0.2s ease-in-out;
+}
 .pro-header .pro-header-describe a {
   color: var(--zaui-link, #006aff);
 }
+.pro-header .pro-header-describe .pro-header-describe-items-calc {
+  position: relative;
+}
+.pro-header .pro-header-describe.pro-header-describe-hidden {
+  height: 0;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+}
+.pro-header .pro-header-describe .ant-space .pro-header-describe-label {
+  font-weight: normal;
+}
+.pro-header .pro-header-describe .ant-space .pro-header-describe-value {
+  font-weight: 600;
+}
+.pro-header .pro-header-describe .ant-space .pro-header-describe-value .ant-space-item {
+  font-weight: 600;
+}
+.pro-header .pro-header-describe .ant-space .pro-header-describe-value .pro-header-describe-items span:first-child {
+  margin-right: 2px;
+}
+.pro-header .pro-header-describe .ant-space .pro-header-describe-value .pro-header-describe-items .pro-header-describe-items-omit {
+  position: absolute;
+  right: 0;
+  background: #fff;
+}
+.pro-header .pro-header-describe .ant-space .pro-header-describe-value .pro-header-describe-items.pro-header-describe-items-more .pro-header-tag {
+  padding: 0;
+  background: #fff;
+  color: #333;
+}
 .pro-header .pro-header-copy {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1167,7 +1202,13 @@
   font-size: var(--zaui-font-size, 14px);
 }
 .pro-header .pro-header-describe li {
-  margin-left: var(--zaui-space-card, 32px);
+  -webkit-box-flex: 0;
+  -webkit-flex: 0 0 auto;
+      -ms-flex: 0 0 auto;
+          flex: 0 0 auto;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .pro-header .pro-header-describe li.pro-header-only-tag {
   margin-left: var(--zaui-space-size-sm, 8px);
@@ -1175,9 +1216,6 @@
 .pro-header .pro-header-describe li.pro-header-only-tag span:first-child {
   margin-right: 0;
 }
-.pro-header .pro-header-describe li:first-child {
-  margin-left: 0;
-}
 .pro-header .pro-header-describe li span {
   color: #0a0a0a;
   font-weight: 400;
@@ -1192,6 +1230,12 @@
 .pro-header .pro-header-describe li span:last-child .pro-header-tag {
   margin-left: 4px;
 }
+.pro-header-describe-items-tip {
+  max-width: 600px;
+}
+.pro-header-describe-items-tip .pro-header-describe-items-tip-value {
+  margin-bottom: var(--zaui-space-size-sm, 8px);
+}
 @media (max-width: 1366px) {
   .pro-header-describe li span:last-child {
     max-width: 350px;
@@ -1253,7 +1297,7 @@
   border-radius: 0 0 var(--zaui-border-radius, 8px) var(--zaui-border-radius, 8px);
 }
 .pro-layout.pro-layout-light .pro-header.pro-header-no-describe {
-  padding: var(--zaui-space-size-md, 16px) !important;
+  padding: 10px var(--zaui-space-size-md, 16px) !important;
 }
 .pro-layout.pro-layout-light .pro-header.pro-header-no-describe .pro-header-top {
   padding-bottom: 0;

package/dist/less.esm.css

@@ -854,7 +854,7 @@
   background: var(--zaui-disabled-bg);
 }
 .pro-header {
-  padding: 16px 0 0 0 !important;
+  padding: 10px 0 0 0 !important;
   background-color: var(--zaui-base-bg, #ffffff);
   -webkit-box-shadow: 2px 3px 8px 0px rgba(0, 55, 93, 0.1);
           box-shadow: 2px 3px 8px 0px rgba(0, 55, 93, 0.1);
@@ -881,9 +881,44 @@
 .pro-header.pro-header-fixed.pro-header-no-describe .pro-header-top {
   padding-bottom: calc(var(--zaui-space-size-md, 16px) * var(--zaui-size, 1) - var(--zaui-space-size-xs, 4px) * var(--zaui-size, 1));
 }
+.pro-header .pro-header-describe {
+  -webkit-transition: height 0.2s ease-in-out;
+  transition: height 0.2s ease-in-out;
+}
 .pro-header .pro-header-describe a {
   color: var(--zaui-link, #006aff);
 }
+.pro-header .pro-header-describe .pro-header-describe-items-calc {
+  position: relative;
+}
+.pro-header .pro-header-describe.pro-header-describe-hidden {
+  height: 0;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+}
+.pro-header .pro-header-describe .ant-space .pro-header-describe-label {
+  font-weight: normal;
+}
+.pro-header .pro-header-describe .ant-space .pro-header-describe-value {
+  font-weight: 600;
+}
+.pro-header .pro-header-describe .ant-space .pro-header-describe-value .ant-space-item {
+  font-weight: 600;
+}
+.pro-header .pro-header-describe .ant-space .pro-header-describe-value .pro-header-describe-items span:first-child {
+  margin-right: 2px;
+}
+.pro-header .pro-header-describe .ant-space .pro-header-describe-value .pro-header-describe-items .pro-header-describe-items-omit {
+  position: absolute;
+  right: 0;
+  background: #fff;
+}
+.pro-header .pro-header-describe .ant-space .pro-header-describe-value .pro-header-describe-items.pro-header-describe-items-more .pro-header-tag {
+  padding: 0;
+  background: #fff;
+  color: #333;
+}
 .pro-header .pro-header-copy {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1167,7 +1202,13 @@
   font-size: var(--zaui-font-size, 14px);
 }
 .pro-header .pro-header-describe li {
-  margin-left: var(--zaui-space-card, 32px);
+  -webkit-box-flex: 0;
+  -webkit-flex: 0 0 auto;
+      -ms-flex: 0 0 auto;
+          flex: 0 0 auto;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .pro-header .pro-header-describe li.pro-header-only-tag {
   margin-left: var(--zaui-space-size-sm, 8px);
@@ -1175,9 +1216,6 @@
 .pro-header .pro-header-describe li.pro-header-only-tag span:first-child {
   margin-right: 0;
 }
-.pro-header .pro-header-describe li:first-child {
-  margin-left: 0;
-}
 .pro-header .pro-header-describe li span {
   color: #0a0a0a;
   font-weight: 400;
@@ -1192,6 +1230,12 @@
 .pro-header .pro-header-describe li span:last-child .pro-header-tag {
   margin-left: 4px;
 }
+.pro-header-describe-items-tip {
+  max-width: 600px;
+}
+.pro-header-describe-items-tip .pro-header-describe-items-tip-value {
+  margin-bottom: var(--zaui-space-size-sm, 8px);
+}
 @media (max-width: 1366px) {
   .pro-header-describe li span:last-child {
     max-width: 350px;
@@ -1253,7 +1297,7 @@
   border-radius: 0 0 var(--zaui-border-radius, 8px) var(--zaui-border-radius, 8px);
 }
 .pro-layout.pro-layout-light .pro-header.pro-header-no-describe {
-  padding: var(--zaui-space-size-md, 16px) !important;
+  padding: 10px var(--zaui-space-size-md, 16px) !important;
 }
 .pro-layout.pro-layout-light .pro-header.pro-header-no-describe .pro-header-top {
   padding-bottom: 0;

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

@@ -26,6 +26,14 @@ export interface DescribeColumnsProps {
     show?: boolean;
     link?: string;
     tag?: string | React.ReactNode | (string | React.ReactNode)[];
+    width?: string | number;
+    /** 多值配置 */
+    items?: {
+        copyable?: boolean;
+        value: string | React.ReactNode;
+        link?: string;
+        tag?: string | React.ReactNode | (string | React.ReactNode)[];
+    }[];
 }
 export interface ProHeaderProps {
     title?: string | React.ReactNode;

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

@@ -2,29 +2,30 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import "antd/es/modal/style";
 import _Modal from "antd/es/modal";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import "antd/es/tooltip/style";
-import _Tooltip from "antd/es/tooltip";
 import "antd/es/breadcrumb/style";
 import _Breadcrumb from "antd/es/breadcrumb";
 import "antd/es/divider/style";
 import _Divider from "antd/es/divider";
+import "antd/es/tooltip/style";
+import _Tooltip from "antd/es/tooltip";
 import "antd/es/space/style";
 import _Space from "antd/es/space";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /* eslint-disable react/no-array-index-key */
 
-import { memo, useEffect, useState } from 'react';
+import { memo, useEffect, useState, useRef } from 'react';
 import { tools } from '@zat-design/utils';
 import classnames from 'classnames';
 import moment from 'moment';
-import { useToggle } from 'ahooks';
+import { useToggle, useSize } from 'ahooks';
 import { isFunction, isEmpty, isNumber, isString } from 'lodash';
 import { ReactSVG } from 'react-svg';
 import foldSvg from '../../../assets/arrow.svg';
 import { Copy, ProBackBtn } from './components';
 import getEnumLabel from '../../../ProEnum/utils/getEnumLabel';
 import locale from '../../../locale';
+import { checkDescribeItemsHidden } from './utils';
 var formatAmount = tools.formatAmount;
 var ProHeader = function ProHeader(props) {
   var _props$breadcrumbList = props.breadcrumbList,
@@ -64,6 +65,8 @@ var ProHeader = function ProHeader(props) {
     _useToggle2 = _slicedToArray(_useToggle, 2),
     fold = _useToggle2[0],
     toggle = _useToggle2[1].toggle;
+  var ref = useRef(null);
+  var size = useSize(ref);
   var _title = title;
   // 面包屑配置数据源
   var _breadcrumbColumns = breadcrumbColumns || breadcrumbList;
@@ -94,7 +97,11 @@ var ProHeader = function ProHeader(props) {
       return null;
     }
     return _jsx("ul", {
-      className: "pro-header-describe",
+      className: classnames({
+        'pro-header-describe': true,
+        'pro-header-describe-open': fold,
+        'pro-header-describe-hidden': !fold
+      }),
       children: describeData.map(function (item, index) {
         var value = item.value,
           copyable = item.copyable,
@@ -102,20 +109,20 @@ var ProHeader = function ProHeader(props) {
           show = _item$show === void 0 ? true : _item$show,
           tag = item.tag,
           label = item.label,
-          link = item.link;
+          link = item.link,
+          _item$items = item.items,
+          items = _item$items === void 0 ? [] : _item$items,
+          width = item.width;
         // show为false直接隐藏¸
         if (show === false || !show) {
           return null;
         }
         var onlyTag = tag && !label && !value;
-        var tagCls = classnames({
-          'pro-header-only-tag': onlyTag
-        });
-        var tagRender = function tagRender() {
-          if (Array.isArray(tag) && tag.length) {
+        var tagRender = function tagRender(parmas) {
+          if (Array.isArray(parmas === null || parmas === void 0 ? void 0 : parmas.tag) && (parmas === null || parmas === void 0 ? void 0 : parmas.tag.length)) {
             return _jsx(_Space, {
               size: 4,
-              children: tag.map(function (tagItem, index) {
+              children: parmas.tag.map(function (tagItem, index) {
                 return _jsx("div", {
                   className: "pro-header-tag",
                   children: tagItem
@@ -123,32 +130,91 @@ var ProHeader = function ProHeader(props) {
               })
             });
           }
-          return tag ? _jsx("div", {
+          return (parmas === null || parmas === void 0 ? void 0 : parmas.tag) ? _jsx("div", {
             className: "pro-header-tag",
-            children: tag
+            children: parmas === null || parmas === void 0 ? void 0 : parmas.tag
           }) : null;
         };
-        var valueRender = function valueRender() {
+        /** 单行渲染 */
+        var valueRender = function valueRender(parmas) {
           return _jsxs(_Space, {
             size: 4,
-            align: tag ? 'baseline' : 'center',
-            children: [link ? _jsx("a", {
-              href: link,
+            align: (parmas === null || parmas === void 0 ? void 0 : parmas.tag) ? 'baseline' : 'center',
+            children: [(parmas === null || parmas === void 0 ? void 0 : parmas.link) ? _jsx("a", {
+              href: parmas.link,
               rel: "noopener noreferrer",
               target: "_blank",
-              children: value
-            }) : value, copyable && isString(value) ? _jsx(Copy, {
-              text: value
-            }) : null, tagRender()]
+              children: parmas === null || parmas === void 0 ? void 0 : parmas.value
+            }) : parmas === null || parmas === void 0 ? void 0 : parmas.value, (parmas === null || parmas === void 0 ? void 0 : parmas.copyable) && isString(parmas === null || parmas === void 0 ? void 0 : parmas.value) ? _jsx(Copy, {
+              text: parmas.value
+            }) : null, tagRender({
+              tag: parmas === null || parmas === void 0 ? void 0 : parmas.tag
+            })]
           });
         };
-        return _jsxs("li", {
+        /** 多行渲染 */
+        var itemsRender = function itemsRender() {
+          // items配置是否超长，超长配置... + tip 提示
+          var itemsHidden = checkDescribeItemsHidden(ref === null || ref === void 0 ? void 0 : ref.current);
+          var result = _jsxs("div", {
+            ref: ref,
+            className: classnames({
+              'pro-header-describe-items': true,
+              'pro-header-describe-items-more': items.length >= 2
+            }),
+            children: [(items === null || items === void 0 ? void 0 : items.length) > 3 ? "\u5171".concat(items === null || items === void 0 ? void 0 : items.length, "\u4E2A\uFF0C") : null, items.map(function (item, index) {
+              return _jsxs("span", {
+                children: [valueRender(item), (items === null || items === void 0 ? void 0 : items.length) !== index + 1 ? ' 、' : null]
+              }, index);
+            }), itemsHidden ? _jsx("span", {
+              className: "pro-header-describe-items-omit",
+              children: "..."
+            }) : null]
+          });
+          if (itemsHidden) {
+            var tipResult = _jsx(_Fragment, {
+              children: items.map(function (item, index) {
+                return _jsx("p", {
+                  className: "pro-header-describe-items-tip-value",
+                  children: valueRender(item)
+                }, index);
+              })
+            });
+            return _jsx(_Tooltip, {
+              placement: "bottomLeft",
+              overlayClassName: "pro-header-describe-items-tip",
+              title: tipResult,
+              children: result
+            });
+          }
+          return result;
+        };
+        var tagCls = classnames({
+          'pro-header-only-tag': onlyTag,
+          'pro-header-describe-items-calc': isString(width) ? width.includes('calc') : false
+        });
+        return _jsx("li", {
           className: tagCls,
-          children: [label ? _jsx("span", {
-            children: label
-          }) : null, _jsx("span", {
-            children: valueRender()
-          })]
+          style: {
+            width: width
+          },
+          children: _jsxs(_Space, {
+            size: 4,
+            children: [label ? _jsx("span", {
+              className: "pro-header-describe-label",
+              children: label
+            }) : null, _jsx("span", {
+              className: "pro-header-describe-value",
+              children: (items === null || items === void 0 ? void 0 : items.length) ? itemsRender() : _jsx("span", {
+                children: valueRender({
+                  value: value,
+                  copyable: copyable,
+                  tag: tag,
+                  link: link
+                })
+              })
+            })]
+          })
         }, index);
       })
     });

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

@@ -3,7 +3,7 @@
 @import '../components/ProBackBtn/style/index';
 
 .pro-header {
-  padding: 16px 0 0 0 !important;
+  padding: 10px 0 0 0 !important;
   background-color: var(--zaui-base-bg, #ffffff);
   box-shadow: 2px 3px 8px 0px rgba(0, 55, 93, 0.1);
 
@@ -46,9 +46,48 @@
   }
 
   .pro-header-describe {
+    transition: height 0.2s ease-in-out;
     a {
       color: var(--zaui-link, #006aff);
     }
+    .pro-header-describe-items-calc{
+      position: relative;
+    }
+    &.pro-header-describe-hidden {
+      height: 0;
+      padding: 0;
+      overflow: hidden;
+      border: 0;
+    }
+    .@{ant-prefix}-space {
+      .pro-header-describe-label {
+        font-weight: normal;
+      }
+      .pro-header-describe-value{
+        font-weight: 600;
+        .@{ant-prefix}-space-item{
+          font-weight: 600;
+        }
+        .pro-header-describe-items{
+          span:first-child{
+            margin-right: 2px;
+          }
+          .pro-header-describe-items-omit{
+            position: absolute;
+            right: 0;
+            background: #fff;
+          }
+          &.pro-header-describe-items-more{
+            .pro-header-tag{
+              padding: 0;
+              background: #fff;
+              color: #333 ;
+            }
+
+          }
+        }
+      }
+    }
   }
 
   .pro-header-copy {
@@ -334,8 +373,10 @@
     font-size: var(--zaui-font-size, 14px);
 
     li {
-      margin-left: var(--zaui-space-card, 32px);
-
+      flex: 0 0 auto;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
       &.pro-header-only-tag {
         margin-left: var(--zaui-space-size-sm, 8px);
 
@@ -344,9 +385,6 @@
         }
       }
 
-      &:first-child {
-        margin-left: 0;
-      }
 
       span {
         color: #0a0a0a;
@@ -369,6 +407,13 @@
   }
 }
 
+.pro-header-describe-items-tip{
+  max-width: 600px;
+  .pro-header-describe-items-tip-value{
+    margin-bottom: var(--zaui-space-size-sm, 8px);
+  }
+}
+
 @media (max-width: 1366px) {
   .pro-header-describe {
     li span:last-child {

package/es/ProLayout/components/ProHeader/utils/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 检查描述dom是否部分隐藏
+ * @param ele  dom节点
+ */
+export declare const checkDescribeItemsHidden: (ele?: any) => boolean;

package/es/ProLayout/components/ProHeader/utils/index.js

@@ -0,0 +1,14 @@
+/**
+ * 检查描述dom是否部分隐藏
+ * @param ele  dom节点
+ */
+export var checkDescribeItemsHidden = function checkDescribeItemsHidden(ele) {
+  var childElement = ele;
+  if (!childElement) {
+    return false;
+  }
+  var element = childElement.parentNode.parentNode.parentNode.parentNode;
+  var itemsScrollWidth = element.scrollWidth;
+  var itemsClientWidth = element.clientWidth;
+  return itemsScrollWidth > itemsClientWidth;
+};

package/es/ProLayout/style/index.less

@@ -79,7 +79,7 @@
     // pro-header调整
     .pro-header{
       &.pro-header-no-describe{
-        padding: var(--zaui-space-size-md, 16px) !important;
+        padding: 10px var(--zaui-space-size-md, 16px) !important;
         .pro-header-top{
           padding-bottom: 0;
         }

package/lib/ProLayout/components/ProHeader/PropTypes.d.ts

@@ -26,6 +26,14 @@ export interface DescribeColumnsProps {
     show?: boolean;
     link?: string;
     tag?: string | React.ReactNode | (string | React.ReactNode)[];
+    width?: string | number;
+    /** 多值配置 */
+    items?: {
+        copyable?: boolean;
+        value: string | React.ReactNode;
+        link?: string;
+        tag?: string | React.ReactNode | (string | React.ReactNode)[];
+    }[];
 }
 export interface ProHeaderProps {
     title?: string | React.ReactNode;

package/lib/ProLayout/components/ProHeader/index.js

@@ -21,6 +21,7 @@ var _arrow = _interopRequireDefault(require("../../../assets/arrow.svg"));
 var _components = require("./components");
 var _getEnumLabel = _interopRequireDefault(require("../../../ProEnum/utils/getEnumLabel"));
 var _locale = _interopRequireDefault(require("../../../locale"));
+var _utils2 = require("./utils");
 /* eslint-disable react/no-array-index-key */
 
 var formatAmount = _utils.tools.formatAmount;
@@ -62,6 +63,8 @@ var ProHeader = function ProHeader(props) {
     _useToggle2 = (0, _slicedToArray2.default)(_useToggle, 2),
     fold = _useToggle2[0],
     toggle = _useToggle2[1].toggle;
+  var ref = (0, _react.useRef)(null);
+  var size = (0, _ahooks.useSize)(ref);
   var _title = title;
   // 面包屑配置数据源
   var _breadcrumbColumns = breadcrumbColumns || breadcrumbList;
@@ -92,7 +95,11 @@ var ProHeader = function ProHeader(props) {
       return null;
     }
     return (0, _jsxRuntime.jsx)("ul", {
-      className: "pro-header-describe",
+      className: (0, _classnames2.default)({
+        'pro-header-describe': true,
+        'pro-header-describe-open': fold,
+        'pro-header-describe-hidden': !fold
+      }),
       children: describeData.map(function (item, index) {
         var value = item.value,
           copyable = item.copyable,
@@ -100,20 +107,20 @@ var ProHeader = function ProHeader(props) {
           show = _item$show === void 0 ? true : _item$show,
           tag = item.tag,
           label = item.label,
-          link = item.link;
+          link = item.link,
+          _item$items = item.items,
+          items = _item$items === void 0 ? [] : _item$items,
+          width = item.width;
         // show为false直接隐藏¸
         if (show === false || !show) {
           return null;
         }
         var onlyTag = tag && !label && !value;
-        var tagCls = (0, _classnames2.default)({
-          'pro-header-only-tag': onlyTag
-        });
-        var tagRender = function tagRender() {
-          if (Array.isArray(tag) && tag.length) {
+        var tagRender = function tagRender(parmas) {
+          if (Array.isArray(parmas === null || parmas === void 0 ? void 0 : parmas.tag) && (parmas === null || parmas === void 0 ? void 0 : parmas.tag.length)) {
             return (0, _jsxRuntime.jsx)(_antd.Space, {
               size: 4,
-              children: tag.map(function (tagItem, index) {
+              children: parmas.tag.map(function (tagItem, index) {
                 return (0, _jsxRuntime.jsx)("div", {
                   className: "pro-header-tag",
                   children: tagItem
@@ -121,32 +128,91 @@ var ProHeader = function ProHeader(props) {
               })
             });
           }
-          return tag ? (0, _jsxRuntime.jsx)("div", {
+          return (parmas === null || parmas === void 0 ? void 0 : parmas.tag) ? (0, _jsxRuntime.jsx)("div", {
             className: "pro-header-tag",
-            children: tag
+            children: parmas === null || parmas === void 0 ? void 0 : parmas.tag
           }) : null;
         };
-        var valueRender = function valueRender() {
+        /** 单行渲染 */
+        var valueRender = function valueRender(parmas) {
           return (0, _jsxRuntime.jsxs)(_antd.Space, {
             size: 4,
-            align: tag ? 'baseline' : 'center',
-            children: [link ? (0, _jsxRuntime.jsx)("a", {
-              href: link,
+            align: (parmas === null || parmas === void 0 ? void 0 : parmas.tag) ? 'baseline' : 'center',
+            children: [(parmas === null || parmas === void 0 ? void 0 : parmas.link) ? (0, _jsxRuntime.jsx)("a", {
+              href: parmas.link,
               rel: "noopener noreferrer",
               target: "_blank",
-              children: value
-            }) : value, copyable && (0, _lodash.isString)(value) ? (0, _jsxRuntime.jsx)(_components.Copy, {
-              text: value
-            }) : null, tagRender()]
+              children: parmas === null || parmas === void 0 ? void 0 : parmas.value
+            }) : parmas === null || parmas === void 0 ? void 0 : parmas.value, (parmas === null || parmas === void 0 ? void 0 : parmas.copyable) && (0, _lodash.isString)(parmas === null || parmas === void 0 ? void 0 : parmas.value) ? (0, _jsxRuntime.jsx)(_components.Copy, {
+              text: parmas.value
+            }) : null, tagRender({
+              tag: parmas === null || parmas === void 0 ? void 0 : parmas.tag
+            })]
+          });
+        };
+        /** 多行渲染 */
+        var itemsRender = function itemsRender() {
+          // items配置是否超长，超长配置... + tip 提示
+          var itemsHidden = (0, _utils2.checkDescribeItemsHidden)(ref === null || ref === void 0 ? void 0 : ref.current);
+          var result = (0, _jsxRuntime.jsxs)("div", {
+            ref: ref,
+            className: (0, _classnames2.default)({
+              'pro-header-describe-items': true,
+              'pro-header-describe-items-more': items.length >= 2
+            }),
+            children: [(items === null || items === void 0 ? void 0 : items.length) > 3 ? "\u5171".concat(items === null || items === void 0 ? void 0 : items.length, "\u4E2A\uFF0C") : null, items.map(function (item, index) {
+              return (0, _jsxRuntime.jsxs)("span", {
+                children: [valueRender(item), (items === null || items === void 0 ? void 0 : items.length) !== index + 1 ? ' 、' : null]
+              }, index);
+            }), itemsHidden ? (0, _jsxRuntime.jsx)("span", {
+              className: "pro-header-describe-items-omit",
+              children: "..."
+            }) : null]
           });
+          if (itemsHidden) {
+            var tipResult = (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+              children: items.map(function (item, index) {
+                return (0, _jsxRuntime.jsx)("p", {
+                  className: "pro-header-describe-items-tip-value",
+                  children: valueRender(item)
+                }, index);
+              })
+            });
+            return (0, _jsxRuntime.jsx)(_antd.Tooltip, {
+              placement: "bottomLeft",
+              overlayClassName: "pro-header-describe-items-tip",
+              title: tipResult,
+              children: result
+            });
+          }
+          return result;
         };
-        return (0, _jsxRuntime.jsxs)("li", {
+        var tagCls = (0, _classnames2.default)({
+          'pro-header-only-tag': onlyTag,
+          'pro-header-describe-items-calc': (0, _lodash.isString)(width) ? width.includes('calc') : false
+        });
+        return (0, _jsxRuntime.jsx)("li", {
           className: tagCls,
-          children: [label ? (0, _jsxRuntime.jsx)("span", {
-            children: label
-          }) : null, (0, _jsxRuntime.jsx)("span", {
-            children: valueRender()
-          })]
+          style: {
+            width: width
+          },
+          children: (0, _jsxRuntime.jsxs)(_antd.Space, {
+            size: 4,
+            children: [label ? (0, _jsxRuntime.jsx)("span", {
+              className: "pro-header-describe-label",
+              children: label
+            }) : null, (0, _jsxRuntime.jsx)("span", {
+              className: "pro-header-describe-value",
+              children: (items === null || items === void 0 ? void 0 : items.length) ? itemsRender() : (0, _jsxRuntime.jsx)("span", {
+                children: valueRender({
+                  value: value,
+                  copyable: copyable,
+                  tag: tag,
+                  link: link
+                })
+              })
+            })]
+          })
         }, index);
       })
     });

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

@@ -3,7 +3,7 @@
 @import '../components/ProBackBtn/style/index';
 
 .pro-header {
-  padding: 16px 0 0 0 !important;
+  padding: 10px 0 0 0 !important;
   background-color: var(--zaui-base-bg, #ffffff);
   box-shadow: 2px 3px 8px 0px rgba(0, 55, 93, 0.1);
 
@@ -46,9 +46,48 @@
   }
 
   .pro-header-describe {
+    transition: height 0.2s ease-in-out;
     a {
       color: var(--zaui-link, #006aff);
     }
+    .pro-header-describe-items-calc{
+      position: relative;
+    }
+    &.pro-header-describe-hidden {
+      height: 0;
+      padding: 0;
+      overflow: hidden;
+      border: 0;
+    }
+    .@{ant-prefix}-space {
+      .pro-header-describe-label {
+        font-weight: normal;
+      }
+      .pro-header-describe-value{
+        font-weight: 600;
+        .@{ant-prefix}-space-item{
+          font-weight: 600;
+        }
+        .pro-header-describe-items{
+          span:first-child{
+            margin-right: 2px;
+          }
+          .pro-header-describe-items-omit{
+            position: absolute;
+            right: 0;
+            background: #fff;
+          }
+          &.pro-header-describe-items-more{
+            .pro-header-tag{
+              padding: 0;
+              background: #fff;
+              color: #333 ;
+            }
+
+          }
+        }
+      }
+    }
   }
 
   .pro-header-copy {
@@ -334,8 +373,10 @@
     font-size: var(--zaui-font-size, 14px);
 
     li {
-      margin-left: var(--zaui-space-card, 32px);
-
+      flex: 0 0 auto;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
       &.pro-header-only-tag {
         margin-left: var(--zaui-space-size-sm, 8px);
 
@@ -344,9 +385,6 @@
         }
       }
 
-      &:first-child {
-        margin-left: 0;
-      }
 
       span {
         color: #0a0a0a;
@@ -369,6 +407,13 @@
   }
 }
 
+.pro-header-describe-items-tip{
+  max-width: 600px;
+  .pro-header-describe-items-tip-value{
+    margin-bottom: var(--zaui-space-size-sm, 8px);
+  }
+}
+
 @media (max-width: 1366px) {
   .pro-header-describe {
     li span:last-child {

package/lib/ProLayout/components/ProHeader/utils/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 检查描述dom是否部分隐藏
+ * @param ele  dom节点
+ */
+export declare const checkDescribeItemsHidden: (ele?: any) => boolean;

package/lib/ProLayout/components/ProHeader/utils/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.checkDescribeItemsHidden = void 0;
+/**
+ * 检查描述dom是否部分隐藏
+ * @param ele  dom节点
+ */
+var checkDescribeItemsHidden = exports.checkDescribeItemsHidden = function checkDescribeItemsHidden(ele) {
+  var childElement = ele;
+  if (!childElement) {
+    return false;
+  }
+  var element = childElement.parentNode.parentNode.parentNode.parentNode;
+  var itemsScrollWidth = element.scrollWidth;
+  var itemsClientWidth = element.clientWidth;
+  return itemsScrollWidth > itemsClientWidth;
+};

package/lib/ProLayout/style/index.less

@@ -79,7 +79,7 @@
     // pro-header调整
     .pro-header{
       &.pro-header-no-describe{
-        padding: var(--zaui-space-size-md, 16px) !important;
+        padding: 10px var(--zaui-space-size-md, 16px) !important;
         .pro-header-top{
           padding-bottom: 0;
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zat-design/sisyphus-react",
-  "version": "3.9.5-beta.9",
+  "version": "3.9.6",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",

package/.vscode/extensions.json

@@ -1,5 +0,0 @@
-{
-    "recommendations": [
-        "kisstkondoros.vscode-codemetrics"
-    ]
-}