@pisell/materials 1.0.989 → 1.0.991

package/lib/components/PisellProcedure/PisellProcedure.js

@@ -39,142 +39,151 @@ var import_hooks = require("./hooks");
 var import_utils = require("./utils");
 var import_useMobile = require("../../hooks/useMobile");
 var import_PisellProcedure = require("./PisellProcedure.less");
-var PisellProcedure = (0, import_react.forwardRef)((props, ref) => {
-  const {
-    // 通用属性
-    className,
-    style,
-    mode = "page",
-    showHeader = true,
-    showSidebar = true,
-    showFooter = true,
-    // 步骤控制
-    defaultCurrent = 0,
-    onStepsChange,
-    // 区域配置
-    headerProps,
-    bodyProps,
-    footerProps,
-    // 事件回调
-    onClose,
-    onPrev,
-    onNext,
-    onFirstStepBack,
-    onBackConfirm,
-    onCloseConfirm,
-    // 低代码属性
-    __designMode,
-    __id,
-    ...other
-  } = props;
-  const isMobileDetected = (0, import_useMobile.useMobile)(744);
-  const isMobile = mode === "modal" ? false : isMobileDetected;
-  const { currentStep, goPrev, goNext, goToStep } = (0, import_hooks.useStepManager)({
-    stepsProps: headerProps == null ? void 0 : headerProps.stepsProps,
-    defaultCurrent,
-    onPrev,
-    onNext,
-    onStepsChange
-  });
-  const [summaryModalOpen, setSummaryModalOpen] = (0, import_react.useState)(false);
-  const openSummaryModal = (0, import_react.useCallback)(() => setSummaryModalOpen(true), []);
-  const closeSummaryModal = (0, import_react.useCallback)(() => setSummaryModalOpen(false), []);
-  (0, import_react.useImperativeHandle)(
-    ref,
-    () => ({
-      /**
-       * 跳转到上一步
-       */
-      goPrev: () => goPrev(),
-      /**
-       * 跳转到下一步
-       */
-      goNext: () => goNext(),
-      /**
-       * 跳转到指定步骤
-       */
-      goToStep: (step) => goToStep(step),
-      /**
-       * 获取当前步骤索引
-       */
-      getCurrentStep: () => currentStep,
-      /**
-       * 打开移动端总结弹窗
-       */
-      openSummaryModal,
-      /**
-       * 关闭移动端总结弹窗
-       */
-      closeSummaryModal
-    }),
-    [goPrev, goNext, goToStep, currentStep, openSummaryModal, closeSummaryModal]
-  );
-  const footerPosition = (0, import_react.useMemo)(() => {
-    if (isMobile && mode !== "modal") return "float-all";
-    return (footerProps == null ? void 0 : footerProps.position) || "float-sidebar";
-  }, [mode, isMobile, footerProps == null ? void 0 : footerProps.position]);
-  const containerCls = (0, import_react.useMemo)(() => {
-    return (0, import_utils.mergeClassNames)(
-      "pisell-procedure",
+var PisellProcedure = (0, import_react.forwardRef)(
+  (props, ref) => {
+    const {
+      // 通用属性
       className,
-      // 弹窗模式添加 --modal 修饰类，用于禁用媒体查询
-      mode === "modal" && "pisell-procedure--modal",
-      (0, import_utils.modifierClassName)("pisell-procedure", `footer-${footerPosition}`)
-    );
-  }, [className, mode, footerPosition]);
-  const footerIsGlobal = (0, import_utils.isFooterGlobal)(footerPosition);
-  return /* @__PURE__ */ import_react.default.createElement(
-    "div",
-    {
-      className: containerCls,
       style,
-      "data-component": "pisell-procedure",
-      "data-id": __id,
+      mode = "page",
+      showHeader = true,
+      showSidebar = true,
+      showFooter = true,
+      // 步骤控制
+      defaultCurrent = 0,
+      onStepsChange,
+      // 区域配置
+      headerProps,
+      bodyProps,
+      footerProps,
+      // 事件回调
+      onClose,
+      onPrev,
+      onNext,
+      onFirstStepBack,
+      onBackConfirm,
+      onCloseConfirm,
+      // 低代码属性
+      __designMode,
+      __id,
       ...other
-    },
-    /* @__PURE__ */ import_react.default.createElement(import_pisellLayout.default, null, showHeader && /* @__PURE__ */ import_react.default.createElement(
-      import_components.ProcedureHeader,
-      {
-        headerProps,
-        currentStep,
-        goPrev,
-        onClose,
-        onFirstStepBack,
-        onBackConfirm,
-        onCloseConfirm,
-        goToStep
-      }
-    ), /* @__PURE__ */ import_react.default.createElement(
-      import_components.ProcedureBody,
-      {
-        bodyProps,
-        footerProps,
-        footerPosition,
-        showFooter: showFooter && !footerIsGlobal,
-        showSidebar,
-        summaryModalOpen,
-        onOpenSummaryModal: openSummaryModal,
-        onCloseSummaryModal: closeSummaryModal,
+    } = props;
+    const isMobileDetected = (0, import_useMobile.useMobile)(744);
+    const isMobile = mode === "modal" ? false : isMobileDetected;
+    const { currentStep, goPrev, goNext, goToStep } = (0, import_hooks.useStepManager)({
+      stepsProps: headerProps == null ? void 0 : headerProps.stepsProps,
+      defaultCurrent,
+      onPrev,
+      onNext,
+      onStepsChange
+    });
+    const [summaryModalOpen, setSummaryModalOpen] = (0, import_react.useState)(false);
+    const openSummaryModal = (0, import_react.useCallback)(() => setSummaryModalOpen(true), []);
+    const closeSummaryModal = (0, import_react.useCallback)(() => setSummaryModalOpen(false), []);
+    (0, import_react.useImperativeHandle)(
+      ref,
+      () => ({
+        /**
+         * 跳转到上一步
+         */
+        goPrev: () => goPrev(),
+        /**
+         * 跳转到下一步
+         */
+        goNext: () => goNext(),
+        /**
+         * 跳转到指定步骤
+         */
+        goToStep: (step) => goToStep(step),
+        /**
+         * 获取当前步骤索引
+         */
+        getCurrentStep: () => currentStep,
+        /**
+         * 打开移动端总结弹窗
+         */
+        openSummaryModal,
+        /**
+         * 关闭移动端总结弹窗
+         */
+        closeSummaryModal
+      }),
+      [
         goPrev,
         goNext,
-        mode
-      }
-    ), showFooter && footerIsGlobal && /* @__PURE__ */ import_react.default.createElement(
-      import_components.ProcedureFooter,
+        goToStep,
+        currentStep,
+        openSummaryModal,
+        closeSummaryModal
+      ]
+    );
+    const footerPosition = (0, import_react.useMemo)(() => {
+      if (isMobile && mode !== "modal") return "float-all";
+      return (footerProps == null ? void 0 : footerProps.position) || "float-sidebar";
+    }, [mode, isMobile, footerProps == null ? void 0 : footerProps.position]);
+    const containerCls = (0, import_react.useMemo)(() => {
+      return (0, import_utils.mergeClassNames)(
+        "pisell-procedure",
+        className,
+        // 弹窗模式添加 --modal 修饰类，用于禁用媒体查询
+        mode === "modal" && "pisell-procedure--modal",
+        (0, import_utils.modifierClassName)("pisell-procedure", `footer-${footerPosition}`)
+      );
+    }, [className, mode, footerPosition]);
+    const footerIsGlobal = (0, import_utils.isFooterGlobal)(footerPosition);
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
       {
-        footerProps,
-        position: footerPosition,
-        isGlobal: true,
-        sidebarContent: bodyProps == null ? void 0 : bodyProps.sidebarSlot,
-        summaryModalOpen,
-        onOpenSummaryModal: openSummaryModal,
-        onCloseSummaryModal: closeSummaryModal,
-        goPrev,
-        goNext,
-        mode
-      }
-    ))
-  );
-});
+        className: containerCls,
+        style,
+        "data-component": "pisell-procedure",
+        "data-id": __id,
+        ...other
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_pisellLayout.default, null, showHeader && /* @__PURE__ */ import_react.default.createElement(
+        import_components.ProcedureHeader,
+        {
+          headerProps,
+          currentStep,
+          goPrev,
+          onClose,
+          onFirstStepBack,
+          onBackConfirm,
+          onCloseConfirm,
+          goToStep
+        }
+      ), /* @__PURE__ */ import_react.default.createElement(
+        import_components.ProcedureBody,
+        {
+          bodyProps,
+          footerProps,
+          footerPosition,
+          showFooter: showFooter && !footerIsGlobal,
+          showSidebar,
+          summaryModalOpen,
+          onOpenSummaryModal: openSummaryModal,
+          onCloseSummaryModal: closeSummaryModal,
+          goPrev,
+          goNext,
+          mode
+        }
+      ), showFooter && footerIsGlobal && /* @__PURE__ */ import_react.default.createElement(
+        import_components.ProcedureFooter,
+        {
+          footerProps,
+          position: footerPosition,
+          isGlobal: true,
+          sidebarContent: bodyProps == null ? void 0 : bodyProps.sidebarSlot,
+          summaryModalOpen,
+          onOpenSummaryModal: openSummaryModal,
+          onCloseSummaryModal: closeSummaryModal,
+          goPrev,
+          goNext,
+          mode
+        }
+      ))
+    );
+  }
+);
 PisellProcedure.displayName = "PisellProcedure";
 var PisellProcedure_default = PisellProcedure;

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;
@@ -141,119 +142,51 @@
 
   // 信息区 - 高度自适应内容，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;
       display: flex;
       flex-direction: column;
 
