BizCommentList 沟通记录

头像 + 姓名 + 时间 + 内容的记录流：replyTo 引用回复行、own 本人高亮（我）、system 系统备注灰底、#actions 插槽自定义操作、has-more 加载更多入口。审批意见流、工单沟通、需求评论的标准件——与 BizTimeline（流程节点轴）互补。

基础用法

张

张伟10-24 09:12

这个方案我看了，接口设计没问题，可以进入联调。

李

李娜10-24 10:05

后端已部署测试环境，联调地址稍后发群里。

王

王强10-24 11:30

收到，我下午开始过用例。

常规记录流：回复 / 删除操作（默认操作条），reply / delete 事件带出整条记录。

<script setup lang="ts">
/** 基础用法：常规记录流，回复/删除默认操作条 */
import { ElMessage } from 'element-plus'
import { BizCommentList } from 'vue3-ep-biz-lib'
import type { BizCommentItem } from 'vue3-ep-biz-lib'

const comments: BizCommentItem[] = [
  { id: 1, author: '张伟', content: '这个方案我看了，接口设计没问题，可以进入联调。', time: '10-24 09:12' },
  { id: 2, author: '李娜', content: '后端已部署测试环境，联调地址稍后发群里。', time: '10-24 10:05' },
  { id: 3, author: '王强', content: '收到，我下午开始过用例。', time: '10-24 11:30' },
]

const onReply = (comment: BizCommentItem): void => {
  ElMessage.info(`回复 ${comment.author}（真实业务打开回复框预填 @${comment.author}）`)
}

const onDelete = (comment: BizCommentItem): void => {
  ElMessage.warning(`删除 ${comment.author} 的记录：${comment.content.slice(0, 10)}…`)
}
</script>

<template>
  <div style="max-width: 560px">
    <BizCommentList :comments="comments" @reply="onReply" @delete="onDelete" />
  </div>
</template>

显示代码

审批意见流

系统系统10-23 16:00

张伟 提交了采购申请（金额 ¥128,000），流程自动流转至部门审批

周

周正10-23 17:20

预算内采购，同意。请财务关注发票抬头信息。

我

我我10-24 09:05

发票信息已核对无误，抬头为公司全称，税号一致。

系统系统10-24 09:40

审批通过，单据转出纳打款节点

own 高亮「我」的发言；system 灰底无头像渲染系统流转轨迹

审批场景：本人意见高亮（own + 「我」标记）与系统流转备注（system 灰底无头像）混排。

<script setup lang="ts">
/** 场景：审批意见流——本人意见高亮（own）+ 系统流转备注（system）混排 */
import { BizCommentList } from 'vue3-ep-biz-lib'
import type { BizCommentItem } from 'vue3-ep-biz-lib'

const flow: BizCommentItem[] = [
  { id: 1, author: '系统', system: true, content: '张伟 提交了采购申请（金额 ¥128,000），流程自动流转至部门审批', time: '10-23 16:00' },
  { id: 2, author: '周正', content: '预算内采购，同意。请财务关注发票抬头信息。', time: '10-23 17:20' },
  { id: 3, author: '我', own: true, content: '发票信息已核对无误，抬头为公司全称，税号一致。', time: '10-24 09:05' },
  { id: 4, author: '系统', system: true, content: '审批通过，单据转出纳打款节点', time: '10-24 09:40' },
] satisfies BizCommentItem[]
</script>

<template>
  <div style="max-width: 560px">
    <BizCommentList :comments="flow" />
    <div style="margin-top: 8px; font-size: 13px; color: var(--el-text-color-secondary)">
      own 高亮「我」的发言；system 灰底无头像渲染系统流转轨迹
    </div>
  </div>
</template>

显示代码

工单沟通（引用回复 + 加载更多）

客

客户10-20 08:40

水压表读数 0.2MPa，偏低。

工

工程师老徐10-20 09:00

回复 @客户

0.2 偏低，建议调整前置过滤器并观察 10 分钟；我下午上门。

客

客户10-20 10:30

调整后恢复 0.35，报警消了，感谢！

replyTo 渲染「回复 @xx」引用行；has-more + load-more 分页拉取历史沟通。

<script setup lang="ts">
/** 场景：工单沟通——引用回复（replyTo）+ 加载更多历史 */
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { BizCommentList } from 'vue3-ep-biz-lib'
import type { BizCommentItem } from 'vue3-ep-biz-lib'

const allComments: BizCommentItem[] = [
  { id: 1, author: '客户', content: '设备今早开机后一直报警 E03，怎么处理？', time: '10-20 08:10' },
  { id: 2, author: '客服小美', content: 'E03 是进水超时报警，请先检查水压表读数。', time: '10-20 08:25', replyTo: '客户' },
  { id: 3, author: '客户', content: '水压表读数 0.2MPa，偏低。', time: '10-20 08:40' },
  { id: 4, author: '工程师老徐', content: '0.2 偏低，建议调整前置过滤器并观察 10 分钟；我下午上门。', time: '10-20 09:00', replyTo: '客户' },
  { id: 5, author: '客户', content: '调整后恢复 0.35，报警消了，感谢！', time: '10-20 10:30' },
]

const comments = ref<BizCommentItem[]>(allComments.slice(2))
const hasMore = ref(true)
const loading = ref(false)

const onLoadMore = (): void => {
  loading.value = true
  window.setTimeout(() => {
    comments.value = [...allComments.slice(0, 2), ...comments.value]
    hasMore.value = false
    loading.value = false
  }, 600)
}

const onReply = (comment: BizCommentItem): void => {
  ElMessage.info(`引用回复 @${comment.author}`)
}
</script>

