fix: 解决主题颜色切换失败的问题 (#5218)

frontend/src/hooks/use-theme.ts

@@ -8,6 +8,10 @@ export const useTheme = () => {
             body.setAttribute('class', 'dark-gold');
             return;
         }
+        if (globalStore.themeConfig.theme === 'auto') {
+            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+            globalStore.themeConfig.theme = prefersDark.matches ? 'dark' : 'light';
+        }
         const body = document.documentElement as HTMLElement;
         if (globalStore.themeConfig.theme === 'dark') body.setAttribute('class', 'dark');
         else body.setAttribute('class', '');

frontend/src/utils/xpack.ts

@@ -28,8 +28,8 @@ export async function getXpackSetting() {
     return res;
 }
 
-export async function updateXpackSetting(fromData: FormData) {
+export async function updateXpackSettingByKey(key: string, value: string) {
     const searchXSettingGlob = import.meta.glob('xpack/api/modules/setting.ts');
     const module = await searchXSettingGlob?.['../xpack/api/modules/setting.ts']?.();
-    return module?.updateXSetting(fromData);
+    return module?.updateXSettingByKey(key, value);
 }

frontend/src/views/setting/panel/index.vue

@@ -184,7 +184,7 @@ import Proxy from '@/views/setting/panel/proxy/index.vue';
 import Network from '@/views/setting/panel/default-network/index.vue';
 import HideMenu from '@/views/setting/panel/hidemenu/index.vue';
 import { storeToRefs } from 'pinia';
-import { getXpackSetting, updateXpackSetting } from '@/utils/xpack';
+import { getXpackSetting, updateXpackSettingByKey } from '@/utils/xpack';
 
 const loading = ref(false);
 const i18n = useI18n();
@@ -357,18 +357,11 @@ const onSave = async (key: string, val: any) => {
             globalStore.themeConfig.theme = val;
         }
         switchTheme();
-        if (isProductPro.value) {
-            let formData = new FormData();
-            formData.append('theme', val);
-            await updateXpackSetting(formData)
-                .then(async () => {
-                    loading.value = false;
-                    MsgSuccess(i18n.t('commons.msg.operationSuccess'));
-                    await search();
-                })
-                .catch(() => {
-                    loading.value = false;
-                });
+        updateXpackSettingByKey('Theme', val === 'dark-gold' ? 'dark-gold' : '');
+        if (val === 'dark-gold') {
+            MsgSuccess(i18n.t('commons.msg.operationSuccess'));
+            loading.value = false;
+            search();
             return;
         }
     }