-      .@{procedure-prefix}-sider-content-top{
-        height: auto;
-        max-height: 100%;
-        overflow-y: auto;
-        background-color: #ffffff;
-      }
-
       .@{procedure-prefix}-footer{
         flex-shrink: 0;
       }
     }
 
-    // 纵向排列时的样式
-    .@{procedure-prefix}-body--vertical & {
-      width: 100% !important;
-      max-width: 100% !important;
-      min-width: 0 !important;
-      flex: 0 0 auto !important;
-      position: relative;
-      top: auto;
-
-      .@{procedure-prefix}-sider-content-top{
-        height: 100%;
-      }
-    }
-
-    // 响应式宽度调整 - 基于容器宽度的类名控制（适用于弹窗场景）
-    // 使用 CSS 变量 --pisell-procedure-container-width（由 JavaScript 动态设置）
-    // 960px <= containerWidth < 1133px: 376px ~ 405px 线性插值
-    // 公式: 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;
-    }
-
-    // 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;
+    // ========== 响应式宽度控制 ==========
+    
+    // >= 880px: 固定宽度 344px
+    @media (min-width: 880px) {
+      width: @sidebar-width-880 !important;
     }
 
-    // 大于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;
+    // < 880px: 执行其他响应式规则
+    @media (max-width: calc(880px - 1px)) {
+      // 744px <= viewportWidth < 880px: 290px ~ 376px
+      @media (min-width: @breakpoint-sm) {
+        max-width: @sidebar-width-md !important;
+        min-width: @sidebar-width-sm !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)) {
+        // 弹窗模式下不隐藏
+        &.@{procedure-prefix}--modal {
+          display: block !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) {
+        &:not(.@{procedure-prefix}--modal) {  
           display: none !important;
         }
       }
@@ -269,6 +202,27 @@
     }
   }
 
