@pisell/materials 1.0.987 → 1.0.988

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

@@ -0,0 +1,101 @@
+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/useResponsiveClass.ts
+var useResponsiveClass_exports = {};
+__export(useResponsiveClass_exports, {
+  useResponsiveClass: () => useResponsiveClass
+});
+module.exports = __toCommonJS(useResponsiveClass_exports);
+var import_react = require("react");
+var RESPONSIVE_BREAKPOINTS = {
+  lg: 1133,
+  // ≥1133px: 默认样式（405px）
+  md: 960,
+  // 960px-1133px: 376px ~ 405px 线性插值
+  sm: 744
+  // 744px-960px: 290px ~ 376px 线性插值
+};
+var RESPONSIVE_CLASSES = {
+  md: "pisell-procedure-sidebar--responsive-md",
+  sm: "pisell-procedure-sidebar--responsive-sm",
+  xs: "pisell-procedure-sidebar--responsive-xs"
+  // 最小宽度（< 744px）
+};
+var getResponsiveClass = (width) => {
+  if (width === 0) return "";
+  if (width >= RESPONSIVE_BREAKPOINTS.lg) {
+    return "";
+  }
+  if (width >= RESPONSIVE_BREAKPOINTS.md) {
+    return RESPONSIVE_CLASSES.md;
+  }
+  if (width >= RESPONSIVE_BREAKPOINTS.sm) {
+    return RESPONSIVE_CLASSES.sm;
+  }
+  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;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useResponsiveClass
+});

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

@@ -0,0 +1,16 @@
+/**
+ * 尺寸值接口
+ */
+interface SizeValues {
+    containerSelector?: string;
+    containerHeight?: number;
+    headerHeight?: number;
+    footerHeight: number;
+}
+/**
+ * 使用 Sidebar 高度的 Hook
+ *
+ * @description 计算并管理 Sidebar 的高度，确保在尺寸稳定后才应用
+ */
+export declare const useSidebarHeight: (isSizeStable: boolean, sizeValues: SizeValues) => number | undefined;
+export {};

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

