BizTimeline 业务时间线

el-timeline 封装：records 驱动渲染，status 经 status-map 映射节点颜色 / 空心 / 徽标文案，空列表自动复用 BizEmpty。用于订单跟踪、审批记录、操作日志。

基础用法

订单已签收已完成
签收人：本人；签收地址：上海市浦东新区××路 8 号
2026-09-21 15:40
派送中进行中
快递员张三 13800000000 正在为您派送
2026-09-21 09:12
到达目的地网点已完成
上海浦东转运中心已发出
2026-09-20 22:05
运输中已完成
货物离开杭州转运中心
2026-09-20 08:30
商家已发货已完成
顺丰速运 SF1324567890000
2026-09-19 18:00
订单已支付成功
微信支付 ¥1,299.00
2026-09-19 17:20
订单已创建info
2026-09-19 17:15

状态映射：进行中（primary 空心）/ 已完成（success）/ 辅助信息（info）；可切换查看空态。

<script setup lang="ts">
/** 基础用法：订单跟踪时间线（状态映射着色 + 徽标 + 空态切换） */
import { ref } from 'vue'
import { ElButton } from 'element-plus'
import { BizTimeline } from 'vue3-ep-biz-lib'
import type { BizTimelineRecord } from 'vue3-ep-biz-lib'

const records = ref<BizTimelineRecord[]>([
  { title: '订单已签收', content: '签收人：本人；签收地址：上海市浦东新区××路 8 号', timestamp: '2026-09-21 15:40', status: 'done' },
  { title: '派送中', content: '快递员张三 13800000000 正在为您派送', timestamp: '2026-09-21 09:12', status: 'active' },
  { title: '到达目的地网点', content: '上海浦东转运中心已发出', timestamp: '2026-09-20 22:05', status: 'done' },
  { title: '运输中', content: '货物离开杭州转运中心', timestamp: '2026-09-20 08:30', status: 'done' },
  { title: '商家已发货', content: '顺丰速运 SF1324567890000', timestamp: '2026-09-19 18:00', status: 'done' },
  { title: '订单已支付', content: '微信支付 ¥1,299.00', timestamp: '2026-09-19 17:20', status: 'success' },
  { title: '订单已创建', timestamp: '2026-09-19 17:15', status: 'info' },
])

const statusMap = {
  done: { type: 'success' as const, text: '已完成' },
  active: { type: 'primary' as const, hollow: true, text: '进行中' },
  success: { type: 'success' as const, text: '成功' },
  info: { type: 'info' as const, hollow: true },
}

const empty = ref(false)
</script>

<template>
  <div>
    <BizTimeline v-if="!empty" :records="records" :status-map="statusMap" />
    <BizTimeline v-else :records="[]" />
    <ElButton style="margin-top: 12px" @click="empty = !empty">{{ empty ? '查看记录' : '查看空态' }}</ElButton>
  </div>
</template>

自定义节点（item 插槽）

#3更新了部署配置2026-09-21 14:02
production 环境追加 CDN 域名白名单
2026-09-21 14:02
#2删除了测试分支2026-09-21 11:30
feature/batch-3 已合并，清理远端分支
2026-09-21 11:30
#1发布了 v0.1.12026-09-20 18:00
npm 官方源 + npmmirror 双源同步完成
2026-09-20 18:00

item 插槽接管整条节点渲染（作用域：record / index）；reverse 倒序展示；配合外部按钮可实现「加载更多」。

<script setup lang="ts">
/** 进阶：item 插槽自定义节点（图标 + 操作日志类型徽标）+ reverse 倒序 + 加载更多 */
import { ref } from 'vue'
import { ElButton } from 'element-plus'
import { BizTimeline } from 'vue3-ep-biz-lib'
import type { BizTimelineRecord } from 'vue3-ep-biz-lib'

const records = ref<BizTimelineRecord[]>([
  { title: '更新了部署配置', content: 'production 环境追加 CDN 域名白名单', timestamp: '2026-09-21 14:02', status: 'update' },
  { title: '删除了测试分支', content: 'feature/batch-3 已合并，清理远端分支', timestamp: '2026-09-21 11:30', status: 'remove' },
  { title: '发布了 v0.1.1', content: 'npm 官方源 + npmmirror 双源同步完成', timestamp: '2026-09-20 18:00', status: 'release' },
])

const statusMap = {
  update: { type: 'primary' as const, text: '变更' },
  remove: { type: 'danger' as const, text: '删除' },
  release: { type: 'success' as const, text: '发布' },
}

const reverse = ref(false)

