@pisell/materials 1.0.988 → 1.0.990

package/es/components/PisellProcedure/PisellProcedure.js

@@ -11,7 +11,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React, { useMemo, useCallback, useState, forwardRef, useImperativeHandle } from 'react';
 import PisellLayout from "../pisellLayout";
 import { ProcedureHeader, ProcedureBody, ProcedureFooter } from "./components";
-import { useStepManager } from "./hooks";
+import { useStepManager, useElementSize, useResponsiveClass } from "./hooks";
 import { mergeClassNames, modifierClassName, isFooterGlobal } from "./utils";
 import { useMobile } from "../../hooks/useMobile";
 import "./PisellProcedure.less";
@@ -144,6 +144,16 @@ var PisellProcedure = /*#__PURE__*/forwardRef(function (props, ref) {
 
   // 判断底部是否全局显示
   var footerIsGlobal = isFooterGlobal(footerPosition);
+
+  // 获取容器宽度和高度（垂直布局下不需要）
+  var containerSize = useElementSize({
+    selector: (bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.sidebarContainerSelector) || '',
+    enabled: (bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.direction) !== 'vertical' && !!(bodyProps !== null && bodyProps !== void 0 && bodyProps.sidebarContainerSelector)
+  });
+
+  // 使用自定义 Hook 计算响应式类名
+  var responsiveClsComputed = mode === 'modal' ? useResponsiveClass((containerSize === null || containerSize === void 0 ? void 0 : containerSize.width) || 0) : '';
+  if (!responsiveClsComputed && mode === 'modal') return null;
   return /*#__PURE__*/React.createElement("div", _extends({
     className: containerCls,
     style: style,
@@ -169,7 +179,9 @@ var PisellProcedure = /*#__PURE__*/forwardRef(function (props, ref) {
     onCloseSummaryModal: closeSummaryModal,
     goPrev: _goPrev,
     goNext: _goNext,
-    mode: mode
+    mode: mode,
+    containerSize: containerSize,
+    responsiveClsComputed: responsiveClsComputed
   }), showFooter && footerIsGlobal && /*#__PURE__*/React.createElement(ProcedureFooter, {
     footerProps: footerProps,
     position: footerPosition,

package/es/components/PisellProcedure/PisellProcedure.less

@@ -157,32 +157,11 @@
       display: flex;
       flex-direction: column;
 
-      .@{procedure-prefix}-sider-content-top{
-        height: auto;
-        max-height: 100%;
-        overflow-y: auto;
-        background-color: #ffffff;
-      }
-
       .@{procedure-prefix}-footer{
         flex-shrink: 0;
       }
     }
 
-    // 纵向排列时的样式
-    .@{procedure-prefix}-body--vertical & {
-      width: 100% !important;
-      max-width: 100% !important;
-      min-width: 0 !important;
-      flex: 0 0 auto !important;
-      position: relative;
-      top: auto;
-
-      .@{procedure-prefix}-sider-content-top{
-        height: 100%;
-      }
-    }
-
     // 响应式宽度调整 - 基于容器宽度的类名控制（适用于弹窗场景）
     // 使用 CSS 变量 --pisell-procedure-container-width（由 JavaScript 动态设置）
     // 960px <= containerWidth < 1133px: 376px ~ 405px 线性插值
@@ -269,6 +248,27 @@
     }
   }
 
+  .@{procedure-prefix}-sider-content-top{
+    height: auto;
+    max-height: 100%;
+    overflow-y: auto;
+    background-color: #ffffff;
+  }
+
+  // 纵向排列时的样式
+  .@{procedure-prefix}-body--vertical & {
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 0 !important;
+    flex: 0 0 auto !important;
+    position: relative;
+    top: auto;
+
+    .@{procedure-prefix}-sider-content-top{
+      height: 100%;
+    }
+  }
+
   // ========== 底部区域基础样式 ==========
   &-footer {
     display: flex;

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

@@ -3,6 +3,7 @@ import { Dropdown, Button } from 'antd';
 import UpOutlined from '@ant-design/icons/UpOutlined';
 import { useOverflowActions } from "../hooks/useOverflowActions";
 import { mergeClassNames } from "../utils";
+import { getText } from "../../../locales";
 
 /**
  * FooterActions 底部操作区组件 Props
@@ -18,8 +19,7 @@ var FooterActions = function FooterActions(_ref) {
   var leftSlot = _ref.leftSlot,
     children = _ref.children,
     className = _ref.className,
-    _ref$moreText = _ref.moreText,
-    moreText = _ref$moreText === void 0 ? 'More' : _ref$moreText,
+    moreText = _ref.moreText,
     _ref$gap = _ref.gap,
     gap = _ref$gap === void 0 ? 16 : _ref$gap;
   var _useOverflowActions = useOverflowActions({
@@ -94,7 +94,7 @@ var FooterActions = function FooterActions(_ref) {
     }
   }, /*#__PURE__*/React.createElement(Button, {
     icon: /*#__PURE__*/React.createElement(UpOutlined, null)
-  }, moreText)), visibleActions)));
+  }, moreText || getText('pisell-procedure-footer-more'))), visibleActions)));
 };
 FooterActions.displayName = 'FooterActions';
 export default FooterActions;

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

