fan-standard-comp 4.1.2 → 4.1.4

package/es/CompositeTable/index.js

@@ -0,0 +1,211 @@
+/*
+/!**
+ * 组合组件；配置"筛选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
+*/

package/es/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/es/CompositeTable/index.style.js

@@ -0,0 +1,27 @@
+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) } })); }
+import { createStyles } from 'antd-style';
+export var useStyles = 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/es/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/es/FormComp/FieldComponent/ExtensionField.js

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

package/es/FormComp/FieldComponent/index.js

@@ -141,9 +141,7 @@ var FieldComponent = /*#__PURE__*/React.forwardRef(function (props, ref) {
       compContent = viewOnly ? value || 0 : /*#__PURE__*/React.createElement(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':
@@ -282,9 +280,7 @@ var FieldComponent = /*#__PURE__*/React.forwardRef(function (props, ref) {
         type: type,
         protoConfig: protoConfig
       }) : /*#__PURE__*/React.createElement(TimePicker, _extends({}, defaultProps, {
-        style: _objectSpread(_objectSpread(_objectSpread({}, defaultStyle), defaultProps.style), {}, {
-          width: 'auto'
-        })
+        style: _objectSpread(_objectSpread({}, defaultStyle), defaultProps.style) // 去掉 width: 'auto'
       }));
       break;
     case 'timePickerRange':

package/es/StandardContent/ContentHeader.js

@@ -11,46 +11,33 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 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; }
 import React, { forwardRef, useImperativeHandle, useRef, useEffect, useState } from 'react';
-import { Breadcrumb, Button } from "antd";
+import { Breadcrumb, Button, Tabs } from "antd";
 import classNames from 'classnames';
 import useStyle from "./styles/Header";
 import SpecIcon from "../SpecIcon/index";
-var Child = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    count = _useState2[0],
-    setCount = _useState2[1];
-  useImperativeHandle(ref, function () {
-    return {
-      getCurrentCount: function getCurrentCount() {
-        return count;
-      }
-    };
-  }, [count]);
-  return /*#__PURE__*/React.createElement("div", null, "Count: ", count);
-});
 var ContentHeader = /*#__PURE__*/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 = useStyle(componentName),
     _useStyle2 = _slicedToArray(_useStyle, 2),
     wrapSSR = _useStyle2[0],
     hashId = _useStyle2[1];
-  var _useState3 = useState(false),
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var _useState3 = useState(0),
     _useState4 = _slicedToArray(_useState3, 2),
-    visible = _useState4[0],
-    setVisible = _useState4[1];
-  var _useState5 = useState(0),
-    _useState6 = _slicedToArray(_useState5, 2),
-    clientHeight = _useState6[0],
-    setClientHeight = _useState6[1];
+    clientHeight = _useState4[0],
+    setClientHeight = _useState4[1];
   var headerRef = useRef(null);
   var handleGoBack = function handleGoBack() {
     if (goBack) {
@@ -118,6 +105,11 @@ var ContentHeader = /*#__PURE__*/forwardRef(function (props, ref) {
     className: componentName + '-title-name'
   }, " ", title), extra && /*#__PURE__*/React.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.createElement("div", {
+    className: componentName + '-tabs'
+  }, /*#__PURE__*/React.createElement(Tabs, {
+    type: "card",
+    items: (tabs === null || tabs === void 0 ? void 0 : tabs.items) || []
+  }))));
 });
 export default ContentHeader;

package/es/StandardContent/SubfieldContent.js

@@ -67,15 +67,14 @@ var SubfieldContent = /*#__PURE__*/forwardRef(function (props, ref) {
     style: style,
     ref: contentRef
   }, proLayoutProps !== null && proLayoutProps !== void 0 && proLayoutProps.header || header ? /*#__PURE__*/React.createElement(ContentHeader, _extends({
-    ref: headerRef,
-    getClientHeight: setHeaderHeight,
+    ref: headerRef
+    // getClientHeight={setHeaderHeight}
+    ,
     className: classNames('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.createElement("div", {
-    className: 'spec-grid-content-body',
-    style: {
-      height: "calc(100% - ".concat(headerHeight ? headerHeight + 20 : 0, "px")
-    }
-  }, /*#__PURE__*/React.createElement(DragContent, {
+    className: 'spec-grid-content-body'
+    // style={{ height: `calc(100% - ${headerHeight ? headerHeight + 20 : 0}px` }}
+  }, leftSiderNode && /*#__PURE__*/React.createElement(DragContent, {
     direction: leftSiderDragDirection,
     className: classNames('spec-grid-left', leftSiderClassName),
     style: {
@@ -83,8 +82,12 @@ var SubfieldContent = /*#__PURE__*/forwardRef(function (props, ref) {
     },
     moveMaxWidth: leftSiderMoveMaxWidth,
     moveMaxHeight: leftSiderMoveMaxHeight
-  }, leftSiderNode), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: 'spec-grid-left-cont'
+  }, leftSiderNode)), /*#__PURE__*/React.createElement("div", {
     className: "spec-grid-right"
-  }, children))));
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "spec-grid-right-cont"
+  }, children)))));
 });
 export default SubfieldContent;

package/es/StandardContent/WrapperContent.js

@@ -18,7 +18,7 @@ import useStyle from "./styles/Wrapper";
 import { FanContext } from "../ConfigContext";
 import ContentHeader from "./ContentHeader";
 var WrapperContent = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _proLayoutProps$heade, _proLayoutProps$heade2;
+  var _proLayoutProps$heade, _proLayoutProps$heade2, _proLayoutProps$heade3;
   var InitFanContext = useContext(FanContext);
   var providerConfig = InitFanContext['SubfieldContent'] || {}; // 使用上下文（全局配置）设置扩展的配置项
   var proLayoutProps = InitFanContext['proLayoutProps'] || {};
@@ -56,21 +56,22 @@ var WrapperContent = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   });
   return wrapSSR( /*#__PURE__*/React.createElement("div", {
-    className: classNames(componentName, className, noMargin ? 'has-margin' : '', hashId),
+    className: classNames(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.createElement(ContentHeader, _extends({
-    getClientHeight: setHeaderHeight,
-    className: classNames('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.createElement(ContentHeader
+  // getClientHeight={setHeaderHeight}
+  , _extends({
+    className: classNames('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.createElement("div", {
     className: "spec-wrapper-content-block light-block"
   }, /*#__PURE__*/React.createElement("div", {
     className: 'spec-wrapper-content-body'
   }, children)) : /*#__PURE__*/React.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/es/StandardContent/styles/Subfield.js

@@ -15,11 +15,18 @@ var SubfieldContentStyleFunc = function SubfieldContentStyleFunc(prefix) {
   return 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({}, scrollBar(token)), {}, {
+    return [_defineProperty({}, prefixCls, _objectSpread(_objectSpread({
+      // height: '500px',
+      background: 'pink',
+      display: 'flex',
+      flexDirection: 'column'
+    }, 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%'
@@ -29,17 +36,23 @@ var SubfieldContentStyleFunc = function SubfieldContentStyleFunc(prefix) {
         height: '100%',
         overflow: 'auto'
       }, 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'
-      }, scrollBar(token)),
+      }, 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
       }, scrollBar(token))
     }))];
   }, prepareComponentToken // 当前组件扩展的变量

package/es/StandardContent/styles/Wrapper.js

@@ -14,7 +14,7 @@ var WrapperContentStyleFunc = function WrapperContentStyleFunc(prefix) {
   };
   return 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,
@@ -26,7 +26,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/es/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;
+  }
 }