From 62c010ce13af4aad44446dc2fd3290d0ffb36d63 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=98=AD?= <81747598+lan-yonghui@users.noreply.github.com>
Date: Thu, 12 Jun 2025 13:33:02 +0800
Subject: [PATCH] fix: Fixed the restart panel theme switching issue (#9031)

---
 .../components/v-charts/components/Line.vue   | 24 ++++++---
 .../components/v-charts/components/Pie.vue    | 51 ++++++++++++-------
 frontend/src/components/v-charts/index.vue    |  2 +-
 frontend/src/utils/xpack.ts                   |  4 +-
 4 files changed, 54 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/v-charts/components/Line.vue b/frontend/src/components/v-charts/components/Line.vue
index 6f66a2e84..d914f1175 100644
--- a/frontend/src/components/v-charts/components/Line.vue
+++ b/frontend/src/components/v-charts/components/Line.vue
@@ -2,15 +2,14 @@
     <div :id="id" ref="LineChartRef" :style="{ height: height, width: width }" />
 </template>
 <script lang="ts" setup>
-import { onMounted, nextTick, watch, onBeforeUnmount } from 'vue';
+import { onMounted, nextTick, watch, onBeforeUnmount, ref } from 'vue';
 import * as echarts from 'echarts';
 import { GlobalStore } from '@/store';
 import { computeSizeFromKBs, computeSizeFromKB, computeSizeFromMB } from '@/utils/util';
-import { storeToRefs } from 'pinia';
 import i18n from '@/lang';
 const globalStore = GlobalStore();
-const { isDarkTheme } = storeToRefs(globalStore);
-
+const isDarkTheme = ref(false);
+let mediaQuery: MediaQueryList;
 const props = defineProps({
     id: {
         type: String,
@@ -39,13 +38,11 @@ const seriesStyle = [
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             {
                 offset: 0,
-                color: getComputedStyle(document.documentElement).getPropertyValue('--panel-color-primary').trim(),
+                color: isDarkTheme.value ? '#3d8eff' : '#005eeb',
             },
             {
                 offset: 1,
-                color: getComputedStyle(document.documentElement)
-                    .getPropertyValue('--panel-color-primary-light-9')
-                    .trim(),
+                color: isDarkTheme.value ? '#3364ad' : '#4c8ef1',
             },
         ]),
     },
@@ -100,6 +97,11 @@ const seriesStyle = [
 ];
 
 function initChart() {
+    if (globalStore.themeConfig.theme === 'auto') {
+        isDarkTheme.value = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    } else {
+        isDarkTheme.value = globalStore.themeConfig.theme === 'dark';
+    }
     let itemChart = echarts?.getInstanceByDom(document.getElementById(props.id) as HTMLElement);
     const optionItem = itemChart?.getOption();
     const itemSelect = optionItem?.legend;
@@ -245,11 +247,17 @@ watch(
     },
 );
 
+function handleThemeChange() {
+    nextTick(() => initChart());
+}
+
 onMounted(() => {
     nextTick(() => {
         initChart();
         window.addEventListener('resize', changeChartSize);
     });
+    mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    mediaQuery.addEventListener('change', handleThemeChange);
 });
 
 onBeforeUnmount(() => {
diff --git a/frontend/src/components/v-charts/components/Pie.vue b/frontend/src/components/v-charts/components/Pie.vue
index 145f5eb91..e29fc320c 100644
--- a/frontend/src/components/v-charts/components/Pie.vue
+++ b/frontend/src/components/v-charts/components/Pie.vue
@@ -2,12 +2,12 @@
     <div :id="id" ref="PieChartRef" :style="{ height: height, width: width }" />
 </template>
 <script lang="ts" setup>
-import { onMounted, nextTick, watch, onBeforeUnmount } from 'vue';
+import { onMounted, nextTick, watch, onBeforeUnmount, ref } from 'vue';
 import * as echarts from 'echarts';
 import { GlobalStore } from '@/store';
-import { storeToRefs } from 'pinia';
 const globalStore = GlobalStore();
-const { isDarkTheme } = storeToRefs(globalStore);
+const isDarkTheme = ref(false);
+let mediaQuery: MediaQueryList;
 
 const props = defineProps({
     id: {
@@ -27,19 +27,34 @@ const props = defineProps({
         required: true,
     },
 });
+function changeChartSize() {
+    echarts.getInstanceByDom(document.getElementById(props.id) as HTMLElement)?.resize();
+}
+function getThemeColors() {
+    return {
+        primaryLight2: isDarkTheme.value ? '#3364ad' : '#4c8ef1',
+        primaryLight1: isDarkTheme.value ? '#3d8eff' : '#005eeb',
+        pieBgColor: isDarkTheme.value ? '#434552' : '#ffffff',
+        textColor: isDarkTheme.value ? '#ffffff' : '#0f0f0f',
+        subtextColor: isDarkTheme.value ? '#BBBFC4' : '#646A73',
+        shadowColor: isDarkTheme.value ? '#16191D' : 'rgba(0, 94, 235, 0.1)',
+        backgroundStyleColor: isDarkTheme.value ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 94, 235, 0.05)',
+    };
+}
 
 function initChart() {
+    if (globalStore.themeConfig.theme === 'auto') {
+        isDarkTheme.value = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    } else {
+        isDarkTheme.value = globalStore.themeConfig.theme === 'dark';
+    }
     let myChart = echarts?.getInstanceByDom(document.getElementById(props.id) as HTMLElement);
     if (myChart === null || myChart === undefined) {
         myChart = echarts.init(document.getElementById(props.id) as HTMLElement);
     }
     let percentText = String(props.option.data).split('.');
-    const primaryLight2 = getComputedStyle(document.documentElement)
-        .getPropertyValue('--panel-color-primary-light-3')
-        .trim();
-    const primaryLight1 = getComputedStyle(document.documentElement).getPropertyValue('--panel-color-primary').trim();
-    const pieBgColor = getComputedStyle(document.documentElement).getPropertyValue('--panel-pie-bg-color').trim();
-
+    const { primaryLight2, primaryLight1, pieBgColor, textColor, subtextColor, shadowColor, backgroundStyleColor } =
+        getThemeColors();
     const option = {
         title: [
             {
@@ -55,7 +70,7 @@ function initChart() {
                         },
                     },
 
-                    color: isDarkTheme.value ? '#ffffff' : '#0f0f0f',
+                    color: textColor,
                     lineHeight: 25,
                     // fontSize: 20,
                     fontWeight: 500,
@@ -64,7 +79,7 @@ function initChart() {
                 top: '32%',
                 subtext: props.option.title,
                 subtextStyle: {
-                    color: isDarkTheme.value ? '#BBBFC4' : '#646A73',
+                    color: subtextColor,
                     fontSize: 13,
                 },
                 textAlign: 'center',
@@ -99,7 +114,7 @@ function initChart() {
                 showBackground: true,
                 coordinateSystem: 'polar',
                 backgroundStyle: {
-                    color: isDarkTheme.value ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 94, 235, 0.05)',
+                    color: backgroundStyleColor,
                 },
                 color: [
                     new echarts.graphic.LinearGradient(0, 1, 0, 0, [
@@ -130,7 +145,7 @@ function initChart() {
                     {
                         value: 0,
                         itemStyle: {
-                            shadowColor: isDarkTheme.value ? '#16191D' : 'rgba(0, 94, 235, 0.1)',
+                            shadowColor: shadowColor,
                             shadowBlur: 5,
                         },
                     },
@@ -142,10 +157,6 @@ function initChart() {
     myChart.setOption(option, true);
 }
 
-function changeChartSize() {
-    echarts.getInstanceByDom(document.getElementById(props.id) as HTMLElement)?.resize();
-}
-
 watch(
     () => props.option,
     (val) => {
@@ -157,11 +168,17 @@ watch(
     },
 );
 
+function handleThemeChange() {
+    nextTick(() => initChart());
+}
+
 onMounted(() => {
     nextTick(() => {
         initChart();
         window.addEventListener('resize', changeChartSize);
     });
+    mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    mediaQuery.addEventListener('change', handleThemeChange);
 });
 
 onBeforeUnmount(() => {
diff --git a/frontend/src/components/v-charts/index.vue b/frontend/src/components/v-charts/index.vue
index b919e0665..666dcc85a 100644
--- a/frontend/src/components/v-charts/index.vue
+++ b/frontend/src/components/v-charts/index.vue
@@ -18,7 +18,7 @@ defineProps({
     option: {
         type: Object,
         required: true,
-    }, // { title , xData, yData, formatStr  }
+    },
 });
 
 const typeComponentMap = { line, pie };
diff --git a/frontend/src/utils/xpack.ts b/frontend/src/utils/xpack.ts
index 66551b735..dbc33f59a 100644
--- a/frontend/src/utils/xpack.ts
+++ b/frontend/src/utils/xpack.ts
@@ -101,7 +101,9 @@ export async function getXpackSettingForTheme() {
             globalStore.themeConfig.loginBgType = res2.data?.loginBgType;
             globalStore.themeConfig.loginBackground = res2.data?.loginBackground;
             globalStore.themeConfig.themeColor = res2.data?.themeColor;
-            globalStore.themeConfig.theme = res2.data?.theme || 'light';
+            if (res2.data?.theme) {
+                globalStore.themeConfig.theme = res2.data.theme;
+            }
         } else {
             resetXSetting();
         }