const loadMore = (): void => {
  records.value = [
    ...records.value,
    { title: '初始化仓库', content: 'dev 分支创建并配置 CI', timestamp: '2026-09-18 09:00', status: 'update' },
  ]
}
</script>

<template>
  <div>
    <BizTimeline :records="records" :status-map="statusMap" :reverse="reverse">
      <template #item="{ record, index }">
        <div style="display: flex; align-items: baseline; gap: 8px">
          <b>#{{ records.length - index }}</b>
          <span style="font-weight: 600">{{ record.title }}</span>
          <span style="font-size: 12px; color: var(--el-text-color-placeholder)">{{ record.timestamp }}</span>
        </div>
        <div style="margin-top: 2px; font-size: 13px; color: var(--el-text-color-secondary)">{{ record.content }}</div>
      </template>
    </BizTimeline>
    <div style="display: flex; gap: 8px; margin-top: 12px">
      <ElButton size="small" @click="reverse = !reverse">倒序：{{ reverse ? '开' : '关' }}</ElButton>
      <ElButton size="small" @click="loadMore">加载更多</ElButton>
    </div>
  </div>
</template>

物流跟踪（pending 尾节点）

运输轨迹同步中，预计今日 18:00 前完成派送
已揽收
上海市浦东新区张江站点
09-22 18:03
运输中
上海转运中心 → 南京
09-22 22:30
到达南京雨花台网点
09-23 05:12
派送中
快递员王建国 138****2233 正在派送
09-23 08:45
已签收
本人签收，感谢使用
09-23 11:20

物流轨迹场景：reverse 最新在前，状态映射区分签收 / 派送 / 干线；pending 传自定义文案渲染尾部「运输中」primary 空心节点，item 插槽接管节点点击查看轨迹明细。

<script setup lang="ts">
/** 场景：物流跟踪——已走节点 + pending 进行中尾节点（未完结流程） */
import { ElMessage } from 'element-plus'
import { BizTimeline } from 'vue3-ep-biz-lib'
import type { BizTimelineRecord } from 'vue3-ep-biz-lib'

const records: BizTimelineRecord[] = [
  { title: '已签收', content: '本人签收，感谢使用', timestamp: '09-23 11:20', status: 'signed' },
  { title: '派送中', content: '快递员 王建国 138****2233 正在派送', timestamp: '09-23 08:45', status: 'delivering' },
  { title: '到达南京雨花台网点', timestamp: '09-23 05:12', status: 'arrived' },
  { title: '运输中', content: '上海转运中心 → 南京', timestamp: '09-22 22:30', status: 'transit' },
  { title: '已揽收', content: '上海市浦东新区张江站点', timestamp: '09-22 18:03', status: 'picked' },
]

const statusMap = {
  signed: { type: 'success' as const, text: '签收' },
  delivering: { type: 'primary' as const, text: '派送' },
  arrived: { type: 'primary' as const, hollow: true },
  transit: { type: 'info' as const },
  picked: { type: 'info' as const, hollow: true },
}

const onItemClick = (record: BizTimelineRecord): void => {
  ElMessage.info(`${record.title}（${record.timestamp ?? '—'}）`)
}
</script>

<template>
  <div style="max-width: 420px">
    <!-- reverse：最新在前；pending：尾部进行中节点（运输未完结场景） -->
    <BizTimeline
      :records="records"
      :status-map="statusMap"
      reverse
      pending="运输轨迹同步中，预计今日 18:00 前完成派送"
    >
      <template #item="{ record }">
        <div style="cursor: pointer" @click="onItemClick(record)">
          <div style="font-weight: 600">{{ record.title }}</div>
          <div v-if="record.content" style="margin-top: 2px; font-size: 13px; color: var(--el-text-color-secondary)">
            {{ record.content }}
          </div>
        </div>
      </template>
    </BizTimeline>
  </div>
</template>

操作审计日志

登录管理后台normal
操作人：zhangsan ｜ IP：10.20.2.7 ｜ MFA 通过
09-22 21:58
删除测试租户 tenant-demodanger
操作人：zhangsan ｜ IP：10.20.2.7 ｜二次确认通过
09-22 22:10
修改网关超时阈值 30s → 45sconfig
操作人：wangwu ｜ IP：10.20.1.18 ｜变更单 CHG-2088
09-23 09:40
导出「近 90 天订单」报表normal
操作人：lisi ｜ IP：10.20.3.41 ｜ 12.4MB
09-23 11:02

审计场景：动作 / 操作人 / IP / 变更单号多信息 content 排版，倒序展示，危险操作红色节点。

<script setup lang="ts">
/** 场景：操作审计日志——动作/操作人/IP 多信息排版，倒序展示 */
import { BizTimeline } from 'vue3-ep-biz-lib'
import type { BizTimelineRecord } from 'vue3-ep-biz-lib'

