时间线

timeline

五档语义色圆点 + 连接线，时间右对齐 tabular-nums。

示例

构建完成10:24

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

发布到预发环境10:31

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

发现一处视觉回归10:46

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

重新发布11:20

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

<div class="timeline">
  <div class="timeline-item">
    <div class="timeline-dot timeline-dot--success"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg></div>
    <div class="timeline-body">
      <div class="timeline-head"><span class="timeline-title">构建完成</span><span class="timeline-time">10:24</span></div>
      <p class="timeline-desc">dist 产物 18 个文件，耗时 42 秒。</p>
    </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-dot timeline-dot--accent"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg></div>
    <div class="timeline-body">
      <div class="timeline-head"><span class="timeline-title">发布到预发环境</span><span class="timeline-time">10:31</span></div>
      <p class="timeline-desc">预发域名已更新，开始回归验证。</p>
    </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-dot timeline-dot--warning"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg></div>
    <div class="timeline-body">
      <div class="timeline-head"><span class="timeline-title">发现一处视觉回归</span><span class="timeline-time">10:46</span></div>
      <p class="timeline-desc">暗色模式下卡片描边对比度偏低，已回滚待修。</p>
    </div>
  </div>
  <div class="timeline-item">
    <div class="timeline-dot timeline-dot--info"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg></div>
    <div class="timeline-body">
      <div class="timeline-head"><span class="timeline-title">重新发布</span><span class="timeline-time">11:20</span></div>
      <p class="timeline-desc">修复后全量生效，监控指标正常。</p>
    </div>
  </div>
</div>

安装

bun add @icen.ai/ui
import '@icen.ai/ui/components/content.css';

用法

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