@pisell/materials 1.0.982 → 1.0.983

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { PisellProcedureProps } from './types';
+import './PisellProcedure.less';
+/**
+ * PisellProcedure 流程容器组件
+ * 用于管理多步骤流程，集成步骤导航、内容操作、实时信息反馈和动作执行功能
+ *
+ * @example
+ * ```tsx
+ * <PisellProcedure
+ *   current={current}
+ *   steps={[
+ *     { title: '选择服务' },
+ *     { title: '填写信息' },
+ *     { title: '确认订单' },
+ *   ]}
+ *   onStepChange={handleStepChange}
+ *   contentRender={(current) => <Content step={current} />}
+ *   summaryRender={(current) => <Summary step={current} />}
+ *   actions={[
+ *     { key: 'next', label: '下一步', type: 'primary', onClick: handleNext },
+ *   ]}
+ * />
+ * ```
+ */
+declare const PisellProcedure: React.FC<PisellProcedureProps>;
+export default PisellProcedure;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ProcedureActionProps } from '../types';
+/**
+ * ProcedureAction 组件
+ * 操作区域，渲染操作按钮
+ */
+declare const ProcedureAction: React.FC<ProcedureActionProps>;
+export default ProcedureAction;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ProcedureContentProps } from '../types';
+/**
+ * ProcedureContent 组件
+ * 内容区域，渲染当前步骤的内容
+ */
+declare const ProcedureContent: React.FC<ProcedureContentProps>;
+export default ProcedureContent;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ProcedureHeaderProps } from '../types';
+/**
+ * ProcedureHeader 组件
+ * 头部区域，集成步骤导航和操作按钮
+ */
+declare const ProcedureHeader: React.FC<ProcedureHeaderProps>;
+export default ProcedureHeader;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ProcedureSummaryProps } from '../types';
+/**
+ * ProcedureSummary 组件
+ * 信息总结区域，展示实时反馈信息
+ */
+declare const ProcedureSummary: React.FC<ProcedureSummaryProps>;
+export default ProcedureSummary;

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

@@ -0,0 +1,6 @@
+import type { ResponsiveInfo } from '../types';
+/**
+ * useResponsive Hook
+ * 监听视口宽度变化，返回当前断点信息
+ */
+export declare const useResponsive: () => ResponsiveInfo;

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

@@ -0,0 +1,4 @@
+import PisellProcedure from './PisellProcedure';
+export { default as PisellProcedure } from './PisellProcedure';
+export type { PisellProcedureProps, ActionItem, LayoutDirection, ActionMode, ActionPosition, HeaderFixed, ProcedureHeaderProps, ProcedureContentProps, ProcedureSummaryProps, ProcedureActionProps, MobileSummaryDrawerProps, ResponsiveInfo, ValidationResult, DataSyncConfig, StepItem, PisellStepsProps, } from './types';
+export default PisellProcedure;

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

