@pisell/materials 1.0.987 → 1.0.988

package/es/components/PisellProcedure/components/FooterActions.js

@@ -10,7 +10,6 @@ import { mergeClassNames } from "../utils";
 
 /**
  * FooterActions 底部操作区组件
- *
  * @description 实现底部操作区的左右布局：左侧自定义内容 + 右侧操作按钮（支持溢出收纳）
  * 收纳规则：从左到右依次收纳（优先级低的先收纳），保留右侧的主要操作按钮
  * @author Pisell Team
@@ -92,9 +91,7 @@ var FooterActions = function FooterActions(_ref) {
   }, hasOverflow && /*#__PURE__*/React.createElement(Dropdown, {
     menu: {
       items: moreMenuItems
-    },
-    placement: "topLeft",
-    trigger: ['click']
+    }
   }, /*#__PURE__*/React.createElement(Button, {
     icon: /*#__PURE__*/React.createElement(UpOutlined, null)
   }, moreText)), visibleActions)));

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ProcedureBodyProps as BodyProps, ProcedureFooterProps, FooterPositionMode } from '../types';
+import type { ProcedureBodyProps as BodyProps, ProcedureFooterProps, FooterPositionMode, ProcedureMode } from '../types';
 /**
  * ProcedureBody 子组件 Props
  */
@@ -26,6 +26,8 @@ export interface ProcedureBodyProps {
     goPrev?: () => void;
     /** 下一步回调 */
     goNext?: () => void;
+    /** 组件使用模式 */
+    mode?: ProcedureMode;
 }
 /**
  * ProcedureBody 主体区域组件

package/es/components/PisellProcedure/components/ProcedureBody.js

@@ -34,9 +34,13 @@ var ProcedureBody = function ProcedureBody(_ref) {
     onOpenSummaryModal = _ref.onOpenSummaryModal,
     onCloseSummaryModal = _ref.onCloseSummaryModal,
     goPrev = _ref.goPrev,
-    goNext = _ref.goNext;
+    goNext = _ref.goNext,
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? 'page' : _ref$mode;
   /** 排列方向，默认为横向 */
   var direction = (bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.direction) || 'horizontal';
+  /** 内容顺序，默认为内容区在前 */
+  var contentOrder = (bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.contentOrder) || 'content-first';
   /** 布局模式，默认为固定宽度 */
   var layoutMode = (bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.layoutMode) || 'fixed';
   /** 布局比例，默认为 7:3 */
