tntd 1.3.65 → 1.4.1

package/es/Modal/index.js

@@ -0,0 +1,94 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+
+function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_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; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import { useState, useEffect, Fragment } from 'react';
+import cn from 'classnames';
+import { Modal } from 'antd';
+import Icon from '../Icon';
+import './index.less';
+
+var Title = function Title(_ref) {
+  var title = _ref.title,
+      logo = _ref.logo,
+      fullscreen = _ref.fullscreen,
+      _ref$supportFullscree = _ref.supportFullscreen,
+      supportFullscreen = _ref$supportFullscree === void 0 ? true : _ref$supportFullscree,
+      onToggleFullscreen = _ref.onToggleFullscreen,
+      onClose = _ref.onClose;
+  return React.createElement(Fragment, null, React.createElement("div", null, logo && React.createElement("img", {
+    src: logo
+  }), React.createElement("span", null, title)), React.createElement("div", {
+    className: "tnt-modal-header-actions"
+  }, supportFullscreen && React.createElement(Icon, {
+    className: "fullscreen",
+    type: fullscreen ? 'fullscreen-exit' : 'fullscreen',
+    onClick: onToggleFullscreen
+  }), React.createElement(Icon, {
+    className: "close",
+    type: "close",
+    onClick: onClose
+  })));
+};
+
+export default (function (props) {
+  var _cn;
+
+  var visible = props.visible,
+      children = props.children,
+      logo = props.logo,
+      title = props.title,
+      _props$height = props.height,
+      height = _props$height === void 0 ? '90vh' : _props$height,
+      _props$width = props.width,
+      width = _props$width === void 0 ? '85%' : _props$width,
+      className = props.className,
+      supportFullscreen = props.supportFullscreen,
+      _onToggleFullscreen = props.onToggleFullscreen,
+      onCancel = props.onCancel,
+      rest = _objectWithoutProperties(props, ["visible", "children", "logo", "title", "height", "width", "className", "supportFullscreen", "onToggleFullscreen", "onCancel"]);
+
+  var _useState = useState(rest.fullscreen || false),
+      _useState2 = _slicedToArray(_useState, 2),
+      fullscreen = _useState2[0],
+      setFullscreen = _useState2[1];
+
+  useEffect(function () {
+    setFullscreen(rest.fullscreen);
+  }, [rest.fullscreen, visible]);
+  return React.createElement(Modal, _extends({
+    visible: visible,
+    title: React.createElement(Title, {
+      logo: logo,
+      title: title,
+      fullscreen: fullscreen,
+      supportFullscreen: supportFullscreen,
+      onClose: onCancel,
+      onToggleFullscreen: function onToggleFullscreen() {
+        setFullscreen(!fullscreen);
+        _onToggleFullscreen && _onToggleFullscreen(!fullscreen);
+      }
+    }),
+    onCancel: onCancel,
+    destroyOnClose: true,
+    centered: true,
+    footer: null,
+    width: fullscreen ? '100%' : width,
+    style: {
+      height: fullscreen ? '100vh' : height
+    },
+    className: cn('tnt-modal', (_cn = {}, _defineProperty(_cn, className, className), _defineProperty(_cn, "fullscreen", fullscreen), _cn))
+  }, rest), children);
+});

package/es/Modal/index.less

