专业版

FaSteps 步骤条

步骤条组件，用于展示流程进度、当前步骤状态和每个步骤的扩展内容。

使用场景

• 分步表单
• 订单流程跟踪
• 审批流程展示
• 向导式配置流程
• 任务执行进度展示

Props

属性	类型	默认值	说明
steps	StepsItem[]	-	步骤列表
status	'error' | 'process' | 'wait' | 'finish'	'process'	当前步骤状态
class	HTMLAttributes['class']	-	自定义 CSS 类

Model

名称	类型	默认值	说明
modelValue	number	0	当前步骤下标，从 0 开始

StepsItem

属性	类型	说明
id	string	步骤唯一标识，也是具名插槽名称
title	string	步骤标题
description	string	步骤描述

Slots

每个步骤都可以通过 steps.id 对应的具名插槽扩展内容。

名称	说明	作用域参数
[steps.id]	指定步骤的扩展内容	step: StepsItem - 当前步骤数据 index: number - 当前步骤下标 status: StepsStatus - 当前步骤最终状态 active: boolean - 是否为当前步骤 finished: boolean - 是否已完成

注意事项

1. 步骤下标：modelValue 从 0 开始，和 steps 数组下标保持一致
2. 状态含义：
   • process：当前步骤进行中，显示步骤序号
   • wait：当前步骤等待中，显示加载图标和呼吸动效
   • finish：当前步骤完成，显示完成图标
   • error：当前步骤异常，显示错误图标
3. 完成态判断：当前步骤之前的步骤会自动视为已完成；当当前步骤 status 为 finish 时，当前步骤也视为已完成
4. 具名插槽：插槽名称来自 steps.id，请确保每个步骤的 id 唯一且适合作为 Vue slot name
5. 样式来源：组件基于 shadcn-vue Stepper 实现，并保留少量状态色和图标映射