BizTodoCenter 待办事项中心

待办事项中心：页签条（待办 / 已办 / 我发起，每页签带过滤后条数角标）+ 关键字检索（标题 / 摘要 / 发起人包含匹配，300ms 防抖）+ 优先级色点（紧急 / 高 / 普通 / 低，紧急附红色「紧急」标）+ 超期红标（截止早于今天显示「已超期 X 天」）+ 行内操作（可配 ElMessageBox 二次确认）+ 前端分页 + 骨架 / 空态。组件不含业务接口：数据由 items 传入，操作与点击全部事件外抛，适合工作台首屏、导航待办抽屉等场景。

基础用法

合同审批

供应商已盖章，等待法务与财务会签后归档

王倩2026-10-16 09:20

人事流程

待开通邮箱、门禁与内部系统权限

李强2026-10-17 14:05

权限申请

申请城市安全运行大屏的只读权限

赵敏2026-10-18 11:40

当前页签：todo；最近点击：（无）

默认页签（待办 / 已办 / 我发起），事项按 source 归属页签（缺省 'todo'）；点击标题触发 item-click。

<script setup lang="ts">
/** 场景：基础——默认页签（待办 / 已办 / 我发起）+ 列表浏览与标题点击 */
import { ref } from 'vue'
import { BizTodoCenter } from 'vue3-ep-biz-lib'
import type { BizTodoItem } from 'vue3-ep-biz-lib'

const activeTab = ref('todo')
const clicked = ref<BizTodoItem | null>(null)

const items = ref<BizTodoItem[]>([
  {
    id: 1,
    title: '季度采购合同审批',
    type: '合同审批',
    level: 'high',
    applicant: '王倩',
    summary: '供应商已盖章，等待法务与财务会签后归档',
    createTime: '2026-10-16 09:20',
  },
  {
    id: 2,
    title: '新员工入职账号开通',
    type: '人事流程',
    level: 'normal',
    applicant: '李强',
    summary: '待开通邮箱、门禁与内部系统权限',
    createTime: '2026-10-17 14:05',
  },
  {
    id: 3,
    title: '数据大屏访问权限申请',
    type: '权限申请',
    level: 'low',
    applicant: '赵敏',
    summary: '申请城市安全运行大屏的只读权限',
    createTime: '2026-10-18 11:40',
  },
  {
    id: 4,
    title: '报销单复核',
    type: '财务报销',
    level: 'urgent',
    applicant: '陈晨',
    summary: '差旅报销 3,860 元，附发票 6 张',
    createTime: '2026-10-19 16:30',
    source: 'done',
  },
  {
    id: 5,
    title: '值班表调整申请',
    type: '行政流程',
    level: 'normal',
    applicant: '我',
    summary: '本人发起，等待主管审批',
    createTime: '2026-10-20 08:55',
    source: 'initiated',
  },
])
</script>

<template>
  <div>
    <BizTodoCenter
      v-model:active-tab="activeTab"
      :items="items"
      @item-click="clicked = $event"
    />
    <p style="margin: 10px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      当前页签：{{ activeTab }}；最近点击：{{ clicked === null ? '（无）' : clicked.title }}
    </p>
  </div>
</template>

显示代码

自定义页签

运维流程

10 月第二周巡检异常项整改确认

周凯2026-10-15 10:12

紧急采购会签

涉及预算调整，需本周内完成会签

吴静2026-10-18 15:40

事项按 source 归属页签；当前页签 key：mine

tabs 替换默认页签（如 我的待办 / 抄送我 / 我督办），source 与页签 key 对应即完成归属。

<script setup lang="ts">
/** 场景：页签——自定义页签 + source 归属（事项按 source 分配到对应页签） */
import { ref } from 'vue'
import { BizTodoCenter } from 'vue3-ep-biz-lib'
import type { BizTodoItem, BizTodoTab } from 'vue3-ep-biz-lib'

const activeTab = ref('mine')

const tabs = ref<BizTodoTab[]>([
  { key: 'mine', name: '我的待办' },
  { key: 'cc', name: '抄送我' },
  { key: 'supervised', name: '我督办' },
])

