用途:Form Wizard Builder 是一套多步骤表单(向导)实现方案,适合把较长表单拆成若干逻辑分区,分步填写并在提交前复核。
主要能力:按步骤拆分表单;为每步定义 Zod/Yup 校验模式;为每步创建独立组件;用 Zustand(含 persist 中间件)或 Context 管理跨步共享状态;提供下一步、上一步、跳过导航与视觉进度指示;设置复核/摘要步骤;逐步校验与最终校验的错误处理;用 localStorage 或服务端保存进度。
使用方式:先定义步骤(如 personal、contact、preferences、review 及其 schema),用 Zod 编写每步及整体校验模式;用 useWizardStore 管理 currentStep、data、completedSteps、isSubmitting,并实现 updateStepData、markStepComplete、nextStep、prevStep、resetWizard、submitWizard;步骤组件用 react-hook-form 配合 zodResolver 校验,提交后写入共享状态并进入下一步;ProgressIndicator 依据 currentStep 渲染完成、当前、未完成三态;ReviewStep 汇总数据并提供返回编辑与最终提交。
适用场景:注册、申请、开户、问卷等需要分步采集与提交前确认的 React 前端表单。
限制与注意:资料未提供安装命令、具体版本、收费信息或可安装包说明,暂未提供;示例代码中 nextStep、setCurrentStep((prev)=>prev-1) 等处依赖未完整展示的变量或类型,直接使用需自行调整;本地持久化需处理好数据的加载还原。