ICEN UI
ICEN UI 时间线
Docs ⌘K
Core · 稳定

时间线

时间线：语义色圆点 + 连接线，时间右对齐等宽数字。

Preview
数据展示 timeline
构建完成10:24

dist 产物 18 个文件，耗时 42 秒。

发布到预发环境10:31

预发域名已更新，开始回归验证。

发现一处视觉回归10:46

暗色模式下卡片描边对比度偏低，已回滚待修。

重新发布11:20

修复后全量生效，监控指标正常。

html
<div class="icen-timeline">  <div class="icen-timeline-item">    <div class="icen-timeline-dot icen-timeline-dot--success"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0ZM6 10l2.7 2.7 5.3-5.4"></path></svg></div>    <div class="icen-timeline-body">      <div class="icen-timeline-head"><span class="icen-timeline-title">构建完成</span><span class="icen-timeline-time">10:24</span></div>      <p class="icen-timeline-desc">dist 产物 18 个文件，耗时 42 秒。</p>    </div>  </div>  <div class="icen-timeline-item">    <div class="icen-timeline-dot icen-timeline-dot--accent"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0ZM10 9v5M10 6.1v.15"></path></svg></div>    <div class="icen-timeline-body">      <div class="icen-timeline-head"><span class="icen-timeline-title">发布到预发环境</span><span class="icen-timeline-time">10:31</span></div>      <p class="icen-timeline-desc">预发域名已更新，开始回归验证。</p>    </div>  </div>  <div class="icen-timeline-item">    <div class="icen-timeline-dot icen-timeline-dot--warning"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M8.7 3.5a1.5 1.5 0 0 1 2.6 0l6.4 11.3a1.5 1.5 0 0 1-1.3 2.2H3.6a1.5 1.5 0 0 1-1.3-2.2ZM10 7.2v4.4M10 14v.15"></path></svg></div>    <div class="icen-timeline-body">      <div class="icen-timeline-head"><span class="icen-timeline-title">发现一处视觉回归</span><span class="icen-timeline-time">10:46</span></div>      <p class="icen-timeline-desc">暗色模式下卡片描边对比度偏低，已回滚待修。</p>    </div>  </div>  <div class="icen-timeline-item">    <div class="icen-timeline-dot icen-timeline-dot--info"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" focusable="false" class="icen-symbol" aria-hidden="true"><path d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0ZM10 9v5M10 6.1v.15"></path></svg></div>    <div class="icen-timeline-body">      <div class="icen-timeline-head"><span class="icen-timeline-title">重新发布</span><span class="icen-timeline-time">11:20</span></div>      <p class="icen-timeline-desc">修复后全量生效，监控指标正常。</p>    </div>  </div></div>

特性

安装

bun add @icen.ai/ui

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

js
import '@icen.ai/ui/kit/timeline';

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

bash
bunx --bun @icen.ai/ui add timeline

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

用法

html
<div class="icen-timeline">  <div class="icen-timeline-item">    <div class="icen-timeline-dot icen-timeline-dot--success">…svg…</div>    <div class="icen-timeline-body">      <div class="icen-timeline-head"><span class="icen-timeline-title">标题</span><span class="icen-timeline-time">10:24</span></div>      <p class="icen-timeline-desc">描述</p>    </div>  </div></div>