脉络清晰的业务演进：TinyVue Timeline 时间线组件全方位实战指南

在企业级 B端系统中，我们常常需要展示某些随时间推移、或者按特定步骤演进的业务流程。例如：

订单的物流节点追踪（已下单、待发货、运输中、已签收）
项目的审批历史流程
系统日志的审计轨迹
版本更新的历史记录

要让这些枯燥的进度和状态变得一目了然，**时间线组件（Timeline）**无疑是最佳的信息载体。本文将基于 OpenTiny 的企业级前端组件库 TinyVue ，深入介绍其 Timeline 时间线组件 的高阶实战用法，帮助你轻松构建脉络清晰的流程演进图。

一、快速上手：构建一条时间线

使用 TinyVue Timeline 构建基础时间线非常简单，只需引入 TinyTimeLine 并传入数据即可。

基础代码示例

html 复制代码

<template>
  <div class="demo-timeline">
    <tiny-time-line :data="timelineData" :active="activeNode" @click="handleNodeClick"></tiny-time-line>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { TimeLine as TinyTimeLine, Modal as TinyModal } from '@opentiny/vue'

// active 属性定义当前高亮的节点索引（0-indexed）
const activeNode = ref(1)

const timelineData = ref([
  { name: '提交申请', time: '2026-06-25 10:00:00' },
  { name: '部门主管审批', time: '2026-06-25 14:30:00' },
  { name: 'HR 终审', time: '2026-06-26 09:00:00' },
  { name: '流程结束', time: '2026-06-26 12:00:00' }
])

const handleNodeClick = (index, node) => {
  TinyModal.message({ message: `你点击了第 ${index + 1} 个节点: ${node.name}`, status: 'info' })
}
</script>

通过配置 :data 和 :active 属性，我们即可渲染出一条精美的横向时间线，并通过 @click 轻松捕获每个节点的点击事件。

二、竖向时间线与逆序展示

在内容较多或移动端设备上，横向排版往往显得比较拥挤，此时竖向时间线是更好的选择。

TinyVue Timeline 提供了 vertical 属性支持竖向展示。此外，如果希望将最新发生的事件放在最上面，还可以开启 reverse 属性实现数据的逆序展示。

html 复制代码

<tiny-time-line 
  :data="timelineData" 
  :active="activeNode" 
  vertical 
  reverse>
</tiny-time-line>

只需要简单的属性配置，即可实现展示逻辑的灵活改变，极大地减少了我们在前端手动做数组逆序处理的工作。

三、高级实战：自定义字段映射

在真实的开发场景中，后端返回的数据字段往往不是 name 和 time，可能是 title、createdAt 等。如果每次都要在前端通过循环映射字段，难免有些繁琐。

TinyVue Timeline 提供了灵活的字段自定义配置：

name-field: 设置节点名称的字段名。
time-field: 设置节点时间的字段名。
auto-color-field: 设置节点图标状态或颜色的字段名。

示例代码

html 复制代码

<template>
  <tiny-time-line 
    :data="backendData" 
    name-field="title" 
    time-field="createdAt" 
    auto-color-field="statusColor">
  </tiny-time-line>
</template>

<script setup>
import { ref } from 'vue'
import { TimeLine as TinyTimeLine } from '@opentiny/vue'

const backendData = ref([
  { title: '创建工单', createdAt: '10:00', statusColor: 'success' },
  { title: '处理工单', createdAt: '11:30', statusColor: 'error' }
])
</script>

通过字段自定义映射，我们可以让组件完美适配任何后端接口，做到了真正的低耦合开发。

四、插槽（Slot）的高级应用：双向混排与深度定制

当节点文本不仅是简单的字符串，而是包含标签、头像或者操作按钮时，我们可以利用 Timeline 的插槽功能进行全面定制。

对于横向时间线，提供了 top 和 bottom 插槽：

top: 自定义时间线顶部的文字或内容。
bottom: 自定义时间线底部的内容。

对于竖向时间线，提供了 left 和 right 插槽：

left: 自定义左侧内容。
right: 自定义右侧内容。

复杂混排效果示例

html 复制代码

<template>
  <tiny-time-line :data="timelineData" vertical>
    <!-- 自定义竖向时间线右侧的流程详情 -->
    <template #right="{ slotScope }">
      <div class="custom-content">
        <h3>{{ slotScope.name }}</h3>
        <p class="desc">经办人：张三</p>
        <span class="badge" v-if="slotScope.time">{{ slotScope.time }}</span>
      </div>
    </template>
  </tiny-time-line>
</template>

通过插槽，我们可以打破传统时间线的展示范式，设计出包含审批流表单、附件列表等复杂交互的多维时间线。

五、细粒度节点控制：TimelineItem

如果你需要对个别节点的交互、图标外观进行完全差异化的定义，TinyVue 还提供了 <tiny-timeline-item> 组件。你可以以声明式的子组件方式，来替代统一的 data 数据驱动。

html 复制代码

<template>
  <tiny-time-line>
    <tiny-timeline-item v-for="(item, i) in timelineData" :key="i" :node="item" :nodeIndex="i">
      <!-- 针对个别节点实现完全不同的自定义结构 -->
      <template #description>
        <div class="special-desc" v-if="i === 1">这是需要特殊标红的审核说明！</div>
      </template>
    </tiny-timeline-item>
  </tiny-time-line>
</template>

六、总结

TinyVue Timeline 不仅小巧精美，同时在自适应排版、字段自定义映射、插槽定制等方面具备非常高的高级拓展能力，能够极好地应对大中型 B端系统中的流程与轨迹展示需求。

如果你的系统里也需要一条清晰优雅的业务脉络，不妨试试 TinyVue Timeline，让你的流程轨迹在用户眼前优雅呈现！

脉络清晰的业务演进：TinyVue Timeline 时间线组件全方位实战指南