X-Next

Appearance

Timeline 时间线 ​

用于按时间或步骤顺序展示事件进展。

何时使用 ​

  • 展示项目、审批、任务、运维事件等按时间或顺序推进的记录。
  • 展示阶段性状态，并用节点颜色、图标或线型强调关键事件。
  • 需要比 Steps 更偏历史记录和详情描述的场景。

基础用法 ​

2026-05-28
创建文档站
2026-05-29
补齐组件示例
2026-06-02
审查 Timeline
vue
<template>
  <x-timeline>
    <x-timeline-item label="2026-05-28">创建文档站</x-timeline-item>
    <x-timeline-item label="2026-05-29" dot-color="#0f766e">补齐组件示例</x-timeline-item>
    <x-timeline-item label="2026-06-02">审查 Timeline</x-timeline-item>
  </x-timeline>
</template>

倒序展示 ​

09:30
提交需求
11:00
完成评审
16:20
发布修复
vue
<template>
  <x-button size="mini" @click="reverseTimeline = !reverseTimeline">
    {{ reverseTimeline ? '恢复正序' : '切换倒序' }}
  </x-button>
  <x-timeline :reverse="reverseTimeline">
    <x-timeline-item label="09:30">提交需求</x-timeline-item>
    <x-timeline-item label="11:00">完成评审</x-timeline-item>
    <x-timeline-item label="16:20">发布修复</x-timeline-item>
  </x-timeline>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const reverseTimeline = ref(false);
</script>

轴线样式 ​

阶段一
确认范围
阶段二
开发联调
阶段三
灰度发布
检查点
自动化校验
检查点
人工验收
vue
<template>
  <x-timeline line-type="dashed">
    <x-timeline-item label="阶段一">确认范围</x-timeline-item>
    <x-timeline-item label="阶段二">开发联调</x-timeline-item>
    <x-timeline-item label="阶段三">灰度发布</x-timeline-item>
  </x-timeline>

  <x-timeline line-type="dotted">
    <x-timeline-item label="检查点">自动化校验</x-timeline-item>
    <x-timeline-item label="检查点">人工验收</x-timeline-item>
  </x-timeline>
</template>

节点颜色 ​

成功
构建通过
当前
等待复查
失败
发现阻塞问题
vue
<template>
  <x-button size="mini" @click="toggleDotColor">切换当前节点颜色</x-button>
  <x-timeline>
    <x-timeline-item label="成功" dot-color="#16a34a">构建通过</x-timeline-item>
    <x-timeline-item label="当前" :dot-color="dynamicDotColor">等待复查</x-timeline-item>
    <x-timeline-item label="失败" dot-color="#dc2626">发现阻塞问题</x-timeline-item>
  </x-timeline>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const dynamicDotColor = ref('#0f766e');

const toggleDotColor = () => {
  dynamicDotColor.value = dynamicDotColor.value === '#0f766e' ? '#dc2626' : '#0f766e';
};
</script>

自定义图标 ​

已创建
任务已进入队列
!
处理中
正在处理异常分支
完成
等待最终确认
vue
<template>
  <x-timeline>
    <x-timeline-item label="已创建" dot-color="#16a34a">任务已进入队列</x-timeline-item>
    <x-timeline-item label="处理中">
      <template #dot>
        <span class="timeline-demo-dot-icon">!</span>
      </template>
      正在处理异常分支
    </x-timeline-item>
    <x-timeline-item label="完成">等待最终确认</x-timeline-item>
  </x-timeline>
</template>

<style scoped>
.timeline-demo-dot-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: 1px solid rgb(245 158 11 / 28%);
  border-radius: 50%;
  color: #f59e0b;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  background: #fff;
  box-shadow: 0 0 0 3px rgb(245 158 11 / 12%);
  box-sizing: border-box;
}
</style>

节点类型 ​

已完成
构建通过
待处理
等待审批
!
异常
发现风险
vue
<template>
  <x-timeline>
    <x-timeline-item label="已完成" dot-color="#16a34a">构建通过</x-timeline-item>
    <x-timeline-item label="待处理" dot-type="hollow">等待审批</x-timeline-item>
    <x-timeline-item label="异常">
      <template #dot>
        <span class="timeline-demo-dot-icon">!</span>
      </template>
      发现风险
    </x-timeline-item>
  </x-timeline>
</template>

单项轴线 ​

阶段一
确认范围
阶段二
等待联调
阶段三
发布完成
vue
<template>
  <x-timeline>
    <x-timeline-item label="阶段一" line-type="dashed">确认范围</x-timeline-item>
    <x-timeline-item label="阶段二" line-color="#f59e0b">等待联调</x-timeline-item>
    <x-timeline-item label="阶段三">发布完成</x-timeline-item>
  </x-timeline>
