@pisell/materials 6.7.4 → 6.8.2

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

@@ -0,0 +1,286 @@
+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); }
+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 头部区域组件
+ * 
+ * @description 包含左侧返回按钮、中间步骤条、右侧关闭按钮
+ * @author Pisell Team
+ */
+var ProcedureHeader = function ProcedureHeader(_ref) {
+  var _modalConfig$config2, _modalConfig$config3;
+  var headerProps = _ref.headerProps,
+    currentStep = _ref.currentStep,
+    className = _ref.className,
+    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 slotOrder = (headerProps === null || headerProps === void 0 ? void 0 : headerProps.slotOrder) || 'default';
+
+  /** 根据 slotOrder 决定实际显示的左右插槽 */
+  var actualLeftSlot = useMemo(function () {
+    return slotOrder === 'reverse' ? headerProps === null || headerProps === void 0 ? void 0 : headerProps.right : headerProps === null || headerProps === void 0 ? void 0 : headerProps.left;
+  }, [slotOrder, headerProps === null || headerProps === void 0 ? void 0 : headerProps.left, headerProps === null || headerProps === void 0 ? void 0 : headerProps.right]);
+  var actualRightSlot = useMemo(function () {
+    return slotOrder === 'reverse' ? headerProps === null || headerProps === void 0 ? void 0 : headerProps.left : headerProps === null || headerProps === void 0 ? void 0 : headerProps.right;
+  }, [slotOrder, headerProps === null || headerProps === void 0 ? void 0 : headerProps.left, headerProps === null || headerProps === void 0 ? void 0 : headerProps.right]);
+
+  /** 是否显示左侧区域（考虑插槽顺序） */
+  var showActualLeftArea = useMemo(function () {
+    if (!actualLeftSlot) return false;
+    // 第一步时根据配置决定是否显示，默认不显示
+    // 注意：当 slotOrder='reverse' 时，actualLeftSlot 实际上是 right 插槽（关闭按钮），应该始终显示
+    if (slotOrder === 'reverse') {
+      return true; // 关闭按钮始终显示
+    }
+    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;
+  }, [actualLeftSlot, slotOrder, currentStep, headerProps === null || headerProps === void 0 ? void 0 : headerProps.showBackOnFirstStep]);
+
+  /** 是否显示右侧区域（考虑插槽顺序） */
+  var showActualRightArea = useMemo(function () {
+    return !!actualRightSlot;
+  }, [actualRightSlot]);
+
+  /**
+   * 关闭确认弹窗
+   */
+  var closeModal = useCallback(function () {
+    setModalType(null);
+    setTargetStep(-1);
+  }, []);
+
+  /**
+   * 统一处理返回和步骤跳转
+   * @param step 目标步骤索引，如果未传递或 < 0 则表示返回上一步
+   */
+  var handleBackClick = useCallback(function (step) {
+    // 第一步且显示返回按钮，触发首步返回回调（仅返回按钮触发，步骤跳转不受此限制）
+    if (currentStep === 0 && headerProps !== null && headerProps !== void 0 && headerProps.showBackOnFirstStep && (step === undefined || step < 0)) {
+      if (onFirstStepBack) {
+        onFirstStepBack();
+      } else {
+        // 默认跳转到首页（仅在浏览器环境中执行）
+        if (typeof window !== 'undefined' && window.location) {
+          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;
+    }
+
+    // 显示返回确认弹窗
+    setModalType('back');
+  }, [currentStep, headerProps, onFirstStepBack, goPrev, goToStep]);
+
+  /**
+   * 处理关闭按钮点击
+   */
+  var handleCloseClick = useCallback(function () {
+    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;
+    }
+
+    // 显示关闭确认弹窗
+    setModalType('close');
+  }, [headerProps, onClose]);
+
+  /**
+   * 处理确认操作
+   */
+  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;
+    // 确保 footer 是数组
+    if (!footer || !Array.isArray(footer) || footer.length === 0) return undefined;
+    return footer.map(function (btn) {
+      // 确保 btn 是有效对象
+      if (!btn || _typeof(btn) !== 'object' || !btn.action) 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
+  }, showActualLeftArea && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-procedure-header__left",
+    onClick: function onClick() {
+      // 根据 slotOrder 决定点击事件：reverse 时左侧是关闭按钮，default 时左侧是返回按钮
+      if (slotOrder === 'reverse') {
+        handleCloseClick();
+      } else {
+        handleBackClick();
+      }
+    }
+  }, actualLeftSlot), (headerProps === null || headerProps === void 0 ? void 0 : headerProps.showSteps) !== false && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-procedure-header__center"
+  }, /*#__PURE__*/React.createElement(PisellSteps, _extends({}, mergedStepsProps, {
+    mobileMode: "auto",
+    mobileBreakpoint: 744
+  }))), showActualRightArea && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-procedure-header__right",
+    onClick: function onClick() {
+      // 根据 slotOrder 决定点击事件：reverse 时右侧是返回按钮，default 时右侧是关闭按钮
+      if (slotOrder === 'reverse') {
+        handleBackClick();
+      } else {
+        handleCloseClick();
+      }
+    }
+  }, actualRightSlot)), 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');
+    }
+  }));
+};
+ProcedureHeader.displayName = 'ProcedureHeader';
+export default ProcedureHeader;

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+import type { ProcedureMode, BodyDirection } from '../types';
+/**
+ * ProcedureSidebar 子组件 Props
+ */
+export interface ProcedureSidebarProps {
+    /** 信息区类名 */
+    className?: string;
+    /** 信息区样式 */
+    style?: CSSProperties;
+    /** 信息区插槽 */
+    children?: ReactNode;
+    /** 额外内容（如底部操作区） */
+    extra?: ReactNode;
+    /** 是否为比例布局模式 */
+    isRatioMode?: boolean;
+    /**
+     * 容器元素选择器（类名或 ID）
+     * @description 用于计算高度的容器元素，支持类名（如 '.modal-container'）或 ID（如 '#dialog-container'）
+     * @description 如果不提供，则使用 window.innerHeight 作为基准
+     */
+    containerSelector?: string;
+    /** 组件使用模式 */
+    mode?: ProcedureMode;
+    /** 排列方向 */
+    direction?: BodyDirection;
+}
+/**
+ * ProcedureSidebar 信息区组件
+ *
+ * @description 流程容器的信息区（侧边栏），用于展示摘要信息
+ * @author Pisell Team
+ */
+declare const ProcedureSidebar: React.FC<ProcedureSidebarProps>;
+export default ProcedureSidebar;

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

