X-Financial/document/development/工作台费用统计详情弹窗/CONCEPT.md

工作台费用统计详情弹窗概念文档

功能一句话

在个人工作台的“费用统计”卡片中提供本地弹窗详情，让用户直接查看历史费用分布、单据处理时间和系统操作明细。

背景与问题

当前“费用统计”右上角的“查看详情”会进入助手问答，不符合用户期望的“像用户画像一样直接看详情”的操作方式。费用进度区域也存在两个可见性问题：右上角“全部进度”按钮没有实际承载完整列表能力，10 日以上分割标识靠左且不醒目。

本次调整需要让工作台成为个人费用操作的直接入口：用户不离开首页即可理解自己的费用结构、单据流转时间和近期系统动作。

目标与非目标

目标：

• 移除“费用进度”右上角的“全部进度”按钮，减少无效操作。
• 将“10日以上”分割标识放在分割线中间，并使用更醒目的主题强调色。
• 将“费用统计”的“查看详情”改为打开详情弹窗。
• 弹窗展示历史报销费用分布、单据处理时间和系统操作详情。
• 数据优先来自 buildWorkbenchSummary 已有的当前用户单据汇总，不新增后端接口。

非目标：

• 不新增后端 API。
• 不改变报销单据审批状态计算规则。
• 不替代用户画像详情弹窗。
• 不做复杂图表库接入，避免为了一个工作台弹窗扩大依赖和维护面。

用户与场景

主要用户是个人员工和经常处理报销的业务人员。典型场景：

• 在首页查看本月报销情况后，想进一步确认自己的历史费用主要花在哪些类别。
• 想知道近期单据从创建到当前状态大概处理了多久。
• 想复盘系统里最近需要处理或已提醒的费用相关动作。

功能能力

费用分布

按单据标题、场景或备注归类费用类型，统计每类金额、单据数量和金额占比。详情区使用项目现有 DonutChart 饼图展示费用分布，并通过图例保留金额与占比信息。若数据不足，展示空状态。

处理时间

按单据创建、提交、更新或进度步骤时间推断处理耗时，输出可读的耗时文案，并展示当前状态和节点数量。

操作详情

基于待办、通知和进度项生成系统操作明细，帮助用户理解最近有哪些费用动作需要关注。

方案设计

前端实现：

• 在 workbenchSummary.js 中新增 expenseStatsDetail 汇总结构。
• 新增 ExpenseStatsDetailModal.vue，复用 Element Plus ElDialog、ElButton、ElTag 的企业后台弹窗体验。
• 费用分布展示复用现有 DonutChart，不手写临时 SVG、Canvas 或 CSS 饼图。
• 在 PersonalWorkbench.vue 中接入弹窗状态，费用统计“查看详情”只打开弹窗。
• 调整 personal-workbench.css 中长时间分割标识的居中与强调样式。

数据结构：

expenseStatsDetail: {
  distributionRows: [],
  processingRows: [],
  operationRows: []
}

算法与公式

费用类型金额占比：

percent_i = \frac{amount_i}{\sum_{k=1}^{n} amount_k} \times 100

单据处理耗时：

duration = latestTime - firstTime

其中 firstTime 优先取单据创建时间、提交时间或最早进度步骤时间，latestTime 优先取更新时间或最新进度步骤时间。

测试方案

• 源码测试确认费用进度不再渲染“全部进度”按钮。
• 源码测试确认“费用统计”的“查看详情”打开弹窗而不是进入助手。
• 单元测试确认 buildWorkbenchSummary 能生成费用分布、处理时间和操作明细。
• 源码测试确认弹窗包含费用分布饼图、处理时间和系统操作详情区块。
• 运行前端构建验证组件编译通过。

指标与验收

• “10日以上”标识位于分割线中间，且使用主题强调色。
• “费用进度”卡片右上角不再出现“全部进度”。
• 点击“费用统计”的“查看详情”打开详情弹窗。
• 弹窗至少包含费用分布饼图、处理时间、系统操作详情三个信息区。
• 相关测试与前端构建通过。

风险与开放问题

• 当前数据来自工作台前端汇总，历史维度受首页已加载单据范围影响；若后续需要跨年或分页全量统计，应补后端专用接口。
• 单据类型归类依赖标题、场景和备注，属于前端轻量归类；后续可与 ontology 费用类别字段打通。

2026-06-03 饼图呈现修正

费用分布仍复用项目已有 DonutChart，但在费用统计详情弹窗内关闭组件自带图例，只保留一个环形饼图入口。费用类型、金额、笔数和占比改为右侧文字明细列表，避免环图主体和双列图例在同一卡片内被误认为出现两个饼图。