@pisell/materials 6.3.22 → 6.3.24

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

@@ -0,0 +1,231 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/PisellProcedure/components/ProcedureHeader.tsx
+var ProcedureHeader_exports = {};
+__export(ProcedureHeader_exports, {
+  default: () => ProcedureHeader_default
+});
+module.exports = __toCommonJS(ProcedureHeader_exports);
+var import_react = __toESM(require("react"));
+var import_header = __toESM(require("../../pisellLayout/header"));
+var import_PisellSteps = __toESM(require("../../PisellSteps"));
+var import_pisellModal = __toESM(require("../../pisellModal"));
+var import_utils = require("../utils");
+var import_locales = require("../../../locales");
+var ProcedureHeader = ({
+  headerProps,
+  currentStep,
+  className,
+  goPrev,
+  goToStep,
+  onClose,
+  onFirstStepBack,
+  onBackConfirm,
+  onCloseConfirm
+}) => {
+  var _a, _b;
+  const [modalType, setModalType] = (0, import_react.useState)(null);
+  const [targetStep, setTargetStep] = (0, import_react.useState)(-1);
+  const headerCls = (0, import_react.useMemo)(() => {
+    return (0, import_utils.mergeClassNames)(
+      "pisell-procedure-header",
+      className,
+      headerProps == null ? void 0 : headerProps.className
+    );
+  }, [className, headerProps == null ? void 0 : headerProps.className]);
+  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;
+  }, [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);
+  }, []);
+  const handleBackClick = (0, import_react.useCallback)((step) => {
+    if (currentStep === 0 && (headerProps == null ? void 0 : headerProps.showBackOnFirstStep) && (step === void 0 || step < 0)) {
+      if (onFirstStepBack) {
+        onFirstStepBack();
+      } else {
+        if (typeof window !== "undefined" && window.location) {
+          window.location.href = "/";
+        }
+      }
+      return;
+    }
+    const modalConfig2 = headerProps == null ? void 0 : headerProps.backConfirmModal;
+    const isStepJump = step !== void 0 && step >= 0;
+    setTargetStep(isStepJump ? step : -1);
+    if (!(modalConfig2 == null ? void 0 : modalConfig2.enabled)) {
+      if (isStepJump) {
+        goToStep == null ? void 0 : goToStep(step);
+      } else {
+        goPrev == null ? void 0 : goPrev();
+      }
+      return;
+    }
+    setModalType("back");
+  }, [currentStep, headerProps, onFirstStepBack, goPrev, goToStep]);
+  const handleCloseClick = (0, import_react.useCallback)(() => {
+    const modalConfig2 = headerProps == null ? void 0 : headerProps.closeConfirmModal;
+    if (!(modalConfig2 == null ? void 0 : modalConfig2.enabled)) {
+      onClose == null ? void 0 : onClose();
+      return;
+    }
+    setModalType("close");
+  }, [headerProps, onClose]);
+  const handleConfirm = (0, import_react.useCallback)((action) => {
+    const isConfirm = action === "ok" || action === "confirm";
+    if (modalType === "back") {
+      if (isConfirm) {
+        onBackConfirm == null ? void 0 : onBackConfirm(action);
+        if (targetStep >= 0) {
+          goToStep == null ? void 0 : goToStep(targetStep);
+        } else {
+          goPrev == null ? void 0 : goPrev();
+        }
+      }
+    } else if (modalType === "close") {
+      if (isConfirm) {
+        onCloseConfirm == null ? void 0 : onCloseConfirm(action);
+        onClose == null ? void 0 : onClose();
+      }
+    }
+    closeModal();
+  }, [modalType, targetStep, onBackConfirm, onCloseConfirm, goPrev, goToStep, onClose, closeModal]);
+  const modalConfig = (0, import_react.useMemo)(() => {
+    if (modalType === "back") {
+      return {
+        config: headerProps == null ? void 0 : headerProps.backConfirmModal,
+        titleKey: "pisell-procedure-header-back-confirm-title",
+        descKey: "pisell-procedure-header-back-confirm-desc",
+        okTextKey: "pisell-procedure-header-back-confirm-yes",
+        cancelTextKey: "pisell-procedure-header-back-confirm-no"
+      };
+    } else if (modalType === "close") {
+      return {
+        config: headerProps == null ? void 0 : headerProps.closeConfirmModal,
+        titleKey: "pisell-procedure-header-close-confirm-title",
+        descKey: "pisell-procedure-header-close-confirm-desc",
+        okTextKey: "pisell-procedure-header-close-confirm-yes",
+        cancelTextKey: "pisell-procedure-header-close-confirm-no"
+      };
+    }
+    return null;
+  }, [modalType, headerProps]);
+  const processedFooter = (0, import_react.useMemo)(() => {
+    var _a2;
+    if (!modalConfig) return void 0;
+    const footer = (_a2 = modalConfig.config) == null ? void 0 : _a2.footer;
+    if (!footer || !Array.isArray(footer) || footer.length === 0) return void 0;
+    return footer.map((btn) => {
+      if (!btn || typeof btn !== "object" || !btn.action) return btn;
+      const processedBtn = { ...btn };
+      const originalOnClick = processedBtn.onClick;
+      processedBtn.onClick = (...args) => {
+        originalOnClick == null ? void 0 : originalOnClick(...args);
+        handleConfirm(btn.action);
+      };
+      return processedBtn;
+    });
+  }, [modalConfig, handleConfirm]);
+  const mergedStepsProps = (0, import_react.useMemo)(() => ({
+    ...headerProps == null ? void 0 : headerProps.stepsProps,
+    current: currentStep,
+    onChange: (step) => {
+      var _a2, _b2;
+      (_b2 = (_a2 = headerProps == null ? void 0 : headerProps.stepsProps) == null ? void 0 : _a2.onChange) == null ? void 0 : _b2.call(_a2, step);
+      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 }, 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
+    }
+  )), 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) || "",
+      footer: processedFooter,
+      okText: (0, import_locales.getText)(modalConfig.okTextKey) || "",
+      cancelText: (0, import_locales.getText)(modalConfig.cancelTextKey) || "",
+      closable: true,
+      onCancel: closeModal,
+      onOk: () => handleConfirm("ok")
+    }
+  ));
+};
+ProcedureHeader.displayName = "ProcedureHeader";
+var ProcedureHeader_default = ProcedureHeader;

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+import type { ProcedureMode, BodyDirection } from '../types';
+/**
+ * ProcedureSidebar 子组件 Props
+ */
+export interface ProcedureSidebarProps {
+    /** 信息区类名 */
+    className?: string;
+    /** 信息区样式 */
+    style?: CSSProperties;
+    /** 信息区插槽 */
+    children?: ReactNode;
+    /** 额外内容（如底部操作区） */
+    extra?: ReactNode;
+    /** 是否为比例布局模式 */
+    isRatioMode?: boolean;
+    /**
+     * 容器元素选择器（类名或 ID）
+     * @description 用于计算高度的容器元素，支持类名（如 '.modal-container'）或 ID（如 '#dialog-container'）
+     * @description 如果不提供，则使用 window.innerHeight 作为基准
+     */
+    containerSelector?: string;
+    /** 组件使用模式 */
+    mode?: ProcedureMode;
+    /** 排列方向 */
+    direction?: BodyDirection;
+    containerSize?: any;
+    responsiveClsComputed?: string;
+}
+/**
+ * ProcedureSidebar 信息区组件
+ *
+ * @description 流程容器的信息区（侧边栏），用于展示摘要信息
+ * @author Pisell Team
+ */
+declare const ProcedureSidebar: React.FC<ProcedureSidebarProps>;
+export default ProcedureSidebar;

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

