@teamix/pro 1.5.0 → 1.5.1

package/es/table/index.js

@@ -1,4 +1,4 @@
-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", "customRequest", "filterColumnType", "defaultFilterParams", "reserveSelectedRecords", "size", "disableSelectAll", "context", "fixedTableBody", "isTree"];
+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", "customRequest", "filterColumnType", "defaultFilterParams", "reserveSelectedRecords", "size", "disableSelectAll", "context", "fixedTableBody", "isTree", "toolBarAutoWidth", "data-teamix-spm", "switchCardView", "cardViewProps", "defaultView"];
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
@@ -50,6 +50,8 @@ import { ProActionGroup } from '../actions';
 import classNames from 'classnames';
 import ProPageContainer from '../page-container';
 import debounce from 'lodash.debounce';
+import CardView from './components/CardView';
+import columns from '../../demos/table/columns';
 export * from './typing';
 var cls = usePrefixCls('teamix-pro-table');
 /**
@@ -177,6 +179,14 @@ var ProTable = function ProTable(props) {
       _props$fixedTableBody = props.fixedTableBody,
       fixedTableBody = _props$fixedTableBody === void 0 ? false : _props$fixedTableBody,
       isTree = props.isTree,
+      _props$toolBarAutoWid = props.toolBarAutoWidth,
+      toolBarAutoWidth = _props$toolBarAutoWid === void 0 ? true : _props$toolBarAutoWid,
+      dataTeamixSpm = props['data-teamix-spm'],
+      _props$switchCardView = props.switchCardView,
+      switchCardView = _props$switchCardView === void 0 ? false : _props$switchCardView,
+      cardViewProps = props.cardViewProps,
+      _props$defaultView = props.defaultView,
+      defaultView = _props$defaultView === void 0 ? 'table' : _props$defaultView,
       otherProps = _objectWithoutProperties(props, _excluded);
 
   var targetPageKey = pageKey || globalPageKey;
@@ -201,7 +211,7 @@ var ProTable = function ProTable(props) {
   var _useState7 = useState(propsDataSource !== null && propsDataSource !== void 0 ? propsDataSource : []),
       _useState8 = _slicedToArray(_useState7, 2),
       data = _useState8[0],
-      setData = _useState8[1];
+      _setData = _useState8[1];
 
   var _useState9 = useState(props.sort || {}),
       _useState10 = _slicedToArray(_useState9, 2),
@@ -353,7 +363,11 @@ var ProTable = function ProTable(props) {
 
         var offsetHeaderHeight = headerHeight + tableHeaderHeight + pageHeaderHeight + teamixNavHeight + footerRowSelectionHeight + 16 + (offset !== null && offset !== void 0 ? offset : 0) + 1;
 
-        if (tableBodyDom.clientHeight < tableBodyDom.scrollHeight) {
+        if (switchViewState === 'card') {
+          offsetHeaderHeight = offsetHeaderHeight - tableHeaderHeight - footerRowSelectionHeight;
+        }
+
+        if ((tableBodyDom === null || tableBodyDom === void 0 ? void 0 : tableBodyDom.clientHeight) < (tableBodyDom === null || tableBodyDom === void 0 ? void 0 : tableBodyDom.scrollHeight)) {
           setFooterSuctionState(true);
         } else {
           setFooterSuctionState(false);
@@ -388,7 +402,13 @@ var ProTable = function ProTable(props) {
   var _useState27 = useState(false),
       _useState28 = _slicedToArray(_useState27, 2),
       fullscreenState = _useState28[0],
-      setFullscreenState = _useState28[1]; // 切换全屏搜索开关
+      setFullscreenState = _useState28[1]; // 切换视角
+
+
+  var _useState29 = useState(defaultView !== null && defaultView !== void 0 ? defaultView : 'table'),
+      _useState30 = _slicedToArray(_useState29, 2),
+      switchViewState = _useState30[0],
+      setSwitchViewState = _useState30[1]; // 切换全屏搜索开关
 
 
   var filterEnableRef = useRef({
@@ -404,10 +424,10 @@ var ProTable = function ProTable(props) {
   var dataFilterFormRef = !fullscreenState ? normalDataFilterFormRef : fullscreenDataFilterFormRef; // let dataFilterForm = dataFilterFormRef.current;
   // 整个内容区是否超过一屏。用于表格在非全屏模式下的吸底
 
-  var _useState29 = useState(false),
-      _useState30 = _slicedToArray(_useState29, 2),
-      footerSuctionState = _useState30[0],
-      setFooterSuctionState = _useState30[1]; // TODO 获取内容区是否超出一屏（暂时仅支持全家桶）
+  var _useState31 = useState(false),
+      _useState32 = _slicedToArray(_useState31, 2),
+      footerSuctionState = _useState32[0],
+      setFooterSuctionState = _useState32[1]; // TODO 获取内容区是否超出一屏（暂时仅支持全家桶）
 
 
   var getFooterSuctionState = function getFooterSuctionState() {
@@ -532,7 +552,7 @@ var ProTable = function ProTable(props) {
 
   useEffect(function () {
     if (propsDataSource) {
-      setData(propsDataSource);
+      _setData(propsDataSource);
     }
   }, [propsDataSource]); // 初始化 ActionRef。
 
@@ -599,7 +619,16 @@ var ProTable = function ProTable(props) {
       _setSize(mode);
     },
     refresh: function refresh(params) {
-      return _request(params);
+      // card视角的刷新等于重新请求
+      if (switchViewState === 'card') {
+        setCurrentPage(1);
+
+        _request(_objectSpread(_objectSpread({}, params), {}, _defineProperty({}, targetPageKey, 1)));
+
+        setShowSkeleton(true);
+      } else {
+        _request(params);
+      }
     },
     request: function request(params) {
       // 如果请求中还有翻页相关信息，需要自动设置到指定页
@@ -627,6 +656,12 @@ var ProTable = function ProTable(props) {
     resetPage: function resetPage() {
       setCurrentPage(1);
     },
+    nextPage: function nextPage() {
+      var newCurrentPage = currentPage + 1;
+      setCurrentPage(newCurrentPage);
+
+      _request(_defineProperty({}, targetPageKey, newCurrentPage));
+    },
     rowSelection: rowSelection,
     clearRowSelection: function clearRowSelection() {
       rowSelectionHook.setSelectedRowKeys([]);
@@ -646,8 +681,34 @@ var ProTable = function ProTable(props) {
     normalDataFilterForm: normalDataFilterForm,
     fullscreenDataFilterForm: fullscreenDataFilterForm,
     filterEnableRef: filterEnableRef,
+    setData: function setData(data) {
+      _setData(data);
+    },
     resetTableMaxBodyHeight: function resetTableMaxBodyHeight(offset) {
       getHeaderHeight(fullscreenState, offset);
+    },
+    switchView: function switchView(view) {
+      setSwitchViewState(view);
+      setShowSkeleton(true);
+      setCurrentPage(1);
+
+      if (view === 'table') {
+        var _request4;
+
+        setPageSize(pageSize !== null && pageSize !== void 0 ? pageSize : 20);
+
+        _request((_request4 = {}, _defineProperty(_request4, targetPageSizeKey, pageSize !== null && pageSize !== void 0 ? pageSize : 20), _defineProperty(_request4, targetPageKey, 1), _request4));
+      }
+
+      if (view === 'card') {
+        var _cardViewProps$pageSi, _cardViewProps$pageSi2, _request5;
+
+        setPageSize((_cardViewProps$pageSi = cardViewProps === null || cardViewProps === void 0 ? void 0 : cardViewProps.pageSize) !== null && _cardViewProps$pageSi !== void 0 ? _cardViewProps$pageSi : 12);
+
+        _request((_request5 = {}, _defineProperty(_request5, targetPageSizeKey, (_cardViewProps$pageSi2 = cardViewProps === null || cardViewProps === void 0 ? void 0 : cardViewProps.pageSize) !== null && _cardViewProps$pageSi2 !== void 0 ? _cardViewProps$pageSi2 : 12), _defineProperty(_request5, targetPageKey, 1), _request5));
+      }
+
+      getHeaderHeight(fullscreenState);
     }
   }); // 将 Actions 绑定到传入的 propsActionRef 中
 
@@ -656,8 +717,6 @@ var ProTable = function ProTable(props) {
   }
 
   function onFormatResult(next) {
-    var _next$data;
-
     props.onFormatResult && props.onFormatResult(next);
     var time = autoRefresh ? autoRefresh(next.data) : false;
 
@@ -669,8 +728,22 @@ var ProTable = function ProTable(props) {
     } // 设置 dataSource、total
 
 
-    setData(next.data || []);
-    setTotal(next.total || ((_next$data = next.data) === null || _next$data === void 0 ? void 0 : _next$data.length));
+    if (switchViewState === 'table' || currentPage === 1) {
+      var _next$data;
+
+      _setData(next.data || []);
+
+      setTotal(next.total || ((_next$data = next.data) === null || _next$data === void 0 ? void 0 : _next$data.length));
+    }
+
+    if (switchViewState === 'card' && currentPage !== 1) {
+      var _next$data2;
+
+      _setData([].concat(_toConsumableArray(data), _toConsumableArray(next.data || [])));
+
+      setTotal(total + (next.total || ((_next$data2 = next.data) === null || _next$data2 === void 0 ? void 0 : _next$data2.length)));
+    }
+
     setShowSkeleton(false);
   } // 请求表格数据工具函数
 
@@ -742,7 +815,7 @@ var ProTable = function ProTable(props) {
   }); // 请求函数
 
   function _request(params, noLoading, filterParams) {
-    var _dataFilterFormRef$cu2, _actionRef$current$ge, _actionRef$current5, _actionRef$current5$g, _objectSpread2;
+    var _dataFilterFormRef$cu2, _actionRef$current$ge, _actionRef$current5, _actionRef$current5$g, _objectSpread3;
 
     // 如果没有传 url 且没有 customRequest，直接返回
     if (!url && !customRequest) {
@@ -759,7 +832,7 @@ var ProTable = function ProTable(props) {
 
     var columnsFilterParams = (_actionRef$current$ge = (_actionRef$current5 = actionRef.current) === null || _actionRef$current5 === void 0 ? void 0 : (_actionRef$current5$g = _actionRef$current5.getFilterRules) === null || _actionRef$current5$g === void 0 ? void 0 : _actionRef$current5$g.call(_actionRef$current5)) !== null && _actionRef$current$ge !== void 0 ? _actionRef$current$ge : {}; // 格式化后的请求参数
 
-    var requestData = formatParams(_objectSpread(_objectSpread({}, !showPagination ? _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, dataFilterParams), propsParams), sortParams), columnsFilterParams) : _objectSpread(_objectSpread(_objectSpread(_objectSpread((_objectSpread2 = {}, _defineProperty(_objectSpread2, targetPageKey, currentPage), _defineProperty(_objectSpread2, targetPageSizeKey, pageSize), _objectSpread2), dataFilterParams), propsParams), sortParams), columnsFilterParams)), params));
+    var requestData = formatParams(_objectSpread(_objectSpread({}, !showPagination ? _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, dataFilterParams), propsParams), sortParams), columnsFilterParams) : _objectSpread(_objectSpread(_objectSpread(_objectSpread((_objectSpread3 = {}, _defineProperty(_objectSpread3, targetPageKey, currentPage), _defineProperty(_objectSpread3, targetPageSizeKey, pageSize), _objectSpread3), dataFilterParams), propsParams), sortParams), columnsFilterParams)), params));
 
     if (requestData) {
       if (autoRefreshTimerRef.current) {
@@ -787,14 +860,24 @@ var ProTable = function ProTable(props) {
       if (customRequest && typeof customRequest === 'function') {
         setCustomTableLoading(true);
         customRequest(requestData).then(function (res) {
-          var data = res.data,
-              total = res.total,
+          var dataRes = res.data,
+              totalRes = res.total,
               success = res.success;
 
           if (success === true) {
             // 设置 dataSource、total
-            setData(data || []);
-            setTotal(total || (data === null || data === void 0 ? void 0 : data.length));
+            if (switchViewState === 'table' || params['targetPageKey'] === 1) {
+              _setData(dataRes || []);
+
+              setTotal(totalRes || (dataRes === null || dataRes === void 0 ? void 0 : dataRes.length));
+            }
+
+            if (switchViewState === 'card' && params['targetPageKey'] !== 1) {
+              _setData([].concat(_toConsumableArray(data), _toConsumableArray(dataRes || [])));
+
+              setTotal(total + (totalRes || (dataRes === null || dataRes === void 0 ? void 0 : dataRes.length)));
+            }
+
             setShowSkeleton(false);
             setCustomTableLoading(false);
           } // 重新计算是否需要吸底
@@ -864,7 +947,6 @@ var ProTable = function ProTable(props) {
 
       (_actionRef$current6 = actionRef.current) === null || _actionRef$current6 === void 0 ? void 0 : (_actionRef$current6$c = _actionRef$current6.clearRowSelection) === null || _actionRef$current6$c === void 0 ? void 0 : _actionRef$current6$c.call(_actionRef$current6);
       setCurrentPage(1);
-      console.log('currentPageSize1', pageSize);
 
       _request(_defineProperty({}, targetPageKey, 1), false, values);
     },
@@ -874,7 +956,6 @@ var ProTable = function ProTable(props) {
       (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onReset) && (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : propsDataFilter.onReset());
       (_dataFilterFormRef$cu3 = dataFilterFormRef.current) === null || _dataFilterFormRef$cu3 === void 0 ? void 0 : _dataFilterFormRef$cu3.reset();
       setCurrentPage(1);
-      console.log('currentPageSize2', pageSize);
 
       _request(_defineProperty({}, targetPageKey, 1), false, values);
     }
@@ -894,7 +975,8 @@ var ProTable = function ProTable(props) {
         className: classNames('teamix-pro-table-container', className, 'teamix-test-request'),
         "data-teamix-test-request": "url=".concat(url, "&formatResult=").concat(!!formatResult),
         "data-teamix-test-params": getTestRequestParams(propsParams),
-        "data-teamix-test-data": getTestRequestData(propsColumns)
+        "data-teamix-test-data": getTestRequestData(propsColumns),
+        "data-teamix-spm": dataTeamixSpm
       }, /*#__PURE__*/React.createElement(Layout, {
         header: header,
         mainAction: mainAction,
@@ -907,11 +989,15 @@ var ProTable = function ProTable(props) {
         dataFilterFormRef: isFullScreen ? fullscreenDataFilterFormRef : normalDataFilterFormRef,
         rowSelection: rowSelection,
         filterColumnType: filterColumnType,
-        fullScreenState: isFullScreen
-      }), /*#__PURE__*/React.createElement(Table.StickyLock, _objectSpread({
+        fullScreenState: isFullScreen,
+        toolBarAutoWidth: toolBarAutoWidth,
+        dataTeamixSpm: dataTeamixSpm,
+        switchCardView: switchCardView,
+        defaultView: defaultView
+      }), switchViewState === 'table' && /*#__PURE__*/React.createElement(Table.StickyLock, _objectSpread({
         hasBorder: false,
         dataSource: showSkeleton ? skeletonDataSource : data || props.dataSource,
-        columns: genProColumnToColumn(filteredColumns, showSkeleton, actionRef, context),
+        columns: genProColumnToColumn(filteredColumns, showSkeleton, actionRef, context, dataTeamixSpm),
         loading: getTableLoading(),
         className: classNames('teamix-pro-table', tableClassName, {
           'with-row-select': rowSelection,
@@ -927,7 +1013,17 @@ var ProTable = function ProTable(props) {
         sortIcons: getTableSortIcons(),
         fixedHeader: fullscreenState || fixedTableBody,
         maxBodyHeight: "calc(100vh - ".concat(headerHeight, "px)")
-      }, pickProps(getTableProps(), otherProps))));
+      }, pickProps(getTableProps(), otherProps))), switchViewState === 'card' && /*#__PURE__*/React.createElement(CardView, {
+        dataSource: showSkeleton ? skeletonDataSource : data || props.dataSource,
+        showSkeleton: showSkeleton,
+        loading: getTableLoading(),
+        originColumns: columns,
+        cardViewProps: cardViewProps,
+        scrollHeight: fullscreenState || fixedTableBody ? "calc(100vh - ".concat(headerHeight, "px)") : undefined,
+        actionRef: actionRef,
+        context: context,
+        columns: genProColumnToColumn(filteredColumns, showSkeleton, actionRef, context)
+      }));
     } else {
       // 不传 columns 直接返回原始 Table
       return /*#__PURE__*/React.createElement(Table, _objectSpread({
@@ -959,7 +1055,8 @@ var ProTable = function ProTable(props) {
       return /*#__PURE__*/React.createElement("div", {
         className: cls('footer-action')
       }, /*#__PURE__*/React.createElement(ProActionGroup, _objectSpread(_objectSpread({}, targetFooterActions), {}, {
-        context: _objectSpread(_objectSpread({}, defaultContext), targetFooterActions === null || targetFooterActions === void 0 ? void 0 : targetFooterActions.context)
+        context: _objectSpread(_objectSpread({}, defaultContext), targetFooterActions === null || targetFooterActions === void 0 ? void 0 : targetFooterActions.context),
+        "data-teamix-spm": dataTeamixSpm ? "".concat(dataTeamixSpm, "-footerAction") : undefined
       })));
     } else return footerAction;
   };
@@ -981,7 +1078,7 @@ var ProTable = function ProTable(props) {
     }
 
     function onChangePaginationSize(currentPageSize) {
-      var _request5;
+      var _request8;
 
       // 翻页默认清空选择
       if (!reserveSelectedRecords) {
@@ -993,7 +1090,7 @@ var ProTable = function ProTable(props) {
       setPageSize(currentPageSize);
       setCurrentPage(1);
 
-      _request((_request5 = {}, _defineProperty(_request5, targetPageSizeKey, currentPageSize), _defineProperty(_request5, targetPageKey, 1), _request5));
+      _request((_request8 = {}, _defineProperty(_request8, targetPageSizeKey, currentPageSize), _defineProperty(_request8, targetPageKey, 1), _request8));
     }
 
     function renderRowSelection() {
@@ -1005,13 +1102,13 @@ var ProTable = function ProTable(props) {
         } else {
           return /*#__PURE__*/React.createElement("div", {
             className: cls('footer-left-wrapper')
-          }, rowSelection.mode !== 'single' && /*#__PURE__*/React.createElement(Checkbox, _objectSpread({
+          }, /*#__PURE__*/React.createElement(React.Fragment, null, rowSelection.mode !== 'single' && /*#__PURE__*/React.createElement(Checkbox, _objectSpread({
             className: cls("footer-checkbox-".concat(size))
           }, getCheckAllProps())), footerAction && renderFooterAction(), /*#__PURE__*/React.createElement("span", {
             className: cls('selected-msg')
           }, getMessage('selected', {
             count: selectedCount
-          })));
+          }))));
         }
       } else if (footerAction) {
         if (showSkeleton) {
@@ -1026,7 +1123,7 @@ var ProTable = function ProTable(props) {
       }
     }
 
-    if (showPagination) {
+    if (showPagination && switchViewState === 'table') {
       return /*#__PURE__*/React.createElement("div", {
         className: cls('footer', {
           'footer-has-rowSelection': rowSelection,
@@ -1057,7 +1154,7 @@ var ProTable = function ProTable(props) {
           return onChangePaginationSize(number);
         }
       }, props.paginationProps)))));
-    } else if (!showPagination) {
+    } else if (!showPagination && (footerAction || rowSelection || useRowSelection)) {
       return /*#__PURE__*/React.createElement("div", {
         className: cls('footer', {
           'footer-has-rowSelection': rowSelection
@@ -1071,6 +1168,7 @@ var ProTable = function ProTable(props) {
 
   var fixFooterState = useMemo(function () {
     if (fullscreenState) {
+      // TODO XXX
       return false;
     }
 

package/es/table/typing.d.ts

@@ -9,6 +9,7 @@ import { PaginationProps } from '@alicloudfe/components/types/pagination';
 import { HeaderProps as ProTableHeaderProps } from '../field';
 import { Method, AxiosRequestConfig } from 'axios';
 import React from 'react';
+import { ProCardProps } from '../card';
 declare type IFieldRenderProps = keyof ProFieldRenderProps;
 /** 列record函数 */
 declare type ProTableCellFunProp = (value: any, index: number, record: any, ...others: any) => any;
@@ -147,6 +148,14 @@ export declare type ProTableProps = {
     context?: any;
     /** 是否固定表格主体（开启后横向滚动条会固定在底部） */
     fixedTableBody?: boolean;
+    /** 用于埋点 */
+    'data-teamix-spm'?: string;
+    /** 是否切换卡片视角 **/
+    switchCardView?: boolean;
+    /** 卡片视角配置 **/
+    cardViewProps?: ProTableCardProps;
+    /** 默认展示维度 **/
+    defaultView?: 'table' | 'card';
 } & Omit<TableProps, 'columns'> & ProTableTopAreaProps;
 export declare type rowSelectionType = {
     getProps?: (record: any, index: number) => any;
@@ -203,6 +212,7 @@ export declare type ProTableActionType = {
     };
     /** 重置翻页器为1，不发送请求 */
     resetPage?: () => void;
+    nextPage?: () => void;
     /** 获取数据过滤区表单实例 */
     dataFilterForm?: ProFormType;
     /** 用于在 mount 的时候获取到表单 ref */
@@ -212,6 +222,11 @@ export declare type ProTableActionType = {
     filterEnableRef?: any;
     /** 表格当前的数据 */
     data?: any[];
+    /** 切换视角 **/
+    switchView?: (view: 'card' | 'table') => void;
+    /** 设置数据源 **/
+    setData?: (data: any[]) => void;
+    setCardViewScrollPosition?: (scrollTop: number) => void;
 } & ProTableActionTypeMutations;
 /** action State 定义 */
 export declare type ProTableActionTypeMutations = {
@@ -258,6 +273,8 @@ export declare type ProTableTopAreaProps = {
     mainAction?: ProActionGroupProps | React.ReactNode;
     /** 工具栏区 */
     toolBar?: boolean | ProTableToolBarItem[];
+    /** 是否开启工具栏自适应 */
+    toolBarAutoWidth?: boolean;
     /** 快捷操作区 */
     extra?: ProActionButtonProps | React.ReactNode | React.ReactNode[];
     /** 数据过滤区 */
@@ -277,6 +294,9 @@ export declare type ProTableLayoutProps = {
     columns?: ProTableColumnProps[];
     rowSelection?: innerRowSelectionType | rowSelectionType;
     fullScreenState?: boolean;
+    dataTeamixSpm?: string;
+    switchCardView?: boolean;
+    defaultView?: 'table' | 'card';
 } & ProTableTopAreaProps;
 /** columns 列过滤 */
 export declare type ProTableColumnsFilterItemProps = {
@@ -299,4 +319,53 @@ export declare type parentPositionProps = {
     offsetLeft: number;
     offsetRight: number;
 };
+/** card props **/
+export declare type ProTableCardProps = {
+    /** 标题 dataIndex **/
+    title?: (ProTableColumnProps['dataIndex'] | ProTableColumnProps) | ((index: number, record: any) => ProTableColumnProps['dataIndex'] | ProTableColumnProps);
+    /** 副标题 dataIndex **/
+    subTitle?: (ProTableColumnProps['dataIndex'] | ProTableColumnProps) | ((index: number, record: any) => ProTableColumnProps['dataIndex'] | ProTableColumnProps);
+    /** 内容区域 dataIndex **/
+    content?: (ProTableColumnProps['dataIndex'] | ProTableColumnProps)[] | ((index: number, record: any) => (ProTableColumnProps['dataIndex'] | ProTableColumnProps)[]);
+    /** extra 区域 **/
+    extra?: (ProActionGroupProps | React.ReactNode | ProTableColumnProps['dataIndex'])[] | ((index: number, record: any) => (ProActionGroupProps | React.ReactNode | ProTableColumnProps['dataIndex'])[]);
+    /** 标签区域 **/
+    tags?: (ProTableColumnProps['dataIndex'] | ProTableColumnProps)[] | ((index: number, record: any) => (ProTableColumnProps['dataIndex'] | ProTableColumnProps)[]);
+    /** 分页器条数 **/
+    pageSize?: 12 | 24 | 48 | 96 | number;
+    /** 卡片区域滚动高度 **/
+    scrollHeight?: number | string;
+    /** 自动加载下一页 **/
+    autoLoadNextPage?: boolean;
+    /** 滚动容器 用于监听触底事件 **/
+    scrollDom?: HTMLElement;
+    /** 触底事件 **/
+    onScrollBottom?: () => void;
+    /** 卡片配置 **/
+    cardProps?: {
+        [key in keyof ProCardProps]?: ProCardProps[key] | ((index: number, record: any) => ProCardProps[key]);
+    };
+};
+/** card 视角 Props （内部组件） **/
+export declare type ProTableCardViewProps = {
+    /** 卡片视角配置 **/
+    cardViewProps?: ProTableCardProps;
+    /** 数据源 **/
+    dataSource?: any[];
+    /** 原始 columns **/
+    originColumns?: any[];
+    /** 处理过后的 columns **/
+    columns?: any[];
+    /** 加载动画 **/
+    loading?: boolean;
+    /** 上下文 **/
+    context?: any;
+    actionRef?: React.MutableRefObject<ProTableActionType | undefined>;
+    /** 卡片区域滚动高度 **/
+    scrollHeight?: number | string;
+    /** 骨架屏状态 **/
+    showSkeleton?: boolean;
+    /** ProCard 卡片配置 **/
+    cardProps?: ProTableCardProps['cardProps'];
+};
 export {};

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

@@ -10,4 +10,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) => JSX.Element;
+export declare const renderCell: (value: any, item: ProTableColumnProps, index: number, record: any, actionRef: React.MutableRefObject<ProTableActionType | undefined>, context?: any, dataTeamixSpm?: string | undefined) => JSX.Element;

package/es/table/utils/columnRender.js

@@ -111,7 +111,8 @@ export var renderColumnsTitle = function renderColumnsTitle(item, actionRef) {
 
 export var renderCell = function renderCell(value, item, index, record, actionRef,
 /** 接收外部比如 dialog-table 传过来的 context，用于弹窗关闭等 */
-context) {
+context, // 用于埋点
+dataTeamixSpm) {
   var _actionSchema$actions;
 
   var _item$valueType = item.valueType,
@@ -182,7 +183,8 @@ context) {
     return /*#__PURE__*/React.createElement(ProActionGroup, _objectSpread(_objectSpread({
       type: "text"
     }, actionSchema), {}, {
-      context: _objectSpread(_objectSpread({}, defaultContext), actionSchema.context)
+      context: _objectSpread(_objectSpread({}, defaultContext), actionSchema.context),
+      "data-teamix-spm": dataTeamixSpm ? "".concat(dataTeamixSpm, "-columnAction") : undefined
     }));
   } // dataSource可传函数
 

package/es/table/utils/genProColumnToColumn.d.ts

@@ -9,5 +9,5 @@ declare type FixedColumnProps = ColumnProps & {
  */
 export default function genProColumnToColumn(columns: ProTableColumnProps[], 
 /** 是否渲染骨架屏 */
-showSkeleton: boolean, actionRef: React.MutableRefObject<ProTableActionType | undefined>, context?: any): FixedColumnProps[];
+showSkeleton: boolean, actionRef: React.MutableRefObject<ProTableActionType | undefined>, context?: any, dataTeamixSpm?: string): FixedColumnProps[];
 export {};

package/es/table/utils/genProColumnToColumn.js

@@ -22,6 +22,8 @@ export default function genProColumnToColumn(columns,
 /** 是否渲染骨架屏 */
 showSkeleton, actionRef) {
   var context = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  var // 用于埋点
+  dataTeamixSpm = arguments.length > 4 ? arguments[4] : undefined;
   return columns.map(function (columnProps) {
     var filters = columnProps.filters,
         dataIndex = columnProps.dataIndex,
@@ -47,7 +49,7 @@ showSkeleton, actionRef) {
       dataIndex: dataIndex === null || dataIndex === void 0 ? void 0 : dataIndex.toString(),
       title: renderColumnsTitle(columnProps, actionRef),
       cell: function cell(value, index, record) {
-        return renderCell(value, columnProps, index, record, actionRef, context);
+        return renderCell(value, columnProps, index, record, actionRef, context, dataTeamixSpm);
       }
     });
   });

package/lib/actions/index.d.ts

@@ -41,11 +41,13 @@ export interface ProActionCommonProps {
     key?: string | number;
     visible?: any;
     context?: any;
+    'data-teamix-spm'?: string;
 }
 export interface ProActionMenuButtonProps extends ProActionCommonProps, Omit<MenuButtonProps, 'visible'> {
     actions: ProActionProps[];
     icon?: string;
     noArrow?: boolean;
+    'data-teamix-spm'?: string;
 }
 export declare const ProActionMenuButton: (props: ProActionMenuButtonProps) => JSX.Element;
 export interface ProActionDividerProps extends ProActionCommonProps {
@@ -69,6 +71,8 @@ export declare type ProActionGroupProps = {
     more?: string | Omit<ProActionMenuButtonProps, 'actions'>;
     /** 是否有分割线，只有type="text"时生效，默认有分割线 */
     divider?: boolean;
+    /** 用于埋点 */
+    ['data-teamix-spm']?: string;
 } & React.HTMLAttributes<HTMLElement>;
 export declare function ProActionGroup(props: ProActionGroupProps): JSX.Element;
 declare const ProAction: (props: ProActionProps) => JSX.Element;