iglooform 2.3.8 → 2.3.12

package/lib/layout/index.js

@@ -5,89 +5,29 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-require("antd/es/avatar/style");
-
-var _avatar = _interopRequireDefault(require("antd/es/avatar"));
-
-require("antd/es/col/style");
-
-var _col = _interopRequireDefault(require("antd/es/col"));
-
-require("antd/es/row/style");
-
-var _row = _interopRequireDefault(require("antd/es/row"));
-
-require("antd/es/space/style");
-
-var _space = _interopRequireDefault(require("antd/es/space"));
-
-require("antd/es/badge/style");
-
-var _badge = _interopRequireDefault(require("antd/es/badge"));
-
 require("antd/es/grid/style");
 
 var _grid = _interopRequireDefault(require("antd/es/grid"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _react = require("react");
-
-var _typography = _interopRequireDefault(require("../typography"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _iglooicon = require("iglooicon");
-
-var _index = _interopRequireDefault(require("../home-menu/index"));
+var _header = _interopRequireDefault(require("./header"));
 
-var _avatar2 = _interopRequireDefault(require("./style/avatar.svg"));
-
-var _button = _interopRequireDefault(require("../button"));
+var _footer = _interopRequireDefault(require("./footer"));
 
 require("./style");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 var Layout = function Layout(props) {
   var className = props.className,
       style = props.style,
-      _props$headerConfig = props.headerConfig,
-      headerConfig = _props$headerConfig === void 0 ? {} : _props$headerConfig,
-      _props$footerConfig = props.footerConfig,
-      footerConfig = _props$footerConfig === void 0 ? {} : _props$footerConfig,
-      children = props.children,
-      withFixedPanel = props.withFixedPanel;
-  var _headerConfig$menus = headerConfig.menus,
-      menus = _headerConfig$menus === void 0 ? [] : _headerConfig$menus,
-      userName = headerConfig.userName,
-      _headerConfig$userAva = headerConfig.userAvatar,
-      userAvatar = _headerConfig$userAva === void 0 ? _avatar2.default : _headerConfig$userAva,
-      _headerConfig$default = headerConfig.defaultSelected,
-      defaultSelected = _headerConfig$default === void 0 ? '' : _headerConfig$default,
-      onMenuChange = headerConfig.onMenuChange,
-      dropMenuConfig = headerConfig.dropMenuConfig,
-      selectedKey = headerConfig.selectedKey;
-  var companyInfoRender = footerConfig.companyInfoRender,
-      copyRightRender = footerConfig.copyRightRender,
-      tel = footerConfig.tel,
-      email = footerConfig.email,
-      workTime = footerConfig.workTime,
-      address = footerConfig.address;
+      headerConfig = props.headerConfig,
+      footerConfig = props.footerConfig,
+      withFixedPanel = props.withFixedPanel,
+      children = props.children;
   var useBreakpoint = _grid.default.useBreakpoint;
 
   var _useBreakpoint = useBreakpoint(),
@@ -95,32 +35,14 @@ var Layout = function Layout(props) {
       lg = _useBreakpoint.lg,
       xl = _useBreakpoint.xl;
 
-  var _useState = (0, _react.useState)(defaultSelected),
-      _useState2 = _slicedToArray(_useState, 2),
-      activeMenu = _useState2[0],
-      setActiveMenu = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(selectedKey),
-      _useState4 = _slicedToArray(_useState3, 2),
-      selectedMenu = _useState4[0],
-      setSelectedMenu = _useState4[1];
-
-  (0, _react.useEffect)(function () {
-    if (selectedKey) {
-      setSelectedMenu(selectedKey);
-    }
-  }, [selectedKey]);
-
-  var defaultMenuOnClick = function defaultMenuOnClick(menuConfig) {
-    var key = menuConfig.key;
-    setActiveMenu(key);
-  };
-
   var mobile = !md;
   var smallPC = !lg && md;
   var middlePC = !xl && lg;
   var bigPC = xl;
   var layoutContainerClass = '';
+  var contentDom = null;
+  var headerDom = null;
+  var footerDom = null;
 
   if (mobile) {
     layoutContainerClass = (0, _classnames.default)({
@@ -141,292 +63,55 @@ var Layout = function Layout(props) {
     layoutContainerClass = 'igloo-customer-layout-big';
   }
 
-  function getMenuDom(activeMenu, menuInfo) {
-    var badge = menuInfo.badge;
+  switch (Object.prototype.toString.call(children)) {
+    case '[object Object]':
+      // @ts-ignore
+      if ((children === null || children === void 0 ? void 0 : children.type.displayName) === 'LayoutHeader') {
+        headerDom = children;
+        break;
+      } //@ts-ignore
 
-    switch (_typeof(badge)) {
-      case 'string':
-        return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [(0, _jsxRuntime.jsx)(_typography.default, Object.assign({
-            className: (0, _classnames.default)({
-              'active-menu': activeMenu === menuInfo.key
-            }),
-            level: activeMenu === menuInfo.key ? 'h4' : 'body1'
-          }, {
-            children: menuInfo.title
-          }), void 0), (0, _jsxRuntime.jsx)(_badge.default, {
-            dot: true,
-            color: '#F52209'
-          }, void 0)]
-        }, void 0);
 
-      case 'number':
-        return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [(0, _jsxRuntime.jsx)(_typography.default, Object.assign({
-            className: (0, _classnames.default)({
-              'active-menu': activeMenu === menuInfo.key
-            }),
-            level: activeMenu === menuInfo.key ? 'h4' : 'body1'
-          }, {
-            children: menuInfo.title
-          }), void 0), (0, _jsxRuntime.jsx)(_badge.default, {
-            count: badge,
-            style: {
-              backgroundColor: '#F52209'
-            }
-          }, void 0)]
-        }, void 0);
+      if ((children === null || children === void 0 ? void 0 : children.type.displayName) === 'LayoutFooter') {
+        footerDom = children;
+        break;
+      }
 
-      case 'object':
-        return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [(0, _jsxRuntime.jsx)(_typography.default, Object.assign({
-            className: (0, _classnames.default)({
-              'active-menu': activeMenu === menuInfo.key
-            }),
-            level: activeMenu === menuInfo.key ? 'h4' : 'body1'
-          }, {
-            children: menuInfo.title
-          }), void 0), (0, _jsxRuntime.jsx)(_badge.default, Object.assign({}, badge), void 0)]
-        }, void 0);
+      contentDom = children;
+      break;
 
-      case 'undefined':
-        return (0, _jsxRuntime.jsx)(_typography.default, Object.assign({
-          className: (0, _classnames.default)({
-            'active-menu': activeMenu === menuInfo.key
-          }),
-          level: activeMenu === menuInfo.key ? 'h4' : 'body1'
-        }, {
-          children: menuInfo.title
-        }), void 0);
+    case '[object Array]':
+      //@ts-ignore
+      contentDom = children.filter(function (dom) {
+        if (dom.type) {
+          if (dom.type.displayName === 'LayoutHeader') headerDom = dom;
+          if (dom.type.displayName === 'LayoutFooter') footerDom = dom;
+          return dom.type.displayName !== 'LayoutHeader' && dom.type.displayName !== 'LayoutFooter';
+        } // 希望所有的dom都被返回，处理一下dom=数字0这种情况
 
-      case 'function':
-        return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [(0, _jsxRuntime.jsx)(_typography.default, Object.assign({
-            className: (0, _classnames.default)({
-              'active-menu': activeMenu === menuInfo.key
-            }),
-            level: activeMenu === menuInfo.key ? 'h4' : 'body1'
-          }, {
-            children: menuInfo.title
-          }), void 0), badge()]
-        }, void 0);
-    }
-  }
 
-  var topRightContent = companyInfoRender ? companyInfoRender() : (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [(0, _jsxRuntime.jsxs)("div", Object.assign({
-      className: "no-address-info"
-    }, {
-      children: [tel && (0, _jsxRuntime.jsxs)("div", Object.assign({
-        className: "info-container",
-        style: {
-          alignItems: 'center'
-        }
-      }, {
-        children: [(0, _jsxRuntime.jsx)(_iglooicon.PhoneOutlined, {}, void 0), (0, _jsxRuntime.jsx)("div", {
-          children: typeof tel === 'string' ? (0, _jsxRuntime.jsx)(_typography.default, Object.assign({
-            level: "body2",
-            className: "info-span"
-          }, {
-            children: tel
-          }), void 0) : tel
-        }, void 0)]
-      }), void 0), email && (0, _jsxRuntime.jsxs)("div", Object.assign({
-        className: "info-container",
-        style: {
-          alignItems: 'center'
-        }
-      }, {
-        children: [(0, _jsxRuntime.jsx)(_iglooicon.EmailOutlined, {}, void 0), (0, _jsxRuntime.jsx)("div", {
-          children: typeof email === 'string' ? (0, _jsxRuntime.jsx)(_typography.default, Object.assign({
-            level: "body2",
-            className: "info-span"
-          }, {
-            children: email
-          }), void 0) : email
-        }, void 0)]
-      }), void 0), workTime && (0, _jsxRuntime.jsxs)("div", Object.assign({
-        className: "info-container"
-      }, {
-        children: [(0, _jsxRuntime.jsx)(_iglooicon.TimeOutlined, {}, void 0), (0, _jsxRuntime.jsx)("div", {
-          children: typeof workTime === 'string' ? (0, _jsxRuntime.jsx)(_typography.default, Object.assign({
-            level: "body2",
-            className: "info-span"
-          }, {
-            children: workTime
-          }), void 0) : workTime
-        }, void 0)]
-      }), void 0)]
-    }), void 0), address && (0, _jsxRuntime.jsxs)(_space.default, Object.assign({
-      size: 16,
-      align: "start"
-    }, {
-      children: [(0, _jsxRuntime.jsx)(_iglooicon.LocationOutlined, {
-        style: {
-          fontSize: 24
-        }
-      }, void 0), (0, _jsxRuntime.jsx)("div", {
-        children: typeof address === 'string' ? (0, _jsxRuntime.jsx)(_typography.default, Object.assign({
-          level: "body2",
-          className: "info-span"
-        }, {
-          children: address
-        }), void 0) : address
-      }, void 0)]
-    }), void 0)]
-  }, void 0);
+        return dom !== false;
+      });
+      break;
+
+    default:
+      contentDom = children;
+  }
 
   if (!md) {
     return (0, _jsxRuntime.jsxs)("div", Object.assign({
       style: style,
       className: (0, _classnames.default)(layoutContainerClass, className)
     }, {
-      children: [(0, _jsxRuntime.jsxs)("div", Object.assign({
-        className: (0, _classnames.default)({
-          'igloo-layout-header': true,
-          'igloo-layout-header-fix': Boolean(menus === null || menus === void 0 ? void 0 : menus.length) || Boolean(dropMenuConfig)
-        })
-      }, {
-        children: [(0, _jsxRuntime.jsx)("div", {
-          className: "igloo-logo"
-        }, void 0), dropMenuConfig && (0, _jsxRuntime.jsx)(_index.default, Object.assign({
-          userAvatar: userAvatar,
-          userName: userName
-        }, dropMenuConfig), void 0)]
-      }), void 0), Boolean(menus === null || menus === void 0 ? void 0 : menus.length) && (0, _jsxRuntime.jsx)(_row.default, Object.assign({
-        className: "igloo-layout-menu"
-      }, {
-        children: menus.map(function (menu) {
-          var span = 24 / menus.length;
-          return (0, _jsxRuntime.jsx)(_col.default, Object.assign({
-            span: span,
-            className: (0, _classnames.default)('menu-item'),
-            onClick: function onClick() {
-              onMenuChange ? onMenuChange(menu) : defaultMenuOnClick(menu);
-            }
-          }, {
-            children: (0, _jsxRuntime.jsx)("div", Object.assign({
-              style: {
-                display: 'flex',
-                alignItems: 'flex-start'
-              }
-            }, {
-              children: getMenuDom(selectedMenu || activeMenu, menu)
-            }), void 0)
-          }), menu.key);
-        })
-      }), void 0), (0, _jsxRuntime.jsx)("div", Object.assign({
+      children: [headerConfig && (0, _jsxRuntime.jsx)(_header.default, Object.assign({}, headerConfig), void 0), headerDom, (0, _jsxRuntime.jsx)("div", Object.assign({
         className: "igloo-layout-center"
       }, {
         children: (0, _jsxRuntime.jsx)("div", Object.assign({
           className: "igloo-layout-content"
         }, {
-          children: children
+          children: contentDom
         }), void 0)
-      }), void 0), (0, _jsxRuntime.jsx)("div", Object.assign({
-        className: "igloo-layout-footer"
-      }, {
-        children: (0, _jsxRuntime.jsxs)("div", Object.assign({
-          className: "footer-content"
-        }, {
-          children: [(0, _jsxRuntime.jsx)("div", {
-            className: "igloo-logo"
-          }, void 0), (0, _jsxRuntime.jsxs)("div", Object.assign({
-            className: "compony-info"
-          }, {
-            children: [tel && (0, _jsxRuntime.jsxs)("div", Object.assign({
-              className: "info-item"
-            }, {
-              children: [(0, _jsxRuntime.jsx)(_iglooicon.PhoneOutlined, {}, void 0), (0, _jsxRuntime.jsx)("div", {
-                children: typeof tel === 'string' ? (0, _jsxRuntime.jsx)(_typography.default, Object.assign({
-                  level: "body3",
-                  className: "info-span"
-                }, {
-                  children: tel
-                }), void 0) : tel
-              }, void 0)]
-            }), void 0), email && (0, _jsxRuntime.jsxs)("div", Object.assign({
-              className: "info-item"
-            }, {
-              children: [(0, _jsxRuntime.jsx)(_iglooicon.EmailOutlined, {}, void 0), (0, _jsxRuntime.jsx)("div", {
-                children: typeof email === 'string' ? (0, _jsxRuntime.jsx)(_typography.default, Object.assign({
-                  level: "body3",
-                  className: "info-span"
-                }, {
-                  children: email
-                }), void 0) : email
-              }, void 0)]
-            }), void 0), workTime && (0, _jsxRuntime.jsxs)("div", Object.assign({
-              className: "info-item"
-            }, {
-              children: [(0, _jsxRuntime.jsx)(_iglooicon.TimeOutlined, {}, void 0), (0, _jsxRuntime.jsx)("div", {
-                children: typeof workTime === 'string' ? (0, _jsxRuntime.jsx)(_typography.default, Object.assign({
-                  level: "body3",
-                  className: "info-span"
-                }, {
-                  children: workTime
-                }), void 0) : workTime
-              }, void 0)]
-            }), void 0), address && (0, _jsxRuntime.jsxs)("div", Object.assign({
-              className: "info-item"
-            }, {
-              children: [(0, _jsxRuntime.jsx)(_iglooicon.LocationOutlined, {
-                style: {
-                  fontSize: 24
-                }
-              }, void 0), (0, _jsxRuntime.jsx)("div", {
-                children: typeof address === 'string' ? (0, _jsxRuntime.jsx)(_typography.default, Object.assign({
-                  level: "body3",
-                  className: "info-span"
-                }, {
-                  children: address
-                }), void 0) : address
-              }, void 0)]
-            }), void 0)]
-          }), void 0), (0, _jsxRuntime.jsxs)("div", Object.assign({
-            className: "footer-bottom"
-          }, {
-            children: [(0, _jsxRuntime.jsx)("div", {
-              children: copyRightRender ? copyRightRender((0, _jsxRuntime.jsxs)("div", {
-                children: [(0, _jsxRuntime.jsxs)("div", {
-                  children: ["\xA9 $", new Date().getFullYear(), " Powered by Axinan Pte Ltd."]
-                }, void 0), (0, _jsxRuntime.jsx)("div", {
-                  children: "All Rights Reserved."
-                }, void 0)]
-              }, void 0)) : (0, _jsxRuntime.jsxs)(_typography.default, Object.assign({
-                level: "body3"
-              }, {
-                children: ["\xA9 ".concat(new Date().getFullYear(), " Powered by Axinan Pte Ltd."), (0, _jsxRuntime.jsx)("div", {
-                  children: "All Rights Reserved."
-                }, void 0)]
-              }), void 0)
-            }, void 0), (0, _jsxRuntime.jsx)("div", {
-              children: (0, _jsxRuntime.jsxs)(_typography.default, Object.assign({
-                level: "body3"
-              }, {
-                children: [(0, _jsxRuntime.jsx)(_button.default, Object.assign({
-                  type: "text",
-                  onClick: function onClick() {
-                    return window.open('https://contents.iglooinsure.com');
-                  }
-                }, {
-                  children: (0, _jsxRuntime.jsx)(_typography.default, Object.assign({
-                    level: "body3"
-                  }, {
-                    children: "Privacy Policy"
-                  }), void 0)
-                }), void 0), ' ', (0, _jsxRuntime.jsx)("span", Object.assign({
-                  style: {
-                    margin: '0px 16px'
-                  }
-                }, {
-                  children: "|"
-                }), void 0), " Terms of Service"]
-              }), void 0)
-            }, void 0)]
-          }), void 0)]
-        }), void 0)
-      }), void 0)]
+      }), void 0), footerConfig && (0, _jsxRuntime.jsx)(_footer.default, Object.assign({}, footerConfig), void 0), footerDom]
     }), void 0);
   }
 