@@ -46,8 +50,9 @@ var ProcedureBody = function ProcedureBody(_ref) {
   var bodyCls = useMemo(function () {
     return mergeClassNames('pisell-procedure-body', className, bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.className, // 添加排列方向类名
     "pisell-procedure-body--".concat(direction), // 添加布局模式类名
-    "pisell-procedure-body--".concat(layoutMode));
-  }, [className, bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.className, direction, layoutMode]);
+    "pisell-procedure-body--".concat(layoutMode), // 添加内容顺序类名
+    "pisell-procedure-body--".concat(contentOrder));
+  }, [className, bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.className, direction, layoutMode, contentOrder]);
 
   /** 计算比例布局样式 */
   var ratioStyles = useMemo(function () {
@@ -85,9 +90,10 @@ var ProcedureBody = function ProcedureBody(_ref) {
       onOpenSummaryModal: onOpenSummaryModal,
       onCloseSummaryModal: onCloseSummaryModal,
       goPrev: goPrev,
-      goNext: goNext
+      goNext: goNext,
+      mode: mode
     });
-  }, [showFooter, footerPosition, footerProps, sidebarContent, summaryModalOpen, onOpenSummaryModal, onCloseSummaryModal, goPrev, goNext]);
+  }, [showFooter, footerPosition, footerProps, sidebarContent, summaryModalOpen, onOpenSummaryModal, onCloseSummaryModal, goPrev, goNext, mode]);
 
   /** 信息区底部 */
   var sidebarFooter = useMemo(function () {
@@ -100,9 +106,10 @@ var ProcedureBody = function ProcedureBody(_ref) {
       onOpenSummaryModal: onOpenSummaryModal,
       onCloseSummaryModal: onCloseSummaryModal,
       goPrev: goPrev,
-      goNext: goNext
+      goNext: goNext,
+      mode: mode
     });
-  }, [showFooter, footerPosition, footerProps, sidebarContent, summaryModalOpen, onOpenSummaryModal, onCloseSummaryModal, goPrev, goNext]);
+  }, [showFooter, footerPosition, footerProps, sidebarContent, summaryModalOpen, onOpenSummaryModal, onCloseSummaryModal, goPrev, goNext, mode]);
 
   /** PisellLayout 样式（根据排列方向设置 flex-direction） */
   var layoutStyle = useMemo(function () {
@@ -110,21 +117,38 @@ var ProcedureBody = function ProcedureBody(_ref) {
       flexDirection: direction === 'vertical' ? 'column' : 'row'
     };
   }, [direction]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: bodyCls,
-    style: bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.style
-  }, /*#__PURE__*/React.createElement(PisellLayout, {
-    style: layoutStyle
-  }, /*#__PURE__*/React.createElement(ProcedureContent, {
+
+  /** 内容区组件 */
+  var contentComponent = /*#__PURE__*/React.createElement(ProcedureContent, {
     className: bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.contentClassName,
     style: contentStyle,
     extra: contentFooter
-  }, bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.contentSlot), showSidebar && /*#__PURE__*/React.createElement(ProcedureSidebar, {
+  }, bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.contentSlot);
+
+  /** 信息区组件 */
+  var sidebarComponent = showSidebar ? /*#__PURE__*/React.createElement(ProcedureSidebar, {
     className: bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.sidebarClassName,
     style: sidebarStyle,
     extra: sidebarFooter,
-    isRatioMode: layoutMode === 'ratio'
-  }, bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.sidebarSlot)));
+    isRatioMode: layoutMode === 'ratio',
+    containerSelector: bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.sidebarContainerSelector,
+    mode: mode,
+    direction: direction
+  }, bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.sidebarSlot) : null;
+
+  /** 根据 contentOrder 决定渲染顺序 */
+  var orderedChildren = useMemo(function () {
+    if (contentOrder === 'sidebar-first') {
+      return [sidebarComponent, contentComponent].filter(Boolean);
+    }
+    return [contentComponent, sidebarComponent].filter(Boolean);
+  }, [contentOrder, contentComponent, sidebarComponent]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: bodyCls,
+    style: bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.style
+  }, /*#__PURE__*/React.createElement(PisellLayout, {
+    style: layoutStyle
+  }, orderedChildren));
 };
 ProcedureBody.displayName = 'ProcedureBody';
 export default ProcedureBody;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ProcedureFooterProps as FooterProps, FooterPositionMode } from '../types';
+import type { ProcedureFooterProps as FooterProps, FooterPositionMode, ProcedureMode } from '../types';
 import type { ReactNode } from 'react';
 /**
  * ProcedureFooter 子组件 Props
@@ -25,6 +25,8 @@ export interface ProcedureFooterProps {
     goPrev?: () => void;
     /** 下一步回调 */
     goNext?: () => void;
