feat(workbench): show expense distribution as donut chart

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

@@ -39,7 +39,7 @@
 
 ### 费用分布
 
-按单据标题、场景或备注归类费用类型，统计每类金额、单据数量和金额占比。若数据不足，展示空状态。
+按单据标题、场景或备注归类费用类型，统计每类金额、单据数量和金额占比。详情区使用项目现有 `DonutChart` 饼图展示费用分布，并通过图例保留金额与占比信息。若数据不足，展示空状态。
 
 ### 处理时间
 
@@ -55,6 +55,7 @@
 
 - 在 `workbenchSummary.js` 中新增 `expenseStatsDetail` 汇总结构。
 - 新增 `ExpenseStatsDetailModal.vue`，复用 Element Plus `ElDialog`、`ElButton`、`ElTag` 的企业后台弹窗体验。
+- 费用分布展示复用现有 `DonutChart`，不手写临时 SVG、Canvas 或 CSS 饼图。
 - 在 `PersonalWorkbench.vue` 中接入弹窗状态，费用统计“查看详情”只打开弹窗。
 - 调整 `personal-workbench.css` 中长时间分割标识的居中与强调样式。
 
@@ -89,7 +90,7 @@ $$
 - 源码测试确认费用进度不再渲染“全部进度”按钮。
 - 源码测试确认“费用统计”的“查看详情”打开弹窗而不是进入助手。
 - 单元测试确认 `buildWorkbenchSummary` 能生成费用分布、处理时间和操作明细。
-- 源码测试确认弹窗包含费用分布、处理时间和系统操作详情区块。
+- 源码测试确认弹窗包含费用分布饼图、处理时间和系统操作详情区块。
 - 运行前端构建验证组件编译通过。
 
 ## 指标与验收
@@ -97,7 +98,7 @@ $$
 - “10日以上”标识位于分割线中间，且使用主题强调色。
 - “费用进度”卡片右上角不再出现“全部进度”。
 - 点击“费用统计”的“查看详情”打开详情弹窗。
-- 弹窗至少包含费用分布、处理时间、系统操作详情三个信息区。
+- 弹窗至少包含费用分布饼图、处理时间、系统操作详情三个信息区。
 - 相关测试与前端构建通过。
 
 ## 风险与开放问题

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

@@ -12,6 +12,7 @@
 - [x] 在 `workbenchSummary.js` 生成费用分布、处理时间、系统操作详情数据。[CONCEPT: 算法与公式] 证据：新增 `expenseStatsDetail` 汇总结构。
 - [x] 新增费用统计详情弹窗组件，展示三个详情区块和空状态。[CONCEPT: 功能能力] 证据：新增 `ExpenseStatsDetailModal.vue`。
 - [x] 在 `PersonalWorkbench.vue` 接入弹窗状态与费用统计“查看详情”按钮。[CONCEPT: 方案设计] 证据：新增 `expenseStatsModalOpen` 与 `openExpenseStatsModal`。
+- [x] 将费用分布区从条形列表改为 `DonutChart` 饼图展示。[CONCEPT: 功能能力] 证据：`ExpenseStatsDetailModal.vue` 已接入 `DonutChart` 和 `distributionChartItems`。
 
 ## 测试与验证
 
@@ -19,6 +20,7 @@
 - [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: 测试方案] 证据：`node web/tests/expense-stats-detail-modal.test.mjs` 通过，`npm.cmd --prefix web run build` 通过。
 
 ## 交付