@@ -0,0 +1,303 @@
+import React from 'react';
+import type { ButtonProps } from 'antd';
+import type { PisellStepsProps, StepItem } from '../PisellSteps/types';
+/**
+ * 布局方向类型
+ */
+export declare type LayoutDirection = 'vertical' | 'horizontal';
+/**
+ * 操作区定位模式
+ */
+export declare type ActionMode = 'fixed' | 'embedded' | 'float';
+/**
+ * 操作区定位位置
+ */
+export declare type ActionPosition = 'bottom' | 'content' | 'summary';
+/**
+ * 头部固定模式
+ */
+export declare type HeaderFixed = boolean | 'scroll';
+/**
+ * 操作按钮配置项
+ */
+export interface ActionItem {
+    /** 唯一标识 */
+    key: string;
+    /** 按钮文本 */
+    label: React.ReactNode;
+    /** 按钮类型 */
+    type?: 'primary' | 'default' | 'dashed' | 'link' | 'text';
+    /** 点击回调 */
+    onClick?: () => void | Promise<void>;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否加载中 */
+    loading?: boolean;
+    /** 按钮图标 */
+    icon?: React.ReactNode;
+    /** 排序权重（越小越靠前） */
+    order?: number;
+    /** 是否隐藏 */
+    hidden?: boolean;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 其他按钮属性 */
+    [key: string]: any;
+}
+/**
+ * PisellProcedure 组件属性
+ */
+export interface PisellProcedureProps {
+    /** 当前步骤索引（从 0 开始） */
+    current?: number;
+    /** 步骤配置数组（传递给 PisellSteps 组件） */
+    steps: StepItem[];
+    /** 步骤改变时的回调 */
+    onStepChange?: (current: number) => void | Promise<void>;
+    /** 点击关闭按钮的回调 */
+    onClose?: () => void;
+    /** 点击上一步按钮的回调 */
+    onPrev?: () => void;
+    /** 内容区渲染函数 */
+    contentRender: (current: number) => React.ReactNode;
+    /** 信息总结区渲染函数 */
+    summaryRender?: (current: number) => React.ReactNode;
+    /** 操作按钮配置数组 */
+    actions?: ActionItem[];
+    /** 整体布局方向 */
+    layout?: LayoutDirection;
+    /** 主体区域布局方向 */
+    bodyLayout?: LayoutDirection;
+    /** 内容区宽度（百分比或固定值） */
+    contentWidth?: string | number;
+    /** 信息总结区宽度（固定值） */
+    summaryWidth?: string | number;
+    /** 是否显示头部区域 */
+    showHeader?: boolean;
+    /** 是否显示信息总结区 */
+    showSummary?: boolean;
+    /** 是否显示操作区 */
+    showAction?: boolean;
+    /** 是否显示上一步按钮 */
+    showPrevButton?: boolean;
+    /** 是否显示关闭按钮 */
+    showCloseButton?: boolean;
+    /** 头部区域是否固定定位 */
+    headerFixed?: HeaderFixed;
+    /** 操作区定位模式 */
+    actionMode?: ActionMode;
+    /** 操作区定位位置 */
+    actionPosition?: ActionPosition;
+    /** 信息总结区是否可折叠 */
+    summaryCollapsible?: boolean;
+    /** 信息总结区默认是否折叠 */
+    summaryDefaultCollapsed?: boolean;
+    /** 步骤切换前是否自动验证 */
+    validateOnStepChange?: boolean;
+    /** 步骤验证函数 */
+    onValidate?: (current: number) => boolean | Promise<boolean>;
+    /** 返回上一步是否清除当前步骤数据 */
+    clearOnBack?: boolean;
+    /** 数据改变影响当前步骤时是否弹窗确认 */
+    confirmOnDataChange?: boolean;
+    /** 头部区域自定义类名 */
+    headerClassName?: string;
+    /** 头部区域自定义样式 */
+    headerStyle?: React.CSSProperties;
+    /** 内容区自定义类名 */
+    contentClassName?: string;
+    /** 内容区自定义样式 */
+    contentStyle?: React.CSSProperties;
+    /** 信息总结区自定义类名 */
+    summaryClassName?: string;
+    /** 信息总结区自定义样式 */
+    summaryStyle?: React.CSSProperties;
+    /** 操作区自定义类名 */
+    actionClassName?: string;
+    /** 操作区自定义样式 */
+    actionStyle?: React.CSSProperties;
+    /** 组件根节点自定义类名 */
+    className?: string;
+    /** 组件根节点自定义样式 */
+    style?: React.CSSProperties;
+    /** 头部区域额外内容插槽 */
+    headerExtra?: React.ReactNode;
+    /** 信息总结区额外内容插槽 */
+    summaryExtra?: React.ReactNode;
+    /** 操作区额外内容插槽 */
+    actionExtra?: React.ReactNode;
+    /** 传递给 PisellSteps 组件的额外属性 */
+    stepsProps?: Partial<PisellStepsProps>;
+    /** 上一步按钮的属性 */
+    prevButtonProps?: ButtonProps;
+    /** 关闭按钮的属性 */
+    closeButtonProps?: ButtonProps;
+    /** 是否显示加载状态 */
+    loading?: boolean;
+    /** 是否禁用所有操作 */
+    disabled?: boolean;
+}
+/**
+ * ProcedureHeader 组件属性（内部子组件）
+ */
+export interface ProcedureHeaderProps {
+    /** 当前步骤索引 */
+    current: number;
+    /** 步骤配置数组 */
+    steps: StepItem[];
+    /** 传递给 PisellSteps 的额外属性 */
+    stepsProps?: Partial<PisellStepsProps>;
+    /** 是否显示上一步按钮 */
+    showPrevButton: boolean;
+    /** 是否显示关闭按钮 */
+    showCloseButton: boolean;
+    /** 点击上一步的回调 */
+    onPrev?: () => void;
+    /** 点击关闭的回调 */
+    onClose?: () => void;
+    /** 点击步骤的回调 */
+    onStepClick?: (index: number) => void;
+    /** 额外内容插槽 */
+    headerExtra?: React.ReactNode;
+    /** 上一步按钮属性 */
+    prevButtonProps?: ButtonProps;
+    /** 关闭按钮属性 */
+    closeButtonProps?: ButtonProps;
+    /** 是否固定定位 */
+    fixed?: HeaderFixed;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 是否禁用 */
+    disabled?: boolean;
+}
+/**
+ * ProcedureContent 组件属性（内部子组件）
+ */
+export interface ProcedureContentProps {
+    /** 当前步骤索引 */
+    current: number;
+    /** 内容渲染函数 */
+    contentRender: (current: number) => React.ReactNode;
+    /** 宽度 */
+    width?: string | number;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 是否加载中 */
+    loading?: boolean;
+}
+/**
+ * ProcedureSummary 组件属性（内部子组件）
+ */
+export interface ProcedureSummaryProps {
+    /** 当前步骤索引 */
+    current: number;
+    /** 信息总结区渲染函数 */
+    summaryRender?: (current: number) => React.ReactNode;
+    /** 宽度 */
+    width?: string | number;
+    /** 是否可折叠 */
+    collapsible?: boolean;
+    /** 默认是否折叠 */
+    defaultCollapsed?: boolean;
+    /** 折叠状态改变的回调 */
+    onCollapseChange?: (collapsed: boolean) => void;
+    /** 额外内容插槽 */
+    summaryExtra?: React.ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 是否显示 */
+    visible?: boolean;
+}
+/**
+ * ProcedureAction 组件属性（内部子组件）
+ */
+export interface ProcedureActionProps {
+    /** 操作按钮配置数组 */
+    actions: ActionItem[];
+    /** 定位模式 */
+    mode?: ActionMode;
+    /** 定位位置 */
+    position?: ActionPosition;
+    /** 额外内容插槽 */
+    actionExtra?: React.ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 是否禁用所有按钮 */
+    disabled?: boolean;
+    /** 是否加载中 */
+    loading?: boolean;
+}
+/**
+ * MobileSummaryDrawer 组件属性（内部子组件）
+ */
+export interface MobileSummaryDrawerProps {
+    /** 当前步骤索引 */
+    current: number;
+    /** 信息总结区渲染函数 */
+    summaryRender?: (current: number) => React.ReactNode;
+    /** 是否可见 */
+    visible: boolean;
+    /** 可见状态改变的回调 */
+    onVisibleChange: (visible: boolean) => void;
+    /** 额外内容插槽 */
+    summaryExtra?: React.ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+}
+/**
+ * 响应式信息类型
+ */
+export interface ResponsiveInfo {
+    /** < 430px */
+    xs: boolean;
+    /** < 744px */
+    sm: boolean;
+    /** < 960px */
+    md: boolean;
+    /** < 1133px */
+    lg: boolean;
+    /** < 1366px */
+    xl: boolean;
+}
+/**
+ * 步骤验证结果
+ */
+export interface ValidationResult {
+    /** 是否验证通过 */
+    valid: boolean;
+    /** 错误信息 */
+    message?: string;
+    /** 错误字段 */
+    errors?: Record<string, string>;
+}
+/**
+ * 数据同步配置
+ */
+export interface DataSyncConfig {
+    /** 是否需要确认 */
+    needConfirm: boolean;
+    /** 确认标题 */
+    confirmTitle?: string;
+    /** 确认内容 */
+    confirmContent?: string;
+    /** 确认按钮文本 */
+    confirmOkText?: string;
+    /** 取消按钮文本 */
+    confirmCancelText?: string;
+}
+/**
+ * 导出所有类型
+ */
+export type { StepItem, PisellStepsProps, } from '../PisellSteps/types';