const items = ref<BizTodoItem[]>([
  {
    id: 1,
    title: '机房巡检报告确认',
    type: '运维流程',
    level: 'high',
    applicant: '周凯',
    summary: '10 月第二周巡检异常项整改确认',
    createTime: '2026-10-15 10:12',
    source: 'mine',
  },
  {
    id: 2,
    title: '安全设备采购单会签',
    type: '采购会签',
    level: 'urgent',
    applicant: '吴静',
    summary: '涉及预算调整，需本周内完成会签',
    createTime: '2026-10-18 15:40',
    source: 'mine',
  },
  {
    id: 3,
    title: '项目周报（抄送）',
    type: '项目周报',
    level: 'low',
    applicant: '郑爽',
    summary: '城市安全模型平台第 42 周周报，请知悉',
    createTime: '2026-10-19 09:00',
    source: 'cc',
  },
  {
    id: 4,
    title: '督办：隐患整改闭环',
    type: '隐患督办',
    level: 'normal',
    applicant: '何军',
    summary: '化工园区 3 处重大隐患整改进度 60%',
    createTime: '2026-10-12 16:20',
    source: 'supervised',
  },
])
</script>

<template>
  <div>
    <BizTodoCenter v-model:active-tab="activeTab" :tabs="tabs" :items="items" />
    <p style="margin: 10px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      事项按 source 归属页签；当前页签 key：{{ activeTab }}
    </p>
  </div>
</template>

显示代码

关键字检索

合同审批

供应商已盖章，等待法务与财务会签后归档

王倩2026-10-16 09:20

资源申请

模型训练节点内存扩容至 256G

刘洋2026-10-17 11:00

权限申请

申请城市安全运行大屏的只读权限

赵敏2026-10-18 11:40

合同审批

上半年框架合同归档编号补录

孙洁2026-10-19 17:25

输入「合同 / 扩容 / 赵敏」等关键字体验过滤（停止输入 300ms 后生效）；过滤后待办数：4 条

filterable（默认开启）展示搜索框，停止输入 300ms 后按标题 / 摘要 / 发起人过滤；页签角标随过滤实时更新。

<script setup lang="ts">
/** 场景：检索——关键字搜索（300ms 防抖，命中标题 / 摘要 / 发起人） */
import { ref } from 'vue'
import { BizTodoCenter } from 'vue3-ep-biz-lib'
import type { BizTodoItem } from 'vue3-ep-biz-lib'

const pending = ref(0)

const items = ref<BizTodoItem[]>([
  {
    id: 1,
    title: '季度采购合同审批',
    type: '合同审批',
    applicant: '王倩',
    summary: '供应商已盖章，等待法务与财务会签后归档',
    createTime: '2026-10-16 09:20',
  },
  {
    id: 2,
    title: '服务器扩容申请',
    type: '资源申请',
    applicant: '刘洋',
    summary: '模型训练节点内存扩容至 256G',
    createTime: '2026-10-17 11:00',
  },
  {
    id: 3,
    title: '数据大屏访问权限申请',
    type: '权限申请',
    applicant: '赵敏',
    summary: '申请城市安全运行大屏的只读权限',
    createTime: '2026-10-18 11:40',
  },
  {
    id: 4,
    title: '合同归档确认',
    type: '合同审批',
    applicant: '孙洁',
    summary: '上半年框架合同归档编号补录',
    createTime: '2026-10-19 17:25',
  },
])

const onBadge = (count: number): void => {
  pending.value = count
}
</script>

<template>
  <div>
    <BizTodoCenter :items="items" @badge-report="onBadge" />
    <p style="margin: 10px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      输入「合同 / 扩容 / 赵敏」等关键字体验过滤（停止输入 300ms 后生效）；过滤后待办数：{{ pending }} 条
    </p>
  </div>
</template>

显示代码

优先级

紧急变更审批

今晚 22:00 割接窗口，超时顺延一周

刘洋2026-10-20 08:30

采购会签

涉及预算调整，需本周内完成会签

吴静2026-10-19 14:10

人事流程

待开通邮箱、门禁与内部系统权限

李强2026-10-18 09:05

知识库

不急，本月内评审即可

郑爽2026-10-17 16:45

urgent=危险红 + 「紧急」标；high=警告橙；normal=主色蓝；low=信息灰（level 缺省视为 normal）

level 四级：urgent=危险红（附「紧急」标）、high=警告橙、normal=主色蓝、low=信息灰；缺省视为 normal。

<script setup lang="ts">
/** 场景：优先级——四级等级色点（紧急红 / 高橙 / 普通蓝 / 低灰），紧急附「紧急」标 */
import { ref } from 'vue'
import { BizTodoCenter } from 'vue3-ep-biz-lib'
import type { BizTodoItem } from 'vue3-ep-biz-lib'