@@ -434,110 +119,19 @@ var Layout = function Layout(props) {
     style: style,
     className: (0, _classnames.default)(layoutContainerClass, className)
   }, {
-    children: [(0, _jsxRuntime.jsx)("div", Object.assign({
-      className: (0, _classnames.default)({
-        'igloo-layout-header': true,
-        'igloo-layout-header-fix': Boolean(menus === null || menus === void 0 ? void 0 : menus.length) || Boolean(dropMenuConfig)
-      })
-    }, {
-      children: (0, _jsxRuntime.jsxs)("div", Object.assign({
-        className: "header-content"
-      }, {
-        children: [(0, _jsxRuntime.jsxs)("div", Object.assign({
-          className: "header-left"
-        }, {
-          children: [(0, _jsxRuntime.jsx)("div", {
-            className: "igloo-logo"
-          }, void 0), Boolean(menus === null || menus === void 0 ? void 0 : menus.length) && (0, _jsxRuntime.jsx)(_row.default, {
-            children: menus.map(function (menu) {
-              return (0, _jsxRuntime.jsx)(_col.default, Object.assign({
-                className: (0, _classnames.default)('menu-item'),
-                onClick: function onClick() {
-                  onMenuChange ? onMenuChange(menu) : defaultMenuOnClick(menu);
-                }
-              }, {
-                children: getMenuDom(selectedMenu || activeMenu, menu)
-              }), menu.key);
-            })
-          }, void 0)]
-        }), void 0), dropMenuConfig && (0, _jsxRuntime.jsxs)(_space.default, Object.assign({
-          size: 8
-        }, {
-          children: [(0, _jsxRuntime.jsx)(_avatar.default, {
-            size: 32,
-            src: userAvatar
-          }, void 0), (0, _jsxRuntime.jsx)(_typography.default, Object.assign({
-            level: "body1",
-            style: {
-              color: '#666666'
-            }
-          }, {
-            children: userName
-          }), void 0), dropMenuConfig && (0, _jsxRuntime.jsx)(_index.default, Object.assign({}, dropMenuConfig), void 0)]
-        }), void 0)]
-      }), void 0)
-    }), void 0), (0, _jsxRuntime.jsx)("div", Object.assign({
+    children: [headerConfig && (0, _jsxRuntime.jsx)(_header.default, Object.assign({}, headerConfig), void 0), headerDom, (0, _jsxRuntime.jsx)("div", Object.assign({
       className: "igloo-layout-center"
     }, {
       children: (0, _jsxRuntime.jsx)("div", Object.assign({
         className: "igloo-layout-content"
       }, {
-        children: children
-      }), void 0)
-    }), void 0), (0, _jsxRuntime.jsx)("div", Object.assign({
-      className: "igloo-layout-footer"
-    }, {
-      children: (0, _jsxRuntime.jsxs)("div", Object.assign({
-        className: "footer-content"
-      }, {
-        children: [(0, _jsxRuntime.jsxs)(_space.default, Object.assign({
-          size: 32,
-          align: "start",
-          className: "footer-top"
-        }, {
-          children: [(0, _jsxRuntime.jsx)("div", Object.assign({
-            className: "top-left"
-          }, {
-            children: (0, _jsxRuntime.jsx)("div", {
-              className: "igloo-logo"
-            }, void 0)
-          }), void 0), topRightContent]
-        }), void 0), (0, _jsxRuntime.jsx)("div", {
-          className: "footer-divider"
-        }, void 0), (0, _jsxRuntime.jsxs)("div", Object.assign({
-          className: "footer-bottom"
-        }, {
-          children: [copyRightRender ? copyRightRender("\xA9 ".concat(new Date().getFullYear(), " Powered by Axinan Pte Ltd. All Rights Reserved.")) : (0, _jsxRuntime.jsx)(_typography.default, Object.assign({
-            level: "body3"
-          }, {
-            children: "\xA9 ".concat(new Date().getFullYear(), " Powered by Axinan Pte Ltd. All Rights Reserved.")
-          }), void 0), (0, _jsxRuntime.jsxs)(_typography.default, Object.assign({
-            level: "body3"
-          }, {
-            children: [(0, _jsxRuntime.jsx)(_button.default, Object.assign({
-              type: "text",
-              onClick: function onClick() {
-                return window.open('https://contents.iglooinsure.com');
-              }
-            }, {
-              children: (0, _jsxRuntime.jsx)(_typography.default, Object.assign({
-                level: "body3"
-              }, {
-                children: "Privacy Policy"
-              }), void 0)
-            }), void 0), ' ', (0, _jsxRuntime.jsx)("span", Object.assign({
-              style: {
-                margin: '0px 16px'
-              }
-            }, {
-              children: "|"
-            }), void 0), " Terms of Service"]
-          }), void 0)]
-        }), void 0)]
+        children: contentDom
       }), void 0)
-    }), void 0)]
+    }), void 0), footerConfig && (0, _jsxRuntime.jsx)(_footer.default, Object.assign({}, footerConfig), void 0), footerDom]
   }), void 0);
 };
 
