@zat-design/sisyphus-react 4.0.0-beta.3 → 4.0.0-beta.5

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

@@ -1,140 +1,170 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+"use strict";
 
-// src/ProLayout/components/ProCollapse/index.tsx
-var ProCollapse_exports = {};
-__export(ProCollapse_exports, {
-  default: () => ProCollapse_default
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(ProCollapse_exports);
-var import_react = require("react");
-var import_antd = require("antd");
-var import_icons = require("@ant-design/icons");
-var import_classnames = __toESM(require("classnames"));
-var import_lodash = require("lodash");
-var import_fold = __toESM(require("../../../assets/fold.svg"));
-var import_ProIcon = __toESM(require("../../../ProIcon/index"));
-var ProCollapse = (props) => {
-  const {
-    title,
-    id,
-    contentStyle = {},
-    children,
-    level = "1",
-    towCollapse = false,
-    titleList,
-    extra,
-    column = 3,
-    style,
-    folding = false,
-    collapseProps = {},
-    collapsePanelProps,
-    className,
-    icon,
-    autoHeight = true,
-    onChange,
-    open
-  } = props;
-  const finalCollapseProps = { ...collapseProps };
-  if (open !== void 0 && !("activeKey" in finalCollapseProps)) {
-    finalCollapseProps.activeKey = open ? ["1"] : [];
+exports.default = void 0;
+require("antd/es/collapse/style");
+var _collapse = _interopRequireDefault(require("antd/es/collapse"));
+require("antd/es/descriptions/style");
+var _descriptions = _interopRequireDefault(require("antd/es/descriptions"));
+require("antd/es/space/style");
+var _space = _interopRequireDefault(require("antd/es/space"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _react = require("react");
+var _icons = require("@ant-design/icons");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _fold = _interopRequireDefault(require("../../../assets/fold.svg"));
+var _index = _interopRequireDefault(require("../../../ProIcon/index"));
+var _jsxRuntime = require("react/jsx-runtime");
+var ProCollapse = props => {
+  var title = props.title,
+    id = props.id,
+    _props$contentStyle = props.contentStyle,
+    contentStyle = _props$contentStyle === void 0 ? {} : _props$contentStyle,
+    children = props.children,
+    _props$level = props.level,
+    level = _props$level === void 0 ? '1' : _props$level,
+    _props$towCollapse = props.towCollapse,
+    towCollapse = _props$towCollapse === void 0 ? false : _props$towCollapse,
+    _props$threeCollapse = props.threeCollapse,
+    threeCollapse = _props$threeCollapse === void 0 ? false : _props$threeCollapse,
+    titleList = props.titleList,
+    extra = props.extra,
+    _props$column = props.column,
+    column = _props$column === void 0 ? 3 : _props$column,
+    style = props.style,
+    _props$folding = props.folding,
+    folding = _props$folding === void 0 ? false : _props$folding,
+    _props$collapseProps = props.collapseProps,
+    collapseProps = _props$collapseProps === void 0 ? {} : _props$collapseProps,
+    collapsePanelProps = props.collapsePanelProps,
+    className = props.className,
+    icon = props.icon,
+    _props$autoHeight = props.autoHeight,
+    autoHeight = _props$autoHeight === void 0 ? true : _props$autoHeight,
+    onChange = props.onChange,
+    open = props.open;
+
+  // 当同时设置了open和collapseProps.activeKey时，以collapseProps.activeKey为准
+  // 这样保证了与已有代码的兼容性，并提供了更简便的控制面板展开状态的方式
+  var finalCollapseProps = (0, _objectSpread2.default)({}, collapseProps);
+  if (open !== undefined && !('activeKey' in finalCollapseProps)) {
+    finalCollapseProps.activeKey = open ? ['1'] : [];
   }
-  const cls = (0, import_classnames.default)({
-    "pro-collapse": true,
-    "pro-collapse-level2": level === "2",
-    "pro-collapse-list": titleList == null ? void 0 : titleList.length,
-    "pro-collapse-no-title": !title,
-    "pro-collapse-no-level1-title": !title && level !== "2",
+  var cls = (0, _classnames.default)({
+    'pro-collapse': true,
+    'pro-collapse-level2': level === '2',
+    'pro-collapse-level3': level === '3',
+    'pro-collapse-list': titleList === null || titleList === void 0 ? void 0 : titleList.length,
+    'pro-collapse-no-title': !title,
+    'pro-collapse-no-level1-title': !title && level !== '2' && level !== '3',
     [`${className}`]: className
   });
-  const content = /* @__PURE__ */ React.createElement("div", { className: "pro-collapse-content", style: contentStyle }, children);
-  const getCollapseItems = () => {
-    let _title = title;
-    let panelClassName = "pro-collapse-panel";
-    const panelProps = {};
-    if (level === "2") {
-      panelClassName = (0, import_classnames.default)({
-        "pro-collapse-level2-collapse": towCollapse,
-        "pro-collapse-level2-no-collapse": !towCollapse,
-        "pro-collapse-panel": true
+  var content = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "pro-collapse-content",
+    style: contentStyle,
+    children: children
+  });
+
+  // 生成 Collapse items 配置
+  var getCollapseItems = () => {
+    var _title = title;
+    var panelClassName = 'pro-collapse-panel';
+    var panelProps = {};
+    if (level === '2') {
+      panelClassName = (0, _classnames.default)({
+        'pro-collapse-level2-collapse': towCollapse,
+        'pro-collapse-level2-no-collapse': !towCollapse,
+        'pro-collapse-panel': true
       });
       if (!towCollapse) {
-        panelProps.collapsible = "disabled";
+        panelProps.collapsible = 'disabled';
       }
     }
-    if (icon) {
-      _title = /* @__PURE__ */ React.createElement(import_antd.Space, { size: 8, align: "center" }, /* @__PURE__ */ React.createElement("div", { className: "pro-collapse-icon" }, (0, import_lodash.isBoolean)(icon) ? /* @__PURE__ */ React.createElement(
-        import_ProIcon.default,
-        {
-          src: import_fold.default,
-          actionMap: {
-            fill: []
-          }
-        }
-      ) : icon), title);
-    }
-    return [
-      {
-        key: "1",
+    if (level === '3') {
+      var level3Panel = (0, _classnames.default)({
+        'pro-collapse-level3-collapse': threeCollapse,
+        'pro-collapse-level3-no-collapse': !threeCollapse,
+        'pro-collapse-panel': true
+      });
+      var hasCollapse = {};
+      if (!threeCollapse) {
+        hasCollapse.collapsible = 'disabled';
+      }
+      return [(0, _objectSpread2.default)((0, _objectSpread2.default)({
+        key: '1',
         label: _title,
         children: content,
-        extra: /* @__PURE__ */ React.createElement("div", { className: "extra-info" }, extra),
-        className: panelClassName,
-        forceRender: true,
-        ...panelProps,
-        ...collapsePanelProps
-      }
-    ];
+        extra: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "extra-info",
+          children: extra
+        }),
+        className: level3Panel,
+        forceRender: true
+      }, hasCollapse), collapsePanelProps)];
+    }
+    if (icon) {
+      _title = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_space.default, {
+        size: 8,
+        align: "center",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "pro-collapse-icon",
+          children: typeof icon === 'boolean' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, {
+            src: _fold.default,
+            actionMap: {
+              fill: []
+            }
+          }) : icon
+        }), title]
+      });
+    }
+    return [(0, _objectSpread2.default)((0, _objectSpread2.default)({
+      key: '1',
+      label: _title,
+      children: content,
+      extra: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "extra-info",
+        children: extra
+      }),
+      className: panelClassName,
+      forceRender: true
+    }, panelProps), collapsePanelProps)];
   };
-  const renderTitleList = () => {
-    return /* @__PURE__ */ React.createElement("div", { className: cls }, /* @__PURE__ */ React.createElement(import_antd.Descriptions, { column }, titleList == null ? void 0 : titleList.map((item) => {
-      return /* @__PURE__ */ React.createElement(import_antd.Descriptions.Item, { label: item.label, key: item.label }, item.value || "-");
-    })), content);
+  var renderTitleList = () => {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: cls,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_descriptions.default, {
+        column: column,
+        children: titleList === null || titleList === void 0 ? void 0 : titleList.map(item => {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_descriptions.default.Item, {
+            label: item.label,
+            children: item.value || '-'
+          }, item.label);
+        })
+      }), content]
+    });
   };
