From ad7982930415f017d29784c3a10dbfdb077dda24 Mon Sep 17 00:00:00 2001
From: songjie <bestsongj@163.com>
Date: Fri, 23 Jan 2026 15:49:05 +0800
Subject: [PATCH] =?UTF-8?q?SWR=20(Stale-While-Revalidate)=20=E7=AD=96?=
 =?UTF-8?q?=E7=95=A5=E5=AE=9E=E7=8E=B0=E6=97=A0=E6=84=9F=E5=88=B7=E6=96=B0?=
 =?UTF-8?q?=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/PlatformData/UserOverview.vue | 39 +++++++++++++++++++++++++++------
 1 file changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/views/PlatformData/UserOverview.vue b/src/views/PlatformData/UserOverview.vue
index fe25bc1..2aa3833 100644
--- a/src/views/PlatformData/UserOverview.vue
+++ b/src/views/PlatformData/UserOverview.vue
@@ -251,6 +251,12 @@ const formatDate = (date) => {
     return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
 };
 
+const isOverviewLoaded = ref(false);
+const isDetailLoaded = ref(false);
+
+const chartMemberInstance = ref(null);
+const chartNewOldInstance = ref(null);
+
 const fetchData = async () => {
   try {
     const res = await getUserOverviewList();
@@ -259,14 +265,21 @@ const fetchData = async () => {
     if (res && res.list) {
       overviewData.value = res.list;
       initCharts();
+      isOverviewLoaded.value = true;
     }
   } catch (error) {
     console.error('获取用户概览数据失败:', error);
   }
 };
 
-const fetchDetailData = async () => {
-    loading.value = true;
+const fetchDetailData = async (forceUpdate = false) => {
+    // 决定是否显示加载状态：首次加载或强制更新时显示
+    const shouldShowLoading = !isDetailLoaded.value || forceUpdate;
+
+    if (shouldShowLoading) {
+        loading.value = true;
+    }
+
     let params = {};
     if (dateRange.value && dateRange.value.length === 2) {
         params.start_time = formatDate(dateRange.value[0]);
@@ -326,21 +339,25 @@ const fetchDetailData = async () => {
                     updateBarChart(data.chart, data.new_source || [], data.old_source || []);
                  });
              }
+             
+             isDetailLoaded.value = true;
         }
     } catch(e) { 
         console.error('获取数据明细失败:', e); 
     } finally {
-        loading.value = false;
+        if (shouldShowLoading) {
+            loading.value = false;
+        }
     }
 };
 
 const handleSearch = () => {
-    fetchDetailData();
+    fetchDetailData(true);
 };
 
 const handleReset = () => {
     dateRange.value = '';
-    fetchDetailData();
+    fetchDetailData(true);
 };
 
 const handleExport = async () => {
@@ -375,7 +392,11 @@ const initCharts = () => {
     nextTick(() => {
         // Chart 1: 会员/非会员
         if (chartMemberRef.value) {
-            const chart1 = echarts.init(chartMemberRef.value);
+            let chart1 = chartMemberInstance.value;
+            if (!chart1) {
+                chart1 = echarts.init(chartMemberRef.value);
+                chartMemberInstance.value = chart1;
+            }
             chart1.setOption({
                 tooltip: {
                     trigger: 'item',
@@ -399,7 +420,11 @@ const initCharts = () => {
         
         // Chart 2: 三色环形图
         if (chartNewOldRef.value) {
-            const chart2 = echarts.init(chartNewOldRef.value);
+            let chart2 = chartNewOldInstance.value;
+            if (!chart2) {
+                chart2 = echarts.init(chartNewOldRef.value);
+                chartNewOldInstance.value = chart2;
+            }
             chart2.setOption({
                 tooltip: {
                     trigger: 'item',