Update from Vibe Studio

node_modules/@ant-design/pro-form/lib/layouts/StepsForm/StepForm.d.ts

@@ -0,0 +1,10 @@
+import type { FormProps } from 'antd';
+import type { StepProps } from 'rc-steps/lib/Step';
+import type { CommonFormProps } from '../../BaseForm';
+export type StepFormProps<T = Record<string, any>, U = Record<string, any>> = {
+    step?: number;
+    stepProps?: StepProps;
+    index?: number;
+} & Omit<FormProps<T>, 'onFinish' | 'form'> & Omit<CommonFormProps<T, U>, 'submitter' | 'form'>;
+declare function StepForm<T = Record<string, any>>(stepNativeProps: StepFormProps<T>): import("react/jsx-runtime").JSX.Element;
+export default StepForm;

node_modules/@ant-design/pro-form/lib/layouts/StepsForm/StepForm.js

@@ -0,0 +1,99 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _omit = _interopRequireDefault(require("rc-util/lib/omit"));
+var _warning = require("rc-util/lib/warning");
+var _react = require("react");
+var _BaseForm = require("../../BaseForm");
+var _index = require("./index");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["onFinish", "step", "formRef", "title", "stepProps"];
+function StepForm(stepNativeProps) {
+  var formRef = (0, _react.useRef)();
+  var context = (0, _react.useContext)(_index.StepsFormProvide);
+  var stepContext = (0, _react.useContext)(_index.StepFormProvide);
+  var props = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, stepNativeProps), stepContext);
+  var onFinish = props.onFinish,
+    step = props.step,
+    propFormRef = props.formRef,
+    title = props.title,
+    stepProps = props.stepProps,
+    restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  (0, _warning.noteOnce)(!restProps.submitter, 'StepForm 不包含提交按钮，请在 StepsForm 上');
+
+  /** 重置 formRef */
+  (0, _react.useImperativeHandle)(propFormRef, function () {
+    return formRef.current;
+  }, [propFormRef === null || propFormRef === void 0 ? void 0 : propFormRef.current]);
+
+  /** Dom 不存在的时候解除挂载 */
+  (0, _react.useEffect)(function () {
+    if (!(props.name || props.step)) return;
+    var name = (props.name || props.step).toString();
+    context === null || context === void 0 || context.regForm(name, props);
+    return function () {
+      context === null || context === void 0 || context.unRegForm(name);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  if (context && context !== null && context !== void 0 && context.formArrayRef) {
+    context.formArrayRef.current[step || 0] = formRef;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BaseForm.BaseForm, (0, _objectSpread2.default)({
+    formRef: formRef,
+    onFinish: ( /*#__PURE__*/function () {
+      var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(values) {
+        var success;
+        return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (restProps.name) {
+                context === null || context === void 0 || context.onFormFinish(restProps.name, values);
+              }
+              if (!onFinish) {
+                _context.next = 9;
+                break;
+              }
+              context === null || context === void 0 || context.setLoading(true);
+              // 如果报错，直接抛出
+              _context.next = 5;
+              return onFinish === null || onFinish === void 0 ? void 0 : onFinish(values);
+            case 5:
+              success = _context.sent;
+              if (success) {
+                context === null || context === void 0 || context.next();
+              }
+              context === null || context === void 0 || context.setLoading(false);
+              return _context.abrupt("return");
+            case 9:
+              if (!(context !== null && context !== void 0 && context.lastStep)) context === null || context === void 0 || context.next();
+            case 10:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function (_x) {
+        return _ref.apply(this, arguments);
+      };
+    }()),
+    onInit: function onInit(_, form) {
+      var _restProps$onInit;
+      formRef.current = form;
+      if (context && context !== null && context !== void 0 && context.formArrayRef) {
+        context.formArrayRef.current[step || 0] = formRef;
+      }
+      restProps === null || restProps === void 0 || (_restProps$onInit = restProps.onInit) === null || _restProps$onInit === void 0 || _restProps$onInit.call(restProps, _, form);
+    },
+    layout: "vertical"
+  }, (0, _omit.default)(restProps, ['layoutType', 'columns'])));
+}
+var _default = exports.default = StepForm;

node_modules/@ant-design/pro-form/lib/layouts/StepsForm/index.d.ts

@@ -0,0 +1,82 @@
+import type { FormInstance, StepsProps } from 'antd';
+import type { FormProviderProps } from 'antd/lib/form/context';
+import React from 'react';
+import type { ProFormInstance } from '../../BaseForm';
+import type { SubmitterProps } from '../../components';
+import type { ProFormProps } from '../ProForm';
+import type { StepFormProps } from './StepForm';
+type StepsFormProps<T = Record<string, any>> = {
+    /**
+     * 返回 true 会重置步数，并且清空表单
+     *
+     * @name 提交方法
+     */
+    onFinish?: (values: T) => Promise<boolean | void>;
+    current?: number;
+    stepsProps?: StepsProps;
+    formProps?: ProFormProps<T>;
+    onCurrentChange?: (current: number) => void;
+    /** 自定义步骤器 */
+    stepsRender?: (steps: {
+        key: string;
+        title?: React.ReactNode;
+    }[], defaultDom: React.ReactNode) => React.ReactNode;
+    /** @name 当前展示表单的 formRef */
+    formRef?: React.MutableRefObject<ProFormInstance<any> | undefined | null>;
+    /** @name 所有表单的 formMapRef */
+    formMapRef?: React.MutableRefObject<React.MutableRefObject<FormInstance<any> | undefined>[]>;
+    /**
+     * 自定义单个表单
+     *
+     * @param form From 的 dom，可以放置到别的位置
+     */
+    stepFormRender?: (from: React.ReactNode) => React.ReactNode;
+    /**
+     * 自定义整个表单区域
+     *
+     * @param form From 的 dom，可以放置到别的位置
+     * @param submitter 操作按钮
+     */
+    stepsFormRender?: (from: React.ReactNode, submitter: React.ReactNode) => React.ReactNode;
+    /** 按钮的统一配置，优先级低于分步表单的配置 */
+    submitter?: SubmitterProps<{
+        step: number;
+        onPre: () => void;
+        form?: FormInstance<any>;
+    }> | false;
+    containerStyle?: React.CSSProperties;
+    /**
+     * 自定義整個佈局。
+     *
+     * @param layoutDom stepsDom 和 formDom 元素可以放置在任何地方。
+     */
+    layoutRender?: (layoutDom: {
+        stepsDom: React.ReactElement;
+        formDom: React.ReactElement;
+    }) => React.ReactNode;
+} & Omit<FormProviderProps, 'children'>;
+export declare const StepsFormProvide: React.Context<{
+    regForm: (name: string, props: StepsFormProps<any>) => void;
+    unRegForm: (name: string) => void;
+    onFormFinish: (name: string, formData: any) => void;
+    keyArray: string[];
+    formArrayRef: React.MutableRefObject<React.MutableRefObject<FormInstance<any> | undefined>[]>;
+    loading: boolean;
+    setLoading: (loading: boolean) => void;
+    lastStep: boolean;
+    formMapRef: React.MutableRefObject<Map<string, StepFormProps>>;
+    next: () => void;
+} | undefined>;
+/**
+ * 给  StepForm 传递信息
+ */
+export declare const StepFormProvide: React.Context<StepFormProps<any> | null>;
+declare function StepsFormWarp<T = Record<string, any>>(props: StepsFormProps<T> & {
+    children: any;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace StepsFormWarp {
+    var StepForm: typeof import("./StepForm").default;
+    var useForm: typeof import("antd/es/form/Form").useForm;
+}
+export { StepsFormWarp as StepsForm };
+export type { StepFormProps, StepsFormProps };

node_modules/@ant-design/pro-form/lib/layouts/StepsForm/index.js

@@ -0,0 +1,432 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StepFormProvide = void 0;
+exports.StepsForm = StepsFormWarp;
+exports.StepsFormProvide = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _proProvider = require("@ant-design/pro-provider");
+var _proUtils = require("@ant-design/pro-utils");
+var _antd = require("antd");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _toArray = _interopRequireDefault(require("rc-util/lib/Children/toArray"));
+var _useMergedState3 = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
+var _react = _interopRequireWildcard(require("react"));
+var _StepForm = _interopRequireDefault(require("./StepForm"));
+var _style = require("./style");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["current", "onCurrentChange", "submitter", "stepsFormRender", "stepsRender", "stepFormRender", "stepsProps", "onFinish", "formProps", "containerStyle", "formRef", "formMapRef", "layoutRender"];
+var StepsFormProvide = exports.StepsFormProvide = /*#__PURE__*/_react.default.createContext(undefined);
+var StepsLayoutStrategy = {
+  horizontal: function horizontal(_ref) {
+    var stepsDom = _ref.stepsDom,
+      formDom = _ref.formDom;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Row, {
+        gutter: {
+          xs: 8,
+          sm: 16,
+          md: 24
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Col, {
+          span: 24,
+          children: stepsDom
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Row, {
+        gutter: {
+          xs: 8,
+          sm: 16,
+          md: 24
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Col, {
+          span: 24,
+          children: formDom
+        })
+      })]
+    });
+  },
+  vertical: function vertical(_ref2) {
+    var stepsDom = _ref2.stepsDom,
+      formDom = _ref2.formDom;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Row, {
+      align: "stretch",
+      wrap: true,
+      gutter: {
+        xs: 8,
+        sm: 16,
+        md: 24
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Col, {
+        xxl: 4,
+        xl: 6,
+        lg: 7,
+        md: 8,
+        sm: 10,
+        xs: 12,
+        children: /*#__PURE__*/_react.default.cloneElement(stepsDom, {
+          style: {
+            height: '100%'
+          }
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Col, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            width: '100%',
+            height: '100%'
+          },
+          children: formDom
+        })
+      })]
+    });
+  }
+};
+
+/**
+ * 给  StepForm 传递信息
+ */
+var StepFormProvide = exports.StepFormProvide = /*#__PURE__*/_react.default.createContext(null);
+function StepsForm(props) {
+  var _useContext = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var prefixCls = getPrefixCls('pro-steps-form');
+  var _useStyle = (0, _style.useStyle)(prefixCls),
+    wrapSSR = _useStyle.wrapSSR,
+    hashId = _useStyle.hashId;
+  var current = props.current,
+    onCurrentChange = props.onCurrentChange,
+    submitter = props.submitter,
+    stepsFormRender = props.stepsFormRender,
+    stepsRender = props.stepsRender,
+    stepFormRender = props.stepFormRender,
+    stepsProps = props.stepsProps,
+    onFinish = props.onFinish,
+    formProps = props.formProps,
+    containerStyle = props.containerStyle,
+    formRef = props.formRef,
+    propsFormMapRef = props.formMapRef,
+    propsLayoutRender = props.layoutRender,
+    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var formDataRef = (0, _react.useRef)(new Map());
+  var formMapRef = (0, _react.useRef)(new Map());
+  var formArrayRef = (0, _react.useRef)([]);
+  var _useState = (0, _react.useState)([]),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    formArray = _useState2[0],
+    setFormArray = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    loading = _useState4[0],
+    setLoading = _useState4[1];
+  var intl = (0, _proProvider.useIntl)();
+
+  /**
+   * 受控的方式来操作表单
+   */
+  var _useMergedState = (0, _useMergedState3.default)(0, {
+      value: props.current,
+      onChange: props.onCurrentChange
+    }),
+    _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
+    step = _useMergedState2[0],
+    setStep = _useMergedState2[1];
+  var layoutRender = (0, _react.useMemo)(function () {
+    return StepsLayoutStrategy[(stepsProps === null || stepsProps === void 0 ? void 0 : stepsProps.direction) || 'horizontal'];
+  }, [stepsProps === null || stepsProps === void 0 ? void 0 : stepsProps.direction]);
+  var lastStep = (0, _react.useMemo)(function () {
+    return step === formArray.length - 1;
+  }, [formArray.length, step]);
+
+  /**
+   * 注册一个form进入，方便进行 props 的修改
+   */
+  var regForm = (0, _react.useCallback)(function (name, childrenFormProps) {
+    if (!formMapRef.current.has(name)) {
+      setFormArray(function (oldFormArray) {
+        return [].concat((0, _toConsumableArray2.default)(oldFormArray), [name]);
+      });
+    }
+    formMapRef.current.set(name, childrenFormProps);
+  }, []);
+
+  /**
+   * 解除挂载掉这个 form，同时步数 -1
+   */
+  var unRegForm = (0, _react.useCallback)(function (name) {
+    setFormArray(function (oldFormArray) {
+      return oldFormArray.filter(function (n) {
+        return n !== name;
+      });
+    });
+    formMapRef.current.delete(name);
+    formDataRef.current.delete(name);
+  }, []);
+  (0, _react.useImperativeHandle)(propsFormMapRef, function () {
+    return formArrayRef.current;
+  }, [formArrayRef.current]);
+  (0, _react.useImperativeHandle)(formRef, function () {
+    var _formArrayRef$current;
+    return (_formArrayRef$current = formArrayRef.current[step || 0]) === null || _formArrayRef$current === void 0 ? void 0 : _formArrayRef$current.current;
+  }, [step, formArrayRef.current]);
+
+  /**
+   * ProForm处理了一下 from 的数据，在其中做了一些操作 如果使用 Provider 自带的，自带的数据处理就无法生效了
+   */
+  var onFormFinish = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(name, formData) {
+      var values, success;
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            formDataRef.current.set(name, formData);
+            // 如果不是最后一步
+            if (!(!lastStep || !onFinish)) {
+              _context.next = 3;
+              break;
+            }
+            return _context.abrupt("return");
+          case 3:
+            setLoading(true);
+            values = _proUtils.merge.apply(void 0, [{}].concat((0, _toConsumableArray2.default)(Array.from(formDataRef.current.values()))));
+            _context.prev = 5;
+            _context.next = 8;
+            return onFinish(values);
+          case 8:
+            success = _context.sent;
+            if (success) {
+              setStep(0);
+              formArrayRef.current.forEach(function (form) {
+                var _form$current;
+                return (_form$current = form.current) === null || _form$current === void 0 ? void 0 : _form$current.resetFields();
+              });
+            }
+            _context.next = 15;
+            break;
+          case 12:
+            _context.prev = 12;
+            _context.t0 = _context["catch"](5);
+            console.log(_context.t0);
+          case 15:
+            _context.prev = 15;
+            setLoading(false);
+            return _context.finish(15);
+          case 18:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[5, 12, 15, 18]]);
+    }));
+    return function (_x, _x2) {
+      return _ref3.apply(this, arguments);
+    };
+  }(), [lastStep, onFinish, setLoading, setStep]);
+  var stepsDom = (0, _react.useMemo)(function () {
+    var isNewAntd = (0, _proUtils.compareVersions)(_antd.version, '4.24.0') > -1;
+    var itemsProps = isNewAntd ? {
+      items: formArray.map(function (item) {
+        var itemProps = formMapRef.current.get(item);
+        return (0, _objectSpread2.default)({
+          key: item,
+          title: itemProps === null || itemProps === void 0 ? void 0 : itemProps.title
+        }, itemProps === null || itemProps === void 0 ? void 0 : itemProps.stepProps);
+      })
+    } : {};
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "".concat(prefixCls, "-steps-container ").concat(hashId).trim(),
+      style: {
+        maxWidth: Math.min(formArray.length * 320, 1160)
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Steps, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, stepsProps), itemsProps), {}, {
+        current: step,
+        onChange: undefined,
+        children: !isNewAntd && formArray.map(function (item) {
+          var itemProps = formMapRef.current.get(item);
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Steps.Step, (0, _objectSpread2.default)({
+            title: itemProps === null || itemProps === void 0 ? void 0 : itemProps.title
+          }, itemProps === null || itemProps === void 0 ? void 0 : itemProps.stepProps), item);
+        })
+      }))
+    });
+  }, [formArray, hashId, prefixCls, step, stepsProps]);
+  var onSubmit = (0, _proUtils.useRefFunction)(function () {
+    var _from$current;
+    var from = formArrayRef.current[step];
+    (_from$current = from.current) === null || _from$current === void 0 || _from$current.submit();
+  });
+
+  /** 上一页功能 */
+  var prePage = (0, _proUtils.useRefFunction)(function () {
+    if (step < 1) return;
+    setStep(step - 1);
+  });
+  var next = (0, _react.useMemo)(function () {
+    return submitter !== false && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+      type: "primary",
+      loading: loading
+    }, submitter === null || submitter === void 0 ? void 0 : submitter.submitButtonProps), {}, {
+      onClick: function onClick() {
+        var _submitter$onSubmit;
+        submitter === null || submitter === void 0 || (_submitter$onSubmit = submitter.onSubmit) === null || _submitter$onSubmit === void 0 || _submitter$onSubmit.call(submitter);
+        onSubmit();
+      },
+      children: intl.getMessage('stepsForm.next', '下一步')
+    }), "next");
+  }, [intl, loading, onSubmit, submitter]);
+  var pre = (0, _react.useMemo)(function () {
+    return submitter !== false && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, submitter === null || submitter === void 0 ? void 0 : submitter.resetButtonProps), {}, {
+      onClick: function onClick() {
+        var _submitter$onReset;
+        prePage();
+        submitter === null || submitter === void 0 || (_submitter$onReset = submitter.onReset) === null || _submitter$onReset === void 0 || _submitter$onReset.call(submitter);
+      },
+      children: intl.getMessage('stepsForm.prev', '上一步')
+    }), "pre");
+  }, [intl, prePage, submitter]);
+  var submit = (0, _react.useMemo)(function () {
+    return submitter !== false && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+      type: "primary",
+      loading: loading
+    }, submitter === null || submitter === void 0 ? void 0 : submitter.submitButtonProps), {}, {
+      onClick: function onClick() {
+        var _submitter$onSubmit2;
+        submitter === null || submitter === void 0 || (_submitter$onSubmit2 = submitter.onSubmit) === null || _submitter$onSubmit2 === void 0 || _submitter$onSubmit2.call(submitter);
+        onSubmit();
+      },
+      children: intl.getMessage('stepsForm.submit', '提交')
+    }), "submit");
+  }, [intl, loading, onSubmit, submitter]);
+  var nextPage = (0, _proUtils.useRefFunction)(function () {
+    if (step > formArray.length - 2) return;
+    setStep(step + 1);
+  });
+  var submitterDom = (0, _react.useMemo)(function () {
+    var buttons = [];
+    var index = step || 0;
+    if (index < 1) {
+      // 如果有且只有一个 StepForm 第一步就应该是提交按钮
+      if (formArray.length === 1) {
+        buttons.push(submit);
+      } else {
+        buttons.push(next);
+      }
+    } else if (index + 1 === formArray.length) {
+      buttons.push(pre, submit);
+    } else {
+      buttons.push(pre, next);
+    }
+    buttons = buttons.filter(_react.default.isValidElement);
+    if (submitter && submitter.render) {
+      var _formArrayRef$current2;
+      var submitterProps = {
+        form: (_formArrayRef$current2 = formArrayRef.current[step]) === null || _formArrayRef$current2 === void 0 ? void 0 : _formArrayRef$current2.current,
+        onSubmit: onSubmit,
+        step: step,
+        onPre: prePage
+      };
+      return submitter.render(submitterProps, buttons);
+    }
+    if (submitter && (submitter === null || submitter === void 0 ? void 0 : submitter.render) === false) {
+      return null;
+    }
+    return buttons;
+  }, [formArray.length, next, onSubmit, pre, prePage, step, submit, submitter]);
+  var formDom = (0, _react.useMemo)(function () {
+    return (0, _toArray.default)(props.children).map(function (item, index) {
+      var itemProps = item.props;
+      var name = itemProps.name || "".concat(index);
+      /** 是否是当前的表单 */
+      var isShow = step === index;
+      var config = isShow ? {
+        contentRender: stepFormRender,
+        submitter: false
+      } : {};
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classnames.default)("".concat(prefixCls, "-step"), hashId, (0, _defineProperty2.default)({}, "".concat(prefixCls, "-step-active"), isShow)),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StepFormProvide.Provider, {
+          value: (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, config), formProps), itemProps), {}, {
+            name: name,
+            step: index
+          }),
+          children: item
+        })
+      }, name);
+    });
+  }, [formProps, hashId, prefixCls, props.children, step, stepFormRender]);
+  var finalStepsDom = (0, _react.useMemo)(function () {
+    if (stepsRender) {
+      return stepsRender(formArray.map(function (item) {
+        var _formMapRef$current$g;
+        return {
+          key: item,
+          title: (_formMapRef$current$g = formMapRef.current.get(item)) === null || _formMapRef$current$g === void 0 ? void 0 : _formMapRef$current$g.title
+        };
+      }), stepsDom);
+    }
+    return stepsDom;
+  }, [formArray, stepsDom, stepsRender]);
+  var formContainer = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "".concat(prefixCls, "-container ").concat(hashId).trim(),
+      style: containerStyle,
+      children: [formDom, stepsFormRender ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Space, {
+        children: submitterDom
+      })]
+    });
+  }, [containerStyle, formDom, hashId, prefixCls, stepsFormRender, submitterDom]);
+  var stepsFormDom = (0, _react.useMemo)(function () {
+    var doms = {
+      stepsDom: finalStepsDom,
+      formDom: formContainer
+    };
+    if (stepsFormRender) {
+      if (propsLayoutRender) {
+        return stepsFormRender(propsLayoutRender(doms), submitterDom);
+      } else {
+        return stepsFormRender(layoutRender(doms), submitterDom);
+      }
+    }
+    if (propsLayoutRender) {
+      return propsLayoutRender(doms);
+    }
+    return layoutRender(doms);
+  }, [finalStepsDom, formContainer, layoutRender, stepsFormRender, submitterDom, propsLayoutRender]);
+  return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames.default)(prefixCls, hashId),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Form.Provider, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, rest), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StepsFormProvide.Provider, {
+        value: {
+          loading: loading,
+          setLoading: setLoading,
+          regForm: regForm,
+          keyArray: formArray,
+          next: nextPage,
+          formArrayRef: formArrayRef,
+          formMapRef: formMapRef,
+          lastStep: lastStep,
+          unRegForm: unRegForm,
+          onFormFinish: onFormFinish
+        },
+        children: stepsFormDom
+      })
+    }))
+  }));
+}
+function StepsFormWarp(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_proProvider.ProConfigProvider, {
+    needDeps: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StepsForm, (0, _objectSpread2.default)({}, props))
+  });
+}
+StepsFormWarp.StepForm = _StepForm.default;
+StepsFormWarp.useForm = _antd.Form.useForm;

