用 flex 布局 + 语义化 ol 实现步骤条，天然支持可访问性；需交互时靠 current 控制状态、事件绑定与键盘导航（Tab/Enter/Space），并同步视觉、DOM、焦点、ARIA 属性。

直接用 flex 布局 + 语义化 ol 结构就能稳住步骤条向导页，不需要 JS 驱动也能表达流程状态；但一旦要支持点击跳转、动态高亮或错误回退，就得靠 current 控制和事件绑定。

用 ol + li 构建语义化步骤结构

步骤条本质是有序操作序列，ol 天然带顺序语义和可访问性（屏幕阅读器能读“第1项，共4项”），比一堆 div 更可靠：

• ol 作为容器，设 display: flex 水平排列子项
• 每个 li 代表一步，内部包含序号圆点（span）、标题（h3 或 p）、连接线（伪元素或额外 div）
• 避免在 li 里塞 position: absolute 覆盖内容——它会破坏语义流和焦点顺序
• 若需响应式换行（如小屏竖排），改用 flex-direction: column 并加 gap 控制间距

用 CSS 变量控制进度状态而非硬编码颜色

手动写 .step--active { background: #007bff; } 看似简单，但换主题或加暗色模式时得全局搜替换。推荐用 CSS 自定义属性统一管理：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 在 :root 定义 --step-active-color、--step-done-color、--step-line-color
• 给 li 添加状态类如 is-done、is-active、is-disabled，再通过属性选择器应用样式
• 连接线用 ::after 伪元素绘制，宽度设为 calc(100% - 18px)（减去圆点半径），避免撑宽父容器
• 注意 Safari 对 flex 子项内 width: 100% 的计算偏差，建议显式设 flex: 0 0 auto 防止拉伸

点击跳转时别忽略 tabindex 和键盘导航

很多步骤条只处理 click，但用户可能用键盘 Tab 切换、Enter 触发——不加可访问性支持，等于默认放弃部分用户：

立即学习“前端免费学习笔记（深入）”；

• 每个可点击的 li 或其内部 button 必须有 tabindex="0"
• 用 role="button" 显式声明交互意图，配合 aria-current="step" 标记当前步
• 禁用状态（如未填完上一步）要同时设 aria-disabled="true" 和 pointer-events: none，否则键盘仍可聚焦但无反馈
• JS 中监听 keydown，对 Enter 和 Space 做相同触发逻辑，别只认 click

真正难的不是画出四步横条，而是让每一步的视觉状态、DOM 属性、焦点行为、键盘响应、屏幕阅读器播报全部同步——漏掉任意一环，都可能在验收时被无障碍测试卡住。