@pisell/materials 6.8.3 → 6.8.4

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

@@ -1,13 +1,7 @@
-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 React, { useMemo, useEffect } from 'react';
 import PisellSider from "../../pisellLayout/sider";
 import { mergeClassNames } from "../utils";
-import { useElementSize, useSidebarHeight, useResponsiveClass } from "../hooks";
+import { useElementSize, useSidebarHeight } from "../hooks";
 
 /**
  * ProcedureSidebar 子组件 Props
@@ -30,7 +24,9 @@ var ProcedureSidebar = function ProcedureSidebar(_ref) {
     _ref$mode = _ref.mode,
     mode = _ref$mode === void 0 ? 'page' : _ref$mode,
     _ref$direction = _ref.direction,
-    direction = _ref$direction === void 0 ? 'horizontal' : _ref$direction;
+    direction = _ref$direction === void 0 ? 'horizontal' : _ref$direction,
+    containerSize = _ref.containerSize,
+    responsiveClsComputed = _ref.responsiveClsComputed;
   // 垂直布局下不需要计算高度
   var isVertical = direction === 'vertical';
   // 获取 header 高度（垂直布局下不需要）
@@ -49,18 +45,10 @@ var ProcedureSidebar = function ProcedureSidebar(_ref) {
     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 () {
+  useEffect(function () {
     if (typeof document === 'undefined') return;
     var root = document.documentElement;
     if (containerWidth > 0) {
@@ -94,25 +82,30 @@ var ProcedureSidebar = function ProcedureSidebar(_ref) {
     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);
+    return mergeClassNames('pisell-procedure-sidebar', className, isRatioMode && 'pisell-procedure-sidebar--ratio'
+    // responsiveCls
+    );
   }, [className, isRatioMode, responsiveCls]);
+  var _height = useMemo(function () {
+    if (mode === 'modal') {
+      return '100%';
+    }
+    if (siderHeight && siderHeight > 0) {
+      return "".concat(siderHeight, "px");
+    }
+  }, [mode, siderHeight]);
   return /*#__PURE__*/React.createElement(PisellSider, {
-    className: sidebarCls,
-    style: _objectSpread(_objectSpread(_objectSpread({}, style), {}, {
-      overflow: 'hidden'
-    }, siderHeight && siderHeight > 0 ? {
-      height: "".concat(siderHeight, "px")
-    } : {}), {}, {
-      top: mode === 'modal' ? 0 : "".concat((headerSize === null || headerSize === void 0 ? void 0 : headerSize.height) + 32, "px")
-    })
+    className: sidebarCls
+    // style={{
+    //   ...style,
+    //   overflow: 'hidden',
+    //   ...(_height && { height: _height }),
+    // }}
   }, /*#__PURE__*/React.createElement("div", {
     className: "pisell-procedure-sider-content-top"
   }, children), extra);

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

@@ -35,4 +35,4 @@ export interface ElementSize {
  *   defaultHeight: 0
  * });
  */
-export declare const useElementSize: ({ selector, enabled, defaultWidth, defaultHeight, threshold, debounceMs, }: UseElementSizeOptions) => ElementSize;
+export declare const useElementSize: ({ selector, enabled, defaultWidth, defaultHeight, debounceMs, }: UseElementSizeOptions) => ElementSize;

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