@@ -0,0 +1,120 @@
+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/useSidebarHeight.ts
+var useSidebarHeight_exports = {};
+__export(useSidebarHeight_exports, {
+  useSidebarHeight: () => useSidebarHeight
+});
+module.exports = __toCommonJS(useSidebarHeight_exports);
+var import_react = require("react");
+var useSidebarHeight = (isSizeStable, sizeValues) => {
+  const [siderHeight, setSiderHeight] = (0, import_react.useState)(void 0);
+  const hasInitializedRef = (0, import_react.useRef)(false);
+  const rafIdRef = (0, import_react.useRef)(null);
+  const stableCheckCountRef = (0, import_react.useRef)(0);
+  const previousSiderHeightRef = (0, import_react.useRef)(void 0);
+  const sizeValuesRef = (0, import_react.useRef)(sizeValues);
+  (0, import_react.useEffect)(() => {
+    sizeValuesRef.current = sizeValues;
+  }, [sizeValues]);
+  const getBodyScaleY = (0, import_react.useCallback)(() => {
+    try {
+      if (typeof window === "undefined" || typeof document === "undefined") {
+        return 1;
+      }
+      const bodyTransform = getComputedStyle(document.body).transform;
+      let scaleY = 1;
+      if (bodyTransform !== "none") {
+        const matrix = new DOMMatrix(bodyTransform);
+        scaleY = matrix.d;
+      }
+      return scaleY;
+    } catch (error) {
+      return 1;
+    }
+  }, []);
+  const calculateHeight = (0, import_react.useCallback)(() => {
+    const { containerSelector, containerHeight, headerHeight, footerHeight } = sizeValuesRef.current;
+    let baseHeight;
+    if (containerSelector && containerSelector.trim() && containerHeight && containerHeight > 0) {
+      baseHeight = containerHeight;
+    } else {
+      baseHeight = typeof window !== "undefined" ? window.innerHeight : 0;
+    }
+    const bodyPadding = 16 * 2;
+    const headerHeightValue = headerHeight || 0;
+    const calculatedHeight = baseHeight - headerHeightValue - footerHeight - bodyPadding;
+    const scaleY = getBodyScaleY();
+    const scaledHeight = calculatedHeight / scaleY;
+    return Math.round(scaledHeight * 100) / 100;
+  }, [sizeValuesRef.current, getBodyScaleY]);
+  (0, import_react.useEffect)(() => {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+      return;
+    }
+    if (!isSizeStable) {
+      hasInitializedRef.current = false;
+      stableCheckCountRef.current = 0;
+      if (rafIdRef.current !== null) {
+        cancelAnimationFrame(rafIdRef.current);
+        rafIdRef.current = null;
+      }
+      return;
+    }
+    if (rafIdRef.current !== null) {
+      cancelAnimationFrame(rafIdRef.current);
+    }
+    const checkStability = () => {
+      if (!isSizeStable) {
+        stableCheckCountRef.current = 0;
+        return;
+      }
+      const calculatedHeight = calculateHeight();
+      if (calculatedHeight <= 0) {
+        stableCheckCountRef.current = 0;
+        return;
+      }
+      const previousHeight = previousSiderHeightRef.current;
+      if (hasInitializedRef.current && previousHeight !== void 0 && Math.abs(calculatedHeight - previousHeight) < 10) {
+        return;
+      }
+      stableCheckCountRef.current += 1;
+      if (stableCheckCountRef.current >= 3) {
+        previousSiderHeightRef.current = calculatedHeight;
+        setSiderHeight(calculatedHeight);
+        hasInitializedRef.current = true;
+        stableCheckCountRef.current = 0;
+      } else {
+        rafIdRef.current = requestAnimationFrame(checkStability);
+      }
+    };
+    rafIdRef.current = requestAnimationFrame(checkStability);
+    return () => {
+      if (rafIdRef.current !== null) {
+        cancelAnimationFrame(rafIdRef.current);
+        rafIdRef.current = null;
+      }
+    };
+  }, [isSizeStable, calculateHeight]);
+  return siderHeight;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useSidebarHeight
+});

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