@@ -0,0 +1,133 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/PisellProcedure/components/ProcedureSidebar.tsx
+var ProcedureSidebar_exports = {};
+__export(ProcedureSidebar_exports, {
+  default: () => ProcedureSidebar_default
+});
+module.exports = __toCommonJS(ProcedureSidebar_exports);
+var import_react = __toESM(require("react"));
+var import_sider = __toESM(require("../../pisellLayout/sider"));
+var import_utils = require("../utils");
+var import_hooks = require("../hooks");
+var ProcedureSidebar = ({
+  className,
+  style,
+  children,
+  extra,
+  isRatioMode = false,
+  containerSelector,
+  mode = "page",
+  direction = "horizontal",
+  containerSize,
+  responsiveClsComputed
+}) => {
+  const isVertical = direction === "vertical";
+  const headerSize = (0, import_hooks.useElementSize)({
+    selector: ".pisell-procedure-header",
+    enabled: !isVertical
+  });
+  const floatAllFooterSize = (0, import_hooks.useElementSize)({
+    selector: ".pisell-procedure-footer--float-all",
+    enabled: !isVertical
+  });
+  const fixedBottomFooterSize = (0, import_hooks.useElementSize)({
+    selector: ".pisell-procedure-footer--fixed-bottom",
+    enabled: !isVertical
+  });
+  const footerHeight = Math.max(
+    (floatAllFooterSize == null ? void 0 : floatAllFooterSize.height) || 0,
+    (fixedBottomFooterSize == null ? void 0 : fixedBottomFooterSize.height) || 0
+  );
+  const containerWidth = (containerSize == null ? void 0 : containerSize.width) || 0;
+  (0, import_react.useEffect)(() => {
+    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 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
+    );
+  }, [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
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-procedure-sider-content-top" }, children),
+    extra
+  );
+};
+ProcedureSidebar.displayName = "ProcedureSidebar";
+var ProcedureSidebar_default = ProcedureSidebar;

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

