import type { StepsProps, StepProps } from 'antd'; import type { CSSProperties, ReactNode } from 'react'; import type { ScrollActionsConfig } from '../PisellScrollView/types'; /** * 步骤状态类型 */ export declare type StepStatus = 'wait' | 'process' | 'finish' | 'error'; /** * 步骤条方向 */ export declare type StepDirection = 'horizontal' | 'vertical'; /** * 步骤条尺寸 */ export declare type StepSize = 'small' | 'default' | 'large'; /** * 标签放置位置 */ export declare type StepLabelPlacement = 'horizontal' | 'vertical'; /** * 单个步骤项配置 */ export interface PisellStepItem extends Omit { /** * 步骤标题 */ title?: ReactNode; /** * 步骤副标题 */ subTitle?: ReactNode; /** * 步骤描述 */ description?: ReactNode; /** * 步骤状态 * @default 'wait' */ status?: StepStatus; /** * 步骤图标 */ icon?: ReactNode; /** * 是否禁用点击 * @default false */ disabled?: boolean; /** * 是否隐藏该步骤(用于动态步骤) * @default false */ hidden?: boolean; /** * 步骤点击回调 */ onClick?: () => void; /** * 自定义类名 */ className?: string; /** * 自定义样式 */ style?: CSSProperties; /** * 额外的数据(可用于业务扩展) */ extra?: Record; } /** * PisellSteps 组件 Props */ export interface PisellStepsProps extends Omit { /** * 步骤条类型(直接使用 antd 的 type) * @description 'default' - 默认样式,'navigation' - 导航样式 * @description dot 模式通过 progressDot 属性来控制,不需要单独的 type * @default 'default' */ type?: StepsProps['type']; /** * 当前步骤(受控模式) */ current?: number; /** * 默认当前步骤(非受控模式) * @default 0 */ defaultCurrent?: number; /** * 步骤条方向 * @default 'horizontal' */ direction?: StepDirection; /** * 步骤条尺寸 * @default 'default' */ size?: StepSize; /** * 当前步骤的状态 * @default 'process' */ status?: StepStatus; /** * 起始步骤索引 * @default 0 */ initial?: number; /** * 步骤数据配置 */ items?: PisellStepItem[]; /** * 标签文本位置(标识区和文本区的布局方式) * @description 'horizontal' - 文本在图标右侧(水平布局),'vertical' - 文本在图标下方(垂直布局) * @description 仅在 direction='horizontal' 时生效 * @default 'horizontal' */ labelPlacement?: StepLabelPlacement; /** * 是否开启响应式 * @default true */ responsive?: boolean; /** * 步骤变更回调 */ onChange?: (current: number) => void; /** * 自定义类名 */ className?: string; /** * 自定义样式 */ style?: CSSProperties; /** * 点状步骤条是否显示点(也可以传入自定义渲染函数) * @default false */ progressDot?: boolean | ((dot: ReactNode, info: { index: number; status: StepStatus; title?: ReactNode; description?: ReactNode; }) => ReactNode); /** * 是否允许点击步骤切换 * @default false */ clickable?: boolean; /** * 是否允许点击已完成的步骤 * @default true */ allowClickFinished?: boolean; /** * 是否开启栅格布局 * @default false */ gridLayout?: boolean; /** * 栅格列数(仅在 gridLayout=true 时有效) */ gridColumns?: number; /** * 标识区和文本区的间距(单位:px) * @description 控制图标和文本之间的间距 */ itemGap?: number; /** * 是否开启锚链接 * @default false */ enableAnchor?: boolean; /** * 锚链接容器选择器(仅在 enableAnchor=true 时有效) */ anchorContainer?: string | HTMLElement; /** * 移动端显示模式 * - 'full': 显示完整步骤条(默认) * - 'current': 只显示当前步骤信息 * - 'auto': 自动根据屏幕宽度切换(<744px 时显示当前步骤) * @default 'full' */ mobileMode?: 'full' | 'current' | 'auto'; /** * 移动端断点宽度(单位:px) * @default 744 */ mobileBreakpoint?: number; /** * 是否启用横向滚动模式 * @description 当步骤条宽度不足时,启用横向滚动并显示左右箭头按钮 * @default false */ enableScrollMode?: boolean; /** * 滚动箭头配置 * @description 配置滚动箭头的显示类型和滚动距离 */ scrollActionsConfig?: ScrollActionsConfig; /** * 设计模式标识(低代码引擎使用) */ __designMode?: 'design' | 'preview'; /** * 组件唯一标识(低代码引擎使用) */ __id?: string; /** * 其他扩展配置 */ other?: Record; } /** * 步骤点击事件参数 */ export interface StepClickInfo { /** * 步骤索引 */ index: number; /** * 步骤配置 */ item: PisellStepItem; /** * 步骤状态 */ status: StepStatus; /** * 是否可点击 */ clickable: boolean; } /** * 步骤变更事件参数 */ export interface StepChangeInfo { /** * 当前步骤索引 */ current: number; /** * 上一个步骤索引 */ previous: number; /** * 步骤变更方向 */ direction: 'forward' | 'backward'; }