@pisell/materials 1.0.983 → 1.0.987

package/es/components/PisellProcedure/components/ProcedureHeader.js

@@ -1,86 +1,256 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { useMemo, useCallback } from 'react';
-import { Button } from 'antd';
-import { LeftOutlined, CloseOutlined } from '@ant-design/icons';
-import classNames from 'classnames';
-import { PisellSteps } from "../../PisellSteps";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useMemo, useCallback, useState } from 'react';
+import PisellHeader from "../../pisellLayout/header";
+import PisellSteps from "../../PisellSteps";
+import PisellModal from "../../pisellModal";
+import { mergeClassNames } from "../utils";
+import { getText } from "../../../locales";
+
+/**
+ * ProcedureHeader 子组件 Props
+ */
+
 /**
- * ProcedureHeader 组件
- * 头部区域，集成步骤导航和操作按钮
+ * 确认弹窗类型
+ */
+
+/**
+ * ProcedureHeader 头部区域组件
+ * 
+ * @description 包含左侧返回按钮、中间步骤条、右侧关闭按钮
+ * @author Pisell Team
  */
 var ProcedureHeader = function ProcedureHeader(_ref) {
-  var current = _ref.current,
-    steps = _ref.steps,
-    stepsProps = _ref.stepsProps,
-    showPrevButton = _ref.showPrevButton,
-    showCloseButton = _ref.showCloseButton,
-    onPrev = _ref.onPrev,
-    onClose = _ref.onClose,
-    onStepClick = _ref.onStepClick,
-    headerExtra = _ref.headerExtra,
-    prevButtonProps = _ref.prevButtonProps,
-    closeButtonProps = _ref.closeButtonProps,
-    fixed = _ref.fixed,
+  var _modalConfig$config2, _modalConfig$config3;
+  var headerProps = _ref.headerProps,
+    currentStep = _ref.currentStep,
     className = _ref.className,
-    style = _ref.style,
-    disabled = _ref.disabled;
+    goPrev = _ref.goPrev,
+    goToStep = _ref.goToStep,
+    onClose = _ref.onClose,
+    onFirstStepBack = _ref.onFirstStepBack,
+    onBackConfirm = _ref.onBackConfirm,
+    onCloseConfirm = _ref.onCloseConfirm;
+  /** 确认弹窗类型（back: 返回确认，close: 关闭确认，null: 不显示） */
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    modalType = _useState2[0],
+    setModalType = _useState2[1];
+  /** 目标步骤索引（用于步骤跳转，-1 表示返回上一步） */
+  var _useState3 = useState(-1),
+    _useState4 = _slicedToArray(_useState3, 2),
+    targetStep = _useState4[0],
+    setTargetStep = _useState4[1];
+
+  /** 头部区域类名 */
+  var headerCls = useMemo(function () {
+    return mergeClassNames('pisell-procedure-header', className, headerProps === null || headerProps === void 0 ? void 0 : headerProps.className);
+  }, [className, headerProps === null || headerProps === void 0 ? void 0 : headerProps.className]);
+
+  /** 是否有右侧插槽内容 */
+  var hasRightSlot = useMemo(function () {
+    return !!(headerProps !== null && headerProps !== void 0 && headerProps.right);
+  }, [headerProps === null || headerProps === void 0 ? void 0 : headerProps.right]);
+
+  /** 是否显示左侧区域 */
+  var showLeftArea = useMemo(function () {
+    // 没有左侧插槽内容，不显示
+    if (!(headerProps !== null && headerProps !== void 0 && headerProps.left)) return false;
+    // 第一步时根据配置决定是否显示，默认不显示
+    if (currentStep === 0) {
+      var _headerProps$showBack;
+      return (_headerProps$showBack = headerProps === null || headerProps === void 0 ? void 0 : headerProps.showBackOnFirstStep) !== null && _headerProps$showBack !== void 0 ? _headerProps$showBack : false;
+    }
+    // 非第一步始终显示
+    return true;
+  }, [headerProps === null || headerProps === void 0 ? void 0 : headerProps.left, currentStep, headerProps === null || headerProps === void 0 ? void 0 : headerProps.showBackOnFirstStep]);
+
   /**
-   * 合并类名
+   * 关闭确认弹窗
    */
-  var mergedClassName = useMemo(function () {
-    return classNames('pisell-procedure-header', {
-      'pisell-procedure-header-fixed': fixed === true,
-      'pisell-procedure-header-scroll-fixed': fixed === 'scroll'
-    }, className);
-  }, [fixed, className]);
+  var closeModal = useCallback(function () {
+    setModalType(null);
+    setTargetStep(-1);
+  }, []);
 
   /**
-   * 处理上一步按钮点击
+   * 统一处理返回和步骤跳转
+   * @param step 目标步骤索引，如果未传递或 < 0 则表示返回上一步
    */
-  var handlePrevClick = useCallback(function () {
-    if (!disabled) {
-      onPrev === null || onPrev === void 0 || onPrev();
+  var handleBackClick = useCallback(function (step) {
+    // 第一步且显示返回按钮，触发首步返回回调（仅返回按钮触发，步骤跳转不受此限制）
+    if (currentStep === 0 && headerProps !== null && headerProps !== void 0 && headerProps.showBackOnFirstStep && (step === undefined || step < 0)) {
+      if (onFirstStepBack) {
+        onFirstStepBack();
+      } else {
+        // 默认跳转到首页
+        window.location.href = '/';
+      }
+      return;
+    }
+    var modalConfig = headerProps === null || headerProps === void 0 ? void 0 : headerProps.backConfirmModal;
+    var isStepJump = step !== undefined && step >= 0;
+
+    // 保存目标步骤
+    setTargetStep(isStepJump ? step : -1);
+
+    // 未启用确认弹窗，直接执行操作
+    if (!(modalConfig !== null && modalConfig !== void 0 && modalConfig.enabled)) {
+      if (isStepJump) {
+        goToStep === null || goToStep === void 0 || goToStep(step);
+      } else {
+        goPrev === null || goPrev === void 0 || goPrev();
+      }
+      return;
     }
-  }, [disabled, onPrev]);
+
+    // 显示返回确认弹窗
+    setModalType('back');
+  }, [currentStep, headerProps, onFirstStepBack, goPrev, goToStep]);
 
   /**
    * 处理关闭按钮点击
    */
   var handleCloseClick = useCallback(function () {
-    if (!disabled) {
+    var modalConfig = headerProps === null || headerProps === void 0 ? void 0 : headerProps.closeConfirmModal;
+
+    // 未启用确认弹窗，直接调用 onClose 回调
+    if (!(modalConfig !== null && modalConfig !== void 0 && modalConfig.enabled)) {
       onClose === null || onClose === void 0 || onClose();
+      return;
     }
-  }, [disabled, onClose]);
+
+    // 显示关闭确认弹窗
+    setModalType('close');
+  }, [headerProps, onClose]);
 
   /**
-   * 处理步骤点击
+   * 处理确认操作
    */
-  var handleStepChange = useCallback(function (index) {
-    if (!disabled) {
-      onStepClick === null || onStepClick === void 0 || onStepClick(index);
+  var handleConfirm = useCallback(function (action) {
+    var isConfirm = action === 'ok' || action === 'confirm';
+    if (modalType === 'back') {
+      // 返回确认或步骤跳转确认
+      if (isConfirm) {
+        onBackConfirm === null || onBackConfirm === void 0 || onBackConfirm(action);
+        // 根据目标步骤决定调用 goToStep 还是 goPrev
+        if (targetStep >= 0) {
+          goToStep === null || goToStep === void 0 || goToStep(targetStep);
+        } else {
+          goPrev === null || goPrev === void 0 || goPrev();
+        }
+      }
+    } else if (modalType === 'close') {
+      // 关闭确认
+      if (isConfirm) {
+        onCloseConfirm === null || onCloseConfirm === void 0 || onCloseConfirm(action);
+        onClose === null || onClose === void 0 || onClose();
+      }
+    }
+    closeModal();
+  }, [modalType, targetStep, onBackConfirm, onCloseConfirm, goPrev, goToStep, onClose, closeModal]);
+
+  /**
+   * 获取当前弹窗的配置
+   */
+  var modalConfig = useMemo(function () {
+    if (modalType === 'back') {
+      return {
+        config: headerProps === null || headerProps === void 0 ? void 0 : headerProps.backConfirmModal,
+        titleKey: 'pisell-procedure-header-back-confirm-title',
+        descKey: 'pisell-procedure-header-back-confirm-desc',
+        okTextKey: 'pisell-procedure-header-back-confirm-yes',
+        cancelTextKey: 'pisell-procedure-header-back-confirm-no'
+      };
+    } else if (modalType === 'close') {
+      return {
+        config: headerProps === null || headerProps === void 0 ? void 0 : headerProps.closeConfirmModal,
+        titleKey: 'pisell-procedure-header-close-confirm-title',
+        descKey: 'pisell-procedure-header-close-confirm-desc',
+        okTextKey: 'pisell-procedure-header-close-confirm-yes',
+        cancelTextKey: 'pisell-procedure-header-close-confirm-no'
+      };
+    }
+    return null;
+  }, [modalType, headerProps]);
+
+  /**
+   * 处理 footer 按钮配置
+   */
+  var processedFooter = useMemo(function () {
+    var _modalConfig$config;
+    if (!modalConfig) return undefined;
+    var footer = (_modalConfig$config = modalConfig.config) === null || _modalConfig$config === void 0 ? void 0 : _modalConfig$config.footer;
+    if (!Array.isArray(footer)) return undefined;
+    return footer.map(function (btn) {
+      if (!btn || _typeof(btn) !== 'object') return btn;
+      var processedBtn = _objectSpread({}, btn);
+      var originalOnClick = processedBtn.onClick;
+      processedBtn.onClick = function () {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+        originalOnClick === null || originalOnClick === void 0 || originalOnClick.apply(void 0, args);
+        handleConfirm(btn.action);
+      };
+      return processedBtn;
+    });
+  }, [modalConfig, handleConfirm]);
+
+  /** 合并步骤条配置 */
+  var mergedStepsProps = useMemo(function () {
+    return _objectSpread(_objectSpread({}, headerProps === null || headerProps === void 0 ? void 0 : headerProps.stepsProps), {}, {
+      current: currentStep,
+      onChange: function onChange(step) {
+        var _headerProps$stepsPro, _headerProps$stepsPro2;
+        // 先调用外部传入的 onChange（如果有）
+        headerProps === null || headerProps === void 0 || (_headerProps$stepsPro = headerProps.stepsProps) === null || _headerProps$stepsPro === void 0 || (_headerProps$stepsPro2 = _headerProps$stepsPro.onChange) === null || _headerProps$stepsPro2 === void 0 || _headerProps$stepsPro2.call(_headerProps$stepsPro, step);
+        // 统一走 handleBackClick 处理逻辑
+        handleBackClick(step);
+      }
+    });
+  }, [headerProps === null || headerProps === void 0 ? void 0 : headerProps.stepsProps, currentStep, handleBackClick]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PisellHeader, {
+    className: headerCls,
+    style: headerProps === null || headerProps === void 0 ? void 0 : headerProps.style
+  }, showLeftArea && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-procedure-header__left",
+    onClick: function onClick() {
+      return handleBackClick();
+    }
+  }, headerProps === null || headerProps === void 0 ? void 0 : headerProps.left), /*#__PURE__*/React.createElement("div", {
+    className: "pisell-procedure-header__center"
+  }, /*#__PURE__*/React.createElement(PisellSteps, _extends({}, mergedStepsProps, {
+    mobileMode: "auto",
+    mobileBreakpoint: 744
+  }))), hasRightSlot && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-procedure-header__right",
+    onClick: handleCloseClick
+  }, headerProps === null || headerProps === void 0 ? void 0 : headerProps.right)), modalType && modalConfig && /*#__PURE__*/React.createElement(PisellModal.Information, {
+    open: true,
+    title: ((_modalConfig$config2 = modalConfig.config) === null || _modalConfig$config2 === void 0 ? void 0 : _modalConfig$config2.title) || getText(modalConfig.titleKey),
+    describe: ((_modalConfig$config3 = modalConfig.config) === null || _modalConfig$config3 === void 0 ? void 0 : _modalConfig$config3.describe) || getText(modalConfig.descKey),
+    footer: processedFooter,
+    okText: getText(modalConfig.okTextKey),
+    cancelText: getText(modalConfig.cancelTextKey),
+    closable: true,
+    onCancel: closeModal,
+    onOk: function onOk() {
+      return handleConfirm('ok');
     }
-  }, [disabled, onStepClick]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: mergedClassName,
-    style: style
-  }, showPrevButton && /*#__PURE__*/React.createElement(Button, _extends({
-    icon: /*#__PURE__*/React.createElement(LeftOutlined, null),
-    onClick: handlePrevClick,
-    disabled: disabled || current === 0,
-    className: "pisell-procedure-header-prev"
-  }, prevButtonProps), "\u4E0A\u4E00\u6B65"), /*#__PURE__*/React.createElement("div", {
-    className: "pisell-procedure-header-steps"
-  }, /*#__PURE__*/React.createElement(PisellSteps, _extends({
-    current: current,
-    items: steps,
-    onChange: handleStepChange
-  }, stepsProps))), headerExtra && /*#__PURE__*/React.createElement("div", {
-    className: "pisell-procedure-header-extra"
-  }, headerExtra), showCloseButton && /*#__PURE__*/React.createElement(Button, _extends({
-    icon: /*#__PURE__*/React.createElement(CloseOutlined, null),
-    onClick: handleCloseClick,
-    disabled: disabled,
-    className: "pisell-procedure-header-close"
-  }, closeButtonProps), "\u5173\u95ED"));
+  }));
 };
