@pisell/materials 1.0.987 → 1.0.988

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

@@ -0,0 +1,38 @@
+import { DraggableAttributes } from "@dnd-kit/core";
+import { SyntheticListenerMap } from "@dnd-kit/core/dist/hooks/utilities";
+import React from "react";
+import { PointerActivationConstraint } from "@dnd-kit/core/dist/sensors/pointer/AbstractPointerSensor";
+declare type IdType = string | number;
+export interface Props<T> {
+    list?: T[];
+    onChange?: (list: T[]) => void;
+    rowKey: IdType | ((val: T) => IdType);
+    activationConstraint?: PointerActivationConstraint;
+    children: (params: {
+        item: T;
+        index: number;
+        style: React.CSSProperties;
+        props: any;
+        setActivatorNodeRef: (element: HTMLElement | null) => void;
+        listeners: SyntheticListenerMap;
+        attributes: DraggableAttributes;
+    }) => React.ReactElement<HTMLElement>;
+}
+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;
+    disabled?: boolean;
+    children: (params: {
+        item: T;
+        index: number;
+        style: React.CSSProperties;
+        props: any;
+        setActivatorNodeRef: (element: HTMLElement | null) => void;
+        listeners: SyntheticListenerMap;
+        attributes: DraggableAttributes;
+    }) => React.ReactElement<HTMLElement>;
+    item: T;
+}
+export declare function SortableItem<T>({ id, index, item, children, disabled, }: SortableItemProps<T>): React.ReactElement<HTMLElement, string | React.JSXElementConstructor<any>>;
+export {};

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { SortableItemProps } from '../DragSortList';
+import './index.less';
+declare type IdType = string | number;
+export interface MultipleContainersSortListProps<T> {
+    list: Record<string, T[]>;
+    vertical?: boolean;
+    wrapStyle?: React.CSSProperties;
+    onChange: (val: Record<string, T[]>) => void;
+    renderContainer?: DefaultRenderContainerProps['renderContainer'];
+    rowKey: IdType | ((val: T) => IdType);
+    children: SortableItemProps<T>['children'];
+    quickFilterMaxLength: number;
+}
+export declare const TRASH_ID = "void";
+interface DefaultRenderContainerProps {
+    id: IdType;
+    renderContainer: (params: {
+        children: React.ReactElement;
+        ref: any;
+        id: IdType;
+    }) => React.ReactElement;
+    children: any;
+}
+declare const MultipleContainersSortList: <T extends Record<string, any>>(props: MultipleContainersSortListProps<T>) => JSX.Element;
+export default MultipleContainersSortList;

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