@@ -28,6 +28,8 @@ export interface ProcedureBodyProps {
     goNext?: () => void;
     /** 组件使用模式 */
     mode?: ProcedureMode;
+    containerSize?: any;
+    responsiveClsComputed?: string;
 }
 /**
  * ProcedureBody 主体区域组件

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

@@ -36,7 +36,9 @@ var ProcedureBody = function ProcedureBody(_ref) {
     goPrev = _ref.goPrev,
     goNext = _ref.goNext,
     _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? 'page' : _ref$mode;
+    mode = _ref$mode === void 0 ? 'page' : _ref$mode,
+    containerSize = _ref.containerSize,
+    responsiveClsComputed = _ref.responsiveClsComputed;
   /** 排列方向，默认为横向 */
   var direction = (bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.direction) || 'horizontal';
   /** 内容顺序，默认为内容区在前 */
@@ -133,7 +135,9 @@ var ProcedureBody = function ProcedureBody(_ref) {
     isRatioMode: layoutMode === 'ratio',
     containerSelector: bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.sidebarContainerSelector,
     mode: mode,
-    direction: direction
+    direction: direction,
+    containerSize: containerSize,
+    responsiveClsComputed: responsiveClsComputed
   }, bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.sidebarSlot) : null;
 
   /** 根据 contentOrder 决定渲染顺序 */

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

@@ -25,6 +25,8 @@ export interface ProcedureSidebarProps {
     mode?: ProcedureMode;
     /** 排列方向 */
     direction?: BodyDirection;
+    containerSize?: any;
+    responsiveClsComputed?: string;
 }
 /**
  * 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, 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 +30,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 +51,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,9 +88,6 @@ var ProcedureSidebar = function ProcedureSidebar(_ref) {
     footerHeight: footerHeight
   });
 
-  // 使用自定义 Hook 计算响应式类名（延迟应用，避免宽度抖动）
-  // 注意：Hook 必须无条件调用，不能放在条件语句中
-  var responsiveClsComputed = useResponsiveClass(containerWidth);
   // 仅在 modal 模式下应用响应式类名
   var responsiveCls = mode === 'modal' ? responsiveClsComputed : '';
 
@@ -104,14 +95,20 @@ var ProcedureSidebar = function ProcedureSidebar(_ref) {
   var sidebarCls = useMemo(function () {
     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), {}, {
+    style: _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")
+    }, _height && {
+      height: _height
     })
   }, /*#__PURE__*/React.createElement("div", {
     className: "pisell-procedure-sider-content-top"

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]);
 
   /**