@@ -0,0 +1,86 @@
+.tnt-modal {
+    &.ant-modal {
+        max-width: 100vw;
+        padding-bottom: 0;
+    }
+
+    .ant-modal-content {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+
+        .ant-modal-close {
+            display: none;
+        }
+    }
+
+    .ant-modal-header {
+        position: relative;
+        padding: 8px 20px;
+
+        .tnt-modal-header-actions {
+            position: absolute;
+            top: 0;
+            right: 0;
+            height: 40px;
+            line-height: 40px;
+
+            .tnt-icon {
+                width: 40px;
+                height: 40px;
+                line-height: 40px;
+                cursor: pointer;
+                text-align: center;
+                display: inline-block;
+            }
+
+            i.fullscreen:hover {
+                color: #2E81F7;
+            }
+
+            i.close:hover {
+                color: red;
+            }
+        }
+    }
+
+    .ant-modal-title {
+        .link {
+            margin-left: 10px;
+            font-size: 12px;
+            color: #999;
+
+            &:hover {
+                color: #2E81F7;
+            }
+        }
+
+        img {
+            position: relative;
+            width: 18px;
+            height: 18px;
+            margin-right: 8px;
+            vertical-align: text-top;
+        }
+    }
+
+    .ant-modal-body {
+        padding: 0;
+        // height: calc(100% - 39px);
+        flex: 1;
+        overflow: auto;
+    }
+
+    &.fullscreen {
+        .ant-modal-body {
+            height: calc(100vh - 39px);
+            background: #fff;
+        }
+    }
+
+    iframe {
+        border: none;
+        width: 100%;
+        height: 100%;
+    }
+}

package/es/Page/Box.js

@@ -0,0 +1,72 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React from 'react';
+import { Card } from 'antd';
+import { addUnitForValue } from './utils';
+
+var Box = function Box(_ref) {
+  var inLayout = _ref.inLayout,
+      _ref$clsPrefix = _ref.clsPrefix,
+      clsPrefix = _ref$clsPrefix === void 0 ? 'tnt-page' : _ref$clsPrefix,
+      children = _ref.children,
+      _ref$noPadding = _ref.noPadding,
+      noPadding = _ref$noPadding === void 0 ? false : _ref$noPadding,
+      headerHeight = _ref.headerHeight,
+      _ref$bordered = _ref.bordered,
+      bordered = _ref$bordered === void 0 ? false : _ref$bordered,
+      _ref$bodyStyle = _ref.bodyStyle,
+      bodyStyle = _ref$bodyStyle === void 0 ? {} : _ref$bodyStyle,
+      _ref$headStyle = _ref.headStyle,
+      headStyle = _ref$headStyle === void 0 ? {} : _ref$headStyle,
+      height = _ref.height,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'small' : _ref$size,
+      _ref$contentTotalMarg = _ref.contentTotalMargin,
+      contentTotalMargin = _ref$contentTotalMarg === void 0 ? '0px' : _ref$contentTotalMarg,
+      restProps = _objectWithoutProperties(_ref, ["inLayout", "clsPrefix", "children", "noPadding", "headerHeight", "bordered", "bodyStyle", "headStyle", "height", "size", "contentTotalMargin"]);
+
+  var cardTitleHeight = 0;
+  console.log('inLayout', inLayout);
+  console.log('restProps', restProps);
+
+  if (restProps.title) {
+    // 根据Card的size,计算Card的title的高度值
+    cardTitleHeight = size === 'small' ? 40 : 60; // 如果Card的自定义高度，Card的title就使用此高度
+
+    if (headStyle.hasOwnProperty(height)) {
+      cardTitleHeight = headStyle.height;
+    }
+  } // 如果设置了noPadding，优先级最高
+
+
+  if (noPadding) {
+    bodyStyle.padding = 0;
+    headStyle.padding = 0;
+  } // 如果传入只有数字，需要默认加px
+
+
+  cardTitleHeight = addUnitForValue(cardTitleHeight);
+  var cardBodyHeight = "calc(".concat(height, " - ").concat(headerHeight, " - ").concat(contentTotalMargin, " - ").concat(cardTitleHeight, ")");
+  return React.createElement(Card, _extends({
+    className: "".concat(clsPrefix, "-box-card"),
+    bordered: bordered,
+    bodyStyle: _objectSpread({}, bodyStyle, {
+      // overflow: 'auto',
+      height: inLayout ? "calc(100% - ".concat(headerHeight, ")") : cardBodyHeight
+    }),
+    size: size,
+    headStyle: headStyle
+  }, restProps), children);
+};
+
+export default Box;

