@pisell/materials 1.0.987 → 1.0.988

package/lib/components/PisellProcedure/components/ProcedureHeader.js

@@ -59,16 +59,26 @@ var ProcedureHeader = ({
       headerProps == null ? void 0 : headerProps.className
     );
   }, [className, headerProps == null ? void 0 : headerProps.className]);
-  const hasRightSlot = (0, import_react.useMemo)(() => {
-    return !!(headerProps == null ? void 0 : headerProps.right);
-  }, [headerProps == null ? void 0 : headerProps.right]);
-  const showLeftArea = (0, import_react.useMemo)(() => {
-    if (!(headerProps == null ? void 0 : headerProps.left)) return false;
+  const slotOrder = (headerProps == null ? void 0 : headerProps.slotOrder) || "default";
+  const actualLeftSlot = (0, import_react.useMemo)(() => {
+    return slotOrder === "reverse" ? headerProps == null ? void 0 : headerProps.right : headerProps == null ? void 0 : headerProps.left;
+  }, [slotOrder, headerProps == null ? void 0 : headerProps.left, headerProps == null ? void 0 : headerProps.right]);
+  const actualRightSlot = (0, import_react.useMemo)(() => {
+    return slotOrder === "reverse" ? headerProps == null ? void 0 : headerProps.left : headerProps == null ? void 0 : headerProps.right;
+  }, [slotOrder, headerProps == null ? void 0 : headerProps.left, headerProps == null ? void 0 : headerProps.right]);
+  const showActualLeftArea = (0, import_react.useMemo)(() => {
+    if (!actualLeftSlot) return false;
+    if (slotOrder === "reverse") {
+      return true;
+    }
     if (currentStep === 0) {
       return (headerProps == null ? void 0 : headerProps.showBackOnFirstStep) ?? false;
     }
     return true;
-  }, [headerProps == null ? void 0 : headerProps.left, currentStep, headerProps == null ? void 0 : headerProps.showBackOnFirstStep]);
+  }, [actualLeftSlot, slotOrder, currentStep, headerProps == null ? void 0 : headerProps.showBackOnFirstStep]);
+  const showActualRightArea = (0, import_react.useMemo)(() => {
+    return !!actualRightSlot;
+  }, [actualRightSlot]);
   const closeModal = (0, import_react.useCallback)(() => {
     setModalType(null);
     setTargetStep(-1);
@@ -78,7 +88,9 @@ var ProcedureHeader = ({
       if (onFirstStepBack) {
         onFirstStepBack();
       } else {
-        window.location.href = "/";
+        if (typeof window !== "undefined" && window.location) {
+          window.location.href = "/";
+        }
       }
       return;
     }
@@ -146,9 +158,9 @@ var ProcedureHeader = ({
     var _a2;
     if (!modalConfig) return void 0;
     const footer = (_a2 = modalConfig.config) == null ? void 0 : _a2.footer;
-    if (!Array.isArray(footer)) return void 0;
+    if (!footer || !Array.isArray(footer) || footer.length === 0) return void 0;
     return footer.map((btn) => {
-      if (!btn || typeof btn !== "object") return btn;
+      if (!btn || typeof btn !== "object" || !btn.action) return btn;
       const processedBtn = { ...btn };
       const originalOnClick = processedBtn.onClick;
       processedBtn.onClick = (...args) => {
@@ -167,22 +179,48 @@ var ProcedureHeader = ({
       handleBackClick(step);
     }
   }), [headerProps == null ? void 0 : headerProps.stepsProps, currentStep, handleBackClick]);
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_header.default, { className: headerCls, style: headerProps == null ? void 0 : headerProps.style }, showLeftArea && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-procedure-header__left", onClick: () => handleBackClick() }, headerProps == null ? void 0 : headerProps.left), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-procedure-header__center" }, /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_header.default, { className: headerCls, style: headerProps == null ? void 0 : headerProps.style }, showActualLeftArea && /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: "pisell-procedure-header__left",
+      onClick: () => {
+        if (slotOrder === "reverse") {
+          handleCloseClick();
+        } else {
+          handleBackClick();
+        }
+      }
+    },
+    actualLeftSlot
+  ), (headerProps == null ? void 0 : headerProps.showSteps) !== false && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-procedure-header__center" }, /* @__PURE__ */ import_react.default.createElement(
     import_PisellSteps.default,
     {
       ...mergedStepsProps,
       mobileMode: "auto",
       mobileBreakpoint: 744
     }
-  )), hasRightSlot && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-procedure-header__right", onClick: handleCloseClick }, headerProps == null ? void 0 : headerProps.right)), modalType && modalConfig && /* @__PURE__ */ import_react.default.createElement(
+  )), showActualRightArea && /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: "pisell-procedure-header__right",
+      onClick: () => {
+        if (slotOrder === "reverse") {
+          handleBackClick();
+        } else {
+          handleCloseClick();
+        }
+      }
+    },
+    actualRightSlot
+  )), modalType && modalConfig && /* @__PURE__ */ import_react.default.createElement(
     import_pisellModal.default.Information,
     {
       open: true,
-      title: ((_a = modalConfig.config) == null ? void 0 : _a.title) || (0, import_locales.getText)(modalConfig.titleKey),
-      describe: ((_b = modalConfig.config) == null ? void 0 : _b.describe) || (0, import_locales.getText)(modalConfig.descKey),
+      title: ((_a = modalConfig.config) == null ? void 0 : _a.title) || (0, import_locales.getText)(modalConfig.titleKey) || "",
+      describe: ((_b = modalConfig.config) == null ? void 0 : _b.describe) || (0, import_locales.getText)(modalConfig.descKey) || "",
       footer: processedFooter,
-      okText: (0, import_locales.getText)(modalConfig.okTextKey),
-      cancelText: (0, import_locales.getText)(modalConfig.cancelTextKey),
+      okText: (0, import_locales.getText)(modalConfig.okTextKey) || "",
+      cancelText: (0, import_locales.getText)(modalConfig.cancelTextKey) || "",
       closable: true,
       onCancel: closeModal,
       onOk: () => handleConfirm("ok")

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

@@ -41,33 +41,82 @@ var ProcedureSidebar = ({
   style,
   children,
   extra,
-  isRatioMode = false
+  isRatioMode = false,
+  containerSelector,
+  mode = "page",
+  direction = "horizontal"
 }) => {
-  const headerHeight = (0, import_hooks.useElementHeight)({
-    selector: ".pisell-procedure-header"
+  const isVertical = direction === "vertical";
+  const headerSize = (0, import_hooks.useElementSize)({
+    selector: ".pisell-procedure-header",
+    enabled: !isVertical
   });
-  const floatAllFooterHeight = (0, import_hooks.useElementHeight)({
-    selector: ".pisell-procedure-footer--float-all"
+  const floatAllFooterSize = (0, import_hooks.useElementSize)({
+    selector: ".pisell-procedure-footer--float-all",
+    enabled: !isVertical
   });
-  const fixedBottomFooterHeight = (0, import_hooks.useElementHeight)({
-    selector: ".pisell-procedure-footer--fixed-bottom"
+  const fixedBottomFooterSize = (0, import_hooks.useElementSize)({
+    selector: ".pisell-procedure-footer--fixed-bottom",
+    enabled: !isVertical
   });
-  const footerHeight = Math.max(floatAllFooterHeight, fixedBottomFooterHeight);
+  const footerHeight = Math.max(
+    (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)(() => {
+    if (typeof document === "undefined") return;
+    const root = document.documentElement;
+    if (containerWidth > 0) {
+      root.style.setProperty(
+        "--pisell-procedure-container-width",
+        `${containerWidth}px`
+      );
+    }
+    return () => {
+      root.style.removeProperty("--pisell-procedure-container-width");
+    };
+  }, [containerWidth]);
+  const isSizeStable = (0, import_react.useMemo)(() => {
+    if (isVertical) {
+      return false;
+    }
+    if (!(headerSize == null ? void 0 : headerSize.height) || headerSize.height === 0) {
+      return false;
+    }
+    if (containerSelector && containerSelector.trim()) {
+      return (containerSize == null ? void 0 : containerSize.width) > 0 && (containerSize == null ? void 0 : containerSize.height) > 0;
+    }
+    return true;
+  }, [
+    isVertical,
+    containerSelector,
+    containerSize == null ? void 0 : containerSize.width,
+    containerSize == null ? void 0 : containerSize.height,
+    headerSize == null ? void 0 : headerSize.height
+  ]);
+  const siderHeight = (0, import_hooks.useSidebarHeight)(isSizeStable, {
+    containerSelector,
+    containerHeight: containerSize == null ? void 0 : containerSize.height,
+    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"
+      isRatioMode && "pisell-procedure-sidebar--ratio",
+      responsiveCls
     );
-  }, [className, isRatioMode]);
-  const siderHeight = (0, import_react.useMemo)(() => {
-    if (typeof window === "undefined") return void 0;
-    const viewportHeight = window.innerHeight;
-    const bodyPadding = 16 * 2;
-    const calculatedHeight = viewportHeight - headerHeight - footerHeight - bodyPadding - 1;
-    return calculatedHeight > 0 ? calculatedHeight : void 0;
-  }, [headerHeight, footerHeight]);
+  }, [className, isRatioMode, responsiveCls]);
   return /* @__PURE__ */ import_react.default.createElement(
     import_sider.default,
     {
@@ -75,10 +124,11 @@ var ProcedureSidebar = ({
       style: {
         ...style,
         overflow: "hidden",
-        ...siderHeight ? { height: `${siderHeight}px` } : {}
-      },
-      width: "auto",
-      collapsible: false
+        ...siderHeight && siderHeight > 0 ? {
+          height: `${siderHeight}px`
+        } : {},
+        top: mode === "modal" ? 0 : `${(headerSize == null ? void 0 : headerSize.height) + 32}px`
+      }
     },
     /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-procedure-sider-content-top" }, children),
     extra

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

@@ -19,17 +19,23 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/PisellProcedure/hooks/index.ts
 var hooks_exports = {};
 __export(hooks_exports, {
-  useElementHeight: () => import_useElementHeight.useElementHeight,
+  useElementSize: () => import_useElementSize.useElementSize,
   useOverflowActions: () => import_useOverflowActions.useOverflowActions,
+  useResponsiveClass: () => import_useResponsiveClass.useResponsiveClass,
+  useSidebarHeight: () => import_useSidebarHeight.useSidebarHeight,
   useStepManager: () => import_useStepManager.useStepManager
 });
 module.exports = __toCommonJS(hooks_exports);
 var import_useStepManager = require("./useStepManager");
-var import_useElementHeight = require("./useElementHeight");
+var import_useElementSize = require("./useElementSize");
 var import_useOverflowActions = require("./useOverflowActions");
+var import_useSidebarHeight = require("./useSidebarHeight");
+var import_useResponsiveClass = require("./useResponsiveClass");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  useElementHeight,
+  useElementSize,
   useOverflowActions,
+  useResponsiveClass,
+  useSidebarHeight,
   useStepManager
 });

package/lib/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;

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

@@ -0,0 +1,175 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/PisellProcedure/hooks/useElementSize.ts
+var useElementSize_exports = {};
+__export(useElementSize_exports, {
+  useElementSize: () => useElementSize
+});
+module.exports = __toCommonJS(useElementSize_exports);
+var import_react = require("react");
+var useElementSize = ({
+  selector,
+  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;
+    }
+    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)(() => {
+    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);
+        }
+      };
+    }
+    return () => {
+      clearTimeout(initialTimer);
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+      if (resizeObserverRef.current && elementRef.current) {
+        resizeObserverRef.current.unobserve(elementRef.current);
+        resizeObserverRef.current.disconnect();
+      }
+    };
+  }, [selector, enabled, defaultWidth, defaultHeight, calculateSize, debouncedCalculateSize]);
+  return size;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useElementSize
+});

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

@@ -47,27 +47,40 @@ var useOverflowActions = (options) => {
     return items;
   }, [children]);
   const measureWidths = (0, import_react.useCallback)(() => {
-    if (!measureRef.current || !moreButtonRef.current) return;
-    const buttons = measureRef.current.querySelectorAll("[data-measure-item]");
-    const widths = [];
-    buttons.forEach((btn) => {
-      widths.push(Math.ceil(btn.getBoundingClientRect().width));
-    });
-    setItemWidths(widths);
-    const moreBtnWidth = Math.ceil(moreButtonRef.current.getBoundingClientRect().width);
-    setMoreButtonWidth(moreBtnWidth);
+    if (typeof window === "undefined" || !measureRef.current || !moreButtonRef.current) return;
+    try {
+      const buttons = measureRef.current.querySelectorAll("[data-measure-item]");
+      const widths = [];
+      buttons.forEach((btn) => {
+        const rect = btn.getBoundingClientRect();
+        if (rect) {
+          widths.push(Math.ceil(rect.width));
+        }
+      });
+      setItemWidths(widths);
+      const moreBtnRect = moreButtonRef.current.getBoundingClientRect();
+      if (moreBtnRect) {
+        const moreBtnWidth = Math.ceil(moreBtnRect.width);
+        setMoreButtonWidth(moreBtnWidth);
+      }
+    } catch (error) {
+      console.warn("Failed to measure button widths:", error);
+    }
   }, []);
   const updateAvailableWidth = (0, import_react.useCallback)(() => {
-    if (!containerRef.current) return;
+    if (!containerRef.current || typeof window === "undefined") return;
     const parent = containerRef.current.parentElement;
     if (!parent) {
-      setAvailableWidth(Math.floor(containerRef.current.offsetWidth));
+      const containerRect = containerRef.current.getBoundingClientRect();
+      setAvailableWidth(Math.floor(containerRect.width));
       return;
     }
     const parentStyle = window.getComputedStyle(parent);
-    const paddingLeft = parseFloat(parentStyle.paddingLeft) || 0;
-    const paddingRight = parseFloat(parentStyle.paddingRight) || 0;
-    const parentGap = parseFloat(parentStyle.gap) || gap;
+    const parentRect = parent.getBoundingClientRect();
+    const scale = parent.offsetWidth > 0 ? parentRect.width / parent.offsetWidth : 1;
+    const paddingLeft = (parseFloat(parentStyle.paddingLeft) || 0) * scale;
+    const paddingRight = (parseFloat(parentStyle.paddingRight) || 0) * scale;
+    const parentGap = (parseFloat(parentStyle.gap) || gap) * scale;
     let leftSlotWidth = 0;
     if (leftSlotRef.current) {
       leftSlotWidth = Math.ceil(leftSlotRef.current.getBoundingClientRect().width);
@@ -86,7 +99,7 @@ var useOverflowActions = (options) => {
         }
       }
     }
-    const totalWidth = parent.offsetWidth - paddingLeft - paddingRight;
+    const totalWidth = parentRect.width - paddingLeft - paddingRight;
     const width = Math.floor(totalWidth - leftSlotWidth - otherSiblingWidth);
     setAvailableWidth(Math.max(0, width));
   }, [gap]);