const items = ref<BizTodoItem[]>([
  {
    id: 1,
    title: '生产数据库迁移审批',
    type: '变更审批',
    level: 'urgent',
    applicant: '刘洋',
    summary: '今晚 22:00 割接窗口，超时顺延一周',
    createTime: '2026-10-20 08:30',
  },
  {
    id: 2,
    title: '安全设备采购单会签',
    type: '采购会签',
    level: 'high',
    applicant: '吴静',
    summary: '涉及预算调整，需本周内完成会签',
    createTime: '2026-10-19 14:10',
  },
  {
    id: 3,
    title: '新员工入职账号开通',
    type: '人事流程',
    level: 'normal',
    applicant: '李强',
    summary: '待开通邮箱、门禁与内部系统权限',
    createTime: '2026-10-18 09:05',
  },
  {
    id: 4,
    title: '内部知识库文章评审',
    type: '知识库',
    level: 'low',
    applicant: '郑爽',
    summary: '不急，本月内评审即可',
    createTime: '2026-10-17 16:45',
  },
])
</script>

<template>
  <div>
    <BizTodoCenter :items="items" :page-size="4" />
    <p style="margin: 10px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      urgent=危险红 + 「紧急」标；high=警告橙；normal=主色蓝；low=信息灰（level 缺省视为 normal）
    </p>
  </div>
</template>

显示代码

超期标识

紧急报告提交

上周五截止，已进入超期催办

何军2026-10-08 09:00已超期 5 天

隐患督办

昨天截止，等待现场复核照片

周凯2026-10-12 10:30已超期 1 天

行政流程

今日 18:00 截止

我2026-10-19 08:40截止 2026-10-26

会议材料

后天评审会前提交

赵敏2026-10-18 15:20截止 2026-10-28

总结

月底前完成即可

孙洁2026-10-16 11:15截止 2026-11-04

截止早于今天（自然日）→ 红色「已超期 X 天」；今天及以后 → 灰色「截止 yyyy-mm-dd」

dueTime 早于今天（按自然日）→ 红色「已超期 X 天」；今天及以后 → 灰色「截止 yyyy-mm-dd」。

<script setup lang="ts">
/** 场景：超期——截止时间早于今天标红「已超期 X 天」，未超期灰显截止日 */
import { ref } from 'vue'
import { BizTodoCenter } from 'vue3-ep-biz-lib'
import type { BizTodoItem } from 'vue3-ep-biz-lib'

/** 相对今天生成日期串，保证演示恒定出现超期 / 未超期 */
const dayOf = (offset: number): string => {
  const d = new Date()
  d.setDate(d.getDate() + offset)
  const pad = (n: number): string => String(n).padStart(2, '0')
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
}

const items = ref<BizTodoItem[]>([
  {
    id: 1,
    title: '年度安全评估报告提交',
    type: '报告提交',
    level: 'urgent',
    applicant: '何军',
    summary: '上周五截止，已进入超期催办',
    createTime: '2026-10-08 09:00',
    dueTime: dayOf(-5),
  },
  {
    id: 2,
    title: '隐患整改闭环确认',
    type: '隐患督办',
    level: 'high',
    applicant: '周凯',
    summary: '昨天截止，等待现场复核照片',
    createTime: '2026-10-12 10:30',
    dueTime: dayOf(-1),
  },
  {
    id: 3,
    title: '值班表调整申请',
    type: '行政流程',
    level: 'normal',
    applicant: '我',
    summary: '今日 18:00 截止',
    createTime: '2026-10-19 08:40',
    dueTime: dayOf(0),
  },
  {
    id: 4,
    title: '模型评审会材料准备',
    type: '会议材料',
    level: 'normal',
    applicant: '赵敏',
    summary: '后天评审会前提交',
    createTime: '2026-10-18 15:20',
    dueTime: dayOf(2),
  },
  {
    id: 5,
    title: '季度复盘总结',
    type: '总结',
    level: 'low',
    applicant: '孙洁',
    summary: '月底前完成即可',
    createTime: '2026-10-16 11:15',
    dueTime: dayOf(9),
  },
])
</script>

