Bootstrap响应式步骤进度指示器：状态变化与图标展示实现

只有 aria-current 能准确驱动状态切换图标。结构应采用 nav+ol 语义标签和 href 锚点导航，通过CSS伪元素绘制图标与动态连线，用tabindex="-1"禁用尚未激活的项目，并结合表单校验确保进度状态和数据始终一致。

用 na v+ol 搭语义结构，不是 div 堆砌

步骤条本质上是导航控件，不是拿来点缀界面的装饰。外层必须用 包住

，而且每一步都要写成
1. 账户设置
。这里的 href 一定要准确指向对应锚点，不然浏览器的前进/后退记录会失灵，连键盘上的 Tab 导航也会跟着断掉。
常见问题也很典型：比如服务端渲染时忘了传 aria-current，结果 React/Vue hydrate 之后步骤状态直接错位；再比如用 disabled 去禁用未激活项，看起来省事，实际上会让键盘焦点把整一步直接跳过去。

图标用 ::before 伪元素生成，靠属性选择器切换

所有状态图标（圆点、对勾、数字）必须由 CSS 生成，不能插 或 SVG —— 否则小屏缩放时基线偏移、文字折行后图标错位。
关键样式规则：

• .na v-link::before { content: ""; display: inline-block; width: 1.25rem; height: 1.25rem; border-radius: 50%; margin-right: 0.5rem; vertical-align: middle; }
• [aria-current="step"]::before { background-color: #0d6efd; }（当前步主色）
• [aria-current="true"]::before { content: "✓"; color: #198754; font-weight: bold; }（已完成，用字符比 SVG 更稳）
• :not([aria-current])::before { content: counter(step); counter-increment: step; }（未开始步自动编号）

移动端记得加 @media (max-width: 576px) { .na v-link::before { width: 1rem; height: 1rem; } }，防图标撑高行距。

连线用 border-right+flex-grow，别碰 transform 或固定宽度

横排时连接线必须动态伸缩，否则断点切换后线条断裂或重叠。
正确写法：

• 只在非末项画线：.na v-item:not(:last-child) .na v-link { border-right: 2px solid #e9ecef; flex-grow: 1; }
• 确保父容器是 d-flex，且 .na v-item 设 flex: 1 或 min-width: 0 防文字撑宽
• 小屏竖排时切到 border-bottom：@media (max-width: 576px) { .na v-item:not(:last-child) .na v-link { border-right: none; border-bottom: 2px solid #e9ecef; margin-bottom: 1rem; } }
• 禁用未激活项时，加 tabindex="-1" + pointer-events: none + opacity: 0.6，不砍键盘流

状态变化必须跟随表单校验，不能仅更新 UI

用户点“下一步”时，如果只更新 aria-current 而不校验字段，就会出现“进度走到第 3 步，但第 2 步邮箱为空”的逻辑断裂。
真实流程必须：

• 点击事件里调用 checkStepValidity()，逐字段检查 input.checkValidity()
• 校验失败时，input.focus() 定位到第一个无效项，不是弹 alert
• “下一步”按钮设 disabled = true 直到当前步通过，不是仅加 opacity
• 含异步校验（如用户名可用性）时，按钮进 loading 状态并设 disabled 防重复提交

最易被忽略的点：状态图标颜色和连线长度看似是样式问题，实则是可访问性和表单完整性的一体两面——aria-current 不准，图标就不可读；校验不同步，进度就是假象。