@zat-design/sisyphus-react 3.12.1-beta.3 → 3.13.0

package/es/ProStepTab/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { ProStepTabType, ProStepTabResultType } from './propsType';
+/**
+ * 步骤化Tab管理钩子，用于管理多步骤表单或流程的切换和验证
+ *
+ * @param {ProStepTabType} props 配置参数
+ * @returns {ProStepTabResultType} 返回步骤Tab相关方法和状态
+ */
+export declare function useStepTab(props?: ProStepTabType): ProStepTabResultType;
+/**
+ * 在子组件中获取父级 StepTab 实例的钩子
+ * @returns {ProStepTabResultType} 步骤Tab实例
+ */
+export declare function useStepTabInstance(): ProStepTabResultType;
+interface ProStepTabComponent extends React.FC<React.PropsWithChildren<ProStepTabType>> {
+    useStepTabInstance: typeof useStepTabInstance;
+}
+/**
+ * ProStepTab 组件
+ */
+declare const ProStepTab: ProStepTabComponent;
+export default ProStepTab;

package/es/ProStepTab/index.js

@@ -0,0 +1,341 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _excluded = ["children"];
+import React, { useState, useCallback, useEffect, createContext, useContext } from 'react';
+import { isNaN } from 'lodash';
+// 存储当前的 StepTab 实例
+var StepTabInstanceContext = /*#__PURE__*/createContext(null);
+/**
+ * 使用原生 JS 获取 URL 搜索参数
+ * @returns 当前 URL 的搜索参数和路径
+ */
+var useNativeLocation = function useNativeLocation() {
+  var _useState = useState({
+      search: window.location.search,
+      pathname: window.location.pathname
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    location = _useState2[0],
+    setLocation = _useState2[1];
+  // 监听 popstate 事件，更新 location 状态
+  useEffect(function () {
+    var handleLocationChange = function handleLocationChange() {
+      setLocation({
+        search: window.location.search,
+        pathname: window.location.pathname
+      });
+    };
+    window.addEventListener('popstate', handleLocationChange);
+    return function () {
+      window.removeEventListener('popstate', handleLocationChange);
+    };
+  }, []);
+  return location;
+};
+/**
+ * 步骤化Tab管理钩子，用于管理多步骤表单或流程的切换和验证
+ *
+ * @param {ProStepTabType} props 配置参数
+ * @returns {ProStepTabResultType} 返回步骤Tab相关方法和状态
+ */
+export function useStepTab() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _props$routerKeep = props.routerKeep,
+    routerKeep = _props$routerKeep === void 0 ? false : _props$routerKeep,
+    _props$routerSearchKe = props.routerSearchKey,
+    routerSearchKey = _props$routerSearchKe === void 0 ? 'tab' : _props$routerSearchKe,
+    _props$validate = props.validate,
+    validate = _props$validate === void 0 ? true : _props$validate,
+    onBeforeChange = props.onBeforeChange,
+    onAfterChange = props.onAfterChange,
+    defaultActiveKey = props.defaultActiveKey,
+    _props$defaultStep = props.defaultStep,
+    defaultStep = _props$defaultStep === void 0 ? 1 : _props$defaultStep,
+    queueSteps = props.queueSteps,
+    _props$autoNext = props.autoNext,
+    autoNext = _props$autoNext === void 0 ? false : _props$autoNext;
+  // 内部状态，避免全局污染
+  var _useState3 = useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    handlesState = _useState4[0],
+    setHandlesState = _useState4[1];
+  var location = useNativeLocation();
+  // 获取初始激活的tab key
+  var getInitialActiveKey = useCallback(function () {
+    if (routerKeep) {
+      var urlSearchParams = new URLSearchParams(location.search);
+      var tabValue = urlSearchParams.get(routerSearchKey);
+      if (tabValue) {
+        return tabValue;
+      }
+    }
+    return defaultActiveKey || '1';
+  }, [routerKeep, routerSearchKey, location.search, defaultActiveKey]);
+  // 获取初始激活的步骤
+  var getInitialStep = useCallback(function () {
+    if (routerKeep) {
+      var urlSearchParams = new URLSearchParams(location.search);
+      var stepValue = urlSearchParams.get(routerSearchKey);
+      // 如果stepValue是数字，则返回数字
+      if (stepValue && !isNaN(Number(stepValue))) {
+        return Number(stepValue);
+      }
+    }
+    return defaultStep;
+  }, [routerKeep, routerSearchKey, location.search, defaultStep]);
+  var _useState5 = useState(getInitialActiveKey()),
+    _useState6 = _slicedToArray(_useState5, 2),
+    activeKey = _useState6[0],
+    setActiveKeyState = _useState6[1];
+  var _useState7 = useState(getInitialStep()),
+    _useState8 = _slicedToArray(_useState7, 2),
+    step = _useState8[0],
+    setStepState = _useState8[1]; // 当前已激活步骤
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    loading = _useState10[0],
+    setLoading = _useState10[1];
+  // 同步URL参数
+  useEffect(function () {
+    if (routerKeep && activeKey) {
+      // 更新URL参数
+      var urlSearchParams = new URLSearchParams(location.search);
+      urlSearchParams.set(routerSearchKey, activeKey);
+      // 使用原生 history API 更新 URL
+      var newUrl = "".concat(location.pathname, "?").concat(urlSearchParams.toString());
+      window.history.replaceState(null, '', newUrl);
+    }
+  }, [activeKey, routerKeep, routerSearchKey, location]);
+  // 创建一个包装函数，自动处理loading状态
+  var wrapHandleWithLoading = useCallback(function (fn) {
+    return /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      var result;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            setLoading(true);
+            _context.prev = 1;
+            _context.next = 4;
+            return fn();
+          case 4:
+            result = _context.sent;
+            setLoading(false);
+            return _context.abrupt("return", result);
+          case 9:
+            _context.prev = 9;
+            _context.t0 = _context["catch"](1);
+            setLoading(false);
+            return _context.abrupt("return", false);
+          case 13:
+            _context.prev = 13;
+            setLoading(false);
+            return _context.finish(13);
+          case 16:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[1, 9, 13, 16]]);
+    }));
+  }, []);
+  // 注册步骤处理函数
+  var registerHandle = useCallback(function (key, handler) {
+    // 使用wrapHandleWithLoading包装处理函数
+    setHandlesState(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, key, wrapHandleWithLoading(handler)));
+    });
+  }, [wrapHandleWithLoading]);
+  // 获取步骤处理函数
+  var getHandle = useCallback(function (key) {
+    return handlesState[key];
+  }, [handlesState]);
+  // 处理表单验证和切换（内部使用）
+  var validateAndChange = useCallback(/*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(targetKey) {
+      var currentHandler, handleResult, beforeResult;
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (!(targetKey === activeKey)) {
+              _context2.next = 2;
+              break;
+            }
+            return _context2.abrupt("return", true);
+          case 2:
+            _context2.prev = 2;
+            // 执行当前步骤的保存处理, 如果validate为true，则执行验证
+            currentHandler = handlesState[activeKey];
+            if (!(currentHandler && validate)) {
+              _context2.next = 10;
+              break;
+            }
+            _context2.next = 7;
+            return currentHandler();
+          case 7:
+            handleResult = _context2.sent;
+            if (handleResult) {
+              _context2.next = 10;
+              break;
+            }
+            return _context2.abrupt("return", false);
+          case 10:
+            if (!onBeforeChange) {
+              _context2.next = 16;
+              break;
+            }
+            _context2.next = 13;
+            return onBeforeChange(activeKey, targetKey);
+          case 13:
+            beforeResult = _context2.sent;
+            if (!(beforeResult === false)) {
+              _context2.next = 16;
+              break;
+            }
+            return _context2.abrupt("return", false);
+          case 16:
+            // 更新激活的key
+            setActiveKeyState(targetKey);
+            // 执行切换后回调
+            if (onAfterChange) {
+              onAfterChange(targetKey);
+            }
+            return _context2.abrupt("return", true);
+          case 21:
+            _context2.prev = 21;
+            _context2.t0 = _context2["catch"](2);
+            // 验证失败
+            console.error('Tab切换验证失败:', _context2.t0);
+            return _context2.abrupt("return", false);
+          case 25:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, null, [[2, 21]]);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [activeKey, validate, onBeforeChange, onAfterChange, handlesState]);
+  // 设置激活的key
+  var setCheckActiveKey = useCallback(/*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3(targetKey, validate) {
+      return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            if (!(validate === false)) {
+              _context3.next = 3;
+              break;
+            }
+            setActiveKeyState(targetKey);
+            return _context3.abrupt("return", true);
+          case 3:
+            return _context3.abrupt("return", validateAndChange(targetKey));
+          case 4:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3);
+    }));
+    return function (_x2, _x3) {
+      return _ref3.apply(this, arguments);
+    };
+  }(), [validateAndChange]);
+  // 执行当前步骤处理函数
+  var saveHandle = useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
+    var handler, result, currentKeyNum, nextKey;
+    return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          handler = handlesState[activeKey];
+          if (!handler) {
+            _context4.next = 14;
+            break;
+          }
+          _context4.next = 4;
+          return handler();
+        case 4:
+          result = _context4.sent;
+          if (!(result && autoNext)) {
+            _context4.next = 11;
+            break;
+          }
+          // 只有当activeKey能转换为数字时才执行自动跳转
+          currentKeyNum = Number(activeKey);
+          if (isNaN(currentKeyNum)) {
+            _context4.next = 11;
+            break;
+          }
+          nextKey = String(currentKeyNum + 1); // 自动跳转到下一个tab
+          _context4.next = 11;
+          return setCheckActiveKey(nextKey);
+        case 11:
+          if (!(result === false)) {
+            _context4.next = 13;
+            break;
+          }
+          return _context4.abrupt("return", Promise.reject());
+        case 13:
+          return _context4.abrupt("return", result);
+        case 14:
+          return _context4.abrupt("return", Promise.resolve(true));
+        case 15:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee4);
+  })), [activeKey, handlesState, autoNext, queueSteps, setCheckActiveKey]);
+  // 拦截setStep, 最大值是queueSteps
+  var setStep = useCallback(function (step) {
+    if (step > queueSteps) {
+      return;
+    }
+    setStepState(step);
+  }, [queueSteps]);
+  // 重置handles，用于清空或组件卸载时调用
+  var resetHandles = useCallback(function () {
+    setHandlesState({});
+  }, []);
+  var stepTabInstance = {
+    activeKey: activeKey,
+    setCheckActiveKey: setCheckActiveKey,
+    loading: loading,
+    registerHandle: registerHandle,
+    getHandle: getHandle,
+    saveHandle: saveHandle,
+    resetHandles: resetHandles,
+    handles: handlesState,
+    step: step,
+    setStep: setStep,
+    queueSteps: queueSteps
+  };
+  return stepTabInstance;
+}
+/**
+ * 在子组件中获取父级 StepTab 实例的钩子
+ * @returns {ProStepTabResultType} 步骤Tab实例
+ */
+export function useStepTabInstance() {
+  var context = useContext(StepTabInstanceContext);
+  if (context === null) {
+    throw new Error('useStepTabInstance must be used inside a ProStepTab component');
+  }
+  return context;
+}
+/**
+ * ProStepTab 组件
+ */
+var ProStepTab = function ProStepTab(_ref5) {
+  var children = _ref5.children,
+    rest = _objectWithoutProperties(_ref5, _excluded);
+  var stepTabInstance = useStepTab(rest);
+  return /*#__PURE__*/React.createElement(StepTabInstanceContext.Provider, {
+    value: stepTabInstance
+  }, children);
+};
+// 将 useStepTabInstance 挂载到 ProStepTab 上作为静态方法
+ProStepTab.useStepTabInstance = useStepTabInstance;
+// 导出默认组件
+export default ProStepTab;

package/es/ProStepTab/propsType.d.ts

@@ -0,0 +1,114 @@
+/**
+ * HandleFunction 类型定义 - 步骤处理函数
+ */
+export type HandleFunctionType = () => Promise<boolean>;
+/**
+ * ProStepTab钩子参数接口
+ */
+export interface ProStepTabType {
+    /**
+     * 是否将当前tab状态保存在URL中
+     * @default false
+     */
+    routerKeep?: boolean;
+    /**
+     * URL参数名称
+     * @default 'tab'
+     */
+    routerSearchKey?: string;
+    /**
+     * 切换tab前是否需要验证
+     * @default false
+     */
+    validate?: boolean;
+    /**
+     * 切换tab前的回调
+     * @param current 当前tabKey
+     * @param target 目标tabKey
+     * @returns 是否允许切换
+     */
+    onBeforeChange?: (current: string, target: string) => Promise<boolean>;
+    /**
+     * 切换tab后的回调
+     * @param key 切换后的tabKey
+     */
+    onAfterChange?: (key: string) => void;
+    /**
+     * 默认选中的tab key
+     * @default '1'
+     */
+    defaultActiveKey?: string;
+    /**
+     * 需要按顺序完成的步骤数量
+     * 与defaultStep必须同时存在或同时不存在
+     * @default -
+     */
+    queueSteps?: number;
+    /**
+     * 当前初始激活步骤
+     * 与queueSteps必须同时存在或同时不存在
+     * @default 1
+     */
+    defaultStep?: number;
+    /**
+     * 是否自动跳转下一步
+     * @default false
+     */
+    autoNext?: boolean;
+}
+/**
+ * ProStepTab钩子返回值接口
+ */
+export interface ProStepTabResultType {
+    /**
+     * 当前激活的tabKey
+     */
+    activeKey: string;
+    /**
+     * 设置激活的tabKey
+     * @param key 目标tabKey
+     * @param validate 是否需要验证
+     */
+    setCheckActiveKey: (key: string, validate?: boolean) => Promise<boolean>;
+    /**
+     * 加载状态
+     */
+    loading: boolean;
+    /**
+     * 注册步骤处理函数
+     * @param key 步骤Key
+     * @param handler 处理函数
+     */
+    registerHandle: (key: string, handler: HandleFunctionType) => void;
+    /**
+     * 获取步骤处理函数
+     * @param key 步骤Key
+     */
+    getHandle: (key: string) => HandleFunctionType | undefined;
+    /**
+     * 执行当前步骤处理函数
+     * @returns 处理结果
+     */
+    saveHandle: () => Promise<boolean>;
+    /**
+     * 所有步骤处理函数映射
+     */
+    handles: Record<string, HandleFunctionType>;
+    /**
+     * 重置所有步骤处理函数
+     */
+    resetHandles: () => void;
+    /**
+     * 最大步骤数
+     */
+    queueSteps?: number;
+    /**
+     * 当前已激活步骤，最大值为queueSteps
+     */
+    step?: number;
+    /**
+     * 设置当前顺序步骤
+     * @param step 顺序步骤
+     */
+    setStep?: (step: number) => void;
+}

package/es/ProStepTab/propsType.js

@@ -0,0 +1 @@
+export {};

package/es/index.d.ts

@@ -8,6 +8,7 @@ export { default as ProViewer } from './ProViewer';
 export { default as ProEditTable } from './ProEditTable';
 export { default as ProDrawerForm } from './ProDrawerForm';
 export { default as ProEditLabel } from './ProEditLabel';
+export { default as ProStepTab } from './ProStepTab';
 export { default as ProForm } from './ProForm';
 export { ProFormProvider } from './ProForm';
 export * from './ProForm/components';
@@ -40,4 +41,5 @@ export type { ProEditTableType, ProEditTableColumnType, ProEditTableSummaryColum
 export type { ProStepType, ProStepContextType, ProStepItemType, ProStepPropsType, ProStepItemPropsType } from './ProStep/propsType';
 export type { ProDrawerFormType, ProDrawerFormPropsType } from './ProDrawerForm/propsType';
 export type { ProModalSelectType, ProModalSelectConfigType, ProModalSelectPropsType } from './ProForm/components/combination/ProModalSelect/propsType';
+export type { ProStepTabType, ProStepTabResultType } from './ProStepTab/propsType';
 export * from './tokens';

package/es/index.js

@@ -11,6 +11,7 @@ export { default as ProViewer } from './ProViewer';
 export { default as ProEditTable } from './ProEditTable';
 export { default as ProDrawerForm } from './ProDrawerForm';
 export { default as ProEditLabel } from './ProEditLabel';
+export { default as ProStepTab } from './ProStepTab';
 // 表单
 export { default as ProForm } from './ProForm';
 export { ProFormProvider } from './ProForm';

package/lib/ProStepTab/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { ProStepTabType, ProStepTabResultType } from './propsType';
+/**
+ * 步骤化Tab管理钩子，用于管理多步骤表单或流程的切换和验证
+ *
+ * @param {ProStepTabType} props 配置参数
+ * @returns {ProStepTabResultType} 返回步骤Tab相关方法和状态
+ */
+export declare function useStepTab(props?: ProStepTabType): ProStepTabResultType;
+/**
+ * 在子组件中获取父级 StepTab 实例的钩子
+ * @returns {ProStepTabResultType} 步骤Tab实例
+ */
+export declare function useStepTabInstance(): ProStepTabResultType;
+interface ProStepTabComponent extends React.FC<React.PropsWithChildren<ProStepTabType>> {
+    useStepTabInstance: typeof useStepTabInstance;
+}
+/**
+ * ProStepTab 组件
+ */
+declare const ProStepTab: ProStepTabComponent;
+export default ProStepTab;

package/lib/ProStepTab/index.js

@@ -0,0 +1,351 @@
+"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.default = void 0;
+exports.useStepTab = useStepTab;
+exports.useStepTabInstance = useStepTabInstance;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = require("lodash");
+var _excluded = ["children"];
+// 存储当前的 StepTab 实例
+var StepTabInstanceContext = /*#__PURE__*/(0, _react.createContext)(null);
+/**
+ * 使用原生 JS 获取 URL 搜索参数
+ * @returns 当前 URL 的搜索参数和路径
+ */
+var useNativeLocation = function useNativeLocation() {
+  var _useState = (0, _react.useState)({
+      search: window.location.search,
+      pathname: window.location.pathname
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    location = _useState2[0],
+    setLocation = _useState2[1];
+  // 监听 popstate 事件，更新 location 状态
+  (0, _react.useEffect)(function () {
+    var handleLocationChange = function handleLocationChange() {
+      setLocation({
+        search: window.location.search,
+        pathname: window.location.pathname
+      });
+    };
+    window.addEventListener('popstate', handleLocationChange);
+    return function () {
+      window.removeEventListener('popstate', handleLocationChange);
+    };
+  }, []);
+  return location;
+};
+/**
+ * 步骤化Tab管理钩子，用于管理多步骤表单或流程的切换和验证
+ *
+ * @param {ProStepTabType} props 配置参数
+ * @returns {ProStepTabResultType} 返回步骤Tab相关方法和状态
+ */
+function useStepTab() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _props$routerKeep = props.routerKeep,
+    routerKeep = _props$routerKeep === void 0 ? false : _props$routerKeep,
+    _props$routerSearchKe = props.routerSearchKey,
+    routerSearchKey = _props$routerSearchKe === void 0 ? 'tab' : _props$routerSearchKe,
+    _props$validate = props.validate,
+    validate = _props$validate === void 0 ? true : _props$validate,
+    onBeforeChange = props.onBeforeChange,
+    onAfterChange = props.onAfterChange,
+    defaultActiveKey = props.defaultActiveKey,
+    _props$defaultStep = props.defaultStep,
+    defaultStep = _props$defaultStep === void 0 ? 1 : _props$defaultStep,
+    queueSteps = props.queueSteps,
+    _props$autoNext = props.autoNext,
+    autoNext = _props$autoNext === void 0 ? false : _props$autoNext;
+  // 内部状态，避免全局污染
+  var _useState3 = (0, _react.useState)({}),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    handlesState = _useState4[0],
+    setHandlesState = _useState4[1];
+  var location = useNativeLocation();
+  // 获取初始激活的tab key
+  var getInitialActiveKey = (0, _react.useCallback)(function () {
+    if (routerKeep) {
+      var urlSearchParams = new URLSearchParams(location.search);
+      var tabValue = urlSearchParams.get(routerSearchKey);
+      if (tabValue) {
+        return tabValue;
+      }
+    }
+    return defaultActiveKey || '1';
+  }, [routerKeep, routerSearchKey, location.search, defaultActiveKey]);
+  // 获取初始激活的步骤
+  var getInitialStep = (0, _react.useCallback)(function () {
+    if (routerKeep) {
+      var urlSearchParams = new URLSearchParams(location.search);
+      var stepValue = urlSearchParams.get(routerSearchKey);
+      // 如果stepValue是数字，则返回数字
+      if (stepValue && !(0, _lodash.isNaN)(Number(stepValue))) {
+        return Number(stepValue);
+      }
+    }
+    return defaultStep;
+  }, [routerKeep, routerSearchKey, location.search, defaultStep]);
+  var _useState5 = (0, _react.useState)(getInitialActiveKey()),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    activeKey = _useState6[0],
+    setActiveKeyState = _useState6[1];
+  var _useState7 = (0, _react.useState)(getInitialStep()),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    step = _useState8[0],
+    setStepState = _useState8[1]; // 当前已激活步骤
+  var _useState9 = (0, _react.useState)(false),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    loading = _useState10[0],
+    setLoading = _useState10[1];
+  // 同步URL参数
+  (0, _react.useEffect)(function () {
+    if (routerKeep && activeKey) {
+      // 更新URL参数
+      var urlSearchParams = new URLSearchParams(location.search);
+      urlSearchParams.set(routerSearchKey, activeKey);
+      // 使用原生 history API 更新 URL
+      var newUrl = "".concat(location.pathname, "?").concat(urlSearchParams.toString());
+      window.history.replaceState(null, '', newUrl);
+    }
+  }, [activeKey, routerKeep, routerSearchKey, location]);
+  // 创建一个包装函数，自动处理loading状态
+  var wrapHandleWithLoading = (0, _react.useCallback)(function (fn) {
+    return /*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
+      var result;
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            setLoading(true);
+            _context.prev = 1;
+            _context.next = 4;
+            return fn();
+          case 4:
+            result = _context.sent;
+            setLoading(false);
+            return _context.abrupt("return", result);
+          case 9:
+            _context.prev = 9;
+            _context.t0 = _context["catch"](1);
+            setLoading(false);
+            return _context.abrupt("return", false);
+          case 13:
+            _context.prev = 13;
+            setLoading(false);
+            return _context.finish(13);
+          case 16:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[1, 9, 13, 16]]);
+    }));
+  }, []);
+  // 注册步骤处理函数
+  var registerHandle = (0, _react.useCallback)(function (key, handler) {
+    // 使用wrapHandleWithLoading包装处理函数
+    setHandlesState(function (prev) {
+      return (0, _objectSpread3.default)((0, _objectSpread3.default)({}, prev), {}, (0, _defineProperty2.default)({}, key, wrapHandleWithLoading(handler)));
+    });
+  }, [wrapHandleWithLoading]);
+  // 获取步骤处理函数
+  var getHandle = (0, _react.useCallback)(function (key) {
+    return handlesState[key];
+  }, [handlesState]);
+  // 处理表单验证和切换（内部使用）
+  var validateAndChange = (0, _react.useCallback)(/*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2(targetKey) {
+      var currentHandler, handleResult, beforeResult;
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (!(targetKey === activeKey)) {
+              _context2.next = 2;
+              break;
+            }
+            return _context2.abrupt("return", true);
+          case 2:
+            _context2.prev = 2;
+            // 执行当前步骤的保存处理, 如果validate为true，则执行验证
+            currentHandler = handlesState[activeKey];
+            if (!(currentHandler && validate)) {
+              _context2.next = 10;
+              break;
+            }
+            _context2.next = 7;
+            return currentHandler();
+          case 7:
+            handleResult = _context2.sent;
+            if (handleResult) {
+              _context2.next = 10;
+              break;
+            }
+            return _context2.abrupt("return", false);
+          case 10:
+            if (!onBeforeChange) {
+              _context2.next = 16;
+              break;
+            }
+            _context2.next = 13;
+            return onBeforeChange(activeKey, targetKey);
+          case 13:
+            beforeResult = _context2.sent;
+            if (!(beforeResult === false)) {
+              _context2.next = 16;
+              break;
+            }
+            return _context2.abrupt("return", false);
+          case 16:
+            // 更新激活的key
+            setActiveKeyState(targetKey);
+            // 执行切换后回调
+            if (onAfterChange) {
+              onAfterChange(targetKey);
+            }
+            return _context2.abrupt("return", true);
+          case 21:
+            _context2.prev = 21;
+            _context2.t0 = _context2["catch"](2);
+            // 验证失败
+            console.error('Tab切换验证失败:', _context2.t0);
+            return _context2.abrupt("return", false);
+          case 25:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, null, [[2, 21]]);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [activeKey, validate, onBeforeChange, onAfterChange, handlesState]);
+  // 设置激活的key
+  var setCheckActiveKey = (0, _react.useCallback)(/*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee3(targetKey, validate) {
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            if (!(validate === false)) {
+              _context3.next = 3;
+              break;
+            }
+            setActiveKeyState(targetKey);
+            return _context3.abrupt("return", true);
+          case 3:
+            return _context3.abrupt("return", validateAndChange(targetKey));
+          case 4:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3);
+    }));
+    return function (_x2, _x3) {
+      return _ref3.apply(this, arguments);
+    };
+  }(), [validateAndChange]);
+  // 执行当前步骤处理函数
+  var saveHandle = (0, _react.useCallback)(/*#__PURE__*/(0, _asyncToGenerator2.default)(/*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee4() {
+    var handler, result, currentKeyNum, nextKey;
+    return (0, _regeneratorRuntime2.default)().wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          handler = handlesState[activeKey];
+          if (!handler) {
+            _context4.next = 14;
+            break;
+          }
+          _context4.next = 4;
+          return handler();
+        case 4:
+          result = _context4.sent;
+          if (!(result && autoNext)) {
+            _context4.next = 11;
+            break;
+          }
+          // 只有当activeKey能转换为数字时才执行自动跳转
+          currentKeyNum = Number(activeKey);
+          if ((0, _lodash.isNaN)(currentKeyNum)) {
+            _context4.next = 11;
+            break;
+          }
+          nextKey = String(currentKeyNum + 1); // 自动跳转到下一个tab
+          _context4.next = 11;
+          return setCheckActiveKey(nextKey);
+        case 11:
+          if (!(result === false)) {
+            _context4.next = 13;
+            break;
+          }
+          return _context4.abrupt("return", Promise.reject());
+        case 13:
+          return _context4.abrupt("return", result);
+        case 14:
+          return _context4.abrupt("return", Promise.resolve(true));
+        case 15:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee4);
+  })), [activeKey, handlesState, autoNext, queueSteps, setCheckActiveKey]);
+  // 拦截setStep, 最大值是queueSteps
+  var setStep = (0, _react.useCallback)(function (step) {
+    if (step > queueSteps) {
+      return;
+    }
+    setStepState(step);
+  }, [queueSteps]);
+  // 重置handles，用于清空或组件卸载时调用
+  var resetHandles = (0, _react.useCallback)(function () {
+    setHandlesState({});
+  }, []);
+  var stepTabInstance = {
+    activeKey: activeKey,
+    setCheckActiveKey: setCheckActiveKey,
+    loading: loading,
+    registerHandle: registerHandle,
+    getHandle: getHandle,
+    saveHandle: saveHandle,
+    resetHandles: resetHandles,
+    handles: handlesState,
+    step: step,
+    setStep: setStep,
+    queueSteps: queueSteps
+  };
+  return stepTabInstance;
+}
+/**
+ * 在子组件中获取父级 StepTab 实例的钩子
+ * @returns {ProStepTabResultType} 步骤Tab实例
+ */
+function useStepTabInstance() {
+  var context = (0, _react.useContext)(StepTabInstanceContext);
+  if (context === null) {
+    throw new Error('useStepTabInstance must be used inside a ProStepTab component');
+  }
+  return context;
+}
+/**
+ * ProStepTab 组件
+ */
+var ProStepTab = function ProStepTab(_ref5) {
+  var children = _ref5.children,
+    rest = (0, _objectWithoutProperties2.default)(_ref5, _excluded);
+  var stepTabInstance = useStepTab(rest);
+  return /*#__PURE__*/_react.default.createElement(StepTabInstanceContext.Provider, {
+    value: stepTabInstance
+  }, children);
+};
+// 将 useStepTabInstance 挂载到 ProStepTab 上作为静态方法
+ProStepTab.useStepTabInstance = useStepTabInstance;
+// 导出默认组件
+var _default = exports.default = ProStepTab;

package/lib/ProStepTab/propsType.d.ts

@@ -0,0 +1,114 @@
+/**
+ * HandleFunction 类型定义 - 步骤处理函数
+ */
+export type HandleFunctionType = () => Promise<boolean>;
+/**
+ * ProStepTab钩子参数接口
+ */
+export interface ProStepTabType {
+    /**
+     * 是否将当前tab状态保存在URL中
+     * @default false
+     */
+    routerKeep?: boolean;
+    /**
+     * URL参数名称
+     * @default 'tab'
+     */
+    routerSearchKey?: string;
+    /**
+     * 切换tab前是否需要验证
+     * @default false
+     */
+    validate?: boolean;
+    /**
+     * 切换tab前的回调
+     * @param current 当前tabKey
+     * @param target 目标tabKey
+     * @returns 是否允许切换
+     */
+    onBeforeChange?: (current: string, target: string) => Promise<boolean>;
+    /**
+     * 切换tab后的回调
+     * @param key 切换后的tabKey
+     */
+    onAfterChange?: (key: string) => void;
+    /**
+     * 默认选中的tab key
+     * @default '1'
+     */
+    defaultActiveKey?: string;
+    /**
+     * 需要按顺序完成的步骤数量
+     * 与defaultStep必须同时存在或同时不存在
+     * @default -
+     */
+    queueSteps?: number;
+    /**
+     * 当前初始激活步骤
+     * 与queueSteps必须同时存在或同时不存在
+     * @default 1
+     */
+    defaultStep?: number;
+    /**
+     * 是否自动跳转下一步
+     * @default false
+     */
+    autoNext?: boolean;
+}
+/**
+ * ProStepTab钩子返回值接口
+ */
+export interface ProStepTabResultType {
+    /**
+     * 当前激活的tabKey
+     */
+    activeKey: string;
+    /**
+     * 设置激活的tabKey
+     * @param key 目标tabKey
+     * @param validate 是否需要验证
+     */
+    setCheckActiveKey: (key: string, validate?: boolean) => Promise<boolean>;
+    /**
+     * 加载状态
+     */
+    loading: boolean;
+    /**
+     * 注册步骤处理函数
+     * @param key 步骤Key
+     * @param handler 处理函数
+     */
+    registerHandle: (key: string, handler: HandleFunctionType) => void;
+    /**
+     * 获取步骤处理函数
+     * @param key 步骤Key
+     */
+    getHandle: (key: string) => HandleFunctionType | undefined;
+    /**
+     * 执行当前步骤处理函数
+     * @returns 处理结果
+     */
+    saveHandle: () => Promise<boolean>;
+    /**
+     * 所有步骤处理函数映射
+     */
+    handles: Record<string, HandleFunctionType>;
+    /**
+     * 重置所有步骤处理函数
+     */
+    resetHandles: () => void;
+    /**
+     * 最大步骤数
+     */
+    queueSteps?: number;
+    /**
+     * 当前已激活步骤，最大值为queueSteps
+     */
+    step?: number;
+    /**
+     * 设置当前顺序步骤
+     * @param step 顺序步骤
+     */
+    setStep?: (step: number) => void;
+}

package/lib/ProStepTab/propsType.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/index.d.ts

@@ -8,6 +8,7 @@ export { default as ProViewer } from './ProViewer';
 export { default as ProEditTable } from './ProEditTable';
 export { default as ProDrawerForm } from './ProDrawerForm';
 export { default as ProEditLabel } from './ProEditLabel';
+export { default as ProStepTab } from './ProStepTab';
 export { default as ProForm } from './ProForm';
 export { ProFormProvider } from './ProForm';
 export * from './ProForm/components';
@@ -40,4 +41,5 @@ export type { ProEditTableType, ProEditTableColumnType, ProEditTableSummaryColum
 export type { ProStepType, ProStepContextType, ProStepItemType, ProStepPropsType, ProStepItemPropsType } from './ProStep/propsType';
 export type { ProDrawerFormType, ProDrawerFormPropsType } from './ProDrawerForm/propsType';
 export type { ProModalSelectType, ProModalSelectConfigType, ProModalSelectPropsType } from './ProForm/components/combination/ProModalSelect/propsType';
+export type { ProStepTabType, ProStepTabResultType } from './ProStepTab/propsType';
 export * from './tokens';

package/lib/index.js

@@ -15,6 +15,7 @@ var _exportNames = {
   ProEditTable: true,
   ProDrawerForm: true,
   ProEditLabel: true,
+  ProStepTab: true,
   ProForm: true,
   ProFormProvider: true,
   ProSelect: true,
@@ -133,6 +134,12 @@ Object.defineProperty(exports, "ProStep", {
     return _ProStep.default;
   }
 });
+Object.defineProperty(exports, "ProStepTab", {
+  enumerable: true,
+  get: function get() {
+    return _ProStepTab.default;
+  }
+});
 Object.defineProperty(exports, "ProTable", {
   enumerable: true,
   get: function get() {
@@ -184,6 +191,7 @@ var _ProViewer = _interopRequireDefault(require("./ProViewer"));
 var _ProEditTable = _interopRequireDefault(require("./ProEditTable"));
 var _ProDrawerForm = _interopRequireDefault(require("./ProDrawerForm"));
 var _ProEditLabel = _interopRequireDefault(require("./ProEditLabel"));
+var _ProStepTab = _interopRequireDefault(require("./ProStepTab"));
 var _ProForm = _interopRequireWildcard(require("./ProForm"));
 var _components = require("./ProForm/components");
 Object.keys(_components).forEach(function (key) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zat-design/sisyphus-react",
-  "version": "3.12.1-beta.3",
+  "version": "3.13.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",