<template>
  <div>
    <BizTodoCenter :items="items" />
    <p style="margin: 10px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      截止早于今天（自然日）→ 红色「已超期 X 天」；今天及以后 → 灰色「截止 yyyy-mm-dd」
    </p>
  </div>
</template>

显示代码

行内操作

合同审批

供应商已盖章，等待法务与财务会签后归档

王倩2026-10-16 09:20

紧急财务报销

差旅报销 3,860 元，附发票 6 张

陈晨2026-10-19 16:30

资源申请

模型训练节点内存扩容至 256G

刘洋2026-10-17 11:00

操作记录：（无）

actions 配置行内按钮（ElButton link）；confirm 非空时先弹 ElMessageBox 二次确认，取消不触发 action 事件。

<script setup lang="ts">
/** 场景：操作——行内同意 / 驳回按钮，驳回带 ElMessageBox 二次确认（取消不触发） */
import { ref } from 'vue'
import { BizTodoCenter } from 'vue3-ep-biz-lib'
import type { BizTodoAction, BizTodoItem } from 'vue3-ep-biz-lib'

const actions: BizTodoAction[] = [
  { key: 'approve', label: '同意', type: 'primary' },
  { key: 'reject', label: '驳回', type: 'danger', confirm: '驳回后流程退回发起人，确认执行？' },
  { key: 'view', label: '查看', type: 'info' },
]

const items = ref<BizTodoItem[]>([
  {
    id: 1,
    title: '季度采购合同审批',
    type: '合同审批',
    level: 'high',
    applicant: '王倩',
    summary: '供应商已盖章，等待法务与财务会签后归档',
    createTime: '2026-10-16 09:20',
  },
  {
    id: 2,
    title: '报销单复核',
    type: '财务报销',
    level: 'urgent',
    applicant: '陈晨',
    summary: '差旅报销 3,860 元，附发票 6 张',
    createTime: '2026-10-19 16:30',
  },
  {
    id: 3,
    title: '服务器扩容申请',
    type: '资源申请',
    level: 'normal',
    applicant: '刘洋',
    summary: '模型训练节点内存扩容至 256G',
    createTime: '2026-10-17 11:00',
  },
])

const logs = ref<string[]>([])

const onAction = ({ item, action }: { item: BizTodoItem; action: BizTodoAction }): void => {
  logs.value = [`${action.label}「${item.title}」（${item.applicant ?? '-'}）`, ...logs.value].slice(0, 5)
  if (action.key === 'approve' || action.key === 'reject') {
    /* 模拟业务流转：完成后从未办列表移除 */
    items.value = items.value.filter((todo) => todo.id !== item.id)
  }
}
</script>

<template>
  <div>
    <BizTodoCenter :items="items" :actions="actions" :page-size="3" @action="onAction" />
    <p style="margin: 10px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      操作记录：{{ logs.length === 0 ? '（无）' : '' }}
    </p>
    <p
      v-for="(log, index) in logs"
      :key="index"
      style="margin: 2px 0 0; font-size: 12px; color: var(--el-text-color-secondary)"
    >
      {{ log }}
    </p>
  </div>
</template>

显示代码

分页

紧急运维流程

分页第 1 条事项的摘要说明

员工12026-10-01 09:00

权限申请

分页第 2 条事项的摘要说明

员工22026-10-02 09:00

采购会签

分页第 3 条事项的摘要说明

员工32026-10-03 09:00

运维流程

分页第 4 条事项的摘要说明

员工42026-10-04 09:00

紧急权限申请

分页第 5 条事项的摘要说明

员工52026-10-05 09:00

• 1
• 2
• 3

上：默认 pageSize=5，过滤 / 切页签后自动回到第 1 页

紧急运维流程

不分页第 1 条事项的摘要说明

员工12026-10-01 09:00

权限申请

不分页第 2 条事项的摘要说明

员工22026-10-02 09:00

采购会签

不分页第 3 条事项的摘要说明

员工32026-10-03 09:00

运维流程

不分页第 4 条事项的摘要说明

员工42026-10-04 09:00

紧急权限申请

不分页第 5 条事项的摘要说明

员工52026-10-05 09:00

采购会签

不分页第 6 条事项的摘要说明

员工62026-10-06 09:00

运维流程

不分页第 7 条事项的摘要说明

员工72026-10-07 09:00

权限申请

不分页第 8 条事项的摘要说明

员工82026-10-08 09:00

紧急采购会签

不分页第 9 条事项的摘要说明

员工92026-10-09 09:00