@@ -4,7 +4,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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, useRef } from 'react';
+import { useState, useLayoutEffect } from 'react';
 
 /**
  * useElementSize Hook 配置
@@ -16,12 +16,12 @@ import { useState, useEffect, useCallback, useRef } from 'react';
 
 /**
  * 元素尺寸计算 Hook（宽度和高度）
- * 
+ *
  * @description 计算指定元素的宽度和高度，并监听尺寸变化自动更新
  * 使用 ResizeObserver 和防抖机制优化性能，减少不必要的更新
- * 
+ *
  * @example
- * const { width, height } = useElementSize({ 
+ * const { width, height } = useElementSize({
  *   selector: '.modal-container',
  *   defaultWidth: 0,
  *   defaultHeight: 0
@@ -35,8 +35,6 @@ export var useElementSize = function useElementSize(_ref) {
     defaultWidth = _ref$defaultWidth === void 0 ? 0 : _ref$defaultWidth,
     _ref$defaultHeight = _ref.defaultHeight,
     defaultHeight = _ref$defaultHeight === void 0 ? 0 : _ref$defaultHeight,
-    _ref$threshold = _ref.threshold,
-    threshold = _ref$threshold === void 0 ? 1 : _ref$threshold,
     _ref$debounceMs = _ref.debounceMs,
     debounceMs = _ref$debounceMs === void 0 ? 100 : _ref$debounceMs;
   var _useState = useState({
@@ -46,23 +44,23 @@ export var useElementSize = function useElementSize(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     size = _useState2[0],
     setSize = _useState2[1];
-  var previousSizeRef = useRef({
-    width: defaultWidth,
-    height: defaultHeight
-  });
-  var debounceTimerRef = useRef(null);
-  var resizeObserverRef = useRef(null);
-  var elementRef = useRef(null);
-
-  /**
-   * 计算元素尺寸（带防抖和阈值检查）
-   */
-  var calculateSize = useCallback(function () {
+  var handScale = function handScale() {
+    var _getComputedStyle;
+    var bodyTransform = (_getComputedStyle = getComputedStyle(document.body)) === null || _getComputedStyle === void 0 ? void 0 : _getComputedStyle.transform;
+    var scaleY = 1;
+    var scaleX = 1;
+    if (bodyTransform !== 'none') {
+      var matrix = new DOMMatrix(bodyTransform);
+      scaleX = matrix.a;
+      scaleY = matrix.d;
+    }
+    return {
+      scaleX: scaleX,
+      scaleY: scaleY
+    };
+  };
+  useLayoutEffect(function () {
     if (!enabled || typeof window === 'undefined' || typeof document === 'undefined') {
-      setSize({
-        width: defaultWidth,
-        height: defaultHeight
-      });
       return;
     }
 
@@ -74,165 +72,42 @@ export var useElementSize = function useElementSize(_ref) {
       });
       return;
     }
-    try {
-      var element = document.querySelector(selector);
-      if (element) {
-        var rect = element.getBoundingClientRect();
-        // 保留两位小数，避免浮点数精度问题导致频繁更新
-        var newWidth = Math.round(rect.width * 100) / 100;
-        var newHeight = Math.round(rect.height * 100) / 100;
-        var previousSize = previousSizeRef.current;
 
-        // 只有尺寸变化超过阈值时才更新
-        var widthDiff = Math.abs(newWidth - previousSize.width);
-        var heightDiff = Math.abs(newHeight - previousSize.height);
-        if (widthDiff >= threshold || heightDiff >= threshold) {
-          var newSize = {
-            width: newWidth,
-            height: newHeight
-          };
-          previousSizeRef.current = newSize;
-          setSize(newSize);
-        }
-      } else {
-        // 元素不存在时，如果当前尺寸不是默认尺寸，则更新
-        if (previousSizeRef.current.width !== defaultWidth || previousSizeRef.current.height !== defaultHeight) {
-          var _newSize = {
+    // 监听窗口大小变化
+    var handleResize = function handleResize() {
+      setTimeout(function () {
+        var element = null;
+        try {
+          var _element;
+          element = document.querySelector(selector);
+          var rect = (_element = element) === null || _element === void 0 ? void 0 : _element.getBoundingClientRect();
+          if (rect) {
+            var _element2;
+            var _handScale = handScale(),
+              scaleX = _handScale.scaleX;
+            var elementWidth = ((_element2 = element) === null || _element2 === void 0 ? void 0 : _element2.clientWidth) || 0;
+            var scaledWidth = elementWidth * scaleX;
+            var width = Math.round(scaledWidth * 100) / 100;
+            var height = Math.round((rect === null || rect === void 0 ? void 0 : rect.height) * 100) / 100;
+            setSize({
+              width: width,
+              height: height
+            });
+          }
+        } catch (error) {
+          setSize({
             width: defaultWidth,
             height: defaultHeight
-          };
-          previousSizeRef.current = _newSize;
-          setSize(_newSize);
+          });
+          return;
         }
-      }
-    } catch (error) {
-      // 选择器无效时，使用默认尺寸
-      console.warn("Invalid selector in useElementSize: ".concat(selector), error);
-      if (previousSizeRef.current.width !== defaultWidth || previousSizeRef.current.height !== defaultHeight) {
-        var _newSize2 = {
-          width: defaultWidth,
-          height: defaultHeight
-        };
-        previousSizeRef.current = _newSize2;
-        setSize(_newSize2);
-      }
-    }
-  }, [selector, enabled, defaultWidth, defaultHeight, threshold]);
-
-  /**
-   * 防抖版本的 calculateSize
-   */
-  var debouncedCalculateSize = useCallback(function () {
-    if (debounceTimerRef.current) {
-      clearTimeout(debounceTimerRef.current);
-    }
-    debounceTimerRef.current = setTimeout(function () {
-      calculateSize();
-    }, debounceMs);
-  }, [calculateSize, debounceMs]);
-
-  // 初始化和监听元素尺寸变化
-  useEffect(function () {
-    if (!enabled || typeof window === 'undefined' || typeof document === 'undefined') {
-      return;
-    }
-
-    // 如果选择器为空，使用默认尺寸
-    if (!selector || !selector.trim()) {
-      setSize({
-        width: defaultWidth,
-        height: defaultHeight
-      });
-      previousSizeRef.current = {
-        width: defaultWidth,
-        height: defaultHeight
-      };
-      return;
-    }
-    var element = null;
-    try {
-      element = document.querySelector(selector);
-    } catch (error) {
-      console.warn("Invalid selector in useElementSize: ".concat(selector), error);
-      setSize({
-        width: defaultWidth,
-        height: defaultHeight
-      });
-      previousSizeRef.current = {
-        width: defaultWidth,
-        height: defaultHeight
-      };
-      return;
-    }
-    if (!element) {
-      setSize({
-        width: defaultWidth,
-        height: defaultHeight
-      });
-      previousSizeRef.current = {
-        width: defaultWidth,
-        height: defaultHeight
-      };
-      return;
-    }
-    elementRef.current = element;
-
-    // 立即同步计算一次初始尺寸（不使用防抖），避免初始渲染时尺寸为0导致的抖动
-    calculateSize();
-
-    // 延迟计算，等待 DOM 完全渲染完成后再更新一次（使用防抖版本）
-    var initialTimer = setTimeout(function () {
-      debouncedCalculateSize();
-    }, 200);
-
-    // 使用 ResizeObserver 监听元素尺寸变化（性能更好，更精确）
-    if (typeof ResizeObserver !== 'undefined') {
-      resizeObserverRef.current = new ResizeObserver(function () {
-        debouncedCalculateSize();
-      });
-      resizeObserverRef.current.observe(element);
-    } else {
-      // 降级方案：使用 MutationObserver 和 window resize
-      var mutationObserver = new MutationObserver(function () {
-        debouncedCalculateSize();
-      });
-
-      // 只观察目标元素的变化，而不是整个 body
-      mutationObserver.observe(element, {
-        childList: true,
-        subtree: true,
-        attributes: true,
-        attributeFilter: ['style', 'class']
-      });
-
-      // 监听窗口大小变化
-      var handleResize = function handleResize() {
-        debouncedCalculateSize();
-      };
-      window.addEventListener('resize', handleResize);
-      return function () {
-        clearTimeout(initialTimer);
-        if (debounceTimerRef.current) {
-          clearTimeout(debounceTimerRef.current);
-        }
-        mutationObserver.disconnect();
-        if (typeof window !== 'undefined') {
-          window.removeEventListener('resize', handleResize);
-        }
-      };
-    }
-
-    // 清理函数
+      }, debounceMs);
+    };
+    handleResize();
+    window.addEventListener('resize', handleResize);
     return function () {
-      clearTimeout(initialTimer);
-      if (debounceTimerRef.current) {
-        clearTimeout(debounceTimerRef.current);
-      }
-      if (resizeObserverRef.current && elementRef.current) {
-        resizeObserverRef.current.unobserve(elementRef.current);
-        resizeObserverRef.current.disconnect();
-      }
+      window.removeEventListener('resize', handleResize);
     };
-  }, [selector, enabled, defaultWidth, defaultHeight, calculateSize, debouncedCalculateSize]);
+  }, [selector, enabled, defaultWidth, defaultHeight, debounceMs]);
   return size;
 };

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

