fan-standard-comp 4.1.2 → 4.1.4

package/lib/CompositeTable/index.js

@@ -0,0 +1,212 @@
+/*
+/!**
+ * 组合组件；配置"筛选StandardFilter"、"列表StandardTable"
+ * 不加业务相关的功能
+ * @param {Object} dataSource 数据源
+ *   @value {Array} list 列表数据
+ *   @value {Object} pagination 页码配置
+ * @param {Function} request 接口请求数据源
+ * @param {Object} params 请求参数：页码、筛选条件等
+ * @param {Object} defaultParams 默认参数，在筛选重置的情况下不会更改
+ * request:
+ *   1、列表接口数据
+ * *!/
+import React, { ReactNode, forwardRef, useEffect, useState, useCallback, useImperativeHandle, useMemo } from 'react'
+import { StandardFilter, StandardTable, ButtonGroup, } from "fan-standard-comp";
+import { useStyles } from './index.style'
+import { commonUse } from "@/data";
+import { Spin } from 'antd';
+import dayjs from "dayjs";
+
+interface FilterFormProps {
+  formItemGroup: any[]
+  buttonGroup?: any[] | ReactNode
+  syncToUrl?: (values) => void // 从url上取值后进行转换
+  dateFormatter?: 'dayjs' | 'string' // 日期类的控件是否将其格式转换
+}
+
+interface CompositeTableProps {
+  dataSource?: any // 列表数据静态数据来源
+  request?: Function // 接口数据
+  params?: any // 请求参数/页码
+  defaultParams?: any // 默认的参数，在筛选重置的情况下不会更改
+  formItemGroup?: any[]
+  buttonGroup?: any[] | ReactNode
+  commonUse: any
+  children?: ReactNode
+  onChange?: (targetKey: string, data?: any) => void // 页码或表单触发更新
+  formatForm?: (fields: any) => void; // 转换筛选表单值
+  page?: number | string, // 页码
+  size?: number | string  // 单页数量
+  getTableData?: Function // 获取表格数据
+  form?: FilterFormProps // 筛选表单
+}
+
+
+const CompositeTable = forwardRef((props: CompositeTableProps, ref) => {
+  const {
+    dataSource, buttonGroup = [], params = {}, defaultParams = {}, columns,  children, request,
+    onChange,
+    getTableData,
+    form,
+    title
+  } = props;
+  const {
+    formItemGroup = [], syncToUrl,
+  } = form
+  const { styles, cx } = useStyles();
+  const [resDataSource, setResDataSource] = useState({
+    list: [],
+    pagination: {},
+    keywords: {}
+  })
+  const [formKeywords, setFormKeywords] = useState({})
+  const [queryLoading, setQueryLoading] = useState(false)
+  const [searchLoading, setSearchLoading] = useState(false)
+  const [filterForm, setFilterForm] = useState({
+    values: {},
+    form: undefined,
+  })
+  const paramsKey = useMemo(() => {
+    return params
+  }, [params])
+
+  const localPagination = {page:1, size: 10} // 基础页码
+
+  // ref 的转发
+  useImperativeHandle(ref, () => {
+    return {
+      ...filterForm,
+      dataSource: resDataSource,
+      setDataSource: setResDataSource,
+      reload: (filter) => loadData('refresh', {}, filter) // 更新列表
+    }
+  });
+  /!**
+   * 加载数据方法
+   * @param {string} updateKey 触发列表位置
+   * @param {Object} pagination 分页选项器
+   * @param {Object} filters 过滤条件
+   * @param {Object} sorter 排序条件
+   *!/
+  const loadData: any = useCallback(async (updateKey: string, pagination?: any = {}, filters?: any = {}, sorter?: any = {},
+  ) => {
+    if (updateKey !== 'init') {
+      handleChange(updateKey, updateKey === 'reset' ? {} : { ...pagination, ...filters, ...sorter })
+    }
+    if (request) {
+      setQueryLoading(true)
+      let parameter = Object.assign(
+        { ...defaultParams },
+        // updateKey === 'init' ? { ...params } : {}, // 重置条件下，会清空params
+        syncToUrl ? syncToUrl(params) : { ...params },
+        {
+          page: pagination?.page || params?.page || localPagination.page,
+          size: pagination?.size || params?.size || localPagination.size
+        },
+        {
+          ...filters
+        },
+        // 排序与筛选待定
+        // (sorter && sorter.field && {
+        //   sortField: sorter.field
+        // }) || {},
+        // (sorter && sorter.order && {
+        //   sortOrder: sorter.order
+        // }) || {},
+      )
+      const response = await request(parameter)
+      setQueryLoading(false)
+      setSearchLoading(false)
+      // 转换列表数据
+      if (response.code === '200') {
+        setResDataSource(Object.assign({
+          list: response?.data?.records,
+          total: response?.data?.total || 0,
+          pagination: {
+            total: response?.data?.total || 0,
+            current: response?.data?.current || commonUse.basePagination.page,
+            pageSize: response?.data?.pageSize || commonUse.basePagination.size,
+          },
+          keywords: parameter || {}, // 关键字搜索字段
+        }),)
+      } else {
+        setResDataSource({
+          list: [],
+          pagination: {},
+          keywords: {}
+        })
+      }
+    } else if (dataSource) {
+      setResDataSource(dataSource)
+    }
+  }, [params, formItemGroup, dataSource, request])
+  // console.log('resDataSource', resDataSource.keywords)
+  useEffect(() => {
+    getTableData && getTableData(resDataSource)
+  }, [resDataSource])
+  const fetchData = () => {
+
+  }
+  const handleChange = (targetKey: string, data?: any) => {
+    onChange && onChange(targetKey, data)
+  }
+  useEffect(() => {
+    setFormKeywords(syncToUrl ? syncToUrl({ ...params }) : { ...params })
+  }, [params, syncToUrl])
+  useEffect(() => {
+    loadData('init')
+  }, [])
+  return <div className={cx('f-composite-container', styles.CompositeContainerStyle)}>
+    <StandardFilter   {...form}
+                      formItemGroup={formItemGroup}
+                      gridLayout={'horizontal'} // 表单组与按钮组的排版
+                      formLayout={'horizontal'} // 表单控件组的排版
+                      min={100}
+                      itemGroupConfig={{
+                        columnCount: 4
+                      }}
+                      getFormFields={(fields, form) => {
+                        setFilterForm({ values: fields, form: form?.current })
+                      }}
+                      initialValues={formKeywords}
+                      onFilterSearch={(fields) => {
+                        setSearchLoading(true)
+                        formItemGroup.forEach(fItem => {
+                          if (fItem.searchTransform && fields[fItem.filedName]) {
+                            // 筛选参数转换
+                            let trans = fItem.searchTransform(fields[fItem.filedName])
+                            delete fields[fItem.filedName] // 提交时，删除有格式转换的字段名
+                            fields = { ...fields, ...trans }
+                          }
+                        })
+                        loadData('search', { ...commonUse.basePagination }, fields)
+                      }}
+                      onFilterReset={() => {
+                        loadData('reset', {page: 1,}, {})
+                      }}
+                      className={cx('f-composite-filter', styles.CompositeFilterStyle)}
+                      confirmButtonProps={{
+                        loading: searchLoading
+                      }}
+      // dateFormatter={'string'}
+    />
+    <StandardTable data={resDataSource} columns={columns}
+                   title={title}
+                   buttonGroup={buttonGroup}
+                   className={cx('f-composite-table', styles.CompositeTableStyle)}
+                   onChange={(pagination, filters, sorter,) => {
+                     // console.log(' pagination, filters, sorter', pagination, filters, sorter)
+                     loadData('table', {
+                       page: pagination.current,
+                       size: pagination.pageSize
+                     }, filters, sorter)
+                   }}
+    />
+    {children}
+  </div>
+})
+
+export default CompositeTable
+*/
+"use strict";