运维流程

不分页第 10 条事项的摘要说明

员工102026-10-10 09:00

权限申请

不分页第 11 条事项的摘要说明

员工112026-10-11 09:00

下：page-size=0 关闭分页，11 条全部展示

默认 page-size=5 前端分页（layout 为 prev, pager, next）；page-size=0 关闭分页；过滤 / 切页签 / 改每页条数自动回到第 1 页。

<script setup lang="ts">
/** 场景：分页——默认每页 5 条分页；page-size=0 关闭分页一次看全 */
import { ref } from 'vue'
import { BizTodoCenter } from 'vue3-ep-biz-lib'
import type { BizTodoItem } from 'vue3-ep-biz-lib'

const buildItems = (prefix: string): BizTodoItem[] =>
  Array.from({ length: 11 }, (_, i): BizTodoItem => ({
    id: i + 1,
    title: `${prefix}事项 ${String(i + 1).padStart(2, '0')}`,
    type: i % 3 === 0 ? '运维流程' : i % 3 === 1 ? '权限申请' : '采购会签',
    level: i % 4 === 0 ? 'urgent' : i % 4 === 1 ? 'high' : i % 4 === 2 ? 'normal' : 'low',
    applicant: `员工${i + 1}`,
    summary: `${prefix}第 ${i + 1} 条事项的摘要说明`,
    createTime: `2026-10-${String((i % 20) + 1).padStart(2, '0')} 09:00`,
  }))

const pagedItems = ref<BizTodoItem[]>(buildItems('分页'))
const plainItems = ref<BizTodoItem[]>(buildItems('不分页'))
</script>

<template>
  <div>
    <BizTodoCenter :items="pagedItems" />
    <p style="margin: 6px 0 16px; font-size: 12px; color: var(--el-text-color-secondary)">
      上：默认 pageSize=5，过滤 / 切页签后自动回到第 1 页
    </p>
    <BizTodoCenter :items="plainItems" :page-size="0" />
    <p style="margin: 6px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      下：page-size=0 关闭分页，11 条全部展示
    </p>
  </div>
</template>

显示代码

角标上报

待办中心（当前待办 0 条，随列表过滤实时更新）

合同审批

供应商已盖章，等待会签

王倩2026-10-16 09:20

紧急财务报销

差旅报销 3,860 元

陈晨2026-10-19 16:30

待办页签（key='todo'）条数变化时（含 immediate 首次）触发 badge-report，可直接接到导航铃铛 / 菜单角标。

<script setup lang="ts">
/** 场景：角标——badge-report 上报待办数，用于导航 / 铃铛角标回显 */
import { ref } from 'vue'
import { ElBadge, ElIcon } from 'element-plus'
import { Bell } from '@element-plus/icons-vue'
import { BizTodoCenter } from 'vue3-ep-biz-lib'
import type { BizTodoItem } from 'vue3-ep-biz-lib'

const pending = ref(0)

const items = ref<BizTodoItem[]>([
  {
    id: 1,
    title: '季度采购合同审批',
    type: '合同审批',
    level: 'high',
    applicant: '王倩',
    summary: '供应商已盖章，等待会签',
    createTime: '2026-10-16 09:20',
  },
  {
    id: 2,
    title: '报销单复核',
    type: '财务报销',
    level: 'urgent',
    applicant: '陈晨',
    summary: '差旅报销 3,860 元',
    createTime: '2026-10-19 16:30',
  },
  {
    id: 3,
    title: '服务器扩容申请',
    type: '资源申请',
    applicant: '刘洋',
    summary: '模型训练节点内存扩容至 256G',
    createTime: '2026-10-17 11:00',
    source: 'done',
  },
])

const onBadge = (count: number): void => {
  pending.value = count
}
</script>

<template>
  <div>
    <p style="margin: 0 0 10px; display: flex; align-items: center; gap: 8px; font-size: 13px">
      <ElBadge :value="pending" :hidden="pending === 0" :max="99">
        <ElIcon :size="18"><Bell /></ElIcon>
      </ElBadge>
      待办中心（当前待办 {{ pending }} 条，随列表过滤实时更新）
    </p>
    <BizTodoCenter :items="items" @badge-report="onBadge" />
  </div>
</template>

显示代码

自定义行内容

[隐患督办] 隐患整改闭环确认 整改进度 40% 发起人：周凯

[会议材料] 模型评审会材料准备 整改进度 70% 发起人：赵敏