+ProcedureHeader.displayName = 'ProcedureHeader';
 export default ProcedureHeader;

package/es/components/PisellProcedure/components/ProcedureSidebar.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+/**
+ * ProcedureSidebar 子组件 Props
+ */
+export interface ProcedureSidebarProps {
+    /** 信息区类名 */
+    className?: string;
+    /** 信息区样式 */
+    style?: CSSProperties;
+    /** 信息区插槽 */
+    children?: ReactNode;
+    /** 额外内容（如底部操作区） */
+    extra?: ReactNode;
+    /** 是否为比例布局模式 */
+    isRatioMode?: boolean;
+}
+/**
+ * ProcedureSidebar 信息区组件
+ *
+ * @description 流程容器的信息区（侧边栏），用于展示摘要信息
+ * @author Pisell Team
+ */
+declare const ProcedureSidebar: React.FC<ProcedureSidebarProps>;
+export default ProcedureSidebar;

package/es/components/PisellProcedure/components/ProcedureSidebar.js

@@ -0,0 +1,73 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { useMemo } from 'react';
+import PisellSider from "../../pisellLayout/sider";
+import { mergeClassNames } from "../utils";
+import { useElementHeight } from "../hooks";
+
+/**
+ * ProcedureSidebar 子组件 Props
+ */
+
+/**
+ * ProcedureSidebar 信息区组件
+ * 
+ * @description 流程容器的信息区（侧边栏），用于展示摘要信息
+ * @author Pisell Team
+ */
+var ProcedureSidebar = function ProcedureSidebar(_ref) {
+  var className = _ref.className,
+    style = _ref.style,
+    children = _ref.children,
+    extra = _ref.extra,
+    _ref$isRatioMode = _ref.isRatioMode,
+    isRatioMode = _ref$isRatioMode === void 0 ? false : _ref$isRatioMode;
+  var headerHeight = useElementHeight({
+    selector: '.pisell-procedure-header'
+  });
+
+  /**
+   * 计算全局 footer 的高度
+   */
+  var floatAllFooterHeight = useElementHeight({
+    selector: '.pisell-procedure-footer--float-all'
+  });
+  var fixedBottomFooterHeight = useElementHeight({
+    selector: '.pisell-procedure-footer--fixed-bottom'
+  });
+  var footerHeight = Math.max(floatAllFooterHeight, fixedBottomFooterHeight);
+
+  /** 信息区类名 */
+  var sidebarCls = useMemo(function () {
+    return mergeClassNames('pisell-procedure-sidebar', className,
+    // 比例模式添加特殊类名
+    isRatioMode && 'pisell-procedure-sidebar--ratio');
+  }, [className, isRatioMode]);
+
+  // 计算信息区的高度：视口高度 - header高度 - footer高度 - body padding
+  var siderHeight = useMemo(function () {
+    if (typeof window === 'undefined') return undefined;
+    var viewportHeight = window.innerHeight;
+    var bodyPadding = 16 * 2; // 上下各16px
+    var calculatedHeight = viewportHeight - headerHeight - footerHeight - bodyPadding - 1;
+    return calculatedHeight > 0 ? calculatedHeight : undefined;
+  }, [headerHeight, footerHeight]);
+  return /*#__PURE__*/React.createElement(PisellSider, {
+    className: sidebarCls,
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      overflow: 'hidden'
+    }, siderHeight ? {
+      height: "".concat(siderHeight, "px")
+    } : {}),
+    width: "auto",
+    collapsible: false
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-procedure-sider-content-top"
+  }, children), extra);
+};
+ProcedureSidebar.displayName = 'ProcedureSidebar';
+export default ProcedureSidebar;