-  (0, import_react.useLayoutEffect)(() => {
+
+  // 当pro-layout-content只存在一个card时，高度动态计算
+  (0, _react.useLayoutEffect)(() => {
     if (!autoHeight) {
       return;
     }
-    const proCollapseContent = document.querySelector(".pro-layout-content");
+    var proCollapseContent = document.querySelector('.pro-layout-content');
     if (!proCollapseContent) {
       return;
     }
-    const proCollapseNoTitles = proCollapseContent.querySelectorAll(
-      ".pro-collapse-no-level1-title"
-    );
-    const proFooterNode = proCollapseContent.querySelector(".pro-footer");
-    const proCollapses = proCollapseContent.querySelectorAll(".pro-collapse");
-    if ((proCollapseNoTitles == null ? void 0 : proCollapseNoTitles.length) === 1 && proCollapses.length === 1) {
-      const rect = proCollapseNoTitles[0].getBoundingClientRect();
-      if ((rect == null ? void 0 : rect.height) < window.innerHeight - rect.top) {
+    var proCollapseNoTitles = proCollapseContent.querySelectorAll('.pro-collapse-no-level1-title');
+    var proFooterNode = proCollapseContent.querySelector('.pro-footer');
+    var proCollapses = proCollapseContent.querySelectorAll('.pro-collapse');
+    if ((proCollapseNoTitles === null || proCollapseNoTitles === void 0 ? void 0 : proCollapseNoTitles.length) === 1 && proCollapses.length === 1) {
+      var rect = proCollapseNoTitles[0].getBoundingClientRect();
+      if ((rect === null || rect === void 0 ? void 0 : rect.height) < window.innerHeight - rect.top) {
         proCollapseNoTitles[0].style.minHeight = `calc(100vh - ${rect.top + 16}px)`;
       } else {
-        proCollapseNoTitles[0].style.minHeight = "auto";
+        proCollapseNoTitles[0].style.minHeight = 'auto';
       }
       if (proFooterNode) {
         proCollapseNoTitles[0].style.minHeight = `calc(100vh - ${rect.top + proFooterNode.offsetHeight + 16}px)`;
@@ -142,22 +172,27 @@ var ProCollapse = (props) => {
     }
     return () => {
       if (proCollapseNoTitles.length === 1 && proCollapses.length === 1) {
-        proCollapseNoTitles[0].style.minHeight = "auto";
+        proCollapseNoTitles[0].style.minHeight = 'auto'; // 移除 minHeight 的设置
       }
     };
   });
-  return /* @__PURE__ */ React.createElement("div", { id, style }, Array.isArray(titleList) && titleList.length ? renderTitleList() : /* @__PURE__ */ React.createElement(
-    import_antd.Collapse,
-    {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    id: id,
+    style: style,
+    children: Array.isArray(titleList) && titleList.length ? renderTitleList() : /*#__PURE__*/(0, _jsxRuntime.jsx)(_collapse.default, (0, _objectSpread2.default)({
       className: cls,
       bordered: false,
-      expandIcon: ({ isActive }) => /* @__PURE__ */ React.createElement(import_icons.CaretRightOutlined, { rotate: isActive ? -90 : 90 }),
+      expandIcon: _ref => {
+        var isActive = _ref.isActive;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CaretRightOutlined, {
+          rotate: isActive ? -90 : 90
+        });
+      },
       expandIconPosition: "end",
-      defaultActiveKey: folding ? [] : ["1"],
-      onChange,
-      items: getCollapseItems(),
-      ...finalCollapseProps
-    }
-  ));
+      defaultActiveKey: folding ? [] : ['1'],
+      onChange: onChange,
+      items: getCollapseItems()
+    }, finalCollapseProps))
+  });
 };
-var ProCollapse_default = ProCollapse;
+var _default = exports.default = ProCollapse;

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

@@ -1,5 +1,3 @@
-/* @root-entry-name: 'default'; */
-/* @import (reference) '~antd/es/style/themes/index.less'; */
 
 .pro-collapse {
   .pro-collapse-icon{
@@ -33,7 +31,8 @@
   .@{ant-prefix}-collapse-header {
     align-items: center !important;
     padding: 10px var(--zaui-space-size-md, 16px) !important;
-    background: var(--zaui-area, #fafafa);
+    background: #e4f2fe;
+    border-radius: 8px !important;
   }
 
   .@{ant-prefix}-collapse-header-text {
@@ -99,7 +98,7 @@
     }
 
     .pro-collapse-content {
-      padding: var(--zaui-space-size-sm, 8px) 0 !important;
+      padding: var(--zaui-space-size-md, 16px) !important;
     }
 
     .pro-collapse-level2-collapse {
@@ -111,6 +110,7 @@
         padding: 0 8px 6px !important;
         border-bottom: 1px solid #dee0e3;
         margin: 0 -8px;
+        border-radius: 0 !important;
         .@{ant-prefix}-collapse-arrow{
           right: 8px;
         }
@@ -150,6 +150,9 @@
       .@{ant-prefix}-collapse-expand-icon {
         display: none;
       }
+      .pro-collapse-content{
+        padding: var(--zaui-space-size-sm, 8px) 0 !important;
+      }
     }
   }
 
@@ -201,4 +204,145 @@
     }
 
   }
+
+  &.pro-collapse-level3 {
+    margin-bottom: var(--zaui-space-size-md, 16px);
+
+    .pro-collapse-level2{
+      margin-top: 8px !important;
+      .pro-collapse-panel {
+        border: none !important;
+      }
+      .@{ant-prefix}-collapse-header {
+        height: auto !important;
+        background: #fff !important;
+        &:hover{
+          background: #fff !important;
+        }
+        .@{ant-prefix}-collapse-header-text {
+          &:before{
+            display: block;
+          }
+        }
+  
+        .@{ant-prefix}-collapse-extra {
+          .extra-info {
+            font-size: var(--zaui-font-size, 14px);
+            color: var(--zaui-text, #343434);
+          }
+        }
+      }
+      .@{ant-prefix}-collapse-content{
+        .@{ant-prefix}-collapse-content-box{
+          .pro-collapse-content{
+            padding: var(--zaui-space-size-sm, 8px) 0 !important;
+          }
+        }
+      }
+     
+    }
+   
+    .@{ant-prefix}-collapse-item-active{
+      margin-bottom: 0 !important;
+    }
+    .pro-collapse-panel {
+      border: 1px solid #d9d9d9;
+      margin-bottom: var(--zaui-space-size-md, 16px);
+      overflow: hidden;
+      border-radius: 8px !important;
+      
+      &:last-child {
+        margin-bottom: 0;
+        border-bottom: 1px solid #d9d9d9;
+      }
+    }
+
+    .pro-collapse-level3-no-collapse{
+      .@{ant-prefix}-collapse-header{
+        padding: 0 !important;
+      }
+    }
+
+    .@{ant-prefix}-collapse-header {
+      height: 48px !important;
+      padding: 0 var(--zaui-space-size-md, 16px) !important;
+      background: #F8F8F8 !important;
+      border-radius: 8px;
+      align-items: center !important;
+      justify-content: center !important;
+      display: flex !important;
+      margin: 0 !important;
+      border-bottom: none !important;
+
+      .@{ant-prefix}-collapse-header-text {
+        font-size: var(--zaui-font-size, 14px);
+        font-weight: 500;
+        color: var(--zaui-text, #343434);
+        padding-left: 16px !important;
+        &:before{
+          display: none;
+        }
+      }
+
+      .@{ant-prefix}-collapse-extra {
+        .extra-info {
+          font-size: var(--zaui-font-size, 14px);
+          color: var(--zaui-text, #343434);
+        }
+      }
+    }
+
+    .@{ant-prefix}-collapse-content {
+      .@{ant-prefix}-collapse-content-box {
+        .pro-collapse-content {
+          padding: var(--zaui-space-size-md, 16px) !important;
+          background: var(--zaui-base-bg, #ffffff);
+        }
+      }
+    }
+
+    // 可折叠样式
+    .pro-collapse-level3-collapse {
+      .@{ant-prefix}-collapse-expand-icon {
+        display: block !important;
+        color: #999;
+        margin-right: 8px;
+      }
+      
+      .@{ant-prefix}-collapse-header {
+        cursor: pointer;
+        padding: 0 !important;
+        &:hover {
+          background: #f0f0f0;
+        }
+      }
+    }
+
+    // 不可折叠样式
+    .pro-collapse-level3-no-collapse {
+      .@{ant-prefix}-collapse-expand-icon {
+        display: none !important;
+      }
+      
+      .@{ant-prefix}-collapse-header {
+        cursor: default;
+      }
+    }
+
+    // 禁用折叠时的样式
+    &.@{ant-prefix}-collapse .@{ant-prefix}-collapse-item-disabled > .@{ant-prefix}-collapse-header,
+    .@{ant-prefix}-collapse
+      .@{ant-prefix}-collapse-item-disabled
+      > .@{ant-prefix}-collapse-header
+      > .arrow {
+      color: var(--zaui-text, #343434);
+      cursor: default;
+      background: #F8F8F8 !important;
+    }
+  }
+  // 当pro-collapse-content直接包含level3且不包含level2时，添加padding
+ .pro-collapse-level2 .pro-collapse-content:has(.pro-collapse-level3) {
+    padding: var(--zaui-space-size-md, 16px) !important;
+    padding-right: 0 !important;
+  } 
 }

package/lib/ProLayout/components/ProFooter/PropTypes.js

@@ -1,17 +1,5 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+"use strict";
 
-// src/ProLayout/components/ProFooter/PropTypes.ts
-var PropTypes_exports = {};
-module.exports = __toCommonJS(PropTypes_exports);
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -1,71 +1,56 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+"use strict";
 
-// src/ProLayout/components/ProFooter/index.tsx
-var ProFooter_exports = {};
-__export(ProFooter_exports, {
-  default: () => ProFooter_default
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(ProFooter_exports);
-var import_ahooks = require("ahooks");
-var import_antd = require("antd");
-var import_classnames = __toESM(require("classnames"));
-var import_react = require("react");
-var ProFooter = (props) => {
-  const {
-    visible = true,
-    className,
-    children,
-    zIndex = 98,
-    sideDom = ".pro-layout-sider-nav",
-    contentDom = ".pro-layout-content"
-  } = props;
-  const size = (0, import_ahooks.useSize)(
-    () => document.querySelector(sideDom) || document.querySelector(".pro-layout-menu")
-  );
-  const boxDom = document.querySelector(contentDom);
-  (0, import_react.useEffect)(() => {
+exports.default = void 0;
+require("antd/es/space/style");
+var _space = _interopRequireDefault(require("antd/es/space"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _ahooks = require("ahooks");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+var ProFooter = props => {
+  var _props$visible = props.visible,
+    visible = _props$visible === void 0 ? true : _props$visible,
+    className = props.className,
+    children = props.children,
+    _props$zIndex = props.zIndex,
+    zIndex = _props$zIndex === void 0 ? 98 : _props$zIndex,
+    _props$sideDom = props.sideDom,
+    sideDom = _props$sideDom === void 0 ? '.pro-layout-sider-nav' : _props$sideDom,
+    _props$contentDom = props.contentDom,
+    contentDom = _props$contentDom === void 0 ? '.pro-layout-content' : _props$contentDom;
+  var size = (0, _ahooks.useSize)(() => document.querySelector(sideDom) || document.querySelector('.pro-layout-menu'));
+  var boxDom = document.querySelector(contentDom);
+  (0, _react.useEffect)(() => {
     if (boxDom && visible) {
-      boxDom.style.paddingBottom = "64px";
+      boxDom.style.paddingBottom = '64px';
     }
     return () => {
       if (boxDom) {
-        boxDom.style.paddingBottom = "0px";
+        boxDom.style.paddingBottom = '0px';
       }
     };
   }, [boxDom]);
   if (!visible) {
     return null;
   }
-  const cls = (0, import_classnames.default)({
-    "pro-footer": true,
+  var cls = (0, _classnames.default)({
+    'pro-footer': true,
     [`${className}`]: className
   });
-  return /* @__PURE__ */ React.createElement("div", { className: cls, style: { zIndex, width: `calc(100% - ${size == null ? void 0 : size.width}px)`, ...props.style } }, /* @__PURE__ */ React.createElement(import_antd.Space, null, children));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: cls,
+    style: (0, _objectSpread2.default)({
+      zIndex,
+      width: `calc(100% - ${size === null || size === void 0 ? void 0 : size.width}px)`
+    }, props.style),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_space.default, {
+      children: children
+    })
+  });
 };
-var ProFooter_default = (0, import_react.memo)(ProFooter);
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)(ProFooter);

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

@@ -1,5 +1,3 @@
-/* @root-entry-name: 'default'; */
-/* @import (reference) '~antd/es/style/themes/index.less'; */
 
 .pro-footer {
   position: fixed;