@teamix/pro 1.5.24 → 1.5.26

package/es/table/utils/genAutoWidthColumns.js

@@ -0,0 +1,327 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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; }
+import React, { createRef } from 'react';
+import { getTargetValue } from '@teamix/utils';
+import { renderCell } from './pureColumnRender';
+import { renderColumnsTitle } from './columnRender';
+import { ProActionGroup } from '../../actions';
+import { getProFieldWidth } from '@teamix/pro-field';
+import { renderCellSmartWidth } from './columnRender';
+// 最大宽度
+var maxColumnWidth = 600;
+// 最小宽度
+var minColumnWidth = 48;
+// 每个列可以缩减的最大宽度
+var columnShrinkMaxWidth = 100;
+/**
+ * @param fileteredColumns
+ * @param ref
+ * @param data
+ * @returns
+ */
+export function genAutoWidthColumns(fileteredColumns, ref, data, size, useRowSelection, actionColumnRef) {
+  if (!ref.current) {
+    return fileteredColumns;
+  }
+  var hasLockFlag = false;
+  var dom = ref.current;
+  var actionColumnDom = actionColumnRef === null || actionColumnRef === void 0 ? void 0 : actionColumnRef.current;
+  var childNodes = dom.children;
+  var finalColumns = [];
+  fileteredColumns.forEach(function (column, index) {
+    var render = column.render,
+      _column$valueType = column.valueType,
+      valueType = _column$valueType === void 0 ? 'text' : _column$valueType,
+      _column$autoWidth = column.autoWidth,
+      autoWidth = _column$autoWidth === void 0 ? true : _column$autoWidth,
+      actionSchema = column.actionSchema,
+      sortable = column.sortable,
+      lock = column.lock;
+    if (lock) {
+      hasLockFlag = true;
+    }
+    //@ts-ignore
+    var type = render === null || render === void 0 ? void 0 : render.type;
+    var finalType = type || valueType || '';
+    var shrink = fieldTypeShrink[finalType];
+    column.shrink = column.shrink || (shrink !== undefined ? shrink : 1);
+    //@ts-ignore
+    // if (!autoWidth) {
+    //   finalColumns.push(column);
+    //   return;
+    // }
+    if (actionSchema) {
+      // TODO 操作列暂时未处理，但是应该根据actionSchema的数量直接推测出操作列的宽度
+      // console.log('column', column);
+      column.shrink = 0;
+      // column.width = 280;
+      // console.log(
+      //   'actionColumnDom',
+      //   actionColumnDom?.childNodes[0].scrollWidth,
+      // );
+      if (actionColumnDom === null || actionColumnDom === void 0 ? void 0 : actionColumnDom.childNodes[0]) {
+        //@ts-ignore
+        var width = actionColumnDom === null || actionColumnDom === void 0 ? void 0 : actionColumnDom.childNodes[0].scrollWidth;
+        if (width >= 280) {
+          width = 280;
+        }
+        column.width = defaultPaddingFixer(width, size, false);
+      }
+      finalColumns.push(column);
+      return;
+    }
+    // @ts-ignore
+    var titleWidth = childNodes[index].children[0].scrollWidth;
+    // @ts-ignore
+    if (fixedWidthTypeList[finalType]) {
+      // console.log(
+      //   'fixedWidthTypeList[finalType]',
+      //   fixedWidthTypeList[finalType],
+      // );
+      // 固定宽度
+      column.width = defaultPaddingFixer(
+      // @ts-ignore
+      Math.max(titleWidth, fixedWidthTypeList[finalType]), size, index === 0 && useRowSelection);
+      // @ts-ignore
+    } else if (computeableWidthTypeList[finalType]) {
+      // 可计算宽度
+      column.width = defaultPaddingFixer(
+      // @ts-ignore
+      Math.max(titleWidth, computeableWidthTypeList[finalType](data, render)), size, index === 0 && useRowSelection);
+    } else {
+      // 直接根据 dom 计算
+      column.width = defaultPaddingFixer(Math.max(titleWidth,
+      // @ts-ignore
+      calcWidthWithParentDOM(childNodes[index], column.shrink)), size, index === 0 && useRowSelection);
+    }
+    if (index === 0) {
+      // 首列不会被挤占
+      column.shrink = 0;
+    }
+    finalColumns.push(column);
+  });
+  if (!hasLockFlag) {
+    // 如果没有锁列的情况，需要将所有列放到一屏内，此时需要将所有列放到一起计算一次
+    var containerWidth = dom.offsetWidth;
+    var comboColumns = calcMultiColumnLength(finalColumns, useRowSelection ? containerWidth - 50 : containerWidth);
+    return comboColumns;
+  }
+  return finalColumns;
+}
+export var shadowContainer = function shadowContainer(props) {
+  var ref = /*#__PURE__*/createRef();
+  var columns = props.columns,
+    data = props.data,
+    shadowContainerRef = props.shadowContainerRef;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: shadowContainerRef,
+    className: "teamix-pro-table-shadow-container"
+  }, columns.map(function (column, index) {
+    var dataIndex = column.dataIndex,
+      valueType = column.valueType;
+    if (!(column === null || column === void 0 ? void 0 : column.actionSchema)) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "teamix-pro-table-shadow-container-columns",
+        key: index
+      }, /*#__PURE__*/React.createElement("div", null, renderColumnsTitle(column, ref)),
+      //@ts-ignore
+      !computeableWidthTypeList[valueType] &&
+      //@ts-ignore
+      !fixedWidthTypeList[valueType] && data.map(function (item, index) {
+        // @ts-ignore
+        column.smartWidth = renderCellSmartWidth(getValueFromRecord(dataIndex, item), column, index, item);
+        return renderCell(getValueFromRecord(dataIndex, item), column, index, item);
+      }));
+    }
+  }));
+};
+export var shadowActionColumnContainer = function shadowActionColumnContainer(columns, shadowActionColumnContainerRef) {
+  var actionColumn = columns.find(function (column) {
+    return column === null || column === void 0 ? void 0 : column.actionSchema;
+  });
+  if (actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionSchema) {
+    return /*#__PURE__*/React.createElement("div", {
+      ref: shadowActionColumnContainerRef,
+      className: "teamix-pro-table-action-column-shadow-container"
+    }, /*#__PURE__*/React.createElement(ProActionGroup, _objectSpread(_objectSpread({
+      type: "text"
+    }, actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionSchema), {}, {
+      context: _objectSpread({}, actionColumn === null || actionColumn === void 0 ? void 0 : actionColumn.actionSchema.context)
+    })));
+  }
+};
+// 计算操作列的宽度
+function getValueFromRecord(dataIndex, record) {
+  if (!dataIndex) {
+    return null;
+  }
+  if (Array.isArray(dataIndex)) {
+    var value = dataIndex.map(function (item) {
+      return getTargetValue("{{".concat(item, "}}"), _objectSpread(_objectSpread({}, record), {}, {
+        record: record
+      }));
+    });
+    return value;
+  } else {
+    var result = record;
+    var array = dataIndex.split('.');
+    array.forEach(function (item) {
+      return result = result ? result[item] : undefined;
+    });
+    return result;
+  }
+}
+// TODO 某些可以直接算出结果的 profield 类型白名单，待补充，每个类型下支持一个函数，用当前值和渲染类型算出一个结果
+export var computeableWidthTypeList = {
+  dateTime: function dateTime(data, render) {
+    var result = getProFieldWidth('dateTime', render);
+    // @ts-ignore
+    return (result === null || result === void 0 ? void 0 : result.minWidth) || 0;
+  }
+};
+// TODO 某些固定宽度的 profield 类型白名单，这里的数据可能需要综合考虑 dataFold 和 render.rows
+export var fixedWidthTypeList = {
+  // 时间日期
+  // dateTime: 142,
+  // dateMonth: 74, // 60
+  // dateWeek: 74,
+  // date: 100,
+  // dateYear: 46,
+  // dateQuarter: 64,
+  // dateRange: 212,
+  dateWeekRange: 156,
+  dateMonthRange: 156,
+  dateYearRange: 102,
+  dateQuarterRange: 136,
+  dateTimeRange: 326,
+  time: 38,
+  timeRange: 124
+};
+// TODO 不同类型的 profield 的 shrink，0表示不可以省略号，数字越大越容易被挤占空间
+export var fieldTypeShrink = {
+  tag: 0,
+  statusTag: 0,
+  statusIconTag: 0,
+  circle: 0,
+  rank: 0,
+  progress: 0,
+  money: 0,
+  number: 0,
+  percent: 0,
+  dateTime: 0,
+  ip: 0
+};
+function calcWidthWithParentDOM(dom, shrink) {
+  var childNodes = _toConsumableArray(dom.children);
+  childNodes.shift();
+  return calcSingleColumnLength(childNodes.map(function (node) {
+    return node.scrollWidth;
+  }), shrink);
+}
+function calcSingleColumnLength() {
+  var list = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var shrink = arguments.length > 1 ? arguments[1] : undefined;
+  if (shrink === 0) {
+    return Math.ceil(Math.max.apply(null, list));
+  }
+  return getConfidence90UpperBound(list);
+}
+/**
+ * 根据所有列的宽度和权重，结合总宽度，计算出各个列合适的宽度
+ * 目前算法：
+ * 当前需要的总宽度-总宽度=需要降低的宽度
+ * 从后往前，将shrink不为0的列，降低一些宽度到最小宽度
+ * 最小宽度可以用百分比去算
+ * TODO 当前shrink只用了0，其他的权重也要考虑一下
+ * @param list
+ * @param max
+ * @returns
+ */
+function calcMultiColumnLength() {
+  var list = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var max = arguments.length > 1 ? arguments[1] : undefined;
+  var result = _toConsumableArray(list);
+  var targetList = [];
+  var needWidth = 0;
+  var canShrink = 0;
+  list.forEach(function (item) {
+    //@ts-ignore
+    needWidth += item.width;
+    if (item.shrink !== 0) {
+      targetList.push(item);
+      //@ts-ignore
+      canShrink += Math.min(item.width - minColumnWidth, columnShrinkMaxWidth);
+    }
+  });
+  var widthToBeRemoved = needWidth - max;
+  if (widthToBeRemoved <= 0) {
+    return list;
+  }
+  // TODO 超过的特别多直接加锁列，这个逻辑怎么设计
+  // 目前用可以缩小的宽度加起来比较一下
+  if (canShrink < widthToBeRemoved) {
+    list[0].lock = 'left';
+    if (list[list.length - 1].actionSchema) {
+      list[list.length - 1].lock = 'right';
+    }
+    return list;
+  }
+  //@ts-ignore
+  var sortedList = targetList.sort(function (a, b) {
+    return a.width - b.width;
+  });
+  var shrinkedWidth = 0;
+  for (var i = sortedList.length - 1; i >= 0; i--) {
+    if (shrinkedWidth >= widthToBeRemoved) {
+      break;
+    }
+    var singleShrinkedWidth = Math.min(sortedList[i].width - minColumnWidth, columnShrinkMaxWidth, widthToBeRemoved - shrinkedWidth);
+    sortedList[i].width = sortedList[i].width - singleShrinkedWidth;
+    shrinkedWidth += singleShrinkedWidth;
+  }
+  return result;
+}
+/**
+ * 修正内容放在table中默认的padding
+ * @param width
+ * @returns
+ */
+function defaultPaddingFixer(width) {
+  var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'medium';
+  var half = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  return size === 'medium' ? width + (half ? 16 : 32) + 0.5 : width + (half ? 8 : 16) + 0.5;
+}
+function sum() {
+  var list = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return list.reduce(function (a, b) {
+    return a + b;
+  });
+}
+/**
+ * 假设样本正态分布，取 90% 置信区间的上界
+ * 当上界与最大值差距不大(目前是20)的时候，直接用最大值
+ * TODO 这里没考虑是否可以直接用标准差做评判依据，如标准差过大时，直接排序并展示前90%，或标准差很小时直接用最大值
+ * TODO 这里极限情况是不是会挂？ 如：长度为9个100和2个10000，估计会挂，是否置信区间这个不靠谱。。。最差情况就直接展示90%的数据算了
+ */
+function getConfidence90UpperBound() {
+  var list = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var max = Math.max.apply(null, list);
+  var length = list.length;
+  var mean = sum(list) / length;
+  var std = Math.sqrt(sum(list.map(function (n) {
+    return (n - mean) * (n - mean);
+  })) / length);
+  var interval = length > 30 ? 1.65 * std / Math.sqrt(length) : 2.2622 * std / Math.sqrt(length);
+  var bound = Math.ceil(mean + interval);
+  if (max - bound < 20) {
+    return Math.min(max, maxColumnWidth);
+  }
+  return Math.min(bound, maxColumnWidth);
+}