@@ -99,6 +112,7 @@ var useOverflowActions = (options) => {
   }, [actionItems, measureWidths, updateAvailableWidth]);
   (0, import_react.useEffect)(() => {
     var _a;
+    if (typeof window === "undefined") return;
     const handleResize = () => {
       measureWidths();
       updateAvailableWidth();
@@ -106,21 +120,29 @@ var useOverflowActions = (options) => {
     window.addEventListener("resize", handleResize);
     const parent = (_a = containerRef.current) == null ? void 0 : _a.parentElement;
     let resizeObserver = null;
-    if (parent) {
-      resizeObserver = new ResizeObserver(() => {
-        measureWidths();
-        updateAvailableWidth();
-      });
-      resizeObserver.observe(parent);
+    if (parent && typeof ResizeObserver !== "undefined") {
+      try {
+        resizeObserver = new ResizeObserver(() => {
+          measureWidths();
+          updateAvailableWidth();
+        });
+        resizeObserver.observe(parent);
+      } catch (error) {
+        console.warn("Failed to create ResizeObserver:", error);
+      }
     }
-    if (leftSlotRef.current) {
-      const leftObserver = new ResizeObserver(() => updateAvailableWidth());
-      leftObserver.observe(leftSlotRef.current);
-      return () => {
-        window.removeEventListener("resize", handleResize);
-        resizeObserver == null ? void 0 : resizeObserver.disconnect();
-        leftObserver.disconnect();
-      };
+    if (leftSlotRef.current && typeof ResizeObserver !== "undefined") {
+      try {
+        const leftObserver = new ResizeObserver(() => updateAvailableWidth());
+        leftObserver.observe(leftSlotRef.current);
+        return () => {
+          window.removeEventListener("resize", handleResize);
+          resizeObserver == null ? void 0 : resizeObserver.disconnect();
+          leftObserver.disconnect();
+        };
+      } catch (error) {
+        console.warn("Failed to create ResizeObserver for leftSlot:", error);
+      }
     }
     return () => {
       window.removeEventListener("resize", handleResize);

package/lib/components/PisellProcedure/hooks/useResponsiveClass.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 使用响应式类名的 Hook
+ *
+ * @description 根据容器宽度计算响应式类名，延迟应用以避免宽度抖动
+ */
+export declare const useResponsiveClass: (containerWidth: number) => string;