@@ -30,32 +30,47 @@ var useStepManager = ({
   onNext,
   onStepsChange
 }) => {
-  const [currentStep, setCurrentStep] = (0, import_react.useState)(defaultCurrent);
-  const items = (stepsProps == null ? void 0 : stepsProps.items) || [];
-  const totalSteps = items.length || 1;
+  const items = Array.isArray(stepsProps == null ? void 0 : stepsProps.items) ? stepsProps.items : [];
+  const totalSteps = items.length > 0 ? items.length : 1;
+  const safeDefaultCurrent = (0, import_react.useMemo)(() => {
+    const num = Number(defaultCurrent);
+    if (isNaN(num) || num < 0) return 0;
+    if (num >= totalSteps) return Math.max(0, totalSteps - 1);
+    return num;
+  }, [defaultCurrent, totalSteps]);
+  const [currentStep, setCurrentStep] = (0, import_react.useState)(safeDefaultCurrent);
+  (0, import_react.useEffect)(() => {
+    if (currentStep >= totalSteps) {
+      setCurrentStep(Math.max(0, totalSteps - 1));
+    }
+  }, [totalSteps, currentStep]);
   const updateStep = (0, import_react.useCallback)((step) => {
-    setCurrentStep(step);
+    const safeStep = Math.max(0, Math.min(totalSteps - 1, step));
+    setCurrentStep(safeStep);
     const result = {
       success: true,
-      currentStep: step,
-      currentItem: items[step] || null
+      currentStep: safeStep,
+      currentItem: items[safeStep] || null
     };
     onStepsChange == null ? void 0 : onStepsChange(result);
     return result;
-  }, [items, onStepsChange]);
+  }, [items, totalSteps, onStepsChange]);
   const goPrev = (0, import_react.useCallback)(() => {
-    if (currentStep <= 0) return null;
+    if (currentStep <= 0 || totalSteps === 0) return null;
     const preventUpdate = onPrev == null ? void 0 : onPrev(currentStep);
     if (preventUpdate === false) return null;
-    return updateStep(currentStep - 1);
-  }, [currentStep, onPrev, updateStep]);
+    const newStep = Math.max(0, currentStep - 1);
+    return updateStep(newStep);
+  }, [currentStep, totalSteps, onPrev, updateStep]);
   const goNext = (0, import_react.useCallback)(() => {
-    if (currentStep >= totalSteps - 1) return null;
+    if (currentStep >= totalSteps - 1 || totalSteps === 0) return null;
     const preventUpdate = onNext == null ? void 0 : onNext(currentStep);
     if (preventUpdate === false) return null;
-    return updateStep(currentStep + 1);
+    const newStep = Math.min(totalSteps - 1, currentStep + 1);
+    return updateStep(newStep);
   }, [currentStep, totalSteps, onNext, updateStep]);
   const goToStep = (0, import_react.useCallback)((step) => {
+    if (totalSteps === 0) return null;
     if (step < 0 || step >= totalSteps) return null;
     if (step === currentStep) return null;
     return updateStep(step);

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

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

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

@@ -24,6 +24,41 @@ export interface StepChangeResult {
     /** 当前步骤数据 */
     currentItem: StepItem | null;
 }
+/**
+ * PisellProcedure Ref 暴露的方法
+ * @description 通过 ref 可以调用的组件方法
+ */
+export interface PisellProcedureRef {
+    /**
+     * 跳转到上一步
+     * @returns 步骤变化结果，如果无法跳转则返回 null
+     */
+    goPrev: () => StepChangeResult | null;
+    /**
+     * 跳转到下一步
+     * @returns 步骤变化结果，如果无法跳转则返回 null
+     */
+    goNext: () => StepChangeResult | null;
+    /**
+     * 跳转到指定步骤
+     * @param step - 目标步骤索引
+     * @returns 步骤变化结果，如果无法跳转则返回 null
+     */
+    goToStep: (step: number) => StepChangeResult | null;
+    /**
+     * 获取当前步骤索引
+     * @returns 当前步骤索引
+     */
+    getCurrentStep: () => number;
+    /**
+     * 打开移动端总结弹窗
+     */
+    openSummaryModal: () => void;
+    /**
+     * 关闭移动端总结弹窗
+     */
+    closeSummaryModal: () => void;
+}
 /**
  * 返回确认弹窗配置
  */
@@ -49,6 +84,10 @@ export interface BackConfirmModalConfig {
      */
     footer?: ReactNode;
 }
+/**
+ * 头部插槽顺序
+ */
+export declare type HeaderSlotOrder = 'default' | 'reverse';
 /**
  * ProcedureHeader 头部区域配置
  */
@@ -61,8 +100,19 @@ export interface ProcedureHeaderProps {
     left?: ReactNode;
     /** 右侧插槽（关闭按钮、图标等） */
     right?: ReactNode;
+    /**
+     * 插槽顺序
+     * @description 'default' - 默认顺序（left 在左，right 在右），'reverse' - 反转顺序（left 在右，right 在左）
+     * @default 'default'
+     */
+    slotOrder?: HeaderSlotOrder;
     /** 步骤条配置，透传给 PisellSteps 组件 */
     stepsProps?: PisellStepsProps;
+    /**
+     * 是否显示步骤条
+     * @default true
+     */
+    showSteps?: boolean;
     /**
      * 第一步时是否显示返回按钮
      * @default false
@@ -90,6 +140,10 @@ export declare type BodyLayoutRatio = `${number}:${number}`;
  * 主体区域排列方向
  */
 export declare type BodyDirection = 'horizontal' | 'vertical';
+/**
+ * 主体区域内容顺序
+ */
+export declare type BodyContentOrder = 'content-first' | 'sidebar-first';
 /**
  * ProcedureBody 主体区域配置
  */
@@ -104,6 +158,13 @@ export interface ProcedureBodyProps {
      * @default 'horizontal'
      */
     direction?: BodyDirection;
+    /**
+     * 内容顺序
+     * @description 'content-first' - 内容区在前（默认：横向时内容区在左，纵向时内容区在上）
+     * @description 'sidebar-first' - 信息区在前（横向时信息区在左，纵向时信息区在上）
+     * @default 'content-first'
+     */
+    contentOrder?: BodyContentOrder;
     /**
      * 布局模式
      * @description 'fixed' - 固定宽度（信息区宽度随屏幕断点变化）
@@ -130,6 +191,12 @@ export interface ProcedureBodyProps {
     sidebarClassName?: string;
     /** 信息区样式 */
     sidebarStyle?: CSSProperties;
+    /**
+     * 信息区容器选择器（类名或 ID）
+     * @description 用于计算信息区高度的容器元素，支持类名（如 '.modal-container'）或 ID（如 '#dialog-container'）
+     * @description 如果不提供，则使用 window.innerHeight 作为基准
+     */
+    sidebarContainerSelector?: string;
 }
 /**
  * 底部操作区位置模式
@@ -182,6 +249,10 @@ export interface ProcedureFooterProps {
      */
     position?: FooterPositionMode;
 }
+/**
+ * 组件使用模式
+ */
+export declare type ProcedureMode = 'page' | 'modal';
 /**
  * PisellProcedure 组件 Props
  * @description 流程容器组件，用于管理多步骤流程的复合容器
@@ -195,6 +266,13 @@ export interface PisellProcedureProps {
      * 自定义样式
      */
     style?: CSSProperties;
+    /**
+     * 组件使用模式
+     * @description 'page' - 页面模式（默认），'modal' - 弹窗模式
+     * @description 弹窗模式下：不应用移动端模式、不隐藏信息部分、不设置底部为固定悬浮、不显示移动端总结按钮、不执行响应式类名计算
+     * @default 'page'
+     */
+    mode?: ProcedureMode;
     /**
      * 是否显示头部区域
      * @default true

package/lib/components/PisellProcedure/utils/layoutRatio.js

@@ -26,8 +26,19 @@ __export(layoutRatio_exports, {
 });
 module.exports = __toCommonJS(layoutRatio_exports);
 var parseLayoutRatio = (ratio) => {
-  const [content, sidebar] = ratio.split(":").map(Number);
-  return [content || 7, sidebar || 3];
+  if (!ratio || typeof ratio !== "string") {
+    return [7, 3];
+  }
+  const parts = ratio.split(":");
+  if (parts.length !== 2) {
+    return [7, 3];
+  }
+  const content = Number(parts[0]);
+  const sidebar = Number(parts[1]);
+  if (isNaN(content) || isNaN(sidebar) || content <= 0 || sidebar <= 0) {
+    return [7, 3];
+  }
+  return [content, sidebar];
 };
 var calculateRatioPercent = (ratio) => {
   const [content, sidebar] = parseLayoutRatio(ratio);

package/lib/components/PisellScrollView/hooks/useScrollState.d.ts

@@ -1,8 +1,12 @@
 import { RefObject } from 'react';
-import { ScrollEventData } from '../types';
-export declare const useScrollState: ({ containerRef, overflow }: {
+import { ScrollEventData, PisellScrollViewProps } from '../types';
+/**
+ * 滚动状态管理 Hook
+ * @description 管理滚动容器的状态，包括滚动位置、溢出检测等
+ */
+export declare const useScrollState: ({ containerRef, overflow, }: {
     containerRef: RefObject<HTMLElement>;
-    overflow: PisellScrollViewProps;
+    overflow: PisellScrollViewProps['overflow'];
 }) => {
     scrollState: ScrollEventData;
     updateScrollState: () => void;