node_modules/@ant-design/pro-form/lib/layouts/StepsForm/style.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { ProAliasToken } from '@ant-design/pro-provider';
+export interface StepsFormToken extends ProAliasToken {
+    componentCls: string;
+}
+export declare function useStyle(prefixCls: string): {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};

node_modules/@ant-design/pro-form/lib/layouts/StepsForm/style.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStyle = useStyle;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _proProvider = require("@ant-design/pro-provider");
+var genStepsFormStyle = function genStepsFormStyle(token) {
+  return (0, _defineProperty2.default)({}, token.componentCls, {
+    '&-container': {
+      width: 'max-content',
+      minWidth: '420px',
+      maxWidth: '100%',
+      margin: 'auto'
+    },
+    '&-steps-container': (0, _defineProperty2.default)({
+      maxWidth: '1160px',
+      margin: 'auto'
+    }, "".concat(token.antCls, "-steps-vertical"), {
+      height: '100%'
+    }),
+    '&-step': {
+      display: 'none',
+      marginBlockStart: '32px',
+      '&-active': {
+        display: 'block'
+      },
+      '> form': {
+        maxWidth: '100%'
+      }
+    }
+  });
+};
+function useStyle(prefixCls) {
+  return (0, _proProvider.useStyle)('StepsForm', function (token) {
+    var loginFormToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
+      componentCls: ".".concat(prefixCls)
+    });
+    return [genStepsFormStyle(loginFormToken)];
+  });
+}