+    /** 组件使用模式 */
+    mode?: ProcedureMode;
 }
 /**
  * ProcedureFooter 底部操作区组件

package/es/components/PisellProcedure/components/ProcedureFooter.js

@@ -26,7 +26,9 @@ var ProcedureFooter = function ProcedureFooter(_ref) {
     onOpenSummaryModal = _ref.onOpenSummaryModal,
     onCloseSummaryModal = _ref.onCloseSummaryModal,
     goPrev = _ref.goPrev,
-    goNext = _ref.goNext;
+    goNext = _ref.goNext,
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? 'page' : _ref$mode;
   /** 底部区域类名 */
   var footerCls = useMemo(function () {
     return mergeClassNames('pisell-procedure-footer', className, footerProps === null || footerProps === void 0 ? void 0 : footerProps.className, modifierClassName('pisell-procedure-footer', position));
@@ -34,7 +36,10 @@ var ProcedureFooter = function ProcedureFooter(_ref) {
 
   /**
    * 处理操作按钮
-   * @description 为最后一个按钮注入下一步事件
+   * @description 根据 data-action 属性注入对应的事件
+   * - data-action="prev"：注入上一步事件（goPrev）
+   * - data-action="next"：注入下一步事件（goNext）
+   * - 无 data-action 且是最后一个按钮：默认注入下一步事件（goNext）
    */
   var processedActions = useMemo(function () {
     var actions = footerProps === null || footerProps === void 0 ? void 0 : footerProps.actions;
@@ -42,28 +47,36 @@ var ProcedureFooter = function ProcedureFooter(_ref) {
 
     // 将 actions 转换为数组
     var childrenArray = Children.toArray(actions);
-    if (childrenArray.length === 0) return actions;
+    if (childrenArray.length === 0) return null;
 
     // 处理每个子元素
     return Children.map(actions, function (child, index) {
       // 不是有效的 React 元素，直接返回
       if (! /*#__PURE__*/isValidElement(child)) return child;
+      var childProps = child.props;
+      var dataAction = childProps === null || childProps === void 0 ? void 0 : childProps['data-action'];
+      var originalOnClick = childProps === null || childProps === void 0 ? void 0 : childProps.onClick;
 
-      // 判断是否是最后一个按钮
-      var isLastButton = index === childrenArray.length - 1;
+      // 根据 data-action 属性决定注入哪个事件
+      var injectedAction;
+      if (dataAction === 'prev') {
+        injectedAction = goPrev;
+      } else if (dataAction === 'next') {
+        injectedAction = goNext;
+      }
 
-      // 如果是最后一个按钮或，注入对应的事件
-      if (isLastButton) {
-        var _child$props;
-        var originalOnClick = (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.onClick;
+      // 如果需要注入事件，则包装 onClick
+      if (injectedAction) {
         return /*#__PURE__*/cloneElement(child, {
           onClick: function onClick() {
+            var _injectedAction;
             for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
               args[_key] = arguments[_key];
             }
             // 先执行原有的 onClick
             originalOnClick === null || originalOnClick === void 0 || originalOnClick.apply(void 0, args);
-            goNext === null || goNext === void 0 || goNext();
+            // 再执行注入的事件
+            (_injectedAction = injectedAction) === null || _injectedAction === void 0 || _injectedAction();
           }
         });
       }
@@ -97,19 +110,28 @@ var ProcedureFooter = function ProcedureFooter(_ref) {
 
   /** 渲染底部操作区内容 */
   var footerContent = useMemo(function () {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, wrappedSummaryButton && /*#__PURE__*/React.createElement("div", {
+    // 弹窗模式下不显示移动端总结按钮
+    var hasSummaryButton = mode === 'modal' ? false : !!wrappedSummaryButton;
+    var hasLeftSlot = (footerProps === null || footerProps === void 0 ? void 0 : footerProps.leftSlot) !== undefined && (footerProps === null || footerProps === void 0 ? void 0 : footerProps.leftSlot) !== null;
+    var hasActions = actionsContent !== null && actionsContent !== undefined;
+
+    // 如果没有任何内容，返回 null
+    if (!hasSummaryButton && !hasLeftSlot && !hasActions) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(React.Fragment, null, hasSummaryButton && wrappedSummaryButton && /*#__PURE__*/React.createElement("div", {
       className: "pisell-procedure-footer__summary"
-    }, wrappedSummaryButton), (footerProps === null || footerProps === void 0 ? void 0 : footerProps.enableOverflow) !== false ? /*#__PURE__*/React.createElement(FooterActions, {
+    }, wrappedSummaryButton), (hasLeftSlot || hasActions) && ((footerProps === null || footerProps === void 0 ? void 0 : footerProps.enableOverflow) !== false ? /*#__PURE__*/React.createElement(FooterActions, {
       leftSlot: footerProps === null || footerProps === void 0 ? void 0 : footerProps.leftSlot,
       moreText: footerProps === null || footerProps === void 0 ? void 0 : footerProps.moreText
     }, actionsContent) : /*#__PURE__*/React.createElement("div", {
       className: "pisell-procedure-footer__content"
     }, (footerProps === null || footerProps === void 0 ? void 0 : footerProps.leftSlot) && /*#__PURE__*/React.createElement("div", {
       className: "pisell-procedure-footer__left"
-    }, footerProps.leftSlot), /*#__PURE__*/React.createElement("div", {
+    }, footerProps.leftSlot), hasActions && /*#__PURE__*/React.createElement("div", {
       className: "pisell-procedure-footer__actions"
-    }, actionsContent)));
-  }, [wrappedSummaryButton, footerProps === null || footerProps === void 0 ? void 0 : footerProps.enableOverflow, footerProps === null || footerProps === void 0 ? void 0 : footerProps.leftSlot, footerProps === null || footerProps === void 0 ? void 0 : footerProps.moreText, actionsContent]);
+    }, actionsContent))));
+  }, [mode, wrappedSummaryButton, footerProps === null || footerProps === void 0 ? void 0 : footerProps.enableOverflow, footerProps === null || footerProps === void 0 ? void 0 : footerProps.leftSlot, footerProps === null || footerProps === void 0 ? void 0 : footerProps.moreText, actionsContent]);
 
   /** 移动端信息区弹窗 */
   var summaryModal = useMemo(function () {
@@ -124,6 +146,11 @@ var ProcedureFooter = function ProcedureFooter(_ref) {
     }, sidebarContent);
   }, [footerProps === null || footerProps === void 0 ? void 0 : footerProps.summaryButton, footerProps === null || footerProps === void 0 ? void 0 : footerProps.summaryModalTitle, sidebarContent, summaryModalOpen, onCloseSummaryModal]);
 
+  // 如果没有内容，不渲染底部区域
+  if (!footerContent) {
+    return null;
+  }
+
   // 全局底部使用 PisellFooter 组件包裹
   if (isGlobal) {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PisellFooter, {

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

@@ -59,23 +59,37 @@ var ProcedureHeader = function ProcedureHeader(_ref) {
     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 slotOrder = (headerProps === null || headerProps === void 0 ? void 0 : headerProps.slotOrder) || 'default';
 
-  /** 是否显示左侧区域 */
-  var showLeftArea = useMemo(function () {
-    // 没有左侧插槽内容，不显示
-    if (!(headerProps !== null && headerProps !== void 0 && headerProps.left)) return false;
+  /** 根据 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;
-  }, [headerProps === null || headerProps === void 0 ? void 0 : headerProps.left, currentStep, headerProps === null || headerProps === void 0 ? void 0 : headerProps.showBackOnFirstStep]);
+  }, [actualLeftSlot, slotOrder, currentStep, headerProps === null || headerProps === void 0 ? void 0 : headerProps.showBackOnFirstStep]);
+
+  /** 是否显示右侧区域（考虑插槽顺序） */
+  var showActualRightArea = useMemo(function () {
+    return !!actualRightSlot;
+  }, [actualRightSlot]);
 
   /**
    * 关闭确认弹窗
@@ -95,8 +109,10 @@ var ProcedureHeader = function ProcedureHeader(_ref) {
       if (onFirstStepBack) {
         onFirstStepBack();
       } else {
-        // 默认跳转到首页
-        window.location.href = '/';
+        // 默认跳转到首页（仅在浏览器环境中执行）
+        if (typeof window !== 'undefined' && window.location) {
+          window.location.href = '/';
+        }
       }
       return;
     }
@@ -193,9 +209,11 @@ var ProcedureHeader = function ProcedureHeader(_ref) {
     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;
+    // 确保 footer 是数组
+    if (!footer || !Array.isArray(footer) || footer.length === 0) return undefined;
     return footer.map(function (btn) {
-      if (!btn || _typeof(btn) !== 'object') return btn;
+      // 确保 btn 是有效对象
+      if (!btn || _typeof(btn) !== 'object' || !btn.action) return btn;
       var processedBtn = _objectSpread({}, btn);
       var originalOnClick = processedBtn.onClick;
       processedBtn.onClick = function () {
@@ -225,26 +243,38 @@ var ProcedureHeader = function ProcedureHeader(_ref) {
   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", {
+  }, showActualLeftArea && /*#__PURE__*/React.createElement("div", {
     className: "pisell-procedure-header__left",
     onClick: function onClick() {
-      return handleBackClick();
+      // 根据 slotOrder 决定点击事件：reverse 时左侧是关闭按钮，default 时左侧是返回按钮
+      if (slotOrder === 'reverse') {
+        handleCloseClick();
+      } else {
+        handleBackClick();
+      }
     }
-  }, headerProps === null || headerProps === void 0 ? void 0 : headerProps.left), /*#__PURE__*/React.createElement("div", {
+  }, 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
-  }))), hasRightSlot && /*#__PURE__*/React.createElement("div", {
+  }))), showActualRightArea && /*#__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, {
+    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),
+    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),
+    okText: getText(modalConfig.okTextKey) || '',
+    cancelText: getText(modalConfig.cancelTextKey) || '',
     closable: true,
     onCancel: closeModal,
     onOk: function onOk() {

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { CSSProperties, ReactNode } from 'react';
+import type { ProcedureMode, BodyDirection } from '../types';
 /**
  * ProcedureSidebar 子组件 Props
  */
@@ -14,6 +15,16 @@ export interface ProcedureSidebarProps {
     extra?: ReactNode;
     /** 是否为比例布局模式 */
     isRatioMode?: boolean;
+    /**
+     * 容器元素选择器（类名或 ID）
+     * @description 用于计算高度的容器元素，支持类名（如 '.modal-container'）或 ID（如 '#dialog-container'）
+     * @description 如果不提供，则使用 window.innerHeight 作为基准
+     */
+    containerSelector?: string;
+    /** 组件使用模式 */
+    mode?: ProcedureMode;
+    /** 排列方向 */
+    direction?: BodyDirection;
 }
 /**
  * ProcedureSidebar 信息区组件

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

@@ -4,10 +4,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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 React, { useMemo, useLayoutEffect } from 'react';
 import PisellSider from "../../pisellLayout/sider";
 import { mergeClassNames } from "../utils";
-import { useElementHeight } from "../hooks";
+import { useElementSize, useSidebarHeight, useResponsiveClass } from "../hooks";
 
 /**
  * ProcedureSidebar 子组件 Props
@@ -15,7 +15,7 @@ import { useElementHeight } from "../hooks";
 
 /**
  * ProcedureSidebar 信息区组件
- * 
+ *
  * @description 流程容器的信息区（侧边栏），用于展示摘要信息
  * @author Pisell Team
  */
@@ -25,46 +25,94 @@ var ProcedureSidebar = function ProcedureSidebar(_ref) {
     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'
+    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 floatAllFooterHeight = useElementHeight({
-    selector: '.pisell-procedure-footer--float-all'
+  // 计算全局 footer 的高度（垂直布局下不需要）
+  var floatAllFooterSize = useElementSize({
+    selector: '.pisell-procedure-footer--float-all',
+    enabled: !isVertical
   });
-  var fixedBottomFooterHeight = useElementHeight({
-    selector: '.pisell-procedure-footer--fixed-bottom'
+  var fixedBottomFooterSize = useElementSize({
+    selector: '.pisell-procedure-footer--fixed-bottom',
+    enabled: !isVertical
   });
-  var footerHeight = Math.max(floatAllFooterHeight, fixedBottomFooterHeight);
+  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 sidebarCls = useMemo(function () {
-    return mergeClassNames('pisell-procedure-sidebar', className,
-    // 比例模式添加特殊类名
-    isRatioMode && 'pisell-procedure-sidebar--ratio');
-  }, [className, isRatioMode]);
+  // 获取容器宽度和高度（垂直布局下不需要）
+  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]);
 
-  // 计算信息区的高度：视口高度 - 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]);
+  // 使用自定义 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), {}, {
+    style: _objectSpread(_objectSpread(_objectSpread({}, style), {}, {
       overflow: 'hidden'
-    }, siderHeight ? {
+    }, siderHeight && siderHeight > 0 ? {
       height: "".concat(siderHeight, "px")
-    } : {}),
-    width: "auto",
-    collapsible: false
+    } : {}), {}, {
+      top: mode === 'modal' ? 0 : "".concat((headerSize === null || headerSize === void 0 ? void 0 : headerSize.height) + 32, "px")
+    })
   }, /*#__PURE__*/React.createElement("div", {
     className: "pisell-procedure-sider-content-top"
   }, children), extra);

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

@@ -1,9 +1,8 @@
-/**
- * PisellProcedure Hooks 导出
- */
 export { useStepManager } from './useStepManager';
 export type { UseStepManagerOptions, UseStepManagerReturn, } from './useStepManager';
-export { useElementHeight } from './useElementHeight';
-export type { UseElementHeightOptions, } from './useElementHeight';
+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

@@ -1,10 +1,11 @@
-/**
- * PisellProcedure Hooks 导出
- */
-
 // 步骤管理 Hook
 export { useStepManager } from "./useStepManager";
-// 元素高度计算 Hook
-export { useElementHeight } from "./useElementHeight";
+// 元素尺寸计算 Hook（宽度和高度）
+export { useElementSize } from "./useElementSize";
 // 溢出收纳 Hook
-export { useOverflowActions } from "./useOverflowActions";
+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;