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` 中长时间分割标识的居中与强调样式。

数据结构：

```js
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`，但在费用统计详情弹窗内关闭组件自带图例，只保留一个环形饼图入口。费用类型、金额、笔数和占比改为右侧文字明细列表，避免环图主体和双列图例在同一卡片内被误认为出现两个饼图。