package/es/components/PisellProcedure/components/index.d.ts

@@ -0,0 +1,12 @@
+export { default as FooterActions } from './FooterActions';
+export type { FooterActionsProps } from './FooterActions';
+export { default as ProcedureHeader } from './ProcedureHeader';
+export type { ProcedureHeaderProps } from './ProcedureHeader';
+export { default as ProcedureBody } from './ProcedureBody';
+export type { ProcedureBodyProps } from './ProcedureBody';
+export { default as ProcedureContent } from './ProcedureContent';
+export type { ProcedureContentProps } from './ProcedureContent';
+export { default as ProcedureSidebar } from './ProcedureSidebar';
+export type { ProcedureSidebarProps } from './ProcedureSidebar';
+export { default as ProcedureFooter } from './ProcedureFooter';
+export type { ProcedureFooterProps } from './ProcedureFooter';

package/es/components/PisellProcedure/components/index.js

@@ -0,0 +1,12 @@
+// 底部操作按钮组件（溢出收纳）
+export { default as FooterActions } from "./FooterActions";
+// 头部区域组件
+export { default as ProcedureHeader } from "./ProcedureHeader";
+// 主体区域组件
+export { default as ProcedureBody } from "./ProcedureBody";
+// 内容区组件
+export { default as ProcedureContent } from "./ProcedureContent";
+// 信息区组件
+export { default as ProcedureSidebar } from "./ProcedureSidebar";
+// 底部操作区组件
+export { default as ProcedureFooter } from "./ProcedureFooter";