package/lib/CompositeTable/index.style.d.ts

@@ -0,0 +1,5 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    CompositeContainerStyle: import("antd-style").SerializedStyles;
+    CompositeFilterStyle: import("antd-style").SerializedStyles;
+    CompositeTableStyle: import("antd-style").SerializedStyles;
+}>;

package/lib/CompositeTable/index.style.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStyles = void 0;
+var _antdStyle = require("antd-style");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var useStyles = exports.useStyles = (0, _antdStyle.createStyles)(function (_ref) {
+  var token = _ref.token,
+    css = _ref.css,
+    cx = _ref.cx;
+  var commonCard = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    border-radius: ", "px;\n    padding: ", "px;\n  "])), token.borderRadiusLG, token.paddingLG);
+  return {
+    CompositeContainerStyle: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      overflow-x: hidden;\n    "]))),
+    CompositeFilterStyle: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      .filter-form {\n        padding: ", "px;\n        padding-bottom: 0;\n        background-color: ", ";\n          //margin-bottom: ", "px;\n          //border-radius: ", "px;\n      }\n\n      .filter-btns {\n        padding: ", "px;\n        padding-bottom: 0;\n          // border-top-left-radius: ", "px;\n          // border-top-right-radius: ", "px;\n        background-color: ", ";\n      }\n    "])), token.paddingMD, token.colorBgBase, token.marginMD, token.borderRadiusLG, token.paddingMD, token.borderRadiusLG, token.borderRadiusLG, token.colorBgBase),
+    // CompositeButtonGroupStyle: css`
+    //   padding: ${token.paddingMD}px;
+    //   background-color: ${token.colorBgBase};
+    //   border-top-left-radius: ${token.borderRadiusLG}px;
+    //   border-top-right-radius: ${token.borderRadiusLG}px;
+    //   display: flex;
+    //   .f-composite-button-group-grid {
+    //     flex: 1;
+    //     &.align-right{
+    //       text-align: right;
+    //     }
+    //   }
+    // `,
+    CompositeTableStyle: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      &.f-composite-table {\n        border-top-left-radius: 0;\n        border-top-right-radius: 0;\n          // padding: ", "px;\n        // padding-top: 0;\n        .spec-pagination {\n          background-color: ", ";\n          //justify-content: flex-start;\n        }\n      }\n    "])), token.paddingMD, token.colorBgBase)
+  };
+});

package/lib/FormComp/FieldComponent/ExtensionField.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-declare const ExtensionField: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<unknown>>;
-export default ExtensionField;
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<unknown>>>;
+export default _default;

package/lib/FormComp/FieldComponent/ExtensionField.js

@@ -24,4 +24,4 @@ var ExtensionField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var MatchTypeComponent = (MatchType === null || MatchType === void 0 ? void 0 : MatchType.component) || null;
   return typeof MatchTypeComponent === 'function' ? /*#__PURE__*/_react.default.createElement(MatchTypeComponent, fieldProps) : MatchTypeComponent;
 });
