mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2025-03-16 18:54:43 +08:00
parent
a291a50c9f
commit
f7c875acda
@ -16,29 +16,23 @@
|
|||||||
<el-form-item :label="$t('setting.light')" prop="light">
|
<el-form-item :label="$t('setting.light')" prop="light">
|
||||||
<div class="flex flex-wrap justify-between items-center sm:items-start">
|
<div class="flex flex-wrap justify-between items-center sm:items-start">
|
||||||
<div class="flex gap-1">
|
<div class="flex gap-1">
|
||||||
<el-tooltip :content="$t('xpack.theme.classicBlue')" placement="top">
|
<template v-for="colorConfig in lightColors" :key="colorConfig.color">
|
||||||
<el-button
|
<el-tooltip :content="$t(colorConfig.label)" placement="top">
|
||||||
color="#005eeb"
|
<el-button
|
||||||
circle
|
:color="colorConfig.color"
|
||||||
dark
|
:class="form.light === colorConfig.color ? 'selected-white' : ''"
|
||||||
:class="form.light === '#005eeb' ? 'selected-white' : ''"
|
circle
|
||||||
@click="changeLightColor('#005eeb')"
|
dark
|
||||||
/>
|
@click="changeLightColor(colorConfig.color)"
|
||||||
</el-tooltip>
|
/>
|
||||||
<el-tooltip :content="$t('xpack.theme.freshGreen')" placement="top">
|
</el-tooltip>
|
||||||
<el-button
|
</template>
|
||||||
color="#238636"
|
|
||||||
:class="form.light === '#238636' ? 'selected-white' : ''"
|
|
||||||
circle
|
|
||||||
dark
|
|
||||||
@click="changeLightColor('#238636')"
|
|
||||||
/>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-color-picker
|
<el-color-picker
|
||||||
v-model="form.light"
|
v-model="form.light"
|
||||||
class="ml-4"
|
class="ml-4"
|
||||||
:predefine="predefineColors"
|
:predefine="lightPredefineColors"
|
||||||
show-alpha
|
show-alpha
|
||||||
|
@change="changeThemeColor('light', form.light)"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -48,38 +42,23 @@
|
|||||||
<div class="flex flex-wrap justify-between items-center sm:items-start">
|
<div class="flex flex-wrap justify-between items-center sm:items-start">
|
||||||
<div class="flex flex-wrap justify-between items-center mt-4 sm:mt-0">
|
<div class="flex flex-wrap justify-between items-center mt-4 sm:mt-0">
|
||||||
<div class="flex gap-1">
|
<div class="flex gap-1">
|
||||||
<el-tooltip :content="$t('xpack.theme.classicBlue')" placement="top">
|
<template v-for="colorConfig in darkColors" :key="colorConfig.color">
|
||||||
<el-button
|
<el-tooltip :content="$t(colorConfig.label)" placement="top">
|
||||||
color="#3D8EFF"
|
<el-button
|
||||||
circle
|
:color="colorConfig.color"
|
||||||
dark
|
:class="form.dark === colorConfig.color ? 'selected-white' : ''"
|
||||||
:class="form.dark === '#3D8EFF' ? 'selected-white' : ''"
|
circle
|
||||||
@click="changeDarkColor('#3D8EFF')"
|
dark
|
||||||
/>
|
@click="changeDarkColor(colorConfig.color)"
|
||||||
</el-tooltip>
|
/>
|
||||||
<el-tooltip :content="$t('xpack.theme.lingXiaGold')" placement="top">
|
</el-tooltip>
|
||||||
<el-button
|
</template>
|
||||||
color="#F0BE96"
|
|
||||||
:class="form.dark === '#F0BE96' ? 'selected-white' : ''"
|
|
||||||
circle
|
|
||||||
dark
|
|
||||||
@click="changeDarkColor('#F0BE96')"
|
|
||||||
/>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-tooltip :content="$t('xpack.theme.freshGreen')" placement="top">
|
|
||||||
<el-button
|
|
||||||
color="#238636"
|
|
||||||
:class="form.dark === '#238636' ? 'selected-white' : ''"
|
|
||||||
circle
|
|
||||||
dark
|
|
||||||
@click="changeDarkColor('#238636')"
|
|
||||||
/>
|
|
||||||
</el-tooltip>
|
|
||||||
<el-color-picker
|
<el-color-picker
|
||||||
v-model="form.dark"
|
v-model="form.dark"
|
||||||
class="ml-4"
|
class="ml-4"
|
||||||
:predefine="predefineColors"
|
:predefine="darkPredefineColors"
|
||||||
show-alpha
|
show-alpha
|
||||||
|
@change="changeThemeColor('dark', form.dark)"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -110,7 +89,7 @@ import { initFavicon, updateXpackSettingByKey } from '@/utils/xpack';
|
|||||||
import { setPrimaryColor } from '@/utils/theme';
|
import { setPrimaryColor } from '@/utils/theme';
|
||||||
import { GlobalStore } from '@/store';
|
import { GlobalStore } from '@/store';
|
||||||
|
|
||||||
const emit = defineEmits<{ (e: 'search'): void }>();
|
const emit = defineEmits<(e: 'search') => void>();
|
||||||
const drawerVisible = ref();
|
const drawerVisible = ref();
|
||||||
const loading = ref();
|
const loading = ref();
|
||||||
|
|
||||||
@ -132,11 +111,25 @@ const form = reactive({
|
|||||||
});
|
});
|
||||||
const formRef = ref<FormInstance>();
|
const formRef = ref<FormInstance>();
|
||||||
|
|
||||||
const predefineColors = ref([
|
const globalStore = GlobalStore();
|
||||||
|
|
||||||
|
const STORAGE_KEY = 'theme-predefine-colors';
|
||||||
|
const lightPredefineColors = ref([
|
||||||
'#005eeb',
|
'#005eeb',
|
||||||
|
'#238636',
|
||||||
'#3D8EFF',
|
'#3D8EFF',
|
||||||
'#F0BE96',
|
'#F0BE96',
|
||||||
|
'#00ced1',
|
||||||
|
'#c71585',
|
||||||
|
'#ff4500',
|
||||||
|
'#ff8c00',
|
||||||
|
'#ffd700',
|
||||||
|
]);
|
||||||
|
const darkPredefineColors = ref([
|
||||||
'#238636',
|
'#238636',
|
||||||
|
'#3D8EFF',
|
||||||
|
'#005eeb',
|
||||||
|
'#F0BE96',
|
||||||
'#00ced1',
|
'#00ced1',
|
||||||
'#c71585',
|
'#c71585',
|
||||||
'#ff4500',
|
'#ff4500',
|
||||||
@ -144,16 +137,111 @@ const predefineColors = ref([
|
|||||||
'#ffd700',
|
'#ffd700',
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const globalStore = GlobalStore();
|
const defaultDarkColors = [
|
||||||
|
{ color: '#3D8EFF', label: 'xpack.theme.classicBlue' },
|
||||||
|
{ color: '#F0BE96', label: 'xpack.theme.lingXiaGold' },
|
||||||
|
{ color: '#238636', label: 'xpack.theme.freshGreen' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const defaultLightColors = [
|
||||||
|
{ color: '#005eeb', label: 'xpack.theme.classicBlue' },
|
||||||
|
{ color: '#238636', label: 'xpack.theme.freshGreen' },
|
||||||
|
];
|
||||||
|
|
||||||
|
let darkColors = [...defaultDarkColors];
|
||||||
|
|
||||||
|
let lightColors = [...defaultLightColors];
|
||||||
|
|
||||||
|
const addColorToTheme = (
|
||||||
|
colors: { color: string; label: string }[],
|
||||||
|
newColor: { color: string; label: string },
|
||||||
|
baseCount = 3,
|
||||||
|
maxNewColors = 2,
|
||||||
|
): { color: string; label: string }[] => {
|
||||||
|
const updatedColors = [...colors];
|
||||||
|
const extraCount = Math.max(0, colors.length - baseCount);
|
||||||
|
if (extraCount >= maxNewColors) {
|
||||||
|
updatedColors.splice(baseCount, 1);
|
||||||
|
}
|
||||||
|
updatedColors.push(newColor);
|
||||||
|
return updatedColors;
|
||||||
|
};
|
||||||
|
|
||||||
|
const defaultColors = {
|
||||||
|
light: lightPredefineColors.value,
|
||||||
|
dark: darkPredefineColors.value,
|
||||||
|
};
|
||||||
|
|
||||||
|
const initThemeColors = () => {
|
||||||
|
try {
|
||||||
|
const storedColors = localStorage.getItem(STORAGE_KEY);
|
||||||
|
themeColors.value = storedColors ? JSON.parse(storedColors) : { ...defaultColors };
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to parse theme colors from localStorage:', error);
|
||||||
|
themeColors.value = { ...defaultColors };
|
||||||
|
} finally {
|
||||||
|
localStorage.setItem(STORAGE_KEY, JSON.stringify(themeColors.value));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const themeColors = ref({ ...defaultColors });
|
||||||
|
|
||||||
const acceptParams = (params: DialogProps): void => {
|
const acceptParams = (params: DialogProps): void => {
|
||||||
form.themeColor = params.themeColor;
|
form.themeColor = params.themeColor;
|
||||||
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;
|
||||||
|
initThemeColors();
|
||||||
|
lightPredefineColors.value = themeColors.value['light'];
|
||||||
|
darkPredefineColors.value = themeColors.value['dark'];
|
||||||
|
lightPredefineColors.value.slice(0, 2).forEach((color) => {
|
||||||
|
const exists = lightColors.some((item) => item.color === color);
|
||||||
|
if (!exists) {
|
||||||
|
lightColors.push({
|
||||||
|
color,
|
||||||
|
label: `xpack.theme.customColor`,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
darkPredefineColors.value.slice(0, 2).forEach((color) => {
|
||||||
|
const exists = darkColors.some((item) => item.color === color);
|
||||||
|
if (!exists) {
|
||||||
|
darkColors.push({
|
||||||
|
color,
|
||||||
|
label: `xpack.theme.customColor`,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
drawerVisible.value = true;
|
drawerVisible.value = true;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const updateThemeColors = (theme: 'light' | 'dark', newColors: string[]) => {
|
||||||
|
themeColors.value[theme] = newColors;
|
||||||
|
localStorage.setItem(STORAGE_KEY, JSON.stringify(themeColors.value));
|
||||||
|
lightPredefineColors.value = themeColors.value['light'];
|
||||||
|
darkPredefineColors.value = themeColors.value['dark'];
|
||||||
|
};
|
||||||
|
|
||||||
|
const addAndRemoveColor = (theme: 'light' | 'dark', newColor: string) => {
|
||||||
|
const colors = [...themeColors.value[theme]];
|
||||||
|
colors.unshift(newColor);
|
||||||
|
colors.pop();
|
||||||
|
updateThemeColors(theme, colors);
|
||||||
|
};
|
||||||
|
|
||||||
|
const changeThemeColor = (theme: 'light' | 'dark', color: string) => {
|
||||||
|
if (theme === 'light') {
|
||||||
|
form.light = color;
|
||||||
|
const newLightColor = { color: color, label: 'xpack.theme.customColor' };
|
||||||
|
lightColors = addColorToTheme(lightColors, newLightColor, 2);
|
||||||
|
} else {
|
||||||
|
form.dark = color;
|
||||||
|
const newDarkColor = { color: color, label: 'xpack.theme.customColor' };
|
||||||
|
darkColors = addColorToTheme(darkColors, newDarkColor);
|
||||||
|
}
|
||||||
|
addAndRemoveColor(theme, color);
|
||||||
|
};
|
||||||
|
|
||||||
const changeLightColor = (color: string) => {
|
const changeLightColor = (color: string) => {
|
||||||
form.light = color;
|
form.light = color;
|
||||||
};
|
};
|
||||||
@ -202,6 +290,10 @@ const onReSet = async () => {
|
|||||||
}).then(async () => {
|
}).then(async () => {
|
||||||
form.themeColor = { light: '#005eeb', dark: '#F0BE96' };
|
form.themeColor = { light: '#005eeb', dark: '#F0BE96' };
|
||||||
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;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user