@teamix/pro 1.5.13 → 1.5.16

package/es/actions/dialog.js

@@ -210,7 +210,7 @@ export function useDialogAction(action, actionContext, hasForm) {
       className: classnames('teamix-pro-dialog-footer-description', getFooterAlignClass(isDrawer, footerAlign))
     }, renderDialogFooterDescription(footerDescription)))), _defineProperty(_objectSpread2, "footerAlign", footerAlign), _defineProperty(_objectSpread2, "className", classnames('teamix-pro-action-dialog', {
       'has-footer-description': !!footerDescription
-    })), _defineProperty(_objectSpread2, "footer", addContextForReactNode(footer, dialogContext)), _objectSpread2), containerProps), containerOtherProps);
+    })), _defineProperty(_objectSpread2, isDrawer ? 'renderFooter' : 'footer', addContextForReactNode(footer, dialogContext)), _objectSpread2), containerProps), containerOtherProps);
     // TODO Drawer 基础组件未支持此配置，日后支持，并修改onOk、onCancel写法
     if ((!dialogType || dialogType === 'dialog') && hideFooter) {
       quickShowProps['footer'] = !hideFooter;

package/es/actions/index.scss

@@ -10,7 +10,7 @@
   }
 
   &.teamix-pro-actions-type-button {
-    & > button {
+    & > button,& > span {
       &:not(:last-child) {
         margin-right: var(--s-2);
       }

package/es/card/index.scss

@@ -1,3 +1,5 @@
+@import "xconsole";
+
 .teamix-pro-card {
   width: 100%;
 

package/es/card/xconsole.scss

@@ -0,0 +1,3 @@
+.theme-xconsole {
+
+}

package/es/global.scss

@@ -1,4 +1,5 @@
 @import "./xconsole.scss";
+@import "next-xconsole";
 // transition 切换主题优化，暂时先写到 pro 里，后面加到基础组件里
 
 // table 行背景色

package/es/index.d.ts

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

package/es/index.js

@@ -35,7 +35,7 @@ export * from './table';
 export * from './sidebar';
 export * from './utils';
 export * from './timeline';
-var version = '1.5.13';
+var version = '1.5.16';
 // By TeamixTest
 window.postMessage({
   source: 'teamix-test-devtools',

package/es/next-xconsole.scss

@@ -0,0 +1,34 @@
+.theme-xconsole {
+  //.next-drawer-header {
+  //  color: var(--color-text-1, #1A1A1A)
+  //}
+  //.next-message.next-message-success.next-toast .next-message-title {
+  //  color: var(--color-text-1, #1A1A1A)
+  //}
+
+  --message-success-color-border-toast: var(--color-border-4, #E5E5E5);
+
+  /* --card-border-color: var(--color-text1-4, #E3E4E6); */
+  --card-border-color: var(--color-border-4, #E5E5E5);
+  /* --tab-pure-divider-border-color: var(--color-text1-4, #e5e5e5); */
+  --tab-pure-divider-border-color: var(--color-border-4, #E5E5E5);
+  --drawer-title-border-color: var(--color-border-4, #E5E5E5);
+
+  --popup-local-border-color: var(--color-border-4, #E5E5E5);
+
+  --btn-pure-normal-bg-disabled: var(--color-fill-2, #F7F7F7);
+  --checkbox-disabled-bg-color: var(--color-border-1, #D9D9D9);
+
+  --btn-pure-normal-border-color-disabled: var(--color-border-1, #D9D9D9);
+  --btn-pure-primary-border-color-disabled: var(--color-border-1, #D9D9D9);
+
+  --tab-item-margin-lr-size-m: 16px;
+  --tab-pure-hover-bg: transparent;
+
+  --progress-line-underlay-color: var(--color-border-4, #E5E5E5);
+  --range-normal-unselected-color: var(--color-border-4, #E5E5E5);
+
+  .next-formily-item-inset {
+    border: 1px solid var(--color-border-1, #D9D9D9);
+  }
+}

package/es/nocode/configurators/ProTable.js

@@ -1,27 +1,6 @@
 import { array, actions, actionGroup, filter } from './common';
 var initialValues = {
-  columns: [{
-    dataIndex: 'instanceName',
-    title: '实例ID/实例名称'
-  }, {
-    dataIndex: 'organizationName',
-    title: '组织',
-    tooltip: '我这一列是可以被复制的～',
-    render: {
-      copy: true
-    }
-  }],
-  url: 'https://oneapi.alibaba-inc.com/mock/teamix-pro/api/getTableResource',
-  formatResult: {
-    data: 'data',
-    total: 'pageInfo.total'
-  },
-  mainAction: {
-    actions: [{
-      key: 'action',
-      children: '操作按钮'
-    }]
-  }
+  columns: []
 };
 var defaultValues = {
   showSkeleton: true,

package/es/nocode/pages/index.js

@@ -10,32 +10,7 @@ export var PageMap = {
 };
 // 全部页面模板默认初始值
 export var PageDefaultInitialValues = {
-  LIST: {
-    header: {
-      title: '页面标题'
-    },
-    content: {
-      header: {
-        title: '表格标题'
-      },
-      columns: [{
-        dataIndex: 'instanceName',
-        title: '实例ID/实例名称'
-      }, {
-        dataIndex: 'organizationName',
-        title: '组织',
-        tooltip: '我这一列是可以被复制的～',
-        render: {
-          copy: true
-        }
-      }],
-      url: 'https://oneapi.alibaba-inc.com/mock/teamix-pro/api/getTableResource',
-      formatResult: {
-        data: 'data',
-        total: 'pageInfo.total'
-      }
-    }
-  },
+  LIST: {},
   DETAIL: {},
   FORM: {}
 };

package/es/page-header/index.scss

@@ -1,3 +1,4 @@
+@import "xconsole";
 $prefix: 'teamix-pro-page-header';
 
 .#{$prefix} {
@@ -12,7 +13,7 @@ $prefix: 'teamix-pro-page-header';
     justify-content: space-between;
     align-items: center;
     min-height: 18px;
-    height: var(--layout-header-height, auto);
+    height: auto;
     margin-bottom: var(--s-2, 8px);
 
     &.with-description {

package/es/page-header/xconsole.scss

@@ -0,0 +1,5 @@
+.theme-xconsole {
+  .teamix-pro-page-header .teamix-pro-page-header-title{
+    color: var(--color-text-1, #1A1A1A);
+  }
+}

package/es/table/components/Filter/index.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
 import './index.scss';
-import { ProTableColumnProps, ProTableActionType } from '../../typing';
+import { ProTableColumnProps, ProTableActionType, ProTableProps } from '../../typing';
 declare type ProTableFilterProps = {
     column: ProTableColumnProps;
     actionRef: React.MutableRefObject<ProTableActionType | undefined>;
     switchCardView?: 'table' | 'card';
+    bindUrl?: ProTableProps['bindUrl'];
+    bindUrlProps?: ProTableProps['bindUrlProps'];
 };
-declare const Filter: React.FC<ProTableFilterProps>;
-export default Filter;
+declare const _default: React.NamedExoticComponent<ProTableFilterProps>;
+export default _default;

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

@@ -12,22 +12,30 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 // 表格项列筛选
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState, memo } from 'react';
 import TeamixIcon from '@teamix/icon';
 import { Button, Dropdown, Menu } from '@alicloudfe/components';
 import { usePrefixCls, getMessage } from '@teamix/utils';
 import './index.scss';
+import { useUrlState } from '@teamix/hooks';
 var CheckboxItem = Menu.CheckboxItem;
 var cls = usePrefixCls('teamix-pro-table-toolbar-filter');
 var RadioItem = Menu.RadioItem;
 var Filter = function Filter(props) {
+  var _urlState$split, _urlState, _urlState$split2;
   var column = props.column,
     actionRef = props.actionRef,
-    switchCardView = props.switchCardView;
+    switchCardView = props.switchCardView,
+    bindUrlProps = props.bindUrlProps,
+    bindUrl = props.bindUrl;
   var _column$filtersWidth = column.filtersWidth,
     filtersWidth = _column$filtersWidth === void 0 ? 130 : _column$filtersWidth;
+  var _ref = bindUrl ? useUrlState() : [],
+    _ref2 = _slicedToArray(_ref, 2),
+    urlState = _ref2[0],
+    setUrlState = _ref2[1];
   // 选中过滤项
-  var _useState = useState([]),
+  var _useState = useState((_urlState$split = urlState === null || urlState === void 0 ? void 0 : (_urlState = urlState["filter".concat(column === null || column === void 0 ? void 0 : column.dataIndex)]) === null || _urlState === void 0 ? void 0 : (_urlState$split2 = _urlState.split) === null || _urlState$split2 === void 0 ? void 0 : _urlState$split2.call(_urlState, ',')) !== null && _urlState$split !== void 0 ? _urlState$split : []),
     _useState2 = _slicedToArray(_useState, 2),
     selected = _useState2[0],
     setSelected = _useState2[1];
@@ -39,7 +47,10 @@ var Filter = function Filter(props) {
     var _actionRef$current$ge, _actionRef$current, _actionRef$current$ge2, _actionRef$current$ge3, _actionRef$current$ge4, _actionRef$current$ge5;
     // 从全局状态中读取上次存储的条件
     var rules = (_actionRef$current$ge = (_actionRef$current = actionRef.current) === null || _actionRef$current === void 0 ? void 0 : (_actionRef$current$ge2 = _actionRef$current.getState) === null || _actionRef$current$ge2 === void 0 ? void 0 : (_actionRef$current$ge3 = _actionRef$current$ge2.call(_actionRef$current)) === null || _actionRef$current$ge3 === void 0 ? void 0 : (_actionRef$current$ge4 = _actionRef$current$ge3.filterRules) === null || _actionRef$current$ge4 === void 0 ? void 0 : (_actionRef$current$ge5 = _actionRef$current$ge4[column.dataIndex]) === null || _actionRef$current$ge5 === void 0 ? void 0 : _actionRef$current$ge5.rules) !== null && _actionRef$current$ge !== void 0 ? _actionRef$current$ge : [];
-    setSelected(rules);
+    // 全局状态中需要有值才赋值。优先级：全局状态 > urlState
+    if (rules && rules.length > 0) {
+      setSelected(rules);
+    }
   }, []);
   // 获取过滤项
   var filters = useMemo(function () {
@@ -49,11 +60,11 @@ var Filter = function Filter(props) {
     var filters = column.dataSource;
     // 转换 valueEnum 为 options
     if (!Array.isArray(column.dataSource)) {
-      filters = Object.entries(column.dataSource).map(function (_ref) {
+      filters = Object.entries(column.dataSource).map(function (_ref3) {
         var _nv$label, _nv$color;
-        var _ref2 = _slicedToArray(_ref, 2),
-          k = _ref2[0],
-          v = _ref2[1];
+        var _ref4 = _slicedToArray(_ref3, 2),
+          k = _ref4[0],
+          v = _ref4[1];
         var nv = v;
         return _objectSpread(_objectSpread({
           value: k
@@ -66,12 +77,78 @@ var Filter = function Filter(props) {
     // console.log(filters);
     return filters;
   }, []);
+  // 点击确定回调
+  var onFilterOk = function onFilterOk() {
+    var _actionRef$current2, _actionRef$current2$f, _actionRef$current$ge6, _actionRef$current3, _actionRef$current3$g, _actionRef$current3$g2, _actionRef$current4, _actionRef$current4$s, _actionRef$current5, _actionRef$current7, _actionRef$current7$r, _actionRef$current8, _actionRef$current8$r, _actionRef$current9, _actionRef$current9$c;
+    (_actionRef$current2 = actionRef.current) === null || _actionRef$current2 === void 0 ? void 0 : (_actionRef$current2$f = _actionRef$current2.filterDataSource) === null || _actionRef$current2$f === void 0 ? void 0 : _actionRef$current2$f.call(_actionRef$current2, column.dataIndex);
+    // 先获取此列的param
+    var param = '';
+    if (column.beforeFilter) {
+      var _column$beforeFilter;
+      param = (_column$beforeFilter = column.beforeFilter) === null || _column$beforeFilter === void 0 ? void 0 : _column$beforeFilter.call(column, selected);
+    } else {
+      param = selected.join(',');
+    }
+    // 需要带上其他所有的信息
+    var rules = (_actionRef$current$ge6 = (_actionRef$current3 = actionRef.current) === null || _actionRef$current3 === void 0 ? void 0 : (_actionRef$current3$g = _actionRef$current3.getState) === null || _actionRef$current3$g === void 0 ? void 0 : (_actionRef$current3$g2 = _actionRef$current3$g.call(_actionRef$current3)) === null || _actionRef$current3$g2 === void 0 ? void 0 : _actionRef$current3$g2.filterRules) !== null && _actionRef$current$ge6 !== void 0 ? _actionRef$current$ge6 : {};
+    // 再设置所有的列筛选状态
+    (_actionRef$current4 = actionRef.current) === null || _actionRef$current4 === void 0 ? void 0 : (_actionRef$current4$s = _actionRef$current4.setFilterRules) === null || _actionRef$current4$s === void 0 ? void 0 : _actionRef$current4$s.call(_actionRef$current4, _objectSpread(_objectSpread({}, rules), {}, _defineProperty({}, column.dataIndex, {
+      rules: selected,
+      params: param
+    })));
+    var targetPageKey = 'currentPage';
+    var pageInfo = (_actionRef$current5 = actionRef.current) === null || _actionRef$current5 === void 0 ? void 0 : _actionRef$current5.pageInfo;
+    if (pageInfo && (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.targetPageKey)) {
+      targetPageKey = pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.targetPageKey;
+    }
+    if (switchCardView === 'card') {
+      var _actionRef$current6, _actionRef$current6$s;
+      (_actionRef$current6 = actionRef.current) === null || _actionRef$current6 === void 0 ? void 0 : (_actionRef$current6$s = _actionRef$current6.setData) === null || _actionRef$current6$s === void 0 ? void 0 : _actionRef$current6$s.call(_actionRef$current6, []);
+    }
+    // 发送请求
+    (_actionRef$current7 = actionRef.current) === null || _actionRef$current7 === void 0 ? void 0 : (_actionRef$current7$r = _actionRef$current7.request) === null || _actionRef$current7$r === void 0 ? void 0 : _actionRef$current7$r.call(_actionRef$current7, _defineProperty({}, targetPageKey, 1));
+    (_actionRef$current8 = actionRef.current) === null || _actionRef$current8 === void 0 ? void 0 : (_actionRef$current8$r = _actionRef$current8.resetPage) === null || _actionRef$current8$r === void 0 ? void 0 : _actionRef$current8$r.call(_actionRef$current8);
+    // 清空表格选择
+    (_actionRef$current9 = actionRef.current) === null || _actionRef$current9 === void 0 ? void 0 : (_actionRef$current9$c = _actionRef$current9.clearRowSelection) === null || _actionRef$current9$c === void 0 ? void 0 : _actionRef$current9$c.call(_actionRef$current9);
+    setVisible(false);
+    // 设置 url
+    if (bindUrl && (bindUrlProps === null || bindUrlProps === void 0 ? void 0 : bindUrlProps.headerFilters) !== false && (urlState === null || urlState === void 0 ? void 0 : urlState["filter".concat(column === null || column === void 0 ? void 0 : column.dataIndex)]) !== selected.join(',')) {
+      setUrlState === null || setUrlState === void 0 ? void 0 : setUrlState(_defineProperty({}, "filter".concat(column === null || column === void 0 ? void 0 : column.dataIndex), selected.join(',')));
+    }
+  };
+  // 重置回调
+  var onFilterReset = function onFilterReset() {
+    var _actionRef$current$ge7, _actionRef$current10, _actionRef$current10$, _actionRef$current10$2, _actionRef$current11, _actionRef$current11$, _actionRef$current12, _actionRef$current12$;
+    setSelected([]);
+    var rules = (_actionRef$current$ge7 = (_actionRef$current10 = actionRef.current) === null || _actionRef$current10 === void 0 ? void 0 : (_actionRef$current10$ = _actionRef$current10.getState) === null || _actionRef$current10$ === void 0 ? void 0 : (_actionRef$current10$2 = _actionRef$current10$.call(_actionRef$current10)) === null || _actionRef$current10$2 === void 0 ? void 0 : _actionRef$current10$2.filterRules) !== null && _actionRef$current$ge7 !== void 0 ? _actionRef$current$ge7 : {};
+    (_actionRef$current11 = actionRef.current) === null || _actionRef$current11 === void 0 ? void 0 : (_actionRef$current11$ = _actionRef$current11.setFilterRules) === null || _actionRef$current11$ === void 0 ? void 0 : _actionRef$current11$.call(_actionRef$current11, _objectSpread(_objectSpread({}, rules), {}, _defineProperty({}, column.dataIndex, {
+      rules: [],
+      params: ''
+    })));
+    (_actionRef$current12 = actionRef.current) === null || _actionRef$current12 === void 0 ? void 0 : (_actionRef$current12$ = _actionRef$current12.filterDataSource) === null || _actionRef$current12$ === void 0 ? void 0 : _actionRef$current12$.call(_actionRef$current12, column.dataIndex);
+    if (selected.length > 0) {
+      var _actionRef$current13, _actionRef$current14, _actionRef$current14$, _actionRef$current15, _actionRef$current15$, _actionRef$current16, _actionRef$current16$;
+      var targetPageKey = 'currentPage';
+      var pageInfo = (_actionRef$current13 = actionRef.current) === null || _actionRef$current13 === void 0 ? void 0 : _actionRef$current13.pageInfo;
+      if (pageInfo && (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.targetPageKey)) {
+        targetPageKey = pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.targetPageKey;
+      }
+      // 发送请求
+      (_actionRef$current14 = actionRef.current) === null || _actionRef$current14 === void 0 ? void 0 : (_actionRef$current14$ = _actionRef$current14.request) === null || _actionRef$current14$ === void 0 ? void 0 : _actionRef$current14$.call(_actionRef$current14, _defineProperty({}, targetPageKey, 1));
+      (_actionRef$current15 = actionRef.current) === null || _actionRef$current15 === void 0 ? void 0 : (_actionRef$current15$ = _actionRef$current15.resetPage) === null || _actionRef$current15$ === void 0 ? void 0 : _actionRef$current15$.call(_actionRef$current15);
+      // 清空表格选择
+      (_actionRef$current16 = actionRef.current) === null || _actionRef$current16 === void 0 ? void 0 : (_actionRef$current16$ = _actionRef$current16.clearRowSelection) === null || _actionRef$current16$ === void 0 ? void 0 : _actionRef$current16$.call(_actionRef$current16);
+      if (bindUrl && (bindUrlProps === null || bindUrlProps === void 0 ? void 0 : bindUrlProps.headerFilters) !== false) {
+        setUrlState === null || setUrlState === void 0 ? void 0 : setUrlState(_defineProperty({}, "filter".concat(column === null || column === void 0 ? void 0 : column.dataIndex), undefined));
+      }
+    }
+  };
   // 渲染单选
   var renderSingle = function renderSingle() {
-    return filters === null || filters === void 0 ? void 0 : filters.map(function (_ref3) {
+    return filters === null || filters === void 0 ? void 0 : filters.map(function (_ref5) {
       var _value$toString;
-      var label = _ref3.label,
-        value = _ref3.value;
+      var label = _ref5.label,
+        value = _ref5.value;
       var valueStr = (_value$toString = value === null || value === void 0 ? void 0 : value.toString()) !== null && _value$toString !== void 0 ? _value$toString : '';
       return /*#__PURE__*/React.createElement(RadioItem, {
         id: valueStr,
@@ -85,10 +162,10 @@ var Filter = function Filter(props) {
   };
   // 渲染多选
   var renderMultiple = function renderMultiple() {
-    return filters === null || filters === void 0 ? void 0 : filters.map(function (_ref4) {
+    return filters === null || filters === void 0 ? void 0 : filters.map(function (_ref6) {
       var _value$toString2;
-      var label = _ref4.label,
-        value = _ref4.value;
+      var label = _ref6.label,
+        value = _ref6.value;
       var valueStr = (_value$toString2 = value === null || value === void 0 ? void 0 : value.toString()) !== null && _value$toString2 !== void 0 ? _value$toString2 : '';
       return /*#__PURE__*/React.createElement(CheckboxItem, {
         key: valueStr,
@@ -145,70 +222,14 @@ var Filter = function Filter(props) {
     className: cls({
       btn: true
     }),
-    onClick: function onClick() {
-      var _actionRef$current2, _actionRef$current2$f, _actionRef$current$ge6, _actionRef$current3, _actionRef$current3$g, _actionRef$current3$g2, _actionRef$current4, _actionRef$current4$s, _actionRef$current5, _actionRef$current7, _actionRef$current7$r, _actionRef$current8, _actionRef$current8$r, _actionRef$current9, _actionRef$current9$c;
-      (_actionRef$current2 = actionRef.current) === null || _actionRef$current2 === void 0 ? void 0 : (_actionRef$current2$f = _actionRef$current2.filterDataSource) === null || _actionRef$current2$f === void 0 ? void 0 : _actionRef$current2$f.call(_actionRef$current2, column.dataIndex);
-      // 先获取此列的param
-      var param = '';
-      if (column.beforeFilter) {
-        var _column$beforeFilter;
-        param = (_column$beforeFilter = column.beforeFilter) === null || _column$beforeFilter === void 0 ? void 0 : _column$beforeFilter.call(column, selected);
-      } else {
-        param = selected.join(',');
-      }
-      // 需要带上其他所有的信息
-      var rules = (_actionRef$current$ge6 = (_actionRef$current3 = actionRef.current) === null || _actionRef$current3 === void 0 ? void 0 : (_actionRef$current3$g = _actionRef$current3.getState) === null || _actionRef$current3$g === void 0 ? void 0 : (_actionRef$current3$g2 = _actionRef$current3$g.call(_actionRef$current3)) === null || _actionRef$current3$g2 === void 0 ? void 0 : _actionRef$current3$g2.filterRules) !== null && _actionRef$current$ge6 !== void 0 ? _actionRef$current$ge6 : {};
-      // 再设置所有的列筛选状态
-      (_actionRef$current4 = actionRef.current) === null || _actionRef$current4 === void 0 ? void 0 : (_actionRef$current4$s = _actionRef$current4.setFilterRules) === null || _actionRef$current4$s === void 0 ? void 0 : _actionRef$current4$s.call(_actionRef$current4, _objectSpread(_objectSpread({}, rules), {}, _defineProperty({}, column.dataIndex, {
-        rules: selected,
-        params: param
-      })));
-      var targetPageKey = 'currentPage';
-      var pageInfo = (_actionRef$current5 = actionRef.current) === null || _actionRef$current5 === void 0 ? void 0 : _actionRef$current5.pageInfo;
-      if (pageInfo && (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.targetPageKey)) {
-        targetPageKey = pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.targetPageKey;
-      }
-      if (switchCardView === 'card') {
-        var _actionRef$current6, _actionRef$current6$s;
-        (_actionRef$current6 = actionRef.current) === null || _actionRef$current6 === void 0 ? void 0 : (_actionRef$current6$s = _actionRef$current6.setData) === null || _actionRef$current6$s === void 0 ? void 0 : _actionRef$current6$s.call(_actionRef$current6, []);
-      }
-      // 发送请求
-      (_actionRef$current7 = actionRef.current) === null || _actionRef$current7 === void 0 ? void 0 : (_actionRef$current7$r = _actionRef$current7.request) === null || _actionRef$current7$r === void 0 ? void 0 : _actionRef$current7$r.call(_actionRef$current7, _defineProperty({}, targetPageKey, 1));
-      (_actionRef$current8 = actionRef.current) === null || _actionRef$current8 === void 0 ? void 0 : (_actionRef$current8$r = _actionRef$current8.resetPage) === null || _actionRef$current8$r === void 0 ? void 0 : _actionRef$current8$r.call(_actionRef$current8);
-      // 清空表格选择
-      (_actionRef$current9 = actionRef.current) === null || _actionRef$current9 === void 0 ? void 0 : (_actionRef$current9$c = _actionRef$current9.clearRowSelection) === null || _actionRef$current9$c === void 0 ? void 0 : _actionRef$current9$c.call(_actionRef$current9);
-      setVisible(false);
-    }
+    onClick: onFilterOk
   }, getMessage('ok')), /*#__PURE__*/React.createElement(Button, {
     type: "normal",
     size: "small",
     className: cls({
       btn: true
     }),
-    onClick: function onClick() {
-      var _actionRef$current$ge7, _actionRef$current10, _actionRef$current10$, _actionRef$current10$2, _actionRef$current11, _actionRef$current11$, _actionRef$current12, _actionRef$current12$;
-      setSelected([]);
-      var rules = (_actionRef$current$ge7 = (_actionRef$current10 = actionRef.current) === null || _actionRef$current10 === void 0 ? void 0 : (_actionRef$current10$ = _actionRef$current10.getState) === null || _actionRef$current10$ === void 0 ? void 0 : (_actionRef$current10$2 = _actionRef$current10$.call(_actionRef$current10)) === null || _actionRef$current10$2 === void 0 ? void 0 : _actionRef$current10$2.filterRules) !== null && _actionRef$current$ge7 !== void 0 ? _actionRef$current$ge7 : {};
-      (_actionRef$current11 = actionRef.current) === null || _actionRef$current11 === void 0 ? void 0 : (_actionRef$current11$ = _actionRef$current11.setFilterRules) === null || _actionRef$current11$ === void 0 ? void 0 : _actionRef$current11$.call(_actionRef$current11, _objectSpread(_objectSpread({}, rules), {}, _defineProperty({}, column.dataIndex, {
-        rules: [],
-        params: ''
-      })));
-      (_actionRef$current12 = actionRef.current) === null || _actionRef$current12 === void 0 ? void 0 : (_actionRef$current12$ = _actionRef$current12.filterDataSource) === null || _actionRef$current12$ === void 0 ? void 0 : _actionRef$current12$.call(_actionRef$current12, column.dataIndex);
-      if (selected.length > 0) {
-        var _actionRef$current13, _actionRef$current14, _actionRef$current14$, _actionRef$current15, _actionRef$current15$, _actionRef$current16, _actionRef$current16$;
-        var targetPageKey = 'currentPage';
-        var pageInfo = (_actionRef$current13 = actionRef.current) === null || _actionRef$current13 === void 0 ? void 0 : _actionRef$current13.pageInfo;
-        if (pageInfo && (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.targetPageKey)) {
-          targetPageKey = pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.targetPageKey;
-        }
-        // 发送请求
-        (_actionRef$current14 = actionRef.current) === null || _actionRef$current14 === void 0 ? void 0 : (_actionRef$current14$ = _actionRef$current14.request) === null || _actionRef$current14$ === void 0 ? void 0 : _actionRef$current14$.call(_actionRef$current14, _defineProperty({}, targetPageKey, 1));
-        (_actionRef$current15 = actionRef.current) === null || _actionRef$current15 === void 0 ? void 0 : (_actionRef$current15$ = _actionRef$current15.resetPage) === null || _actionRef$current15$ === void 0 ? void 0 : _actionRef$current15$.call(_actionRef$current15);
-        // 清空表格选择
-        (_actionRef$current16 = actionRef.current) === null || _actionRef$current16 === void 0 ? void 0 : (_actionRef$current16$ = _actionRef$current16.clearRowSelection) === null || _actionRef$current16$ === void 0 ? void 0 : _actionRef$current16$.call(_actionRef$current16);
-      }
-      // setVisible(!visible);
-    }
+    onClick: onFilterReset
   }, getMessage('reset'))))));
 };
-export default Filter;
+export default /*#__PURE__*/memo(Filter);

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

@@ -1,4 +1,4 @@
-var _excluded = ["header", "mainAction", "extra", "actionRef", "dataFilter", "dataFilterFormRef", "afterDataFilter", "rowSelection", "toolBar", "dataTeamixSpm"];
+var _excluded = ["header", "mainAction", "extra", "actionRef", "dataFilter", "dataFilterFormRef", "afterDataFilter", "rowSelection", "toolBar", "dataTeamixSpm", "bindUrl", "bindUrlProps"];
 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; }
@@ -25,6 +25,8 @@ var Layout = function Layout(props) {
     rowSelection = props.rowSelection,
     toolBar = props.toolBar,
     dataTeamixSpm = props.dataTeamixSpm,
+    bindUrl = props.bindUrl,
+    bindUrlProps = props.bindUrlProps,
     otherProps = _objectWithoutProperties(props, _excluded);
   // 渲染主操作区
   var renderMainAction = function renderMainAction() {
@@ -103,7 +105,8 @@ var Layout = function Layout(props) {
             (dataFilter === null || dataFilter === void 0 ? void 0 : dataFilter.onExpand) && (dataFilter === null || dataFilter === void 0 ? void 0 : dataFilter.onExpand(expand));
           },
           addonBefore: renderMainAction(),
-          addonAfter: renderAddonAfter()
+          addonAfter: renderAddonAfter(),
+          bindUrl: bindUrl && (bindUrlProps === null || bindUrlProps === void 0 ? void 0 : bindUrlProps.filters) !== false
         }, dataFilter)), afterDataFilter && /*#__PURE__*/React.createElement("div", {
           className: "mb8 ".concat(cls('after-data-filter-wrapper'))
         }, afterDataFilter));

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

@@ -43,5 +43,6 @@ $prefix: 'teamix-pro-table-layout';
   &-addon-after-wrapper {
     display: flex;
     align-items: center;
+    margin-bottom: 8px;
   }
 }

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", "autoRefreshProps", "customRequest", "filterColumnType", "defaultFilterParams", "reserveSelectedRecords", "size", "disableSelectAll", "context", "fixedTableBody", "isTree", "toolBarAutoWidth", "data-teamix-spm", "switchCardView", "cardViewProps", "defaultView", "emptyProps"],
+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"],
   _excluded2 = ["onChange"];
 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); }
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
@@ -35,6 +35,8 @@ import classNames from 'classnames';
 import ProPageContainer from '../page-container';
 import debounce from 'lodash.debounce';
 import CardView from './components/CardView';
+import { useUrlState } from '@teamix/hooks';
+import { getUrlStateFilter } from './utils/util';
 export * from './typing';
 var cls = usePrefixCls('teamix-pro-table');
 /**
@@ -83,7 +85,7 @@ var globalFormatSort = function globalFormatSort(sort) {
   return {};
 };
 var ProTable = function ProTable(props) {
-  var _rowSelection$selecte;
+  var _urlState$currentPage, _rowSelection$selecte;
   var header = props.header,
     className = props.className,
     tableClassName = props.tableClassName,
@@ -156,15 +158,21 @@ var ProTable = function ProTable(props) {
     _props$defaultView = props.defaultView,
     defaultView = _props$defaultView === void 0 ? 'table' : _props$defaultView,
     emptyProps = props.emptyProps,
+    bindUrlProps = props.bindUrlProps,
+    bindUrl = props.bindUrl,
     otherProps = _objectWithoutProperties(props, _excluded);
   var targetPageKey = pageKey || globalPageKey;
   var targetPageSizeKey = pageSizeKey || globalPageSizeKey;
   var targetFormatSort = formatSort || globalFormatSort;
-  var _useState = useState(1),
+  var _ref = bindUrl ? useUrlState() : [],
+    _ref2 = _slicedToArray(_ref, 2),
+    urlState = _ref2[0],
+    setUrlState = _ref2[1];
+  var _useState = useState((_urlState$currentPage = urlState === null || urlState === void 0 ? void 0 : urlState.currentPage) !== null && _urlState$currentPage !== void 0 ? _urlState$currentPage : 1),
     _useState2 = _slicedToArray(_useState, 2),
     currentPage = _useState2[0],
     setCurrentPage = _useState2[1];
-  var _useState3 = useState(props.pageSize || 10),
+  var _useState3 = useState((urlState === null || urlState === void 0 ? void 0 : urlState.pageSize) || props.pageSize || 10),
     _useState4 = _slicedToArray(_useState3, 2),
     pageSize = _useState4[0],
     setPageSize = _useState4[1];
@@ -206,6 +214,24 @@ var ProTable = function ProTable(props) {
     _useState20 = _slicedToArray(_useState19, 2),
     showLoading = _useState20[0],
     setShowLoading = _useState20[1];
+  // 表格内部用作存储的 Ref，标识 Table 组件是否被第一次渲染。用作 useUrlState filter 第一次渲染时使用 state 数据请求
+  var dataRef = useRef({
+    flag: true
+  });
+  useEffect(function () {
+    if (bindUrl && (bindUrlProps === null || bindUrlProps === void 0 ? void 0 : bindUrlProps.pagination) !== false) {
+      if ((urlState === null || urlState === void 0 ? void 0 : urlState.currentPage) !== currentPage) {
+        setUrlState === null || setUrlState === void 0 ? void 0 : setUrlState({
+          currentPage: currentPage
+        });
+      }
+      if ((urlState === null || urlState === void 0 ? void 0 : urlState.pageSize) !== pageSize) {
+        setUrlState === null || setUrlState === void 0 ? void 0 : setUrlState({
+          pageSize: pageSize
+        });
+      }
+    }
+  }, [currentPage, pageSize, urlState]);
   // 存储能够被 on 监听到的 ProTable 状态
   // 因为只做存储用。不需要更新视图以及需要同步更改。所以不使用 setState 更新
   var _useState21 = useState({
@@ -492,13 +518,13 @@ var ProTable = function ProTable(props) {
       actionRefCallback[state][name] = fun;
     },
     off: function off(name) {
-      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 (_ref3) {
-          var _ref4 = _slicedToArray(_ref3, 1),
-            k = _ref4[0];
+      actionRefCallback = Object.fromEntries(Object.entries(actionRefCallback).map(function (_ref3) {
+        var _ref4 = _slicedToArray(_ref3, 2),
+          k = _ref4[0],
+          v = _ref4[1];
+        var filterV = Object.fromEntries(Object.entries(v).filter(function (_ref5) {
+          var _ref6 = _slicedToArray(_ref5, 1),
+            k = _ref6[0];
           return k !== name;
         }));
         return [k, filterV];
@@ -734,6 +760,11 @@ var ProTable = function ProTable(props) {
   // 请求函数
   function _request(params, noLoading, filterParams, isReset) {
     var _dataFilterFormRef$cu2, _actionRef$current$ge, _actionRef$current6, _actionRef$current6$g, _objectSpread3;
+    // 首次渲染表格，获取 urlState 上的 表头 filter 数据
+    if (bindUrl && (bindUrlProps === null || bindUrlProps === void 0 ? void 0 : bindUrlProps.headerFilters) !== false && dataRef.current.flag) {
+      getUrlStateFilter(urlState !== null && urlState !== void 0 ? urlState : {}, actionRef);
+      dataRef.current.flag = false;
+    }
     // 如果没有传 url 且没有 customRequest，直接返回
     if (!url && !customRequest) {
       return;
@@ -789,11 +820,11 @@ var ProTable = function ProTable(props) {
             success = res.success;
           if (success === true) {
             // 设置 dataSource、total
-            if (switchViewState === 'table' || params['targetPageKey'] === 1 || isReset || (cardViewProps === null || cardViewProps === void 0 ? void 0 : cardViewProps.useTablePagination)) {
+            if (switchViewState === 'table' || params[targetPageKey] === 1 || isReset || (cardViewProps === null || cardViewProps === void 0 ? void 0 : cardViewProps.useTablePagination)) {
               _setData(dataRes || []);
               setTotal(totalRes || (dataRes === null || dataRes === void 0 ? void 0 : dataRes.length));
             }
-            if (switchViewState === 'card' && params['targetPageKey'] !== 1 && !isReset && !(cardViewProps === null || cardViewProps === void 0 ? void 0 : cardViewProps.useTablePagination)) {
+            if (switchViewState === 'card' && params[targetPageKey] !== 1 && !isReset && !(cardViewProps === null || cardViewProps === void 0 ? void 0 : cardViewProps.useTablePagination)) {
               _setData([].concat(_toConsumableArray(data), _toConsumableArray(dataRes || [])));
               setTotal(total + (totalRes || (dataRes === null || dataRes === void 0 ? void 0 : dataRes.length)));
             }
@@ -906,11 +937,13 @@ var ProTable = function ProTable(props) {
         switchCardView: switchCardView,
         defaultView: defaultView,
         autoRefresh: autoRefresh,
-        autoRefreshProps: autoRefreshProps
+        autoRefreshProps: autoRefreshProps,
+        bindUrlProps: bindUrlProps,
+        bindUrl: bindUrl
       }), switchViewState === 'table' && /*#__PURE__*/React.createElement(Table.StickyLock, _objectSpread({
         hasBorder: false,
         dataSource: showSkeleton ? skeletonDataSource : data || props.dataSource,
-        columns: genProColumnToColumn(filteredColumns, showSkeleton, actionRef, context, dataTeamixSpm),
+        columns: genProColumnToColumn(filteredColumns, showSkeleton, actionRef, context, dataTeamixSpm, bindUrl, bindUrlProps),
         loading: getTableLoading(),
         className: classNames('teamix-pro-table', tableClassName, {
           'with-row-select': rowSelection,
@@ -1022,9 +1055,9 @@ var ProTable = function ProTable(props) {
     }
     if (showPagination && switchViewState === 'table' || (cardViewProps === null || cardViewProps === void 0 ? void 0 : cardViewProps.useTablePagination) && switchViewState === 'card') {
       var _props$paginationProp3;
-      var _ref6 = (_props$paginationProp3 = props === null || props === void 0 ? void 0 : props.paginationProps) !== null && _props$paginationProp3 !== void 0 ? _props$paginationProp3 : {},
-        onPaginationPropsChange = _ref6.onChange,
-        othersPaginationProps = _objectWithoutProperties(_ref6, _excluded2);
+      var _ref8 = (_props$paginationProp3 = props === null || props === void 0 ? void 0 : props.paginationProps) !== null && _props$paginationProp3 !== void 0 ? _props$paginationProp3 : {},
+        onPaginationPropsChange = _ref8.onChange,
+        othersPaginationProps = _objectWithoutProperties(_ref8, _excluded2);
       return /*#__PURE__*/React.createElement("div", {
         className: cls('footer', {
           'footer-has-rowSelection': rowSelection,