package/es/Page/README.md

@@ -0,0 +1,180 @@
+## Page 组件
+
+### 代码演示
+
+```jsx
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom';
+import { Button, Divider, message, Breadcrumb } from 'antd';
+import { Page, Layout } from 'tntd';
+import styled from 'styled-components';
+import 'antd/dist/antd.css';
+
+const { Box } = Page
+
+const left = <Breadcrumb>
+    <Breadcrumb.Item>Home</Breadcrumb.Item>
+    <Breadcrumb.Item>
+      <a href="">Application Center</a>
+    </Breadcrumb.Item>
+    <Breadcrumb.Item>
+      <a href="">Application List</a>
+    </Breadcrumb.Item>
+    <Breadcrumb.Item>An Application</Breadcrumb.Item>
+  </Breadcrumb>;
+const center = '先灰再白后灰'
+const right = (
+  <>
+    <Button>预览</Button>
+    <Button type="primary">保存</Button>
+  </>
+)
+
+const Demo = (props) => {
+  return (
+    <div>
+      <h3>第一种场景， 从灰色背景开始</h3>
+      <Page
+        className='etl-page'
+        title='ETL编辑器' 
+        center={center} 
+        extra={right}
+        goBackText='返回啊'
+        goBack={()=>{
+            message.info('hi，你点击了返回');
+        }}
+      >
+        <Box width="200" title="标题">第一列</Box>
+        <Box mode="white">第二列</Box>
+        <Box width="200">第三列</Box>
+      </Page>
+
+      <Divider dashed />
+      <h3>第二种场景，从白色背景开始</h3>
+
+      <Page 
+        title={left} 
+        center={center} 
+        extra={right}
+      >
+        <Box width="200" mode="white">第一列</Box>
+        <Box>第二列</Box>
+        <Box width="200" mode="white">第三列</Box>
+      </Page>
+
+      <Divider dashed />
+
+      <h3>第三种场景， 无标题栏</h3>
+
+      <Page height="400px">
+        <Box title='分组列表' extra={<Button type="primary" size='small'>添加</Button>}>第一列</Box>
+        <Box mode="white" title='菜单列表' extra={<Button type="primary" size='small'>添加</Button>}>第二列</Box>
+        <Box title="系统列表">第三列</Box>
+        <Box title="功能注册">第四列</Box>
+      </Page>
+
+      <Divider dashed />
+      <Layout
+            // type="paas"
+            appKey="orion"
+            logo=""
+            name="私有云全家桶"
+            enName="Private Cloud"
+      >
+         <Page 
+            title="风险大盘" 
+            // extra={right}
+            inLayout
+        >
+            <Box 
+                title="系统列表" 
+                width={320}
+                mode='white'
+            >
+                第三列
+            </Box>
+            <Box title="功能注册">
+                第四列<br/>
+                第四列<br/>
+                第四列<br/>
+                第四列<br/>
+                第四列<br/>
+                第四列<br/>
+                第四列<br/>
+                第四列<br/>
+                第四列<br/>
+                第四列<br/>
+                第四列<br/>
+                第四列<br/>
+                第四列<br/>
+                第四列<br/>
+                第四列<br/>
+                第四列<br/>
+                第四列<br/>
+                第四列<br/>
+                第四列<br/>
+                第四列<br/>
+                第四列<br/>
+                第四列<br/>
+                第四列<br/>
+                第四列<br/>
+                第四列<br/>
+                第四列<br/>
+                第四列end
+            </Box>
+             <Box 
+                title="系统列表" 
+                width={200}
+                mode='white'
+            >
+                第三列
+            </Box>
+        </Page>
+      </Layout>
+      <Divider dashed />
+
+      <h3>第四种场景， 有inLayout属性添加内边距padding="16px 20px"，Page里是自定义的children</h3>
+      <div name="layout" style={{background:'#f0f2f3'}}>
+        <Page 
+            title="风险大盘" 
+            extra={right} 
+            inLayout={true}
+        >
+            hi
+            <div style={{width: '100%', height: 200,  background: '#ffffff'}}>自定义children</div>
+        </Page>
+      </div>
+    </div>
+  )
+}
+
+ReactDOM.render(<Demo />, document.getElementById('root'))
+```
+
+### API
+
+#### Page
+
+| 参数         | 说明       | 类型                                         | 默认值 |  是否必须 |
+| :----------- | :--------- | :--------------------------------------------------- | :------ | :------ |
+| title  |  标题栏左侧内容   | ReactNode | -    | 否 |
+| center |   标题栏中间内容 |  ReactNode |- |否 |
+| extra | 标题栏右侧内容 | ReactNode   |  -  |否 |
+| headerHeight |标题栏的高度  |  string/int   | 50px    |否 |
+| height | 组件整体高度 |string/int| 100vh| 否 |
+| size | 根据size尺寸调整标题栏的padding值，Page.Box组件也会继承size属性 |`default | small`| small| 否|
+| inLayout | 代表组件是放在tntd的Layout中引用，增加内边距"16px 30px"，标题栏无阴影 |boolean | false | 否|
+
+
+
+#### Page.Box
+
+描述：Page.Box包裹了antd库中的Card组件，Box属性都会透传到Card组件。
+
+| 参数  | 说明       | 类型                                    | 默认值 | 是否必须 |
+| :---- | :--------- | :--------------------------------------------- | :------ | :------ |
+| width | 30%代表占父容器的百分比， `30 | 30px`代表固定宽度30px |  string/int | auto    |否 |
+| title | 列标题 |  ReactNode | -    |否 |
+| mode | white是白色背景，gray为灰色背景 |`white| gray` | gray | 否 |
+| noPadding | 如果为true，Box的padding为0  | boolean | false | 否 |
+