-var _default = exports.default = ExtensionField;
+var _default = exports.default = /*#__PURE__*/_react.default.memo(ExtensionField);

package/lib/FormComp/FieldComponent/index.js

@@ -148,9 +148,7 @@ var FieldComponent = /*#__PURE__*/_react.default.forwardRef(function (props, ref
       compContent = viewOnly ? value || 0 : /*#__PURE__*/_react.default.createElement(_antd.InputNumber, _extends({
         placeholder: fieldStatus === 'disabled' || defaultProps.disabled ? '' : defaultProps.placeholder || placeholder || '请输入数字'
       }, sortLimitRule, defaultProps, {
-        style: _objectSpread(_objectSpread({}, defaultStyle), {}, {
-          width: '120px'
-        }, defaultProps.style)
+        style: _objectSpread(_objectSpread({}, defaultStyle), defaultProps.style) // 去掉width: '120px',
       }));
       break;
     case 'select':
@@ -289,9 +287,7 @@ var FieldComponent = /*#__PURE__*/_react.default.forwardRef(function (props, ref
         type: type,
         protoConfig: protoConfig
       }) : /*#__PURE__*/_react.default.createElement(_antd.TimePicker, _extends({}, defaultProps, {
-        style: _objectSpread(_objectSpread(_objectSpread({}, defaultStyle), defaultProps.style), {}, {
-          width: 'auto'
-        })
+        style: _objectSpread(_objectSpread({}, defaultStyle), defaultProps.style) // 去掉 width: 'auto'
       }));
       break;
     case 'timePickerRange':

package/lib/StandardContent/ContentHeader.js

@@ -24,42 +24,29 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-var Child = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var _useState = (0, _react.useState)(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    count = _useState2[0],
-    setCount = _useState2[1];
-  (0, _react.useImperativeHandle)(ref, function () {
-    return {
-      getCurrentCount: function getCurrentCount() {
-        return count;
-      }
-    };
-  }, [count]);
-  return /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count);
-});
 var ContentHeader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var _breadcrumb$items;
