feat(workbench): show expense distribution as donut chart

2026-06-03 15:31:09 +08:00
parent 74d488adfa
commit 18d716bc6b
4 changed files with 61 additions and 58 deletions
--- a/document/development/工作台费用统计详情弹窗/CONCEPT.md
+++ b/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日以上”标识位于分割线中间，且使用主题强调色。
 - “费用进度”卡片右上角不再出现“全部进度”。
 - 点击“费用统计”的“查看详情”打开详情弹窗。
- 弹窗至少包含费用分布、处理时间、系统操作详情三个信息区。
+- 弹窗至少包含费用分布饼图、处理时间、系统操作详情三个信息区。
 - 相关测试与前端构建通过。

 ## 风险与开放问题
--- a/document/development/工作台费用统计详情弹窗/TODO.md
+++ b/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` 通过。

 ## 交付

--- a/web/src/components/business/ExpenseStatsDetailModal.vue
+++ b/web/src/components/business/ExpenseStatsDetailModal.vue
@@ -50,22 +50,13 @@
            </div>
          </div>

-          <div v-if="distributionRows.length" class="expense-distribution-list">
-            <article
-              v-for="row in distributionRows"
-              :key="row.key"
-              class="expense-distribution-row"
-              :style="{ '--expense-detail-percent': `${Math.max(4, row.percent || 0)}%` }"
-            >
-              <div class="expense-distribution-copy">
-                <strong>{{ row.label }}</strong>
-                <span>{{ row.count }} 笔 · {{ row.amountLabel }}</span>
-              </div>
-              <div class="expense-distribution-track" aria-hidden="true">
-                <span></span>
-              </div>
-              <em>{{ row.percentLabel }}</em>
-            </article>
+          <div v-if="distributionChartItems.length" class="expense-distribution-chart">
+            <DonutChart
+              class="expense-distribution-donut"
+              :items="distributionChartItems"
+              :center-value="distributionCenterValue"
+              center-label="费用总额"
+            />
          </div>
          <p v-else class="expense-stats-empty">暂无历史报销费用分布。</p>
        </section>
@@ -136,6 +127,8 @@ import { ElButton } from 'element-plus/es/components/button/index.mjs'
 import { ElDialog } from 'element-plus/es/components/dialog/index.mjs'
 import { ElTag } from 'element-plus/es/components/tag/index.mjs'

+import DonutChart from '../charts/DonutChart.vue'
+
 const props = defineProps({
  visible: { type: Boolean, default: false },
  userName: { type: String, default: '同事' },
@@ -179,6 +172,21 @@ const summaryMetrics = computed(() => [
 const distributionRows = computed(() => Array.isArray(props.detail.distributionRows) ? props.detail.distributionRows : [])
 const processingRows = computed(() => Array.isArray(props.detail.processingRows) ? props.detail.processingRows : [])
 const operationRows = computed(() => Array.isArray(props.detail.operationRows) ? props.detail.operationRows : [])
+const distributionChartColors = [
+  'var(--chart-blue)',
+  'var(--chart-amber)',
+  'var(--chart-purple)',
+  'var(--theme-primary)',
+  'var(--success)',
+  'var(--theme-primary-active)'
+]
+const distributionCenterValue = computed(() => props.summary.totalAmountLabel || '¥0')
+const distributionChartItems = computed(() => distributionRows.value.map((row, index) => ({
+  name: row.label,
+  value: Number(row.amount || 0),
+  display: `${row.percentLabel || '0%'} / ${row.count || 0}笔`,
+  color: distributionChartColors[index % distributionChartColors.length]
+})))

 function emitClose() {
  emit('close')
@@ -348,7 +356,6 @@ function resolveTagType(tone) {
 }

 .expense-stats-summary-item span,
-.expense-distribution-copy span,
 .expense-processing-meta,
 .expense-operation-row time,
 .expense-operation-copy span {
@@ -412,30 +419,18 @@ function resolveTagType(tone) {
  font-weight: 850;
 }

-.expense-distribution-list,
 .expense-processing-list,
 .expense-operation-list {
  display: grid;
  gap: 8px;
 }

-.expense-distribution-row {
-  display: grid;
-  grid-template-columns: minmax(136px, 0.78fr) minmax(120px, 1fr) 44px;
-  align-items: center;
-  gap: 10px;
-  padding: 8px 0;
-  border-top: 1px solid #e8eef5;
-}
-
-.expense-distribution-row:first-child,
 .expense-processing-row:first-child,
 .expense-operation-row:first-child {
  border-top: 0;
  padding-top: 0;
 }

-.expense-distribution-copy,
 .expense-processing-main,
 .expense-operation-copy {
  min-width: 0;
@@ -443,7 +438,6 @@ function resolveTagType(tone) {
  gap: 3px;
 }

-.expense-distribution-copy strong,
 .expense-processing-main strong,
 .expense-operation-copy strong {
  overflow: hidden;
@@ -454,27 +448,30 @@ function resolveTagType(tone) {
  white-space: nowrap;
 }

-.expense-distribution-track {
+.expense-distribution-chart {
+  min-height: 286px;
+  display: grid;
+  align-items: stretch;
+}
+
+.expense-distribution-donut {
+  min-height: 286px;
+}
+
+.expense-distribution-donut :deep(.donut-body) {
+  height: 194px;
+  margin-top: 0;
+}
+
+.expense-distribution-donut :deep(.donut-legend) {
+  gap: 7px 14px;
+}
+
+.expense-distribution-donut :deep(.legend-name) {
+  min-width: 0;
  overflow: hidden;
-  height: 7px;
-  border-radius: 4px;
-  background: #e8eef5;
-}
-
-.expense-distribution-track span {
-  display: block;
-  width: var(--expense-detail-percent);
-  height: 100%;
-  border-radius: inherit;
-  background: linear-gradient(90deg, var(--theme-primary), var(--theme-primary-active));
-}
-
-.expense-distribution-row em {
-  color: var(--theme-primary-active);
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 850;
-  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }

 .expense-processing-row {
@@ -584,14 +581,12 @@ function resolveTagType(tone) {

@media (max-width: 620px) {
  .expense-processing-row,
-  .expense-operation-row,
-  .expense-distribution-row {
+  .expense-operation-row {
    grid-template-columns: 1fr;
    align-items: start;
  }

-  .expense-processing-row b,
-  .expense-distribution-row em {
+  .expense-processing-row b {
    text-align: left;
  }
 }
--- a/web/tests/expense-stats-detail-modal.test.mjs
+++ b/web/tests/expense-stats-detail-modal.test.mjs
@@ -15,9 +15,14 @@ test('expense stats detail modal exposes distribution, processing time and opera
  assert.match(modal, /系统操作详情/)
  assert.match(modal, /ElDialog/)
  assert.match(modal, /ElTag/)
+  assert.match(modal, /import DonutChart from '\.\.\/charts\/DonutChart\.vue'/)
+  assert.match(modal, /<DonutChart/)
+  assert.match(modal, /distributionChartItems/)
+  assert.match(modal, /distributionCenterValue/)
  assert.match(modal, /distributionRows/)
  assert.match(modal, /processingRows/)
  assert.match(modal, /operationRows/)
-  assert.match(modal, /--expense-detail-percent/)
+  assert.doesNotMatch(modal, /--expense-detail-percent/)
+  assert.doesNotMatch(modal, /expense-distribution-track/)
  assert.match(modal, /统计口径来自当前工作台已加载的个人单据/)
 })