@@ -1,10 +1,14 @@
 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 { Children, isValidElement, cloneElement, useMemo, useState, useRef, useEffect, useCallback } from 'react';
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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; }
+import { isValidElement, cloneElement, useMemo, useState, useRef, useEffect, useCallback } from 'react';
 import { extractButtonLabel } from "../utils/extractText";
 
 /**
@@ -15,6 +19,67 @@ import { extractButtonLabel } from "../utils/extractText";
  * useOverflowActions Hook 返回值
  */
 
+/**
+ * 检查元素是否是按钮（根据类名是否包含 "btn"）
+ */
+var isButtonElement = function isButtonElement(element) {
+  var props = element.props || {};
+  var className = props.className;
+
+  // 检查 className 是否包含 "btn"
+  if (typeof className === 'string' && className.includes('btn')) {
+    return true;
+  }
+
+  // 如果 className 是数组，检查数组中是否有包含 "btn" 的字符串
+  if (Array.isArray(className)) {
+    return className.some(function (cls) {
+      return typeof cls === 'string' && cls.includes('btn');
+    });
+  }
+  return false;
+};
+
+/**
+ * 递归提取所有按钮元素
+ */
+var extractButtons = function extractButtons(node) {
+  var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var buttons = [];
+  if (!node) {
+    return buttons;
+  }
+
+  // 如果是数组，递归处理每个元素
+  if (Array.isArray(node)) {
+    node.forEach(function (item, i) {
+      buttons.push.apply(buttons, _toConsumableArray(extractButtons(item, i)));
+    });
+    return buttons;
+  }
+
+  // 如果是有效的 React 元素
+  if ( /*#__PURE__*/isValidElement(node)) {
+    var element = node;
+
+    // 如果当前元素是按钮，直接添加
+    if (isButtonElement(element)) {
+      var _element$key;
+      buttons.push( /*#__PURE__*/cloneElement(element, {
+        key: (_element$key = element.key) !== null && _element$key !== void 0 ? _element$key : "btn-".concat(index)
+      }));
+      return buttons;
+    }
+
+    // 如果不是按钮，递归处理其 children
+    if (element.props && element.props.children) {
+      var childButtons = extractButtons(element.props.children, index);
+      buttons.push.apply(buttons, _toConsumableArray(childButtons));
+    }
+  }
+  return buttons;
+};
+
 /**
  * 溢出收纳 Hook
  * @description 处理操作按钮的溢出收纳逻辑，支持左侧自定义内容
@@ -22,9 +87,7 @@ import { extractButtonLabel } from "../utils/extractText";
 export var useOverflowActions = function useOverflowActions(options) {
   var children = options.children,
     _options$gap = options.gap,
-    gap = _options$gap === void 0 ? 16 : _options$gap,
-    _options$moreText = options.moreText,
-    moreText = _options$moreText === void 0 ? 'More' : _options$moreText;
+    gap = _options$gap === void 0 ? 16 : _options$gap;
   var containerRef = useRef(null);
   var measureRef = useRef(null);
   var moreButtonRef = useRef(null);
@@ -43,19 +106,10 @@ export var useOverflowActions = function useOverflowActions(options) {
     setAvailableWidth = _useState6[1];
 
   /**
-   * 将 children 转换为数组
+   * 找到所有按钮元素
    */
   var actionItems = useMemo(function () {
-    var items = [];
-    Children.forEach(children, function (child, index) {
-      if ( /*#__PURE__*/isValidElement(child)) {
-        var _child$key;
-        items.push( /*#__PURE__*/cloneElement(child, {
-          key: (_child$key = child.key) !== null && _child$key !== void 0 ? _child$key : index
-        }));
-      }
-    });
-    return items;
+    return extractButtons(children);
   }, [children]);
 
   /**

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

@@ -1,11 +1,3 @@
-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, useRef } from 'react';
-
 /**
  * 响应式断点常量
  */
