From 9c24a852e7aa7850d07b30783718c45f09a22507 Mon Sep 17 00:00:00 2001
From: caoxiaozhu <caoxiaozhu@users.noreply.github.com>
Date: Wed, 3 Jun 2026 17:22:48 +0800
Subject: [PATCH] fix(workbench): remount expense stats chart on reopen

---
 .../business/ExpenseStatsDetailModal.vue          | 15 ++++++++++++++-
 web/tests/expense-stats-detail-modal.test.mjs     |  5 +++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/web/src/components/business/ExpenseStatsDetailModal.vue b/web/src/components/business/ExpenseStatsDetailModal.vue
index 5c98c62..033a04a 100644
--- a/web/src/components/business/ExpenseStatsDetailModal.vue
+++ b/web/src/components/business/ExpenseStatsDetailModal.vue
@@ -6,6 +6,7 @@
     width="min(980px, calc(100vw - 48px))"
     :show-close="false"
     :lock-scroll="true"
+    destroy-on-close
     class="expense-stats-detail-dialog"
     modal-class="expense-stats-detail-overlay"
     body-class="expense-stats-detail-body"
@@ -53,6 +54,7 @@
           <div v-if="distributionChartItems.length" class="expense-distribution-chart">
             <div class="expense-distribution-chart-layout">
               <DonutChart
+                :key="distributionChartRenderKey"
                 class="expense-distribution-donut"
                 :items="distributionChartItems"
                 :center-value="distributionCenterValue"
@@ -139,7 +141,7 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed, ref, watch } from 'vue'
 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'
@@ -154,6 +156,7 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['close'])
+const chartRenderSeq = ref(0)
 
 const summaryMetrics = computed(() => [
   {
@@ -198,6 +201,7 @@ const distributionChartColors = [
   'var(--theme-primary-active)'
 ]
 const distributionCenterValue = computed(() => props.summary.totalAmountLabel || '¥0')
+const distributionChartRenderKey = computed(() => `expense-distribution-${chartRenderSeq.value}`)
 const distributionChartItems = computed(() => distributionRows.value.map((row, index) => ({
   name: row.label,
   value: Number(row.amount || 0),
@@ -205,6 +209,15 @@ const distributionChartItems = computed(() => distributionRows.value.map((row, i
   color: distributionChartColors[index % distributionChartColors.length]
 })))
 
+watch(
+  () => props.visible,
+  (visible) => {
+    if (visible) {
+      chartRenderSeq.value += 1
+    }
+  }
+)
+
 function resolveDistributionColor(index) {
   return distributionChartColors[index % distributionChartColors.length]
 }
diff --git a/web/tests/expense-stats-detail-modal.test.mjs b/web/tests/expense-stats-detail-modal.test.mjs
index 6c1a191..1d486f8 100644
--- a/web/tests/expense-stats-detail-modal.test.mjs
+++ b/web/tests/expense-stats-detail-modal.test.mjs
@@ -14,12 +14,17 @@ test('expense stats detail modal exposes distribution, processing time and opera
   assert.match(modal, /单据处理时间/)
   assert.match(modal, /系统操作详情/)
   assert.match(modal, /ElDialog/)
+  assert.match(modal, /destroy-on-close/)
   assert.match(modal, /ElTag/)
   assert.match(modal, /import DonutChart from '\.\.\/charts\/DonutChart\.vue'/)
   assert.match(modal, /<DonutChart/)
+  assert.match(modal, /:key="distributionChartRenderKey"/)
   assert.match(modal, /:show-legend="false"/)
   assert.match(modal, /distributionChartItems/)
   assert.match(modal, /distributionCenterValue/)
+  assert.match(modal, /const chartRenderSeq = ref\(0\)/)
+  assert.match(modal, /const distributionChartRenderKey = computed\(\(\) => `expense-distribution-\$\{chartRenderSeq\.value\}`\)/)
+  assert.match(modal, /watch\([\s\S]*\(\) => props\.visible[\s\S]*chartRenderSeq\.value \+= 1/)
   assert.match(modal, /distributionRows/)
   assert.match(modal, /expense-distribution-summary-list/)
   assert.match(modal, /resolveDistributionColor/)