@pisell/materials 1.0.990 → 1.0.992

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,19 +140,20 @@
 
   // 信息区 - 高度自适应内容，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;
 
@@ -162,80 +162,25 @@
       }
     }
 
-    // 响应式宽度调整 - 基于容器宽度的类名控制（适用于弹窗场景）
-    // 使用 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;
+    // ≥1133px: 固定宽度 405px
+    @media (min-width: @breakpoint-xl) {
+      width: @sidebar-width-xl;
     }
-
-    // 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;
+    // 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;
     }
 
-    // 大于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;
-        }
-      }
+    // 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;
+    }
 
-      // 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 +214,28 @@
     }
   }
 
+  .@{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/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/es/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/es/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;

package/es/components/PisellProcedure/components/ProcedureSidebar.js

@@ -1,9 +1,3 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React, { useMemo, useEffect } from 'react';
 import PisellSider from "../../pisellLayout/sider";
 import { mergeClassNames } from "../utils";
@@ -93,7 +87,9 @@ var ProcedureSidebar = function ProcedureSidebar(_ref) {
 
   // 信息区类名
   var sidebarCls = useMemo(function () {
-    return mergeClassNames('pisell-procedure-sidebar', className, isRatioMode && 'pisell-procedure-sidebar--ratio', responsiveCls);
+    return mergeClassNames('pisell-procedure-sidebar', className, isRatioMode && 'pisell-procedure-sidebar--ratio'
+    // responsiveCls
+    );
   }, [className, isRatioMode, responsiveCls]);
   var _height = useMemo(function () {
     if (mode === 'modal') {
@@ -104,12 +100,12 @@ var ProcedureSidebar = function ProcedureSidebar(_ref) {
     }
   }, [mode, siderHeight]);
   return /*#__PURE__*/React.createElement(PisellSider, {
-    className: sidebarCls,
-    style: _objectSpread(_objectSpread({}, style), {}, {
-      overflow: 'hidden'
-    }, _height && {
-      height: _height
-    })
+    className: sidebarCls
+    // style={{
+    //   ...style,
+    //   overflow: 'hidden',
+    //   ...(_height && { height: _height }),
+    // }}
   }, /*#__PURE__*/React.createElement("div", {
     className: "pisell-procedure-sider-content-top"
   }, children), extra);

package/es/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/es/components/PisellProcedure/hooks/useStepManager.d.ts

@@ -0,0 +1,50 @@
+import type { StepChangeResult } from '../types';
+import type { PisellStepsProps } from '../../PisellSteps/types';
+/**
+ * useStepManager Hook 配置
+ */
+export interface UseStepManagerOptions {
+    /** 步骤条配置 */
+    stepsProps?: PisellStepsProps;
+    /** 初始步骤索引 */
+    defaultCurrent?: number;
+    /** 上一步事件回调 */
+    onPrev?: (current: number) => boolean | void;
+    /** 下一步事件回调 */
+    onNext?: (current: number) => boolean | void;
+    /** 步骤变化回调 */
+    onStepsChange?: (result: StepChangeResult) => void;
+    /** 跳转到指定步骤 */
+    goToStep?: (step: number) => void;
+}
+/**
+ * useStepManager Hook 返回值
+ */
+export interface UseStepManagerReturn {
+    /** 当前步骤索引 */
+    currentStep: number;
+    /** 步骤列表 */
+    items: any[];
+    /** 步骤总数 */
+    totalSteps: number;
+    /** 上一步 */
+    goPrev: () => StepChangeResult | null;
+    /** 下一步 */
+    goNext: () => StepChangeResult | null;
+    /** 跳转到指定步骤 */
+    goToStep: (step: number) => StepChangeResult | null;
+}
+/**
+ * 步骤管理 Hook
+ *
+ * @description 管理多步骤流程的状态和操作
+ * @example
+ * const { currentStep, goPrev, goNext } = useStepManager({
+ *   stepsProps: { items: [...] },
+ *   defaultCurrent: 0,
+ *   onPrev: (current) => { ... },
+ *   onNext: (current) => { ... },
+ *   onStepsChange: (result) => { ... },
+ * });
+ */
+export declare const useStepManager: ({ stepsProps, defaultCurrent, onPrev, onNext, onStepsChange, }: UseStepManagerOptions) => UseStepManagerReturn;