Steps 步骤条
引导用户按流程完成任务的步骤指示器，支持等待 / 进行中 / 完成 / 错误四种状态、纵向排布与可点击跳转。
基础用法
进行中
完成态
全部完成
初始步骤
初始等待
四种状态
通过每步的 status 字段显式指定状态：wait 等待（次要色 + 序号）、process 进行中（主色 + 序号）、finish 完成（成功色 + ✓）、error 错误（危险色 + ✕）。
wait / process / finish / error
可点击切换
clickable 开启后步骤项可点击跳转（整项可点，Enter/Space 键盘可达），点击派发 oas-change（detail 为 { index }）并切换当前步。
点击步骤切换当前步
带图标步骤
通过每步的 icon 字段（内置图标名 键）在指示器位置渲染图标，显式 icon 优先于状态默认图标（序号 / ✓ / ✕）；icon 无匹配时不渲染，回落状态默认图标。
图标步骤
线性模式
linear 开启后（配合 clickable/navigation）仅允许点击 index <= current 的步骤：已过步骤可回跳、当前步可停留，未来步骤禁点且点击静默（不派发 oas-change）。
线性模式（禁跳步）
标签横排
label-placement="horizontal" 将标题与图标同行排布（图标左、标题右），连接线对准图标中心；默认 vertical 保持图标在上、标题在下。
标签横排
禁用步骤
通过每步的 disabled 字段禁用步骤：clickable/navigation 下禁点（无按钮语义、键盘跳过）、视觉弱化（弱化色 token）；显式 status 仍正常显示。
禁用步骤
点状步骤
progress-dot 将步骤指示器切换为圆点（当前步圆点放大并带柔光晕），连线为细线；配合 clickable 圆点可点击跳转（含键盘）。
点状步骤
导航模式
navigation 将步骤切换为箭头导航条：当前步骤主色高亮、前序步骤浅主色、等待步骤灰色，描述隐藏；步骤项隐式可点（无需 clickable）。底部提供「上一步 / 下一步」按钮（首步/末步对应禁用），点击步骤或按钮都会派发 oas-change（detail 为 { index }）并切换当前步。
导航模式（上一步 / 下一步）
无描述
仅标题
纵向
纵向方向
容器状态
status 属性（wait / process / finish / error）覆盖 current 推导的「当前步」状态，适合「全流程标错 / 当前步完成」等容器级场景；每步显式 status 仍最高优先。
容器 status 覆盖当前步
操作提示
每步的 extra 字段在描述下方渲染一行弱化小字操作提示（textContent 渲染，禁 HTML 注入）。
extra 操作提示
步骤标识回传
每步的 id 字段随 oas-change 事件回传（detail: { index, id? }）；未设置 id 时 detail 保持 { index }（向后兼容）。
oas-change 回传 id
跳步拦截
oas-before-change 事件（cancelable）：点击可点击步骤、键盘 Enter/Space 或导航上一步/下一步按钮跳步前派发，detail: { index }；宿主 preventDefault() 可取消本次跳转。适合「有未保存修改时阻止跳步」场景。
oas-before-change 拦截
加载中
每步的 loading 字段在指示器位置显示 CSS 旋转圈（走 token），显式 icon / 序号 / 进度环让位 loading。
loading 步骤
可选步骤
每步的 optional 字段在标题旁渲染弱化「可选」文案（走 i18n：中文「可选」/ 英文「Optional」，随 locale 切换）。
optional 可选标记
无连接线
lineless 隐藏全部连接线（紧凑形态，保留指示器与状态色）。
lineless 无连接线
紧凑模式
simple 紧凑模式：单行小尺寸（指示器缩小、描述隐藏、连接线贴紧），与 progress-dot / navigation 互斥（simple 优先）。
simple 紧凑模式
连接线形态
separator 控制连接线形态：line（默认实线）/ dashed（虚线）/ arrow（末端箭头三角）。
separator 三形态
进度环
每步的 percent（0-100）仅在 process 步生效：指示器显示进度圆环（SVG circle stroke-dasharray，走 token），序号让位；非 process 步忽略。
percent 进度环
窄屏自动纵向
responsive 开启后，容器宽度小于 640px 时自动按纵向布局渲染（ResizeObserver 监听，断连自动清理）；显式 direction 设置时 responsive 优先，navigation 强制横向保持不变。
responsive 窄屏转纵向
拖动容器右下角缩放到 640px 以下，步骤自动转为纵向布局。
自定义编号
每步的 prefix 字段在指示器位渲染自定义编号文本（如「A」「01」）替代默认序号；优先级：显式 icon > prefix > 默认序号；finish / error 的 ✓/✕ 不受影响（textContent 渲染，禁 HTML 注入）。
prefix 自定义编号
中段折叠
max-count（最小 2）限制可见步骤数：超出时中段折叠为「省略步」（⋯，不可点、连接线连续），首步、末步与当前步恒可见，窗口随 current 平移；非法值 / 小于 2 忽略（全量显示）。
max-count 折叠（点击步骤观察窗口平移）
倒序
reverse 视觉倒序（横向 row-reverse / 纵向 column-reverse）：编号显示 = 总数 - index（视觉流向递增）；状态推导仍按 steps 数组序，oas-change 回传数组 index 不变。
reverse 倒序（横向 / 纵向）
内容右侧
content-placement="right"（横向模式，默认 bottom）将标题 / 描述 / 提示整体置于指示器右侧；纵向忽略（纵向本身即图标左 / 内容右）；与 label-placement 正交。
content-placement 内容右侧
箭头分格
arrow 箭头分格形态（横向专用）：每项 clip-path 箭头分格（首项平头、相邻凹凸衔接），激活主色填充 / 完成浅主色 / 等待灰；连接线隐藏（分格自衔接）；与 simple 互斥（simple 优先）、navigation 下忽略。
arrow 箭头分格（含 error 态）
箭头分格自定义
arrow 分格的几何与配色均走 CSS 变量开口：--oas-steps-arrow-gap 控制分格块间距（设 0 时凹凸互嵌贴边，相邻块靠颜色区分）、--oas-steps-arrow 控制凸尖水平深度（深度越大凸尖越钝、夹角越小）、--oas-steps-arrow-item-bg-N（N=1..8）逐格覆盖背景色（按 DOM 位置生效，未设回落状态色；超过 8 步回落状态色）。
自定义间距与每块颜色（gap 0 互嵌贴边）
自定义间距（gap 大于 0，块间留空隙）
箭头深度 / 角度对比
形态组合
组合语义：simple 优先于 progress-dot / navigation（simple 下点状与导航形态让位）；navigation 下 responsive 转纵向忽略（导航强制横向的现状保持）。
组合：simple + progress-dot
组合：navigation + responsive（窄屏仍强制横向）
尺寸档位
size 五档字号密度（xs / small / medium / large / xl，sm/md/lg 别名等价，缺省 medium）：档位只动标题 / 描述 / 序号字阶，指示器与连接线几何恒定；非法值回落 medium 并告警一次。
五档 size
API
oas-steps
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
arrow | 箭头分格形态（横向专用）：每项 clip-path 箭头分格（首项平头、相邻凹凸衔接），激活主色填充 / 完成浅主色 / 等待灰，连接线隐藏（布尔，存在即开启；与 simple 互斥，simple 优先；navigation 下忽略） | boolean | — |
clickable | 步骤可点击跳转（布尔，存在即开启） | boolean | — |
content-placement | 内容块位置：bottom（默认，标题/描述在指示器下方）/ right（整体置于指示器右侧，横向模式）；纵向忽略；与 label-placement 正交 | string | — |
current | 当前步骤索引（0 起） | string | 0 |
direction | 方向（导航模式下强制横向；responsive 窄屏时优先转纵向） | string | horizontal |
label-placement | 标签排布：vertical（默认，图标上/标题下）/ horizontal（图标左/标题右同行） | string | — |
linear | 线性模式：仅允许点击 index <= current 的步骤（布尔，存在即开启；未来步禁点，点击静默） | boolean | — |
lineless | 隐藏全部连接线（布尔，存在即开启；紧凑形态） | boolean | — |
max-count | 可见步骤数上限（最小 2）：超出时中段折叠为省略步（⋯，不可点、连接线连续），首/末/当前步恒可见，窗口随 current 平移；非法值 / 小于 2 忽略（全量显示） | string | — |
navigation | 导航模式：箭头导航条 + 底部上一步/下一步按钮（布尔，存在即开启；与 simple 互斥，simple 优先） | boolean | — |
progress-dot | 点状步骤：指示器为圆点、连线为细线（布尔，存在即开启；与 simple 互斥，simple 优先） | boolean | — |
responsive | 窄屏自动纵向：容器宽度 < 640px 时按 vertical 布局渲染（布尔，存在即开启；ResizeObserver 监听，断连自动清理；navigation 下忽略） | boolean | — |
reverse | 视觉倒序：横向 row-reverse / 纵向 column-reverse；编号显示 = 总数 - index（视觉流向递增），状态推导仍按 steps 数组序（布尔，存在即开启） | boolean | — |
separator | 连接线形态：line（默认）/ dashed（虚线）/ arrow（末端三角）；navigation / arrow 下不生效 | string | — |
simple | 紧凑模式：单行小尺寸（指示器缩小、描述隐藏、连接线贴紧）（布尔，存在即开启；优先于 progress-dot/navigation） | boolean | — |
size | 字号密度五档（指示器/连接线几何恒定；别名等价，非法回落告警） | string | medium |
status | 容器级状态覆盖当前步（wait / process / finish / error）；每步显式 status 仍最高优先 | StepStatus | — |
steps | [{ title, description?, status?, icon?, disabled?, extra?, id?, loading?, optional?, percent?, prefix? }] JSON 字符串 | StepItem[] | string | [] |
事件
| 事件 | 说明 |
|---|---|
oas-before-change | 跳步前派发（cancelable，detail: { index }）；宿主 preventDefault() 可取消本次跳转（步骤点击/键盘/导航按钮均生效） |
oas-change | 点击可点击步骤或导航按钮时触发（含键盘触发）；detail: { index, id? }（0 起，id 为步骤 id 字段回传，未设置时保持 { index }） |
CSS 变量
| CSS 变量 | 说明 | 默认值 |
|---|---|---|
--oas-steps-arrow | 箭头段凸角水平深度（越大越钝），与 clip-path 多边形绑定 | 10px |
--oas-steps-arrow-gap | 箭头段间距；0 时首尾咬合 | 0px |
--oas-steps-arrow-item-bg-{1..8} | 按段覆盖背景色（按 DOM 位置生效，非数据索引）；超过 8 段回落状态色 | — |
--oas-steps-item-bg | 当前状态的段背景色（按状态 color-mix） | var(--oas-color-bg-hover) |
状态规则：显式 status（wait / process / finish / error）优先；未指定时按 current 推导——索引 < current 为 finish（✓），=== current 为 process，其余为 wait。