const records: BizTimelineRecord[] = [
  { title: '导出「近 90 天订单」报表', content: '操作人：lisi ｜ IP：10.20.3.41 ｜ 12.4MB', timestamp: '09-23 11:02', status: 'normal' },
  { title: '修改网关超时阈值 30s → 45s', content: '操作人：wangwu ｜ IP：10.20.1.18 ｜ 变更单 CHG-2088', timestamp: '09-23 09:40', status: 'config' },
  { title: '删除测试租户 tenant-demo', content: '操作人：zhangsan ｜ IP：10.20.2.7 ｜ 二次确认通过', timestamp: '09-22 22:10', status: 'danger' },
  { title: '登录管理后台', content: '操作人：zhangsan ｜ IP：10.20.2.7 ｜ MFA 通过', timestamp: '09-22 21:58', status: 'normal' },
]

const statusMap = {
  normal: { type: 'info' as const },
  config: { type: 'primary' as const },
  danger: { type: 'danger' as const },
}
</script>

<template>
  <div style="max-width: 460px">
    <BizTimeline :records="records" :status-map="statusMap" reverse />
  </div>
</template>

审批历史（多结果）

总经理审批处理中
发起申请 · 周七发起
采购伺服电机 ×12
09-23 09:05
部门经理审批同意
「同意，注意验收标准」
09-23 09:31
转交：部门经理 → 财务转交
金额超 5 万自动转交财务复核
09-23 09:41
财务复核 · 张会计同意
「发票与预算科目已核对一致」
09-23 09:58
总经理审批waiting
等待审批（已进入队列第 2 位）
09-23 10:20

审批场景：同意 / 转交 / 发起多状态着色，最新一环 pending「总经理审批处理中」。

<script setup lang="ts">
/** 场景：审批历史——同意/驳回/转交多结果着色，最新一环 pending */
import { BizTimeline } from 'vue3-ep-biz-lib'
import type { BizTimelineRecord } from 'vue3-ep-biz-lib'

const records: BizTimelineRecord[] = [
  { title: '总经理审批', content: '等待审批（已进入队列第 2 位）', timestamp: '09-23 10:20', status: 'waiting' },
  { title: '财务复核 · 张会计', content: '「发票与预算科目已核对一致」', timestamp: '09-23 09:58', status: 'approved' },
  { title: '转交：部门经理 → 财务', content: '金额超 5 万自动转交财务复核', timestamp: '09-23 09:41', status: 'transfer' },
  { title: '部门经理审批', content: '「同意，注意验收标准」', timestamp: '09-23 09:31', status: 'approved' },
  { title: '发起申请 · 周七', content: '采购伺服电机 ×12', timestamp: '09-23 09:05', status: 'submit' },
]

const statusMap = {
  approved: { type: 'success' as const, text: '同意' },
  transfer: { type: 'warning' as const, text: '转交' },
  submit: { type: 'info' as const, text: '发起' },
  waiting: { type: 'info' as const, hollow: true },
}
</script>

<template>
  <div style="max-width: 440px">
    <BizTimeline :records="records" :status-map="statusMap" reverse pending="总经理审批处理中" />
  </div>
</template>

审批记录（意见 / 审批人 / 耗时）

发起报销申请发起张三（报销人）耗时即时
10 月华东区差旅费，发票 6 张
2026-10-20 09:12
直属主管审批同意李主管耗时 5 小时 23 分
行程与预算一致，同意报销，请财务复核。
2026-10-20 14:35
财务复核驳回王财务耗时 19 小时 27 分
第 3 张发票抬头与公司全称不符，请更换后重新提交。
2026-10-21 10:02
重新提交（更换发票）发起张三（报销人）耗时即时
已更换为正确抬头发票，麻烦再次复核。
2026-10-21 15:40
财务复核（二次）同意王财务耗时 17 小时 40 分
复核通过，款项将于 3 个工作日内到账。
2026-10-22 09:20
出纳打款完成赵出纳耗时 6 小时 40 分
2026-10-22 16:00
银行处理中，预计 T+1 到账

记录扩展字段：operator 审批人（标题行次要展示）、comment 审批意见（引用块留痕）、duration 耗时（number 按分钟自动格式化 / string 原样）；配合 statusMap 的同意 / 驳回着色即成完整审批历史。

<script setup lang="ts">
/** 场景：审批记录时间线——operator 审批人 / comment 审批意见 / duration 耗时（分钟自动格式化） */
import { BizTimeline } from 'vue3-ep-biz-lib'
import type { BizTimelineRecord } from 'vue3-ep-biz-lib'

