antd-management-fast-framework 1.11.48 → 1.11.49

package/es/customComponents/MobileContainor/Devices/Iphone8/index.js

@@ -13,6 +13,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _tools = require("../../../../utils/tools");
 
+var _ContentView = _interopRequireDefault(require("../../ContentView"));
+
 var _devices = _interopRequireDefault(require("../devices.less"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -77,7 +79,7 @@ var Index = /*#__PURE__*/function (_PureComponent) {
         className: _devices.default.speaker
       }), /*#__PURE__*/_react.default.createElement("div", {
         className: _devices.default.screen
-      }, children), /*#__PURE__*/_react.default.createElement("div", {
+      }, /*#__PURE__*/_react.default.createElement(_ContentView.default, null, children)), /*#__PURE__*/_react.default.createElement("div", {
         className: _devices.default.home
       }), /*#__PURE__*/_react.default.createElement("div", {
         className: _devices.default['bottom-bar']

package/es/customComponents/MobileContainor/Devices/Iphone8plus/index.js

@@ -13,6 +13,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _tools = require("../../../../utils/tools");
 
+var _ContentView = _interopRequireDefault(require("../../ContentView"));
+
 var _devices = _interopRequireDefault(require("../devices.less"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -77,7 +79,7 @@ var Index = /*#__PURE__*/function (_PureComponent) {
         className: _devices.default.speaker
       }), /*#__PURE__*/_react.default.createElement("div", {
         className: _devices.default.screen
-      }, children), /*#__PURE__*/_react.default.createElement("div", {
+      }, /*#__PURE__*/_react.default.createElement(_ContentView.default, null, children)), /*#__PURE__*/_react.default.createElement("div", {
         className: _devices.default.home
       }), /*#__PURE__*/_react.default.createElement("div", {
         className: _devices.default['bottom-bar']

package/es/customComponents/MobileContainor/Devices/IphoneX/index.js

@@ -11,6 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _ContentView = _interopRequireDefault(require("../../ContentView"));
+
 var _devices = _interopRequireDefault(require("../devices.less"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -86,7 +88,7 @@ var Index = /*#__PURE__*/function (_PureComponent) {
         className: _devices.default['inner-shadow']
       }), /*#__PURE__*/_react.default.createElement("div", {
         className: _devices.default.screen
-      }, children)));
+      }, /*#__PURE__*/_react.default.createElement(_ContentView.default, null, children))));
     }
   }]);
 

package/es/customComponents/MobileContainor/MobilePreviewArea/index.d.ts

@@ -0,0 +1,37 @@
+export default Index;
+declare class Index extends Base {
+    constructor(props: any);
+    state: any;
+    buildMobileTypeArray: () => any[];
+    establishCardCollectionConfig: () => {
+        list: {
+            title: {
+                text: string;
+                icon: JSX.Element;
+            };
+            extra: {
+                list: {
+                    buildType: string;
+                    size: string;
+                    label: string;
+                    value: any;
+                    renderItemFunction: () => any[] | null;
+                    onChangeCallback: (v: any) => void;
+                }[];
+            };
+            items: {
+                lg: number;
+                type: string;
+                component: JSX.Element;
+            }[];
+        }[];
+    };
+    renderInnerView: () => null;
+    renderFurther(): any;
+}
+declare namespace Index {
+    export namespace defaultProps {
+        export const mobileList: never[];
+    }
+}
+import Base from "../../../framework/DataOperation/Base";

package/es/customComponents/MobileContainor/MobilePreviewArea/index.js

