@pisell/materials 3.3.78 → 3.3.80

package/es/components/PisellProcedure/PisellProcedure.stories.js

@@ -6,11 +6,11 @@ import { expect, within } from '@storybook/test';
 import { Button, Card, Space, Divider, Form, Input, Select } from 'antd';
 import { ArrowLeftOutlined, CloseOutlined, ShoppingCartOutlined, HomeOutlined, InfoCircleOutlined } from '@ant-design/icons';
 import PisellProcedure from "./PisellProcedure";
-/**
- * PisellProcedure 流程容器组件
- *
- * 用于管理多步骤流程的复合容器组件，基于 PisellLayout 实现三段式布局
- * 包含头部区域（步骤条）、主体区域（内容区+信息区）、底部区域（操作按钮）
+/**
+ * PisellProcedure 流程容器组件
+ *
+ * 用于管理多步骤流程的复合容器组件，基于 PisellLayout 实现三段式布局
+ * 包含头部区域（步骤条）、主体区域（内容区+信息区）、底部区域（操作按钮）
  */
 var meta = {
   title: 'Pro Components/PisellProcedure',
@@ -51,9 +51,9 @@ var meta = {
 export default meta;
 // ========== 基础用法 ==========
 
-/**
- * 基础用法
- * @description 默认流程容器，包含头部、主体、底部三个区域
+/**
+ * 基础用法
+ * @description 默认流程容器，包含头部、主体、底部三个区域
  */
 export var Default = {
   args: {
@@ -100,9 +100,9 @@ export var Default = {
 
 // ========== 组件模式 ==========
 
-/**
- * 页面模式
- * @description 默认模式，支持响应式和移动端适配
+/**
+ * 页面模式
+ * @description 默认模式，支持响应式和移动端适配
  */
 export var PageMode = {
   args: {
@@ -139,9 +139,9 @@ export var PageMode = {
   }
 };
 
-/**
- * 弹窗模式
- * @description 用于弹窗场景，不应用移动端适配
+/**
+ * 弹窗模式
+ * @description 用于弹窗场景，不应用移动端适配
  */
 export var ModalMode = {
   args: {
@@ -193,9 +193,9 @@ export var ModalMode = {
 
 // ========== 步骤控制 ==========
 
-/**
- * 步骤控制
- * @description 使用 onStepsChange 监听步骤变化
+/**
+ * 步骤控制
+ * @description 使用 onStepsChange 监听步骤变化
  */
 export var StepControl = {
   args: {
@@ -235,9 +235,9 @@ export var StepControl = {
   }
 };
 
-/**
- * 步骤拦截
- * @description 通过 onNext/onPrev 返回 false 阻止步骤切换
+/**
+ * 步骤拦截
+ * @description 通过 onNext/onPrev 返回 false 阻止步骤切换
  */
 export var StepIntercept = {
   args: {
@@ -289,8 +289,8 @@ export var StepIntercept = {
 
 // ========== 区域显示控制 ==========
 
-/**
- * 无侧边栏
+/**
+ * 无侧边栏
  */
 export var WithoutSidebar = {
   args: {
@@ -323,8 +323,8 @@ export var WithoutSidebar = {
   }
 };
 
-/**
- * 无头部
+/**
+ * 无头部
  */
 export var WithoutHeader = {
   args: {
@@ -350,8 +350,8 @@ export var WithoutHeader = {
   }
 };
 
-/**
- * 无底部
+/**
+ * 无底部
  */
 export var WithoutFooter = {
   args: {
@@ -383,9 +383,9 @@ export var WithoutFooter = {
   }
 };
 
-/**
- * 最小配置
- * @description 仅显示主体内容
+/**
+ * 最小配置
+ * @description 仅显示主体内容
  */
 export var MinimalConfig = {
   args: {
@@ -405,9 +405,9 @@ export var MinimalConfig = {
 
 // ========== 头部区域配置 ==========
 
-/**
- * 头部插槽顺序 - 默认
- * @description left 在左，right 在右
+/**
+ * 头部插槽顺序 - 默认
+ * @description left 在左，right 在右
  */
 export var HeaderSlotDefault = {
   args: {
@@ -452,9 +452,9 @@ export var HeaderSlotDefault = {
   }
 };
 
-/**
- * 头部插槽顺序 - 反转
- * @description left 在右，right 在左
+/**
+ * 头部插槽顺序 - 反转
+ * @description left 在右，right 在左
  */
 export var HeaderSlotReverse = {
   args: {
@@ -499,9 +499,9 @@ export var HeaderSlotReverse = {
   }
 };
 
-/**
- * 隐藏步骤条
- * @description 仅显示头部插槽，不显示步骤条
+/**
+ * 隐藏步骤条
+ * @description 仅显示头部插槽，不显示步骤条
  */
 export var HideSteps = {
   args: {
@@ -535,9 +535,9 @@ export var HideSteps = {
   }
 };
 
-/**
- * 第一步显示返回按钮
- * @description 通过 showBackOnFirstStep 控制
+/**
+ * 第一步显示返回按钮
+ * @description 通过 showBackOnFirstStep 控制
  */
 export var ShowBackOnFirstStep = {
   args: {
@@ -583,9 +583,9 @@ export var ShowBackOnFirstStep = {
 
 // ========== 确认弹窗 ==========
 
-/**
- * 返回确认弹窗
- * @description 点击返回时弹出确认弹窗
+/**
+ * 返回确认弹窗
+ * @description 点击返回时弹出确认弹窗
  */
 export var BackConfirmModal = {
   args: {
@@ -633,9 +633,9 @@ export var BackConfirmModal = {
   }
 };
 
-/**
- * 关闭确认弹窗
- * @description 点击关闭时弹出确认弹窗
+/**
+ * 关闭确认弹窗
+ * @description 点击关闭时弹出确认弹窗
  */
 export var CloseConfirmModal = {
   args: {
@@ -687,9 +687,9 @@ export var CloseConfirmModal = {
 
 // ========== 主体区域布局 ==========
 
-/**
- * 主体布局 - 比例布局
- * @description 使用比例分配内容区和侧边栏宽度
+/**
+ * 主体布局 - 比例布局
+ * @description 使用比例分配内容区和侧边栏宽度
  */
 export var BodyRatioLayout = {
   args: {
@@ -727,9 +727,9 @@ export var BodyRatioLayout = {
   }
 };
 
-/**
- * 主体布局 - 固定宽度
- * @description 侧边栏使用固定宽度
+/**
+ * 主体布局 - 固定宽度
+ * @description 侧边栏使用固定宽度
  */
 export var BodyFixedLayout = {
   args: {
@@ -766,9 +766,9 @@ export var BodyFixedLayout = {
   }
 };
 
-/**
- * 主体布局 - 垂直布局
- * @description 内容区和侧边栏上下排列
+/**
+ * 主体布局 - 垂直布局
+ * @description 内容区和侧边栏上下排列
  */
 export var BodyVerticalLayout = {
   args: {
@@ -806,9 +806,9 @@ export var BodyVerticalLayout = {
   }
 };
 
-/**
- * 主体布局 - 内容顺序反转
- * @description 侧边栏在左/上，内容区在右/下
+/**
+ * 主体布局 - 内容顺序反转
+ * @description 侧边栏在左/上，内容区在右/下
  */
 export var BodyContentOrderReverse = {
   args: {
@@ -850,9 +850,9 @@ export var BodyContentOrderReverse = {
 
 // ========== 底部区域位置 ==========
 
-/**
- * 底部位置 - 悬浮在侧边栏
- * @description 默认位置，底部悬浮在侧边栏区域
+/**
+ * 底部位置 - 悬浮在侧边栏
+ * @description 默认位置，底部悬浮在侧边栏区域
  */
 export var FooterFloatSidebar = {
   args: {
@@ -890,8 +890,8 @@ export var FooterFloatSidebar = {
   }
 };
 
-/**
- * 底部位置 - 固定在整体底部
+/**
+ * 底部位置 - 固定在整体底部
  */
 export var FooterFixedBottom = {
   args: {
@@ -929,9 +929,9 @@ export var FooterFixedBottom = {
   }
 };
 
-/**
- * 底部位置 - 悬浮在整体区域
- * @description 移动端默认使用此模式
+/**
+ * 底部位置 - 悬浮在整体区域
+ * @description 移动端默认使用此模式
  */
 export var FooterFloatAll = {
   args: {
@@ -969,8 +969,8 @@ export var FooterFloatAll = {
   }
 };
 
-/**
- * 底部位置 - 悬浮在内容区
+/**
+ * 底部位置 - 悬浮在内容区
  */
 export var FooterFloatContent = {
   args: {
@@ -1008,8 +1008,8 @@ export var FooterFloatContent = {
   }
 };
 
-/**
- * 底部位置 - 内嵌在内容区底部
+/**
+ * 底部位置 - 内嵌在内容区底部
  */
 export var FooterFixedContentBottom = {
   args: {
@@ -1047,8 +1047,8 @@ export var FooterFixedContentBottom = {
   }
 };
 
-/**
- * 底部位置 - 内嵌在侧边栏底部
+/**
+ * 底部位置 - 内嵌在侧边栏底部
  */
 export var FooterFixedSidebarBottom = {
   args: {
@@ -1088,9 +1088,9 @@ export var FooterFixedSidebarBottom = {
 
 // ========== 移动端特性 ==========
 
-/**
- * 移动端总结按钮
- * @description 移动端显示总结按钮，点击可查看侧边栏内容
+/**
+ * 移动端总结按钮
+ * @description 移动端显示总结按钮，点击可查看侧边栏内容
  */
 export var MobileSummaryButton = {
   args: {
@@ -1144,9 +1144,9 @@ export var MobileSummaryButton = {
 
 // ========== 溢出收纳 ==========
 
-/**
- * 溢出收纳功能
- * @description 当宽度不足时，按钮会被收纳到 More 菜单中
+/**
+ * 溢出收纳功能
+ * @description 当宽度不足时，按钮会被收纳到 More 菜单中
  */
 export var OverflowActions = {
   args: {
@@ -1185,9 +1185,9 @@ export var OverflowActions = {
   }
 };
 
-/**
- * 禁用溢出收纳
- * @description 不启用溢出收纳，按钮会换行显示
+/**
+ * 禁用溢出收纳
+ * @description 不启用溢出收纳，按钮会换行显示
  */
 export var DisableOverflow = {
   args: {
@@ -1227,9 +1227,9 @@ export var DisableOverflow = {
 
 // ========== 完整示例 ==========
 
-/**
- * 完整示例 - 购物流程
- * @description 模拟真实的购物流程
+/**
+ * 完整示例 - 购物流程
+ * @description 模拟真实的购物流程
  */
 export var ShoppingFlow = {
   args: {
@@ -1327,9 +1327,9 @@ export var ShoppingFlow = {
   }
 };
 
-/**
- * 完整示例 - 注册流程
- * @description 模拟用户注册流程
+/**
+ * 完整示例 - 注册流程
+ * @description 模拟用户注册流程
  */
 export var RegistrationFlow = {
   args: {
@@ -1412,9 +1412,9 @@ export var RegistrationFlow = {
   }
 };
 
-/**
- * 完整示例 - 表单向导
- * @description 多步表单向导
+/**
+ * 完整示例 - 表单向导
+ * @description 多步表单向导
  */
 export var FormWizard = {
   args: {
@@ -1533,8 +1533,8 @@ export var FormWizard = {
 
 // ========== 交互测试 ==========
 
-/**
- * 交互测试 - 组件渲染
+/**
+ * 交互测试 - 组件渲染
  */
 export var InteractionTest = {
   args: {

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

@@ -5,15 +5,15 @@ import { useOverflowActions } from "../hooks/useOverflowActions";
 import { mergeClassNames } from "../utils";
 import { getText } from "../../../locales";
 
-/**
- * FooterActions 底部操作区组件 Props
+/**
+ * FooterActions 底部操作区组件 Props
  */
 
-/**
- * FooterActions 底部操作区组件
- * @description 实现底部操作区的左右布局：左侧自定义内容 + 右侧操作按钮（支持溢出收纳）
- * 收纳规则：从左到右依次收纳（优先级低的先收纳），保留右侧的主要操作按钮
- * @author Pisell Team
+/**
+ * FooterActions 底部操作区组件
+ * @description 实现底部操作区的左右布局：左侧自定义内容 + 右侧操作按钮（支持溢出收纳）
+ * 收纳规则：从左到右依次收纳（优先级低的先收纳），保留右侧的主要操作按钮
+ * @author Pisell Team
  */
 var FooterActions = function FooterActions(_ref) {
   var leftSlot = _ref.leftSlot,

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

@@ -1,41 +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;
+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/es/components/PisellProcedure/components/ProcedureBody.js

@@ -11,15 +11,15 @@ import ProcedureSidebar from "./ProcedureSidebar";
 import ProcedureFooter from "./ProcedureFooter";
 import { mergeClassNames, isFooterInContent, isFooterInSidebar, generateRatioStyles } from "../utils";
 
-/**
- * ProcedureBody 子组件 Props
+/**
+ * ProcedureBody 子组件 Props
  */
 
-/**
- * ProcedureBody 主体区域组件
- * 
- * @description 包含内容区和信息区的布局容器，支持固定宽度和比例两种布局模式
- * @author Pisell Team
+/**
+ * ProcedureBody 主体区域组件
+ * 
+ * @description 包含内容区和信息区的布局容器，支持固定宽度和比例两种布局模式
+ * @author Pisell Team
  */
 var ProcedureBody = function ProcedureBody(_ref) {
   var bodyProps = _ref.bodyProps,

package/es/components/PisellProcedure/components/ProcedureContent.js

@@ -2,15 +2,15 @@ import React, { useMemo } from 'react';
 import PisellContent from "../../pisellLayout/content";
 import { mergeClassNames } from "../utils";
 
-/**
- * ProcedureContent 子组件 Props
+/**
+ * ProcedureContent 子组件 Props
  */
 
-/**
- * ProcedureContent 内容区组件
- * 
- * @description 流程容器的主要内容展示区域
- * @author Pisell Team
+/**
+ * ProcedureContent 内容区组件
+ * 
+ * @description 流程容器的主要内容展示区域
+ * @author Pisell Team
  */
 var ProcedureContent = function ProcedureContent(_ref) {
   var className = _ref.className,

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

@@ -1,38 +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;
+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/ProcedureFooter.js

@@ -4,15 +4,15 @@ import PisellModal from "../../pisellModal";
 import FooterActions from "./FooterActions";
 import { mergeClassNames, modifierClassName } from "../utils";
 
-/**
- * ProcedureFooter 子组件 Props
+/**
+ * ProcedureFooter 子组件 Props
  */
 
-/**
- * ProcedureFooter 底部操作区组件
- * 
- * @description 包含左侧自定义内容和右侧操作按钮（支持溢出收纳功能）
- * @author Pisell Team
+/**
+ * ProcedureFooter 底部操作区组件
+ * 
+ * @description 包含左侧自定义内容和右侧操作按钮（支持溢出收纳功能）
+ * @author Pisell Team
  */
 var ProcedureFooter = function ProcedureFooter(_ref) {
   var footerProps = _ref.footerProps,
@@ -34,12 +34,12 @@ var ProcedureFooter = function ProcedureFooter(_ref) {
     return mergeClassNames('pisell-procedure-footer', className, footerProps === null || footerProps === void 0 ? void 0 : footerProps.className, modifierClassName('pisell-procedure-footer', position));
   }, [className, footerProps === null || footerProps === void 0 ? void 0 : footerProps.className, position]);
 
-  /**
-   * 处理操作按钮
-   * @description 根据 data-action 属性注入对应的事件
-   * - data-action="prev"：注入上一步事件（goPrev）
-   * - data-action="next"：注入下一步事件（goNext）
-   * - 无 data-action 且是最后一个按钮：默认注入下一步事件（goNext）
+  /**
+   * 处理操作按钮
+   * @description 根据 data-action 属性注入对应的事件
+   * - data-action="prev"：注入上一步事件（goPrev）
+   * - data-action="next"：注入下一步事件（goNext）
+   * - 无 data-action 且是最后一个按钮：默认注入下一步事件（goNext）
    */
   var processedActions = useMemo(function () {
     var actions = footerProps === null || footerProps === void 0 ? void 0 : footerProps.actions;
@@ -87,9 +87,9 @@ var ProcedureFooter = function ProcedureFooter(_ref) {
   /** 获取操作按钮内容 */
   var actionsContent = processedActions;
 
-  /**
-   * 包装 summaryButton 添加点击事件
-   * 如果用户传入的按钮已有 onClick，则先执行用户的 onClick，再打开弹窗
+  /**
+   * 包装 summaryButton 添加点击事件
+   * 如果用户传入的按钮已有 onClick，则先执行用户的 onClick，再打开弹窗
    */
   var wrappedSummaryButton = useMemo(function () {
     var _button$props;