[采购会签] 安全设备采购单会签 整改进度 10% 发起人：吴静

item 插槽收到 { item, index }；页签 / 检索 / 分页能力不受影响

item 插槽收到 { item, index } 接管整行渲染；另有 actions 插槽（{ item }）只替换操作区、header / empty 插槽定制头部与空态。

<script setup lang="ts">
/** 场景：自定义行——item 插槽接管整行内容（计数进度 + 自定义元信息排版） */
import { ref } from 'vue'
import { BizTodoCenter } from 'vue3-ep-biz-lib'
import type { BizTodoItem } from 'vue3-ep-biz-lib'

const activeTab = ref('todo')

const items = ref<BizTodoItem[]>([
  {
    id: 1,
    title: '隐患整改闭环确认',
    type: '隐患督办',
    level: 'high',
    applicant: '周凯',
    summary: '化工园区 3 处重大隐患整改进度 60%',
    createTime: '2026-10-12 16:20',
  },
  {
    id: 2,
    title: '模型评审会材料准备',
    type: '会议材料',
    level: 'normal',
    applicant: '赵敏',
    summary: '后天评审会前提交',
    createTime: '2026-10-18 15:20',
  },
  {
    id: 3,
    title: '安全设备采购单会签',
    type: '采购会签',
    level: 'urgent',
    applicant: '吴静',
    summary: '涉及预算调整，需本周内完成会签',
    createTime: '2026-10-19 14:10',
  },
])

const progressOf = (item: BizTodoItem): number => (Number(item.id) % 3) * 30 + 10
</script>

<template>
  <div>
    <BizTodoCenter v-model:active-tab="activeTab" :items="items" :page-size="3">
      <template #item="{ item }">
        <div style="display: flex; align-items: center; gap: 10px; padding: 4px 0">
          <span style="font-weight: 600; color: var(--el-text-color-primary); white-space: nowrap">
            [{{ item.type ?? '事项' }}] {{ item.title }}
          </span>
          <span
            style="margin-left: auto; flex-shrink: 0; font-size: 12px; color: var(--el-color-primary)"
          >
            整改进度 {{ progressOf(item) }}%
          </span>
          <span
            style="flex-shrink: 0; font-size: 12px; color: var(--el-text-color-secondary)"
          >
            发起人：{{ item.applicant ?? '-' }}
          </span>
        </div>
      </template>
    </BizTodoCenter>
    <p style="margin: 10px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      item 插槽收到 { item, index }；页签 / 检索 / 分页能力不受影响
    </p>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
items	BizTodoItem[]	[]	事项数据（组件不含接口，业务侧拉取后回填）
tabs	BizTodoTab[]	[{key:'todo',name:'待办'},{key:'done',name:'已办'},{key:'initiated',name:'我发起'}]	页签配置（key 与 item.source 对应）
v-model:active-tab	string	'todo'	激活页签 key
filterable	boolean	true	关键字检索框（300ms 防抖）
page-size	number	5	每页条数；0 不分页
actions	BizTodoAction[]	[]	行内操作按钮（confirm 非空先二次确认）
show-time	boolean	true	展示创建时间
show-applicant	boolean	true	展示发起人
loading	boolean	false	加载中（3 行骨架）
empty-text	string	'暂无事项'	空态文案

Events

事件名	参数	说明
update:activeTab	(key: string)	激活页签变化（v-model:active-tab）
tab-change	(key: string)	页签切换（与 update:activeTab 同时触发）
action	(payload: { item: BizTodoItem; action: BizTodoAction })	行内操作确认后触发
item-click	(item: BizTodoItem)	点击事项标题
badge-report	(count: number)	待办（key='todo'）条数变化上报（watch immediate）

Slots

插槽名	说明
item	自定义整行内容，参数 { item, index }
actions	自定义行内操作区，参数 { item }（item 插槽接管整行时不再生效）
empty	自定义空态
header	顶部自定义内容（页签条之上）

Expose

名称	类型	说明
setActiveTab	(key: string) => void	切换页签（与点击页签一致：触发 update:activeTab 与 tab-change）
getActiveTab	() => string	当前激活页签 key
getPendingCount	() => number	待办（source='todo'）条数（含关键字过滤，与页签角标一致）
getFilteredItems	() => BizTodoItem[]	当前页签 + 关键字过滤后的完整列表（分页切片前）