步骤条

Steps

UI 组件也叫：Stepper、进度步骤、流程条、分步指示器

一句话：用一排带编号的节点和连线，显示一个多步骤流程的全部步骤，以及用户当前做到了第几步。

详细解释

步骤条把一个较长的任务拆成几步，横向或纵向排出「1 填写信息 → 2 确认订单 → 3 完成支付」。已完成的步骤打勾，当前步骤高亮，未开始的步骤置灰，用户一眼就能看出总共几步、还剩多少。

它和标签页的关键区别是顺序：步骤条的各步有先后依赖，通常要完成当前步骤并通过校验才能进入下一步；标签页的各块内容互相独立，可以随意切换。它也不同于面包屑，面包屑表示页面在网站里的层级位置，不表示进度。

步骤以 3~5 步为宜。步骤条只负责展示进度，真正的「上一步」「下一步」按钮一般放在表单底部。

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

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

在分步表单顶部放一个横向步骤条，共三步：「填写信息」「确认订单」「完成支付」。已完成的步骤显示对勾，当前步骤用深色实心圆和加粗文字，未开始的为灰色空心圆，步骤之间用细线连接。当前步骤校验通过后才能点「下一步」，已完成的步骤可点回去修改。

由若干步骤节点（序号或图标、标题、可选说明）和节点之间的连接线组成，每个节点有已完成、进行中、未开始三种状态。

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