@@ -0,0 +1,12 @@
+export { default as FooterActions } from './FooterActions';
+export type { FooterActionsProps } from './FooterActions';
+export { default as ProcedureHeader } from './ProcedureHeader';
+export type { ProcedureHeaderProps } from './ProcedureHeader';
+export { default as ProcedureBody } from './ProcedureBody';
+export type { ProcedureBodyProps } from './ProcedureBody';
+export { default as ProcedureContent } from './ProcedureContent';
+export type { ProcedureContentProps } from './ProcedureContent';
+export { default as ProcedureSidebar } from './ProcedureSidebar';
+export type { ProcedureSidebarProps } from './ProcedureSidebar';
+export { default as ProcedureFooter } from './ProcedureFooter';
+export type { ProcedureFooterProps } from './ProcedureFooter';

package/lib/components/PisellProcedure/components/index.js

@@ -0,0 +1,54 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/PisellProcedure/components/index.ts
+var components_exports = {};
+__export(components_exports, {
+  FooterActions: () => import_FooterActions.default,
+  ProcedureBody: () => import_ProcedureBody.default,
+  ProcedureContent: () => import_ProcedureContent.default,
+  ProcedureFooter: () => import_ProcedureFooter.default,
+  ProcedureHeader: () => import_ProcedureHeader.default,
+  ProcedureSidebar: () => import_ProcedureSidebar.default
+});
+module.exports = __toCommonJS(components_exports);
+var import_FooterActions = __toESM(require("./FooterActions"));
+var import_ProcedureHeader = __toESM(require("./ProcedureHeader"));
+var import_ProcedureBody = __toESM(require("./ProcedureBody"));
+var import_ProcedureContent = __toESM(require("./ProcedureContent"));
+var import_ProcedureSidebar = __toESM(require("./ProcedureSidebar"));
+var import_ProcedureFooter = __toESM(require("./ProcedureFooter"));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FooterActions,
+  ProcedureBody,
+  ProcedureContent,
+  ProcedureFooter,
+  ProcedureHeader,
+  ProcedureSidebar
+});

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

@@ -0,0 +1,8 @@
+export { useStepManager } from './useStepManager';
+export type { UseStepManagerOptions, UseStepManagerReturn, } from './useStepManager';
+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

@@ -0,0 +1,41 @@
+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/index.ts
+var hooks_exports = {};
+__export(hooks_exports, {
+  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_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 = {
+  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, debounceMs, }: UseElementSizeOptions) => ElementSize;

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

@@ -0,0 +1,88 @@
+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,
+  debounceMs = 100
+}) => {
+  const [size, setSize] = (0, import_react.useState)({
+    width: defaultWidth,
+    height: defaultHeight
+  });
+  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;
+    }
+    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 });
+      return;
+    }
+    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 () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [selector, enabled, defaultWidth, defaultHeight, debounceMs]);
+  return size;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useElementSize
+});