package/es/components/PisellProcedure/hooks/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * PisellProcedure Hooks 导出
+ */
+export { useStepManager } from './useStepManager';
+export type { UseStepManagerOptions, UseStepManagerReturn, } from './useStepManager';
+export { useElementHeight } from './useElementHeight';
+export type { UseElementHeightOptions, } from './useElementHeight';
+export { useOverflowActions } from './useOverflowActions';
+export type { UseOverflowActionsOptions, UseOverflowActionsReturn, } from './useOverflowActions';

package/es/components/PisellProcedure/hooks/index.js

@@ -0,0 +1,10 @@
+/**
+ * PisellProcedure Hooks 导出
+ */
+
+// 步骤管理 Hook
+export { useStepManager } from "./useStepManager";
+// 元素高度计算 Hook
+export { useElementHeight } from "./useElementHeight";
+// 溢出收纳 Hook
+export { useOverflowActions } from "./useOverflowActions";

package/es/components/PisellProcedure/hooks/useElementHeight.d.ts

@@ -0,0 +1,23 @@
+/**
+ * useElementHeight Hook 配置
+ */
+export interface UseElementHeightOptions {
+    /** 元素选择器（类名、ID 或其他 CSS 选择器） */
+    selector: string;
+    /** 是否启用监听（默认 true） */
+    enabled?: boolean;
+    /** 默认高度（元素不存在时使用） */
+    defaultHeight?: number;
+}
+/**
+ * 元素高度计算 Hook
+ *
+ * @description 计算指定元素的高度，并监听窗口大小变化自动更新
+ *
+ * @example
+ * const headerHeight = useElementHeight({
+ *   selector: '.pisell-procedure-header',
+ *   defaultHeight: 64
+ * });
+ */
+export declare const useElementHeight: ({ selector, enabled, defaultHeight, }: UseElementHeightOptions) => number;

