@teamix/pro 1.3.15 → 1.3.16

package/es/global.scss

@@ -0,0 +1,45 @@
+// transition 切换主题优化，暂时先写到 pro 里，后面加到基础组件里
+
+// table 行背景色
+tr.next-table-row{
+  transition: color 0s;
+}
+
+// normal 按钮
+button.next-btn.next-medium.next-btn-normal {
+  transition: color 0s;
+}
+
+// input 背景色
+.next-input.next-medium {
+  transition: color 0s;
+}
+
+// radio 背景色
+.next-radio-wrapper.checked .next-radio-inner:after {
+  transition: color 0s;
+}
+
+.next-radio-wrapper .next-radio-inner {
+  transition: color 0s;
+}
+
+// checkbox 背景色
+.next-checkbox-wrapper .next-checkbox-inner {
+  transition: color 0s;
+}
+
+// 侧导背景色
+.next-menu-item.next-nav-item {
+  transition: color 0s;
+}
+
+// 标签背景色
+.next-tag {
+  transition: color 0s;
+}
+
+// 可关闭tag
+.next-tag.next-tag.next-tag.next-tag-closable.next-tag-level-normal.next-tag-closable {
+  transition: color 0s;
+}

package/es/index.d.ts

@@ -13,6 +13,7 @@ import ProSidebar from './sidebar';
 import { ProTimeline } from './timeline';
 import * as nocode from './nocode';
 import * as templates from './templates';
+import './global.scss';
 export * from './actions';
 export * from './card';
 export * from './field';
@@ -26,5 +27,5 @@ export * from './table';
 export * from './sidebar';
 export * from './utils';
 export * from './timeline';
-declare const version = "1.3.15";
+declare const version = "1.3.16";
 export { version, ProAction, ProCard, ProField, ProForm, ProInfo, ProPageContainer, ProPageHeader, ProSkeleton, ProTable, ProSidebar, ProTimeline, hooks, nocode, templates, utils, };

package/es/index.js

@@ -14,7 +14,8 @@ import ProSidebar from './sidebar';
 import { ProTimeline } from './timeline';
 import * as nocode from './nocode';
 import * as templates from './templates';
-import TeamixIcon from '@teamix/icon'; // 设置图标源
+import TeamixIcon from '@teamix/icon';
+import './global.scss'; // 设置图标源
 
 TeamixIcon.setConfig(utils.getTeamixIconConfig());
 export * from './actions';
@@ -31,6 +32,6 @@ export * from './sidebar';
 export * from './utils'; // export * from './sidebar';
 
 export * from './timeline';
-var version = '1.3.15';
+var version = '1.3.16';
 export { version, ProAction, ProCard, ProField, ProForm, ProInfo, // ProLayout,
 ProPageContainer, ProPageHeader, ProSkeleton, ProTable, ProSidebar, ProTimeline, hooks, nocode, templates, utils };

package/es/page-header/index.d.ts