@@ -0,0 +1,228 @@
+"use strict";
+
+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); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _icons = require("@ant-design/icons");
+
+var _tools = require("../../../utils/tools");
+
+var _constants = require("../../../utils/constants");
+
+var _Base2 = _interopRequireDefault(require("../../../framework/DataOperation/Base"));
+
+var _VerticalBox = _interopRequireDefault(require("../../VerticalBox"));
+
+var _RoughSketch = _interopRequireDefault(require("../RoughSketch"));
+
+var _IphoneX = _interopRequireDefault(require("../Devices/IphoneX"));
+
+var _Iphone8plus = _interopRequireDefault(require("../Devices/Iphone8plus"));
+
+var _Iphone = _interopRequireDefault(require("../Devices/Iphone8"));
+
+var _IPhone5S = _interopRequireDefault(require("../Devices/IPhone5S"));
+
+var _GalaxyNote = _interopRequireDefault(require("../Devices/GalaxyNote8"));
+
+var _FunctionComponent = require("../../FunctionComponent");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 _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; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var Index = /*#__PURE__*/function (_Base) {
+  _inherits(Index, _Base);
+
+  var _super = _createSuper(Index);
+
+  function Index(props) {
+    var _this;
+
+    _classCallCheck(this, Index);
+
+    _this = _super.call(this, props);
+    _this.resetDataAfterLoad = false;
+
+    _this.buildMobileTypeArray = function () {
+      var list = [];
+      Object.entries(_constants.mobileTypeCollection).forEach(function (o) {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        var _o = _slicedToArray(o, 2),
+            k = _o[0],
+            v = _o[1];
+
+        if ((0, _tools.isObject)(v)) {
+          list.push(v);
+        }
+      });
+      return list;
+    };
+
+    _this.establishCardCollectionConfig = function () {
+      var mobileList = _this.props.mobileList;
+      var mobileType = _this.state.mobileType;
+      var listConfig = [];
+      var mobileCollection = (0, _tools.isArray)(mobileList) && mobileList.length <= 0 ? _this.buildMobileTypeArray() : mobileList;
+      mobileCollection.forEach(function (o, index) {
+        if ((0, _tools.isObject)(o)) {
+          var key = "mobileType_".concat(index);
+          listConfig.push({
+            key: key,
+            flag: o.name,
+            name: o.label,
+            alias: o.label,
+            description: '',
+            availability: _constants.whetherNumber.yes
+          });
+        }
+      });
+      var mobileView = null;
+
+      switch (mobileType) {
+        case _constants.mobileTypeCollection.roughSketch.name:
+          mobileView = /*#__PURE__*/_react.default.createElement(_RoughSketch.default, null, _this.renderInnerView());
+          break;
+
+        case _constants.mobileTypeCollection.iphoneX.name:
+          mobileView = /*#__PURE__*/_react.default.createElement(_IphoneX.default, null, _this.renderInnerView());
+          break;
+
+        case _constants.mobileTypeCollection.iphone8.name:
+          mobileView = /*#__PURE__*/_react.default.createElement(_Iphone.default, null, _this.renderInnerView());
+          break;
+
+        case _constants.mobileTypeCollection.iphone8plus.name:
+          mobileView = /*#__PURE__*/_react.default.createElement(_Iphone8plus.default, null, _this.renderInnerView());
+          break;
+
+        case _constants.mobileTypeCollection.iPhone5S.name:
+          mobileView = /*#__PURE__*/_react.default.createElement(_IPhone5S.default, null, _this.renderInnerView());
+          break;
+
+        case _constants.mobileTypeCollection.galaxyNote8.name:
+          mobileView = /*#__PURE__*/_react.default.createElement(_GalaxyNote.default, null, _this.renderInnerView());
+          break;
+
+        default:
+          mobileView = null;
+          var text = 'invalid mobile type，please check in console';
+          (0, _tools.showErrorMessage)({
+            message: text
+          });
+          (0, _tools.recordObject)({
+            message: 'available mobile type list',
+            mobileTypeCollection: _constants.mobileTypeCollection
+          });
+          break;
+      }
+
+      return {
+        list: [{
+          title: {
+            text: '手机预览',
+            icon: /*#__PURE__*/_react.default.createElement(_icons.MobileOutlined, null)
+          },
+          extra: {
+            list: [{
+              buildType: _constants.cardConfig.extraBuildType.flexSelect,
+              size: 'small',
+              label: '模拟设备',
+              value: mobileType,
+              renderItemFunction: function renderItemFunction() {
+                return (0, _FunctionComponent.buildOptionItem)({
+                  list: listConfig
+                });
+              },
+              onChangeCallback: function onChangeCallback(v) {
+                _this.setState({
+                  mobileType: v
+                });
+              }
+            }]
+          },
+          items: [{
+            lg: 24,
+            type: _constants.cardConfig.contentItemType.component,
+            component: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_VerticalBox.default, {
+              align: "center",
+              alignJustify: "center",
+              style: {
+                height: '100%'
+              }
+            }, mobileView))
+          }]
+        }]
+      };
+    };
+
+    _this.renderInnerView = function () {
+      return null;
+    };
+
+    _this.state = _objectSpread(_objectSpread({}, _this.state), {
+      placement: 'top',
+      height: '100vh',
+      showBottomBar: false,
+      mobileType: _constants.mobileTypeCollection.roughSketch.name
+    });
+    return _this;
+  }
+
+  _createClass(Index, [{
+    key: "renderFurther",
+    value: function renderFurther() {
+      return this.buildCardCollection(this.establishCardCollectionConfig());
+    }
+  }]);
+
+  return Index;
+}(_Base2.default);
+
+Index.defaultProps = {
+  mobileList: []
+};
+var _default = Index;
+exports.default = _default;