@@ -0,0 +1,14 @@
+import React from "react";
+import { PaginationProps } from "antd";
+import "./index.less";
+export declare const paginationConfig: {
+    className: string;
+    defaultCurrent: number;
+    showTotal: (total: number, range: [number, number]) => string;
+    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) => JSX.Element | null;
+export default Pagination;
+export declare const FormPagination: ({ value, onChange, page, pageSize, ...other }: any) => JSX.Element;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { PisellBasicGridProps } from './types';
 import './PisellBasicGrid.less';
 /**

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { GraphicTextCardProps } from './types';
 import './GraphicTextCard.less';
 /**

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,3 +1,4 @@
+/// <reference types="react" />
 import { PisellImageCardProps } from './types';
 import './PisellImageCard.less';
 /**

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

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import './TextCard.less';
 /**
  * Provider 包装器

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const PisellCards: {
     TabCard: (props: any) => JSX.Element;
     TextCard: (props: any) => JSX.Element;

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

@@ -1,4 +1,4 @@
-var _excluded = ["className", "style", "showHeader", "showSidebar", "showFooter", "defaultCurrent", "onStepsChange", "headerProps", "bodyProps", "footerProps", "onClose", "onPrev", "onNext", "onFirstStepBack", "onBackConfirm", "onCloseConfirm", "__designMode", "__id"];
+var _excluded = ["className", "style", "mode", "showHeader", "showSidebar", "showFooter", "defaultCurrent", "onStepsChange", "headerProps", "bodyProps", "footerProps", "onClose", "onPrev", "onNext", "onFirstStepBack", "onBackConfirm", "onCloseConfirm", "__designMode", "__id"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -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,10 +22,22 @@ 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,
+    mode = _props$mode === void 0 ? 'page' : _props$mode,
     _props$showHeader = props.showHeader,
     showHeader = _props$showHeader === void 0 ? true : _props$showHeader,
     _props$showSidebar = props.showSidebar,
@@ -49,7 +61,10 @@ var PisellProcedure = function PisellProcedure(props) {
     other = _objectWithoutProperties(props, _excluded);
 
   // 检测是否是移动端（< 744px）
-  var isMobile = useMobile(744);
+  // 注意：Hook 必须无条件调用，不能放在条件语句中
+  var isMobileDetected = useMobile(744);
+  // 弹窗模式下不应用移动端检测
+  var isMobile = mode === 'modal' ? false : isMobileDetected;
 
   // 使用步骤管理 Hook
   var _useStepManager = useStepManager({
@@ -60,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),
@@ -76,16 +91,56 @@ var PisellProcedure = function PisellProcedure(props) {
     return setSummaryModalOpen(false);
   }, []);
 
-  // 底部操作区位置模式（移动端强制使用 float-all 吸底悬浮）
+  // 暴露组件方法给父组件
+  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) return 'float-all';
+    if (isMobile && mode !== 'modal') return 'float-all';
     return (footerProps === null || footerProps === void 0 ? void 0 : footerProps.position) || 'float-sidebar';
-  }, [isMobile, footerProps === null || footerProps === void 0 ? void 0 : footerProps.position]);
+  }, [mode, isMobile, footerProps === null || footerProps === void 0 ? void 0 : footerProps.position]);
 
   // 容器类名
   var containerCls = useMemo(function () {
-    return mergeClassNames('pisell-procedure', className, modifierClassName('pisell-procedure', "footer-".concat(footerPosition)));
-  }, [className, footerPosition]);
+    return mergeClassNames('pisell-procedure', className,
+    // 弹窗模式添加 --modal 修饰类，用于禁用媒体查询
+    mode === 'modal' && 'pisell-procedure--modal', modifierClassName('pisell-procedure', "footer-".concat(footerPosition)));
+  }, [className, mode, footerPosition]);
 
   // 判断底部是否全局显示
   var footerIsGlobal = isFooterGlobal(footerPosition);
@@ -97,12 +152,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,
@@ -112,8 +167,9 @@ var PisellProcedure = function PisellProcedure(props) {
     summaryModalOpen: summaryModalOpen,
     onOpenSummaryModal: openSummaryModal,
     onCloseSummaryModal: closeSummaryModal,
-    goPrev: goPrev,
-    goNext: goNext
+    goPrev: _goPrev,
+    goNext: _goNext,
+    mode: mode
   }), showFooter && footerIsGlobal && /*#__PURE__*/React.createElement(ProcedureFooter, {
     footerProps: footerProps,
     position: footerPosition,
@@ -122,9 +178,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

@@ -105,17 +105,19 @@
 
     // ========== 布局模式：比例布局 ==========
     &--ratio {
-      // 移动端：比例模式下也隐藏信息区
-      @media (max-width: calc(@breakpoint-sm - 1px)) {
-        > .pisell-lowcode-layout,
-        > .ant-layout {
-          .@{procedure-prefix}-sidebar {
-            display: none !important;
-          }
-
-          .@{procedure-prefix}-content {
-            flex: 1 !important;
-            max-width: 100% !important;
+      // 移动端：比例模式下也隐藏信息区（弹窗模式下不执行）
+      .@{procedure-prefix}:not(.@{procedure-prefix}--modal) & {
+        @media (max-width: calc(@breakpoint-sm - 1px)) {
+          > .pisell-lowcode-layout,
+          > .ant-layout {
+            .@{procedure-prefix}-sidebar {
+              display: none !important;
+            }
+
+            .@{procedure-prefix}-content {
+              flex: 1 !important;
+              max-width: 100% !important;
+            }
           }
         }
       }
@@ -132,30 +134,24 @@
 
     // 纵向排列时的样式
     .@{procedure-prefix}-body--vertical & {
-      width: 100%;
+      width: 100% !important;
       flex: 1 1 auto;
     }
   }
 
   // 信息区 - 高度自适应内容，sticky 定位
   &-sidebar {
-    width: @sidebar-width-xl !important;
-    max-width: @sidebar-width-xl !important;
-    min-width: @sidebar-width-xl !important;
-    flex: 0 0 @sidebar-width-xl !important;
+    width: initial !important;
+    max-width: initial !important;
+    min-width: initial !important;
     background-color: @color-bg-sidebar;
     border-radius: 4px;
-    position: sticky;
-    top: calc(64px + @gap-default * 2); // header 高度 + body padding + 额外间距
+    position: sticky!important;
     overflow-y: auto;
     align-self: flex-start; // 不拉伸高度
-    background: transparent;
+    background: transparent !important;
     height: fit-content;
 
-    .ant-layout-sider-children {
-      padding: @padding-default;
-    }
-
     .@{pisell-layout-prefix}-sider-content{
       overflow: hidden!important;
       display: flex;
@@ -181,32 +177,86 @@
       flex: 0 0 auto !important;
       position: relative;
       top: auto;
+
+      .@{procedure-prefix}-sider-content-top{
+        height: 100%;
+      }
     }
 
-    // 响应式宽度调整 - 渐进式变化
-    // 960px < width < 1133px: 376px ~ 405px 线性插值
-    // 公式: 376 + (viewport - 960) * (405 - 376) / (1133 - 960)
-    @media (max-width: calc(@breakpoint-lg - 1px)) and (min-width: @breakpoint-md) {
-      @sidebar-width-dynamic: calc(@sidebar-width-md + (100vw - @breakpoint-md) * (405 - 376) / (1133 - 960));
+    // 响应式宽度调整 - 基于容器宽度的类名控制（适用于弹窗场景）
+    // 使用 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 < width < 960px: 290px ~ 376px 线性插值
-    // 公式: 290 + (viewport - 744) * (376 - 290) / (960 - 744)
-    @media (max-width: calc(@breakpoint-md - 1px)) and (min-width: @breakpoint-sm) {
-      @sidebar-width-dynamic: calc(@sidebar-width-sm + (100vw - @breakpoint-sm) * (376 - 290) / (960 - 744));
+    // 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;
     }
 
-    // width < 744px: 隐藏
-    @media (max-width: calc(@breakpoint-sm - 1px)) {
-      display: none !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;
+    }
+
+    // 大于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;
+        }
+      }
     }
 
     // ========== 比例模式样式（在基础样式内部，确保优先级） ==========
@@ -233,7 +283,7 @@
     z-index: 100;
     overflow: hidden; // 防止内容溢出
 
-    // 总结按钮插槽 - 仅移动端显示（< 744px）
+    // 总结按钮插槽 - 仅移动端显示（< 744px），弹窗模式下不执行媒体查询
     &__summary {
       flex-shrink: 0;
       margin-right: auto;
@@ -241,9 +291,11 @@
       display: none;
       cursor: pointer;
 
-      // 移动端显示
-      @media (max-width: calc(@breakpoint-sm - 1px)) {
-        display: block;
+      // 移动端显示（仅页面模式）
+      .@{procedure-prefix}:not(.@{procedure-prefix}--modal) & {
+        @media (max-width: calc(@breakpoint-sm - 1px)) {
+          display: block;
+        }
       }
     }
 
@@ -427,81 +479,82 @@
           flex-shrink: 0;
           position: sticky;
           bottom: 0;
-          margin: @gap-default;
-          margin-top: auto; // 推到底部
+          margin: 0;
         }
       }
     }
   }
 
-  // ========== 小屏适配（744px-960px）：头部两行显示 ==========
-  @media (min-width: @breakpoint-sm) and (max-width: calc(@breakpoint-md - 1px)) {
-    &-header {
-      flex-wrap: wrap;
-      min-height: auto;
-      padding: 12px @padding-default;
-
-      // 第一行：返回按钮
-      &__left {
-        order: 1;
-        flex: 0 0 auto;
-      }
+  // ========== 小屏适配（744px-960px）：头部两行显示（仅页面模式） ==========
+  &:not(&--modal) {
+    @media (min-width: @breakpoint-sm) and (max-width: calc(@breakpoint-md - 1px)) {
+      .@{procedure-prefix}-header {
+        flex-wrap: wrap;
+        min-height: auto;
+        padding: 12px @padding-default;
+
+        // 第一行：返回按钮
+        .@{procedure-prefix}-header__left {
+          order: 1;
+          flex: 0 0 auto;
+        }
 
-      // 第一行：关闭按钮，推到右边
-      &__right {
-        order: 2;
-        flex: 0 0 auto;
-        margin-left: auto;
-      }
+        // 第一行：关闭按钮，推到右边
+        .@{procedure-prefix}-header__right {
+          order: 2;
+          flex: 0 0 auto;
+          margin-left: auto;
+        }
 
-      // 第二行：步骤条独占一行
-      &__center {
-        order: 3;
-        width: 100%;
-        flex: 0 0 100%;
-        padding: @gap-default 0 0;
-        justify-content: flex-start;
-        overflow-x: auto;
+        // 第二行：步骤条独占一行
+        .@{procedure-prefix}-header__center {
+          order: 3;
+          width: 100%;
+          flex: 0 0 100%;
+          padding: 0;
+          justify-content: flex-start;
+          overflow-x: auto;
+        }
       }
     }
-  }
 
-  // ========== 移动端适配（<744px）：头部一行显示 ==========
-  @media (max-width: calc(@breakpoint-sm - 1px)) {
-    &-header {
-      flex-wrap: nowrap;
-      min-height: auto;
-      padding: 12px @padding-default;
+    // ========== 移动端适配（<744px）：头部一行显示 ==========
+    @media (max-width: calc(@breakpoint-sm - 1px)) {
+      .@{procedure-prefix}-header {
+        flex-wrap: nowrap;
+        min-height: auto;
+        padding: 12px @padding-default;
+
+        // 左侧：返回按钮
+        .@{procedure-prefix}-header__left {
+          flex: 0 0 auto;
+        }
 
-      // 左侧：返回按钮
-      &__left {
-        flex: 0 0 auto;
-      }
+        // 中间：步骤条（简化显示当前步骤）
+        .@{procedure-prefix}-header__center {
+          flex: 1;
+          padding: 0 @gap-default;
+          overflow: hidden;
+        }
 
-      // 中间：步骤条（简化显示当前步骤）
-      &__center {
-        flex: 1;
-        padding: 0 @gap-default;
-        overflow: hidden;
+        // 右侧：关闭按钮
+        .@{procedure-prefix}-header__right {
+          flex: 0 0 auto;
+        }
       }
 
-      // 右侧：关闭按钮
-      &__right {
-        flex: 0 0 auto;
+      // 主体区域移动端
+      .@{procedure-prefix}-body {
+        > .pisell-lowcode-layout,
+        > .ant-layout {
+          padding: @gap-default;
+        }
       }
-    }
 
-    // 主体区域移动端
-    &-body {
-      > .pisell-lowcode-layout,
-      > .ant-layout {
-        padding: @gap-default;
+      // 内容区占满
+      .@{procedure-prefix}-content {
+        width: 100% !important;
       }
     }
-
-    // 内容区占满
-    &-content {
-      width: 100%;
-    }
   }
 }

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

@@ -16,7 +16,6 @@ export interface FooterActionsProps {
 }
 /**
  * FooterActions 底部操作区组件
- *
  * @description 实现底部操作区的左右布局：左侧自定义内容 + 右侧操作按钮（支持溢出收纳）
  * 收纳规则：从左到右依次收纳（优先级低的先收纳），保留右侧的主要操作按钮
  * @author Pisell Team