<template>
  <div style="max-width: 560px">
    <BizCommentList
      :comments="comments"
      :has-more="hasMore"
      :more-loading="loading"
      load-more-text="加载更早的沟通"
      @load-more="onLoadMore"
      @reply="onReply"
    />
  </div>
</template>

显示代码

需求评论（操作自定义）

产

产品小赵10-23 14:00

本期需求范围冻结，变更走需求变更流程。

我

我我10-23 15:30

排期已按冻结范围录入，里程碑本周五评审。

#actions 插槽接管操作条：复制内容、仅本人可删（删除走二次确认）。

<script setup lang="ts">
/** 场景：需求评论——#actions 插槽接管操作条（复制 / 仅本人可删 + 二次确认） */
import { ElButton, ElMessage } from 'element-plus'
import { BizCommentList } from 'vue3-ep-biz-lib'
import type { BizCommentItem } from 'vue3-ep-biz-lib'

const comments: BizCommentItem[] = [
  { id: 1, author: '产品小赵', content: '本期需求范围冻结，变更走需求变更流程。', time: '10-23 14:00' },
  { id: 2, author: '我', own: true, content: '排期已按冻结范围录入，里程碑本周五评审。', time: '10-23 15:30' },
]

const onCopy = (comment: BizCommentItem): void => {
  void navigator.clipboard?.writeText(comment.content)
  ElMessage.success('已复制到剪贴板')
}

const onDelete = (comment: BizCommentItem): void => {
  ElMessage.warning(`删除我的评论：${comment.content.slice(0, 12)}…（应接二次确认）`)
}
</script>

<template>
  <div style="max-width: 560px">
    <BizCommentList :comments="comments">
      <template #actions="{ comment }">
        <ElButton link type="primary" size="small" @click="onCopy(comment)">复制</ElButton>
        <ElButton v-if="comment.own === true" link type="danger" size="small" @click="onDelete(comment)">删除</ElButton>
      </template>
    </BizCommentList>
  </div>
</template>

显示代码

系统操作日志

系统系统10-23 09:00

张伟 创建了账号 zhangwei@corp.com 并分配「运营」角色

系统系统10-23 10:15

李娜 将工单 GD-20261023-017 从「待处理」流转至「处理中」

系统系统10-24 00:03

定时任务「日终对账」执行成功，耗时 3 分 12 秒

系统系统10-24 08:40

王强 导出了 9 月份设备台账（共 1,204 行）

全 system 记录即成操作日志流（谁在何时做了什么），无需另起组件。

<script setup lang="ts">
/** 场景：系统操作日志——全 system 记录即成「谁在何时做了什么」日志流 */
import { BizCommentList } from 'vue3-ep-biz-lib'
import type { BizCommentItem } from 'vue3-ep-biz-lib'

const logs: BizCommentItem[] = [
  { id: 1, author: '系统', system: true, content: '张伟 创建了账号 zhangwei@corp.com 并分配「运营」角色', time: '10-23 09:00' },
  { id: 2, author: '系统', system: true, content: '李娜 将工单 GD-20261023-017 从「待处理」流转至「处理中」', time: '10-23 10:15' },
  { id: 3, author: '系统', system: true, content: '定时任务「日终对账」执行成功，耗时 3 分 12 秒', time: '10-24 00:03' },
  { id: 4, author: '系统', system: true, content: '王强 导出了 9 月份设备台账（共 1,204 行）', time: '10-24 08:40' },
]
</script>

<template>
  <div style="max-width: 560px">
    <BizCommentList :comments="logs" />
  </div>
</template>

显示代码

空态与首屏骨架

暂无沟通记录

无记录展示 BizEmpty 空态；loading 首屏骨架；清空后回归空态。

<script setup lang="ts">
/** 场景：空态与首屏骨架——无记录空态 / loading 骨架 / 清空回归 */
import { ref } from 'vue'
import { ElButton } from 'element-plus'
import { BizCommentList } from 'vue3-ep-biz-lib'
import type { BizCommentItem } from 'vue3-ep-biz-lib'

const comments = ref<BizCommentItem[]>([])
const loading = ref(false)

const load = (): void => {
  loading.value = true
  comments.value = []
  window.setTimeout(() => {
    comments.value = [
      { id: 1, author: '张伟', content: '接口返回了一条记录。', time: '10-24 11:00' },
      { id: 2, author: '李娜', content: '再来一条。', time: '10-24 11:05' },
    ]
    loading.value = false
  }, 800)
}

const clear = (): void => {
  comments.value = []
}
</script>

<template>
  <div style="max-width: 560px">
    <div style="margin-bottom: 10px; display: flex; gap: 8px">
      <ElButton size="small" @click="load">模拟加载</ElButton>
      <ElButton size="small" :disabled="comments.length === 0" @click="clear">清空记录</ElButton>
    </div>
    <BizCommentList :comments="comments" :loading="loading" />
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
comments	BizCommentItem[]	[]	记录列表（顺序由父级控制）
has-more	boolean	false	是否展示加载更多入口
load-more-text	string	'加载更多'	加载更多文案
more-loading	boolean	false	加载中（入口按钮 loading 态）
loading	boolean	false	首屏加载中（空列表时展示骨架屏）

BizCommentItem：{ id, author, avatar?, content, time?, own?, system?, replyTo? }——own 本人高亮、system 系统备注样式、replyTo 引用行。

Events

事件名	参数	说明
reply	(comment: BizCommentItem)	默认操作条「回复」
delete	(comment: BizCommentItem)	默认操作条「删除」（仅本人/系统记录显示）
load-more	—	加载更多入口点击

Slots

插槽名	说明
actions	操作条自定义（作用域参数 { comment }），传入即替换默认回复/删除

Expose

属性/方法	说明
—	无暴露实例