package/es/customComponents/MobileContainor/MobilePreviewDrawer/index.d.ts

@@ -1,9 +1,9 @@
 export default MobilePreviewDrawer;
-declare class MobilePreviewDrawer extends Base {
+declare class MobilePreviewDrawer extends BaseNeedlessLoadDrawer {
     constructor(props: any);
     renderInnerView: () => null;
 }
 declare namespace MobilePreviewDrawer {
     export const defaultProps: {};
 }
-import Base from "../../../framework/DataDrawer/Base";
+import BaseNeedlessLoadDrawer from "../../../framework/DataDrawer/BaseNeedlessLoadDrawer";

package/es/customComponents/MobileContainor/MobilePreviewDrawer/index.js

@@ -15,7 +15,7 @@ var _tools = require("../../../utils/tools");
 
 var _constants = require("../../../utils/constants");
 
-var _Base2 = _interopRequireDefault(require("../../../framework/DataDrawer/Base"));
+var _BaseNeedlessLoadDrawer = _interopRequireDefault(require("../../../framework/DataDrawer/BaseNeedlessLoadDrawer"));
 
 var _VerticalBox = _interopRequireDefault(require("../../VerticalBox"));
 
@@ -69,8 +69,8 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
-var MobilePreviewDrawer = /*#__PURE__*/function (_Base) {
-  _inherits(MobilePreviewDrawer, _Base);
+var MobilePreviewDrawer = /*#__PURE__*/function (_BaseNeedlessLoadDraw) {
+  _inherits(MobilePreviewDrawer, _BaseNeedlessLoadDraw);
 
   var _super = _createSuper(MobilePreviewDrawer);
 
@@ -202,7 +202,7 @@ var MobilePreviewDrawer = /*#__PURE__*/function (_Base) {
   }
 
   return MobilePreviewDrawer;
-}(_Base2.default);
+}(_BaseNeedlessLoadDrawer.default);
 
 MobilePreviewDrawer.defaultProps = {};
 var _default = MobilePreviewDrawer;

package/es/customComponents/MobileContainor/RoughSketch/index.js

@@ -9,6 +9,8 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _ContentView = _interopRequireDefault(require("../ContentView"));
+
 var _index = _interopRequireDefault(require("./index.less"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -54,9 +56,7 @@ var MobileContainor = /*#__PURE__*/function (_PureComponent) {
       var children = this.props.children;
       return /*#__PURE__*/_react.default.createElement("div", {
         className: _index.default.device
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: _index.default.deviceInner
-      }, children));
+      }, /*#__PURE__*/_react.default.createElement(_ContentView.default, null, children));
     }
   }]);
 

package/es/customComponents/MobileContainor/RoughSketch/index.less

@@ -31,28 +31,4 @@
     border-radius: 100%;
     content: '';
   }
-
-  .deviceInner {
-    height: 100%;
-    overflow: auto;
-    background-color: #fff;
-
-    /* 设置滚动条的样式 */
-    &::-webkit-scrollbar {
-      width: 5px;
-    }
-
-    /* 滚动槽 */
-    &::-webkit-scrollbar-track {
-      border-radius: 5px;
-      box-shadow: inset 0 0 3px rgb(0 0 0 / 30%);
-    }
-
-    /* 滚动条滑块 */
-    &::-webkit-scrollbar-thumb {
-      background: rgb(0 0 0 / 80%);
-      border-radius: 5px;
-      box-shadow: inset 0 0 3px rgb(243 243 244);
-    }
-  }
 }

package/es/framework/Common/index.d.ts

