步骤条通过 step prop 控制高亮与连线状态，索引≤step为已完成，=step为进行中，连线渲染至 step-1；可选 status prop 支持 pending/processing/success/error 多态语义；父组件驱动流程校验与跳转，确保受控性与业务一致性。
步骤条组件的当前进度控制，核心是通过 Props 传递当前所处步骤（如 step=2），再结合内部状态或纯渲染逻辑高亮对应节点、激活连线、禁用后续操作——不依赖内部 state，保持受控性。
用 step Prop 控制高亮与连线状态
将当前步骤作为数字型 prop（如 step: number）传入组件。组件遍历所有步骤配置，对每个步骤判断：
• 若索引（从 1 开始）小于等于 step，标记为“已完成”（绿色图标、粗体文字）；
• 若等于 step，额外添加“进行中”样式（如蓝色边框、脉冲动画）；
• 连线部分只渲染到 step - 1，避免画出超出当前进度的虚线。
用 status Prop 区分多态语义（可选增强）
仅靠 step 数字有时不足以表达业务状态（例如：第 3 步已提交但待审核）。此时可增加 status prop，接受如 'pending' | 'processing' | 'success' | 'error'。组件据此调整图标、文字提示和交互行为：
• status="processing" → 第 3 步显示加载中 spinner；
• status="error" → 第 3 步变红 + 显示重试按钮；
• 其余步骤仍按 step 判断是否可点击（如 error 状态下允许返回上一步修改）。
配合父组件实现流程驱动与防误操作
步骤条本身不管理跳转逻辑，而是由父组件控制 step 变更，并在变更前校验业务条件：
• 点击“下一步”时，父组件先调用 API 提交当前表单，成功后再 setStep(prev => prev + 1)；
• 点击某一步骤标题跳转时，检查 targetStep （仅允许回退或前进 1 步），或根据权限字段动态判断是否可跳转；<br>• 所有按钮的 <code>disabled 状态由父组件计算后透传给步骤条子组件（如 nextDisabled={isSubmitting || !canNext}）。
响应式与无障碍支持要点
确保传入的 step 值始终合法（如 1 ≤ step ≤ totalSteps），并在组件内做防御性处理：
• step 超出范围时自动截断并 warn；
• 为每个步骤项添加 aria-current={step === index ? 'step' : undefined} 和 tabIndex={step >= index ? 0 : -1}；
• 移动端小屏下可折叠未完成步骤，仅显示“当前：填写申请”，点开才展开全部，该行为也由父组件通过 compact prop 控制。
业务流转中，步骤条不是装饰品——它是流程状态的可视化契约。Props 是它与业务逻辑握手的唯一接口，稳、准、可预测，才是实战落地的关键。
