@pisell/materials 6.8.3 → 6.8.5

package/lib/components/PisellProcedure/PisellProcedure.less

@@ -11,6 +11,7 @@
 @sidebar-width-xl: 405px;  // ≥1133px
 @sidebar-width-md: 376px;  // 960px-1133px
 @sidebar-width-sm: 290px;  // 744px-960px
+@sidebar-width-880: 344px;  // 880px-960px
 
 // 间距
 @gap-default: 16px;
@@ -87,6 +88,7 @@
     display: flex;
     flex-direction: column;
     height: 100%;
+    overflow-y: auto;
 
     // 主体区域内部的 Layout
     > .pisell-lowcode-layout,
@@ -100,9 +102,6 @@
       padding: @gap-default;
     }
 
-    // ========== 布局模式：固定宽度（默认） ==========
-    // &--fixed 使用默认的固定宽度布局，无需额外样式
-
     // ========== 布局模式：比例布局 ==========
     &--ratio {
       // 移动端：比例模式下也隐藏信息区（弹窗模式下不执行）
@@ -141,122 +140,47 @@
 
   // 信息区 - 高度自适应内容，sticky 定位
   &-sidebar {
-    width: initial !important;
+    width: auto !important;
     max-width: initial !important;
     min-width: initial !important;
+    flex: 0 0 auto !important;
     background-color: @color-bg-sidebar;
     border-radius: 4px;
     position: sticky!important;
     overflow-y: auto;
     align-self: flex-start; // 不拉伸高度
     background: transparent !important;
-    height: fit-content;
+    height: 100% !important;
 
     .@{pisell-layout-prefix}-sider-content{
-      overflow: hidden!important;
+      overflow: hidden !important;
       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%;
-      }
+    // ≥1133px: 固定宽度 405px
+    @media (min-width: @breakpoint-xl) {
+      width: @sidebar-width-xl;
     }
-
-    // 响应式宽度调整 - 基于容器宽度的类名控制（适用于弹窗场景）
-    // 使用 CSS 变量 --pisell-procedure-container-width（由 JavaScript 动态设置）
-    // 960px <= containerWidth < 1133px: 376px ~ 405px 线性插值
-    // 公式: 376 + (containerWidth - 960) * (405 - 376) / (1133 - 960)
-    &--responsive-md {
-      @sidebar-width-dynamic: calc(@sidebar-width-md + (var(--pisell-procedure-container-width, 100vw) - @breakpoint-md) * (405 - 376) / (1133 - 960));
-      width: @sidebar-width-dynamic !important;
-      max-width: @sidebar-width-xl !important;
-      min-width: @sidebar-width-md !important;
-      flex: 0 0 @sidebar-width-dynamic !important;
-    }
-
-    // 744px <= containerWidth < 960px: 290px ~ 376px 线性插值
-    // 公式: 290 + (containerWidth - 744) * (376 - 290) / (960 - 744)
-    &--responsive-sm {
-      @sidebar-width-dynamic: calc(@sidebar-width-sm + (var(--pisell-procedure-container-width, 100vw) - @breakpoint-sm) * (376 - 290) / (960 - 744));
-      width: @sidebar-width-dynamic !important;
-      max-width: @sidebar-width-md !important;
-      min-width: @sidebar-width-sm !important;
-      flex: 0 0 @sidebar-width-dynamic !important;
+    // 960px <= viewportWidth < 1133px: 376px ~ 405px
+    @media (min-width: @breakpoint-md) and (max-width: calc(@breakpoint-lg - 1px)) {
+      max-width: @sidebar-width-xl;
+      min-width: @sidebar-width-md;
     }
 
-    // containerWidth < 744px: 弹窗模式下使用最小宽度保持显示
-    // 注意：只有弹窗模式下才会添加响应式类名，页面模式下通过媒体查询隐藏
-    &--responsive-xs {
-      // 弹窗模式下不隐藏 sidebar，使用最小宽度
-      width: @sidebar-width-sm !important;
-      max-width: @sidebar-width-sm !important;
-      min-width: @sidebar-width-sm !important;
-      flex: 0 0 @sidebar-width-sm !important;
-      display: initial !important;
+    // 744px <= viewportWidth < 960px: 290px ~ 376px
+    @media (min-width: @breakpoint-sm) and (max-width: calc(@breakpoint-md - 1px)) {
+      max-width: @sidebar-width-md;
+      min-width: @sidebar-width-sm;
     }
 
-    // 大于1133px: 405px（仅页面模式，弹窗模式下不执行媒体查询）
-    .@{procedure-prefix}:not(.@{procedure-prefix}--modal) & {
-      @media (min-width: @breakpoint-lg) {
-        width: @sidebar-width-xl !important;
-        max-width: @sidebar-width-xl !important;
-        min-width: @sidebar-width-xl !important;
-        flex: 0 0 @sidebar-width-xl !important;
-      }
-
-      // 保留媒体查询作为降级方案（当没有提供 containerSelector 时，即页面模式）
-      // 960px < viewportWidth < 1133px: 376px ~ 405px 线性插值
-      @media (max-width: calc(@breakpoint-lg - 1px)) and (min-width: @breakpoint-md) {
-        // 如果没有响应式类名，则应用媒体查询样式
-        &:not(.pisell-procedure-sidebar--responsive-md):not(.pisell-procedure-sidebar--responsive-sm):not(.pisell-procedure-sidebar--responsive-xs) {
-          @sidebar-width-dynamic: calc(@sidebar-width-md + (100vw - @breakpoint-md) * (405 - 376) / (1133 - 960));
-          width: @sidebar-width-dynamic !important;
-          max-width: @sidebar-width-xl !important;
-          min-width: @sidebar-width-md !important;
-          flex: 0 0 @sidebar-width-dynamic !important;
-        }
-      }
-
-      // 744px < viewportWidth < 960px: 290px ~ 376px 线性插值
-      @media (max-width: calc(@breakpoint-md)) and (min-width: @breakpoint-sm) {
-        // 如果没有响应式类名，则应用媒体查询样式
-        &:not(.pisell-procedure-sidebar--responsive-md):not(.pisell-procedure-sidebar--responsive-sm):not(.pisell-procedure-sidebar--responsive-xs) {
-          @sidebar-width-dynamic: calc(@sidebar-width-sm + (100vw - @breakpoint-sm) * (376 - 290) / (960 - 744));
-          width: @sidebar-width-dynamic !important;
-          max-width: @sidebar-width-md !important;
-          min-width: @sidebar-width-sm !important;
-          flex: 0 0 @sidebar-width-dynamic !important;
-        }
-      }
-
-      // viewportWidth < 744px: 隐藏（仅页面模式）
-      @media (max-width: calc(@breakpoint-sm - 1px)) {
-        // 如果没有响应式类名，则应用媒体查询样式
-        &:not(.pisell-procedure-sidebar--responsive-md):not(.pisell-procedure-sidebar--responsive-sm):not(.pisell-procedure-sidebar--responsive-xs) {
-          display: none !important;
-        }
-      }
+    // viewportWidth < 744px: slider区域隐藏  
+    @media (max-width: calc(@breakpoint-sm - 1px)) {
+        display: none;
     }
 
     // ========== 比例模式样式（在基础样式内部，确保优先级） ==========
@@ -269,6 +193,49 @@
     }
   }
 
+  .@{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%;
+    }
+  }
+
+  .@{procedure-prefix}--modal & {
+    background: red;
+    &-sidebar {
+      // >= 880px: 固定宽度 344px
+    @media (min-width: 880px) {
+      width: @sidebar-width-880 !important;
+    }
+
+    // 744px <= viewportWidth < 880px: 290px ~ 344px
+    @media (min-width: @breakpoint-sm) and (max-width: calc(880px - 1px)) {
+      max-width: @sidebar-width-880 !important;
+      min-width: @sidebar-width-sm !important;
+    }
+
+    // viewportWidth < 744px: 290px
+    @media (max-width: calc(@breakpoint-sm - 1px)) {
+      width: @sidebar-width-sm !important;
+      display: block !important;
+    }
+    }
+  }
+
   // ========== 底部区域基础样式 ==========
   &-footer {
     display: flex;

package/lib/components/PisellProcedure/components/FooterActions.js

@@ -37,11 +37,12 @@ var import_antd = require("antd");
 var import_UpOutlined = __toESM(require("@ant-design/icons/UpOutlined"));
 var import_useOverflowActions = require("../hooks/useOverflowActions");
 var import_utils = require("../utils");
+var import_locales = require("../../../locales");
 var FooterActions = ({
   leftSlot,
   children,
   className,
-  moreText = "More",
+  moreText,
   gap = 16
 }) => {
   const {
@@ -90,7 +91,7 @@ var FooterActions = ({
       "aria-hidden": "true"
     },
     /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { icon: /* @__PURE__ */ import_react.default.createElement(import_UpOutlined.default, null) }, moreText)
-  ), /* @__PURE__ */ import_react.default.createElement("div", { ref: containerRef, className: containerCls, style: { gap } }, hasLeftSlot && /* @__PURE__ */ import_react.default.createElement("div", { ref: leftSlotRef, className: "pisell-procedure-footer__left" }, leftSlot), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-procedure-footer__actions", style: { gap } }, hasOverflow && /* @__PURE__ */ import_react.default.createElement(import_antd.Dropdown, { menu: { items: moreMenuItems } }, /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { icon: /* @__PURE__ */ import_react.default.createElement(import_UpOutlined.default, null) }, moreText)), visibleActions)));
+  ), /* @__PURE__ */ import_react.default.createElement("div", { ref: containerRef, className: containerCls, style: { gap } }, hasLeftSlot && /* @__PURE__ */ import_react.default.createElement("div", { ref: leftSlotRef, className: "pisell-procedure-footer__left" }, leftSlot), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-procedure-footer__actions", style: { gap } }, hasOverflow && /* @__PURE__ */ import_react.default.createElement(import_antd.Dropdown, { menu: { items: moreMenuItems } }, /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { icon: /* @__PURE__ */ import_react.default.createElement(import_UpOutlined.default, null) }, moreText || (0, import_locales.getText)("pisell-procedure-footer-more"))), visibleActions)));
 };
 FooterActions.displayName = "FooterActions";
 var FooterActions_default = FooterActions;

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

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

package/lib/components/PisellProcedure/components/ProcedureBody.js

@@ -50,7 +50,9 @@ var ProcedureBody = ({
   onCloseSummaryModal,
   goPrev,
   goNext,
-  mode = "page"
+  mode = "page",
+  containerSize,
+  responsiveClsComputed
 }) => {
   const direction = (bodyProps == null ? void 0 : bodyProps.direction) || "horizontal";
   const contentOrder = (bodyProps == null ? void 0 : bodyProps.contentOrder) || "content-first";
@@ -141,7 +143,9 @@ var ProcedureBody = ({
       isRatioMode: layoutMode === "ratio",
       containerSelector: bodyProps == null ? void 0 : bodyProps.sidebarContainerSelector,
       mode,
-      direction
+      direction,
+      containerSize,
+      responsiveClsComputed
     },
     bodyProps == null ? void 0 : bodyProps.sidebarSlot
   ) : null;

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

@@ -25,6 +25,8 @@ export interface ProcedureSidebarProps {
     mode?: ProcedureMode;
     /** 排列方向 */
     direction?: BodyDirection;
+    containerSize?: any;
+    responsiveClsComputed?: string;
 }
 /**
  * ProcedureSidebar 信息区组件

package/lib/components/PisellProcedure/components/ProcedureSidebar.js

@@ -44,7 +44,9 @@ var ProcedureSidebar = ({
   isRatioMode = false,
   containerSelector,
   mode = "page",
-  direction = "horizontal"
+  direction = "horizontal",
+  containerSize,
+  responsiveClsComputed
 }) => {
   const isVertical = direction === "vertical";
   const headerSize = (0, import_hooks.useElementSize)({
@@ -63,14 +65,8 @@ var ProcedureSidebar = ({
     (floatAllFooterSize == null ? void 0 : floatAllFooterSize.height) || 0,
     (fixedBottomFooterSize == null ? void 0 : fixedBottomFooterSize.height) || 0
   );
-  const containerSize = (0, import_hooks.useElementSize)({
-    selector: containerSelector || "",
-    enabled: !isVertical && !!containerSelector,
-    threshold: 5,
-    debounceMs: 200
-  });
   const containerWidth = (containerSize == null ? void 0 : containerSize.width) || 0;
-  (0, import_react.useLayoutEffect)(() => {
+  (0, import_react.useEffect)(() => {
     if (typeof document === "undefined") return;
     const root = document.documentElement;
     if (containerWidth > 0) {
@@ -107,28 +103,27 @@ var ProcedureSidebar = ({
     headerHeight: headerSize == null ? void 0 : headerSize.height,
     footerHeight
   });
-  const responsiveClsComputed = (0, import_hooks.useResponsiveClass)(containerWidth);
   const responsiveCls = mode === "modal" ? responsiveClsComputed : "";
   const sidebarCls = (0, import_react.useMemo)(() => {
     return (0, import_utils.mergeClassNames)(
       "pisell-procedure-sidebar",
       className,
-      isRatioMode && "pisell-procedure-sidebar--ratio",
-      responsiveCls
+      isRatioMode && "pisell-procedure-sidebar--ratio"
+      // responsiveCls
     );
   }, [className, isRatioMode, responsiveCls]);
+  const _height = (0, import_react.useMemo)(() => {
+    if (mode === "modal") {
+      return "100%";
+    }
+    if (siderHeight && siderHeight > 0) {
+      return `${siderHeight}px`;
+    }
+  }, [mode, siderHeight]);
   return /* @__PURE__ */ import_react.default.createElement(
     import_sider.default,
     {
-      className: sidebarCls,
-      style: {
-        ...style,
-        overflow: "hidden",
-        ...siderHeight && siderHeight > 0 ? {
-          height: `${siderHeight}px`
-        } : {},
-        top: mode === "modal" ? 0 : `${(headerSize == null ? void 0 : headerSize.height) + 32}px`
-      }
+      className: sidebarCls
     },
     /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-procedure-sider-content-top" }, children),
     extra

package/lib/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/lib/components/PisellProcedure/hooks/useElementSize.js

@@ -28,145 +28,58 @@ var useElementSize = ({
   enabled = true,
   defaultWidth = 0,
   defaultHeight = 0,
-  threshold = 1,
   debounceMs = 100
 }) => {
   const [size, setSize] = (0, import_react.useState)({
     width: defaultWidth,
     height: defaultHeight
   });
-  const previousSizeRef = (0, import_react.useRef)({
-    width: defaultWidth,
-    height: defaultHeight
-  });
-  const debounceTimerRef = (0, import_react.useRef)(null);
-  const resizeObserverRef = (0, import_react.useRef)(null);
-  const elementRef = (0, import_react.useRef)(null);
-  const calculateSize = (0, import_react.useCallback)(() => {
-    if (!enabled || typeof window === "undefined" || typeof document === "undefined") {
-      setSize({ width: defaultWidth, height: defaultHeight });
-      return;
+  const handScale = () => {
+    var _a;
+    const bodyTransform = (_a = getComputedStyle(document.body)) == null ? void 0 : _a.transform;
+    let scaleY = 1;
+    let scaleX = 1;
+    if (bodyTransform !== "none") {
+      const matrix = new DOMMatrix(bodyTransform);
+      scaleX = matrix.a;
+      scaleY = matrix.d;
     }
-    if (!selector || !selector.trim()) {
-      setSize({ width: defaultWidth, height: defaultHeight });
-      return;
-    }
-    try {
-      const element = document.querySelector(selector);
-      if (element) {
-        const rect = element.getBoundingClientRect();
-        const newWidth = Math.round(rect.width * 100) / 100;
-        const newHeight = Math.round(rect.height * 100) / 100;
-        const previousSize = previousSizeRef.current;
-        const widthDiff = Math.abs(newWidth - previousSize.width);
-        const heightDiff = Math.abs(newHeight - previousSize.height);
-        if (widthDiff >= threshold || heightDiff >= threshold) {
-          const newSize = {
-            width: newWidth,
-            height: newHeight
-          };
-          previousSizeRef.current = newSize;
-          setSize(newSize);
-        }
-      } else {
-        if (previousSizeRef.current.width !== defaultWidth || previousSizeRef.current.height !== defaultHeight) {
-          const newSize = {
-            width: defaultWidth,
-            height: defaultHeight
-          };
-          previousSizeRef.current = newSize;
-          setSize(newSize);
-        }
-      }
-    } catch (error) {
-      console.warn(`Invalid selector in useElementSize: ${selector}`, error);
-      if (previousSizeRef.current.width !== defaultWidth || previousSizeRef.current.height !== defaultHeight) {
-        const newSize = {
-          width: defaultWidth,
-          height: defaultHeight
-        };
-        previousSizeRef.current = newSize;
-        setSize(newSize);
-      }
-    }
-  }, [selector, enabled, defaultWidth, defaultHeight, threshold]);
-  const debouncedCalculateSize = (0, import_react.useCallback)(() => {
-    if (debounceTimerRef.current) {
-      clearTimeout(debounceTimerRef.current);
-    }
-    debounceTimerRef.current = setTimeout(() => {
-      calculateSize();
-    }, debounceMs);
-  }, [calculateSize, debounceMs]);
-  (0, import_react.useEffect)(() => {
+    return { scaleX, scaleY };
+  };
+  (0, import_react.useLayoutEffect)(() => {
     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;
-    }
-    let element = null;
-    try {
-      element = document.querySelector(selector);
-    } catch (error) {
-      console.warn(`Invalid selector in useElementSize: ${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;
-    calculateSize();
-    const initialTimer = setTimeout(() => {
-      debouncedCalculateSize();
-    }, 200);
-    if (typeof ResizeObserver !== "undefined") {
-      resizeObserverRef.current = new ResizeObserver(() => {
-        debouncedCalculateSize();
-      });
-      resizeObserverRef.current.observe(element);
-    } else {
-      const mutationObserver = new MutationObserver(() => {
-        debouncedCalculateSize();
-      });
-      mutationObserver.observe(element, {
-        childList: true,
-        subtree: true,
-        attributes: true,
-        attributeFilter: ["style", "class"]
-      });
-      const handleResize = () => {
-        debouncedCalculateSize();
-      };
-      window.addEventListener("resize", handleResize);
-      return () => {
-        clearTimeout(initialTimer);
-        if (debounceTimerRef.current) {
-          clearTimeout(debounceTimerRef.current);
-        }
-        mutationObserver.disconnect();
-        if (typeof window !== "undefined") {
-          window.removeEventListener("resize", handleResize);
+    const handleResize = () => {
+      setTimeout(() => {
+        let element = null;
+        try {
+          element = document.querySelector(selector);
+          const rect = element == null ? void 0 : element.getBoundingClientRect();
+          if (rect) {
+            const { scaleX } = handScale();
+            const elementWidth = (element == null ? void 0 : element.clientWidth) || 0;
+            const scaledWidth = elementWidth * scaleX;
+            const width = Math.round(scaledWidth * 100) / 100;
+            const height = Math.round((rect == null ? void 0 : rect.height) * 100) / 100;
+            setSize({ width, height });
+          }
+        } catch (error) {
+          setSize({ width: defaultWidth, height: defaultHeight });
+          return;
         }
-      };
-    }
+      }, debounceMs);
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
     return () => {
-      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;
 };
 // Annotate the CommonJS export names for ESM import in node:

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

@@ -24,8 +24,47 @@ __export(useOverflowActions_exports, {
 module.exports = __toCommonJS(useOverflowActions_exports);
 var import_react = require("react");
 var import_extractText = require("../utils/extractText");
+var isButtonElement = (element) => {
+  const props = element.props || {};
+  const className = props.className;
+  if (typeof className === "string" && className.includes("btn")) {
+    return true;
+  }
+  if (Array.isArray(className)) {
+    return className.some((cls) => typeof cls === "string" && cls.includes("btn"));
+  }
+  return false;
+};
+var extractButtons = (node, index = 0) => {
+  const buttons = [];
+  if (!node) {
+    return buttons;
+  }
+  if (Array.isArray(node)) {
+    node.forEach((item, i) => {
+      buttons.push(...extractButtons(item, i));
+    });
+    return buttons;
+  }
+  if ((0, import_react.isValidElement)(node)) {
+    const element = node;
+    if (isButtonElement(element)) {
+      buttons.push(
+        (0, import_react.cloneElement)(element, {
+          key: element.key ?? `btn-${index}`
+        })
+      );
+      return buttons;
+    }
+    if (element.props && element.props.children) {
+      const childButtons = extractButtons(element.props.children, index);
+      buttons.push(...childButtons);
+    }
+  }
+  return buttons;
+};
 var useOverflowActions = (options) => {
-  const { children, gap = 16, moreText = "More" } = options;
+  const { children, gap = 16 } = options;
   const containerRef = (0, import_react.useRef)(null);
   const measureRef = (0, import_react.useRef)(null);
   const moreButtonRef = (0, import_react.useRef)(null);
@@ -34,17 +73,7 @@ var useOverflowActions = (options) => {
   const [moreButtonWidth, setMoreButtonWidth] = (0, import_react.useState)(80);
   const [availableWidth, setAvailableWidth] = (0, import_react.useState)(0);
   const actionItems = (0, import_react.useMemo)(() => {
-    const items = [];
-    import_react.Children.forEach(children, (child, index) => {
-      if ((0, import_react.isValidElement)(child)) {
-        items.push(
-          (0, import_react.cloneElement)(child, {
-            key: child.key ?? index
-          })
-        );
-      }
-    });
-    return items;
+    return extractButtons(children);
   }, [children]);
   const measureWidths = (0, import_react.useCallback)(() => {
     if (typeof window === "undefined" || !measureRef.current || !moreButtonRef.current) return;

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

@@ -22,7 +22,6 @@ __export(useResponsiveClass_exports, {
   useResponsiveClass: () => useResponsiveClass
 });
 module.exports = __toCommonJS(useResponsiveClass_exports);
-var import_react = require("react");
 var RESPONSIVE_BREAKPOINTS = {
   lg: 1133,
   // ≥1133px: 默认样式（405px）
@@ -38,7 +37,7 @@ var RESPONSIVE_CLASSES = {
   // 最小宽度（< 744px）
 };
 var getResponsiveClass = (width) => {
-  if (width === 0) return "";
+  if (width === 0 || !width) return "";
   if (width >= RESPONSIVE_BREAKPOINTS.lg) {
     return "";
   }
@@ -51,49 +50,7 @@ var getResponsiveClass = (width) => {
   return RESPONSIVE_CLASSES.xs;
 };
 var useResponsiveClass = (containerWidth) => {
-  const [responsiveCls, setResponsiveCls] = (0, import_react.useState)("");
-  const previousWidthRef = (0, import_react.useRef)(0);
-  const rafIdRef = (0, import_react.useRef)(null);
-  const stableCheckCountRef = (0, import_react.useRef)(0);
-  (0, import_react.useEffect)(() => {
-    if (typeof window === "undefined") {
-      return;
-    }
-    if (containerWidth === 0) {
-      setResponsiveCls("");
-      previousWidthRef.current = 0;
-      stableCheckCountRef.current = 0;
-      return;
-    }
-    if (rafIdRef.current !== null) {
-      cancelAnimationFrame(rafIdRef.current);
-    }
-    const checkStability = () => {
-      const currentWidth = containerWidth;
-      const previousWidth = previousWidthRef.current;
-      if (Math.abs(currentWidth - previousWidth) >= 5) {
-        stableCheckCountRef.current = 0;
-        previousWidthRef.current = currentWidth;
-      }
-      stableCheckCountRef.current += 1;
-      if (stableCheckCountRef.current >= 3) {
-        const newCls = getResponsiveClass(currentWidth);
-        setResponsiveCls(newCls);
-        previousWidthRef.current = currentWidth;
-        stableCheckCountRef.current = 0;
-      } else {
-        rafIdRef.current = requestAnimationFrame(checkStability);
-      }
-    };
-    rafIdRef.current = requestAnimationFrame(checkStability);
-    return () => {
-      if (rafIdRef.current !== null) {
-        cancelAnimationFrame(rafIdRef.current);
-        rafIdRef.current = null;
-      }
-    };
-  }, [containerWidth]);
-  return responsiveCls;
+  return getResponsiveClass(containerWidth);
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {