n-steps 步骤条
任务流程 / 进度回显组件：一组有序步骤展示当前进行到哪一步、哪些已完成、哪一步出错。适用下单流程、开通引导、审批进度等场景。数据驱动（list），当前步 model-value 是纯显示值——点击某步只上报 click，是否推进由业务决定。
- 节点三档：默认内部 n-icon 渲染（已完成/当前步
active-icon、等待步inactive-icon、错误步error-icon）；dot开圆点极简形态；#icon作用域插槽全定制（参数item/index/status，数字盘、图片、自绘视图在此实现）。item.icon/item.activeIcon逐项覆盖等待态与到达态图标名。标题与描述同构：#title/#desc作用域插槽（参数同上，富内容如「标题 + 状态小标签」）优先于item.title/item.desc字符串字段- 状态判定：步序 <
model-value为已完成、等于为当前步（标题加粗）、大于为等待；item.error显式标记错误步（优先于位置判断，任意步可标）。model-value越界按比较语义自然处理（-1 = 全部等待，≥ 步数 = 全部到达）- 连接线按段上色：终点步已到达的段渲到达色（
active-color），其中终点步带 error 的段渲错误色（error-color），其余段渲中性线色；行向首步左侧 / 末步右侧为透明占位段，保持节点在各项内居中- 竖向步距
gap挂在文字区底部（末步不占），节点列随项高拉伸，连线从节点下方连续延伸到下一步节点
平台兼容性
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | × | × | × | × |
API
属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| list | 步骤数据源（title / desc / error / icon / activeIcon 字段说明见 NStepsItem） | Array | [] | - |
| model-value | 当前步下标（0 起）：步序 < 它为已完成、等于它为当前步；纯显示值，点击不改写（click 交业务推进） | Number | 0 | - |
| direction | 排列方向：row 横向（步骤平分整行、标题居中）/ column 竖向（节点列 + 右侧标题描述） | String | row | row / column |
| dot | 圆点模式：全部节点渲小圆点（#icon 插槽优先级更高，提供插槽时本项不生效） | Boolean | false | - |
| icon-size | 图标节点边长 px（也是列向标题行高与节点列宽的对齐基准，小于 8 按 8 处理） | Number | 20 | - |
| gap | 竖向步距 px：相邻两步的间距（仅 column 生效，末步不带；挂文字区底部，节点列随项高拉伸使连线连续到下一步节点） | Number | 32 | - |
| active-color | 到达色：已完成/当前步图标、标题与已到达连线段的颜色；空串取品牌色主题令牌 | String | "" | 与 css 相同 |
| inactive-color | 等待色：等待步图标、圆点与未到达连线段的颜色；空串取主题次级文字/线色令牌 | String | "" | 与 css 相同 |
| error-color | 错误色：错误步图标、标题与到达该步连线段的颜色；空串取错误色主题令牌 | String | "" | 与 css 相同 |
| active-icon | 到达态图标名：已完成步与当前步的节点图标（内部 n-icon 渲染；item.activeIcon 逐项覆盖） | String | check-circle-fill | n-icon 名称 |
| inactive-icon | 等待态图标名：等待步的节点图标（内部 n-icon 渲染；item.icon 逐项覆盖） | String | check-circle | n-icon 名称 |
| error-icon | 错误态图标名：错误步（item.error）的节点图标 | String | close-circle-fill | n-icon 名称 |
| custom-class | 挂到根节点的额外 class（类需定义在组件样式表内） | String | "" | - |
| custom-style | 根节点行内样式，如 "margin-top:8px" | String | "" | 与 css 相同 |
NStepsItem 字段
| 字段 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 步骤标题；空串时不渲染标题行（节点与连线照常） | String | "" |
| desc | 步骤描述：标题下方次级说明文字，空串不渲染 | String | "" |
| error | 错误步：节点改渲 error-icon、标题转 error-color、到达该步的连线段转错误色（不限当前步，任意步可标记） | Boolean | false |
| icon | 等待态图标名（n-icon 名称）：覆盖组件级 inactive-icon，仅该步生效 | String | - |
| activeIcon | 到达态图标名（n-icon 名称）：覆盖组件级 active-icon，仅该步的已完成/当前态生效；缺省回落 icon 再回落组件级 | String | - |
事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击步骤项时触发，参数为 { item, index }；是否推进当前步由业务决定（组件不改写 model-value） |
插槽
| 插槽名 | 说明 |
|---|---|
| icon | 节点内容（每步一个实例，作用域参数 item / index / status）：提供后覆盖 dot 圆点与内部 n-icon；status 为该步状态（finish / process / wait / error），数字盘、图片、自绘视图按它分支渲染 |
| title | 标题内容（每步一个实例，作用域参数 item / index / status）：提供后本步不再渲染 item.title 文字行（文字色 / 行高等样式由插槽内容自理）；「标题 + 状态小标签」等富内容在此实现 |
| desc | 描述内容（每步一个实例，作用域参数 item / index / status）：提供后本步不再渲染 item.desc 文字行 |
实现说明
- 机制对照（参考实现 vs 本组件）：数据驱动单组件 +
#icon/#title/#desc作用域插槽，替代「容器 + 步骤子组件」的父子注册模型（子组件经 provide/inject 取当前步，弱类型且列表项无类型提示）与「键名映射」（titleKey / textKey 等全动态字段，拼错不报错）两种参考形态；NStepsItem固定字段全类型化。参考实现步骤子组件的三个插槽（自定义标题 / 图标 / 描述）以同构的三个作用域插槽收编（参数 item / index / status 一致，且比原「整步单实例插槽」粒度更细——原实现插槽挂在子组件标签上只能定制该步，本库每步渲染插槽内容并回传该步状态） - 逐项图标尺寸不设 item 级字段：节点盒、竖向节点列宽与标题行高都以组件级
icon-size为对齐基准，逐项尺寸会破坏三者的统一节奏；需要逐项尺寸的节点走#icon插槽自定内容（插槽态不设几何）即是逐项尺寸 - 节点默认形态取图标（到达
check-circle-fill/ 等待check-circle/ 错误close-circle-fill，到达色随主题品牌令牌）；参考实现的数字盘节点不设独立开关——#icon插槽按 status 分支即是数字盘（readme 有完整写法），图片节点同理（插槽内放 n-icon 的 image 模式或 image 组件） - 参考实现「当前步状态机 + 状态色」（wait / fail / success + 专用色）收拢为逐项
error布尔 +error-color：错误是业务显式标记、任意步可标，语义比「仅当前步可标状态」更通用；「进行中」等自绘当前步图形同样走#icon插槽的 status 分支 - 参考实现的「行向进行中半程上色」（当前步右侧连线也上色）不收：连线只表达「已到达」，进行中由节点态与标题加粗表达，避免连线颜色与到达语义混杂；「圆点模式连线贯穿」变体不收（默认连线断在节点两侧，贯穿属低频形态，
#icon插槽可自绘） - 连线粗细不设开关：全线 1px（微信 / H5 半高渲染减重，App 端实心 view 缩放不可靠保持 1px），与 n-divider 同策略；需要更粗的线用
custom-style覆盖根节点背景再自行叠线属过度定制，不在组件面内 - 步骤项内容 + 状态 + 形态签名进
:key：状态翻转 / 圆点切换 / 图标名变化整项销毁重建，绕开 App 端已挂载节点插拔不即时重绘的已知问题（库内既有模式）；标题行高显式 = icon-size（等高行盒，竖向标题与节点垂直居中对齐） model-value是纯显示值：步骤进度是业务过程状态，点击步骤只上报click（两参考实现同构，组件不回写）；需要点击推进的用法见示例代码最后一则