package/es/Page/index.js

@@ -0,0 +1,165 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
+
+function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
+
+function _typeof(obj) { 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React from 'react';
+import cn from 'classnames';
+import Icon from '../Icon';
+import { computeWidth, addUnitForValue } from './utils';
+import Box from './Box';
+import './index.less';
+var clsPrefix = 'tnt-page';
+
+var isPageBox = function isPageBox(child) {
+  var _child$props;
+
+  return (child == null ? void 0 : child.type) === Box || (child == null ? void 0 : (_child$props = child.props) == null ? void 0 : _child$props.pageBox);
+};
+
+var PageLayout = function PageLayout(_ref) {
+  var _childrenToArray, _childrenToArray$filt, _childrenToArray2, _cn;
+
+  var _ref$height = _ref.height,
+      height = _ref$height === void 0 ? '100vh' : _ref$height,
+      _ref$headerHeight = _ref.headerHeight,
+      headerHeight = _ref$headerHeight === void 0 ? 50 : _ref$headerHeight,
+      children = _ref.children,
+      title = _ref.title,
+      goBack = _ref.goBack,
+      goBackText = _ref.goBackText,
+      center = _ref.center,
+      extra = _ref.extra,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'small' : _ref$size,
+      _ref$inLayout = _ref.inLayout,
+      inLayout = _ref$inLayout === void 0 ? false : _ref$inLayout,
+      className = _ref.className,
+      restProps = _objectWithoutProperties(_ref, ["height", "headerHeight", "children", "title", "goBack", "goBackText", "center", "extra", "size", "inLayout", "className"]);
+
+  // 如果传入只有数字，需要默认加px
+  var computedHeaderHeight = addUnitForValue(headerHeight);
+  var computedHeight = addUnitForValue(height); // 判断是否有标题栏
+
+  if (!(title || extra || center)) {
+    computedHeaderHeight = '0px';
+  }
+
+  if (inLayout) {
+    computedHeaderHeight = '40px';
+  } // 计算中间的zIndex，灰色递减，白色递增
+
+
+  var whiteCols = 0;
+  var childrenToArray = []; // 计算children type是box的数量
+
+  var boxCount = 0; // 如果children是单个节点，统一转为数组处理计算层级
+
+  console.log('children', children);
+
+  if (_typeof(children) === 'object') {
+    childrenToArray = [children];
+  } else if (Array.isArray(children)) {
+    childrenToArray = _toConsumableArray(children);
+  }
+
+  console.log('React.Children', React.Children);
+  React.Children.map(children, function (child) {
+    if (isPageBox(child)) {
+      boxCount += 1;
+    }
+  });
+  console.log(boxCount);
+  whiteCols = (_childrenToArray = childrenToArray) == null ? void 0 : (_childrenToArray$filt = _childrenToArray.filter(function (_ref2) {
+    var props = _ref2.props;
+    return (props == null ? void 0 : props.mode) === 'white';
+  })) == null ? void 0 : _childrenToArray$filt.length;
+  var total = ((_childrenToArray2 = childrenToArray) == null ? void 0 : _childrenToArray2.length) + 5;
+  var startIndex = total - whiteCols - 1;
+  var endIndex = total - 2;
+  var headerStyle = {
+    height: computedHeaderHeight,
+    padding: "".concat(size === 'small' ? 20 : 24, "px"),
+    zIndex: inLayout ? 1 : total || 1
+  };
+  var contentStyle = {
+    display: boxCount > 0 ? 'flex' : 'block',
+    marginTop: computedHeaderHeight,
+    padding: inLayout ? '16px 20px' : '0px'
+  };
+  return React.createElement("section", _extends({
+    className: cn(clsPrefix, (_cn = {}, _defineProperty(_cn, className, className), _defineProperty(_cn, 'in-layout', inLayout), _defineProperty(_cn, 'not-in-layout', !inLayout), _cn))
+  }, restProps), (title || goBack || center || extra) && React.createElement("div", {
+    className: "".concat(clsPrefix, "-header"),
+    style: headerStyle
+  }, React.createElement("div", {
+    className: "".concat(clsPrefix, "-header-section")
+  }, goBack && React.createElement("div", {
+    className: "page-header-section-back",
+    onClick: function onClick() {
+      goBack();
+    }
+  }, React.createElement(Icon, {
+    type: "left"
+  }), React.createElement("span", null, goBackText ? goBackText : '返回')), title), [center, extra].map(function (item) {
+    return React.createElement("div", {
+      className: "".concat(clsPrefix, "-header-section")
+    }, item);
+  })), React.createElement("div", {
+    className: "".concat(clsPrefix, "-content"),
+    style: contentStyle
+  }, React.Children.map(children, function (child) {
+    // 如果children不是Box,就不需要多列布局
+    if (!child.type) {
+      // console.log("没有type");
+      return React.cloneElement(React.createElement("div", null, child));
+    }
+
+    var extraProps = _objectSpread({
+      headerHeight: computedHeaderHeight,
+      size: size,
+      height: computedHeight,
+      contentTotalMargin: inLayout ? '32px' : '0px',
+      inLayout: inLayout
+    }, child.props);
+
+    if (!isPageBox(child)) {
+      return React.cloneElement(child, extraProps);
+    }
+
+    var _child$props2 = child.props,
+        _child$props2$mode = _child$props2.mode,
+        mode = _child$props2$mode === void 0 ? 'gray' : _child$props2$mode,
+        width = _child$props2.width;
+    var style = {
+      flex: computeWidth(width),
+      // 设置cols层级关系
+      zIndex: mode === 'gray' ? endIndex-- : startIndex++
+    };
+    var className = cn("".concat(clsPrefix, "-box ").concat(clsPrefix, "-box-").concat(mode));
+    return React.createElement('div', {
+      className: className,
+      style: style
+    }, React.cloneElement(child, extraProps));
+  })));
+};
+
+PageLayout.Box = Box;
+export default PageLayout;