const records: BizTimelineRecord[] = [
  {
    title: '发起报销申请',
    operator: '张三（报销人）',
    content: '10 月华东区差旅费，发票 6 张',
    timestamp: '2026-10-20 09:12',
    status: 'start',
    duration: 0,
  },
  {
    title: '直属主管审批',
    operator: '李主管',
    comment: '行程与预算一致，同意报销，请财务复核。',
    timestamp: '2026-10-20 14:35',
    status: 'approved',
    duration: 323,
  },
  {
    title: '财务复核',
    operator: '王财务',
    comment: '第 3 张发票抬头与公司全称不符，请更换后重新提交。',
    timestamp: '2026-10-21 10:02',
    status: 'rejected',
    duration: 1167,
  },
  {
    title: '重新提交（更换发票）',
    operator: '张三（报销人）',
    comment: '已更换为正确抬头发票，麻烦再次复核。',
    timestamp: '2026-10-21 15:40',
    status: 'start',
    duration: 0,
  },
  {
    title: '财务复核（二次）',
    operator: '王财务',
    comment: '复核通过，款项将于 3 个工作日内到账。',
    timestamp: '2026-10-22 09:20',
    status: 'approved',
    duration: 1060,
  },
  {
    title: '出纳打款',
    operator: '赵出纳',
    timestamp: '2026-10-22 16:00',
    status: 'done',
    duration: 400,
  },
]

const statusMap = {
  start: { type: 'primary' as const, hollow: true, text: '发起' },
  approved: { type: 'success' as const, text: '同意' },
  rejected: { type: 'danger' as const, text: '驳回' },
  done: { type: 'success' as const, text: '完成' },
}
</script>

<template>
  <div style="max-width: 640px">
    <BizTimeline :records="records" :status-map="statusMap" pending="银行处理中，预计 T+1 到账" />
  </div>
</template>

报修进度跟踪

验收确认todo
待维修完成后由报修人确认
维修处理进行中
李工已领取备件，预计今日 16:00 完成
09-23 11:30
派单已完成
派发给机电组李工（接单超时 2 小时未处理将升级）
09-23 10:15
报修提交已完成
3 号空压机异响，附现场录音
09-23 09:48

维修场景：报修 → 派单 → 维修（进行中）→ 验收（待办），正序四环，待办空心灰节点。

<script setup lang="ts">
/** 场景：报修进度跟踪——四环闭环，维修中呼吸等待 */
import { BizTimeline } from 'vue3-ep-biz-lib'
import type { BizTimelineRecord } from 'vue3-ep-biz-lib'

const records: BizTimelineRecord[] = [
  { title: '验收确认', content: '待维修完成后由报修人确认', status: 'todo' },
  { title: '维修处理', content: '李工已领取备件，预计今日 16:00 完成', timestamp: '09-23 11:30', status: 'doing' },
  { title: '派单', content: '派发给机电组 李工（接单超时 2 小时未处理将升级）', timestamp: '09-23 10:15', status: 'done' },
  { title: '报修提交', content: '3 号空压机异响，附现场录音', timestamp: '09-23 09:48', status: 'done' },
]

const statusMap = {
  done: { type: 'success' as const, text: '已完成' },
  doing: { type: 'primary' as const, text: '进行中' },
  todo: { type: 'info' as const, hollow: true },
}
</script>

<template>
  <div style="max-width: 420px">
    <BizTimeline :records="records" :status-map="statusMap" />
  </div>
</template>

Props

属性名	类型	默认值	说明
records	`BizTimelineRecord[]`	—（必填）	记录列表：`{ title, content?, timestamp?, status?, operator?, comment?, duration? }`；duration 为 number 时按分钟格式化（formatDuration 一并导出）
status-map	`Record<string, { type?, hollow?, text? }>`	`{}`	状态映射：节点颜色 / 空心 / 徽标文案
reverse	`boolean`	`false`	倒序渲染（最新在前）
pending	`boolean \| string`	`false`	尾部「进行中」节点：`true` 显示默认文案「进行中…」，传字符串自定义；渲染为 primary 空心节点

Events

事件名	参数	说明
—	—	无自定义事件

Slots

插槽名	说明
item	自定义节点内容（作用域：record / index）

Expose

属性/方法	说明
—	无暴露实例方法（数据驱动）

BizTimeline 业务时间线 ​

基础用法 ​

自定义节点（item 插槽） ​

物流跟踪（pending 尾节点） ​

操作审计日志 ​

审批历史（多结果） ​

审批记录（意见 / 审批人 / 耗时） ​

报修进度跟踪 ​

Props ​

Events ​

Slots ​

Expose ​