package/es/components/PisellProcedure/hooks/useElementHeight.js

@@ -0,0 +1,87 @@
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useState, useEffect, useCallback } from 'react';
+
+/**
+ * useElementHeight Hook 配置
+ */
+
+/**
+ * 元素高度计算 Hook
+ * 
+ * @description 计算指定元素的高度，并监听窗口大小变化自动更新
+ * 
+ * @example
+ * const headerHeight = useElementHeight({ 
+ *   selector: '.pisell-procedure-header',
+ *   defaultHeight: 64 
+ * });
+ */
+export var useElementHeight = function useElementHeight(_ref) {
+  var selector = _ref.selector,
+    _ref$enabled = _ref.enabled,
+    enabled = _ref$enabled === void 0 ? true : _ref$enabled,
+    _ref$defaultHeight = _ref.defaultHeight,
+    defaultHeight = _ref$defaultHeight === void 0 ? 0 : _ref$defaultHeight;
+  var _useState = useState(defaultHeight),
+    _useState2 = _slicedToArray(_useState, 2),
+    height = _useState2[0],
+    setHeight = _useState2[1];
+
+  /**
+   * 计算元素高度
+   */
+  var calculateHeight = useCallback(function () {
+    if (!enabled || typeof window === 'undefined') {
+      setHeight(defaultHeight);
+      return;
+    }
+    var element = document.querySelector(selector);
+    if (element) {
+      var rect = element.getBoundingClientRect();
+      setHeight(rect.height);
+    } else {
+      setHeight(defaultHeight);
+    }
+  }, [selector, enabled, defaultHeight]);
+
+  // 初始化和监听窗口大小变化
+  useEffect(function () {
+    if (!enabled) return;
+
+    // 初始计算
+    calculateHeight();
+
+    // 延迟计算，等待 DOM 渲染完成
+    var timer = setTimeout(calculateHeight, 100);
+
+    // 监听窗口大小变化
+    var handleResize = function handleResize() {
+      calculateHeight();
+    };
+    window.addEventListener('resize', handleResize);
+
+    // 使用 MutationObserver 监听 DOM 变化
+    var observer = new MutationObserver(function () {
+      calculateHeight();
+    });
+
+    // 观察整个 body 的子树变化
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ['style', 'class']
+    });
+    return function () {
+      clearTimeout(timer);
+      window.removeEventListener('resize', handleResize);
+      observer.disconnect();
+    };
+  }, [calculateHeight, enabled]);
+  return height;
+};

