From 911b4076f5395fe7e9b9980edc862d3892c515fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=98=AD?= <81747598+lan-yonghui@users.noreply.github.com>
Date: Wed, 13 Nov 2024 22:14:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=BB=E9=A2=98=E8=89=B2=E4=BF=9D?=
 =?UTF-8?q?=E5=AD=98/=E6=81=A2=E5=A4=8D=E5=A2=9E=E5=8A=A0=E7=A1=AE?=
 =?UTF-8?q?=E8=AE=A4=E6=8F=90=E7=A4=BA=20(#7036)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/setting/panel/theme-color/index.vue | 70 +++++++++++--------
 1 file changed, 40 insertions(+), 30 deletions(-)

diff --git a/frontend/src/views/setting/panel/theme-color/index.vue b/frontend/src/views/setting/panel/theme-color/index.vue
index 1c9c0b773..fc25839f7 100644
--- a/frontend/src/views/setting/panel/theme-color/index.vue
+++ b/frontend/src/views/setting/panel/theme-color/index.vue
@@ -164,53 +164,63 @@ const changeDarkColor = (color: string) => {
 
 const onSave = async (formEl: FormInstance | undefined) => {
     if (!formEl) return;
-    await formEl.validate(async (valid) => {
-        if (!valid) return;
-        form.themeColor = { light: form.light, dark: form.dark };
+    ElMessageBox.confirm(i18n.global.t('xpack.theme.setHelper'), i18n.global.t('commons.button.save'), {
+        confirmButtonText: i18n.global.t('commons.button.confirm'),
+        cancelButtonText: i18n.global.t('commons.button.cancel'),
+        type: 'info',
+    }).then(async () => {
+        await formEl.validate(async (valid) => {
+            if (!valid) return;
+            form.themeColor = { light: form.light, dark: form.dark };
+            if (globalStore.isProductPro) {
+                await updateXpackSettingByKey('ThemeColor', JSON.stringify(form.themeColor));
+                MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
+                globalStore.themeConfig.themeColor = JSON.stringify(form.themeColor);
+                loading.value = false;
+                let color: string;
+                if (form.theme === 'auto') {
+                    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+                    color = prefersDark.matches ? form.dark : form.light;
+                } else {
+                    color = form.theme === 'dark' ? form.dark : form.light;
+                }
+                globalStore.themeConfig.primary = color;
+                setPrimaryColor(color);
+                initFavicon();
+                drawerVisible.value = false;
+                emit('search');
+            }
+        });
+    });
+};
+
+const onReSet = async () => {
+    ElMessageBox.confirm(i18n.global.t('xpack.theme.setDefaultHelper'), i18n.global.t('xpack.theme.setDefault'), {
+        confirmButtonText: i18n.global.t('commons.button.confirm'),
+        cancelButtonText: i18n.global.t('commons.button.cancel'),
+        type: 'info',
+    }).then(async () => {
+        form.themeColor = { light: '#005eeb', dark: '#F0BE96' };
         if (globalStore.isProductPro) {
             await updateXpackSettingByKey('ThemeColor', JSON.stringify(form.themeColor));
             MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
-            globalStore.themeConfig.themeColor = JSON.stringify(form.themeColor);
             loading.value = false;
+            globalStore.themeConfig.themeColor = JSON.stringify(form.themeColor);
             let color: string;
             if (form.theme === 'auto') {
                 const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
-                color = prefersDark.matches ? form.dark : form.light;
+                color = prefersDark.matches ? '#F0BE96' : '#005eeb';
             } else {
-                color = form.theme === 'dark' ? form.dark : form.light;
+                color = form.theme === 'dark' ? '#F0BE96' : '#005eeb';
             }
             globalStore.themeConfig.primary = color;
             setPrimaryColor(color);
             initFavicon();
             drawerVisible.value = false;
-            emit('search');
-            return;
         }
     });
 };
 
-const onReSet = async () => {
-    form.themeColor = { light: '#005eeb', dark: '#F0BE96' };
-    if (globalStore.isProductPro) {
-        await updateXpackSettingByKey('ThemeColor', JSON.stringify(form.themeColor));
-        MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
-        loading.value = false;
-        globalStore.themeConfig.themeColor = JSON.stringify(form.themeColor);
-        let color: string;
-        if (form.theme === 'auto') {
-            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
-            color = prefersDark.matches ? '#F0BE96' : '#005eeb';
-        } else {
-            color = form.theme === 'dark' ? '#F0BE96' : '#005eeb';
-        }
-        globalStore.themeConfig.primary = color;
-        setPrimaryColor(color);
-        initFavicon();
-        drawerVisible.value = false;
-        return;
-    }
-};
-
 const handleClose = () => {
     drawerVisible.value = false;
 };