步骤条宽度须用响应式内联样式动态计算，如 Vue 的 :style="{ width: ${(current / (steps.length - 1)) * 100}% }"；圆点激活状态应基于索引比较（如 item.id - 1
步骤条的宽度计算必须用 CSS 变量或内联 style
直接写 width: calc((100% / (n - 1)) * current) 在 Tailwind 中不可行——calc() 不支持动态变量，且 Tailwind 的 w-1/2 类不响应 JS 状态。常见错误是硬编码固定宽度（如 w-1/3），导致步骤数一变就错位。
正确做法是用 Vue/React 的响应式状态驱动 :style 或 style={{}} 动态设置进度条宽度：
- Vue：用
:style="{ width: `${(current / (steps.length - 1)) * 100}%` }" - React：用
style={{ width: `${(current / (steps.length - 1)) * 100}%` }} - 纯 HTML/CSS？只能靠 JS 操作
element.style.width，无法用 Tailwind 原生实现
步骤圆点的激活状态要靠索引比较，不是布尔值
很多人把步骤状态存成 active: true/false 数组，结果每次切换都要手动维护所有项的布尔值，极易出错。Tailwind 样式绑定应基于当前索引与步骤 ID 的数值关系，而不是额外维护状态。
例如，步骤数组是 [{id: 1}, {id: 2}, {id: 3}]，当前 current = 1（即第 2 步），那么第 1、2 个圆点要高亮：
- Vue：
item.id - 1 - React：
index - 注意：
id - 1是为了对齐 0 起始的current值，漏掉这个偏移会整体错一位
按钮禁用逻辑必须同步更新 DOM 属性和样式
只用 :disabled 绑定或只改 class 都不够。用户仍可聚焦、按空格触发，或者屏幕阅读器无法感知禁用状态。
必须同时做两件事：
- 给
加:disabled="current === 0"（Vue）或disabled={current === 0}（React） - 用 class 控制视觉反馈，比如
cursor-not-allowed opacity-50 - 别忘了加
type="button"，防止表单意外提交
移动端适配的关键是 flex 布局 + overflow 控制
步骤多时（比如 10 步），在小屏上横向挤爆是常态。Tailwind 默认不处理溢出，flex 容器会把圆点全压扁。
解决方式不是删步骤，而是控制容器行为：
- 外层加
overflow-x-auto pb-1允许水平滚动 - 步骤圆点用
flex-shrink-0防止被压缩 - 进度条本身保持
absolute定位，不参与 flex 流，避免被 scroll 影响 - 慎用
whitespace-nowrap—— 它会让文字撑宽容器，反而加剧溢出
最常被忽略的是步骤 ID 与索引的映射关系：一旦步骤数组不是从 1 连续递增（比如跳了 id=4），item.id - 1 就会失效。这时候得换用数组索引或预处理生成有序步骤序列。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