@@ -0,0 +1,119 @@
+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, useLayoutEffect } from 'react';
+import PisellSider from "../../pisellLayout/sider";
+import { mergeClassNames } from "../utils";
+import { useElementSize, useSidebarHeight, useResponsiveClass } 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,
+    containerSelector = _ref.containerSelector,
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? 'page' : _ref$mode,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? 'horizontal' : _ref$direction;
+  // 垂直布局下不需要计算高度
+  var isVertical = direction === 'vertical';
+  // 获取 header 高度（垂直布局下不需要）
+  var headerSize = useElementSize({
+    selector: '.pisell-procedure-header',
+    enabled: !isVertical
+  });
+
+  // 计算全局 footer 的高度（垂直布局下不需要）
+  var floatAllFooterSize = useElementSize({
+    selector: '.pisell-procedure-footer--float-all',
+    enabled: !isVertical
+  });
+  var fixedBottomFooterSize = useElementSize({
+    selector: '.pisell-procedure-footer--fixed-bottom',
+    enabled: !isVertical
+  });
+  var footerHeight = Math.max((floatAllFooterSize === null || floatAllFooterSize === void 0 ? void 0 : floatAllFooterSize.height) || 0, (fixedBottomFooterSize === null || fixedBottomFooterSize === void 0 ? void 0 : fixedBottomFooterSize.height) || 0);
+
+  // 获取容器宽度和高度（垂直布局下不需要）
+  var containerSize = useElementSize({
+    selector: containerSelector || '',
+    enabled: !isVertical && !!containerSelector,
+    threshold: 5,
+    debounceMs: 200
+  });
+  var containerWidth = (containerSize === null || containerSize === void 0 ? void 0 : containerSize.width) || 0;
+
+  // 设置 CSS 变量 --pisell-procedure-container-width，供样式文件使用
+  useLayoutEffect(function () {
+    if (typeof document === 'undefined') return;
+    var root = document.documentElement;
+    if (containerWidth > 0) {
+      root.style.setProperty('--pisell-procedure-container-width', "".concat(containerWidth, "px"));
+    }
+    return function () {
+      root.style.removeProperty('--pisell-procedure-container-width');
+    };
+  }, [containerWidth]);
+
+  // 检查所有尺寸是否已稳定（垂直布局下始终返回 false，不计算高度）
+  var isSizeStable = useMemo(function () {
+    // 垂直布局下不需要计算高度
+    if (isVertical) {
+      return false;
+    }
+    if (!(headerSize !== null && headerSize !== void 0 && headerSize.height) || headerSize.height === 0) {
+      return false;
+    }
+    if (containerSelector && containerSelector.trim()) {
+      return (containerSize === null || containerSize === void 0 ? void 0 : containerSize.width) > 0 && (containerSize === null || containerSize === void 0 ? void 0 : containerSize.height) > 0;
+    }
+    return true;
+  }, [isVertical, containerSelector, containerSize === null || containerSize === void 0 ? void 0 : containerSize.width, containerSize === null || containerSize === void 0 ? void 0 : containerSize.height, headerSize === null || headerSize === void 0 ? void 0 : headerSize.height]);
+
+  // 使用自定义 Hook 计算高度（垂直布局下不需要）
+  var siderHeight = useSidebarHeight(isSizeStable, {
+    containerSelector: containerSelector,
+    containerHeight: containerSize === null || containerSize === void 0 ? void 0 : containerSize.height,
+    headerHeight: headerSize === null || headerSize === void 0 ? void 0 : headerSize.height,
+    footerHeight: footerHeight
+  });
+
+  // 使用自定义 Hook 计算响应式类名（延迟应用，避免宽度抖动）
+  // 注意：Hook 必须无条件调用，不能放在条件语句中
+  var responsiveClsComputed = useResponsiveClass(containerWidth);
+  // 仅在 modal 模式下应用响应式类名
+  var responsiveCls = mode === 'modal' ? responsiveClsComputed : '';
+
+  // 信息区类名
+  var sidebarCls = useMemo(function () {
+    return mergeClassNames('pisell-procedure-sidebar', className, isRatioMode && 'pisell-procedure-sidebar--ratio', responsiveCls);
+  }, [className, isRatioMode, responsiveCls]);
+  return /*#__PURE__*/React.createElement(PisellSider, {
+    className: sidebarCls,
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      overflow: 'hidden'
+    }, siderHeight && siderHeight > 0 ? {
+      height: "".concat(siderHeight, "px")
+    } : {})
+  }, /*#__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,8 @@
+export { useStepManager } from './useStepManager';
+export type { UseStepManagerOptions, UseStepManagerReturn, } from './useStepManager';
+export { useElementSize } from './useElementSize';
+export type { UseElementSizeOptions, ElementSize, } from './useElementSize';
+export { useOverflowActions } from './useOverflowActions';
+export type { UseOverflowActionsOptions, UseOverflowActionsReturn, } from './useOverflowActions';
+export { useSidebarHeight } from './useSidebarHeight';
+export { useResponsiveClass } from './useResponsiveClass';

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

@@ -0,0 +1,11 @@
+// 步骤管理 Hook
+export { useStepManager } from "./useStepManager";
+// 元素尺寸计算 Hook（宽度和高度）
+export { useElementSize } from "./useElementSize";
+// 溢出收纳 Hook
+export { useOverflowActions } from "./useOverflowActions";
+// Sidebar 高度计算 Hook
+export { useSidebarHeight } from "./useSidebarHeight";
+
+// 响应式类名 Hook
+export { useResponsiveClass } from "./useResponsiveClass";

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

@@ -0,0 +1,38 @@
+/**
+ * useElementSize Hook 配置
+ */
+export interface UseElementSizeOptions {
+    /** 元素选择器（类名、ID 或其他 CSS 选择器） */
+    selector: string;
+    /** 是否启用监听（默认 true） */
+    enabled?: boolean;
+    /** 默认宽度（元素不存在时使用） */
+    defaultWidth?: number;
+    /** 默认高度（元素不存在时使用） */
+    defaultHeight?: number;
+    /** 尺寸变化阈值（像素），只有变化超过此值才更新（默认 1px） */
+    threshold?: number;
+    /** 防抖延迟时间（毫秒），默认 100ms */
+    debounceMs?: number;
+}
+/**
+ * 元素尺寸信息
+ */
+export interface ElementSize {
+    width: number;
+    height: number;
+}
+/**
+ * 元素尺寸计算 Hook（宽度和高度）
+ *
+ * @description 计算指定元素的宽度和高度，并监听尺寸变化自动更新
+ * 使用 ResizeObserver 和防抖机制优化性能，减少不必要的更新
+ *
+ * @example
+ * const { width, height } = useElementSize({
+ *   selector: '.modal-container',
+ *   defaultWidth: 0,
+ *   defaultHeight: 0
+ * });
+ */
+export declare const useElementSize: ({ selector, enabled, defaultWidth, defaultHeight, threshold, debounceMs, }: UseElementSizeOptions) => ElementSize;