+Layout.Header = _header.default;
+Layout.Footer = _footer.default;
 var _default = Layout;
 exports.default = _default;

package/lib/layout/style/index.less

@@ -9,20 +9,18 @@
   overflow: auto;
 
   .igloo-layout-header {
-    min-height: 56px;
-    height: 56px;
     width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
     background: #f6f6ff;
     border-bottom: 1px solid #eeeeee;
 
     .header-content {
       width: 100%;
+      min-height: 56px;
+      height: 56px;
       display: flex;
       align-items: center;
       justify-content: space-between;
+      margin: 0 auto;
 
       .header-left {
         display: flex;
@@ -101,27 +99,25 @@
 
   .igloo-layout-center {
     flex: 1;
-    display: flex;
     padding: 0px 16px;
-    justify-content: center;
     width: 100%;
     background-color: #f9f9f9;
 
     .igloo-layout-content {
       width: 100%;
+      margin: 0 auto;
     }
   }
 
   .igloo-layout-footer {
     width: 100%;
-    display: flex;
-    justify-content: center;
     background-color: #f6f6ff;
 
     .footer-content {
       width: 100%;
       padding: 32px 0px;
       color: #424242;
+      margin: 0 auto;
 
       .footer-top {
         display: flex;
@@ -221,14 +217,14 @@
   }
 
   .igloo-layout-header {
-    height: 48px;
     flex: 0 0 auto;
     background-color: #f6f6ff;
     padding: 0px 16px;
+    border-bottom: 1px solid #eeeeee;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    border-bottom: 1px solid #eeeeee;
+    height: 48px;
 
     .igloo-logo {
       width: 44px;
@@ -305,24 +301,22 @@
 
   .igloo-layout-center {
     background-color: #f9f9f9;
-    display: flex;
     padding: 0px 16px;
-    justify-content: center;
     flex: 1;
 
     .igloo-layout-content {
       width: 100%;
+      margin: 0 auto;
     }
   }
 
   .igloo-layout-footer {
     background-color: #f6f6ff;
     padding: 24px 16px;
-    display: flex;
-    justify-content: center;
 
     .footer-content {
       width: 100%;
+      margin: 0 auto;
 
       .igloo-logo {
         width: 44px;