@@ -150,7 +150,15 @@ declare class Common extends Core {
     establishHelpConfig: () => null;
     buildHelp: () => JSX.Element | null;
     buildHelpWrapper: () => JSX.Element | null;
-    buildCardCollection: (config: any) => JSX.Element;
+    establishSiderTopAreaConfig: () => null;
+    renderSiderTopArea: () => JSX.Element | null;
+    establishSiderBottomAreaConfig: () => null;
+    renderSiderBottomArea: () => JSX.Element | null;
+    buildCardCollectionArea: (config?: any) => JSX.Element | null;
+    renderSiderArea: () => JSX.Element | null;
+    establishPageContentLayoutSiderConfig: () => {};
+    establishPageContentLayoutConfig: () => {};
+    buildCardCollection: (config: any) => JSX.Element | null;
     buildCardCollectionItem: ({ config: cardItemConfig, key: cardItemKey, mode, justify: justifyGeneral, align: alignGeneral, }: {
         config: any;
         key: any;

package/es/framework/Common/index.js

@@ -47,6 +47,10 @@ require("antd/es/button/style");
 
 var _button = _interopRequireDefault(require("antd/es/button"));
 
+require("antd/es/layout/style");
+
+var _layout = _interopRequireDefault(require("antd/es/layout"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _icons = require("@ant-design/icons");
@@ -59,6 +63,8 @@ var _constants = require("../../utils/constants");
 
 var _FlexText = _interopRequireDefault(require("../../customComponents/FlexText"));
 
+var _FlexBox = _interopRequireDefault(require("../../customComponents/FlexBox"));
+
 var _ImageUpload = _interopRequireDefault(require("../../customComponents/ImageUpload"));
 
 var _VideoUpload = _interopRequireDefault(require("../../customComponents/VideoUpload"));
@@ -127,6 +133,9 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
+var Content = _layout.default.Content,
+    Sider = _layout.default.Sider;
+
 var Common = /*#__PURE__*/function (_Core) {
   _inherits(Common, _Core);
 
@@ -1352,7 +1361,41 @@ var Common = /*#__PURE__*/function (_Core) {
       return help;
     };
 
-    _this.buildCardCollection = function (config) {
+    _this.establishSiderTopAreaConfig = function () {
+      return null;
+    };
+
+    _this.renderSiderTopArea = function () {
+      var config = _this.establishSiderTopAreaConfig();
+
+      if (config == null) {
+        return null;
+      }
+
+      return _this.buildCardCollectionArea(config);
+    };
+
+    _this.establishSiderBottomAreaConfig = function () {
+      return null;
+    };
+
+    _this.renderSiderBottomArea = function () {
+      var config = _this.establishSiderBottomAreaConfig();
+
+      if (config == null) {
+        return null;
+      }
+
+      return _this.buildCardCollectionArea(config);
+    };
+
+    _this.buildCardCollectionArea = function () {
+      var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+
+      if (config == null) {
+        return null;
+      }
+
       var formContentWrapperTypeConfig = _this.establishWrapperTypeConfig() || {
         mode: _constants.cardConfig.wrapperType.page
       };
@@ -1381,13 +1424,13 @@ var Common = /*#__PURE__*/function (_Core) {
         });
       }
 
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_space.default, {
+      return /*#__PURE__*/_react.default.createElement(_space.default, {
         style: {
           width: '100%'
         },
         direction: "vertical",
         size: 24
-      }, _this.buildToolBarWrapper(), listData.map(function (item, index) {
+      }, listData.map(function (item, index) {
         return _this.buildCardCollectionItem({
           mode: mode,
           justify: justifyGeneral,
@@ -1395,7 +1438,82 @@ var Common = /*#__PURE__*/function (_Core) {
           config: item,
           key: index
         });
-      }), _this.buildHelpWrapper()));
+      }));
+    };
+
+    _this.renderSiderArea = function () {
+      var topArea = _this.renderSiderTopArea();
+
+      var bottomArea = _this.renderSiderBottomArea();
+
+      if ((bottomArea || null) == null) {
+        return topArea;
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_FlexBox.default, {
+        direction: "vertical",
+        top: topArea,
+        bottom: bottomArea
+      });
+    };
+
+    _this.establishPageContentLayoutSiderConfig = function () {
+      return {};
+    };
+
+    _this.establishPageContentLayoutConfig = function () {
+      return {};
+    };
+
+    _this.buildCardCollection = function (config) {
+      var siderArea = _this.renderSiderArea();
+
+      var contentArea = _this.buildCardCollectionArea(config);
+
+      var layoutSiderConfig = _this.establishPageContentLayoutSiderConfig();
+
+      var layoutConfig = _this.establishPageContentLayoutConfig();
+
+      var _position = _objectSpread(_objectSpread({}, {
+        position: 'left'
+      }), layoutSiderConfig || {}),
+          siderPosition = _position.position;
+
+      var siderConfig = _objectSpread(_objectSpread({}, {
+        width: 300,
+        style: _objectSpread(_objectSpread({}, {
+          backgroundColor: '#fff',
+          borderRadius: '4px',
+          overflowX: 'auto',
+          overflowY: 'hidden'
+        }), siderPosition === 'left' ? {
+          marginRight: '24px'
+        } : {
+          marginLeft: '24px'
+        })
+      }), layoutSiderConfig || {});
+
+      layoutConfig = _objectSpread(_objectSpread({}, {
+        breakpoint: 'sm',
+        style: {
+          backgroundColor: '#f0f2f5',
+          minHeight: 'auto'
+        }
+      }), layoutConfig || {});
+      var inner = siderArea == null ? contentArea : /*#__PURE__*/_react.default.createElement(_layout.default, layoutConfig, siderPosition === 'left' ? /*#__PURE__*/_react.default.createElement(Sider, siderConfig, siderArea) : null, /*#__PURE__*/_react.default.createElement(Content, null, contentArea), siderPosition !== 'left' ? /*#__PURE__*/_react.default.createElement(Sider, siderConfig, siderArea) : null);
+
+      var toolbar = _this.buildToolBarWrapper();
+
+      var help = _this.buildHelpWrapper();
+
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_space.default, {
+        style: {
+          width: '100%'
+        },
+        direction: "vertical",
+        size: 24
+      }, toolbar, inner, help));
+      return inner;
     };
 
     _this.buildCardCollectionItem = function (_ref7) {

package/es/framework/DataListView/Base/index.d.ts

@@ -208,12 +208,8 @@ declare class ListBase extends AuthorizationWrapper {
     renderCardCollectionView: () => JSX.Element;
     renderPaginationView: () => JSX.Element;
     renderView: () => JSX.Element | null;
-    establishSiderTopAreaConfig: () => null;
-    renderSiderTopArea: () => JSX.Element | null;
-    establishSiderBottomAreaConfig: () => null;
-    renderSiderBottomArea: () => JSX.Element | null;
     buildCardCollectionArea: (config?: any) => JSX.Element | null;
-    renderSiderArea: () => JSX.Element | null;
+    renderSiderArea: () => any;
     renderContentArea: () => JSX.Element;
     establishPageContentLayoutSiderConfig: () => {};
     establishPageContentLayoutConfig: () => {};

package/es/framework/DataListView/Base/index.js

@@ -1354,34 +1354,6 @@ var ListBase = /*#__PURE__*/function (_AuthorizationWrapper) {
       return null;
     };
 
-    _this.establishSiderTopAreaConfig = function () {
-      return null;
-    };
-
-    _this.renderSiderTopArea = function () {
-      var config = _this.establishSiderTopAreaConfig();
-
-      if (config == null) {
-        return null;
-      }
-
-      return _this.buildCardCollectionArea(config);
-    };
-
-    _this.establishSiderBottomAreaConfig = function () {
-      return null;
-    };
-
-    _this.renderSiderBottomArea = function () {
-      var config = _this.establishSiderBottomAreaConfig();
-
-      if (config == null) {
-        return null;
-      }
-
-      return _this.buildCardCollectionArea(config);
-    };
-
     _this.buildCardCollectionArea = function () {
       var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
 
@@ -1556,7 +1528,7 @@ var ListBase = /*#__PURE__*/function (_AuthorizationWrapper) {
           },
           direction: "vertical",
           size: 24
-        }, _this.buildToolBarWrapper(), inner, _this.buildHelpWrapper()));
+        }, toolbar, inner, help));
       }
 
       return inner;

package/es/framework/DataModal/Base/index.d.ts

@@ -59,8 +59,8 @@ declare class Base extends BaseWindow {
     buildTitleSubText: () => string;
     buildTitle: () => JSX.Element;
     formContent: () => any;
-    renderFormWrapper: () => JSX.Element;
     renderForm: () => JSX.Element;
+    renderFormWrapper: () => JSX.Element;
     renderModalInner: () => JSX.Element;
     renderFurther(): JSX.Element;
 }