@@ -30,7 +22,7 @@ var RESPONSIVE_CLASSES = {
  * 根据容器宽度获取响应式类名
  */
 var getResponsiveClass = function getResponsiveClass(width) {
-  if (width === 0) return '';
+  if (width === 0 || !width) return '';
   if (width >= RESPONSIVE_BREAKPOINTS.lg) {
     return ''; // 使用默认样式
   }
@@ -51,68 +43,5 @@ var getResponsiveClass = function getResponsiveClass(width) {
  * @description 根据容器宽度计算响应式类名，延迟应用以避免宽度抖动
  */
 export var useResponsiveClass = function useResponsiveClass(containerWidth) {
-  var _useState = useState(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    responsiveCls = _useState2[0],
-    setResponsiveCls = _useState2[1];
-  var previousWidthRef = useRef(0);
-  var rafIdRef = useRef(null);
-  var stableCheckCountRef = useRef(0);
-  useEffect(function () {
-    if (typeof window === 'undefined') {
-      return;
-    }
-
-    // 如果宽度为0，重置类名
-    if (containerWidth === 0) {
-      setResponsiveCls('');
-      previousWidthRef.current = 0;
-      stableCheckCountRef.current = 0;
-      return;
-    }
-
-    // 清除之前的动画帧
-    if (rafIdRef.current !== null) {
-      cancelAnimationFrame(rafIdRef.current);
-    }
-
-    /**
-     * 稳定性检查函数：连续3次检查宽度都稳定才应用类名
-     */
-    var checkStability = function checkStability() {
-      var currentWidth = containerWidth;
-      var previousWidth = previousWidthRef.current;
-
-      // 如果宽度变化超过5px，重置计数
-      if (Math.abs(currentWidth - previousWidth) >= 5) {
-        stableCheckCountRef.current = 0;
-        previousWidthRef.current = currentWidth;
-      }
-
-      // 连续3次检查宽度都相同（或变化很小），才应用类名
-      stableCheckCountRef.current += 1;
-      if (stableCheckCountRef.current >= 3) {
-        // 稳定了，应用类名
-        var newCls = getResponsiveClass(currentWidth);
-        setResponsiveCls(newCls);
-        previousWidthRef.current = currentWidth;
-        stableCheckCountRef.current = 0; // 重置计数
-      } else {
-        // 还未稳定，继续等待下一次重绘
-        rafIdRef.current = requestAnimationFrame(checkStability);
-      }
-    };
-
-    // 使用 requestAnimationFrame 确保在浏览器重绘后检查
-    rafIdRef.current = requestAnimationFrame(checkStability);
-
-    // 清理函数
-    return function () {
-      if (rafIdRef.current !== null) {
-        cancelAnimationFrame(rafIdRef.current);
-        rafIdRef.current = null;
-      }
-    };
-  }, [containerWidth]);
-  return responsiveCls;
+  return getResponsiveClass(containerWidth);
 };

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

@@ -12,7 +12,7 @@ import { useState, useEffect, useRef, useCallback } from 'react';
 
 /**
  * 使用 Sidebar 高度的 Hook
- * 
+ *
  * @description 计算并管理 Sidebar 的高度，确保在尺寸稳定后才应用
  */
 export var useSidebarHeight = function useSidebarHeight(isSizeStable, sizeValues) {
@@ -31,8 +31,30 @@ export var useSidebarHeight = function useSidebarHeight(isSizeStable, sizeValues
     sizeValuesRef.current = sizeValues;
   }, [sizeValues]);
 
+  /**
+   * 获取 body 元素的 CSS transform Y 轴缩放比例
+   * @returns scaleY 缩放比例
+   */
+  var getBodyScaleY = useCallback(function () {
+    try {
+      if (typeof window === 'undefined' || typeof document === 'undefined') {
+        return 1;
+      }
+      var bodyTransform = getComputedStyle(document.body).transform;
+      var scaleY = 1;
+      if (bodyTransform !== 'none') {
+        var matrix = new DOMMatrix(bodyTransform);
+        scaleY = matrix.d; // Y 轴缩放
+      }
+      return scaleY;
+    } catch (error) {
+      return 1;
+    }
+  }, []);
+
   /**
    * 计算高度的函数
+   * @description 计算时会考虑 body 上的 CSS transform 缩放，返回缩放校正后的实际逻辑高度
    */
   var calculateHeight = useCallback(function () {
     var _sizeValuesRef$curren = sizeValuesRef.current,
@@ -51,8 +73,14 @@ export var useSidebarHeight = function useSidebarHeight(isSizeStable, sizeValues
     var bodyPadding = 16 * 2; // 上下各16px
     var headerHeightValue = headerHeight || 0;
     var calculatedHeight = baseHeight - headerHeightValue - footerHeight - bodyPadding;
-    return calculatedHeight;
-  }, [sizeValuesRef.current]);
+
+    // 获取 body 的 Y 轴缩放比例，并计算校正后的高度
+    var scaleY = getBodyScaleY();
+    var scaledHeight = calculatedHeight / scaleY;
+
+    // 保留两位小数
+    return Math.round(scaledHeight * 100) / 100;
+  }, [sizeValuesRef.current, getBodyScaleY]);
 
   // 使用 requestAnimationFrame 确保在浏览器重绘后计算，更稳定
   useEffect(function () {

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

@@ -2,4 +2,4 @@
  * PisellProcedure 组件导出
  */
 export { default } from './PisellProcedure';
-export type { PisellProcedureProps, ProcedureHeaderProps, ProcedureBodyProps, ProcedureFooterProps, FooterPositionMode, BackConfirmModalConfig, BodyLayoutMode, BodyLayoutRatio, BodyDirection, StepItem, StepChangeResult, } from './types';
+export type { PisellProcedureProps, PisellProcedureRef, ProcedureHeaderProps, ProcedureBodyProps, ProcedureFooterProps, FooterPositionMode, BackConfirmModalConfig, BodyLayoutMode, BodyLayoutRatio, BodyDirection, StepItem, StepChangeResult, } from './types';