@pisell/materials 6.8.3 → 6.8.4

package/es/components/DragSortList/index.d.ts

@@ -18,7 +18,7 @@ export interface Props<T> {
         attributes: DraggableAttributes;
     }) => React.ReactElement<HTMLElement>;
 }
-export default function Sortable<T extends Record<string, any>>({ list, onChange, rowKey, children, activationConstraint, }: Props<T>): React.JSX.Element;
+export default function Sortable<T extends Record<string, any>>({ list, onChange, rowKey, children, activationConstraint, }: Props<T>): JSX.Element;
 export interface SortableItemProps<T> {
     id: number;
     index: number;

package/es/components/MultipleContainersSortList/index.d.ts

@@ -22,5 +22,5 @@ interface DefaultRenderContainerProps {
     }) => React.ReactElement;
     children: any;
 }
-declare const MultipleContainersSortList: <T extends Record<string, any>>(props: MultipleContainersSortListProps<T>) => React.JSX.Element;
+declare const MultipleContainersSortList: <T extends Record<string, any>>(props: MultipleContainersSortListProps<T>) => JSX.Element;
 export default MultipleContainersSortList;

package/es/components/Pagination/index.d.ts

@@ -5,10 +5,10 @@ export declare const paginationConfig: {
     className: string;
     defaultCurrent: number;
     showTotal: (total: number, range: [number, number]) => string;
-    itemRender: (page: number, type: "next" | "page" | "prev" | "jump-prev" | "jump-next", element: React.ReactNode) => React.ReactNode;
+    itemRender: (page: number, type: "page" | "next" | "prev" | "jump-prev" | "jump-next", element: React.ReactNode) => React.ReactNode;
     responsive: boolean;
     size: string;
 };
-declare const Pagination: (props: PaginationProps) => React.JSX.Element | null;
+declare const Pagination: (props: PaginationProps) => JSX.Element | null;
 export default Pagination;
-export declare const FormPagination: ({ value, onChange, page, pageSize, ...other }: any) => React.JSX.Element;
+export declare const FormPagination: ({ value, onChange, page, pageSize, ...other }: any) => JSX.Element;

package/es/components/PisellBasicGrid/PisellBasicGrid.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
+/// <reference types="react" />
 import type { PisellBasicGridProps } from './types';
 import './PisellBasicGrid.less';
 /**
  * 使用 memo 优化组件性能
  * @description 当 props 没有变化时，避免不必要的重新渲染
  */
-declare const MemoizedPisellBasicGrid: <T>(props: PisellBasicGridProps<T>) => React.JSX.Element;
+declare const MemoizedPisellBasicGrid: <T>(props: PisellBasicGridProps<T>) => JSX.Element;
 export { MemoizedPisellBasicGrid as PisellBasicGrid };
 export default MemoizedPisellBasicGrid;

package/es/components/PisellCards/components/GraphicTextCard/GraphicTextCard.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
+/// <reference types="react" />
 import { GraphicTextCardProps } from './types';
 import './GraphicTextCard.less';
 /**
  * Provider 包装器
  * 兼容 PisellCards 系统的 props 传递方式
  */
-declare const Provider: (props: GraphicTextCardProps) => React.JSX.Element;
+declare const Provider: (props: GraphicTextCardProps) => JSX.Element;
 export default Provider;

package/es/components/PisellCards/components/MultilevelCard/MultilevelCard.d.ts

