步骤条

三态 finish / process / wait，连接线颜色跟随已完成步骤；横向与垂直共用同一 DOM，仅容器加 .steps--vertical。

✓

注册账号

邮箱验证通过
✓

实名认证

审核已完成
3

填写资料

正在进行
4

完成

等待前序步骤

✓

创建项目

仓库初始化完成
2

配置流水线

正在编辑 .cnb.yml
3

部署上线

等待触发

<ol class="steps">  <li class="step step--finish">    <span class="step-line"></span>    <span class="step-dot">✓</span>    <div class="step-body">      <div class="step-title">注册账号</div>      <div class="step-desc">邮箱验证通过</div>    </div>  </li>  <li class="step step--finish">    <span class="step-line"></span>    <span class="step-dot">✓</span>    <div class="step-body">      <div class="step-title">实名认证</div>      <div class="step-desc">审核已完成</div>    </div>  </li>  <li class="step step--process">    <span class="step-line"></span>    <span class="step-dot">3</span>    <div class="step-body">      <div class="step-title">填写资料</div>      <div class="step-desc">正在进行</div>    </div>  </li>  <li class="step step--wait">    <span class="step-line"></span>    <span class="step-dot">4</span>    <div class="step-body">      <div class="step-title">完成</div>      <div class="step-desc">等待前序步骤</div>    </div>  </li></ol><ol class="steps steps--vertical" style="margin-top:20px">  <li class="step step--finish">    <span class="step-line"></span>    <span class="step-dot">✓</span>    <div class="step-body">      <div class="step-title">创建项目</div>      <div class="step-desc">仓库初始化完成</div>    </div>  </li>  <li class="step step--process">    <span class="step-line"></span>    <span class="step-dot">2</span>    <div class="step-body">      <div class="step-title">配置流水线</div>      <div class="step-desc">正在编辑 .cnb.yml</div>    </div>  </li>  <li class="step step--wait">    <span class="step-line"></span>    <span class="step-dot">3</span>    <div class="step-body">      <div class="step-title">部署上线</div>      <div class="step-desc">等待触发</div>    </div>  </li></ol>

安装

bun add @icen.ai/ui

pnpm add @icen.ai/ui

npm install @icen.ai/ui

yarn add @icen.ai/ui

一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：

import '@icen.ai/ui/kit/steps';

也可以用脚手架直接打印引入行：

bunx --bun @icen.ai/ui add steps

Astro 项目注意：kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS（import '@icen.ai/ui/components/steps.css';），JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。

用法

<ol class="steps">  <li class="step step--finish">    <span class="step-line"></span>    <span class="step-dot">✓</span>    <div class="step-body">      <div class="step-title">已完成</div>      <div class="step-desc">描述</div>    </div>  </li>  <li class="step step--process">…</li>  <li class="step step--wait">…</li></ol>