gh_mirrors/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-01-19 00:09:16 +08:00
Code

feat: Save custom theme color scheme (#7690)

Browse Source
This commit is contained in:
蘭 2025-01-10 12:13:44 +08:00 committed by GitHub
parent cf2a1372f2
commit 99bc8177d4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 29 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/views/setting/panel/index.vue
View File

@ -252,6 +252,10 @@ const mobile = computed(() => {
interface ThemeColor { interface ThemeColor {
light: string; light: string;
dark: string; dark: string;
themePredefineColors: {
light: string[];
dark: string[];
};
} }
const form = reactive({ const form = reactive({
@ -366,8 +370,10 @@ const search = async () => {
const xpackRes = await getXpackSetting(); const xpackRes = await getXpackSetting();
if (xpackRes) { if (xpackRes) {
form.theme = xpackRes.data.theme || globalStore.themeConfig.theme || 'light'; form.theme = xpackRes.data.theme || globalStore.themeConfig.theme || 'light';
form.themeColor = JSON.parse(xpackRes.data.themeColor); form.themeColor = JSON.parse(xpackRes.data.themeColor || '{"light":"#005eeb","dark":"#F0BE96"}');
globalStore.themeConfig.themeColor = xpackRes.data.themeColor; globalStore.themeConfig.themeColor = xpackRes.data.themeColor
? xpackRes.data.themeColor
: '{"light":"#005eeb","dark":"#F0BE96"}';
globalStore.themeConfig.theme = form.theme; globalStore.themeConfig.theme = form.theme;
form.proxyDocker = xpackRes.data.proxyDocker; form.proxyDocker = xpackRes.data.proxyDocker;
} }

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

@ -94,13 +94,24 @@ const drawerVisible = ref();
const loading = ref(); const loading = ref();
interface DialogProps { interface DialogProps {
themeColor: { light: string; dark: string }; themeColor: {
light: string;
dark: string;
themePredefineColors: {
light: string[];
dark: string[];
};
};
theme: ''; theme: '';
} }
interface ThemeColor { interface ThemeColor {
light: string; light: string;
dark: string; dark: string;
themePredefineColors: {
light: string[];
dark: string[];
};
} }
const form = reactive({ const form = reactive({
@ -124,6 +135,7 @@ const lightPredefineColors = ref([
'#ff4500', '#ff4500',
'#ff8c00', '#ff8c00',
'#ffd700', '#ffd700',
'#333539',
]); ]);
const darkPredefineColors = ref([ const darkPredefineColors = ref([
'#238636', '#238636',
@ -135,6 +147,7 @@ const darkPredefineColors = ref([
'#ff4500', '#ff4500',
'#ff8c00', '#ff8c00',
'#ffd700', '#ffd700',
'#333539',
]); ]);
const defaultDarkColors = [ const defaultDarkColors = [
@ -191,9 +204,13 @@ const acceptParams = (params: DialogProps): void => {
form.theme = params.theme; form.theme = params.theme;
form.dark = form.themeColor.dark; form.dark = form.themeColor.dark;
form.light = form.themeColor.light; form.light = form.themeColor.light;
if (form.themeColor.themePredefineColors) {
localStorage.setItem(STORAGE_KEY, JSON.stringify(form.themeColor.themePredefineColors));
}
initThemeColors(); initThemeColors();
lightPredefineColors.value = themeColors.value['light']; lightPredefineColors.value = themeColors.value['light'];
darkPredefineColors.value = themeColors.value['dark']; darkPredefineColors.value = themeColors.value['dark'];
lightColors = defaultLightColors;
lightPredefineColors.value.slice(0, 2).forEach((color) => { lightPredefineColors.value.slice(0, 2).forEach((color) => {
const exists = lightColors.some((item) => item.color === color); const exists = lightColors.some((item) => item.color === color);
if (!exists) { if (!exists) {
@ -203,6 +220,7 @@ const acceptParams = (params: DialogProps): void => {
}); });
} }
}); });
darkColors = defaultDarkColors;
darkPredefineColors.value.slice(0, 2).forEach((color) => { darkPredefineColors.value.slice(0, 2).forEach((color) => {
const exists = darkColors.some((item) => item.color === color); const exists = darkColors.some((item) => item.color === color);
if (!exists) { if (!exists) {
@ -259,7 +277,7 @@ const onSave = async (formEl: FormInstance | undefined) => {
}).then(async () => { }).then(async () => {
await formEl.validate(async (valid) => { await formEl.validate(async (valid) => {
if (!valid) return; if (!valid) return;
form.themeColor = { light: form.light, dark: form.dark }; form.themeColor = { light: form.light, dark: form.dark, themePredefineColors: themeColors.value };
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'));
@ -288,12 +306,8 @@ const onReSet = async () => {
cancelButtonText: i18n.global.t('commons.button.cancel'), cancelButtonText: i18n.global.t('commons.button.cancel'),
type: 'info', type: 'info',
}).then(async () => { }).then(async () => {
form.themeColor = { light: '#005eeb', dark: '#F0BE96' }; form.themeColor = { light: '#005eeb', dark: '#F0BE96', themePredefineColors: themeColors.value };
if (globalStore.isProductPro) { if (globalStore.isProductPro) {
localStorage.setItem(STORAGE_KEY, JSON.stringify(defaultColors));
themeColors.value = { ...defaultColors };
darkColors = [...defaultDarkColors];
lightColors = [...defaultLightColors];
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'));
loading.value = false; loading.value = false;