@@ -15,5 +15,5 @@ import './MultilevelCard.less';
  * ```
  */
 export declare const MultilevelCard: React.FC<MultilevelCardProps<any>>;
-declare const Provider: (props: any) => React.JSX.Element;
+declare const Provider: (props: any) => JSX.Element;
 export default Provider;

package/es/components/PisellCards/components/MultilevelCard/hooks/useMultilevelCardExpand.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { MultilevelCardTrigger } from '../types';
 /**
  * 管理 MultilevelCard 的展开/收起状态

package/es/components/PisellCards/components/PisellImageCard/PisellImageCard.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
+/// <reference types="react" />
 import { PisellImageCardProps } from './types';
 import './PisellImageCard.less';
 /**
  * Provider 包装器
  * 兼容 PisellCards 系统的 props 传递方式
  */
-declare const Provider: (props: PisellImageCardProps) => React.JSX.Element;
+declare const Provider: (props: PisellImageCardProps) => JSX.Element;
 export default Provider;

package/es/components/PisellCards/components/PisellImageCard/hooks/useImageLoad.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * 图片加载状态管理 Hook
  * @param src - 图片地址

package/es/components/PisellCards/components/TabCard/TabCard.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import './TabCard.less';
-declare const Provider: (props: any) => React.JSX.Element;
+declare const Provider: (props: any) => JSX.Element;
 export default Provider;

package/es/components/PisellCards/components/TextCard/TextCard.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
+/// <reference types="react" />
 import './TextCard.less';
 /**
  * Provider 包装器
  * 兼容 PisellCards 系统的 props 传递方式
  */
-declare const Provider: (props: any) => React.JSX.Element;
+declare const Provider: (props: any) => JSX.Element;
 export default Provider;

package/es/components/PisellCards/index.d.ts

@@ -1,9 +1,10 @@
+/// <reference types="react" />
 declare const PisellCards: {
-    TabCard: (props: any) => import("react").JSX.Element;
-    TextCard: (props: any) => import("react").JSX.Element;
-    GraphicTextCard: (props: import("./components/GraphicTextCard").GraphicTextCardProps) => import("react").JSX.Element;
-    MultilevelCard: (props: any) => import("react").JSX.Element;
-    PisellImageCard: (props: import("./components/PisellImageCard").PisellImageCardProps) => import("react").JSX.Element;
+    TabCard: (props: any) => JSX.Element;
+    TextCard: (props: any) => JSX.Element;
+    GraphicTextCard: (props: import("./components/GraphicTextCard").GraphicTextCardProps) => JSX.Element;
+    MultilevelCard: (props: any) => JSX.Element;
+    PisellImageCard: (props: import("./components/PisellImageCard").PisellImageCardProps) => JSX.Element;
 };
 export default PisellCards;
 export type { PisellBasicCardProps } from './types';

package/es/components/PisellProcedure/PisellProcedure.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { PisellProcedureProps } from './types';
+import type { PisellProcedureProps, PisellProcedureRef } from './types';
 import './PisellProcedure.less';
 /**
  * PisellProcedure 流程容器组件
@@ -7,6 +7,16 @@ import './PisellProcedure.less';
  * @description 用于管理多步骤流程的复合容器组件，基于 PisellLayout 实现三段式布局
  * @author Pisell Team
  * @version 1.0.0
+ *
+ * @example
+ * // 使用 ref 调用组件方法
+ * const procedureRef = useRef<PisellProcedureRef>(null);
+ *
+ * // 跳转到下一步
+ * procedureRef.current?.goNext();
+ *
+ * // 获取当前步骤
+ * const currentStep = procedureRef.current?.getCurrentStep();
  */
-declare const PisellProcedure: React.FC<PisellProcedureProps>;
+declare const PisellProcedure: React.ForwardRefExoticComponent<PisellProcedureProps & React.RefAttributes<PisellProcedureRef>>;
 export default PisellProcedure;

package/es/components/PisellProcedure/PisellProcedure.js

@@ -8,7 +8,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React, { useMemo, useCallback, useState } from 'react';
+import React, { useMemo, useCallback, useState, forwardRef, useImperativeHandle } from 'react';
 import PisellLayout from "../pisellLayout";
 import { ProcedureHeader, ProcedureBody, ProcedureFooter } from "./components";
 import { useStepManager } from "./hooks";
@@ -22,8 +22,18 @@ import "./PisellProcedure.less";
  * @description 用于管理多步骤流程的复合容器组件，基于 PisellLayout 实现三段式布局
  * @author Pisell Team
  * @version 1.0.0
+ *
+ * @example
+ * // 使用 ref 调用组件方法
+ * const procedureRef = useRef<PisellProcedureRef>(null);
+ *
+ * // 跳转到下一步
+ * procedureRef.current?.goNext();
+ *
+ * // 获取当前步骤
+ * const currentStep = procedureRef.current?.getCurrentStep();
  */
-var PisellProcedure = function PisellProcedure(props) {
+var PisellProcedure = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,
     style = props.style,
     _props$mode = props.mode,
@@ -65,9 +75,9 @@ var PisellProcedure = function PisellProcedure(props) {
       onStepsChange: onStepsChange
     }),
     currentStep = _useStepManager.currentStep,
-    goPrev = _useStepManager.goPrev,
-    goNext = _useStepManager.goNext,
-    goToStep = _useStepManager.goToStep;
+    _goPrev = _useStepManager.goPrev,
+    _goNext = _useStepManager.goNext,
+    _goToStep = _useStepManager.goToStep;
 
   // 移动端弹窗状态
   var _useState = useState(false),
@@ -81,6 +91,44 @@ var PisellProcedure = function PisellProcedure(props) {
     return setSummaryModalOpen(false);
   }, []);
 
+  // 暴露组件方法给父组件
+  useImperativeHandle(ref, function () {
+    return {
+      /**
+       * 跳转到上一步
+       */
+      goPrev: function goPrev() {
+        return _goPrev();
+      },
+      /**
+       * 跳转到下一步
+       */
+      goNext: function goNext() {
+        return _goNext();
+      },
+      /**
+       * 跳转到指定步骤
+       */
+      goToStep: function goToStep(step) {
+        return _goToStep(step);
+      },
+      /**
+       * 获取当前步骤索引
+       */
+      getCurrentStep: function getCurrentStep() {
+        return currentStep;
+      },
+      /**
+       * 打开移动端总结弹窗
+       */
+      openSummaryModal: openSummaryModal,
+      /**
+       * 关闭移动端总结弹窗
+       */
+      closeSummaryModal: closeSummaryModal
+    };
+  }, [_goPrev, _goNext, _goToStep, currentStep, openSummaryModal, closeSummaryModal]);
+
   // 底部操作区位置模式（移动端强制使用 float-all 吸底悬浮，弹窗模式下不强制）
   var footerPosition = useMemo(function () {
     if (isMobile && mode !== 'modal') return 'float-all';
@@ -96,6 +144,21 @@ var PisellProcedure = function PisellProcedure(props) {
 
   // 判断底部是否全局显示
   var footerIsGlobal = isFooterGlobal(footerPosition);
+
+  // 获取容器宽度和高度（垂直布局下不需要）
+  // const containerSize = useElementSize({
+  //   selector: bodyProps?.sidebarContainerSelector || '',
+  //   enabled:
+  //     bodyProps?.direction !== 'vertical' &&
+  //     !!bodyProps?.sidebarContainerSelector,
+  // });
+
+  // // 使用自定义 Hook 计算响应式类名
+  // const responsiveClsComputed =
+  //   mode === 'modal' ? useResponsiveClass(containerSize?.width || 0) : '';
+
+  // if (!responsiveClsComputed && mode === 'modal') return null;
+
   return /*#__PURE__*/React.createElement("div", _extends({
     className: containerCls,
     style: style,
@@ -104,12 +167,12 @@ var PisellProcedure = function PisellProcedure(props) {
   }, other), /*#__PURE__*/React.createElement(PisellLayout, null, showHeader && /*#__PURE__*/React.createElement(ProcedureHeader, {
     headerProps: headerProps,
     currentStep: currentStep,
-    goPrev: goPrev,
+    goPrev: _goPrev,
     onClose: onClose,
     onFirstStepBack: onFirstStepBack,
     onBackConfirm: onBackConfirm,
     onCloseConfirm: onCloseConfirm,
-    goToStep: goToStep
+    goToStep: _goToStep
   }), /*#__PURE__*/React.createElement(ProcedureBody, {
     bodyProps: bodyProps,
     footerProps: footerProps,
@@ -119,9 +182,11 @@ var PisellProcedure = function PisellProcedure(props) {
     summaryModalOpen: summaryModalOpen,
     onOpenSummaryModal: openSummaryModal,
     onCloseSummaryModal: closeSummaryModal,
-    goPrev: goPrev,
-    goNext: goNext,
+    goPrev: _goPrev,
+    goNext: _goNext,
     mode: mode
+    // containerSize={containerSize}
+    // responsiveClsComputed={responsiveClsComputed}
   }), showFooter && footerIsGlobal && /*#__PURE__*/React.createElement(ProcedureFooter, {
     footerProps: footerProps,
     position: footerPosition,
@@ -130,10 +195,10 @@ var PisellProcedure = function PisellProcedure(props) {
     summaryModalOpen: summaryModalOpen,
     onOpenSummaryModal: openSummaryModal,
     onCloseSummaryModal: closeSummaryModal,
-    goPrev: goPrev,
-    goNext: goNext,
+    goPrev: _goPrev,
+    goNext: _goNext,
     mode: mode
   })));
-};
+});
 PisellProcedure.displayName = 'PisellProcedure';
 export default PisellProcedure;

package/es/components/PisellProcedure/PisellProcedure.less

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

package/es/components/PisellProcedure/components/FooterActions.js

@@ -3,6 +3,7 @@ import { Dropdown, Button } from 'antd';
 import UpOutlined from '@ant-design/icons/UpOutlined';
 import { useOverflowActions } from "../hooks/useOverflowActions";
 import { mergeClassNames } from "../utils";
+import { getText } from "../../../locales";
 
 /**
  * FooterActions 底部操作区组件 Props
@@ -18,8 +19,7 @@ var FooterActions = function FooterActions(_ref) {
   var leftSlot = _ref.leftSlot,
     children = _ref.children,
     className = _ref.className,
-    _ref$moreText = _ref.moreText,
-    moreText = _ref$moreText === void 0 ? 'More' : _ref$moreText,
+    moreText = _ref.moreText,
     _ref$gap = _ref.gap,
     gap = _ref$gap === void 0 ? 16 : _ref$gap;
   var _useOverflowActions = useOverflowActions({
@@ -94,7 +94,7 @@ var FooterActions = function FooterActions(_ref) {
     }
   }, /*#__PURE__*/React.createElement(Button, {
     icon: /*#__PURE__*/React.createElement(UpOutlined, null)
-  }, moreText)), visibleActions)));
+  }, moreText || getText('pisell-procedure-footer-more'))), visibleActions)));
 };
 FooterActions.displayName = 'FooterActions';
 export default FooterActions;

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

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

package/es/components/PisellProcedure/components/ProcedureBody.js

@@ -36,7 +36,9 @@ var ProcedureBody = function ProcedureBody(_ref) {
     goPrev = _ref.goPrev,
     goNext = _ref.goNext,
     _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? 'page' : _ref$mode;
+    mode = _ref$mode === void 0 ? 'page' : _ref$mode,
+    containerSize = _ref.containerSize,
+    responsiveClsComputed = _ref.responsiveClsComputed;
   /** 排列方向，默认为横向 */
   var direction = (bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.direction) || 'horizontal';
   /** 内容顺序，默认为内容区在前 */
@@ -133,7 +135,9 @@ var ProcedureBody = function ProcedureBody(_ref) {
     isRatioMode: layoutMode === 'ratio',
     containerSelector: bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.sidebarContainerSelector,
     mode: mode,
-    direction: direction
+    direction: direction,
+    containerSize: containerSize,
+    responsiveClsComputed: responsiveClsComputed
   }, bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.sidebarSlot) : null;
 
   /** 根据 contentOrder 决定渲染顺序 */

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

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