feat: customize login page images and backgrounds (#8398)

2026-09-22 08:00:53 +00:00 · 2025-04-14 10:54:13 +00:00
parent 981037e250
commit e6433d6fbc
14 changed files with 135 additions and 21 deletions
@@ -9,6 +9,9 @@ export const useLogo = async () => {
        globalStore.themeConfig.title = res.data.title;
        globalStore.themeConfig.logo = res.data.logo;
        globalStore.themeConfig.logoWithText = res.data.logoWithText;
+        globalStore.themeConfig.loginImage = res.data?.loginImage;
+        globalStore.themeConfig.loginBgType = res.data?.loginBgType;
+        globalStore.themeConfig.loginBackground = res.data?.loginBackground;
        globalStore.themeConfig.favicon = res.data.favicon;
    }

@@ -3153,8 +3153,17 @@ const message = {
            setDefault: 'Restore Default',
            setHelper: 'The current settings will be saved. Do you want to continue?',
            setDefaultHelper: 'All panel settings will be restored to default. Do you want to continue?',
-            reset: 'Reset',
-            revertHtml: 'Do you want to restore {0} to the default page? ',
+            logoGroup: 'Logo',
+            imageGroup: 'Image',
+            loginImage: 'Login Page Image',
+            loginImageHelper: 'Displayed on the login page (recommended image size: 500*416px)',
+            loginBgType: 'Login Page Background Type',
+            loginBgImage: 'Login Page Background Image',
+            loginBgImageHelper: 'Displayed as background image on the login page (recommended image size: 1920*1080px)',
+            loginBgColor: 'Login Page Background Color',
+            loginBgColorHelper: 'Displayed as background color on the login page',
+            image: 'Image',
+            bgColor: 'Background Color',
        },
        helper: {
            wafTitle1: 'Interception Map',
@@ -3009,8 +3009,17 @@ const message = {
            setDefault: 'デフォルトに戻す',
            setHelper: '現在の設定が保存されます。続けますか？',
            setDefaultHelper: 'すべてのパネル設定がデフォルトに戻されます。続けますか？',
-            reset: 'リセット',
-            revertHtml: '{0}をデフォルトページに戻しますか？',
+            logoGroup: 'ロゴ',
+            imageGroup: '画像',
+            loginImage: 'ログインページの画像',
+            loginImageHelper: 'ログインページに表示されます（推奨画像サイズ：500×416px）',
+            loginBgType: 'ログインページ背景タイプ',
+            loginBgImage: 'ログインページ背景画像',
+            loginBgImageHelper: 'ログインページの背景画像として表示されます（推奨画像サイズ：1920×1080px）',
+            loginBgColor: 'ログインページ背景色',
+            loginBgColorHelper: 'ログインページの背景色として表示されます',
+            image: '画像',
+            bgColor: '背景色',
        },
        helper: {
            wafTitle1: 'インターセプションマップ',
@@ -2963,8 +2963,17 @@ const message = {
            setDefault: '기본값 복원',
            setHelper: '현재 설정이 저장됩니다. 계속하시겠습니까?',
            setDefaultHelper: '모든 패널 설정이 기본값으로 복원됩니다. 계속하시겠습니까?',
-            reset: '재설정',
-            revertHtml: '{0}을(를) 기본 페이지로 복원하시겠습니까?',
+            logoGroup: '로고',
+            imageGroup: '이미지',
+            loginImage: '로그인 페이지 이미지',
+            loginImageHelper: '로그인 페이지에 표시됩니다 (권장 크기: 500*416px)',
+            loginBgType: '로그인 배경 유형',
+            loginBgImage: '로그인 배경 이미지',
+            loginBgImageHelper: '로그인 페이지의 배경 이미지로 표시됩니다 (권장 크기: 1920*1080px)',
+            loginBgColor: '로그인 배경 색상',
+            loginBgColorHelper: '로그인 페이지의 배경 색상으로 표시됩니다',
+            image: '이미지',
+            bgColor: '배경 색상',
        },
        helper: {
            wafTitle1: '차단 지도',
@@ -3079,8 +3079,18 @@ const message = {
            setDefault: 'Pulihkan Tetapan Asal',
            setHelper: 'Tetapan semasa akan disimpan. Adakah anda ingin meneruskan?',
            setDefaultHelper: 'Semua tetapan panel akan dikembalikan ke asal. Adakah anda ingin meneruskan?',
-            reset: 'Tetapkan Semula',
-            revertHtml: 'Adakah anda ingin mengembalikan {0} ke halaman asal?',
+            logoGroup: 'Logo',
+            imageGroup: 'Imej',
+            loginImage: 'Imej Halaman Log Masuk',
+            loginImageHelper: 'Akan dipaparkan di halaman log masuk (Saiz disyorkan: 500*416px)',
+            loginBgType: 'Jenis Latar Halaman Log Masuk',
+            loginBgImage: 'Imej Latar Halaman Log Masuk',
+            loginBgImageHelper:
+                'Akan dipaparkan sebagai latar belakang halaman log masuk (Saiz disyorkan: 1920*1080px)',
+            loginBgColor: 'Warna Latar Halaman Log Masuk',
+            loginBgColorHelper: 'Akan dipaparkan sebagai warna latar belakang halaman log masuk',
+            image: 'Imej',
+            bgColor: 'Warna Latar',
        },
        helper: {
            wafTitle1: 'Peta Pencegahan',
@@ -3082,8 +3082,18 @@ const message = {
            setDefault: 'Restaurar Padrão',
            setHelper: 'As configurações atuais serão salvas. Deseja continuar?',
            setDefaultHelper: 'Todas as configurações do painel serão restauradas para o padrão. Deseja continuar?',
-            reset: 'Redefinir',
-            revertHtml: 'Deseja restaurar {0} para a página padrão?',
+            logoGroup: 'Logo',
+            imageGroup: 'Imagem',
+            loginImage: 'Imagem da Página de Login',
+            loginImageHelper: 'Será exibida na página de login (Tamanho recomendado: 500x416px)',
+            loginBgType: 'Tipo de Fundo da Página de Login',
+            loginBgImage: 'Imagem de Fundo da Página de Login',
+            loginBgImageHelper:
+                'Será exibida como imagem de fundo na página de login (Tamanho recomendado: 1920x1080px)',
+            loginBgColor: 'Cor de Fundo da Página de Login',
+            loginBgColorHelper: 'Será exibida como cor de fundo na página de login',
+            image: 'Imagem',
+            bgColor: 'Cor de Fundo',
        },
        helper: {
            wafTitle1: 'Mapa de Interceptação',
@@ -3073,8 +3073,17 @@ const message = {
            setDefault: 'Восстановить По Умолчанию',
            setHelper: 'Текущие настройки будут сохранены. Вы хотите продолжить?',
            setDefaultHelper: 'Все настройки панели будут восстановлены по умолчанию. Вы хотите продолжить?',
-            reset: 'Сброс',
-            revertHtml: 'Вы хотите восстановить {0} на страницу по умолчанию?',
+            logoGroup: 'Логотип',
+            imageGroup: 'Изображение',
+            loginImage: 'Изображение страницы входа',
+            loginImageHelper: 'Будет отображаться на странице входа (Рекомендуемый размер: 500x416px)',
+            loginBgType: 'Тип фона страницы входа',
+            loginBgImage: 'Фоновое изображение страницы входа',
+            loginBgImageHelper: 'Будет отображаться как фон страницы входа (Рекомендуемый размер: 1920x1080px)',
+            loginBgColor: 'Цвет фона страницы входа',
+            loginBgColorHelper: 'Будет отображаться как цвет фона страницы входа',
+            image: 'Изображение',
+            bgColor: 'Цвет фона',
        },
        helper: {
            wafTitle1: 'Карта Перехватов',
@@ -2924,7 +2924,17 @@ const message = {
            setDefault: '復原預設',
            setHelper: '即將儲存目前介面設定內容，是否繼續？',
            setDefaultHelper: '即將復原所有界面設定到初始狀態，是否繼續？',
-            reset: '重設',
+            logoGroup: 'Logo',
+            imageGroup: '圖片',
+            loginImage: '登入頁圖片',
+            loginImageHelper: '將會顯示在登入頁面（建議圖片大小為：500*416px）',
+            loginBgType: '登入頁背景類型',
+            loginBgImage: '登入頁背景圖片',
+            loginBgImageHelper: '將會顯示在登入頁面背景圖片（建議圖片大小為：1920*1080px）',
+            loginBgColor: '登入頁背景顏色',
+            loginBgColorHelper: '將會顯示在登入頁面背景顏色',
+            image: '圖片',
+            bgColor: '背景色',
        },
        helper: {
            wafTitle1: '攔截地圖',
@@ -2907,6 +2907,17 @@ const message = {
            reUpload: '选择文件',
            setHelper: '即将保存当前界面设置内容，是否继续？',
            setDefaultHelper: '即将恢复所有界面设置到初始状态，是否继续？',
+            logoGroup: 'Logo',
+            imageGroup: '图片',
+            loginImage: '登录页图片',
+            loginImageHelper: '将会显示在登录页面(建议图片大小为: 500*416px)',
+            loginBgType: '登录页背景类型',
+            loginBgImage: '登录页背景图片',
+            loginBgImageHelper: '将会显示在登录页面背景图片(建议图片大小为: 1920*1080px)',
+            loginBgColor: '登录页背景颜色',
+            loginBgColorHelper: '将会显示在登录页面背景颜色',
+            image: '图片',
+            bgColor: '背景色',
        },
        helper: {
            wafTitle1: '拦截地图',
@@ -10,6 +10,9 @@ export interface ThemeConfigProp {
    logo: string;
    logoWithText: string;
    favicon: string;
+    loginImage: string;
+    loginBgType: string;
+    loginBackground: string;
    themeColor: string;
 }

@@ -97,6 +97,9 @@ export async function getXpackSettingForTheme() {
            globalStore.themeConfig.logo = res2.data?.logo;
            globalStore.themeConfig.logoWithText = res2.data?.logoWithText;
            globalStore.themeConfig.favicon = res2.data?.favicon;
+            globalStore.themeConfig.loginImage = res2.data?.loginImage;
+            globalStore.themeConfig.loginBgType = res2.data?.loginBgType;
+            globalStore.themeConfig.loginBackground = res2.data?.loginBackground;
            globalStore.themeConfig.themeColor = res2.data?.themeColor;
            globalStore.themeConfig.theme = res2.data?.theme || 'auto';
        } else {
@@ -2,15 +2,23 @@
    <div class="flex items-center justify-center min-h-screen relative bg-gray-100">
        <div
            class="absolute inset-0 bg-cover bg-center bg-no-repeat"
-            :style="{ backgroundImage: `url(${backgroundImage})` }"
+            :style="
+                globalStore.themeConfig.loginBgType === 'color'
+                    ? { backgroundColor: globalStore.themeConfig.loginBackground }
+                    : { backgroundImage: `url(${loadImage('loginBackground')})` }
+            "
        ></div>
        <div
            :style="{ opacity: backgroundOpacity, width: containerWidth, height: containerHeight }"
            class="bg-white shadow-lg relative z-10 border border-gray-200 flex overflow-hidden"
        >
            <div class="grid grid-cols-1 md:grid-cols-2 items-stretch w-full h-full">
-                <div v-if="showLogo">
-                    <img :src="logoImage" class="max-w-full max-h-full object-contain" />
+                <div v-if="showLogo" class="flex justify-center">
+                    <img
+                        :src="loadImage('loginImage')"
+                        class="max-w-full max-h-full object-cover bg-cover bg-center"
+                        alt="1panel"
+                    />
                </div>
                <div :class="loginFormClass">
                    <LoginForm ref="loginRef"></LoginForm>
@@ -25,10 +33,8 @@ import LoginForm from './components/login-form.vue';
 import { ref, onMounted } from 'vue';
 import { GlobalStore } from '@/store';

-const gStore = GlobalStore();
-const backgroundOpacity = ref(0.8);
-const backgroundImage = ref(new URL('@/assets/images/1panel-login-bg.jpg', import.meta.url).href);
-const logoImage = ref(new URL('@/assets/images/1panel-login.jpg', import.meta.url).href);
+const globalStore = GlobalStore();
+const backgroundOpacity = ref(1);

 const mySafetyCode = defineProps({
    code: {
@@ -40,10 +46,32 @@ const mySafetyCode = defineProps({
 const getStatus = async () => {
    let code = mySafetyCode.code;
    if (code != '') {
-        gStore.entrance = code;
+        globalStore.entrance = code;
    }
 };

+const loadImage = (name: string) => {
+    switch (name) {
+        case 'loginImage':
+            if (globalStore.themeConfig.loginImage === 'loginImage') {
+                return `/api/v2/images/loginImage?t=${Date.now()}`;
+            }
+            return new URL('@/assets/images/1panel-login.jpg', import.meta.url).href;
+        case 'loginBackground':
+            if (globalStore.themeConfig.loginBgType === 'image') {
+                if (globalStore.themeConfig.loginBackground === 'loginBackground') {
+                    return `/api/v2/images/loginBackground?t=${Date.now()}`;
+                }
+                return new URL('@/assets/images/1panel-login-bg.jpg', import.meta.url).href;
+            } else if (globalStore.themeConfig.loginBgType === 'color') {
+                return globalStore.themeConfig.loginBackground;
+            } else {
+                return new URL('@/assets/images/1panel-login-bg.jpg', import.meta.url).href;
+            }
+    }
+    return '';
+};
+
 onMounted(() => {
    getStatus();
 });