package/es/components/PisellProcedure/hooks/useOverflowActions.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import type { MenuProps } from 'antd';
+/**
+ * useOverflowActions Hook 配置
+ */
+export interface UseOverflowActionsOptions {
+    /** 操作按钮子元素 */
+    children?: React.ReactNode;
+    /** 按钮间距 */
+    gap?: number;
+    /** More 按钮文案 */
+    moreText?: string;
+}
+/**
+ * useOverflowActions Hook 返回值
+ */
+export interface UseOverflowActionsReturn {
+    /** 容器 ref */
+    containerRef: React.RefObject<HTMLDivElement>;
+    /** 测量容器 ref */
+    measureRef: React.RefObject<HTMLDivElement>;
+    /** More 按钮测量 ref */
+    moreButtonRef: React.RefObject<HTMLDivElement>;
+    /** 左侧插槽 ref（用于测量宽度） */
+    leftSlotRef: React.RefObject<HTMLDivElement>;
+    /** 所有操作项 */
+    actionItems: React.ReactNode[];
+    /** 可见的操作项 */
+    visibleActions: React.ReactNode[];
+    /** 溢出的操作项 */
+    overflowActions: React.ReactNode[];
+    /** 是否有溢出 */
+    hasOverflow: boolean;
+    /** More 菜单项 */
+    moreMenuItems: MenuProps['items'];
+    /** 可用宽度（用于调试） */
+    availableWidth: number;
+}
+/**
+ * 溢出收纳 Hook
+ * @description 处理操作按钮的溢出收纳逻辑，支持左侧自定义内容
+ */
+export declare const useOverflowActions: (options: UseOverflowActionsOptions) => UseOverflowActionsReturn;