@@ -20,6 +20,8 @@ export declare type ProPageHeaderDataItem = {
 export declare type ProPageHeaderProps = {
     /** 标题 */
     title?: React.ReactNode;
+    /** 标题说明 */
+    titleTooltip?: React.ReactNode;
     /** 描述 */
     description?: React.ReactNode;
     /** 图标 */

package/es/page-header/index.js

@@ -1,6 +1,6 @@
 var _excluded = ["text", "children"],
     _excluded2 = ["color", "title", "num", "className"],
-    _excluded3 = ["title", "description", "icon", "iconColor", "iconBackgroundType", "iconBackgroundColor", "goback", "operation", "extra", "image", "loading", "breadcrumb", "tags", "data", "info", "children", "className", "style", "tabs"];
+    _excluded3 = ["title", "titleTooltip", "description", "icon", "iconColor", "iconBackgroundType", "iconBackgroundColor", "goback", "operation", "extra", "image", "loading", "breadcrumb", "tags", "data", "info", "children", "className", "style", "tabs"];
 
 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; }
 
@@ -16,13 +16,14 @@ import React from 'react';
 import { useHistory } from 'react-router-dom';
 import classnames from 'classnames';
 import TeamixIcon from '@teamix/icon';
-import { Breadcrumb } from '@alicloudfe/components';
+import { Breadcrumb, Balloon } from '@alicloudfe/components';
 import { baseClass, goToLink, renderTags, isPresetColor, getColor, getColorClassName, getBackgroundColorClassName, CapsuleTab } from '@teamix/utils';
 import { ProActionGroup } from '../actions';
 import { ProSkeletonRaw } from '../skeleton';
 import ProInfo from '../info';
 import './index.scss';
 var cls = baseClass('teamix-pro-page-header');
+var Tooltip = Balloon.Tooltip;
 
 var renderNav = function renderNav(breadcrumbs) {
   if (breadcrumbs && breadcrumbs.length) {
@@ -133,6 +134,7 @@ var renderTabs = function renderTabs(tabs) {
 
 var ProPageHeader = function ProPageHeader(props) {
   var title = props.title,
+      titleTooltip = props.titleTooltip,
       description = props.description,
       icon = props.icon,
       iconColor = props.iconColor,
@@ -200,7 +202,15 @@ var ProPageHeader = function ProPageHeader(props) {
       size: "large"
     }) : /*#__PURE__*/React.createElement(React.Fragment, null, icon)), /*#__PURE__*/React.createElement("span", {
       className: cls('title-name')
-    }, title), renderTags(tags, 'large'), renderTabs(tabs !== null && tabs !== void 0 ? tabs : {}));
+    }, title, titleTooltip && /*#__PURE__*/React.createElement(Tooltip, {
+      trigger: /*#__PURE__*/React.createElement("span", {
+        className: cls('title-tooltip-icon')
+      }, /*#__PURE__*/React.createElement(TeamixIcon, {
+        type: "info-circle-line",
+        size: "xs"
+      })),
+      align: "t"
+    }, titleTooltip)), renderTags(tags, 'large'), renderTabs(tabs !== null && tabs !== void 0 ? tabs : {}));
   };
 
   return /*#__PURE__*/React.createElement("header", _objectSpread({

package/es/page-header/index.scss

@@ -43,6 +43,7 @@ $prefix: 'teamix-pro-page-header';
     font-weight: 500;
     align-items: center;
     word-break: break-all;
+    color: var(--color-text1-4);
 
     &-name {
       white-space: nowrap;
@@ -50,6 +51,13 @@ $prefix: 'teamix-pro-page-header';
       text-overflow: ellipsis;
     }
 
+    &-tooltip-icon {
+      position: relative;
+      margin-left: 2px;
+      display: inline-flex;
+      top: -7px;
+    }
+
     &-icon {
       padding: var(--s-1, 4px);
     }

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

@@ -32,11 +32,11 @@ $prefix: 'teamix-pro-table-layout';
   &-filter-btn:not(:first-child) {
     margin-left: 8px;
   }
-  &-panel-filter {
-    margin: 8px 0;
-    padding: 16px;
-    background: var(--panel-filter-bg, var(--color-fill1-2));
-  }
+  // &-panel-filter {
+  //   margin: 8px 0;
+  //   padding: 16px;
+  //   background: var(--panel-filter-bg, var(--color-fill1-2));
+  // }
   &-main-action {
     margin-bottom: 8px;
   }

package/lib/form/Filter/index.js

@@ -43,9 +43,11 @@ var _Layout = require("./Layout");
 
 var _useSpecialProps2 = _interopRequireDefault(require("./useSpecialProps"));
 
+var _useBindUrl2 = _interopRequireDefault(require("./useBindUrl"));
+
 require("./index.scss");
 
-var _excluded = ["addonAfter", "addonBefore", "mode", "purePanel", "expand", "formRef", "defaultFilterValue", "filterValues", "filterDebounce", "onFilter", "onInit", "onReset", "onExpand", "onChange"];
+var _excluded = ["addonAfter", "addonBefore", "mode", "purePanel", "expand", "formRef", "defaultFilterValue", "filterValues", "filterDebounce", "bindUrl", "onFilter", "onInit", "onReset", "onExpand", "onChange"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -100,9 +102,10 @@ var QueryFilter = /*#__PURE__*/(0, _react.memo)(function (props) {
       defaultFilterValue = props.defaultFilterValue,
       filterValues = props.filterValues,
       filterDebounce = props.filterDebounce,
-      onFilter = props.onFilter,
-      onInit = props.onInit,
-      onReset = props.onReset,
+      bindUrl = props.bindUrl,
+      outerFilter = props.onFilter,
+      outerInit = props.onInit,
+      outerReset = props.onReset,
       onExpand = props.onExpand,
       onChange = props.onChange,
       otherProps = _objectWithoutProperties(props, _excluded);
@@ -121,15 +124,27 @@ var QueryFilter = /*#__PURE__*/(0, _react.memo)(function (props) {
       setTagDataSource = _useState4[1];
 
   var filterItem = (0, _react.useRef)([]);
-  var defaultForm = mode === 'panel' ? 'advanced' : 'simple';
-  var currentForm = (0, _react.useRef)(defaultForm);
+  var defaultFormName = mode === 'panel' ? 'advanced' : 'simple';
+  var currentFormName = (0, _react.useRef)(defaultFormName);
+  var currentForm = (0, _react.useRef)();
   var activeFilterValueRef = (0, _react.useRef)();
   var prefixCls = (0, _utils.usePrefixCls)('', {
     prefix: 'teamix-pro-form-query-filter'
   });
   var debounceFun = (0, _lodash.default)(function (fun, props) {
     return fun(props);
-  }, filterDebounce); // onInit
+  }, filterDebounce); // 绑定URL
+
+  var _useBindUrl = (0, _useBindUrl2.default)(bindUrl, {
+    onInit: outerInit,
+    onFilter: outerFilter,
+    onReset: outerReset
+  }, currentForm),
+      setValuesByUrlState = _useBindUrl.setValuesByUrlState,
+      onInit = _useBindUrl.onInit,
+      onFilter = _useBindUrl.onFilter,
+      onReset = _useBindUrl.onReset; // onInit
+
 
   var initialRequestRef = (0, _react.useRef)(!!(props === null || props === void 0 ? void 0 : props.initialRequest));
   var filterEnable = (0, _react.useRef)('waiting');
@@ -150,29 +165,31 @@ var QueryFilter = /*#__PURE__*/(0, _react.memo)(function (props) {
               }); // 等待mounted + 字段loading结束 + initialRequest结束 => 表单默认值初始化完成
 
               if (!(form.mounted && !loadingField.length && !form.loading)) {
-                _context.next = 9;
+                _context.next = 10;
                 break;
               }
 
               onFormInit = undefined; // init后销毁 isFormInit 方法
 
-              if (!onInit) {
-                _context.next = 9;
+              setValuesByUrlState(form); // 配置URL参数到表单
+
+              if (!outerInit) {
+                _context.next = 10;
                 break;
               }
 
-              _context.next = 7;
+              _context.next = 8;
               return form.validate();
 
-            case 7:
-              onInit === null || onInit === void 0 ? void 0 : onInit((0, _reactive.toJS)(form.values)); // 设置Tag
+            case 8:
+              onInit((0, _reactive.toJS)(form.values)); // 设置Tag
 
               if (mode === 'panel') {
                 configFilterItem(advancedForm);
                 !panelVisible && configTag();
               }
 
-            case 9:
+            case 10:
             case "end":
               return _context.stop();
           }
@@ -187,10 +204,11 @@ var QueryFilter = /*#__PURE__*/(0, _react.memo)(function (props) {
 
 
   var setCurrentForm = function setCurrentForm(formName) {
-    currentForm.current = formName;
+    currentFormName.current = formName;
+    currentForm.current = formMap[formName];
+    var form = currentForm.current;
 
     if (formRef) {
-      var form = formMap[formName];
       formRef.current = form; // 自定义updateTags方法
 
       if (!formRef.current.updateTags) {
@@ -218,7 +236,7 @@ var QueryFilter = /*#__PURE__*/(0, _react.memo)(function (props) {
                     return form.validate();
 
                   case 4:
-                    onFilter === null || onFilter === void 0 ? void 0 : onFilter((0, _reactive.toJS)(form.values));
+                    onFilter((0, _reactive.toJS)(form.values));
                     updateTags(form);
 
                   case 6:
@@ -246,7 +264,7 @@ var QueryFilter = /*#__PURE__*/(0, _react.memo)(function (props) {
                   return form.validate();
 
                 case 2:
-                  onFilter === null || onFilter === void 0 ? void 0 : onFilter((0, _reactive.toJS)(form.values));
+                  onFilter((0, _reactive.toJS)(form.values));
 
                   if (formName === 'advanced') {
                     updateTags(form);
@@ -274,7 +292,7 @@ var QueryFilter = /*#__PURE__*/(0, _react.memo)(function (props) {
                     advancedForm.reset('*', config);
 
                     if (formName === 'advanced') {
-                      onReset === null || onReset === void 0 ? void 0 : onReset((0, _reactive.toJS)(advancedForm.values));
+                      onReset((0, _reactive.toJS)(advancedForm.values));
                       updateTags(form);
                     }
 
@@ -404,7 +422,7 @@ var QueryFilter = /*#__PURE__*/(0, _react.memo)(function (props) {
 
     if (result) {
       // 展开高级筛选，Light回填Advanced
-      if (currentForm.current === 'light') {
+      if (currentFormName.current === 'light') {
         var key = activeFilterValueRef.current;
         var value = lightForm.values[key];
         advancedForm.setValuesIn(key, value);
@@ -428,7 +446,7 @@ var QueryFilter = /*#__PURE__*/(0, _react.memo)(function (props) {
               return simpleForm.validate();
 
             case 2:
-              onFilter === null || onFilter === void 0 ? void 0 : onFilter(values);
+              onFilter(values);
 
             case 3:
             case "end":
@@ -444,7 +462,7 @@ var QueryFilter = /*#__PURE__*/(0, _react.memo)(function (props) {
   }(), [onFilter]); // 简单搜索Change
 
   var onSimpleChange = (0, _react.useCallback)(function (values, fieldValue, fieldName) {
-    if (currentForm.current === 'simple') {
+    if (currentFormName.current === 'simple') {
       onChange === null || onChange === void 0 ? void 0 : onChange(values, fieldValue, fieldName);
 
       if (filterEnable.current === 'filter') {
@@ -456,7 +474,7 @@ var QueryFilter = /*#__PURE__*/(0, _react.memo)(function (props) {
   var onLightFilter = (0, _react.useCallback)(function (values) {
     var _Object$keys;
 
-    onFilter === null || onFilter === void 0 ? void 0 : onFilter(values); // 清空advancedForm的值
+    onFilter(values); // 清空advancedForm的值
 
     var clearKeys = {};
     (_Object$keys = Object.keys(advancedForm.values)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.forEach(function (key) {
@@ -467,7 +485,7 @@ var QueryFilter = /*#__PURE__*/(0, _react.memo)(function (props) {
   }, [onFilter]); // 轻量搜索Change
 
   var onLightChange = (0, _react.useCallback)(function (values, fieldValue, fieldName) {
-    if (currentForm.current === 'light') {
+    if (currentFormName.current === 'light') {
       onChange === null || onChange === void 0 ? void 0 : onChange(values, fieldValue, fieldName);
 
       if (filterEnable.current === 'filter') {
@@ -478,7 +496,7 @@ var QueryFilter = /*#__PURE__*/(0, _react.memo)(function (props) {
 
   var onAdvancedFilter = (0, _react.useCallback)(function (values) {
     setCurrentForm('advanced');
-    onFilter === null || onFilter === void 0 ? void 0 : onFilter(values);
+    onFilter(values);
     configFilterItem(advancedForm); // 清空lightForm的值
 
     lightForm.reset('*', {
@@ -488,7 +506,7 @@ var QueryFilter = /*#__PURE__*/(0, _react.memo)(function (props) {
 
   var onAdvancedReset = (0, _react.useCallback)(function () {
     setCurrentForm('advanced');
-    onReset === null || onReset === void 0 ? void 0 : onReset((0, _reactive.toJS)(advancedForm.values));
+    onReset((0, _reactive.toJS)(advancedForm.values));
     configFilterItem(advancedForm); // 清空lightForm的值
 
     lightForm.reset('*', {
@@ -497,7 +515,7 @@ var QueryFilter = /*#__PURE__*/(0, _react.memo)(function (props) {
   }, [onReset]); // 高级搜索Change
 
   var onAdvancedChange = (0, _react.useCallback)(function (values, fieldValue, fieldName) {
-    if (currentForm.current === 'advanced') {
+    if (currentFormName.current === 'advanced') {
       onChange === null || onChange === void 0 ? void 0 : onChange(values, fieldValue, fieldName);
     }
   }, [onChange]); // 关闭标签清空表单字段值
@@ -512,7 +530,7 @@ var QueryFilter = /*#__PURE__*/(0, _react.memo)(function (props) {
 
     advancedForm.setValuesIn(key, newValue);
     updateTags(advancedForm);
-    onFilter === null || onFilter === void 0 ? void 0 : onFilter((0, _reactive.toJS)(advancedForm.values));
+    onFilter((0, _reactive.toJS)(advancedForm.values));
   }, [onFilter]); // initialRequest 的回调
 
   var onInitialComplete = (0, _react.useCallback)(function (form) {
@@ -523,7 +541,7 @@ var QueryFilter = /*#__PURE__*/(0, _react.memo)(function (props) {
   }, []); // 组件挂载
 
   (0, _react.useEffect)(function () {
-    setCurrentForm(currentForm.current);
+    setCurrentForm(currentFormName.current);
   }, []);
   return /*#__PURE__*/_react.default.createElement(_Layout.QueryFilterLayout, {
     className: (0, _classnames.default)(prefixCls, props.className),

package/lib/form/Filter/layout.scss

@@ -6,6 +6,10 @@ $query-filter-layout: #{$teamix-pro-form}-query-filter-layout;
   --panel-filter-bg: #1f1f1f;
 }
 
+.theme-hybridcloud {
+  --panel-filter-bg: var(--color-fill1-2);
+}
+
 .#{$query-filter-layout} {
   .#{$query-filter-layout}-inline {
     display: flex;

package/lib/form/Filter/useBindUrl.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (bindUrl: any, functions: any, formRef: any) => any;
+export default _default;

package/lib/form/Filter/useBindUrl.js

@@ -0,0 +1,129 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _hooks = require("@teamix/hooks");
+
+var _utils = require("@teamix/utils");
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _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; }
+
+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; }
+
+var _default = function _default(bindUrl, functions, formRef) {
+  // 预处理 bindUrl 参数（主要兼容 SelectGroup 组件）
+  var initializeBindUrl = function initializeBindUrl(options) {
+    return options ? _objectSpread(_objectSpread({}, options), {}, {
+      beforeStringify: function beforeStringify(values) {
+        var _Object$entries;
+
+        var beforeStringify = options.beforeStringify;
+
+        var newValues = _objectSpread({}, values);
+
+        (_Object$entries = Object.entries(values)) === null || _Object$entries === void 0 ? void 0 : _Object$entries.forEach(function (_ref) {
+          var _form$query;
+
+          var _ref2 = _slicedToArray(_ref, 2),
+              key = _ref2[0],
+              value = _ref2[1];
+
+          var form = formRef.current;
+          var field = (_form$query = form.query(key)) === null || _form$query === void 0 ? void 0 : _form$query.take();
+
+          if ((field === null || field === void 0 ? void 0 : field.component[0]) === 'SelectGroup') {
+            newValues[key] = value.map(function (_ref3) {
+              var key = _ref3.key,
+                  value = _ref3.value;
+              return key && value ? "".concat(key, "||").concat(value === null || value === void 0 ? void 0 : value.join('|')) : '';
+            });
+          }
+        });
+        return beforeStringify ? beforeStringify(newValues) : newValues;
+      }
+    }) : options;
+  }; // 通过 useUrlState 获取 url 上的参数和 url 配置方法
+
+
+  var _useUrlState = (0, _hooks.useUrlState)(undefined, initializeBindUrl(bindUrl)),
+      _useUrlState2 = _slicedToArray(_useUrlState, 2),
+      urlState = _useUrlState2[0],
+      setUrlState = _useUrlState2[1]; // 输出配置url参数的函数
+
+
+  var initializedFunctions = Object.entries(functions).reduce(function (prev, _ref4) {
+    var _ref5 = _slicedToArray(_ref4, 2),
+        key = _ref5[0],
+        fun = _ref5[1];
+
+    prev[key] = function (values) {
+      fun === null || fun === void 0 ? void 0 : fun(values);
+      setUrlState(values);
+    };
+
+    return prev;
+  }, {}); // 使用 url 参数配置 QueryFilter 默认值（移除非表单值，兼容数组数据，兼容 SelectGroup 组件）
+
+  var setValuesByUrlState = function setValuesByUrlState(form) {
+    if (urlState) {
+      var _Object$entries2;
+
+      (_Object$entries2 = Object.entries(urlState)) === null || _Object$entries2 === void 0 ? void 0 : _Object$entries2.forEach(function (_ref6) {
+        var _form$query2;
+
+        var _ref7 = _slicedToArray(_ref6, 2),
+            key = _ref7[0],
+            value = _ref7[1];
+
+        var field = (_form$query2 = form.query(key)) === null || _form$query2 === void 0 ? void 0 : _form$query2.take();
+
+        if (field) {
+          var newValue = value;
+
+          if (field.displayName === 'ArrayField') {
+            newValue = [].concat((0, _utils.isUsable)(newValue) ? newValue : []);
+          }
+
+          if (field.component[0] === 'SelectGroup') {
+            newValue = newValue.map(function (item) {
+              var _item$split = item === null || item === void 0 ? void 0 : item.split('||'),
+                  _item$split2 = _slicedToArray(_item$split, 2),
+                  key = _item$split2[0],
+                  value = _item$split2[1];
+
+              return {
+                key: key,
+                value: value === null || value === void 0 ? void 0 : value.split('|')
+              };
+            });
+          }
+
+          form.setValuesIn(key, newValue);
+        }
+      });
+    }
+  };
+
+  return _objectSpread({
+    setValuesByUrlState: setValuesByUrlState
+  }, initializedFunctions);
+};
+
+exports.default = _default;

package/lib/form/ProForm/index.js

@@ -135,7 +135,7 @@ var ProForm = /*#__PURE__*/(0, _react.memo)(function (_ref) {
 
   var mergedComponents = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, globalComponents), components), formilyComponents), _ProField.default);
 
-  var onAutoSubmit = (0, _useAutoSubmit.default)(onSubmit); // todo 需要formily支持断点下的属性更新
+  var onAutoSubmit = (0, _useAutoSubmit.default)(onSubmit, context); // todo 需要formily支持断点下的属性更新
 
   var getTeamixLayout = (0, _react.useMemo)(function () {
     return breakpoints ? {
@@ -160,7 +160,7 @@ var ProForm = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     if (initialValues) {
       form.setInitialValues(initialValues);
     } else if (initialRequest) {
-      (0, _useInitialRequest.default)(initialRequest).then(function (values) {
+      (0, _useInitialRequest.default)(initialRequest, context).then(function (values) {
         form.setInitialValues(values);
       }).finally(function () {
         onInitialComplete === null || onInitialComplete === void 0 ? void 0 : onInitialComplete(form);
@@ -205,10 +205,12 @@ var ProForm = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   }) : null, otherProps === null || otherProps === void 0 ? void 0 : otherProps.children);
 });
 
-ProForm.Field = function () {
+var Field = function Field() {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
 };
 
+Field.displayName = 'ProFormField';
+ProForm.Field = Field;
 ProForm.defaultProps = {
   colon: false,
   labelAlign: 'left',