Skip to content

Commit aba35b7

Browse files
lan-yonghuilan-yonghui
committed
feat: customize login page images and backgrounds
1 parent 981037e commit aba35b7

File tree

14 files changed

+135
-21
lines changed

14 files changed

+135
-21
lines changed

‎frontend/src/assets/images/1panel-login-bg.jpg

-174 KB
Loading

‎frontend/src/assets/images/1panel-login.jpg

-230 KB
Loading

‎frontend/src/global/use-logo.ts

+3
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ export const useLogo = async () => {
99
globalStore.themeConfig.title = res.data.title;
1010
globalStore.themeConfig.logo = res.data.logo;
1111
globalStore.themeConfig.logoWithText = res.data.logoWithText;
12+
globalStore.themeConfig.loginImage = res.data?.loginImage;
13+
globalStore.themeConfig.loginBgType = res.data?.loginBgType;
14+
globalStore.themeConfig.loginBackground = res.data?.loginBackground;
1215
globalStore.themeConfig.favicon = res.data.favicon;
1316
}
1417

‎frontend/src/lang/modules/en.ts

+11-2
Original file line numberDiff line numberDiff line change
@@ -3153,8 +3153,17 @@ const message = {
31533153
setDefault: 'Restore Default',
31543154
setHelper: 'The current settings will be saved. Do you want to continue?',
31553155
setDefaultHelper: 'All panel settings will be restored to default. Do you want to continue?',
3156-
reset: 'Reset',
3157-
revertHtml: 'Do you want to restore {0} to the default page? ',
3156+
logoGroup: 'Logo',
3157+
imageGroup: 'Image',
3158+
loginImage: 'Login Page Image',
3159+
loginImageHelper: 'Displayed on the login page (recommended image size: 500*416px)',
3160+
loginBgType: 'Login Page Background Type',
3161+
loginBgImage: 'Login Page Background Image',
3162+
loginBgImageHelper: 'Displayed as background image on the login page (recommended image size: 1920*1080px)',
3163+
loginBgColor: 'Login Page Background Color',
3164+
loginBgColorHelper: 'Displayed as background color on the login page',
3165+
image: 'Image',
3166+
bgColor: 'Background Color',
31583167
},
31593168
helper: {
31603169
wafTitle1: 'Interception Map',

‎frontend/src/lang/modules/ja.ts

+11-2
Original file line numberDiff line numberDiff line change
@@ -3009,8 +3009,17 @@ const message = {
30093009
setDefault: 'デフォルトに戻す',
30103010
setHelper: '現在の設定が保存されます。続けますか？',
30113011
setDefaultHelper: 'すべてのパネル設定がデフォルトに戻されます。続けますか？',
3012-
reset: 'リセット',
3013-
revertHtml: '{0}をデフォルトページに戻しますか？',
3012+
logoGroup: 'ロゴ',
3013+
imageGroup: '画像',
3014+
loginImage: 'ログインページの画像',
3015+
loginImageHelper: 'ログインページに表示されます（推奨画像サイズ：500×416px）',
3016+
loginBgType: 'ログインページ背景タイプ',
3017+
loginBgImage: 'ログインページ背景画像',
3018+
loginBgImageHelper: 'ログインページの背景画像として表示されます（推奨画像サイズ：1920×1080px）',
3019+
loginBgColor: 'ログインページ背景色',
3020+
loginBgColorHelper: 'ログインページの背景色として表示されます',
3021+
image: '画像',
3022+
bgColor: '背景色',
30143023
},
30153024
helper: {
30163025
wafTitle1: 'インターセプションマップ',

‎frontend/src/lang/modules/ko.ts

+11-2
Original file line numberDiff line numberDiff line change
@@ -2963,8 +2963,17 @@ const message = {
29632963
setDefault: '기본값 복원',
29642964
setHelper: '현재 설정이 저장됩니다. 계속하시겠습니까?',
29652965
setDefaultHelper: '모든 패널 설정이 기본값으로 복원됩니다. 계속하시겠습니까?',
2966-
reset: '재설정',
2967-
revertHtml: '{0}을(를) 기본 페이지로 복원하시겠습니까?',
2966+
logoGroup: '로고',
2967+
imageGroup: '이미지',
2968+
loginImage: '로그인 페이지 이미지',
2969+
loginImageHelper: '로그인 페이지에 표시됩니다 (권장 크기: 500*416px)',
2970+
loginBgType: '로그인 배경 유형',
2971+
loginBgImage: '로그인 배경 이미지',
2972+
loginBgImageHelper: '로그인 페이지의 배경 이미지로 표시됩니다 (권장 크기: 1920*1080px)',
2973+
loginBgColor: '로그인 배경 색상',
2974+
loginBgColorHelper: '로그인 페이지의 배경 색상으로 표시됩니다',
2975+
image: '이미지',
2976+
bgColor: '배경 색상',
29682977
},
29692978
helper: {
29702979
wafTitle1: '차단 지도',

‎frontend/src/lang/modules/ms.ts

+12-2
Original file line numberDiff line numberDiff line change
@@ -3079,8 +3079,18 @@ const message = {
30793079
setDefault: 'Pulihkan Tetapan Asal',
30803080
setHelper: 'Tetapan semasa akan disimpan. Adakah anda ingin meneruskan?',
30813081
setDefaultHelper: 'Semua tetapan panel akan dikembalikan ke asal. Adakah anda ingin meneruskan?',
3082-
reset: 'Tetapkan Semula',
3083-
revertHtml: 'Adakah anda ingin mengembalikan {0} ke halaman asal?',
3082+
logoGroup: 'Logo',
3083+
imageGroup: 'Imej',
3084+
loginImage: 'Imej Halaman Log Masuk',
3085+
loginImageHelper: 'Akan dipaparkan di halaman log masuk (Saiz disyorkan: 500*416px)',
3086+
loginBgType: 'Jenis Latar Halaman Log Masuk',
3087+
loginBgImage: 'Imej Latar Halaman Log Masuk',
3088+
loginBgImageHelper:
3089+
'Akan dipaparkan sebagai latar belakang halaman log masuk (Saiz disyorkan: 1920*1080px)',
3090+
loginBgColor: 'Warna Latar Halaman Log Masuk',
3091+
loginBgColorHelper: 'Akan dipaparkan sebagai warna latar belakang halaman log masuk',
3092+
image: 'Imej',
3093+
bgColor: 'Warna Latar',
30843094
},
30853095
helper: {
30863096
wafTitle1: 'Peta Pencegahan',

‎frontend/src/lang/modules/pt-br.ts

+12-2
Original file line numberDiff line numberDiff line change
@@ -3082,8 +3082,18 @@ const message = {
30823082
setDefault: 'Restaurar Padrão',
30833083
setHelper: 'As configurações atuais serão salvas. Deseja continuar?',
30843084
setDefaultHelper: 'Todas as configurações do painel serão restauradas para o padrão. Deseja continuar?',
3085-
reset: 'Redefinir',
3086-
revertHtml: 'Deseja restaurar {0} para a página padrão?',
3085+
logoGroup: 'Logo',
3086+
imageGroup: 'Imagem',
3087+
loginImage: 'Imagem da Página de Login',
3088+
loginImageHelper: 'Será exibida na página de login (Tamanho recomendado: 500x416px)',
3089+
loginBgType: 'Tipo de Fundo da Página de Login',
3090+
loginBgImage: 'Imagem de Fundo da Página de Login',
3091+
loginBgImageHelper:
3092+
'Será exibida como imagem de fundo na página de login (Tamanho recomendado: 1920x1080px)',
3093+
loginBgColor: 'Cor de Fundo da Página de Login',
3094+
loginBgColorHelper: 'Será exibida como cor de fundo na página de login',
3095+
image: 'Imagem',
3096+
bgColor: 'Cor de Fundo',
30873097
},
30883098
helper: {
30893099
wafTitle1: 'Mapa de Interceptação',

‎frontend/src/lang/modules/ru.ts

+11-2
Original file line numberDiff line numberDiff line change
@@ -3073,8 +3073,17 @@ const message = {
30733073
setDefault: 'Восстановить По Умолчанию',
30743074
setHelper: 'Текущие настройки будут сохранены. Вы хотите продолжить?',
30753075
setDefaultHelper: 'Все настройки панели будут восстановлены по умолчанию. Вы хотите продолжить?',
3076-
reset: 'Сброс',
3077-
revertHtml: 'Вы хотите восстановить {0} на страницу по умолчанию?',
3076+
logoGroup: 'Логотип',
3077+
imageGroup: 'Изображение',
3078+
loginImage: 'Изображение страницы входа',
3079+
loginImageHelper: 'Будет отображаться на странице входа (Рекомендуемый размер: 500x416px)',
3080+
loginBgType: 'Тип фона страницы входа',
3081+
loginBgImage: 'Фоновое изображение страницы входа',
3082+
loginBgImageHelper: 'Будет отображаться как фон страницы входа (Рекомендуемый размер: 1920x1080px)',
3083+
loginBgColor: 'Цвет фона страницы входа',
3084+
loginBgColorHelper: 'Будет отображаться как цвет фона страницы входа',
3085+
image: 'Изображение',
3086+
bgColor: 'Цвет фона',
30783087
},
30793088
helper: {
30803089
wafTitle1: 'Карта Перехватов',

‎frontend/src/lang/modules/zh-Hant.ts

+11-1
Original file line numberDiff line numberDiff line change
@@ -2924,7 +2924,17 @@ const message = {
29242924
setDefault: '復原預設',
29252925
setHelper: '即將儲存目前介面設定內容，是否繼續？',
29262926
setDefaultHelper: '即將復原所有界面設定到初始狀態，是否繼續？',
2927-
reset: '重設',
2927+
logoGroup: 'Logo',
2928+
imageGroup: '圖片',
2929+
loginImage: '登入頁圖片',
2930+
loginImageHelper: '將會顯示在登入頁面（建議圖片大小為：500*416px）',
2931+
loginBgType: '登入頁背景類型',
2932+
loginBgImage: '登入頁背景圖片',
2933+
loginBgImageHelper: '將會顯示在登入頁面背景圖片（建議圖片大小為：1920*1080px）',
2934+
loginBgColor: '登入頁背景顏色',
2935+
loginBgColorHelper: '將會顯示在登入頁面背景顏色',
2936+
image: '圖片',
2937+
bgColor: '背景色',
29282938
},
29292939
helper: {
29302940
wafTitle1: '攔截地圖',

‎frontend/src/lang/modules/zh.ts

+11
Original file line numberDiff line numberDiff line change
@@ -2907,6 +2907,17 @@ const message = {
29072907
reUpload: '选择文件',
29082908
setHelper: '即将保存当前界面设置内容，是否继续？',
29092909
setDefaultHelper: '即将恢复所有界面设置到初始状态，是否继续？',
2910+
logoGroup: 'Logo',
2911+
imageGroup: '图片',
2912+
loginImage: '登录页图片',
2913+
loginImageHelper: '将会显示在登录页面(建议图片大小为: 500*416px)',
2914+
loginBgType: '登录页背景类型',
2915+
loginBgImage: '登录页背景图片',
2916+
loginBgImageHelper: '将会显示在登录页面背景图片(建议图片大小为: 1920*1080px)',
2917+
loginBgColor: '登录页背景颜色',
2918+
loginBgColorHelper: '将会显示在登录页面背景颜色',
2919+
image: '图片',
2920+
bgColor: '背景色',
29102921
},
29112922
helper: {
29122923
wafTitle1: '拦截地图',

‎frontend/src/store/interface/index.ts

+3
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@ export interface ThemeConfigProp {
1010
logo: string;
1111
logoWithText: string;
1212
favicon: string;
13+
loginImage: string;
14+
loginBgType: string;
15+
loginBackground: string;
1316
themeColor: string;
1417
}
1518

‎frontend/src/utils/xpack.ts

+3
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,9 @@ export async function getXpackSettingForTheme() {
9797
globalStore.themeConfig.logo = res2.data?.logo;
9898
globalStore.themeConfig.logoWithText = res2.data?.logoWithText;
9999
globalStore.themeConfig.favicon = res2.data?.favicon;
100+
globalStore.themeConfig.loginImage = res2.data?.loginImage;
101+
globalStore.themeConfig.loginBgType = res2.data?.loginBgType;
102+
globalStore.themeConfig.loginBackground = res2.data?.loginBackground;
100103
globalStore.themeConfig.themeColor = res2.data?.themeColor;
101104
globalStore.themeConfig.theme = res2.data?.theme || 'auto';
102105
} else {

‎frontend/src/views/login/index.vue

+36-8
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,23 @@
22
<div class="flex items-center justify-center min-h-screen relative bg-gray-100">
33
<div
44
class="absolute inset-0 bg-cover bg-center bg-no-repeat"
5-
:style="{ backgroundImage: `url(${backgroundImage})` }"
5+
:style="
6+
globalStore.themeConfig.loginBgType === 'color'
7+
? { backgroundColor: globalStore.themeConfig.loginBackground }
8+
: { backgroundImage: `url(${loadImage('loginBackground')})` }
9+
"
610
></div>
711
<div
812
:style="{ opacity: backgroundOpacity, width: containerWidth, height: containerHeight }"
913
class="bg-white shadow-lg relative z-10 border border-gray-200 flex overflow-hidden"
1014
>
1115
<div class="grid grid-cols-1 md:grid-cols-2 items-stretch w-full h-full">
12-
<div v-if="showLogo">
13-
<img :src="logoImage" class="max-w-full max-h-full object-contain" />
16+
<div v-if="showLogo" class="flex justify-center">
17+
<img
18+
:src="loadImage('loginImage')"
19+
class="max-w-full max-h-full object-cover bg-cover bg-center"
20+
alt="1panel"
21+
/>
1422
</div>
1523
<div :class="loginFormClass">
1624
<LoginForm ref="loginRef"></LoginForm>
@@ -25,10 +33,8 @@ import LoginForm from './components/login-form.vue';
2533
import { ref, onMounted } from 'vue';
2634
import { GlobalStore } from '@/store';
2735
28-
const gStore = GlobalStore();
29-
const backgroundOpacity = ref(0.8);
30-
const backgroundImage = ref(new URL('@/assets/images/1panel-login-bg.jpg', import.meta.url).href);
31-
const logoImage = ref(new URL('@/assets/images/1panel-login.jpg', import.meta.url).href);
36+
const globalStore = GlobalStore();
37+
const backgroundOpacity = ref(1);
3238
3339
const mySafetyCode = defineProps({
3440
code: {
@@ -40,10 +46,32 @@ const mySafetyCode = defineProps({
4046
const getStatus = async () => {
4147
let code = mySafetyCode.code;
4248
if (code != '') {
43-
gStore.entrance = code;
49+
globalStore.entrance = code;
4450
}
4551
};
4652
53+
const loadImage = (name: string) => {
54+
switch (name) {
55+
case 'loginImage':
56+
if (globalStore.themeConfig.loginImage === 'loginImage') {
57+
return `/api/v2/images/loginImage?t=${Date.now()}`;
58+
}
59+
return new URL('@/assets/images/1panel-login.jpg', import.meta.url).href;
60+
case 'loginBackground':
61+
if (globalStore.themeConfig.loginBgType === 'image') {
62+
if (globalStore.themeConfig.loginBackground === 'loginBackground') {
63+
return `/api/v2/images/loginBackground?t=${Date.now()}`;
64+
}
65+
return new URL('@/assets/images/1panel-login-bg.jpg', import.meta.url).href;
66+
} else if (globalStore.themeConfig.loginBgType === 'color') {
67+
return globalStore.themeConfig.loginBackground;
68+
} else {
69+
return new URL('@/assets/images/1panel-login-bg.jpg', import.meta.url).href;
70+
}
71+
}
72+
return '';
73+
};
74+
4775
onMounted(() => {
4876
getStatus();
4977
});

0 commit comments

Comments
 (0)