开发预览更新于 2026-05-10

Timeline 时间轴

顺序事件流，每条带圆点 / 连线 / 时间戳，常用于变更日志、流水审计、版本发布。

基础用法

items 数组每一项为一个节点，color 控制圆点颜色（primary / success / warning / danger / neutral）。

背景

提交了 PR #128
2026-05-08 10:14
CI 通过
构建 / 测试 / 类型检查全部通过
2026-05-08 10:18
触发 staging 部署
2026-05-08 10:30
收到性能回归告警
/api/list P99 上升 220ms
2026-05-08 11:02
回滚到上一版本
2026-05-08 11:08

<script setup lang="ts">
import { CfTimeline, type TimelineItem } from '@chufix-design/vue';

const items: TimelineItem[] = [
  { title: '提交了 PR #128', time: '2026-05-08 10:14', color: 'primary' },
  { title: 'CI 通过', content: '构建 / 测试 / 类型检查全部通过', time: '2026-05-08 10:18', color: 'success' },
  { title: '触发 staging 部署', time: '2026-05-08 10:30', color: 'primary' },
  { title: '收到性能回归告警', content: '/api/list P99 上升 220ms', time: '2026-05-08 11:02', color: 'warning' },
  { title: '回滚到上一版本', time: '2026-05-08 11:08', color: 'danger' },
];
</script>

<template>
  <div style="max-width: 28rem;">
    <CfTimeline :items="items" />
  </div>
</template>

<script setup>
import { CfTimeline } from '@chufix-design/vue';

const items= [
  { title: '提交了 PR #128', time: '2026-05-08 10:14', color: 'primary' },
  { title: 'CI 通过', content: '构建 / 测试 / 类型检查全部通过', time: '2026-05-08 10:18', color: 'success' },
  { title: '触发 staging 部署', time: '2026-05-08 10:30', color: 'primary' },
  { title: '收到性能回归告警', content: '/api/list P99 上升 220ms', time: '2026-05-08 11:02', color: 'warning' },
  { title: '回滚到上一版本', time: '2026-05-08 11:08', color: 'danger' },
];
</script>

<template>
  <div style="max-width: 28rem;">
    <CfTimeline :items="items" />
  </div>
</template>

<CfTimeline items={items} />

<CfTimeline items={items} />

API

属性	类型	默认值	说明
`items`	`TimelineItem[]`	`—`	节点列表
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	节点字号与点的尺寸
`mode`	`'left' \| 'right' \| 'alternate'`	`'left'`	内容相对连线的位置
`reverse`	`boolean`	`false`	反序渲染（最新在最上）

TimelineItem

字段	类型	说明
`key`	`string \| number`	唯一标识，用于 v-for / map key
`title`	`string`	主标题
`content`	`string`	详细描述
`time`	`string`	时间戳文本
`color`	`'primary' \| 'success' \| 'warning' \| 'danger' \| 'neutral'`	圆点颜色