</template>

幽灵节点 ​

09:30
提交任务
10:00
完成处理
同步中
vue
<template>
  <x-timeline pending="同步中">
    <x-timeline-item label="09:30">提交任务</x-timeline-item>
    <x-timeline-item label="10:00">完成处理</x-timeline-item>
  </x-timeline>
</template>

自定义幽灵节点 ​

创建
提交申请
审批
主管复核
等待确认
vue
<template>
  <x-timeline pending="等待确认">
    <template #dot>
      <span class="timeline-demo-pending-dot"></span>
    </template>
    <x-timeline-item label="创建">提交申请</x-timeline-item>
    <x-timeline-item label="审批">主管复核</x-timeline-item>
  </x-timeline>
</template>

展示模式 ​

需求
确认范围
开发
实现能力
验证
构建检查
09:00
提交
10:30
复核
15:00
完成
vue
<template>
  <x-timeline mode="alternate">
    <x-timeline-item label="需求">确认范围</x-timeline-item>
    <x-timeline-item label="开发">实现能力</x-timeline-item>
    <x-timeline-item label="验证" position="right">构建检查</x-timeline-item>
  </x-timeline>

  <x-timeline mode="right">
    <x-timeline-item label="09:00">提交</x-timeline-item>
    <x-timeline-item label="10:30">复核</x-timeline-item>
    <x-timeline-item label="15:00">完成</x-timeline-item>
  </x-timeline>
</template>

横向时间线 ​

需求
确认范围
开发
实现能力
验证
构建检查
vue
<template>
  <x-timeline direction="horizontal" mode="alternate" pending>
    <x-timeline-item label="需求">确认范围</x-timeline-item>
    <x-timeline-item label="开发">实现能力</x-timeline-item>
    <x-timeline-item label="验证">构建检查</x-timeline-item>
  </x-timeline>
</template>

标签位置 ​

确认范围
2026-06-01
实现改造
2026-06-02
完成验证
2026-06-03
vue
<template>
  <x-timeline label-position="relative">
    <x-timeline-item label="2026-06-01">确认范围</x-timeline-item>
    <x-timeline-item label="2026-06-02">实现改造</x-timeline-item>
    <x-timeline-item label="2026-06-03">完成验证</x-timeline-item>
  </x-timeline>
</template>

标签和描述 ​

需求
收集业务侧变更范围和验收标准。
开发
实现组件修复，并同步文档示例。
验证
执行构建和文档站构建。
vue
<template>
  <x-timeline>
    <x-timeline-item label="需求">
      <template #description>收集业务侧变更范围和验收标准。</template>
    </x-timeline-item>
    <x-timeline-item>
      <template #label>开发</template>
      <template #description>实现组件修复，并同步文档示例。</template>
    </x-timeline-item>
    <x-timeline-item label="验证">
      <template #description>执行构建和文档站构建。</template>
    </x-timeline-item>
  </x-timeline>
</template>

按需导入 ​

ts
import { Timeline, TimelineItem } from 'x-next';

Timeline Props ​

参数说明类型默认值
reverse是否倒序展示booleanfalse
lineType轴线样式'dotted' | 'dashed' | 'solid''solid'
direction时间线方向'vertical' | 'horizontal''vertical'
mode展示模式'left' | 'right' | 'top' | 'bottom' | 'alternate''left'
pending是否展示幽灵节点，传入字符串时作为节点内容展示boolean | string-
labelPosition标签文本位置'same' | 'relative''same'

Timeline Slots ​

插槽名说明
default时间线节点列表
dot自定义幽灵节点

TimelineItem Props ​

参数说明类型默认值
label标签文本string-
dotColor时间点颜色CSSProperties['color']-
dotType时间点类型'solid' | 'hollow''solid'
lineType当前节点后的轴线样式'dotted' | 'dashed' | 'solid'跟随 Timeline.lineType
lineColor当前节点后的轴线颜色CSSProperties['color']-
position交替模式下的单项位置'left' | 'right' | 'top' | 'bottom'自动计算

TimelineItem Slots ​

插槽名说明
default时间线内容
dot自定义时间点节点，优先级高于 icon
icon自定义时间点图标，兼容旧用法
label自定义标签
description自定义描述，未传入默认插槽时展示

已知限制 ​

  • 暂未提供 Timeline 专项自动化测试，交付前需通过文档构建和截图复查。