package/es/table/xconsole.scss

@@ -0,0 +1,6 @@
+.theme-xconsole {
+  .next-menu-item-inner {
+    display: flex;
+    align-items: center;
+  }
+}

package/lib/form/Components/FormItem2/index.js

@@ -153,8 +153,7 @@ var BaseItem = function BaseItem(props) {
   }
   var prefixCls = (0, _builtins__.usePrefixCls)('formily-item', props);
   var prefix = (0, _builtins__.usePrefixCls)();
-  console.log('feedbackLayout', feedbackLayout);
-  var formatChildren = feedbackLayout === 'popover' || feedbackLayout === 'hover-popover' ? /*#__PURE__*/_react.default.createElement(_components.Balloon, _objectSpread({
+  var formatChildren = (feedbackLayout === 'popover' || feedbackLayout === 'hover-popover') && !!feedbackText ? /*#__PURE__*/_react.default.createElement(_components.Balloon, _objectSpread({
     needAdjust: true,
     align: "t",
     closable: false,

package/lib/index.d.ts

@@ -30,5 +30,5 @@ export * from './sidebar';
 export * from './utils';
 export * from './timeline';
 export * from './image';
-declare const version = "1.5.24";
+declare const version = "1.5.26";
 export { version, ProAction, ProCard, ProField, ProForm, ProInfo, ProPageContainer, ProPageHeader, ProSkeleton, ProTable, ProSidebar, ProTimeline, TeamixIcon, ProImage, hooks, nocode, templates, utils, };

package/lib/index.js

@@ -299,7 +299,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 if (!((_window = window) === null || _window === void 0 ? void 0 : _window.TEAMIXPRO_WITHOUT_ICON)) {
   _icon.default.setConfig(_utils.default.getTeamixIconConfig());
 }
-var version = '1.5.24';
+var version = '1.5.26';
 // By TeamixTest
 exports.version = version;
 window.postMessage({

package/lib/table/components/ToolBar/index.js

@@ -176,7 +176,7 @@ var ToolBar = function ToolBar(props) {
       flat: flat
     }),
     ref: toolBarRef
-  }, !flat && !fullScreenState ? renderUnFlatShape() : renderFlatShape, /*#__PURE__*/_react.default.createElement("div", {
+  }, !flat && !fullScreenState ? renderUnFlatShape() : renderFlatShape, toolBarAutoWidth && /*#__PURE__*/_react.default.createElement("div", {
     className: cls('shadow'),
     ref: toolBarContentRef
   }, renderFlatShape));

package/lib/table/index.js

@@ -22,6 +22,7 @@ var _proField = require("@teamix/pro-field");
 var _actions = require("../actions");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _pageContainer = _interopRequireDefault(require("../page-container"));
+var _genAutoWidthColumns = require("./utils/genAutoWidthColumns");
 var _lodash = _interopRequireDefault(require("lodash.debounce"));
 var _CardView = _interopRequireDefault(require("./components/CardView"));
 var _hooks = require("@teamix/hooks");
@@ -38,7 +39,7 @@ Object.keys(_typing).forEach(function (key) {
     }
   });
 });
-var _excluded = ["header", "className", "tableClassName", "mainAction", "extra", "dataFilter", "afterDataFilter", "toolBar", "columns", "useRowSelection", "rowSelection", "onChangeRowSelection", "getRowSelection", "primaryKey", "footerAction", "footer", "url", "pageKey", "pageSizeKey", "method", "params", "formatSort", "formatParams", "formatResult", "requestConfig", "requestWhenMount", "showPagination", "pageSizeList", "responsivePaginationType", "showSkeleton", "skeletonSize", "actionRef", "dataSource", "filterDebounce", "footerSuction", "autoRefresh", "autoRefreshProps", "customRequest", "filterColumnType", "defaultFilterParams", "reserveSelectedRecords", "size", "disableSelectAll", "context", "fixedTableBody", "isTree", "toolBarAutoWidth", "data-teamix-spm", "switchCardView", "cardViewProps", "defaultView", "emptyProps", "bindUrlProps", "bindUrl", "autoRedirect", "useMaxData"],
+var _excluded = ["header", "className", "tableClassName", "mainAction", "extra", "dataFilter", "afterDataFilter", "toolBar", "columns", "useRowSelection", "rowSelection", "onChangeRowSelection", "getRowSelection", "primaryKey", "footerAction", "footer", "url", "pageKey", "pageSizeKey", "method", "params", "formatSort", "formatParams", "formatResult", "requestConfig", "requestWhenMount", "showPagination", "pageSizeList", "responsivePaginationType", "showSkeleton", "skeletonSize", "actionRef", "dataSource", "filterDebounce", "footerSuction", "autoRefresh", "autoRefreshProps", "customRequest", "filterColumnType", "defaultFilterParams", "reserveSelectedRecords", "size", "disableSelectAll", "context", "autoWidth", "fixedTableBody", "isTree", "toolBarAutoWidth", "data-teamix-spm", "switchCardView", "cardViewProps", "defaultView", "emptyProps", "bindUrlProps", "bindUrl", "autoRedirect", "useMaxData"],
   _excluded2 = ["onChange"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -167,6 +168,8 @@ var ProTable = function ProTable(props) {
     propsSize = _props$size === void 0 ? 'medium' : _props$size,
     disableSelectAll = props.disableSelectAll,
     context = props.context,
+    _props$autoWidth = props.autoWidth,
+    autoWidth = _props$autoWidth === void 0 ? false : _props$autoWidth,
     _props$fixedTableBody = props.fixedTableBody,
     fixedTableBody = _props$fixedTableBody === void 0 ? false : _props$fixedTableBody,
     isTree = props.isTree,
@@ -230,6 +233,14 @@ var ProTable = function ProTable(props) {
     _useState16 = _slicedToArray(_useState15, 2),
     filteredColumns = _useState16[0],
     setFilteredColumns = _useState16[1];
+  // 判断是否有操作列，有的话则渲染一个 shadow dom
+  var hasActionColumn = false;
+  if (autoWidth) {
+    hasActionColumn = filteredColumns.some(function (column) {
+      var _column$actionSchema, _column$actionSchema$;
+      return (column === null || column === void 0 ? void 0 : column.actionSchema) && ((_column$actionSchema = column.actionSchema) === null || _column$actionSchema === void 0 ? void 0 : (_column$actionSchema$ = _column$actionSchema.actions) === null || _column$actionSchema$ === void 0 ? void 0 : _column$actionSchema$.length) > 0;
+    });
+  }
   var _useState17 = (0, _react.useState)(propsSize),
     _useState18 = _slicedToArray(_useState17, 2),
     size = _useState18[0],
@@ -238,6 +249,13 @@ var ProTable = function ProTable(props) {
     _useState20 = _slicedToArray(_useState19, 2),
     showLoading = _useState20[0],
     setShowLoading = _useState20[1];
+  // 自动计算列宽需要的一些hook
+  var _useState21 = (0, _react.useState)(false),
+    _useState22 = _slicedToArray(_useState21, 2),
+    showShadowContainer = _useState22[0],
+    setShowShadowContainer = _useState22[1];
+  var shadowContainerRef = (0, _react.useRef)(null);
+  var shadowActionColumnContainerRef = (0, _react.useRef)(null);
   // 表格内部用作存储的 Ref，标识 Table 组件是否被第一次渲染。用作 useUrlState filter 第一次渲染时使用 state 数据请求
   var dataRef = (0, _react.useRef)({
     flag: true
@@ -258,19 +276,19 @@ var ProTable = function ProTable(props) {
   }, [currentPage, pageSize, urlState]);
   // 存储能够被 on 监听到的 ProTable 状态
   // 因为只做存储用。不需要更新视图以及需要同步更改。所以不使用 setState 更新
-  var _useState21 = (0, _react.useState)({
+  var _useState23 = (0, _react.useState)({
       fullScreenState: false,
       filterRules: {},
       filterColumns: []
     }),
-    _useState22 = _slicedToArray(_useState21, 1),
-    actionRefState = _useState22[0];
+    _useState24 = _slicedToArray(_useState23, 1),
+    actionRefState = _useState24[0];
   // 存储 on 监听事件
-  var _useState23 = (0, _react.useState)({
+  var _useState25 = (0, _react.useState)({
       fullScreenState: {}
     }),
-    _useState24 = _slicedToArray(_useState23, 1),
-    actionRefCallback = _useState24[0];
+    _useState26 = _slicedToArray(_useState25, 1),
+    actionRefCallback = _useState26[0];
   // 存储定时器 id
   var autoRefreshTimerRef = (0, _react.useRef)();
   var onResize = null;
@@ -382,20 +400,20 @@ var ProTable = function ProTable(props) {
     }, 50);
   };
   // header 区域高度。用作全屏计算吸顶吸底高度。默认不做计算
-  var _useState25 = (0, _react.useState)(0),
-    _useState26 = _slicedToArray(_useState25, 2),
-    headerHeight = _useState26[0],
-    setHeaderHeight = _useState26[1];
-  // 全屏显示 className
-  var _useState27 = (0, _react.useState)(false),
+  var _useState27 = (0, _react.useState)(0),
     _useState28 = _slicedToArray(_useState27, 2),
-    fullscreenState = _useState28[0],
-    setFullscreenState = _useState28[1];
-  // 切换视角
-  var _useState29 = (0, _react.useState)(defaultView !== null && defaultView !== void 0 ? defaultView : 'table'),
+    headerHeight = _useState28[0],
+    setHeaderHeight = _useState28[1];
+  // 全屏显示 className
+  var _useState29 = (0, _react.useState)(false),
     _useState30 = _slicedToArray(_useState29, 2),
-    switchViewState = _useState30[0],
-    setSwitchViewState = _useState30[1];
+    fullscreenState = _useState30[0],
+    setFullscreenState = _useState30[1];
+  // 切换视角
+  var _useState31 = (0, _react.useState)(defaultView !== null && defaultView !== void 0 ? defaultView : 'table'),
+    _useState32 = _slicedToArray(_useState31, 2),
+    switchViewState = _useState32[0],
+    setSwitchViewState = _useState32[1];
   // 切换全屏搜索开关
   var filterEnableRef = (0, _react.useRef)({
     fullscreen: false,
@@ -415,10 +433,10 @@ var ProTable = function ProTable(props) {
   var dataFilterFormRef = !fullscreenState ? normalDataFilterFormRef : fullscreenDataFilterFormRef;
   // let dataFilterForm = dataFilterFormRef.current;
   // 整个内容区是否超过一屏。用于表格在非全屏模式下的吸底
-  var _useState31 = (0, _react.useState)(false),
-    _useState32 = _slicedToArray(_useState31, 2),
-    footerSuctionState = _useState32[0],
-    setFooterSuctionState = _useState32[1];
+  var _useState33 = (0, _react.useState)(false),
+    _useState34 = _slicedToArray(_useState33, 2),
+    footerSuctionState = _useState34[0],
+    setFooterSuctionState = _useState34[1];
   // TODO 获取内容区是否超出一屏（暂时仅支持全家桶）
   var getFooterSuctionState = function getFooterSuctionState() {
     if (!footerSuction) {
@@ -569,6 +587,9 @@ var ProTable = function ProTable(props) {
       setFullscreenState(state);
       getHeaderHeight(state);
       actionRef === null || actionRef === void 0 ? void 0 : (_actionRef$current2 = actionRef.current) === null || _actionRef$current2 === void 0 ? void 0 : (_actionRef$current2$s = _actionRef$current2.setState) === null || _actionRef$current2$s === void 0 ? void 0 : _actionRef$current2$s.call(_actionRef$current2, 'fullScreenState', state);
+      if (autoWidth) {
+        reGenFilteredColumnsByAutoWidth();
+      }
       return state;
     },
     setColumn: function setColumn(newColumns) {
@@ -580,10 +601,16 @@ var ProTable = function ProTable(props) {
       if (update) {
         (0, _utils2.emit)('refreshFilterState', newColumns);
       }
+      if (autoWidth) {
+        reGenFilteredColumnsByAutoWidth();
+      }
     },
     size: size,
     setSize: function setSize(mode) {
       _setSize(mode);
+      if (autoWidth) {
+        reGenFilteredColumnsByAutoWidth();
+      }
     },
     refresh: function refresh(params) {
       // card视角的刷新等于重新请求
@@ -693,6 +720,21 @@ var ProTable = function ProTable(props) {
   if (propsActionRef) {
     propsActionRef.current = actionRef.current;
   }
+  function reGenFilteredColumnsByAutoWidth() {
+    if (!autoWidth) {
+      return;
+    }
+    setShowShadowContainer(true);
+    var authWidthedColumns = (0, _genAutoWidthColumns.genAutoWidthColumns)(filteredColumns, shadowContainerRef, data, size, useRowSelection, shadowActionColumnContainerRef);
+    setFilteredColumns(authWidthedColumns);
+    // 移除 shadow dom
+    // setTimeout(() => {
+    //   if (document.querySelector('.teamix-pro-table-shadow-container')) {
+    //     document.querySelector('.teamix-pro-table-shadow-container')?.remove();
+    //   }
+    // }, 0);
+  }
+
   function onFormatResult(next) {
     props.onFormatResult && props.onFormatResult(next);
     // 如果开启了 autoRedirect 当当前页数不为1，并且data为空的时候，重定向到第一页
@@ -732,6 +774,9 @@ var ProTable = function ProTable(props) {
       setTotal(total + (next.total || ((_next$data3 = next.data) === null || _next$data3 === void 0 ? void 0 : _next$data3.length)));
     }
     setShowSkeleton(false);
+    if (autoWidth) {
+      reGenFilteredColumnsByAutoWidth();
+    }
   }
   // 请求表格数据工具函数
   var getData = (0, _utils.useRequest)(function (params) {
@@ -878,6 +923,9 @@ var ProTable = function ProTable(props) {
               _setData([].concat(_toConsumableArray(data), _toConsumableArray(dataRes || [])));
               setTotal(total + (totalRes || (dataRes === null || dataRes === void 0 ? void 0 : dataRes.length)));
             }
+            if (autoWidth) {
+              reGenFilteredColumnsByAutoWidth();
+            }
             setShowSkeleton(false);
             setCustomTableLoading(false);
           }
@@ -1168,7 +1216,11 @@ var ProTable = function ProTable(props) {
         // 'footer-suction': footerSuctionState && footerSuction,
       }),
       ref: tableRef
-    }, renderTable(isFullScreen), fixFooterState && /*#__PURE__*/_react.default.createElement(_pageContainer.default.FixedFooter, null, renderFooter()), !fixFooterState && renderFooter());
+    }, showShadowContainer && (0, _genAutoWidthColumns.shadowContainer)({
+      columns: filteredColumns,
+      data: data,
+      shadowContainerRef: shadowContainerRef
+    }), hasActionColumn && (0, _genAutoWidthColumns.shadowActionColumnContainer)(filteredColumns, shadowActionColumnContainerRef), renderTable(isFullScreen), fixFooterState && /*#__PURE__*/_react.default.createElement(_pageContainer.default.FixedFooter, null, renderFooter()), !fixFooterState && renderFooter());
   });
 };
 var _default = ProTable;

package/lib/table/index.scss

@@ -1,3 +1,4 @@
+@import "xconsole";
 $prefix: 'teamix-pro-table';
 $fullscreenPadding: 24px;
 
@@ -77,6 +78,32 @@ $fullscreenPadding: 24px;
       transition: all 0.1s;
     }
   }
+  &-shadow-container {
+    overflow: hidden;
+    position: absolute;
+    right: 0;
+    left: 0;
+    top: 0;
+    visibility: hidden;
+    pointer-events: none;
+  }
+  &-shadow-container-columns {
+    display: flex;
+    >* {
+      flex-shrink: 0;
+    }
+  }
+  &-action-column-shadow-container {
+    overflow: hidden;
+    position: absolute;
+    right: 0;
+    left: 0;
+    top: 0;
+    visibility: hidden;
+    pointer-events: none;
+    display: flex;
+  }
+  
   // sort icon
   .next-table-sort.next-table-header-icon {
     line-height: 16px;

package/lib/table/typing.d.ts

@@ -13,7 +13,7 @@ import { ProCardProps } from '../card';
 declare type IFieldRenderProps = keyof ProFieldRenderProps;
 /** 列record函数 */
 declare type ProTableCellFunProp = (value: any, index: number, record: any, ...others: any) => any;
-declare type ITableCellRender = {
+export declare type ITableCellRender = {
     [key in IFieldRenderProps]?: ProFieldRenderProps[key] | ProTableCellFunProp;
 } | ((...other: any) => React.ReactNode);
 declare type TDataService = {
@@ -24,6 +24,10 @@ declare type TDataService = {
 };
 export declare type responsivePaginationType = 'mini' | 'small' | 'simple' | 'normal';
 export declare type ProTableColumnProps = {
+    /** 自动计算宽度时的被挤占的情况 */
+    shrink?: number;
+    /** 是否自动适应该列宽度 */
+    autoWidth?: boolean;
     /**
      * 会在 title 之后展示一个 icon，hover 之后提示一些信息
      */
@@ -65,6 +69,8 @@ export declare type ProTableColumnProps = {
 } & Omit<ColumnProps, 'filters' | 'dataIndex' | 'filtersMode' | 'children'>;
 export declare type ProColumnProps = ProTableColumnProps;
 export declare type ProTableProps = {
+    /** 表格是否自适应宽度 */
+    autoWidth?: boolean;
     /** ProColums 定义，取代 Table 的 columns */
     columns: ProTableColumnProps[];
     /** 请求地址 */

package/lib/table/utils/columnRender.d.ts

@@ -11,3 +11,4 @@ export declare const renderColumnsTitle: (item: ProTableColumnProps, actionRef:
  * 负责单元格的具体渲染
  */
 export declare const renderCell: (value: any, item: ProTableColumnProps, index: number, record: any, actionRef: React.MutableRefObject<ProTableActionType | undefined>, context?: any, dataTeamixSpm?: string) => JSX.Element;
+export declare const renderCellSmartWidth: (value: any, item: ProTableColumnProps, index: number, record: any) => 0 | import("@teamix/pro-field/lib/autoWidth/typing").ProFieldAutoWidthPropsItem;