+  var _breadcrumb$items, _tabs$items;
   var breadcrumb = props.breadcrumb,
     className = props.className,
     title = props.title,
     getClientHeight = props.getClientHeight,
     extra = props.extra,
     prefix = props.prefix,
-    goBack = props.goBack;
+    goBack = props.goBack,
+    tabs = props.tabs;
   var componentName = 'spec-content-header';
   var _useStyle = (0, _Header.default)(componentName),
     _useStyle2 = _slicedToArray(_useStyle, 2),
     wrapSSR = _useStyle2[0],
     hashId = _useStyle2[1];
-  var _useState3 = (0, _react.useState)(false),
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var _useState3 = (0, _react.useState)(0),
     _useState4 = _slicedToArray(_useState3, 2),
-    visible = _useState4[0],
-    setVisible = _useState4[1];
-  var _useState5 = (0, _react.useState)(0),
-    _useState6 = _slicedToArray(_useState5, 2),
-    clientHeight = _useState6[0],
-    setClientHeight = _useState6[1];
+    clientHeight = _useState4[0],
+    setClientHeight = _useState4[1];
   var headerRef = (0, _react.useRef)(null);
   var handleGoBack = function handleGoBack() {
     if (goBack) {
@@ -127,6 +114,11 @@ var ContentHeader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     className: componentName + '-title-name'
   }, " ", title), extra && /*#__PURE__*/_react.default.createElement("div", {
     className: componentName + '-title-extra'
-  }, " ", extra)) : null));
+  }, " ", extra)) : null, (tabs === null || tabs === void 0 || (_tabs$items = tabs.items) === null || _tabs$items === void 0 ? void 0 : _tabs$items.length) && /*#__PURE__*/_react.default.createElement("div", {
+    className: componentName + '-tabs'
+  }, /*#__PURE__*/_react.default.createElement(_antd.Tabs, {
+    type: "card",
+    items: (tabs === null || tabs === void 0 ? void 0 : tabs.items) || []
+  }))));
 });
 var _default = exports.default = ContentHeader;

package/lib/StandardContent/SubfieldContent.js

@@ -75,15 +75,14 @@ var SubfieldContent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     style: style,
     ref: contentRef
   }, proLayoutProps !== null && proLayoutProps !== void 0 && proLayoutProps.header || header ? /*#__PURE__*/_react.default.createElement(_ContentHeader.default, _extends({
-    ref: headerRef,
-    getClientHeight: setHeaderHeight,
+    ref: headerRef
+    // getClientHeight={setHeaderHeight}
+    ,
     className: (0, _classnames.default)('spec-grid-content-header', proLayoutProps !== null && proLayoutProps !== void 0 && (_proLayoutProps$heade = proLayoutProps.header) !== null && _proLayoutProps$heade !== void 0 && _proLayoutProps$heade.fixed || header !== null && header !== void 0 && header.fixed ? 'spec-grid-content-header-fixed' : '')
   }, (proLayoutProps === null || proLayoutProps === void 0 ? void 0 : proLayoutProps.header) || {}, header || {})) : null, /*#__PURE__*/_react.default.createElement("div", {
-    className: 'spec-grid-content-body',
-    style: {
-      height: "calc(100% - ".concat(headerHeight ? headerHeight + 20 : 0, "px")
-    }
-  }, /*#__PURE__*/_react.default.createElement(_DragContent.default, {
+    className: 'spec-grid-content-body'
+    // style={{ height: `calc(100% - ${headerHeight ? headerHeight + 20 : 0}px` }}
+  }, leftSiderNode && /*#__PURE__*/_react.default.createElement(_DragContent.default, {
     direction: leftSiderDragDirection,
     className: (0, _classnames.default)('spec-grid-left', leftSiderClassName),
     style: {
@@ -91,8 +90,12 @@ var SubfieldContent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     },
     moveMaxWidth: leftSiderMoveMaxWidth,
     moveMaxHeight: leftSiderMoveMaxHeight
-  }, leftSiderNode), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'spec-grid-left-cont'
+  }, leftSiderNode)), /*#__PURE__*/_react.default.createElement("div", {
     className: "spec-grid-right"
-  }, children))));
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "spec-grid-right-cont"
+  }, children)))));
 });
 var _default = exports.default = SubfieldContent;