package/es/components/PisellSteps/PisellSteps.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import './PisellSteps.less';
+import type { PisellStepsProps } from './types';
+/**
+ * PisellSteps 步骤条组件
+ *
+ * 基于 Ant Design Steps 组件进行二次封装和增强
+ * 支持多种展示样式、布局方式和丰富的交互功能
+ *
+ * @author Pisell Team
+ * @version 1.0.0
+ */
+declare const PisellSteps: React.FC<PisellStepsProps>;
+export default PisellSteps;

package/es/components/PisellSteps/hooks/index.d.ts

@@ -0,0 +1,4 @@
+export { useStepsState } from './useStepsState';
+export { useStepClick } from './useStepClick';
+export { useAnchor } from './useAnchor';
+export { useResponsive } from './useResponsive';

package/es/components/PisellSteps/hooks/useAnchor.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 锚链接功能 Hook
+ * 当开启锚链接时，自动滚动到当前步骤对应的锚点
+ *
+ * @param currentStep - 当前步骤索引
+ * @param enableAnchor - 是否启用锚链接
+ * @param anchorContainer - 锚链接容器选择器或元素
+ */
+export declare function useAnchor(currentStep: number, enableAnchor: boolean, anchorContainer?: string | HTMLElement): void;

package/es/components/PisellSteps/hooks/useResponsive.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 响应式监听 Hook
+ * 监听窗口大小变化，返回当前是否为移动端
+ *
+ * @param breakpoint - 断点宽度（默认 768px）
+ * @returns 是否为移动端
+ */
+export declare function useResponsive(breakpoint?: number): boolean;

