feat(workbench): show expense distribution as donut chart

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;
   }
 }

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, /统计口径来自当前工作台已加载的个人单据/)
 })