package/lib/StandardContent/WrapperContent.js

@@ -27,7 +27,7 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 var WrapperContent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var _proLayoutProps$heade, _proLayoutProps$heade2;
+  var _proLayoutProps$heade, _proLayoutProps$heade2, _proLayoutProps$heade3;
   var InitFanContext = (0, _react.useContext)(_ConfigContext.FanContext);
   var providerConfig = InitFanContext['SubfieldContent'] || {}; // 使用上下文（全局配置）设置扩展的配置项
   var proLayoutProps = InitFanContext['proLayoutProps'] || {};
@@ -65,21 +65,22 @@ var WrapperContent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
   });
   return wrapSSR( /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(componentName, className, noMargin ? 'has-margin' : '', hashId),
+    className: (0, _classnames.default)(componentName, className, noMargin ? 'has-margin' : '', proLayoutProps !== null && proLayoutProps !== void 0 && (_proLayoutProps$heade = proLayoutProps.header) !== null && _proLayoutProps$heade !== void 0 && _proLayoutProps$heade.fixed || header !== null && header !== void 0 && header.fixed ? componentName + '-fixed' : '', hashId),
     style: style,
     ref: contentRef
-  }, proLayoutProps !== null && proLayoutProps !== void 0 && proLayoutProps.header || header ? /*#__PURE__*/_react.default.createElement(_ContentHeader.default, _extends({
-    getClientHeight: setHeaderHeight,
-    className: (0, _classnames.default)('spec-wrapper-content-header', proLayoutProps !== null && proLayoutProps !== void 0 && (_proLayoutProps$heade = proLayoutProps.header) !== null && _proLayoutProps$heade !== void 0 && _proLayoutProps$heade.fixed || header !== null && header !== void 0 && header.fixed ? 'spec-wrapper-content-header-fixed' : '')
+  }, proLayoutProps !== null && proLayoutProps !== void 0 && proLayoutProps.header || header ? /*#__PURE__*/_react.default.createElement(_ContentHeader.default
+  // getClientHeight={setHeaderHeight}
+  , _extends({
+    className: (0, _classnames.default)('spec-wrapper-content-header', proLayoutProps !== null && proLayoutProps !== void 0 && (_proLayoutProps$heade2 = proLayoutProps.header) !== null && _proLayoutProps$heade2 !== void 0 && _proLayoutProps$heade2.fixed || header !== null && header !== void 0 && header.fixed ? 'spec-wrapper-content-header-fixed' : '')
   }, (proLayoutProps === null || proLayoutProps === void 0 ? void 0 : proLayoutProps.header) || {}, header || {})) : null, light ? /*#__PURE__*/_react.default.createElement("div", {
     className: "spec-wrapper-content-block light-block"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: 'spec-wrapper-content-body'
   }, children)) : /*#__PURE__*/_react.default.createElement("div", {
     className: 'spec-wrapper-content-body',
-    style: proLayoutProps !== null && proLayoutProps !== void 0 && (_proLayoutProps$heade2 = proLayoutProps.header) !== null && _proLayoutProps$heade2 !== void 0 && _proLayoutProps$heade2.fixed || header !== null && header !== void 0 && header.fixed ? {
-      height: "calc(100% - ".concat(headerHeight ? headerHeight + 20 : 0, "px)"),
-      overflow: 'auto'
+    style: proLayoutProps !== null && proLayoutProps !== void 0 && (_proLayoutProps$heade3 = proLayoutProps.header) !== null && _proLayoutProps$heade3 !== void 0 && _proLayoutProps$heade3.fixed || header !== null && header !== void 0 && header.fixed ? {
+      // height: `calc(100% - ${headerHeight ? headerHeight + 20 : 0}px)`,
+      // overflow: 'auto'
     } : {}
   }, children)));
 });