package/es/components/PisellSteps/hooks/useStepClick.d.ts

@@ -0,0 +1,11 @@
+import type { PisellStepItem } from '../types';
+/**
+ * 处理步骤点击逻辑的 Hook
+ *
+ * @param currentStep - 当前步骤索引
+ * @param clickable - 是否允许点击步骤切换
+ * @param allowClickFinished - 是否允许点击已完成的步骤
+ * @param onStepChange - 步骤变更回调函数
+ * @returns 步骤点击处理函数
+ */
+export declare function useStepClick(currentStep: number, clickable: boolean, allowClickFinished: boolean, onStepChange: (step: number) => void): (index: number, item: PisellStepItem) => void;

package/es/components/PisellSteps/hooks/useStepsState.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 管理步骤条状态的 Hook（支持受控和非受控模式）
+ *
+ * @param current - 受控模式下的当前步骤
+ * @param defaultCurrent - 非受控模式下的默认当前步骤
+ * @param onChange - 步骤变更回调函数
+ * @returns [currentStep, setCurrentStep] - 当前步骤和设置步骤的函数
+ */
+export declare function useStepsState(current?: number, defaultCurrent?: number, onChange?: (current: number) => void): [number, (value: number) => void];

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

@@ -0,0 +1,3 @@
+import PisellSteps from './PisellSteps';
+export type { PisellStepsProps, PisellStepItem, StepStatus, StepType, StepDirection, StepSize } from './types';
+export default PisellSteps;