@teamix/pro 1.5.1-aplha.0 → 1.5.1

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

@@ -1,3 +1,7 @@
+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; }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -13,7 +17,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import { usePrefixCls } from '@teamix/utils';
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import { Button, Balloon } from '@alicloudfe/components';
 import TeamixIcon from '@teamix/icon';
 import FullScreenIcon from './FullScreenIcon';
@@ -23,12 +27,15 @@ import RefreshIcon from './RefreshIcon';
 import { useSize, useSafeState } from '@teamix/hooks';
 import debounce from 'lodash.debounce';
 import './index.scss';
+import CardSwitch from './CardSwitch';
+import cloneDeep from 'lodash.clonedeep';
 var cls = usePrefixCls('teamix-pro-table-toolbar');
 var presetToolBarMap = {
   refresh: RefreshIcon,
   density: DensityIcon,
   filtercolumn: FilterColumnIcon,
-  fullscreen: FullScreenIcon
+  fullscreen: FullScreenIcon,
+  switchcard: CardSwitch
 };
 var presetToolBarName = ['refresh', 'density', 'filtercolumn', 'fullscreen'];
 var presetToolBar = [{
@@ -53,7 +60,10 @@ var ToolBar = function ToolBar(props) {
   var _toolBarRef$current, _toolBarRef$current$p, _toolBarRef$current$p2;
 
   var toolBar = props.toolBar,
-      fullScreenState = props.fullScreenState;
+      fullScreenState = props.fullScreenState,
+      switchCardView = props.switchCardView,
+      _props$toolBarAutoWid = props.toolBarAutoWidth,
+      toolBarAutoWidth = _props$toolBarAutoWid === void 0 ? true : _props$toolBarAutoWid;
   var toolBarRef = useRef(null); // const toolBarSize = useSize(toolBarRef);
   // 用于获取内容宽度
 
@@ -73,44 +83,69 @@ var ToolBar = function ToolBar(props) {
 
 
   useEffect(debounce(function () {
-    // console.log(
-    //   layoutInlineSize?.width,
-    //   leftWidth,
-    //   toolBarContentRef.current?.clientWidth,
-    // );
-    if ((layoutInlineSize === null || layoutInlineSize === void 0 ? void 0 : layoutInlineSize.width) && leftWidth && toolBarContentRef.current) {
+    if ((layoutInlineSize === null || layoutInlineSize === void 0 ? void 0 : layoutInlineSize.width) && leftWidth && toolBarContentRef.current && toolBarAutoWidth) {
       var _toolBarContentRef$cu;
 
-      var width = layoutInlineSize.width; // console.log('layoutInlineSize-width', width);
+      var width = layoutInlineSize.width,
+          height = layoutInlineSize.height;
 
-      if (width - leftWidth <= ((_toolBarContentRef$cu = toolBarContentRef.current) === null || _toolBarContentRef$cu === void 0 ? void 0 : _toolBarContentRef$cu.clientWidth) + 8) {
+      if (width - leftWidth <= ((_toolBarContentRef$cu = toolBarContentRef.current) === null || _toolBarContentRef$cu === void 0 ? void 0 : _toolBarContentRef$cu.clientWidth) + 8 || height > 40) {
         setFlat(false);
-      } else {
+      } else if (height === 40) {
         setFlat(true);
       }
     }
-  }, 300));
-  var toolBarList = toolBar !== false ? presetToolBar : [];
+  }, 300)); // 初始态
+
+  useEffect(function () {
+    if (!((layoutInlineSize === null || layoutInlineSize === void 0 ? void 0 : layoutInlineSize.width) && leftWidth)) {
+      setFlat(true);
+    }
+  }, []);
+  var toolBarList = useMemo(function () {
+    var result = toolBar !== false ? cloneDeep(presetToolBar) : [];
+
+    if (switchCardView && !result.find(function (item) {
+      return item.name === 'switchCard';
+    })) {
+      result.push({
+        type: 'preset',
+        name: 'switchCard',
+        component: presetToolBarMap['switchcard']
+      });
+    }
+
+    if (Array.isArray(toolBar)) {
+      result = toolBar.map(function (item, index) {
+        if (typeof item === 'string' && presetToolBarName.includes(item.toLowerCase())) {
+          return {
+            type: 'preset',
+            name: item,
+            component: presetToolBarMap[item.toLowerCase()]
+          };
+        }
 
-  if (Array.isArray(toolBar)) {
-    toolBarList = toolBar.map(function (item, index) {
-      if (typeof item === 'string' && presetToolBarName.includes(item.toLowerCase())) {
         return {
-          type: 'preset',
-          name: item,
-          component: presetToolBarMap[item.toLowerCase()]
+          type: 'custom',
+          name: "custom".concat(index),
+          component: item
         };
-      }
+      });
 
-      return {
-        type: 'custom',
-        name: "custom".concat(index),
-        component: item
-      };
-    });
-  }
+      if (!toolBar.includes('switchCard') && switchCardView && !result.find(function (item) {
+        return item.name === 'switchCard';
+      })) {
+        result.push({
+          type: 'preset',
+          name: 'switchCard',
+          component: presetToolBarMap['switchcard']
+        });
+      }
+    }
 
-  var renderFlatShape = function renderFlatShape() {
+    return result;
+  }, [toolBar]);
+  var renderFlatShape = useMemo(function () {
     return /*#__PURE__*/React.createElement("div", {
       className: cls('content')
     }, toolBarList.map(function (_ref) {
@@ -120,13 +155,13 @@ var ToolBar = function ToolBar(props) {
       return /*#__PURE__*/React.createElement("span", {
         className: cls('item', _defineProperty({}, name, true)),
         key: name
-      }, type === 'preset' && /*#__PURE__*/React.createElement(Component, props), type === 'custom' && /*#__PURE__*/React.createElement("div", {
+      }, type === 'preset' && /*#__PURE__*/React.createElement(Component, _objectSpread({}, props)), type === 'custom' && /*#__PURE__*/React.createElement("div", {
         className: cls({
           custom: true
         })
       }, Component));
     }));
-  };
+  }, [toolBarList]);
 
   var renderUnFlatShape = function renderUnFlatShape() {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Balloon.Tooltip, {
@@ -141,7 +176,7 @@ var ToolBar = function ToolBar(props) {
         type: "more-line"
       })),
       align: "tr"
-    }, renderFlatShape()));
+    }, renderFlatShape));
   };
 
   return /*#__PURE__*/React.createElement("div", {
@@ -149,10 +184,10 @@ var ToolBar = function ToolBar(props) {
       flat: flat
     }),
     ref: toolBarRef
-  }, !flat && !fullScreenState ? renderUnFlatShape() : renderFlatShape(), /*#__PURE__*/React.createElement("div", {
+  }, !flat && !fullScreenState ? renderUnFlatShape() : renderFlatShape, /*#__PURE__*/React.createElement("div", {
     className: cls('shadow'),
     ref: toolBarContentRef
-  }, renderFlatShape()));
+  }, renderFlatShape));
 };
 
 export default ToolBar;

