FlowStats 流程统计卡片

流程统计面板组件。展示待办任务、已办任务、发起的流程、抄送我的四个统计卡片。支持点击切换，待办和抄送显示未读角标。

• 基础用法
• Props
• Events
• 典型搭配

基础用法

<template>
  <FlowStats
    :todo-count="todoCount"
    :done-count="doneCount"
    :started-count="startedCount"
    :cc-count="ccCount"
    :unread-cc="unreadCcCount"
    :active-tab="activeTab"
    @switch="handleTabSwitch"
  />
</template>

<script setup>
import { ref } from 'vue'
import FlowStats from '@/components/flow/FlowStats.vue'

const todoCount = ref(5)
const doneCount = ref(23)
const startedCount = ref(12)
const ccCount = ref(8)
const unreadCcCount = ref(3)
const activeTab = ref('todo')

function handleTabSwitch(tab) {
  console.log('切换到:', tab) // 'todo' | 'done' | 'started' | 'cc'
  activeTab.value = tab
}
</script>

Props

属性	类型	默认值	说明
todoCount	Number	0	待办任务数量
doneCount	Number	0	已办任务数量
startedCount	Number	0	发起的流程数量
ccCount	Number	0	抄送我的数量
unreadCc	Number	0	未读抄送数量（显示红点角标）
activeTab	String	'todo'	当前激活的标签：'todo' | 'done' | 'started' | 'cc'

Events

事件名	参数	说明
switch	(tab: string)	点击卡片切换标签时触发

典型搭配

通常与 FlowTaskCardList 组合使用：

<FlowStats
  :todo-count="counts.todo"
  :done-count="counts.done"
  :started-count="counts.started"
  :cc-count="counts.cc"
  :unread-cc="counts.unreadCc"
  :active-tab="activeTab"
  @switch="activeTab = $event"
/>
<FlowTaskCardList
  :title="tabTitle"
  :items="taskList"
  :loading="loading"
  :pagination="pagination"
  :selected-keys="selectedKeys"
  @row-click="handleTaskClick"
/>