FlowTimeline 流程审批时间线

流程审批记录时间线组件。以垂直时间线形式展示流程审批历史，包含审批人头像、任务名、操作类型标签、时间和审批意见。支持签名图片展示。

• 基础用法
• Props
  • items 每项结构
  • action 操作类型对照
• 注意事项

基础用法

<template>
  <FlowTimeline :items="approvalHistory" />
</template>

<script setup>
import FlowTimeline from '@/components/flow/FlowTimeline.vue'

const approvalHistory = [
  {
    assigneeName: '张三',
    taskName: '部门经理审批',
    action: 'approve',
    completeTime: '2024-01-15 14:30:00',
    comment: '同意，请继续推进',
    signature: 'https://example.com/signature.png',
  },
  {
    assigneeName: '李四',
    taskName: '总监审批',
    action: 'reject',
    completeTime: '2024-01-15 16:00:00',
    comment: '预算超出限额，请调整后重新提交',
  },
]
</script>

Props

属性	类型	默认值	说明
items	Array	[]	审批记录数组

items 每项结构

字段	类型	说明
assigneeName	String	审批人姓名（用于生成头像）
taskName	String	任务名称（显示在标题行）
action	String	操作类型，决定节点颜色和图标（见下表）
completeTime	String	完成时间
createTime	String	创建时间（completeTime 不存在时显示）
comment	String	审批意见（显示在节点下方）
signature	String	签名图片 URL（可选，有值时显示在节点下方）

action 操作类型对照

action 值	含义	节点颜色	图标
approve	同意	🟢 绿色	✅
reject	驳回	🔴 红色	❌
delegate	转办	🟡 黄色	↗️
return	退回	🟡 黄色	↩️
terminate	终结	🔴 红色	⏹️
claim	签收	默认	📥
start	发起	🟢 绿色	▶️
withdraw	撤回	默认	↩️
pending	待处理	默认	⏳

注意事项

• 时间线从上到下按 items 数组顺序展示（通常是时间倒序）
• signature 字段有值时会在审批意见下方显示签名图片
• assigneeName 用于生成 Naive UI Avatar 的默认头像（取首字符）
• 组件不发出任何事件，纯展示用途