feat(workbench): add expense stats detail modal

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

@@ -0,0 +1,106 @@
+# 工作台费用统计详情弹窗概念文档
+
+## 功能一句话
+
+在个人工作台的“费用统计”卡片中提供本地弹窗详情，让用户直接查看历史费用分布、单据处理时间和系统操作明细。
+
+## 背景与问题
+
+当前“费用统计”右上角的“查看详情”会进入助手问答，不符合用户期望的“像用户画像一样直接看详情”的操作方式。费用进度区域也存在两个可见性问题：右上角“全部进度”按钮没有实际承载完整列表能力，10 日以上分割标识靠左且不醒目。
+
+本次调整需要让工作台成为个人费用操作的直接入口：用户不离开首页即可理解自己的费用结构、单据流转时间和近期系统动作。
+
+## 目标与非目标
+
+目标：
+
+- 移除“费用进度”右上角的“全部进度”按钮，减少无效操作。
+- 将“10日以上”分割标识放在分割线中间，并使用更醒目的主题强调色。
+- 将“费用统计”的“查看详情”改为打开详情弹窗。
+- 弹窗展示历史报销费用分布、单据处理时间和系统操作详情。
+- 数据优先来自 `buildWorkbenchSummary` 已有的当前用户单据汇总，不新增后端接口。
+
+非目标：
+
+- 不新增后端 API。
+- 不改变报销单据审批状态计算规则。
+- 不替代用户画像详情弹窗。
+- 不做复杂图表库接入，避免为了一个工作台弹窗扩大依赖和维护面。
+
+## 用户与场景
+
+主要用户是个人员工和经常处理报销的业务人员。典型场景：
+
+- 在首页查看本月报销情况后，想进一步确认自己的历史费用主要花在哪些类别。
+- 想知道近期单据从创建到当前状态大概处理了多久。
+- 想复盘系统里最近需要处理或已提醒的费用相关动作。
+
+## 功能能力
+
+### 费用分布
+
+按单据标题、场景或备注归类费用类型，统计每类金额、单据数量和金额占比。若数据不足，展示空状态。
+
+### 处理时间
+
+按单据创建、提交、更新或进度步骤时间推断处理耗时，输出可读的耗时文案，并展示当前状态和节点数量。
+
+### 操作详情
+
+基于待办、通知和进度项生成系统操作明细，帮助用户理解最近有哪些费用动作需要关注。
+
+## 方案设计
+
+前端实现：
+
+- 在 `workbenchSummary.js` 中新增 `expenseStatsDetail` 汇总结构。
+- 新增 `ExpenseStatsDetailModal.vue`，复用 Element Plus `ElDialog`、`ElButton`、`ElTag` 的企业后台弹窗体验。
+- 在 `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 费用类别字段打通。

document/development/工作台费用统计详情弹窗/TODO.md

@@ -0,0 +1,26 @@
+# 工作台费用统计详情弹窗 TODO
+
+## 调研与契约
+
+- [x] 核对 `PersonalWorkbench.vue`、工作台样式和现有用户画像弹窗结构。[CONCEPT: 方案设计] 证据：已确认工作台入口、`ExpenseProfileDetailModal.vue` 弹窗模式和 `personal-workbench.css` 分割样式。
+- [x] 明确费用详情弹窗的数据结构，并限制为前端工作台汇总数据。[CONCEPT: 功能能力] 证据：采用 `expenseStatsDetail`，由 `buildWorkbenchSummary` 基于当前用户单据生成。
+
+## 前端实现
+
+- [x] 移除费用进度卡片右上角“全部进度”按钮。[CONCEPT: 目标与非目标] 证据：`PersonalWorkbench.vue` 的费用进度标题区已移除该按钮。
+- [x] 调整“10日以上”分割标识为居中、醒目主题色样式。[CONCEPT: 指标与验收] 证据：`personal-workbench.css` 使用 `left: 50%`、`transform: translateX(-50%)` 和主题强调色。
+- [x] 在 `workbenchSummary.js` 生成费用分布、处理时间、系统操作详情数据。[CONCEPT: 算法与公式] 证据：新增 `expenseStatsDetail` 汇总结构。
+- [x] 新增费用统计详情弹窗组件，展示三个详情区块和空状态。[CONCEPT: 功能能力] 证据：新增 `ExpenseStatsDetailModal.vue`。
+- [x] 在 `PersonalWorkbench.vue` 接入弹窗状态与费用统计“查看详情”按钮。[CONCEPT: 方案设计] 证据：新增 `expenseStatsModalOpen` 与 `openExpenseStatsModal`。
+
+## 测试与验证
+
+- [x] 补充工作台源码测试，覆盖按钮移除、弹窗接入和分割标识样式。[CONCEPT: 测试方案] 证据：`node web/tests/personal-workbench-assistant.test.mjs` 通过。
+- [x] 补充工作台汇总单元测试，覆盖详情数据生成。[CONCEPT: 测试方案] 证据：`node web/tests/workbench-summary.test.mjs` 通过。
+- [x] 补充弹窗源码测试，覆盖费用分布、处理时间、系统操作详情区块。[CONCEPT: 测试方案] 证据：`node web/tests/expense-stats-detail-modal.test.mjs` 通过。
+- [x] 运行前端定向测试和构建验证。[CONCEPT: 指标与验收] 证据：以上定向测试和 `npm.cmd --prefix web run build` 均通过。
+
+## 交付
+
+- [x] 复查本次暂存范围，避免纳入无关工作区改动。[CONCEPT: 风险与开放问题] 证据：`git diff --cached --name-only` 仅包含本次工作台弹窗、样式、汇总测试和开发文档。
+- [ ] 提交并 push 本次功能分支。[CONCEPT: 指标与验收]