mirror/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2024-11-23 18:49:21 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat: 主题色保存/恢复增加确认提示 (#7036)

Browse Source
This commit is contained in:
蘭 2024-11-13 22:14:01 +08:00 committed by GitHub
parent 4c01b1e542
commit 911b4076f5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 40 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
frontend/src/views/setting/panel/theme-color/index.vue
View File

@ -164,53 +164,63 @@ const changeDarkColor = (color: string) => {
const onSave = async (formEl: FormInstance | undefined) => { const onSave = async (formEl: FormInstance | undefined) => {
if (!formEl) return; if (!formEl) return;
await formEl.validate(async (valid) => { ElMessageBox.confirm(i18n.global.t('xpack.theme.setHelper'), i18n.global.t('commons.button.save'), {
if (!valid) return; confirmButtonText: i18n.global.t('commons.button.confirm'),
form.themeColor = { light: form.light, dark: form.dark }; 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) { if (globalStore.isProductPro) {
await updateXpackSettingByKey('ThemeColor', JSON.stringify(form.themeColor)); await updateXpackSettingByKey('ThemeColor', JSON.stringify(form.themeColor));
MsgSuccess(i18n.global.t('commons.msg.operationSuccess')); MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
globalStore.themeConfig.themeColor = JSON.stringify(form.themeColor);
loading.value = false; loading.value = false;
globalStore.themeConfig.themeColor = JSON.stringify(form.themeColor);
let color: string; let color: string;
if (form.theme === 'auto') { if (form.theme === 'auto') {
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
color = prefersDark.matches ? form.dark : form.light; color = prefersDark.matches ? '#F0BE96' : '#005eeb';
} else { } else {
color = form.theme === 'dark' ? form.dark : form.light; color = form.theme === 'dark' ? '#F0BE96' : '#005eeb';
} }
globalStore.themeConfig.primary = color; globalStore.themeConfig.primary = color;
setPrimaryColor(color); setPrimaryColor(color);
initFavicon(); initFavicon();
drawerVisible.value = false; 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 = () => { const handleClose = () => {
drawerVisible.value = false; drawerVisible.value = false;
}; };