分步向导

Wizard

布局模式也叫：分步表单、步骤向导、多步表单、Stepper、Multi-step Form

一句话：把一个较长的操作拆成几个有先后顺序的步骤，每屏只处理一步，顶部步骤条显示进度，用上一步、下一步推进。

详细解释

分步向导把一件复杂的事拆成三到五步，比如「填写基本信息 → 选择套餐 → 确认支付 → 完成」。页面顶部是步骤条，标出当前在第几步、前面哪些已完成；中间只显示当前这一步要填写或选择的内容；底部是「上一步」和「下一步」按钮，最后一步变成「提交」。

这样设计是为了降低心理负担：面对一个有三十个字段的长表单，很多人会直接放弃；拆成几步后，每步只有几个问题，用户知道还剩多少，更容易坚持填完。后面的步骤还可以根据前面的选择动态变化。

它和单页表单的区别是步骤之间有依赖或明确顺序；如果字段没有先后关系、总数也不多，拆成多步只会增加点击次数。它和设置页也不同：设置页是随时回来改某一项，向导通常只从头到尾走一遍。

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

这个开通流程请做成分步向导（Wizard）：顶部步骤条显示「基本信息、选择套餐、确认支付、完成」四步，已完成的步骤显示对勾，当前步骤高亮；中间只显示当前步骤的表单；底部左侧「上一步」、右侧「下一步」。进入下一步前先校验本步字段，返回上一步时保留已填内容，最后一步按钮改为「提交」。

顶部是横向步骤条，中间是当前步骤的内容区（通常是一小段表单），底部是「上一步」「下一步」按钮栏。

插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。