+  .@{procedure-prefix}-sider-content-top{
+    height: auto;
+    max-height: 100%;
+    overflow-y: auto;
+    background-color: #ffffff;
+  }
+
+  // 纵向排列时的样式
+  .@{procedure-prefix}-body--vertical & {
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 0 !important;
+    flex: 0 0 auto !important;
+    position: relative;
+    top: auto;
+
+    .@{procedure-prefix}-sider-content-top{
+      height: 100%;
+    }
+  }
+
   // ========== 底部区域基础样式 ==========
   &-footer {
     display: flex;

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

@@ -0,0 +1,24 @@
+import React from 'react';
+/**
+ * FooterActions 底部操作区组件 Props
+ */
+export interface FooterActionsProps {
+    /** 左侧插槽（自定义内容） */
+    leftSlot?: React.ReactNode;
+    /** 操作按钮插槽（右侧按钮组） */
+    children?: React.ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** More 按钮文案 */
+    moreText?: string;
+    /** 按钮间距 */
+    gap?: number;
+}
+/**
+ * FooterActions 底部操作区组件
+ * @description 实现底部操作区的左右布局：左侧自定义内容 + 右侧操作按钮（支持溢出收纳）
+ * 收纳规则：从左到右依次收纳（优先级低的先收纳），保留右侧的主要操作按钮
+ * @author Pisell Team
+ */
+declare const FooterActions: React.FC<FooterActionsProps>;
+export default FooterActions;

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import type { ProcedureBodyProps as BodyProps, ProcedureFooterProps, FooterPositionMode, ProcedureMode } from '../types';
+/**
+ * ProcedureBody 子组件 Props
+ */
+export interface ProcedureBodyProps {
+    /** 主体配置 */
+    bodyProps?: BodyProps;
+    /** 底部配置 */
+    footerProps?: ProcedureFooterProps;
+    /** 底部位置模式 */
+    footerPosition: FooterPositionMode;
+    /** 是否显示底部 */
+    showFooter?: boolean;
+    /** 是否显示信息区 */
+    showSidebar?: boolean;
+    /** 自定义类名 */
+    className?: string;
+    /** 移动端弹窗是否打开 */
+    summaryModalOpen?: boolean;
+    /** 打开移动端弹窗 */
+    onOpenSummaryModal?: () => void;
+    /** 关闭移动端弹窗 */
+    onCloseSummaryModal?: () => void;
+    /** 上一步回调 */
+    goPrev?: () => void;
+    /** 下一步回调 */
+    goNext?: () => void;
+    /** 组件使用模式 */
+    mode?: ProcedureMode;
+    containerSize?: any;
+    responsiveClsComputed?: string;
+}
+/**
+ * ProcedureBody 主体区域组件
+ *
+ * @description 包含内容区和信息区的布局容器，支持固定宽度和比例两种布局模式
+ * @author Pisell Team
+ */
+declare const ProcedureBody: React.FC<ProcedureBodyProps>;
+export default 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/ProcedureContent.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+/**
+ * ProcedureContent 子组件 Props
+ */
+export interface ProcedureContentProps {
+    /** 内容区类名 */
+    className?: string;
+    /** 内容区样式 */
+    style?: CSSProperties;
+    /** 内容区插槽 */
+    children?: ReactNode;
+    /** 额外内容（如底部操作区） */
+    extra?: ReactNode;
+}
+/**
+ * ProcedureContent 内容区组件
+ *
+ * @description 流程容器的主要内容展示区域
+ * @author Pisell Team
+ */
+declare const ProcedureContent: React.FC<ProcedureContentProps>;
+export default ProcedureContent;

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import type { ProcedureFooterProps as FooterProps, FooterPositionMode, ProcedureMode } from '../types';
+import type { ReactNode } from 'react';
+/**
+ * ProcedureFooter 子组件 Props
+ */
+export interface ProcedureFooterProps {
+    /** 底部配置 */
+    footerProps?: FooterProps;
+    /** 底部位置模式 */
+    position: FooterPositionMode;
+    /** 自定义类名 */
+    className?: string;
+    /** 是否作为全局底部（使用 PisellFooter 包裹） */
+    isGlobal?: boolean;
+    /** 信息区内容（用于移动端弹窗展示） */
+    sidebarContent?: ReactNode;
+    /** 移动端弹窗是否打开（受控） */
+    summaryModalOpen?: boolean;
+    /** 打开移动端弹窗 */
+    onOpenSummaryModal?: () => void;
+    /** 关闭移动端弹窗 */
+    onCloseSummaryModal?: () => void;
+    /** 上一步回调 */
+    goPrev?: () => void;
+    /** 下一步回调 */
+    goNext?: () => void;
+    /** 组件使用模式 */
+    mode?: ProcedureMode;
+}
+/**
+ * ProcedureFooter 底部操作区组件
+ *
+ * @description 包含左侧自定义内容和右侧操作按钮（支持溢出收纳功能）
+ * @author Pisell Team
+ */
+declare const ProcedureFooter: React.FC<ProcedureFooterProps>;
+export default ProcedureFooter;

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import type { ProcedureHeaderProps as HeaderProps } from '../types';
+export declare type ActionType = 'cancel' | 'ok' | 'confirm';
+/**
+ * ProcedureHeader 子组件 Props
+ */
+export interface ProcedureHeaderProps {
+    /** 头部配置 */
+    headerProps?: HeaderProps;
+    /** 当前步骤索引 */
+    currentStep: number;
+    /** 自定义类名 */
+    className?: string;
+    /** 上一步回调 */
+    goPrev?: () => void;
+    /** 跳转到指定步骤 */
+    goToStep?: (step: number) => void;
+    /** 关闭回调 */
+    onClose?: () => void;
+    /** 首步返回回调 */
+    onFirstStepBack?: () => void;
+    /** 返回确认回调 */
+    onBackConfirm?: (action: ActionType) => void;
+    /** 关闭确认回调 */
+    onCloseConfirm?: (action: ActionType) => void;
+}
+/**
+ * ProcedureHeader 头部区域组件
+ *
+ * @description 包含左侧返回按钮、中间步骤条、右侧关闭按钮
+ * @author Pisell Team
+ */
+declare const ProcedureHeader: React.FC<ProcedureHeaderProps>;
+export default ProcedureHeader;