package/lib/StandardContent/styles/Subfield.js

@@ -21,11 +21,18 @@ var SubfieldContentStyleFunc = function SubfieldContentStyleFunc(prefix) {
   return (0, _genStyleHook.createStyleHook)(prefix, function (token) {
     var prefixCls = ".".concat(prefix);
     // console.log(' new TinyColor(token.colorPrimary).setAlpha(0.1)' ,new TinyColor(token.colorPrimary).setAlpha(0.1).toRgbString(), )
-    return [_defineProperty({}, prefixCls, _objectSpread(_objectSpread({}, (0, _index.scrollBar)(token)), {}, {
+    return [_defineProperty({}, prefixCls, _objectSpread(_objectSpread({
+      // height: '500px',
+      background: 'pink',
+      display: 'flex',
+      flexDirection: 'column'
+    }, (0, _index.scrollBar)(token)), {}, {
       '.spec-grid-content-header + .spec-grid-content-body': {
         // height: `calc(100% - 60px)`
       },
       '.spec-grid-content-body': {
+        flex: 1,
+        overflow: 'hidden',
         display: 'flex',
         position: 'relative',
         height: '100%'
@@ -35,17 +42,23 @@ var SubfieldContentStyleFunc = function SubfieldContentStyleFunc(prefix) {
         height: '100%',
         overflow: 'auto'
       }, (0, _index.scrollBar)(token)),
-      '& .spec-grid-left': _objectSpread({
+      '& .spec-grid-left': _objectSpread(_objectSpread({
         height: '100%',
         // overflow: 'hidden',
         overflow: 'auto',
         padding: token.paddingMD,
         background: token.colorBgBase,
         boxSizing: 'border-box'
-      }, (0, _index.scrollBar)(token)),
+      }, (0, _index.scrollBar)(token)), {}, {
+        '+ .spec-grid-right': {
+          marginLeft: token.marginMD
+        },
+        '.spec-grid-left-cont': {
+          marginRight: '-8px'
+        }
+      }),
       '& .spec-grid-right': _objectSpread({
-        padding: 0,
-        marginLeft: token.marginMD
+        padding: 0
       }, (0, _index.scrollBar)(token))
     }))];
   }, prepareComponentToken // 当前组件扩展的变量

package/lib/StandardContent/styles/Wrapper.js

@@ -20,7 +20,7 @@ var WrapperContentStyleFunc = function WrapperContentStyleFunc(prefix) {
   };
   return (0, _genStyleHook.createStyleHook)(prefix, function (token) {
     var prefixCls = ".".concat(prefix);
-    return [_defineProperty(_defineProperty(_defineProperty({}, prefixCls, _objectSpread(_objectSpread({
+    return [_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, prefixCls, _objectSpread(_objectSpread({
       position: 'relative',
       // padding: token.paddingMD,
       // margin: -token.marginMD,
@@ -32,7 +32,18 @@ var WrapperContentStyleFunc = function WrapperContentStyleFunc(prefix) {
         padding: token.paddingMD,
         background: token.colorBgBase
       }
-    })), '.spec-wrapper-content-header', {}), '.spec-wrapper-content-body', {})];
+    })), '&.spec-wrapper-content-fixed', {
+      display: 'flex',
+      flexDirection: 'column',
+      '.spec-wrapper-content-header': {
+        width: '100%'
+      },
+      '.spec-wrapper-content-body': {
+        width: '100%',
+        flex: 1,
+        overflow: 'auto'
+      }
+    }), '.spec-wrapper-content-header', {}), '.spec-wrapper-content-body', {})];
   }, prepareComponentToken // 当前组件扩展的变量
   );
 };

package/lib/StandardContent/styles/index.less

@@ -59,10 +59,16 @@
   .spec-grid-right {
     flex: 1;
     height: 100%;
+    overflow: auto;
     //height: calc(100vh - @layout-header-height);
     //padding: @padding-lg;
-    overflow-y: auto;
-    overflow-x: hidden;
+    //overflow-y: auto;
+    //overflow-x: auto;
     //margin-left: 200px
   }
+
+  .spec-grid-right-cont {
+    width: 100%;
+    overflow: auto;
+  }
 }