package/es/table/components/ToolBar/index.scss

@@ -1,7 +1,7 @@
 .teamix-pro-table-toolbar {
   width: 100%;
   text-align: right;
-  margin-bottom: 8px;
+  // margin-bottom: 8px;
   &-flat {
     margin-left: 8px;
   }
@@ -149,3 +149,12 @@
     }
   }
 }
+
+// switch card
+.teamix-pro-table-toolbar-switch-card {
+  margin-left: 8px;
+  label {
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+}

package/es/table/index.d.ts

@@ -0,0 +1,5 @@
+import { ProTableProps } from './typing';
+import './index.scss';
+export * from './typing';
+declare const ProTable: (props: ProTableProps) => JSX.Element;
+export default ProTable;

package/es/table/index.js

@@ -1,6 +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", "data-teamix-spm"];
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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); }
 
@@ -52,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');
 /**
@@ -179,7 +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;
@@ -204,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),
@@ -356,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);
@@ -391,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({
@@ -407,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() {
@@ -475,14 +492,13 @@ var ProTable = function ProTable(props) {
   }, [rowSelectionHook]); // 获取 table 左下角 checkbox 属性
 
   function getCheckAllProps() {
-    var _ref = rowSelection,
-        _ref$onChange = _ref.onChange,
-        _onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
-        _ref$onSelectAll = _ref.onSelectAll,
-        onSelectAll = _ref$onSelectAll === void 0 ? function () {} : _ref$onSelectAll,
-        _ref$selectedRowKeys = _ref.selectedRowKeys,
-        selectedRowKeys = _ref$selectedRowKeys === void 0 ? [] : _ref$selectedRowKeys,
-        getProps = _ref.getProps;
+    var _rowSelection$onChang = rowSelection.onChange,
+        _onChange = _rowSelection$onChang === void 0 ? function () {} : _rowSelection$onChang,
+        _rowSelection$onSelec = rowSelection.onSelectAll,
+        onSelectAll = _rowSelection$onSelec === void 0 ? function () {} : _rowSelection$onSelec,
+        _rowSelection$selecte2 = rowSelection.selectedRowKeys,
+        selectedRowKeys = _rowSelection$selecte2 === void 0 ? [] : _rowSelection$selecte2,
+        getProps = rowSelection.getProps;
 
     var dataSource = data;
     var allRowKeys = dataSource.filter(function (d, i) {
@@ -536,7 +552,7 @@ var ProTable = function ProTable(props) {
 
   useEffect(function () {
     if (propsDataSource) {
-      setData(propsDataSource);
+      _setData(propsDataSource);
     }
   }, [propsDataSource]); // 初始化 ActionRef。
 
@@ -559,14 +575,14 @@ var ProTable = function ProTable(props) {
       actionRefCallback[state][name] = fun;
     },
     off: function off(name) {
-      actionRefCallback = Object.fromEntries(Object.entries(actionRefCallback).map(function (_ref2) {
-        var _ref3 = _slicedToArray(_ref2, 2),
-            k = _ref3[0],
-            v = _ref3[1];
+      actionRefCallback = Object.fromEntries(Object.entries(actionRefCallback).map(function (_ref) {
+        var _ref2 = _slicedToArray(_ref, 2),
+            k = _ref2[0],
+            v = _ref2[1];
 
-        var filterV = Object.fromEntries(Object.entries(v).filter(function (_ref4) {
-          var _ref5 = _slicedToArray(_ref4, 1),
-              k = _ref5[0];
+        var filterV = Object.fromEntries(Object.entries(v).filter(function (_ref3) {
+          var _ref4 = _slicedToArray(_ref3, 1),
+              k = _ref4[0];
 
           return k !== name;
         }));
@@ -603,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) {
       // 如果请求中还有翻页相关信息，需要自动设置到指定页
@@ -631,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([]);
@@ -650,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 中
 
@@ -660,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;
 
@@ -673,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);
   } // 请求表格数据工具函数
 
@@ -746,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) {
@@ -763,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) {
@@ -791,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);
           } // 重新计算是否需要吸底
@@ -868,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);
     },
@@ -878,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);
     }
@@ -913,11 +990,14 @@ var ProTable = function ProTable(props) {
         rowSelection: rowSelection,
         filterColumnType: filterColumnType,
         fullScreenState: isFullScreen,
-        dataTeamixSpm: dataTeamixSpm
-      }), /*#__PURE__*/React.createElement(Table.StickyLock, _extends({
+        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,
@@ -932,21 +1012,30 @@ var ProTable = function ProTable(props) {
         emptyContent: /*#__PURE__*/React.createElement(EmptyContent, null),
         sortIcons: getTableSortIcons(),
         fixedHeader: fullscreenState || fixedTableBody,
-        maxBodyHeight: "calc(100vh - ".concat(headerHeight, "px)") // 过滤出可以传到 Table 的 Props
-
-      }, pickProps(getTableProps(), otherProps))));
+        maxBodyHeight: "calc(100vh - ".concat(headerHeight, "px)")
+      }, 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, _extends({
+      return /*#__PURE__*/React.createElement(Table, _objectSpread({
         className: cls()
       }, pickProps(getTableProps(), otherProps)));
     }
   };
 
   var renderFooterAction = function renderFooterAction() {
-    var _actions;
+    var _footerAction$actions;
 
-    if (_typeof(footerAction) === 'object' && (footerAction === null || footerAction === void 0 ? void 0 : (_actions = footerAction.actions) === null || _actions === void 0 ? void 0 : _actions.length) >= 0) {
+    if (_typeof(footerAction) === 'object' && (footerAction === null || footerAction === void 0 ? void 0 : (_footerAction$actions = footerAction.actions) === null || _footerAction$actions === void 0 ? void 0 : _footerAction$actions.length) >= 0) {
       // 默认 context
       var defaultContext = {
         action: actionRef.current,
@@ -965,8 +1054,9 @@ var ProTable = function ProTable(props) {
 
       return /*#__PURE__*/React.createElement("div", {
         className: cls('footer-action')
-      }, /*#__PURE__*/React.createElement(ProActionGroup, _extends({}, targetFooterActions, {
-        context: _objectSpread(_objectSpread({}, defaultContext), targetFooterActions === null || targetFooterActions === void 0 ? void 0 : targetFooterActions.context)
+      }, /*#__PURE__*/React.createElement(ProActionGroup, _objectSpread(_objectSpread({}, targetFooterActions), {}, {
+        context: _objectSpread(_objectSpread({}, defaultContext), targetFooterActions === null || targetFooterActions === void 0 ? void 0 : targetFooterActions.context),
+        "data-teamix-spm": dataTeamixSpm ? "".concat(dataTeamixSpm, "-footerAction") : undefined
       })));
     } else return footerAction;
   };
@@ -988,7 +1078,7 @@ var ProTable = function ProTable(props) {
     }
 
     function onChangePaginationSize(currentPageSize) {
-      var _request5;
+      var _request8;
 
       // 翻页默认清空选择
       if (!reserveSelectedRecords) {
@@ -1000,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() {
@@ -1012,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, _extends({
+          }, /*#__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) {
@@ -1033,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,
@@ -1041,15 +1131,15 @@ var ProTable = function ProTable(props) {
         })
       }, renderRowSelection(), /*#__PURE__*/React.createElement("div", {
         className: cls('footer-right-wrapper')
-      }, showSkeleton ? /*#__PURE__*/React.createElement(Skeleton.Footer.Pagination, null) : /*#__PURE__*/React.createElement(React.Fragment, null, data.length > 0 && /*#__PURE__*/React.createElement(Pagination, _extends({
+      }, showSkeleton ? /*#__PURE__*/React.createElement(Skeleton.Footer.Pagination, null) : /*#__PURE__*/React.createElement(React.Fragment, null, data.length > 0 && /*#__PURE__*/React.createElement(Pagination, _objectSpread({
         className: cls('pagination'),
         onChange: function onChange(number) {
           return onChangePagination(number);
         },
         total: total,
-        responsivePaginationType: responsivePaginationType // shape="arrow-only"
+        responsivePaginationType: responsivePaginationType,
+        // shape="arrow-only"
         // pageSizePosition="end"
-        ,
         totalRender: function totalRender(total) {
           return getMessage('total', {
             total: new Intl.NumberFormat().format(total)
@@ -1064,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
@@ -1078,6 +1168,7 @@ var ProTable = function ProTable(props) {
 
   var fixFooterState = useMemo(function () {
     if (fullscreenState) {
+      // TODO XXX
       return false;
     }